/* ============================================================
   VISION 12 — "ATELIER DE JOUR" · clair couture
   Bodoni Moda × Hanken Grotesk · albâtre chaud · or · bandes sombres en accent
   ============================================================ */

:root{
  --paper:    #FFFFFF;   /* fond principal (blanc) */
  --paper-2:  #EEF3FB;   /* sections alternées (bleu très clair) */
  --card:     #FFFFFF;   /* cartes */
  --card-2:   #E9F0FB;   /* hover */
  --ink:      #0E1B33;   /* texte principal (bleu nuit) */
  --ink-soft: #41506B;   /* texte secondaire */
  --muted:    #8492AB;
  --line:     rgba(20,66,158,.14);
  --line-2:   rgba(20,66,158,.26);
  --gold:     #14429E;   /* BLEU MARQUE (accent) */
  --gold-deep:#0F3275;   /* bleu foncé (texte accent, contraste) */
  --gold-soft:#3E66BE;
  --gold2:    #B5904F;   /* or/tan secondaire (logo : lunettes + sous-titre) */
  --gold2-deep:#94733A;

  /* bandes profondes (hero image, boutique, cta, footer, intro, page-hero) */
  --dband:    #0E2A5E;   /* bleu profond */
  --dband-2:  #123473;
  --dtext:    #F2F5FB;
  --dtext-2:  #BCC9E2;
  --dgold:    #9DBBF2;   /* bleu clair (accent sur bande sombre) */
  --dline:    rgba(255,255,255,.18);

  --maxw: 1280px;
  --gut: clamp(22px, 5vw, 72px);
  --r-sm: 4px; --r: 8px; --r-lg: 14px;

  --ease: cubic-bezier(.2,.6,.25,1);
  --slow: 1s var(--ease);
  --t: .55s var(--ease);

  --display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shadow: 0 30px 72px -54px rgba(15,30,70,.32);
  --glow:   0 0 44px -14px rgba(20,66,158,.34);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; font-family:var(--body); color:var(--ink); background:var(--paper);
  font-size:17px; line-height:1.7; font-weight:380; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}

/* film grain (subtil, sur fond clair = grain papier) */
body::after{
  content:""; position:fixed; inset:-50%; z-index:60; pointer-events:none;
  opacity:.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference){ body::after{ animation:grain 6s steps(6) infinite; } }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,1%)} 80%{transform:translate(3%,2%)} 100%{transform:translate(0,0)} }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:500; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
em{ font-style:italic; }
::selection{ background:rgba(20,66,158,.24); color:#1a140a; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px; font-size:14px; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

.ic{ width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.ic--arrow{ transition:transform var(--t); }

/* ---------- typographie ---------- */
.eyebrow{ display:flex; align-items:center; gap:14px; margin:0 0 26px;
  font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold-deep); }
.eyebrow__line{ width:38px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); display:inline-block; }
.eyebrow--center{ justify-content:center; }
.eyebrow--center .eyebrow__line:last-child{ background:linear-gradient(270deg,var(--gold),transparent); }
.eyebrow--light{ color:var(--dgold); }
.eyebrow--light .eyebrow__line{ background:linear-gradient(90deg,var(--dgold),transparent); }

