/* =================================================================
   Collier Radko en or 18 ct — Gioielleria Guerriero 1891
   Design éditorial de luxe · or & porcelaine · zéro requête externe
   ================================================================= */

/* ---------- Fonts (auto-hébergées) ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jost-latin-600-normal.woff2') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --porcelain:#F7F3EC;
  --ivory:#FBF9F4;
  --ink:#211C17;
  --ink-soft:#6A5F52;
  --gold:#B08733;
  --gold-dark:#8A6522;
  --gold-light:#E7C876;
  --footer:#1B1712;
  --line:rgba(33,28,23,.12);
  --gold-grad:linear-gradient(100deg,#8A6522,#C79A45,#EBCB7C,#C79A45,#8A6522);
  --shadow:0 24px 60px -32px rgba(33,28,23,.4);
  --shadow-soft:0 14px 34px -22px rgba(33,28,23,.32);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --header-h:76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:clamp(15px,.55vw + 13.5px,17px);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;letter-spacing:.005em}
p{margin:0}
:focus-visible{outline:2px solid var(--gold-dark);outline-offset:3px;border-radius:2px}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:1220px;margin-inline:auto;padding-inline:clamp(20px,5vw,52px)}
.section{padding-block:clamp(60px,8.5vw,124px)}
.eyebrow{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dark)}
.lead{color:var(--ink-soft);font-size:1.08rem;line-height:1.72}

/* ---------- Signature : dégradé étagé ---------- */
.degrade{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1vw,8px);height:34px}
.degrade i{display:block;width:var(--s);height:var(--s);transform:rotate(45deg);background:var(--gold-grad);border-radius:1px;opacity:.92}
.degrade--left{justify-content:flex-start}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.92em 1.7em;font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;border-radius:2px;border:1px solid transparent;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold-grad);color:#241a07;box-shadow:var(--shadow-soft)}
.btn--gold:hover{box-shadow:0 18px 40px -18px rgba(138,101,34,.7)}
.btn--ink{background:var(--ink);color:var(--porcelain)}
.btn--ink:hover{background:#000}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold-dark);color:var(--gold-dark)}
.btn--light{background:transparent;border-color:rgba(247,243,236,.34);color:var(--porcelain)}
.btn--light:hover{border-color:var(--gold-light);color:var(--gold-light)}
.btn--sm{padding:.72em 1.2em;font-size:.74rem}
.link-gold{font-weight:500;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .25s,color .25s}
.link-gold:hover{border-color:var(--gold-dark)}
.link-gold::after{content:" \2192";letter-spacing:0}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:var(--porcelain);border-bottom:1px solid var(--line)}
.header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold-grad)}
.header__bar{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.header__logo img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:30px;margin-left:14px}
.nav a{font-size:.82rem;letter-spacing:.04em;color:var(--ink);position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold-dark);transition:width .28s ease}
.nav a:hover::after{width:100%}
.header__spacer{flex:1}
.header__phone{display:inline-flex;align-items:center;gap:.5em;font-size:.82rem;color:var(--ink-soft);white-space:nowrap}
.header__phone:hover{color:var(--gold-dark)}
.header__cta{white-space:nowrap}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:transparent;border:1px solid var(--line);border-radius:2px}
.burger span{display:block;height:1.5px;width:20px;margin-inline:auto;background:var(--ink);transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile menu — fond SOLIDE, aucun backdrop-filter (évite le bug du menu fixe) */
.mobile-nav{position:fixed;inset:var(--header-h) 0 0 0;z-index:55;background:var(--porcelain);transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility .3s;display:flex;flex-direction:column;padding:28px clamp(20px,6vw,40px) 40px;border-top:1px solid var(--line)}
.mobile-nav.open{opacity:1;visibility:visible;transform:translateY(0)}
.mobile-nav a{font-family:var(--serif);font-size:1.9rem;font-weight:500;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.mobile-nav .btn{margin-top:26px}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--porcelain)}
.hero__figure{position:relative;width:100%;aspect-ratio:16/12;overflow:hidden}
.hero__figure img{width:100%;height:100%;object-fit:cover;object-position:28% 28%}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(to top,var(--porcelain) 2%,rgba(247,243,236,0) 46%)}
.hero__content{padding:clamp(30px,6vw,54px) clamp(20px,5vw,52px) clamp(52px,7vw,72px)}
.hero__inner{max-width:1220px;margin-inline:auto}
.hero .eyebrow{display:block;margin-bottom:18px}
.hero h1{font-size:clamp(2.7rem,8.4vw,5.1rem);font-weight:500}
.hero h1 em{font-style:italic;color:var(--gold-dark)}
.hero__sub{margin-top:20px;max-width:44ch;color:var(--ink-soft);font-size:1.1rem;line-height:1.7}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:34px;font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase}
.trust span{display:inline-flex;align-items:center;gap:9px}
.trust span::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--gold-grad)}

