/* Cybridia — feuille de style du blog statique.
   Les variables reprennent celles de l'application (index.html) pour que le
   blog et l'app aient la même identité, en clair comme en sombre. */

:root {
  --pad: clamp(18px, 4vw, 40px);
  --ground: #eef3ef;
  --surface: #ffffff;
  --ink: #0f1d15;
  --ink-2: #52645a;
  --ink-3: #7e8f85;
  --hairline: #e3ece6;
  --hairline-strong: #cbdbd1;
  --accent: #00843d;
  --accent-ink: #ffffff;
  --accent-wash: #eaf6ef;
  --focus: #00843d;
  --nav-bg: rgba(255, 255, 255, 0.85);
  --deep: #0a3a28;
  --deep-ink: #f2fbf6;
  --deep-mute: #9dbfad;
  --deep-line: rgba(160, 220, 190, 0.18);
  /* Mêmes largeurs de conteneur et même hauteur de barre que l'application,
     pour que marque, onglets et actions ne bougent pas d'une page à l'autre. */
  --largeur: 1120px;
  --nav-h: 58px;
  --largeur-texte: 44rem;
  --rayon: 16px;
  --ombre-douce: 0 1px 2px rgba(10, 25, 16, 0.04);
  --ombre-levee: 0 14px 40px rgba(10, 25, 16, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0c1310;
    --surface: #121b16;
    --ink: #e8f1eb;
    --ink-2: #9aaca1;
    --ink-3: #6e7f75;
    --hairline: #24322a;
    --hairline-strong: #35463c;
    --accent: #2ecc75;
    --accent-ink: #062a17;
    --accent-wash: #12291d;
    --focus: #2ecc75;
    --nav-bg: rgba(12, 19, 16, 0.8);
  }
}

:root[data-theme="light"] {
  --ground: #eef3ef; --surface: #ffffff; --ink: #0f1d15; --ink-2: #52645a;
  --ink-3: #7e8f85; --hairline: #e3ece6; --hairline-strong: #cbdbd1;
  --accent: #00843d; --accent-ink: #ffffff; --accent-wash: #eaf6ef; --focus: #00843d;
  --nav-bg: rgba(255, 255, 255, 0.85);
}

