/* ============================================================
   STUDIO MAÎTRE — SYSTÈME DE DESIGN (V2, à plat)
   Territoire : « l'expertise annotée »
   Fichier unique de style. Tout se rhabille depuis :root.
   Aucune dépendance. À charger avant sm-systeme.js.
   ------------------------------------------------------------
   SOMMAIRE
   1. Jetons (:root)
   2. Base
   3. Architecture : conteneur, grille, sections et fonds
   4. Typographie
   5. Objets du territoire : surligneur, marge, étiquette,
      rature, intercalaire, corne, référence, bordereau
   6. Dispositifs : nav, bouton, hero, frise, chaîne, colonnes,
      dossiers, planche, encart, feuille, cartouche
   7. Comportements : mots semés
   8. Accessibilité et mouvement réduit
   ============================================================ */

/* — 0. Polices, hébergées sur le site ————————————————
   Instrument Sans en fichier variable (400 à 700) et en italique. Aucun appel à Google Fonts. */
@font-face{ font-family:"Instrument Sans"; src:url(fonts/instrument-sans-var.woff2) format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Instrument Sans"; src:url(fonts/instrument-sans-italic.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

/* — 1. Jetons ——————————————————————————————————— */
:root{
  --encre:        #111318;   /* texte, appel final, pied de page */
  --papier:       #F7F7F3;   /* le fond de page */
  --blanc:        #FFFFFF;   /* section blanche, feuilles, dossiers */
  --papier-creux: #EFEFEB;   /* section en creux */
  --encre-2:      #686B70;   /* texte secondaire, annotations */
  --ligne:        #DADBD7;   /* filets */

  --orange:     #C65A36;   /* l'accent des objets : intercalaire, languette, rang, ligne de progression */
  --orange-texte: #B34924; /* le même orange quand il colore du texte : 5:1 sur le papier, 4,7:1 sur le creux */
  --trait:      #21A8FF;   /* l'accent du geste : le trait du surligneur, et lui seul */
  --rouge:      #D63A1E;   /* mot coloré dans un titre, à la demande */
  --violet:     #6A4FC8;   /* mot coloré dans un titre, à la demande */
  --vert:       #18794E;   /* mot ou phrase de reprise colorés, à la demande — contraste 5:1 sur le papier */
  --jaune:      #E9B72E;   /* teinte de surligneur des mots semés, et elle seule — jamais en texte */

  --police: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --conteneur: 1320px;
  --gouttiere: clamp(20px, 3vw, 42px);
  --section:   clamp(92px, 11vw, 168px);
  --ease:      cubic-bezier(.2,.7,.2,1);
}

/* — 2. Base ———————————————————————————————————— */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--papier); -webkit-text-size-adjust:100%; }
/* La barre de défilement : un filet, à l'encre secondaire sur le papier. */
html{ scrollbar-width:thin; scrollbar-color:var(--encre-2) var(--papier); }
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:var(--police); font-weight:400; font-size:17px; line-height:1.5;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button,a{ -webkit-tap-highlight-color:transparent; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:6px; }
section[id],main{ scroll-margin-top:100px; }
.evitement{ position:fixed; top:8px; left:16px; z-index:200; padding:12px; background:var(--blanc);
  transform:translateY(-150%); font-weight:500; }