@media (min-width:861px){
  .hero{min-height:calc(100vh - var(--header-h));display:flex;align-items:stretch}
  .hero__figure{position:absolute;inset:0;aspect-ratio:auto;height:100%}
  .hero__figure img{object-position:22% 42%}
  .hero__scrim{background:linear-gradient(100deg,rgba(247,243,236,0) 30%,rgba(247,243,236,.72) 52%,var(--porcelain) 68%)}
  .hero__content{position:relative;z-index:2;display:flex;align-items:center;width:100%}
  .hero__inner{width:100%;padding-left:52%}
  .hero__sub{max-width:40ch}
}
@media (min-width:1180px){.hero__inner{padding-left:54%}}

/* ---------- El collier / intro ---------- */
.intro__grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,64px);align-items:center}
.intro__figure{position:relative}
.intro__figure img{border-radius:2px;box-shadow:var(--shadow);background:#fff}
.intro__figure .tag{position:absolute;left:18px;bottom:18px;background:rgba(27,23,18,.82);color:var(--porcelain);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;padding:8px 14px;border-radius:2px}
.intro h2{font-size:clamp(2rem,4.6vw,3.35rem);font-weight:500;margin-bottom:8px}
.intro h2 em{font-style:italic;color:var(--gold-dark)}
.intro__body p + p{margin-top:16px}
.facts{display:flex;gap:clamp(20px,4vw,44px);margin:30px 0 30px}
.fact__n{font-family:var(--serif);font-size:2.5rem;font-weight:600;color:var(--gold-dark);line-height:1}
.fact__l{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
@media (min-width:861px){.intro__grid{grid-template-columns:0.92fr 1.08fr}}

/* ---------- Versions (cards) ---------- */
.versions{background:var(--ivory);border-block:1px solid var(--line)}
.sec-head{text-align:center;max-width:52ch;margin-inline:auto;margin-bottom:clamp(34px,5vw,58px)}
.sec-head .degrade{margin-bottom:20px}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.15rem)}
.sec-head p{margin-top:14px;color:var(--ink-soft)}
.cards{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,30px)}
.card{background:var(--porcelain);border:1px solid var(--line);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card__media{aspect-ratio:4/5;overflow:hidden;background:#fff}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__media img{transform:scale(1.045)}
.card__body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.card__kicker{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dark)}
.card__body h3{font-size:1.72rem;margin:10px 0 8px}
.card__body p{color:var(--ink-soft);font-size:.96rem;flex:1}
.card__body .link-gold{margin-top:18px;align-self:flex-start}
@media (min-width:720px){.cards{grid-template-columns:repeat(3,1fr)}}

/* ---------- Avantages ---------- */
.adv{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.adv__item{background:var(--porcelain);padding:34px 28px}
.adv__ic{width:34px;height:34px;margin-bottom:16px;color:var(--gold-dark)}
.adv__item h3{font-size:1.4rem;margin-bottom:6px}
.adv__item p{color:var(--ink-soft);font-size:.92rem}
@media (min-width:560px){.adv{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.adv{grid-template-columns:repeat(4,1fr)}}

/* ---------- Klarna (bande sombre) ---------- */
.klarna{background:var(--footer);color:var(--porcelain);position:relative;overflow:hidden}
.klarna::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 82% 0%,rgba(199,154,69,.16),transparent 60%)}
.klarna .wrap{position:relative}
.klarna__grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,64px);align-items:center}
.klarna .eyebrow{color:var(--gold-light)}
.klarna__badge{display:block;width:128px;height:auto;margin-bottom:20px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.klarna h2{font-size:clamp(2rem,4.4vw,3.15rem);margin:16px 0;color:#fff}
.klarna h2 em{font-style:italic;color:var(--gold-light)}
.klarna p{color:rgba(247,243,236,.76)}
.klarna__cta{margin-top:28px}
.steps{display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:18px;align-items:flex-start;padding:20px 22px;background:rgba(247,243,236,.05);border:1px solid rgba(247,243,236,.12);border-radius:2px}
.step__n{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--gold-light);min-width:34px;line-height:1.2}
.step h3{font-size:1.24rem;color:#fff;margin-bottom:2px;font-weight:500}
.step p{font-size:.9rem}
@media (min-width:861px){.klarna__grid{grid-template-columns:1fr 1fr}}

/* ---------- Boutique / localisation ---------- */
.store__grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,56px);align-items:center}
.store h2{font-size:clamp(2rem,4.4vw,3.15rem);margin:14px 0 18px}
.store__nap{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:14px}
.store__nap li{display:flex;gap:14px;align-items:flex-start;color:var(--ink-soft)}
.store__nap svg{width:20px;height:20px;color:var(--gold-dark);flex:none;margin-top:2px}
.store__nap a:hover{color:var(--gold-dark)}
.store__cta{display:flex;flex-wrap:wrap;gap:14px}
.map-card{position:relative;border-radius:2px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft);background:linear-gradient(135deg,#efe8db,#f7f3ec);aspect-ratio:4/3;min-height:280px}
.map-card__grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:38px 38px;opacity:.5}
.map-card__road{position:absolute;background:rgba(176,135,51,.28)}
.map-card__pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);text-align:center}
.map-card__pin svg{width:42px;height:42px;color:var(--gold-dark);filter:drop-shadow(0 8px 10px rgba(33,28,23,.25))}
.map-card__pin span{display:block;margin-top:4px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--porcelain);padding:3px 9px;border-radius:2px;box-shadow:var(--shadow-soft)}
.map-card__link{position:absolute;inset:0;z-index:2}
@media (min-width:861px){.store__grid{grid-template-columns:1.02fr .98fr}}