:root[data-theme="dark"] {
  --ground: #0c1310; --surface: #121b16; --ink: #e8f1eb; --ink-2: #9aaca1;
  --ink-3: #6e7f75; --hairline: #24322a; --hairline-strong: #35463c;
  --accent: #2ecc75; --accent-ink: #062a17; --accent-wash: #12291d; --focus: #2ecc75;
  --nav-bg: rgba(12, 19, 16, 0.8);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Échelle continue plutôt que par paliers : chaque taille grandit avec la
   fenêtre entre un plancher et un plafond, si bien que la page s'ajuste à
   toutes les résolutions au lieu de sauter à quelques largeurs précises.
   Le corps suit l'application : 15 px sur petit écran, 17 px à partir de
   1440 px, et tout l'intermédiaire au prorata. */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 clamp(15px, 14.4px + 0.11vw, 16px)/1.65 ui-sans-serif, system-ui,
        -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

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

.saut {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 20;
}
.saut:focus { left: 0; }

.bande {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- En-tête ---------- */

.entete {
  position: sticky; top: 0; z-index: 10;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 6px 24px rgba(10, 58, 40, 0.06);
}
/* Même grille à trois colonnes que la barre de l'application : les onglets
   restent centrés dans la page, donc rien ne bouge en passant de l'un à
   l'autre, même si la marque n'a pas la même largeur. */
.entete .bande {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px; height: var(--nav-h);
}
.marque { grid-column: 1; justify-self: start; }
.nav-liens { grid-column: 2; justify-self: center; }
.nav-actions { grid-column: 3; justify-self: end; }
/* Marque et onglets sont calqués sur la barre de l'application, pour que le
   passage du blog au site (et retour) ne demande aucune réorientation. */
.marque {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
}
.marque-mark {
  width: 34px; height: 34px; flex: none;
  color: var(--accent);
  filter: drop-shadow(0 2px 6px rgba(0, 132, 61, 0.28));
}
.marque-mark svg { display: block; width: 100%; height: 100%; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.04; }
.marque-texte strong {
  color: var(--accent); font-weight: 750; font-size: 1.12rem; letter-spacing: -0.02em;
}
.marque-sous {
  color: var(--ink-3); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; margin-top: 1px;
}

.nav-actions { display: flex; align-items: center; gap: 14px; }

/* Sélecteur de langue : mêmes dimensions que celui de l'application, en
   <details> pour rester sans JavaScript. */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 10px;
  border: 1px solid var(--hairline); border-radius: 9px;
  font-size: 0.76rem; font-weight: 650; color: var(--ink-2);
  letter-spacing: 0.05em; cursor: pointer; list-style: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lang-btn::-webkit-details-marker { display: none; }
.lang-btn:hover { border-color: var(--hairline-strong); color: var(--ink); }
.lang-btn .chev { font-size: 0.55rem; color: var(--ink-3); }
.flag {
  width: 21px; height: 14px; border-radius: 3px;
  overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}
.flag svg { display: block; width: 100%; height: 100%; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 232px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 5px;
  box-shadow: 0 18px 50px rgba(10, 58, 40, 0.16);
  z-index: 50;
}
.lang-note {
  margin: 4px 8px 8px; font-size: 0.72rem; line-height: 1.45; color: var(--ink-3);
}
.lang-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 10px;
  border-radius: 8px; text-decoration: none;
  font-size: 0.85rem; font-weight: 550; color: var(--ink);
  transition: background 0.12s ease;
}
.lang-item:hover { background: var(--accent-wash); }
.lang-item .check { margin-left: auto; color: var(--accent); font-weight: 700; opacity: 0; }
.lang-item[aria-current="true"] .check { opacity: 1; }

.nav-login {
  padding: 6px 2px; font-size: 0.85rem; font-weight: 550;
  color: var(--ink-2); text-decoration: none;
  transition: color 0.15s ease;
}
.nav-login:hover { color: var(--ink); }
/* Barre serrée : « Connexion » s'efface pour laisser la place aux onglets. */
@media (max-width: 1039px) { .nav-login { display: none; } }
/* Comme dans l'application, les onglets n'apparaissent que lorsque la barre a
   la place de les tenir sans chevaucher le sélecteur de langue et le bouton. */
.nav-liens { display: none; align-items: center; gap: 20px; }

/* Pictogrammes de la barre — repris à l'identique de l'application.
   Le blog n'est pas un autre site : c'est la même barre, elle doit se
   présenter pareil des deux côtés. Sans eux, passer d'un guide au produit
   faisait changer le traitement de la barre sous les yeux du lecteur.
   Le dessin passe par un masque CSS : il suit la couleur du texte, donc
   l'accent quand la section est celle qu'on lit. */
.nav-liens a::before,
.nav-panneau-login::before {
  content: "";
  width: 16px; height: 16px; flex: none;
  background: currentColor;
  opacity: .72;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  transition: opacity .14s ease;
}
.nav-liens a:hover::before { opacity: 1; }
.nav-liens a[aria-current="page"]::before { opacity: 1; }
.nav-liens a[href$="#programme"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.4 6h.01M4.4 12h.01M4.4 18h.01'/%3E%3C/svg%3E"); }
.nav-liens a[href$="#methode"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h5v-5h5v-5h5V5h3'/%3E%3C/svg%3E"); }
.nav-liens a[href$="#tarifs-top"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20.5 13.3l-7.2 7.2a2 2 0 0 1-2.8 0l-7-7a2 2 0 0 1-.6-1.4V4.5a2 2 0 0 1 2-2h7.6a2 2 0 0 1 1.4.6l6.6 6.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E"); }
.nav-liens a[href$="#faq"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.4 9.3a2.7 2.7 0 0 1 5.2.8c0 1.8-2.6 2.6-2.6 2.6'/%3E%3Cpath d='M12 17.1h.01'/%3E%3C/svg%3E"); }
.nav-liens a[href$="/blog/"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5v13'/%3E%3Cpath d='M12 6.5C10.5 5 8.5 4.5 4 4.5v13c4.5 0 6.5.5 8 2 1.5-1.5 3.5-2 8-2v-13c-4.5 0-6.5.5-8 2z'/%3E%3C/svg%3E"); }
/* « Connexion » n'est pas une destination du site, mais c'est une ligne du
   panneau comme les autres : sans dessin, elle décrochait de la colonne de
   pictogrammes. Même porte-avec-flèche que dans l'application. */
.nav-panneau-login { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M12 3h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-6'/%3E%3C/svg%3E"); }
.nav-panneau .nav-liens a::before,
.nav-panneau-login::before { width: 20px; height: 20px; opacity: 1; }
@media (min-width: 920px) { .nav-liens { display: flex; } }
.nav-liens a {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  color: var(--ink-2); text-decoration: none;
  font-size: 0.85rem; font-weight: 550;
  transition: color 0.15s ease;
}
.nav-liens a:hover { color: var(--ink); }
.nav-liens a[aria-current="page"] { color: var(--ink); font-weight: 650; }

/* ---------- Navigation du téléphone ---------- */
/* Même menu que l'application, aux mêmes seuils : passer du blog au site ne
   demande pas de réapprendre le geste.
   Au large, l'enveloppe s'efface : les liens reprennent leur place dans la
   grille de la barre, comme s'ils n'étaient pas enveloppés. */
.nav-panneau { display: contents; }
/* .nav-extra doit disparaître, pas seulement se vider : avec display:contents
   sur le panneau, il deviendrait un élément de la grille de la barre et s'y
   réserverait une colonne. */
.burger, .nav-panneau-login, .nav-extra { display: none; }
.burger {
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--hairline); border-radius: 10px;
  color: var(--ink-2); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.burger:hover { border-color: var(--hairline-strong); color: var(--ink); }
.burger-bars { display: grid; gap: 4px; width: 17px; }
.burger-bars i {
  display: block; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.18s ease, opacity 0.12s ease;
}
/* Ouvert, les trois barres deviennent une croix : le bouton dit lui-même
   qu'il referme, sans second bouton à chercher. */
.burger[aria-expanded="true"] .burger-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-bars i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 919px) {
  .burger { display: inline-flex; }
  /* La grille à trois colonnes suppose que les liens tiennent au centre : ici
     ils n'y sont plus, et ses deux 1fr écrasaient la marque contre le bloc
     d'actions. */
  .entete .bande { display: flex; justify-content: space-between; gap: 10px; }
  .nav-panneau {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px var(--pad) calc(14px + env(safe-area-inset-bottom));
    /* Opaque, comme les autres menus déroulants : par transparence, le texte
       de la page passerait au travers. */
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 20px 44px rgba(10, 40, 25, 0.18);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    /* visibility bascule d'un coup, mais seulement à la fin du fondu de
       fermeture. À l'ouverture elle passe à « visible » immédiatement : sans
       ça, le panneau reste invisible le temps d'une image et le focus ne peut
       pas s'y poser. */
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1),
                visibility 0s linear 0.22s;
  }
  .nav-panneau.on {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1),
                visibility 0s;
  }
  /* justify-self doit être neutralisé — hérité de la grille de la barre, il
     s'applique désormais aussi aux blocs et recentrerait la colonne de liens
     sur un tiers de la largeur. */
  .nav-panneau .nav-liens {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    justify-self: stretch; width: 100%;
  }
  /* Des lignes de 52 px, arrondies, qui s'allument sous le doigt : la cible du
     pouce prime sur la densité, et le retour au toucher dit que la ligne
     ENTIÈRE est cliquable — pas seulement le mot. */
  .nav-panneau .nav-liens a,
  .nav-panneau-login,
  .nav-panneau .lang-btn {
    min-height: 52px; display: flex; align-items: center;
    width: 100%; padding: 0 14px; gap: 12px;
    border: none; border-radius: 13px;
    background: none; color: var(--ink); text-decoration: none;
    font-size: 1rem; font-weight: 600; text-align: left;
    transition: background 0.14s ease, color 0.14s ease;
  }
  .nav-panneau .nav-liens a:active,
  .nav-panneau-login:active,
  .nav-panneau .lang-btn:active { background: var(--accent-wash); }
  /* Page en cours : le liseré et le fond disent où l'on est. */
  .nav-panneau .nav-liens a { position: relative; }
  .nav-panneau .nav-liens a[aria-current] {
    background: var(--accent-wash); color: var(--accent); font-weight: 700;
  }
  /* Le liseré passe par ::after, et non ::before comme on l'écrirait d'instinct.
     La raison est le pictogramme : celui des liens est un masque CSS posé sur
     ::before — les deux se disputaient le pseudo-élément, et la page en cours,
     « Blog », perdait son dessin au profit du trait. Le liseré étant en position
     absolue, l'ordre dans la ligne lui est égal. */
  .nav-panneau .nav-liens a[aria-current]::after {
    content: ""; position: absolute; left: 0;
    width: 3px; height: 22px; border-radius: 0 3px 3px 0;
    background: var(--accent);
    -webkit-mask: none; mask: none;
  }
  /* Compte et langue ne sont pas des destinations du site : un filet les sépare
     des liens. */
  .nav-extra {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--hairline);
    display: flex; flex-direction: column; gap: 2px;
  }
  .nav-panneau-login { color: var(--accent); }
  /* La langue rejoint le panneau : dans la barre elle se réduisait à un
     drapeau sans libellé, une pastille à deviner. Ici elle reprend son nom et
     la taille des autres lignes. */
  .nav-panneau .lang { position: relative; }
  .nav-panneau .lang-btn { color: var(--ink-2); letter-spacing: normal; }
  .nav-panneau .lang-btn .chev { margin-left: auto; font-size: 0.72rem; }
  /* Les lignes arrivent l'une après l'autre : le panneau se lit comme une
     liste qui se déroule, et l'œil suit le sens de lecture. */
  .nav-panneau .nav-liens a, .nav-extra > * {
    opacity: 0; transform: translateY(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease,
                background 0.14s ease, color 0.14s ease;
  }
  .nav-panneau.on .nav-liens a, .nav-panneau.on .nav-extra > * {
    opacity: 1; transform: none;
  }
  .nav-panneau.on .nav-liens a:nth-child(1) { transition-delay: 0.02s; }
  .nav-panneau.on .nav-liens a:nth-child(2) { transition-delay: 0.05s; }
  .nav-panneau.on .nav-liens a:nth-child(3) { transition-delay: 0.08s; }
  .nav-panneau.on .nav-liens a:nth-child(4) { transition-delay: 0.11s; }
  .nav-panneau.on .nav-liens a:nth-child(5) { transition-delay: 0.14s; }
  .nav-panneau.on .nav-extra > * { transition-delay: 0.17s; }
  /* Ouvert depuis le bas du panneau, le menu se déploie sur toute sa largeur
     plutôt que de déborder d'un côté. */
  .nav-panneau .lang-menu { left: 0; right: 0; min-width: 0; }
}
/* Le bouton menu prend une place qu'il faut rendre : la baseline de la marque
   s'efface. */
@media (max-width: 620px) {
  .entete .bande { gap: 8px; }
  .marque-sous { display: none; }
  .marque-texte strong { white-space: nowrap; }
}
/* Voile : la page s'assombrit derrière le panneau. Il devient un calque au lieu
   de flotter sur du texte vivant, et « toucher à côté pour fermer » cesse
   d'être un geste à deviner. */
.nav-voile {
  /* Il commence SOUS la barre : celle-ci est translucide, un voile passant
     derrière elle la ternirait au lieu de la laisser nette. */
  position: fixed; inset: var(--nav-h) 0 0; z-index: 5;
  background: rgba(8, 26, 18, 0.38);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.nav-voile.on {
  opacity: 1; visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}
@media (min-width: 920px) { .nav-voile { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-panneau, .nav-voile, .burger-bars i { transition: none; }
  /* Sans mouvement, les lignes doivent tout de même être visibles à
     l'ouverture : on annule l'état de départ du défilé, pas seulement son
     animation. */
  .nav-panneau .nav-liens a, .nav-extra > * {
    opacity: 1; transform: none; transition: none;
  }
}

/* Retour en haut, identique à celui de l'application : les articles sont longs
   et sous 920 px les onglets de la barre disparaissent — plus rien ne ramène
   au sommet. Il ne se montre qu'une fois la première hauteur d'écran passée. */
.haut {
  position: fixed; z-index: 200;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0; cursor: pointer;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--hairline); border-radius: 999px;
  box-shadow: 0 10px 28px rgba(10, 40, 25, 0.16);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.haut.on { opacity: 1; visibility: visible; transform: none; }
/* Menu ouvert, la page est voilée : ce bouton n'a plus rien à remonter et
   flotterait au-dessus du voile. */
body:has(.nav-panneau.on) .haut { opacity: 0; visibility: hidden; }
.haut:hover { color: var(--ink); border-color: var(--accent); }
.haut svg { width: 18px; height: 18px; }
/* Libellé lu par les lecteurs d'écran — l'icône seule ne dit rien. */
.libelle-lecteur {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .haut { transition: none; } }

.bouton {
  display: inline-block;
  background: var(--accent); color: var(--accent-ink) !important;
  text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid transparent;
}
.bouton { transition: filter 0.15s ease, transform 0.1s ease; }
.bouton:hover { filter: brightness(1.06); }
.bouton:active { transform: scale(0.985); }
/* Dans la barre, le bouton reprend la forme de celui de l'application. */
.nav-actions .bouton {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 16px;
  border-radius: 9px; font-size: 0.83rem; font-weight: 650;
}
.bouton-clair {
  background: transparent; color: var(--accent) !important;
  border-color: var(--hairline-strong);
}

/* ---------- Fil d'Ariane ---------- */

.fil { border-bottom: 1px solid var(--hairline); background: var(--surface); }
.fil ol {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 10px 0;
  font-size: 14px; color: var(--ink-3);
}
.fil li + li::before { content: "›"; margin-right: 8px; color: var(--ink-3); }
.fil a { color: var(--ink-2); text-decoration: none; }
.fil a:hover { color: var(--accent); text-decoration: underline; }
.fil li[aria-current] {
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Structure de page ---------- */

.page, .article { padding-block: clamp(28px, 5vw, 56px) clamp(40px, 7vw, 80px); }

.eyebrow {
  margin: 0 0 10px;
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.eyebrow a { color: var(--accent); text-decoration: none; }

h1 {
  font-size: clamp(25px, 20.2px + 1.2vw, 38px);
  font-weight: 650;
  line-height: 1.14; letter-spacing: -0.025em;
  margin: 0 0 14px; max-width: 22ch;
  text-wrap: balance;
}
.page-tete.large h1 { max-width: 26ch; }
.chapo {
  margin: 0; color: var(--ink-2);
  font-size: clamp(16px, 15.3px + 0.13vw, 18px); max-width: var(--largeur-texte);
}
.article-tete, .page-tete { margin-bottom: 28px; }

.meta-ligne {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 14px; color: var(--ink-3);
}

/* ---------- Sommaire ---------- */

.sommaire {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--rayon); padding: 18px 22px;
  margin: 0 0 32px; max-width: var(--largeur-texte);
}
.sommaire-titre {
  margin: 0 0 10px; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700;
}
.sommaire ol { margin: 0; padding-left: 20px; color: var(--ink-2); }
.sommaire li { margin: 6px 0; }
.sommaire a { color: var(--ink-2); text-decoration: none; }
.sommaire a:hover { color: var(--accent); text-decoration: underline; }

/* Sur grand écran, le sommaire d'article devient un rail latéral collant :
   la colonne de droite, sinon vide, suit la lecture (façon documentation). */
@media (min-width: 1160px) {
  .article {
    display: grid;
    grid-template-columns: minmax(0, var(--largeur-texte)) 280px;
    column-gap: clamp(48px, 7vw, 96px);
    align-items: start;
  }
  .article > * { grid-column: 1; }
  .article > .sommaire {
    grid-column: 2;
    grid-row: 2 / span 40;
    position: sticky; top: 82px;
    margin: 0; max-width: none;
    background: none; border: 0; border-radius: 0;
    border-left: 1px solid var(--hairline);
    padding: 2px 0 2px 22px;
  }
  .article > .sommaire ol { list-style: none; padding-left: 0; font-size: 14px; }
  .article > .sommaire li { margin: 8px 0; }
}

/* ---------- Prose ---------- */

.prose { max-width: var(--largeur-texte); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-size: clamp(20px, 17.3px + 0.68vw, 27px); line-height: 1.25;
  letter-spacing: -0.01em; margin-top: 2em; scroll-margin-top: 76px;
}
.prose h3 {
  font-size: clamp(17px, 15.8px + 0.29vw, 20px); margin-top: 1.7em; scroll-margin-top: 76px;
}
.prose h4 { font-size: 1em; margin-top: 1.5em; color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose strong { font-weight: 650; }
.prose code {
  background: var(--accent-wash); border-radius: 5px;
  padding: 1px 5px; font-size: 0.92em;
}
.prose blockquote {
  margin-inline: 0; padding: 14px 20px;
  border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: 0 var(--rayon) var(--rayon) 0;
  color: var(--ink-2); font-style: italic;
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: 0.7em; }
.prose hr { border: 0; border-top: 1px solid var(--hairline); margin-block: 2.2em; }

.prose table {
  width: 100%; border-collapse: collapse; font-size: 0.94em;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--rayon); overflow: hidden;
}
.prose :is(th, td) {
  padding: 10px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.prose th { background: var(--accent-wash); font-weight: 650; }
.prose tr:last-child td { border-bottom: 0; }
/* Les tableaux larges défilent dans leur propre boîte, jamais la page. */
.prose > table { display: block; overflow-x: auto; }

.prose .encadre, .prose .avertissement {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--rayon); padding: 16px 20px;
}
.prose .avertissement { border-left: 3px solid var(--accent); }

/* Schémas. Le SVG est écrit dans la source de l'article, sans dépendance
   extérieure : il hérite des variables de thème de la page, donc il suit le
   mode sombre sans qu'on ait à le dupliquer. `height: auto` sur un viewBox
   suffit à le rendre responsive — voir la règle générale `img, svg` en tête. */
.prose figure.schema {
  margin-block: 2em;
  padding: 20px 18px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--rayon);
}
.prose figure.schema svg { display: block; width: 100%; height: auto; }
.prose figure.schema figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.footnote { font-size: 0.94em; color: var(--ink-2); }

/* ---------- Cartes ---------- */

.titre-section { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); margin: 44px 0 16px; }

.cartes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.carte {
  position: relative;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--rayon); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--ombre-douce);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.carte:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-3px);
  box-shadow: var(--ombre-levee);
}
.carte h3 { margin: 0; font-size: clamp(17px, 16.2px + 0.19vw, 19px); line-height: 1.3; letter-spacing: -0.01em; }
.carte h3 a { color: var(--ink); text-decoration: none; }
/* Toute la carte est cliquable : le lien du titre s'étend sur la surface. */
.carte h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carte:hover h3 a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .carte, .carte:hover, .famille-carte, .famille-carte:hover { transform: none; transition: none; }
}
.carte p { margin: 0; color: var(--ink-2); font-size: clamp(14px, 13.6px + 0.1vw, 15px); }
.carte .carte-nb { margin-top: auto; padding-top: 4px; color: var(--ink-3); font-size: 13px; }

.cartes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cartes-liste li {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 14px 18px;
  box-shadow: var(--ombre-douce);
  transition: border-color 0.15s ease;
}
.cartes-liste li:hover { border-color: var(--hairline-strong); }
.cartes-liste a { font-weight: 600; text-decoration: none; }
.cartes-liste a:hover { text-decoration: underline; }
.cartes-liste span { display: block; color: var(--ink-2); font-size: 0.94em; margin-top: 3px; }

.puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puces a {
  display: inline-block; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 7px 14px; font-size: 0.94em; text-decoration: none; color: var(--ink-2);
}
.puces a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Les grandes étapes (index) ---------- */

.familles-nav {
  margin-top: 40px;
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .familles-nav { grid-template-columns: repeat(2, 1fr); }
}
.famille-carte {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--rayon); padding: 26px 28px 24px;
  text-decoration: none;
  box-shadow: var(--ombre-douce);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.famille-carte:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-levee);
  border-color: var(--hairline-strong);
}
.famille-carte:hover .famille-nom { color: var(--accent); }
.famille-icone {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
  margin-bottom: 8px;
}
.famille-icone svg { width: 23px; height: 23px; }
.famille-nom {
  color: var(--ink); font-size: clamp(18px, 17.2px + 0.19vw, 20px); font-weight: 650;
  letter-spacing: -0.015em; line-height: 1.25;
}
.famille-desc { color: var(--ink-2); font-size: clamp(14px, 13.6px + 0.1vw, 15px); line-height: 1.55; }
.famille-nb { color: var(--ink-3); font-size: 13px; margin-top: 4px; }

