/**
 * 20 · LES MOTIFS — ce qui se répète d'une page à l'autre.
 *
 * ┌───────────────────────────────────────────────────────────────────────┐
 * │  UNE CLASSE = UNE INTENTION, JAMAIS UNE POSITION.                     │
 * │                                                                       │
 * │  `.carte__panneau`, pas `> div > div`. Le thème précédent ciblait le   │
 * │  panneau d'une carte par sa profondeur dans l'arbre : ça marchait sur │
 * │  les cartes à deux enveloppes et tombait sur le CADRE de celles à     │
 * │  trois — 40 px de dégradé nu sous le bouton, invisible à la lecture   │
 * │  du code.                                                             │
 * │                                                                       │
 * │  Ici, chaque pièce porte son nom. Ajouter une enveloppe demain ne     │
 * │  casse rien.                                                          │
 * └───────────────────────────────────────────────────────────────────────┘
 *
 * Convention : `bloc`, `bloc__piece`, `bloc--variante`.
 */


/* ═══════════════════════════════════════════════════════════════════════
   LE BOUTON — la signature de la marque
   ═══════════════════════════════════════════════════════════════════════
   Un parallélogramme cisaillé à −12°, dont le contenu porte le cisaillement
   inverse pour rester lisible. Toute la variation passe par quatre variables :
   une variante ne réécrit jamais la forme, seulement les couleurs.          */

.bouton {
  /* Aucun bouton ne sort de la colonne qui le porte : à 320 et 360 px le
     grand bouton faisait 343 px de large et tirait la page sur le côté. */
  max-inline-size: 100%;

  /*
   * ┌──────────────────────────────────────────────────────────────┐
   * │  L'OR REMPLACE LE ROUGE, ET CE N'EST PAS UNE QUESTION DE GOÛT.       │
   * │                                                                       │
   * │  Contrastes mesurés sur la page :                                     │
   * │                                                                       │
   * │    blanc sur rouge #FF2F33 → **3,68**  — SOUS le minimum WCAG AA (4,5) │
   * │    noir sur or #F2C844     → **12,34** — plus de trois fois mieux     │
   * │                                                                       │
   * │  Le bouton d'achat était donc, littéralement, l'élément le moins        │
   * │  lisible de la page — et c'est celui sur lequel tout repose.          │
   * │                                                                       │
   * │  ⚠ Le rouge ne disparaît pas : il reste la couleur des ACCENTS         │
   * │  (numéros de chapitre, bandes de fiche, filets, aura). Il cesse        │
   * │  seulement d'être la couleur des SURFACES pleines, où il ne tient      │
   * │  pas le texte. L'identité est intacte ; c'est la hiérarchie qui        │
   * │  change de main.                                                       │
   * └──────────────────────────────────────────────────────────────┘
   */
  --b-fond:        var(--rouge-surface);
  --b-texte:       var(--blanc);
  --b-survol-fond: var(--blanc);
  --b-survol-texte: var(--rouge-surface);
  --b-filet:       var(--rouge-filet);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);

  min-block-size: 44px;
  padding: var(--e-3) var(--e-8);

  background: var(--b-fond);
  color: var(--b-texte);
  border: var(--filet) solid transparent;

  font-family: var(--titre);
  font-size: var(--t-lg);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  transform: skewX(var(--cisaille));
  transition:
    background-color var(--duree-action) var(--sortie),
    color            var(--duree-action) var(--sortie),
    border-color     var(--duree-action) var(--sortie),
    box-shadow       var(--duree-action) var(--sortie);
}

/* Le contre-cisaillement. Sur un enfant, jamais sur le bouton lui-même :
   deux transformations sur le même élément se composent au lieu de
   s'annuler. */
.bouton > * { transform: skewX(var(--contre-cisaille)); }

/* Le second filet, décalé — le trait qui donne son épaisseur au bouton. */
.bouton::after {
  content: '';
  position: absolute;
  inset: -5px -5px 5px 5px;
  border: var(--filet) solid var(--b-filet);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duree-action) var(--sortie);
}

.bouton:hover,
.bouton:focus-visible {
  background: var(--b-survol-fond);
  color: var(--b-survol-texte);
}

.bouton:hover::after { opacity: 1; }

/* L'appui : un enfoncement d'un pixel. La transformation reprend le
   cisaillement, sinon le bouton se redresse d'un coup. */
