/* La coque du site : ce que TOUTES les pages partagent (vague 7, lot R1).

   Avant ce lot, le site avait trois coques : l'accueil et l'assistance
   portaient 20 Ko de style en ligne chacun (dupliqué, jetons recopiés), les
   guides une feuille externe, les pages légales un style minimal sans
   en-tête, sans sélecteur de langue et sans mode sombre. Une correction de
   couleur se faisait trois fois — ou se perdait. Ici : les jetons, la
   police, l'en-tête, le pied, les boutons, les tableaux. Les feuilles de
   famille (contenu.css pour les articles, accueil.css, pages.css pour les
   pages légales et l'assistance) n'ajoutent que ce qui leur est propre.

   Les jetons sont ceux de l'APP (app/lib/theme/tokens.dart : brume, carte,
   encre, acier, vertBlouse, corailPouls, ligne, et leurs jumeaux sombres),
   pas une approximation : le site et l'application se reconnaissent. Les
   contrastes (AA : 4,5:1 pour le texte, 3:1 pour les contours qui portent
   une information) sont CALCULÉS par scripts/test_generer_site.py, dans les
   deux thèmes, sur ce fichier même — changer un jeton le fait rougir si une
   paire passe sous le seuil. */

/* ---- La police : Source Sans 3 (celle de l'app), servie par le site -------
   Deux graisses, sous-ensemble latin étendu (scripts/composer_polices_site.py),
   `swap` : le texte s'affiche tout de suite dans la police du système puis
   bascule sans attendre — jamais une page blanche le temps d'un fichier. Le
   Semibold sert aussi le 700 : c'est le w600 de l'app pour les titres. */
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("/assets/polices/SourceSans3-Regular-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 600 700;
  font-display: swap;
  src: url("/assets/polices/SourceSans3-Semibold-latin.woff2") format("woff2");
}

/* ---- Les jetons ------------------------------------------------------------ */
:root {
  color-scheme: light dark;
  --fond: #F1F5F3;          /* brume */
  --surface: #FFFFFF;       /* carte */
  --encre: #132420;
  --acier: #526663;         /* texte secondaire : 5,55:1 sur la brume */
  --vert: #0E6B5B;          /* vertBlouse : liens, boutons, titres de marque */
  --sur-vert: #F1F7F4;      /* surPrimaire : le texte posé SUR le vert */
  --corail: #F2604A;        /* corailPouls : DÉCOR seulement (pouls, tracés) */
  --corail-texte: #B3362B;  /* le corail qui ÉCRIT : la couleur « retard » de l'app */
  --bord: #E0E9E4;          /* ligne */
  --vert-doux: rgba(14, 107, 91, .09);
  --corail-doux: rgba(242, 96, 74, .12);
  --ombre: 0 2px 10px rgba(14, 60, 50, .08);
  --focus: #0E6B5B;
  --badge-fond: #132420;
  --badge-bord: #132420;
  --large: 980px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0E1613; --surface: #182420; --encre: #E3ECE8; --acier: #8FA6A0;
    --vert: #3AA98F; --sur-vert: #06231C; --corail: #F47B66;
    /* .10 et non .14 : la pastille vit AUSSI sur une carte (en-tête de tableau,
       langue courante du sélecteur) — vert sur ce fond tombait à 4,42:1. */
    --corail-texte: #F47B66; --bord: #24322D;
    --vert-doux: rgba(58, 169, 143, .10); --corail-doux: rgba(244, 123, 102, .16);
    --ombre: 0 2px 10px rgba(0, 0, 0, .35);
    --focus: #3AA98F;
    --badge-fond: #132420; --badge-bord: rgba(227, 236, 232, .38);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre); font-size: 18px;
  line-height: 1.6;
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto,
               sans-serif;
}
img, video { max-width: 100%; }
a { color: var(--vert); }
/* Un lien DANS une phrase se reconnaît à autre chose que sa couleur
   (WCAG 1.4.1) : il est souligné. Les liens à classe (cartes, badges,
   boutons, navigation) ont leur propre forme et n'en ont pas besoin. */
:where(p, li, td, summary, dd) a:not([class]) {
  text-decoration: underline; text-underline-offset: 2px;
}
.contenu { max-width: var(--large); margin: 0 auto; padding: 0 20px; }