.theme-bloc { margin-top: 64px; scroll-margin-top: 76px; }
.theme-tete h2 { margin: 0 0 6px; font-size: clamp(19px, 17px + 0.5vw, 25px); }
.theme-tete h2 a { color: var(--ink); text-decoration: none; }
.theme-tete h2 a:hover { color: var(--accent); }
.theme-tete p { margin: 0 0 18px; color: var(--ink-2); max-width: var(--largeur-texte); }

/* ---------- FAQ, sources, appel à l'action ---------- */

.faq, .sources, .connexes { margin-top: 52px; max-width: var(--largeur-texte); }
.connexes { max-width: none; }
.faq h2, .sources h2, .connexes h2 { font-size: clamp(19px, 17px + 0.5vw, 25px); margin: 0 0 18px; }
.faq-item {
  border-top: 1px solid var(--hairline); padding-top: 16px; margin-top: 16px;
}
.faq-item h3 { margin: 0 0 6px; font-size: clamp(16px, 15.2px + 0.19vw, 18px); }
.faq-item p { margin: 0; color: var(--ink-2); }

.sources { font-size: 0.94em; color: var(--ink-2); }
.sources ul { padding-left: 1.2em; }
.sources li { color: var(--ink-3); }

.cta {
  margin: 52px 0 0; max-width: var(--largeur-texte);
  background: var(--deep); color: var(--deep-ink);
  border: 1px solid var(--deep-line); border-radius: var(--rayon);
  padding: 24px 26px;
}
/* Dans un article, l'appel reste dans la colonne de texte ; sur les pages de
   listes (index, famille, thème), il s'aligne sur la largeur des briques. */