.bouton:active { transform: skewX(var(--cisaille)) translateY(1px); }

.bouton[aria-disabled="true"],
.bouton:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Les variantes ─────────────────────────────────────────────────── */

.bouton--or {
  --b-fond: var(--or);
  --b-texte: var(--noir);
  --b-survol-fond: var(--blanc);
  --b-survol-texte: var(--noir);
  --b-filet: var(--or-filet);
}

/* ⚠ **Le contour est la variante par défaut d'une grille.** Un seul bouton
   plein par écran : c'est la décision du client après l'audit. Cinq boutons
   rouges côte à côte ne hiérarchisent rien — ils se neutralisent. */
.bouton--contour {
  --b-fond: transparent;
  --b-texte: var(--or);
  --b-survol-fond: var(--or);
  --b-survol-texte: var(--noir);
  border-color: var(--or);
}

.bouton--grand {
  padding: var(--e-4) var(--e-12);
  font-size: var(--t-xl);
}

.bouton--pleine-largeur {
  display: flex;
  inline-size: 100%;
}

/* Le halo, réservé au bouton principal d'un écran. */
.bouton--halo { box-shadow: var(--halo-rouge); }
.bouton--or.bouton--halo { box-shadow: var(--halo-or); }

/* L'état d'attente, pendant un ajout au panier. */
.bouton[data-occupe="1"] { pointer-events: none; opacity: .7; }

.bouton[data-occupe="1"] .bouton__texte { visibility: hidden; }

.bouton[data-occupe="1"]::before {
  content: '';
  position: absolute;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: hidaya-tourne .7s linear infinite;
}

@keyframes hidaya-tourne { to { transform: rotate(1turn); } }


/* ═══════════════════════════════════════════════════════════════════════
   LA CARTE — le second motif de la marque
   ═══════════════════════════════════════════════════════════════════════
   Un panneau à l'angle coupé, avec un cadre facultatif. La structure est
   TOUJOURS la même, quelle que soit la variante : `.carte` > `.carte__cadre`
   > `.carte__panneau`. C'est ce qui permet de cibler par rôle.

   ⚠ **`flex`, pas `height: 100%`.** Le pourcentage ne se résout que si le
   parent a une hauteur définie ; au troisième niveau d'enveloppe la chaîne se
   rompt et le panneau retombe sur la hauteur de son contenu, en silence.
   `flex-1` ne dépend d'aucun pourcentage.                                    */

.carte {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  position: relative;
  transition: transform var(--duree-action) var(--sortie);
}

.carte:hover { transform: translateY(-.5rem); }

.carte__cadre {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--filet);
  background: var(--acier);
  clip-path: var(--decoupe-carte);
}

.carte__panneau {
  /* ⚠ `relative` pour que la lueur au curseur (27-tome.css) se pose ICI et non
     sur la carte : le panneau porte le `clip-path`, donc la lueur épouse la
     découpe au lieu de déborder en rectangle sur le coin biseauté. */
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;                     /* ← et non `height: 100%` */
  padding: var(--e-6);
  background: var(--panneau);
  clip-path: var(--decoupe-carte);
}

/* Chaque traitement de carte porte sa teinte : la lueur suit, et les cartes
   sobres restent sobres — la hiérarchie passe aussi par là. */
.carte              { --accent: var(--acier); }
.carte--recommande  { --accent: var(--or); }
.carte--coeur       { --accent: var(--or); }
.carte--limite      { --accent: var(--rouge); }

.carte__visuel {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  margin-block-end: var(--e-4);
  padding: var(--e-2);
  background: var(--noir);
  border: var(--filet) solid var(--acier);
  overflow: hidden;
}

.carte__visuel img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.carte__titre {
  font-size: var(--t-2xl);
  margin-block-end: var(--e-2);
}

/* ⚠ **Un titre cliquable n'est pas un lien de texte courant.** Le socle
   souligne et colore les `<a>` en rouge, ce qui est juste dans un paragraphe
   et faux sur un titre de carte : ça le fait ressembler à une note de bas de
   page. Il garde la couleur de son titre, et le soulignement n'apparaît qu'au
   survol — pour dire qu'il est cliquable au moment où la question se pose. */
.carte__lien {
  color: inherit;
  text-decoration: none;
}

