/*
 * Makeda — feuille de style du theme.
 *
 * Reprise du bloc <style> de la maquette validee par le client
 * (MAQUETTE_ACCUEIL_VALIDEE_CLIENT.html, releve verbatim au rapport M-MESURE-03 §4).
 *
 * Trois differences, et trois seulement, avec le releve d'origine :
 *   1. Les variables --mk-charcoal, --mk-paper et les cinq couleurs de discipline
 *      exposees par theme.json ne sont plus declarees ici : les valeurs generees
 *      --wp--preset--color--* sont appelees a leur place, pour qu'une couleur n'ait
 *      qu'une seule source.
 *   2. Les variables sans usage editorial mesure — --mk-deep, les cinq teintes
 *      saturees du spectre, les arrets du ciel — sont conservees telles quelles.
 *   3. Aucun @font-face n'est ecrit : theme.json les genere.
 *
 * Rien d'autre n'est elague, y compris ce qui parait redondant avec theme.json :
 * une suppression demanderait une mesure de rendu qui n'a pas ete produite.
 */

:root{
  /* Couleurs decoratives, sans usage editorial mesure — non exposees dans l'editeur */
  --mk-deep:#2C2C2A;
  --mk-art:#D4537E; --mk-astro:#7F77DD; --mk-gastro:#EF9F27; --mk-sciences:#639922; --mk-tech:#2740B2;

  /* Derivees claires de la charte, qui les gouverne — libelles du hero sur pastille sombre, non exposees dans l'editeur */
  --mk-art-clair:#FF9DBE; --mk-astro-clair:#B9B2FF; --mk-gastro-clair:#FFCA7A; --mk-sciences-clair:#A6E07A; --mk-tech-clair:#9FB0FF;

  /* Alias vers les presets de theme.json — source unique */
  --mk-charcoal:var(--wp--preset--color--charcoal);
  --mk-paper:var(--wp--preset--color--paper);
  --mk-serif:var(--wp--preset--font-family--cormorant-garamond);
  --mk-sans:var(--wp--preset--font-family--jost);

  /* Chaine de hauteur de l'en-tete — lot H1.
     --mk-header-h est derivee : ne jamais la saisir en dur.
     Mesure d'origine : 24 + 8 + 34 + 8 + 24 = 98px au-dessus de 900px. */
  --mk-logo-h:40px;
  --mk-logo-pad-y:8px;
  --mk-header-pad-y:24px;
  --mk-header-pad-x:54px;
  --mk-header-h:calc(var(--mk-logo-h) + 2 * var(--mk-logo-pad-y) + 2 * var(--mk-header-pad-y));
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--mk-sans);color:var(--mk-paper);background:#3d3a54;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
/* Focus — lot S18. Deux traits concentriques tires des jetons : papier colle a
   la boite, encre juste au-dela. Le fond varie trop — papier, ciel du hero, pied
   charcoal, photographie — pour qu'un anneau d'une seule teinte reste lisible ;
   avec les deux, l'un des traits porte toujours le contraste.
   Trois pixels chacun, et non deux : sur une photographie de valeur moyenne,
   des traits de deux pixels se melangeaient a l'anti-crenelage et aucune de
   leurs composantes n'atteignait 3:1 (mesure : 2,56:1). */
:focus-visible{outline:3px solid var(--mk-charcoal);outline-offset:3px;box-shadow:0 0 0 3px var(--mk-paper)}

/* Lien d'evitement — lot S18. Premier element focalisable du document, hors du
   champ tant qu'il n'a pas le focus, puis pose en haut a gauche, au-dessus de
   l'en-tete. Il est deplace et non masque : display:none ou visibility:hidden
   le retireraient de l'ordre de tabulation, ce qui le rendrait inutile.
   L'indicateur de focus global l'entoure comme n'importe quelle autre commande. */
/* Le z-index n'est pose qu'au focus, et jamais au repos : sur l'accueil, un
   element empile au-dessus du hero change la couche de composition de l'affiche,
   qui est en mix-blend-mode, et son rendu bougeait de 47 niveaux sans que sa
   geometrie change d'un pixel. */
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{
  left:16px;
  top:16px;
  z-index:100;
  position:fixed;
  font-family:var(--mk-sans);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--mk-charcoal);
  background:var(--mk-paper);
  padding:12px 20px;
  border-radius:4px;
}

/* Le contenu principal recoit le focus a l'arrivee du lien d'evitement. Il n'est
   pas atteignable au Tab — tabindex vaut -1 — et n'a donc pas a porter
   d'indicateur : le focus n'y fait que passer, pour que la tabulation reprenne
   au premier element du contenu.
   Les DEUX traits sont annules, et pas seulement le contour : le navigateur
   tient ce focus pour visible, et le halo de papier cernait alors toute la
   hauteur du hero sur 3 px. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}

.site-header{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:var(--mk-header-pad-y) var(--mk-header-pad-x)}
.logo-wrap{background:var(--mk-paper);padding:var(--mk-logo-pad-y) 12px;border-radius:4px;display:inline-flex;box-shadow:0 8px 22px -10px rgba(0,0,0,.55)}
.logo-img{height:34px;width:auto;display:block}
.nav{display:flex;gap:34px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;align-items:center}
.nav a{text-decoration:none;color:var(--mk-paper);opacity:.9;text-shadow:0 1px 10px rgba(0,0,0,.35);transition:opacity .2s}
.nav a:hover{opacity:1}
.nav a[aria-current]{border-bottom:1px solid var(--mk-paper);padding-bottom:4px}

/* ---------- HERO artistique ---------- */
.hero{
  position:relative;min-height:100vh;overflow:hidden;
  /* Portee par le parent pour etre heritee par tous les descendants du hero, et non par l'affiche seule. */
  --aff-w:min(58vw,600px,calc(76vh - 87px));
  /* Ciel de crepuscule (peinture par degrades superposes). PLACEHOLDER : a doubler avec une vraie photo baobab/ciel en fond si souhaite. */
  background:
    radial-gradient(120% 80% at 82% 6%, rgba(30,28,64,0.60), transparent 55%),
    radial-gradient(95% 75% at 12% 16%, rgba(107,85,112,0.50), transparent 62%),
    radial-gradient(80% 60% at 60% 40%, rgba(212,83,126,0.16), transparent 60%),
    linear-gradient(to bottom, #3d3a54 0%, #6b5570 24%, #a67f7f 46%, #c9a982 66%, #e6d3ac 84%, #efe4cf 100%);
}
/* Poussiere d'etoiles, discrete */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 12%, rgba(250,248,243,.9), transparent),
    radial-gradient(1.2px 1.2px at 30% 22%, rgba(250,248,243,.7), transparent),
    radial-gradient(1.6px 1.6px at 68% 10%, rgba(250,248,243,.85), transparent),
    radial-gradient(1.1px 1.1px at 78% 20%, rgba(250,248,243,.6), transparent),
    radial-gradient(1.3px 1.3px at 46% 8%, rgba(250,248,243,.75), transparent),
    radial-gradient(1.2px 1.2px at 88% 30%, rgba(250,248,243,.55), transparent),
    radial-gradient(1.1px 1.1px at 8% 30%, rgba(250,248,243,.5), transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 32%,transparent 55%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 32%,transparent 55%);
}

.hero__affiche{position:absolute;right:5%;width:var(--aff-w);bottom:calc(var(--aff-w) * -0.07);z-index:2;mix-blend-mode:multiply}
.hero__affiche img{display:block;width:100%;height:auto}

