/* LES JETONS SONT CHARGES PAR <link>, PAS PAR @import.

   L'@import ne porte pas de parametre de version : `app.css` se
   rechargeait a chaque livraison, mais le fichier qu'il importait
   restait celui du cache. Une valeur modifiee dans les jetons — la
   largeur du rail, une couleur — ne s'appliquait pas, et l'on cherchait
   le defaut dans le CSS alors qu'il etait dans le cache.

   `_php/entete.php` pose desormais `charte-tokens.css?v=ASSETS_VERSION`
   AVANT ce fichier. La version suit donc toute seule. */

/* ==================================================================
   KALIKONTAKT — FEUILLE UNIQUE
   Aucune couleur en dur ici : tout vient de charte-tokens.css, que
   _css/theme.php surcharge depuis la base (règle 11b).
   ================================================================== */

/* ==================================================================
   1. BASE ET ACCESSIBILITÉ
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--accent-texte); }
a:hover { color: var(--accent-fonce); }

/* Le focus est VISIBLE partout. Jamais d'outline:none sans
   remplacement : au clavier, un focus invisible rend le site
   inutilisable sans qu'aucune erreur ne le signale (règle 10e). */
:focus-visible {
  outline: 2px solid var(--accent-texte);
  outline-offset: 2px;
  border-radius: 3px;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--encre);
  color: var(--fond);
  text-decoration: none;
}
.lien-evitement:focus { left: 0; }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Champ leurre du honeypot. Masqué en CSS, JAMAIS en style inline :
   la CSP interdit l'attribut style au même titre qu'une balise
   <style> (règle 7). */
.leurre {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 .6em;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.2rem; }

/* ==================================================================
   2. LA MARQUE
   ================================================================== */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--encre);
  font-family: var(--serif);
  font-size: 1.25rem;
}
.marque__pastille {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
.marque__nom { letter-spacing: -0.02em; }
.marque--portail { margin-bottom: 28px; }

/* ==================================================================
   3. BOUTONS
   Vocabulaire commun à tout le projet. Ajouter un ton = ajouter trois
   variables locales, jamais réécrire une règle de bouton (règle 11c).
   ================================================================== */
.bouton,
.bouton-secondaire,
.bouton-discret,
.bouton-neutre {
  --ton:       var(--accent);
  --ton-fonce: var(--accent-fonce);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .94rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s;
}

.bouton {
  background: var(--ton);
  color: var(--accent-sur);   /* calculée : blanc ou encre, selon l'accent */
  border-color: var(--ton);
}
.bouton:hover { background: var(--ton-fonce); border-color: var(--ton-fonce); }

.bouton-secondaire {
  background: transparent;
  color: var(--accent-texte);
  border-color: var(--bordure-appuyee);
}
.bouton-secondaire:hover { border-color: var(--accent-texte); }

.bouton-discret {
  background: transparent;
  color: var(--encre-douce);
  border-color: transparent;
  padding-inline: 10px;
}
.bouton-discret:hover { color: var(--encre); background: var(--fond-creuse); }

.bouton-neutre {
  background: var(--fond-creuse);
  color: var(--encre);
  border-color: var(--bordure);
}
.bouton-neutre:hover { border-color: var(--bordure-appuyee); }

/* Les tons. La teinte tourne, la saturation et la clarté suivent
   l'accent : une interface d'une seule main quelle que soit la
   couleur choisie. Sémantique constante, JAMAIS portée par la
   couleur seule — chaque bouton garde son libellé écrit. */
.bouton-vert   { --ton: var(--vert);   --ton-fonce: var(--vert-fonce); }
.bouton-rouge  { --ton: var(--rouge);  --ton-fonce: var(--rouge-fonce); }
.bouton-gris   { --ton: var(--gris);   --ton-fonce: var(--gris-fonce); }

.bouton[disabled], .bouton-secondaire[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.bouton--bloc { width: 100%; }

/* ==================================================================
   4. CHAMPS
   ================================================================== */
.champ { margin-bottom: 18px; }

.champ__label {
  display: block;
  font-size: .88rem;
  color: var(--encre-douce);
  margin-bottom: 6px;
}

.champ__saisie,
.champ__zone,
select.champ__saisie {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--encre);
  font: inherit;
  font-size: 1rem;
}
.champ__saisie:hover, .champ__zone:hover { border-color: var(--bordure-appuyee); }
.champ__saisie:focus, .champ__zone:focus {
  border-color: var(--accent-texte);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-clair);
}
.champ__saisie::placeholder { color: var(--encre-invite); }
.champ__zone { min-height: 110px; resize: vertical; }

.champ__aide {
  margin: 6px 0 0;
  font-size: .84rem;
  color: var(--encre-douce);
}

.champ--case { display: flex; align-items: flex-start; gap: 10px; }
.champ--case input { margin-top: 4px; flex: 0 0 auto; }
.champ--case label { font-size: .92rem; }

/* Les champs se bornent, PAS la page (règle 11d). */
.fiche { max-width: var(--largeur-fiche); }

/* ==================================================================
   5. ALERTES ET MESSAGES
   ================================================================== */
.alerte,
.info,
.succes {
  padding: 12px 16px;
  border-radius: var(--rayon);
  border: 1px solid;
  margin: 0 0 18px;
  font-size: .94rem;
}
.alerte  { background: var(--rouge-clair); border-color: var(--rouge-bordure); color: var(--rouge); }
.info    { background: var(--ambre-clair); border-color: var(--ambre-bordure); color: var(--ambre); }
.succes  { background: var(--vert-clair);  border-color: var(--vert-bordure);  color: var(--vert); }

/* ==================================================================
   6. LE PORTAIL — connexion, inscription, code, lien
   La carte d'action vient EN PREMIER dans le document ; la grille la
   place à droite sur grand écran. Sur téléphone elle doit donc se
   lire avant le texte de présentation, pas derrière 400 px
   d'explications (règle 16f).
   ================================================================== */
.portail {
  max-width: var(--largeur-front);
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.portail--duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 900px) {
  .portail--duo {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* L'ordre visuel inverse l'ordre du document, à dessein. */
  .portail__carte      { order: 2; }
  .presentation--portail { order: 1; }
}

.portail__carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-xl);
  padding: 32px;
}
.portail__titre { font-size: 1.9rem; margin-bottom: .3em; }
.portail__titre em { color: var(--accent-texte); font-style: italic; }
.portail__intro { color: var(--encre-douce); margin-top: 0; }
.portail__envoyer { width: 100%; }
.portail__note {
  margin-top: 22px;
  font-size: .86rem;
  color: var(--encre-douce);
  line-height: 1.55;
}

