/* ==========================================================================
   Captivo — site.css
   Base, typographie, composants partagés.
   Dépend de tokens.css, chargé avant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--t-15);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* hidden veut dire caché, quel que soit le display du composant : sans
   cette règle, un .btn { display: inline-flex } l'emporterait sur
   l'attribut, et un bouton « caché » resterait à l'écran. */
[hidden] { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Choix d'audience : mêmes dimensions et contraste pour les deux réponses. */
.cookies { position: fixed; z-index: 1000; inset: auto 20px 20px;
  margin-inline: auto; max-width: 1040px; display: flex; align-items: center;
  gap: 28px; padding: 24px; background: var(--surface); color: var(--texte);
  border: var(--trait); border-radius: var(--rayon-large); box-shadow: var(--ombre);
  max-height: calc(100dvh - 40px); overflow: auto; font-size: var(--t-13); line-height: 1.6; }
.cookies p { margin: 0; }
.cookies .cookies-titre { font-size: var(--t-17); font-weight: 700; margin-bottom: 6px; }
.cookies-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookies-actions .btn { min-width: 100px; }
.pied-cookies { padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pied-cookies:hover { color: var(--sur-sombre); }
@media (max-width: 759px) {
  .cookies { inset: auto 12px 12px; flex-direction: column; align-items: stretch;
    gap: 16px; padding: 20px; max-height: calc(100dvh - 24px); }
  .cookies-actions .btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   2. Focus — corail, visible partout, jamais supprimé
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-decalage);
  border-radius: 1px;
}
/* Sur un aplat corail, le corail seul ne se verrait pas : on ajoute un
   liseré sombre entre le bouton et le contour. */
.btn--plein:focus-visible {
  outline-color: var(--corail-texte);
  box-shadow: 0 0 0 2px var(--fond);
}

/* Lien d'évitement */
.evitement {
  position: absolute; left: -9999px;
  background: var(--corail); color: var(--sur-corail);
  padding: var(--e-3) var(--e-4);
  font-weight: 600; z-index: 100;
}
.evitement:focus { left: var(--e-4); top: var(--e-4); }

/* --------------------------------------------------------------------------
   3. Typographie — Manrope, hébergée localement
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--titre); color: var(--encre); font-weight: 600;
  line-height: var(--interligne-titre); text-wrap: balance; margin: 0;
  letter-spacing: -.04em;
}
h1 { font-size: var(--t-38); line-height: var(--interligne-serre); letter-spacing: -.055em; }
h2 { font-size: var(--t-28); }
h3 { font-size: var(--t-20); letter-spacing: -.025em; }
h4 { font-size: var(--t-17); letter-spacing: -.015em; }
@media (min-width: 760px) {
  h1 { font-size: clamp(44px, 4.5vw, var(--t-64)); }
  h2 { font-size: var(--t-42); }
}
p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--texte); text-decoration-color: var(--sage); text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--corail-texte); }
strong { font-weight: 600; color: var(--encre); }
.surtitre { font-family: var(--mono); font-size: var(--t-11); font-weight: 400;
  text-transform: uppercase; letter-spacing: .10em; color: var(--sourdine); margin: 0 0 var(--e-5); }
.chapo { font-size: var(--t-17); color: var(--sourdine); max-width: var(--largeur-texte); }
.mesure { max-width: var(--largeur-texte); }
.tech { font-family: var(--mono); font-size: .92em; color: var(--encre); font-variant-numeric: tabular-nums; }
.sourdine { color: var(--sourdine); }
.liste { margin: 0 0 var(--e-4); padding-left: var(--e-5); }
.liste li { margin-bottom: var(--e-2); }
.liste li::marker { color: var(--corail-texte); }

/* --------------------------------------------------------------------------
   4. Mise en page — rythme, sections et largeur de lecture
   -------------------------------------------------------------------------- */

.conteneur { max-width: var(--largeur); margin: 0 auto; padding-inline: var(--e-5); }
@media (min-width: 760px) { .conteneur { padding-inline: var(--e-12); } }
.section { padding-block: var(--e-16); }
.section--dense { padding-block: var(--e-12); }
.section--ample { padding-block: var(--e-20); }
.section--profonde { background: var(--fond-profond); }
.section--surface { background: var(--surface); }
.section--filet-haut { border-top: var(--trait); }
@media (min-width: 760px) {
  .section { padding-block: var(--e-24); }
  .section--dense { padding-block: var(--e-16); }
  .section--ample { padding-block: var(--e-32); }
}
.entete-section { margin-bottom: var(--e-12); max-width: 900px; }
.entete-section h2 { max-width: 26ch; }
.entete-section p { color: var(--sourdine); max-width: var(--largeur-texte); margin-top: var(--e-4); }
.entete-section .surtitre { margin-top: 0; }

/* --------------------------------------------------------------------------
   5. Boutons et réassurance
   -------------------------------------------------------------------------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  font-family: var(--sans); font-size: var(--t-13); font-weight: 600; line-height: 1.4;
  padding: 14px var(--e-5); min-height: 48px; border-radius: var(--rayon);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition); }
.btn--plein { background: var(--corail); color: var(--sur-corail); border-color: var(--corail-texte); }
.btn--plein:hover { background: var(--corail-presse); border-color: var(--corail-presse); }
.btn--plein[href]::after { content: '↗'; font-size: 20px; font-weight: 400; margin-left: var(--e-3); }
.btn--secondaire { background: transparent; color: var(--texte); border-color: var(--filet); }
.btn--secondaire:hover { border-color: var(--sage); background: var(--surface); }
.btn--discret { background: transparent; color: var(--sourdine); padding-inline: var(--e-2); min-height: 44px; }
.btn--discret:hover { color: var(--corail-texte); }
.btn--large { min-height: 54px; padding-inline: var(--e-6); font-size: var(--t-13); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.groupe-btn { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.rassurance { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--e-1) var(--e-3); font-size: var(--t-12); line-height: 1.7; color: var(--sourdine); }
.rassurance li { display: inline; }
.rassurance li:not(:last-child)::after { content: ' ·'; color: var(--sourdine); padding-left: var(--e-3); }

/* --------------------------------------------------------------------------
   6. Cartes — surfaces claires et hiérarchie
   -------------------------------------------------------------------------- */

.carte { background: var(--surface); border: var(--trait); border-radius: var(--rayon-large); padding: var(--e-8); }
.carte h3, .carte h4 { margin-bottom: var(--e-3); }
.carte p { color: var(--sourdine); }
.carte p:last-child { margin-bottom: 0; }
.carte--accent { border-top: 3px solid var(--corail); }
.carte--haute { background: var(--surface-haute); }
a.carte { display: block; text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition); }
a.carte:hover { border-color: var(--sage); box-shadow: var(--ombre); }
a.carte:hover h3 { color: var(--corail-texte); }

