/**
 * MAJJ — Charte officielle
 * Identifiant : majj-officiel
 *
 * Référence absolue : kit de marque client
 *   « MAJJ Consulting - Colorimétrie.pdf »  (5 couleurs)
 *   Typo/  hauora_sans + Poppins             (SIL OFL 1.1)
 *   Logo/  SVG vectoriel, 9 déclinaisons
 *
 * Direction artistique « La rigueur claire ».
 * Le blanc porte le site, le bleu le ponctue. La hiérarchie vient de
 * l'espace et de la graisse, jamais de la teinte — la palette officielle
 * n'a pas de couleur d'accent, et cette contrainte EST la discipline de
 * la marque.
 *
 * ATTENTION — inversion structurelle par rapport aux chartes antérieures :
 * celles-ci avaient un accent CLAIR (or #C9A33A), donc « fond accent +
 * texte marine » était lisible. L'accent officiel #2F51B2 est FONCÉ :
 * marine sur #2F51B2 ne donne que 1,9:1. Toutes les paires concernées
 * sont donc rebasculées ci-dessous, soit vers Color 2 + blanc (actions),
 * soit vers Color 4 + marine (étiquettes). Voir § 4.
 *
 * N'altère aucune charte existante.
 */

:root {
  --majj-charte: 'majj-officiel';

  /* ------------------------------------------------------------------
     1. Palette officielle — valeurs exactes du PDF, non négociables
     ------------------------------------------------------------------ */
  --majj-c1: #0B2B66; /* marine profond — encre & ancrage      L* 19 */
  --majj-c2: #2F51B2; /* bleu franc    — action & identité     L* 37 */
  --majj-c3: #4B6DC7; /* bleu clair    — signal & accompagnement L* 47 */
  --majj-c4: #AABAF5; /* bleu pâle     — structure visible     L* 76 */
  --majj-c5: #E0E8FF; /* bleu glacé    — respiration           L* 92 */

  /* ------------------------------------------------------------------
     2. Dérivés — combles documentés, teinte de la marque conservée
     ------------------------------------------------------------------ */

  /* Encre de lecture : Color 1 désaturée (teinte 219° inchangée).
     Color 1 a 89 % de saturation : superbe en titre, vibrant et
     fatigant sur un paragraphe. 9,7:1 sur blanc. */
  --majj-ink: #354561;

  /* Encre secondaire — la correction d'un défaut systémique.
   *
   * La feuille de base exprime tout son texte secondaire en encre à
   * opacité réduite : `rgba(--color-gray-anthracite-rgb, 0.6 à 0.8)`.
   * Sur du blanc pur, ces valeurs passaient. Mais la charte pose la
   * surface alternée sur le glacé #E0E8FF (L* 92) : sur ce fond
   * légèrement plus dense, l'encre à 70 % ne donne plus que 4,17:1 et
   * celle à 60 % 3,92:1 — sous le seuil AA, sur des dizaines de blocs.
   *
   * On abandonne donc l'opacité au profit d'une teinte pleine. Même
   * famille chromatique que l'encre principale (teinte 218°), mais plus
   * claire, donc toujours lisible comme un second niveau :
   *   7,0:1 sur blanc  ·  5,7:1 sur glacé.
   * Une teinte pleine se mesure une fois pour toutes ; une opacité se
   * remesure à chaque fond. */
  --majj-ink-soft: #4A5A76;

  /* Milieu manquant : le PDF saute de L* 47 à L* 76. Réservé aux
     troisièmes niveaux de graphiques et icônes secondaires. */
  --majj-blue-mid: #7A93DE;

  /* Bleu du logotype « baseline » officiel (Icone & Baseline.svg).
     Sixième teinte du kit, absente du PDF : cantonnée aux états
     appuyés plutôt qu'écartée. 9,9:1 sur blanc. */
  --majj-logo-deep: #173C95;

  --majj-rule: #AABAF5;     /* filet d'emphase   */
  --majj-hairline: #E0E8FF; /* filet structurel  */

  /* Sémantiques — INTERFACE UNIQUEMENT (formulaires).
     Interdites dans tout contenu éditorial, jamais en fond plein. */
  --majj-error: #9E2A2B;   /* 7,5:1 sur blanc */
  --majj-success: #1F6B4A; /* 6,4:1 sur blanc */

  /* ------------------------------------------------------------------
     3. Projection sur les tokens du thème
     ------------------------------------------------------------------ */
  --color-primary: #0B2B66;
  --color-primary-mid: #173C95;
  --color-accent: #2F51B2;
  --color-accent-strong: #173C95;
  --color-accent-hover: #21409B;
  --color-accent-light: #AABAF5;
  --color-white: #FFFFFF;
  --color-on-dark: #FFFFFF;
  --color-gray-light: #E0E8FF;
  --color-blue-medium: #4B6DC7;
  --color-gray-anthracite: #354561;
  --color-border: #D2DCF9;
  /* Ce jeton existe pour cohérence, mais la feuille de base écrit le
     vert en dur dans `.whatsapp-float` : la vraie bascule se fait plus
     bas, § FLOTTANT WHATSAPP. */
  --color-whatsapp: #2F51B2;
  --color-whatsapp-rgb: 47, 81, 178;

  --color-primary-rgb: 11, 43, 102;
  --color-accent-rgb: 47, 81, 178;
  --color-accent-light-rgb: 170, 186, 245;
  --color-white-rgb: 255, 255, 255;
  --color-gray-light-rgb: 224, 232, 255;
  --color-blue-medium-rgb: 75, 109, 199;
  --color-gray-anthracite-rgb: 53, 69, 97;

  /* Logo officiel */
  --logo-icon: #2F51B2;
  --logo-word: #4B6DC7;

  /* Typographie officielle */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Hauora', 'Segoe UI', sans-serif;
  --font-accent: 'Hauora', 'Segoe UI', sans-serif;

  /* Le squircle du logo est très arrondi : l'interface lui répond sans
     le singer. 4px était trop sec face à ce signe tendre. */
  --border-radius: 8px;
  --border-radius-lg: 16px;
  --radius-control: 6px;

  --max-width: 1280px;

  /* Institutionnel = plat et filets. Une seule ombre, teintée marine. */
  --shadow-sm: 0 1px 2px rgba(11, 43, 102, 0.05);
  --shadow-md: 0 1px 2px rgba(11, 43, 102, 0.05), 0 4px 12px rgba(11, 43, 102, 0.05);
  --shadow-lg: 0 2px 4px rgba(11, 43, 102, 0.06), 0 14px 36px rgba(11, 43, 102, 0.09);
  --shadow-card: 0 1px 2px rgba(11, 43, 102, 0.05), 0 8px 24px rgba(11, 43, 102, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(11, 43, 102, 0.06), 0 14px 36px rgba(11, 43, 102, 0.1);
  --shadow-header: 0 1px 0 rgba(170, 186, 245, 0.55);
  --shadow-glow: 0 0 18px rgba(47, 81, 178, 0.14);
}

/* ====================================================================
   BASE
   ==================================================================== */

.charte-majj-officiel {
  background: var(--color-white);
  color: var(--majj-ink);
  line-height: 1.7;
}

/* ====================================================================
   TYPOGRAPHIE — Poppins en display, Hauora pour tout le reste
   ==================================================================== */

/* Poppins n'est jamais utilisé sous 24px : sa géométrie circulaire
   fatigue en petit corps. SemiBold et non Bold — un cabinet
   institutionnel ne hurle pas. */
.charte-majj-officiel h1,
.charte-majj-officiel h2,
.charte-majj-officiel .hero__title,
.charte-majj-officiel .section-title,
.charte-majj-officiel .expert__name {
  font-family: var(--font-heading);
  font-weight: 600;
}

/* AUCUNE couleur de titre n'est déclarée ici, et c'est délibéré.
 *
 * La feuille de base pose déjà `h1..h6 { color: var(--color-primary) }`,
 * puis la corrige une dizaine de fois selon le contexte :
 * `.page-hero h1`, `.section--dark h2`, `.footer h3`, `.cta-banner h2`…
 * Ces correctifs ont la même spécificité (0,1,1) que la règle générique.
 * Comme la charte se charge APRÈS la feuille de base, toute règle
 * `h1..h6 { color }` écrite ici les bat toutes au départage par l'ordre
 * source, et repeint en marine des titres posés sur du marine.
 *
 * Le remappage de `--color-primary` sur #0B2B66 (§ 3) suffit donc : la
 * feuille de base produit d'elle-même le marine officiel sur fond clair
 * ET conserve le blanc sur fond sombre. On ne redéclare pas, on retire.
 */
.charte-majj-officiel h1,
.charte-majj-officiel .hero__title {
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* Un interlignage de 1,06 est juste à 54px ; au corps mobile (30px) il
   écrase les jambages et les accents des capitales. L'interlignage se
   desserre donc quand le titre rapetisse. */
@media (max-width: 767px) {
  .charte-majj-officiel h1,
  .charte-majj-officiel .hero__title {
    line-height: 1.15;
  }

  .charte-majj-officiel h2,
  .charte-majj-officiel .section-title {
    line-height: 1.2;
  }
}

.charte-majj-officiel h2,
.charte-majj-officiel .section-title {
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* Hauora est semi-condensée : plus de mots par ligne à corps égal, un
   avantage réel en français. Elle prend H3 et en dessous. */
.charte-majj-officiel h3,
.charte-majj-officiel h4,
.charte-majj-officiel h5,
.charte-majj-officiel h6 {
  font-family: var(--font-body);
  font-weight: 600;
}

.charte-majj-officiel h3 {
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.charte-majj-officiel h4,
.charte-majj-officiel h5,
.charte-majj-officiel h6 {
  line-height: 1.35;
  letter-spacing: 0;
}

/* Hauora ne monte pas au-dessus de 32px : c'est un caractère de texte,
   ses proportions semi-condensées s'y resserrent trop. */
.charte-majj-officiel h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
}

/* Corps : 17px de base. Hauora étant semi-condensée, 17px y donne la
   présence optique de 16px dans un caractère de largeur normale. */
.charte-majj-officiel body,
body.charte-majj-officiel {
  font-size: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
}

/* Les paragraphes n'ont VOLONTAIREMENT pas de couleur imposée ici : ils
   héritent de --color-gray-anthracite (l'encre de lecture #354561) posé
   sur body. Forcer `p { color }` dans la charte écraserait les règles de
   texte blanc des sections sombres et du pied de page. */

/* Chapô — dimension seulement, la couleur reste héritée. */
.charte-majj-officiel .section-subtitle,
.charte-majj-officiel .hero__subtitle {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.65;
}

/* Surtitre — le seul endroit où les capitales sont autorisées.
   Jamais un titre en capitales : ça détruit la silhouette des mots et
   massacre les accents français. */
/* Le surtitre est en Color 2, pas en Color 3, et c'est une contrainte
 * mesurée, pas une préférence : Color 3 (#4B6DC7) ne donne que 4,87:1
 * sur blanc et tombe à 3,98:1 sur la surface glacée (#E0E8FF), donc
 * SOUS le seuil AA. Color 2 (#2F51B2) tient 6,8:1 sur blanc et 5,5:1
 * sur glacé : il passe sur les deux fonds du site.
 *
 * Cela assouplit la règle « Color 2 = cliquable » posée au § 4. Le
 * compromis est acceptable : un surtitre de 12px en capitales espacées
 * de 0,14em ne se confond avec aucun lien. La lisibilité primait.
 *
 * Color 3 reste donc réservé au logotype et aux aplats, jamais au texte. */
.charte-majj-officiel .section-label,
.charte-majj-officiel .expert__label,
.charte-majj-officiel .hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--majj-c2);
}

/* Même cause, même correction : ces deux-là étaient aussi en Color 3. */
.charte-majj-officiel .expert__subtitle {
  color: var(--majj-c2);
}

/* Tout le texte secondaire du site, ramené sur l'encre pleine. La liste
   reprend exactement les sélecteurs que la feuille de base exprimait en
   opacité. Le jeton se retournant sur fond sombre, une seule déclaration
   couvre les deux polarités. */
.charte-majj-officiel .card__text,
.charte-majj-officiel .about__text,
.charte-majj-officiel .expert__bio,
.charte-majj-officiel .value-card p,
.charte-majj-officiel .approach__step p,
.charte-majj-officiel .why-card p,
.charte-majj-officiel .timeline__step p,
.charte-majj-officiel .reference-card p,
.charte-majj-officiel .sector-item p,
.charte-majj-officiel .pub-card p,
.charte-majj-officiel .faq-item__answer,
.charte-majj-officiel .text-muted,
.charte-majj-officiel .expert-network__item-desc,
.charte-majj-officiel .expertise-reader__hint,
.charte-majj-officiel .clients__also,
.charte-majj-officiel .expertise-index__excerpt {
  color: var(--majj-ink-soft);
}

/* ====================================================================
   MESURE DE LECTURE
   ==================================================================== */

/* Défaut : tout le copy du site est justifié, dans sa colonne réelle.
 *
 * Une liste blanche + un plafond 34.5em laissaient des pages en
 * drapeau (tuiles, extraits, cartes, sous-titres, pied) et des
 * colonnes visuellement « à gauche » parce que le bloc ne remplissait
 * plus sa case. Un dossier s'aligne des deux bords partout où l'on lit.
 *
 * Césure selon `lang` sur <html>. Dernière ligne en drapeau. */

.charte-majj-officiel p,
.charte-majj-officiel li,
.charte-majj-officiel dd,
.charte-majj-officiel blockquote,
.charte-majj-officiel .expertise-index__excerpt,
.charte-majj-officiel .card__text,
.charte-majj-officiel .expert-network__item-desc,
.charte-majj-officiel .faq-item__answer,
.charte-majj-officiel .cv-doc__text,
.charte-majj-officiel .section-subtitle,
.charte-majj-officiel .section-subtitle.text-center,
.charte-majj-officiel .section-subtitle--centered,
.charte-majj-officiel .value-card p,
.charte-majj-officiel .why-card p,
.charte-majj-officiel .approach__step p,
.charte-majj-officiel .sector-item p,
.charte-majj-officiel .reform-item p,
.charte-majj-officiel .reform-item span,
.charte-majj-officiel .pub-card p,
.charte-majj-officiel .mission-card__body p,
.charte-majj-officiel .reference-card p,
.charte-majj-officiel .timeline__step p,
.charte-majj-officiel .footer__desc {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: start;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
  overflow-wrap: break-word;
}

/* Titres : jamais césurés. `hyphens` hérite des `li` justifiés et
   cassait « Macroéconomie » en Macroéconomi / e. */
.charte-majj-officiel h1,
.charte-majj-officiel h2,
.charte-majj-officiel h3,
.charte-majj-officiel h4,
.charte-majj-officiel h5,
.charte-majj-officiel .expertise-index__title,
.charte-majj-officiel .card__title,
.charte-majj-officiel .mission-card__body h3 {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* Chrome d'interface — jamais justifié : menus, stats, légendes,
   formulaires, bandeaux d'appel, citations de vision centrées. */
.charte-majj-officiel nav li,
.charte-majj-officiel .header li,
.charte-majj-officiel .footer li,
.charte-majj-officiel .sitemap-list li,
.charte-majj-officiel .breadcrumb,
.charte-majj-officiel figcaption,
.charte-majj-officiel .gallery-swiper__caption,
.charte-majj-officiel .about__caption,
.charte-majj-officiel [class*="kicker"],
.charte-majj-officiel .pub-card__meta,
.charte-majj-officiel .pub-card__badge,
.charte-majj-officiel label,
.charte-majj-officiel .form-hint,
.charte-majj-officiel .form-error,
.charte-majj-officiel .form-success,
.charte-majj-officiel .newsletter-form__consent,
.charte-majj-officiel .contact-form__alt,
.charte-majj-officiel .contact-form__alt p,
.charte-majj-officiel .btn,
.charte-majj-officiel .filter-btn,
.charte-majj-officiel .expertise-reader__tab,
.charte-majj-officiel .expertise-reader__kicker,
.charte-majj-officiel .hero__eyebrow,
.charte-majj-officiel .section-label,
.charte-majj-officiel .stats-mini__item,
.charte-majj-officiel .stats-mini__label,
.charte-majj-officiel .entry-content th,
.charte-majj-officiel .entry-content td {
  text-align: left;
  text-align-last: auto;
  hyphens: none;
}

.charte-majj-officiel .cta-banner p,
.charte-majj-officiel .newsletter-cta p,
.charte-majj-officiel .stats-bar__item p,
.charte-majj-officiel .vision__quote {
  text-align: center;
  text-align-last: auto;
  hyphens: none;
}

/* Sous 768px la justification ouvre des rivières. Drapeau à gauche. */
@media (max-width: 768px) {
  .charte-majj-officiel p,
  .charte-majj-officiel li,
  .charte-majj-officiel dd,
  .charte-majj-officiel blockquote,
  .charte-majj-officiel .expertise-index__excerpt,
  .charte-majj-officiel .card__text,
  .charte-majj-officiel .expert-network__item-desc,
  .charte-majj-officiel .faq-item__answer,
  .charte-majj-officiel .cv-doc__text,
  .charte-majj-officiel .section-subtitle,
  .charte-majj-officiel .section-subtitle.text-center,
  .charte-majj-officiel .section-subtitle--centered,
  .charte-majj-officiel .value-card p,
  .charte-majj-officiel .why-card p,
  .charte-majj-officiel .approach__step p,
  .charte-majj-officiel .sector-item p,
  .charte-majj-officiel .reform-item p,
  .charte-majj-officiel .reform-item span,
  .charte-majj-officiel .pub-card p,
  .charte-majj-officiel .mission-card__body p,
  .charte-majj-officiel .reference-card p,
  .charte-majj-officiel .timeline__step p,
  .charte-majj-officiel .footer__desc {
    text-align: start;
    text-align-last: auto;
    hyphens: none;
    -webkit-hyphens: none;
  }

  .charte-majj-officiel .cta-banner p,
  .charte-majj-officiel .newsletter-cta p,
  .charte-majj-officiel .stats-bar__item p,
  .charte-majj-officiel .vision__quote {
    text-align: center;
  }
}

/* Sous-titre de section : même justification, mais jamais sur 1200px —
   à cette largeur les blancs deviennent des rivières. */
.charte-majj-officiel .section-subtitle,
.charte-majj-officiel .section-subtitle.text-center,
.charte-majj-officiel .section-subtitle--centered,
.charte-majj-officiel .expertise-reader__hint {
  max-width: 40rem;
}

/* Les pages éditoriales (mentions légales, confidentialité) n'ont pas de
   grille : leur texte occupait les 1280px du conteneur, soit 100 signes.
   La colonne de lecture est centrée dans le conteneur — les titres s'y
   alignent à gauche, comme dans un document imprimé. */
.charte-majj-officiel .entry-content {
  max-width: 36em;
  margin-inline: auto;
}

.charte-majj-officiel .entry-content p,
.charte-majj-officiel .entry-content li {
  max-width: none;
}

/* Plancher typographique : 12px. En dessous, les accents français
   (é, è, ô, ç) cessent d'être distincts à l'écran. Quatre libellés
   descendaient à 10,9 et 11,5px. */
.charte-majj-officiel .expert__presence-org-label,
.charte-majj-officiel .expert__presence-kicker,
.charte-majj-officiel .gallery-swiper__index {
  font-size: 0.75rem;
}

/* Chiffres tabulaires — obligatoires partout où des nombres doivent
   s'aligner. C'est la fonctionnalité OpenType que Hauora apporte et
   que le métier de MAJJ réclame. */
.charte-majj-officiel table,
.charte-majj-officiel .counter,
.charte-majj-officiel .stats-bar,
.charte-majj-officiel .stat-card,
.charte-majj-officiel time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ====================================================================
   SURFACES SOMBRES — INVERSION DU RÔLE D'ACCENT
   Aucune couleur de titre ni de paragraphe n'est réécrite ici : la
   feuille de base le fait déjà, et bien, via `.hero__title`,
   `.page-hero h1`, `.section--dark h1..h6`, `.cta-banner h2` et
   `.footer`. La seule chose qu'elle ne sait pas faire, c'est inverser
   la polarité de l'accent — c'est l'unique objet de cette section.
   ==================================================================== */

/* Sur une surface sombre, le rôle « accent » doit être porté par une
   teinte CLAIRE. Color 2 (#2F51B2) ne donne que 1,9:1 sur le marine :
   tout libellé qui l'emploie y devient illisible.
 *
 * La feuille de base possède déjà ce mécanisme — elle rebascule
 * `--color-accent-strong` sur ses conteneurs sombres (ligne ~6846).
 * On l'étend à `--color-accent`, et on complète sa liste, qui oubliait
 * `.presence` et `.contact__info`.
 *
 * Une seule règle corrige ainsi le fil d'Ariane, le surtitre
 * « Présence », l'année du pied de page, les titres de colonnes du pied
 * et les libellés de la carte de contact — sans énumérer une classe.
 *
 * `.stats-bar` est délibérément absente : la charte la repasse en clair
 * (voir BANDE DE PREUVE), l'accent y doit donc rester foncé. */
.charte-majj-officiel .section--dark,
.charte-majj-officiel .hero,
.charte-majj-officiel .footer,
.charte-majj-officiel .page-hero,
.charte-majj-officiel .cta-banner,
.charte-majj-officiel .newsletter-cta,
.charte-majj-officiel .header__drawer,
.charte-majj-officiel .presence,
.charte-majj-officiel .contact__info,
.charte-majj-officiel .gallery-swiper__caption,
.charte-majj-officiel .mission-card--photo,
.charte-majj-officiel.majj-has-dark-hero .header:not(.scrolled) {
  --color-accent: var(--majj-c4);
  --color-accent-strong: var(--majj-c4);
  --color-accent-rgb: 170, 186, 245;

  /* L'encre secondaire s'inverse ici plutôt que dans chaque sélecteur :
     un seul point de bascule, et tout le texte secondaire suit son
     fond automatiquement, sur les surfaces sombres comme claires. */
  --majj-ink-soft: rgba(255, 255, 255, 0.85);
}

/* Le surtitre en Color 3 (#4B6DC7) ne tient pas sur marine : 1,4:1.
   Sur fond sombre il passe en Color 4 (#AABAF5), soit 7,1:1. */
.charte-majj-officiel .hero .section-label,
.charte-majj-officiel .hero__eyebrow,
.charte-majj-officiel .section--dark .section-label,
.charte-majj-officiel .page-hero .section-label,
.charte-majj-officiel .presence .section-label,
.charte-majj-officiel .cta-banner .section-label {
  color: var(--majj-c4);
}

/* Pied de page — les mentions légales étaient en blanc à 40 %, soit
   3,39:1 pour du 13px : sous le seuil AA. Color 4 les porte à 7,1:1
   sans quitter la palette ; le copyright monte à 8,6:1. */
.charte-majj-officiel .footer__bottom a {
  color: var(--majj-c4);
}

.charte-majj-officiel .footer__bottom,
.charte-majj-officiel .footer__bottom p {
  color: rgba(255, 255, 255, 0.72);
}

.charte-majj-officiel .footer__copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.charte-majj-officiel .footer__credit {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

/* ====================================================================
   § 4. INVERSION DE L'ACCENT
   L'ancien accent était clair (or). Le nouveau est foncé (#2F51B2).
   Règle : Color 2 = « cliquable », toujours avec du texte BLANC.
           Color 4 = étiquettes et surfaces claires, texte MARINE.
   ==================================================================== */

/* --- Actions : Color 2 + blanc (7,1:1) --------------------------- */

.charte-majj-officiel .btn--secondary,
.charte-majj-officiel .lang-switch__btn.is-active,
.charte-majj-officiel .header__nav .lang-switch__btn.is-active,
.charte-majj-officiel .newsletter-form button,
.charte-majj-officiel .header__cta.btn--primary,
.charte-majj-officiel .pub-card__actions .btn.btn--primary.pub-card__btn--view,
.charte-majj-officiel .pub-card__actions .pub-card__btn--view {
  background-color: var(--majj-c2);
  color: #fff;
  border-color: var(--majj-c2);
}

.charte-majj-officiel .btn--secondary:hover,
.charte-majj-officiel .newsletter-form button:hover,
.charte-majj-officiel .header__cta.btn--primary:hover,
.charte-majj-officiel .pub-card__actions .btn.btn--primary.pub-card__btn--view:hover,
.charte-majj-officiel .pub-card__actions .pub-card__btn--view:hover {
  background-color: var(--color-accent-hover);
  color: #fff;
  border-color: var(--color-accent-hover);
}

/* Ronds d'icône et flèches de navigation : ils reposent sur du clair. */
.charte-majj-officiel .gallery-swiper__nav:hover,
.charte-majj-officiel .gallery-swiper__nav:focus-visible,
.charte-majj-officiel .gallery-lightbox__close:hover,
.charte-majj-officiel .gallery-lightbox__close:focus-visible,
.charte-majj-officiel .gallery-lightbox__nav:hover,
.charte-majj-officiel .pub-viewer__close:hover,
.charte-majj-officiel .pub-viewer__close:focus-visible,
.charte-majj-officiel .majj-pagination .page-numbers:not(.current):hover {
  background: var(--majj-c2);
  color: #fff;
}

/* --- Étiquettes : Color 4 + marine (7,1:1) ----------------------- */
/* Ce sont des libellés, pas des actions. Color 4 reprend exactement le
   rôle de surface claire que l'or tenait, sans quitter la palette. */

.charte-majj-officiel .reference-card__badge--active,
.charte-majj-officiel .mission-card--photo .mission-card__badge--active,
.charte-majj-officiel .mission-card--photo .reference-card__badge--active,
.charte-majj-officiel .pub-card__badge,
.charte-majj-officiel .tag--accent {
  background: var(--majj-c4);
  color: var(--majj-c1);
  border-color: var(--majj-c4);
}

/* --- Sur fond marine : Color 2 est invisible (1,9:1) ------------- */
/* Le hero et le drawer reposent sur marine ou sur photo assombrie.
   Le bouton principal y passe donc en blanc plein. */

.charte-majj-officiel .hero .btn--primary,
.charte-majj-officiel .header__cta--drawer.btn--primary,
.charte-majj-officiel .section--dark .btn--primary,
.charte-majj-officiel .section--dark .btn--secondary {
  background-color: #fff;
  color: var(--majj-c1);
  border-color: #fff;
}

.charte-majj-officiel .hero .btn--primary:hover,
.charte-majj-officiel .hero .btn--primary:focus-visible,
.charte-majj-officiel .header__cta--drawer.btn--primary:hover,
.charte-majj-officiel .section--dark .btn--primary:hover,
.charte-majj-officiel .section--dark .btn--secondary:hover {
  background-color: var(--majj-c4);
  color: var(--majj-c1);
  border-color: var(--majj-c4);
}

/* Pastilles de réseaux sociaux au pied de page (fond marine). */
.charte-majj-officiel .footer__social a:hover {
  background-color: var(--majj-c4);
  border-color: var(--majj-c4);
  color: var(--majj-c1);
}

/* ====================================================================
   LOGO OFFICIEL
   Lockup horizontal (viewBox 68.08 × 26.49, rapport 2,57). L'ancien
   monogramme « MJ » était vertical (rapport 0,70) : le dimensionnement
   hérité ne convient plus.
   ==================================================================== */

.charte-majj-officiel .majj-logo {
  --logo-icon: var(--majj-c2);
  --logo-word: var(--majj-c3);
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.charte-majj-officiel .majj-logo__mark {
  width: auto;
  height: 36px;
  aspect-ratio: 68.08 / 26.49;
  overflow: visible;
}

.charte-majj-officiel .majj-logo--footer .majj-logo__mark {
  height: 46px;
}

/* Sur fond sombre, le logo passe en blanc monochrome — c'est la
   déclinaison prévue par le kit, pas un bricolage d'opacité. */
.charte-majj-officiel.majj-has-dark-hero .header:not(.scrolled) .majj-logo,
.charte-majj-officiel .footer .majj-logo,
.charte-majj-officiel .header__drawer .majj-logo {
  --logo-icon: #fff;
  --logo-word: #fff;
}

/* Au défilement, l'en-tête redevient clair : le logo reprend ses deux tons. */
.charte-majj-officiel .header.scrolled .majj-logo {
  --logo-icon: var(--majj-c2);
  --logo-word: var(--majj-c3);
}

@media (max-width: 767px) {
  .charte-majj-officiel .header__logo .majj-logo__mark {
    height: 30px;
  }
}

/* ====================================================================
   BANDE DE PREUVE
   Elle passe du marine au glacé : le marine reste réservé à la bande
   d'appel et au pied de page, deux fois par page au maximum. Les
   chiffres deviennent l'objet de design principal.
   ==================================================================== */

.charte-majj-officiel .stats-bar {
  background-color: var(--majj-c5);
  border-top: 1px solid var(--majj-hairline);
  border-bottom: 1px solid var(--majj-hairline);
  padding: 2.75rem 0;
}

.charte-majj-officiel .stats-bar__inner {
  gap: 0;
}

.charte-majj-officiel .stats-bar__item {
  position: relative;
  color: var(--majj-ink);
  padding: 0.35rem 1.75rem;
}

/* Filets Color 4 entre les quatre figures — un registre, pas quatre
   pastilles isolées. En grille 2×2, le filet ne se pose que dans
   chaque rangée. */
.charte-majj-officiel .stats-bar__item + .stats-bar__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--majj-c4);
}

@media (max-width: 1024px) {
  .charte-majj-officiel .stats-bar:not(.stats-bar--3) .stats-bar__item:nth-child(odd)::before {
    content: none;
  }
}

.charte-majj-officiel .stats-bar--3 .stats-bar__inner {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
  .charte-majj-officiel .stats-bar--3 .stats-bar__inner {
    grid-template-columns: 1fr;
  }

  .charte-majj-officiel .stats-bar--3 .stats-bar__item + .stats-bar__item::before {
    content: none;
  }
}

.charte-majj-officiel .stats-bar__item .counter {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--majj-c1);
  letter-spacing: -0.02em;
}

/* Le libellé reste en encre de lecture, pas en Color 2 : cette teinte ne
   désigne que ce qui est cliquable, et un libellé ne l'est pas. Le
   contraste sur glacé est de 7,8:1, et le chiffre garde tout le poids. */
.charte-majj-officiel .stats-bar__item p {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--majj-ink);
}

