/*
Theme Name:   Mad Mars
Theme URI:    https://madmars.eu
Description:  Thème enfant de GeneratePress pour Mad Mars. Reproduit le rendu de madmars.fr sans constructeur de pages.
Author:       moit-moit.fr
Author URI:   https://moit-moit.fr
Template:     generatepress
Version:      1.0.0
Text Domain:  madmars
License:      GNU General Public License v2 or later
*/

/* =========================================================
   1. VARIABLES — la charte, et rien que la charte.

   Toutes ces valeurs sont relevées sur madmars.fr : dans
   l'option Divi « et_divi », dans le CSS additionnel du site,
   ou au pixel sur les captures de IMG/reference-madmars-fr/.
   Aucune n'est inventée. Aucune couleur, aucun espacement ne
   doit apparaître en dur ailleurs dans ce fichier.
   ========================================================= */

:root {
  --bleu:         #1D4896;   /* en-tête, bandeaux, texte courant */
  --cyan:         #00AFDC;   /* accent_color, barre de bas de page */
  --orange:       #F29200;   /* link_color et header_color : les titres */
  --orange-doux:  #E59436;
  --saumon:       #E58C96;   /* fond du bandeau d'accueil et de la FAQ */
  --saumon-motif: #E06F78;   /* les gribouillis du motif */
  --vert:         #6AB38C;   /* fond du formulaire, boutons Contacter */
  --jaune:        #FCEE50;   /* fond de la section des trois liens, page Rejoignez-nous */
  --rose:         #E38B99;   /* survol des boutons */

  --papier:       #FFFFFF;
  --papier-ombre: #F7F8FA;
  --trait:        #E3E7EF;
  --gris:         #6B7489;
  --encre:        #000000;   /* le texte des boutons, comme sur madmars.fr */

  /* Affectation relevée dans et_divi : heading_font = Luckiest Guy,
     body_font = Anton, all_buttons_font = Abel. */
  --titre:   'Luckiest Guy', 'Comic Sans MS', cursive;
  --texte:   'Anton', 'Arial Narrow', Impact, sans-serif;
  --bouton:  'Abel', system-ui, -apple-system, sans-serif;

  --pas:    1rem;
  --pas-2:  2rem;
  --pas-3:  3rem;
  --pas-4:  4.5rem;

  --largeur:       1080px;   /* la largeur de contenu de Divi */
  --largeur-texte: 1080px;

  --rayon:      4px;
  --contour:    1px;
  --ombre:      0 1px 4px rgba(22, 32, 58, .10);
  --vitesse:    .16s;
}

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

*, *::before, *::after { box-sizing: border-box; }

/* Anton en texte courant à 16 px : c'est le réglage du site d'origine
   (body_font, body_font_size). C'est une police d'affichage, condensée
   et d'une seule graisse — d'où un interlignage large pour compenser. */
body {
  background: var(--papier);
  color: var(--bleu);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* Luckiest Guy porte ses capitales et son épaisseur dans son dessin :
   ni text-transform, ni fausse graisse. Elle n'existe qu'en 400. */
h1, h2, h3, h4, h5, h6, .mdm-titre, .mdm-carte__titre {
  font-family: var(--titre);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--orange);
  margin: 0 0 var(--pas);
  text-wrap: balance;
}

h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.45rem); }
h4 { font-size: 1.15rem; }
h5, h6 { font-size: 1rem; }

p { margin: 0 0 var(--pas); }

a { color: var(--orange); text-decoration: none; transition: color var(--vitesse) ease; }
a:hover, a:focus { color: var(--cyan); text-decoration: underline; }

strong { font-weight: 400; color: inherit; }
em { font-style: italic; }

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

