/* ============================================================
   Variante C — La Graine Tech.
   La marque devant, le nom en pied de page, le parcours technique
   renvoyé sur LinkedIn. On ne vend pas une techno, on vend un service :
   le mot « .NET » n'apparaît nulle part.

   Le formulaire est remplacé par un qualifieur en quatre étapes qui
   réduit le spectre au fur et à mesure. L'e-mail est demandé à la fin,
   quand la personne a investi trois clics — pas au premier écran.
   ============================================================ */

/* ---------- Fontes embarquées, aucun CDN ---------- */
/* Quicksand : la police du logo, reprise telle quelle. General Sans et
   JetBrains Mono pour le texte courant et la méta. */
@font-face{font-family:"Display";src:url(polices/quicksand.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Body";src:url(polices/general.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Mono";src:url(polices/jetbrains.woff2) format("woff2");font-weight:400 500;font-display:swap}

:root{
  --r:10px; --r-lg:18px;
  --f-display:"Display",system-ui,sans-serif;
  --f-body:"Body",system-ui,sans-serif;
  --f-mono:"Mono",ui-monospace,monospace;
  --maxw:1180px;
  --gut:clamp(20px,4vw,44px);

  /* Palette dérivée de l'identité La Graine Tech. 28 paires mesurées par
     build/contrast.js, toutes au-dessus du seuil AA.
     Le doré #C5A35A donne 2,33:1 sur fond clair : c'est un ORNEMENT, il ne
     porte jamais de texte. Il n'apparaît qu'en filet, puce ou aplat. */
  --paper:#fcfcf7; --surface:#f4f1e8; --fonce:#24443b;
  --ink:#17211c; --ink-2:#4e5a53; --ink-3:#5f6b64;
  --line:#e4e0d3;
  --accent:#1f7a52; --accent-ink:#ffffff; --accent-plein:#14543a;
  --sur-fonce:#f5f2ea; --dore-fonce:#e0c88f;
  --dore:#c5a35a;
  /* Le doré qui PORTE DU TEXTE. L'ornement (#c5a35a) donne 2,33:1 sur le
     papier : il ne peut pas écrire. Celui-ci est le même doré assombri
     jusqu'à passer le seuil AA (5,06:1 sur la page, 4,61 sur le crème) — il
     n'apparaît que dans les étiquettes de section. En sombre, le doré courant
     passe déjà largement : c'est lui qu'on reprend. */
  --dore-texte:#86682c;
  --logo-vert:#1f7a52; --logo-dore:#c5a35a; --logo-bleu:#2b6bff; --logo-encre:#17211c;
}

/* La page ouvre en clair : c'est le fond pour lequel le logo a été dessiné.
   Elle ne suit pas prefers-color-scheme, seul l'interrupteur agit.
   prefers-reduced-motion, lui, est respecté. */
:root[data-theme="light"]{
  --paper:#fcfcf7; --surface:#f4f1e8; --fonce:#24443b;
  --ink:#17211c; --ink-2:#4e5a53; --ink-3:#5f6b64;
  --line:#e4e0d3;
  --accent:#1f7a52; --accent-ink:#ffffff; --accent-plein:#14543a;
  --sur-fonce:#f5f2ea; --dore-fonce:#e0c88f; --dore:#c5a35a; --dore-texte:#86682c;
  --logo-vert:#1f7a52; --logo-dore:#c5a35a; --logo-bleu:#2b6bff; --logo-encre:#17211c;
}
/* Le vert pousse d'origine donne 3,79:1 sur fond sombre : il est éclairci
   ici, logo compris — d'où les couleurs du SVG passées en variables. */
:root[data-theme="dark"]{
  --paper:#101613; --surface:#17211c; --fonce:#0b100e;
  --ink:#f1f3ee; --ink-2:#a7b3ac; --ink-3:#9aa69f;
  --line:rgba(255,255,255,.11);
  --accent:#3fbf83; --accent-ink:#07130d; --accent-plein:#7fdcaa;
  --sur-fonce:#f1f3ee; --dore-fonce:#d9be7e; --dore:#d9be7e; --dore-texte:#d9be7e;
  --logo-vert:#3fbf83; --logo-dore:#d9be7e; --logo-bleu:#6e96ff;
}

/* ---------- Socle ---------- */
*{box-sizing:border-box}
img,svg{max-width:100%}
/* « clip » et non « hidden ». Les deux coupent ce qui dépasse à droite, mais
   « hidden » fait du corps de page un CONTENEUR DE DÉFILEMENT — ce qui n'a
   aucun effet visible sur ordinateur, et change tout pour un élément collant
   sur iPhone : l'en-tête ne se cale plus sur la fenêtre mais sur ce conteneur,
   et se retrouve posé de travers pendant le défilement. « clip » coupe sans
   rien créer, et l'en-tête retrouve la fenêtre pour référence.
   Signalé sur Safari, y compris en navigation privée — donc pas un cache. */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,fieldset{margin:0}
ul{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
a{color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}
:where(a,button,input,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:9995;padding:12px 18px;background:var(--accent);color:var(--accent-ink);font-size:14px}
.skip:focus{left:0}

/* ---------- Grain ---------- */
/* feTurbulence en SVG inline : ~400 octets, aucune requête. Sur fond clair il
   faut multiply et une opacité plus basse — overlay, qui va bien sur le noir,
   pose un voile gris sur le crème. */
:root[data-grain="on"] body::after{
  content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"][data-grain="on"] body::after{opacity:.05;mix-blend-mode:overlay}

/* ---------- Voile de transition ---------- */
/* Vert vers doré : les deux couleurs de la marque, dans l'ordre du logo.
   Sert la bascule de thème et de langue, pour masquer le remplacement. */
.wipe{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  transform:scaleY(0);transform-origin:bottom;
  background:linear-gradient(180deg,var(--accent),var(--dore));
  transition:transform .4s cubic-bezier(.7,0,.2,1);
}
.wipe.on{transform:scaleY(1);transform-origin:top}

/* ---------- Curseur de saisie ---------- */
/* Le seul ornement animé du héros, et il rappelle les nœuds « circuit » du
   logo : la marque dit nature + tech, la page aussi. */
.caret{
  display:inline-block;width:.055em;height:.74em;margin-left:.06em;
  background:var(--accent);vertical-align:baseline;
  animation:clignote 1.15s steps(1,end) infinite;
}
@keyframes clignote{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- Bandeau défilant ---------- */
/* Texte détouré : présent à l'écran, léger à l'œil. Les losanges reprennent le
   doré, qui ne porte jamais de texte mais fait très bien les ornements. */
/* Le bandeau du héros est ANCRÉ EN BAS DE FENÊTRE tant qu'on est en haut de
   page, puis il s'en va. C'est un panneau d'entrée : il dit en trois mots ce
   qu'on sait faire, pendant qu'on lit le titre. Passé le héros il n'a plus
   rien à apprendre à personne et il ne fait que manger de la place. */
.marquee{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  overflow:hidden;border-top:1px solid var(--line);padding:14px 0;
  background:color-mix(in oklab,var(--surface) 92%,transparent);
  backdrop-filter:blur(12px) saturate(150%);
  transition:transform .55s cubic-bezier(.3,0,.2,1),opacity .4s ease;
}
.marquee.parti{transform:translateY(105%);opacity:0;pointer-events:none}
.marquee-track{display:inline-flex;white-space:nowrap;animation:mq 46s linear infinite}
.marquee-item{
  font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.4vw,34px);
  color:transparent;-webkit-text-stroke:1.1px var(--accent);
  padding:0 20px;display:inline-flex;align-items:center;gap:20px;letter-spacing:-.01em;
}
.marquee-dot{color:var(--dore);-webkit-text-stroke:0;font-size:.42em}

@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Frise de section ---------- */
/* Une frise par partie, qui reprend le vocabulaire de CETTE partie. Même
   principe que le bandeau du héros, à un poids visuel bien plus faible : on
   veut une respiration en tête de section, pas une deuxième affiche. Le sens
   de défilement alterne d'une section à l'autre. */
/* LA FRISE RESTE DANS LA COLONNE DE TEXTE, et s'y éteint symétriquement.
   Deux essais ont été nécessaires. Elle commençait à gauche du titre et se
   faisait couper net à droite : elle se lisait comme un débordement — « le
   défilement doit être centré, pas à gauche ». Elle est alors passée d'un bord
   à l'autre de la fenêtre : trop loin dans l'autre sens — « attention au
   défilement centré dans la zone de contenu, là ça débordait ». Elle est donc
   revenue dans la colonne, où le voile fait tout le travail : à parts égales
   de chaque côté, le texte n'est plus coupé, il s'éteint, et la bande se lit
   comme centrée sur la colonne parce qu'elle l'est. */
.frise{
  overflow:hidden;margin:0 0 clamp(28px,4vw,48px);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
.frise-track{display:inline-flex;white-space:nowrap;animation:mq 58s linear infinite}
.frise[data-sens="inverse"] .frise-track{animation-direction:reverse}
.frise-item{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);padding:0 14px;display:inline-flex;align-items:center;gap:14px;
}
.frise-item .marquee-dot{font-size:1em;color:var(--dore)}
/* LE PASSAGE D'UNE SECTION À L'AUTRE SE FAIT EN DOUCEUR.
   Au clic dans la navigation, la page sautait d'un coup : on perdait le fil,
   sans savoir si l'on était monté ou descendu. Le défilement animé rétablit ce
   repère — et il fait voir la tige pousser au passage, ce qui est justement
   ce que le décor raconte.
   Le décalage d'ancre reste posé par scroll-margin-top, sinon la section
   arriverait sous l'en-tête collant. */
:root{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  .marquee-track,.frise-track{animation:none}
  .marquee{position:static;transform:none;opacity:1}
  /* Un défilement animé qu'on n'a pas demandé donne le mal des transports à
     certaines personnes : ce n'est pas une figure de style qu'on garde par
     goût. La page saute alors instantanément, comme avant. */
  :root{scroll-behavior:auto}
}

/* ======================================================== LE DÉCOR RETENU */
/* Six traitements du défilement ont été essayés côte à côte, pilotés par
   data-essai sur <html>. C'est le SIXIÈME qui a été retenu — l'arbre — et les
   cinq autres ont été retirés le 01/08/2026, règles comme décors : elles ne
   s'appliquaient plus à rien depuis longtemps, et une règle morte finit
   toujours par se faire lire comme une règle qui compte.
   L'attribut reste posé (par le serveur, puis par le script) parce que toute
   la feuille s'y accroche : c'est le nom de la version retenue, plus un choix
   parmi d'autres. Tout se coupe en prefers-reduced-motion. */

/* Chaque essai n'affiche que ses propres décors. */
.arbre{display:none}

/* --- L'ARBRE VIVANT : tout dans le plan de la vitre --- */
/* La pousse n'est plus un ornement de marge : c'est la charpente. Un tronc
   court sur toute la hauteur visible, chaque section naît d'une branche qui
   va la chercher. Le SVG est FIXE, à la taille de la fenêtre — plus un calque
   absolu sur toute la page : c'est ce qui autorise un tronc qui ondule. La
   graine vit dans l'en-tête collant (plan de la vitre) ; tant que le tronc
   vivait dans la page, la seule courbe qui coïncidait avec elle à toute
   hauteur était la verticale. Dans le plan de la vitre, l'onde est nulle à la
   graine et s'amplifie en descendant : jonction exacte par construction, et
   le tronc respire. Ce qui appartient à la page est repositionné à chaque
   image par le script. */
.arbre{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden}
.arbre svg{display:block;overflow:visible}
.arbre .tronc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.arbre .racine{fill:var(--dore)}
.arbre .branche-g{opacity:0;transform:translateX(-14px);transition:opacity .6s ease,transform .7s cubic-bezier(.3,0,.2,1)}
.arbre .branche-g.on{opacity:1;transform:translateX(0)}
.arbre .branche{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round}
/* La liane et les vrilles se DESSINENT au lieu d'apparaître : c'est ce qui
   fait qu'une vrille s'enroule plutôt qu'elle ne surgisse. La longueur est
   mesurée à la construction et posée en style inline. */
.arbre .liane{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.35,0,.25,1)}
.arbre .vrille{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;transition:stroke-dashoffset .95s cubic-bezier(.35,0,.25,1)}
.arbre .branche-g.on .liane,.arbre .branche-g.on .vrille{stroke-dashoffset:0!important}
.arbre .feuille-b{fill:var(--accent)}
/* La fleur, semée une fois sur cinq le long de la tige. Pétales à l'accent
   comme les feuilles, cœur doré comme les bourgeons : elle n'introduit
   aucune couleur nouvelle, elle recompose celles qui existent. Les pétales
   sont légèrement transparents pour qu'ils se distinguent les uns des autres
   là où ils se recouvrent. */
.arbre .petale{fill:var(--accent);opacity:.72}
.arbre .coeur-fleur{fill:var(--dore)}
.arbre .bourgeon{fill:var(--dore)}
/* Les feuilles du tronc poussent depuis leur point d'attache : leur tracé
   part de l'origine locale, que le groupe porteur pose sur la tige — le
   grossissement s'y ancre donc naturellement. Léger rebond de sortie. */
.arbre .pousse-t{transform:scale(0);opacity:0;transition:transform .8s cubic-bezier(.34,1.45,.5,1),opacity .45s ease}
.arbre .pousse-t.on{transform:scale(1);opacity:1}
/* La graine voyageuse s'éteint en douceur quand la pousse touche au but :
   elle se plante là où elle est arrivée, elle ne disparaît pas d'un coup.
   Corps doré, feuilles à l'accent — la palette du logo, en miniature. */
.arbre .pointe-graine{opacity:0;transition:opacity .6s ease}
.arbre .pointe-graine.on{opacity:1}
.arbre .pg-corps{fill:var(--dore)}
.arbre .pg-feuille{fill:var(--accent)}
/* Les racines du pied de page : le même dessin-au-déroulé que les lianes. */
.arbre .racine-b{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;opacity:.7;transition:stroke-dashoffset 1.2s cubic-bezier(.35,0,.25,1)}
.arbre .branche-g.on .racine-b{stroke-dashoffset:0!important}
/* Les fruits d'or de la marque : la graine du haut devient un petit arbre en
   fin de parcours. opacity se borne toute seule à [0,1] : rien ne s'affiche
   avant que --pousse-logo ne dépasse 0,8. */
.brand .fruit-logo{fill:var(--dore);opacity:calc((var(--pousse-logo,0) - 0.8)*5);transition:opacity .3s ease}
.arbre .fruit{fill:none;stroke:var(--accent);stroke-width:2}
.arbre .fruit-glyphe{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* --- ESSAI 6 : les offres comme fruits de branches --- */
/* Reprend l'arbre de l'essai 5, mais les offres quittent la grille 2×2 pour
   une colonne accrochée au tronc : chaque carte est au bout de sa branche.
   La carte la plus proche du centre de l'écran se déploie, les autres gardent
   leur icône, leur verbe et leur titre — on sait toujours ce qu'il y a — mais
   replient leur description.
   Le repli fait bouger ce qui suit. C'est assumé : ça ne concerne que des
   cartes situées hors du champ de lecture, jamais celle qu'on lit. */
:root[data-essai="6"] .arbre{display:block}
/* Une colonne sous 1180 px, DEUX au-delà : au-dessus de cette largeur une
   carte seule laissait la moitié droite vide, et la section n'en finissait
   pas. La gouttière centrale est large — c'est par là que passe le rameau qui
   dessert la carte de droite. */
:root[data-essai="6"] .offres{grid-template-columns:1fr;gap:16px}
:root[data-essai="6"] .offre{transition:opacity .4s ease,border-color .35s ease,box-shadow .35s ease,transform .45s cubic-bezier(.22,1.15,.36,1)}
:root[data-essai="6"] .offre:hover{transform:translateY(-3px)}
:root[data-essai="6"] .offre.actif{
  border-color:var(--accent);
  box-shadow:0 18px 44px -26px color-mix(in oklab,var(--accent) 60%,transparent);
}
/* LES FRUITS, sur le bord de la carte.
   Ils remplacent la feuille qui poussait au coin, et la branche qui allait
   chercher chaque carte depuis le tronc. L'idée est de Boubakar : « des
   fruits de la même couleur que le tech, qui ressortent de la zone
   légèrement, comme des fruits d'un arbre ».
   Trois choix suivent de là :
   - ils DÉBORDENT à moitié du bord, sinon ce sont des pastilles posées
     dedans, pas des fruits qui poussent hors du feuillage ;
   - ils sont DORÉS. Le bleu circuit avait été essayé d'abord, pour dire la
     technique : trop vif sur cette palette, il tirait l'œil plus que le
     texte. Le doré est la couleur de la graine, des bourgeons et de la cime —
     un fruit doré se lit comme un fruit, sans qu'on ait à l'expliquer. Le
     bleu reste en réserve : il suffit de rechanger cette ligne, et les
     variantes essayées sont dans captures/fruits-*.png ;
   - PAS de pédoncule. Un trait descendant du fruit vers la carte a été
     essayé : il donnait des punaises plantées, pas des fruits. La bordure de
     la carte EST la branche — le fruit posé à cheval dessus tient déjà à
     quelque chose. */
.fruits{display:none}
:root[data-essai="6"] .fruits{
  display:block;position:absolute;inset:0;pointer-events:none;overflow:visible;
}
:root[data-essai="6"] .fruits i{
  position:absolute;display:block;border-radius:50%;
  background:var(--dore);
  /* Un liseré de la couleur du fond détache le fruit de la bordure qu'il
     chevauche : sans lui, les deux se confondent en un pâté. */
  box-shadow:0 0 0 3px var(--paper);
  transform:scale(0);transform-origin:center;
  transition:transform .55s cubic-bezier(.34,1.4,.5,1),opacity .35s ease;
  opacity:0;
}
/* Les fruits ne surgissent pas tous ensemble : un léger décalage donne
   l'impression qu'ils mûrissent, pas qu'ils s'allument. */
:root[data-essai="6"] .offre .fruits i{transition-delay:0s}
:root[data-essai="6"] .offre.vu .fruits i{transform:scale(1);opacity:1}
:root[data-essai="6"] .offre.vu .fruits i:nth-child(2){transition-delay:.12s}
:root[data-essai="6"] .offre.vu .fruits i:nth-child(3){transition-delay:.22s}
/* Sur la carte survolée ou active, ils grossissent d'un cheveu — assez pour
   qu'on sente la carte réagir, pas assez pour qu'elle gigote. */
:root[data-essai="6"] .offre:hover .fruits i,
:root[data-essai="6"] .offre.actif .fruits i{transform:scale(1.12)}
:root[data-essai="6"] .offre{position:relative;overflow:visible}
/* LA JEUNE POUSSE AU COIN, en face des fruits.
   Boubakar, en regardant le qualifieur : « on pouvait s'inspirer en plus de ce
   que tu as fait, petite feuille au-dessus, mais voir celui de ce que je
   fais ». C'est exactement la même forme que la pousse qui sort de la tuile
   choisie dans le formulaire (.tuile .pousse) : un carré à deux coins
   arrondis opposés, penché. Le motif circule ainsi d'un bout à l'autre de la
   page au lieu d'exister à un seul endroit.
   Elle est VERTE quand les fruits sont dorés, et elle est à GAUCHE quand ils
   sont à droite : une carte porte une feuille et des fruits, aux deux bouts
   de la même branche. Elle sort AVANT eux — une plante fait ses feuilles
   d'abord. */
:root[data-essai="6"] .offre::before{
  content:"";position:absolute;left:26px;top:-9px;width:15px;height:15px;
  background:var(--accent);border-radius:0 100% 0 100%;
  transform-origin:bottom left;transform:rotate(-24deg) scale(0);
  transition:transform .5s cubic-bezier(.34,1.45,.5,1);
  pointer-events:none;
}
:root[data-essai="6"] .offre.vu::before{transform:rotate(-24deg) scale(1)}
:root[data-essai="6"] .offre:hover::before,
:root[data-essai="6"] .offre.actif::before{transform:rotate(-16deg) scale(1.1)}

/* Le repli des cartes est abandonné : sur deux colonnes il déséquilibrait la
   rangée — une carte dépliée à côté d'une carte repliée — et il faisait bouger
   tout ce qui suit. Les quatre offres sont lisibles d'un coup ; la carte
   active se signale par sa bordure et sa feuille, pas en cachant les autres. */

/* Calage doux : la page se pose sur la section la plus proche à l'arrêt, mais
   ne bloque jamais le défilement. Molette, pavé tactile et clavier gardent
   leur comportement habituel.

   DEUX RESTRICTIONS, apprises à l'usage :

   1. Seulement sur grand écran. Sur téléphone, chaque section est bien plus
      haute que l'écran : le calage n'a rien à caler, et il gêne.

   2. JAMAIS sur la dernière section. Quand la section finale est plus haute
      que la fenêtre, le navigateur s'ancre à son début et REFUSE de descendre
      plus bas : le pied de page devient inatteignable — mesuré, 227 px hors
      d'atteinte, et le défilement qui bute sans raison visible. C'est le
      « scroll à la fin qui est trop » signalé par Boubakar. Le formulaire est
      justement la dernière section : elle ne se cale plus. */
@media (min-width:1180px){
  :root[data-essai="6"]{scroll-snap-type:y proximity}
  :root[data-essai="6"] .hero,
  :root[data-essai="6"] .band{scroll-snap-align:start;scroll-margin-top:78px}
  /* La bande qui porte le formulaire garde son décalage d'ancre — utile aux
     liens de navigation — mais pas son point de calage. */
  :root[data-essai="6"] .cta{scroll-margin-top:78px}
  /* LA DERNIÈRE BANDE NE SE CALE PAS. Sous elle il n'y a plus qu'un pied de
     page de cent dix-sept pixels : moins que la moitié d'un écran, donc le
     calage « proximity » ramenait invariablement au début de la section et le
     pied devenait inatteignable — « le dernier scroll semble bugger, on
     n'accède plus au footer ». Mesuré : 2936 px au lieu des 3053 disponibles.
     Le calage n'a de sens qu'entre deux sections de la taille d'un écran ;
     ici, il n'y a plus de section suivante. */
  :root[data-essai="6"] main > .band:last-child{scroll-snap-align:none}
  /* LE MUR DÉBORDE la colonne de texte de quarante pixels de chaque côté.
     C'est le seul bloc à qui on l'accorde : il n'a pas de ligne à aligner sur
     l'axe du texte, et ces quatre-vingts pixels sont exactement ce qui permet
     de garder des cases de 268 px plutôt que de 248 en passant à quatre par
     rangée. Vérifié à 1180, 1280 et 1440 : le bord droit du mur reste à plus
     de cinquante pixels des pastilles de navigation. */
  :root[data-essai="6"] .mur{margin-inline:-40px}
}:root[data-essai="6"] body{position:relative}
:root[data-essai="6"] .band,:root[data-essai="6"] .cta{background:transparent}
:root[data-essai="6"] .band-creme{background:color-mix(in oklab,var(--surface) 82%,transparent)}
:root[data-essai="6"] .offre{background:color-mix(in oklab,var(--paper) 88%,transparent)}
/* La jointure — enroulure de vrille puis fil qui s'éteint — sépare les
   rangées de cartes. Contrairement à la liane du décor, elle reste à toutes
   les largeurs : l'arbre disparaît sous 1180 px, et sans elle il ne resterait
   qu'un trait de tableau, exactement ce qu'on cherchait à quitter. */
/* Les jointures sont des enfants DIRECTS de la grille, pas des cartes : sur
   deux colonnes une jointure doit occuper toute la rangée, ce qu'un enfant de
   carte ne peut pas faire. Elles occupent les positions 2, 4 et 6. */
:root[data-essai="6"] .offres > .jointure{display:flex;margin:4px 0}
@media (min-width:1180px){
  /* LE CONTENU EST CENTRÉ, entre deux marges égales.
     Il était décalé vers la droite, avec une gouttière de 320 à 430 px à
     gauche : c'est par là que passaient le tronc et ses branches. Les
     branches sont retirées, et le contenu doit être centré « même si ça prend
     une bonne largeur » — la mise en page redevient donc symétrique.
     Les deux marges se répondent : l'arbre descend dans celle de gauche, la
     navigation vit dans celle de droite. Leur largeur est dictée par la plus
     exigeante des deux — le nom de section, mesuré à 126 px, plus son point.
     Le plafond à 1560 px n'est là que pour les très grands écrans : au-delà,
     la page cesse de s'étaler. */
  :root[data-essai="6"] .wrap{
    max-width:1560px;
    padding-inline:clamp(155px,12vw,190px);
  }
  /* L'EN-TÊTE A SA PROPRE GOUTTIÈRE — plus resserrée que la colonne de texte.
     Le tronc de la page est calé sur la tige du logo : ils ne font qu'une
     seule plante, la marque en haut et la page dessous. Le logo doit donc être
     dans la gouttière et non dans la colonne de contenu — sinon le tronc
     descendrait au milieu du texte. Mais rien n'oblige à centrer la marque au
     milieu d'une gouttière de 126-180 px : Boubakar a demandé de la ramener
     vers la gauche, quitte à rapprocher la jonction avec le tronc, et de
     profiter de l'espace repris pour l'agrandir. Les étiquettes de navigation
     La navigation, elle, a quitté cette gouttière pour le rail de droite. */
  /* La même symétrie optique qu'en version compacte, et pour la même raison :
     le dessin du logo commence sept pixels après sa balise. La marge de droite
     est donc DÉRIVÉE de celle de gauche plutôt que déclarée à part — deux
     clamps indépendants divergeaient à chaque largeur, et l'écart atteignait
     treize pixels à 1180. */
  :root[data-essai="6"] .head .wrap{padding-left:clamp(40px,4.5vw,72px);padding-right:calc(clamp(40px,4.5vw,72px) + 7px);min-height:76px}
  /* LA GRAINE RESTE VISIBLE, ET LE TRONC ONDULE QUAND MÊME.
     L'en-tête est collant : la graine du logo accompagne le visiteur tout du
     long — essai d'en-tête statique rejeté, la graine disparaissait au
     premier défilement. Le tronc vit désormais dans le MÊME plan qu'elle (le
     SVG de l'arbre est fixe) et son onde a une amplitude nulle à la graine :
     la jonction est exacte par construction, quel que soit le défilement,
     sans condamner le tronc à la verticale — le tronc droit a été essayé,
     jugé raide.
     Fond OPAQUE : à travers le voile translucide, le tronc qui passe derrière
     l'en-tête se devinait AU-DESSUS de la graine — une plante ne continue pas
     au-dessus de sa graine. */
  :root[data-essai="6"] .head{background:var(--paper);backdrop-filter:none}
  :root[data-essai="6"] .offres{grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,28px) clamp(52px,5.5vw,92px)}
  /* Deux colonnes : une seule jointure subsiste, celle qui sépare les deux
     rangées. Les deux autres sépareraient des cartes côte à côte, ce qui n'a
     pas de sens. */
  :root[data-essai="6"] .offres > .jointure{display:none}
  :root[data-essai="6"] .offres > .jointure:nth-child(4){display:flex}
}
/* Sous 360 px (vieux téléphones étroits), pas de place du tout : l'arbre
   s'efface, le rail du bord droit assure seul la navigation. */
@media (max-width:359px){
  :root[data-essai="6"] .arbre{display:none}
}

/* L'EN-TÊTE EST OPAQUE À TOUTE LARGEUR. Le fond translucide et son flou
   avaient déjà été retirés sur grand écran, pour une raison qui n'a rien à
   voir avec la largeur : le tronc passe DERRIÈRE l'en-tête et se devinait
   au-dessus de la graine — une plante ne continue pas au-dessus de sa graine.
   La correction était restée enfermée dans le média « grand écran », si bien
   que le défaut survivait exactement là où il se voit le plus. Signalé sur
   iPhone le 01/08/2026 : « on voit derrière au-dessus, ce n'est pas normal ».
   Un flou de fond sur un élément collant coûte en plus une couche de
   composition que le téléphone traîne à chaque image de défilement. */
:root[data-essai="6"] .head{background:var(--paper);backdrop-filter:none}

/* L'EN-TÊTE EST SYMÉTRIQUE À L'ŒIL, À TOUTE LARGEUR DE TÉLÉPHONE ET DE
   TABLETTE. Rapprocher la marque du bord sans toucher à l'autre côté laissait
   le bouton de thème quatre fois plus loin de SON bord que le logo du sien :
   l'en-tête paraissait tassé vers son milieu.
   Les deux nombres sont mesurés, pas choisis. La balise de la marque commence
   à 12 px, mais son ENCRE — le dessin lui-même, relevé au getBBox — ne
   commence qu'à 18,7 : il y a du vide dans le SVG. Poser le bouton à 18 px du
   bord droit met les deux DESSINS à la même distance de leur bord. Aligner les
   deux balises aurait donné la symétrie que déclare le code, pas celle que
   l'œil voit.
   La règle porte jusqu'en dessous de 360 px, où l'arbre s'efface : la symétrie
   d'un en-tête ne dépend pas de la présence d'une plante. */
@media (max-width:1179px){
  :root[data-essai="6"] .head .wrap{padding-left:12px;padding-right:18px}
  /* La marque est un lien : sous le doigt, elle doit faire quarante-quatre
     pixels de haut comme les autres. Elle en faisait trente-huit. Rien ne
     bouge à l'écran — l'en-tête en fait soixante-dix — seule la zone
     touchable grandit. */
  :root[data-essai="6"] .brand{min-height:44px}
}
/* LA VERSION COMPACTE (360 à 1179 px) : la majorité des visiteurs sont sur
   mobile, la plante doit y vivre aussi — toutes proportions gardées, mais
   réduites. Le tronc n'est plus calé sur la tige du logo : il n'y a pas la
   place d'accueillir tronc ET colonne de texte pleine largeur dans une
   gouttière de 20 px. Il vit dans une fine bande fixe à gauche, dans la marge
   existante — élargie ici (--gut) pour lui faire un peu de place. Le JS
   (mode « compact ») retire les branches vers les cartes et les titres —
   aucune ne tiendrait sans traverser le texte — et ne garde que le tronc, la
   graine voyageuse, quelques feuilles et les racines du bas. La navigation,
   elle, est la même partout : le rail du bord droit.
   L'EN-TÊTE A AUSSI SA PROPRE MARGE, plus étroite que --gut : la marque s'en
   rapproche du bord, ce qui raccourcit d'autant le greffon qui la relie à la
   bande (voir dessiner()) — la jonction se voit moins. */
@media (min-width:360px) and (max-width:1179px){
  /* La gouttière fait la place au tronc, qui descend de la graine du logo et
     reste dans son axe — même comportement qu'en desktop. Elle grandit avec
     l'écran : 54 px sur un téléphone étroit, jusqu'à 68 sur une tablette.
     Le calcul, à la largeur la plus exposée (360 px) : la graine tombe vers
     39 px, le texte commence à 54 ; l'onde débat de ±4 px et les feuilles
     s'évasent de 6 au pire, soit 45 px au plus loin — 9 px de dégagement
     avant la première lettre. Vérifié à l'écran, pas seulement calculé. */
  :root[data-essai="6"]{--gut:clamp(54px,8vw,68px)}
  /* La marque reste près du bord : c'est elle qui donne son axe au tronc, et
     l'éloigner du bord éloignerait le tronc du même coup — donc mordrait sur
     le texte.
     MESURÉ SUR IPHONE 15 PRO (393 px), le 01/08/2026 : la graine tombait à
     37,7 px et le texte commençait à 54. L'onde débat de ±6 et les feuilles
     s'évasent encore : il restait quatre à cinq pixels entre la plante et la
     première lettre. Ça ne se lit pas comme une marge, ça se lit comme un
     frottement. On écarte des deux côtés à la fois — six pixels pris au bord
     pour la marque, six rendus au texte — parce que déplacer la plante seule
     l'aurait collée au bord, et déplacer le texte seul aurait mangé une
     colonne déjà étroite. */
  /* À GAUCHE SEULEMENT. La gouttière de ce côté n'est pas une marge : c'est le
     couloir de la plante, et il n'a pas de raison d'avoir la même largeur que
     le vide de droite, qui ne loge rien. Le texte perd six pixels, la
     respiration en gagne douze. */
  :root[data-essai="6"] .wrap{padding-left:calc(var(--gut) + 6px)}
}

/* TÉLÉPHONE. Six pixels de colonne rendus à la plante, ça se reprend sur les
   cartes — leur rembourrage, pas leur texte. Et un cran de corps sur les gros
   titres : à 38 px, un titre de trois lignes occupe le tiers de l'écran et
   pousse tout le reste hors de vue. Rien ne descend sous le seuil de lecture
   confortable : le texte courant reste à 15 px, intouché. */
@media (max-width:560px){
  :root[data-essai="6"] .hero h1{font-size:35px}
  :root[data-essai="6"] .band h2{font-size:26px}
  :root[data-essai="6"] .offre{padding:16px 18px}
  :root[data-essai="6"] .offre h3{font-size:20px}

  /* LE PIED RESPIRE. Ses trois blocs — la pousse, la signature, les liens —
     retombent chacun sur sa ligne, et quatorze pixels entre deux lignes, c'est
     l'écart d'un paragraphe, pas celui de trois blocs distincts. Le pied d'une
     page est le dernier endroit où l'on doit avoir l'impression de manquer de
     place : plus rien ne suit, autant finir large. */
  :root[data-essai="6"] .foot{padding-block:44px}
  /* CENTRÉ SUR TÉLÉPHONE. Les trois blocs retombent chacun sur sa ligne ; à
     gauche, ils formaient une colonne alignée sur un bord que plus rien ne
     justifie une fois la lecture finie. Centrés, ils se lisent comme une
     signature de bas de page. La ligne reste à trois pixels du centre exact —
     la gouttière de gauche est plus large de six, elle abrite la plante — et
     trois pixels sur 393, personne ne les voit. */
  :root[data-essai="6"] .foot .wrap{gap:22px 24px;justify-content:center;text-align:center}
  /* Le « margin-left:auto » pousse les liens à droite quand tout tient sur une
     ligne. Ici ils sont seuls sur la leur : la poussée n'a plus rien à
     compenser, et elle les décrocherait de l'alignement de la signature. */
  /* L'écart entre les liens est mesuré, pas choisi : les trois font 239 px à
     eux seuls pour 279 de large. À 24 px d'écart ils passaient sur deux
     lignes — un pied qui a l'air d'avoir raté son coup. À 16 ils tiennent sur
     une, avec huit pixels de reste. Et le retour à la ligne reste AUTORISÉ :
     sous 360 px de fenêtre ils ne tiendraient plus, et déborder serait pire
     que revenir à la ligne. */
  :root[data-essai="6"] .foot .sep{
    margin-left:0;flex-wrap:wrap;gap:12px 16px;
    /* La pleine largeur d'abord, sinon « centrer » ne centrerait que le bloc
       de liens dans sa propre boîte — qui fait déjà la largeur du texte. */
    width:100%;justify-content:center;
  }
}
/* ÉCRANS BAS : on resserre encore, pour qu'une section tienne dans la vue.
   La règle porte sur la HAUTEUR, pas sur la largeur — c'est la hauteur qui
   manque sur un portable — 800 comme 900 px de haut — alors que la largeur,
   elle, suffit.
   Mesuré : la section des offres faisait 915 px pour une fenêtre de 800. On
   rogne les blancs et un point de corps, jamais le texte lui-même. */
@media (min-width:1180px) and (max-height:930px){
  :root[data-essai="6"] .band{padding-block:30px}
  :root[data-essai="6"] .offres{margin-top:16px}
  :root[data-essai="6"] .offre{padding:14px 20px;gap:7px}
  :root[data-essai="6"] .offre h3{font-size:19px}
  :root[data-essai="6"] .offre p{font-size:14px}
  /* MÊME TRAITEMENT POUR « ILS M'ONT FAIT CONFIANCE », la plus haute des
     sections. Elle est passée de 1670 à environ 900 px sans qu'on touche à la
     taille des logos, qui doivent rester grands — ce sont de grands noms :
     le bloc « Qui est derrière » a pris sa propre section (c'était un autre
     sujet), les sept marques tiennent sur deux rangées au lieu de trois, et
     ce qui reste ici n'est que du blanc repris entre les blocs. */
  :root[data-essai="6"] #references .frise{margin-bottom:26px}
  :root[data-essai="6"] #references .chiffres{margin-top:22px}
  :root[data-essai="6"] .chiffres .nb{font-size:46px}
  :root[data-essai="6"] .mur{margin-top:20px}
  /* La mention légale reste lisible : on lui donne des lignes plus longues
     plutôt qu'un corps plus petit, elle passe de trois lignes à deux. */
  :root[data-essai="6"] .mur-note{margin-top:12px}
}

/* Les décors des essais 3 (pousse en filigrane) et 4 (page qui mûrit) ont été
   retirés le 01/08/2026 : plus aucun balisage ne les portait depuis que
   l'essai 6 a été retenu, et une règle qui ne s'applique à rien finit par se
   faire lire comme une règle qui compte. Ils vivent dans l'historique git. */

/* ---------- Tige-circuit (essai 1) : retirée ----------
   Le décor de l'essai 1 vivait ici : une tige dans la gouttière GAUCHE, avec
   ses nœuds et sa fleur. Ses règles ont été supprimées le 31/07/2026 parce
   qu'elles restaient actives alors que l'essai n'existe plus : leur
   « position:fixed; left:… » s'ajoutait au « right:… » de la navigation
   actuelle, qui se retrouvait plaquée à gauche, par-dessus l'arbre.
   Le vocabulaire visuel (nœud, pictogramme, halo doré, floraison au sommet) a
   été repris par la navigation de droite ; l'original reste consultable avec
   « git show ffdac95:build/template-c.html ». */

/* Repli sous 1000 px : la gouttière n'existe plus, donc l'essai 1 emprunte le
   traitement de l'essai 2 — les nœuds près des titres, sans le fil continu.
   C'est le repli annoncé, pas une disparition pure et simple. */
.titre .noeud-mobile{display:none}

/* Le logo n'a plus de battement autonome. Une pulsation en boucle vit sa
   propre vie, sans rapport avec ce que fait le lecteur ; elle finit par se
   lire comme un défaut d'affichage. Tout ce qui bouge dans le logo est
   maintenant piloté par la progression de lecture — voir --pousse-logo. */

/* ---------- Navigation : la graine qui devient arbre ---------- */
/* Elle vit à DROITE et se lit de bas en haut : la graine au pied, la
   floraison au sommet. La tige de gauche descend avec la lecture ; celle-ci
   monte avec ce qui a poussé. Les deux mouvements se répondent au lieu de se
   répéter — deux verticales identiques auraient fait schéma.

   Ce ne sont pas quatre puces interchangeables : chaque pictogramme est
   l'étape suivante de la même plante (graine, pousse, arbre, floraison). La
   progression est portée par la métaphore, pas par un numéro d'étape.

   Du vrai HTML : des liens focalisables et annoncés. Le script n'ajoute que
   la progression — sans lui, la navigation fonctionne toujours. */
.rail{display:none}
/* Elle existe à TOUTES les largeurs, et garde partout la même nature :
   verticale, les mêmes pastilles, le même ordre. Sur petit écran elle change
   seulement de place et de taille — une navigation qui change de forme d'un
   écran à l'autre s'apprend deux fois. */
:root[data-essai="6"] .rail{
  display:block;position:fixed;z-index:40;
  right:clamp(12px,2.4vw,38px);
  /* La zone est traversante : seuls les liens captent le pointeur, pour
     qu'un clic à côté atteigne toujours le contenu. */
  pointer-events:none;
}
@media (min-width:1180px){
  :root[data-essai="6"] .rail{top:50%;transform:translateY(-50%)}
}
.rail ol{
  /* DE HAUT EN BAS, comme la page. La colonne était inversée — la graine au
     pied, la floraison au sommet — pour que la plante pousse vers le haut.
     À l'usage, c'est déroutant : « il faudra également inverser la
     navigation, ce n'est pas très intuitif ». Le premier point est en haut
     parce que la première section est en haut, et la progression descend
     comme le regard. La plante, du coup, pousse dans le même sens que la
     liane de gauche, qui descend elle aussi avec la lecture. */
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:clamp(22px,3.4vh,40px);
}
.rail a{
  position:relative;display:flex;align-items:center;justify-content:flex-end;
  gap:12px;text-decoration:none;pointer-events:auto;padding:3px 0;
}
/* La tige de fond, et la part parcourue par-dessus. Deux traits superposés
   plutôt qu'un dégradé : la limite entre le fait et le reste à faire doit
   être nette. */
.rail-tige{
  position:absolute;right:13px;top:6px;bottom:6px;width:2px;
  background:var(--line);border-radius:2px;
}
.rail-tige i{
  position:absolute;left:0;right:0;top:0;bottom:0;border-radius:2px;
  background:var(--accent);
  /* --pousse-rail va de 0 à 1 : la tige DESCEND depuis le haut, dans le sens
     de la lecture (elle montait quand la colonne était inversée).
     scaleY plutôt qu'une hauteur en pourcentage : le parent tire sa hauteur
     de top/bottom, sans hauteur déclarée, et un pourcentage n'a alors rien
     sur quoi se résoudre — mesuré à 0 px pendant que la variable valait bien
     0,546. La transformation, elle, ne dépend d'aucune résolution, et elle
     s'anime sans refaire la mise en page. */
  transform:scaleY(var(--pousse-rail,0));
  transform-origin:top center;
  transition:transform .45s cubic-bezier(.3,0,.2,1);
}
.rail-pt{
  position:relative;flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--paper);border:2px solid var(--line);
  transition:border-color .35s ease,background-color .35s ease,transform .4s cubic-bezier(.34,1.4,.5,1);
}
.rail-pt svg{width:18px;height:18px;display:block;overflow:visible}
/* Le pictogramme suit l'état du point : gris au repos, accent une fois
   atteint. La couleur est portée par currentColor, donc une seule règle
   suffit à faire basculer trait et remplissage ensemble. */
.rail-pt{color:var(--ink-3)}
.rail .g-trait{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail .g-plein{fill:currentColor}
.rail .g-or{fill:var(--dore)}
.rail-nom{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
  /* Le nom fait une centaine de pixels : plus large que la marge réservée aux
     points. Il passe donc DEVANT le contenu quand il se montre, et il lui
     faut son propre fond — sans quoi il se lit par-dessus un titre, ce qui ne
     se lit pas du tout. */
  padding:4px 9px;border-radius:99px;
  background:color-mix(in oklab,var(--paper) 88%,transparent);
  backdrop-filter:blur(6px);
  /* Le nom se retire quand il n'est pas utile, mais reste ATTEIGNABLE : on le
     décale et on l'estompe, jamais display:none — un lecteur d'écran doit
     continuer de l'annoncer. */
  opacity:0;transform:translateX(8px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.3,0,.2,1),color .25s ease;
}
/* Les noms se montrent UN À UN : celui qu'on survole, celui qui a le focus, et
   celui de la section courante. Montrer les quatre au survol du rail entier a
   été essayé : ils débordent tous ensemble sur les cartes, et le fond de
   chacun se découpe sur le contenu — « ça mord un peu ». Un seul nom à la
   fois suffit à savoir où l'on va. */
.rail a:hover .rail-nom,
.rail a:focus-visible .rail-nom,
.rail a.ici .rail-nom{opacity:1;transform:translateX(0)}
.rail a:hover .rail-nom{color:var(--ink)}
.rail a.ici .rail-nom{color:var(--accent)}
.rail a:hover .rail-pt,.rail a:focus-visible .rail-pt{
  border-color:var(--logo-bleu);color:var(--logo-bleu);transform:scale(1.1);
}
/* Le point atteint : passé, on le laisse marqué — c'est ce qui donne le
   sentiment d'avoir avancé. */
.rail a.passe .rail-pt{border-color:var(--accent);color:var(--accent)}
.rail a.ici .rail-pt{
  border-color:var(--accent);color:var(--accent);
  background:color-mix(in oklab,var(--accent) 12%,var(--paper));
  transform:scale(1.16);
}
/* Le halo doré à l'arrivée sur une section, repris du rail d'origine : le
   doré ne porte jamais de texte ici, il fait les ornements. */
.rail a.ici .rail-pt::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--dore);opacity:.55;
}
.rail a:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:8px}

