/* =========================================================================
   Media 7 — feuille de style unique.
   Toutes les valeurs viennent de variables : le personnalisateur les
   surcharge sans qu'aucune ligne de ce fichier ne change.
   ========================================================================= */

:root{
  --m7-ink:#0B1F3B;
  --m7-ink-2:#12294D;
  --m7-blue:#1E4D8C;
  --m7-blue-light:#4A90D9;
  --m7-gold:#B8862A;
  --m7-gold-soft:#D9A83C;
  --m7-paper:#F6F8FC;
  --m7-paper-2:#EDF1F9;
  --m7-text:#16233B;
  --m7-text-soft:#4A5872;
  --m7-link:#1E4D8C;
  --m7-white:#fff;
  --m7-header-bg:#0B1F3B;
  --m7-footer-bg:#0B1F3B;
  --m7-featured-bg:#12294D;
  --m7-category:#1E4D8C;
  --m7-font-display:Fraunces,Georgia,serif;
  --m7-font-body:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --m7-size-base:17px;
  --m7-size-h1:2.6rem;
  --m7-size-h2:2.1rem;
  --m7-weight-heading:600;
  --m7-line-height:1.6;
  --m7-width-site:1180px;
  --m7-width-content:720px;
  --m7-space-section:88px;
  --m7-radius:14px;
  --m7-radius-sm:8px;
  --m7-radius-button:100px;
  --m7-shadow-sm:0 2px 10px rgba(11,31,59,.08);
  --m7-shadow-md:0 10px 30px rgba(11,31,59,.14);
  --m7-border:rgba(11,31,59,.12);
}

/* --- Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--m7-paper);
  color:var(--m7-text);
  font-family:var(--m7-font-body);
  font-size:var(--m7-size-base);
  line-height:var(--m7-line-height);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--m7-link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{font-family:var(--m7-font-display);font-weight:var(--m7-weight-heading);color:var(--m7-ink);line-height:1.2;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--m7-gold);outline-offset:3px}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--m7-gold);color:var(--m7-ink);padding:12px 20px;font-weight:700;
}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;clip:auto}

.wrap{max-width:var(--m7-width-site);margin:0 auto;padding:0 24px}
.section{padding:var(--m7-space-section) 0}
.section-alt{background:var(--m7-paper-2)}
.section-head{max-width:640px;margin-bottom:38px}
.section-title{font-size:var(--m7-size-h2);margin-top:10px}
.section-head p{margin-top:14px;color:var(--m7-text-soft)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--m7-font-body);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--m7-gold);
}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--m7-gold)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:var(--m7-btn-pad,14px 26px);font-family:var(--m7-font-body);font-size:var(--m7-btn-size,.95rem);font-weight:var(--m7-btn-weight,600);line-height:1;border:var(--m7-btn-border,0 solid transparent);border-radius:var(--m7-radius-button);text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--m7-btn-bg,var(--m7-gold));color:var(--m7-btn-text,var(--m7-ink));box-shadow:var(--m7-btn-shadow,none)}
.btn-primary:hover{background:var(--m7-btn-bg-hover,var(--m7-gold-dark));color:var(--m7-btn-text-hover,var(--m7-ink));transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--m7-white);border:1.5px solid rgba(255,255,255,.4)}

/* --- En-tête ------------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:500;
  background:var(--m7-header-bg);
  border-bottom:1px solid rgba(255,255,255,.08);
;border-bottom:1px solid var(--m7-header-border,rgba(255,255,255,.08))}
.nav-inner{
  display:flex;align-items:center;gap:14px;
  max-width:var(--m7-width-site);margin:0 auto;padding:0 var(--m7-header-pad,24px);min-height:var(--m7-header-h,68px);
}
.brand{flex-shrink:0}
.brand-link,.brand a{display:flex;align-items:center;gap:10px;color:var(--m7-white);text-decoration:none}
.brand-text{font-family:var(--m7-font-display);font-size:var(--m7-brand-size,1.3rem);font-weight:600;line-height:1.1}
.brand-text .sub{
  display:block;font-family:var(--m7-font-body);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--m7-blue-light);font-weight:600;
}
.custom-logo{max-height:52px;width:auto}
.brand-link .mark{width:var(--m7-logo-h,40px);height:var(--m7-logo-h,40px)}
.mark circle{fill:var(--m7-gold-soft)}
.mark line{stroke:var(--m7-gold-soft);stroke-width:2.4;stroke-linecap:round}

.primary-nav{flex:1;display:flex;justify-content:flex-end}
.nav-list{display:flex;align-items:center;flex-wrap:wrap;justify-content:var(--m7-menu-align,flex-end);gap:var(--m7-menu-gap,2px);row-gap:6px}
.nav-list a{display:inline-block;padding:9px 14px;border-radius:var(--m7-radius-button);
  white-space:nowrap;text-decoration:none;
  transition:color .2s ease,background .2s ease;font-size:var(--m7-menu-size,.95rem);font-weight:var(--m7-menu-weight,500);color:var(--m7-menu-color,#D5DEEC);text-transform:var(--m7-menu-transform,none)}
.nav-list a:hover{color:var(--m7-menu-hover,var(--m7-white));background:rgba(255,255,255,.08);text-decoration:none}
.nav-list .current-menu-item>a,
.nav-list .current_page_item>a,
.nav-list .current-menu-ancestor>a{background:var(--m7-gold);color:var(--m7-ink);font-weight:600}

/* --- Sous-menus sur ordinateur -------------------------------------------
   Un menu déroulant classique : panneau blanc posé sous l'entrée, angle
   fléché qui le relie au parent, apparition en fondu. Le passage de
   l'entrée au panneau se fait sans zone morte, sinon le menu se referme
   dès que la souris quitte le libellé.
   ----------------------------------------------------------------------- */
.nav-list .menu-item-has-children{position:relative}

/*
 * Le bouton d'ouverture des sous-menus n'avait aucun style hors mobile :
 * le navigateur l'affichait donc avec son fond blanc par défaut, à côté
 * des entrées « Audio » et « Plus ». Il devient ici un simple signe, de la
 * couleur du texte, sans fond ni bordure — et il disparaît complètement
 * sur ordinateur, où le chevron du libellé suffit.
 */
.nav-list .sub-toggle{
  appearance:none;-webkit-appearance:none;
  background:none;border:0;box-shadow:none;padding:0;margin:0;
  color:inherit;font:inherit;line-height:1;cursor:pointer;
}
.nav-list .sub-toggle span{display:block;font-size:.8em;opacity:.7;transition:transform .2s ease}
.nav-list .sub-toggle:hover span,
.nav-list .sub-toggle:focus-visible span{opacity:1}

/* Sur ordinateur, le chevron après le libellé remplace ce bouton. */
@media (min-width:1081px){
  .nav-list .sub-toggle{display:none}
}

/* Chevron discret après le libellé, tourné quand le panneau est ouvert. */
.nav-list .menu-item-has-children > a::after{
  content:"";display:inline-block;margin-left:7px;vertical-align:1px;
  width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);opacity:.65;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-list .menu-item-has-children:hover > a::after,
.nav-list .menu-item-has-children.is-open > a::after{transform:rotate(-135deg) translateY(-3px);opacity:1}

.nav-list .sub-menu{
  position:absolute;top:calc(100% + 12px);left:50%;
  min-width:240px;max-width:320px;
  flex-direction:column;gap:1px;
  background:var(--m7-white);
  border:1px solid rgba(11,31,59,.08);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(11,31,59,.20),0 2px 6px rgba(11,31,59,.08);
  padding:8px;z-index:600;
  display:flex;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}

/* Le petit angle qui rattache le panneau à son entrée. */
.nav-list .sub-menu::before{
  content:"";position:absolute;top:-6px;left:50%;
  width:12px;height:12px;margin-left:-6px;
  background:var(--m7-white);
  border-left:1px solid rgba(11,31,59,.08);border-top:1px solid rgba(11,31,59,.08);
  transform:rotate(45deg);border-radius:2px;
}

/* Zone de passage invisible : la souris peut descendre sans rien perdre. */
.nav-list .sub-menu::after{
  content:"";position:absolute;top:-14px;left:0;right:0;height:14px;
}

