/*
Theme Name: Marque Employeur
Theme URI: https://marqueemployeur.net
Author: Guillaume Coudert
Author URI: https://www.marqueemployeur.com
Description: Thème éditorial premium pour marqueemployeur.net. Colonne de lecture de 720 px avec rail collant, Oswald et Figtree auto-hébergées sous licence SIL OFL, sommaire ancré, données structurées, newsletter native reliée à Brevo, compteur de lectures, partage étendu et fenêtre de sortie. Aucun script tiers.
Version: 2.6.2
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marque-employeur
Tags: blog, editorial, accessibility-ready
*/

/* =====================================================================
   0. POLICES
   Auto-hébergées. Les fichiers OFL.txt doivent rester dans les dossiers :
   servir une webfont est juridiquement une redistribution, et la SIL OFL
   exige que son texte accompagne toute redistribution.
   ===================================================================== */

@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/oswald/oswald-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/oswald/oswald-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/oswald/oswald-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/oswald/oswald-latin-700-normal.woff2') format('woff2')}

@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/figtree/figtree-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/figtree/figtree-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/figtree/figtree-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:italic;font-weight:600;font-display:swap;
  src:url('assets/fonts/figtree/figtree-latin-600-italic.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/figtree/figtree-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:900;font-display:swap;
  src:url('assets/fonts/figtree/figtree-latin-900-normal.woff2') format('woff2')}

/* =====================================================================
   1. JETONS
   La paire chaude jaune vers rose est la dominante du .net. Le dégradé
   froid violet vers bleu appartient à marqueemployeur.com : le réutiliser
   ici en dominante ferait confondre les deux sites.
   Contrastes WCAG mesurés : encre 16,9:1 sur blanc, gris secondaire
   6,7:1, gris tertiaire 5,4:1 sur blanc et 4,9:1 sur le gris de fond,
   violet des liens 5,08:1. Tout passe le niveau AA, y compris les
   mentions en petit corps sur les fonds gris.
   Les quatre autres couleurs de la charte sont des couleurs d'aplat,
   pas de texte : jamais de mot posé dessus en petit corps.
   ===================================================================== */

:root{
  --me-titre:'Oswald','Arial Narrow',Arial,sans-serif;
  --me-texte:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --me-encre:#072026;
  --me-encre-70:#4a5f65;
  --me-encre-45:#5b6d72;
  --me-fond:#ffffff;
  --me-fond-doux:#f4f4f4;
  --me-trait:#e4e8e9;

  --me-jaune:#FFB600;
  --me-rose:#FF317B;
  --me-orange:#FF4824;
  --me-violet:#AC39C4;
  --me-bleu:#00D3D8;
  --me-vert:#00DD69;

  --me-lien:#AC39C4;
  /* Le rose de la charte est une couleur d'aplat : 3,5:1 sur blanc, il
     échoue en texte. Cette version assombrie garde la même famille et
     passe le niveau AA (6,0:1 sur blanc, 5,5:1 sur le gris de fond).
     Règle : #FF317B pour les aplats, traits et puces, celle-ci pour les
     mots. */
  --me-rose-texte:#C21050;
  --me-degrade:linear-gradient(135deg,#FFB600,#FF317B);

  --me-lecture:720px;
  --me-large:1180px;
  --me-rayon:4px;

  --me-pas-1:.5rem;
  --me-pas-2:1rem;
  --me-pas-3:1.5rem;
  --me-pas-4:2.5rem;
  --me-pas-5:4rem;
  --me-pas-6:6rem;
}

/* =====================================================================
   2. SOCLE
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
/* Un élément porteur de l'attribut hidden doit rester caché même quand une
   règle plus loin lui donne un display. Sans ça, la fenêtre de sortie et le
   sommaire s'affichent en permanence : mesuré, pas supposé. */
[hidden]{display:none!important}
/* Le fond du canvas, c'est ce que Safari iOS montre quand le doigt tire
   au-delà du dernier pixel de la page. Sans couleur ici, le canvas
   hérite du blanc du corps et une bande claire apparaît sous le pied de
   page, qui est sombre. On lui donne l'encre de la charte. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--me-encre)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--me-fond);
  color:var(--me-encre);
  font-family:var(--me-texte);
  font-size:19px;
  line-height:1.7;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img,svg,video,iframe{max-width:100%;height:auto}
img{display:block}

a{color:var(--me-lien);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}

:focus-visible{outline:3px solid var(--me-violet);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{
  font-family:var(--me-titre);
  font-weight:700;
  line-height:1.08;
  letter-spacing:.005em;
  text-wrap:balance;
  margin:0 0 var(--me-pas-2);
}
h1{font-size:clamp(2.15rem,1.45rem + 2.6vw,3.5rem)}
h2{font-size:clamp(1.6rem,1.25rem + 1.4vw,2.25rem)}
h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem)}
h4{font-size:1.15rem}

p{margin:0 0 var(--me-pas-3)}
ul,ol{margin:0 0 var(--me-pas-3);padding-left:1.35em}
li{margin-bottom:.45em}
li::marker{color:var(--me-rose)}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--me-trait);margin:var(--me-pas-4) 0}

.me-visuellement-cache{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.me-saut{
  position:absolute;left:var(--me-pas-2);top:-4rem;z-index:999;
  background:var(--me-encre);color:#fff;padding:.6rem 1rem;
  border-radius:var(--me-rayon);text-decoration:none;transition:top .15s;
}
.me-saut:focus{top:var(--me-pas-2)}

.me-conteneur{width:min(100% - 2.5rem,var(--me-large));margin-inline:auto}
.me-colonne{width:min(100% - 2.5rem,var(--me-lecture));margin-inline:auto}

/* =====================================================================
   3. EN-TÊTE
   ===================================================================== */

.me-entete{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--me-trait);
}
.me-entete__barre{
  display:flex;align-items:center;gap:var(--me-pas-3);
  min-height:74px;
}
.me-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.me-logo img,.me-logo svg{width:190px;height:auto}
.me-logo__texte{
  font-family:var(--me-titre);font-size:1.35rem;line-height:1;
  color:var(--me-encre);text-decoration:none;text-transform:uppercase;
}

.me-nav{margin-left:auto}
.me-nav ul{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0;align-items:center}
.me-nav li{margin:0}
/* Les rubriques sont nommées en voix candidat, donc plus longues que des
   mots de jargon. Les intitulés du menu sont raccourcis côté WordPress
   (« Les coulisses » plutôt que « Les coulisses des entreprises ») et
   tiennent chacun sur une seule ligne : un menu qui se casse en trois
   lignes ne se lit plus. */
.me-nav a{
  font-family:var(--me-titre);font-weight:500;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;
  color:var(--me-encre);text-decoration:none;
  padding:.35rem 0;position:relative;display:block;
}
.me-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--me-degrade);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.me-nav a:hover::after,
.me-nav .current-menu-item > a::after,
.me-nav .current-menu-parent > a::after{transform:scaleX(1)}

.me-entete__actions{display:flex;align-items:center;gap:var(--me-pas-2)}

.me-bouton{
  display:inline-block;font-family:var(--me-titre);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;
  padding:.68rem 1.25rem;border-radius:var(--me-rayon);
  text-decoration:none;border:0;cursor:pointer;line-height:1.2;
  background:var(--me-encre);color:#fff;
  transition:transform .15s ease,box-shadow .15s ease;
}
.me-bouton:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(7,32,38,.18)}
.me-bouton--chaud{background:var(--me-degrade);color:var(--me-encre)}
.me-bouton--vide{background:transparent;color:var(--me-encre);box-shadow:inset 0 0 0 2px var(--me-encre)}

.me-burger{
  display:none;background:none;border:0;padding:.5rem;cursor:pointer;
  color:var(--me-encre);
}
.me-burger svg{width:26px;height:26px}

@media (max-width:1240px){
  .me-nav ul{gap:1.05rem}
  .me-nav a{font-size:.88rem;letter-spacing:.02em}
  .me-logo img,.me-logo svg{width:168px}
  .me-entete__actions .me-bouton{font-size:.85rem;padding:.6rem .9rem}
}

@media (max-width:900px){
  .me-burger{display:block;margin-left:auto}
  .me-nav{
    position:fixed;inset:74px 0 auto 0;background:#fff;margin:0;
    border-bottom:1px solid var(--me-trait);
    padding:var(--me-pas-3) 1.25rem var(--me-pas-4);
    display:none;max-height:calc(100vh - 74px);overflow-y:auto;
  }
  .me-nav[data-ouvert="1"]{display:block}
  .me-nav ul{flex-direction:column;gap:0}
  .me-nav a{font-size:1.3rem;padding:.7rem 0;border-bottom:1px solid var(--me-trait);white-space:normal}
  .me-nav a::after{display:none}
  .me-entete__actions .me-bouton{display:none}
}

/* =====================================================================
   4. FIL D'ARIANE
   ===================================================================== */

.me-fil{margin:var(--me-pas-3) 0 var(--me-pas-2);font-size:.85rem}
.me-fil ol{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0}
.me-fil li{margin:0;color:var(--me-encre-70)}
.me-fil li + li::before{content:"›";margin-right:.45rem;color:var(--me-encre-45)}
.me-fil a{color:var(--me-encre-70);text-decoration:none}
.me-fil a:hover{color:var(--me-lien);text-decoration:underline}

/* =====================================================================
   5. ARTICLE
   ===================================================================== */

.me-article{padding-bottom:var(--me-pas-5)}