.carte__lien:hover,
.carte__lien:focus-visible {
  color: var(--or);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* La zone cliquable couvre toute la carte : on vise le titre, on peut cliquer
   n'importe où. Le bouton reste au-dessus par son propre `position`. */
.carte__lien::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.carte__pied { position: relative; z-index: 2; }

.carte__prix {
  font-family: var(--titre);
  font-size: var(--t-3xl);
  color: var(--blanc);
  margin-block-end: var(--e-4);
}

/* Le corps pousse le bouton en bas : c'est ce qui aligne les boutons d'une
   grille sur la même ligne, quelles que soient les longueurs de texte. */
.carte__corps {
  flex: 1;
  margin-block-end: var(--e-6);
  color: var(--gris);
}

.carte__pied { margin-block-start: auto; }

/* ── Les cadres, cinq traitements dessinés ─────────────────────────── */

.carte--sobre .carte__cadre  { background: var(--acier); }
.carte--simple .carte__cadre { background: var(--blanc-filet); }

.carte--recommande .carte__cadre { background: var(--or-filet); }
.carte--recommande .carte__titre { color: var(--or); }

.carte--coeur .carte__cadre {
  background: linear-gradient(to bottom, var(--or), var(--rouge));
  box-shadow: var(--halo-or);
}
.carte--coeur .carte__panneau { background: var(--noir); }
.carte--coeur .carte__titre   { color: var(--or); }
.carte--coeur .carte__visuel  { border-color: var(--or); }

.carte--limite .carte__cadre {
  background: linear-gradient(to bottom, var(--rouge), #700000);
  box-shadow: var(--halo-rouge);
}
.carte--limite .carte__panneau { background: var(--noir); }
.carte--limite .carte__titre   { color: var(--rouge); }
.carte--limite .carte__visuel  { border-color: var(--rouge); }


/* ═══════════════════════════════════════════════════════════════════════
   LE BADGE — l'étiquette qui coiffe une carte
   ═══════════════════════════════════════════════════════════════════════ */

.badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: var(--plan-flottant);

  padding: var(--e-1) var(--e-4);
  background: var(--noir);
  border: var(--filet) solid currentColor;
  color: var(--or);

  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--rouge { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }

/* Le ruban diagonal, dans un coin d'image. */
.ruban {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: -3.5rem;
  z-index: var(--plan-flottant);

  padding: var(--e-1) var(--e-16);
  background: var(--or);
  color: var(--noir);

  font-family: var(--titre);
  font-size: var(--t-xs);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  text-align: center;

  rotate: 45deg;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   LES GRILLES
   ═══════════════════════════════════════════════════════════════════════
   ⚠ **`stretch`, jamais `end`.** Une grille alignée par le bas reporte toute
   la différence de longueur des textes EN HAUT : mesuré sur les trois packs,
   108 px d'escalier et trois boutons à trois hauteurs. En étirement, les
   cellules ont la même hauteur et `.carte__corps` absorbe l'écart.           */

.grille {
  display: grid;
  gap: var(--e-8);
  align-items: stretch;
}

/* `auto-fit` plutôt qu'un nombre de colonnes : la grille se réorganise seule
   selon la place, sans point d'arrêt à maintenir. */
.grille--cartes  { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.grille--large   { grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }
.grille--deux    { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }


/* ═══════════════════════════════════════════════════════════════════════
   L'ENTÊTE DE SECTION
   ═══════════════════════════════════════════════════════════════════════ */

.entete-section {
  margin-block-end: var(--e-12);
  text-align: center;
}

.entete-section__surtitre {
  display: block;
  margin-block-end: var(--e-2);
  color: var(--rouge);
  font-family: var(--titre);
  font-size: var(--t-lg);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

.entete-section__titre { font-size: var(--t-4xl); }

.entete-section__chapeau {
  max-inline-size: var(--mesure);
  margin: var(--e-4) auto 0;
  color: var(--gris);
  font-size: var(--t-lg);
}

/* La partie mise en avant d'un triptyque. */
.accent { color: var(--or); }


/* ═══════════════════════════════════════════════════════════════════════
   LES TUILES DE RÉASSURANCE
   ═══════════════════════════════════════════════════════════════════════
   Livraison, paiement, retours, contact. Baymard : 67 % des sites n'affichent
   pas le coût total sur la fiche produit, et 48 % des abandons viennent de
   frais découverts trop tard. Ces tuiles répondent avant le clic.            */

.reassurance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--filet);
  background: var(--acier);
  border-block: var(--filet) solid var(--acier);
}

.reassurance__tuile {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4);
  background: var(--panneau-creux);
}

.reassurance__icone {
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--or);
}

.reassurance__titre {
  font-family: var(--titre);
  font-size: var(--t-base);
  letter-spacing: var(--lettrage-capital);
  color: var(--blanc);
}

.reassurance__texte {
  margin-block-start: var(--e-1);
  font-size: var(--t-sm);
  color: var(--gris);
}


/* ═══════════════════════════════════════════════════════════════════════
   L'APPARITION AU DÉFILEMENT
   ═══════════════════════════════════════════════════════════════════════
   ⚠ **L'état initial est posé par le JS, pas par le CSS.** Si la feuille
   masquait l'élément d'emblée, une page ouverte sans JavaScript resterait
   vide — le contenu existerait dans le HTML et personne ne le verrait. Ici,
   tout est visible par défaut ; le script ajoute `.apparait` seulement s'il
   tourne, et retire alors l'opacité au passage.                              */

/* ⚠ **`.js` EN TÊTE DU SÉLECTEUR, ET C'EST TOUT L'INTÉRÊT.**

   Première écriture : `.apparait { opacity: 0 }` tout court. J'avais écrit
   juste au-dessus qu'il ne fallait pas faire ça… et je l'ai fait. Résultat
   au premier rendu : une page de 10 436 px entièrement NOIRE sous le héros.
   Le contenu était dans le HTML, lisible par un moteur de recherche, et
   invisible pour un humain dès que le script ne tournait pas.

   La classe `.js` est posée sur `<html>` par un script en ligne dans le
   `<head>` (voir `hidaya_marque_js()`), avant le premier affichage. Donc :

     · JavaScript actif   → `.js` présente, le contenu est masqué puis révélé ;
     · JavaScript absent  → pas de `.js`, ces règles ne s'appliquent jamais,
                             tout est visible.

   ⚠ Le script doit être EN LIGNE et dans le `<head>`. Un fichier externe,
   même non différé, laisserait le contenu apparaître puis disparaître — un
   clignotement pire que l'absence d'animation.                              */
.js .apparait {
  opacity: 0;
  translate: 0 1.5rem;
  transition:
    opacity   var(--duree-entree) var(--sortie),
    translate var(--duree-entree) var(--sortie);
}

.js .apparait.est-vu { opacity: 1; translate: 0 0; }

.apparait--delai-1 { transition-delay:  80ms; }
.apparait--delai-2 { transition-delay: 160ms; }
.apparait--delai-3 { transition-delay: 240ms; }


/* ═══════════════════════════════════════════════════════════════════════
   LES FILETS ET SÉPARATEURS
   ═══════════════════════════════════════════════════════════════════════ */

.filet {
  block-size: var(--filet);
  border: 0;
  background: var(--acier);
}

.filet--accent {
  background: linear-gradient(to right, var(--rouge), transparent);
}



/* ════════════════════════════════════════════════════════════════════════
   LA MATIÈRE — ce qui empêche un fond d'être un aplat
   ════════════════════════════════════════════════════════════════════════
   ⚠ **Une page paraît vide non pas parce qu'il y a trop de noir, mais parce
   que rien ne varie.** Dix sections sur le même fond, c'est un long ruban
   indifférencié : l'œil décroche à la troisième et le visiteur conclut qu'il
   n'y a rien. Ces trois traitements découpent la page en actes.            */

/* Le grain. Un bruit à 3,5 % tue l'aspect « aplat numérique » de n'importe
   quel fond uni. Sur une section, jamais sur toute la page — ça sature. */
.grain { position: relative; isolation: isolate; }

.grain > * { position: relative; z-index: 2; }

.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* La lueur. Deux radiales très étalées, hors-centre, une seule teinte —
   c'est ce qui remplace le dégradé à 45° qu'on reconnaît de loin. La
   différence tient au placement et à l'étalement : un dégradé qu'on ne peut
   pas pointer du doigt. */
.lueur--rouge {
  background-image:
    radial-gradient(115% 75% at 12% -10%, rgba(255, 47, 51, .13), transparent 58%),
    radial-gradient(95% 65% at 105% 40%, rgba(255, 47, 51, .07), transparent 62%);
}

.lueur--or {
  background-image:
    radial-gradient(110% 70% at 88% -8%, rgba(242, 200, 68, .11), transparent 56%),
    radial-gradient(90% 60% at -5% 55%, rgba(242, 200, 68, .06), transparent 60%);
}


/* ════════════════════════════════════════════════════════════════════════
   LE CADRE À ZOOM — l'effet par défaut de toute image cliquable
   ════════════════════════════════════════════════════════════════════════
   L'image grandit, le cadre ne bouge pas. Tout le mécanisme est le
   `overflow: hidden` du parent.

   ⚠ **1,045 et pas 1,10.** À 1,02 l'effet est imperceptible, à 1,10 il est
   vulgaire. C'est la zone où l'effet se ressent sans se voir.

   ⚠ **`scale`, jamais `transform`.** Un même élément est souvent à la fois
   survolable et révélé au défilement. Si les deux passent par `transform`, la
   règle de révélation écrase celle de survol et la carte ne bouge plus jamais
   — défaut silencieux, invisible à la lecture du code. Règle de partage :
   `transform` aux apparitions, `scale`/`translate` aux interactions.        */

.cadre { overflow: hidden; transform: translateZ(0); }

.cadre img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--duree-entree) var(--sortie);
}

