/* Extrait de maquettes/motdepasse/blog.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; }

  /* v3.3 : accroches des guides en entier (le socle les coupait à une ligne
     avec « … ») ; « Lire le guide » reste aligné en bas des 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; }


  /* ---- Emplacement d'image à produire ---- */
  .slot-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: var(--space-3);
    background: #EEF0F4;
    border: 1px dashed #C9CDD6;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--muted);
    text-align: center;
  }

  /* ---- 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 du blog ---------- */
  .blog-head { padding-block: var(--space-8) var(--space-6); }
  .blog-head__inner { max-width: 720px; }
  .blog-head__inner > * + * { margin-top: var(--space-2); }

  /* ---------- Article à la une : image à gauche, texte à droite ---------- */
  .featured { align-items: center; }
  .featured__text > * + * { margin-top: var(--space-2); }
  .featured__text .actions { margin-top: var(--space-4); }
  /* Boucle 3 : nouvelle couverture (cinq clés, une par crochet, sur un mur
     orange vif ; la rangée est un peu à droite du centre dans l'image 3:2) :
     le cadrage 4:3 calé à droite la ramène au centre du cadre. */
  .featured__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 100% 50%; }
  /* Boucle 3, correction : pas de filet gris autour d'une couverture en couleur
     (dans les coins arrondis, il faisait un halo gris bleuté autour de l'orange) ;
     même rayon, fond orange de la photo tant qu'elle charge. Le filet reste sur
     les captures à fond blanc. */
  .frame.featured__media { border: 0; background: #FA6605; }
  .featured__meta { display: flex; flex-wrap: wrap; gap: var(--space-1); }

  /* ---------- Bandeau « Essayer » : surface douce, jamais sombre ---------- */
  /* Gris neutre #F7F8FA comme en v3 : la teinte 4 % reste réservée au bandeau final de l'accueil. */
  .try { text-align: center; background: var(--soft); }
  .try__inner { max-width: 640px; margin-inline: auto; }
  .try__inner > * + * { margin-top: var(--space-2); }
  .try__inner .actions { margin-top: var(--space-4); justify-content: center; }

  @media (max-width: 900px) {
    .featured__media { order: -1; }
  }

  /* ---- 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; }