/* ═══════════════════════════════════════════════════════════════════════════
   GraphFR — feuille de style unique
   Base claire, encre quasi noire, jaune de marque #FFE200 en accent.

   Le jaune est repris du logotype officiel (échantillonné dans pdp_graphFR.png).
   Il n'est jamais utilisé pour du texte sur fond clair — son contraste est
   insuffisant. Il sert de remplissage, de surlignage et de pastille.

   Ordre : polices → jetons → base → utilitaires → composants → pages → effets
   ═══════════════════════════════════════════════════════════════════════════ */

/* WOFF2 d'abord : 89 Ko au lieu de 233 pour la romaine, 112 au lieu de
   277 pour l'italique. Le TTF reste en second pour les navigateurs qui
   ignorent WOFF2 — aucun depuis 2016, mais le fichier ne coute rien tant
   qu'il n'est pas telecharge. Les axes variables (wght 100-1000, opsz)
   sont conserves dans les deux formats. */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans.woff2') format('woff2'),
       url('../fonts/DMSans.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Italic.woff2') format('woff2'),
       url('../fonts/DMSans-Italic.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}


/* ─────────────────────────────────────────────────────────────  JETONS */
:root {
  /* Palette de reference validee. Quatre couleurs, pas davantage : c'est la
     contrainte qui tient la page ensemble. */
  --paper:    #F4F1EA;   /* blanc casse */
  --paper-2:  #EAE5D8;
  --surface:  #FFFEFA;

  --ink:      #1A1A18;   /* graphite */
  --ink-2:    #262622;
  --ink-deep: #121210;

  --gold:      #E8A020;  /* or */
  --gold-2:    #CC8813;
  --gold-lite: #F2B851;
  --gold-soft: #FBEFD9;

  --green:      #1E3C28; /* vert foret */
  --green-2:    #162D1E;
  --green-lite: #2E5A3C;
  --green-soft: #E5EBE6;

  /* Gris de second niveau. Le gris clair d'avant passait sous le seuil de
     lisibilite sur creme : plancher a 48 % d'opacite. */
  --muted:    rgba(26, 26, 24, .68);
  --muted-2:  rgba(26, 26, 24, .48);

  --line:   rgba(26, 26, 24, .14);
  --line-2: rgba(26, 26, 24, .08);

  --sh-1: 0 1px 2px rgba(26, 26, 24, .05);
  --sh-2: 0 2px 6px rgba(26, 26, 24, .06), 0 12px 28px -18px rgba(26, 26, 24, .22);
  --sh-3: 0 4px 12px rgba(26, 26, 24, .08), 0 26px 54px -26px rgba(26, 26, 24, .3);

  --font:  'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.9rem, 1rem + 7.4vw, 6.6rem);
  --fs-h1:      clamp(2.4rem, 1.3rem + 4.1vw, 4.6rem);
  --fs-h2:      clamp(1.95rem, 1.2rem + 2.9vw, 3.5rem);
  --fs-h3:      clamp(1.1rem, 1rem + .45vw, 1.35rem);
  --fs-body:    clamp(.98rem, .95rem + .16vw, 1.05rem);
  --fs-lead:    clamp(1.05rem, .98rem + .42vw, 1.32rem);
  --fs-sm:      .89rem;
  --fs-xs:      .785rem;
  --fs-label:   .7rem;

  /* Conteneur elargi : a 1340 px la page paraissait etriquee sur grand
     ecran, avec des marges laterales enormes. */
  --wrap:    1560px;
  --gutter:  clamp(1.15rem, .4rem + 3vw, 3.5rem);
  /* Rythme vertical divise par deux : plusieurs demi-ecrans etaient vides. */
  --section: clamp(2.8rem, 1.4rem + 4.2vw, 5.4rem);

  --r-xs:   8px;
  --r-sm:   12px;
  --r:      16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-pill: 999px;

  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --z-blur: 60;
  --z-hdr: 100;
  --z-menu: 150;
  --z-drawer: 200;
  --z-cursor: 900;
  --z-loader: 1000;
}


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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  scroll-padding-top: 100px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.62;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; border-radius: var(--r-sm); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }


/* ─────────────────────────────────────────────────────────────  TYPO */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }

/* Second membre de titre en gris : c'est le contraste qui porte le sens. */
.dim { color: var(--muted-2); }

/* Surlignage jaune tracé au feutre — l'accent de marque le plus visible. */
.mark {
  background: linear-gradient(to bottom, transparent 56%, var(--gold) 56%, var(--gold) 95%, transparent 95%);
  padding-inline: .06em;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(232, 160, 32, .22);
}

.sec-title  { font-size: var(--fs-h2); }
.page-title { font-size: var(--fs-h1); letter-spacing: -.04em; }

em { font-style: normal; }
s  { color: var(--muted-2); font-weight: 500; }


/* ─────────────────────────────────────────────────────────────  UTILITAIRES */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.2rem, 4.5vw, 4rem); }
.section--top-0 { padding-top: 0; }
.section--line { border-top: 1px solid var(--line-2); }

.grid { display: grid; gap: clamp(.85rem, 1.3vw, 1.3rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.6rem clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(1.8rem, 3.5vw, 3rem);
  flex-wrap: wrap;
}
.sec-head__aside { max-width: 34ch; }
.sec-head__aside p { color: var(--muted); margin-bottom: .9rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 2px;
  transition: gap .25s var(--ease);
}
.link-arrow:hover { gap: .8rem; }

.ico { flex: none; }


/* ─────────────────────────────────────────────────────────────  BOUTONS */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.4rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.012em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease-out), background .22s var(--ease),
              border-color .22s var(--ease), box-shadow .3s var(--ease), color .22s var(--ease);
}
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after {
  animation: shineEffect 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:active { transform: translateY(0); }

@keyframes shineEffect {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* Action principale : pastille encre. Sobre, lisible, très « studio ». */
.btn--ink { --btn-bg: var(--ink); --btn-fg: #FFFFFF; --btn-bd: var(--ink); }
.btn--ink:hover { --btn-bg: var(--ink-2); box-shadow: var(--sh-2); }

/* Action commerciale : jaune de marque, texte encre. */
.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold); font-weight: 700; }
.btn--gold:hover { --btn-bg: var(--gold-2); --btn-bd: var(--gold-2); box-shadow: 0 10px 30px -12px rgba(232, 160, 32, .8); }

.btn--ghost { --btn-bg: var(--surface); }
.btn--ghost:hover { --btn-bd: var(--ink); }

.btn--glass {
  --btn-bg: rgba(255, 255, 255, .1); --btn-fg: #FFF; --btn-bd: rgba(255, 255, 255, .28);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn--glass:hover { --btn-bg: rgba(255, 255, 255, .2); }

.btn--lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn--sm { padding: .5rem 1rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.icon-btn {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.icon-btn:hover { border-color: var(--ink); box-shadow: var(--sh-1); }
.icon-btn__count {
  position: absolute; top: -5px; right: -5px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink);
  border: 1.5px solid var(--paper);
  border-radius: var(--r-pill);
  font-size: .64rem; font-weight: 800; line-height: 1;
}


/* ─────────────────────────────────────────────────────────────  LOGOTYPE
   Reprise du logo officiel : pinceau jaune + « GraphFR » en serif. */
.wordmark { display: inline-flex; align-items: center; gap: .5rem; }
.wordmark__brush { color: var(--gold); flex: none; }
.wordmark__txt { font-size: 1.34rem; font-weight: 700; letter-spacing: -.015em; line-height: 1; }


/* ─────────────────────────────────────────────────────────────  EN-TÊTE */

.hdr__in { max-width: var(--wrap); margin-inline: auto; padding: .8rem var(--gutter); display: flex; align-items: center; gap: 1.4rem; }

.hdr__nav { display: flex; gap: clamp(.3rem, 1.2vw, 1.3rem); margin-inline: auto; user-select: none; }
.hdr__nav a {
  position: relative; padding: .45rem .3rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  transition: color .22s var(--ease);
}
.hdr__nav a::after {
  content: ''; position: absolute; left: .3rem; right: 100%; bottom: .15rem;
  height: 2px; background: var(--gold);
  transition: right .35s var(--ease-out);
}
.hdr__nav a:hover, .hdr__nav a[aria-current] { color: var(--ink); }
.hdr__nav a:hover::after, .hdr__nav a[aria-current]::after { right: .3rem; }

.hdr__end { display: flex; align-items: center; gap: .55rem; }
.hdr__burger { display: none; }


/* ─────────────────────────────────────────────────────────────  MENU MOBILE */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: .9rem var(--gutter) 2.2rem;
  animation: menuIn .35s var(--ease-out);
}
@keyframes menuIn { from { opacity: 0; } }
.menu__top { display: flex; align-items: center; justify-content: space-between; padding-block: .4rem 1.8rem; }
.menu__nav { display: flex; flex-direction: column; flex: 1; justify-content: center; }
.menu__nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem 0; border-bottom: 1px solid var(--line-2);
  font-size: clamp(1.65rem, 8vw, 2.3rem); font-weight: 700; letter-spacing: -.04em;
  animation: menuItem .5s var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 50ms + 60ms);
}
@keyframes menuItem { from { opacity: 0; transform: translateY(16px); } }
.menu__nav a .ico { color: var(--muted-2); }
.menu__foot { display: grid; gap: .9rem; }
.menu__mail { text-align: center; color: var(--muted); font-size: var(--fs-sm); }


/* ─────────────────────────────────────────────────────────────  HERO */
.hero { padding: clamp(8rem, 13vw, 11rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero__in { position: relative; z-index: 20; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.hero__title { font-size: var(--fs-display); letter-spacing: -.045em; line-height: .98; margin-bottom: 1.4rem; }
.hero__lead { max-width: 46ch; font-size: var(--fs-lead); color: var(--muted); margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }

.hero__trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: var(--fs-xs); color: var(--muted); }
.hero__trust li { display: flex; align-items: center; gap: .4rem; }
.hero__trust .ico { color: var(--ink); }

/* Grappe d'images : trois visuels décalés, légèrement inclinés.
   C'est ce désalignement qui empêche la page de ressembler à un gabarit. */
.stack { position: relative; aspect-ratio: 1 / 1.02; }
.stack figure {
  position: absolute; overflow: hidden; margin: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-3);
  border: 1px solid var(--line-2);
  transition: transform .7s var(--ease-out);
}
.stack figure img { width: 100%; height: 100%; object-fit: cover; }
.stack__a { inset: 0 20% 28% 0;  z-index: 3; transform: rotate(-2.2deg); }
.stack__b { inset: 32% 0 6% 28%; z-index: 2; transform: rotate(2.6deg); }
.stack__c { top: 4%; right: 0; width: 30%; aspect-ratio: 1; z-index: 4; transform: rotate(5deg); }
.stack:hover .stack__a { transform: rotate(-3.4deg) translate(-6px, -6px); }
.stack:hover .stack__b { transform: rotate(3.8deg) translate(6px, 6px); }
.stack:hover .stack__c { transform: rotate(7deg) scale(1.04); }

.stack__tag {
  position: absolute; left: 2%; bottom: 16%; z-index: 5;
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  background: var(--gold); color: var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700;
  box-shadow: var(--sh-2);
  transform: rotate(-3deg);
}


/* ─────────────────────────────────────────────────────────────  BANDEAU DÉFILANT */




/* ─────────────────────────────────────────────────────────────  BENTO
   Grille asymétrique : une image haute à gauche, des cartes à droite.
   C'est la structure de mise en page principale du site. */
.bento { display: grid; grid-template-columns: 1.02fr 1fr 1fr; gap: clamp(.7rem, 1.1vw, 1.1rem); }
.bento__img {
  grid-row: span 3;
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  min-height: 420px;
  background: var(--paper-2);
}
.bento__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.bento__img:hover img { transform: scale(1.04); }
.bento__cap {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  padding: .7rem .95rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600;
}

.bcard {
  display: flex; flex-direction: column;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.bcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.bcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.bcard h3 { font-size: var(--fs-h3); }
.bcard p { color: var(--muted); font-size: var(--fs-sm); }
.bcard__ico {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--muted);
}
.bcard__ico svg { transition: transform .4s var(--doux); }
.bcard:hover .bcard__ico svg { transform: scale(1.15) rotate(4deg); }

/* Une carte sur cinq passe en encre : c'est elle qui donne le rythme. */
.bcard--ink { background: var(--ink); color: #FFF; border-color: var(--ink); }
.bcard--ink p { color: rgba(255, 255, 255, .66); }
.bcard--ink .bcard__ico { border-color: rgba(255, 255, 255, .22); color: var(--gold); }

.bcard--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.bcard--gold p { color: rgba(26, 26, 24, .78); }
.bcard--gold .bcard__ico { border-color: rgba(14, 15, 17, .2); color: var(--ink); }

.bcard__big { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; margin-bottom: .3rem; }


/* ─────────────────────────────────────────────────────────────  CHIFFRES */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.7rem, 1.1vw, 1.1rem); }
.stats__item { padding: clamp(1.2rem, 2.2vw, 1.9rem); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); }
.stats__item b { display: block; font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; margin-bottom: .4rem; }
.stats__item span { font-size: var(--fs-sm); color: var(--muted); }


/* ─────────────────────────────────────────────────────────────  CARTE PRODUIT */
.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }

.badge {
  position: absolute; top: .75rem; left: .75rem;
  padding: .26rem .6rem;
  background: var(--gold); color: var(--ink);
  border-radius: var(--r-pill);
  font-size: .63rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}

.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.05rem 1.15rem 1.15rem; }
.card__type { font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .4rem; }
.card__name { font-size: var(--fs-h3); margin-bottom: .75rem; }
.card__specs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.card__specs li { padding: .2rem .5rem; background: var(--paper); border-radius: var(--r-xs); font-size: .72rem; color: var(--muted); }
.card__specs b { color: var(--ink); font-weight: 700; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: .95rem; border-top: 1px solid var(--line-2); }
.card__price { font-size: 1.2rem; font-weight: 700; letter-spacing: -.035em; }
.card__price s { font-size: .8rem; margin-left: .35rem; }


/* ─────────────────────────────────────────────────────────────  SECTION SOMBRE */
.dark { background: var(--ink); color: #FFF; }
.dark .eyebrow { color: rgba(255, 255, 255, .6); }
.dark .sec-head__aside p { color: rgba(255, 255, 255, .62); }
.dark .link-arrow { color: #FFF; }

.showcase { position: relative; isolation: isolate; overflow: hidden; }
.showcase img { width: 100%; height: clamp(400px, 68vh, 720px); object-fit: cover; }
.showcase__over {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding-block: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(to top, rgba(14, 15, 17, .93) 4%, rgba(14, 15, 17, .55) 42%, transparent 76%);
  color: #FFF;
}
.showcase__over .eyebrow { color: rgba(255, 255, 255, .7); }
.showcase__title { font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1; margin-bottom: 1.6rem; }


/* ─────────────────────────────────────────────────────────────  TUILES SERVICES */
.tile {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.tile__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.tile:hover .tile__img img { transform: scale(1.05); }
.tile__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.1rem, 2vw, 1.6rem); }
.tile h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); margin-bottom: .55rem; }
.tile p { color: var(--muted); font-size: var(--fs-sm); }
.tile__arrow { margin-top: auto; padding-top: 1.2rem; transition: transform .4s var(--ease-out); }
.tile:hover .tile__arrow { transform: translate(4px, -4px); }
.tile__ico { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 1rem; }


/* ─────────────────────────────────────────────────────────────  PANNEAU */
.panel {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.6rem, 4vw, 4rem); align-items: center;
  padding: clamp(1.5rem, 3.4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
}
.panel--ink { background: var(--ink); color: #FFF; border-color: var(--ink); }
.panel--ink .eyebrow { color: rgba(255, 255, 255, .6); }
.panel--ink .panel__lead { color: rgba(255, 255, 255, .68); }
.panel--ink .panel__list li { color: rgba(255, 255, 255, .74); border-color: rgba(255, 255, 255, .1); }
.panel__lead { color: var(--muted); font-size: var(--fs-lead); margin: 1rem 0 1.8rem; max-width: 46ch; }
.panel__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.panel__list { display: grid; gap: .75rem; }
.panel__list li {
  display: flex; align-items: flex-start; gap: .65rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--line-2);
  color: var(--muted); font-size: var(--fs-sm);
}
.panel__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.panel__list .ico { color: var(--gold); margin-top: 2px; }

/* Mascotte Phragy — la personnalité, dosée. Jamais en contexte commercial. */
.mascot { display: block; width: clamp(110px, 16vw, 180px); height: auto; }
.mascot--tilt { transform: rotate(-4deg); }


/* ─────────────────────────────────────────────────────────────  AVIS */
.quote {
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.quote__stars { display: flex; gap: .1rem; color: var(--gold); margin-bottom: 1rem; }
.quote blockquote { flex: 1; font-size: 1rem; margin-bottom: 1.4rem; }
.quote figcaption { display: flex; align-items: center; gap: .65rem; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.quote__av { display: grid; place-items: center; width: 34px; height: 34px; background: var(--gold); border-radius: var(--r-pill); font-weight: 800; font-size: .85rem; }
.quote figcaption b { display: block; font-size: var(--fs-sm); }
.quote figcaption i { font-style: normal; font-size: var(--fs-xs); color: var(--muted-2); }


/* ─────────────────────────────────────────────────────────────  ACCORDÉON */
.acc { border-top: 1px solid var(--line); max-width: 900px; }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: clamp(1rem, 1.8vw, 1.35rem) 0;
  cursor: pointer; list-style: none;
  font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 600; letter-spacing: -.02em;
}
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary:hover { color: var(--muted); }
.acc__sign { transition: transform .35s var(--ease-out); }
.acc__item.is-open .acc__sign { transform: rotate(45deg); }
.acc__body { padding-bottom: 1.3rem; max-width: 76ch; }
.acc__body p { color: var(--muted); }
.acc__body strong { color: var(--ink); }


/* ─────────────────────────────────────────────────────────────  PAGES INTERNES */
.page-head { padding: clamp(7.5rem, 13vw, 10rem) 0 clamp(1.8rem, 3.5vw, 3rem); }
.page-lead { max-width: 62ch; font-size: var(--fs-lead); color: var(--muted); margin-top: 1.2rem; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: var(--fs-xs); color: var(--muted-2); margin-bottom: 1.3rem; }
.crumbs a:hover { color: var(--ink); }
.crumbs b { color: var(--ink); font-weight: 600; }

.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  transition: all .22s var(--ease);
}
.chip i { font-style: normal; font-size: .68rem; color: var(--muted-2); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #FFF; }
.chip.is-on i { color: var(--gold); }
.filters__count { font-size: var(--fs-sm); color: var(--muted-2); margin-bottom: 1.6rem; }

.notice {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.8rem); flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3.2rem);
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
}
.notice > div { flex: 1; min-width: 240px; }
.notice h2 { font-size: var(--fs-h3); margin-bottom: .35rem; }
.notice p { color: var(--muted); font-size: var(--fs-sm); }
.notice__ico {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  background: none; color: var(--gold-2);
  border: 1.5px solid rgba(232, 160, 32, .4);
  border-radius: 50%;
}


/* ─────────────────────────────────────────────────────────────  FICHE PRODUIT */
.product { padding: clamp(7rem, 11vw, 9.5rem) 0 0; }
.product__top { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 3.4vw, 3rem); align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.product__media figure { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-2); }
.product__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.product__preview { margin-top: 1rem; }

.product__buy {
  position: sticky; top: 96px;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); box-shadow: var(--sh-2);
}
.product__title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: .8rem; }
.product__excerpt { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1.4rem; }
.product__specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: .5rem; margin-bottom: 1.5rem; }
.product__specs div { background: var(--paper); border-radius: var(--r-sm); padding: .8rem .6rem; text-align: center; }
.product__specs b { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: -.04em; }
.product__specs span { font-size: .68rem; color: var(--muted); }
.product__price { display: flex; align-items: baseline; gap: .55rem; margin-bottom: 1.1rem; }
.product__price b { font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -.045em; }
.product__price em { font-size: .74rem; font-weight: 700; padding: .2rem .5rem; border-radius: var(--r-xs); background: var(--gold); }
.product__reassure { display: grid; gap: .65rem; margin-top: 1.3rem; }
.product__reassure li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--fs-xs); color: var(--muted); }
.product__reassure .ico { color: var(--ink); margin-top: 1px; }

.product__detail { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.8rem, 4vw, 3.5rem); padding-top: clamp(1.8rem, 3.5vw, 2.8rem); border-top: 1px solid var(--line-2); }
.product__desc h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 1.8rem 0 .8rem; }
.product__desc h2:first-child { margin-top: 0; }
.product__desc p { color: var(--muted); margin-bottom: .9rem; max-width: 66ch; }

.ticks { display: grid; gap: .6rem; }
.ticks li { display: flex; align-items: flex-start; gap: .6rem; color: var(--muted); font-size: var(--fs-sm); }
.ticks .ico { color: var(--ink); margin-top: 2px; }

.product__aside { display: grid; gap: .8rem; align-content: start; }
.infobox { padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); }
.infobox h3 { font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .6rem; }
.infobox p, .infobox li { font-size: var(--fs-sm); color: var(--muted); }
.infobox ul { display: grid; gap: .3rem; }
.infobox--gold { background: var(--gold-soft); border-color: rgba(232, 160, 32, .6); }
.infobox--gold .link-arrow { margin-top: .7rem; }


/* ─────────────────────────────────────────────────────────────  PANIER */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer__scrim { position: absolute; inset: 0; background: rgba(14, 15, 17, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: var(--paper); border-left: 1px solid var(--line);
  animation: slideIn .42s var(--ease-out);
}
@keyframes slideIn { from { transform: translateX(100%); } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line-2); }
.drawer__head h2 { font-size: 1.1rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.15rem; display: grid; gap: .7rem; align-content: start; }
.drawer__empty { padding: 2.5rem 1.2rem; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.drawer__empty a { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; font-weight: 600; border-bottom: 1.5px solid var(--gold); }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: .75rem; align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .55rem; }
.cart-line img { width: 64px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-xs); }
.cart-line__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.cart-line__price { font-size: var(--fs-xs); color: var(--muted); }
.cart-line__del { color: var(--muted-2); }
.cart-line__del:hover { color: #C6362B; }
.drawer__foot { padding: 1.1rem 1.15rem; border-top: 1px solid var(--line-2); display: grid; gap: .8rem; background: var(--surface); }
.drawer__total { display: flex; align-items: baseline; justify-content: space-between; }
.drawer__total span { color: var(--muted); font-size: var(--fs-sm); }
.drawer__total b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.04em; }
.drawer__reassure { font-size: var(--fs-xs); color: var(--muted); text-align: center; line-height: 1.65; }
.drawer__reassure .ico { display: inline-block; vertical-align: -2px; }


/* ─────────────────────────────────────────────────────────────  PIED DE PAGE */
.ft { position: relative; background: var(--ink); color: #FFF; padding-top: clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.ft .eyebrow { color: rgba(255, 255, 255, .6); }
.ft__cta { max-width: 40ch; margin-bottom: clamp(3rem, 6vw, 5rem); }
.ft__title { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.ft__cta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }
.ft__note { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: var(--fs-xs); color: rgba(255, 255, 255, .5); }
.ft__note .ico { color: var(--gold); }

.ft__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem 1.4rem; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.ft__col-title { font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
.ft__col ul { display: grid; gap: .55rem; }
.ft__col a { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, .62); transition: color .2s var(--ease); }
.ft__col a:hover { color: #FFF; }


.ft__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; padding: 1.5rem 0 clamp(3.5rem, 7vw, 5rem); border-top: 1px solid rgba(255, 255, 255, .1); }
.ft__mail { font-size: clamp(1.05rem, 2.4vw, 1.8rem); font-weight: 700; letter-spacing: -.035em; }
.ft__mail:hover { color: var(--gold); }
.ft__legal { max-width: 46ch; font-size: var(--fs-xs); color: rgba(255, 255, 255, .42); text-align: right; }


/* ─────────────────────────────────────────────────────────────  SERVICES */
.svc { display: grid; grid-template-columns: 80px 1.4fr 1fr; gap: clamp(1.2rem, 3.5vw, 3.5rem); padding-block: clamp(2rem, 4.5vw, 3.8rem); border-top: 1px solid var(--line-2); align-items: start; }
.svc:first-child { border-top: 0; padding-top: 0; }
.svc__head { display: grid; gap: .9rem; }
.svc__num { font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em; color: var(--muted-2); }
.svc__lead { font-size: var(--fs-lead); margin: .9rem 0 .8rem; max-width: 44ch; }
.svc__body { color: var(--muted); max-width: 52ch; }
.svc__items { display: grid; gap: .6rem; padding-top: .3rem; }
.svc__items li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--fs-sm); color: var(--muted); padding-bottom: .6rem; border-bottom: 1px solid var(--line-2); }
.svc__items li:last-child { border-bottom: 0; }
.svc__items .ico { color: var(--ink); margin-top: 2px; }


/* ─────────────────────────────────────────────────────────────  FORMATIONS */
.course { display: flex; flex-direction: column; padding: clamp(1.4rem, 2.8vw, 2.2rem); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--sh-1); }
.course__title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: .7rem; }
.course__lead { color: var(--muted); margin-bottom: 1.5rem; }
.course__prog { margin-bottom: 1.7rem; }
.course .btn { margin-top: auto; }


/* ─────────────────────────────────────────────────────────────  FORMULAIRE */
.form { display: grid; gap: 1rem; max-width: 740px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .45rem; }
.field > span { font-size: var(--fs-label); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.field > span i { color: var(--ink); font-style: normal; }
.field input, .field textarea {
  width: 100%; padding: .85rem 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); resize: vertical;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(232, 160, 32, .35); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: .3rem; }
