/* ═══════════════════════════════════════════════════════════════════════════════
   Kalq · page de l'outil Impôt
   L'extension qui récupère les avis de taxe foncière et de CFE : ouverture, les quatre
   étapes de l'extension (01 à 04), ce que l'on récupère, les données, le prix. Les
   engagements, les questions et la demande d'accès viennent de commun.css. Chargée après
   commun.css.

   Les écrans de l'extension sont redessinés en HTML, sur papier comme dans l'extension,
   avec ses propres libellés et des dossiers fictifs. Leurs boucles ne bougent que par
   transformation ; sans script ou avec les animations réduites, chaque écran montre son
   état final.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Les couleurs de l'extension, sur papier dans les deux thèmes, comme ses écrans. */
:root { --ext-carte: #FFFFFF; --ext-vert: #18724A; --ext-vert-fond: rgba(24, 114, 74, 0.1); --ext-bouton: #1B2A41; --ext-coche: rgba(178, 58, 38, 0.06); }

/* ═══ Ouverture ═══════════════════════════════════════════════════════════════ */
/* L'ouverture tient l'écran, tout l'écran et rien que lui : la section suivante commence
   au pli. Les marges et le titre suivent la hauteur de la fenêtre ; sur une fenêtre trop
   basse pour tout contenir, l'ouverture s'allonge plutôt que de rogner. */
.ouverture { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding-block: calc(var(--entete) + clamp(16px, 3.5vh, 48px)) clamp(24px, 5vh, 64px); }
.ouverture-contenu { gap: clamp(16px, 3.2vh, 40px); }
.ouverture .titre-scan { font-size: clamp(2.6rem, min(1rem + 6.4vw, 12vh), 6.4rem); }
/* L'ouverture respire, et la ligne du titre, qui frôlait le chapeau et les boutons, garde
   de l'air dessous. Pas sur téléphone, où l'ouverture dépasse déjà l'écran. */
@media (min-width: 761px) {
  .ouverture-contenu { gap: clamp(18px, 4vh, 48px); }
  .ouverture-bas { margin-top: clamp(4px, 2.4vh, 28px); }
  .ouverture-actions { gap: clamp(18px, 3vh, 28px); }
}
/* Le chapeau et les actions se partagent la largeur : sans cela, la rangée d'assurances
   d'un seul tenant réduisait le chapeau à une colonne étroite de sept lignes. Les deux
   colonnes partent du même haut, sous la ligne, et chaque assurance prend sa ligne au
   lieu d'une rangée coupée en deux. */
@media (min-width: 1101px) {
  .ouverture-bas { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .ouverture .assurances { flex-direction: column; gap: 10px; }
}
/* La devise de l'extension, comme sur son écran de connexion. */
.devise-impot { font-family: var(--police-mono); font-size: var(--t-s); letter-spacing: 0.06em; color: var(--nuit-doux); }

/* ═══ Les étapes ══════════════════════════════════════════════════════════════ */
.etapes-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.etapes-tete .section-tete { margin-bottom: 0; }
.scenes-pause {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1px solid var(--filet-fort); background: transparent; color: var(--texte-doux); cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.scenes-pause:hover { color: var(--texte); border-color: var(--texte-doux); }
.scenes-pause svg { width: 12px; height: 12px; }
.scenes-pause .icone-lecture { display: none; }
.scenes-pause[aria-pressed="true"] .icone-pause { display: none; }
.scenes-pause[aria-pressed="true"] .icone-lecture { display: block; }
@media (prefers-reduced-motion: reduce) { .scenes-pause { display: none; } }

/* Une étape : son texte, et l'écran de l'extension à cette étape. Les côtés alternent. */
.etapes-liste { display: grid; gap: clamp(56px, 8vw, 112px); }
.etape { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
/* Quand l'écran passe à gauche, il garde la colonne large. */
.etape:nth-child(even) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.etape:nth-child(even) .etape-texte { order: 2; }
.etape-texte { display: grid; align-content: start; gap: 14px; }
.etape-rang { display: flex; align-items: center; gap: 12px; font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux); }
.etape-rang::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--accent); }
.etape-rang span { color: var(--accent-texte); }
.etape h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.12; }
.etape-texte > p:last-child { max-width: 32em; font-size: var(--t-l); color: var(--texte-doux); }
@media (max-width: 860px) {
  .etape, .etape:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .etape:nth-child(even) .etape-texte { order: 0; }
}

