/* Wootil — système de crédits. Feuille ADDITIVE, chargée après style.css.
   Rien n'est redéfini ici de ce que style.css sait déjà faire : .btn, .panel,
   .badge, .chip, .assure, .price, .oi-toasts, .ic-<nom> restent la base, ce
   fichier ne pose que la couche « crédits » par-dessus.
   Préfixe unique : .wc- (wootil credits).

   Deux rappels qui expliquent la moitié des choix ci-dessous :
   1. le site vit sur --bg:#F2E3CD (crème soutenu), pas sur le #FFF8EE des
      planches — tous les contrastes sont vérifiés contre CE fond ;
   2. le cyan ne dit pas « IA », il dit « ça coûte des crédits ». Il ne remplace
      jamais la couleur de famille d'un outil (corail image, terracotta PDF…).

   Contraste mesuré sur --bg : --credit-deep = 5,8:1 (AA texte courant),
   --credit = 3,9:1 → réservé aux aplats, icônes et bordures, JAMAIS au texte.
   Blanc sur --credit = 4,9:1, donc les CTA pleins sont bons. */

:root{
  /* Famille crédits — la seule teinte froide de la charte.
     Sémantique : « ceci consomme des crédits ». Jamais une couleur de catégorie. */
  --credit:#007D8A; --credit-deep:#00606B; --credit-pale:#DCF6F4; --credit-border:#8ED8D2;
  --credit-neon:#24E5D7;   /* UNIQUEMENT sur fond --ink-deep, jamais sur fond clair */
  /* Encre profonde — fond des bandes crédits, distinct de --ink (#241E14) */
  --ink-deep:#0B1220; --credit-mist:#CBE4E4; --credit-mist-2:#A9C6C8; --credit-ice:#7FF0E6;
  /* États */
  --disabled-bg:#C7BCA8;
  /* Ombre teintée crédit, dans la lignée des ombres existantes */
  --shadow-credit:0 18px 48px -26px rgba(0,125,138,.45);

  /* — Dérivés ajoutés par le lot KIT-CSS (signalés dans le rapport). Ils vivent
       ici pour que la règle « aucune valeur de la famille crédit hors du :root »
       tienne aussi pour les rgba() : voiles, halos et ombres en découlent. */
  --credit-glow:rgba(36,229,215,.45);      /* halo radial des bandes sombres */
  --credit-hair:rgba(36,229,215,.34);      /* filet des cartes sur fond sombre */
  --credit-film:rgba(255,255,255,.055);    /* fond de carte sur fond sombre */
  --credit-film-2:rgba(36,229,215,.12);    /* … la même au survol */
  --shadow-credit-btn:0 14px 30px -14px rgba(0,125,138,.7);
  --shadow-credit-band:0 22px 60px -30px rgba(0,125,138,.75);
  /* --ring est vert translucide : invisible sur --ink-deep. Anneau jumeau pour
     le focus des éléments posés sur fond sombre. */
  --ring-credit:0 0 0 3px rgba(36,229,215,.45);
}

/* ============================================================================
   1 · En-tête et transverses
   ========================================================================== */

/* Pastille de solde. Aucun nowrap : « 12 Guthaben » doit pouvoir passer à la
   ligne plutôt que pousser le header hors de l'écran. */
.wc-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border-radius:999px;
  background:var(--credit-pale);border:1px solid var(--credit-border);color:var(--credit-deep);
  font-family:var(--mono);font-size:13px;font-weight:500;line-height:1.25;
  transition:transform var(--t1) var(--ease),border-color var(--t1),box-shadow var(--t1)}
.wc-pill:hover{color:var(--credit-deep);border-color:var(--credit);transform:translateY(-2px);
  box-shadow:var(--shadow-btn)}
.wc-pill:focus-visible{outline:none;box-shadow:var(--ring)}
.wc-pill-dot{width:8px;height:8px;border-radius:50%;background:var(--credit);flex:none}
.wc-pill-n{font-weight:600}
.wc-pill-add{font-size:15px;line-height:1;color:var(--credit);font-weight:600}
/* Solde bas : on quitte le cyan pour l'ambre — le cyan dit « crédits »,
   il ne sait pas dire « attention ». Le miel est déjà la teinte d'alerte douce. */
.wc-pill--low{background:var(--miel-pale);border-color:var(--miel-line);color:var(--miel-deep)}
.wc-pill--low .wc-pill-dot{background:var(--miel)}
.wc-pill--low .wc-pill-add{color:var(--miel-deep)}
/* Solde nul : gris désactivé (planche 5a′, « chiffre 0 grisé »), et le « + »
   devient l'encre pleine — c'est lui l'action, plus le solde. */
.wc-pill--empty{background:var(--alt2);border-color:var(--border2);color:var(--ink3)}
.wc-pill--empty .wc-pill-dot{background:var(--disabled-bg)}
.wc-pill--empty .wc-pill-add{color:var(--ink)}

/* Pastille « Mon compte ». Même gabarit que .pro-pill existant, en neutre. */
.wc-account{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;
  border-radius:999px;border:1px solid var(--border);background:var(--surface);
  font-size:14px;color:var(--ink2);transition:border-color var(--t1),color var(--t1)}
.wc-account:hover{border-color:var(--ink);color:var(--ink)}
.wc-account:focus-visible{outline:none;box-shadow:var(--ring)}
.wc-avatar{width:26px;height:26px;flex:none;border-radius:50%;background:var(--border);
  color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}

/* Jeton de coût. L'icône vient de .ic-coins (masque déjà vendorisé) : on ne
   fixe que sa taille, sa couleur suit currentColor. */
.wc-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:var(--credit-pale);border:1px solid var(--credit-border);color:var(--credit-deep);
  font-family:var(--mono);font-size:11.5px;line-height:1.35}
.wc-tag .ic{width:13px;height:13px;flex:none;background:currentColor}
.wc-tag--sm{padding:2px 7px;font-size:10.5px;gap:4px}
.wc-tag--sm .ic{width:11px;height:11px}

/* Item de nav « Outils à crédits ». Le soulignement .on::after de style.css
   suit currentColor : il devient cyan tout seul. */
header nav a.wc-nav-credit{color:var(--credit-deep);font-weight:600}
header nav a.wc-nav-credit:hover{color:var(--credit-deep);text-decoration:underline}
/* style.css masque toute la nav sous 760px, et on l'y laisse : garder ne
   serait-ce qu'un lien de nav faisait déborder l'en-tête dès 390 px, même pour
   un visiteur (mesuré : 406 px de contenu pour 390 de large). Les outils à
   crédits restent joignables par la pastille de solde, par la bande de
   l'accueil et par le pied de page, qui les liste désormais. */

/* Utilitaires transverses (ajouts du lot, cf. rapport) */
.wc-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);display:block}
.wc-note{font-size:13px;line-height:1.5;color:var(--ink3);margin:0}
.wc-link{color:var(--credit-deep);font-weight:500;text-decoration:underline}
.wc-link:hover{color:var(--credit-deep);text-decoration-thickness:2px}
/* Habillages de .btn — le bouton de base vient de style.css, on ne change
   que la peau (et jamais la hauteur : elle dépend du contexte). */