.presentation__titre { font-size: 1.45rem; }
.presentation__sous-titre { font-size: 1rem; margin-top: 1.6em; }
.presentation__texte { color: var(--encre-douce); }
.presentation__liste { list-style: none; padding: 0; margin: 0; }
.presentation__liste li {
  display: flex; gap: 10px;
  padding: 7px 0;
  color: var(--encre-douce);
  font-size: .94rem;
}
.presentation__liste li span[aria-hidden] { color: var(--accent-texte); }
.presentation__note {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--fond-creuse);
  border-radius: var(--rayon);
  font-size: .88rem;
  color: var(--encre-douce);
}

/* ==================================================================
   7. LA VITRINE

   La seule page indexable du site, et la première que voit quelqu'un
   qui hésite. Elle mérite le même soin que JuriSource : des cartes là
   où il y a des étapes, une FAQ qui s'ouvre sans JavaScript, un
   fac-similé qui MONTRE ce que le service produit plutôt que de le
   décrire.
   ================================================================== */
.vitrine { max-width: var(--largeur-front); margin: 0 auto; padding: 0 32px; }

.vitrine__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-bottom: 1px solid var(--bordure);
}
.vitrine__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Accroche ---------- */
.vitrine__hero { padding: 64px 0 48px; }

.vitrine__titre {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.vitrine__titre em { color: var(--accent-texte); font-style: italic; }

.vitrine__chapo {
  margin: 0 0 20px;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--encre-douce);
}
.vitrine__chapo strong { color: var(--encre); }
.vitrine__essai { font-size: .88rem; color: var(--encre-douce); margin: 12px 0 0; }

/* ---------- Sections ---------- */
.vitrine__section { padding: 44px 0; border-top: 1px solid var(--bordure); }
.vitrine__section--sansfilet { border-top: 0; }

.vitrine__section h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.vitrine__section h3 { margin: 0 0 6px; font-size: .98rem; font-weight: 600; }
.vitrine__section p  { margin: 0 0 14px; line-height: 1.65; }
.vitrine__section ul { margin: 0 0 14px; padding-left: 20px; line-height: 1.65; }
.vitrine__section .formules,
.vitrine__section .vitrine__metiers,
.vitrine__section .vitrine__etapes,
.vitrine__section .sources-grille { padding-left: 0; list-style: none; }

/* Spécificité montée : `.vitrine__section h3` (0,2,0) l'emportait sur
   `.vitrine__sous-titre` (0,1,0), et les intertitres sortaient en gras
   0,98 rem au lieu de la serif 1,2 rem. */
.vitrine__section .vitrine__sous-titre,
.vitrine__sous-titre {
  margin: 34px 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

/* ---------- Les étapes : des CARTES, pas du texte posé ----------
   Deux blocs qui se suivent ne peuvent pas être l'un une carte et
   l'autre du texte nu : on croit à deux natures de contenu. */
.vitrine__etapes {
  counter-reset: etape;
  list-style: none;
  /* `margin: 0` collait la premiere rangee de cartes au bloc qui la
     precede : deux natures de contenu qui se touchent se lisent comme
     un seul bloc mal fait. */
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 20px;
}
.vitrine__etapes > li {
  counter-increment: etape;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.vitrine__etapes > li:hover {
  transform: translateY(-2px);
  border-color: var(--bordure-appuyee);
  box-shadow: 0 6px 18px rgba(20, 20, 19, .06);
}
.vitrine__etapes > li::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--accent-texte);
}
.vitrine__etapes h3 { margin: 4px 0 0; }
.vitrine__etapes p  { margin: 0; font-size: .92rem; color: var(--encre-douce); }

.vitrine__exemple {
  margin-top: auto;
  padding: 10px 12px;
  background: var(--fond-creuse);
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: .86rem;
  color: var(--encre-douce);
}

.vitrine__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 28px;
}
.vitrine__colonnes p, .vitrine__colonnes ul { font-size: .94rem; }

/* ---------- Les métiers : des jetons, pas une liste à puces ---------- */
.vitrine__metiers {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 16px; padding: 0; list-style: none;
}
.vitrine__metiers li {
  padding: 6px 14px;
  background: var(--fond-creuse);
  border-radius: 999px;
  font-size: .86rem;
}

/* UNE BOITE A FOND ET A PADDING EST UN BLOC, et il faut l'ecrire.
   Utilisee un jour en <span> dans un <p>, elle heritait de `display:
   inline` : le padding vertical ne pousse alors AUCUNE ligne, il se
   peint par-dessus les voisines. Deux paragraphes se chevauchaient a
   l'ecran. La declaration ci-dessous rend la faute impossible a
   refaire, quelle que soit la balise employee. */
.vitrine__note {
  display: block;
  font-size: .88rem;
  color: var(--encre-douce);
  background: var(--fond-creuse);
  padding: 14px 18px;
  border-radius: var(--rayon);
  margin: 22px 0 0;
}
.vitrine__note strong { color: var(--encre); }

/* ------------------------------------------------------------------
   LES SOURCES EN CARTES, PAS EN TABLEAU

   Un tableau à quatre colonnes coupait chaque cellule au tiers
   (« Aucun. Adresse postale et géolocalisation se… ») et défilait
   latéralement : on ne pouvait lire AUCUNE description en entier,
   c'est-à-dire précisément ce que la section existe pour montrer.

   Une carte par source : le nom en serif, l'éditeur et le rôle en
   étiquette, et la description ENTIÈRE. C'est la forme retenue par
   JuriSource, et elle est meilleure.
   ------------------------------------------------------------------ */
.sources-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
  gap: 18px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.source-carte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.source-carte:hover {
  transform: translateY(-2px);
  border-color: var(--bordure-appuyee);
  box-shadow: 0 6px 18px rgba(20, 20, 19, .06);
}

.source-carte__nom {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* L'étiquette : éditeur et rôle, en petites capitales espacées. C'est
   ce qui donne à la grille sa lisibilité en survol rapide — on repère
   « ADEME » ou « CONTACTS » sans lire la carte. */
.source-carte__meta {
  margin: 0;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.5;
  color: var(--accent-texte);
}

.source-carte__texte {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--encre-douce);
}
.source-carte__texte strong { color: var(--encre); }

/* Le drapeau ODbL, et l'état « pas encore configurée » : posés en bas
   de carte pour ne pas couper la lecture. */
