/* ═══════════════════════════════════════════════════════════
   PEINTURE OLASSO — maquette locale
   Même architecture éditoriale que la maquette Sud évènements,
   mais l'idée centrale change : la page se REPEINT au fil du
   défilement, en passant par les vraies teintes du nuancier.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────── */
:root{
  /* nuancier de marque */
  --blanc:      #f2eee6;
  --craie:      #e6ded2;
  --lin:        #cfc4b2;
  --sable:      #dccdb4;
  --sauge:      #b4bfa0;
  --olive:      #9aa87f;
  --argile:     #d8b5a3;
  --terre:      #c0705a;
  --nuit:       #0f1c28;   /* bleu nuit du logo */
  --or:         #ae8a5f;   /* doré du logo */
  --or-clair:   #c9a578;   /* doré éclairci, pour les survols */
  --gris:       #8c8279;
  --noir:       #17140f;

  /* couleurs vivantes : pilotées image par image par app.js */
  --paint-bg:  #17140f;
  --paint-ink: #f2eee6;

  --fg:     var(--paint-ink);
  --fg-dim: color-mix(in srgb, var(--paint-ink) 58%, transparent);
  --line:   color-mix(in srgb, var(--paint-ink) 20%, transparent);
  --veil:   color-mix(in srgb, var(--paint-bg) 55%, transparent);

  /* typo */
  --ff: "SF Pro Display","Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --ff-mono: "SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace;

  --t-mega:  clamp(3.4rem, 15vw, 15rem);
  --t-xl:    clamp(2.4rem, 6.6vw, 6.6rem);
  --t-lg:    clamp(1.9rem, 4.2vw, 4rem);
  --t-md:    clamp(1.4rem, 2.4vw, 2.2rem);
  --t-body:  clamp(1rem, 1.1vw, 1.15rem);
  --t-eye:   clamp(.66rem, .78vw, .8rem);

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --sec: clamp(6rem, 13vh, 11rem);

  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
}

/* ── 2. BASE ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
html.lock,body.lock{ overflow:hidden; }

body{
  font-family:var(--ff);
  background:var(--paint-bg);
  color:var(--fg);
  font-size:var(--t-body);
  line-height:1.45;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--or); color:var(--nuit); }

.c{ width:100%; padding-inline:var(--pad); margin-inline:auto; max-width:1800px; }
.s{ position:relative; }
.paint{ position:relative; }

/* ── 3. TYPO UTILITAIRES ───────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--ff-mono); font-size:var(--t-eye);
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg-dim); white-space:nowrap;
}
.eyebrow .dot{
  width:.5em; height:.5em; border-radius:50%;
  background:var(--or-clair); flex:0 0 auto;
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 color-mix(in srgb, var(--or-clair) 55%, transparent); }
  70%  { box-shadow:0 0 0 .7em transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}

.outline{ color:transparent; -webkit-text-stroke:1.5px currentColor; }

.clip{ display:block; overflow:hidden; }
.clip__i{
  display:block; transform:translateY(105%);
  transition:transform .95s var(--ease-out); will-change:transform;
}
.is-in .clip__i,.clip.is-in .clip__i{ transform:translateY(0); }

.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word i{
  display:inline-block; font-style:inherit;
  transform:translateY(110%) rotate(3deg);
  transition:transform 1s var(--ease-out); will-change:transform;
}
.is-in .word i{ transform:none; }

[data-reveal]{
  opacity:0; transform:translateY(1.4rem);
  transition:opacity .9s var(--ease), transform .9s var(--ease-out);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ── 4. BOUTONS ────────────────────────────────────────── */