/* La scène : un bureau nuit au papier réglé, dans les deux thèmes, où l'écran est posé. */
.etape-scene {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: 340px;
  padding: clamp(18px, 3vw, 40px); border-radius: var(--rayon); border: 1px solid var(--nuit-filet); box-shadow: var(--ombre);
  background: var(--nuit) repeating-linear-gradient(to bottom, transparent 0 31px, var(--nuit-reglure) 31px 32px);
}

/* ═══ Les écrans de l'extension ═══════════════════════════════════════════════ */
/* Ses composants, à sa façon : cartes blanches sur papier, rang en mono précédé du trait
   rouge, puces vertes. Texte de 12 px au moins. */
.ext { position: relative; color: var(--papier-encre); font-size: 13px; line-height: 1.4; }
.ext-carte { display: grid; gap: 10px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--papier-filet); background: var(--ext-carte); box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.9); }
.ext-rang { display: flex; align-items: center; gap: 8px; font-family: var(--police-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--papier-doux); }
.ext-rang::before { content: ""; width: 16px; height: 2px; background: var(--papier-rature); }
.ext-titre { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.ext-texte { color: var(--papier-doux); }
.ext-puce {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; transform-origin: left center;
  font-size: 12.5px; font-weight: 600; color: var(--ext-vert); background: var(--ext-vert-fond);
}
.ext-puce::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ext-coche { width: 11px; height: 11px; }

/* 01 · Connexion : la page impots.gouv où l'on se connecte soi-même, puis l'extension. */
.scene-connexion { padding-bottom: clamp(56px, 7vw, 80px); }
.ext-fenetre { width: min(100%, 420px); border-radius: 12px; background: var(--papier); overflow: hidden; box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.9); }
.ext-barre { position: relative; display: flex; align-items: center; gap: 5px; height: 38px; padding-inline: 12px; background: #E6E8E1; font-family: var(--police-mono); font-size: 12px; color: var(--papier-doux); }
.ext-barre b { width: 8px; height: 8px; border-radius: 50%; background: rgba(27, 42, 65, 0.22); }
.ext-barre span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-icone { width: 20px; height: 20px; margin-left: auto; border-radius: 5px; }
/* Une fois la session ouverte, l'icône de l'extension prend sa pastille verte. */
.ext-barre::after { content: ""; position: absolute; right: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ext-vert); box-shadow: 0 0 0 2px #E6E8E1; }
.ext-portail { display: grid; gap: 12px; padding: 20px 22px 24px; }
.ext-champ { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; }
/* Un champ de saisie, toujours en place ; ce qu'on y tape apparaît lettre à lettre. Un
   cache de la couleur du champ couvre le texte et glisse d'un caractère à chaque frappe
   (police à chasse fixe : 1ch par caractère) ; son bord gauche porte le curseur. Au
   repos, le cache est au bout du texte : tout est tapé. --tape est la longueur tapée. */
.ext-champ i {
  position: relative; overflow: hidden; display: flex; align-items: center; height: 36px; padding-inline: 12px;
  border-radius: 8px; border: 1px solid var(--papier-filet); background: var(--ext-carte);
  font-family: var(--police-mono); font-size: 12.5px; font-style: normal; font-weight: 500; color: var(--papier-encre);
}
.ext-champ b { font-weight: inherit; }
.ext-saisie { white-space: nowrap; }
.ext-identifiant { --tape: 26ch; }
/* Le mot de passe : douze points, un tous les 1,2 caractère. */
.ext-mdp { --tape: 14.4ch; }
.ext-mdp .ext-saisie { width: var(--tape); height: 8px; background: radial-gradient(circle, var(--papier-encre) 2.6px, transparent 3.1px) 0 50% / 1.2ch 100% repeat-x; }
.ext-frappe { position: absolute; top: 0; bottom: 0; left: 12px; right: -1px; background: var(--ext-carte); transform: translateX(var(--tape)); }
.ext-frappe::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1.5px; background: var(--papier-encre); transform: scaleY(0); }
/* Le champ actif : un trait bleu sous lui, déroulé depuis la gauche. */
.ext-champ i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #2F6FDE; transform: scaleX(0); transform-origin: left center; }
.ext-bouton { justify-self: start; padding: 9px 18px; border-radius: 9px; background: var(--ext-bouton); color: #FFFFFF; font-size: 13px; font-weight: 600; transform-origin: center; }
/* La carte de l'extension monte une fois la session ouverte ; avant, elle attend sous le
   bord de la scène, qui la masque. */
.ext-connexion { position: absolute; right: clamp(18px, 3vw, 40px); bottom: clamp(18px, 3vw, 32px); width: min(72%, 330px); }
.ext-etat { padding-top: 2px; }
/* Sur téléphone, la carte de l'extension passe sous la page de connexion, sans la couvrir. */
@media (max-width: 600px) {
  .scene-connexion { padding-bottom: clamp(18px, 3vw, 40px); }
  .ext-connexion { position: relative; right: auto; bottom: auto; width: auto; margin: -18px 0 0 18px; }
}

/* 02 · Portefeuille : les dossiers de l'espace professionnel, cochés un à un. */
.ext-outils { display: flex; gap: 8px; }
.ext-outils span { padding: 7px 11px; border-radius: 8px; border: 1px solid var(--papier-filet); font-size: 12px; white-space: nowrap; }
.ext-recherche { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--papier-doux); }
.ext-coller { font-weight: 600; }
.ext-liste { display: grid; border-top: 1px solid var(--papier-filet); }
.ext-liste li { position: relative; isolation: isolate; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 36px; padding-inline: 8px; border-bottom: 1px solid var(--papier-filet); }
.ext-liste li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Une rangée cochée prend le voile rosé de l'extension. */
.ext-liste li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(238, 122, 99, 0.09); transform-origin: left center; }
/* Une case vide, que la coche remplit : la coche porte le fond, et apparaît avec lui. */
.ext-case { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid rgba(27, 42, 65, 0.45); }
.ext-case .ext-coche { width: 16px; height: 16px; padding: 2.5px; border-radius: 4px; background: var(--ext-bouton); color: #FFFFFF; transform-origin: center; }
.ext-siren { font-family: var(--police-mono); font-size: 12px; color: var(--papier-doux); }
.ext-pied { padding-top: 2px; }

/* 03 · Traitement : les réglages, puis la lecture des dossiers un par un. */
.ext-reglages { display: flex; flex-wrap: wrap; gap: 6px; }
.ext-choix, .ext-pilule { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ext-choix { border: 1px solid var(--papier-encre); }
.ext-choix .ext-coche { color: var(--papier-encre); }
.ext-pilule { background: var(--ext-bouton); color: #FFFFFF; }
.ext-suivi-cadre { position: relative; }
.ext-suivi { display: grid; border-top: 1px solid var(--papier-filet); }
.ext-suivi li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 36px; padding-inline: 4px; border-bottom: 1px solid var(--papier-filet); }
.ext-suivi li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-res { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ext-vert); background: var(--ext-vert-fond); transform-origin: right center; }
.ext-res-vide { color: var(--papier-doux); background: rgba(27, 42, 65, 0.07); }
/* La ligne de lecture parcourt la liste ; au repos, elle est au bas. */
.ext-lecture { position: absolute; inset: 0 -8px; pointer-events: none; transform: translateY(100%); }
.ext-lecture::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--papier-rature); box-shadow: 0 0 12px rgba(178, 58, 38, 0.45); }
.ext-progression { height: 3px; border-radius: 2px; background: var(--papier-filet); overflow: hidden; }
.ext-barre-avance { display: block; height: 100%; background: var(--papier-rature); transform-origin: left center; transform: scaleX(0.34); }
.ext-journal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--police-mono); font-size: 12px; color: var(--papier-doux); }