.section-title{ font-family:var(--display); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(34px, 5.2vw, 62px); line-height:1.04; color:var(--ink); }
.section-title em{ font-style:italic; color:var(--gold-deep); }
.section-title--light{ color:#fff; }
.section-title--light em{ color:var(--dgold); }

.section-head{ margin-bottom:clamp(44px,6vw,76px); max-width:780px; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--row{ display:flex; justify-content:space-between; align-items:flex-end; gap:48px; max-width:none; }
.section-head__aside{ max-width:340px; color:var(--ink-soft); padding-bottom:10px; font-size:15.5px; }
@media (max-width: 820px){ .section-head--row{ flex-direction:column; align-items:flex-start; gap:20px; } }

/* ---------- boutons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--body); font-size:13.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  line-height:1; padding:16px 30px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  white-space:nowrap; position:relative;
  transition:transform var(--t), background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
  -webkit-tap-highlight-color:transparent; }
.btn--sm{ padding:12px 20px; font-size:12px; }
.btn--lg{ padding:19px 38px; font-size:14px; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--solid{ background:var(--gold); color:#fff; }
.btn--solid:hover{ background:var(--gold-deep); box-shadow:0 14px 30px -18px rgba(20,66,158,.5); }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--line:hover{ border-color:var(--ink); }
.btn--line:hover .ic--arrow{ transform:translateX(4px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--gold{ background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#ffffff; }
.btn--gold:hover{ box-shadow:var(--glow); }
.btn--line-light{ color:var(--dtext); border-color:var(--dline); }
.btn--line-light:hover{ border-color:var(--dgold); color:var(--dgold); }
.cta .btn--gold, .boutique__card .btn--gold{ background:#fff; color:var(--gold); }
.cta .btn--gold:hover, .boutique__card .btn--gold:hover{ background:#EAF1FB; color:var(--gold-deep); box-shadow:none; }

/* ---------- utility bar ---------- */
.utility-bar{ background:var(--paper-2); border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.04em; }
.utility-bar__inner{ display:flex; align-items:center; gap:30px; height:42px; justify-content:center; }
.utility-bar__item{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); }
.utility-bar__item .ic{ width:14px; height:14px; color:var(--gold-deep); }
.utility-bar__phone{ color:var(--ink); font-weight:600; transition:color var(--t); }
.utility-bar__phone:hover{ color:var(--gold-deep); }
@media (max-width: 860px){ .utility-bar__inner{ gap:18px; height:auto; padding-block:9px; } .utility-bar__item:nth-child(2){ display:none; } }
@media (max-width: 560px){ .utility-bar__item:first-child{ display:none; } }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.72);
  backdrop-filter:saturate(140%) blur(16px); -webkit-backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid transparent; transition:border-color var(--t), background var(--t), box-shadow var(--t); }