.nav-list .menu-item-has-children:hover > .sub-menu,
.nav-list .menu-item-has-children.is-open > .sub-menu,
.nav-list .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.nav-list .sub-menu a{
  display:block;text-align:left;white-space:normal;
  padding:10px 14px;border-radius:9px;
  color:var(--m7-ink);font-size:.93rem;font-weight:500;line-height:1.35;
}
.nav-list .sub-menu a:hover,
.nav-list .sub-menu a:focus-visible{
  background:var(--m7-paper-2);color:var(--m7-blue);
}
.nav-list .sub-menu .current-menu-item > a,
.nav-list .sub-menu .current_page_item > a{
  background:var(--m7-paper-2);color:var(--m7-blue);font-weight:600;
}
/* Filet fin entre les entrées, sauf la dernière. */
.nav-list .sub-menu li + li > a{box-shadow:0 -1px 0 rgba(11,31,59,.06)}

@media (prefers-reduced-motion:reduce){
  .nav-list .sub-menu{transition:none}
}

.nav-utils{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-btn{
  width:40px;height:40px;border-radius:var(--m7-radius-button);
  border:1px solid rgba(255,255,255,.25);background:none;color:var(--m7-white);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.icon-btn:hover{background:rgba(255,255,255,.12);border-color:var(--m7-gold-soft)}
.icon-btn svg,.search-icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.btn-donate{
  display:inline-flex;align-items:center;gap:7px;padding:10px 18px;
  border-radius:var(--m7-radius-button);background:var(--m7-gold);color:var(--m7-ink);
  font-weight:700;font-size:.83rem;white-space:nowrap;text-decoration:none;
}
.btn-donate:hover{text-decoration:none;transform:translateY(-2px)}
.nav-toggle{
  display:none;width:42px;height:42px;border-radius:var(--m7-radius-sm);
  border:1px solid rgba(255,255,255,.25);background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-shrink:0;
}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{
  content:"";display:block;width:20px;height:2px;background:var(--m7-white);position:relative;
}
.nav-toggle .bars::before{position:absolute;top:-6px}
.nav-toggle .bars::after{position:absolute;top:6px}

/* --- Bandeau défilant --------------------------------------------------- */
/* Le bandeau masque tout ce qui dépasse : jamais de barre de défilement,
   jamais de zone que le visiteur devrait faire glisser. */
.ticker-bar{
  background:var(--m7-ticker-bg,var(--m7-featured-bg));
  min-height:var(--m7-ticker-h,34px);
  color:var(--m7-ticker-color,#BECADA);
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:stretch;
  overflow:hidden;
  position:relative;
  /* Contient l'animation : la piste ne peut pas élargir la page. */
  contain:content;
}
/* Fenêtre de défilement : c'est elle qui masque la piste, pour que
   l'étiquette reste fixe à côté sans défiler avec les titres. */
.ticker-viewport{flex:1 1 auto;min-width:0;overflow:hidden}
.ticker-track{
  display:flex;
  width:max-content;
  will-change:transform;
  /* Animation de repli, sans JavaScript : deux copies écrites par PHP, un
     déplacement de 50 % correspond donc exactement à une copie. */
  animation:m7-ticker 80s linear infinite;
}
/* Dès que le script prend la main, il pilote l'animation en pixels mesurés :
   la règle CSS est retirée pour ne pas se superposer à la sienne. */
.ticker-track.is-scripted{animation:none}
.ticker-group a::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--m7-ticker-dot,var(--m7-gold));margin-right:10px;vertical-align:middle}
.ticker-group{
  display:flex;align-items:center;gap:var(--m7-ticker-gap,44px);
  font-size:var(--m7-ticker-size,.82rem);
  padding:9px 44px 9px 0;
  flex:0 0 auto;white-space:nowrap;
}
.ticker-bar:hover .ticker-track,
.ticker-bar:focus-within .ticker-track{animation-play-state:paused}
.ticker-group a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.82rem;color:rgba(255,255,255,.8);text-decoration:none;
}
.ticker-group a::before{content:"●";color:var(--m7-gold-soft);font-size:.5rem}
/* Le déplacement vaut exactement une copie, donc le raccord est invisible.
   Aucune variable CSS ici : une variable écrite par le script après le
   démarrage de l'animation n'est pas réévaluée par le navigateur, ce qui
   laissait le bandeau immobile sur les écrans larges. */
@keyframes m7-ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Animations réduites : le mouvement s'arrête, mais le bandeau reste un
   bandeau — surtout pas une zone à faire glisser. Seule la première copie
   est conservée, le reste est masqué. */
@media (prefers-reduced-motion:reduce){
  .ticker-bar[data-motion="auto"] .ticker-track{animation:none;transform:none}
  .ticker-bar[data-motion="auto"] .ticker-group + .ticker-group{display:none}
  .ticker-bar[data-motion="auto"] .ticker-group{overflow:hidden}
  /* Mouvement voulu par le site : la règle générale plus bas ramène toutes
     les animations à une seule itération. Elle immobilisait le bandeau sur
     les ordinateurs réglés en « réduire les animations », alors qu'il
     défilait sur téléphone. */
  .ticker-bar[data-motion="always"] .ticker-track{
    animation-duration:80s!important;
    animation-iteration-count:infinite!important;
  }
  .ticker-bar[data-motion="always"] .ticker-track.is-scripted{animation:none!important}
}

/* --- Diaporama ---------------------------------------------------------- */
.hero{position:relative;min-height:min(74vh,620px);display:flex;align-items:flex-end;overflow:hidden}
.hero-slides{position:absolute;inset:0;z-index:0;background:var(--m7-ink)}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.hero-slide.is-active{opacity:1}
.hero-slides::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,59,.35) 0%,rgba(11,31,59,.88) 100%)}
.hero-content{position:relative;z-index:2;max-width:var(--m7-width-site);margin:0 auto;padding:110px 24px 70px;width:100%}
.hero-title{font-size:var(--m7-size-h1);color:var(--m7-white);margin-top:16px;max-width:16ch;line-height:1.15;min-height:calc(1.15em * 2)}
.hero-title a{color:inherit;text-decoration:none}
.hero-title a:hover{color:var(--m7-gold-soft)}
.hero-desc{margin-top:18px;color:rgba(255,255,255,.82);max-width:56ch;line-height:1.55;min-height:calc(1.55em * 2)}
.hero-actions{margin-top:26px}
.hero .eyebrow{color:var(--m7-gold-soft)}
.hero .eyebrow::before{background:var(--m7-gold-soft)}
.hero-dots{position:absolute;bottom:26px;right:24px;z-index:3;display:flex;gap:8px}
.hero-dots button{
  width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(255,255,255,.4);transition:transform .2s ease,background .2s ease;
}
.hero-dots button.is-active{background:var(--m7-gold-soft);transform:scale(1.35)}

/* --- Grilles et cartes -------------------------------------------------- */
.grid{display:grid;gap:var(--m7-grid-gap,26px)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.head-row .section-head{margin-bottom:0}
.link-more{color:var(--m7-blue);font-weight:700;font-size:.9rem;border-bottom:2px solid var(--m7-gold);padding-bottom:2px;white-space:nowrap;text-decoration:none}

.card{
  background:var(--m7-white);border:1px solid rgba(11,31,59,.07);
  border-radius:var(--m7-radius);box-shadow:var(--m7-shadow-sm);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--m7-shadow-md)}
.card-link{display:block;color:inherit;text-decoration:none}
.card-link:hover{text-decoration:none}
.article-img img{width:100%;height:200px;object-fit:cover}
.article-body{padding:20px 24px 26px}
.article-title{font-size:1.12rem;line-height:1.3;margin-top:10px}
.card-link:hover .article-title{color:var(--m7-blue)}
.article-excerpt{margin-top:10px;font-size:.92rem;color:var(--m7-text-soft)}

.kicker{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.kicker .cat{color:var(--m7-category);text-decoration:none}
.kicker .dot{color:rgba(11,31,59,.28)}
.kicker .time{color:var(--m7-text-soft)}

/* --- Une + les plus lus ------------------------------------------------- */
.front-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:30px;align-items:start}
.lead-article{background:none;border:none;box-shadow:none}
.lead-media img{width:100%;height:340px;object-fit:cover;border-radius:var(--m7-radius)}
.lead-body{padding-top:20px}
.lead-title{font-size:2rem;line-height:1.15;margin-top:12px}
.lead-article:hover .lead-title{color:var(--m7-blue)}
.lead-body p{margin-top:14px;color:var(--m7-text-soft);max-width:58ch}
.read-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;color:var(--m7-ink);font-size:.95rem}
.read-link::after{content:"→";transition:transform .2s ease}
.lead-article:hover .read-link::after{transform:translateX(5px)}
.front-cards{margin-top:34px}
.front-give{margin-top:34px}