.btn.wc-btn-credit{background:var(--credit);box-shadow:var(--shadow-credit-btn)}
.btn.wc-btn-credit:hover{background:var(--credit-deep);filter:none}
.btn.wc-btn-neon{background:var(--credit-neon);color:var(--ink-deep)}
.btn.wc-btn-neon:hover{filter:brightness(1.06)}
.btn.wc-btn-neon:focus-visible{box-shadow:var(--ring-credit)}
.btn.wc-btn-lg{height:54px;padding:0 24px;font-size:17px;display:inline-flex;align-items:center;
  justify-content:center;text-align:center}
/* Désactivé : gris sable plein. Un contrôle inactif est exempté du critère de
   contraste (WCAG 1.4.3) ; l'attribut [disabled] réel porte l'information pour
   les lecteurs d'écran, la couleur n'est qu'un rappel. */
.btn[disabled].wc-btn-credit,.wc-auth .btn[disabled]{background:var(--disabled-bg);
  color:var(--surface);opacity:1;cursor:not-allowed;box-shadow:none}
/* Mode démo (data-demo="1" posé par credits.js) : le dire, ne jamais laisser
   croire qu'un paiement a eu lieu. Masqué tant que le mode n'est pas actif. */
.wc-demo{display:none}
html[data-demo="1"] .wc-demo{display:flex;align-items:center;gap:8px;margin:0 0 14px;
  background:var(--alt);border:1px dashed var(--dash);border-radius:var(--r-chip);
  padding:9px 13px;font-family:var(--mono);font-size:11.5px;color:var(--ink3)}

/* ============================================================================
   2 · Home — bloc bilan (5a / 5a′ / 5g)
   ========================================================================== */

/* Grille nommée : c'est elle qui rend l'empilement mobile lisible sans toucher
   à l'ordre du HTML (usages, sparkline, solde). */
.wc-balance{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"u s c";
  gap:34px;align-items:center;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px 28px;box-shadow:var(--shadow-card);margin:26px 0 0}
.wc-balance-usage{grid-area:u;display:flex;align-items:center;gap:16px;min-width:0}
.wc-balance-usage .woo{width:52px;height:52px;flex:none}
.wc-balance-num{font-family:var(--mono);font-size:40px;font-weight:500;letter-spacing:-.02em;
  line-height:1.05}
.wc-balance-usage b{display:block;font-size:15.5px;font-weight:600}
.wc-balance-usage small{display:block;font-size:13.5px;color:var(--ink3);line-height:1.4}

/* Sparkline : 6 barres PUIS 6 libellés dans le même conteneur — deux rangées
   d'une grille à 6 colonnes. La rangée des barres a une hauteur définie (44px),
   ce qui permet à chaque barre d'exprimer la sienne en pourcentage : la page
   pose simplement style="--h:72%". Douze enfants, donc :nth-child() suffit à
   désigner le mois courant (6ᵉ barre, 12ᵉ libellé) sans classe supplémentaire. */
.wc-spark{grid-area:s;display:grid;grid-template-columns:repeat(6,30px);grid-template-rows:44px auto;
  gap:0 9px;align-items:end;justify-content:center}
.wc-spark-bar{grid-row:1;display:block;height:var(--h,40%);min-height:3px;align-self:end;
  background:var(--credit);border-radius:4px 4px 0 0}
/* La ligne de base est portée par les libellés (border-top) : elle reste
   collée au pied des barres quelle que soit leur hauteur. */
.wc-spark-label{grid-row:2;font-family:var(--mono);font-size:10px;color:#B5A88E;text-align:center;
  padding-top:5px;border-top:1.5px solid var(--border2);line-height:1.2}

/* État « jour 1 » : aucune barre, ligne de base en pointillés. */
.wc-balance--day1 .wc-spark-bar{background:none}
.wc-balance--day1 .wc-spark-label{border-top-style:dashed}
/* État « solde épuisé » : le panneau entier se teinte de cyan, les barres
   passent en gris-cyan sauf le mois courant (la 6ᵉ) qui appelle l'action. */
.wc-balance--empty{border:1.5px solid var(--credit-border);box-shadow:var(--shadow-credit)}
.wc-balance--empty .wc-spark-bar{background:#C9E2DF}
.wc-balance--empty .wc-spark-bar:nth-child(6){background:var(--credit)}
.wc-balance--empty .wc-spark-label:nth-child(12){color:var(--credit-deep);font-weight:600}
.wc-balance--empty .wc-balance-credits b{color:var(--ink3)}
.wc-balance--empty .wc-balance-credits .ic{background:#B5A88E}
/* Visiteur : pas de compteur d'usages, le bloc devient une invitation. */
.wc-balance--guest{grid-template-columns:1fr auto;grid-template-areas:"u c"}
.wc-balance--guest .wc-spark{display:none}

.wc-balance-credits{grid-area:c;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  justify-self:end;text-align:left;min-width:0}
.wc-balance-credits .ic{width:15px;height:15px;background:var(--credit)}
.wc-balance-credits b{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--credit-deep);
  display:flex;align-items:center;gap:7px;line-height:1.1}
.wc-balance-credits small{font-size:13.5px;color:var(--ink3)}
.wc-balance-credits .btn{height:44px;padding:0 20px;display:inline-flex;align-items:center;
  justify-content:center;margin-top:4px;max-width:100%}

/* Mobile : le bilan à trois colonnes ne tient pas. À 900px la sparkline passe
   en pleine largeur sous les deux chiffres ; à 560px tout s'empile et le solde
   (= l'action) prend une ligne à lui, séparée par un filet. */
@media(max-width:900px){
  .wc-balance{grid-template-columns:1fr 1fr;grid-template-areas:"u c" "s s";gap:20px 18px;
    padding:18px 20px}
  .wc-balance-credits{justify-self:end}
}
@media(max-width:560px){
  .wc-balance{grid-template-columns:1fr;grid-template-areas:"u" "s" "c";gap:16px}
  .wc-balance--guest{grid-template-columns:1fr;grid-template-areas:"u" "c"}
  .wc-balance-num{font-size:32px}
  .wc-balance-credits{justify-self:stretch;border-top:1px solid var(--border);padding-top:14px}
  .wc-balance-credits .btn{width:100%}
  .wc-spark{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:38px auto;
    width:100%;max-width:300px;margin:0 auto}
}

/* ============================================================================
   3 · Home — bande crédits sombre (le moteur de vente)
   ========================================================================== */

/* Premier fond « encre profonde » du site : --ink (#241E14, brun) sert déjà
   pour .price.pro et le footer, il fallait un noir distinct pour que la bande
   ne soit pas confondue avec l'offre Pro. */
.wc-band{margin-top:30px;border-radius:var(--radius-lg);overflow:hidden;color:var(--surface);
  background:var(--ink-deep);border:1px solid var(--credit);box-shadow:var(--shadow-credit-band);
  background-image:radial-gradient(760px 320px at 8% 130%,var(--credit-glow),transparent 68%)}
.wc-band-head{display:flex;gap:22px;align-items:flex-start;justify-content:space-between;
  padding:26px 28px 22px;flex-wrap:wrap}
.wc-band-copy{flex:1 1 380px;min-width:0}
.wc-band-eyebrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--credit-ice)}
.wc-band-eyebrow b{background:var(--credit-neon);color:var(--ink-deep);border-radius:999px;
  padding:3px 8px;font-size:10.5px;font-weight:600}