.btn{
  --bh:3.1rem;
  position:relative; display:inline-flex; align-items:center; gap:.85em;
  height:var(--bh); padding-inline:1.5em; border-radius:999px;
  font-size:clamp(.8rem,.95vw,.95rem); font-weight:600;
  overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--or-clair);
  transform:translateY(101%); transition:transform .55s var(--ease-in-out);
}
.btn:hover::before{ transform:none; }
.btn--ghost{ border:1px solid var(--line); }
.btn--ghost:hover{ color:var(--nuit); }
.btn--solid{ background:var(--nuit); color:var(--blanc); }
.btn--solid:hover{ color:var(--nuit); }
.btn--invert{ background:var(--paint-ink); color:var(--paint-bg); }
.btn--invert::before{ background:var(--noir); }
.btn--invert:hover{ color:var(--blanc); }
.btn--lg{ --bh:3.9rem; font-size:clamp(.9rem,1.1vw,1.1rem); padding-inline:2em; }

.btn__txt{ position:relative; display:block; overflow:hidden; height:1.25em; }
.btn__txt i{
  display:block; font-style:normal; white-space:nowrap;
  transition:transform .55s var(--ease-in-out);
}
.btn:hover .btn__txt i{ transform:translateY(-100%); }
.btn__ico{ transition:transform .5s var(--ease-out); }
.btn:hover .btn__ico{ transform:translateX(.3em); }

/* ── 5. VOILE D'OUVERTURE ─────────────────────────────── */
/* Pas de préchargeur nommé : la page s'ouvre directement sur la photo. */
.veil{
  position:fixed; inset:0; z-index:9999;
  background:var(--noir); pointer-events:none;
  transition:opacity .9s var(--ease);
}
.veil.is-done{ opacity:0; }

/* ── 6. TRANSITION ─────────────────────────────────────── */
.transition{ position:fixed; inset:0; z-index:9000; display:flex; pointer-events:none; }
.transition span{ flex:1; background:var(--or); transform:scaleY(0); transform-origin:bottom; }
.transition.is-active span{ transform:scaleY(1); }

/* ── 7. CURSEUR ────────────────────────────────────────── */
.cursor{
  position:fixed; top:0; left:0; z-index:9500;
  pointer-events:none; mix-blend-mode:difference;
  will-change:transform; opacity:0; transition:opacity .3s var(--ease);
}
.cursor.is-live{ opacity:1; }
.cursor__dot{
  position:absolute; left:0; top:0;
  width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; background:#fff;
  transition:width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out);
}
.cursor.is-big .cursor__dot{ width:76px; height:76px; margin:-38px 0 0 -38px; }
.cursor__label{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:#000; opacity:0;
  transition:opacity .3s; white-space:nowrap;
}
.cursor.is-big .cursor__label{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ── 8. PROGRESSION ────────────────────────────────────── */
.scroll-indicator{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:8000; pointer-events:none;
}
.scroll-indicator i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--nuit),var(--or-clair));
}

/* ── 9. NAV ────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(.7rem,1.4vw,1.1rem) var(--pad);
  transition:transform .6s var(--ease);
}
.nav.is-hidden{ transform:translateY(-115%); }

.nav__logo{ display:flex; align-items:center; gap:.75rem; color:var(--fg); }
/* le monogramme existe en deux versions ; app.js bascule selon la clarté du fond */
.nav__marks{ position:relative; display:block; flex:0 0 auto; height:clamp(2.1rem,3.1vw,2.7rem); }
.nav__mark{ height:100%; width:auto; transition:opacity .5s var(--ease); }
.nav__mark--clair{ position:absolute; inset:0; opacity:0; }
.on-dark .nav__mark--sombre{ opacity:0; }
.on-dark .nav__mark--clair{ opacity:1; }

.nav__word{ display:grid; line-height:1; gap:.16em; }
.nav__word strong{
  font-family:var(--ff-mono); font-size:var(--t-eye); font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
}
.nav__word em{
  font-style:normal; font-family:var(--ff-mono); font-size:var(--t-eye);
  letter-spacing:.19em; text-transform:uppercase;
  /* dérivé de la couleur de texte courante, sinon le doré disparaît
     sur le bandeau doré */
  color:var(--fg-dim);
}
@media (max-width:640px){ .nav__word{ display:none; } }
.nav__right{ display:flex; align-items:center; gap:clamp(.6rem,1.4vw,1.2rem); }
@media (max-width:860px){ .nav__cta{ display:none; } }