/* ====================================================================
   FILETS ET SURFACES
   ==================================================================== */

.charte-majj-officiel .section--alt {
  background-color: var(--majj-c5);
}

.charte-majj-officiel .section--dark {
  background-color: var(--majj-c1);
}

.charte-majj-officiel hr,
.charte-majj-officiel .divider {
  border: 0;
  border-top: 1px solid var(--majj-hairline);
}

/* ====================================================================
   MICRO-INTERACTIONS — sous le seuil de conscience
   160ms sur la couleur, 240ms sur la transformation. Pas de parallaxe,
   pas de rebond : la justesse plutôt que l'effet.
   ==================================================================== */

.charte-majj-officiel {
  --transition-fast: 160ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-base: 240ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* 2px de translation maximum au survol d'une carte. */
.charte-majj-officiel .btn--outline:hover,
.charte-majj-officiel .btn--secondary:hover,
.charte-majj-officiel .btn--primary:hover {
  transform: translate3d(0, -2px, 0);
}

/* Anneau de focus : jamais supprimé, toujours en Color 2. */
.charte-majj-officiel :focus-visible {
  outline: 2px solid var(--majj-c2);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sur fond marine, l'anneau passe en blanc pour rester visible. */
.charte-majj-officiel .section--dark :focus-visible,
.charte-majj-officiel .footer :focus-visible,
.charte-majj-officiel .hero :focus-visible {
  outline-color: #fff;
}

/* ====================================================================
   GRILLE — L'EN-TÊTE REJOINT LA COLONNE DE CONTENU
   La feuille de base libère `.header__inner` en pleine largeur au-delà
   de 1200px (`max-width: none` + padding fluide). Le logo tombait donc
   à ~52px du bord quand le premier mot de la page commençait à ~104px :
   deux axes verticaux concurrents sur la même page.
   L'en-tête reprend la largeur ET le retrait du conteneur, ce qui met
   le logo, le fil d'Ariane et le titre sur un seul et même axe.
   ==================================================================== */

.charte-majj-officiel .header .header__inner {
  max-width: var(--max-width);
  padding-inline: var(--space-5);
}

/*
 * La feuille de base, dès 1400px, pose une grille 1fr / auto / 1fr :
 * les colonnes gauche et droite ont la même largeur, pour centrer
 * la nav. Le logo officiel (~93px) est étroit ; le bloc de droite
 * (CTA « Travaillez avec nous » + FR/EN, ~343px) est plus large que
 * sa colonne 1fr dès que l'inner est calé à 1280px. Résultat dans
 * un vrai navigateur : le bouton recouvre Contact / Publications.
 * L'aperçu Cursor, recadré à gauche, ne montrait que logo + début
 * de nav — d'où l'impression d'un header « propre » d'un côté seulement.
 *
 * auto / 1fr / auto : chaque extrémité prend sa largeur réelle,
 * la nav occupe le reste. Le logo reste sur l'axe du contenu.
 */
@media (min-width: 1280px) {
  .charte-majj-officiel .header .header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.25rem;
    width: 100%;
  }

  .charte-majj-officiel .header__logo {
    grid-column: 1;
    justify-self: start;
  }

  .charte-majj-officiel .header__nav {
    grid-column: 2;
    justify-self: stretch;
    justify-content: center;
    min-width: 0;
    padding-inline: 0;
  }

  .charte-majj-officiel .header__end {
    grid-column: 3;
    justify-self: end;
    min-width: 0;
  }

  .charte-majj-officiel .header__nav-list {
    gap: clamp(0.85rem, 1.2vw, 1.5rem);
  }
}

/* Sous 1280px le hamburger ouvre le drawer, qui porte le CTA.
   Ne jamais masquer .header__cta ici : .header__cta--drawer en hérite. */

/* ====================================================================
   CIBLES TACTILES — 44px
   Le seuil AA (WCAG 2.5.8) est de 24px, celui d'Apple et de la norme
   AAA de 44px. On vise 44px.
   Principe : on n'agrandit pas le dessin, on agrandit la zone. Une
   pastille de 8px doit rester une pastille de 8px — c'est sa surface
   sensible qui doit faire 44px.
   ==================================================================== */

/* Les boutons plafonnaient à 39px (12px + 12px + 15,2px de ligne). */
.charte-majj-officiel .btn {
  min-height: 44px;
}

/* Pager du hero : un rail de temps, pas une pastille. Le dessin est
   un filet de 28×2px ; la surface sensible reste 44px via ::after.
   Le remplissage Color 4 passe par background-size — ::before serait
   trop tentant, mais ::after est déjà la cible tactile. */
.charte-majj-officiel .hero__pager {
  gap: 0.55rem;
}

.charte-majj-officiel .hero__pager-dot {
  position: relative;
  width: 1.75rem;
  height: 2px;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.28);
  background-image: linear-gradient(var(--majj-c4), var(--majj-c4));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-color 0.35s ease;
}