.wc-band h2{margin:10px 0 8px;font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--surface)}
.wc-band p{margin:0;font-size:15.5px;line-height:1.55;color:var(--credit-mist);max-width:640px}
.wc-band-badges{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:14px;
  color:var(--credit-mist)}
.wc-band-badges span{display:flex;align-items:center;gap:8px}
.wc-band-badges span::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--credit-neon)}
.wc-band-balance{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  min-width:150px;max-width:100%}
.wc-band-balance .wc-eyebrow{color:var(--credit-ice)}
.wc-band-balance b{font-family:var(--mono);font-size:32px;font-weight:500;line-height:1.15;
  color:#fff}
.wc-band-balance .btn{height:40px;padding:0 16px;font-size:14.5px;display:inline-flex;
  align-items:center;justify-content:center;margin-top:4px;max-width:100%}
.wc-band-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 28px 26px}

/* Carte d'outil à crédits posée sur la bande. Le survol éclaire le filet :
   pas de translation, la bande en compte six et ça sauterait de partout. */
.wc-tool-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;
  background:var(--credit-film);border:1px solid var(--credit-hair);color:var(--surface);
  transition:border-color var(--t1),background var(--t1)}
.wc-tool-card:hover{border-color:var(--credit-neon);background:var(--credit-film-2);color:var(--surface)}
.wc-tool-card:focus-visible{outline:none;box-shadow:var(--ring-credit)}
.wc-tc-head{display:flex;align-items:center;gap:9px}
/* La pastille garde la couleur de FAMILLE de l'outil (posée en style= par la
   page depuis TINTS) — le cyan ne marque que le coût, jamais la catégorie. */
.wc-tc-icon{width:30px;height:30px;flex:none;border-radius:9px;display:flex;align-items:center;
  justify-content:center}
.wc-tc-icon .ic{width:16px;height:16px;background:#fff}
.wc-tc-cat{flex:1;min-width:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--credit-mist-2)}
.wc-tc-cost{flex:none;font-family:var(--mono);font-size:11px;color:var(--credit-ice);
  border:1px solid var(--credit-hair);border-radius:999px;padding:3px 8px}
.wc-tc-name{font-size:15.5px;font-weight:600;color:var(--surface)}
.wc-tc-desc{font-size:13.5px;line-height:1.45;color:var(--credit-mist-2)}

@media(max-width:900px){
  .wc-band-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wc-band h2{font-size:22px}
}
@media(max-width:720px){
  .wc-band-head{padding:20px 18px 16px;gap:16px}
  /* Le solde repasse en ligne : un chiffre seul en colonne, sur 390px,
     mange une hauteur d'écran pour rien. */
  .wc-band-balance{flex:1 1 100%;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;
    border-top:1px solid var(--credit-hair);padding-top:14px}
  .wc-band-balance .wc-eyebrow{flex:1 1 100%}
  .wc-band-balance .btn{margin-top:0;margin-left:auto}
  .wc-band-grid{grid-template-columns:1fr;padding:0 18px 20px}
  .wc-band-badges{gap:10px 16px;font-size:13.5px}
}

/* ============================================================================
   4 · Home — « Comment ça se passe », catalogue, conversion
   ========================================================================== */

.wc-howto{background:var(--surface);border:1.5px solid var(--border2);border-radius:var(--radius-lg);
  padding:22px 24px;margin-top:26px}
.wc-howto-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.wc-howto-head h2{margin:0;font-size:19px;font-weight:600}
.wc-howto-head span{font-size:14.5px;color:var(--ink3)}
.wc-howto-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wc-howto-step{background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:15px 16px}
.wc-howto-step b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink3);margin-bottom:6px}
.wc-howto-step h3{margin:0 0 4px;font-size:15.5px;font-weight:600}
.wc-howto-step p{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
/* L'étape « Confirmez » est la seule liée aux crédits : filet cyan. */
.wc-howto-step--credit{border:1.5px solid var(--credit-border)}
.wc-howto-step--credit b{color:var(--credit-deep)}
@media(max-width:900px){.wc-howto-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .wc-howto{padding:18px 16px}
  .wc-howto-grid{grid-template-columns:1fr;gap:10px}
}

.wc-catalog{margin-top:30px}
.wc-catalog-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.wc-catalog-head h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;flex:1 1 auto}
.wc-filters{display:flex;gap:8px;flex-wrap:wrap}
.wc-filter{background:var(--white);border:1px solid var(--border);border-radius:var(--r-chip);
  padding:7px 13px;font-size:13px;color:var(--nav);cursor:pointer;
  transition:border-color var(--t1),background var(--t1),color var(--t1)}
.wc-filter:hover{border-color:var(--ink);color:var(--ink)}
.wc-filter.on{background:var(--ink);border-color:var(--ink);color:#fff}
.wc-filter:focus-visible{outline:none;box-shadow:var(--ring)}
.wc-filter[data-filter=credit].on{background:var(--credit);border-color:var(--credit)}
.wc-legend{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;
  color:var(--ink3)}
.wc-legend::before{content:"";width:12px;height:12px;flex:none;border-radius:4px;
  background:var(--credit-pale);border:1.5px solid var(--credit-border)}

/* Filtrage sans JS de mise en page : la page pose [data-filter] sur .wc-catalog,
   [data-cat] sur chaque section et [data-credit] sur les puces payantes. Le JS
   n'a qu'un attribut à changer, le CSS fait le reste (et rien ne saute si le JS
   ne charge pas : sans attribut, tout est visible). */
.wc-catalog[data-filter] .wc-cat-section{display:none}
.wc-catalog[data-filter=all] .wc-cat-section{display:block}
.wc-catalog[data-filter=img] .wc-cat-section[data-cat=img],
.wc-catalog[data-filter=pdf] .wc-cat-section[data-cat=pdf],
.wc-catalog[data-filter=calc] .wc-cat-section[data-cat=calc],
.wc-catalog[data-filter=gen] .wc-cat-section[data-cat=gen],
.wc-catalog[data-filter=av] .wc-cat-section[data-cat=av]{display:block}
.wc-catalog[data-filter=credit] .wc-cat-section:has(.wc-chip-tool[data-credit]){display:block}
.wc-catalog[data-filter=credit] .wc-chip-tool:not([data-credit]){display:none}

.wc-catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wc-cat-section{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-card);
  padding:18px 20px}
.wc-cat-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.wc-cat-head b{flex:1;min-width:0;font-size:16px;font-weight:600}
.wc-cat-head span{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
/* Couleur posée en style= par la page (TINTS) : une pastille de famille. */
.wc-cat-dot{width:10px;height:10px;flex:none;border-radius:3px;background:var(--border2)}
.wc-chip-tool{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r-chip);
  border:1px solid var(--border);background:var(--surface);font-size:13.5px;color:var(--nav);
  transition:border-color var(--t1),transform var(--t1)}
