/* ============================================================
   ENCART D'INFORMATION — la promesse dite à côté du produit
   NOUVEAU COMPOSANT (bloc 4 de l'É4, 07/08, maquettes Boutique).

   MOTIF DE SA NAISSANCE, et il est mesurable : trois messages de la boutique
   disent la même chose sous trois formes différentes sur le site recetté —
   la remise en main propre (paragraphe 13 px gris dans le tunnel de commande),
   l'échange de taille (page CGV seulement), le maillot offert à la première
   adhésion (nulle part sur la boutique). Ce sont des PROMESSES : elles se
   lisent avant l'achat, à côté du produit, pas dans une page de conditions.
   Le registre n'avait aucun objet pour ça — `.lcdi-card` est un panneau de
   contenu (titre 24 px, icône centrée 30 px), trop lourd pour une ligne de
   réassurance, et l'aplat d'accent de `.lcdi-card--accent` ne porte pas de
   corps de texte (blanc sur teal, 2,87:1).

   RÈGLE K4 (3 emplois réels avant extraction) : SATISFAITE dès ce bloc —
     1. bande de réassurance de la boutique (3 encarts en grille) ;
     2. ligne « maillot offert à la première adhésion » (variante `--ligne`) ;
     3. encart « remise en main propre » de la fiche produit (variante `--doux`) ;
     4. mention « offert avec votre première adhésion » sur la fiche Maillot.

   CONTRASTES MESURÉS (batterie `preuves/wcag-contrastes.mjs`, 8 paires ajoutées
   au bloc 4) : titre `--text-strong` sur `--surface-raised` 17,69:1 · texte
   `--text-body` sur `--surface-raised` 9,74:1 · texte `--text-body` sur
   `--surface-warm` (le fond givre des variantes douces) **7,95:1** · titre sur
   givre **15,42:1** · icône `--icon` (encre du teal) **5,65:1 sur blanc** et
   **4,62:1 sur givre**, au-dessus du seuil non-texte de 3:1.
   Le givre n'avait JAMAIS été mesuré comme surface de texte avant ce bloc : il
   ne servait que de bordure et de fond de bande.

   L'ICÔNE EST INFORMATIVE, JAMAIS INTERACTIVE : elle consomme `--icon`
   (l'encre du teal), comme l'exige `tokens.css` § iconographie. L'accent brut
   n'atteint pas 3:1 sur fond clair.
   ============================================================ */

.lcdi-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 2px solid var(--border-soft);   /* le filet de carte du site, relevé */
  border-radius: var(--radius-m);         /* 8 px, rayon système */
  color: var(--text-body);
}

/* Taille d'icône : celle des cartes du site (30 px mesurés au bloc 3), pour
   qu'un encart posé à côté d'une carte parle la même échelle. Elle porte une
   dimension RÉSOLUE — jamais `width: auto` (règle systémique du bloc 3c). */
.lcdi-notice__icone {
  flex: none;
  width: var(--notice-icon, 30px);
  height: var(--notice-icon, 30px);
  color: var(--icon);
  fill: var(--icon);
}
.lcdi-notice__icone svg { width: 100%; height: 100%; fill: currentColor; }

/* LE CORPS PREND LA LARGEUR QUI RESTE (correctif 0.9.24, 30/08), et c'est un
   DÉFAUT MESURÉ AVANT D'ÊTRE CORRIGÉ, sur `/adherer/` connecté en membre actif
   (Chrome 152, atelier local) : le panneau « Vous êtes déjà membre LCDI » rend
   une boîte de 1242 px à 1440, parfaitement alignée sur le texte d'introduction
   au-dessus (mêmes axes, écart 0) — mais son CORPS ne mesurait que 1008,34 px.
   Un élément de flex sans `flex-grow` se dimensionne sur son propre contenu :
   trois lignes courtes ne remplissent pas 1210 px de place disponible, le corps
   se colle à gauche (`justify-content` vaut `flex-start`), et le texte, centré
   dans SA boîte, tombe sur l'axe 621 quand toute la page est centrée sur 720.
   98,83 px d'écart : voilà le désalignement que l'œil voyait sans le nommer.
   Le défaut ne se voit qu'en LARGE : à 375 px le corps remplissait déjà les
   307 px disponibles (décalage 0), ce qui explique qu'il ait survécu au gate.
   `min-width: 0` reste : sans lui, un encart en grille refuse de rétrécir. */
