/* Copié par website/account/tools/construire-web.ts depuis specs/design/website/commun/site.css,
   habillage des planches retiré. Ne pas éditer ici : le reconstruire. */
/* ==========================================================================================
   Voxquel — couche commune du site et de l'espace client (lot WA, 28 septembre 2026)
   specs/design/website/commun/site.css — mode d'emploi complet : ../charte-web.md § 12

   À CHARGER, dans cet ordre, depuis une planche de lot (lot-wX/wXn.html) :
     <link rel="stylesheet" href="../../charte/jetons/tokens.css">
     <link rel="stylesheet" href="../../charte/composants/bundle.css">
     <script src="../../charte/composants/bundle.js"></script>
     <link rel="stylesheet" href="../commun/site.css">
     <script src="../commun/site.js"></script>          ← dans <head>, SANS defer (voir plus bas)

   LA RÈGLE DU FICHIER. Aucune couleur, aucun espacement, aucun rayon, aucune taille de texte écrits
   en dur : tout vient de tokens.css (var(--…) et ses classes .affiche, .chapeau, .titre-1, .titre-2,
   .corps, .etiquette, .legende, .valeur, .objet-brut). Ce que les jetons n'ont pas — points de rupture,
   largeur de lecture, filet, anneau de focus, taille d'icône… — est une propriété --site-… déclarée
   UNE fois ci-dessous et marquée « proposé — à reporter dans tokens.json ». Les seules longueurs
   écrites en px sont les cadres de planche (360, 768, 1280, et 320 / 180 pour le reflow et le zoom),
   qui viennent de maquette-website.md § 3, et la largeur minimale du logo (identite-visuelle.md § 2.3).
   Restent en em quelques ajustements typographiques (épaisseur d'un soulignement, alignement d'une
   icône sur la ligne), relatifs au texte qu'ils touchent, et les largeurs de l'habillage de planche
   (46em, 60em…), reprises des planches mobiles, hors produit.

   LA TYPOGRAPHIE. Un composant ne pose jamais de taille de texte : il se combine avec une classe de
   tokens.css, écrite dans le HTML (<a class="site-bouton appel etiquette">). La racine porte
   « site corps » : le corps est le texte hérité par défaut.

   LES LARGEURS. La mise en page répond à la largeur de .site (requêtes de conteneur), pas à celle de
   la fenêtre : en production, <body class="site corps"> ; dans une planche, un cadre .pl-cadre de
   360, 768 ou 1280 px contient un élément .site. CSS n'admet pas var() dans une condition @container :
   les points de rupture sont donc recopiés en littéral dans les requêtes, chacune annotée du nom de
   la propriété qu'elle recopie — c'est la seule valeur écrite deux fois dans ce fichier.

   ------------------------------------------------------------------------------------------
   L'API, en une ligne par entrée (détail et exemples : charte-web.md § 12 et les planches lot-wa/)
   ------------------------------------------------------------------------------------------
   PROPRIÉTÉS (proposé — à reporter dans tokens.json)
     --site-filet            1 px, dérivé d'espace-1 : filets et bordures
     --site-anneau           2 px, dérivé d'espace-1 : anneau de focus et son décalage, trait d'erreur
     --site-icone            24 px (espace-5) : icône courante · --site-icone-petite 16 px (espace-4)
     --site-lecture          30rem : la colonne de lecture (≈ 68 caractères de .corps, mesuré)
     --site-large            48rem : la zone où débordent tableaux et schémas
     --site-contenu          76rem : la largeur maximale du contenu (1280 − 2 × espace-6)
     --site-logo-largeur     180 px : logo complet au minimum (identite-visuelle.md § 2.3)
     --site-marque-largeur   40 px : la marque seule, avec sa vague, quand le logo complet ne tient pas
     --site-entete-hauteur   80 px (espace-8 + espace-4) : hauteur minimale de l'en-tête
     --site-signature-largeur 256 px (espace-8 × 4) : la signature idpact, pour que son nom tienne 13 px
     --site-case             16 px (espace-4) : une case de la jauge d'espace
     --site-cellule-min      8rem : largeur minimale d'une colonne de tableau qui défile
     --site-carte-min 14rem · --site-carte-large-min 20rem · --site-preuve-colonne-min 16rem
     · --site-pied-colonne-min 12rem : largeurs minimales de ce qui se replie · --site-detail-max 22rem
     --site-rupture-minuscule 18rem · --site-rupture-moyenne 37.5rem · --site-rupture-large 64rem
     --site-marge · --site-gouttiere · --site-colonnes · --site-section-pas : varient avec la largeur
     --site-fond-local       le fond de la section courante (fond ou surface), pour les cellules figées
     --site-montre-clair / --site-montre-sombre : bascule d'affichage selon le thème le plus proche
   STRUCTURE
     .site (racine, conteneur « site ») · .site-principal (main) · .site-section (+ .surface)
     .site-contenu : la grille de lecture ; ses enfants vont en colonne de lecture, sauf
        .site-large (déborde jusqu'à --site-large) · .site-plein (toute la largeur) · .site-aparte
     .site-section-tete (titre + chapeau) · .site-pile (+ .serree, .aeree) · .site-grille (+ .deux,
        .trois, .quatre) · .site-texte (texte long) · .site-fil (fil d'Ariane) · .site-cache
     data-lecture="colonne|grille|debords" sur .site : les trois réponses de WA1 (défaut : debords)
   EN-TÊTE ET PIED
     .site-evitement · .site-entete (+ .compte, état .ouvert) · .site-barre · .site-logo (quatre img :
        .complet/.marque × .encre/.papier) · .site-lieu · .site-menu-bouton · .site-panneau · .site-nav
        · .site-nav-liste · .site-nav-lien ([aria-current="page"]) · .site-nav-rubrique · .site-nav-ouvrir
        · .site-nav-sous · .site-actions · .site-sous-entete · .site-identite · .site-sous-nav
        · .site-nav-groupe · .site-nav-groupe-titre
     .site-pied · .site-pied-contenu · .site-pied-colonnes · .site-pied-titre · .site-pied-liste
        · .site-pied-bas · .site-signature (deux img .encre/.papier) · .site-theme ([data-site-theme])
   COMPOSANTS
     .site-bouton (+ .appel, .lien, .pleine ; [aria-disabled="true"] + .site-raison) · .site-boutons
     .site-lien (+ .sortant, .inactif) · .site-destination · les <a> nus d'un texte sont déjà des liens
     .site-champ (+ .erreur) · .site-champ-etiquette · .site-saisie · .site-saisie-groupe · .site-aide
        · .site-erreur · .site-case
     .site-message (+ .info, .question, .irreversible, .succes) · .site-message-corps · .site-message-mot
     .site-signe (svg : #i-signe-question, -irreversible, -succes, -erreur)
     .site-defile · .site-defile-annonce · .site-tableau (+ .fige) · th/td.nombre
     .site-plans · .site-plan (+ .actuel) · .site-plan-nom · .site-plan-prix · .site-plan-periode
        · .site-plan-liste
     .site-preuves · .site-preuves-colonne · .site-mention (+ .non-eprouve, .a-publier, .non-mesure,
        .a-rediger) · .site-reserve
     .site-source (WA2 A) · .site-renvoi + .site-notes (WA2 B) · .site-preuve + .site-preuve-detail
        (WA2 C, recommandée)
     .site-pastille (+ .succes, .question, .irreversible) · .site-espace · .site-espace-cases
        ([data-site-cases]) · .site-espace-seuil
     .site-icone (+ .petite) : <svg class="site-icone" aria-hidden="true"><use href="#i-menu"/></svg>
     .site-schema · .site-exemple · .site-exemple-etiquette · .site-replique (+ .vous, .agent)
   HABILLAGE DE PLANCHE (hors produit, préfixe pl-)
     .pl-planche · .pl-entete · .pl-meta · .pl-trois · .pl-axe · .pl-suppose · .pl-commandes
        · .pl-commande · .pl-bascule · .pl-section · .pl-mesure · .pl-note · .pl-variante
        · .pl-variante-tete · .pl-defile · .pl-rangee · .pl-vue · .pl-cadre ([data-largeur]) · .pl-legende
        · .pl-bilan · .pl-tableau (tr.reco) · .pl-recommandation · .pl-questions · .pl-mesurer
        · .pl-hors-fiche · .pl-specimens · .pl-specimen · .pl-tiers · .pl-tiers-bouton · .pl-colonnes
        · .pl-survol / .pl-focus (états forcés) · [data-nouveau] cerné sous data-pl-textes="cerner"
   ========================================================================================== */