.menu-btn{ display:flex; align-items:center; gap:.7rem; color:var(--fg); }
.menu-btn__lines{ display:grid; gap:5px; width:26px; }
.menu-btn__lines i{
  display:block; height:1.6px; background:currentColor;
  transition:transform .5s var(--ease-in-out), width .5s var(--ease-in-out);
}
.menu-btn__lines i:nth-child(2){ width:65%; margin-left:auto; }
.menu-btn:hover .menu-btn__lines i:nth-child(2){ width:100%; }
.menu-open .menu-btn{ color:var(--blanc); }
.menu-open .menu-btn__lines i:nth-child(1){ transform:translateY(3.3px) rotate(45deg); }
.menu-open .menu-btn__lines i:nth-child(2){ width:100%; transform:translateY(-3.3px) rotate(-45deg); }
.menu-btn__txt{
  display:block; overflow:hidden; height:1.2em;
  font-family:var(--ff-mono); font-size:var(--t-eye);
  letter-spacing:.15em; text-transform:uppercase;
}
.menu-btn__txt i{ display:block; font-style:normal; transition:transform .5s var(--ease-in-out); }
.menu-open .menu-btn__txt i{ transform:translateY(-100%); }
@media (max-width:520px){ .menu-btn__txt{ display:none; } }

/* ── 10. MENU ──────────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:6500;
  background:var(--noir); color:var(--blanc);
  display:grid; grid-template-rows:1fr auto;
  padding:clamp(6rem,12vh,9rem) var(--pad) clamp(1.5rem,4vh,3rem);
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1s var(--ease-in-out);
  pointer-events:none;
}
.menu-open .menu{ clip-path:inset(0 0 0 0); pointer-events:auto; }

.menu__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.menu__img{ position:absolute; inset:0; opacity:0; transition:opacity .8s var(--ease); }
.menu__img.is-on{ opacity:.34; }
.menu__img img{ width:100%; height:100%; object-fit:cover; }
.menu__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--noir) 6%,transparent 62%);
}

.menu__links{ position:relative; z-index:1; align-self:center; }
.menu__links a{
  position:relative; display:flex; align-items:baseline; gap:1rem;
  font-size:clamp(2rem,5.6vw,5.6rem); font-weight:800; letter-spacing:-.03em;
  line-height:1.04; text-transform:uppercase;
  transition:color .4s var(--ease);
}
.menu__links a em{
  font-family:var(--ff-mono); font-style:normal; font-size:var(--t-eye);
  letter-spacing:.15em; color:rgba(242,238,230,.5); transform:translateY(-1.2em);
}
.menu__links a:hover{ color:var(--or-clair); }
.menu__links a::after{
  content:""; position:absolute; left:0; bottom:.15em; height:1px; width:0;
  background:var(--or-clair); transition:width .6s var(--ease-out);
}
.menu__links a:hover::after{ width:100%; }

.menu__foot{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:2rem 4rem;
  justify-content:space-between; align-items:flex-end;
  border-top:1px solid rgba(242,238,230,.16); padding-top:1.4rem;
}
.menu__col{ display:grid; gap:.3rem; }
.menu__col .eyebrow{ margin-bottom:.35rem; color:rgba(242,238,230,.55); }
.menu__col a,.menu__col span:not(.eyebrow){ font-size:clamp(.95rem,1.15vw,1.1rem); }
.menu__col a{ transition:color .3s; }
.menu__col a:hover{ color:var(--or-clair); }

/* ── 11. ÉPINGLAGE ─────────────────────────────────────── */
.sticky-track{ position:relative; }
.sticky-item{ position:sticky; top:0; height:100svh; overflow:hidden; }