.evitement:focus{ transform:none; }
.visuellement-cache{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* — 3. Architecture ————————————————————————————————
   La page est une suite de sections pleine largeur, séparées par
   des filets ou par un changement de fond. Le contenu se pose sur
   une grille de douze colonnes dans un conteneur centré. */
.conteneur{ width:min(calc(100% - var(--gouttiere)*2), var(--conteneur)); margin:0 auto; }
.grille{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.section{ padding:var(--section) 0; position:relative; }
.section.filet{ border-top:1px solid var(--ligne); }
.section.blanche{ background:var(--blanc); }
.section.creuse{ background:var(--papier-creux); }
.section.sombre{ background:#111318; color:var(--papier); /* valeur fixe : --encre est redéfini en clair juste après */
  --encre:#F7F7F3; --encre-2:rgba(247,247,243,.72); --ligne:rgba(247,247,243,.16);
  --orange-texte:#D0633F; /* sur l'encre, l'orange des textes s'éclaircit au lieu de foncer : 4,9:1 */
  --violet:#9786F0;       /* et le violet aussi, même teinte : 6,2:1 sur l'encre */ }
.pleine{ grid-column:1 / -1; }

/* — 4. Typographie ————————————————————————————————
   Une famille, des rôles par graisse :
   600 le h1 · 500 les h2, h3, navigation, boutons, étiquettes ·
   400 le texte courant · 400 italique l'annotation. */
/* Titres équilibrés : les lignes d'un titre ont des longueurs voisines,
   aucun mot ne reste seul sur la dernière. */
h1,h2,h3{ margin:0; text-wrap:balance; }
h1{ font-size:clamp(58px,8.2vw,124px); line-height:.92; letter-spacing:-.055em; font-weight:600; }
h2{ font-size:clamp(46px,6vw,84px); line-height:.98; letter-spacing:-.045em; font-weight:500; }
h3{ font-size:clamp(26px,2.3vw,34px); line-height:1.08; letter-spacing:-.03em; font-weight:500; }
p{ margin:0; }
.chapo{ font-size:clamp(19px,1.75vw,25px); line-height:1.3; letter-spacing:-.02em; max-width:710px; }
.secondaire{ color:var(--encre-2); }
.citation{ font-size:clamp(52px,7.2vw,104px); line-height:.94; letter-spacing:-.055em; font-weight:500; }
/* Sur téléphone, la citation descend plus bas que les titres : un mot long, « d'opportunités »,
   doit tenir sur sa ligne dès 320 px. */
@media (max-width:680px){ .citation{ font-size:clamp(38px,11.5vw,64px); } }
strong{ font-weight:500; color:var(--encre); }
/* Le rythme éditorial : phrase forte, respiration, démonstration courte. */
.forte{ font-size:clamp(21px,2.2vw,30px); line-height:1.2; letter-spacing:-.025em; font-weight:500; max-width:32ch; color:var(--encre); text-wrap:balance; }
.manifeste{ font-size:clamp(30px,3.8vw,58px); line-height:1.02; letter-spacing:-.045em; font-weight:500; max-width:22ch; }
.litanie{ list-style:none; margin:0; padding:0; }
.litanie li{ font-size:clamp(22px,2.8vw,42px); line-height:1.12; letter-spacing:-.035em; font-weight:400; color:var(--encre-2); }
.litanie li + li{ margin-top:.12em; }
.bloc{ grid-column:1 / 8; margin-top:48px; max-width:60ch; }
.bloc.large{ grid-column:1 / 11; max-width:none; }
.bloc > * + *{ margin-top:26px; }
.bloc > .forte, .bloc > .manifeste{ margin-top:44px; }
.bloc > .litanie{ margin-top:36px; }
.bloc .actions{ margin-top:40px; }
.micro{ font-size:13px; color:var(--encre-2); margin-top:16px; }
@media (max-width:980px){ .bloc,.bloc.large{ grid-column:1 / 9; } }
@media (max-width:680px){ .bloc,.bloc.large{ grid-column:1 / 5; margin-top:36px; } }
@media (max-width:680px){ h1{ font-size:clamp(42px,14vw,78px); letter-spacing:-.06em; } }
/* Une coupe réservée aux grands écrans : sur téléphone, le titre s'équilibre seul,
   sans quoi la coupe forcée y laisse un mot isolé. */
@media (max-width:680px){ br.coupe-large{ display:none; } }

/* — 5. Objets du territoire ————————————————————————— */

/* Le surligneur : un trait bleu, tracé quand la phrase entre à l'écran.
   Sans JavaScript ou en mouvement réduit, le trait est déjà là. */
.surligne{ position:relative; display:inline; z-index:0; }
.surligne::before, .surligne .segment::before{ content:""; position:absolute; z-index:-1; left:-.04em; right:-.03em; bottom:.05em; height:.34em;
  background:var(--trait); transform:rotate(-1.1deg) scaleX(1); transform-origin:left center;
  transition:transform .65s var(--ease); }
.anime .surligne::before, .anime .surligne .segment::before{ transform:rotate(-1.1deg) scaleX(0); }
.anime .surligne.trace::before, .anime .surligne.trace .segment::before{ transform:rotate(-1.1deg) scaleX(1); }
/* Un passage replié sur plusieurs lignes : le script le découpe en segments d'une ligne.
   Chacun porte son trait, tracé après le précédent, comme un feutre qui revient à la ligne. */
.surligne.decoupe::before{ content:none; }
.surligne .segment{ position:relative; z-index:0; }
.surligne .segment::before{ transition-duration:.5s; transition-delay:calc(var(--rang, 0) * .42s); }

/* Mot coloré dans un titre */
.rouge{ color:var(--rouge); }
.violet{ color:var(--violet); }
.vert{ color:var(--vert); }

/* L'annotation en marge : une remarque de côté, en italique. */
.marge{ font-size:14px; line-height:1.35; font-style:italic; color:var(--encre-2); }

/* L'étiquette : numéro et titre courant d'une section, ou index d'une colonne.
   Avec le bordereau, le seul endroit où les capitales sont admises. */
.etiquette{ font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--encre-2); font-weight:500; }
.section .grille > .etiquette{ grid-column:1 / -1; }

/* L'étiquette figurée : la forme dessinée de l'étiquette. Même travail —
   indexer une colonne —, mais la marque dit de quel enjeu il s'agit avant
   même la lecture du titre. N'entre pas comme neuvième objet : c'est la
   seconde forme de l'étiquette, l'une ou l'autre, jamais les deux ensemble.
   Filet seul, un seul accent, l'orange des objets. Angles vifs, aucun rayon. */
.icone{ display:block; flex:none; width:26px; height:26px; color:var(--orange);
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; }
.icone .plein{ fill:currentColor; stroke:none; }
/* Une partie du dessin peut passer en retrait, pour opposer un rang à celui qui s'en détache.
   Le gris du texte secondaire, pas un troisième accent. */
.icone .retrait{ color:var(--encre-2); }
/* La marque se pose à gauche du titre, dans une gouttière : les lignes suivantes
   du titre s'alignent à sa droite plutôt que de repasser dessous. */
.colonne h3:has(> .icone){ display:flex; align-items:flex-start; gap:14px; }
.colonne h3 .icone{ margin-top:.13em; }

/* Les marques qui agissent : chaque marque se dessine quand elle entre à l'écran, puis joue
   son enjeu — le paraphe se signe, le nom se surligne, l'agenda se remplit, une fiche sort
   du rang. Le geste se rejoue au survol de la colonne. Le script pose .a-tracer, puis .trace ;
   sans lui, ou en mouvement réduit, la marque est déjà dessinée. */
/* Un blanc plus long que le trait : aucun tiret de longueur nulle ne reste en bout de tracé,
   où l'extrémité carrée dessinerait un point. */
.anime .icone.a-tracer path{ stroke-dasharray:1 2; stroke-dashoffset:1; }
.anime .icone.a-tracer .plein{ opacity:0; transform-box:fill-box; transform-origin:center; }
.anime .icone.trace path{ animation:tracer .45s var(--ease) both; }
.anime .icone.trace .plein{ animation:poser .3s var(--ease) both; }
@keyframes tracer{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes poser{ from{ opacity:1; transform:scale(0); } to{ opacity:1; transform:scale(1); } }
@keyframes surligner{ from{ opacity:1; transform:scaleX(0); } to{ opacity:1; transform:scaleX(1); } }
@keyframes sortir{ from{ transform:translate(-2.5px, 3.5px); } to{ transform:none; } }
/* Le paraphe : la ligne, puis la signature d'un seul geste. */
.anime .icone[data-geste="paraphe"].trace path:nth-of-type(1){ animation-duration:.3s; }
.anime .icone[data-geste="paraphe"].trace path:nth-of-type(2){ animation-duration:.9s; animation-delay:.2s;
  animation-timing-function:cubic-bezier(.45,.05,.35,1); }
/* Le nom : les deux lignes de la liste, puis le trait passe sur le nom. */
.anime .icone[data-geste="surlignage"] .plein{ transform-origin:left center; }
.anime .icone[data-geste="surlignage"].trace .plein{ animation-name:surligner; animation-duration:.4s; animation-delay:.35s; }
/* L'agenda : le cadre, puis deux rendez-vous s'inscrivent l'un après l'autre. */
.anime .icone[data-geste="agenda"].trace path:nth-of-type(3){ animation-duration:.6s; }
.anime .icone[data-geste="agenda"].trace .plein{ animation-delay:.55s; }
.anime .icone[data-geste="agenda"].trace .plein + .plein{ animation-delay:.8s; }
/* Le rang : les fiches alignées, puis l'une d'elles sort du rang. */
.anime .icone[data-geste="rang"].trace .retrait path:nth-of-type(2){ animation-delay:.06s; }
.anime .icone[data-geste="rang"].trace .retrait path:nth-of-type(3){ animation-delay:.12s; }
.anime .icone[data-geste="rang"].trace .retrait path:nth-of-type(4){ animation-delay:.18s; }
.anime .icone[data-geste="rang"].trace > path{ animation:tracer .4s var(--ease) .2s both, sortir .45s var(--ease) .65s both; }

/* La rature : on barre le mot faux, on écrit le mot juste à côté. */
.rature{ display:block; margin-top:24px; color:var(--encre); font-style:italic; }
.rature del{ color:var(--encre-2); text-decoration-color:var(--orange); text-decoration-thickness:2px; }
.rature ins{ text-decoration:none; }
/* La rature simple : on barre ce qu'on refuse, sans mot de remplacement. Le trait orange
   passe sur les mots quand ils entrent à l'écran — ligne après ligne si le passage se
   replie — et les mots barrés passent au gris. Sans JavaScript, ils sont déjà barrés. */
.biffe{ color:var(--encre-2);
  background:linear-gradient(var(--orange), var(--orange)) no-repeat 0 58% / 100% 2px;
  transition:background-size .6s var(--ease), color .4s ease .45s; }
.anime .biffe{ color:var(--encre); background-size:0% 2px; }
.anime .biffe.trace{ color:var(--encre-2); background-size:100% 2px; }

/* L'intercalaire : la languette orange qui dépasse d'un dossier. */
.intercalaire{ position:absolute; z-index:4; top:-11px; left:30px; width:72px; height:12px; pointer-events:none;
  background:var(--orange); border:1px solid color-mix(in srgb, var(--orange) 86%, var(--encre)); border-bottom:0; }
@media (max-width:680px){ .intercalaire{ left:22px; width:62px; } }

/* La référence : apposée de travers, comme un tampon d'inventaire. */
.ref{ position:absolute; top:18px; right:18px; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--encre-2); opacity:.55; border:1.5px solid currentColor; padding:5px 9px;
  transform:rotate(-5.5deg); transition:transform .5s var(--ease), opacity .35s ease; }
.projet:hover .ref{ transform:rotate(-2deg); opacity:.85; }

/* Le bordereau : des champs nommés, une valeur par ligne. */
.bordereau{ margin:0; border-top:1px solid var(--ligne); }
/* Posé seul sur la grille d'une section, il prend de l'air sous la tête de section. */
.grille > .bordereau{ margin-top:72px; }
.bordereau div{ display:grid; grid-template-columns:128px minmax(0,1fr); gap:16px; padding:14px 0;
  border-bottom:1px solid var(--ligne); align-items:baseline; }
.bordereau dt{ font-size:12px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--encre-2); }
.bordereau dd{ margin:0; font-size:17px; font-weight:500; overflow-wrap:anywhere; }
/* Sur téléphone, l'intitulé monte au-dessus de la valeur, comme dans le formulaire :
   une adresse longue garde toute la largeur. */
@media (max-width:680px){ .bordereau div{ grid-template-columns:1fr; gap:4px; } }
.bordereau a{ border-bottom:1px solid var(--ligne); padding-bottom:2px; transition:border-color .3s; }
.bordereau a:hover{ border-color:var(--orange); }

/* Le formulaire : le bordereau qu'on remplit, posé en questions. Chaque intitulé est une question
   adressée au visiteur, écrite en clair au-dessus de sa réponse — une phrase ne se met jamais en
   capitales — et l'exemple s'affiche en gris dans le champ. Un filet sous chaque réponse, comme au
   bordereau. Intention : recueillir une demande. L'envoi part en arrière-plan (sm-systeme.js) ;
   sans JavaScript, un avis propose le courriel. */
.formulaire{ grid-column:1 / 9; margin-top:64px; }
.champ{ position:relative; display:grid; gap:10px; min-width:0; margin:0; padding:26px 0 12px;
  border:0; border-bottom:1px solid var(--ligne); }
/* Le champ en cours de saisie : un filet orange se tire sur son filet gris, de gauche à droite.
   Avec la question passée à l'orange, il tient lieu d'indicateur de focus : le cadre du focus,
   qui doublerait le filet, est retiré des zones de saisie, et d'elles seules. */
.champ::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--orange);
  transform:scaleX(0); transform-origin:left center; transition:transform .45s var(--ease); pointer-events:none; }