/* 04 · Résultats : l'arborescence enregistrée, dossier par dossier. */
.ext-chemin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--police-mono); font-size: 12px; color: var(--papier-doux); }
.ext-arbre { display: grid; gap: 2px; }
.ext-arbre li { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 9px; height: 30px; transform-origin: left center; }
.ext-arbre li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-arbre svg { width: 16px; height: 16px; }
.ext-dossier { font-weight: 600; }
.ext-dossier svg { color: var(--papier-rature); }
.ext-fichier { padding-left: 20px; font-family: var(--police-mono); font-size: 12px; }
.ext-fichier svg { color: var(--papier-doux); }
.ext-tableau { font-family: var(--police-mono); font-size: 12px; }
.ext-tableau svg { color: var(--ext-vert); }
.ext-dossier + .ext-fichier { margin-top: -2px; }
.ext-fichier + .ext-tableau { margin-top: 8px; }

/* ═══ Les boucles des écrans ══════════════════════════════════════════════════ */
/* Chaque pièce qui apparaît (.pas, ou un voile de rangée) part de sa forme cachée
   (--depuis), prend sa place à son tour, la garde, puis la rend en fin de boucle. Le
   script règle --etat : en marche à l'écran, à l'arrêt ailleurs, onglet caché ou à la
   demande. Seules des transformations sont animées. */
