/* ==========================================================================
   MAN PROPERTIES GROUP : Socle
   Tokens, reset, typographie, primitives de mise en page, moteur de motion.
   Palette et typographie issues de la charte graphique MPG.
   ========================================================================== */

:root {
  /* --- Marque (charte) ------------------------------------------------- */
  --mpg-blue:  #004A77;
  --mpg-green: #5BC556;
  --mpg-ink:   #0B0B0B;

  /* --- Bleu : profondeur institutionnelle ------------------------------ */
  --blue-950: #021320;
  --blue-900: #052435;
  --blue-800: #003052;
  --blue-700: #004A77;
  --blue-600: #0A6096;
  --blue-400: #4E93BC;
  --blue-200: #B7D3E4;
  --blue-100: #DCEAF3;

  /* --- Vert : la signature ---------------------------------------------- */
  --green-800: #1E6B1B;
  --green-700: #2F8A2B;
  --green-600: #45A840;
  --green-500: #5BC556;
  --green-300: #A6E0A2;
  --green-100: #E4F6E2;
  --green-50:  #F1FAF0;

  /* --- Neutres chauds : l'élégance sans ostentation -------------------- */
  --bone-50:  #FCFBF7;
  --bone-100: #F6F3EC;
  --bone-200: #EDE8DE;
  --sand-300: #DED6C7;
  --stone-400: #B5AC9C;
  --stone-500: #8A8274;
  --stone-600: #6A6357;
  --ink-900:  #12120F;
  --ink-800:  #1E1E1B;
  --ink-700:  #38372F;
  --ink-600:  #57554C;

  /* --- Rôles sémantiques ----------------------------------------------- */
  --bg:          var(--bone-100);
  --bg-raised:   var(--bone-50);
  --bg-sunk:     var(--bone-200);
  --bg-invert:   var(--blue-900);
  --text:        var(--ink-800);
  --text-muted:  var(--ink-600);
  --text-invert: var(--bone-50);
  --rule:        color-mix(in srgb, var(--stone-400) 42%, transparent);
  --rule-invert: color-mix(in srgb, var(--blue-200) 20%, transparent);
  --accent:      var(--mpg-green);
  --on-accent:   var(--blue-950);
  /* Voile de lisibilite pose sur les photographies. En composantes brutes,
     pour que rgb(var(--voile) / alpha) reste valide. Il etait utilise a
     trois endroits sans avoir jamais ete defini sur cette branche : les
     degrades tombaient donc en syntaxe invalide et le texte clair restait
     seul sur l'image. */
  --voile: 2 19 32;
  /* Le vert de la charte sur un fond clair plafonne a 2,1 : trop faible
     pour du petit texte. Ce jeton porte la version lisible, et bascule sur
     le vert de marque partout ou le fond est sombre. */
  --accent-lisible: var(--green-800);

  /* --- Typographie ------------------------------------------------------ */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle fluide : 390px → 1440px */
  --step--2: clamp(0.694rem, 0.68rem + 0.06vw, 0.729rem);
  --step--1: clamp(0.833rem, 0.80rem + 0.14vw, 0.912rem);
  --step-0:  clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.11rem + 0.38vw, 1.424rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.61vw, 1.802rem);
  --step-3:  clamp(1.728rem, 1.51rem + 0.93vw, 2.281rem);
  --step-4:  clamp(2.074rem, 1.75rem + 1.38vw, 2.887rem);
  --step-5:  clamp(2.488rem, 2.02rem + 2.00vw, 3.653rem);
  --step-6:  clamp(2.986rem, 2.33rem + 2.83vw, 4.624rem);
  --step-7:  clamp(3.583rem, 2.67rem + 3.94vw, 5.852rem);
  /* Plancher abaisse : a 375px le mot le plus long du titre d'accueil
     debordait de 44px. La borne haute est atteinte des 1200px, donc
     le rendu sur grand ecran ne change pas. */
  --step-8:  clamp(3.55rem, 1.87rem + 7.39vw, 7.41rem);

  /* --- Rythme ----------------------------------------------------------- */
  --gutter: clamp(1.15rem, 0.8rem + 1.6vw, 2.25rem);
  --section-y: clamp(3.9rem, 2.6rem + 4.3vw, 6.9rem);
  --measure: 62ch;
  --shell: 1340px;
  --shell-narrow: 880px;

  /* --- Formes ------------------------------------------------------------ */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius:    20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 18, 15, .04), 0 4px 14px -6px rgba(18, 18, 15, .07);
  --shadow: 0 2px 4px rgba(18, 18, 15, .03), 0 18px 44px -22px rgba(18, 18, 15, .18);
  --shadow-lg: 0 4px 8px rgba(18, 18, 15, .04), 0 40px 90px -40px rgba(18, 18, 15, .30);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 240ms;
  --dur: 620ms;
  --dur-slow: 1100ms;

  --header-h: 76px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--mpg-green);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--mpg-green); color: var(--blue-950); }

/* ==========================================================================
   Typographie
   ========================================================================== */

.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.022em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 110;
  text-wrap: balance;
}

h1 { font-size: var(--step-7); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); line-height: 1.14; }

h4 {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 620;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.t-hero { font-size: var(--step-8); line-height: 0.95; letter-spacing: -0.034em; }
.t-xl   { font-size: var(--step-6); }
.t-lg   { font-size: var(--step-4); }
.t-md   { font-size: var(--step-2); line-height: 1.2; }

.t-italic {
  font-style: italic;
  font-variation-settings: 'SOFT' 14, 'WONK' 1, 'opsz' 110;
}

/* Titre en capitales serif : le registre « maison » (réf. Pigma) */
.t-caps {
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-weight: 400;
  line-height: 0.98;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 48ch;
  font-weight: 350;
  text-wrap: pretty;
}

p { max-width: var(--measure); text-wrap: pretty; }

/* Étiquette : la petite capitale espacée, marqueur MPG */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--mpg-green);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--bare::before { display: none; }