.champ:focus-within::after{ transform:scaleX(1); }
.champ input:not([type="radio"]):focus-visible, .champ textarea:focus-visible{ outline:none; }
/* La question. L'astérisque des questions obligatoires est caché des lecteurs d'écran :
   l'attribut required le dit déjà. */
.champ > label, .champ > legend{ padding:0; font-size:17px; font-weight:500; line-height:1.3; letter-spacing:-.01em;
  color:var(--encre); transition:color .25s ease; }
.champ:focus-within > label, .champ:focus-within > legend{ color:var(--orange-texte); }
/* La réponse. Le curseur d'écriture prend l'orange du champ actif. L'exemple reste lisible :
   le gris du texte secondaire, en 400, pour ne pas passer pour une réponse. */
.champ input:not([type="radio"]), .champ textarea{ font:500 17px/1.45 var(--police); color:var(--encre);
  background:transparent; border:0; border-radius:0; padding:0; width:100%; resize:vertical; caret-color:var(--orange); }
.champ input::placeholder, .champ textarea::placeholder{ color:var(--encre-2); opacity:1; font-weight:400; }
/* Le choix : une question, quelques réponses, une seule retenue. Le bouton reste rond — c'est sa
   forme qui dit « une seule » : exception à la règle des angles vifs. Coché, un point orange s'y pose.
   Au clavier, il garde le cadre du focus : le filet dit quelle question, le cadre dit quelle réponse. */
.champ.choix{ display:block; }
.champ.choix > legend{ float:left; width:100%; }
.options{ clear:both; display:flex; flex-wrap:wrap; gap:10px 30px; padding-top:12px; }
.options label{ display:inline-flex; align-items:center; gap:10px; font-size:17px; line-height:1.3; cursor:pointer; }
.options input{ appearance:none; -webkit-appearance:none; flex:none; width:18px; height:18px; margin:0; padding:0;
  border:1.5px solid var(--encre-2); border-radius:50%; cursor:pointer;
  background:radial-gradient(circle closest-side, var(--orange) calc(100% - 1px), transparent) center / 0 0 no-repeat;
  transition:background-size .22s var(--ease), border-color .22s ease; }
