/* Patronyme, piste 15 Le Sceau crépuscule (charte v14 du 3 octobre 2026).
   Blanc 70 %, noir 20 %, gris clair 5 %, le dégradé 5 % (ouverture, transition, pied de page, un lien, une étiquette).
   Hanken Grotesk seule : le 500 en capitales pour les grands titres, le 500 et le 400 en bas de casse pour le reste,
   les étiquettes entre parenthèses. Pas de surlignage : le mot éteint passe en gris. */

@font-face{font-family:"Hanken Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2")}

:root{
  --blanc:#FFFFFF; --gris-clair:#F2F2F2; --noir:#1B1B1C; --gris:#848484;
  --orange:#C86237; --rouge:#A93428; --vieux-rouge:#954C4B; --prune:#693D4B; --aubergine:#472630; --nuit:#262536; --presque-noir:#14171F;
  --degrade-texte:linear-gradient(90deg, var(--orange), var(--rouge) 35%, var(--vieux-rouge) 65%, var(--prune));
  --f:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --marge:clamp(16px, 4vw, 60px);
  --goutt:20px;
  /* l’échelle de la charte (planche La typographie), ramenée au web */
  --t-demesure:clamp(52px, 12.4vw, 210px);
  --t-affiche:clamp(40px, 6.6vw, 104px);
  --t-capitales:clamp(36px, 5vw, 72px);
  --t-titre:clamp(28px, 3vw, 44px);
  --t-chapo:clamp(20px, 1.6vw, 24px);
  --t-texte:18px;
  --t-etiquette:13px;
  --section:clamp(96px, 11vw, 168px);
  /* une seule courbe pour tout le site : part vite, se pose lentement (comme chez Motto) */
  --ease:cubic-bezier(.19, 1, .22, 1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--blanc);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--blanc);color:var(--noir);font-family:var(--f);font-size:var(--t-texte);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}
