/**
 * MAJJ — Couche de finition « premium »
 *
 * Chargée après style.css et après la charte active : c'est la dernière
 * strate du cascade. Elle ne redéfinit aucune couleur de marque et
 * n'invente aucun composant. Elle corrige trois choses que les audits
 * ont relevées de façon convergente :
 *
 *   1. la justification typographique, qui creuse des rivières de blanc
 *      dans toutes les colonnes étroites du site ;
 *   2. le manque de respiration verticale entre les blocs ;
 *   3. la hiérarchie trop plate des titres, des cartes et des actions.
 *
 * Tout est réversible : retirer l'appel à cette feuille rend le site à
 * son état antérieur, sans effet de bord.
 *
 * @package MAJJ_Consulting
 */

:root {
  /* Une seule courbe pour tout le site : décélération franche, sans
     rebond. Le rebond est joueur ; un cabinet institutionnel ne joue pas. */
  --ease-premium: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 220ms;
  --dur-base: 340ms;
  --dur-slow: 520ms;

  /* Mesures de lecture. 68ch en colonne pleine, 46ch en colonne étroite :
     au-delà, l'œil perd la ligne ; en deçà, il hache. */
  --measure: 68ch;
  --measure-narrow: 46ch;

  /* Anneau de focus unique, décliné clair / sombre. */
  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--color-accent);
  --focus-ring-dark: 0 0 0 2px rgba(11, 43, 102, 0.9), 0 0 0 4px #fff;
}

/* Respiration : +25 % de hauteur de section au-dessus de 1200px, là où
   l'écran a de la place à donner. En dessous, on garde l'échelle
   existante — l'air se prend sur le grand écran, pas sur le pouce. */
@media (min-width: 1200px) {
  :root {
    --space-14: 7.5rem;
    --space-16: 8.75rem;
  }
}

@media (min-width: 1600px) {
  :root {
    --space-14: 8.5rem;
    --space-16: 10rem;
  }
}

/* ====================================================================
   1. TYPOGRAPHIE — la correction la plus visible du lot
   ==================================================================== */

/* La justification était appliquée à tous les paragraphes, y compris
   dans des colonnes de 250 à 300px. À cette largeur, CSS ne peut
   répartir l'excédent que sur trois ou quatre espaces : il en résulte
   des trous et des rivières verticales qui trahissent immédiatement
   l'amateurisme. Le drapeau à droite est la norme de tous les grands
   cabinets. On ne conserve la justification nulle part : la césure
   automatique française reste imparfaite dans les navigateurs, et un
   texte au fer à gauche bien interligné est toujours plus calme. */
.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,
.about__text,
.about__vision p,
.expert__bio,
.expertise-index__excerpt,
.expertise-reader__points li,
.timeline__step p,
.entry-content p,
.entry-content li,
.text-block p,
.text-block li,
.card__text,
.faq-item__answer,
.faq-item__answer p,
.mission-card__body p,
.cabinet-read__story p,
.cabinet-read__mission p,
.presence__content p {
  text-align: start;
  text-align-last: auto;
  text-justify: auto;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Équilibrage des fins de ligne : les titres ne laissent plus un mot
   orphelin sur la dernière ligne, les paragraphes non plus. */
h1,
h2,
h3,
h4,
.hero__title,
.section-title,
.expert__role,
.expert__name,
.mission-card__body h3,
.pub-card h3,
.card__title,
.expertise-index__title {
  text-wrap: balance;
}

p,
.section-subtitle,
.expertise-index__excerpt,
.hero__chapo {
  text-wrap: pretty;
}

/* Titres de section : un cran plus grands, plus serrés, mieux ancrés.
   L'approche négative ne s'applique qu'aux grands corps — sous 24px
   elle abîmerait la lisibilité. */
.charte-majj-officiel .section-title,
.charte-majj-officiel .hero__title,
.charte-majj-officiel .expert__name,
.charte-majj-officiel .about__title {
  letter-spacing: -0.018em;
}

.charte-majj-officiel .section-title {
  font-size: clamp(1.9rem, 1.45rem + 1.85vw, 3rem);
  line-height: 1.14;
  margin-bottom: var(--space-4);
}

/* Le sous-titre est un chapô, pas un paragraphe courant : plus clair
   que l'encre, plus grand que le corps, mesuré court. */
.charte-majj-officiel .section-subtitle {
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.2rem);
  line-height: 1.65;
  max-width: 58ch;
  color: var(--majj-ink-soft);
  opacity: 1;
}

.charte-majj-officiel .section-subtitle.text-center,
.charte-majj-officiel .section-subtitle--centered {
  margin-inline: auto;
}

/* Un seul rail pour toute la page.
 *
 * Le hero, les domaines, l'identité et l'expert s'alignaient à gauche,
 * mais « Nos Références » et « Publications » étaient centrés : l'œil
 * qui descend la page perd son point d'appui à mi-parcours. Les grands
 * cabinets tiennent une seule verticale du haut jusqu'au pied. On
 * ramène donc ces deux sections sur le rail commun. */
.charte-majj-officiel .expertise > .container > .section-title,
.charte-majj-officiel .references > .container > .section-title,
.charte-majj-officiel .publications > .container > .section-title,
.charte-majj-officiel .expertise > .container > .section-subtitle,
.charte-majj-officiel .references > .container > .section-subtitle,
.charte-majj-officiel .publications > .container > .section-subtitle {
  text-align: start;
  margin-inline: 0;
}

.charte-majj-officiel .expertise > .container > .accent-line,
.charte-majj-officiel .references > .container > .accent-line,
.charte-majj-officiel .publications > .container > .accent-line {
  margin-inline: 0;
}

.charte-majj-officiel .references .section-cta,
.charte-majj-officiel .publications .section-cta {
  text-align: center;
}

/* Le filet d'accent devient une respiration à part entière plutôt
   qu'un trait collé au texte. */
.charte-majj-officiel .accent-line {
  margin: var(--space-6) 0 0;
}

.charte-majj-officiel .text-center + .accent-line,
.charte-majj-officiel .section-subtitle--centered + .accent-line {
  margin-inline: auto;
}

/* Corps de texte : plus jamais sous 15px, quel que soit le composant.
   Les audits signalaient des gris trop petits dans les cartes. */
.charte-majj-officiel .card__text,
.charte-majj-officiel .mission-card__body p,
.charte-majj-officiel .pub-card p,
.charte-majj-officiel .expertise-index__excerpt {
  font-size: 0.975rem;
  line-height: 1.7;
}

/* Étiquettes en petites capitales : l'approche positive est ce qui les
   rend lisibles. Sans elle, une capitale serrée devient un bloc. */
.charte-majj-officiel .about__label,
.charte-majj-officiel .presence__kicker,
.charte-majj-officiel .hero__tagline,
.charte-majj-officiel .stats-bar__item p {
  letter-spacing: 0.16em;
}

/* Chiffres des statistiques : chasse fixe, sinon la ligne « 25+ 15+
   200+ 8 » danse d'un pixel à chaque changement de valeur. */