.options label:hover input{ border-color:var(--encre); }
.options input:checked{ background-size:8px 8px; border-color:var(--orange); }
.options input:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
/* Le leurre : hors de l'écran, jamais annoncé, jamais atteint au clavier. */
.leurre{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.mention{ margin-top:22px; font-size:13px; color:var(--encre-2); max-width:62ch; }
/* Le lien peut tenir au milieu de la phrase : il se souligne du gris du texte, pour se voir. */
.mention a{ border-bottom:1px solid currentColor; transition:border-color .3s; }
.mention a:hover{ border-color:var(--orange); }
.formulaire .actions{ margin-top:30px; }
/* Le widget anti-robots ne prend de place que s'il doit poser une question au visiteur. */
.formulaire .turnstile{ margin-top:22px; }
.formulaire .turnstile:empty{ display:none; }
/* Les états d'envoi. Le bouton se fige pendant l'envoi ; au succès, les champs s'effacent
   et la confirmation prend leur place sous le filet ; à l'échec, les champs restent remplis
   et un lien courriel prend le relais. */
.formulaire.en-cours .bouton, .formulaire .bouton:disabled{ opacity:.55; cursor:progress; transform:none; }
.formulaire.envoye > :not(.etat-envoi){ display:none; }
.etat-envoi{ margin-top:26px; }
/* Le message reçoit le focus par script, pour qu'un lecteur d'écran le lise : ce n'est pas une
   commande, il ne porte pas de cadre de focus. */
.etat-envoi:focus{ outline:none; }
.etat-envoi[hidden]{ display:none; }
.etat-envoi .forte{ margin-bottom:10px; }
.etat-envoi p:not(.forte){ color:var(--encre-2); max-width:62ch; }
/* Le tampon de réception : la référence apposée de travers sur la demande reçue, avec la date
   du jour. Il frappe une fois quand la confirmation apparaît ; en mouvement réduit, il est déjà posé. */
/* Le message garde la place du tampon à sa droite, pour ne pas passer dessous. */
.etat-envoi[data-etat="succes"]{ position:relative; padding-right:180px; }
.etat-envoi p.tampon{ position:absolute; top:-4px; right:0; margin:0; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 13px 7px; border:2px solid currentColor; color:var(--orange-texte); max-width:none;
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.2;
  transform:rotate(-5.5deg); animation:tamponner .42s var(--ease) .3s both; }
.tampon time{ font-size:11px; letter-spacing:.12em; font-variant-numeric:tabular-nums; }
@keyframes tamponner{
  0%{ opacity:0; transform:rotate(-10deg) scale(1.7); }
  60%{ opacity:1; transform:rotate(-5deg) scale(.96); }
  100%{ opacity:1; transform:rotate(-5.5deg) scale(1); }
}
@media (max-width:680px){ .etat-envoi[data-etat="succes"]{ padding-right:0; }
  .etat-envoi p.tampon{ position:static; display:inline-flex; margin-bottom:20px; } }
/* L'erreur se signale comme le champ actif : un filet orange, tiré au-dessus du message. */
.etat-envoi[data-etat="erreur"]{ padding-top:14px; border-top:2px solid var(--orange); }
.etat-envoi[data-etat="erreur"] p{ color:var(--encre); }
.etat-envoi a{ border-bottom:1px solid var(--orange); }
@media (max-width:980px){ .formulaire{ grid-column:1 / 9; } }
@media (max-width:680px){ .formulaire{ grid-column:1 / 5; margin-top:48px; } }

/* — 6. Dispositifs ————————————————————————————————— */

/* Le bandeau : une ligne d'annonce, très petite, qui défile au-dessus de la barre.
   Elle défile hors de l'écran avec la page ; la barre, elle, reste collée.
   Exception validée à la règle « pas de bandeau défilant » : réservé à une annonce temporaire,
   il s'arrête au survol et au focus clavier, et se fige en mouvement réduit. */
.bandeau{ display:flex; overflow:hidden; white-space:nowrap; background:var(--encre); color:var(--papier);
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.bandeau-piste{ display:inline-flex; gap:28px; flex-shrink:0; padding:7px 14px 7px 0; animation:defiler 32s linear infinite; }
.bandeau:hover .bandeau-piste, .bandeau:focus-visible .bandeau-piste{ animation-play-state:paused; }
@keyframes defiler{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){ .bandeau-piste{ animation:none; } .bandeau-piste + .bandeau-piste{ display:none; } }

/* Le changement de page : la feuille sort, la suivante glisse en place, la barre ne bouge pas.
   Transition d'une page à l'autre dans les navigateurs qui la connaissent ; ailleurs, et en
   mouvement réduit, la page change normalement. */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none; } }