/* ------------------------------------------------------------------------------------------
   1. Propriétés du site — proposé, à reporter dans tokens.json
   ------------------------------------------------------------------------------------------ */
:root {
  /* Filet et anneau : aucun jeton ne porte d'épaisseur (écart relevé par le lot A mobile). Dérivés
     d'espace-1 comme dans maquettes/lot-a/a4.html et a6.html, pour que le site et l'application
     parlent la même épaisseur. L'anneau de 2 px, décalé de 2 px, est celui d'accessibilite.md § 1. */
  --site-filet: calc(var(--espace-1) / 4);
  --site-anneau: calc(var(--espace-1) / 2);

  /* Icônes : aucun jeton de taille de pictogramme. 24 px dans le texte courant, 16 px dans une
     légende ou un lien de 13 à 16 px. Comme sur Android, une icône ne grandit pas avec le texte. */
  --site-icone: var(--espace-5);
  --site-icone-petite: var(--espace-4);

  /* La colonne de lecture. 30rem = 480 px à la taille par défaut : ≈ 68 caractères de .corps, mesuré
     dans Chrome sur l'accueil de site-vitrine.md (7,01 px par caractère en moyenne, 28/09/2026) ;
     ≈ 55 de .chapeau. Choisi au plus près des 66 caractères de la convention typographique —
     non mesuré sur des lecteurs. En rem pour suivre la taille de police du navigateur le jour où
     tokens.css passera en rem (charte-web.md § 11, proposition J3). */
  --site-lecture: 30rem;
  /* La zone de débord : assez pour le tableau des quatre plans (cinq colonnes d'environ 150 px). */
  --site-large: 48rem;
  /* Le contenu, au plus, marges non comprises : 1280 − 2 × espace-6. Au-delà, il se centre. */
  --site-contenu: 76rem;

  /* Le logo complet ne descend jamais sous 180 px (identite-visuelle.md § 2.3, logos/LISEZMOI.md) ;
     sous --site-rupture-minuscule, il cède la place à la marque seule, 40 px, avec sa vague (§ 2.3 :
     la vague tient jusqu'à 40 px). 40 = espace-6 + espace-2. */
  --site-logo-largeur: 180px;
  --site-marque-largeur: calc(var(--espace-6) + var(--espace-2));
  /* Le logo de 180 px mesure 44 px de haut ; sa respiration R vaut ≈ 18 px (R = 40 à la taille de
     référence de 393 px, § 2.2) : 44 + 2 × 18 ≈ 80 = espace-8 + espace-4. */
  --site-entete-hauteur: calc(var(--espace-8) + var(--espace-4));
  /* La signature idpact (logos/svg/voxquel-signature-idpact-*.svg) : la ligne « un logiciel idpact »
     occupe 23,2 unités de haut sur 393 de large (mesuré dans Chrome, getBBox). À 180 px, elle fait
     10,6 px — sous la taille plancher de 13 px ; à 256 px (espace-8 × 4), 15,1 px. */
  --site-signature-largeur: calc(var(--espace-8) * 4);

  --site-case: var(--espace-4);
  /* Une colonne de tableau ne descend pas sous 8rem (128 px) : en dessous, « 7,99 € / mois — 2 personnes
     incluses… » se coupe mot à mot. C'est ce qui fait défiler un tableau large plutôt que l'écraser ;
     8 et non 9 pour qu'un tableau de deux colonnes tienne encore à 360 (2 × (128 + 24) = 304 ≤ 328). */
  --site-cellule-min: 8rem;
  /* Largeurs minimales des cartes et des colonnes qui se replient (auto-fit) : en dessous, une carte de
     plan coupe « 39,90 € par mois, TTC » ; une colonne du pied, « Conditions générales de vente ».
     Choisies sur le corpus du site, pas mesurées sur des lecteurs. */
  --site-carte-min: 14rem;
  --site-carte-large-min: 20rem;
  --site-preuve-colonne-min: 16rem;
  --site-pied-colonne-min: 12rem;
  /* Le détail d'un badge de preuve : assez pour « publié par les auteurs du modèle — pas mesuré par nous ». */
  --site-detail-max: 22rem;
  /* Ajustements relatifs à la police, en em : ils suivent la taille du texte qu'ils touchent. */
  --site-soulignement-decalage: 0.2em;

  /* Points de rupture — documentés ici, recopiés en littéral dans les @container (voir l'en-tête).
     37.5rem (600 px) : sous elle, un téléphone (360 et 412 px) ; le menu se replie.
     64rem (1024 px) : au-dessus, douze colonnes et le rythme large des sections.
     18rem (288 px) : sous elle, le logo complet et ses marges ne tiennent plus (zoom de 200 % à 360). */
  --site-rupture-minuscule: 18rem;
  --site-rupture-moyenne: 37.5rem;
  --site-rupture-large: 64rem;

  /* Cadres de planche — maquette-website.md § 3 : 360 (le cadre étroit du mobile), 1280 (une
     convention d'écran portable, pas une mesure), 768 pour WA1 ; 320 pour le reflow, 180 = 360 à
     200 % de zoom. Hors produit. */
  --pl-cadre-etroit: 360px;
  --pl-cadre-moyen: 768px;
  --pl-cadre-large: 1280px;
  --pl-cadre-reflow: 320px;
  --pl-cadre-zoom: 180px;
  --pl-echelle: 1;
  /* Convention de planche reprise d'a6.html : les hachures marquent ce qui n'est pas à Voxquel. */
  --pl-hachure: repeating-linear-gradient(135deg, var(--surface-enfoncee) 0 var(--espace-1), var(--fond) var(--espace-1) var(--espace-2));
}