.wc-chip-tool:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.wc-chip-tool:focus-visible{outline:none;box-shadow:var(--ring)}
.wc-chip-tool .ic{width:15px;height:15px;flex:none}
.wc-chip-tool[data-credit]{border-color:var(--credit-border);background:var(--credit-pale);
  color:var(--credit-deep)}
.wc-chip-tool[data-credit]:hover{border-color:var(--credit);color:var(--credit-deep)}
.wc-cat-tools{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:900px){.wc-catalog-grid{grid-template-columns:1fr}}
@media(max-width:560px){.wc-cat-section{padding:15px 14px}}

/* Conversion : carte crédits + carte Pro sombre. */
.wc-convert{display:grid;grid-template-columns:1fr 380px;gap:16px;margin-top:26px}
.wc-upsell{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--white);
  border:1.5px solid var(--credit-border);border-radius:var(--radius-lg);padding:22px 24px}
.wc-upsell .woo{width:76px;height:76px;flex:none}
.wc-upsell-copy{flex:1 1 240px;min-width:0}
.wc-upsell h3{margin:0 0 6px;font-size:19px;font-weight:600}
.wc-upsell p{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--ink2)}
.wc-upsell .btn{height:48px;padding:0 22px;font-size:16px;display:inline-flex;align-items:center;
  justify-content:center}
/* Variante Pro : reprend l'encre chaude de .price.pro, pas l'encre profonde
   des crédits — deux offres distinctes, deux noirs distincts. */
.wc-upsell--pro{display:block;background:var(--ink);border-color:transparent;color:var(--surface)}
.wc-upsell--pro .wc-eyebrow{color:var(--credit-ice)}
.wc-upsell--pro h3{margin:8px 0 6px;font-size:18px}
.wc-upsell--pro p{color:#C9BCA3;font-size:14.5px}
.wc-upsell--pro .btn{height:42px;padding:0 16px;font-size:14.5px;background:var(--surface);
  color:var(--ink)}
@media(max-width:900px){.wc-convert{grid-template-columns:1fr}}

/* ============================================================================
   5 · Connexion (5b)
   ========================================================================== */

/* 396px dans la maquette : largeur maximale, jamais fixe — l'allemand allonge
   les libellés et le mobile descend à 320px. */
.wc-auth{width:100%;max-width:396px;margin:40px auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;
  box-shadow:var(--shadow-pop)}
.wc-auth-head .wc-eyebrow{margin-bottom:10px}
.wc-auth-head h1,.wc-auth-head h2{margin:0 0 8px;font-size:23px;font-weight:600;letter-spacing:-.01em}
.wc-auth-head p{margin:0;font-size:15px;line-height:1.55;color:var(--ink2)}
.wc-auth-head p b{color:var(--ink);font-weight:500}
.wc-auth-body{margin-top:20px;display:grid;gap:12px}
.wc-auth-body label{font-size:14px;color:var(--ink2)}
.wc-auth-body input[type=email],.wc-auth-body input[type=text]{width:100%;height:50px;padding:0 14px;
  border:1.5px solid var(--border2);border-radius:var(--r-btn);background:var(--white);
  font-size:16px;color:var(--ink)}
.wc-auth-body .btn{width:100%;height:50px;font-size:16px;display:flex;align-items:center;
  justify-content:center;text-align:center}
.wc-auth-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;font-size:14px;color:var(--ink2)}
.wc-auth-foot .wc-otp-timer{font-family:var(--mono);font-size:14px;color:var(--ink3)}
/* Écran 3 « connectée » : la seule carte verte du parcours — le vert du site
   veut dire « c'est fait », pas « ça coûte ». */
.wc-auth--done{border:1.5px solid var(--green-bd);box-shadow:0 18px 44px -24px rgba(46,125,88,.35)}
.wc-auth--done .wc-eyebrow{color:var(--green-deep)}
.wc-auth-solde{background:var(--credit-pale);border:1px solid var(--credit-border);
  border-radius:var(--radius);padding:18px 20px;margin-top:18px}
.wc-auth-solde b{display:block;font-family:var(--mono);font-size:34px;font-weight:500;
  color:var(--credit-deep);line-height:1.1}
.wc-auth-solde span{font-size:15px;color:var(--ink2)}

/* Cases du code : flex:1 et non une largeur fixe, pour tenir de 320 à 396px. */
.wc-otp{display:flex;gap:9px;margin:4px 0}
.wc-otp-input{flex:1 1 0;min-width:0;height:60px;padding:0;text-align:center;
  font-family:var(--mono);font-size:24px;color:var(--ink);background:var(--white);
  border:1.5px solid var(--border2);border-radius:var(--r-btn)}
.wc-otp-input:focus{outline:none;border:2px solid var(--credit);box-shadow:var(--ring)}
.wc-otp-timer{font-family:var(--mono)}
@media(max-width:420px){
  .wc-auth{padding:22px 18px;margin:24px auto}
  .wc-otp{gap:6px}
  .wc-otp-input{height:52px;font-size:20px}
}

/* ============================================================================
   6 · Page compte (5c)
   ========================================================================== */

.wc-account-page{padding:26px 0 0}
.wc-account-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wc-account-head .wc-avatar{width:56px;height:56px;font-size:19px}
.wc-account-head h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em}
.wc-account-head .sub{font-size:15px;color:var(--ink3);line-height:1.4}
.wc-account-head .wc-link{margin-left:auto;color:var(--ink3)}

/* Onglets : même grammaire que .seg (bouton actif à l'encre), mais soulignés —
   ils changent de page, pas de valeur d'un réglage. */
.wc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px;padding-bottom:14px;
  border-bottom:1px solid var(--border)}
.wc-tab{background:none;border:none;border-radius:9px;padding:9px 14px;font-size:14.5px;
  color:var(--ink2);cursor:pointer;position:relative;
  transition:background var(--t1),color var(--t1)}
.wc-tab:hover{background:var(--alt);color:var(--ink)}
.wc-tab:focus-visible{outline:none;box-shadow:var(--ring)}
.wc-tab.on{color:var(--ink);font-weight:600}
.wc-tab.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-15px;height:2.5px;
  border-radius:2px;background:var(--ink)}
.wc-tabpanel[hidden]{display:none}
.wc-tabpanel{padding-top:22px}
/* Colonne principale + colonne latérale (ajout du lot : la maquette la montre
   sans la nommer). */
.wc-account-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
@media(max-width:900px){.wc-account-grid{grid-template-columns:1fr}}

.wc-balance-card{background:var(--white);border:1.5px solid var(--credit-border);
  border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow-credit)}
