/*
Theme Name: 1MONTH1PROJECT
Theme URI: https://1month1project.com
Author: Seobooster Ltd
Author URI: https://seoboosterltd.com
Description: L'établi du créateur d'entreprise — thème sur mesure, écrit pour ce site.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: m1p-theme
*/

/* ==========================================================================
   0. TOKENS — clair par défaut, sombre par préférence système ET attribut
   ========================================================================== */
:root{
  --plan:        #C7CED2;
  --fiche:       #F1F4F4;
  --encre:       #0C1A20;
  --sourde:      #455860;
  --vert:        #14762A;
  --vert-tenu:   #0E5A20;

  --bande:       #0C1A20;
  --bande-encre: #E7EDEE;
  --bande-vert:  #6FD48A;

  --rayon: 3px;
  --conteneur: 1200px;
  --colonne-lecture: 680px;
  --gouttiere: 32px;
  --rythme: 96px;
  --barre-basse-h: 64px;

  --font-serif: "Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-sans: "Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root{
    --plan:        #141B1E;
    --fiche:       #1E282C;
    --encre:       #E7EDEE;
    --sourde:      #93A3A9;
    --vert:        #6FD48A;
    --vert-tenu:   #9BE6AF;

    --bande:       #E7EDEE;
    --bande-encre: #0C1A20;
    --bande-vert:  #14762A;
    color-scheme: dark;
  }
}
html[data-theme="dark"]{
  --plan:        #141B1E;
  --fiche:       #1E282C;
  --encre:       #E7EDEE;
  --sourde:      #93A3A9;
  --vert:        #6FD48A;
  --vert-tenu:   #9BE6AF;

  --bande:       #E7EDEE;
  --bande-encre: #0C1A20;
  --bande-vert:  #14762A;
  color-scheme: dark;
}
html[data-theme="light"]{
  --plan:        #C7CED2;
  --fiche:       #F1F4F4;
  --encre:       #0C1A20;
  --sourde:      #455860;
  --vert:        #14762A;
  --vert-tenu:   #0E5A20;

  --bande:       #0C1A20;
  --bande-encre: #E7EDEE;
  --bande-vert:  #6FD48A;
  color-scheme: light;
}

@media (max-width: 900px){ :root{ --gouttiere: 24px; --rythme: 64px; } }
@media (max-width: 480px){ :root{ --gouttiere: 20px; } }

/* ==========================================================================
   1. FONTES — self-hosted, aucune requête externe (P-086)
   ========================================================================== */
@font-face{
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces-Variable.woff2") format("woff2-variations"),
       url("assets/fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Instrument Sans";
  src: url("assets/fonts/InstrumentSans-Variable.woff2") format("woff2-variations"),
       url("assets/fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. RESET SOBRE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--plan);
  color: var(--encre);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-variant-numeric: lining-nums tabular-nums;
  padding-bottom: 0;
}
@media (max-width: 899px){
  body{ padding-bottom: var(--barre-basse-h); }
}
/* `height: auto` n'est pas cosmetique : WordPress ecrit width/height en attributs,
   donc sans lui toute image contrainte par max-width garde sa hauteur declaree et
   s'etire. Mesure le 27/08 : le hero de l'accueil sortait en 350x533 au lieu de
   350x117 sur telephone. Les regles object-fit plus loin restent prioritaires. */
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; }
ul,ol{ list-style: none; margin: 0; padding: 0; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; }
h1,h2,h3,h4{
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  margin: 0 0 .6em;
  text-transform: none;
  line-height: 1.15;
}
h1,h2{ text-wrap: balance; }
h1{ font-weight: 800; font-size: clamp(44px, 6vw, 64px); }
h2{ font-weight: 600; font-size: clamp(28px, 4vw, 38px); color: var(--encre); }
h3{ font-weight: 600; font-size: clamp(21px, 3vw, 25px); }
p{ margin: 0 0 1.2em; }
.m1p-surtitre{
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--sourde);
  font-weight: 600;
}
em{ font-family: var(--font-sans); font-style: italic; } /* réservé aux citations de texte officiel */
.m1p-italique-citation{ font-family: var(--font-sans); font-style: italic; }

