/* ==========================================================================
   IAka Daily — CE QUI APPARTIENT À CETTE SEULE PAGE
   Complément de css/design-system.css, qui fait foi. Ce fichier ne redéfinit
   RIEN de ce que le système porte déjà.

   RÈGLE TENUE DANS TOUT LE FICHIER : aucune valeur littérale. Chaque
   déclaration nomme un token de css/design-system.css. Zéro exception.

   Les 9 blocs numérotés ci-dessous sont les 9 TROUS du design system révélés
   par cette page. Chacun est un composant que le système ne porte pas encore.
   Si l'un d'eux remonte un jour dans le DS, son bloc disparaît d'ici.

   Sommaire
     § 1   Bloc d'inscription
     § 2   Note « vous recevez aussi l'hebdo »
     § 3   Conteneur d'embed beehiiv
     § 4   Mention « déjà abonné »
     § 5   Pied sans dégagement
     § 6   Grilles de cartes
     § 7   Étiquette de carte (carte__eyebrow)
     § 8   Texte de carte (carte__texte)
     § 9   Rythme interne du héro et de la comparaison
   ========================================================================== */


/* ==========================================================================
   § 1 · BLOC D'INSCRIPTION
   Ce n'est PAS une .carte : ni bordure, ni ombre, ni fond de contre-section.
   C'est un bloc, au sens de .portail — une surface posée, sans relief.
   Le registre newsletter interdit l'ombre de carte ; il n'y en a pas.
   ========================================================================== */

.bloc-inscription {
  max-width: var(--largeur-bloc);
  padding: var(--role-padding-carte);
  background: var(--voile-accent-fond);
  border-radius: var(--rayon-carte);
}

/* Le seul titre de carte du système à cette taille est .carte--final
   .carte__titre. Ce bloc n'est pas une carte : il reprend la taille, pas la
   classe. */
.bloc-inscription__titre {
  font-size: var(--taille-fluide-h2-carte);
  line-height: var(--interligne-titre-xl);
  margin: 0 0 var(--esp-md);
}

.bloc-inscription__intro {
  font-size: var(--taille-dense);
  line-height: var(--interligne-ui);
  margin: 0 0 var(--esp-lg);
}


/* ==========================================================================
   § 2 · NOTE « VOUS RECEVEZ AUSSI L'HEBDO »
   Le montage beehiiv veut que ce fait soit lisible AU NIVEAU DU FORMULAIRE.
   Proche de .puce, mais boîtée : filet de marque et rayon interne, parce
   qu'elle est posée DANS le bloc d'inscription (12 − 4 = 8).
   Le glyphe est le carré plein de la marque, pas un ✓ : le registre
   newsletter interdit les emoji, y compris en puce.
   ========================================================================== */

.note-hebdo {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-sm);
  padding: var(--esp-md);
  margin-bottom: var(--esp-lg);
  border: var(--epaisseur-filet) solid var(--couleur-filet-marque);
  border-radius: var(--rayon-interne);
  font-size: var(--taille-mention);
  line-height: var(--interligne-ui);
  color: var(--couleur-texte-secondaire);
}

/* Même carré que .entete-section__carre. Le décalage haut est MESURÉ, pas
   choisi : ligne de 14 px en interligne 1,5 = 21 px, carré de 7 px, donc
   (21 − 7) / 2 = 7 px. --esp-xs (8 px) est le pas le plus proche de l'échelle.
   --esp-decalage (2 px) est le décalage des puces de CORPS, trop court ici. */
.note-hebdo__carre {
  width: var(--esp-carre-marque);
  height: var(--esp-carre-marque);
  margin-top: var(--esp-xs);
  background: var(--couleur-accent);
  opacity: var(--opacite-attenuee);
  flex: none;
}


/* ==========================================================================
   § 3 · CONTENEUR D'EMBED BEEHIIV
   Le conteneur ne porte QUE sa réserve de hauteur. AUCUN style n'est imposé à
   l'intérieur : l'embed génère son propre balisage et ne reprendrait pas les
   nôtres.

   Ce que beehiiv injecte, mesuré le 23/08/2026 : un div en width:100% qui
   contient un div à `overflow:hidden; height:0`, lui-même contenant une iframe
   de 2000 px. La hauteur réelle est posée sur le div intermédiaire quand
   l'iframe l'annonce par postMessage. Donc rien ne déborde, et notre réserve
   ne bride rien : min-height est un PLANCHER, pas un plafond.

   ⚠ --hauteur-controle (56 px) est la dette provisoire documentée dans
     CLAUDE.md. Le formulaire beehiiv est plus haut que 56 px : il reste un
     petit saut de mise en page au chargement. Pour le supprimer, mesurer la
     hauteur rendue du formulaire et poser la réserve dessus.
   ========================================================================== */

.embed-beehiiv {
  min-height: var(--hauteur-controle);
}


/* ==========================================================================
   § 4 · MENTION « DÉJÀ ABONNÉ »
   ========================================================================== */

.mention-doublon {
  font-size: var(--taille-mention);
  line-height: var(--interligne-ui);
  margin: var(--esp-md) 0 0;
}


/* ==========================================================================
   § 5 · PIED SANS DÉGAGEMENT
   .pied fige padding-bottom: var(--rythme-pied-degagement) — 120 px, la
   réserve du bandeau collant du registre vente. Cette page n'a pas de bandeau
   collant : le registre newsletter l'interdit. Le dégagement retombe donc au
   padding haut du pied.
   ========================================================================== */

.pied--sans-degagement {
  padding-bottom: var(--esp-4xl);
}


/* ==========================================================================
   § 6 · GRILLES DE CARTES
   La grille par défaut est une COLONNE : trois cartes empilées, dans l'ordre
   de lecture. La variante --paire reprend exactement le mécanisme de
   .barre-spec, y compris son minmax de 160 px — c'est la seule largeur de
   piste que le système écrive, et la reprendre évite d'en introduire une
   deuxième.
   ========================================================================== */

.grille-cartes {
  display: grid;
  gap: var(--role-gap-grille);
}

.grille-cartes--paire {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}


/* ==========================================================================
   § 7 · ÉTIQUETTE DE CARTE
   Le composant Card du projet Claude Design porte une étiquette au-dessus du
   titre. css/design-system.css ne l'a pas reprise : il a .carte__badge,
   .carte__icone, .carte__titre, mais pas .carte__eyebrow.
   La typographie vient de .tech + .tech--accent, posées dans le HTML ; seule
   la respiration basse manque.
   ========================================================================== */

.carte__eyebrow {
  margin-bottom: var(--esp-sm);
}


/* ==========================================================================
   § 8 · TEXTE DE CARTE
   Même trou : le Card distant rend un paragraphe en corps dense, marge nulle.
   La balise <p> nue du système porte une marge basse de 24 px, qui creuserait
   le bas de chaque carte.
   ========================================================================== */

.carte__texte {
  font-size: var(--taille-dense);
  line-height: var(--interligne-corps);
  margin: 0;
}


/* ==========================================================================
   § 9 · RYTHME INTERNE
   Des marges, rien d'autre. Le rythme ENTRE sections est celui du registre
   (.section, 64 px) ; ces règles ne touchent qu'à l'intérieur d'une section.
   ========================================================================== */

.hero__titre        { margin: var(--esp-xl) 0 var(--esp-md); }
.hero__inscription  { margin-top: var(--esp-3xl); }
.hero__chapo        { margin: var(--esp-6xl) 0 var(--esp-3xl); }
.comparaison__audience { margin-top: var(--esp-6xl); }