/* ============================================================
   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);
  --brand-red:#DF2318;      /* identité logo dentaire365 : hors spéc, ne suit NI le topic NI les tokens */
  --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: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: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;
}
.sec-head::after{
  content:"";order:1;flex:1;height:1px;background:var(--c-filet);
}
.sec-head .more{order:2;}

/* §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: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é. */
.sa-related{background:var(--c-trame);border-radius:var(--r-bloc);
  padding:var(--e6);margin-top:var(--e8);}
.sa-related-h{font-family:var(--font-titre);font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);
  font-weight:700;text-transform:none;letter-spacing:0;color:var(--c-encre);margin:0 0 var(--e5);}

/* §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: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;}
/* §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: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);}
.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: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: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: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;}

.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. */
.list-red li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:9px;
  border-radius:var(--r-etiquette);background:var(--c-rub-1);}
.list-red li:nth-child(2)::before{background:var(--c-rub-2);}
.list-red li:nth-child(3)::before{background:var(--c-rub-3);}
.list-red li:nth-child(4)::before{background:var(--c-rub-4);}
.list-red li:nth-child(5)::before{background:var(--c-rub-5);}

.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: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 %. */
.hero-card{display:grid;grid-template-columns:40% 60%;background:var(--c-encre);color:var(--c-papier);
  min-height:320px;border-radius:var(--r-image);overflow:hidden;}
.hero-card .txt{padding:58px 28px 24px;display:flex;flex-direction:column;}
.hero-card .k{color:#fff;opacity:.82;font-size: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:18px;}
.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;}
.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:11px;color:var(--meta);}
.feature-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;}
.more--standalone{margin-top:12px;}
.feature-foot .more--standalone{margin-top:0;}

/* 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;}
.magbox .cover{aspect-ratio:1000/550;position:relative;border-radius:var(--r-image);overflow:hidden;background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, rgba(0,0,0,.06) 10px 20px),
    #5d6883;}
.magbox .cover .no{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:4px 8px;letter-spacing:.04em;}
.magbox .cover .cw{position:absolute;top:12px;right:12px;font-size: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: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;}
.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;}
.rows-2col .row:nth-child(n+3){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;}
.poll .opt{margin-bottom:16px;}
.poll .opt .lab{font-size:13px;font-weight:600;margin-bottom:7px;}
.poll .bar{height:9px;background:#fff;position:relative;}
.poll .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--red);}
.poll .opt{margin-bottom:20px;}
.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;}
.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);}
.cards-ga-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(var(--per-view,3),1fr);gap:22px;}

/* §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;}
.agenda .ty{font-size: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);}
.center > .ad:first-child,
.center > *:first-child .ad{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);}
.ad.banner990{max-width:990px;}
.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;}

/* ===== 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;}
/* CTA sur fond bleu : pill bordé blanc (uniformisé avec les pills « Tout voir »
   rouges des sections claires, variante sombre = bord + texte blancs). */
.videos .sec-head .more .lk2{
  display:inline-block;color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.65);border-radius:13px;padding:4px 12px;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.videos .sec-head .more a.lk2:hover, .videos .sec-head .more a.lk2:focus{background:#fff;color:var(--navy-deep);border-color:#fff;}
.vid-grid{display:grid;grid-template-columns:repeat(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);}
.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;}
.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);}
.vcard .spon{font-size:11px;color:#9aa4b8;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: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:11.5px;color:var(--meta);margin-top:3px;}

/* ===== L'EXPO ===== */
.expo{padding:30px 0 46px;border-top:1px solid var(--line);}
.logo-ramp{display:flex;gap:18px;align-items:center;overflow:hidden;}
.logo-ramp .lg{flex:1;height:64px;background:var(--c-trame);display:flex;align-items:center;justify-content:center;
  color:var(--c-texte-doux);font-size:13px;font-weight:600;border-radius:var(--r-etiquette);}
.logo-ramp .lg img{display:block;width:100%;height:100%;padding:10px;object-fit:contain;}

/* 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;}
.foot-logo b{color:var(--brand-red);}
.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;}
.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 ============== */
.poll-form{display:flex;flex-direction:column;gap:10px;}
.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;}