/* Le verbe de tête de H2 (§5.6) — posé automatiquement par m1p_titre_verbe() */
h2 .m1p-verbe{ color: var(--vert); font-weight: 800; }
.m1p-bande .m1p-verbe, .m1p-bande-inversion .m1p-verbe{ color: var(--bande-vert); }

/* ==========================================================================
   3. GRILLE
   ========================================================================== */
.m1p-conteneur{
  max-width: var(--conteneur);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}
.m1p-colonne-lecture{
  max-width: var(--colonne-lecture);
  margin: 0 auto;
}
.m1p-bande{ padding: var(--rythme) 0; position: relative; }
.m1p-bande-plan{ background: var(--plan); }
.m1p-bande-fiche{ background: var(--fiche); }
.m1p-bande-encre{ background: var(--encre); color: var(--fiche); }
.m1p-bande-inversion{ background: var(--bande); color: var(--bande-encre); }
.m1p-bande-plan:not(:first-child)::before,
.m1p-bande-fiche:not(:first-child)::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--encre);
}
.m1p-grille{ display: grid; gap: var(--gouttiere); }
.m1p-grille-3{ grid-template-columns: repeat(3, 1fr); }
.m1p-grille-4{ grid-template-columns: repeat(4, 1fr); }
.m1p-grille-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){
  .m1p-grille-3, .m1p-grille-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .m1p-grille-3, .m1p-grille-4, .m1p-grille-2{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   4. EN-TÊTE — l'organigramme (§5.4 DA)
   ========================================================================== */
.m1p-site-header{
  background: var(--plan);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
}
.m1p-entete-barre{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gouttiere);
  padding-top: 1.25rem;
}
.m1p-marque{
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--encre);
  padding-bottom: .9rem;
}
.m1p-marque .m1p-glyphe{ width: 30px; height: 22px; color: var(--encre); }
.m1p-marque .m1p-logotype{
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
}

.m1p-organigramme{ flex: 1; display: flex; justify-content: center; }
.m1p-organigramme .m1p-tronc{
  display: flex;
  gap: clamp(1.5rem, 3vw, 3.25rem);
  border-top: 1px solid var(--encre);
}
.m1p-organigramme li{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  transition: padding-top .15s ease;
}
.m1p-organigramme li::before{
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 10px;
  background: var(--encre);
  transform: translateX(-50%);
  transition: height .15s ease;
}
.m1p-site-header.m1p-reduit .m1p-organigramme li::before{ height: 4px; }
.m1p-organigramme li:hover::before,
.m1p-organigramme li:focus-within::before{ height: 14px; }
.m1p-organigramme .m1p-noeud{
  width: 6px; height: 6px;
  border: 1px solid var(--encre);
  background: transparent;
  margin-bottom: .5rem;
}
.m1p-organigramme li.m1p-actif .m1p-noeud{ background: var(--vert); border-color: var(--vert); }
.m1p-organigramme li.m1p-actif::before{ width: 2px; }
.m1p-organigramme a{
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--encre);
  text-decoration: none;
  padding-bottom: .9rem;
  white-space: nowrap;
}

.m1p-action-entete{ padding-bottom: .9rem; }
.m1p-bouton-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vert);
  color: var(--fiche);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  padding: .8rem 1.5rem;
  border-radius: var(--rayon);
  text-decoration: none;
  border: 1px solid var(--vert);
  cursor: pointer;
}
.m1p-bouton-action:hover, .m1p-bouton-action:focus{ background: var(--vert-tenu); border-color: var(--vert-tenu); }
.m1p-bouton-action.m1p-pleine-largeur{ display: flex; width: 100%; }

