/* Blog — pages de conseils. S'appuie sur site.css (nav, boutons, footer) et
   n'ajoute que ce qui est propre à la lecture d'un article long. */

  /* ── Index ────────────────────────────────────────────── */
  .blog-tete{ padding:70px 22px 40px; text-align:center; max-width:760px }
  .blog-tete h1{ margin-top:18px }
  .blog-tete .lead{ margin:18px auto 0; max-width:600px }

  /* ⚠ min(100%,300px) et non 300px. Sur un écran de 320 px, la colonne de
     22 px de marge de chaque côté ne laisse que 276 px : une piste de 300 px
     ne rentre pas, la grille dépassait, et la page entière se mettait à
     défiler de côté. `min()` laisse la piste se réduire quand la place manque,
     sans rien changer au-dessus de 344 px. */
  .cartes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:18px; margin:20px 0 60px }
  .carte{
    display:flex; flex-direction:column; gap:10px; padding:26px;
    background:linear-gradient(180deg,var(--bg-2),#101026);
    border:1px solid var(--line); border-radius:var(--radius);
    text-decoration:none; color:var(--text);
    transition:transform .2s ease, border-color .2s ease;
  }
  .carte:hover{ transform:translateY(-4px); border-color:rgba(155,140,255,.45) }
  .carte-t{ font-family:"Fredoka",sans-serif; font-weight:600; font-size:20px; line-height:1.2 }
  .carte-d{ color:var(--muted); font-size:14.5px; line-height:1.6; flex:1 }
  .carte-l{ color:var(--lav-bright); font-size:14px; font-weight:600 }

  /* ── Article ──────────────────────────────────────────── */
  .art{ max-width:780px; padding-top:34px; padding-bottom:80px }

  /* ⚠ LE FIL D'ARIANE EST UN <nav>, ET IL HÉRITAIT DE LA BARRE DU SITE
     (03/08/2026). site.css pose `nav{position:sticky; background; border-bottom;
     backdrop-filter}` pour l'en-tête — et ce sélecteur attrape TOUS les <nav>,
     donc celui-ci. Le fil s'affichait sur un bandeau gris translucide qui
     descendait avec le défilement, sur « à propos », les 25 articles et les 16
     pages d'âge. Personne ne l'avait vu parce qu'on ne regarde pas le haut
     d'une page qu'on vient d'écrire. La balise reste un <nav> — c'est ce que
     demande l'accessibilité pour un fil d'Ariane —, on désarme juste l'héritage. */
  .ariane{ font-size:13px; color:var(--muted-2); display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;
           position:static; background:none; border-bottom:0; backdrop-filter:none }
  .ariane a{ color:var(--muted); text-decoration:none }
  .ariane a:hover{ color:var(--lav-bright) }

  .art-tete{ margin-bottom:34px }
  .art-tete h1{ margin:18px 0 0; font-size:clamp(30px,5vw,46px) }
  .chapeau{ margin-top:20px; font-size:clamp(17px,2.3vw,20px); line-height:1.6; color:var(--text) }
  .signature{ margin-top:18px; font-size:13.5px; color:var(--muted-2) }
  /* Le lien vers « À propos » n'avait aucune règle : il sortait donc en bleu
     souligné du navigateur, sur les douze articles et la page À propos. */
  .signature a{ color:var(--lav-bright); text-decoration:none; border-bottom:1px solid rgba(155,140,255,.35) }
  .signature a:hover{ color:#fff; border-bottom-color:var(--lav-bright) }

  /* Sommaire : sur un article long, il donne la carte du terrain avant de partir. */
  .sommaire{
    background:var(--bg-2); border:1px solid var(--line); border-radius:18px;
    padding:22px 26px; margin-bottom:40px;
  }
  .sommaire-h{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--lav-bright); margin-bottom:12px }
  .sommaire ol{ margin:0; padding-left:20px; display:grid; gap:8px }
  .sommaire a{ color:var(--muted); text-decoration:none; font-size:15px }
  .sommaire a:hover{ color:var(--text) }

  /* Corps de texte : la mesure et l'interligne priment sur tout le reste. */
  .art-corps{ font-size:17px; line-height:1.8; color:var(--muted) }
  .art-corps h2{
    font-size:clamp(23px,3.2vw,30px); color:var(--text);
    margin:48px 0 16px; scroll-margin-top:90px;
  }
  .art-corps h3{ font-size:18px; color:var(--text); margin:24px 0 10px }
  .art-corps p{ margin:0 0 18px }
  .art-corps b{ color:var(--text) }
  .art-corps a{ color:var(--lav-bright); text-decoration:none; border-bottom:1px solid rgba(155,140,255,.4) }
  .art-corps a:hover{ color:#fff }
  .art-corps ul,.art-corps ol{ margin:0 0 20px; padding-left:22px; display:grid; gap:10px }
  .art-corps li{ padding-left:4px }

  /* Une phrase qu'on veut voir même en diagonale. */
  .encadre{
    border-left:3px solid var(--lav); background:rgba(155,140,255,.08);
    padding:16px 20px; border-radius:0 14px 14px 0; color:var(--text);
  }

  .echelle{ counter-reset:none }
  .echelle li{ margin-bottom:2px }

  /* Tableau : il doit défiler seul sur mobile, jamais faire déborder la page.

     Ces règles portaient sur `.art-corps table`, c'est-à-dire sur le seul corps
     d'article. Les tableaux des pages d'âge vivent ailleurs — les repères sont
     au-dessus du sommaire, et le tableau complet du sommaire n'est dans aucun
     corps d'article : ils sortaient donc entièrement nus, sans marge, sans
     séparateur, avec des liens bleus soulignés au milieu du reste du site.
     On accroche maintenant les styles à `.tableau-scroll`, qui est l'enveloppe
     que TOUS les tableaux du site portent déjà — un tableau ne peut plus
     apparaître quelque part sans être habillé. */
  /* ⚠ LE TABLEAU DÉFILE, ET RIEN NE LE DISAIT. À 390 px, un tableau de 520 px
     se coupe net au bord droit : sur un téléphone il n'y a pas de barre de
     défilement, donc la dernière colonne — « Sommeil de nuit », celle qu'on
     vient chercher — n'existait pas pour la lectrice.
     Les quatre couches sont le procédé habituel, et l'ordre compte : les deux
     dégradés `local` défilent AVEC le contenu et viennent recouvrir les deux
     ombres `scroll`, qui, elles, restent collées aux bords. Résultat, l'ombre
     ne se voit que du côté où il reste quelque chose à faire défiler. */
  .tableau-scroll{ overflow-x:auto; margin:0 0 24px; border:1px solid var(--line); border-radius:16px;
    background:
      linear-gradient(to right, var(--bg) 40%, rgba(11,11,22,0)) left / 28px 100% no-repeat local,
      linear-gradient(to left,  var(--bg) 40%, rgba(11,11,22,0)) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(155,140,255,.55), rgba(155,140,255,0)) left / 22px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(155,140,255,.55), rgba(155,140,255,0)) right / 22px 100% no-repeat scroll;
  }
  .tableau-scroll table{ border-collapse:collapse; width:100%; min-width:520px; font-size:15px }
  .tableau-scroll th,.tableau-scroll td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line) }
  .tableau-scroll th{ background:rgba(155,140,255,.10); color:var(--text); font-weight:600; font-size:13.5px }
  .tableau-scroll tbody tr:last-child td{ border-bottom:0 }
  .tableau-scroll td:first-child{ color:var(--text); font-weight:600; white-space:nowrap }
  .tableau-scroll a{ color:var(--lav-bright); text-decoration:none; border-bottom:1px solid rgba(155,140,255,.4) }
  .tableau-scroll a:hover{ color:#fff }

  .deux-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px }
  .col-ok,.col-ko{ padding:20px 22px; border-radius:16px; border:1px solid var(--line) }
  .col-ok{ background:rgba(120,230,170,.07); border-color:rgba(120,230,170,.25) }
  .col-ko{ background:rgba(245,163,199,.07); border-color:rgba(245,163,199,.25) }
  .col-ok h3{ color:#BFF3D8; margin-top:0 }
  .col-ko h3{ color:#F7B7D2; margin-top:0 }
  .deux-col ul{ margin-bottom:0; font-size:15px }

  /* ── À retenir ────────────────────────────────────────── */
  .retenir{
    margin:50px 0 0; padding:28px 30px; border-radius:20px;
    background:linear-gradient(180deg, rgba(155,140,255,.14), rgba(124,107,238,.05));
    border:1px solid rgba(155,140,255,.32);
  }
  .retenir h2{ font-size:20px; margin:0 0 14px }
  .retenir ul{ margin:0; padding-left:20px; display:grid; gap:10px; color:var(--text); font-size:15.5px; line-height:1.6 }

  /* ── Sécurité : jamais décoratif, toujours visible. ───── */
  .secu{
    margin:34px 0 0; padding:28px 30px; border-radius:20px;
    background:rgba(245,163,199,.06); border:1px solid rgba(245,163,199,.30);
  }
  .secu h2{ font-size:20px; margin:0 0 12px; color:#F7B7D2 }
  .secu p{ color:var(--muted); font-size:15.5px; line-height:1.7; margin:0 0 14px }
  .secu ul{ margin:0 0 14px; padding-left:20px; display:grid; gap:9px; color:var(--muted); font-size:15.5px; line-height:1.6 }
  .secu b{ color:var(--text) }
  .secu-note{ font-size:14px !important; color:var(--muted-2) !important; margin:0 !important }

  /* ── Appel à l'action : après la valeur, jamais avant. ── */
  .cta-article{
    margin:50px 0 0; padding:38px 34px; border-radius:24px; text-align:center;
    background:linear-gradient(180deg,#171634,#101026);
    border:1px solid rgba(155,140,255,.35);
    box-shadow:0 30px 70px -24px rgba(80,60,200,.55);
  }
  .cta-article h2{ font-size:clamp(22px,3vw,28px); margin:16px 0 14px }
  .cta-article p{ color:var(--muted); font-size:16px; line-height:1.7; max-width:560px; margin:0 auto 24px }
  .cta-sub{ font-size:13.5px !important; color:var(--muted-2) !important; margin:16px auto 0 !important }

  /* ── FAQ + articles liés ──────────────────────────────── */
  .art-faq{ margin-top:56px }
  .art-faq h2{ margin-bottom:18px }
  .lies-wrap{ margin-top:56px }
  .lies-wrap h2{ margin-bottom:18px }
  .lies{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
  .lie{
    display:flex; flex-direction:column; gap:8px; padding:22px;
    background:var(--bg-2); border:1px solid var(--line); border-radius:18px;
    text-decoration:none; transition:border-color .2s ease, transform .2s ease;
  }
  .lie:hover{ border-color:rgba(155,140,255,.45); transform:translateY(-3px) }
  .lie-t{ font-family:"Fredoka",sans-serif; font-weight:600; font-size:17px; color:var(--text) }
  .lie-d{ font-size:14px; color:var(--muted-2); line-height:1.55 }

  @media(max-width:720px){
    .deux-col, .lies{ grid-template-columns:1fr }
    .art{ padding-top:24px }
    .retenir, .secu, .cta-article{ padding:24px 20px }
    .sommaire{ padding:18px 20px }
  }

  /* ── Photos ───────────────────────────────────────────────
     Les photos d'origine n'ont pas le même style : certaines en noir et blanc,
     d'autres en couleur chaude ou pastel. Plutôt que de retoucher chaque fichier,
     on les uniformise ICI : désaturation + teinte violette de la marque, posée en
     surimpression. Le rendu est identique pour toutes, quelle que soit la photo —
     et une nouvelle image entre dans le style sans aucune retouche. */
  .art-photo, .carte-img{
    position:relative; display:block; margin:0; overflow:hidden;
    background:#0E0D1E;
  }
  .art-photo{ border-radius:22px; margin:0 0 40px; border:1px solid var(--line) }
  .carte-img{ border-radius:14px; margin-bottom:4px }

  .art-photo img, .carte-img img{
    display:block; width:100%; height:100%; object-fit:cover;
    aspect-ratio:3/2;
    filter:grayscale(1) contrast(1.06) brightness(.82);
  }

  /* La teinte : violet nuit en surimpression, plus dense en bas pour que le texte
     qui suit s'y raccroche sans rupture. */
  .art-photo::after, .carte-img::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(160deg, rgba(155,140,255,.34), rgba(109,92,224,.20) 45%, rgba(11,11,22,.62));
    mix-blend-mode:screen;
  }
  .art-photo::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, transparent 55%, rgba(11,11,22,.55));
  }

  .carte-img img{ aspect-ratio:16/9 }

  /* Un portrait n'entre pas dans la bande 3/2 des photos d'article : il y serait
     étiré et rogné au front et au menton. Il garde donc son propre format. */
  .art-portrait{ margin:0 0 40px; text-align:center }
  .art-portrait img{
    width:200px; height:200px; border-radius:50%; object-fit:cover;
    border:2px solid rgba(155,140,255,.35); box-shadow:var(--glow);
  }
  .art-portrait figcaption{ margin-top:14px; font-size:14px; color:var(--muted-2) }

  @media(max-width:720px){
    .art-photo{ border-radius:16px; margin-bottom:28px }
  }