/* Le thème le plus proche décide : une propriété personnalisée hérite de l'ancêtre qui la définit,
   donc un cadre clair posé dans une page sombre montre bien le logo encre. Aucune couleur ici. */
:root, [data-theme="light"] { color-scheme: light; --site-montre-clair: block; --site-montre-sombre: none; }
[data-theme="dark"] { color-scheme: dark; --site-montre-clair: none; --site-montre-sombre: block; }


/* ------------------------------------------------------------------------------------------
   2. La racine
   ------------------------------------------------------------------------------------------ */
.site {
  container: site / inline-size;
  box-sizing: border-box;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-underline-offset: var(--site-soulignement-decalage);
}
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site :where(h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote, table, fieldset) { margin: 0; }
.site :where(fieldset) { padding: 0; border: 0; min-width: 0; }
.site :where(img, svg) { max-width: 100%; }
/* hidden l'emporte toujours : un composant qui pose display (un bouton, une annonce) ne doit pas le
   faire réapparaître. */
.site [hidden] { display: none !important; }

/* Les propriétés qui changent avec la largeur sont posées sur les enfants directs de .site : un
   conteneur ne peut pas s'interroger lui-même, ses descendants héritent. */
.site > * {
  --site-marge: var(--espace-4);
  --site-gouttiere: var(--espace-4);
  --site-colonnes: 4;
  --site-section-pas: var(--espace-7);
}
@container site (width >= 37.5rem) { /* --site-rupture-moyenne */
  .site > * { --site-marge: var(--espace-6); --site-gouttiere: var(--espace-5); --site-colonnes: 8; }
}
@container site (width >= 64rem) { /* --site-rupture-large */
  .site > * { --site-colonnes: 12; --site-section-pas: var(--espace-8); }
}

/* L'anneau de focus, partout : encre, jamais la primaire (accessibilite.md § 1). */
.site :focus-visible, .site .pl-focus {
  outline: var(--site-anneau) solid var(--focus);
  outline-offset: var(--site-anneau);
}

.site-cache {
  position: absolute !important; width: var(--site-filet); height: var(--site-filet); overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}


/* ------------------------------------------------------------------------------------------
   3. La grille, la colonne de lecture, le rythme
   ------------------------------------------------------------------------------------------ */
.site-section {
  --site-fond-local: var(--fond);
  padding-block: var(--site-section-pas);
  background: var(--site-fond-local);
}
/* L'alternance fond / surface sépare les sections sans ombre (design-system.md § 7). */
.site-section.surface {
  --site-fond-local: var(--surface);
  border-block: var(--site-filet) solid var(--trait);
}

/* La grille de lecture. Trois zones emboîtées, nommées : lecture ⊂ large ⊂ plein. Sous la rupture
   moyenne, les trois se confondent : une seule colonne, marges de 16 px. */
.site-contenu {
  display: grid;
  grid-template-columns: [plein-debut large-debut lecture-debut aparte-debut] minmax(0, 1fr) [aparte-fin lecture-fin large-fin plein-fin];
  row-gap: var(--espace-4);
  max-width: calc(var(--site-contenu) + 2 * var(--site-marge));
  margin-inline: auto;
  padding-inline: var(--site-marge);
}
/* Les lignes sont nommées -debut / -fin : il faut donc les écrire toutes deux (grid-column: lecture
   seul chercherait lecture-start, et créerait des pistes implicites). */
.site-contenu > * { grid-column: lecture-debut / lecture-fin; min-width: 0; }
.site-contenu > .site-large { grid-column: large-debut / large-fin; }
.site-contenu > .site-plein { grid-column: plein-debut / plein-fin; }
.site-contenu > .site-aparte { grid-column: aparte-debut / aparte-fin; }
/* Un titre qui suit un bloc prend un pas de plus : 16 + 16 = espace-6 entre deux sous-parties. */
.site-contenu > :is(h2, h3, .site-section-tete):not(:first-child) { margin-block-start: var(--espace-4); }

/* C — « débords » (défaut, recommandée par WA1) : la lecture au centre, tableaux et schémas
   débordent de part et d'autre jusqu'à --site-large, les cartes jusqu'au plein. */
@container site (width >= 37.5rem) { /* --site-rupture-moyenne */
  .site-contenu {
    --site-demi-debord: calc((var(--site-large) - var(--site-lecture)) / 2);
    grid-template-columns:
      [plein-debut] minmax(0, 1fr)
      [large-debut] minmax(0, var(--site-demi-debord))
      [lecture-debut aparte-debut] min(var(--site-lecture), 100%) [aparte-fin lecture-fin]
      minmax(0, var(--site-demi-debord)) [large-fin]
      minmax(0, 1fr) [plein-fin];
  }
  /* A — « une colonne » : tout dans la colonne de lecture ; un tableau large y défile. */
  [data-lecture="colonne"] .site-contenu {
    grid-template-columns: [plein-debut large-debut lecture-debut aparte-debut] min(var(--site-lecture), 100%) [aparte-fin lecture-fin large-fin plein-fin];
    justify-content: center;
  }
  /* B — « grille » : la lecture à gauche, la droite pour les notes (à partir de la rupture large)
     et pour ce qui déborde. */
  [data-lecture="grille"] .site-contenu {
    grid-template-columns:
      [plein-debut large-debut lecture-debut aparte-debut] min(var(--site-lecture), 100%) [lecture-fin aparte-fin]
      minmax(0, 1fr) [large-fin plein-fin];
  }
}
@container site (width >= 64rem) { /* --site-rupture-large */
  [data-lecture="grille"] .site-contenu {
    grid-template-columns:
      [plein-debut large-debut lecture-debut] min(var(--site-lecture), 100%) [lecture-fin]
      var(--site-gouttiere) [aparte-debut] minmax(0, 1fr) [aparte-fin large-fin plein-fin];
    column-gap: var(--site-gouttiere);
  }
  [data-lecture="grille"] .site-contenu > .site-aparte { align-self: start; }
}

