/* ============================================================
   dentaire365 — Home (maquette fidèle au PDF)
   Desktop ~1366px. Titres serif, labels sans-serif.
   ============================================================ */

/* Variables héritées du prototype, repointées sur les design tokens
   (cf. tokens.css et dentaire365-implementation.md §1). Elles ne portent plus
   aucune valeur : elles ne sont conservées que le temps de migrer les ~1500
   règles ci-dessous vers les noms de la spéc. Ne rien ajouter ici. */
:root{
  --navy:var(--c-encre);
  --navy-2:var(--c-encre);
  --navy-deep:var(--c-nuit);
  /* Rouge du logo. Il ne suit pas l'univers actif : le module Topics ne
     surcharge que `primary` et `accent`, jamais `secondary`. Il devient en
     revanche propre à chaque site, qui déclare sa palette de marque depuis
     son `site-config.php` (CLAUDE.md §6). Emplacement vide = logo noir. */
  --brand-red:var(--wp--preset--color--secondary);
  --red:var(--c-rouge);     /* accent = couleur de l'univers actif (Omni rouge / Ortho bleu) */
  --red-soft:var(--c-rouge-h);
  --yellow:var(--c-jaune);
  --ink:var(--c-texte);
  --meta:var(--c-texte-doux);
  --line:var(--c-filet);
  --line-2:var(--c-filet-fort);
  --ph:var(--c-filet-fort);  /* placeholders : provisoires, cf. §8 (contenus réels à importer) */
  --ph-2:var(--c-filet);
  --ad-ink:var(--c-texte-doux);
  --bg:var(--c-papier);
  --gold:var(--c-jaune);     /* À ARBITRER en §5 : le jaune est réservé au parcours abonnement */
  --maxw:var(--largeur-max);
  --serif:var(--font-texte);
  --sans:var(--font-titre);
}

*{box-sizing:border-box;}

/* Largeur de rail unique : --largeur-max (1440px, §1.1). L'ancien palier
   1340 -> 1440 à partir de 1560px de viewport est supprimé (décision 27/07). */
html,body{margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--largeur-max);margin:0 auto;padding-inline:var(--marge-laterale);}
a{color:inherit;text-decoration:none;}
img{display:block;}

/* ============== §4.1 — IMAGES ==============
   Ratio de référence 1000×550. Recadrage par `cover`, sujet centré, jamais de
   déformation. Rayon --r-image sur toutes les images du site ; les conteneurs
   qui doivent rester à angles vifs (visuel pleine largeur d'un panneau) le
   redéclarent avec un sélecteur plus spécifique. */
.img,.thumb,.cover{border-radius:var(--r-image);overflow:hidden;}
.img img,.thumb img,.cover img,.vthumb img,.hero-card .img img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}

/* ---------- placeholders ---------- */
.ph{
  position:relative;
  border-radius:var(--r-image);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, rgba(0,0,0,.03) 10px 20px),
    var(--ph);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);
  font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  font-size:max(var(--fs-min,0px),11px);letter-spacing:.04em;
  overflow:hidden;
}
.ph::after{content:attr(data-label);opacity:.9;}
/* Les emplacements publicitaires ne portent aucun fond : la créative arrive
   avec le sien, et le gabarit vide doit rester transparent sur la page. */
.ad{
  background:none;
  color:var(--ad-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-align:center;
}
.ad b{font-family:var(--serif);font-weight:700;letter-spacing:.14em;font-size:15px;color:#4d525c;}
.ad span{font-size:max(var(--fs-min,0px),11px);color:#6b7079;letter-spacing:.02em;}

/* ---------- generic bits ---------- */
/* §5.2 — sur-titre, collé au titre (--e-surtitre-titre). */
.kicker{
  font-family:var(--font-titre);font-size:var(--fs-surtitre);font-weight:700;
  letter-spacing:var(--ls-surtitre);text-transform:uppercase;
  color:var(--c-rouge);margin:0 0 var(--e-surtitre-titre);
}
/* §2.1 — folio : date · auteur · rubrique. */
.meta{
  font-family:var(--font-texte);font-size:var(--fs-folio);line-height:var(--lh-folio);
  color:var(--c-texte-doux);letter-spacing:.01em;margin-top:var(--e2);
}
.meta .sep{color:var(--c-rouge);}
/* Sur fond sombre le séparateur rouge n'est plus lisible (2,88:1). */
.videos .meta .sep,.hero-card .meta .sep,.sv-meta .sep{color:var(--c-nuit-folio);}
.sq{display:inline-block;width:9px;height:9px;background:var(--gold);margin-right:6px;vertical-align:baseline;transform:translateY(1px);}
/* §2.1 — les titres sont en titrage (Libre Franklin), pas en serif. */
/* Les titres ne se coupent jamais en plein mot : `break-word` vient de la
   feuille de styles globale de WordPress. On garde le filet de sécurité pour
   les chaînes sans espace (URL), mais un mot normal passe à la ligne. */
.art-title,.hero-card h3,.feature h3,.vcard h3,.ann h3,
.enbref .row p,.pluslus .t,.sec-head h2{
  overflow-wrap:break-word;word-break:normal;
  /* Césure française plutôt que coupure arbitraire quand un mot long ne tient
     pas dans une colonne étroite (« recommanda-tions », pas « recommandatio
     ns »). Le document est en `lang="fr-FR"`, le navigateur sait où couper. */
  hyphens:auto;
}
.art-title{font-family:var(--font-titre);font-weight:700;color:var(--c-encre);
  font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);letter-spacing:-.005em;margin:0;}
/* §2.1 — chapô : serif, rapproché du titre. */
.art-text{font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);
  color:var(--c-texte);margin:var(--e2) 0 0;}

/* ============== §5.1 — EN-TÊTE DE RUBRIQUE ==============
   marqueur rouge → titre → filet extensible → bouton « tout voir ».
   Le filet est un pseudo-élément de `.sec-head` placé par `order` : il relie le
   titre au bouton sans exiger de markup supplémentaire. Il ne sépare jamais
   deux articles d'une liste. */
.sec-head{display:flex;align-items:center;gap:var(--e3);margin:0 0 var(--e7);}
.sec-head .bar{width:26px;height:3px;background:var(--c-rouge);flex:none;}
.sec-head h2{
  font-family:var(--font-titre);font-size:var(--fs-rubrique);line-height:var(--lh-rubrique);
  font-weight:400;letter-spacing:var(--ls-rubrique);
  text-transform:uppercase;color:var(--c-encre);margin:0;
}
/* Le trait file jusqu'au bord de la section : la pilule « Tout voir » qui
   l'arretait a ete retiree, le titre portant deja le meme lien.
   Une pilule qui subsisterait, dans un rendu non encore repris, garde son
   rang APRES le trait : sans ce garde-fou elle se rangeait juste apres le
   titre, au milieu de la tetiere. */
.sec-head::after{
  content:"";order:1;flex:1;height:1px;background:var(--c-filet);
}
.sec-head .more{order:2;}
/* Recette du 2026-09-29 (U-04) : sur telephone, un titre long a cote de la
   pilule « Toutes les videos » se cassait en trois lignes (« VIE DE /
   L'INDUS- / TRIE »). La pilule passe sous le titre, le titre garde la ligne
   et ne se coupe plus en syllabes. */
@media (max-width:600px){
  .sec-head:has(.more){flex-wrap:wrap;row-gap:var(--e3);}
  .sec-head .more{order:3;flex:1 0 100%;}
  .sec-head h2{min-width:0;hyphens:manual;overflow-wrap:normal;}
}

/* §5.3 — étiquette unique du site : fond rouge, texte blanc. Le libellé est
   libre en administration (« À la une », « Masterclass », « En direct de
   l'ADF »…). Jamais utilisée pour une mention d'annonceur (§5.2). */
.tab{
  display:inline-flex;align-items:center;height:24px;padding:0 11px;
  font-family:var(--font-titre);font-size:max(var(--fs-min,0px),11px);font-weight:700;letter-spacing:var(--ls-etiquette);
  text-transform:uppercase;color:var(--c-papier);background:var(--c-rouge);
  border-radius:var(--r-etiquette);
}
.tab--red{background:var(--c-rouge);}

/* §6.9 — « Annonces susceptibles de vous intéresser » : minuscules, sans filet
   rouge, dans un cadre tramé. */
/* ANN-12 remplace le cadre trame par les codes de la poursuite de lecture :
   filet rouge en tete, filet gris en pied, intitule en etiquette. */
.sa-related{background:none;border-radius:0;padding:0 0 var(--e5);margin-top:var(--e8);border-bottom:1px solid var(--c-filet);}
.sa-related .sa-related-h{margin-top:0;}

/* §6.9 — titre d'annonce tronqué au-delà de deux lignes, partout où il paraît. */
.an-grid .it h3,
.sa-related .it h3,
.ann h3{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* §6.13 — fiche événement : visuel à gauche, informations à droite. */
.ev-single .ev-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--e7);align-items:start;padding:var(--e6) 0 var(--e7);}
.ev-single .ev-visuel{border-radius:var(--r-image);overflow:hidden;aspect-ratio:1000/550;background:var(--c-trame);}
.ev-single .ev-img{width:100%;height:100%;object-fit:cover;display:block;}
.ev-single .ev-type{margin:0 0 var(--e-surtitre-titre);}
.ev-single .ev-titre{font-family:var(--font-titre);font-size:var(--fs-une);line-height:var(--lh-une);
  font-weight:700;color:var(--c-encre);margin:0 0 var(--e5);}
.ev-single .ev-ligne{display:flex;align-items:center;gap:var(--e2);margin:0 0 var(--e3);
  font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);color:var(--c-texte);}
.ev-single .ev-ico{width:19px;height:19px;flex:none;color:var(--c-rouge);}
.ev-single .ev-desc{padding-bottom:var(--e9);}
@media (max-width:767px){
  .ev-single .ev-head{grid-template-columns:1fr;gap:var(--e5);}
}

/* §6.7 — accroche des offres Jeunes : remontée, « ici. » en rouge. */
.abon-hero{padding-top:var(--e6);}
.abon-kicker{font-family:var(--font-titre);font-size:var(--fs-une);line-height:var(--lh-une);
  font-weight:700;color:var(--c-encre);margin:0 0 var(--e4);}
.abon-kicker-accent{color:var(--c-rouge);}

/* §6.13 — Masterclass : arrondis sur les panneaux gris et bleu foncé, mention
   de soutien sur deux lignes. */
.mc-row{border-radius:var(--r-bloc);overflow:hidden;}
.mc-row,.mc-card,.mc-logocard{border-radius:var(--r-bloc);}
.mc-spon-k span{display:block;}
.mc-spon-k{font-family:var(--font-titre);font-size:var(--fs-folio);line-height:var(--lh-folio);
  color:var(--c-texte-doux);text-transform:uppercase;letter-spacing:.04em;}

/* §6.11 — fiche exposant : une seule colonne pleine largeur (la sidebar droite
   est retirée du gabarit), et les contenus liés passent à 4 de front. */
.fiche-grid{max-width:var(--largeur-max);margin-inline:auto;
  padding:var(--e6) var(--marge-laterale) var(--e2);}
.fiche-grid > .center{min-width:0;display:flex;flex-direction:column;gap:30px;}
.fiche-grid .cards-ga,
.fiche-grid .exp-related{grid-template-columns:repeat(4,1fr);}
@media (max-width:1063px){
  .fiche-grid .cards-ga,
  .fiche-grid .exp-related{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .fiche-grid .cards-ga,
  .fiche-grid .exp-related{grid-template-columns:1fr;}
}

/* §6.4 — images de contenu de l'article : 50 % de la largeur de colonne,
   centrées, légende ferrée à gauche, crédit photo en dessous en corps léger. */
.prose figure,
.prose .wp-block-image{
  width:50%;
  margin-inline:auto;
  margin-block:var(--e7);
}
.prose figure img,
.prose .wp-block-image img{
  width:100%;height:auto;border-radius:var(--r-image);
}
.prose figcaption{
  font-family:var(--font-texte);font-size:var(--fs-folio);line-height:var(--lh-folio);
  color:var(--c-texte-doux);text-align:left;margin-top:var(--e2);
}
.prose figcaption .credit,
.prose figcaption cite{
  display:block;font-size:max(var(--fs-min,0px),11px);font-style:normal;color:var(--c-texte-doux);opacity:.85;margin-top:2px;
}
/* En colonne étroite, une image à 50 % devient illisible : elle reprend toute
   la largeur. */
@media (max-width:767px){
  .prose figure,
  .prose .wp-block-image{width:100%;}
}

/* §6.4 — inter-titres hiérarchisés dans le corps d'article. */
.prose h2{font-family:var(--font-titre);font-size:var(--fs-titre-l);line-height:var(--lh-titre-l);
  font-weight:700;color:var(--c-encre);margin:var(--e8) 0 var(--e3);}
.prose h3{font-family:var(--font-titre);font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);
  font-weight:700;color:var(--c-encre);margin:var(--e7) 0 var(--e3);}
.prose h4{font-family:var(--font-titre);font-size:var(--fs-titre-s);line-height:var(--lh-titre-s);
  font-weight:700;color:var(--c-encre);margin:var(--e6) 0 var(--e2);}
.prose h5{font-family:var(--font-titre);font-size:var(--fs-surtitre);letter-spacing:var(--ls-surtitre);
  text-transform:uppercase;font-weight:700;color:var(--c-texte-doux);margin:var(--e6) 0 var(--e2);}

/* Notes de bas de page (bloc core/footnotes). */
.prose .wp-block-footnotes{
  font-family:var(--font-texte);font-size:var(--fs-folio);line-height:var(--lh-folio);
  color:var(--c-texte-doux);border-top:1px solid var(--c-filet);
  margin-top:var(--e8);padding-top:var(--e4);
}

/* ============== §5.7 — ÉTATS D'ÉCRAN ==============
   Vide, chargement, erreur. Markup produit par
   `Parresia\Blocks\Widgets\Helpers\Screen_State`. */
.etat-ecran{
  display:flex;flex-direction:column;align-items:center;gap:var(--e3);
  padding:var(--e9) var(--e5);text-align:center;
  background:var(--c-trame);border-radius:var(--r-bloc);
  margin-bottom:var(--e6);
}
.etat-ecran__titre{
  font-family:var(--font-titre);font-size:var(--fs-titre-l);line-height:var(--lh-titre-l);
  font-weight:700;color:var(--c-encre);margin:0;
}
.etat-ecran__texte{
  font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);
  color:var(--c-texte-doux);margin:0;max-width:52ch;
}
.etat-ecran__action{margin-top:var(--e2);text-decoration:none;}
.etat-ecran--erreur{background:var(--c-papier);border:1px solid var(--c-filet-fort);}

/* Squelette : un bloc image + deux lignes, pas de rouet. Il occupe la place du
   contenu à venir, ce qui évite le saut de mise en page. */
.squelette{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e6);}
.squelette__image{aspect-ratio:1000/550;border-radius:var(--r-image);background:var(--c-trame);}
.squelette__ligne{height:12px;margin-top:var(--e3);border-radius:var(--r-etiquette);background:var(--c-trame);}
.squelette__ligne--courte{width:60%;}
.squelette__image,.squelette__ligne{animation:squelette-pulse 1.4s ease-in-out infinite;}
@keyframes squelette-pulse{50%{opacity:.55;}}

/* §5.7 — aucune pulsation si le visiteur a demandé la réduction des animations. */
@media (prefers-reduced-motion:reduce){
  .squelette__image,.squelette__ligne{animation:none;}
}
@media (max-width:1063px){
  .squelette{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .squelette{grid-template-columns:1fr;}
}

/* ============== §5.4 — BOUTONS ==============
   Cinq variantes, un seul socle. `--c-jaune` est le token du parcours
   abonnement : « S'abonner », « Je m'abonne », « Choisir cette offre » sont
   jaunes partout, paywall et menu burger compris. Aucune exception. */
.bt-abo,.bt-rouge,.bt-blanc,.bt-fin{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;height:var(--h-bouton);padding:0 var(--e5);
  font-family:var(--font-titre);font-size:14px;font-weight:600;
  border-radius:var(--r-bouton);border:1px solid transparent;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:background var(--wp--custom--transition--fast),color var(--wp--custom--transition--fast);
}
.bt-abo{background:var(--c-jaune);color:var(--c-encre);}
.bt-abo:hover{background:var(--c-jaune-h);color:var(--c-encre);}
.bt-rouge{background:var(--c-rouge);color:var(--c-papier);}
.bt-rouge:hover{background:var(--c-rouge-h);color:var(--c-papier);}
.bt-blanc{background:var(--c-papier);color:var(--c-encre);border-color:var(--c-filet-fort);}
.bt-blanc:hover{background:var(--c-trame);}

/* « Tout voir » — la seule variante fine, en pilule. */
.bt-fin,.pill{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;height:var(--h-toutvoir);padding:0 var(--e3);
  font-family:var(--font-titre);font-size:var(--fs-toutvoir);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  background:var(--c-papier);color:var(--c-rouge);
  border:1px solid var(--c-rouge);border-radius:999px;
}
.bt-fin:hover,a.pill:hover{background:var(--c-rouge);color:var(--c-papier);}
/* Cible tactile portée à 44px sans toucher au visuel (§5.1). */
.bt-fin::after,.pill::after{
  content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:44px;
}

.bt-abo:disabled,.bt-rouge:disabled,.bt-blanc:disabled,.bt-fin:disabled,
.bt-abo[aria-disabled="true"],.bt-rouge[aria-disabled="true"],
.bt-blanc[aria-disabled="true"],.bt-fin[aria-disabled="true"]{
  background:var(--c-trame);color:var(--c-desactive-texte);
  border-color:var(--c-filet);cursor:not-allowed;
}

/* Focus visible commun à toutes les variantes. */
.bt-abo:focus-visible,.bt-rouge:focus-visible,.bt-blanc:focus-visible,
.bt-fin:focus-visible,.pill:focus-visible{
  outline:2px solid var(--c-encre);outline-offset:2px;
}

/* sidebar heading */
.side-h{
  font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);margin:0 0 12px;padding-bottom:9px;border-bottom:2px solid var(--ink);
}

/* ================= HEADER ================= */
header.site{border-bottom:1px solid var(--line);background:#fff;}

/* Rubrique courante dans la navigation principale (recette NAV-04).
   La couleur rattache visuellement la barre de sous-rubriques affichee juste
   en dessous a l'entree de menu dont elle depend.

   Le filet rouge sous le libelle a ete retire a la demande du client, le
   2026-09-08 : deux traits rouges se superposaient dans l'en-tete, celui-ci et
   la pastille active de la barre de sous-rubriques. La couleur et la graisse
   suffisent au marquage demande par NAV-04.

   Recette du 2026-09-29 (U-09) : la couleur ne s'affichait plus, la regle de
   layout.css qui fixe le bleu nuit des liens de navigation (double classe,
   0,4,2) l'emportait. Meme technique double classe, un cran plus specifique.
   --red suit la palette du topic actif (Omni, Ortho). */
header .main-nav-row .is-rubrique-courante > a.wp-block-navigation-item__content.wp-block-navigation-item__content{
  color:var(--red);
  font-weight:700;
}

/* ============================================================
   EN-TETE COLLANT (recette NAV-03)
   ============================================================ */
/* Le collant porte sur le conteneur de template-part, pas sur le groupe
   interieur : `position:sticky` est borne par son parent, et ce parent ne fait
   que la hauteur de l'en-tete. Coller le groupe interieur ne produisait donc
   rien du tout, il disparaissait avec l'en-tete.

   `--header-pin` remonte l'en-tete de la hauteur du bandeau logo : celui-ci
   sort de l'ecran et seule la barre de navigation reste epinglee. On garde le
   menu sans sacrifier le tiers superieur de la fenetre.

   La valeur est mesuree, 99px, et volontairement d'un pixel INFERIEURE a
   l'offset reel constate en grand ecran, 100px. Une valeur trop grande
   rognerait le haut de la barre ; trop petite, elle laisse au pire un filet du
   bandeau visible. On se trompe donc du bon cote.

   ATTENTION : cette valeur depend de la hauteur du bandeau logo et du padding
   de l'en-tete. Elle valait 114px avant que NAV-01 et NAV-02 ne reduisent ce
   padding, et la barre se retrouvait rognee de 14px. TOUTE retouche de l'espace
   dans l'en-tete impose de la re-mesurer.

   Desktop uniquement. Sous 1064px l'en-tete se reorganise, l'offset ne vaut
   plus que 106px, et la hauteur utile d'un telephone est trop precieuse pour
   qu'on lui prenne une barre en permanence : la navigation y passe de toute
   facon par le burger. */
:root{
  --nav-h:0px;
  --header-pin:-99px;
}

/* RESP-01 : le client veut le menu en permanence sur mobile ; l'en-tete
   entier reste colle en haut, RESP-02 et RESP-03 le recomposeront. */
@media (max-width:1063px){
  /* Recette du 2026-09-29 (U-03) : l'en-tete entier restait colle, 154 px,
     20 % d'un ecran de telephone. Comme sur desktop, il remonte de la hauteur
     du bandeau logo : seule la ligne de navigation (burger, selecteur
     d'univers, recherche) reste en haut, 57 px. `--nav-h` suit, pour les
     elements qui se calent dessous. Meme contrainte qu'au desktop : toute
     retouche de la hauteur du bandeau logo impose de re-mesurer. */
  /* Retour client R13 du 2026-10-15 (RESP-26) : annule U-03. L'en-tete entier
     reste colle, pour revenir a l'accueil par le logo a tout moment. La marge
     haute de l'en-tete tombe pour tenir la hauteur : 114 px jusqu'a 1024 px
     (contre 122), 153 px de 1025 a 1063 px. `--nav-h` vaut cette hauteur
     (pave annonceur colle dessous, 769 a 1063 px). Toute retouche de la
     hauteur de l'en-tete impose de re-mesurer. La marge haute est un style
     en ligne du groupe (gabarit, et override en base sur la preprod) : seul
     `!important` l'emporte. */
  :root{ --header-pin:0px; --nav-h:114px; }
  .wp-site-blocks > header.wp-block-template-part > header.wp-block-group{padding-top:0 !important;}
  .wp-site-blocks > header.wp-block-template-part{position:sticky;top:var(--header-pin);z-index:30;background:#fff;}
  body.admin-bar .wp-site-blocks > header.wp-block-template-part{top:calc(var(--header-pin) + 46px);}
  /* Le badge d'univers doublait le selecteur et faisait deborder la ligne a
     360 px : le selecteur seul suffit. */
  .main-nav-row .parresia-topics-badge{display:none;}
  /* Espace video : pas de seconde barre collee sous l'en-tete. */
  .subnav.vid-subnav{position:static;}
}

/* Palier tablette : le bandeau logo y est plus haut, l'en-tete mesure 153 px.
   Sous 1024 px, l'en-tete mobile prend le relais (voir plus haut). */
@media (min-width:1025px) and (max-width:1063px){
  :root{ --nav-h:153px; }
}

@media (min-width:1064px){
  :root{ --nav-h:61px; }

  .wp-site-blocks > header.wp-block-template-part{
    position:sticky;
    top:var(--header-pin);
    z-index:30;
    /* Fond opaque obligatoire : en `sticky`, le contenu defile DERRIERE. */
    background:#fff;
  }

  /* La barre d'administration de WordPress est fixee en haut : sans ce
     rattrapage, la barre de navigation se rangerait dessous et serait masquee
     pour les redacteurs. Au-dessus de 782px elle mesure 32px. */
  body.admin-bar .wp-site-blocks > header.wp-block-template-part{
    top:calc(var(--header-pin) + 32px);
  }
}
/* NAV-17 : quand la barre est epinglee, le body porte `is-nav-pinned` (script
   nav-pin.js). La marque et le selecteur d'univers prennent la place du
   burger et du badge, les rubriques se resserrent, connexion, recherche et
   abonnement rejoignent la droite en pictos. Au repos, rien de tout cela. */
.nav-pin-sentinel{height:1px;margin-top:-1px;pointer-events:none;}
/* Le selecteur porte la ligne de nav : la regle de layout de core,
   `.wp-block-group-is-layout-flex{display:flex}`, est imprimee apres cette
   feuille et l'emportait sur un simple `.nav-pin-brand{display:none}`, d'ou
   marque et actions visibles en permanence dans le menu. */
.main-nav-row .nav-pin-brand,.main-nav-row .nav-pin-actions{display:none;}
@media (min-width:1064px){
  body.is-nav-pinned .main-nav-row .parresia-drawer__burger,
  body.is-nav-pinned .main-nav-row .parresia-topics-badge{display:none;}
  body.is-nav-pinned .nav-pin-brand{display:flex;align-items:center;gap:12px;flex:none;}
  body.is-nav-pinned .nav-pin-brand .logo{font-size:20px;}
  body.is-nav-pinned .nav-pin-actions{display:flex;margin-left:auto;flex:none;}
  /* Le libelle des pictos est un noeud texte nu apres le SVG : on l'eteint
     par la taille de police, le SVG garde sa taille propre. */
  body.is-nav-pinned .nav-pin-actions .icon-link{font-size:0;line-height:0;gap:0;}
  body.is-nav-pinned .nav-pin-actions .icon-link svg{width:20px;height:20px;}
  body.is-nav-pinned .nav-pin-actions .subscribe{padding:6px 12px;font-size:12px;}
  body.is-nav-pinned .main-nav-row .wp-block-navigation{font-size:12.5px;}
  /* Au repos les rubriques sont centrees en absolu sur la ligne ; epinglees,
     elles reprennent le flux entre la marque et les actions, sinon la marque
     passait dessous. Les actions gardent leur rangee en pictos : la regle de
     `.topbar .topbar-actions` ne les suit pas dans la ligne de nav. */
  body.is-nav-pinned .main-nav-row .wp-block-navigation{position:static;transform:none;width:auto;margin:0 auto;}
  /* Une seule ligne : le layout flex de core replie a la ligne des que marque,
     rubriques et actions depassent, la barre doublait de hauteur. */
  body.is-nav-pinned .main-nav-row{flex-wrap:nowrap;}
  body.is-nav-pinned .main-nav-row .wp-block-navigation__container{flex-wrap:nowrap;}
  body.is-nav-pinned .nav-pin-actions .topbar-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:14px;}
}

/* §6.1 — la ligne du logo est resserrée pour rapprocher la barre de menu. */
.topbar{display:flex;align-items:center;gap:20px;height:68px;}
/* §6.1 — le picto « Lire le magazine » se pose sur un fond sombre pour se
   distinguer du reste de la barre. */
.mag-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:62px;height:58px;border:1px solid var(--c-encre);border-radius:var(--r-etiquette);flex:none;
  background:var(--c-encre);color:var(--c-papier);
  font-family:var(--font-titre);font-size:max(var(--fs-min,0px),9px);font-weight:700;line-height:1.15;
  text-align:center;letter-spacing:.02em;
}
.mag-btn .ic{width:18px;height:14px;border:2px solid var(--c-papier);border-radius:2px;}
.mag-btn:hover{background:var(--c-texte);color:var(--c-papier);}
.brand{display:flex;align-items:center;gap:12px;}
.logo{font-family:var(--sans);font-weight:800;font-size:31px;letter-spacing:-.02em;color:var(--navy);}
/* NAV-15 : le logo du site en SVG remplace le titre en texte. */
.logo--svg{display:inline-flex;align-items:center;line-height:0;}
.logo--svg img{height:34px;width:auto;display:block;}
body.is-nav-pinned .nav-pin-brand .logo--svg img{height:26px;}
.foot-logo .logo--svg img{height:28px;}
/* AFF-13 : le logo est un SVG charge en image, sa couleur ne se change donc
   pas au trait pres. Sur les fonds sombres, ou il sortait bleu nuit sur bleu
   nuit, il est ramene au blanc pur : `brightness(0)` aplatit ses couleurs au
   noir, `invert(1)` les retourne au blanc. */
