/* tarifs.css — portage v3.3 (24/09/2026) : <style> de la maquette tarifs.html + v31.css + v32.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; }
  }
  /* ---- En-tête ----------------------------------------------------------- */
  .page-head { max-width: 760px; }
  .page-head > * + * { margin-top: var(--space-2); }
  .page-head p { color: var(--muted); font-size: 19px; line-height: 1.6; }

  /* Ligne de faits : quatre repères chiffrés, sans décor. */
  .facts {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
    margin-top: var(--space-4);
  }

  /* ---- Cartes d'offres --------------------------------------------------- */
  .price { gap: var(--space-3); }
  .price__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .price__sub { font-size: 15px; color: var(--muted); }
  .price__amount {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 36px;
    line-height: 1.1;
    color: var(--ink);
  }
  .price__amount small { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--muted); }
  .price .ticks li { font-size: 16px; }
  .price .ticks { margin-top: var(--space-1); }
  .price .btn { width: 100%; margin-top: auto; }

  /* ---- Tableau comparatif ------------------------------------------------ */
  .compare {
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .compare table { width: 100%; border-collapse: collapse; }
  .compare th, .compare td { padding: 14px var(--space-3); text-align: left; }
  .compare thead th {
    background: var(--soft);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
  }
  .compare thead th + th, .compare tbody td { text-align: center; width: 132px; }
  .compare tbody th {
    font-weight: 500;
    font-size: 16px;
    color: var(--text);
  }
  .compare tbody th small { display: block; font-size: 14px; color: var(--muted); }
  .compare tbody tr + tr th, .compare tbody tr + tr td { border-top: 1px solid var(--line); }
  .compare__num { font-family: var(--font-title); font-weight: 700; font-size: 16px; color: var(--ink); }
  .mark-yes {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px; border-radius: 8px;
    background: var(--chip-bg); color: var(--accent);
  }
  .mark-yes svg { width: 14px; height: 14px; }
  .mark-no {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px; border-radius: 8px;
    background: var(--soft); color: var(--muted);
  }
  .mark-no svg { width: 14px; height: 14px; }

  /* ---- Bloc final : surface douce, aucune bande sombre ------------------- */
  /* Correction du 23/09 : l'emplacement d'image vide (pointillés « Image ·
     1536 × 1024 ») est retiré. Une seule colonne de texte, comme « Essayer
     QR Code » du blog ; à partir de 1025 px, le bouton passe à droite. */
  .start {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "cta" "note";
    align-items: center;
    padding: var(--space-6);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .start__copy { grid-area: copy; }
  .start p { margin-top: var(--space-2); color: var(--muted); max-width: 52ch; }
  .start .btn { grid-area: cta; justify-self: start; margin-top: var(--space-4); }
  .start__note { grid-area: note; margin-top: var(--space-3); }

  @media (min-width: 1025px) {
    .start {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "copy cta" "note cta";
      column-gap: var(--space-8);
    }
    .start .btn { margin-top: 0; }
  }
  /* Tablette (721–1024 px), boucle 2 : les listes de cette page sont longues ;
     sur trois colonnes de 190 px, chaque puce passait sur 3 à 5 lignes. Les
     offres s'empilent, centrées, sur 600 px (comme sur téléphone, en plus
     large) : une puce tient sur une ou deux lignes. La mention des prix et le
     visuel déplacé sous les offres suivent la même colonne. */
  @media (min-width: 721px) and (max-width: 1024px) {
    [data-offer-cards].grid-3 { grid-template-columns: minmax(0, 1fr); max-width: none; margin-inline: 0; gap: var(--space-4); }
    [data-offer-cards] + p,
    .page-visual--after { max-width: none; margin-inline: 0; }
  }
  /* Boucle 3 : la pile d'offres prend toute la largeur du contenu, comme le
     titre, les pastilles, le comparatif et la FAQ (mêmes bords gauche et droit,
     x = 24 → 744 à 768), au lieu d'une colonne de 600 px centrée (deux bords
     gauches sur le même écran). Entre 901 et 1024 px, l'en-tête est déjà sur
     deux colonnes : les offres passent sur trois colonnes, comme sur grand écran. */
  @media (min-width: 901px) and (max-width: 1024px) {
    [data-offer-cards].grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: var(--space-2); }
    [data-offer-cards] .price { padding: 20px; }
  }
  /* En-tête : quatre pastilles en deux paires — « Gratuit à vie » + « Sans
     engagement », puis les deux prix. 2 × 2 sur grand écran (plus de « Sans
     engagement » seule sur une deuxième rangée), 2 + 2 sur téléphone (au lieu
     de 1, 2 et 1), une ligne en tablette. */
  @media (min-width: 1025px) {
    .page-split .facts { display: grid; grid-template-columns: repeat(2, max-content); justify-items: start; }
  }
  /* Boucle 3 : sur téléphone aussi, une vraie grille 2 × 2 (colonnes alignées,
     plus de drapeau) : 326 px à 360, 351 px à 390. */
  @media (max-width: 720px) {
    .page-split .facts { display: grid; grid-template-columns: repeat(2, max-content); justify-items: start; column-gap: var(--space-1); }
  }
  @media (max-width: 380px) {
    .facts .chip { font-size: 12px; padding-inline: 9px; }
  }
  /* Sous-titres des offres : pas de mot seul en dernière ligne. */
  .price__sub { text-wrap: balance; }
  @media (max-width: 720px) {
    .page-head p { font-size: 17px; }
    .compare th, .compare td { padding: 12px var(--space-2); }
    .compare thead th + th, .compare tbody td { width: 62px; }
    .compare tbody th { font-size: 15px; }
    .start { padding: var(--space-4); }
    .start .btn { width: 100%; }
    .link-arrow, .brand { min-height: 44px; }
  }
  /* Boucle 9,5 : quatre colonnes (Business ajoutée) sur téléphone. Les colonnes
     d'offre prennent la largeur de leur contenu, la fonctionnalité prend le reste. */
  @media (max-width: 720px) {
    .compare th, .compare td { padding: 12px 5px; }
    .compare thead th:first-child, .compare tbody th { padding-left: 14px; padding-right: 6px; }
    .compare thead th { font-size: 13px; }
    .compare thead th + th, .compare tbody td { width: auto; }
    .compare tbody th small { font-size: 13px; }
    .compare .chip { font-size: 12px; padding: 4px 8px; }
    .compare__num { font-size: 15px; }
    .compare th:last-child, .compare td:last-child { padding-right: 12px; }
  }
  /* ===== 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; }
  }
  /* Critique 3 : le QR en cubes était posé sur un dégradé gris, seul visuel de
     la page (« blanc et gris »). Son fond prend l'indigo très clair de l'outil
     par un fondu « produit » : le blanc et le gris de la photo se teintent, les
     cubes indigo restent vifs. Sélecteur plus fort que .v32-media (chargée
     après). La photo elle-même n'est pas modifiée. */
  .page-visual[data-page-visual] { isolation: isolate; background: var(--cubes-tint, #E6E8FF); }
  .page-visual[data-page-visual] img { mix-blend-mode: multiply; }
/* ---- 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; }
/* ---- v32.css ---- */
/* =============================================================================
   v32.css — « v3.2, visuels » de QR Code by Belentia (22/09/2026)
   Chargée APRÈS v31.css sur A.html, blog.html et tarifs.html.

   Retour de Kylian : « il manque des visuels », « trop de texte », « on se perd
   dans le blanc et le gris ». Cette feuille ne touche ni au hero, ni aux démos,
   ni au dosage de l'indigo : elle met en page les images produit, la vidéo, la
   galerie d'usages, le bandeau de chiffres et le bandeau final illustré.
   Aucune ombre CSS, aucun texte posé sur une image, coins 20–24 px.
   v3.3 (23/09/2026) : révélation et « Ce que vous obtenez » passent au kit
   « appareils » (_assets/device.css) ; leurs anciennes règles d'image sont retirées.
   v3.3, boucle 3 : la vidéo laisse place au kit « ambiance » ; repère de page
   courante dans la navigation (menu « Plus » et panneau mobile).
   ========================================================================== */

:root {
  --r-media: 24px;       /* grands cadres : révélation, vidéo, bandeau final */
  --r-card: 20px;        /* cartes photo de la galerie */
  --media-bg: #F2F3F5;   /* fond d'attente des images (jamais beige) */
}

/* Les images de la v3.2 : fond d'attente gris clair, jamais d'ombre. */
.v32-media { background: var(--media-bg); overflow: clip; }
.v32-media img,
.v32-media video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- 1. Révélation produit ---------------------------------------------- */
.reveal { padding-block: var(--space-2) var(--section-y); }
.reveal__line {
  max-width: 22ch;
  margin: 0 auto var(--space-5);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--ink);
  text-wrap: balance;
}
/* v3.2 (contrôle) : la phrase reste à l'encre, l'indigo est réservé au hero. */
.reveal__stage { transform-origin: 50% 0; will-change: transform; }
/* v3.3 : la photo composite (appareil-generateur-net.webp, téléphone tenu en main,
   recadré et agrandi ×1,25 / ×1,9) est remplacée par les appareils du kit
   _assets/device.css avec les vraies captures de /app (_assets/qrcode/ecrans/).
   Leur mise en page est dans le bloc <style> « v3.3 » de A.html. */
@media (max-width: 720px) {
  .reveal__line { font-size: 28px; margin-bottom: var(--space-4); }
}

/* ---- 2. Moment vidéo ---------------------------------------------------- */
/* v3.3, boucle 3 : la vidéo du QR en cubes (blanc sur blanc) est remplacée sur
   l'accueil par la section « ambiance » du kit (_assets/ambiance.css) ; ses
   règles de mise en page (.vid__*) sont retirées. */

/* ---- 3. Galerie d'usages ------------------------------------------------ */
.uses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.use { display: block; color: inherit; }
.use:hover { text-decoration: none; }
/* Portrait 4:5 partout (≈ 368×460 à 1440) : de vraies photos, plus des vignettes. */
.use__photo { border-radius: var(--r-card); aspect-ratio: 4 / 5; }
/* Le scrub du kit (scale 1,08 → 1) pilote transform ; le survol et le
   recadrage passent par la propriété scale, indépendante. */
.use__photo img { transition: scale 600ms var(--ease); transform-origin: 50% 50%; }
.use:hover .use__photo img { scale: 1.03; }
/* Boutique : on rapproche l'autocollant QR de la vitrine (au centre de l'image). */
.use__photo img[src*="usage-vitrine"] { object-position: 52% 48%; scale: 1.18; }
.use:hover .use__photo img[src*="usage-vitrine"] { scale: 1.21; }
.use__cap { margin-top: var(--space-2); }
.use__cap strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.use__cap strong svg { width: 18px; height: 18px; color: var(--accent); transition: transform 200ms var(--ease); }
.use:hover .use__cap strong svg { transform: translateX(3px); }
.use__cap span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
  /* Défilement horizontal avec accroche : une carte et demie à l'écran. */
  .uses-wrap { margin-inline: calc(var(--gutter) * -1); }
  .uses {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .uses::-webkit-scrollbar { display: none; }
  .use { scroll-snap-align: start; }
}
.uses__hint { display: none; margin-top: var(--space-2); font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .uses__hint { display: block; } }

/* ---- 3 bis. Vos données : nature morte flottante à côté du titre -------- */
.data__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}
.data__top .section-head { margin-bottom: 0; }
.data__top + .data-grid { margin-top: var(--space-6); }
.data__photo { border-radius: var(--r-media); aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  .data__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .data__top + .data-grid { margin-top: var(--space-4); }
  .data__photo { border-radius: var(--r-card); }
}

/* ---- 4. Ce que vous obtenez : grands chiffres, image + trois atouts ------ */
/* Une seule grille (la photo garde un parent avec une boîte : le balayage du
   kit observe le parent). Ordinateur : les chiffres ouvrent la section, la
   photo la ferme, juste avant les offres. Téléphone : titre et atouts, chiffres,
   puis photo (jamais ~2 écrans sans image). */
.get__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "facts facts" "copy photo";
  column-gap: var(--space-8);
  align-items: center;
}
.get__grid > :first-child { grid-area: copy; }
.get__grid > .facts-band { grid-area: facts; }
/* v3.3 : .get__photo (appareil-apercu-net.webp, recadrage d'une photo composite)
   est remplacé par .get__device, un téléphone du kit avec la vraie capture de
   l'aperçu (voir le bloc « v3.3 » de A.html). */