.site-section-tete { display: grid; gap: var(--espace-3); }
.site-pile { display: grid; gap: var(--espace-4); align-content: start; }
.site-pile.serree { gap: var(--espace-2); }
.site-pile.aeree { gap: var(--espace-6); }

/* La grille à colonnes, pour des cartes : 4, 8 ou 12 colonnes selon la largeur ; les modificateurs
   disent combien de cartes par ligne au large, et se replient d'eux-mêmes. */
.site-grille {
  display: grid;
  gap: var(--site-gouttiere);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-carte-min)), 1fr));
}
.site-grille.deux { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-carte-large-min)), 1fr)); }
@container site (width >= 64rem) { /* --site-rupture-large */
  .site-grille.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-grille.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Un texte long (conditions, article de preuve) : les marges reviennent, dans la colonne. */
.site-texte > * + * { margin-block-start: var(--espace-4); }
.site-texte > :is(h2, h3) { margin-block-start: var(--espace-6); }
.site-texte :is(ul, ol) { padding-inline-start: var(--espace-5); }

/* Le fil d'Ariane : pour les pages-carrefours de WA3 (C). « › » est caché aux lecteurs d'écran. */
.site-fil ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--espace-2); }
.site-fil li + li::before { content: "›" / ""; margin-inline-end: var(--espace-2); color: var(--encre-secondaire); }
.site-fil a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
.site-fil [aria-current="page"] { color: var(--encre-secondaire); }


/* ------------------------------------------------------------------------------------------
   4. L'en-tête du site et de l'espace client
   ------------------------------------------------------------------------------------------ */
/* Le lien d'évitement : invisible jusqu'au premier Tab, puis au-dessus de tout. */
.site-evitement {
  position: absolute; inset-inline-start: var(--espace-4); inset-block-start: var(--espace-2);
  z-index: 2; transform: translateY(calc(-100% - var(--espace-4)));
  display: inline-flex; align-items: center; min-height: var(--cible-tactile);
  padding-inline: var(--espace-4); background: var(--surface); color: var(--encre);
  border: var(--site-anneau) solid var(--encre); border-radius: var(--rayon-2);
}
.site-evitement:focus, .site-evitement.pl-focus { transform: none; }
.site { position: relative; }

.site-entete { background: var(--fond); border-block-end: var(--site-filet) solid var(--trait); }
.site-barre {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo nav actions";
  align-items: center;
  column-gap: var(--espace-4);
  min-height: var(--site-entete-hauteur);
  max-width: calc(var(--site-contenu) + 2 * var(--site-marge));
  margin-inline: auto;
  padding-inline: var(--site-marge);
}
/* Le panneau porte la navigation et les actions ; au large, il s'efface de la grille. */
.site-panneau { display: contents; }
.site-logo { grid-area: logo; display: flex; align-items: center; gap: var(--espace-3); padding-block: var(--espace-4); text-decoration: none; color: var(--encre); }
.site-logo img { height: auto; }
.site-logo .complet { width: var(--site-logo-largeur); }
.site-logo .marque { width: var(--site-marque-largeur); }
.site-logo .complet.encre { display: var(--site-montre-clair); }
.site-logo .complet.papier { display: var(--site-montre-sombre); }
.site-logo .marque { display: none; }
@container site (width < 18rem) { /* --site-rupture-minuscule */
  .site-logo .complet { display: none !important; }
  .site-logo .marque.encre { display: var(--site-montre-clair); }
  .site-logo .marque.papier { display: var(--site-montre-sombre); }
}
/* Le lieu, à côté du logo dans l'en-tête propre de l'espace client : « Espace client ». Jamais le
   prénom d'un agent (identite-visuelle.md § 2.5). */
.site-lieu { color: var(--encre-secondaire); padding-inline-start: var(--espace-3); border-inline-start: var(--site-filet) solid var(--trait-fort); }
/* L'en-tête propre de l'espace client (W0, b) : le logo et le lieu, puis le retour à la vitrine. Pas de
   menu : tout ce qui concerne le compte est dans .site-sous-entete. */
.site-entete.compte .site-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--espace-4); }
.site-entete.compte .site-actions { flex-direction: row; width: auto; }
.site-entete.compte .site-actions > .site-nav-lien { width: auto; border: 0; background: none; padding-inline: 0; }

.site-nav { grid-area: nav; min-width: 0; }
.site-nav-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--espace-1); }
.site-nav-lien, .site-nav-ouvrir {
  display: flex; align-items: center; gap: var(--espace-1);
  min-height: var(--cible-tactile); padding-inline: var(--espace-2);
  color: var(--encre); text-decoration: none; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); border-radius: var(--rayon-1);
}
.site-nav-lien:hover, .site-nav-ouvrir:hover, .site-nav-lien.pl-survol {
  text-decoration: underline; text-decoration-color: var(--primaire); text-decoration-thickness: var(--site-anneau);
}
/* La page courante se lit sans la couleur : un soulignement épais, en encre. */
.site-nav-lien[aria-current="page"], .site-nav-lien[aria-current="true"] {
  text-decoration: underline; text-decoration-color: var(--encre);
  text-decoration-thickness: var(--site-anneau); text-underline-offset: var(--espace-2);
}
/* Les rubriques (WA3, variante B) : un bouton qui ouvre une liste ; jamais au survol seul. */
.site-nav-rubrique { position: relative; }
.site-nav-ouvrir .site-icone { width: var(--site-icone-petite); height: var(--site-icone-petite); }
.site-nav-ouvrir[aria-expanded="true"] .site-icone { transform: rotate(180deg); }
.site-nav-sous { list-style: none; margin: 0; padding: 0 0 0 var(--espace-4); display: grid; }
/* Avec script seulement, la liste flotte sous son bouton ; sans, elle reste dépliée en place. */
.site-js .site-nav-sous {
  padding: var(--espace-2); position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 3;
  min-width: var(--site-carte-min); background: var(--surface); border: var(--site-filet) solid var(--trait-fort); border-radius: var(--rayon-2);
}
.site-nav-sous[hidden] { display: none; }

