/* Ouraya Coffre : styles des écrans « compte » (public/app/ecrans/compte.js).
   Sur les jetons de /lumiere.css et les classes de /coffre/coffre.css.
   Aucune couleur en dur : le mode nuit suit seul. Tout porte le préfixe
   « compte- », pour ne rien disputer aux trois autres feuilles d'écran. */

/* =============================================================== LA PAGE == */
.compte-page{max-width:980px}
.compte-adresse-tete{overflow-wrap:anywhere}
.compte-contenu{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);min-width:0}
.compte-contenu > .squelette{max-width:640px}

.compte-carte{display:flex;flex-direction:column;gap:12px;min-width:0}
.compte-carte > p{margin:0}
.compte-carte-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.compte-carte-tete h2{margin:0;font-size:1.18rem;font-weight:500;letter-spacing:-.02em}
.compte-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.compte-valeur{font-family:var(--f-titre);font-size:1.15rem;font-weight:400;letter-spacing:-.015em;overflow-wrap:anywhere}

.compte-liste{display:grid;gap:10px;margin:0}
.compte-ligne{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr);gap:2px 16px;align-items:baseline}
.compte-ligne dt{font:400 11.5px/1.6 var(--f-technique);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-faible)}
.compte-ligne dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* La zone de sortie, en bas du profil : visible, jamais mise en avant. */
.compte-sortie{display:flex;flex-direction:column;gap:10px;margin-top:10px;padding-top:22px;border-top:1px solid var(--trait)}
.compte-sortie h2{margin:0;font-size:1.05rem;font-weight:500}
.compte-sortie p{margin:0;max-width:64ch;color:var(--texte-doux);font-size:.95rem}

.compte-alerte{display:flex;flex-direction:column;gap:10px;margin:0}
.compte-alerte p{margin:0}
.compte-avis{display:flex;flex-direction:column;gap:10px;margin:0}
.compte-avis p{margin:0}
.compte-contenu > .reponse{margin:0}

/* Un bloc de texte à lire : clé de réouverture, résiliation, fermeture. */
.compte-lecture{max-width:66ch;min-width:0}
.compte-lecture > h2{margin:0 0 14px;font-size:1.25rem}
.compte-lecture p{margin:0 0 1em}
.compte-lecture ul{display:grid;gap:10px;margin:0 0 1.1em;padding-left:1.1em;color:var(--texte-doux)}
.compte-lecture li::marker{color:var(--accent)}
.compte-lecture strong{color:var(--texte)}
.compte-lecture .reponse{margin:0 0 18px}

.compte-bloc-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
.compte-bloc-tete h2{margin:0 0 6px;font-size:1.18rem}
.compte-bloc-tete .mention{max-width:62ch}

.compte-pied{margin:4px 0 0;font-size:.9rem}
.compte-pied a{color:var(--texte-faible)}
.compte-pied a:hover{color:var(--c-danger)}


/* ========================================================== LA FORMULE == */
.compte-formule-ligne{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 24px}
.compte-formule-infos{display:flex;flex-direction:column;gap:6px;min-width:0}
.compte-formule-infos p{margin:0}
.compte-etiquette{font:400 11.5px/1.3 var(--f-technique);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.compte-formule-titre{margin:0;font-size:clamp(1.45rem,2.4vw,1.9rem);font-weight:300;letter-spacing:-.035em}
.compte-prix{color:var(--texte-doux)}
.compte-prix b{font:500 1.2rem/1.2 var(--f-titre);color:var(--accent);font-variant-numeric:tabular-nums}

/* La consommation : fichiers, corbeille (pâle) et envois en cours (bleu),
   neutre au repos, ambre à 85 %, rouge à 97 %, comme la jauge de la colonne. */
.compte-conso{display:flex;flex-direction:column;gap:12px;margin-top:6px;padding-top:18px;border-top:1px solid var(--trait)}
.compte-conso-texte{margin:0;color:var(--texte-doux)}
.compte-conso-texte strong{font-family:var(--f-titre);font-size:1.1rem;color:var(--texte)}
.compte-conso-barre{display:flex;height:8px;border-radius:var(--r-pastille);background:var(--trait);overflow:hidden}
.compte-conso-barre i{display:block;height:100%;transition:width .5s var(--sortie)}
.compte-conso-fichiers{background:var(--texte-doux)}
.compte-conso-corbeille{background:color-mix(in srgb,var(--texte-doux) 38%,transparent)}
.compte-conso-vol{background:var(--c-info)}
.compte-conso-barre[data-seuil="attention"] .compte-conso-fichiers{background:var(--c-attention-aplat)}
.compte-conso-barre[data-seuil="plein"] .compte-conso-fichiers{background:var(--c-danger)}
.compte-conso-detail{display:grid;gap:8px;margin:0;max-width:460px}
.compte-conso-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline}
.compte-conso-ligne dt{display:flex;align-items:center;gap:10px;color:var(--texte-doux);font-size:.95rem}
.compte-conso-ligne dd{margin:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px;font:400 13px/1.5 var(--f-technique);font-variant-numeric:tabular-nums;text-align:right}
.compte-puce{flex:none;display:inline-block;width:10px;height:10px;border-radius:2px}
.compte-conso-lien{font:inherit;font-family:var(--f-texte);font-size:.88rem;color:var(--accent)}


