/* ==========================================================================
   Joy B2B · joyb2b.fr · le socle du site · v059 · 8 octobre 2026
   Parties 0 à 4 : l'accueil v30 (« Du seuil au signe »), reprises mot pour mot.
     0. les polices, hébergées avec le site
     1. les jetons (couleurs, texte, espace, rayons, mouvement)
     2. la base
     3. le cadre commun (en-tête, pied, bouton, surtitre, titres, chapeau, fil, signature, blocs)
     4. une seule langue du mouvement
   Partie 5 : les pièces communes portées par les autres pages (le rail du Dispositif v18, le premier
   échange de Résultats v22, le bouton filet, le mot qui s'explique, les formulaires, les pages de la
   maison, la feuille d'impression). Chaque page garde sa propre feuille sous son préfixe.
   ========================================================================== */

/* 0 · les polices, hébergées avec le site : aucune requête vers un tiers ---- */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* 1 · les jetons ------------------------------------------------------------ */
:root{
  /* les couleurs de la maison (palette S3), mêmes noms que la feuille du site v012 */
  --papier:#FDFCF9; --blanc:#FFFFFF; --ombre:#F4F3EE; --voile:#E4EBE2; --voile-fonce:#C9D6CB;
  --encre:#15301D; --gris:#5E6F63; --porteur:#184928; --action:#1C542F; --appui:#123B20; --eclat:#1EB83F;
  /* le signe au repos, sur le vert du seuil */
  --signe-fond:#1F5430; --signe-trait:#2C6538; --signe-trefle:#357742;
  /* le papier posé sur le vert : trois intensités de texte, deux filets */
  --sur-vert:#FDFCF9; --sur-vert-1:rgba(253,252,249,.9); --sur-vert-2:rgba(253,252,249,.8); --sur-vert-3:rgba(253,252,249,.7);
  --filet-vert:rgba(253,252,249,.22); --filet-vert-fort:rgba(253,252,249,.5);

  /* le texte : deux voix, une échelle */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --t-h1:clamp(1.98rem,5.5cqw,3.28rem);          /* le titre du seuil */
  --t-h2:clamp(1.58rem,3.8cqw,2.33rem);         /* le titre de chaque bloc */
  --t-h3:clamp(1.2rem,2.2cqw,1.45rem);          /* le titre d'un panneau */
  --t-question:clamp(1.2rem,2.6cqw,1.5rem);   /* une question posée au lecteur */
  --t-chiffre:1.5rem;                          /* un chiffre qui prouve, en Fraunces */
  --t-sous:clamp(1rem,1.85cqw,1.08rem);        /* le sous-titre du seuil */
  --t-lettre:1.08rem;                          /* la lettre de l'engagement */
  --t-fil:1.04rem;                             /* la phrase fil */
  --t-chapeau:1.02rem;                         /* le chapeau d'un bloc, le nom d'une carte */
  --t-corps:1rem;                              /* le texte courant d'un objet */
  --t-ui:.92rem;                               /* les libellés, les noms, la ligne de signature */
  --t-petit:.86rem;                            /* les légendes, la navigation, les onglets */
  --t-note:.8rem;                              /* les notes et mentions */
  --t-surtitre:.72rem;                         /* les surtitres, en capitales espacées */

  /* l'espace : une gouttière, un souffle entre les blocs, un rythme dans chaque bloc */
  --gouttiere:clamp(1.1rem,4cqw,3.2rem);
  --air:clamp(3.4rem,7cqw,5.4rem);             /* le haut et le bas de chaque bloc */
  --r-surtitre:.9rem;                          /* surtitre → titre */
  --r-titre:.8rem;                             /* titre → chapeau */
  --r-objet:clamp(1.6rem,3.5cqw,2.4rem);       /* chapeau → figure, carte, calendrier */
  --r-fil:clamp(2rem,4cqw,2.8rem);             /* objet → phrase fil */
  --entete:64px;

  /* les rayons : un par rôle */
  --rayon:1rem;         /* les objets posés : figures, cartes, panneaux */
  --rayon-moyen:.75rem; /* les boutons et les cartes à choisir */
  --rayon-petit:.55rem; /* les barres du calendrier, le bouton de l'en-tête */

  /* le mouvement : une courbe douce, une courbe pour le tour du trèfle, cinq durées */
  --douce:cubic-bezier(.2,.7,.2,1);
  --tour:cubic-bezier(.58,.08,.14,1);
  --d-geste:.18s;   /* le retour d'un survol, d'un clic */
  --d-fondu:.45s;   /* un texte qui en remplace un autre */
  --d-entree:.7s;   /* un bloc qui arrive */
  --d-trace:1s;     /* une barre qui se trace */
  --d-tour:3.5s;    /* le tour du trèfle */

}