.source-carte__pied {
  margin: auto 0 0;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.source-carte__lien { font-size: .82rem; }

/* ------------------------------------------------------------------
   LE FAC-SIMILÉ — montrer plutôt que décrire

   Une ligne de résultat telle qu'elle sort vraiment, avec sa source et
   son alerte. C'est le seul endroit de la vitrine où l'on VOIT ce
   qu'on achète ; tout le reste le raconte.

   Ce n'est PAS une capture d'écran : c'est du HTML, donc lisible par
   un lecteur d'écran, net sur tous les écrans, et il ne périme pas.
   ------------------------------------------------------------------ */
.demo {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-xl);
  background: var(--carte);
  overflow: hidden;
}
.demo__barre {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--fond-creuse);
  border-bottom: 1px solid var(--bordure);
  font-size: .84rem;
  color: var(--encre-douce);
}
.demo__pastille {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bordure-appuyee); flex: 0 0 auto;
}
.demo__corps { overflow-x: auto; }
.demo table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.demo th, .demo td {
  padding: 10px 14px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--bordure);
}
.demo thead th {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 600; color: var(--encre-douce);
}
.demo tbody tr:last-child td { border-bottom: 0; }
.demo__source { color: var(--encre-douce); font-size: .82rem; }
.demo .demo__pied {
  /* `.vitrine__section p` (0,2,0) l'emporterait sur `.demo__pied` (0,1,0)
     et laisserait 14 px de marge — donc un liseré blanc dans l'angle
     arrondi du cadre. On monte la spécificité plutôt que d'écrire
     !important : la règle reste lisible et surchargeable. */
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--bordure);
  background: var(--fond-creuse);
  font-size: .82rem;
  color: var(--encre-douce);
}

/* ------------------------------------------------------------------
   LA FOIRE AUX QUESTIONS

   Un <details> par question : ouverture native, sans JavaScript. La
   flèche est dessinée en CSS et le marqueur par défaut retiré — sur
   Safari il reste sinon un triangle noir qui ne suit ni la couleur ni
   la graisse du reste.

   La zone cliquable est la LIGNE ENTIÈRE : une cible de la largeur du
   seul libellé se rate au doigt.
   ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--bordure); }
.faq__item { border-bottom: 1px solid var(--bordure); }

.faq__question {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 0;
  font-weight: 600; font-size: .98rem; line-height: 1.45;
  cursor: pointer;
  list-style: none;                       /* Firefox */
}
.faq__question::-webkit-details-marker { display: none; }   /* Safari, Chrome */

/* La flèche tourne à l'ouverture. Elle ne porte AUCUNE information à
   elle seule : <details> annonce déjà son état au lecteur d'écran. */
.faq__question::before {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px; margin-top: 6px;
  border-right: 1.5px solid var(--accent-texte);
  border-bottom: 1.5px solid var(--accent-texte);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.faq__item[open] .faq__question::before { transform: rotate(45deg); }
.faq__question:hover { color: var(--accent-texte); }

.faq__reponse { padding: 0 0 18px 20px; }
.faq__reponse p { margin: 0 0 10px; color: var(--encre-douce); line-height: 1.65; }
.faq__reponse p:last-child { margin-bottom: 0; }
.faq__reponse strong { color: var(--encre); }

.vitrine__final { padding-bottom: 56px; }

/* ------------------------------------------------------------------
   LA RÉVÉLATION AU DÉFILEMENT

   TOUT EST ÉCRIT DANS SON ÉTAT FINAL, VISIBLE. _js/vitrine.js n'ajoute
   qu'une classe sur <body> — « .vitrine--anime » — qui AUTORISE le CSS
   à masquer pour révéler ensuite.

   Script absent, script en erreur, mouvement refusé par le système :
   la page reste entière. Aucune information ne vit dans une animation.
   ------------------------------------------------------------------ */
.vitrine--anime .a-reveler {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.vitrine--anime .a-reveler.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .vitrine--anime .a-reveler { opacity: 1; transform: none; transition: none; }
  .vitrine__etapes > li:hover { transform: none; }
}

/* Les formules */
.formules { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 0; list-style: none; }
@media (min-width: 760px) { .formules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .formules { grid-template-columns: repeat(4, 1fr); } }

.formule {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform .14s ease, box-shadow .14s ease;
}
.formule:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20, 20, 19, .06); }
.formule--phare { border-color: var(--accent); }
.formule__nom { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 4px; }
.formule__prix {
  font-family: var(--serif);
  /* « 199 € par mois » passait a la ligne dans une colonne sur quatre :
     le prix, qui doit se lire d'un coup d'oeil, s'y lisait en deux. La
     taille suit maintenant la largeur disponible. */
  font-size: clamp(1.35rem, 1.1vw + .95rem, 1.9rem);
  color: var(--accent-texte); margin: 0 0 10px;
  text-wrap: balance;
}

/* LA LISTE DOIT COMMENCER EN HAUT, PAS EN BAS.
   `.formule__resume` portait `flex: 1` : le resume s'etirait sur toute
   la hauteur disponible et repoussait les options au ras du bouton.
   Sur quatre cartes de longueurs differentes, cela ouvrait des trous de
   quatre centimetres et l'on ne pouvait plus comparer une formule a
   l'autre — ce qui est pourtant la seule chose qu'on fait sur un
   tableau de prix.
   C'est la LISTE qui pousse desormais, donc le bouton qui descend. */
.formule__resume {
  font-size: .9rem; color: var(--encre-douce); margin: 0;
}
@media (min-width: 1040px) {
  /* Une hauteur commune pour les resumes : sans elle, les listes
     demarrent a quatre hauteurs differentes et l'oeil ne peut plus
     comparer ligne a ligne. */
  .formule__resume { min-height: 6.4em; }
}
.formule__inclus {
  list-style: none; padding: 0; margin: 16px 0 20px;
  font-size: .88rem; flex: 1;
}
.formule__inclus li { padding: 5px 0; display: flex; gap: 8px; }
.formule__inclus li::before { content: "→"; color: var(--accent-texte); flex: 0 0 auto; }
.formule .bouton, .formule .bouton-secondaire { justify-content: center; width: 100%; }

/* La présentation, en colonne des pages de portail */
.presentation__titre { font-size: 1.45rem; }
.presentation__sous-titre { font-size: 1rem; margin-top: 1.6em; }
.presentation__texte { color: var(--encre-douce); }
.presentation__texte strong { color: var(--encre); }
.presentation__liste { list-style: none; padding: 0; margin: 0; }
.presentation__liste li {
  display: flex; gap: 10px; padding: 7px 0;
  color: var(--encre-douce); font-size: .94rem;
}
.presentation__liste li span[aria-hidden] { color: var(--accent-texte); }
.presentation__note {
  margin-top: 22px; padding: 14px 16px;
  background: var(--fond-creuse); border-radius: var(--rayon);
  font-size: .88rem; color: var(--encre-douce);
}