/* ========================================= LE CHOIX D'UNE FORMULE (panneau) == */
.compte-panneau{display:flex;flex-direction:column;gap:18px}
.compte-panneau > p,.compte-panneau > .reponse{margin:0}
.compte-chapo{font-size:1.02rem;line-height:1.6;color:var(--texte-doux)}

.compte-formules{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px}
.compte-formule{position:relative;display:block;cursor:pointer;min-width:0}
.compte-formule input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0}
.compte-formule-corps{
  position:relative;
  display:flex;flex-direction:column;gap:4px;height:100%;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--trait);border-radius:var(--r-bloc);
  box-shadow:inset 0 1px 0 var(--arete-lumiere-faible);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.compte-formule:hover .compte-formule-corps{border-color:var(--trait-net)}
.compte-formule input:checked + .compte-formule-corps{
  border-color:var(--accent);
  background:var(--accent-voile);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.compte-formule input:focus-visible + .compte-formule-corps{outline:2px solid var(--accent);outline-offset:2px}
.compte-formule-nom{font:500 .95rem/1.3 var(--f-titre);color:var(--texte-doux)}
.compte-formule-volume{font:200 2rem/1.05 var(--f-titre);letter-spacing:-.045em;color:var(--texte)}
.compte-formule-prix{margin-top:6px;padding-top:8px;border-top:1px solid var(--trait)}
.compte-formule-prix b{font:500 1.1rem/1.2 var(--f-titre);color:var(--accent);font-variant-numeric:tabular-nums}
.compte-formule-par{font:400 11.5px/1.3 var(--f-technique);letter-spacing:.04em;color:var(--texte-faible)}
.compte-formule-raison{font-size:.82rem;line-height:1.35;color:var(--c-danger)}
.compte-formule-raison:empty{display:none}
.compte-fanion{
  align-self:flex-start;
  margin-bottom:4px;padding:4px 8px;
  background:var(--accent-voile);border:1px solid var(--accent-trait);border-radius:var(--r-net);
  font:400 10.5px/1 var(--f-technique);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}

.compte-souscription{display:flex;flex-direction:column;padding-top:18px;border-top:1px solid var(--trait)}
.compte-souscription h3{margin:0 0 14px;font-size:1.02rem}
.compte-resume{display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:var(--fond-creux);border:1px solid var(--trait);border-radius:var(--r-bloc)}
.compte-resume p{margin:0}
.compte-resume .reponse{margin:0}
.compte-resume-total strong{font-family:var(--f-titre);font-weight:500}
.compte-cgv,.compte-execution{margin:18px 0 0}
.compte-execution + .compte-cgv{margin-top:6px}

/* Deux choix en cartes, sur de vrais boutons radio. */
.compte-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.compte-choix-option{position:relative;display:block;cursor:pointer;min-width:0}
.compte-choix-option input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0}
.compte-choix-corps{
  display:flex;flex-direction:column;gap:2px;height:100%;
  padding:12px 14px;
  background:var(--fond-creux);
  border:1px solid var(--trait);border-radius:var(--r-net);
  box-shadow:var(--creux-ombre);
  transition:border-color .2s, background .2s;
}
.compte-choix-corps strong{font-weight:500}
.compte-choix-detail{font-size:.84rem;color:var(--texte-faible)}
.compte-choix-option input:checked + .compte-choix-corps{border-color:var(--accent);background:var(--accent-voile)}
.compte-choix-option input:focus-visible + .compte-choix-corps{outline:2px solid var(--accent);outline-offset:2px}