/* 2 · la base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--entete) + env(safe-area-inset-top,0px) + 8px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.page{container:page / inline-size;background:var(--papier);color:var(--encre);font:400 17px/1.55 var(--sans)}
.page p{text-wrap:pretty}
.page img{max-width:100%}
:focus-visible{outline:2px solid var(--porteur);outline-offset:2px}
.sombre :focus-visible,[data-ton="sombre"] :focus-visible,.pied :focus-visible{outline-color:var(--eclat)}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}
.vh{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;margin:-1px!important;padding:0!important;border:0!important}
.nw{white-space:nowrap}
.cadre{max-width:1120px;margin-inline:auto;padding-inline:var(--gouttiere)}
.ico{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico.pleine{fill:currentColor;stroke:none}
.evitement{position:absolute;left:var(--gouttiere);top:.6rem;z-index:80;background:var(--papier);color:var(--encre);font:600 var(--t-petit) var(--sans);padding:.7rem 1rem;border-radius:var(--rayon-petit);box-shadow:0 6px 18px rgba(21,48,29,.25)}
.evitement:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 3 · le cadre commun --------------------------------------------------------- */

/* l'en-tête : le même objet sur toutes les pages. Il prend le ton du seuil qu'il couvre,
   vert sur un seuil vert, papier ailleurs, et passe au papier quand le seuil s'en va. */
.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--papier);color:var(--encre);border-bottom:1px solid var(--voile);transition:background-color .3s var(--douce),color .3s var(--douce),border-color .3s var(--douce)}
.entete[data-ton="sombre"]{background:var(--porteur);color:var(--papier);border-bottom-color:transparent}
.entete .cadre{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--entete)}
.marque{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;color:inherit;text-decoration:none;font:600 .82rem var(--sans);letter-spacing:.1em;text-transform:uppercase}
.marque svg{width:24px;height:24px;flex:none;overflow:visible}
.marque .m-cercle{fill:none;stroke:var(--voile-fonce);stroke-width:.05;transition:stroke .3s var(--douce)}
.marque .m-trefle{fill:var(--porteur);transition:fill .3s var(--douce)}
[data-ton="sombre"] .marque .m-cercle{stroke:var(--signe-trait)}
[data-ton="sombre"] .marque .m-trefle{fill:var(--papier)}
.nav{display:flex;align-items:center;gap:1.25rem;font-size:var(--t-petit)}
.nav a{color:inherit;text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent;transition:border-color var(--d-geste) var(--douce),opacity var(--d-geste)}
[data-ton="sombre"] .nav a:not(.nav-btn){color:var(--sur-vert-2)}
.nav a:not(.nav-btn):hover,.nav a[aria-current="page"]{border-bottom-color:var(--eclat)}
.nav .nav-btn{border:1.5px solid var(--action);color:var(--action);border-radius:var(--rayon-petit);padding:.5rem .85rem;font-weight:600;white-space:nowrap;transition:background-color var(--d-geste) var(--douce),color var(--d-geste) var(--douce)}
.nav .nav-btn:hover{background:var(--action);color:var(--papier)}
[data-ton="sombre"] .nav .nav-btn{border-color:var(--filet-vert-fort);color:var(--papier)}
[data-ton="sombre"] .nav .nav-btn:hover{background:rgba(253,252,249,.1);color:var(--papier)}
.burger{display:none;min-height:2.75rem;padding:0 1rem;border-radius:var(--rayon-petit);border:1.5px solid var(--voile-fonce);background:transparent;color:inherit;font:600 var(--t-petit) var(--sans);cursor:pointer}
[data-ton="sombre"] .burger{border-color:var(--filet-vert-fort)}
@container page (max-width: 900px){
  .burger{display:inline-flex;align-items:center}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:.4rem var(--gouttiere) 1.4rem;background:var(--papier);border-bottom:1px solid var(--voile);box-shadow:0 18px 28px -22px rgba(21,48,29,.45);font-size:1.05rem}
  [data-ton="sombre"] .nav{background:var(--porteur);border-bottom-color:transparent}
  .nav.ouvert{display:flex}
  .nav a:not(.nav-btn){padding:.85rem 0;border-bottom:1px solid var(--voile)}
  [data-ton="sombre"] .nav a:not(.nav-btn){border-bottom-color:var(--filet-vert)}
  .nav .nav-btn{margin-top:1rem;text-align:center;padding:.9rem 1rem}
}

