/* Vitrine de Gilgamesh (chantier « vitrine ») — le style de l'application : palette, polices et échelles
   recopiées des jetons partagés de frontend/src/app.css par outils/jetons.py (zone « JETONS PARTAGÉS »).
   Polices servies par l'app (/app/fonts/), même origine. Paliers : Mobile ≤ 639 · Tablette ≤ 1023 ·
   Portable ≤ 1439 · Large ≥ 1440. */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/app/fonts/dm-sans-latin-ext-400-normal.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:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/app/fonts/dm-sans-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/app/fonts/dm-sans-latin-ext-500-normal.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:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/app/fonts/dm-sans-latin-500-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/app/fonts/dm-sans-latin-ext-600-normal.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:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/app/fonts/dm-sans-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==== JETONS PARTAGÉS — début. Couleurs des deux thèmes, échelles et polices de Gilgamesh. Source :
   frontend/src/app.css ; copies exactes dans vitrine/vitrine.css et documentation/theme/assets/doc.css
   (python outils/jetons.py ecrire ; sans argument, il vérifie). Ne modifier que dans app.css ; un écart
   voulu d'un site se pose chez lui, après la copie. ==== */
/* ==== Socle visuel V2 « Atelier » : palette chaude, rôles de couleur, thème clair/sombre/système.
   Une famille = un préfixe (--fond-, --encre-, --trait-, --accent-, --etat-, --feuille- : docs/NOMMAGE.md) ;
   les thèmes ne changent que les VALEURS. Tokens de la feuille (--feuille-*) figés hors thème : cf. zone protégée plus bas. ==== */
