/* page-fonctionnalite.css — la part propre à cette page.
 *
 * PORTÉ depuis la maquette du Studio « Fonctionnalité — la page de détail » (version 01.00.05), par
 * `site/vitrine/porter-pages.py`. C'est ce que sa feuille `#design` porte EN
 * PLUS du socle commun (`pages.css`), qui doit être chargé avant elle.
 *
 * NE PAS RETOUCHER ICI. On retravaille la maquette, puis on rejoue le portage.
 */
/* ===================== LA FICHE D'UNE FONCTIONNALITÉ =====================
   Le gabarit d'une page /fonctionnalites/<slug>/, montré sur « Maquettes et
   prototypes ». Même barre, même rideau, même pied que l'accueil et que le
   catalogue : c'est le MÊME site.
   30 septembre 2026 : le hero n'a plus de scène. Il PROMET, les sections
   MONTRENT — chacune avec son exemple à l'échelle, plutôt qu'une vignette
   abstraite en tête qui ne disait rien de précis.
   ========================================================================= */
.fd-hero { padding-top: var(--e7); padding-bottom: var(--e6) }

.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--gris-fumee); margin-bottom: var(--e3) }
.fil a { color: var(--gris-chaud) }
.fil a:hover { color: var(--bleu-glacier) }

.fd-fam { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border-radius: var(--r-pill); background: var(--bleu-nuit); color: var(--bleu-glacier);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase }
.fd-fam i { width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: pouls 2.4s ease-in-out infinite }

.fd-hero h1 { margin-top: var(--e3); font-size: clamp(34px, 5.6vw, 72px); font-weight: 800;
  letter-spacing: -.045em; line-height: 1.02; max-width: 17ch }
.fd-hero h1 em { font-style: normal; color: var(--bleu-glacier) }
.fd-hero .chapeau { margin-top: var(--e4); max-width: 66ch }
.fd-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: var(--e4) }

/* Les quatre promesses, en TEXTE : le hero reste sans visuel. */
.fd-cles { display: grid; gap: var(--e4); margin-top: var(--e7) }
@media (min-width: 700px) { .fd-cles { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1100px) { .fd-cles { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.fd-cle { position: relative; padding-top: var(--e3); border-top: 1.5px solid var(--filet) }
.fd-cle::before { content: ""; position: absolute; left: 0; top: -1.5px; width: 40px; height: 1.5px;
  background: var(--bleu-nexus) }
.fd-cle small { display: block; font-family: var(--f-mono); font-size: 11.5px; color: var(--bleu-glacier);
  letter-spacing: .04em; margin-bottom: 10px }
.fd-cle b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px }
.fd-cle span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--gris-chaud) }

/* ——— LE SOMMAIRE, collé sous la barre ———
   Une fiche dense se parcourt : le sommaire reste là pendant la lecture.
   `top: 73px` = la hauteur de la barre, mesurée (voir `scroll-margin-top`). */
.fd-som { position: sticky; top: 73px; z-index: 30; border-block: 1.5px solid var(--filet);
  background: rgba(14, 14, 13, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px) }
.fd-som__in { max-width: 1320px; margin: 0 auto; padding: 0 var(--marge); display: flex; align-items: center;
  gap: 2px; overflow-x: auto; scrollbar-width: none }
.fd-som__in::-webkit-scrollbar { display: none }
.fd-som__nom { flex: 0 0 auto; font-size: 13px; font-weight: 800; letter-spacing: -.01em;
  padding-right: var(--e3); margin-right: var(--e1); border-right: 1.5px solid var(--filet) }
.fd-som a { flex: 0 0 auto; position: relative; display: inline-flex; align-items: baseline; gap: 7px;
  padding: 15px 12px; font-size: 13.5px; font-weight: 600; color: var(--gris-chaud); white-space: nowrap;
  transition: color .2s var(--ease) }
.fd-som a small { font-family: var(--f-mono); font-size: 10.5px; color: var(--gris-fumee) }
.fd-som a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1.5px; height: 1.5px;
  background: var(--bleu-nexus); scale: 0 1; transition: scale .25s var(--ease) }
.fd-som a:hover { color: var(--craie) }
.fd-som a:hover::after { scale: 1 1 }

