/* Froggy FORGE, site ForgeV2. Couche sémantique et composants, sur les tokens de la charte
   (tokens.css). Rien de codé en dur hors des tokens et des deux couleurs de texte imposées
   par la règle CTA de la charte. Voir site/DESIGN.md. */

:root {
  --color-bg: var(--bg);
  --color-surface: var(--bg-card);
  --color-surface-2: var(--steel-light);
  --color-text: var(--ink);
  --color-text-2: var(--ink-2);
  --color-muted: var(--ink-3);
  --color-accent: var(--green);
  --color-accent-2: var(--green-2);
  --color-spark: var(--spark);
  --color-spark-soft: var(--spark-soft);
  --color-border: var(--rule);
  --color-border-2: var(--rule-strong);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-on-accent: #061a0d;
  --color-on-spark: #1c0a00;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
  --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg);
  --font-size-sm: .875rem; --font-size-base: 1rem; --font-size-md: 1.1875rem; --font-size-lg: 1.25rem;
  --font-size-titre: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --font-size-xl: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --font-size-display: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --mesure: 68ch;
  --largeur-page: 72rem;
  --interligne: 1.55;
  --duree: 180ms;
  --courbe: cubic-bezier(.2, .7, .3, 1);
}

.sombre {
  --color-bg: var(--bg-dark);
  /* Steel est la teinte des contextes matériels, pas celle d'une carte de garantie : sur la
     bande Ink les surfaces restent dans la famille verte, sinon elles lisent froid. */
  --color-surface: var(--ink-2);
  --color-surface-2: var(--ink-2);
  --color-text: var(--ink-on-dark);
  --color-text-2: var(--ink-on-dark-2);
  --color-muted: var(--ink-on-dark-3);
  --color-accent-2: var(--green-3);
  --color-border: var(--rule-on-dark);
  --color-border-2: rgba(244, 250, 246, .22);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--bg-dark);
    --color-surface: var(--ink-2);
    --color-surface-2: var(--ink-2);
    --color-text: var(--ink-on-dark);
    --color-text-2: var(--ink-on-dark-2);
    --color-muted: var(--ink-on-dark-3);
    --color-accent-2: var(--green-3);
    --color-border: var(--rule-on-dark);
    --color-border-2: rgba(244, 250, 246, .22);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .clair {
    --color-bg: var(--steel-light);
    --color-surface: var(--bg-card);
    --color-surface-2: var(--bg);
    --color-text: var(--ink);
    --color-text-2: var(--ink-2);
    --color-muted: var(--ink-3);
    --color-accent-2: var(--green-2);
    --color-border: var(--rule);
    --color-border-2: var(--rule-strong);
    color-scheme: light;
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--font-size-base);
  line-height: var(--interligne);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; margin: 0 0 var(--space-4); letter-spacing: -.01em; color: var(--color-text); }
/* Rajdhani est condensée : un interligne serré tient sur un très grand titre, il tasse les
   titres courants, souvent sur deux lignes dans une carte. */
h1 { font-size: var(--font-size-display); line-height: 1.08; }
h2, h3, h4 { line-height: 1.22; }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); font-weight: 600; }
/* Sans taille propre, un h4 en Rajdhani 700 retombe à 1rem, donc optiquement plus petit que
   le corps en Geist qu'il surmonte. */