.page .cta { max-width: none; padding: 28px 30px; }
.cta p { margin: 0 0 10px; color: var(--deep-mute); }
.cta-titre {
  font-size: clamp(18px, 17.2px + 0.19vw, 20px); font-weight: 650; color: var(--deep-ink) !important;
  letter-spacing: -0.01em;
}
.cta .bouton { margin-top: 6px; background: #ffffff; color: var(--deep) !important; }

/* ---------- Pied ---------- */

.pied {
  margin-top: 72px; background: var(--deep); color: var(--deep-mute);
  padding-block: 44px 24px; font-size: 15px;
}
.pied-grille {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.pied-titre {
  margin: 0 0 12px; color: var(--deep-ink); font-weight: 650; font-size: 16px;
}
.pied-texte { margin: 0 0 16px; max-width: 40ch; }
.pied-liens { list-style: none; margin: 0; padding: 0; }
.pied-liens li { margin-bottom: 8px; }
.pied a { color: var(--deep-ink); text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied .bouton-clair { color: var(--deep-ink) !important; border-color: var(--deep-line); }
.mention {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--deep-line); font-size: 13px; line-height: 1.55;
}
.mention p { margin: 0 0 8px; max-width: 80ch; }

/* Grands écrans : l'application élargit conteneur et texte, le blog suit —
   même palier, à la même largeur, pour que les deux restent accordés. */
@media (min-width: 1440px) {
  :root { --largeur: 1320px; }
  body { font-size: 17px; }
}

@media print {
  .entete, .pied, .cta, .sommaire, .connexes, .saut, .haut { display: none !important; }
  body { background: #fff; color: #000; }
}