/* ——— Les blocs ——— */
.fd-bloc { padding-top: var(--e8); padding-bottom: var(--e8) }
.fd-bloc[id] { scroll-margin-top: 124px }
.fd-tete { display: grid; gap: var(--e3); margin-bottom: var(--e6) }
@media (min-width: 1000px) { .fd-tete { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: end; gap: var(--e7) } }
.fd-tete .chapeau { margin-top: 0 }
.fd-duo2 { display: grid; gap: var(--e5); align-items: start }
@media (min-width: 1060px) { .fd-duo2 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--e6) } }
.fd-duo2--inv { align-items: center }
@media (min-width: 1060px) { .fd-duo2--inv { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) } }
/* Sur une colonne, le titre passe AVANT l'exemple : on sait ce qu'on regarde. */
@media (max-width: 1059px) { .fd-duo2--inv > :first-child { order: 2 } }
.fd-sous { font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin: var(--e6) 0 var(--e3) }

/* ——— QUI FAIT QUOI ——— */
.fd-roles { display: grid; gap: var(--e3) }
@media (min-width: 960px) { .fd-roles { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.role__t { display: flex; align-items: center; gap: 14px; padding-bottom: var(--e3); margin-bottom: var(--e3);
  border-bottom: 1.5px solid var(--filet) }
.role__i { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: var(--bleu-nuit); color: var(--bleu-glacier) }
.role--vous .role__i { background: rgba(240, 144, 143, .12); color: var(--corail) }
.role__i svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round }
.carte .role__t h3 { font-size: 22px; margin: 0 }
.carte .role__t p { font-size: 13.5px; color: var(--gris-cendre); margin-top: 2px }
.role__l { display: grid; gap: 17px }
.role__l li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px }
.role__l svg { width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--bleu-glacier);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.role--vous .role__l svg { stroke: var(--corail) }
.role__l b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em }
.role__l span { display: block; font-size: 14px; line-height: 1.5; color: var(--gris-chaud); margin-top: 2px }

/* ——— DÉSIGNER UNE ZONE : l'éditeur, à l'échelle ——— */
.etapes { display: grid; gap: var(--e4) }
.etape { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px }
.etape__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 1.5px solid var(--bleu-profond); color: var(--bleu-glacier); font-family: var(--f-mono); font-size: 14px }
.etape h3 { font-size: 19px; letter-spacing: -.02em; margin: 8px 0 6px }
.etape p { font-size: 15px; line-height: 1.6; color: var(--gris-chaud) }
.etape p b { color: var(--craie); font-weight: 600 }

.recu { margin-top: var(--e4); border: 1.5px solid var(--filet); border-radius: 14px; background: var(--noir-chaud);
  overflow: hidden }
.recu__t { padding: 10px 16px; border-bottom: 1.5px solid var(--filet); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris-fumee) }
.recu dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; padding: 16px;
  font-family: var(--f-mono); font-size: 12.5px; line-height: 1.5 }
.recu dt { color: var(--gris-fumee) }
.recu dd { color: var(--craie); overflow-wrap: anywhere }
.recu dd em { font-style: normal; color: var(--bleu-glacier) }

.ed { border: 1.5px solid var(--filet); border-radius: var(--r-carte); overflow: hidden; background: var(--graphite);
  box-shadow: 0 50px 110px -70px #000 }
.ed__bar { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1.5px solid var(--filet);
  background: var(--noir-chaud); font-size: 12.5px }
.pt { width: 8px; height: 8px; border-radius: 50%; background: var(--releve); flex: 0 0 auto }
.ed__bar b { margin-left: 4px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis }
.ed__tailles { margin-left: auto; display: flex; gap: 4px; font-family: var(--f-mono); font-size: 10.5px }
.ed__tailles span { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--filet); color: var(--gris-cendre) }
.ed__tailles .on { border-color: var(--bleu-profond); color: var(--bleu-glacier); background: rgba(78, 129, 238, .1) }
.ed__in { display: grid; grid-template-columns: minmax(0, 1fr) }
@media (min-width: 760px) { .ed__in { grid-template-columns: minmax(0, 1fr) 272px } }
.ed__toile { padding: 18px; background: radial-gradient(var(--filet) 1px, transparent 1.3px) 0 0 / 14px 14px, var(--noir-chaud) }
.ed__page { display: grid; gap: 11px; padding: 18px 20px 22px; border-radius: 10px; border: 1px solid var(--filet);
  background: radial-gradient(ellipse 70% 60% at 85% -10%, rgba(47, 92, 196, .35), transparent 65%), var(--fond) }