/* ============== 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. */
.vcard.is-sponsored .img{border-radius:0;}
.vcard.is-sponsored .vb{background:#f5f5f6;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(--ink);}
.vcard.is-sponsored .vb h3 a:hover{color:var(--red);}
.vcard.is-sponsored .vb .k{color:var(--red);}
.vcard.is-sponsored .vb p{color:#3a4254;}
.vcard.is-sponsored .vb .spon,
.vcard.is-sponsored .vb .sponsor-by{color:var(--meta);}

/* ============== 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) */
}

/* Skin = calque fixe plein écran DERRIÈRE le site (z-index 0). L'image est
   dimensionnée pour que son centre vide coïncide EXACTEMENT avec la box du
   site ; image et box sont toutes deux centrées sur l'axe du viewport → les
   ailes tombent pile dans les gouttières. Hors image (très grands écrans) :
   fond navy = couleur de base des ailes. */
.habillage{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;background:#0d2545;
}
/* Centrage symétrique de la créa, MÊME quand elle déborde le viewport (image
   plus large que l'écran) : en inline-block + text-align:center le navigateur
   épingle à gauche au lieu de centrer l'overflow → site visuellement décalé.
   `left:50%` + `translateX(-50%)` centre toujours (overflow réparti des 2 côtés),
   donc le centre vide reste pile sous la box. */
.habillage > *{position:absolute;top:0;left:50%;transform:translateX(-50%);}
.habillage a{pointer-events:auto;display:block;}
/* Skin plein cadre : l'image touche les deux bords du viewport (plus de bandes
   navy sur les côtés). `.habillage` est en overflow:hidden, un débord éventuel
   dû à la scrollbar est donc rogné sans provoquer de scroll horizontal. */
.habillage img{
  display:block;height:auto;max-width:none;
  width:100vw;
}

/* Site BOXÉ : tout le site (wp-site-blocks) est centré à --maxw au-dessus du
   skin ; le bandeau haut le décale vers le bas. Le lien de la pub n'est
   cliquable que dans les gouttières + le bandeau (la box opaque intercepte ses
   propres clics). */
body.has-habillage{
  background:transparent;
  padding-top:var(--habillage-top);
}
.has-habillage > :not(.habillage){
  position:relative;z-index:1;
  max-width:var(--maxw);
  margin-inline:auto;
}
/* Corps central opaque (sinon le skin transparaît DANS la box). Header (blanc)
   et footer (navy) portent déjà leur fond. */
.has-habillage main{background:#fff;}

/* Habillage actif : le site se resserre à 960px pour dégager les ailes du skin
   de part et d'autre. La géométrie de l'habillage se dérive de --maxw — mais
   `--habillage-top` doit suivre lui aussi (top = --maxw × 0.1674, cf. bloc plus
   haut), sinon le décalage figé à 210px laisse un trou : le site démarre sous
   le bandeau du skin rétréci. On le redéfinit ICI pour qu'il se résolve avec le
   --maxw:960 du même élément. */
body.has-habillage{
  --largeur-max:1000px;
  /* Image en pleine largeur → le bandeau haut grandit avec le viewport, pas
     avec --maxw. Décalage = largeur_écran × 0.1402 (= le ratio bandeau/largeur
     d'image mesuré : 0.1674 × 0.8374). Le site démarre pile sous le bandeau,
     quelle que soit la largeur d'écran. */
  --habillage-top:calc(100vw * 0.1402);
}

/* Échelle de largeur de la box selon la place disponible pour les ailes du skin.
   La box suit --maxw (cf. `.has-habillage > :not(.habillage){max-width:var(--maxw)}`),
   donc chaque palier ne change que --maxw. Paliers min-width en ordre croissant :
   le plus large gagne (source postérieur, spécificité égale).
     1280–1439 → 1000px (base ci-dessus)   1680–1919 → 1345px
     1440–1679 → 1110px                     ≥1920     → 1500px */
@media (min-width:1440px){
  body.has-habillage{--largeur-max:1110px;}
}
@media (min-width:1680px){
  body.has-habillage{--largeur-max:1345px;}
  .has-habillage .wp-block-columns.body-cols{max-width:100%;}
}
@media (min-width:1920px){
  body.has-habillage{--largeur-max:1500px;}
}

/* Sous 1280px : plus de place pour les ailes → skin masqué, site dé-boxé et
   --maxw rendu à sa valeur pleine largeur. */
@media (max-width:1279px){
  .habillage{display:none;}
  body.has-habillage{padding-top:0;--largeur-max:var(--wp--custom--ds--largeur-max);}
  .has-habillage > :not(.habillage){max-width:none;margin-inline:0;}
  .has-habillage main{background:transparent;}
}

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

/* Sous 1280px : les grilles à 3 colonnes passent à 2. Placé AVANT les blocs
   ≤1024px qui suivent : à ≤1024 les deux media matchent, le bloc 1024 gagne
   (même spécificité, source postérieur) et impose 1 colonne / carrousel. Cette
   règle ne pilote donc que la bande 1025–1279px. */
@media (max-width:1319px){
  .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;
  }
  .vid-grid>.vcard,.ann-grid>.it{flex:0 0 100%;scroll-snap-align:start;}

  /* Expo → carousel 2×2 (2 lignes, défilement horizontal). */
  .logo-ramp{
    display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);
    grid-auto-columns:calc(50% - 8px);gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .logo-ramp>.lg{scroll-snap-align:start;}

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

  /* Hero « À la une » : image masquée en mobile, titre + contenu pleine largeur. */
  .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,.cards4,.cards-ga,.rows-2col{grid-template-columns:1fr;}

  /* list-rows : rangée horizontale → carte verticale (image dessus) comme grid-4. */
  .list-rows .row{flex-direction:column;gap:11px;}
  .list-rows .thumb{width:100%;aspect-ratio:1000/550;}
}

/* ============== 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);}
.art-grid>.center{min-width:0;display:flex;flex-direction:column;gap:30px;}
.art-grid>.rail-right{min-width:0;display:flex;flex-direction:column;gap:26px;}
/* 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);}
.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);}
  .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>.rail-right{grid-column:1;grid-row:2;}

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

/* 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). */
.art-head-txt .art-chapo{font-family:var(--font-texte);font-size:var(--fs-chapo);
  line-height:var(--lh-chapo);color:var(--c-texte);margin:var(--e3) 0 0;}
.art-head-txt .art-chapo p{margin:0;}
.art-head-txt .cat-tag a,.art-head-txt .tag{display:inline-block;background:var(--navy);color:#fff;
  font-size: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. */
.art-byline .au{font-family:var(--font-texte);font-size:var(--fs-folio);font-weight:600;color:var(--c-texte-doux);}
.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 ";}
.art-byline .save{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:20px;
  padding:7px 14px;font-size: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);}
/* 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%);}
/* §6.5 — le paywall ne doit pas surcharger : liseré fin, fond tramé, teintes
   des tokens. Le bandeau de 3px et le fond bleuté « faisaient IA ». */
.paywall-box{position:relative;background:var(--c-trame);border:1px solid var(--c-filet);
  border-top:3px solid var(--red);border-radius:4px;padding:34px 28px 30px;margin:8px 0 28px;text-align:center;}
.paywall-box .pw-lock{display:inline-flex;align-items:center;gap:7px;color:var(--c-rouge);font-family:var(--font-titre);font-size:var(--fs-surtitre);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;}
.paywall-box .pw-lock svg{width:13px;height:13px;}
.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);}
.paywall-box .pw-sub{font-family:var(--font-texte);font-size:var(--fs-chapo);line-height:var(--lh-chapo);
  color:var(--c-texte);max-width:30em;margin:0 auto var(--e6);}