.wc-balance-card .amount{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.wc-balance-card .amount b{font-family:var(--mono);font-size:48px;font-weight:500;line-height:1;
  color:var(--credit-deep)}
.wc-balance-card .amount span{font-size:16px;color:var(--ink2)}
.wc-balance-card .btn{height:46px;padding:0 20px;display:inline-flex;align-items:center;
  justify-content:center;margin-top:16px}

/* Jauge de solde. La page pose --v (0-100 %) ; le remplissage montre ce qui
   RESTE, d'où le libellé « il vous reste N sur M » côté texte. */
.wc-gauge{height:10px;border-radius:999px;background:var(--credit-pale);overflow:hidden}
.wc-gauge-fill{display:block;height:100%;width:var(--v,0%);border-radius:999px;
  background:var(--credit);transition:width .45s var(--ease-out)}
.wc-gauge+p{margin:9px 0 0;font-size:14px;color:var(--ink3)}

/* Historique : une grille, pas un <table> — elle sait s'empiler. */
.wc-hist{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden}
.wc-hist-row{display:grid;grid-template-columns:170px minmax(0,1fr) 220px 90px;gap:14px;
  align-items:center;padding:14px 22px;border-top:1px solid var(--alt2);font-size:15px}
.wc-hist-row:first-child{border-top:none}
.wc-hist-row--head{background:var(--surface);border-bottom:1px solid var(--border);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3)}
.wc-hist-row time,.wc-hist-row .file{font-family:var(--mono);font-size:13px;color:var(--ink3);
  overflow-wrap:anywhere}
.wc-hist-cost{font-family:var(--mono);font-size:16px;text-align:right;white-space:nowrap}
.wc-hist-cost.minus{color:var(--ink)}
.wc-hist-cost.plus{color:var(--green-deep)}
@media(max-width:720px){
  /* Deux colonnes : le détail à gauche, le mouvement de crédits en haut à
     droite. Les en-têtes de colonnes n'ont plus de sens une fois empilé. */
  .wc-hist-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:13px 15px}
  .wc-hist-row--head{display:none}
  .wc-hist-cost{grid-column:2;grid-row:1;font-size:15px}
}

/* Formule */
.wc-plan{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);
  padding:24px 26px}
.wc-plan h3{margin:6px 0 8px;font-size:22px;font-weight:600}
.wc-plan p{margin:0;font-size:15px;line-height:1.55;color:var(--ink2)}
.wc-plan-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--border)}
.wc-plan-stat b{display:block;font-size:17px;font-weight:600;margin-top:3px}
.wc-plan-stat .wc-eyebrow{font-size:11px}
.wc-plan-stat--credit b{color:var(--credit-deep)}
/* Carte formule sombre (colonne latérale) : encre chaude, comme l'offre Pro. */
.wc-plan--dark{background:var(--ink);border-color:transparent;color:var(--surface)}
.wc-plan--dark .wc-eyebrow{color:var(--credit-ice)}
.wc-plan--dark p{color:#C9BCA3}
.wc-plan--dark .btn{background:var(--surface);color:var(--ink);margin-top:16px}
@media(max-width:560px){
  .wc-plan{padding:18px 16px}
  .wc-plan-stats{grid-template-columns:1fr;gap:12px}
}

/* ============================================================================
   7 · Paiement (5d) et confirmation (5e)
   ========================================================================== */

/* Mise en page de la page d'achat (ajout du lot : la maquette la montre sans
   la nommer). Le formulaire passe SOUS les packs en mobile : on choisit avant
   de payer. */
.wc-pay-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:22px;align-items:start}
@media(max-width:900px){.wc-pay-layout{grid-template-columns:1fr}}

/* margin-top : le badge « le plus pris » déborde de 11px au-dessus des cartes. */
.wc-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:11px}
.wc-pack{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  text-align:left;background:var(--white);border:1.5px solid var(--border);
  border-radius:var(--radius-lg);padding:20px;cursor:pointer;box-shadow:var(--shadow-card);
  transition:border-color var(--t1),box-shadow var(--t2),transform var(--t1)}
.wc-pack:hover{border-color:var(--credit-border);transform:translateY(-2px)}
.wc-pack:focus-visible{outline:none;box-shadow:var(--ring)}
/* Le point radio est un ::before : un vrai <input radio> resterait invisible
   sous la carte, et la carte entière est déjà le contrôle. */
.wc-pack::before{content:"";width:16px;height:16px;border-radius:50%;background:#fff;
  border:2px solid var(--border2);margin-bottom:8px;transition:border-width var(--t1),border-color var(--t1)}
.wc-pack.on{border-color:var(--credit);box-shadow:var(--shadow-credit)}
.wc-pack.on::before{border:5px solid var(--credit)}
.wc-pack--best{border-color:var(--credit-border)}
.wc-pack-badge{position:absolute;top:-11px;left:18px;background:var(--credit);color:#fff;
  border-radius:999px;padding:4px 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;max-width:calc(100% - 36px)}
.wc-pack-n{font-family:var(--mono);font-size:21px;font-weight:500;color:var(--ink)}
.wc-pack-n span{font-family:var(--font);font-size:14.5px;color:var(--ink2);margin-left:4px}
.wc-pack-price{font-size:24px;font-weight:600;letter-spacing:-.02em}
.wc-pack-unit{font-family:var(--mono);font-size:12px;color:var(--ink3)}
.wc-pack-note{font-size:14px;font-weight:500;color:var(--credit-deep);line-height:1.4}
/* Ligne de comparaison concurrent : sous la grille, pleine largeur. */
.wc-pack-compare{grid-column:1/-1;margin-top:2px;background:var(--alt);border:1px solid var(--border);
  border-radius:14px;padding:12px 16px;font-size:14px;color:var(--ink2);line-height:1.5}
.wc-pack-compare b{font-family:var(--mono);color:var(--credit-deep);font-weight:500}
@media(max-width:720px){
  /* Trois packs côte à côte sous 720px, c'est trois colonnes de 100px : on
     empile, ce qui remet le prix et la note à taille lisible. */
  .wc-packs{grid-template-columns:1fr;gap:16px}
  .wc-pack{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:8px 12px;padding:18px}
  .wc-pack::before{margin-bottom:0;align-self:center}
  .wc-pack-note{flex:1 1 100%}
}

.wc-pay{background:var(--white);border:1.5px solid var(--credit-border);border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--shadow-credit)}
.wc-pay h2,.wc-pay h3{margin:0 0 14px;font-size:18px;font-weight:600}
.wc-pay-recap{display:grid;gap:9px;font-size:15px}
.wc-pay-recap>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.wc-pay-recap .num{font-family:var(--mono);font-size:13.5px;color:var(--ink3)}
.wc-pay-total{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  border-top:1px solid var(--border);padding-top:10px;margin-top:2px;font-size:15px}
.wc-pay-total b{font-size:22px;font-weight:600;color:var(--credit-deep)}
.wc-pay-methods{display:flex;gap:9px;margin:18px 0 14px;flex-wrap:wrap}
.wc-pay-method{flex:1 1 100px;min-height:44px;padding:8px 12px;border-radius:var(--r-btn);
  border:1.5px solid var(--border2);background:var(--white);color:var(--ink2);font-size:14.5px;
  cursor:pointer;transition:border-color var(--t1),color var(--t1)}