:root{
  color-scheme:light;
  --fond-page:#EDE5D5; --fond-panneau:#F6F1E6; --fond-releve:#FFF9EE; --trait-fin:#D5C9B6; --trait-champ:#978672;
  --encre-forte:#241F19; --encre-moyenne:#53493D; --encre-pale:#726554; --encre-etiquette:#53493D;
  --accent-encre:#A03D26; --accent-voile:#E9D5C7; --accent-aplat:#B4472C; --accent-sur-aplat:#FFFFFF;
  --etat-attention:#775312; --etat-attention-voile:#F0E3BE; --etat-danger:#A02942; --etat-danger-voile:#F4DDE0;
  --etat-succes:#426044; --etat-succes-voile:#E2E8DB; --ombre-flottante:0 8px 32px #3B2B1312;
  --fond-verre:#F6F1E6B8;   /* surimpression en verre : --fond-panneau translucide */
  /* Feuille de papier (éditeur, aperçu, feuilles A4) — NE JAMAIS remplacer par le thème (zone protégée). */
  --feuille-fond-sombre:#111111; --feuille-encre-sombre:#F2EBDD; --feuille-pale-sombre:#B5B1AC;
  --feuille-fond-clair:#FFFDF8; --feuille-encre-clair:#1A1A1A; --feuille-pale-clair:#5E5A55;
  --feuille-surligne:#FBEFB0;   /* surligneur des sides (répliques de l'interprète) */
  --feuille-ajout:#DCEBD3; --feuille-retrait:#A33A2C;   /* comparaison de versions (ajout surligné, retrait barré) */
  /* Papier des plans (schémas) : blanc cassé, grille et axes pâles — les mêmes dans les deux thèmes. */
  --feuille-plan:#F8F4EC; --feuille-grille:#E4DBCC; --feuille-axe:#CDBFAB;
  /* Teintes des post-it (Organiser) : fond pâle sous l'encre, bande plus franche (réglage du projet). */
  --fond-postit-ardoise:#E2E1DC; --fond-postit-nuit:#DCDEE9; --fond-postit-sarcelle:#D4E3E0; --fond-postit-foret:#D8E4D5;
  --fond-postit-olive:#E3E4CC; --fond-postit-terre:#ECDFC8; --fond-postit-bordeaux:#EED8D4; --fond-postit-prune:#E4D9E7;
  --trait-postit-ardoise:#6B7480; --trait-postit-nuit:#4D5A8A; --trait-postit-sarcelle:#3F7F80; --trait-postit-foret:#4C7A57;
  --trait-postit-olive:#7A8445; --trait-postit-terre:#8A6C42; --trait-postit-bordeaux:#8A4A4F; --trait-postit-prune:#6E4F85;
}
/* « Système » (aucun data-theme) : suit l'OS. « clair » force le clair (exclu ici). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]){
  color-scheme:dark;
  --fond-page:#201E1B; --fond-panneau:#282521; --fond-releve:#322D27; --trait-fin:#4A4239; --trait-champ:#8E8070;
  --encre-forte:#F2EBDD; --encre-moyenne:#BDB0A0; --encre-pale:#A09383; --encre-etiquette:#BDB0A0;
  --accent-encre:#EF9275; --accent-voile:#48312A; --accent-aplat:#EF9275; --accent-sur-aplat:#241F19;
  --etat-attention:#E8C77D; --etat-attention-voile:#403521; --etat-danger:#F4A1AF; --etat-danger-voile:#452A31;
  --etat-succes:#B2C6A5; --etat-succes-voile:#2C382B; --ombre-flottante:0 8px 32px #0003;
  --fond-verre:#282521CD;
  --fond-postit-ardoise:#3A4048; --fond-postit-nuit:#333A54; --fond-postit-sarcelle:#2C4749; --fond-postit-foret:#2F4739;
  --fond-postit-olive:#414A30; --fond-postit-terre:#4A3F2E; --fond-postit-bordeaux:#4E3639; --fond-postit-prune:#453251;
  --trait-postit-ardoise:#8E98A4; --trait-postit-nuit:#7F8BC2; --trait-postit-sarcelle:#62A6A5; --trait-postit-foret:#71A57E;
  --trait-postit-olive:#A5AE68; --trait-postit-terre:#BB9461; --trait-postit-bordeaux:#BC6E74; --trait-postit-prune:#9D7BB6;
  }
}
/* « sombre » : force le sombre quel que soit l'OS. */
:root[data-theme="sombre"]{
  color-scheme:dark;
  --fond-page:#201E1B; --fond-panneau:#282521; --fond-releve:#322D27; --trait-fin:#4A4239; --trait-champ:#8E8070;
  --encre-forte:#F2EBDD; --encre-moyenne:#BDB0A0; --encre-pale:#A09383; --encre-etiquette:#BDB0A0;
  --accent-encre:#EF9275; --accent-voile:#48312A; --accent-aplat:#EF9275; --accent-sur-aplat:#241F19;
  --etat-attention:#E8C77D; --etat-attention-voile:#403521; --etat-danger:#F4A1AF; --etat-danger-voile:#452A31;
  --etat-succes:#B2C6A5; --etat-succes-voile:#2C382B; --ombre-flottante:0 8px 32px #0003;
  --fond-verre:#282521CD;
  --fond-postit-ardoise:#3A4048; --fond-postit-nuit:#333A54; --fond-postit-sarcelle:#2C4749; --fond-postit-foret:#2F4739;
  --fond-postit-olive:#414A30; --fond-postit-terre:#4A3F2E; --fond-postit-bordeaux:#4E3639; --fond-postit-prune:#453251;
  --trait-postit-ardoise:#8E98A4; --trait-postit-nuit:#7F8BC2; --trait-postit-sarcelle:#62A6A5; --trait-postit-foret:#71A57E;
  --trait-postit-olive:#A5AE68; --trait-postit-terre:#BB9461; --trait-postit-bordeaux:#BC6E74; --trait-postit-prune:#9D7BB6;
}
:root{
  /* ── ÉCHELLE · espacement (padding, margin, gap) — valeurs paires, rien d'autre ── */
  --espace-2:round(nearest,.125rem,2px); --espace-4:round(nearest,.25rem,2px); --espace-6:round(nearest,.375rem,2px); --espace-8:round(nearest,.5rem,2px); --espace-12:round(nearest,.75rem,2px);
  --espace-16:round(nearest,1rem,2px); --espace-24:round(nearest,1.5rem,2px); --espace-32:round(nearest,2rem,2px); --espace-48:round(nearest,3rem,2px);
  /* ── ÉCHELLE · taille de texte — plancher 12 ; 10 = étiquettes en capitales, badges, compteurs ── */
  --taille-10:round(nearest,.625rem,2px); --taille-12:round(nearest,.75rem,2px); --taille-14:round(nearest,.875rem,2px); --taille-16:round(nearest,1rem,2px);
  --taille-20:round(nearest,1.25rem,2px); --taille-24:round(nearest,1.5rem,2px); --taille-28:round(nearest,1.75rem,2px);
  /* ── ÉCHELLE · graisses et interlignes ── */
  --graisse-normale:400; --graisse-moyenne:500; --graisse-forte:600; --graisse-grasse:700;
  --interligne-serre:1.3; --interligne-texte:1.5; --interligne-prose:1.6;
  /* ── ÉCHELLE · rayons (px : ne suivent pas la taille de texte) ── */
  --rayon-4:4px; --rayon-8:8px; --rayon-12:12px; --rayon-pilule:999px;
  /* ── POLICES ── */
  --police-interface:'DM Sans',ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --police-scenario:'Courier New',ui-monospace,"Cascadia Mono",Consolas,monospace;
  --police-titre:Georgia,serif;
}
/* ==== JETONS PARTAGÉS — fin ==== */

