/* ==========================================================================
   TalbotGolf — « Le relevé »
   Un cabinet de conception lu comme une planche de géomètre : chaux, sable,
   olive, vert profond et terre cuite ; filets précis, courbes de niveau,
   cotes et cartouches ; les photographies comme des fenêtres sur le terrain.

   0. Polices · 1. Variables · 2. Base · 3. Textures · 4. Éléments communs
   5. En-tête · 6. Héros · 7. Le métier · 8. Réalisations · 9. Portrait
   10. Carrière · 11. Chiffres · 12. Contact · 13. Pied de page
   14. Pages légales · 15. Mouvement · 16. Responsive · 17. Impression

   Tout effet lié au défilement dépend de la classe « moteur », posée par
   main.js seulement si le visiteur n'a pas demandé de réduire les animations.
   Sans elle — sans JavaScript, en mouvement réduit — la page est complète et fixe.
   ========================================================================== */

/* ============================== 0. POLICES ==============================
   Instrument Serif (titres) et Instrument Sans (texte), licence SIL OFL,
   hébergées sur le site : aucune requête vers un service tiers.            */
@font-face{ font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("public/fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("public/fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("public/fonts/instrument-serif-italique-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("public/fonts/instrument-serif-italique-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url("public/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url("public/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ============================== 1. VARIABLES ============================== */
:root{
  /* Matières. Contrastes vérifiés : terre, olive, eau et encre secondaire
     dépassent 4,5:1 sur chaux comme sur sable ; terre claire 5,7:1 sur vert. */
  --chaux:        #F2ECE0;   /* blanc cassé, enduit à la chaux */
  --chaux-vive:   #F8F4EC;
  --sable:        #E4D8C0;
  --olive:        #5C6141;
  --olive-clair:  #B4B58A;
  --vert:         #16352A;   /* vert profond */
  --vert-2:       #1E4134;
  --terre:        #9A4426;   /* terre cuite, accent */
  --terre-clair:  #E09A72;   /* terre cuite sur fond vert */
  --eau:          #3B6762;
  --encre:        #18271F;
  --encre-2:      #4A564C;
  --chaux-70:     #C9CBBE;
  --filet:        rgba(24, 39, 31, .16);
  --filet-fort:   rgba(24, 39, 31, .42);
  --filet-clair:  rgba(242, 236, 224, .2);
  --bord-champ:   #8A8370;   /* 3,2:1 sur chaux */

  /* Typographie */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --t-corps: clamp(16px, .28vw + 15px, 18px);
  --t-h2:    clamp(52px, 7.4vw, 128px);
  --t-h3:    clamp(42px, 4.6vw, 80px);

  /* Trame */
  --largeur-max: 1680px;
  --marge:       clamp(20px, 5vw, 96px);
  --gouttiere:   clamp(16px, 2vw, 32px);
  --section-y:   clamp(96px, 12vw, 200px);
  --entete:      76px;

  /* Mouvement */
  --e-sortie: cubic-bezier(.16, 1, .3, 1);
  --e-douce:  cubic-bezier(.65, 0, .35, 1);
}

/* ============================== 2. BASE ============================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--chaux);
  color: var(--encre);
  font: 400 var(--t-corps)/1.65 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg{ display: block; max-width: 100%; }
img{ height: auto; }
h1, h2, h3{ margin: 0; font-family: var(--serif); font-weight: 400; line-height: .95; letter-spacing: -.012em; }
p{ margin: 0 0 1.2em; }
p:last-child{ margin-bottom: 0; }
a{ color: inherit; text-decoration: none; }
strong{ font-weight: 600; }
button, input, textarea{ font: inherit; color: inherit; }
[id]{ scroll-margin-top: calc(var(--entete) + 12px); }

:focus-visible{ outline: 2px solid var(--terre); outline-offset: 4px; }
.portrait :focus-visible, .chiffres :focus-visible, .pied :focus-visible{ outline-color: var(--terre-clair); }

.lien-evitement{
  position: fixed; left: 16px; top: 12px; z-index: 300;
  padding: 12px 20px; background: var(--vert); color: var(--chaux);
  font-weight: 600; transform: translateY(-180%);
}
.lien-evitement:focus{ transform: none; }

.grille{
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere);
  width: 100%; max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--marge);
}
.grille > *{ min-width: 0; }

/* ============================== 3. TEXTURES ==============================
   Un grain minéral fixe, très léger, et des strates de pisé sur les fonds sable. */
body::after{
  content: ""; position: fixed; inset: 0; z-index: 250; pointer-events: none;
  opacity: .07; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
.realisations{
  background-color: var(--sable);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 41px, rgba(110, 82, 48, .07) 41px 42px, transparent 42px 67px, rgba(110, 82, 48, .045) 67px 69px, transparent 69px 97px),
    repeating-linear-gradient(180deg, transparent 0 23px, rgba(255, 250, 240, .22) 23px 24px, transparent 24px 59px);
}

/* Courbes de niveau : un SVG externe, tracé au défilement. */
.releve{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.releve use{ fill: none; stroke: #8C6A4A; stroke-dasharray: 1; stroke-dashoffset: 0; }
.releve__maitresses{ stroke-width: 1.2px; }
.releve__intermediaires{ stroke-width: .7px; }

/* ============================== 4. ÉLÉMENTS COMMUNS ============================== */
.surtitre, .tours__titre, .chiffres__titre, .fiche dt, .coordonnees dt, .champ label{
  font-family: var(--sans); font-size: 12px; font-weight: 600; font-stretch: 78%;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.5;
}
.surtitre{ display: flex; align-items: center; gap: 14px; margin: 0 0 28px; color: var(--terre); }
/* Un repère de géomètre : un trait et une graduation. */
.surtitre::before{
  content: ""; flex: 0 0 44px; height: 9px;
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat,
              linear-gradient(currentColor, currentColor) 100% 0 / 1px 100% no-repeat;
}
.titre-h2{ font-size: var(--t-h2); line-height: .9; letter-spacing: -.02em; text-wrap: balance; }
.ligne{ display: block; }
.ligne--italique{ font-style: italic; color: var(--terre); }
.legende{
  margin: 14px 0 0; max-width: 52ch; padding-left: 28px; position: relative;
  font-size: 13px; line-height: 1.5; color: var(--encre-2);
}
.legende::before{ content: ""; position: absolute; left: 0; top: .75em; width: 18px; height: 1px; background: currentColor; opacity: .6; }

/* Mots-clés économiques et hydrauliques : un trait de cote sous le texte. */
.cle{
  background-image: linear-gradient(var(--terre), var(--terre));
  background-size: 100% 1.5px; background-position: 0 92%; background-repeat: no-repeat;
  padding-bottom: .04em;
}
.cle--eau{ background-image: linear-gradient(var(--eau), var(--eau)); color: var(--eau); }

/* Liens : le soulignement se trace de gauche à droite. */
.lien-trace{ position: relative; display: inline-block; }
.lien-trace::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 450ms var(--e-sortie);
}
.lien-trace:hover::after, .lien-trace:focus-visible::after, .lien-trace[aria-current]::after{ transform: scaleX(1); transform-origin: left; }
.lien-trace--fort{
  font-size: 13px; font-weight: 600; font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase;
  padding-block: 8px;
}
.lien-trace--fort::after{ transform: scaleX(.35); transform-origin: left; background: var(--terre-clair); bottom: 4px; }

/* Bouton : un aplat vert, une terre cuite qui le traverse au survol, une flèche cotée. */
.bouton{
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 22px;
  min-height: 56px; padding: 16px 26px 16px 28px;
  border: 0; border-radius: 0; background: var(--vert); color: var(--chaux);
  font: 600 14px/1.2 var(--sans); letter-spacing: .04em; cursor: pointer;
}
.bouton::before{
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--terre);
  transform: scaleX(0); transform-origin: right; transition: transform 600ms var(--e-sortie);
}
.bouton::after{
  content: ""; width: 28px; height: 9px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) 0 50% / calc(100% - 1px) 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1px 100% no-repeat;
  transition: width 500ms var(--e-sortie);
}
.bouton:hover::before, .bouton:focus-visible::before{ transform: scaleX(1); transform-origin: left; }
.bouton:hover::after, .bouton:focus-visible::after{ width: 40px; }
.bouton:active{ transform: translateY(1px); }

.figure, .bande{ margin: 0; }
.cadre{ position: relative; overflow: hidden; background: var(--sable); }
.figure img, .bande img{ width: 100%; filter: saturate(.9) sepia(.04) contrast(1.02); }
.figure--bichromie .cadre{ background: var(--vert); isolation: isolate; }
.figure--bichromie img{ filter: grayscale(1) contrast(1.1) brightness(1.05); mix-blend-mode: screen; opacity: .92; }
.figure--bichromie .cadre::after{ content: ""; position: absolute; inset: 0; background: #E8DCC2; mix-blend-mode: multiply; pointer-events: none; }

/* ============================== 5. EN-TÊTE ============================== */
.entete{
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: rgba(242, 236, 224, .95);
  border-bottom: 1px solid var(--filet);
}
.entete__barre{
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  max-width: var(--largeur-max); height: var(--entete); margin-inline: auto; padding-inline: var(--marge);
}
.entete__logo{ position: relative; display: block; flex: 0 0 auto; width: 172px; padding-block: 8px; }
.entete__logo img{ width: 100%; }
.nav__liste{ display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); margin: 0; padding: 0; list-style: none; }
.nav__liste a{
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
}
.nav__liste a::after{ bottom: 10px; }
/* La section en cours de lecture : un carré de terre cuite devant le lien. */
.nav__liste a::before{
  content: ""; width: 5px; height: 5px; background: var(--terre);
  transform: scale(0) rotate(45deg); transition: transform 400ms var(--e-sortie);
}
.nav__liste a[aria-current]::before{ transform: scale(1) rotate(45deg); }
.nav__liste li:last-child a{ padding-inline: 18px; border: 1px solid var(--filet-fort); transition: background 300ms ease, color 300ms ease; }
.nav__liste li:last-child a::after{ display: none; }
.nav__liste li:last-child a:hover, .nav__liste li:last-child a:focus-visible{ background: var(--vert); color: var(--chaux); }
.entete__bouton{
  display: none; align-items: center; gap: 12px; min-height: 48px; padding: 8px 4px;
  border: 0; background: none; cursor: pointer;
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
}
.entete__bouton-trait{ position: relative; width: 26px; height: 9px; border-block: 1.5px solid currentColor; transition: transform 400ms var(--e-sortie), height 400ms var(--e-sortie); }
.menu-ouvert .entete__bouton-trait{ height: 1.5px; border-bottom-width: 0; transform: rotate(-12deg); }
/* Fil de lecture : la progression dans la page, tracée sous l'en-tête. */
.entete__lecture{
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--terre); transform: scaleX(var(--lecture, 0)); transform-origin: left;
}

/* ============================== 6. HÉROS ==============================
   Au repos : le titre à gauche, la fenêtre photographique à droite, cotée
   comme sur un plan. Au défilement (grand écran) : la fenêtre s'ouvre jusqu'au
   plein cadre et recouvre le texte, qui s'est effacé en remontant.          */
.heros{
  --k: calc(1 - var(--ouverture, 0));
  --haut: calc(var(--entete) + 7svh);
  --bas: 8svh;
  --gauche: 55%;
  position: relative; isolation: isolate;
  min-height: 100svh;
  background: var(--chaux);
}
.heros__scene{ position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; }
.heros .releve{ z-index: 0; opacity: .45; }
.heros .releve use{ stroke: #A88C6C; }
.heros__contenu{
  position: absolute; inset: 0 0 auto; z-index: 1;
  height: 100svh; min-height: 620px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere);
  align-content: center;
  max-width: var(--largeur-max); margin-inline: auto; padding: var(--haut) var(--marge) var(--bas);
  transform: translate3d(0, calc(var(--ouverture, 0) * -22svh), 0);
  opacity: clamp(0, calc(1 - var(--ouverture, 0) * 2.4), 1);
}
.heros__surtitre{ grid-column: 1 / 7; }
.heros__titre{
  grid-column: 1 / 8;
  font-size: min(7.9vw, 14.5svh, 120px);
  line-height: .86; letter-spacing: -.025em;
  margin: 0 0 clamp(28px, 5svh, 56px);
}
.heros__titre .ligne--italique{ padding-left: .62em; }
.heros__titre .ligne{ white-space: nowrap; }   /* chaque ligne reste entière : la taille est bornée pour tenir */
.heros__details{ grid-column: 1 / 6; }
.heros__accroche{ max-width: 40ch; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.6; color: var(--encre-2); margin-bottom: 30px; }
.heros__action{ margin: 0; }

.heros__fenetre{
  position: absolute; inset: 0; z-index: 2; margin: 0;
  clip-path: inset(calc(var(--k) * var(--haut)) calc(var(--k) * var(--marge)) calc(var(--k) * var(--bas)) calc(var(--k) * var(--gauche)));
}
.heros__media{ position: absolute; inset: 0; overflow: hidden; background: var(--vert); }
.heros__media img{
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%;
  filter: saturate(.92) sepia(.05);
  transform: scale(calc(1 + var(--k) * .12));
  transform-origin: 70% 60%;
}
.heros__legende{
  position: absolute; z-index: 1;
  right: calc(var(--k) * var(--marge) + 20px); bottom: calc(var(--k) * var(--bas) + 18px);
  margin: 0; padding: 6px 10px;
  background: rgba(22, 53, 42, .8); color: var(--chaux);
  font-size: 12px; letter-spacing: .04em;
}
/* Cotes du plan autour de la fenêtre : elles s'effacent quand le paysage s'ouvre. */
.heros__scene::before, .heros__scene::after{
  content: ""; position: absolute; z-index: 3; pointer-events: none; color: var(--encre-2);
  opacity: clamp(0, calc(1 - var(--ouverture, 0) * 4), 1);
}
.heros__scene::before{
  top: calc(var(--haut) - 22px); left: var(--gauche); right: var(--marge); height: 9px;
  border-inline: 1px solid currentColor;
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat;
}
.heros__scene::after{
  top: var(--haut); bottom: var(--bas); left: calc(var(--gauche) - 22px); width: 9px;
  border-block: 1px solid currentColor;
  background: linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat;
}

/* ============================== 7. LE MÉTIER ============================== */
.metier{ position: relative; z-index: 1; background: var(--chaux); padding-top: var(--section-y); border-top: 1px solid var(--filet); }
.metier > .releve{ height: min(1100px, 120vh); opacity: .5; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.metier__intro{
  grid-column: 1 / -1; position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere);
  align-items: end; padding-bottom: clamp(72px, 9vw, 150px);
}
.metier__intro .surtitre{ grid-column: 1 / -1; }
.metier__intro .titre-h2{ grid-column: 1 / 9; }
.metier__chapo{ grid-column: 9 / 13; margin: 0; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.6; color: var(--encre-2); }

.metier__etapes{ position: relative; max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--marge); }
/* Le rail : quatre jalons, la progression dans les quatre temps (grand écran, avec le moteur). */
.metier__trace{ display: none; }
.temps{
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere);
  align-items: center;
  padding-block: clamp(56px, 8vw, 120px);
  border-top: 1px solid var(--filet);
}
.temps > *{ min-width: 0; }
.temps__figure{ align-self: start; }
.temps__figure img{ width: 100%; }
.temps__texte{ position: relative; }
.temps__numero{
  margin: 0 0 18px;
  font: 400 clamp(64px, 7vw, 120px)/.8 var(--serif); color: var(--terre); letter-spacing: -.03em;
}
.temps__titre{ display: flex; flex-direction: column; align-items: flex-start; font-size: var(--t-h3); margin: 0 0 26px; }
.temps__tiret{ width: 64px; height: 1px; margin: 22px 0 16px; background: var(--filet-fort); }
.temps__titre em{ font-size: .44em; line-height: 1.2; color: var(--olive); letter-spacing: -.005em; }
.temps__texte > p:not(.temps__numero){ max-width: 46ch; color: var(--encre-2); }
/* Budget, faisabilité, coût d'entretien : la phrase-clé devient une annotation de plan. */
.temps__enjeu{
  display: block; position: relative;
  margin: 26px 0 0; padding: 20px 0 0 22px;
  font: 400 clamp(24px, 2.05vw, 34px)/1.18 var(--serif); letter-spacing: -.005em;
  color: var(--encre);
  border-left: 2px solid var(--terre);
}
.temps__enjeu::before{ content: ""; position: absolute; left: -2px; top: 0; width: 28px; height: 2px; background: var(--terre); }
.temps--exploitation .temps__enjeu{ margin: 0 0 26px; padding: 0 0 0 22px; font-size: clamp(28px, 2.6vw, 44px); }
.temps--exploitation .temps__enjeu::before{ display: none; }