.charte-majj-officiel .hero__pager-dot.is-active {
  width: 1.75rem;
  background-color: rgba(255, 255, 255, 0.28);
  animation: majj-hero-rail 6.5s linear forwards;
}

.charte-majj-officiel .hero.is-paused .hero__pager-dot.is-active {
  animation-play-state: paused;
}

.charte-majj-officiel .hero__pager-dot:hover,
.charte-majj-officiel .hero__pager-dot:focus-visible {
  background-color: rgba(255, 255, 255, 0.45);
}

.charte-majj-officiel .hero__pager-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

@keyframes majj-hero-rail {
  from {
    background-size: 0% 100%;
  }
  to {
    background-size: 100% 100%;
  }
}

/* Sélecteur FR/EN : contrôle secondaire, pas un bouton d'action.
   Les 44×44px le faisaient peser plus lourd que la navigation. */
.charte-majj-officiel .lang-switch {
  padding: 2px;
  margin-left: 0.5rem;
  height: auto;
}

.charte-majj-officiel .lang-switch__btn,
.charte-majj-officiel .lang-switch__btn[href] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  height: 1.625rem;
  padding: 0 0.55em;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
}

@media (max-width: 1279px) {
  .charte-majj-officiel .header__nav .lang-switch__btn,
  .charte-majj-officiel .header__nav .lang-switch__btn[href] {
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.75em;
  }

  .charte-majj-officiel .header__cta--drawer {
    display: inline-flex;
  }
}