.nav.is-stuck{ background:rgba(255,255,255,.95); border-bottom-color:var(--line); box-shadow:0 12px 40px -30px rgba(15,30,70,.4); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:92px; transition:height var(--t); }
.nav.is-stuck .nav__inner{ height:74px; }
.brand{ display:inline-flex; align-items:center; gap:13px; }
.brand__glasses{ width:48px; height:auto; stroke:var(--gold2); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.brand__word{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:.1em; color:var(--gold); line-height:1; text-transform:uppercase; white-space:nowrap; }
.brand__num{ color:var(--gold); font-style:normal; }
.brand__sub{ font-family:var(--body); font-size:8.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--gold2); margin-top:7px; }
.nav__links{ display:flex; gap:clamp(24px,2.6vw,40px); margin-inline:auto; }
.nav__links a{ position:relative; font-size:12px; font-weight:600; color:var(--ink-soft); letter-spacing:.18em; text-transform:uppercase; transition:color var(--t); padding-block:8px; }
.nav__links a::after{ content:""; position:absolute; left:50%; right:50%; bottom:2px; height:1px; background:var(--gold); transition:left var(--t), right var(--t); }
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ left:0; right:0; }
.nav__cta{ display:flex; align-items:center; gap:22px; }
.nav__phone{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:.02em; font-variant-numeric:tabular-nums; transition:color var(--t); white-space:nowrap; }
.nav__phone .ic{ width:15px; height:15px; color:var(--gold-deep); }
.nav__phone:hover{ color:var(--gold-deep); }
.nav__burger{ display:none; flex-direction:column; gap:5px; width:46px; height:46px; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; }
.nav__burger span{ width:24px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .35s var(--ease), opacity .25s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.drawer{ display:flex; flex-direction:column; gap:2px; padding:16px var(--gut) 30px; border-top:1px solid var(--line); background:var(--paper); }
.drawer[hidden]{ display:none; }
.drawer a{ padding:16px 4px; font-size:16px; font-weight:500; color:var(--ink); letter-spacing:.04em; border-bottom:1px solid var(--line); }
.drawer a:last-child{ border:none; margin-top:16px; text-align:center; }
@media (max-width: 1024px){ .nav__links, .nav__phone{ display:none; } }
@media (max-width: 720px){ .nav__cta .btn--solid{ display:none; } .nav__burger{ display:flex; } }

/* ---------- hero ---------- */
.hero{ position:relative; padding-top:clamp(54px,8vw,104px); overflow:hidden; }
.hero::before{ content:""; position:absolute; top:-12%; right:-6%; width:60vw; height:60vw; max-width:760px; max-height:760px;
  background:radial-gradient(circle, rgba(20,66,158,.14), rgba(20,66,158,.05) 40%, transparent 66%); pointer-events:none; z-index:0; }
.hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,80px); align-items:center; }
.hero__title{ font-family:var(--display); font-weight:500; letter-spacing:-.018em; font-size:clamp(46px, 7.4vw, 96px); line-height:1.0; margin:0 0 30px; color:var(--ink); }
.hero__title em{ font-style:italic; color:var(--gold-deep); }
.hero__lead{ font-size:clamp(16.5px,1.35vw,18.5px); color:var(--ink-soft); max-width:470px; margin-bottom:38px; line-height:1.75; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:42px; }
.hero__trust{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-top:30px; border-top:1px solid var(--line); }
.rating{ display:flex; align-items:center; gap:11px; }
.rating__stars{ color:var(--gold); letter-spacing:3px; font-size:15px; }
.rating__text{ font-size:13.5px; color:var(--ink-soft); }
.rating__text strong{ color:var(--ink); }
.hero__trust-sep{ width:1px; height:28px; background:var(--line-2); }
.hero__trust-note{ font-size:13px; color:var(--muted); letter-spacing:.02em; }
.hero__media{ position:relative; }
.hero__figure{ position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:4/5; background:var(--card); border:1px solid var(--line); }
.hero__figure img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.hero__figure::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 62%, rgba(10,22,52,.35)); }
.hero__badge{ position:absolute; left:-24px; bottom:38px; z-index:2; display:flex; align-items:center; gap:14px;
  padding:18px 24px 18px 20px; background:var(--card); backdrop-filter:blur(10px);
  border-radius:var(--r); border:1px solid var(--line-2); box-shadow:var(--shadow); }
.hero__badge-num{ font-family:var(--display); font-style:italic; font-size:38px; font-weight:500; color:var(--gold-deep); line-height:1; }
.hero__badge-num sup{ font-size:.45em; }
.hero__badge-txt{ font-size:12px; line-height:1.35; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; }
@media (max-width: 880px){ .hero__grid{ grid-template-columns:1fr; } .hero__media{ max-width:460px; margin-inline:auto; width:100%; } .hero__badge{ left:6px; } }