.foot-logo .logo--svg img,
.parresia-drawer .logo--svg img,
.sub-header .logo--svg img{filter:brightness(0) invert(1);}
/* ABO-17 et ABO-19 : pictos des promos et visuel des avantages. */
.promo{position:relative;}
.promo-picto{width:120px;height:auto;display:block;margin:0 0 14px;}
/* Le selecteur porte `.wp-block-image img` : la feuille de blocks de
   WordPress pose `.wp-block-image img{max-width:100%}`, plus specifique que
   la seule classe, et le visuel s'etalait sur toute la largeur de page. */
.av-visual,
.wp-block-image img.av-visual{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;}
.logo b{color:var(--brand-red);font-weight:800;}
.seg{display:flex;align-items:center;gap:6px;border:1.5px solid var(--red);border-radius:18px;padding:4px 10px;font-size:max(var(--fs-min,0px),11px);font-weight:700;color:var(--navy);}
.seg .dot{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block;}
.seg .dot.off{background:#c9ccd4;}
.topbar .spacer{margin-left:auto;}
.topbar .topbar-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:20px;margin-left:auto;}
.icon-link{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:max(var(--fs-min,0px),10px);color:var(--navy);font-weight:600;}
.icon-link svg{width:21px;height:21px;}
/* « Se connecter » est un <button> (déclencheur Popover) — reset pour matcher le lien. */
.icon-link--btn{appearance:none;border:0;background:none;padding:0;cursor:pointer;font-family:inherit;}
/* §5.4 — « S'abonner » : variante .bt-abo. */
.subscribe{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:var(--h-bouton);padding:0 var(--e5);
  background:var(--c-jaune);color:var(--c-encre);
  font-family:var(--font-titre);font-weight:600;font-size:14px;letter-spacing:.01em;
  border-radius:var(--r-bouton);
  transition:background var(--wp--custom--transition--fast);
}
/* Jaune = fond clair : l'encre reste sombre au survol (blanc sur jaune serait
   illisible), le retour visuel passe par le jaune de survol. */
.subscribe:hover{background:var(--c-jaune-h);color:var(--c-encre);}
.subscribe:focus-visible{outline:2px solid var(--c-encre);outline-offset:2px;}

/* ============== NAV ============== */
nav.main{border-bottom:1px solid var(--line);background:#fff;}
.nav-row{display:flex;align-items:center;gap:0;height:52px;}
.burger{display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center;width:46px;height:34px;border:1px solid var(--line-2);border-radius:3px;flex:none;}
.burger span{width:20px;height:2px;background:var(--navy);}
/* §6.1 — étiquettes de barre : hauteur réduite, texte centré verticalement. */
.omni-badge{display:inline-flex;align-items:center;height:24px;padding:0 11px;
  background:var(--c-rouge);color:var(--c-papier);font-family:var(--font-titre);font-weight:700;
  font-size:max(var(--fs-min,0px),11px);letter-spacing:var(--ls-etiquette);border-radius:var(--r-etiquette);
  margin:0 18px 0 16px;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{font-size:14px;font-weight:700;color:var(--navy);letter-spacing:.01em;padding:6px 0;}
.nav-links a:hover{color:var(--red);}

/* Rangée nav block-based : burger (drawer) + badge restent à gauche dans le
   flux, le menu wp:navigation est centré sur le rail (absolu — la hauteur de
   la rangée est tenue par le burger). Masqué ≤781px (drawer prend le relais). */
.main-nav-row{position:relative;}
.main-nav-row .wp-block-navigation{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;}

/* ============== MAGAZINE BODY (3 rails) ============== */
/* Grille du corps de page — dentaire365-implementation.md §3.
   Largeurs de rails et gouttières viennent des tokens, JAMAIS du contenu :
   Gutenberg pose un `style="flex-basis:212px"` en ligne sur chaque colonne,
   valeur saisie par site en BDD. Le `!important` la neutralise pour que les
   9 sites partagent la même grille sans toucher aux contenus. */
.wp-block-columns.body-cols{
  box-sizing:border-box;
  max-width:var(--largeur-max);
  margin-inline:auto;
  padding:var(--e6) var(--marge-laterale) var(--e2);
  gap:var(--gouttiere);
  flex-wrap:nowrap;
}

/* §3.1 — décision du 27/07 : « largeur utile » = largeur de l'écran. La grille
   s'étend donc bord à bord (plafonnée à --largeur-max), sans marge latérale
   entre 1024 et 1440px. C'est la seule lecture où les paliers tombent juste :
   1024 − 160 − 300 − 2×20 = 524, 1140 − 180 − 300 − 2×28 = 604,
   1280 − 200 − 300 − 2×40 = 700.
   WordPress pose un padding racine sur le conteneur de contenu
   (`useRootPaddingAwareAlignments`) : on l'annule pour les conteneurs qui
   portent une grille de page, et uniquement pour eux. */
.has-global-padding:has(> .wp-block-columns.body-cols),
.has-global-padding:has(> .art-grid),
.has-global-padding:has(> .an-grid){
  padding-inline:0;
  --wp--style--root-padding-left:0px;
  --wp--style--root-padding-right:0px;
}

/* Les enfants `alignfull` compensent le padding racine par une marge négative,
   qu'WordPress écrit en dur dans les styles globaux (pas via la variable).
   Padding annulé sans neutraliser cette marge = bandes plus larges que le
   viewport et défilement horizontal. */
.has-global-padding:has(> .wp-block-columns.body-cols) > .alignfull,
.has-global-padding:has(> .art-grid) > .alignfull,
.has-global-padding:has(> .an-grid) > .alignfull{
  margin-inline:0;
  width:100%;
}
.body-cols>.rail-left{flex:0 0 var(--col-gauche) !important;}
.body-cols>.rail-right{flex:0 0 var(--col-droite) !important;}
.body-cols>.center{flex:1 1 0 !important;}
/* Entre 1279 et 1439px, le rail droit se resserre à 250px : la colonne
   centrale devenait trop étroite avant que l'habillage ne se retire, ce qui
   n'arrive qu'à 1279px. En dessous de ce seuil, le palier 1063 reprend la
   main et les rails passent sous le contenu. */
@media (min-width:1279px) and (max-width:1439.98px){
  .body-cols>.rail-right{flex-basis:250px !important;}
}

.rail-left{min-width:0;position:relative;}
.center{min-width:0;display:flex;flex-direction:column;gap:30px;}
.rail-right{min-width:0;display:flex;flex-direction:column;gap:26px;position:relative;}

/* §3.3 — filet vertical de 1px centré dans chaque gouttière, sur les trois
   grilles de page (home, archive annonces, article). Posé en pseudo-élément
   sur le rail : il est neutralisé aux paliers où le rail quitte sa colonne. */
.body-cols>.rail-left::after,
.an-grid>.rail-left::after,
.body-cols>.rail-right::before,
.an-grid>.rail-right::before,
.art-grid>.rail-right::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:var(--c-filet);
  pointer-events:none;
}
.body-cols>.rail-left::after,
.an-grid>.rail-left::after{right:calc(var(--gouttiere) / -2);}
.body-cols>.rail-right::before,
.an-grid>.rail-right::before,
.art-grid>.rail-right::before{left:calc(var(--gouttiere) / -2);}
/* rail inséré via le bloc « Élément de modèle » (template part) : son wrapper
   ne doit pas masquer les modules au flex gap de la colonne. */
.expo-page-content .rail-right>.wp-block-template-part{display:contents;}

/* left rail modules */
.mod{margin-bottom:26px;}
.list-red{list-style:none;margin:0;padding:0;}
.list-red li{position:relative;padding:7px 0 7px 16px;font-size:13.5px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);}
.list-red li:last-child{border-bottom:0;}
/* §5.5 — puce carrée 9×9, une teinte par rubrique. La couleur ne porte jamais
   l'information seule : le nom de rubrique reste écrit. */
/* NAV-08 : la teinte vient de `--rub`, pose par la classe `is-rub-N` que le
   rendu PHP calcule a partir du slug de la rubrique. L'ancien mecanisme colorait
   par `nth-child`, donc par RANG : une rubrique changeait de couleur des que le
   classement d'audience bougeait, et le burger ne montrait rien. */
.list-red li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:9px;
  border-radius:var(--r-etiquette);background:var(--rub,var(--c-rub-1));}

.pluslus .item{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-bottom:1px solid var(--line);}
.pluslus .item:last-child{border-bottom:0;}
.pluslus .thumb{width:100%;height:auto;aspect-ratio:1000/550;flex:none;}
.pluslus .k{font-size:max(var(--fs-min,0px),10px);font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
.pluslus .t{font-family:var(--font-titre);font-size:var(--fs-titre-s);font-weight:700;
  line-height:var(--lh-titre-s);color:var(--c-encre);}

/* ===== À LA UNE hero ===== */
/* Le carrousel translate son track : sans détourage, les diapositives
   suivantes débordent sur le rail droit. `overflow:hidden` fait du bloc la
   fenêtre du carrousel. */
.hero{position:relative;overflow:hidden;}
/* §6.2, proportions texte 40 % / image 60 %, avec un PLANCHER a la largeur du
   rail droit (recette AFF-03, 2026-08-28).
   Le 40 % est une part d'une colonne centrale qui retrecit, alors que le rail
   droit est fige a 300px par le pave 300x250. Sous 1330px de viewport la part
   de texte passait donc SOUS 300px : a 1280 elle tombait a 276px face a un rail
   de 300, la publicite devenait plus large que la UNE et le titre s'empilait
   sur 5 lignes. Le plancher encode l'invariant attendu : la UNE n'est jamais
   plus etroite que le rail publicitaire. Sans media query, donc sans marche
   d'escalier, et sans effet au-dessus de 1330px ou 40 % depasse deja 300px. */
.hero-card{display:grid;grid-template-columns:minmax(var(--col-droite),40%) 1fr;background:var(--c-encre);color:var(--c-papier);
  border-radius:var(--r-image);overflow:hidden;}
/* BLOC-01. La hauteur de la carte n'est plus un plancher arbitraire : elle
   descend du visuel, dont l'emplacement porte le format de reference 1000x550.
   Le plancher de 320px imposait au visuel un rapport de 1,47 la ou la source en
   fait 1,82 : un cinquieme de la largeur partait au recadrage a chaque une.
   La rangee de grille se dimensionne sur le plus haut des deux elements, donc
   le panneau texte s'etire au visuel tant qu'il tient dessous, ce qui est le
   cas jusqu'a un titre de trois lignes. */
.hero-card .img{aspect-ratio:1000 / 550;}
/* Retrait haut ramene de 58 a 44px, valeur du proto a la marge du picto pres :
   le reste allait au plancher supprime. Passe sous l'etiquette flottante, qui
   fait 24px de haut a 18px du bord. */
.hero-card .txt{padding:44px 28px 24px;display:flex;flex-direction:column;}
.hero-card .k{color:#fff;opacity:.82;font-size:max(var(--fs-min,0px),11px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;}
.hero-card h3{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-une-carte);
  line-height:var(--lh-titre-l);margin:0;letter-spacing:-.01em;}
.hero-card p{font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);
  color:var(--c-nuit-chapo);margin:var(--e3) 0 0;max-width:34ch;}
.hero-card .meta{color:#aeb6c6;margin-top:auto;padding-top:14px;}
.hero-card .img{border-radius:0;background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, rgba(0,0,0,.05) 10px 20px),
    #6f7a92;}
/* AFF-03, suite. Le plancher ci-dessus rend sa largeur a la colonne de texte,
   mais a 300px l'echelle de titre du grand ecran reste trop haute : le titre de
   la UNE tenait sur 5 lignes. Un cran en dessous le ramene a 3 et rend 45px de
   hauteur au bloc. Derive du token plutot qu'ecrit en dur, pour suivre
   `--fs-une-carte` si le referentiel bouge. */
@media (max-width:1319px){
  .hero-card h3{font-size:calc(var(--fs-une-carte) * .875);}
}

.tab.float{position:absolute;top:18px;left:18px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.hero .tab.float{background:var(--red);}
.dots{display:flex;gap:7px;justify-content:center;margin-top:16px;}
.dots i{width:22px;height:5px;background:#d3d6dd;border-radius:3px;}
.dots i.on{background:var(--red);}

/* masterclass feature (right rail) — panneau gris, visuel pleine largeur */
/* §6.2 — panneau Clinique/Masterclass : l'image tient le ratio de référence et
   le texte est borné, pour qu'il ne déborde plus sous la carte. */
.feature{position:relative;background:var(--c-trame);border-radius:var(--r-bloc);overflow:hidden;
  padding:0 var(--e4) var(--e5);display:flex;flex-direction:column;}
.feature p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.feature .tab--red{position:absolute;top:10px;left:10px;z-index:2;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.feature .img{aspect-ratio:1000/550;width:auto;height:auto;margin:0 -16px 14px;border-radius:0;}
.feature .by{font-size:12px;color:var(--red);font-weight:700;margin-bottom:4px;}
.feature h3{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);margin:0 0 9px;}
.feature p{font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);color:var(--c-texte);margin:0;}
.feature .spon{font-size:max(var(--fs-min,0px),11px);color:var(--meta);}
/* Le pied ne porte plus que les appels a l'action : ils restent ferres a
   droite, la mention de rubrique ayant quitte la gauche. */
.feature-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:10px;}
.more--standalone{margin-top:12px;}
.feature-foot .more--standalone{margin-top:0;}
/* Recette BLOC-16 : deux appels à l'action dans le pied du module, « Lire »
   puis le lien d'archive. Ils restent groupés à droite, la mention de rubrique
   gardant la gauche. */
.feature-cta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.feature-cta .more--standalone{margin-top:0;}
/* La pilule « Lire » est pleine, celle d'archive reste bordée : c'est elle qui
   porte l'action principale. */
.feature-cta .pill--read{background:var(--c-rouge);border-color:var(--c-rouge);color:var(--c-papier);}
.feature-cta .pill--read:hover,.feature-cta .pill--read:focus{background:var(--c-rouge-h);border-color:var(--c-rouge-h);color:var(--c-papier);}

/* 3-card row */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.card .img{aspect-ratio:1000/550;width:100%;margin-bottom:11px;}
.card .art-title{font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);}
.card.spon{background:#eef0f3;border-radius:8px;overflow:hidden;padding:0 16px 18px;}
.card.spon .img{margin:0 -16px 12px;width:auto;border-radius:0;background:var(--ph-2);}

/* magazine cover module */
.magbox{background:transparent;color:var(--ink);padding:0;}
/* Format d'une couverture, pas d'une vignette d'article : le 1000/550 paysage
   laissait la couverture flotter au centre d'une bande vide. 350/495 = 0,707,
   le ratio ISO de la très grande majorité des numéros importés ; les quelques
   numéros en 0,664 s'affichent un peu plus étroits, sans rognage. */
/* Recette BLOC-23 : pas d'arrondi sur la couverture. Un magazine a des angles
   vifs, le rayon des vignettes d'article lui donnait l'air d'une carte. */
.magbox .cover{aspect-ratio:350/495;position:relative;border-radius:0;overflow:hidden;}
/* Une couverture de magazine se montre entière : la rogner coupe le titre et
   le numéro, qui sont l'information. C'est l'exception à la règle générale
   `object-fit:cover` posée ligne 54 pour les vignettes d'article. */
.magbox .cover img{object-fit:contain;}
.magbox .cover .no{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:max(var(--fs-min,0px),10px);font-weight:800;padding:4px 8px;letter-spacing:.04em;}
.magbox .cover .cw{position:absolute;top:12px;right:12px;font-size:max(var(--fs-min,0px),10px);font-weight:700;color:#fff;opacity:.85;}
.magbox .foot{padding:12px 0 0;text-align:center;}
/* Variante pleine largeur : le socle `.btn-red` porte déjà la hauteur, le
   centrage et le rayon — on ne redéfinit que l'étalement et la casse. */
.magbox .foot .btn-red{width:100%;font-size:max(var(--fs-min,0px),10px);text-transform:uppercase;letter-spacing:.05em;}
.btn-red{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:var(--h-bouton);padding:0 var(--e4);background:var(--c-rouge);color:var(--c-papier);
  font-family:var(--font-titre);font-weight:600;font-size:14px;letter-spacing:.02em;
  border-radius:var(--r-bouton);}
.btn-red:hover{background:var(--c-rouge-h);color:var(--c-papier);}

/* en bref */
.enbref .row{display:block;padding:13px 0;border-bottom:1px solid var(--line);}
.enbref .row:last-child{border-bottom:0;}
/* BLOC-13 : plus de filet sous le dernier article d'une liste, il fermait le
   module sur un trait que rien ne suit. */
.list-rows .row:last-child{border-bottom:0;}
.enbref .row p{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-s);line-height:var(--lh-titre-s);margin:0;color:var(--c-encre);}
/* §6.2 — en-tête de module de rail : titre grossi, filet fin qui le relie au
   lien « tout voir », comme les en-têtes de rubrique de la colonne centrale. */
.rail-h{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e3);}
.rail-h h4{font-family:var(--font-titre);font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);
  font-weight:700;letter-spacing:var(--ls-rubrique);text-transform:uppercase;color:var(--c-encre);margin:0;}
.rail-h::after{content:"";order:1;flex:1;height:1px;background:var(--c-filet);}
.rail-h .lk{order:2;display:inline-flex;align-items:center;height:var(--h-toutvoir);padding:0 var(--e3);
  font-family:var(--font-titre);font-size:var(--fs-toutvoir);font-weight:700;color:var(--c-rouge);
  text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--c-rouge);border-radius:999px;
  white-space:nowrap;transition:background var(--wp--custom--transition--fast),color var(--wp--custom--transition--fast);}
/* Inversion des couleurs au survol : fond rouge, texte blanc. */
a.lk:hover,a.lk:focus-visible{background:var(--c-rouge);color:var(--c-papier);}

/* ===== CLINIQUE etc full sections (2-col over center+right via wrappers handled in HTML) ===== */
/* ============== §5.2 — CARTE ARTICLE ==============
   Disposition standard (colonne centrale ≥ 604px) : image 190px à gauche,
   texte à droite. Ordre des éléments : sur-titre, titre, chapô, folio. */
.list-rows .row{display:flex;gap:var(--e5);padding:var(--e5) 0;border-bottom:1px solid var(--c-filet);}
.list-rows .row:first-child{padding-top:0;}
.list-rows .thumb{width:190px;aspect-ratio:1000/550;flex:none;align-self:start;}
.list-rows .body{min-width:0;}
.list-rows .art-title{font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);}

/* §9 — DÉCISION CLIENT EN ATTENTE : disposition en colonne étroite (< 604px).
   Les deux options sont implémentées et commutables. Le seuil est mesuré sur
   la COLONNE, pas sur le viewport (requête de conteneur) : une même largeur
   d'écran peut donner une colonne large ou étroite selon la page.
   Bascule : ajouter la classe `carte-etroite-b` sur <body> (filtre
   `body_class` ou site-config). Sans classe → option A. */
.body-cols>.center,.art-grid>.center,.an-grid>.center{container-type:inline-size;container-name:colonne;}

@container colonne (max-width:604px){
  /* Option A (défaut) — image pleine largeur au-dessus du texte, titre en
     --fs-titre-m. ~2 articles par écran. */
  .list-rows .row{flex-direction:column;gap:var(--e3);}
  .list-rows .thumb{width:100%;}

  /* Option B — image réduite à 140px maintenue à gauche, titre en --fs-titre-s,
     chapô tronqué plus tôt. ~4 articles par écran. */
  body.carte-etroite-b .list-rows .row{flex-direction:row;gap:var(--e4);}
  body.carte-etroite-b .list-rows .thumb{width:140px;}
  body.carte-etroite-b .list-rows .art-title{font-size:var(--fs-titre-s);line-height:var(--lh-titre-s);}
  body.carte-etroite-b .list-rows .art-text{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
}

/* liste 2 colonnes (vignette gauche, sans extrait) */
.rows-2col{display:grid;grid-template-columns:repeat(2,1fr);column-gap:28px;}
.rows-2col .row{padding:18px 0;}
.rows-2col .row:nth-child(-n+2){padding-top:0;}
/* R13-10 : un filet sous chaque rangee sauf la derniere, quel que soit le
   nombre d'articles. La derniere rangee porte le dernier article, et son
   voisin de gauche quand le nombre est pair. (Avant : seule la premiere
   rangee avait son filet, ce qui ne tenait qu'a quatre articles.) */
.rows-2col .row:last-child,
.rows-2col .row:nth-last-child(2):nth-child(odd){border-bottom:0;}
/* La vignette prend sa part de la ligne ; le ratio fait le reste (§4.1).
   `align-self:start` est indispensable : la rangée est en flex, et l'étirement
   par défaut écrasait le ratio (1,11 au lieu de 1,82). */
.rows-2col .thumb{width:38%;flex:none;align-self:start;height:auto;aspect-ratio:1000/550;}
.rows-2col .art-title{font-size:var(--fs-titre-s);line-height:var(--lh-titre-s);}

/* sondage */
.poll{background:#eef0f3;border-radius:8px;padding:18px 16px;}
/* Recette BLOC-10 et BLOC-12 : un article sans sous-rubrique, ou sponsorisé
   sans sur-titre, ne rend plus de sur-titre. Le conteneur reste dans le
   markup, il ne doit pas garder sa place. */
.kicker:empty,.k:empty{display:none;}

/* Recette BLOC-17 : interlignage resserré entre les réponses. La règle
   existait deux fois, 16px puis 20px, la seconde gagnait : une seule reste. */
.poll .opt{margin-bottom:12px;}
.poll .opt .lab{font-size:13px;font-weight:600;margin-bottom:5px;}
.poll .bar{height:9px;background:#fff;position:relative;}
.poll .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--red);}
.poll .pct{font-size:16px;font-weight:800;color:var(--red);font-family:var(--serif);margin-top:6px;display:inline-block;white-space:nowrap;}
.poll .q{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-s);line-height:var(--lh-titre-s);margin:0 0 var(--e5);}

/* small 4-up cards (stratégie) */
.cards4{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 22px;}
.mini .img{aspect-ratio:1000/550;margin-bottom:10px;}
.mini .art-title{font-size:var(--fs-titre-s);line-height:var(--lh-titre-s);}

/* grand angle big cards */
.cards-ga{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
/* BLOC-07. Le bloc « 6 positions » reprend la carte grand angle et fige sa
   grille a trois colonnes : deux rangees de trois, quel que soit le nombre de
   cartes effectivement rendues, pour que les emplacements reserves gardent
   leur place meme si un article epingle a disparu. */
.cards-6{grid-template-columns:repeat(3,1fr);}
.ga .img{aspect-ratio:1000/550;margin-bottom:12px;}
.ga .art-title{font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);}

/* grand angle en slider (option bloc) : pages de --per-view cartes, track
   translaté par state.trackTransform (translateX = -current*100%). Chaque page
   = 100 % du viewport, le track fait 100 % (viewport) → translateX(-100%) = une
   page. Sans JS : translateX(0) → 1re page visible. */
.cards-ga-viewport{overflow:hidden;}
.cards-ga-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);}
/* BLOC-03. La page du slider ne remplace plus la grille du module, elle la
   contient : un slider de liste a deux colonnes reste une liste a deux
   colonnes. Seules les grandes cartes tirent leur nombre de colonnes de
   --per-view, elles n'en ont pas d'autre source. */
.cards-ga-page{flex:0 0 100%;min-width:0;}
.cards-ga-page>.cards-ga{grid-template-columns:repeat(var(--per-view,3),1fr);}

/* §6.10 — sections de la page Vidéos : même mécanique de track translaté, la
   page reprend la grille `.vid-grid` de la rubrique. */
.vid-slider-viewport{overflow:hidden;}
.vid-slider-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.vid-slider-page{flex:0 0 100%;min-width:0;}

/* §11 — mouvement réduit : le défilement reste fonctionnel, la transition saute.
   Les trois carousels partagent le store `parresia/hero` et cette règle. */
@media (prefers-reduced-motion:reduce){
  .hero-track,.cards-ga-track,.vid-slider-track,.sa-track{transition:none;}
}

/* agenda */
.agenda{background:#eef0f3;border-radius:8px;padding:18px 16px;}
/* §6.2 — agenda resserré : les entrées tiennent en moins de hauteur. */
.agenda .ev{display:block;padding:var(--e3) 0;border-bottom:1px solid var(--c-filet-fort);line-height:1.25;}
.agenda .ev:last-child{border-bottom:0;}
/* Les dates gardent le serif : elles doivent trancher avec le titrage. */
.agenda .d{font-family:var(--font-texte);font-weight:700;font-size:var(--fs-titre-l);
  line-height:var(--lh-titre-l);color:var(--c-encre);}
.agenda .d small{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--meta);letter-spacing:.02em;}
/* Recette BLOC-21 et BLOC-22 : le mois s'écrit en entier et une période peut
   couvrir deux mois. Sur cette seule forme, la plus longue, le jour redescend
   à l'échelle du titre moyen pour tenir dans la largeur du rail. */
.agenda .d--periode{font-size:var(--fs-titre-m);}
.agenda .ty{font-size:max(var(--fs-min,0px),11px);font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.04em;margin:5px 0 3px;}
.agenda .pl{font-size:12.5px;color:#3a4254;}

/* pub banner inline */
/* largeur du slot (gabarit + pub réelle) — centré pour ne pas coller aux bords */
/* §6.3 — respiration verticale entre le contenu et les bannières haute et
   basse de la colonne centrale : sans elle, la pub colle au dernier article. */
.ad{margin-inline:auto;margin-block:var(--e7);}
/* La bannière de tête de colonne ne prend pas de marge haute. Le second
   sélecteur visait `.center > *:first-child .ad` : toute bannière posée dans
   le groupe qui ouvre la colonne, pas seulement la première. Les bannières
   intermédiaires de l'accueil perdaient ainsi leur respiration (retour du
   2026-09-25). Il ne vise plus que la bannière en tête du groupe. */
.center > .ad:first-child,
.center > *:first-child > .ad:first-child{margin-block-start:0;}
/* §6.3 — les bannières qui séparent les blocs de la colonne centrale respirent
   d'un cran de moins que les bandeaux de tête et de pied. La première de la
   colonne (leaderboard) garde sa remise à zéro ci-dessus : `:not(:first-child)`
   monte la spécificité à (0,4,0) et ne peut donc pas la reprendre. */
.ad.banner728.alignwide:not(:first-child){margin-block-start:var(--e6);}
/* Retour du 2026-09-25 : sur l'accueil, les pastilles d'un slider touchaient
   la bannière placée dessous. Le style du bloc remet ses marges à 0
   (`.wp-block-parresia-magazine-section{margin:0}`, chargé après cette
   feuille), ce qui annulait la respiration de `.ad` : une bannière de la
   colonne centrale collait au bloc précédent. `:where()` garde une
   spécificité de (0,2,0), sous le fil mobile de RESP-12 qui remet les marges
   à 0 entre ses rangées. */
:where(.body-cols .center) .ad:not(:first-child){margin-block-start:var(--e7);}
.ad.banner990{max-width:990px;}
/* §6.3 — RUB-01, RUB-02 et RUB-03 : l'air autour des bannières de la rubrique.
   Les marges déclarées juste au-dessus ne s'appliquaient pas. La disposition
   « contrainte » de WordPress pose son propre espacement de blocs, 24px, sur
   chaque enfant de la colonne centrale, avec une spécificité (0,1,0) que ces
   règles n'atteignaient pas : le titre se retrouvait collé au bandeau de tête
   et les bannières intermédiaires perdaient leur respiration en dessous.
   Les sélecteurs ci-dessous montent à (0,3,0) et rendent ces marges effectives.

   Le bandeau de tête reçoit un cran de plus que le proto, `--e8` au lieu de
   `--e7` : la recette porte deux fois sur ce même écart, RUB-01 et RUB-03. Les
   marges adjacentes fusionnent, c'est donc bien 40px qui séparent le bandeau du
   titre, pas 40 plus 32. Réservé aux archives de rubrique, seules visées. */
.category .center .ad.banner728,
.category .center .ad.banner990{margin-block-end:var(--e7);}
.category .center .rubrique-title{margin-block-start:var(--e8);}

.ad.banner728{max-width:728px;}
.ad.box300,.ad.box250{max-width:300px;}
/* gabarit (placeholder) : hauteur fixe au ratio */
.ad:not(.ad--live).banner728{height:96px;}
.ad:not(.ad--live).box300{height:600px;}
.ad:not(.ad--live).box250{height:250px;}
/* pub réelle Advanced Ads : hauteur libre + média responsive dans le slot capé */
.ad.ad--live{height:auto;min-height:0;}
.ad.ad--live :is(img,ins,iframe,a){max-width:100%;height:auto;}
/* R13-11 : sur telephone, le pave des grilles a colonnes est reduit et reste
   centre (`margin-inline:auto`). Valeur reprise du CSS additionnel pose par
   le client sur la preprod le 2026-10-16 : 210 px de large, 175 de haut pour
   une creation 300 x 250. */
@media (max-width:767px){
  .body-cols .ad.box300,.body-cols .ad.box250{max-width:210px;}
}

/* ===== ESPACE VIDÉOS dark band ===== */
/* ============== §5.6 — BLOC NUIT (page Vidéos) ============== */
.videos{background:var(--c-nuit);color:var(--c-papier);padding:var(--e7) 0 var(--e8);}
.videos .sec-head h2{color:#fff;}
/* Le trait de la tetiere doit rester visible sur le fond nuit. */
.videos .sec-head::after{background:rgba(255,255,255,.28);}
.videos .sec-head h2 a:hover{color:var(--c-papier);}
/* Recette BLOC-14 : le nombre de colonnes suit le réglage du module, borné à
   quatre côté rendu. Le repli à 3 sert les pages qui rendent la grille sans
   passer par le module, la rubrique vidéo notamment. */
.vid-grid{display:grid;grid-template-columns:repeat(var(--vid-cols,3),1fr);gap:24px;}
/* Vidéos non commerciales : plus de cartouche bleu pâle, le texte se pose
   directement sur le fond nuit (§5.6). */
.vcard{background:transparent;border-radius:var(--r-bloc);overflow:hidden;}
.vcard .img{aspect-ratio:1000/550;position:relative;background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, rgba(0,0,0,.06) 10px 20px),
    #6f7a92;}
.vcard .play{position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;}
.vcard .play::after{content:"";border-left:15px solid var(--navy);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px;}
.vcard .vb{padding:var(--e4) 0 var(--e5);}
/* §11 — sur fond nuit, le rouge éditorial tombe à 1,15:1. Le sur-titre des
   cartes vidéo reprend donc la teinte de chapô nuit (11:1), qui reste dans la
   palette de la §5.6 : on ne crée pas de teinte, on en choisit une lisible. */
.vcard .k{font-family:var(--font-titre);font-size:var(--fs-surtitre);font-weight:700;
  color:var(--c-nuit-chapo);letter-spacing:var(--ls-surtitre);text-transform:uppercase;
  margin-bottom:var(--e-surtitre-titre);}
/* VID-18 : le titre n'avait pas de couleur propre et prenait celle de son
   contexte. Posee dans un gabarit qui declare une couleur de texte sombre,
   la carte sortait son titre en bleu nuit sur fond nuit. La carte video est
   par definition un composant de fond nuit : sa couleur ne depend plus de
   l'endroit ou on la pose. */
.vcard h3{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);margin:0 0 8px;color:var(--c-papier);}
.vcard p{font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);
  color:var(--c-nuit-chapo);margin:0;}