/* ---------- La navigation en petit écran : la frise du bas ---------- */
/* Elle se couche. Les trois formes ont été mises côte à côte sur la même page
   — verticale en bas à droite, verticale centrée, couchée — et c'est la
   couchée qui l'emporte, pour deux raisons dans cet ordre : elle ne recouvre
   jamais la colonne de texte, alors que sur un écran étroit toute verticale
   finit par mordre dessus ; et la liane de gauche porte déjà la verticale,
   deux verticales sur un écran étroit se répètent au lieu de se répondre.
   Ce qu'on abandonne, c'est la lecture graine → floraison de bas en haut. Le
   décor la raconte déjà : elle n'avait pas à être dite deux fois.
   Les pastilles, elles, ne changent pas : même dessin, même ordre, mêmes
   états qu'au bord droit du grand écran. */
@media (max-width:1179px){
  :root[data-essai="6"] .rail{
    right:auto;left:50%;
    top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    padding:8px 12px;border-radius:100px;
    border:1px solid var(--line);
    background:color-mix(in oklab,var(--paper) 90%,transparent);
    backdrop-filter:blur(14px) saturate(160%);
    box-shadow:0 12px 36px -16px rgba(23,33,28,.45);
    pointer-events:auto;
    /* Rien pendant le héros, rien sur le formulaire : exactement la fenêtre
       qu'avait la pilule (la règle est dans majNav). */
    transform:translateX(-50%) translateY(150%);opacity:0;
    transition:transform .35s cubic-bezier(.3,0,.2,1),opacity .3s ease;
  }
  :root[data-essai="6"] .rail.on{transform:translateX(-50%) translateY(0);opacity:1}
  /* Pendant le défilement elle se retire vers le bas — voir majNav. Le retrait
     est plus rapide que le retour : on veut qu'elle libère la vue tout de
     suite, et qu'elle revienne sans sursaut. */
  :root[data-essai="6"] .rail.on.defile{
    transform:translateX(-50%) translateY(150%);opacity:0;
    transition:transform .2s ease-in,opacity .16s ease-in;
  }
  /* row et non row-reverse : l'ordre du balisage se lit de gauche à droite,
     comme la page. La colonne inversée ne sert qu'au grand écran, où la
     graine est en bas. */
  .rail ol{flex-direction:row;gap:14px}
  /* 32 px de pastille et 6 px de marge : 44 px de cible, le minimum au doigt,
     en hauteur comme en largeur — le nom étant sorti du flux, le lien se
     réduirait sinon au diamètre de la pastille, et un pouce n'est pas un
     curseur. */
  .rail a{padding:6px 0;min-width:44px}
  .rail-pt{width:32px;height:32px}
  .rail-pt svg{width:19px;height:19px}
  /* La tige devient une ligne d'horizon et la progression part de la gauche.
     scaleX pour la même raison qu'ailleurs scaleY : le parent tire sa largeur
     de left/right, sans largeur déclarée, et un pourcentage n'aurait rien sur
     quoi se résoudre. */
  .rail-tige{
    left:24px;right:24px;top:calc(50% - 1px);bottom:auto;width:auto;height:2px;
  }
  .rail-tige i{transform:scaleX(var(--pousse-rail,0));transform-origin:left center}
  /* Le nom passe AU-DESSUS : à droite, il sortirait de l'écran sur la dernière
     pastille. Sorti du flux, il n'élargit pas le cadre — sinon toute la
     navigation sauterait au moindre focus. Au doigt il ne se montre pas : un
     appui navigue déjà. Il reste là pour le clavier et les lecteurs d'écran,
     et pour la souris d'une fenêtre étroite sur grand écran. */
  .rail-nom{
    position:absolute;right:auto;left:50%;bottom:100%;margin:0 0 8px;
    transform:translateX(-50%) translateY(4px);
  }
  .rail a.ici .rail-nom{opacity:0;transform:translateX(-50%) translateY(4px)}
  .rail a:hover .rail-nom,
  .rail a:focus-visible .rail-nom{opacity:1;transform:translateX(-50%)}
  /* Le geste attendu reste présent : la pilule emportait avec elle le bouton
     « Décrire mon besoin ». La dernière pastille — la floraison, qui mène au
     formulaire — le reprend en plein. */
  :root[data-essai="6"] .rail li:last-child .rail-pt{
    background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  }
  /* Sur le vert plein, le doré ne se voit plus : le cœur de la fleur reprend
     la couleur du reste du pictogramme. */
  :root[data-essai="6"] .rail li:last-child .g-or{fill:currentColor}
}
/* Sous 420 px, la frise doit tenir entre les deux bords sans venir toucher le
   texte : pastilles plus petites, écarts resserrés. La cible garde ses 44 px
   de haut (28 + 2 × 8) et de large. */