.etape-scene { --scene-duree: 8s; }
.ext-puce, .ext-res, .ext-barre::after { --depuis: scale(0); }
.ext-case .ext-coche { --depuis: scale(0); }
.ext-liste li::before { --depuis: scaleX(0); }
.ext-arbre li { --depuis: scaleX(0); }
@media (prefers-reduced-motion: no-preference) {
  .js .etape-scene :where(.ext-frappe, .ext-bouton, .ext-connexion, .ext-puce, .ext-case .ext-coche, .ext-res, .ext-arbre li, .ext-lecture, .ext-barre-avance),
  .js .etape-scene .ext-frappe::before, .js .etape-scene .ext-champ i::after, .js .etape-scene .ext-barre::after, .js .etape-scene .ext-liste li::before {
    animation-duration: var(--scene-duree); animation-iteration-count: infinite; animation-fill-mode: both;
    animation-timing-function: var(--courbe); animation-delay: 0.4s; animation-play-state: var(--etat, paused);
  }
  /* 01 : le champ actif s'allume, l'identifiant puis le mot de passe se tapent, le bouton
     est pressé ; la carte de l'extension monte, puis « Connecté ». */
  .js .scene-connexion .ext-identifiant i::after { animation-name: actif-identifiant; }
  .js .scene-connexion .ext-identifiant .ext-frappe { animation-name: frappe-identifiant; }
  .js .scene-connexion .ext-identifiant .ext-frappe::before { animation-name: curseur-identifiant; animation-timing-function: step-end; }
  .js .scene-connexion .ext-mdp i::after { animation-name: actif-mdp; }
  .js .scene-connexion .ext-mdp .ext-frappe { animation-name: frappe-mdp; }
  .js .scene-connexion .ext-mdp .ext-frappe::before { animation-name: curseur-mdp; animation-timing-function: step-end; }
  .js .scene-connexion .ext-bouton { animation-name: appui; }
  .js .scene-connexion .ext-connexion { animation-name: carte-arrivee; }
  .js .scene-connexion .ext-puce, .js .scene-connexion .ext-barre::after { animation-name: pas-7; }
  /* 02 : les dossiers cochés un à un, puis le compte. */
  .js .scene-portefeuille li:nth-child(1) :is(.ext-coche), .js .scene-portefeuille li:nth-child(1)::before { animation-name: pas-1; }
  .js .scene-portefeuille li:nth-child(2) :is(.ext-coche), .js .scene-portefeuille li:nth-child(2)::before { animation-name: pas-2; }
  .js .scene-portefeuille li:nth-child(3) :is(.ext-coche), .js .scene-portefeuille li:nth-child(3)::before { animation-name: pas-3; }
  .js .scene-portefeuille li:nth-child(4) :is(.ext-coche), .js .scene-portefeuille li:nth-child(4)::before { animation-name: pas-4; }
  .js .scene-portefeuille li:nth-child(5) :is(.ext-coche), .js .scene-portefeuille li:nth-child(5)::before { animation-name: pas-5; }
  .js .scene-portefeuille li:nth-child(6) :is(.ext-coche), .js .scene-portefeuille li:nth-child(6)::before { animation-name: pas-6; }
  .js .scene-portefeuille .ext-puce { animation-name: pas-8; }
  /* 03 : la ligne lit chaque dossier, son résultat s'affiche à son passage. */
  .js .scene-traitement .ext-lecture { animation-name: lecture-suivi; animation-timing-function: linear; }
  .js .scene-traitement li:nth-child(1) .ext-res { animation-name: pas-2; }
  .js .scene-traitement li:nth-child(2) .ext-res { animation-name: pas-4; }
  .js .scene-traitement li:nth-child(3) .ext-res { animation-name: pas-6; }
  .js .scene-traitement li:nth-child(4) .ext-res { animation-name: pas-8; }
  .js .scene-traitement .ext-barre-avance { animation-name: avance; animation-timing-function: linear; }
  /* 04 : les dossiers, leurs avis, puis les récapitulatifs. */
  .js .scene-resultats .ext-arbre li:nth-child(1) { animation-name: pas-1; }
  .js .scene-resultats .ext-arbre li:nth-child(2) { animation-name: pas-2; }
  .js .scene-resultats .ext-arbre li:nth-child(3) { animation-name: pas-3; }
  .js .scene-resultats .ext-arbre li:nth-child(4) { animation-name: pas-4; }
  .js .scene-resultats .ext-arbre li:nth-child(5) { animation-name: pas-5; }
  .js .scene-resultats .ext-arbre li:nth-child(6) { animation-name: pas-6; }
  .js .scene-resultats .ext-arbre li:nth-child(7) { animation-name: pas-7; }
  .js .scene-resultats .ext-arbre li:nth-child(8) { animation-name: pas-8; }
  .js .scene-resultats .ext-arbre li:nth-child(9) { animation-name: pas-9; }
}
/* Neuf temps, tous les 8 % de la boucle ; tout se range à 92 %, et la boucle repart. */
@keyframes pas-1 { 0%, 8% { transform: var(--depuis); } 12%, 90% { transform: none; } 95%, 100% { transform: var(--depuis); } }
@keyframes pas-2 { 0%, 16% { transform: var(--depuis); } 20%, 90% { transform: none; } 95%, 100% { transform: var(--depuis); } }
@keyframes pas-3 { 0%, 24% { transform: var(--depuis); } 28%, 90% { transform: none; } 95%, 100% { transform: var(--depuis); } }
@keyframes pas-4 { 0%, 32% { transform: var(--depuis); } 36%, 90% { transform: none; } 95%, 100% { transform: var(--depuis); } }
@keyframes pas-5 { 0%, 40% { transform: var(--depuis); } 44%, 90% { transform: none; } 95%, 100% { transform: var(--depuis); } }
@keyframes pas-6 { 0%, 48% { transform: var(--depuis); } 52%, 90% { transform: none; } 95%, 100% { transform: var(--depuis); } }
@keyframes pas-7 { 0%, 56% { transform: var(--depuis); } 60%, 90% { transform: none; } 95%, 100% { transform: var(--depuis); } }
@keyframes pas-8 { 0%, 64% { transform: var(--depuis); } 68%, 90% { transform: none; } 95%, 100% { transform: var(--depuis); } }
@keyframes pas-9 { 0%, 72% { transform: var(--depuis); } 76%, 90% { transform: none; } 95%, 100% { transform: var(--depuis); } }
/* 01 · Connexion. L'identifiant (26 caractères) se tape de 8 à 26 %, le mot de passe (12
   points) de 30 à 41 %, un caractère par marche ; le bouton est pressé à 47 %, la carte
   monte de 50 à 57 %. Le curseur et le trait bleu suivent le champ actif. */