.m1p-lien-secondaire{
  color: var(--encre);
  text-decoration: underline;
  text-underline-offset: .2em;
  font-family: var(--font-sans);
  font-size: 15px;
}
.m1p-bande-inversion .m1p-lien-secondaire, .m1p-bande-encre .m1p-lien-secondaire{ color: var(--bande-encre); }

@media (max-width: 899px){
  .m1p-organigramme, .m1p-action-entete{ display: none; }
  .m1p-entete-barre{ padding-top: 1rem; padding-bottom: 1rem; align-items: center; }
}

/* ==========================================================================
   5. BARRE BASSE MOBILE — imposée réseau (P-254), pas signature
   ========================================================================== */
.m1p-barre-basse-mobile{
  display: none;
}
@media (max-width: 899px){
  .m1p-barre-basse-mobile{
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--fiche);
    border-top: 1px solid var(--encre);
    padding: .5rem 0 calc(.4rem + env(safe-area-inset-bottom));
  }
  .m1p-barre-basse-mobile .m1p-conteneur{
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding-left: var(--gouttiere);
    padding-right: var(--gouttiere);
  }
  .m1p-barre-basse-mobile a{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    text-decoration: none;
    color: var(--sourde);
    font-family: var(--font-sans);
    font-size: 11px;
  }
  .m1p-barre-basse-mobile a.m1p-actif{ color: var(--encre); }
  .m1p-barre-basse-mobile a.m1p-actif .m1p-glyphe{ color: var(--vert); }
  .m1p-barre-basse-mobile .m1p-glyphe{ width: 20px; height: 15px; color: var(--sourde); }
}

/* ==========================================================================
   6. LE GLYPHE — assemblage à 3 étages, seul pictogramme du site (§5.1)
   ========================================================================== */
/* Sans dimension, un SVG inline prend la taille par defaut d'un element remplace
   (300x150) : dans les cartes de l'accueil le glyphe sortait a ~150 px de large et
   se lisait comme un squelette de chargement. On lui donne une taille de base ici,
   chaque contexte la redefinit s'il en veut une autre. */
.m1p-glyphe{ display: inline-block; fill: currentColor; width: 26px; height: 19px; flex: none; }
.m1p-carte-corps > .m1p-glyphe{ width: 24px; height: 18px; color: var(--sourde); margin-bottom: .9rem; }
.m1p-glyphe rect{ fill: currentColor; }
.m1p-glyphe.m1p-evide rect{ fill: none; stroke: currentColor; stroke-width: 1.5; }

/* puce de liste = glyphe en fond masqué */
.m1p-liste-glyphe{ list-style: none; margin: 0 0 1.2em; padding: 0; }
.m1p-liste-glyphe li{
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: .6em;
}
.m1p-liste-glyphe li::before{
  content: "";
  position: absolute;
  left: 0; top: .3em;
  width: 18px; height: 13px;
  background-color: currentColor;
  -webkit-mask: url("assets/img/assemblage.svg") no-repeat center / contain;
  mask: url("assets/img/assemblage.svg") no-repeat center / contain;
}

/* ==========================================================================
   7. LE HERO DES PAGES INTERNES — 4 blocs, jamais un bandeau (§7)
   ========================================================================== */
.m1p-hero-interne{ background: var(--plan); padding: calc(var(--rythme) * .85) 0 0; }
.m1p-hero-interne .m1p-hero-texte{ max-width: var(--colonne-lecture); }
.m1p-hero-interne h1{ margin-bottom: .5rem; }
.m1p-hero-interne .m1p-promesse{ font-size: clamp(17px,2vw,19px); color: var(--sourde); max-width: 60ch; margin-bottom: 2.25rem; }
.m1p-hero-interne .m1p-preuve{ margin-bottom: 2rem; }
.m1p-hero-interne .m1p-preuve-source{
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--sourde);
  margin-top: .75rem;
}
.m1p-hero-interne .m1p-preuve-source a{ color: var(--sourde); text-decoration: underline; }
.m1p-hero-interne .m1p-action{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: var(--rythme);
}
.m1p-hero-interne .m1p-hero-photo{
  aspect-ratio: 3 / 1;
  width: 100%;
  overflow: hidden;
  background: var(--fiche);
}
.m1p-hero-interne .m1p-hero-photo img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px){
  .m1p-hero-interne .m1p-action{ flex-direction: column; align-items: stretch; gap: 1rem; }
  .m1p-hero-interne .m1p-action .m1p-bouton-action{ order: -1; }
}

