/* SMS, Social Manager Suite : site de présentation, direction C « Monochrome » (validée par Sébastien le 31/10/2026).
   Noir, blanc et gris : fond #F1F2F4, cartes blanches très arrondies sans bordure, surfaces #F4F5F7,
   filets #E6E8EB et #DADDE1 ; noir #0B0B0C pour l'action principale et l'élément choisi ;
   texte #111214, texte secondaire #5E626A. Une seule police, « SMS Sans » (Inter 4 variable, taille
   optique automatique). Lime #D9F985 réservé à « SMS propose », aux résultats que SMS relève, à la lumière
   du logo et au survol des boutons et des icônes des modules (31/10/2026).
   Couleurs de chaleur gardées (chaud, tiède, froid). Les exemples fictifs gardent leurs polices,
   leurs couleurs et leurs logos : ce sont des marques. Ombres seulement sur ce qui flotte.
   Mouvements en transform, opacity et dégradés seulement ; ni flou, ni néon, ni découpage dans les apparitions.
   UNE définition par section, dans l'ordre de la page : jamais de surcharge empilée en fin de fichier. */

@font-face{font-family:"SMS Sans";src:url("fonts/SMS-Sans-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ── Jetons ── */
:root{
  /* Neutres de C */
  --fond:#F1F2F4;--carte:#FFFFFF;--surface:#F4F5F7;--filet:#E6E8EB;--contour:#DADDE1;
  --noir:#0B0B0C;--texte:#111214;--texte-2:#5E626A;--gris:#A3A8B0;
  /* Le noir des cartes sombres (section 02, essai) : il ne s'inverse jamais, même sur le noir */
  --noir-fixe:#0B0B0C;
  /* « SMS propose », les résultats que SMS relève et la lumière Lime, nulle part ailleurs */
  --lime:#D9F985;
  /* Lumière du logo : un dégradé Lime plein qui traverse ses trois formes, l'une après l'autre */
  /* États : la chaleur de l'interface Communauté (tri.HEAT), vérifié */
  --chaud:#B4443A;--tiede:#B0851F;--froid:#6F8BA0;--ok:#17734A;
  /* Une famille */
  --f:"SMS Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Tailles : trois titres d'affiche, puis l'échelle de C (20, 16, 15, 13) */
  --t-h1:clamp(42px,4.6vw,68px);--t-h2:clamp(32px,4.2vw,56px);--t-h3:clamp(26px,3vw,38px);--t-h4:clamp(24px,2.4vw,30px);
  --t-c:24px;--t-2:20px;--t-lead:clamp(17px,1.5vw,19px);--t-3:16px;--t-b:15px;--t-s:13px;--t-mini:11px;
  /* Rayons de C : quatre et la pastille */
  --r-1:12px;--r-2:18px;--r-3:24px;--r-4:32px;--r-p:999px;
  /* Ombres : seulement ce qui flotte */
  --ombre-flotte:0 1px 2px rgba(11,11,12,.05),0 10px 28px -10px rgba(11,11,12,.16);
  --ombre-haute:0 2px 4px rgba(11,11,12,.04),0 24px 48px -16px rgba(11,11,12,.22);
  --out:cubic-bezier(.22,1,.36,1);
  --gut:clamp(16px,4vw,40px);--max:1200px;--haut:88px;--sec:clamp(56px,7vw,104px);
  /* Les grands cadres (carte noire de la Création, tri par chaleur) : à --cadre des bords de la fenêtre ;
     l'illustration de la Création, à --illu-in de plus, pour laisser la place à sa lueur */
  --cadre:clamp(12px,4vw,72px);--illu-in:clamp(14px,4vw,80px);
  /* Pictogrammes de C, au trait noir */
  --ic-coche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%230B0B0C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%230B0B0C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-haut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V6M6 12l6-6 6 6' fill='none' stroke='%230B0B0C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width:767px){:root{--haut:68px}}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--fond)}
body{margin:0;background:var(--fond);color:var(--texte);font:400 var(--t-3)/1.55 var(--f);letter-spacing:-.006em;font-optical-sizing:auto;font-kerning:normal;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f);font-weight:700;letter-spacing:-.03em;text-wrap:balance;color:var(--noir)}
p{margin:0}
/* Focus : noir, 2 px, avec un retrait */
:focus-visible{outline:2px solid var(--noir);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:50;padding:10px 16px;border-radius:var(--r-p);background:var(--noir);color:#fff;font:500 var(--t-b)/1.2 var(--f);text-decoration:none}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
section[id]{scroll-margin-top:calc(var(--haut) + 8px)}
@keyframes blink{50%{opacity:.25}}
@keyframes pop{from{transform:scale(.4)}}

/* ── Composants communs ── */
/* Action principale : pastille noire, avec sa flèche quand elle fait avancer. Au repos, aucune animation.
   Survol, focus et toucher (31/10/2026, Sébastien) : le fond passe du noir au Lime par un simple fondu de couleur (0,2 s) ;
   le texte et la flèche basculent d'un coup du blanc au noir à mi-chemin (0,1 s), quand le fond rend les deux couleurs
   également lisibles : jamais de gris sur le texte, ni calque ni liseré au bord de la pastille. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--r-p);
  background:var(--noir);color:#fff;font:500 var(--t-3)/1.2 var(--f);letter-spacing:-.006em;text-decoration:none;white-space:nowrap;
  transition:background-color .2s linear,color 0s linear .1s,transform .25s var(--out)}
.btn:focus-visible,.btn:active{background-color:var(--lime);color:var(--noir)}
@media (hover:hover){
  .btn:hover{background-color:var(--lime);color:var(--noir);transform:translateY(-1px)}
  .btn:hover svg{transform:translateX(3px)}
}
.btn svg{width:18px;height:18px;margin-right:-4px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--out)}
.btn-s{min-height:44px;padding:0 20px;font-size:var(--t-b)}
.btn-l{min-height:60px;padding:0 32px;font-size:var(--t-lead)}
/* Action secondaire : pastille blanche à filet */
.lnk{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:var(--r-p);background:var(--carte);
  box-shadow:inset 0 0 0 1px var(--contour);color:var(--texte);font:500 var(--t-3)/1.2 var(--f);text-decoration:none;white-space:nowrap;transition:background-color .2s}
.lnk:hover{background:var(--surface)}
/* Surtitre : petite pastille blanche ; le numéro du module dans une puce grise */
.kicker{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:fit-content;max-width:100%;min-height:32px;margin-bottom:20px;padding:4px 14px;
  border-radius:var(--r-p);background:var(--carte);color:var(--texte);font:500 var(--t-s)/1.3 var(--f);letter-spacing:0}
.kicker:has(> .num){padding-left:4px}
.num{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-p);background:var(--filet);color:var(--noir);
  font:600 var(--t-s)/1 var(--f);letter-spacing:0;font-variant-numeric:tabular-nums}
h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.035em;max-width:16ch}
.sub{color:var(--texte-2);font-size:var(--t-lead);line-height:1.6;max-width:56ch;margin-top:20px}
.soon{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--r-p);background:var(--surface);color:var(--texte);
  font:500 var(--t-s)/1 var(--f);font-style:normal;letter-spacing:0;white-space:nowrap}
.fictif{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--r-p);box-shadow:inset 0 0 0 1px var(--contour);
  color:var(--texte-2);font:500 var(--t-s)/1 var(--f);letter-spacing:0;white-space:nowrap}
/* « SMS propose » : pastille noire, symbole SMS noir sur un disque Lime */
.sug{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 12px 0 3px;border-radius:var(--r-p);
  background:var(--noir);color:#fff;font:500 var(--t-s)/1 var(--f);letter-spacing:0;white-space:nowrap}
.sug i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--lime)}
.sug svg{width:11px;height:13px;fill:var(--noir)}
/* Formes du symbole : les dégradés de la lumière du logo, définis une fois en tête de page (.lt-defs) et partagés par
   les deux logos (en-tête et pied de page), qui restent donc en phase. Chaque dégradé va du Lime PLEIN (choix de
   Sébastien) au noir du logo, en diagonale, du haut à droite vers le bas à gauche. */
.lt-defs{position:absolute;width:0;height:0;overflow:hidden}
.lt-defs .lt-on{stop-color:var(--lime)}
.lt-defs .lt-noir{stop-color:var(--noir)}
/* Lien de suite : un mot et une flèche dans un petit rond */
.mod-go,.who-go{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--texte);font:500 var(--t-b)/1.2 var(--f);text-decoration:none}
.mod-go::after,.who-go::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--surface) var(--ic-fleche) center/14px no-repeat;
  transition:background-color .2s,transform .25s var(--out)}