@keyframes actif-identifiant { 0%, 3% { transform: scaleX(0); } 7%, 27% { transform: none; } 31%, 100% { transform: scaleX(0); } }
@keyframes actif-mdp { 0%, 27% { transform: scaleX(0); } 31%, 44% { transform: none; } 48%, 100% { transform: scaleX(0); } }
@keyframes frappe-identifiant {
  0%, 8% { transform: translateX(0); animation-timing-function: steps(26, jump-end); }
  26%, 90% { transform: translateX(var(--tape)); animation-timing-function: var(--courbe); }
  95%, 100% { transform: translateX(0); }
}
@keyframes frappe-mdp {
  0%, 30% { transform: translateX(0); animation-timing-function: steps(12, jump-end); }
  41%, 90% { transform: translateX(var(--tape)); animation-timing-function: var(--courbe); }
  95%, 100% { transform: translateX(0); }
}
@keyframes curseur-identifiant { 0%, 5% { transform: scaleY(0); } 6%, 28% { transform: none; } 29%, 100% { transform: scaleY(0); } }
@keyframes curseur-mdp { 0%, 29% { transform: scaleY(0); } 30%, 45% { transform: none; } 46%, 100% { transform: scaleY(0); } }
@keyframes appui { 0%, 45% { transform: none; } 47% { transform: scale(0.94); } 50%, 100% { transform: none; } }
@keyframes carte-arrivee { 0%, 50% { transform: translateY(calc(100% + 64px)); } 57%, 90% { transform: none; } 95%, 100% { transform: translateY(calc(100% + 64px)); } }
/* La ligne passe au milieu de la rangée k à 8 + 16 × (k − ½) % : 16, 32, 48 et 64 %,
   l'instant où le résultat de cette rangée s'affiche (pas-2, 4, 6, 8). */