/* ── Jetons propres à la vitrine, et ses écarts voulus aux jetons partagés : posés après eux, ils les
   remplacent (à garder ou à aligner sur l'app : chantier « Design »). Le thème choisi dans l'app
   (/app/theme-init.js) vaut ici. ── */
:root{
  --fond-verre:#EDE5D5E0;                            /* écart : l'app a #F6F1E6B8 */
  --interligne-serre:1.2; --interligne-texte:1.6;    /* écart : l'app a 1,3 et 1,5 */
  --espace-64:4rem; --espace-96:6rem; --taille-36:2.25rem; --taille-38:2.375rem; --taille-48:3rem;
  --feuille-fond:#FFFDF8; --feuille-encre:#1A1A1A; --feuille-pale:#5E5A55; --feuille-note:#A33A2C;
  --largeur-vitrine:72rem;
  --largeur-lecture:42rem;
  --hauteur-tete:4rem;
  --cible-minimale:2.75rem;
  --duree-survol:.333s;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]){--fond-verre:#201E1BE6}   /* écart : l'app a #282521CD */
}
:root[data-theme="sombre"]{--fond-verre:#201E1BE6}

*{box-sizing:border-box}
html{font-size:clamp(16px,calc(16px + (100vw - 1440px) / 280),20px);scroll-padding-top:calc(var(--hauteur-tete) + var(--espace-16))}
/* le pied reste en bas d'une page courte */
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--fond-page);color:var(--encre-forte);
  font-family:var(--police-interface);font-size:var(--taille-16);line-height:var(--interligne-texte);-webkit-font-smoothing:antialiased}
a{color:var(--accent-encre);text-underline-offset:.2em;transition:text-decoration-thickness var(--duree-survol)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent-encre);outline-offset:2px;border-radius:var(--rayon-4)}
h1,h2,h3{font-family:var(--police-titre);font-weight:var(--graisse-normale);line-height:var(--interligne-serre);margin:0}
p{margin:0}
.lien-evitement{position:absolute;left:var(--espace-16);top:-100%;background:var(--fond-releve);padding:var(--espace-8) var(--espace-16);border-radius:var(--rayon-8);z-index:3}
.lien-evitement:focus{top:var(--espace-8)}

/* ── En-tête ── */
.tete{position:sticky;top:0;z-index:2;background:var(--fond-verre);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--trait-fin)}
.tete-bande{max-width:var(--largeur-vitrine);margin:0 auto;min-height:var(--hauteur-tete);padding:0 var(--espace-24);
  display:flex;align-items:center;gap:var(--espace-24)}
.tete-marque{display:flex;align-items:center;gap:var(--espace-8);color:var(--encre-forte);text-decoration:none;
  font-family:var(--police-titre);font-size:var(--taille-20)}
.tete-marque img{width:2rem;height:2rem}
.tete-nav{display:flex;align-items:center;gap:var(--espace-16);margin-left:auto}
.tete-lien{color:var(--encre-moyenne);text-decoration:none;font-size:var(--taille-14);font-weight:var(--graisse-moyenne);
  min-height:var(--cible-minimale);display:inline-flex;align-items:center;padding:0 var(--espace-12);border-radius:var(--rayon-8);
  transition:color var(--duree-survol),background var(--duree-survol)}
.tete-lien[aria-current="page"],.tete-lien.est-courant{color:var(--encre-forte)}
button.tete-lien{border:0;background:none;font-family:inherit;line-height:inherit;cursor:pointer;gap:var(--espace-4)}
/* thème et langue, serrés l'un contre l'autre */
.tete-reglages{display:flex;align-items:center}

/* Menus déroulants (Ressources, Langue) et bascule du thème : tete.js */
.tete-picto{display:inline-flex;align-items:center;justify-content:center;gap:var(--espace-4);min-width:var(--cible-minimale);
  min-height:var(--cible-minimale);padding:0 var(--espace-8);border:0;border-radius:var(--rayon-8);background:none;
  color:var(--encre-moyenne);font:inherit;cursor:pointer;transition:color var(--duree-survol),background var(--duree-survol)}