@media (max-width: 700px) {
  .vitrine { padding: 0 16px; }
  .vitrine__hero { padding: 40px 0 32px; }
  .vitrine__section { padding: 32px 0; }
}

/* ==================================================================
   8. LE SHELL APPLICATIF (rail + contenu)
   ================================================================== */
.appli { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail);
  flex: 0 0 var(--rail);
  background: var(--fond-creuse);
  border-right: 1px solid var(--bordure);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rail__marque { margin-bottom: 22px; padding-inline: 6px; }

/* Les entrées sont GROUPÉES en rubriques : une quinzaine d'entrées à
   plat ne se lit plus (règle 11i). */
.rail__rubrique {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--encre-invite);
  margin: 18px 0 4px;
  padding-inline: 10px;
}
.rail__lien {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--rayon);
  color: var(--encre);
  text-decoration: none;
  font-size: .94rem;
  /* Le rail est assez large pour qu'aucun libellé ne se coupe : si
     l'un déborde, c'est le rail qu'on élargit, pas le texte qu'on
     tronque (règle 11i). */
  white-space: nowrap;
}
.rail__lien:hover { background: var(--carte); color: var(--encre); }
.rail__lien[aria-current="page"] {
  background: var(--carte);
  color: var(--accent-texte);
  box-shadow: inset 2px 0 0 var(--accent);
}
/* L'ICONE DU MENU (règle 11i, menu à icônes).

   `flex: 0 0 auto` : sans lui, l'icône se comprime quand un libellé
   est long — un dessin de 14 px au lieu de 18, sur une entrée et pas
   sur les autres, et la colonne d'icônes cesse d'être une colonne.

   Elle est un peu en retrait sur les entrées inactives : c'est le
   libellé qui porte le sens, l'icône ne fait que le repérer. Sur
   l'entrée courante elle reprend toute sa force, avec l'accent —
   `currentColor` s'en charge, aucune couleur n'est écrite ici. */
.rail__icone {
  flex: 0 0 auto;
  opacity: .62;
  transition: opacity .14s ease;
}
.rail__lien:hover .rail__icone,
.rail__lien[aria-current="page"] .rail__icone { opacity: 1; }

.rail__compteur {
  margin-left: auto;
  background: var(--accent);
  color: var(--accent-sur);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: .75rem;
}

.contenu {
  flex: 1;
  /* AUCUNE largeur maximale : une page connectée occupe tout l'écran
     (règle 11d). Ce sont les CHAMPS qu'on borne, via .fiche. */
  min-width: 0;   /* sans lui, un tableau en nowrap fait déborder la page */
  padding: 26px 30px 60px;
}

.entete-appli {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

/* Le menu de compte, en <details> : utilisable sans JavaScript. */
.menu-compte { position: relative; }
.menu-compte > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--carte);
  font-size: .9rem;
}
.menu-compte > summary::-webkit-details-marker { display: none; }
.menu-compte__panneau {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  min-width: 230px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-flottante);
  padding: 8px;
  z-index: 30;
}
.menu-compte__panneau a,
.menu-compte__panneau button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  background: none;
  border-radius: 8px;
  color: var(--encre);
  text-decoration: none;
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
}
.menu-compte__panneau a:hover,
.menu-compte__panneau button:hover { background: var(--fond-creuse); }
.menu-compte__nom {
  padding: 8px 12px;
  font-size: .84rem;
  color: var(--encre-douce);
  border-bottom: 1px solid var(--bordure);
  margin-bottom: 6px;
}

/* Sous 900 px, le rail devient un menu repliable piloté en CSS pur :
   une case à cocher masquée, pas un handler en ligne (règle 11i). */
.rail__bascule { display: none; }
.rail__etiquette { display: none; }

@media (max-width: 900px) {
  .appli { display: block; }
  .rail {
    width: auto; flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--bordure);
    display: none;
  }
  .rail__etiquette {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0 16px;
    padding: 8px 16px;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    background: var(--carte);
    cursor: pointer;
    font-size: .9rem;
  }
  .rail__bascule:checked ~ .rail { display: flex; }
  .contenu { padding: 20px 16px 50px; }
}

/* ==================================================================
   9. CARTES ET GRILLES
   ================================================================== */
.carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-xl);
  padding: 22px;
}
.carte__titre { font-size: 1.12rem; margin-bottom: .4em; }

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

/* Les chiffres du tableau de bord */
.chiffres { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }
.chiffre {
  display: block;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--encre);
}
.chiffre:hover { border-color: var(--bordure-appuyee); }
.chiffre__valeur {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--accent-texte);
  font-variant-numeric: tabular-nums;
}
.chiffre__libelle { font-size: .86rem; color: var(--encre-douce); }

/* ==================================================================
   10. LA BARRE D'OUTILS
   Une BANDE, pas des boutons posés entre deux blocs : un filet
   au-dessus ET un filet en dessous, mêmes bordure et espacement des
   deux côtés (règle 11e).
   ================================================================== */
.barre-outils {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  margin: 22px 0 0;
}
.barre-outils__gauche,
.barre-outils__droite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.barre-outils .champ { margin: 0; }
.barre-outils .champ__saisie { min-width: 230px; }

/* Le compteur-filtre. Sans lui, une alerte rangée en page 3 serait
   invisible — c'est le seul service que rendrait un bandeau en tête
   de page, et il faut donc le remplacer (règle 11n). */
.compteur {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--ambre-bordure);
  background: var(--ambre-clair);
  color: var(--ambre);
  font-size: .86rem;
  text-decoration: none;
}
.compteur:hover { border-color: var(--ambre); color: var(--ambre); }
.compteur[aria-pressed="true"] { background: var(--ambre); color: var(--carte); }

/* ==================================================================
   11. TABLEAUX
   ================================================================== */
.tableau-cadre { overflow-x: auto; }

.tableau-donnees {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.tableau-donnees th,
.tableau-donnees td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bordure);
  text-align: left;
  /* Une ligne tient sur UNE seule ligne de hauteur (règle 11f). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}
.tableau-donnees thead th {
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--encre-douce);
  border-bottom-color: var(--bordure-appuyee);
}
.tableau-donnees thead th a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  gap: 5px;
}
.tableau-donnees thead th a:hover { color: var(--accent-texte); }
.tableau-donnees th[aria-sort] a { color: var(--accent-texte); }
.tableau-donnees tbody tr:hover { background: var(--fond-creuse); }

.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* La colonne Actions, toujours la dernière, largeur fixe. */
.colonne-actions { width: 250px; white-space: nowrap; }

/* La colonne de sélection, toujours la première. Étroite, et la case
   est centrée : une case collée à gauche d'une cellule de 40 px se
   rate au doigt. */