.cadre:hover img,
a:hover .cadre img,
.carte:hover .cadre img { scale: 1.045; }


/* ════════════════════════════════════════════════════════════════════════
   LA DÉRIVE LENTE — une seule par page, sur le héros
   ════════════════════════════════════════════════════════════════════════
   26 secondes : assez lent pour ne pas être perçu comme une animation, assez
   présent pour que la page ne soit jamais figée.

   ⚠ **Une seule animation en boucle par page, et jamais derrière un
   paragraphe à lire.** Ici c'est un fond de héros, sous un titre de trois
   mots. Deux boucles sur une page, c'est déjà fatigant.                     */

.derive { overflow: hidden; }

.derive img {
  animation: hidaya-derive 26s var(--shonen) infinite alternate;
  transform-origin: 60% 40%;
}

@keyframes hidaya-derive {
  from { transform: scale(1)     translate3d(0, 0, 0); }
  to   { transform: scale(1.085) translate3d(-1.5%, -1%, 0); }
}


/* ════════════════════════════════════════════════════════════════════════
   LE DÉTAIL QUI SE RÉVÈLE
   ════════════════════════════════════════════════════════════════════════
   Un élément masqué au repos qui apparaît au survol. La carte cesse d'être
   une image inerte qui monte de cinq pixels : elle RÉVÈLE quelque chose.

   ⚠ **Visible d'emblée sous 768 px et sur écran tactile.** Un survol n'existe
   pas au doigt : ce qui n'apparaît qu'au survol est inaccessible à la moitié
   des visiteurs. Une information nécessaire ne peut jamais en dépendre.     */