.tete-lien:hover,.tete-lien[aria-expanded="true"],.tete-picto:hover,.tete-picto[aria-expanded="true"]{color:var(--encre-forte);background:var(--fond-panneau)}
.tete-picto svg,.tete-lien svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tete-picto .picto-chevron,.tete-lien .picto-chevron{width:.75rem;height:.75rem;stroke-width:2;transition:transform var(--duree-survol)}
.menu-bouton[aria-expanded="true"] .picto-chevron{transform:rotate(180deg)}
/* la bascule montre le thème vers lequel elle mène */
.picto-soleil{display:none}
:root[data-theme="sombre"] .picto-soleil{display:block}
:root[data-theme="sombre"] .picto-lune{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]) .picto-soleil{display:block}
  :root:not([data-theme="clair"]) .picto-lune{display:none}
}
.menu{position:relative}
.menu-liste{position:absolute;top:100%;left:0;z-index:3;min-width:11rem;margin:var(--espace-4) 0 0;padding:var(--espace-8);list-style:none;
  background:var(--fond-releve);border:1px solid var(--trait-fin);border-radius:var(--rayon-12);box-shadow:var(--ombre-flottante)}
.menu-liste.est-droite{left:auto;right:0}
.menu-liste a{display:flex;align-items:center;min-height:var(--cible-minimale);padding:0 var(--espace-12);border-radius:var(--rayon-8);
  color:var(--encre-forte);text-decoration:none;font-size:var(--taille-14);font-weight:var(--graisse-moyenne);
  transition:background var(--duree-survol)}
.menu-liste a:hover{background:var(--fond-panneau)}
.menu-liste a[aria-current]{color:var(--accent-encre)}

/* ── Boutons ── */
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:var(--cible-minimale);
  padding:0 var(--espace-24);border-radius:var(--rayon-pilule);font-size:var(--taille-14);font-weight:var(--graisse-forte);
  text-decoration:none;border:1px solid transparent;transition:background var(--duree-survol),border-color var(--duree-survol);white-space:nowrap;
  font-family:inherit;cursor:pointer}
.bouton-principal{background:var(--accent-aplat);color:var(--accent-sur-aplat)}
.bouton-principal:hover{background:var(--accent-encre)}
.bouton-second{border-color:var(--trait-champ);color:var(--encre-forte)}
.bouton-second:hover{border-color:var(--encre-forte)}

/* ── Contenu ── */
.corps{flex:1 0 auto;width:100%;max-width:var(--largeur-vitrine);margin:0 auto;padding:0 var(--espace-24)}
.surtitre{font-size:var(--taille-12);font-weight:var(--graisse-forte);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-encre)}
.chapeau{font-size:var(--taille-20);color:var(--encre-moyenne)}
.mention{font-size:var(--taille-14);color:var(--encre-pale)}
.actions{display:flex;flex-wrap:wrap;gap:var(--espace-12);align-items:center}

/* Ouverture : le titre à gauche, l'atelier d'Écrire à droite (une capture découpée) */
.une{display:grid;gap:var(--espace-48);align-items:center;padding:var(--espace-48) 0 var(--espace-64)}
.une-texte{display:flex;flex-direction:column;gap:var(--espace-24)}
.une-titre{font-size:var(--taille-38)}

/* Colonnes : les engagements, les trois points des producteurs, À propos (est-page) ; filet au-dessus, picto avant le titre */
.colonnes{list-style:none;margin:0;padding:0;display:grid;gap:var(--espace-32) var(--espace-24)}
.colonne{display:flex;flex-direction:column;gap:var(--espace-8);padding-top:var(--espace-16);border-top:1px solid var(--trait-champ)}
.colonne :is(h2,h3){display:flex;align-items:center;gap:var(--espace-8);font-family:var(--police-interface);font-size:var(--taille-16);font-weight:var(--graisse-forte)}
.colonne p{color:var(--encre-moyenne)}
.colonne-picto{flex:none;width:var(--espace-24);height:var(--espace-24);fill:none;stroke:var(--accent-encre);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.colonnes.est-pile{grid-template-columns:none;grid-auto-flow:row}
.colonnes.est-page{margin-bottom:var(--espace-64)}

/* Une donnée, un seul endroit : un arbre, les éléments en haut, le scénario au centre, ce qui en découle en bas ;
   arbre.js trace les liens en SVG derrière les nœuds */
.arbre{position:relative;display:flex;flex-direction:column;gap:round(nearest,5.25rem,2px);padding:var(--espace-16) 0}
.arbre-rang{list-style:none;margin:0;padding:0;position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--espace-12) var(--espace-16)}
.arbre-noeud{padding:var(--espace-8) var(--espace-16);background:var(--fond-releve);border:1px solid var(--trait-champ);
  border-radius:var(--rayon-8);font-size:var(--taille-14);font-weight:var(--graisse-moyenne);transition:border-color var(--duree-survol)}