/* le bouton : un seul geste d'appel sur tout le site */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:1.6rem;min-width:min(100%,21rem);padding:.95rem 1.35rem;border-radius:var(--rayon-moyen);font:600 1.02rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background-color var(--d-geste) var(--douce),transform var(--d-geste) var(--douce)}
.btn svg{width:1.3rem;height:1.3rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--d-geste) var(--douce)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-plein{background:var(--action);color:var(--papier)}
.btn-plein:hover{background:var(--porteur)}
.sombre .btn-plein{background:var(--papier);color:var(--appui)}
.sombre .btn-plein:hover{background:var(--voile)}
@container page (max-width: 760px){ .btn{font-size:var(--t-ui);gap:.8rem;padding:.85rem 1.05rem} }

/* le surtitre : le point d'éclat dit « vous êtes ici » */
.surtitre{display:flex;align-items:center;gap:.55rem;margin:0 0 var(--r-surtitre);font:600 var(--t-surtitre)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--porteur)}
.surtitre::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--eclat);flex:none}
.sombre .surtitre{color:var(--sur-vert-2)}

/* les titres et le chapeau */
.page h1,.page h2,.page h3{font-family:var(--serif);font-weight:500;font-optical-sizing:auto;text-wrap:balance}
.page h2{font-size:var(--t-h2);line-height:1.15;letter-spacing:-.012em;color:var(--encre);margin:0 0 var(--r-titre);max-width:30ch}
.sombre h2{color:var(--papier)}
.chapeau{margin:0;max-width:58ch;font-size:var(--t-chapeau);color:var(--encre)}
.l{display:block}

/* le fil : la phrase qui nomme ce que le bloc suivant annonce */
.fil{position:relative;margin-top:var(--r-fil);padding-top:1.1rem}
.fil::before{content:"";position:absolute;left:0;top:0;width:28px;height:2px;border-radius:2px;background:var(--eclat)}
.fil p{margin:0;font:500 var(--t-fil)/1.5 var(--sans);color:var(--porteur)}

/* la signature : la photo, le nom, une ligne */
.signature{display:flex;align-items:center;gap:.9rem}
.signature img{width:60px;height:60px;border-radius:50%;display:block;flex:none}
.signature .nom{display:block;font:600 1.02rem/1.25 var(--sans)}
.signature .ligne{display:block;font-size:var(--t-ui);line-height:1.4}
.sombre .signature .nom{color:var(--papier)}
.sombre .signature .ligne{color:var(--sur-vert-3)}

/* les blocs : un souffle, un filet, trois fonds */
.bloc{padding-block:var(--air);border-top:1px solid var(--voile)}
.bloc.ombre{background:var(--ombre)}
.bloc.sombre,.seuil.sombre{background:var(--porteur);color:var(--papier);border-top:0}

/* le pied : le même sur toutes les pages ; le trèfle y fait son tour, une fois, en fin de lecture */
.pied{background:var(--appui);color:var(--papier);padding-block:clamp(2.6rem,6cqw,4rem) 1.8rem;font-size:var(--t-ui)}
.pied-colonnes{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.4rem}
@container page (max-width: 900px){ .pied-colonnes{grid-template-columns:1fr 1fr} }
@container page (max-width: 560px){ .pied-colonnes{grid-template-columns:1fr;gap:1.8rem} }
/* au téléphone, chaque lien du pied fait une cible de 44 px */
@container page (max-width: 760px){ .pied ul{gap:0} .pied li>a{display:inline-block;padding-block:.7rem} .pied .marque{margin-bottom:.4rem} }
.pied .marque{color:var(--papier);margin-bottom:.9rem}
.pied .marque svg{width:26px;height:26px}
.pied .marque .m-trefle{fill:var(--papier)}
.page .pied-titre{margin:0 0 .8rem;max-width:none;font:600 var(--t-surtitre)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--sur-vert-3)}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.pied a{color:var(--papier);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--d-geste) var(--douce)}
.pied a:hover,.pied a[aria-current="page"]{border-bottom-color:var(--eclat)}
.pied-sans{display:block;margin:0;font-size:var(--t-petit);line-height:1.5;color:var(--sur-vert-3);max-width:34ch}
.pied-colophon{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1rem;padding-top:1.2rem;border-top:1px solid var(--filet-vert);font-size:var(--t-note);color:var(--sur-vert-3)}
.pied-devise{font-family:var(--serif);font-size:1.05rem;color:var(--papier)}