.reveal-letters .word{ display:inline-block; white-space:nowrap; }
.reveal-letters .ch{ display:inline-block; opacity:0; transform:translateY(.5em) rotate(2deg); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-letters.is-in .ch{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal-letters .ch{ opacity:1; transform:none; transition:none; } }

.marquee{ margin-top:clamp(64px,7vw,104px); border-block:1px solid var(--line); background:transparent; overflow:hidden; }
.marquee__track{ display:flex; gap:30px; align-items:center; width:max-content; padding-block:24px; animation:marquee 54s linear infinite; }
.marquee__track span{ font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.marquee__track span:nth-child(even){ color:var(--gold); letter-spacing:0; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ---------- features ---------- */
.features{ padding-block:clamp(86px,9.5vw,148px); }
.features__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.feature{ padding:6px clamp(24px,2.4vw,38px); border-left:1px solid var(--line); }
.feature:first-child{ border-left:none; padding-left:0; }
.feature__no{ font-family:var(--display); font-style:italic; font-size:20px; color:var(--gold-deep); display:block; margin-bottom:22px; }
.feature h3{ font-family:var(--display); font-size:21px; font-weight:500; margin-bottom:12px; color:var(--ink); }
.feature p{ font-size:14.5px; color:var(--ink-soft); }
@media (max-width: 860px){ .features__grid{ grid-template-columns:1fr 1fr; gap:40px 0; }
  .feature{ border-left:1px solid var(--line); padding-left:clamp(24px,4vw,38px); } .feature:nth-child(odd){ border-left:none; padding-left:0; } }
@media (max-width: 480px){ .features__grid{ grid-template-columns:1fr; gap:0; }
  .feature{ border-left:none; padding:26px 0; border-top:1px solid var(--line); } .feature:first-child{ border-top:none; padding-top:6px; } }

/* ---------- process ---------- */
.process{ padding-block:clamp(86px,9.5vw,148px); background:var(--paper-2); border-block:1px solid var(--line); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(26px,3vw,48px); }
.step__num{ display:grid; place-items:center; width:58px; height:58px; border-radius:50%; border:1px solid var(--line-2);
  font-family:var(--display); font-style:italic; font-size:24px; color:var(--gold-deep); margin-bottom:28px; transition:var(--t);
  background:radial-gradient(circle at 50% 35%, rgba(20,66,158,.1), transparent 70%); }
.step:hover .step__num{ background:var(--gold); color:#ffffff; border-color:var(--gold); box-shadow:var(--glow); }
.step h3{ font-family:var(--display); font-size:21px; font-weight:500; margin-bottom:12px; color:var(--ink); }
.step p{ font-size:14.5px; color:var(--ink-soft); }
@media (max-width: 900px){ .steps{ grid-template-columns:1fr 1fr; gap:44px 32px; } }
@media (max-width: 520px){ .steps{ grid-template-columns:1fr; gap:36px; } }

/* ---------- services ---------- */
.services{ padding-block:clamp(86px,9.5vw,148px); }
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(34px,3.4vw,60px) clamp(40px,4vw,72px); }
.svc{ background:transparent; padding:36px 0 0; display:flex; flex-direction:column; align-items:flex-start; border-top:1px solid var(--line); }
.svc:hover{ background:transparent; }
.svc__ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; border:1px solid var(--line-2); color:var(--gold-deep); margin-bottom:24px; transition:var(--t); }
.svc:hover .svc__ico{ background:var(--gold); color:#ffffff; border-color:var(--gold); box-shadow:var(--glow); }
.svc__ico svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.svc h3{ font-family:var(--display); font-size:23px; font-weight:500; margin-bottom:12px; color:var(--ink); }
.svc p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:22px; flex:1; }
.svc__link{ display:inline-flex; align-items:center; gap:10px; font-size:11.5px; font-weight:600; color:var(--gold-deep); letter-spacing:.16em; text-transform:uppercase; }
.svc__link i{ width:18px; height:1px; background:currentColor; display:inline-block; transition:width var(--t); position:relative; }
.svc__link i::after{ content:""; position:absolute; right:0; top:-2.5px; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }
.svc__link:hover i{ width:30px; }
@media (max-width: 920px){ .services__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .services__grid{ grid-template-columns:1fr; } }

/* ---------- editorial split ---------- */
.editorial{ padding-block:clamp(30px,4vw,56px); }
.editorial__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,84px); align-items:center; }
.editorial__media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:1/1; background:var(--card); border:1px solid var(--line); }
.editorial__media img{ width:100%; height:100%; object-fit:cover; }
.editorial__text p{ color:var(--ink-soft); margin:22px 0 28px; max-width:470px; }
.ticklist{ display:flex; flex-direction:column; gap:14px; margin-bottom:34px; }
.ticklist li{ position:relative; padding-left:32px; font-size:15.5px; color:var(--ink); }
.ticklist li::before{ content:""; position:absolute; left:0; top:7px; width:16px; height:9px; border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(-45deg); }
@media (max-width: 860px){ .editorial__grid{ grid-template-columns:1fr; gap:36px; } .editorial__media{ max-width:520px; } }