.me-rubrique{
  display:inline-block;font-family:var(--me-titre);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
  padding:.3rem .7rem;border-radius:2px;text-decoration:none;
  background:var(--me-jaune);color:var(--me-encre);
  margin-bottom:var(--me-pas-2);
}
.me-rubrique:hover{background:var(--me-rose);color:#fff}

.me-article__titre{margin-bottom:var(--me-pas-3)}

/* Le chapô : promesse de l'article en une phrase. Il vient de l'extrait,
   donc il sert aussi de meta description et de résumé en flux RSS. */
.me-chapo{
  font-size:1.28rem;line-height:1.55;font-weight:400;
  color:var(--me-encre-70);
  margin:0 0 var(--me-pas-3);
  border-left:4px solid;border-image:var(--me-degrade) 1;
  padding-left:1.1rem;
}

.me-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.15rem;
  font-size:.9rem;color:var(--me-encre-70);
  padding:var(--me-pas-2) 0;
  border-top:1px solid var(--me-trait);
  border-bottom:1px solid var(--me-trait);
  margin-bottom:var(--me-pas-4);
}
.me-meta > time,.me-meta > span{white-space:nowrap}
.me-meta__maj{
  font-weight:600;color:var(--me-encre);
  background:#eafaf1;padding:.15rem .5rem;border-radius:2px;
}
.me-meta__auteur{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--me-encre)}
.me-meta__auteur img{width:30px;height:30px;border-radius:50%}

.me-hero{margin:0 0 var(--me-pas-4)}
.me-hero img{width:100%;border-radius:var(--me-rayon)}
.me-hero figcaption,
.me-contenu figcaption{
  font-size:.82rem;color:var(--me-encre-45);
  margin-top:.5rem;line-height:1.45;
}

/* --- Corps de texte ------------------------------------------------- */

.me-contenu{font-size:19px;line-height:1.72}
.me-contenu > *{margin-inline:auto}
.me-contenu h2{margin-top:var(--me-pas-5);scroll-margin-top:110px}
.me-contenu h3{margin-top:var(--me-pas-4);scroll-margin-top:110px}
.me-contenu h2 + h3{margin-top:var(--me-pas-3)}
.me-contenu a{font-weight:600}

.me-contenu blockquote{
  margin:var(--me-pas-4) 0;padding:0 0 0 1.5rem;
  border-left:4px solid var(--me-rose);
  font-size:1.22rem;line-height:1.55;font-style:italic;
}
.me-contenu blockquote cite{
  display:block;font-style:normal;font-size:.9rem;font-weight:600;
  color:var(--me-encre-70);margin-top:.6rem;
}
.me-contenu blockquote p:last-child{margin-bottom:0}

.me-contenu img{border-radius:var(--me-rayon)}
.me-contenu figure{margin:var(--me-pas-4) 0}

.me-contenu table{
  width:100%;border-collapse:collapse;font-size:.95rem;
  margin:var(--me-pas-4) 0;
}
.me-contenu th,.me-contenu td{
  text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--me-trait);
}
.me-contenu th{
  font-family:var(--me-titre);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:.85rem;background:var(--me-fond-doux);
}

.me-contenu code{
  font-size:.88em;background:var(--me-fond-doux);
  padding:.12em .35em;border-radius:3px;
}

/* Débordement maîtrisé : une image ou un tableau peut sortir de la
   colonne de lecture sans casser la grille. */
.me-contenu .alignwide,
.me-contenu .me-large{
  width:min(100vw - 2.5rem,var(--me-large));
  max-width:none;
}

/* --- Encadrés typés -------------------------------------------------- */

.me-encadre{
  margin:var(--me-pas-4) 0;padding:1.4rem 1.5rem;
  border-radius:var(--me-rayon);
  background:var(--me-fond-doux);
  border-left:5px solid var(--me-encre);
}
.me-encadre__titre{
  font-family:var(--me-titre);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:.85rem;margin:0 0 .6rem;
}
.me-encadre__corps > p:last-child{margin-bottom:0}
.me-encadre cite{
  display:block;font-style:normal;font-size:.8rem;
  color:var(--me-encre-70);margin-top:.7rem;
}
.me-encadre--chiffre{
  background:#fff7e6;border-left-color:var(--me-jaune);
}
.me-encadre--chiffre .me-encadre__corps{
  font-family:var(--me-titre);font-size:1.5rem;line-height:1.25;
}
.me-encadre--recruteur{
  background:#fdeef4;border-left-color:var(--me-rose);
}
/* Encadrés issus de la migration. Les textes portent déjà leur amorce
   (« À retenir : », « Astuce : », « Cas pratique. ») : on ne rajoute donc
   pas de titre, ce serait redondant. */
.me-encadre--cas{
  background:#f6f0fb;border-left-color:var(--me-violet);
}

/* Encart agence : l'appel B2B présent dans 200 articles enrichis. C'est la
   seule vraie conversion du site, il mérite d'être identifiable sans crier. */
/* Encart communauté : l'invitation à suivre le compte, adressée au lecteur.
   Les encarts commerciaux destinés aux RH ont été retirés du corps des
   articles : le lecteur du .net est un candidat. */
.me-encart-agence,
.me-encart-communaute{
  margin:var(--me-pas-4) 0;padding:1.4rem 1.5rem;
  border:1px solid var(--me-trait);border-radius:var(--me-rayon);
  background:#fff;position:relative;overflow:hidden;
  font-size:.98rem;
}
.me-encart-agence::before,
.me-encart-communaute::before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--me-degrade);
}
.me-encart-agence p:last-child,
.me-encart-communaute p:last-child{margin-bottom:0}

.me-cta-bloc{text-align:center;margin:var(--me-pas-4) 0}

/* Vidéos et tableaux importés : contenus larges dans une colonne étroite. */
.me-video{
  position:relative;padding-top:56.25%;margin:var(--me-pas-4) 0;
  border-radius:var(--me-rayon);overflow:hidden;background:var(--me-fond-doux);
}
.me-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.me-tableau{overflow-x:auto;margin:var(--me-pas-4) 0;-webkit-overflow-scrolling:touch}
.me-tableau table{margin:0;min-width:34rem}
.me-legende{font-size:.84rem;color:var(--me-encre-45);margin-top:-1rem}

/* --- Sommaire ancré --------------------------------------------------- */

.me-sommaire{
  margin:0 0 var(--me-pas-4);
  border:1px solid var(--me-trait);border-radius:var(--me-rayon);
  background:#fff;
}
.me-sommaire__titre{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;background:none;border:0;cursor:pointer;
  font-family:var(--me-titre);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:.9rem;color:var(--me-encre);
  padding:1rem 1.2rem;text-align:left;
}
.me-sommaire__titre svg{width:16px;height:16px;flex:0 0 auto;transition:transform .2s}
.me-sommaire__titre[aria-expanded="false"] svg{transform:rotate(-90deg)}
.me-sommaire ol{
  list-style:none;margin:0;padding:0 1.2rem 1.1rem;
  counter-reset:me-som;font-size:.98rem;
}
.me-sommaire li{margin:0}
.me-sommaire > ol > li{counter-increment:me-som}
.me-sommaire > ol > li > a::before{
  content:counter(me-som) ".";color:var(--me-rose);font-weight:700;
  margin-right:.5rem;
}
.me-sommaire a{
  display:block;padding:.32rem 0;color:var(--me-encre);
  text-decoration:none;border-left:2px solid transparent;
}
.me-sommaire a:hover{color:var(--me-lien)}
.me-sommaire a[aria-current="true"]{color:var(--me-lien);font-weight:600}
.me-sommaire ol ol{padding:0 0 0 1.6rem;font-size:.92rem}
.me-sommaire ol ol a{color:var(--me-encre-70)}

/* --- Progression de lecture ------------------------------------------ */

.me-progression{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:var(--me-degrade);transition:width .08s linear;
}

/* --- Partage ---------------------------------------------------------- */

/* Le partage est décrit une seule fois, en section 14. */

/* --- Bloc auteur ------------------------------------------------------ */

.me-auteur{
  display:flex;gap:var(--me-pas-3);align-items:flex-start;
  margin:var(--me-pas-5) 0 0;padding:var(--me-pas-3);
  background:var(--me-fond-doux);border-radius:var(--me-rayon);
}
.me-auteur__photo{
  width:88px;height:88px;border-radius:50%;flex:0 0 auto;object-fit:cover;
}
.me-auteur__nom{
  font-family:var(--me-titre);font-size:1.25rem;font-weight:700;
  margin:0 0 .15rem;
}
.me-auteur__role{
  font-size:.88rem;color:var(--me-encre-70);margin:0 0 .7rem;
  text-transform:uppercase;letter-spacing:.05em;font-family:var(--me-titre);
}
.me-auteur p{font-size:.98rem;margin-bottom:.8rem}
.me-auteur p:last-child{margin-bottom:0}

@media (max-width:560px){
  .me-auteur{flex-direction:column;gap:var(--me-pas-2)}
  .me-auteur__photo{width:72px;height:72px}
  .me-logo img,.me-logo svg{width:158px}
  .me-partage{gap:.45rem}
}

/* --- FAQ ---------------------------------------------------------------
   Le thème ne réaffiche pas la FAQ : quand un article en contient une,
   elle est déjà dans le corps du texte, et me_extraire_faq() ne sert
   qu'à produire le balisage FAQPage. Ces règles habillent donc les blocs
   « Détails » natifs de l'éditeur, où qu'ils se trouvent. */

.me-contenu details,
.me-faq details{
  border-bottom:1px solid var(--me-trait);padding:.9rem 0;
}
.me-contenu summary,
.me-faq summary{
  cursor:pointer;font-family:var(--me-titre);font-weight:600;
  font-size:1.1rem;list-style:none;
}
.me-contenu summary::-webkit-details-marker,
.me-faq summary::-webkit-details-marker{display:none}
.me-contenu summary::before,
.me-faq summary::before{content:"+ ";color:var(--me-rose);font-weight:700}
.me-contenu details[open] summary::before,
.me-faq details[open] summary::before{content:"– "}

/* =====================================================================
   6. LISTES D'ARTICLES
   ===================================================================== */

.me-grille{
  display:grid;gap:var(--me-pas-4);
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
}