.form__note { font-size: var(--fs-xs); color: var(--muted); max-width: 42ch; }
.form__note .ico { display: inline-block; vertical-align: -2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ─────────────────────────────────────────────────────────────  PAGES LÉGALES */
.legal { max-width: 840px; }
.legal__date { font-size: var(--fs-xs); color: var(--muted-2); margin-top: 1rem; }
.legal__block { padding-block: clamp(1.6rem, 3vw, 2.5rem); border-top: 1px solid var(--line-2); }
.legal__block:first-child { border-top: 0; padding-top: 0; }
.legal__block h2 { display: flex; align-items: baseline; gap: .8rem; font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 1rem; }
.legal__block h2 span { font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; color: var(--muted-2); }
.legal__body p { color: var(--muted); margin-bottom: .85rem; }
.legal__body a { border-bottom: 1.5px solid var(--gold); font-weight: 500; color: var(--ink); }
.legal__body b { color: var(--ink); }
.ticks-legal { display: grid; gap: .55rem; margin-bottom: .9rem; }
.ticks-legal li { position: relative; padding-left: 1.2rem; color: var(--muted); font-size: var(--fs-sm); }
.ticks-legal li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.todo { display: block; margin-top: .9rem; padding: .8rem 1rem; background: #FDF3F2; border: 1px dashed #E0A9A2; border-radius: var(--r-sm); color: #A03A2E !important; font-size: var(--fs-xs); }


/* ─────────────────────────────────────────────────────────────  ERREUR 404 */
.err { padding: clamp(8rem, 14vw, 11rem) 0 var(--section); }
.err__in { display: grid; grid-template-columns: 1.3fr .7fr; gap: 2rem; align-items: center; }
.err__code { font-size: clamp(5rem, 18vw, 12rem); font-weight: 700; letter-spacing: -.05em; line-height: .85; margin-bottom: .8rem; }
.err__code span { color: var(--gold); }
.err__title { font-size: var(--fs-h2); margin-bottom: 1rem; }


/* ─────────────────────────────────────────────────────────────  RIDEAU D'OUVERTURE
   Deux panneaux qui s'écartent verticalement pour révéler la page.
   Ne s'affiche qu'une fois par session : revenir sur le site ne doit pas
   redemander deux secondes d'attente au visiteur. */


/* Le contenu apparaît pendant que le rideau s'écarte. */

main, .hdr { transition: opacity .6s var(--ease) .2s; }


/* ─────────────────────────────────────────────────────────────  CURSEUR
   Un point net qui suit le pointeur, un anneau qui traîne derrière.
   Activé par JS uniquement (classe 


/* ─────────────────────────────────────────────────────────────  FLOU DU BAS */
.blur-bottom { position: fixed; left: 0; right: 0; bottom: 0; height: 110px; z-index: var(--z-blur); pointer-events: none; }
.blur-bottom > i { position: absolute; inset: 0; display: block; }
.blur-bottom > i:nth-child(1) { backdrop-filter: blur(.5px);  -webkit-backdrop-filter: blur(.5px);  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%); mask-image: linear-gradient(to top, #000 55%, transparent 100%); }
.blur-bottom > i:nth-child(2) { backdrop-filter: blur(1.2px); -webkit-backdrop-filter: blur(1.2px); -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 82%);  mask-image: linear-gradient(to top, #000 40%, transparent 82%); }
.blur-bottom > i:nth-child(3) { backdrop-filter: blur(2.6px); -webkit-backdrop-filter: blur(2.6px); -webkit-mask-image: linear-gradient(to top, #000 26%, transparent 62%);  mask-image: linear-gradient(to top, #000 26%, transparent 62%); }
.blur-bottom > i:nth-child(4) { backdrop-filter: blur(6px);   -webkit-backdrop-filter: blur(6px);   -webkit-mask-image: linear-gradient(to top, #000 13%, transparent 42%);  mask-image: linear-gradient(to top, #000 13%, transparent 42%); }
.blur-bottom > i:nth-child(5) { backdrop-filter: blur(13px);  -webkit-backdrop-filter: blur(13px);  -webkit-mask-image: linear-gradient(to top, #000 3%,  transparent 22%);  mask-image: linear-gradient(to top, #000 3%, transparent 22%); }
.blur-bottom > i:nth-child(6) { backdrop-filter: blur(24px);  -webkit-backdrop-filter: blur(24px);  -webkit-mask-image: linear-gradient(to top, #000 0%,  transparent 11%);  mask-image: linear-gradient(to top, #000 0%, transparent 11%); }
/* Uniquement du flou, aucun voile : le degrade creme posait un halo blanc
   sur le bas de chaque page au lieu de fondre le contenu. */
.blur-bottom__fade { display: none; }


/* Grain discret : casse le rendu « aplat vectoriel » sans salir la page. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.085'/%3E%3C/svg%3E");
}

.js [data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  transition-delay: var(--retard, 0ms);
}
[data-reveal].vu { opacity: 1; transform: none; }


/* ─────────────────────────────────────────────────────────────  RESPONSIVE */
@media (max-width: 1180px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ft__grid { grid-template-columns: repeat(3, 1fr); }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__img { grid-row: span 2; grid-column: span 2; min-height: 320px; }
}

@media (max-width: 1024px) {
  .hdr__nav { display: none; }
  .hdr__cta { padding: .45rem .85rem; font-size: .8rem; }
  .hdr__burger { display: grid; }
  .hdr__end { margin-left: auto; }
  .hero__in { grid-template-columns: 1fr; }
  .stack { max-width: 520px; margin-inline: auto; }
  .product__top, .product__detail, .panel, .err__in { grid-template-columns: 1fr; }
  .product__buy { position: static; }
}

@media (max-width: 820px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .ft__legal { text-align: left; }
  .ft__bottom { align-items: flex-start; }
  .svc { grid-template-columns: 1fr; gap: 1.2rem; }
  .svc__head { grid-auto-flow: column; justify-content: start; align-items: center; gap: 1rem; }
  .form__row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento__img { grid-column: auto; grid-row: auto; min-height: 260px; }
  .ft__grid { grid-template-columns: repeat(2, 1fr); }
  .blur-bottom { height: 80px; }
  .sec-head { align-items: flex-start; }
}


/* ─────────────────────────────────────────────────────────────  ACCESSIBILITÉ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  
  
  
}

@media print {
  .hdr, .ft, 
}


/* ═══════════════════════════════════════════════════════════════════════════
   APPARITION DU TEXTE
   Chaque mot est enfermé dans une fenêtre qui masque le débordement, puis
   remonte à sa place. Le découpage est fait en JS sur les nœuds de texte
   uniquement : la structure HTML (<br>, .mark, .dim) reste intacte, et le
   texte lu par les lecteurs d'écran ne change pas.
   ═══════════════════════════════════════════════════════════════════════════ */


[data-split].vu 


/* ─────────────────────────────────────────────────────────────  HERO BANDEAU */
.hero--band { padding-bottom: clamp(2rem, 4vw, 3.5rem); }

.hero__head {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(1.8rem, 3.5vw, 3rem);
}
.hero__head .eyebrow { grid-column: 1 / -1; margin-bottom: .4rem; }
.hero__head .hero__title { margin-bottom: 0; }
.hero__side .hero__lead { margin-bottom: 1.5rem; }

/* Le bandeau visuel : header officiel, coins arrondis, pastille et photo de profil. */
.band {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: visible;
}
.band > img:first-child {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
}
.band__pdp {
  position: absolute;
  left: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(-1.6rem, -2vw, -2.4rem);
  width: clamp(78px, 11vw, 132px);
  height: auto;
  border-radius: 50%;
  border: 4px solid var(--paper);
  box-shadow: var(--sh-2);
  background: var(--paper);
}
.band__tag {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem;
  background: var(--gold); color: var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700;
  box-shadow: var(--sh-2);
}
.hero__trust { margin-top: clamp(2.6rem, 4vw, 3.4rem); }


/* ─────────────────────────────────────────────────────────────  PARCOURS
   Étapes reliées par un tracé sinueux, posées sur un visuel plein cadre. */
.path {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  overflow: hidden;
  color: #FFF;
}
.path__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.path::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14, 15, 17, .9), rgba(14, 15, 17, .74) 40%, rgba(14, 15, 17, .92));
}
.path__in { position: relative; }
.path__head { max-width: 30ch; margin-bottom: clamp(2rem, 5vw, 4rem); }
.path .eyebrow { color: rgba(255, 255, 255, .7); }
.path__title { font-size: var(--fs-h2); }
.path__title em { color: var(--gold); font-style: italic; font-weight: 400; }

.path__line {
  position: absolute;
  inset: clamp(7rem, 14vw, 11rem) 8% 2rem 8%;
  width: 84%; height: auto;
  color: rgba(255, 255, 255, .38);
  z-index: -1;
}

.path__steps { display: grid; gap: clamp(1.6rem, 5vw, 4rem); counter-reset: step; }
.path__step { max-width: 34ch; }
.path__step:nth-child(odd)  { justify-self: end;   text-align: right; }
.path__step:nth-child(even) { justify-self: start; }
.path__step p { color: rgba(255, 255, 255, .74); font-size: var(--fs-sm); }

.path__pill {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: .7rem;
  padding: .45rem 1rem;
  background: var(--gold); color: var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700;
  box-shadow: 0 6px 20px -8px rgba(232, 160, 32, .6);
}
.path__pill i { font-style: normal; opacity: .55; font-variant-numeric: tabular-nums; }


/* ─────────────────────────────────────────────────────────────  PANNEAU : COLONNE VISUELLE */
.panel__aside { display: grid; gap: 1.2rem; justify-items: center; }
.panel__aside .panel__list { width: 100%; }


/* ─────────────────────────────────────────────────────────────  RENVOI VERS L'AGENCE
   GraphFR Online est la structure d'agence. Bloc volontairement distinct :
   ce n'est pas la même offre, et confondre les deux dessert les deux. */
.agency {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.2rem, 2.6vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--gold);
  border-radius: var(--r-lg);
}
.agency__logo {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  background: var(--ink); color: var(--gold);
  border-radius: var(--r-sm);
  font-weight: 700; font-size: 1.2rem;
}
.agency__label { font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .3rem; }
.agency h2, .agency h3 { font-size: var(--fs-h3); margin-bottom: .35rem; }
.agency p { color: var(--muted); font-size: var(--fs-sm); max-width: 62ch; }


@media (max-width: 900px) {
  .hero__head { grid-template-columns: 1fr; align-items: start; }
  .path__step, .path__step:nth-child(odd) { justify-self: start; text-align: left; max-width: none; }
  .path__line { display: none; }
  .agency { grid-template-columns: 1fr; text-align: left; }
}

/* Le surlignage se trace de gauche à droite une fois les mots en place. */


/* ═══════════════════════════════════════════════════════════════════════════
   MASCOTTE EN DÉBORDEMENT
   Phragy dépasse du cadre des cartes et des sections. Les PNG sont détourés :
   le débordement crée une profondeur qu'aucune carte plate ne donne, et
   c'est ce qui signe un site fait à la main plutôt que sorti d'un gabarit.

   Toujours décoratif : pointer-events: none, alt vide, jamais porteur
   d'information. Un lecteur d'écran ne doit rien perdre à les ignorer.
   ═══════════════════════════════════════════════════════════════════════════ */
.peek {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 14px 26px rgba(14, 15, 17, .22));
  transition: transform .7s var(--ease-out);
}

/* Coin haut droit d'une carte, penché vers l'intérieur. */
.peek--tr { top: 0; right: clamp(.5rem, 2vw, 1.5rem); width: clamp(74px, 9vw, 118px); transform: translateY(-58%) rotate(7deg); }
/* Coin bas gauche, à moitié sorti. */
.peek--bl { bottom: 0; left: clamp(.5rem, 2vw, 1.5rem); width: clamp(80px, 10vw, 130px); transform: translateY(42%) rotate(-6deg); }
/* Bord droit, comme s'il se penchait pour regarder. */
.peek--r  { top: 50%; right: 0; width: clamp(70px, 8vw, 110px); transform: translate(38%, -50%) rotate(9deg); }
/* Bord gauche. */
.peek--l  { top: 42%; left: 0; width: clamp(70px, 8vw, 110px); transform: translate(-38%, -50%) rotate(-9deg); }

.peek--tr:hover, .peek--bl:hover { transform: translateY(-62%) rotate(4deg); }

/* Les conteneurs qui accueillent une mascotte doivent laisser dépasser. */
.has-peek { position: relative; overflow: visible; }

/* Sur mobile, la mascotte mange la place et gêne la lecture : on la retire. */
@media (max-width: 720px) {
  .peek { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO PLEIN FOND
   Le header officiel GraphFR occupe toute la section. Le texte passe en
   blanc, le reste du site reste clair : le contraste d'ouverture donne son
   impact à la page sans assombrir la navigation.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero--full {
  position: relative;
  isolation: isolate;
  min-height: min(94svh, 880px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 9rem 0 clamp(2.5rem, 5vw, 4rem);
  color: #FFF;
  overflow: hidden;
}
.hero--full .hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
}
.hero--full::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 12% 100%, rgba(232, 160, 32, .16), transparent 62%),
    linear-gradient(to top, rgba(9, 10, 12, .94) 6%, rgba(9, 10, 12, .70) 38%, rgba(9, 10, 12, .34) 70%, rgba(9, 10, 12, .55) 100%);
}
.hero--full .eyebrow { color: rgba(255, 255, 255, .8); }
.hero--full .hero__lead { color: rgba(255, 255, 255, .78); }
.hero--full .hero__trust { color: rgba(255, 255, 255, .68); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.hero--full .hero__trust .ico { color: var(--gold); }
.hero--full .hero__title { max-width: 17ch; }

/* Vignette d'identité : photo de profil ronde + nom, posée sur l'image. */
.hero__id {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .4rem .95rem .4rem .4rem;
  margin-bottom: 1.6rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-pill);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.hero__id img { width: 34px; height: 34px; border-radius: 50%; }
.hero__id span { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; }
.hero__id b { color: var(--gold); }

.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 5vw, 4rem);
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  writing-mode: vertical-rl;
}
.hero__scroll i { width: 1px; height: 56px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollCue 2.4s var(--ease) infinite; }
@keyframes scrollCue { 0%, 100% { opacity: .3; transform: scaleY(.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

@media (max-width: 1024px) { .hero__scroll { display: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   AJUSTEMENTS v2
   Moins de jaune, moins de pastilles, plus de blanc. Le jaune ne sert plus
   qu'à trois choses : le bouton d'achat, la pastille de nouveauté, le point
   des intertitres.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero : sobre. L'image porte, le texte ne surcharge pas. */
.hero--full { justify-content: flex-end; min-height: min(90svh, 820px); }
.hero--full::before {
  background:
    linear-gradient(to top, rgba(9, 10, 12, .92) 4%, rgba(9, 10, 12, .58) 34%, rgba(9, 10, 12, .18) 68%, rgba(9, 10, 12, .42) 100%);
}
.hero--full .hero__title {
  font-size: clamp(2.8rem, .8rem + 7.2vw, 6.4rem);
  letter-spacing: -.05em;
  line-height: .95;
  max-width: 16ch;
  margin-bottom: 1.1rem;
}
.hero--full .hero__title .dim { color: rgba(255, 255, 255, .5); }
.hero--full .hero__lead {
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 2.2rem;
}
.hero--full .hero__actions { margin-bottom: 0; }

/* ── Intertitres : le point jaune rétrécit, le label passe en gris froid. */
.eyebrow { margin-bottom: .9rem; letter-spacing: .14em; }
.eyebrow::before { width: 6px; height: 6px; box-shadow: none; }

/* ── Carte produit : fenêtre de document */
.card { border-radius: var(--r); }
.card__chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .8rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
}
.card__file {
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__meta {
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); white-space: nowrap;
}
.card__media { border-radius: 0; }
.card__body { padding: .95rem 1rem 1rem; }
.card__name { font-size: 1.05rem; margin-bottom: .4rem; letter-spacing: -.025em; }
.card__excerpt {
  font-size: var(--fs-xs); color: var(--muted); margin-bottom: 1rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__price { font-size: 1.08rem; }
.badge { background: var(--ink); color: #FFF; font-weight: 700; }

/* ── Pied de page : trois blocs, beaucoup d'air, une signature. */
.ft { padding-top: clamp(4rem, 8vw, 7rem); }
.ft__top {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem clamp(2rem, 6vw, 5rem); flex-wrap: wrap;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.ft__title { font-size: clamp(2rem, 4.4vw, 3.6rem); margin: 0; }
.ft__title .dim { color: rgba(255, 255, 255, .38); }
.ft__act { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.ft__mail {
  font-size: clamp(1rem, 1.8vw, 1.35rem); font-weight: 600; letter-spacing: -.02em;
  color: rgba(255, 255, 255, .62);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.ft__mail:hover { color: #FFF; border-color: var(--gold); }

.ft__grid { padding-block: clamp(2.5rem, 5vw, 4rem); gap: 2.2rem 1.4rem; }
.ft__col-title { color: rgba(255, 255, 255, .35); letter-spacing: .16em; }
.ft__col a { color: rgba(255, 255, 255, .68); }


.ft__bottom {
  display: flex; justify-content: space-between; gap: .6rem 2rem; flex-wrap: wrap;
  padding: 1.4rem 0 clamp(3.5rem, 7vw, 5rem);
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: var(--fs-xs); color: rgba(255, 255, 255, .38);
}
.ft__bottom a { color: rgba(255, 255, 255, .62); border-bottom: 1px solid rgba(232, 160, 32, .35); }
.ft__bottom a:hover { color: var(--gold); }

@media (max-width: 820px) {
  .ft__top { flex-direction: column; align-items: flex-start; }
  .ft__bottom { flex-direction: column; }
}

/* La dernière carte du bento occupe les deux colonnes restantes : sans cela
   la colonne de droite s'arrête une rangée trop tôt et la grille boite. */
@media (min-width: 1181px) {
  .bento .bcard--gold { grid-column: span 2; }
  .bento .bcard--gold p { max-width: 52ch; }
}

/* Coin bas droit : la mascotte sort du cadre sans jamais couvrir de texte. */
.peek--br {
  bottom: 0; right: clamp(1rem, 3vw, 2.5rem);
  width: clamp(88px, 11vw, 142px);
  transform: translate(18%, 34%) rotate(6deg);
}
.peek--br:hover { transform: translate(18%, 28%) rotate(3deg); }


/* ═══════════════════════════════════════════════════════════════════════════
   v3 : logotype officiel, couleur, effets de défilement
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Logotype : image détourée du logo officiel, pas une reconstitution. */
.wordmark__img { height: clamp(22px, 2.4vw, 27px); width: auto; }


/* ── Bandeau défilant en jaune : la bande de couleur qui manquait. */


/* ── Surlignage : rétabli, mais calibré comme un trait de feutre.
   Il ne couvre plus que le bas de la ligne, jamais tout le bloc. */
.mark {
  background-image: linear-gradient(to bottom, transparent 62%, var(--gold) 62%, var(--gold) 92%, transparent 92%);
  background-repeat: no-repeat;
  padding-inline: .08em;
}
.hero--full .mark { --gold-hero: #FFE200; }

/* ── Révélation des images.
   Surtout PAS de clip-path sur l'élément observé : un clip qui réduit la
   boîte à une aire nulle empêche l'IntersectionObserver de constater que
   l'élément est visible. L'image se cachait si bien qu'elle interdisait sa
   propre révélation, puis le filet de sécurité la rendait opaque en la
   laissant clippée — donc invisible pour de bon.

   L'entrée passe par l'opacité, la translation et le zoom arrière de
   l'image, déclarés plus bas. Ces trois-là n'altèrent pas la boîte. */
.js [data-img] { clip-path: none; }

/* ── Parallaxe : l'image avance moins vite que la page. */
[data-parallax] { will-change: transform; }


/* ── Galerie décalée : trois aperçus qui se chevauchent en escalier.
   L'alignement parfait fait catalogue ; le décalage fait portfolio. */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); row-gap: clamp(1.5rem, 4vw, 3.5rem); }
.shot {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-2);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.shot:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
/* Deux colonnes franches, decalees d'un demi-pas. L'oeil suit une regle,
   le decalage l'empeche seulement de lire un tableau. */
.shot:nth-child(1) { grid-column: 1 / span 6; }
.shot:nth-child(2) { grid-column: 7 / span 6; margin-top: clamp(2.5rem, 6vw, 5rem); }
.shot:nth-child(3) { grid-column: 1 / span 6; margin-top: clamp(-1rem, -2vw, -2rem); }
.shot:nth-child(4) { grid-column: 7 / span 6; margin-top: clamp(1rem, 2vw, 2rem); }

.shot__chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .8rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
  font-size: .66rem; font-weight: 600; color: var(--muted);
}
.shot__chrome b { color: var(--ink); font-weight: 700; }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; }
.shot__foot span { font-size: var(--fs-xs); color: var(--muted); }
.shot__foot b { font-size: var(--fs-sm); }

@media (max-width: 820px) {
  .gallery { grid-template-columns: 1fr; }
  .shot:nth-child(n) { grid-column: 1; margin-top: 0; }
}


/* ── Tracé du parcours : une piste en pointillé, une ligne jaune qui la remplit. */
.path__track { color: rgba(255, 255, 255, .22); }
.path__fill  { color: var(--gold); filter: drop-shadow(0 0 6px rgba(232, 160, 32, .5)); }


/* ═══════════════════════════════════════════════════════════════════════════
   v4 : le vert de la charte, et des mascottes qui entrent par les bords
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Le vert a un rôle précis : Discord, et tout ce qui valide.
   Une couleur sans emploi défini finit toujours par salir une charte. */
.btn--discord { --btn-bg: var(--green); --btn-fg: #FFF; --btn-bd: var(--green); font-weight: 700; }
.btn--discord:hover { --btn-bg: var(--green-2); --btn-bd: var(--green-2); box-shadow: 0 10px 28px -12px rgba(30, 60, 40, .6); }

.ticks .ico,
.svc__items .ico,
.product__reassure .ico,
.panel__list .ico { color: var(--green); }

.panel--ink .panel__list .ico { color: var(--green-lite); }

.bcard--green { background: var(--green); border-color: var(--green); color: #FFF; }
.bcard--green p { color: rgba(255, 255, 255, .78); }
.bcard--green .bcard__ico { border-color: rgba(255, 255, 255, .28); color: #FFF; }

.ticks-legal li::before { background: var(--green); }
.infobox--gold { background: var(--gold-soft); border-color: rgba(232, 160, 32, .45); }

/* Le bandeau défilant reprend l'or : c'est la bande de couleur du site actuel. */


/* Les sections sombres passent au bleu nuit du site actuel, pas au gris. */
.ft, .panel--ink, .bcard--ink { background: var(--ink-deep); border-color: var(--ink-deep); }
.dark { background: var(--ink-deep); }

/* Le pinceau du logotype garde le jaune d'origine partout où il apparaît. */
.wordmark__brush { color: var(--logo-yellow); }


/* ── Mascottes : entrées par les bords, tailles franchement différentes.
   Trois calibres seulement. Au-delà, l'oeil ne lit plus une intention mais
   un accident. */
.peek { opacity: 1; }
.js .peek {
  opacity: 0;
  transition: transform 1.2s var(--ease-out), opacity .7s var(--ease);
}
.peek.vu { opacity: 1; }

.peek--sm { width: clamp(96px, 11vw, 150px); }
.peek--md { width: clamp(120px, 14vw, 190px); }
.peek--lg { width: clamp(170px, 21vw, 290px); }

/* Coin bas droit : sort de la carte en tournant légèrement. */
.peek--br { bottom: 0; right: clamp(1rem, 3vw, 2.5rem); transform: translate(46%, 88%) rotate(22deg); }
.peek--br.vu { transform: translate(18%, 34%) rotate(6deg); }

/* Coin bas gauche. */
.peek--bl { bottom: 0; left: clamp(1rem, 3vw, 2.5rem); transform: translate(-46%, 92%) rotate(-24deg); }
.peek--bl.vu { transform: translate(-14%, 36%) rotate(-7deg); }

/* Bord droit : arrive de l'extérieur de la fenêtre, comme s'il se penchait. */
/* Bord droit. La colonne de texte s'arrete a 900 px, la mascotte occupe
   l'espace libre au-dela : elle ne recouvre jamais un bouton. */
.peek--r { top: auto; bottom: 0; right: 0; transform: translate(120%, 30%) rotate(22deg); }
.peek--r.vu { transform: translate(12%, 12%) rotate(6deg); }

/* Bord gauche, hors gouttière : le plus spectaculaire, réservé aux grandes sections. */
.peek--edge-l { bottom: 6%; left: calc(-1 * var(--gutter)); transform: translateX(-135%) rotate(-18deg); }
.peek--edge-l.vu { transform: translateX(-32%) rotate(-8deg); }

/* Haut, derrière un titre : n'arrive jamais devant du texte, seulement derrière. */
.peek--behind { top: 0; right: 8%; z-index: 0; opacity: 0; transform: translateY(-40%) rotate(12deg) scale(.9); }
.peek--behind.vu { opacity: .9; transform: translateY(-26%) rotate(8deg) scale(1); }

@media (max-width: 900px) {
  .peek--edge-l, .peek--r, .peek--behind { display: none; }
  .peek--lg { width: 130px; }
  .peek--md { width: 104px; }
}

/* Chaque aperçu se cale en haut de sa rangée : sans cela, la première carte
   s'étire sur toute la hauteur de la plus grande et laisse un vide blanc. */
.gallery { align-items: start; }

/* La mascotte sort du cadre, mais reste identifiable : coupée à moitié elle
   ressemble à un bug, coupée au quart elle ressemble à une intention. */
.peek--edge-l.vu { transform: translateX(-12%) rotate(-8deg); }


/* ═══════════════════════════════════════════════════════════════════════════
   v5 : profondeur, verre dépoli, réactions au curseur
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────  PIED DE PAGE */
.ft {
  position: relative;
  isolation: isolate;
  background: var(--ink-deep);
  color: #FFF;
  padding-top: clamp(4rem, 9vw, 8rem);
  overflow: hidden;
}
.ft__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 120%; object-fit: cover;
  opacity: .85;
}
.ft::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(18, 18, 16, .82), rgba(18, 18, 16, .94));
}
.ft__in { position: relative; }

.ft__cta {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: end;
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.ft__title { font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: -.045em; line-height: 1; }
.ft__title .dim { color: rgba(255, 255, 255, .34); }

.ft__cta-side { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.ft__mail {
  font-size: clamp(1.1rem, 2.2vw, 1.7rem); font-weight: 600; letter-spacing: -.03em;
  color: #FFF;
  border-bottom: 1.5px solid rgba(232, 160, 32, .55);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.ft__mail:hover { color: var(--gold-lite); border-color: var(--gold-lite); }
.ft__delay { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: rgba(255, 255, 255, .45); }
.ft__delay .ico { color: var(--green-lite); }

.ft__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, 1fr);
  gap: 2.4rem 1.5rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.ft__brand { display: grid; gap: .9rem; align-content: start; }
.ft__logo { width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .8); }
.ft__word { width: min(190px, 80%); height: auto; }
.ft__brand p { font-size: var(--fs-xs); color: rgba(255, 255, 255, .45); max-width: 34ch; }

.ft__col-title { font-size: var(--fs-label); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .32); margin-bottom: .9rem; }
.ft__col ul { display: grid; gap: .5rem; }
.ft__col a {
  position: relative; font-size: var(--fs-sm); color: rgba(255, 255, 255, .68);
  transition: color .22s var(--ease), padding-left .28s var(--ease);
}
.ft__col a::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 0; height: 1.5px; background: var(--gold);
  transform: translateY(-50%);
  transition: width .28s var(--ease-out);
}
.ft__col a:hover { color: #FFF; padding-left: 14px; }
.ft__col a:hover::before { width: 9px; }

.ft__bottom {
  display: flex; justify-content: space-between; gap: .6rem 2rem; flex-wrap: wrap;
  padding: 1.4rem 0 clamp(3.5rem, 7vw, 5rem);
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: var(--fs-xs); color: rgba(255, 255, 255, .38);
}
.ft__bottom a { color: rgba(255, 255, 255, .7); border-bottom: 1px solid rgba(232, 160, 32, .5); }
.ft__bottom a:hover { color: var(--gold-lite); }

@media (max-width: 1100px) { .ft__grid { grid-template-columns: 1fr 1fr 1fr; } .ft__brand { grid-column: 1 / -1; } }
@media (max-width: 700px)  { .ft__cta { grid-template-columns: 1fr; } .ft__grid { grid-template-columns: 1fr 1fr; } .ft__bottom { flex-direction: column; } }


/* ─────────────────────────────────  VERRE DÉPOLI
   Réservé aux surfaces posées SUR une image. Sur un fond plat, un panneau de
   verre n'a rien à flouter : il ne fait qu'ajouter du bruit. */
.glass {
  background: rgba(255, 255, 255, .09);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 20px 50px -30px rgba(0, 0, 0, .9);
}
.glass--light {
  background: rgba(255, 252, 246, .62);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--sh-2);
}


/* ─────────────────────────────────  PROFONDEUR ET INCLINAISON
   La carte pivote légèrement vers le curseur. L'amplitude reste basse :
   au-delà de 8 degrés on quitte la finesse pour la démonstration technique. */


/* Reflet qui suit le curseur : c'est lui qui donne la matière, pas l'ombre. */


.bcard--ink

/* Bouton magnétique : il se décale vers le curseur avant même le clic. */


/* ─────────────────────────────────  RÉVÉLATIONS, PLUSIEURS ENTRÉES
   Varier la direction d'entrée évite l'effet « tout monte pareil », qui finit
   par se remarquer et fatiguer. */
.js [data-reveal="left"]  { opacity: 0; transform: translateX(-38px); }
.js [data-reveal="right"] { opacity: 0; transform: translateX(38px); }
.js [data-reveal="scale"] { opacity: 0; transform: scale(.94); }
.js [data-reveal="blur"]  { opacity: 0; filter: blur(14px); transform: translateY(14px); }
[data-reveal="left"].vu,
[data-reveal="right"].vu,
[data-reveal="scale"].vu { opacity: 1; transform: none; }
[data-reveal="blur"].vu  { opacity: 1; filter: none; transform: none; }
[data-reveal="blur"] { transition: opacity .9s var(--ease-out), filter .9s var(--ease-out), transform .9s var(--ease-out); }


/* Compteurs : les chiffres montent au lieu d'apparaître. */
.stats__item b { font-variant-numeric: tabular-nums; }


/* ─────────────────────────────────  SOULIGNAGE TRACÉ À LA MAIN
   Remplace le surlignage plein : moins bavard, et le tracé qui se dessine
   attire l'oeil sans écraser le mot. */

/* Les étapes du parcours sont posées sur une image : c'est le cas d'usage
   exact du verre dépoli, il a quelque chose à flouter. */
.path__card { padding: 1.1rem 1.3rem; border-radius: var(--r-lg); }
.path__step:nth-child(odd) .path__card { text-align: right; }
.path__pill {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: .55rem; padding: .3rem .8rem;
  background: var(--gold); color: var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700;
  box-shadow: none;
}
.path__card p { color: rgba(255, 255, 255, .82); }
.path { padding-block: clamp(4rem, 9vw, 8rem); }

/* La carte jaune réserve la place de la mascotte : le texte s'arrête avant,
   il ne passe jamais dessous. */
@media (min-width: 901px) {
  .bcard--gold.has-peek { padding-right: clamp(130px, 15vw, 200px); }
  .bcard--gold.has-peek p, .bcard--gold.has-peek h3 { max-width: 34ch; }
}

/* Filet de sécurité : si l'observateur ne se déclenche pas (onglet en
   arrière-plan au chargement, par exemple), rien ne doit rester invisible. */


/* ─────────────────────────────────  PANIER VIDE
   Centré verticalement, et surtout : il propose quelque chose. */
.drawer__empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem;
  padding: 1.5rem 1.15rem;
  text-align: center;
}
.drawer__mascot { width: clamp(110px, 34vw, 150px); height: auto; margin-bottom: .4rem; }
.drawer__empty-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.03em; }
.drawer__empty-sub { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.1rem; }
.drawer__empty .btn { margin-bottom: 1.6rem; }

.suggest { width: 100%; text-align: left; }
.suggest__label { font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .5rem; }
.suggest__item {
  display: grid; grid-template-columns: 76px 1fr auto; gap: .75rem; align-items: center;
  padding: .55rem; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color .22s var(--ease), transform .3s var(--ease-out);
}
.suggest__item:hover { border-color: var(--gold); transform: translateX(3px); }
.suggest__item img { width: 76px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-xs); }
.suggest__item b { display: block; font-size: var(--fs-sm); line-height: 1.3; }
.suggest__item i { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }


/* ═══════════════════════════════════════════════════════════════════════════
   v6 : navbar flottante, accordeon deroulant, separation du pied de page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────  NAVBAR FLOTTANTE
   Pastille posee au-dessus du contenu, fond floute. Elle ne prend pas toute
   la largeur : le site respire au-dessus, et le flou reste lisible quel que
   soit ce qui defile dessous. */
.hdr {
  position: fixed; inset: 1rem 0 auto 0;
  z-index: var(--z-hdr);
  display: flex; justify-content: center;
  padding-inline: var(--gutter);
  /* Le conteneur est strictement invisible : seule la pastille se voit.
     Tout fond ou flou posé ici produirait une bande pleine largeur. */
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  transition: transform .5s var(--ease-out), inset .4s var(--ease);
}
.hdr.is-stuck { inset-block-start: .65rem; }
.hdr.is-hidden { transform: translateY(-160%); }

.hdr__pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.6rem);
  width: 100%; max-width: 1180px;
  padding: .55rem .55rem .55rem 1.1rem;
  border-radius: var(--r-pill);
  background: rgba(18, 20, 24, .55);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 18px 50px -24px rgba(0, 0, 0, .75);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), max-width .4s var(--ease);
}
.hdr.is-stuck .hdr__pill {
  background: rgba(14, 16, 20, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 22px 60px -26px rgba(0, 0, 0, .85);
}

.wordmark { display: inline-flex; align-items: center; gap: .55rem; }
.wordmark__rond { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.wordmark__img  { height: 21px; width: auto; }

.hdr__nav { display: flex; gap: .15rem; margin-inline: auto; }
.hdr__nav a {
  position: relative;
  padding: .55rem .85rem;
  border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 600; letter-spacing: -.005em;
  color: rgba(255, 255, 255, .74);
  transition: color .22s var(--ease), background .22s var(--ease);
}
.hdr__nav a::after { display: none; }
.hdr__nav a:hover { color: #FFF; background: rgba(255, 255, 255, .1); }
.hdr__nav a[aria-current] { color: var(--ink); background: var(--gold); }

.hdr__end { display: flex; align-items: center; gap: .45rem; }
.hdr__end .icon-btn {
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .16);
  color: #FFF;
}
.hdr__end .icon-btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.icon-btn__count { border-color: rgba(18, 20, 24, .8); }
.hdr__cta { padding: .55rem 1.05rem; font-size: .82rem; }

@media (max-width: 1080px) {
  .hdr__nav { display: none; }
  .hdr__cta { display: none; }
  .hdr__end { margin-left: auto; }
  .hdr__pill { padding-left: .9rem; }
}

/* Le contenu commence sous la pastille flottante. */
.hero--full { padding-top: 8.5rem; }
.page-head  { padding-top: clamp(8rem, 13vw, 10.5rem); }
.product    { padding-top: clamp(7.5rem, 11vw, 10rem); }
.err        { padding-top: clamp(8.5rem, 14vw, 11rem); }


/* ─────────────────────────────────  MENU MOBILE : logotype sombre */
.menu .wordmark__img { height: 24px; }


/* ─────────────────────────────────  ACCORDEON QUI SE DEROULE
   grid-template-rows anime proprement une hauteur inconnue, ce que
   max-height ne sait pas faire sans a-coups. */
.acc__item { overflow: hidden; }
html:not(.js) .acc__panel { grid-template-rows: 1fr; }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .48s var(--ease-out);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__body { padding-bottom: 1.35rem; max-width: 76ch; }
.acc__body p {
  color: var(--muted);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease) .12s, transform .4s var(--ease-out) .12s;
}
.acc__item.is-open .acc__body p { opacity: 1; transform: none; }

.acc__item summary { position: relative; z-index: 2; }
.acc__sign { transition: transform .4s var(--ease-out); }


/* ─────────────────────────────────  SEPARATION CTA / PIED DE PAGE
   Le bloc d'appel reste clair, le pied de page bascule en sombre : la
   rupture de fond suffit, plus besoin de filet. */
.closing {
  background: var(--paper-2);
  border-top: 1px solid var(--line-2);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.closing__in { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.closing__title { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.045em; line-height: 1; }
.closing__side { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.closing__mail { font-size: clamp(1.1rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.03em; border-bottom: 2px solid var(--gold); padding-bottom: 3px; }
.closing__mail:hover { color: var(--gold-2); }
.closing__delay { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--muted); }
.closing__delay .ico { color: var(--green); }
@media (max-width: 820px) { .closing__in { grid-template-columns: 1fr; } }

/* ─────────────────────────────────  PIED DE PAGE v2 */
.ft { padding-top: clamp(3.5rem, 7vw, 6rem); }
.ft__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(5, 1fr);
  gap: 2.4rem 1.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-top: 0;
}
.ft__brand { position: relative; display: grid; gap: .85rem; align-content: start; }
.ft__id { display: inline-flex; align-items: center; gap: .7rem; }
.ft__rond { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 6px 22px -8px rgba(0, 0, 0, .9); }
.ft__word { width: min(160px, 62%); height: auto; }
.ft__brand p { font-size: var(--fs-xs); color: rgba(255, 255, 255, .45); max-width: 32ch; }

/* Phragy salue depuis le coin du pied de page, loin de tout texte. */
.ft__phragy {
  position: absolute; left: 0; bottom: -1.5rem;
  width: clamp(96px, 11vw, 148px); height: auto;
  opacity: 0; transform: translate(-30%, 60%) rotate(-16deg);
  transition: transform 1.2s var(--ease-out), opacity .7s var(--ease);
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .5));
  pointer-events: none;
}
.ft__phragy.vu { opacity: 1; transform: translate(-14%, 24%) rotate(-7deg); }

.ft__bottom { border-top: 1px solid rgba(255, 255, 255, .09); }
.ft__bottom p { display: flex; align-items: center; gap: .35rem; }

@media (max-width: 1100px) {
  .ft__grid { grid-template-columns: 1fr 1fr 1fr; }
  .ft__brand { grid-column: 1 / -1; }
  .ft__phragy { display: none; }
}
@media (max-width: 700px) { .ft__grid { grid-template-columns: 1fr 1fr; } }


/* ─────────────────────────────────  RENVOI VERS L'AGENCE
   Le bloc reprend la charte de graphfr.online, pas celle d'ici : c'est une
   autre marque, la distinguer visuellement rend le renvoi plus credible. */
.agency {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.3rem, 2.8vw, 2.1rem);
  border: 0; border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, .09), rgba(37, 99, 235, .07)),
    var(--surface);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.agency::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(135deg, #7C3AED, #2563EB);
}
.agency__logo {
  width: 56px; height: 56px; padding: 0; border-radius: var(--r-sm);
  background: none; display: block;
}
.agency__label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(135deg, #7C3AED, #2563EB);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .3rem;
}
.agency h2, .agency h3 { font-size: var(--fs-h3); margin-bottom: .35rem; }
.agency p { color: var(--muted); font-size: var(--fs-sm); max-width: 62ch; }
.agency .btn--ink {
  --btn-bg: linear-gradient(135deg, #7C3AED, #2563EB);
  --btn-fg: #FFF;
  --btn-bd: transparent;
}
.agency .btn--ink:hover { box-shadow: 0 12px 32px -14px rgba(124, 58, 237, .8); }

/* ─────────────────────────────────  PARCOURS : vie et profondeur */
.path__card {
  padding: 1.15rem 1.35rem;
  border-radius: var(--r-lg);
  transition: transform .5s var(--ease-out), background .4s var(--ease);
}
.path__card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .14); }
.path__pill {
  box-shadow: 0 8px 24px -10px rgba(232, 160, 32, .9);
  transition: transform .4s var(--ease-out);
}
.path__card:hover .path__pill { transform: scale(1.04); }

/* La mascotte occupe le creux du tracé, là où il n'y a que du fond. */
.path__phragy {
  position: absolute;
  left: 6%; top: 44%;
  width: clamp(120px, 15vw, 210px); height: auto;
  z-index: 1;
  opacity: 0; transform: translate(-40%, 0) rotate(-14deg);
  transition: transform 1.3s var(--ease-out), opacity .8s var(--ease);
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .55));
  pointer-events: none;
}
.path__phragy.vu { opacity: 1; transform: translate(0, 0) rotate(-5deg); }

@media (max-width: 1100px) { .path__phragy { display: none; } }

/* Les pastilles d'etape reviennent a gauche sur les rangees impaires :
   le texte aligne a droite avec une pastille a gauche se lisait mal. */
.path__step:nth-child(odd) .path__card { text-align: right; }
.path__step:nth-child(odd) .path__pill { flex-direction: row-reverse; }


/* ═══════════════════════════════════════════════════════════════════════════
   v7 : rangées visuel + texte, étapes, emplacements d'images
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────  RANGÉE ALTERNÉE
   Une prestation, un visuel, un texte. Le sens de lecture s'inverse d'une
   rangée à l'autre pour éviter la colonne monotone. */
.duo { padding-block: clamp(2.5rem, 6vw, 5rem); }
.duo + .duo { border-top: 1px solid var(--line-2); }
.duo__in {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
}
.duo--flip .duo__media { order: 2; }

.duo__media {
  margin: 0; border-radius: var(--r-xl); overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--sh-2);
  aspect-ratio: 16 / 10;
}
.duo__media img { width: 100%; height: 100%; object-fit: cover; }

.duo__text { position: relative; }
.duo__num {
  display: block;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .2em;
  color: var(--muted-2); margin-bottom: .9rem;
}
.duo__text .tile__ico { margin-bottom: 1.1rem; }
.duo__text .tile__ico svg { transition: transform .4s var(--doux); }
.duo:hover .tile__ico svg { transform: scale(1.15) rotate(4deg); }
.duo__lead { font-size: var(--fs-lead); margin: .9rem 0 .8rem; max-width: 42ch; }
.duo__body { color: var(--muted); margin-bottom: 1.5rem; max-width: 50ch; }
.duo__items { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.2rem; margin-bottom: 1.8rem; }
.duo__items li { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--muted); }
.duo__items .ico { color: var(--green); flex: none; }
.duo__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 860px) {
  .duo__in { grid-template-columns: 1fr; }
  .duo--flip .duo__media { order: 0; }
  .duo__items { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────  ÉTAPES */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.step {
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
}
.step__n {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--ink); color: var(--gold);
  font-size: .85rem; font-weight: 700;
}
.step h3 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.step p { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }


/* ─────────────────────────────────  EMPLACEMENT D'IMAGE
   Visible, explicite, avec le format attendu. Un cadre gris muet se
   retrouve en production ; celui-ci se remarque. */
.slot {
  display: grid; place-content: center; justify-items: center; gap: .3rem;
  width: 100%; height: 100%;
  padding: 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(232, 160, 32, .05) 0 12px, transparent 12px 24px),
    var(--paper-2);
  border: 2px dashed rgba(232, 160, 32, .38);
  border-radius: var(--r-xl);
}
.slot__mascot { width: clamp(70px, 9vw, 100px); height: auto; opacity: .85; margin-bottom: .4rem; }
.slot__label { font-size: var(--fs-sm); font-weight: 700; color: var(--gold-2); }
.slot__hint  { font-size: var(--fs-xs); color: var(--muted-2); }
.duo__media--slot { box-shadow: none; background: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   v8 : fondateur, offres d'emploi, partenaires, contact
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────  FONDATEUR */
.founder {
  position: relative;
  display: grid; grid-template-columns: 200px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  max-width: 900px;
}
.founder__photo { width: 200px; height: 200px; border-radius: var(--r-lg); object-fit: cover; }
.founder__photo.slot { border-radius: var(--r-lg); }
.founder__name { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .6rem; }
.founder__bio { color: var(--muted); margin-bottom: 1rem; max-width: 46ch; }
.founder__phragy {
  position: absolute; right: 0; bottom: 0;
  width: clamp(100px, 12vw, 160px); height: auto;
  opacity: 0; transform: translate(80%, 40%) rotate(18deg);
  transition: transform 1.2s var(--ease-out), opacity .7s var(--ease);
  filter: drop-shadow(0 14px 26px rgba(26, 26, 24, .22));
  pointer-events: none;
}
.founder__phragy.vu { opacity: 1; transform: translate(28%, 16%) rotate(6deg); }
@media (max-width: 720px) {
  .founder { grid-template-columns: 1fr; text-align: left; }
  .founder__photo { width: 140px; height: 140px; }
  .founder__phragy { display: none; }
}


/* ─────────────────────────────────  OFFRES */
.job {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.job__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.job__media img { width: 100%; height: 100%; object-fit: cover; }
.job__media .slot { border: 0; border-bottom: 2px dashed rgba(232, 160, 32, .35); border-radius: 0; }
.job__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.2rem, 2.2vw, 1.7rem); }
.job__title { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .5rem; }
.job__lead { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1.1rem; }
.job__list { margin-bottom: 1.1rem; }
.job__profil {
  font-size: var(--fs-xs); color: var(--muted);
  padding: .7rem .85rem; margin-bottom: 1.2rem;
  background: var(--paper); border-radius: var(--r-sm);
}
.job__profil b { display: block; color: var(--ink); margin-bottom: .15rem; }
.job .btn { margin-top: auto; }