.colonne-case { width: 40px; text-align: center; padding-inline: 8px; }
.colonne-case input { width: 16px; height: 16px; cursor: pointer; }

/* LES ACTIONS SONT DE VRAIS BOUTONS, AVEC UN FOND, SUR UNE SEULE
   LIGNE (règle 11f).

   La cause d'un empilement n'est presque jamais le style : un <form>
   est un ÉLÉMENT DE BLOC. Posé entre deux liens pour porter le jeton
   CSRF d'une suppression, il jette à la ligne tout ce qui suit — et
   aucun white-space:nowrap n'y peut rien, puisque ce n'est pas un
   retour à la ligne du texte. D'où le display:inline-block ci-dessous,
   qui est la vraie correction.

   Et JAMAIS display:flex sur la cellule : un <td> en flex sort du
   contexte de mise en forme du tableau et cesse d'obéir aux largeurs
   de colonne. On agit sur les enfants, jamais sur elle. */
.colonne-actions form { display: inline-block; margin: 0; }

.action {
  display: inline-block;
  padding: 5px 11px;
  margin-right: 4px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--fond-creuse);
  color: var(--encre);
  text-decoration: none;
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  white-space: nowrap;
}
.action:hover { border-color: var(--bordure-appuyee); color: var(--encre); }
.action--danger { color: var(--rouge); }
.action--danger:hover { background: var(--rouge-clair); border-color: var(--rouge-bordure); }

/* L'icône d'alerte, DANS la ligne (règle 11n). Jamais un emoji,
   jamais une icône appelée chez un tiers : un SVG local au trait fin.
   Elle n'est jamais seule à porter l'information — title pour la
   souris, aria-label en toutes lettres pour le lecteur d'écran, et
   le détail complet dans le modal. */
.alerte-ligne {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--ambre-bordure);
  border-radius: 50%;
  background: var(--ambre-clair);
  color: var(--ambre);
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
}
.alerte-ligne:hover { background: var(--ambre); color: var(--carte); }
.alerte-ligne svg { width: 14px; height: 14px; }

/* ==================================================================
   12. PASTILLES
   Chaque pastille porte son LIBELLÉ ÉCRIT. Jamais un état codé par la
   seule couleur (règle 10e) : un daltonien lit les mêmes fichiers.
   ================================================================== */
.pastille {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .78rem;
  border: 1px solid;
  white-space: nowrap;
}
.pastille--valide      { background: var(--vert-clair);  border-color: var(--vert-bordure);  color: var(--vert); }
.pastille--inconnue,
.pastille--fourre_tout { background: var(--ambre-clair); border-color: var(--ambre-bordure); color: var(--ambre); }
.pastille--invalide,
.pastille--jetable     { background: var(--rouge-clair); border-color: var(--rouge-bordure);              color: var(--rouge); }
.pastille--neutre      { background: var(--gris-clair);  border-color: var(--bordure);       color: var(--gris); }
.pastille--accent      { background: var(--accent-clair); border-color: var(--bordure-accent); color: var(--accent-texte); }

/* LE SCORE — une pastille qui est un BOUTON, parce qu'elle ouvre le
   détail. Le chiffre n'est jamais seul : le libellé du niveau est écrit
   à côté, et la couleur ne porte donc aucune information à elle seule
   (règle 10e). */
button.score {
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  white-space: nowrap;
}
button.score:hover { border-color: var(--bordure-appuyee); }
.score--chaud { background: var(--accent-clair); border-color: var(--bordure-accent); color: var(--accent-texte); }
.score--tiede { background: var(--ambre-clair);  border-color: var(--ambre-bordure);  color: var(--ambre); }
.score--froid { background: var(--gris-clair);   border-color: var(--bordure);        color: var(--gris); }

/* ==================================================================
   13. PAGINATION
   ================================================================== */
.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 18px 0;
}
.pagination a, .pagination span {
  padding: 6px 12px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  text-decoration: none;
  color: var(--encre);
  font-size: .88rem;
}
.pagination a:hover { border-color: var(--bordure-appuyee); }
.pagination [aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-sur);
}
.pagination__compte { margin-left: auto; color: var(--encre-douce); border: 0; }

/* ==================================================================
   14. MODAL — <dialog> natif, piloté depuis _js/, jamais onclick=
   ================================================================== */
dialog.modal {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-xl);
  padding: 0;
  max-width: 560px;
  width: calc(100% - 32px);
  background: var(--carte);
  color: var(--encre);
  box-shadow: var(--ombre-flottante);
}
dialog.modal::backdrop { background: var(--voile); }
.modal__corps { padding: 26px 26px 8px; }
.modal__titre { font-size: 1.25rem; }
.modal__texte {
  color: var(--encre-douce);
  font-size: .95rem;
  /* Les motifs d'un score arrivent séparés par des sauts de ligne :
     sans pre-line, ils se collent en un paragraphe illisible. */
  white-space: pre-line;
}
.modal__pied {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 26px 24px;
}

/* ==================================================================
   15. LA VISITE GUIDÉE (règle 12)
   ================================================================== */