/* 4 · une seule langue du mouvement --------------------------------------------
   Chaque mouvement se joue une fois, au moment où l'on regarde, et dit quelque chose.
   Ce qui est à l'écran à l'arrivée ne bouge pas. Ce qui arrive par le bas attend (classe
   « attend », posée par le script), puis se découvre quand on le regarde : un bloc dès qu'il
   entre, une figure quand elle est montée au dernier quart de l'écran. Sans script ou sous
   « réduire les animations », rien n'attend : tout est là. */
.reveal{transition:opacity var(--d-entree) var(--douce),transform var(--d-entree) var(--douce)}
.reveal.attend{opacity:0;transform:translateY(14px)}
.sans-transition *,.sans-transition *::before,.sans-transition *::after{transition:none!important}
@keyframes parait{from{opacity:0}}
@keyframes fondu-haut{from{opacity:0;transform:translateY(6px)}}
@keyframes respire{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.55}}
@keyframes tour{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.tournable{cursor:pointer}
.tourne{animation:tour var(--d-tour) var(--tour) 1 both;transform-origin:50% 50%;transform-box:fill-box}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* 5 · les pièces communes des autres pages ======================================== */

/* jetons complémentaires : le gris sur voile (5,3 pour 1), la mesure d'une colonne de lecture */
:root{--gris-voile:#526357;--mesure:58ch}

/* [hidden] l'emporte sur toute classe d'affichage (statut, Temps 1 bis) */
[hidden]:not([hidden="until-found" i]){display:none!important}

/* le fond de la page hors du cadre : le papier, sur toute la hauteur */
html,body{min-height:100%}
.page{min-height:100vh;display:flex;flex-direction:column}
.page>main{flex:1 0 auto}

/* les liens dans le texte courant */
:where(.page main) a:where(:not(.btn):not(.nav-btn):not(.marque):not([class*="dp-"]):not([class*="rs-"]):not([class*="j-"]):not([class*="ap-"]):not([class*="ct-"]):not(.rail a)){color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--eclat)}
:where(.sombre) a:where(:not(.btn)){color:inherit}

/* le titre de page, le sous-titre, sur un seuil clair (les pages autres que l'accueil) */
.page .seuil h1{font-size:var(--t-h1);line-height:1.13;letter-spacing:-.012em;color:var(--encre);margin:0 0 .9rem;max-width:20ch}
.page .seuil.sombre h1{color:var(--papier)}
.page .seuil .sous{margin:0;max-width:54ch;font-size:var(--t-sous);line-height:1.5;color:var(--encre)}
.page .seuil.sombre .sous{color:var(--sur-vert-1)}
.page .seuil h1.large{max-width:24ch}
.page .seuil{padding-block:clamp(1.75rem,4.4cqw,3.5rem) clamp(2.4rem,6cqw,3.8rem)}
.page h3{font-size:var(--t-h3);line-height:1.21;letter-spacing:-.01em;color:var(--encre);margin:0}

/* la colonne étroite, la note, le texte large */
.etroit{max-width:var(--mesure)}
.note{font-size:var(--t-petit);color:var(--gris)}
.sombre .note{color:var(--sur-vert-3)}
.grand{font-size:clamp(1.08rem,1.7cqw,1.28rem);line-height:1.5}

/* le bouton filet, à côté du bouton plein ; les actions côte à côte */
.btn-filet{background:transparent;color:var(--action);border:1.5px solid var(--action)}
.btn-filet:hover{background:var(--voile)}
.sombre .btn-filet{color:var(--papier);border-color:var(--filet-vert-fort)}
.sombre .btn-filet:hover{background:rgba(253,252,249,.1)}
.actions{margin-top:1.8rem;display:flex;gap:.9rem 1.2rem;flex-wrap:wrap;align-items:center}
.sous-bouton{font-size:var(--t-ui);color:var(--gris);margin:.7rem 0 0}
.sombre .sous-bouton{color:var(--sur-vert-3)}

/* le voile : un bloc par page, une intention */
.bloc.voile{background:var(--voile)}
.bloc.voile .gris,.bloc.voile .note,.bloc.voile .chapeau-gris{color:var(--gris-voile)}

/* le mot qui s'explique (Accompagnement, Résultats) : souligné en pointillé, sa bulle au survol, au toucher, au clavier ;
   au téléphone, elle se pose en bas de l'écran. La bulle se lit aussi au lecteur d'écran. */
.def{border-bottom:1px dotted currentColor;cursor:help;position:relative}
.def:focus-visible{outline:2px solid var(--porteur);outline-offset:2px;border-radius:2px}
.def .bulle{display:none;position:absolute;left:0;top:1.6em;z-index:60;background:var(--encre);color:var(--papier);font:400 13px/1.45 var(--sans);padding:10px 13px;border-radius:8px;width:max-content;max-width:min(20rem,80vw);text-transform:none;letter-spacing:0;box-shadow:0 8px 24px rgba(21,48,29,.18);white-space:normal;cursor:auto;text-align:left}
.def:hover .bulle,.def:focus .bulle,.def:focus-within .bulle{display:block}
@container page (max-width: 760px){.def{display:inline-block;padding-block:.7rem;margin-block:-.7rem}}
@container page (max-width: 860px){.def .bulle{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;max-width:none;font-size:14px}}

/* le premier échange : le bloc de fin des pages où l'on décide (Résultats v22, resserré le 29/09).
   À gauche le surtitre, le titre, la phrase ; à droite le visage, le bouton, le prochain créneau, la suite. */
.pe-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6cqw,4.5rem);align-items:center}
.pe-grille h2{margin-bottom:.9rem}
.pe-carte{display:grid;justify-items:start;gap:0}
/* le visage du premier échange : la petite photo ronde de Résultats v22, à l'anneau terni, comme sur l'accueil (1/10) */
.pe-carte .pe-visage{display:block;width:5.6rem;height:auto;margin:0 0 1.2rem}
.pe-carte .actions{margin-top:0}
.pe-carte .btn .fl{display:inline-block;transition:transform var(--d-geste) var(--douce)}
.pe-carte .btn:hover .fl{transform:translateX(3px)}
.pe-quand{margin:.9rem 0 0;font-size:var(--t-ui);line-height:1.5;color:var(--sur-vert-1);font-weight:400}
.pe-quand b{font-weight:500;color:var(--papier)}
.pe-suite{margin:.8rem 0 0;font-size:var(--t-ui);line-height:1.5}
.pe-suite a{color:var(--papier);text-decoration:underline;text-decoration-color:rgba(253,252,249,.45);text-underline-offset:4px;transition:text-decoration-color var(--d-geste)}
.pe-suite a:hover{text-decoration-color:var(--papier)}
.pe-merci{margin:-.3rem 0 0;font-size:var(--t-petit);line-height:1.5;color:var(--sur-vert-3);max-width:none}
.pe-suite a{display:inline-block;padding-block:.72rem;margin-block:-.72rem}
@container page (max-width: 860px){.pe-grille{grid-template-columns:1fr;gap:1.8rem}.pe-carte{justify-items:stretch}.pe-carte .actions{width:100%}.pe-carte .btn{display:flex;width:100%;min-width:0}}

