/* ===========================================================================
   SOCLE TABULA — barre unique, pied unique, composants.
   Ne connaît QUE les jetons de jetons.css. Aucune valeur en dur ici.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tab-fond, #FCFBF7);
  color: var(--tab-texte-principal, #111111);
  font-family: var(--tab-police, sans-serif);
  font-size: var(--tab-taille-base, 1rem);
  line-height: var(--tab-interligne, 1.55);
  /* Aucun débordement horizontal, jamais. C'est la vérification de recette à
     320 px qui l'exige, et c'est la première chose qui casse sans elle. */
  overflow-x: hidden;

  /* ── PIED COLLANT ─────────────────────────────────────────────────────
     Méthode reprise de ~/Model/web/pied-de-page.css, où le point a déjà été
     traité. La page est une colonne d'au moins un écran, le contenu prend ce
     qui reste, le pied est POUSSÉ en bas.

     POUSSÉ, ET JAMAIS POSITIONNÉ. Ni `fixed`, ni `absolute` : un pied
     positionné reste collé à la fenêtre et passe PAR-DESSUS le contenu des
     pages longues. C'est l'erreur classique, et elle ne se voit qu'une fois
     la page remplie. */
  min-height: 100vh;
  /* `dvh` ENSUITE, et non à la place : sur mobile, `100vh` compte la barre
     d'adresse même rétractée, la page dépasse d'autant et le filet du pied
     glisse sous le bord de l'écran. Les navigateurs qui ignorent l'unité
     gardent la ligne du dessus — l'ordre n'est pas décoratif. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* `1 0 auto`, et non le raccourci `flex: 1` : ce dernier pose
   `flex-basis: 0`, et le contenu se laisse alors comprimer sous sa hauteur
   réelle sur une page longue. Le 0 du milieu (flex-shrink) l'interdit. */
main { flex: 1 0 auto; width: 100%; }

img { max-width: 100%; height: auto; }