.signature {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* Les compteurs de la barre du hero. Ils etaient en serif de titrage alors
   que « 1 seule exigence », sur la meme ligne, restait en Noto Sans : trois
   chiffres, deux polices. Tout passe au sans. Les chiffres tabulaires sont
   gardes, sans eux le decompte fait sautiller la ligne pendant l'animation. */
.num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}

.muted { color: var(--text-muted); }
.accent { color: var(--mpg-green); }
.ink { color: var(--text); }

/* ==========================================================================
   Primitives de mise en page
   ========================================================================== */

.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
  position: relative;
}
.shell--narrow { max-width: var(--shell-narrow); }
.shell--wide { width: min(100% - var(--gutter) * 2, 1560px); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.58); }
.section--flush-t { padding-top: 0; }
.section--flush-b { padding-bottom: 0; }

.grid { display: grid; gap: var(--gutter); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.flow > * + * { margin-top: var(--flow, 1.15rem); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.stack-h { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.stack-v { display: flex; flex-direction: column; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

/* En-tête de section : titre à gauche, contrepoint à droite */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: end;
  margin-bottom: clamp(2.5rem, 4vw, 4.5rem);
}
.section-head p { max-width: 42ch; }

/* Sections en fond profond */
/* Surfaces sombres.
   Tout conteneur qui peint un fond sombre doit aussi basculer ses jetons,
   sinon ce qu'il porte continue de calculer ses couleurs pour le theme
   clair. Le pied de page et les en-tetes de page peignaient bien leur fond
   mais gardaient les jetons clairs : « la lettre des Domaines » et les
   surtitres tombaient a 2,5 de rapport. Les trois partagent desormais le
   meme jeu, et un fond sombre ajoute plus tard n'a qu'a rejoindre la liste. */
.invert,
.footer,
.page-head {
  --accent-lisible: var(--mpg-green);
  --text: var(--text-invert);
  --text-muted: color-mix(in srgb, var(--bone-100) 66%, transparent);
  --rule: var(--rule-invert);
  --bg: var(--blue-900);
  --bg-raised: color-mix(in srgb, var(--bone-50) 6%, transparent);
  --bg-sunk: color-mix(in srgb, var(--blue-950) 55%, transparent);
}

.invert {
  background: var(--bg-invert);
  color: var(--text-invert);
}

/* ==========================================================================
   Motif de marque : les arcs concentriques de la charte
   ========================================================================== */

.arcs {
  position: absolute;
  pointer-events: none;
  color: var(--rule);
  z-index: 0;
}
.arcs svg { width: 100%; height: auto; overflow: visible; }
.arcs circle { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Les traits parallèles du monogramme, en filet de section */
.tramline {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: clamp(48px, 6vw, 84px);
  flex: none;
}
.tramline i {
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.28;
  display: block;
}
.tramline i:first-child { opacity: 1; background: var(--mpg-green); }

/* ==========================================================================
   Moteur de motion
   Base : IntersectionObserver (partout).
   Bonus : animations pilotées par le scroll natif là où c'est supporté.
   Aucun détournement du scroll : la molette reste celle du navigateur.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 26px), 0);
  transition:
    opacity var(--dur) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur) var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Mot à mot : pour les titres */
.words { display: inline; }
.words .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: 0.12em;
  margin-block: -0.12em;
}
.words .w > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 950ms var(--ease-out) var(--d, 0ms);
  will-change: transform;
}
.is-in .words .w > span,
.words.is-in .w > span { transform: none; }

/* Média : ouverture du cadre + dézoom lent */
.reveal-media { overflow: hidden; position: relative; }
.reveal-media > img,
.reveal-media > video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.18);
  transition: transform 1600ms var(--ease-out);
  will-change: transform;
}
.reveal-media.is-in > img,
.reveal-media.is-in > video { transform: scale(1); }

.js .reveal-media::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--bg);
  transform-origin: bottom;
  transition: transform 1250ms var(--ease-out) var(--reveal-delay, 0ms);
  z-index: 2;
}
.js .reveal-media.is-in::after { transform: scaleY(0); }

/* Tracé de trait : la « signature » qui s'écrit */
.draw path, .draw line, .draw circle, .draw rect, .draw polyline {
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: var(--len, 1400);
  transition: stroke-dashoffset 1900ms var(--ease-out) var(--reveal-delay, 0ms);
}
.draw.is-in path, .draw.is-in line, .draw.is-in circle,
.draw.is-in rect, .draw.is-in polyline { stroke-dashoffset: 0; }

/* Parallaxe et fondus pilotés par le scroll natif */
@supports (animation-timeline: view()) {
  .parallax > img,
  .parallax > video {
    animation: parallax-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes parallax-drift {
    from { transform: translate3d(0, -7%, 0) scale(1.16); }
    to   { transform: translate3d(0,  7%, 0) scale(1.16); }
  }

  .scroll-grow {
    animation: scroll-grow linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
    transform-origin: left;
  }
  @keyframes scroll-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .words .w > span { transform: none !important; }
  .reveal-media > img, .reveal-media > video { transform: none !important; }
  .reveal-media::after { display: none; }
  .draw path, .draw line, .draw circle, .draw rect, .draw polyline { stroke-dashoffset: 0 !important; }
}

/* ==========================================================================
   Utilitaires
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -130%);
  z-index: 300;
  background: var(--blue-900); color: var(--bone-50);
  padding: 0.85rem 1.5rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: var(--step--1);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.no-scroll { overflow: hidden; }

@media (max-width: 1000px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grid-12 { grid-template-columns: repeat(6, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid-12 { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
}