/* ═══ ACCUEIL — feuille complémentaire ═══
   Chargée APRÈS site.css. Ne remplace rien : elle complète.
   Tout ce qui touche au hero et au mot d'événement est limité à la page d'accueil. */

:root {
  /* Les deux tons moyens, fabriqués à partir de SES jetons. L* 34 et 36. */
  --vf-vert-moyen:   color-mix(in srgb, var(--vf-vert) 70%, var(--vf-vert-clair));
  --vf-brique-moyen: color-mix(in srgb, var(--vf-brique-clair) 45%, var(--vf-nuit));
  --serre: clamp(10px, 1.2vw, 16px);
  --large: clamp(56px, 8vw, 132px);
  --deborde: calc(-1 * var(--gap) - 3vw);
}

/* ── Le rail tient ses sept entrées ── */
.rail .som a { padding: 9px 4px 9px 0; }
.rail .som .rule { margin-top: 9px; }
.rail .som .t { margin-top: 4px; font-size: 1.125rem; }
.rail .som .d { margin-top: 2px; }
.rail .som .n { font-size: .75rem; }
.rail .wordmark { padding-bottom: 10px; }
/* Le rail garde son fond : le champ passe derrière, pas dedans. */
.rail { background: var(--vf-nuit); }

/* ═══════════ HERO ═══════════
   Le titre traverse toute la largeur et déborde à droite.
   Sous lui, deux colonnes : la parole à gauche, le réseau à droite.
   La grille se centre dans la hauteur : plus de contenu tassé en haut. */
body[data-page="accueil"] .hero {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr;
  column-gap: clamp(16px, 2.4vw, 40px); align-items: start; align-content: center;
  min-height: calc(100vh - 2 * var(--gap));
  padding: clamp(24px, 4vh, 56px) 0 clamp(26px, 4vh, 56px);
}
body[data-page="accueil"] .hero__titre { grid-column: 1 / -1; margin-right: var(--deborde); }
body[data-page="accueil"] .hero__dire { grid-column: 1; align-self: center; padding-top: clamp(22px, 3.6vh, 48px); }
body[data-page="accueil"] .fond { grid-column: 2; align-self: center; position: relative;
        margin-right: calc(-1 * var(--gap) - 5vw); pointer-events: none; }
body[data-page="accueil"] .fond svg { width: 100%; height: auto; overflow: visible; display: block; }

@media (max-width: 1100px) {
  body[data-page="accueil"] .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0;
          row-gap: clamp(18px, 3vw, 32px); }
  body[data-page="accueil"] .hero__titre, body[data-page="accueil"] .hero__dire { grid-column: 1; margin-right: 0; }
  body[data-page="accueil"] .fond { grid-column: 1; order: 3; margin-right: calc(-1 * var(--gap)); max-width: 560px; }
}

body[data-page="accueil"] .hero__kicker { display: block; font: 700 clamp(1.375rem, 1rem + 1.2vw, 2rem)/1.1 var(--font-hand);
                color: var(--vf-sable); transform: rotate(-2deg); transform-origin: 0 100%; margin-bottom: 2px; }
body[data-page="accueil"] .event-word { display: block; font-family: var(--font-display); font-weight: 400; line-height: .98;
              padding-top: .18em; text-transform: uppercase; letter-spacing: .01em; margin-left: -.03em; white-space: nowrap; }
body[data-page="accueil"] .fit .event-word { font-size: clamp(48px, calc(100cqi / (var(--chars, 8) * .78)), 13rem); }
body[data-page="accueil"] .event-word .char { display: inline-block; color: var(--l, var(--vf-lin)); }
html.motion body[data-page="accueil"] .event-word .char { transition: transform 1s var(--ease-out), opacity .6s, color .4s; }
body[data-page="accueil"] .event-word .char:hover { transform: translateY(-7%) rotate(-2.5deg) !important; }
body[data-page="accueil"] .event-word .brain { display: inline-block; width: 1.1em; height: .917em; vertical-align: -.094em;
                     margin: 0 -.03em; transform-origin: 50% 91%; --brain: var(--vf-rose); --fold: var(--vf-nuit); }
body[data-page="accueil"] .titre-trait { display: block; height: 4px; width: min(100%, 22ch); margin: clamp(10px, 1.4vw, 18px) 0 0;
               border-radius: 4px; background: var(--vf-rose);
               transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out) .5s; }