hr { border: 0; border-top: 3px solid var(--cyan); margin: var(--pas-2) 0; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.mdm-invisible {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mdm-saut {
  position: absolute; left: -9999px; z-index: 999;
  background: var(--orange); color: var(--papier); padding: .75rem 1.25rem;
}
.mdm-saut:focus { left: 1rem; top: 1rem; }

/* =========================================================
   3. MISE EN PAGE
   ========================================================= */

.mdm-large  { width: min(100% - 3rem, var(--largeur)); margin-inline: auto; }
.mdm-etroit { width: min(100% - 3rem, 860px); margin-inline: auto; }

.mdm-section         { padding: var(--pas-4) 0; }
.mdm-section--serree { padding: var(--pas-3) 0; }

/* Les fonds de section du site d'origine. */
.mdm-section--bleue   { background: var(--bleu);   color: var(--papier); }
.mdm-section--saumon  { background: var(--saumon); color: var(--papier); }
.mdm-section--verte   { background: var(--vert);   color: var(--papier); }
.mdm-section--jaune   { background: var(--jaune);  color: var(--bleu); }
.mdm-section--blanche { background: var(--papier); }
.mdm-section--orange  { background: var(--orange-doux); color: var(--papier); }
.mdm-section--cyan    { background: var(--cyan); color: var(--papier); }
.mdm-section--rose    { background: var(--rose); color: var(--papier); }

/* Reprises du CSS additionnel de madmars.fr, qui visait des identifiants posés
   par Divi (`module_id`). Le générateur les reporte sur les blocs produits,
   donc ces trois règles continuent de s'appliquer là où elles s'appliquaient. */
.mdm-corps .mdm-grille#follow {
  width: min(100vw - 3rem, 640px);
  margin-inline: calc(50% - min(100vw - 3rem, 640px) / 2);
}
#newsletter h1 { color: var(--bleu); }
#logo_qui      { margin-bottom: 50px; }
#contact       { color: var(--papier); }
.mdm-section--ombre   { background: var(--papier-ombre); }

.mdm-section--bleue h2, .mdm-section--bleue h3,
.mdm-section--saumon h2, .mdm-section--saumon h3,
.mdm-section--verte h2, .mdm-section--verte h3 { color: var(--orange); }

.mdm-section--saumon h2, .mdm-section--saumon h3 { color: var(--bleu); }
/* Même raison sur le rose : l'orange des titres n'y tranche pas assez. */
.mdm-section--rose h2, .mdm-section--rose h3 { color: var(--bleu); }

/* Sur la page « Et si Marseille passait du PIB au BIB », le titre de
   section est centré et le texte reste au fer à gauche. */
.mdm-section--centree > * > h2,
.mdm-section--centree > * > h3 { text-align: center; }

.mdm-section--bleue a, .mdm-section--verte a { color: var(--orange); }
.mdm-section--bleue a:hover, .mdm-section--verte a:hover { color: var(--papier); }

.mdm-grille    { display: grid; gap: var(--pas-2); }
/* Un nombre de colonnes **fixe**, et non `auto-fit`.
   `repeat(auto-fit, minmax(…))` ne plafonne rien : il remplit la largeur
   disponible, et une grille à deux colonnes s'y retrouvait à trois dès que le
   conteneur s'élargissait. Divi pose un nombre de colonnes et le ramène à une
   seule sous 980 px. On fait pareil : c'est le rendu de madmars.fr, et c'est
   prévisible. */
.mdm-grille--2,
.mdm-grille--3,
.mdm-grille--4,
.mdm-grille--5 { grid-template-columns: 1fr; }

/* Cinq colonnes ne tiennent pas sur une tablette : elles passent par deux,
   puis par cinq quand la place est là. */
@media (min-width: 620px) {
  .mdm-grille--5 { grid-template-columns: repeat(2, 1fr); gap: var(--pas); }
}
@media (min-width: 981px) {
  .mdm-grille--2 { grid-template-columns: repeat(2, 1fr); }
  .mdm-grille--3 { grid-template-columns: repeat(3, 1fr); }
  .mdm-grille--4 { grid-template-columns: repeat(4, 1fr); }
  .mdm-grille--5 { grid-template-columns: repeat(5, 1fr); gap: var(--pas); }
}

/* Une bande de couleur va d'un bord à l'autre de la fenêtre, son contenu
   restant centré sur les 1024 px de madmars.fr. `clip` sur <html> évite les
   quelques pixels de défilement horizontal que `100vw` crée en présence d'une
   barre de défilement. */
html { overflow-x: clip; }

.mdm-corps > .mdm-section {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--pas-4);
  padding-inline: max(1.5rem, calc(50vw - 512px));
}
.mdm-corps > .mdm-section > *:last-child { margin-bottom: 0; }

/* Une bande en tête ou en pied de contenu colle au bandeau et au pied de page.
   `article.mdm-section` porte 72 px de marge intérieure, ce qui laissait une
   bande blanche de 72 px entre le bandeau bleu et le premier aplat. Chez Divi
   les sections se touchent. */
.mdm-corps > .mdm-section:first-child { margin-top: calc(0px - var(--pas-4)); }
.mdm-corps > .mdm-section:last-child  { margin-bottom: calc(0px - var(--pas-4)); }