/* Le nombre de téraoctets en plus : moins, la saisie, plus. */
.compte-pas{display:flex;align-items:stretch;gap:6px;max-width:240px}
.compte-pas .btn{flex:none;min-width:48px;padding:0 12px;font-size:1.2rem}
.champ .compte-pas input{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--f-technique);font-variant-numeric:tabular-nums}


/* =========================================== LA MONTÉE AUTOMATIQUE == */
/* La carte de la page Formule et le panneau /coffre/abonnement/montee-auto.
   Le curseur est un <input type="range"> natif, repeint : piste, part remplie
   (variable --part posée par le script), pouce, anneau de focus visible. */
.compte-montee p{max-width:66ch}
.compte-montee-interrupteur{margin:0;padding:14px 16px;background:var(--fond-creux);border:1px solid var(--trait);border-radius:var(--r-bloc)}
.compte-montee-interrupteur .case-texte{font-weight:500;color:var(--texte)}
.compte-montee-reglages{display:flex;flex-direction:column;gap:18px;transition:opacity .2s}
.compte-montee-reglages h3{margin:4px 0 -8px;font-size:1.02rem}
.compte-montee-inactive{opacity:.55}
.compte-seuil-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.compte-seuil-valeur{flex:none;min-width:12ch;font:500 1rem/1.3 var(--f-titre);color:var(--texte);font-variant-numeric:tabular-nums}
.compte-curseur{
  --part:50%;
  flex:1 1 260px;min-width:0;height:28px;margin:0;
  background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
/* Le champ de formulaire commun (.champ input) pose fond, filet et marge : pas ici. */
.champ .compte-curseur{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;min-height:0}
.compte-curseur:focus{outline:none}
.compte-curseur::-webkit-slider-runnable-track{
  height:6px;border-radius:var(--r-pastille);
  background:linear-gradient(to right,var(--accent-aplat) 0 var(--part),var(--trait) var(--part) 100%);
}
.compte-curseur::-moz-range-track{height:6px;border-radius:var(--r-pastille);background:var(--trait)}
.compte-curseur::-moz-range-progress{height:6px;border-radius:var(--r-pastille);background:var(--accent-aplat)}
.compte-curseur::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent);
  box-shadow:0 1px 3px var(--arete-ombre);
  transition:transform .15s var(--sortie);
}
.compte-curseur::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent);
}
.compte-curseur:active::-webkit-slider-thumb{transform:scale(1.12)}
.compte-curseur:focus-visible::-webkit-slider-thumb{outline:2px solid var(--accent);outline-offset:3px}
.compte-curseur:focus-visible::-moz-range-thumb{outline:2px solid var(--accent);outline-offset:3px}
.compte-plafonds{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.compte-plafonds + .compte-nombre{margin-top:12px}
.compte-montee-recap{padding:6px 18px;background:var(--fond-creux);border:1px solid var(--trait);border-radius:var(--r-bloc)}
.compte-montee-table{width:100%;border-collapse:collapse}
.compte-montee-table th,.compte-montee-table td{padding:10px 0;text-align:left;vertical-align:baseline;border-bottom:1px solid var(--trait)}
.compte-montee-table tr:last-child th,.compte-montee-table tr:last-child td{border-bottom:0}
.compte-montee-table th{width:26%;font:400 11.5px/1.5 var(--f-technique);letter-spacing:.1em;text-transform:uppercase;color:var(--texte-faible)}
.compte-montee-table td + td{text-align:right;font-variant-numeric:tabular-nums;color:var(--texte)}
.compte-montee-motif{margin:0}


/* ======================================================= LA PHRASE == */
/* La phrase proposée : une seule ligne, en chasse fixe, jamais une grille
   (elle ne doit pas ressembler aux douze mots). */
.compte-bloc-phrase{display:flex;flex-direction:column}
.compte-bloc-phrase > .rangee{margin:-6px 0 12px}
.compte-bloc-phrase > .mention{margin:0 0 8px}
.compte-bloc-phrase > p:last-child{margin:0}
.compte-phrase input[readonly]{font-family:var(--f-technique);font-size:1.25rem;letter-spacing:-.01em;color:var(--texte)}

.compte-force{display:flex;flex-direction:column;gap:6px;margin:-8px 0 18px}
.compte-force-barres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.compte-force-barres i{display:block;height:4px;border-radius:var(--r-pastille);background:var(--trait);transition:background .2s}
.compte-force[data-niveau="0"] i:nth-child(-n+1){background:var(--c-danger)}
.compte-force[data-niveau="1"] i:nth-child(-n+2){background:var(--c-attention-aplat)}
.compte-force[data-niveau="2"] i:nth-child(-n+3){background:var(--c-info)}
.compte-force[data-niveau="3"] i{background:var(--c-succes)}
.compte-force p{margin:0;min-height:1.4em;font-size:.86rem;color:var(--texte-doux)}

.compte-message:empty{display:none}
.compte-message .reponse{margin:0}

/* Un champ dans la barre d'actions du panneau : il prend toute la ligne,
   les boutons passent dessous. */
.panneau-actions .compte-actions-champ{flex:1 1 100%;min-width:0}
.panneau-actions .compte-actions-champ .champ{margin:0}
.panneau-actions .compte-raison{align-self:center;margin-right:auto;font-size:.86rem;color:var(--texte-faible)}
.panneau-actions .compte-raison:empty{display:none}


/* ===================================================== LES DOUZE MOTS == */
/* Numérotés, dans une grille encadrée d'un filet ambre, jamais dans un champ :
   c'est ce qui les distingue du mot de passe. */
.compte-mots{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px;
  margin:0;padding:clamp(16px,2.4vw,24px);
  list-style:none;
  background:var(--fond-creux);
  border:1px solid var(--accent-trait);border-radius:var(--r-bloc);
  box-shadow:var(--creux-ombre);
}
.compte-mot{display:flex;align-items:baseline;gap:10px;min-width:0}
.compte-mot-numero{flex:none;min-width:2ch;text-align:right;font:400 13px/1 var(--f-technique);color:var(--texte-faible)}
.compte-mot-texte{min-width:0;font:400 18px/1.3 var(--f-technique);color:var(--texte);overflow-wrap:anywhere;user-select:text}
.compte-mot-masque{font:400 14px/1.3 var(--f-technique);letter-spacing:.1em;color:var(--texte-faible)}
.compte-mots-actions{gap:8px}
/* La fin du journal (Sécurité) : un numéro et quatre mots, à comparer d'un appareil à l'autre. */
.compte-mots-tete{
  margin:14px 0;padding:12px 16px;
  font:400 16px/1.45 var(--f-technique);color:var(--texte);
  background:var(--fond-creux);
  border:1px solid var(--accent-trait);border-radius:var(--r-bloc);
  overflow-wrap:anywhere;user-select:text;
}

/* L'écran de preuve : trois champs à leur place réelle, dans la grille. */
.compte-mot-saisie{flex-wrap:wrap;align-items:center}
.compte-mot-saisie input{
  flex:1 1 0;min-width:0;width:100%;
  padding:7px 10px;
  background:var(--surface);
  border:1px solid var(--trait-net);border-radius:var(--r-net);
  color:var(--texte);
  font:400 16px/1.3 var(--f-technique);
}
.compte-mot-saisie input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-trait)}
.compte-mot-saisie input[aria-invalid="true"]{border-color:var(--c-danger)}
.compte-mot-erreur{flex:1 1 100%;font-size:.8rem;line-height:1.35;color:var(--c-danger)}
.compte-mot-erreur:empty{display:none}