.revele {
  color: var(--or);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  opacity: 0;
  translate: 0 .4rem;
  transition:
    opacity   var(--duree-action) var(--sortie),
    translate var(--duree-action) var(--sortie);
}

.carte:hover .revele,
.carte:focus-within .revele,
.personnage:hover .revele,
.personnage:focus-within .revele { opacity: 1; translate: 0 0; }

@media (max-width: 47.99rem), (hover: none) {
  .revele { opacity: 1; translate: 0 0; }
}


/* ════════════════════════════════════════════════════════════════════════
   LE GROS CHIFFRE PÂLE, ET LA SORTIE DE CONTENEUR
   ════════════════════════════════════════════════════════════════════════ */

.numero {
  font-family: var(--titre);
  font-size: var(--t-enorme);
  line-height: .8;
  color: rgba(255, 47, 51, .22);
  transition: color var(--duree-action) var(--sortie);
  pointer-events: none;
}

.arc:hover .numero { color: rgba(255, 47, 51, .45); }

/* Un élément qui déborde de la largeur maximale casse l'impression que tout
   est rangé dans des boîtes — c'est le geste qui fait le plus « conçu par
   quelqu'un ».

   ⚠ `100vw` inclut la barre de défilement : sur un système qui l'affiche en
   permanence, ça déborde de 15 px. Le `overflow-x: clip` du corps (10-socle)
   coupe le dépassement sans créer de barre horizontale. */
.pleine-largeur {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}