/* ══════════════════════════════════════════════════════════════════════════
   RECOV — patte graphique des blocs en carte (11/09/2026).
   Chargée après css/recov-tokens.css, avant le <style> local de la page.

   LA RÈGLE : une carte ne porte JAMAIS de pastille d'icône ronde, ni d'étoiles
   décoratives. Son coin bas-droit peut porter un GLYPHE TRONQUÉ — gros,
   monochrome, sans fond, coupé par le bord de la carte, derrière le texte.

   Pourquoi ce choix (décision Pedro du 11/09/2026, après comparaison à l'écran
   de quatre traitements) : la pastille ronde était condamnée à échouer parce
   qu'elle est assez grosse pour qu'on cherche à la déchiffrer, mais trop petite
   pour porter quoi que ce soit. Le glyphe tronqué lui change de métier — à
   196 px et 11 % d'opacité, il n'illustre plus rien, il donne du poids à un
   angle. C'est une texture, pas une illustration.

   DEUX CONDITIONS, sans lesquelles l'effet se retourne :
     1. vraiment GROS — en dessous de ~150 px on croit à une icône mal placée ;
     2. vraiment DISCRET — au-dessus de ~20 % il concurrence le texte.

   ANGLE BAS-DROIT, jamais haut-droit : le texte d'une carte part du haut, le
   vide est donc en bas. Posé en haut, le glyphe barrait le paragraphe (essai du
   11/09 : les traits du document traversaient « indemnité 40 € incluse »).

   Garde : scripts/check-calculs.mjs section U.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le contenu repasse au-dessus du glyphe. `:not(.glyphe)` est INDISPENSABLE :
   sans lui la règle remet le glyphe en flux normal et il se plante au milieu de
   la carte au lieu d'être calé dans l'angle. */
.cell > *:not(.glyphe),
.bloc > *:not(.glyphe){position:relative;z-index:1}

.glyphe{
  position:absolute;z-index:0;
  right:-58px;bottom:-52px;
  width:196px;height:196px;
  fill:none;stroke:var(--noir);stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.11;
  pointer-events:none;          /* jamais un obstacle au clic sur une carte-lien */
}

/* Sur fond lime, le noir doit monter un peu pour rester perceptible ;
   sur fond noir, c'est le lime clair qui prend le relais. */
.cell.lime .glyphe,
.bloc.lime .glyphe{stroke:var(--noir);opacity:.17}
.cell.dark .glyphe,
.bloc.dark .glyphe{stroke:var(--lime-clair);opacity:.20}

/* Une carte qui EST une image n'a pas de glyphe : il se poserait sur la photo. */
.cell.imgc .glyphe{display:none}

/* Cartes basses (rangée de ressources, ~120 px) : le glyphe pleine taille les
   écraserait. Version courte, même traitement. */
.glyphe.pt{width:124px;height:124px;right:-34px;bottom:-30px}

@media(max-width:640px){
  .glyphe{width:150px;height:150px;right:-44px;bottom:-40px}
  .glyphe.pt{width:104px;height:104px;right:-28px;bottom:-26px}
}

/* Impression : une texture de coin n'a aucun sens sur papier, et coûte de
   l'encre. */
@media print{.glyphe{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   Recovo à côté d'un TITRE DE BLOC (11/09/2026).

   Titre de bloc, pas titre de page : le h3 d'une bande de contenu, le titre
   d'une étape. Jamais le h1 d'un héros — essayé le 11/09 sur huit pages, et
   raté : les héros du site sont sombres, le personnage y disparaît, et sur un
   titre centré l'image décale l'axe de la première ligne.

   Un personnage construit de la reconnaissance de page en page ; un picto
   générique n'en construit aucune. C'est la seule raison d'en mettre.

   QUATRE RÈGLES, sans lesquelles la mascotte devient du papier peint — soit
   exactement le défaut qu'on vient de retirer des cartes :
     1. RAREMENT : deux apparitions par page au maximum, jamais sur tous les
        blocs d'une même section — c'est ce qui la garde remarquable ;
     2. une POSE CHOISIE selon le sujet du bloc, jamais la même partout ;
     3. JAMAIS sur une page juridique (mentions, CGU, confidentialité, DPA,
        sous-traitants, audit de sécurité) : on y engage la responsabilité de
        l'éditeur, un personnage y ferait passer le propos pour du marketing ;
     4. SEULEMENT sur un titre à FOND CLAIR et aligné à gauche. Mesuré au
        navigateur : sur les fonds sombres du site (rgb(13,13,20), luminance
        14) le corps vert foncé du personnage disparaît, il n'en reste que les
        gants et les chaussures. Ce n'est pas une opacité à régler.

   `inline-block` et non `flex` : les h1 du site contiennent des <br> et des
   <em>, qu'une mise en flex écraserait. Ici l'image se pose sur la première
   ligne et le titre garde sa composition.
   Garde : scripts/check-calculs.mjs section U.
   ══════════════════════════════════════════════════════════════════════════ */
.titre-recovo{
  display:inline-block;vertical-align:-.12em;
  width:auto;height:clamp(34px,4.4vw,52px);
  margin-right:14px;
  flex-shrink:0;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.18));
}
/* Sur fond sombre, l'ombre doit être plus franche pour que les pieds blancs
   du personnage ne se confondent pas avec le fond. */
.hero .titre-recovo,.dark .titre-recovo{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
@media(max-width:640px){.titre-recovo{height:32px;margin-right:10px}}
@media print{.titre-recovo{display:none}}