.charte-majj-officiel .counter,
.charte-majj-officiel .stats-bar__item .counter {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

/* ====================================================================
   2. HERO — impact, calme, hiérarchie d'action
   ==================================================================== */

/* Le voile était uniforme : le texte tombait donc parfois sur une zone
   claire et chargée de la photo. On le rend directionnel — dense à
   gauche où vit le texte, transparent à droite où vit l'image — et on
   ferme le bas pour raccrocher la section suivante. */
.charte-majj-officiel .hero--photo::before {
  background:
    linear-gradient(180deg, rgba(11, 43, 102, 0.52) 0%, rgba(11, 43, 102, 0) 30%),
    linear-gradient(
      103deg,
      rgba(11, 43, 102, 0.93) 0%,
      rgba(11, 43, 102, 0.78) 30%,
      rgba(11, 43, 102, 0.44) 62%,
      rgba(11, 43, 102, 0.18) 100%
    ),
    linear-gradient(to top, rgba(11, 43, 102, 0.6) 0%, rgba(11, 43, 102, 0) 24%);
}

/* `.hero__content` porte la classe `.container` mais était bridé à
   700px : sur un écran large, le bloc de titre flottait au milieu de la
   page, décalé de près de 300px par rapport au logo et à tous les
   titres de section. Le rail gauche est la colonne vertébrale d'une
   mise en page institutionnelle ; on le rétablit, et c'est le titre
   lui-même qui porte désormais sa mesure. */
.charte-majj-officiel .hero__content {
  max-width: var(--max-width);
}

/* Le surtitre reçoit un filet : il devient un repère de marque et non
   une ligne de texte perdue au-dessus du titre. */
.charte-majj-officiel .hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: #fff;
  margin-bottom: var(--space-5);
  text-shadow: 0 1px 10px rgba(11, 43, 102, 0.6);
}

.charte-majj-officiel .hero__tagline::before {
  content: '';
  width: 2.25rem;
  height: 2px;
  background: currentColor;
  opacity: 0.85;
}

/* Le titre portait la promesse sans en avoir la stature. On monte le
   plafond typographique, on resserre l'interligne, on allège l'ombre :
   c'est le contraste du voile qui doit porter le texte, pas un flou. */
.charte-majj-officiel .hero__title {
  font-size: clamp(2.4rem, 1.65rem + 3.2vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 24px rgba(11, 43, 102, 0.45);
  max-width: 17ch;
}

.charte-majj-officiel .hero__chapo {
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
  line-height: 1.6;
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--space-8);
  text-shadow: 0 1px 14px rgba(11, 43, 102, 0.5);
}

.charte-majj-officiel .hero__cta {
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* Hiérarchie d'action : une action principale pleine et large, une
   action secondaire en contour. Elles avaient le même poids visuel,
   donc aucune ne guidait. */
.charte-majj-officiel .hero .btn {
  min-height: 3.25rem;
  padding: 0.95rem 2rem;
  font-size: 1rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius-control);
}

.charte-majj-officiel .hero .btn--primary {
  background: #fff;
  color: var(--majj-c1);
  border: 1px solid #fff;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}

.charte-majj-officiel .hero .btn--primary:hover,
.charte-majj-officiel .hero .btn--primary:focus-visible {
  background: var(--majj-c5);
  color: var(--majj-c1);
  border-color: var(--majj-c5);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.65);
}

.charte-majj-officiel .hero .btn--ghost,
.charte-majj-officiel .hero a.btn.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.charte-majj-officiel .hero .btn--ghost:hover,
.charte-majj-officiel .hero .btn--ghost:focus-visible,
.charte-majj-officiel .hero a.btn.btn--ghost:hover,
.charte-majj-officiel .hero a.btn.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

/* L'indicateur de défilement devient un détail et non un acteur : il
   ne doit pas entrer en concurrence avec les deux boutons. */
.charte-majj-officiel .hero__scroll {
  opacity: 0.5;
  transition: opacity var(--dur-base) var(--ease-premium);
}

.charte-majj-officiel .hero__scroll:hover,
.charte-majj-officiel .hero__scroll:focus-visible {
  opacity: 1;
}

/* Cible tactile du pager : le rail reste fin, la zone sensible fait
   44px de haut. Norme WCAG 2.5.5 respectée sans épaissir le dessin. */
.charte-majj-officiel .hero__pager {
  gap: 0.75rem;
}

.charte-majj-officiel .hero__pager-dot {
  width: 2.25rem;
}

.charte-majj-officiel .hero__pager-dot.is-active {
  width: 2.25rem;
}

.charte-majj-officiel .hero__pager-dot::after {
  width: 2.75rem;
  height: 44px;
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
  .charte-majj-officiel .hero__title {
    max-width: none;
  }

  .charte-majj-officiel .hero__scroll {
    display: none;
  }
}

/* ====================================================================
   3. BARRE DE STATISTIQUES — des chiffres qui se tiennent
   ==================================================================== */

/* La charte pose cette bande en clair (bleu glacé, chiffres marine) :
   on ne touche ni au fond ni aux teintes, seulement au rythme. */
.charte-majj-officiel .stats-bar__item .counter {
  margin-bottom: var(--space-3);
}

/* ====================================================================
   4. INDEX DES EXPERTISES — de la ligne de liste à la carte
   ==================================================================== */

/* Huit entrées séparées par un filet, c'est un sommaire. Huit entrées
   posées chacune sur sa surface, c'est un portefeuille d'offres. La
   différence de perception est considérable pour un coût visuel nul. */
.charte-majj-officiel .expertise-index {
  column-gap: var(--space-8);
  row-gap: var(--space-5);
  margin-top: var(--space-12);
}

.charte-majj-officiel .expertise-index__item {
  border-top: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--majj-hairline);
  transition:
    box-shadow var(--dur-base) var(--ease-premium),
    transform var(--dur-base) var(--ease-premium);
}

.charte-majj-officiel .expertise-index__item:hover,
.charte-majj-officiel .expertise-index__item:focus-within {
  transform: none;
  box-shadow:
    inset 0 0 0 1px rgba(47, 81, 178, 0.3),
    0 18px 40px -26px rgba(11, 43, 102, 0.55);
}

.charte-majj-officiel .expertise-index__link {
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: var(--space-5);
  padding: 1.85rem 1.75rem;
  border-radius: 14px;
  align-items: start;
}

/* Le filet vertical d'origine devient inutile — la carte porte déjà la
   limite — et se transformait en double trait à l'intérieur du cadre. */
.charte-majj-officiel .expertise-index__link::before {
  display: none;
}

.charte-majj-officiel .expertise-index__link:hover,
.charte-majj-officiel .expertise-index__link:focus-visible {
  background: linear-gradient(170deg, rgba(224, 232, 255, 0.72) 0%, rgba(255, 255, 255, 0) 60%);
}

/* L'icône passe de discrète à affirmée : surface pleine en bleu glacé,
   glyphe en bleu franc, inversion complète au survol. */