html.motion body[data-page="accueil"] .event-word.is-in + .titre-trait { transform: scaleX(1); }
html:not(.motion) body[data-page="accueil"] .titre-trait { transform: scaleX(1); }

body[data-page="accueil"] .hero__manifest { margin: 0; max-width: 22ch;
  font: 600 clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem)/1.32 var(--font-title);
  font-variation-settings: "WONK" 1, "SOFT" 60; }
body[data-page="accueil"] .hero__ligne { margin: clamp(16px, 2vh, 24px) 0 clamp(22px, 3vh, 34px); max-width: 46ch;
  font: 400 1.125rem/1.5 var(--font-text); color: color-mix(in srgb, var(--vf-lin) 82%, transparent); }

/* Le réseau : traits discrets, points colorés */
.reseau__lien { stroke: color-mix(in srgb, var(--vf-lin) 22%, transparent); stroke-width: .26; fill: none; stroke-linecap: round; }
.motion .reseau__lien { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.4s var(--ease-out); transition-delay: var(--d); }
html.motion body[data-page="accueil"] .fond.is-in .reseau__lien { stroke-dashoffset: 0; }
.reseau__pt { fill: var(--p); transform-box: fill-box; transform-origin: 50% 50%; }
.motion .reseau__pt { opacity: 0; transform: scale(.2); transition: opacity .6s var(--ease-out), transform .8s var(--ease-spring); transition-delay: var(--d); }
html.motion body[data-page="accueil"] .fond.is-in .reseau__pt { opacity: 1; transform: none; }
body[data-page="accueil"] .fond.is-in .reseau__pt { transition: opacity .6s var(--ease-out), transform .35s var(--ease-out), filter .35s; }
.motion .reseau__pt.bat { animation: bat 2.6s var(--ease-out) infinite; animation-delay: var(--b); }
@keyframes bat { 0%,100% { r: var(--r); } 50% { r: calc(var(--r) * 1.9); } }
.reseau__flux { fill: var(--vf-rose); opacity: 0; }

/* ═══════════ EN PRATIQUE ═══════════
   Cinq données, une ligne, aucune boîte : deux filets et de l'air. */
.pratique { margin-top: var(--large); padding: clamp(18px, 2.2vw, 26px) 0;
            border-top: 1px solid var(--vf-rule); border-bottom: 1px solid var(--vf-rule); }
.pratique__lignes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
                    gap: clamp(14px, 2vw, 32px); margin: 14px 0 0; }
@media (max-width: 1000px) { .pratique__lignes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .pratique__lignes { grid-template-columns: minmax(0, 1fr); } }
.pratique__lignes dt { font: 700 .8125rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
                       color: color-mix(in srgb, var(--vf-lin) 72%, transparent); margin-bottom: 8px; }
.pratique__lignes dd { margin: 0; font: 450 clamp(1.125rem, 1rem + .5vw, 1.5rem)/1.22 var(--font-title);
                       font-variation-settings: "WONK" 1, "SOFT" 60; color: var(--vf-sable); }
.avalider { display: inline-block; margin-left: 7px; padding: 3px 8px 4px; border-radius: 999px;
            border: 1px dashed currentColor; opacity: .62;
            font: 700 .6875rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
            vertical-align: .18em; white-space: nowrap; }

/* ═══════════ L'ÉTIQUETTE MANUSCRITE ═══════════ */
.etiq { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
        font: 700 1.1875rem/1 var(--font-hand); color: var(--vf-lin); }
.etiq::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--vf-rose); }
.etiq--sombre { color: var(--vf-nuit); }

/* ═══════════ L'APPEL AU TEST ═══════════
   Le vrai test, avec sa logique de réponses, vit sur la page Bilan.
   Ici : une invitation, en très grand, et le cerveau reprend le O. */
.invite { position: relative; display: block; margin-top: var(--serre); overflow: hidden;
          border-radius: var(--radius-panel); text-decoration: none;
          padding: clamp(22px, 2.8vw, 40px) clamp(24px, 3.2vw, 46px) clamp(20px, 2.6vw, 34px);
          background: linear-gradient(118deg, var(--vf-rose-clair) 0%, var(--vf-sable) 100%);
          color: var(--vf-nuit); transition: transform .6s var(--ease-spring); }
.invite::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
                 background: linear-gradient(298deg, var(--vf-rose-clair) 0%, var(--vf-sable) 100%);
                 transition: opacity 1s var(--ease-out); }