.site-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--espace-2) var(--espace-3); }

.site-menu-bouton {
  grid-area: bouton; display: none; align-items: center; gap: var(--espace-2);
  min-height: var(--cible-tactile); min-width: var(--cible-tactile); padding-inline: var(--espace-3);
  background: var(--surface); color: var(--encre); border: var(--site-filet) solid var(--trait-fort);
  border-radius: var(--rayon-2); cursor: pointer; font-family: var(--font-sans); justify-self: end;
}
.site-menu-bouton .fermer, .site-entete.ouvert .site-menu-bouton .ouvrir { display: none; }
.site-entete.ouvert .site-menu-bouton .fermer { display: inline; }

/* Moyen : deux rangées — le logo et les actions, puis la navigation. L'ordre du focus reste celui
   du document (logo, navigation, actions) : il ne change pas le sens (charte-web.md § 4). */
@container site (width < 64rem) { /* --site-rupture-large */
  .site-barre {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo actions" "nav nav";
  }
  .site-nav { padding-block-end: var(--espace-2); }
  .site-nav-liste { margin-inline-start: calc(-1 * var(--espace-2)); }
}
/* Étroit : le logo et [Menu] ; le panneau se déplie dessous. Sans script, il reste déplié :
   le repli n'existe que si site.js a posé .site-js sur <html>. */
@container site (width < 37.5rem) { /* --site-rupture-moyenne */
  .site-barre { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo bouton" "panneau panneau"; column-gap: var(--espace-3); }
  .site-js .site-menu-bouton { display: inline-flex; }
  .site-panneau {
    grid-area: panneau; display: grid; gap: var(--espace-4);
    padding-block: var(--espace-2) var(--espace-5);
  }
  .site-js .site-entete:not(.ouvert) .site-panneau { display: none; }
  .site-panneau > * { grid-area: auto; }
  .site-nav { padding: 0; }
  .site-nav-liste { flex-direction: column; margin: 0; }
  .site-nav-liste > li { border-block-end: var(--site-filet) solid var(--trait); }
  .site-nav-lien, .site-nav-ouvrir { padding-inline: 0; width: 100%; justify-content: space-between; }
  .site-js .site-nav-sous, .site-nav-sous { position: static; padding: 0 0 var(--espace-2) var(--espace-4); border: 0; min-width: 0; background: none; }
  .site-actions { flex-direction: column; align-items: stretch; }
  .site-actions > * { width: 100%; }
  /* À l'étroit, « Espace client » prend la forme d'un bouton secondaire, à côté de l'appel. */
  .site-actions > .site-nav-lien { justify-content: center; border: var(--site-filet) solid var(--trait-fort); border-radius: var(--rayon-2); background: var(--surface); }
}

/* La barre de l'espace client : qui est connecté, à quel compte, et ses rubriques. Elle ne montre que
   ce que le serveur connaît (ADR-0021 § 2) : l'adresse, le type de compte, l'organisation. */
.site-sous-entete { background: var(--surface); border-block-end: var(--site-filet) solid var(--trait); }
.site-sous-entete > .site-barre { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "identite actions" "nav nav"; min-height: 0; padding-block-start: var(--espace-3); row-gap: var(--espace-1); }
.site-identite { grid-area: identite; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-1) var(--espace-3); min-width: 0; overflow-wrap: anywhere; }
.site-identite .site-icone { flex: none; }
.site-sous-nav { grid-area: nav; display: flex; flex-wrap: wrap; column-gap: var(--espace-6); }
/* Un groupe nommé de rubriques — pour un administrateur : « Votre compte », puis « Organisation ». */
.site-nav-groupe { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--espace-2); }
.site-nav-groupe-titre { color: var(--encre-secondaire); }
@container site (width < 37.5rem) { /* --site-rupture-moyenne */
  .site-sous-entete > .site-barre { grid-template-columns: minmax(0, 1fr); grid-template-areas: "identite" "actions" "nav"; }
  .site-sous-entete .site-actions { flex-direction: row; justify-content: flex-start; }
  .site-sous-entete .site-actions > * { width: auto; }
  .site-sous-nav .site-nav-liste { flex-direction: row; }
  .site-sous-nav .site-nav-liste > li { border: 0; }
  .site-sous-nav .site-nav-lien { width: auto; padding-inline: 0 var(--espace-4); }
}


/* ------------------------------------------------------------------------------------------
   5. Le pied de page, avec la signature idpact
   ------------------------------------------------------------------------------------------ */
.site-pied { background: var(--surface); border-block-start: var(--site-filet) solid var(--trait); padding-block: var(--espace-7); }
.site-pied-contenu { display: grid; gap: var(--espace-6); max-width: calc(var(--site-contenu) + 2 * var(--site-marge)); margin-inline: auto; padding-inline: var(--site-marge); }
.site-pied-colonnes { display: grid; gap: var(--espace-5) var(--espace-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-pied-colonne-min)), 1fr)); }
.site-pied-titre { color: var(--encre-secondaire); padding-block-end: var(--espace-1); }
.site-pied-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.site-pied-liste a { display: flex; align-items: center; min-height: var(--cible-tactile); }
.site-pied-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-4) var(--espace-6); padding-block-start: var(--espace-5); border-block-start: var(--site-filet) solid var(--trait); }
.site-signature { display: block; }
.site-signature img { width: var(--site-signature-largeur); height: auto; }
.site-signature .encre { display: var(--site-montre-clair); }
.site-signature .papier { display: var(--site-montre-sombre); }
.site-theme { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
.site-theme [aria-pressed="true"] { border-color: var(--encre); text-decoration: underline; text-decoration-thickness: var(--site-anneau); }


/* ------------------------------------------------------------------------------------------
   6. Boutons et liens
   ------------------------------------------------------------------------------------------ */
/* Le bouton : à combiner avec .etiquette. Par défaut, le secondaire — contour trait-fort. */
.site-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
  min-height: var(--cible-tactile); padding: var(--espace-2) var(--espace-5);
  border: var(--site-filet) solid var(--trait-fort); border-radius: var(--rayon-2);
  background: var(--surface); color: var(--encre);
  font-family: var(--font-sans); text-align: center; text-decoration: none; cursor: pointer;
}
/* L'appel : la primaire en fond, sur-primaire dessus (≥ 4,6:1 par construction, quelle que soit la
   primaire). Il ne dit rien de plus que les autres : il est seulement l'action de la page. */