.paywall-box .pw-card{background:var(--c-papier);border:1px solid var(--c-filet);border-radius:var(--r-bloc);padding:var(--e5) var(--e6);
  max-width:500px;margin:0 auto 14px;text-align:left;}
@media(max-width:576px){.paywall-box .pw-card{max-width:100%;}}
.paywall-box .pw-card h3{font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy);margin:0 0 8px;}
.paywall-box .pw-card p{font-size:14px;color:var(--ink);margin:0 0 16px;line-height:1.4;}
/* §5.4 — le CTA d'abonnement du paywall suit la règle du jaune. */
.paywall-box .pw-btn{display:flex;align-items:center;justify-content:center;width:100%;
  box-sizing:border-box;min-height:var(--h-bouton);padding:0 var(--e5);text-align:center;
  border-radius:var(--r-bouton);font-family:var(--font-titre);font-size:14px;font-weight:600;
  letter-spacing:.01em;text-decoration:none;
  transition:background var(--wp--custom--transition--fast);}
.paywall-box .pw-btn-primary{background:var(--c-jaune);color:var(--c-encre);border:1px solid var(--c-jaune);}
.paywall-box .pw-btn-primary:hover{background:var(--c-jaune-h);border-color:var(--c-jaune-h);color:var(--c-encre);}
.paywall-box .pw-btn-outline{background:var(--c-papier);color:var(--c-encre);border:1px solid var(--c-filet-fort);}
.paywall-box .pw-btn-outline:hover{background:var(--c-trame);color:var(--c-encre);}
.paywall-box .pw-btn:focus-visible{outline:2px solid var(--c-encre);outline-offset:2px;}
.paywall-box .pw-foot{font-size:13px;color:var(--meta);margin:18px 0 0;}
.paywall-box .pw-foot a{color:var(--red);font-weight:800;text-decoration:none;}
.paywall-box .pw-foot a:hover{text-decoration:underline;}