/* Les grilles débordent de la colonne de lecture.
   `.mdm-etroit` tient le texte à 860 px, la bonne mesure pour lire un
   paragraphe — pas pour une galerie. madmars.fr donne 1024 px à ses rangées,
   relevé dans son rendu à 1280 px de fenêtre : 3 colonnes de 321, 4 de 233,
   2 de 496. Avec 1024 px et 2rem de gouttière on retombe sur 320, 232, 496. */
.mdm-corps .mdm-grille {
  width: min(100vw - 3rem, 1024px);
  margin-inline: calc(50% - min(100vw - 3rem, 1024px) / 2);
}

/* Une image de contenu ne dépasse pas sa case.
   **Portée limitée à `.mdm-corps`**, et ce n'est pas un détail : le pied de
   page dispose ses colonnes avec la même `.mdm-grille`, et son logo s'y
   trouvait. `.mdm-grille img` pèse (0,1,1) et battait `.mdm-pied__logo`, à
   (0,1,0) : le `height: auto` renvoyait le logo à sa taille native, 300×440.
   Le même logo, dans l'en-tête, sortait bien à 58 px — il n'est pas dans une
   grille. */
.mdm-corps .mdm-grille img { max-width: 100%; height: auto; }

.mdm-centre { text-align: center; }

.mdm-meta { font-size: .9rem; color: var(--orange); letter-spacing: .04em; }

/* =========================================================
   4. EN-TÊTE ET NAVIGATION

   Bleu, collant (divi_fixed_nav était actif), logo à gauche,
   menu en Anton capitales à droite, survol orange.
   ========================================================= */

.mdm-entete { background: var(--bleu); position: sticky; top: 0; z-index: 100; }

.mdm-entete__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pas); padding: .6rem 0;
}

/* Le logo est en portrait (300 × 440) : on le cale sur sa hauteur. */
.mdm-marque { display: inline-flex; align-items: center; text-decoration: none; }
.mdm-marque__logo { width: auto; height: 58px; display: block; }

.mdm-nav ul {
  display: flex; align-items: center; gap: 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
.mdm-nav a {
  font-family: var(--texte);
  font-size: 1.25rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--papier);
  text-decoration: none;
}
.mdm-nav a:hover, .mdm-nav a:focus { color: var(--orange); text-decoration: none; }
.mdm-nav .current-menu-item > a,
.mdm-nav .current_page_item > a,
.mdm-nav .current-menu-ancestor > a { color: var(--orange); }

.mdm-burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: .5rem; cursor: pointer;
}
.mdm-burger span {
  display: block; width: 26px; height: 3px;
  background: var(--orange-doux); border-radius: 2px;
  transition: transform var(--vitesse) ease, opacity var(--vitesse) ease;
}
.mdm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mdm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mdm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 980px) {
  .mdm-burger { display: flex; }
  .mdm-nav {
    position: absolute; inset: 100% 0 auto 0; background: var(--bleu);
    display: none; border-top: 1px solid rgba(255,255,255,.15);
  }
  .mdm-nav.est-ouvert { display: block; }
  .mdm-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mdm-nav li { border-bottom: 1px solid rgba(255,255,255,.12); }
  .mdm-nav a { display: block; padding: .9rem 1.25rem; color: var(--orange-doux); }
  .mdm-marque__logo { height: 48px; }
}

/* =========================================================
   5. BANDEAU DE PAGE

   Chaque page intérieure s'ouvre sur un aplat bleu, titre
   orange centré en Luckiest Guy, chapeau blanc en Anton.
   ========================================================= */

.mdm-bandeau { background: var(--bleu); color: var(--papier); padding: var(--pas-4) 0; text-align: center; }
.mdm-bandeau h1 { color: var(--orange); margin-bottom: var(--pas); }
.mdm-bandeau p  { color: var(--papier); margin-inline: auto; max-width: 70ch; }
.mdm-bandeau > .mdm-etroit > :last-child { margin-bottom: 0; }