/* ─────────────────────────────────  PARTENAIRES */
.partner {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.partner__logo {
  display: grid; place-items: center;
  aspect-ratio: 2 / 1; padding: 1.2rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
}
.partner__logo img { max-height: 74px; width: auto; object-fit: contain; }
.partner__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.2rem, 2.2vw, 1.6rem); }
.partner__name { font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin-bottom: .5rem; }
.partner__body p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1.2rem; }
.partner__body .btn { margin-top: auto; align-self: flex-start; }
.partner__todo {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: auto;
  font-size: var(--fs-xs); color: var(--muted-2);
}
.slot--flat { border-radius: var(--r-sm); padding: 1rem; }


/* ─────────────────────────────────  CONTACT */
.contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.contact .form { max-width: none; }
.contact__aside { display: grid; gap: .8rem; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }


/* Pastille de navigation plus généreuse : elle porte la marque, elle doit
   se voir. Le logotype passe de 21 à 26 px, la pastille respire. */
.hdr__pill { padding: .7rem .7rem .7rem 1.25rem; gap: clamp(.7rem, 1.8vw, 2rem); }
.wordmark__rond { width: 36px; height: 36px; }
.wordmark__img  { height: 26px; }
.hdr__nav a { padding: .6rem .95rem; font-size: .855rem; }
.hdr__end .icon-btn { width: 42px; height: 42px; }
.hdr__cta { padding: .65rem 1.2rem; font-size: .855rem; }

@media (max-width: 1240px) { .wordmark__img { height: 22px; } .hdr__nav a { padding: .55rem .7rem; font-size: .8rem; } }


/* ═══════════════════════════════════════════════════════════════════════════
   v9 : reprise complète après revue design
   Palette de référence, contraste relevé, rythme resserré, quota de couleur
   tenu. Ce bloc prime sur tout ce qui précède.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Le gris de seconde ligne remonte à 48 % : en dessous, sur crème, ça
   ressemblait à une maquette inachevée. */
.dim { color: rgba(26, 26, 24, .48); }
.dark .dim, .path .dim, .ft .dim, .hero--full .dim, .bcard--ink .dim {
  color: rgba(244, 241, 234, .5);
}

/* ── Certaines sections prennent toute la largeur : la colonne centrale
   unique enfermait la page sur grand écran. */
.section--full > .wrap { max-width: none; }
.wrap--large { max-width: 1800px; }


/* ── HERO : aplat graphite. Le visuel définitif prendra sa place ici. */
.hero--full {
  min-height: auto;
  padding: clamp(9rem, 14vw, 12rem) 0 clamp(4rem, 7vw, 6.5rem);
  background:
    radial-gradient(120% 90% at 15% 110%, rgba(232, 160, 32, .13), transparent 58%),
    linear-gradient(168deg, #232320 0%, var(--ink) 45%, #131311 100%);
  color: #FFF;
}
.hero--full::before { display: none; }
.hero--full .hero__bg { display: none; }
.hero--full .hero__title {
  font-size: clamp(2.7rem, .9rem + 6.6vw, 5.8rem);
  letter-spacing: -.045em;
  line-height: 1.02;
  max-width: 18ch;
  margin-bottom: 1.5rem;
}

/* L'écart titre / sous-titre était trop brutal : le sous-titre remonte. */
.hero--full .hero__lead {
  font-size: clamp(1.1rem, 1rem + .55vw, 1.5rem);
  line-height: 1.55;
  letter-spacing: -.012em;
  text-transform: none;
  color: rgba(244, 241, 234, .74);
  max-width: 54ch;
  margin-bottom: 2.4rem;
}
.hero__scroll { color: rgba(244, 241, 234, .4); }
.hero__scroll i { background: linear-gradient(to bottom, var(--gold), transparent); }

/* Un seul bouton plein. Le second en contour fin : deux pleins se
   disputaient l'attention. */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: #FFF;
  --btn-bd: rgba(244, 241, 234, .38);
}
.btn--outline:hover { --btn-bd: #FFF; --btn-bg: rgba(244, 241, 234, .08); }

/* ── Vert Discord : le vert saturé était hors palette. */
.btn--discord { --btn-bg: var(--green); --btn-fg: #FFF; --btn-bd: var(--green); }
.btn--discord:hover {
  --btn-bg: var(--green-2);
  --btn-bd: var(--green-2);
  box-shadow: 0 10px 28px -14px rgba(30, 60, 40, .8);
}


/* ── BANDEAU : fond graphite, texte or. En aplat or pleine largeur il
   consommait à lui seul tout le quota de couleur de la page. */


/* ── BENTO : la carte « usage commercial » passe en crème à liseret or. */
.bcard--liseret {
  background: var(--surface);
  border: 1px solid rgba(232, 160, 32, .5);
  box-shadow: inset 3px 0 0 var(--gold), var(--sh-1);
}
.bcard--liseret .bcard__ico { border-color: rgba(232, 160, 32, .45); color: var(--gold-2); }


/* ── VIGNETTES PRODUIT
   Les visuels sont saturés et multicolores, ils ne peuvent pas changer.
   On les cadre : ratio unique, taille contenue, voile discret. */
.card__media { aspect-ratio: 16 / 10; position: relative; }
.card__media img { filter: saturate(.86) contrast(.97); }
.card__media::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 26, 24, .1), rgba(26, 26, 24, .2));
  transition: opacity .5s var(--ease);
}
.card:hover .card__media::after { opacity: .45; }
.card__body { padding: .9rem 1rem 1rem; }
.card__name { font-size: 1rem; }


/* ── APERÇUS : grille régulière. Le quinconce sans règle se lisait comme un
   défaut de mise en page, pas comme une intention. */
.gallery { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 1.6vw, 1.6rem); }
.gallery .shot:nth-child(n) { grid-column: auto; margin-top: 0; }
.shot { position: relative; }
.shot img { aspect-ratio: 16 / 10; filter: saturate(.86) contrast(.97); }
.shot::after {
  content: '';
  position: absolute; inset: 2.1rem 0 3.2rem;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 26, 24, .1), rgba(26, 26, 24, .2));
}
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }


/* ── FRISE : parcours lisible, numéros bien visibles. */
.path { padding-block: clamp(3.5rem, 7vw, 6rem); }
.path__title { font-size: var(--fs-h2); max-width: 22ch; }
.path__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.frise {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
}

/* Le fil qui relie les étapes est horizontal : l'ordre de lecture devient
   celui de la lecture normale, de gauche à droite. */