.videos .meta,.vcard .meta{color:var(--c-nuit-folio);}
/* Mention d'annonceur sur fond nuit : même discrétion qu'en §5.2. */
.videos .sponsor-by,.videos .d365-sponso{color:var(--c-nuit-folio);}
.videos .sponsor-by b,.videos .d365-sponso b{color:var(--c-nuit-sponsor-nom);}
/* VID-08 : la date sous les cartes suit la taille du slider haut, 13px. */
.vcard .spon,.vcard .by{font-size:13px;color:#c7cbd8;margin-top:9px;}

/* ===== ANNONCES ===== */
.ann{padding:40px 0 10px;}
.ann-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.ann .it{border-top:3px solid var(--navy);padding-top:14px;}
.ann .k{font-size:max(var(--fs-min,0px),11px);font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px;}
.ann h3{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);margin:0 0 12px;}
.ann .loc{font-size:12.5px;font-weight:700;color:var(--ink);}
.ann .pub{font-size:max(var(--fs-min,0px),11.5px);color:var(--meta);margin-top:3px;}

/* ===== L'EXPO ===== */
.expo{padding:30px 0 46px;border-top:1px solid var(--line);}
/* BLOC-51 : sur l'accueil, pas de filet gris entre les annonces et L'Expo. */
.home-bands .expo{border-top:0;}
/* Rampe de logos exposants. La piste porte deux fois la meme rangee et se
   translate de la moitie de sa largeur : la seconde rangee occupe exactement
   la place de la premiere quand l'animation reboucle, le raccord ne se voit
   pas. La duree est posee par le rendu, trois secondes par logo, pour que la
   vitesse ne depende pas du nombre d'exposants. */
.logo-ramp{overflow:hidden;}
.logo-ramp .ramp-track{display:flex;width:max-content;
  animation:logo-ramp-defile var(--ramp-duration,300s) linear infinite;}
.logo-ramp .ramp-row{display:flex;align-items:center;gap:34px;padding-right:34px;}
/* BLOC-26 et EXPO-09 : plus de fond gris sous les logos, sur la home comme sur
   la page L'Expo. Le logo se tient seul sur le fond de page. */
.logo-ramp .lg{flex:none;width:130px;height:64px;background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-texte-doux);font-size:13px;font-weight:600;}
.logo-ramp .lg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
/* Le survol et le focus clavier suspendent le defilement : on ne clique pas
   une cible qui bouge. */
.logo-ramp:hover .ramp-track,
.logo-ramp:focus-within .ramp-track{animation-play-state:paused;}
@keyframes logo-ramp-defile{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .logo-ramp .ramp-track{animation:none;}
  .logo-ramp{overflow-x:auto;scrollbar-width:none;}
  .logo-ramp::-webkit-scrollbar{display:none;}
}

