/* Pages publiques, direction A3 : bandeau d'ouverture, compteur, signature en un instant, texte de la tribune, auteurs,
   signataires, notes, pages éditoriales (démarche, fondateurs, signataires), remerciement et carte « J'ai signé ».
   Surfaces blanches cernées d'un filet bleu pâle sur le fond bleu très clair, angles arrondis, aucune ombre portée. */

/* Bandeau d'ouverture */
.page-tribune { padding: 0 0 var(--e-4); }
.ouverture { border-bottom: 1px solid var(--filet); }
.ouverture-interieur { max-width: var(--largeur-large); margin: 0 auto; padding: var(--e-8) var(--e-5) var(--e-10); display: grid; gap: var(--e-8); align-items: start; }
@media (min-width: 64rem) { .ouverture-interieur { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--e-12); padding-block: var(--e-12) var(--e-16); } }
.ouverture h1 { font-size: clamp(2.15rem, 1.35rem + 3.2vw, 3.6rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 var(--e-8); }
.ouverture-actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: var(--e-6) 0 0; }
@media (max-width: 30rem) { .ouverture-actions .bouton { flex: 1 1 auto; } .ouverture-actions .bouton-grand { flex-basis: 100%; } }

/* Message central : la phrase qui fonde la voix citoyenne (cadrage du 25/10/2026), en tête du bandeau puis de la consultation */
.message-central { max-width: 38rem; margin: 0 0 var(--e-8); padding: var(--e-1) 0 var(--e-1) var(--e-5); border-left: 4px solid var(--accent); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.42; letter-spacing: -0.005em; color: var(--encre); text-wrap: pretty; }
.page-formulaire .message-central { margin-bottom: var(--e-6); }

/* Chaîne du message : trois maillons reliés par une flèche, en colonne sur un téléphone, en ligne à partir de 64 rem.
   Bande blanche pleine largeur (voir « Bandes »), maillons sur le fond bleu très clair. */
