/* Les pages de texte de VELO : meme maison que la carte, autre usage.
   La carte se lit d'un coup d'oeil ; un texte de loi se lit ligne a ligne. */
/* UNE PAGE DE TEXTE N'EST PAS LA CARTE — corrige le 25/08/2026.
 *
 * carte.css pose « html, body { height: 100% } », « body { display: flex } » et
 * « main { flex: 1 } » : c'est le montage de la CARTE, ou le main doit remplir
 * exactement la fenetre. Applique tel quel a une page de texte, le main restait
 * bloque a la hauteur de l'ecran, le contenu debordait par-dessous, et le pied
 * de page — simple element de flex place apres le main — se posait au bas de la
 * FENETRE, c'est-a-dire en plein milieu du texte des qu'on faisait defiler.
 *
 * Une bande persistait en milieu de page : c'etait le pied de page. Il etait
 * la depuis la premiere page de texte, et le commentaire de
 * carte.css disait deja « les pages de texte doivent defiler » — je n'avais
 * traite que le debordement, pas la hauteur.
 *
 * On rend donc a ces pages une mise en page ordinaire : un bloc qui grandit
 * avec son contenu, un pied de page apres le contenu, et rien d'autre. */
body.texte {
  background: var(--surface-2);
  display: block;
  height: auto;
  min-height: 100%;
}
body.texte main.page { flex: none; min-height: 0; position: static; }
main.page { max-width: 44rem; margin: 0 auto; padding: 2rem 1.1rem 4rem; }

.page h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1.15;
           margin: 0 0 .6rem; letter-spacing: -.015em; }
.page .chapeau { font-size: 1.05rem; line-height: 1.6; color: var(--texte-doux);
                 margin: 0 0 1.6rem; }
.page h2 { font-size: 1.25rem; margin: 2.4rem 0 .3rem; }
.page h2 + p { margin-top: 0; color: var(--texte-doux); }
.page p, .page li { line-height: 1.65; }
.page a { color: var(--accent); }

/* Chaque regle est une fiche : ce qu'il faut faire, l'article qui le dit, et
   ce que ça coute. L'article n'est pas de la decoration — c'est ce qui permet
   de verifier, et de tenir bon devant quelqu'un qui affirme le contraire. */
.regles { list-style: none; margin: 1.2rem 0 0; padding: 0;
          display: grid; gap: .8rem; }
.regle { background: var(--surface); border-radius: var(--rayon);
         box-shadow: var(--ombre-1); padding: 1rem 1.1rem; }
.regle h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.regle p { margin: 0; font-size: .95rem; }
.regle .bas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem;
              align-items: center; font-size: .8rem; }
.article { padding: .2rem .55rem; border-radius: 999px; background: var(--surface-2);
           border: 1px solid var(--bord); color: var(--texte-doux);
           text-decoration: none; }