h4 { font-size: var(--font-size-md); font-weight: 600; letter-spacing: .01em; }
p, ul, ol, dl, table { margin: 0 0 var(--space-4); }
p, li, dd { max-width: var(--mesure); }
a { color: var(--color-accent-2); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
img, video { max-width: 100%; height: auto; display: block; }
::selection { background: var(--green-soft); color: var(--ink); }
.sombre ::selection { background: var(--green-2); color: var(--ink-on-dark); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }
.evitement { position: absolute; left: var(--space-4); top: -100px; background: var(--color-accent); color: var(--color-on-accent); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 100; font-weight: 600; }
.evitement:focus { top: var(--space-4); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono, .montant, .reference, .chiffre { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.montant { white-space: nowrap; }
.legende, .mention { font-size: var(--font-size-sm); color: var(--color-muted); }
.mention { max-width: none; }
.conteneur { width: min(100% - 2rem, var(--largeur-page)); margin-inline: auto; }
.section { padding-block: var(--space-12); background: var(--color-bg); color: var(--color-text); }
.section + .section { padding-top: var(--space-8); }
.section-surface + .section, .section + .section-surface, .sombre + .section, .section + .sombre { padding-top: var(--space-12); }
.section-surface { background: var(--color-surface-2); }
.section > .conteneur > h2 { margin-bottom: var(--space-6); }
.grille-2 { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.mt-12 { margin-top: var(--space-12); }
.grille-2 > *, .grille-3 > *, .pied-grille > * { min-width: 0; }
.grille-3 { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: stretch; }

/* ------------------------------------------------------------------ boutons */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: .75rem 1.25rem; border-radius: var(--radius-sm); font-family: var(--f-sans); font-weight: 600; font-size: var(--font-size-base); text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2; transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), background-color var(--duree) var(--courbe); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-cta); }
/* Une ombre colorée sur fond sombre devient un halo, le tell le plus reconnaissable des
   interfaces générées. Sur fond clair la même ombre se lit comme une élévation teintée et
   reste conforme à la charte, on ne la neutralise que sur les surfaces sombres. */
.sombre .btn-primary, .sombre .btn-spark { box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--green-3); }
.btn-spark { background: var(--color-spark); color: var(--color-on-spark); box-shadow: var(--shadow-cta-spark); }
.btn-secondaire { background: transparent; color: var(--color-text); border-color: var(--color-border-2); }
.btn-secondaire:hover { border-color: var(--color-text); }
.btn-lien { background: none; border: 0; padding: 0; color: var(--color-accent-2); text-decoration: underline; font: inherit; cursor: pointer; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--color-surface); color: var(--color-muted);
  border-color: var(--color-border-2); cursor: not-allowed; transform: none; box-shadow: none; }
.btn-entete { padding: .55rem 1rem; }

/* ------------------------------------------------------------------ en-tête et pied */
.entete { position: sticky; top: 0; z-index: 50; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.entete-ligne { display: flex; align-items: center; gap: var(--space-6); padding-block: var(--space-3); }
.marque img { width: clamp(150px, 18vw, 220px); height: auto; }
.nav-principale { margin-left: auto; }
.nav-principale ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); list-style: none; margin: 0; padding: 0; }
.nav-principale a { color: var(--color-text-2); text-decoration: none; font-size: var(--font-size-sm); font-weight: 500; padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
.nav-principale a:hover { color: var(--color-text); border-bottom-color: var(--color-accent); }
.menu-replie { display: none; }
@media (max-width: 64rem) {
  .nav-principale { display: none; }
  .menu-replie { display: block; margin-left: auto; position: relative; }
  .menu-replie summary { cursor: pointer; list-style: none; padding: .5rem .9rem; border: 1px solid var(--color-border-2);
    border-radius: var(--radius-sm); font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text);
    white-space: nowrap; }
  .menu-replie summary::-webkit-details-marker { display: none; }
  /* Les triangles pleins manquent à Geist et rendent un carré vide : on reprend le signe
     employé par les questions fréquentes, qui lui est présent. */
  .menu-replie summary::after { content: " +"; font-family: var(--f-mono); }
  .menu-replie[open] summary::after { content: " ‘2"; font-family: var(--f-mono); }
  .menu-replie nav { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 60;
    background: var(--color-bg); border: 1px solid var(--color-border-2); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg); min-width: 14rem; }
  .menu-replie ul { list-style: none; margin: 0; padding: var(--space-2); display: grid; gap: var(--space-1); }
  .menu-replie a { display: block; padding: var(--space-2) var(--space-3); color: var(--color-text);
    text-decoration: none; border-radius: var(--radius-sm); }
  .menu-replie a:hover, .menu-replie a:focus-visible { background: var(--color-surface); }
  .btn-entete { order: 3; }
}
/* L'en-tête est collant : sans cette marge, un saut d'ancre dépose le titre de section dessous. */
section[id] { scroll-margin-top: 5.5rem; }
.pied { padding-block: var(--space-12) var(--space-8); border-top: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); }
.pied-grille { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.pied-texte, .pied-mentions p { font-size: var(--font-size-sm); color: var(--color-text-2); max-width: none; }
.pied-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pied-liens a { color: var(--color-text-2); }
.pied-version { font-family: var(--f-mono); color: var(--color-muted); }

/* ------------------------------------------------------------------ bandeau d'accueil */
.bandeau { position: relative; overflow: hidden; padding-block: var(--space-24) var(--space-16); background: var(--color-bg); }
.bandeau-media { position: absolute; inset: 0; z-index: 0; }
.bandeau-media video, .bandeau-media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.bandeau-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 31, 20, .55), rgba(10, 31, 20, .92)); }
.bandeau .conteneur { position: relative; z-index: 1; }
.bandeau h1 { max-width: 18ch; margin-bottom: var(--space-6); }
.bandeau h1 em { font-style: normal; color: var(--color-accent-2); }
.bandeau-texte { font-size: var(--font-size-lg); color: var(--color-text-2); max-width: 52ch; }
.bandeau-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
/* Le crédit et la commande de la vidéo restent dans le flux : posés en absolu, ils passaient
   par-dessus les boutons d'appel en bureau et se chevauchaient entre eux en mobile. */