.invite > *:not(.sr-only) { position: relative; z-index: 1; }
.invite:hover { transform: translateY(-5px); }
.invite:hover::after { opacity: 1; }

.invite__mot { display: block; font: 400 clamp(2.25rem, 8.4vw, 7.5rem)/.94 var(--font-display);
               text-transform: uppercase; letter-spacing: .01em; padding-top: .16em; white-space: nowrap;
               margin: 4px 0 clamp(14px, 2vw, 24px); }
.invite__mot .char { display: inline-block; transition: transform .55s var(--ease-spring); transition-delay: calc(var(--i) * 26ms); }
.invite:hover .invite__mot .char { transform: translateY(-9%) rotate(-2.5deg); }
.invite__mot .brain { display: inline-block; width: 1.1em; height: .917em; vertical-align: -.094em;
                      margin: 0 -.03em; transform-origin: 50% 91%; --brain: var(--vf-rose); --fold: var(--vf-nuit); }

.invite__bas { display: flex; align-items: baseline; justify-content: space-between; gap: clamp(16px, 3vw, 48px);
               flex-wrap: wrap; padding-top: clamp(14px, 1.8vw, 20px);
               border-top: 1px solid color-mix(in srgb, var(--vf-nuit) 22%, transparent); }
.invite__p { max-width: 44ch; font: 400 clamp(1.0625rem, .95rem + .45vw, 1.3125rem)/1.45 var(--font-text); }
.invite .souligne { margin-top: 0; }

/* ═══════════ LA PERSONNE + OÙ ═══════════ */
.duo { margin-top: var(--serre); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
       gap: var(--serre); align-items: start; }
@media (max-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr); } }
.carte { position: relative; border-radius: var(--radius-panel); padding: clamp(24px, 3vw, 40px);
         display: flex; flex-direction: column; overflow: hidden;
         transition: transform .6s var(--ease-spring); }
.carte::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
                transition: opacity .9s var(--ease-out); }
.carte--personne::after { background: linear-gradient(304deg, var(--vf-canard-clair) 0%, var(--vf-rose-clair) 100%); }
.carte--ou::after { background: linear-gradient(304deg, var(--vf-vert-moyen) 0%, var(--vf-brique-moyen) 100%); }
.carte:hover { transform: translateY(-5px); }
.carte:hover::after { opacity: 1; }
.carte > * { position: relative; z-index: 1; }
.carte--personne { background: linear-gradient(124deg, var(--vf-canard-clair) 0%, var(--vf-rose-clair) 100%);
                   color: var(--vf-nuit); }
.carte--ou { background: var(--vf-vert-moyen); color: var(--vf-lin); }
.carte__titre { margin: 0 0 12px; max-width: 20ch; font: 650 clamp(1.375rem, 1rem + 1.4vw, 2.125rem)/1.12 var(--font-title);
                font-variation-settings: "WONK" 1, "SOFT" 60; letter-spacing: -.01em; }
.carte__texte { margin: 0 0 16px; max-width: 46ch; font: 400 1.125rem/1.5 var(--font-text); }
.carte__lieu { margin: 0 0 18px; max-width: 20ch; font: 450 clamp(1.25rem, 1.05rem + .7vw, 1.625rem)/1.28 var(--font-title);
               font-variation-settings: "WONK" 1, "SOFT" 60; }
.carte__ville { margin: 4px 0 0; font: 700 1.375rem/1.2 var(--font-hand); color: var(--vf-lin); }
/* Les écriteaux de la station 01 de Qui suis-je, repris tels quels : l'œil reconnaît. */
.ecriteaux { display: flex; flex-wrap: wrap; gap: .3em .9em; margin: 0 0 14px; font: 400 clamp(1.5rem, 1rem + 1.6vw, 2.25rem)/1 var(--font-display); color: var(--vf-nuit); letter-spacing: -.012em; }
.credits { list-style: none; margin: 0 0 auto; }
.credits li { font: 500 1.0625rem/1.4 var(--font-text); padding: 9px 0;
              border-top: 1px solid color-mix(in srgb, var(--vf-nuit) 22%, transparent); }
.communes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.communes li { padding: 8px 15px; border-radius: 999px; font: 600 1rem/1 var(--font-ui);
               border: 1px solid color-mix(in srgb, var(--vf-lin) 34%, transparent);
               transition: background-color .35s, color .35s; }