.arbre-noeud:hover{border-color:var(--accent-encre)}
.arbre-noeud.est-central{padding:var(--espace-12) var(--espace-32);background:var(--accent-aplat);color:var(--accent-sur-aplat);
  border-color:var(--accent-aplat);font-family:var(--police-scenario);font-size:var(--taille-16);font-weight:700;text-transform:uppercase}
.arbre-liens{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.arbre-liens path{fill:none;stroke:var(--accent-aplat);stroke-width:1.5;opacity:.55;
  transition:opacity .8s ease-in-out,stroke .8s ease-in-out,stroke-width .8s ease-in-out}
.arbre-liens path.est-direct{stroke:var(--encre-pale);stroke-dasharray:3 5;opacity:.5}
.arbre.est-survol .arbre-liens path{opacity:.15}
.arbre.est-survol .arbre-liens path.est-lie{opacity:1;stroke:var(--accent-encre);stroke-width:2}


/* Sections */
.section{padding:var(--espace-48) 0;border-top:1px solid var(--trait-fin);display:flex;flex-direction:column;gap:var(--espace-32)}
.section-tete{display:flex;flex-direction:column;gap:var(--espace-12)}
.section-titre{font-size:var(--taille-36)}

/* Les questions de la FAQ */
.question{background:var(--fond-panneau);border:1px solid var(--trait-fin);border-radius:var(--rayon-12);padding:var(--espace-24)}

/* Carrousels : Splide (lib/, carrousel.js). Une image en fondu et ses vignettes (accueil, Galerie), des captures
   en fondu qui défilent seules (producteurs). Sans script (.splide sans .is-initialized) : défilement horizontal
   aimanté, sans vignettes. */
.splide{position:relative}
.splide__track{position:relative;z-index:0;overflow:hidden}
.splide__list{list-style:none;margin:0;padding:0;display:flex;height:100%;backface-visibility:hidden}
.splide__slide{flex-shrink:0;position:relative;margin:0}
.splide__track--fade > .splide__list > .splide__slide{margin:0 !important;opacity:0;z-index:0}
.splide__track--fade > .splide__list > .splide__slide.is-active{opacity:1;z-index:1}
.splide__track--draggable{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.splide__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
.splide:not(.is-initialized) .splide__track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.splide:not(.is-initialized) .splide__track::-webkit-scrollbar{display:none}
.splide:not(.is-initialized) .splide__list{gap:var(--espace-24)}
.splide:not(.is-initialized) .splide__slide{flex:0 0 100%;scroll-snap-align:start}
.splide:not(.is-initialized) .splide__toggle,.carrousel-vignettes:not(.is-initialized){display:none}
.splide__pagination{list-style:none;display:flex;justify-content:center;margin:var(--espace-12) 0 0;padding:0}
.splide__pagination__page{display:flex;align-items:center;justify-content:center;width:var(--cible-minimale);height:var(--cible-minimale);
  padding:0;border:0;background:none;cursor:pointer}
.splide__pagination__page::before{content:"";width:var(--espace-8);height:var(--espace-8);border-radius:var(--rayon-pilule);
  background:var(--trait-champ);transition:width var(--duree-survol),background var(--duree-survol)}
.splide__pagination__page:hover::before{background:var(--encre-moyenne)}
.splide__pagination__page.is-active::before{width:var(--espace-24);background:var(--accent-aplat)}
.splide__toggle{position:absolute;left:0;bottom:0;display:flex;align-items:center;justify-content:center;width:var(--cible-minimale);
  height:var(--cible-minimale);padding:0;border:0;background:none;color:var(--encre-moyenne);cursor:pointer}
.splide__toggle:hover{color:var(--accent-encre)}
.splide__toggle svg{width:var(--espace-16);height:var(--espace-16);fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.splide__toggle__pause{fill:none}
.splide__toggle__pause,.splide__toggle.is-active .splide__toggle__play{display:none}
.splide__toggle.is-active .splide__toggle__pause{display:block}
/* légende centrée sous l'image ; vignettes : celle de l'image montrée ressort */
.etape{margin:0;display:flex;flex-direction:column;gap:var(--espace-12)}
.etape-legende{text-align:center;color:var(--encre-moyenne)}
.etape-legende strong{color:var(--encre-forte);font-weight:var(--graisse-forte)}
.carrousel-vignettes{margin-top:var(--espace-12)}
.carrousel-vignettes:not(.is-overflow) .splide__list{justify-content:center}
.vignette{display:flex;flex-direction:column;gap:var(--espace-4);cursor:pointer;opacity:.6;transition:opacity var(--duree-survol)}
.vignette:hover,.vignette.is-active{opacity:1}
.vignette .apercu{border-width:2px;box-shadow:none}
.vignette.is-active .apercu{border-color:var(--accent-aplat)}
.vignette .apercu img{aspect-ratio:16 / 10;object-fit:cover;object-position:top}
.vignette span{font-size:var(--taille-12);text-align:center;color:var(--encre-moyenne)}
.vignette:focus-visible{outline:2px solid var(--accent-encre);outline-offset:2px;border-radius:var(--rayon-8)}
/* producteurs : les trois points à gauche, les captures en fondu à droite */
.producteurs{display:grid;gap:var(--espace-32);align-items:center}
/* Les captures de l'app (outils/captures.py --exporter) : l'ouverture et les étapes de l'accueil (celle de l'écran du
   visiteur, <picture>), les producteurs, la Galerie. Deux images par capture, une par thème : celle du thème
   affiché se voit, l'autre n'est pas chargée (loading="lazy"). */
.apercu{margin:0;display:block;border:1px solid var(--trait-fin);border-radius:var(--rayon-8);
  overflow:hidden;background:var(--fond-panneau);box-shadow:var(--ombre-flottante)}
.apercu picture,.apercu img{display:block;width:100%;height:auto}
.etape .apercu img{aspect-ratio:16 / 10;object-fit:cover;object-position:top}
.apercu .est-sombre{display:none}
:root[data-theme="sombre"] .apercu .est-clair{display:none}
:root[data-theme="sombre"] .apercu .est-sombre{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]) .apercu .est-clair{display:none}
  :root:not([data-theme="clair"]) .apercu .est-sombre{display:block}
}
/* Galerie : un carrousel à vignettes par appareil, le sélecteur (galerie.js) n'en montre qu'un ; la capture
   entière, sans recadrage, à 75 % de la hauteur de l'écran au plus */
.galerie-filtre{display:flex;gap:var(--espace-4);margin:0 0 var(--espace-16)}
.galerie-filtre[hidden]{display:none}
.galerie-filtre .tete-picto[aria-pressed="true"]{color:var(--accent-encre);background:var(--accent-voile)}
.galerie{display:flex;flex-direction:column;gap:var(--espace-48);margin-bottom:var(--espace-64)}
.galerie .etape .apercu{width:fit-content;max-width:100%;margin:0 auto}
.galerie .etape .apercu img{aspect-ratio:auto;width:auto;max-width:100%;max-height:60vh}

.appel{margin:var(--espace-48) 0 var(--espace-64);padding:var(--espace-48) var(--espace-32);background:var(--fond-panneau);
  border:1px solid var(--trait-fin);border-radius:var(--rayon-12);display:flex;flex-direction:column;gap:var(--espace-24);align-items:flex-start}
.appel h2{font-size:var(--taille-36)}
.appel p{color:var(--encre-moyenne);max-width:var(--largeur-lecture)}
.appel .places{color:var(--accent-encre);font-weight:var(--graisse-forte)}
/* une seule ligne, sans action : une question, une idée */
.appel.est-court{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:var(--espace-8) var(--espace-16);margin-top:var(--espace-48);
  padding:var(--espace-24) 0 0;background:none;border:0;border-top:1px solid var(--trait-fin);border-radius:0}
.appel.est-court h2{font-size:var(--taille-24)}
.appel.est-court p{max-width:none}

/* Liste d'attente (attente.js) : le formulaire de l'accueil */
.attente{display:flex;flex-direction:column;gap:var(--espace-16);width:100%;max-width:var(--largeur-lecture)}
.champ{display:flex;flex-direction:column;gap:var(--espace-4)}
.champ input,.champ textarea{font:inherit;color:var(--encre-forte);background:var(--fond-releve);
  border:1px solid var(--trait-champ);border-radius:var(--rayon-8);padding:var(--espace-12);min-height:var(--cible-minimale)}
.champ textarea{resize:vertical}
.champ input:focus-visible,.champ textarea:focus-visible{border-color:var(--accent-encre)}
.etiquette{font-size:var(--taille-14);font-weight:var(--graisse-forte);color:var(--encre-moyenne)}
.piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.attente-etat{color:var(--encre-forte);font-weight:var(--graisse-moyenne);min-height:1.6em}
[hidden]{display:none !important}

/* Tarification, À propos, Support, FAQ */
.page-tete{padding:var(--espace-48) 0 var(--espace-32);display:flex;flex-direction:column;gap:var(--espace-12)}
.page-tete h1{font-size:var(--taille-38)}
.offres{display:grid;gap:var(--espace-24);align-items:start}
.offre{background:var(--fond-releve);border:1px solid var(--trait-fin);border-radius:var(--rayon-12);padding:var(--espace-32);
  display:flex;flex-direction:column;gap:var(--espace-16);box-shadow:var(--ombre-flottante)}
.offre-nom{font-size:var(--taille-14);font-weight:var(--graisse-forte);text-transform:uppercase;letter-spacing:.08em;color:var(--accent-encre)}
/* en police d'interface : les chiffres de Georgia descendent, son zéro se lit comme un o */
.offre-prix{font-size:var(--taille-48);line-height:1}
.liste-coches{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--espace-8)}
.liste-coches li{padding-left:var(--espace-24);position:relative}
.liste-coches li::before{content:"";position:absolute;left:var(--espace-4);top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent-aplat)}
.principes{display:flex;flex-direction:column;gap:var(--espace-16)}
.principes h2{font-size:var(--taille-28)}
.question p{color:var(--encre-moyenne)}
.questions{display:flex;flex-direction:column;gap:var(--espace-12)}
.question{padding-block:0}
.question summary{display:flex;align-items:center;justify-content:space-between;gap:var(--espace-16);min-height:var(--cible-minimale);
  padding:var(--espace-12) 0;font-family:var(--police-titre);font-size:var(--taille-20);cursor:pointer;list-style:none}