.get__list { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.get__list li { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; color: var(--ink); }
.get__icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--chip-bg);
  color: var(--accent);
}
.get__icon svg { width: 22px; height: 22px; }

/* Bandeau de faits : grands chiffres réels, séparés par des filets fins. */
.facts-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--line);
}
.facts-band > div { padding: 0 var(--space-3) var(--space-4) 0; }
.facts-band > div + div { padding-left: var(--space-4); border-left: 1px solid var(--line); }
.facts-band .kpi__num {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -.03em;
}
.facts-band .kpi__label { display: block; margin-top: var(--space-1); color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
  .get__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "facts" "photo";
  }
  .facts-band { margin-block: var(--space-5); border-bottom: 0; border-top: 1px solid var(--line); }
  .facts-band > div { padding: var(--space-3) 8px 0 0; }
  .facts-band > div + div { padding-left: 12px; }
}
@media (max-width: 720px) {
  .get__list li { font-size: 17px; }
  .facts-band .kpi__num { font-size: 48px; }
  .facts-band .kpi__label { font-size: 13px; }
}

/* ---- 4 bis. Offres : carrousel avec accroche sous 720 px ------------------ */
/* Trois cartes empilées faisaient ~3 écrans de texte sur téléphone. Elles
   passent côte à côte (86 % de large), Pro centré au chargement (script). */