.frise::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 26px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(232, 160, 32, .45) 8%, rgba(232, 160, 32, .45) 92%, transparent);
}
.frise__etape { position: relative; }
.frise__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--gold); color: var(--ink);
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 8px var(--ink-deep);
}
.frise__titre { font-size: clamp(1.15rem, 1.8vw, 1.45rem); margin-bottom: .5rem; color: #FFF; }
.frise__etape p { color: rgba(244, 241, 234, .68); font-size: var(--fs-sm); }

@media (max-width: 900px) {
  .frise { grid-template-columns: 1fr; gap: 1.6rem; }
  .frise::before {
    left: 25px; right: auto; top: 0; bottom: 0;
    width: 1px; height: auto;
    background: linear-gradient(to bottom, transparent, rgba(232, 160, 32, .45) 6%, rgba(232, 160, 32, .45) 94%, transparent);
  }
  .frise__etape { padding-left: 4.5rem; }
  .frise__num { position: absolute; left: 0; top: 0; margin: 0; }
}


/* ── SERVICES : cartes typographiques. La même image répétée trois fois avec
   un label posé dessus ne disait rien. */
.tile__img { display: none; }
.tile { padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.tile__body { padding: 0; }
.tile h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .6rem; }
.tile__ico { border-color: rgba(232, 160, 32, .4); color: var(--gold-2); margin-bottom: 1.2rem; }
.tile__arrow { color: var(--gold-2); }


/* ── AGENCE : crème et graphite, accent or. Le violet lavande passait pour
   une publicité tierce injectée dans la page. */
.agency {
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: inset 3px 0 0 var(--gold), var(--sh-1);
}
.agency::before { display: none; }
.agency__label { background: none; color: var(--gold-2); -webkit-text-fill-color: currentColor; }
.agency__logo {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  filter: grayscale(1) contrast(.9);
  opacity: .75;
}
.agency .btn--ink { --btn-bg: var(--ink); --btn-fg: #FFF; --btn-bd: var(--ink); }
.agency .btn--ink:hover { --btn-bg: var(--ink-2); box-shadow: var(--sh-2); }


/* ── PREUVE : les retours portent sur le serveur, pas sur des prestations.
   Une ligne, pas une section. */
.proof {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem .9rem;
  padding: .9rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); color: var(--muted);
  width: fit-content;
}
.proof__stars { display: inline-flex; gap: .1rem; color: var(--gold); }


/* ── PIED DE PAGE : mascotte à l'opposé du bloc identité. */
.ft__phragy {
  position: absolute; right: 2%; bottom: 4.5rem; left: auto;
  width: clamp(96px, 10vw, 140px);
}
.ft__phragy.vu { transform: translate(10%, 20%) rotate(6deg); }
.ft__word { width: min(180px, 70%); }
.ft__bg { opacity: .5; }


/* ── RYTHME : les en-têtes de section se resserrent. */
.sec-head { margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
.page-head { padding-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }


/* ═══════════════════════════════════════════════════════════════════════════
   v10 : contact fondu dans le pied de page
   Le bloc d'appel occupait un demi-écran clair pour un email et un bouton.
   Il devient la bande haute du pied de page, avec un vrai formulaire.
   ═══════════════════════════════════════════════════════════════════════════ */

.ft { padding-top: clamp(3rem, 6vw, 5rem); }

.ft__top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(244, 241, 234, .1);
}
.ft__pitch { max-width: 34ch; }
.ft__title { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.04em; line-height: 1.04; margin-bottom: 1rem; }
.ft__sub { color: rgba(244, 241, 234, .62); font-size: var(--fs-sm); }

.ft__form { display: grid; gap: .9rem; }
.ft__fields { display: grid; gap: .8rem; }

/* Champs sur fond sombre : le blanc plein ferait une tache dans le pied de
   page, un verre légèrement teinté tient mieux. */
.field--dark > span { color: rgba(244, 241, 234, .5); }
.field--dark input,
.field--dark textarea {
  background: rgba(244, 241, 234, .06);
  border: 1px solid rgba(244, 241, 234, .16);
  color: #FFF;
  padding: .75rem .95rem;
}
.field--dark input::placeholder,
.field--dark textarea::placeholder { color: rgba(244, 241, 234, .32); }
.field--dark input:focus,
.field--dark textarea:focus {
  border-color: var(--gold);
  background: rgba(244, 241, 234, .1);
  box-shadow: 0 0 0 3px rgba(232, 160, 32, .22);
}

.ft__send { display: flex; flex-wrap: wrap; gap: .6rem; }
.ft__mail-line { font-size: var(--fs-xs); color: rgba(244, 241, 234, .45); }
.ft__mail-line a {
  color: rgba(244, 241, 234, .82);
  border-bottom: 1px solid rgba(232, 160, 32, .5);
  padding-bottom: 1px;
}
.ft__mail-line a:hover { color: var(--gold-lite); }

.ft__grid { padding-block: clamp(2.2rem, 4.5vw, 3.5rem); border-top: 0; }

@media (max-width: 860px) {
  .ft__top { grid-template-columns: 1fr; }
  .ft__pitch { max-width: none; }
}

/* Pastille de navigation : franchement graphite. A 55 % d'opacite sur fond
   creme elle virait au gris sale, exactement le defaut signale. */
.hdr__pill {
  background: rgba(26, 26, 24, .86);
  border-color: rgba(244, 241, 234, .12);
}
.hdr.is-stuck .hdr__pill { background: rgba(18, 18, 16, .93); }
.hdr__nav a { color: rgba(244, 241, 234, .78); }
.hdr__nav a:hover { color: #FFF; background: rgba(244, 241, 234, .12); }
.hdr__nav a[aria-current] { color: var(--ink); background: var(--gold); }


/* ═══════════════════════════════════════════════════════════════════════════
   v12 : les photographies définitives entrent en scène
   Le jeu de dix visuels est dans la palette de référence — vert forêt, or,
   crème, graphite. Les fonds génériques et les aplats provisoires sautent.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO : photographie de fond. Elle est déjà sombre et sur charte,
   l'assombrissement reste donc léger, juste de quoi tenir le texte. */
.hero--photo { position: relative; }
.hero--photo .hero__bg {
  background: var(--ink);
  display: block;
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero--photo::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  display: block;
  background: linear-gradient(105deg,
    rgba(18, 18, 16, .92) 0%,
    rgba(18, 18, 16, .78) 38%,
    rgba(18, 18, 16, .42) 72%,
    rgba(18, 18, 16, .28) 100%);
}
.hero--photo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
  z-index: -1;
}
.hero--photo .hero__title { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }


/* ── PORTRAIT DU FONDATEUR : format vertical, pas carré. Recadrer un
   portrait en carré coupe systématiquement au mauvais endroit. */
.founder { grid-template-columns: 220px 1fr; }
.founder__photo { width: 220px; height: 280px; object-fit: cover; object-position: center 22%; }
@media (max-width: 720px) {
  .founder { grid-template-columns: 1fr; }
  .founder__photo { width: 160px; height: 200px; }
}


/* ── RANGÉES SERVICES ET FORMATIONS : les photos ont des ratios différents,
   on impose le cadre pour que les rangées restent alignées. */
.duo__media { aspect-ratio: 4 / 3; }
.duo__media--slot { aspect-ratio: 4 / 3; box-shadow: var(--sh-2); background: var(--paper-2); }


/* ── OFFRES D'EMPLOI : même cadrage pour les trois. */
.job__media { aspect-ratio: 4 / 3; }


/* ── MASCOTTE 2D : elle est plate et lisible, l'ombre portée lourde n'a
   plus lieu d'être. */
.peek, .ft__phragy, .founder__phragy, .path__phragy {
  filter: drop-shadow(0 10px 20px rgba(26, 26, 24, .18));
}
.ft__phragy { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .4)); }
.mascot, .drawer__mascot, .slot__mascot { image-rendering: auto; }


/* ── SÉPARATEUR : le trait de peinture vert sert de respiration entre deux
   sections claires, à la place d'un simple filet. */
.trait {
  display: block;
  width: min(320px, 60%);
  height: auto;
  margin: 0 auto;
  opacity: .9;
  mix-blend-mode: multiply;
}

/* Aperçus : quatre vignettes sur une rangée. En deux colonnes elles
   faisaient 700 px de large et les néons saturés dominaient la page. */
.gallery { grid-template-columns: repeat(4, 1fr); }
.shot::after { background: linear-gradient(180deg, rgba(26, 26, 24, .16), rgba(26, 26, 24, .3)); }
.shot__chrome { font-size: .62rem; padding: .45rem .65rem; }
.shot__foot { padding: .65rem .7rem; }
.shot__foot b { font-size: var(--fs-xs); }
.shot__foot span { font-size: .72rem; }

@media (max-width: 1180px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .gallery { grid-template-columns: 1fr; } }

/* Le gris de seconde ligne doit basculer sur TOUS les fonds sombres.
   Il en manquait : sur le panneau communauté, « à plusieurs » s'écrivait
   en graphite sur graphite, donc n'existait pas. */
.dark .dim,
.path .dim,
.ft .dim,
.hero--full .dim,
.bcard--ink .dim,
.panel--ink .dim,
.showcase .dim,
.frise .dim {
  color: rgba(244, 241, 234, .52);
}


/* ═══════════════════════════════════════════════════════════════════════════
   COUCHE D'ANIMATION
   Une seule courbe pour tout le site, une seule règle : rien ne claque.

   L'easing cubic-bezier(.16, 1, .3, 1) démarre vite et arrive très amorti.
   C'est lui qui donne la sensation de fondu ; le réutiliser partout est ce
   qui fait qu'un site paraît d'une seule main plutôt qu'assemblé.

   Tout est neutralisé sous prefers-reduced-motion, en bas de ce bloc.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --doux: cubic-bezier(.16, 1, .3, 1);
  --t-court: 400ms;
  --t-entree: 900ms;
  --t-image: 1200ms;
}


/* ─────────────────────────────────  RÉVÉLATIONS
   Opacité et translation, jamais d'apparition sèche. Le retard est posé
   par le script, en cascade sur les enfants d'une grille. */
.js [data-reveal],
.js [data-img],
.js [data-peek] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity var(--t-entree) var(--doux),
    transform var(--t-entree) var(--doux);
  transition-delay: var(--retard, 0ms);
  will-change: opacity, transform;
}

.js [data-reveal].vu,
.js [data-img].vu,
.js [data-peek].vu {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Variantes d'entrée, pour éviter que tout monte de la même façon. */
.js [data-reveal="left"]  { transform: translate3d(-40px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(40px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(.96); }


/* ─────────────────────────────────  IMAGES
   Léger zoom arrière pendant le fondu : c'est ce mouvement qui donne
   l'impression que l'image respire au lieu d'apparaître. */
.js [data-img] { overflow: hidden; }
.js [data-img] > img,
.js [data-img] > picture > img {
  transform: scale(1.06);
  transition: transform var(--t-image) var(--doux);
  will-change: transform;
}
.js [data-img].vu > img,
.js [data-img].vu > picture > img { transform: scale(1); will-change: auto; }


/* ─────────────────────────────────  TITRES, LIGNE PAR LIGNE
   Chaque ligne monte depuis sa propre fenêtre. Le décalage entre lignes
   est posé par le script. */
.ligne {
  display: block;
  overflow: hidden;
  /* Compense le rognage des jambages sans décaler la ligne de base. */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.ligne__in {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1s var(--doux);
  transition-delay: var(--retard, 0ms);
  will-change: transform;
}
.js [data-split].vu .ligne__in { transform: none; will-change: auto; }
.mot { display: inline-block; }


/* ─────────────────────────────────  DEUXIÈME LIGNE DE TITRE EN OR
   Le gris clair manquait de contraste sur crème. Un dégradé or règle le
   contraste et réchauffe la page du même coup. */
.dim {
  background: linear-gradient(90deg, #E8A020, #F0B858);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Sur fond sombre le même dégradé fonctionne, il est juste éclairci. */
.dark .dim, .path .dim, .ft .dim,
.hero--full .dim, .bcard--ink .dim, .panel--ink .dim {
  background: linear-gradient(90deg, #F0B858, #F7D08A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


/* ─────────────────────────────────  TRANSITIONS D'ÉTAT
   Une seule durée courte, la même courbe. Au survol, la carte se soulève
   de six pixels : au-delà, l'effet devient un saut. */
.card, .shot, .tile, .bcard, .job, .partner, .course, .step, .infobox,
.btn, .icon-btn, .chip, .suggest__item, .path__card {
  transition: transform var(--t-court) var(--doux),
              box-shadow var(--t-court) var(--doux),
              background var(--t-court) var(--doux),
              border-color var(--t-court) var(--doux),
              color var(--t-court) var(--doux);
}

.card:hover, .shot:hover, .tile:hover, .job:hover, .partner:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 18px 40px -22px rgba(26, 26, 24, .34);
}
.bcard:hover { transform: translate3d(0, -4px, 0); }
.btn:hover { transform: translate3d(0, -2px, 0); }


/* ─────────────────────────────────  PARALLAXE
   Trois vitesses, toutes discrètes. Le conteneur masque le débordement,
   sinon l'image déborde de son cadre au fil du défilement. */
[data-parallax] { will-change: transform; }

.card__media, .shot, .duo__media, .job__media, .bento__img, .ft {
  overflow: hidden;
}
/* L'image parallaxée est plus haute que son cadre : sans marge, on verrait
   le fond apparaître en haut ou en bas pendant le déplacement. */
.card__media img[data-parallax],
.duo__media img[data-parallax] { height: 118%; margin-top: -9%; }
.hero__bg[data-parallax], .ft__bg[data-parallax] { height: 130%; top: -15%; }



/* La barre de la frise se remplit de gauche à droite. */
.frise__piste {
  position: absolute; left: 0; right: 0; top: 26px;
  height: 2px;
  background: rgba(232, 160, 32, .18);
  border-radius: 2px;
  overflow: hidden;
}
.frise__jauge {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-lite));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.frise::before { display: none; }


/* ─────────────────────────────────  CURSEUR
   Or, pour rester visible aussi bien sur crème que sur graphite. Le
   curseur système n'est masqué qu'une fois les éléments créés : si le
   script échoue, le visiteur garde un pointeur. */
.curseur-point, .curseur-anneau {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0; left: 0;
    z-index: 1000;
    border-radius: 50%;
  }
.curseur-point {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--gold);
}
.curseur-anneau {
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 1.5px solid rgba(232, 160, 32, .7);
  transition: width .3s var(--doux), height .3s var(--doux),
              margin .3s var(--doux), background .3s var(--ease),
              border-color .3s var(--ease), opacity .25s var(--ease);
}
.curseur-anneau.actif {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  background: rgba(232, 160, 32, .14);
  border-color: var(--gold);
}
.curseur-anneau.presse { width: 24px; height: 24px; margin: -12px 0 0 -12px; }

.curseur-perso,
.curseur-perso a, .curseur-perso button,
.curseur-perso summary, .curseur-perso label { cursor: none; }
.curseur-perso input, .curseur-perso textarea, .curseur-perso select { cursor: auto; }

/* Tactile et pointeur grossier : curseur système, rien d'autre. */
@media (hover: none), (pointer: coarse) {
  .curseur-point, .curseur-anneau { display: none; }
  .curseur-perso, .curseur-perso * { cursor: auto; }
}


/* ─────────────────────────────────  VERRE DÉPOLI
   Seulement là où il a quelque chose à flouter : la barre de navigation
   et les cartes posées sur l'image sombre. Sur le fond crème l'effet ne
   se voit pas et coûte du rendu pour rien. */
.hdr__pill {
  background: rgba(26, 26, 24, .55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .08);
}
.hdr.is-stuck .hdr__pill { background: rgba(26, 26, 24, .72); }

.path__card {
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .08);
}
.path__card:hover { background: rgba(255, 255, 255, .08); }

/* Pastilles et badges : verre or. */
.frise__num, .badge, .path__pill {
  background: rgba(232, 160, 32, .15);
  border: 1px solid rgba(232, 160, 32, .35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--gold-lite);
  box-shadow: none;
}
.frise__num { color: var(--gold-lite); }
.badge { color: var(--gold-2); background: rgba(232, 160, 32, .9); border-color: transparent; }


/* ─────────────────────────────────  TRANSITIONS DE PAGE
   Le site est multi-pages. Sans fondu, chaque clic produit un flash
   blanc au moment du remplacement du document. */
main, .hdr, .ft {
  transition: opacity 420ms var(--doux), transform 420ms var(--doux);
}
.page-entre main { opacity: 0; transform: translate3d(0, 14px, 0); }
.page-entre .hdr { opacity: 0; }
.page-sort main  { opacity: 0; transform: translate3d(0, -14px, 0); }
.page-sort .hdr, .page-sort .ft { opacity: 0; }


/* ─────────────────────────────────  FILET DE SÉCURITÉ
   Si un observateur ne se déclenche pas — onglet en arrière-plan au
   chargement, par exemple — rien ne doit rester invisible. */
.pret [data-reveal]:not(.vu),
.pret [data-img]:not(.vu),
.pret [data-peek]:not(.vu) { opacity: 1; transform: none; clip-path: none; }
.pret [data-img]:not(.vu) > img { transform: none; }
.pret [data-split]:not(.vu) .ligne__in { transform: none; }


/* ─────────────────────────────────  MOUVEMENT RÉDUIT
   Le visiteur a demandé moins d'animation : on la coupe entièrement,
   sans rien laisser d'invisible derrière. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal], .js [data-img], .js [data-peek] { opacity: 1; transform: none; }
  .js [data-img] > img { transform: none; }
  .ligne__in { transform: none; }
  .curseur-point, .curseur-anneau { display: none; }
  .curseur-perso, .curseur-perso * { cursor: auto; }
  .page-entre main, .page-sort main { opacity: 1; transform: none; }
  .frise__jauge { transform: scaleX(1); }
  .underline .hand path { stroke-dashoffset: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FONDS FIXES ET RALENTISSEMENT GÉNÉRAL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────  IMAGE FIXÉE AU FOND
   L'image ne bouge pas du tout : c'est la section qui coulisse par-dessus,
   comme une fenêtre qui se déplace sur un décor immobile. C'est ce qui
   donne la profondeur — une parallaxe lente donne encore l'impression que
   l'image appartient à la section, pas qu'elle est derrière elle.

   Le clip-path du conteneur découpe l'image fixe : c'est la seule façon
   d'obtenir ce résultat sans JavaScript et sans saccade. Attention, un
   transform ou un filter sur le conteneur créerait un bloc englobant et
   casserait le position: fixed de l'enfant. */
.fond-fixe {
  position: relative;
  clip-path: inset(0);
  isolation: isolate;
}
.fond-fixe > .fond-fixe__img {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100vw;
  height: 100svh;
  object-fit: cover;
  /* Annule toute translation héritée de la boucle de parallaxe. */
  transform: none !important;
}

/* iOS gère mal position: fixed sous clip-path pendant le défilement
   élastique. Sur pointeur grossier, on revient à une image ordinaire. */
@media (hover: none), (pointer: coarse) {
  .fond-fixe { clip-path: none; }
  .fond-fixe > .fond-fixe__img {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}


/* ─────────────────────────────────  RALENTISSEMENT
   Toutes les durées d'un cran plus longues. Le mouvement se remarque
   moins quand il est plus lent : c'est contre-intuitif, mais une entrée
   rapide attire l'œil sur l'animation, une entrée lente sur le contenu. */
:root {
  --t-court: 520ms;
  --t-entree: 1150ms;
  --t-image: 1600ms;
}

.ligne__in { transition: transform 1250ms var(--doux); }

main, .hdr, .ft { transition: opacity 520ms var(--doux), transform 520ms var(--doux); }

/* Le survol se rapproche aussi : un soulèvement instantané fait sursauter. */
.card:hover, .shot:hover, .tile:hover, .job:hover, .partner:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 22px 46px -24px rgba(26, 26, 24, .32);
}

/* Le curseur suit la même logique : l'anneau met franchement du temps. */
.curseur-anneau {
  transition: width .45s var(--doux), height .45s var(--doux),
              margin .45s var(--doux), background .45s var(--ease),
              border-color .45s var(--ease), opacity .3s var(--ease);
}


/* ─────────────────────────────────  MASCOTTE DU PIED DE PAGE
   Dans le flux, sous le texte d'accroche : en position absolue elle
   recouvrait systématiquement une colonne de liens ou la ligne légale. */
.ft__phragy {
  position: static;
  display: block;
  width: clamp(120px, 13vw, 175px);
  height: auto;
  margin-top: 2rem;
  transform: none;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .45));
}
.ft__phragy.vu { transform: none; }

@media (max-width: 860px) { .ft__phragy { display: none; } }

/* La photo du fondateur est une photo de profil, carrée à l'origine :
   la recadrer en 3:4 coupait le sujet sans raison. */
.founder { grid-template-columns: 200px 1fr; }
.founder__photo {
  width: 200px; height: 200px;
  border-radius: var(--r-lg);
  object-fit: cover;
  object-position: center;
}
@media (max-width: 720px) {
  .founder { grid-template-columns: 1fr; }
  .founder__photo { width: 150px; height: 150px; }
}

/* Le titre du parcours respirait mal : à 22 caractères il tombait sur cinq
   lignes alors que la moitié droite de la section était vide. */
.path__title { max-width: 40ch; font-size: clamp(1.9rem, 3.4vw, 3.2rem); }
.path__head { max-width: 46ch; }

/* Les étapes retrouvent leur carte, sous la pastille numérotée. */
.frise__etape { display: flex; flex-direction: column; }
.frise__etape .path__card { flex: 1; padding: 1.1rem 1.25rem; border-radius: var(--r); }
.frise__titre { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-bottom: .45rem; }

/* Le fond fixe a besoin d'un voile : la photo seule ne garantit pas la
   lisibilité du texte quel que soit l'endroit où la fenêtre la découpe. */
.path::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 18, 16, .9), rgba(18, 18, 16, .78) 45%, rgba(18, 18, 16, .92));
}

/* ─────────────────────────────────  MASQUE DE LIGNE
   La fenêtre se cale exactement sur la hauteur de ligne. La compensation
   des jambages reste minimale : au-delà, chaque ligne gagne un blanc qui
   se cumule et le titre se disloque. */
.ligne { padding-bottom: .1em; margin-bottom: -.1em; }
.hero__title .ligne, .sec-title .ligne, .page-title .ligne, .ft__title .ligne {
  line-height: inherit;
}

/* ─────────────────────────────────  LOGOTYPE DE NAVBAR
   La photo de profil ronde est un photomontage détaillé : sous 40 px elle
   devient illisible. On lui donne la place de se lire. */
.wordmark { gap: .6rem; }
.wordmark__rond {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(232, 160, 32, .3);
  flex: none;
}
.wordmark__img { height: 22px; }
@media (max-width: 1240px) { .wordmark__rond { width: 36px; height: 36px; } }

/* ─────────────────────────────────  CURSEUR
   Les règles de base posent cursor: pointer sur les boutons et les
   résumés. À spécificité égale, l'ordre de cascade décidait, ce qui
   laissait passer la flèche système à certains endroits. Ici l'intention
   est absolue : soit le curseur personnalisé, soit rien. */
.curseur-perso,
.curseur-perso *:not(input):not(textarea):not(select):not([contenteditable]) {
  cursor: none !important;
}
.curseur-perso input,
.curseur-perso textarea,
.curseur-perso select { cursor: auto !important; }

@media (hover: none), (pointer: coarse) {
  .curseur-perso, .curseur-perso * { cursor: auto !important; }
  .curseur-point, .curseur-anneau { display: none !important; }
}

/* ─────────────────────────────────  RÉVÉLATION DES TITRES, v2
   La fenêtre est portée par le mot lui-même. Les mots d'une même ligne
   partagent le même retard : ils montent ensemble, donc l'œil lit une
   ligne qui se révèle, pas des mots qui défilent.

   L'avantage sur des conteneurs de ligne : la structure du document
   n'est pas touchée. Un mot enfermé dans un span — le soulignage tracé
   à la main — reste à sa place. */
.mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* De quoi ne rogner ni les jambages, ni les debords lateraux.
     Une lettre ronde ou terminale deborde legerement de sa chasse : sans
     marge horizontale, la fenetre en overflow: hidden lui coupait le
     bord droit. La marge negative compense exactement le rembourrage,
     donc la mise en page ne bouge pas d'un pixel. */
  padding: 0 .07em .12em;
  margin: 0 -.07em -.12em;
  /* Bug Webkit : animer l'opacité sur un élément avec background-clip: text 
     le fait apparaître d'un coup sec. On anime donc l'opacité du parent. */
  opacity: 0;
  transition: opacity 650ms var(--doux) var(--retard, 0ms);
  will-change: opacity;
}
.mot > i {
  display: inline-block;
  font-style: normal;
  transform: translate3d(0, 115%, 0);
  transition: transform 1050ms var(--doux) var(--retard, 0ms);
  will-change: transform;
}
[data-split].vu .mot > i { transform: none; will-change: auto; }
.pret [data-split]:not(.vu) .mot > i { transform: none; will-change: auto; }

/* will-change reserve une couche GPU par element. La regle ci-dessus
   liberait le <i> mais pas le .mot qui l'entoure : chaque mot de chaque
   titre decoupe gardait donc sa couche indefiniment. Sur l'accueil, qui
   porte le plus de titres animes, cela faisait plus de cent cinquante
   couches vivantes en permanence — d'ou le defilement et le curseur qui
   trainaient sur cette page, et nulle part ailleurs.

   L'animation terminee, on rend la couche. */
[data-split].vu .mot,
.pret [data-split]:not(.vu) .mot { opacity: 1; will-change: auto; }

/* Les conteneurs de ligne n'existent plus. */
.ligne, .ligne__in { display: inline; overflow: visible; padding: 0; margin: 0; transform: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   PARCOURS EN QUATRE TEMPS
   Une piste haute de quatre écrans, un panneau collant à l'intérieur. En
   descendant, chaque étape prend le dessus à son tour et repousse la
   précédente en profondeur.

   Le défilement n'est jamais confisqué : la piste est simplement longue.
   La sensation est la même, mais un visiteur au clavier, un lecteur
   d'écran ou quelqu'un qui veut juste passer ne se retrouvent pas
   prisonniers d'une section.
   ═══════════════════════════════════════════════════════════════════════════ */

.etapes {
  position: relative;
  isolation: isolate;
  color: #FFF;
}
.etapes::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 18, 16, .93), rgba(18, 18, 16, .8) 45%, rgba(18, 18, 16, .95));
}

/* Quatre écrans de course : un par étape. */
.etapes__piste { height: 400vh; }