@media (max-width:419px){
  .rail ol{gap:10px}
  .rail a{padding:8px 0}
  .rail-pt{width:28px;height:28px}
  .rail-pt svg{width:17px;height:17px}
  .rail-tige{left:22px;right:22px}
}

@media (prefers-reduced-motion:reduce){
  .rail-tige i,.rail-nom,.rail-pt{transition:none}
  :root[data-essai="6"] .rail{transition:opacity .3s ease}
}

/* ---------- Atténuation au survol ---------- */
/* Survoler une entrée éteint légèrement ses voisines : le regard est guidé
   sans qu'on ajoute une couleur. Neutralisé au doigt, faute de survol. */
.attenue > *{transition:opacity .2s ease,border-color .2s ease,transform .2s ease}
.attenue:hover > *{opacity:.45}
.attenue > *:hover{opacity:1}
@media (hover:none){.attenue:hover > *{opacity:1}}

/* ---------- Bandeau de maquette ---------- */
/* SUPPRIMER ce bloc et son markup avant toute mise en ligne réelle. */
.demo{background:var(--fonce);color:var(--sur-fonce);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:8px var(--gut);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:center}
.essais{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center}
.essais button{
  font:inherit;letter-spacing:.06em;cursor:pointer;min-height:30px;padding:5px 10px;
  border:1px solid rgba(255,255,255,.28);border-radius:99px;background:transparent;
  color:var(--sur-fonce);opacity:.72;transition:opacity .18s ease,background-color .18s ease;
}
.essais button:hover{opacity:1;background:rgba(255,255,255,.1)}
.essais button[aria-pressed="true"]{opacity:1;background:var(--dore-fonce);color:var(--fonce);border-color:var(--dore-fonce)}