.mod:hover .mod-go::after,.who-go:hover::after{background-color:var(--filet);transform:translateX(3px)}
/* Visuel de marque (exemple fictif, identité et création de contenu) : il garde les couleurs et les polices de la marque */
.post{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--r-2);overflow:hidden;background:var(--filet)}
.post-ph{position:absolute;inset:0;background-size:cover;background-position:center}
.post-tx{position:absolute;inset:auto 0 0;padding:16px;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(to top,rgba(11,11,12,.78),rgba(11,11,12,.5) 55%,rgba(11,11,12,0))}
.post-ey{font:600 10px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.post-t{font-size:clamp(17px,1.8vw,21px);line-height:1.12;color:#fff;text-wrap:balance}
.post-lg{height:18px;width:auto;max-width:72px;object-fit:contain;object-position:left;margin-top:4px}
/* Ses variantes : aplat de la couleur des titres, ou photo en haut sur le fond de la marque */
.post .post-t{font-family:var(--bt)}
.post.v-plain{background:var(--b0)}
.post.v-plain .post-tx{background:none;inset:0;justify-content:flex-end;padding:18px}
.post.v-plain .post-t{color:var(--b2)}
.post.v-plain .post-ey{color:var(--b3)}
.post.v-paper{display:flex;flex-direction:column;background:var(--b2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b0) 12%,transparent)}
.post.v-paper .post-ph{position:relative;inset:auto;flex:1 1 54%;min-height:25%}
.post.v-paper .post-tx{position:relative;inset:auto;flex:0 0 auto;min-height:46%;background:none;padding:14px 16px}
.post.v-paper .post-t{color:var(--b0)}
.post.v-paper .post-ey{color:var(--b1)}

/* ── Apparitions : le chargement (ld) puis le défilement (rv). En place, sans vol. ── */
.ld{opacity:0;transform:translateY(16px);animation:ld .9s var(--out) forwards;animation-delay:calc(var(--d,0) * .11s + .1s)}
@keyframes ld{to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--out),transform .9s var(--out);transition-delay:calc(var(--i,0) * .09s)}
.rv.in{opacity:1;transform:none}

/* ── En-tête : logo noir à gauche, pastille blanche flottante au centre, l'essai à droite ──
   Un seul bouton noir à l'écran : celui de l'en-tête s'efface tant que celui de l'accueil est visible. */
.hd{position:fixed;inset:0 0 auto;z-index:20;transition:background-color .3s,box-shadow .3s}
.hd.sc{background:var(--fond);box-shadow:0 1px 0 rgba(11,11,12,.06)}
.hd-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;min-height:var(--haut)}
.hd-logo{grid-column:1;justify-self:start;display:flex;align-items:center;min-height:44px}
.hd-logo img,.hd-logo .logo{width:88px;height:auto}
/* Le logo noir, dans la page (en-tête et pied de page) : ses trois formes s'éclairent en Lime l'une après l'autre,
   de haut en bas. Forme 1 (1 s), pause (elle revient au noir), forme 2 (1 s), pause, forme 3 (1 s), puis 3 s de repos :
   un passage toutes les 8 s (pages légales : l'image, sans lumière). Chaque forme est remplie D'UN SEUL TRAIT par son
   dégradé, que app.js déplace (31/10/2026, tard le soir : un calque Lime découpé par-dessus la forme noire dessinait
   deux bords, d'où un liseré sombre et des marches sur le contour). Au repos, le dégradé est au-delà de la forme : noire. */
.logo{display:block;aspect-ratio:1274/472;fill:var(--noir)}
.logo .lf-1{fill:url(#lt-g1) var(--noir)}.logo .lf-2{fill:url(#lt-g2) var(--noir)}.logo .lf-3{fill:url(#lt-g3) var(--noir)}
.hd-nav{grid-column:2;display:flex;align-items:center;gap:2px;padding:6px;border-radius:var(--r-p);background:var(--carte);box-shadow:var(--ombre-flotte)}
.hd-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-p);color:var(--texte-2);font:500 var(--t-b)/1 var(--f);
  text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.hd-nav a:hover{background:var(--surface);color:var(--texte)}
.hd .btn,.hd .lnk{grid-column:3;justify-self:end}
.hd .btn{transition:opacity .3s,transform .3s var(--out),background-color .2s linear,color 0s linear .1s}
.hd.cta-twin .btn{opacity:0;transform:translateY(-6px);pointer-events:none}
.hd.cta-twin .btn:focus-visible{opacity:1;transform:none;pointer-events:auto}
.hd .lnk{min-height:44px;padding:0 20px;font-size:var(--t-b)}
/* La pastille du menu et le bouton tiennent côte à côte jusqu'à 1 000 px ; en dessous, le menu s'efface (comme sur le vrai site sous 900 px). */
@media (max-width:1199px){.hd-nav a{padding:0 12px}}
@media (max-width:999px){.hd-nav{display:none}}
@media (max-width:767px){.hd-logo img,.hd-logo .logo{width:80px}}

/* ── Accueil ── */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--haut) + clamp(28px,4vw,56px)) 0 clamp(40px,5vw,72px)}
/* Le grand symbole, en gris très clair sur le fond : il dérive lentement. Le fond de la page le recouvre
   doucement vers le bas de l'accueil (dégradé fixe) : la section suivante a le même fond, une coupe nette s'y verrait. */
.hero-sym{position:absolute;z-index:0;right:-14vw;top:-4vw;width:min(74vw,960px);height:auto;pointer-events:none}
.hero::after{content:"";position:absolute;z-index:1;inset:auto 0 0;height:clamp(80px,12vw,160px);background:linear-gradient(rgba(241,242,244,0),var(--fond));pointer-events:none}
.hero-sym path{fill:#E2E4E8}
.hero-sym .p1{animation:drift1 14s ease-in-out infinite alternate}
.hero-sym .p2{fill:#E5E7EA;animation:drift2 17s ease-in-out infinite alternate}
.hero-sym .p3{animation:drift3 12s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-10px,8px) rotate(-1.2deg)}}
@keyframes drift2{to{transform:translate(8px,-6px)}}
@keyframes drift3{to{transform:translate(-6px,-10px) rotate(1.5deg)}}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:var(--t-h1);line-height:1;letter-spacing:-.045em}
.lead{color:var(--texte-2);font-size:var(--t-lead);line-height:1.6;max-width:46ch;margin-top:24px}
.cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:32px}
.reassure{color:var(--texte-2);font-size:var(--t-b);line-height:1.5;margin-top:18px}
.cnt b{color:var(--texte);font-weight:600}
/* Planche d'analyse (exemple fictif) : carte blanche qui flotte au-dessus du symbole ; la coche Lime dit ce que SMS a relevé */
.stage{background:var(--carte);border-radius:var(--r-3);padding:24px;box-shadow:0 2px 4px rgba(11,11,12,.04),0 24px 48px -16px rgba(11,11,12,.16)}
.st-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.st-read{display:inline-flex;align-items:center;gap:8px;color:var(--texte-2);font:500 var(--t-s)/1.2 var(--f)}
.st-read i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,var(--noir) 0 3.5px,transparent 4px);animation:blink 1.4s ease-in-out infinite}
.stage.done .st-read i{background:var(--lime) var(--ic-coche) center/10px no-repeat;animation:none}
.st-who{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:16px 0 8px}
.st-who b{font:700 var(--t-2)/1.2 var(--f);letter-spacing:-.02em;color:var(--noir)}
.st-who span{color:var(--texte-2);font-size:var(--t-b)}
.st-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.st-feats{list-style:none;margin:0;padding:0}
.st-feats li{display:grid;grid-template-columns:24px auto minmax(0,1fr);align-items:center;column-gap:12px;min-height:48px;border-bottom:1px solid var(--filet)}
.st-feats li:last-child{border-bottom:0}
.st-st{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--contour)}
.st-feats li.on .st-st{background:var(--lime) var(--ic-coche) center/12px no-repeat;box-shadow:none;animation:pop .4s var(--out)}
.st-l{font:500 var(--t-b)/1.2 var(--f);color:var(--texte)}
.st-r{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;min-width:0;opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--out),transform .6s var(--out)}
.st-feats li.on .st-r{opacity:1;transform:none}
/* Le logo relevé, dans sa version noire (le fichier blanc de l'exemple, assombri) */
.st-r img{height:24px;width:auto;max-width:96px;object-fit:contain;filter:brightness(0)}
.st-r small{color:var(--texte);font:600 var(--t-s)/1.25 var(--f);text-align:right}
.st-sw{flex-wrap:nowrap}
.st-sw i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(11,11,12,.12)}
.st-aa{font-size:var(--t-2);line-height:1;color:var(--noir)}
.st-aa2{font-size:var(--t-b);font-weight:400;color:var(--texte-2)}
.st-tags span{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:var(--r-p);background:var(--surface);color:var(--texte);
  font:500 var(--t-s)/1 var(--f);white-space:nowrap}