.lcdi-notice__corps { flex: 1 1 auto; min-width: 0; }
.lcdi-notice__titre {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-strong);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.lcdi-notice__texte {
  margin: var(--space-1) 0 0;
  font-size: var(--type-caption);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.lcdi-notice__texte:first-child { margin-top: 0; }

/* --- Variante DOUCE : posée sur le fond de page, elle prend la surface
   alternée et perd son filet. Emploi : encart de rappel dans une colonne de
   contenu (fiche produit), où le filet ferait un deuxième cadre dans le cadre. */
.lcdi-notice--doux {
  background: var(--surface-warm);
  border-color: var(--surface-warm);
}

/* --- Variante LIGNE : une seule phrase, centrée, pleine largeur.
   Emploi : la ligne « maillot offert » de la boutique, la mention d'offre de
   la fiche. Le texte reste du corps (jamais une mention en `--text-soft` :
   3,32:1 ne porte pas une information commerciale). */
.lcdi-notice--ligne {
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-warm);
  border-color: var(--surface-warm);
  text-align: center;
}
/* LA LIGNE GARDE SON CORPS SERRÉ, et c'est la contrepartie du `flex: 1 1 auto`
   ci-dessus : ici le centrage est porté par `justify-content: center` sur la
   PAIRE icône + texte. Un corps qui s'étire mangerait toute la largeur, le
   `justify-content` n'aurait plus rien à centrer, et l'icône se retrouverait
   plaquée au bord gauche de la bande au lieu d'accompagner sa phrase. Deux
   emplois réels sur le site : la ligne « maillot offert » de la boutique et la
   même mention sur la fiche du maillot, toutes deux avec leur icône. */
.lcdi-notice--ligne .lcdi-notice__corps { flex: 0 1 auto; min-width: 0; }
.lcdi-notice--ligne .lcdi-notice__texte { font-size: var(--type-body); }

/* --- Sur nuit : l'encart devient le panneau translucide du monde sombre
   (`--surface-night-raised`, mesuré 18,15:1 avec le texte inverse). Aucune
   couleur peinte à la main : le contexte fait le travail. */
[data-theme="nuit"] .lcdi-notice {
  background: var(--surface-night-raised);
  border-color: var(--border-night);
}
[data-theme="nuit"] .lcdi-notice--doux,
[data-theme="nuit"] .lcdi-notice--ligne {
  background: var(--surface-night-raised);
  border-color: var(--surface-night-raised);
}

@media (max-width: 767px) {
  /* En téléphone, la ligne repasse en drapeau : centrer une phrase de deux
     lignes sous une icône fabrique un texte en escalier, illisible. */
  .lcdi-notice--ligne { align-items: flex-start; justify-content: flex-start; text-align: left; }
}