@keyframes lecture-suivi { 0%, 8% { transform: translateY(0); } 72%, 90% { transform: translateY(100%); } 95%, 100% { transform: translateY(0); } }
@keyframes avance { 0%, 8% { transform: scaleX(0); } 72%, 90% { transform: scaleX(0.34); } 95%, 100% { transform: scaleX(0); } }

/* ═══ Ce que vous récupérez ═══════════════════════════════════════════════════ */
.recolte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.recolte-bloc { display: grid; align-content: start; gap: 12px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--surface); }
.recolte-bloc h3 { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.02em; }
.recolte-bloc ul { display: grid; gap: 8px; }
.recolte-bloc li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; color: var(--texte-doux); }
.recolte-bloc li::before { content: ""; width: 10px; height: 2px; margin-top: 0.8em; background: var(--accent); }
.recolte-sous { margin-top: 4px; font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-faible); }
.recolte-fichier {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--papier-filet); background: var(--papier); color: var(--papier-encre);
  font-family: var(--police-mono); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere;
}
@media (max-width: 960px) { .recolte { grid-template-columns: minmax(0, 1fr); } }

/* Ce que l'extension ne fait jamais : la limite, nette, sur une bande à part. */
.jamais {
  display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 18px 32px; align-items: start; margin-top: clamp(14px, 2vw, 24px);
  padding: clamp(22px, 2.6vw, 32px); border-radius: var(--rayon); border: 1px solid var(--filet); border-left: 3px solid var(--accent); background: var(--surface);
}
.jamais h3 { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.02em; }
.jamais ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.jamais li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.jamais li::before {
  content: ""; width: 14px; height: 14px; margin-top: 0.3em; background: var(--accent-texte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 860px) {
  .jamais { grid-template-columns: minmax(0, 1fr); }
  .jamais ul { grid-template-columns: minmax(0, 1fr); }
}
/* Les fonctions annoncées, distinctes de ce qui marche aujourd'hui. */
.bientot-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(20px, 2.6vw, 32px); font-size: var(--t-s); color: var(--texte-doux); }
.bientot-titre { font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-faible); }
.bientot-ligne span:not(.bientot-titre) { padding: 4px 12px; border-radius: 999px; border: 1px dashed var(--filet-fort); }