.communes li:hover { background: var(--vf-lin); color: var(--vf-nuit); }

/* ═══════════ LA PREUVE ═══════════ */
.preuve { margin: var(--large) 0 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
          padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid var(--vf-rule); max-width: none; }
.preuve__e { flex: none; font: 700 .8125rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
             color: color-mix(in srgb, var(--vf-lin) 72%, transparent); }
.preuve__t { flex: 1 1 380px; font: 450 clamp(1.0625rem, .95rem + .5vw, 1.375rem)/1.4 var(--font-title);
             font-variation-settings: "WONK" 1, "SOFT" 60; }

/* ═══════════ LE MOT SOULIGNÉ À LA MAIN ═══════════ */
.souligne { position: relative; display: inline-block; text-decoration: none; padding-bottom: .38em;
            font: 700 clamp(1.375rem, 1.05rem + .8vw, 1.75rem)/1.2 var(--font-hand); color: inherit;
            background: none; border: 0; cursor: pointer; align-self: flex-start;
            transition: transform .5s var(--ease-spring); }
.souligne svg { position: absolute; left: -.12em; right: -.12em; bottom: -.12em; width: calc(100% + .24em);
                height: .62em; fill: none; stroke: var(--vf-rose); stroke-width: 5; stroke-linecap: round; overflow: visible; }
.souligne svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .souligne.is-in svg path, .motion .is-in .souligne svg path { transition: stroke-dashoffset 1s var(--ease-out) .3s; stroke-dashoffset: 0; }
html:not(.motion) .souligne svg path { stroke-dashoffset: 0; }
.souligne:hover { transform: translateX(6px) rotate(-1deg); }
.souligne--sombre { color: var(--vf-nuit); margin-top: clamp(14px, 1.8vw, 20px); }
.resultat .souligne { color: var(--vf-lin); margin-top: 0; }

/* ═══════════ PIED DE PAGE ═══════════ */
.foot { margin-top: var(--serre); align-items: start; gap: clamp(20px, 3vw, 44px);
        padding: clamp(24px, 3.4vw, 46px); }
.foot__col { justify-content: flex-start; gap: 16px; }
.foot__legal { padding-top: 18px; }
.foot__motto { font-size: clamp(2.1rem, 1.1rem + 3.4vw, 4.2rem); margin: 0; }
.foot__links { font-size: 1.25rem; gap: 10px 26px; }
.appel { display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px clamp(22px, 2.4vw, 32px);
         border-radius: 999px; text-decoration: none; border: 2px solid var(--vf-rose);
         background: var(--vf-rose); color: var(--vf-violet-deep);
         font: 700 clamp(1.5rem, 1rem + 1.6vw, 2.375rem)/1 var(--font-ui);
         transition: background-color .4s var(--ease-out), color .4s var(--ease-out), transform .5s var(--ease-spring); }
.appel .icon { width: .78em; height: .78em; transition: transform .6s var(--ease-spring); }
.appel:hover { background: transparent; color: var(--vf-rose); transform: translateY(-3px); }
.appel:hover .icon { transform: rotate(-18deg) scale(1.15); }
.courriel { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--vf-lin); }
.courriel .icon { width: 24px; height: 24px; flex: none; }