.temps--conseil .temps__figure{ grid-column: 1 / 9; }
.temps--conseil .temps__texte{ grid-column: 9 / 13; }
.temps--conception .temps__texte{ grid-column: 1 / 6; }
.temps--conception .temps__figure{ grid-column: 6 / 13; }
.temps--realisation .temps__figure{ grid-column: 1 / 8; }
.temps--realisation .temps__texte{ grid-column: 8 / 13; }
.temps--exploitation .temps__texte{ grid-column: 1 / 5; }
.temps--exploitation .temps__figure{ grid-column: 5 / 13; }

/* Trame d'étude posée sur le plan : trois horizontales, trois verticales, un axe de jeu. */
.trame{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.trame path{ fill: none; stroke: #F2ECE0; stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 0; }
.trame .trame__axe{ stroke: var(--terre-clair); stroke-width: 2px; opacity: .95; }

/* ============================== 8. RÉALISATIONS ============================== */
.realisations{ position: relative; z-index: 1; padding-block: var(--section-y) calc(var(--section-y) * .7); }
.realisations__intro{ align-items: end; margin-bottom: clamp(80px, 10vw, 170px); }
.realisations__intro .surtitre{ grid-column: 1 / -1; }
.realisations__intro .titre-h2{ grid-column: 1 / 9; }
.realisations__chapo{ grid-column: 9 / 13; margin: 0; font-size: clamp(17px, 1.2vw, 20px); color: var(--encre-2); }

.realisation{
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere);
  align-items: center;
  width: 100%; max-width: var(--largeur-max); margin: 0 auto clamp(110px, 13vw, 210px); padding-inline: var(--marge);
}
.realisation > *{ min-width: 0; }
.realisation__images{ grid-column: 1 / 9; grid-row: 1; position: relative; }
.realisation__texte{ grid-column: 9 / 13; grid-row: 1; padding-left: clamp(0px, 2vw, 32px); }
.realisation--inverse .realisation__images{ grid-column: 5 / 13; }
.realisation--inverse .realisation__texte{ grid-column: 1 / 5; padding: 0 clamp(0px, 2vw, 32px) 0 0; }

/* Duo : une grande vue, un détail décalé posé sur son angle, à une autre profondeur. */
.realisation__images--duo{ padding-bottom: clamp(60px, 9vw, 150px); }
.realisation__images--duo > .figure:first-child{ width: 86%; }
.realisation__images--duo > .figure:last-child{
  position: absolute; right: 0; bottom: 0; width: 38%; z-index: 2;
  padding: 10px 10px 0; background: var(--sable);
}
.realisation--inverse .realisation__images--duo > .figure:first-child{ margin-left: auto; }
.realisation--inverse .realisation__images--duo > .figure:last-child{ right: auto; left: 0; }
/* En miroir, la légende de la grande vue passe à droite pour ne pas glisser sous le détail. */
.realisation--inverse .realisation__images--duo > .figure:first-child .legende{ margin-left: auto; }

.realisation__numero{
  margin: 0 0 10px;
  font: 400 clamp(88px, 10vw, 176px)/.78 var(--serif); letter-spacing: -.04em; color: var(--terre);
}
.realisation__titre{ font-size: clamp(40px, 4vw, 68px); line-height: .95; margin: 0 0 30px; text-wrap: balance; }
.realisation__texte > p:not(.realisation__numero){ color: var(--encre-2); max-width: 46ch; }

/* Fiche : un cartouche de plan, filets fins, libellés condensés. */
.fiche{ margin: 0 0 28px; border-top: 1px solid var(--filet-fort); }
.fiche > div{ display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--filet); }
.fiche dt{ color: var(--terre); padding-top: 2px; }
.fiche dd{ margin: 0; font-size: 15px; line-height: 1.5; font-weight: 500; }