/* ── 12. OUVERTURE (photo avant → après → le nom) ──────── */
.intro{ position:relative; }
.intro__pin{
  position:sticky; top:0; height:100svh;
  overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr);
}
.intro__stage{ position:absolute; inset:0; }
.intro__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* la photo « avant » est révélée par un rognage piloté au scroll */
.intro__clip{ position:absolute; inset:0; overflow:hidden; width:100%; will-change:width; }
.intro__clip .intro__img{ width:var(--stage-w,100vw); max-width:none; }
/* l'assombrissement n'arrive qu'avec le nom, pour ne pas ternir la photo au départ */
.intro__scrim{
  position:absolute; inset:0; opacity:0;
  background:
    /* assombrissement centré : c'est là que se pose le logo, et le doré
       du mot « Olasso » a besoin d'un fond calme pour ressortir */
    radial-gradient(58% 46% at 50% 48%, rgba(15,28,40,.78), transparent 72%),
    radial-gradient(120% 78% at 50% 112%, rgba(15,28,40,.92), transparent 62%),
    linear-gradient(180deg, rgba(15,28,40,.5), rgba(15,28,40,.1) 42%, rgba(15,28,40,.84));
}

.intro__word{
  position:relative; z-index:2; place-self:center;
  display:grid; justify-items:center; gap:clamp(1.4rem,4vh,2.6rem);
  padding:0 var(--pad);
  opacity:0; will-change:opacity, transform;
}
.intro__logo{
  width:min(46rem,72vw); height:auto;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.5));
}
.intro__sub{
  display:block; text-align:center;
  padding-top:clamp(1rem,2.5vh,1.6rem);
  border-top:1px solid rgba(242,238,230,.26);
  font-family:var(--ff-mono); font-size:var(--t-eye);
  letter-spacing:.15em; text-transform:uppercase; color:rgba(242,238,230,.74);
}

/* ── 13. MARQUEE ───────────────────────────────────────── */
.marquee{ overflow:hidden; width:100%; }
.marquee__row{ display:flex; align-items:center; width:max-content; will-change:transform; }
.marquee__item{
  font-size:clamp(2.2rem,6.6vw,6.6rem); font-weight:800;
  letter-spacing:-.035em; text-transform:uppercase;
  padding-inline:.22em; white-space:nowrap;
}
.marquee__sep{ color:var(--or); font-size:clamp(1rem,2vw,2rem); padding-inline:.2em; }
.marquee-hero{ padding-block:clamp(3rem,8vh,6.5rem); }

.marquee--logos{ padding-block:.4rem; border-block:1px solid var(--line); }
.marquee--logos .marquee__row{ gap:clamp(2rem,5vw,5rem); padding-block:1.1rem; }
.logo{
  font-size:clamp(1rem,1.7vw,1.55rem); font-weight:600;
  color:var(--fg-dim); white-space:nowrap; transition:color .4s var(--ease);
}
.marquee--logos:hover .logo{ color:var(--fg); }
.marquee--rev{ border-top:0; }

/* ── 14. DÉCLARATION ───────────────────────────────────── */
.statement{ padding-block:var(--sec); }
.statement .eyebrow{ margin-bottom:clamp(1.5rem,4vh,3rem); }
.statement__h{
  font-size:var(--t-lg); font-weight:600;
  line-height:1.06; letter-spacing:-.028em; max-width:22ch;
}
.statement__p{
  margin-top:clamp(1.5rem,4vh,3rem); margin-left:auto; max-width:34ch;
  color:var(--fg-dim); font-size:var(--t-md); line-height:1.34; letter-spacing:-.01em;
}

