/* ============================================================
   InkuPanda — pont entre l'ancien style.css et le système « encre »
   ------------------------------------------------------------
   Les pages applicatives (catalogue, personnalisateur, gang sheet,
   checkout, comptes) portent une logique métier fragile : recherche,
   1 754 zones d'impression, cartes d'ombrage, moteur de prix serveur.
   On ne réécrit donc PAS leur CSS ligne à ligne — on redéfinit les
   variables qu'il consomme.

   Mesure faite avant d'écrire ce fichier : une fois l'en-tête et le pied
   de page passés au gabarit partagé, ces pages n'empruntent plus à
   style.css que **14 variables et 5 classes**. Tout le reste vit dans
   leur propre feuille. C'est ce qui rend l'abandon de style.css possible
   sans réécrire 10 pages d'un coup.

   ⚠️ À charger APRÈS inku.css et AVANT la feuille de la page.
   ============================================================ */

:root{
  /* --- l'ancien nom ment : il contenait du vert bambou depuis février 2026.
     Mesuré dans catalogue.css : ses 24 usages sont des états ACTIFS et
     SÉLECTIONNÉS (onglet courant, bordure de choix, survol, barre de
     défilement, spinner), pas des éclats de marque. Dans le nouveau système
     ce rôle appartient à l'encre. Le mapper sur le vermillon mettrait un
     accent « qui décide » sur chaque onglet et il n'accentuerait plus rien —
     c'est exactement ce que le design system interdit. Le vermillon reste
     donc explicite, sur les prix et les boutons d'achat. */
  --primary-red:    var(--ink);
  --primary-black:  var(--ink);
  --secondary-black: var(--ink-2);
  --light-gray:     var(--paper-2);
  --medium-gray:    var(--rule);
  --white:          var(--paper);

  /* Aucun dégradé nulle part : on rend un aplat. Une variable qui vaut un
     gradient est utilisée en `background`, donc un aplat passe partout. */
  --gradient-red:    var(--ink);
  --gradient-accent: var(--ink);

  /* Le bleu pétrole n'avait pas UN rôle mais deux, et les confondre mettait du
     vermillon partout sur la fiche produit (en-têtes de tailles, barre d'outils,
     survols). Vérifié dans designer.css :
       --accent-dark  → .price-total, .btn-addcart, le prix de la barre mobile :
                        c'est « ça se décide ». Vermillon.
       --accent-mid   → bordures de survol, vignettes, onglets, jauges :
                        c'est de la structure. Encre.
     Le systeme le dit autrement : « si le vermillon est partout, il n'accentue
     plus rien ». */
  --accent-dark:  var(--seal);
  --accent-mid:   var(--ink);
  --accent-light: var(--ink-2);
  --accent-pale:  var(--rule);

  /* Impact et Segoe UI ne sont installées ni sur Android, ni sur macOS,
     ni sur iOS : c'était la panne d'identité visuelle du site. */
  --font-primary: var(--font-text);
  --font-heading: var(--font-display);

  /* Canaux RVB des trois matieres. rgba() n'accepte pas une variable dans ses
     canaux ; la syntaxe moderne rgb(var(--x-rgb) / a) le permet, et c'est ce
     qu'emploie _tools/sweep_css.py pour convertir les 90 rgba() en dur des
     feuilles de page sans perdre leur transparence. */
  --seal-rgb:  229 42 32;    /* #E52A20 */
  --ink-rgb:   20 17 15;     /* #14110F */
  --paper-rgb: 255 249 247;  /* #FFF9F7 */

  --transition: all var(--t-hover) ease;
}

/* ---------- les 5 classes que les pages empruntaient encore ---------- */

/* Le titre à dégradé de l'ancienne charte. Pas de dégradé dans le système :
   le mot vedette passe en display, et c'est le vermillon qui le distingue. */
.text-gradient{
  font-family:var(--font-display); color:var(--seal);
  -webkit-text-fill-color:currentColor; background:none;
}

/* Boutons hérités. `.btn` vient déjà d'inku.css ; on ne redéfinit que les
   variantes de l'ancien nommage pour que le balisage existant reste juste. */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-text); font-weight:700; font-size:.95rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.95rem 1.6rem; min-height:44px; border:1px solid transparent; border-radius:0;
  background:var(--seal); color:#fff; text-decoration:none; cursor:pointer;
  transition:background-color var(--t-hover), color var(--t-hover);
}
.btn-primary:hover{ background:var(--seal-hover); color:#fff; }
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-text); font-weight:700; font-size:.95rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.95rem 1.6rem; min-height:44px; border:1px solid currentColor; border-radius:0;
  background:transparent; color:var(--fg, var(--ink)); text-decoration:none; cursor:pointer;
  transition:background-color var(--t-hover), color var(--t-hover);
}
.btn-secondary:hover{ background:var(--fg, var(--ink)); color:var(--bg, var(--paper)); }

/* Le prix est le seul chiffre qui decide : il reste vermillon, quelle que soit
   la variable dont la feuille de page l'avait colore. Nommes un par un et pas
   par joker [class*="price"] : celui-ci attrapait .size-price-table et peignait
   toute la grille des tailles en vermillon. Regle du systeme :
   « --seal : prix, bouton d'achat principal, numero de section, sceau ». */
.pages .price-total,
.pages .price-value,
.pages .product-price,
.pages .sheet-price,
.pages .size-price,
.pages .cart-item-price,
.pages .mobile-buybar__price strong,
.pages .price-line--total{ color:var(--seal); }

/* Inverse dans designer.css : .size-name (S, M, L…) portait --accent-dark et
   .size-price portait --primary-red. Une TAILLE est une etiquette, un PRIX
   decide : on remet chacun a sa place. */
.pages .size-price-table .size-name{ color:var(--ink); }

/* Avis de consentement sous les formulaires (Loi 25). */
.consent-note{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.05em;
  line-height:1.6; color:var(--muted, var(--lavis)); margin:.9rem 0 0; max-width:60ch;
}
.consent-note a{ color:inherit; text-decoration:underline; }

/* ---------- rattrapages généraux de l'ancien style ----------
   Ces pages ont été écrites pour un thème à coins arrondis, ombres floues
   et dégradés. Le système n'en veut aucun : plutôt que de les traquer dans
   six feuilles, on les neutralise ici, à la racine. */
.pages [class*="card"],
.pages [class*="box"],
.pages [class*="panel"],
.pages input,
.pages select,
.pages textarea,
.pages button{ border-radius:0; }

/* Un conteneur hérité se comporte comme .wrap. */
.pages .container{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); }

/* Titres. Le systeme est formel : Dela Gothic One est INTERDITE sous 1.4rem,
   ou elle s'arrondit et perd son autorite. Les h1/h2 de ces pages sont grands,
   les h3 et en dessous ne le sont pas — ils restent donc en Instrument Sans
   grasse, qui est faite pour ca. */
.pages h1,.pages h2{ font-family:var(--font-display); font-weight:400; letter-spacing:-.005em; }
.pages h3,.pages h4,.pages h5,.pages h6{ font-family:var(--font-text); font-weight:700; letter-spacing:.005em; }