/* ---------- En-tête ---------- */
.head{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:saturate(140%) blur(12px)}
.head .wrap{display:flex;align-items:center;gap:14px;min-height:70px}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0;position:relative}
/* Le raccord entre la graine du logo et le tronc de la page. Sans lui, la tige
   repart À CÔTÉ de la graine au lieu d'en sortir : deux dessins au lieu d'une
   plante. Il vit dans l'en-tête collant, donc il relie la marque à la tige
   quelle que soit la position de défilement.
   Hauteurs posées par le script, qui mesure la graine rendue. */
/* PLUS DE RACCORD SÉPARÉ.
   Deux essais ont échoué : un rectangle CSS, dont l'arrondi tombait pile là où
   le trait devait continuer, puis un second SVG posé à côté — mieux, mais
   toujours deux tracés distincts qu'il fallait faire coïncider au pixel.
   Le logo EST un SVG : c'est sa propre tige qu'on prolonge. Le script réécrit
   le « d » du chemin pour qu'il descende jusque sous l'en-tête, et
   overflow:visible laisse le dépassement s'afficher. Un seul chemin, un seul
   stroke : il n'y a plus de jonction à rater. */
.brand svg{overflow:visible}
.brand .tige-logo{transition:none}

/* Le logo suit la page. Les nœuds circuit s'allument l'un après l'autre au fil
   du défilement, et les feuilles s'ouvrent un peu : la marque avance avec le
   contenu au lieu de battre dans son coin. --pousse-logo va de 0 à 1. */