/* le pied, tel que Joy l'a rangé le 30/09 : le signe seul à gauche (il fait son tour à l'arrivée, et à chaque clic),
   trois colonnes, puis le filet ; en bas, la mention à gauche, la devise à droite, en Plex, sans emphase */
/* au téléphone, la cible de 44 px garde son trait sous le mot, pas au bas de la cible : la page courante et le survol
   se soulignent par le texte */
@container page (max-width: 760px){ .pied li>a{border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:transparent;transition:text-decoration-color var(--d-geste) var(--douce)} .pied li>a:hover,.pied li>a[aria-current="page"]{text-decoration-color:var(--eclat)} }
/* le signe n'est plus un lien : il perd la hauteur d'une cible et se centre sur la ligne des titres de colonnes */
.pied .marque{cursor:default;min-height:0;margin-top:-.35rem}
.pied ul+.pied-sans{margin-top:.95rem}
.pied-devise{font-family:var(--sans);font-size:inherit;font-weight:400;color:var(--sur-vert-2)}

/* le rail : le dessin validé du Dispositif v18, allumé par la position des blocs, éclaté à toutes les largeurs
   (le composant d'Accompagnement v11). À droite, un point par bloc nommé (main section[data-nom]). Les libellés alignés
   à gauche, le point au bout du libellé, aucun fond ; quand la marge manque, l'écart des points se resserre, jamais
   en colonne. Chaque libellé prend la couleur que demande le fond sous lui. Au repos, seuls les points se touchent. */