.visite-halo {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: var(--rayon);
  box-shadow: 0 0 0 9999px var(--voile);
  pointer-events: none;
  z-index: 60;
  transition: all .18s ease;
}
.visite-bulle {
  position: absolute;
  z-index: 61;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-flottante);
  padding: 20px;
}
.visite-bulle__titre { font-size: 1.08rem; margin-bottom: .35em; }
.visite-bulle__texte { font-size: .92rem; color: var(--encre-douce); }
.visite-bulle__pied {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.visite-bulle__compteur {
  font-size: .82rem;
  color: var(--encre-invite);
  margin-right: auto;
  font-variant-numeric: tabular-nums;
}

/* Sur téléphone la bulle ne suit plus la cible : elle se pose en bas,
   pleine largeur. Une bulle de 340 px qui cherche à se placer à côté
   d'un élément d'un menu replié sort de l'écran une fois sur deux
   (règle 12b). */
@media (max-width: 700px) {
  .visite-bulle {
    position: fixed;
    left: 8px; right: 8px; bottom: 8px;
    top: auto !important;
    width: auto;
  }
}

/* ==================================================================
   16. PIED DE PAGE
   ================================================================== */
/* LE PIED SUIT LA LARGEUR DU CONTENU QU'IL SOULIGNE.

   Il était en pleine largeur pendant que la vitrine était centrée à
   1080 px : sur un grand écran, le texte du pied commençait tout à
   gauche, très loin sous le contenu, et la page paraissait se
   décomposer en bas. Vu en production le 2026-09-04.

   Le filet, lui, reste en pleine largeur — c'est une séparation de
   page, pas un souligné de colonne. */
.pied {
  border-top: 1px solid var(--bordure);
  margin-top: 60px;
  padding: 28px 0 48px;
  font-size: .86rem;
  color: var(--encre-douce);
}
.pied > * {
  max-width: var(--largeur-front);
  margin-inline: auto;
  padding-inline: 32px;
}
/* margin-BLOCK seul : un raccourci « margin: 0 0 10px » écraserait
   le margin-inline:auto de `.pied > *`, et le paragraphe repartirait
   se coller à gauche pendant que le <nav> reste centré. */
.pied p { margin-block: 0 10px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pied nav a { color: var(--encre-douce); text-decoration: none; }
.pied nav a:hover { color: var(--accent-texte); text-decoration: underline; }
.pied__version { margin-top: 16px; color: var(--encre-invite); font-size: .8rem; }

/* Dans l'application, le pied suit le contenu : il ne se recentre pas
   sous le rail, il commence là où commence le tableau. */
.appli .pied > * { max-width: none; padding-inline: 0; }
.appli .pied { padding-inline: 30px; }

.page-texte {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}
.page-texte h2 { margin-top: 1.8em; }


/* ==================================================================
   17. L'ENQUETE SUR UN SITE
   ================================================================== */

/* Le formulaire d'enquête : un seul champ, large, et son bouton sur la
   même ligne au-dessus de 700 px. Un champ d'URL étroit ferait croire
   qu'on attend un mot-clé. */
.carte--enquete { margin: 24px 0 8px; }

.enquete-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}
.enquete-form .champ {
  /* min-width: 0 est OBLIGATOIRE sur un enfant de flexbox : sans lui il
     vaut auto, le champ refuse de rétrécir sous sa largeur intrinsèque
     et la carte déborde latéralement sur téléphone. Le défaut ne se
     voit sur aucun écran de bureau. */
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
}
.enquete-form .bouton { margin-top: 27px; }
@media (max-width: 700px) {
  .enquete-form .bouton { margin-top: 0; width: 100%; }
}

.carte__pied {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  color: var(--encre-douce);
  font-size: .88rem;
}

.rapport__meta {
  color: var(--encre-douce);
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Un compteur qui n'est PAS un filtre : même forme, mais il ne se
   clique pas. Le distinguer évite qu'on cherche à cliquer dessus. */
.compteur--fixe {
  border-color: var(--bordure);
  background: var(--fond-creuse);
  color: var(--encre-douce);
  cursor: default;
}
.compteur--alerte { font-weight: 600; }

/* La fiche d'identité légale : deux colonnes sur grand écran, une
   seule sous 640 px. */
.fiche-identite {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 22px;
  margin: 16px 0 0;
}
.fiche-identite dt {
  color: var(--encre-douce);
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fiche-identite dd { margin: 0; }
@media (max-width: 640px) {
  .fiche-identite { grid-template-columns: 1fr; gap: 2px 0; }
  .fiche-identite dd { margin-bottom: 10px; }
}

/* Les colonnes du tableau de contacts. Une adresse électronique longue
   ne doit pas casser la rangée en deux lignes (règle 11f) : elle se
   coupe avec des points de suspension, et le titre porte la valeur
   entière pour la souris. */
.cellule-contact { max-width: 320px; }
.cellule-origine { max-width: 280px; color: var(--encre-douce); font-size: .9rem; }
.lien-preuve { margin-left: 6px; white-space: nowrap; font-size: .85rem; }

/* Les constats de réputation. Un filet coloré à gauche, jamais un fond
   plein : quatre cartes rouges de suite ne se lisent plus. Et jamais la
   couleur SEULE (règle 10e) — le libellé dit toujours de quoi il
   s'agit. */
.constats { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.constat {
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--gris);
  border-radius: var(--rayon);
  background: var(--carte);
  padding: 14px 18px;
}
.constat--ok        { border-left-color: var(--vert); }
.constat--attention { border-left-color: var(--ambre); }
.constat--grave     { border-left-color: var(--rouge); }
.constat--info      { border-left-color: var(--bordure-appuyee); }
.constat__titre  { margin: 0 0 4px; font-weight: 600; }
.constat__detail { margin: 0; color: var(--encre-douce); }
.constat__source {
  margin: 8px 0 0;
  color: var(--encre-invite);
  font-size: .84rem;
}

.detail-sources {
  margin: 28px 0;
  padding: 16px 20px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-creuse);
}
.detail-sources summary { cursor: pointer; font-weight: 600; }
.detail-sources h4 { margin: 18px 0 6px; font-size: .95rem; }
.liste-pages {
  margin: 0;
  padding-left: 20px;
  color: var(--encre-douce);
  font-size: .9rem;
  word-break: break-all;
}

/* Un <form> est un ÉLÉMENT DE BLOC : posé entre deux boutons pour
   porter le jeton CSRF, il jette à la ligne tout ce qui suit, et aucun
   white-space: nowrap n'y peut rien puisque ce n'est pas un retour à la
   ligne du texte (règle 11f). */
.action-form { display: inline-block; margin: 0; }

/* Le second formulaire, replié : il ne doit pas peser autant que le
   premier, qui est le chemin normal. */
details.carte--enquete { padding: 16px 20px; }
details.carte--enquete summary { cursor: pointer; }
details.carte--enquete[open] summary { margin-bottom: 12px; }
details.carte--enquete .enquete-form { align-items: flex-end; }
details.carte--enquete .enquete-form .bouton { margin-top: 0; }


/* ==================================================================
   18. RESPIRATION ET COLONNES DE L'ENQUÊTE
   ==================================================================
   Le premier jet empilait tout sur une seule colonne, sans marge entre
   les blocs : les titres touchaient le texte du dessus, les cartes se
   collaient l'une à l'autre, et rien ne disait où finissait une section.
   Une page d'admin occupe toute la largeur (règle 11d) — encore
   faut-il s'en servir. */

/* Un bloc de page : ce qui sépare deux idées. La marge du HAUT est plus
   grande que celle du bas, pour que le titre d'une section reste
   attaché à ce qu'il annonce et détaché de ce qui précède. */
.bloc { margin: 34px 0 8px; }

/* Les titres respirent, et pas symétriquement — même raison. */
.contenu h2 { margin: 44px 0 6px; }
.contenu h3 { margin: 36px 0 6px; }
.contenu h4 { margin: 22px 0 6px; font-size: 1rem; }
.contenu > p { margin: 0 0 12px; }
.contenu .tableau-cadre { margin-bottom: 26px; }
.contenu .barre-outils { margin-top: 18px; }

/* Un texte courant ne se lit pas au-delà d'une certaine largeur : ce
   sont les CHAMPS et les PARAGRAPHES qu'on borne, jamais la page
   (règle 11d). 74 caractères environ. */
.prose { max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }

/* La carte de côté : même vocabulaire, ton plus discret. Elle porte un
   commentaire sur le contenu principal, elle ne le concurrence pas. */
.carte--note { background: var(--fond-creuse); }
.carte--note .carte__titre { font-size: 1rem; }
.carte--note .constats { margin-top: 12px; }
.carte--note .constat { padding: 11px 14px; }

.liste-brute { margin: 12px 0 0; padding: 0; list-style: none; }
.liste-brute li {
  margin-bottom: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--bordure-appuyee);
  color: var(--encre-douce);
  font-size: .92rem;
}
.liste-brute li:last-child { margin-bottom: 0; }

/* La colonne « fonction » : elle porte du texte libre relevé sur la
   page, donc de longueur imprévisible. Elle se coupe, elle ne fait pas
   grandir la rangée (règle 11f). */
.cellule-fonction {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Un intitulé RECONNU s'écrit normalement ; un simple voisinage de
   texte est grisé. Jamais la couleur seule (règle 10e) : l'infobulle
   dit en toutes lettres qu'aucun titre n'a été reconnu. */
.fonction-vague { color: var(--encre-invite); font-style: italic; }

/* Les cellules de tableau qui portent du texte long : elles se coupent
   au lieu de replier la rangée sur deux lignes. */
.cellule-contact, .cellule-origine {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dans une colonne étroite, la grille de la fiche d'identité repasse en
   une seule colonne bien avant le seuil général : deux colonnes dans
   un tiers d'écran ne laissent la place ni à l'une ni à l'autre. */
@media (max-width: 1100px) {
  .grille-2-1 .fiche-identite { grid-template-columns: 1fr; gap: 2px 0; }
  .grille-2-1 .fiche-identite dd { margin-bottom: 10px; }
}


/* ==================================================================
   19. LA FICHE UNIQUE, L'APERÇU ET LE CHOIX DE SITE
   ================================================================== */

/* .nombre aligne à DROITE — c'est fait pour une colonne de montants
   dans un tableau. Dans une liste de définitions, le <dd> occupe toute
   la colonne : le SIRET partait se coller au bord droit pendant que
   « Activité » restait à gauche, et la fiche semblait cassée. On garde
   les chiffres tabulaires, on rend l'alignement au texte. */
.fiche-identite dd.nombre { text-align: left; }

.carte--fiche { padding: 0; overflow: hidden; }
.carte--fiche > *:not(.apercu) { margin-left: 24px; margin-right: 24px; }
.carte--fiche > .carte__pied { margin-bottom: 20px; }
/* `.carte--fiche` est à `padding: 0` — l'aperçu doit toucher les bords.
   Ses enfants reçoivent donc leurs marges horizontales à la main, et
   le DERNIER a besoin d'une marge basse : sans elle, la fiche du
   prospect (qui n'a pas de `.carte__pied`) collait sa dernière ligne
   au bord inférieur. */
.carte--fiche > *:last-child { margin-bottom: 20px; }

/* La liste des origines interrogées : des puces discrètes, pas une
   énumération à points. Ce n'est pas le sujet de la carte, c'est ce
   qui explique ce qu'on va y trouver. */
.fiche__origines {
  list-style: none;
  padding: 0;
  margin: 10px 0 16px;
  font-size: .9rem;
  color: var(--encre-douce);
}
.fiche__origines li { padding: 3px 0 3px 16px; position: relative; }
.fiche__origines li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-texte);
}

/* L'aperçu : l'image que le site publie pour se représenter. Ratio
   large et hauteur bornée — une og:image fait souvent 1200×630, mais
   parfois 2000×2000, et la fiche entière disparaîtrait sous elle. */
.apercu { margin: 0 0 18px; }
.apercu__image {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  object-position: center;
  background: var(--fond-creuse);
  border-bottom: 1px solid var(--bordure);
}
.fiche__nom { margin-top: 20px; }
.fiche__marque { margin: 0 0 6px; color: var(--encre-douce); }
.fiche__accroche {
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 2px solid var(--bordure-accent);
  color: var(--encre-douce);
  font-style: italic;
}

/* Le choix du bon site. Des lignes cliquables entières, pas une case à
   cocher perdue devant un texte : la cible d'un clic doit faire la
   taille de ce qu'on désigne. */
.choix-site { margin-top: 18px; }
.choix-site__liste { border: 0; margin: 0 0 14px; padding: 0; }
.choix-site__liste legend {
  padding: 0;
  margin-bottom: 10px;
  font-weight: 600;
}
.choix-site__option {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 14px;
  margin-bottom: 6px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  cursor: pointer;
}
.choix-site__option:hover { border-color: var(--bordure-appuyee); }
.choix-site__option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-clair);
}
/* :has() n'est pas partout : le focus visible reste la garantie
   d'accessibilité, et il ne dépend d'aucun sélecteur moderne. */