/* footer */
footer.site{background:var(--navy-deep);color:#cdd4e0;padding:48px 0;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;}
.foot-grid h5{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin:0 0 14px;}
.foot-grid a{display:block;font-size:13px;color:#aab3c5;padding:5px 0;}
.foot-grid a:hover{color:#fff;}
.foot-logo{font-weight:800;font-size:26px;color:#fff;margin-bottom:14px;}
/* AFF-13 : meme regle qu'au menu, le logo du pied de page passe tout blanc. */
.foot-logo b{color:#fff;}
.foot-grid p{font-size:12.5px;line-height:1.5;color:#9aa4b8;margin:0;max-width:30ch;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;font-size:12px;color:#8089a0;display:flex;gap:18px;}

/* ----- Groupes WP porteurs de la classe wrap (bandes, header, footer) ----- */
.wp-block-group.wrap{max-width:var(--largeur-max);margin:0 auto;padding-inline:var(--marge-laterale);}

/* ----- Pub : remplit la largeur du conteneur (le flex-stretch proto ne suffit
   pas dans le layout WP is-layout-constrained). Le max-width éventuel cape. ----- */
.ad { width: 100%; }

/* Titre de rubrique (core/query-title sur category.html) : nom du terme courant,
   barre rouge à gauche façon maquette. */
/* §6.3 — nom de rubrique : 26px, graisse 400, marqueur rouge de 3px. */
.rubrique-title { font-family: var(--font-titre); font-weight: 400; font-size: var(--fs-rubrique);
  line-height: var(--lh-rubrique); letter-spacing: var(--ls-rubrique); text-transform: uppercase;
  color: var(--c-encre); margin: var(--e5) 0 var(--e6); padding-left: var(--e3);
  border-left: 3px solid var(--c-rouge); }

/* ============== HOVERS (home branchée) ============== */
/* Médias devenus liens : <a> doit se comporter comme les div du proto. */
a.thumb, a.img, a.cover, a.ph { display:block; }
/* background:url() → <img> : la vignette remplit son conteneur en recadrage
   cover ; le conteneur porte la taille (hauteur fixe ou aspect-ratio). */
.thumb > img, .img > img, .cover > img,
.fiche-cover > img, .cat-visual > img, .exp-hero-bg > img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
/* Placeholder <img> (SVG data-URI) : remplit son conteneur, cover par défaut. */
.ph-img { width:100%; height:100%; object-fit:cover; }
/* Logos : image détourée, fond blanc porté par le conteneur. */
.logo-contain { width:100%; height:100%; object-fit:contain; }
.exp-card .logo { background:var(--c-papier); }
/* §6.11 — cartouches entreprises : arrondis et fond tramé. */
.exp-card{background:var(--c-trame);border-radius:var(--r-bloc);overflow:hidden;}
/* Poster vidéo : image de fond derrière les overlays (play / cadenas). */
.sv-media-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Titres d'articles : rouge au survol (cohérent .nav-links a:hover). */
.art-title a, .hero-card .txt h3 a, .vcard h3 a, .feature h3 a { color:inherit; }
.art-title a:hover, .hero-card .txt h3 a:hover, .vcard h3 a:hover, .feature h3 a:hover { color:var(--red); }
/* Items de rail (plus lus / liste) et rangées En bref. */
a.item:hover .t, a.row:hover p, a.ev:hover .pl, a.it:hover h3 { color:var(--red); }
/* Listes rouges (Top 5, accès rapide). */
.list-red a:hover { color:var(--red); }
/* Liens « Tout voir » : pill inversée, lk/lk2 rouges. */
a.pill:hover { background:var(--red); color:#fff; }
a.lk:hover, a.lk2:hover { color:var(--red); }
/* Logos expo. */
a.lg:hover { border-color:var(--navy); color:var(--navy); }
/* Médias : léger fondu au survol. */
a.thumb:hover, a.img:hover, a.cover:hover { opacity:.92; }

/* ============== CAROUSEL HERO (À la une) ============== */
/* Carousel slide : track flex translaté par state.trackTransform
   (translateX = -current*100%). Le viewport clippe ; la .tab.float reste
   hors-clip (sœur du viewport). Sans JS, track à translateX(0) → slide 0
   visible. La classe .is-active sert encore aux dots (état actif). */
.hero-viewport{overflow:hidden;}

/* Recette BLOC-36 : « possibilité d'un flou sur les côtés pour accentuer la
   visibilité ». Option, pas imposition : le dégradé n'est posé que sur un
   slider dont l'éditeur a coché « Estomper les bords ».

   `mask-image` plutôt qu'un calque en surimpression : le fond du site n'est
   pas toujours blanc, un dégradé opaque se verrait sur les bandes sombres. Le
   masque, lui, découpe le contenu quel que soit ce qu'il y a derrière. */
.hero.is-faded .hero-viewport,
.ga-slider.is-faded .cards-ga-viewport{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
}
/* Sous le palier mobile, le slider occupe toute la largeur : rogner ses bords
   y masquerait le début du titre. */
@media (max-width:767px){
  .hero.is-faded .hero-viewport,
  .ga-slider.is-faded .cards-ga-viewport{-webkit-mask-image:none;mask-image:none;}
}
.hero-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1);}
.hero .hero-card{flex:0 0 100%;min-width:0;}
.dots i{cursor:pointer;border:0;padding:0;}
.dots i:hover{background:var(--red-soft);}

/* ============== SONDAGE : formulaire de vote ============== */
/* Recette BLOC-17 : mêmes réponses avant le vote, même resserrement. */
.poll-form{display:flex;flex-direction:column;gap:6px;}

/* Recette BLOC-20 : fenêtre de confirmation après vote, réservée au visiteur
   à qui les résultats sont refusés. `popover` natif : la couche de fond, la
   fermeture au clavier et le clic extérieur sont fournis par le navigateur. */
.poll-modal{border:0;border-radius:var(--r);padding:var(--e5);max-width:360px;
  background:var(--c-papier);color:var(--c-encre);box-shadow:0 18px 48px -24px rgba(11,20,46,.55);}
.poll-modal::backdrop{background:rgba(11,20,46,.45);}
/* ABO-18 : le formulaire Entreprises s'ouvre en fenetre depuis « En savoir
   plus », au dessin de la fenetre du sondage, en plus large. */
.abo-popover{border:0;border-radius:var(--r-bloc);padding:var(--e6);width:min(680px,calc(100vw - 32px));
  background:var(--c-papier);color:var(--c-encre);box-shadow:0 18px 48px -24px rgba(11,20,46,.55);}
.abo-popover::backdrop{background:rgba(11,20,46,.45);}
.abo-popover-close{position:absolute;top:10px;right:12px;border:0;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--c-texte-doux);}
.abo-popover-close:hover{color:var(--c-encre);}
.abo-popover-open{cursor:pointer;}
.poll-modal-msg{font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);margin:0 0 var(--e4);}
.poll-modal-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.poll-modal-close{border:0;background:none;cursor:pointer;padding:0;
  font-family:var(--sans);font-size:12px;font-weight:600;color:var(--c-texte-doux);text-decoration:underline;}
.poll-modal-close:hover,.poll-modal-close:focus{color:var(--c-encre);}
.poll-choice{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;cursor:pointer;}
.poll-choice input{accent-color:var(--red);margin:0;flex:none;}
/* §6.2 — le bouton « Voter » est détaché du premier résultat. */
.poll-submit{align-self:flex-start;border:0;cursor:pointer;background:var(--c-rouge);color:var(--c-papier);
  font-family:var(--font-titre);font-weight:600;font-size:14px;letter-spacing:.01em;
  height:var(--h-bouton);padding:0 var(--e5);border-radius:var(--r-bouton);margin-top:var(--e2);margin-bottom:var(--e5);}
.poll-submit:hover{background:var(--c-rouge-h);}
.poll-submit:focus-visible{outline:2px solid var(--c-papier);outline-offset:2px;}
.poll-error{font-size:12px;color:var(--red);margin:4px 0 0;}
/* C7 (retour client du 2026-10-07) : confirmation durable du vote, à la place
   du formulaire, pour qui ne voit pas les résultats. */
.poll-done{font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);color:var(--c-texte);margin:0;}

/* ============== ARTICLE SPONSORISÉ ============== */
/* Mention « Sponsorisé par … » au-dessus des métas. */
/* §5.2 — mention d'annonceur : discrète, en italique, SANS fond ni cadre.
   Le nom de l'annonceur reprend le romain en 600. Interdit d'en faire une
   étiquette, sur toutes les pages, fond nuit compris. */
.sponsor-by{font-family:var(--font-texte);font-size:var(--fs-folio);line-height:var(--lh-folio);
  color:var(--c-texte-doux);font-style:italic;letter-spacing:.02em;margin-top:var(--e2);
  background:none;border:0;padding:0;}
.sponsor-by b,.sponsor-by strong,.d365-sponso b{font-style:normal;font-weight:600;color:var(--c-sponsor-nom);}
.d365-sponso{font-family:var(--font-texte);font-size:var(--fs-folio);line-height:var(--lh-folio);
  color:var(--c-texte-doux);font-style:italic;margin:var(--e2) 0 0;}

/* Fond gris très léger sur le bas de carte (cartes plates : image full-bleed conservée). */
.card.is-sponsored,
.mini.is-sponsored,
.ga.is-sponsored{background:#eef0f3;padding:0 13px 14px;border-radius:8px;overflow:hidden;}
.card.is-sponsored>.img,.card.is-sponsored>.ph,
.mini.is-sponsored>.img,.mini.is-sponsored>.ph,
.ga.is-sponsored>.img,.ga.is-sponsored>.ph{margin-left:-13px;margin-right:-13px;width:calc(100% + 26px);border-radius:0;}

/* Layouts en ligne (list-rows, pluslus) : pas de panneau gris, juste la mention. */

/* Vidéos : la vcard est navy par défaut → fond gris + texte repassé en sombre. */
/* §5.2 — carte sponsorisée : visuel et cartouche annonceur forment un bloc
   continu. Le visuel abandonne son rayon d'image (le haut est arrondi par
   l'`overflow` de la carte, au rayon de bloc), sinon ses angles bas restent
   ronds contre le cartouche. Le cartouche porte sa marge interne et son rayon
   bas : sans lui, il n'était arrondi que lorsqu'il atteignait le bas de la
   carte, d'où des angles différents d'une carte à l'autre. */
/* VID-05 : les cartes sponsorisees, rangees cote a cote sur fond nuit,
   posent leur texte sur un bleu plus clair, pas sur du blanc. Le texte reste
   blanc, la mention prend le folio nuit. Le slider principal n'est pas
   concerne, il n'a pas de carte. */
.vcard.is-sponsored .img{border-radius:0;}
.vcard.is-sponsored .vb{background:rgba(255,255,255,.09);padding-inline:var(--e4);
  border-radius:0 0 var(--r-bloc) var(--r-bloc);}
.vcard.is-sponsored .vb h3,
.vcard.is-sponsored .vb h3 a{color:var(--c-papier);}
.vcard.is-sponsored .vb h3 a:hover{color:var(--gold);}
.vcard.is-sponsored .vb .k{color:var(--red);}
.vcard.is-sponsored .vb p{color:var(--c-nuit-chapo);}
.vcard.is-sponsored .vb .spon,
.vcard.is-sponsored .vb .sponsor-by{color:var(--c-nuit-folio);}

/* ============== HABILLAGE (skin pub + site boxé, par topic) ============== */
/* Gabarit standard d'un habillage : bandeau haut (méga-bannière) + centre VIDE
   (la zone du site) + ailes latérales. Tout se dérive de la largeur du site
   (--maxw) via les ratios mesurés sur la créa de référence :
     - centre vide = 83.74 % de la largeur de l'image  → box du site = ce centre
     - bandeau haut = 16.74 % de la largeur du centre   → décalage du site
   Donc : image = --maxw / 0.8374, top = --maxw * 0.1674. Si une régie livre une
   créa au gabarit différent, ajuster ces deux ratios (ou les passer en option). */
:root{
  --habillage-center-ratio:0.8374; /* largeur centre vide / largeur image */
  --habillage-top:210px;           /* décalage haut du site (démarrage sous le bandeau) */
}

/* ---------------------------------------------------------------------------
   HABILLAGE — version corrigée (copie locale, diagnostic du 29/09/2026).
   Changements par rapport au thème :
   1. Le cadrage ne vise plus que le conteneur du site (.wp-site-blocks). L'ancien
      sélecteur `.has-habillage > :not(.habillage)` touchait aussi les popovers
      enfants de body (#parresia-auth-modal, #parresia-signup-prompt), la barre
      d'admin et les éléments fixes : fenêtre de connexion hors écran après
      défilement, à toutes les largeurs (NAV-3, FIX-1/2, NAV-6, MODAL-1).
   2. Le fond blanc est porté par le conteneur du site et non plus par <main> :
      rubriques, Masterclass, Formations, Annonces et articles n'ont pas de
      <main> englobant, leur texte tombait sur le bleu du skin (FOND-1/2, PIED-1).
      Les pages vidéo gardent leur fond sombre (FOND-3).
   3. Le visuel occupe 100 % de la largeur visible : Advanced Ads pose un style
      en ligne « max-width:100% » qui le bridait à 50 % (LARG-6, HAB-IMG-1).
   4. Bande haute plafonnée à 160 px. Largeur du site, colonnes et en-tête :
      voir « HABILLAGE — BANDES CONSTANTES » en fin de feuille (site = écran
      − 360 px, de 920 à 1600 px ; colonnes 160 / 220 px, 200 / 300 dès 1920 ;
      pavés 300 × 250 affichés en 220 × 183 de 1100 à 1919 px). Le chevauchement
      OMNI / Actualités disparaît à toutes les largeurs (LARG-1/2/4).
   5. Toutes les règles d'habillage sont limitées à ≥ 1100 px : en dessous, la
      page est strictement celle sans habillage (ALIGN-1, BASCULE-1).
   Gabarit de créa associé (image maître 1920 × 1200) : bande haute utile
   y 0–178, ailes utiles x 0–140 et 1780–1920, bords fondus dans #0d2545.
   --------------------------------------------------------------------------- */
.habillage{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;background:#0d2545;
}
/* L'image s'étale sur la largeur visible (barre de défilement exclue) :
   pas de débord, donc plus besoin de la recentrer. */
.habillage > *{position:absolute;top:0;left:0;right:0;}
.habillage a{pointer-events:auto;display:block;}
.habillage img{display:block;width:100% !important;max-width:none !important;height:auto !important;}

/* Complément exact du palier ≥ 1100 px. L'ancienne règle `max-width:1279px`,
   face à `min-width:1280px`, laissait une largeur fractionnaire (zoom 110 %,
   125 %...) tomber entre les deux paliers : skin affiché par-dessus un site non
   boxé. */
@media not all and (min-width:1100px){
  .habillage{display:none;}
}

@media (min-width:1100px){
  body.has-habillage{
    background:transparent;
    /* PUB-03 : une respiration entre la méga-bannière et l'en-tête. */
    --habillage-gap:18px;
    --habillage-top:min(calc(100vw * 0.1402), 160px);
    padding-top:calc(var(--habillage-top) + var(--habillage-gap));
  }
  /* Site BOXÉ au-dessus du skin : seul le conteneur du site est visé. */
  body.has-habillage > .wp-site-blocks{
    position:relative;z-index:1;
    max-width:var(--largeur-max);
    margin-inline:auto;
    background:#fff;
  }
  body.has-habillage.videos-page > .wp-site-blocks,
  body.has-habillage.videos-page main{background:#06062b;}
  body.has-habillage:not(.videos-page) .wp-site-blocks > main{background:#fff;}
  body.has-habillage .wp-site-blocks > main{margin-top:0;}
  /* 404, page, recherche, archive : <main> « constrained » sans marge interne,
     l'espace sous la navigation venait de la marge supprimée ci-dessus. */
  body.has-habillage .wp-site-blocks > main.is-layout-constrained{padding-top:var(--wp--style--block-gap, var(--wp--preset--spacing--md));}
  body.has-habillage .wp-block-columns.body-cols{max-width:100%;}
}

/* Recette du 2026-09-29 (U-07) : sous habillage, la box se resserre (1000 px
   entre 1280 et 1439 px d'ecran) mais les colonnes suivaient la largeur de
   l'ECRAN : 200 px a gauche, 300 a droite, gouttieres de 40. Il restait
   420 px au contenu, sous son minimum (524). La colonne gauche devient
   relative a la box (14 %, bornee a 140-200 px), la colonne droite aussi
   (22 %, bornee a 250-300 px : 250 est deja sa largeur entre 1279 et 1439 px,
   les paves publicitaires s'y adaptent) et les gouttieres se resserrent. */
@media (min-width:1280px){
  body.has-habillage{--col-gauche:clamp(140px,14%,200px);--col-droite:clamp(250px,22%,300px);--gouttiere:20px;}
}
@media (min-width:1680px){
  body.has-habillage{--gouttiere:28px;}
}
@media (min-width:1920px){
  body.has-habillage{--gouttiere:40px;}
}

/* Barre épinglée compactée de 1536 à 1679 px (NAV-1, NAV-5, LARG-3) : écarts
   et logo réduits. De 1100 à 1535 px, un compactage plus poussé est en fin de
   feuille (« HABILLAGE — BANDES CONSTANTES »). */
@media (min-width:1536px) and (max-width:1679.98px){
  body.has-habillage.is-nav-pinned .main-nav-row .wp-block-navigation,
  body.has-habillage.is-nav-pinned .main-nav-row .wp-block-navigation__container{gap:14px !important;}
  body.has-habillage.is-nav-pinned .nav-pin-brand .logo--svg img{height:20px;}
  body.has-habillage.is-nav-pinned .nav-pin-actions .topbar-actions{gap:10px;}
}

/* Barre épinglée : la police de 12,5 px prévue plus haut était écrasée par la
   classe WordPress `.has-px-14-font-size` (!important), posée sur le nav et le ul. */
@media (min-width:1064px){
  body.is-nav-pinned .main-nav-row .wp-block-navigation.has-px-14-font-size,
  body.is-nav-pinned .main-nav-row .wp-block-navigation .has-px-14-font-size{font-size:12.5px !important;}
}

/* NAV-7 : le voile d'un popover (menu, recherche, connexion) laissait passer
   le clic vers ce qui est dessous — pub de l'habillage, bannière flottante ou
   lien d'article. */
body:has(:popover-open) .wp-site-blocks,
body:has(:popover-open) .habillage a,
body:has(:popover-open) .habillage-flottant{pointer-events:none;}
:popover-open{pointer-events:auto;}

/* ---------------------------------------------------------------------------
   BANNIÈRE FLOTTANTE (mobile et tablette, < 1100 px) — prototype 29/09/2026.
   Sous 1100 px l'habillage n'a plus de place : il se transforme en bannière
   flottante pleine largeur en bas d'écran (bande bleu nuit d'un bord à l'autre,
   visuel 640×200 centré). Largeur du visuel = min(écran, 400 px, 80 % de la
   hauteur) : jusqu'à 400×125 en portrait, et jamais plus de 25 % de la hauteur
   visible, paysage compris (plafond de 30 % des normes Better Ads pour une
   annonce collante). Croix de fermeture ronde sur le bord haut, cible tactile de
   44 px. La page réserve la place en bas (fin du contenu, pied de page, focus
   clavier) et la bannière n'est jamais imprimée.
   --------------------------------------------------------------------------- */
.habillage-flottant{display:none;}
@media not all and (min-width:1100px){
  body.has-habillage-flottant{--hf-w:min(100vw, 400px, 80svh);}
  body.has-habillage-flottant:not(.habillage-flottant-ferme) .habillage-flottant{
    display:block;position:fixed;z-index:900;left:0;right:0;bottom:0;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:#0d2545;
    box-shadow:0 -6px 20px rgba(11,20,46,.28);
  }
  .habillage-flottant__pub{width:var(--hf-w);aspect-ratio:320 / 100;margin-inline:auto;overflow:hidden;}
  .habillage-flottant__pub > *{margin:0 !important;}
  .habillage-flottant a{display:block;}
  .habillage-flottant img{display:block;width:100% !important;max-width:none !important;height:auto !important;}
  .habillage-flottant__fermer{
    position:absolute;top:-13px;right:10px;width:26px;height:26px;padding:0;
    display:grid;place-items:center;border-radius:50%;cursor:pointer;
    border:2px solid #fff;background:#0E1B3C;color:#fff;
    font:700 16px/1 var(--font-titre, system-ui), system-ui, sans-serif;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
  }
  .habillage-flottant__fermer::before{content:"";position:absolute;inset:-9px;}
  .habillage-flottant__fermer:focus-visible{outline:2px solid #F0C419;outline-offset:2px;}
  body.has-habillage-flottant:not(.habillage-flottant-ferme){
    padding-bottom:calc(var(--hf-w) * .3125 + env(safe-area-inset-bottom, 0px));
  }
  /* WCAG 2.4.11 : un lien atteint au clavier n'est jamais caché sous la bande. */
  html:has(body.has-habillage-flottant:not(.habillage-flottant-ferme)){
    scroll-padding-bottom:calc(min(100vw, 400px, 80svh) * .3125 + env(safe-area-inset-bottom, 0px));
  }
}
@media print{
  .habillage-flottant{display:none !important;}
  body.has-habillage-flottant{padding-bottom:0 !important;}
}

/* ============== RUBRIQUE (blocs loop category-cards / category-list) ============== */
/* Remplir le conteneur même dans un groupe en mise en page « contrainte »
   (sinon cap au contentSize 720px → cartes étroites vs la home). Le cap WP
   `.wp-block-group.is-layout-constrained > :where(*)` a une spécificité (0,2,0)
   qui bat un sélecteur de classe simple → override ciblé assumé pour ces blocs
   loop qui doivent toujours remplir leur colonne.
   §6.3 — le titre de rubrique suit la même règle : capé, il serait recentré par
   les marges `auto` du gabarit contraint et son filet rouge se décalerait de
   l'arête gauche des cartes. Largeur libre = marges `auto` nulles = ferré à gauche. */
.parresia-category-cards,
.parresia-category-list,
.rubrique-title{max-width:none !important;}

/* « En voir plus » (charge la fournée suivante, Interactivity). */
.more-btn{display:flex;justify-content:center;padding:30px 0 4px;}
.more-btn[hidden]{display:none;}
.more-btn a{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer;}
.more-btn .plus{width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:400;line-height:1;}
.more-btn a:hover{color:var(--red);}
.more-btn a:hover .plus{border-color:var(--red);}

/* Les grilles à 3 colonnes passent à 2 quand la colonne centrale ne peut plus
   les porter. Seuil abaissé de 1319 à 1200 le 2026-08-28 (recette AFF-01 et
   AFF-02) : le client travaille sur un 1920x1080 mis à l'échelle à 150 %, soit
   un viewport de 1280px CSS, où l'ancien seuil rabattait les blocs à 2 cartes
   et faisait passer la 3e dessous.
   Ce seuil ne suit VOLONTAIREMENT pas le décalage de 40px des paliers de rails
   (cf. tokens.css) : il est posé bas pour couvrir 1280px CSS dans tous les
   navigateurs, y compris ceux qui retirent la barre de défilement de la largeur
   vue par les media queries.
   Contrepartie assumée : entre 1201 et 1279px la colonne centrale tombe à
   625px, soit des cartes de 194px contre 258px à 1440px. Si ces cartes-là sont
   jugées trop étroites, remonter le seuil à 1239px plutôt que de revenir à 1319.
   Placé AVANT le bloc ≤1063px qui suit : à ≤1063 les deux media matchent, le
   bloc 1063 gagne (même spécificité, source postérieur) et impose 1 colonne. */
@media (max-width:1200px){
  .cards3,.cards4,.cards-ga,.vid-grid,.ann-grid{grid-template-columns:repeat(2,1fr);}
}
.more-btn a[aria-busy="true"]{opacity:.5;pointer-events:none;}

/* ============== RESPONSIVE HOME (≤ tablette portrait) ============== */
/* §3.1, palier 768–1023 : on garde DEUX colonnes — centre + rail droit (300px,
   largeur imposée par le pavé 300×250, cf. §3.4) — et le rail GAUCHE repasse
   sous le contenu principal (§3.2).
   `display:grid` neutralise les flex-basis inline posées par Gutenberg (plus de
   contexte flex), et le placement explicite remplace `order`. */
@media (max-width:1063px){
  .wp-block-columns.body-cols{
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--col-droite);
    gap:var(--gouttiere);
    padding-block:var(--e5) var(--e2);
  }
  .body-cols>.center{grid-column:1;grid-row:1;}
  .body-cols>.rail-right{grid-column:2;grid-row:1;}
  .body-cols>.rail-left{grid-column:1 / -1;grid-row:2;}

  /* §3.3 — le rail gauche n'a plus de gouttière verticale : son filet tombe. */
  .body-cols>.rail-left::after,
  .an-grid>.rail-left::after{display:none;}

  /* §3.2 — la couverture du dernier numéro sort du rail gauche reporté :
     redondante avec le kiosque en pied de page. Les trois modules restants
     gardent leur ordre de composition (Top 5, Les plus lus, Accès rapide). */
  .body-cols>.rail-left .magbox{display:none;}

  /* Vidéos & Annonces → carousel 1×1 (swipe natif via scroll-snap, sans JS). */
  .vid-grid,.ann-grid{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  /* RESP-14 : la recette rapporte que le site « bouge de gauche a droite ».
     Aucun debordement de page mesure ; ce sont les carrousels qui captent les
     gestes verticaux legerement obliques, puis propagent leur fin de course a
     la page. `contain` arrete la propagation au bout de la piste.
     Recette du 2026-09-29 (F-02) : `touch-action:pan-y` seul interdisait le
     geste horizontal, les carrousels ne defilaient plus au doigt. `pan-x pan-y`
     rend les deux gestes. */
  .vid-grid,.ann-grid,.cards-ga,.cards-ga-track,
  .subnav-row,.vid-subnav .subnav-row{
    overscroll-behavior-x:contain;touch-action:pan-x pan-y;
  }
  .vid-grid>.vcard,.ann-grid>.it{flex:0 0 100%;scroll-snap-align:start;}

  /* Expo : la rampe defile deja toute seule, a toute largeur. Le carousel
     2x2 au doigt qui la remplacait en mobile n'a plus lieu d'etre. */

  /* Scrollbar des carousels masquée (cosmétique). */
  .vid-grid,.ann-grid{scrollbar-width:none;}
  .vid-grid::-webkit-scrollbar,
  .ann-grid::-webkit-scrollbar{display:none;}

  /* Hero « À la une » : image masquée en mobile, titre + contenu pleine largeur.
     Le visuel disparaissant, plus rien ne donne sa hauteur a la carte : le
     plancher supprime en grand ecran revient ici, et ici seulement. */
  .hero .hero-card{min-height:230px;}
  .hero .hero-card .img{display:none;}
  .hero .hero-card{grid-template-columns:1fr;}
  .hero .hero-card p{max-width:none;}

  /* Rubriques (category-free) : grilles empilées 1 carte par ligne. */
  .cards3,.rows-2col{grid-template-columns:1fr;}
  /* R13-10 : en une colonne, chaque article est une rangee : un filet sous
     chacun sauf le dernier, et le deuxieme reprend sa marge haute. */
  .rows-2col .row:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--c-filet);}
  .rows-2col .row:nth-child(2){padding-top:18px;}

  /* RESP-09 : trois articles superposes gardent leur rangee, petite vignette
     a gauche et texte a droite, comme Le Point. */
  .list-rows .row{flex-direction:row;gap:var(--e4);}
  .list-rows .thumb{width:110px;aspect-ratio:1000/550;}
  .list-rows .art-title{font-size:var(--fs-titre-s);line-height:var(--lh-titre-s);}

  /* RESP-11 et RESP-08 : trois cartes cote a cote defilent au doigt, la
     suivante depasse pour inviter au geste. */
  .cards-ga{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:4px;}
  .cards-ga::-webkit-scrollbar{display:none;}
  .cards-ga>.ga{flex:0 0 84%;scroll-snap-align:start;}

  /* RESP-10 : la mini-grille deux par deux devient deux articles superposes
     avec l'amorce des deux suivants a cote. */
  .cards4{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:84%;
    gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .cards4::-webkit-scrollbar{display:none;}
  .cards4>.mini{scroll-snap-align:start;}

  /* RESP-08 : un slider pagine se manipule aussi au doigt, pastilles et
     fleches en retrait. Le style inline du store est neutralise. */
  .cards-ga-track{transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:16px;}
  .cards-ga-track::-webkit-scrollbar{display:none;}
  .cards-ga-page{flex:0 0 84%;scroll-snap-align:start;}
  /* Recette du 2026-09-29 (U-01) : une page de slider portait une grille qui
     defilait elle aussi, deux defilements imbriques sur 328 px, cartes
     ecrasees. Sur mobile, pages et grilles de cartes se dissolvent : chaque
     carte devient une diapositive de la piste. Les listes gardent leurs
     pages, elles ne defilent pas en interne. */
  .cards-ga-page:has(> :is(.cards-ga,.cards4,.vid-grid)),
  .cards-ga-page > :is(.cards-ga,.cards4,.vid-grid){display:contents;}
  .cards-ga-page > :is(.cards-ga,.cards4,.vid-grid) > *{flex:0 0 84%;min-width:0;scroll-snap-align:start;}
  /* `.ga-arrow` seul (0,1,0) perdait contre le style de base des fleches,
     declare plus loin : sur mobile, les fleches restaient affichees sur une
     piste qui defile au doigt et ne repondaient plus (recette 2026-09-29). */
  .ga-slider .dots,.ga-slider .ga-arrow,.sa-gallery .ga-arrow{display:none;}
  .vid-grid>.vcard,.ann-grid>.it{flex:0 0 84%;}
  /* R13-15, defaut voisin (RESP-31) : les modules de l'espace video ont leur
     propre piste (`vid-slider-*`), que U-01 ne couvrait pas. Les points
     translataient la piste pendant que chaque page defilait au doigt dans un
     cadre qui coupait le reste. Meme traitement que les sliders de rubrique :
     la piste devient le seul defilement, les pages se dissolvent, chaque
     video est une diapositive, points masques. */
  .vid-slider-track{transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:16px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;}
  .vid-slider-track::-webkit-scrollbar{display:none;}
  .vid-slider-track > .vid-slider-page{display:contents;}
  .vid-section .dots{display:none;}
  /* R13-19 (RESP-34) : les annonces a la une passent par le meme slider
     pagine, mais leur grille (`.featured-une`) n'etait pas dissoute : chaque
     page de 84 % empilait ses trois cartes, « superposees sur deux
     colonnes » (1 152 px a 390). Elles deviennent des diapositives de la
     piste ; sous quatre annonces, sans slider, la grille defile elle-meme. */
  .cards-ga-page:has(> .featured-une),
  .cards-ga-page > .featured-une{display:contents;}
  .cards-ga-page > .featured-une > *{flex:0 0 84%;min-width:0;scroll-snap-align:start;}
  section.featured-une{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;}
  section.featured-une::-webkit-scrollbar{display:none;}
  section.featured-une > *{flex:0 0 84%;min-width:0;scroll-snap-align:start;}
}

/* ============== RAIL GAUCHE EN TIROIR — DÉSACTIVÉ ==============
   La bande 1280–1440px sortait le rail gauche du flux dans un tiroir
   off-canvas. §3.1 impose au contraire le rail gauche EN FLUX à 200px dès
   1280px, et §11 exige « sidebar gauche visible jusqu'à 1024px CSS » : les
   règles du tiroir ont donc été retirées.
   Les trois `display:none` ci-dessous neutralisent le markup encore injecté au
   `wp_body_open` (cf. functions.php). Suppression complète — CSS + PHP +
   markup — à faire une fois la §3 validée. */
.rail-left-toggle{display:none;}
.rail-left-fab,.rail-left-scrim{display:none;}
/* nom accessible d'icône (texte lu par les lecteurs d'écran, invisible). */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ============================================================
   PAGE ARTICLE — partie centrale (paywall traité séparément)
   ============================================================ */
/* grille 2 colonnes : corps article + rail droit (§3.1, §3.4). */
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--col-droite);gap:var(--gouttiere);
  max-width:var(--largeur-max);margin-inline:auto;padding:var(--e6) var(--marge-laterale) var(--e2);}
/* Recette ART-01 : « la sidebar droite doit commencer sous l'image principale ».
   La bannière et l'en-tête prennent la rangée 1 sur TOUTE la largeur du
   conteneur, arbitrage du 03/09 : dès lors que le rail passe dessous, laisser
   la colonne de droite vide en rangée 1 creusait un trou. Le titre garde donc
   1fr et le visuel ses 45 %, mais des 1400px, pas des 1060. Le rail démarre en
   rangée 2, sous l'image d'ouverture. */
.art-grid>.art-top{grid-column:1 / -1;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:30px;}
.art-grid>.center{grid-column:1;grid-row:2;min-width:0;display:flex;flex-direction:column;gap:30px;}
.art-grid>.rail-right{grid-column:2;grid-row:2;}
.art-grid>.rail-right{min-width:0;display:flex;flex-direction:column;gap:26px;}
/* Fiche vidéo : sans colonne de droite, le texte prend toute la largeur
   (retour client du 2026-09-25). */
.art-grid.sv-grid{grid-template-columns:minmax(0,1fr);}
/* archive Annonces : mêmes 3 rails que la home (§3.1). */
.an-grid{display:grid;grid-template-columns:var(--col-gauche) minmax(0,1fr) var(--col-droite);gap:var(--gouttiere);
  max-width:var(--largeur-max);margin-inline:auto;padding:var(--e6) var(--marge-laterale) var(--e2);}
/* Retour du 2026-09-23 : la grille est un groupe en disposition « flow »,
   qui pose 24 px au-dessus de chaque enfant sauf le premier. Le centre et le
   rail droit demarraient donc 24 px sous le rail gauche (archives) ou sous le
   centre (fiches annonce et formation). Les colonnes partent du meme niveau. */
.wp-block-group.an-grid>*{margin-block-start:0;}
.an-grid>.rail-left{min-width:0;}
.an-grid>.center{min-width:0;display:flex;flex-direction:column;gap:16px;}
.an-grid>.rail-right{min-width:0;display:flex;flex-direction:column;gap:26px;}
/* §3.1 palier 768–1023 : centre + rail droit conservés, rail gauche reporté
   sous le contenu (§3.2). Même mécanique que `.body-cols`. */
@media (max-width:1063px){
  .an-grid{grid-template-columns:minmax(0,1fr) var(--col-droite);gap:var(--gouttiere);
    padding-block:var(--e5) var(--e2);}
  .an-grid>.center{grid-column:1;grid-row:1;}
  .an-grid>.rail-right{grid-column:2;grid-row:1;}
  .an-grid>.rail-left{grid-column:1 / -1;grid-row:2;}
  .an-grid>.rail-left .magbox{display:none;}
}

/* ============== §3.1 — PALIER MOBILE (< 768px) ==============
   Colonne unique, marges latérales `--marge-mobile`. Le rail droit passe sous
   le contenu, le rail gauche en dernier. Les filets de gouttière n'ont plus
   d'objet : plus aucune gouttière verticale. */
@media (max-width:767px){
  .wp-block-columns.body-cols,
  .art-grid,
  .an-grid{
    grid-template-columns:minmax(0,1fr);
    padding-inline:var(--marge-mobile);
  }
  /* header, pied de page, bandes et fil d'ariane suivent la même marge. */
  .wrap,
  .wp-block-group.wrap,
  .crumb-wrap{padding-inline:var(--marge-mobile);}
  /* RESP-13 : le fil d'Ariane reste sur mobile, il situe le lecteur qui
     arrive de Google, mais tient sur une seule ligne, coupe par des points
     de suspension plutot que replie sur deux ou trois lignes. */
  .crumb-wrap .crumb{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .crumb-wrap .crumb>*{display:inline;}
  .body-cols>.rail-right,
  .an-grid>.rail-right{grid-column:1;grid-row:2;}
  .body-cols>.rail-left,
  .an-grid>.rail-left{grid-column:1;grid-row:3;}
  /* `.art-grid` est déjà en colonne unique ordonnée depuis le palier 1024,
     rien à replacer ici. */

  /* plus aucune gouttière verticale : tous les filets tombent. */
  .body-cols>.rail-right::before,
  .an-grid>.rail-right::before,
  .art-grid>.rail-right::before{display:none;}
}

/* Recette du 2026-09-29 (U-05) : sur telephone, les colonnes laterales
   passaient entieres sous le contenu (Top 5, Les plus lus, Acces rapide,
   breves, sondage, agenda...) et allongeaient la page de plusieurs ecrans.
   Elles ne gardent que les paves publicitaires, la Masterclass et, sur un
   article de masterclass, la liste de ses chapitres. Sur l'accueil, des que
   la grille est reglee bloc par bloc (RESP-12, `m-flow`), ce reglage fait foi. */
@media (max-width:767px){
  .body-cols:not(.m-flow) > :is(.rail-left,.rail-right) > :not(.ad,.parresia-rubrique--feature,.wp-block-template-part),
  .art-grid > .rail-right > :not(.ad,.parresia-rubrique--feature,.sidebar_dossier){display:none;}
  /* R13-16 (RESP-32) : une colonne inseree par un element de modele (page
     L'Expo) a pour enfant direct son conteneur, qui n'est ni pub ni
     Masterclass : la regle ci-dessus masquait la colonne entiere. Le tri se
     fait sur les modules du conteneur. */
  .body-cols:not(.m-flow) > :is(.rail-left,.rail-right) > .wp-block-template-part > :not(.ad,.parresia-rubrique--feature){display:none;}
  /* R13-18 (RESP-32) : Formations et Annonces (`.an-grid`) empilaient leurs
     deux colonnes entieres sous la liste, pres de 4 700 px sur la preprod.
     Meme tri, plus le bouton de depot, seul acces au formulaire (D8). Une
     colonne sans rien a garder disparait, sans laisser sa gouttiere. */
  .an-grid > :is(.rail-left,.rail-right) > :not(.ad,.parresia-rubrique--feature,.deposit-btn){display:none;}
  .an-grid > :is(.rail-left,.rail-right):not(:has(> :is(.ad,.parresia-rubrique--feature,.deposit-btn))){display:none;}
}

/* RESP-12 : ordre mobile administrable. Dès qu'un bloc de la grille porte un
   réglage « Sur mobile » (éditeur, panneau du bloc), le serveur pose `m-flow`
   sur la grille, un rang `--m-order` sur chaque bloc et `m-hide` sur les
   blocs masqués (`Mobile_Order`, parresia-blocks). Les colonnes et le groupe
   central se dissolvent : les blocs deviennent les rangées de la grille à
   une piste, rangées par `order`. Pas de flex ici : `.wp-block-columns`
   impose `flex-wrap:wrap!important` sous 782 px, et la ligne flex prendrait
   la largeur du bloc le plus large. La colonne centrale ne pouvant plus
   servir de conteneur `colonne`, la grille prend le relais pour
   `.list-rows`. Sans réglage, rien ne change. */
@media (max-width:767px){
  .wp-block-columns.body-cols.m-flow{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;
    container-type:inline-size;container-name:colonne;}
  .body-cols.m-flow>.wp-block-column,
  .body-cols.m-flow .m-flat{display:contents;}
  .body-cols.m-flow .m-item{order:var(--m-order);margin-block:0;min-width:0;}
  .body-cols.m-flow .m-hide{display:none;}
}

/* R13-12 : « Masquer sur desktop » (panneau du bloc, bandes pleine largeur).
   Le serveur pose `d-hide` ; le bloc n'existe que sous 768 px. */
@media (min-width:768px){
  .d-hide{display:none;}
}

/* pub bannière inline (990×122) */
.ad:not(.ad--live).banner990{height:122px;}

/* fil d'ariane */
.crumb{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--meta);
  letter-spacing:.02em;margin:0;}
.crumb a{color:var(--meta);}
.crumb a:hover{color:var(--red);}
.crumb .sep{color:var(--line-2);}
.crumb .here{color:var(--red);}

/* en-tête article : titre/byline à gauche, visuel à droite */
.art-head{margin:0;}
.art-head-row{display:grid;grid-template-columns:1fr 45%;gap:30px;align-items:start;}
/* §6.4 — plus d'étiquette de rubrique en tête d'article : la rubrique devient
   un sur-titre, sur la même échelle que les cartes (§5.2). */
.art-head-txt .art-surtitre{display:flex;flex-wrap:wrap;gap:var(--e2);margin:0 0 var(--e-surtitre-titre);}
.art-head-txt .art-surtitre a{color:var(--c-rouge);text-decoration:none;}
.art-head-txt .art-surtitre .wp-block-post-terms__separator{display:none;}


/* Chapô sous le titre, resserré (§2.2).
   Recette ART-04 : il pesait 15px contre 16px au texte courant, donc plus
   LEGER que ce qu'il annonce. Il prend son propre cran, --fs-chapo-article,
   plutôt que de grossir --fs-chapo, partagé avec les cartes et les encarts. */
/* Le chapo se detache du texte courant par la graisse autant que par le corps :
   600 est le cran le plus gras de Source Serif 4 charge par le theme. */
.art-head-txt .art-chapo,
.art-grid>.center>.art-chapo{font-family:var(--font-texte);font-size:var(--fs-chapo-article);
  line-height:var(--lh-chapo-article);font-weight:600;color:var(--c-texte);margin:var(--e3) 0 0;}
.art-head-txt .art-chapo p{margin:0;}
/* ART-26 : le chapo ouvre le texte, l'en-tete ne garde que titre, signature
   et actions, alignes sur le haut du visuel. */
.art-grid>.center>.art-chapo{margin:0 0 var(--e5);}
.art-grid>.center>.art-chapo p{margin:0;}
/* Recette du 2026-09-29 (U-18) : sans sommaire, le chapo enchaine sur le
   texte comme un paragraphe sur le suivant. L'ecart cumulait la marge du
   chapo, la marge de flux de WordPress et l'espacement de la colonne (74 px).
   Le chapo perd sa marge ; le texte, qui le suit directement, annule les deux
   autres (le -30 px compense le `gap` de `.center`). Reste la marge du
   premier paragraphe, 16 px. Avec un sommaire, rien ne change : il s'intercale
   et le selecteur d'adjacence ne s'applique plus. Le sommaire est rendu
   `hidden` puis revele par son script ; reste masque, il compte pour absent. */
.art-grid>.center>.art-chapo:is(:has(+ .prose),:has(+ .toc[hidden] + .prose)){margin-bottom:0;}
.art-grid>.center>.art-chapo + .prose,
.art-grid>.center>.art-chapo + .toc[hidden] + .prose{margin-block-start:-30px;}
.art-head-txt .cat-tag a,.art-head-txt .tag{display:inline-block;background:var(--navy);color:#fff;
  font-size:max(var(--fs-min,0px),11px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:4px;}
.art-head-txt .cat-tag a{margin-right:6px;}
.art-head-txt .cat-tag .wp-block-post-terms__separator{display:none;}
.art-head-txt .wp-block-post-title,.art-head-txt h1{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-une);line-height:var(--lh-une);
  line-height:1.12;letter-spacing:-.015em;color:var(--ink);margin:0 0 18px;text-wrap:balance;}
.art-byline{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.art-byline .who{display:flex;align-items:center;gap:11px;}
/* §6.4 — l'auteur prend la même teinte que la date. */
/* MC-06 : la signature est en gras, ce sont les auteurs, pas une mention. */
.art-byline .au{font-family:var(--font-texte);font-size:var(--fs-folio);font-weight:700;color:var(--c-encre);}
.art-byline .au::before{content:"Par ";}
.art-byline .dt{font-family:var(--font-texte);font-size:var(--fs-folio);color:var(--c-texte-doux);margin-top:2px;}
.art-byline .dt::before{content:"Publié le ";}
/* Les trois actions sur une seule ligne, centrées sur leur axe. Le retrait du
   haut passe sur le groupe : porté par chaque bouton, il les décalait les uns
   des autres, la pilule et le cœur n'ayant pas la même hauteur de boîte. */
.art-byline .art-actions{display:flex;align-items:center;gap:10px;margin-top:11px;}
.art-byline .art-actions .save,
.art-byline .art-actions .fav,
.art-byline .art-actions .share-wrap{margin-top:0;}
.art-byline .save,.sv-actions .save{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:20px;
  padding:7px 14px;font-size:max(var(--fs-min,0px),11.5px);font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  background:#f4f5f7;color:var(--navy);margin-top:11px;transition:.15s;}
.art-byline .save svg{width:15px;height:15px;}
.art-byline .save:hover{border-color:var(--red);color:var(--red);}
/* favori (recette ART-05, ART-17) : picto seul, même gabarit rond que le
   partage. Actif, le cœur se remplit du rouge de marque, c'est le seul signal
   visuel de l'état, l'intitulé accessible portant le reste. */
.art-byline .fav,.sv-actions .fav{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line-2);border-radius:50%;background:#f4f5f7;color:var(--navy);
  cursor:pointer;transition:.15s;padding:0;margin-top:11px;}
.art-byline .fav svg{width:17px;height:17px;}
.art-byline .fav:hover{border-color:var(--red);color:var(--red);}
.art-byline .fav[data-saved="1"]{border-color:var(--red);color:var(--red);}
.art-byline .fav[data-saved="1"] svg{fill:currentColor;}

/* Boite d'incitation ouverte par « Favori » et « Lire plus tard » quand le
   lecteur n'est pas connecte. Popover natif : aucun script pour l'ouvrir. */
.pep-prompt{
  position:fixed;inset:0;margin:auto;width:min(340px,calc(100vw - 32px));height:fit-content;
  padding:26px 24px 22px;border:1px solid var(--c-filet);border-radius:var(--r-bloc);
  background:var(--c-papier);box-shadow:0 18px 48px -18px rgba(14,27,60,.38);
  text-align:center;
}
.pep-prompt::backdrop{background:rgba(14,27,60,.34);}
.pep-prompt__close{
  position:absolute;top:8px;right:10px;border:0;background:none;cursor:pointer;
  font-size:22px;line-height:1;color:var(--c-texte-doux);padding:4px;
}
.pep-prompt__close:hover{color:var(--c-encre);}
.pep-prompt__intro{
  font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);
  color:var(--c-texte-doux);margin:0 0 6px;
}
.pep-prompt__title{
  font-family:var(--font-titre);font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);
  font-weight:700;color:var(--c-encre);margin:0 0 18px;
}
.pep-prompt__cta{
  display:block;width:100%;height:var(--h-bouton);border:0;border-radius:var(--r-bouton);
  background:var(--c-jaune);color:var(--c-encre);cursor:pointer;
  font-family:var(--font-titre);font-size:14px;font-weight:800;letter-spacing:.02em;
}
.pep-prompt__cta:hover{background:var(--c-jaune-h);}
.pep-prompt__alt{
  font-family:var(--font-texte);font-size:13.5px;color:var(--c-texte-doux);margin:14px 0 0;
}
.pep-prompt__link{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--font-titre);font-size:13.5px;font-weight:700;color:var(--c-rouge);
  text-decoration:underline;text-underline-offset:2px;
}
.pep-prompt__link:hover{color:var(--c-rouge-h);}
/* partage : bouton icône + box des liens sociaux */
.share-wrap{position:relative;margin-top:11px;}
.share{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line-2);border-radius:50%;background:#f4f5f7;color:var(--navy);
  cursor:pointer;transition:.15s;padding:0;}
.share svg{width:16px;height:16px;}
.share:hover,.share[aria-expanded="true"]{border-color:var(--red);color:var(--red);}
.share-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:170px;
  background:#fff;border:1px solid var(--line-2);border-top:3px solid var(--navy);
  border-radius:4px;box-shadow:0 12px 30px rgba(17,32,63,.14);padding:6px;}
.share-menu[hidden]{display:none;}
.share-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:3px;
  font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;}