/* --------------------------------------------------------------------------
   7. Tableaux
   Faits pour comparer : corps de texte à 15 px, remarques dans la couleur
   du texte courant, états toujours doublés du mot.
   Deux dispositions, choisies selon la place dont dispose le tableau et non
   selon la largeur de l'écran (requête de conteneur) :
   - 600 px et plus : la grille habituelle. L'en-tête de colonnes reste
     collé sous la barre du site pendant qu'on fait défiler la page ;
   - en dessous : chaque ligne devient un bloc. Son en-tête sert de titre,
     chaque cellule affiche son étiquette devant sa valeur, et une remarque
     longue passe sous son étiquette. Aucun défilement horizontal.
   Les étiquettes (data-label), les cellules vides (data-vide) et les rôles
   ARIA sont posés par outils/construire.py à partir de l'en-tête de
   colonne : on écrit un tableau HTML ordinaire, sans rien de plus.
   Groupes de lignes : un <tbody> par groupe, ouvert par
   <tr class="rubrique"><th scope="rowgroup" colspan="…">.
   Variante .tableau--matrice pour les tableaux dont toutes les colonnes
   comparent la même chose — des offres, des logiciels. Sur petit écran,
   les valeurs d'une ligne se rangent côte à côte, étiquette au-dessus ;
   --colonnes fixe leur nombre (2 par défaut).
   -------------------------------------------------------------------------- */

/* Le cadre ne coupe rien : pas d'overflow, qui ferait de lui un conteneur
   de défilement — l'en-tête collant se collerait au cadre au lieu de la
   page, c'était le défaut de l'ancienne version. */
.tableau-cadre {
  background: var(--surface);
  container: tableau / inline-size;
  border: var(--trait);
  border-radius: var(--rayon);
}
/* Navigateur sans requêtes de conteneur (avant 2023) : le tableau garde sa
   grille et défile dans son cadre plutôt que de déborder de la page. */
@supports not (container-type: inline-size) {
  .tableau-cadre { overflow-x: auto; }
}

/* La note qui suit un tableau ne colle pas à son cadre, y compris quand le
   filtre de compatibilité a inséré son message « aucune ligne » entre les deux. */
.tableau-cadre + p,
.tableau-cadre + .tableau-vide + p { margin-top: var(--e-4); }

.tableau {
  width: 100%;
  border-collapse: separate;   /* un en-tête collant garde ainsi ses filets */
  border-spacing: 0;
  font-size: var(--t-15);
  line-height: 1.5;
  color: var(--texte);
}
.tableau caption {
  text-align: left;
  padding: var(--e-4) var(--e-5);
  font-size: var(--t-15);
  color: var(--texte);
  border-bottom: var(--trait);
  background: var(--surface);
  border-radius: var(--rayon) var(--rayon) 0 0;
}
.tableau th, .tableau td {
  text-align: left;
  vertical-align: top;
  padding: var(--e-3) var(--e-5);
  border-bottom: var(--trait);
}
.tableau thead th {
  position: sticky;
  top: calc(var(--hauteur-entete) + 1px);
  z-index: 2;
  background: var(--surface);
  color: var(--encre);
  font-weight: 600;
}
.tableau tbody th { font-weight: 500; color: var(--encre); }
.tableau tbody:last-child tr:last-child > * { border-bottom: 0; }
.tableau tbody tr:not(.rubrique):hover > * { background: var(--surface); }
.tableau .col-tech { font-family: var(--mono); font-size: .92em; color: var(--encre); font-variant-numeric: tabular-nums; }
.tableau .cellule-note { color: var(--texte); }

/* Rubrique : le titre d'un groupe de lignes — « Reflex Canon », « DNP ». */
.tableau .rubrique th {
  background: var(--fond-profond);
  font-family: var(--titre);
  font-size: var(--t-17);
  font-weight: 700;
  line-height: var(--interligne-titre);
  color: var(--encre);
  padding-top: var(--e-5);
}

/* Disponibilité : « Inclus », « Non inclus », « Oui », « Non ». Le mot porte
   le sens, un trait dessiné en SVG le souligne : coche verte pour ce qui est
   là, tiret pour ce qui manque. Les formes sont pleines et sans couleur
   propre : elles servent de masque, la couleur vient des jetons. */
.dispo { display: inline-flex; align-items: baseline; gap: var(--e-2); }
.dispo::before {
  content: "";
  flex: none;
  align-self: center;
  width: 14px;
  height: 14px;
  background: var(--succes);
  -webkit-mask: var(--marque-oui) center / contain no-repeat;
  mask: var(--marque-oui) center / contain no-repeat;
}
.dispo--non { color: var(--sourdine); }
.dispo--non::before {
  background: var(--sourdine);
  -webkit-mask-image: var(--marque-non);
  mask-image: var(--marque-non);
}
:root {
  --marque-oui: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.6L3.4 6.2l2.3 2.3 4.9-5.2L12 4.7l-6.3 6.6z'/%3E%3C/svg%3E");
  --marque-non: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='2.5' y='6' width='9' height='2' rx='1'/%3E%3C/svg%3E");
}
@media (forced-colors: active) {
  .dispo::before { forced-color-adjust: none; background: CanvasText; }
}

/* Grand conteneur : une valeur technique courte ne se coupe pas à son
   tiret — « micro-USB » reste sur une ligne. */
@container tableau (min-width: 760px) {
  .tableau td.col-tech { white-space: nowrap; }
}

/* Petit conteneur : chaque ligne devient un bloc. */
@container tableau (max-width: 599.98px) {
  .tableau, .tableau caption, .tableau tbody, .tableau tr, .tableau th, .tableau td {
    display: block;
  }
  /* L'en-tête de colonnes quitte l'écran mais pas le tableau : les
     lecteurs d'écran continuent d'associer chaque cellule à sa colonne. */
  .tableau thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tableau tbody tr {
    --gouttiere: 7.5rem;
    padding: var(--e-4);
    border-bottom: var(--trait);
  }
  .tableau tbody:last-child tr:last-child { border-bottom: 0; }
  .tableau tbody tr > * { padding: 0; border-bottom: 0; }
  .tableau tbody tr:not(.rubrique):hover > * { background: none; }
  .tableau tbody tr.rubrique { background: var(--fond-profond); padding-block: var(--e-5) var(--e-3); }
  .tableau tbody .rubrique th { background: none; padding: 0; }
  .tableau tbody th[scope="row"] { font-size: var(--t-17); font-weight: 600; margin-bottom: var(--e-2); }

  /* Étiquette dans une gouttière à gauche, valeur à droite. La valeur
     garde sa mise en forme, liens et mots appuyés compris. */
  .tableau tbody td {
    display: flow-root;
    padding: 2px 0 2px var(--gouttiere);
  }
  .tableau tbody td::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    float: left;
    width: calc(var(--gouttiere) - var(--e-3));
    margin-left: calc(-1 * var(--gouttiere));
    font-family: var(--sans);
    font-size: var(--t-15);
    font-weight: 400;
    line-height: 1.5;
    color: var(--sourdine);
  }
  /* Une remarque, souvent longue, passe sous son étiquette. */
  .tableau tbody td.cellule-note { padding-left: 0; margin-top: var(--e-1); }
  .tableau tbody td.cellule-note::before { float: none; display: block; width: auto; margin: 0; }
  /* Une cellule vide n'a rien à montrer : retirée de l'écran, gardée pour
     les lecteurs d'écran, pour que le compte des colonnes reste juste. */
  .tableau tbody td[data-vide] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Matrice : valeurs côte à côte, étiquette au-dessus. */
  .tableau--matrice tbody tr:not(.rubrique) {
    display: grid;
    grid-template-columns: repeat(var(--colonnes, 2), minmax(0, 1fr));
    gap: var(--e-3);
  }
  .tableau--matrice .dispo { gap: 6px; }
  .tableau--matrice tbody th[scope="row"] { grid-column: 1 / -1; margin-bottom: 0; }
  .tableau--matrice tbody td { padding: 0; }
  .tableau--matrice tbody td::before { float: none; display: block; width: auto; margin: 0 0 2px; }
}

