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

  /* ===== Socle v2 conservé — 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; }
  }

  /* ===== v3 — typographie de la direction artistique ====================== */
  .h1, h1 { font-size: 52px; line-height: 1.05; }
  .h1--xl { font-size: 52px; }
  h2 { line-height: 1.15; }
  @media (max-width: 720px) {
    .h1, h1, .h1--xl { font-size: 34px; }
  }

  /* ===== v3 — barre de navigation collante, flou léger =================== */
  .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);
  }

  /* ---- Hero : texte à gauche, photo réelle à droite, fond blanc pur ------ */
  /* v3 affinée : le halo indigo à 6 % est retiré (fonds teintés réservés à la
     carte Pro et au bandeau final). overflow: clip, jamais hidden : le kit
     scroll exige qu'aucun ancêtre ne défile. */
  .hero { position: relative; isolation: isolate; padding-block: 96px 88px; overflow: clip; }
  .hero__grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
  }
  .hero__copy > * + * { margin-top: var(--space-3); }
  .hero__copy .actions { margin-top: var(--space-5); }
  .hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
  .hero__facts .chip { font-size: 14px; padding: 7px 13px 7px 9px; }
  .hero__facts .chip > .check { width: 18px; height: 18px; margin: 0; vertical-align: 0; }
  .hero__note { margin-top: var(--space-2); }
  .hero__media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
  .hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  /* Boucle 5 : le média du premier écran est visible d'emblée (plus de balayage au
     défilement, qui le laissait blanc ≈ 1 s sous WebKit) ; il « respire » très
     lentement (échelle 1 → 1,04 sur 12 s, aller-retour) pour que le premier écran
     mobile vive sans rien ajouter. Hors écran : en pause. Mouvement réduit : fixe. */
  @media (prefers-reduced-motion: no-preference) {
    .hero__media img { transform-origin: 50% 62%; animation: qr-hero-breathe 12s ease-in-out infinite alternate; }
    .hero__media.is-off img { animation-play-state: paused; }
  }
  @keyframes qr-hero-breathe { from { transform: scale(1); } to { transform: scale(1.04); } }

  /* ---- Bande des supports (défilé continu) ------------------------------- */
  .supports .marquee { --marquee-gap: 12px; }
  /* Mouvement réduit : la bande ne défile pas. Plus de fondu ni de pastille
     coupée au bord : les pastilles passent à la ligne, centrées, la copie de la
     boucle (aria-hidden) est masquée. Boucle 4 : tout cela est fait par le kit
     (.marquee--wrap-static, groupe replié compris) ; la page ne garde que
     l'interligne des rangées et la largeur de la piste, pour que les onze
     pastilles se rangent sans jamais en laisser une seule sur la dernière
     rangée (sans réglage : 3 + 3 + 2 + 2 + 1 à 414, 6 + 4 + 1 à 720 et 768,
     9 + 2 à 1440) : 3 + 2 + 2 + 2 + 2 sur téléphone, 4 + 4 + 3 de 560 à
     767 px, 6 + 5 dès 768. La bande est déjà dans un .container : dès 721 px,
     la marge intérieure du kit n'y sert pas. */
  @media (prefers-reduced-motion: reduce) {
    .supports .marquee__group { row-gap: 10px; }
    .supports .marquee--wrap-static .marquee__track { max-width: 336px; margin-inline: auto; }
  }
  @media (prefers-reduced-motion: reduce) and (min-width: 560px) {
    .supports .marquee--wrap-static .marquee__track { max-width: 572px; }
  }
  @media (prefers-reduced-motion: reduce) and (min-width: 721px) {
    .supports .marquee--wrap-static .marquee__track { max-width: 540px; padding-inline: 0 !important; }
  }
  @media (prefers-reduced-motion: reduce) and (min-width: 768px) {
    .supports .marquee--wrap-static .marquee__track { max-width: 760px; }
  }
  .supports .chip {
    background: var(--canvas);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 14px;
    padding: 8px 14px;
    white-space: nowrap;
  }
  .supports .chip svg { color: var(--accent); }

  /* ---- Bande des trois étapes (surface douce nº 1) ----------------------- */
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .steps li { display: flex; align-items: flex-start; gap: var(--space-2); }
  .steps__icon {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: var(--radius-sm);
    background: var(--canvas);
    border: 1px solid var(--line);
    color: var(--accent);
  }
  .steps__icon svg { width: 20px; height: 20px; }
  .steps strong { display: block; font-family: var(--font-title); font-size: 17px; color: var(--ink); }
  .steps p { font-size: 15px; color: var(--muted); }

  /* ---- Mini-générateur --------------------------------------------------- */
  .quick {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
  .field { display: block; }
  .field + .field,
  [data-fields] .field { margin-top: var(--space-3); }
  .field__label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .field input,
  .field textarea,
  .field select {
    width: 100%;
    min-height: 48px;
    padding: 12px var(--space-2);
    background: var(--canvas);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  .field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
  .field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink); }
  .field select {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 20px 20px;
  }
  .swatches { border: 0; padding: 0; margin: var(--space-3) 0 0; }
  .swatches legend {
    padding: 0;
    margin-bottom: var(--space-1);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .swatches__row { display: flex; gap: var(--space-2); }
  /* Pastilles de couleur : anneau actif en bordure 2 px (aucune box-shadow). */
  .swatch {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    padding: 0;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color var(--t) var(--ease);
  }
  .swatch span {
    display: block;
    width: 28px; height: 28px;
    border-radius: 999px;
    transition: transform 220ms var(--ease);
  }
  .swatch:hover span { transform: scale(1.08); }
  .swatch[aria-pressed="true"] { border-color: currentColor; }
  .swatch[aria-pressed="true"] span { transform: scale(1.12); }

  .quick__result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
  }
  .qr-preview {
    width: 280px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: var(--space-3);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .qr-preview canvas {
    width: 216px; height: 216px; display: block;
    transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  }
  /* Redessin : le QR repart d'un fondu + échelle à chaque saisie. */
  .qr-preview canvas.is-drawing { opacity: .25; transform: scale(.94); }
  .quick__result .btn--primary { width: 280px; max-width: 100%; }
  .btn-link {
    min-height: 44px;
    padding: 0 var(--space-2);
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    color: var(--accent);
    cursor: pointer;
  }
  .btn-link:hover { text-decoration: underline; }
  .btn-link[disabled] { color: var(--muted); cursor: not-allowed; text-decoration: none; }

  /* Zone du parcours guidé : le curseur ne doit pas être rogné. */
  .quick.tour { overflow: visible; }

  /* ---- Les 9 types de contenus ------------------------------------------ */
  .types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .type-tile {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
  }
  .type-tile:hover { text-decoration: none; }
  .type-tile__icon {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
  }
  .type-tile__icon svg { width: 20px; height: 20px; }
  .type-tile strong {
    display: block;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
  }
  .type-tile p { margin-top: 2px; font-size: 15px; color: var(--muted); }

  /* ---- Du fichier à l'impression ---------------------------------------- */
  .flow__line { width: 100%; height: 40px; margin-bottom: var(--space-2); color: var(--line-strong); }
  .flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .flow__card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }
  .flow__num {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--ink);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 16px;
  }
  .flow__card p { font-size: 16px; color: var(--text); }
  .flow__card code {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--soft);
    border: 1px solid var(--line);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
  }
  .flow__reminders { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-4); }

  /* Le panneau d'arrivée n'apparaît qu'à la fin de la frappe. */
  #flow-2 { opacity: .35; transition: opacity 420ms var(--ease); }
  #flow-2.is-done { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { #flow-2 { opacity: 1; } }

  /* ---- Démo « le lien change, le QR reste » — scène épinglée ------------- */
  /* v3 affinée : la section devient UNE scène du kit scroll. Le titre et la
     démonstration restent épinglés pendant que la destination passe de
     /menu-ete à /menu-hiver ; le QR imprimé, lui, ne bouge jamais.
     Sous 1024 px, le texte, les coches, le lien et la photo suivent en flux
     normal ; à partir de 1024 px, le texte rejoint la colonne gauche épinglée
     et le tout s'aligne en haut de l'écran (pas de grand vide gris). */
  .dyn { padding-top: 0; }
  .dyn__scene { --scene-top: 65px; }
  .dyn__scene .scene__sticky { height: calc(100vh - 65px); height: calc(100svh - 65px); }
  .dyn__pin { align-items: center; }
  .dyn__pin h2 { margin-top: var(--space-2); }
  .dyn__after { align-items: start; }
  .dyn__body .ticks { margin-top: var(--space-4); }
  .dyn__pin .dyn__body { margin-top: var(--space-3); }
  .scene.is-static .scene__sticky { top: 0; padding-block: var(--section-y) 0; }
  .scene.is-static + .dyn__after { margin-top: var(--space-6); }
  @media (min-width: 1024px) {
    .dyn { padding-top: var(--section-y); }
    .dyn__scene .scene__sticky { justify-content: flex-start; padding-top: 10vh; }
    .dyn__pin { align-items: start; }
    .scene.is-static .scene__sticky { padding-top: 0; }
    /* Le texte est monté dans la scène : la photo reste à droite, sous la démonstration (comme en v3). */
    .dyn__after .dynamic__media { grid-column: 2; }
    .scene.is-static + .dyn__after { margin-top: var(--space-4); }
    .dyn__after { margin-top: var(--space-4); }
    /* Tailles de la démonstration sur bureau : voir le bloc « Boucle 2 » en fin
       de feuille (ici, les règles de base déclarées plus bas les écrasaient). */
  }

  .swap {
    padding: var(--space-3);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .swap__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
  }
  .swap__print { text-align: center; }
  .swap__paper {
    display: inline-grid;
    place-items: center;
    padding: 12px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .swap__paper canvas { width: 116px; height: 116px; display: block; }
  .swap__arrow { color: var(--line-strong); }
  .swap__arrow svg { width: 40px; height: 24px; }
  /* Encadré « Destination » (correction du 23/09) : plus de pseudo-téléphone dessiné
     à la main (cadre noir trapu, hors kit). Il reprend la carte de l'autocollant :
     filet gris 1 px, coins 12 px, marge 12 px, fond blanc ; seul le vrai téléphone
     du kit dessine un appareil sur la page. */
  .swap__phone {
    position: relative;
    width: 168px;
    margin-inline: auto;
    padding: 12px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .swap__screen {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 6px;
    min-height: 132px;
    align-content: center;
    justify-items: center;
    padding: var(--space-2) 10px;
    background: var(--soft);
    border-radius: 8px;
    text-align: center;
  }
  .swap__dest {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--canvas);
    border: 1px solid var(--line);
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    transition: opacity 320ms var(--ease), transform 420ms var(--ease);
  }
  .swap__dest.is-swapping { opacity: 0; transform: translateY(-12px); }
  .swap__hint { font-size: 12px; line-height: 1.4; color: var(--muted); transition: opacity 320ms var(--ease); }
  .swap__hint.is-swapping { opacity: 0; }
  /* Téléphones courts (iPhone SE, Safari avec ses barres) : la scène tient
     dans la zone collante. Garde JS en plus : si elle ne tient toujours pas,
     elle se déplie (.is-static). */
  @media (max-width: 1023px) and (max-height: 760px) {
    .dyn__scene .swap__foot { display: none; }
    .swap__paper canvas { width: 88px; height: 88px; }
    .dyn .dyn__pin { gap: 12px; }
    .dyn .swap__screen { min-height: 112px; }
  }
  /* Faisceau de scan : UN passage à chaque changement de destination (et un
     à l'entrée de la démonstration), jamais en boucle. Sa course s'arrête
     au-dessus de la mention (--beam-end, posée par le script). */
  .swap__beam {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--accent);
    opacity: 0;
    pointer-events: none;
  }
  .swap__beam.is-scanning { animation: swap-beam 680ms var(--ease) 1 both; }
  @keyframes swap-beam {
    0%   { transform: translateY(0); opacity: 0; }
    15%  { opacity: .45; }
    80%  { transform: translateY(var(--beam-end, 48px)); opacity: .45; }
    100% { transform: translateY(var(--beam-end, 48px)); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .swap__beam, .swap__beam.is-scanning { animation: none; opacity: 0; } }
  /* Pastilles centrées sous la composition centrée (correction du 23/09). */
  .swap__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); margin-top: var(--space-3); }
  .swap__caption { margin-top: 6px; font-size: 13px; color: var(--muted); }
  /* Avancement de la scène : filet 2 px sur rail gris, masqué une fois déplié. */
  .swap__progress { margin-top: var(--space-3); height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
  .scene.is-static .swap__progress { display: none; }
  .dynamic__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

  /* ---- Pour qui : onglets auto-cyclés ------------------------------------ */
  .who__panels { margin-top: var(--space-4); }
  .who__panel { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
  .who__icon {
    display: grid; place-items: center;
    width: 56px; height: 56px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent);
  }
  .who__icon svg { width: 28px; height: 28px; }
  .who__panel h3 { font-size: 22px; }
  .who__panel p { margin-top: var(--space-1); max-width: 62ch; }
  .who__meta { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }

  /* ---- Vos données ------------------------------------------------------- */
  /* v3 affinée : l'icône de chaque carte cède la place à une coche qui se
     dessine devant le fait (kit scroll, data-check). */
  .data-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .data-grid h3[data-check] { display: flex; align-items: flex-start; gap: 12px; }
  .data-grid h3 > .check { flex: 0 0 26px; width: 26px; height: 26px; margin: 0; vertical-align: 0; }
  /* Boucle 4 : titres et phrases des cartes en lignes équilibrées, jamais un
     mot seul (« sort », « enregistrée », « uniquement. ») de 360 à 1440 px. */
  .data-grid h3,
  .data-grid .card p { text-wrap: balance; }
  /* Boucle 9,5 : sur trois colonnes, un titre sur deux lignes décalait sa phrase
     (26 px à 1440). Titre et phrase partagent les rangées de la grille. */
  @media (min-width: 900px) {
    .data-grid { grid-template-rows: auto auto; }
    .data-grid > .card { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
  }

  /* ---- Ce que vous obtenez : les trois chiffres clés portent l'accent ---- */
  .kpi__num { color: var(--accent); }

  /* ---- Tarifs : la carte Pro est mise en avant --------------------------- */
  .price { gap: var(--space-3); }
  .price__amount {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 32px;
    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__foot { margin-top: auto; padding-top: var(--space-1); }
  .price .btn { width: 100%; margin-top: var(--space-1); }
  .price--featured {
    background: var(--accent-soft);
    border: 2px solid var(--accent);
  }
  .price--featured .price__amount { font-size: 44px; }
  .price--featured .price__foot { color: var(--text); }

  /* ---- Bandeau final ----------------------------------------------------- */
  .cta-band {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-3);
    text-align: center;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, #FFF);
    border-radius: var(--radius);
  }
  .cta-band p { max-width: 56ch; color: var(--text); }
  .cta-band .actions { margin-top: var(--space-2); justify-content: center; }

  /* ---- Strip « Les outils Belentia » ------------------------------------- */
  .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); }

  /* ---- En-tête de section avec lien à droite ----------------------------- */
  .head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }
  .head-row .section-head { margin-bottom: 0; }

  /* ---- Points de rupture propres à la page ------------------------------- */
  @media (max-width: 1024px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    /* Correction du 23/09 : aperçu, PNG et SVG centrés en pleine largeur (comme à 1440). */
    .quick { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); justify-items: stretch; }
    .quick__result { align-items: center; text-align: center; }
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .dyn__pin { gap: var(--space-4); }
    .flow { grid-template-columns: minmax(0, 1fr); }
    .flow__line { display: none; }
  }
  @media (max-width: 720px) {
    .hero { padding-block: 56px 56px; }
    .head-row { flex-direction: column; align-items: flex-start; margin-bottom: var(--space-4); }
    /* Cibles tactiles : les liens fléchés et la marque font au moins 44 px. */
    .link-arrow, .brand { min-height: 44px; }
    .guide-card .link-arrow { align-items: flex-end; }
    /* Boucle 2 : les trois étapes restent sur trois colonnes jusqu'à 721 px
       (à 768, la liste empilée laissait 60 % de la bande vide à droite). */
    .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .type-tile { flex-direction: column; gap: 10px; padding: var(--space-2); }
    .type-tile p { display: none; }
    .data-grid { grid-template-columns: minmax(0, 1fr); }
    .swap__stage { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
    .swap__arrow svg { transform: rotate(90deg); }
    .dyn__pin { gap: var(--space-3); }
    .who__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .cta-band { padding: var(--space-6) var(--space-2); }
    .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; }
/* ---- 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 A.html ---- */
  /* ===== v3.3 — appareils du kit (device.css) avec les vraies captures de /app =====
     Placé après v32.css : il l'emporte à spécificité égale. Les anciens visuels
     composites (appareil-generateur-net, appareil-apercu-net) ne sont plus affichés.
     Aucun masque, aucun recadrage, aucune rotation, aucune ombre autour des appareils. */

  /* Fond de l'app (#F8FAFD) sous la barre d'état et derrière la capture. */
  .qr-dv { --dv-screen-bg: #F8FAFD; --dv-status-bg: #F8FAFD; }
  /* Reflet de sol sur fond gris : le kit isole désormais chaque .dv (boucle 2 :
     la règle propre à la page, devenue un doublon, est retirée). */
  .qr-dv picture { display: block; }

  /* ---- Révélation : ordinateur + téléphone (≥ 900 px), téléphone seul dessous ---- */
  .reveal { padding-block: var(--space-2) var(--section-y); }
  .reveal__line { margin-bottom: var(--space-6); }
  /* Duo : géométrie du kit (ordinateur 87 %, téléphone 21 % posé sur le cadre
     droit, jamais sur l'écran) ; la page ne règle que la largeur. Le reflet de
     sol dépasse sous les appareils : la scène lui garde de la place. */
  .qr-duo { --dv-duo-w: 1152px; margin-bottom: var(--space-2); }
  /* Boucle 5 : deux parcours. Duo (ordinateur + téléphone miroir) dès 900 px,
     téléphone seul dessous ; la zone masquée ne joue pas (le kit ne lance un
     parcours que s'il est à l'écran). */
  .qr-tour--solo { display: none; }
  @media (max-width: 899px) {
    .qr-tour--duo { display: none; }
    .qr-tour--solo { display: block; }
    .qr-tour--solo > .dv--phone {
      --dv-w: 300px;
      width: min(var(--dv-w), 100%);
      margin-inline: auto;
      margin-bottom: var(--space-3);
    }
  }
  @media (max-width: 720px) {
    /* v3.2 posait l'image bord à bord ; le téléphone reste dans la marge de 16 px. */
    .reveal { padding-top: var(--space-1); }
    .reveal__line { margin-bottom: var(--space-5); }
    .qr-tour--solo > .dv--phone { --dv-w: min(74vw, 290px); }
  }
  /* Cibles invisibles posées en % sur la capture (dans .dv__view). */
  .qr-hit { position: absolute; display: block; }
  /* Boucle 6 : le kit gère désormais la cible invisible (.tour-hit), le curseur caché
     avant sa première position, le point de toucher (.tour--touch) et le fondu sans
     délavage (.is-prev) : les copies de la page sont retirées (leur z-index égal
     laissait l'écran sortant au-dessus de l'entrant au retour à l'écran vide). */
  /* Pause / Rejouer sous les appareils, dans le flux : rien n'est recouvert. */
  .qr-tour__ctrls:empty { display: none; }
  /* v31.css pose un contour d'accent sur toute cible du tour ; le kit (.tour-hit) ne
     retire pas le contour : sur une capture, la cible invisible reste invisible. */
  .tour .tour-hit.is-tour-hover, .tour .tour-hit.is-tour-active { outline: 0; }
  /* Premier placement : le kit rend le curseur visible dès qu'il reçoit sa position et
     le fait glisser depuis le coin de la zone (hors du téléphone sous 900 px). Il
     n'apparaît qu'en fin de trajet, sur la cible. */
  .qr-tour .tour__cursor { transition: transform 600ms var(--motion-ease), opacity 160ms ease 460ms; }

  /* ---- Ce que vous obtenez : texte et chiffres à gauche, téléphone à droite ---- */
  .get__device { grid-area: photo; }
  @media (min-width: 900px) {
    .get__grid {
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
      grid-template-areas: "copy photo" "facts photo";
      align-items: start;
    }
    .get__grid > :first-child { align-self: end; }
    .get__grid > .facts-band {
      align-self: start;
      margin: var(--space-6) 0 0;
      border-bottom: 0;
      border-top: 1px solid var(--line);
    }
    .get__grid > .facts-band > div { padding-top: var(--space-4); padding-bottom: 0; }
    .get__device { align-self: center; padding-bottom: var(--space-3); }
  }
  @media (max-width: 899px) {
    .get__device { padding-bottom: var(--space-3); }
  }

  /* ---- Finition v3.3 : grilles sans carte orpheline, aucun mot coupé ---------- */
  /* Tablette (721–1024 px) : les grilles de trois restent sur trois colonnes
     (en v3.2, 2 + 1 carte orpheline pour les offres, les guides, « Vos données »
     et les 9 types sur 5 rangées). */
  @media (min-width: 721px) and (max-width: 1024px) {
    .types, .data-grid, .guides, .grid-3.offers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
    .type-tile { padding: var(--space-2); }
    .data-grid .card, .offers .price { padding: 20px; }
    .offers .price__amount small { display: block; margin-top: 4px; }
    .offers .price--featured .price__amount { font-size: 38px; }
    .offers .price .btn { padding-inline: 10px; font-size: 15px; }
  }
  /* « Vos données » entre 721 et 899 px : trois colonnes cassaient les titres en
     cinq lignes ; les trois faits s'empilent (cartes courtes, pleine largeur). */
  @media (min-width: 721px) and (max-width: 899px) {
    .data-grid { grid-template-columns: minmax(0, 1fr); }
  }
  /* Guides : titre et accroche en entier, lien calé en bas — règle déplacée dans
     v31.css (correction du 23/09) pour valoir aussi sur blog et article. */
  /* Galerie « Pour qui » : carrousel seulement sur téléphone ; trois colonnes dès
     721 px (en v3.2, une photo de 590 × 738 px à 768). */
  @media (min-width: 721px) and (max-width: 900px) {
    .uses-wrap { margin-inline: 0; }
    .uses {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-flow: row;
      grid-auto-columns: auto;
      gap: var(--space-2);
      overflow: visible;
      padding-inline: 0;
      scroll-snap-type: none;
    }
    .uses__hint { display: none; }
  }
  @media (max-width: 720px) {
    /* Les 9 types en 3 × 3 (au lieu de 2 colonnes et « Événement » seul). */
    .types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .type-tile { align-items: center; gap: 8px; padding: 14px 8px 12px; text-align: center; }
    .type-tile strong { font-size: 14px; line-height: 1.3; }
    /* Offres : les cartes voisines ne montrent que leur bord (22 px, moins que
       leur marge intérieure de 24 px) : plus de fragments de prix coupés. */
    .grid-3.offers { grid-auto-columns: 100%; padding-inline: 34px; scroll-padding-inline: 34px; }
    /* Galerie « Pour qui » : la légende d'une carte qui dépasse au bord reste
       masquée jusqu'à ce qu'elle soit entière (script de la page). */
    .use__cap { transition: opacity 240ms var(--ease); }
    .use.is-peek .use__cap { opacity: 0; }
  }
  @media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .use__cap { transition: none; }
  }
  /* Bandeau final : deux lignes équilibrées (plus de « SVG. » seul). */
  .cta-band p { text-wrap: balance; }

  /* ===== Correction après critique (23/09) ================================ */
  /* Révélation : l'en-tête collant de /app reste en place pendant le défilement
     lent. Il est découpé en haut de la capture (65 px CSS, 1170 × 195 @3) et posé
     au-dessus du défilement. Boucle 2 : c'est désormais l'emplacement officiel du
     kit (<img class="dv__appbar">, device.css) ; plus de règle propre à la page. */

  /* Mini-générateur : 16 px entre sur-titre et titre, comme partout ailleurs. */
  #creer-titre { margin-top: var(--space-2); }
  /* Mouvement réduit : le kit (motion.js, boucle 2) ne construit plus ni curseur
     ni bulle et remplit le champ : la règle propre à la page est retirée. */

  /* Hero, téléphone : les trois pastilles tiennent sur une seule ligne. */
  @media (max-width: 520px) {
    .hero__facts { gap: 6px; flex-wrap: nowrap; }
    .hero__facts .chip { font-size: 13px; padding: 6px 9px 6px 7px; white-space: nowrap; }
    .hero__facts .chip > .check { width: 16px; height: 16px; }
  }
  /* iPhone mini / SE (375 px) : un cran plus petit, toujours sur une ligne. */
  @media (max-width: 380px) {
    .hero__facts { gap: 5px; }
    .hero__facts .chip { font-size: 12px; padding: 5px 8px 5px 6px; gap: 5px; }
    .hero__facts .chip > .check { width: 14px; height: 14px; }
  }
  /* En dessous de 350 px : retour à la ligne plutôt que débordement. */
  @media (max-width: 350px) {
    .hero__facts { flex-wrap: wrap; }
  }

  /* « Ce que vous obtenez » : « 250 avec Business » sur sa propre ligne. */
  .kpi__sub { display: block; font-size: inherit; }
  /* Téléphone : la 3e colonne s'élargit un peu pour que « 250 avec Business »
     tienne sur une ligne (libellés en 2, 2 et 3 lignes, sans mot isolé). */
  @media (max-width: 720px) {
    .facts-band { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr) minmax(0, 1.12fr); }
  }

  /* ===== Boucle 2 (23/09) : dernière correction après contre-critique ======== */

  /* ---- Parcours guidé : Pause / Rejouer ne recouvrent plus rien ------------ */
  /* Boucle 3 : le kit pose les deux boutons dans <div data-tour-controls>,
     dernière ligne de .quick__result (le script de la page qui les y déplaçait
     est retiré) : centrés 16 px sous « Sans filigrane… » à toutes les largeurs,
     jamais dessus. En mouvement réduit, l'emplacement vide ne compte pas. */
  .quick__result > [data-tour-controls]:empty { display: none; }
  .quick__result > [data-tour-controls] > .tour__controls { margin-top: 0; }
  /* La bulle noire du kit est retirée à toutes les largeurs : les étapes n'ont
     plus de « label » (voir le JSON du parcours). */

  /* ---- « Trois gestes » : la ligne suit les cartes à toute largeur ---------- */
  /* Le repère SVG est dessiné pour 1152 px (gouttière 24 px) et mis à l'échelle
     sans déformation ; la gouttière des cartes devient proportionnelle
     (24 / 1152 = 2,0833 %) : cercles centrés sur les cartes de 901 à 1440 px. */
  @media (min-width: 901px) {
    .flow { column-gap: 2.0833%; }
  }

  /* « Trois gestes » : plus de curseur de frappe figé en mouvement réduit ;
     boucle 4 : fait par le kit (motion.css), règle de la page retirée. */

  /* ---- Neuf types, téléphone : trois rangées de même hauteur --------------- */
  @media (max-width: 720px) {
    .types { grid-auto-rows: 1fr; }
  }

  /* ---- « Votre lien change ? » : autocollant et destination jumeaux --------- */
  /* Une seule mesure (--swap-card) pour les deux cartes : même hauteur, hauts
     alignés, la flèche au milieu. Plus de carte dans la carte : la destination
     est posée sur le blanc de sa carte, comme le QR sur son autocollant.
     Téléphone : 116 px de QR (deux carrés de 142 px) ; tablette : 160 px (deux
     carrés de 190 px) ; bureau : la mesure suit la largeur réelle de la
     démonstration (unités de conteneur), plafonnée à 190 px, pour que les deux
     cartes et la flèche tiennent toujours dans l'encadré, à marges égales.
     Les deux états du texte (« /menu-ete », « /menu-hiver ») tiennent dedans. */
  .dyn .swap { --swap-qr: 116px; --swap-pad: 12px; --swap-card: calc(var(--swap-qr) + 2 * var(--swap-pad) + 2px); }
  .dyn .swap__stage { container-type: inline-size; }
  .dyn .swap__paper { padding: var(--swap-pad); }
  .dyn .swap__paper canvas { width: var(--swap-qr); height: var(--swap-qr); }
  .dyn .swap__phone {
    display: grid;
    width: var(--swap-card);
    min-height: var(--swap-card);
    padding: 8px;
  }
  .dyn .swap__screen {
    min-height: 0;
    gap: 4px;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
  .dyn .swap__dest { padding-inline: 10px; }
  @media (min-width: 721px) {
    .dyn .swap { --swap-qr: 160px; --swap-pad: 14px; }
    .dyn .swap__stage { align-items: start; }
    .dyn .swap__arrow { margin-top: calc(var(--swap-card) / 2 - 12px); }
    .dyn .swap__phone { padding: var(--swap-pad); }
    .dyn .swap__screen { gap: 6px; }
    .dyn .swap__dest { padding-inline: 12px; font-size: 18px; }
    .dyn .swap__hint { font-size: 13px; }
  }
  /* Tablette et petit portable (721–1023 px) : titre au-dessus, démonstration
     en pleine largeur (sans quoi, entre 901 et 1023 px, la colonne de droite de
     362 à 418 px ne pouvait pas contenir les deux cartes : débordement de 21 px
     à 901). Les deux cartes se rapprochent au centre au lieu de flotter aux
     deux bouts. */
  @media (min-width: 721px) and (max-width: 1023px) {
    .dyn .dyn__pin { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .dyn .swap__stage { max-width: 456px; margin-inline: auto; }
  }
  /* Bureau : deux colonnes égales (la démonstration gagne 54 px à 1440), marge
     intérieure de 24 px, écarts de 12 px ; carrés de min(190 px, place). */
  @media (min-width: 1024px) {
    .dyn .dyn__pin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .dyn .swap { width: 100%; max-width: 520px; justify-self: end; padding: var(--space-3);
                 --swap-card: min(190px, (100cqi - 64px) / 2);
                 --swap-qr: calc(var(--swap-card) - 2 * var(--swap-pad) - 2px); }
    .dyn .swap__stage { gap: 12px; }
  }
  /* Écrans courts (iPhone SE) : la règle d'origine réduisait le QR à 88 px ;
     les deux cartes jumelles gardent ici 142 px (la destination ne tiendrait pas
     dans 114 px) : la scène tient toujours dans la zone collante, pastilles
     masquées (garde JS inchangée). */
  @media (max-width: 1023px) and (max-height: 760px) {
    .dyn .swap { --swap-qr: 116px; --swap-pad: 12px; }
    .dyn .swap__phone { padding: 8px; }
    .dyn .swap__screen { gap: 4px; }
    .dyn .swap__dest { padding-inline: 10px; font-size: 15px; }
    .dyn .swap__hint { font-size: 12px; }
  }

  /* ===== Boucle 3 (23/09) : ambiance, finitions ============================ */

  /* ---- Ambiance (kit ambiance.css) : réglages de l'outil ------------------- */
  /* Fond relevé sur le mur indigo de l'image (#4447CD), bouton à l'indigo vif de
     l'outil. Cadrage : le chevalet à QR code, la tasse et le comptoir ; au
     bureau, recadrage vertical ancré en haut (critique 3, voir plus bas). La
     marge blanche est réglée plus bas (critique 3 : 96 / 64 px, comme entre
     deux sections). */
  .qr-amb {
    --amb-bg: #4447CD;
    --amb-ink: #4F46E5;
    --amb-pos: 58% 0%;   /* 24/09 : 66 → 58 %, la fenêtre claire sort du coin droit */
    /* Boucle 4 : l'empilement texte + vidéo jusqu'à 900 px est désormais fait
       par le kit (--amb-ratio-t de 481 à 900 px, --amb-ratio-m dessous) ; la
       page ne règle plus que le format et le cadrage : 3:2 cadré à droite
       (comptoir, chevalet, tasse) en tablette, 4:3 sur téléphone. */
    --amb-ratio-t: 3 / 2;
    --amb-pos-t: 96% 50%;
    --amb-pos-m: 84% 50%;
  }
  /* Titre coupé après la virgule (« Un scan, / et vous y êtes. ») ; phrase en
     lignes de longueur égale (plus de « rien taper. » seul à 1440). */
  .qr-amb .amb__lead { text-wrap: balance; }
  /* Coins nets : le fond uni du panneau, arrondi et anticrénelé comme la vidéo
     qu'il porte, laissait un liseré indigo sur l'arrondi des coins photo (fenêtre
     claire en haut à droite, marbre en bas). Le fond ne couvre plus que la zone
     du texte : la moitié gauche (mur indigo de l'image) au bureau, le bloc de
     texte quand le panneau s'empile (pleine largeur : le kit le limite à 640 px,
     ce qui laisserait une bande blanche à droite du texte en tablette). Le
     liseré intérieur du kit (--amb-ring) dessine, lui, le bord sur la fenêtre
     claire. */
  .qr-amb .amb__panel { background: linear-gradient(90deg, var(--amb-bg) 50%, transparent 50%); }
  @media (max-width: 900px) {
    .qr-amb .amb__panel { background: transparent; }
    .qr-amb .amb__text { background: var(--amb-bg); max-width: none; }
  }

  /* ---- Révélation, téléphone : pause haute entre deux blocs ---------------- */
  /* Au repos du cycle, la vue démarre 10 px au-dessus de la carte « Contenu »
     (le titre de l'app est passé sous l'en-tête) et s'arrête dans le blanc qui
     suit le QR : la barre d'accueil ne tombe plus sur les modules. Boucle 4 :
     réglage en px d'app du kit (data-dv-top sur la figure, voir la section
     « Révélation ») au lieu de la fraction --dv-scroll-top, identique sous
     Chromium et WebKit. */

  /* ---- « Votre lien change ? » : deux carrés légendés de la même façon ------ */
  /* Chaque carré porte son nom dessous, hors du cadre : « Autocollant imprimé
     une fois » à gauche, « Page ouverte au scan » à droite. L'étiquette
     « Destination » dans le cadre de droite est retirée. */
  .swap__target { text-align: center; }

  /* ===== Boucle 3 : correction après la critique 3 (23/09) ================= */

  /* Révélation : la capture attend sur la pause haute avant le premier cycle.
     Boucle 4 : c'est désormais le kit (device.css) ; la règle de la page est
     retirée. */

  /* ---- Ambiance : cadrage, place ------------------------------------------ */
  /* Tête de l'homme au comptoir entière : dans la source, le haut de sa tête
     est à 55 px sur 1086. Au-delà de 16:9 (1000 à 1440 px), le recadrage
     vertical centré en retirait davantage ; il part maintenant du bas (marbre
     et chaise). Le recul de 1,1 à 1 du kit (il joue depuis la boucle 4 :
     overflow: clip) est ancré en haut, sur la vidéo ET sur l'affiche que le
     kit pose dessous (<img class="amb__poster">) : pendant le fondu, les deux
     images restent superposées au pixel, et la tête n'est jamais rognée. */
  .qr-amb .amb__media :is(video, img) { transform-origin: 58% 0; }   /* --amb-pos : 58 % 0 % */
  /* Place : même respiration au-dessus et au-dessous que d'une section à
     l'autre (96 px, 64 sur téléphone). La section suivante apporte déjà son
     haut ; le panneau n'ajoute que le sien (le kit met --amb-y des deux côtés :
     72 au-dessus, 72 + 96 = 168 px au-dessous). */
  .qr-amb { padding-block: var(--section-y) 0; }
  /* Empilé (≤ 900 px, kit) : 3:2 cadré à 96 % en tablette et au-dessus de
     480 px, 4:3 cadré à 84 % sur téléphone ; aucun recadrage vertical : tête,
     chevalet, tasse et comptoir entiers. */
  @media (max-width: 900px) {
    .qr-amb .amb__media :is(video, img) { transform-origin: 96% 0; }
  }
  @media (max-width: 480px) {
    .qr-amb .amb__media :is(video, img) { transform-origin: 84% 0; }
  }
  /* Sur-titre sur une ligne jusqu'à 360 px (à 375, « LA TABLE » passait seul
     à la ligne) ; en dernier recours, coupure équilibrée après « VITRINE, ». */
  .qr-amb .amb__eyebrow { text-wrap: balance; }
  @media (max-width: 389px) {
    .qr-amb .amb__eyebrow { font-size: 12px; letter-spacing: .05em; }
  }

  /* ---- Offres, tablette (721–900 px) : comme sur Tarifs -------------------- */
  /* Trois colonnes de 228 px à 768 cassaient les puces sur deux ou trois
     lignes ; Tarifs empile ses offres en pleine largeur à la même largeur.
     L'accueil fait de même (carte Pro toujours teintée) ; trois colonnes dès
     901 px. */
  @media (min-width: 721px) and (max-width: 900px) {
    .grid-3.offers { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .offers .price { padding: var(--space-3); }
    .offers .price__amount small { display: inline; margin-top: 0; }
    .offers .price--featured .price__amount { font-size: 44px; }
    .offers .price .btn { padding-inline: var(--space-3); font-size: 16px; }
  }

  /* ===== Correction après contre-vérification (24/09, 5 h) ================== */
  /* Hero, téléphone : la photo entière dans le premier écran (390 × 844). La note
     « encodé dans votre navigateur » est redite dans « Vos données » ; « Voir les
     9 types » devient un lien texte sous le bouton principal. */
  @media (max-width: 480px) {
    .hero { padding-block: 32px 40px; }
    .hero__copy > * + * { margin-top: var(--space-2); }
    .hero__copy .actions { margin-top: var(--space-3); flex-direction: column; align-items: center; gap: 2px; }
    .hero__copy .actions .btn--primary { width: 100%; }
    .hero__copy .actions .btn--secondary {
      width: auto; min-height: 0; padding: 8px 4px; background: none; border-color: transparent; box-shadow: none;
      color: var(--accent); font-size: 15px;
    }
    .hero__facts { margin-top: var(--space-2); }
    .hero__note { display: none; }
    .hero__grid { gap: var(--space-4); }
  }
  /* Vidéo d'ambiance, bureau : un voile indigo à 8 % sur le dixième droit garde
     lisible le bord arrondi quand la fenêtre claire de la vidéo touche le coin. */
  @media (min-width: 901px) {
    .qr-amb .amb__media::after {
      content: ""; position: absolute; inset: 0 0 0 auto; width: 10%; z-index: 1; pointer-events: none;
      background: linear-gradient(to right, rgba(79, 70, 229, 0), rgba(79, 70, 229, .08));
    }
  }
  /* Défilé des supports : un toucher le met en pause (et le relance). */
  .marquee.is-paused .marquee__track { animation-play-state: paused; }
  /* Carte Pro : « / mois — ou 39 € / an » lisible sur le fond teinté (≈ 9,8:1). */
  .price--featured .price__amount small { color: var(--text); }

/* Correction après contrôle (24/09/2026) : au bureau, le panneau ambiance prend la largeur
   du contenu (bords alignés sur la marque et sur « Connexion ») au lieu de 1 280 px : l'affiche
   de 1 920 px et la vidéo de 1 280 px sont moins agrandies (aucune source plus grande n'existe). */
@media (min-width: 901px) {
  .qr-amb .amb__panel { width: min(calc(var(--container, 1200px) - 2 * var(--gutter, 24px)), calc(100% - 2 * var(--gutter, 24px))); }
}