/* L'indicateur « Défiler vers le bas » ne mesure qu'1px de large : le
   filet reste fin, sa boîte atteint 44px. */
.charte-majj-officiel .hero__scroll {
  min-width: 44px;
  justify-content: center;
}

/* Boutons des cartes de publication : la feuille de base les plafonne à
   2,45rem (39,2px) avec une spécificité de 0-3-0. */
.charte-majj-officiel .pub-card__actions .btn.btn--sm,
.charte-majj-officiel .pub-card__actions .btn.btn--ghost,
.charte-majj-officiel .pub-card__actions .pub-card__btn {
  min-height: 44px;
}

/* Navigation principale et logo : 35px et 36px de haut. Le texte reste
   à sa place, c'est la boîte du lien qui atteint 44px. */
.charte-majj-officiel .header__nav-link,
.charte-majj-officiel .header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Listes de liens textuels — pied de page, plan de site, coordonnées.
 *
 * Choix assumé : 32px, pas 44px. La norme AA (WCAG 2.5.8) demande
 * 24×24px ; les 44×44px relèvent du niveau AAA, et l'appliquer à une
 * liste de huit liens d'expertises étirerait la colonne de 152 à
 * 352px — on gagnerait un critère en détruisant la composition du
 * pied de page. 32px place ces liens 33 % au-dessus du seuil AA, avec
 * une aération qui sert le dessin plutôt que de le contrarier.
 * Tous les vrais boutons et contrôles du site, eux, sont à 44px. */