/* --------------------------------------------------------------------------
   8. Badges — porteurs de sens, jamais décoratifs
   -------------------------------------------------------------------------- */

/* Le badge suit la taille du texte qui l'entoure : 15 px dans un tableau,
   dans la légende. Casse normale, graisse moyenne — un état se lit, il ne
   se déchiffre pas. La pastille ronde double la couleur, le mot double la
   pastille : un daltonien lit l'état au mot. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--sans);
  font-size: inherit;
  font-weight: 500;
  line-height: 1.4;
  padding: 1px var(--e-2);
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--teste        { color: var(--succes);  border-color: var(--succes);  background: var(--succes-fond); }
.badge--non-teste    { color: var(--alerte);  border-color: var(--alerte);  background: var(--alerte-fond); }
.badge--non-supporte { color: var(--erreur);  border-color: var(--erreur); background: var(--erreur-fond); }
.badge--neutre       { color: var(--sourdine); border-color: var(--filet); background: transparent; }

/* Légende des badges, à placer près d'un tableau de compatibilité */
.legende-badges {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6);
  margin-top: var(--e-4);
  font-size: var(--t-15);
  color: var(--texte);
}
.legende-badges > * { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }

/* --------------------------------------------------------------------------
   9. Encadrés sémantiques
   -------------------------------------------------------------------------- */

.encadre {
  border: 1px solid var(--filet);
  border-left-width: 2px;
  border-radius: var(--rayon);
  padding: var(--e-4) var(--e-5);
  font-size: var(--t-13);
  color: var(--texte);
}
.encadre > :last-child { margin-bottom: 0; }
.encadre p { color: inherit; }
.encadre-titre {
  font-family: var(--mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 var(--e-2);
  font-weight: 500;
}

.encadre--succes { border-left-color: var(--succes); background: var(--succes-fond); }
.encadre--succes .encadre-titre { color: var(--succes); }
.encadre--alerte { border-left-color: var(--alerte); background: var(--alerte-fond); }
.encadre--alerte .encadre-titre { color: var(--alerte); }
.encadre--erreur { border-left-color: var(--erreur); background: var(--erreur-fond); }
.encadre--erreur .encadre-titre { color: var(--erreur); }
.encadre--note   { border-left-color: var(--corail-texte); background: var(--corail-fond); }
.encadre--note .encadre-titre { color: var(--corail-texte); }

/* --------------------------------------------------------------------------
   10. Blocs de code et valeurs techniques
   -------------------------------------------------------------------------- */

code {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--encre);
  background: var(--surface-haute);
  border: 1px solid var(--filet);
  border-radius: 2px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

pre {
  margin: 0;
  background: var(--fond-profond);
  border: var(--trait);
  border-radius: var(--rayon);
  padding: var(--e-4) var(--e-5);
  overflow-x: auto;
  font-size: var(--t-13);
  line-height: 1.7;
}
pre code {
  background: none; border: 0; padding: 0;
  color: var(--texte);
  font-size: inherit;
}
pre .cmt { color: var(--sourdine); }
pre .val { color: var(--corail-texte); }

/* Liste de spécifications — deux colonnes, filet entre chaque ligne */
.specs { background: var(--surface); border: var(--trait); border-radius: var(--rayon); margin: 0; overflow: hidden; }
.specs > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--e-5);
  padding: var(--e-3) var(--e-5);
  border-bottom: var(--trait);
  align-items: baseline;
}
.specs > div:last-child { border-bottom: 0; }
.specs dt { color: var(--sourdine); font-size: var(--t-13); }
.specs dd { margin: 0; font-family: var(--mono); font-size: var(--t-13); color: var(--encre); }
@media (max-width: 560px) {
  .specs > div { grid-template-columns: 1fr; gap: var(--e-1); }
}
/* Dans une colonne étroite, l'intitulé passe au-dessus de sa valeur plutôt
   que de la réduire à quelques caractères par ligne. */
/* Panneau latéral de Contact : un simple bloc, pas un repère imbriqué dans main. */
.contact-complement .specs > div { grid-template-columns: 1fr; gap: var(--e-1); }

/* Variante prose : les valeurs sont des phrases — ce qu'une fonction
   fait, ce qu'elle vous évite, sa limite. Le texte courant remplace la
   mono, qui reste réservée à ce qui se vérifie. */
.specs--prose dd { font-family: var(--sans); font-size: var(--t-15); color: var(--texte); }

/* --------------------------------------------------------------------------
   11. Accordéon
   -------------------------------------------------------------------------- */

.accordeon { border: var(--trait); border-radius: var(--rayon); overflow: hidden; }
.accordeon > * + * { border-top: var(--trait); }

.accordeon-tete {
  margin: 0;
}
.accordeon-bouton {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 0;
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t-15);
  font-weight: 500;
  line-height: 1.45;
  padding: var(--e-4) var(--e-5);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.accordeon-bouton:hover { background: var(--surface-haute); color: var(--corail-texte); }
.accordeon-bouton:focus-visible { outline-offset: -2px; }

/* Chevron dessiné au trait, dans l'esprit du monogramme : pas de
   bibliothèque d'icônes. */
.accordeon-chevron { flex: none; transition: transform var(--transition); }
.accordeon-chevron path { stroke: var(--sourdine); stroke-width: 1.5; fill: none; }
.accordeon-bouton[aria-expanded="true"] .accordeon-chevron { transform: rotate(90deg); }
.accordeon-bouton[aria-expanded="true"] .accordeon-chevron path { stroke: var(--corail); }

.accordeon-panneau {
  padding: 0 var(--e-5) var(--e-5);
  background: var(--surface);
  color: var(--sourdine);
  font-size: var(--t-13);
}
.accordeon-panneau > :last-child { margin-bottom: 0; }
.accordeon-panneau[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. Fil d'Ariane
   -------------------------------------------------------------------------- */

.fil { padding-block: var(--e-4); font-size: var(--t-12); }
.fil ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
}
.fil li { display: flex; align-items: center; gap: var(--e-2); color: var(--sourdine); }
.fil li + li::before {
  content: "/";
  color: var(--faible);
  font-family: var(--mono);
}
.fil a { color: var(--sourdine); text-decoration: none; }
.fil a:hover { color: var(--corail-texte); text-decoration: underline; text-underline-offset: 3px; }
.fil [aria-current="page"] { color: var(--texte); }

/* --------------------------------------------------------------------------
   13. Champs de formulaire
   -------------------------------------------------------------------------- */

.champ { margin-bottom: var(--e-5); }
.champ label {
  display: block;
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--texte);
  margin-bottom: var(--e-2);
}
.champ .aide { display: block; font-size: var(--t-12); color: var(--sourdine); font-weight: 400; margin-top: 2px; }

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="search"],
.champ select,
.champ textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--sage);
  border-radius: var(--rayon);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--t-15);
  padding: var(--e-3) var(--e-4);
  min-height: 44px;
}
.champ textarea { min-height: 132px; resize: vertical; line-height: var(--interligne); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: var(--focus);
  outline-offset: 0;
  border-color: var(--corail-texte);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--sourdine); }