/* ---------- CTA finale ---------- */
.final{text-align:center;background:var(--ivory);border-top:1px solid var(--line)}
.final .degrade{margin-bottom:24px}
.final h2{font-size:clamp(2.3rem,6vw,4.2rem);font-weight:500;font-style:italic}
.final h2 span{font-style:normal;display:block;font-size:.42em;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:14px;font-family:var(--sans);font-weight:500}
.final .btn{margin-top:34px}

/* ---------- Footer ---------- */
.footer{background:var(--footer);color:rgba(247,243,236,.7);padding-block:clamp(52px,6vw,80px) 0}
.footer__grid{display:grid;grid-template-columns:1fr;gap:44px}
.footer__brand img{height:40px;width:auto;margin-bottom:18px}
.footer__brand p{max-width:38ch;font-size:.92rem;line-height:1.7}
.socials{display:flex;gap:12px;margin-top:22px}
.socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(247,243,236,.18);border-radius:50%;color:var(--porcelain);transition:border-color .25s,color .25s,transform .25s}
.socials a:hover{border-color:var(--gold-light);color:var(--gold-light);transform:translateY(-2px)}
.socials svg{width:17px;height:17px}
.footer__col h4{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin:0 0 16px}
.footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.footer__col a{font-size:.92rem;color:rgba(247,243,236,.72)}
.footer__col a:hover{color:var(--porcelain)}
.footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.footer__bottom{margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(247,243,236,.12);padding-block:26px 34px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;font-size:.8rem}
.footer__bottom .legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.ai-act{background:rgba(247,243,236,.04);border:1px solid rgba(247,243,236,.1);border-radius:2px;padding:16px 20px;margin-top:22px;font-size:.92rem;line-height:1.6;color:#f2ede3;display:flex;gap:12px;align-items:flex-start}
.ai-act svg{width:18px;height:18px;flex:none;color:var(--gold-light);margin-top:1px}
@media (min-width:861px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}.footer__cols{display:contents}}