.charte-majj-officiel .footer__bottom a,
.charte-majj-officiel .footer .menu-item > a,
.charte-majj-officiel .footer__col a:not(.footer__logo),
.charte-majj-officiel .contact__info a,
.charte-majj-officiel .contact-form__alt a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

/* Fil d'Ariane : 23px, il manquait un pixel pour le seuil AA. Le
   retrait vertical ne casse pas le flux en ligne des séparateurs. */
.charte-majj-officiel .breadcrumb a,
.charte-majj-officiel .breadcrumb span {
  padding-block: 0.25rem;
}

/* Case à cocher du consentement : 18px. Son vrai périmètre cliquable
   est le libellé qui l'enveloppe (« J'accepte que mes données… »), donc
   largement au-delà du seuil ; on l'agrandit quand même pour le doigt. */
.charte-majj-officiel .consent-label input[type='checkbox'] {
  width: 24px;
  height: 24px;
  flex: none;
}

/* Cartes de publication : l'étiquette tombait à 9,9px et les libellés
   d'action à 10,9px — illisibles, et sous le plancher de 12px. */
.charte-majj-officiel .pub-card__badge {
  font-size: 0.75rem;
}

.charte-majj-officiel .pub-card__btn span,
.charte-majj-officiel .pub-card__btn--view span,
.charte-majj-officiel .pub-card__btn--download span {
  font-size: 0.75rem;
}

/* ====================================================================
   HIÉRARCHIE DES ACTIONS SUR FOND SOMBRE
   Le hero présentait deux boutons blancs pleins, de poids identique :
   « Nos expertises » et « Nos références » se disputaient le regard.
   Un seul appel principal par écran. Le second passe en contour.
   ==================================================================== */

/* La feuille de base rend ce bouton blanc plein au repos et le vide au
   survol (`.hero a.btn.btn--ghost`, spécificité 0-3-1). C'est l'inverse
   de la convention : l'état de repos doit annoncer le rang, et le survol
   doit renforcer, pas dégrader. On rétablit le sens, avec la
   spécificité nécessaire pour passer devant. */
.charte-majj-officiel .hero a.btn.btn--ghost,
.charte-majj-officiel .hero .btn--ghost,
.charte-majj-officiel .section--dark a.btn.btn--ghost,
.charte-majj-officiel .cta-banner a.btn.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.charte-majj-officiel .hero a.btn.btn--ghost:hover,
.charte-majj-officiel .hero a.btn.btn--ghost:focus-visible,
.charte-majj-officiel .hero .btn--ghost:hover,
.charte-majj-officiel .section--dark a.btn.btn--ghost:hover,
.charte-majj-officiel .cta-banner a.btn.btn--ghost:hover {
  background: #fff;
  color: var(--majj-c1);
  border-color: #fff;
  box-shadow: none;
}

/* ====================================================================
   FLOTTANT WHATSAPP
   Le vert #25d366 est écrit en dur dans la feuille de base (il n'est
   pas piloté par un jeton). C'est la seule teinte du site étrangère à
   la palette officielle, et la plus criarde : dans un kit strictement
   monochrome bleu, une bulle vert fluo contredit l'exigence
   « premium, jamais tape-à-l'œil ».
   Le bouton passe en Color 2 — la couleur d'action de la marque — le
   pictogramme blanc suffisant à la reconnaissance. La lueur verte des
   ombres portées suit.
   Réversible : il suffit de supprimer ce bloc.
   ==================================================================== */

.charte-majj-officiel .whatsapp-float {
  background: var(--majj-c2);
  color: #fff;
  box-shadow:
    0 2px 6px rgba(11, 43, 102, 0.18),
    0 10px 28px rgba(47, 81, 178, 0.38);
}

.charte-majj-officiel .whatsapp-float:hover,
.charte-majj-officiel .whatsapp-float:focus-visible {
  background: var(--color-accent-hover);
  color: #fff;
  box-shadow:
    0 4px 10px rgba(11, 43, 102, 0.2),
    0 14px 32px rgba(47, 81, 178, 0.45);
}

/* ====================================================================
   DERNIERS CONTRASTES
   ==================================================================== */

/* L'encre à 72 % d'opacité donnait 4,39:1 pour du 14px — il manquait
   0,11. En teinte pleine, la même couleur donne 9,7:1. */
.charte-majj-officiel .contact-form__alt,
.charte-majj-officiel .contact-form__alt p {
  color: var(--majj-ink);
}

/* ====================================================================
   PHOTOGRAPHIE
   Voile marine léger : c'est ce qui fait qu'un ensemble de photos
   d'origines diverses cesse d'avoir l'air d'une banque d'images.
   ==================================================================== */

.charte-majj-officiel .hero--photo::before,
.charte-majj-officiel .page-hero--photo::before {
  background:
    linear-gradient(180deg, rgba(11, 43, 102, 0.6) 0%, transparent 32%),
    linear-gradient(
      105deg,
      rgba(11, 43, 102, 0.9) 0%,
      rgba(11, 43, 102, 0.55) 48%,
      rgba(11, 43, 102, 0.26) 100%
    );
  opacity: 1;
}

/* Bandeaux de page : voile ouvert pour que le lieu se lise.
   Le H1 reste porté par le scrim, pas par un mur. */
.charte-majj-officiel .page-hero--photo::before {
  background:
    linear-gradient(180deg, rgba(11, 43, 102, 0.38) 0%, transparent 36%),
    linear-gradient(
      105deg,
      rgba(11, 43, 102, 0.7) 0%,
      rgba(11, 43, 102, 0.46) 48%,
      rgba(11, 43, 102, 0.22) 100%
    );
}

.charte-majj-officiel .hero__tagline {
  color: var(--majj-c4);
  text-shadow: 0 1px 14px rgba(11, 43, 102, 0.55);
}

/* Slogan : chapô sous le H1 institutionnel, plus le titre. */
.charte-majj-officiel .hero__chapo {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.35rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.96);
  margin: 0 0 1.75rem;
  max-width: 36em;
  text-shadow: 0 1px 16px rgba(11, 43, 102, 0.5);
  opacity: 0;
  transform: translateY(30px) scale(0.97);
}