.article:hover { background: var(--accent-clair); }
.amende { padding: .2rem .55rem; border-radius: 999px; font-weight: 600;
          background: #fbe3e3; color: #8c1c1c; }
.amende.douce { background: #fdf0dd; color: #7a4b12; }
.amende.info { background: var(--accent-clair); color: #14512f; }

/* Une marche a suivre, numerotee. Le numero compte ici : « partir d'ici » puis
   « y aller » n'a de sens que dans cet ordre, et une liste a puces laisserait
   croire qu'on peut commencer par l'un ou par l'autre. */
.etapes { margin: 1rem 0 1.2rem; padding-left: 1.4rem; display: grid; gap: .5rem; }
.etapes li { padding-left: .2rem; }

.encadre { background: var(--surface); border-left: 5px solid var(--accent);
           border-radius: var(--rayon); padding: 1rem 1.1rem; margin: 1.6rem 0; }
.encadre p:last-child { margin-bottom: 0; }
.sources { font-size: .85rem; color: var(--texte-doux); }
.sources li { margin-bottom: .35rem; }
.date { font-size: .8rem; color: var(--texte-doux); margin-top: 2.5rem; }

/* L'appel vers TousEnsembles. Il arrive APRES le service rendu — on ne demande
   rien a quelqu'un a qui l'on n'a pas encore servi. */
.appel { background: var(--surface); border: 1px solid var(--bord);
         border-radius: var(--rayon); box-shadow: var(--ombre-1);
         padding: 1.6rem 1.4rem; margin: 3rem 0 0; }
.appel h2 { margin-top: 0; }
.appel-deux { display: grid; gap: 1.4rem; margin-top: 1rem;
              grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.appel h3 { font-size: 1rem; margin: 0 0 .4rem; color: var(--accent); }
.appel ul { margin: 0; padding-left: 1.1rem; }
.appel li { margin-bottom: .5rem; font-size: .95rem; line-height: 1.5; }
.appel-bouton { margin: 1.4rem 0 0; }
/* LE BOUTON ETAIT INVISIBLE — trouve le 07/09/2026.
 *
 * « .page a { color: var(--accent) } », plus haut dans cette feuille, vaut
 * une classe ET un element : il l'emporte sur « .bouton-te », qui ne vaut
 * qu'une classe. La couleur blanche ecrite ci-dessous n'a donc JAMAIS pris.
 * Le bouton « Decouvrir TousEnsembles » de aime.html etait vert sur vert
 * depuis sa creation — c'est-a-dire que l'appel vers TE, en bas de chaque
 * satellite, ne se lisait pas.
 *
 * On monte la specificite au lieu de deplacer la regle : la reordonner
 * marcherait aujourd'hui et casserait au prochain ajout, la specificite tient
 * quel que soit l'ordre. */
.bouton-te { display: inline-block; padding: .85rem 1.3rem; border-radius: 999px;
             background: var(--accent); text-decoration: none;
             font-weight: 600; }
.page a.bouton-te,
.page a.bouton-te:visited { color: var(--accent-texte); }
.page a.bouton-te:hover { filter: brightness(1.06); color: var(--accent-texte); }
.page a.bouton-te:focus-visible { outline: 3px solid var(--accent);
             outline-offset: 3px; }

/* L'adresse revelee a la demande (cf. ecrire.js). Monospace et selectionnable :
   elle sert a etre recopiee a la main dans une autre messagerie. */
.adresse-claire { display: inline-block; font-family: ui-monospace, monospace;
  padding: .25rem .6rem; border-radius: var(--rayon); background: var(--surface-2);
  user-select: all; }

/* Le second lien de l'appel : present, mais jamais aussi fort que le bouton
   TousEnsembles — le centre reste le centre. */
.appel-second { display: inline-block; margin-left: .9rem; font-size: .92rem; }

/* ------------------------------------------------ la coupure de presse --
 *
 * Ajoute le 07/09/2026 pour decouvrir.html. Une vignette de journal qu'on
 * agrandit dans une fenetre.
 *
 * POURQUOI UN <dialog> ET PAS UNE DIV. Il apporte gratuitement ce qu'une
 * fenetre bricolee oblige a reecrire, et rate presque toujours : Echap ferme,
 * le focus reste pris dedans, et il revient sur le bouton d'origine a la
 * fermeture. Trois exigences d'accessibilite sans une ligne de JavaScript.
 *
 * POURQUOI LA VIGNETTE EST UN <button>. Une image cliquable ne se prend pas
 * au clavier. */

.coupure { margin: 1.2rem 0 0; display: flex; flex-direction: column;
  gap: .8rem; align-items: flex-start; }

.coupure-ouvrir { display: block; padding: .5rem; border: 1px solid var(--bord);
  border-radius: var(--rayon); background: var(--surface); cursor: zoom-in;
  font: inherit; color: var(--accent);
  transition: border-color .15s ease, box-shadow .15s ease; }
.coupure-ouvrir:hover { border-color: var(--accent);
  box-shadow: 0 2px 10px var(--accent-clair); }
.coupure-ouvrir:focus-visible { outline: 3px solid var(--accent);
  outline-offset: 3px; }
.coupure-ouvrir img { display: block; width: 18rem; max-width: 100%;
  height: auto; border-radius: calc(var(--rayon) - 2px); }

/* Le mot est ecrit, pas suggere par une loupe : un pictogramme seul n'annonce
   pas ce qu'il declenche, et la maison n'utilise pas d'emoji. */
.coupure-mention { display: block; margin-top: .5rem; font-size: .82rem;
  line-height: 1.4; text-align: center; text-decoration: underline; }

.coupure figcaption { font-size: .9rem; line-height: 1.6;
  color: var(--texte-doux); }

.coupure-texte { margin-top: 1.2rem; }
.coupure-texte > summary { cursor: pointer; font-size: .92rem;
  color: var(--accent); padding: .35rem 0; }
.coupure-texte > summary:focus-visible { outline: 3px solid var(--accent);
  outline-offset: 2px; border-radius: 4px; }
.coupure-texte blockquote { margin: .8rem 0 0; padding: 1rem 1.1rem;
  border-left: 3px solid var(--bord); background: var(--surface);
  border-radius: 0 var(--rayon) var(--rayon) 0; color: var(--texte-doux); }
.coupure-texte blockquote h3 { font-size: 1rem; margin: 1.3rem 0 .4rem;
  color: var(--texte); }
.coupure-texte blockquote h3:first-child { margin-top: 0; }

.coupure-modale { width: min(70rem, 94vw); max-width: 94vw; max-height: 92vh;
  /* Le centrage d'un <dialog> modal repose sur le « margin: auto » de la
     feuille du navigateur ; on le redonne explicitement, une remise a zero
     des marges ailleurs le collerait en haut a gauche. */
  margin: auto; padding: 0; border: 0; border-radius: var(--rayon);
  background: var(--surface); color: var(--texte); overflow: auto; }

/* Le voile est declare ICI, sur le pseudo-element lui-meme : ::backdrop vit
   dans la couche superieure, ou les navigateurs anterieurs a 2023 ne font
   descendre aucune propriete heritee. Une variable declaree ailleurs y
   arriverait vide, c'est-a-dire sans voile du tout. */
.coupure-modale::backdrop { background: rgba(16, 18, 16, .78); }

.coupure-barre { position: sticky; top: 0; z-index: 1; display: flex;
  gap: 1rem; align-items: center; justify-content: space-between;
  padding: .7rem .9rem; background: var(--surface);
  border-bottom: 1px solid var(--bord); }
.coupure-titre { margin: 0; font-size: .95rem; font-weight: 600;
  line-height: 1.4; color: var(--texte); }
.coupure-grande { display: block; width: 100%; height: auto; }
.coupure-pied { margin: 0; padding: .7rem .9rem 1rem; font-size: .85rem;
  line-height: 1.6; color: var(--texte-doux); }

@media (prefers-reduced-motion: reduce) {
  .coupure-ouvrir { transition: none; }
}
@media (max-width: 40rem) {
  .coupure-ouvrir img { width: 100%; }
  .coupure-modale { width: 96vw; max-width: 96vw; }
}

/* ------------------------------------------------- le mode d'emploi -- */
/* LA PAGE QUI ACCOMPAGNE L'EDITEUR — 11/09/2026.
 *
 * Emmanuel : « ca manque de vie, peux-tu faire plus didactique, avec des
 * images en mode copie d'ecran pour illustrer ? » Un mode d'emploi sans image
 * demande a son lecteur de traduire des mots en boutons, seul, devant un
 * outil qu'il decouvre.
 *
 * Chaque etape est donc une FICHE : le texte a gauche, la capture a droite,
 * et un numero qui dit ou l'on en est. Sous 720 px, la capture passe sous le
 * texte — jamais a cote, une colonne de 300 px ne se lit pas.
 *
 * LES CAPTURES SONT VRAIES, prises dans l'editeur en service, et elles font
 * 400 px au plus grand cote en AVIF : la regle de la maison, et ca tombe
 * bien, c'est exactement la largeur ou un panneau de 300 px se lit. */
.etapes { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.4rem; }

.etape {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-1);
  padding: 1.1rem 1.2rem;
  display: grid;
  gap: 1rem 1.3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .etape--figure { grid-template-columns: 1fr auto; align-items: start; }
  .etape--figure .etape-vue { grid-row: span 2; }
}

.etape-titre { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .4rem; }
.etape-num {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-texte);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 .92rem/1 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.etape h3 { margin: 0; font-size: 1.08rem; }
.etape p, .etape li { margin: 0 0 .55rem; line-height: 1.6; }
.etape p:last-child, .etape li:last-child { margin-bottom: 0; }
.etape ul, .etape ol { margin: 0 0 .55rem; padding-left: 1.15rem; }

.etape-vue { margin: 0; }
.etape-vue img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: var(--surface-2);
}
.etape-vue figcaption {
  margin-top: .4rem; font-size: .78rem; line-height: 1.4; color: var(--texte-doux);
  max-width: 26ch;
}

/* Ce qu'on ne peut pas faire : dit une fois, sans detour, et separe du reste
   pour qu'on le trouve en diagonale. */
.limites { border-left: 4px solid var(--velo-departementale); padding-left: 1rem; }
.limites li { margin-bottom: .45rem; }

/* Le mot qu'on lit sur un bouton de l'editeur. Il ne ressemble pas a du code :
   c'est une etiquette, et elle se retrouve a l'ecran telle quelle. */
.bouton-nom {
  display: inline-block; padding: .06em .45em; border-radius: .35rem;
  background: var(--accent-clair); color: var(--accent);
  font-weight: 600; white-space: nowrap;
}

/* LES LEGENDES DE L'AIDE — 17/09/2026. Panneaux de danger et epingles de
   service : le symbole a gauche, ce qu'il veut dire a droite. Deux colonnes
   quand la place le permet, une seule sur un telephone. */
.legende { list-style: none; margin: 1rem 0 1.2rem; padding: 0;
           display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
           gap: .7rem 1.4rem; }
.legende li { display: flex; align-items: center; gap: .7rem; }
.legende img { flex: none; }
.legende b { display: block; }
.legende span { font-size: .95rem; line-height: 1.4; }
.source { font-size: .88rem; color: var(--gris, #5b6b66); }

/* LES CLES DE COULEUR DANS L'AIDE — 18/09/2026. Emmanuel : « les couleurs dans
   l'aide ne sont plus a jour ». Elles le sont desormais, et chaque regle porte
   le trait lui-meme : une couleur se montre, elle ne se decrit pas. */
.regle h3 .cle { display: inline-block; vertical-align: middle; margin-right: .45rem; }
.regle p .cle { display: inline-block; vertical-align: middle; margin: 0 .3rem; }

/* LES TABLEAUX D'ETIQUETTES — 18/09/2026, page « Enrichir la carte ». Ils
   debordent sur un telephone : ils defilent dans leur propre boite, la page
   ne bouge pas. */
.tableau { overflow-x: auto; margin: 1.2rem 0; }
.tableau table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .95rem; }
.tableau caption { text-align: left; font-weight: 600; padding-bottom: .5rem; }
.tableau th, .tableau td { text-align: left; vertical-align: top;
                           padding: .5rem .7rem; border-bottom: 1px solid var(--trait, #ddd8c6); }
.tableau th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.tableau code { white-space: nowrap; }