.realisation--avec-bande{ margin-bottom: clamp(56px, 7vw, 110px); }
.realisation--vertical .realisation__images{ grid-column: 1 / 6; }
.realisation--vertical .realisation__texte{ grid-column: 7 / 12; padding: 0; }

/* Bandeau panoramique à fond perdu. */
.bande{ position: relative; }
.bande .cadre{ height: min(78svh, 56vw); background: var(--vert); }
.bande img{ height: 100%; object-fit: cover; object-position: 50% 55%; }
.legende--bande{ max-width: var(--largeur-max); margin: 16px auto 0; padding-inline: var(--marge); }

/* Charnière : un passage calme, sous un filet de terre cuite. */
.realisations__charniere{
  position: relative; max-width: 26ch; margin: clamp(120px, 15vw, 230px) auto clamp(110px, 13vw, 200px);
  padding: 56px var(--marge) 0; text-align: center;
  font: italic 400 clamp(36px, 4.4vw, 76px)/1.04 var(--serif); letter-spacing: -.015em; color: var(--vert);
}
.realisations__charniere::before{ content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 36px; background: var(--terre); }

/* ============================== 9. PORTRAIT ============================== */
.portrait{ position: relative; z-index: 1; padding-block: var(--section-y); background: var(--vert); color: var(--chaux); overflow: hidden; }
.portrait .grille{ align-items: center; row-gap: 56px; }
.portrait__figure{ grid-column: 1 / 6; position: relative; }
/* Un cadre décalé, comme le trait d'un calque posé sur la photo. */
.portrait__figure::before{
  content: ""; position: absolute; inset: 22px -22px 34px 22px; z-index: 0;
  border: 1px solid var(--terre-clair); opacity: .5; pointer-events: none;
}
.portrait__figure .cadre{ background: var(--vert-2); z-index: 1; }
.portrait .legende{ color: var(--chaux-70); }
.portrait__texte{ grid-column: 7 / 13; }
.portrait .surtitre{ color: var(--terre-clair); }
.portrait .titre-h2{ font-size: clamp(56px, 6.4vw, 112px); }
.citation{ margin: clamp(32px, 4vw, 56px) 0; padding: 0; position: relative; }
.citation p{
  margin: 0; font: italic 400 clamp(30px, 3.1vw, 54px)/1.1 var(--serif); letter-spacing: -.01em; color: var(--chaux);
  text-wrap: balance;
}
.citation p::before{ content: "« "; color: var(--terre-clair); }
.citation p::after{ content: " »"; color: var(--terre-clair); }
.portrait__bio{ max-width: 56ch; color: var(--chaux-70); }
.portrait__bio p:last-child{ margin-top: 30px; color: var(--chaux); }

