/* =========================================================================
   GABARIT BLOG ET FIL SOCIAL, RENDU.

   Chargée uniquement sur les gabarits qui n'ont PAS de module 0 : article
   seul, archives, recherche. Sur une page Divi, ces mêmes classes sont
   peintes par `kit/socle.css` et par la feuille du DNA, qui vivent dans le
   module 0 et se chargent avant celle-ci.

   -------------------------------------------------------------------------
   ELLE DOIT ÊTRE COMPLÈTE, ET C'EST UNE LEÇON PAYÉE
   -------------------------------------------------------------------------

   La première version ne portait que le corps d'article, en supposant que le
   reste viendrait du socle. C'est faux, et c'est faux par construction : le
   socle vit DANS le module 0, et un article n'a pas de module 0. Mesuré le
   14 août 2026 sur le premier article publié :

     .dc-blog        display:block au lieu de grid, les cartes empilées
     h1              30 px et #333, la valeur par défaut de Divi

   Cette feuille reprend donc tout ce dont un gabarit hors Divi a besoin :
   charpente, typographie, cartes, boutons, fonds de section.

   -------------------------------------------------------------------------
   DEUX CONTRAINTES QUI DICTENT L'ÉCRITURE
   -------------------------------------------------------------------------

   1. AUCUNE COULEUR EN DUR. Tout passe par les jetons du client, servis par
      `jetons.css` copié à côté. La feuille est partagée par tous les sites.

   2. LE PRÉFIXE N'EST PAS CONNU ICI, le fichier étant partagé. Les sélecteurs
      s'accrochent donc aux classes internes, `.b-carte`, `.a-corps`, qui ne
      sont pas préfixées parce qu'elles vivent toujours à l'intérieur d'un
      conteneur préfixé. Même convention que les compositions de heros.
      `[class]` sert à gagner un cran de spécificité sur les règles nues de
      Divi, `h1,h2,h3{color:#333}` en particulier, sans quoi tous les titres
      d'article sortent en gris foncé sur fond noir.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Charpente

   `.wl-bloc` est posée par `gabarit-blog.php` sur le conteneur, EN PLUS du
   préfixe du client. Elle existe pour une seule raison : cette feuille est
   partagée et ne peut pas connaître le préfixe, alors que le conteneur doit
   être peint. Sur une page Divi c'est `socle.css` qui s'en charge, par la
   règle `.[PREFIXE]{color:…;background:…}`.

   Sans elle, le conteneur d'un article n'a aucune couleur propre et hérite
   du `#666` que Divi pose sur `body`. Mesuré : corps d'article en gris moyen
   sur fond noir, avec un H1 correct juste au-dessus.
   ------------------------------------------------------------------------- */
.wl-bloc{color:var(--encre);background:var(--fond);font-family:var(--corps);
  font-size:16px;line-height:1.65}
.wl-bloc a{color:inherit;text-decoration:none}
.wl-bloc p{margin:0}

[class] .sec{padding:clamp(56px,7vw,104px) 0}
[class] .wrap{max-width:1240px;margin:0 auto;
  padding-left:clamp(20px,4.5vw,72px);padding-right:clamp(20px,4.5vw,72px)}

/* La colonne de lecture. Un article se lit entre 62 et 72 signes par ligne ;
   au-delà l'œil perd la ligne suivante en revenant à la marge. */
[class] .wrap-lecture{max-width:820px}

/* Les trois fonds de `design.md` section 4. Le gabarit n'en peint que deux :
   le fond ordinaire vient du conteneur préfixé, que le socle a déjà peint. */