.st-post{opacity:0;transform:scale(.97);transition:opacity .7s var(--out),transform .9s var(--out)}
.stage.done .st-post{opacity:1;transform:none}
.stage .st-body,.stage .st-who{transition:opacity .45s}
.stage.out .st-body,.stage.out .st-who{opacity:0}
@media (max-width:1200px) and (min-width:961px){.st-body{grid-template-columns:1fr}.st-post{width:100%;max-width:240px;justify-self:center}}
@media (max-width:960px){.hero-in{grid-template-columns:1fr}.hero-sym{width:110vw;right:-40vw;top:-10vw}}
/* Écran peu haut (MacBook, 1024 × 768) : le bouton « Analyser mon site » reste visible sans défiler. */
@media (min-width:961px) and (max-height:880px){.hero{padding-top:calc(var(--haut) + 24px);padding-bottom:56px}.cta{margin-top:24px}}
@media (max-width:560px){.st-body{grid-template-columns:1fr}.st-post{max-width:300px}.stage{padding:20px}}

/* ── La suite : trois cartes blanches ; chaque module porte SA forme du symbole, en noir ── */
.suite{padding:var(--sec) 0}
.mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.mod{position:relative;display:flex;flex-direction:column;gap:12px;min-height:340px;padding:28px;border-radius:var(--r-3);background:var(--carte);color:var(--texte);
  text-decoration:none;transition:transform .4s var(--out),box-shadow .4s}
.mod:hover{transform:translateY(-3px);box-shadow:var(--ombre-flotte)}
.mod-sym{width:56px;height:auto;margin-bottom:20px}
.mod-sym path{fill:var(--filet)}
/* La forme noire de chaque icône, unie et immobile au repos ; au survol ou au focus de la carte, elle passe au Lime par un
   simple fondu de sa propre couleur (0,2 s) : ni calque ni masque par-dessus, donc aucun contour qui se dessine avant. */
.mod-sym path.on{fill:var(--noir);transition:fill .2s linear}
.mod:is(:focus-visible,:active) .mod-sym path.on{fill:var(--lime)}
@media (hover:hover){.mod:hover .mod-sym path.on{fill:var(--lime)}}
.mod-n{display:flex;align-items:center;gap:10px;min-height:24px;color:var(--texte-2);font:600 var(--t-s)/1 var(--f);font-variant-numeric:tabular-nums}
.mod h3{font-size:var(--t-c);line-height:1.15;letter-spacing:-.025em}
.mod p{color:var(--texte-2);font-size:var(--t-b);line-height:1.55}
.mod-go{margin-top:auto}
/* Entre 901 et 1 199 px, « Gestion de la communauté » passe sur deux lignes : les trois titres gardent la même hauteur. */
@media (min-width:901px) and (max-width:1199px){.mod h3{min-height:2.3em}}
@media (max-width:900px){.mods{grid-template-columns:1fr}.mod{min-height:0}}
@media (min-width:561px) and (max-width:900px){.mod{display:grid;grid-template-columns:64px 1fr;column-gap:20px;align-items:start}
  .mod-sym{grid-row:1/5;width:52px;margin:4px 0 0}.mod > :not(.mod-sym){grid-column:2}}