/* ---- Accessibilité --------------------------------------------------------
   Le focus se VOIT partout (3 px, décalé, 3:1 contre le fond dans les deux
   thèmes) ; sur le bandeau vert, où le vert ne ressortirait pas, il prend la
   couleur du texte de la bande. Le lien d'évitement est le premier élément
   atteint à la tabulation : il saute l'en-tête vers le contenu. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.evitement {
  position: absolute; left: 12px; top: 0; z-index: 100;
  transform: translateY(-120%);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--vert); color: var(--sur-vert); font-weight: 600;
  border-radius: 0 0 12px 12px; text-decoration: none;
}
.evitement:focus { transform: none; outline-color: var(--encre); }
main:focus { outline: none; }
/* Le mouvement : aucune animation ne tourne sans raison sur ce site, et le
   film qui démarrait tout seul (formulaires.js) ne démarre plus pour qui a
   demandé moins de mouvement. Cette règle tient les futures transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---- L'en-tête : un seul, partout ------------------------------------------
   Marque à gauche ; à droite les sections, le bouton d'installation (sauf sur
   les pages légales et l'assistance), le menu et la langue. Le menu des
   sections et le sélecteur de langue sont des <details> natifs : ils
   s'ouvrent sans JavaScript, au clavier comme à la souris — décisif ici, la
   CSP du site n'accorde pas 'unsafe-inline' aux scripts, et une navigation
   qui dépendrait d'un script serait une navigation qui peut ne pas
   s'afficher.

   Toute cible de l'en-tête et du pied fait au moins 44 px de haut : c'est la
   cible tactile que l'app tient déjà (docs/tests-accessibilite.md). */
header.haut { padding: 10px 0; }
header.haut .contenu {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
}
/* Le nom est dans un <span> : sans lui, « Anima » et <b>Pulse</b> deviennent
   deux éléments flex séparés par le `gap` — « Anima  Pulse ». */
.marque {
  display: flex; align-items: center; gap: 10px; font-weight: 700;
  font-size: 21px; color: var(--encre); text-decoration: none; min-height: 44px;
}
.marque img { width: 34px; height: 34px; border-radius: 8px; }
.marque b { color: var(--vert); }
nav.ancres { margin-left: auto; display: flex; gap: 8px; align-items: center; }
nav.ancres a { color: var(--acier); text-decoration: none; font-size: 16px; }
nav.ancres a:hover { color: var(--vert); }
nav.ancres .sections { display: flex; gap: 4px; align-items: center; }
nav.ancres .sections a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 9px;
}
nav.ancres details { position: relative; }
nav.ancres summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 5px; min-height: 44px; min-width: 44px; justify-content: center;
  padding: 0 12px; border-radius: 99px; border: 1px solid var(--bord);
  color: var(--vert); font-weight: 600; font-size: 15px;
}
nav.ancres summary::-webkit-details-marker { display: none; }
nav.ancres summary:hover, nav.ancres details[open] summary { border-color: var(--vert); }
nav.ancres .ic {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
nav.ancres details[open] .chevron { transform: rotate(180deg); }
.panneau {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  display: flex; flex-direction: column; min-width: 190px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 12px;
  padding: 5px; box-shadow: var(--ombre);
}
nav.ancres .panneau a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 8px; font-size: 16px; color: var(--encre);
}
nav.ancres .panneau a:hover { background: var(--vert-doux); color: var(--vert); }
/* La langue courante reste dans la liste — la retirer obligerait à deviner
   où l'on est. Elle se marque à l'œil et, par aria-current, au lecteur
   d'écran. */
nav.ancres .panneau a[aria-current] { background: var(--vert-doux); color: var(--vert); font-weight: 600; }
nav.ancres .panneau a[aria-current]::before { content: "✓"; margin-right: 7px; }

/* Le bouton d'installation : le seul élément plein de l'en-tête. */
nav.ancres a.btn-installer {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 99px; background: var(--vert); color: var(--sur-vert);
  font-weight: 600; font-size: 16px; white-space: nowrap;
}
nav.ancres a.btn-installer:hover { color: var(--sur-vert); filter: brightness(1.12); }

/* Les sections en ligne sur ordinateur, dans le panneau du bouton menu sur
   mobile — l'une ou l'autre, jamais les deux. La bascule est un
   `display: none`, qui marche partout : révéler par CSS le contenu d'un
   <details> fermé aurait évité d'écrire les liens deux fois, mais un
   <details> fermé ne contribue pas à la largeur de son parent (mesuré à
   0 px) ; Chromium se rattrape, rien ne dit que Safari fasse pareil. */
