/* Page produit « Échéancier de fin de support » : partie page produit de la charte d'outil.
   Charte commune : tokens.css puis outils.css, chargés avant ce fichier.
   Ici : des var(--…) seulement. Les filets fins et forts s'écrivent en fractions de --e-1, sans valeur littérale. */

/* Pas d'apparition au défilement : le contenu est visible d'emblée, sans script, et à l'impression */
[data-m-scene], [data-m-monte] { opacity: 1; transform: none; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { background: var(--fond); }
body { color: var(--encre); font: 400 var(--t-texte)/var(--interligne) var(--famille); -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums tabular-nums; }
a { color: inherit; }

/* En-tête, corps et pied : la colonne de la page */
.entete, main, .pied-page { max-width: var(--largeur); margin: 0 auto; padding-left: var(--e-2); padding-right: var(--e-2); }
.entete { padding-top: var(--e-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); }
.marque { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--cible); text-decoration: none; font-weight: 500; }
.rosace { fill: currentColor; }
.marque svg { width: var(--e-3); height: var(--e-3); }
.outil { font-style: italic; color: var(--gris); }
.produit .tete-action { margin-left: auto; }

/* Premier écran : la promesse, puis la preuve, puis l'action */
.ouverture { margin-top: var(--e-6); padding-top: var(--e-4); border-top: calc(var(--e-1) / 4) solid var(--encre);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e-6); align-items: start; }
.verdict { font-size: var(--t-verdict); font-weight: 400; line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.produit .verdict { max-width: 9em; }
.chapo { margin-top: var(--e-3); max-width: 44ch; color: var(--gris); }
.appel-g { margin-top: var(--e-3); }

/* L'extrait : une feuille du tableau des départs, posée sur la page, double filet d'encre, aucune ombre */
.billet { margin: 0; padding: var(--e-3); border: calc(var(--e-1) / 8) solid var(--encre); outline: calc(var(--e-1) / 8) solid var(--encre);
  outline-offset: calc(-1 * var(--e-1) + var(--e-1) / 4); }
.billet-tete { display: flex; justify-content: space-between; align-items: start; gap: var(--e-2); }
.billet-tete img { width: var(--e-6); height: var(--e-6); flex: none; }
.billet-chiffre { margin-top: var(--e-1); font-size: var(--t-verdict); line-height: 1; letter-spacing: -.02em; }
.billet-legende { margin-top: var(--e-1); color: var(--gris); font-size: var(--t-petit); }
.billet-lignes { margin-top: var(--e-3); list-style: none; border-top: calc(var(--e-1) / 4) solid var(--encre); }
.billet-lignes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--e-2); padding: var(--e-1) 0;
  border-bottom: calc(var(--e-1) / 8) solid var(--filet); min-width: 0; }
.billet-lignes .verdict-l { grid-column: 1 / -1; font-size: var(--t-petit); min-width: 0; overflow-wrap: anywhere; }
.billet-lignes .tech { font-weight: 600; }
.billet-lignes .ver { color: var(--gris); font-weight: 400; }
.billet-lignes .fin { font-size: var(--t-sous); line-height: 1.1; }
.billet-lignes .app, .billet-lignes .src, .billet-lignes .motif { grid-column: 1 / -1; color: var(--gris); font-size: var(--t-petit); }
.billet-lignes .v-expire .verdict-l, .billet-lignes .v-expire .fin { color: var(--or); font-weight: 700; }
.billet-lignes .v-expire .fin { font-size: var(--t-texte); font-style: italic; }
.billet-lignes .v-date-inconnue .verdict-l { font-style: italic; font-weight: 600; }
.billet-lignes .v-date-inconnue .fin { color: var(--gris); }
.billet figcaption { margin-top: var(--e-2); }

/* Les tampons : trait plein (publiée) et pointillés (indisponible), ils se distinguent sans couleur */
.tampon { display: inline-flex; align-items: center; min-height: var(--e-3); padding: 0 var(--e-1); border: calc(var(--e-1) / 8) solid var(--encre);
  border-radius: calc(var(--e-1) / 4); font-size: var(--t-petit); font-style: italic; color: var(--encre); }
.tampon-inconnu { border-style: dashed; }

/* Les blocs : le titre à gauche, la matière à droite, sous le trait d'encre */
.bloc { margin-top: var(--e-8); padding-top: var(--e-3); border-top: calc(var(--e-1) / 4) solid var(--encre);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-3) var(--e-6); }
.bloc h2, .appel h2 { font-size: var(--t-face); font-weight: 400; line-height: var(--interligne-titre); letter-spacing: -.012em; text-wrap: balance; }
.intro { color: var(--gris); max-width: 60ch; margin-bottom: var(--e-3); }
.deux-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.carte { display: grid; align-content: start; justify-items: start; gap: var(--e-1); padding-top: var(--e-2);
  border-top: calc(var(--e-1) / 8) solid var(--trait); }
.carte h3 { font-size: var(--t-sous); font-weight: 400; line-height: 1.2; }
.carte p { color: var(--gris); }
.carte .grand { font-size: var(--t-face); line-height: 1; }
.carte.retenu { border-top: calc(var(--e-1) / 4) solid var(--encre); }
.liste-faits { list-style: none; border-top: calc(var(--e-1) / 8) solid var(--trait); }
.liste-faits li { padding: var(--e-1) 0; border-bottom: calc(var(--e-1) / 8) solid var(--filet); }

/* L'appel final, entre deux filets d'encre */
.appel { margin-top: var(--e-8); padding: var(--e-6) 0; border-top: calc(var(--e-1) / 4) solid var(--encre);
  border-bottom: calc(var(--e-1) / 4) solid var(--encre);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e-3); }

.pied-page { margin-top: var(--e-4); margin-bottom: var(--e-6); display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--e-1) var(--e-3); color: var(--gris); font-size: var(--t-petit); }

@media (max-width: 860px) {
  .ouverture, .bloc { grid-template-columns: minmax(0, 1fr); }
  .deux-cartes { grid-template-columns: minmax(0, 1fr); }
  .tampon { white-space: normal; line-height: 1.3; max-width: 100%; }
}
@media (max-width: 600px) {
  .ouverture { margin-top: var(--e-3); padding-top: var(--e-3); }
  .produit .tete-action { display: none; }
  .outil .long { display: none; }
  .bloc { margin-top: var(--e-6); }
  .appel { padding: var(--e-4) 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none; }
}