.site-bouton.appel { background: var(--primaire); color: var(--sur-primaire); border-color: var(--primaire); }
/* Le bouton-lien : une action (pas une navigation) qui se lit comme un lien. */
.site-bouton.lien { background: none; border-color: transparent; padding-inline: 0; text-decoration: underline; text-decoration-color: var(--primaire); }
.site-bouton.pleine { width: 100%; }
/* Le survol se lit sans la couleur : un soulignement, et le contour passe en encre. */
.site-bouton:hover, .site-bouton.pl-survol { text-decoration: underline; text-decoration-thickness: var(--site-anneau); text-underline-offset: var(--espace-1); }
.site-bouton:not(.appel):not(.lien):hover, .site-bouton.pl-survol:not(.appel):not(.lien) { border-color: var(--encre); }
.site-bouton .site-icone { flex: none; }
/* Désactivé : seulement quand il y a une raison, et la raison se lit (.site-raison, reliée par
   aria-describedby). aria-disabled plutôt que disabled : le bouton reste dans l'ordre du focus. */
.site-bouton[aria-disabled="true"] {
  background: var(--surface-enfoncee); color: var(--encre-secondaire); border-color: var(--trait);
  text-decoration: none; cursor: not-allowed;
}
.site-raison { color: var(--encre-secondaire); }
.site-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); }
@container site (width < 37.5rem) { /* --site-rupture-moyenne */
  .site-boutons > .site-bouton:not(.lien) { flex: 1 1 100%; }
}

/* Le lien : en encre — le texte de lecture tient 7:1, la primaire ne tient que 4,5:1 —, souligné.
   Le soulignement prend la primaire, qui ne porte aucun sens : c'est sa présence qui dit « lien ». */
.site :where(a:not([class])), .site-lien, .site-renvoi {
  color: var(--encre);
  text-decoration: underline; text-decoration-color: var(--primaire);
  text-decoration-thickness: max(var(--site-filet), 0.07em); text-underline-offset: var(--site-soulignement-decalage);
}
.site :where(a:not([class])):hover, .site-lien:hover, .site-renvoi:hover, .site-lien.pl-survol {
  text-decoration-color: var(--encre); text-decoration-thickness: var(--site-anneau);
}
/* Le lien sortant le dit en mots (« sur le site de PayPal ») ; l'icône ne fait que le répéter. */
.site-lien.sortant .site-icone { width: var(--site-icone-petite); height: var(--site-icone-petite); vertical-align: -0.125em; margin-inline-start: var(--espace-1); }
.site-destination { color: var(--encre-secondaire); }
/* Un lien qui n'a pas encore de cible (l'article à publier) : pas de href, pas de soulignement,
   et la mention « à publier » à côté — ça se voit, et ça ne se clique pas. */
.site-lien.inactif { color: var(--encre-secondaire); text-decoration: none; cursor: default; }


/* ------------------------------------------------------------------------------------------
   7. Champs, erreurs, cases
   ------------------------------------------------------------------------------------------ */
.site-champ { display: grid; gap: var(--espace-1); max-width: var(--site-lecture); }
.site-champ-etiquette { color: var(--encre); }
/* La saisie : à combiner avec .corps. Fond enfoncé, bordure qui compte (design-system.md § 1.1). */
.site-saisie {
  width: 100%; min-height: var(--cible-tactile); padding: var(--espace-2) var(--espace-3);
  background: var(--surface-enfoncee); color: var(--encre);
  border: var(--site-filet) solid var(--trait-fort); border-radius: var(--rayon-2);
  font-family: var(--font-sans);
}
.site-saisie:hover, .site-saisie.pl-survol { border-color: var(--encre); }
.site-saisie-groupe { display: flex; gap: var(--espace-2); align-items: stretch; }
.site-saisie-groupe .site-saisie { flex: 1; min-width: 0; }
.site-saisie-groupe .site-bouton { flex: none; }
.site-aide { color: var(--encre-secondaire); }
/* Un champ mal rempli n'est ni irréversible ni un échec : ni rouge, ni ambre. Tirets épais en encre,
   « ! » dans un disque d'encre, et la phrase — la convention du code refusé d'a6.html. */
.site-champ.erreur .site-saisie, .site-saisie[aria-invalid="true"] { border: var(--site-anneau) dashed var(--encre); }
.site-erreur { display: flex; align-items: flex-start; gap: var(--espace-2); color: var(--encre); }
.site-erreur .site-signe { width: var(--site-icone-petite); height: var(--site-icone-petite); margin-block-start: 0.2em; }

/* La case : décochée par défaut, toujours ; la cible est la ligne entière (48 px au moins). */
.site-case { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espace-3); align-items: start; min-height: var(--cible-tactile); padding-block: var(--espace-3); cursor: pointer; max-width: var(--site-lecture); }
.site-case input[type="checkbox"], .site-case input[type="radio"] {
  inline-size: var(--espace-5); block-size: var(--espace-5); margin: 0; accent-color: var(--primaire); cursor: pointer;
}


/* ------------------------------------------------------------------------------------------
   8. Messages et signes
   ------------------------------------------------------------------------------------------ */
.site-message {
  display: grid; grid-template-columns: var(--site-icone) minmax(0, 1fr); gap: var(--espace-3); align-items: start;
  padding: var(--espace-4); background: var(--surface);
  border: var(--site-filet) solid var(--trait-fort); border-radius: var(--rayon-2);
}
.site-message-corps { display: grid; gap: var(--espace-2); min-width: 0; }
/* Information : aucun signe, aucune couleur réservée. */
.site-message.info { grid-template-columns: minmax(0, 1fr); }
/* Question fermée qui attend : ambre + « ? » + liseré encre (design-system.md § 1.2). L'ambre ne tient
   pas 3:1 sur une surface claire : c'est le liseré encre qui garantit la forme. */