/* L'accueil, lui, a un bandeau saumon à motifs. */
.mdm-accroche {
  background-color: var(--saumon);
  background-image: var(--mdm-motif, none);
  background-size: cover;
  background-position: center;
  color: var(--papier);
  /* 75vh : c'est #header_home{height:75vh} du site d'origine. En
     min-height plutôt qu'en height, pour qu'un texte long ne déborde pas. */
  min-height: 75vh;
  display: flex;
  align-items: center;
  padding: var(--pas-4) 0;
  text-align: center;
}
.mdm-accroche > * { width: 100%; }
.mdm-accroche h1 {
  color: var(--papier);
  font-size: clamp(2.2rem, 5.6vw, 4.4rem);   /* 70 px au plus : #header_home h2 */
  line-height: 1.12;
  margin-bottom: var(--pas-2);
}
.mdm-accroche p  { color: var(--bleu); margin-inline: auto; max-width: 78ch; }
/* Le chapeau de l'accroche : bleu sur le saumon, et non blanc comme le titre.
   Relevé sur madmars.fr — #1D4896, 18 px, Anton, centré. Sans cette règle il
   héritait du blanc de la section et se perdait dans le motif. */
.mdm-accroche__chapeau {
  color: var(--bleu);
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 62rem;
  margin-inline: auto;
}
.mdm-accroche__chapeau p { margin-bottom: var(--pas); }
.mdm-accroche__chapeau > :last-child { margin-bottom: 0; }

/* =========================================================
   6. COMPOSANTS
   ========================================================= */

/* Bouton. Vert plein, texte blanc en Abel — ce sont les boutons
   « Contacter » des fiches d'élus et le bouton du formulaire. */
.mdm-bouton {
  display: inline-block;
  font-family: var(--bouton);
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  background: var(--vert);
  border: 0; border-radius: var(--rayon);
  padding: .7rem 1.4rem;
  cursor: pointer;
  transition: background var(--vitesse) ease;
}
.mdm-bouton:hover, .mdm-bouton:focus { background: var(--rose); color: var(--encre); text-decoration: none; }
/* `.mdm-section--bleue a` pèse (0,2,0) et son survol (0,2,1) : l'un comme
   l'autre l'emportaient sur `.mdm-bouton`, et les trois boutons de l'accueil
   s'écrivaient en orange sur le vert — 1,05:1 de contraste, le texte
   disparaissait dans son fond. madmars.fr écrit les siens en noir sur ce
   même vert : 9,4:1. On reprend son choix, avec le poids qu'il faut pour
   qu'il s'applique. */
a.mdm-bouton, a.mdm-bouton:hover, a.mdm-bouton:focus { color: var(--encre); }
.mdm-bouton--bloc { display: block; width: 100%; text-align: center; }
/* Un bouton vert sur un aplat vert n'est plus un bouton : sur la page de
   contact, « Envoyer » flottait en blanc sur le vert, sans forme ni contour —
   fond du bouton et fond de la section au même `rgb(106,179,140)`.
   Sur ces sections il prend l'orange, qui est déjà la couleur des liens du
   thème sur fond vert. Même raisonnement pour le survol rose sur un aplat
   rose ou saumon. */
.mdm-section--verte .mdm-bouton { background: var(--orange); }
/* Et son survol, sinon rien ne se passe : `.mdm-bouton:hover` pèse (0,2,0)
   comme la règle ci-dessus, qui est écrite après — elle l'emportait jusque
   dans l'état survolé. Ici (0,3,0), donc elle gagne pour de bon. */
.mdm-section--verte .mdm-bouton:hover,
.mdm-section--verte .mdm-bouton:focus { background: var(--rose); color: var(--encre); }
.mdm-section--rose .mdm-bouton:hover,
.mdm-section--rose .mdm-bouton:focus,
.mdm-section--saumon .mdm-bouton:hover,
.mdm-section--saumon .mdm-bouton:focus { background: var(--bleu); color: var(--papier); }

/* Le bouton creux n'a pas de fond : il prend celui de la page, qui est
   blanc sur la 404 et sur une question du quizz. Son texte y était blanc
   aussi — seul le filet vert le trahissait. */
.mdm-bouton--creux {
  background: transparent; color: var(--bleu);
  box-shadow: inset 0 0 0 2px var(--vert);
}
a.mdm-bouton--creux { color: var(--bleu); }
.mdm-bouton--creux:hover { background: var(--vert); }