.me-carte{display:flex;flex-direction:column;height:100%}
.me-carte__visuel{
  display:block;margin-bottom:var(--me-pas-2);
  border-radius:var(--me-rayon);overflow:hidden;background:var(--me-fond-doux);
  aspect-ratio:16/9;
}
.me-carte__visuel img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;
}
.me-carte:hover .me-carte__visuel img{transform:scale(1.035)}
.me-carte__rubrique{
  font-family:var(--me-titre);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.75rem;color:var(--me-rose-texte);
  text-decoration:none;margin-bottom:.35rem;display:inline-block;
}
.me-carte__titre{
  font-size:1.3rem;line-height:1.15;margin:0 0 .5rem;
}
.me-carte__titre a{color:var(--me-encre);text-decoration:none}
.me-carte__titre a:hover{text-decoration:underline;text-decoration-color:var(--me-rose)}
.me-carte__extrait{
  font-size:.95rem;color:var(--me-encre-70);margin:0 0 .7rem;
}
.me-carte__meta{
  font-size:.8rem;color:var(--me-encre-45);margin-top:auto;
  display:flex;gap:.5rem;flex-wrap:wrap;
}

/* La une : premier article de la page d'accueil, sur deux colonnes. */
.me-une{
  display:grid;gap:var(--me-pas-4);align-items:center;
  grid-template-columns:1.15fr 1fr;
  padding:var(--me-pas-5) 0 var(--me-pas-4);
}
.me-une--sans-visuel{grid-template-columns:1fr;max-width:56rem}
.me-une__visuel img{width:100%;border-radius:var(--me-rayon)}
.me-une__titre{font-size:clamp(1.9rem,1.2rem + 2.2vw,3rem);margin-bottom:var(--me-pas-2)}
.me-une__titre a{color:var(--me-encre);text-decoration:none}
.me-une__titre a:hover{text-decoration:underline;text-decoration-color:var(--me-rose)}
.me-une__extrait{font-size:1.1rem;color:var(--me-encre-70)}
@media (max-width:820px){
  .me-une{grid-template-columns:1fr;padding-top:var(--me-pas-4)}
}

.me-section{padding:var(--me-pas-5) 0}
.me-section--doux{background:var(--me-fond-doux)}
.me-section__entete{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--me-pas-3);margin-bottom:var(--me-pas-4);
  padding-bottom:var(--me-pas-2);border-bottom:3px solid var(--me-encre);
}
.me-section__titre{margin:0;font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem);text-transform:uppercase}
.me-section__lien{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.05em;
  font-size:.9rem;font-weight:600;white-space:nowrap;
}

/* Les hubs thématiques : six portes d'entrée éditoriales. */

/* =====================================================================
   7. PAGINATION, RECHERCHE, 404
   ===================================================================== */