.chaine { padding: var(--e-12) var(--e-5) var(--e-16); }
.chaine-interieur { max-width: var(--largeur-large); margin: 0 auto; }
.chaine h2 { margin: 0 0 var(--e-8); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); letter-spacing: -0.015em; }
.chaine-liste { --ecart-chaine: var(--e-10); list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ecart-chaine); }
.maillon { position: relative; padding: var(--e-6); border: 2px solid var(--filet); border-radius: var(--rayon-grand); background: var(--fond); }
.maillon-rang { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--e-4); border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.maillon-titre { margin: 0 0 var(--e-2); font-size: 1.4rem; line-height: 1.25; }
.maillon-texte { margin: 0; font-size: 1.06rem; line-height: 1.55; color: var(--gris); }
/* Flèche : dans l'écart sous le maillon (colonne), puis dans l'écart à sa droite (ligne) */
.fleche { position: absolute; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fleche-bas { left: calc(var(--e-6) + 1.375rem - 12px); top: calc(100% + 2px + (var(--ecart-chaine) - 24px) / 2); width: 24px; height: 24px; }
.fleche-droite { display: none; }
@media (min-width: 64rem) {
  .chaine-liste { --ecart-chaine: var(--e-12); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chaine:not(.chaine-resserree) .fleche-bas { display: none; }
  .chaine:not(.chaine-resserree) .fleche-droite { display: block; left: calc(100% + 2px + (var(--ecart-chaine) - 32px) / 2); top: calc(var(--e-6) + 1.375rem - 12px); width: 32px; height: 24px; }
}
/* Version resserrée de la consultation : une seule carte, les maillons en chronologie verticale dans la colonne */
.chaine-resserree { margin: 0 0 var(--e-8); padding: var(--e-6) var(--e-5) var(--e-2); border: 2px solid var(--filet); border-radius: var(--rayon-grand); background: var(--surface); }
@media (min-width: 30rem) { .chaine-resserree { padding: var(--e-6) var(--e-8) var(--e-2); } }
.chaine-resserree h2 { margin: 0 0 var(--e-5); font-size: 1.3rem; }
.chaine-resserree .chaine-liste { --ecart-chaine: 0px; grid-template-columns: minmax(0, 1fr); }
.chaine-resserree .maillon { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--e-4); padding: 0 0 var(--e-5); border: 0; border-radius: 0; background: none; }
.chaine-resserree .maillon-rang { grid-row: span 2; width: 2.25rem; height: 2.25rem; margin: 0; font-size: 1.05rem; }
.chaine-resserree .maillon-titre { font-size: 1.12rem; margin: 0.25rem 0 var(--e-1); }
.chaine-resserree .maillon-texte { font-size: 1rem; }
/* Le trait qui relie les pastilles, comme la chronologie du déroulé */
.chaine-resserree .maillon:not(:last-child)::before { content: ""; position: absolute; left: calc(1.125rem - 1.5px); top: calc(2.25rem + 0.3rem); bottom: 0.3rem; width: 3px; border-radius: 2px; background: var(--filet); }
.chaine-resserree .fleche { display: none; }

/* Compteur public : un fait mesuré, rien d'autre (signatures validées, segments, palier suivant) */
.compteur-public { max-width: 34rem; padding: var(--e-5) var(--e-6) var(--e-6); background: var(--surface); border: 2px solid var(--filet); border-radius: var(--rayon-grand); }
.compteur-total { margin: 0; font-weight: 600; font-size: 1.25rem; color: var(--gris); }
.compteur-total .nombre { display: block; margin-bottom: 0.1rem; font-weight: 700; font-size: clamp(3rem, 2.3rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -0.02em; color: var(--encre); }
.compteur-segments { margin: var(--e-2) 0 0; font-size: 1.05rem; color: var(--gris); }
.compteur-segments[hidden] { display: none; }
.compteur-segments .segment { white-space: nowrap; }
/* Un séparateur ne précède qu'un segment affiché qui suit un autre segment affiché : un segment à zéro reste caché. */
.compteur-segments .segment:not([hidden]) ~ .segment:not([hidden])::before { content: "·"; margin: 0 0.45em; }
.objectif { margin-top: var(--e-4); }
.objectif-barre { display: block; width: 100%; height: 0.75rem; border: 0; border-radius: 999px; background: var(--accent-pale); overflow: hidden; appearance: none; }
.objectif-barre::-webkit-progress-bar { background: var(--accent-pale); border-radius: 999px; }
.objectif-barre::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width 600ms var(--courbe-sortie); }
.objectif-barre::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.objectif-texte { margin: var(--e-2) 0 0; font-size: 1rem; font-weight: 600; color: var(--gris); }
.compteur-masque .compteur-titre { margin: 0; font-weight: 600; font-size: 1.2rem; color: var(--encre); }

/* Signature en un instant */
.signature-express { padding: var(--e-6) var(--e-5); border: 2px solid var(--filet); border-radius: var(--rayon-grand); background: var(--surface); color: var(--encre); }
@media (min-width: 30rem) { .signature-express { padding: var(--e-8); } }
.signature-express h2 { margin: 0 0 var(--e-2); font-size: 1.6rem; }
.intro-express { margin: 0 0 var(--e-4); color: var(--gris); font-size: 1.05rem; line-height: 1.5; }
.formulaire-express { margin-top: 0; }
.formulaire-express .champ { margin-bottom: var(--e-4); }
.formulaire-express .champ-accord label { font-size: 0.95rem; line-height: 1.45; }
.formulaire-express .envoi .bouton { width: 100%; }
.mention-express { margin: 0 0 var(--e-2); font-size: 0.95rem; color: var(--gris); }
.lien-complet { margin: var(--e-3) 0 0; font-size: 1rem; line-height: 1.45; }

/* Texte de la tribune */
.tribune, .page-tribune > section:where(:not(.ouverture, .chaine)) { max-width: var(--largeur-texte); margin: 0 auto; padding-inline: var(--e-5); }
.tribune { padding-top: var(--e-10); }
.tribune h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.7rem); margin: 0 0 var(--e-6); }
.chapeau { font-size: 1.15em; line-height: 1.55; color: var(--encre); margin: 0 0 var(--e-8); }
.chapeau em { font-style: normal; }
.tribune h2 { font-size: 1.6rem; margin: var(--e-12) 0 var(--e-3); }
.tribune p, .tribune li { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 3; }
.tribune ol { padding-left: 1.6rem; margin: 0 0 1.2em; }
.tribune ol li { margin: 0 0 0.8em; padding-left: 0.2rem; }
.tribune ol li::marker { font-weight: 700; color: var(--accent); }
.tribune ol li p { margin: 0; }
.appel-note { font-size: 0.68em; line-height: 0; }
.appel-note a { text-decoration: none; padding: 0 0.12em; font-weight: 700; }
.appel-note a:hover { text-decoration: underline; }
.couverture { margin: 0 0 var(--e-8); }
.couverture img { display: block; width: 100%; border: 1px solid var(--filet); border-radius: var(--rayon-grand); background: var(--surface); }
.exergue { margin: var(--e-10) 0; padding: var(--e-2) 0 var(--e-2) var(--e-6); border-left: 4px solid var(--accent); }
.exergue p { margin: 0; font-weight: 600; font-size: 1.4em; line-height: 1.3; letter-spacing: -0.01em; color: var(--encre); }

