/* ===========================================================================
   ANCORALI — le site de présentation.

   Troisième passe, 22 septembre. Eliott : « je ne veux pas qu'on puisse
   changer la couleur du site », « un peu plus d'animation sur les couleurs,
   un peu plus de couleurs », « dispositionne le texte d'autres manières »,
   « mets des effets en arrière-plan ».

   CE QUE ÇA CHANGE.
   · UN SEUL MONDE. Plus de bascule, plus de thème système : la page est
     peinte en clair, explicitement, du fond au moindre texte. Un site qui
     ne propose pas le choix doit quand même TOUT peindre — sinon il emprunte
     le fond de son hôte et se retrouve illisible ailleurs.
   · LE CHAMP. Quatre halos de couleur dérivent derrière la page, chacun sur
     sa propre durée — 43, 53, 61 et 71 secondes, des nombres premiers, pour
     qu'aucune paire ne retombe jamais en phase. C'est ce qui fait qu'on ne
     voit pas la boucle. Ce sont des dégradés radiaux, PAS des flous : un
     filtre de flou sur quatre calques plein écran fait ramer un téléphone.
   · UNE TEINTE PAR PAGE. Le champ, la pastille et les bandes prennent la
     couleur de la page qu'on lit (data-teinte sur le corps).
   · DES DISPOSITIONS QUI CHANGENT. Titre à gauche, titre à droite, colonne
     décalée, rangs alternés, bande pleine largeur : une page qui compose
     toujours pareil se lit comme un formulaire.
   =========================================================================== */