.most-read{background:var(--m7-white);border:1px solid rgba(11,31,59,.07);border-radius:var(--m7-radius);padding:26px;box-shadow:var(--m7-shadow-sm)}
.most-read-title{font-family:var(--m7-font-body);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--m7-text-soft);font-weight:700}
.mr-item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--m7-paper-2)}
.mr-item:last-child{border-bottom:none;padding-bottom:0}
.mr-num{font-family:var(--m7-font-display);font-size:1.5rem;line-height:1;color:var(--m7-gold);font-weight:700;width:30px;flex-shrink:0}
.mr-body a{font-family:var(--m7-font-display);font-size:1rem;line-height:1.3;color:var(--m7-ink);font-weight:600;text-decoration:none;display:block}
.mr-body a:hover{color:var(--m7-blue)}
.mr-body .time{font-size:.78rem;color:var(--m7-text-soft);margin-top:5px;display:block}

/* --- Filtres de rubrique ------------------------------------------------ */
.cat-filter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.cat-btn{
  padding:9px 18px;border-radius:var(--m7-radius-button);
  border:1.5px solid var(--m7-border);background:var(--m7-white);color:var(--m7-text);
  font-size:.87rem;font-weight:600;text-decoration:none;transition:all .2s ease;
}
.cat-btn:hover{border-color:var(--m7-gold);text-decoration:none}
.cat-btn.is-active{background:var(--m7-ink);color:var(--m7-white);border-color:var(--m7-ink)}

/* --- Appel au don ------------------------------------------------------- */
.give-band{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:var(--m7-white);border:1px solid rgba(184,134,42,.45);
  border-left:5px solid var(--m7-gold);border-radius:var(--m7-radius);
  padding:26px 30px;box-shadow:var(--m7-shadow-sm);
}
.give-band .gb-text{flex:1;min-width:260px}
.give-band .gb-title{font-size:1.15rem;line-height:1.3}
.give-band p{margin-top:8px;color:var(--m7-text-soft);font-size:.94rem;max-width:62ch}
.give-band.dark{background:var(--m7-ink);border-color:rgba(255,255,255,.1);border-left-color:var(--m7-gold-soft)}
.give-band.dark .gb-title{color:var(--m7-white)}
.give-band.dark p{color:rgba(255,255,255,.72)}

/* --- Article ------------------------------------------------------------ */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--m7-gold);z-index:800;transition:width .1s linear}
.article-wrap{max-width:var(--m7-width-content);margin:0 auto}
.article-back{display:inline-flex;align-items:center;gap:8px;color:var(--m7-blue);font-weight:600;font-size:.9rem;margin-bottom:26px;text-decoration:none}
.article-head{text-align:center}
.article-title,.page-title{font-size:var(--m7-size-h1);line-height:1.12;margin-top:16px;letter-spacing:-.015em}
.article-standfirst{font-family:var(--m7-font-display);font-size:1.15rem;line-height:1.65;color:var(--m7-text-soft);margin-top:20px}
.article-byline{margin-top:22px;padding-top:18px;border-top:1px solid var(--m7-paper-2);font-size:.86rem;color:var(--m7-text-soft);display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.article-hero{margin:34px 0}
.article-hero img{width:100%;max-height:460px;object-fit:cover;border-radius:var(--m7-radius)}
.article-hero figcaption{margin-top:10px;font-size:.84rem;color:var(--m7-text-soft);text-align:center}

.entry-content p{margin-top:22px;font-size:1.07rem;line-height:1.8}
.entry-content p:first-child{margin-top:0}
.entry-content h2{margin-top:44px;font-size:1.6rem}
.entry-content h3{margin-top:38px;font-size:1.35rem}
.entry-content ul,.entry-content ol{margin-top:22px;padding-left:1.3em}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content li{margin-top:8px}
.entry-content img,.entry-content figure{margin:34px 0;border-radius:var(--m7-radius)}
.entry-content blockquote{
  margin:38px 0;padding:4px 0 4px 26px;border-left:4px solid var(--m7-gold);
  font-family:var(--m7-font-display);font-size:1.35rem;line-height:1.45;color:var(--m7-ink);
}
.entry-content blockquote p{font-size:inherit;line-height:inherit}
.entry-content a{text-decoration:underline}
.entry-content table{width:100%;border-collapse:collapse;margin-top:26px}
.entry-content th,.entry-content td{border:1px solid var(--m7-border);padding:10px 14px;text-align:left}

.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.tag-list a{font-size:.8rem;padding:6px 14px;border-radius:var(--m7-radius-button);background:var(--m7-paper-2);color:var(--m7-text-soft);text-decoration:none}

.share-row{margin-top:40px;padding-top:24px;border-top:1px solid var(--m7-paper-2);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.share-label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--m7-text-soft)}
.share-btn{
  width:40px;height:40px;border-radius:var(--m7-radius-button);
  border:1.5px solid var(--m7-border);background:var(--m7-white);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:1rem;
  transition:border-color .2s ease,transform .15s ease;
}
.share-btn:hover{border-color:var(--m7-gold);transform:translateY(-2px)}
.next-wrap{margin-top:44px}
.next-title{margin-bottom:22px}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* --- Recherche ---------------------------------------------------------- */
.search-overlay{position:fixed;inset:0;z-index:900;background:rgba(11,31,59,.75);padding:0 20px}
.search-overlay[hidden]{display:none}
.search-panel{max-width:700px;margin:12vh auto 0;background:var(--m7-white);border-radius:var(--m7-radius);box-shadow:var(--m7-shadow-md);overflow:hidden}
.search-head{display:flex;gap:10px;align-items:center;padding:16px}
.search-head .search-icon{stroke:var(--m7-text-soft);flex-shrink:0}
.search-head .search-form{flex:1;display:flex;gap:10px}
.search-field{
  flex:1;border:none;outline:none;background:none;
  font-family:var(--m7-font-body);font-size:1.02rem;color:var(--m7-text);padding:8px 4px;
}
.search-close{border:none;background:var(--m7-paper-2);color:var(--m7-text-soft);width:34px;height:34px;border-radius:var(--m7-radius-button);cursor:pointer}
.search-foot{padding:12px 18px;border-top:1px solid var(--m7-paper-2);font-size:.8rem;color:var(--m7-text-soft)}