.mdm-boutons { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Carte d'article, telle qu'elle paraît en bas de l'accueil. */
.mdm-carte {
  display: flex; flex-direction: column;
  background: var(--papier);
  border: var(--contour) solid var(--trait);
  /* 20 px : la mesure de madmars.fr, relevée sur ses deux familles de cartes. */
  border-radius: 20px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow var(--vitesse) ease;
}
.mdm-carte:hover, .mdm-carte:focus-within { box-shadow: var(--ombre); text-decoration: none; }
.mdm-carte__image { /* Carrée, et non 3/2. Les visuels de madmars.fr sont carrés — 500x500 pour
     les icônes, 1024x1024 pour les illustrations — et il les affiche tels
     quels, à la largeur de la carte. Un cadrage 3/2 leur coupait le haut et
     le bas : c'est ce qui défigurait les logos Instagram et Facebook. */
  aspect-ratio: 1 / 1; object-fit: cover; width: 100%; display: block; }
/* Sans fond déclaré, madmars.fr pose la carte à nu sur l'aplat de la section :
   ni panneau, ni filet. C'est le rendu de la bande jaune de « Rejoignez-nous ». */
.mdm-carte--nu { background: transparent; border: 0; }
/* Le titre et le texte d'une carte importée sont des `<span>` : c'est ce que
   `mdm_repare_cartes()` en fait, dans functions.php, avant que `wpautop` ne
   passe. Un `<div>` ou un `<h3>` dans le lien de la carte faisait refermer son
   paragraphe au milieu, et laissait trois bandes blanches sous la vignette.
   Ces deux classes reprennent donc la mise en forme du `<h3>` et du `<p>`
   qu'elles remplacent — et le centrage de madmars.fr, qui pose l'intitulé sous
   la vignette, pas à côté. Elles ne servent qu'aux cartes importées : les
   cartes d'articles du thème gardent leur `<h3>` et restent alignées à gauche. */
.mdm-carte__titre, .mdm-carte__texte { display: block; margin: 0; text-align: center; }
.mdm-carte__titre { font-size: clamp(1.2rem, 2.1vw, 1.45rem); }
.mdm-carte__titre + .mdm-carte__texte { margin-top: .5rem; }

.mdm-carte__corps { padding: 1.2rem 1.3rem 1.4rem; }
.mdm-carte__corps h3 { margin-bottom: .5rem; }
.mdm-carte__corps p  { margin-bottom: 0; }

/* Fiche d'élu : portrait rond sur pastille rose, mandats, bouton vert. */
.mdm-elu {
  display: flex; gap: 1.25rem; align-items: flex-start;
  background: var(--papier);
  border: var(--contour) solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.5rem;
}
/* 118 px : mesuré sur la capture de la page des élus de madmars.fr.
   Les photos arrivent déjà détourées sur un aplat rose ; la couleur de
   fond ne sert donc que si une photo manque. */
.mdm-elu__portrait {
  /* 160 px : la mesure de madmars.fr, relevée dans son rendu. */
  flex: none; width: 160px; height: 160px; border-radius: 50%;
  object-fit: cover; background: var(--rose);
}
@media (max-width: 520px) {
  .mdm-elu { flex-direction: column; align-items: center; text-align: center; }
  .mdm-elu ul { text-align: left; }
}
.mdm-elu__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.mdm-elu__nom { font-family: var(--texte); font-size: 1.15rem; color: var(--gris); margin-bottom: .6rem; }
.mdm-elu ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.mdm-elu li { margin-bottom: .3rem; }
.mdm-elu .mdm-bouton { margin-top: auto; }

/* Les trois liens de la page Rejoignez-nous : une icône, un intitulé.
   Sur le site d'origine ils viennent de l'extension bambi-divi-blurbs ;
   ici c'est du balisage ordinaire, l'icône est une image ou un SVG. */
.mdm-liens-icones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--pas-2);
  text-align: center;
}
.mdm-lien-icone { display: block; text-decoration: none; }
.mdm-lien-icone:hover, .mdm-lien-icone:focus { text-decoration: none; }
.mdm-lien-icone img, .mdm-lien-icone svg {
  width: 92px; height: 92px; display: block; margin: 0 auto .9rem;
  object-fit: contain;
  transition: transform var(--vitesse) ease;
}
.mdm-lien-icone:hover img, .mdm-lien-icone:hover svg { transform: translateY(-3px); }
.mdm-lien-icone__nom {
  display: block;
  font-family: var(--titre);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--orange);
}

/* Dépliant de la FAQ : panneau blanc, question orange. */
/* Le panneau d'un dépliant est blanc : son texte ne peut pas hériter de la
   couleur de la section qui l'entoure. Sur l'aplat rose de la FAQ il en
   héritait le blanc — texte blanc sur panneau blanc, illisible. Le panneau
   fixe donc sa couleur lui-même, et ne dépend plus de son voisinage. */