.champ input[type="search"] { -webkit-appearance: none; appearance: none; }

.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--erreur); }
.message-erreur {
  display: flex; gap: var(--e-2);
  margin-top: var(--e-2);
  font-size: var(--t-12);
  color: var(--erreur);
}
.message-erreur[hidden] { display: none; }

/* Case à cocher — consentement RGPD */
.case { display: flex; gap: var(--e-3); align-items: flex-start; }
.case input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--corail-texte);
}
.case label { font-size: var(--t-13); font-weight: 400; color: var(--sourdine); margin: 0; }
.case label a { color: var(--texte); }

/* --------------------------------------------------------------------------
   14. Utilitaires
   -------------------------------------------------------------------------- */

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

.filet-haut { border-top: var(--trait); }
.filet-bas  { border-bottom: var(--trait); }

/* --------------------------------------------------------------------------
   15. En-tête — logo intégral sur cartouche sombre
   -------------------------------------------------------------------------- */

html { scroll-padding-top: calc(var(--hauteur-entete) + var(--e-6)); }
.entete { position: sticky; top: 0; z-index: 40; background: var(--fond); border-bottom: var(--trait); }
.entete-in { max-width: var(--largeur); margin: auto; height: var(--hauteur-entete);
  padding-inline: var(--e-5); display: flex; align-items: center; gap: var(--e-4); }
@media (min-width: 760px) { .entete-in { padding-inline: var(--e-12); } }
.entete-logo { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 168px; min-height: 49px; padding: 0; border-radius: 0;
  text-decoration: none; }
.entete-logo img { width: 168px; height: auto; }
.entete-nav { display: none; }
@media (min-width: 1120px) {
  .entete-nav { display: flex; align-items: center; gap: 22px; margin-inline: auto; font-size: var(--t-12); }
  .entete-nav a { color: var(--sourdine); text-decoration: none; padding-block: var(--e-3); }
  .entete-nav a:hover { color: var(--texte); }
  .entete-nav a[aria-current="page"] { color: var(--encre); box-shadow: inset 0 -2px 0 var(--corail); }
}
.entete-actions { display: flex; align-items: center; gap: var(--e-3); margin-left: auto; }
.btn--compact { min-height: 44px; padding: 11px 17px; font-size: var(--t-12); }
.entete-essai { white-space: nowrap; }
.entete-essai::after { display: none; }
.entete-burger { display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: var(--surface); border: var(--trait); border-radius: var(--rayon); cursor: pointer; }
.entete-burger rect { fill: var(--texte); }
.entete-burger:hover { border-color: var(--sage); }
@media (min-width: 1120px) { .entete-burger { display: none; } }
@media (max-width: 450px) {
  .entete-in { gap: 10px; padding-inline: 16px; }
  .entete-logo { width: 120px; min-height: 44px; padding: 0; }
  .entete-logo img { width: 120px; }
  .entete-actions { gap: 8px; }
  .entete-essai { padding-inline: 10px; font-size: 11px; }
}
@media (max-width: 359px) {
  .entete-in { padding-inline: 12px; gap: 6px; }
  .entete-logo { width: 98px; padding: 0; }
  .entete-logo img { width: 98px; }
  .entete-essai { font-size: 10px; padding-inline: 7px; }
}

/* --------------------------------------------------------------------------
   16. Menu plein écran — navigation et clavier
   -------------------------------------------------------------------------- */

.menu-plein { position: fixed; inset: 0; z-index: 50; background: var(--fond); overflow-y: auto; display: flex; flex-direction: column; }
.menu-tete { min-height: var(--hauteur-entete); padding: 16px var(--e-5); display: flex; align-items: center;
  justify-content: space-between; border-bottom: var(--trait); flex: none; }
.menu-fermer { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: var(--trait); border-radius: var(--rayon); cursor: pointer; }
.menu-fermer path { stroke: var(--texte); stroke-width: 1.5; }
.menu-liens { padding: var(--e-4) var(--e-5) var(--e-10); }
.menu-liens a { display: flex; align-items: baseline; gap: var(--e-4); padding: var(--e-4) 0;
  border-bottom: var(--trait); font-family: var(--titre); font-size: 23px;
  font-weight: 500; color: var(--encre); text-decoration: none; }
.menu-liens .numero { font-family: var(--mono); font-size: var(--t-11); color: var(--sourdine); flex: none; width: 24px; }
.menu-liens a[aria-current="page"] .numero { color: var(--corail-texte); }
.menu-liens .btn { margin-top: var(--e-8); padding: 16px; width: 100%; font-size: var(--t-15); color: var(--sur-corail); }

/* --------------------------------------------------------------------------
   17. Pied de page — contraste et logo intact
   -------------------------------------------------------------------------- */

.pied { --texte: var(--sur-sombre); --encre: var(--sur-sombre); --sourdine: var(--sourdine-sombre);
  --filet: var(--filet-sombre); --trait: 1px solid var(--filet);
  background: var(--cartouche); color: var(--sur-sombre); padding-block: var(--e-20) var(--e-8); font-size: var(--t-13); }
.pied-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-10) var(--e-6); }
@media (min-width: 900px) { .pied-colonnes { grid-template-columns: repeat(4, 1fr); gap: var(--e-8); } }
.pied-colonnes h2 { font-family: var(--mono); font-size: var(--t-11); font-weight: 400;
  text-transform: uppercase; letter-spacing: .10em; color: var(--sourdine); margin: 0 0 var(--e-5); }
.pied-colonnes ul { list-style: none; margin: 0; padding: 0; }
.pied-colonnes li { margin-bottom: var(--e-3); }
.pied-colonnes a { color: var(--texte); text-decoration: none; }
.pied-colonnes a:hover { text-decoration: underline; text-decoration-color: var(--corail-texte); }
.pied :focus-visible { outline-color: var(--corail); }
.pied-bas { margin-top: var(--e-12); padding-top: var(--e-8); border-top: var(--trait);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-5); color: var(--sourdine); font-size: var(--t-12); }
.pied-bas img { width: 180px; height: auto; padding: 10px 12px; background: var(--fond); border-radius: var(--rayon); }
.pied-mentions { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.pied-mentions a { color: var(--sourdine); }
.pied-plateforme { font-family: var(--mono); font-size: var(--t-11); color: var(--sourdine); }

/* --------------------------------------------------------------------------
   18. Ouvertures — accueil en deux colonnes, pages de contenu aérées
   -------------------------------------------------------------------------- */

.ouverture { padding-block: var(--e-12) var(--e-16); }
@media (min-width: 760px) { .ouverture { padding-block: var(--e-16) var(--e-20); } }
.ouverture h1 { max-width: 21ch; }
.ouverture .chapo { margin-top: var(--e-6); }
.ouverture .groupe-btn { margin-top: var(--e-8); }
.ouverture .surtitre::before { content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--corail); margin: 0 10px 1px 0; }
.fiche-technique { margin-top: var(--e-10); padding-block: var(--e-6); border-top: var(--trait);
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); font-size: var(--t-12); color: var(--sourdine); }
.fiche-technique span { display: inline-block; }
.fiche-technique span:not(:last-child)::after { content: '·'; color: var(--sage); margin-left: var(--e-5); }
.fiche-technique b { color: var(--encre); font-weight: 600; }
.prix-depart { margin-top: var(--e-6); padding: var(--e-6); background: var(--surface); border: var(--trait);
  border-radius: var(--rayon-large); max-width: var(--largeur-texte); }