.wc-pay-method:hover{border-color:var(--credit-border);color:var(--ink)}
.wc-pay-method.on{border:2px solid var(--credit);color:var(--ink);font-weight:600}
.wc-pay-method:focus-visible{outline:none;box-shadow:var(--ring)}
.wc-pay-form{display:grid;gap:12px}
.wc-pay-row{display:flex;gap:12px;flex-wrap:wrap}
.wc-pay-row .wc-pay-field{flex:1 1 120px}
.wc-pay-field{display:grid;gap:6px;position:relative;min-width:0}
.wc-pay-field label{font-size:14px;color:var(--ink2)}
.wc-pay-field input{width:100%;height:48px;padding:0 14px;border:1.5px solid var(--border2);
  border-radius:var(--r-btn);background:var(--surface);font-family:var(--mono);font-size:15px;
  color:var(--ink)}
.wc-pay-field input:focus{outline:none;border-color:var(--credit);box-shadow:var(--ring);
  background:var(--white)}
.wc-pay .btn{width:100%;height:54px;font-size:17px;margin-top:16px;display:flex;align-items:center;
  justify-content:center;text-align:center}
.wc-pay-autoreload{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 14px;
  border-radius:14px;background:var(--credit-pale);border:1px solid var(--credit-border);
  font-size:14px;line-height:1.45;color:var(--ink2);cursor:pointer}
.wc-pay-autoreload input{margin-top:2px;flex:none}
.wc-pay-foot{margin:12px 0 0;font-size:13px;color:var(--ink3);text-align:center}
@media(max-width:560px){.wc-pay{padding:18px 16px}}

/* Modale de confirmation. Fermée par défaut : sans JS, elle n'existe pas. */
.wc-modal{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(36,30,20,.42);backdrop-filter:blur(2px)}
.wc-modal.open{display:flex}
.wc-modal-box{width:100%;max-width:520px;max-height:90vh;overflow:auto;background:var(--surface);
  border:1.5px solid var(--credit-border);border-radius:22px;padding:28px;
  box-shadow:0 40px 90px -30px rgba(36,30,20,.6)}
.wc-modal-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wc-modal-head .woo{width:72px;height:72px;flex:none}
.wc-modal-head h2{margin:0 0 6px;font-size:23px;font-weight:600;letter-spacing:-.01em}
.wc-modal-head p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.wc-modal-body{margin-top:18px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;display:grid;gap:10px;font-size:15px}
.wc-modal-body>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.wc-modal-cost{font-family:var(--mono);font-size:17px;color:var(--credit-deep)}
.wc-modal-after{border-top:1px solid var(--alt2);padding-top:10px;font-size:15px}
/* Seule la valeur passe en chiffres mono : le libellé « Solde après » est
   une phrase, pas une donnée. */
.wc-modal-after b,.wc-modal-after [data-wc-value]{font-family:var(--mono);font-weight:500}
.wc-modal-pref{display:flex;align-items:flex-start;gap:11px;margin-top:16px;font-size:14.5px;
  line-height:1.45;color:var(--ink2);cursor:pointer}
.wc-modal-pref input{margin-top:2px;flex:none}
.wc-modal-foot{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.wc-modal-foot .btn{height:50px;padding:0 20px;display:flex;align-items:center;justify-content:center;
  text-align:center}
.wc-modal-foot .btn:last-child{flex:1 1 200px}
.wc-modal-note{margin:12px 0 0;font-size:13px;color:var(--ink3);text-align:center;line-height:1.45}
@media(max-width:560px){
  /* Feuille du bas : une boîte centrée à 520px n'a pas de sens sur 390px, et
     le pouce est en bas de l'écran. */
  .wc-modal{padding:0;align-items:flex-end}
  .wc-modal-box{max-width:none;border-radius:22px 22px 0 0;border-bottom:none;padding:22px 18px 26px;
    max-height:92vh}
  .wc-modal-head .woo{width:52px;height:52px}
  .wc-modal-head h2{font-size:20px}
  .wc-modal-foot .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:no-preference){
  .wc-modal.open .wc-modal-box{animation:wc-pop .2s var(--ease-out) both}
  @media(max-width:560px){.wc-modal.open .wc-modal-box{animation:wc-sheet .22s var(--ease-out) both}}
}
@keyframes wc-pop{from{transform:scale(.93);opacity:0}to{transform:none;opacity:1}}
@keyframes wc-sheet{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}

/* Toast de mouvement de crédits. Il s'empile dans le conteneur .oi-toasts
   existant (app.js le crée) : pas de seconde pile, pas de second z-index.
   Le conteneur est en pointer-events:none, la croix a besoin du contraire. */
.wc-toast{display:flex;align-items:flex-start;gap:12px;max-width:min(360px,88vw);
  pointer-events:auto;background:var(--ink);color:var(--surface);border-radius:14px;
  padding:14px 18px;box-shadow:0 24px 60px -24px rgba(36,30,20,.75)}
.wc-toast-n{font-family:var(--mono);font-size:18px;font-weight:500;line-height:1.2;flex:none;
  color:var(--credit-neon)}
.wc-toast-msg{font-size:14.5px;font-weight:600;line-height:1.35}
.wc-toast-sub{display:block;font-family:var(--mono);font-size:12px;color:#C3B49A;margin-top:2px}
.wc-toast-close{flex:none;margin-left:auto;background:none;border:none;padding:0 0 0 8px;
  font-size:16px;line-height:1;color:#8B7D63;cursor:pointer}
.wc-toast-close:hover{color:var(--surface)}
.wc-toast-close:focus-visible{outline:none;box-shadow:var(--ring-credit);border-radius:6px}
/* Un remboursement et un achat sont des bonnes nouvelles : vert clair, réservé
   au chiffre. Le débit garde le néon (seule dérogation admise au fond sombre
   --ink au lieu de --ink-deep : le contraste y est de 10:1). */
.wc-toast--debit .wc-toast-n{color:var(--credit-neon)}
.wc-toast--refund .wc-toast-n,.wc-toast--credit .wc-toast-n{color:#9FD6B4}
@media(max-width:560px){
  .wc-toast{max-width:none;width:calc(100vw - 24px);padding:12px 14px}
  .wc-toast-n{font-size:16px}
}
@media (prefers-reduced-motion:no-preference){
  .wc-toast{animation:wc-pop .22s var(--ease-out) both}
}

/* ============================================================================
   8 · Écran verrouillé, transparence, hub (Tour 4 et 5f)
   ========================================================================== */

.wc-unlock{background:var(--white);border:1.5px solid var(--credit-border);
  border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-credit)}
.wc-unlock-status{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--credit-deep)}
.wc-unlock-status::before{content:"";width:9px;height:9px;flex:none;border-radius:50%;
  background:var(--credit)}
.wc-unlock h2{margin:10px 0 8px;font-size:22px;font-weight:600;letter-spacing:-.01em}
.wc-unlock p{margin:0;font-size:15px;line-height:1.55;color:var(--ink2)}
.wc-unlock-recap{display:grid;gap:9px;margin:18px 0;font-size:15px}
.wc-unlock-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.wc-unlock-row span:last-child{font-family:var(--mono);font-size:14px;text-align:right}
/* Le prix est la seule valeur mise en avant de la carte : c'est lui qu'on doit
   voir avant de cliquer. */
.wc-unlock-cost{border-top:1px solid var(--border);padding-top:9px}
.wc-unlock-cost span:last-child{font-family:var(--mono);font-size:20px;font-weight:500;
  color:var(--credit-deep)}
.wc-unlock-cta{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;
  min-height:54px;padding:10px 18px;border:none;border-radius:var(--r-btn);background:var(--credit);
  color:#fff;font-size:17px;font-weight:600;line-height:1.25;cursor:pointer;
  box-shadow:var(--shadow-credit-btn);transition:filter var(--t1),transform var(--t1)}
.wc-unlock-cta:hover{background:var(--credit-deep);color:#fff;transform:translateY(-1px)}
.wc-unlock-cta:active{transform:scale(.98)}
.wc-unlock-cta:focus-visible{outline:none;box-shadow:var(--ring)}
.wc-unlock-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;
  font-size:13.5px;color:var(--ink3)}
.wc-unlock-foot .solde{font-family:var(--mono);font-size:12.5px}
/* Débloqué : on quitte le cyan pour le vert — « c'est payé, c'est à vous ». */
.wc-unlock.is-unlocked{border-color:var(--green-bd)}
.wc-unlock.is-unlocked .wc-unlock-status{color:var(--green-deep)}
.wc-unlock.is-unlocked .wc-unlock-status::before{background:var(--green)}
.wc-unlock.is-unlocked .wc-unlock-cta{background:var(--green);
  box-shadow:0 14px 30px -14px rgba(46,125,88,.7)}
.wc-unlock.is-unlocked .wc-unlock-cta:hover{background:var(--green-deep)}
.wc-unlock-done{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--green-pale);border:1px solid var(--green-bd);border-radius:14px;
  padding:12px 14px;margin:16px 0;color:var(--green-deep);font-size:14.5px}
.wc-unlock-done b{font-family:var(--mono);font-size:15px;font-weight:500}

/* Filigrane de l'aperçu bridé. Posé sur le calque « après » du comparateur,
   retiré du DOM au déblocage. Il ne doit jamais gêner la poignée du rideau. */
.wc-watermark{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-around;transform:rotate(-24deg) scale(1.5);opacity:.5;
  pointer-events:none;user-select:none;-webkit-user-select:none}
.wc-watermark span{font-family:var(--mono);font-size:15px;letter-spacing:.3em;color:var(--surface);
  white-space:nowrap;text-align:center}
@media(max-width:720px){.wc-watermark span{font-size:12px;letter-spacing:.28em}}

/* Bandeau d'action collé en bas — mobile uniquement (Tour 4b). En desktop le
   CTA vit dans la carte de déblocage, un bandeau fixe y volerait de la place. */
.wc-sticky-cta{display:none}
@media(max-width:720px){
  .wc-sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:#FFFDF8;
    border-top:1px solid var(--border);box-shadow:0 -14px 34px -22px rgba(150,66,31,.5)}
  .wc-sticky-cta .wc-unlock-cta{min-height:52px;font-size:16.5px}
  .wc-sticky-cta .solde{display:block;margin-top:8px;text-align:center;font-family:var(--mono);
    font-size:12.5px;color:var(--ink3)}
  /* On réserve sa hauteur, sinon il recouvre la fin de page (même piège que
     le bandeau de consentement, style.css).
     ⚠️ Le bandeau de consentement (.consent, z-index:50) passe volontairement
     DEVANT celui-ci : il est éphémère (une tape) et légalement prioritaire.
     Quand il est affiché, html.consent-on réserve déjà 210px, ce qui l'emporte
     sur les 112px ci-dessous — rien à corriger, les deux ne s'additionnent pas. */
  body:has(.wc-sticky-cta){padding-bottom:112px}
}

