/* ============================================================
   Major Master — Design Tokens
   Charte graphique v2 (Encre / Vert / Or / Crème)
   Remplace la charte "Émeraude" v1. Les noms de tokens historiques
   (--ink, --primary, --pale, --border, --muted...) sont conservés
   pour que le reste du CSS/PHP existant cascade automatiquement ;
   seules leurs valeurs changent. De nouveaux tokens "bruts" (--encre,
   --vert, --or...) sont ajoutés pour le travail à venir.
   ============================================================ */

@font-face {
  font-family: 'Acetone';
  src: url('../fonts/acetone/ACETONE.woff2') format('woff2'),
       url('../fonts/acetone/ACETONE.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Palette brute (cf. handoff design) ---- */
  --encre:         #0D1512; /* fond des en-têtes/footer, texte principal, boutons secondaires */
  --vert:          #0F7A5F; /* couleur de marque, CTA, liens, accents */
  --vert-profond:  #0A4A38; /* hover des liens, texte sur fond vert clair */
  --or:            #E9B22C; /* UNIQUEMENT le chapeau du logo — jamais pour badges/UI */
  --creme:         #F7F6F2; /* fond de section alterné, texte sur fond encre */
  --blanc:         #FFFFFF; /* fond des cartes, fond principal */
  --filet:         #E3E0D8; /* bordures de cartes et de champs */
  --filet-clair:   #EDEAE2; /* séparateurs internes, filets de contenu */
  --filet-encre:   #22302B; /* bordures sur fond encre */
  --gris-texte:    #66716B; /* texte secondaire */
  --gris-texte-2:  #5A6560; /* chapôs, descriptions de cartes */
  --gris-libelle:  #9A9788; /* libellés monospace en capitales, valeurs "ND" */
  --texte-corps:   #29332E; /* texte éditorial UI */
  --texte-corps-2: #3B4641; /* texte éditorial long (Source Serif) */
  --texte-encre-secondaire: #9DAAA3;
  --texte-encre-tertiaire:  #7E8D86;
  --texte-encre-nav:        #C4D0CA;
  --puce-vert-bg:    #E4F3EC; /* badge "Alternance" */
  --puce-vert-text:  #0A4A38;
  --puce-neutre-bg:      #EDEAE2; /* badge type de master, puces de domaine */
  --puce-neutre-bg-alt:  #F1EFE8;
  --puce-neutre-text:    #0D1512;

  /* ---- Alias historiques (consommés par major-master.css / les templates) ---- */
  --ink:            var(--encre);
  --primary:        var(--vert);
  --primary-dark:   var(--vert-profond);
  --accent:         var(--or);       /* logo only, cf. --or */
  --accent-ink:     var(--encre);
  --pale:           var(--puce-vert-bg);
  --white:          var(--blanc);
  --paper:          var(--creme);
  --border:         var(--filet);
  --text:           var(--encre);
  --text-body:      var(--texte-corps);
  --muted:          var(--gris-texte);
  --muted-2:        var(--gris-libelle);

  /* ---- Typographie ---- */
  --font-display: 'Instrument Sans', system-ui, sans-serif; /* titres */
  --font-ui:      'Instrument Sans', system-ui, sans-serif; /* corps, UI, labels, boutons */
  --font-serif:   'Source Serif 4', Georgia, serif;         /* corps éditorial (articles, fiches) */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace; /* libellés, valeurs chiffrées */
  --font-logo:    'Acetone', system-ui, sans-serif;          /* logo UNIQUEMENT */

  --fs-display: 56px; --fw-display: 600; --lh-display: 1.04; --ls-display: -0.03em; /* H1 accueil */
  --fs-h1:      44px; --fw-h1:      600; --lh-h1:      1.06; --ls-h1:      -0.03em; /* H1 page intérieure */
  --fs-h2:      28px; --fw-h2:      600; --lh-h2:      1.2;  --ls-h2:      -0.025em;
  --fs-h3:      20px; --fw-h3:      600; --lh-h3:      1.25; --ls-h3:      -0.015em;
  --fs-eyebrow: 10.5px; --fw-eyebrow: 500; --ls-eyebrow: 0.12em; /* libellé mono UPPERCASE */
  --fs-body:    14.5px; --fw-body:    400; --lh-body:    1.5;
  --fs-body-serif: 18px; --lh-body-serif: 1.75; /* corps éditorial */
  --fs-caption: 10.5px; --fw-caption: 500; /* libellé mono, cf. --fs-eyebrow */
  --fs-chapo:   19px; --lh-chapo: 1.55;

  /* ---- Rayons (le design est arrondi, pas "angles droits") ---- */
  --radius-sharp: 14px; /* nom historique conservé, valeur alignée sur --radius-card */
  --radius-sm:    8px;   /* boutons, champs */
  --radius-md:    11px;  /* petites cartes */
  --radius-card:  14px;  /* cartes */
  --radius-lg:    17px;  /* grands blocs */
  --radius-icon:  22px;  /* icône carrée */
  --radius-pill:  999px; /* boutons & pills */

  /* ---- Élévation (aucune ombre dans le design lui-même, uniquement UI ponctuelle) ---- */
  --shadow-sm: 0 1px 2px rgba(13,21,18,0.10);
  --shadow-lg: 0 12px 32px rgba(13,21,18,0.14);

  /* ---- Espacement historique (base 8px, conservé pour compat) ---- */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-5: 48px; --space-6: 80px;
  --maxw: 1120px;

  /* ---- Espacement fin (cf. handoff) ---- */
  --space-xs: 6px;  --space-sm: 10px; --space-md: 14px; --space-lg: 20px;
  --space-xl: 22px; --space-2xl: 26px; --space-3xl: 40px; --space-4xl: 56px;
  --gutter-desktop: 40px; --gutter-tablet: 24px; --gutter-mobile: 18px;
  --measure-article: 720px;

  /* ---- Hauteurs de header ---- */
  --header-h-desktop: 68px; --header-h-tablet: 60px; --header-h-mobile: 56px;
}

/* ============================================================
   RESET DES CONTRÔLES NATIFS (scopé au contexte masters)
   Sans ça, les navigateurs/OS appliquent leur propre chrome natif (bordure, fond, anneau de
   focus — parfois une couleur système comme le rose observé le 2026-08-02 sur Safari/macOS)
   par-dessus nos styles sur <button>/<select>/<input>, qui n'avaient pas explicitement
   désactivé l'apparence native. Les cases à cocher/radio gardent leur rendu natif (elles
   s'appuient sur `accent-color`, déjà posé plus bas) — seuls les autres contrôles sont reset.
   ============================================================ */
body.is-master-context button,
body.is-master-context select,
body.is-master-context input:not([type="checkbox"]):not([type="radio"]) {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

/* font-family seulement (pas le raccourci `font`, qui inclut aussi font-size/weight/line-height
   en "inherit") : `body.is-master-context button` a une spécificité (0,1,2) supérieure à un
   simple .mmv2-xxx-btn (0,1,0), donc `font: inherit` écrasait silencieusement la taille de
   police de tout composant bouton qui ne mettait pas explicitement !important sur font-size —
   rencontré sur .mmv2-ct-segmented__btn et .mmv2-article__share (retour utilisateur du
   2026-08-03). Ne garder que font-family ici évite de reproduire ce bug à chaque nouveau
   bouton. */
body.is-master-context button {
  font-family: inherit;
}

/* Le thème (hors de ce plugin) force border-style:none/border-width:medium en !important sur
   tout <button>:focus/:active, à une spécificité (0,1,1) supérieure à un simple
   .mmv2-xxx-btn:focus (0,1,0) — chaque bouton perdait son bord au clic jusqu'à ce que le focus
   parte (retour utilisateur du 2026-08-03, rencontré d'abord sur .mmv2-ct-icon-btn puis
   .mmv2-ct-sidebar-collapse). Corrigé une fois pour tous les boutons du contexte plutôt qu'au
   cas par cas : (0,2,2) bat ce reset quel que soit le composant. Ne fixe que la largeur/le
   style du bord, pas sa couleur (laissée à chaque composant). */
body.is-master-context button:focus,
body.is-master-context button:active {
  border-width: 1px !important;
  border-style: solid !important;
}

/* `appearance:none` retire aussi la flèche native des <select> : on la redessine en CSS pur
   (chevron --gris-texte), cohérente sur tous les navigateurs plutôt que le rendu natif. */
body.is-master-context select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2366716B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
  padding-right: 32px !important;
}

/* Anneau de focus clavier propre (--vert) à la place de l'anneau natif qu'on vient de retirer —
   l'accessibilité clavier du méga-menu/des filtres en dépend. */
body.is-master-context button:focus-visible,
body.is-master-context select:focus-visible,
body.is-master-context input:focus-visible,
body.is-master-context a:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 2px;
}