.choix-site__option:focus-within { outline: 2px solid var(--accent-texte); outline-offset: 2px; }

/* La carte appelée depuis la page de recherche : elle porte déjà les
   informations, il faut qu'on la voie tout de suite. */
.carte--appelee { border-color: var(--accent); }

/* Un logo n'est pas une image de couverture : recadré en bandeau, il
   serait tronqué au tiers. On le pose entier, centré, sur le fond
   creux — la même place, un traitement différent. */
.apercu--logo .apercu__image {
  max-height: 130px;
  object-fit: contain;
  padding: 18px;
  background: var(--fond-creuse);
}

/* ==================================================================
   13. L'EQUIPE ET LES CREDITS RECHERCHE (2026-09-05)
   ================================================================== */

/* Un champ et son bouton sur UNE SEULE ligne, dans une barre d'outils.
   Sans cette règle, le <form> — élément de bloc — jetait le bouton
   « Inviter » sous le champ, et la barre doublait de hauteur. C'est le
   même piège que dans la colonne Actions d'un tableau (règle 11f), à
   ceci près qu'ici il faut aussi aligner verticalement. */
.ligne-champ {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ligne-champ .champ__saisie { width: auto; min-width: 15rem; }
/* Les libellés « Du » / « au » du filtre de dates : ils ne doivent pas
   se comporter comme des labels de formulaire empilés. */
.ligne-champ .champ__label { margin: 0; white-space: nowrap; }

/* Le lien d'invitation affiché quand le courriel n'est pas parti. Il
   doit pouvoir se sélectionner d'un trait pour être recopié — donc
   passer à la ligne plutôt que de déborder de sa carte. */
.lien-secours {
  display: block;
  padding: 12px 14px;
  background: var(--fond-creuse);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  font-size: .85rem;
  overflow-wrap: anywhere;
  user-select: all;
}

/* ------------------------------------------------------------------
   LA PROGRESSION D'UNE ENQUETE (2026-09-05)

   Elle existe parce que l'écran ne disait RIEN pendant que l'enquête
   tournait. Elle doit donc se voir : c'est le seul bloc de la page à
   ce moment-là, et il porte un accent.
   ------------------------------------------------------------------ */
.progression {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon-xl);
  padding: 28px 32px;
  margin: 34px 0 8px;
  max-width: 68ch;
}
.progression__titre { margin: 0 0 .4em; font-size: 1.3rem; }
.progression__cible { color: var(--encre-douce); margin: 0 0 18px; }