.charte-majj-officiel .hero.loaded .hero__chapo {
  animation: heroReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.68s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .charte-majj-officiel .hero__chapo {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* ====================================================================
   FORMULAIRES — les deux seules couleurs non bleues du site
   ==================================================================== */

.charte-majj-officiel .form-group label {
  font-family: var(--font-body);
  color: var(--majj-c1);
}

.charte-majj-officiel .form-error,
.charte-majj-officiel .is-invalid {
  color: var(--majj-error);
  border-color: var(--majj-error);
}

.charte-majj-officiel .form-success {
  color: var(--majj-success);
  border-color: var(--majj-success);
}

/* ====================================================================
   RYTHME, DOMAINES, FILTRES, PHOTOGRAPHIE UNIFIÉE
   Ce qui reste de la direction une fois les contrastes tenus.
   ==================================================================== */

/* Respiration verticale : 128px au-dessus, 112px au-dessous. Les
   titres de section gardent 48px de silence avant le premier bloc. */
.charte-majj-officiel .section,
.charte-majj-officiel .proof__domains,
.charte-majj-officiel .home-identity,
.charte-majj-officiel .about,
.charte-majj-officiel .expert,
.charte-majj-officiel .references,
.charte-majj-officiel .publications,
.charte-majj-officiel .contact {
  padding-block: var(--space-20) var(--space-16);
}

.charte-majj-officiel .section-title + .section-subtitle,
.charte-majj-officiel .section-title + .accent-line {
  margin-top: 0.75rem;
}

.charte-majj-officiel .section-subtitle,
.charte-majj-officiel .accent-line {
  margin-bottom: 3rem;
}

@media (max-width: 767px) {
  .charte-majj-officiel .section,
  .charte-majj-officiel .proof__domains,
  .charte-majj-officiel .home-identity,
  .charte-majj-officiel .about,
  .charte-majj-officiel .expert,
  .charte-majj-officiel .references,
  .charte-majj-officiel .publications,
  .charte-majj-officiel .contact {
    padding-block: var(--space-12) var(--space-10);
  }

  .charte-majj-officiel .section-subtitle,
  .charte-majj-officiel .accent-line {
    margin-bottom: 2rem;
  }
}

/* Filet d'emphase : Color 2, 3px. */
.charte-majj-officiel .accent-line {
  width: 3rem;
  height: 3px;
  background: var(--majj-c2);
}

/* Index des expertises : filet Color 4 en tête de chaque entrée. */
.charte-majj-officiel .expertise-index__item {
  border-top: 2px solid var(--majj-c4);
  border-bottom: 0;
}

.charte-majj-officiel .expertise-index__num,
.charte-majj-officiel .expertise-index__icon {
  color: var(--majj-c2);
}

/* Filtres : un soulignement, pas une pastille. Color 2 reste
   « cliquable » ; le fond plein était un héritage de l'or. */
.charte-majj-officiel .filter-btn {
  background: transparent;
  color: var(--majj-ink);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
}

.charte-majj-officiel .filter-btn:hover,
.charte-majj-officiel .filter-btn:focus-visible {
  background: transparent;
  color: var(--majj-c1);
  border-bottom-color: var(--majj-c4);
}

.charte-majj-officiel .filter-btn.active,
.charte-majj-officiel .filter-btn[aria-pressed='true'] {
  background: transparent;
  color: var(--majj-c1);
  border-color: transparent;
  border-bottom-color: var(--majj-c2);
  box-shadow: none;
}

/* Photographie : légère désaturation. Le voile marine du hero fait
   déjà le travail d'unification ; on n'ajoute pas un multiply sur
   les cartes, il noierait le texte déjà posé dessus. */
.charte-majj-officiel .hero__photo,
.charte-majj-officiel .page-hero__media,
.charte-majj-officiel .about__photo,
.charte-majj-officiel .pub-card__cover img,
.charte-majj-officiel .gallery-swiper img {
  filter: saturate(0.88);
}

/* RGPD 3.2 — cookies CNIL, notices, tables légales */
.charte-majj-officiel .cookie-consent[hidden] {
  display: none !important;
}

body.charte-majj-officiel:has(#cookie-consent) .whatsapp-float {
  bottom: calc(var(--space-6) + 60px);
}

body.charte-majj-officiel:has(#cookie-consent:not([hidden])) .whatsapp-float {
  bottom: 9.5rem;
}

@media (max-width: 640px) {
  body.charte-majj-officiel:has(#cookie-consent:not([hidden])) .whatsapp-float {
    bottom: 12.25rem;
  }
  body.charte-majj-officiel:has(#cookie-consent:not([hidden])) .back-to-top {
    bottom: calc(12.25rem + 64px);
  }
}

.charte-majj-officiel .cookie-consent__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.charte-majj-officiel .cookie-consent__refuse,
.charte-majj-officiel .cookie-consent__accept {
  flex: 1 1 12rem;
  min-height: 44px;
  font-weight: 600;
}

.charte-majj-officiel .cookie-consent__refuse {
  background: #fff;
  color: var(--majj-c1);
  border: 2px solid var(--majj-c2);
  box-shadow: none;
}

.charte-majj-officiel .cookie-consent__refuse:hover,
.charte-majj-officiel .cookie-consent__refuse:focus-visible {
  background: var(--majj-c5);
  color: var(--majj-c1);
}

.charte-majj-officiel .footer__cookie-manage {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: inherit;
}

.charte-majj-officiel .rgpd-notice {
  margin: 0.75rem 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--majj-ink-soft);
}

.charte-majj-officiel .rgpd-notice a {
  color: var(--majj-c2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.charte-majj-officiel .rights-page {
  max-width: 40rem;
  margin: 0 auto;
}

.charte-majj-officiel .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 1.25rem 0 2rem;
}

.charte-majj-officiel .entry-content th,
.charte-majj-officiel .entry-content td {
  border: 1px solid var(--majj-c4);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.charte-majj-officiel .entry-content thead th {
  background: var(--majj-c5);
  color: var(--majj-c1);
  font-family: var(--font-display, inherit);
  font-weight: 600;
}

/* ====================================================================
   VISION (Cabinet)
   Même recette que le bandeau CTA : la photo reste lisible,
   le voile porte seulement le texte. Pas de mur marine.
   ==================================================================== */

.charte-majj-officiel .vision-band {
  overflow: hidden;
}

.charte-majj-officiel .vision-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
}

.charte-majj-officiel .vision-band--photo {
  background-color: var(--majj-c1);
}

.charte-majj-officiel .vision-band--photo::before {
  inset: 0;
  width: auto;
  height: auto;
  top: 0;
  right: 0;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 43, 102, 0.48) 0%,
    rgba(11, 43, 102, 0.62) 42%,
    rgba(11, 43, 102, 0.74) 100%
  );
  opacity: 1;
  z-index: 1;
}

.charte-majj-officiel .vision-band--photo .container {
  position: relative;
  z-index: 2;
}

/* ====================================================================
   TUILES INSTITUTIONNELLES
   Les cartes sans photo (secteurs, valeurs, pourquoi, réseau,
   réformes, approche, méthode, FAQ, partenaires, stats). Pas un
   document Word : un dossier — filet, coin de cadrage, plaque d'icône.
   Les cartes photo (missions, publications) ne sont pas touchées.
   ==================================================================== */

.charte-majj-officiel .sector-item,
.charte-majj-officiel .value-card,
.charte-majj-officiel .why-card,
.charte-majj-officiel .expert-network__item,
.charte-majj-officiel .reform-item,
.charte-majj-officiel .faq-item,
.charte-majj-officiel .clients__item,
.charte-majj-officiel .stats-mini__item,
.charte-majj-officiel .approach__step,
.charte-majj-officiel .timeline--editorial .timeline__step,
.charte-majj-officiel .mission-card:not(.mission-card--photo),
.charte-majj-officiel .reference-card:not(.mission-card--photo) {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(11, 43, 102, 0.1);
  background-color: #fff;
  background-image: linear-gradient(
    165deg,
    rgba(224, 232, 255, 0.92) 0%,
    rgba(255, 255, 255, 0) 46%
  );
  box-shadow: 0 12px 28px -24px rgba(11, 43, 102, 0.55);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.35s ease;
}

.charte-majj-officiel .sector-item::before,
.charte-majj-officiel .value-card::before,
.charte-majj-officiel .why-card::before,
.charte-majj-officiel .expert-network__item::before,
.charte-majj-officiel .reform-item::before,
.charte-majj-officiel .faq-item::before,
.charte-majj-officiel .approach__step::before,
.charte-majj-officiel .timeline--editorial .timeline__step::before,
.charte-majj-officiel .mission-card:not(.mission-card--photo)::before,
.charte-majj-officiel .reference-card:not(.mission-card--photo)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--majj-c4);
  pointer-events: none;
  z-index: 2;
  transition: background-color 0.35s ease;
}