.prix-depart-montant { font-family: var(--titre); font-size: 23px; line-height: 1.3; letter-spacing: -.03em;
  font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; margin-bottom: var(--e-2); }
.prix-depart-montant small { font-family: var(--sans); font-size: var(--t-15); color: var(--texte); }
.prix-depart p:last-child { font-size: var(--t-13); color: var(--sourdine); }
.accueil-composition { display: grid; gap: var(--e-10); align-items: center; }
.accueil-texte { min-width: 0; }
.accueil-composition h1 { font-size: clamp(38px, 4.25vw, 64px); letter-spacing: -.055em; max-width: 18ch; }
.accueil-composition h1 span { color: var(--sage); }
.accueil-composition .chapo { font-size: var(--t-15); max-width: 52ch; }
.accueil-composition .rassurance { max-width: 48ch; font-size: var(--t-11); }
.accueil-composition .btn--secondaire { border-color: transparent; padding-inline: var(--e-3); }
.accueil-ouverture .prix-depart { max-width: none; display: grid; gap: var(--e-3) var(--e-8); margin-top: 0; }
.accueil-ouverture .prix-depart-montant { margin: 0; }
@media (min-width: 1000px) {
  .accueil-composition { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-12); }
  .accueil-ouverture .prix-depart { grid-template-columns: 1fr 1.6fr; align-items: center; }
}
@media (max-width: 759px) {
  .accueil-composition h1 { font-size: clamp(38px, 11.7vw, 54px); letter-spacing: -.055em; }
  .accueil-ouverture .fiche-technique { margin-top: var(--e-10); }
}

/* --------------------------------------------------------------------------
   19. Séquence chronométrée
   Une durée à gauche, un filet vertical, l'étape à droite. Sert partout
   où l'on décrit un enchaînement mesuré.
   -------------------------------------------------------------------------- */

.sequence { list-style: none; margin: 0; padding: 0; }
.sequence li {
  display: grid;
  /* minmax(0, …) : un bloc de code dans une étape défile dans son cadre
     au lieu d'élargir la colonne, et la page, à 320 px. */
  grid-template-columns: 74px minmax(0, 1fr);
  gap: var(--e-5);
  padding-bottom: var(--e-6);
  position: relative;
}
.sequence li::before {
  content: "";
  position: absolute;
  left: 5px; top: 20px; bottom: -4px;
  width: 1px;
  background: var(--filet);
}
.sequence li:last-child { padding-bottom: 0; }
.sequence li:last-child::before { display: none; }

.sequence .duree {
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--corail-texte);
  font-variant-numeric: tabular-nums;
  padding-left: var(--e-5);
  position: relative;
  line-height: 1.7;
}
.sequence .duree::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 11px; height: 11px;
  border: 1px solid var(--corail);
  border-radius: 50%;
  background: var(--fond);
}
/* h3 sous un h2, h4 quand la séquence illustre une fonction déjà titrée en h3. */
.sequence :is(h3, h4) { font-family: var(--sans); font-size: var(--t-15); font-weight: 600; color: var(--encre); margin-bottom: var(--e-1); }
.sequence p { color: var(--sourdine); font-size: var(--t-13); }

@media (min-width: 760px) {
  .sequence li { grid-template-columns: 104px minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   20. Fonctions — cartes sur l’accueil, listes sur les pages de détail
   -------------------------------------------------------------------------- */

.fonctions { border-top: var(--trait); }
.fonctions > a, .fonctions > div { display: grid; gap: var(--e-2) var(--e-6); padding: var(--e-6) 0;
  border-bottom: var(--trait); text-decoration: none; color: inherit; }
@media (min-width: 760px) { .fonctions > a, .fonctions > div { grid-template-columns: minmax(190px, .7fr) minmax(0, 1.6fr); align-items: baseline; } }
.fonctions h2, .fonctions h3 { font-family: var(--sans); font-size: var(--t-17); font-weight: 600; color: var(--encre); }
.fonctions p { color: var(--sourdine); font-size: var(--t-15); margin: 0; }
.fonctions > a:hover :is(h2, h3) { color: var(--corail-texte); }
.fonctions--cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); border: 0; counter-reset: fonction; }
.fonctions--cartes > a, .fonctions--cartes > div { display: flex; flex-direction: column; align-items: stretch;
  padding: var(--e-8); border: var(--trait); background: var(--surface); border-radius: var(--rayon-large);
  min-width: 0; counter-increment: fonction; }
.fonctions--cartes > a::before, .fonctions--cartes > div::before { content: counter(fonction, decimal-leading-zero);
  font: var(--t-11) var(--mono); color: var(--sourdine); margin-bottom: var(--e-6); }
.fonctions--cartes h3 { font-size: var(--t-20); margin-bottom: var(--e-2); }
.fonctions--cartes p { font-size: var(--t-13); }
.fonctions--cartes > a:hover { border-color: var(--sage); }
@media (max-width: 999px) { .fonctions--cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .fonctions--cartes { grid-template-columns: 1fr; gap: var(--e-4); } .fonctions--cartes > a, .fonctions--cartes > div { padding: var(--e-6); } }

/* --------------------------------------------------------------------------
   21. Colonnes de texte asymétriques
   Pour les sections où un paragraphe porte l'argument et une colonne
   étroite porte la nuance ou la limite.
   -------------------------------------------------------------------------- */

.deux-tiers { display: grid; gap: var(--e-8); }
@media (min-width: 900px) {
  .deux-tiers { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--e-16); }
}
.deux-tiers > * { min-width: 0; }

/* Deux colonnes égales, pour deux objets de même rang : l'application
   sur le web et sur le téléphone, le forfait et ses options. */
.paire { display: grid; gap: var(--e-10); }
@media (min-width: 760px) {
  .paire { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-10) var(--e-12); }
}
.paire > * { min-width: 0; }

/* --------------------------------------------------------------------------
   22. Bandeau d’appel à l’action — conclusion claire
   -------------------------------------------------------------------------- */