.site-message.question { border: var(--site-anneau) solid var(--encre); }
.site-message.question .site-message-mot { color: var(--confirmation-texte); }
/* Irréversible ou échec : rouge + « ! » + un mot (« Définitif », « Échec »). */
.site-message.irreversible { border: var(--site-anneau) solid var(--irreversible); }
.site-message.irreversible .site-message-mot { color: var(--irreversible); }
/* Succès : vert + ✓ + un mot. Jamais « recommandé » : le vert dit qu'une chose a eu lieu. */
.site-message.succes { border-color: var(--succes); }
.site-message.succes .site-message-mot { color: var(--succes); }

.site-signe { width: var(--site-icone); height: var(--site-icone); flex: none; display: block; }
.site-icone { width: var(--site-icone); height: var(--site-icone); flex: none; display: inline-block; vertical-align: middle; color: currentColor; }
.site-icone.petite { width: var(--site-icone-petite); height: var(--site-icone-petite); }


/* ------------------------------------------------------------------------------------------
   9. Tableaux, et leur tenue à 360
   ------------------------------------------------------------------------------------------ */
/* Un tableau large vit dans .site-defile (tabindex="0", role="region", aria-labelledby) : il défile de
   côté sans faire défiler la page. .site-defile-annonce, posée JUSTE AVANT, le dit en mots : site.js
   la montre quand le tableau déborde vraiment, à toute largeur ; sans script, à l'étroit seulement. */
/* position: relative — sans elle, un .site-cache (positionné en absolu) placé dans un tableau qui défile
   prend la page pour repère et l'élargit : 640 px mesurés pour un cadre de 360 (lot WK), 222 px de
   débordement à 320 (lot WJ). Reporté le 29/09 depuis les deux planches qui l'avaient corrigé localement. */
.site-defile { overflow-x: auto; max-width: 100%; position: relative; }
.site-defile:focus-visible { outline-offset: calc(-1 * var(--site-anneau)); }
.site-defile-annonce { display: flex; align-items: center; gap: var(--espace-2); color: var(--encre-secondaire); }
.site-defile-annonce[hidden] { display: none; }
@container site (width >= 37.5rem) { /* --site-rupture-moyenne */
  :root:not(.site-js) .site-defile-annonce { display: none; }
}
.site-tableau { border-collapse: collapse; width: 100%; }
.site-tableau caption { text-align: start; padding-block-end: var(--espace-2); }
.site-tableau :is(th, td) { text-align: start; vertical-align: top; padding: var(--espace-3); border-block-end: var(--site-filet) solid var(--trait); }
.site-tableau thead th { border-block-end-color: var(--trait-fort); vertical-align: bottom; }
.site-tableau tbody th { font-weight: 600; }
.site-defile > .site-tableau :is(th, td) { min-width: var(--site-cellule-min); }
.site-tableau .nombre { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* La première colonne reste en place quand le tableau défile : on sait toujours de quelle ligne on lit. */
.site-tableau.fige :is(th, td):first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--site-fond-local, var(--fond)); box-shadow: inset calc(-1 * var(--site-filet)) 0 0 var(--trait); }


/* ------------------------------------------------------------------------------------------
   10. L'offre et les preuves
   ------------------------------------------------------------------------------------------ */
/* Les plans : même poids pour tous. Ni « recommandé », ni présélection, ni mise en avant. */
.site-plans { display: grid; gap: var(--espace-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-carte-min)), 1fr)); }
.site-plan {
  display: flex; flex-direction: column; gap: var(--espace-3);
  padding: var(--espace-5); background: var(--surface);
  border: var(--site-filet) solid var(--trait-fort); border-radius: var(--rayon-2);
}
.site-plan-nom { color: var(--encre); }
/* L'action d'une carte se pose en bas : les quatre boutons s'alignent, quelle que soit la liste. */
.site-plan > .site-bouton:last-child { margin-block-start: auto; }
.site-plan-prix { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--espace-2); }
.site-plan-periode { color: var(--encre-secondaire); }
.site-plan-liste { list-style: none; padding: 0; display: grid; gap: var(--espace-2); }
.site-plan-liste li { padding-block-start: var(--espace-2); border-block-start: var(--site-filet) solid var(--trait); }
/* « Votre plan » : un liseré encre et une pastille neutre — jamais le vert, jamais la primaire. */
.site-plan.actuel { border: var(--site-anneau) solid var(--encre); }

/* Le bloc de preuve : trois colonnes de même largeur et de même corps. La troisième — ce que nous
   n'avons pas encore mesuré — n'est jamais plus petite (site-vitrine.md § 3 Preuves). */
.site-preuves { display: grid; gap: var(--espace-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-preuve-colonne-min)), 1fr)); }
.site-preuves-colonne { display: grid; gap: var(--espace-3); align-content: start; padding-block-start: var(--espace-3); border-block-start: var(--site-anneau) solid var(--encre); }
.site-preuves-colonne > ul { list-style: none; padding: 0; display: grid; gap: var(--espace-4); }
.site-preuves-colonne > ul > li { display: grid; gap: var(--espace-1); }

/* Les mentions : un mot, en contour tireté, pour ce qui n'est pas encore vrai ou pas encore dit.
   Tireté en boîte — pas en soulignement, qui est le signe de l'origine « suggéré ». */
.site-mention {
  display: inline-flex; align-items: center; gap: var(--espace-1);
  padding-inline: var(--espace-2); border: var(--site-filet) dashed var(--trait-fort); border-radius: var(--rayon-1);
  color: var(--encre); white-space: nowrap; vertical-align: baseline;
}
/* La réserve en bloc : « Non éprouvé : … », à l'endroit où c'est affirmé. */
.site-reserve { color: var(--encre-secondaire); padding-inline-start: var(--espace-3); border-inline-start: var(--site-filet) dashed var(--trait-fort); }
.site-reserve b, .site-reserve strong { color: var(--encre); }

/* WA2, variante A — la source dans la phrase : le statut et le lien, entre parenthèses. */
.site-source { color: var(--encre-secondaire); }
/* WA2, variante B — la note numérotée : un renvoi « [1] » au corps du texte (un exposant tomberait
   sous la taille plancher de 13 px), et les notes en fin de section. */