.hero__text{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:150px 54px 0}
.eyebrow{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--mk-paper);opacity:.9;margin-bottom:26px}
.headline{font-family:var(--mk-serif);font-style:italic;font-weight:500;font-size:clamp(46px,8.4vw,120px);line-height:.96;letter-spacing:-0.02em;color:var(--mk-paper);text-shadow:0 3px 30px rgba(30,25,45,.35);max-width:11ch}
/* Bande des cinq disciplines du hero. Chaque nom repose sur une pastille d'encre
   qui le détache du ciel dégradé ; la couleur de la discipline est portée par le
   texte et par son soulignement. Au survol, le soulignement seul s'efface : la
   pastille et le texte restent à pleine opacité, l'épaisseur du trait est
   conservée, donc aucune dimension ni aucune couleur ne change. */
.disc-strip{display:flex;flex-wrap:wrap;gap:12px 8px;margin:38px 0 34px}
.disc-strip a{text-decoration:none;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;padding:5px 7px 4px;border-bottom:2px solid currentColor;background:var(--mk-charcoal);border-radius:999px;transition:border-bottom-color .2s}
@media (hover:hover){.disc-strip a:hover{border-bottom-color:transparent}}
.s-art{color:var(--mk-art-clair)} .s-astro{color:var(--mk-astro-clair)} .s-gastro{color:var(--mk-gastro-clair)} .s-sciences{color:var(--mk-sciences-clair)} .s-tech{color:var(--mk-tech-clair)}
.cta{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;text-decoration:none;color:var(--mk-charcoal);background:var(--mk-paper);padding:13px 28px;border-radius:40px;transition:gap .2s,opacity .2s}
.cta:hover{gap:16px;opacity:.9}

/* ---------- Spectre + footer ---------- */
.spectrum-band{display:flex;height:4px}.spectrum-band>div{flex:1}
.b1{background:var(--mk-art)}.b2{background:var(--mk-astro)}.b3{background:var(--mk-gastro)}.b4{background:var(--mk-sciences)}.b5{background:var(--mk-tech)}
.site-footer{background:var(--mk-charcoal);color:var(--mk-paper);padding:66px 54px 40px;text-align:center}
.footer-mark{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(250,248,243,.35);border-radius:50%;font-family:var(--mk-serif);font-size:20px;margin-bottom:20px}
.footer-baseline{font-family:var(--mk-serif);font-style:italic;font-size:18px;margin-bottom:30px}
/* La navigation vient de wp_nav_menu() : la disposition est portee par la liste,
   le <nav> ne gardant que la typographie, heritee par les liens. */
.footer-nav{font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-bottom:22px}
.footer-nav__liste{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.footer-nav a{text-decoration:none;opacity:.85}
.footer-social{display:flex;justify-content:center;gap:16px;margin-bottom:24px}
.footer-social a{width:30px;height:30px;border:1px solid rgba(250,248,243,.3);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--mk-paper);opacity:.85;transition:opacity .2s}
.footer-social a:hover{opacity:1}.footer-social svg{width:13px;height:13px}
.footer-contact{font-size:12px;color:rgba(250,248,243,.72);margin-bottom:22px}
.footer-legal{font-size:11px;color:rgba(250,248,243,.55);padding-top:22px;border-top:1px solid rgba(250,248,243,.15);margin-top:22px}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes riseAff{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.anim{opacity:0;animation:rise .7s ease forwards}
.hero__affiche.anim{animation-name:riseAff;animation-duration:.9s}
.d1{animation-delay:.1s}.d2{animation-delay:.22s}.d3{animation-delay:.34s}.d4{animation-delay:.46s}

@media (max-width:900.98px){
  .hero{min-height:auto;overflow:visible}
  .hero__text{padding:112px 24px 0}
  .headline{font-size:clamp(42px,12vw,80px);max-width:14ch}
  .hero__affiche{position:relative;right:auto;bottom:auto;width:min(82%,340px);margin:36px auto -6%;display:block}
  :root{--mk-header-pad-y:16px;--mk-header-pad-x:20px}
  .logo-img{height:30px}
  .nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim{opacity:1;animation:none}
  .hero__affiche.anim{animation:none}
}

/* ---------- AJOUT MAKEDA-08 ---------- */
/*
 * Adaptations rendues necessaires par le passage de la maquette a WordPress.
 * Rien ici ne modifie le rendu au-dessus de 900px : la maquette reste la reference.
 */

/* Le logo passe par custom-logo : WordPress rend une <img> dans un <a>. */
.logo-wrap .custom-logo-link{display:block;line-height:0}
.logo-wrap .custom-logo{height:var(--mk-logo-h);width:auto;display:block}
/* Repli quand aucun logo n'est pose */
.logo-text{font-family:var(--mk-serif);font-style:italic;font-size:20px;color:var(--mk-charcoal);text-decoration:none;display:block}

/* wp_nav_menu rend une liste : la neutraliser pour retrouver la disposition de la maquette. */
.nav__list{display:flex;gap:34px;align-items:center;list-style:none;margin:0;padding:0}
.nav__list li{margin:0}

/* Bouton du menu mobile — masque au-dessus de 900px, comme dans la maquette. */
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center}
.nav-toggle__bar{display:block;width:22px;height:1.5px;background:var(--mk-paper);box-shadow:0 1px 6px rgba(0,0,0,.35);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* L'affiche est desormais une <img> WordPress, qui porte ses propres attributs. */
.hero__affiche img{display:block;width:100%;height:auto}

@media (max-width:900.98px){
  /* La maquette masquait .nav sans remplacement. Le bouton prend sa place. */
  .nav-toggle{display:flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--mk-charcoal);padding:18px 20px}
  .nav.is-open{display:block}
  .nav__list{flex-direction:column;align-items:flex-start;gap:18px}
  .site-header{position:relative}
}
@media (prefers-reduced-motion:reduce){
  .nav-toggle__bar{transition:none}
}

/* =====================================================================
   LOT D1 + D1-c — GABARIT DES PAGES INTÉRIEURES
   Géométrie : trois rails (texte 680, large 1080, pleine largeur).
   Direction artistique : entrée composée au rail identitaire de 54px,
   registre typographique Makeda, visuel à la une facultatif.
   Bloc autonome, ajouté en fin de fichier. Ne concerne pas le hero (C2).
   ===================================================================== */