@media (min-width: 861px) { nav.ancres .menu { display: none; } }
@media (max-width: 860px) {
  nav.ancres .sections { display: none; }
  nav.ancres .menu > .panneau { min-width: 210px; }
}
/* Sur un téléphone l'en-tête tient sur UNE ligne, dans les neuf langues (il en
   prenait deux, ~120 px : le héros de l'accueil descendait d'autant). Ce qui
   ne tient pas dans 320 px : le mot de la marque, la flèche du sélecteur de
   langue, des marges de 20 px. Le logo reste (c'est lui qu'on reconnaît ; le
   nom reste lu par les lecteurs d'écran, il n'est que rogné à l'œil) ;
   toutes les cibles gardent 44 px de haut. Calcul à 320 px (296 utiles) :
   logo 44 + bouton ≤ 112 (« Descarregar », le libellé le plus long) + menu 44
   + langue ≤ 66 + 3 écarts de 6 = 284. */
@media (max-width: 480px) {
  header.haut .contenu { flex-wrap: nowrap; gap: 6px; padding: 0 12px; }
  nav.ancres { gap: 6px; }
  nav.ancres a.btn-installer { padding: 0 12px; font-size: 15px; }
  nav.ancres summary { padding: 0 10px; }
  nav.ancres .langues .chevron { display: none; }
}
@media (max-width: 440px) {
  .marque { gap: 0; min-width: 44px; justify-content: center; }
  .marque span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

.pouls { border: none; border-top: 2.5px solid var(--corail); width: 90px; margin: 0 0 18px; }

/* ---- Les badges des boutiques ---------------------------------------------- */
.badges-store { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.badges-store a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  background: var(--badge-fond); border: 1px solid var(--badge-bord);
  border-radius: 9px; padding: 9px 15px; color: #fff; text-decoration: none;
}
.badges-store svg { width: 17px; height: 17px; fill: #fff; }
.badges-store span span { display: block; font-size: 11px; color: rgba(255, 255, 255, .8); }
.badges-store span b { display: block; font-size: 16px; line-height: 1.1; }
/* La boutique qui arrive : un mot sous les badges, pas un badge mort. */
.bientot-store { margin: 8px 0 0; color: var(--acier); font-size: 14px; }
/* Le chemin sans téléphone : discret sous les badges — un lien texte, pas un
   troisième bouton. */
.ouvrir-webapp { margin: 8px 0 0; font-size: 15px; }
.ouvrir-webapp a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--vert);
  font-weight: 600; text-decoration: none;
}
.ouvrir-webapp a:hover { text-decoration: underline; }

/* ---- Les cartes-liens partagées (accueil, pages produit) ------------------- */
.grille-fonctions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 6px 0 20px;
}
.carte-fonction {
  display: block; box-sizing: border-box; background: var(--surface);
  border: 1px solid var(--bord); border-radius: 14px; padding: 18px;
  text-decoration: none; box-shadow: var(--ombre);
}
.carte-fonction:hover { border-color: var(--vert); }
.carte-fonction :is(h2, h3) { margin: 0 0 6px; font-size: 18px; color: var(--vert); }
.carte-fonction p { margin: 0; color: var(--acier); font-size: 15.5px; }

/* ---- Les tableaux -----------------------------------------------------------
   Les tableaux de protocole sont larges (4 colonnes) : ils défilent DANS leur
   boîte, jamais la page. Constaté avant ce lot, à 360 px : le tableau était
   coupé à droite, sans rien qui dise qu'il continuait — la colonne « Ensuite »
   n'existait plus pour le lecteur. Le défilement est donc :
     · SIGNALÉ — des ombres de bord (`background-attachment: local` pour les
       caches, `scroll` pour les ombres) qui n'apparaissent que du côté où il
       reste du tableau ; elles disparaissent d'elles-mêmes au bout ;
     · ATTEIGNABLE au clavier — la boîte est une région étiquetée et focalisable
       (tabindex, role, aria-label posés par le générateur) : les flèches la
       font défiler ;
     · limité au tableau — la page ne bouge pas (vérifié à 360 px sur les 209
       pages). Le fond et la bordure vivent sur la boîte, pas sur le tableau :
       c'est ce qui laisse voir les ombres sous les cellules. */