.mdm-depliant {
  color: var(--bleu);
  background: var(--papier); border-radius: var(--rayon);
  margin-bottom: .75rem; box-shadow: var(--ombre);
}
.mdm-depliant > summary {
  font-family: var(--titre); font-size: 1.1rem; line-height: 1.3;
  color: var(--orange); padding: 1.1rem 1.4rem; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 1rem;
}
.mdm-depliant > summary::-webkit-details-marker { display: none; }
.mdm-depliant > summary::after {
  content: '+'; font-size: 1.5rem; color: var(--cyan); flex: none; line-height: 1;
  transition: transform var(--vitesse) ease;
}
.mdm-depliant[open] > summary::after { transform: rotate(45deg); }
.mdm-depliant__corps { padding: 0 1.4rem 1.3rem; }
.mdm-depliant__corps > :last-child { margin-bottom: 0; }

.mdm-pagination ul { display: flex; gap: .4rem; list-style: none; padding: 0; justify-content: center; }
.mdm-pagination a, .mdm-pagination span {
  display: block; padding: .5rem .85rem;
  border: var(--contour) solid var(--trait); border-radius: var(--rayon);
  text-decoration: none;
}
.mdm-pagination .current { background: var(--bleu); color: var(--papier); border-color: var(--bleu); }

/* ---- Archives : liste d'entrées, et colonne latérale ---- */

.mdm-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: var(--pas-3); }
@media (max-width: 860px) { .mdm-colonnes { grid-template-columns: minmax(0, 1fr); } }

.mdm-entree { padding-bottom: var(--pas-2); margin-bottom: var(--pas-2); border-bottom: var(--contour) solid var(--trait); }
.mdm-entree:last-of-type { border-bottom: 0; }
.mdm-entree__image { display: block; margin-bottom: var(--pas); }
.mdm-entree__image img { display: block; width: 100%; height: auto; border-radius: var(--rayon); }
.mdm-entree h2 { margin-bottom: .3rem; }
.mdm-entree h2 a { color: var(--orange); }
.mdm-entree h2 a:hover { color: var(--cyan); text-decoration: none; }
.mdm-entree__cats { font-size: .9rem; color: var(--orange); margin-bottom: .4rem; }
.mdm-entree__cats a { color: var(--orange); }

.mdm-widget {
  border: var(--contour) solid var(--trait);
  border-radius: 999px;
  padding: 1.1rem 1.4rem;
  margin-bottom: var(--pas);
  text-align: center;
}
.mdm-widget__titre { font-family: var(--bouton); font-size: 1rem; color: var(--bleu); margin: 0 0 .4rem; }
.mdm-widget ul { list-style: none; margin: 0; padding: 0; }
.mdm-widget li { margin-bottom: .3rem; }

/* =========================================================
   7. CORPS ÉDITORIAL

   Les articles paraissent sur fond blanc, texte bleu, pleine
   largeur, avec un filet cyan entre les grandes parties.
   ========================================================= */

.mdm-corps > :first-child { margin-top: 0; }
.mdm-corps > :last-child  { margin-bottom: 0; }
.mdm-corps h2 { margin-top: var(--pas-3); }
.mdm-corps h3 { margin-top: var(--pas-2); }

.mdm-corps ul, .mdm-corps ol { padding-left: 1.3rem; margin-bottom: var(--pas); }
.mdm-corps li { margin-bottom: .35rem; }

.mdm-corps blockquote {
  margin: var(--pas-2) 0; padding: .3rem 0 .3rem 1.4rem;
  border-left: 4px solid var(--orange);
}
.mdm-corps blockquote p:last-child { margin-bottom: 0; }

.mdm-corps figure { margin: var(--pas-2) 0; }
.mdm-corps figcaption { font-size: .9rem; color: var(--gris); margin-top: .5rem; }
.mdm-corps img { border-radius: var(--rayon); }
/* Les portraits d'élus sont des médaillons, pas des images de contenu.
   `.mdm-corps img` pèse (0,1,1) et battait `.mdm-elu__portrait`, à (0,1,0) :
   les médaillons sortaient en carré à coins arrondis de 4 px. Dix des dix-neuf
   portraits portent un aplat rose plein bord à bord, les neuf autres un disque
   rose détouré sur blanc — d'où un rendu tantôt rond, tantôt carré, que
   madmars.fr a lui aussi, faute d'arrondi en CSS. Ici on tranche : le cercle
   est au CSS, l'image ne décide plus de sa forme. */
.mdm-corps .mdm-elu__portrait { border-radius: 50%; }