.bandeau-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-12); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border); }
.credit-illustration { font-size: .75rem; color: var(--color-muted); font-family: var(--f-mono); margin: 0; }

/* ------------------------------------------------------------------ cartes et badges */
.carte { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.carte h3 { margin-bottom: var(--space-2); }
.carte-gamme { display: flex; flex-direction: column; gap: var(--space-3); }
.carte-gamme .accroche { color: var(--color-text-2); }
.carte-gamme dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--font-size-sm); }
.carte-gamme dt { color: var(--color-muted); }
.carte-gamme dd { margin: 0; font-family: var(--f-mono); }
.carte-gamme .prix-depuis { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.prix-depuis .montant { display: block; font-family: var(--f-display); font-size: 1.75rem; font-weight: 700; }
.prix-depuis .montant + .legende { display: block; }
.badge { display: inline-block; padding: .15rem .6rem; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: .75rem; font-weight: 500; letter-spacing: .02em; }
.badge-vert { background: var(--green-soft); color: var(--green-2); }
.sombre .badge-vert { background: rgba(34, 197, 94, .18); color: var(--green-3); }
.badge-spark { background: var(--color-spark-soft); color: var(--color-on-spark); }
.badge-steel { background: var(--steel-light); color: var(--steel-dark); }
.badge-cible { background: transparent; border: 1px solid var(--color-border-2); color: var(--color-muted); }
.figure { margin: 0; }
/* Les visuels n'ont pas tous le même format, l'un d'eux est recadré : une boîte de rapport
   fixe évite les rangées bancales et les trous dans la grille. */
.figure img { border-radius: var(--radius-md); width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.grille-visuels { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.figure figcaption { margin-top: var(--space-2); font-size: .75rem; color: var(--color-muted); font-family: var(--f-mono); }

/* ------------------------------------------------------------------ tableaux */
.tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
/* Une zone qui défile doit être atteignable au clavier, et son bord doit se voir. */
.tableau-defilant:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.legende-tableau { font-weight: 600; color: var(--color-text-2); margin-bottom: var(--space-2); max-width: none; }
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
caption { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 600; color: var(--color-text-2); caption-side: top; }
th, td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-top: 1px solid var(--color-border); }
thead th { border-top: 0; background: var(--color-surface-2); color: var(--color-text-2); font-weight: 600; white-space: nowrap; }
th[scope="row"] { font-weight: 500; color: var(--color-text-2); }
td.num, th.num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau-caracteristiques th[scope="row"] { width: 12rem; }
/* Valeurs techniques en chiffres tabulaires, comme les cartes de gamme au-dessus. */
.tableau-caracteristiques td { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 44rem) {
  .tableau-caracteristiques th[scope="row"] { width: auto; min-width: 8rem; }
  .tableau-tarifs th[scope="row"] .badge { display: none; }
  th, td { padding: var(--space-2) var(--space-3); }
}
.tableau-tarifs td.num { font-size: var(--font-size-base); }
.tableau-tarifs .fort { font-weight: 600; }
/* Un écart de prix est une catégorie, pas une alerte : il ne prend pas la couleur d'état. */
.ecart-plus { color: var(--color-text-2); font-weight: 600; }
.ecart-moins { color: var(--color-accent-2); font-weight: 600; }

/* ------------------------------------------------------------------ listes de garanties et FAQ */
.liste-garanties { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.liste-garanties li { max-width: none; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.liste-garanties li.cible { border-style: dashed; border-color: var(--color-border-2); }
.liste-garanties strong { display: block; margin-bottom: var(--space-1); }
.faq details { border-top: 1px solid var(--color-border); padding: var(--space-3) 0; }
.faq details:last-child { border-bottom: 1px solid var(--color-border); }
.faq summary { cursor: pointer; font-weight: 600; font-size: var(--font-size-lg); font-family: var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--color-accent-2); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: var(--space-3); }
/* Sur une section déjà en surface secondaire, un encart de la même teinte disparaît : il prend
   alors la matière des cartes voisines, pour que deux blocs de même rang se lisent pareil. */
.encart { padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.encart-spark { border-color: var(--color-border-2); }
.encart p:last-child { margin-bottom: 0; }
.encart .tableau-defilant { margin-block: var(--space-4); }
.encart table caption { display: none; }

/* ------------------------------------------------------------------ souscription */
.parcours { max-width: 48rem; }
.etape-courante { font-family: var(--f-mono); margin-bottom: var(--space-2); }
.etapes { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin-bottom: var(--space-8); font-family: var(--f-mono); font-size: .75rem; }
.etapes li { padding: .3rem .7rem; border-radius: var(--r-pill); border: 1px solid var(--color-border-2); color: var(--color-muted); max-width: none; }
.etapes li[aria-current="step"] { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); font-weight: 500; }
.etapes li.faite { border-color: var(--color-accent-2); color: var(--color-accent-2); }
.champ { margin-bottom: var(--space-4); }
.champ label, .champ legend { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.champ .aide { font-size: var(--font-size-sm); color: var(--color-muted); margin: 0 0 var(--space-2); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ input[type="number"], .champ input[type="date"], .champ select, .champ textarea {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--color-border-2); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; caret-color: var(--color-accent-2);
}
.champ input[type="number"] { font-family: var(--f-mono); max-width: 8rem; }
.champ input:invalid[data-touche], .champ .erreur-champ input { border-color: var(--color-danger); }
.champ .erreur { color: var(--color-danger); font-size: var(--font-size-sm); margin: var(--space-1) 0 0; }
.champ-court { max-width: 18rem; }
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-6); margin: 0 0 var(--space-6); }
legend { padding-inline: var(--space-2); }
.choix { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; max-width: none; }
.choix input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: var(--green-2); }
.choix label { font-weight: 500; margin: 0; }
.choix .aide { margin: var(--space-1) 0 0; }
.ligne-composition { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 9rem; gap: var(--space-4); align-items: start; padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.ligne-composition:last-of-type { border-bottom: 1px solid var(--color-border); }
.ligne-composition > * { min-width: 0; }
.ligne-composition strong { display: block; margin-bottom: var(--space-1); }
.ligne-composition .champ { margin-bottom: 0; }
.ligne-composition .champ input[type="number"] { max-width: 100%; }
@media (max-width: 44rem) {
  .ligne-composition { grid-template-columns: 1fr 1fr; }
  .ligne-composition > :first-child { grid-column: 1 / -1; }
}
.actions-etape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); }
.alerte { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid; max-width: none; }
.alerte-danger { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)); }
.alerte-info { border-color: var(--color-border-2); background: var(--color-surface-2); }
.recap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); }
.recap table { font-size: var(--font-size-base); }
.recap th[scope="row"] .reference { display: block; font-size: var(--font-size-sm); color: var(--color-muted); font-weight: 400; }
.recap tfoot td, .recap tfoot th { font-weight: 700; border-top: 2px solid var(--color-border-2); }
.numero-dossier { font-family: var(--f-display); font-size: var(--font-size-xl); font-weight: 700; color: var(--color-accent-2); }
.htmx-request .indicateur { visibility: visible; }
.indicateur { visibility: hidden; font-size: var(--font-size-sm); color: var(--color-muted); }
.marqueur { background: var(--warning); color: var(--ink); padding: 0 .3rem; border-radius: 2px; font-family: var(--f-mono); font-size: .85em; }

/* ------------------------------------------------------------------ pages légales et erreurs */
.page-simple { padding-block: var(--space-12) var(--space-16); }
.page-simple > .conteneur { max-width: calc(var(--mesure) + 4rem); }
.page-simple h1 { font-size: var(--font-size-xl); }
.page-simple h2 { font-size: var(--font-size-titre); margin-top: var(--space-10); }
.page-simple.parcours-page > .conteneur { max-width: none; }
.page-erreur { min-height: 50vh; display: grid; place-items: center; text-align: center; }
.page-erreur .code { font-family: var(--f-display); font-size: var(--font-size-display); color: var(--color-spark); }