.ed__nav { display: flex; align-items: center; gap: 10px; margin-bottom: 8px }
.ed__nav i { height: 6px; width: 34px; border-radius: 3px; background: var(--releve) }
.ed__nav i:first-child { width: 52px; background: var(--craie); opacity: .8; margin-right: auto }
.ed__nav i:last-child { width: 46px; height: 14px; border-radius: 5px; background: var(--bleu-nexus) }
.ed__l { display: block; height: 6px; border-radius: 3px; background: var(--releve) }
.ed__btns { display: flex; gap: 8px; margin-top: 4px }
.ed__btns i { width: 86px; height: 22px; border-radius: 6px; background: var(--bleu-nexus) }
.ed__btns i + i { width: 110px; background: none; border: 1px solid var(--filet) }
.ed__cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px }
.ed__cartes i { height: 54px; border-radius: 8px; border: 1px solid var(--filet);
  background: linear-gradient(180deg, var(--panneau), var(--graphite)) }

/* La zone désignée : un pointillé, quatre poignées, une étiquette. */
.ed__sel { position: relative; justify-self: start; margin-top: 16px; padding: 6px 8px; border-radius: 4px;
  outline: 1.5px dashed var(--bleu-nexus); background: rgba(78, 129, 238, .08) }
.ed__tag { position: absolute; left: -1.5px; top: -22px; padding: 3px 7px; border-radius: 5px 5px 5px 0;
  background: var(--bleu-nexus); color: #fff; font-family: var(--f-mono); font-size: 10px; white-space: nowrap }
.ed__sel > i { position: absolute; width: 7px; height: 7px; border: 1.5px solid var(--bleu-nexus); background: var(--craie) }
.ed__sel > i:nth-of-type(1) { left: -4px; top: -4px }
.ed__sel > i:nth-of-type(2) { right: -4px; top: -4px }
.ed__sel > i:nth-of-type(3) { left: -4px; bottom: -4px }
.ed__sel > i:nth-of-type(4) { right: -4px; bottom: -4px }
.ed__h { display: grid; font-size: clamp(18px, 2.1vw, 27px); font-weight: 800; letter-spacing: -.04em; line-height: 1.06 }
.ed__h > span { grid-area: 1 / 1 }
.ed__h em { font-style: normal; color: var(--bleu-glacier) }
/* Sans animation (éditeur figé, mouvements réduits), c'est l'état FINAL qui se lit. */
.ed__h .ancien { opacity: 0 }

.ed__chat { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-top: 1.5px solid var(--filet);
  background: var(--noir-chaud) }
@media (min-width: 760px) { .ed__chat { border-top: 0; border-left: 1.5px solid var(--filet) } }
.bulle { padding: 11px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; color: var(--craie) }
.bulle--vous { background: var(--releve) }
.bulle--agent { background: var(--panneau); border: 1.5px solid var(--filet) }
.bulle__qui { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris-cendre) }
.bulle__qui svg { width: 13px; height: 13px; fill: var(--corail) }
.bulle__des { display: block; margin-bottom: 8px; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--bleu-profond);
  background: rgba(78, 129, 238, .1); font-family: var(--f-mono); font-size: 10.5px; color: var(--bleu-glacier);
  overflow-wrap: anywhere }
.diff { display: block; margin-top: 8px; padding: 8px; border-radius: 7px; background: var(--fond); font-family: var(--f-mono);
  font-size: 10.5px; line-height: 1.6; overflow-wrap: anywhere }
.diff .moins { display: block; color: var(--corail) }
.diff .plus { display: block; color: var(--vert-valide) }
.ed__v { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11px;
  color: var(--gris-cendre) }
.ed__v .pastille { padding: 4px 10px; font-size: 10px }