.mdm-corps table { width: 100%; border-collapse: collapse; margin-bottom: var(--pas-2); }
.mdm-corps th, .mdm-corps td { border: var(--contour) solid var(--trait); padding: .6rem .8rem; text-align: left; }
.mdm-corps th { background: var(--papier-ombre); font-family: var(--titre); font-weight: 400; color: var(--orange); }

/* Fil d'Ariane, en haut des articles. */
.mdm-fil { font-size: .9rem; color: var(--orange); margin-bottom: .4rem; }
.mdm-fil a { color: var(--orange); }

/* Les intégrations : Framaforms, HelloAsso, vidéos. */
.mdm-cadre { width: 100%; min-height: 80vh; border: 0; display: block; }
.mdm-cadre--video { aspect-ratio: 16 / 9; min-height: 0; }

/* =========================================================
   8. FORMULAIRE

   Sur le site d'origine il paraît sur un aplat vert, libellés
   blancs, champs blancs.
   ========================================================= */

.mdm-champ { margin-bottom: var(--pas); max-width: 420px; }
.mdm-champ label {
  display: block; font-family: var(--texte); font-size: 1rem;
  color: var(--papier); margin-bottom: .25rem;
}
.mdm-champ input[type="text"],
.mdm-champ input[type="email"],
.mdm-champ input[type="search"],
.mdm-champ textarea {
  width: 100%; font: inherit; font-family: var(--bouton); font-size: 1rem;
  color: var(--bleu); background: var(--papier);
  border: 0; border-radius: 2px; padding: .5rem .6rem;
}
.mdm-champ textarea { min-height: 170px; resize: vertical; }
.mdm-champ--case { display: flex; align-items: flex-start; gap: .6rem; max-width: 560px; }
.mdm-champ--case label { font-family: var(--bouton); font-size: .95rem; }

/* Lettre d'information.

   Sur le site d'origine, le module d'inscription de Divi affichait l'encart
   Mailchimp par défaut : libellés gris, champs bordés, au milieu d'une page
   qui ne ressemblait à rien de tout cela. Ici le formulaire est natif —
   un POST direct vers Mailchimp — et porte la charte du site. */
.mdm-infolettre { max-width: 520px; }
.mdm-infolettre .mdm-champ { max-width: none; }
.mdm-infolettre .mdm-champ label {
  font-family: var(--bouton);
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--bleu);
}
.mdm-infolettre .mdm-champ input {
  border: var(--contour) solid var(--trait);
  padding: .6rem .75rem;
  border-radius: var(--rayon);
}
.mdm-infolettre .mdm-champ input:focus { border-color: var(--cyan); outline-offset: 0; }
.mdm-infolettre__mention { font-family: var(--bouton); font-size: .85rem; color: var(--gris); }
.mdm-infolettre__mention a { color: var(--orange); }

/* Piège à robots : jamais affiché, jamais annoncé. */
.mdm-piege { position: absolute; left: -9999px; }

.mdm-message {
  border-left: 4px solid var(--vert); background: rgba(255, 255, 255, .92);
  color: var(--bleu); padding: 1rem 1.2rem; margin-bottom: var(--pas-2);
  border-radius: var(--rayon); max-width: 560px;
}
.mdm-message--erreur { border-left-color: var(--rose); }
.mdm-message ul { margin: 0; padding-left: 1.2rem; }
.mdm-message > :last-child { margin-bottom: 0; }

/* =========================================================
   9. PIED DE PAGE
   ========================================================= */

.mdm-pied { background: var(--bleu); color: var(--papier); padding: var(--pas-4) 0 var(--pas-2); }
.mdm-pied h3 { color: var(--orange); font-size: 1.1rem; margin-bottom: .8rem; }
.mdm-pied a { color: var(--papier); text-decoration: none; }
.mdm-pied a:hover, .mdm-pied a:focus { color: var(--orange); text-decoration: underline; }
.mdm-pied ul { list-style: none; margin: 0; padding: 0; }
.mdm-pied li { margin-bottom: .4rem; }
.mdm-pied__logo { height: 64px; width: auto; margin-bottom: .9rem; }