.charte-majj-officiel .sector-item:hover,
.charte-majj-officiel .value-card:hover,
.charte-majj-officiel .why-card:hover,
.charte-majj-officiel .expert-network__item:hover,
.charte-majj-officiel .reform-item:hover,
.charte-majj-officiel .approach__step:hover,
.charte-majj-officiel .timeline--editorial .timeline__step:hover,
.charte-majj-officiel .mission-card:not(.mission-card--photo):hover,
.charte-majj-officiel .reference-card:not(.mission-card--photo):hover {
  transform: translate3d(0, -4px, 0);
  border-color: rgba(47, 81, 178, 0.28);
  box-shadow: 0 22px 40px -24px rgba(11, 43, 102, 0.58);
}

.charte-majj-officiel .sector-item:hover::before,
.charte-majj-officiel .value-card:hover::before,
.charte-majj-officiel .why-card:hover::before,
.charte-majj-officiel .expert-network__item:hover::before,
.charte-majj-officiel .reform-item:hover::before,
.charte-majj-officiel .approach__step:hover::before,
.charte-majj-officiel .timeline--editorial .timeline__step:hover::before,
.charte-majj-officiel .faq-item:has(.faq-item__question[aria-expanded='true'])::before,
.charte-majj-officiel .mission-card:not(.mission-card--photo):hover::before,
.charte-majj-officiel .reference-card:not(.mission-card--photo):hover::before {
  background: var(--majj-c2);
}

.charte-majj-officiel .why-card {
  border-left-color: rgba(11, 43, 102, 0.1);
}

.charte-majj-officiel .value-card {
  border-top-color: rgba(11, 43, 102, 0.1);
}

.charte-majj-officiel .sector-item {
  padding: 2.1rem 1.55rem 1.7rem;
}

/* Coin de cadrage — un repère d'atelier, pas un numéro de slide. */
.charte-majj-officiel .sector-item::after,
.charte-majj-officiel .value-card::after,
.charte-majj-officiel .why-card::after,
.charte-majj-officiel .expert-network__item::after {
  content: '';
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 11px;
  height: 11px;
  border-top: 1.5px solid var(--majj-c4);
  border-right: 1.5px solid var(--majj-c4);
  pointer-events: none;
  z-index: 1;
  transition: border-color 0.35s ease;
}

.charte-majj-officiel .sector-item:hover::after,
.charte-majj-officiel .value-card:hover::after,
.charte-majj-officiel .why-card:hover::after,
.charte-majj-officiel .expert-network__item:hover::after {
  border-color: var(--majj-c2);
}

.charte-majj-officiel .value-card__icon,
.charte-majj-officiel .why-card__icon,
.charte-majj-officiel .expert-network__icon,
.charte-majj-officiel .sector-item__icon {
  width: 3.15rem;
  height: 3.15rem;
  min-width: 3.15rem;
  border-radius: 5px;
  background: var(--majj-c5);
  color: var(--majj-c2);
  box-shadow: inset 0 0 0 1px rgba(11, 43, 102, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  transition:
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}

.charte-majj-officiel .why-card__icon,
.charte-majj-officiel .expert-network__icon {
  margin-left: 0;
  margin-right: 0;
}

.charte-majj-officiel .sector-item__icon {
  margin-bottom: 1.1rem;
}

.charte-majj-officiel .sector-item__icon i,
.charte-majj-officiel .sector-item i {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 1.15rem;
  color: inherit;
  display: block;
}

.charte-majj-officiel .value-card__icon i,
.charte-majj-officiel .why-card__icon i,
.charte-majj-officiel .expert-network__icon i {
  color: inherit;
  font-size: 1.15rem;
}

.charte-majj-officiel .value-card:hover .value-card__icon,
.charte-majj-officiel .why-card:hover .why-card__icon,
.charte-majj-officiel .expert-network__item:hover .expert-network__icon,
.charte-majj-officiel .sector-item:hover .sector-item__icon {
  background: var(--majj-c1);
  color: var(--majj-c4);
  box-shadow: none;
}

.charte-majj-officiel .value-card:hover .value-card__icon i,
.charte-majj-officiel .why-card:hover .why-card__icon i,
.charte-majj-officiel .sector-item:hover i,
.charte-majj-officiel .sector-item:hover .sector-item__icon i {
  background: none;
  color: var(--majj-c4);
}

.charte-majj-officiel .sector-item h3,
.charte-majj-officiel .value-card h3,
.charte-majj-officiel .why-card h3,
.charte-majj-officiel .approach__step h3,
.charte-majj-officiel .expert-network__item-title {
  color: var(--majj-c1);
  letter-spacing: -0.015em;
}

.charte-majj-officiel .reform-item {
  padding: 0.95rem 1.15rem 0.95rem 1.05rem;
  gap: 0.85rem;
}

.charte-majj-officiel .reform-item i {
  width: 1.85rem;
  height: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--majj-c5);
  color: var(--majj-c2);
  font-size: 0.7rem;
}

.charte-majj-officiel .reform-item:hover i {
  background: var(--majj-c1);
  color: var(--majj-c4);
}

.charte-majj-officiel .approach__grid::before {
  display: none;
}

.charte-majj-officiel .approach__step {
  text-align: left;
  padding: 1.45rem 1.35rem 1.35rem;
}

.charte-majj-officiel .approach__step-number {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 0 0.95rem;
  border-radius: 4px;
  background: var(--majj-c1);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

.charte-majj-officiel .timeline--editorial .timeline__step {
  padding: 1.35rem 1.5rem 1.45rem;
  margin-bottom: 0.85rem;
  border-bottom: 0;
}

.charte-majj-officiel .timeline--editorial .timeline__step:last-child {
  margin-bottom: 0;
}

.charte-majj-officiel .timeline--editorial .timeline__step-number {
  color: var(--majj-c2);
  letter-spacing: 0.18em;
}

.charte-majj-officiel .clients__item::before,
.charte-majj-officiel .stats-mini__item::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  width: auto;
  height: 2px;
  background: var(--majj-c4);
  transform: none;
  pointer-events: none;
}

.charte-majj-officiel .clients__item:hover,
.charte-majj-officiel .stats-mini__item:hover {
  transform: translate3d(0, -2px, 0);
  border-color: rgba(47, 81, 178, 0.28);
  box-shadow: 0 16px 32px -24px rgba(11, 43, 102, 0.5);
}

.charte-majj-officiel .clients__item:hover::before,
.charte-majj-officiel .stats-mini__item:hover::before {
  background: var(--majj-c2);
  transform: none;
}

.charte-majj-officiel .faq-item::before {
  transform: scaleY(1);
  background: var(--majj-c4);
}

.charte-majj-officiel .faq-item:hover {
  transform: none;
  border-color: rgba(47, 81, 178, 0.22);
}

.charte-majj-officiel .faq-item:has(.faq-item__question[aria-expanded='true']) {
  border-color: rgba(47, 81, 178, 0.32);
  box-shadow: 0 18px 36px -24px rgba(11, 43, 102, 0.5);
}

.charte-majj-officiel .expertise-index__icon {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: var(--majj-c5);
  color: var(--majj-c2);
  transition:
    background 0.35s ease,
    color 0.35s ease;
}

.charte-majj-officiel .expertise-index__link:hover .expertise-index__icon,
.charte-majj-officiel .expertise-index__link:focus-visible .expertise-index__icon {
  background: var(--majj-c1);
  color: var(--majj-c4);
}

.charte-majj-officiel .expertise-index__link {
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  position: relative;
  padding-left: 0.9rem;
}

.charte-majj-officiel .expertise-index__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  bottom: 1.15rem;
  width: 3px;
  background: var(--majj-c2);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s ease;
}

.charte-majj-officiel .expertise-index__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.charte-majj-officiel .expertise-index__go-label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-0.35rem);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.charte-majj-officiel .expertise-index__link:hover,
.charte-majj-officiel .expertise-index__link:focus-visible {
  background: linear-gradient(165deg, var(--majj-c5) 0%, rgba(255, 255, 255, 0) 72%);
  transform: none;
}

.charte-majj-officiel .expertise-index__link:hover::before,
.charte-majj-officiel .expertise-index__link:focus-visible::before {
  transform: scaleY(1);
}

.charte-majj-officiel .expertise-index__link:hover .expertise-index__go,
.charte-majj-officiel .expertise-index__link:focus-visible .expertise-index__go {
  transform: none;
}

.charte-majj-officiel .expertise-index__link:hover .expertise-index__go-label,
.charte-majj-officiel .expertise-index__link:focus-visible .expertise-index__go-label {
  opacity: 1;
  transform: none;
}

/* Accueil — Ken Burns du hero : un seul souffle de 3 % sur 6,5 s,
   calé sur le rail. La respiration infinie de 34 s reste pour les
   mosaïques et le portrait Yaoundé. */
.charte-majj-officiel .hero--photo-single .hero__photo,
.charte-majj-officiel .hero__slide.is-active .hero__photo {
  animation: majj-hero-ken 6.5s ease-out forwards;
  transform-origin: center;
}

.charte-majj-officiel .hero.is-paused .hero--photo-single .hero__photo,
.charte-majj-officiel .hero.is-paused .hero__slide.is-active .hero__photo {
  animation-play-state: paused;
}