/* ============================== 10. CARRIÈRE ============================== */
.carriere{ position: relative; z-index: 1; background: var(--chaux); padding-top: var(--section-y); }
.carriere__intro{ grid-column: 1 / 7; }
.carriere__texte{ grid-column: 8 / 13; align-self: end; color: var(--encre-2); }
.carriere__archives{
  grid-column: 1 / -1; position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere);
  align-items: end; margin-top: clamp(72px, 9vw, 140px); padding-bottom: 56px;
}
.carriere__archives > *{ min-width: 0; }
/* La table d'archives : un socle de sable sur lequel reposent les trois documents. */
.carriere__archives::before{
  content: ""; position: absolute; left: calc(var(--marge) * -1); right: calc(var(--marge) * -1); bottom: 0; height: 58%;
  background: var(--sable); z-index: -1;
}
.archive--couverture{ grid-column: 1 / 4; }
.archive--couverture .cadre{ box-shadow: 0 0 0 10px var(--chaux-vive), 0 0 0 11px var(--filet); }
.archive--couverture .legende{ margin-top: 24px; }
.archive--tenue{ grid-column: 5 / 8; margin-bottom: 64px; }
.archive--canberra{ grid-column: 8 / 13; margin-bottom: 18px; }

.tours{ background: var(--chaux); padding-block: clamp(56px, 6vw, 88px); border-top: 1px solid var(--filet); }
.tours__titre{ grid-column: 1 / -1; margin: 0 0 36px; color: var(--terre); }
.tours__liste{
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--filet-fort);
}
.tour{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 150px; padding: 24px 14px; text-align: center; border-left: 1px solid var(--filet);
}
.tour:first-child{ border-left: 0; }
.tour__logo{ width: auto; height: 46px; object-fit: contain; }
.tour__nom{ font-size: 12px; font-weight: 600; font-stretch: 85%; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
.tours__mention{ grid-column: 1 / -1; margin: 22px 0 0; font-size: 12px; color: var(--encre-2); }

/* ============================== 11. CHIFFRES ============================== */
.chiffres{ position: relative; z-index: 1; overflow: hidden; padding-block: clamp(96px, 11vw, 180px); background: var(--vert); color: var(--chaux); }
.chiffres .releve{ top: auto; height: 80%; opacity: .55; }
.chiffres .releve use{ stroke: var(--olive-clair); }
.chiffres .grille{ position: relative; }
.chiffres__titre{ grid-column: 1 / -1; margin: 0 0 clamp(48px, 6vw, 88px); color: var(--terre-clair); }
.chiffres__liste{ grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gouttiere); margin: 0; padding: 0; list-style: none; }
.chiffre{ padding-top: 22px; border-top: 1px solid var(--filet-clair); }
.chiffre__valeur{
  display: block; font: 400 clamp(96px, 11.5vw, 210px)/.8 var(--serif); letter-spacing: -.04em; white-space: nowrap;
  color: var(--terre-clair); font-variant-numeric: lining-nums tabular-nums;
}
/* Le « + » de « 10+ » : un exposant, hors du compteur pour que l'animation ne l'efface pas. */
.chiffre__plus{ font-size: .5em; vertical-align: .62em; margin-left: .04em; }
.chiffre__legende{ display: block; max-width: 20ch; margin-top: 22px; font-size: 16px; line-height: 1.45; color: var(--chaux-70); }
.chiffres__note{ grid-column: 1 / -1; margin: clamp(40px, 5vw, 72px) 0 0; font: italic 400 clamp(28px, 2.6vw, 44px)/1.1 var(--serif); color: var(--chaux); }