/* ── 16. GALERIE HORIZONTALE ───────────────────────────── */
.horiz{ position:relative; }
.horiz__pin{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }
.horiz__track{
  display:flex; align-items:center;
  gap:clamp(1.5rem,3.5vw,4rem); padding-inline:var(--pad);
  will-change:transform;
}
.hi{ position:relative; flex:0 0 auto; }
.hi .eyebrow{ margin-bottom:.7rem; }
.hi figcaption{ margin-top:.7rem; font-size:.92rem; color:var(--fg-dim); }
.hi__img{ overflow:hidden; border-radius:.4rem; box-shadow:0 24px 60px -30px rgba(23,20,15,.5); }
.hi__img img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12); will-change:transform;
}
.hi--tall .hi__img{ height:min(62svh,42rem); aspect-ratio:3/4; }
.hi--wide .hi__img{ height:min(48svh,32rem); aspect-ratio:16/10; }
.hi--sq   .hi__img{ height:min(52svh,34rem); aspect-ratio:1; }
.hi--down{ transform:translateY(clamp(2rem,7vh,6rem)); }
.hi__pill{
  position:absolute; left:50%; bottom:2.6rem; transform:translateX(-50%);
  background:var(--or); color:var(--nuit);
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.5em 1.1em; border-radius:999px; white-space:nowrap;
}
.hi--callout{
  max-width:clamp(15rem,24vw,24rem);
  font-size:var(--t-md); font-weight:600; line-height:1.16; letter-spacing:-.02em;
}
.hi--callout p::first-line{ color:var(--or); }
.hi--callout-2{ align-self:flex-end; transform:translateY(-3vh); }

/* ── 17. LE GESTE (split) ──────────────────────────────── */
.split{ height:100svh; display:grid; grid-template-columns:1fr 1fr; }
.split__col{
  position:relative; overflow:hidden;
  display:grid; grid-template-rows:1fr auto;
  padding:clamp(5rem,10vh,7rem) var(--pad) clamp(2rem,5vh,4rem);
  border-right:1px solid var(--line);
}
.split__col--alt{ border-right:0; grid-template-rows:auto 1fr; }
.split__text{ align-self:center; max-width:36ch; display:grid; gap:.85rem; justify-items:start; }
.split__text h3{
  font-size:var(--t-lg); font-weight:800; letter-spacing:-.035em;
  line-height:.96; text-transform:uppercase;
}
.split__text p{ color:var(--fg-dim); max-width:34ch; }
.split__img{ overflow:hidden; border-radius:.4rem; height:min(36vh,20rem); }
.split__img img{ width:100%; height:130%; object-fit:cover; will-change:transform; }

@media (max-width:900px){
  .split{ height:auto; grid-template-columns:1fr; }
  .split__col{ border-right:0; border-bottom:1px solid var(--line);
               padding-block:clamp(3rem,8vh,5rem); gap:2rem; }
  .split__col--alt{ grid-template-rows:auto auto; }
}

/* ── 18. NUANCIER ──────────────────────────────────────── */
.nuancier{ padding-block:var(--sec); }
.title-row{
  display:flex; flex-wrap:wrap; gap:1.5rem 4rem;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(2.5rem,7vh,5rem);
}
.title{ font-size:var(--t-xl); font-weight:850; letter-spacing:-.045em;
        line-height:.9; text-transform:uppercase; }
.title__p{ max-width:34ch; color:var(--fg-dim); }