.bandeau { background: var(--corail-sourd); border-top: var(--trait); padding-block: var(--e-20); }
.bandeau > .conteneur { display: grid; gap: var(--e-4) var(--e-12); }
.bandeau h2 { max-width: 22ch; }
.bandeau p { color: var(--sourdine); max-width: 56ch; margin-top: var(--e-2); }
.bandeau .groupe-btn { margin-top: var(--e-4); }
@media (min-width: 1100px) {
  .bandeau > .conteneur { grid-template-columns: 1.3fr 1fr; align-items: center; }
  .bandeau h2 { grid-row: 1 / 4; }
  .bandeau > .conteneur > .surtitre { grid-column: 1/-1; }
  .bandeau p, .bandeau .groupe-btn { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   23. Tarifs
   Trois offres côte à côte, puis le comparatif ligne à ligne en tableau.
   La bascule est une paire de boutons à état, pas un interrupteur : le
   libellé de chaque option reste lisible.
   -------------------------------------------------------------------------- */

.bascule {
  display: inline-flex;
  border: var(--trait);
  border-radius: var(--rayon);
  padding: 3px;
  background: var(--surface);
  gap: 3px;
}
.bascule button {
  font-family: var(--sans);
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--sourdine);
  background: transparent;
  border: 0;
  border-radius: 5px;
  padding: var(--e-3) var(--e-5);
  min-height: 44px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.bascule button:hover { color: var(--texte); }
.bascule button[aria-pressed="true"] { background: var(--corail); color: var(--sur-corail); }

.offres { display: grid; gap: var(--e-5); }
@media (min-width: 860px) { .offres { grid-template-columns: repeat(3, 1fr); } }

.offre {
  background: var(--surface);
  border: var(--trait);
  border-radius: var(--rayon);
  padding: var(--e-6);
  display: flex;
  flex-direction: column;
}
.offre--mise-en-avant { border-color: var(--corail-texte); background: var(--surface-haute); }

.offre h3 { font-size: var(--t-20); margin-bottom: var(--e-2); }
.offre .pour-qui { font-size: var(--t-15); color: var(--texte); margin-bottom: var(--e-5); }
/* La hauteur fixe n'aligne que des cartes côte à côte : pas une carte seule. */
@media (min-width: 860px) { .offres .offre .pour-qui { min-height: 4.9em; } }

.offre .prix {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  font-family: var(--titre);
  font-size: 76px;
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: 1;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.offre .prix .unite { font-family: var(--sans); font-size: 32px; letter-spacing: -.04em; color: var(--sourdine); }
.offre .periode { font-size: var(--t-13); color: var(--texte); margin-top: var(--e-2); }

/* Ce que l'offre contient : une coche pour ce qui est inclus, un tiret et
   la mention « Non inclus » — lue par les lecteurs d'écran — pour ce qui
   ne l'est pas. Plus de texte barré : il se lisait mal et s'entendait
   comme s'il était inclus. */
.offre .inclus-titre { font-size: var(--t-13); font-weight: 600; color: var(--encre); margin: var(--e-6) 0 0; }
.offre .inclus { list-style: none; margin: var(--e-3) 0 var(--e-6); padding: 0; font-size: var(--t-15); }
.offre .inclus-titre + .inclus { margin-top: var(--e-2); }
.offre .inclus li {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: var(--trait);
  color: var(--texte);
}
.offre .inclus li:last-child { border-bottom: 0; }
.offre .inclus li::before {
  content: "";
  flex: none;
  align-self: center;
  width: 14px;
  height: 14px;
  background: var(--succes);
  -webkit-mask: var(--marque-oui) center / contain no-repeat;
  mask: var(--marque-oui) center / contain no-repeat;
}
.offre .inclus li.absent { color: var(--sourdine); }
.offre .inclus li.absent::before {
  background: var(--sourdine);
  -webkit-mask-image: var(--marque-non);
  mask-image: var(--marque-non);
}
@media (forced-colors: active) {
  .offre .inclus li::before { forced-color-adjust: none; background: CanvasText; }
}
.offre .btn { margin-top: auto; }
.offre .rassurance { margin-top: var(--e-3); }

/* Le forfait seul, en carte large : sa liste passe sur deux colonnes dès
   que l'écran le permet. */
@media (min-width: 700px) {
  .offre .inclus--deux { columns: 1; }
  .offre .inclus--deux li { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   24. Blog
   La liste est une suite de lignes datées, pas une grille de vignettes.
   L'article garde la mesure de lecture du corps de texte.
   -------------------------------------------------------------------------- */

.liste-articles { border: 0; }
.liste-articles > article { border: var(--trait); background: var(--surface); border-radius: var(--rayon-large); padding: var(--e-8); margin-bottom: var(--e-5); }
@media (min-width: 860px) {
  .liste-articles > article { display: grid; grid-template-columns: 148px 1fr; gap: var(--e-8); }
  .liste-articles > article > * { min-width: 0; }
}
.liste-articles .meta {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--sourdine);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  margin-bottom: var(--e-3);
}
@media (min-width: 860px) {
  .liste-articles .meta { flex-direction: column; margin-bottom: 0; padding-top: 5px; }
}
.liste-articles h2 { font-size: var(--t-28); margin-bottom: var(--e-3); }
.liste-articles h2 a { color: var(--encre); text-decoration: none; }
.liste-articles h2 a:hover { color: var(--corail-texte); }
.liste-articles p { color: var(--sourdine); max-width: var(--largeur-texte); }

/* Corps d'article */
.article { max-width: var(--largeur-texte); }
.article > * + * { margin-top: var(--e-5); }
.article h2 {
  font-size: var(--t-28);
  margin-top: var(--e-12);
  padding-top: var(--e-6);
  border-top: var(--trait);
}
.article h3 { font-size: var(--t-17); font-family: var(--sans); font-weight: 600; margin-top: var(--e-8); }
.article > .encadre, .article > .tableau-cadre, .article > pre { margin-top: var(--e-8); }
.article > .encadre + p, .article > .tableau-cadre + p { margin-top: var(--e-8); }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--sourdine);
  padding-bottom: var(--e-6);
  border-bottom: var(--trait);
  margin-bottom: var(--e-10);
}

/* Sommaire d'article */
.sommaire {
  border-left: 2px solid var(--filet);
  padding-left: var(--e-5);
  margin: var(--e-8) 0;
}
.sommaire p {
  font-family: var(--mono); font-size: var(--t-11); text-transform: uppercase;
  letter-spacing: .12em; color: var(--sourdine); margin-bottom: var(--e-3);
}
.sommaire ol { list-style: none; margin: 0; padding: 0; font-size: var(--t-13); }
.sommaire li { margin-bottom: var(--e-2); }
.sommaire a { color: var(--texte); text-decoration: none; }
.sommaire a:hover { color: var(--corail-texte); }

/* Article annoncé mais pas encore écrit : pas de lien, pas de fausse date. */
.liste-articles h2.a-paraitre { color: var(--sourdine); }
.liste-articles .attente { color: var(--alerte); }

/* --------------------------------------------------------------------------
   25. États de formulaire
   Envoi en cours, confirmation, échec réseau. Le formulaire n'est jamais
   remplacé sans qu'on sache ce qui s'est passé.
   -------------------------------------------------------------------------- */

.confirmation {
  border: var(--trait);
  border-left: 2px solid var(--succes);
  border-radius: var(--rayon);
  background: var(--succes-fond);
  padding: var(--e-8);
  max-width: 560px;
}
.confirmation h2 {
  font-family: var(--sans);
  font-size: var(--t-17);
  font-weight: 600;
  color: var(--encre);
  margin-bottom: var(--e-3);
}
.confirmation p { color: var(--texte); font-size: var(--t-13); }
.confirmation[hidden] { display: none; }

.btn[data-envoi="en-cours"] { opacity: .6; pointer-events: none; }

/* Panne d'envoi : on rend l'adresse directe, tout de suite. */
.echec-envoi { margin-top: var(--e-5); }
.echec-envoi[hidden] { display: none; }

/* --------------------------------------------------------------------------
   26. Filtre de tableau
   Page compatibilité : une recherche par modèle, une marque, un état. Le
   filtre n'existe qu'avec JavaScript — le bloc porte hidden, site.js le
   retire. Sans script, tous les tableaux restent affichés en entier, et
   c'est aussi ce que lisent les moteurs de recherche.
   -------------------------------------------------------------------------- */

.filtre {
  display: grid;
  gap: var(--e-5);
  padding: var(--e-5);
  border: var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
}
.filtre[hidden] { display: none; }
@media (min-width: 900px) {
  .filtre { grid-template-columns: minmax(0, 1fr) minmax(0, 14rem) auto; align-items: end; }
  .filtre .filtre-etat, .filtre .filtre-pied { grid-column: 1 / -1; }
}
.filtre .champ { margin: 0; }
.filtre fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.filtre legend {
  padding: 0;
  margin-bottom: var(--e-2);
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--texte);
}

/* Choix exclusif : de vrais boutons radio, dessinés comme la bascule des
   tarifs. Le bouton natif reste dans la page — clavier, flèches, lecteur
   d'écran — mais quitte l'écran. */
.choix {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: var(--trait);
  border-radius: var(--rayon);
  background: var(--fond);
}
.choix label { position: relative; display: inline-flex; }
.choix input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
}
.choix span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--e-2) var(--e-4);
  border-radius: 2px;
  font-size: var(--t-15);
  font-weight: 500;
  color: var(--sourdine);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.choix span:hover { color: var(--texte); }