.pg{
  --pg-mesure:680px;
  --pg-large:1080px;
  --pg-marge:24px;
  --pg-decalage-entete:0px;
  --pg-encre:var(--mk-charcoal,#1C1C1C);
  --pg-papier:var(--mk-paper,#FAF8F3);
  --pg-serif:var(--mk-serif,"Cormorant Garamond",Georgia,serif);
  --pg-sans:var(--mk-sans,"Jost",system-ui,sans-serif);
  background:var(--pg-papier);
  color:var(--pg-encre);
  padding-top:calc(var(--pg-decalage-entete) + 44px);
  padding-bottom:96px;
}
@media (min-width:768px){
  .pg{--pg-marge:54px;padding-top:calc(var(--pg-decalage-entete) + 62px);padding-bottom:128px}
}
@media (min-width:901px){
  .pg{--pg-decalage-entete:var(--mk-header-h)}
}

/* ---- Entrée de page : au rail identitaire, pas dans la colonne ---- */
.pg__entete{padding:0 var(--pg-marge);margin:0 0 72px}
.pg__surligne{
  margin:0 0 22px;
  font-family:var(--pg-sans);font-size:11px;font-weight:400;
  line-height:1;letter-spacing:2.5px;text-transform:uppercase;
  color:color-mix(in srgb,var(--pg-encre) 55%,transparent);
}
.pg__titre{
  margin:0;max-width:18ch;
  font-family:var(--pg-serif);font-weight:500;
  font-size:clamp(38px,6.4vw,72px);line-height:.96;letter-spacing:-.02em;
}
.pg__reglure{display:flex;margin-top:30px;width:140px}
.pg__reglure i{display:block;height:4px;flex:1}
.pg__reglure i:nth-child(1){background:var(--mk-art,#D4537E)}
.pg__reglure i:nth-child(2){background:var(--mk-astro,#7F77DD)}
.pg__reglure i:nth-child(3){background:var(--mk-gastro,#EF9F27)}
.pg__reglure i:nth-child(4){background:var(--mk-sciences,#639922)}
.pg__reglure i:nth-child(5){background:var(--mk-tech,#2740B2)}

/* ---- Visuel à la une : facultatif, jamais un second hero ---- */
.pg--avec-une .pg__entete{margin-bottom:44px}
.pg__une{margin:0 0 76px;padding:0 var(--pg-marge)}
.pg__une img{
  display:block;width:100%;height:auto;
  aspect-ratio:3 / 2;max-height:58vh;object-fit:cover;
}
.pg__une figcaption{
  margin-top:14px;
  margin-left:max(0px,calc((100% - var(--pg-mesure)) / 2));
  max-width:var(--pg-mesure);
  font-family:var(--pg-sans);font-size:11px;line-height:1.5;
  letter-spacing:2.5px;text-transform:uppercase;
  color:color-mix(in srgb,var(--pg-encre) 50%,transparent);
}

/* ---- Corps : trois rails ---- */
.pg__corps{
  display:grid;
  grid-template-columns:
    [pleine-debut] minmax(var(--pg-marge),1fr)
    [large-debut] minmax(0,calc((var(--pg-large) - var(--pg-mesure)) / 2))
    [texte-debut] min(100% - var(--pg-marge) * 2,var(--pg-mesure))
    [texte-fin] minmax(0,calc((var(--pg-large) - var(--pg-mesure)) / 2))
    [large-fin] minmax(var(--pg-marge),1fr)
    [pleine-fin];
  font-family:var(--pg-sans);
  font-size:17px;
  line-height:1.75;
}
.pg__corps > *{grid-column:texte-debut / texte-fin;min-width:0}
.pg__corps > .alignwide{grid-column:large-debut / large-fin}
.pg__corps > .alignfull{grid-column:pleine-debut / pleine-fin}
.pg__corps > *:first-child{margin-top:0}
.pg__corps > *:last-child{margin-bottom:0}

.pg__corps > p{margin:0 0 1.35em}

/* h2 : sort au rail large, il scande la page */
.pg__corps > h2{
  grid-column:large-debut / large-fin;
  margin:2.6em 0 .55em;max-width:22ch;
  font-family:var(--pg-serif);font-weight:500;
  font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.01em;
}
/* h3 : étiquette éditoriale, registre de la navigation */
.pg__corps > h3{
  margin:3.2em 0 1em;
  font-family:var(--pg-sans);font-size:11px;font-weight:500;
  line-height:1;letter-spacing:2.5px;text-transform:uppercase;
  color:color-mix(in srgb,var(--pg-encre) 70%,transparent);
}
.pg__corps > h4,.pg__corps > h5,.pg__corps > h6{
  margin:2.4em 0 .6em;
  font-family:var(--pg-serif);font-weight:500;
  font-size:1.375rem;line-height:1.3;
}
/* Deux titres consécutifs ne cumulent pas leurs respirations */
.pg__corps > h2 + h3,.pg__corps > h3 + h2{margin-top:1.2em}

.pg__corps > ol{margin:0 0 1.35em;padding-left:1.3em}
.pg__corps > ul{margin:0 0 1.35em;padding-left:0;list-style:none}
.pg__corps li{margin:0 0 .5em}
.pg__corps > ul li{position:relative;padding-left:22px}
.pg__corps > ul li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:8px;height:2px;background:currentColor;opacity:.5;
}

.pg__corps a{
  color:inherit;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.2em;
  text-decoration-color:color-mix(in srgb,var(--pg-encre) 35%,transparent);
}
.pg__corps a:hover{text-decoration-color:var(--mk-art,#D4537E)}
.pg__corps strong{font-weight:500}

/* Citation : au rail large, sans barre — une pause, pas un paragraphe orné */
.pg__corps > blockquote,.pg__corps > figure.wp-block-quote{
  grid-column:large-debut / large-fin;
  margin:4em 0;padding:0;border:0;
}
.pg__corps > blockquote p,.pg__corps > figure.wp-block-quote p{
  margin:0 0 .4em;max-width:24ch;
  font-family:var(--pg-serif);font-weight:400;font-style:normal;
  font-size:clamp(25px,2.9vw,34px);line-height:1.3;letter-spacing:-.01em;
  color:color-mix(in srgb,var(--pg-encre) 82%,transparent);
}
.pg__corps > blockquote cite,
.pg__corps > blockquote figcaption,
.pg__corps > figure.wp-block-quote figcaption{
  display:block;margin-top:20px;font-style:normal;
  font-family:var(--pg-sans);font-size:11px;letter-spacing:2.5px;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--pg-encre) 50%,transparent);
}

/* Visuels dans le flux */
.pg__corps > figure{margin:3.4em 0}
.pg__corps > figure + figure{margin-top:1.6em}
.pg__corps img{max-width:100%;height:auto;display:block}
.pg__corps > figure figcaption{
  margin-top:14px;
  font-family:var(--pg-sans);font-size:11px;line-height:1.5;
  letter-spacing:2.5px;text-transform:uppercase;
  color:color-mix(in srgb,var(--pg-encre) 50%,transparent);
}
/* Légende alignée sur la colonne de texte, même sous un visuel large */
.pg__corps > figure.alignwide figcaption,
.pg__corps > figure.alignfull figcaption{
  margin-left:max(0px,calc((100% - var(--pg-mesure)) / 2));
  max-width:var(--pg-mesure);
}

/* L'indicateur global du lot S18 vaut aussi ici : la surcharge bleue de ce
   contexte est retiree, pour que le focus ait une seule forme sur tout le site. */

/* ---- Portrait rond : style de bloc, choisi dans l'éditeur.
   Sélecteur volontairement libre de tout contexte de page : le style
   est enregistré pour core/image, il doit valoir partout où un bloc
   image le porte — pages, articles, et ce qui viendra. ---- */
.is-style-makeda-portrait img{
  width:min(var(--mk-portrait,180px),100%);
  aspect-ratio:1;
  object-fit:cover;
  border-radius:50%;
}
.is-style-makeda-portrait figcaption{
  max-width:min(var(--mk-portrait,180px),100%);
  margin-left:0;
}

@media (max-width:767.98px){
  .pg__une figcaption{margin-left:0}
  .pg__corps > figure.alignwide figcaption,
  .pg__corps > figure.alignfull figcaption{margin-left:0}
}

/* =====================================================================
   LOT D2 — EN-TÊTE DES PAGES INTÉRIEURES (encre sur papier)
   Portée : .site-header--interieur seul. L'accueil garde les lignes 37 à 43.
   La reteinture des liens est bornée à min-width:901px : sous 900px, le
   panneau déroulant est charcoal (ligne 146) et ses liens papier y sont
   corrects. Aucun jeton nouveau, aucune expression à espaces significatifs.
   ===================================================================== */

.site-header--interieur .logo-wrap{background:none;box-shadow:none;border-radius:0}

@media (min-width:901px){
  /* La carte disparue, le bord visible devient celui de l'image : il rejoint
     le rail de 54, celui du titre de page. Rembourrage vertical intouché. */
  .site-header--interieur .logo-wrap{padding-left:0}

  /* Règles explicites : .nav a n'a ni famille ni interligne propres. */
  .site-header--interieur .nav a{
    position:relative;
    font-family:var(--mk-sans);
    font-size:11px;
    line-height:1.5;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--mk-charcoal);
    opacity:1;
    text-shadow:none;
  }

  /* Survol en filet posé hors flux : aucune conséquence de disposition,
     et il vient exactement là où se pose le filet du lien courant. */
  .site-header--interieur .nav a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-5px;
    height:1px;
    background:var(--mk-art);
    opacity:0;
    transition:opacity .2s;
  }
  .site-header--interieur .nav a:not([aria-current]):hover::after{opacity:1}

  /* Le lien courant garde son filet de la ligne 43 : seule la teinte change. */
  .site-header--interieur .nav a[aria-current]{border-bottom-color:var(--mk-charcoal)}
}

@media (max-width:900.98px){
  /* Moitié mobile du même défaut : les barres du bouton sont papier sur papier. */
  .site-header--interieur .nav-toggle__bar{background:var(--mk-charcoal);box-shadow:none}
}

/* Focus visible — les deux en-têtes. currentColor suivait le camp du texte,
   ce qui le rendait papier sur le crépuscule clair du bas du hero. L'indicateur
   à deux traits du lot S18 s'en charge désormais, sur les deux en-têtes. */

@media (prefers-reduced-motion:reduce){
  .site-header--interieur .nav a::after{transition:none}
}

/* =====================================================================
   LOT D2-c — CORRECTIFS DE D2 (relevé D2-b du 12/09/2026)
   Sous 901px, .site-header repasse dans le flux (ligne 149) et se pose sur
   le fond du body, mesuré rgb(61,58,84). L'encre de D2 y devient illisible.
   Le papier est rendu à l'en-tête intérieur sur cette seule plage ; la cause
   de fond — un fond de document qui appartient à l'accueil — est relevée,
   non traitée ici.
   ===================================================================== */

@media (max-width:900.98px){
  .site-header--interieur{background:var(--mk-paper)}

  /* Le rail des pages intérieures vaut 24px en étroit : l'en-tête l'adopte,
     et le bord visible du logo vient dessus. Rembourrages verticaux intouchés :
     la hauteur mesurée de 82px ne bouge pas. */
  .site-header--interieur{padding-left:24px;padding-right:24px}
  .site-header--interieur .logo-wrap{padding-left:0}
}

/* Accueil : le contour de focus du lien du logo était papier sur un cartouche
   papier, donc invisible. L'indicateur à deux traits du lot S18 porte l'encre
   à l'extérieur et rend cette surcharge inutile. */

/* ------------------------------------------------------------------
   Lot E3-2-b — grammaire de galerie, strate 1, CSS seul — 13/09/2026
   Gel des valeurs arbitrees a l'ecran au vu de la mission E3-1-R,
   et correction de specificite etablie par le rapport E3-2.

   VALEURS ARRETEES : 3 colonnes, cellule carree, gouttiere 20 px.
   Le carre est retenu parce que le corpus ne contient aucun carre :
   il repartit l'amputation entre les deux orientations, 25 pour cent
   de largeur sur un paysage 4:3, 25 pour cent de hauteur sur un
   portrait 3:4, la ou le 4:3 amputait un portrait de 43,8 pour cent.

   REGLE EDITORIALE que cette grammaire presuppose : la galerie
   recadree accueille les PHOTOGRAPHIES. Les DOCUMENTS — affiches,
   programmes, visuels dont la lisibilite tient a leur composition
   integrale — n'y ont pas leur place et vont dans le corps de la
   page, en pleine mesure, non recadres. Le recadrage est donc
   assume sans exception, et aucune echappatoire n'est prevue ici.

   Generique : aucun millesime, aucun identifiant de media, aucun nom
   de fichier, aucun selecteur propre a une edition. DEC-MAKEDA-26.
   Strate 1 au sens de DEC-MAKEDA-47 : aucun PHP, aucun theme.json.
   Disposition en grid : une rangee de queue incomplete laisse des
   cellules vides au lieu de s'etirer — le flex-grow du coeur est
   inerte, verifie au rendu par E3-1-R.
   Le recadrage reste porte par is-cropped, regle du coeur, que ce
   bloc ne reecrit pas.

   POURQUOI TROIS :not(#individual-image). Le coeur protege ses
   largeurs de figure par ce meme idiome, qui vaut un identifiant.
   E3-1-R a montre que le theme et le coeur etaient a egalite a
   (1,4,1), et que seul l'ordre d'enfilement des feuilles tranchait.
   Le double :not portait le theme a (2,4,1), suffisant contre la
   regle ordinaire et contre celle des galeries d'une image, mais
   INSUFFISANT contre celle qui gouverne la seconde figure d'une
   galerie de DEUX images : le coeur y emploie deja deux :not, soit
   (2,7,2), et l'emportait sur les classes. Le triple :not porte le
   theme a (3,4,1). La comparaison de specificite etant
   lexicographique, trois identifiants l'emportent sur deux avant
   meme que les classes soient comparees. La grammaire gouverne donc
   toutes les galeries, y compris celles d'une et de deux images,
   et par SPECIFICITE — non par ordre d'enfilement.
   ------------------------------------------------------------------ */

.pg__corps > .wp-block-gallery{
  grid-column:large-debut / large-fin;
  margin-block:2rem;
}

.pg__corps > .wp-block-gallery.has-nested-images{
  --mk-gal-cols:3;
  --mk-gal-ratio:1 / 1;
  --mk-gal-gap:20px;
  --wp--style--unstable-gallery-gap:var(--mk-gal-gap);
  display:grid;
  grid-template-columns:repeat(var(--mk-gal-cols),minmax(0,1fr));
  gap:var(--mk-gal-gap);
  align-items:stretch;
}

.pg__corps > .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image):not(#individual-image):not(#individual-image){
  width:auto;
  max-width:none;
  margin:0;
  min-width:0;
  aspect-ratio:var(--mk-gal-ratio);
}

@media (max-width:900.98px){
  .pg__corps > .wp-block-gallery.has-nested-images{--mk-gal-cols:2}
}

@media (max-width:767.98px){
  .pg__corps > .wp-block-gallery.has-nested-images{--mk-gal-gap:12px}
}

/* ------------------------------------------------------------------
   Lot H2 — habillage de l'en-tete, variante B « Spectre ».
   Generique : aucun millesime, aucun identifiant de media.
   La geometrie reste commune aux deux contextes (invariant H2) ;
   seules le fond et les elements chromatiques varient.
   ------------------------------------------------------------------ */

/* Terminaison spectrale de l'en-tete interieur.
   L'en-tete etant absolu au-dessus de 900px, la bande l'accompagne
   hors flux et ne pousse pas .pg. */
.site-header--interieur::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:linear-gradient(90deg,
    var(--mk-art) 0 20%,
    var(--mk-astro) 20% 40%,
    var(--mk-gastro) 40% 60%,
    var(--mk-sciences) 60% 80%,
    var(--mk-tech) 80% 100%);
  pointer-events:none;
}

/* Etat actif, survol et focus — contexte large, encre sur papier.
   La teinte est posee explicitement : currentColor ne garantit pas
   le contraste dans les deux contextes (constat H2-0, etape 6). */
@media (min-width:901px){
  .site-header--interieur .nav a[aria-current]{
    border-bottom-color:var(--mk-charcoal);
  }
  .site-header--interieur .nav a:hover{
    opacity:1;
  }
}

/* Etat actif — contexte etroit, panneau ouvert, papier sur charcoal. */
@media (max-width:900.98px){
  .site-header--interieur .nav a[aria-current]{
    border-bottom-color:var(--mk-paper);
  }
}

/* ------------------------------------------------------------------
   Lot V1-IMPL — bouton de visionneuse des galeries recadrées.

   Le filtre PHP du thème pose scale = 'contain' sur les images d'une
   galerie recadrée, pour que la visionneuse montre la photographie
   entière. En retour, view.js du cœur calcule la position du bouton
   d'agrandissement sur le rectangle « contain » de l'image dans la
   vignette, et non sur la vignette : le bouton se décolle d'un bord
   et pas de l'autre, d'une valeur qui suit le format de chaque photo
   (mesuré : jusqu'à 117 px en haut, 83 px à droite).

   Le cœur pose ces valeurs en style en ligne ; !important est donc
   le seul moyen de les reprendre. Les 16 px restaurés sont ceux du
   cœur lui-même. La règle ne vise que les galeries recadrées : hors
   de ce cas, le calcul du cœur reste juste et n'est pas touché.
   ------------------------------------------------------------------ */

.wp-block-gallery.is-cropped figure.wp-block-image .lightbox-trigger{
  top:16px !important;
  right:16px !important;
}

/* ------------------------------------------------------------------
   Lot S17 — habillage de la visionneuse.

   DEC-MAKEDA-45 active la mécanique du cœur et laisse l'habillage au
   thème : fond, fermeture, flèches. Le fond quitte le blanc laiteux du
   cœur pour un voile de papier légèrement encré, mélangé à partir des
   deux jetons du thème et gardé translucide à 92 pour cent : la page
   transparaît en texture, sans concurrencer la photographie. Les
   commandes sont des pastilles de papier à l'encre. Aucun ornement
   ajouté : la photographie reste seule sur le fond.

   Trois propriétés du cœur commandent la forme des règles ci-dessous.

   1. Le fond est un élément, .scrim, dont la couleur est posée en
      STYLE EN LIGNE par view.js — background-color:#fff. Reprendre
      cette couleur exige !important, comme le remplissage des icônes.

   2. Son opacité, en revanche, ne doit surtout pas être reprise en
      !important. Sous @media not (prefers-reduced-motion), le cœur
      anime .zoom.active .scrim par turn-on-visibility .4s forwards,
      dont l'image finale est opacity:1. Une déclaration normale perd
      contre l'animation tant qu'elle joue, puis s'applique : le fondu
      d'ouverture reste intact — condition 5 de DEC-MAKEDA-62 — et le
      fond est plein une fois ouvert, animation ou non. Un !important
      l'emporterait sur l'animation et supprimerait le fondu.

   3. Le fond et la bordure des trois boutons sont posés par
      …:not(:hover):not(:active):not(.has-background), soit (0,5,0) :
      seul !important les reprend. Les longhands sont écrits un à un,
      le raccourci background ne reprenant pas la main sur ce
      sélecteur. Les dimensions, elles, relèvent de règles à (0,2,0)
      que la présente feuille, enfilée après, emporte sans forçage.

   L'agrandissement du déclencheur clôt le bloc : il appartient à la
   piste D et non à l'habillage, et n'est ici que sur demande expresse.
   ------------------------------------------------------------------ */

.wp-lightbox-overlay .scrim{
  background-color:color-mix(in srgb,
    color-mix(in srgb, var(--mk-paper) 80%, var(--mk-deep)) 92%, transparent) !important;
}

.wp-lightbox-overlay.zoom .scrim,
.wp-lightbox-overlay.active .scrim{
  opacity:1;
}

.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  background-color:var(--mk-paper) !important;
  border-width:1px !important;
  border-style:solid !important;
  border-color:var(--mk-charcoal) !important;
  fill:var(--mk-charcoal) !important;
  color:var(--mk-charcoal);
}

/* Au survol, la pastille s'inverse : l'encre prend le fond et le papier
   l'icone. Aucune teinte nouvelle, et le contraste y gagne. */
.wp-lightbox-overlay .wp-lightbox-close-button:hover,
.wp-lightbox-overlay .wp-lightbox-navigation-button:hover{
  background-color:var(--mk-charcoal) !important;
  fill:var(--mk-paper) !important;
}

@media not (prefers-reduced-motion){
  .wp-lightbox-overlay .wp-lightbox-close-button,
  .wp-lightbox-overlay .wp-lightbox-navigation-button{
    transition:background-color .2s ease,fill .2s ease;
  }
}

/* Le halo de papier double l'anneau : il garde le focus lisible si une
   commande venait à chevaucher la photographie, ce qu'aucun format
   mesuré ne produit aujourd'hui. */
.wp-lightbox-overlay .wp-lightbox-close-button:focus-visible,
.wp-lightbox-overlay .wp-lightbox-navigation-button:focus-visible{
  outline:2px solid var(--mk-charcoal);
  outline-offset:3px;
  box-shadow:0 0 0 6px var(--mk-paper);
}

.wp-lightbox-container button.lightbox-trigger{
  width:24px;
  height:24px;
}

/* Le cœur pose son propre contour de focus sur le déclencheur, à (0,2,1) et
   dans une teinte à lui. L'indicateur du thème le reprend, pour que le focus
   ait la même forme sur la photographie que partout ailleurs. */
.wp-lightbox-container button.lightbox-trigger:focus-visible{
  outline:3px solid var(--mk-charcoal);
  outline-offset:3px;
  box-shadow:0 0 0 3px var(--mk-paper);
}

/* =====================================================================
   LOT S23 — SECOND NIVEAU DE NAVIGATION

   Les pages enfants publiées d'une entrée de menu sont rendues par
   makeda_nav_menu_enfants_de_pages(). Le balisage est celui de WordPress :
   une <ul class="sub-menu"> imbriquée dans le <li> du parent.

   Aucune grammaire nouvelle. Le panneau reprend l'encre du panneau mobile
   déjà en place (ligne 205) : fond charcoal, liens papier, même graisse et
   même interlettrage que le premier niveau. Portée bornée à .nav : le hero,
   la bande des disciplines et les pastilles ne sont pas concernés.
   ===================================================================== */

.nav__list .sub-menu{list-style:none;margin:0;padding:0}

@media (min-width:901px){
  /* Le <li> devient le bloc conteneur du panneau. Les entrées de premier
     niveau sans enfant sont inchangées : aucune règle ne les atteint. */
  .nav__list > li{position:relative}

  .nav__list .sub-menu{
    position:absolute;
    top:100%;
    left:-18px;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:14px;
    /* Le rembourrage haut tient lieu d'écart : le panneau touche le bord bas
       de son parent, donc le survol ne se perd pas entre les deux. */
    padding:18px;
    min-width:max-content;
    background:var(--mk-charcoal);
    border-radius:4px;
    box-shadow:0 12px 30px -12px rgba(0,0,0,.55);
    opacity:0;
    /* Volontairement pas de visibility:hidden ni de display:none : un panneau
       ainsi masqué sort de l'ordre de tabulation, et :focus-within ne pourrait
       plus jamais l'ouvrir. Transparent mais focusable, il se montre dès que
       l'un de ses liens reçoit le focus. */
    pointer-events:none;
    transform:translateY(-4px);
    transition:opacity .2s,transform .2s;
  }

  .nav__list > li:hover > .sub-menu,
  .nav__list > li:focus-within > .sub-menu{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  /* Le panneau est charcoal dans les deux variantes d'en-tête. Ses liens
     restent donc papier, y compris sur les pages intérieures où .nav a est
     reteint en encre (ligne 416). */
  .site-header .nav__list .sub-menu a{
    color:var(--mk-paper);
    opacity:.85;
    text-shadow:none;
  }

  .site-header .nav__list .sub-menu a:hover{opacity:1}

  /* Le filet de survol des pages intérieures est posé sur fond papier ; il n'a
     pas de sens sur le panneau sombre. */
  .site-header--interieur .nav__list .sub-menu a::after{display:none}
}

@media (max-width:900.98px){
  /* Le panneau mobile est déjà une liste empilée sur fond charcoal : le second
     niveau y prend la même forme, en retrait, déroulé en permanence. Aucune
     commande supplémentaire, aucun script : rien de neuf à comprendre pour qui
     ouvre le menu. */
  .nav__list .sub-menu{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:14px;
    padding-left:18px;
    border-left:1px solid rgba(250,248,243,.28);
  }
}

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

/* =====================================================================
   LOT S26 — HABILLAGE DU FORMULAIRE DE CONTACT

   Surcharge, non reconstruction : la feuille du greffon reste chargée et
   continue de porter la disposition. Fluent Forms 6.2.13 déclare ses
   propres jetons sur :root — --fluentform-primary, -danger, -secondary,
   -border-color, -border-radius. Les redéfinir sur .fluentform suffit à
   retourner le bleu par défaut sans aucune lutte de spécificité.

   DÉPENDANCE ASSUMÉE : les règles ci-dessous visent des classes du
   greffon (.ff-btn-submit, .ff-el-form-control, .ff-el-input--label).
   Elles sont à revérifier après toute mise à jour de Fluent Forms.

   Portée bornée à .fluentform : la composition de la page Contact —
   largeurs, rails, ordre des blocs — n'est pas touchée.
   ===================================================================== */

.fluentform{
  /* Seul jeton nouveau du lot : aucun rouge d'erreur n'existait dans le
     thème, et aucune couleur de discipline ne pouvait en tenir lieu sans
     brouiller son sens. Brique sourde, lisible sur le papier. */
  --mk-erreur:#A13D33;

  --fluentform-primary:var(--pg-encre);
  --fluentform-danger:var(--mk-erreur);
  --fluentform-secondary:color-mix(in srgb,var(--pg-encre) 55%,transparent);
  --fluentform-border-color:color-mix(in srgb,var(--pg-encre) 22%,transparent);
  --fluentform-border-radius:4px;
}

/* Libellés : typographie et encre du corps du thème. */
.fluentform .ff-el-input--label label{
  font-family:var(--pg-sans);
  font-size:17px;
  line-height:1.5;
  color:var(--pg-encre);
}

/* Champs : le papier du site plutôt que le blanc pur, filet sobre. */
.fluentform .ff-el-form-control{
  font-family:var(--pg-sans);
  font-size:17px;
  line-height:1.5;
  color:var(--pg-encre);
  background:var(--pg-papier);
  border:1px solid var(--fluentform-border-color);
  border-radius:4px;
  padding:11px 14px;
}
.fluentform .ff-el-form-control::placeholder{
  color:color-mix(in srgb,var(--pg-encre) 45%,transparent);
  opacity:1;
}

/* Le greffon pose sa propre ombre au focus, qui masquait l'indicateur du
   thème. On la retire, et l'anneau global de S18 reprend la main. */
.fluentform .ff-el-form-control:focus{
  border-color:var(--pg-encre);
  box-shadow:none;
}
.fluentform .ff-el-form-control:focus-visible{
  outline:3px solid var(--mk-charcoal);
  outline-offset:3px;
  box-shadow:0 0 0 3px var(--mk-paper);
}

/* Bouton : le registre du .cta — gélule, 11px, 2,5px d'interlettrage,
   transition de 0,2 s — en valeurs inversées, l'encre passant au fond.
   Le rembourrage vertical porte la cible tactile au-delà de 44px. */
.fluentform .ff-btn-submit{
  font-family:var(--pg-sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--pg-papier);
  background:var(--pg-encre);
  border:0;
  border-radius:40px;
  padding:15px 28px;
  min-height:44px;
  transition:opacity .2s;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus{
  background:var(--pg-encre);
  color:var(--pg-papier);
  opacity:.9;
}

/* Messages d'erreur : la brique sourde, jamais le rouge vif du greffon.
   L'astérisque et le filet du champ en erreur suivent --fluentform-danger,
   déjà redéfini plus haut : rien à répéter ici. */
.fluentform .error,
.fluentform .text-danger,
.fluentform .ff-el-is-error .ff-el-form-check-label{
  font-family:var(--pg-sans);
  font-size:15px;
  line-height:1.5;
  color:var(--mk-erreur);
}

@media (prefers-reduced-motion:reduce){
  .fluentform .ff-btn-submit{transition:none}
}

/* =====================================================================
   LOT S26 — PAGES À TEXTE DENSE (.mk-legal)

   Portée : le corps de contenu des pages listées par
   makeda_classe_pages_denses(), aujourd'hui les seules mentions légales.
   Tout est préfixé par .mk-legal : aucune règle globale sur h2, p ou la
   typographie du site, aucun autre gabarit n'est atteint.

   L'échelle éditoriale du gabarit intérieur est taillée pour des pages
   courtes ; sur un texte de onze sections elle étire la lecture. On
   resserre l'interligne, les marges et la taille des titres, sans
   toucher au H1, à l'en-tête ni au pied de page.
   ===================================================================== */

.mk-legal .pg__corps{line-height:1.5}
.mk-legal .pg__corps > p{margin:0 0 .6em}
.mk-legal .pg__corps > ul,
.mk-legal .pg__corps > ol{margin:0 0 .6em}

.mk-legal .pg__corps > h2{
  font-size:1.25em;
  line-height:1.3;
  letter-spacing:0;
  margin:1.6em 0 .4em;
  max-width:none;
}

/* =====================================================================
   LOT S27 — DÉCOR D'ARRIÈRE-PLAN, AFFICHE BIDEEW

   L'image est celle du hero, servie en taille medium_large (768 × 1116).
   Son URL est exposée par makeda_decor_url_en_css() dans la propriété
   --mk-decor-affiche, posée sur les seules pages à décor. Ailleurs la
   propriété n'existe pas : var() reste sans valeur, background-image
   retombe sur « none » et l'image n'est pas demandée.

   DÉCOUPAGE — aucun clip-path, aucun mask, aucune coordonnée en pixels
   prise sur le contenu de l'image. La boîte du pseudo-élément est plus
   courte que l'image affichée, background-size:100% auto et
   background-position:top center faisant le reste : le bas déborde de la
   boîte et n'est pas peint.

   Profil d'encre mesuré sur l'image servie (768 × 1116, un pixel sur deux
   en x) : la main s'éteint à 79 % de la hauteur, la ligne 80 % est vide,
   le mot BIDEEW commence net à 81 % et le bandeau des disciplines occupe
   91,4 % à 93,8 %. Le ratio 1/1,16 laisse voir 1,16 / (1116/768) = 79,8 %
   de l'image : la main entière, rien du bandeau.
   ===================================================================== */

.mk-decor .pg{
  /* Bloc conteneur du décor, et contexte d'empilement : sans « isolation »,
     un pseudo-élément en z-index négatif passerait derrière le fond papier
     de .pg au lieu de se glisser entre ce fond et le texte. */
  position:relative;
  isolation:isolate;
  /* Le décor déborde volontairement de .pg, par la droite et par le bas.
     Deux mesures ont imposé de le borner :
       — « overflow-x:hidden » sur body masque la barre mais laisse l'élément
         racine défiler : 428px de défilement latéral relevés ;
       — laissé libre vers le bas, le décor allongeait le document des mentions
         légales de 3910 à 4104px, soit 194px de vide sous le pied de page.
     « clip » borne la boîte sans créer de conteneur de défilement. Le bord bas
     de .pg coïncide avec le bord haut du pied de page : c'est donc bien le pied
     qui semble couper le décor, et aucun bord n'est dessiné. */
  overflow:clip;
}

.mk-decor .pg::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  background-image:var(--mk-decor-affiche);
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% auto;
  aspect-ratio:1 / 1.16;
}

/* ---- Contact, desktop : la main fuit par la droite ---- */
@media (min-width:901px){
  .mk-decor--contact .pg::after{
    /* Bord gauche posé exactement sur le bord droit du rail de texte :
       la colonne du formulaire n'est jamais recouverte, à aucune largeur. */
    /* Lot S28 — variante A : la boîte reste strictement à droite du
       formulaire, et son débordement hors écran est plafonné à 12 % de sa
       largeur. La largeur n'est donc pas choisie, elle se déduit : l'espace
       disponible à droite du rail de texte vaut 50% - var(--pg-mesure)/2, et
       il doit représenter 88 % de la boîte. À 1425px de bloc conteneur cela
       donne 423,3px de large et 50,8px hors écran, soit 12,0 %.
       Le calage vertical suit le formulaire : la boîte commence un peu
       au-dessus du premier champ (mesuré à 374px), pictogrammes et doigts à
       hauteur des premiers champs, paume descendant vers le bouton. */
    left:calc(50% + var(--pg-mesure) / 2);
    top:360px;
    width:calc((50% - var(--pg-mesure) / 2) / 0.88);
    opacity:.10;
  }
}

/* ---- Contact, mobile : pas de décor ----
   Lot S28. Les rectangles de papier réellement libres de la page ont été
   relevés à 390 × 844 : le plus haut fait 104px (y 206 à 310), puis 98px
   (y 1257 à 1355) et 91px (y 950 à 1041). Aucun n'atteint les 120px sous
   lesquels un fragment de décor n'a plus de place. Le repli prévu s'applique :
   le décor est masqué, et l'image n'est pas demandée à ce viewport. */
@media (max-width:900.98px){
  .mk-decor--contact .pg::after{display:none}
}

/* ---- Mentions légales, desktop : une seule fois, au premier chapitre ---- */
@media (min-width:901px){
  .mk-decor--mentions-legales .pg::after{
    left:calc(50% + var(--pg-mesure) / 2);
    /* La contrainte S28 qui plafonnait la largeur à 274px était une
       contrainte de non-croisement des BOÎTES de texte. Elle est levée :
       la mesure des glyphes montre que les H2, dont la boîte court jusqu'à
       x 1252,5, ne portent d'encre que jusqu'à x 297 — leur réserve droite
       est vide. Le bord gauche du décor reste posé sur le bord droit du
       rail des paragraphes, à x 1052,5 : aucun glyphe de la page ne se
       trouve sous le décor, à aucune hauteur.
       La largeur est donc celle de Contact desktop, à l'identique et par la
       même déduction — l'espace à droite du rail vaut 88 % de la boîte, le
       débordement hors écran est plafonné à 12 %. À 1425px de bloc
       conteneur : 423,3px de large, 491px de haut, 50,8px hors écran.
       Taille, opacité, filtre et calage horizontal sont arbitrés. */

    /* Variantes écartées, conservées pour que le basculement reste l'échange
       d'une déclaration :
         — A, « bottom:0 » : la boîte calée sur le bas de .pg, la main
           fermant le document sous le pied de page. REJETÉE.
         — B, « top:360px » : le calage vertical de Contact desktop.
           Dépassée par l'ancrage ci-dessous, qui vise le même haut de page
           mais sur un repère du document plutôt que sur une valeur reprise
           d'une autre page. */

    /* Lot S29B — ancrage arbitré : le bord haut de la boîte s'aligne sur le
       H2 « 1. ÉDITEUR DU SITE », premier chapitre du document. La valeur
       n'est pas choisie, elle se déduit — le rectangle de la ligne du H2,
       mesuré au Range sur son nœud texte, a son bord haut à y 443,80 en
       coordonnées document, et .pg, qui porte « position:relative » et donne
       donc l'origine du calage, commence à y 0. D'où 443,80 - 0, arrondi au
       pixel : 444. La main démarre au premier chapitre et descend sur les
       chapitres 2 et 3, dans la réserve droite restée vide d'encre. */
    top:444px;
    width:calc((50% - var(--pg-mesure) / 2) / 0.88);
    filter:grayscale(1);
    opacity:.05;
  }
}

/* ---- Mentions légales, mobile : pas de décor ---- */
@media (max-width:900.98px){
  .mk-decor--mentions-legales .pg::after{display:none}
}

/* ---- À propos, desktop : la main sur la réserve droite — lot S29 ----
   La page reprend le rail de texte des mentions légales : les paragraphes
   courent de x 372,5 à x 1052,5, laissant 372,5px de réserve à droite. Le
   bord gauche du décor est donc posé au même endroit que sur les deux autres
   pages, sur le bord droit du rail, et la largeur se déduit de la même
   manière : la réserve vaut 88 % de la boîte, le débordement hors écran est
   plafonné à 12 %. À 1425px de bloc conteneur cela donne 423,3 × 491px — la
   taille exacte de Contact desktop. La main est un élément de composition à
   part entière, pas une vignette d'angle.

   L'opacité est celle de Contact, page en couleur comme celle-ci ; le couple
   0,05 + grayscale(1) reste propre aux mentions légales, document juridique.
   Cette valeur a été arbitrée et retenue par Alioune SENE au lot S29. */
@media (min-width:901px){
  .mk-decor--a-propos-de-makeda-production .pg::after{
    /* Proposition 2, écartée par Alioune SENE au lot S29 — même échelle, autre
       moment de la page : « bottom:0 » à la place de « top:360px » cale la main
       sur le bas de .pg, en accompagnement de la biographie de la fondatrice
       plutôt qu'en ouverture. Conservée pour que le basculement reste l'échange
       d'une déclaration. Une seule des deux lignes est active à la fois. */
    left:calc(50% + var(--pg-mesure) / 2);
    top:360px;
    width:calc((50% - var(--pg-mesure) / 2) / 0.88);
    opacity:.10;
  }
}

/* ---- À propos, mobile : pas de décor ----
   Même repli que les deux autres pages : la réserve droite n'existe plus, le
   décor est masqué et l'image n'est pas demandée à ce viewport. */
@media (max-width:900.98px){
  .mk-decor--a-propos-de-makeda-production .pg::after{display:none}
}

/* =====================================================================
   LOT S31 — INTERACTION DES CINQ DISCIPLINES SUR L'AFFICHE — DÉBUT

   Couche SŒUR de .hero__affiche, jamais enfant : mix-blend-mode:multiply
   compose l'affiche et tout son sous-arbre comme un groupe unique, dont
   aucun descendant ne peut s'extraire — un enfant serait éteint.

   Elle se cale sur l'affiche en partageant ses expressions, jamais des
   pixels : même --aff-w, même right, même bottom, et le rapport naturel
   de l'asset en aspect-ratio. Elle couvre donc la boîte COMPLÈTE, part
   basse masquée par overflow:hidden de .hero comprise — les pourcentages
   ci-dessous s'y rapportent.

   left et top désignent le CENTRE d'un cercle ; le rayon est relatif à la
   LARGEUR de la boîte, pour les deux axes.
   ===================================================================== */

/* Hors pointeur fin : la couche n'existe pas — ni place, ni peinture, ni capture. */
.disc-zones{display:none}

@media (hover:hover) and (pointer:fine){

  .disc-zones{
    display:block;
    position:absolute;
    right:5%;
    width:var(--aff-w);
    /* rapport naturel de l'asset : la couche a exactement la boîte de l'affiche */
    aspect-ratio:1762 / 2560;
    bottom:calc(var(--aff-w) * -0.07);
    /* au-dessus de .hero__text (z-index 3), sans toucher au z-index de personne :
       tous deux participent au contexte d'empilement de l'élément racine. */
    z-index:4;
    /* la couche ne capte rien : seuls les cinq disques le font */
    pointer-events:none;
  }

  .disc-zone{
    position:absolute;
    width:var(--z-diam);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    /* la surface sensible est le DISQUE, pas la boîte carrée : les quatre
       coins ne captent pas le pointeur. */
    border-radius:50%;
    pointer-events:auto;
  }

  .disc-zone__halo{
    position:absolute;
    left:50%;
    top:50%;
    /* rayon de diffusion : 1,75 fois le rayon du cercle, borné par la marge
       disponible au-dessus du cercle le plus contraint. */
    width:175%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    /* La couleur du halo est dissociable de celle de l'anneau. Sans
       --z-halo-couleur, elle retombe sur la teinte de la discipline. */
    background:radial-gradient(circle closest-side,var(--z-halo-couleur,var(--z-teinte)) 0%,transparent 100%);
    opacity:0;
    pointer-events:none;
    transition:opacity 220ms ease;
  }

  .disc-zone__nom{
    position:absolute;
    left:50%;
    /* bord bas du libellé à 1,9 rayon au-dessus du centre : (1,9 + 1) / 2 */
    bottom:145%;
    transform:translateX(-50%);
    white-space:nowrap;
    font-family:var(--mk-sans);
    /* taille liée à la boîte de l'affiche, pour suivre l'échelle */
    font-size:calc(var(--aff-w) * 0.026);
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--z-teinte);
    opacity:0;
    pointer-events:none;
    transition:opacity 220ms ease;
  }

  /* chaque discipline définit son intensité ; 0,30 n'est que le repli. */
  .disc-zone:hover .disc-zone__halo{opacity:var(--z-halo-op,.30)}
  .disc-zone:hover .disc-zone__nom{opacity:1}

  /* Coordonnées et teintes, discipline par discipline. Les teintes sont celles
     de l'ASSET : le halo prolonge le cercle de l'affiche, il ne rappelle pas la
     bande des disciplines. Valeurs écrites ici, localement — ni preset
     theme.json ni --mk-* n'est touché ni mutualisé. */
  .disc-zone--art{left:16.459%;top:25.215%;--z-diam:12.656%;--z-teinte:#e50052}
  .disc-zone--gastronomie{left:47.418%;top:7.988%;--z-diam:12.600%;--z-teinte:#ec6706}
  .disc-zone--sciences{left:71.368%;top:15.449%;--z-diam:12.600%;--z-teinte:#50af31}

  .disc-zone--astronomie{left:26.476%;top:12.930%;--z-diam:12.600%;--z-teinte:#a81580}
  .disc-zone--technologie{left:83.627%;top:45.117%;--z-diam:12.372%;--z-teinte:#312683}

  /* Gastronomie : libellé placé EN DESSOUS — au-dessus, la marge avant le
     bord rogneur de .hero est trop faible, le halo l'occupant déjà. */
  .disc-zone--gastronomie .disc-zone__nom{bottom:auto;top:145%}

  /* -------------------------------------------------------------------
     ANNEAU LUMINEUX + HALO DE PROFONDEUR

     Un halo radial seul éclaire DERRIÈRE le pictogramme. Pour que le
     cercle paraisse s'allumer, il faut un contour lumineux posé sur le
     trait même de l'affiche, plus une diffusion subordonnée. Deux niveaux
     réglables séparément :
       — ANNEAU : --z-anneau-op, --z-anneau-couleur, --z-anneau-flou
       — HALO   : --z-halo-op, --z-halo-couleur

     L'anneau est calé sur le rayon MÉDIAN du trait, à distinguer du rayon
     qui borne la surface de capture du pointeur : ce dernier est le rayon
     EXTÉRIEUR du trait, et ne change pas. --z-anneau-d et --z-anneau-ep
     portent cette géométrie, en % du hotspot ; le trait tombe alors au
     stop 83,333 % du dégradé, par construction.
     ------------------------------------------------------------------- */

  .disc-zone::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    /* repli à 0 : une discipline qui ne définit pas sa géométrie n'affiche
       simplement pas d'anneau, sans casser le rendu. */
    width:var(--z-anneau-d,0%);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle closest-side,
      transparent calc(83.333% - var(--z-anneau-ep) - var(--z-anneau-flou)),
      var(--z-anneau-couleur) calc(83.333% - var(--z-anneau-ep)),
      var(--z-anneau-couleur) calc(83.333% + var(--z-anneau-ep)),
      transparent calc(83.333% + var(--z-anneau-ep) + var(--z-anneau-flou)));
    opacity:0;
    /* ne capte rien : la surface sensible reste le seul disque du hotspot */
    pointer-events:none;
    transition:opacity 220ms ease;
  }

  .disc-zone:hover::after{opacity:var(--z-anneau-op,0)}

  .disc-zone--gastronomie{
    --z-anneau-d:114.32%;
    --z-anneau-ep:4.14%;
    --z-anneau-flou:3%;
    --z-anneau-couleur:#ec6706;
    --z-halo-couleur:#ec6706;
    --z-anneau-op:.70;
    --z-halo-op:.18;
  }

  /* Technologie : cœur clair, halo dans la teinte. Sa teinte est plus sombre
     que le fond sur lequel elle se pose ; un anneau dans cette teinte s'y
     lit comme un trait renforcé, jamais comme une lumière. Le cœur éclairci
     porte la lumière, la couleur de la discipline migre vers le halo. */
  .disc-zone--technologie{
    --z-anneau-d:115.05%;
    --z-anneau-ep:3.19%;
    --z-anneau-flou:3%;
    --z-anneau-couleur:#e4e0ff;
    --z-halo-couleur:#312683;
    --z-anneau-op:.85;
    --z-halo-op:.22;
  }

  .disc-zone--sciences{
    --z-anneau-d:114.32%;
    --z-anneau-ep:4.14%;
    --z-anneau-flou:3%;
    --z-anneau-couleur:#50af31;
    --z-halo-couleur:#50af31;
    --z-anneau-op:.70;
    --z-halo-op:.18;
  }

  .disc-zone--art{
    --z-anneau-d:113.81%;
    --z-anneau-ep:4.14%;
    --z-anneau-flou:3%;
    --z-anneau-couleur:#e50052;
    --z-halo-couleur:#e50052;
    --z-anneau-op:.70;
    --z-halo-op:.18;
  }

  .disc-zone--astronomie{
    --z-anneau-d:114.32%;
    --z-anneau-ep:4.14%;
    --z-anneau-flou:3%;
    --z-anneau-couleur:#a81580;
    --z-halo-couleur:#a81580;
    --z-anneau-op:.70;
    --z-halo-op:.18;
  }
}

/* Mouvement réduit : l'effet continue de fonctionner, seul le fondu disparaît. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  .disc-zone__halo,
  .disc-zone__nom{transition-duration:0s}
}

/* ===================== LOT S31 — FIN ================================= */