/* ---------- les polices, servies par nous (SIL OFL) ---------- */
@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:swap;
 src:url(polices/geist-latin.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:swap;
 src:url(polices/geist-latin-ext.woff2) format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;
 src:url(polices/geistmono-latin.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;
 src:url(polices/geistmono-latin-ext.woff2) format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- les jetons — un seul jeu, le site ne bascule plus ---------- */
:root{
  color-scheme:light;
  --fond:#FDF8F0; --fond2:#F6EEE1; --carte:#FFFFFF; --carteT:rgba(255,255,255,.72);
  --encre:#2C1D10; --encre2:#67543F; --encre3:#8F7B66;
  --trait:#EBE0CF; --traitF:#D8C7AD;
  --acc:#C44D14; --accVif:#E1661F; --accF:#FBEDE2;
  --miel:#C98A10; --mielVif:#E5A62A; --mielF:#FBF0D6;
  --vert:#4C6A2C; --vertVif:#6E9143; --vertF:#EDF2E2;
  --chene:#9A6428; --cheneVif:#B87F3C; --cheneF:#F8EEDD;
  --creme:#FFFDF8; --btnT:#FFFDF8;
  --r:16px; --rp:10px;
  --logo:url(marque/ancorali-clair.webp);
  /* La teinte de la page. Chaque page la réécrit ; l'accueil garde l'orange. */
  --t:var(--acc); --tVif:var(--accVif); --tF:var(--accF); --tT:#B4460F;
}
body[data-teinte="miel"] {--t:var(--miel); --tVif:var(--mielVif); --tF:var(--mielF); --tT:#8F6206}
body[data-teinte="vert"] {--t:var(--vert); --tVif:var(--vertVif); --tF:var(--vertF); --tT:#3E5722}
body[data-teinte="chene"]{--t:var(--chene);--tVif:var(--cheneVif);--tF:var(--cheneF); --tT:#7D4F1B}

/* ---------- la base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:'Geist',-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01','cv01'}
h1,h2,h3,h4{font-family:inherit;margin:0;text-wrap:balance;letter-spacing:-.025em}
h1{font-size:clamp(33px,4.8vw,57px);font-weight:600;line-height:1.05;letter-spacing:-.036em}
h2{font-size:clamp(25px,3.2vw,38px);font-weight:600;line-height:1.1;letter-spacing:-.031em}
h3{font-size:clamp(18.5px,1.9vw,21px);font-weight:600;line-height:1.28;letter-spacing:-.018em}
h4{font-size:17px;font-weight:600;letter-spacing:-.014em}
p{margin:0}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--accVif)}
:focus-visible{outline:2px solid var(--t);outline-offset:3px;border-radius:4px}
img,svg{max-width:100%}
.w{width:min(1120px,100% - clamp(36px,7vw,56px));margin-inline:auto}
.lead{font-size:clamp(17px,1.7vw,19.5px);color:var(--encre2);max-width:54ch;line-height:1.56}
.prose{max-width:66ch;color:var(--encre2)}
.prose p + p{margin-top:15px}
section{padding-block:clamp(46px,5.8vw,74px);position:relative}
section.serre{padding-top:clamp(16px,2.4vw,28px)}
section + section{padding-top:clamp(28px,3.6vw,48px)}
section.serre + section, section + section.serre{padding-top:clamp(16px,2.4vw,28px)}

/* ═══ LE CHAMP — les couleurs qui dérivent derrière la page ════════════════
   Quatre halos, quatre durées PREMIÈRES : 43, 53, 61, 71 secondes. Deux
   durées qui partagent un diviseur finissent par se retrouver au même
   endroit, et l'œil voit la boucle. Avec des nombres premiers, le motif ne
   se répète qu'au bout de 43×53×61×71 secondes — près de trois mois.
   Des dégradés radiaux, jamais un filtre de flou : quatre calques flous en
   plein écran, c'est un téléphone qui chauffe pour un fond qu'on regarde à
   peine. */
.champ{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:var(--fond)}
.champ i{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--c) 0%,transparent 62%)}
.champ i:nth-child(1){--c:color-mix(in srgb,var(--t) 46%,transparent);
  width:78vmax;height:78vmax;left:-26vmax;top:-34vmax;animation:derive1 43s ease-in-out infinite alternate}
.champ i:nth-child(2){--c:color-mix(in srgb,var(--miel) 40%,transparent);
  width:66vmax;height:66vmax;right:-24vmax;top:-18vmax;animation:derive2 53s ease-in-out infinite alternate}
.champ i:nth-child(3){--c:color-mix(in srgb,var(--vert) 26%,transparent);
  width:72vmax;height:72vmax;left:8vmax;bottom:-40vmax;animation:derive3 61s ease-in-out infinite alternate}
.champ i:nth-child(4){--c:color-mix(in srgb,var(--chene) 32%,transparent);
  width:58vmax;height:58vmax;right:-18vmax;bottom:-26vmax;animation:derive4 71s ease-in-out infinite alternate}
@keyframes derive1{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(14vmax,10vmax,0) scale(1.18)}}
@keyframes derive2{from{transform:translate3d(0,0,0) scale(1.1)}
  to{transform:translate3d(-16vmax,13vmax,0) scale(.9)}}
@keyframes derive3{from{transform:translate3d(0,0,0) scale(.95)}
  to{transform:translate3d(12vmax,-14vmax,0) scale(1.2)}}
@keyframes derive4{from{transform:translate3d(0,0,0) scale(1.12)}
  to{transform:translate3d(-13vmax,-9vmax,0) scale(.92)}}

/* Un voile crème par-dessus : le champ doit se deviner, pas se regarder.
   Sans lui, un texte gris sur un halo orange perd deux points de contraste
   selon l'endroit où le halo se trouve — et ça, une capture ne le montre
   qu'une fois sur dix. */
.champ::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--fond) 58%,transparent) 0%,
    color-mix(in srgb,var(--fond) 72%,transparent) 40%,
    color-mix(in srgb,var(--fond) 84%,transparent) 100%)}

/* ---------- pièces communes ---------- */
.kicker{display:inline-flex;align-items:center;gap:7px;
  font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
  font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tT);background:var(--tF);border-radius:6px;padding:5px 11px}
.kicker::before{content:'';width:5px;height:5px;border-radius:999px;background:var(--tVif);flex:none}

.btn{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15.5px;
  letter-spacing:-.008em;color:var(--btnT);background:var(--acc);
  border:1px solid transparent;border-radius:var(--rp);padding:11px 19px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--accVif);color:var(--btnT)}
.btn .fl{transition:transform .15s}
.btn:hover .fl{transform:translateX(3px)}
.btn.doux{background:var(--carteT);color:var(--encre);border-color:var(--traitF);
  backdrop-filter:blur(6px)}
.btn.doux:hover{background:var(--carte);color:var(--encre);border-color:var(--encre3)}

/* Les cartes sont légèrement translucides : le champ passe dessous, et la
   page respire au lieu d'être une pile de rectangles blancs. */
.carteb{background:var(--carteT);backdrop-filter:blur(10px);
  border:1px solid var(--trait);border-radius:var(--r);
  padding:24px 22px;transition:border-color .18s,transform .18s,background .18s}
a.carteb{display:block;color:inherit}
a.carteb:hover{border-color:var(--tVif);background:var(--carte);transform:translateY(-2px);color:inherit}
.carteb h3{margin-bottom:8px}
.carteb p{color:var(--encre2);font-size:15px;line-height:1.55}
.carteb .fl{color:var(--acc);font-weight:500;font-size:14.5px;display:inline-block;margin-top:13px;
  transition:transform .15s}