/* Auteurs et premiers signataires : à égale taille, Juris-Connect en premier, une ligne de trois au-delà d'un téléphone */
.grille-auteurs { list-style: none; margin: var(--e-4) 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
@media (min-width: 40rem) { .grille-auteurs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carte-auteur { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-3); height: 100%; padding: var(--e-4) var(--e-5); border: 2px solid var(--filet); border-radius: var(--rayon); background: var(--surface); text-decoration: none; color: var(--encre); transition: border-color var(--duree) var(--courbe-sortie); }
a.carte-auteur:hover { border-color: var(--accent); }
.cadre-logo { display: flex; align-items: center; height: 2.6rem; }
.cadre-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 2.6rem; }
/* Un logo blanc garde le fond sombre qu'il exige, la seule surface sombre du site. */
.cadre-logo.fond-sombre { width: fit-content; height: auto; padding: 0.3rem 0.65rem; background: var(--encre); border-radius: var(--rayon-petit); }
.nom-auteur { font-weight: 600; font-size: 1.05rem; color: var(--accent); }
.mention-auteur { font-size: 0.95rem; line-height: 1.4; color: var(--gris); hyphens: manual; }
.auteurs-sans-logo, .presentation-auteurs { font-size: 1.05rem; color: var(--gris); }
.premiers-signataires { margin: var(--e-8) 0 var(--e-5); }
.premiers-signataires h3 { font-size: 1.1rem; margin: 0 0 var(--e-3); }
.grille-premiers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); }
@media (min-width: 40rem) { .grille-premiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.logo-premier { display: flex; align-items: center; width: fit-content; min-height: 4.4rem; margin-bottom: var(--e-2); }
.logo-premier img { display: block; width: auto; height: auto; max-height: 2.9rem; max-width: 12rem; }
.logo-premier.fond-sombre { background: var(--encre); padding: 0.45rem 0.8rem; border-radius: var(--rayon-petit); }
.personne { font-weight: 600; color: var(--encre); margin: 0; }
.fonction { color: var(--gris); margin: 0; font-size: 1rem; }

/* Sections de la page de la tribune */
.page-tribune > section:where(:not(.ouverture, .chaine)) { margin-top: var(--e-12); padding-top: var(--e-2); border-top: 1px solid var(--filet); }
.page-tribune > section h2 { font-size: 1.6rem; margin: var(--e-6) 0 var(--e-4); }
.compteur { display: inline-block; vertical-align: 0.15em; margin-left: 0.35rem; padding: 0.05rem 0.65rem; border-radius: 999px; background: var(--accent-pale); color: var(--accent); font-size: 0.75em; font-weight: 600; }
.section-signataires h3 { font-size: 1.15rem; margin: var(--e-6) 0 var(--e-3); }
.section-signataires h3 .compte { font-weight: 400; color: var(--gris); margin-left: 0.25rem; }
.liste-signataires { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
@media (min-width: 40rem) { .liste-signataires { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.signataire { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--surface); min-width: 0; }
.logo-signataire { flex: none; width: 4.5rem; height: 2.75rem; object-fit: contain; }
.identite { min-width: 0; }
.nom-signataire { margin: 0; font-weight: 600; color: var(--encre); overflow-wrap: anywhere; }
.details { margin: 0; font-size: 1rem; color: var(--gris); overflow-wrap: anywhere; }
.note-liste { color: var(--gris); margin-top: var(--e-4); }
.relance { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
.section-notes { font-size: 0.95rem; line-height: 1.55; padding-bottom: var(--e-4); color: var(--gris); }
.notes { padding-left: 1.5rem; margin: 0; }
.notes li { margin: 0 0 0.55em; overflow-wrap: anywhere; }
.notes li p { margin: 0; }
.notes li::marker { font-weight: 700; color: var(--accent); }
/* Soulignée comme tout lien : la couleur seule ne la distingue pas du texte de la note (WCAG 1.4.1). */
.retour-note { padding: 0 0.2rem; }

/* Pages éditoriales : démarche, fondateurs, signataires */
.page-editoriale { padding-bottom: var(--e-4); }
.tete-editoriale { border-bottom: 1px solid var(--filet); padding: var(--e-10) var(--e-5) var(--e-8); }
.tete-editoriale > * { max-width: 46rem; margin-inline: auto; }
.tete-editoriale > .surtitre { display: table; margin-left: max(0px, calc((100% - 46rem) / 2)); }
.tete-editoriale h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.1rem); letter-spacing: -0.02em; margin-top: 0; margin-bottom: var(--e-4); }
.chapeau-editorial { font-size: 1.15em; line-height: 1.55; color: var(--encre); }
.chapeau-editorial p { margin: 0; }
.bloc-contenu, .page-signataires .section-signataires { max-width: 46rem; margin: var(--e-10) auto 0; padding-inline: var(--e-5); }
.bloc-contenu h2 { font-size: 1.6rem; margin: 0 0 var(--e-3); }
.bloc-contenu h3 { font-size: 1.15rem; margin: var(--e-5) 0 var(--e-1); }
.bloc-contenu h3 + p { margin-top: 0; }
.bloc-contenu ol { padding-left: 1.4rem; }
/* Une adresse longue citée en lien se coupe pour rester dans l'écran d'un téléphone. */
.bloc-contenu a { overflow-wrap: anywhere; }
.bloc-contenu ol li { margin-bottom: var(--e-3); }
.bloc-contenu ol li::marker { font-weight: 700; color: var(--accent); }
/* La carte porte son cadre : sur un téléphone, une marge la détache des bords de l’écran, comme les autres cartes. */
.carte-fondateur { padding: var(--e-6) var(--e-5); margin-inline: max(var(--e-5), (100% - 46rem) / 2); border: 2px solid var(--filet); border-radius: var(--rayon-grand); background: var(--surface); }
@media (min-width: 46rem) { .carte-fondateur { padding: var(--e-8); } }
.page-fondateurs .carte-fondateur { margin-top: var(--e-6); }
.logo-fondateur { display: inline-flex; margin: 0 0 var(--e-2); }
.logo-fondateur .cadre-logo { height: 3rem; }
.logo-fondateur .cadre-logo img { max-height: 3rem; }
.site-fondateur { margin: 0 0 var(--e-4); font-size: 1rem; font-weight: 600; }
.carte-fondateur h3 { padding-top: var(--e-4); border-top: 1px solid var(--filet); }
.actions-editoriales { display: flex; flex-wrap: wrap; gap: var(--e-3); max-width: 46rem; margin: var(--e-10) auto 0; padding-inline: var(--e-5); }
.page-signataires .compteur-public { margin-top: var(--e-4); }

/* Remerciement, carte « J'ai signé », partage */
.page-simple, .page-formulaire { max-width: var(--largeur-texte); margin: 0 auto; padding: var(--e-8) var(--e-5) var(--e-12); }
.page-simple h1, .page-formulaire h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.7rem); letter-spacing: -0.02em; margin: 0 0 var(--e-4); }
.page-simple h2 { font-size: 1.4rem; margin: var(--e-10) 0 var(--e-3); }
.page-texte h2 { font-size: 1.25rem; margin: var(--e-8) 0 var(--e-2); }
.carte-signataire { margin: var(--e-4) 0; }
.carte-signataire img { display: block; width: 100%; height: auto; border: 2px solid var(--filet); border-radius: var(--rayon-grand); background: var(--fond); }
.note-carte { color: var(--gris); font-size: 1rem; }
.titre-tribune-carte { font-weight: 600; color: var(--encre); }
.carte-compteur { font-weight: 600; }
.carte-compteur .nombre { font-size: 1.7rem; font-weight: 700; color: var(--encre); margin-right: 0.2rem; }
.partages { margin: var(--e-6) 0; }
.partages-titre { margin: 0 0 var(--e-2); font-weight: 600; color: var(--encre); }
.liste-partages { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.partage { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.45rem 1.05rem; border: 2px solid var(--filet); border-radius: 999px; background: var(--surface); color: var(--accent); font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; }
.partage:hover { border-color: var(--accent); color: var(--accent-survol); }
.partage-natif { background: var(--accent); border-color: var(--accent); color: #fff; }
.partage-natif:hover { background: var(--accent-survol); border-color: var(--accent-survol); color: #fff; }
.lien-et-copie { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.lien-et-copie input { flex: 1 1 16rem; min-width: 0; }
.telechargement { margin-bottom: var(--e-1); }
.actions-merci, .actions-confirmation { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* Bandes et respirations (passe du 25/10/2026) : l'accueil alterne le fond bleu très clair et des bandes blanches
   pleine largeur, cernées de deux filets ; la bande se peint par un contour d'image hors de la boîte, qui n'élargit
   jamais la page (aucun défilement horizontal). Intertitres plus forts, écarts plus amples entre les sections. */
.chaine:not(.chaine-resserree), .page-tribune > .deroule-rappel {
  border-image: linear-gradient(var(--filet) 0 1px, var(--surface) 1px calc(100% - 1px), var(--filet) calc(100% - 1px)) 0 fill / 0 / 0 100vmax;
}
.ouverture:has(+ .chaine) { border-bottom: 0; }
.page-tribune > section:where(:not(.ouverture, .chaine)) { margin-top: var(--e-16); }
.page-tribune > section h2 { margin: var(--e-6) 0 var(--e-5); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); letter-spacing: -0.015em; }
.page-tribune > .deroule-rappel { padding-block: var(--e-10) var(--e-12); border-top: 0; }
.page-tribune > .deroule-rappel h2 { margin-top: 0; }
.page-tribune > .deroule-rappel + section { border-top: 0; padding-top: 0; }
/* La consultation, sur l'accueil : une carte bleu pâle qui appelle le geste */
.page-tribune > .section-contribuer { max-width: none; margin-inline: max(var(--e-5), (100% - var(--largeur-texte)) / 2); padding: var(--e-8) var(--e-6); border: 2px solid var(--filet); border-radius: var(--rayon-grand); background: var(--accent-pale); }
@media (min-width: 40rem) { .page-tribune > .section-contribuer { padding: var(--e-10); } }
.page-tribune > .section-contribuer h2 { margin-top: 0; }
.page-tribune > .section-contribuer p:last-child { margin-bottom: 0; }
.page-tribune > .section-notes h2 { font-size: 1.5rem; }
/* Texte de la tribune : des intertitres qui ouvrent une respiration, des exergues plus détachées */
.tribune h2 { margin: var(--e-16) 0 var(--e-4); font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2rem); letter-spacing: -0.015em; }
.tribune p { margin-bottom: 1.1em; }
.exergue { margin: var(--e-12) 0; }
/* Pages éditoriales : tête plus haute, sections plus espacées, intertitres plus forts */
.tete-editoriale { padding: var(--e-12) var(--e-5) var(--e-10); }
.bloc-contenu, .page-signataires .section-signataires { margin-top: var(--e-12); }
.bloc-contenu h2 { margin-bottom: var(--e-4); font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2rem); letter-spacing: -0.015em; }
.actions-editoriales { margin-top: var(--e-12); }
/* Formulaires de signature puis de consultation : une carte blanche sur le fond, le geste détaché du texte */
.page-formulaire > .formulaire { padding: var(--e-6) var(--e-5); border: 2px solid var(--filet); border-radius: var(--rayon-grand); background: var(--surface); }
@media (min-width: 30rem) { .page-formulaire > .formulaire { padding: var(--e-8); } }