.swatches{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(13rem,100%),1fr));
  gap:clamp(.7rem,1.4vw,1.3rem);
}
.sw{
  position:relative; display:grid; gap:.55rem; text-align:left;
  padding:0; border-radius:.45rem;
  transition:transform .6s var(--ease-out);
}
.sw:hover{ transform:translateY(-.4rem); }
.sw__chip{
  display:block; aspect-ratio:4/5; border-radius:.45rem;
  background:var(--tint);
  border:1px solid color-mix(in srgb, var(--noir) 12%, transparent);
  box-shadow:0 12px 34px -22px rgba(23,20,15,.85);
  transition:box-shadow .6s var(--ease);
  position:relative; overflow:hidden;
}
/* trace de rouleau sur la pastille */
.sw__chip::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(255,255,255,.16), transparent 42%, rgba(0,0,0,.09));
}
.sw:hover .sw__chip{ box-shadow:0 26px 50px -24px rgba(23,20,15,.9); }
.sw__name{ font-size:.98rem; font-weight:650; letter-spacing:-.01em; }
.sw__hex{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.1em;
  color:var(--fg-dim); margin-top:-.35rem;
}
.nuancier__note{
  margin-top:clamp(2rem,5vh,3.5rem); max-width:44ch;
  color:var(--fg-dim); font-size:.95rem;
}

/* ── 18b. FORMER ───────────────────────────────────────── */
.former{ padding-block:var(--sec); }
.former__head{
  display:flex; flex-wrap:wrap; gap:1.5rem 4rem;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(2.5rem,7vh,4.5rem);
}
.former__head .eyebrow{ margin-bottom:.6rem; }

.former__list{
  list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
  gap:clamp(1rem,2vw,2rem);
  border-top:1px solid var(--line);
}
.former__item{
  position:relative;
  padding:clamp(1.6rem,3.5vh,2.4rem) clamp(1.2rem,2vw,2rem) clamp(1.6rem,3.5vh,2.4rem) 0;
  border-bottom:1px solid var(--line);
  display:grid; gap:.7rem; align-content:start;
}
/* filet doré qui se remplit au survol */
.former__item::after{
  content:""; position:absolute; left:0; top:-1px; height:2px; width:0;
  background:var(--or); transition:width .8s var(--ease-out);
}
.former__item:hover::after{ width:100%; }
.former__num{
  font-family:var(--ff-mono); font-size:var(--t-eye);
  letter-spacing:.15em; color:var(--or);
}
.former__item h3{
  font-size:clamp(1.3rem,2vw,1.9rem); font-weight:700;
  letter-spacing:-.025em; line-height:1.08;
}
.former__item p{ color:var(--fg-dim); max-width:34ch; }

.former__foot{
  display:flex; flex-wrap:wrap; gap:2rem 4rem;
  align-items:center; justify-content:space-between;
  margin-top:clamp(2.5rem,6vh,4rem);
}
.former__status{ display:grid; gap:.7rem; max-width:46ch; }
.former__status p{ color:var(--fg-dim); }
.former__pill{
  justify-self:start;
  display:inline-flex; align-items:center; gap:.5em;
  border:1px solid var(--or); color:var(--or);
  font-family:var(--ff-mono); font-size:var(--t-eye);
  letter-spacing:.14em; text-transform:uppercase;
  padding:.5em 1.1em; border-radius:999px;
}

/* ── 19. APPEL À L'ACTION ──────────────────────────────── */
.callout{
  padding-block:clamp(6rem,15vh,12rem); text-align:center; overflow:hidden;
}
.callout .c{ display:grid; gap:clamp(1.2rem,3.5vh,2.2rem); justify-items:center; }
.callout__h{
  font-size:var(--t-xl); font-weight:850; letter-spacing:-.045em;
  line-height:.94; text-transform:uppercase; max-width:15ch;
}
.callout__p{ max-width:46ch; color:color-mix(in srgb, var(--paint-ink) 78%, transparent); }

/* ── 20. L'ATELIER ─────────────────────────────────────── */
.exe{
  position:relative; overflow:hidden; min-height:100svh;
  display:grid; align-items:center; padding-block:var(--sec);
}
.exe__imgs{ position:absolute; inset:0; z-index:0; }
.exe__img{ position:absolute; overflow:hidden; border-radius:.4rem; opacity:.9;
           box-shadow:0 30px 60px -34px rgba(23,20,15,.6); }