.compte-encart{display:flex;flex-direction:column;gap:8px;padding:clamp(16px,2.2vw,22px)}
.compte-encart h3{margin:0 0 4px;font-size:1rem;font-weight:500}
.compte-encart p{margin:0;font-size:.95rem;color:var(--texte-doux)}
.compte-empreinte{font:400 1.05rem/1.5 var(--f-technique);letter-spacing:.06em;word-spacing:.4em;color:var(--texte);overflow-wrap:anywhere}


/* ======================================= LE CONTRÔLE DES DOUZE MOTS == */
/* Dans Sécurité : la date du dernier contrôle, et le temps écoulé sur trois
   mois en un trait, ambre quand le contrôle est dû. Le texte reste neutre :
   la pastille, le trait et le bouton disent déjà « à faire ». */
.compte-controle{
  display:flex;flex-direction:column;gap:9px;
  padding:14px 16px;
  background:var(--fond-creux);
  border:1px solid var(--trait);border-radius:var(--r-bloc);
  box-shadow:var(--creux-ombre);
}
.compte-controle p{margin:0}
.compte-controle-ligne strong{font-family:var(--f-titre);font-weight:500;color:var(--texte)}
.compte-controle-barre{height:4px;border-radius:var(--r-pastille);background:var(--trait);overflow:hidden}
.compte-controle-barre i{display:block;height:100%;border-radius:inherit;background:color-mix(in srgb,var(--texte-doux) 50%,transparent)}
.compte-controle[data-du] .compte-controle-barre i{background:var(--accent-aplat)}
.compte-controle-aide{font-size:.88rem;color:var(--texte-faible)}

