/* article.css — portage v3.3 (24/09/2026) : <style> de la maquette article.html + v31.css + 2e <style>. Ordre de la maquette conservé. */
  /* Couleur de l'outil — seule variable surchargée. */
  :root { --accent: #4F46E5; --accent-hover: #4338CA; --radius: 16px; }

  /* ===== Socle v2 — identique sur A, blog, article et tarifs ============== */

  /* v3 affinée : secondaire gris filé, texte encre, bord accent au survol (voir v31.css). */

  /* Emplacement d'image à produire — bloc neutre, rien d'autre dedans. */
  .img-slot {
    display: grid;
    place-content: center;
    gap: 2px;
    padding: var(--space-3);
    text-align: center;
    background: #EEF0F4;
    border: 1px dashed #C9CDD6;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
  }

  /* Cartes de guide : titre et accroche en entier sur les quatre pages (voir v31.css). */

  /* Documentation des emplacements, repliée en bas de page. */
  .slots {
    margin-block: var(--space-8) var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--canvas);
  }
  .slots > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    min-height: 56px; padding: var(--space-2) var(--space-3);
    font-family: var(--font-title); font-weight: 700; font-size: 17px; color: var(--ink);
    cursor: pointer; list-style: none;
  }
  .slots > summary::-webkit-details-marker { display: none; }
  .slots > summary svg { flex: 0 0 20px; color: var(--muted); transition: transform var(--t) var(--ease); }
  .slots[open] > summary svg { transform: rotate(180deg); }
  .slots__body { padding: 0 var(--space-3) var(--space-3); }
  .slot-doc { padding-top: var(--space-3); border-top: 1px solid var(--line); }
  .slot-doc + .slot-doc { margin-top: var(--space-3); }
  .slot-doc h3 { font-size: 16px; }
  .slot-doc dl {
    display: grid; grid-template-columns: 168px minmax(0, 1fr);
    gap: 4px var(--space-2); margin-top: var(--space-1); font-size: 14px;
  }
  .slot-doc dt { font-weight: 600; color: var(--ink); }
  .slot-doc dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
  .slot-doc .prompt { font-size: 13px; line-height: 1.55; }
  @media (max-width: 720px) {
    .slot-doc dl { grid-template-columns: minmax(0, 1fr); }
    .slot-doc dd { margin-bottom: 6px; }
  }
  /* ---- Colonne éditoriale : 720 px, une seule mesure de lecture --------- */
  .article { max-width: 720px; margin-inline: auto; }

  .crumb {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink);
  }
  .crumb svg { color: var(--accent); }
  .crumb:hover { text-decoration: underline; text-decoration-color: #D9DCE3; text-underline-offset: 4px; }

  .article__meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-3);
  }
  .article h1 { margin-top: var(--space-2); }
  .article__lead {
    margin-top: var(--space-3);
    font-size: 20px; line-height: 1.6; color: var(--text);
  }

  /* Boucle 2 : même figure que dans le corps de l'article — image seule avec
     filet 1 px et coins 16 px, légende en dessous, sans cadre ni bandeau gris. */
  .article__cover { margin-top: var(--space-6); }
  /* Critique 3 : pendant le balayage (data-wipe), l'image agrandie à 1,12
     élargissait la page entre 720 et 768 px. Boucle 4 : le kit rogne désormais
     tout [data-wipe] (overflow: clip) ; la règle de la page est retirée. */
  .article__cover picture { display: block; }
  .article__cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
  }
  .article__cover figcaption { margin-top: var(--space-1); font-size: 14px; color: var(--muted); }

  /* ---- Corps typographié ------------------------------------------------- */
  .prose h2 { font-size: 26px; margin-top: var(--space-6); }
  .prose p { font-size: 18px; line-height: 1.7; margin-top: var(--space-3); }
  .prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

  /* Encart des trois questions — repère de lecture, pas une citation. */
  .qbox {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .qbox > p { margin-top: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
  .qbox ol { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
  .qbox li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 17px; color: var(--ink); }
  .qbox li > span:last-child, .qbox > p { text-wrap: balance; }
  .qbox .num {
    display: grid; place-items: center;
    width: 26px; height: 26px; flex: 0 0 26px; margin-top: 1px;
    border-radius: 999px;
    background: var(--chip-bg); color: var(--ink);
    font-size: 14px; font-weight: 700;
  }

  /* Photo dans le corps de l'article (correction du 23/09 : une vraie photo
     remplace l'emplacement vide en pointillés). */
  .prose figure { margin-top: var(--space-5); }
  .prose figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1800 / 1208;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
  }
  .prose figcaption { margin-top: var(--space-1); font-size: 14px; color: var(--muted); }

  /* Encadré « Passer à la pratique » — seule surface douce du corps. Boucle 4 :
     teinté indigo comme le bloc d'appel des trois autres pages (v31.css). */
  .practice {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .practice p { margin-top: var(--space-1); color: var(--muted); }
  .practice .btn { margin-top: var(--space-3); }


  @media (max-width: 720px) {
    .article__lead { font-size: 18px; }
    .prose h2 { font-size: 22px; }
    .prose p { font-size: 17px; }
    .link-arrow, .brand { min-height: 44px; }
  }
  /* ===== v3 — harmonisation avec le nouvel accueil ======================= */
  .h1, h1 { font-size: 52px; line-height: 1.05; }
  .h1--xl { font-size: 52px; }
  h2 { line-height: 1.15; }
  .nav {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
            backdrop-filter: saturate(1.6) blur(12px);
  }
  /* Strip « Les outils Belentia », identique sur les quatre pages. */
  .tools__row { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
  .tools__row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--canvas);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
  }
  .tools__row a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
  .tools__row a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  /* Carte tarif mise en avant : fond accent 6 %, bord 2 px, prix plus grand. */
  .price--featured { background: var(--accent-soft); border: 2px solid var(--accent); }
  .price--featured .price__amount { font-size: 44px; }
  @media (max-width: 720px) {
    .h1, h1, .h1--xl { font-size: 34px; }
    .price--featured .price__amount { font-size: 38px; }
  }
/* ---- v31.css ---- */
/* =============================================================================
   v31.css — « v3 affinée » de QR Code by Belentia (22/09/2026)
   Partagée par A.html, blog.html, article.html et tarifs.html.
   Chargée APRÈS le <style> de chaque page : elle l'emporte à spécificité égale.

   Ce que cette feuille change, et seulement cela (retours de Kylian sur la v4) :
     1. moins d'indigo : l'accent reste sur le bouton principal, le mot du H1,
        l'onglet actif, les liens fléchés (flèche seule) et quelques chiffres.
        Eyebrows, pastilles d'icônes, chips et boutons secondaires passent au gris ;
     2. aucune ombre : cartes, boutons, images, cadres, curseur du tour. Seuls le
        menu « Plus » et l'info-bulle du tour gardent 0 1px 2px à 5 % ;
     3. fonds teintés de l'accent réservés à la carte Pro (5 %) et au bandeau
        final (4 %) ;
     4. coches du kit scroll en pastille grise, trait indigo.
   ========================================================================== */

:root {
  --chip-bg: #F2F3F5;
  --btn-line: #D9DCE3;
  --line: #E6E8EE;
  --soft: #F7F8FA;
  --text-2: #4B5563;
  --accent-4: color-mix(in srgb, var(--accent) 4%, #FFF);
  --accent-5: color-mix(in srgb, var(--accent) 5%, #FFF);
  --accent-edge: color-mix(in srgb, var(--accent) 16%, #FFF);
  /* Toutes les pastilles « accent 8 % » de la v3 deviennent grises d'un coup. */
  --accent-soft: #F2F3F5;
  --float-shadow: 0 1px 2px rgba(17, 24, 39, .05);
  --scroll-offset: 88px;                  /* ancres sous la barre collante */
}
@supports not (color: color-mix(in srgb, #000 4%, #fff)) {
  :root { --accent-4: #F9F9FE; --accent-5: #F8F7FE; --accent-edge: #DEDCFB; }
}

/* ---- 1. Eyebrow : gris, capitales espacées, point de 6 px ---------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  letter-spacing: .1em;
}
.eyebrow::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- Marque : glyphe indigo sur carré gris clair, comme les pastilles ----- */
/* (blanc filé, il ressemblait au bouton du menu mobile juste à côté) */
.brand__mark {
  background: var(--chip-bg);
  color: var(--accent);
  border: 0;
}

/* ---- Chips : toutes grises (texte gris foncé, icône éventuelle en accent) -- */
.chip,
.chip--neutral {
  background: var(--chip-bg);
  color: var(--text-2);
}
.chip svg { color: var(--accent); }

/* ---- Boutons secondaires : bord gris, texte encre, survol bord accent ----- */
.btn--secondary {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--btn-line);
}
.btn--secondary:hover {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--accent);
}

/* ---- Liens fléchés : texte encre, flèche accent, soulignement au survol --- */
.link-arrow { color: var(--ink); }
.link-arrow svg { color: var(--accent); }
.link-arrow:hover {
  text-decoration: underline;
  text-decoration-color: var(--btn-line);
  text-underline-offset: 4px;
}
a.card:hover .link-arrow { text-decoration: underline; text-decoration-color: var(--btn-line); text-underline-offset: 4px; }

/* ---- Pastilles d'icônes : fond #F2F3F5, icône au trait accent ------------- */
.card__icon,
.ticks__mark { background: var(--chip-bg); color: var(--accent); }

/* ---- 2. Aucune ombre ------------------------------------------------------ */
.card:hover,
.guide-card:hover { box-shadow: none; }
.hover-lift:hover { box-shadow: none; border-color: var(--line-strong); }
.card--static:hover { box-shadow: none; }
.glow-border:hover,
.glow-border:focus-within { box-shadow: none; }
.more__panel { box-shadow: var(--float-shadow); }
.tour__cursor { filter: none; }
.tour__label { box-shadow: var(--float-shadow); }
.tour .is-tour-hover,
.tour .is-tour-active {
  box-shadow: none;
  outline: 3px solid var(--accent-ring);
  outline-offset: 1px;
}

/* ---- Strip des outils : l'outil courant filé en accent, fond blanc -------- */
.tools__row a[aria-current="page"] {
  background: var(--canvas);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- 3. Seuls fonds teintés : carte Pro 5 %, bandeau final 4 % ------------ */
.price--featured {
  background: var(--accent-5);
  border: 2px solid var(--accent);
}
.price--featured .chip {
  background: var(--canvas) !important;
  color: var(--accent);
}
/* Boucle 4 : .practice (encadré « Passer à la pratique » de l'article) suit
   le même bloc d'appel indigo que l'accueil, le blog et Tarifs. */
.cta-band,
.try,
.start,
.practice {
  background: var(--accent-4);
  border-color: var(--accent-edge);
}

/* ---- Sections : blanc dominant, #F7F8FA une section sur deux au plus ------ */
.section--soft { background: var(--soft); }
.section--soft + .section--ruled,
.section--soft.section--ruled { border-top: 0; }

/* ---- 4. Coches du kit scroll : pastille grise, trait accent --------------- */
.check__ring { fill: var(--chip-bg); }
.price--featured .check__ring { fill: var(--canvas); }
.ticks li[data-check] { gap: 12px; }
.ticks li > .check {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  vertical-align: 0;
}

/* Barre de lecture : au-dessus de la barre collante. */
.read-progress { z-index: 60; }

/* Titre découpé : les masques de ligne ne rognent pas le mot en accent. */
.split-text__line { padding-inline: 2px; margin-inline: -2px; }

/* L'eyebrow d'un en-tête de page garde sa taille (la règle .page-head p l'agrandissait). */
.page-head .eyebrow { font-size: 12px; line-height: 1.4; color: var(--muted); }

/* Barre de lecture : les pages posent data-scroll-force-js sur <html>, ce qui la
   fait piloter par la boucle JS du kit (scaleX en ligne) plutôt que par
   animation-timeline. Raison : capture.mjs gèle les animations à 0 s, ce qui
   affichait la barre pleine en haut des captures. Aucun autre effet n'utilise
   le chemin natif sur ces pages (pas de data-scrub). */

/* Documentation des emplacements : chemins en police de texte, jamais en mono. */
.slot-doc code { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); }

/* ---- Ponctuation haute collée au mot dans les titres découpés ------------- */
/* Le kit scroll traite l'espace insécable comme une espace ordinaire : dans les
   titres [data-split], « ? » et « : » sont écrits <span class="hp">?</span>,
   sans espace, et l'espace fine est rendue par cette marge (aucune coupure possible). */
.hp { margin-left: .2em; }

/* ---- Durées du kit scroll ramenées à 400–700 ms (sans toucher au kit) ------ */
.has-scroll [data-wipe] { transition-duration: .7s; }
.has-scroll [data-wipe] > :is(img, svg, picture, video, .wipe__media) { transition-duration: .7s; }
.has-scroll [data-split] .split-text__item { transition-duration: .6s; }
.has-scroll [data-split="lines"] { --split-stagger: 70ms; }
.has-scroll [data-split="words"] { --split-stagger: 35ms; }

/* ---- Bouton final de tarifs.html sur une seule ligne, centré -------------- */
@media (max-width: 720px) {
  .start .btn { white-space: nowrap; justify-content: center; font-size: 15px; padding-inline: 16px; gap: 8px; }
  .start .btn svg { flex: 0 0 20px; }
}
@media (max-width: 380px) {
  .start .btn { font-size: 14px; padding-inline: 12px; }
}

/* =============================================================================
   Correction après critique (23/09/2026) — valable sur les quatre pages
   ========================================================================== */

/* ---- Cartes de guide : titre et accroche en entier, lien calé en bas -------- */
/* base.css coupe l'accroche à une ligne (deux sous 720 px) : « préparez… »,
   « d'arrivée :… ». Le correctif n'existait que sur l'accueil ; il vaut
   désormais pour les guides du blog et le « Pour continuer » de l'article. */
.guide-card__title,
.guide-card__excerpt {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* Boucle 4 : corps étiré et « Lire le guide » calé en bas de carte sont faits
   par base.css (règles de la page retirées). Au survol de la carte, le kit
   souligne le lien : même trait gris clair que le survol du lien lui-même. */
.guide-card:hover .link-arrow { text-decoration-color: var(--btn-line); text-underline-offset: 4px; }

/* ---- Pas de mot seul en fin de titre de guide ou de légende de galerie ----- */
.guide-card__title,
.use__cap span { text-wrap: balance; }

/* ---- Offres : la pastille de la carte Pro sur la ligne du titre ------------ */
/* Même construction sur l'accueil et sur Tarifs : titre à gauche, pastille à
   droite ; la pastille ne compte pas dans la hauteur de la ligne (marges
   négatives) : titres, prix et listes restent alignés d'une carte à l'autre. */
.price__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.price__head > .chip { flex: 0 0 auto; margin-block: -4px; white-space: nowrap; }
/* Tablette (trois colonnes étroites, 721–1024 px) : la ligne du titre est trop
   courte pour « Pro » et la pastille ; celle-ci se pose à cheval sur le bord
   haut de la carte, centrée, sans décaler le contenu. */
@media (min-width: 721px) and (max-width: 1024px) {
  .price--featured .price__head > .chip {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    margin: 0;
    transform: translate(-50%, -50%);
    border: 1px solid var(--accent);
  }
}

/* ---- Offres : titres, prix, listes et boutons sur les mêmes lignes --------- */
/* Chaque carte reprend les cinq rangées de la grille (sous-grille) : le prix
   plus grand de la carte Pro ne décale plus sa liste. Les prix sont calés sur
   le bas de leur rangée (lignes de base alignées). Sans sous-grille : cartes
   en colonne flexible, comme avant. */
@supports (grid-template-rows: subgrid) {
  .grid-3.offers,
  [data-offer-cards].grid-3 { grid-template-rows: repeat(5, auto); }
  .grid-3.offers > .price,
  [data-offer-cards] > .price {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: var(--space-3);
    align-content: start;
  }
  .grid-3.offers > .price > .price__amount,
  [data-offer-cards] > .price > .price__amount { align-self: end; }
  /* la liste garde son propre espacement (sinon étirée à la hauteur de la rangée) */
  .grid-3.offers > .price > .ticks,
  [data-offer-cards] > .price > .ticks { align-self: start; }
}

/* ---- Pas de mot seul en fin de paragraphe, de légende ou de libellé -------- */
/* pretty : le navigateur évite une dernière ligne d'un seul mot ; balance :
   lignes de longueur égale pour les textes courts centrés et les questions. */
main p,
figcaption { text-wrap: pretty; }
.ticks li,
.quick__result p,
.swap__hint,
.kpi__label,
.faq__q { text-wrap: balance; }
/* Question de FAQ enveloppée dans un seul élément (le <summary> est en flex :
   sans enveloppe, chaque morceau de texte deviendrait un élément à part). */
.faq__q { flex: 1 1 auto; min-width: 0; }
/* Mots composés des questions (« sont-elles », « va-t-il ») : jamais coupés au trait d'union. */
.nobr { white-space: nowrap; }
/* Blog : la date d'une carte de guide descend avec le lien (dates alignées d'une carte à l'autre). */
.guide-card__body > p.small:not(.guide-card__excerpt) { margin-top: auto; }
.guide-card__body > p.small + .link-arrow { margin-top: 0; }

/* ---- Boucle 3 (23/09) : on sait toujours où l'on est ---------------------- */
/* Page courante rangée dans le menu « Plus » (Blog et guides, article) : le
   menu est marqué comme « Tarifs » sur sa page (encre, graisse 600), et le lien
   aussi dans le panneau. Panneau mobile : la page courante (ou sa rubrique,
   aria-current="true" sur l'article) prend l'indigo de l'outil, en touche. */
.more:has(a[aria-current]) > summary { color: var(--ink); font-weight: 600; }
.more__panel a[aria-current] { color: var(--ink); font-weight: 600; }
.mobile-panel nav a[aria-current] { color: var(--accent); }

/* ---- Boucle 4 (23/09) : couvertures des guides sur fond indigo ------------- */
/* Fond d'attente à la couleur du plateau des nouvelles couvertures (indigo
   pâle), jamais le gris des surfaces : pendant le chargement différé, la carte
   garde déjà sa teinte. */
.guide-card__cover,
.featured__media img,
.article__cover img { background: #DCDDFB; }

/* ===== Correction après contre-vérification (24/09, 5 h) =================== */
/* Marque alignée sur l'app : tuile indigo pleine, pictogramme blanc (en-tête,
   panneau mobile, pied). */
.brand__mark { background: var(--accent); color: #fff; }
/* Cible du lien d'évitement : pas d'anneau sur le conteneur principal. */
main[tabindex="-1"]:focus { outline: none; box-shadow: none; }
/* Liens de marque (« QR Code by Belentia ») : jamais coupés en deux lignes. */
.nowrap, a.brand-link { white-space: nowrap; }
/* Encadré « Les trois questions » : césure naturelle, pas d'équilibrage à mi-largeur. */
.qbox li { text-wrap: pretty; }
/* Emplacements d'images et prompts : outil de production, masqué par défaut ;
   visible avec ?prompts dans l'adresse. */
details.slots { display: none; }
:root[data-prompts] details.slots { display: block; }
/* ---- 2e <style> de article.html ---- */
  /* 24/09 : fil d'Ariane visible, identique au BreadcrumbList du JSON-LD. */
  .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: var(--muted); }
  .crumbs a { color: var(--text); }
  .crumbs > span[aria-hidden] { color: var(--muted); }