@keyframes majj-hero-ken {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.03);
  }
}

/* Légende muséale sous le visuel Yaoundé — plus de cartouche sur
   la photographie. Le voile marine n'a plus de texte à porter. */
.charte-majj-officiel .about__caption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.85rem 0 0;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--majj-c1);
}

.charte-majj-officiel .about__caption-sep {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--majj-c2);
}

.charte-majj-officiel .about__caption-country {
  color: var(--majj-ink);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.charte-majj-officiel .about__decorative-box--photo::after {
  display: none;
}

/* Présence : trois territoires distincts, voile ouvert pour que
   le territoire se lise. Ce n'est pas un mur marine. */
.charte-majj-officiel .presence__mosaic {
  grid-template-columns: repeat(3, 1fr);
}

.charte-majj-officiel .presence::after {
  background:
    linear-gradient(
      to top,
      rgba(11, 43, 102, 0.96) 0%,
      rgba(11, 43, 102, 0.28) 46%,
      transparent 70%
    ),
    linear-gradient(
      105deg,
      rgba(11, 43, 102, 0.7) 0%,
      rgba(11, 43, 102, 0.4) 48%,
      rgba(11, 43, 102, 0.52) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
  .charte-majj-officiel .sector-item:hover,
  .charte-majj-officiel .value-card:hover,
  .charte-majj-officiel .why-card:hover,
  .charte-majj-officiel .expert-network__item:hover,
  .charte-majj-officiel .reform-item:hover,
  .charte-majj-officiel .approach__step:hover,
  .charte-majj-officiel .clients__item:hover,
  .charte-majj-officiel .stats-mini__item:hover {
    transform: none;
  }

  .charte-majj-officiel .hero__pager-dot.is-active {
    animation: none;
    background-size: 100% 100%;
  }

  .charte-majj-officiel .hero--photo-single .hero__photo,
  .charte-majj-officiel .hero__slide.is-active .hero__photo {
    animation: none;
    transform: none;
  }

  .charte-majj-officiel .expertise-index__go-label {
    opacity: 1;
    transform: none;
  }

  .charte-majj-officiel .expertise-index__link::before {
    transition: none;
  }
}

/* Cabinet — mission : filet Color 2, surface glacée, plus de carte
   marketing en dégradé. */
.charte-majj-officiel .cabinet-read__mission {
  background: var(--majj-c5);
  border-left: 3px solid var(--majj-c2);
  box-shadow: none;
}

/* Galerie : légende muséale sous l'image, pas un bandeau sur la photo.
   Plus d'indice 01, plus de pastille 11/15 sur le cliché. */
.charte-majj-officiel .gallery-swiper {
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.charte-majj-officiel .gallery-swiper__link {
  overflow: hidden;
  background: var(--majj-c1);
}

.charte-majj-officiel .gallery-swiper__caption {
  position: static;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.85rem 0 0;
  padding: 0;
  background: none;
  color: var(--majj-c1);
  pointer-events: none;
}

.charte-majj-officiel .gallery-swiper__caption-sep {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--majj-c2);
  flex: none;
}

.charte-majj-officiel .gallery-swiper__caption-text {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--majj-c1);
}

.charte-majj-officiel .gallery-swiper__index {
  display: none;
}

.charte-majj-officiel .gallery-swiper__meta {
  position: static;
  margin: 0.65rem 0 0;
  padding: 0;
  background: none;
  color: var(--majj-ink);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.charte-majj-officiel .gallery-swiper__progress {
  position: static;
  margin-top: 0.85rem;
  background: var(--majj-c5);
}

.charte-majj-officiel .gallery-swiper__progress::after {
  background: var(--majj-c2);
}

.charte-majj-officiel .gallery-swiper__nav {
  border-radius: 0;
  background: #fff;
  color: var(--majj-c1);
  box-shadow: none;
  border: 1px solid var(--majj-c4);
}

.charte-majj-officiel .gallery-swiper__nav:hover,
.charte-majj-officiel .gallery-swiper__nav:focus-visible {
  background: var(--majj-c2);
  color: #fff;
  border-color: var(--majj-c2);
}

.charte-majj-officiel .expert__role {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 1.7rem + 2.1vw, 3.2rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--majj-c1);
  margin: 0 0 0.35rem;
}

.charte-majj-officiel .expert__name {
  font-family: var(--font-heading);
  font-size: clamp(1.28rem, 1.12rem + 0.7vw, 1.65rem);
  font-weight: 600;
  color: var(--majj-c1);
}

.charte-majj-officiel .team-stage {
  background: var(--majj-c5);
}

.charte-majj-officiel .team-cover {
  background: var(--majj-c1);
}

.charte-majj-officiel .team-cover__identity {
  background: var(--majj-c1);
}

.charte-majj-officiel .team-cover__name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: #fff;
}

.charte-majj-officiel .team-cover__role {
  color: rgba(255, 255, 255, 0.8);
  text-transform: none;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.charte-majj-officiel .team-cover__bio {
  color: rgba(255, 255, 255, 0.9);
  text-align: start;
  hyphens: none;
  -webkit-hyphens: none;
}

.charte-majj-officiel .team-cover__cv {
  color: #fff;
  border-bottom-color: var(--majj-c2);
}

.charte-majj-officiel .team-swiper__nav {
  border-radius: 0;
  background: #fff;
  color: var(--majj-c1);
  border: 1px solid var(--majj-c4);
}

.charte-majj-officiel .team-swiper__nav:hover,
.charte-majj-officiel .team-swiper__nav:focus-visible {
  background: var(--majj-c2);
  color: #fff;
  border-color: var(--majj-c2);
}

.charte-majj-officiel .team-stage__person {
  border-top-color: var(--majj-c4);
  background: transparent;
}

.charte-majj-officiel .team-stage__person.is-active {
  border-bottom-color: var(--majj-c2);
}

.charte-majj-officiel .team-stage__person-name {
  color: var(--majj-c1);
}

.charte-majj-officiel .country-atlas:not(.country-atlas--frieze) .country-atlas__flag {
  box-shadow: inset 0 0 0 1px var(--majj-c4);
  background: rgba(11, 43, 102, 0.08);
}

.charte-majj-officiel .country-atlas:not(.country-atlas--frieze) .country-atlas__name {
  color: var(--majj-c1);
}

.charte-majj-officiel .country-atlas--frieze {
  border-top: 0;
}

.charte-majj-officiel .country-atlas--frieze .country-atlas__flag {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  background: transparent;
}

.charte-majj-officiel .presence__plinth {
  background: var(--majj-c1);
  border-top-color: rgba(255, 255, 255, 0.18);
}

.charte-majj-officiel .contact-way__icon {
  border-radius: 0;
  color: var(--majj-c2);
  border-color: var(--majj-c4);
  background: var(--majj-c5);
}

.charte-majj-officiel .contact-way--file .contact-way__icon {
  color: var(--majj-c1);
  border-color: var(--majj-c4);
  background: var(--majj-c5);
}

.charte-majj-officiel .contact-place--map-only .map-embed {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--majj-c4);
}

/* ====================================================================
   EXPERTISES — lecteur
   L'onglet porte déjà l'icône. La liste est un catalogue, pas un
   processus : filet, pas 01–12. La bande photo reste, en still de
   dossier (pas une pastille arrondie dans le padding).
   ==================================================================== */

.charte-majj-officiel .expertise-reader__stage {
  padding: 0 0 2rem;
  overflow: hidden;
  border-radius: 0;
  border-color: var(--majj-c4);
  box-shadow: none;
}

.charte-majj-officiel .expertise-reader__visual {
  height: 14rem;
  margin: 0 0 1.75rem;
  border-radius: 0;
}

.charte-majj-officiel .expertise-reader__visual__img {
  filter: saturate(0.88);
}

.charte-majj-officiel .expertise-reader__icon {
  display: none;
}

.charte-majj-officiel .expertise-reader__head {
  padding: 0 2rem;
}

.charte-majj-officiel .expertise-reader__kicker {
  color: var(--majj-c2);
  margin-bottom: 0.65rem;
}

.charte-majj-officiel .expertise-reader__title {
  margin-bottom: 1.35rem;
}

.charte-majj-officiel .expertise-reader__points {
  padding: 0 2rem;
  counter-reset: none;
}

.charte-majj-officiel .expertise-reader__points li {
  padding: 1.05rem 0 1.05rem 1.05rem;
  border-top: 1px solid var(--majj-c4);
  border-left: 2px solid var(--majj-c4);
  counter-increment: none;
}

.charte-majj-officiel .expertise-reader__points li:first-child {
  border-top: 0;
}

.charte-majj-officiel .expertise-reader__points li::before {
  content: none;
  display: none;
}

@media (max-width: 1024px) {
  .charte-majj-officiel .expertise-reader__head,
  .charte-majj-officiel .expertise-reader__points {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .charte-majj-officiel .expertise-reader__visual {
    height: 11.5rem;
  }
}