/*
 * Magazine Les Sports - habillage du theme enfant GeneratePress.
 * Cree le 2026-08-13.
 */

:root{
  --mag-ground:#f3f6f3;
  --mag-surface:#ffffff;
  --mag-surface-2:#e9eeea;
  --mag-ink:#14201a;
  --mag-ink-2:#586a5f;
  --mag-line:#dbe2dc;
  --mag-vert:#11793f;
  --mag-vert-deep:#0b2e1d;
  --mag-vert-mid:#0f4f2c;
  --mag-or:#ffba00;
  --mag-shadow:0 1px 2px rgba(11,46,29,.06), 0 6px 18px rgba(11,46,29,.06);
  --mag-cond:Bahnschrift,"DIN Alternate","Archivo Narrow","Roboto Condensed","Segoe UI",system-ui,sans-serif;
}

/* ---------- bandeau du dernier article (hors accueil) ---------- */
/* bandeau volontairement plus mince que la barre de navigation */
.mag-promo{background:var(--mag-or);color:#20180a}
.mag-promo-inner{display:flex;align-items:center;gap:11px;padding:4px 20px;flex-wrap:nowrap}
.mag-promo-label{font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.09em;
  font-size:10.5px;font-weight:700;background:#20180a;color:var(--mag-or);
  padding:2px 8px;border-radius:3px;white-space:nowrap}
.mag-promo-titre{flex:1;min-width:0;font-weight:600;font-size:14px;color:#20180a;
  text-decoration:none;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mag-promo-titre:hover{text-decoration:underline}
.mag-promo-cat{font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.06em;
  font-size:11.5px;font-weight:700;color:#6b5410;white-space:nowrap}
.mag-promo-btn,
.mag-promo-btn:visited{background:#0b2e1d;color:#fff!important;font-size:12.5px;font-weight:600;
  padding:5px 13px;border-radius:4px;text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease;border-bottom:0}
.mag-promo-btn:hover{background:#11793f;color:#fff!important}
.mag-promo-btn:focus-visible{outline:3px solid #20180a;outline-offset:2px}

/* ---------- en-tete et navigation ---------- */
/* en-tete volontairement mince : le logo n'a pas besoin de 100 px de haut */
.site-header{background:var(--mag-vert-deep);padding:5px 0}
.site-header .site-logo img{max-height:30px;width:auto}
.site-header .inside-header{padding-top:4px;padding-bottom:4px}

/* Le panneau lateral est reserve au mobile : sur grand ecran la barre affiche
   tout le menu et le bouton « Menu » n'a pas lieu d'etre. */

/* ---------- bouton et panneau lateral ---------- */
/* bouton « Menu » : mobile uniquement (voir la regle a la fin du fichier) */
.mag-item-burger{display:none;align-items:center}
/* la loupe du theme fait doublon avec la recherche du panneau : on la retire.
   Elle vit dans un span.menu-bar-item, pas dans un li.search-item. */
.main-navigation .menu-bar-items .menu-bar-item{display:none}
.mag-burger{display:flex;align-items:center;gap:9px;background:transparent;border:0;cursor:pointer;
  color:#d5e6dc;font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.06em;
  font-size:13px;font-weight:700;padding:10px 16px}
.mag-burger:hover{color:#fff}
.mag-burger:focus-visible{outline:3px solid var(--mag-or);outline-offset:-3px}
.mag-burger-traits{display:flex;flex-direction:column;gap:3.5px;width:18px}
.mag-burger-traits span{display:block;height:2px;background:currentColor;border-radius:2px}

.mag-panneau-fond{position:fixed;inset:0;background:rgba(4,18,11,.55);z-index:9998;
  opacity:0;transition:opacity .25s ease}
.mag-panneau-fond.est-ouvert{opacity:1}

.mag-panneau{position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);z-index:9999;
  background:var(--mag-vert-deep);color:#cfe6d8;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;
  box-shadow:-8px 0 30px rgba(0,0,0,.3)}
.mag-panneau.est-ouvert{transform:translateX(0)}
.mag-panneau-tete{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.12);position:sticky;top:0;
  background:var(--mag-vert-deep)}
.mag-panneau-titre{font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.08em;
  font-size:13px;color:var(--mag-or);font-weight:700}
.mag-fermer{background:transparent;border:0;color:#cfe6d8;font-size:19px;line-height:1;
  cursor:pointer;padding:6px 8px;border-radius:4px}
.mag-fermer:hover{color:#fff;background:rgba(255,255,255,.08)}
.mag-fermer:focus-visible{outline:3px solid var(--mag-or);outline-offset:2px}
.mag-panneau-corps{padding:18px 20px 30px}
.mag-panneau h2{font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.07em;
  font-size:12px;color:#7fa08e;margin:22px 0 10px;font-weight:700}
.mag-panneau h2:first-of-type{margin-top:6px}
.mag-panneau-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mag-panneau a{text-decoration:none}
.mag-panneau-liste a{display:block;padding:10px 12px;border-radius:4px;color:#e2efe8;
  font-size:15.5px;border-left:3px solid var(--b,transparent)}
.mag-panneau-liste a:hover,.mag-panneau-liste a:focus-visible{background:rgba(255,255,255,.08);color:#fff}
.mag-panneau-liste--simple a{border-left-color:transparent;color:#b8cfc2;font-size:14.5px}

.mag-recherche{display:flex;gap:8px;margin-bottom:6px}
.mag-recherche input{flex:1;min-width:0;padding:10px 12px;border-radius:4px;font-size:14.5px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff}
.mag-recherche input::placeholder{color:#8fae9c}
.mag-recherche input:focus{outline:2px solid var(--mag-or);outline-offset:0}
.mag-recherche button{background:var(--mag-or);color:#20180a;border:0;border-radius:4px;
  padding:0 15px;font-size:17px;cursor:pointer;font-weight:700}

/* sur mobile, le panneau remplace entierement le menu deroulant du theme */
@media (max-width:768px){
  .main-navigation .menu-toggle,
  .main-navigation .main-nav{display:none!important}
  .main-navigation .inside-navigation{justify-content:flex-end}
  .mag-item-burger{display:flex}
  .mag-burger{padding:11px 4px}
}
.main-navigation{background:var(--mag-vert-mid);border-top:1px solid rgba(255,255,255,.08)}
.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-items{
  font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.04em;
  font-size:15px;line-height:1.2;
}
/* la barre de navigation garde de la presence : c'est l'en-tete qui est mince,
   pas le menu. La place liberee par la loupe et le bouton Menu sert a ca.
   Le theme fixe ce padding dans sa feuille en ligne, d'ou le !important. */
@media (min-width:769px){
  .main-navigation .inside-navigation .main-nav > ul > li > a{
    padding-top:22px!important;padding-bottom:22px!important;
  }
}
.main-navigation .main-nav ul li a{
  color:#d5e6dc;border-bottom:0;transition:background-color .15s ease,color .15s ease;
}

/* Le menu compte huit entrees. On les serre sur une seule ligne UNIQUEMENT en
   desktop : en mobile le menu deroulant doit s'empiler en colonne, et lui
   interdire le retour a la ligne le casse entierement. */
@media (min-width:769px){
  .main-navigation .main-nav > ul > li > a{padding-left:16px;padding-right:16px}
  .main-navigation .inside-navigation{flex-wrap:nowrap}
  .main-navigation .main-nav > ul{flex-wrap:nowrap}
  .main-navigation .main-nav ul li a{white-space:nowrap}
}
/* survol discret : un aplat legerement plus clair plutot qu'un gros
   soulignement. Seule la rubrique en cours porte un fin trait dore. */
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a{
  background:rgba(255,255,255,.09);color:#fff;
}
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-parent > a{
  color:#fff;box-shadow:inset 0 -2px 0 var(--mag-or);
}
.main-navigation .main-nav ul ul{background:var(--mag-vert-mid);border-top:2px solid var(--mag-or)}
.main-navigation .main-nav ul ul li a{text-transform:none;letter-spacing:0;font-size:14px;background:transparent}

/* ⚠️ NE PAS remettre display:flex sur le body pour coller le pied de page.
   Testé le 13/08/2026 : en flexbox, le body adopte la largeur intrinsèque de
   son contenu (1200 px), le viewport mobile s'aligne dessus et TOUT le
   responsive tombe. Mesuré à 1200 px avec la règle, 390 px sans. */
/* Le bandeau de consentement Google (Funding Choices) injecte une balise
   <style> contenant « body { margin-bottom: 130px } » pour reserver la place
   de sa banniere. Une fois le consentement donne, la banniere disparait mais
   la marge reste : 130 px de vide sous le pied de page. On l'annule.
   La banniere reste affichable : elle est en position fixe et se pose
   par-dessus la page, elle n'a pas besoin de cette marge pour fonctionner. */
html{background:var(--mag-ground)}
body{background:var(--mag-ground);margin-bottom:0!important}

/* ---------- conteneur magazine ---------- */
/* garde-fous : un enfant de grille ou de flexbox refuse de retrecir sous sa
   largeur intrinseque tant qu'on ne lui donne pas min-width:0. Sans ca, une
   image large ou un titre long fait deborder toute la page.
   ATTENTION : reserve a l'accueil. Applique partout, min-width:0 autorise
   aussi la zone de contenu a se reduire sous la largeur de son contenu, ce qui
   ecrase les colonnes des pages de rubrique. */
.home .site-content .content-area{min-width:0;max-width:100%}
.mag{color:var(--mag-ink);max-width:100%;overflow-x:clip}
.mag-une > *,.mag-grid > *,.mag-rubrique-list > *,.mag-card > *{min-width:0}
.mag-title,.mag-excerpt{overflow-wrap:anywhere}
.mag *,.mag *::before,.mag *::after{box-sizing:border-box}
.mag a{text-decoration:none;color:inherit}
.mag h2,.mag h3{margin:0}

.mag-sec{display:flex;align-items:center;gap:14px;margin:34px 0 16px}
.mag-sec h2{font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.04em;font-size:23px;font-weight:700;line-height:1.2}
.mag-rule{flex:1;height:2px;background:var(--mag-line)}
.mag-more{font-size:13px;color:var(--mag-vert);font-weight:600;white-space:nowrap}
.mag-more:hover{text-decoration:underline}

/* ---------- vignettes ----------
   L'image est posee en absolu dans un cadre au format impose. Sans cela, une
   image de 800x533 reprend sa taille naturelle des que le cadre n'a pas de
   hauteur calculable, et fait exploser la mise en page - surtout sur mobile. */
.mag-thumb{position:relative;display:block;overflow:hidden;background:var(--mag-surface-2);width:100%}
/* !important assume : on lutte contre les regles img du theme et contre les
   dimensions que WordPress et le chargement differe posent sur la balise. */
.mag-thumb .mag-img{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover;margin:0!important;padding:0!important;
}
.mag-img--vide{position:absolute;inset:0;background:linear-gradient(135deg,var(--c),#0b2e1d)}
.mag-img--vide::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 78% 22%, rgba(255,255,255,.18), transparent 46%),
  repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px)}
.mag-badge{position:absolute;left:0;top:12px;z-index:2;background:var(--b);color:#fff;
  font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.07em;font-size:11.5px;
  font-weight:700;padding:4px 10px 4px 12px;border-radius:0 3px 3px 0}

/* ---------- cartes ---------- */
.mag-card{background:var(--mag-surface);border-radius:6px;overflow:hidden;box-shadow:var(--mag-shadow);display:flex;flex-direction:column}
.mag-card .mag-body{padding:13px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.mag-title{font-size:16.5px;line-height:1.28;font-weight:600;text-wrap:balance}
.mag-title a:hover{color:var(--mag-vert)}
.mag-excerpt{margin:0;color:var(--mag-ink-2);font-size:15.5px;max-width:60ch}
.mag-meta{display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--mag-ink-2);margin-top:auto;flex-wrap:wrap}
.mag-cat{font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--b)}
.mag-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex:0 0 3px}

/* la une */
.mag-une{display:grid;grid-template-columns:1.62fr 1fr;gap:22px;align-items:start}
.mag-une-side{display:flex;flex-direction:column;gap:12px}

/* carrousel : toutes les diapositives dans la meme cellule de grille, ce qui
   donne au bloc la hauteur de la plus grande et evite les sauts */
.mag-carousel{position:relative}
.mag-slides{display:grid}
.mag-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s ease}
.mag-slide.est-active{opacity:1;visibility:visible}
.mag-jauges{display:flex;gap:6px;margin-top:10px}
.mag-jauge{flex:1;height:4px;padding:0;border:0;border-radius:2px;background:var(--mag-line);
  cursor:pointer;overflow:hidden;appearance:none}
.mag-jauge:hover{background:#c8d4cb}
.mag-jauge-fill{display:block;height:100%;width:0;background:var(--mag-vert);border-radius:2px}
.mag-jauge.est-active{background:#c8d4cb}
.mag-jauge:focus-visible{outline:2px solid var(--mag-vert);outline-offset:3px}

/* Sur grand ecran, les jauges passent en haut de l'image : sous l'image elles
   tombaient sous la ligne de flottaison et personne ne les voyait.
   Sur mobile elles restent dessous, ou elles fonctionnent bien. */
@media (min-width:1001px){
  .mag-carousel .mag-jauges{
    position:absolute;top:0;left:0;right:0;z-index:3;margin:0;padding:12px 14px 18px;
    background:linear-gradient(to bottom,rgba(4,20,12,.55),rgba(4,20,12,0));
  }
  .mag-carousel .mag-jauge{background:rgba(255,255,255,.32);height:3px}
  .mag-carousel .mag-jauge:hover,
  .mag-carousel .mag-jauge.est-active{background:rgba(255,255,255,.45)}
  .mag-carousel .mag-jauge-fill{background:#fff}
  .mag-carousel .mag-jauge:focus-visible{outline-color:var(--mag-or)}
  /* l'etiquette de rubrique descend pour ne pas passer sous les jauges */
  .mag-carousel .mag-badge{top:38px}
}
.mag-card--une .mag-thumb{aspect-ratio:16/9}
.mag-card--une .mag-title{font-family:var(--mag-cond);font-size:34px;line-height:1.1;font-weight:700;letter-spacing:.005em}
.mag-card--une .mag-body{padding:18px 22px 22px}
/* six fiches doivent tenir en face du carrousel : format compact et titre
   limite a deux lignes pour que la colonne garde une hauteur previsible */
.mag-card--mini{display:grid;grid-template-columns:104px 1fr;align-items:stretch}
.mag-card--mini .mag-thumb{height:100%;min-height:74px;aspect-ratio:auto}
.mag-card--mini .mag-body{padding:9px 12px;gap:5px;justify-content:center}
.mag-card--mini .mag-title{font-size:14.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mag-card--mini .mag-meta{font-size:11px}

/* grille */
.mag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mag-card--grille .mag-thumb{aspect-ratio:16/10}
.mag-card--grille{transition:transform .16s ease, box-shadow .16s ease}
.mag-card--grille:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(11,46,29,.08),0 12px 26px rgba(11,46,29,.1)}

/* ---------- bande resultats ---------- */
.mag-scores{background:var(--mag-vert-deep);border-radius:6px;padding:14px 0 16px;margin-top:30px;color:#fff}
.mag-scores-head{display:flex;align-items:center;gap:10px;padding:0 18px 12px}
.mag-scores-head h2{font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.05em;font-size:16px;font-weight:700}
.mag-scores-head .mag-more{margin-left:auto;color:var(--mag-or)}
.mag-live{display:inline-flex;align-items:center;gap:6px;background:var(--mag-or);color:#20180a;
  font-family:var(--mag-cond);font-size:11px;font-weight:700;letter-spacing:.08em;padding:2px 8px;border-radius:3px;text-transform:uppercase}
.mag-live b{width:6px;height:6px;border-radius:50%;background:#20180a;animation:mag-pulse 1.8s infinite}
@keyframes mag-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.mag-rail{display:flex;gap:12px;overflow-x:auto;padding:0 18px 4px}
.mag-match{flex:0 0 210px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:10px 12px}
.mag-comp{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#9dbcab;font-family:var(--mag-cond);margin-bottom:7px}
.mag-row{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:2px 0;color:#cfe0d6}
.mag-row b{font-variant-numeric:tabular-nums;font-weight:700}
.mag-row.win{color:#fff}
.mag-row.lose{color:#9dbcab}
.mag-st{font-size:10.5px;color:var(--mag-or);margin-top:6px;font-family:var(--mag-cond);letter-spacing:.06em;text-transform:uppercase}

/* ---------- rubriques ---------- */
.mag-rubrique{margin-top:38px;border-top:3px solid var(--b);background:var(--mag-surface);border-radius:0 0 6px 6px;box-shadow:var(--mag-shadow)}
.mag-rubrique-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--mag-line)}
.mag-rubrique-head h2{font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.05em;font-size:20px;color:var(--b)}
.mag-count{font-size:11.5px;color:var(--mag-ink-2)}
.mag-rubrique-head .mag-more{margin-left:auto;color:var(--mag-ink-2)}
.mag-rubrique-list{display:grid;grid-template-columns:repeat(3,1fr)}
.mag-card--liste{flex-direction:row;gap:13px;padding:16px 18px;border-right:1px solid var(--mag-line);border-radius:0;box-shadow:none;background:transparent}
.mag-rubrique-list .mag-card--liste:last-child{border-right:0}
.mag-card--liste .mag-thumb{flex:0 0 92px;aspect-ratio:1;border-radius:4px}
.mag-card--liste .mag-body{padding:0}
.mag-card--liste .mag-title{font-size:15px}

/* ---------- page article (gabarit A) ---------- */
.mag-article{padding-top:4px}

/* barre de progression de lecture, collee sous la barre de navigation */
.mag-progression{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:transparent;pointer-events:none}
.mag-progression span{display:block;height:100%;width:0;background:var(--mag-or);
  transition:width .08s linear}

/* Tous les blocs de l'article partagent la meme largeur et le meme bord
   gauche : etiquette, titre, image et colonnes. Sans cela chaque element
   avait sa propre largeur et l'ensemble donnait un escalier. */
.mag-article{--mag-largeur:1094px}
.mag-article-head{max-width:var(--mag-largeur);margin:0 auto;padding:0}
/* etiquette de rubrique : blanche par defaut, noire au survol.
   Les !important sont assumes : le theme impose sa couleur a tout <a>. */
.mag-cat-pastille,
.mag-cat-pastille:visited{display:inline-block;font-family:var(--mag-cond);text-transform:uppercase;
  letter-spacing:.07em;font-weight:700;font-size:12px;color:#fff!important;background:var(--b);
  padding:5px 12px;border-radius:3px;margin-top:12px;text-decoration:none;border-bottom:0}
.mag-cat-pastille:hover,
.mag-cat-pastille:focus{color:#0d1512!important;filter:brightness(1.1)}
.mag-cat-pastille:focus-visible{outline:3px solid var(--mag-or);outline-offset:2px}
.mag-article h1{font-family:var(--mag-cond);font-size:44px;line-height:1.06;margin:14px 0;
  font-weight:700;text-wrap:balance;letter-spacing:.004em;max-width:900px}
.mag-chapo{font-size:19px;line-height:1.5;color:var(--mag-ink-2);margin:0 0 20px;max-width:760px}
/* signature compacte, en tete du corps de texte */
.mag-byline{display:flex;align-items:center;gap:11px;padding:0 0 18px;margin-bottom:22px;
  font-size:13.5px;color:var(--mag-ink-2);border-bottom:1px solid var(--mag-line)}
.mag-byline b{color:var(--mag-ink);font-weight:600;margin-right:8px}
.mag-byline-date{white-space:normal}
.mag-hero + .mag-article-colonnes{margin-top:22px}
.mag-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--mag-vert),var(--mag-vert-mid));color:#fff;
  font-family:var(--mag-cond);font-size:16px;font-weight:700;text-transform:uppercase}
.mag-hero{max-width:var(--mag-largeur);margin:22px auto 0;padding:0}
.mag-hero img{width:100%;height:auto;border-radius:6px;display:block}
.mag-legende{font-size:12.5px;color:var(--mag-ink-2);padding:8px 2px 0;margin:0}

/* Le theme reserve 70 % de largeur au contenu, le reste etant destine a une
   colonne laterale que ces pages n'utilisent pas. On reprend toute la largeur :
   c'est notre propre rail qui occupe la droite. */
.single-post .site-content .content-area,
.archive .site-content .content-area{width:100%}

/* deux colonnes : le texte dans une boite claire, un rail a droite qui suit
   la lecture. C'est la boite qui donne au texte son assise sur le fond gris. */
.mag-article-colonnes{display:grid;grid-template-columns:minmax(0,760px) 300px;gap:34px;
  max-width:var(--mag-largeur);margin:26px auto 0;align-items:start}
.mag-article-colonnes .mag-corps{max-width:none;margin:0;background:var(--mag-surface);
  border-radius:8px;box-shadow:var(--mag-shadow);padding:36px 44px 30px}
.mag-article-colonnes .mag-rail{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px}
.mag-sommaire,.mag-encadre{background:var(--mag-surface);border-radius:8px;
  box-shadow:var(--mag-shadow);padding:18px 20px}
.mag-sommaire h2,.mag-encadre h2{font-family:var(--mag-cond);text-transform:uppercase;
  letter-spacing:.07em;font-size:12px;color:var(--mag-ink-2);margin:0 0 12px;font-weight:700}
.mag-sommaire ol{list-style:none;margin:0;padding:0;counter-reset:som}
.mag-sommaire li{counter-increment:som;margin-bottom:9px;display:flex;gap:9px;line-height:1.35}
.mag-sommaire li::before{content:counter(som);font-family:var(--mag-cond);font-size:12px;
  font-weight:700;color:var(--mag-vert);background:var(--mag-surface-2);border-radius:3px;
  padding:1px 6px;height:fit-content;margin-top:2px}
.mag-sommaire a{font-size:14.5px;color:var(--mag-ink);border:0}
.mag-sommaire a:hover{color:var(--mag-vert);text-decoration:underline}
.mag-sommaire li.est-active a{color:var(--mag-vert);font-weight:600}
.mag-encadre p{margin:0 0 14px;font-size:14.5px;color:var(--mag-ink-2);line-height:1.55}
.mag-btn--large{display:block;text-align:center}

.mag-corps{max-width:680px;margin:28px auto 0;font-size:18px;line-height:1.72}
.mag-corps > p{margin:0 0 22px}
.mag-corps h2{font-family:var(--mag-cond);font-size:27px;line-height:1.2;margin:34px 0 12px;font-weight:700}
.mag-corps h2 strong{font-weight:inherit}
.mag-corps h3{font-family:var(--mag-cond);font-size:21px;margin:28px 0 10px}
.mag-corps a{color:var(--mag-vert);font-weight:600;border-bottom:1.5px solid var(--mag-vert)}
.mag-corps img{height:auto;border-radius:6px}
.mag-corps ul,.mag-corps ol{margin:0 0 22px;padding-left:24px}
.mag-corps li{margin-bottom:8px}
.mag-corps li::marker{color:var(--mag-vert)}
.mag-corps blockquote{border-left:4px solid var(--mag-or);background:var(--mag-surface);
  padding:16px 20px;margin:26px 0;border-radius:0 5px 5px 0;color:var(--mag-ink-2);font-style:normal}
.mag-corps blockquote p:last-child{margin-bottom:0}
.mag-corps table{width:100%;border-collapse:collapse;font-size:15px;background:var(--mag-surface);
  border-radius:6px;overflow:hidden;box-shadow:var(--mag-shadow);margin:24px 0;display:block;overflow-x:auto}
.mag-corps th{font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.05em;font-size:12px;
  text-align:left;padding:11px 14px;background:var(--mag-surface-2);color:var(--mag-ink-2)}
.mag-corps td{padding:11px 14px;border-top:1px solid var(--mag-line)}

.mag-cta{display:flex;gap:16px;align-items:center;background:var(--mag-surface);
  border:1px solid var(--mag-line);border-left:4px solid var(--mag-vert);
  border-radius:0 6px 6px 0;padding:16px 20px;margin:34px 0 10px}
.mag-cta div{flex:1}
.mag-cta h2{font-family:var(--mag-cond);font-size:17px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px}
.mag-cta p{margin:0;font-size:14px;color:var(--mag-ink-2)}
/* le bouton est aussi un <a> : sans cela il herite de la couleur des liens du
   corps de texte, et on obtient du vert sur vert. */
.mag-btn,
.mag-corps .mag-btn,
.mag-btn:visited{background:var(--mag-vert);color:#fff!important;font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:4px;white-space:nowrap;display:inline-block;
  text-decoration:none;border-bottom:0}
.mag-btn:hover,
.mag-corps .mag-btn:hover{background:var(--mag-vert-mid);color:#fff!important;text-decoration:none}
.mag-btn:focus-visible{outline:3px solid var(--mag-or);outline-offset:2px}

/* la signature de fin est fournie par Simple Author Box : on l'aligne juste */
.saboxplugin-wrap{max-width:680px;margin:30px auto 0!important;border-radius:6px}

/* ---------- ancien habillage d'article (conserve pour les pages) ---------- */
.single-post .entry-header{margin-bottom:0}
.single-post .entry-title{font-family:var(--mag-cond);font-size:44px;line-height:1.07;letter-spacing:.004em;text-wrap:balance;margin-bottom:14px}
.single-post .entry-content{font-size:18px;line-height:1.72;max-width:680px}
.single-post .entry-content > p,
.single-post .entry-content > h2,
.single-post .entry-content > h3,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > blockquote{max-width:680px}
.single-post .entry-content h2{font-family:var(--mag-cond);font-size:27px;line-height:1.2;margin:34px 0 12px}
.single-post .entry-content a{color:var(--mag-vert);font-weight:600;border-bottom:1.5px solid var(--mag-vert)}
.single-post .entry-content blockquote{border-left:4px solid var(--mag-or);background:var(--mag-surface);
  padding:16px 20px;margin:26px 0;border-radius:0 5px 5px 0;font-style:normal;color:var(--mag-ink-2)}
.single-post .entry-meta{font-size:13.5px;color:var(--mag-ink-2);padding:14px 0;border-top:1px solid var(--mag-line);border-bottom:1px solid var(--mag-line)}
.single-post .featured-image img,.single-post .post-image img{border-radius:6px}

/* ---------- pied de page ---------- */
.mag-footer{background:var(--mag-vert-deep);color:#a9c6b6;padding:38px 0 30px;font-size:14px}
.mag-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.mag-footer-col h2{font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.06em;
  font-size:13.5px;color:#fff;margin:0 0 12px}
.mag-footer-col p{margin:0;line-height:1.65;max-width:38ch}
.mag-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mag-footer a{color:#cfe6d8;text-decoration:none}
.mag-footer a:hover{color:#fff;text-decoration:underline}
.mag-footer-nb{display:inline-block;margin-left:6px;font-size:11px;color:#7fa08e;
  font-variant-numeric:tabular-nums}

.site-footer,
.site-footer .site-info,
.site-footer .footer-bar{background:var(--mag-vert-deep);color:#a9c6b6}
.site-footer .site-info{padding:0}
.site-footer .inside-site-info{padding:14px 30px;font-size:13px;border-top:1px solid rgba(255,255,255,.12)}
.site-footer a{color:#cfe6d8;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .widget{margin-bottom:0}
.site-footer .footer-bar .widget_text p{margin:0}

/* ---------- pages de rubrique ---------- */
.mag--archive{padding-top:28px}
.mag-archive-head{border-top:3px solid var(--b);background:var(--mag-surface);border-radius:0 0 6px 6px;
  box-shadow:var(--mag-shadow);padding:20px 24px;margin-bottom:26px;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mag-archive-head h1{font-family:var(--mag-cond);text-transform:uppercase;letter-spacing:.04em;
  font-size:28px;margin:0;color:var(--b);font-weight:700;line-height:1.1}
.mag-archive-desc{flex:1 1 100%;color:var(--mag-ink-2);font-size:15px;margin-top:4px;max-width:70ch}
.mag-archive-desc p{margin:0}
.mag-pagination{display:flex;gap:8px;justify-content:center;margin:34px 0 10px;flex-wrap:wrap}
.mag-pagination .page-numbers{display:inline-block;padding:8px 14px;border-radius:4px;
  background:var(--mag-surface);box-shadow:var(--mag-shadow);font-size:14.5px;
  font-variant-numeric:tabular-nums;color:var(--mag-ink)}
.mag-pagination .page-numbers:hover{color:var(--mag-vert)}
.mag-pagination .page-numbers.current{background:var(--mag-vert);color:#fff;font-weight:600}
.mag-vide{padding:30px 0;color:var(--mag-ink-2)}
/* dans une rubrique, rappeler la rubrique sur chaque carte n'apprend rien */
.mag--archive .mag-badge,
.mag--archive .mag-cat,
.mag--archive .mag-cat + .mag-dot{display:none}

/* la mise en page en colonnes du theme ne sert plus sur ces pages */
.archive .site-main .generate-columns-container{display:block}

@media (prefers-reduced-motion: reduce){.mag *{animation:none!important;transition:none!important}}

@media (max-width:1000px){
  .mag-une{grid-template-columns:1fr}
  .mag-grid{grid-template-columns:repeat(2,1fr)}
  .mag-rubrique-list{grid-template-columns:1fr}
  .mag-card--liste{border-right:0;border-bottom:1px solid var(--mag-line)}
  .single-post .entry-title{font-size:32px}
  /* le gabarit A pose un <h1> sans classe : sans cette regle il restait a 44px */
  .mag-article h1{font-size:34px}
  .mag-footer-grid{grid-template-columns:1fr 1fr;gap:26px}
  /* le rail disparait : le renvoi vers les resultats reste en fin d'article */
  .mag-article-colonnes{grid-template-columns:1fr;gap:0}
  .mag-article-colonnes .mag-rail{display:none}
  .mag-article-colonnes .mag-corps{padding:26px 22px 20px;border-radius:6px}
}

/* Sur mobile, le conteneur du theme ne met aucune marge laterale : sans ces
   regles le contenu vient coller aux deux bords de l'ecran. */
@media (max-width:768px){
  .mag{padding-left:16px;padding-right:16px}
  .mag-footer .grid-container{padding-left:16px;padding-right:16px}
  .mag-sec{margin:26px 0 12px}
  .mag-sec h2{font-size:20px}
  .mag-scores{margin-top:24px;padding:12px 0 14px}
  .mag-scores-head{padding:0 14px 10px}
  .mag-rail{padding:0 14px 4px}
  .mag-rubrique{margin-top:26px}
  .mag-une{gap:16px}
  .mag-une-side{gap:10px}
  .mag-promo-inner{gap:9px;padding:9px 16px}
  .mag-promo-cat{display:none}
  .mag-promo-titre{flex:1 1 100%;order:3;font-size:14.5px}
  .mag-promo-btn{order:4;margin-left:auto}
}
@media (max-width:600px){
  .mag-article h1{font-size:28px;margin:10px 0}
  .single-post .entry-title{font-size:28px}
  .mag-cat-pastille{margin-top:8px}
  .mag-grid{grid-template-columns:1fr}
  .mag-card--une .mag-title{font-size:24px}
  /* cadres au format impose : plus aucune image ne peut prendre sa taille naturelle */
  .mag-card--une .mag-thumb{aspect-ratio:16/9}
  .mag-card--grille .mag-thumb{aspect-ratio:16/10}
  .mag-card--mini{grid-template-columns:96px 1fr}
  /* hauteur garantie par le format, pas heritee du texte a cote */
  .mag-card--mini .mag-thumb{aspect-ratio:4/3;height:auto;min-height:0}
  .mag-card--liste .mag-thumb{flex:0 0 84px;aspect-ratio:1}
  .mag-card--liste{padding:14px 16px}
  .mag-footer-grid{grid-template-columns:1fr;gap:22px}
  .mag-footer{padding:28px 0 22px}
  .site-footer .inside-site-info{text-align:center}
}