.site-renvoi { font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-notes { padding-inline-start: var(--espace-5); display: grid; gap: var(--espace-2); color: var(--encre-secondaire); }
.site-notes li::marker { color: var(--encre); }
.site-notes :target { outline: var(--site-anneau) solid var(--focus); outline-offset: var(--site-anneau); }
/* WA2, variante C (recommandée) — le badge de preuve : un bouton dans la phrase, dont le mot EST le
   statut (« mesuré », « publié par ses auteurs », « pas encore mesuré »), qui déplie l'appareil, la
   date et la source. Popover déclaratif : aucun script ; sans prise en charge, le détail s'affiche en
   ligne, ce qui reste lisible. */
.site-preuve {
  display: inline-flex; align-items: center; gap: var(--espace-1); vertical-align: baseline;
  padding: 0 var(--espace-2); margin-inline: var(--espace-1);
  background: var(--surface); color: var(--encre);
  border: var(--site-filet) solid var(--trait-fort); border-radius: var(--rayon-1);
  font-family: var(--font-sans); cursor: pointer; white-space: nowrap;
}
.site-preuve:hover, .site-preuve.pl-survol { border-color: var(--encre); text-decoration: underline; }
.site-preuve .site-icone { width: var(--site-icone-petite); height: var(--site-icone-petite); }
/* Le détail suit le paragraphe : la flèche tourne quand il est ouvert (état réel du popover). */
p:has(+ .site-preuve-detail:popover-open) .site-preuve .site-icone { transform: rotate(180deg); }
.site-preuve-detail {
  margin: 0; padding: var(--espace-4); max-width: min(var(--site-detail-max), 100% - 2 * var(--espace-4));
  background: var(--surface); color: var(--encre);
  border: var(--site-filet) solid var(--trait-fort); border-radius: var(--rayon-2);
}
.site-preuve-detail dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espace-1) var(--espace-3); }
.site-preuve-detail dt { color: var(--encre-secondaire); }
@supports (position-area: bottom) {
  .site-preuve-detail:popover-open { inset: auto; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline; margin-block-start: var(--espace-1); max-width: min(var(--site-detail-max), 100vw - 2 * var(--espace-4)); }
}
/* Dans une planche, l'état déplié se montre à plat, sous la phrase. */
.site-preuve-detail.pl-ouvert { display: block; position: static; margin-block-start: var(--espace-2); }


/* ------------------------------------------------------------------------------------------
   11. Pastilles d'état et jauge d'espace
   ------------------------------------------------------------------------------------------ */
/* La pastille : un signe et un mot, à combiner avec .etiquette. Neutre par défaut — une licence
   valide ou une invitation envoyée ne sont ni une question, ni un échec, ni un contrôle réussi. */
.site-pastille {
  display: inline-flex; align-items: center; gap: var(--espace-1);
  padding: var(--espace-1) var(--espace-2); background: var(--surface); color: var(--encre);
  border: var(--site-filet) solid var(--trait-fort); border-radius: var(--rayon-1); white-space: nowrap;
}
.site-pastille .site-icone, .site-pastille .site-signe { width: var(--site-icone-petite); height: var(--site-icone-petite); }
/* Un contrôle réussi (un domaine vérifié, un paiement reçu) : vert, avec ✓ et le mot. */
.site-pastille.succes { border-color: var(--succes); }
.site-pastille.succes .site-icone { color: var(--succes); }
/* Une question attend la personne qui lit (une invitation qu'elle a reçue) : ambre, « ? », liseré. */
.site-pastille.question { border-color: var(--encre); }
/* Un échec (paiement refusé) : rouge, « ! », le mot. */
.site-pastille.irreversible { border-color: var(--irreversible); }

/* La jauge d'espace — pas une barre de progression (ton-editorial.md § 4.3 : il n'y en a qu'une,
   celle des octets reçus). L'espace se lit en chiffres et en lignes ; le dessin est une boîte de
   cases, une case pour une quantité fixe (10 Mo par défaut), dix par rangée : ce n'est pas une
   piste qui avance vers une fin, c'est une contenance. Les 80 % (ADR-0021, seuils) tombent à la
   fin de la quatrième rangée, marqués. Les cases sont posées par site.js depuis data-site-cases ;
   sans script, rien n'est dessiné et tout reste lisible. */
.site-espace { display: grid; gap: var(--espace-4); }
.site-espace-total { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--espace-2); }
.site-espace-cases { display: grid; grid-template-columns: repeat(10, var(--site-case)); gap: var(--espace-1); justify-content: start; }
.site-espace-cases > .case { width: var(--site-case); aspect-ratio: 1; border: var(--site-filet) solid var(--trait-fort); border-radius: var(--site-anneau); }
.site-espace-cases > .case.pleine { background: var(--encre-secondaire); border-color: var(--encre-secondaire); }
.site-espace-cases > .case.au-dela:not(.pleine) { border-style: dashed; }
.site-espace-seuil { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--espace-2); color: var(--encre-secondaire); border-block-start: var(--site-filet) dashed var(--trait-fort); padding-block-start: var(--espace-1); margin-block: var(--espace-1); }


/* ------------------------------------------------------------------------------------------
   12. Schémas, exemples de dialogue
   ------------------------------------------------------------------------------------------ */
/* Un schéma dessiné — jamais une capture de ce qui n'existe pas. */
.site-schema { display: grid; gap: var(--espace-3); padding: var(--espace-5); background: var(--surface); border: var(--site-filet) solid var(--trait); border-radius: var(--rayon-2); }
.site-schema figcaption { color: var(--encre-secondaire); }
/* L'exemple de dialogue, vitrine seulement : déclaré comme exemple, le nom lu dans une constante
   de la page (NOM_AGENT_EXEMPLE) et dit comme « le nom que l'on choisit ». */
.site-exemple { display: grid; gap: var(--espace-3); padding: var(--espace-4) var(--espace-5); background: var(--surface); border: var(--site-filet) solid var(--trait); border-radius: var(--rayon-2); }
.site-exemple-etiquette { color: var(--encre-secondaire); }
.site-replique { display: grid; gap: var(--espace-1); }
.site-replique .qui { color: var(--encre-secondaire); }
.site-replique.vous .dit::before { content: "«\00a0"; } .site-replique.vous .dit::after { content: "\00a0»"; }


/* ------------------------------------------------------------------------------------------
   13. Mouvement, couleurs forcées
   ------------------------------------------------------------------------------------------ */
/* Rien ne bouge sur le site qui ne porte une information : aucune transition n'est posée ici. Le
   bloc ci-dessous garantit qu'une planche qui en ajouterait une la perde en mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* En couleurs forcées (Windows), les formes survivent : bordures et cases redeviennent visibles. */
@media (forced-colors: active) {
  .site-bouton, .site-plan, .site-message, .site-pastille, .site-mention, .site-preuve { border-color: CanvasText; }
  .site-espace-cases > .case.pleine { background: CanvasText; }
}