::view-transition-old(root){ animation:feuille-sort .22s ease-in both; }
::view-transition-new(root){ animation:feuille-entre .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes feuille-sort{ to{ opacity:0; transform:translateY(-14px); } }
@keyframes feuille-entre{ from{ opacity:0; transform:translateY(22px); } }

/* Navigation */
.nav{ position:sticky; top:0; z-index:100; background:var(--papier); border-bottom:1px solid transparent;
  transition:border-color .3s ease; view-transition-name:barre; }
.nav.pose{ border-bottom-color:var(--ligne); }
.nav-in{ min-height:78px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:28px; }
.sceau{ font-size:17px; font-weight:600; letter-spacing:-.02em; }
.nav-liens{ display:flex; gap:26px; font-size:14px; font-weight:500; }
.nav-liens a{ position:relative; }
.nav-liens a::after{ content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px; background:var(--orange);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav-liens a:hover::after,.nav-liens a:focus-visible::after{ transform:scaleX(1); }
@media (max-width:980px){ .nav-in{ grid-template-columns:1fr auto; } .nav-liens{ display:none; } }
/* Sur téléphone, le bouton de la barre tient sur une ligne ; sous 360 px, la place manque
   et le libellé repasse sur deux lignes. */
@media (max-width:680px){ .nav-in{ min-height:66px; gap:10px; } .sceau{ font-size:16px; }
  .nav-in .bouton{ min-height:42px; padding:0 12px; font-size:13px; white-space:nowrap; } }
@media (max-width:359px){ .nav-in .bouton{ white-space:normal; max-width:150px; padding:4px 10px; } }

/* Bouton */
/* Un libellé long se replie sur deux lignes : la marge verticale lui laisse de l'air
   et le bouton grandit. Sur une seule ligne, la hauteur minimale l'emporte, rien ne bouge. */
.bouton{ display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:10px; min-height:48px; padding:11px 18px;
  border:1px solid var(--encre); font-size:14px; font-weight:500; color:var(--encre); background:transparent; cursor:pointer;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease); }
.bouton:hover,.bouton:focus-visible{ transform:translateY(-2px); background:var(--encre); color:var(--papier); }
.section.sombre .bouton{ border-color:var(--papier); color:var(--papier); }
.section.sombre .bouton:hover,.section.sombre .bouton:focus-visible{ background:var(--papier); color:#111318; }
/* Le bouton encadré de violet, sur la section sombre : le cadre prend le violet, éclairci pour l'encre,
   au lieu du papier ; le libellé reste clair. Au survol, le violet remplit le bouton et le libellé passe
   à l'encre. Exception validée : la seule fois où une couleur de mot touche un objet. */
.section.sombre .bouton.encadre-violet{ border-color:var(--violet); }
.section.sombre .bouton.encadre-violet:hover, .section.sombre .bouton.encadre-violet:focus-visible{ background:var(--violet); color:#111318; }
.actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Hero */
.hero{ padding:clamp(88px,10vw,156px) 0 clamp(40px,5vw,72px); overflow:hidden; position:relative; }
/* Le sur-titre ne laisse pas de mot seul sur sa dernière ligne, sans rééquilibrer les autres. */
.hero-amorce{ grid-column:1 / 7; margin-bottom:34px; font-size:14px; font-weight:500; color:var(--encre-2); text-wrap:pretty; }
.hero h1{ grid-column:1 / 11; max-width:1140px; }
.hero .chapo{ grid-column:1 / 7; margin-top:42px; }
.hero .actions{ grid-column:1 / 7; margin-top:34px; }
.hero .marge{ grid-column:10 / 13; align-self:end; padding-bottom:8px; }
.hero-filet{ grid-column:1 / 13; margin-top:90px; border-top:1px solid var(--ligne); }
@media (max-width:980px){
  .grille{ grid-template-columns:repeat(8, minmax(0,1fr)); }
  .hero-amorce,.hero .chapo,.hero .actions{ grid-column:1 / 7; }
  .hero h1{ grid-column:1 / 9; } .hero .marge{ grid-column:6 / 9; } .hero-filet{ grid-column:1 / 9; }
}
@media (max-width:680px){
  :root{ --gouttiere:20px; --section:84px; }
  .grille{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
  .hero{ padding-top:70px; }
  .hero-amorce,.hero h1,.hero .chapo,.hero .actions,.hero .marge,.hero-filet{ grid-column:1 / 5; }
  .hero .marge{ margin-top:54px; max-width:230px; }
}

/* Le vis-à-vis : l'invitation et le formulaire, face à face sur le papier. Pour une page qui n'a
   qu'une chose à faire, recueillir une demande : le formulaire commence en haut de l'écran, à côté
   du titre. En bureau, le titre reste en vue pendant qu'on remplit ; sous 981 px, l'un passe sous
   l'autre. */
.section.vis-a-vis{ padding-top:clamp(48px,6vw,96px); }
.vis-a-vis-titre{ grid-column:1 / 6; align-self:start; }
/* Un interligne un peu plus ouvert que celui des titres : l'accent du « À » qui ouvre une ligne
   toucherait sinon la ligne du dessus. */
.vis-a-vis-titre h1{ line-height:1; }
.vis-a-vis-corps{ grid-column:7 / 13; }
.vis-a-vis-corps > h2{ font-size:clamp(26px,2.3vw,34px); line-height:1.08; letter-spacing:-.03em; }
.vis-a-vis .formulaire{ margin-top:6px; }
@media (min-width:981px){
  .vis-a-vis-titre{ position:sticky; top:112px; }
  .vis-a-vis-titre h1{ font-size:clamp(56px,5.6vw,88px); }
}
@media (max-width:980px){
  .vis-a-vis-titre, .vis-a-vis-corps{ grid-column:1 / -1; }
  .vis-a-vis-corps{ margin-top:56px; }
}
@media (max-width:680px){ .vis-a-vis-corps{ margin-top:40px; } }

/* Le texte long : pages juridiques et notes. Lecture continue, colonne mesurée. */
.hero-court{ padding-bottom:clamp(24px,3vw,40px); }
.hero-court .chapo{ margin-top:28px; }
.texte-long{ grid-column:1 / 9; max-width:72ch; font-size:17px; line-height:1.6; }
.texte-long section + section{ margin-top:56px; }
.texte-long h2{ font-size:clamp(24px,2.4vw,32px); letter-spacing:-.03em; line-height:1.15; margin-bottom:16px; }
.texte-long p + p, .texte-long ul + p, .texte-long p + ul, .texte-long dl + p, .texte-long p + dl{ margin-top:14px; }
.texte-long ul{ margin:0; padding-left:22px; }
.texte-long li + li{ margin-top:6px; }
.texte-long a{ border-bottom:1px solid var(--ligne); transition:border-color .3s; }
.texte-long a:hover{ border-color:var(--orange); }
.texte-long .bordereau{ margin:22px 0; }
.texte-long .bordereau div{ grid-template-columns:200px minmax(0,1fr); }
.texte-long .bordereau dd{ font-weight:400; font-size:16px; }
@media (max-width:980px){ .texte-long{ grid-column:1 / 9; } }
/* Le sommaire en marge : la liste des sections reste en vue dans la marge droite, et un onglet
   orange marque la section en cours de lecture. L'étiquette indexe, l'intercalaire classe.
   Le script le remplit à partir des titres ; sans lui, ou sous 981 px, il n'apparaît pas. */
.sommaire-marge{ display:none; }
@media (min-width:981px){
  .sommaire-marge.pret{ display:block; grid-column:10 / 13; grid-row:1; align-self:start;
    position:sticky; top:112px; max-height:calc(100vh - 140px); overflow:auto; padding-left:2px; }
}
.sommaire-marge .etiquette{ margin-bottom:14px; }
.sommaire-marge ol{ margin:0; padding:0 0 0 18px; list-style:none; border-left:1px solid var(--ligne); }
.sommaire-marge a{ display:block; padding:5px 0; font-size:13px; line-height:1.35; color:var(--encre-2); transition:color .25s ease; }
.sommaire-marge a:hover, .sommaire-marge a[aria-current="true"]{ color:var(--encre); }
.sommaire-marge a[aria-current="true"]{ font-weight:500; }
.sommaire-marge .onglet{ position:absolute; left:1px; top:0; width:3px; height:1px; background:var(--orange);
  transform-origin:top; transform:scaleY(0); transition:transform .35s var(--ease); pointer-events:none; }
@media (max-width:680px){ .texte-long{ grid-column:1 / 5; } .texte-long .bordereau div{ grid-template-columns:1fr; gap:4px; } }

/* Titres et chapôs de section, sur la grille */
.titre-large{ grid-column:1 / 8; margin-top:18px; }
.titre-tres-large{ grid-column:1 / 11; margin-top:18px; }
.titre-serre{ grid-column:1 / 7; margin-top:18px; }
.chapo-droite{ grid-column:9 / 13; margin-top:28px; font-size:18px; line-height:1.5; }
@media (max-width:980px){ .titre-large,.titre-tres-large,.titre-serre{ grid-column:1 / 8; }
  .chapo-droite{ grid-column:1 / 6; margin-top:34px; } }
@media (max-width:680px){ .titre-large,.titre-tres-large,.titre-serre,.chapo-droite{ grid-column:1 / 5; } }

/* La frise : une séquence de temps sur un filet, avec la part déjà jouée en orange.
   Intention : ordonner une séquence. Le rang de chaque temps se lit à sa place. */
.frise{ grid-column:1 / -1; margin-top:90px; position:relative; padding-top:44px; }
.frise::before{ content:""; position:absolute; top:6px; left:0; width:100%; height:1px; background:var(--ligne); }
.frise::after{ content:""; position:absolute; top:4px; left:0; width:var(--part,22%); height:5px; background:var(--orange);
  transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease); }
.frise.visible::after{ transform:scaleX(1); }
.frise-temps{ display:grid; grid-template-columns:repeat(var(--temps,5), 1fr); gap:20px; }
.frise-temps > *{ font-size:15px; padding-top:8px; }
.frise-temps > :first-child{ font-weight:500; }
.frise .marge{ position:absolute; left:2%; top:-28px; color:var(--orange-texte); }
@media (max-width:680px){
  .frise-temps{ grid-template-columns:1fr; gap:18px; padding-left:28px; }
  .frise::before{ top:4px; bottom:0; left:4px; width:1px; height:calc(100% - 12px); }
  .frise::after{ top:4px; left:2px; width:5px; height:var(--part,24%); transform:scaleY(0); transform-origin:top; }
  .frise.visible::after{ transform:scaleY(1); }
  .frise .marge{ position:static; margin:0 0 24px 28px; }
}

/* La chaîne : des maillons reliés par des flèches. Même intention que la frise,
   pour une progression causale plutôt que chronologique. */
.chaine{ grid-column:1 / -1; margin-top:104px; border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne);
  padding:58px 0 52px; display:grid; grid-template-columns:repeat(var(--maillons,5), 1fr); gap:24px; align-items:center; }
.maillon{ font-size:clamp(20px,2vw,29px); line-height:1.1; letter-spacing:-.025em; font-weight:500; position:relative; }
.maillon:not(:last-child)::after{ content:"→"; position:absolute; right:-18px; top:50%; transform:translateY(-50%);
  color:var(--orange); font-size:16px; }
.chaine.decrite{ align-items:start; }
.chaine.decrite .maillon h3{ font-size:clamp(20px,2vw,29px); line-height:1.1; letter-spacing:-.025em; }
.chaine.decrite .maillon p{ margin-top:12px; font-size:15px; color:var(--encre-2); max-width:24ch; }
.chaine.decrite .maillon:not(:last-child)::after{ top:.55em; transform:none; }
@media (max-width:980px){
  .chaine{ grid-template-columns:1fr; gap:26px; }
  .maillon:not(:last-child)::after,.chaine.decrite .maillon:not(:last-child)::after{ content:"↓"; right:auto; left:0; top:calc(100% + 7px); transform:none; }
}

/* Les colonnes indexées : des constats de même rang, numérotés, sans interaction.
   Intention : énumérer sans hiérarchiser. */
.colonne{ grid-column:span 4; border-top:1px solid var(--ligne); padding-top:22px; min-height:220px; display:flex; flex-direction:column; }
.colonne > p:last-of-type{ margin-bottom:32px; }
.colonne .bouton{ margin-top:auto; align-self:flex-start; }
.colonne h3{ margin:30px 0 18px; }
.colonne p{ color:var(--encre-2); font-size:16px; max-width:34ch; }
.colonne .forte{ font-size:clamp(17px,1.4vw,20px); color:var(--encre); margin-top:16px; max-width:30ch; }
.colonne .suite{ display:inline-block; margin-top:26px; font-size:14px; font-weight:500; border-bottom:1px solid var(--ligne); padding-bottom:3px; transition:border-color .3s; }
.colonne .suite:hover{ border-color:var(--orange); }
/* La reprise : ouvre un second temps dans une section déjà commencée.
   Un filet la sépare de ce qui précède ; elle ne remplace pas la tête de section.
   Plusieurs reprises dans une section seulement si elles ouvrent des sous-blocs
   parallèles, de même forme — deux au plus, au-delà la section se coupe.
   Deux formes : une étiquette (.etiquette.reprise) qui nomme le bloc,
   ou une phrase forte (.forte.reprise) qui fait la transition. */
.reprise{ grid-column:1 / -1; margin-top:clamp(64px,7vw,110px); padding-top:30px;
  margin-bottom:34px; border-top:1px solid var(--ligne); }
/* Un cran au-dessus des titres de colonnes qu'elle introduit, à toutes les largeurs. */
.forte.reprise{ max-width:none; padding-top:34px; margin-bottom:40px; font-size:clamp(24px,2.5vw,34px); }

/* Les piliers : trois phrases fortes posées en têtes des colonnes qui suivent, sur la même
   trame. La section se lit en tableau, pilier par pilier. Sous 981 px, les colonnes passent
   deux par deux : les piliers repassent en pile, comme une phrase forte sur trois lignes. */
.piliers{ grid-column:1 / -1; margin:clamp(56px,6vw,92px) 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.piliers .forte{ max-width:none; }
/* La reprise qui suit se rapproche : les piliers coiffent les rangées de colonnes. */
.piliers + .reprise{ margin-top:clamp(36px,3.5vw,52px); }
@media (max-width:980px){ .piliers{ grid-template-columns:1fr; gap:0; } .piliers .forte{ max-width:32ch; } }

/* La colonne de moyens : sous le titre, la liste des compétences du groupe plutôt
   qu'un texte suivi d'un bouton. Même rang, même absence d'interaction, et pas d'index :
   les groupes ne se suivent pas, ils se côtoient. */
/* La colonne sans index : un titre et un texte, ni numéro ni marque. Le titre prend
   la place du numéro, juste sous le filet, et reste sous la taille d'une phrase forte. */
.colonne.moyens, .colonne.sans-index{ min-height:0; }
.colonne.moyens h3, .colonne.sans-index h3{ font-size:clamp(19px,1.8vw,26px); margin-top:0; }
.colonne.moyens h3{ margin-bottom:22px; }
.colonne.moyens .livrables{ columns:1; }

.colonnes-4 .colonne{ grid-column:span 3; }
.colonnes-4 .colonne:first-of-type{ grid-column:1 / span 3; margin-top:48px; }
.colonnes-4 .colonne:first-of-type ~ .colonne{ margin-top:48px; }
@media (max-width:980px){ .colonne,.colonnes-4 .colonne{ grid-column:span 4; min-height:auto; padding-bottom:30px; } .colonnes-4 .colonne:first-of-type{ grid-column:1 / span 4; } }
@media (max-width:680px){ .colonne,.colonnes-4 .colonne,.colonnes-4 .colonne:first-of-type{ grid-column:1 / 5; } }

/* Les dossiers : une chemise dont le recto coulisse pour découvrir le verso.
   Intention : présenter des choix de même rang. Quatre au plus. */
.dossiers{ grid-column:1 / -1; margin-top:78px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:28px; row-gap:28px; align-items:stretch; }
.dossier{ position:relative; min-height:390px; cursor:pointer; outline:none; }
.dossier::before{ content:""; position:absolute; inset:15px 15px -15px -15px; border:1px solid var(--ligne); transition:transform .4s var(--ease);
  /* le dernier feuillet de la pile : une feuille de notes jaune, lignée, comme sur le téléphone */
  background-color:#FFF6B8;
  background-image:repeating-linear-gradient(to bottom, transparent 0 27px, rgba(17,19,24,.35) 27px 28px);
  background-position:0 14px; }
.dossier .verso,.dossier .recto{ position:absolute; inset:0; border:1px solid var(--ligne); background:var(--blanc); }
.dossier .verso{ padding:34px; display:flex; flex-direction:column; justify-content:flex-end; }
.dossier .verso ul{ margin:16px 0 0; padding:0; list-style:none; columns:2; column-gap:30px; }
.dossier .verso li{ break-inside:avoid; margin:0 0 10px; font-size:15px; color:var(--encre-2); }
.dossier .recto{ z-index:2; padding:34px; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .42s var(--ease); transform:translate(0,0); }
.dossier:hover .recto,.dossier:focus-within .recto,.dossier.ouvert .recto{ transform:translate(38px,-38px); }
.dossier:hover::before,.dossier:focus-within::before,.dossier.ouvert::before{ transform:translate(-7px,7px); }
.languette{ display:inline-flex; align-self:flex-start; background:var(--orange); color:var(--papier); padding:7px 10px;
  font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.dossier h3{ font-size:clamp(34px,3.5vw,50px); line-height:.98; letter-spacing:-.04em; }
.dossier .recto p{ margin-top:18px; max-width:36ch; font-size:17px; color:var(--encre-2); }
/* Le dossier transverse : même chemise, pleine largeur, languette évidée. Pour ce qui traverse les autres. */
.dossier.transverse{ grid-column:1 / -1; min-height:300px; }
.dossier.transverse .languette{ background:transparent; color:var(--orange-texte); border:1px solid var(--orange); }
.dossier.transverse .recto p{ max-width:60ch; }
.dossier.transverse .verso li,.dossier.transverse .recto p{ color:var(--encre); }
.tirette{ font:500 13px var(--police); color:var(--encre-2); background:none; border:0; padding:0; text-align:left;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
@media (max-width:680px){
  .dossiers{ grid-template-columns:1fr; gap:42px; }
  .dossier{ min-height:365px; }
  .dossier .recto,.dossier .verso{ padding:26px; }
  .dossier .verso ul{ columns:1; }
  .dossier:hover .recto{ transform:none; }
  .dossier.ouvert .recto,.dossier:focus-within .recto{ transform:translate(20px,-26px); }
}

/* Les dossiers empilés, fidèles à la maquette V1 : chaque fiche se cale plus bas
   que la précédente et la recouvre au défilement, ne laissant dépasser que son
   intercalaire et sa bande de titre. Le recto coulisse au clic et découvre le verso.
   Même intention que les dossiers : présenter des choix de même rang.
   Les décalages top dépendent de la hauteur de la barre de navigation (78 px).
   Exception validée à la convention de forme : coins et onglets arrondis, ombre douce. */
.pile-dossiers{ grid-column:1 / -1; margin-top:48px; }
.hote{ position:relative; padding-top:15px; margin-bottom:24px; }
@media (min-width:981px){
  .hote{ position:sticky; }
  .hote:nth-child(1){ top:100px; }
  .hote:nth-child(2){ top:188px; }
  .hote:nth-child(3){ top:276px; }
  .hote:nth-child(4){ top:364px; }
}
.hote .intercalaire{ top:0; height:17px; width:86px; border:0; border-radius:7px 7px 0 0;
  background:var(--orange); transition:transform .45s var(--ease); }
.hote:nth-child(1) .intercalaire{ left:32px; opacity:1; }
.hote:nth-child(2) .intercalaire{ left:126px; opacity:.62; }
.hote:nth-child(3) .intercalaire{ left:220px; opacity:.34; }
.hote:nth-child(4) .intercalaire{ left:314px; opacity:.2; }
@media (max-width:640px){ .hote .intercalaire{ left:24px !important; width:72px; } }
.hote:hover .intercalaire{ transform:translateY(-4px); }
.fiche{ position:relative; width:100%; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer;
  background:var(--papier-creux); border:1px solid var(--ligne); border-radius:14px; min-height:318px; overflow:hidden;
  box-shadow:0 18px 44px -30px rgba(17,19,24,.55);
  transition:box-shadow .3s ease, border-color .3s ease; }
.fiche::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--orange); opacity:.85; z-index:3; }
.fiche:hover{ box-shadow:0 26px 60px -34px rgba(17,19,24,.7); border-color:#C6C3B6; }
.face{ position:absolute; inset:0; padding:30px 36px 30px 40px; display:grid;
  grid-template-columns:clamp(180px,22vw,280px) minmax(0,1fr); gap:clamp(20px,4vw,56px); align-content:start;
  transition:transform .55s cubic-bezier(.16,1,.3,1); }
.face h3{ font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.15; margin-bottom:12px; }
.face .entete{ display:flex; align-items:flex-start; gap:12px; }
.face .languette{ flex-shrink:0; margin-top:3px; }
.fiche-bloc{ display:flex; flex-direction:column; height:100%; }
.fiche p{ font-size:1rem; color:var(--encre-2); margin-bottom:22px; }
.recto{ background:var(--papier-creux); z-index:2; }
.verso{ background:var(--blanc); z-index:1; }
.fiche.ouverte .recto{ transform:translateY(-101%); }
.fiche-actions{ margin-top:auto; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.verso .etiquette{ margin-bottom:10px; }
.tirette{ padding-top:0; font:600 .76rem var(--police); color:var(--orange-texte); background:none; border:0;
  display:flex; align-items:center; gap:9px; cursor:pointer; }
.tirette i{ width:22px; height:5px; border-radius:3px; background:var(--orange); opacity:.5; }
.livrables{ list-style:none; margin:0; padding:0; font-size:.96rem; columns:2; column-gap:40px; }
.livrables li{ padding:9px 0; border-bottom:1px solid var(--ligne); break-inside:avoid; }
.livrables li:last-child{ border-bottom:0; }
@media (max-width:980px){
  .face{ grid-template-columns:1fr; gap:14px; padding:26px 26px 26px 32px; }
  .livrables{ columns:1; }
}
/* Une fiche recouverte ne laisse voir qu'une bande de 88 px, sous l'onglet de la suivante.
   La bande ne montre que la languette et le titre, tenu sur une ligne ; le texte et
   les boutons commencent plus bas, là où la fiche suivante les couvre. */
@media (min-width:981px){
  .face.recto{ grid-template-areas:"tete tete" ". bloc"; row-gap:22px; }
  .face.recto .entete{ grid-area:tete; }
  .face.recto .entete h3{ white-space:nowrap; }
  .face.recto .fiche-bloc{ grid-area:bloc; }
}
/* La cale : un espace vide en fin de pile, pour que la pile complète reste un instant en place
   avant de partir d'un bloc. Une marge ne suffit pas : le collant se contraint à la boîte de marge.
   Courte : au-delà, un grand vide suit la pile. */
.cale{ height:0; }
@media (min-width:981px){ .cale{ height:96px; } }

/* La planche d'analyse : une feuille de travail à cartouche technique,
   lue ligne à ligne. Intention : montrer comment on lit avant de proposer. */
.planche{ grid-column:1 / 8; margin-top:72px; background:var(--blanc); border:1px solid var(--ligne);
  border-top:3px solid var(--encre); padding:0 30px; box-shadow:5px 6px 0 #E0E1DC; }
.cartouche{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 0; font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--ligne); color:var(--encre); }
.cartouche span:last-child{ color:var(--orange-texte); }
.planche-legende{ display:flex; justify-content:space-between; gap:16px; margin-top:26px; font-size:13px; font-weight:500; }
.planche-legende span{ color:var(--encre-2); font-size:11px; }
.planche-ligne{ display:grid; grid-template-columns:36px 1fr; gap:18px; padding:28px 0; border-bottom:1px solid var(--ligne); }
.planche-ligne:last-of-type{ border-bottom:0; }
.planche-ligne .rang{ font-size:13px; color:var(--orange-texte); font-weight:500; }
.planche-ligne h3{ margin:0 0 8px; font-size:24px; letter-spacing:-.02em; }
.planche-ligne p{ color:var(--encre-2); max-width:60ch; }
.planche-pied{ display:flex; justify-content:space-between; gap:12px; color:var(--encre-2); padding:16px 0; font-size:11px;
  border-top:1px solid var(--ligne); }
@media (max-width:980px){ .planche{ grid-column:1 / 9; } }
@media (max-width:680px){
  .planche{ grid-column:1 / 5; padding:0 20px; }
  .planche-ligne{ grid-template-columns:24px 1fr; gap:12px; }
  .planche-legende{ flex-direction:column; gap:5px; }
}

/* L'encart : un point de vue signé, en marge de la planche. */
.encart{ grid-column:9 / 13; margin-top:72px; border-top:1px solid var(--ligne); padding-top:26px; align-self:start; }
.encart .cartouche{ padding-top:0; }
.encart h3{ margin:20px 0 18px; font-size:31px; line-height:1.05; letter-spacing:-.035em; }
.encart p{ color:var(--encre-2); font-size:16px; }
@media (max-width:980px){ .encart{ grid-column:1 / 6; margin-top:56px; } }
@media (max-width:680px){ .encart{ grid-column:1 / 5; } }

/* Appel final, sur section sombre */
.appel h2{ grid-column:1 / 11; }
.appel .grille > p:not(.etiquette){ grid-column:1 / 7; margin-top:42px; font-size:20px; color:var(--encre-2); }
.appel .bloc > p:not(.forte):not(.micro){ color:var(--encre-2); }
.appel .actions{ grid-column:1 / 7; margin-top:32px; }
@media (max-width:980px){ .appel h2{ grid-column:1 / 8; } .appel .grille > p,.appel .actions{ grid-column:1 / 6; } }
@media (max-width:680px){ .appel h2,.appel .grille > p,.appel .actions{ grid-column:1 / 5; } }

/* Pied de page */
.pied{ background:#111318; color:#F7F7F3; border-top:1px solid rgba(247,247,243,.16); padding:34px 0 46px; }
.pied-in{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; }
.pied-meta{ color:rgba(247,247,243,.7); font-size:13px; }
.pied .sceau + .pied-meta{ margin-top:8px; }
.pied-nav{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:rgba(247,247,243,.7); margin-top:16px; }
.pied-nav a:hover{ color:#F7F7F3; }
@media (max-width:680px){ .pied-in{ grid-template-columns:1fr; } }

/* La feuille et sa corne : une note qu'on a déjà ouverte, il y a davantage à lire.
   Intention : signaler qu'il y a davantage ailleurs. */
.feuilles{ grid-column:1 / -1; margin-top:72px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; }
.feuille{ display:block; position:relative; overflow:hidden; background:var(--blanc); border:1px solid var(--ligne);
  padding:28px 34px 28px 28px; transition:transform .35s var(--ease), box-shadow .35s ease; }
.feuille:hover{ transform:translateY(-2px); box-shadow:5px 6px 0 #E0E1DC; }
.feuille .corne{ position:absolute; top:0; right:0; width:26px; height:26px; pointer-events:none; background:var(--papier);
  clip-path:polygon(0 0,100% 0,100% 100%); transition:width .35s var(--ease), height .35s var(--ease); }
.feuille .corne::after{ content:""; position:absolute; inset:0; clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(225deg, rgba(17,19,24,.16), rgba(17,19,24,0) 60%); }
.feuille:hover .corne{ width:40px; height:40px; }
.feuille .secteur{ display:block; margin-bottom:12px; font-size:13px; font-weight:500; color:var(--orange-texte); }
.feuille h3{ margin-bottom:10px; font-size:24px; }
.feuille p{ font-size:15px; color:var(--encre-2); }
.feuille.vide .secteur{ color:var(--encre-2); }
@media (max-width:980px){ .feuilles{ grid-template-columns:1fr; } }

/* Le cartouche de projet et sa référence : mêmes champs, même ordre.
   Intention : rendre comparables des choses hétérogènes. */
.projets{ grid-column:1 / -1; margin-top:72px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }
.projet{ border:1px solid var(--ligne); background:var(--blanc); overflow:hidden; }
.vignette{ position:relative; aspect-ratio:16/10; background:var(--papier-creux); border-bottom:1px solid var(--ligne);
  display:grid; place-items:center; }
.vignette span{ font-size:12px; font-weight:500; color:var(--encre-2); }
.projet-cartouche{ padding:26px 28px 28px; }
.projet-cartouche h3{ margin-bottom:16px; font-size:24px; }
.champs{ margin:0; font-size:15px; }
.champs div{ display:grid; grid-template-columns:108px minmax(0,1fr); gap:14px; padding:8px 0; border-top:1px solid var(--ligne); }
.champs dt{ font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-2); padding-top:3px; }
.champs dd{ margin:0; }
@media (max-width:880px){ .projets{ grid-template-columns:1fr; } }

/* — 7. Mots semés ———————————————————————————————————
   Dans le hero, la souris sème des mots surlignés dans l'espace vide,
   trois au plus, jamais sur le texte. Le visiteur éprouve le geste.
   Les mots semés ne sont jamais surlignés en bleu : le bleu est le geste
   du titre, juste à côté, et les deux se confondraient. Ils prennent les
   teintes d'une trousse de surligneurs — vert, jaune, orange, violet —
   posées en transparence pour que le texte reste lisible dessus. */
.semis{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.graine{ position:absolute; font-size:clamp(17px,1.35vw,21px); font-weight:500; letter-spacing:-.015em; color:var(--encre);
  padding:3px 9px 4px; white-space:nowrap; opacity:0; transform:translateY(8px) rotate(-1deg);
  transition:opacity .28s ease, transform .42s var(--ease); isolation:isolate; }
.graine::before{ content:""; position:absolute; z-index:-1; left:-.08em; right:-.08em; top:48%; height:.58em;
  background:var(--teinte, var(--vert)); opacity:var(--intensite, .5); transform:scaleX(0) rotate(-1.2deg); transform-origin:left;
  transition:transform .42s var(--ease) .16s; }
.graine.vive{ opacity:.96; transform:translateY(0) rotate(-1deg); }
.graine.vive::before{ transform:scaleX(1) rotate(-1.2deg); }
/* Le jaune est clair par nature : il prend plus d'encre pour peser autant que les autres. */
.graine[data-teinte="vert"]{ --teinte:var(--vert); --intensite:.5; }
.graine[data-teinte="jaune"]{ --teinte:var(--jaune); --intensite:.78; }
.graine[data-teinte="orange"]{ --teinte:var(--orange); --intensite:.5; }
.graine[data-teinte="violet"]{ --teinte:var(--violet); --intensite:.46; }
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse),(max-width:980px){ .semis{ display:none; } }

/* — 8. Mouvement réduit ————————————————————————————— */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .surligne::before,.frise::after{ transform:none !important; }
  .dossier.ouvert .recto{ transform:none; }
}