/* ============================== 12. CONTACT ============================== */
.contact{ position: relative; z-index: 1; padding-block: var(--section-y); background: var(--chaux); }
.contact__intro{ grid-column: 1 / 10; margin-bottom: clamp(56px, 7vw, 110px); }
.contact__chapo{ max-width: 46ch; margin-top: 32px; font-size: clamp(17px, 1.2vw, 20px); color: var(--encre-2); }
.formulaire{ grid-column: 1 / 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px var(--gouttiere); align-content: start; }
.champ{ position: relative; min-width: 0; }
.champ--large{ grid-column: 1 / -1; }
.champ label{ display: block; margin-bottom: 8px; color: var(--terre); }
.champ input, .champ textarea{
  width: 100%; min-height: 52px; padding: 10px 0 12px;
  background: transparent; border: 0; border-bottom: 1px solid var(--bord-champ); border-radius: 0;
  font-size: 19px; line-height: 1.5;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.champ textarea{ display: block; resize: vertical; min-height: 160px; padding: 12px 14px; border: 1px solid var(--bord-champ); }
.champ input:hover, .champ textarea:hover{ border-color: var(--encre); }
.champ input:focus{ outline: none; border-color: var(--terre); box-shadow: 0 1px 0 0 var(--terre); }
.champ textarea:focus{ outline: none; border-color: var(--terre); box-shadow: inset 0 0 0 1px var(--terre); }
.champ input:focus-visible, .champ textarea:focus-visible{ outline: 2px solid var(--terre); outline-offset: 4px; }
.formulaire .bouton{ justify-self: start; grid-column: 1 / -1; }
.formulaire__retour{ grid-column: 1 / -1; min-height: 1.5em; margin: 0; font: italic 400 20px/1.3 var(--serif); color: var(--encre-2); }
.coordonnees{ grid-column: 9 / 13; align-self: start; }
.coordonnees dl{ margin: 0; border-top: 1px solid var(--filet-fort); }
.coordonnees dl > div{ padding: 20px 0; border-bottom: 1px solid var(--filet); }
.coordonnees dt{ margin-bottom: 6px; color: var(--terre); }
.coordonnees dd{ margin: 0; font-size: 16px; color: var(--encre-2); overflow-wrap: anywhere; }
.coordonnees dd a{ display: inline-block; padding-block: 4px; font: 400 clamp(24px, 1.9vw, 30px)/1.2 var(--serif); color: var(--encre); }

/* ============================== 13. PIED DE PAGE ============================== */
.pied{ position: relative; z-index: 1; background: var(--vert); color: var(--chaux); padding-block: clamp(72px, 8vw, 120px) 40px; }
.pied .grille{ row-gap: 56px; align-items: end; }
.pied__marque{ grid-column: 1 / 8; }
.pied__logo{ width: 190px; }
.pied__signature{ margin: 36px 0 0; font: italic 400 clamp(44px, 6vw, 104px)/.95 var(--serif); letter-spacing: -.02em; color: var(--terre-clair); }
.pied__nav{ grid-column: 9 / 13; }
.pied__nav ul{ margin: 0; padding: 0; list-style: none; }
.pied__nav li{ border-top: 1px solid var(--filet-clair); }
.pied__nav a{ display: flex; align-items: center; min-height: 48px; font-size: 16px; color: var(--chaux); }
.pied__nav a::after{ bottom: 12px; }
.pied__mentions{ grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--filet-clair); font-size: 13px; line-height: 1.7; color: var(--chaux-70); }
.pied__mentions p{ margin: 0; }
.pied__mentions .pied__legal{ margin-top: 10px; }
.pied__legal a{ display: inline-block; padding-block: 6px; }
.pied__legal a:hover{ color: var(--chaux); }