/* Plancher à 0,45 et non à 0 : le logo est la marque, il doit être COMPLET dès
   l'arrivée. Les nœuds ne s'allument pas depuis rien, ils se renforcent —
   l'un après l'autre, au fil de la lecture. */
.brand .circuit-logo{
  opacity:calc(0.45 + (((var(--pousse-logo,0) * 3) - var(--rang-c,0)) * 0.55));
  transition:opacity .5s ease;
}
.brand .circuit-logo[data-rang="0"]{--rang-c:0}
.brand .circuit-logo[data-rang="1"]{--rang-c:1}
.brand .circuit-logo[data-rang="2"]{--rang-c:2}
.brand .feuille-logo{
  transform-box:fill-box;transform-origin:bottom center;
  transform:scale(calc(0.82 + var(--pousse-logo,0) * 0.18));
  transition:transform .6s cubic-bezier(.22,1.15,.36,1);
}
.brand .graine-logo{
  transform-box:fill-box;transform-origin:center;
  transform:scale(calc(1 + var(--pousse-logo,0) * 0.35));
  transition:transform .6s cubic-bezier(.22,1.15,.36,1);
}
/* La marque grandit avec la place disponible, du téléphone au grand écran —
   même comportement partout, ce n'est pas un privilège du bureau. Le plancher
   à 38 px est la taille d'avant l'agrandissement : en dessous de ~380 px de
   fenêtre, l'en-tête doit encore loger FR/EN et le bouton de thème. */
.brand svg{height:clamp(38px,10.6vw,44px);width:auto;display:block}
.head-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:12px}
.lang button{background:none;border:0;padding:8px 3px;min-height:44px;cursor:pointer;color:var(--ink-3);letter-spacing:.06em;font:inherit;transition:color .18s ease}
.lang button:hover{color:var(--accent)}
.lang button[aria-pressed="true"]{color:var(--ink)}
.lang .sep{color:var(--ink-3)}
.theme{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border-radius:var(--r);border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;transition:color .18s ease,border-color .18s ease}
.theme:hover{color:var(--accent);border-color:var(--accent)}
.theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .moon{display:block}
:root[data-theme="dark"] .theme .sun{display:none}

/* ---------- Boutons ---------- */
/* Le survol est un disque qui se dilate DEPUIS l'endroit où le curseur est
   entré, et qui se rétracte vers l'endroit où il sort. Repris de x-garden.co.jp
   (crédité dans le README), qui le fait en ::before ; eux ont un cercle de
   #005E35 et le reste en Three.js — ici tout tient en CSS.
   Deux pseudo-éléments en z-index négatif, et non un span autour du libellé :
   le script de langue remplace le textContent des boutons, il effacerait
   n'importe quelle structure interne. isolation:isolate confine les couches
   négatives au bouton, sinon elles passeraient derrière la page. */