/* Le header (.mmv2-header-overlay) est en position:fixed — sans ça, tout lien d'ancre (sommaire,
   fil de retour méga-menu...) fait défiler la cible juste sous le bandeau, titre masqué. */
body.is-master-context [id] {
  scroll-margin-top: calc(var(--header-h-desktop) + 20px);
}

/* ============================================================
   PRIMITIVES UTILITAIRES
   ============================================================ */
.mp-page      { background: var(--paper); color: var(--text) !important; font-family: var(--font-ui); line-height: 1.6; }
.mp-band      { background: var(--ink); color: #fff !important; }

.mp-display   { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: pretty; }
.mp-h1        { font-family: var(--font-display); font-weight: var(--fw-h1); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); text-wrap: pretty; }
.mp-h2        { font-family: var(--font-display); font-weight: var(--fw-h2); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); text-wrap: pretty; }
.mp-h3        { font-family: var(--font-display); font-weight: var(--fw-h3); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.mp-eyebrow   { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--gris-libelle) !important; margin: 0; }
.mp-body      { font-family: var(--font-ui); font-weight: var(--fw-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body) !important; }
.mp-body-serif{ font-family: var(--font-serif); font-size: var(--fs-body-serif); line-height: var(--lh-body-serif); color: var(--texte-corps-2) !important; }
.mp-chapo     { font-family: var(--font-ui); font-size: var(--fs-chapo); line-height: var(--lh-chapo); color: var(--gris-texte-2) !important; }
.mp-caption   { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris-libelle) !important; margin: 0; }