p,li,figcaption{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* --- briques */
.wrap{padding-inline:var(--marge)}
.grille{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:var(--goutt)}
.grille > *{min-width:0}
.etiquette{font-size:var(--t-etiquette);font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.exergue{background:var(--degrade-texte);-webkit-background-clip:text;background-clip:text;color:var(--rouge);-webkit-text-fill-color:transparent}
.affiche{font-size:var(--t-affiche);font-weight:500;line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.capitales{font-size:var(--t-capitales);font-weight:500;line-height:1;letter-spacing:-.015em;text-transform:uppercase}
.titre{font-size:var(--t-titre);font-weight:500;line-height:1.12;letter-spacing:-.01em}
.chapo{font-size:var(--t-chapo);font-weight:500;line-height:1.35}
.texte{font-size:var(--t-texte);line-height:1.55}
.eteint{color:var(--gris)}
.lien{font-weight:500;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px;display:inline-flex;gap:.4em;align-items:center;transition:opacity .7s var(--ease)}
.lien:hover{opacity:.65}
.sym{width:20px;height:20px;flex:none;display:block;fill:currentColor}
.tete{display:flex;align-items:center;gap:12px;margin-bottom:28px}
section{padding-block:var(--section)}

/* --- apparition au défilement, discrète */
.js [data-apparait]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js [data-apparait].vu{opacity:1;transform:none}

/* --- le dégradé vivant : une seule surface, qui respire. L’image de la couverture reste dessous en secours. */
.sur-degrade{position:relative;color:var(--blanc);isolation:isolate}
.degrade-vivant{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
/* le grain, net, à la résolution de l’écran, posé sur le dégradé et sous le texte */
.sur-degrade::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:220px}

/* --- ouverture */
.ouv{min-height:100svh;display:flex;background:var(--nuit) url("../img/degrades/couverture.jpg") center/cover no-repeat}
.ouv-contenu{flex:1;display:flex;flex-direction:column}
.nav{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:30px}
.signature{display:inline-flex;align-items:center;gap:1px;font-size:26px;font-weight:400;line-height:1;text-decoration:none}
.signature .sym{width:19px;height:19px}
.nav ul{display:flex;gap:32px;font-size:15px;font-weight:500;align-items:center}
.nav ul a{text-decoration:none}
.nav ul a:hover{opacity:.7}
.ouv-corps{margin-top:auto;padding-bottom:clamp(32px, 4vw, 56px)}
.marque{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.marque .sym{width:14px;height:14px}
/* la promesse, en Affiche : deux lignes comme sur la planche Un nom qui travaille pour vous */
.promesse{font-size:clamp(40px, 8vw, 132px);font-weight:500;line-height:.95;letter-spacing:-.025em;text-transform:uppercase}
.promesse br.tel{display:none}
.nom{font-size:var(--t-demesure);font-weight:500;line-height:.86;letter-spacing:-.02em;text-transform:uppercase;display:flex;align-items:center;gap:.22em;white-space:nowrap}
.nom .sym{width:.42em;height:.42em}
.ouv-chapo{margin-top:clamp(36px, 4.5vw, 64px);font-size:clamp(22px, 2.3vw, 34px);font-weight:500;line-height:1.25;max-width:21em}
.ouv-bas{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(48px, 7vw, 104px)}
.ouv-liens{display:flex;flex-wrap:wrap;gap:16px 72px}

/* --- défilements (clients, logos, experts) */
.defile{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.defile.tient{cursor:grabbing}
.piste{display:flex;width:max-content;will-change:transform}
.defile img{-webkit-user-drag:none;pointer-events:none}

/* --- preuves */
.preuves{padding-block:clamp(80px, 9vw, 136px) 0}
.preuves-tete{align-items:end;row-gap:20px;margin-bottom:clamp(40px, 5vw, 72px)}
.preuves-tete > div{grid-column:1 / span 8}
.preuves-tete .capitales{margin-top:18px}
.preuves-tete .chapo{grid-column:9 / span 4;color:var(--gris)}
.clients .piste{gap:var(--goutt);padding-inline:var(--marge)}
.client{width:clamp(200px, 19vw, 300px)}
.client img{aspect-ratio:3/4;object-fit:cover;width:100%;filter:grayscale(1);background:var(--gris-clair)}
.client figcaption{margin-top:14px;font-size:16px;font-weight:500;line-height:1.3}
.client figcaption span{display:block;font-weight:400;color:var(--gris);font-size:14px;margin-top:3px}
.logos-bande{margin-top:clamp(64px, 7vw, 104px);border-block:1px solid var(--gris-clair)}
.logos{padding-block:26px}
.logos .piste{gap:clamp(56px, 6vw, 96px);align-items:center;padding-inline:28px}
/* chaque logo est un masque posé sur le même dégradé, calé sur la largeur de la bande : ils changent de teinte en passant */
.logo{display:block;flex:none;height:var(--h, 26px);width:calc(var(--h, 26px) * var(--r, 3));
  background:linear-gradient(90deg, var(--orange), var(--rouge) 30%, var(--vieux-rouge) 55%, var(--prune) 80%, var(--aubergine));background-size:var(--bande, 100vw) 100%;background-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}

/* --- les marques, en fin de page */
.marques{padding-block:0 var(--section)}
.logos-grille{display:grid;grid-template-columns:repeat(var(--colonnes, 5), minmax(0, 1fr));justify-items:start;align-items:center;gap:64px clamp(24px, 4vw, 64px);margin-top:40px;padding-top:40px;border-top:1px solid var(--gris)}

.logos-grille .logo{max-width:100%}

/* --- manifeste */
.manif .affiche{max-width:13em}
.manif-texte{margin-top:clamp(56px, 7vw, 112px);margin-left:auto;max-width:24em;font-size:clamp(24px, 2.5vw, 38px);font-weight:400;line-height:1.3;letter-spacing:-.01em}
.manif-texte p + p{margin-top:.9em}
.manif-texte strong{font-weight:600}
.manif-texte sup{font-size:.4em;vertical-align:.9em;margin-left:.15em}
.js .manif-texte .mot{transition:color .25s linear}
.js .manif-texte .mot:not(.allume){color:#CFCFCF}
.manif-note{margin:40px 0 0 auto;max-width:calc(24 * clamp(24px, 2.5vw, 38px));font-size:13px;color:var(--gris)}
.manif-fin{margin-top:clamp(64px, 8vw, 128px);padding-top:28px;border-top:1px solid var(--noir);align-items:start;row-gap:24px}
.manif-fin .titre{grid-column:1 / span 7}
.manif-signe{grid-column:9 / span 4;font-weight:500}
.manif-signe span{display:block;color:var(--gris);font-weight:400}
.manif-signe .note{margin-top:20px;font-size:13px;color:var(--gris);font-weight:400}

/* --- la méthode : trois plans, votre nom à l’intersection (le dessin reste, les étapes défilent) */
.conf-titre{max-width:16em}
.conf-corps{margin-top:clamp(24px, 3vw, 48px);align-items:start}
.conf-etapes{grid-column:1 / span 5;list-style:none;margin:0;padding:0}
.conf-etape{min-height:78vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .5s var(--ease)}
.js .conf-etape:not(.actif){opacity:.22}
.conf-etape .titre{margin-top:14px}
.conf-etape .texte{margin-top:18px;max-width:26em}
.conf-avec{margin-top:22px;font-weight:500;max-width:26em}
.conf-avec span{display:block;margin-bottom:4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.conf-dessin{grid-column:7 / span 6;position:sticky;top:calc(50vh - min(40vh, 300px));height:min(80vh, 600px)}
.conf-dessin svg{width:100%;height:100%;display:block;overflow:visible}
#plans .plan{fill:transparent;stroke:#CFCFCF;stroke-width:1.5;transition:fill .6s var(--ease), stroke .6s var(--ease)}
#plans .plan.vu{stroke:var(--noir)}
#plans .plan.actif{fill:rgba(27,27,28,.06);stroke:var(--noir)}
#plans .coeur{fill:#CFCFCF;transition:fill .6s var(--ease)}
#plans .coeur.vu{fill:var(--noir)}
#plans .coeur-degrade{opacity:0;transition:opacity .9s var(--ease)}
#plans .coeur-degrade.vu{opacity:1}
#plans text{font-family:var(--f);font-weight:500;letter-spacing:.08em}
#plans .nom{font-size:15px;fill:#fff}
#plans .etiq{font-size:16px;fill:#B5B5B5;transition:fill .6s var(--ease)}
#plans .etiq.vu{fill:var(--noir)}

.conf-services{list-style:none;margin:20px 0 0;padding:0;max-width:26em}
.conf-services li{padding:7px 0;border-top:1px solid #E4E4E4;font-size:15px;white-space:nowrap}
.conf-services li:last-child{border-bottom:1px solid #E4E4E4}

/* --- les moments : trois petits graphiques annotés (à la manière de FNDR), le tracé se dessine à l’apparition */
.moments-grille{margin-top:clamp(48px, 6vw, 88px);display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:var(--goutt);row-gap:64px}
.moment{display:flex;flex-direction:column}
.graphe{width:100%;height:auto;display:block;margin-bottom:28px;overflow:visible}
.graphe .b-plein{fill:url(#hach);stroke:var(--noir);stroke-width:1.4;stroke-linejoin:round}
.graphe .b-futur{fill:none;stroke:var(--noir);stroke-width:1.2;stroke-dasharray:4 5;stroke-linejoin:round}
.graphe .b-cache{fill:none;stroke:#C4C4C4;stroke-width:1.2;stroke-dasharray:4 5;stroke-linejoin:round}
.graphe .g-fleche{fill:none;stroke:var(--noir);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.graphe text{font-family:var(--f);font-size:12px;font-weight:500;fill:var(--noir)}
.graphe .g-ici{font-weight:400}
.js .moment polygon{transform-origin:center bottom;transform-box:fill-box;transition:transform .9s var(--ease), opacity .6s ease}
.js .moment:not(.vu) polygon{transform:scaleY(.2);opacity:0}
.js .moment polygon:nth-of-type(2){transition-delay:.12s}
.js .moment polygon:nth-of-type(3){transition-delay:.24s}
.js .moment text,.js .moment .g-fleche{transition:opacity .5s ease .7s}
.js .moment:not(.vu) text,.js .moment:not(.vu) .g-fleche{opacity:0}
.moment-titre{font-size:var(--t-titre);font-weight:500;line-height:1.1;letter-spacing:-.01em;margin:0 0 clamp(24px, 3vw, 40px)}
.moment .graphe{margin-bottom:24px}
.graphe .g-ici{font-size:13px}
.moments-pied{margin-top:clamp(40px, 5vw, 72px);max-width:34em;font-size:var(--t-chapo);line-height:1.4}
.moment .titre span,.p-etape .titre{font-size:clamp(32px, 4.2vw, 64px);line-height:1.05;letter-spacing:-.02em}
.p-etape .titre span{color:var(--gris);margin-right:.45em}
.moment .texte{margin-top:14px;max-width:26em}

/* --- le quoi : l’écart entre ce que vous valez et ce qu’on sait de vous */
.ecart-corps{margin-top:clamp(24px, 3vw, 48px);align-items:center;row-gap:40px}
.ecart-texte{grid-column:1 / span 5}
.ecart-texte .chapo{margin-top:24px;font-weight:400;max-width:24em}
.graphe-ecart{grid-column:7 / span 6;width:100%;height:auto;overflow:visible}
.graphe-ecart .e-aire{fill:url(#hach);opacity:.55}
.graphe-ecart .e-axe{stroke:var(--noir);stroke-width:1}
.graphe-ecart .e-vaut,.graphe-ecart .e-sait{fill:none;stroke:var(--noir);stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:0}
.graphe-ecart .e-sait{stroke:#8A8A8A}
.graphe-ecart .e-futur{fill:none;stroke:var(--noir);stroke-width:1.6;stroke-dasharray:5 6}
.graphe-ecart .e-auj{stroke:var(--noir);stroke-width:1;stroke-dasharray:2 4}
.graphe-ecart .e-point{fill:var(--noir)}
.graphe-ecart text{font-family:var(--f);font-size:14px;font-weight:500;fill:var(--noir)}
.graphe-ecart .e-gris{fill:var(--gris)}
.graphe-ecart .e-leger{font-weight:400;fill:var(--gris);font-size:13px}
.graphe-ecart .e-ecart{font-size:15px}
.graphe-ecart .e-fin{font-size:15px}
.js .ecart-corps:not(.vu) .e-vaut,.js .ecart-corps:not(.vu) .e-sait{stroke-dashoffset:1}
.js .ecart-corps .e-vaut,.js .ecart-corps .e-sait{transition:stroke-dashoffset 1.6s var(--ease) .2s}
.js .ecart-corps .e-aire,.js .ecart-corps .e-ecart{transition:opacity .8s ease 1.2s}
.js .ecart-corps:not(.vu) .e-aire,.js .ecart-corps:not(.vu) .e-ecart{opacity:0}
.js .ecart-corps .e-futur,.js .ecart-corps .e-point,.js .ecart-corps .e-fin{transition:opacity .8s ease 1.9s}
.js .ecart-corps:not(.vu) .e-futur,.js .ecart-corps:not(.vu) .e-point,.js .ecart-corps:not(.vu) .e-fin{opacity:0}
.ecart-pied{margin-top:clamp(48px, 6vw, 88px);max-width:40em;color:var(--gris);font-size:var(--t-chapo);line-height:1.4}

/* --- le parcours : une ligne, quatre stations, un repère « vous êtes ici » qui avance au défilement */
.parcours{padding:0;height:280vh;position:relative}
.parcours-scene{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(36px, 6vh, 72px)}
.ligne-parcours{position:relative;height:110px;--p:0%}
.rail{position:absolute;left:0;right:0;top:40px;height:1px;background:#CFCFCF}
.rail::after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-top:1px solid #CFCFCF;border-right:1px solid #CFCFCF;transform:rotate(45deg)}
.rail-fait{height:100%;width:var(--p);background:var(--noir)}
.station{position:absolute;left:var(--x);top:33px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;font-weight:500;color:#B5B5B5;white-space:nowrap;transition:color .4s var(--ease)}
.station::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--blanc);border:1px solid #CFCFCF;box-sizing:border-box;margin-bottom:10px;transition:background .4s var(--ease), border-color .4s var(--ease)}
.station b{font-weight:500;color:inherit}
.station.passe{color:var(--noir)}
.station.passe::before{background:var(--noir);border-color:var(--noir)}
.bout{position:absolute;top:82px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.bout-g{left:0}.bout-d{right:0}
.repere{position:absolute;left:var(--p);top:40px;transform:translate(-50%, -50%);z-index:2;pointer-events:none}
.repere i{display:block;width:22px;height:22px;border-radius:50%;background:var(--noir);box-shadow:0 0 0 6px rgba(27,27,28,.1)}
.repere em{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);font-style:normal;font-size:13px;white-space:nowrap;color:var(--noir)}
.parcours-etapes{list-style:none;margin:0;padding:0;display:grid;max-width:48em}
.collectif .affiche{max-width:13em}
.probleme{background:var(--gris-clair)}
.probleme-corps{align-items:end;row-gap:24px}
.probleme-titre{grid-column:1 / span 6;font-size:clamp(32px, 4vw, 60px);line-height:1.05;letter-spacing:-.02em}
.probleme-fin{grid-column:8 / span 5;font-weight:400;max-width:24em}
.consequences{list-style:none;margin-top:clamp(56px, 7vw, 104px);padding-bottom:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:var(--goutt);row-gap:40px}
.consequences.trois{grid-template-columns:repeat(3, minmax(0, 1fr))}
.consequences.deux{grid-template-columns:repeat(2, minmax(0, 1fr));max-width:none}
/* chiffres et preuves : le chiffre en grand à la place du titre (11 novembre 2026) */
.consequences.chiffres h3{font-size:clamp(34px, 3.6vw, 56px);font-weight:500;letter-spacing:-.02em;line-height:1}
.consequences.chiffres p{max-width:24em}
.manif .chiffres{margin-top:clamp(56px, 6vw, 96px);padding-inline:0}
.collectif .consequences{margin-top:clamp(48px, 5vw, 80px)}
.experts-section .chiffres{margin-top:clamp(48px, 5vw, 80px);margin-bottom:clamp(56px, 6vw, 96px)}
.experts-section .probleme-corps{margin-top:8px}
.experts-section .coll-rejoint{margin-top:clamp(32px, 4vw, 56px);margin-bottom:0}
.pour-qui{padding-top:clamp(64px, 7vw, 110px)}
.pour-qui .tete{margin-bottom:24px}
.consequences li{border-left:1px solid var(--noir);padding-left:18px}
.consequences h3{margin:0;font-size:18px;font-weight:500;line-height:1.3}
.consequences p{margin-top:12px;font-size:15px;line-height:1.5;color:#4A4A4A}
.js .consequences li:nth-child(2){transition-delay:.1s}
.js .consequences li:nth-child(3){transition-delay:.2s}
.js .consequences li:nth-child(4){transition-delay:.3s}
.patron{margin-top:clamp(72px, 9vw, 136px);padding-top:28px;border-top:1px solid var(--noir);row-gap:20px;align-items:start}
.patron .tete{grid-column:1 / -1;margin-bottom:0}
.patron .titre{grid-column:1 / span 6}
.patron .chapo{grid-column:8 / span 5;font-weight:400}
.patron-section{background:var(--gris-clair)}
.patron-haut{align-items:center;row-gap:48px}
.patron-texte{grid-column:1 / span 6}
.patron-texte .chapo{margin-top:24px;font-weight:400;max-width:26em}
.fiche{grid-column:8 / span 5;background:var(--blanc);border:1px solid var(--noir);padding:clamp(20px, 2.4vw, 32px);box-shadow:12px 12px 0 rgba(27,27,28,.08)}
.fiche-tete,.fiche-pied{display:flex;justify-content:space-between;gap:16px;margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.fiche-tete{padding-bottom:16px;border-bottom:1px solid var(--noir)}
.fiche-tete span:last-child,.fiche-pied{color:var(--gris)}
.fiche ul{list-style:none;margin:0;padding:0}
.fiche li{display:flex;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid #E1E1E1;font-size:15px;font-weight:500}
.fiche li span{flex:none;width:12em}
.fiche li i{flex:1;height:7px;border-radius:4px;background:#E6E6E6;position:relative;overflow:hidden}
.fiche li i::after{content:"";position:absolute;inset:0;background:var(--noir);transform-origin:left;transform:scaleX(var(--r, .7))}
.fiche li:nth-child(1) i{--r:.92}.fiche li:nth-child(2) i{--r:.78}.fiche li:nth-child(3) i{--r:.86}.fiche li:nth-child(4) i{--r:.64}.fiche li:nth-child(5) i{--r:.72}.fiche li:nth-child(6) i{--r:.55}
.js .fiche li i::after{transition:transform 1.2s var(--ease) .3s}
.js .fiche:not(.vu) li i::after{transform:scaleX(0)}
.fiche-pied{padding-top:16px}
.reponses{list-style:none;margin:clamp(56px, 7vw, 104px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:var(--goutt);row-gap:40px}
.reponses li{border-left:1px solid var(--noir);padding-left:18px}
.reponses h3{margin:0;font-size:18px;font-weight:500;line-height:1.3}
.reponses p{margin-top:12px;font-size:15px;line-height:1.5;color:#4A4A4A}
.js .reponses li:nth-child(2){transition-delay:.1s}
.js .reponses li:nth-child(3){transition-delay:.2s}
.js .reponses li:nth-child(4){transition-delay:.3s}
.patron-fin{margin-top:clamp(40px, 5vw, 64px);font-size:var(--t-chapo);font-weight:500;max-width:34em}
.equipe{padding-block:var(--section) clamp(48px, 5vw, 72px)}
.benef-tete{row-gap:24px;align-items:end;margin-bottom:clamp(40px, 5vw, 72px)}
.benef-tete .titre{grid-column:1 / span 6}
.benef-tete .chapo{grid-column:8 / span 5;font-weight:400}
.coll-rejoint{margin-top:clamp(64px, 8vw, 120px);margin-bottom:28px}
.sol-tete{row-gap:24px;align-items:end;margin-bottom:clamp(56px, 7vw, 104px)}
.sol-tete .titre{grid-column:1 / span 6;font-size:clamp(32px, 4vw, 60px);line-height:1.05;letter-spacing:-.02em}
.sol-tete .chapo{grid-column:8 / span 5;font-weight:400}
.p-etape{grid-area:1 / 1;opacity:0;transition:opacity .45s ease}
.p-etape.actif{opacity:1}
.p-etape .titre{font-size:clamp(32px, 4.2vw, 64px);line-height:1.05;letter-spacing:-.02em}
.p-etape .titre span{color:var(--gris);margin-right:.45em}
.p-etape .texte{margin-top:20px;max-width:30em;font-size:var(--t-chapo);line-height:1.4}
.p-etape .etape-recu{margin-top:22px;padding-top:0}
.parcours-pied{color:var(--gris);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
.parcours-pied .lien{color:var(--noir)}

/* --- la méthode : trois questions, trois colonnes sous un filet */
.methode-tete{row-gap:20px;align-items:end}
.methode-tete .titre{grid-column:1 / span 6}
.methode-tete .texte{grid-column:7 / span 5;color:var(--gris)}
.etapes{list-style:none;margin:clamp(48px, 6vw, 88px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:var(--goutt)}
.etape{border-top:1px solid var(--noir);padding-top:22px;display:flex;flex-direction:column}
.etape-haut{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(40px, 5vw, 72px)}
.etape-num{font-size:clamp(48px, 5vw, 80px);font-weight:500;line-height:1;letter-spacing:-.02em}
.etape-haut .sym{width:22px;height:22px;transition:transform .8s var(--ease)}
.etape:hover .etape-haut .sym{transform:rotate(120deg)}
.etape .titre{margin-top:12px}
.etape .texte{margin-top:16px;max-width:24em}
.etape-recu{margin-top:auto;padding-top:28px;font-weight:500;max-width:24em}
.etape-recu span{display:block;margin-bottom:6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);font-weight:500}

/* --- la réponse : une grande image */
.reponse{padding-top:0}
.image-pleine{margin-inline:calc(-1 * var(--marge));overflow:hidden;aspect-ratio:2/1}
.image-pleine img{width:100%;height:118%;object-fit:cover;will-change:transform}
.parti-pris{margin-top:clamp(56px, 7vw, 104px)}
.parti-pris .grille{row-gap:28px;align-items:end}
.parti-pris .titre{grid-column:1 / span 6}
.parti-pris .chapo{grid-column:7 / span 6;font-weight:400}

/* --- la méthode : trois questions, jouées au défilement */
.schema{padding:0;height:400vh;position:relative}
.methode-tete{padding-top:var(--section)}
.schema-scene{position:sticky;top:0;height:100vh;height:100svh;align-items:center;overflow:hidden}
.schema-texte{grid-column:1 / span 6;display:grid}
.etat{grid-area:1 / 1;transition:opacity .45s ease;opacity:0}
#etat-1{opacity:1}
.etat .titre{margin-top:18px}
.etat .texte{margin-top:20px;max-width:26em}
.schema-dessin{grid-column:7 / span 6;height:min(86vh, 760px)}
.schema-dessin svg{width:100%;height:100%;display:block;overflow:visible}
.schema-dessin text{font-family:var(--f)}
.progression{position:absolute;left:var(--marge);bottom:28px;color:var(--gris);transition:opacity .3s}

/* --- bénéfices (planche Trois métiers : filet, titre, numéro gris) */
.benefices{background:var(--gris-clair)}
.benef-grille{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:64px var(--goutt);margin-top:clamp(56px, 6vw, 96px)}
.benef{border-top:1px solid var(--gris);padding-top:20px}
.benef-tete{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.benef h3{font-size:clamp(19px, 1.5vw, 22px);font-weight:500;line-height:1.2}
.benef-tete span{font-size:clamp(19px, 1.5vw, 22px);color:var(--gris);font-variant-numeric:tabular-nums}
.benef p{margin-top:18px;max-width:23em}

/* --- la bande de mots */
.bande-mots{padding-block:clamp(80px, 9vw, 140px) 0;overflow:hidden}
.rangee{font-size:clamp(64px, 10vw, 156px);font-weight:500;line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;will-change:transform}
.rangee .sym{display:inline-block;width:.5em;height:.5em;margin-inline:.22em;vertical-align:.08em}

/* --- le collectif */
.collectif{padding-block:clamp(64px, 7vw, 104px) clamp(48px, 5vw, 72px)}
.coll-tete{align-items:end;row-gap:24px;margin-bottom:clamp(48px, 5vw, 80px)}
.coll-tete .titre{grid-column:1 / span 7}
.coll-tete .texte{grid-column:8 / span 5}
.experts + .experts{margin-top:40px}
.experts .piste{gap:var(--goutt);padding-inline:var(--marge)}
.expert{width:clamp(150px, 13vw, 210px)}
.expert img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:grayscale(1);background:var(--gris-clair)}
.expert figcaption{margin-top:12px;font-size:15px;font-weight:500;line-height:1.3}
.expert figcaption span{display:block;font-weight:400;color:var(--gris);font-size:14px;margin-top:2px}
.horizon{margin-top:clamp(56px, 6vw, 88px);display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;border-top:1px solid var(--gris);padding-top:20px}
.horizon-chiffre{font-size:var(--t-titre);font-weight:500;line-height:1.1}
.horizon-texte{color:var(--gris)}

/* --- les métiers (planche Nos expertises : une seule allumée, les autres éteintes) */
.metiers .filet-haut{row-gap:56px}
.met-gauche{grid-column:1 / span 5}
.met-gauche .texte{margin-top:24px;max-width:24em}
.met-liste{grid-column:7 / span 6;border-bottom:1px solid var(--gris)}
.met{border-top:1px solid var(--gris)}
.met h3{font-size:var(--t-titre);font-weight:500;line-height:1.1}
.met button{all:unset;display:block;width:100%;padding-block:22px;cursor:pointer;color:var(--gris);transition:color .3s}
.met button:focus-visible{outline:2px solid var(--noir);outline-offset:4px}
.met.ouvert button,.met button:hover{color:var(--noir)}
.met-corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.met-corps > div{overflow:hidden}
.met.ouvert .met-corps{grid-template-rows:1fr}
.met-corps p{max-width:26em}
/* une ligne par service, jamais un service sur deux lignes */
.met-corps ul{display:grid;grid-template-columns:1fr;gap:8px;margin-block:22px 30px;color:var(--gris);font-size:16px}
.met-corps li{white-space:nowrap;overflow:hidden;text-overflow:clip}

/* --- les fondateurs (planche des deux associés) */
.fond-duo{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 55%;margin-top:clamp(48px, 5vw, 72px)}
.fond-grille{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:56px var(--goutt);margin-top:clamp(48px, 5vw, 72px)}
.fond img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 25%}
.fond-tete{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px}
.fond h3{font-size:18px;font-weight:500}
.fond-tete span{font-size:15px;font-weight:500;text-transform:uppercase}
.fond .role{margin-top:2px}
.fond ul{margin-top:20px;border-top:1px solid var(--gris)}
.fond li{padding-block:11px;border-bottom:1px solid var(--gris);font-size:16px}

/* --- appel final et pied de page : une seule surface */
.final{background:var(--nuit) url("../img/degrades/couverture.jpg") center/cover no-repeat}
.appel{padding-block:clamp(120px, 13vw, 200px) clamp(72px, 8vw, 120px)}
.appel-ligne{display:flex;gap:clamp(20px, 2.5vw, 40px);align-items:flex-start}
.appel-ligne > div{flex:1;min-width:0}
.appel-siege{flex:none;width:42%;margin:0;align-self:center}
.appel-siege img{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 70%}
.cercle{flex:none;width:clamp(44px, 4vw, 64px);height:clamp(44px, 4vw, 64px);border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;margin-top:.4vw}
.cercle .sym{width:44%;height:44%}
.appel-etiq{margin-bottom:20px}
.appel .affiche{max-width:11em}
.appel .chapo{margin-top:32px;max-width:27em}
.appel .lien{margin-top:36px;font-size:19px}
.appel-contact{display:flex;gap:20px;align-items:center;margin-top:48px}
.appel-contact img{flex:none;width:clamp(80px, 7vw, 104px);aspect-ratio:1;height:auto;object-fit:cover;object-position:50% 25%}
.appel-nom{font-size:clamp(20px, 1.8vw, 26px);font-weight:500;margin-top:8px;line-height:1.2}
.appel-role{font-size:16px;margin-top:2px}

.pied{padding-block:0 28px;overflow:hidden}
.pied-haut{row-gap:48px;padding-top:24px}
.pied-haut ul{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 32px;font-size:16px;font-weight:500}
.pied-haut a{text-decoration:none}
.pied-haut a:hover{opacity:.7}
.nl{grid-column:8 / span 5}
.nl label{display:block;font-weight:500;max-width:26em}
.nl-champ{display:flex;gap:16px;align-items:flex-end;border-bottom:1.5px solid currentColor;margin-top:22px}
.nl input{flex:1;min-width:0;background:transparent;border:0;border-radius:0;color:inherit;font:inherit;padding:8px 0;outline:none}
.nl input::placeholder{color:inherit;opacity:.85}
.nl button{background:none;border:0;padding:8px 0;cursor:pointer;font-size:20px}
.nl-msg{margin-top:10px;font-size:14px;min-height:1.5em}
/* le nom rempli de sa matière (planche de fin) */
.pied-nom{font-size:17vw;font-weight:600;line-height:1.02;letter-spacing:-.03em;margin-top:clamp(32px, 4vw, 64px);white-space:nowrap}
.pied-nom span{display:inline-block;background:linear-gradient(90deg, #A3A0AC 0%, #C9A9AD 28%, #F3E6E1 58%, #F5D6C5 78%, #E59D7B 100%);-webkit-background-clip:text;background-clip:text;color:#F3E6E1;-webkit-text-fill-color:transparent}
.pied-bas{display:grid;grid-template-columns:repeat(4, auto);justify-content:space-between;gap:16px;border-top:1px solid currentColor;padding-top:16px;margin-top:28px;font-size:14px}
.pied-bas a{text-decoration:none}

/* --- page simple (mentions) */
.simple{max-width:46em;padding-block:48px 120px}
.simple .signature{color:var(--noir)}
.simple h1{font-size:var(--t-capitales);font-weight:500;text-transform:uppercase;line-height:1;margin-block:56px 40px}
.simple h2{font-size:22px;font-weight:500;margin-top:40px}
.simple p{margin-top:12px}
.simple .a-remplir{background:var(--gris-clair);padding:0 .25em}

/* --- tablette et téléphone */
@media (max-width:1000px){
  .appel-ligne{flex-wrap:wrap}
  .appel-siege{width:100%;margin-top:24px}
  .appel-siege img{aspect-ratio:3/2}
  .pied-haut ul{justify-content:flex-start}
  .preuves-tete > div,.preuves-tete .chapo{grid-column:1 / -1}
  .probleme-titre,.probleme-fin,.patron .titre,.patron .chapo,.benef-tete .titre,.benef-tete .chapo,.sol-tete .titre,.sol-tete .chapo,.manif-fin .titre,.manif-signe,.methode-tete .titre,.methode-tete .texte,.coll-tete .titre,.coll-tete .texte,.met-gauche,.met-liste{grid-column:1 / -1}
  .benef-grille{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .etapes{grid-template-columns:1fr;row-gap:56px}
  .moments-grille{grid-template-columns:1fr}
  .consequences,.consequences.trois,.reponses{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .patron-texte,.fiche{grid-column:1 / -1}
  .ecart-texte,.graphe-ecart{grid-column:1 / -1}
  .graphe{max-width:420px}
  .conf-etapes{grid-column:1 / -1;order:2}
  .conf-dessin{grid-column:1 / -1;order:1;top:56px;height:38vh;z-index:2;background:var(--blanc);padding-block:12px}
  .conf-etape{min-height:56vh}
  .station{font-size:0;gap:0}
  .station b{font-size:14px}
  .bout{display:none}
  .etape-haut{margin-bottom:28px}
  .schema-scene{align-content:center;row-gap:16px}
  .schema-texte,.schema-dessin{grid-column:1 / -1}
  .schema-dessin{height:52vh}
  .pied-haut ul,.nl{grid-column:1 / -1}
}
@media (max-width:1000px){
  .logos-grille{grid-template-columns:repeat(4, minmax(0, 1fr));gap:44px 24px}
}
@media (max-width:640px){
  .promesse br.tel{display:inline}
  .promesse br.ordi{display:none}
  .logos-grille{grid-template-columns:repeat(3, minmax(0, 1fr));gap:36px 20px}
  .nav ul li:not(:last-child){display:none}
  .ouv-bas .etiquette{display:none}
  .ouv-liens{flex-direction:column;gap:18px}
  .benef-grille,.fond-grille{grid-template-columns:1fr}
  .consequences,.consequences.trois,.consequences.deux,.reponses{grid-template-columns:1fr}
  .fiche li span{width:auto;flex:1}
  .fiche li i{flex:0 0 30%}
  .image-pleine{aspect-ratio:4/3}
  .etat .titre{font-size:26px}
  .pied-bas{grid-template-columns:repeat(2, auto)}
}
@media (prefers-reduced-motion:reduce){
  .js [data-apparait]{opacity:1;transform:none;transition:none}
  .schema{height:auto}
  .schema-scene{position:relative;height:auto;padding-block:var(--section)}
  .etat{transition:none;grid-area:auto;opacity:1;margin-bottom:48px}
  .js .conf-etape:not(.actif){opacity:1}
  .parcours{height:auto}
  .parcours-scene{position:relative;height:auto;padding-block:var(--section)}
  .p-etape{grid-area:auto;opacity:1;margin-bottom:40px}
  .conf-etape{min-height:0;padding-block:28px}
  .progression{display:none}
  .defile{overflow-x:auto;cursor:auto}
  .image-pleine img{height:100%}
}

/* --- la seconde rangée de clients : les visages nommés de la slide « Ils nous ont fait confiance » */
.references{margin-top:40px}
.references .piste{gap:var(--goutt);padding-inline:var(--marge)}
.reference{width:clamp(130px, 11vw, 160px)}
.reference img{aspect-ratio:1;object-fit:cover;width:100%;filter:grayscale(1);background:var(--gris-clair)}
.reference figcaption{margin-top:12px;font-size:14px;font-weight:500;line-height:1.3}
.reference figcaption span{display:block;font-weight:400;color:var(--gris);font-size:13px;margin-top:2px}

/* les plus petits téléphones : chaque service tient encore sur une ligne */
@media (max-width:360px){ .met-corps ul{font-size:15px} }


/* --- défilement adouci (Lenis) */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}

/* --- l'en-tête compact : le nom et l'unique action, toujours à portée une fois l'ouverture passée */
.bandeau{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--blanc);color:var(--noir);border-bottom:1px solid var(--gris-clair);transform:translateY(-101%);visibility:hidden;transition:transform .8s var(--ease), visibility 0s .8s}
.bandeau.visible{transform:none;visibility:visible;transition:transform .8s var(--ease)}
.bandeau-ligne{display:flex;justify-content:space-between;align-items:center;height:64px}
.bandeau .lien{font-size:15px}

/* --- l'ouverture en mouvement : Rayonner tourne, la promesse monte ligne par ligne sur des filets qui se tracent */
.ouv .marque .sym{animation:tourne 1.6s var(--ease) both}
@keyframes tourne{from{transform:rotate(-180deg)}to{transform:none}}
.promesse.decoupee .ligne{display:block;position:relative;overflow:hidden;padding-block:.06em .1em}
.promesse.decoupee .ligne::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.promesse.decoupee .ligne-texte{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.promesse.joue .ligne::after{transform:none}
.promesse.joue .ligne-texte{transform:none}
.promesse.joue .ligne:nth-child(2)::after,.promesse.joue .ligne:nth-child(2) .ligne-texte{transition-delay:.12s}
.promesse.joue .ligne:nth-child(3)::after,.promesse.joue .ligne:nth-child(3) .ligne-texte{transition-delay:.24s}
.promesse.joue .ligne:nth-child(4)::after,.promesse.joue .ligne:nth-child(4) .ligne-texte{transition-delay:.36s}
.js .ouv-chapo,.js .ouv-bas{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .45s, transform 1s var(--ease) .45s}
.js .entree-jouee .ouv-chapo,.js .entree-jouee .ouv-bas{opacity:1;transform:none}
.js .entree-jouee .ouv-bas{transition-delay:.6s}

/* --- l'image du studio : petite au centre, elle s'ouvre jusqu'au plein écran au défilement */
.ouverture-image{position:relative;height:220vh;margin-inline:calc(-1 * var(--marge))}
.ouverture-scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ouverture-scene img{width:100%;height:100%;object-fit:cover;clip-path:inset(var(--iy, 30%) var(--ix, 34%));transform:scale(var(--ech, 1.12));will-change:clip-path, transform}

@media (prefers-reduced-motion:reduce){
  .ouv .marque .sym{animation:none}
  .promesse.decoupee .ligne-texte,.promesse.decoupee .ligne::after{transform:none;transition:none}
  .js .ouv-chapo,.js .ouv-bas{opacity:1;transform:none;transition:none}
  .ouverture-image{height:auto}
  .ouverture-scene{position:relative;height:auto;aspect-ratio:2/1}
  .ouverture-scene img{clip-path:none;transform:none}
  .bandeau{transition:none}
}

/* la promesse reste cachée le temps de la découper en lignes, pour éviter un flash */
.js .promesse:not(.decoupee){visibility:hidden}
@media (prefers-reduced-motion:reduce){ .js .promesse:not(.decoupee){visibility:visible} }

/* --- les bénéfices : une liste en grand, un bénéfice allumé à la fois, les autres éteints (planche Nos expertises) */
.benef-liste{margin-top:clamp(56px, 6vw, 96px);border-bottom:1px solid var(--gris)}
.benef-ligne{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:var(--goutt);align-items:baseline;padding-block:clamp(26px, 2.8vw, 44px);border-top:1px solid var(--gris);color:var(--noir);transition:color .7s var(--ease)}
.js .benef-ligne{color:var(--gris)}
.js .benef-ligne.allume{color:var(--noir)}
.benef-num{grid-column:1 / span 1;font-size:var(--t-chapo);font-weight:500;font-variant-numeric:tabular-nums}
.benef-ligne h3{grid-column:2 / span 7;font-size:clamp(28px, 3.7vw, 58px);font-weight:500;line-height:1.04;letter-spacing:-.018em}
.benef-ligne p{grid-column:10 / span 3;font-size:16px;line-height:1.5}
@media (max-width:1000px){
  .benef-ligne h3{grid-column:2 / span 11}
  .benef-ligne p{grid-column:2 / span 10;margin-top:14px}
}
@media (max-width:640px){
  .benef-num{grid-column:1 / -1;font-size:15px;margin-bottom:10px}
  .benef-ligne h3,.benef-ligne p{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){ .js .benef-ligne{color:var(--noir);transition:none} }

/* le numéro de la ligne allumée prend le dégradé, en exergue */
.js .benef-ligne.allume .benef-num{background:var(--degrade-texte);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* --- les bénéfices en cartes (planche Nos offres) : blanc sur gris clair, symbole en exergue qui tourne au survol */
.cartes-benef{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--goutt);margin-top:clamp(48px, 5vw, 80px)}
.carte-benef{background:var(--blanc);padding:clamp(28px, 2.6vw, 40px);display:flex;flex-direction:column;min-height:clamp(260px, 22vw, 320px);transition:transform .9s var(--ease)}
.carte-benef:hover,.js .carte-benef.vu:hover{transform:translateY(-6px) scale(1.02)}
.carte-benef .sym{width:26px;height:26px;fill:var(--rouge);transition:transform 1.1s var(--ease)}
.carte-benef:hover .sym{transform:rotate(120deg)}
.carte-benef.vu .sym{animation:tiers 1.4s var(--ease) .2s backwards}
@keyframes tiers{from{transform:rotate(-120deg)}to{transform:none}}
.carte-benef h3{font-size:clamp(22px, 2vw, 30px);font-weight:500;line-height:1.12;letter-spacing:-.01em;margin-top:auto;padding-top:48px}
.carte-benef p{margin-top:16px;color:var(--gris);font-size:16px;line-height:1.5}
@media (max-width:1000px){ .cartes-benef{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:640px){ .cartes-benef{grid-template-columns:1fr} .carte-benef{min-height:0} .carte-benef h3{padding-top:36px} }
@media (prefers-reduced-motion:reduce){ .carte-benef,.carte-benef .sym{transition:none;animation:none} .carte-benef:hover,.carte-benef:hover .sym{transform:none} }

/* --- les métiers en onglets (piste C) : trois objectifs à gauche, une carte sur le dégradé à droite */
.met-onglets{align-items:stretch}
.met-noms{margin-top:clamp(40px, 4vw, 64px);border-top:1px solid var(--gris)}
.met-noms li{border-bottom:1px solid var(--gris)}
.met-noms button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:56px 1fr;align-items:baseline;width:100%;padding:20px 0;font-size:var(--t-titre);font-weight:500;line-height:1.1;color:var(--gris);transition:color .6s var(--ease)}
.met-noms button span{font-size:var(--t-chapo);font-variant-numeric:tabular-nums}
.met-noms button.actif,.met-noms button:hover{color:var(--noir)}
.met-noms button.actif span{background:var(--degrade-texte);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.met-noms button:focus-visible{outline:2px solid var(--noir);outline-offset:4px}
.met-scene{grid-column:7 / span 6;position:relative;display:grid;min-height:clamp(460px, 40vw, 600px);background:var(--nuit) url("../img/degrades/couverture.jpg") center/cover no-repeat;overflow:hidden}
.met-panneau{grid-area:1 / 1;padding:clamp(28px, 3vw, 48px);display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease), transform 1s var(--ease);pointer-events:none}
.met-panneau.actif{opacity:1;transform:none;pointer-events:auto}
.met-panneau .etiquette{margin-bottom:auto;padding-bottom:56px}
.met-panneau h3{font-size:var(--t-capitales);font-weight:500;line-height:1;letter-spacing:-.015em;text-transform:uppercase}
.met-panneau p{margin-top:16px;font-size:var(--t-chapo);font-weight:500;line-height:1.35;max-width:22em}
.met-panneau ul{margin-top:28px;border-top:1px solid var(--blanc)}
.met-panneau li{padding-block:10px;border-bottom:1px solid var(--blanc);font-size:16px;white-space:nowrap;overflow:hidden}
@media (max-width:1000px){ .met-scene{grid-column:1 / -1;margin-top:32px} }
@media (max-width:640px){ .met-noms button{grid-template-columns:44px 1fr} .met-panneau li{font-size:15px} .met-scene{min-height:0} }
@media (prefers-reduced-motion:reduce){ .met-panneau{transition:none;transform:none} }

/* --- le manifeste, sur la structure de Motto : le titre, l'invitation à gauche, le chapô et le détail à droite */
.manif .corps{align-items:start;row-gap:24px}
.manif-invite{grid-column:1 / span 5;font-size:16px;font-weight:500;padding-top:.45em}
.manif-droite{grid-column:7 / span 6}
.manif-droite .chapo{font-size:clamp(22px, 2.1vw, 32px);line-height:1.25}
.manif-droite .texte{margin-top:28px;max-width:30em}
@media (max-width:1000px){ .manif-invite,.manif-droite{grid-column:1 / -1} }