a { color: var(--tab-accent, #3F6FA9); }

/* ── Le logo ────────────────────────────────────────────────────────────────
   `tabula.lu` en minuscules, `tabula` en sombre et `.lu` en bleu. Une seule
   écriture, partout : c'est la marque. */
.logo {
  display: inline-flex; align-items: baseline;
  font-size: var(--tab-taille-moyenne, 1.125rem);
  font-weight: 800; letter-spacing: -0.01em;
  text-decoration: none; color: var(--tab-texte-principal, #111111);
  line-height: 1;
}
.logo__lu { color: var(--tab-bleu, #8DB3E2); }

/* ── LA barre d'en-tête — il n'y en a qu'une ────────────────────────────────
   Règle d'interface permanente : toutes les pages partagent cette barre et ce
   pied. Un module qui a besoin d'une entrée l'ajoute dans le menu de la roue
   dentée, JAMAIS dans la barre. Sans cette règle, la barre finit par porter
   sept boutons et ne tient plus sur un téléphone. */
.barre {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--tab-espace-2, 16px);
  min-height: var(--tab-barre-hauteur, 56px);
  padding-inline: var(--tab-marge-laterale, 32px);
  background: var(--tab-surface, #FFFFFF);
  border-block-end: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
}
.barre__logo { flex: 0 0 auto; }
.barre__logo .logo { font-size: var(--tab-logo-hauteur, 22px); }
.barre__vide { flex: 1 1 auto; }
/* EXACTEMENT DEUX éléments à droite : la bascule de thème, puis la roue
   dentée. Tout le reste vit dans le menu de la roue. */
.barre__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--tab-espace-1, 8px); }

.pastille-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tab-cible, 44px); min-height: var(--tab-cible, 44px);
  width: var(--tab-cible, 44px); height: var(--tab-cible, 44px);
  border-radius: var(--tab-rayon-pastille, 999px);
  border: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  background: var(--tab-surface, #FFFFFF);
  color: var(--tab-texte-principal, #111111);
  cursor: pointer; font-size: var(--tab-taille-moyenne, 1.125rem);
  padding: 0;
}
.pastille-bouton:hover { background: var(--tab-surface-douce, #EAF2FB); }
.pastille-bouton:focus-visible {
  outline: 2px solid var(--tab-accent, #3F6FA9); outline-offset: 2px;
}

/* ── Le menu de la roue dentée ──────────────────────────────────────────── */
.menu-roue { position: relative; }
.menu-roue__panneau {
  position: absolute; inset-inline-end: 0; top: calc(100% + var(--tab-espace-1, 8px));
  min-width: 232px; max-width: calc(100vw - (2 * var(--tab-marge-laterale, 32px)));
  background: var(--tab-surface, #FFFFFF);
  border: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  border-radius: var(--tab-rayon, 10px);
  box-shadow: var(--tab-ombre, 0 2px 10px rgba(17,17,17,0.08));
  padding: var(--tab-espace-1, 8px);
  display: none;
}
.menu-roue__panneau[data-ouvert="oui"] { display: block; }
.menu-roue__qui {
  padding: var(--tab-espace-1, 8px) var(--tab-espace-2, 16px);
  font-size: var(--tab-taille-petite, 0.8125rem);
  color: var(--tab-texte-secondaire, #666666);
  border-block-end: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  margin-block-end: var(--tab-espace-1, 8px);
  word-break: break-word;
}
.menu-roue__lien {
  display: flex; align-items: center; gap: var(--tab-espace-1, 8px);
  min-height: var(--tab-cible, 44px);
  padding-inline: var(--tab-espace-2, 16px);
  border-radius: var(--tab-rayon, 10px);
  color: var(--tab-texte-principal, #111111); text-decoration: none;
  background: none; border: 0; width: 100%; cursor: pointer;
  font: inherit; text-align: start;
}
.menu-roue__lien:hover { background: var(--tab-surface-douce, #EAF2FB); }

/* ── Enveloppe de page ──────────────────────────────────────────────────── */
.page {
  max-width: var(--tab-largeur-max, 1100px);
  margin-inline: auto;
  padding-inline: var(--tab-marge-laterale, 32px);
  padding-block: var(--tab-espace-3, 32px) var(--tab-espace-4, 64px);
}
.page--etroite { max-width: 46rem; }
.page--mesure { max-width: var(--tab-mesure, 72ch); }

/* Ce qui est centré, et ce qui ne l'est pas — la règle, écrite une fois :
   on centre les BLOCS dans la page ; on ne centre JAMAIS un texte courant ni
   un libellé de champ, parce qu'un bord gauche irrégulier se lit mal. Seuls
   les états vides, les écrans d'accès et le pied sont centrés en texte. */
.centre { text-align: center; }
.bloc-centre { margin-inline: auto; }

h1 { font-size: var(--tab-taille-grand-titre, 2rem); line-height: 1.2; margin-block: 0 var(--tab-espace-2, 16px); }
h2 { font-size: var(--tab-taille-titre, 1.5rem); line-height: 1.25; margin-block: var(--tab-espace-3, 32px) var(--tab-espace-2, 16px); }
h3 { font-size: var(--tab-taille-moyenne, 1.125rem); margin-block: var(--tab-espace-2, 16px) var(--tab-espace-1, 8px); }
p { margin-block: 0 var(--tab-espace-2, 16px); }
.discret { color: var(--tab-texte-secondaire, #666666); font-size: var(--tab-taille-petite, 0.8125rem); }

/* ── Encadrés ───────────────────────────────────────────────────────────── */
.encadre {
  background: var(--tab-surface, #FFFFFF);
  border: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  border-radius: var(--tab-rayon-large, 16px);
  padding: var(--tab-encadre-marge, 20px);
  margin-block-end: var(--tab-espace-3, 32px);
  box-shadow: var(--tab-ombre-douce, 0 1px 2px rgba(17,17,17,0.06));
}
.encadre__titre { margin-block-start: 0; }
/* Un bouton ne colle pas au bord de son cadre : cette distance est un jeton,
   pas un réglage à l'œil. */
.encadre__actions {
  display: flex; flex-wrap: wrap; gap: var(--tab-espace-1, 8px);
  margin-block-start: var(--tab-bouton-bord, 12px);
}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tab-espace-1, 8px);
  min-height: var(--tab-cible, 44px);
  padding: var(--tab-bouton-padding-v, 12px) var(--tab-bouton-padding-h, 20px);
  border-radius: var(--tab-rayon, 10px);
  border: var(--tab-trait, 1px) solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--tab-accent, #3F6FA9); color: var(--tab-sur-accent, #FFFFFF);
}
.bouton:hover { filter: brightness(1.08); }
.bouton:focus-visible { outline: 2px solid var(--tab-texte-principal, #111111); outline-offset: 2px; }
.bouton--doux {
  background: var(--tab-surface, #FFFFFF);
  color: var(--tab-texte-principal, #111111);
  border-color: var(--tab-bordure, #D9D9D4);
}
.bouton--doux:hover { background: var(--tab-surface-douce, #EAF2FB); }
.bouton--danger { background: var(--tab-erreur, #9B2C2C); color: var(--tab-sur-accent, #FFFFFF); }
.bouton--petit { min-height: 36px; padding: var(--tab-espace-1, 8px) var(--tab-espace-2, 16px); font-size: var(--tab-taille-petite, 0.8125rem); }
.bouton[disabled], .bouton--inactif { opacity: 0.55; cursor: not-allowed; }

/* ── Formulaires ────────────────────────────────────────────────────────── */
.champ { margin-block-end: var(--tab-espace-2, 16px); }
.champ__libelle {
  display: block; font-weight: 600;
  font-size: var(--tab-taille-petite, 0.8125rem);
  margin-block-end: var(--tab-espace-1, 8px);
}
.champ__aide {
  display: block; color: var(--tab-texte-secondaire, #666666);
  font-size: var(--tab-taille-petite, 0.8125rem);
  margin-block-start: var(--tab-espace-1, 8px);
}
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="file"], input[type="search"], input[type="tel"],
select, textarea {
  width: 100%; min-height: var(--tab-cible, 44px);
  padding: var(--tab-espace-1, 8px) var(--tab-espace-2, 16px);
  border: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  border-radius: var(--tab-rayon, 10px);
  background: var(--tab-surface, #FFFFFF);
  color: var(--tab-texte-principal, #111111);
  font: inherit;
}
textarea { min-height: 96px; resize: vertical; }
/* La croix native de Chrome sur un champ « search » double la nôtre et
   déborde du cadre arrondi : on la retire. */
input[type="search"]::-webkit-search-cancel-button { appearance: none; }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tab-accent, #3F6FA9); outline-offset: 1px;
}
.grille-champs {
  display: grid; gap: var(--tab-espace-2, 16px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* ── Messages ───────────────────────────────────────────────────────────── */
.message {
  padding: var(--tab-espace-2, 16px);
  border-radius: var(--tab-rayon, 10px);
  border: var(--tab-trait, 1px) solid transparent;
  margin-block-end: var(--tab-espace-2, 16px);
}
.message--succes { background: var(--tab-succes-fond, #E8F4ED); border-color: var(--tab-succes, #2F7A4D); color: var(--tab-succes, #2F7A4D); }
.message--erreur { background: var(--tab-erreur-fond, #FBEAEA); border-color: var(--tab-erreur, #9B2C2C); color: var(--tab-erreur, #9B2C2C); }
.message--avertissement { background: var(--tab-avertissement-fond, #FBF1E2); border-color: var(--tab-avertissement, #8A5A1B); color: var(--tab-avertissement, #8A5A1B); }
.message--info { background: var(--tab-info-fond, #EAF2FB); border-color: var(--tab-bleu-clair, #C9DCF3); color: var(--tab-texte-principal, #111111); }

/* ── Étiquettes de statut ───────────────────────────────────────────────── */
.etiquette {
  display: inline-flex; align-items: center; gap: var(--tab-espace-1, 8px);
  padding: 2px var(--tab-espace-2, 16px);
  border-radius: var(--tab-rayon-pastille, 999px);
  font-size: var(--tab-taille-petite, 0.8125rem); font-weight: 600;
  background: var(--tab-surface-douce, #EAF2FB);
  color: var(--tab-texte-secondaire, #666666);
  border: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  white-space: nowrap;
}
.etiquette--succes { background: var(--tab-succes-fond, #E8F4ED); color: var(--tab-succes, #2F7A4D); border-color: var(--tab-succes, #2F7A4D); }
.etiquette--attente { background: var(--tab-bleu-tres-clair, #EAF2FB); color: var(--tab-bleu-profond, #3F6FA9); border-color: var(--tab-bleu-clair, #C9DCF3); }
.etiquette--retard { background: var(--tab-erreur-fond, #FBEAEA); color: var(--tab-erreur, #9B2C2C); border-color: var(--tab-erreur, #9B2C2C); }
.etiquette--brouillon { background: var(--tab-surface-douce, #EAF2FB); }

/* ── Tableaux — et leur repli en cartes sur téléphone ───────────────────── */
.tableau-cadre { width: 100%; overflow-x: auto; }
table.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td {
  text-align: start;
  padding: var(--tab-espace-1, 8px) var(--tab-espace-2, 16px);
  border-block-end: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  vertical-align: top;
}
.tableau th { font-size: var(--tab-taille-petite, 0.8125rem); color: var(--tab-texte-secondaire, #666666); font-weight: 600; }
/* Les montants s'alignent à DROITE et se lisent en chiffres tabulaires : une
   colonne de montants mal alignée est illisible, quel que soit le soin du
   reste. */
.tableau .montant, td.montant, th.montant {
  text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Pied de page — unique, comme la barre ──────────────────────────────── */
.pied {
  flex-shrink: 0;
  border-block-start: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  padding: var(--tab-espace-3, 32px) var(--tab-marge-laterale, 32px);
  text-align: center;
  color: var(--tab-texte-secondaire, #666666);
  font-size: var(--tab-taille-petite, 0.8125rem);

  /* Trois colonnes : la signature reste CENTRÉE dans la page, et « À propos »
     se pose à droite. Une simple boîte en flex avec `space-between` aurait
     décentré la signature, puisqu'elle n'aurait plus eu de contrepoids à
     gauche. La première colonne est vide et sert exactement à cela. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--tab-espace-2, 16px);
}
/* Le filet décoratif s'étend sur toute la largeur, au-dessus des trois
   colonnes : il souligne le pied, pas la signature seule. */
.pied__filet { grid-column: 1 / -1; }
.pied__signature { grid-column: 2; }
.pied .pied__lien { grid-column: 3; justify-self: end; }

/* Sous 640 px, tout s'empile et se recentre : à cette largeur, trois colonnes
   ne laisseraient que quelques pixels à chacune. */
@media (max-width: 640px) {
  .pied {
    grid-template-columns: 1fr;
    gap: var(--tab-espace-1, 8px);
  }
  .pied__signature, .pied .pied__lien { grid-column: 1; }
  .pied .pied__lien { justify-self: center; }
}
.pied__filet {
  height: 3px; width: 64px; margin-inline: auto;
  margin-block-end: var(--tab-espace-2, 16px);
  border-radius: var(--tab-rayon-pastille, 999px);
  background: var(--tab-pied, #3F6FA9);
}

/* ── Fenêtre de confirmation ────────────────────────────────────────────── */
dialog.fenetre {
  border: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  border-radius: var(--tab-rayon-large, 16px);
  padding: var(--tab-encadre-marge, 20px);
  max-width: min(32rem, calc(100vw - (2 * var(--tab-marge-laterale, 32px))));
  width: 100%;
  background: var(--tab-surface, #FFFFFF);
  color: var(--tab-texte-principal, #111111);
  box-shadow: var(--tab-ombre, 0 2px 10px rgba(17,17,17,0.08));
}
dialog.fenetre::backdrop { background: rgba(17, 17, 17, 0.45); }

/* ── Accessibilité ──────────────────────────────────────────────────────── */
.invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── La pastille de crédits ──────────────────────────────────────────────
   Troisième élément de la barre, à gauche de la bascule de thème. Seule
   exception à la règle des deux éléments, et elle est assumée : le solde doit
   se voir sur toutes les pages sans qu'on ait à le chercher. */
.pastille-credits {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tab-cible, 44px);
  padding-inline: var(--tab-espace-2, 16px);
  border-radius: var(--tab-rayon-pastille, 999px);
  border: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  background: var(--tab-surface, #FFFFFF);
  color: var(--tab-texte-principal, #111111);
  text-decoration: none; font-weight: 700;
  font-size: var(--tab-taille-petite, 0.8125rem);
  white-space: nowrap;
}
.pastille-credits:hover { background: var(--tab-surface-douce, #EAF2FB); }
.pastille-credits:focus-visible { outline: 2px solid var(--tab-accent, #3F6FA9); outline-offset: 2px; }
.pastille-credits__losange { color: var(--tab-accent, #3F6FA9); }
.pastille-credits__nombre { font-variant-numeric: tabular-nums; }
/* Sous le seuil, la pastille avertit — sans crier : une couleur d'état, pas
   un clignotement. */
.pastille-credits--alerte {
  border-color: var(--tab-avertissement, #8A5A1B);
  background: var(--tab-avertissement-fond, #FBF1E2);
  color: var(--tab-avertissement, #8A5A1B);
}
.pastille-credits--alerte .pastille-credits__losange { color: var(--tab-avertissement, #8A5A1B); }

/* Sur téléphone, seul le NOMBRE reste : la barre doit tenir sur une ligne à
   360 px avec trois éléments à droite. */
@media (max-width: 560px) {
  .pastille-credits { padding-inline: var(--tab-espace-1, 8px); gap: 4px; }
  .pastille-credits__mot { display: none; }
}

/* ── La signature du pied ────────────────────────────────────────────────
   Forme relevée dans ~/FreeWebPage/freewebpage/inc/badge_iav.php :
       tabula.lu © année · [logo] iav.lu
   Le logo est un PNG de 400×196 — PAS un carré. On fixe la HAUTEUR et on
   laisse la largeur suivre : une boîte carrée le déformerait. */
.pied__signature {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  margin: 0;
}
.pied__marque {
  font-weight: 700; text-decoration: none;
  color: var(--tab-texte-principal, #111111);
}
.pied__iav {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--tab-texte-secondaire, #666666);
  text-decoration: underline;
  /* La signature ne se coupe jamais en deux : « iav.lu » reste avec son logo. */
  white-space: nowrap;
}
.pied__logo {
  height: 14px; width: 29px;
  display: inline-block; vertical-align: -2px;
}
/* En mode sombre, un logo sombre sur fond sombre disparaît : on l'éclaircit,
   comme le fait le thème « garage » de FreeWebPage. */
:root[data-theme="sombre"] .pied__logo { filter: brightness(1.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .pied__logo { filter: brightness(1.6); }
}

/* ── Pastilles d'état d'un devis ─────────────────────────────────────────
   Rouge SOURD et non vif : un devis refusé est une information, pas une
   alarme. Gris pour l'expiré, bleu pour le converti. */
.etiquette--refuse {
  background: var(--tab-erreur-fond, #FBEAEA);
  color: var(--tab-erreur, #9B2C2C);
  border-color: var(--tab-erreur-fond, #FBEAEA);
}
.etiquette--expire {
  background: var(--tab-surface-douce, #EAF2FB);
  color: var(--tab-texte-secondaire, #666666);
  border-color: var(--tab-bordure, #D9D9D4);
}
.etiquette--converti {
  background: var(--tab-bleu-tres-clair, #EAF2FB);
  color: var(--tab-bleu-profond, #3F6FA9);
  border-color: var(--tab-bleu-clair, #C9DCF3);
}
.etiquette-signe {
  margin-inline-start: 4px;
  color: var(--tab-succes, #2F7A4D);
  font-size: var(--tab-taille-moyenne, 1.125rem);
}

/* Le lien « À propos » du pied, à côté de la signature. */
.pied__separateur { color: var(--tab-texte-secondaire, #666666); }
.pied__lien { color: var(--tab-texte-secondaire, #666666); }

/* --- Étiquette d'instance (mission 08) ------------------------------------
   Deux TABULA existent : l'atelier et la production. Le bandeau n'apparaît
   QUE hors production, de sorte qu'un écran sans bandeau soit toujours le
   vrai. Discret et permanent : il informe, il ne crie pas.
   Aucune couleur en dur — les jetons seuls, avec leur valeur de repli. */
.bandeau-instance {
  background: var(--tab-avertissement-fond, #FBF1E2);
  color: var(--tab-avertissement, #8A5A1B);
  border-bottom: 1px solid var(--tab-bordure, #D9D9D4);
  font-size: var(--tab-taille-petit, 13px);
  text-align: center;
  padding: var(--tab-espace-1, 8px) var(--tab-marge-laterale-tel, 16px);
  letter-spacing: 0.02em;
}

/* --- Ruban « bêta » (missions 14 et 15b) ----------------------------------
   Repris du ruban de 428.lu, puis déplacé EN BAS À GAUCHE : en haut il mordait
   sur le titre « tabula.lu ». Pas à droite — la pilule « Une idée ? » y est.

   Il est désormais CLIQUABLE et mène à /a-propos-beta : un ruban « bêta » sans
   explication laisse imaginer le pire. Il perd donc `pointer-events: none`,
   qui le rendait inerte — mais la raison d'être de cette propriété demeure :
   il ne doit couvrir aucun autre élément cliquable. En bas à gauche, il n'y a
   rien sous lui ; c'est ce qui rend le déplacement possible.

   Aucune valeur en dur : les deux couleurs sont des jetons. */

.ruban-beta {
  position: fixed;
  bottom: 22px;
  inset-inline-start: -42px;
  z-index: 50;
  transform: rotate(45deg);
  padding: 3px 46px;
  background: var(--tab-ruban, rgba(90, 100, 112, 0.92));
  color: var(--tab-sur-ruban, #FFFFFF);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4);
  user-select: none;
}

/* Un lien doit se voir comme un lien quand on le survole ou qu'on l'atteint
   au clavier — un ruban en biais reste un lien, pas une décoration. */
.ruban-beta:hover,
.ruban-beta:focus-visible {
  background: var(--tab-lancement, #A85220);
  text-decoration: underline;
}

.ruban-beta:focus-visible {
  outline: 2px solid var(--tab-sur-ruban, #FFFFFF);
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .ruban-beta { bottom: 18px; inset-inline-start: -44px; font-size: 0.54rem; }
}

/* Sous 360 px, le ruban se resserre : sinon il déborde de la zone visible et
   fait apparaître une barre horizontale. */
@media (max-width: 360px) {
  .ruban-beta { bottom: 16px; inset-inline-start: -46px; font-size: 0.5rem; padding: 2px 44px; }
}

/* À L'IMPRESSION : jamais. Un document imprimé part chez le client d'une PME ;
   un ruban « bêta » dessus est un doute qu'on lui transmet.
   Vérifié sur un PDF réellement produit, à chaque mission qui y touche. */
@media print {
  .ruban-beta { display: none !important; }
}

/* --- Encadré d'information sur un secret (mission 16) ---------------------
   Il dit ce qui est vrai, y compris ce qui est inconfortable. Ton sobre :
   c'est une information à lire, pas une alarme à fuir. */
.encadre-secret {
  background: var(--tab-avertissement-fond, #FBF1E2);
  border-inline-start: 3px solid var(--tab-avertissement, #8A5A1B);
  border-radius: var(--tab-rayon, 10px);
  padding: var(--tab-espace-2, 16px);
  margin-block-start: var(--tab-espace-2, 16px);
  max-width: var(--tab-mesure, 72ch);
}

.encadre-secret__titre {
  font-weight: 700;
  color: var(--tab-avertissement, #8A5A1B);
  margin: 0 0 var(--tab-espace-1, 8px);
}

.encadre-secret p {
  font-size: var(--tab-taille-petite, 0.8125rem);
  line-height: var(--tab-interligne, 1.55);
  margin: 0 0 var(--tab-espace-1, 8px);
}

.encadre-secret p:last-child { margin-bottom: 0; }

/* La case du mode d'envoi : cible tactile confortable. */
.champ-case {
  display: flex;
  align-items: center;
  gap: var(--tab-espace-2, 16px);
  min-height: var(--tab-cible, 44px);
  font-weight: 600;
}