.exe__img img{ width:100%; height:118%; object-fit:cover; will-change:transform; }
.exe__img--1{ left:2vw;  top:9%;   width:clamp(8rem,14vw,14rem); aspect-ratio:3/4; }
/* la seule image du site où quelqu'un travaille : elle mérite plus de place */
.exe__img--vedette{
  left:3vw; top:8%; width:clamp(11rem,21vw,21rem); aspect-ratio:3/4; opacity:1;
}
@media (max-width:1100px){ .exe__img--vedette{ opacity:.55; } }
.exe__img--2{ left:14vw; bottom:7%; width:clamp(7rem,11vw,11rem); aspect-ratio:3/4; }
.exe__img--3{ right:3vw; top:13%;  width:clamp(8rem,13vw,13rem); aspect-ratio:3/4; }
.exe__img--4{ right:15vw; bottom:9%; width:clamp(7rem,10vw,10rem); aspect-ratio:3/4; }
@media (max-width:1100px){ .exe__img--2,.exe__img--4{ display:none; } .exe__img{ opacity:.4; } }
@media (max-width:760px){ .exe__imgs{ opacity:.3; } }

.exe__text{
  position:relative; z-index:1; display:grid; gap:clamp(1rem,3vh,1.8rem);
  justify-items:center; text-align:center; max-width:56rem; margin-inline:auto;
}
.exe__h{ font-size:var(--t-lg); font-weight:800; letter-spacing:-.035em; line-height:1; max-width:16ch; }
.exe__text p{ color:var(--fg-dim); max-width:46ch; }
.values{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; list-style:none;
}
.values li{
  border:1px solid var(--line); border-radius:999px;
  padding:.45em 1em; font-size:.85rem; color:var(--fg-dim);
}
.exe__sticker{
  position:absolute; z-index:2; right:clamp(1rem,6vw,6rem); top:50%;
  width:clamp(5rem,8vw,7.5rem); aspect-ratio:1; border-radius:50%;
  background:var(--or); color:var(--nuit);
  display:grid; place-items:center; text-align:center;
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.08em;
  text-transform:uppercase; line-height:1.5;
  transform:translateY(-50%); animation:spinSlow 20s linear infinite;
}
@keyframes spinSlow{ to{ transform:translateY(-50%) rotate(360deg); } }
@media (max-width:760px){ .exe__sticker{ display:none; } }

/* ── 21. ZONE ──────────────────────────────────────────── */
.zone{ padding-block:var(--sec) 0; }
.zone .c{ margin-bottom:clamp(2rem,5vh,3.5rem); }

/* ── 22. AVIS ──────────────────────────────────────────── */
.socials{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding-block:var(--sec); overflow:hidden;
}
.socials__fan{ position:absolute; inset:0; z-index:0; display:grid; place-items:center; }
/* les cartes sont maintenant de vraies photos, bien plus denses que les
   textures qu'elles remplacent : on éteint le centre pour que le titre passe */
.socials__fan::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(44% 38% at 50% 50%,
    var(--paint-bg) 52%, color-mix(in srgb, var(--paint-bg) 70%, transparent) 68%, transparent 82%);
}
.sc{
  position:absolute; width:clamp(8rem,13vw,13rem); aspect-ratio:4/5;
  border-radius:.5rem; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--noir) 10%, transparent);
  box-shadow:0 30px 60px -34px rgba(23,20,15,.55);
  transform:rotate(var(--r,0deg)) translate(var(--x,0),var(--y,0)) scale(.9);
  opacity:0;
  transition:transform 1.1s var(--ease-out), opacity .8s var(--ease);
  transition-delay:calc(var(--d,0) * 80ms);
}
.socials.is-in .sc{ opacity:.62; transform:rotate(var(--r,0deg)) translate(var(--x,0),var(--y,0)) scale(1); }
.sc img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.3); }
.sc[data-sc="0"]{ --r:-14deg; --x:-27vw; --y:-4vh;  --d:0; }
.sc[data-sc="1"]{ --r: -7deg; --x:-15vw; --y: 15vh; --d:1; }
.sc[data-sc="2"]{ --r:  3deg; --x:  0vw; --y:-15vh; --d:2; }
.sc[data-sc="3"]{ --r: 10deg; --x: 16vw; --y: 13vh; --d:3; }
.sc[data-sc="4"]{ --r: 16deg; --x: 28vw; --y:-5vh;  --d:4; }
@media (max-width:900px){ .sc[data-sc="0"],.sc[data-sc="4"]{ display:none; } }