/* visuel d'ouverture */
.art-lead-fig{margin:0;}
.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;}
.art-lead-fig figcaption,.prose figcaption{display:flex;justify-content:space-between;gap:14px;font-size: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;}

/* 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:counter(s)".";position:absolute;left:0;top:8px;color:var(--red);font-weight:800;}
.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;}
.prose h2{font-family:var(--sans);font-size:20px;font-weight:800;letter-spacing:.01em;color:var(--ink);
  margin:34px 0 0;padding-top:6px;scroll-margin-top:20px;}
.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 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);}

/* poursuite de lecture */
.discover{border-top:1px solid var(--line);padding-top:34px;margin-top:40px;}

/* ===== RESPONSIVE ARTICLE (≤ tablette portrait) ===== */
@media (max-width:1024px){
  .art-grid{display:grid;grid-template-columns:1fr;gap:30px;padding-block:20px 8px;}
  .art-grid>.center{order:1;}
  .art-grid>.rail-right{order:2;}
  .art-head-row{grid-template-columns:1fr;}
  .prose figure.half{width:100%;}
}

/* ============== 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: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(--sans);font-size:24px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink);margin:2px 0 16px;display:flex;align-items:center;gap:12px;}
.an-title .bar{width:26px;height:5px;background:var(--red);flex: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: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;}
.fcard{border:1px solid var(--c-filet-fort);background:var(--c-papier);display:flex;flex-direction:column;
  border-top-left-radius:var(--r-image);border-top-right-radius:var(--r-image);overflow:hidden;}
.fcard .fmedia{position:relative;}
.fcard .fmedia .ph,.fcard .fmedia .img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}
.fcard .fmedia a{display:block;}
.fcard .ribbon{position:absolute;top:11px;left:11px;z-index:2;background:var(--red);color:#fff;
  font-size: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;}
.fcard 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: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:12.5px;font-weight:700;color:var(--ink);margin-top:auto;}
.fcard .floc svg{width:14px;height:14px;color:var(--red);flex:none;}
.fcard .fdate{font-size:11.5px;color:var(--meta);margin-top:5px;}

/* 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;}
.annonce-row .logo{width:104px;height:104px;flex:none;border-radius:var(--r-image);overflow:hidden;}
.annonce-row a > img,.annonce-row .logo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-image);display:block;}
.annonce-row .arow-body{flex:1;min-width:0;}
.annonce-row .cat{font-size: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;}
.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: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);}

/* 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;}
.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{border-color:var(--red);box-shadow:0 0 0 3px rgba(223,35,24,.10);}

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

/* 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);}
.an-recap dd{margin:0;font-family:var(--serif);font-size:14px;color:#3a4254;}
.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) */
.crumb-wrap{max-width:var(--largeur-max);margin:0 auto;padding:var(--e4) 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: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);}
.advertiser .contact-reveal{width:100%;margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.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);}

/* corps */
.sa-body{font-family:var(--serif);font-size:15.5px;line-height:1.62;color:#222a39;margin-top:26px;}
.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). */
.sa-gallery{margin:26px auto 30px;width:50%;}
.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:16/9;}
.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);}

/* infos complémentaires */
/* §6.9 — intitulés de section en minuscules, filet gris léger : les capitales
   et le trait épais écrasaient la fiche. */
