/* Extrait de maquettes/motdepasse/A.html (v3.3) */

  /* =========================================================================
     Maquette A v3 affinée — Mot de passe by Belentia
     Couleur de l'outil : orange #F97316 (hover #EA580C), en touches.
     Socle : _assets/base.css. Mouvement : motion.css/js + scroll.css/js.
     Affinage partagé (couleur, ombres, durées) : _assets/motdepasse/affine.css.
     Aucune statistique inventée : tout ce qui est chiffré ici vient du code
     du produit (bornes du générateur, dictionnaire, profils, export).
     ====================================================================== */
  :root {
    --accent: #F97316;
    --accent-ink: #FFFFFF;
    --accent-hover: #EA580C;
    --accent-6: color-mix(in srgb, var(--accent) 6%, #FFF);
    --accent-line: color-mix(in srgb, var(--accent) 40%, #FFF);
    --symbol: #4B5A75;                 /* symboles du secret affiché */
    --mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  }
  @supports not (color: color-mix(in srgb, #000 6%, #fff)) {
    :root { --accent-6: #FEF5EE; --accent-line: #FBC9A3; }
  }

  /* ---------- Nav centrée, collante, léger flou ---------- */
  .nav--centered {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
            backdrop-filter: saturate(180%) blur(12px);
  }
  .nav--centered .nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .nav--centered .nav__links { margin-left: 0; justify-content: center; }
  .nav--centered .nav__actions { justify-self: end; }
  .nav__actions .btn--ghost { padding-inline: 14px; font-weight: 600; }
  @media (max-width: 900px) {
    .nav--centered .nav__inner { display: flex; }
  }

  /* ---------- Hero : texte court, puis l'outil, halo orange 6 % ---------- */
  .hero { position: relative; padding-block: var(--space-5) var(--space-6); }
  .hero__head { max-width: 760px; margin-inline: auto; text-align: center; }
  .hero__head > * + * { margin-top: var(--space-2); }
  .hero__head .h1 { font-size: 52px; line-height: 1.05; }
  .hero__head .lead { color: #374151; }   /* contre-vérification v33 : même gris que le chapeau des autres pages */

  /* ---------- Le générateur ---------- */
  .gen {
    position: relative;
    max-width: 880px;
    margin: var(--space-4) auto 0;
    padding: var(--space-3);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  /* Rangée du haut : onglets à gauche, solidité à droite */
  .gen__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  .tabs button {
    min-height: 36px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
  }
  .tabs button:hover { color: var(--ink); }
  .tabs button[aria-selected="true"] {
    background: var(--canvas);
    border-color: var(--line);
    color: var(--ink);
  }

  /* Jauge de solidité : libellé + barre fine, sans score chiffré */
  .strength { display: flex; align-items: center; gap: var(--space-2); }
  .strength__label { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .strength__label b { color: var(--ink); font-weight: 700; }
  .strength__track {
    width: 96px; height: 4px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
  }
  .strength__fill {
    display: block; height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--accent);
    transition: width 520ms var(--ease);
  }

  /* Champ du secret */
  .secret {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--canvas);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .02em;
    color: var(--ink);
    text-align: center;
    overflow-wrap: anywhere;            /* se replie, en coupant d'abord aux tirets */
  }
  /* Un seul enfant souple : sans lui, chaque caractère deviendrait un élément
     de la boîte flexible et la phrase de passe déborderait au lieu de se replier. */
  .secret__value { display: block; max-width: 100%; }
  /* Passe 9,5 (24/09) : phrase de passe coupée seulement après un séparateur (home.js). */
  .secret-word { white-space: nowrap; }
  .secret .d { color: var(--accent); }        /* chiffres */
  .secret .s { color: var(--symbol); }        /* symboles et séparateurs */
  .secret .x { color: var(--muted); }         /* caractère encore en train de se brasser */

  .gen__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
  .gen__actions .btn { flex: 0 0 auto; }
  .btn svg { width: 20px; height: 20px; }

  /* Réglages */
  .gen__panel { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
  .gen__panel[hidden] { display: none; }

  .range-row { display: flex; align-items: center; gap: var(--space-3); }
  .range-row label { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; }
  /* Curseur : piste claire, portion parcourue en accent (--fill, posé par le JS). */
  .range-row input[type="range"] {
    flex: 1;
    min-width: 120px;
    height: 44px;                       /* cible tactile */
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .range-row input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right,
      var(--accent) 0 calc(var(--fill, 0) * 1%),
      var(--line) calc(var(--fill, 0) * 1%) 100%);
  }
  .range-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; height: 20px;
    margin-top: -7px;
    border: 2px solid var(--canvas);
    border-radius: 50%;
    background: var(--accent);
  }
  .range-row input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--line);
  }
  .range-row input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
  }
  .range-row input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px;
    border: 2px solid var(--canvas);
    border-radius: 50%;
    background: var(--accent);
  }
  .range-row output {
    min-width: 40px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
  }

  .pills { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
  }
  .pill:hover { border-color: var(--line-strong); color: var(--ink); }
  .pill input { position: absolute; opacity: 0; width: 0; height: 0; }
  .pill__box {
    display: grid; place-items: center;
    width: 18px; height: 18px;
    flex: 0 0 18px;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: var(--canvas);
    color: transparent;
  }
  .pill__box svg { width: 12px; height: 12px; }
  /* Cochée : fond blanc, bord plus net, seule la coche est orange. */
  .pill:has(input:checked) {
    background: var(--canvas);
    border-color: var(--line-strong);
    color: var(--ink);
  }
  .pill:has(input:checked) .pill__box {
    background: var(--canvas);
    border-color: var(--accent);
    color: var(--accent);
  }
  .pill:has(input:focus-visible) { outline: 2px solid var(--focus-ring, #111827); outline-offset: 2px; }

  .gen__note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--muted);
  }
  .gen__note .link-arrow { font-size: 14px; }

  /* ---------- Bande de garanties ---------- */
  .guarantees { padding-block: var(--space-3); }
  .guarantees ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .guarantees li { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; color: var(--muted); }
  .guarantees svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--accent); }
  .guarantees b { color: var(--ink); font-weight: 700; }
  /* Boucle 2 — tablette et petit bureau : en trois colonnes étroites, la
     description passait seule à la ligne (« Gratuit — sans / abonnement. ») ;
     le fait en gras sur une ligne, sa précision dessous, sans tiret. */
  /* Boucle 4 — même présentation sur les petits téléphones (≤ 380 px) : à 360,
     « Sur votre appareil — aucun / secret transmis. » coupait sa précision. */
  @media (min-width: 721px) and (max-width: 1199px), (max-width: 380px) {
    .guarantees li { align-items: flex-start; }
    .guarantees svg { margin-top: 2px; }
    .guarantees b, .guarantees .g-desc { display: block; }
    .guarantees .g-sep { display: none; }
  }

  /* ---------- Tuiles « Pourquoi un générateur ? » ---------- */
  .tile {
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .tile__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    margin-bottom: var(--space-3);
    padding: var(--space-2);
    background: var(--soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  /* v3.3 (reprise) : les trois scènes prennent la hauteur de la plus haute
     (mesurée par le script après le tirage des exemples réels) : au-dessus de
     720 px, et sur mobile quand les tuiles se relaient dans la même case ;
     titres, textes et pieds des tuiles restent à la même hauteur. */
  .why__tiles .tile__stage { height: var(--why-stage-h, auto); }
  .tile h3 + p { margin-top: var(--space-1); color: var(--text); }
  .tile__foot { margin-top: auto; padding-top: var(--space-2); font-size: 14px; color: var(--muted); }

  /* Brassage : 12 caractères qui tournent en boucle lente */
  /* 6 colonnes × 2 rangées : la grille reste régulière à toutes les largeurs. */
  .scramble { display: grid; grid-template-columns: repeat(6, 26px); gap: 5px; justify-content: center; }
  .scramble span {
    display: grid;
    place-items: center;
    width: 26px; height: 34px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 7px;
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
  }
  .scramble span.is-hot { color: var(--accent); border-color: var(--accent-line); }

  /* Ligne de code tapée + phrase révélée à la fin de la frappe */
  .typed {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 8px 12px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--ink);
    overflow-wrap: anywhere;
    min-height: 40px;           /* même hauteur avant et après la frappe */
  }
  /* Le paragraphe sous la ligne tapée est visible d'emblée : seule la ligne
     de code se tape, la tuile n'a jamais de trou pendant la frappe. */

  /* Schéma navigateur → cadenas */
  .diagram { width: 100%; max-width: 230px; height: auto; color: var(--accent); }

  /* Trois formats : exemples réels */
  .formats { display: grid; gap: 8px; width: 100%; }
  .formats div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .formats dt, .formats b {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .formats code {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink);
    overflow-wrap: anywhere;
    min-width: 0;
  }

  /* ---------- Bande défilante d'exemples réels ---------- */
  .samples { margin-top: var(--space-5); }
  .samples__band {
    padding-block: var(--space-2);
    border-block: 1px solid var(--line);
  }
  .samples .marquee__track { --marquee-gap: 12px; }
  .samples__chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
  }
  .samples__note { margin-top: var(--space-2); font-size: 14px; color: var(--muted); }

  /* ---------- Démonstration guidée (cursor tour) ---------- */
  .demo { align-items: center; }
  .demo__text > * + * { margin-top: var(--space-2); }
  .demo__steps { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
  .demo__steps li { display: flex; gap: var(--space-2); align-items: flex-start; }
  .demo__steps b {
    display: grid; place-items: center;
    flex: 0 0 26px; width: 26px; height: 26px;
    border-radius: 50%;
    background: #F2F3F5;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
  }
  .demo__steps span { color: var(--text); }

  .tour-app {
    /* Le curseur et son étiquette restent dans la carte : sans cela,
       l'étiquette de la 1re étape dépasse de 2 px à 390 px de large. */
    overflow: hidden;
    padding: var(--space-3);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .tour-app__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
  }
  .tour-app__title { font-family: var(--font-title); font-size: 15px; font-weight: 700; color: var(--ink); }
  /* v3.3 (reprise) : l'adresse en police mono décorative est retirée ; la carte
     s'appelle « Essai guidé » pour ne pas se faire passer pour la vraie /app. */
  .tour-profiles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
  .tour-profile {
    min-height: 36px; padding: 0 13px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 14px; font-weight: 600; color: var(--text);
    cursor: pointer;
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
  }
  .tour-profile:hover { border-color: var(--line-strong); }
  .tour-profile[aria-pressed="true"] {
    background: var(--canvas);
    border-color: var(--accent);
    color: var(--accent);
  }
  .tour-secret {
    display: flex; align-items: center; justify-content: center;
    min-height: 62px; margin-top: var(--space-2); padding: 10px var(--space-2);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--ink);
    text-align: center; overflow-wrap: anywhere;
  }
  .tour-secret .d { color: var(--accent); }
  .tour-secret .s { color: var(--symbol); }
  .tour-row { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
  .tour-row .btn { flex: 1; min-height: 44px; }
  .tour-histo {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    margin-top: var(--space-2); padding: 10px 12px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 13.5px; color: var(--text);
  }
  .tour-histo b { color: var(--ink); }
  /* Pause / Rejouer sous l'historique, dans le flux : option du kit
     .tour--controls-flow (boucle 2 ; remplace le contournement de la page).
     Seul l'écart est réglé ici, sur le rythme de 16 px de la carte. En
     mouvement réduit, le kit ne pose ni curseur, ni bulle, ni boutons, et la
     bande d'exemples figée garde un fondu d'un seul côté : les deux
     contournements de la page sont retirés. */
  .tour-app.tour--controls-flow .tour__controls { margin-top: var(--space-2); }

  /* ---------- Comparatif à bascule ---------- */
  .switcher {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-pill);
  }
  .switcher button {
    min-height: 40px; padding: 0 18px;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--muted);
    cursor: pointer; white-space: nowrap;
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
  }
  .switcher button:hover { color: var(--ink); }
  .switcher button[aria-pressed="true"] {
    background: var(--canvas); border-color: var(--accent-line); color: var(--accent);
  }
  .compare { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .compare__col {
    padding: var(--space-3);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
  }
  .compare__col[data-on="true"] { background: var(--canvas); border-color: var(--accent-line); }
  .compare__col h3 { display: flex; align-items: center; gap: var(--space-1); }
  .compare dl { margin-top: var(--space-2); }
  .compare dt {
    margin-top: var(--space-2);
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted);
  }
  .compare dd { margin: 2px 0 0; color: var(--text); }
  .compare dd.sample {
    margin-top: 6px; padding: 9px 11px;
    background: var(--canvas); border: 1px solid var(--line); border-radius: 8px;
    font-family: var(--mono); font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere;
    text-wrap: balance;   /* boucle 2 : une phrase de passe sur deux lignes se coupe en deux moitiés, plus « -59 » seul */
  }

  /* ---------- Profils réels, onglets auto-cyclés ---------- */
  .moments { margin-top: var(--space-4); }
  .moment {
    padding: var(--space-4);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .moment[hidden] { display: none; }
  .moment__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-4); align-items: center; }
  .moment h3 + p { margin-top: var(--space-1); color: var(--text); }
  .moment .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
  .moment__sample {
    padding: var(--space-3);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  .moment__sample p {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }
  .moment__sample code {
    display: block; margin-top: 8px;
    font-family: var(--mono); font-size: 16px; color: var(--ink); overflow-wrap: anywhere;
  }
  .moment__sample code .d { color: var(--accent); }
  .moment__sample code .s { color: var(--symbol); }
  .moment .link-arrow { margin-top: var(--space-3); }

  /* ---------- Trois habitudes ----------
     v3.3 : plus de gros numéros (titres numérotés proscrits) ni de frise dont les
     nœuds tombaient entre les colonnes ; chaque habitude a un filet fin au-dessus,
     aligné sur sa colonne, et un pictogramme au trait orange. */
  .habits { gap: var(--space-6) var(--space-4); }
  .habit { padding-top: var(--space-3); border-top: 1px solid var(--line-strong); }
  .habit__icon { display: block; width: 28px; height: 28px; color: var(--accent); }
  .habit h3 { margin-top: var(--space-2); }
  .habit h3 + p { margin-top: var(--space-1); color: var(--text); }

  /* ---------- Section éditoriale ---------- */
  .editorial { align-items: center; }
  .editorial__text > * + * { margin-top: var(--space-2); }
  .editorial__text .actions { margin-top: var(--space-4); }

  /* ---------- Vos données ---------- */
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .fact {
    display: flex; gap: var(--space-2); align-items: flex-start;
    padding: var(--space-3);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  /* v3 affinée : la coche du kit (pastille grise, trait orange) remplace l'icône. */
  .fact .check { flex: 0 0 28px; width: 28px; height: 28px; margin: 0; }
  .fact b { display: block; color: var(--ink); font-weight: 700; }
  .fact span { color: var(--text); }
  .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
  .kpis .kpi { padding-top: var(--space-3); border-top: 1px solid var(--line); }
  .kpis .kpi__num { color: var(--accent); }

  /* ---------- Bandeau final ---------- */
  .cta { background: var(--soft); }              /* v3.3 : gris neutre, plus d'orange 4 % (lu crème) */
  .cta__inner { max-width: 720px; margin-inline: auto; text-align: center; }
  .cta__inner > * + * { margin-top: var(--space-2); }
  .cta .actions { margin-top: var(--space-4); justify-content: center; }

  /* ---------- Strip « Les outils Belentia » ---------- */
  .tools { padding-block: var(--space-6); border-top: 1px solid var(--line); }
  .tools__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
  .tools__list { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
  .tools__list a {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 15px; font-weight: 600; color: var(--text);
    transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background-color var(--t) var(--ease);
  }
  .tools__list a:hover { border-color: var(--accent-line); background: var(--accent-6); color: var(--ink); text-decoration: none; }
  .tools__list a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
  .tools__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 8px; }


  /* ---- Cibles tactiles : 44 px sur les liens autonomes ---- */
  .link-arrow, .brand { min-height: 44px; }

  /* ---- v3.3 : accroches des guides en entier (le socle les coupait à une
     ligne avec « … ») ; « Lire le guide » reste aligné en bas des trois cartes. */
  .guide-card__excerpt { display: block; -webkit-line-clamp: unset; overflow: visible; text-wrap: pretty; }
  /* Boucle 4 : carte en colonne et « Lire le guide » en bas viennent désormais du
     socle (base.css) ; seules les accroches entières restent propres à la page.
     Couvertures sur fond orange : même orange pendant le chargement, pas de gris. */
  .guide-card__cover { background: #FA6605; }
  /* v3.3 : le lien « Lire le guide » de la 3e carte d'usage ne gonfle plus sa ligne
     (min-height 44 px en ligne décalait la légende de 12 px par rapport aux deux
     autres cartes) ; la zone tactile reste de 44 px grâce au remplissage. */
  .use p .link-arrow { min-height: 0; padding-block: 12px; margin-block: -12px; }


  /* ---- Liste des emplacements d'images ---- */
  .slots-section { padding-block: var(--space-6) var(--space-8); border-top: 1px solid var(--line); }
  .slots > summary {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
  }
  .slots > summary::-webkit-details-marker { display: none; }
  .slots > summary:hover { color: var(--ink); }
  .slots > summary svg { transition: transform var(--t) var(--ease); }
  .slots[open] > summary svg { transform: rotate(180deg); }
  .slots__list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
  .slot {
    min-width: 0;                     /* boucle 2 : même règle sur les 4 pages */
    padding: var(--space-3);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .slot__id { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--accent); }
  .slot__meta { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
  .slot__meta b { color: var(--ink); font-weight: 600; }
  .slot__prompt {
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--soft);
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text);
    overflow-wrap: anywhere;
  }

  /* ---------- Scène épinglée « Pourquoi un générateur ? » ----------
     Les trois tuiles de la v3 entrent l'une après l'autre au défilement.
     Bureau : elles se rangent côte à côte. Sous 1024 px : elles se relaient
     dans la même case. Mouvement réduit : la scène se déplie, tout est visible. */
  .why .section-head { margin-bottom: var(--space-5); }
  .why__tiles { align-items: stretch; }
  /* Schéma navigateur → cadenas : il se trace quand sa tuile entre. */
  .diagram > * { stroke-dasharray: 1; stroke-dashoffset: 0; }
  .has-scroll .why .tile .diagram > * {
    transition: stroke-dashoffset .7s var(--scroll-ease) calc(150ms + var(--d, 0) * 90ms);
  }
  .has-scroll .why:not(.is-static) .tile:not(.is-active) .diagram > * { stroke-dashoffset: 1; }
  @media (min-width: 901px) {
    .why { --scene-top: 64px; }
    .why .scene__sticky { height: calc(100vh - 64px); height: calc(100svh - 64px); }
  }
  /* dernière passe (M13) : au téléphone, la scène épinglée centrait son contenu dans
     l'écran : ~200 px de blanc après « Copie en un clic ». Contenu calé en haut. */
  @media (max-width: 720px) {
    .why:not(.is-static) .scene__sticky { justify-content: flex-start; padding-top: var(--space-6, 48px); }
  }
  @media (max-width: 1024px) {
    .why:not(.is-static) .why__tiles {
      grid-template-columns: minmax(0, 1fr);
      max-width: 560px;
    }
    .why:not(.is-static) .why__tiles > .tile { grid-area: 1 / 1; }
    .has-scroll .why.is-step-1:not(.is-static) .why__tiles > .tile:nth-child(1),
    .has-scroll .why.is-step-2:not(.is-static) .why__tiles > .tile:nth-child(-n+2) {
      opacity: 0;
      transform: translate3d(0, -16px, 0);
      pointer-events: none;
    }
  }
  /* Bureau : les trois tuiles sont toujours là. Celles qui n'ont pas encore
     leur tour restent à 35 %, sans déplacement ; la grille est complète. */
  @media (min-width: 1025px) {
    .has-scroll .why:not(.is-static) .why__tiles > .tile:not(.is-active) {
      opacity: .35;
      transform: none;
    }
  }
  /* Écrans bas : on resserre le visuel, jamais le texte. Si l'ensemble ne
     tient toujours pas dans l'écran, le script déplie la scène (.is-static,
     tuiles empilées comme en v3) au lieu de masquer quoi que ce soit. */
  @media (max-height: 820px) {
    .why:not(.is-static) .section-head { margin-bottom: var(--space-3); }
    .why:not(.is-static) .tile__stage { min-height: 88px; margin-bottom: var(--space-2); padding: 12px; }
    .why:not(.is-static) .diagram { max-width: 170px; }
    .why:not(.is-static) .tile__foot { padding-top: var(--space-1); }
  }
  .samples-wrap { padding-bottom: var(--section-y); }
  .samples-wrap .samples { margin-top: 0; }

  /* ---------- Réglages responsives propres à la page ---------- */
  @media (max-width: 1024px) {
    .moment__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  }
  /* v3.3 — tablette (721–1024 px) : plus de grille « 2 + 1 » avec un trou à droite. */
  @media (min-width: 721px) and (max-width: 1024px) {
    /* Habitudes : trois colonnes, textes courts. */
    .grid-3.habits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
    /* Scène « Pourquoi » dépliée (mouvement réduit, écran bas) : la 3e tuile prend la largeur. */
    .why.is-static .why__tiles > .tile:nth-child(3) { grid-column: 1 / -1; }
    /* Guides : la 3e carte prend la largeur, couverture à gauche, texte à droite. */
    #guides .grid-3 > .guide-card:nth-child(3) { grid-column: 1 / -1; flex-direction: row; }
    #guides .grid-3 > .guide-card:nth-child(3) .guide-card__cover {
      flex: 0 0 50%;
      width: 50%;
      height: auto;
      aspect-ratio: auto;
      border-bottom: 0;
      border-right: 1px solid var(--line);
    }
  }
  @media (max-width: 900px) {
    .nav--centered { position: static; }
    /* Faits « Vos données » : une carte par ligne (en trois colonnes, 5 lignes de texte chacune à 768 px). */
    .facts.facts--3 { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 720px) {
    .hero { padding-block: var(--space-4) var(--space-5); }
    .hero__head .h1 { font-size: 34px; }
    .gen { padding: var(--space-2); margin-top: var(--space-3); }
    .gen__top { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .tabs { width: 100%; }
    .tabs button { flex: 1; padding: 0 6px; font-size: 14px; }
    .strength { justify-content: space-between; }
    .strength__track { flex: 1; width: auto; max-width: 160px; }
    .secret { min-height: 88px; font-size: 22px; }
    .gen__actions { flex-direction: column; }
    .gen__actions .btn { width: 100%; }
    /* dernière passe (M4) : le curseur suit « Longueur 18 » sans creux (il était à ~50 px) */
    .range-row { flex-wrap: wrap; row-gap: 0; }
    .range-row input[type="range"] { flex: 1 1 100%; order: 3; margin-top: -6px; }
    .range-row output { margin-left: auto; }
    .gen__note { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
    /* v3.3 (reprise) : deux phrases sur deux lignes (« … envoyé à / Belentia » restait
       en fin de ligne) ; le point médian n'a plus d'objet. */
    .gen__note-text > span { display: block; }
    .gen__note-text > .gen__note-sep { display: none; }
    .guarantees ul { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .editorial { display: flex; flex-direction: column; }
    .editorial__media { order: -1; }
    .facts { grid-template-columns: minmax(0, 1fr); }
    .kpis { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .moment { padding: var(--space-3); }
    /* Comparatif : une seule colonne à la fois, pilotée par la bascule */
    .compare { grid-template-columns: minmax(0, 1fr); }
    .compare__col[data-on="false"] { display: none; }
    .tour-app__head { flex-direction: column; align-items: flex-start; gap: 2px; }
    .tour-histo { flex-direction: column; align-items: flex-start; gap: 2px; }
    .tour-secret { font-size: 15px; }
    .scramble { grid-template-columns: repeat(6, 24px); }
    .scramble span { width: 24px; height: 32px; font-size: 15px; }
    /* Les cinq profils tiennent sur une ligne à 390 px (« PIN » passait seul dessous). */
    .moments [data-autocycle] { gap: 0; flex-wrap: nowrap; }
    .moments [data-autocycle] [role="tab"] { padding-inline: 10px; font-size: 14px; }
  }
  /* v3.3 : la bascule du comparatif tient dans l'écran jusqu'à 360 px (elle
     débordait de 9 px à 360 depuis la v3.1). */
  @media (max-width: 400px) {
    .switcher { display: flex; width: 100%; }
    .switcher button { flex: 1 1 auto; padding: 0 10px; font-size: 14px; }
  }
  /* Boucle 3, correction — téléphones de 341 à 380 px (Android 360) : le
     contrôle « Mot de passe / Phrase de passe / Code PIN » débordait de 9,5 px à
     360 (« Code PIN » sur le filet droit), le secret de 18 caractères du héros et
     celui de la tuile « Trois formats » laissaient un caractère seul à la ligne. */
  @media (max-width: 380px) {
    .tabs { gap: 2px; padding: 3px; }
    .tabs button { padding: 0 4px; font-size: 13px; }
    .secret { font-size: 20px; }
    .formats div { gap: 8px; padding-inline: 8px; }
    .formats code { font-size: 12px; }
  }
  /* Sous 360 px, la tuile ne tient plus un secret de 18 caractères à côté de son
     libellé : le libellé passe au-dessus du secret, sur toute la largeur. */
  @media (max-width: 359px) {
    .formats div { flex-wrap: wrap; row-gap: 2px; }
    .formats code { flex-basis: 100%; }
  }
  @media (max-width: 340px) {
    /* 320 px : le secret de 18 caractères tient encore sur une ligne. */
    .secret { padding-inline: var(--space-2); font-size: 18px; }
    .switcher button { white-space: normal; line-height: 1.2; }
    .tabs button { padding: 0 4px; font-size: 13px; white-space: normal; line-height: 1.15; }
    .moments [data-autocycle] [role="tab"] { padding-inline: 7px; font-size: 13px; }
  }