/* Hub des outils à crédits (5f) */
.wc-hub{margin:26px 0 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);
  background:var(--white)}
.wc-hub-head{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:34px 32px;
  color:var(--surface);background:var(--ink-deep);border-bottom:1px solid var(--credit);
  background-image:radial-gradient(680px 300px at 12% 120%,var(--credit-glow),transparent 70%)}
.wc-hub-head .copy{flex:1 1 320px;min-width:0}
.wc-hub-head .wc-eyebrow{color:var(--credit-ice)}
.wc-hub-head h1{margin:8px 0 10px;font-size:34px;font-weight:600;letter-spacing:-.02em;
  color:var(--surface)}
.wc-hub-head p{margin:0;font-size:16.5px;line-height:1.6;color:var(--credit-mist);max-width:660px}
.wc-hub-head .woo{width:112px;height:112px;flex:none}
.wc-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:28px 32px 34px}
.wc-hub-card{display:flex;flex-direction:column;gap:8px;background:var(--white);
  border:1.5px solid var(--border);border-radius:var(--r-card);padding:20px;
  box-shadow:var(--shadow-card);transition:border-color var(--t2) var(--ease),
  transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.wc-hub-card:hover{border-color:var(--credit);transform:translateY(-3px);box-shadow:var(--shadow-credit)}
.wc-hub-card:focus-visible{outline:none;box-shadow:var(--ring)}
.wc-hub-card .wc-tc-icon{width:40px;height:40px;border-radius:12px;
  box-shadow:0 8px 22px -12px rgba(36,30,20,.5)}
.wc-hub-card .wc-tc-icon .ic{width:21px;height:21px}
.wc-hub-card .wc-tc-cat{color:var(--ink3);display:flex;align-items:center;gap:7px}
.wc-hub-card .wc-tc-name{font-size:17.5px;color:var(--ink)}
.wc-hub-card .wc-tc-desc{font-size:14.5px;color:var(--ink2)}
.wc-hub-why{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--credit-deep)}
.wc-hub-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--alt2)}
.wc-hub-foot .spec{font-family:var(--mono);font-size:12px;color:var(--ink3);flex:1 1 auto}
@media(max-width:900px){
  .wc-hub-head{padding:26px 20px;gap:16px}
  .wc-hub-head h1{font-size:27px}
  .wc-hub-head .woo{width:84px;height:84px}
  .wc-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px}
}
@media(max-width:620px){
  .wc-hub-grid{grid-template-columns:1fr}
  .wc-hub-head p{font-size:15px}
}

/* ============================================================================
   11 · Raccords d'intégration
   Classes apparues dans le HTML des pages compte/connexion après l'écriture du
   kit : on les définit ici plutôt que de renommer le HTML, quand le nom porte
   bien une intention distincte. Repérées en croisant les classes utilisées dans
   dist/ avec celles déclarées ici — le contrôle vaut d'être refait à chaque
   ajout de page.
   ========================================================================== */

/* Bouton d'apparence lien : une action réelle (JS) qui ne doit pas se déguiser
   en <a>. Souligné comme un lien, focus visible comme un bouton. */
.link-btn{display:inline;padding:0;border:none;background:none;font:inherit;color:var(--ink);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.link-btn:hover{color:var(--green)}
.link-btn:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}

/* Pastille « Se connecter » : même gabarit que .wc-account mais sans avatar,
   donc sans le creux à gauche. Discrète : ce n'est pas l'action principale
   d'un visiteur qui vient compresser un PDF. */
.wc-account--guest{padding-left:14px;color:var(--ink2)}