.etapes__ecran {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.etapes__in { width: 100%; }

.etapes__head { max-width: 30ch; margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.etapes__titre { font-size: clamp(1.8rem, 3.4vw, 3.1rem); line-height: 1.05; }


/* ─────────────────────────────────  LA PILE
   Les cartes occupent le même emplacement. C'est la perspective qui les
   sépare : l'active est au premier plan, les autres reculent. */
.etapes__pile {
  position: relative;
  height: clamp(300px, 42vh, 420px);
  perspective: 1400px;
  perspective-origin: 50% 40%;
}



/* ─────────────────────────────────  REPÈRES ET COMMANDES */
.etapes__points {
  display: flex; gap: .5rem;
  margin-top: clamp(1.2rem, 3vh, 2rem);
}
.etapes__points li {
  width: 34px; height: 3px;
  border-radius: 2px;
  background: rgba(244, 241, 234, .16);
  transition: background 500ms var(--doux), width 500ms var(--doux);
}
.etapes__points li[data-actif] { background: var(--gold); width: 54px; }

.etapes__nav {
  display: flex; align-items: center; gap: 1rem;
  margin-top: clamp(1rem, 2.5vh, 1.6rem);
  animation: navParait 600ms var(--doux);
}
@keyframes navParait { from { opacity: 0; transform: translateY(10px); } }

.etapes__bouton {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #FFF;
  font-size: var(--fs-sm); font-weight: 600;
  transition: background 300ms var(--doux), border-color 300ms var(--doux), opacity 300ms var(--ease);
}
.etapes__bouton:hover:not(:disabled) { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.etapes__bouton:disabled { opacity: .35; }
[data-etape-prec] .ico { transform: rotate(180deg); }

.etapes__compteur {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em;
  color: rgba(244, 241, 234, .5);
  font-variant-numeric: tabular-nums;
}


/* ─────────────────────────────────  PETITS ÉCRANS
   Une piste de quatre écrans sur téléphone, c'est très long à traverser
   au pouce. Les étapes redeviennent une simple liste. */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .etapes__piste { height: auto; }
  .etapes__ecran { position: static; height: auto; padding-block: clamp(3rem, 8vw, 5rem); }
  .etapes__pile { height: auto; perspective: none; display: grid; gap: 1rem; }
  .etape {
    position: static; inset: auto; max-width: none;
    opacity: 1; transform: none; filter: none;
  }
  .etapes__nav, .etapes__points { display: none; }
}

/* ─────────────────────────────────  FORMULAIRE DU PIED DE PAGE
   Il flottait au milieu d'une colonne deux fois trop haute. Les deux
   colonnes s'étirent maintenant à la même hauteur et le champ de message
   absorbe l'espace restant : c'est lui qui doit grandir, pas le vide. */
.ft__top { align-items: stretch; }
.ft__pitch { display: flex; flex-direction: column; }
.ft__pitch .ft__sub { margin-bottom: auto; }

.ft__form { display: flex; flex-direction: column; gap: 1rem; min-height: 100%; }
.ft__fields { display: flex; flex-direction: column; gap: .9rem; flex: 1; }

/* Le champ de message occupe toute la hauteur libre. */
.ft__fields .field:last-child { flex: 1; display: flex; flex-direction: column; }
.ft__fields .field:last-child textarea {
  flex: 1;
  min-height: 150px;
  resize: vertical;
}

.ft__title { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.ft__sub { font-size: var(--fs-body); max-width: 40ch; }
.field--dark input, .field--dark textarea { padding: .9rem 1.05rem; border-radius: var(--r-sm); }

@media (max-width: 860px) {
  .ft__form { min-height: 0; }
  .ft__fields .field:last-child textarea { min-height: 120px; }
}

/* Le panneau collant démarre sous la pastille de navigation : sinon
   l'intertitre passe dessous et disparaît à moitié. */
.etapes__ecran { padding-top: 6rem; align-items: flex-start; }
.etapes__in { padding-top: clamp(1rem, 4vh, 3rem); }


@media (max-width: 860px) {
  .etapes__ecran { padding-top: 0; align-items: center; }
  .etapes__pile { height: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIFS : lisibilité des pastilles, espacements, carte d'étape
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────  PASTILLES
   Elles étaient en or sur or : 1,3:1 de contraste, donc illisibles.
   Le texte repasse en encre, ce qui donne 8,4:1. */
.badge {
  background: var(--gold);
  border: 0;
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: 800;
  letter-spacing: .1em;
  box-shadow: 0 4px 14px -6px rgba(26, 26, 24, .5);
}
.icon-btn__count { background: var(--gold); color: var(--ink); }
.notice__ico { color: var(--gold-2); }


/* ─────────────────────────────────  ESPACEMENTS ENTRE BLOCS
   Plusieurs blocs empilés dans une même section se retrouvaient collés :
   chacun portait ses propres marges, et aucune ne couvrait le cas « deux
   cartes l'une sous l'autre ». La règle vaut pour tous les enchaînements,
   sauf juste après un en-tête de section qui a déjà sa marge basse. */
.section > .wrap > * + * { margin-top: clamp(1.7rem, 3.2vw, 2.9rem); }
.section > .wrap > .sec-head + * { margin-top: 0; }
.section > .wrap > .crumbs + * { margin-top: 0; }

/* Ces blocs portaient une marge propre qui doublait désormais la règle. */
.notice { margin-top: 0; }
.steps + .notice, .notice + .notice { margin-top: clamp(1.7rem, 3.2vw, 2.9rem); }

/* Les rangées visuel + texte gardent leur propre rythme. */
.duo + .duo { margin-top: 0; }




/* ─────────────────────────────────  SOULIGNAGE DU HERO
   Il se dessine à l'apparition du titre, plus au défilement : au repos,
   avant tout mouvement, il restait invisible. */




/* ═══════════════════════════════════════════════════════════════════════════
   ENCARTS DE BAS DE PAGE
   Le bandeau crème était un rectangle presque vide : trois petits objets
   perdus dans 1300 px. Trois changements le remplissent.

   D'abord la couleur : chaque encart prend une des trois teintes de la
   charte selon ce qu'il raconte — l'or pour ce qui se vend, le vert forêt
   pour la communauté, le graphite pour le studio. Ensuite la largeur : le
   bloc se recentre et se limite, au lieu de s'étirer sur toute la page.
   Enfin la matière : halo, grain et cercles concentriques occupent le fond
   plutôt que de le laisser nu.
   ═══════════════════════════════════════════════════════════════════════════ */

.notice--phragy {
  position: relative;
  isolation: isolate;
  max-width: 1080px;
  margin-inline: auto;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.6rem);

  padding: clamp(1.5rem, 2.8vw, 2.2rem) clamp(1.6rem, 3.2vw, 2.8rem);
  border: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  color: var(--paper);
}

/* Le calque décoratif est séparé du fond : il porte le halo, les cercles
   et le grain sans empêcher les dégradés de la carte de se voir. */
.notice__deco {
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}
.notice__deco::before {
  /* Lumière rasante venue du haut gauche, comme sur le reste du site. */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 120% at 6% -25%, rgba(255, 255, 255, .3), transparent 58%),
    radial-gradient(60% 100% at 100% 130%, rgba(0, 0, 0, .26), transparent 62%);
}
.notice__deco::after {
  /* Cercles concentriques côté bouton : c'est la géométrie du logo rond,
     reprise en filigrane pour meubler la moitié droite. */
  content: '';
  position: absolute;
  right: -6%; top: 50%;
  width: 460px; height: 460px;
  transform: translateY(-50%);
  background: repeating-radial-gradient(circle,
      currentColor 0 1.5px, transparent 1.5px 26px);
  opacity: .13;
  border-radius: 50%;
  mask-image: radial-gradient(circle, #000 42%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 72%);
}

/* ── Les trois teintes */
.notice--or {
  background: linear-gradient(128deg, var(--gold-lite) 0%, var(--gold) 46%, var(--gold-2) 100%);
  color: var(--ink);
}
.notice--vert {
  background: linear-gradient(128deg, var(--green-lite) 0%, var(--green) 48%, var(--green-2) 100%);
}
.notice--encre {
  background: linear-gradient(128deg, var(--ink-2) 0%, var(--ink) 48%, var(--ink-deep) 100%);
}

/* ── Contenu */
.notice__corps { min-width: 0; }

.notice__label {
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.notice--or    .notice__label { color: rgba(26, 26, 24, .55); }
.notice--vert  .notice__label,
.notice--encre .notice__label { color: var(--gold); }

.notice--phragy h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: .45rem;
  color: inherit;
}
.notice--phragy p {
  font-size: var(--fs-sm);
  max-width: 54ch;
  color: rgba(244, 241, 234, .72);
}
.notice--or p { color: rgba(26, 26, 24, .72); }

/* Le bouton doit tenir sur la couleur de la carte, quelle que soit la
   classe qu'il porte par ailleurs. On la neutralise ici. */
.notice--phragy .btn {
  flex: none;
  border: 0;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .7);
}
.notice--or .btn        { background: var(--ink); color: var(--paper); }
.notice--or .btn:hover  { background: var(--ink-deep); }
.notice--vert .btn,
.notice--encre .btn     { background: var(--gold); color: var(--ink); }
.notice--vert .btn:hover,
.notice--encre .btn:hover { background: var(--gold-lite); }

/* ── La mascotte
   Elle grandit franchement et se pose sur le bord bas de la carte. Elle
   occupe sa propre colonne de grille : quelle que soit la largeur, elle
   ne peut pas passer devant le titre, le texte ou le bouton. */
.notice__phragy {
  align-self: end;
  width: clamp(104px, 12vw, 158px);
  height: auto;
  margin-bottom: calc(-1 * clamp(1.5rem, 2.8vw, 2.2rem));
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .3));
  transition: transform var(--t-court) var(--doux);
}
.notice--phragy:hover .notice__phragy { transform: translateY(-7px) rotate(-2deg); }

@media (max-width: 860px) {
  .notice--phragy { grid-template-columns: auto minmax(0, 1fr); }
  .notice--phragy .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .notice--phragy { grid-template-columns: 1fr; justify-items: start; text-align: left; }
  .notice__phragy { width: 92px; margin-bottom: 0; align-self: start; }
  .notice__deco::after { right: -30%; opacity: .09; }
}
@media (prefers-reduced-motion: reduce) {
  .notice__phragy, .notice--phragy:hover .notice__phragy { transition: none; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LE MOT SOULIGNÉ DU HERO
   Le trait se dessinait de gauche à droite pendant que le mot restait
   blanc. Le mot se remplit maintenant d'or au même rythme, avec la même
   durée, le même retard et la même courbe : les deux gestes n'en font
   plus qu'un.
   ═══════════════════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS SUR PHOTOGRAPHIE
   Une page entièrement crème s'aplatit. Ces sections posent une image
   plein cadre derrière le contenu, avec le même voile sombre que le
   parcours en quatre temps pour que le texte reste lisible.
   ═══════════════════════════════════════════════════════════════════════════ */

.section--photo {
  position: relative;
  isolation: isolate;
  color: var(--paper);
  border-top: 0;
}
.section--photo::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
      rgba(18, 18, 16, .93), rgba(18, 18, 16, .78) 45%, rgba(18, 18, 16, .95));
}

.section--photo .sec-title,
.section--photo h2,
.section--photo h3 { color: #FFF; }
.section--photo p,
.section--photo li { color: rgba(244, 241, 234, .74); }
.section--photo .dim { color: rgba(244, 241, 234, .52); }
.section--photo .eyebrow { color: var(--gold); }
.section--photo .link-arrow { color: var(--paper); }
.section--photo .duo__items li { border-color: rgba(244, 241, 234, .14); }
.section--photo .duo__items .ico { color: var(--gold); }




/* ═══════════════════════════════════════════════════════════════════════════
   DIVERS
   ═══════════════════════════════════════════════════════════════════════════ */

/* La ligne d'avis flottait contre le bord gauche d'une bande vide : à
   cette largeur, seul le centrage la fait lire comme une signature. */
.proof { margin-inline: auto; }


/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIFS DE LA REVUE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mascotte des encarts
   Le débordement était masqué par la carte : les pattes se faisaient
   couper net. Elle se pose maintenant sur le rembourrage intérieur, donc
   entièrement visible, et la carte respire par en dessous. */
.notice__phragy { margin-bottom: 0; }
.notice--phragy { padding-bottom: clamp(1.1rem, 2vw, 1.6rem); }



/* ═══════════════════════════════════════════════════════════════════════════
   LE MOT SOULIGNÉ DU HERO
   Bloc unique : quatre couches successives se contredisaient. Deux d'entre
   elles forçaient le tracé en --gold-lite alors que le mot se remplissait
   en --gold — deux jaunes différents pour un seul geste. Et le tracé
   démarrait à 0 ms quand le remplissage attendait 550 ms.

   Une seule variable porte la couleur, un seul couple durée/retard porte le
   mouvement : le trait et le mot ne peuvent plus se désaccorder.
   ═══════════════════════════════════════════════════════════════════════════ */

.underline {
  /* Le mot se remplit du meme degrade que les deuxiemes lignes de titre,
     pas d'un aplat : deux traitements de l'or sur la meme page se voient.
     Le trait, lui, reste d'une seule couleur — un trace degrade se lirait
     comme une erreur d'impression. */
  --or-debut: #E8A020;
  --or-fin:   #F0B858;
  --or-trait: var(--gold);
  --dessin-duree: 1.25s;
  --dessin-retard: .35s;

  position: relative;
  display: inline-block;
  white-space: nowrap;
}

/* Le remplissage se pose sur la lettre elle-même, pas sur le mot.
   Porté par .underline, il était rogné par les fenêtres .mot, qui sont en
   overflow: hidden pour l'entrée par le bas : les lettres devenaient
   transparentes et le fond censé les remplir était découpé — le mot
   disparaissait purement et simplement.

   Une image deux fois plus large que la lettre, coupée en deux moitiés :
   on la fait glisser pour amener l'or par la gauche. */
.underline .mot > i {
  /* L'image fait deux fois la largeur du mot. Sa premiere moitie porte le
     degrade dore, la seconde la couleur du texte : on la fait glisser
     pour amener l'or par la gauche. */
  background-image: linear-gradient(90deg,
      var(--or-debut) 0%, var(--or-fin) 50%,
      currentColor 50%, currentColor 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  transition:
    transform 1050ms var(--doux) var(--retard, 0ms),
    background-position var(--dessin-duree) var(--doux) var(--dessin-retard);
}



.underline .hand {
  position: absolute;
  left: -.04em; right: -.04em; bottom: -.26em;
  width: calc(100% + .08em); height: .3em;
  overflow: visible;
  /* Le tracé est un enfant du mot : sans couleur propre il hériterait du
     remplissage transparent et disparaîtrait. */
  color: var(--or-trait);
}
/* Le trait part APRÈS le mot, comme une main qui écrit puis souligne.
   Le retard est porté par la propriété raccourcie elle-même : déclaré à
   part, il était écrasé par le « transition » qui suivait. */
.underline .hand path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset var(--dessin-duree) var(--doux)
              calc(var(--dessin-retard) + 460ms);
}

/* Le geste part quand la ligne du titre est arrivée, pas au défilement :
   au repos, avant tout mouvement, il resterait invisible. */
[data-split].vu .underline .mot > i,
.pret .underline .mot > i { background-position: 0 0; }
[data-split].vu .underline .hand path,
.pret .underline .hand path { stroke-dashoffset: 0; }

/* Sur la photographie du hero, l'or pur manque de présence : la variable
   s'éclaircit, et le mot comme le trait suivent ensemble. */
/* Sur fond sombre, l'or pur manque de presence : le degrade s'eclaircit,
   exactement comme celui des deuxiemes lignes de titre. */
.hero--full .underline,
.chemin .underline {
  --or-debut: #F0B858;
  --or-fin:   #F7D08A;
  --or-trait: var(--gold-lite);
}
.hero--full .underline { --dessin-retard: .5s; }
.hero--full .underline .hand { filter: drop-shadow(0 2px 9px rgba(0, 0, 0, .55)); }

/* Sans JavaScript il n'y a pas de fenêtres de mot : le titre s'affiche
   normalement, en blanc, et le tracé reste. Rien ne peut disparaître. */
@media (prefers-reduced-motion: reduce) {
  .underline .mot > i { transition: none; background-position: 0 0; }
  .underline .hand path { transition: none; stroke-dashoffset: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARCOURS EN QUATRE TEMPS — REGISTRE ÉDITORIAL

   La version précédente enfermait chaque étape dans un carton de verre
   dépoli : fond flouté, liseré clair, coins arrondis, pastilles dorées.
   C'est le réflexe par défaut, et il se reconnaît immédiatement comme tel.

   Ici il n'y a plus de carte du tout. L'œuvre est un objet posé, avec une
   vraie ombre portée. Le texte occupe une colonne qui respire. Le numéro
   part en très grand et sort du cadre par la droite. Rien ne flotte dans
   un cadre : c'est la mise en page qui tient, pas le contenant.
   ═══════════════════════════════════════════════════════════════════════════ */

.etapes__pile {
  height: clamp(340px, 48vh, 460px);
  max-width: 1180px;
  margin-inline: auto;
  perspective: none;   /* plus de pile en profondeur : une seule étape à la fois */
}

.etapes__head { max-width: 32ch; margin-inline: auto; text-align: center; }
.etapes__head .eyebrow { justify-content: center; }

.etape {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(1.8rem, 4.5vw, 4.5rem);
  align-items: center;

  /* Aucun fond, aucun liseré, aucun flou. */
  background: none;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 0;

  transition: opacity 800ms var(--doux), transform 800ms var(--doux);
  will-change: opacity, transform;
}

/* Une seule étape est lisible à la fois. Sans carton pour les contenir,
   des étages semi-transparents empilés derrière donneraient un texte
   fantôme illisible : les autres sortent franchement. */
.etape                    { opacity: 0; transform: translate3d(0, 26px, 0); pointer-events: none; }
.etape[data-etat="actif"] { opacity: 1; transform: none; pointer-events: auto; }
.etape[data-etat="passe"],
.etape[data-etat="loin"]  { opacity: 0; transform: translate3d(0, -26px, 0); }


/* ─────────────────────────────────  L'ŒUVRE
   Un objet posé sur le fond, pas une vignette découpée dans un panneau.
   L'ombre est large et basse : c'est elle qui le décolle. */
.etape__visuel {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .4),
    0 44px 80px -34px rgba(0, 0, 0, .95);
}
.etape__visuel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 2s var(--doux);
}
.etape[data-etat="actif"] .etape__visuel img { transform: scale(1); }


/* ─────────────────────────────────  LA COLONNE DE TEXTE */
.etape__corps {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  min-width: 0;
}
.etape__corps::before { content: none; }   /* l'aplat sombre n'a plus lieu d'être */

.etape__label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(.9rem, 2vw, 1.4rem);
}
.etape__label span { color: rgba(244, 241, 234, .38); }

.etape__titre {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #FFF;
  margin-bottom: clamp(.8rem, 1.8vw, 1.2rem);
}

.etape__texte {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(244, 241, 234, .68);
  max-width: 40ch;
}

/* Les points clés redeviennent du texte, séparé par un point médian.
   En pastilles dorées ils ajoutaient deux boutons factices sous chaque
   paragraphe — de la décoration qui imite une commande. */
.etape__cles {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-top: clamp(1.2rem, 2.6vw, 1.9rem);
  padding-top: clamp(1rem, 2.2vw, 1.5rem);
  border-top: 1px solid rgba(244, 241, 234, .14);
  width: min(100%, 40ch);
}
.etape__cles li {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .5);
}
.etape__cles li + li::before {
  content: '·';
  margin-right: .9rem;
  color: var(--gold);
}


/* ─────────────────────────────────  LE FOLIO
   Très grand, très pâle, coupé net par le bord droit de la section. Un
   chiffre entier et centré redeviendrait un ornement ; c'est le fait
   qu'il sorte du cadre qui lui donne l'échelle. */
.etape__filigrane {
  position: absolute;
  right: clamp(-4rem, -6vw, -2rem);
  bottom: -.28em;
  z-index: -1;
  font-size: clamp(11rem, 21vw, 20rem);
  font-weight: 800;
  line-height: .74;
  letter-spacing: -.08em;
  color: rgba(244, 241, 234, .055);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}


/* ─────────────────────────────────  PETITS ÉCRANS
   L'œuvre passe au-dessus du texte. À cette largeur, deux colonnes
   donneraient une image timbre-poste et une colonne de trois mots. */