.rail{position:fixed;right:1.2rem;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:.6rem;font-size:.74rem;pointer-events:none}
@media (max-width:1024px){.rail{display:none}}
.rail a{display:flex;align-items:center;gap:.55rem;color:var(--gris-voile);text-decoration:none;pointer-events:none;transition:color .2s}
.rail a::before{content:"";width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid var(--voile-fonce);background:var(--fond,var(--papier));flex:none;transition:background .2s,border-color .2s;pointer-events:auto}
.rail a span{opacity:0;transform:translateX(4px);transition:opacity .2s,transform .2s;white-space:nowrap;order:-1;text-shadow:0 0 .3em var(--fond,var(--papier)),0 0 .3em var(--fond,var(--papier))}
.rail.large,.rail.large a,.rail:hover,.rail:focus-within,.rail:hover a,.rail:focus-within a{pointer-events:auto}
.rail:hover a span,.rail:focus-within a span,.rail.large a.actif span{opacity:1;transform:none}
.rail a.actif{color:var(--porteur);font-weight:600}
.rail a.actif::before{background:var(--eclat);border-color:var(--eclat)}
.rail a.sur-teinte::before{border-color:rgba(21,48,29,.24)}
.rail a.sur-sombre{color:rgba(253,252,249,.8)}
.rail a.sur-sombre::before{background:transparent;border-color:rgba(253,252,249,.5)}
.rail a.sur-sombre.actif{color:var(--papier)}
.rail a.sur-sombre.actif::before{background:var(--eclat);border-color:var(--eclat)}
.rail a:focus-visible{outline:2px solid var(--eclat);outline-offset:3px;border-radius:.25rem}
.rail.serre{right:.4rem}
.rail.serre a{justify-content:flex-end}
.rail.serre a::before{margin-right:var(--decal,0px)}
@media (prefers-reduced-motion:reduce){.rail a,.rail a span,.rail a::before{transition:none}}

/* les formulaires de la maison (Netlify) : la préparation après réservation, et les champs communs */
.formulaire{background:var(--blanc);border:1px solid var(--voile);border-radius:var(--rayon);padding:clamp(1.3rem,3cqw,2rem);max-width:46rem;margin-top:1.6rem}
.formulaire label{display:block;font-weight:600;margin:1.1rem 0 .4rem}
.formulaire label:first-of-type{margin-top:0}
.formulaire textarea,.formulaire input{width:100%;min-height:2.75rem;font:inherit;font-size:1rem;padding:.75rem .9rem;border:1.5px solid var(--voile-fonce);border-radius:var(--rayon-petit);background:var(--blanc);color:var(--encre)}
.formulaire textarea{min-height:4.5rem;resize:vertical}
.formulaire .merci{display:none;background:var(--voile);border-radius:var(--rayon-moyen);padding:1rem 1.1rem;font-family:var(--serif);color:var(--porteur);font-size:1.1rem}
.formulaire.ok .merci{display:block}
.formulaire.ok form{display:none}
.formulaire .etat{margin:.6rem 0 0;font-size:var(--t-ui);color:var(--gris)}

/* les pages de la maison : mentions, confidentialité */
.legal h2{font-size:var(--t-h3);margin:2.4rem 0 .6rem;max-width:none}
.legal p{max-width:66ch;margin:0 0 1em}
/* au téléphone, un lien dans le texte tient une cible de 44 px, sans bouger la ligne */
@container page (max-width: 760px){ .legal p a{padding-block:.72rem} }

/* la 404 : les deux chemins, sous le jeu (v019) */
.fin{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}

