/* ══════════════════════════════════════════════════════════════════════════
   LA FEUILLE DES PAGES DU SITE.

   Avant elle, le même bloc de style était recopié dans chaque page : 170 347
   octets, vingt-deux copies, et elles avaient déjà divergé. Mesuré avant
   d'écrire une ligne : `body` existait en NEUF variantes, `.wrap` en DIX,
   `h1` et `h2` en NEUF chacun. La colonne de texte faisait 800 px sur la FAQ,
   860 sur les fonctionnalités, 920 sur l'index du blog. Toute décision
   graphique coûtait vingt-deux modifications, et se remettait à diverger le
   lendemain.

   Elle est servie sans numéro de version : l'en-tête `Cache-Control: no-cache`
   de firebase.json fait revalider le navigateur à chaque visite, donc une
   correction part tout de suite. Un `?v=` obligerait à toucher vingt-deux
   pages à chaque retouche, c'est-à-dire le défaut qu'on retire.

   LE PARTI PRIS : « la pièce ». Le produit fabrique des documents imprimés
   soignés ; le site a l'allure de ce qu'il produit — une revue technique,
   pas un blog. Ce qui en découle : les polices de la marque (Fraunces pour
   les titres, Inter pour le texte, déjà téléchargées par la page d'accueil,
   donc en cache), une mesure de lecture d'environ soixante-cinq caractères,
   et la pleine largeur rendue à ce qui en a besoin.

   Ce qui est PROPRE à une page (un calculateur, la grille des tarifs, la
   frise d'un parcours) reste dans cette page. Cette feuille ne porte que le
   tronc commun.
   Écrite et posée par outils/feuille-site.js, gardée par tests/feuille-site.test.js.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --brand:#2a7a80;
  --brand-dark:#1f5a5f;
  --brand-eau:#eaf2f1;
  --terracotta:#d4724e;
  --terre-pale:#f7ece6;
  --ink:#211c19;
  --muted:#6f6560;
  --bg:#faf6ef;
  --card:#fff;
  --border:#e5d9c9;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* LA MESURE. 820 px à 18 px donnaient quatre-vingt-dix caractères par
     ligne ; l'œil décroche bien avant. 41rem en donne environ soixante-cinq,
     la mesure d'une revue. La largeur de page, elle, reste disponible pour
     les tableaux, les figures et les aplats. */
  --mesure:41rem;
  --large:68rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:19px;
  line-height:1.72;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── LE BANDEAU ─────────────────────────────────────────────────────────── */