.table-defilante {
  overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--bord);
  border-radius: 12px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--acier) transparent;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 36px 100% no-repeat local,
    linear-gradient(to right, rgba(19, 36, 32, .24), transparent) left center / 16px 100% no-repeat scroll,
    linear-gradient(to left, rgba(19, 36, 32, .24), transparent) right center / 16px 100% no-repeat scroll,
    var(--surface);
}
@media (prefers-color-scheme: dark) {
  .table-defilante {
    background:
      linear-gradient(to right, var(--surface) 30%, transparent) left center / 36px 100% no-repeat local,
      linear-gradient(to left, var(--surface) 30%, transparent) right center / 36px 100% no-repeat local,
      linear-gradient(to right, rgba(227, 236, 232, .3), transparent) left center / 16px 100% no-repeat scroll,
      linear-gradient(to left, rgba(227, 236, 232, .3), transparent) right center / 16px 100% no-repeat scroll,
      var(--surface);
  }
}
.table-defilante:focus-visible { outline-offset: 2px; border-radius: 12px; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 16px; }
/* Le comparatif Gratuit / Premium n'a que trois colonnes : il doit se LIRE
   d'un coup d'œil à 360 px, sans défilement — l'offre payante est la raison
   d'être de la page, elle ne peut pas attendre d'un geste que rien n'annonce.
   Il ne prend donc pas le `min-width` des tableaux de protocole (quatre
   colonnes, ceux-là défilent) ; sur téléphone il resserre ses marges et
   rapetisse un peu la police ; un mot trop long pour sa cellule peut se couper
   (`overflow-wrap: break-word`, qui ne réduit pas la largeur minimale des
   colonnes : « Illimités » et « GRATUIT » restent entiers). */
table.comparatif { min-width: 0; }
@media (max-width: 480px) {
  table.comparatif { font-size: 15px; }
  table.comparatif th, table.comparatif td { padding: 10px 7px; overflow-wrap: break-word; }
  table.comparatif thead th { font-size: 12.5px; letter-spacing: .02em; }
  /* La ligne des prix porte des mots très longs (« Einführungsangebot »,
     « Lebenszeit ») : seule elle a le droit de les couper — avec un trait d'union
     quand la langue sait où (`hyphens`), n'importe où en dernier recours. */
  table.comparatif .rang-prix td {
    font-size: 13.5px; hyphens: auto; overflow-wrap: anywhere;
  }
}
/* Un PRIX ne se coupe jamais (lot R2a) : « 2,99 €/Mo-nat » se lisait en allemand à
   360 px, la césure automatique de la ligne ci-dessus l'ayant pris pour un mot. Le
   générateur pose chaque montant (et son unité) dans un <span class="prix"> : il
   reste d'un seul tenant, sans césure, même quand `overflow-wrap: anywhere` du
   reste de la ligne l'autoriserait. */
.prix { white-space: nowrap; hyphens: none; overflow-wrap: normal; }
th, td { text-align: left; padding: 11px 14px; border-top: 1px solid var(--bord); }
thead th {
  border-top: none; background: var(--vert-doux); color: var(--vert);
  font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em;
}

/* ---- Les questions dépliables (accueil, assistance) ----------------------------
   Leur `summary` est en `display: flex` (cible de 44 px, texte centré à la
   verticale) : un `summary` qui n'est plus `list-item` perd son triangle natif,
   et plus rien ne dit que la question s'ouvre (constaté à la relecture de R1).
   Le marqueur natif est donc retiré partout et remplacé par un chevron dessiné
   en CSS — le même dans tous les navigateurs — qui tourne quand la question est
   ouverte. Le mouvement est de 0,15 s ; `prefers-reduced-motion` (plus haut) le
   ramène à rien : la question s'ouvre, le chevron se retourne, sans glisser. */
.faq summary { list-style: none; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2.5px solid var(--vert); border-bottom: 2.5px solid var(--vert);
  transform: translateY(-3px) rotate(45deg); transition: transform .15s ease;
}
.faq details[open] > summary::after { transform: translateY(3px) rotate(225deg); }

/* ---- Le pied : un seul, partout ---------------------------------------------- */
footer.pied { padding: 22px 0 40px; margin-top: 24px; border-top: 1px solid var(--bord);
              color: var(--acier); font-size: 15px; }
footer.pied .contenu { display: flex; gap: 0 18px; flex-wrap: wrap; align-items: center; }
footer.pied a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--acier);
  text-decoration: underline; text-underline-offset: 2px;
}
footer.pied a:hover { color: var(--vert); }
footer.pied nav { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; }

/* Légende d'une planche qui montre une fonction PREMIUM (bande de l'accueil,
   galerie de la visite guidée) : la mention est visible, pas seulement dans
   l'alt. Le corail qui ÉCRIT (--corail-texte), comme la pastille. */
.planche-premium { margin: 8px 2px 0; font-size: 13.5px; line-height: 1.35; color: var(--acier); }
.planche-premium b {
  color: var(--corail-texte); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}