/* ═══ Nouveau, en bêta ═══════════════════════════════════════════════════════ */
/* Une carte par nouveauté, la plus récente en premier : ce qu'elle fait à gauche, ses
   temps à droite, enfilés sur la ligne de la marque. Rien ne bouge : la carte se lit
   telle quelle. */
.nouveautes { display: grid; gap: clamp(16px, 2vw, 24px); }
.nouveaute {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px);
  padding: clamp(24px, 3.4vw, 44px); border-radius: 20px; border: 1px solid var(--filet); background: var(--surface); box-shadow: inset 0 3px 0 var(--accent);
}
.nouveaute-texte { display: grid; justify-items: start; gap: 14px; }
.nouveaute-etiquette {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid var(--filet-fort);
  font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-texte);
}
.nouveaute-etiquette::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.nouveaute h3 { font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.nouveaute-texte > p:not([class]) { max-width: 34em; color: var(--texte-doux); }
.nouveaute-donnees { display: flex; gap: 8px; font-size: var(--t-s); color: var(--texte-doux); }
.nouveaute-donnees svg { flex: none; width: 14px; height: 14px; margin-top: 0.3em; color: var(--conforme); }
/* Les temps, de haut en bas : chaque icône est posée sur la ligne, qui passe dessous. */
.nouveaute-temps { position: relative; display: grid; gap: clamp(18px, 2.4vw, 28px); }
.nouveaute-temps::before { content: ""; position: absolute; left: 20px; top: 21px; bottom: 21px; width: 2px; background: var(--accent); }
.nouveaute-temps li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 16px; }
.nouveaute-temps svg { box-sizing: border-box; width: 42px; height: 42px; padding: 10px; border-radius: 50%; border: 1px solid var(--filet-fort); background: var(--surface); color: var(--texte); }
.nouveaute-temps p { color: var(--texte-doux); }
.nouveaute-temps .chiffres { margin-right: 10px; font-family: var(--police-mono); font-size: var(--t-xs); color: var(--accent-texte); }
.nouveaute-temps strong { font-weight: 600; color: var(--texte); }
@media (max-width: 860px) { .nouveaute { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Prix ════════════════════════════════════════════════════════════════════ */
/* Le prix tient dans un écran de portable : cartes resserrées, et le titre d'une seule
   ligne sur ordinateur. */
#prix .section-tete { max-width: none; }
/* Deux temps, lus de gauche à droite et reliés par la ligne de la marque : l'essai, puis
   l'abonnement. L'abonnement est sur fond nuit dans les deux thèmes, comme la carte de
   la bêta : c'est l'offre qui dure. Les deux cartes ont la même hauteur. */
.formules { display: grid; grid-template-columns: minmax(0, 1fr) clamp(48px, 5vw, 80px) minmax(0, 1.15fr); align-items: stretch; }
.formule { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 30px); border-radius: 18px; border: 1px solid var(--filet); background: var(--surface); }
.formule-nom { display: flex; align-items: center; gap: 10px; font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux); }
.formule-nom::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--accent); }
.formule-nom span { color: var(--accent-texte); }
.formule-valeur { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.formule > p:not(.formule-nom):not(.formule-valeur) { color: var(--texte-doux); }

/* L'essai : le nombre en grand, et ses trente dossiers, une case chacun. */
.formule-essai { box-shadow: inset 0 3px 0 var(--conforme); }
.formule-nombre { display: block; margin-bottom: 4px; font-family: var(--police-mono); font-size: clamp(2.8rem, 1.9rem + 2.2vw, 3.8rem); font-weight: 600; letter-spacing: -0.06em; line-height: 0.9; color: var(--conforme); }
.formule-cases { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; max-width: 240px; margin-top: 2px; }
.formule-cases li { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--filet-fort); background: var(--conforme-fond); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .formule-cases li { border-color: color-mix(in srgb, var(--conforme) 45%, transparent); }
}
/* Au survol de la carte, les cases se remplissent une rangée après l'autre. */
.formule-cases li { transition: background-color 0.3s; }
.formule-cases li:nth-child(n + 11) { transition-delay: 0.08s; }
.formule-cases li:nth-child(n + 21) { transition-delay: 0.16s; }
@media (hover: hover) { .formule-essai:hover .formule-cases li { background-color: var(--conforme); } }
.formule-action { margin-top: auto; padding-top: 6px; }