/* Le panneau : douze points qui s'allument à mesure que les mots tombent. */
.compte-controle-suivi{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.compte-controle-points{display:flex;gap:6px}
.compte-controle-points i{
  display:block;width:10px;height:10px;border-radius:50%;
  background:var(--trait);box-shadow:var(--creux-ombre);
  transition:background .3s var(--sortie), transform .3s var(--sortie);
}
.compte-controle-points i.allume{background:var(--accent-aplat);box-shadow:0 0 0 3px var(--accent-voile);transform:scale(1.05)}
.compte-controle-compteur{font:400 12px/1 var(--f-technique);letter-spacing:.06em;color:var(--texte-faible);font-variant-numeric:tabular-nums}
.compte-panneau .grille-mots{margin:0}
.compte-controle-perdue{margin:-4px 0 0}
/* Les boutons des issues, sans le reflet de survol de lumiere.css : il
   écrasait le contraste de leurs premières lettres. */
.btn.sans-reflet::after{display:none}

/* L'issue : réussite, mots qui n'ouvrent pas, feuille égarée. */
.compte-controle-issue{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:clamp(18px,3vw,28px);
  background:var(--fond-creux);
  border:1px solid var(--trait);border-radius:var(--r-bloc);
}
.compte-controle-issue h3{margin:4px 0 0;font:500 1.3rem/1.3 var(--f-titre);letter-spacing:-.02em}
.compte-controle-issue p{margin:0;max-width:60ch;color:var(--texte-doux)}
.compte-controle-icone{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--surface);border:1px solid var(--trait);color:var(--c-info);
}
.compte-controle-issue[data-ton="succes"]{border-color:color-mix(in srgb,var(--c-succes) 30%,var(--trait))}
.compte-controle-issue[data-ton="succes"] .compte-controle-icone{color:var(--c-succes);background:var(--c-succes-voile);border-color:color-mix(in srgb,var(--c-succes) 40%,transparent)}
.compte-controle-issue[data-ton="attention"] .compte-controle-icone{color:var(--accent);background:var(--accent-voile);border-color:var(--accent-trait)}
.compte-controle-kit{margin:0;font-size:.93rem;color:var(--texte-doux)}


/* ======================================================= LES APPAREILS == */
.compte-appareils{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-top:1px solid var(--trait)}
.compte-appareil{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--trait)}
.compte-appareil-icone{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--fond-creux);border:1px solid var(--trait);color:var(--texte-faible)}
.compte-appareil[data-courant] .compte-appareil-icone{color:var(--c-succes);border-color:color-mix(in srgb,var(--c-succes) 40%,transparent)}
.compte-appareil-texte{display:flex;flex-direction:column;gap:4px;min-width:0}
.compte-appareil-texte p{margin:0}
.compte-appareil-nom{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;overflow-wrap:anywhere}
.compte-appareil-nom strong{font-weight:500}
.compte-appareil-action{align-self:center}


/* ========================================================== LE JOURNAL == */
.compte-sous-onglets{margin-bottom:0}
.compte-sous-onglets .onglet{padding:8px 12px;font-size:.9rem}
.compte-journal{display:flex;flex-direction:column;gap:14px;min-width:0}
.compte-journal > .reponse,.compte-journal > .mention{margin:0}
.compte-journal > .btn{align-self:flex-start}
.compte-evenements{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-top:1px solid var(--trait)}
.compte-evenement{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--trait)}
.compte-evenement-icone{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--fond-creux);border:1px solid var(--trait);color:var(--texte-faible)}
.compte-evenement-texte{display:flex;flex-direction:column;gap:3px;min-width:0}
.compte-evenement-texte p{margin:0;overflow-wrap:anywhere}
.compte-evenement > .pastille{align-self:center}