/* ==========================================================================
   8. LE CHIFFRE EN PAIRE — jamais un grand nombre seul (§5.2 DA)
   ========================================================================== */
.m1p-paire{ display: flex; align-items: stretch; }
.m1p-paire-item{ flex: 1; padding: 0 1.5rem; text-align: left; }
.m1p-paire-item:first-child{ padding-left: 0; }
.m1p-paire-chiffre{
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0;
  color: var(--encre);
}
.m1p-bande-inversion .m1p-paire-chiffre, .m1p-bande-encre .m1p-paire-chiffre{ color: var(--bande-encre); }
.m1p-paire-libelle{
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--sourde);
  margin-top: .6rem;
}
.m1p-bande-inversion .m1p-paire-libelle, .m1p-bande-encre .m1p-paire-libelle{ color: var(--bande-encre); opacity: .75; }
.m1p-paire-filet{ width: 1px; background: var(--encre); align-self: stretch; flex-shrink: 0; }
.m1p-bande-inversion .m1p-paire-filet, .m1p-bande-encre .m1p-paire-filet{ background: var(--bande-encre); }
.m1p-paire-source{ font-size: 14px; color: var(--sourde); margin-top: .75rem; }
@media (max-width: 480px){
  .m1p-paire-chiffre{ font-size: 44px; }
  .m1p-paire-item{ padding: 0 1rem; }
}

/* ==========================================================================
   9. LA DOUBLE UNITÉ — jours ouvrés + euros, toujours ensemble (§5.3 DA)
   ========================================================================== */
.m1p-double-unite{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--encre);
}
.m1p-double-unite .m1p-glyphe{ width: 16px; height: 12px; color: var(--vert); }
.m1p-bande-inversion .m1p-double-unite, .m1p-bande-encre .m1p-double-unite{ color: var(--bande-encre); }
.m1p-bande-inversion .m1p-double-unite .m1p-glyphe, .m1p-bande-encre .m1p-double-unite .m1p-glyphe{ color: var(--bande-vert); }

/* ==========================================================================
   10. LE CHEMIN CRITIQUE À DÉPENDANCES (§5.5)
   ========================================================================== */
.m1p-chemin-critique{ counter-reset: etape; }
.m1p-chemin-critique li{
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.75rem 0;
  border-top: 1px solid var(--encre);
}
.m1p-chemin-critique li:first-child{ border-top: none; }
.m1p-bande-inversion .m1p-chemin-critique li, .m1p-bande-encre .m1p-chemin-critique li{ border-color: var(--bande-encre); }
.m1p-chemin-critique .m1p-ordinal{
  flex: none;
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid currentColor;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 18px;
}
.m1p-chemin-critique .m1p-etape-titre{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 .5rem;
}
.m1p-chemin-critique .m1p-etape-verrou{
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--sourde);
  margin: 0;
}
.m1p-bande-inversion .m1p-etape-verrou, .m1p-bande-encre .m1p-etape-verrou{ color: var(--bande-encre); opacity: .8; }
.m1p-filet-verrou{ display: inline-block; width: 24px; height: 1px; background: currentColor; margin-right: .6rem; flex-shrink: 0; }

/* ==========================================================================
   11. CARTES — photo en pied, jamais en tête (§5.7)
   ========================================================================== */