.offers__hint { display: none; margin-top: var(--space-2); font-size: 13px; color: var(--muted); }
@media (max-width: 720px) {
  .offers-wrap { margin-inline: calc(var(--gutter) * -1); }
  .grid-3.offers {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-inline: 7%;
    scroll-padding-inline: 7%;
    padding-block: 2px 4px;
    scrollbar-width: none;
    align-items: stretch;
  }
  .grid-3.offers::-webkit-scrollbar { display: none; }
  .grid-3.offers > .price { scroll-snap-align: center; }
  .grid-3.offers .price__amount small { display: block; margin-top: 4px; }
  .offers__hint { display: block; text-align: center; }
}

/* ---- 5. QR dynamique : la photo devient un bandeau large (plus de vide) -- */
@media (min-width: 1024px) {
  .dyn__after { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-6); }
  .dyn__after .dynamic__media { grid-column: 1 / -1; border-radius: var(--r-media); }
  /* Correction du 23/09 : 2:1 cadré à 30 % (au lieu de 2,3:1 à 52 %) : le
     téléphone tenu en main n'est plus coupé par le bord haut du cadre. */
  .dyn__after .dynamic__media img { aspect-ratio: 2 / 1; object-position: 50% 30%; }
}
.dynamic__media { border-radius: var(--r-card); }