/* <progress> se style très différemment d'un navigateur à l'autre :
   on remet une base commune plutôt que d'obtenir une barre grise ici
   et une barre bleue système ailleurs. */
.progression__barre {
  width: 100%;
  height: 8px;
  appearance: none;
  border: none;
  border-radius: 4px;
  background: var(--fond-creuse);
  display: block;
}
.progression__barre::-webkit-progress-bar {
  background: var(--fond-creuse);
  border-radius: 4px;
}
.progression__barre::-webkit-progress-value {
  background: var(--accent);
  border-radius: 4px;
  transition: width .4s ease;
}
.progression__barre::-moz-progress-bar {
  background: var(--accent);
  border-radius: 4px;
}

.progression__etat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 14px 0 0;
  font-size: .95rem;
}
.progression__compte,
.progression__minuteur { color: var(--encre-douce); font-size: .86rem; }
/* Le minuteur change de valeur chaque seconde : sans chiffres à
   chasse fixe, toute la ligne tressaute au passage de 9 à 10. */
.progression__minuteur time { font-variant-numeric: tabular-nums; }

.progression__note {
  margin: 16px 0 0;
  font-size: .88rem;
  color: var(--encre-douce);
  line-height: 1.55;
}

/* Le bouton de secours et sa phrase sur une seule ligne : un <form>
   est un élément de bloc, sans cette règle la phrase passerait
   dessous et la carte s'allongerait pour rien. */
.progression__secours {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
}
.progression__secours .champ__aide { margin: 0; flex: 1 1 18rem; }


/* ==================================================================
   20. LA DÉMONSTRATION DE L'ENQUÊTE, SUR LA VITRINE
   ==================================================================
   Une capture de l'écran réel serait périmée au premier remaniement, et
   une capture d'image ne se lit pas au lecteur d'écran. On rejoue donc
   la mise en page en HTML : elle vieillit avec le produit. */

.demo--enquete .demo__duo {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--bordure);
}
@media (min-width: 860px) {
  .demo--enquete .demo__duo { grid-template-columns: 2fr 1fr; }
  .demo__signaux { border-left: 1px solid var(--bordure); }
}

.demo__fiche { padding: 0 0 20px; }
.demo__signaux { padding: 20px 22px; background: var(--fond-creuse); }

/* Le visuel : une zone tramée, pas une fausse photo. Inventer une image
   de boulangerie donnerait à croire qu'on la fabrique — or ce qu'on
   affiche est CELLE QUE LE SITE PUBLIE, et sa place seule le dit. */
.demo__visuel {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg,
      var(--fond-creuse), var(--fond-creuse) 10px,
      var(--carte) 10px, var(--carte) 20px);
  border-bottom: 1px solid var(--bordure);
  color: var(--encre-invite);
  font-size: .82rem;
  text-align: center;
  padding: 0 20px;
}
.demo__titre {
  margin: 18px 22px 2px;
  font-family: var(--serif);
  font-size: 1.05rem;
}
.demo__signaux .demo__titre { margin: 0 0 12px; }
.demo__marque { margin: 0 22px 14px; color: var(--encre-douce); font-size: .9rem; }

.demo__champs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 18px;
  margin: 0 22px;
  font-size: .9rem;
}
.demo__champs dt {
  color: var(--encre-invite);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.demo__champs dd { margin: 0; }
@media (max-width: 560px) {
  .demo__champs { grid-template-columns: 1fr; gap: 0; }
  .demo__champs dd { margin-bottom: 8px; }
}

.demo__constats { list-style: none; margin: 0; padding: 0; }
.demo__constat {
  margin-bottom: 10px;
  padding-left: 11px;
  border-left: 3px solid var(--bordure-appuyee);
  font-size: .88rem;
}
.demo__constat span {
  display: block;
  color: var(--encre-douce);
  font-size: .82rem;
}
/* Jamais la couleur seule (règle 10e) : chaque constat porte son
   libellé écrit, le filet ne fait que le hiérarchiser. */
.demo__constat--ok       { border-left-color: var(--vert); }
.demo__constat--occasion { border-left-color: var(--accent); }
.demo__constat--info     { border-left-color: var(--bordure-appuyee); }

.vitrine__actions { margin-top: 22px; }

/* ---------- Les recharges de recherches, sous les formules ----------
   Une ligne par paquet plutôt que des cartes : ce ne sont pas des
   formules concurrentes entre lesquelles on choisit une fois pour
   toutes, c'est le même produit en trois quantités. Des cartes
   feraient croire à un second étage de décision. */
.recharges {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .recharges { grid-template-columns: repeat(3, 1fr); } }

.recharge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px 18px;
}
.recharge__nom   { font-size: .92rem; color: var(--encre); }
.recharge__prix  { font-family: var(--serif); font-size: 1.5rem; color: var(--accent-texte); }
.recharge__unite { font-size: .82rem; color: var(--encre-douce); }

/* La colonne de cases à cocher d'un tableau.

   Largeur fixe et contenu centré : sans elle, la colonne prend la
   place que le navigateur veut bien lui laisser et la première
   colonne de texte se décale d'une ligne à l'autre.

   PAS DE `display: flex` SUR LA CELLULE : un <td> en flex sort du
   contexte de mise en forme du tableau et cesse d'obéir aux largeurs
   de colonne (règle 11f). On centre au texte. */
.colonne-coche {
  width: 40px;
  text-align: center;
  padding-right: 0;
}
.colonne-coche input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
}

/* Une case à cocher et son libellé sur une ligne, dans un formulaire.
   Sans cette règle, `.champ__label` est en display:block et la case
   se retrouve seule au-dessus de son texte. */
.champ--case .champ__label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-weight: 400;
  cursor: pointer;
}
.champ--case input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.champ--case .champ__aide { margin-top: 4px; padding-left: 25px; }