/* ---------- lookbook (images sombres) ---------- */
.lookbook{ padding-block:clamp(58px,7vw,100px); }
.lookbook__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,32px); }
.lookbook__item{ position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); background:var(--card); border:1px solid var(--line); }
.lookbook__item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.lookbook__item:hover img{ transform:scale(1.05); }
.lookbook__item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 38%, rgba(10,22,52,.86)); }
.lookbook__item figcaption{ position:absolute; left:0; bottom:0; z-index:2; color:#F4EEE3; padding:clamp(24px,3vw,38px); font-family:var(--display); font-size:clamp(19px,2vw,25px); line-height:1.35; max-width:92%; font-weight:500; }
.lookbook__item figcaption span{ display:block; font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--dgold); margin-bottom:12px; }
@media (max-width: 600px){ .lookbook__grid{ grid-template-columns:1fr; } }

/* ---------- boutique (bande sombre) ---------- */
.boutique{ position:relative; margin-block:clamp(58px,7vw,100px); min-height:clamp(480px,64vw,680px); display:flex; align-items:center; border-block:1px solid var(--line); }
.boutique__media{ position:absolute; inset:0; overflow:hidden; }
.boutique__media img{ width:100%; height:100%; object-fit:cover; }
.boutique__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,22,52,.92) 0%, rgba(10,22,52,.7) 42%, rgba(10,22,52,.25) 100%); }
.boutique__overlay{ position:relative; width:100%; }
.boutique__card{ max-width:540px; }
.boutique__card p{ color:var(--dtext-2); margin:24px 0 32px; }
@media (max-width: 640px){ .boutique__media::after{ background:linear-gradient(180deg, rgba(10,22,52,.6), rgba(10,22,52,.92)); } }

/* ---------- reviews ---------- */
.reviews{ padding-block:clamp(86px,9.5vw,148px); }
.reviews__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.review{ margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:32px 28px; display:flex; flex-direction:column; transition:var(--t); }
.review:hover{ transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--shadow); }
.review__stars{ color:var(--gold); letter-spacing:2px; font-size:14px; margin-bottom:20px; }
.review blockquote{ margin:0 0 24px; font-family:var(--display); font-size:18px; line-height:1.5; font-style:italic; color:var(--ink); flex:1; }
.review figcaption{ display:flex; flex-direction:column; gap:3px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; }
.review figcaption strong{ font-weight:600; color:var(--ink); }
.review figcaption span{ color:var(--muted); font-size:12.5px; letter-spacing:.04em; }
@media (max-width: 960px){ .reviews__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .reviews__grid{ grid-template-columns:1fr; } }

/* ---------- gallery ---------- */
.gallery{ padding-block:clamp(86px,9.5vw,148px); }
.gallery__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.gallery__item{ position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); background:var(--card-2); }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gallery__item:hover img{ transform:scale(1.04); }
.gallery__item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(10,22,52,.72)); }
.gallery__item figcaption{ position:absolute; left:0; bottom:0; z-index:2; color:#fff; padding:24px 26px; font-family:var(--display); font-size:clamp(19px,2vw,23px); font-weight:500; }
@media (max-width: 760px){ .gallery__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }

/* ---------- values ---------- */
.values{ padding-block:clamp(86px,9.5vw,148px); background:var(--paper-2); border-block:1px solid var(--line); }
.values__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,84px); align-items:center; }
.values__media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; background:var(--card); border:1px solid var(--line); }
.values__media img{ width:100%; height:100%; object-fit:cover; }
.values__text p{ color:var(--ink-soft); margin:22px 0 40px; max-width:520px; }
.values__stats{ display:flex; gap:clamp(30px,4vw,60px); }
.stat__num{ display:block; font-family:var(--display); font-style:italic; font-size:clamp(38px,4.5vw,56px); font-weight:500; color:var(--gold-deep); line-height:1; }
.stat__small{ font-size:.5em; color:var(--ink-soft); font-style:normal; }
.stat__lbl{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:12px; display:block; }
@media (max-width: 860px){ .values__grid{ grid-template-columns:1fr; gap:36px; } .values__media{ max-width:440px; } }