/* ============================== 14. PAGES LÉGALES ============================== */
.entete__retour{ display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; }
.legal{ position: relative; padding: calc(var(--entete) + var(--section-y) * .7) 0 var(--section-y); overflow: hidden; }
.legal .releve{ height: 760px; opacity: .22; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.legal .grille{ position: relative; }
.legal__texte{ grid-column: 2 / 10; }
.legal__texte h1{ font-size: clamp(56px, 7vw, 112px); line-height: .9; letter-spacing: -.02em; margin-bottom: 18px; }
.legal__maj{ font: italic 400 22px/1.4 var(--serif); color: var(--olive); margin-bottom: clamp(48px, 6vw, 80px); }
.legal__texte h2{ font-size: clamp(30px, 2.6vw, 42px); margin: 56px 0 18px; padding-top: 28px; border-top: 1px solid var(--filet-fort); }
.legal__texte p:not(.surtitre):not(.legal__maj), .legal__texte li{ max-width: 68ch; color: var(--encre-2); }
.legal__texte ul{ padding-left: 1.1em; margin: 0 0 1.2em; }
.legal__texte li + li{ margin-top: 6px; }
.legal__texte li::marker{ color: var(--terre); }
.legal__texte strong{ color: var(--encre); }
.legal__texte a{ color: var(--encre); text-decoration: underline; text-decoration-color: var(--terre); text-decoration-thickness: 1px; text-underline-offset: .22em; }

/* ============================== 15. MOUVEMENT ==============================
   Trois familles :
   · les ouvertures liées au défilement — variables --entree (0 → 1 quand le bloc
     monte du bas de l'écran jusqu'à son tiers haut) et --traverse (−1 → 1, position
     du bloc dans l'écran), écrites par main.js sur les éléments [data-defile] ;
   · les apparitions, jouées une fois quand un élément arrive à l'écran ;
   · l'ouverture du héros au chargement, en CSS seul.
   Rien n'est masqué durablement : sans la classe « moteur », tout est visible.  */

/* --- Ouverture du héros au chargement : le paysage se lève, le titre monte. --- */
@media (prefers-reduced-motion: no-preference){
  .js .heros__media{ animation: fenetre-intro 1600ms var(--e-sortie) both; }
  .js .heros__titre .ligne{ overflow: clip; overflow-clip-margin: .25em; padding-bottom: .1em; margin-bottom: -.1em; }
  .js .heros__titre .ligne__i{ display: block; animation: ligne-intro 1300ms var(--e-sortie) both; }
  .js .heros__titre .ligne + .ligne .ligne__i{ animation-delay: 120ms; }
  .js .heros__surtitre, .js .heros__details{ animation: monte-intro 1100ms var(--e-sortie) 280ms both; }
  .js .heros__legende{ animation: fondu-intro 900ms ease 1100ms both; }
  .js .heros .releve{ animation: fondu-intro 2000ms ease 200ms both; }
}
@keyframes fenetre-intro{ from{ clip-path: inset(0 0 100% 0); } to{ clip-path: inset(0); } }
@keyframes ligne-intro{ from{ transform: translateY(105%); } to{ transform: none; } }
@keyframes monte-intro{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
@keyframes fondu-intro{ from{ opacity: 0; } }

/* --- Apparitions, une seule fois. --- */
.moteur .reveal{
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity 900ms var(--e-sortie), transform 1100ms var(--e-sortie);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.moteur .reveal.est-visible{ opacity: 1; transform: none; }
.moteur .titre-masque .ligne{ overflow: clip; overflow-clip-margin: .25em; padding-bottom: .1em; margin-bottom: -.1em; }
.moteur .titre-masque .ligne__i{
  display: block; transform: translate3d(0, 108%, 0);
  transition: transform 1300ms var(--e-sortie); transition-delay: calc(var(--i, 0) * 110ms);
}
.moteur .titre-masque.est-visible .ligne__i{ transform: none; }
.moteur .surtitre.reveal::before{ transform: scaleX(0); transform-origin: left; transition: transform 1000ms var(--e-sortie) 200ms; }
.moteur .surtitre.reveal.est-visible::before{ transform: none; }
/* Le trait de cote se tire sous les mots-clés une fois le paragraphe apparu. */
.moteur .reveal .cle{ background-size: 0% 1.5px; transition: background-size 1200ms var(--e-douce) 500ms; }
.moteur .reveal.est-visible .cle{ background-size: 100% 1.5px; }
.moteur .temps__enjeu{ border-left-color: transparent; }
.moteur .temps__enjeu::after{
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--terre);
  transform: scaleY(0); transform-origin: top; transition: transform 1100ms var(--e-sortie) 300ms;
}
.moteur .est-visible .temps__enjeu::after{ transform: none; }

/* --- Courbes de niveau tracées au défilement. --- */
.moteur .metier > .releve .releve__maitresses{ stroke-dashoffset: calc(1 - clamp(0, var(--entree, 1) * 1.2, 1)); }
.moteur .metier > .releve .releve__intermediaires{ stroke-dashoffset: calc(1 - clamp(0, var(--entree, 1) * 1.2 - .2, 1)); }
.moteur .chiffres .releve .releve__maitresses{ stroke-dashoffset: calc(1 - clamp(0, var(--entree, 1) * 1.3, 1)); }
.moteur .chiffres .releve .releve__intermediaires{ stroke-dashoffset: calc(1 - clamp(0, var(--entree, 1) * 1.3 - .25, 1)); }

/* --- Le métier : chaque temps a son ouverture. --o : ouverture de l'image. --- */
.moteur .temps{ --o: clamp(0, calc((var(--entree, 1) - .08) * 1.75), 1); }
.moteur .temps__figure .cadre img{ transform: scale(calc(1.14 - var(--o) * .14)); }
/* 01 · balayage gauche → droite ; la ligne de relevé suit le bord. */
.moteur .cadre--balayage{ clip-path: inset(0 calc((1 - var(--o)) * 100%) 0 0); }
.moteur .cadre--balayage::after{
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px; z-index: 2;
  left: calc(var(--o) * 100% - 2px); background: var(--terre-clair);
  opacity: clamp(0, calc((1 - var(--o)) * 6), 1);
}
/* 02 · le plan se déroule, puis la trame d'étude et l'axe de jeu se tracent. */
.moteur .cadre--trame{ clip-path: inset(0 0 calc((1 - var(--o)) * 100%) 0); }
.moteur .trame path{ stroke-dashoffset: calc(1 - clamp(0, (var(--o) - .35) * 1.6, 1)); }
.moteur .trame .trame__axe{ stroke-dashoffset: calc(1 - clamp(0, (var(--o) - .6) * 2.5, 1)); }
/* 03 · la terre monte dans le cadre. */
.moteur .cadre--terre{ clip-path: inset(calc((1 - var(--o)) * 100%) 0 0 0); }
.moteur .temps .cadre--terre img{ transform: translate3d(0, calc((1 - var(--o)) * 18%), 0) scale(calc(1.2 - var(--o) * .2)); }
/* 04 · l'horizon s'ouvre depuis le centre. */
.moteur .cadre--horizon{ clip-path: inset(calc((1 - var(--o)) * 30%) calc((1 - var(--o)) * 50%) calc((1 - var(--o)) * 30%) calc((1 - var(--o)) * 50%)); }

/* --- Réalisations : la grande vue s'ouvre vers le texte, le détail suit
       avec un temps de retard et une autre profondeur. --- */
.moteur .realisation{
  --o: clamp(0, calc((var(--entree, 1) - .02) * 1.6), 1);
  --o2: clamp(0, calc((var(--entree, 1) - .3) * 1.9), 1);
}
.moteur .realisation__images .figure:first-child .cadre{ clip-path: inset(0 calc((1 - var(--o)) * 100%) 0 0); }
.moteur .realisation--inverse .realisation__images .figure:first-child .cadre{ clip-path: inset(0 0 0 calc((1 - var(--o)) * 100%)); }
.moteur .realisation__images .figure:first-child img{ transform: scale(calc(1.16 - var(--o) * .16)); }
.moteur .realisation__images--duo > .figure:last-child{ transform: translate3d(0, calc(var(--traverse, 0) * 70px), 0); }
.moteur .realisation__images--duo > .figure:last-child .cadre{ clip-path: inset(calc((1 - var(--o2)) * 100%) 0 0 0); }
/* Le Royal Golf, vu du ciel : l'image descend et prend du recul. */
.moteur .realisation--vertical .realisation__images .figure:first-child .cadre{ clip-path: inset(0 0 calc((1 - var(--o)) * 100%) 0); }
.moteur .realisation--vertical .realisation__images .figure:first-child img{ transform: scale(calc(1.32 - var(--o) * .32)); transform-origin: 50% 0; }
.moteur .realisation__numero{ transform: translate3d(0, calc(var(--traverse, 0) * -36px), 0); }

/* --- Le bandeau s'élargit jusqu'au plein cadre en approchant du centre. --- */
.moteur .bande{ --b: clamp(0, calc(var(--traverse, 0) * 1.6), 1); }
.moteur .bande .cadre{ clip-path: inset(calc(var(--b) * 10%) calc(var(--b) * var(--marge)) calc(var(--b) * 10%) calc(var(--b) * var(--marge))); }
.moteur .bande img{ transform: scale(calc(1 + var(--b) * .14)) translate3d(0, calc(var(--traverse, 0) * -3%), 0); }

/* --- Charnière et citation : le filet descend, les mots s'encrent dans l'ordre. --- */
.moteur .realisations__charniere::before{ transform: scaleY(clamp(0, calc(var(--entree, 1) * 2), 1)); transform-origin: top; }
.moteur [data-mots] .mot{ opacity: clamp(.2, calc(var(--entree, 1) * var(--n) * 1.45 - var(--w) + 1), 1); }

/* --- Portrait : le calque se pose, la photo monte. --- */
.moteur .portrait__figure{ --o: clamp(0, calc((var(--entree, 1) - .02) * 1.6), 1); }
.moteur .portrait__figure .cadre{ clip-path: inset(calc((1 - var(--o)) * 100%) 0 0 0); }
.moteur .portrait__figure img{ transform: scale(calc(1.18 - var(--o) * .18)); transform-origin: 50% 100%; }
.moteur .portrait__figure::before{ transform: translate3d(calc((1 - var(--o)) * -22px), calc((1 - var(--o)) * -22px), 0); opacity: calc(var(--o) * .5); }

/* --- Archives : trois profondeurs différentes sur la table. --- */
.moteur .archive--couverture{ transform: translate3d(0, calc(var(--traverse, 0) * 40px), 0); }
.moteur .archive--tenue{ transform: translate3d(0, calc(var(--traverse, 0) * 90px), 0); }
.moteur .archive--canberra{ transform: translate3d(0, calc(var(--traverse, 0) * 20px), 0); }
.moteur .carriere__archives::before{ transform: scaleX(clamp(0, calc(var(--entree, 1) * 1.4), 1)); transform-origin: left; }

/* --- Le rail du métier --- */
.metier__trace::before, .metier__trace::after{ content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: var(--filet-fort); }
.metier__trace::after{ left: 3.5px; width: 2px; background: var(--terre); transform: scaleY(var(--etapes, 0)); transform-origin: top; }
.metier__trace span{
  position: absolute; left: 0; width: 9px; height: 9px; z-index: 1;
  background: var(--chaux); border: 1px solid var(--filet-fort);
  transition: background 400ms ease, border-color 400ms ease, transform 400ms var(--e-sortie);
}
.metier__trace span{ top: var(--y, 0); }
.metier__trace span.est-actif{ background: var(--terre); border-color: var(--terre); transform: rotate(45deg); }

/* ============================== 16. RESPONSIVE ============================== */

/* Grand écran assez haut : scènes à composition fixe temporaire. */
@media (min-width: 1024px) and (min-height: 680px){
  .moteur .heros{ height: 210svh; }
  /* Un rail court le long des quatre temps ; ses jalons sont placés par main.js. */
  .moteur .metier__trace{ display: block; position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(var(--marge) / 2 - 4px); width: 9px; }
  .moteur .temps{ min-height: 112svh; align-items: start; }
  .moteur .temps__figure{ position: sticky; top: calc(var(--entete) + 7svh); }
  .moteur .temps__texte{ align-self: center; }
  .moteur .temps__figure .cadre{ max-height: 70svh; }
  .moteur .temps__figure img{ max-height: 70svh; object-fit: cover; }
}

@media (max-width: 1180px){
  .nav__liste{ gap: 18px; }
  .nav__liste a{ font-size: 13px; }
  .entete__logo{ width: 150px; }
  .temps--conseil .temps__figure{ grid-column: 1 / 8; }
  .temps--conseil .temps__texte{ grid-column: 8 / 13; }
  .temps--exploitation .temps__texte{ grid-column: 1 / 6; }
  .temps--exploitation .temps__figure{ grid-column: 6 / 13; }
  .realisation__texte{ grid-column: 8 / 13; }
  .realisation__images{ grid-column: 1 / 8; }
  .realisation--inverse .realisation__texte{ grid-column: 1 / 6; }
  .realisation--inverse .realisation__images{ grid-column: 6 / 13; }
}

/* Tablette, mobile et écran court : le héros en flux, sans scène fixe. */
@media (max-width: 1023px), (max-height: 679px){
  .heros{ min-height: 0; display: flex; flex-direction: column; }
  .heros__contenu{
    position: relative; width: 100%; height: auto; min-height: 0; order: 1;
    padding: calc(var(--entete) + 56px) var(--marge) 40px;
    transform: none; opacity: 1;
  }
  .heros__titre{ grid-column: 1 / -1; font-size: clamp(42px, 12.5vw, 120px); }
  .heros__surtitre{ grid-column: 1 / -1; }
  .heros__details{ grid-column: 1 / 10; }
  .heros__scene{ position: relative; order: 2; width: 100%; max-width: var(--largeur-max); margin-inline: auto; height: auto; min-height: 0; padding: 0 var(--marge) 48px; overflow: visible; }
  .heros__scene::before, .heros__scene::after{ display: none; }
  .heros .releve{ inset: auto 0 0; height: 140%; }
  .heros__fenetre{ position: relative; inset: auto; clip-path: none; }
  .heros__media{ position: relative; aspect-ratio: 16 / 10; }
  .heros__media img{ transform: none; }
  .heros__legende{ right: 14px; bottom: 14px; }
}
@media (min-width: 1024px) and (max-height: 679px){
  .heros__titre{ font-size: clamp(56px, 8vw, 120px); }
  .heros__media{ aspect-ratio: 21 / 9; }
}

@media (max-width: 1023px){
  .metier__intro .titre-h2, .realisations__intro .titre-h2{ grid-column: 1 / -1; }
  .metier__chapo, .realisations__chapo{ grid-column: 1 / 10; margin-top: 36px; }
  .temps{ row-gap: 32px; }
  .temps .temps__figure, .temps .temps__texte{ grid-column: 1 / -1; }
  .temps--conception .temps__figure, .temps--exploitation .temps__figure{ order: -1; }
  .temps__texte{ max-width: 640px; }

  .realisation{ row-gap: 40px; }
  .realisation__images, .realisation--inverse .realisation__images,
  .realisation--vertical .realisation__images{ grid-column: 1 / -1; grid-row: auto; }
  .realisation__texte, .realisation--inverse .realisation__texte,
  .realisation--vertical .realisation__texte{ grid-column: 1 / 11; grid-row: auto; padding: 0; }
  .realisation--vertical .realisation__images{ max-width: 520px; }

  .portrait__figure{ grid-column: 1 / 8; }
  .portrait__texte{ grid-column: 1 / -1; }
  .carriere__intro, .carriere__texte{ grid-column: 1 / -1; }
  .carriere__texte{ margin-top: 40px; max-width: 640px; }
  .contact__intro{ grid-column: 1 / -1; }
  .formulaire{ grid-column: 1 / -1; }
  .coordonnees{ grid-column: 1 / -1; margin-top: 64px; }
  .pied__marque{ grid-column: 1 / -1; }
  .pied__nav{ grid-column: 1 / 8; }
  .legal__texte{ grid-column: 1 / -1; }
}

/* Menu replié */
@media (max-width: 900px){
  :root{ --entete: 64px; }
  .entete__logo{ width: 140px; }
  .js .entete__bouton{ display: inline-flex; }
  .js .nav{
    position: fixed; top: var(--entete); left: 0; right: 0; height: calc(100svh - var(--entete));
    overflow-y: auto; background: var(--chaux); border-top: 1px solid var(--filet);
    visibility: hidden; opacity: 0; transition: opacity 400ms ease, visibility 0s linear 400ms;
  }
  .js .nav[data-ouvert]{ visibility: visible; opacity: 1; transition: opacity 400ms ease; }
  .js .nav__liste{ flex-direction: column; align-items: stretch; gap: 0; padding: 24px var(--marge) 40px; }
  .js .nav__liste li{ border-bottom: 1px solid var(--filet); }
  .js .nav__liste a{ display: flex; min-height: 72px; font: 400 clamp(36px, 9vw, 52px)/1 var(--serif); letter-spacing: -.01em; }
  .js .nav__liste a::after{ display: none; }
  .js .nav__liste a::before{ width: 8px; height: 8px; }
  .js .nav__liste li:last-child a{ border: 0; padding-inline: 0; color: var(--terre); }
  .js .nav__liste li:last-child a:hover, .js .nav__liste li:last-child a:focus-visible{ background: none; color: var(--terre); }
  .js .nav[data-ouvert] .nav__liste li{ animation: monte-intro 700ms var(--e-sortie) both; }
  .js .nav[data-ouvert] .nav__liste li:nth-child(2){ animation-delay: 50ms; }
  .js .nav[data-ouvert] .nav__liste li:nth-child(3){ animation-delay: 100ms; }
  .js .nav[data-ouvert] .nav__liste li:nth-child(4){ animation-delay: 150ms; }
  .js .nav[data-ouvert] .nav__liste li:nth-child(5){ animation-delay: 200ms; }
  .no-js .entete{ position: relative; }
  .no-js .entete__barre{ height: auto; flex-wrap: wrap; padding-block: 12px; }
  .no-js .nav__liste{ flex-wrap: wrap; gap: 4px 20px; }
  .no-js .heros__contenu{ padding-top: 40px; }

  .chiffres__liste{ grid-template-columns: 1fr; gap: 0; }
  .chiffre{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: end; gap: 20px; padding-block: 22px; }
  .chiffre__legende{ margin: 0 0 8px; }
  .chiffre__valeur{ font-size: clamp(80px, 22vw, 150px); }

  .carriere__archives{ row-gap: 40px; padding-bottom: 32px; }
  .archive--couverture{ grid-column: 1 / 7; }
  .archive--tenue{ grid-column: 7 / 13; margin-bottom: 0; }
  .archive--canberra{ grid-column: 1 / -1; margin: 0; }
  .carriere__archives::before{ height: 34%; }

  .tours__liste{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour{ border-left: 0; border-bottom: 1px solid var(--filet); }
  .tour:nth-child(even){ border-left: 1px solid var(--filet); }
  .tour:last-child{ grid-column: 1 / -1; border-bottom: 0; }
}

@media (max-width: 640px){
  :root{ --t-h2: clamp(46px, 13vw, 72px); --t-h3: clamp(40px, 11vw, 56px); }
  .heros__contenu{ padding-top: calc(var(--entete) + 40px); }
  .heros__details{ grid-column: 1 / -1; }
  .heros__media{ aspect-ratio: 4 / 5; }
  .heros__media img{ object-position: 62% 50%; }
  .heros__titre .ligne--italique{ padding-left: .35em; }
  .metier__chapo, .realisations__chapo{ grid-column: 1 / -1; }
  .temps__numero{ font-size: 72px; }
  .temps__enjeu{ font-size: 25px; }
  .realisation__texte, .realisation--inverse .realisation__texte, .realisation--vertical .realisation__texte{ grid-column: 1 / -1; }
  .realisation__images--duo{ display: flex; flex-direction: column; gap: 28px; padding-bottom: 0; }
  .realisation__images--duo > .figure:first-child{ width: 100%; }
  .realisation__images--duo > .figure:last-child{ position: relative; width: 72%; align-self: flex-end; padding: 0; background: none; }
  .realisation--inverse .realisation__images--duo > .figure:last-child{ align-self: flex-start; }
  .realisation__numero{ font-size: 96px; }
  .fiche > div{ grid-template-columns: 96px minmax(0, 1fr); }
  .bande .cadre{ height: 62svh; }
  .realisations__charniere{ font-size: 40px; }
  .portrait__figure{ grid-column: 1 / 11; }
  .portrait__figure::before{ inset: 14px -14px 30px 14px; }
  .formulaire{ grid-template-columns: 1fr; }
  .formulaire .bouton{ width: 100%; justify-content: space-between; }
  .pied__nav{ grid-column: 1 / -1; }
  .entete__retour{ font-size: 13px; }
}

/* Mouvement réduit : aucune transition, aucune scène, aucun tracé progressif. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}

/* ============================== 17. IMPRESSION ============================== */
@media print{
  body::after, .entete, .heros__scene::before, .heros__scene::after, .releve, .metier__trace{ display: none !important; }
  .reveal, .titre-masque .ligne__i, .cadre, .heros__fenetre{ opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .heros{ height: auto !important; }
}