a.carteb:hover .fl{transform:translateX(3px)}

.grille{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}

.bande{border-radius:var(--r);padding:clamp(26px,3.4vw,44px);border:1px solid var(--trait);
  background:var(--carteT);backdrop-filter:blur(10px)}
.bande.paille{background:color-mix(in srgb,var(--mielF) 84%,transparent);border-color:#EFDFB8}
.bande.rose{background:color-mix(in srgb,var(--accF) 84%,transparent);border-color:#F2D8C5}
.bande.olive{background:color-mix(in srgb,var(--vertF) 84%,transparent);border-color:#DFE7CC}
.bande.bois{background:color-mix(in srgb,var(--cheneF) 84%,transparent);border-color:#EEDDC2}

.liste{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.liste li{display:flex;gap:11px;align-items:flex-start;color:var(--encre2);font-size:15.5px;
  line-height:1.55}
.liste .coche{flex:none;width:18px;height:18px;margin-top:3px}
.liste .coche circle{fill:none;stroke:var(--t);stroke-width:1.6;opacity:.42}
.liste .coche path{stroke:var(--t);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.liste b{color:var(--encre);font-weight:600}

/* ═══ LES DISPOSITIONS ═════════════════════════════════════════════════════ */
/* Titre à gauche, contenu à droite — et son miroir. */
.duo{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);
  gap:clamp(22px,4.5vw,60px);align-items:start}
.duo.inverse{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.duo.inverse > :first-child{order:2}
.duo.inverse > :last-child{order:1}
@media(max-width:900px){
  .duo,.duo.inverse{grid-template-columns:1fr;gap:22px}
  .duo.inverse > :first-child{order:1}.duo.inverse > :last-child{order:2}
}
.duo .dit{color:var(--encre2);font-size:15px;margin-top:12px;max-width:32ch}

/* Une colonne décalée : le texte ne commence pas au bord, il entre dans la
   page. Sur téléphone le décalage disparaît — il n'y a plus de marge à
   décaler. */
.decale{padding-left:clamp(0px,9vw,150px)}
@media(max-width:820px){.decale{padding-left:0}}

/* Des rangs qui alternent : image du propos à gauche, puis à droite. */
.rangs{display:grid;gap:clamp(18px,2.6vw,30px)}
.rang{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,52px);align-items:center;
  padding:clamp(20px,2.6vw,28px) 0;border-top:1px solid var(--trait)}
.rang:first-child{border-top:0;padding-top:0}
.rang:nth-child(even) > :first-child{order:2}
.rang .num{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tT);display:block;margin-bottom:9px}
.rang p{color:var(--encre2);font-size:15.5px;line-height:1.56;margin-top:7px}
.rang .gros{font-size:clamp(34px,5.2vw,64px);font-weight:600;letter-spacing:-.038em;
  line-height:1;color:var(--t);opacity:.22}
@media(max-width:820px){
  .rang{grid-template-columns:1fr;gap:10px}
  .rang:nth-child(even) > :first-child{order:1}
  .rang .gros{display:none}
}

/* ---------- l'en-tête ---------- */
header.haut{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--fond) 82%,transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--trait)}
.hautin{display:flex;align-items:center;gap:16px;padding:13px 0;flex-wrap:wrap}
.hautin .marque{--lw:118px}
nav.menu{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
nav.menu a{font-size:14.5px;font-weight:450;color:var(--encre2);padding:7px 12px;
  border-radius:8px;transition:background .14s,color .14s}
nav.menu a:hover{background:var(--fond2);color:var(--encre)}
nav.menu a[aria-current="page"]{color:var(--tT);font-weight:550;background:var(--tF)}
.outils{display:flex;align-items:center;gap:7px}
.langue{display:inline-flex;border:1px solid var(--trait);border-radius:8px;overflow:hidden;
  background:var(--carteT)}
.langue a{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.06em;color:var(--encre3);padding:6px 9px}
.langue a:hover{color:var(--encre);background:var(--fond2)}
.langue a[aria-current]{background:var(--fond2);color:var(--encre)}
@media(max-width:760px){
  .hautin{gap:10px}
  nav.menu{order:3;width:100%;margin-left:0;justify-content:flex-start;padding-bottom:2px;
    overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  nav.menu::-webkit-scrollbar{display:none}
  nav.menu a{white-space:nowrap}
  .outils{margin-left:auto}
}

/* ---------- LE LOGO ---------- */
.marque{display:block;background:var(--logo) left center/contain no-repeat;
  aspect-ratio:800/210;width:var(--lw,132px);
  text-indent:-9999px;overflow:hidden;white-space:nowrap}
a.marque:hover{opacity:.78}

/* ---------- le bandeau « en développement » ---------- */
.avis{background:var(--encre);color:var(--creme)}
.avisin{display:flex;align-items:center;gap:11px;justify-content:center;flex-wrap:wrap;
  padding:8px 0;font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;text-align:center;
  color:color-mix(in srgb,var(--creme) 74%,transparent)}
.avisin .pt{width:6px;height:6px;border-radius:999px;background:var(--mielVif);flex:none;
  animation:phare 2.6s ease-out infinite}
@keyframes phare{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mielVif) 55%,transparent)}
  70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.avisin b{color:var(--mielVif);font-weight:500}
.avisin .sep{opacity:.35}

/* ---------- le haut de page ---------- */
.hero{padding-top:clamp(44px,7vw,92px);padding-bottom:clamp(26px,4vw,50px)}
.hero h1{margin:16px 0 0}
.hero .lead{margin-top:18px}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
/* Un mot du titre prend la teinte de la page : c'est la seule couleur du
   héros, et elle dit de quelle page il s'agit. */
.hero h1 em{font-style:normal;color:var(--tT)}

/* ---------- le panneau d'état ---------- */
.etat{display:grid;grid-template-columns:auto 1fr;gap:6px 26px;align-items:start;
  background:var(--carteT);backdrop-filter:blur(10px);
  border:1px solid var(--trait);border-radius:var(--r);
  padding:clamp(22px,2.8vw,32px)}
.etat .date{grid-row:span 2;font-weight:600;
  font-size:clamp(25px,2.9vw,34px);line-height:1.05;color:var(--acc);letter-spacing:-.032em;
  border-right:1px solid var(--trait);padding-right:26px;white-space:nowrap}
.etat .date span{display:block;font-size:10.5px;font-family:'Geist Mono',ui-monospace,monospace;
  letter-spacing:.13em;text-transform:uppercase;color:var(--encre3);margin-bottom:9px;font-weight:400}
.etat h3{margin-bottom:6px}
.etat p{color:var(--encre2);font-size:15.5px;max-width:58ch}
@media(max-width:700px){
  .etat{grid-template-columns:1fr;gap:16px}
  .etat .date{grid-row:auto;border-right:0;border-bottom:1px solid var(--trait);padding:0 0 14px}
}

/* ---------- les étapes ---------- */
.etapes{counter-reset:e;display:grid;gap:2px}
.etape{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:16px 0;border-top:1px solid var(--trait)}
.etape:first-child{border-top:0;padding-top:0}
.etape::before{counter-increment:e;content:counter(e);
  font-family:'Geist Mono',ui-monospace,monospace;font-weight:500;font-size:11.5px;
  color:var(--tT);background:var(--tF);border-radius:6px;
  width:24px;height:24px;display:grid;place-items:center;margin-top:1px}
.etape h4{margin-bottom:4px}
.etape p{color:var(--encre2);font-size:15.5px;max-width:60ch;line-height:1.55}

/* ---------- la feuille de route, légère ---------- */
.route{display:grid;gap:0;position:relative;max-width:760px;padding:0;margin:0}
.route li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding:19px 0;border-top:1px solid var(--trait)}
.route li:first-child{border-top:0;padding-top:0}
.route .pastille{width:9px;height:9px;border-radius:999px;margin-top:9px;flex:none;
  background:var(--traitF)}
.route li.fait .pastille{background:var(--vert)}
.route li.encours .pastille{background:var(--mielVif);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--mielVif) 60%,transparent);
  animation:phare 2.8s ease-out infinite}