.me-pagination{
  display:flex;justify-content:center;align-items:center;gap:.35rem;flex-wrap:wrap;
  margin:var(--me-pas-5) 0 var(--me-pas-6);
}
.me-pagination .page-numbers{
  display:grid;place-items:center;min-width:2.6rem;height:2.6rem;padding:0 .7rem;
  border:1px solid var(--me-trait);border-radius:var(--me-rayon);
  color:var(--me-encre);text-decoration:none;font-weight:600;font-size:.95rem;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.me-pagination .page-numbers:hover{border-color:var(--me-encre);background:var(--me-fond-doux)}
.me-pagination .current{background:var(--me-encre);color:#fff;border-color:var(--me-encre)}
.me-pagination .dots{border-color:transparent;min-width:1.6rem;padding:0;color:var(--me-encre-45)}
.me-pagination .dots:hover{background:none}
.me-pagination .prev,
.me-pagination .next{font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.05em;font-size:.85rem}

.me-recherche{display:flex;gap:.5rem;max-width:520px}
.me-recherche input[type="search"]{
  flex:1;font:inherit;font-size:1rem;padding:.7rem .9rem;
  border:1px solid var(--me-trait);border-radius:var(--me-rayon);
  background:#fff;color:var(--me-encre);
}
.me-recherche input[type="search"]:focus{border-color:var(--me-violet)}

.me-vide{padding:var(--me-pas-6) 0;text-align:center}
.me-vide p{color:var(--me-encre-70);max-width:44ch;margin-inline:auto}

/* =====================================================================
   8. PIED DE PAGE
   ===================================================================== */

.me-pied{
  background:var(--me-encre);color:#fff;
  padding:var(--me-pas-5) 0 var(--me-pas-3);margin-top:var(--me-pas-5);
}
/* Quand le bandeau newsletter précède le pied de page, la marge du pied
   fabrique une bande claire entre deux blocs sombres : on la supprime. */
.me-bandeau-news + .me-pied{margin-top:0}
.me-bandeau-news{padding-bottom:0}
.me-pied a{color:#fff;text-decoration:none}
.me-pied a:hover{text-decoration:underline}
.me-pied__grille{
  display:grid;gap:var(--me-pas-4);
  grid-template-columns:1.4fr 1fr 1fr;
  padding-bottom:var(--me-pas-4);
}
@media (max-width:760px){.me-pied__grille{grid-template-columns:1fr}}
.me-pied__logo img{width:230px;margin-bottom:var(--me-pas-2)}
.me-pied__pitch{font-size:.95rem;color:rgba(255,255,255,.75);max-width:38ch}
.me-pied__titre{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.07em;
  font-size:.85rem;font-weight:600;margin:0 0 var(--me-pas-2);
  color:rgba(255,255,255,.6);
}
.me-pied ul{list-style:none;margin:0;padding:0;font-size:.98rem}
.me-pied li{margin-bottom:.5rem}
.me-pied__bas{
  border-top:1px solid rgba(255,255,255,.16);padding-top:var(--me-pas-3);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.82rem;color:rgba(255,255,255,.65);
}


/* =====================================================================
   9. IMPRESSION
   ===================================================================== */

@media print{
  .me-entete,.me-pied,.me-partage,.me-sommaire,.me-progression,.me-burger{display:none!important}
  body{font-size:11pt;color:#000}
  .me-colonne{width:100%}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* =====================================================================
   10. MISE EN PAGE À DEUX COLONNES
   Le texte garde ses 720 px. La colonne de droite ne le comprime jamais :
   elle n'apparaît qu'à partir de 1180 px, et passe dessous en dessous.
   ===================================================================== */

.me-page-article,
.me-page-liste{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--me-pas-5);
  padding-top:var(--me-pas-3);
}
@media (min-width:1180px){
  .me-page-article,
  .me-page-liste{
    grid-template-columns:minmax(0,1fr) 320px;
    align-items:start;
    gap:var(--me-pas-6);
  }
  .me-page-article{--me-large:1180px}
}

/* Dans la colonne de gauche, l'article retrouve sa largeur de lecture. */
.me-page-article .me-article > *{width:min(100%,var(--me-lecture));margin-inline:auto}
.me-page-article .me-contenu > *{margin-inline:auto}

.me-rail{display:flex;flex-direction:column;gap:var(--me-pas-4)}
/* Le rail colle en haut de fenêtre, mais sans hauteur maximale : avec
   overflow-y:auto, les blocs se faisaient comprimer par le flex et la
   newsletter se retrouvait coupée en plein milieu d'une phrase. */
@media (min-width:1180px){
  .me-rail{position:sticky;top:98px;align-self:start;padding-bottom:1rem}
}
.me-rail > *{flex:0 0 auto}
.me-rail__titre{
  font-family:var(--me-titre);font-size:.9rem;text-transform:uppercase;
  letter-spacing:.08em;margin:0 0 .9rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--me-encre);
}
.me-rail__auteur{text-align:left}
.me-rail__portrait{width:72px;height:72px;border-radius:50%;margin-bottom:.6rem}
.me-rail__nom{font-family:var(--me-titre);font-size:1.15rem;margin:0 0 .1rem}
.me-rail__nom a{color:var(--me-encre);text-decoration:none}
.me-rail__nom a:hover{text-decoration:underline}
.me-rail__role{font-size:.88rem;color:var(--me-encre-70);margin:0}

.me-plus-lus__liste{list-style:none;margin:0;padding:0;counter-reset:me-lu}
.me-plus-lus__liste li{
  counter-increment:me-lu;display:flex;gap:.7rem;align-items:flex-start;
  padding:.7rem 0;border-bottom:1px solid var(--me-trait);margin:0;
}
.me-plus-lus__liste li:last-child{border-bottom:0}
.me-plus-lus__liste li::before{
  content:counter(me-lu);font-family:var(--me-titre);font-size:1.05rem;
  color:var(--me-rose-texte);font-weight:700;line-height:1.35;flex:0 0 1rem;
}
.me-plus-lus__liste a{
  color:var(--me-encre);text-decoration:none;font-size:.96rem;line-height:1.35;
  font-weight:600;
}
.me-plus-lus__liste a:hover{text-decoration:underline;text-decoration-color:var(--me-rose)}

.me-rail__icones{
  display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:0;
}
.me-rail__icones li{margin:0;flex:1 1 auto}
.me-rail__icones a{
  display:grid;place-items:center;width:100%;min-width:34px;height:40px;border-radius:var(--me-rayon);
  border:1px solid var(--me-trait);color:var(--me-encre);
}
.me-rail__icones a:hover{background:var(--me-encre);color:#fff;border-color:var(--me-encre)}
.me-rail__icones svg{width:17px;height:17px;fill:currentColor}

/* =====================================================================
   11. NEWSLETTER
   ===================================================================== */

.me-news{
  border-radius:var(--me-rayon);padding:1.6rem;
  background:var(--me-encre);color:#fff;position:relative;overflow:hidden;
}
.me-news::after{
  content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--me-degrade);
}
.me-news__sur{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.1em;
  font-size:.7rem;color:var(--me-jaune);margin:0 0 .5rem;
}
.me-news__titre{
  font-family:var(--me-titre);font-size:1.5rem;line-height:1.1;margin:0 0 .6rem;
}
.me-news__pitch{font-size:.95rem;color:rgba(255,255,255,.78);margin:0 0 1.1rem}
.me-news__champ{display:flex;gap:.5rem;flex-wrap:wrap}
.me-news__champ input[type="email"]{
  flex:1 1 12rem;min-width:0;font:inherit;font-size:1rem;padding:.75rem .9rem;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--me-rayon);
  background:rgba(255,255,255,.07);color:#fff;
}
.me-news__champ input[type="email"]::placeholder{color:rgba(255,255,255,.5)}
.me-news__champ input[type="email"]:focus{
  border-color:var(--me-jaune);background:rgba(255,255,255,.12);outline:none;
}
.me-news__champ .me-bouton{flex:0 0 auto}
.me-news__mention{font-size:.76rem;color:rgba(255,255,255,.55);margin:.7rem 0 0}

.me-news--large{margin:var(--me-pas-5) 0 var(--me-pas-4);padding:2.2rem}
.me-news--large .me-news__titre{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.15rem)}
.me-news--rail{padding:1.3rem}
.me-news--rail .me-news__titre{font-size:1.28rem}
.me-news--rail .me-news__champ{flex-direction:column}
.me-news--rail .me-news__champ .me-bouton{width:100%}
.me-news--popup{background:none;padding:0;color:var(--me-encre)}
.me-news--popup::after{display:none}
.me-news--popup .me-news__sur,
.me-news--popup .me-news__titre,
.me-news--popup .me-news__pitch{display:none}
.me-news--popup .me-news__champ input[type="email"]{
  background:#fff;border-color:var(--me-trait);color:var(--me-encre);
}
.me-news--popup .me-news__champ input[type="email"]::placeholder{color:var(--me-encre-45)}
.me-news--popup .me-news__mention{color:var(--me-encre-45)}

/* Le bandeau ne pose plus de bande claire entre la carte et le pied de
   page : il s'ouvre sur le fond de la page et vient au contact du pied. */
.me-bandeau-news{background:transparent;padding:var(--me-pas-5) 0 0}

/* =====================================================================
   12. ENCART PODCAST DANS LE CORPS
   Il vit au fil du texte, juste avant le deuxième intertitre, et porte
   l'épisode qui traite du même sujet que l'article. Un bloc générique en
   fin de page n'était vu par presque personne.
   ===================================================================== */

.me-episode{
  display:grid;gap:1.3rem;align-items:center;
  grid-template-columns:132px 1fr;
  margin:var(--me-pas-5) 0;padding:1.5rem;
  border-radius:8px;
  background:linear-gradient(135deg,#0b2a31,#072026);
  color:#fff;position:relative;overflow:hidden;
  box-shadow:0 14px 36px rgba(7,32,38,.16);
}
.me-episode::before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--me-degrade);
}
.me-episode::after{
  content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;
  border-radius:50%;background:var(--me-degrade);opacity:.14;
}
@media (max-width:620px){.me-episode{grid-template-columns:1fr;justify-items:start}}
.me-episode__pochette img{
  width:132px;height:132px;border-radius:8px;display:block;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.me-episode__mono{
  display:grid;place-items:center;width:132px;height:132px;
  border-radius:8px;background:var(--me-degrade);
}
.me-episode__corps{position:relative;z-index:1}
.me-episode__sur{
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.1em;
  font-size:.72rem;color:var(--me-jaune);margin:0 0 .45rem;
}
.me-episode__sur svg{width:14px;height:14px;fill:currentColor}
.me-episode__titre{
  font-family:var(--me-titre);font-size:1.42rem;line-height:1.1;margin:0 0 .2rem;
  text-wrap:balance;
}
.me-episode__invite{font-size:.92rem;color:rgba(255,255,255,.62);margin:0 0 1rem;font-style:italic}
.me-episode__pitch{font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.72);margin:0 0 1rem;max-width:46em}
.me-episode__boutons{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 .9rem}
.me-episode__boutons .me-bouton--vide{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.me-episode__boutons .me-bouton--vide:hover{box-shadow:inset 0 0 0 2px #fff}
.me-episode__plateformes{
  display:flex;gap:.9rem;align-items:center;margin:0;
  opacity:.55;
}
.me-episode__plateformes svg{width:17px;height:17px;fill:#fff;display:block}

/* =====================================================================
   13. COMMUNAUTÉ
   ===================================================================== */

.me-communaute{
  margin:var(--me-pas-4) 0;padding:1.5rem;border-radius:var(--me-rayon);
  border:1px solid var(--me-trait);background:#fff;
}
.me-communaute__sur{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.1em;
  font-size:.72rem;color:var(--me-rose-texte);margin:0 0 .45rem;
}
.me-communaute__titre{font-family:var(--me-titre);font-size:1.35rem;line-height:1.12;margin:0 0 .5rem}
.me-communaute__pitch{font-size:.95rem;color:var(--me-encre-70);margin:0 0 1.1rem}
/* Sept comptes : une grille en colonnes fixes laisserait toujours une case
   seule sur la dernière ligne. Les cases s'étirent donc à parts égales,
   sept de front sur écran large, puis quatre et trois. Jamais d'orpheline. */
.me-communaute__liens{
  display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;
}
.me-communaute__liens li{margin:0;flex:1 1 4rem;min-width:3.8rem}
.me-communaute__liens a{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:.8rem .3rem;border-radius:var(--me-rayon);
  border:1px solid var(--me-trait);color:var(--me-encre);
  text-decoration:none;font-size:.72rem;font-weight:600;text-align:center;
  transition:transform .15s ease,border-color .15s ease;
}
.me-communaute__liens a:hover{transform:translateY(-2px);border-color:var(--me-encre)}
.me-communaute__liens svg{width:20px;height:20px;fill:currentColor}

/* =====================================================================
   14. PARTAGE
   ===================================================================== */

.me-partage{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.me-partage__liste{display:flex;gap:.4rem;list-style:none;margin:0;padding:0}
.me-partage__liste li{margin:0}
.me-partage__lien{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--me-trait);border-radius:var(--me-rayon);
  background:#fff;color:var(--me-encre);cursor:pointer;padding:0;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.me-partage__lien svg{width:16px;height:16px;fill:currentColor}
.me-partage__lien:hover{background:var(--me-encre);color:#fff;border-color:var(--me-encre)}
.me-partage__lien--linkedin:hover{background:#0a66c2;border-color:#0a66c2}
.me-partage__lien--whatsapp:hover{background:#25d366;border-color:#25d366;color:var(--me-encre)}
.me-partage__lien--facebook:hover{background:#1877f2;border-color:#1877f2}
.me-copier--fait{background:var(--me-vert);border-color:var(--me-vert);color:var(--me-encre)}

.me-partage--haut{
  padding:var(--me-pas-2) 0;border-top:1px solid var(--me-trait);
  border-bottom:1px solid var(--me-trait);margin-bottom:var(--me-pas-4);
}
.me-partage--bas{padding-top:var(--me-pas-3);border-top:1px solid var(--me-trait);margin:var(--me-pas-4) 0}
.me-partage--tiroir{flex-direction:column;align-items:flex-start;gap:.6rem}
.me-partage--tiroir .me-partage__liste{flex-wrap:wrap;max-width:11rem}

.me-partage-flottant{position:fixed;left:1.25rem;bottom:1.25rem;z-index:60}
@media (max-width:900px){.me-partage-flottant{left:50%;transform:translateX(-50%);bottom:1rem}}
.me-partage-flottant__declencheur{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.05em;
  font-size:.85rem;font-weight:600;
  padding:.7rem 1.15rem;border:0;border-radius:100px;cursor:pointer;
  background:var(--me-encre);color:#fff;
  box-shadow:0 10px 28px rgba(7,32,38,.28);
}
.me-partage-flottant__declencheur svg{width:15px;height:15px;fill:currentColor}
.me-partage-flottant__tiroir{
  position:absolute;bottom:calc(100% + .6rem);left:0;
  background:#fff;border:1px solid var(--me-trait);border-radius:var(--me-rayon);
  padding:.9rem;box-shadow:0 16px 40px rgba(7,32,38,.18);
}
@media (max-width:900px){.me-partage-flottant__tiroir{left:50%;transform:translateX(-50%)}}

/* =====================================================================
   15. RECHERCHE DANS L'EN-TÊTE
   ===================================================================== */

.me-recherche-entete{position:relative}
.me-recherche-entete__bouton{
  display:grid;place-items:center;width:42px;height:42px;padding:0;
  border:1px solid var(--me-trait);border-radius:var(--me-rayon);
  background:#fff;color:var(--me-encre);cursor:pointer;
}
.me-recherche-entete__bouton:hover{border-color:var(--me-encre)}
.me-recherche-entete__bouton svg{width:19px;height:19px}
.me-recherche-entete__panneau{
  position:absolute;right:0;top:calc(100% + .7rem);z-index:70;
  width:min(92vw,26rem);background:#fff;border:1px solid var(--me-trait);
  border-radius:var(--me-rayon);padding:1rem;
  box-shadow:0 18px 44px rgba(7,32,38,.16);
}
.me-recherche-entete__panneau form{display:flex;gap:.5rem}
.me-recherche-entete__panneau input[type="search"]{
  flex:1;min-width:0;font:inherit;font-size:1rem;padding:.65rem .85rem;
  border:1px solid var(--me-trait);border-radius:var(--me-rayon);
}
.me-recherche-entete__panneau input[type="search"]:focus{border-color:var(--me-violet);outline:none}
.me-recherche-entete__suggestions{
  margin:.8rem 0 0;font-size:.85rem;color:var(--me-encre-70);
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
}
.me-recherche-entete__suggestions a{
  padding:.2rem .55rem;border-radius:100px;background:var(--me-fond-doux);
  color:var(--me-encre);text-decoration:none;font-size:.8rem;
}
.me-recherche-entete__suggestions a:hover{background:var(--me-encre);color:#fff}

/* =====================================================================
   16. FENÊTRE DE SORTIE ET MESSAGES
   ===================================================================== */

.me-popup{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.25rem}
.me-popup__voile{position:absolute;inset:0;background:rgba(7,32,38,.62);backdrop-filter:blur(3px)}
.me-popup__boite{
  position:relative;width:min(100%,52rem);background:#fff;
  border-radius:10px;overflow:hidden;
  box-shadow:0 30px 90px rgba(7,32,38,.45);
  display:grid;grid-template-columns:16rem 1fr;
}
@media (max-width:760px){
  .me-popup__boite{grid-template-columns:1fr;width:min(100%,30rem)}
  .me-popup__visuel{min-height:160px}
}
.me-popup__visuel{
  position:relative;display:grid;place-items:center;
  background:var(--me-degrade);padding:1.5rem;
}
.me-popup__visuel img{width:100%;max-width:15rem;height:auto;display:block}
.me-popup__badge{
  position:absolute;top:1rem;left:1rem;
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.08em;
  font-size:.68rem;padding:.25rem .6rem;border-radius:100px;
  background:var(--me-encre);color:#fff;
}
.me-popup__texte{padding:2.2rem}
.me-popup__liste{margin:0 0 1.4rem;padding-left:0;list-style:none;font-size:.98rem}
.me-popup__liste li{
  position:relative;padding-left:1.6rem;margin-bottom:.5rem;color:var(--me-encre-70);
}
.me-popup__liste li::before{
  content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.4rem;
  border-left:2px solid var(--me-rose);border-bottom:2px solid var(--me-rose);
  transform:rotate(-45deg);
}
.me-popup__fermer{
  position:absolute;top:.5rem;right:.7rem;background:none;border:0;
  font-size:1.9rem;line-height:1;color:var(--me-encre-45);cursor:pointer;
}
.me-popup__fermer:hover{color:var(--me-encre)}
.me-popup__sur{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.1em;
  font-size:.72rem;color:var(--me-rose-texte);margin:0 0 .5rem;
}
.me-popup__titre{font-family:var(--me-titre);font-size:1.75rem;line-height:1.08;margin:0 0 .9rem;text-wrap:balance}
.me-popup__fermer{z-index:2}

.me-toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:210;
  display:flex;align-items:center;gap:1rem;
  padding:.9rem 1.2rem;border-radius:var(--me-rayon);
  background:var(--me-encre);color:#fff;font-size:.95rem;
  box-shadow:0 14px 40px rgba(7,32,38,.3);
  max-width:min(92vw,34rem);transition:opacity .35s,transform .35s;
}
.me-toast--ok{border-left:4px solid var(--me-vert)}
.me-toast--ko{border-left:4px solid var(--me-orange)}
.me-toast--parti{opacity:0;transform:translate(-50%,1rem)}
.me-toast__fermer{background:none;border:0;color:rgba(255,255,255,.6);font-size:1.4rem;line-height:1;cursor:pointer}

/* =====================================================================
   17. AUTEUR, ÉTIQUETTES, ANNONCEURS
   ===================================================================== */

.me-auteur{
  display:flex;gap:var(--me-pas-3);align-items:flex-start;
  margin:var(--me-pas-5) 0 0;padding:var(--me-pas-3);
  background:var(--me-fond-doux);border-radius:var(--me-rayon);
}
.me-auteur__photo{width:104px;height:104px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.me-auteur__sur{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.1em;
  font-size:.7rem;color:var(--me-encre-45);margin:0 0 .2rem;
}
.me-auteur__nom{font-family:var(--me-titre);font-size:1.3rem;font-weight:700;margin:0 0 .15rem}
.me-auteur__role{font-size:.92rem;color:var(--me-encre-70);margin:0 0 .7rem;font-style:italic}
.me-auteur__bio{font-size:.98rem;margin:0 0 .8rem}
.me-auteur__liens{display:flex;gap:1rem;flex-wrap:wrap;margin:0;font-size:.92rem;font-weight:600}
@media (max-width:560px){
  .me-auteur{flex-direction:column;gap:var(--me-pas-2)}
  .me-auteur__photo{width:80px;height:80px}
}

.me-etiquettes{font-size:.85rem;color:var(--me-encre-70);margin:var(--me-pas-3) 0 0}
.me-etiquettes span{font-weight:600;color:var(--me-encre)}
.me-etiquettes a{color:var(--me-encre-70)}

.me-annonceurs{
  display:block;padding:1.2rem 1.3rem;border-radius:var(--me-rayon);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  text-decoration:none;color:#fff;
}
.me-annonceurs:hover{background:rgba(255,255,255,.1);text-decoration:none}
.me-annonceurs__titre{display:block;font-family:var(--me-titre);font-size:1.05rem;margin-bottom:.25rem}
.me-annonceurs__pitch{display:block;font-size:.85rem;color:rgba(255,255,255,.7);margin-bottom:.5rem}
.me-annonceurs__lien{font-size:.85rem;font-weight:600;color:var(--me-jaune)}

/* =====================================================================
   18. PIED DE PAGE : SUIVRE
   ===================================================================== */

.me-pied__incitation{font-size:.9rem;color:rgba(255,255,255,.72);margin:0 0 1rem;max-width:34ch}
.me-pied__reseaux{
  display:flex;flex-wrap:wrap;gap:.5rem;
  list-style:none;margin:0;padding:0;
}
/* Sept comptes dans une colonne étroite : les cases s'étirent à parts
   égales, quatre puis trois, plutôt que de laisser une case seule. */
.me-pied__reseaux li{margin:0;flex:1 1 4.4rem}
.me-pied__reseaux a{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.7rem .3rem;border-radius:var(--me-rayon);
  border:1px solid rgba(255,255,255,.2);color:#fff;text-decoration:none;
  font-size:.7rem;font-weight:600;text-align:center;
}
.me-pied__reseaux a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.me-pied__reseaux svg{width:18px;height:18px;fill:currentColor}

/* =====================================================================
   19. TUILES DE RUBRIQUES
   Grille à colonnes fixes : avec huit rubriques, jamais de tuile seule
   en bas de bloc, ce que la grille automatique ne garantissait pas.
   ===================================================================== */

.me-hubs{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.me-hubs{grid-template-columns:repeat(4,1fr)}}
.me-hub{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:132px;padding:1.1rem;border-radius:var(--me-rayon);
  text-decoration:none;color:var(--me-encre);background:var(--me-fond-doux);
  border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.me-hub:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(7,32,38,.1);border-color:rgba(7,32,38,.12)}
.me-hub__nom{
  font-family:var(--me-titre);font-size:1.12rem;font-weight:700;
  text-transform:uppercase;line-height:1.06;text-wrap:balance;
}
.me-hub__compte{font-size:.78rem;color:var(--me-encre-70);margin-top:.6rem}
/* Huit teintes tirées de la charte, en version très claire : elles
   distinguent les rubriques sans jamais gêner la lecture du libellé,
   qui reste en encre. */
.me-hub:nth-child(8n+1){background:#fff3d6}
.me-hub:nth-child(8n+2){background:#ffe3ed}
.me-hub:nth-child(8n+3){background:#f6e2fa}
.me-hub:nth-child(8n+4){background:#d9f8f9}
.me-hub:nth-child(8n+5){background:#d9f9e8}
.me-hub:nth-child(8n+6){background:#ffe5df}
.me-hub:nth-child(8n+7){background:#fdf0d3}
.me-hub:nth-child(8n+8){background:#eae7f7}

@media print{
  .me-rail,.me-news,.me-podcast,.me-communaute,.me-partage-flottant,
  .me-popup,.me-toast,.me-bandeau-news,.me-recherche-entete{display:none!important}
}

/* =====================================================================
   20. Page auteur (Qui je suis)
   =====================================================================
   Une page de présentation ne se lit pas comme un article : le lecteur
   veut savoir en trois secondes qui parle, puis, s'il reste, pourquoi
   croire cette personne. D'où la une portrait, les preuves chiffrées
   juste sous l'accroche, et la carte de contact en bas de page plutôt
   qu'une adresse perdue dans un paragraphe.
   ------------------------------------------------------------------ */

.me-auteur-une{
  background:var(--me-encre);color:#fff;position:relative;overflow:hidden;
  margin-bottom:var(--me-pas-5);
}
.me-auteur-une::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% 12%, rgba(255,182,0,.20), transparent 58%),
             radial-gradient(90% 80% at 8% 96%, rgba(255,49,123,.18), transparent 60%);
}
.me-auteur-une::after{
  content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--me-degrade);
}
.me-auteur-une__grille{
  position:relative;display:grid;gap:var(--me-pas-4);align-items:center;
  padding:var(--me-pas-5) 0;
}
.me-auteur-une .me-fil{color:rgba(255,255,255,.6)}
.me-auteur-une .me-fil a{color:rgba(255,255,255,.8)}
.me-auteur-une__sur{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--me-jaune);margin:0 0 .6rem;
}
.me-auteur-une__titre{
  font-family:var(--me-titre);font-weight:700;line-height:1.02;margin:0 0 .9rem;
  font-size:clamp(2.4rem,1.9rem + 2.4vw,3.8rem);letter-spacing:-.02em;
}
.me-auteur-une__accroche{
  font-size:clamp(1.05rem,1rem + .35vw,1.24rem);line-height:1.55;
  color:rgba(255,255,255,.82);margin:0 0 var(--me-pas-3);max-width:34em;
}
.me-preuves{
  list-style:none;margin:0 0 var(--me-pas-3);padding:0;
  display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;
}
.me-preuves li{display:flex;flex-direction:column;gap:.15rem}
.me-preuves strong{
  font-family:var(--me-titre);font-size:1.75rem;line-height:1;
  background:var(--me-degrade);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.me-preuves span{font-size:.82rem;color:rgba(255,255,255,.62)}
.me-auteur-une__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
.me-bouton--contour{
  background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.42);
}
.me-bouton--contour:hover{box-shadow:inset 0 0 0 2px #fff}

.me-auteur-une__photo{
  margin:0;position:relative;border-radius:calc(var(--me-rayon) * 1.6);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.me-auteur-une__photo img{display:block;width:100%;height:auto}

@media (min-width:900px){
  .me-auteur-une__grille{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--me-pas-5)}
}
@media (max-width:899px){
  .me-auteur-une__photo{max-width:22rem}
}

.me-auteur-page__corps{margin-bottom:var(--me-pas-5)}

/* Références */
.me-refs{margin-bottom:var(--me-pas-5)}
.me-refs__sur{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--me-rose-texte);margin:0 0 .4rem;
}
.me-refs__titre{
  font-family:var(--me-titre);font-size:clamp(1.5rem,1.3rem + .8vw,2rem);
  line-height:1.12;margin:0 0 var(--me-pas-3);
}
.me-refs__liste{
  list-style:none;margin:0 0 1.4rem;padding:0;
  display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
}
.me-refs__liste li{
  display:grid;place-items:center;min-height:5rem;padding:.9rem;
  border-radius:calc(var(--me-rayon) * 2);background:#fff;
  box-shadow:inset 0 0 0 1px var(--me-trait);
  font-family:var(--me-titre);font-size:1rem;letter-spacing:.01em;
  color:var(--me-encre-70);text-align:center;line-height:1.2;
  transition:box-shadow .15s ease,transform .15s ease;
}
.me-refs__liste li:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--me-encre-45)}
/* Les logos passent en niveaux de gris : un mur de logos multicolores
   attire l'œil plus que le texte de la page, et vieillit mal. */
.me-refs__logo img{
  max-height:2.6rem;width:auto;max-width:88%;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .15s ease,opacity .15s ease;
}
.me-refs__logo:hover img{filter:grayscale(0);opacity:1}
.me-refs__note{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.08em;
  font-size:.72rem;color:var(--me-encre-45);margin:0 0 .6rem;
}
.me-refs__metiers{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;
}
.me-refs__metiers li{
  font-size:.86rem;padding:.36rem .8rem;border-radius:999px;
  background:var(--me-fond-doux);color:var(--me-encre-70);
}

/* Contact */
.me-contact{
  display:grid;gap:var(--me-pas-4);align-items:start;
  border-radius:calc(var(--me-rayon) * 1.4);padding:var(--me-pas-4);
  background:var(--me-fond-doux);box-shadow:inset 0 0 0 1px var(--me-trait);
  margin-bottom:var(--me-pas-6);
}
@media (min-width:960px){
  .me-contact{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);padding:var(--me-pas-5)}
}
.me-contact__sur{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--me-rose-texte);margin:0 0 .4rem;
}
.me-contact__titre{
  font-family:var(--me-titre);font-size:clamp(1.4rem,1.2rem + .8vw,1.95rem);
  line-height:1.14;margin:0 0 .7rem;
}
.me-contact__pitch{color:var(--me-encre-70);margin:0 0 var(--me-pas-3);max-width:40em}
.me-contact__liste{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.me-contact__liste li{
  display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem;align-items:baseline;
  padding-bottom:.55rem;border-bottom:1px solid var(--me-trait);font-size:.98rem;
}
.me-contact__liste li:last-child{border-bottom:0;padding-bottom:0}
.me-contact__liste span{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.08em;
  font-size:.7rem;color:var(--me-encre-45);
}
.me-contact__liste a{color:var(--me-rose-texte);text-decoration:none;font-weight:500}
.me-contact__liste a:hover{text-decoration:underline}
.me-news--contact{padding:1.5rem}
.me-news--contact .me-news__titre{font-size:1.35rem}
.me-news--contact .me-news__champ{flex-direction:column}
.me-news--contact .me-news__champ .me-bouton{width:100%}

/* Colonnes : sans cette remise à zéro, flex:1 1 12rem s'applique à la
   HAUTEUR du champ et fabrique une boîte de douze rem de haut. */
.me-news--rail .me-news__champ input[type="email"],
.me-news--contact .me-news__champ input[type="email"]{flex:0 0 auto;width:100%}

/* =====================================================================
   21. Contenu importé habillé
   =====================================================================
   Ces blocs existaient déjà dans les articles, mais sans mise en forme :
   l'import a retiré les attributs de style écrits à la main. On leur rend
   une forme, une seule fois, pour les 462 articles à la fois.
   ------------------------------------------------------------------ */

/* --- Rangée de chiffres --------------------------------------------- */
.me-contenu .me-stats{
  display:grid;gap:.9rem;margin:var(--me-pas-4) 0;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
}
.me-contenu .me-stat{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1.25rem 1.1rem;border-radius:calc(var(--me-rayon) * 2);
  background:var(--me-encre);color:#fff;position:relative;overflow:hidden;
}
.me-contenu .me-stat::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--me-degrade);
}
.me-stat__nombre{
  font-family:var(--me-titre);font-weight:700;line-height:1;
  font-size:clamp(1.9rem,1.6rem + 1.1vw,2.5rem);letter-spacing:-.02em;
  background:var(--me-degrade);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.me-stat__libelle{font-size:.86rem;line-height:1.35;color:rgba(255,255,255,.72)}

/* --- Tableaux -------------------------------------------------------- */
.me-contenu .me-tableau{
  margin:var(--me-pas-4) 0;border-radius:calc(var(--me-rayon) * 2);
  overflow:hidden;box-shadow:0 1px 0 var(--me-trait),0 14px 34px rgba(7,32,38,.07);
  border:1px solid var(--me-trait);background:#fff;
}
.me-contenu .me-tableau > table{margin:0;min-width:0;border-radius:0}
.me-contenu table.me-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;
}
.me-contenu table.me-table thead th{
  background:var(--me-encre);color:#fff;border-bottom:0;
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.06em;
  font-size:.74rem;padding:.85rem 1rem;
}
.me-contenu table.me-table thead th:first-child{border-top-left-radius:0}
.me-contenu table.me-table td,
.me-contenu table.me-table tbody th{
  padding:.85rem 1rem;border-bottom:1px solid var(--me-trait);vertical-align:top;
}
.me-contenu table.me-table tbody tr:last-child td,
.me-contenu table.me-table tbody tr:last-child th{border-bottom:0}
.me-contenu table.me-table tbody tr:nth-child(even){background:var(--me-fond-doux)}
.me-contenu table.me-table tbody th{
  font-family:var(--me-titre);font-weight:600;text-align:left;
}
.me-contenu table.me-table td:first-child{font-weight:500}
@media (max-width:620px){
  .me-contenu .me-tableau{overflow-x:auto}
  .me-contenu .me-tableau > table{min-width:30rem}
}

/* --- Encadrés -------------------------------------------------------- */
.me-contenu .me-encadre,
.me-contenu aside.me-encadre{
  position:relative;margin:var(--me-pas-4) 0;padding:1.5rem 1.6rem 1.5rem 1.75rem;
  border-radius:calc(var(--me-rayon) * 2);border-left:0;
  background:var(--me-fond-doux);
  box-shadow:inset 0 0 0 1px var(--me-trait);
}
.me-contenu .me-encadre::before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;
  border-radius:calc(var(--me-rayon) * 2) 0 0 calc(var(--me-rayon) * 2);
  background:var(--me-degrade);
}
.me-contenu .me-encadre__titre{
  font-family:var(--me-titre);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:.74rem;color:var(--me-rose-texte);margin:0 0 .6rem;
}
.me-contenu .me-encadre--chiffre{background:#fffaf0;box-shadow:inset 0 0 0 1px #f3e3c2}
.me-contenu .me-encadre--chiffre .me-encadre__corps{
  font-family:var(--me-titre);font-size:1.22rem;line-height:1.35;color:var(--me-encre);
}
.me-contenu .me-encadre--recruteur{background:#fdf3f7;box-shadow:inset 0 0 0 1px #f4dbe6}
.me-contenu .me-encadre--cas{background:#f8f4fc;box-shadow:inset 0 0 0 1px #e8ddf4}
.me-contenu .me-encadre--temoignage{background:var(--me-encre);color:#fff}
.me-contenu .me-encadre--temoignage .me-encadre__titre{color:var(--me-jaune)}
.me-contenu .me-encadre--temoignage p{color:rgba(255,255,255,.86)}
.me-contenu .me-encadre--temoignage a{color:#fff}
.me-contenu .me-encadre p:last-child{margin-bottom:0}

/* --- Passerelle vers un autre article -------------------------------- */
.me-contenu .me-passerelle{
  margin:var(--me-pas-3) 0;padding:1.05rem 1.2rem;
  border-radius:calc(var(--me-rayon) * 2);
  background:#fff;box-shadow:inset 0 0 0 1px var(--me-trait);
  font-size:.95rem;
}
.me-contenu .me-passerelle p{margin:0}
.me-contenu .me-passerelle__lien{
  font-weight:600;color:var(--me-rose-texte);text-decoration:none;
  border-bottom:2px solid rgba(255,49,123,.28);
}
.me-contenu .me-passerelle__lien:hover{border-bottom-color:var(--me-rose)}

/* --- Renvoi Instagram au fil du texte -------------------------------- */
.me-contenu .me-insta{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  margin:var(--me-pas-4) 0;padding:1.2rem 1.4rem;
  border-radius:calc(var(--me-rayon) * 2);
  background:linear-gradient(135deg,#fff7ec,#ffeef4);
  box-shadow:inset 0 0 0 1px #f5dfe6;
}
.me-insta__glyphe{
  display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;
  border-radius:50%;background:var(--me-degrade);
}
.me-insta__glyphe svg{width:22px;height:22px;fill:#fff}
.me-insta__corps{flex:1 1 14rem;min-width:0}
.me-insta__sur{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.09em;
  font-size:.7rem;color:var(--me-rose-texte);margin:0 0 .2rem;
}
.me-insta__texte{margin:0;font-size:.95rem;line-height:1.45;color:var(--me-encre)}
.me-insta__lien{
  flex:0 0 auto;font-family:var(--me-titre);font-weight:600;font-size:.9rem;
  text-decoration:none;color:var(--me-encre);
  padding:.6rem 1rem;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 2px var(--me-encre);
}
.me-insta__lien:hover{background:var(--me-encre);color:#fff}

/* =====================================================================
   22. Newsletter, communauté, grille : version premium
   ===================================================================== */

/* --- Newsletter ------------------------------------------------------ */
.me-news{padding:1.7rem}
.me-news::after{height:5px}
.me-news__sur{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.32rem .7rem .32rem .55rem;border-radius:999px;
  background:rgba(255,182,0,.12);box-shadow:inset 0 0 0 1px rgba(255,182,0,.35);
  color:var(--me-jaune);margin:0 0 .9rem;
}
.me-news__pastille{
  width:7px;height:7px;border-radius:50%;background:var(--me-jaune);
  box-shadow:0 0 0 3px rgba(255,182,0,.22);
}
.me-news__titre{
  font-size:1.55rem;line-height:1.08;margin:0 0 .55rem;
  letter-spacing:-.01em;text-wrap:balance;
}
.me-news__pitch{
  font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.8);margin:0 0 1.1rem;
  text-wrap:pretty;
}
.me-news__pitch-bis{color:rgba(255,255,255,.58)}
.me-news__points{
  list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.45rem;
}
.me-news__points li{
  position:relative;padding-left:1.5rem;font-size:.9rem;color:rgba(255,255,255,.78);
}
.me-news__points li::before{
  content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border-radius:50%;
  background:var(--me-degrade);
}
.me-news__mention{font-size:.74rem;color:rgba(255,255,255,.5);margin:.75rem 0 0}
.me-news--large,.me-news--pied{padding:2.2rem}
@media (min-width:900px){
  .me-news--pied .me-news__corps{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    grid-template-rows:auto auto auto auto;
    gap:.4rem 2.8rem;align-items:start;
  }
  .me-news--pied .me-news__sur{grid-area:1 / 1;justify-self:start}
  .me-news--pied .me-news__titre{grid-area:2 / 1}
  .me-news--pied .me-news__pitch{grid-area:3 / 1;margin-bottom:0}
  .me-news--pied .me-news__points{grid-area:1 / 2 / span 3 / 3;margin:.3rem 0 0}
  .me-news--pied .me-news__form{grid-area:4 / 1 / 5 / -1;margin-top:1.4rem}
  .me-news--pied .me-news__champ{max-width:34rem}
}
.me-news--rail .me-news__titre{font-size:1.3rem}
.me-news--contact .me-news__titre{font-size:1.35rem}

/* --- Continuer ailleurs ---------------------------------------------- */
.me-communaute{
  margin:var(--me-pas-5) 0 var(--me-pas-4);padding:1.9rem;
  border-radius:calc(var(--me-rayon) * 3);border:0;
  background:var(--me-encre);color:#fff;position:relative;overflow:hidden;
}
.me-communaute::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 100% 0%, rgba(255,49,123,.22), transparent 60%),
             radial-gradient(80% 120% at 0% 100%, rgba(255,182,0,.16), transparent 62%);
}
.me-communaute::after{
  content:"";position:absolute;inset:auto 0 0 0;height:5px;background:var(--me-degrade);
}
.me-communaute__texte{position:relative}
.me-communaute__sur{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.1em;
  font-size:.7rem;color:var(--me-jaune);margin:0 0 .6rem;
}
.me-communaute__pastille{
  width:7px;height:7px;border-radius:50%;background:var(--me-jaune);
  box-shadow:0 0 0 3px rgba(255,182,0,.22);
}
.me-communaute__titre{
  font-family:var(--me-titre);font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  line-height:1.1;margin:0 0 .5rem;text-wrap:balance;color:#fff;
}
.me-communaute__pitch{font-size:.96rem;line-height:1.5;color:rgba(255,255,255,.72);margin:0 0 1.1rem;max-width:44em}
.me-communaute__cta{
  display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1.4rem;
  font-family:var(--me-titre);font-weight:600;font-size:.92rem;
  color:var(--me-encre);text-decoration:none;
  padding:.62rem 1.1rem;border-radius:999px;background:var(--me-degrade);
}
.me-communaute__cta svg{width:15px;height:15px;transition:transform .15s ease}
.me-communaute__cta:hover svg{transform:translateX(3px)}
.me-communaute__liens{position:relative}
.me-communaute__liens a{
  border:1px solid rgba(255,255,255,.18);color:#fff;
  background:rgba(255,255,255,.04);backdrop-filter:blur(2px);
}
.me-communaute__liens a:hover{
  border-color:transparent;background:rgba(255,255,255,.14);transform:translateY(-2px);
}
.me-communaute--compact{padding:1.4rem}

/* --- Durée de lecture ------------------------------------------------- */
.me-duree{display:inline-flex;align-items:center;gap:.32rem}
.me-horloge{width:13px;height:13px;flex:0 0 auto;opacity:.65}

/* --- Plus de carte seule en bas de grille ----------------------------- */
/* Une vignette isolée sur sa ligne fait accident. Quand le compte est
   impair, la dernière passe en pleine largeur, visuel à gauche. */
/* La grille reste une grille : aucune vignette élargie en fin de liste.
   Le nombre d'articles affichés est ajusté côté gabarit pour que la
   dernière ligne soit toujours pleine. */

/* =====================================================================
   23. Page annonceurs
   =====================================================================
   Le visiteur n'est plus un candidat mais un acheteur : la page peut
   donc respirer autrement que les articles, sans quitter la charte.
   ------------------------------------------------------------------ */

.me-partenaires__une{
  background:var(--me-encre);color:#fff;position:relative;overflow:hidden;
  margin-bottom:var(--me-pas-5);
}
/* Les halos restent une signature, pas un décor : assez présents pour
   qu'on les remarque, assez discrets pour que le texte se lise sans
   effort par-dessus. */
.me-partenaires__une::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 90% at 92% 8%, rgba(255,49,123,.12), transparent 60%),
             radial-gradient(90% 80% at 4% 96%, rgba(255,182,0,.08), transparent 62%),
             linear-gradient(180deg, rgba(2,12,15,.30), rgba(2,12,15,.48));
}
.me-partenaires__une::after{
  content:"";position:absolute;inset:auto 0 0 0;height:5px;background:var(--me-degrade);
}
.me-partenaires__une-grille{
  position:relative;display:grid;gap:var(--me-pas-4);
  padding:var(--me-pas-5) 0;align-items:start;
}
@media (min-width:960px){
  .me-partenaires__une-grille{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--me-pas-5)}
}
.me-partenaires__une .me-fil{color:rgba(255,255,255,.6)}
.me-partenaires__une .me-fil a{color:rgba(255,255,255,.8)}
.me-partenaires__sur{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--me-jaune);margin:0 0 .6rem;
}
.me-partenaires__titre{
  font-family:var(--me-titre);font-weight:700;line-height:1.04;margin:0 0 .9rem;
  font-size:clamp(2rem,1.6rem + 2vw,3.1rem);letter-spacing:-.02em;text-wrap:balance;
}
.me-partenaires__accroche{
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);line-height:1.55;
  color:rgba(255,255,255,.8);margin:0 0 var(--me-pas-3);max-width:36em;
}
.me-partenaires__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
.me-partenaires__reperes{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.me-partenaires__reperes li{
  padding:1.1rem 1.2rem;border-radius:calc(var(--me-rayon) * 2);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.me-partenaires__reperes strong{
  display:block;font-family:var(--me-titre);font-size:1.05rem;margin-bottom:.25rem;
}
.me-partenaires__reperes span{font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.68)}
.me-partenaires__corps{margin-bottom:var(--me-pas-5)}

/* --- Formats --------------------------------------------------------- */
.me-formats{margin-bottom:var(--me-pas-5)}
.me-formats__sur{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--me-rose-texte);margin:0 0 .4rem;
}
.me-formats__titre{
  font-family:var(--me-titre);font-size:clamp(1.5rem,1.3rem + .9vw,2.1rem);
  line-height:1.12;margin:0 0 var(--me-pas-3);text-wrap:balance;
}
.me-formats__grille{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.me-format{
  position:relative;padding:1.5rem 1.5rem 1.4rem;
  border-radius:calc(var(--me-rayon) * 2);background:#fff;
  box-shadow:inset 0 0 0 1px var(--me-trait);
  transition:transform .15s ease,box-shadow .15s ease;
}
.me-format:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--me-encre-45),0 16px 34px rgba(7,32,38,.08)}
.me-format__num{
  font-family:var(--me-titre);font-size:.78rem;letter-spacing:.1em;
  color:var(--me-rose-texte);
}
.me-format__titre{font-family:var(--me-titre);font-size:1.25rem;line-height:1.15;margin:.35rem 0 .5rem}
.me-format__texte{font-size:.95rem;line-height:1.5;color:var(--me-encre-70);margin:0 0 .7rem}
.me-format__detail{
  font-size:.84rem;color:var(--me-encre-45);margin:0;padding-top:.7rem;
  border-top:1px solid var(--me-trait);
}

/* --- Déontologie ------------------------------------------------------ */
.me-partenaires__regles{background:var(--me-fond-doux);padding:var(--me-pas-5) 0;margin-bottom:var(--me-pas-5)}
.me-regles{display:grid;gap:var(--me-pas-4)}
@media (min-width:960px){.me-regles{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--me-pas-5)}}
.me-regles__sur{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--me-rose-texte);margin:0 0 .4rem;
}
.me-regles__titre{
  font-family:var(--me-titre);font-size:clamp(1.45rem,1.3rem + .8vw,2rem);
  line-height:1.12;margin:0 0 .7rem;text-wrap:balance;
}
.me-regles__pitch{color:var(--me-encre-70);margin:0;max-width:40em}
.me-regles__liste{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.me-regles__liste li{
  position:relative;padding:.95rem 1.1rem .95rem 3rem;background:#fff;
  border-radius:calc(var(--me-rayon) * 2);box-shadow:inset 0 0 0 1px var(--me-trait);
  font-size:.95rem;line-height:1.45;
}
.me-regles__liste li::before{
  content:"";position:absolute;left:1.1rem;top:1.15rem;width:14px;height:2px;
  background:var(--me-rose);border-radius:2px;
}

/* --- Étapes ----------------------------------------------------------- */
.me-etapes-bloc{margin-bottom:var(--me-pas-5)}
.me-etapes{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:860px){.me-etapes{grid-template-columns:repeat(3,1fr)}}
.me-etapes li{display:flex;gap:.9rem;align-items:flex-start}
.me-etapes__num{
  display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--me-degrade);color:var(--me-encre);
  font-family:var(--me-titre);font-weight:700;font-size:1rem;
}
.me-etapes__titre{font-family:var(--me-titre);font-size:1.05rem;line-height:1.2;margin:.3rem 0 .3rem}
.me-etapes__texte{font-size:.92rem;line-height:1.5;color:var(--me-encre-70);margin:0}

/* --- Carte de contact, variante annonceurs ---------------------------- */
.me-contact--annonceurs .me-contact__aparte{text-align:center}
.me-contact__portrait{width:120px;height:120px;border-radius:50%;margin:0 auto .8rem}
.me-contact__signature{font-family:var(--me-titre);font-size:1.15rem;margin:0}
.me-contact__role{font-size:.9rem;color:var(--me-encre-70);margin:.2rem 0 0}

/* Dernière page d'une liste : si le compte est impair, on ne retire rien
   (l'article serait perdu), on centre la vignette restante. */
@media (min-width:760px){
  .me-grille > .me-carte:last-child:nth-child(odd){
    grid-column:1 / -1;justify-self:center;width:min(100%,26rem);
  }
}

/* =====================================================================
   24. Signature de l'auteur, logos, bandeau : réglages fins
   ===================================================================== */

/* --- Signature dans la colonne --------------------------------------- */
.me-signature{
  position:relative;overflow:hidden;
  padding:1.4rem;border-radius:calc(var(--me-rayon) * 2.5);
  background:var(--me-encre);color:#fff;
}
.me-signature::after{
  content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--me-degrade);
}
.me-signature::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 80% at 100% 0%, rgba(255,49,123,.20), transparent 62%);
}
.me-signature__sur{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.1em;
  font-size:.68rem;color:var(--me-jaune);margin:0 0 .9rem;
}
.me-signature__pastille{
  width:6px;height:6px;border-radius:50%;background:var(--me-jaune);
  box-shadow:0 0 0 3px rgba(255,182,0,.22);
}
.me-signature__tete{position:relative;display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}
.me-signature__portrait{
  width:60px;height:60px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
}
.me-signature__nom{font-family:var(--me-titre);font-size:1.15rem;margin:0;line-height:1.1}
.me-signature__metier{font-size:.82rem;color:rgba(255,255,255,.6);margin:.15rem 0 0}
.me-signature__role{
  position:relative;font-size:.9rem;line-height:1.5;
  color:rgba(255,255,255,.78);margin:0 0 1.1rem;
}
.me-signature__liens{position:relative;display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.me-signature__lien{
  font-family:var(--me-titre);font-weight:600;font-size:.85rem;text-decoration:none;
  color:var(--me-encre);background:var(--me-degrade);
  padding:.5rem .9rem;border-radius:999px;
}
.me-signature__lien--doux{
  background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);
}
.me-signature__lien--doux:hover{box-shadow:inset 0 0 0 1.5px #fff}

/* --- À lire ensuite : deux par ligne, comme l'accueil ----------------- */
.me-grille--lies{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
@media (min-width:900px){
  .me-grille--lies{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Logos : plus grands, à l'échelle les uns des autres --------------- */
/* Vingt et une organisations : trois ou sept colonnes, jamais autre
   chose, pour que chaque rangée soit pleine à toutes les tailles. */
.me-refs__liste{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:1080px){
  .me-refs__liste{grid-template-columns:repeat(7,minmax(0,1fr))}
}
.me-refs__liste li{min-height:6.2rem;padding:1rem}
.me-refs__logo img{max-height:3.4rem;max-width:94%}

/* --- Bandeau newsletter ---------------------------------------------- */
/* Un souffle avant le pied de page, et un bloc plus clair : le noir plein
   écrasait la promesse au lieu de la mettre en avant. */
.me-bandeau-news{padding-bottom:var(--me-pas-3)}
.me-news--pied{
  background:linear-gradient(135deg,#0b2830 0%,#0a2228 60%,#0e2a31 100%);
}
.me-news--pied::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 90% 12%, rgba(255,49,123,.13), transparent 62%),
             radial-gradient(60% 110% at 10% 92%, rgba(255,182,0,.09), transparent 64%);
}
.me-news--pied > *{position:relative}
@media (min-width:900px){
  /* La colonne de droite ne se contente plus des trois puces : le
     formulaire monte à côté d'elles, et le vide disparaît. */
  .me-news--pied .me-news__corps{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    grid-template-rows:auto auto auto auto;
    gap:.4rem 3rem;
  }
  .me-news--pied .me-news__points{grid-area:1 / 2 / 3 / 3;align-self:start}
  .me-news--pied .me-news__form{grid-area:3 / 2 / 5 / 3;margin-top:1.1rem;align-self:start}
  .me-news--pied .me-news__pitch{margin-bottom:.6rem}
  .me-news--pied .me-news__champ{max-width:none;flex-direction:column;align-items:stretch}
  .me-news--pied .me-news__champ input[type="email"]{flex:0 0 auto;width:100%}
  .me-news--pied .me-news__champ .me-bouton{width:100%}
}

/* --- Une de la page auteur : un fond plus sombre, moins bariolé ------- */
.me-auteur-une::before{
  background:radial-gradient(120% 90% at 88% 10%, rgba(255,49,123,.13), transparent 62%),
             radial-gradient(90% 80% at 6% 96%, rgba(255,182,0,.10), transparent 64%),
             linear-gradient(180deg, rgba(2,12,15,.35), rgba(2,12,15,.55));
}

/* =====================================================================
   25. Partage : plus visible, centré, et une vraie feuille sur mobile
   ===================================================================== */

.me-partage{justify-content:center;gap:.55rem}
.me-partage__label{
  font-family:var(--me-titre);text-transform:uppercase;letter-spacing:.09em;
  font-size:.74rem;font-weight:600;color:var(--me-encre-45);
  width:100%;text-align:center;margin:0 0 .1rem;
}
.me-partage__liste{gap:.5rem;justify-content:center;flex-wrap:wrap}
.me-partage__lien{
  width:44px;height:44px;border-radius:999px;
  border:1px solid var(--me-trait);
  box-shadow:0 1px 2px rgba(7,32,38,.05);
  transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.me-partage__lien svg{width:18px;height:18px}
.me-partage__lien:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(7,32,38,.16)}
.me-partage__lien--x:hover{background:#000;border-color:#000}
.me-partage__lien--email:hover{background:var(--me-violet);border-color:var(--me-violet)}
.me-partage--haut{
  padding:var(--me-pas-2) 0;margin-bottom:var(--me-pas-4);
}
.me-partage--bas{
  padding-top:var(--me-pas-3);margin:var(--me-pas-4) 0 0;
}

/* Feuille de partage sur mobile : une carte pleine largeur au-dessus du
   bouton, au lieu d'une colonne étroite posée au milieu du texte. */
@media (max-width:900px){
  .me-partage-flottant__tiroir{
    position:fixed;left:.6rem;right:.6rem;bottom:5.2rem;
    transform:none;width:auto;padding:1rem .8rem;
    border-radius:calc(var(--me-rayon) * 4);
    box-shadow:0 20px 50px rgba(7,32,38,.28);
  }
  .me-partage--tiroir{
    flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;
    margin:0;padding:0;border:0;
  }
  /* Sept boutons au maximum, dont le partage natif du téléphone : la
     taille est calée pour qu'ils tiennent sur une seule rangée. */
  .me-partage--tiroir .me-partage__liste{max-width:none;justify-content:center;gap:.45rem}
  .me-partage--tiroir .me-partage__lien{width:40px;height:40px}
  .me-partage--tiroir .me-partage__lien svg{width:17px;height:17px}
}

/* --- Carte de contact sur petit écran --------------------------------- */
@media (max-width:640px){
  .me-contact,.me-contact--annonceurs{padding:1.3rem}
  .me-contact__liste li{grid-template-columns:1fr;gap:.15rem}
  .me-contact__liste a,.me-contact__liste li{overflow-wrap:anywhere}
  .me-contact__titre{font-size:1.35rem}
}
.me-contact__liste a{overflow-wrap:anywhere}

/* Un ancêtre transformé devient le référentiel des positions fixes : le
   translateX(-50%) du conteneur enfermait la feuille de partage dans la
   largeur du bouton. On centre donc sans transformation. */
@media (max-width:900px){
  .me-partage-flottant{
    left:0;right:0;transform:none;
    display:flex;justify-content:center;pointer-events:none;
  }
  .me-partage-flottant > *{pointer-events:auto}
}