/* --- Pied de page ------------------------------------------------------- */
.site-footer{background:var(--m7-footer-bg);color:rgba(255,255,255,.72);padding:64px 0 30px;color:var(--m7-footer-text,#B7C2D4);padding-top:var(--m7-footer-pad,64px)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(calc(var(--m7-footer-cols,3) - 1),1fr);gap:40px}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:var(--m7-font-display);font-size:1.2rem;color:var(--m7-white);font-weight:600}
.site-footer .desc{margin-top:14px;font-size:.92rem;max-width:38ch}
.footer-title{font-family:var(--m7-font-body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--m7-white);font-weight:700;margin-bottom:16px}
.footer-list li,.legal-list li{margin-bottom:10px}
.site-footer a{color:var(--m7-footer-link,var(--m7-gold-soft));font-size:.92rem;text-decoration:none}
.site-footer a:hover{color:var(--m7-gold-soft);text-decoration:none}
.footer-bottom{
  margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;
}
.legal-list{display:flex;gap:18px;flex-wrap:wrap}
.legal-list li{margin-bottom:0}

/* --- Divers ------------------------------------------------------------- */
.empty-note{background:var(--m7-paper-2);border-radius:var(--m7-radius);padding:28px;text-align:center;color:var(--m7-text-soft)}
.archive-desc{margin-top:14px;color:var(--m7-text-soft)}
.pagination{margin-top:44px;display:flex;justify-content:center}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;
  border-radius:var(--m7-radius-button);border:1.5px solid var(--m7-border);
  background:var(--m7-white);color:var(--m7-text);font-weight:600;text-decoration:none;
}
.pagination .page-numbers.current{background:var(--m7-ink);color:var(--m7-white);border-color:var(--m7-ink)}
.page-links{margin-top:30px;font-weight:600}

/* --- Responsive --------------------------------------------------------- */
@media (max-width:1080px){
  .nav-toggle{display:inline-flex}
  /*
   * Le menu couvre toute la zone disponible sous l'en-tête, avec un fond
   * opaque. Auparavant il s'ouvrait en tiroir : la page restait visible
   * dessous et continuait de défiler derrière.
   */
  .primary-nav{
    position:fixed;top:var(--m7-header-height,68px);left:0;right:0;bottom:0;
    background:var(--m7-header-bg);display:block;flex:none;
    z-index:120;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
    overflow-y:auto;
    /* Le défilement s'arrête au bord du menu : il ne se propage pas à la
       page située derrière. */
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .primary-nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav-list{padding-bottom:40px}
  .nav-list{flex-direction:column;align-items:stretch;padding:10px 24px 20px;gap:4px}
  .nav-list a{display:block}
  /* Sous-menus repliés par défaut : ils s'ouvrent au clic sur la flèche,
     pas automatiquement. La règle précédente forçait « display:flex »,
     ce qui les laissait dépliés en permanence sur téléphone. */
  .nav-list .sub-menu{
    position:static;transform:none;display:none;background:none;border:none;
    box-shadow:none;padding:0 0 0 14px;margin-top:2px;min-width:0;
  }
  .nav-list .menu-item-has-children.is-open > .sub-menu{display:flex}
  /* Le simple fait d'atteindre un lien au clavier ne doit plus déplier le
     sous-menu sur petit écran : seul un clic ou la touche Entrée le fait. */
  .nav-list .menu-item-has-children:focus-within > .sub-menu{display:none}
  .nav-list .menu-item-has-children.is-open:focus-within > .sub-menu{display:flex}
  /* La flèche devient une vraie cible tactile, alignée à droite. */
  .nav-list .menu-item-has-children{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  }
  .nav-list .menu-item-has-children > a{flex:1 1 auto}
  .nav-list .sub-toggle{
    flex:0 0 auto;min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    background:none;border:0;color:var(--m7-menu-color,#D5DEEC);
  }
  .nav-list .sub-toggle span{font-size:1rem}
  .nav-list .menu-item-has-children.is-open > .sub-toggle{transform:rotate(180deg)}
  /* Le chevron du bureau ferait doublon avec le bouton tactile. */
  .nav-list .menu-item-has-children > a::after{display:none}
  .nav-list .sub-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    box-shadow:none;background:rgba(255,255,255,.04);border:0;
    padding:6px 0 8px;margin:2px 0 6px;max-width:none;
    border-left:2px solid var(--m7-gold);border-radius:0 8px 8px 0;
  }
  /* Les entrées du sous-menu s'alignent nettement sous leur parent. */
  .nav-list .sub-menu a{padding-left:26px;font-size:.92rem;opacity:.92}
  .nav-list .sub-menu::before,
  .nav-list .sub-menu::after{display:none}
  .nav-list .sub-menu a{color:var(--m7-menu-color,#D5DEEC);padding:9px 14px}
  .nav-list .sub-menu a:hover{background:rgba(255,255,255,.08);color:var(--m7-white)}
  .nav-list .sub-menu li + li > a{box-shadow:none}
}

@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .front-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .lead-title{font-size:1.7rem}
  .lead-media img{height:260px}
  .article-hero img{height:260px}
}

@media (max-width:720px){
  .grid-3,.grid-2,.next-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .give-band{padding:22px}
  .search-panel{margin-top:6vh}
}

@media (max-width:560px){
  .btn-donate .lbl{display:none}
  .btn-donate{padding:10px 14px}
  .nav-inner{gap:8px;padding:12px 16px}
  .hero-content{padding:80px 20px 56px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .hero-slide{transition-duration:1s!important}
}

@media print{
  .site-header,.site-footer,.share-row,.give-band,.read-progress,.next-wrap{display:none}
  body{background:#fff;font-size:12pt}
}

/* =========================================================================
   Épisodes audio et vidéos (gabarits dédiés — lot 3)
   ========================================================================= */

/* --- Liste des épisodes ------------------------------------------------- */
.episode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;padding:0;margin:0}
.episode-card{
  background:var(--m7-white);border:1px solid rgba(11,31,59,.07);
  border-radius:var(--m7-radius);overflow:hidden;box-shadow:var(--m7-shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.episode-card:hover{transform:translateY(-3px);box-shadow:var(--m7-shadow-md)}
.episode-link{display:flex;flex-direction:column;color:inherit;text-decoration:none;height:100%}
.episode-link:hover{text-decoration:none}
.episode-art{
  width:100%;aspect-ratio:1/1;flex-shrink:0;background:linear-gradient(135deg,var(--m7-blue),var(--m7-gold));
  display:grid;place-items:center;
}
.episode-art img{width:100%;height:100%;object-fit:cover}
.episode-note{font-size:2rem;color:#fff}
.episode-body{display:flex;flex-direction:column;padding:14px 16px 16px;flex:1;min-width:0}
.episode-title{
  display:block;font-family:var(--m7-font-display);font-size:1rem;
  line-height:1.3;color:var(--m7-ink);font-weight:600;margin-top:6px;
}
.episode-link:hover .episode-title{color:var(--m7-blue)}
.episode-excerpt{display:none}
.episode-cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;
  font-weight:700;font-size:.82rem;color:var(--m7-ink);
}
.episode-cta::after{content:"▶";font-size:.7rem;color:var(--m7-gold)}

/* --- Liste simple sous un épisode --------------------------------------- */
.episode-list{list-style:none;margin:0;padding:0}
.episode-list li{border-bottom:1px solid var(--m7-paper-2)}
.episode-list li:last-child{border-bottom:none}
.episode-list a{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:14px 0;color:var(--m7-ink);text-decoration:none;
}
.episode-list a:hover{color:var(--m7-blue);text-decoration:none}
.episode-list .episode-date{font-size:.82rem;color:var(--m7-text-soft);flex-shrink:0}

/* --- Lecteur sur la page d'un épisode ----------------------------------- */
.single-audio-player{margin:30px 0}
.single-audio-player .m7c-art img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.m7c-tracks-single .m7c-track-btn{cursor:pointer}
.audio-download{margin-top:16px;font-size:.9rem}
.audio-download a{color:var(--m7-blue);font-weight:600}

/* --- Page d'une vidéo --------------------------------------------------- */
.single-video-frame{margin:30px 0}
.single-video-frame .m7c-facade{
  position:relative;display:block;width:100%;padding:0;border:none;cursor:pointer;
  background:var(--m7-ink);border-radius:var(--m7-radius);overflow:hidden;aspect-ratio:16/9;
}
.single-video-frame .m7c-facade img{width:100%;height:100%;object-fit:cover;display:block}
.single-video-frame iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--m7-radius);display:block}
.video-note{margin-top:12px;font-size:.86rem;color:var(--m7-text-soft)}
.video-note a{color:var(--m7-blue);font-weight:600}

/* --- Liste des vidéos --------------------------------------------------- */
.video-archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.video-card .video-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--m7-ink)}
.video-card .video-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.video-play{
  position:absolute;top:50%;left:50%;width:56px;height:40px;
  margin:-20px 0 0 -28px;border-radius:10px;background:rgba(11,31,59,.8);
  transition:background .2s ease;
}
.video-play::after{
  content:"";position:absolute;top:50%;left:50%;
  margin:-8px 0 0 -5px;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;
}
.video-card:hover .video-play{background:#c00}
.video-card .article-title{display:block;font-size:1.05rem;line-height:1.35;margin-top:8px}

@media (max-width:900px){
  .video-archive-grid{grid-template-columns:repeat(2,1fr)}
  .episode-grid{grid-template-columns:repeat(2,1fr)}
  /* Sur petit écran, le cadre Facebook n'a plus besoin d'être aussi haut. */
  .m7c-embed iframe{min-height:520px}
}

/* =========================================================================
   Page d'une émission (lot 6)
   ========================================================================= */
.program-hero{
  background:linear-gradient(135deg,var(--m7-ink) 0%,var(--m7-blue) 100%);
  color:#fff;padding:clamp(48px,8vw,86px) 0;
}
.program-hero .eyebrow{color:var(--m7-gold-soft)}
.program-hero .eyebrow::before{background:var(--m7-gold-soft)}
.program-title{color:#fff;font-size:var(--m7-size-h1);line-height:1.12;margin-top:16px;max-width:18ch}
.program-desc{margin-top:20px;color:rgba(255,255,255,.8);max-width:62ch}
.program-desc p{margin-top:12px}
.program-desc p:first-child{margin-top:0}
.program-stats{
  display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:30px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.16);
}
.program-stats li{display:flex;align-items:baseline;gap:8px}
.program-stats strong{
  font-family:var(--m7-font-display);font-size:1.9rem;color:var(--m7-gold-soft);line-height:1;
}
.program-stats span{font-size:.9rem;color:rgba(255,255,255,.72)}
.program-empty{padding:44px 26px}
.program-empty p{margin-bottom:12px}
.program-empty p:last-child{margin-bottom:0;margin-top:22px}
.program-give{margin-top:34px}

@media (max-width:720px){
  .program-stats{gap:12px 22px}
  .program-stats strong{font-size:1.5rem}
  .program-title{max-width:none}
}

/* --- Fil d'Ariane -------------------------------------------------------- */
.breadcrumbs{margin-bottom:22px;font-size:.84rem;color:var(--m7-text-soft)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;margin:0;padding:0}
.breadcrumbs li+li::before{content:"›";margin-right:8px;color:rgba(11,31,59,.35)}
.breadcrumbs a{color:var(--m7-blue);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs [aria-current]{color:var(--m7-text-soft)}
.program-hero .breadcrumbs{color:rgba(255,255,255,.7)}
.program-hero .breadcrumbs a{color:var(--m7-gold-soft)}
.program-hero .breadcrumbs li+li::before{color:rgba(255,255,255,.4)}

/* =========================================================================
   Sections de la page d'accueil
   ========================================================================= */
.hero-slide-plain{background:linear-gradient(135deg,var(--m7-ink) 0%,var(--m7-blue) 100%)}
.hero-meta{margin-top:14px;font-size:.85rem;color:rgba(255,255,255,.65);display:flex;gap:10px;flex-wrap:wrap}

/* --- Émissions ---------------------------------------------------------- */
.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.program-card{
  display:flex;flex-direction:column;gap:10px;padding:26px;
  background:var(--m7-white);border:1px solid rgba(11,31,59,.07);
  border-left:4px solid var(--m7-gold);border-radius:var(--m7-radius);
  box-shadow:var(--m7-shadow-sm);text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.program-card:hover{transform:translateY(-3px);box-shadow:var(--m7-shadow-md);text-decoration:none}
.program-name{font-family:var(--m7-font-display);font-size:1.2rem;line-height:1.3;color:var(--m7-ink);font-weight:600;overflow-wrap:anywhere}
.program-lead{font-size:.92rem;color:var(--m7-text-soft)}
.program-count{margin-top:auto;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--m7-blue)}

/* --- Radio -------------------------------------------------------------- */
.radio-band{background:linear-gradient(135deg,var(--m7-ink) 0%,var(--m7-blue) 100%);color:#fff}
.radio-inner{display:grid;grid-template-columns:1.4fr .9fr;gap:40px;align-items:center}
.radio-band .eyebrow{color:var(--m7-gold-soft)}
.radio-band .eyebrow::before{background:var(--m7-gold-soft)}
.radio-title{color:#fff;font-size:var(--m7-size-h2);line-height:1.2;margin-top:14px;overflow-wrap:anywhere}
.radio-text p{margin-top:16px;color:rgba(255,255,255,.78);max-width:60ch}
.radio-player{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--m7-radius);padding:28px;text-align:center;
}
.radio-live{
  width:52px;height:52px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#a8261f,var(--m7-gold));color:#fff;
  animation:m7-pulse 2.4s ease-in-out infinite;
}
@keyframes m7-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.radio-audio{width:100%;height:40px}
.radio-note{margin-top:14px;font-size:.84rem;color:rgba(255,255,255,.7)}

/* --- Quiz --------------------------------------------------------------- */
.quiz-teaser{
  display:flex;gap:18px;align-items:center;padding:26px;
  background:var(--m7-white);border:1px solid rgba(11,31,59,.07);
  border-radius:var(--m7-radius);box-shadow:var(--m7-shadow-sm);text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.quiz-teaser:hover{transform:translateY(-3px);box-shadow:var(--m7-shadow-md);text-decoration:none}
.quiz-teaser-icon{
  width:52px;height:52px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  background:var(--m7-paper-2);color:var(--m7-blue);
  font-family:var(--m7-font-display);font-size:1.6rem;font-weight:700;
}
.quiz-teaser-title{display:block;font-family:var(--m7-font-display);font-size:1.1rem;color:var(--m7-ink);font-weight:600;overflow-wrap:anywhere}
.quiz-teaser-meta{display:block;margin-top:5px;font-size:.85rem;color:var(--m7-text-soft)}

/* =========================================================================
   Responsive — garde-fous généraux
   ========================================================================= */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe,audio{max-width:100%}
.hero-title,.article-title,.section-title,.lead-title,.page-title,.program-title,.episode-title,.article-body h3{
  overflow-wrap:anywhere;hyphens:auto;
}
.ticker-group a{max-width:78vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Zones tactiles : 44 px est le minimum confortable au doigt. */
@media (pointer:coarse){
  .btn,.btn-donate,.icon-btn,.nav-toggle,.cat-btn,.share-btn,.m7c-chip{min-height:44px}
  .nav-list a{padding-top:12px;padding-bottom:12px}
}

/* --- Grands écrans : 1440 px et plus ----------------------------------- */
@media (min-width:1440px){
  .hero-title{font-size:calc(var(--m7-size-h1) * 1.12)}
}

/* --- Tablettes paysage et petits portables : 835–1199 px --------------- */
@media (max-width:1199px){
  .program-grid{grid-template-columns:repeat(2,1fr)}
  .radio-inner{gap:30px}
}

/* --- Tablettes portrait : 768–834 px ----------------------------------- */
@media (max-width:834px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .video-archive-grid{grid-template-columns:repeat(2,1fr)}
  .radio-inner{grid-template-columns:1fr;gap:26px}
  .radio-player{max-width:520px}
  .front-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

/* --- Grands téléphones : jusqu'à 767 px -------------------------------- */
@media (max-width:767px){
  .grid-2,.grid-3,.program-grid,.video-archive-grid,.episode-grid,.next-grid{grid-template-columns:1fr}
  .head-row{flex-direction:column;align-items:flex-start;gap:12px}
  .hero{min-height:auto}
  .hero-content{padding:70px 20px 52px}
  .quiz-teaser{padding:20px;gap:14px}
}

/* --- Téléphones standards : jusqu'à 430 px ----------------------------- */
@media (max-width:430px){
  .brand-link .mark{width:var(--m7-logo-h-mobile,32px);height:var(--m7-logo-h-mobile,32px)}
  .wrap{padding:0 16px}
  .section{padding:calc(var(--m7-space-section) * .62) 0}
  .brand-text{font-size:1.1rem}
  .lead-title{font-size:1.45rem}
  .radio-player{padding:20px}
  .program-card{padding:20px}
  /* En-tête resserré : l'espace au-dessus du titre venait surtout du
     retrait supérieur du bloc de une, pas de l'en-tête lui-même. */
  .nav-inner{padding:0 16px;min-height:var(--m7-header-h-mobile,56px)}
  .brand-link{gap:8px}
  .ticker-group{gap:28px;padding:7px 28px 7px 0}
  .hero-content{padding:40px 16px 40px}
  .hero-title{margin-top:10px}
  .hero-desc{margin-top:12px}
  .hero-actions{margin-top:18px}
}

/* --- Petits téléphones : jusqu'à 374 px -------------------------------- */
@media (max-width:374px){
  :root{--m7-size-h1:1.75rem;--m7-size-h2:1.45rem}
  .wrap{padding:0 12px}
  .brand-text .sub{font-size:.52rem}
  .btn,.btn-primary{padding:12px 18px;font-size:.86rem}
  .nav-inner{padding:8px 12px}
  .hero-content{padding:32px 12px 36px}
  .mr-num{width:24px;font-size:1.2rem}
  .episode-art{width:78px}
}
.footer-col h3,.footer-title{color:var(--m7-footer-title,#fff)}
.site-footer .mark{width:var(--m7-footer-logo-h,36px);height:var(--m7-footer-logo-h,36px)}
.card .article-body,.card-body{padding:var(--m7-card-pad,22px)}
.card,.program-card,.quiz-teaser,.m7c-block{border-color:var(--m7-border-color,#E2E8F2)}

/* --- Étiquette fixe du bandeau ------------------------------------------- */
.ticker-label{
  flex:0 0 auto;
  display:inline-flex;align-items:center;
  padding:0 16px;margin-right:2px;
  font-weight:800;line-height:1;white-space:nowrap;
  background:var(--m7-gold);color:var(--m7-ink);
}
@media (max-width:430px){.ticker-label{padding:0 10px}}

/* --- Boutons supplémentaires --------------------------------------------- */
.m7-extra-buttons{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.m7-extra-header{margin-right:4px}
.m7-extra-footer{display:flex;justify-content:center;margin:26px 0 4px}
.btn-ghost{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.35);
}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.m7-extra-link{color:var(--m7-gold-soft);text-decoration:underline;font-size:.92rem}
.m7-extra-link:hover{color:#fff}
@media (max-width:1080px){.m7-extra-header{display:none}}

/* --- Bandeau : mode machine à écrire ------------------------------------- */
/* Les titres d'origine restent lisibles par les lecteurs d'écran et les
   moteurs de recherche : ils sont masqués visuellement, jamais retirés. */
.ticker-track.is-typing .ticker-group{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.ticker-track.is-typing{width:100%;animation:none;transform:none}
.ticker-typed{
  display:inline-flex;align-items:center;
  padding:9px 0;white-space:nowrap;text-decoration:none;
  color:inherit;font-size:var(--m7-ticker-size,.86rem);line-height:1.2;
}
.ticker-typed:hover{text-decoration:underline}
.ticker-typed-text{display:inline-block;line-height:1.2}
.ticker-cursor{
  display:inline-block;width:2px;height:1em;margin-left:3px;
  background:currentColor;animation:m7-caret 1s step-end infinite;
}
@keyframes m7-caret{0%,100%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ticker-bar[data-motion="auto"] .ticker-cursor{animation:none}
}

/* --- Réseaux sociaux du pied de page ------------------------------------- */
.social-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.social-list a{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:.92rem}
.site-footer .footer-grid[data-cols="1"]{grid-template-columns:1fr}

/* =========================================================================
   Rubrique Audio : émissions et épisodes
   ========================================================================= */
.audio-intro-actions{margin-top:20px}

/* --- Cartes d'émission ---------------------------------------------------- */
.show-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.show-card{
  display:flex;flex-direction:column;
  background:var(--m7-white);border:1px solid rgba(11,31,59,.07);
  border-radius:var(--m7-radius);box-shadow:var(--m7-shadow-sm);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.show-card:hover{transform:translateY(-3px);box-shadow:var(--m7-shadow-md)}
.show-media{display:block;aspect-ratio:16/9;background:linear-gradient(135deg,var(--m7-ink),var(--m7-blue));position:relative}
.show-media img{width:100%;height:100%;object-fit:cover;display:block}
.show-initial{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--m7-font-display);font-size:3rem;color:var(--m7-gold-soft);
}
.show-body{display:flex;flex-direction:column;gap:10px;padding:22px;flex:1}
.show-name{font-size:1.15rem;line-height:1.3;overflow-wrap:anywhere}
.show-name a{color:var(--m7-ink);text-decoration:none}
.show-name a:hover{color:var(--m7-blue)}
.show-tagline{font-size:.93rem;color:var(--m7-text-soft)}
.show-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--m7-blue);font-weight:600}
.show-meta li+li::before{content:"·";margin-right:14px;color:rgba(11,31,59,.3)}
.show-cta{margin-top:auto;align-self:flex-start}

/* --- En-tête d'une émission ------------------------------------------------ */
.program-cover-wrap{margin-bottom:22px;max-width:220px}
.program-cover{width:100%;height:auto;border-radius:var(--m7-radius);display:block}
.program-tagline{margin-top:16px;font-size:1.05rem;color:var(--m7-gold-soft)}
.program-facts{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px 30px;font-size:.92rem;color:rgba(255,255,255,.82);
}
.fact-label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.55)}
.fact-link{color:var(--m7-gold-soft);text-decoration:underline}

/* --- Dernier épisode -------------------------------------------------------- */
.latest-episode{
  padding:26px;margin-bottom:26px;
  background:var(--m7-white);border-left:4px solid var(--m7-gold);
  border-radius:var(--m7-radius);box-shadow:var(--m7-shadow-sm);
}
.latest-title{font-size:1.4rem;line-height:1.25;margin-top:12px;overflow-wrap:anywhere}
.latest-title a{color:var(--m7-ink);text-decoration:none}
.latest-meta{margin-top:8px;font-size:.86rem;color:var(--m7-text-soft)}
.latest-desc{margin-top:12px;color:var(--m7-text-soft)}
.latest-episode .btn{margin-top:18px}

/* --- Épisode ---------------------------------------------------------------- */
.episode-number{
  display:inline-block;margin-bottom:10px;padding:4px 12px;
  background:var(--m7-paper-2);border-radius:100px;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--m7-blue);
}
.spotify-embed{margin:26px 0;padding:22px;background:var(--m7-paper-2);border-radius:var(--m7-radius);text-align:center}
.spotify-note{margin-top:10px;font-size:.84rem;color:var(--m7-text-soft)}
.episode-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.episode-nav-item{
  display:block;padding:18px;background:var(--m7-white);
  border:1px solid rgba(11,31,59,.08);border-radius:var(--m7-radius);text-decoration:none;
}
.episode-nav-item:hover{border-color:var(--m7-blue)}
.episode-nav-item.is-next{text-align:right}
.episode-nav-label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--m7-text-soft)}
.episode-nav-title{display:block;margin-top:6px;font-weight:600;color:var(--m7-ink);overflow-wrap:anywhere}
.episode-return{margin-top:24px;text-align:center}

@media (max-width:1199px){.show-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){
  .show-grid{grid-template-columns:1fr}
  .episode-nav{grid-template-columns:1fr}
  .episode-nav-item.is-next{text-align:left}
  .program-facts{gap:12px 20px}
  .program-cover-wrap{max-width:150px}
}

/* --- Pagination des épisodes --------------------------------------------- */
.episodes-pagination{margin-top:26px}
.spotify-embed iframe{display:block;border-radius:12px}
@media (max-width:430px){.spotify-embed{padding:16px}}

/* --- Dernière vidéo d'une émission --------------------------------------- */
.latest-video{
  display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center;
  padding:22px;margin-bottom:26px;
  background:var(--m7-white);border-left:4px solid var(--m7-gold);
  border-radius:var(--m7-radius);box-shadow:var(--m7-shadow-sm);
}
.latest-video-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--m7-paper-2)}
.latest-video-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.latest-video-body .latest-title{margin-top:8px}
@media (max-width:767px){
  .latest-video{grid-template-columns:1fr;gap:16px}
}


/* --- Menu ouvert : la page derrière est bloquée --------------------------- */
/* Le script fige le corps de page et mémorise la position de défilement ;
   ces règles empêchent tout mouvement résiduel, y compris au doigt. */
html.has-nav-open,
body.has-nav-open{overflow:hidden;overscroll-behavior:none;touch-action:none}
body.has-nav-open{position:fixed;left:0;right:0;width:100%}
/* Le menu, lui, reste défilable si ses entrées dépassent l'écran. */
body.has-nav-open .primary-nav{touch-action:pan-y}
@media (prefers-reduced-motion:reduce){
  .primary-nav{transition:none}
}


/* =========================================================================
   Menu plein écran : mise en page des entrées et des sous-menus
   -------------------------------------------------------------------------
   Ces règles sont volontairement plus précises que celles du
   personnalisateur : elles ne peuvent donc pas être écrasées par un
   espacement pensé pour le menu horizontal.
   ========================================================================= */
@media (max-width:1080px){
  .primary-nav .nav-list{
    display:flex;flex-direction:column;align-items:stretch;
    gap:0;row-gap:0;justify-content:flex-start;
    padding:8px 0 40px;
  }
  .primary-nav .nav-list > li{width:100%}
  .primary-nav .nav-list > li > a{
    display:block;padding:13px 20px;font-size:1.02rem;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  /*
   * Grille plutôt que flex : le libellé et le bouton « + » occupent la
   * première ligne, le sous-menu la seconde, sur toute la largeur.
   *
   * Le retour à la ligne en flex reposait sur « flex:1 0 100% », que
   * plusieurs règles successives se disputaient : selon celle qui
   * l'emportait, le sous-menu se retrouvait tassé à côté du libellé au
   * lieu de se placer dessous. Une grille ne laisse aucune place au doute.
   */
  .primary-nav .nav-list .menu-item-has-children{
    display:grid;grid-template-columns:1fr auto;align-items:center;
  }
  .primary-nav .nav-list .menu-item-has-children > a{grid-column:1;border-bottom:0}
  .primary-nav .nav-list .menu-item-has-children > .sub-toggle{grid-column:2}
  .primary-nav .nav-list .menu-item-has-children > .sub-menu{grid-column:1 / -1}
  /* La flèche est repérable sans être un bouton blanc : un simple cercle
     à peine teinté, de la couleur du texte. */
  .primary-nav .nav-list .menu-item-has-children > .sub-toggle{
    flex:0 0 auto;min-width:52px;min-height:48px;
    background:none;border:0;color:inherit;
  }
  .primary-nav .nav-list .sub-toggle span{
    width:28px;height:28px;border-radius:50%;
    display:grid;place-items:center;
    background:rgba(255,255,255,.10);
    font-size:.8rem;opacity:1;
  }
  .primary-nav .nav-list .menu-item-has-children.is-open > .sub-toggle span{
    background:var(--m7-gold);color:var(--m7-ink);
  }
  /* Le lien parent repris en tête du sous-menu. */
  .primary-nav .nav-list .sub-menu-parent-link > a{font-weight:600;opacity:1}
  .primary-nav .nav-list .menu-item-has-children{border-bottom:1px solid rgba(255,255,255,.07)}

  /* Sous-menu : sous son entrée, sur toute la largeur, replié par défaut. */
  .primary-nav .nav-list .sub-menu{
    width:100%;max-width:100%;
    list-style:none;margin:0;padding:0;   /* aucun retrait hérité du navigateur */
    background:rgba(255,255,255,.05);
    border:0;border-left:3px solid var(--m7-gold);border-radius:0;
    box-shadow:none;
  }
  /* Sur écran tactile, le survol « colle » après une tape : sans ces
     déclarations, la règle « au survol » du personnalisateur masquait le
     sous-menu que le visiteur venait justement d'ouvrir. */
  /*
   * Cette règle doit être aussi précise que celle du bureau, qui centre le
   * panneau sous son entrée avec « translateX(-50%) ». Ma règle mobile
   * était moins prioritaire : le sous-menu partait donc d'une demi-largeur
   * vers la gauche, et le début du libellé sortait de l'écran — « Media 7
   * Radio » n'affichait plus que « 7 Radio ».
   */
  .primary-nav .nav-list .menu-item-has-children.is-open > .sub-menu{
    display:block;opacity:1;visibility:visible;pointer-events:auto;
    position:static;transform:none;left:auto;right:auto;top:auto;
  }
  .primary-nav .nav-list .sub-menu li{width:100%}
  .primary-nav .nav-list .sub-menu a{display:block;border-bottom:0}
  .primary-nav .nav-list .sub-menu::before,
  .primary-nav .nav-list .sub-menu::after{display:none}
}

/* =========================================================================
   RÉGLAGES MOBILES — menu, sous-menus, recherche, bouton de don
   -------------------------------------------------------------------------
   Tout ce bloc ne s'applique qu'en dessous du seuil du menu mobile : la
   version ordinateur n'est jamais touchée. Les valeurs sont regroupées en
   variables, modifiables depuis Apparence › Personnaliser ou directement
   ici pour un ajustement rapide.
   ========================================================================= */
@media (max-width:1080px){
  :root{
    /* --- Position et espacement du menu --- */
    --m7-m-menu-top:8px;        /* décalage vertical du bloc de menu       */
    --m7-m-menu-pad-x:20px;     /* retrait gauche et droite                */
    --m7-m-menu-width:100%;     /* largeur du bloc de menu                 */
    --m7-m-item-gap:0px;        /* espace entre deux entrées               */
    --m7-m-item-height:48px;    /* hauteur minimale d'une entrée           */
    --m7-m-item-size:17px;      /* taille du texte des entrées             */
    --m7-m-item-align:left;     /* alignement du texte                     */

    /* --- Sous-menus --- */
    --m7-m-sub-gap:4px;         /* distance entre le parent et son sous-menu */
    --m7-m-sub-item-gap:0px;    /* espace entre deux sous-entrées          */
    --m7-m-sub-indent:30px;     /* retrait gauche des sous-entrées         */
    --m7-m-sub-pad-y:6px;       /* espacement intérieur haut et bas        */
    --m7-m-sub-size:15px;       /* taille du texte                         */
    --m7-m-sub-height:44px;     /* hauteur minimale d'une sous-entrée      */
    --m7-m-sub-width:100%;      /* largeur du sous-menu                    */
    --m7-m-sub-align:left;      /* alignement du texte                     */

    /* --- Bouton de recherche --- */
    --m7-m-search-w:auto;
    --m7-m-search-h:48px;
    --m7-m-search-size:.95rem;
    --m7-m-search-icon:1.1rem;
    --m7-m-search-radius:100px;
    --m7-m-search-margin:8px;

    /* --- Bouton de don --- */
    --m7-m-donate-w:auto;
    --m7-m-donate-h:40px;
    --m7-m-donate-size:.9rem;
    --m7-m-donate-radius:100px;
    --m7-m-donate-margin:0px;
  }

  /* --- Menu --- */
  .primary-nav .nav-list{
    padding:var(--m7-m-menu-top) 0 40px;
    gap:var(--m7-m-item-gap);row-gap:var(--m7-m-item-gap);
    width:var(--m7-m-menu-width);margin-left:auto;margin-right:auto;
  }
  .primary-nav .nav-list > li > a,
  .primary-nav .nav-list .menu-item-has-children > a{
    min-height:var(--m7-m-item-height);
    display:flex;align-items:center;
    padding-left:var(--m7-m-menu-pad-x);padding-right:var(--m7-m-menu-pad-x);
    font-size:var(--m7-m-item-size);
    text-align:var(--m7-m-item-align);
  }

  /* --- Sous-menus : dans le flux, ils poussent la suite vers le bas ----
     L'animation porte sur une grille : elle glisse sans hauteur figée,
     donc sans risque de couper une entrée sur un petit écran. */
  /*
   * Mécanisme volontairement simple : caché ou affiché, rien d'autre.
   *
   * J'avais d'abord animé la hauteur avec une grille. Cette technique
   * n'escamote que la première ligne quand la liste compte plusieurs
   * entrées : les suivantes gardaient leur place, invisibles mais
   * occupant l'espace. D'où des sous-menus qu'on ne voyait pas.
   *
   * Les déclarations « !important » ne sont pas un raccourci : elles
   * neutralisent la règle « au survol » du personnalisateur, qui reste
   * collée après une tape sur écran tactile et masquait le sous-menu que
   * le visiteur venait d'ouvrir.
   */
  .primary-nav .nav-list .sub-menu{
    display:none;
    position:static;transform:none;left:auto;right:auto;top:auto;
    opacity:1 !important;visibility:visible !important;pointer-events:auto !important;
    width:var(--m7-m-sub-width);max-width:100%;
    margin-top:0;
  }
  .primary-nav .nav-list .menu-item-has-children.is-open > .sub-menu{
    display:block;
    margin-top:var(--m7-m-sub-gap);
    padding-top:var(--m7-m-sub-pad-y);padding-bottom:var(--m7-m-sub-pad-y);
  }
  .primary-nav .nav-list .sub-menu li + li{margin-top:var(--m7-m-sub-item-gap)}
  /* Retrait et taille du texte : une seule source, « --mobile-submenu-* ».
     Deux variables les pilotaient auparavant, et celle d'en haut était
     systématiquement écrasée — le réglage correspondant ne faisait donc
     rien du tout. */
  .primary-nav .nav-list .sub-menu a{
    min-height:var(--m7-m-sub-height);
    display:flex;align-items:center;
    padding-right:var(--m7-m-menu-pad-x);
    text-align:var(--m7-m-sub-align);
  }

  /* --- Bouton de recherche --- */
  .search-overlay .search-submit,
  .search-head .search-submit{
    background:var(--m7-gold);color:var(--m7-ink);
    min-width:var(--m7-m-search-w);min-height:var(--m7-m-search-h);
    font-size:var(--m7-m-search-size);
    border-radius:var(--m7-m-search-radius);
    margin:var(--m7-m-search-margin);
    flex:0 0 auto;white-space:nowrap;
  }
  .nav-utils #searchOpen{
    min-height:var(--m7-m-search-h);
    font-size:var(--m7-m-search-icon);
    border-radius:var(--m7-m-search-radius);
  }
  /* Le champ et le bouton passent l'un sous l'autre si la place manque :
     le bouton reste entier, jamais coupé ni caché. */
  .search-head .search-form{flex-wrap:wrap}
  .search-head .search-form input[type="search"]{flex:1 1 100%;min-width:0}

  /* --- Bouton de don --- */
  .nav-utils .btn-donate{
    min-width:var(--m7-m-donate-w);min-height:var(--m7-m-donate-h);
    font-size:var(--m7-m-donate-size);
    border-radius:var(--m7-m-donate-radius);
    margin:var(--m7-m-donate-margin);
  }
}



/* =========================================================================
   MOBILE — RÉGLAGES NUMÉRIQUES (points 1 à 19)
   -------------------------------------------------------------------------
   Un seul bloc, une seule requête média : rien ici ne peut atteindre
   l'affichage sur ordinateur. Modifiez librement les chiffres ci-dessous.
   ========================================================================= */
@media (max-width:1080px){
  :root{
    /* ---- HEADER MOBILE ---------------------------------------------- */
    --mobile-header-padding-left:16px;   /* marge entre le bord et le logo   */
    --mobile-header-padding-right:16px;  /* marge entre le dernier bouton et le bord */
    --mobile-logo-width:132px;           /* largeur du logo (hauteur auto)   */
    --mobile-logo-actions-gap:12px;      /* logo → groupe de boutons         */
    --mobile-search-donation-gap:8px;    /* recherche → don                  */
    --mobile-donation-menu-gap:8px;      /* don → menu                       */

    /* ---- MENU MOBILE : décalage propre à chaque entrée --------------- */
    --mobile-menu-item-1-offset:0px;
    --mobile-menu-item-2-offset:0px;
    --mobile-menu-item-3-offset:0px;
    --mobile-menu-item-4-offset:0px;
    --mobile-menu-item-5-offset:0px;
    --mobile-menu-item-6-offset:0px;

    /* ---- ESPACEMENT VERTICAL ---------------------------------------- */
    --mobile-menu-item-spacing:0px;      /* entre deux menus principaux      */
    --mobile-submenu-top-spacing:6px;    /* parent → premier sous-menu       */
    --mobile-submenu-item-spacing:2px;   /* entre deux sous-entrées          */
    --mobile-submenu-bottom-spacing:8px; /* après la dernière sous-entrée    */

    /* ---- SOUS-MENUS -------------------------------------------------- */
    --mobile-submenu-indent:40px;        /* retrait horizontal               */
    --mobile-submenu-font-size:15px;

    /* ---- RECHERCHE MOBILE -------------------------------------------- */
    --mobile-search-field-height:48px;
    --mobile-search-field-radius:14px;
  }

  /* ---- POINT 1 : logo à gauche, boutons groupés à droite ------------- */
  .nav-inner{
    padding-left:var(--mobile-header-padding-left);
    padding-right:var(--mobile-header-padding-right);
    gap:var(--mobile-logo-actions-gap);
  }
  .nav-inner > .brand{margin-right:auto}
  .nav-utils{display:flex;align-items:center;gap:var(--mobile-donation-menu-gap)}
  .nav-utils #searchOpen{margin-right:calc(var(--mobile-search-donation-gap) - var(--mobile-donation-menu-gap))}

  /* ---- POINT 2 : le logo garde ses proportions ---------------------- */
  .brand .mark,.brand-link .mark,.custom-logo{
    width:var(--mobile-logo-width);height:auto;max-width:100%;
    object-fit:contain;flex:0 0 auto;
  }

  /* ---- POINT 3 : le don retiré ne laisse aucun vide ------------------ */
  .nav-utils .btn-donate[hidden],
  .nav-utils .btn-donate.is-hidden{display:none}

  /* ---- POINTS 10 à 15 : menus et sous-menus ------------------------- */
  .primary-nav .nav-list > li + li{margin-top:var(--mobile-menu-item-spacing)}
  .primary-nav .nav-list > li:nth-child(1) > a{padding-left:calc(var(--m7-m-menu-pad-x) + var(--mobile-menu-item-1-offset))}
  .primary-nav .nav-list > li:nth-child(2) > a{padding-left:calc(var(--m7-m-menu-pad-x) + var(--mobile-menu-item-2-offset))}
  .primary-nav .nav-list > li:nth-child(3) > a{padding-left:calc(var(--m7-m-menu-pad-x) + var(--mobile-menu-item-3-offset))}
  .primary-nav .nav-list > li:nth-child(4) > a{padding-left:calc(var(--m7-m-menu-pad-x) + var(--mobile-menu-item-4-offset))}
  .primary-nav .nav-list > li:nth-child(5) > a{padding-left:calc(var(--m7-m-menu-pad-x) + var(--mobile-menu-item-5-offset))}
  .primary-nav .nav-list > li:nth-child(6) > a{padding-left:calc(var(--m7-m-menu-pad-x) + var(--mobile-menu-item-6-offset))}

  /* Sous-menu fermé : zéro hauteur, zéro marge, zéro espace réservé. */
  .primary-nav .nav-list .sub-menu{
    margin-top:0;padding-top:0;padding-bottom:0;
  }
  .primary-nav .nav-list .menu-item-has-children.is-open > .sub-menu{
    margin-top:var(--mobile-submenu-top-spacing);
    padding-top:0;padding-bottom:var(--mobile-submenu-bottom-spacing);
  }
  .primary-nav .nav-list .sub-menu li + li{margin-top:var(--mobile-submenu-item-spacing)}
  .primary-nav .nav-list .sub-menu a{
    padding-left:var(--mobile-submenu-indent);
    font-size:var(--mobile-submenu-font-size);
    opacity:.9;
  }

  /* ---- POINT 18 : indicateur + / − ---------------------------------- */
  .primary-nav .nav-list .sub-toggle span{font-size:0;position:relative}
  .primary-nav .nav-list .sub-toggle span::before{
    content:"+";font-size:1.15rem;line-height:1;font-weight:600;
  }
  .primary-nav .nav-list .menu-item-has-children.is-open > .sub-toggle span::before{content:"−"}
  .primary-nav .nav-list .menu-item-has-children.is-open > .sub-toggle{transform:none}

  /* ---- Champ de recherche mobile ------------------------------------
     La recherche instantanée a été retirée : le champ et son bouton doré
     reprennent le fonctionnement habituel de WordPress, identique à celui
     de l'ordinateur. */
  .search-head .search-form input[type="search"]{
    min-height:var(--mobile-search-field-height);
    border-radius:var(--mobile-search-field-radius);
  }
}

/* --- Cartes entièrement cliquables ---------------------------------------
   Le titre est le lien ; cette zone invisible l'étend à toute la carte,
   texte compris. Aucun HTML n'est modifié, et le lien reste unique pour
   les lecteurs d'écran comme pour les moteurs de recherche. */
.article-card,.card,.video-card,.episode-card,.show-card,.program-card{position:relative}
.article-card .card-title a::after,
.card .card-title a::after,
.show-card .show-name a::after,
.video-card .video-title a::after,
.episode-card .episode-link::after{
  content:"";position:absolute;inset:0;z-index:1;
}
/* Les liens réellement distincts restent cliquables par-dessus. */
.article-card a:not(.card-title a),
.card a:not(.card-title a),
.show-card .show-cta{position:relative;z-index:2}

/* --- Encadré de présentation de l'auteur --------------------------------- */
.author-box{
  display:flex;gap:18px;align-items:flex-start;
  margin-top:34px;padding:22px;
  background:var(--m7-paper-2);border-radius:var(--m7-radius);
  border-left:4px solid var(--m7-gold);
}
.author-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.author-name{font-weight:700;color:var(--m7-ink)}
.author-role{font-weight:500;color:var(--m7-text-soft)}
.author-role::before{content:" · "}
.author-bio{margin-top:6px;color:var(--m7-text-soft);font-size:.94rem;line-height:1.55}
.byline-role::before{content:" · "}
@media (max-width:560px){
  .author-box{flex-direction:column;gap:12px}
  .author-photo{width:60px;height:60px}
}

/* --- Recherche : téléphone uniquement ------------------------------------
   Sur téléphone seulement, le bouton texte « Chercher » disparaît : il ne
   reste que le signe de recherche, aligné sur la même ligne que le champ de
   saisie. Sur tablette et ordinateur, rien ne change. */
@media (max-width:600px){
  .search-head .search-submit,
  .search-overlay .search-submit{
    display:none;
  }
  .search-head .search-form{
    flex-wrap:nowrap;
  }
  .search-head .search-form input[type="search"]{
    flex:1 1 auto;
  }
}