.route li.avenir .pastille{background:transparent;box-shadow:inset 0 0 0 1.5px var(--traitF)}
.route h4{margin-bottom:4px}
.route .quand{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--encre3);display:block;margin-bottom:6px}
.route p{color:var(--encre2);font-size:15.5px;max-width:60ch;line-height:1.55}

/* ---------- le mot de la fin ---------- */
.final{background:var(--carteT);backdrop-filter:blur(10px);
  border:1px solid var(--trait);border-radius:var(--r);
  padding:clamp(28px,4vw,52px);text-align:center}
.final .marque{--lw:126px;margin:0 auto 22px}
.final p{color:var(--encre2);max-width:50ch;margin:12px auto 0}
.final .signe{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tT);margin-top:22px}
.final .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* ---------- le pied de page (repris du site de base) ---------- */
footer.pied{background:transparent;border-top:1px solid var(--trait);
  padding:56px 0 40px;margin-top:clamp(26px,4vw,52px)}
.piedhaut{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:42px}
.piedhaut .marque{--lw:124px}
.piedhaut .accroche{font-size:14px;color:var(--encre2);max-width:34ch;margin:14px 0 0;line-height:1.55}
.reseaux{display:flex;gap:8px}
.reseaux a{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--trait);color:var(--encre2);background:var(--carteT);
  transition:background .16s,color .16s,border-color .16s}