/* Le passage de l'un à l'autre : la ligne rouge de la marque, avec ses taquets. */
.formule-puis { position: relative; display: grid; place-items: center; }
.formule-puis::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: var(--accent); box-shadow: 0 0 14px rgba(238, 122, 99, 0.35); }
.formule-puis::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 16px; margin-top: -8px;
  background: linear-gradient(var(--accent), var(--accent)) left / 2px 100% no-repeat, linear-gradient(var(--accent), var(--accent)) right / 2px 100% no-repeat;
}
.formule-puis span {
  position: relative; z-index: 1; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--filet-fort); background: var(--fond);
  font-family: var(--police-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux);
}

/* L'abonnement : sur fond nuit, son prix en grand, comme le nombre de l'essai. */
/* Sur le fond sombre de la page, en thème nuit, le cadre plus marqué détache la carte. */
.formule-abonnement { border-color: rgba(236, 238, 232, 0.16); background: var(--nuit); color: var(--nuit-texte); }
.formule-abonnement::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(90% 70% at 100% 0%, rgba(111, 168, 232, 0.12), transparent 70%), repeating-linear-gradient(to bottom, transparent 0 31px, var(--nuit-reglure) 31px 32px);
}
.formule-abonnement .formule-nom { color: var(--nuit-doux); }
.formule-abonnement .formule-nom::before { background: var(--nuit-accent); }
.formule-abonnement .formule-nom span { color: #F29A87; }
.formule-abonnement .formule-nombre { color: var(--nuit-texte); }
/* En chasse fixe, l'espace avant l'euro vaudrait un chiffre entier : l'euro se range en
   exposant, collé au montant, comme sur une étiquette de prix. */
.formule-euro { margin-left: 0.06em; font-size: 0.5em; vertical-align: 0.72em; }
.formule-abonnement > p:not(.formule-nom):not(.formule-valeur) { color: var(--nuit-doux); }
.formule ul { display: grid; gap: 7px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--nuit-filet); }
.formule ul li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: var(--t-s); color: var(--nuit-doux); }
.formule ul li::before {
  content: ""; width: 14px; height: 14px; margin-top: 0.25em; background: var(--nuit-conforme);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Sous les cartes, les textes qui encadrent l'essai et l'abonnement. */
.formules-textes { margin-top: 24px; font-size: var(--t-s); color: var(--texte-doux); }
.formules-textes a { color: var(--texte); text-decoration-color: var(--accent); text-underline-offset: 3px; }
/* Sur téléphone, les cartes s'empilent ; la ligne se dresse entre elles. */
@media (max-width: 760px) {
  .formules { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 56px auto; }
  .formule-puis::before { left: 50%; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; margin: 0 0 0 -1px; }
  .formule-puis::after {
    left: 50%; right: auto; top: 6px; bottom: 6px; width: 16px; height: auto; margin: 0 0 0 -8px;
    background: linear-gradient(var(--accent), var(--accent)) top / 100% 2px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom / 100% 2px no-repeat;
  }
}