/* ---------- hoods ---------- */
.hoods{ padding-block:clamp(86px,9.5vw,148px); }
.hoods__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.hood{ padding:34px 28px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); transition:var(--t); }
.hood:hover{ transform:translateY(-4px); border-color:var(--line-2); background:var(--card-2); }
.hood h3{ font-family:var(--display); font-size:26px; font-weight:500; margin-bottom:10px; color:var(--ink); }
.hood p{ font-size:14.5px; color:var(--ink-soft); }
@media (max-width: 860px){ .hoods__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 460px){ .hoods__grid{ grid-template-columns:1fr; } }

/* ---------- cta (bande sombre) ---------- */
.cta{ position:relative; padding-block:clamp(78px,9vw,134px); overflow:hidden; background:var(--dband); border-block:1px solid var(--dline); }
.cta::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 90% at 50% 0%, rgba(130,170,240,.16), transparent 60%); }
.cta .eyebrow{ color:var(--dgold); }
.cta .eyebrow__line{ background:linear-gradient(90deg,var(--dgold),transparent); }
.cta .eyebrow--center .eyebrow__line:last-child{ background:linear-gradient(270deg,var(--dgold),transparent); }
.cta__inner{ position:relative; text-align:center; max-width:780px; }
.cta__title{ font-family:var(--display); font-weight:500; letter-spacing:-.012em; font-size:clamp(36px,5.6vw,70px); line-height:1.03; margin:0 0 24px; color:#fff; }
.cta__title em{ font-style:italic; color:var(--dgold); }
.cta__lead{ color:var(--dtext-2); font-size:18px; max-width:520px; margin:0 auto 42px; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* ---------- faq ---------- */
.faq{ padding-block:clamp(86px,9.5vw,148px); }
.faq__grid{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(38px,5vw,76px); }
.faq .section-head{ margin-bottom:0; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item:first-child{ border-top:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 4px;
  font-family:var(--display); font-size:clamp(18px,1.9vw,23px); font-weight:500; color:var(--ink); transition:color var(--t); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--gold-deep); }
.faq__plus{ position:relative; flex:0 0 auto; width:22px; height:22px; }
.faq__plus::before,.faq__plus::after{ content:""; position:absolute; left:50%; top:50%; background:var(--gold-deep); transition:transform var(--t); }
.faq__plus::before{ width:14px; height:1.5px; transform:translate(-50%,-50%); }
.faq__plus::after{ width:1.5px; height:14px; transform:translate(-50%,-50%); }
.faq__item[open] .faq__plus::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__body{ overflow:hidden; padding:0 4px; max-width:660px; max-height:0; opacity:0; transition:max-height .55s var(--ease), opacity .4s var(--ease), padding .4s var(--ease); }
.faq__item[open] .faq__body{ max-height:340px; opacity:1; padding-bottom:28px; }
.faq__body p{ color:var(--ink-soft); }
@media (max-width: 760px){ .faq__grid{ grid-template-columns:1fr; gap:26px; } }

/* ---------- footer (sombre) ---------- */
.footer{ background:#0B1D3E; border-top:1px solid var(--dline); padding-top:clamp(60px,7vw,90px); }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(30px,4vw,58px); padding-bottom:52px; }
.footer__brand p{ font-size:14.5px; max-width:340px; margin:18px 0 24px; color:var(--dtext-2); }
.brand--footer{ margin-bottom:6px; }
.footer .brand__name, .footer .brand__num{ color:var(--dtext); font-size:26px; }
.footer .brand__sub{ color:var(--gold2); }
.rating--footer .rating__text{ color:var(--dtext-2); }
.footer__col h4{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--dgold); margin-bottom:18px; font-weight:600; }
.footer__col p{ font-size:14.5px; margin-bottom:15px; line-height:1.65; color:var(--dtext-2); }
.footer__phone{ display:block; font-family:var(--display); font-style:italic; font-size:26px; color:var(--dtext); margin-bottom:18px; font-variant-numeric:tabular-nums; transition:color var(--t); }
.footer__phone:hover{ color:var(--dgold); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:26px; border-top:1px solid var(--dline); font-size:12.5px; color:#8A7F6B; letter-spacing:.03em; }
@media (max-width: 860px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:38px 28px; } .footer__brand{ grid-column:1 / -1; } }
@media (max-width: 520px){ .footer__grid{ grid-template-columns:1fr; } .footer__bottom{ flex-direction:column; align-items:flex-start; } }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } .btn:hover,.hood:hover,.review:hover,.lookbook__item:hover img{ transform:none; } }