/* ============================================================
   L'APARTÉ — la ligne qui a remplacé une bande entière
   NÉ DE LA RETOUCHE R8b (14/08, verdict de gate). Ce qu'il remplace, sur les
   DEUX vues : une bande de clôture qui empilait sous le panneau une crête de
   montagnes, un grand vide, puis un encadré isolé — « le séparateur, le blanc,
   l'encadré : pas top, on peut faire mieux et plus simple ». L'encadré était un
   TROISIÈME objet posé là, exactement le défaut que le panneau du calendrier
   venait de corriger.

   CE QU'IL EST, et c'est tout : une mention. Pas de carte, pas de sol, pas de
   filet, pas de pictogramme. Le seul relief est celui du LIEN, parce que c'est
   la seule chose à faire ici. Il consomme les rôles du système — `--type-caption`
   et `--text-body` (9,13:1), jamais `--text-soft` (3,32:1 ne porte pas du petit
   texte).

   CENTRÉ, et pas aligné sur le panneau : aligné à gauche il deviendrait la
   légende du panneau, c'est-à-dire un quatrième étage de la même boîte. Centré,
   il est ce qu'il est — une mention de page, sous l'objet, avant le pied.

   MESURE DU VIDE REPRIS — vue calendrier, du bas du panneau au haut du NOIR du
   pied (navigateur, 14/08) :
     1440 ... 377 px avant  →  191 px après   (−186)
      390 ... 336 px avant  →  143 px après   (−193)
   Le dégagement de pied (`--footer-clearance`, 177,12 px rendus à 1440) est
   SYSTÉMIQUE et se garde : c'est l'air que le picto vélo du pied réclame, et il
   tombe désormais sur la bande du calendrier, devenue le dernier bloc. Ce qui a
   été repris, ce sont les pixels que la bande de clôture AJOUTAIT par-dessus
   lui. La page entière passe de 2357 à 2212 px à 1440 — 145 et non 186, parce
   que la rangée de chips a gagné 40 px au même bloc (§ L'ÉMOJI DU TYPE).

   ------------------------------------------------------------
   RETOUCHES DU GATE MAQUETTES (14/08, trois demandes de Julien, servies au
   bloc T6b-R9). Elles portent toutes sur le MÊME défaut, mesuré avant d'être
   corrigé : la ligne était collée à l'objet qu'elle suit — 24 px entre le bas
   du panneau du calendrier et le haut de la mention, à 1440 comme à 390, sur
   les quatre pages qui la portent.

     1. AGENDA (deux vues) et FICHE SANS DESCRIPTION : la ligne reste une
        ligne, centrée, et prend un cran d'air de plus. Le cran n'est pas un
        réglage : `--rythme-bloc` est le rôle du système pour « d'un groupe au
        suivant », et c'est exactement ce que la mention est par rapport au
        panneau — le groupe d'après, pas la légende du précédent.
     2. FICHE AVEC DESCRIPTION : la même phrase devient un PETIT ENCADRÉ BLANC
        (variante `--encadre`), parce qu'elle n'y suit pas un objet mais de la
        PROSE. Une ligne de 15 px posée sous un dernier paragraphe de 17 px se
        lit comme la fin du paragraphe ; l'encadré la sort du texte sans en
        faire une bande. Il hugge son texte (`width: fit-content`) et se centre
        dans la colonne : c'est ce qui le garde « petit » quelle que soit la
        largeur de lecture.
   ============================================================ */
.lcdi-aparte {
  /* 32 px (`--rythme-bloc`) et non 24 : voir § RETOUCHES DU GATE, point 1. */
  margin: var(--rythme-bloc) 0 0;
  font-size: var(--type-caption);
  color: var(--text-body);
  text-align: center;
}

/* --- Variante ENCADRÉ : la mention qui suit de la prose, pas un objet.
   Surface haute, filet doux, rayon système — le vocabulaire des panneaux du
   site, à la plus petite échelle possible. AUCUNE OMBRE : l'ombre est ce qui
   fait « objet posé » (`--shadow-soft`, cartes et panneaux), et cette mention
   ne pose rien, elle se détache du texte. `width: fit-content` + marges auto
   la gardent petite et centrée ; `max-width: 100%` la laisse se replier au
   pouce plutôt que déborder. */
.lcdi-aparte--encadre {
  width: fit-content;
  /* 30rem = 480 px, ET C'EST UNE MESURE, prise trois fois. Sans plafond,
     `fit-content` rend la phrase sur UNE ligne de 759 px dans une colonne de
     lecture de 794 (mesuré à 1440) : un bandeau pleine largeur, pas un
     encadré, et « centré » n'y voudrait plus rien dire. À 26rem la mention
     tombait sur TROIS lignes (416 × 106,94). À 30rem elle en fait deux et la
     boîte reprend une proportion d'objet. Au pouce le plafond ne mord pas : la
     colonne y est plus étroite que lui. */
  max-width: min(30rem, 100%);
  margin: var(--space-7) auto 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
}
/* (0,2,0) : le thème peint `a:hover, a:focus` à (0,1,1) et emporterait l'encre
   du lien au clavier — le défaut R1 du gate T6b, rencontré ici une fois de plus. */
.lcdi-aparte a {
  color: var(--link);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.lcdi-aparte a:hover,
.lcdi-aparte a:focus { color: var(--link-hover); }
.lcdi-aparte a:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-s); outline: none; }