.modes { display: grid; gap: 14px; margin-top: var(--e6) }
@media (min-width: 800px) { .modes { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.mode { padding: var(--e3) }
.mode__demo { position: relative; display: grid; align-content: center; gap: 7px; height: 78px; padding: 0 16px;
  margin-bottom: var(--e3); border: 1px solid var(--filet); border-radius: 10px; background: var(--noir-chaud) }
.mode__demo .ed__l { width: 86% }
.mode__demo--el { gap: 11px }
.mode__demo .ed__l.court { width: 58% }
.mode__demo .ed__l.pris { outline: 1.5px dashed var(--bleu-nexus); outline-offset: 4px; background: var(--bleu-glacier) }
.mode__cadre { position: absolute; left: 10px; top: 12px; width: 62%; bottom: 12px; border-radius: 5px;
  border: 1.5px dashed var(--bleu-nexus); background: rgba(78, 129, 238, .1) }
.carte .mode__txt { font-size: 12.5px; line-height: 1.5; color: var(--gris-chaud) }
.mode__txt mark { background: rgba(78, 129, 238, .28); color: var(--craie); border-radius: 3px; padding: 1px 2px;
  box-shadow: 0 0 0 1.5px var(--bleu-nexus) }
.mode h3 { font-size: 18px }

/* ——— RESPONSIVE : trois écrans, un seul fichier ——— */
.rsp { display: flex; align-items: flex-end; justify-content: center; gap: clamp(12px, 2.4vw, 32px);
  padding: var(--e5) var(--e3) var(--e3); border: 1.5px solid var(--filet); border-radius: var(--r-carte);
  background: radial-gradient(var(--filet) 1px, transparent 1.3px) 0 0 / 16px 16px, var(--noir-chaud); overflow: hidden }
.rsp__f { display: grid; gap: 12px; justify-items: center }
.rsp__ecran { position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; padding: 12px;
  border: 1.5px solid var(--filet); border-radius: 10px;
  background: radial-gradient(ellipse 80% 40% at 80% 0%, rgba(47, 92, 196, .3), transparent 70%), var(--fond) }
.rsp__f--b .rsp__ecran { width: min(560px, 50vw); height: 330px }
.rsp__f--t .rsp__ecran { width: min(260px, 24vw); height: 330px }
.rsp__f--m .rsp__ecran { width: min(146px, 15vw); height: 290px; border-radius: 18px }
@media (max-width: 699px) {
  .rsp { padding: var(--e4) 12px var(--e3); gap: 12px }
  .rsp__f--b { display: none }
  .rsp__f--t .rsp__ecran { width: 44vw; height: 300px }
  .rsp__f--m .rsp__ecran { width: 25vw; height: 260px }
  .rsp__lab b, .rsp__lab span { font-size: 10.5px }
}
/* La colonne prend la largeur de SON écran : l'étiquette passe à la ligne
   au lieu d'élargir la colonne et de pousser le mobile hors du cadre. */
.rsp__f { width: min-content }
.rsp__nav { display: flex; align-items: center; gap: 6px; margin-bottom: 6px }
.rsp__nav i { height: 5px; width: 22px; border-radius: 3px; background: var(--releve) }
.rsp__nav i:first-child { width: 34px; background: var(--craie); opacity: .8; margin-right: auto }
.rsp__nav .burger { width: 14px; height: 10px; background: none; border-block: 2px solid var(--gris-cendre) }
.rsp__t { height: 12px; border-radius: 4px; background: var(--craie); opacity: .9 }
.rsp__t2 { height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--bleu-glacier), var(--bleu-profond)) }
.rsp__l { height: 5px; border-radius: 3px; background: var(--releve) }
.rsp__b { height: 18px; width: 70px; border-radius: 5px; background: var(--bleu-nexus); margin-top: 2px }
.rsp__g { display: grid; gap: 7px; margin-top: 8px }
.rsp__g i { height: 58px; border-radius: 7px; border: 1px solid var(--filet);
  background: linear-gradient(180deg, var(--panneau), var(--graphite)) }
.rsp__g--3 { grid-template-columns: repeat(3, 1fr) }
.rsp__g--2 { grid-template-columns: repeat(2, 1fr) }
.rsp__g--1 i { height: 40px }
/* Le balayage : l'agent MESURE chaque largeur. Hors champ quand rien ne l'anime. */
.rsp__scan { position: absolute; left: 0; right: 0; top: -44px; height: 44px;
  background: linear-gradient(180deg, transparent, rgba(78, 129, 238, .2)); border-bottom: 1.5px solid var(--bleu-nexus) }
.rsp__lab { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center }
.rsp__lab b { font-family: var(--f-mono); font-size: 12px; font-weight: 500 }
.rsp__lab span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--vert-valide) }
.rsp__lab svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }

/* ——— L'APERÇU CLIENT, animé ——— */
.ap { border: 1.5px solid var(--filet); border-radius: var(--r-carte); overflow: hidden; background: var(--graphite);
  box-shadow: 0 50px 110px -70px #000 }
.ap__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1.5px solid var(--filet);
  background: var(--noir-chaud) }