.charte-majj-officiel .expertise-index__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 12px;
  background: var(--majj-c5);
  color: var(--majj-c2);
  font-size: 1.15rem;
  box-shadow: inset 0 0 0 1px rgba(47, 81, 178, 0.12);
}

.charte-majj-officiel .expertise-index__title {
  font-size: 1.18rem;
  line-height: 1.32;
  font-weight: 600;
  color: var(--majj-c1);
  margin-bottom: 0.7rem;
}

/* La colonne de texte fait déjà moins de 55 caractères dans la carte :
   la brider davantage creusait une marge droite vide et déséquilibrait
   le bloc. */
.charte-majj-officiel .expertise-index__excerpt {
  max-width: none;
  color: var(--majj-ink-soft);
}

/* La flèche remonte au niveau du titre : elle répond à la ligne de
   force du bloc au lieu de flotter au milieu du vide. */
.charte-majj-officiel .expertise-index__go {
  align-self: start;
  padding-top: 0.85rem;
  opacity: 0.6;
}

@media (max-width: 1100px) {
  .charte-majj-officiel .expertise-index {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .charte-majj-officiel .expertise-index__link {
    padding: 1.45rem 1.25rem;
    gap: var(--space-4);
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }

  .charte-majj-officiel .expertise-index__icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
  }
}

/* ====================================================================
   5. CARTES DE MISSION ET DE PUBLICATION — profondeur et tenue
   ==================================================================== */

/* Traitement d'image unifié : même rapport de cadre, même recadrage,
   même dégradé de pied. Les visuels de missions venaient de sources
   hétérogènes ; c'est le cadre commun qui rétablit la cohérence. */
/* `.mission-card__media` est volontairement absent de cette règle : la
   feuille de base le pose en `position: absolute; inset: 0` pour qu'il
   remplisse la carte. Lui imposer `relative` l'effondrait à zéro pixel
   de haut et la carte retombait sur son fond noir. */
.charte-majj-officiel .presence__tile,
.charte-majj-officiel .publications-grid .pub-card__cover {
  position: relative;
  overflow: hidden;
}

/* Les visuels de mission sont posés en fond sur un <span>, pas en
   <img> : le recadrage et l'animation se pilotent donc sur la surface
   elle-même. */
.charte-majj-officiel .mission-card__media {
  background-size: cover;
  background-position: center;
  filter: saturate(0.95) contrast(1.03);
  transition: transform var(--dur-slow) var(--ease-premium);
}

.charte-majj-officiel .pub-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.03);
  transition: transform var(--dur-slow) var(--ease-premium);
}

.charte-majj-officiel .mission-card--photo:hover .mission-card__media {
  transform: scale(1.045);
}

.charte-majj-officiel .pub-card--cover:hover .pub-card__cover img {
  transform: scale(1.045);
}

.charte-majj-officiel .mission-card,
.charte-majj-officiel .reference-card,
.charte-majj-officiel .pub-card {
  transition:
    transform var(--dur-base) var(--ease-premium),
    box-shadow var(--dur-base) var(--ease-premium),
    border-color var(--dur-base) var(--ease-premium);
}

.charte-majj-officiel .mission-card:hover,
.charte-majj-officiel .reference-card:hover,
.charte-majj-officiel .pub-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(11, 43, 102, 0.06), 0 22px 46px -22px rgba(11, 43, 102, 0.42);
}

/* Contraste titre / description : le titre gagne un cran de corps et
   l'encre pleine, la description passe en encre douce.
   L'encre marine ne vaut que sur fond clair : les cartes de mission
   photographiques posent leur texte sur l'image, il y reste blanc. */
.charte-majj-officiel .mission-card__body h3,
.charte-majj-officiel .reference-card h3,
.charte-majj-officiel .pub-card h3 {
  font-size: 1.12rem;
  line-height: 1.38;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.charte-majj-officiel .mission-card:not(.mission-card--photo) .mission-card__body h3,
.charte-majj-officiel .reference-card:not(.mission-card--photo) h3,
.charte-majj-officiel .pub-card h3 {
  color: var(--majj-c1);
}

.charte-majj-officiel .mission-card:not(.mission-card--photo) .mission-card__body p,
.charte-majj-officiel .reference-card:not(.mission-card--photo) p {
  color: var(--majj-ink-soft);
}

/* Cartes photographiques : le texte est posé sur l'image. Le dégradé de
   pied de la feuille de base assure le contraste, une ombre courte
   assure la lisibilité même sur une zone claire de la photographie. */
.charte-majj-officiel .mission-card--photo .mission-card__body h3 {
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

.charte-majj-officiel .mission-card--photo .mission-card__body p {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Les tuiles de la mosaïque « présence » recevaient trois photographies
   de nature et de colorimétrie différentes : l'une grise, l'autre bleu
   vif. Une désaturation commune les ramène dans la même famille avant
   même que le voile marine de la section ne s'applique. */
/* Traitement bichrome : les trois photographies sont ramenées au gris,
   et c'est le voile marine de la section qui les recolore. Les écarts
   de colorimétrie d'origine — l'une froide, l'autre franchement bleue —
   disparaissent, la bande se lit d'un seul tenant. */
.charte-majj-officiel .presence__tile {
  filter: grayscale(0.88) contrast(1.06) brightness(0.92);
}

/* Les jonctions entre tuiles restaient visibles en arête franche : un
   liseré sombre de part et d'autre les fond dans la bande. */
.charte-majj-officiel .presence__tile + .presence__tile {
  box-shadow: inset 22px 0 34px -18px rgba(11, 43, 102, 0.85);
}

.charte-majj-officiel .presence__tile:not(:last-child) {
  box-shadow: inset -22px 0 34px -18px rgba(11, 43, 102, 0.85);
}

.charte-majj-officiel .presence__tile + .presence__tile:not(:last-child) {
  box-shadow:
    inset 22px 0 34px -18px rgba(11, 43, 102, 0.85),
    inset -22px 0 34px -18px rgba(11, 43, 102, 0.85);
}

/* Drapeaux du socle : ils portent la seule couleur saturée de la page.
   Un cadre fin et un angle adouci suffisent à les rendre solidaires de
   la charte au lieu de la percer. */
.charte-majj-officiel .country-atlas--on-dark .country-atlas__flag img {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 6px 14px -8px rgba(0, 0, 0, 0.6);
  filter: saturate(0.92);
}

/* Le bloc de texte était bridé à 42rem tout en portant `.container` :
   ses marges automatiques le recentraient donc au milieu de l'écran,
   à près de 300px du rail gauche suivi par tout le reste de la page.
   Même correction que pour le hero : le conteneur reprend sa largeur,
   la mesure de lecture se règle sur le titre et le paragraphe. */
.charte-majj-officiel .presence__content {
  max-width: var(--max-width);
}

.charte-majj-officiel .presence__content h2 {
  max-width: 18ch;
}

.charte-majj-officiel .presence__content p {
  max-width: 56ch;
}

/* ====================================================================
   6. BOUTONS ET LIENS — micro-interactions tenues
   ==================================================================== */

.charte-majj-officiel .btn {
  transition:
    transform var(--dur-fast) var(--ease-premium),
    box-shadow var(--dur-fast) var(--ease-premium),
    background-color var(--dur-fast) var(--ease-premium),
    border-color var(--dur-fast) var(--ease-premium),
    color var(--dur-fast) var(--ease-premium);
}

.charte-majj-officiel .btn--primary:hover,
.charte-majj-officiel .btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(11, 43, 102, 0.62);
}

.charte-majj-officiel .btn:active {
  transform: translateY(0);
}

/* Le CTA d'en-tête doit se lire comme l'action la plus engageante de la
   page sans crier : on lui donne du corps, pas de la couleur en plus. */
.charte-majj-officiel .header__cta {
  padding: 0.7rem 1.35rem;
  font-size: 0.925rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  box-shadow: 0 10px 22px -16px rgba(11, 43, 102, 0.8);
}

.charte-majj-officiel .header__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -14px rgba(11, 43, 102, 0.85);
}

/* Navigation : le soulignement se déploie depuis la gauche au lieu
   d'apparaître d'un bloc. Détail, mais c'est la somme des détails qui
   donne l'impression de fabrication soignée. */
.charte-majj-officiel .header__nav .menu > li > a::after,
.charte-majj-officiel .nav-menu > li > a::after {
  transition: transform var(--dur-base) var(--ease-premium);
}

/* Sélecteur de langue : rail marine, pastille active Color 2,
   libellé inactif blanc — jamais de blanc sur blanc. */
.charte-majj-officiel .lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  transition:
    background-color var(--dur-fast) var(--ease-premium),
    color var(--dur-fast) var(--ease-premium);
}