.question summary::-webkit-details-marker{display:none}
.question summary::after{content:"+";font-family:var(--police-interface);color:var(--accent-encre)}
.question[open] summary::after{content:"−"}
.question p{padding-bottom:var(--espace-24)}

/* Support : une frise, un trait vertical au centre, les solutions alternées à gauche puis à droite, du plus rapide
   au plus direct ; au téléphone, le trait passe à gauche */
.frise{list-style:none;margin:0 0 var(--espace-96);padding:var(--espace-8) 0;position:relative;display:flex;flex-direction:column;gap:var(--espace-32)}
.frise::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--trait-champ)}
.frise-etape{position:relative;width:calc(50% - var(--espace-32));display:flex;flex-direction:column;gap:var(--espace-8)}
.frise-etape:nth-child(odd){align-self:flex-start;text-align:right}
.frise-etape:nth-child(even){align-self:flex-end}
.frise-etape::before{content:"";position:absolute;top:var(--espace-8);width:var(--espace-12);height:var(--espace-12);
  border-radius:var(--rayon-pilule);background:var(--accent-aplat);box-shadow:0 0 0 4px var(--fond-page)}
.frise-etape:nth-child(odd)::before{right:calc(-1 * var(--espace-32) - var(--espace-6))}
.frise-etape:nth-child(even)::before{left:calc(-1 * var(--espace-32) - var(--espace-6))}
.frise-etape h2{font-size:var(--taille-24)}
.frise-etape p{color:var(--encre-moyenne)}
/* picto de l'app cité dans un texte (le bouton « Feedback ») */
.picto-texte{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;fill:none;stroke:var(--encre-forte);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Roadmap : une feuille de dépouillement, une ligne par fonction, une colonne par étape */
.route-bloc{display:flex;flex-direction:column;gap:var(--espace-16)}
.route-legende,.route-cadre{border:1px solid var(--trait-fin);background:var(--fond-releve)}
.route-legende{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.route-legende > div{display:flex;flex-direction:column;gap:var(--espace-4);padding:var(--espace-16) var(--espace-24);border-left:1px solid var(--trait-fin)}
.route-legende > div:first-child{border-left:0}
.route-etape{font-size:var(--taille-24)}
.route-etat{font-size:var(--taille-14);color:var(--encre-moyenne)}
.route-compte{font-family:var(--police-scenario);font-size:var(--taille-14);color:var(--encre-pale)}
.route-cadre{overflow-x:auto}
.route{border-collapse:collapse;width:100%}
.route th,.route td{border-top:1px solid var(--trait-fin);padding:var(--espace-8) var(--espace-12);text-align:left;vertical-align:middle}
.route thead th{border-top:0;background:var(--fond-panneau);font-size:var(--taille-12);font-weight:var(--graisse-forte);
  letter-spacing:.08em;text-transform:uppercase;color:var(--encre-moyenne)}
.route-groupe th{background:var(--fond-panneau);font-family:var(--police-titre);font-weight:var(--graisse-normale);font-size:var(--taille-20)}
.route-num{width:3rem;font-family:var(--police-scenario);font-size:var(--taille-14);color:var(--encre-pale);font-variant-numeric:tabular-nums}
.route .route-col{width:7rem;text-align:center;border-left:1px solid var(--trait-fin)}
.route-case{display:inline-block;width:.875rem;height:.875rem;background:var(--accent-voile);vertical-align:middle}
.route-case.est-arrive{background:var(--accent-aplat)}
.route-cle{display:flex;flex-wrap:wrap;align-items:center;gap:var(--espace-8);font-size:var(--taille-14);color:var(--encre-pale)}
.route-cle .route-case:not(:first-child){margin-left:var(--espace-16)}

/* 404 */
.page-absente{min-height:60vh;display:flex;flex-direction:column;justify-content:center;gap:var(--espace-16);padding:var(--espace-64) 0}

/* ── Pied ── */
.pied{border-top:1px solid var(--trait-fin);background:var(--fond-panneau)}
.pied-bande{max-width:var(--largeur-vitrine);margin:0 auto;padding:var(--espace-32) var(--espace-24);
  display:flex;flex-wrap:wrap;gap:var(--espace-12) var(--espace-24);align-items:center;font-size:var(--taille-14);color:var(--encre-pale)}
.pied-bande nav{display:flex;flex-wrap:wrap;gap:var(--espace-8) var(--espace-24)}
.pied-bande a{color:var(--encre-moyenne)}
.pied-droits{flex-basis:100%;margin:0;text-align:center}

/* ── Paliers ── */
@media (min-width:640px){
  .colonnes{grid-template-columns:repeat(2,1fr)}
  .offres{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .colonnes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
  .une{grid-template-columns:2fr 3fr}
  .carrousel{width:70%;margin-inline:auto}
  .producteurs{grid-template-columns:2fr 3fr}
}
/* En-tête complet : environ 1 020 px en français. Sous le palier Portable, Ressources, Tarification et
   Documentation passent au pied (comme au téléphone) ; le reste tient dès 640 px. */
@media (max-width:1439px){
  .tete-nav{gap:var(--espace-8)}
}
@media (max-width:1023px){
  .etape .apercu img{aspect-ratio:4 / 3}
  .tete-nav .est-large{display:none}
  .tete-nav .bouton{padding:0 var(--espace-16)}
}
@media (max-width:639px){
  .tete-bande{padding:0 var(--espace-16);gap:var(--espace-12)}
  .tete-nav{gap:var(--espace-4)}
  .tete-nav .bouton-principal,.tete-marque span{display:none}
  .corps,.pied-bande{padding-left:var(--espace-16);padding-right:var(--espace-16)}
  .une{padding:var(--espace-32) 0 var(--espace-48)}
  /* arbre : les rangées passent à la ligne, le maillage deviendrait illisible ; un trait vertical les relie */
  .arbre{gap:var(--espace-32)}
  .arbre-liens{display:none}
  .arbre-rang:not(:last-child)::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:var(--espace-32);
    background:var(--accent-aplat)}
  .arbre-noeud{padding:var(--espace-6) var(--espace-12)}
  .une-titre,.page-tete h1{font-size:var(--taille-36)}
  .section-titre,.appel h2{font-size:var(--taille-28)}
  .chapeau{font-size:var(--taille-16)}
  /* au téléphone, on change d'image au doigt ou par les vignettes */
  .etape .apercu img{aspect-ratio:3 / 4}
  .appel{padding:var(--espace-32) var(--espace-24)}
  .frise::before{left:var(--espace-6)}
  .frise-etape,.frise-etape:nth-child(n){width:auto;align-self:stretch;text-align:left;padding-left:var(--espace-32)}
  .frise-etape:nth-child(n)::before{left:0;right:auto}
  .route-legende{grid-template-columns:1fr}
  .route-legende > div{border-left:0;border-top:1px solid var(--trait-fin);padding:var(--espace-12) var(--espace-16)}
  .route-legende > div:first-child{border-top:0}
  .route th,.route td{padding:var(--espace-8)}
  .route .route-col{width:3.5rem;font-size:var(--taille-12)}
  .route-num{width:2.25rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tete{background:var(--fond-page)}}
@media (prefers-reduced-transparency:reduce){.tete{background:var(--fond-page);backdrop-filter:none}}