/* ---------- Boutons flottants (FAB) ---------- */
.fab{position:fixed;right:18px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:12px}
.fab a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(33,28,23,.5);transition:transform .25s}
.fab a:hover{transform:scale(1.07)}
.fab svg{width:26px;height:26px}
.fab__wa{background:#25D366;color:#fff}
.fab__tel{background:var(--ink);color:var(--porcelain)}

/* ---------- Bandeau cookie-free (bas-gauche, compact, non centré) ---------- */
.cookie{position:fixed;left:16px;bottom:20px;z-index:65;max-width:400px;margin-right:90px;background:var(--footer);color:rgba(247,243,236,.82);border:1px solid rgba(199,154,69,.35);border-radius:3px;box-shadow:var(--shadow);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;transform:translateY(16px);opacity:0;transition:opacity .4s ease,transform .4s ease}
.cookie.show{opacity:1;transform:translateY(0)}
.cookie[hidden]{display:none}
.cookie p{font-size:.8rem;line-height:1.55}
.cookie a{color:var(--gold-light);text-decoration:underline;text-underline-offset:2px}
.cookie a:hover{color:#fff}
.cookie__ic{width:20px;height:20px;flex:none;color:var(--gold-light);margin-top:1px}
.cookie__ok{flex:none;align-self:center;background:var(--gold-grad);color:#241a07;border:none;border-radius:2px;padding:.6em 1.05em;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:520px){.cookie{left:12px;right:12px;max-width:none;margin-right:76px}}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive header ---------- */
@media (max-width:980px){
  .nav,.header__phone{display:none}
  .burger{display:flex}
  .header__cta{display:none}
}
@media (min-width:981px){.mobile-nav{display:none}}


/* ===== Transparence images IA — art. 50 Règl. UE 2024/1689 ===== */
.ia-topbar{background:#f7f5f0;border-bottom:1px solid rgba(120,100,50,.16)}
.ia-topbar .wrap{display:flex;align-items:flex-start;gap:10px;padding-top:11px;padding-bottom:11px}
.ia-topbar svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:#8a6f37}
.ia-topbar p{margin:0;font-size:13.5px;line-height:1.55;color:#544a38;max-width:96ch}
.card__media,.intro__figure{position:relative}
.ia-badge{position:absolute;bottom:10px;right:10px;z-index:5;padding:3px 9px;border-radius:999px;
  text-align:right;background:rgba(20,18,14,.55);color:rgba(255,255,255,.93);font-size:10px;
  font-weight:600;letter-spacing:.02em;line-height:1.3;pointer-events:none;
  backdrop-filter:blur(2px);max-width:calc(100% - 20px)}
.ia-badge--gen{background:rgba(58,30,20,.62)}
.hero__figure>.ia-badge{bottom:auto;top:14px;right:14px;z-index:4}
.nota-ia{margin:26px auto 0;max-width:72ch;text-align:center;font-size:13.5px;line-height:1.6;color:#6b6252}
.footer__ai p,.footer__ai{font-size:.92rem;line-height:1.62;color:#f2ede3}
@media(max-width:600px){.ia-topbar p{font-size:12.5px}.nota-ia{font-size:12.5px}}