.m1p-carte{
  display: flex;
  flex-direction: column;
  background: var(--fiche);
  border: 1px solid rgba(12,26,32,.18);
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  color: var(--encre);
}
html[data-theme="dark"] .m1p-carte{ border-color: rgba(231,237,238,.18); }
@media (prefers-color-scheme: dark){ .m1p-carte{ border-color: rgba(231,237,238,.18); } }
.m1p-carte-corps{ padding: 1.75rem; flex: 1; }
.m1p-carte-legende{ font-size: 14px; color: var(--sourde); padding: 0 1.75rem; margin-top: -.5rem; }
.m1p-carte-surtitre{ margin-bottom: .5rem; }
.m1p-carte-titre{ font-size: 21px; margin-bottom: .6rem; }
.m1p-carte-titre a{ text-decoration: none; color: inherit; }
.m1p-carte-resume{ color: var(--sourde); font-size: 15px; margin-bottom: 0; }
.m1p-carte-photo{
  aspect-ratio: 4 / 3;
  background: var(--plan);
  overflow: hidden;
}
.m1p-carte-photo img{ width: 100%; height: 100%; object-fit: cover; }
.m1p-carte-double-unite{ padding: 0 1.75rem 1.75rem; margin: 0; }

/* Cartes photo-en-bande 3:1 (silos, home bande 5) */
.m1p-carte-large{ display: flex; flex-direction: column; }
.m1p-carte-large .m1p-carte-photo{ aspect-ratio: 3 / 1; }

/* ==========================================================================
   12. FORMULAIRES — capture de lead (V1)
   ========================================================================== */