.socials__intro{ position:relative; z-index:1; text-align:center; display:grid; gap:1rem; justify-items:center; }
.socials__h{ font-size:var(--t-xl); font-weight:850; letter-spacing:-.045em;
             line-height:.92; text-transform:uppercase; }
.socials__h .clip:nth-child(2) .clip__i{ transition-delay:.1s; }
.socials__h .clip:nth-child(3) .clip__i{ transition-delay:.2s; color:var(--or); }
.socials__p{ color:var(--fg-dim); }

/* ── 23. FOOTER ────────────────────────────────────────── */
.footer{ position:relative; overflow:hidden; padding-top:var(--sec); }
.footer__layout{
  position:relative; display:flex; flex-wrap:wrap; gap:3rem 4rem;
  justify-content:space-between; align-items:flex-start;
  padding-inline:var(--pad); padding-bottom:clamp(3rem,8vh,6rem);
}
.footer__links{ display:flex; flex-wrap:wrap; gap:2.5rem 4rem; }
.footer__col{ display:grid; gap:.35rem; align-content:start; }
.footer__col .eyebrow{ margin-bottom:.45rem; }
.footer__col a{ font-size:clamp(1rem,1.25vw,1.2rem); transition:color .35s; }
.footer__col a:hover{ color:var(--or-clair); }
.footer__addr{ margin-top:.5rem; font-size:.92rem; color:var(--fg-dim); line-height:1.6; }
.footer__statement{ display:grid; gap:1.2rem; justify-items:start; }
.footer__statement p{
  font-size:var(--t-lg); font-weight:800; letter-spacing:-.04em;
  line-height:.98; text-transform:uppercase; max-width:16ch;
}
.marquee--footer{ border-top:1px solid var(--line); padding-block:clamp(1rem,3vh,2rem); }
.marquee--footer .marquee__item{ font-size:clamp(2.6rem,10vw,10rem); }
.footer__legal{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  padding:1.2rem var(--pad); border-top:1px solid var(--line);
  font-family:var(--ff-mono); font-size:var(--t-eye);
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim);
}

/* ── 24. RESPONSIVE ────────────────────────────────────── */
@media (max-width:760px){
  /* les libellés en petites capitales sont en nowrap : sur petit écran
     on les laisse revenir à la ligne plutôt que déborder */
  .eyebrow{ white-space:normal; }
  .statement__p{ margin-left:0; }

  /* le nuancier en une colonne faisait 7,7 écrans de haut : deux colonnes
     et des pastilles carrées le ramènent à environ deux écrans */
  .swatches{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem .6rem; }
  .sw__chip{ aspect-ratio:1; }
  .sw__name{ font-size:.88rem; }
  .sw__hex{ font-size:.62rem; margin-top:-.25rem; }
  .sw{ gap:.4rem; }
  .horiz__track{ gap:1.25rem; }
  .hi--wide .hi__img{ height:auto; width:80vw; }
  .hi--tall .hi__img{ height:auto; width:66vw; }
  .hi--sq   .hi__img{ height:auto; width:70vw; }
  .hi--callout{ max-width:70vw; }
}

/* ── 25. ACCESSIBILITÉ ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .clip__i,.word i{ transform:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .sc{ opacity:1 !important; }
}
:focus-visible{ outline:2px solid var(--or-clair); outline-offset:3px; border-radius:3px; }