.btn{
  position:relative;overflow:hidden;isolation:isolate;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:14px 28px;border-radius:100px;font-family:var(--f-display);font-weight:600;
  font-size:16px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:border-color .2s ease,color .25s ease,transform .45s cubic-bezier(.22,1.15,.36,1);
}
.btn::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background:var(--btn-fond)}
.btn::before{
  content:"";position:absolute;z-index:-1;left:var(--bx,50%);top:var(--by,50%);
  width:0;aspect-ratio:1;border-radius:50%;background:var(--btn-encre);
  transform:translate(-50%,-50%);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.btn:hover::before,.btn:focus-visible::before{width:270%}
.btn:hover{transform:translateY(-2px)}
.btn-1{--btn-fond:var(--accent);--btn-encre:var(--accent-plein);color:var(--accent-ink)}
/* LE SECOND BOUTON SE REMPLIT EN DORÉ, quand le premier se remplit en vert.
   Deux boutons côte à côte qui s'animent de la même couleur se disputent le
   regard ; là, le vert appelle l'action principale (décrire son besoin) et le
   doré accompagne la preuve (voir mes références) — c'est déjà la répartition
   des rôles dans tout le reste de la page.
   Le libellé passe à l'encre foncée sur le disque doré : le blanc du bouton
   vert y serait illisible, le doré étant une couleur claire. Mesuré : 6,89:1
   en clair, 9,14:1 en sombre. */
.btn-2{--btn-fond:var(--paper);--btn-encre:var(--dore);color:var(--dore-texte);border-color:var(--dore)}
.btn-2:hover,.btn-2:focus-visible{color:var(--logo-encre);border-color:var(--dore)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btn[disabled]::before{width:0}
@media (prefers-reduced-motion:reduce){
  .btn::before{display:none}
  .btn-1:hover{color:var(--accent-ink)}
  .btn-2:hover{color:var(--dore-texte);border-color:var(--dore)}
}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Héros ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-deco{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(760px 520px at 12% 18%,color-mix(in oklab,var(--accent) 9%,transparent),transparent 62%),radial-gradient(620px 460px at 92% 88%,color-mix(in oklab,var(--dore) 12%,transparent),transparent 60%)}
/* Les lianes occupent la moitié droite et s'éteignent vers la gauche : le
   dégradé de masque garantit qu'elles ne passent jamais derrière le titre,
   quelle que soit la largeur. Sous 900 px elles disparaissent — il n'y a plus
   de place à droite du texte, elles se retrouveraient dessous. */
.hero-lianes{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none;opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent 56%,#000 74%);
  mask-image:linear-gradient(90deg,transparent 56%,#000 74%);
}
/* SOUS 900 PX, ELLES RESTENT. Elles étaient masquées : il n'y a plus de moitié
   droite à leur donner, et le masque horizontal les aurait empilées sur le
   dernier tiers du titre. Elles passent donc DERRIÈRE tout le texte, sur toute
   la largeur — mais deux précautions le permettent : le masque devient
   vertical, ce qui laisse le haut du titre entièrement libre, et l'ensemble
   est ramené à quarante pour cent. Ce sont des traits d'un pixel et demi : à
   cette densité ils font une texture, pas un fond. Le semis change aussi de
   forme côté script (quatre tiges, débattement réduit). */
@media (max-width:900px){
  .hero-lianes{
    opacity:.34;
    -webkit-mask-image:linear-gradient(180deg,transparent 22%,#000 62%);
    mask-image:linear-gradient(180deg,transparent 22%,#000 62%);
  }
}
/* PLUS L'ÉCRAN EST ÉTROIT, PLUS ELLES S'EFFACENT. Sous 560 px il ne reste
   aucune marge : le texte occupe toute la largeur, et une feuille pleine
   posée derrière un mot se lit comme une tache, pas comme un décor. On garde
   le fil, on baisse encore, et le script ne sème plus qu'une feuille par
   tige, tout en bas. */
@media (max-width:560px){
  .hero-lianes{
    opacity:.26;
    -webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 68%);
    mask-image:linear-gradient(180deg,transparent 30%,#000 68%);
  }
}
/* Le texte du héros se resserre sur la gauche au-delà de 1080 px : sans ça il
   court jusqu'au bord et les lianes n'ont plus de place que DERRIÈRE lui, ce
   qui gêne la lecture pour un décor. Le décor a sa moitié, le texte la
   sienne. */
@media (min-width:1080px){
  .hero .kicker,.hero h1,.hero .sub,.hero .acts,.hero .rassure{max-width:600px}
}
.hero .wrap{position:relative;z-index:1;padding-block:clamp(56px,10vw,112px);max-width:960px}
.kicker{display:inline-flex;align-items:center;gap:9px;color:var(--accent);font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.hero h1{font-size:clamp(38px,6vw,72px);letter-spacing:-.03em;line-height:1.02}
.hero .sub{margin-top:26px;max-width:56ch;color:var(--ink-2);font-size:clamp(17px,1.4vw,20px)}
.hero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero .rassure{margin-top:26px;color:var(--ink-3);font-size:15px}

/* ---------- Sections ---------- */
.band{padding-block:clamp(40px,5vw,68px);border-bottom:1px solid var(--line);scroll-margin-top:80px}
.band-creme{background:var(--surface)}
.titre{display:flex;align-items:center;gap:12px;color:var(--dore-texte);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
/* .titre .num retiré : la numérotation n'apportait rien qu'un tic de mise en page. */
.titre .bar{flex:1;height:1px;background:var(--dore);opacity:.5}

/* ---------- Les parties centrées ---------- */
/* Boubakar, section par section : « j'aurais simplifié en doré : Services », «
   j'aurais nommé le titre doré Références, et pareil centré, pour voir ce que
   ça donne ». L'étiquette est donc devenue un NOM DE PARTIE — un mot, pas une
   phrase — et elle passe au doré ; le doré des étiquettes est le doré de la
   marque assombri jusqu'à pouvoir porter du texte (voir --dore-texte).
   Centrer demande deux choses : que le filet existe des DEUX côtés du mot,
   faute de quoi le mot paraît poussé à gauche, et que le chapeau reprenne une
   largeur de lecture au lieu de s'étaler sur toute la colonne. Les cartes,
   elles, gardent leur texte à gauche : un paragraphe centré se lit mal. */
/* SEUL LE CHAPEAU est centré — étiquette, titre, phrase d'accroche. Le
   sélecteur vise le premier bloc du contenu et pas « .rise » en général :
   les cartes en portent aussi la classe, et la première tentative a centré
   leurs paragraphes, ce qui se lit nettement moins bien. */
.centre .wrap > .rise:first-child{text-align:center}
.centre .wrap > .rise:first-child .lede{margin-inline:auto}
.centre .titre{justify-content:center}
.centre .titre .bar{flex:0 0 clamp(28px,7vw,110px)}
.centre .titre::before{
  content:"";flex:0 0 clamp(28px,7vw,110px);height:1px;
  background:var(--dore);opacity:.5;
}
/* Les chiffres se centrent en BLOC, mais leur filet reste LATÉRAL. Il avait
   été passé au-dessus le temps d'un essai — Boubakar : « la barre doit rester
   latérale, celle qui sépare ; en plus là la barre est au-dessus ». Il a
   raison sur le fond : ce filet ne souligne pas un chiffre, il SÉPARE deux
   colonnes. Couché, il ne sépare plus rien et se lit comme un soulignement.
   Le texte de chaque colonne reste donc calé à gauche du sien. */
.centre .chiffres{justify-content:center}
.band h2{font-size:clamp(28px,4.4vw,46px);letter-spacing:-.025em}
.band .lede{margin-top:18px;color:var(--ink-2);max-width:60ch}

/* ---------- Offres ---------- */
.offres{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.offre{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px;display:flex;flex-direction:column;gap:9px;transition:border-color .2s ease,transform .2s ease}
.offre:hover{border-color:var(--accent);transform:translateY(-3px)}
/* La tuile-icône des cartes d'offres a été retirée le 31/07/2026 : un carré
   arrondi contenant un écran stylisé, posé juste au-dessus du mot SEMER,
   disait deux fois la même chose. Ses règles vivent dans l'historique.
   Le vocabulaire est conservé ailleurs — la tuile reste employée par le
   qualifieur, où elle sert de bouton de choix. */
/* Verbe de jardin : l'assaisonnement, pas le plat. Le titre de l'offre reste
   littéral pour qu'un artisan sache en une seconde ce qu'il achète. */
/* LA CARTE ALLÉGÉE — essai du 31/07/2026.
   Elle portait sept niveaux : icône, verbe, filet, titre, description de
   trente-cinq mots, second filet, cible. Trois d'entre eux disaient la même
   chose ou ne séparaient rien.
   Ce qui est parti : l'ICÔNE (un écran stylisé posé juste au-dessus du mot
   SEMER — deux fois la même idée ; le verbe reste, il porte le vocabulaire du
   jardin et ne ressemble à aucun autre site), le FILET du verbe et celui de la
   cible (un blanc sépare mieux qu'un trait), et la CIBLE elle-même, qui
   répétait souvent la description.
   Restent quatre niveaux : verbe, titre, une phrase, et la plateforme quand
   elle apporte quelque chose. */
/* Le verbe et son icône, sur une seule ligne : le filet les relie, l'icône le
   termine. L'icône était auparavant une tuile de 56 px posée au-dessus du
   verbe — deux fois la même idée, et beaucoup de hauteur pour rien. En bout
   de ligne, elle signale la nature de l'offre sans prendre un étage. */
.verbe{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:10px;
}
.verbe::after{content:"";flex:1;height:1px;background:var(--dore);opacity:.4}
.verbe-ico{flex:none;display:block;width:22px;height:22px;opacity:.75}
.verbe-ico svg{
  width:100%;height:100%;display:block;
  fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.offre h3{font-size:21px;line-height:1.22}
.offre p{color:var(--ink-2);font-size:15px;line-height:1.5}
/* À qui s'adresse l'offre. Rétabli à la demande de Boubakar : c'est ce qui
   permet à un artisan de se reconnaître en une ligne. Sans filet au-dessus —
   un blanc sépare mieux qu'un trait — et poussé en bas de carte, pour que les
   quatre cibles s'alignent quelle que soit la longueur des descriptions. */
.offre .pour{margin-top:auto;padding-top:6px;color:var(--ink-3);font-size:13px}
/* La ligne de plateformes. AUCUN LOGO DE MARQUE n'est redessiné : le
   pictogramme est neutre — une fenêtre, un téléphone, un ordinateur — et ce
   sont les NOMS ÉCRITS qui désignent les plateformes. C'est l'usage
   nominatif, licite, et c'est précisément ce que demande la charte d'Apple,
   qui interdit d'employer sa pomme pour signaler une compatibilité. */
.offre .plateformes{
  margin-top:auto;padding-top:4px;
  display:flex;align-items:center;gap:8px;
  color:var(--ink-3);font-size:13px;
  font-family:var(--f-mono);letter-spacing:.04em;
}
.offre .plat-ico{flex:none;display:block;width:17px;height:17px}
.offre .plat-ico svg{
  width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- Réalisations ---------- */
/* La jointure entre deux réalisations. Un trait de tableau sépare ; une vrille
   qui s'enroule RELIE, ce qui n'est pas la même idée. Le fil part de
   l'enroulure et s'éteint vers la droite : la fonction de séparation est
   gardée, mais elle naît de la plante au lieu d'être posée dessus.
   Masquée par défaut — c'est le traitement de l'essai 6. */
.jointure{display:none;grid-column:1/-1;align-items:center;margin-bottom:8px}
.jointure svg{display:block;width:44px;height:30px;flex:none;overflow:visible}
.jointure .j-trace{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.jointure .j-feuille{fill:var(--accent);opacity:.85}
.jointure .j-fil{flex:1;height:1px;background:linear-gradient(to right,color-mix(in oklab,var(--accent) 50%,transparent),var(--line) 26%,transparent)}

/* ---------- Où j'ai travaillé ---------- */
/* Le verger défilant est abandonné (il vit dans l'historique, commit 155e4cb) :
   il coûtait trois hauteurs d'écran pour six vignettes, et on restait bloqué
   dedans un long moment. Grille statique à la place — même contenu, une
   fraction du défilement.
   Traitement monochrome uniforme : sans lui, un mur de logos aux couleurs et
   aux poids visuels différents devient une mosaïque qui écrase la page. La
   couleur revient au survol.
   Tant qu'un emplacement est vide, il porte .attente et se signale en
   pointillés avec le nom en toutes lettres — la page reste honnête et lisible
   avant même que les fichiers officiels soient déposés. */
/* Le décompte, au-dessus de la grille. Il ne recompte pas ce qui est déjà à
   l'écran : les années et les logiciels menés seul ne se voient nulle part
   ailleurs. Les nombres montent à l'arrivée à l'écran — c'est le seul endroit
   de la page où un chiffre EST le message. Coupé en mouvement réduit. */
/* UNE GRILLE, PAS UNE RANGÉE QUI SE PLIE. En flex, chaque ligne créée par le
   repli est centrée pour son propre compte : une fois empilées, les trois
   colonnes ne partagent plus le même bord gauche et les filets se décalent
   les uns par rapport aux autres — c'est ce qui se voyait sur écran étroit.
   En grille, les colonnes existent avant le repli : elles gardent le même
   bord, quel qu'en soit le nombre par rangée. Le bloc entier reste centré
   sous le titre (justify-content), les items collent au bord gauche de leur
   colonne. */
.chiffres{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),max-content));
  justify-content:start;align-items:start;
  gap:clamp(20px,4vw,64px);margin-top:clamp(26px,3.5vw,40px);
}
/* Les trois colonnes ont la MÊME HAUTEUR, donc le même filet. Sans cette
   réserve, une étiquette qui tient sur une ligne donne un filet deux fois plus
   court que sa voisine sur deux lignes, et la ligne de chiffres paraît mal
   alignée — très visible dès que les colonnes s'empilent sur petit écran. On
   réserve deux lignes à l'étiquette : la place est prise dans tous les cas,
   le filet ne dépend plus de la longueur du texte. */
.chiffres li{display:flex;flex-direction:column;gap:4px;padding-left:16px;border-left:2px solid var(--line);transition:border-color .6s ease}
.chiffres .quoi{min-height:2lh}
.chiffres li.compte{border-left-color:var(--accent)}
.chiffres .nb{
  font-family:var(--f-display);font-weight:700;line-height:1;
  font-size:clamp(38px,5vw,58px);letter-spacing:-.03em;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.chiffres .quoi{color:var(--ink-2);font-size:15px;max-width:20ch}

/* Flex plutôt que grid, pour une seule raison : avec sept cases sur quatre
   colonnes, une grille laisse la dernière rangée collée à gauche et un trou à
   droite. En flex centré, la rangée incomplète se pose au milieu et l'ensemble
   reste équilibré quel que soit le nombre de missions.
   flex-basis fixe et non 1 1 : sinon les trois cases de la dernière rangée
   s'étireraient à un tiers de la largeur chacune, et seraient plus grandes que
   celles du dessus.
   Le mur était déjà centré quand le texte de la section, lui, était aligné à
   gauche ; depuis que les parties nommées sont centrées, les deux se
   répondent. */
.mur{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.6vw,18px);margin-top:clamp(24px,3vw,32px);
}
/* 282 et non 296 : quatorze pixels de moins par case, et il en tient QUATRE
   par rangée au lieu de trois sur un grand écran. Sept marques passent donc
   de trois rangées à deux — deux cent vingt pixels gagnés, pour des logos
   cinq pour cent plus petits. C'est ce qui permet à la section de tenir dans
   une vue sans toucher à la taille des marques, qui doivent rester grandes :
   ce sont de grands noms. */
.mur .case{display:flex;flex-direction:column;gap:8px;flex:0 1 clamp(216px,19vw,268px)}
/* Le nom est écrit sous chaque logo, et non seulement quand le fichier manque.
   Ce sont de bons comptes : un visiteur qui ne reconnaît pas une marque au
   dessin doit pouvoir la lire. Le nom vient AVANT le secteur dans la
   hiérarchie visuelle — c'est lui qui porte la référence. */
.mur .nom-case{
  font-family:var(--f-display);font-weight:700;font-size:17px;
  letter-spacing:-.01em;text-align:center;color:var(--ink);line-height:1.25;
}
/* Une entreprise rachetée garde son nom d'aujourd'hui — c'est celui du logo
   affiché — et signale l'ancien en petit. Écrire seulement l'ancien nom
   rendrait la référence invérifiable ; n'écrire que le nouveau ferait croire
   à une mission plus récente qu'elle ne l'est. */
.mur .nom-case .ex{
  display:block;margin-top:3px;font-family:var(--f-mono);font-weight:400;
  font-size:10px;letter-spacing:.04em;color:var(--ink-3);
}
/* color est POSÉE ici, et non héritée : le SVG de Cemex se remplit en
   currentColor. Hérité du corps de page, il prendrait l'encre claire du thème
   sombre et disparaîtrait sur la case, qui est claire dans les deux thèmes. */
.logo-case{
  color:var(--logo-encre);
  display:grid;place-items:center;min-height:150px;padding:22px 26px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  transition:border-color .25s ease,transform .35s cubic-bezier(.22,1.15,.36,1),box-shadow .25s ease;
}
.band-creme .logo-case{background:var(--surface)}
.logo-case:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 16px 34px -24px color-mix(in oklab,var(--accent) 70%,transparent)}
/* Désaturation PARTIELLE, pas totale. Le noir et blanc se justifiait quand le
   mur faisait six petites vignettes serrées : il empêchait la mosaïque. Avec
   trois grandes cases par rangée, chacune bordée et espacée, le risque a
   disparu — et le gris intégral rendait un logo dans les bleus moyens presque
   invisible sur le crème. À 45 %, les marques gardent leur identité et le mur
   garde son calme. Le survol rend la couleur pleine. */
.logo-case svg,.logo-case img{max-height:78px;width:auto;filter:grayscale(.45) contrast(1.05);opacity:.92;transition:filter .3s ease,opacity .3s ease}
.logo-case:hover svg,.logo-case:hover img{filter:none;opacity:1}
/* Les logos fournis en PNG ou JPEG arrivent sur un fond blanc plein. multiply
   le fait disparaître dans la case, sinon le mur se couvre de rectangles
   blancs. */
.logo-case img{mix-blend-mode:multiply}

/* EN THÈME SOMBRE, LA CASE RESTE CLAIRE.
   Chacun de ces logos a été dessiné pour un fond clair, et certains sont
   franchement foncés : le bleu #0C419A de l'Assurance Maladie tombe à 1,6:1
   sur le fond sombre de la page, il devient illisible. Tenter de les
   éclaircir un par un serait sans fin et déformerait les marques. On leur
   rend donc le fond qu'elles attendent — c'est ce que prévoient les chartes
   d'usage, et ça vaut pour les sept d'un coup, vectoriels comme raster. */
:root[data-theme="dark"] .mur .logo-case{
  background:#f4f1e8;border-color:rgba(255,255,255,.14);
}
:root[data-theme="dark"] .mur .logo-case:hover{border-color:var(--accent)}
.logo-case.attente{border-style:dashed;border-color:var(--ink-3)}
.logo-case .nom{
  font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.02em;
  color:var(--ink-2);text-align:center;line-height:1.25;
}
.logo-case .a-deposer{
  display:block;margin-top:6px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:400;
}
/* margin-top:auto : un nom sur deux lignes rend sa case plus haute, et sans ça
   son secteur descendrait plus bas que celui des voisines. Ils se calent tous
   sur le bas de la rangée. */
.mur .secteur{
  margin-top:auto;
  text-align:center;color:var(--ink-3);font-size:11px;
  font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
}
/* LA MENTION DES MARQUES, EN NOTE DE BAS DE MUR. Elle est nécessaire — c'est
   elle qui dit qu'aucun de ces logos n'est une référence commerciale — mais
   elle n'a pas à peser autant que ce qu'elle accompagne : trois lignes de
   corps 14 au milieu de la page, on ne lisait plus qu'elle. Elle prend donc la
   forme d'une note : un astérisque, un corps plus petit, centrée sous le mur
   comme le reste de la partie. Elle reste parfaitement lisible — 12,5 px sur
   l'encre tertiaire, au-dessus du seuil AA — parce qu'une mention qu'on ne
   peut pas lire ne protège personne. */
.mur-note{
  margin:16px auto 0;color:var(--ink-3);font-size:12.5px;line-height:1.55;
  max-width:78ch;text-align:center;text-wrap:balance;
}
.mur-note::before{content:"* ";color:var(--dore-texte)}

/* ---------- Qui est derrière ---------- */
/* Seul bloc sur le vert profond de la marque : il porte la confiance, donc il
   se distingue. Le doré y est remonté à #E0C88F, l'original tombant à 4,46:1. */
/* La marge du haut ne sert plus que si le bloc revient au pied d'une autre
   partie : il a sa propre section depuis qu'on fait tenir chaque partie dans
   une vue, et une section apporte déjà son espacement. */
#apropos .qui{margin-top:0}
.qui{background:var(--fonce);color:var(--sur-fonce);border-radius:var(--r-lg);padding:clamp(30px,5vw,52px);margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.qui h3{font-size:clamp(22px,3vw,30px);color:var(--sur-fonce)}
.qui p{margin-top:14px;color:color-mix(in oklab,var(--sur-fonce) 82%,transparent);max-width:52ch}
.qui .lien{display:inline-flex;align-items:center;gap:9px;margin-top:20px;color:var(--dore-fonce);text-decoration:none;font-family:var(--f-display);font-weight:600;min-height:44px}
.qui .lien:hover{text-decoration:underline}
.qui .lien svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qui .mark svg{height:104px;width:auto}

/* ============================================================ QUALIFIEUR */
/* Sans JavaScript, toutes les étapes restent visibles et le formulaire reste
   utilisable de bout en bout : le découpage est un confort, pas une béquille. */
.qual{max-width:760px;margin:44px auto 0}
/* L'ATTRIBUT « hidden » DOIT GAGNER. Il vient de la feuille du navigateur, que
   n'importe quelle règle d'auteur écrase — un simple « display:flex » posé
   sur la même classe suffit à faire réapparaître ce que le script croyait
   masquer. C'est ce qui laissait « Étape 1 sur 4 » affiché sur la voie courte,
   qui ne compte pas d'étapes. Une règle générale plutôt qu'un rustine par
   composant : le piège se reproduirait au prochain bloc masqué. */
[hidden]{display:none !important}
.qual-tete{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.qual-tete .compte{color:var(--ink-3);font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;white-space:nowrap}
/* La tige à nœuds remplace la jauge. Une barre de chargement dit « attendez
   que ça finisse » ; une tige dit « vous en êtes là ». Le trait gris est le
   parcours complet, le trait vert ce qui a poussé, et le nœud courant porte
   une feuille qui se déplie. */
.tige{position:relative;flex:1;height:24px;display:flex;align-items:center;margin:0;padding:0;list-style:none}
.tige::before,.tige::after{content:"";position:absolute;left:0;height:2px;border-radius:2px;top:50%;margin-top:-1px}
.tige::before{right:0;background:var(--line)}
.tige::after{
  width:var(--pousse,25%);
  background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 55%,var(--dore)));
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
.tige li{position:relative;flex:1;display:flex;justify-content:flex-end}
.tige i{
  position:relative;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line);
  transition:background-color .4s ease,border-color .4s ease,transform .45s cubic-bezier(.34,1.4,.5,1),box-shadow .4s ease;
}
.band-creme .tige i{background:var(--surface)}
.tige li.passe i{background:var(--accent);border-color:var(--accent)}
.tige li.ici i{
  background:var(--accent);border-color:var(--accent);transform:scale(1.45);
  box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 15%,transparent);
}
/* La feuille du nœud courant : une forme obtenue par deux coins arrondis
   opposés, sans image ni SVG. Elle se déplie depuis son point d'attache. */
.tige li.ici i::after{
  content:"";position:absolute;left:6px;bottom:5px;width:10px;height:10px;
  background:var(--accent);border-radius:0 100% 0 100%;
  transform-origin:bottom left;transform:rotate(-16deg) scale(0);
  animation:deplie .55s cubic-bezier(.34,1.45,.5,1) .1s forwards;
}
@keyframes deplie{to{transform:rotate(-16deg) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .tige li.ici i::after{animation:none;transform:rotate(-16deg) scale(1)}
}

.etape legend{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,3.2vw,30px);letter-spacing:-.02em;margin-bottom:8px;padding:0}
.etape .aide{color:var(--ink-2);margin-bottom:24px;font-size:16px}
/* L'étape entre en poussant vers le haut, et ses tuiles arrivent l'une après
   l'autre. Le décalage est court : au-delà de ~60 ms par tuile, on attend. */
/* La phrase à trous. C'est le cœur du qualifieur remis à neuf : au lieu de
   quatre écrans qui se succèdent sans mémoire, une phrase se complète sous les
   yeux. La personne voit sa demande prendre forme, et arrive au champ e-mail
   en ayant déjà lu ce qu'elle a dit. Elle remplace les pastilles de
   récapitulatif, qui disaient la même chose mais plus tard et moins bien. */
.phrase{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(19px,2.3vw,26px);line-height:1.45;letter-spacing:-.015em;
  color:var(--ink-3);margin:0 0 30px;
}
.phrase .mot{
  display:inline-block;position:relative;color:var(--ink-3);
  min-width:5.5ch;border-bottom:2px dotted var(--line);
  transition:color .3s ease,border-color .3s ease;
}
.phrase .mot.rempli{
  color:var(--accent);border-bottom-color:transparent;min-width:0;
  animation:motPose .45s cubic-bezier(.22,1.15,.36,1) both;
}
/* La feuille ne marque QUE le dernier mot posé : une feuille sur chaque mot
   ferait une haie, et on ne saurait plus ce qui vient d'arriver. */
.phrase .mot.dernier::after{
  content:"";position:absolute;right:-13px;top:.12em;width:10px;height:10px;
  background:var(--dore);border-radius:0 100% 0 100%;transform:rotate(-20deg);
}
@keyframes motPose{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Raccourcis clavier : les chiffres posés sur les tuiles. Sur un parcours de
   quatre écrans, quelqu'un qui répond au clavier ne devrait pas avoir à
   tabuler quatre fois. Posés par le script, jamais dans le markup — c'est une
   aide, pas du contenu. */
.tuile .touche{
  position:absolute;left:22px;bottom:18px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  color:var(--ink-3);border:1px solid var(--line);border-radius:5px;
  padding:2px 6px;line-height:1.3;opacity:0;transition:opacity .2s ease;
}
.qual.clavier .tuile .touche{opacity:1}
@media (hover:none){.tuile .touche{display:none}}

.etape.entre{animation:pousseEtape .45s cubic-bezier(.22,1.15,.36,1) both}
/* Le sens compte : avancer entre par le bas, revenir entre par le haut. Sans
   ça, les deux mouvements sont identiques et le retour ne se lit pas comme un
   retour. */
.etape.entre.arriere{animation-name:pousseEtapeArriere}
@keyframes pousseEtapeArriere{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.etape.entre .tuile{animation:pousseTuile .5s cubic-bezier(.22,1.15,.36,1) both;animation-delay:calc(var(--i,0) * 55ms + 60ms)}
.etape.entre .tuile:nth-child(1){--i:0}
.etape.entre .tuile:nth-child(2){--i:1}
.etape.entre .tuile:nth-child(3){--i:2}
.etape.entre .tuile:nth-child(4){--i:3}
@keyframes pousseEtape{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pousseTuile{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* Tuiles de choix : de vrais boutons radio, stylés. L'état sélectionné ne
   repose pas uniquement sur la couleur — il y a aussi la bordure épaissie et
   la pastille cochée, pour qui distingue mal les teintes. */
.choix{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choix.trois{grid-template-columns:1fr 1fr 1fr}
/* LES TUILES REPRENNENT LE DESSIN DES CARTES « SERVICES ». C'est la demande
   de Boubakar : « pour le qualifieur il faut également faire les styles qui se
   rapprochent de ce qu'on a fait pour les cards section services ».
   Ce qui fait reconnaître une carte de cette page, c'est sa LIGNE D'EN-TÊTE :
   un pictogramme, puis un filet doré qui court jusqu'au bord. On la refait
   ici. Les mesures passent par des variables plutôt que par des nombres
   recopiés : le filet doit rester à la hauteur du pictogramme même si la
   respiration de la tuile change, sans quoi il se décalerait en silence. */
.tuile{position:relative;--t-pad:22px;--t-haut:24px;--t-ico:32px;--t-coche:22px}
.tuile input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
/* Même mécanique de survol que les boutons : un disque qui se dilate depuis le
   point d'entrée du curseur. Ici la teinte reste très faible — le libellé doit
   rester lisible pendant que le disque passe dessous, ce qu'un aplat plein
   d'accent ne permettrait pas. */
.tuile span.boite{
  position:relative;overflow:hidden;isolation:isolate;background:transparent;
  display:flex;flex-direction:column;gap:10px;height:100%;
  padding:var(--t-haut) var(--t-pad);border:1.5px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .22s ease,transform .45s cubic-bezier(.22,1.15,.36,1);
}
.tuile span.boite::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background:var(--paper)}
.tuile span.boite::before{
  content:"";position:absolute;z-index:-1;left:var(--bx,50%);top:var(--by,50%);
  width:0;aspect-ratio:1;border-radius:50%;
  background:color-mix(in oklab,var(--accent) 11%,var(--paper));
  transform:translate(-50%,-50%);transition:width .5s cubic-bezier(.22,1,.36,1);
}
.tuile:hover span.boite::before{width:250%}
.tuile:hover span.boite{border-color:var(--accent);transform:translateY(-3px)}
/* Le filet doré de l'en-tête : il part après le pictogramme et s'arrête avant
   la pastille de choix. Posé sur la tuile et non dans la boîte, qui rogne ce
   qui dépasse (elle abrite le disque de survol). */
.tuile::after{
  content:"";position:absolute;pointer-events:none;
  left:calc(var(--t-pad) + var(--t-ico) + 14px);
  right:calc(var(--t-pad) + var(--t-coche) + 14px);
  top:calc(var(--t-haut) + var(--t-ico) / 2);
  height:1px;background:var(--dore);opacity:.45;
  transition:opacity .25s ease;
}
.tuile:hover::after,.tuile input:checked ~ .coche ~ *::after{opacity:.7}
.tuile input:focus-visible + span.boite{outline:2px solid var(--accent);outline-offset:3px}
.tuile input:checked + span.boite{border-color:var(--accent);border-width:2.5px}
.tuile input:checked + span.boite::after{background:color-mix(in oklab,var(--accent) 7%,var(--paper))}
/* L'icône est dans une pastille qui se remplit à la sélection : le choix se
   voit à la forme et au poids, pas seulement à la couleur. */
.tuile .ico{
  width:32px;height:32px;stroke:var(--accent);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .3s ease,transform .5s cubic-bezier(.34,1.4,.5,1);
}
.tuile input:checked + span.boite .ico{transform:translateY(-2px) scale(1.06)}
/* La pousse qui sort du coin de la tuile choisie. Même forme de feuille que
   la tige, obtenue par deux coins arrondis opposés. */
/* Exactement la feuille des cartes « Services » : même taille, même
   inclinaison, même point d'attache. Deux motifs presque pareils se
   remarquent ; un seul motif répété se reconnaît. */
.tuile .pousse{
  position:absolute;left:26px;top:-9px;width:15px;height:15px;
  background:var(--accent);border-radius:0 100% 0 100%;
  transform-origin:bottom left;transform:rotate(-24deg) scale(0);
  transition:transform .5s cubic-bezier(.34,1.45,.5,1);
  pointer-events:none;
}
.tuile input:checked ~ .pousse{transform:rotate(-24deg) scale(1)}
.tuile b{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.tuile em{font-style:normal;color:var(--ink-2);font-size:15px}
.tuile .coche{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center}
.tuile input:checked ~ .coche{border-color:var(--accent);background:var(--accent)}
.tuile .coche svg{width:12px;height:12px;stroke:var(--accent-ink);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.tuile input:checked ~ .coche svg{opacity:1}

.qual-pieds{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.qual-pieds .retour{background:none;border:0;color:var(--ink-2);cursor:pointer;font:inherit;min-height:44px;padding:0 4px;text-decoration:underline}
.qual-pieds .retour:hover{color:var(--ink)}
.echap{margin-left:auto;color:var(--ink-3);font-size:15px;background:none;border:0;cursor:pointer;font:inherit;min-height:44px;text-decoration:underline}
.echap:hover{color:var(--accent)}


.champs{display:flex;flex-direction:column;gap:18px}
.champ{display:flex;flex-direction:column;gap:8px}
.champ label{font-family:var(--f-display);font-weight:600;font-size:15px}
.champ .indice{color:var(--ink-3);font-size:14px;font-weight:400}
.champ input,.champ textarea{font-family:var(--f-body);font-size:17px;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink-2);border-radius:var(--r);padding:14px 16px;min-height:54px}
.champ textarea{min-height:130px;resize:vertical;line-height:1.55}
.champ input:focus-visible,.champ textarea:focus-visible{outline-offset:2px;border-color:var(--accent)}
.rgpd{color:var(--ink-3);font-size:14px}
/* Le piège à robots. Sorti de l'écran plutôt qu'en display:none — certains
   robots sautent ce qui est explicitement masqué, et repèrent le piège. Un
   humain ne peut ni le voir, ni l'atteindre au clavier (tabindex -1), ni
   l'entendre (aria-hidden sur son conteneur). */
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* La confirmation au retour du serveur — et sa variante quand ça a échoué.
   Le souci se signale en doré et non en rouge : c'est un contretemps, pas une
   erreur du visiteur, et le rouge n'existe nulle part ailleurs sur ce site. */
.recu{
  max-width:760px;margin:44px auto 0;padding:20px 24px;
  border:1px solid var(--accent);border-radius:var(--r);
  background:color-mix(in oklab,var(--accent) 8%,transparent);
  color:var(--ink);font-weight:600;
}
.recu-souci{
  border-color:var(--dore);
  background:color-mix(in oklab,var(--dore) 12%,transparent);
}

/* ---------- Pied ---------- */
.foot{padding-block:36px;background:var(--surface);border-top:1px solid var(--line)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;color:var(--ink-2);font-size:14px}
.foot svg{height:30px;width:auto}
.foot .sep{margin-left:auto;display:flex;gap:20px}
.foot a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{color:var(--accent)}

/* ---------- Notes de maquette ---------- */
/* SUPPRIMER cette section avant mise en ligne : elle s'adresse à Boubakar. */
.notes{background:var(--paper);border-top:1px solid var(--line);padding-block:44px}
.notes h2{font-family:var(--f-display);font-size:19px;margin-bottom:20px}
.note-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.note-item .k{color:var(--accent);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;margin-bottom:6px}
.note-item p{color:var(--ink-2);font-size:14px}

/* ---------- Révélation ---------- */
/* Socle : IntersectionObserver, qui marche partout. */
.rise{opacity:0;transform:translateY(14px);transition:opacity .6s ease-out,transform .6s ease-out}
.rise.seen{opacity:1;transform:none}

/* Au-dessus : les animations natives liées au défilement. Elles tournent sur
   le compositeur — donc sans à-coup, et sans une ligne de JavaScript — et se
   déroulent AVEC le défilement au lieu de se déclencher une fois pour toutes.
   Le @supports fait qu'un navigateur qui ne les gère pas garde simplement la
   révélation ci-dessus : personne ne voit une page vide. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise{transition:none}
    .rise,.offre,.chiffres li{
      animation:eclosion linear both;
      animation-timeline:view();
    }
    .rise{animation-range:entry 6% cover 30%}
    /* Le décalage par rang crée la hiérarchie : l'œil prend les éléments un
       par un au lieu de tout voir surgir d'un bloc. */
    .offre,.chiffres li{animation-range:entry calc(4% + var(--rang,0) * 5%) cover calc(28% + var(--rang,0) * 5%)}
    .offres .offre:nth-child(1),.chiffres li:nth-child(1){--rang:0}
    .offres .offre:nth-child(2),.chiffres li:nth-child(2){--rang:1}
    .offres .offre:nth-child(3),.chiffres li:nth-child(3){--rang:2}
    .offres .offre:nth-child(4){--rang:3}
  }
}
@keyframes eclosion{
  from{opacity:0;transform:translateY(30px) scale(.985)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}

/* ---------- Dégressif ---------- */
@media (max-width:860px){
  .offres{grid-template-columns:1fr}
  .qui{grid-template-columns:1fr}
  .qui .mark{order:-1}
}
@media (max-width:560px){
  .choix,.choix.trois{grid-template-columns:1fr}
  .foot .sep{margin-left:0;width:100%}
}

/* ============================================ PAGES DE TEXTE (légal) */
/* Mentions légales et confidentialité. Aucun décor, aucune navigation
   latérale : ce sont des pages qu'on vient lire, souvent juste avant de
   signer. Une seule colonne, une largeur de lecture, des intertitres qui
   permettent de sauter directement au paragraphe qu'on cherche. */
/* La colonne est CELLE DU SITE : même largeur, mêmes marges, même centrage
   que l'accueil. La première version neutralisait la largeur maximale du
   conteneur, et le texte partait se coller au bord gauche — « il faut que ce
   soit centré comme la page principale ». Il n'y a rien à redéfinir ici : la
   règle générale du conteneur fait déjà exactement ça. */
.page-texte{padding-block:clamp(34px,5vw,64px) clamp(48px,7vw,90px)}
.page-texte h1{
  font-size:clamp(30px,4.4vw,44px);letter-spacing:-.025em;margin-bottom:8px;
}
.page-texte .chapo{
  font-size:clamp(16px,1.6vw,18px);color:var(--ink-2);max-width:60ch;
  margin-top:18px;
}
.page-texte h2{
  font-size:clamp(18px,2vw,22px);letter-spacing:-.01em;
  margin-top:clamp(28px,3.4vw,42px);
}
.page-texte p{margin-top:12px;color:var(--ink-2);max-width:72ch;line-height:1.65}
.page-texte strong{color:var(--ink)}
.page-texte a{color:var(--accent);text-underline-offset:3px}
/* Ce qui reste à compléter se voit de loin : une valeur manquante dans des
   mentions légales ne doit pas pouvoir passer en production discrètement. */
.page-texte mark{
  background:color-mix(in oklab,var(--dore) 30%,transparent);
  color:var(--ink);padding:1px 7px;border-radius:5px;font-weight:600;
}
.retour-accueil{margin-top:clamp(34px,4vw,54px)}
.retour-accueil a{font-family:var(--f-display);font-weight:600}