[class] .sec-alt{background:var(--fond-section);color:var(--encre-sur-clair,var(--encre))}
[class] .sec-sombre{background:var(--sombre);color:var(--sur-sombre,#fff)}

/* -------------------------------------------------------------------------
   2. Typographie

   Divi peint `h1` à `h6` en `#333` dans sa propre feuille, règle nue de
   spécificité 0,0,1. Sur un site à fond clair personne ne le remarque ; sur
   un fond sombre le titre disparaît. `[class] h1` monte à 0,1,1 et suffit.
   ------------------------------------------------------------------------- */
[class] h1,[class] h2,[class] h3,[class] h4{font-family:var(--titre);color:inherit}
[class] h1{font-size:clamp(30px,4.4vw,58px);font-weight:800;
  letter-spacing:-.035em;line-height:1.02;margin:0}
[class] .sec-sombre h1,[class] .sec-sombre h2{color:var(--sur-sombre,#fff)}
[class] .sec-alt h1,[class] .sec-alt h2,[class] .sec-alt h3{
  color:var(--encre-sur-clair,var(--encre))}

[class] .surtitre{font-family:var(--titre);font-weight:800;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-texte);
  display:flex;align-items:center;gap:10px;margin:0 0 16px}
[class] .surtitre::before{content:"";width:30px;height:3px;background:var(--accent);flex:none}
[class] .sec-alt .surtitre{color:var(--accent)}
[class] .chapo{color:var(--gris);font-size:17px;max-width:64ch;margin-top:14px}
[class] .sec-alt .chapo{color:var(--gris-sur-clair,var(--gris))}

/* -------------------------------------------------------------------------
   3. L'en-tête d'article
   ------------------------------------------------------------------------- */
.a-meta{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-family:var(--mono,ui-monospace,monospace);font-size:13px;
  letter-spacing:.04em;color:var(--sur-sombre-doux,#b5b5b5);margin-top:20px}
.a-duree::before{content:"";display:inline-block;width:5px;height:5px;
  background:var(--accent-sur-sombre,var(--accent));margin-right:10px;
  vertical-align:middle}

.a-une{margin:0}
.a-une img{display:block;width:100%;height:auto;max-height:62vh;object-fit:cover}

/* -------------------------------------------------------------------------
   4. Le corps d'article

   `the_content()` sort du HTML que personne ne préfixe : les titres, listes
   et citations d'un article sont écrits dans l'éditeur, pas par un gabarit.
   C'est le seul endroit du système où l'on peint des balises nues, et c'est
   pour cette raison qu'il est enfermé sous `.a-corps`.
   ------------------------------------------------------------------------- */
.a-corps{font-size:17px;line-height:1.72}
.a-corps>*+*{margin-top:1.15em}
.a-corps h2{font-size:clamp(23px,2.6vw,32px);font-weight:800;
  letter-spacing:-.03em;line-height:1.12;margin-top:1.9em}
.a-corps h3{font-size:clamp(18px,1.8vw,22px);font-weight:700;
  letter-spacing:-.02em;margin-top:1.6em}
.a-corps ul,.a-corps ol{padding-left:1.25em}
.a-corps li+li{margin-top:.5em}
.a-corps img{max-width:100%;height:auto}
.a-corps a{color:var(--accent-sur-sombre,var(--accent));text-underline-offset:3px}
.a-corps blockquote{margin:1.6em 0;padding:4px 0 4px 22px;
  border-left:4px solid var(--accent);font-size:19px;line-height:1.5}
.a-corps blockquote p{margin:0}
.a-corps figure{margin:1.6em 0}
.a-corps figcaption{font-size:13.5px;color:var(--gris);margin-top:8px}
.a-corps code{font-family:var(--mono,ui-monospace,monospace);font-size:.92em}

/* -------------------------------------------------------------------------
   5. La liste d'articles

   Reprise de la mécanique de `socle.css`, qui n'est pas chargée ici. Les
   deux doivent rester d'accord : une carte qui se présente autrement sur la
   page d'actualités et sous un article se remarque tout de suite.
   ------------------------------------------------------------------------- */
[class] .b-carte{display:flex;margin:0;background:var(--fond-carte,var(--fond));
  border:1px solid var(--bord-doux,var(--bord));border-radius:var(--rayon)}
[class] .sec-alt .b-carte{background:#fff;border-color:#DDD}
.b-lien{display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit}
.b-vue{overflow:hidden}
.b-img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.b-corps{display:flex;flex-direction:column;flex:1;gap:9px;padding:22px 24px 24px}
.b-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  font-family:var(--mono,ui-monospace,monospace);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin:0}
[class] .sec-alt .b-meta,[class] .sec-alt .b-chapo{color:var(--gris-sur-clair,var(--gris))}
.b-cat{color:var(--accent-sur-sombre,var(--accent));font-weight:600}
[class] .sec-alt .b-cat,[class] .sec-alt .b-fl{color:var(--accent)}
[class] .b-carte h3{font-size:19px;line-height:1.22;margin:0}
.b-chapo{color:var(--gris);font-size:15px;margin:0}
.b-fl{margin-top:auto;padding-top:6px;font-family:var(--titre);font-weight:800;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-sur-sombre,var(--accent))}
.b-lien:hover .b-fl{text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:2px}

/* La grille. `auto-fit` plutôt qu'un nombre fixe : la même règle sert la page
   d'actualités, où il y a six cartes, et le pied d'un article, où il y en a
   trois. Deux réglages pour un seul comportement seraient deux occasions de
   diverger. */
/* Le conteneur porte le préfixe du client, `dc-blog`, `pnf-blog`. Il se
   sélectionne donc par sa TERMINAISON, la seule partie que cette feuille
   partagée puisse connaître. */
[class] div[class$="-blog"]{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px;margin-top:38px}

/* -------------------------------------------------------------------------
   6. Le fil social
   ------------------------------------------------------------------------- */
[class] div[class$="-fil"]{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:38px}
.f-tuile{display:block;overflow:hidden;position:relative;
  outline:2px solid transparent;outline-offset:-2px;transition:.16s}
.f-tuile:hover{outline-color:var(--accent)}
.f-tuile img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}

/* -------------------------------------------------------------------------
   7. Boutons et pagination
   ------------------------------------------------------------------------- */
[class] .b-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
[class] .btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-weight:800;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;padding:15px 26px;border-radius:var(--rayon);
  border:2px solid transparent;text-decoration:none;transition:.18s}
[class] .btn-action{background:var(--accent);border-color:var(--accent);
  color:var(--sur-accent,#fff)}
[class] .btn-ligne{background:transparent;color:inherit;border-color:var(--bord)}
[class] .btn-ligne:hover{background:var(--encre);color:var(--fond)}

.a-pages{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px}
.a-pages .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 12px;border:1px solid var(--bord);
  border-radius:var(--rayon);font-weight:600;font-size:15px;text-decoration:none}
.a-pages .page-numbers.current,.a-pages .page-numbers:hover{
  background:var(--accent);border-color:var(--accent);color:var(--sur-accent,#fff)}
.a-pages .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%)}

@media(max-width:767px){
  [class] div[class$="-blog"]{grid-template-columns:1fr}
  [class] div[class$="-fil"]{grid-template-columns:repeat(3,1fr)}
}