/* ============================================================
   SOUS-PAGES — page hero (bande sombre), prose, related
   ============================================================ */
.page-hero{ position:relative; display:flex; align-items:flex-end; overflow:hidden; min-height:clamp(420px,52vw,560px); border-bottom:1px solid var(--line); background:var(--dband); }
.page-hero--hub{ min-height:clamp(360px,42vw,480px); }
.page-hero__media{ position:absolute; inset:0; z-index:0; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; filter:blur(3px) saturate(.92) brightness(.62); transform:scale(1.07); }
.page-hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,22,52,.82) 0%, rgba(10,22,52,.66) 42%, rgba(10,22,52,.96) 100%), linear-gradient(90deg, rgba(10,22,52,.8) 0%, rgba(10,22,52,.3) 72%); }
.page-hero__inner{ position:relative; z-index:1; padding-block:clamp(40px,6vw,72px); width:100%; }
.page-hero .eyebrow{ color:var(--dgold); }
.page-hero .eyebrow__line{ background:linear-gradient(90deg,var(--dgold),transparent); }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:24px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dtext-2); }
.breadcrumb a{ color:var(--dtext-2); transition:color var(--t); }
.breadcrumb a:hover{ color:var(--dgold); }
.breadcrumb span[aria-current]{ color:var(--dgold); }
.page-hero__title{ font-family:var(--display); font-weight:500; letter-spacing:-.015em; font-size:clamp(34px,5.4vw,68px); line-height:1.04; color:#fff; max-width:16ch; margin:0 0 20px; }
.page-hero__lead{ font-size:clamp(16px,1.4vw,19px); color:var(--dtext-2); max-width:560px; margin-bottom:32px; }
.page-hero .btn--solid{ background:#fff; color:var(--gold); }
.page-hero .btn--solid:hover{ background:#EAF1FB; color:var(--gold-deep); }
.page-hero .btn--line{ color:var(--dtext); border-color:var(--dline); }
.page-hero .btn--line:hover{ border-color:var(--dgold); color:var(--dgold); }

.prose-wrap{ padding-block:clamp(56px,7vw,100px); }
.prose-grid{ display:grid; grid-template-columns:1.7fr .9fr; gap:clamp(36px,5vw,72px); align-items:start; }
.prose h2{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.8vw,34px); line-height:1.15; color:var(--ink); margin:38px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--ink-soft); font-size:16.5px; line-height:1.8; }
.page-aside{ position:sticky; top:104px; display:flex; flex-direction:column; gap:18px; }
.aside-card{ border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:28px 26px; }
.aside-card h3{ font-family:var(--display); font-size:22px; font-weight:500; color:var(--ink); margin-bottom:16px; }
.aside-list{ display:flex; flex-direction:column; gap:12px; }
.aside-list li{ position:relative; padding-left:26px; font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.aside-list li::before{ content:""; position:absolute; left:0; top:6px; width:13px; height:7px; border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(-45deg); }
.aside-card--contact p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:12px; line-height:1.6; }
.aside-phone{ display:block; font-family:var(--display); font-style:italic; font-size:26px; color:var(--gold-deep); margin:6px 0 18px; font-variant-numeric:tabular-nums; }
.aside-card--contact .btn{ width:100%; }

.related{ padding-block:clamp(56px,7vw,100px); border-top:1px solid var(--line); }
.related--hub{ border-top:none; padding-top:clamp(30px,4vw,52px); }
.related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.related__grid--hub{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.related-card{ position:relative; display:flex; flex-direction:column; gap:8px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:26px 24px 24px; transition:var(--t); overflow:hidden; }
.related-card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:linear-gradient(90deg,var(--gold),transparent); transform:scaleX(0); transform-origin:left; transition:transform var(--t); }
.related-card:hover{ transform:translateY(-4px); border-color:var(--line-2); background:var(--card-2); }
.related-card:hover::before{ transform:scaleX(1); }
.related-card__cat{ font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); }
.related-card__title{ font-family:var(--display); font-size:21px; font-weight:500; color:var(--ink); line-height:1.2; }
.related-card__desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.related-card__arrow{ color:var(--gold-deep); font-size:18px; margin-top:6px; transition:transform var(--t); }
.related-card:hover .related-card__arrow{ transform:translateX(5px); }

