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

  /* =========================================================================
     Mot de passe by Belentia — même socle que A.html (v2).
     Couleur de l'outil : orange #F97316 (survol #EA580C).
     ====================================================================== */
  /* ---- Jetons de l'outil : orange #F97316 ---- */
  :root {
    --accent: #F97316;
    --accent-ink: #FFFFFF;
    --accent-hover: #EA580C;
    --symbol: #4B5A75;                 /* symboles du secret affiché */
    --mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  }

  /* ---- Nav centrée : marque | liens centrés | EN ---- */
  .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; }
  }

  /* Boutons secondaires, eyebrows, chips : voir _assets/motdepasse/affine.css (v3 affinée). */

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



  /* ---- 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 : l'élément de grille ne s'élargit plus au chemin le plus long */
    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;          /* boucle 2 : chemins de fichiers longs (débordaient à 444 px une fois ouverts) */
  }
  .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;
  }

  /* ---------- En-tête de l'article ---------- */
  .art-head { padding-block: var(--space-8) 0; }
  .art-head__inner { max-width: 720px; margin-inline: auto; }
  .art-head__inner > * + * { margin-top: var(--space-2); }
  .art-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
  }
  .art-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }

  /* La couverture prend la largeur de la colonne de texte (boucle 2). Boucle 3 :
     nouvelle photo 1800 × 1200 (cinq clés, une par crochet, sur un mur orange
     vif, rangée un peu à droite du centre) ; le cadrage 5:4 calé à droite la
     ramène au centre (1 500 px de source pour 720 px affichés : net en @2). */
  .art-cover { max-width: calc(720px + 2 * var(--gutter)); margin: var(--space-6) auto 0; }
  .art-cover img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 100% 50%; }
  /* Boucle 3, correction : pas de filet gris autour de la couverture orange (halo
     gris bleuté dans les coins arrondis) ; même rayon, fond orange de la photo
     tant qu'elle charge. */
  .art-cover .frame { border: 0; background: #FA6605; }
  .art-cover figcaption { margin-top: var(--space-1); font-size: 14px; color: var(--muted); }

  /* ---------- Corps typographié, colonne de 720 px ---------- */
  .prose { max-width: 660px; margin-inline: auto; padding-block: var(--space-8) var(--space-6); }
  /* Boucle 9,5 : ligne d'environ 70 signes ; corps en retour à la ligne normal (text-wrap: pretty cassait
     les paragraphes trop tôt dans Safari), pretty réservé aux textes courts. */
  .prose p, .prose li, .prose blockquote { text-wrap: wrap; }
  .prose > * + * { margin-top: var(--space-3); }
  .prose p { font-size: 18px; line-height: 1.7; color: var(--text); }
  .prose h2 { font-size: 26px; margin-top: var(--space-8); }
  .prose h2 + p { margin-top: var(--space-2); }
  .prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .prose .btn { text-decoration: none; }
  .prose ul { display: grid; gap: var(--space-1); }
  .prose ul li {
    position: relative;
    padding-left: var(--space-3);
    font-size: 18px;
    line-height: 1.7;
  }
  .prose ul li::before {
    content: "";
    position: absolute;
    left: 2px; top: 13px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
  }
  .prose blockquote {
    padding: var(--space-3);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink);
  }

  /* Contre-vérification v33 : téléphone du kit dans le corps de l'article */
  .art-device { margin: var(--space-6) auto; text-align: center; }
  .art-device .dv--phone { --dv-w: 240px; margin-inline: auto; }
  .art-device figcaption { margin-top: var(--space-3); font-size: 15px; color: var(--muted); }
  .art-device .dv__view { background: #FFFFFF; }
  /* ---------- Encadré « Passer à la pratique » ---------- */
  .practice {
    margin-top: var(--space-8);
    padding: var(--space-4);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .practice > * + * { margin-top: var(--space-2); }
  /* v3.3 (reprise) : le titre de l'encadré suit son eyebrow (la règle .prose h2
     lui donnait 88 px d'écart, contre 16 px partout ailleurs). */
  .prose .practice h2 { margin-top: var(--space-2); }
  .practice .actions { margin-top: var(--space-3); }

  /* ---------- Maillage ---------- */
  .related { max-width: 720px; margin: var(--space-6) auto 0; padding-bottom: var(--space-8); }
  .related__title { font-size: 15px; font-weight: 600; color: var(--muted); }
  .related ul { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
  .related a { font-weight: 600; }

  /* Boucle 2 : les deux cartes « Pour continuer » occupent tout le conteneur,
     comme la même grille sur le blog ; elles s'alignent sur leur titre (à 1440,
     elles allaient de 240 à 1200 px sous un titre posé à 144 px). */
  /* v3.3 (reprise) : accroches des guides en entier, comme sur l'accueil et le
     blog (le socle les coupait à une ligne avec « … ») ; « Lire le guide »
     reste aligné en bas des deux 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; }

  @media (max-width: 720px) {
    .prose p, .prose ul li { font-size: 17px; }
    .prose h2 { font-size: 23px; }
    /* le point de séparation restait orphelin en fin de ligne */
    .art-meta__dot { display: none; }
  }

  /* ---- v3 : jetons partagés avec l'accueil ---- */
  :root {
    --accent-6: color-mix(in srgb, var(--accent) 6%, #FFF);
    --accent-line: color-mix(in srgb, var(--accent) 40%, #FFF);
  }
  @supports not (color: color-mix(in srgb, #000 6%, #fff)) {
    :root { --accent-6: #FEF5EE; --accent-line: #FBC9A3; }
  }

  /* ---- v3 : nav collante et légèrement floutée, comme sur l'accueil ---- */
  .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);
  }
  @media (max-width: 900px) { .nav--centered { position: static; } }

  /* ---- v3 : strip « Les outils Belentia », identique sur les 4 pages ---- */
  .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; }
  /* dernière passe (M10) : méta sur une ligne au téléphone (« 3 min » seul sous 480 px) */
  @media (max-width: 480px) { .art-meta__long { display: none; } }

/* Portage : la prose Markdown est enveloppée dans .pm-prose (contrat de test) */
.prose .pm-prose > * + * { margin-top: var(--space-3); }
.prose .pm-prose > h2 { margin-top: var(--space-8); }
.prose .pm-prose + .practice { margin-top: var(--space-8); }
.art-crumbs { font-size: 14px; color: var(--muted); margin-bottom: var(--space-2); }
.art-crumbs a { color: var(--muted); text-decoration: none; }
.art-crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.guide-grid { margin-top: var(--space-4); }