.choix input:checked + span { background: var(--corail); color: var(--sur-corail); }
.choix input:focus-visible + span { outline: var(--focus); outline-offset: var(--focus-decalage); }

.filtre-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.filtre-resultat { margin: 0; font-size: var(--t-15); color: var(--texte); }
.filtre-resultat strong { font-variant-numeric: tabular-nums; }

/* Lignes écartées par le filtre, et tableau sans aucune ligne restante. */
.tableau tr[hidden], .tableau tbody[hidden] { display: none; }
.tableau-vide {
  margin: 0;
  padding: var(--e-5);
  border: 1px dashed var(--filet);
  border-radius: var(--rayon);
  color: var(--texte);
}
.tableau-vide[hidden] { display: none; }

/* --------------------------------------------------------------------------
   27. Téléchargement depuis un téléphone ou un Mac
   Captivo s'installe sur un PC Windows. Le bloc le dit à tout le monde
   sans JavaScript ; avec, site.js le retire sous Windows et, sur téléphone,
   ajoute le bouton qui envoie le lien vers le PC par le menu de partage
   du téléphone. Aucune adresse n'est demandée ni collectée.
   -------------------------------------------------------------------------- */

.plateforme { margin-top: var(--e-6); max-width: var(--largeur-texte); }
.plateforme[hidden] { display: none; }
.plateforme .groupe-btn { margin-top: var(--e-4); }
.plateforme-etat { margin-top: var(--e-3); }
.plateforme-etat:empty { display: none; }
.lien-a-copier {
  display: block;
  width: 100%;
  margin-top: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--surface-haute);
  border: var(--trait);
  border-radius: var(--rayon);
  color: var(--encre);
  font-family: var(--mono);
  font-size: var(--t-13);
}
.lien-a-copier[hidden] { display: none; }

/* --------------------------------------------------------------------------
   28. Détail d'une fonction — page fonctionnalités
   Un bloc par fonction : son nom, la phrase qui dit ce qu'elle change,
   puis sa fiche en quatre lignes (.specs--prose) — ce qu'elle fait, ce
   qu'elle vous évite, le matériel, la limite. Même gabarit pour ce qui est
   inclus et pour ce qui est en option.
   -------------------------------------------------------------------------- */

.detail-fonction { padding-block: var(--e-12); border-top: var(--trait); }
.detail-fonction:last-child { padding-bottom: 0; }
.detail-fonction > h3 { font-size: var(--t-28); max-width: 26ch; }
@media (min-width: 760px) { .detail-fonction > h3 { font-size: var(--t-28); } }
.detail-fonction .accroche {
  font-size: var(--t-17);
  color: var(--texte);
  max-width: var(--largeur-texte);
  margin: var(--e-2) 0 var(--e-6);
}
/* --------------------------------------------------------------------------
   29. Studio clair — illustrations de principe et composition de l’accueil
   -------------------------------------------------------------------------- */