/* les petits grands détails (registre du 16/08) et le lien qui appelle (Joy, 30/09)
   L1 · le texte sélectionné se surligne en voile, à l'encre de la maison
   L3 · le trait d'écriture clignote en éclat dans tout champ ; et la case où l'on écrit prend l'anneau d'éclat de la
        planche L3 : un filet porteur au bord, un souffle de blanc, l'anneau autour (Joy, 1/10 au soir)
   le lien souligné, au survol, au clavier ou sous le doigt : sa barre passe à l'éclat et s'épaissit, pour inviter au clic
   R3 · le fil de lecture : deux pixels d'éclat tout en haut, la première ligne du site, qui avancent avec la lecture
        (pages longues, Joy, 30/09 au soir) */
::selection{background:var(--voile);color:var(--encre)}
input,textarea,select,[contenteditable]{caret-color:var(--eclat)}
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),textarea,select):focus-visible{outline:3px solid var(--eclat);outline-offset:3px;border-color:var(--porteur)}
.page :is(a,button):not(.btn):not(.nav-btn):not(.marque):is(:hover,:focus-visible,:active){text-decoration-color:var(--eclat)!important;text-decoration-thickness:2px!important}
.fil-lecture{position:absolute;left:0;right:0;top:0;height:2px;background:var(--eclat);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* R7 · le point qui fleurit (registre du 16/08, acté ; Joy, 30/09 au soir) : au survol d'un surtitre, son point d'éclat
   se déploie en micro-trèfle une seconde, puis redevient point. Jamais seul : il faut s'y attarder. */
:root{--m-trefle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.1 -2.1 4.2 4.2'%3E%3Cpath d='M0 0A1.41421 1.41421 0 0 1 2 0A1.41421 1.41421 0 0 1 0 0M0 0A1.41421 1.41421 0 0 1 0 2A1.41421 1.41421 0 0 1 0 0M0 0A1.41421 1.41421 0 0 1 -2 0A1.41421 1.41421 0 0 1 0 0M0 0A1.41421 1.41421 0 0 1 0 -2A1.41421 1.41421 0 0 1 0 0Z'/%3E%3C/svg%3E")}
.surtitre{position:relative}
.surtitre::after{content:"";position:absolute;left:-.3rem;top:50%;width:1.02rem;height:1.02rem;margin-top:-.51rem;background:var(--eclat);-webkit-mask:var(--m-trefle) center/contain no-repeat;mask:var(--m-trefle) center/contain no-repeat;opacity:0;transform:scale(.3) rotate(-45deg);pointer-events:none}
@media (hover:hover){
  .surtitre:hover::after{animation:fleurit 1.1s var(--douce) both}
  .surtitre:hover::before{animation:efface 1.1s var(--douce) both}
}
@keyframes fleurit{0%{opacity:0;transform:scale(.3) rotate(-45deg)}28%,72%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(.3) rotate(-45deg)}}
@keyframes efface{0%,100%{transform:scale(1)}22%,78%{transform:scale(0)}}

/* le trèfle qui se laisse tourner garde son centre, pour le tour joué au clic */
.tournable{transform-origin:50% 50%;transform-box:fill-box}

/* N4 · le sceau d'impression (registre du 16/08, acté) : sur papier, le pied cède la place au signe et à l'adresse */
.sceau{display:none}

/* la 404 qui devine (L9) : la page la plus proche de l'adresse manquée */
.devine{margin:1.1rem 0 0;font-size:var(--t-sous);line-height:1.5;color:var(--encre)}

/* l'impression, ou l'enregistrement en PDF : la page entière, dans son état final (Le dispositif v18) */
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  html,body{-webkit-print-color-adjust:exact;print-color-adjust:exact;background:#fff}
  .page{display:block}
  .reveal,.reveal.attend{opacity:1!important;transform:none!important}
  .entete{position:static}
  .rail,.burger,.nav,.evitement,.fil-lecture{display:none!important}
  h2,h3,figure,.carte,.formulaire,.pe-carte{break-inside:avoid}
  .surtitre,h2,h3{break-after:avoid}
  a[href^="http"]::after{content:""}
  .pied{display:none!important}
  .sceau{display:flex;align-items:center;justify-content:center;gap:.55rem;margin:2.6rem 0 0;padding-top:1rem;border-top:1px solid var(--voile-fonce);font:500 9pt/1.4 var(--sans);letter-spacing:.02em;color:var(--gris);break-inside:avoid}
  .sceau svg{width:15px;height:15px;flex:none}
  .sceau .m-trefle{fill:var(--porteur)}
}