/* ========================================================== TÉLÉPHONE == */
/* ============================================== LE PAIEMENT À L'ANNÉE ==
   docs/formules-annuelles.md, § 19 ; maquettes docs/maquettes/annuel/.
   Préfixe « an- ». Aucune couleur en dur : la nuit suit seule. */
.an-equivalent{margin:2px 0 0;font-size:.92rem;color:var(--texte-doux)}
.compte-prix .an-fanion{display:inline-block;margin-left:10px;vertical-align:middle}
.an-equiv-carte{display:block;margin-top:2px;font:400 11px/1.3 var(--f-technique);letter-spacing:.03em;color:var(--texte-faible)}
.an-equiv-carte[hidden]{display:none}
.an-rythme .compte-choix-option:last-child .compte-choix-detail{color:var(--accent)}
.an-calcul{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.an-calcul th,.an-calcul td{padding:11px 0;text-align:left;vertical-align:baseline;border-bottom:1px solid var(--trait)}
.an-calcul th{font-weight:400;color:var(--texte-doux);padding-right:16px}
.an-calcul th span{display:block;margin-top:2px;font:400 11.5px/1.45 var(--f-technique);letter-spacing:.02em;color:var(--texte-faible)}
.an-calcul td{text-align:right;white-space:nowrap;font:400 14px/1.4 var(--f-technique)}
.an-calcul tfoot th,.an-calcul tfoot td{border-bottom:0;padding-top:14px}
.an-calcul tfoot th{font:500 1rem/1.3 var(--f-titre);color:var(--texte)}
.an-calcul tfoot td{font:500 1.25rem/1.2 var(--f-titre);color:var(--accent)}
.an-recap{padding:4px 18px 8px;background:var(--fond-creux);border:1px solid var(--trait);border-radius:var(--r-bloc)}
.an-prevu{display:flex;flex-direction:column;gap:10px;margin:0}
.an-prevu p{margin:0}
.an-suite{font-size:.92rem;color:var(--texte-doux)}
.an-suite b{font-weight:500;color:var(--texte)}
.an-rythme-carte .compte-ligne dd{text-align:right}
.an-resilier-suite{display:flex;flex-direction:column;gap:12px}
.an-resilier-suite:empty{display:none}
.an-montee-montants:empty{display:none}
.compte-resume .an-recap{margin:4px 0}

@media (max-width:640px){
  .compte-mots{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .compte-mot-texte{font-size:16px}
  .compte-phrase input[readonly]{font-size:1rem}
}
@media (max-width:560px){
  .compte-montee-table th{display:block;width:auto;padding-bottom:0;border:0}
  .compte-montee-table td{display:inline-block;padding-top:4px}
  .compte-montee-table td + td{display:block;text-align:left;padding-top:0}
  .compte-montee-table tr{display:block;padding:8px 0;border-bottom:1px solid var(--trait)}
  .compte-montee-table tr:last-child{border-bottom:0}
  .compte-montee-table td{border:0}
  .compte-ligne{grid-template-columns:minmax(0,1fr)}
  .compte-appareil{grid-template-columns:auto minmax(0,1fr)}
  .compte-appareil-action{grid-column:2;align-self:start}
  .compte-evenement{grid-template-columns:auto minmax(0,1fr)}
  .compte-evenement > .pastille{grid-column:2;justify-self:start}
  /* Une carte par ligne, plus basse : le volume à gauche, le prix à droite. */
  .compte-formule-corps{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:12px 14px}
  .compte-formule-nom,.compte-formule-raison{flex:1 1 100%}
  .compte-fanion{flex:none}
  .compte-formule-volume{font-size:1.55rem}
  .compte-formule-prix{margin:0 0 0 auto;padding:0;border:0;text-align:right}
  .compte-conso-ligne dd{justify-content:flex-start;text-align:left}
  .an-calcul td{white-space:normal}
  .an-recap{padding:4px 14px 8px}
  .an-rythme-carte .compte-ligne dd{text-align:left}
}
@media (max-width:420px){
  .compte-choix{grid-template-columns:minmax(0,1fr)}
  .compte-choix.compte-plafonds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compte-actions > .btn{flex:1 1 auto}
}