.studio-visuel { margin: 0; min-width: 0; }
.studio-repere { font: var(--t-11) var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--sourdine); margin-bottom: var(--e-5); }
.studio-cadre { background: var(--fond-profond); border-radius: var(--rayon-large); padding: 54px 24px 70px; position: relative; }
.studio-fenetre { background: var(--surface); border: var(--trait); border-radius: 10px; overflow: hidden; box-shadow: var(--ombre); }
.studio-barre { display: flex; align-items: center; gap: 16px; padding: 12px 14px; background: var(--surface-haute); border-bottom: var(--trait); }
.studio-logo { display: inline-flex; align-items: center; justify-content: center; background: var(--fond); padding: 5px 0; border-radius: 0; flex: none; }
.studio-logo img { width: 88px; height: auto; }
.studio-barre > span:last-child { font-size: 9px; color: var(--sourdine); }
.studio-ecran { display: grid; grid-template-columns: 110px minmax(0,1fr); min-height: 265px; }
.studio-sidebar { display: flex; flex-direction: column; gap: 18px; padding: 22px 12px; border-right: var(--trait); font-size: 9px; color: var(--sourdine); }
.studio-sidebar > span:first-child { color: var(--encre); font-weight: 600; }
.studio-composition { padding: 20px; }
.studio-composition > p { font-size: 12px; font-weight: 600; line-height: 1.45; margin-bottom: 17px; }
.studio-tirage { aspect-ratio: 1.35; background: var(--corail-sourd); padding: 9%; position: relative; overflow: hidden; isolation: isolate; }
.studio-tirage > span { display: block; font-family: var(--titre); font-size: clamp(28px,3.2vw,44px); line-height: .97; letter-spacing: -.06em; font-weight: 600; position: relative; z-index: 1; }
.studio-tirage small { display: block; font-size: 9px; margin-top: 15px; position: relative; z-index: 1; }
.studio-tirage i { position: absolute; width: 64%; aspect-ratio: 1; background: var(--corail); border-radius: 50%; right: -23%; bottom: -35%; z-index: -1; }
.studio-tirage b { font: 6px var(--mono); position: absolute; bottom: 7%; left: 9%; letter-spacing: .04em; }
.studio-etapes { display: flex; justify-content: space-between; gap: 8px; padding-top: 17px; font-size: 9px; }
.studio-etapes > span { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.studio-etapes svg { width: 17px; height: 17px; }
.studio-souvenir { position: absolute; width: 134px; right: -8px; bottom: -10px; transform: rotate(7deg); padding: 8px 8px 13px; background: var(--surface); box-shadow: var(--ombre); }
.studio-souvenir .studio-tirage > span { font-size: 26px; }
.studio-souvenir .studio-tirage small { font-size: 5px; margin-top: 6px; }
.studio-souvenir .studio-tirage b { font-size: 3px; }
.studio-souvenir > span { display: block; text-align: center; font-size: 7px; margin-top: 10px; }
.studio-visuel figcaption, .studio-schema figcaption { font-size: var(--t-11); line-height: 1.5; text-align: center; color: var(--sourdine); margin-top: 26px; }
.studio-schema { margin: var(--e-8) 0 0; border: var(--trait); border-radius: var(--rayon-large); background: var(--surface); padding: var(--e-6); }
.studio-schema-titre { font-size: var(--t-15); font-weight: 600; margin-bottom: var(--e-6); }
.studio-schema-etapes { display: grid; grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap: var(--e-4); }
.studio-schema-etapes > div { display: flex; flex-direction: column; gap: var(--e-2); border-radius: var(--rayon); background: var(--surface-haute); padding: var(--e-4); }
.studio-schema-etapes strong { font-size: var(--t-13); }
.studio-schema-etapes > div > span:last-child { font-size: var(--t-12); color: var(--sourdine); }
.studio-numero { font: var(--t-11) var(--mono); color: var(--corail-texte); padding-bottom: var(--e-3); }
.studio-schema--mobile { background: var(--fond-profond); }
.studio-telephone { margin: 10px auto; max-width: 218px; padding: 32px 16px 25px; background: var(--surface); border: 7px solid var(--encre); border-radius: 29px; box-shadow: var(--ombre); position: relative; }
.studio-telephone::before { content: ''; position: absolute; width: 55px; height: 8px; background: var(--encre); border-radius: 8px; top: 7px; left: calc(50% - 27px); }
.studio-telephone .studio-logo img { width: 76px; }
.studio-telephone > p { font-size: 21px; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; margin-block: 18px; }
.studio-telephone .studio-tirage > span { font-size: 29px; }
.studio-telephone .studio-tirage small { font-size: 7px; margin-top: 10px; }
.studio-telephone .studio-tirage b { font-size: 4px; }
.studio-reglages { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 20px; font-size: 9px; color: var(--sourdine); }
.studio-reglages span { border-bottom: var(--trait); padding-bottom: 5px; }
.demo-attente { margin-top: var(--e-8); padding: var(--e-12); border: var(--trait); border-radius: var(--rayon-large); background: var(--fond-profond); display: flex; align-items: center; gap: var(--e-8); }
.demo-attente p { margin: 0; font-size: var(--t-13); color: var(--sourdine); flex: 1; }
.demo-signe { font-size: 36px; color: var(--sourdine); }
@media (max-width: 759px) {
  .studio-cadre { padding: 35px 14px 46px; }
  .studio-ecran { grid-template-columns: 1fr; }
  .studio-sidebar { display: none; }
  .studio-composition { padding: 18px; }
  .studio-composition .studio-tirage { max-width: 330px; margin: auto; }
  .studio-tirage > span { font-size: 42px; }
  .studio-souvenir { width: 105px; right: 2px; }
  .studio-souvenir .studio-tirage > span { font-size: 21px; }
  .studio-barre { gap: 11px; }
  .studio-barre > span:last-child { font-size: 8px; }
  .studio-logo img { width: 76px; }
  .studio-schema-etapes { grid-template-columns: 1fr; }
  .demo-attente { padding: var(--e-6); flex-direction: column; align-items: start; gap: var(--e-4); }
}
/* Le prix de départ vit dans la colonne de texte de l'ouverture, entre le
   chapô et les boutons : il se lit sans défiler, à toutes les largeurs. */
.accueil-texte .prix-depart{margin-top:var(--e-6);grid-template-columns:1fr}

/* --------------------------------------------------------------------------
   30. Pages de lecture, support, contact et comparaison
   -------------------------------------------------------------------------- */
.page-document main > .conteneur { padding-block: var(--e-12) var(--e-20); }
.page-document .article { margin: auto; max-width: 790px; }
.page-document .article h1 { font-size: clamp(36px,4.2vw,58px); margin-bottom: var(--e-8); }
.page-document .article h2 { font-size: 28px; line-height: 1.25; }
.page-article article > header { margin: auto; max-width: 900px !important; padding-block: var(--e-8); }
.page-article article > header h1 { font-size: clamp(36px,4.1vw,58px); }
.page-article .article { margin: auto; max-width: 790px; }
.page-article .article h2 { font-size: 30px; }
body[data-page="contact"] form { background: var(--surface); border: var(--trait); border-radius: var(--rayon-large); padding: var(--e-8); }
body[data-page="contact"] .deux-tiers { align-items: start; }
body[data-page="tarifs"] .offre { padding: var(--e-10); border-radius: var(--rayon-large); }
body[data-page="tarifs"] .ouverture h1 { max-width: 22ch; }
body[data-page="compatibilite"] .filtre { padding: var(--e-8); border-radius: var(--rayon-large); }
body[data-page="comparatif"] .tableau .col-tech { white-space: normal; }
body[data-page="support"] .carte { min-height: 100%; }
body[data-page="404"] .ouverture { min-height: 62vh; }
@media (max-width: 759px) {
  body[data-page="contact"] form { padding: var(--e-5); }
  body[data-page="tarifs"] .offre { padding: var(--e-6); }
  body[data-page="compatibilite"] .filtre { padding: var(--e-5); }
  .page-document .article h2, .page-article .article h2 { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   31. Message ciblé
   Un encadré qui n'apparaît que lorsque l'adresse le vise
   (#installeur-indisponible) : _worker.js y renvoie quand l'installeur
   manque, au lieu d'afficher une page d'erreur.
   -------------------------------------------------------------------------- */

.si-cible:not(:target) { display: none; }
.si-cible { margin-top: var(--e-6); max-width: var(--largeur-texte); }

/* Recherche progressive du dépannage : aucune donnée transmise. */
.aide-recherche{padding-block:24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.aide-recherche h2,.aide-recherche label,.aide-recherche p{flex-basis:100%}
.aide-recherche h2{font-size:24px}.aide-recherche label{font-weight:600}
.aide-recherche input{flex:1;min-width:0;max-width:640px;padding:14px;border:1px solid var(--filet);border-radius:8px;background:var(--surface);font:inherit;color:var(--texte)}
.aide-recherche input:focus-visible{outline:3px solid var(--corail);outline-offset:3px}
@media(max-width:540px){.aide-recherche input{flex-basis:100%}}

.aide-recherche ul{flex-basis:100%;display:flex;flex-wrap:wrap;gap:10px 24px;padding-left:20px}.aide-recherche li{max-width:100%}.aide-recherche a{text-decoration:underline;text-underline-offset:3px}

/* Local support preparation and installer integrity */
.support-tool form{max-width:48rem}.support-tool label{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}.support-tool input,.support-tool select{max-width:100%;min-width:0;box-sizing:border-box;font:inherit;padding:.75rem;border:1px solid #aaa;background:#fff;color:#222}
.support-tool h3{margin-bottom:var(--e-2)}.support-tool fieldset{padding:1rem;border:1px solid #aaa}.support-tool fieldset label{flex-direction:row;align-items:center}.support-tool input[type=checkbox]{width:1.3rem;height:1.3rem;flex-shrink:0}
.support-tool pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.7}.support-tool code{overflow-wrap:anywhere;font-size:.8rem}.support-tool button{margin:.5rem .5rem .5rem 0;white-space:normal}.support-tool button:disabled{opacity:.5;cursor:not-allowed}.support-tool [role=status]{min-height:1.5em}