/* Surlignage signature — réservé, ne pas utiliser l'or hors logo */
.mp-highlight { position: relative; display: inline-block; }
.mp-highlight::after { content:""; position:absolute; left:0; right:-2px; bottom:6px; height:0.28em; background: var(--puce-vert-bg); z-index:-1; }

/* Boutons — le reset.css du thème (hello-elementor) impose `border:1px solid rgb(204,51,102)`
   sur button/[type=button]/[type=submit] avec la même spécificité qu'une classe : sans
   !important sur border, cette bordure rose gagne le conflit de cascade sur les <button>
   (les <a class="mmv2-btn"> n'y sont pas exposés, mais on garde !important pour rester correct
   quel que soit l'élément utilisé). */
.mmv2-btn        { font-family: var(--font-ui); font-weight:600; font-size:14px; padding:11px 22px !important; border-radius: var(--radius-sm) !important; border:0 !important; cursor:pointer; }
.mmv2-btn-primary{ background: var(--vert) !important; color:#fff !important; }
.mmv2-btn-primary:hover { background: var(--vert-profond) !important; }
.mmv2-btn-secondary { background:#fff !important; color: var(--vert) !important; border:1px solid var(--filet) !important; padding:10px 21px; }
.mmv2-btn-secondary:hover { border-color: var(--vert) !important; }
.mmv2-btn-accent { background: var(--encre) !important; color: #fff !important; font-weight:600; }
.mmv2-btn-accent:hover { background: var(--vert-profond) !important; }

/* Tags / badges — palette neutre + vert clair, jamais d'or */
.mp-tag        { display:inline-flex; align-items:center; gap:4px; background: var(--puce-neutre-bg); color: var(--puce-neutre-text) !important; font-family: var(--font-ui); font-size:13px; font-weight:500; border-radius: var(--radius-pill); padding:5px 12px; }
.mp-tag-accent { background: var(--puce-vert-bg); color: var(--puce-vert-text) !important; }
.mp-tag-dark   { background: var(--ink); color: #fff !important; }

/* Cartes */
.mp-card       { background:#fff; border:1px solid var(--filet); border-radius: var(--radius-card); }
.mp-card--rule { border-top:3px solid var(--vert); } /* filet d'accent en haut de fiche */