/* ====================================================================
   7. FOCUS — un seul anneau, visible sur clair comme sur sombre
   ==================================================================== */

.charte-majj-officiel a:focus-visible,
.charte-majj-officiel button:focus-visible,
.charte-majj-officiel input:focus-visible,
.charte-majj-officiel select:focus-visible,
.charte-majj-officiel textarea:focus-visible,
.charte-majj-officiel [tabindex]:focus-visible {
  outline: 2px solid var(--majj-c2);
  outline-offset: 3px;
  border-radius: 4px;
}

.charte-majj-officiel .hero a:focus-visible,
.charte-majj-officiel .hero button:focus-visible,
.charte-majj-officiel .section--dark a:focus-visible,
.charte-majj-officiel .footer a:focus-visible,
.charte-majj-officiel .presence a:focus-visible {
  outline-color: #fff;
}

/* ====================================================================
   8. CIBLES TACTILES — 44px partout où l'on clique
   ==================================================================== */

@media (max-width: 1024px) {
  .charte-majj-officiel .footer__links a,
  .charte-majj-officiel .footer__nav a,
  .charte-majj-officiel .footer__legal a,
  .charte-majj-officiel .footer__cookie-manage {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ====================================================================
   9. BANDEAU COOKIES — informer sans occuper la scène
   ==================================================================== */

/* Le bandeau était centré en bas, donc exactement sous les deux appels
   à l'action du hero. Il passe à gauche, en carte étroite, corps
   réduit : l'information légale reste entière, l'encombrement tombe. */
.charte-majj-officiel .cookie-consent {
  left: 20px;
  right: auto;
  bottom: 20px;
  margin: 0;
  max-width: 25rem;
  padding: var(--space-4) var(--space-5);
  border-radius: 14px;
  border: 1px solid rgba(11, 43, 102, 0.12);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 24px 56px -28px rgba(11, 43, 102, 0.5);
}

.charte-majj-officiel .cookie-consent__text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--majj-ink-soft);
}

.charte-majj-officiel .cookie-consent__actions {
  gap: 0.6rem;
}

.charte-majj-officiel .cookie-consent__refuse,
.charte-majj-officiel .cookie-consent__accept {
  flex: 1 1 9rem;
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
  min-height: 44px;
}

@media (max-width: 560px) {
  .charte-majj-officiel .cookie-consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* ====================================================================
   10. ALIGNEMENTS ET DÉTAILS DE FINITION
   ==================================================================== */

/* Atlas des pays : une grille régulière plutôt qu'un flux. Les lignes
   inégales étaient l'un des défauts d'alignement les plus visibles. */
.charte-majj-officiel .country-atlas:not(.country-atlas--frieze) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-4) var(--space-5);
}

.charte-majj-officiel .country-atlas__item {
  align-items: center;
}

.charte-majj-officiel .country-atlas__flag img {
  object-fit: cover;
  border-radius: 2px;
}

/* Étiquettes de méthodologie : filet institutionnel, pas des pilules. */
.charte-majj-officiel .expert__methods {
  display: block;
  gap: 0;
}

.charte-majj-officiel .expert__methods li {
  display: inline;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  color: var(--majj-c1);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.7;
}

.charte-majj-officiel .expert__methods li + li::before {
  content: '·';
  display: inline-block;
  margin: 0 0.7rem;
  color: var(--majj-c2);
  font-weight: 400;
  letter-spacing: 0;
}

/* Hiérarchie du bloc expert : la fonction d’abord et plus grande,
 * le nom reste lisible, juste en dessous. */
.charte-majj-officiel .expert__role {
  display: block;
  overflow: visible;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 1.5rem + 2.5vw, 3.5rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-transform: none;
  text-align: left;
  color: var(--majj-c1);
  margin: 0;
}

.charte-majj-officiel .expert__role::after {
  content: '';
  display: block;
  width: 3.25rem;
  height: 2px;
  margin: 0.7rem 0 0.85rem;
  background: var(--majj-c2);
}