.share-link:hover{background:#f4f5f7;color:var(--red);}
.share-link__ic{display:inline-flex;width:18px;height:18px;color:var(--navy);flex:none;}
.share-link:hover .share-link__ic{color:var(--red);}
.share-link__ic svg{width:18px;height:18px;}

/* ===== Paywall (teaser + box CTA) ===== */
.paywall-teaser{position:relative;}
.paywall-teaser::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7em;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 60%,#fff 100%);}
/* ART-37 : structure et couleurs des captures du client. Bandeau jaune soutenu
   en tête (statut de l'article et lien de connexion), corps jaune pâle, titre,
   ligne en grand, bouton jaune. Les deux fonds dérivent du jaune abonnement :
   aucune couleur propre au paywall. Replis hexadécimaux pour les navigateurs
   sans color-mix(). */
.paywall-box{background:#fbf0c6;background:color-mix(in srgb,var(--c-jaune) 25%,var(--c-papier));
  margin:8px 0 28px;text-align:center;}
.paywall-box .pw-band{background:#f6dc75;background:color-mix(in srgb,var(--c-jaune) 60%,var(--c-papier));
  font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:1.4;color:var(--c-texte);
  padding:6px var(--e5);margin:0;}
.paywall-box .pw-band a:not([class]){color:var(--c-encre);font-weight:700;text-decoration:underline;}
.paywall-box .pw-body{padding:var(--e6) var(--e5) var(--e7);}
.paywall-box .pw-title{font-family:var(--font-titre);font-size:var(--fs-titre-l);line-height:var(--lh-titre-l);
  font-weight:700;color:var(--c-encre);margin:0 0 var(--e3);}
/* La box vit dans `.prose` : ni le tiret des intertitres, ni le rouge des
   liens de paragraphe (ART-25), absents des captures. */
.paywall-box .pw-title::before{display:none;}
.paywall-box .pw-lead{font-family:var(--font-texte);font-size:var(--fs-titre-l);line-height:1.35;
  color:var(--c-encre);max-width:34em;margin:0 auto var(--e5);}
.paywall-box .pw-lead a:not([class]){color:var(--c-encre);text-decoration:underline;}
/* §5.4 : le CTA d'abonnement du paywall suit la règle du jaune. */
.paywall-box .pw-btn{display:inline-flex;align-items:center;justify-content:center;min-width:200px;
  box-sizing:border-box;min-height:var(--h-bouton);padding:0 var(--e6);border-radius:var(--r-bouton);
  background:var(--c-jaune);color:var(--c-encre);border:1px solid var(--c-jaune);
  font-family:var(--font-titre);font-size:15px;font-weight:700;letter-spacing:.01em;text-decoration:none;
  transition:background var(--wp--custom--transition--fast);}
.paywall-box .pw-btn:hover{background:var(--c-jaune-h);border-color:var(--c-jaune-h);color:var(--c-encre);}
.paywall-box .pw-btn:focus-visible{outline:2px solid var(--c-encre);outline-offset:2px;}
/* Recette du 2026-09-29 (F-09) : fenetre « reserve aux abonnes » du kiosque,
   le cartouche paywall pose dans une fenetre (API Popover). */
.kio-paywall[popover]{border:0;padding:0;background:transparent;width:min(560px,calc(100% - 32px));overflow:visible;}
.kio-paywall::backdrop{background:rgba(10,16,30,.55);}
.kio-paywall .paywall-box{margin:0;border-radius:8px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.25);}
.kio-paywall-close{position:absolute;top:8px;right:8px;z-index:1;width:32px;height:32px;border:0;border-radius:50%;
  background:transparent;color:var(--c-encre);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.kio-paywall-close svg{width:18px;height:18px;}
.kio-paywall-close:hover{background:rgba(0,0,0,.06);}
.kio-paywall .pw-band{padding-inline:44px;}
.kio-paywall-login{border:0;background:none;padding:0;font:inherit;color:var(--c-encre);font-weight:700;
  text-decoration:underline;cursor:pointer;}
@media(max-width:576px){.paywall-box .pw-btn{width:100%;}}

/* visuel d'ouverture */
.art-lead-fig{margin:0;}
/* Recette du 2026-09-29 (U-10) : la marge de flux de WordPress (24 px, posee
   sur le second enfant du groupe) descendait l'image sous le haut du titre.
   Sans elle, image et titre partent a la meme hauteur. Quand un surtitre
   precede le titre, l'image garde ce decalage : il vaut la ligne du surtitre
   (16 px) et son espace (8 px), l'image reste alignee sur le titre. */
.art-head-row > .art-lead-fig{margin-block-start:0;}
@media (min-width:1025px){
  .art-head-row:has(> .art-head-txt > .parresia-melody-kicker:first-child) > .art-lead-fig{margin-block-start:24px;}
}
.art-lead-fig .wp-block-post-featured-image{margin:0;}
.art-lead-fig img,.art-lead-fig .ph{width:100%;aspect-ratio:1000/550;object-fit:cover;border-radius:var(--r-image);display:block;}
/* Vidéo d'ouverture : le lecteur (façade `.sv-media`, partagée avec la fiche
   vidéo) prend la place de l'image, au même ratio 1000×550 et au même arrondi.
   Sur un article réservé, la carte de verrouillage du paywall couvre la
   vignette, comme sur la fiche vidéo. */
.art-lead-fig .art-cover{margin:0;}
.art-lead-fig .art-cover .sv-media-img{aspect-ratio:auto;border-radius:0;}
/* Aperçu éditeur du bloc : cadre au ratio, bouton inactif, note sous le cadre. */
.art-cover-preview .sv-play{pointer-events:none;}
.art-cover-preview-note{margin:8px 0 0;font-size:12px;color:var(--meta);}
/* ART-33 : la legende sur la premiere ligne, le credit photo sur la seconde,
   au lieu de les ecarter de part et d'autre de la meme ligne. */
.art-lead-fig figcaption,.prose figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:max(var(--fs-min,0px),11.5px);
  color:var(--meta);padding:9px 2px 0;border-bottom:1px solid var(--line);margin-bottom:4px;}
.art-lead-fig figcaption .cr,.prose figcaption .cr{font-style:italic;}
/* La legende suit l'image : la marge de 24 px que la disposition « flow » du
   groupe pose entre ses enfants l'en eloignait. */
.art-lead-fig > figcaption{margin-block-start:0;}

/* sommaire repliable */
html{scroll-behavior:smooth;}
.toc{border:1px solid var(--line-2);border-top:3px solid var(--navy);}
.toc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  background:#fff;border:0;padding:15px 16px;font-family:var(--sans);font-size:13px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);}
.toc-btn .chev{width:16px;height:16px;color:var(--red);transition:transform .2s;flex:none;}
.toc-btn[aria-expanded="true"] .chev{transform:rotate(180deg);}
.toc-body{display:none;padding:0 16px 14px;}
.toc-body.is-open{display:block;}
.toc ol{list-style:none;counter-reset:s;margin:0;padding:0;}
.toc ol li{counter-increment:s;font-family:var(--serif);font-size:13.5px;line-height:1.3;color:var(--ink);
  font-weight:700;padding:8px 0 8px 26px;position:relative;border-top:1px solid var(--line);}
.toc ol li:first-child{border-top:0;}
.toc ol li::before{content:counters(s,".")".";position:absolute;left:0;top:8px;color:var(--red);font-weight:800;}
/* ART-13 : sous-sections h3 et h4 numerotees 1.1 puis 1.1.2, en retrait et en
   graisse moindre, sans filet entre elles. */
.toc ol ol{margin-top:4px;}
.toc ol ol li{font-size:13px;font-weight:600;padding:5px 0 5px 34px;border-top:0;}
.toc ol ol li::before{content:counters(s,".");top:5px;font-weight:700;}
.toc ol ol ol li{padding-left:44px;font-weight:500;}
.toc a{color:inherit;}
.toc a:hover{color:var(--red);}

/* corps de l'article (prose) — la barre rouge des h2 est ajoutée en CSS
   pour que le contenu WordPress réel l'obtienne sans markup dédié. */
/* §2.1 — texte courant de l'article : serif, 17/1.65. */
.prose{font-family:var(--font-texte);font-size:var(--fs-courant);line-height:var(--lh-courant);color:var(--c-texte);}
.prose>.chapo,.prose .chapo{font-size:18px;line-height:1.55;font-weight:600;color:var(--ink);margin:18px 0 0;}
/* ART-14 : hierarchie h2 > h3 > h4 tenue par les jetons (22 / 18 / 16 px), le
   h2 garde sa barre rouge. Un h1 pose dans le corps (8 articles importes)
   n'a pas sa place sous le titre de l'article : il est rendu comme un h2. */
.prose h1,.prose h2{font-family:var(--font-titre);font-size:var(--fs-titre-l);line-height:var(--lh-titre-l);
  font-weight:800;letter-spacing:.01em;color:var(--ink);
  margin:34px 0 0;padding-top:6px;scroll-margin-top:20px;}
.prose h1::before,.prose h2::before{content:"";display:inline-block;width:24px;height:5px;background:var(--red);
  vertical-align:middle;margin-right:11px;}
.prose h2 .bar{display:none;}
.prose h3,.prose h4{scroll-margin-top:20px;}
.prose p{font-size:16px;line-height:1.62;margin:14px 0 0;}
.prose p:first-of-type{margin-top:16px;}
.prose blockquote{margin:24px 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--red);
  font-size:19px;line-height:1.4;font-weight:600;color:var(--ink);}
.prose figure.half{width:55%;margin:26px auto 6px;}
.prose figure.half .ph{width:100%;aspect-ratio:4/3;}

/* newsletter (rail) */
.nlbox{background:var(--navy);color:#fff;border-radius:8px;padding:22px 20px;}
.nlbox h4{font-family:var(--serif);font-size:19px;font-weight:700;margin:0 0 8px;line-height:1.15;}
.nlbox p{font-size:12.5px;line-height:1.45;color:#c2cad9;margin:0 0 14px;}
.nlbox input{width:100%;border:0;border-radius:3px;padding:12px 13px;font-family:var(--sans);font-size:13px;
  color:var(--ink);margin-bottom:9px;outline:none;}
.nlbox input::placeholder{color:#aab0bc;}
.nlbox button{width:100%;border:0;cursor:pointer;background:var(--red);color:#fff;font-family:var(--sans);
  font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:12px;border-radius:3px;}
.nlbox button:hover{background:var(--red-soft);}

/* ART-25 : les liens du corps d'article doivent se voir. Le lien global du
   theme herite la couleur et perd le soulignement, ce qui convient aux cartes
   mais rend invisible un lien pose dans un paragraphe. */
.prose p a:not([class]),.prose li a:not([class]){color:var(--c-rouge);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;}
.prose p a:not([class]):hover,.prose li a:not([class]):hover{color:var(--c-rouge-h);}

/* Poursuite de lecture insérée au centre des articles longs (ART-07, ART-23).
   Encart plein filet, détaché du texte courant : il coupe la lecture, il doit
   donc se lire comme un aparté et non comme un paragraphe de plus. */
.prose .continue-reading{margin:var(--e8) 0;padding:var(--e5) 0;
  border-top:2px solid var(--c-rouge);border-bottom:1px solid var(--c-filet);}
.prose .continue-reading .cr-kicker{display:block;font-family:var(--font-titre);
  font-size:max(var(--fs-min,0px),11px);font-weight:700;letter-spacing:var(--ls-etiquette);text-transform:uppercase;
  color:var(--c-rouge);margin-bottom:var(--e2);}
.prose .continue-reading .cr-title{font-family:var(--font-titre);font-size:var(--fs-titre-m);
  line-height:var(--lh-titre-m);font-weight:700;color:var(--c-encre);margin:0;}
.prose .continue-reading .cr-title a{color:inherit;text-decoration:none;}
.prose .continue-reading .cr-title a:hover{color:var(--c-rouge);}

/* section « À découvrir » en bas d'article
   Recette ART-08 : « supprimer le filet gris et le TOUT VOIR en bas de page ».
   Deux filets gris se cumulaient ici, la barre de séparation au-dessus de la
   section et le filet extensible de son en-tête, qui reliait le titre à la
   pilule. La pilule part côté rendu, les deux filets partent ici. L'espace de
   respiration au-dessus de la section est conservé. */
.discover{padding-top:34px;margin-top:40px;}
.discover .sec-head::after{display:none;}

/* ===== RESPONSIVE ARTICLE (≤ tablette portrait) ===== */
@media (max-width:1024px){
  .art-grid{display:grid;grid-template-columns:1fr;gap:30px;padding-block:20px 8px;}
  /* Colonne unique : le placement explicite de ART-01 n'a plus d'objet, les
     rangées s'enchaînent et seul `order` compte. */
  .art-grid>.art-top,
  .art-grid>.center,
  .art-grid>.rail-right{grid-column:1;grid-row:auto;}
  .art-grid>.art-top{order:0;}
  .art-grid>.center{order:1;}
  .art-grid>.rail-right{order:2;}
  .art-head-row{grid-template-columns:1fr;}
  .prose figure.half{width:100%;}
}

/* RESP-15 : sur mobile les trois actions tiennent la meme ligne, ferrees a
   gauche. Elles passaient en colonne et mangeaient trois hauteurs de bouton
   sous la signature. L'ecart se resserre pour que la ligne tienne des 320px,
   et « Lire plus tard » garde son libelle sans se couper. */
@media (max-width:767px){
  .art-byline .art-actions{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:8px;}
  .art-byline .art-actions .save{white-space:nowrap;}
}

/* ============== ANNONCES (archive CPT annonce) ============== */
/* blocs latéraux thématiques (rail-left « santé publique ») */
.themed{margin-bottom:26px;}
.themed .it{padding:12px 0;border-bottom:1px solid var(--line);display:block;}
.themed .it:last-child{border-bottom:0;}
.themed .it .k{font-size:max(var(--fs-min,0px),10px);font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}
.themed .it .t{font-family:var(--serif);font-weight:700;font-size:13px;line-height:1.22;color:var(--ink);}

/* titre + recherche */
.an-title{font-family:var(--font-titre);font-weight:400;font-size:var(--fs-rubrique);line-height:var(--lh-rubrique);
  letter-spacing:var(--ls-rubrique);text-transform:uppercase;color:var(--c-encre);
  margin:2px 0 16px;padding-left:var(--e3);border-left:3px solid var(--c-rouge);display:block;}
/* RUB-04 : les titres des archives Formations et Annonces reprennent le titre
   de rubrique de §6.3, graisse 400 et marqueur vertical, au lieu du gras avec
   filet horizontal qui les distinguait sans raison. */
.an-title .bar{display:none;}

.an-search{display:flex;gap:10px;margin:0 0 30px;}
.an-search .fld{position:relative;flex:1;min-width:0;}
.an-search select,.an-search input{
  width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);
  border:1px solid var(--line-2);border-radius:4px;background:#fff;
  padding:13px 14px;outline:none;transition:border-color .15s,box-shadow .15s;}
.an-search input::placeholder{color:#9aa1ad;}
.an-search select:focus,.an-search input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(24,39,71,.10);}
.an-search select{appearance:none;cursor:pointer;color:#6a707d;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23182747' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;}
.an-search .go{flex:none;border:0;cursor:pointer;background:var(--red);color:#fff;
  font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  padding:0 26px;border-radius:4px;display:flex;align-items:center;gap:9px;transition:background .15s;}
.an-search .go svg{width:18px;height:18px;}
.an-search .go:hover{background:var(--red-soft);}

/* autocomplete de localisation (§6.9) */
.an-search .an-ac{position:relative;}
/* La liste déborde volontairement la largeur du champ : « Paris (75) »
   accompagné de sa nature ne tient pas dans une colonne de tiers. */
.an-ac-list{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;margin:0;padding:6px 0;list-style:none;
  min-width:290px;max-width:100vw;
  background:#fff;border:1px solid var(--line-2);border-radius:4px;box-shadow:0 10px 24px rgba(24,39,71,.14);
  max-height:280px;overflow-y:auto;}
.an-ac-list[hidden]{display:none;}
.an-ac-item{font-family:var(--sans);font-size:14px;color:var(--ink);padding:9px 14px;cursor:pointer;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.an-ac-item:hover,.an-ac-item.is-active{background:var(--c-papier);color:var(--navy);}
.an-ac-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.an-ac-kind{flex:none;font-size:max(var(--fs-min,0px),10px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--meta);}

/* puces des filtres actifs (§6.9) */
.an-chips{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:-16px 0 26px;}
a.an-chip,a.an-chip:hover{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:#fff;
  background:var(--navy);border-radius:16px;padding:8px 9px 8px 15px;}
.an-chip .x{width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;}
.an-chip:hover .x{background:var(--red);}
a.an-chip-clear,a.an-chip-clear:hover{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--red);
  text-decoration:underline;text-underline-offset:3px;}

/* À la une : 3 cartes mises en avant */
.featured-une{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 34px;}
/* ANN-04 : la une reprend le fond gris des cartes sponsorisees, plus
   valorisant qu'un blanc sur blanc. ANN-19 : le cadre est arrondi aux quatre
   angles, les deux du bas manquaient et l'encadre semblait coupe. */
.fcard{border:1px solid var(--c-filet-fort);background:#eef0f3;display:flex;flex-direction:column;
  border-radius:var(--r-image);overflow:hidden;}
.fcard .fmedia{position:relative;}
/* Recette R5 : le visuel ne porte pas d'arrondi propre. Il en heritait de la
   regle globale des images, et ses deux angles bas s'arrondissaient au milieu
   de la carte, la coupant en deux. Les angles hauts restent arrondis, par le
   debordement masque de la carte, comme sur les blocs sponsorises de la home. */
.fcard .fmedia .ph,.fcard .fmedia .img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:0;}
/* ANN-18 : sous la fiche, des vignettes plus larges que hautes. */
.featured-une--related .fcard .fmedia .ph,
.featured-une--related .fcard .fmedia .img{aspect-ratio:16/9;}
.fcard .fmedia a{display:block;}
.fcard .ribbon{position:absolute;top:11px;left:11px;z-index:2;background:var(--red);color:#fff;
  font-size:max(var(--fs-min,0px),9.5px);font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:4px;}
.fcard .fbody{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1;}
/* Recette R5, ANN-42 et FOR-16 : « grossir le texte » des blocs « susceptibles
   de vous interesser ». Le titre passe au cran au-dessus, la localisation et
   la date suivent, elles se lisaient a la loupe. */
.fcard h3{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);color:var(--ink);
  margin:0 0 16px;text-wrap:pretty;}
.fcard h3 a{color:inherit;}
.fcard h3 a:hover{color:var(--red);}
.fcard .floc{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink);margin-top:auto;}
.fcard .floc svg{width:15px;height:15px;color:var(--red);flex:none;}
.fcard .fdate{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--meta);margin-top:5px;}
.fcard .fdate svg{width:15px;height:15px;flex:none;}

/* ANN-03 : la une paginee trois par trois. Le slider porte la marge basse de
   la grille, sinon elle s'ajoutait a chaque page. */
.featured-une-slider{margin:0 0 34px;}
.featured-une-slider .featured-une{margin:0;}
.ga-slider.has-arrows{position:relative;}
.ga-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--c-filet-fort);background:var(--c-papier);color:var(--c-encre);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:background .15s,color .15s;}
.ga-arrow svg{width:18px;height:18px;}
.ga-arrow:hover{background:var(--c-rouge);border-color:var(--c-rouge);color:#fff;}
.ga-arrow--prev{left:-19px;}
.ga-arrow--next{right:-19px;}

/* compteur résultats */
.an-count{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;border-top:2px solid var(--ink);padding-top:16px;}
.an-count b{font-family:var(--sans);font-size:21px;font-weight:800;color:var(--ink);}
.an-count span{font-size:13.5px;color:var(--meta);}

/* lignes d'offres */
.annonce-list{margin-top:4px;}
.annonce-row{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
/* Retour client du 2026-09-24 : la photo remplit tout le cadre, avec une
   legere marge autour. Remplace l'arbitrage ANN-07, qui laissait le visuel
   entier (`contain`) pour ne pas rogner les logos horizontaux : une photo
   en portrait y restait une bande etroite sur fond trame. Annonces et
   formations suivent desormais la meme regle. */
.annonce-row .logo{width:156px;height:104px;flex:none;border-radius:var(--r-image);overflow:hidden;background:var(--c-trame);padding:3px;}
.annonce-row a > img,.annonce-row .logo img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-image) - 3px);display:block;}
.annonce-row .arow-body{flex:1;min-width:0;}
.annonce-row .cat{font-size:max(var(--fs-min,0px),10.5px);font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px;}
.annonce-row h3{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);color:var(--ink);margin:0 0 8px;}
.annonce-row h3 a{color:inherit;}
.annonce-row h3 a:hover{color:var(--red);}
.annonce-row .desc{font-family:var(--serif);font-size:13.5px;line-height:1.5;color:#3a4254;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.annonce-row .arow-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 18px;font-size:12.5px;color:var(--meta);}
.annonce-row .arow-meta .loc{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink);}
.annonce-row .arow-meta .loc svg{width:14px;height:14px;color:var(--red);flex:none;}
/* ANN-06 : la date recule d'un cran, la localisation reste la donnee forte. */
.annonce-row .arow-meta .pub{font-size:max(var(--fs-min,0px),11.5px);}
.annonce-row .arow-side{flex:none;align-self:center;}
.annonce-row .voir{display:inline-block;border:1px solid var(--navy);color:var(--navy);background:#fff;cursor:pointer;
  font-family:var(--sans);font-weight:800;font-size:max(var(--fs-min,0px),11px);letter-spacing:.05em;text-transform:uppercase;
  padding:12px 20px;border-radius:3px;white-space:nowrap;transition:.15s;}
.annonce-row .voir:hover{background:var(--navy);color:#fff;}
.an-empty{padding:30px 0;font-family:var(--serif);font-size:15px;color:var(--meta);}

/* archive Événements — mêmes classes que l'archive Annonces, seuls les écarts
   sont déclarés ici : deux champs de période à la place de la localisation et
   du mot-clé, et une ligne de dates de tenue dans la méta. */
.ev-block .an-search .fld.ev-date{flex:0 1 190px;}
.ev-block .an-search input[type="date"]{color:var(--ink);cursor:pointer;}
.ev-block .an-search input[type="date"]:invalid,
.ev-block .an-search input[type="date"]:not(:valid){color:#6a707d;}
.ev-block .an-search input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55;}
.ev-block .an-search input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;}
.annonce-row .arow-meta .ev-when{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink);}
.annonce-row .arow-meta .ev-when svg{width:14px;height:14px;color:var(--red);flex:none;}

/* rail droit : déposer une annonce */
.deposit-btn{display:flex;align-items:center;justify-content:center;gap:11px;
  background:var(--c-rouge);color:var(--c-papier);font-family:var(--font-titre);font-weight:700;font-size:12px;
  letter-spacing:.03em;text-transform:uppercase;padding:10px;border-radius:var(--r-bouton);
  margin-bottom:var(--e6);transition:background .15s;}