.sa-section-h{font-family:var(--font-titre);font-size:var(--fs-titre-m);line-height:var(--lh-titre-m);
  font-weight:700;text-transform:none;letter-spacing:0;color:var(--c-encre);
  margin:var(--e8) 0 var(--e4);padding-bottom:var(--e2);border-bottom:1px solid var(--c-filet);}
.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{font-size:12.5px;font-weight:600;color:var(--navy);background:#eef0f3;border-radius:16px;padding:7px 14px;}

/* annonces liées */
.sa-related{margin-top:44px;border-top:1px solid var(--line);padding-top:32px;}

@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;}
  .advertiser{position:static;}
  .sa-gallery{width:100%;}
  .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;}
.hv-slide{display:none;grid-template-columns:.82fr 1fr;gap:44px;align-items:start;padding:40px 0 30px;}
.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;}
.hv-dots{display:flex;gap:7px;justify-content:flex-end;margin-top:16px;}
.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) --- */
.subnav.vid-subnav{position:sticky;top:0;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 20px;}
  .hv-title{font-size:26px;}
  .hv-dots{justify-content:center;}
}

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

/* §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;}
.sv-lock-card{background: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:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red);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 .btn-red{display:block;margin:0 0 16px;background:var(--red);color:#fff;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 .btn-red:hover{background:var(--red-soft);}
.sv-lock-card .signin{font-size:12.5px;color:var(--meta);}
.sv-lock-card .signin .signin-link{background:none;border:0;padding:0;cursor:pointer;color:var(--red);font-weight:800;font-size:inherit;}
.sv-lock-card .signin .signin-link:hover{text-decoration:underline;}

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

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

/* ---------- 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;}
.hero-banner h1{font-family:var(--sans);font-weight:800;font-size:52px;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;}
}
/* 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;}
.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;}
.faq-more a{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. */
.wp-block-columns.promo-duo{display:grid;grid-template-columns:minmax(0,1fr) 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;}

/* ---------- avantages abonnés ---------- */
.avantages{padding:20px 0 66px;border-top:1px solid var(--line);}
/* 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-page-band .band-title{font-family:var(--serif);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;}
.exp-archive .exp-body{padding:26px 0 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. */
.exp-hero-title{font-family:var(--font-titre);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 */
.exp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.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;}
.exp-tags a{font-size:11px;font-weight:600;color:var(--navy);background:#eef0f3;border-radius:14px;padding:5px 11px;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 */
.exp-logos{display:grid;grid-template-columns:repeat(9,1fr);gap:14px;margin-bottom:30px;}
.exp-logo{display:block;border:1px solid var(--c-filet-fort);border-radius:var(--r-image);padding:var(--e3);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);}
}

/* ============================================================
   PAGE MASTERCLASS (block parresia/masterclass-list)
   Maquette « dentaire365 - Masterclass.html ». Pleine largeur, sans rails.
   ============================================================ */
.ad.banner990{height:118px;}
.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;}

/* --- chapitres d'une masterclass (sous l'article parent) --- */
.parresia-masterclass-children{margin:44px 0 0;}
.mcc-list{display:flex;flex-direction:column;gap:30px;}
.mcc-row{display:grid;grid-template-columns:296px minmax(0,1fr);gap:32px;align-items:start;}
.mcc-thumb{display:block;overflow:hidden;background:var(--line-2, #e4e6eb);}
.mcc-thumb img{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;}
.mcc-title{font-family:var(--sans);font-size:19px;font-weight:800;line-height:1.3;margin:0 0 10px;}
.mcc-title a{color:var(--navy, #182747);text-decoration:underline;text-underline-offset:3px;}
.mcc-title a:hover{color:var(--red, #df2218);}
.mcc-excerpt{font-family:var(--serif);font-size:15.5px;line-height:1.5;color:var(--ink, #1b2540);margin:0 0 12px;}
.mcc-serie{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--meta, #8b909b);margin:0;}

@media (max-width:780px){
  .mcc-row{grid-template-columns:1fr;gap:14px;}
  .mcc-thumb{max-width:100%;}
}
.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: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-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: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-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-cover{display:block;width:100%;aspect-ratio:210/297;border-radius:var(--r-image);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;}
}