/* ── Sections à deux colonnes et listes de fonctions (Identité, Création de contenu, Communauté) ── */
.sec{padding:var(--sec) 0}
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,6vw,88px);align-items:center}
/* Une colonne peut toujours rétrécir : le sélecteur d'exemples (sur une ligne) élargissait la page sur téléphone. */
.split > *{min-width:0}
.split-r .split-txt{order:2}
@media (max-width:960px){.split{grid-template-columns:1fr}.split-r .split-txt{order:0}}
/* Liste de fonctions : une carte blanche, un pictogramme dans un rond gris par ligne */
.feats{list-style:none;margin:32px 0 0;padding:4px 20px;display:grid;border-radius:var(--r-3);background:var(--carte)}
.feats li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--filet)}
.feats li:first-child{border-top:0}
.feats svg{width:40px;height:40px;padding:10px;border-radius:50%;background:var(--surface);fill:none;stroke:var(--noir);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feats b{display:block;margin-top:1px;font:600 var(--t-b)/1.35 var(--f);color:var(--noir)}
.feats span{display:block;margin-top:2px;color:var(--texte-2);font-size:var(--t-b);line-height:1.5}

/* ── Identité de marque : la planche d'un exemple fictif, aux couleurs de SA marque ── */
/* Le choix d'exemple (31/10/2026, Sébastien) : trois marques (Maison Oléa, Atelier Novel, Nina Studio), une puce
   chacune, au nom seul, avec la couleur de la marque ; elles passent à la ligne (jamais coupées), la marque affichée
   est en noir. Plus d'étiquette au-dessus (soir) : la planche dit « Exemple fictif » ; le public est dans la carte. */
.pick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.pick button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 14px;border:0;border-radius:var(--r-p);background:var(--carte);
  box-shadow:inset 0 0 0 1px var(--contour);color:var(--texte);font:500 var(--t-b)/1.2 var(--f);white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
.pick button:hover{background:var(--surface)}
.pick button[aria-pressed="true"]{background:var(--noir);color:#fff;box-shadow:none}
.pick button i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(11,11,12,.12)}
.board{--b0:#2F3A1F;--b1:#4B5240;--b2:#F7F4E8;--b3:#8A9A3B;--bt:inherit;--bx:inherit;
  background:var(--b2);color:var(--b0);border-radius:var(--r-3);padding:clamp(18px,2.4vw,28px);transition:background-color .6s,color .6s}
.board.swap .bd-grid,.board.swap .bd-hd{opacity:0}
.bd-hd,.bd-grid{transition:opacity .35s}
.bd-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid color-mix(in srgb,var(--b0) 14%,transparent)}
.bd-id{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.bd-logo{height:44px;width:auto;max-width:200px;object-fit:contain;object-position:left}
.bd-who{color:var(--b1);font:500 var(--t-s)/1.2 var(--f)}
.fictif-d{color:color-mix(in srgb,var(--b0) 72%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b0) 22%,transparent)}
.bd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;padding-top:18px}
.bd-blk h3{display:flex;gap:8px;align-items:baseline;margin:0 0 10px;font:600 var(--t-s)/1.2 var(--f);letter-spacing:0;color:color-mix(in srgb,var(--b0) 80%,transparent)}
.bd-blk h3 small{font:500 var(--t-s)/1.2 var(--f);color:var(--b1)}
/* Miniatures de la planche (nuancier) : la seule taille sous 13 px, comme les aperçus de C */
.bd-sw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bd-sw li{display:flex;flex-direction:column;gap:5px;font-size:var(--t-mini);color:color-mix(in srgb,var(--b0) 75%,transparent)}
.bd-sw i{display:block;aspect-ratio:1;border-radius:var(--r-1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b0) 14%,transparent)}
.bd-sw b{font:600 var(--t-mini)/1.2 var(--f);color:var(--b0)}
.bd-aa{display:flex;align-items:baseline;gap:14px;font-size:44px;line-height:1}
.bd-aa span:first-child{font-family:var(--bt)}
.bd-aa span:last-child{font-family:var(--bx);font-size:34px}
.bd-fn{font-size:var(--t-s);color:color-mix(in srgb,var(--b0) 75%,transparent);margin-top:8px}
.bd-tone{font:700 var(--t-2)/1.15 var(--bt);margin-bottom:8px}
.bd-notes{list-style:none;margin:0;padding:0;display:grid;gap:5px;font:400 var(--t-b)/1.45 var(--bx)}
.bd-notes li{display:grid;grid-template-columns:14px 1fr;gap:8px}
.bd-notes li::before{content:"";width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--b3)}
.bd-pos{font:400 var(--t-b)/1.5 var(--bx)}
.bd-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bd-tags span{padding:5px 10px;border:1px solid var(--b3);border-radius:var(--r-p);font:600 var(--t-s)/1 var(--f)}
.bd-models{grid-column:1/-1}
.bd-posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vs{position:relative;aspect-ratio:4/5}
.vs .post{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.vs .post.on{opacity:1}
/* Téléphone : les deux visuels font 130 à 140 px de large ; moins de marge et un titre plus petit, pour que titre et logo tiennent */
@media (max-width:560px){.bd-posts .post .post-tx{padding:10px 12px}.bd-posts .post-t{font-size:var(--t-b)}}
@media (max-width:560px){.bd-grid{grid-template-columns:1fr}}

/* ── Création de contenu, sur le noir (31/10/2026, Sébastien) ──
   La section est une grande carte noire aux grands rayons, qui garde presque toute la largeur de la fenêtre une fois
   dessus (marges de cadre --cadre, 4 % de la fenêtre, 31/10/2026 : Sébastien la trouvait trop resserrée à la largeur du
   contenu) ; le contenu garde sa largeur. Le noir est
   un calque à part (.nuit-bg) qu'app.js lie au défilement : à l'entrée, il apparaît sur toute la largeur (opacity),
   puis se resserre en carte (scaleX) ; à la sortie vers la Communauté, l'inverse. Réversible, transform et opacity
   seulement. Sans JavaScript ou en mouvement réduit : la carte noire d'emblée. Dès que le noir l'emporte (.nuit), les
   neutres de C s'inversent dans la section : textes blancs et gris clair, cartes et puces sombres ; le Lime ne bouge pas. */
#creation{container-type:inline-size;position:relative;isolation:isolate;overflow-x:clip}
.nuit-card{--np:clamp(20px,5vw,64px);position:relative;isolation:isolate;width:calc(100% - 2 * var(--gut));max-width:calc(var(--max) - 2 * var(--gut));margin:0 auto;
  padding:0 var(--np)}
.nuit-bg{position:absolute;z-index:-1;left:var(--cadre);right:var(--cadre);top:0;bottom:0;border-radius:var(--r-4);
  background:var(--noir-fixe);will-change:transform,opacity}
.nuit{--carte:#17181B;--surface:#212226;--filet:#2B2C31;--contour:#3B3D43;--noir:#FFFFFF;--texte:#F1F2F4;--texte-2:#A9ADB4;--gris:#8B9098}
.crea-hd{display:flex;flex-direction:column;align-items:center;text-align:center}
.crea-hd h2{max-width:18ch}
.crea-hd .sub{max-width:60ch}
.crea-soon{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin-top:clamp(28px,4vw,48px);color:var(--texte-2);
  font-size:var(--t-b);line-height:1.5;text-align:center}
/* Les six fonctions : une grille sous l'illustration, sans carte (la section en est une) */
.crea-feats{margin-top:clamp(40px,6vw,72px);padding:0;background:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(20px,3vw,40px)}
.crea-feats li{padding:0;border-top:0}
/* L'illustration du vrai parcours, l'élément fort de la section (agrandie le 31/10/2026 : « bien mais trop petite » ;
   le soir, maquettes de Sébastien : plus de place aux images, les étapes en tête du cadre, l'étiquette dessous, la
   publication à la manière d'Instagram). Quatre vues, une à la fois, en fondu : trois photos choisies, le format,
   « SMS compose » (le disque Lime) puis les pages du carrousel, enfin la publication. Transform et opacity.
   Le cadre (.cr-cadre) fait jusqu'à 1 120 px, à --cadre + --illu-in des bords de la fenêtre (unités de la section). */
.cr-cadre{--w:min(1120px,calc(100cqw - 2 * (var(--cadre) + var(--illu-in))));--lu-c:min(110px,calc((100cqw - var(--w)) / 2 - var(--cadre)));
  --lu-h:clamp(36px,8vw,120px);position:relative;width:var(--w);margin:clamp(36px,5vw,56px) 0 0 calc((100% - var(--w)) / 2)}
.crea{padding:clamp(12px,2.2vw,28px);border-radius:var(--r-4);background:var(--carte);box-shadow:inset 0 0 0 1px var(--filet)}
/* L'étiquette, sous le cadre, discrète */
.cr-hd{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin-top:16px}
.cr-who{color:var(--texte-2);font:500 var(--t-s)/1.2 var(--f);transition:opacity .4s}
/* La lueur (31/10/2026, soir, Sébastien : « comme un téléviseur Philips Hue ») : sur le noir, au bord haut et aux bords
   latéraux du cadre, les couleurs du contenu montré, en fondu d'une étape à l'autre et d'une image à l'autre. Couleurs
   connues d'avance (construire_site.py), jamais lues dans la page. Calques déjà doux (dégradés radiaux), deux jeux
   (.lu) dont seule l'opacité change ; jamais de flou animé. Remplace, pour ce cadre seulement, « ni flou, ni néon ». */
.cr-lueur{position:absolute;z-index:-1;top:calc(-1 * var(--lu-h));left:calc(-1 * var(--lu-c));right:calc(-1 * var(--lu-c));bottom:28%;
  pointer-events:none;opacity:0;transition:opacity .8s}
.nuit .cr-lueur{opacity:1}
.lu{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.lu.on{opacity:1}
.lu i{position:absolute;opacity:.5}
.lu-h{left:var(--lu-c);right:var(--lu-c);top:0;height:calc(2 * var(--lu-h));background:radial-gradient(closest-side,var(--lh,#3B3D43),transparent)}
.lu-g,.lu-d{top:calc(var(--lu-h) + 2%);bottom:0;width:calc(2 * var(--lu-c))}
.lu-g{left:0;background:radial-gradient(closest-side,var(--lg,#3B3D43),transparent)}
.lu-d{right:0;background:radial-gradient(closest-side,var(--ld,#3B3D43),transparent)}
/* Les étapes, en tête du cadre */
.cr-steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(14px,2.4vw,28px);padding:0;counter-reset:cr}
.cr-steps li{counter-increment:cr;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 5px;border-radius:var(--r-p);background:var(--surface);
  color:var(--texte-2);font:500 var(--t-b)/1 var(--f);transition:background-color .3s,color .3s}
.cr-steps li::before{content:counter(cr);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--carte);color:var(--texte-2);font:600 var(--t-s)/1 var(--f)}
.cr-steps li.cur{background:var(--noir);color:var(--carte)}
.cr-steps li.cur::before{color:var(--noir)}
.cr-steps li.done{color:var(--texte)}
.cr-steps li.done::before{content:"";background:#fff var(--ic-coche) center/12px no-repeat}
.cr-stage{display:grid;transition:opacity .4s}
.cr-cadre.out .cr-stage,.cr-cadre.out .cr-who{opacity:0}
.cr-v{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s,transform .6s var(--out),visibility 0s .45s}
.cr-v.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .6s var(--out)}
/* 1. Les photos : trois choisies, chacune reçoit sa coche ; la tuile « + » en pointillé */
.cr-ph{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.cr-th,.cr-add{position:relative;aspect-ratio:4/5;border-radius:var(--r-2)}
.cr-th{background:var(--filet) center/cover no-repeat}
.cr-th::after{content:"";position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;background:#fff var(--ic-coche) center/13px no-repeat;
  box-shadow:0 1px 3px rgba(11,11,12,.25);opacity:0;transform:scale(.6);transition:opacity .25s,transform .4s var(--out)}
.cr-th.on::after{opacity:1;transform:none}
.cr-add{display:grid;place-items:center;border:1.5px dashed var(--contour)}
.cr-add svg{width:26px;height:26px;fill:none;stroke:var(--gris);stroke-width:1.8;stroke-linecap:round}
/* 2. Le format : le carrousel est choisi (noir, ou blanc sur le noir) */
.cr-fmt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.cr-f{display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(20px,3.4vw,44px) 8px clamp(16px,2.6vw,34px);border-radius:var(--r-3);
  background:var(--surface);color:var(--texte);font:500 var(--t-3)/1.2 var(--f);transition:background-color .3s,color .3s}
.cr-f svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cr-f.on{background:var(--noir);color:var(--carte)}
/* 3. SMS compose, puis les pages du carrousel, aux couleurs et aux polices de la marque.
   Sur le noir, la pastille « SMS propose » passe au gris sombre ; le symbole reste noir sur son disque Lime. */
.cr-sug{width:fit-content;margin:0 0 16px}
.nuit .cr-sug{background:var(--surface);color:var(--texte)}
.cr-sug svg{fill:var(--noir-fixe);transition:transform 1.4s var(--out)}
.crea.busy .cr-sug svg{transform:rotate(360deg)}
.cr-props{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.8vw,22px);padding:5px}
.cr-pr{display:flex;flex-direction:column;gap:10px;min-width:0;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s var(--out)}
.cr-pr.in{opacity:1;transform:none}
.cr-pr span{color:var(--texte-2);font:500 var(--t-b)/1.2 var(--f);text-align:center}
.cr-props .post-tx{padding:14px}
.cr-props .post.v-plain .post-tx{padding:16px}
.cr-props .post.v-paper .post-tx{padding:12px 14px}
/* 4. La publication, à la manière d'Instagram (maquette de Sébastien) : à gauche le visuel (les pages du carrousel,
   une par photo, et leurs points), à droite le panneau du profil FICTIF de l'exemple : avatar, compte, son (fictif),
   légende et cinq hashtags au plus, actions, « Aimé par » un autre exemple fictif, heure, commentaire. Ni badge
   « vérifié », ni logo Instagram, ni vrai compte, ni vraie musique. Le panneau garde ses propres couleurs (un écran blanc). */
.cr-pub{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);max-width:1000px;margin:0 auto;padding-bottom:26px}
.cr-pg{position:relative}
.cr-pv{position:relative;aspect-ratio:4/5}
.cr-pv .post{position:absolute;inset:0;border-radius:var(--r-3) 0 0 var(--r-3);opacity:0;transition:opacity .5s}
.cr-pv .post.on{opacity:1}
.cr-pv .post-t{font-size:var(--t-2)}
.cr-dots{position:absolute;left:0;right:0;top:calc(100% + 12px);display:flex;justify-content:center;gap:6px}
.cr-dots b{width:7px;height:7px;border-radius:50%;background:var(--contour);transition:background-color .3s}
.cr-dots b.on{background:var(--noir)}
.cr-ig{display:flex;flex-direction:column;min-width:0;border-radius:0 var(--r-3) var(--r-3) 0;background:#fff;color:#0B0B0C;font:400 var(--t-b)/1.45 var(--f)}
.cr-ig svg{flex:none;width:24px;height:24px;fill:none;stroke:#0B0B0C;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cr-av{flex:none;width:36px;height:36px;border-radius:50%;background:#EFEFEF center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(11,11,12,.08)}
.cr-handle{font-weight:600}
.cr-ig-hd{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #EFEFEF}
.cr-ig-hd p{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cr-son{font-size:var(--t-s)}
.cr-son-b::before{content:" · "}
.cr-ig-hd svg{margin-left:auto;fill:#0B0B0C;stroke:none}
.cr-ig-cap{flex:1;display:flex;align-items:flex-start;gap:12px;padding:14px 16px}
.cr-ig-cap small{display:block;margin-top:8px;color:#737373;font-size:var(--t-s)}
.cr-tags{color:#00376B}
.cr-ig-act{display:flex;align-items:center;gap:16px;padding:10px 16px 8px;border-top:1px solid #EFEFEF}
.cr-ig-act svg:last-child{margin-left:auto}
.cr-ig-likes{display:flex;align-items:center;gap:8px;padding:0 16px;font-size:var(--t-s)}
.cr-ig-likes span{min-width:0}
.cr-ig-likes .cr-av{width:20px;height:20px}
.cr-ig-likes b{font-weight:600}
.cr-ig-date{padding:4px 16px 12px;color:#737373;font-size:var(--t-mini);letter-spacing:.02em}
.cr-ig-com{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #EFEFEF;color:#737373}
.cr-ig-com span{flex:1;min-width:0}
.cr-ig-com b{color:#00376B;font-weight:600}
/* Tablette : le panneau en plus petit */
@media (max-width:960px){.crea-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-ig{font-size:var(--t-s)}.cr-ig svg{width:20px;height:20px}.cr-av{width:30px;height:30px}.cr-ig-hd,.cr-ig-cap{padding:10px 12px;gap:10px}
  .cr-ig-act{gap:12px;padding:8px 12px 6px}.cr-ig-likes{padding:0 12px}.cr-ig-date{padding:2px 12px 8px}.cr-ig-com{padding:8px 12px}.cr-pv .post-t{font-size:var(--t-3)}}
/* Téléphone : la carte garde ses fines marges, 16 px de marge intérieure ; la publication garde son visuel et le haut du
   panneau (compte, son, légende, hashtags), en petit ; la lueur seulement en haut, plus discrète */
@media (max-width:560px){.nuit-bg{border-radius:var(--r-3)}.nuit-card{--np:16px}.crea{border-radius:var(--r-3)}.cr-cadre{--lu-h:32px}
  .lu i{opacity:.4}.lu-g,.lu-d{display:none}
  .cr-steps{flex-wrap:nowrap;gap:6px}.cr-steps li{min-height:32px;padding:0 4px;font-size:var(--t-s)}.cr-steps li::before{width:24px;height:24px}
  .cr-steps li span{display:none}.cr-steps li.cur{padding-right:12px}.cr-steps li.cur span{display:inline}
  .cr-th,.cr-add{border-radius:var(--r-1)}.cr-th::after{right:6px;top:6px;width:24px;height:24px;background-size:11px}
  .cr-fmt{grid-template-columns:repeat(2,minmax(0,1fr))}.cr-f{gap:10px;font-size:var(--t-s);border-radius:var(--r-2)}.cr-f svg{width:28px;height:28px}
  .cr-pr{gap:8px}.cr-pr span{font-size:var(--t-s)}.cr-props .post-tx,.cr-props .post.v-plain .post-tx{padding:10px}.cr-props .post.v-paper .post-tx{padding:8px 10px}
  .cr-props .post-t{font-size:var(--t-mini)}.cr-props .post-ey,.cr-props .post-lg{display:none}
  .cr-pub{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding-bottom:22px}.cr-pv .post{border-radius:var(--r-2) 0 0 var(--r-2)}.cr-pv .post-t{font-size:var(--t-s)}
  .cr-ig{border-radius:0 var(--r-2) var(--r-2) 0;font-size:var(--t-mini);line-height:1.35}.cr-av{width:24px;height:24px}.cr-ig-hd,.cr-ig-cap{padding:8px;gap:8px}
  .cr-ig-cap .cr-av,.cr-ig-cap small,.cr-ig-hd svg,.cr-ig-act,.cr-ig-likes,.cr-ig-date,.cr-ig-com{display:none}
  .cr-son{font-size:var(--t-mini)}#cr-son{display:none}.cr-son-b::before{content:none}
  .crea-feats{grid-template-columns:1fr}}

/* ── Gestion de la communauté : la file de validation (exemple fictif) ──
   Titre au-dessus des deux colonnes : sur deux lignes, la file garde sa largeur. */
#communaute{container-type:inline-size}
#communaute .split-r{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);row-gap:clamp(28px,3.5vw,44px)}
#communaute .split-hd{grid-column:1/-1;order:-1}
#communaute h2{max-width:none}
.inbox{background:var(--carte);border-radius:var(--r-3);overflow:hidden}
.ib-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--filet)}
.ib-hd b{font:600 var(--t-3)/1.2 var(--f);color:var(--noir)}
.ib-cnt{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:var(--r-p);background:var(--filet);color:var(--texte);
  font:600 var(--t-s)/1 var(--f);font-variant-numeric:tabular-nums}
.ib-aside{color:var(--texte-2);font-size:var(--t-s)}
.fictif-l{margin-left:auto}
.ib-row{padding:18px 20px;border-bottom:1px solid var(--filet);opacity:0;transform:translateY(10px);transition:opacity .6s var(--out),transform .7s var(--out)}
.ib-row:last-child{border-bottom:0}
.ib-row.in{opacity:1;transform:none}
/* Étiquettes sobres : plateforme, langue, sujet ; un point rouge pour une question d'achat */
.ib-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.ib-meta span{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 9px;border-radius:var(--r-p);background:var(--surface);color:var(--texte);font:500 var(--t-s)/1 var(--f)}
.ib-meta .pf{font-weight:600;letter-spacing:.02em}
.ib-meta .lg{color:var(--texte-2)}
.ib-meta .cat.hot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--chaud)}
.ib-c{font-size:var(--t-3);line-height:1.5;color:var(--texte)}
.ib-c b{font-weight:600;margin-right:6px}
.ib-tr{margin-top:6px;font-size:var(--t-s);line-height:1.45;color:var(--texte-2);opacity:0;transform:translateY(4px);transition:opacity .5s var(--out),transform .6s var(--out)}
.ib-tr em{margin-right:6px;font-style:normal;font-weight:600;color:var(--texte)}
.ib-tr.in{opacity:1;transform:none}
/* La réponse proposée : zone grise, « SMS propose » en tête, la traduction dessous */
.ib-d{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 14px;margin-top:14px;padding:14px 16px;border-radius:var(--r-2);background:var(--surface)}
.ib-t{grid-row:2;min-height:1.5em;font-size:var(--t-b);line-height:1.5;color:var(--texte)}
.ib-t::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--noir);opacity:0}
.ib-row.typing .ib-t::after{opacity:1;animation:blink .8s steps(1) infinite}
.ib-trd{grid-column:1/-1;grid-row:3;margin-top:0}
/* Valider : pastille blanche à filet ; noire sur le commentaire en cours ; puis l'état « Validé », un point vert */
.ib-ok{grid-column:2;grid-row:2;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-p);background:var(--carte);
  box-shadow:inset 0 0 0 1px var(--contour);color:var(--texte);font:500 var(--t-b)/1 var(--f);white-space:nowrap;transition:background-color .3s,color .3s,box-shadow .3s}
.ib-row:first-of-type .ib-ok{background:var(--noir);color:#fff;box-shadow:none}
.ib-row.ok .ib-ok{background:var(--carte);color:var(--texte);box-shadow:none}
.ib-row.ok .ib-ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
@media (max-width:960px){#communaute .split-r{grid-template-columns:1fr}}
@media (max-width:560px){.ib-d{grid-template-columns:1fr}.ib-ok{grid-column:1;grid-row:4;justify-self:end}}

/* ── Le tri par chaleur : UNE définition. Le module est centré dans son panneau, dont le fond prend la
   couleur du verdict à l'écran (chaud, tiède, froid) et revient au blanc à chaque nouveau commentaire.
   Une seule palette, celle de l'interface Communauté (tri.HEAT) ; jamais de kelvins à l'écran.
   Version C : les étapes en puces (l'étape en cours en noir), la zone qui reçoit le commentaire passe en noir.
   31/10/2026, soir (Sébastien) : le panneau a la taille de la carte noire de la Création (la fenêtre moins --cadre de
   chaque côté, unités de la section) ; « le cadre, pas le contenu » : tout ce qu'il contient garde sa taille d'avant
   (un panneau de 1 080 px au plus dans la colonne du site), centré, grâce à ses marges intérieures. ── */
@property --kc{syntax:"<color>";inherits:true;initial-value:#F4F5F7}
.heat{--hot:#B4443A;--warm:#B0851F;--cold:#6F8BA0;--hot-t:#8A2F26;--warm-t:#7A5A12;--cold-t:#4A6578;--hbg:#fff;--hw:calc(100cqw - 2 * var(--cadre));
  width:var(--hw);margin:clamp(64px,8vw,104px) 0 0 calc((100% - var(--hw)) / 2);
  padding:clamp(28px,4.5vw,56px) calc((var(--hw) - min(1080px,100%)) / 2 + clamp(16px,4vw,56px));border-radius:var(--r-4);background:var(--hbg);transition:background-color 1.2s ease}
.heat[data-t="chaud"]{--hbg:color-mix(in srgb,var(--hot) 13%,#fff)}
.heat[data-t="tiede"]{--hbg:color-mix(in srgb,var(--warm) 15%,#fff)}
.heat[data-t="froid"]{--hbg:color-mix(in srgb,var(--cold) 15%,#fff)}
.heat-hd{max-width:760px;margin:0 auto;text-align:center}
.heat-hd .kicker{margin-left:auto;margin-right:auto;background:rgba(11,11,12,.05)}
/* Surtitre : chaque mot dans sa couleur (teinte de texte de la palette, lisible) */
.kw-hot{color:var(--hot-t)}.kw-warm{color:var(--warm-t)}.kw-cold{color:var(--cold-t)}
.heat-hd .sub{margin-left:auto;margin-right:auto}
.heat-t{font-size:var(--t-h3);line-height:1.1;letter-spacing:-.035em}
.hk{margin-top:32px}
.hk-card{max-width:680px;margin:24px auto 0;padding:var(--hk-pad,20px 22px 16px);border-radius:var(--r-3);
  background:linear-gradient(135deg,color-mix(in srgb,var(--kc) 55%,#fff),#fff 70%);box-shadow:inset 0 0 0 1px var(--filet),var(--ombre-flotte);
  transition:--kc .7s ease,opacity .35s,transform .45s var(--out)}
.hk-card.out{opacity:0;transform:translateY(-8px)}
.hk-steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;counter-reset:st}
.hk-steps li{counter-increment:st;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px 0 4px;border-radius:var(--r-p);background:var(--surface);
  color:var(--texte-2);font:500 var(--t-s)/1 var(--f);transition:background-color .3s,color .3s}
.hk-steps li::before{content:counter(st);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--carte);color:var(--texte-2);font:600 var(--t-s)/1 var(--f)}
.hk-steps li.cur{background:var(--noir);color:#fff}
.hk-steps li.cur::before{color:var(--noir)}
.hk-steps li.done{color:var(--texte)}
.hk-steps li.done::before{content:"";background:var(--carte) var(--ic-coche) center/11px no-repeat}
.hb-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hb-meta .fictif{margin-left:auto}
.hb-lg{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:var(--r-p);background:var(--surface);color:var(--texte);font:500 var(--t-s)/1 var(--f)}
.hk-step{display:inline-flex;align-items:center;gap:6px;margin-left:4px;color:var(--texte-2);font:500 var(--t-s)/1.2 var(--f)}
.hk-card.reading .hk-step::after{content:"";width:16px;height:4px;background:radial-gradient(circle,var(--noir) 2px,transparent 2.5px) 0 0/6px 4px repeat-x;animation:blink 1s infinite}
.hk-txt{min-height:3em;margin-top:4px;font-size:var(--t-lead);line-height:1.5;color:var(--texte)}
.hk-txt mark{background:linear-gradient(to top,var(--mk,#FFD3A3) 0 42%,transparent 42%) no-repeat 0 0/0% 100%;color:inherit;border-radius:2px;transition:background-size .7s var(--out)}
.hk-card.kw-on .hk-txt mark{background-size:100% 100%}
.hk-card:has(.hk-chip.hot){--mk:color-mix(in srgb,var(--hot) 32%,#fff)}
.hk-card:has(.hk-chip.warm){--mk:color-mix(in srgb,var(--warm) 32%,#fff)}
.hk-card:has(.hk-chip.cold){--mk:color-mix(in srgb,var(--cold) 32%,#fff)}
.hk-res{display:flex;align-items:center;gap:12px;min-height:30px;margin-top:10px}
/* Verdict : point plein, pastille teintée, texte foncé (4,5:1) */
.hk-chip{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 12px 0 10px;border-radius:var(--r-p);font:600 var(--t-s)/1 var(--f);
  opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s var(--out)}
.hk-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hc)}
.hk-chip.hot{--hc:var(--hot);background:color-mix(in srgb,var(--hot) 16%,#fff);color:var(--hot-t)}
.hk-chip.warm{--hc:var(--warm);background:color-mix(in srgb,var(--warm) 16%,#fff);color:var(--warm-t)}
.hk-chip.cold{--hc:var(--cold);background:color-mix(in srgb,var(--cold) 16%,#fff);color:var(--cold-t)}
.hk-why{color:var(--texte);font:500 var(--t-b)/1.3 var(--f);opacity:0;transform:translateY(4px);transition:opacity .4s,transform .5s var(--out)}
.hk-card.done .hk-chip,.hk-card.done .hk-why{opacity:1;transform:none}
.hk-dots{list-style:none;display:flex;gap:6px;justify-content:center;margin:14px 0 0;padding:0}
.hk-dots li{width:22px;height:4px;border-radius:2px;background:var(--filet);transition:background-color .3s}
.hk-dots li.past{background:var(--gris)}
.hk-dots li.cur{background:var(--noir)}
/* Le dégradé : du plus engagé (chaud) au moins engagé (froid) */
.hk-band{position:relative;height:84px;margin-top:32px;border-radius:var(--r-2);box-shadow:inset 0 0 0 1px rgba(11,11,12,.06)}
.hk-grad{position:absolute;inset:0;border-radius:var(--r-2);
  background:linear-gradient(90deg,#C65B48 0%,#DA8360 16%,#E6AE6C 30%,#EFD39C 42%,#F4E9D2 50%,#E4EAF0 60%,#BCCCD8 78%,#8BA2B4 100%)}
.hk-pins{position:absolute;inset:0}
/* Le mot repéré se pose sur le dégradé, puis devient un point de sa couleur. */
.hk-pin{position:absolute;top:50%;display:inline-flex;align-items:center;gap:6px;height:28px;margin:-14px 0 0;padding:0 11px 0 8px;translate:-50% 0;border-radius:var(--r-p);
  background:var(--carte);color:var(--texte);box-shadow:0 4px 12px rgba(11,11,12,.18);font:600 var(--t-s)/1 var(--f);white-space:nowrap;
  animation:pinin .5s var(--out) both;transition:padding .4s var(--out),width .4s,height .4s,margin .4s,opacity .4s}
.hk-pin.new{box-shadow:0 0 0 3px var(--carte),0 6px 16px rgba(11,11,12,.25)}
.hk-pin::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--pc)}
.hk-pin.hot{--pc:var(--hot)}.hk-pin.warm{--pc:var(--warm)}.hk-pin.cold{--pc:var(--cold)}
.hk-pin:not(.new){width:16px;height:16px;margin-top:-8px;padding:0;gap:0;font-size:0;background:var(--pc);box-shadow:0 0 0 2px var(--carte),0 3px 8px rgba(11,11,12,.2)}
.hk-pin:not(.new)::before{display:none}
.hk-pin.gone{opacity:0}
@keyframes pinin{from{opacity:0;transform:scale(.4) translateY(8px)}}
.hk-ends{display:flex;justify-content:space-between;margin-top:8px;color:var(--texte-2);font:500 var(--t-s)/1.3 var(--f)}
.hk-ends span:first-child::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px)}
.hk-ends span:last-child::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg) translateY(-1px)}
/* Trois zones de même taille : un point de couleur, un nom, un nombre ; la zone qui reçoit passe en noir */
.hk-zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:18px}
.hkz{padding:20px 22px;border-radius:var(--r-3);background:var(--carte);box-shadow:inset 0 0 0 1px var(--filet);color:var(--texte);
  transition:background-color .4s,color .4s,box-shadow .4s,transform .5s var(--out)}
.hkz.hot{--hc:var(--hot)}.hkz.warm{--hc:var(--warm)}.hkz.cold{--hc:var(--cold)}
.hkz.on{background:var(--noir);color:#fff;box-shadow:var(--ombre-haute);transform:translateY(-3px)}
.hkz header{display:flex;align-items:center;gap:10px}
.hkz header::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--hc)}
.hkz header b{font:700 var(--t-2)/1.2 var(--f);letter-spacing:-.02em}
.hk-n{display:inline-grid;place-items:center;min-width:26px;height:24px;margin-left:auto;padding:0 8px;border-radius:var(--r-p);background:var(--filet);color:var(--texte);
  font:600 var(--t-s)/1 var(--f);font-variant-numeric:tabular-nums;transition:background-color .4s,color .4s}
.hkz.on .hk-n{background:var(--carte);color:var(--noir)}
.hc-def{margin:8px 0 14px;color:var(--texte-2);font-size:var(--t-s);line-height:1.45;transition:color .4s}
.hkz.on .hc-def{color:rgba(255,255,255,.72)}
.hc-do{margin-top:14px;padding-top:14px;border-top:1px solid var(--filet);color:var(--texte);font-size:var(--t-s);line-height:1.45;transition:color .4s,border-color .4s}
.hkz.on .hc-do{border-color:rgba(255,255,255,.18);color:#fff;font-weight:600}
.hk-detail{display:none}
@media (max-width:760px){.hk-band{height:64px}.hk-zones{gap:8px}.hkz{padding:10px 12px;border-radius:var(--r-2)}.hkz .hc-def,.hkz .hc-do{display:none}
  .hkz header{gap:6px}.hkz header b{font-size:var(--t-b)}.hkz.on{transform:none}
  .hk-detail{display:block;min-height:5.5em;margin-top:10px;padding:14px;border-radius:var(--r-2);background:var(--carte);box-shadow:inset 0 0 0 1px var(--filet);
    font-size:var(--t-b);line-height:1.5}
  .hk-detail b{font-weight:700}.hk-detail span{display:block;margin-top:6px;font-weight:600}}
@media (max-width:560px){.hk{--hk-pad:16px 16px 14px}.hk-steps{flex-wrap:nowrap;gap:4px}.hk-steps li{gap:4px;min-height:28px;padding:0 8px 0 3px;font-size:var(--t-mini)}
  .hk-steps li::before{width:20px;height:20px;font-size:var(--t-mini)}}

/* ── Pour qui : trois rôles en cartes blanches de même taille. Plus de secteurs sur le site (31/10/2026) : la découverte
   les demande après le rôle. ── */
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.who-c{display:flex;flex-direction:column;padding:12px 12px 20px;border-radius:var(--r-3);background:var(--carte);scroll-margin-top:calc(var(--haut) + 12px)}
.who-c > svg,.who-c h3,.who-c > p{margin-left:12px;margin-right:12px}
/* Le pictogramme du rôle : dans un cercle en pointillé, comme les cartes de choix de C */
.who-c > svg{position:relative;width:48px;height:48px;margin-top:-24px;margin-bottom:14px;padding:11px;border:1.5px dashed var(--contour);border-radius:50%;background:var(--carte);
  fill:none;stroke:var(--noir);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.who-c h3{margin-bottom:8px;font-size:var(--t-2);line-height:1.2;letter-spacing:-.02em}
.who-c p{color:var(--texte-2);font-size:var(--t-b);line-height:1.55}
.who-ph{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r-1);overflow:hidden;background:var(--filet)}
.who-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);transition:transform 1.4s var(--out)}
.who-c:hover .who-img{transform:scale(1.1)}
.who-c.in .who-img{transform:none}
.who-c.in:hover .who-img{transform:scale(1.04)}
.who-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,12,.32),rgba(11,11,12,0) 50%)}
.who-chip{position:absolute;left:10px;top:10px;z-index:1;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 20px);padding:6px 12px 6px 8px;
  border-radius:var(--r-2);background:var(--carte);color:var(--texte);font:500 var(--t-s)/1.3 var(--f);text-wrap:balance}
.who-chip i{display:inline-flex;gap:2px;flex:0 0 auto}
/* Couleurs d'une marque d'exemple (Maison Oléa) : ce sont des couleurs de client */
.who-chip .sw4 b{width:9px;height:14px;border-radius:3px}
.who-chip .sw4 b:nth-child(1){background:#2F3A1F}.who-chip .sw4 b:nth-child(2){background:#8A9A3B}.who-chip .sw4 b:nth-child(3){background:#B8925A}.who-chip .sw4 b:nth-child(4){background:#E8E2D0}
.who-chip .dots3 b{width:14px;height:14px;margin-left:-5px;border:2px solid var(--carte);border-radius:50%;background:var(--gris)}
.who-chip .dots3 b:first-child{margin-left:0;background:var(--noir)}
.who-chip .dots3 b:last-child{background:var(--texte-2)}
.who-chip .langs b{padding:1px 4px;border-radius:4px;background:var(--filet);color:var(--texte);font:600 var(--t-mini)/1.3 var(--f)}
.who-go{margin:auto 12px 0;padding-top:16px}
/* Tablette et téléphone : une carte par ligne (règle perdue le 31/10/2026 avec les secteurs, remise le soir) */
@media (max-width:900px){.who{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}}

/* ── Engagements : quatre cartes blanches, un pictogramme dans un rond gris chacune ;
   l'action que SMS s'interdit se barre en noir quand la carte apparaît. ── */
.eng{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.eng li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px 24px;border-radius:var(--r-3);background:var(--carte)}
.eng-ic{width:48px;height:48px;margin-bottom:8px;padding:12px;border-radius:50%;background:var(--surface);fill:none;stroke:var(--noir);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eng b{color:var(--noir);font:700 var(--t-2)/1.25 var(--f);letter-spacing:-.02em}
.eng em{font-style:normal;background:linear-gradient(var(--noir),var(--noir)) no-repeat 0 60%/0% 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .7s var(--out) calc(var(--i,0) * .09s + .6s)}
.eng li.in em{background-size:100% 2px}
.eng span{color:var(--texte-2);font-size:var(--t-b);line-height:1.55}
@media (max-width:1100px){.eng{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.eng{grid-template-columns:1fr}.eng li{padding:22px 20px}}

/* ── Essai : une grande carte au noir de C (la section 02 l'est aussi, au défilement) ; sur le noir, le bouton passe en blanc ── */
.final{position:relative;overflow:hidden;width:calc(100% - 2 * var(--gut));max-width:calc(var(--max) - 2 * var(--gut));margin:0 auto;
  padding:clamp(72px,10vw,140px) 0;border-radius:var(--r-4);background:var(--noir);color:#fff;text-align:center}
.final-sym{position:absolute;left:50%;top:50%;width:min(92vw,720px);transform:translate(-50%,-50%)}
.final-sym path{fill:#1B1C1F}
.final-sym .p1{animation:drift1 14s ease-in-out infinite alternate}
.final-sym .p2{fill:#17181B;animation:drift2 17s ease-in-out infinite alternate}
.final-sym .p3{animation:drift3 12s ease-in-out infinite alternate}
.final-in{position:relative;display:flex;flex-direction:column;align-items:center}
.final h2{max-width:20ch;color:#fff;font-size:clamp(34px,5vw,64px);text-wrap:balance}
.final .sub{margin:22px auto 36px;color:rgba(255,255,255,.74);text-align:center}
/* Le bouton blanc : le même fondu, du blanc au Lime (0,2 s), texte noir ; son apparition au défilement est gardée */
.final .btn{background:var(--carte);color:var(--noir);transition:opacity .8s var(--out),transform .9s var(--out),background-color .2s linear}
.final .btn:is(:focus-visible,:active){background-color:var(--lime)}
@media (hover:hover){.final .btn:hover{background-color:var(--lime)}}
.final .reassure{margin-top:18px;color:rgba(255,255,255,.66)}
.final .cnt b{color:#fff}
.final :focus-visible{outline-color:#fff}
@media (max-width:560px){.final{border-radius:var(--r-3)}}

/* ── Pied de page : clair, sur le fond de la page ── */
.ft{position:relative;overflow:hidden;padding:var(--sec) 0 calc(28px + env(safe-area-inset-bottom));color:var(--texte-2)}
.ft-sym{position:absolute;right:-60px;top:24px;width:340px;height:auto;pointer-events:none}
.ft-sym path{fill:#E7E9EC}
.ft .wrap{position:relative}
.ft-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:36px}
.ft-brand .logo{width:96px;height:auto;margin-bottom:16px}
.ft-brand p{max-width:18ch;margin-bottom:22px;color:var(--noir);font:700 var(--t-2)/1.25 var(--f);letter-spacing:-.02em}
.ft-col{display:flex;flex-direction:column;gap:10px;font-size:var(--t-b)}
.ft-col h3{margin-bottom:6px;color:var(--texte);font:600 var(--t-s)/1.3 var(--f);letter-spacing:0}
.ft-col a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;width:fit-content;color:var(--texte-2);text-decoration:none;transition:color .2s}
.ft-col a:hover{color:var(--noir)}
.ft-col p a{display:inline;color:var(--texte);text-decoration:underline;text-underline-offset:3px}
.ft-col .soon{background:var(--carte)}
.ft-word{margin:64px 0 28px;color:#E2E4E7;font:700 min(124px,calc((min(100vw,var(--max)) - 2 * var(--gut)) / 9.6))/1.12 var(--f);letter-spacing:-.05em;white-space:nowrap;overflow:hidden}
.ft-bot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-top:20px;border-top:1px solid var(--contour);font-size:var(--t-s)}
.ft-bot a{color:var(--texte)}
.ft-legal{display:flex;flex-wrap:wrap;gap:0 18px}
.ft-legal a,.ft-home{display:inline-flex;align-items:center;min-height:44px;color:var(--texte);font-weight:500;text-decoration:none}
.ft-legal a:hover,.ft-home:hover{text-decoration:underline;text-underline-offset:3px}
.ft-anim{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:0;border-radius:var(--r-p);background:var(--carte);box-shadow:inset 0 0 0 1px var(--contour);
  color:var(--texte);font:500 var(--t-s)/1 var(--f);cursor:pointer;transition:background-color .2s}
.ft-anim:hover{background:var(--surface)}
.ft-up{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-left:auto;color:var(--texte);font:500 var(--t-s)/1 var(--f);text-decoration:none}
.ft-up::after{content:"";width:28px;height:28px;border-radius:50%;background:var(--carte) var(--ic-haut) center/14px no-repeat;box-shadow:inset 0 0 0 1px var(--contour);transition:transform .25s var(--out)}
.ft-up:hover::after{transform:translateY(-2px)}
@media (max-width:900px){.ft-top{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media (max-width:560px){.ft-top{grid-template-columns:1fr}.ft-up{margin-left:0}}

/* ── Transition vers l'analyse : la même famille de mouvements, aux couleurs de C ──
   La découverte passe en clair (31/10/2026) : un rond blanc s'ouvre depuis le bouton cliqué et efface la page,
   les trois formes du symbole déferlent (Lime, noir, gris), puis l'écran se pose sur le gris clair de la découverte
   (#F1F2F4) où le symbole se forme en noir : le passage du site à la découverte est continu. Mouvements : app.js. */
.tr{position:fixed;inset:0;z-index:100;overflow:hidden;visibility:hidden;pointer-events:none}
.tr.on{visibility:visible;pointer-events:auto}
.tr-iris{position:absolute;inset:0;background:var(--carte)}
.tr-cur svg{position:absolute;overflow:visible}
.tr-cur svg:nth-child(1) path{fill:var(--lime)}
.tr-cur svg:nth-child(2) path{fill:var(--noir)}
.tr-cur svg:nth-child(3) path{fill:var(--gris)}
.tr-end{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:26px;background:var(--fond);opacity:0}
.tr-sym{width:96px;height:auto;overflow:visible}
.tr-sym path{fill:var(--noir);opacity:0;transform-box:fill-box;transform-origin:center}
.tr-t{color:var(--texte-2);font:500 var(--t-b)/1.3 var(--f);opacity:0}

/* ── Pages d'informations légales : mentions légales, confidentialité, cookies, conditions.
   Chaque partie dans une carte blanche ; les « À compléter » restent surlignés en jaune. ── */
.lg-back{margin-left:auto}
.legal{padding:calc(var(--haut) + clamp(32px,5vw,64px)) 0 clamp(64px,8vw,104px)}
.legal-in{max-width:840px}
.legal h1{font-size:clamp(34px,4.4vw,52px);line-height:1.06;letter-spacing:-.035em}
.legal p,.legal li,.legal dd,.legal td{color:var(--texte);font-size:var(--t-b);line-height:1.65}
.legal .legal-maj{margin-top:12px;color:var(--texte-2)}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.legal-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-p);background:var(--carte);box-shadow:inset 0 0 0 1px var(--contour);
  color:var(--texte);font:500 var(--t-b)/1.2 var(--f);text-decoration:none;transition:background-color .2s}
.legal-nav a:hover{background:var(--surface)}
.legal-nav a[aria-current="page"]{background:var(--noir);color:#fff;box-shadow:none}
.legal .legal-intro{margin-top:24px;font-size:var(--t-lead);line-height:1.55}
.legal section{margin-top:16px;padding:clamp(20px,3vw,32px);border-radius:var(--r-3);background:var(--carte)}
.legal-intro + section{margin-top:32px}
.legal h2{max-width:none;margin-bottom:12px;font-size:var(--t-c);line-height:1.2;letter-spacing:-.025em}
.legal h3{margin:22px 0 8px;font-size:var(--t-2);letter-spacing:-.02em}
.legal p+p{margin-top:10px}
.legal ul{margin:10px 0 0;padding-left:20px}
.legal li+li{margin-top:8px}
.legal b,.legal dt,.legal th{color:var(--noir)}
.legal :is(p,li,dd,td) a{color:var(--noir);text-decoration:underline;text-underline-offset:3px}
.legal dl{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:10px 24px;margin:14px 0 0}
.legal dt{font-size:var(--t-b);font-weight:600;line-height:1.65}
.legal dd{margin:0}
.legal-t{width:100%;margin-top:16px;border-collapse:separate;border-spacing:0;border-radius:var(--r-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--filet)}
.legal-t th,.legal-t td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--filet)}
.legal-t th{background:var(--surface);color:var(--texte);font:600 var(--t-s)/1.3 var(--f)}
.legal-t tr:last-child td{border-bottom:0}
.legal code{padding:1px 6px;border-radius:6px;background:var(--surface);color:var(--texte);font:500 var(--t-s)/1.4 var(--f)}
.credits{list-style:none;padding:0!important}
.credits li{padding:12px 0;border-bottom:1px solid var(--filet)}
.credits li span{color:var(--texte-2)}
/* « À compléter » : visible tant que l'information manque (à remplir avant la mise en ligne). */
.todo{padding:1px 6px;border-radius:4px;background:#FFF1C9;color:#6B4E00;font-weight:600}
.ft-mini{padding:28px 0 calc(28px + env(safe-area-inset-bottom))}
.ft-mini .ft-bot{padding-top:0;border-top:0}
.ft-home{margin-left:auto}
@media (max-width:620px){.legal dl{grid-template-columns:1fr;gap:2px}.legal dd+dt{margin-top:10px}.legal-t th:nth-child(3),.legal-t td:nth-child(3){display:none}}

/* ── Animations en pause (bouton du pied de page), hors écran, et « réduire les animations » ──
   La lumière du logo (app.js) s'arrête et les formes reviennent au noir. Le survol des boutons et des icônes reste
   permis ; en mouvement réduit, il change sans fondu. */
.anim-paused *,.anim-paused *::before,.anim-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ld,.rv{opacity:1;transform:none;animation:none;transition:none}
  .hero-sym path,.final-sym path{animation:none}
  /* La lueur de la Création reste fixe : ses couleurs changent sans fondu (l'illustration est immobile) */
  .lu,.cr-lueur{transition:none}
  .btn,.btn svg,.mod-sym path{transition:none!important}
}