@media (max-width: 900px) {
  .etapes__pile { height: auto; }
  .etape {
    position: relative; inset: auto;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    opacity: 1; transform: none; pointer-events: auto;
  }
  .etape__visuel { aspect-ratio: 16 / 9; }
  .etape__filigrane { font-size: 8rem; right: -1rem; }
  .etapes__head { text-align: left; margin-inline: 0; }
  .etapes__head .eyebrow { justify-content: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LE CHEMIN — COMMENT ÇA MARCHE

   L'image occupe toute la section et ne bouge pas : c'est la page qui
   coulisse par-dessus. Elle est floutée et assombrie franchement, parce
   qu'elle n'est pas là pour être regardée mais pour donner une matière au
   texte. Une œuvre nette derrière du texte, et plus rien ne se lit.

   Le tracé serpente sur toute la hauteur et se remplit d'or à mesure de la
   descente. Les quatre étapes sont accrochées dessus, alternativement à
   gauche et à droite, du côté où la courbe passe à ce moment-là.

   Il n'y a ni carte ni carton : c'est le tracé qui tient la mise en page.
   ═══════════════════════════════════════════════════════════════════════════ */

.chemin {
  position: relative;
  isolation: isolate;
  color: var(--paper);
  padding-block: clamp(4rem, 9vw, 8rem) clamp(11rem, 20vw, 17rem);
  overflow: hidden;
}

/* L'image de fond : floutée, désaturée, assombrie. */
.chemin__fond {
  /* Assez flou pour ne plus rien raconter, assez clair pour qu'il reste
     une matière. À .62 de luminosité l'image virait au noir et la section
     redevenait un aplat. */
  filter: blur(30px) saturate(165%) brightness(1.05);

  /* Le flou estompe les bords de l'image vers le transparent : sans marge,
     le crème de la page transparaissait tout autour de l'écran. On
     agrandit par les dimensions et non par transform, parce que les fonds
     fixes portent un « transform: none !important » qui annulerait un
     scale — c'est exactement ce qui laissait passer ce halo. */
  inset: -9%;
  width: 118vw;
  height: 118svh;
}

/* Filet : même si l'image manque, aucun crème ne doit apparaître. */
.chemin { background: var(--ink-deep); }
.chemin::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(85% 55% at 50% 0%, rgba(232, 160, 32, .13), transparent 62%),
    linear-gradient(180deg, rgba(18, 18, 16, .74), rgba(18, 18, 16, .48) 45%, rgba(18, 18, 16, .8));
}

.chemin__head {
  max-width: 28ch;
  margin: 0 auto clamp(2.5rem, 6vw, 5rem);
  text-align: center;
}
.chemin__head .eyebrow { justify-content: center; color: var(--gold); }
.chemin__titre {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #FFF;
}


/* ─────────────────────────────────  LA PISTE ET LE TRACÉ */
.chemin__piste {
  position: relative;
  max-width: 1280px;
  height: clamp(1000px, 112vh, 1320px);
  margin-inline: auto;
}

.chemin__trace {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.chemin__voie {
  stroke: rgba(232, 160, 32, .17);
  stroke-width: 1.4;
}
/* Le point d'arrivee. Il n'apparait qu'une fois l'encre parvenue jusqu'a
   lui : c'est ce qui fait qu'on voit le chemin aboutir. */
.chemin__bout {
  fill: var(--gold);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.3);
  transition: opacity 500ms var(--doux), transform 600ms var(--doux);
  filter: drop-shadow(0 0 10px rgba(232, 160, 32, .8));
}
.chemin.arrivee .chemin__bout { opacity: 1; transform: scale(1); }

.chemin__encre {
  stroke: var(--gold);
  stroke-width: 2.6;
  stroke-linecap: round;
  /* Surtout PAS de vector-effect: non-scaling-stroke ici. Avec lui, le
     motif de tirets est calcule dans le repere de l'ecran, alors que
     getTotalLength() et stroke-dasharray sont en unites du trace : sous
     une mise a l'echelle non uniforme les deux ne coincident pas, et il
     restait toujours un fragment de trace non couvert juste avant le
     point d'arrivee. */
  filter: drop-shadow(0 0 7px rgba(232, 160, 32, .55));
  /* Le script pose la longueur réelle et l'avancement. Sans JavaScript le
     tracé reste entièrement dessiné : rien ne disparaît. */
  stroke-dasharray: var(--longueur, 0);
  stroke-dashoffset: var(--reste, 0);
}


/* ─────────────────────────────────  LES JALONS */
.chemin__etapes {
  position: absolute; inset: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Chaque jalon est accroche au lobe correspondant du trace, et son texte
   se pose du cote exterieur : la courbe ne peut plus le traverser.

   Les pourcentages ne sont pas decoratifs. Le viewBox fait 600 x 1640 et
   l'image est etiree sans conserver ses proportions : un point (x, y) du
   trace tombe donc exactement a x/600 et y/1640 de la piste. Les quatre
   sommets sont a x = 396 et x = 204, soit 66 % et 34 %. */
.jalon {
  position: absolute;
  width: 31%;
  transition: opacity 900ms var(--doux), transform 900ms var(--doux);
}
.jalon--droite { left: 69%;  text-align: left;  }
.jalon--gauche { right: 69%; text-align: right; }

/* Le sommet du lobe, remonte de la demi-hauteur de la pastille pour que
   celle-ci se pose dessus plutot que de pendre en dessous. */
.jalon:nth-child(1) { top: calc(20.91% - 1.1rem); }
.jalon:nth-child(2) { top: calc(43.64% - 1.1rem); }
.jalon:nth-child(3) { top: calc(66.36% - 1.1rem); }
.jalon:nth-child(4) { top: calc(89.09% - 1.1rem); }

/* Entrée : le jalon arrive de son côté, en biais, comme une plaque qui
   pivote et vient se plaquer contre l'écran. C'est le côté d'où il vient
   qui dit sur quelle branche du tracé il est accroché — le mouvement
   raconte la mise en page au lieu de la décorer.

   La perspective est posée sur le jalon lui-même : sur la piste, elle
   ferait pivoter les quatre autour d'un même point de fuite et ceux du
   bas partiraient de travers. */
.js .jalon {
  opacity: 0;
  transform-origin: 50% 50%;
  transition:
    opacity 1000ms var(--doux),
    transform 1150ms var(--doux);
}
.js .jalon--droite { transform: perspective(1000px) rotateY(-15deg) rotateX(5deg) translate3d(60px, 26px, -90px); }
.js .jalon--gauche { transform: perspective(1000px) rotateY( 15deg) rotateX(5deg) translate3d(-60px, 26px, -90px); }
.js .jalon.vu { opacity: 1; transform: perspective(1000px) rotateY(0) rotateX(0) translate3d(0, 0, 0); }

/* La pastille arrive juste après son texte : elle se pose. */
.js .jalon .jalon__pastille {
  opacity: 0;
  transform: scale(.88);
  transition: opacity 600ms var(--doux) 260ms, transform 700ms var(--doux) 260ms;
}
.js .jalon.vu .jalon__pastille { opacity: 1; transform: none; }

.jalon__pastille {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.1rem;
  margin-bottom: .9rem;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .9);
}
/* Sur les jalons de gauche, l'astérisque passe après le mot : il reste
   toujours du côté du tracé. */
.jalon--gauche .jalon__pastille { flex-direction: row-reverse; }
.jalon__astre { color: rgba(26, 26, 24, .55); font-size: .8em; }

.jalon__texte {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: rgba(244, 241, 234, .72);
}
.jalon__appui {
  margin-top: .7rem;
  font-size: var(--fs-body);
  font-weight: 700;
  color: #FFF;
}


/* ─────────────────────────────────  PETITS ÉCRANS
   Le serpentin n'a plus la place de serpenter : le tracé descend tout
   droit sur le bord gauche et les jalons s'alignent dessus. */
@media (max-width: 860px) {
  .chemin__trace { display: none; }
  .chemin__etapes { gap: 2.6rem; padding-left: 1.3rem; }
  .chemin__etapes::before {
    content: '';
    position: absolute; left: 0; top: .5rem; bottom: .5rem;
    width: 2px;
    background: linear-gradient(180deg, var(--gold), rgba(232, 160, 32, .15));
  }
  .chemin__piste { height: auto; }
  .chemin__etapes { position: relative; inset: auto; display: grid; gap: 2.6rem; }
  .jalon,
  .jalon--droite,
  .jalon--gauche,
  .jalon:nth-child(1),
  .jalon:nth-child(2),
  .jalon:nth-child(3),
  .jalon:nth-child(4) {
    position: relative; top: auto; left: auto; right: auto;
    width: 100%; margin: 0; text-align: left;
  }
  .jalon--gauche .jalon__pastille { flex-direction: row; }
  .chemin__head { text-align: left; margin-inline: 0; }
  .chemin__head .eyebrow { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .js .jalon,
  .js .jalon--droite,
  .js .jalon--gauche { opacity: 1; transform: none; transition: none; }
  .js .jalon .jalon__pastille { opacity: 1; transform: none; transition: none; }
  .chemin__encre { stroke-dashoffset: 0; }
}

/* ── Navigation : le tiret du pied de page, repris en en-tête
   Le lien garde sa pastille claire au survol ; le tiret doré s'ajoute
   devant le mot et le pousse. Le même geste sur les deux navigations
   donne au site une manière de répondre qui lui est propre. */
.hdr__nav a {
  padding-left: .85rem;
  transition:
    color .22s var(--ease),
    background .22s var(--ease),
    padding-left .28s var(--ease);
}
.hdr__nav a::before {
  content: '';
  position: absolute; left: .6rem; top: 50%;
  width: 0; height: 1.5px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: width .28s var(--ease-out);
}
.hdr__nav a:hover { padding-left: 1.55rem; }
.hdr__nav a:hover::before { width: 9px; }

/* Sur la page courante la pastille est déjà dorée : un tiret doré dessus
   ne se verrait pas. Il passe à l'encre. */
.hdr__nav a[aria-current]::before { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .hdr__nav a, .hdr__nav a:hover { padding-left: .85rem; }
  .hdr__nav a::before { display: none; }
}

/* ── Titre du chemin
   Il tombait en quatre lignes courtes, tout en blanc, sans aucun relief :
   une promesse — quatre minutes — annoncee comme une legende de tableau.
   La promesse passe en or et se fait souligner, avec le meme geste que le
   hero. Le reste de la phrase la porte, en blanc, sur une seule ligne. */
.chemin__head {
  max-width: min(48rem, 100%);
  margin: 0 auto clamp(3rem, 7vw, 6rem);
}
.chemin__titre {
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -.035em;
}
.chemin .underline .hand { filter: drop-shadow(0 2px 9px rgba(0, 0, 0, .5)); }

@media (max-width: 620px) {
  .chemin__titre { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .chemin .underline { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIFS : SECTIONS SUR PHOTOGRAPHIE, ET ENTRÉES EN CASCADE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Une section sur photographie a besoin de marges internes franches
   Sur /communaute elle portait aussi « section--top-0 », dont le seul rôle
   est de coller une section au bloc précédent quand les deux sont crème.
   Sur fond sombre le résultat était une bande noire dont l'image touchait
   le bord haut. La règle est plus spécifique, donc elle l'emporte, et le
   contenu se centre verticalement dans la bande. */
.section--photo,
.section--photo.section--top-0 {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  display: flex;
  align-items: center;
}
.section--photo > .wrap { width: 100%; }


/* ── Entrées en cascade dans les listes
   Une liste révélée d'un bloc fait apparaître six lignes en même temps :
   l'œil ne suit pas, il constate. Chaque ligne part avec un léger retard
   sur la précédente, ce qui donne une lecture au lieu d'un affichage.

   Le retard est posé en CSS et non par le script : ces listes ont un
   nombre d'éléments connu et court, et une variable par rang évite de
   parcourir le document au chargement. */
.js [data-reveal] .duo__items li,
.js [data-reveal] .panel__list li,
.js .duo__items li,
.js .panel__list li {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 700ms var(--doux) var(--rang, 0ms),
    transform 800ms var(--doux) var(--rang, 0ms);
}
.js .vu .duo__items li,
.js .duo__items.vu li,
.js .vu .panel__list li,
.js .panel__list.vu li,
.pret .duo__items li,
.pret .panel__list li { opacity: 1; transform: none; }

.duo__items li:nth-child(1), .panel__list li:nth-child(1) { --rang: 0ms; }
.duo__items li:nth-child(2), .panel__list li:nth-child(2) { --rang: 90ms; }
.duo__items li:nth-child(3), .panel__list li:nth-child(3) { --rang: 180ms; }
.duo__items li:nth-child(4), .panel__list li:nth-child(4) { --rang: 270ms; }
.duo__items li:nth-child(5), .panel__list li:nth-child(5) { --rang: 360ms; }
.duo__items li:nth-child(6), .panel__list li:nth-child(6) { --rang: 450ms; }
.duo__items li:nth-child(n+7), .panel__list li:nth-child(n+7) { --rang: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .js .duo__items li, .js .panel__list li { opacity: 1; transform: none; transition: none; }
}

/* ── Les fonds des sections sur photographie
   Même traitement que le chemin : l'image est là pour donner une matière,
   pas pour être lue. Floutée, elle occupe tout le cadre sans disputer
   l'attention au texte posé dessus.

   L'agrandissement passe par les dimensions et non par transform : les
   fonds fixes portent un « transform: none !important » qui annulerait un
   scale, et le flou laisserait alors passer le crème de la page tout
   autour de l'écran. */
.section--photo .fond-fixe__img {
  filter: blur(24px) saturate(155%) brightness(1.02);
  inset: -9%;
  width: 118vw;
  height: 118svh;
}
.section--photo { background: var(--ink-deep); }

/* ═══════════════════════════════════════════════════════════════════════════
   ILS NOUS FONT CONFIANCE
   Un bandeau de logotypes qui defile en continu. Il ne se survole pas et
   ne se clique pas : c'est une preuve, pas une navigation.

   La boucle repose sur deux exemplaires de la meme file. On translate de
   la moitie exacte de la piste : au moment ou l'animation reprend a zero,
   le second exemplaire occupe la place que le premier vient de quitter,
   et la reprise ne se voit pas.
   ═══════════════════════════════════════════════════════════════════════════ */

.confiance { padding-block: clamp(2.6rem, 5.5vw, 4.5rem); text-align: center; }

.confiance__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(232, 160, 32, .4);
  background: var(--gold-soft);
  color: var(--gold-2);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.confiance__puce {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(232, 160, 32, .18);
}

.confiance__titre {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted-2);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

/* La piste s'etend au-dela du conteneur et s'estompe sur les bords :
   sans cela, les logotypes apparaissent et disparaissent d'un coup. */
.confiance__piste {
  display: flex;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.confiance__file {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  padding-right: clamp(3rem, 7vw, 7rem);
  list-style: none;
  margin: 0;
  animation: confianceDefile 42s linear infinite;
}
@keyframes confianceDefile { to { transform: translateX(-100%); } }

.confiance__marque {
  flex: none;
  white-space: nowrap;
  font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  opacity: .28;
  /* Un gris uniforme fait tenir ensemble des marques qui n'ont aucune
     raison de s'accorder : c'est le traitement, pas les logos, qui donne
     l'impression d'une rangee. */
  filter: grayscale(1);
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .confiance__file { animation: none; }
  .confiance__piste { justify-content: center; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIFS DE LA REVUE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fond du chemin
   Une vignette produit floutée en arrière-plan donnait un rouge saturé
   totalement hors palette. La section repasse sur un aplat graphite, avec
   une lueur dorée en haut et le grain du site pour toute matière : c'est
   la charte, pas une image, qui doit tenir le fond. */
.chemin { background: var(--ink-deep); }
.chemin::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 42% at 50% -6%, rgba(232, 160, 32, .16), transparent 64%),
    radial-gradient(50% 40% at 88% 108%, rgba(30, 60, 40, .35), transparent 62%),
    linear-gradient(180deg, var(--ink-2), var(--ink-deep) 55%, #0D0D0C);
}
/* Texture d'encre : un bruit très fin, qui casse l'aplat sans le salir. */
.chemin::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  opacity: .5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* ── Le numéro d'étape prime sur le libellé
   Sur un parcours en courbe, l'ordre de lecture n'est pas donné par la
   position : il faut le chiffre pour savoir où l'on en est. Il devient
   donc l'élément dominant de la pastille. */
.jalon__pastille {
  gap: .6rem;
  padding: .45rem 1.15rem .45rem .5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.jalon--gauche .jalon__pastille { padding: .45rem .5rem .45rem 1.15rem; }

.jalon__rang {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}


/* ── Bento : la derniere rangee se referme
   La tuile de marque y faisait tache — un aplat vert au milieu d'une
   grille creme et graphite. La carte voisine prend toute la largeur
   restante plutot que de laisser un trou. */
.bento .bcard--liseret { grid-column: span 2; justify-content: center; }
@media (max-width: 900px) { .bento .bcard--liseret { grid-column: auto; } }

/* ── Carrousel : fichiers et logotypes composés dans la même rangée
   Un vrai logo et un mot composé n'ont aucune raison de faire la même
   hauteur optique. On les cale sur une hauteur commune et on leur donne
   le même gris : c'est le traitement, pas les fichiers, qui fait tenir la
   rangée ensemble. */
.confiance__marque {
  display: inline-flex; align-items: center;
  height: clamp(22px, 2.6vw, 34px);
}
.confiance__marque img {
  height: 100%;
  width: auto;
  display: block;
}
.confiance__marque span { line-height: 1; }

/* Un logo clair disparaissait : desature puis pose a 28 % d'opacite sur du
   creme, il ne restait rien. On l'aplatit d'abord en noir, l'opacite du
   parent le ramene ensuite au meme gris que les logotypes composes. */
.confiance__marque img { filter: grayscale(1) brightness(0); }

/* ═══════════════════════════════════════════════════════════════════════════
   FOND DU CHEMIN : UN DÉGRADÉ DE CHARTE, EN PARALLAXE
   Une photographie floutée finissait toujours par ramener une couleur
   étrangère à la palette. Ici il n'y a aucune image : trois lueurs — or,
   vert forêt, et une reprise d'or plus froide — posées sur le graphite.
   Rien ne peut en sortir.

   Le calque avance moins vite que la page, ce qui suffit à donner la
   profondeur sans jamais attirer l'œil sur lui-même.
   ═══════════════════════════════════════════════════════════════════════════ */

.chemin__aura {
  position: absolute;
  inset: -18% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 26% at 22% 12%, rgba(232, 160, 32, .30), transparent 66%),
    radial-gradient(44% 30% at 82% 34%, rgba(30, 60, 40, .55), transparent 68%),
    radial-gradient(34% 24% at 62% 78%, rgba(242, 184, 81, .18), transparent 66%),
    radial-gradient(50% 34% at 12% 88%, rgba(30, 60, 40, .38), transparent 70%);
  filter: blur(64px);
  opacity: .9;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) { .chemin__aura { transform: none !important; } }


/* ═══════════════════════════════════════════════════════════════════════════
   EN-TÊTE : LE ROND SEUL
   Le logotype en toutes lettres doublait une marque déjà lisible dans la
   pastille. Le rond reste, agrandi, et le mot disparaît de l'en-tête. Il
   reste dans le menu mobile et au pied de page, où rien d'autre ne porte
   l'identité.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le rond seul laissait une pastille minuscule suivie d'un grand vide :
   la marque ne pesait plus rien a gauche de la navigation. Le logotype
   revient, le rond grossit, et l'ecart entre les deux se resserre — les
   deux elements se lisent comme un seul bloc. */
.hdr .wordmark { gap: .45rem; }
.hdr .wordmark__rond { width: 40px; height: 40px; }
.hdr .wordmark__img { height: 24px; }

@media (max-width: 1240px) {
  .hdr .wordmark__rond { width: 34px; height: 34px; }
  .hdr .wordmark__img { height: 21px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSENTEMENT AUX COOKIES
   Un bandeau sobre en bas d'écran, et un panneau pour le détail. Aucune
   illustration, aucun pictogramme décoratif : c'est une information
   juridique, elle se lit comme telle.

   Les trois commandes du bandeau ont le même poids visuel. Un « tout
   refuser » plus discret que le « tout accepter » est précisément ce que
   la CNIL sanctionne.
   ═══════════════════════════════════════════════════════════════════════════ */

.ck[hidden] { display: none; }

.ck__bandeau[hidden] { display: none; }
.ck__bandeau {
  position: fixed;
  left: 50%; bottom: clamp(.8rem, 2vw, 1.4rem);
  transform: translateX(-50%);
  z-index: 120;
  width: min(1080px, calc(100vw - 2rem));

  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(.9rem, 2vw, 2rem);
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.8rem);

  background: var(--ink-deep);
  color: var(--paper);
  border: 1px solid rgba(244, 241, 234, .1);
  border-radius: var(--r-lg);
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .8);
  animation: ckMonte 600ms var(--doux);
}
@keyframes ckMonte { from { opacity: 0; transform: translate(-50%, 18px); } }

.ck__corps { flex: 1 1 26rem; min-width: 0; }
.ck__titre {
  font-size: var(--fs-label); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .4rem;
}
.ck__texte { font-size: var(--fs-sm); color: rgba(244, 241, 234, .74); max-width: 62ch; }

.ck__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* .btn--ghost pose un fond clair : sur la bande sombre, le libelle creme
   se retrouvait ecrit en blanc sur blanc. Les boutons du bandeau sont donc
   redefinis entierement, fond compris.

   Refuser et accepter gardent le meme poids : meme hauteur, meme
   rembourrage, meme graisse. Seule la couleur les distingue, et c'est
   l'action positive qui prend l'or — pas l'inverse. */
.ck__bandeau .btn {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-bd: rgba(244, 241, 234, .3);
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(244, 241, 234, .3);
}
.ck__bandeau .btn:hover {
  background: rgba(244, 241, 234, .1);
  border-color: rgba(244, 241, 234, .5);
}
.ck__bandeau .btn--gold,
.ck__bandeau .btn--gold:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.ck__bandeau .btn--gold:hover { background: var(--gold-lite); }

/* « Personnaliser » n'est pas une troisieme option de meme rang : c'est
   un detour. Il se donne l'allure d'un lien. */
.ck__lien,
.ck__bandeau .ck__lien {
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: rgba(244, 241, 234, .72);
}
.ck__bandeau .ck__lien:hover { background: transparent; color: var(--paper); }


/* ─────────────────────────────────  PANNEAU */
.ck__panneau[hidden] { display: none; }
.ck__panneau {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center;
  padding: clamp(.8rem, 3vw, 2rem);
  background: rgba(12, 12, 11, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ckFond 320ms var(--ease);
}
@keyframes ckFond { from { opacity: 0; } }

.ck__fenetre {
  width: min(680px, 100%);
  max-height: min(86vh, 780px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: ckFenetre 420ms var(--doux);
}
@keyframes ckFenetre { from { opacity: 0; transform: translateY(16px) scale(.985); } }

.ck__entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--line-2);
}
.ck__p-titre { font-size: var(--fs-h3); letter-spacing: -.02em; }
.ck__fermer { flex: none; }

.ck__liste { overflow-y: auto; padding: clamp(.6rem, 1.6vw, 1rem); }

.ck__cat {
  padding: clamp(.9rem, 2vw, 1.2rem);
  border-radius: var(--r);
  border: 1px solid var(--line-2);
}
.ck__cat + .ck__cat { margin-top: .6rem; }

.ck__cat-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}
.ck__cat-nom { font-size: 1rem; letter-spacing: -.01em; margin-bottom: .25rem; }
.ck__cat-quoi { font-size: var(--fs-sm); color: var(--muted); }
.ck__cat-detail { font-size: var(--fs-sm); color: var(--muted-2); line-height: 1.55; }
.ck__cat-duree {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .55rem;
  font-size: var(--fs-xs); color: var(--muted-2);
}
.ck__cat-duree .ico { color: var(--gold-2); }

.ck__verrou {
  display: inline-flex; align-items: center; gap: .35rem;
  flex: none;
  padding: .3rem .65rem;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  border: 1px solid rgba(232, 160, 32, .35);
  color: var(--gold-2);
  font-size: var(--fs-xs); font-weight: 700;
  white-space: nowrap;
}

/* ── Bascule : une vraie case à cocher, habillée. Le clavier et les
   lecteurs d'écran voient la case, pas le décor. */
.ck__bascule { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.ck__bascule input {
  position: absolute; inset: 0; opacity: 0; margin: 0;
  width: 100%; height: 100%; cursor: pointer;
}
.ck__piste {
  width: 46px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  border: 1px solid var(--line);
  transition: background .28s var(--ease), border-color .28s var(--ease);
}
.ck__piste::after {
  content: '';
  position: absolute; top: 4px; left: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 1px 3px rgba(26, 26, 24, .3);
  transition: transform .28s var(--doux);
}
.ck__bascule input:checked ~ .ck__piste { background: var(--gold); border-color: var(--gold-2); }
.ck__bascule input:checked ~ .ck__piste::after { transform: translateX(20px); }
.ck__bascule input:focus-visible ~ .ck__piste { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.ck__pied {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  border-top: 1px solid var(--line-2);
  background: var(--paper);
}
.ck__renvoi { font-size: var(--fs-sm); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.ck__renvoi:hover { color: var(--ink); }

@media (max-width: 620px) {
  .ck__bandeau { flex-direction: column; align-items: stretch; }
  .ck__actions { justify-content: stretch; }
  .ck__actions .btn { flex: 1 1 auto; justify-content: center; }
  .ck__pied { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .ck__bandeau, .ck__panneau, .ck__fenetre { animation: none; }
  .ck__piste, .ck__piste::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARROUSEL : BANDE GRAPHITE, LOGOS DANS LEURS COULEURS
   Aplatir les logos en silhouette ne marche pas : YorkHost est un carre
   plein, il devenait un carre noir ; GameHost est ecrit en blanc, il
   disparaissait sur le creme. Un traitement uniforme suppose des logos
   uniformes, ce qu'ils ne sont jamais.

   La bande passe donc en graphite et les logos gardent leurs couleurs.
   C'est le fond qui les fait tenir ensemble, plus le filtre.
   ═══════════════════════════════════════════════════════════════════════════ */

.confiance {
  position: relative;
  z-index: 10;
  margin: 4rem auto;
  width: 96%;
  max-width: 1500px;
  color: var(--ink);
  padding-block: clamp(2rem, 4vw, 3rem);
  
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
}
.confiance__tete { text-align: center; }
.confiance__badge {
  background: rgba(232, 160, 32, .12);
  border-color: rgba(232, 160, 32, .34);
  color: var(--gold-lite);
}
.confiance__titre { color: rgba(244, 241, 234, .5); }

/* La piste occupe toute la largeur de la section, sans sortir du flux :
   la sortir a coups de 100vw et de marges negatives poussait le badge et
   le titre hors de leur axe. */
.confiance__piste {
  display: flex;
  width: 100%;
  margin: 0;
  transform: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.confiance__marque {
  height: clamp(36px, 5vw, 56px);
  opacity: .9;
  filter: none;
  transition: opacity 200ms var(--doux);
}
.confiance__marque:hover {
  opacity: 1;
}
.confiance__marque img { filter: none; }
.confiance__marque img[src*="gamehost"] { filter: invert(1) hue-rotate(180deg); opacity: 0.8; }
.confiance__marque span {
  color: rgba(244, 241, 234, .72);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
}
/* Le logo Discord est monochrome : il prend la couleur du texte. */
.confiance__marque img[src*="discord"] { color: var(--ink); }

/* YorkHost est un carre plein a coins arrondis : sans cette retouche il
   se lit comme une tuile posee au milieu de logotypes detoures. */
.confiance__marque img[src*="yorkhost"] { border-radius: 22%; }

/* Texte reserve aux lecteurs d'ecran. La classe etait utilisee dans le
   panneau de consentement sans exister ici : le libelle de chaque bascule
   s'affichait en clair a cote d'elle. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARTES : LÉVITATION, AIMANTATION, OMBRES DE CHARTE

   Trois choses distinctes, souvent confondues.

   La lévitation est ce qui se passe QUAND ON NE TOUCHE À RIEN : une
   oscillation très lente, de deux ou trois pixels, décalée d'une carte à
   l'autre. Vue isolément elle ne se remarque pas ; c'est l'ensemble qui
   cesse d'avoir l'air imprimé sur la page.

   L'aimantation est le suivi du pointeur : la carte s'incline légèrement
   vers lui. Le calcul se fait en CSS à partir de deux variables posées par
   le script, jamais en manipulant le style à chaque mouvement.

   L'ombre, enfin, n'est pas grise. Une ombre neutre sous une charte or et
   vert forêt fait sale. Elle prend une pointe des deux couleurs.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes leviteDouce {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

.card, .bcard, .tile, .shot, .job, .partner, .confiance__marque {
  --lev: 0s;
}
/* Le décalage se fait par rang : sans lui, toute une grille monte et
   descend d'un seul mouvement, ce qui se voit immédiatement. */
.grid > *:nth-child(2n), .bento > *:nth-child(2n), .gallery > *:nth-child(2n) { --lev: -1.7s; }
.grid > *:nth-child(3n), .bento > *:nth-child(3n), .gallery > *:nth-child(3n) { --lev: -3.5s; }
.grid > *:nth-child(4n), .bento > *:nth-child(4n), .gallery > *:nth-child(4n) { --lev: -1.0s; }
.grid > *:nth-child(5n), .bento > *:nth-child(5n), .gallery > *:nth-child(5n) { --lev: -2.8s; }
.grid > *:nth-child(7n), .bento > *:nth-child(7n) { --lev: -4.6s; }

.js .card, .js .bcard, .js .tile, .js .job, .js .partner,
.js .shot, .js .notice--phragy, .js .infobox, .js .founder, .js .bento__img {
  animation: leviteDouce 6.2s ease-in-out infinite;
  animation-delay: var(--lev);
}
/* Au survol la lévitation s'arrête : deux mouvements superposés
   s'annulent visuellement au lieu de s'additionner. */
.js .card:hover, .js .bcard:hover, .js .tile:hover, .js .job:hover,
.js .partner:hover, .js .shot:hover, .js .notice--phragy:hover,
.js .infobox:hover, .js .founder:hover, .js .bento__img:hover, .js .temoin:hover { animation-play-state: paused; }


/* ─────────────────────────────────  OMBRES DE CHARTE
   Une lueur dorée sous la carte, et un aplomb vert forêt plus bas et plus
   large qui lui donne son assise. */
.card, .bcard, .tile, .job, .partner {
  box-shadow:
    0 1px 2px rgba(26, 26, 24, .05),
    0 14px 26px -18px rgba(30, 60, 40, .38),
    0 26px 44px -30px rgba(232, 160, 32, .3);
  transition:
    transform .55s var(--doux),
    box-shadow .55s var(--doux),
    border-color .4s var(--ease);
}
.card:hover, .bcard:hover, .tile:hover, .job:hover, .partner:hover {
  border-color: rgba(232, 160, 32, .4);
  box-shadow:
    0 2px 4px rgba(26, 26, 24, .07),
    0 22px 40px -22px rgba(30, 60, 40, .5),
    0 40px 70px -34px rgba(232, 160, 32, .55);
}
/* Sur la carte encre, la lueur dorée passe devant : l'ombre verte n'a rien
   à éclairer sous du noir. */
.bcard--ink {
  box-shadow:
    0 20px 40px -24px rgba(0, 0, 0, .7),
    0 34px 60px -34px rgba(232, 160, 32, .45);
}


/* ─────────────────────────────────  AIMANTATION
   Le script pose --sx et --sy, de -1 à 1, selon la position du pointeur
   dans la carte. Le reste se calcule ici : le style n'est jamais réécrit
   à chaque image, c'est le compositeur qui travaille. */
.js .card:hover, .js .bcard:hover, .js .tile:hover,
.js .job:hover, .js .partner:hover, .js .temoin:hover, .js [data-tilt]:hover {
  transform:
    perspective(900px)
    rotateX(calc(var(--sy, 0) * -3.2deg))
    rotateY(calc(var(--sx, 0) * 3.2deg))
    translate3d(calc(var(--sx, 0) * 4px), calc(var(--sy, 0) * 4px - 7px), 0);
}

@media (hover: none), (pointer: coarse) {
  .js .card, .js .bcard, .js .tile, .js .job, .js .partner,
  .js .shot, .js .notice--phragy, .js .infobox, .js .founder,
  .js .bento__img { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .card, .js .bcard, .js .tile, .js .job, .js .partner,
  .js .shot, .js .notice--phragy, .js .infobox, .js .founder,
  .js .bento__img {
    animation: none; transition: none;
  }
  .js .card:hover, .js .bcard:hover, .js .tile:hover,
  .js .job:hover, .js .partner:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RÉGLAGES DE MOUVEMENT
   Deux registres, et un seul de chaque.

   Les INTERACTIONS — survol, clic, bascule — sont courtes et dépassent
   légèrement leur cible avant de s'y poser. Ce dépassement est ce qui
   donne la sensation de réactivité : sans lui, une transition lente se
   lit comme de la lourdeur, pas comme de la douceur.

   Les ENTRÉES au défilement restent longues et n'ont aucun rebond : un
   bloc de texte qui dépasse puis revient donne le tournis.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --rebond:   cubic-bezier(.34, 1.56, .64, 1);   /* interactions */
  --entree:   cubic-bezier(.16, 1, .3, 1);       /* arrivées au scroll */
  --t-inter:  200ms;
  --t-arrive: 900ms;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO VIVANT
   Trois mouvements très lents se superposent, et aucun ne doit se
   remarquer isolément : c'est leur somme qui empêche l'image de paraître
   imprimée sur la page. Dès qu'on repère l'un d'eux, il est trop rapide.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Ken Burns sur la bannière
   L'agrandissement passe par la propriété « scale » et non par
   « transform » : les fonds fixes portent un transform: none !important
   qui annulerait un scale écrit dans le transform. Les deux propriétés
   sont indépendantes, celle-ci n'est donc pas concernée. */
@keyframes kenBurns {
  from { scale: 1; }
  to   { scale: 1.08; }
}
.js .hero--photo .hero__bg {
  animation: kenBurns 25s ease-in-out infinite alternate;
  will-change: scale;
}

/* ── 2. Le voile aurora
   Deux masses de couleur, une or et une vert forêt, très floues et très
   peu opaques. En soft-light elles réchauffent la bannière sans la
   recolorer : un calque en normal la dénaturerait.

   Les deux dérivent sur des durées et des trajectoires différentes. Avec
   la même animation, elles se déplaceraient en bloc et on verrait un
   calque bouger plutôt qu'une lumière changer. */
.hero__aurora {
  position: absolute; inset: -20%;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  overflow: hidden;
}
.hero__aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.hero__aurora i:nth-child(1) {
  width: 58%; height: 74%; top: -12%; left: -6%;
  background: radial-gradient(circle, rgba(232, 160, 32, .38), transparent 68%);
  animation: auroraA 30s ease-in-out infinite alternate;
}
.hero__aurora i:nth-child(2) {
  width: 66%; height: 80%; bottom: -18%; right: -10%;
  background: radial-gradient(circle, rgba(30, 60, 40, .5), transparent 68%);
  animation: auroraB 38s ease-in-out infinite alternate;
}
@keyframes auroraA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(16%, 12%, 0) scale(1.18); }
}
@keyframes auroraB {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-14%, -10%, 0) scale(1); }
}

/* ── 3. Le grain
   Il existait déjà, fixe. Il se décale maintenant par sauts, jamais en
   continu : un grain qui glisse se voit comme un calque qui bouge, un
   grain qui saute se lit comme de l'argentique. */
@keyframes grainSaute {
  0%   { background-position:   0    0; }
  12%  { background-position: -12px  8px; }
  25%  { background-position:   9px -14px; }
  37%  { background-position: -16px -6px; }
  50%  { background-position:  14px 11px; }
  62%  { background-position:  -7px 15px; }
  75%  { background-position:  11px -9px; }
  87%  { background-position: -13px  4px; }
  100% { background-position:   0    0; }
}
.js .grain { animation: grainSaute .5s steps(8, end) infinite; }


/* ─────────────────────────────────  PARALLAXE DE SORTIE
   Le bloc de titre s'échappe plus vite que la page pendant qu'on quitte
   le hero, et s'efface sur la fin. La bannière, elle, retient : c'est
   l'écart entre les deux vitesses qui creuse la profondeur.

   Le script pose --sortie, de 0 à 1. */
.hero--full .wrap {
  transform: translate3d(0, calc(var(--sortie, 0) * -15%), 0);
  opacity: calc(1 - max(0, (var(--sortie, 0) - .4)) * 2.5);
  will-change: transform, opacity;
}


@media (prefers-reduced-motion: reduce) {
  .js .hero--photo .hero__bg,
  .js .grain,
  .hero__aurora i { animation: none; scale: 1; }
  .hero--full .wrap { transform: none; opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIONS : COURTES, AVEC UN LÉGER DÉPASSEMENT
   Les transitions de survol étaient à 400 et 550 ms. À cette durée, un
   survol ne se lit pas comme de la douceur mais comme un temps de
   réponse. Elles passent à 200 ms, avec un easing qui dépasse un peu sa
   cible avant de s'y poser.
   ═══════════════════════════════════════════════════════════════════════════ */

.card, .bcard, .tile, .job, .partner, .shot,
.notice--phragy, .infobox, .founder, .bento__img {
  transition:
    transform var(--t-inter) var(--rebond),
    box-shadow var(--t-inter) var(--rebond),
    border-color var(--t-inter) var(--ease);
}
.btn, .icon-btn, .chip, .link-arrow, .hdr__nav a, .ft__col a {
  transition-duration: var(--t-inter);
  transition-timing-function: var(--rebond);
}


/* ═══════════════════════════════════════════════════════════════════════════
   LUEUR QUI SUIT LE CURSEUR
   Le script écrit --mx et --my ; le dégradé se recalcule tout seul. Rien
   n'est réécrit à chaque image, et l'effet ne coûte qu'une composition.
   ═══════════════════════════════════════════════════════════════════════════ */

.card, .bcard, .tile, .job, .partner {
  position: relative;
  isolation: isolate;
}
.card::after, .bcard::after, .tile::after, .job::after, .partner::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms var(--ease);
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(232, 160, 32, .14),
    transparent 62%);
}
.card:hover::after, .bcard:hover::after, .tile:hover::after,
.job:hover::after, .partner:hover::after { opacity: 1; }

/* Sur la carte encre, la lueur doit être plus franche pour exister. */
.bcard--ink::after {
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(232, 160, 32, .22),
    transparent 62%);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BORDURE OR QUI SE TRACE
   Un liseré d'un pixel qui fait le tour de la carte au survol. Le tracé
   passe par un dégradé conique dont on anime l'angle : une bordure
   animée en largeur ferait recalculer la mise en page à chaque image.
   ═══════════════════════════════════════════════════════════════════════════ */

@property --tour {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.card::before, .bcard::before, .tile::before, .job::before, .partner::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms var(--ease);
  background: conic-gradient(from var(--tour),
    transparent 0deg, transparent 220deg,
    rgba(232, 160, 32, .9) 300deg,
    rgba(242, 184, 81, 1) 340deg,
    transparent 360deg);
  /* Seul le contour est peint : le centre est découpé. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@keyframes tourneBordure { to { --tour: 360deg; } }

.card:hover::before, .bcard:hover::before, .tile:hover::before,
.job:hover::before, .partner:hover::before {
  opacity: 1;
  animation: tourneBordure 800ms linear;
}


/* ═══════════════════════════════════════════════════════════════════════════
   IMAGES DE CARTE : ZOOM AU SURVOL
   ═══════════════════════════════════════════════════════════════════════════ */

.card__media, .shot, .job__media, .bento__img { overflow: hidden; }
.card__media img, .shot img, .job__media img, .bento__img img {
  transition: transform 600ms var(--ease-out);
}
.card:hover .card__media img,
.shot:hover img,
.job:hover .job__media img,
.bento__img:hover img { transform: scale(1.07); }

/* La pastille remonte, avec le même dépassement que le reste. */
.card__badge, .badge {
  transition: transform var(--t-inter) var(--rebond);
}
.card:hover .card__badge, .card:hover .badge { transform: translateY(-4px); }


/* ═══════════════════════════════════════════════════════════════════════════
   ENTRÉES DIRECTIONNELLES
   Toutes les entrées venaient du bas. Sur une grille de trois colonnes,
   neuf blocs qui montent ensemble se lisent comme un rideau. La colonne
   de gauche arrive maintenant de la gauche, celle de droite de la
   droite, le centre du bas — le contenu semble se poser à sa place au
   lieu de défiler.
   ═══════════════════════════════════════════════════════════════════════════ */

.js .grid--3 > *:nth-child(3n+1):not(.vu),
.js .bento > *:nth-child(3n+1):not(.vu) { transform: translate3d(-38px, 14px, 0); }
.js .grid--3 > *:nth-child(3n):not(.vu),
.js .bento > *:nth-child(3n):not(.vu)   { transform: translate3d(38px, 14px, 0); }

.js .grid--2 > *:nth-child(2n+1):not(.vu) { transform: translate3d(-34px, 12px, 0); }
.js .grid--2 > *:nth-child(2n):not(.vu)   { transform: translate3d(34px, 12px, 0); }

.js .grid > *, .js .bento > * {
  transition:
    opacity var(--t-arrive) var(--entree),
    transform var(--t-arrive) var(--entree);
  transition-delay: var(--retard, 0ms);
}


@media (hover: none), (pointer: coarse) {
  .card::after, .bcard::after, .tile::after, .job::after, .partner::after,
  .card::before, .bcard::before, .tile::before, .job::before, .partner::before {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card::after, .bcard::after, .tile::after, .job::after, .partner::after,
  .card::before, .bcard::before, .tile::before, .job::before, .partner::before {
    display: none;
  }
  .js .grid--3 > *:not(.vu), .js .grid--2 > *:not(.vu),
  .js .bento > *:not(.vu) { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AVANCEMENT DE LA LECTURE
   Deux pixels en haut de l'écran. C'est le seul repère permanent de la
   page : il ne doit rien coûter à l'œil, donc pas d'ombre, pas de lueur,
   pas de coin arrondi.
   ═══════════════════════════════════════════════════════════════════════════ */

.progres { display: none; }
.progres i { display: none; }
body.fond-sombre .progres { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   LES CHIFFRES
   ═══════════════════════════════════════════════════════════════════════════ */

.chiffres__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  text-align: center;
  /* Sans alignement explicite, une case plus haute que les autres etire
     la rangee et les trois suivantes se calent en bas : les chiffres ne
     partagent alors plus la meme ligne. */
  align-items: start;
}
.chiffre { display: flex; flex-direction: column; align-items: center; }
.chiffre__valeur { min-height: 1em; }
.chiffre__valeur {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  /* Les chiffres ne doivent pas changer de largeur en défilant, sinon
     toute la ligne tremble pendant le compte. */
  font-variant-numeric: tabular-nums;
  background: linear-gradient(140deg, var(--gold-2), var(--gold-lite));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.chiffre__label {
  margin-top: .5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
@media (max-width: 760px) {
  .chiffres__grille { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PASTILLE DE STATUT
   Un point qui bat, et une onde qui s'en échappe. Le battement doit
   rester lent : à moins de deux secondes il devient une alarme.
   ═══════════════════════════════════════════════════════════════════════════ */

.pouls {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.pouls i {
  position: relative;
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
}
.pouls i::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--gold);
  animation: poulsOnde 2.4s var(--ease-out) infinite;
}
@keyframes poulsOnde {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
.section--photo .pouls, .ft .pouls { color: var(--paper); }


/* ═══════════════════════════════════════════════════════════════════════════
   TÉMOIGNAGES : DEUX RANGÉES EN SENS OPPOSÉS
   Le mouvement contraire fait lire l'ensemble comme un flux. Deux rangées
   dans le même sens donneraient un bloc qui glisse.
   ═══════════════════════════════════════════════════════════════════════════ */

.temoins { overflow: hidden; }
.temoins .proof { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }

.temoins__piste {
  display: flex;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.temoins__piste + .temoins__piste { margin-top: clamp(.6rem, 1.4vw, 1rem); }

.temoins__file {
  display: flex;
  flex: none;
  width: max-content;
  gap: clamp(.6rem, 1.4vw, 1rem);
  padding-right: clamp(.6rem, 1.4vw, 1rem);
  list-style: none;
  margin: 0;
}
.temoins__piste--aller  .temoins__file { animation: temoinAller  56s linear infinite; }
.temoins__piste--retour .temoins__file { animation: temoinRetour 64s linear infinite; }
@keyframes temoinAller  { to { transform: translateX(-100%); } }
@keyframes temoinRetour { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.temoin {
  flex: none;
  width: clamp(260px, 26vw, 340px);
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
}
.temoin__note { display: flex; gap: .1rem; color: var(--gold); margin-bottom: .5rem; }
.temoin__texte {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink);
  /* Trois lignes au plus : un avis long casse l'alignement de la rangée. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.temoin__qui {
  margin-top: .7rem;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--muted);
}
.temoin__qui span {
  font-weight: 600;
  color: var(--muted-2);
  margin-left: .4rem;
  padding-left: .5rem;
  border-left: 1px solid var(--line);
}


/* ═══════════════════════════════════════════════════════════════════════════
   LA MASCOTTE SUIT LE CURSEUR
   Huit pixels au maximum, et lentement. C'est le genre de détail qu'on
   remarque sans savoir pourquoi ; s'il se voit, c'est qu'il est trop
   ample.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-suit-curseur] {
  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}


@media (prefers-reduced-motion: reduce) {
  .pouls i::after,
  .temoins__piste--aller .temoins__file,
  .temoins__piste--retour .temoins__file { animation: none; }
  .temoins__piste { justify-content: center; flex-wrap: wrap; }
  [data-suit-curseur] { transition: none; transform: none !important; }
}

/* ── Transition entre pages
   Deux cent millisecondes pour sortir, quatre cents pour entrer. Une
   sortie longue donne l'impression que le clic n'a pas ete pris ; une
   entree courte, celle d'un saut. */
main, .hdr, .ft {
  transition: opacity 400ms var(--entree), transform 400ms var(--entree);
}
.page-sort main, .page-sort .hdr, .page-sort .ft {
  transition-duration: 200ms;
}

/* ── Logos partenaires
   Les fichiers vont du carre de 120 px au bandeau de 525 px. On les cale
   sur une hauteur commune : dans une rangee, c'est la hauteur optique qui
   doit s'accorder, jamais la largeur du fichier. */
.partner__logo img {
  height: clamp(38px, 5vw, 58px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.partner__logo { display: grid; place-items: center; min-height: clamp(90px, 11vw, 130px); }
/* YorkHost est un carre plein a coins arrondis. */
.partner__logo img[src*="yorkhost"] { border-radius: 22%; }

/* ── La vignette du logo passe en graphite
   Instant Gaming est ecrit en blanc : sur le creme de la carte, il
   disparaissait. Un fond sombre commun regle le cas de tous les logos
   clairs d'un coup, et les fait tenir ensemble comme dans le carrousel. */
.partner__logo {
  background: var(--ink-deep);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: clamp(1.2rem, 2.4vw, 2rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES MOTS DORÉS DES TITRES
   Le dégradé était porté par .dim. Or le découpage enferme chaque mot dans
   une fenêtre en overflow: hidden pour l'entrée par le bas : le fond censé
   remplir les lettres se retrouvait rogné, et les lettres, elles, restaient
   transparentes. Pendant toute la montée le mot était donc invisible, puis
   surgissait d'un coup à l'arrivée.

   Le dégradé se pose maintenant sur la lettre elle-même. Sans JavaScript
   il n'y a pas de fenêtre de mot : .dim garde alors son propre dégradé,
   et rien ne peut disparaître.
   ═══════════════════════════════════════════════════════════════════════════ */

.dim .mot > i {
  background-image: linear-gradient(90deg, #E8A020, #F0B858);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
/* background-image, et surtout PAS la propriete raccourcie background :
   celle-ci remet background-clip a sa valeur initiale (border-box), le
   decoupage sur le texte saute, et le mot se peint en rectangle plein. */
.dark .dim .mot > i, .path .dim .mot > i, .ft .dim .mot > i,
.hero--full .dim .mot > i, .bcard--ink .dim .mot > i,
.panel--ink .dim .mot > i, .chemin .dim .mot > i,
.section--photo .dim .mot > i {
  background-image: linear-gradient(90deg, #E8A020, #F0B858);
}

/* Une fois le mot decoupe, .dim n'a plus a peindre : son fond deborderait
   des lettres pendant la montee. */
.decoupe .dim { background: none; }


/* ── L'or du hero manquait de mordant
   Il partait de #F0B858, deja clair, pour finir plus clair encore. Le
   degrade part maintenant de l'or sature de la charte : la meme plage que
   les autres titres dores, simplement remontee pour le fond sombre. */
.hero--full .underline,
.chemin .underline {
  --or-debut: #E8A020;
  --or-fin:   #F0B858;
}

/* Une animation hors du champ continue de tourner tant qu'on ne l'arrete
   pas : le navigateur ne peut pas le deviner. Le script pose cette classe
   sur ce qui sort de l'ecran. */
.hors-champ { animation-play-state: paused !important; }

/* ── La regle d'espacement generique ne doit pas entrer dans une grille
   Un conteneur qui porte a la fois « wrap » et une disposition en grille
   recevait la marge destinee aux blocs empiles : ses cases se retrouvaient
   decalees d'un cran les unes par rapport aux autres. Ici, c'est l'ecart
   de grille qui gere l'espacement, pas la marge. */
.section > .wrap.chiffres__grille > * + *,
.section > .wrap.grid > * + *,
.section > .wrap.bento > * + *,
.section > .wrap.gallery > * + *,
.section > .wrap.duo__in > * + * { margin-top: 0; }

/* Le piege a robots doit etre invisible sans etre display:none : certains
   scripts ignorent les champs masques de cette facon. Il sort du flux et
   du parcours clavier, un visiteur ne le rencontre jamais. */
.piege {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE DE REMERCIEMENT
   Rien d'autre qu'une confirmation. C'est le seul moment du parcours ou le
   visiteur n'a rien a faire : la page ne doit pas lui proposer douze
   directions.
   ═══════════════════════════════════════════════════════════════════════════ */

.merci { padding-block: clamp(5rem, 12vw, 9rem); }
.merci__in { max-width: 46rem; margin-inline: auto; text-align: center; }

.merci__coche {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  margin: 0 auto clamp(1.4rem, 3vw, 2.2rem);
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-lite), var(--gold));
  color: var(--ink);
  box-shadow: 0 24px 48px -24px rgba(232, 160, 32, .9);
}
.merci__titre { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.035em; }
.merci__texte {
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
  font-size: var(--fs-lead);
  color: var(--muted);
}
.merci__aide {
  display: inline-flex; align-items: flex-start; gap: .5rem;
  margin-top: clamp(1.2rem, 2.6vw, 1.8rem);
  padding: clamp(.8rem, 1.8vw, 1.1rem) clamp(1rem, 2.2vw, 1.4rem);
  border-radius: var(--r);
  background: var(--gold-soft);
  border: 1px solid rgba(232, 160, 32, .32);
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: left;
}
.merci__aide .ico { flex: none; margin-top: .15rem; color: var(--gold-2); }
.merci__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
}

/* ── Encart d'aide de la page de remerciement
   A 320 px, l'affichage en ligne avec un pictogramme fixe et un texte long
   depassait la fenetre. Il repasse en bloc sous cette largeur. */
@media (max-width: 400px) {
  .merci__aide {
    display: block;
    max-width: 100%;
  }
  .merci__aide .ico { display: none; }
  .merci__aide a { word-break: break-word; }
}

/* ── Hauteur de touche
   WCAG 2.2 demande 24 px au minimum pour une cible. Les liens pris dans une
   phrase en sont dispenses, mais pas ceux qui sont poses seuls : listes du
   pied de page, fil d'Ariane, navigation. Sur petit ecran ils tombaient a
   18 px. Le rembourrage vertical les remonte sans changer la mise en page,
   puisqu'il est compense par la marge negative. */
@media (max-width: 700px) {
  /* Tout lien pose seul dans une liste ou une navigation : ce sont ceux
     que WCAG 2.2 vise. Un lien pris au milieu d'une phrase en est
     dispense, et il n'est pas cible ici. */
  li > a,
  nav a,
  .ft__col a,
  .crumbs a,
  .hdr__nav a,
  .menu a,
  .link-arrow,
  .proof a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-block: 2px;
  }
  .ft__col ul { gap: .75rem; }
  /* Les separateurs du fil d'Ariane ne sont pas des cibles. */
  .crumbs span { min-height: 0; }
}

/* Les liens de reseaux sont libelles par le nom du service. « X » fait une
   seule lettre, donc huit pixels de large : une cible impossible au pouce.
   Ils recoivent une largeur plancher, sur tous les ecrans. */
.ft__col a[href*="x.com"],
.ft__col a[href*="tiktok"],
.ft__col a[href*="behance"],
.ft__col a[href*="youtube"],
.ft__col a[href*="instagram"],
.ft__col a[href*="discord"] {
  min-width: 44px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENU MOBILE
   Il etait creme, plat, et ses six liens flottaient au milieu d'un grand
   vide : ni hierarchie, ni matiere, rien qui appartienne au site.

   Il passe en graphite, comme la pastille de navigation et les sections
   sombres. Les entrees s'ancrent en haut plutot que de se centrer, chacune
   porte son rang, et une lueur doree occupe le fond. Le pied de panneau
   reste colle en bas : c'est la que se trouvent les deux actions.
   ═══════════════════════════════════════════════════════════════════════════ */

.menu {
  background: var(--ink-deep);
  color: var(--paper);
  padding: .9rem var(--gutter) max(1.6rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Une lueur en haut a gauche, la meme que sur le chemin : le panneau
   cesse d'etre un aplat sans rien y poser. */
.menu::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at 8% 0%, rgba(232, 160, 32, .18), transparent 62%),
    radial-gradient(52% 40% at 100% 100%, rgba(30, 60, 40, .5), transparent 66%);
}
.menu > * { position: relative; z-index: 1; }

.menu__top {
  padding-block: .4rem 2.2rem;
  border-bottom: 1px solid rgba(244, 241, 234, .1);
}
.menu__top .icon-btn {
  border-color: rgba(244, 241, 234, .2);
  color: var(--paper);
}
.menu__top .icon-btn:hover { background: rgba(244, 241, 234, .1); }

/* Les entrees partent du haut : centrees, elles laissaient deux grands
   vides et on ne savait plus ou regarder. */
.menu__nav {
  flex: 1;
  justify-content: flex-start;
  padding-top: clamp(1.4rem, 5vh, 2.6rem);
}

.menu__nav a {
  gap: 1rem;
  padding: clamp(.8rem, 2.4vh, 1.1rem) 0;
  border-bottom: 1px solid rgba(244, 241, 234, .09);
  font-size: clamp(1.5rem, 7vw, 2rem);
  color: var(--paper);
  transition: color .2s var(--rebond), padding-left .24s var(--rebond);
}
.menu__nav a:hover,
.menu__nav a:focus-visible { padding-left: .5rem; }

/* Le rang donne l'ordre de lecture et occupe la colonne de gauche, qui
   etait vide. Il reste discret : c'est un repere, pas un titre. */
.menu__rang {
  flex: none;
  width: 2.1em;
  font-size: .5em;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .1em;
  color: rgba(232, 160, 32, .55);
  font-variant-numeric: tabular-nums;
}
.menu__nav a span { flex: 1; }
.menu__nav a .ico { color: rgba(244, 241, 234, .3); flex: none; }
.menu__nav a:hover .ico { color: var(--gold); }

/* La page courante se signale par son rang en or plein et un liseré. */
.menu__nav a[aria-current] { color: #FFF; }
.menu__nav a[aria-current] .menu__rang { color: var(--gold); }
.menu__nav a[aria-current] .ico { color: var(--gold); }

.menu__foot {
  gap: .7rem;
  padding-top: clamp(1.4rem, 4vh, 2.2rem);
  margin-top: auto;
  border-top: 1px solid rgba(244, 241, 234, .1);
}
.menu__mail { color: rgba(244, 241, 234, .5); }
.menu__mail:hover { color: var(--paper); }

/* ═══════════════════════════════════════════════════════════════════════════
   VOLET D'OUVERTURE
   Deux panneaux de graphite qui s'ecartent, comme un rideau qui se leve par
   le haut et par le bas. La mascotte et une barre doree occupent le centre
   pendant l'attente.

   Il n'existe que si <html> porte « ouvre », classe posee avant le premier
   rendu, uniquement a la premiere arrivee de la session. Sans elle, tout ce
   bloc est inerte : pas d'element affiche, rien qui capte le clic.
   ═══════════════════════════════════════════════════════════════════════════ */

.volet { display: none; }

.ouvre .volet {
  display: block;
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: all;
}

/* Les deux moitiés. Elles couvrent 50,5 % chacune : un demi-pourcent de
   recouvrement evite le liseré clair qui apparait au pixel de jonction. */
.ouvre .volet__pan {
  position: absolute; left: 0; right: 0;
  height: 50.5%;
  background: var(--ink-deep);
  transition: transform 900ms cubic-bezier(.76, 0, .24, 1) 260ms;
}
.ouvre .volet__pan--haut { top: 0; }
.ouvre .volet__pan--bas  { bottom: 0; }

.ouvre .volet__centre {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: .9rem;
  transition: opacity 260ms var(--ease);
}

.ouvre .volet__mascotte {
  width: clamp(96px, 22vw, 148px);
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .6));
  animation: voletFlotte 2.4s ease-in-out infinite;
}
@keyframes voletFlotte {
  0%, 100% { transform: translateY(0)     rotate(0); }
  50%      { transform: translateY(-10px) rotate(-2deg); }
}

.ouvre .volet__mot {
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .5);
  /* Le decalage compense l'interlettrage, qui pousse tout vers la droite. */
  text-indent: .34em;
}

/* La barre se remplit d'elle-meme : elle dit qu'il se passe quelque chose,
   sans pretendre mesurer un chargement qu'on ne connait pas. */
.ouvre .volet__barre {
  width: 132px; height: 2px;
  border-radius: 2px;
  background: rgba(244, 241, 234, .14);
  overflow: hidden;
}
.ouvre .volet__barre i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-lite));
  transform-origin: 0 50%;
  animation: voletBarre 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes voletBarre {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── L'ouverture. Le script pose « ouvert » quand la page est prete. */
.ouvre.ouvert .volet { pointer-events: none; }
.ouvre.ouvert .volet__centre { opacity: 0; transition-duration: 200ms; }
.ouvre.ouvert .volet__pan--haut { transform: translateY(-100%); }
.ouvre.ouvert .volet__pan--bas  { transform: translateY(100%); }

/* Le contenu attend derriere, puis arrive une fois le volet ecarte. */
.ouvre main, .ouvre .hdr { opacity: 0; }
.ouvre.ouvert main, .ouvre.ouvert .hdr {
  opacity: 1;
  /* Le contenu suivait le volet avec un demi-seconde de retard, puis
     mettait 600 ms a apparaitre. Ajoute aux 900 ms d'attente, cela faisait
     deux secondes avant de voir quoi que ce soit — sur un site qui repond
     en 16 ms. Le fondu commence maintenant en meme temps que le volet
     s'ecarte, et va deux fois plus vite. */
  transition: opacity 320ms var(--entree) 120ms;
}

@media (prefers-reduced-motion: reduce) {
  .volet, .ouvre .volet { display: none; }
  .ouvre main, .ouvre .hdr { opacity: 1; }
}

/* Avertissement dans le panier. Il remplace une boite de dialogue du
   navigateur, qui bloquait le parcours et avait l'air d'une erreur
   systeme au pire endroit possible : juste avant de payer. */
.drawer__avis {
  margin-top: .8rem;
  padding: .8rem .95rem;
  border-radius: var(--r);
  background: var(--gold-soft);
  border: 1px solid rgba(232, 160, 32, .38);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MATIÈRE DERRIÈRE LES SECTIONS
   Les sections crème s'enchaînaient en aplats identiques : rien ne
   distinguait la cinquième de la deuxième, et la page paraissait plate sur
   toute sa longueur.

   Chacune reçoit maintenant une ambiance en fond — une image floutée à la
   source, jamais en CSS : un blur() plein cadre coûte une passe de
   composition à chaque image de défilement, alors qu'ici il est cuit une
   fois pour toutes, et les fichiers pèsent entre 7 et 16 Ko.

   Le fond est FIXE : il ne bouge pas, c'est la section qui coulisse par
   dessus. C'est ce décalage qui creuse la page, et il ne coûte rien.
   ═══════════════════════════════════════════════════════════════════════════ */

.section { position: relative; isolation: isolate; }

.section::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* Le fond reste immobile pendant que la section glisse dessus. */
  background-attachment: fixed;
  opacity: .55;
}

/* UNE section sur trois, pas toutes.
   Avec une matiere derriere chacune, la page devenait plus chargee qu'avant
   et les aplats de couleur ne respiraient plus. C'est l'ALTERNANCE qui
   creuse une page : une section avec matiere, deux en aplat.

   Et tres discretement : au-dela d'un dixieme d'opacite, l'image se
   remarque et prend le pas sur le texte. */
.section:nth-of-type(3n+2)::after {
  background-image: url('../img/fonds/ambiance-creme.webp');
  opacity: .16;
}

/* Les sections qui portent deja leur propre fond n'en veulent pas d'autre. */
.section--photo::after,
.chemin::after,
.confiance::after,
.hero--full::after { background-image: none; }

/* Sur fond sombre, l'ambiance sombre, et plus discrete encore. */
.dark .section::after,
.section--photo .section::after {
  background-image: url('../img/fonds/ambiance-sombre.webp');
  opacity: .22;
}

/* background-attachment: fixed est notoirement saccade sur mobile, et
   coûte cher : l'image y redevient simplement fixe dans la section. */
@media (hover: none), (pointer: coarse) {
  .section::after { background-attachment: scroll; opacity: .1; }
}
@media (prefers-reduced-motion: reduce) {
  .section::after { background-attachment: scroll; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE HERO SUR DEUX COLONNES
   La moitie droite ne portait que l'image de fond : le regard s'y perdait
   sans rien trouver. Elle accueille maintenant le pack le plus complet.

   Ce n'est pas de la decoration. C'est l'endroit le plus regarde de la
   page, et jusqu'ici on n'y trouvait rien a acheter.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero__in {
  display: grid;
  /* Le titre garde la part du lion. A parts egales, « prets a » se
     retrouvait seul sur sa ligne et le texte paraissait comprime : c'est
     le titre qui porte la page, la carte ne fait que l'accompagner. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 4rem);
}
.hero__texte { min-width: 0; }

.hero__pack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-self: end;
  width: min(100%, 520px);
  border-radius: 16px;
  overflow: hidden;
  background: #181715;
  border: 1px solid rgba(229, 213, 192, 0.25);
  box-shadow:
    0 30px 70px -15px rgba(0, 0, 0, 0.85),
    0 10px 25px -5px rgba(0, 0, 0, 0.5),
    0 0 35px rgba(199, 154, 64, 0.18);
  transition: transform 420ms var(--rebond), box-shadow 420ms var(--rebond);
  text-decoration: none;
}
.hero__pack:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow:
    0 40px 90px -15px rgba(0, 0, 0, 0.92),
    0 15px 35px -5px rgba(0, 0, 0, 0.6),
    0 0 50px rgba(199, 154, 64, 0.35);
  border-color: rgba(232, 160, 32, 0.5);
}

.hero__pack-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 1rem;
  background: #F8F6F2;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: system-ui, -apple-system, sans-serif;
}
.hero__pack-dots {
  display: flex;
  gap: .4rem;
}
.hero__pack-dots i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.hero__pack-dots i:nth-child(1) { background: #FF5F56; }
.hero__pack-dots i:nth-child(2) { background: #FFBD2E; }
.hero__pack-dots i:nth-child(3) { background: #27C93F; }

.hero__pack-filename {
  font-size: .75rem;
  color: rgba(18, 17, 14, 0.55);
  font-weight: 600;
  letter-spacing: .02em;
}

.hero__pack-media {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero__pack img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9.5;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.hero__pack:hover img {
  transform: scale(1.04);
}

.hero__pack-etiquette {
  position: absolute; top: .85rem; left: .85rem;
  z-index: 3;
  padding: .4rem .95rem;
  border-radius: 99px;
  background: linear-gradient(135deg, #E8A020, #C79A40);
  color: #12100E;
  font-size: .75rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(232, 160, 32, 0.45);
}

.hero__pack-pied {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 2rem 1.25rem .95rem;
  background: linear-gradient(to top, rgba(10, 9, 8, .96), rgba(10, 9, 8, .4) 60%, transparent);
  color: var(--paper);
}
.hero__pack-nom { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.hero__pack-prix { font-size: 1.15rem; font-weight: 800; color: var(--gold-lite); white-space: nowrap; }

/* Sous 1100 px la carte passerait sous le texte et allongerait le hero
   pour rien : elle disparait, la boutique est a un clic. */
@media (max-width: 1280px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__pack { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__pack img { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PASSE CORRECTIVE — RETOUR, FOCUS, CIBLES, BANDEAU
   Cinq defauts releves en auditant les pages rendues, pas le code source.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────  1. RETOUR DU FORMULAIRE
   Le formulaire de contact renvoyait vers /communaute?ok=1 sans que rien
   ne s'affiche : on venait d'ecrire un message et le site restait muet.
   La reponse se pose au-dessus du formulaire, la ou le regard revient.

   Le rouge n'existait pas dans la palette. Plutot qu'un rouge d'alerte
   generique qui jurerait avec l'or, on prend une brique chaude, de la
   meme famille que le reste. Le succes prend le vert foret de la DA. */
.retour {
  --retour-teinte: var(--green);
  --retour-fond: var(--green-soft);
  display: flex; align-items: flex-start; gap: .7rem;
  margin: 0 0 1.6rem;
  padding: .95rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--retour-teinte) 26%, transparent);
  border-left: 3px solid var(--retour-teinte);
  border-radius: var(--r-sm);
  background: var(--retour-fond);
  color: var(--ink);
  font-size: var(--fs-sm); line-height: 1.5;
}
.retour--err { --retour-teinte: #A33A22; --retour-fond: #FBEAE4; }
.retour strong { color: var(--retour-teinte); font-weight: 700; }
.retour__icone { flex: 0 0 auto; display: grid; place-items: center; margin-top: .08em; color: var(--retour-teinte); }
.retour__icone .ico { display: block; }
/* Il recoit le focus a l'arrivee : sans cela l'anneau apparaitrait autour
   d'un paragraphe, ce qui n'a pas de sens visuel. */
.retour:focus { outline: none; }
.retour:focus-visible { outline: none; box-shadow: none; }

/* ─────────────────────────────────  2. BANDEAU COOKIES SUR MOBILE
   « flex: 1 1 26rem » etait juste tant que le bandeau etait une rangee :
   26rem servait de largeur de base. Des que la media query passe le
   conteneur en colonne, la meme valeur devient une HAUTEUR de base, et le
   corps du texte se retrouvait haut de 416 px pour 116 px de contenu. Le
   bandeau mangeait 68 % de l'ecran, avec un grand vide au milieu. */
@media (max-width: 620px) {
  .ck__corps { flex: 0 0 auto; }
}

/* ─────────────────────────────────  3. ANNEAU DE FOCUS SUR FOND SOMBRE
   L'anneau etait « 2px solid var(--ink) », soit #1A1A18, pose sur un pied
   de page en #121210 : au clavier, on traversait les vingt-cinq liens du
   pied sans jamais voir ou l'on etait.

   Deux couches reglent le probleme partout d'un coup : l'or ressort sur
   les fonds sombres (8,5:1), et la bande graphite qui l'entoure ressort
   sur les fonds clairs. Aucune des deux n'a besoin de connaitre le fond. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(18, 18, 16, .55);
  border-radius: 4px;
}
/* Les champs ont deja leur propre anneau, plus adapte a leur forme. */
.field input:focus-visible,
.field textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(232, 160, 32, .35); }

/* ─────────────────────────────────  4. CIBLES TACTILES
   WCAG 2.2 demande 24 px de haut au minimum. Les liens du pied de page
   tombaient a 23 px et les titres de fiche produit a 21 px : un pixel ou
   trois sous la barre, mais serres les uns contre les autres. */
.ft a,
.card__name a,
.crumbs a {
  display: inline-flex; align-items: center;
  min-height: 24px;
}

/* ─────────────────────────────────  5. LISIBILITE DU TITRE SUR LE HERO
   Le voile ne faisait que .34 d'opacite a mi-hauteur, la ou tombe la
   deuxieme ligne du titre — et c'est exactement la que l'image est la
   plus claire. On epaissit la bande mediane sans toucher au haut ni au
   bas, pour ne pas eteindre l'image. */
.hero--full::before {
  background:
    linear-gradient(to top,
      rgba(9, 10, 12, .92) 4%,
      rgba(9, 10, 12, .72) 30%,
      rgba(9, 10, 12, .50) 58%,
      rgba(9, 10, 12, .34) 78%,
      rgba(9, 10, 12, .48) 100%);
}

/* ─────────────────────────────────  6. DEFILEMENT LATERAL PARASITE
   « overflow: hidden » masque ce qui depasse mais laisse la boite
   scrollable : le navigateur peut donc la faire glisser lui-meme, sans
   qu'aucune barre n'apparaisse. Il le fait des qu'un element interieur
   recoit le focus, ou en arrivant sur une ancre.

   Sur .chemin, une lueur decorative de 366 px depassait de 31 px a 320 px
   de large. Un simple Tab vers un lien de la section suffisait a la
   decaler de 31 px : tout le texte se retrouvait coupe sur le bord
   gauche. Reproduit, puis verifie corrige.

   « overflow: clip » rogne exactement pareil mais ne cree pas de zone
   defilable, donc le decalage devient impossible. La ligne « hidden »
   reste dessous pour les navigateurs qui ne connaissent pas « clip ». */
.chemin,
.agency,
.temoins,
.confiance__piste {
  overflow: hidden;
  overflow: clip;
}

/* ─────────────────────────────────  7. RENONCIATION A LA RETRACTATION
   Case obligatoire avant paiement (L221-28 13°). Elle doit se lire sans
   effort et ne pas ressembler a une formalite qu'on masque : c'est
   l'acheteur qui renonce a un droit, il doit le voir.

   La cible tactile fait 24 px comme le reste, et le libelle entier est
   cliquable puisqu'il est dans le <label>. */
.drawer__renonce {
  display: flex; align-items: flex-start; gap: .65rem;
  margin: 0 0 .9rem;
  padding: .75rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--fs-xs); line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 200ms var(--doux), background 200ms var(--doux);
}
.drawer__renonce:hover { border-color: rgba(26, 26, 24, .26); }
.drawer__renonce:has(input:checked) {
  border-color: rgba(232, 160, 32, .5);
  background: var(--gold-soft);
  color: var(--ink);
}
.drawer__renonce input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: .08em;
  accent-color: var(--gold-2);
  cursor: pointer;
}
.drawer__renonce a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 2px; }

/* Le bouton desactive doit se lire comme « pas encore », pas comme
   « casse » : on garde la couleur, on baisse l'intensite. */
.drawer__foot .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  filter: saturate(.6);
}

/* ─────────────────────────────────  8. PAGE DE REMERCIEMENT
   Deux defauts, tous deux sur fond clair.

   Le bouton secondaire utilisait .btn--outline, dont le libelle est en
   blanc : la variante est faite pour les fonds sombres du hero. Sur le
   creme de cette page, le texte disparaissait. Passe en .btn--ghost.

   Le bloc d'aide etait en inline-flex, ce qui transformait le lien
   e-mail en element flex a part entiere : la phrase se cassait en trois
   colonnes au lieu de couler. Le texte est desormais dans un seul span,
   l'icone reste le second element. */
.merci__aide > span { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PASSE MOBILE — TROIS DEFAUTS RELEVES SUR TELEPHONE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────  1. CARTE AGENCE
   Une media query plus haut dans le fichier empilait deja cette carte sur
   petit ecran. Mais .agency est redefini APRES elle, et cette
   redefinition remet « grid-template-columns: auto 1fr auto ». A
   specificite egale, c'est la derniere qui gagne : la carte gardait donc
   ses trois colonnes sur telephone.

   Le texte se retrouvait ecrase dans une colonne d'une centaine de
   pixels — « Besoin d'un / vrai site / web, pas / d'un visuel ? » sur
   quatre lignes — pendant que le bouton occupait la moitie droite.

   On empile, apres la redefinition cette fois. */
@media (max-width: 760px) {
  .agency {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: left;
    gap: 1rem;
  }
  .agency .btn { width: 100%; justify-content: center; }
  .agency p { max-width: none; }
}

/* ─────────────────────────────────  2. PASTILLE D'AVIS
   Le rayon en pilule suppose une seule ligne. Sur telephone le contenu
   passe sur trois, et la pilule devient un galet de cent trente pixels de
   haut aux extremites trop rondes. On lui rend une forme de carte, et on
   aligne les elements en haut plutot qu'au centre. */
@media (max-width: 620px) {
  .proof {
    align-items: flex-start;
    border-radius: var(--r);
    padding: .9rem 1.1rem;
    gap: .55rem;
  }
  .proof__stars { flex: none; }
}

/* ─────────────────────────────────  3. MENU MOBILE
   Il ouvrait sur un aplat graphite. La DA du site est claire : le menu
   passe donc au creme, texte encre, avec la meme lueur doree en haut a
   gauche — juste inversee. Phragy occupe le bas, qui etait vide. */
.menu {
  background: var(--paper);
  color: var(--ink);
}
.menu::before {
  background:
    radial-gradient(62% 44% at 6% 0%, rgba(232, 160, 32, .22), transparent 64%),
    radial-gradient(54% 42% at 100% 100%, rgba(30, 60, 40, .12), transparent 68%);
}
.menu__top {
  border-bottom-color: rgba(26, 26, 24, .12);
}
.menu__top .icon-btn {
  border-color: rgba(26, 26, 24, .18);
  color: var(--ink);
  background: var(--surface);
}
.menu__top .icon-btn:hover { background: rgba(26, 26, 24, .06); }

.menu__nav a {
  color: var(--ink);
  border-bottom-color: rgba(26, 26, 24, .10);
}
.menu__rang { color: var(--gold-2); }
.menu__nav a .ico { color: rgba(26, 26, 24, .28); }
.menu__nav a:hover .ico { color: var(--gold-2); }
.menu__nav a[aria-current] { color: var(--ink); }
.menu__nav a[aria-current] .menu__rang,
.menu__nav a[aria-current] .ico { color: var(--gold-2); }

.menu__foot { border-top-color: rgba(26, 26, 24, .12); }
.menu__mail { color: var(--muted); }
.menu__mail:hover { color: var(--ink); }

/* La mascotte ferme le panneau. Elle est decorative : si la hauteur
   manque, elle disparait plutot que de pousser les boutons hors champ. */
.menu__phragy {
  display: block;
  width: clamp(96px, 30vw, 138px);
  height: auto;
  margin: .4rem auto -.6rem;
  pointer-events: none;
}
/* Le panneau depassait la hauteur de l'ecran d'une centaine de pixels :
   Phragy se retrouvait coupee et il fallait faire defiler pour la voir.
   On resserre l'espacement des entrees plutot que de la rapetisser — le
   menu tient alors d'un seul tenant sur un telephone courant. */
@media (max-height: 900px) {
  .menu__nav { padding-top: clamp(.6rem, 2vh, 1.2rem); }
  .menu__nav a { padding-block: clamp(.55rem, 1.7vh, .85rem); }
  .menu__foot { padding-top: clamp(.9rem, 2.4vh, 1.4rem); }
  .menu__phragy { width: clamp(84px, 24vw, 112px); margin-top: .1rem; }
}

/* Sous cette hauteur, meme resserre, il n'y a plus la place : la
   mascotte s'efface, elle est decorative. */
@media (max-height: 620px) {
  .menu__phragy { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PASSE MOBILE 2 — LES FONDS PHOTOGRAPHIQUES QUI DEBORDAIENT

   Sur telephone, trois defauts n'en faisaient qu'un.

   Les sections sur photographie agrandissent leur image de 18 % et la
   decalent de -9 % : le flou de 24 px doit deborder du cadre, sinon ses
   bords s'eclaircissent et laissent voir le graphite en dessous. Au
   pointeur fin, le « clip-path: inset(0) » du conteneur rattrapait ce
   debordement. Mais iOS gere mal « position: fixed » sous un clip-path,
   alors la regle tactile pose « clip-path: none » — et plus rien ne
   retenait l'image.

   Resultat sur un iPhone : l'image debordait par le haut et par le bas sur
   les sections cremes voisines (la bande orange floue en travers du
   texte), la ou elle ne couvrait pas il restait l'aplat « ink-deep » nu
   (les grosses bandes noires autour de la carte doree), et ses 118vw
   faisaient deriver la page lateralement.

   « overflow: clip » remplace le clip-path : il decoupe exactement pareil,
   iOS le gere sans defaut, et contrairement a « hidden » il ne cree pas de
   conteneur de defilement — les elements collants du site continuent de
   coller. L'image garde son debordement, mais a l'interieur du cadre.

   Ce bloc est en fin de fichier a dessein : « .section--photo
   .fond-fixe__img » (ligne ~3945) a la meme specificite que la regle
   tactile plus haut et l'emportait par l'ordre d'apparition. */
@media (hover: none), (pointer: coarse) {

  .fond-fixe {
    clip-path: none;
    overflow: clip;
  }

  .fond-fixe > .fond-fixe__img,
  .section--photo .fond-fixe__img {
    position: absolute;
    /* En pourcentages du cadre, plus en unites de fenetre : c'est ce qui
       liait la largeur de l'image a celle de l'ecran.

       « max-width: none » est indispensable : la regle generale
       « img { max-width: 100% } » ramenait l'image a la largeur du cadre
       alors qu'elle est decalee de -9 % vers la gauche. Il restait donc a
       droite une bande de graphite nu large de 9 % — l'une des « ombres
       noires » visibles sur telephone. */
    inset: -9%;
    width: 118%;
    max-width: none;
    height: 118%;
  }

  /* Le voile etait regle pour le grand ecran, ou l'image est fixe et
     defile derriere plusieurs sections : on la devine bouger, donc on peut
     l'assombrir beaucoup. Sur telephone l'image est immobile dans sa
     section, et a 93 % de noir il ne reste qu'un aplat mort — les
     « grosses bandes noires ». On l'allege assez pour que la matiere
     revienne, pas au point de fragiliser le texte pose dessus. */
  .section--photo::before {
    background: linear-gradient(180deg,
        rgba(18, 18, 16, .86), rgba(18, 18, 16, .66) 45%, rgba(18, 18, 16, .90));
  }

  /* Un voile plus clair, c'est un fond plus clair : le texte secondaire,
     pose a 52 % d'opacite, tombait a 3,9:1 alors que la regle en demande
     4,5. Mesure sur la composition reelle — image floue plus voile — et
     remonte au premier palier qui repasse au-dessus. */
  .section--photo .dim { color: rgba(244, 241, 234, .64); }
}

/* Filet contre la derive laterale, quelle que soit sa cause.
   « clip » et non « hidden » : hidden sur la racine fabrique un conteneur
   de defilement et casse « position: sticky » partout dans la page. */
html { overflow-x: clip; }


/* ── Le bas du menu, fini
   Phragy flottait au milieu d'un aplat creme, sans rien sous les pieds :
   le panneau avait l'air coupe avant sa fin. Une lueur doree tres douce
   lui sert de sol, et elle descend jusqu'au bord. */
.menu__foot { position: relative; }
.menu__phragy {
  position: relative;
  z-index: 1;
  /* Elle reste entiere : la tirer jusqu'au bord lui coupait les pieds,
     ce qui donnait exactement l'impression de panneau inacheve qu'on
     cherchait a corriger. C'est la lueur qui la pose, pas le rognage. */
  margin-bottom: 0;
}
.menu__foot::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(-1 * max(1.6rem, env(safe-area-inset-bottom)));
  translate: -50% 0;
  width: min(78%, 320px);
  height: clamp(60px, 14vh, 104px);
  background: radial-gradient(60% 100% at 50% 100%,
              rgba(232, 160, 32, .20), rgba(232, 160, 32, 0) 72%);
  pointer-events: none;
}
@media (max-height: 620px) {
  .menu__foot::after { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AVANT DE PARTIR
   Une seule boite, une seule fois. Elle se ferme par la croix, par le
   voile, par « non merci » et par Echap : quatre sorties pour une
   proposition qu'on n'a pas demandee. */
.sortie {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  place-items: center;
  padding: 1.25rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}
.sortie[hidden] { display: none; }

.sortie__voile {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 16, .58);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 320ms var(--doux, ease);
}
.sortie.est-la .sortie__voile { opacity: 1; }

.sortie__boite {
  position: relative;
  width: min(100%, 27rem);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  text-align: center;
  padding: 1.1rem 1.5rem 1.6rem;
  border-radius: var(--r, 16px);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(26, 26, 24, .10);
  box-shadow: 0 32px 70px -30px rgba(18, 18, 16, .55);
  opacity: 0;
  translate: 0 14px;
  transition: opacity 340ms var(--doux, ease), translate 420ms var(--doux, ease);
}
.sortie.est-la .sortie__boite { opacity: 1; translate: 0 0; }

.sortie__croix {
  position: absolute;
  top: .55rem;
  right: .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px : la cible reste prenable au pouce meme si la croix est petite. */
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(26, 26, 24, .5);
  cursor: pointer;
}
.sortie__croix:hover { background: rgba(26, 26, 24, .06); color: var(--ink); }

.sortie__phragy {
  width: clamp(104px, 30vw, 132px);
  height: auto;
  margin: .2rem auto .5rem;
}

.sortie__oeil {
  margin: 0 0 .3rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-2, #CC8813);
}
.sortie__titre {
  margin: 0 0 .5rem;
  font-size: clamp(1.35rem, 5.5vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.sortie__texte {
  margin: 0 0 1.2rem;
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(26, 26, 24, .70);
}
.sortie__texte strong { color: var(--ink); font-weight: 650; }

.sortie__actions { display: grid; gap: .55rem; }

.sortie__non {
  margin-top: .9rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .85rem;
  color: rgba(26, 26, 24, .48);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  /* Cible tactile pleine largeur, sans peser visuellement. */
  padding: .5rem 1rem;
  min-height: 44px;
}
.sortie__non:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .sortie__voile,
  .sortie__boite { transition: none; }
  .sortie__boite { translate: 0 0; }
}

/* ─────────────────────────────────────────────────────────────  VERROU DE DEFILEMENT ACCESSIBLE */
html.est-verrouille, body.est-verrouille {
  overflow: hidden !important;
  touch-action: none;
}

/* ─────────────────────────────────────────────────────────────  PAGINATION */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-top: 3rem;
  margin-bottom: 2.5rem;
}
.pagination__pages {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.pagination__num, .pagination__btn, .pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s var(--rebond);
  box-shadow: var(--ombre-sm);
}
.pagination__num {
  min-width: 40px;
  height: 40px;
  padding: 0 .7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: .9rem;
}
.pagination__num:hover {
  border-color: var(--gold);
  color: var(--gold-2);
  transform: translateY(-2px);
}
.pagination__num.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #FFF;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(189, 141, 51, .35);
}
.pagination__btn {
  height: 40px;
  padding: 0 1.1rem;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: .85rem;
  font-weight: 600;
}
.pagination__btn:hover {
  border-color: var(--gold);
  color: var(--gold-2);
  transform: translateY(-2px);
}
.pagination__btn--disabled {
  opacity: .4;
  pointer-events: none;
  box-shadow: none;
}
.pagination__dots {
  color: var(--muted);
  padding: 0 .3rem;
  font-size: .9rem;
}
.pagination__mobile-info {
  display: none;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: .4rem .9rem;
  border-radius: 99px;
}

@media (max-width: 640px) {
  .pagination {
    justify-content: space-between;
    width: 100%;
    gap: .5rem;
  }
  .pagination__pages {
    display: none;
  }
  .pagination__mobile-info {
    display: inline-block;
  }
  .pagination__btn {
    flex: 1;
    max-width: 130px;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────  BADGES FLOTTANTS HERO STYLE RESBOARD */
.hero__pack-wrap {
  position: relative;
  z-index: 30;
  display: block;
  overflow: visible;
  padding: 50px;
  margin: -50px;
}
.hero__badge-flottant {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1.2rem;
  border-radius: 20px;
  background: rgba(255, 248, 237, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 213, 192, 0.85);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(189, 141, 51, 0.15);
  color: var(--ink);
  pointer-events: none;
  transition: transform .3s var(--rebond);
  will-change: transform;
}
.hero__badge-flottant strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.2;
}
.hero__badge-flottant span {
  display: block;
  font-size: .76rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Square layout */
.hero__badge--square {
  flex-direction: column;
  align-items: flex-start;
  padding: 1.2rem;
  border-radius: 24px;
  width: max-content;
  min-width: 140px;
  max-width: 180px;
  text-align: left;
}
.hero__badge-chart {
  margin-bottom: 0.6rem;
  color: var(--gold);
}

/* Banner layout */
.hero__badge--banner {
  flex-direction: row;
  border-radius: 16px;
  padding: 1rem 1.4rem;
}
.hero__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(199, 154, 64, 0.15);
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Positioning & 3D Entrance Animations */
.hero__badge-flottant--1 {
  top: -44px;
  right: -50px;
  animation: badgeEnterRight 1s cubic-bezier(0.16, 1, 0.3, 1) both, flottaisonHero1 6s 1s ease-in-out infinite alternate;
}
.hero__badge-flottant--2 {
  bottom: -50px;
  left: -50px;
  animation: badgeEnterLeft 1s cubic-bezier(0.16, 1, 0.3, 1) both, flottaisonHero2 7s 1s ease-in-out infinite alternate;
}
.hero__badge-flottant--3 {
  top: 20%;
  left: -100px;
  animation: badgeEnterTop 1s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both, flottaisonHero1 6s 1.2s ease-in-out infinite alternate;
}
.hero__badge-flottant--4 {
  bottom: -10%;
  right: -140px;
  animation: badgeEnterTop 1s 0.4s cubic-bezier(0.16, 1, 0.3, 1) both, flottaisonHero2 7s 1.4s ease-in-out infinite alternate;
}

@keyframes flottaisonHero1 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes flottaisonHero2 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(12px) rotate(-1.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes badgeEnterLeft {
  0% { transform: translate3d(-100px, 0, -100px) rotateY(-20deg) rotateX(10deg); opacity: 0; }
  100% { transform: translate3d(0, 0, 0) rotateY(0) rotateX(0); opacity: 1; }
}
@keyframes badgeEnterRight {
  0% { transform: translate3d(100px, 0, -100px) rotateY(20deg) rotateX(10deg); opacity: 0; }
  100% { transform: translate3d(0, 0, 0) rotateY(0) rotateX(0); opacity: 1; }
}
@keyframes badgeEnterTop {
  0% { transform: translate3d(0, -60px, 50px) rotateX(30deg) scale(0.9); opacity: 0; }
  100% { transform: translate3d(0, 0, 0) rotateX(0) scale(1); opacity: 1; }
}

/* SVG icon animations */
.hero__badge-icon--spin svg {
  animation: badgeSpin 4s linear infinite;
}
.hero__badge-icon--pulse svg {
  animation: badgePulse 2.5s ease-in-out infinite;
}

@keyframes badgeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: .75; }
}

@media (max-width: 1280px) {
  .hero__badge-flottant { display: none; }
}