.ap__url { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--filet); background: var(--graphite); font-family: var(--f-mono);
  font-size: 11px; color: var(--gris-cendre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ap__url svg { flex: 0 0 auto; width: 12px; height: 12px; fill: none; stroke: var(--vert-valide); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round }
.ap__bar .pastille { padding: 4px 10px; font-size: 10px; flex: 0 0 auto }
.ap__vue { position: relative; height: 400px; overflow: hidden;
  background: linear-gradient(180deg, #0B0C11 0%, #0F1426 48%, #0E0E0D 100%) }
.ap__vue .rideau__b { top: -78% }
.ap__c { position: relative; display: grid; gap: 12px; padding: 34px 32px }
.ap__c .t1 { height: 20px; width: 64%; border-radius: 5px; background: var(--craie); opacity: .92 }
.ap__c .t2 { height: 20px; width: 44%; border-radius: 5px; background: linear-gradient(90deg, var(--bleu-glacier), var(--bleu-profond)) }
.ap__c .l { height: 7px; width: 72%; border-radius: 3px; background: var(--releve) }
.ap__c .l.court { width: 50% }
.ap__btn { justify-self: start; width: 132px; height: 34px; margin-top: 6px; border-radius: 8px; background: var(--bleu-nexus);
  box-shadow: 0 8px 28px -10px rgba(78, 129, 238, .7) }
.ap__cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px }
.ap__cartes i { height: 86px; border-radius: 10px; border: 1.5px solid var(--filet);
  background: linear-gradient(180deg, var(--panneau), var(--graphite)) }
.ap__curseur { position: absolute; left: 146px; top: 176px; width: 18px; height: 18px; z-index: 3 }
.ap__curseur path { fill: var(--craie); stroke: var(--fond); stroke-width: 1.4 }
.epingle { position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 8px }
.epingle__n { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50% 50% 50% 4px;
  background: var(--corail); color: var(--fond); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 4px rgba(240, 144, 143, .22) }
.epingle__b { max-width: 216px; padding: 9px 11px; border-radius: 10px; background: var(--craie); color: var(--fond);
  font-size: 12px; line-height: 1.4; box-shadow: 0 16px 34px -14px #000 }
.epingle__b small { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--gris-fumee) }
@media (max-width: 699px) { .epingle__b { display: none } }

/* ——— FIGMA : lire un cadre, le porter jusqu'au code ——— */
.flux { display: grid; gap: 0; align-items: stretch }
@media (min-width: 1000px) { .flux { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr) } }
.noeud { padding: var(--e3) }
.noeud__t { display: flex; align-items: center; gap: 12px; margin-bottom: var(--e2) }
.noeud__logo { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  border: 1.5px solid var(--filet); background: var(--noir-chaud) }
.noeud__logo svg { width: 18px; height: 24px }
.noeud__logo .ico-n { width: 20px; height: 20px; fill: var(--bleu-nexus) }
.noeud__logo .ico-c { width: 20px; height: 20px; fill: none; stroke: var(--bleu-glacier); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round }
.noeud__t b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em }
.noeud__t span { display: block; font-size: 12.5px; color: var(--gris-cendre) }
.calques { display: grid; gap: 5px; font-family: var(--f-mono); font-size: 11.5px; color: var(--gris-chaud) }
.calques li { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; background: var(--noir-chaud);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.calques li i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--gris-cendre) }
.calques li.pris { box-shadow: inset 0 0 0 1.5px var(--bleu-profond); color: var(--craie) }
.calques li.pris i { border-color: var(--bleu-glacier); background: rgba(144, 184, 253, .3) }
.calques li .ok { margin-left: auto; color: var(--vert-valide) }
.lien-f { position: relative; display: grid; place-items: center; height: 44px }
.lien-f::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px;
  background: repeating-linear-gradient(180deg, var(--releve) 0 6px, transparent 6px 11px) }
.lien-f i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--bleu-glacier);
  box-shadow: 0 0 14px var(--bleu-nexus) }
@media (min-width: 1000px) {
  .lien-f { height: auto }
  .lien-f::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1.5px;
    background: repeating-linear-gradient(90deg, var(--releve) 0 6px, transparent 6px 11px) }
}
.fd-figma-sans { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--e4); font-size: 14px;
  color: var(--gris-cendre); line-height: 1.5; max-width: 90ch }