.charte-majj-officiel .expert__name {
  display: block;
  font-size: clamp(1.32rem, 1.12rem + 0.9vw, 1.8rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-align: left;
  margin: 0 0 0.45rem;
}

/* Référentiels de l'expert : filet, points médians, pas de pilules. */

/* Portrait de l'expert : un cadrage unique et une ombre portée basse,
   pour qu'il se détache du fond sans effet de vignette. */
.charte-majj-officiel .expert__portrait {
  border-radius: 14px;
  box-shadow: 0 28px 60px -34px rgba(11, 43, 102, 0.65);
}

/* Les blocs animés à l'apparition doivent rester lisibles sans
   JavaScript : sans cette garde, un visiteur qui bloque les scripts
   ne voit que le hero. */
.no-js .reveal,
.no-js .reveal-stagger > * {
  opacity: 1 !important;
  transform: none !important;
}

/* ====================================================================
   11. MOUVEMENT RÉDUIT
   ==================================================================== */

@media (prefers-reduced-motion: reduce) {
  .charte-majj-officiel .expertise-index__item:hover,
  .charte-majj-officiel .expertise-index__item:focus-within,
  .charte-majj-officiel .mission-card:hover,
  .charte-majj-officiel .reference-card:hover,
  .charte-majj-officiel .pub-card:hover,
  .charte-majj-officiel .btn--primary:hover,
  .charte-majj-officiel .btn--secondary:hover,
  .charte-majj-officiel .hero .btn:hover {
    transform: none;
  }

  .charte-majj-officiel .mission-card--photo:hover .mission-card__media,
  .charte-majj-officiel .pub-card--cover:hover .pub-card__cover img {
    transform: none;
  }
}

/* ====================================================================
   12. HEADER — poids, hover, langue
   ==================================================================== */

.charte-majj-officiel .header__inner {
  gap: 1.25rem;
}

.charte-majj-officiel .header__nav-list {
  gap: 0.15rem 1.35rem;
}

.charte-majj-officiel .header__nav-link {
  letter-spacing: 0.03em;
}

.charte-majj-officiel .header__nav-link::after {
  height: 2px;
  transform-origin: left center;
  transition: width var(--dur-base) var(--ease-premium);
}

.charte-majj-officiel .header__nav-link:hover,
.charte-majj-officiel .header__nav-link.active {
  opacity: 1;
}

.charte-majj-officiel .lang-switch,
.charte-majj-officiel .header.scrolled .lang-switch,
body:not(.majj-has-dark-hero) .charte-majj-officiel .lang-switch {
  padding: 3px;
  gap: 2px;
  background: var(--majj-c1);
}

.charte-majj-officiel .lang-switch__btn,
.charte-majj-officiel .lang-switch a {
  min-width: 2.15rem;
  min-height: 1.75rem;
  color: #fff;
  border-radius: calc(var(--radius-control) - 2px);
}

.charte-majj-officiel .lang-switch__btn.is-active,
.charte-majj-officiel .lang-switch a.is-active {
  background: var(--majj-c2);
  color: #fff;
}

.charte-majj-officiel .lang-switch__btn:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ====================================================================
   13. À PROPOS — air, titre, photo
   ==================================================================== */

.charte-majj-officiel .home-identity__story.about__inner {
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
}

.charte-majj-officiel .about__title {
  font-size: clamp(1.85rem, 1.4rem + 1.7vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  max-width: 28ch;
  margin-bottom: var(--space-6);
}

.charte-majj-officiel .about__text {
  max-width: 58ch;
  line-height: 1.75;
  margin-bottom: var(--space-6);
}

.charte-majj-officiel .about__vision {
  margin-top: var(--space-2);
  padding: var(--space-6);
}

.charte-majj-officiel .about__decorative-box,
.charte-majj-officiel .about__photo {
  border-radius: 16px;
}

.charte-majj-officiel .about__photo {
  filter: none;
}

/* ====================================================================
   14. PUBLICATIONS — document, pas affiche
   ==================================================================== */

.charte-majj-officiel .publications {
  padding-block: var(--space-14) var(--space-16);
}

.charte-majj-officiel .publications__grid,
.charte-majj-officiel .publications-grid {
  gap: var(--space-7);
  margin-top: var(--space-10);
}

.charte-majj-officiel .pub-card,
.charte-majj-officiel .publications__card.pub-card {
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px var(--majj-hairline),
    0 16px 36px -28px rgba(11, 43, 102, 0.45);
}

.charte-majj-officiel .pub-card:hover,
.charte-majj-officiel .publications__card.pub-card:hover {
  border-color: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(47, 81, 178, 0.28),
    0 22px 46px -22px rgba(11, 43, 102, 0.42);
}

.charte-majj-officiel .pub-card__body {
  padding: 1.35rem 1.45rem 0.85rem;
}

.charte-majj-officiel .pub-card__body h3,
.charte-majj-officiel .pub-card__body .card__title {
  font-size: 1.08rem;
  line-height: 1.38;
  font-weight: 600;
  color: var(--majj-c1);
}

.charte-majj-officiel .pub-card__meta {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--majj-ink-soft);
}

.charte-majj-officiel .pub-card__actions {
  padding: 0 1.45rem 1.35rem;
  gap: 0.55rem;
}

.charte-majj-officiel .pub-card__actions .btn,
.charte-majj-officiel .pub-card__btn {
  min-height: 44px;
  border-radius: var(--radius-control);
}

/* ====================================================================
   15. CONTACT — calme institutionnel
   ==================================================================== */

.charte-majj-officiel .contact {
  padding-block: var(--space-14) var(--space-16);
}

.charte-majj-officiel .contact__title {
  font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.7rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-bottom: var(--space-6);
}

.charte-majj-officiel .contact__letterhead {
  margin: 0 0 1.5rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.charte-majj-officiel .contact__info .majj-logo__mark {
  height: 40px;
  width: auto;
  aspect-ratio: 68.08 / 26.49;
}

.charte-majj-officiel .contact__form input,
.charte-majj-officiel .contact__form select,
.charte-majj-officiel .contact__form textarea {
  min-height: 48px;
  border-radius: var(--radius-control);
  transition:
    border-color var(--dur-fast) var(--ease-premium),
    box-shadow var(--dur-fast) var(--ease-premium);
}

.charte-majj-officiel .contact__form textarea {
  min-height: 9rem;
}

.charte-majj-officiel .contact__form input:focus,
.charte-majj-officiel .contact__form select:focus,
.charte-majj-officiel .contact__form textarea:focus {
  border-color: var(--majj-c2);
  box-shadow: 0 0 0 3px rgba(47, 81, 178, 0.16);
}

/* ====================================================================
   16. MOBILE & TABLETTE — l'air ne se retire pas
   ==================================================================== */

@media (max-width: 1024px) {
  .charte-majj-officiel .expertise-index__item,
  .charte-majj-officiel .pub-card,
  .charte-majj-officiel .mission-card {
    border-radius: 14px;
  }

  .charte-majj-officiel .section-title,
  .charte-majj-officiel .about__title,
  .charte-majj-officiel .contact__title {
    max-width: 18ch;
  }

  .charte-majj-officiel .about__text,
  .charte-majj-officiel .expert__bio,
  .charte-majj-officiel .expertise-index__excerpt {
    line-height: 1.7;
  }
}

@media (max-width: 768px) {
  .charte-majj-officiel .proof__domains,
  .charte-majj-officiel .home-identity,
  .charte-majj-officiel .publications,
  .charte-majj-officiel .contact,
  .charte-majj-officiel .references {
    padding-block: 4.25rem 4.75rem;
  }

  .charte-majj-officiel .expertise-index {
    row-gap: 1rem;
  }

  .charte-majj-officiel .expertise-index__link {
    padding: 1.35rem 1.15rem;
  }

  .charte-majj-officiel .hero__chapo {
    max-width: none;
    margin-bottom: var(--space-6);
  }

  .charte-majj-officiel .hero .btn {
    width: 100%;
    justify-content: center;
  }

  .charte-majj-officiel .about__title,
  .charte-majj-officiel .expert__role,
  .charte-majj-officiel .expert__name {
    max-width: none;
  }

  .charte-majj-officiel .pub-card__actions {
    flex-wrap: wrap;
  }

  .charte-majj-officiel .pub-card__actions .btn,
  .charte-majj-officiel .pub-card__btn {
    flex: 1 1 9rem;
  }
}

/* ====================================================================
   16. DOCTRINE — racines (audits DA 2026-09-19)
   Rien n'est retiré : textes, images, sections restent. On unifie
   le système qui les porte.
   ==================================================================== */

html {
  scroll-padding-top: 6.25rem;
}

h2,
h3,
[id],
.section,
.page-hero {
  scroll-margin-top: 6.25rem;
}

.charte-majj-officiel .btn::after {
  content: none;
}

.charte-majj-officiel .btn {
  overflow: visible;
}

.charte-majj-officiel.majj-has-dark-hero .header:not(.scrolled) .majj-logo {
  --logo-icon: #fff;
  --logo-word: #fff;
}

.charte-majj-officiel .header:not(.scrolled) .header__nav-link:hover,
.charte-majj-officiel.majj-has-dark-hero .header:not(.scrolled) .header__nav-link:hover {
  opacity: 1;
}

.charte-majj-officiel .cabinet-read {
  max-width: none;
  margin-inline: 0;
  gap: var(--space-10);
}

.charte-majj-officiel .cabinet-read__seal {
  margin: 0 0 2rem;
}

.charte-majj-officiel .cabinet-read__seal .majj-logo {
  --logo-icon: var(--majj-c2);
  --logo-word: var(--majj-c3);
}

@media (min-width: 960px) {
  .charte-majj-officiel .cabinet-read {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr);
    align-items: start;
  }
}

.charte-majj-officiel .cabinet-read__story h2,
.charte-majj-officiel .cabinet-read__mission h2 {
  font-size: clamp(1.9rem, 1.45rem + 1.85vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
}

body.majj-tpl-cabinet.charte-majj-officiel .section-title.text-center,
body.majj-tpl-cabinet.charte-majj-officiel .section-subtitle.text-center,
body.majj-tpl-cabinet.charte-majj-officiel .section-subtitle--centered,
body.majj-tpl-references.charte-majj-officiel .section-title.text-center,
body.majj-tpl-references.charte-majj-officiel .section-subtitle.text-center,
body.majj-tpl-expertise.charte-majj-officiel .section-title.text-center {
  text-align: center;
  margin-inline: auto;
}

body.majj-tpl-cabinet.charte-majj-officiel .accent-line.mx-auto,
body.majj-tpl-references.charte-majj-officiel .accent-line.mx-auto,
body.majj-tpl-expertise.charte-majj-officiel .accent-line.mx-auto {
  margin-inline: auto;
}

.charte-majj-officiel .vision-band .section-title,
.charte-majj-officiel .vision-band .section-title--accent {
  text-align: center;
}

.charte-majj-officiel .vision-band .vision__quote {
  margin-inline: auto;
  text-align: center;
}

.charte-majj-officiel .page-hero {
  min-height: 26rem;
  padding: calc(5.2rem + var(--space-10)) 0 var(--space-12);
}

.charte-majj-officiel .page-hero h1 {
  font-size: clamp(2.05rem, 1.55rem + 2.1vw, 3.45rem);
  letter-spacing: -0.022em;
  line-height: 1.08;
}

.charte-majj-officiel .presence__content {
  padding-block: var(--space-14) var(--space-12);
}

.presence__plinth {
  display: none;
}

.charte-majj-officiel .about__photo {
  background-size: cover;
  background-position: center;
  filter: none;
}

.charte-majj-officiel .hero__photo,
.charte-majj-officiel .gallery-swiper__img {
  object-fit: cover;
  object-position: center 38%;
}

.charte-majj-officiel .page-hero--photo .page-hero__media,
.charte-majj-officiel .vision-band__media,
.charte-majj-officiel .mission-card__media {
  background-size: cover;
  background-position: center;
}

.charte-majj-officiel .hero__photo,
.charte-majj-officiel .presence__tile img,
.charte-majj-officiel .about__photo img,
.charte-majj-officiel .gallery-swiper__img,
.charte-majj-officiel .mission-card__media,
.charte-majj-officiel .page-hero--photo .page-hero__media,
.charte-majj-officiel .vision-band__media {
  filter: none;
}

.charte-majj-officiel .presence__plinth .country-atlas__flag img,
.charte-majj-officiel .country-atlas--frieze img {
  filter: saturate(0.55) contrast(0.96);
  opacity: 0.92;
}

.charte-majj-officiel .partner-swiper__logo,
.charte-majj-officiel .clients__logo {
  filter: none;
  opacity: 1;
}

.charte-majj-officiel .expertise-index__excerpt,
.charte-majj-officiel .card__text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.charte-majj-officiel .pub-card__actions .btn,
.charte-majj-officiel .pub-card__actions .pub-card__btn {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.82rem;
  font-weight: 600;
}

.charte-majj-officiel .footer__credit {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: 0.55;
}

.charte-majj-officiel .form-block {
  border: 0;
  margin: 0 0 var(--space-6);
  padding: 0;
  min-inline-size: 0;
}

.charte-majj-officiel .form-block__legend {
  float: none;
  width: 100%;
  padding: 0 0 0.85rem;
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--majj-c2);
  border-bottom: 1px solid var(--majj-hairline);
}

.charte-majj-officiel .form-group.is-invalid input,
.charte-majj-officiel .form-group.is-invalid select,
.charte-majj-officiel .form-group.is-invalid textarea,
.charte-majj-officiel .contact__form .is-invalid {
  border-color: var(--majj-error, #b42318);
}

.hp-field[hidden],
.hp-field[inert] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.charte-majj-officiel .header__nav .lang-switch {
  display: none;
}

@media (max-width: 1279px) {
  .js .charte-majj-officiel .header__end > .lang-switch {
    display: none;
  }

  .charte-majj-officiel .header__nav .lang-switch {
    display: inline-flex;
    margin: var(--space-5) var(--space-5) var(--space-2);
  }

  .charte-majj-officiel .header__nav .lang-switch__btn,
  .charte-majj-officiel .header__nav .lang-switch a {
    min-width: 44px;
    min-height: 44px;
    color: #fff;
  }

  .charte-majj-officiel .stats-bar__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .charte-majj-officiel .references__grid--featured {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1280px) {
  .charte-majj-officiel .header__nav .lang-switch {
    display: none;
  }
}

.no-js .charte-majj-officiel .header__end > .lang-switch {
  display: inline-flex;
}

.charte-majj-officiel .whatsapp-float {
  width: 48px;
  height: 48px;
  font-size: 1.45rem;
}

.charte-majj-officiel .expertise-index__go {
  opacity: 0.85;
}

.charte-majj-officiel .expertise-index__item:hover .expertise-index__go,
.charte-majj-officiel .expertise-index__item:focus-within .expertise-index__go {
  opacity: 1;
}

@media (min-width: 769px) {
  .charte-majj-officiel .expertise-reader__stage {
    overflow-y: auto;
  }
}

html.majj-cookie-decided .cookie-consent,
.cookie-consent[hidden] {
  display: none !important;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 560ms cubic-bezier(0.22, 1, 0.36, 1) both majj-page-out;
}

::view-transition-new(root) {
  animation: 820ms cubic-bezier(0.22, 1, 0.36, 1) both majj-page-in;
}

@keyframes majj-page-out {
  to {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.992);
  }
}

@keyframes majj-page-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.992);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ====================================================================
   RESPIRATION — dernière strate : plus rien ne pop.
   Courbes longues, cascade architecturale, photos qui respirent.
   ==================================================================== */

html.majj-motion,
html.majj-motion .charte-majj-officiel {
  --transition-fast: 560ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 820ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  --majj-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --majj-rise: 1.35s cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 560ms;
  --dur-base: 820ms;
  --dur-slow: 1.2s;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes majj-soft-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes majj-soft-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes majj-hero-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes majj-float-soft {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}

html.majj-motion #main-content {
  animation: majj-soft-fade 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.majj-motion .reveal,
html.majj-motion main > section:not(.hero):not(.page-hero),
html.majj-motion .footer {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

html.majj-motion .reveal.slide-left {
  transform: translate3d(-40px, 18px, 0);
}

html.majj-motion .reveal.slide-right {
  transform: translate3d(40px, 18px, 0);
}

html.majj-motion .reveal.scale-in {
  transform: translate3d(0, 28px, 0) scale(0.97);
}

html.majj-motion .reveal.revealed,
html.majj-motion main > section.revealed,
html.majj-motion main > section.revealed:not(.hero):not(.page-hero),
html.majj-motion .footer.revealed {
  opacity: 1;
  transform: none;
}

html.majj-motion .stats-bar__item,
html.majj-motion .expertise-index__item,
html.majj-motion .card,
html.majj-motion .value-card,
html.majj-motion .why-card,
html.majj-motion .reference-card,
html.majj-motion .pub-card,
html.majj-motion .publications__card,
html.majj-motion .sector-item,
html.majj-motion .faq-item,
html.majj-motion .reform-item,
html.majj-motion .timeline__step,
html.majj-motion .approach__step,
html.majj-motion .expert-network__item,
html.majj-motion .clients__item,
html.majj-motion .mission-card,
html.majj-motion .presence__tile,
html.majj-motion .team-cover,
html.majj-motion .team-stage__person,
html.majj-motion .cv-doc,
html.majj-motion .form-group,
html.majj-motion .contact__info,
html.majj-motion .contact__form-wrapper,
html.majj-motion .cabinet-read,
html.majj-motion .footer__col,
html.majj-motion .section-title,
html.majj-motion .section-subtitle,
html.majj-motion .section-label,
html.majj-motion .accent-line {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

html.majj-motion .revealed .stats-bar__item,
html.majj-motion .revealed .expertise-index__item,
html.majj-motion .revealed .card,
html.majj-motion .revealed .value-card,
html.majj-motion .revealed .why-card,
html.majj-motion .revealed .reference-card,
html.majj-motion .revealed .pub-card,
html.majj-motion .revealed .publications__card,
html.majj-motion .revealed .sector-item,
html.majj-motion .revealed .faq-item,
html.majj-motion .revealed .reform-item,
html.majj-motion .revealed .timeline__step,
html.majj-motion .revealed .approach__step,
html.majj-motion .revealed .expert-network__item,
html.majj-motion .revealed .clients__item,
html.majj-motion .revealed .mission-card,
html.majj-motion .revealed .presence__tile,
html.majj-motion .revealed .team-cover,
html.majj-motion .revealed .team-stage__person,
html.majj-motion .revealed .cv-doc,
html.majj-motion .revealed .form-group,
html.majj-motion .revealed .contact__info,
html.majj-motion .revealed .contact__form-wrapper,
html.majj-motion .revealed .cabinet-read,
html.majj-motion .revealed .footer__col,
html.majj-motion .revealed .section-title,
html.majj-motion .revealed .section-subtitle,
html.majj-motion .revealed .section-label,
html.majj-motion .revealed .accent-line,
html.majj-motion .stats-bar__item.revealed,
html.majj-motion .expertise-index__item.revealed,
html.majj-motion .card.revealed,
html.majj-motion .value-card.revealed,
html.majj-motion .why-card.revealed,
html.majj-motion .reference-card.revealed,
html.majj-motion .pub-card.revealed,
html.majj-motion .publications__card.revealed,
html.majj-motion .sector-item.revealed,
html.majj-motion .faq-item.revealed,
html.majj-motion .reform-item.revealed,
html.majj-motion .timeline__step.revealed,
html.majj-motion .mission-card.revealed,
html.majj-motion .footer__col.revealed {
  opacity: 1;
  transform: none;
}

html.majj-motion .revealed .stats-bar__item:nth-child(1),
html.majj-motion .revealed .expertise-index__item:nth-child(1),
html.majj-motion .revealed .card:nth-child(1),
html.majj-motion .revealed .value-card:nth-child(1),
html.majj-motion .revealed .why-card:nth-child(1),
html.majj-motion .revealed .pub-card:nth-child(1),
html.majj-motion .revealed .publications__card:nth-child(1),
html.majj-motion .revealed .faq-item:nth-child(1),
html.majj-motion .revealed .timeline__step:nth-child(1),
html.majj-motion .revealed .mission-card:nth-child(1),
html.majj-motion .revealed .footer__col:nth-child(1),
html.majj-motion .revealed .form-group:nth-child(1) {
  transition-delay: 0.08s;
}

html.majj-motion .revealed .stats-bar__item:nth-child(2),
html.majj-motion .revealed .expertise-index__item:nth-child(2),
html.majj-motion .revealed .card:nth-child(2),
html.majj-motion .revealed .value-card:nth-child(2),
html.majj-motion .revealed .why-card:nth-child(2),
html.majj-motion .revealed .pub-card:nth-child(2),
html.majj-motion .revealed .publications__card:nth-child(2),
html.majj-motion .revealed .faq-item:nth-child(2),
html.majj-motion .revealed .timeline__step:nth-child(2),
html.majj-motion .revealed .mission-card:nth-child(2),
html.majj-motion .revealed .footer__col:nth-child(2),
html.majj-motion .revealed .form-group:nth-child(2) {
  transition-delay: 0.2s;
}

html.majj-motion .revealed .stats-bar__item:nth-child(3),
html.majj-motion .revealed .expertise-index__item:nth-child(3),
html.majj-motion .revealed .card:nth-child(3),
html.majj-motion .revealed .value-card:nth-child(3),
html.majj-motion .revealed .why-card:nth-child(3),
html.majj-motion .revealed .pub-card:nth-child(3),
html.majj-motion .revealed .publications__card:nth-child(3),
html.majj-motion .revealed .faq-item:nth-child(3),
html.majj-motion .revealed .timeline__step:nth-child(3),
html.majj-motion .revealed .mission-card:nth-child(3),
html.majj-motion .revealed .footer__col:nth-child(3),
html.majj-motion .revealed .form-group:nth-child(3) {
  transition-delay: 0.32s;
}

html.majj-motion .revealed .stats-bar__item:nth-child(4),
html.majj-motion .revealed .expertise-index__item:nth-child(4),
html.majj-motion .revealed .card:nth-child(4),
html.majj-motion .revealed .value-card:nth-child(4),
html.majj-motion .revealed .why-card:nth-child(4),
html.majj-motion .revealed .faq-item:nth-child(4),
html.majj-motion .revealed .timeline__step:nth-child(4),
html.majj-motion .revealed .footer__col:nth-child(4),
html.majj-motion .revealed .form-group:nth-child(4) {
  transition-delay: 0.44s;
}

html.majj-motion .revealed .expertise-index__item:nth-child(5),
html.majj-motion .revealed .card:nth-child(5),
html.majj-motion .revealed .value-card:nth-child(5),
html.majj-motion .revealed .faq-item:nth-child(5),
html.majj-motion .revealed .form-group:nth-child(5) {
  transition-delay: 0.56s;
}

html.majj-motion .revealed .expertise-index__item:nth-child(6),
html.majj-motion .revealed .card:nth-child(6),
html.majj-motion .revealed .form-group:nth-child(6) {
  transition-delay: 0.68s;
}

html.majj-motion .revealed .expertise-index__item:nth-child(7) {
  transition-delay: 0.8s;
}

html.majj-motion .revealed .expertise-index__item:nth-child(8) {
  transition-delay: 0.92s;
}

html.majj-motion .hero.loaded .hero__tagline {
  animation: majj-soft-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}

html.majj-motion .hero.loaded .hero__title {
  animation: majj-soft-rise 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

html.majj-motion .hero.loaded .hero__chapo,
html.majj-motion .hero.loaded .hero__description {
  animation: majj-soft-rise 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
}

html.majj-motion .hero.loaded .hero__cta {
  animation: majj-soft-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.64s both;
}

html.majj-motion .page-hero.loaded .breadcrumb {
  animation: majj-soft-rise 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

html.majj-motion .page-hero.loaded h1 {
  animation: majj-soft-rise 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

html.majj-motion .page-hero.loaded p {
  animation: majj-soft-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

html.majj-motion .hero--photo-single .hero__photo,
html.majj-motion .hero__slide.is-active .hero__photo,
html.majj-motion .charte-majj-officiel .hero--photo-single .hero__photo,
html.majj-motion .charte-majj-officiel .hero__slide.is-active .hero__photo,
html.majj-motion .about__decorative-box--photo .about__photo,
html.majj-motion .page-hero--photo .page-hero__media,
html.majj-motion .presence__tile,
html.majj-motion .expert__photo img,
html.majj-motion .team-cover__photo img {
  animation: majj-hero-breathe 22s ease-in-out infinite;
  transform-origin: center;
}

html.majj-motion .presence__tile--2 {
  animation-duration: 26s;
  animation-delay: -6s;
}

html.majj-motion .presence__tile--3 {
  animation-duration: 24s;
  animation-delay: -12s;
}

html.majj-motion .card,
html.majj-motion .value-card,
html.majj-motion .why-card,
html.majj-motion .reference-card,
html.majj-motion .pub-card,
html.majj-motion .publications__card,
html.majj-motion .sector-item,
html.majj-motion .clients__item,
html.majj-motion .faq-item,
html.majj-motion .reform-item,
html.majj-motion .mission-card,
html.majj-motion .expert-network__item,
html.majj-motion .expertise-index__link {
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

html.majj-motion .card:hover,
html.majj-motion .value-card:hover,
html.majj-motion .why-card:hover,
html.majj-motion .reference-card:hover,
html.majj-motion .pub-card:hover,
html.majj-motion .publications__card:hover,
html.majj-motion .sector-item:hover,
html.majj-motion .clients__item:hover,
html.majj-motion .faq-item:hover,
html.majj-motion .reform-item:hover,
html.majj-motion .mission-card:hover,
html.majj-motion .expert-network__item:hover,
html.majj-motion .charte-majj-officiel .card:hover,
html.majj-motion .charte-majj-officiel .value-card:hover,
html.majj-motion .charte-majj-officiel .why-card:hover,
html.majj-motion .charte-majj-officiel .faq-item:hover,
html.majj-motion .charte-majj-officiel .clients__item:hover,
html.majj-motion .charte-majj-officiel .sector-item:hover,
html.majj-motion .charte-majj-officiel .reform-item:hover,
html.majj-motion .charte-majj-officiel .expert-network__item:hover {
  transform: translate3d(0, -8px, 0);
  box-shadow: 0 22px 48px -24px rgba(11, 43, 102, 0.28);
}

html.majj-motion .btn--primary,
html.majj-motion .btn--ghost,
html.majj-motion .btn--outline,
html.majj-motion .btn--secondary,
html.majj-motion .header__cta {
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

html.majj-motion .btn--primary:hover,
html.majj-motion .btn--ghost:hover,
html.majj-motion .btn--outline:hover,
html.majj-motion .btn--secondary:hover,
html.majj-motion .header__cta:hover,
html.majj-motion .charte-majj-officiel .btn--primary:hover,
html.majj-motion .charte-majj-officiel .btn--outline:hover,
html.majj-motion .charte-majj-officiel .btn--secondary:hover {
  transform: translate3d(0, -4px, 0);
}

html.majj-motion .pub-card__cover img,
html.majj-motion .mission-card__media,
html.majj-motion .reference-card img,
html.majj-motion .gallery-swiper__link img {
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

html.majj-motion .pub-card:hover .pub-card__cover img,
html.majj-motion .mission-card:hover .mission-card__media,
html.majj-motion .gallery-swiper__link:hover img {
  transform: scale(1.06);
}

html.majj-motion .expertise-index__link:hover {
  transform: translate3d(10px, 0, 0);
}

html.majj-motion .whatsapp-float,
html.majj-motion .back-to-top.is-visible {
  animation: majj-float-soft 7.5s ease-in-out infinite !important;
}

html.majj-motion .accent-line.reveal-animate.revealed,
html.majj-motion .revealed .accent-line {
  width: 72px;
  transition: width 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.no-js .reveal,
.no-js main > section,
.no-js .footer,
.no-js .stats-bar__item,
.no-js .expertise-index__item,
.no-js .card,
.no-js .value-card,
.no-js .why-card,
.no-js .pub-card,
.no-js .section-title,
.no-js .section-subtitle {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.majj-motion .reveal,
  html.majj-motion main > section,
  html.majj-motion .footer,
  html.majj-motion .stats-bar__item,
  html.majj-motion .expertise-index__item,
  html.majj-motion .card,
  html.majj-motion .value-card,
  html.majj-motion .hero.loaded .hero__tagline,
  html.majj-motion .hero.loaded .hero__title,
  html.majj-motion .hero.loaded .hero__chapo,
  html.majj-motion .hero.loaded .hero__cta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}