.topbar{background:var(--brand);padding:14px 24px}
.topbar .tb-wrap{max-width:var(--large);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.topbar a{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-weight:600;font-size:15px}
.topbar img{height:28px;width:auto;display:block}
.topbar .tb-home{font-size:13.5px;opacity:.85}

/* ── LA GRILLE ──────────────────────────────────────────────────────────────
   Une colonne étroite pour le texte, et tout ce qui porte la classe
   `deborde` reprend la pleine largeur. C'est ce décalage qui fait
   « publication » plutôt que « page web ». */
/* LA COLONNE DE LECTURE EST CENTRÉE DANS LA PAGE, et les blocs larges
   débordent symétriquement de part et d'autre. Un premier jet la calait à
   GAUCHE (`justify-items:start`), parce que la maquette portait un sommaire
   dans la colonne de gauche : aucune page n'en a, la colonne restait vide et
   le texte se retrouvait avec 200 px de marge à gauche contre 584 à droite
   sur un écran de 1440, et 440 contre 824 sur un 1920. Mesuré. */
.wrap{max-width:var(--large);margin:0 auto;padding:40px 24px 96px;
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;counter-reset:sec}
.wrap > *{max-width:var(--mesure);width:100%}
.wrap > .deborde,.wrap > .tablewrap,.wrap > figure,.wrap > .bande{max-width:none}
/* LES BLOCS QUI SONT DES GRILLES reprennent la page entière : enfermer la
   grille des tarifs ou l'index des guides dans la mesure du texte les repliait
   sur UNE colonne, mesuré. Ils sont nommés ici plutôt que marqués dans le
   balisage : ce sont des blocs de page, pas des exceptions de rédaction. */
.wrap > .plans,.wrap > .grid,.wrap > .calc,.wrap > .totals,.wrap > .cta{max-width:none}

/* ── TITRES ─────────────────────────────────────────────────────────────────
   Le filet sous chaque h2 est parti : la hiérarchie tient par la taille, la
   graisse et l'air. Le numéro de section en terre cuite le remplace, et c'est
   aussi ce que porte une pièce de marché. */
.fil{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.fil a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.fil a:hover{color:var(--brand-dark);border-bottom-color:currentColor}
.fil span[aria-hidden]{margin:0 7px;opacity:.5}
.fil [aria-current]{color:var(--ink)}

.kicker{color:var(--terracotta);font-weight:650;text-transform:uppercase;
  letter-spacing:.09em;font-size:12.5px;margin:0 0 10px}

h1{font-family:var(--serif);font-weight:640;font-size:clamp(2.05rem,4.2vw,3rem);
  line-height:1.1;letter-spacing:-.015em;margin:0 0 28px;text-wrap:balance}
h2{font-family:var(--serif);font-weight:640;font-size:1.7rem;line-height:1.22;
  letter-spacing:-.01em;margin:68px 0 18px;color:var(--ink);position:relative;text-wrap:balance}
h2::before{content:counter(sec,decimal-leading-zero);counter-increment:sec;
  position:absolute;left:-3.4rem;top:.5rem;font-family:var(--sans);font-size:12.5px;
  font-weight:700;letter-spacing:.1em;color:var(--terracotta)}
h3{font-family:var(--sans);font-weight:680;font-size:1.06rem;margin:34px 0 8px;
  color:var(--brand-dark)}

/* Sous 900 px il n'y a plus de marge où loger le numéro : il passe au-dessus
   du titre plutôt que de sortir de l'écran. */
@media (max-width:900px){
  h2::before{position:static;display:block;margin-bottom:6px}
}

p{margin:0 0 20px}
a{color:var(--brand-dark);text-underline-offset:3px}
ul,ol{padding-left:24px}
li{margin-bottom:9px}
strong{font-weight:650}

/* ── LE CHAPEAU ─────────────────────────────────────────────────────────── */
.summary{border-left:3px solid var(--terracotta);padding:2px 0 2px 22px;margin:0 0 44px;
  font-size:1.14rem;line-height:1.62;background:none;box-shadow:none;border-radius:0}
.summary strong{color:var(--ink);font-weight:650}
.summary p:last-child{margin-bottom:0}

/* ── LA FIGURE ──────────────────────────────────────────────────────────────
   Elle coupe le mur de texte, et ce qu'elle montre est la PIÈCE dont parle la
   page, pas un ornement. */
figure{margin:56px 0;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:26px 28px;box-shadow:0 18px 40px -28px rgba(33,28,25,.35)}
figure img{max-width:100%;height:auto;display:block;border-radius:8px}
figcaption{margin-top:16px;font-size:14px;line-height:1.6;color:var(--muted)}

/* ── L'APLAT ────────────────────────────────────────────────────────────────
   Le rythme sombre / clair d'une revue. TOUT CE QUI PORTE UNE COULEUR D'ENCRE
   SE REDÉCLARE ICI : les h3 sont en teal foncé, donc invisibles sur un fond
   teal foncé, et le défaut ne se voit pas dans la feuille, seulement à
   l'écran. */
.bande{background:var(--brand-dark);color:#fff;margin:72px 0;padding:52px 0;border-radius:16px}
.bande-in{max-width:var(--mesure);margin:0 auto;padding:0 30px}
.bande h2{color:#fff;margin-top:0}
.bande h2::before{color:rgba(255,255,255,.45)}
.bande h3{color:#f3cdbc}
.bande p,.bande li{color:rgba(255,255,255,.88)}
.bande strong{color:#fff}
.bande a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45)}

/* ── TABLEAUX ─────────────────────────────────────────────────────────────
   L'en-tête est tenu par un filet d'encre, plus par un aplat teal : un
   tableau n'est pas un bandeau. */
.tablewrap{overflow-x:auto;margin:28px 0 36px}
table{width:100%;border-collapse:collapse;font-size:16px;margin:8px 0 28px}

/* ET LE CADRE QUI DÉFILE NE DÉFILAIT PAS. Mesuré le 16/09/2026 sur le tableau
   des formules à 390 px : cadre 350, table 350, contenu 499. `width:100%`
   force la table à la largeur du cadre, donc il n'y a JAMAIS rien à faire
   défiler — la table écrase ses colonnes sous la largeur de leur contenu et
   le texte sort de sa cellule. `overflow-x:auto` était posé depuis toujours
   et ne servait à rien.

   ET C'EST `min-width` QUI L'OBTIENT, PAS `width`. Mesuré dans la page, les
   deux à la suite : `width:max-content` laisse la table à 350 (une table en
   mise en page automatique ne dépasse pas son conteneur, l'intrinsèque n'y
   change rien), `min-width:max-content` la porte à 620 et le cadre défile
   enfin de 270 px. Le `width:100%` du dessus reste : la largeur employée est
   donc le PLUS GRAND des deux, la pleine largeur sur un écran large, la
   largeur du contenu sur un téléphone. */
.tablewrap table{min-width:max-content}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:top}
th{font-weight:680;color:var(--brand-dark);background:none;
  border-bottom:2px solid var(--brand);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.06em;line-height:1.4}
tr:nth-child(even) td{background:rgba(234,242,241,.45)}

/* UNE COLONNE D'INTITULÉS QUI S'EN VA NE LAISSE QUE DES FRAGMENTS.
   Relevé sur téléphone le 16/09/2026 : le tableau comparatif des formules
   mesure 416 px dans un cadre de 350, donc il défile — et la colonne qui dit
   DE QUOI on parle partait avec le reste. Il restait « es, », « 31) », « ies »
   en face de trois « Oui » : le contraire de ce qu'on regarde un tableau pour
   savoir. Même défaut, même correction que la colonne des noms du planning.

   LE TABLEAU DÉCLARE qu'il veut cette colonne figée : on n'impose rien aux
   autres, dont certains n'ont pas d'intitulé en première colonne.

   ET LE FOND DOIT ÊTRE OPAQUE. Le rayage ci-dessus est translucide (45 %) :
   posé tel quel sur une cellule figée, le texte qui défile dessous se lirait
   au travers. On le COMPOSE avec le fond de page plutôt que d'écrire la
   couleur résultante en dur, qui mentirait le jour où l'un des deux change. */
@media (max-width:760px){
  /* ET UNE CELLULE DE PROSE NE TIRE PAS LA TABLE À ELLE SEULE. `max-content`
     prend la ligne ENTIÈRE sans retour : sur le récapitulatif des tarifs, dont
     une colonne est une phrase, la table passait à 1 118 px et demandait
     768 px de défilement pour être lue. Un plafond par cellule la ramène à
     608 (258 px de défilement) et ne change RIEN au tableau des formules, dont
     aucune cellule ne l'atteint — mesuré sur les deux. Il ne vaut que sur
     téléphone : sur un écran large il écraserait des colonnes qui respirent. */
  .tablewrap td,.tablewrap th{max-width:12rem}
  .tablewrap[data-colonne-figee] th:first-child,
  .tablewrap[data-colonne-figee] td:first-child{
    position:sticky;left:0;z-index:2;
    background:var(--bg);
    box-shadow:1px 0 0 var(--border)}
  .tablewrap[data-colonne-figee] tr:nth-child(even) td:first-child{
    background:color-mix(in srgb,rgb(234,242,241) 45%,var(--bg))}
  .tablewrap[data-colonne-figee] thead th:first-child{z-index:3}
  /* Sur un écran étroit l'intitulé cède la place aux colonnes qu'il qualifie,
     mais garde de quoi se lire : il passe à la ligne, il ne se rogne pas. */
  .tablewrap[data-colonne-figee] th:first-child,
  .tablewrap[data-colonne-figee] td:first-child{max-width:41vw;padding-right:12px}
}

blockquote{margin:28px 0;padding:16px 22px;background:var(--terre-pale);
  border-left:3px solid var(--terracotta);border-radius:0 8px 8px 0}
blockquote p:last-child{margin-bottom:0}

.checklist{list-style:none;padding-left:0}
.checklist li{position:relative;padding-left:30px}
.checklist li::before{content:"";position:absolute;left:3px;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--terracotta)}

.qa{border-top:1px solid var(--border);padding-top:20px;margin-top:20px}
.qa h3{margin:0 0 6px}

/* ── L'APPEL À L'ACTION ─────────────────────────────────────────────────── */
.cta{background:linear-gradient(140deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff;
  border-radius:16px;padding:44px 40px;margin:72px 0 28px;text-align:center}
.cta h3{font-family:var(--serif);font-weight:640;font-size:1.5rem;color:#fff;margin:0 0 10px}
.cta p{color:rgba(255,255,255,.88);margin-bottom:24px}
.cta a.btn,.cta .btn{display:inline-block;background:var(--terracotta);color:#fff;
  text-decoration:none;font-weight:650;padding:15px 32px;border-radius:10px}

/* ── LE PIED ────────────────────────────────────────────────────────────── */
/* LE PIED SUIT LA COLONNE DE LECTURE. À la largeur de la page, il commençait
   192 px à gauche du texte : deux alignements dans la même vue se lisent comme
   une erreur, pas comme une intention. */
.foot{max-width:var(--mesure);margin:0 auto;padding:0 24px 44px;font-size:14px;
  line-height:1.7;color:var(--muted)}
.foot a{color:var(--brand-dark)}
.foot-editeur{padding-top:12px;font-size:13px;line-height:1.7;border-top:1px solid var(--border)}

.disclaimer{font-size:14.5px;line-height:1.65;color:var(--muted);font-style:italic;
  border-top:1px solid var(--border);padding-top:20px;margin-top:44px}

.signature{margin:44px 0 0;padding:16px 0 16px 22px;font-size:14.5px;line-height:1.62;
  border-left:3px solid var(--terracotta);background:none;border-radius:0}
.signature p{margin:0}
.signature a{color:var(--brand-dark)}
.signature-dates{margin-top:6px;color:var(--muted);font-size:13.5px}

/* ── LE SOMMAIRE COLLANT ────────────────────────────────────────────────────
   Sur grand écran seulement : sous 1180 px il n'y a pas de colonne où le
   loger, et le poser au-dessus du titre repousserait la page hors de vue. */
.somm{display:none}
@media (min-width:1180px){
  .wrap.a-sommaire{grid-template-columns:200px minmax(0,1fr);column-gap:56px;justify-items:start}
  .wrap.a-sommaire > *{grid-column:2}
  .wrap.a-sommaire > .somm{display:block;grid-column:1;grid-row:1 / span 200;
    position:sticky;top:40px;align-self:start;max-width:none;font-size:13.5px;line-height:1.5}
  .somm b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
    color:var(--muted);margin-bottom:12px;font-weight:700}
  .somm a{display:block;color:var(--muted);text-decoration:none;padding:7px 0 7px 13px;
    border-left:2px solid var(--border)}
  .somm a:hover{color:var(--brand-dark);border-left-color:var(--brand)}
  .somm a.on{color:var(--ink);font-weight:600;border-left-color:var(--terracotta)}
}

/* ── L'IMPRESSION ───────────────────────────────────────────────────────────
   Un guide qu'on imprime ou qu'on enregistre en PDF doit dire d'où il vient
   et de quand il date : `.print-sign` est invisible à l'écran et paraît là. */
.print-sign{display:none}

@media print{
  .print-sign{display:block !important;margin-top:22px;padding-top:10px;
    border-top:1px solid #999;font-size:8.5pt;color:#555;text-align:center}
  .topbar,.cta,.foot,.more,.somm,.partage,nav,.actions,.mail-capture{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding:0;display:block}
  .wrap > *{max-width:none}
  h1{font-size:20pt}
  h2{font-size:14pt;page-break-after:avoid;margin-top:26pt}
  h2::before{display:none}
  h3{font-size:12pt;page-break-after:avoid}
  p,li{orphans:3;widows:3}
  table,figure,.summary,.checklist,blockquote,.bande{page-break-inside:avoid}
  .bande{background:none;color:#000;padding:0;margin:20pt 0}
  .bande h2,.bande h3,.bande p,.bande li,.bande strong{color:#000}
  figure{box-shadow:none;border:1px solid #ccc}
  .signature{border-left:0;padding:10px 0 0}
  a{color:#000;text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  a[href^="/"]::after{content:""}
}

/* ── TÉLÉPHONE ──────────────────────────────────────────────────────────── */
@media (max-width:720px){
  body{font-size:18px}
  .wrap{padding:28px 20px 72px}
  /* LE FILET DES TABLES SANS CADRE (v930) : un guide débordait de la page à
     cause d'un tableau posé sans conteneur. Il reste, seize tables du blog et
     des calculateurs en dépendent encore.
     MAIS IL NE S'APPLIQUE PAS À CELLES QUI ONT DÉJÀ UN CADRE. `display:block`
     retire à la table sa mise en page de TABLE (les colonnes ne s'alignent
     plus d'une rangée à l'autre), et `overflow:auto` en fait un conteneur de
     défilement : une cellule collée s'y colle alors à la TABLE, qui ne défile
     pas, au lieu du cadre, qui défile — mesuré, la colonne des intitulés
     partait quand même. Deux mécanismes pour la même question, dont un qui
     casse l'autre. */
  .wrap table:not(.tablewrap table){display:block;width:100%;overflow-x:auto}
  .bande{margin:52px -20px;border-radius:0;padding:40px 0}
  .bande-in{padding:0 20px}
  figure{padding:18px 16px;margin:40px 0}
  .cta{padding:32px 24px}
}