.fd-figma-sans svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; fill: none; stroke: var(--bleu-glacier);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.fd-figma-sans b { color: var(--craie); font-weight: 600 }

/* ——— VERSIONS, VALIDATION, PASSAGE AU CODE ——— */
.tl { display: grid }
.tl li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding-bottom: var(--e4) }
.tl li::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 1.5px; background: var(--filet) }
.tl li:last-child { padding-bottom: 0 }
.tl li:last-child::before { display: none }
.tl__p { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--filet);
  background: var(--graphite) }
.tl__p i { width: 9px; height: 9px; border-radius: 50%; background: var(--gris-cendre) }
.tl__p--bleu { border-color: var(--bleu-profond) }
.tl__p--bleu i { background: var(--bleu-glacier) }
.tl__p--corail { border-color: rgba(240, 144, 143, .5) }
.tl__p--corail i { background: var(--corail) }
.tl__p--vert { border-color: rgba(34, 197, 94, .5) }
.tl__p--vert i { background: var(--vert-valide) }
.tl__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 4px }
.tl__h b { font-size: 16px; font-weight: 700; letter-spacing: -.02em }
.tl__h .mono { font-size: 11.5px; color: var(--gris-fumee) }
.tl__h .pastille { padding: 3px 9px; font-size: 10px }
.tl p { margin-top: 5px; font-size: 14.5px; line-height: 1.55; color: var(--gris-chaud) }
.fd-code-l { display: grid; gap: 14px; margin-top: var(--e3) }
.fd-code-l li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: 14.5px; line-height: 1.55;
  color: var(--gris-chaud) }
.fd-code-l li > span:first-child { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--bleu-nuit); color: var(--bleu-glacier); font-family: var(--f-mono); font-size: 12px }
.fd-code-l b { color: var(--craie); font-weight: 600 }

/* ——— QUESTIONS : `<details>`, donc ouvertes sans script ——— */
.faq { border-top: 1.5px solid var(--filet) }
.faq details { border-bottom: 1.5px solid var(--filet) }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: var(--e3); padding: 22px 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; transition: color .2s var(--ease) }
.faq summary::-webkit-details-marker { display: none }
.faq summary:hover { color: var(--bleu-glacier) }
.faq summary svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--gris-cendre); stroke-width: 2;
  stroke-linecap: round; transition: rotate .25s var(--ease) }
.faq details[open] summary svg { rotate: 45deg; stroke: var(--bleu-glacier) }
.faq details p { padding: 0 0 24px; max-width: 74ch; font-size: 15.5px; line-height: 1.65; color: var(--gris-chaud) }
.faq details p b { color: var(--craie); font-weight: 600 }

/* ——— L'APPEL, avant les voisines ——— */
.fd-appel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e4);
  padding: var(--e6) var(--e5); border: 1.5px solid var(--filet); border-radius: 22px;
  background: radial-gradient(ellipse 60% 130% at 100% 0%, rgba(78, 129, 238, .24), transparent 62%),
              linear-gradient(180deg, var(--panneau), var(--graphite)) }
.fd-appel h2 { font-size: clamp(26px, 3.6vw, 42px); max-width: 19ch }
.fd-appel h2 em { font-style: normal; color: var(--bleu-glacier) }
.fd-appel p { margin-top: 12px; font-size: 16px; color: var(--gris-chaud); max-width: 52ch }
.fd-appel .fd-cta { margin-top: 0 }

/* ——— Le mouvement des exemples ———
   Tout est en CSS : l'éditeur du Studio n'exécute aucun script, et ces
   exemples doivent y bouger aussi. Sans mouvement, chaque exemple montre son
   état FINAL — la zone modifiée, la carte en place, la bulle posée. */