/* La barre de bas de page est cyan : bottom_bar_background_color. */
.mdm-pied__bas {
  background: var(--cyan); color: var(--papier);
  margin-top: var(--pas-3); padding: .9rem 0; font-size: .9rem;
}
.mdm-pied__bas .mdm-large {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: var(--pas);
}
.mdm-pied__bas ul { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Sur l'aplat cyan, un lien blanc sans soulignement ne se distingue pas
   du texte : on le souligne d'emblée. */
.mdm-pied__bas a { text-decoration: underline; text-underline-offset: 2px; }
.mdm-pied__bas a:hover, .mdm-pied__bas a:focus { color: var(--bleu); }

/* =========================================================
   10. CONFORT ET IMPRESSION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .mdm-entete, .mdm-pied, .mdm-burger, .mdm-boutons, .mdm-pagination { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { text-decoration: underline; }
  .mdm-corps a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* =========================================================
   8. LES GRANDS ÉCRANS
   ========================================================= */

/* À 860 px de contenu dans une fenêtre de 1 512, il reste plus de 300 px de
   marge vide de chaque côté. Au-delà de 1 200 px de fenêtre, la page prend
   toute la place : bandes, grilles et cartes passent à 1 500 px.

   Le texte courant, lui, garde sa mesure. Une ligne de 1 500 px ne se lit
   pas — l'œil perd le début de la suivante en revenant à la ligne. Il
   s'aligne à gauche dans la colonne élargie, et c'est la mise en page que
   madmars.fr donne déjà à ses pages de texte. */
@media (min-width: 1200px) {
  .mdm-etroit { width: min(100% - 4rem, 1500px); }

  .mdm-corps > .mdm-section { padding-inline: max(2rem, calc(50vw - 750px)); }

  .mdm-corps .mdm-grille {
    width: min(100vw - 4rem, 1500px);
    margin-inline: calc(50% - min(100vw - 4rem, 1500px) / 2);
  }

  /* Le texte garde les 860 px qu'il avait, et se centre dans la colonne
     élargie. Essayé d'abord à 72 caractères : avec Anton, qui est étroite,
     cela faisait 569 px — une colonne maigre perdue au milieu de 1 448. */
  .mdm-corps > h1, .mdm-corps > h2, .mdm-corps > h3, .mdm-corps > h4,
  .mdm-corps > p, .mdm-corps > ul, .mdm-corps > ol, .mdm-corps > blockquote,
  .mdm-corps > .mdm-depliant,
  .mdm-corps > .mdm-section > h1, .mdm-corps > .mdm-section > h2,
  .mdm-corps > .mdm-section > h3, .mdm-corps > .mdm-section > h4,
  .mdm-corps > .mdm-section > p, .mdm-corps > .mdm-section > ul,
  .mdm-corps > .mdm-section > ol, .mdm-corps > .mdm-section > blockquote,
  .mdm-corps > .mdm-section > .mdm-depliant {
    max-width: 860px;
    margin-inline: auto;
  }

  /* La barre de recherche et la légende suivent la carte, pas le texte. */
  .mdm-carte-bloc { max-width: none; }
}

/* =========================================================
   9. LA FICHE D'UNE INITIATIVE, ET SURTOUT D'UN RÉCIT
   ========================================================= */

/* Ces règles vivent ici, et non dans carte.css : cette dernière n'est
   enfilée qu'avec une carte, et la fiche d'un récit n'en porte pas.

   L'image mise en avant ouvre la page d'un bord à l'autre. `100vw` et non
   `100%` : la fiche est posée dans un conteneur centré, et il faut en sortir.
   `html { overflow-x: clip }`, plus haut, absorbe les quelques pixels que
   `100vw` ajoute en présence d'une barre de défilement. */
.mdm-initiative__image {
  width: 100vw;
  margin: 0 0 var(--pas-3);
  margin-inline: calc(50% - 50vw);
}
.mdm-initiative__image img {
  display: block;
  width: 100%;
  height: clamp(240px, 46vh, 560px);
  object-fit: cover;
}
.mdm-initiative__image figcaption {
  max-width: 860px;
  margin: .6rem auto 0;
  padding-inline: 1.5rem;
  font-family: var(--bouton);
  font-size: .9rem;
  color: var(--gris);
}

.mdm-initiative__texte { padding-bottom: var(--pas-4); }

.mdm-initiative__themes {
  margin-bottom: .4rem;
  font-family: var(--bouton);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mdm-initiative__themes a { color: var(--gris); }
.mdm-initiative__themes a:hover { color: var(--orange); }

.mdm-initiative__lieu {
  font-family: var(--bouton);
  color: var(--gris);
  margin-bottom: var(--pas-2);
}

.mdm-initiative__contact { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.mdm-initiative__retour { margin-top: var(--pas-3); }