/* ==========================================================================
   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) ---------------------------------------------------
     Le bleu, le vert et le noir de la charte. Le site parle en encre bleu
     nuit sur papier blanc, comme un acte : le bleu de la charte sert aux
     actions, le vert ne sert plus qu'aux petites mentions et aux parcelles
     libres. En grands aplats, il donnait un air de jeu d'enfant. */
  --mpg-blue:  #004A77;
  --mpg-green: #5BC556;
  --mpg-ink:   #0B0B0B;
  /* L'encre : le bleu de la charte pousse vers la nuit. Tout le texte. */
  --encre:     #0E2130;

  /* --- Bleu : l'aplat de la charte, et ses deux voisins ---------------- */
  /* Les deux bleus les plus sombres rejoignent l'encre : partout ou la
     feuille peignait un marine, elle peint maintenant l'encre du texte. */
  --blue-950: #0E2130;
  --blue-900: #16304A;
  --blue-800: #003D63;
  --blue-700: #004A77;
  --blue-600: #0A6096;
  --blue-400: #4E93BC;
  --blue-200: #B7D3E4;
  --blue-100: #E3EEF5;

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

  /* --- Neutres : froids, tires du bleu de la charte ----------------------
     Les anciens noms sont gardes (bone, sand, stone, ink) : quatre-vingt-dix
     regles les lisent, et ce sont les valeurs qui changent, pas le sens. */
  --bone-50:  #FFFFFF;
  --bone-100: #F5F7F8;
  --bone-200: #ECEFF1;
  --sand-300: #D9DFE3;
  --stone-400: #9AA7B0;
  --stone-500: #6A7D8B;
  --stone-600: #52606B;
  --ink-900:  #0A1824;
  --ink-800:  #0E2130;
  --ink-700:  #273A48;
  --ink-600:  #465A69;

  /* --- Rôles sémantiques ----------------------------------------------- */
  --bg:          #FFFFFF;
  --bg-raised:   #FFFFFF;
  --bg-sunk:     var(--bone-100);
  --bg-invert:   var(--encre);
  --text:        var(--ink-800);
  --text-muted:  var(--ink-600);
  --text-invert: #FFFFFF;
  --rule:        var(--sand-300);
  --rule-invert: rgba(255, 255, 255, .22);
  --accent:      var(--mpg-blue);
  --on-accent:   #FFFFFF;
  /* Voile de lisibilite pose sur les photographies. En composantes brutes,
     pour que rgb(var(--voile) / alpha) reste valide. */
  --voile: 14 33 48;
  /* 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 ------------------------------------------------------
     Noto Sans, la police de la charte, pour tout ce qui se lit. Et sa
     cousine a empattements, Noto Serif Display, pour les titres et les
     grands chiffres seulement : le registre d'un acte, pas celui d'une
     affiche. */
  --font-display: 'Noto Serif Display', '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.75rem, 0.73rem + 0.08vw, 0.8rem);
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.16vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.3vw, 1.35rem);
  --step-2:  clamp(1.33rem, 1.22rem + 0.48vw, 1.65rem);
  --step-3:  clamp(1.55rem, 1.37rem + 0.74vw, 2.05rem);
  --step-4:  clamp(1.8rem, 1.52rem + 1.15vw, 2.6rem);
  --step-5:  clamp(2.1rem, 1.7rem + 1.7vw, 3.3rem);
  --step-6:  clamp(2.45rem, 1.86rem + 2.45vw, 4.2rem);
  --step-7:  clamp(2.8rem, 2rem + 3.3vw, 5.2rem);
  --step-8:  clamp(3rem, 1.95rem + 4.4vw, 6.1rem);

  /* --- Rythme ----------------------------------------------------------- */
  --gutter: clamp(1rem, 0.7rem + 1.4vw, 2rem);
  --section-y: clamp(3.5rem, 2.4rem + 4.2vw, 6.5rem);
  --measure: 64ch;
  --shell: 1280px;
  --shell-narrow: 860px;

  /* --- Formes ------------------------------------------------------------
     La charte ne connait que l'angle droit : les carres du logo, les aplats
     pleins. Les rayons de 20 a 40 px et les boutons en gelule etaient la
     signature des gabarits, pas celle de la maison. */
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 3px;
  --radius-xl: 4px;
  --pill: 2px;

  --shadow-sm: none;
  --shadow: none;
  /* Reservee a ce qui flotte au-dessus de la page : palette, menus. */
  --shadow-lg: 0 18px 50px -18px rgba(11, 15, 18, .28), 0 2px 6px rgba(11, 15, 18, .08);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 600ms;

  --header-h: 72px;
}

/* ==========================================================================
   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.6;
  font-weight: 400;
  -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-blue);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: #D6E9D4; color: var(--encre); }

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

.display,
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--step-7); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: var(--step-5); }
/* Les petits titres restent en Noto Sans : a cette taille, les deliés
   d'une serif de titrage deviennent des fils. */
h3 {
  font-family: var(--font-sans);
  font-size: var(--step-1);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  text-wrap: balance;
}

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

.t-hero { font-size: var(--step-8); line-height: 0.98; letter-spacing: -0.035em; }
.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; }

/* L'italique d'appoint n'existe pas dans la charte : il reste droit. */
.t-italic { font-style: normal; }

/* Les capitales de titrage n'ont plus cours : le titre se lit en
   minuscules, comme une phrase. */
.t-caps { text-transform: none; }

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

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

/* Mention : la petite capitale espacee, en vert sombre. Elle dit la
   rubrique, rien de plus, et ne se pose pas sur chaque section. */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-lisible);
  margin: 0 0 1rem;
}
.eyebrow::before { content: none; }
.eyebrow--center { justify-content: center; }
.eyebrow--bare::before { display: none; }

/* Le trait vert devant les titres, essaye puis retire : il criait. Le
   nom de classe reste dans le balisage, sans effet. */
.titre-barre { position: relative; }

.signature {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.num {
  font-family: var(--font-sans);
  font-weight: 700;
  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 {
  --accent-lisible: var(--mpg-green);
  --text: #FFFFFF;
  --text-muted: rgba(255, 255, 255, .76);
  --rule: var(--rule-invert);
  --bg: var(--encre);
  --bg-raised: rgba(255, 255, 255, .07);
  --bg-sunk: rgba(0, 0, 0, .14);
}

.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],
.js [data-split] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 10px), 0);
  transition:
    opacity var(--dur) var(--ease-out) calc(var(--reveal-delay, 0ms) * .5),
    transform var(--dur) var(--ease-out) calc(var(--reveal-delay, 0ms) * .5);
}
.js [data-reveal].is-in,
.js [data-split].is-in { opacity: 1; transform: none; }

/* Mot a mot : le decoupage reste pose par le script, mais les mots ne
   glissent plus un a un. Ce titre qui se deroule mot par mot etait devenu
   la signature des sites faits a la chaine ; le titre apparait d'un bloc. */
.words { display: inline; }
.words .w { display: inline; }
.words .w > span { display: inline; }

/* Media : l'image est la, simplement. Plus de rideau qui se leve ni de
   dezoom lent : sur un reseau lent, ils retardaient une image deja longue
   a venir. */
.reveal-media { overflow: hidden; position: relative; }
.reveal-media > img,
.reveal-media > video { width: 100%; height: 100%; object-fit: cover; }

/* 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 1400ms 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; }

@supports (animation-timeline: view()) {
  .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], [data-split] { opacity: 1 !important; transform: none !important; }
  .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(--mpg-ink); color: #fff;
  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; }
}