.reseaux a:hover{background:var(--carte);color:var(--acc);border-color:var(--traitF)}
.reseaux svg{width:17px;height:17px}
.piedin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
@media(max-width:1000px){.piedin{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.piedin{grid-template-columns:1fr 1fr}}
.piedin h5{font-size:10.5px;font-weight:500;font-family:'Geist Mono',ui-monospace,monospace;
  letter-spacing:.13em;text-transform:uppercase;color:var(--encre3);margin:0 0 16px}
.piedin a{display:block;font-size:14px;color:var(--encre2);margin-bottom:11px;width:fit-content;
  transition:color .14s}
.piedin a:hover{color:var(--acc)}
.legal{margin-top:38px;font-size:12px;color:var(--encre3);max-width:92ch;line-height:1.6}

/* LA BARRE DU BAS — celle qu'Eliott aime. Son dégradé, son cœur qui bat et
   ses étincelles sont restés ; il respire maintenant, lentement. */
.barbas{margin-top:28px;border-radius:12px;padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:linear-gradient(101deg,
    color-mix(in srgb,var(--mielVif) 20%,transparent) 0%,
    color-mix(in srgb,var(--accVif)  14%,transparent) 30%,
    color-mix(in srgb,var(--cheneVif)16%,transparent) 62%,
    color-mix(in srgb,var(--vertVif) 18%,transparent) 100%);
  background-size:220% 100%;animation:glisser 37s ease-in-out infinite alternate;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--traitF) 40%,transparent)}
@keyframes glisser{from{background-position:0% 50%}to{background-position:100% 50%}}
.barbas .droits{font-size:12px;letter-spacing:-.004em;color:var(--encre2);margin:0;opacity:.88}
.barbas .lieu{position:relative;display:inline-flex;align-items:center;gap:9px;margin:0;
  cursor:default;font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--encre2);
  transition:color .3s ease,letter-spacing .35s ease}
.barbas .lieu:hover{color:var(--acc);letter-spacing:.145em}
.coeur{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;flex:none}
.coeur>svg{width:14px;height:14px;fill:var(--acc);transform-origin:center}
.lieu:hover .coeur>svg{animation:battre 1.1s ease-in-out infinite}
@keyframes battre{0%,100%{transform:scale(1)}
  10%{transform:scale(1.42)}23%{transform:scale(1.02)}
  36%{transform:scale(1.3)}52%{transform:scale(1)}}
.coeur::before{content:'';position:absolute;inset:-11px;border-radius:999px;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 38%,transparent) 0%,transparent 70%);
  transition:opacity .3s ease}
.lieu:hover .coeur::before{opacity:1;animation:lueur 1.1s ease-in-out infinite}
@keyframes lueur{0%,100%{transform:scale(.78);opacity:.4}50%{transform:scale(1.35);opacity:1}}
.etincelles{position:absolute;inset:-13px -6px;pointer-events:none}
.etincelles i{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:999px;
  background:var(--acc);opacity:0}
.etincelles i.m{background:var(--mielVif)}
.etincelles i.c{background:var(--vertVif)}
.etincelles i.e{width:7px;height:7px;border-radius:0;background:var(--mielVif);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.etincelles i.er{background:var(--accVif)}
.lieu:hover .etincelles i{animation:monte 1.7s ease-out infinite;animation-delay:var(--d)}
@keyframes monte{
  0%{opacity:0;transform:translateY(0) scale(.25) rotate(0deg)}
  18%{opacity:1;transform:translateY(calc(var(--dy) * .28)) scale(1.05) rotate(40deg)}
  100%{opacity:0;transform:translateY(var(--dy)) scale(.35) rotate(150deg)}}

/* CE QUI BOUGE S'ARRÊTE QUAND ON LE DEMANDE. Le champ reste — il ne bouge
   plus, mais il garde ses couleurs : c'est le fond de la page, pas un effet. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .lieu:hover .coeur>svg{transform:scale(1.25)}
}