/* ---- 6. Bandeau final illustré ------------------------------------------ */
.cta-band--visual {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  justify-items: stretch;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4);
  text-align: left;
  border-radius: var(--r-media);
}
.cta-band--visual .cta-band__copy { padding: var(--space-4); display: grid; gap: var(--space-2); justify-items: start; }
.cta-band--visual .actions { justify-content: flex-start; margin-top: var(--space-1); }
.cta-band__photo { border-radius: 18px; aspect-ratio: 4 / 3; }
.cta-band__photo img { object-position: 50% 52%; scale: 1.12; transform-origin: 50% 50%; }
@media (max-width: 900px) {
  .cta-band--visual { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2); text-align: center; }
  .cta-band--visual .cta-band__copy { padding: var(--space-2) var(--space-1) var(--space-3); justify-items: center; }
  .cta-band--visual .actions { justify-content: center; width: 100%; }
  .cta-band__photo { aspect-ratio: 4 / 3; }
}

/* ---- 7. Pages secondaires : visuel d'en-tête ----------------------------- */
.page-visual { margin-top: var(--space-6); border-radius: var(--r-media); aspect-ratio: 21 / 8; }
.page-visual img { object-position: 50% 50%; }
@media (max-width: 720px) {
  .page-visual { margin-top: var(--space-4); aspect-ratio: 3 / 2; border-radius: var(--r-card); }
}
.page-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}
.page-split .page-visual { margin-top: 0; aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  .page-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
/* Blog, téléphone : la couverture de l'article à la une joue déjà le rôle
   d'image ; le visuel d'en-tête repoussait le premier titre sous la ligne de
   flottaison. */
@media (max-width: 720px) {
  .page-visual--desk { display: none; }
}
/* Tarifs, téléphone et tablette (≤ 900 px, en-tête sur une colonne) : le visuel
   est déplacé sous les offres (script de la page), pour garder les prix dans le
   premier écran. Correction du 23/09 : au format de la photo (1800 × 1208) — en
   21:9, le QR en cubes était rogné en haut et en bas (motifs de repérage coupés).
   Boucle 2 : seuil porté de 720 à 900 px. */
@media (max-width: 900px) {
  .page-visual--after { margin-top: var(--space-4); aspect-ratio: 1800 / 1208; }
}

/* ---- Mouvement réduit : tout est à l'état final, la vidéo reste sur l'affiche. */
@media (prefers-reduced-motion: reduce) {
  .reveal__stage { transform: none !important; }
  .use__photo img, .use__cap strong svg { transition: none; }
  .use__photo img[data-scrub] { transform: none !important; }
}
/* ---- 2e <style> de tarifs.html ---- */
  /* ===== Correction après contre-vérification (24/09, 5 h) ================== */
  /* Deux pastilles seulement (les prix sont dans les cartes, juste dessous),
     posées en ligne avec un écart régulier. */
  .page-split .facts, .facts { display: flex; flex-wrap: wrap; gap: 8px; }
  /* Sous 900 px, le QR en cubes ne reste plus seul après les offres. */
  @media (max-width: 900px) { .page-visual--after { display: none; } }
  /* Téléphone : en-tête compacté, l'offre et son prix entrent dans le premier écran. */
  @media (max-width: 480px) {
    main > .section:first-child { padding-top: 32px; padding-bottom: 24px; }
    .page-head p { font-size: 17px; line-height: 1.5; }
    .facts { margin-top: var(--space-3); }
  }
  /* Carte Pro : « / mois » lisible sur le fond teinté (≈ 9,8:1). */
  .price--featured .price__amount small { color: var(--text); }