@media (prefers-reduced-motion: no-preference) {
  .ed__sel { animation: selPouls 3s ease-in-out infinite }
  .ed__h .ancien { animation: ancien 10s var(--ease) infinite }
  .ed__h .neuf { animation: neuf 10s var(--ease) infinite }
  .ed__rep { animation: rep 10s var(--ease) infinite }
  .rsp__scan { animation: scan 4.6s cubic-bezier(.45, 0, .55, 1) infinite }
  .rsp__f--t .rsp__scan { animation-delay: .5s }
  .rsp__f--m .rsp__scan { animation-delay: 1s }
  .ap__c > * { animation: monte 8s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .12s) }
  .ap__btn { animation: monte 8s var(--ease) infinite, survol 8s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .12s), 0s }
  .ap__curseur { animation: curseur 8s var(--ease) infinite }
  .epingle { animation: pique 8s var(--ease) infinite; animation-delay: var(--t, 0s) }
  .lien-f i { animation: voyageV 2.4s var(--ease) infinite }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .lien-f i { animation-name: voyage }
}
@keyframes selPouls { 0%, 100% { box-shadow: 0 0 0 0 rgba(78, 129, 238, 0) } 50% { box-shadow: 0 0 0 6px rgba(78, 129, 238, .16) } }
@keyframes ancien { 0%, 40% { opacity: 1; filter: none } 48%, 94% { opacity: 0; filter: blur(4px) } 100% { opacity: 1 } }
@keyframes neuf { 0%, 44% { opacity: 0; filter: blur(4px) } 52%, 93% { opacity: 1; filter: none } 100% { opacity: 0 } }
@keyframes rep { 0%, 46% { opacity: 0; translate: 0 8px } 54%, 93% { opacity: 1; translate: 0 } 100% { opacity: 0 } }
@keyframes scan { 0% { translate: 0 0 } 70%, 100% { translate: 0 calc(100% * 9) } }
@keyframes monte { 0%, 6% { opacity: 0; translate: 0 16px } 18%, 90% { opacity: 1; translate: 0 } 100% { opacity: 0 } }
@keyframes survol { 0%, 44% { scale: 1; background: var(--bleu-nexus) } 50%, 70% { scale: 1.05; background: var(--bleu-glacier) } 78%, 100% { scale: 1; background: var(--bleu-nexus) } }
@keyframes curseur { 0%, 18% { translate: 300px 150px; opacity: 0 } 26% { opacity: 1 } 46%, 70% { translate: 0 0; opacity: 1 } 84%, 100% { translate: 220px 90px; opacity: 0 } }
@keyframes pique { 0%, 30% { opacity: 0; translate: 0 -8px } 38%, 92% { opacity: 1; translate: 0 } 100% { opacity: 0 } }
@keyframes voyage { from { translate: -30px 0; opacity: 0 } 30%, 70% { opacity: 1 } to { translate: 30px 0; opacity: 0 } }
@keyframes voyageV { from { translate: 0 -18px; opacity: 0 } 30%, 70% { opacity: 1 } to { translate: 0 18px; opacity: 0 } }

/* ——— LES VOISINES, PUIS PRÉCÉDENT / SUIVANT ——— */
.fd-voisines { padding-top: var(--e6); padding-bottom: var(--e6) }
.fd-voisines h2 { font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; letter-spacing: -.03em;
  margin-bottom: var(--e4) }
.fiches { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 14px }
.fiche { position: relative; display: grid; gap: 8px; align-content: start; padding: var(--e3);
  border: 1.5px solid var(--filet); border-radius: var(--r-carte); overflow: hidden;
  background: linear-gradient(180deg, var(--panneau), var(--graphite));
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease) }
.fiche::after { content: ""; position: absolute; inset: 0 0 auto; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--bleu-nexus), transparent);
  opacity: 0; transition: opacity .28s var(--ease) }
.fiche:hover { transform: translateY(-5px); border-color: var(--releve);
  box-shadow: 0 26px 54px -30px #000 }
.fiche:hover::after { opacity: 1 }
.fiche b { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; color: var(--craie) }
.fiche > span { font-size: 13.5px; line-height: 1.5; color: var(--gris-chaud) }
.fiche em { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; font-style: normal;
  font-size: 12.5px; font-weight: 700; color: var(--bleu-glacier) }
.fiche em svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: translate .28s var(--ease) }
.fiche:hover em svg { translate: 4px 0 }

.fd-pn { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
  margin-top: var(--e5) }
.fd-pn a { display: grid; gap: 4px; padding: var(--e3); border: 1.5px solid var(--filet);
  border-radius: var(--r-carte);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease) }
.fd-pn a:hover { border-color: var(--bleu-nexus); background: rgba(78, 129, 238, .07);
  transform: translateY(-3px) }
.fd-pn span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris-fumee); font-weight: 700 }
.fd-pn b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--craie) }
.fd-pn a:last-child { text-align: right }