/* Connexion : chaque étape (e-mail, code, bienvenue) occupe le même bloc, une
   seule est visible. Pas de hauteur figée — le contenu des trois diffère et
   figer ferait sauter la carte d'une étape à l'autre. */
.wc-auth-step{display:flex;flex-direction:column;gap:14px}
.wc-auth-step[hidden]{display:none}
.wc-auth-actions{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.wc-auth-actions .btn{width:100%;height:48px;display:inline-flex;align-items:center;
  justify-content:center}

/* Compte — jauge : la légende dit dans quel sens lire la barre (la maquette
   était ambiguë sur ce point, cf. spec 5c Q6). */
.wc-gauge-legend{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink3)}

/* Compte — trois statistiques sous la jauge. Sur mobile elles s'empilent en
   deux colonnes avant de passer à une seule : trois chiffres côte à côte sur
   390 px deviennent illisibles. */
.wc-balance-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.wc-balance-stats p{margin:0}
.wc-balance-stats .mono{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:4px}
.wc-balance-stats p:not(.mono){font-size:15.5px;font-weight:600;overflow-wrap:anywhere}

/* Compte — encarts secondaires de la colonne de droite. */
.wc-payment,.wc-account-links{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:18px 20px;margin-top:16px}
.wc-payment h3,.wc-account-links h3{margin:0 0 10px;font-size:16px;font-weight:600}
.wc-payment p{margin:0 0 10px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.wc-account-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.wc-account-links h3{margin-bottom:0}

/* Historique vide : le premier écran d'un compte neuf. Ni erreur ni oubli —
   on le dit en clair plutôt que de laisser un tableau à zéro ligne. */
.wc-hist-empty{margin:0;padding:26px 22px;text-align:center;font-size:14.5px;color:var(--ink3)}

@media(max-width:560px){
  .wc-balance-stats{grid-template-columns:1fr 1fr;gap:12px}
  .wc-balance-stats>:last-child{grid-column:1 / -1}
}

/* Page d'outil à crédits : même grille que la page compte (contenu + colonne
   d'action), plus la place réservée au bandeau collant du mobile pour qu'il ne
   recouvre jamais la fin du contenu. */
.wc-ia-layout{position:relative}
@media(max-width:720px){
  .wc-ia-layout{padding-bottom:96px}
}

/* ============================================================================
   12 · En-tête — rendre la place prise par le système de crédits
   L'en-tête a gagné trois éléments (l'entrée de nav « Outils à crédits », la
   pastille de solde, la pastille de compte). Sans ces règles, les libellés se
   cassent sur trois lignes dès 1280 px — constaté en capture, pas supposé.
   ========================================================================== */

/* Un libellé de navigation est une étiquette, pas une phrase : il ne se coupe
   jamais. (La règle « pas de nowrap » du chantier vise les phrases.) */
header nav a,.lockbadge,.wc-pill,.wc-account{white-space:nowrap}

/* Les seuils ci-dessous sont calculés, pas devinés : la barre fait au plus
   1180 px de large (.wrap) et la somme de ses éléments a grossi de trois
   entrées. On lâche du lest dans l'ordre du moins utile au plus utile. */
@media(max-width:1500px){
  /* « 100 % dans votre navigateur » (218 px) cède la place au solde. La
     promesse reste portée par le badge de chaque page outil et par le pied de
     page ; le solde, lui, est actionnable. */
  .lockbadge{display:none}
}
@media(max-width:1200px){
  /* Le compte se réduit à son avatar : 134 px → 34 px, destination inchangée. */
  .wc-account-label{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .wc-account{padding-left:8px;padding-right:8px;gap:0}
}
@media(max-width:1100px){
  /* La nav pèse 497 px à six entrées et ne tient plus. Elle disparaissait déjà
     sous 760 px (style.css) ; le seuil remonte, une entrée de plus ayant suffi
     à faire déborder les tablettes. Le catalogue de l'accueil et le pied de
     page couvrent la même navigation. */
  header nav{display:none}
}
@media(max-width:900px){
  /* Comme la maquette mobile 4b : logo et solde, rien d'autre. « Se connecter »
     reste offert par le bloc d'accueil du visiteur et par le pied de page. */
  .wc-account{display:none}
}
@media(max-width:440px){
  /* Les derniers pixels : sur 390 px il reste 354 px utiles une fois les marges
     retirées, pour logo + langue + solde + Pro. */
  header.site .in{gap:8px}
  .lang-switch{max-width:76px}
}

/* ----------------------------------------------------------------------------
   `hidden` doit gagner. Une classe qui pose `display:flex` bat la feuille de
   style du navigateur (`[hidden]{display:none}`) : sans cette règle, un
   visiteur non connecté voyait une pastille « 0 crédits », et les panneaux
   masqués des pages outil s'affichaient tous en même temps. Vaut pour tout ce
   que credits.js pilote.
   -------------------------------------------------------------------------- */
[hidden]{display:none!important}


/* L'achat de crédits n'est pas encore ouvert : Stripe n'est pas configuré.
   Les comptes et les soldes, eux, sont réels — d'où un message dédié plutôt
   qu'un vague « indisponible ». Il disparaît dès que la clé est posée. */
.wc-nopay{display:none}
html[data-nopay="1"] .wc-nopay{display:flex;align-items:center;gap:8px;
  margin:0 0 14px;background:var(--alt);border:1px dashed var(--dash);border-radius:var(--r-chip);
  padding:9px 13px;font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
/* Tant que le paiement n'est pas ouvert, on montre un bouton désactivé qui le
   dit, plutôt qu'un bouton qui part et échoue. Les moyens de paiement et la
   case de recharge automatique s'effacent avec lui : proposer de choisir entre
   Apple Pay et Google Pay quand rien n'encaisse n'a aucun sens. */
.wc-nopay-btn{display:none}
html[data-nopay="1"] .wc-nopay-btn{display:block;width:100%;background:var(--disabled-bg);
  cursor:not-allowed}
html[data-nopay="1"] .wc-pay-live,
html[data-nopay="1"] .wc-pay-methods,
html[data-nopay="1"] .wc-pay-form,
html[data-nopay="1"] .wc-pay-autoreload{display:none}
/* La même classe sert de bandeau en tête de page et de note sous le
   comparateur. Combinée à .wc-note, elle garde l'allure d'une note : un cadre
   en pointillés au milieu d'un résultat attirerait l'œil plus que le résultat. */
html[data-nopay="1"] .wc-note.wc-nopay{display:block;background:none;border:none;
  padding:10px 0 0;font-family:var(--font);font-size:13px;color:var(--ink3)}
/* Accès sur invitation : visible seulement quand le serveur filtre réellement
   (même variable des deux côtés). Sans cette phrase, un visiteur demande un
   code et attend indéfiniment — le refus est silencieux par conception. */
.wc-invite{display:none}
html[data-invite="1"] .wc-invite{display:block;background:var(--alt);
  border:1px dashed var(--dash);border-radius:var(--r-chip);padding:10px 13px;
  font-size:13.5px;line-height:1.5;color:var(--ink2);margin:0 0 4px}