/* ═══════════ RUBAN, D'UN BORD À L'AUTRE ═══════════ */
.ruban { position: relative; overflow: hidden; margin: var(--serre) calc(-1 * var(--gap)) calc(-1 * var(--gap));
         padding: clamp(14px, 1.8vw, 22px) 0;
         border-top: 1px solid var(--vf-rule);
         -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
                 mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ruban__track { display: flex; align-items: center; width: max-content; will-change: transform; animation: glisse 108s linear infinite; }
.ruban:hover .ruban__track { animation-play-state: paused; }
@keyframes glisse { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.ruban__mot { display: inline-flex; align-items: center; margin: 0 7px; padding: .3em .72em .38em;
              border-radius: 999px; background: var(--m); color: var(--vf-violet-deep);
              font: 400 clamp(1.25rem, .9rem + 1.1vw, 1.875rem)/1.08 var(--font-display);
              text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
              transition: transform .5s var(--ease-spring); }
.ruban__mot:hover { transform: translateY(-4px) rotate(-1.5deg); }
.ruban__lien { display: inline-flex; align-items: center; flex: none; }
.ruban__lien .brain { width: clamp(24px, 2vw, 34px); height: auto; aspect-ratio: 120 / 100; --fold: var(--vf-nuit); }
@keyframes hop-calme {
  0%   { transform: translateY(0) scale(1, 1) }
  4%   { transform: translateY(-13%) scale(.975, 1.05) }
  8%   { transform: translateY(-16%) scale(1, 1) }
  13%  { transform: translateY(0) scale(1.07, .9) }
  17%  { transform: translateY(0) scale(.99, 1.02) }
  22%, 100% { transform: translateY(0) scale(1, 1) }
}
.motion .ruban__lien .brain { animation: hop-calme 4.6s cubic-bezier(.2,.9,.25,1) infinite; animation-delay: var(--h, 0ms); }

/* ═══════════ RÉVÉLATIONS ═══════════ */
.motion [data-reveal="bloc"] { opacity: 0; transform: translateY(34px) scale(.985);
  transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.motion [data-reveal="bloc"].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .ruban__track { animation: none; } }

/* L'appel du hero reste sous le téléphone du pied de page */
body[data-page="accueil"] .hero .appel { min-height: 58px; font-size: clamp(1.1875rem, 1rem + .7vw, 1.625rem); }

/* Aperçu en cadre : la hauteur du hero ne suit plus celle du cadre */
.apercu .hero { min-height: 860px; }

/* ═══════════════════════════════════════════════════════════════
   CHAMP DE COULEUR — version rapide.
   Avant : sept calques de 60 % d'écran, chacun avec un flou de 38 px et un
   mode de fusion, animés en continu. 4,6 images/s.
   Maintenant : une seule toile de 192 x 120 pixels, redessinée 15 fois par
   seconde, agrandie par la carte graphique — qui fait le flou gratuitement.
   Aucun flou CSS, aucun mode de fusion, une seule couche à composer.
   ═══════════════════════════════════════════════════════════════ */
.champ { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.champ canvas { display: block; width: 100%; height: 100%; }
.shell { position: relative; z-index: 2; }
.topbar, .menu, .progress { z-index: 60; }

/* ═══ Le grand mot est rempli par un dégradé de VOS couleurs qui glisse ═══
   Le dégradé appartient au mot entier, pas à chaque lettre : on voit donc
   plusieurs couleurs à la fois, et elles se fondent l'une dans l'autre. */
body[data-page="accueil"] .event-word {
  background-image: linear-gradient(96deg, var(--vf-sable) 0%, var(--vf-rose-clair) 24%,
                    var(--vf-canard-clair) 48%, var(--vf-rose-clair) 74%, var(--vf-sable) 100%);
  background-size: 190% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: coule 26s linear infinite;
}
body[data-page="accueil"] .event-word .char { color: transparent; background: none; }
@keyframes coule { from { background-position: 0% 0; } to { background-position: 190% 0; } }
body[data-page="accueil"] .event-word:hover { animation-play-state: paused; }
body[data-page="accueil"] .titre-trait { background: linear-gradient(96deg, var(--vf-rose) 0%, var(--vf-rose-clair) 40%,
               var(--vf-sable) 70%, var(--vf-rose) 100%); background-size: 190% 100%;
               animation: coule 26s linear infinite; }

/* ═══ Les blocs ne sont plus des aplats : chacun tient un passage d'une couleur à une autre ═══ */
.trio__a .bloc__haut { background: linear-gradient(132deg, color-mix(in srgb, var(--vf-brique-moyen) 92%, var(--vf-nuit)), var(--vf-vert-moyen) 82%); }
.trio__a .bloc__bas  { background: linear-gradient(132deg, var(--vf-canard-clair), var(--vf-sable) 88%); }
.trio__b { background: linear-gradient(148deg, var(--vf-vert-moyen), color-mix(in srgb, var(--vf-brique-moyen) 92%, var(--vf-nuit)) 86%); }
.trio__c .bloc__haut { background: linear-gradient(132deg, var(--vf-nuit), var(--vf-vert-moyen) 88%); }
.trio__c .bloc__bas  { background: linear-gradient(132deg, var(--vf-sable), var(--vf-rose-clair) 88%); }
.bloc__haut, .bloc__bas { position: relative; }
.bloc__haut > *, .bloc__bas > * { position: relative; z-index: 1; }
/* Au survol, le passage bascule dans l'autre sens : la couleur bouge sous la main. */
.bloc__haut::after, .bloc__bas::after { content: ""; position: absolute; inset: 0; opacity: 0;
  transition: opacity .9s var(--ease-out); }
.trio__a .bloc__haut::after { background: linear-gradient(312deg, color-mix(in srgb, var(--vf-brique-moyen) 92%, var(--vf-nuit)), var(--vf-vert-moyen) 82%); }
.trio__a .bloc__bas::after  { background: linear-gradient(312deg, var(--vf-canard-clair), var(--vf-sable) 88%); }
.trio__c .bloc__haut::after { background: linear-gradient(312deg, var(--vf-nuit), var(--vf-vert-moyen) 88%); }
.trio__c .bloc__bas::after  { background: linear-gradient(312deg, var(--vf-sable), var(--vf-rose-clair) 88%); }
.bloc:hover .bloc__haut::after, .bloc:hover .bloc__bas::after { opacity: 1; }
.bloc { isolation: isolate; }
.bloc__haut::before, .bloc__bas::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23m)' opacity='.2'/%3E%3C/svg%3E"); }

/* Le pied de page laisse passer le champ */
.foot { background: color-mix(in srgb, var(--vf-violet-deep) 86%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .champ span, .event-word .char, .titre-trait { animation: none !important; }
}

/* ═══ Réglage de la taille du texte, dans le rail ═══ */
/* Le sommaire garde sa hauteur naturelle, le réglage se pose dessous. */
.rail nav { flex: 0 0 auto; }
.taille { display: flex; align-items: center; gap: 6px; margin: 16px 14px 4px 0; padding-top: 14px;
          border-top: 1px solid var(--vf-hair); position: relative; flex: none; }
.taille__l { font: 700 .8125rem/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
             color: color-mix(in srgb, var(--vf-lin) 76%, transparent); margin-right: auto; }
.taille button { display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer;
                 border: 1px solid var(--vf-rule); border-radius: 999px; background: transparent;
                 color: var(--vf-lin); font: 700 1rem/1 var(--font-ui);
                 transition: background-color .3s, color .3s, border-color .3s; }
/* Quatre tailles : chaque bouton montre la sienne.
   44 px, pas 30 : c'est exactement la main qui tremble qui vient ici, et
   30 px est en dessous du plancher où un doigt touche à coup sûr. */
.taille { flex-wrap: wrap; }
.taille__l { width: 100%; margin: 0 0 8px; }
.taille button { width: 44px; height: 44px; }
.taille button:nth-of-type(1) { font-size: .8125rem; }
.taille button:nth-of-type(2) { font-size: .9375rem; }
.taille button:nth-of-type(3) { font-size: 1.125rem; }
.taille button:nth-of-type(4) { font-size: 1.375rem; }
.taille button:hover, .taille button[aria-pressed="true"] { background: var(--vf-lin); color: var(--vf-nuit); border-color: var(--vf-lin); }
/* La bulle qui le signale, écrite à la main */
.bulle { position: relative; flex: none; margin: 0 14px 0 0; padding: 0 16px; max-height: 0; overflow: hidden;
         border-radius: 14px 14px 14px 4px; background: var(--vf-rose); color: var(--vf-violet-deep);
         font: 700 1.0625rem/1.3 var(--font-hand); opacity: 0;
         transition: max-height .55s var(--ease-out), opacity .45s var(--ease-out), padding .55s var(--ease-out), margin .55s var(--ease-out); }
.bulle.vue { max-height: 160px; opacity: 1; padding: 13px 16px 15px; margin-bottom: 8px; }
.bulle > span { display: block; padding-right: 18px; }
.bulle button { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; padding: 0;
                border: 0; border-radius: 999px; background: transparent; color: var(--vf-violet-deep);
                cursor: pointer; font: 700 1rem/1 var(--font-ui); }
.bulle button:hover { background: color-mix(in srgb, var(--vf-violet-deep) 16%, transparent); }
/* Le réglage n'est plus caché au téléphone : il l'était alors que c'est là
   qu'on en a le plus besoin. Il vit maintenant dans le menu, où le rail
   n'existe plus. */
.menu .taille { margin: 24px 0 0; padding-top: 20px; }
.menu .taille__l { color: color-mix(in srgb, var(--vf-lin) 82%, transparent); }

/* Le cadre mis en pause pendant la mesure de l'autre */
.gele .champ, .gele .reseau__flux { visibility: hidden; }