.m1p-formulaire-lead{
  background: var(--fiche);
  border: 1px solid rgba(12,26,32,.18);
  border-radius: var(--rayon);
  padding: 2rem;
}
.m1p-champ{ margin-bottom: 1.25rem; }
.m1p-champ label{
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sourde);
  margin-bottom: .4rem;
}
.m1p-champ input, .m1p-champ select, .m1p-champ textarea{
  width: 100%;
  background: var(--plan);
  color: var(--encre);
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  padding: .8rem 1rem;
}
.m1p-champ textarea{ min-height: 6rem; resize: vertical; }
.m1p-champ-rgpd{ font-size: 13px; color: var(--sourde); }
.m1p-champ-rgpd a{ color: var(--sourde); }
.m1p-leurre{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.m1p-confirmation-envoi{
  border-left: 3px solid var(--encre);
  padding: 1rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 15px;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   13. TABLEAUX — l'enveloppe .sbs_tableau vient du SOCLE (socle-mobile.php),
   on ne renomme pas cette classe-là : elle appartient au contrat partagé.
   ========================================================================== */
.sbs_tableau{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  margin: 0 0 1.5em;
}
table{
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 15px;
  font-variant-numeric: lining-nums tabular-nums;
}
th, td{
  padding: .85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid rgba(12,26,32,.18);
  vertical-align: top;
}
thead th{
  font-family: var(--font-serif);
  font-weight: 600;
  background: var(--plan);
}
tbody tr:last-child td{ border-bottom: none; }

/* ==========================================================================
   14. CORPS ÉDITORIAL — piliers, articles
   ========================================================================== */
.m1p-entree{ max-width: var(--colonne-lecture); margin: 0 auto; }
.m1p-entree h2{ margin-top: 2em; }
.m1p-entree h3{ margin-top: 1.6em; }
.m1p-entree p, .m1p-entree ul, .m1p-entree ol{ font-size: 17px; }
.m1p-entree ul:not(.m1p-liste-glyphe){ list-style: none; padding: 0; }
.m1p-entree ul:not(.m1p-liste-glyphe) li{ position: relative; padding-left: 1.5rem; margin-bottom: .5em; }
.m1p-entree ul:not(.m1p-liste-glyphe) li::before{ content: "–"; position: absolute; left: 0; color: var(--sourde); }
.m1p-entree blockquote{
  font-family: var(--font-sans);
  font-style: italic;
  border-left: 3px solid var(--encre);
  padding-left: 1.5rem;
  color: var(--sourde);
  margin: 1.5em 0;
}
.m1p-entree figure{ margin: 2em 0; }
.m1p-entree figcaption{ font-size: 14px; color: var(--sourde); margin-top: .6em; }
.m1p-entree a{ color: var(--vert-tenu); text-decoration-color: var(--vert); }
html[data-theme="dark"] .m1p-entree a{ color: var(--vert); }
@media (prefers-color-scheme: dark){ .m1p-entree a{ color: var(--vert); } }

.m1p-sommaire{
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.m1p-sommaire .m1p-surtitre{ margin-bottom: .75rem; }
.m1p-sommaire ol{ counter-reset: som; }
.m1p-sommaire li{ counter-increment: som; margin-bottom: .5em; font-size: 15px; }
.m1p-sommaire li::before{ content: counter(som) ". "; font-family: var(--font-serif); font-weight: 600; }
.m1p-sommaire a{ text-decoration: none; color: var(--encre); }

.m1p-temps-lecture{ font-size: 14px; color: var(--sourde); }

.m1p-bloc-citable{
  background: var(--fiche);
  border-left: 3px solid var(--vert);
  padding: 1.5rem 1.75rem;
  margin: 2em 0;
}
.m1p-bloc-citable p:last-child{ margin-bottom: 0; }

/* Bloc auteur avec écusson */
.m1p-bloc-auteur{
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid rgba(12,26,32,.18);
  border-radius: var(--rayon);
  background: var(--fiche);
  margin: 2.5rem 0;
}
.m1p-bloc-auteur .m1p-ecusson{
  flex: none;
  width: 3.25rem; height: 3.25rem;
  border: 1px solid var(--encre);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.m1p-bloc-auteur .m1p-ecusson img{ width: 100%; height: 100%; object-fit: cover; }
.m1p-bloc-auteur .m1p-ecusson .m1p-glyphe{ width: 22px; height: 16px; }
.m1p-bloc-auteur .m1p-auteur-nom{ font-family: var(--font-serif); font-weight: 600; margin: 0; }
.m1p-bloc-auteur .m1p-auteur-role{ font-size: 14px; color: var(--sourde); margin: .2em 0 0; }

.m1p-fraicheur{
  font-size: 13px;
  color: var(--sourde);
  border-top: 1px solid rgba(12,26,32,.18);
  padding-top: 1rem;
  margin-top: 2.5rem;
}

/* ==========================================================================
   15. RUBRIQUE / HUB / ARCHIVE — la grille avant tout texte
   ========================================================================== */
.m1p-tete-rubrique{ background: var(--plan); padding: var(--rythme) 0 calc(var(--rythme) * .6); }
.m1p-tete-rubrique .m1p-surtitre{ margin-bottom: .75rem; }
.m1p-grille-rubrique{ padding: calc(var(--rythme) * .6) 0 var(--rythme); }
.m1p-grille-rubrique .m1p-intro-rubrique{ max-width: var(--colonne-lecture); margin: 0 0 var(--rythme); }

/* ==========================================================================
   16. PIED DE PAGE — dense, 4 colonnes (§8)
   ========================================================================== */
.m1p-pied{ background: var(--encre); color: var(--fiche); }
.m1p-pied-grille{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gouttiere);
  padding: var(--rythme) 0 calc(var(--rythme) * .6);
}
@media (max-width: 700px){ .m1p-pied-grille{ grid-template-columns: repeat(2, 1fr); } }
.m1p-pied-colonne h4{
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--bande-encre, #E7EDEE);
  opacity: .7;
  margin-bottom: 1rem;
}
.m1p-pied-marque{ display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.m1p-pied-marque .m1p-glyphe{ width: 26px; height: 19px; }
.m1p-pied-marque .m1p-logotype{ font-family: var(--font-serif); font-weight: 800; font-size: 18px; }
.m1p-pied-colonne p{ font-size: 14px; color: var(--fiche); opacity: .85; }
.m1p-pied-colonne ul li{ margin-bottom: .6em; }
.m1p-pied-colonne a{ color: var(--fiche); text-decoration: none; font-size: 14px; opacity: .9; }
.m1p-pied-colonne a:hover{ text-decoration: underline; }
.m1p-pied-source{ font-size: 12px; opacity: .65; }
.m1p-pied-basse{
  border-top: 1px solid rgba(231,237,238,.2);
  padding: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  font-size: 13px;
}
.m1p-pied-basse ul{ display: flex; gap: 1.5rem; flex-wrap: wrap; }
.m1p-pied-basse a{ color: var(--fiche); opacity: .8; text-decoration: none; }
.m1p-pied-basse a:hover{ text-decoration: underline; }

/* ==========================================================================
   17. PAGE LÉGALE / 404
   ========================================================================== */
.m1p-page-legale{ background: var(--fiche); padding: var(--rythme) 0; }
.m1p-page-legale .m1p-entree{ padding-top: 2rem; }
.m1p-page-404{
  background: var(--plan);
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: var(--rythme) 0;
}
.m1p-page-404 .m1p-ordinal-404{
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(64px, 10vw, 120px);
  border: 1px solid var(--encre);
  display: inline-flex;
  padding: .2em .4em;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   18. UTILITAIRES
   ========================================================================== */
.m1p-sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.m1p-lien-saut{
  position: absolute; left: -9999px; top: 0;
  background: var(--fiche); color: var(--encre);
  padding: 1rem; z-index: 100;
}
.m1p-lien-saut:focus{ left: var(--gouttiere); }


/* Un libellé dont la page n'est pas encore en ligne : lisible, mais pas cliquable.
   Il redevient un lien tout seul le jour où la page sort de la file. */
.m1p-a-venir {
	color: var(--sourde);
	cursor: default;
}
a.m1p-carte.m1p-a-venir,
div.m1p-carte.m1p-a-venir { opacity: .72; }


/* ==========================================================================
   17. CORRECTIFS D'AFFICHAGE — mesures du 27/08/2026, captures 1440 et 390 px
   dans les deux modes. Corriges ICI et pas page par page (P-410).
   ========================================================================== */

/* La paire de chiffres poussait toute la page en defilement horizontal :
   93 px mesures a 390 px. Un enfant de flex vaut `min-width:auto`, donc un
   chiffre de 44 px refuse de se comprimer. On le laisse retrecir, et en
   dessous de 560 px les deux chiffres se rangent l'un sous l'autre. */
.m1p-paire-item{ min-width: 0; }
@media (max-width: 560px){
  .m1p-paire{ flex-direction: column; gap: 1.5rem; }
  .m1p-paire-item, .m1p-paire-item:first-child{ padding: 0; }
  .m1p-paire-filet{ width: 100%; height: 1px; align-self: stretch; }
}

/* Un bouton dont la page n'est pas encore en ligne heritait du fond vert ET
   de la couleur sourde : gris sur vert, illisible sur l'accueil. On lui donne
   son propre etat, neutre et contraste dans les deux modes. */
.m1p-bouton-action.m1p-a-venir{
  background: var(--plan);
  color: var(--encre);
  border-color: var(--encre);
  opacity: .65;
}
.m1p-bouton-action.m1p-a-venir:hover,
.m1p-bouton-action.m1p-a-venir:focus{ background: var(--plan); border-color: var(--encre); }

/* Un emplacement photo vide n'est pas un emplacement : c'est un rectangle gris.
   Tant qu'aucune image n'est posee, la carte se referme sur son texte. */
.m1p-carte-photo:empty{ display: none; }