.deposit-btn,.deposit-btn:hover,.deposit-btn:focus{color:#fff;}
.deposit-btn:hover{background:var(--c-rouge-h);}
.deposit-btn .plus{font-size:22px;line-height:1;font-weight:400;}

@media (max-width:1024px){
  .featured-une{grid-template-columns:1fr;}
  .annonce-row{flex-wrap:wrap;}
  /* `arow-body` est en `flex:1` : sans base pleine largeur imposée au bouton,
     la ligne ne passe jamais à la ligne et le texte s'étrangle. */
  .annonce-row .arow-side{flex:1 1 100%;align-self:flex-start;}
  /* Le moteur passe en colonne : 3 champs côte à côte deviennent illisibles. */
  .an-search{flex-wrap:wrap;}
  .an-search .fld{flex:1 1 100%;}
  .an-search .go{width:100%;justify-content:center;padding:13px 26px;}
}

/* ============== DÉPÔT D'ANNONCE (form ACF) ============== */
.an-deposit-page{padding:18px 22px 60px;}
.an-deposit{margin-top:18px;}

/* message de retour après dépôt (paiement en cours / indisponible) */
/* `display:table` plutôt qu'un bloc pleine largeur : le bandeau se règle sur
   la longueur de son texte au lieu de barrer toute la page, et reste centré
   par les marges automatiques. Pas de `max-width` : la largeur vient du
   contenu. */
.an-notice{margin:10px auto 15px;padding:10px;border-radius:5px;
  font-family:var(--sans);font-size:14px;line-height:1.5;display:table;}
.an-notice p{margin:0;}
/* Detail des visuels ecartes : un fichier par ligne, avec son motif. */
.an-notice-list{margin:6px 0 0;padding-left:18px;}
.an-notice-list li{margin:2px 0;}
.an-notice--info{background:#eef4fb;color:var(--navy);border:1px solid #c9dcf1;}
.an-notice--error{background:#fdecec;color:#8c1c1c;border:1px solid #f2c9c9;}
.an-notice--success{background:#eaf6ec;color:#1c5c2a;border:1px solid #c6e3cd;}

/* gate (non connecté) */
.an-deposit-gate{text-align:center;padding:50px 20px;border:1px solid var(--line-2);border-radius:6px;}
.an-deposit-gate p{font-family:var(--serif);font-size:18px;color:var(--ink);margin:0 0 18px;}
.an-gate-btn{display:inline-block;background:var(--red);color:#fff;font-family:var(--sans);font-weight:800;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:13px 26px;border:0;border-radius:5px;cursor:pointer;}
.an-gate-btn:hover{background:var(--red-soft);color:#fff;}

/* indicateur d'étapes */
.an-steps{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 38px;
  font-family:var(--sans);font-weight:800;font-size:16px;}
.an-steps .an-step{color:#9fb6d6;}
.an-steps .an-step.is-active{color:var(--navy);}
.an-steps .an-step-sep{color:#cdd6e4;}

/* champs ACF */
.an-deposit .acf-fields{border:0;}
/* Les champs ne sont PAS enfants directs de `.acf-fields` : le formulaire les
   enveloppe dans `.an-form-step`. Un sélecteur `>` ne les atteignait donc pas,
   et les champs à 50% (e-mail, téléphone) se retrouvaient collés, sans
   gouttière ni rythme vertical. */
.an-deposit .acf-field{padding:14px 12px;border:0;}
/* ACF sépare deux champs d'une même rangée par un filet vertical, via
   `.acf-field[data-width] + .acf-field[data-width]`. Ce sélecteur bat le nôtre
   en spécificité : il faut le viser tel quel pour retirer le trait entre
   e-mail et téléphone. */
.an-deposit .acf-field[data-width]+.acf-field[data-width]{border-left:0;}
.an-deposit .acf-field .acf-label label{font-family:var(--sans);font-weight:800;font-size:15px;color:var(--navy-deep);margin-bottom:8px;}
.an-deposit .acf-field .acf-label label .acf-required{color:var(--red);}
.an-deposit .acf-input input[type="text"],
.an-deposit .acf-input input[type="email"],
.an-deposit .acf-input input[type="url"],
.an-deposit .acf-input input[type="number"],
.an-deposit .acf-input textarea,
.an-deposit .acf-input .select2-container .select2-selection,
.an-deposit .acf-input select{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
  border:1px solid var(--line-2);border-radius:6px;background:#fff;padding:13px 14px;
  outline:none;transition:border-color .15s,box-shadow .15s;}
.an-deposit .acf-input textarea{min-height:120px;resize:vertical;}
.an-deposit .acf-input input:focus,
.an-deposit .acf-input textarea:focus,
.an-deposit .acf-input select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(24,39,71,.10);}
.an-deposit .acf-field.an-field-error .acf-input input,
.an-deposit .acf-field.an-field-error .acf-input textarea,
.an-deposit .acf-field.an-field-error .acf-input select,
/* ANN-31 : un champ obligatoire laissé vide se signale par le même code
   couleur, sur la validation d'ACF, avec son message sous le champ. */
.an-deposit .acf-field.acf-error .acf-input input,
.an-deposit .acf-field.acf-error .acf-input textarea,
.an-deposit .acf-field.acf-error .acf-input select,
.an-deposit .acf-field.acf-error .acf-input .select2-selection{border-color:var(--red);box-shadow:0 0 0 3px rgba(223,35,24,.10);}
.an-deposit .acf-error-message{background:none;border:0;padding:6px 0 0;margin:0;
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--red);}
.an-deposit .acf-error-message::before{display:none;}
.an-deposit .acf-error-message p{margin:0;}

/* Consigne de champ : elle sortait à 18px, plus grosse que son propre libellé. */
.an-deposit .acf-field .acf-label .description{font-family:var(--sans);font-size:13px;line-height:1.45;
  color:var(--meta);font-weight:400;margin:0 0 8px;}

/* select2 (ACF remplace les `select` natifs) : sa feuille impose height:28px,
   qui se cumule à notre padding et pousse le libellé sous la bordure. On rend
   la hauteur au contenu pour retrouver le gabarit des champs texte. */
.an-deposit .acf-input .select2-container{width:100% !important;}
.an-deposit .acf-input .select2-container--default .select2-selection--single{height:auto;min-height:0;}
.an-deposit .acf-input .select2-selection--single .select2-selection__rendered{
  padding:0;line-height:1.35;color:var(--ink);}
.an-deposit .acf-input .select2-selection--single .select2-selection__arrow{height:100%;top:0;right:10px;}
.an-deposit .acf-input .select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(24,39,71,.10);}

/* Galerie ACF : son interface est dessinée pour le back-office. On la ramène au
   gabarit du formulaire — hauteur raisonnable, bordure des autres champs — et
   on retire les outils d'administration qui n'ont pas de sens pour un
   déposant : tri par date d'import, inversion d'ordre, « Mise à jour ». */
/* Champ fichier du dépôt : téléversement navigateur, pas de médiathèque. */
.an-deposit .an-files-input{width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);
  border:1px dashed var(--line-2);border-radius:6px;background:#fff;padding:16px 14px;cursor:pointer;}
.an-deposit .an-files-input:hover{border-color:var(--navy);}
.an-deposit .an-files-input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(24,39,71,.10);}
.an-deposit .an-files-input::file-selector-button{font-family:var(--sans);font-weight:700;font-size:13px;
  background:var(--navy);color:#fff;border:0;border-radius:var(--r-bouton);padding:9px 18px;margin-right:14px;cursor:pointer;}
.an-deposit .an-files-input::file-selector-button:hover{background:var(--navy-deep);}
/* Contraintes du champ : formats, nombre et poids acceptés. Les taire revient
   à laisser un visuel disparaître sans que le déposant ait su qu'il y avait
   une limite. */
.an-deposit .an-files-hint{font-family:var(--sans);font-size:12.5px;color:var(--meta);margin:8px 0 0;}
/* Retour client du 2026-09-24 : les photos retenues s'affichent en vignettes,
   chacune avec sa croix, et chaque photo ecartee est nommee avec son motif.
   Rendu par `files-picker.js` sous le champ, dans les deux depots comme dans
   l'editeur du compte : les regles ne sont donc pas bornees a `.an-deposit`. */
.an-files-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px;}
.an-files-list[hidden]{display:none;}
.an-files-item{position:relative;width:120px;margin:0;}
.an-files-item img{display:block;width:100%;aspect-ratio:1000/550;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#eef0f3;}
.an-files-name{display:block;margin-top:5px;font-family:var(--sans);font-size:max(var(--fs-min,0px),11px);line-height:1.3;color:var(--meta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.an-files-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:50%;background:var(--red);color:#fff;font-size:16px;line-height:1;cursor:pointer;}
.an-files-remove:hover,.an-files-remove:focus-visible{background:var(--navy);}
.an-files-note{font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--ink);margin:8px 0 0;}
.an-files-note:empty{display:none;}

/* Retour client du 2026-09-24 : le site web et son interrupteur forment une
   rangee. ACF place les champs en flottants ; « Afficher le numero » etant
   moins haut que « Telephone », le site web remontait sinon dans la colonne
   de droite. Il repart toujours a gauche. */
.an-deposit .acf-field[data-name="website"]{clear:left;}

/* Interrupteur « Urgent » : couleur de marque à l'état actif. */
.an-deposit .acf-switch.-on{background:var(--red);border-color:var(--red);}
.an-deposit .acf-switch.-on .acf-switch-slider{background:#fff;}

/* navigation étapes + boutons — charte du site : action principale en rouge de
   marque, action secondaire en contour navy. */
.an-form-nav{display:flex;justify-content:center;align-items:center;gap:var(--e4);padding:28px 0 0;}
/* Étape 2 : « Retour » et l'envoi côte à côte, centrés comme le « Suivant » de
   l'étape 1 — les deux étapes présentent ainsi le même bloc d'actions. */
.an-form-nav--split{justify-content:center;}
.an-btn{cursor:pointer;border:0;font-family:var(--sans);font-weight:800;font-size:15px;
  letter-spacing:.03em;text-transform:uppercase;padding:15px 54px;border-radius:var(--r-bouton);transition:.15s;}
.an-btn--next,.an-deposit .acf-form-submit .acf-button{background:var(--c-rouge);color:var(--c-papier);}
.an-btn--next:hover,.an-deposit .acf-form-submit .acf-button:hover{background:var(--c-rouge-h);color:var(--c-papier);}
.an-btn--back{background:#fff;color:var(--navy);border:1px solid var(--navy);}
.an-btn--back:hover{background:var(--navy);color:#fff;}

/* Bouton d'envoi ACF : même gabarit que les boutons d'étape. */
.an-deposit .acf-form-submit{padding:0;margin:0;}
.an-deposit .acf-form-submit .acf-button{padding:15px 54px;border-radius:var(--r-bouton);font-size:15px;
  text-transform:uppercase;letter-spacing:.03em;font-weight:800;border:0;}

/* étape 2 : récap */
.an-form-step[data-step="2"]{display:flex;flex-direction:column;gap:18px;}
.an-recap{display:grid;grid-template-columns:200px 1fr;gap:10px 18px;border:1px solid var(--line-2);
  border-radius:6px;padding:22px 24px;margin:0;}
.an-recap dt{font-family:var(--sans);font-weight:800;font-size:13px;color:var(--navy-deep);}
/* Une description saisie d'un seul tenant, sans espace, poussait la colonne
   hors du cadre et debordait la page. Le mot se coupe donc plutot que de
   deborder, et la cellule cesse de s'elargir au dela de sa colonne. */
.an-recap dd{margin:0;font-family:var(--serif);font-size:14px;color:#3a4254;
  min-width:0;overflow-wrap:anywhere;}
.an-recap dt{min-width:0;overflow-wrap:anywhere;}

/* Vignettes des visuels choisis, rappelees dans le recapitulatif. */
.an-recap-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.an-recap-thumbs img{width:78px;height:58px;object-fit:cover;border-radius:4px;border:1px solid var(--line);}
.an-char-count{font-size:12px;color:var(--meta);margin-top:6px;}

@media (max-width:768px){
  .an-recap{grid-template-columns:1fr;gap:2px 0;}
  .an-recap dd{margin-bottom:10px;}
  .an-btn{padding:14px 32px;}
}

/* ============================================================
   SINGLE ANNONCE (block parresia/annonce-single)
   ============================================================ */
.an-grid.single-grid{grid-template-columns:minmax(0,1fr) 300px;}
.an-grid.single-grid>.center{gap:0;}
.sa-block{display:contents;}

/* fil d'ariane pleine largeur (block parresia/breadcrumb) */
/* AFF-11 : toutes les pages commencent au meme niveau, 48 px sous l'en-tete,
   premier element quel qu'il soit (pub de la home, pub des pages Masterclass
   et Videos, fil d'Ariane des Annonces et Formations). Les bandeaux pleine
   largeur, sous-rubriques et bande du kiosque, restent colles a l'en-tete. */
.crumb-wrap{max-width:var(--largeur-max);margin:0 auto;padding:var(--e9) var(--marge-laterale) 0;}
.crumb-wrap .crumb{margin:0;}

/* en-tête : titre à gauche, annonceur à droite */
/* §6.9 — deux colonnes sur toute la hauteur de la fiche : la colonne de droite
   doit être aussi haute que l'article pour que le pavé annonceur puisse suivre
   le scroll (un `sticky` ne circule que dans son bloc conteneur). Pas de
   `align-items:start` ici, sinon la cellule se rétracte à la hauteur du pavé et
   le collant n'a plus de course. */
.sa-layout{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:34px;margin-top:24px;}
.sa-main{min-width:0;}
/* Le filet ne court QUE sous le titre : s'il traversait la colonne de droite,
   il barrerait le pavé annonceur dès qu'il se met à suivre. */
.sa-head-main{padding-bottom:26px;border-bottom:1px solid var(--line);}
.sa-cat{font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.05em;margin:0 0 12px;}
.sa-title{font-family:var(--sans);font-weight:800;font-size:27px;line-height:1.18;text-transform:uppercase;
  letter-spacing:.005em;color:var(--ink);margin:0 0 16px;text-wrap:balance;}
.sa-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px 20px;font-size:13.5px;color:var(--meta);}
.sa-meta .loc{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ink);}
.sa-meta .loc svg{width:15px;height:15px;color:var(--red);flex:none;}

/* carte annonceur */
/* §6.9 — pavé annonceur : réduit, fond tramé, plus de liseré épais. Il reste
   collant au scroll, d'où l'arrêt du filet de section juste avant lui. */
.sa-side{min-width:0;}
.advertiser{position:sticky;top:calc(var(--nav-h) + 18px);display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--e2);border:1px solid var(--c-filet);background:var(--c-trame);
  border-radius:var(--r-bloc);padding:var(--e4) var(--e4);}
.advertiser .logo{width:88px;height:88px;flex:none;margin-bottom:4px;object-fit:contain;}
.advertiser .av-info{min-width:0;}
/* Minuscules partout dans le pavé, sauf le nom de l'annonceur. */
.advertiser .av-k{font-family:var(--font-texte);font-size:var(--fs-folio);line-height:var(--lh-folio);
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--c-texte-doux);margin-bottom:3px;}
.advertiser .av-n{font-family:var(--font-titre);font-size:var(--fs-titre-s);line-height:var(--lh-titre-s);
  font-weight:700;color:var(--c-encre);}
/* « Contacter l'annonceur » tient sur une seule ligne. */
.advertiser .contact-btn{width:100%;margin-top:var(--e2);flex:none;border:0;cursor:pointer;
  background:var(--c-rouge);color:var(--c-papier);
  font-family:var(--font-titre);font-weight:600;font-size:14px;letter-spacing:.01em;text-transform:none;
  height:var(--h-bouton);padding:0 var(--e4);border-radius:var(--r-bouton);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  white-space:nowrap;transition:background .15s;}
.advertiser .contact-btn svg{width:17px;height:17px;}
.advertiser .contact-btn:hover{background:var(--c-rouge-h);}
/* Meme piege que pour la revelation ci-dessous : le script pose `hidden` sur
   le bouton une fois les coordonnees affichees, mais `display:inline-flex`
   l'emportait sur la feuille du navigateur et le bouton restait au-dessus de
   ses propres coordonnees. */
.advertiser .contact-btn[hidden]{display:none;}
/* Le conteneur de revelation est rendu vide et masque tant qu'on n'a pas
   clique. Sans la regle `[hidden]`, la declaration `display:flex` de la classe
   l'emportait sur celle du navigateur : la boite restait dans le flux, sa marge
   avec, et l'encart gagnait 16px sous le bouton, 33px au lieu de 17. Sa marge
   propre disparait au passage, l'ecart vient du `gap` du conteneur, comme
   partout ailleurs dans l'encart. */
.advertiser .contact-reveal[hidden]{display:none;}
/* Retour client du 2026-09-24 : les coordonnees se lisent ferrees a gauche,
   les pictos alignes en colonne, le bouton copier juste apres la valeur. */
.advertiser .contact-reveal{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;}
.advertiser .contact-reveal a{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--navy);word-break:break-word;}
.advertiser .contact-reveal a:hover{color:var(--red);}
.advertiser .contact-reveal .contact-empty{margin:0;font-size:13px;color:var(--meta);}
/* Une coordonnee par rangee : picto, valeur, bouton copier. Le picto et le
   bouton ne se compriment pas, seule la valeur cede la place, et elle coupe
   dans le mot plutot que de deborder de la colonne de l'annonceur. */
.advertiser .contact-row{display:flex;align-items:center;gap:8px;min-width:0;}
.advertiser .contact-row a{flex:0 1 auto;min-width:0;}
.advertiser .contact-ico{flex:none;width:17px;height:17px;color:var(--red);}
.advertiser .contact-copy{flex:none;display:inline-flex;align-items:center;justify-content:center;
	width:26px;height:26px;padding:0;border:1px solid var(--line,#d9dee6);border-radius:4px;
	background:#fff;color:var(--navy);cursor:pointer;transition:border-color .15s,color .15s;}
.advertiser .contact-copy:hover{border-color:var(--navy);}
.advertiser .contact-copy.is-copied{border-color:var(--red);color:var(--red);}
.advertiser .contact-copy-ico{width:14px;height:14px;}

/* corps */
/* Meme garde que dans le recapitulatif du depot : une description d'un seul
   tenant, sans espace, debordait la fiche et la page sous les boutons. */
.sa-body{font-family:var(--serif);font-size:15.5px;line-height:1.62;color:#222a39;margin-top:26px;
  min-width:0;overflow-wrap:anywhere;}
.sa-body p{margin:0 0 16px;}

/* galerie / carrousel */
/* §6.9 — slider : la piste défile, elle ne bascule pas l'affichage. Mécanique
   du store partagé `parresia/hero` ; l'habillage des pastilles reprend celui de
   la maquette Single Annonce (pastille ronde, active en pilule). */
/* ANN-09 : en-tete de la fiche sur le modele de la formation, visuel a gauche
   et informations a droite. Sans visuel, une seule colonne. */
.sa-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e7);align-items:start;padding:var(--e6) 0 0;}
.sa-head--sans-visuel{grid-template-columns:1fr;}
.sa-visuel{min-width:0;}
.sa-head .sa-head-main{padding-bottom:0;border-bottom:0;}
.sa-gallery{margin:0;width:100%;}
.sa-slides{border-radius:var(--r-image);}
.sa-slides{position:relative;overflow:hidden;border:1px solid var(--line-2);background:var(--ph,#646b8c);}
.sa-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.sa-slide{flex:0 0 100%;width:100%;aspect-ratio:1000/550;}
.sa-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.sa-gallery .dots{gap:9px;align-items:center;margin-top:14px;}
.sa-gallery .dots i{width:9px;height:9px;border-radius:50%;background:#c7cbd4;transition:.18s;}
.sa-gallery .dots i:hover{background:#9aa1ad;}
.sa-gallery .dots i.on{width:24px;border-radius:5px;background:var(--red);}
/* F-03 (recette du 2026-09-29) : fleches posees sur l'image, a l'interieur du
   cadre qui rogne. */
.sa-gallery .ga-arrow--prev{left:10px;}
.sa-gallery .ga-arrow--next{right:10px;}
@media (max-width:1063px){
  /* Au doigt : la piste defile, la photo suivante depasse pour inviter au
     geste. Les fleches (masquees avec les autres sous 1064 px) et les
     pastilles, liees a la translation, s'effacent. */
  .sa-track{transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:8px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;}
  .sa-track::-webkit-scrollbar{display:none;}
  .sa-gallery:has(.sa-slide + .sa-slide) .sa-slide{flex:0 0 88%;scroll-snap-align:start;}
  .sa-gallery .dots{display:none;}
}

/* infos complémentaires */
/* §6.9 — intitulés de section en minuscules, filet gris léger : les capitales
   et le trait épais écrasaient la fiche. */
/* ANN-11, ANN-12 : les deux sections reprennent les codes de la poursuite de
   lecture, filet rouge en tete et intitule en etiquette rouge. C'est le code
   couleur du site applique la ou le client le demandait. */
.sa-section-h,.sa-related-h{display:block;font-family:var(--font-titre);font-size:max(var(--fs-min,0px),11px);line-height:1.3;
  font-weight:700;letter-spacing:var(--ls-etiquette);text-transform:uppercase;color:var(--c-rouge);
  margin:var(--e8) 0 var(--e4);padding-top:var(--e4);border-top:2px solid var(--c-rouge);}
.sa-info{display:grid;grid-template-columns:170px 1fr;gap:0;}
.sa-info dt{font-size:13px;font-weight:700;color:var(--meta);padding:12px 0;border-bottom:1px solid var(--line);}
.sa-info dd{font-family:var(--serif);font-size:14.5px;color:var(--ink);margin:0;padding:12px 0;border-bottom:1px solid var(--line);}

/* étiquettes */
.sa-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.sa-tags span,.sa-tags a{font-size:12.5px;font-weight:600;color:var(--navy);background:#eef0f3;border-radius:16px;padding:7px 14px;}
/* ANN-24 : les etiquettes menent a l'archive filtree. */
.sa-tags a:hover{background:var(--navy);color:#fff;}
/* ANN-17 : « Annonce proposee par » ouvre le cartouche, le logo suit, puis le nom. */
.advertiser .av-info{display:flex;flex-direction:column;align-items:center;gap:var(--e2);}
.advertiser .av-info .logo{margin:0;}
.advertiser--anonyme .contact-btn{margin-top:0;}
/* Fiche formation (retour du 2026-09-23) : meme colonne que l'annonce, encart
   de l'organisateur a droite. Sans coordonnee, pas d'encart : la description
   prend toute la largeur. */
.sa-layout--seul{grid-template-columns:minmax(0,1fr);}
.ev-single .ev-head{padding-bottom:0;}
.ev-single .sa-main .ev-desc{margin-top:0;}

/* annonces liées */
.sa-related{margin-top:44px;}

@media (max-width:1024px){
  .an-grid.single-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  /* Colonne unique : le pavé annonceur passe sous l'article et ne colle plus. */
  .sa-layout{grid-template-columns:1fr;gap:22px;}
  .sa-head{grid-template-columns:1fr;gap:var(--e5);}
  .advertiser{position:static;}
  .sa-gallery{width:100%;}
  .ga-arrow--prev{left:6px;}
  .ga-arrow--next{right:6px;}
  .sa-title{font-size:22px;}
  .sa-info{grid-template-columns:120px 1fr;}
}

/* ============================================================
   VIDÉOTHÈQUE (block parresia/video-archive — page videos-page dark)
   ============================================================ */
body.videos-page{background:#06062B;}
.videos-page .site.main,
.videos-page header.site,
.videos-page footer.site{background:#fff;}
.video-archive-block{color:#eef0f6;}

/* pub sur fond sombre : garder le bloc lisible (déjà gris clair) */

/* --- à la une (slider vedette) --- */
.vid-hero-wrap{padding-top:8px;}
.hero-video{position:relative;}
/* VID-03 : le bloc texte se centre verticalement sur le visuel. */
.hv-slide{display:none;grid-template-columns:.82fr 1fr;gap:44px;align-items:center;padding:40px 0 14px;}
.hv-slide.is-active{display:grid;}
.hv-tag{display:inline-block;margin-bottom:22px;}
.hv-title{font-family:var(--serif);font-weight:700;font-size:32px;line-height:1.22;color:#fff;margin:0;letter-spacing:-.005em;}
.hv-title a{color:inherit;}
.hv-title a:hover{color:var(--gold);}
.hv-text p{font-family:var(--serif);font-size:16px;line-height:1.5;color:#dfe2ea;margin:20px 0 0;max-width:44ch;}
.hv-spon{font-size:14px;color:#8b90a3;margin:22px 0 0;}
.hv-meta{font-size:13px;color:#c7cbd8;margin-top:9px;}
.hv-meta .sep{color:var(--red);}
.hv-media{position:relative;}
.hv-media .img{display:block;width:100%;aspect-ratio:1000/550;border-radius:var(--r-image);position:relative;overflow:hidden;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 10px,rgba(0,0,0,.03) 10px 20px),var(--ph,#646b8c);}
.hv-media .img .play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;}
.hv-media .img .play::after{content:"";border-left:18px solid var(--navy);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px;}
/* Recette du 2026-09-29 (U-14) : les points se centrent sous la video et s'en
   rapprochent (14 px au lieu de 46). Le retrait gauche reprend la grille de
   la diapositive (.82fr, 44 px de gouttiere, 1fr) : il place le centre des
   points sous celui de la video. */
.hv-dots{display:flex;gap:7px;justify-content:center;margin-top:0;
  padding-left:calc((100% - 44px) * .82 / 1.82 + 44px);}
.hv-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.35);cursor:pointer;padding:0;transition:.18s;}
.hv-dot:hover{background:rgba(255,255,255,.6);}
.hv-dot.is-active{width:24px;border-radius:5px;background:var(--red);}

/* --- barre de filtre rubriques (sticky) --- */
/* Sous la barre de menu collante, jamais dessous : cf. `--nav-h`, §NAV-03. */
.subnav.vid-subnav{position:sticky;top:var(--nav-h);z-index:20;background:#06062B;border-bottom:1px solid rgba(255,255,255,.12);transition:box-shadow .2s;}
.subnav.vid-subnav.is-stuck{box-shadow:0 6px 18px rgba(0,0,0,.35);}
.vid-subnav .subnav-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;padding:22px 0;}
.vid-subnav .filt{font-size:12.5px;font-weight:700;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:16px;padding:6px 16px;cursor:pointer;transition:.15s;}
.vid-subnav .filt.is-active{background:var(--red);border-color:var(--red);color:#fff;}
.vid-subnav .filt:hover:not(.is-active){border-color:#fff;}

/* --- modules par catégorie --- */
.vid-modules{padding-bottom:54px;}
.vid-section{padding:34px 0 6px;}
.vid-section .sec-head h2{color:#fff;}
/* La pastille « Tout voir » garde son fond papier et son encre rouge (§5.4) :
   la repeindre en blanc la rendait invisible sur son propre fond blanc. */

@media (max-width:992px){
  .hv-slide{grid-template-columns:1fr;gap:24px;padding:26px 0 14px;}
  .hv-title{font-size:26px;}
  .hv-dots{padding-left:0;}
}
/* R13-15 (RESP-30) : sur telephone, plus de points (9 px, un seul geste
   possible) : les videos a la une defilent au doigt, aimantees, la suivante
   depasse pour inviter au geste, comme les autres carrousels (RESP-11).
   Toutes les diapositives sont rendues ; a hauteur egale, plus de saut. */
@media (max-width:767px){
  .hero-video{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;}
  .hero-video::-webkit-scrollbar{display:none;}
  .hv-slide,.hv-slide.is-active{display:grid;flex:0 0 88%;min-width:0;scroll-snap-align:start;}
  .hv-dots{display:none;}
}

/* ============================================================
   SINGLE VIDÉO (block parresia/video-single, page videos-page dark)
   ============================================================ */
.sv-hero{display:grid;grid-template-columns:.82fr 1fr;gap:44px;align-items:start;padding:44px 0 40px;}
.sv-text .k{display:inline-block;font-family:var(--font-titre);font-size:var(--fs-surtitre);font-weight:700;
  letter-spacing:var(--ls-surtitre);text-transform:uppercase;color:var(--c-rouge);margin-bottom:var(--e4);}
.sv-text h1{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-une);line-height:var(--lh-une);
  color:var(--c-papier);margin:0 0 var(--e5);letter-spacing:-.01em;text-wrap:balance;}
.sv-desc{font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);
  color:var(--c-nuit-chapo);max-width:44ch;}
.sv-desc p{margin:0 0 14px;}
/* §6.10 — la date se place SOUS « Sponsorisé par », d'où l'ordre du markup ;
   la mention garde le traitement discret de la §5.2. */
.sv-spon{font-family:var(--font-texte);font-size:var(--fs-folio);line-height:var(--lh-folio);
  font-style:italic;color:var(--c-nuit-folio);margin-top:var(--e5);}
.sv-spon b{font-style:normal;font-weight:600;color:var(--c-nuit-sponsor-nom);}
/* §6.10 — les dates suivent toutes le folio, sur toutes les surfaces vidéo. */
.sv-meta{font-family:var(--font-texte);font-size:var(--fs-folio);line-height:var(--lh-folio);
  color:var(--c-nuit-folio);margin-top:var(--e2);}
.sv-meta .sep{color:var(--red);}
/* VID-13 : favori et partage sous la date, au gabarit de la signature
   d'article, en blanc sur fond nuit. */
.sv-actions{display:flex;align-items:center;gap:10px;margin-top:var(--e4);}
.sv-actions .fav,.sv-actions .save,.sv-actions .share{color:var(--c-papier);border-color:rgba(255,255,255,.35);}
.sv-actions .fav:hover,.sv-actions .save:hover,.sv-actions .share:hover{color:var(--gold);border-color:var(--gold);}

/* §6.10 — le visuel vidéo suit le ratio de référence 1000×550 (§4.1). */
.sv-media{position:relative;border-radius:var(--r-image);overflow:hidden;aspect-ratio:1000/550;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 10px,rgba(0,0,0,.03) 10px 20px),var(--ph,#646b8c);}
.sv-media.is-playing{background:#000;}
.sv-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.sv-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;padding:0;transition:transform .15s;}
.sv-play:hover{transform:scale(1.06);}
.sv-play-ico{width:0;height:0;border-left:22px solid var(--navy);border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px;}

/* carte de verrouillage paywall (overlay sur le player) */
.sv-lock{position:absolute;inset:0;background:rgba(6,6,43,.72);display:flex;align-items:center;justify-content:center;padding:20px;}
/* Recette du 2026-09-29 (U-15) : l'accent du paywall video passe au jaune,
   comme le cartouche des articles (ART-37) : fond jaune pale, bouton jaune a
   l'encre, liens a l'encre. Le rouge ne marque plus l'acces reserve. */
.sv-lock-card{background:#fbf0c6;background:color-mix(in srgb,var(--c-jaune) 25%,var(--c-papier));
  border-radius:var(--r-bloc);padding:var(--e7) var(--e6);text-align:center;max-width:320px;}
.sv-lock-card .lock{display:inline-flex;align-items:center;gap:8px;font-size:max(var(--fs-min,0px),11px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-encre);margin-bottom:14px;}
.sv-lock-card .lock svg{width:15px;height:15px;}
.sv-lock-card p{font-family:var(--serif);font-size:15.5px;line-height:1.42;color:var(--ink);font-weight:600;margin:0 0 20px;}
.sv-lock-card .sv-lock-btn{display:block;margin:0 0 16px;background:var(--c-jaune);color:var(--c-encre);padding:13px 18px;border-radius:4px;
  text-align:center;text-transform:uppercase;letter-spacing:.03em;font-weight:800;font-size:12.5px;transition:background .15s;}
.sv-lock-card .sv-lock-btn:hover{background:var(--c-jaune-h);color:var(--c-encre);}
.sv-lock-card .signin{font-size:12.5px;color:var(--c-texte);}
.sv-lock-card .signin .signin-link{background:none;border:0;padding:0;cursor:pointer;color:var(--c-encre);font-weight:800;font-size:inherit;text-decoration:underline;}
.sv-lock-card .signin .signin-link:hover{text-decoration:none;}

@media (max-width:992px){
  .sv-hero{grid-template-columns:1fr;gap:24px;padding:26px 0 20px;}
  .sv-text h1{font-size:26px;}
}

/* Retour du 2026-09-23 : la fiche video reprend la structure de la page
   article (single-video.html), sur le fond nuit de la videotheque. Les regles
   ci-dessous ne font que repeindre pour ce fond ce que l'article pose sur
   fond papier : fil d'Ariane, en-tete, texte, colonne de droite. Les cartes a
   fond propre de la colonne (sondage, agenda) gardent le leur. */
.videos-page .crumb,.videos-page .crumb a{color:var(--c-nuit-folio);}
.videos-page .crumb a:hover{color:var(--c-papier);}
.videos-page .crumb .sep{color:rgba(255,255,255,.3);}
.videos-page .art-head-txt .wp-block-post-title{color:var(--c-papier);}
.videos-page .art-byline .au{color:var(--c-papier);}
.videos-page .art-byline .dt{color:var(--c-nuit-folio);}
.videos-page .art-byline .sv-spon{margin-top:var(--e2);}
.videos-page .art-byline :is(.save,.fav,.share){color:var(--c-papier);border-color:rgba(255,255,255,.35);background:transparent;}
.videos-page .art-byline :is(.save,.fav,.share):hover{color:var(--gold);border-color:var(--gold);}
.videos-page .center>.art-chapo{color:var(--c-papier);}
.videos-page .center>.prose{color:var(--c-nuit-chapo);}
.videos-page .center>.prose :is(h1,h2,h3,h4,h5,blockquote,strong,b){color:var(--c-papier);}
.videos-page .center>.prose a{color:var(--gold);}
.videos-page .art-grid>.rail-right::before{background:rgba(255,255,255,.14);}
.videos-page .rail-right .rail-h h4,
.videos-page .rail-right .side-h{color:var(--c-papier);border-bottom-color:var(--c-papier);}
.videos-page .rail-right .rail-h::after{background:rgba(255,255,255,.18);}
.videos-page .rail-right .enbref .row{border-bottom-color:rgba(255,255,255,.14);}
.videos-page .rail-right .enbref .row p{color:var(--c-papier);}
.videos-page .rail-right .magbox{color:var(--c-papier);}
.videos-page .rail-right .nlbox{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);}
.videos-page .rail-right .ad:not(.ad--live) :is(b,span){color:var(--c-nuit-folio);}
/* Filtres de rubrique et videos de la meme rubrique, dans la colonne
   centrale : ni bande pleine largeur ni barre collante. */
.sv-related .vid-subnav--inline{border-top:1px solid rgba(255,255,255,.14);}
.sv-related .vid-subnav--inline .subnav-row{padding:var(--e5) 0 0;}
.sv-related .vid-modules{padding-bottom:var(--e7);}

/* ---------- en-tête simplifié (page abonnement) ---------- */
.sub-header{background:var(--navy);border-bottom:1px solid var(--line);}
.sub-header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
.sub-header .logo{color:#fff;font-family:var(--sans);font-weight:800;font-size:22px;}
.sub-header .logo a{color:inherit;}
.sub-header .sub-login{flex-direction:row;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:600;}
.sub-header .sub-login svg{width:20px;height:20px;stroke:#fff;}
.sub-header .sub-login:hover{opacity:.85;}
/* Recette du 2026-09-29 (U-02) : a 360 px, le logo (259 px) et le bouton
   « Je me connecte » ne tenaient pas sur la ligne, le bouton sortait de
   l'ecran. Le logo cede la place, le bouton garde la sienne. */
@media (max-width:600px){
  .sub-header .logo--svg{flex:0 1 auto;min-width:0;}
  .sub-header .logo--svg img{height:auto;width:100%;max-height:34px;}
  .sub-header .sub-login{flex:none;}
}

/* ---------- hero page abonnement (composé en blocs core) ---------- */
.abon-hero{padding:56px 0 10px;text-align:center;}
.abon-kicker{font-family:var(--sans);font-weight:800;font-size:52px;letter-spacing:-.02em;color:var(--ink);margin:0;}
.hero-banner{background:var(--yellow);margin-bottom:10px;}
/* ABO-11 : le titre du bandeau jaune était en graisse 800 sur 52px, plus
   lourd que celui de la page Abonnements que la maquette pose à 700. Ramené à
   700, puis à 36px sur demande de recette du 2026-09-01. `.hero-banner` ne
   sert que sur la page Offres Jeunes, la règle n'a donc pas à être portée.
   Le repli mobile plus bas, à 34px, reste au-dessous et garde son sens. */
.hero-banner h1{font-family:var(--sans);font-weight:700;font-size:36px;letter-spacing:-.02em;text-align:center;color:var(--brand-red);margin:0;padding:10px 0;}
@media (max-width:992px){
  .abon-kicker,.hero-banner h1{font-size:34px;}
}

/* ============================================================
   Bandeau titre de page (pattern parresia/expo, pages composées)
   Bande navy pleine largeur, titre serif blanc — cf. maquette L'Expo.
   ============================================================ */
.page-band,
.expo-page-band{background:var(--navy);padding:34px 0;}
.page-band h1,
.expo-page-band h1{font-family:var(--serif);font-weight:700;font-size:40px;color:#fff;margin:0;letter-spacing:-.01em;}
@media (max-width:768px){
  .page-band h1,
  .expo-page-band h1{font-size:30px;}
}
/* KIO-05 : le choix de la revue, pose sur la bande du kiosque. Le titre tient
   la gauche, le selecteur la droite ; sous 768px il repasse dessous, ferre a
   gauche, plutot que de comprimer le titre. La revue active est en plein, la
   seconde en contour : le lecteur voit d'un coup d'oeil laquelle il consulte. */
.kio-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.kio-switch{display:flex;align-items:center;gap:8px;}
.kio-switch__btn{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:700;font-size:13px;
  line-height:1;letter-spacing:.01em;color:#fff;text-decoration:none;padding:10px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);transition:background-color .15s ease,color .15s ease,border-color .15s ease;}
.kio-switch__btn:hover{background:rgba(255,255,255,.14);border-color:#fff;}
.kio-switch__btn.is-active{background:#fff;color:var(--navy);border-color:#fff;}
@media (max-width:768px){
  .kio-head .wrap{align-items:flex-start;}
  .kio-switch{width:100%;}
  .kio-switch__btn{font-size:12px;padding:9px 14px;}
}
/* bandes Vidéos / Expo posées dans la colonne centrale (et non pleine largeur) */
.body-cols .center .videos,
.expo-page-content .videos{border-radius:8px;padding:26px 0 30px;}
.body-cols .center .expo,
.expo-page-content .expo{border-top:0;padding:6px 0 0;margin-bottom:70px;}

/* ============================================================
   Page « Abonnements » (pattern parresia/abonnement)
   Hero serif + FAQ (core/details) + promo + avantages.
   Header = part header-minimal partagée (navy, comme la page jeunes).
   La grille tarifaire vit dans le bloc parresia/abonnement-offres.
   ============================================================ */

/* ---------- hero ---------- */
.sub-hero{padding:56px 0 8px;text-align:center;}
/* Retour client du 2026-10-02 (remarque de Mathieu) : à l'arrivée sur la
   page Abonnement, les grilles tarifaires doivent se voir sans défiler sur un
   portable de 1280 × 720. Haut de page resserré : marge du main, haut du
   titre et marge avant le bloc des offres (valeurs proposées par Parresia ;
   la bascule et la grille se resserrent dans le style du bloc). */
main.abon-page{margin-block-start:0;}
.abon-page .sub-hero{padding-top:24px;}
.abon-page .wp-block-parresia-abonnement-offres{margin-block-start:12px;}
.sub-hero h1{font-family:var(--serif);font-weight:700;font-size:40px;color:var(--ink);margin:0;letter-spacing:-.01em;}

/* ---------- FAQ (accordéon natif core/details) ---------- */
/* !important : surcharge la règle auto-générée du post-content constrained
   (`.wp-block-post-content.is-layout-constrained > * {max-width:contentSize}`,
   spécificité 0-2-0) pour ramener le bloc FAQ à la largeur maquette (820, centré). */
.faq{padding:56px 0 10px;border-top:1px solid var(--line);margin:24px auto 0;max-width:820px !important;}
.faq .sec-head{justify-content:center;margin-bottom:22px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item > summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer;padding:21px 2px;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary::after{content:"";width:18px;height:18px;flex:none;background:var(--red);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s;}
.faq-item[open] > summary::after{transform:rotate(180deg);}
.faq-item .faq-a{margin:0;padding:0 26px 22px 2px;font-family:var(--serif);font-size:14.5px;line-height:1.55;color:#3a4254;}
.faq-more{margin:0;padding:28px 0 6px;}
/* ABO-10 : le renvoi porte le meme dessin qu'il soit deja cable ou non. En
   attendant la page qui listera toutes les questions, c'est un `span`. */
.faq-more :is(a,span){font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red);}

/* ---------- promo duo ---------- */
/* Grille CSS réelle (colonnes 50/50 égales, cartes de hauteur identique) —
   surcharge le flex de core/columns dont le min-content déséquilibre les cartes. */
/* ABO-04 et ABO-05 : les deux promos passent sur toute la longueur, l'une
   sous l'autre. La maquette les posait côte à côte, mais la recette demande
   de pouvoir masquer l'offre Jeunes sans laisser un demi-bloc vide à côté :
   une seule colonne rend chaque promo autonome. La règle du média mobile
   plus bas devient redondante, elle est conservée telle quelle. */
/* Une offre par rangee, pleine largeur, a toutes les tailles d'ecran.
   Demande de la recette : ainsi une offre peut etre retiree d'un site sans
   laisser un blanc a cote de celle qui reste. Les neuf titres n'ont pas tous
   les memes offres. */
.wp-block-columns.promo-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:56px 0;margin:0;}
.promo-duo > .wp-block-column{display:flex;margin:0;}
.promo{flex:1;border-radius:8px;padding:34px 32px;color:#fff;}
.promo.jeunes{background:var(--navy);}
.promo.entreprises{background:#eef0f3;color:var(--ink);}
.promo h3{font-family:var(--serif);font-weight:700;font-size:23px;margin:0 0 12px;}
.promo p{font-size:14px;line-height:1.5;margin:0 0 22px;max-width:38ch;}
.promo.entreprises p{color:#3a4254;}
.promo .wp-block-button__link{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;padding:12px 22px;border-radius:4px;}
.promo.jeunes .wp-block-button__link{background:var(--yellow);color:var(--navy-deep);}
.promo.entreprises .wp-block-button__link{background:var(--navy);color:#fff;}
/* ABO-27 : « En savoir plus » est un bouton (il ouvre la fenetre du
   formulaire), pas un lien de bloc Boutons : il recoit le dessin des autres
   appels de carte. La fenetre est rendue DANS la carte ; la regle `.promo p`
   (largeur 38 caracteres, marge basse) ne doit pas atteindre les lignes du
   formulaire, qui se retrouvaient sur la moitie gauche. */
.promo p.wp-block-buttons{margin:0;}
.promo .abo-popover-open{border:0;font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  font-size:12.5px;padding:12px 22px;border-radius:4px;background:var(--navy);color:#fff;transition:background .15s;}
.promo .abo-popover-open:hover,.promo .abo-popover-open:focus-visible{background:var(--navy-deep);}
.promo .abo-popover p{max-width:none;margin:0;}
.promo .abo-popover .parresia-contact__intro{margin:0 0 1rem;font-size:15px;line-height:1.5;}
/* Retour du 2026-09-23 : le visuel passe a droite du texte, il n'est plus
   au-dessus du titre. Le texte garde la premiere colonne, le picto occupe la
   seconde sur toute la hauteur de la carte. Le picto est un `img` nu dans la
   composition du theme, un bloc image (`figure`) dans les pages deja
   composees : les deux formes sont prises. */
/* Recette du 2026-09-29 (U-13) : picto a gauche, offre au centre, bouton a
   droite. Le titre et le texte occupent deux rangees que le picto et le
   bouton couvrent en entier, centres sur la hauteur. La fenetre d'Offres
   Entreprises est une `popover` : fermee, elle ne s'affiche pas ; ouverte,
   elle passe au premier plan, hors de la grille. */
.promo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:40px;align-content:center;}
.promo > *{grid-column:2;}
.promo > :is(.wp-block-image,.promo-picto){grid-column:1;grid-row:1 / span 2;align-self:center;margin:0;}
.promo > .wp-block-buttons{grid-column:3;grid-row:1 / span 2;align-self:center;margin:0;}
.promo > h3{align-self:end;}
.promo > p:not(.wp-block-buttons){align-self:start;margin-bottom:0;}
/* Retour client du 2026-09-25 : des SVG, donc agrandis sans perte. */
.promo .promo-picto{width:220px;margin:0;}
@media (max-width:900px){
  .promo{column-gap:28px;}
  .promo .promo-picto{width:160px;}
}
/* Sous 768 px, trois colonnes ne laissent plus de place au texte : le bouton
   passe sous l'offre, dans la colonne du texte.
   R13-13 (RESP-29) : la premiere colonne etait `auto`, donc a la largeur de
   l'illustration. Un bloc Image porte sa largeur en ligne (204 px sur la
   preprod) et ecrasait le texte a 76 px. Format banniere conserve, repris du
   CSS additionnel pose sur la preprod le 2026-10-16 : illustration bornee a
   gauche, texte a droite, bouton dessous, pleine largeur sous 600 px. Etendu
   au picto du pattern et au bouton a fenetre ; une carte sans illustration
   passe en une colonne, sans gouttiere vide. */
@media (max-width:767px){
  .promo{grid-template-columns:clamp(84px,26vw,150px) minmax(0,1fr);column-gap:20px;}
  .promo > :is(.wp-block-image,.promo-picto){grid-area:1 / 1 / span 3;align-self:center;width:100%;margin:0;}
  .promo .promo-picto{width:100%;}
  .promo > .wp-block-image img{display:block;width:100% !important;height:auto !important;}
  .promo > h3{font-size:21px;line-height:1.2;margin-bottom:8px;overflow-wrap:break-word;}
  .promo > p:not(.wp-block-buttons){max-width:none;}
  .promo > :is(div,p).wp-block-buttons{grid-area:3 / 2;margin-top:18px;}
  .promo:not(:has(> :is(.wp-block-image,.promo-picto))){grid-template-columns:minmax(0,1fr);}
  .promo:not(:has(> :is(.wp-block-image,.promo-picto))) > *,
  .promo:not(:has(> :is(.wp-block-image,.promo-picto))) > :is(div,p).wp-block-buttons{grid-column:1;grid-row:auto;}
}
@media (max-width:600px){
  .promo{padding:22px 20px;column-gap:16px;}
  .promo > :is(.wp-block-image,.promo-picto){grid-row:1 / span 2;}
  .promo > :is(div,p).wp-block-buttons{grid-column:1 / -1;}
  .promo > .wp-block-buttons .wp-block-button,
  .promo > p.wp-block-buttons{width:100%;max-width:none;}
  .promo > .wp-block-buttons :is(.wp-block-button__link,.abo-popover-open){display:block;width:100%;text-align:center;}
}

/* ---------- avantages abonnés ---------- */
/* ABO-30 : plus de filet gris au-dessus de « Pourquoi s'abonner ». */
.avantages{padding:20px 0 66px;}
/* Grille CSS réelle : liste (gauche) / visuel (droite) à 50/50, visuel plein. */
.wp-block-columns.av-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding-top:28px;margin:0;}
.av-grid > .wp-block-column{margin:0;}
.av-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;}
.av-list li{display:flex;gap:11px;font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink);line-height:1.35;}
.av-list li::before{content:"";width:19px;height:19px;flex:none;margin-top:2px;background:var(--red);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;}
.av-img .ph{width:100%;aspect-ratio:1000/550;border-radius:var(--r-image);}

@media (max-width:768px){
  .sub-hero h1{font-size:30px;}
  .wp-block-columns.promo-duo,
  .wp-block-columns.av-grid{grid-template-columns:1fr;}
  .av-list{grid-template-columns:1fr;}
}

/* ============================================================
   EXPO — FICHE EXPOSANT (single-exposant)
   Blocks parresia/exposant-header + parresia/exposant-single.
   ============================================================ */

/* en-tête collé à la nav : annule le block-gap WP (:where(.wp-site-blocks)>*) */
.exposant-header{margin-top:0;}

/* bandeau navy : titre de rubrique + « Univers {exposant} » */
/* EXPO-10 : le titre du bandeau prend la police baton des categories, pas le
   serif des titres d'article. */
.expo-page-band .band-title{font-family:var(--font-titre);font-weight:700;font-size:38px;color:#fff;margin:0;letter-spacing:-.01em;line-height:1.12;}
.expo-page-band .band-sub{font-family:var(--serif);font-size:20px;color:#c9d0de;margin-top:2px;}

/* couverture pleine largeur */
.fiche-cover{width:100%;aspect-ratio:1140/260;border-radius:var(--r-image);margin:var(--e6) 0 0;}

/* en-tête : logo + infos */
.fiche-head{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:start;padding:26px 0 20px;}
.fiche-logo{width:150px;height:150px;flex:none;border:5px solid #fff;background:#fff;box-shadow:0 8px 22px rgba(17,32,63,.12);}
.fiche-info h1{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-une);line-height:var(--lh-une);
  color:var(--c-encre);margin:0 0 var(--e3);letter-spacing:-.01em;}
.fiche-info .tagline{font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);
  color:var(--c-texte);margin:0 0 var(--e4);max-width:70ch;}

/* étiquettes secteur (liens vers l'archive du terme) */
.fiche-tags{display:flex;flex-wrap:wrap;gap:9px;padding:26px 0 0;}
.fiche-tags a{font-family:var(--font-titre);font-size:12.5px;font-weight:600;color:var(--c-encre);
  background:var(--c-trame);border-radius:999px;padding:var(--e2) var(--e4);transition:background .15s,color .15s;}
.fiche-tags.head{padding:0 0 16px;}
.fiche-tags.head a:hover,
.fiche-tags.head a:focus-visible{background:var(--navy);color:#fff;}

/* description longue */
.exposant-header .lead{font-family:var(--serif);font-size:15.5px;line-height:1.6;color:#3a4254;margin:0 0 22px;}
.exposant-header .lead>*:last-child{margin-bottom:0;}

/* CTA « Visiter le site » + séparateur */
.fiche-desc{display:flex;align-items:flex-start;gap:32px;padding:0 0 30px;border-bottom:1px solid var(--line);margin-bottom:6px;}
/* §6.11 — bouton « Visiter le site » réduit et aligné sur le socle des
   boutons (§5.4) : il occupait la moitié du bandeau. */
.fiche-desc .visit{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  height:var(--h-bouton);padding:0 var(--e5);background:var(--c-rouge);color:var(--c-papier);
  font-family:var(--font-titre);font-weight:600;font-size:14px;letter-spacing:.01em;
  border-radius:var(--r-bouton);transition:background .15s;white-space:nowrap;}
.fiche-desc .visit:hover{background:var(--c-rouge-h);}
.fiche-desc .visit:focus-visible{outline:2px solid var(--c-encre);outline-offset:2px;}
.fiche-desc .visit svg{width:16px;height:16px;}

/* sections de la colonne centrale */
.fiche-sec{padding:34px 0;border-bottom:1px solid var(--line);}
.fiche-sec:last-of-type{border-bottom:0;}
.exposant-single-block>.fiche-sec:first-child{padding-top:20px;}

/* cartes produits (4 colonnes) */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.prod-grid .card .art-title{font-size:15px;}

/* catalogues téléchargeables */
.catalogues{display:flex;flex-wrap:wrap;gap:26px;}

/* §6.11 — sections repliées au-delà de quatre contenus. Les items restent dans
   le document (lisibles par les lecteurs d'écran et les moteurs) ; « Voir plus »
   retire la classe via l'Interactivity API. */
.prod-grid.is-clipped>:nth-child(n+5),
.catalogues.is-clipped>:nth-child(n+5){display:none;}
.cat-card{display:flex;flex-direction:column;gap:12px;width:230px;flex:none;}
.cat-card .cat-visual{width:100%;aspect-ratio:1/1.02;border-radius:2px;transition:box-shadow .15s,transform .15s;}
.cat-card:hover .cat-visual{transform:translateY(-3px);box-shadow:0 10px 26px rgba(17,32,63,.12);}
.cat-card .cat-dl{text-align:center;font-family:var(--sans);font-weight:800;font-size:14px;color:var(--ink);}
.cat-card:hover .cat-dl{color:var(--red);}

@media (max-width:1024px){
  .prod-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .expo-page-band .band-title{font-size:30px;}
  .expo-page-band .band-sub{font-size:17px;}
  .fiche-cover{aspect-ratio:16/9;}
  .fiche-head{grid-template-columns:1fr;gap:18px;}
  .fiche-logo{width:120px;height:120px;}
  .fiche-info h1{font-size:30px;}
  .fiche-info .tagline{font-size:17px;}
  .fiche-desc{flex-direction:column;gap:18px;}
  .fiche-desc .visit{width:100%;justify-content:center;}
  .prod-grid{grid-template-columns:1fr;}
  .cat-card{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .cat-card:hover .cat-visual{transform:none;}
}

/* ============================================================
   EXPO — EXPOSANTS (annuaire)
   Block parresia/exposant-archive (page-exposants + pattern parresia/exposants).
   ============================================================ */
.exp-archive.wp-block-parresia-exposant-archive{margin-top:0;}
/* EXPO-12 : la partie basse reprend la marge laterale du bandeau de recherche,
   que ce raccourci de padding effacait : mises a jour, logos et cartes
   s'alignent sur le moteur. */
.exp-archive .exp-body{padding:26px var(--marge-laterale) 70px;}

/* bandeau recherche exposants (visuel + titre + filtres) */
.exp-hero{position:relative;overflow:hidden;background:var(--c-encre);}
.exp-hero .exp-hero-bg{position:absolute;inset:0;width:100%;height:100%;border-radius:0;opacity:.55;}
/* §6.11 — bandeau de hauteur fixe, identique sur toutes les pages Expo, et
   titre remonté pour laisser la place aux sous-titres. */
.exp-hero-in{position:relative;padding:var(--e6) var(--marge-laterale) var(--e5);min-height:132px;
  display:flex;flex-direction:column;justify-content:flex-start;}
/* Police allégée (400) : le titre du bandeau ne doit plus peser autant. */
/* EXPO-11 : « Vous recherchez un fabricant, un distributeur » est une phrase,
   elle prend la police du texte courant et des chapos. */
.exp-hero-title{font-family:var(--font-texte);font-weight:400;font-size:var(--fs-une);line-height:var(--lh-une);
  color:var(--c-papier);margin:0 0 var(--e4);letter-spacing:-.01em;text-shadow:0 1px 12px rgb(0 0 0 / 35%);}
.exp-hero .exp-search{margin:0 0 16px;}
.exp-hero .exp-filters{margin:0;}

.exp-search{display:flex;gap:10px;margin:0 0 18px;}
.exp-search .fld{position:relative;flex:1;min-width:0;}
.exp-search .fld svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--meta);pointer-events:none;}
.exp-search input,.exp-search select{
  width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);
  border:1px solid var(--line-2);border-radius:4px;background:#fff;
  padding:13px 14px;outline:none;transition:border-color .15s,box-shadow .15s;}
.exp-search .fld.has-ic input{padding-left:44px;}
.exp-search input::placeholder{color:#9aa1ad;}
.exp-search input:focus,.exp-search select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(24,39,71,.10);}
.exp-search select{appearance:none;cursor:pointer;color:#6a707d;padding-right:34px;max-width:230px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23182747' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;}

/* chips filtres actifs */
.exp-filters{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 20px;}
a.exp-filter,a.exp-filter:hover{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:#fff;
  background:var(--navy);border-radius:16px;padding:8px 9px 8px 15px;}
.exp-filter .x{width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;}
.exp-filter:hover .x{background:var(--red);}

/* index alphabétique */
.alpha-index{display:flex;flex-wrap:wrap;gap:4px;padding:16px 0;margin-bottom:26px;justify-content:center;}
.alpha-index a{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:15px;font-weight:800;color:var(--navy);border-radius:4px;}
.alpha-index a:hover{background:#eef0f3;color:var(--red);}
.alpha-index a.active,.alpha-index a.active:hover{background:var(--red);color:#fff;}
.alpha-index a.off{color:#c2c6cf;pointer-events:none;}

/* grille exposants */
/* EXPO-14 : un fond leger derive de la couleur du moteur de recherche sous la
   liste des cartes, contre l'effet « trop blanc ». Repli fixe pour les
   navigateurs sans color-mix(). */
.exp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  padding:22px;border-radius:var(--r-bloc);background:#eef1f6;background:color-mix(in srgb,var(--c-encre) 6%,#fff);}
.exp-card{display:flex;gap:18px;border:1px solid var(--line-2);background:#fff;padding:18px;transition:box-shadow .15s,border-color .15s;}
.exp-card:hover{border-color:var(--navy);box-shadow:0 6px 18px rgba(17,32,63,.08);}
.exp-card .logo{width:96px;height:96px;flex:none;}
.exp-card .logo-link{flex:none;line-height:0;}
.exp-card h3{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-s);line-height:var(--lh-titre-s);color:var(--ink);margin:2px 0 12px;}
.exp-card h3 a{color:inherit;}
.exp-card h3 a:hover{color:var(--red);}
.exp-card .exp-b{min-width:0;display:flex;flex-direction:column;}
.exp-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;}
/* EXPO-15 : etiquettes plus petites, elles deformaient les cartes. */
.exp-tags a{font-size:max(var(--fs-min,0px),10px);font-weight:600;color:var(--navy);background:#eef0f3;border-radius:12px;padding:4px 9px;line-height:1.2;transition:.15s;}
.exp-tags a:hover{background:var(--navy);color:#fff;}
.exp-grid .exp-empty,.exp-archive .exp-empty{grid-column:1/-1;font-size:14px;color:var(--meta);margin:8px 0;}

/* bandeau mises à jour */
.exp-update{border-bottom:1px solid var(--line);padding:6px 0 18px;margin-bottom:26px;}
.exp-update h4{font-family:var(--sans);font-size:20px;font-weight:800;letter-spacing:.01em;color:var(--ink);margin:0;}

/* rampe de logos récemment mis à jour */
/* EXPO-13 : dix logos par rangee au lieu de neuf, plus petits, plus legers. */
.exp-logos{display:grid;grid-template-columns:repeat(10,1fr);gap:12px;margin-bottom:30px;}
.exp-logo{display:block;border:1px solid var(--c-filet-fort);border-radius:var(--r-image);padding:var(--e2);transition:box-shadow .15s,border-color .15s;}
.exp-logo:hover{border-color:var(--navy);box-shadow:0 6px 16px rgba(17,32,63,.08);}
.exp-logo .ph,.exp-logo .logo-img{width:100%;aspect-ratio:1/1;border-radius:var(--r-image);}
.exp-logo .logo-img{background-color:#fff;background-position:center;background-size:contain;background-repeat:no-repeat;}

@media (max-width:1024px){
  .exp-logos{grid-template-columns:repeat(6,1fr);}
}
@media (max-width:768px){
  .exp-hero-title{font-size:26px;}
  .exp-search{flex-wrap:wrap;}
  .exp-search select{max-width:none;}
  .exp-grid{grid-template-columns:1fr;}
  .exp-logos{grid-template-columns:repeat(3,1fr);}
}
/* R13-17 (RESP-33) : sur telephone, la rangee « dernieres mises a jour » (titre
   et 10 logos, 540 px, dernier logo orphelin) est masquee ; la page s'ouvre
   sur l'index alphabetique et l'annuaire. */
@media (max-width:767px){
  .exp-update,.exp-logos{display:none;}
}

/* ============================================================
   PAGE MASTERCLASS (block parresia/masterclass-list)
   Maquette « dentaire365 - Masterclass.html ». Pleine largeur, sans rails.
   ============================================================ */
/* Retour du 2026-09-23 : la regle `.ad.banner990{height:118px}` posee ici
   s'appliquait a tout le site, pubs reelles comprises. Une creative plus haute
   que 118 px debordait au-dessus de son emplacement, de 8 a 17 px selon la
   page, et ne s'alignait plus sur les colonnes. Le gabarit vide a sa hauteur
   (`.ad:not(.ad--live).banner990`), la pub reelle garde la sienne. */
.mc-hero{text-align:center;padding:46px 0 4px;}
.mc-hero h1{font-family:var(--sans);font-weight:800;font-size:34px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin:0;}
.mc-hero .mc-bar{width:54px;height:5px;background:var(--red);margin:18px auto 26px;}
.mc-search{max-width:440px;margin:0 auto;position:relative;}
.mc-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--meta);pointer-events:none;}
.mc-search input{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);border:1px solid var(--line-2);border-radius:8px;background:#fff;padding:14px 16px 14px 48px;outline:none;transition:border-color .15s,box-shadow .15s;}
.mc-search input::placeholder{color:#9aa1ad;}
.mc-search input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(24,39,71,.10);}
.mc-list{display:flex;flex-direction:column;gap:24px;padding:38px 0 6px;}
/* état vide de la recherche en place dans la rubrique */
.mc-empty{font-family:var(--serif);font-size:17px;color:var(--ink-soft, #5b6478);text-align:center;padding:40px 20px;margin:0;}

/* --- Single Masterclass : sommaire des épisodes sous l'article parent ---
   La maquette détache le premier épisode et aligne les suivants en rangées.
   Le bloc ne rend rien sur un article ordinaire : pas de gabarit dédié. */
.parresia-masterclass-children{margin:44px 0 0;}
.mcs-episodes{padding:44px 0 4px;}
.mcs-sec-head{display:flex;align-items:center;gap:14px;margin:0 0 26px;}
.mcs-sec-head .bar{width:5px;height:26px;background:var(--c-rouge);border-radius:2px;flex:none;}
.mcs-sec-head h2{font-family:var(--font-titre);font-weight:800;font-size:22px;letter-spacing:-.01em;
  color:var(--c-encre);margin:0;}

/* épisode d'ouverture, en grand */
.mcs-feature{display:grid;grid-template-columns:.9fr 1fr;background:var(--c-trame);
  border-radius:var(--r-bloc);overflow:hidden;margin:0 0 26px;}
.mcs-feature .fig{position:relative;display:block;}
.mcs-feature .fig img{width:100%;height:100%;min-height:250px;object-fit:cover;display:block;}
.mcs-feature .bd{align-self:center;padding:30px 36px;}
.mcs-feature .bd .k{display:inline-block;font-size:max(var(--fs-min,0px),11px);font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--c-rouge);margin-bottom:13px;}
.mcs-feature .bd h3{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-m);
  line-height:var(--lh-titre-m);color:var(--c-encre);margin:0 0 13px;}
.mcs-feature .bd p{font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);
  color:var(--c-texte);margin:0;}

/* épisodes suivants */
.mcs-eplist{display:flex;flex-direction:column;gap:18px;}
.mcs-ep{display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px;align-items:center;
  background:var(--c-trame);border-radius:var(--r-bloc);overflow:hidden;}
.mcs-ep .fig{position:relative;display:block;align-self:stretch;}
.mcs-ep .fig img{width:100%;height:100%;min-height:132px;object-fit:cover;display:block;}
.mcs-ep .bd{padding:18px 30px 18px 0;min-width:0;}
.mcs-ep .bd .k{display:inline-block;font-size:max(var(--fs-min,0px),10px);font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--c-texte-doux);margin-bottom:9px;}
.mcs-ep .bd h3{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-s);
  line-height:var(--lh-titre-s);color:var(--c-encre);margin:0 0 8px;}
.mcs-ep .bd p{font-family:var(--font-texte);font-size:13.5px;line-height:1.5;color:var(--c-texte);margin:0;}

.mcs-feature h3 a,.mcs-ep h3 a{color:inherit;}
.mcs-feature h3 a:hover,.mcs-ep h3 a:hover{color:var(--c-rouge);}

/* pastille de lecture, reprise du traitement des vignettes vidéo */
.mcs-feature .play,.mcs-ep .play{position:absolute;inset:0;margin:auto;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;}
.mcs-feature .play{width:58px;height:58px;}
.mcs-ep .play{width:44px;height:44px;}
.mcs-feature .play::after,.mcs-ep .play::after{content:"";border-top:11px solid transparent;
  border-bottom:11px solid transparent;border-left:17px solid var(--c-encre);margin-left:5px;}
.mcs-ep .play::after{border-top-width:8px;border-bottom-width:8px;border-left-width:13px;margin-left:4px;}

/* Une vignette absente ne doit pas écraser la rangée : le conteneur garde sa
   hauteur, la pastille reste centrée sur un aplat. */
.mcs-feature .fig:not(:has(img)),.mcs-ep .fig:not(:has(img)){background:var(--c-filet);}

@media (max-width:780px){
  .mcs-feature,.mcs-ep{grid-template-columns:1fr;}
  .mcs-feature .bd{padding:22px;}
  .mcs-ep .bd{padding:18px 22px;}
}
.mc-row{display:grid;grid-template-columns:auto minmax(0,1fr) 216px;background:#eef2f8;overflow:hidden;}
.mc-row--nospon{grid-template-columns:auto minmax(0,1fr);}
/* Largeur définie et ratio de référence 1000×550 (§4.1). Un pourcentage est
   indéterminé au dimensionnement intrinsèque de la piste `auto` ci-dessus : la
   piste se résoudrait alors sur les 1000px de la taille `d365-une`, avalerait la
   ligne et écraserait la colonne de texte. */
.mc-row .mc-thumb{position:relative;width:284px;aspect-ratio:1000/550;align-self:start;
  margin:var(--e6) 0 var(--e6) var(--e6);border-radius:var(--r-image);overflow:hidden;}
.mc-thumb>img{width:100%;height:100%;object-fit:cover;}
/* §5.3 — étiquette unique : fond rouge, rayon d'étiquette. */
.mc-thumb .mc-tag{position:absolute;top:10px;left:10px;z-index:2;background:var(--c-rouge);color:var(--c-papier);
  font-family:var(--font-titre);font-size:max(var(--fs-min,0px),11px);font-weight:700;letter-spacing:var(--ls-etiquette);
  text-transform:uppercase;padding:5px 10px;border-radius:var(--r-etiquette);box-shadow:0 2px 8px rgb(0 0 0 / 28%);}
.mc-thumb .play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;}
.mc-thumb .play::after{content:"";border-left:14px solid var(--navy);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px;}
.mc-body{align-self:center;padding:26px 36px;min-width:0;}
.mc-body h3{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-l);line-height:var(--lh-titre-l);color:var(--navy);margin:0 0 12px;letter-spacing:-.005em;}
.mc-body h3 a{color:inherit;}
.mc-body h3 a:hover{color:var(--red);}
/* MC-06 : auteurs en gras entre le titre et le chapo. */
.mc-body .mc-authors{font-family:var(--font-texte);font-size:var(--fs-folio);line-height:var(--lh-folio);font-weight:700;color:var(--c-encre);margin:-4px 0 10px;}
.mc-body p{font-family:var(--serif);font-size:14px;line-height:1.55;color:#3a4254;margin:0;text-wrap:pretty;}
.mc-spon{background:var(--navy);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:15px;padding:24px 18px;}
.mc-spon .mc-spon-k{font-size:13px;font-weight:800;line-height:1.35;letter-spacing:.01em;color:#eef1f8;}
.mc-logocard{background:var(--c-papier);border-radius:var(--r-bloc);padding:var(--e4) var(--e6);}
.mc-logocard img{max-width:150px;max-height:60px;width:auto;height:auto;object-fit:contain;display:block;}

@media (max-width:768px){
  .mc-row,.mc-row--nospon{grid-template-columns:1fr;}
  .mc-row .mc-thumb{width:auto;margin:16px 16px 0;}
  .mc-body{padding:16px 20px;}
  .mc-spon{padding:18px;}
}

/* ============================================================
   SOUS-NAV RUBRIQUE (block parresia/rubrique-subnav)
   Pastilles de sous-catégories sous la nav ; l'active en rouge.
   ============================================================ */
.subnav{border-bottom:1px solid var(--line);background:#fff;margin-top:0;}
.subnav-row{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:13px 22px;}
.subnav-row a{font-size:12.5px;font-weight:700;color:var(--navy);border:1px solid var(--line-2);border-radius:16px;padding:6px 16px;line-height:1;display:inline-flex;align-items:center;transition:background .15s,border-color .15s,color .15s;}
.subnav-row a.active{background:var(--red);border-color:var(--red);color:#fff;}
.subnav-row a:hover:not(.active){border-color:var(--red);color:var(--red);}

/* ============================================================
   KIOSQUE (blocks parresia/kiosque-latest, parresia/kiosque-list)
   Page « Le magazine » : dernier numéro paru puis grilles de
   couvertures par nature (numéros, suppléments, hors-séries).
   Le block sort du gabarit contraint (`alignfull` posé au rendu) pour que le
   bandeau file bord à bord comme sur L'Expo ; son contenu est re-contraint sur
   la laisse de la page pour rester aligné sur les grilles de couvertures
   rendues par les blocks `parresia/kiosque-list` voisins, restés dans le flux.
   ============================================================ */
/* Laisse de la page = contentSize du gabarit `templates/page-kiosque.html`,
   marge = padding racine de theme.json (`styles.spacing.padding`), celui-là même
   que les blocks `kiosque-list` restés dans le flux reçoivent de leur parent.
   Pas de `width` : c'est la marge négative de l'alignement plein qui étire le
   block jusqu'aux bords ; une largeur en pourcentage la neutraliserait. */
.parresia-kiosque{--kio-laisse:1140px;--kio-marge:var(--wp--preset--spacing--md);}
.parresia-kiosque .kio-latest{max-width:calc(var(--kio-laisse) + 2 * var(--kio-marge));
  margin-inline:auto;padding-inline:var(--kio-marge);}

/* §6.12 — bandeau « Le magazine » : la bande de titre de page commune
   (`.page-band`, § plus haut) porte le fond, la hauteur et le titre sérif blanc.
   Rien à redéclarer ici, sinon la bande divergerait de celle de L'Expo. */

/* §6.12 — cartouche du dernier numéro centré : nom, numéro et mois de
   parution alignés sur l'axe de la couverture. */
.kio-latest{display:grid;grid-template-columns:1fr 270px;gap:44px;align-items:center;
  padding:var(--e7) 0 var(--e9);border-bottom:1px solid var(--c-filet);}
.kio-latest > :first-child{text-align:center;}
.kio-latest .kio-ctas{justify-content:center;}
.kio-badge{display:inline-flex;align-items:center;height:24px;padding:0 11px;background:var(--c-rouge);
  color:var(--c-papier);font-family:var(--font-titre);font-size:max(var(--fs-min,0px),11px);font-weight:700;
  letter-spacing:var(--ls-etiquette);text-transform:uppercase;border-radius:var(--r-etiquette);
  margin-bottom:var(--e5);}
.kio-latest-title{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-une);
  line-height:var(--lh-une);color:var(--c-encre);margin:0 0 var(--e2);letter-spacing:-.01em;}
.kio-latest-title a{color:inherit;}
.kio-latest-title a:hover{color:var(--red);}
/* §6.12 — le mois et l'année sont en rouge, sur toute la page. */
.kio-latest-period{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-l);
  line-height:var(--lh-titre-l);color:var(--c-rouge);margin:0 0 var(--e7);}
.kio-ctas{display:flex;gap:16px;margin:0;flex-wrap:wrap;}
/* §6.12 — boutons réduits et arrondis au rayon commun, plus de pilule XXL. */
.kio-cta{display:inline-flex;align-items:center;justify-content:center;
  height:var(--h-bouton);padding:0 var(--e5);border-radius:var(--r-bouton);
  font-family:var(--font-titre);font-weight:600;font-size:14px;text-align:center;
  transition:background .15s ease;
  /* KIO-04 : « Se connecter » est devenu un bouton, il reprend le gabarit du lien. */
  border:0;cursor:pointer;line-height:1;}
.kio-cta--go{background:var(--c-jaune);color:var(--c-encre);}
.kio-cta--go:hover{background:var(--c-jaune-h);color:var(--c-encre);}
.kio-cta--login{background:var(--c-encre);color:var(--c-papier);}
.kio-cta--login:hover{background:var(--c-texte);color:var(--c-papier);}
/* Encre conservée au survol dans les deux cas ; seul le fond s'assombrit. */
.kio-cta:hover{filter:brightness(.93);}
.kio-cta--go:hover{color:var(--navy-deep);}
.kio-cta--login:hover{color:#fff;}
.kio-latest-cover{display:block;width:270px;}

/* KIO-01 : une couverture de revue a des angles vifs, comme l'objet imprime. */
.kio-cover{display:block;width:100%;aspect-ratio:210/297;border-radius:0;overflow:hidden;
  position:relative;box-shadow:0 24px 56px rgb(17 32 63 / 20%);}
.kio-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.kio-cover--empty{background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 10px,rgba(0,0,0,.06) 10px 20px),var(--ph);}

/* §6.12 — « Voir tous les numéros » : bouton encre centré sous la grille.
   Il reprend le gabarit de bouton du kiosque, pas la pilule « tout voir ». */
.kio-more{display:flex;justify-content:center;padding-top:var(--e7);}

.kio-section{padding:46px 0;border-bottom:1px solid var(--line);}
.kio-section:last-child{border-bottom:0;}
.kio-section .sec-head{margin-bottom:28px;}
.kio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.kio-card{display:flex;flex-direction:column;gap:13px;}
.kio-card-link{display:block;transition:transform .15s;}
.kio-card:hover .kio-card-link{transform:translateY(-3px);}
.kio-card .kio-cover{box-shadow:none;}
.kio-card-title{font-family:var(--font-titre);font-weight:700;font-size:var(--fs-titre-s);
  line-height:var(--lh-titre-s);color:var(--c-encre);margin:0;}
.kio-card-title a{color:inherit;}
.kio-card-title a:hover{color:var(--red);}
/* §6.12 — références centrées sous les couvertures, période en rouge. */
.kio-card{text-align:center;}
.kio-card-period{font-family:var(--font-titre);font-size:var(--fs-folio);font-weight:600;color:var(--c-rouge);}

@media (max-width:960px){
  .kio-grid{grid-template-columns:repeat(2,1fr);}
  .kio-latest{grid-template-columns:1fr;gap:28px;}
  .kio-latest-cover{width:210px;}
  .kio-latest-title{font-size:28px;}
  .kio-latest-period{font-size:22px;margin-bottom:24px;}
}
@media (max-width:560px){
  .kio-grid{grid-template-columns:1fr 1fr;gap:18px;}
  .kio-ctas{flex-direction:column;}
}

/* ============== CORPS D'ARTICLE : CONTENU HERITE (ART-11 a ART-15) ==============
   Les articles importes de l'ancien site et de Melody portent des galeries
   core, des figures `melody-photo`, des encadres en classes de paragraphe, des
   colonnes de signature et un diaporama `acf/carousel` rendu par
   Legacy_Content. Ces regles les mettent au pas du corps d'article. */

/* Figures : la regle a 50 % vaut pour une image isolee, pas pour une galerie
   ni pour un diaporama, qui prennent la colonne. */
.prose .wp-block-gallery,.prose .prose-slider{width:100%;margin:var(--e7) 0 0;}
.prose .wp-block-gallery figure,.prose .prose-slider figure{margin:0;}
.prose .wp-block-gallery .blocks-gallery-caption,.prose .wp-block-gallery>figcaption{width:100%;}
.prose figcaption p{margin:0;font-size:inherit;line-height:inherit;}
/* Ancien format de galerie (liste `blocks-gallery-grid`) : grille selon columns-N. */
.prose .blocks-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;margin:0;padding:0;}
.prose .columns-1 .blocks-gallery-grid{grid-template-columns:1fr;}
.prose .columns-2 .blocks-gallery-grid{grid-template-columns:repeat(2,1fr);}
.prose .columns-4 .blocks-gallery-grid{grid-template-columns:repeat(4,1fr);}
.prose .blocks-gallery-item{margin:0;}
.prose .blocks-gallery-item img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:var(--r-image);}
.prose .columns-1 .blocks-gallery-item img{width:auto;max-height:520px;}
/* Legendes Melody posees dans un paragraphe centre avec l'image. */
.prose .masterclass-legends{text-align:center;font-family:var(--font-texte);font-size:var(--fs-folio);
  line-height:var(--lh-folio);color:var(--c-texte-doux);margin:var(--e6) 0 0;}
.prose .masterclass-legends img{display:block;max-width:100%;height:auto;margin:0 auto var(--e2);border-radius:var(--r-image);}

/* ART-11 : diaporama dans le texte, une image par vue, fleches dans le cadre. */
.prose .prose-slider .ga-slider{position:relative;}
.prose .ps-grid{display:grid;grid-template-columns:1fr;}
.prose .ps-item{width:100%;}
.prose .ps-item img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain;background:var(--c-trame);border-radius:var(--r-image);}
.prose .prose-slider .ga-arrow--prev{left:10px;}
.prose .prose-slider .ga-arrow--next{right:10px;}
.prose .prose-slider .dots{margin-top:10px;}

/* ART-15 : encadres. Classes de paragraphe de l'ancien site (`encadre`,
   `encadre2`) et div de references en bas d'article (`note-bas-page`). */
.prose .encadre,.prose .encadre2,.prose .wp-block-group.encadre{background:var(--c-trame);border-left:4px solid var(--c-rouge);
  border-radius:0 var(--r-bloc) var(--r-bloc) 0;padding:var(--e5) var(--e6);margin:var(--e7) 0 0;
  font-size:15px;line-height:1.55;color:var(--c-texte);}
.prose .encadre>p:first-child,.prose .encadre2>p:first-child{margin-top:0;}
.prose .encadre.note-bas-page{border-left-color:var(--c-filet-fort);font-size:var(--fs-folio);line-height:var(--lh-folio);color:var(--c-texte-doux);}
.prose .encadre.note-bas-page p{font-size:inherit;line-height:inherit;margin-top:6px;}
/* ART-31 : titre de l'encadre, « Bibliographie » en tete de ses references.
   Le libelle trainait en gras hors de l'encadre, a la taille du corps de
   texte ; il en devient la tetiere, dans la graisse des tetieres du site. */
.prose .encadre .encadre-titre{margin:0 0 8px;font-family:var(--font-titre);font-size:12px;line-height:1.2;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-encre);}
.prose .encadre.note-bas-page .encadre-titre{font-size:12px;color:var(--c-encre);}

/* ART-14 : bibliographie repliee (ex-accordeon Bootstrap), meme habillage que
   le sommaire. */
.prose .prose-fold{border:1px solid var(--line-2);border-top:3px solid var(--c-nuit);margin:var(--e7) 0 0;padding:0 16px;}
.prose .prose-fold summary{cursor:pointer;padding:14px 0;font-family:var(--font-titre);font-size:13px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--c-encre);}
.prose .prose-fold summary::marker{color:var(--c-rouge);}
.prose .prose-fold-body{padding:0 0 14px;font-size:var(--fs-folio);line-height:var(--lh-folio);color:var(--c-texte-doux);}
.prose .prose-fold-body ol,.prose .prose-fold-body ul{margin-top:0;font-size:inherit;line-height:inherit;}

/* Listes, tableaux, filets : jamais styles jusqu'ici dans le corps. */
.prose ul,.prose ol{margin:14px 0 0;padding-left:24px;font-size:16px;line-height:1.62;}
.prose li{margin-top:6px;}
.prose li::marker{color:var(--c-rouge);font-weight:700;}
.prose table{width:100%;border-collapse:collapse;margin:var(--e6) 0 0;font-size:14px;line-height:1.45;}
.prose th,.prose td{border:1px solid var(--c-filet);padding:8px 10px;text-align:left;vertical-align:top;}
.prose th{background:var(--c-trame);font-family:var(--font-titre);font-weight:700;}
.prose hr,.prose .wp-block-separator{border:0;border-top:1px solid var(--c-filet);width:80px;margin:var(--e7) auto 0;}

/* Colonnes dans le corps (signature des auteurs des masterclass : photo
   ronde a 15 %, nom en h4 et titres a 85 %). */
.prose .wp-block-columns{display:flex;gap:var(--e5);align-items:flex-start;margin:var(--e6) 0 0;}
.prose .wp-block-column{min-width:0;flex:1 1 0;}
.prose .masterclass-signature-container{align-items:center;border-top:1px solid var(--c-filet);padding-top:var(--e5);}
.prose .masterclass-signature-container figure,.prose .masterclass-signature-container .wp-block-image{width:100%;margin:0;}
.prose .masterclass-signature-container img{aspect-ratio:1;object-fit:cover;border-radius:50%;}
.prose .masterclass-signature-container h4{margin:0 0 4px;}
.prose .masterclass-signature-container p{margin:0;font-size:14px;line-height:1.45;}
@media (max-width:767px){
  .prose .wp-block-columns:not(.masterclass-signature-container){flex-direction:column;}
  .prose .wp-block-gallery figure,.prose .prose-slider figure{width:100%;}
}

/* EXPO-08 : pave « Les exposants » en tete du rail droit de L'Expo, sur le
   modele du bouton « Deposer une annonce » : un seul lien, image puis texte,
   bouton rouge en pied. */
.expo-pave-wrap{margin:0 0 26px;}
.expo-pave{display:block;background:var(--c-trame);border-radius:var(--r-bloc);overflow:hidden;color:var(--c-encre);text-decoration:none;
  border:1px solid var(--c-filet);transition:box-shadow .15s,border-color .15s;}
.expo-pave:hover{border-color:var(--c-filet-fort);box-shadow:0 6px 18px rgb(0 0 0 / 10%);color:var(--c-encre);}
.expo-pave-img{aspect-ratio:3/2;background:var(--c-papier);overflow:hidden;}
.expo-pave-img img{width:100%;height:100%;object-fit:cover;display:block;}
.expo-pave-logos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--c-filet);}
.expo-pave-logos .lg{display:flex;align-items:center;justify-content:center;background:var(--c-papier);padding:14px;min-width:0;}
.expo-pave-logos .lg img{width:100%;height:100%;max-height:56px;object-fit:contain;}
.expo-pave-body{display:flex;flex-direction:column;gap:6px;padding:var(--e4) var(--e5) var(--e5);}
.expo-pave-body .k{font-family:var(--font-titre);font-size:max(var(--fs-min,0px),11px);font-weight:700;letter-spacing:var(--ls-etiquette);text-transform:uppercase;color:var(--c-rouge);}
.expo-pave-body strong{font-family:var(--font-titre);font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);font-weight:700;}
.expo-pave-body .txt{font-family:var(--font-texte);font-size:14px;line-height:1.5;color:var(--c-texte-doux);}
.expo-pave-body .btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px;background:var(--c-rouge);color:#fff;
  font-family:var(--font-titre);font-weight:700;font-size:14px;padding:12px 14px;border-radius:var(--r-bouton);}
.expo-pave-body .btn .plus{font-size:20px;line-height:1;font-weight:400;}
.expo-pave:hover .btn{background:var(--c-rouge-h);}

/* BLOC-46 : dans les rails, plus de bouton « Tout voir » ; le titre du module
   est le lien. Les modules du centre gardent leur pilule (maquette). */
.rail-left .more--standalone,.rail-right .more--standalone,
.rail-left .rail-h .pill,.rail-right .rail-h .pill{display:none;}
/* Exception : la disposition « Mise en avant » n'a pas de têtière de rubrique,
   mais une étiquette flottante qui n'est pas un lien. La règle ci-dessus lui
   retirait donc son renvoi vers l'archive sans rien donner en échange : le
   module Masterclass du rail perdait son bouton « Toutes les masterclass ».
   Son pied porte ses deux appels à l'action, ils restent visibles. */
.rail-left .feature-cta .more--standalone,
.rail-right .feature-cta .more--standalone{display:block;}
.sec-head h2 a,.rail-h h4 a{color:inherit;text-decoration:none;}
.sec-head h2 a:hover,.rail-h h4 a:hover{color:var(--c-rouge);}

/* RESP-06 : sur mobile les sous-rubriques ne s'empilent plus en trois rangs
   d'etiquettes ; une seule ligne qui defile au doigt, aimantee, ferree a
   gauche, sans barre de defilement, la derniere etiquette depassant pour
   inviter au geste. Vaut pour la barre des rubriques et celle des videos. */
@media (max-width:767px){
  .subnav-row,.vid-subnav .subnav-row{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:8px;
    overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:10px var(--marge-mobile);scroll-padding-inline:var(--marge-mobile);}
  .subnav-row::-webkit-scrollbar{display:none;}
  .subnav-row a,.vid-subnav .filt{flex:none;white-space:nowrap;scroll-snap-align:start;}
}

/* EXPO-17 : sur la page L'Expo, le bandeau bleu colle au filet gris de la
   barre de sous-rubriques. La disposition contrainte du contenu de page
   posait l'ecart de blocs entre les deux. */
.subnav.alignfull + .expo-page-band{margin-block-start:0;}

/* Recette du 2026-09-29 (U-08) : le hero « A la une » vient de l'extension
   Digital Crafting, dont les etiquettes sont a 11 px. Le plancher de 12 px
   sur mobile s'y applique depuis le theme. */
@media (max-width:767px){
  body .dcsf-hero :is(.dcsf-hero__label,.dcsf-kicker){font-size:12px;}
}
/* M2 (audit du 2026-10-05) : la version 2.2 de l'extension descend sous ce
   plancher (etiquette du hero a 9 px, surtitres, dates, rubriques et
   « Sponsorise par » des cartes de 9 a 11 px), avec des selecteurs plus forts
   que la regle ci-dessus. `:root body` les depasse sans !important. */
@media (max-width:767px){
  :root body .dcsf-featured .dcsf-hero :is(.dcsf-hero__label,.dcsf-kicker),
  :root body .dcsf-featured .dcsf-card :is(.dcsf-kicker,.dcsf-meta,.dcsf-meta__date,.dcsf-meta__cat,.dcsf-meta__sep,.dcsf-card__by,.dcsf-card__by strong){font-size:12px;}
}

/* ============== HABILLAGE — BANDES CONSTANTES (30/09/2026) ==============
   Habillage actif, écran de 1100 px et plus (seuil abaissé de 1280 à 1100 px le 02/10 par François :
   un portable de 13 pouces à 150 % voit 1280 px au plus, moins avec un zoom ou une barre latérale).
   Bandes de l'habillage à peu près CONSTANTES, comme sur un portable (≈ 172 px
   de chaque côté) : c'est le site qui s'élargit avec l'écran (sur un 27 pouces,
   des bandes de 490 px étaient beaucoup trop larges).
     site = écran − 360 px (2 × 172 + barre de défilement), entre 920 et 1600 px
       1100 à 1280 → 920 px (bandes de 82 à 172 px)   1440 → 1080   1536 → 1176   1920 → 1560   ≥ 1960 → 1600
   Colonnes latérales 160 / 220 px, 200 / 300 dès 1920 px.
   Seule la mise en page change (largeur du site, colonnes, en-tête, barre
   épinglée) : les cartes, listes et sliders des blocs gardent leur propre
   affichage.
   Placé en fin de feuille : ces règles complètent celles de l'habillage plus haut. */
@media (min-width:1100px){
  body.has-habillage{
    --largeur-max:clamp(920px, calc(100vw - 360px), 1600px) !important;
    --col-gauche:160px !important;
  }
  body.has-habillage .wp-block-columns.body-cols{gap:28px !important;}
  body.has-habillage .body-cols>.rail-left{flex-basis:160px !important;}
  body.has-habillage .body-cols>.rail-right{flex-basis:220px !important;}
  body.has-habillage .art-grid:not(.sv-grid){grid-template-columns:minmax(0,1fr) 220px !important;gap:28px !important;}
  /* Annonces : trois colonnes sur la liste, deux sur la fiche (.single-grid,
     contenu + colonne de droite), comme dans le thème. */
  body.has-habillage .an-grid:not(.single-grid){grid-template-columns:160px minmax(0,1fr) 220px !important;gap:28px !important;}
  body.has-habillage .an-grid.single-grid{grid-template-columns:minmax(0,1fr) 220px !important;gap:28px !important;}
}

/* Menu au repos, site étroit (920 à 1079 px) : le menu centré en absolu passait
   sur le badge OMNI. Il reprend le flux après le badge, centré dans la place
   restante, écarts resserrés. Au-delà, le centrage d'origine ne gêne rien. */
@media (min-width:1100px) and (max-width:1439.98px){
  body.has-habillage:not(.is-nav-pinned) .main-nav-row .wp-block-navigation{position:static;transform:none;width:auto;margin-inline:auto;}
  body.has-habillage:not(.is-nav-pinned) .main-nav-row .wp-block-navigation,
  body.has-habillage:not(.is-nav-pinned) .main-nav-row .wp-block-navigation__container{gap:20px !important;}
}

/* Site de 920 à 1175 px : en-tête et barre épinglée resserrés. */
@media (min-width:1100px) and (max-width:1535.98px){
  /* En-tête : marges latérales réduites (43 + 20 px → 12 + 8 px de chaque côté)
     pour que burger, Omni/Ortho et navigation — ou, épinglée, marque,
     navigation et actions — occupent toute la largeur du site. */
  body.has-habillage header.wp-block-template-part > .wp-block-group.has-background{padding-left:12px !important;padding-right:12px !important;}
  body.has-habillage header.wp-block-template-part .wrap{padding-left:8px !important;padding-right:8px !important;}

  /* Barre épinglée : compactage maximal sans rien retirer. */
  body.has-habillage.is-nav-pinned .main-nav-row{column-gap:6px;}
  body.has-habillage.is-nav-pinned .nav-pin-brand{gap:8px;}
  body.has-habillage.is-nav-pinned .nav-pin-brand .logo--svg img{height:18px;}
  body.has-habillage.is-nav-pinned .main-nav-row .wp-block-navigation,
  body.has-habillage.is-nav-pinned .main-nav-row .wp-block-navigation__container{gap:6px !important;}
  body.has-habillage.is-nav-pinned .main-nav-row .wp-block-navigation.has-px-14-font-size,
  body.has-habillage.is-nav-pinned .main-nav-row .wp-block-navigation .has-px-14-font-size{font-size:12px !important;}
  body.has-habillage.is-nav-pinned .nav-pin-actions .topbar-actions{gap:6px;}
}

/* Grands écrans : colonnes latérales à leur largeur normale. */
@media (min-width:1920px){
  body.has-habillage{--col-gauche:200px !important;}
  body.has-habillage .wp-block-columns.body-cols{gap:var(--gouttiere) !important;}
  body.has-habillage .body-cols>.rail-left{flex-basis:200px !important;}
  body.has-habillage .body-cols>.rail-right{flex-basis:300px !important;}
  body.has-habillage .art-grid:not(.sv-grid){grid-template-columns:minmax(0,1fr) 300px !important;gap:var(--gouttiere) !important;}
  body.has-habillage .an-grid:not(.single-grid){grid-template-columns:200px minmax(0,1fr) 300px !important;gap:var(--gouttiere) !important;}
  body.has-habillage .an-grid.single-grid{grid-template-columns:minmax(0,1fr) 300px !important;gap:var(--gouttiere) !important;}
}