.footer__nav{ display:flex; flex-direction:column; gap:12px; }
.footer__nav a{ font-size:14.5px; color:var(--dtext-2); transition:color var(--t); }
.footer__nav a:hover{ color:var(--dgold); }

@media (max-width: 860px){ .prose-grid{ grid-template-columns:1fr; gap:40px; } .page-aside{ position:static; } .related__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 540px){ .related__grid{ grid-template-columns:1fr; } }

/* ============================================================
   INTRO / curtain loader (reste sombre — moment cinématique)
   ============================================================ */
.intro{ position:fixed; inset:0; z-index:300; background:var(--dband); display:grid; place-items:center; overflow:hidden;
  transition:opacity .9s var(--ease), visibility .9s var(--ease); animation:introAuto .9s var(--ease) 5s forwards; }
.intro.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
.intro__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.5) saturate(.88); }
.intro::after{ content:""; position:absolute; inset:0; background:radial-gradient(65% 65% at 50% 50%, transparent, rgba(10,22,52,.78)); }
.intro__inner{ position:relative; z-index:2; text-align:center; padding:20px; }
.intro__glasses{ width:78px; height:auto; stroke:var(--gold2); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; display:block; margin:0 auto 26px; opacity:0; animation:introIn 1.1s var(--ease) .1s forwards; }
.intro__mark{ font-family:var(--display); font-weight:500; font-size:clamp(42px,8vw,96px); color:var(--dtext); letter-spacing:.04em; line-height:1; opacity:0; transform:translateY(16px); animation:introIn 1.2s var(--ease) .25s forwards; }
.intro__mark em{ font-style:italic; color:var(--dgold); }
.intro__sub{ font-family:var(--body); font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--gold2); margin-top:16px; opacity:0; animation:introIn 1.2s var(--ease) .7s forwards; }
.intro__mark em{ font-style:italic; color:var(--gold2); }
.intro__line{ width:0; height:1px; background:linear-gradient(90deg,transparent,var(--dgold),transparent); margin:24px auto 0; animation:introLine 2.6s var(--ease) .9s forwards; }
@keyframes introIn{ to{ opacity:1; transform:none; } }
@keyframes introLine{ to{ width:200px; } }
@keyframes introAuto{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
@media (prefers-reduced-motion: reduce){ .intro{ display:none !important; } }