/* ==========================================================================
   AURALP
   Palette et tracé dérivés du logo : ivoire #FFFCF8, bleu nuit #16232F,
   vert sapin #2E4A38. Angles vifs partout, aucun arrondi.
   Typographie : IBM Plex Sans, auto-hébergée (aucun CDN).
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
}

:root {
  --paper:       #FFFCF8;
  --ivory:       #F2EDE3;
  --nuit:        #16232F;
  --sapin:       #2E4A38;
  --sapin-lo:    #7FA88C;

  --ink:         #16232F;
  /* Le chapô : un cran plus clair que les titres, un cran plus foncé que le
     corps. C'est ce qui le distingue des deux sans changer de famille. */
  --ink-lead:    #2F3D4A;
  --ink-soft:    #4B5763;
  --ink-mute:    #5D6975; /* 4,8:1 sur ivoire, 5,5:1 sur papier (AA) */

  --rule:        rgba(22, 35, 47, .16);
  --rule-soft:   rgba(22, 35, 47, .09);

  --f-display: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-text:    "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --wrap:      1240px;
  --gutter:    clamp(22px, 5.4vw, 72px);
  --head-h:    84px;
  --section-y: clamp(76px, 9vw, 138px);

  /* Quatre niveaux, puis le texte : titre de page, titre de section,
     intertitre, chapô, corps. Chaque marche est franche : l'intertitre
     (500) passe nettement au-dessus du chapô (400), le chapô nettement
     au-dessus du corps.
       desktop 1440 : 67 / 50 / 26 / 21 / 18 px
       mobile 375   : 38 / 33 / 21 / 19 / 17 px */
  --t-display: clamp(2.35rem, 5vw, 4.2rem);
  --t-section: clamp(2.05rem, 3.5vw, 3.1rem);
  --t-sub:     clamp(1.3rem, 1.9vw, 1.65rem);
  --t-lead:    clamp(1.18rem, .95rem + .55vw, 1.32rem);
  --t-body:    clamp(1.0625rem, .95rem + .3vw, 1.125rem);
  --t-small:   .9375rem;

  /* --------------------------------------------------------- grille --
     Une seule cesure pour tous les blocs a deux colonnes, et son miroir.
     Chaque section inventait la sienne : la deuxieme colonne demarrait a
     575, 589, 691, 754, 759 puis 949px selon le bloc. L'alternance
     gauche/droite tournait donc autour d'un axe qui se deplacait a chaque
     section. Meme ratio partout, l'axe devient lisible. */
  --split-a:   minmax(0, 7fr);
  --split-b:   minmax(0, 5fr);
  --split-gap: clamp(28px, 4.4vw, 72px);

  /* ------------------------------------------------------- mouvement --
     Un élément lourd ne bouge pas comme une étiquette. Quatre courbes et
     quatre durées, choisies selon le poids visuel : c'est ce qui manquait
     jusqu'ici, où les neuf familles partageaient la même signature.

       matière  grands visuels, photographies pleine largeur
       trace    dessin d'un filet ou d'une crête, progression régulière
       titre    titres et intertitres, départ franc puis amorti
       label    liens, étiquettes, marqueurs : court et sec              */

  --e-matiere: cubic-bezier(.16, .84, .30, 1);
  --e-trace:   cubic-bezier(.30, .70, .25, 1);
  --e-titre:   cubic-bezier(.22, 1, .36, 1);
  --e-label:   cubic-bezier(.34, .90, .42, 1);

  --d-matiere: 800ms;
  --d-titre:   620ms;
  --d-label:   340ms;
}

/* --------------------------------------------------------------- reset -- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 500;
  margin: 0;
  letter-spacing: -.012em;
  line-height: 1.12;
}
h1, h2 { font-weight: 600; text-wrap: balance; }
h2 { font-size: var(--t-section); letter-spacing: -.028em; line-height: 1.08; }

/* Accent de titre : chaque grand titre (H1, H2 de section) porte un seul
   passage en vert, le mot ou le groupe court qui porte l'idée. Jamais deux
   accents dans le même titre, jamais de graisse ajoutée : seule la couleur
   change. Sur fond clair, le sapin du logo ; sur fond sombre (héros, bandes
   nuit), le vert du « LP » du logo tel qu'il est déjà rendu sur la marque
   du héros et du pied de page. Un seul vert par fond, sur tout le site. */
h1 .hl, h2 .hl { color: var(--hl, var(--sapin)); }
.hero__title, .approche, .etude, .close, .ouverture { --hl: #8DBB9C; }

/* Nom composé à ne pas couper sur ses traits d'union (Châtillon-en-Michaille,
   multi-pièces) : sans cela, un titre cassait en « Châtillon- / en-Michaille ». */
.insecable { white-space: nowrap; }

p { margin: 0; }

/* Cadre photo commun, partagé par .cadre (accueil) et
   .chantier__ph (Réalisations) : un
   contour sapin net, puis une respiration de papier avant la photo. Angles
   vifs, aucune ombre. */
:root {
  --cadre-trait: 2px;
  --cadre-air:   clamp(5px, .5vw, 7px);
}
.cadre {
  margin: 0;
  padding: var(--cadre-air);
  background: var(--paper);
  border: var(--cadre-trait) solid var(--sapin);
}
.cadre img { width: 100%; display: block; border: 0; }

/* Séparation de section : un filet sapin d'un pixel, plein et uniforme sur
   toute la largeur du contenu, sans animation.
   Réservée aux endroits où deux sections claires se suivent sans que rien
   ne les distingue : ailleurs, le changement de fond fait déjà ce travail. */
.sep { padding-top: clamp(56px, 6.4vw, 100px); }
.trait {
  display: block;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--sapin);
}
/* la section qui suit se rapproche : la barre est son entrée, comme le
   filet l'était au-dessus de son titre */
.sep + section,
.sep + article { padding-top: clamp(28px, 3.2vw, 44px); }

/* Les états de départ des animations latérales (translateX) ne doivent
   jamais ouvrir un défilement horizontal sur mobile. Posé sur <main> et non
   sur <body> : sur le body, la règle remonterait au viewport. L'en-tête
   collant est hors de <main>, il n'est pas concerné. */
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

section[id], article[id] { scroll-margin-top: calc(var(--head-h) + 16px); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--nuit);
  color: #fff;
  padding: 12px 20px;
  font-size: .9rem;
  text-decoration: none;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--sapin);
  outline-offset: 3px;
}

::selection { background: var(--sapin); color: #fff; }

/* -------------------------------------------------------------- boutons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: 26px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--f-text);
  font-size: .96rem;
  font-weight: 500;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .12s ease;
}

.btn--solid {
  background: var(--nuit);
  border-color: var(--nuit);
  color: #fff;
}
.btn--solid:hover { background: var(--sapin); border-color: var(--sapin); }
.btn--solid:active { transform: translateY(1px); }

.btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--nuit);
}
.btn--light:hover { background: #D6EADC; border-color: #D6EADC; }
.btn--light:active { transform: translateY(1px); }

/* Action persistante de l'en-tête : filet fin en vert sapin plutôt qu'un bloc plein.
   Le site est construit sur des filets d'un pixel (chapôs, relances, fiches, footer) ;
   l'action reprend ce langage au lieu d'un rectangle massif. Elle reste identifiable
   par la couleur du logo, et ne concurrence plus le bouton plein du héros. */
.btn--outline {
  background: transparent;
  border-color: var(--sapin);
  color: var(--sapin);
}
.btn--outline:hover { background: var(--sapin); border-color: var(--sapin); color: #fff; }
.btn--outline:active { transform: translateY(1px); }

/* contour sobre, pour une action secondaire sur fond clair */
.btn--ghost {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--nuit); background: var(--ivory); }
.btn--ghost:active { transform: translateY(1px); }

/* ------------------------------------------------------------- en-tête -- */

.head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}

.head__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--head-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(16px, 3vw, 40px);
}

/* Le logo sans sa ligne de métier (auralp-logo-mark.png, recadré depuis
   auralp-logo.png) : à cette taille, la baseline n'était plus lisible et
   brouillait la marque. Le signe gagne un cran et s'avance d'un rien vers
   le bord, pour tenir l'angle de la page. */
.head__logo { line-height: 0; justify-self: start; margin-left: -8px; }
.head__logo img { width: auto; height: 46px; }

/* groupe central : navigation + action, centré */
.head__cluster {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
}

.head__nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.1vw, 32px);
}

.head__nav a {
  position: relative;
  font-size: .94rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 4px;
  white-space: nowrap;
  transition: color .2s ease;
}
.head__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--sapin);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
.head__nav a:hover { color: var(--sapin); }
.head__nav a:hover::after { transform: scaleX(1); }

/* page (ou section) active dans la navigation */
.head__nav a[aria-current] { color: var(--ink); }
.head__nav a[aria-current]::after { transform: scaleX(1); background: var(--sapin); }
.mnav__panel a[aria-current] { color: var(--sapin); }

.head__cta {
  flex: 0 0 auto;
  height: 42px;
  padding-inline: 20px;
  gap: 9px;
  font-size: .91rem;
  letter-spacing: .012em;
}
/* flèche discrète : même signal d'action que les relances de fin de section */
.head__cta::after {
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1);
}
.head__cta:hover::after { transform: translateX(3px); }

/* menu mobile, fonctionne sans JavaScript */
.mnav { display: none; justify-self: end; }
.mnav > summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--rule);
  padding: 9px 18px;
  font-size: .92rem;
  color: var(--ink);
  user-select: none;
}
.mnav > summary::-webkit-details-marker { display: none; }
.mnav[open] > summary { background: var(--nuit); border-color: var(--nuit); color: #fff; }

.mnav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 8px var(--gutter) 26px;
}
.mnav__panel a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}
/* même action que dans l'en-tête desktop, donc même couleur : vert sapin */
.mnav__cta {
  margin-top: 20px;
  border: 1px solid var(--sapin) !important;
  background: var(--sapin);
  color: #fff !important;
  text-align: center;
  padding: 15px 0 !important;
}

/* ---------------------------------------------------------------- héros -- */

.hero { padding-top: clamp(46px, 5.4vw, 80px); }

/* Bandeau pleine largeur : l'image occupe toute la largeur de page et
   porte le discours. On sort de la grille .wrap avec une marge negative,
   sans provoquer de debordement horizontal (overflow-x maitrise plus bas). */
.hero { padding-top: 0; }

.hero__banner {
  position: relative;
  isolation: isolate;
  /* Un vrai moment d'entrée : la photo tient presque tout l'écran, en-tête
     et bas du bouton compris, sans jamais le dépasser. */
  min-height: clamp(480px, calc(100svh - var(--head-h) - 120px), 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--nuit);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrage calculé pour le bandeau haut : après le miroir, l'unité tombe
     dans le dernier quart droit, hors de la zone du titre. */
  object-position: 68% 62%;
  /* Retournement horizontal : sur la photo d'origine l'unite est a gauche,
     exactement la ou le texte se pose. Miroir pour qu'elle passe a droite,
     dans la partie claire du voile. Aucun texte dans l'image, donc le
     miroir est invisible. */
  transform: scaleX(-1);
  /* la source est ensoleillée et rosée : on l'assagit, sans l'éteindre */
  filter: grayscale(.2) contrast(1.05) saturate(.9);
  z-index: 0;
}

/* Voile localise : dense en bas a gauche ou se pose le texte, transparent
   en haut a droite ou l'unite reste lisible. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(10, 17, 24, .86) 0%, rgba(10, 17, 24, .6) 28%, rgba(10, 17, 24, .18) 52%, transparent 72%),
    linear-gradient(to right, rgba(10, 17, 24, .66) 0%, rgba(10, 17, 24, .4) 30%, rgba(10, 17, 24, .06) 52%, transparent 62%);
}

.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(38px, 5vw, 72px);
}

/* Le nom de l'entreprise, composé comme sur le logo : AURA dans la couleur
   du texte (ici blanc), LP en vert. Un filet vert pâle le sépare du titre. */
.hero__marque {
  margin-bottom: clamp(18px, 2vw, 26px);
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .3em;
  color: #fff;
}
.hero__marque span { color: #8DBB9C; }

/* Le métier, et rien d'autre, en très grand : on doit lire ce qu'AURALP
   installe avant même d'avoir fini de charger la page. La largeur est
   calée pour que le titre tienne sur trois lignes, à gauche de l'unité. */
.hero__title {
  font-size: clamp(2.3rem, 5.2vw, 4.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  max-width: 10.5em;
  color: #fff;
  text-shadow: 0 2px 22px rgba(6, 12, 18, .5);
}

/* Pour qui, où, et le verbe du métier en tête, en blanc plein. */
.hero__lead {
  margin-top: clamp(20px, 2.2vw, 28px);
  max-width: 46ch;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
}
.hero__lead strong { font-weight: 500; color: #fff; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(26px, 3vw, 40px);
}
/* action secondaire sur fond sombre */
.btn--clear {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.btn--clear:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* ------------------------------------------------ animation d'entree -- */
/* CSS pur. Sans elle, tout est deja a l'etat final : rien n'est masque. */
/* Composition inchangée : seul le rythme est repris. L'image prend le temps
   qu'elle mérite, le surtitre arrive vite, le titre se révèle derrière un
   cache, chapô et boutons suivent en s'accélérant. Les boutons sont en
   place à 1 s : au-delà, l'entrée retardait la lecture au lieu de la porter. */
@media (prefers-reduced-motion: no-preference) {
  .hero__img    { animation: hero-reveal var(--d-matiere) var(--e-matiere) both; }
  .hero__veil   { animation: hero-fade 700ms ease 120ms both; }
  .hero__marque { animation: hero-monte var(--d-label) var(--e-label) 180ms both; }
  .hero__title  { animation: hero-titre var(--d-titre) var(--e-titre) 280ms both; }
  .hero__lead   { animation: hero-monte 460ms var(--e-titre) 500ms both; }
  .hero__cta    { animation: hero-monte 400ms var(--e-label) 600ms both; }
}
/* Le volet s'ouvre du bas vers le haut. Le très léger grandissement
   (1.02 → 1) ne joue que pendant cette ouverture, jamais après : contrairement
   au sur-cadrage permanent retiré plus tôt, il s'arrête net à la fin du
   volet et ne laisse aucun zoom résiduel. Le miroir horizontal, lui, fait
   partie du cadrage et reste constant. */
@keyframes hero-reveal {
  from { clip-path: inset(0 0 26% 0); transform: scaleX(-1) scale(1.02); }
  to   { clip-path: inset(0 0 0 0);   transform: scaleX(-1) scale(1); }
}
/* Deux lignes orphelines traînaient ici depuis une édition inachevée : une
   déclaration « to » hors bloc et une accolade en trop. L'accolade parasite
   faisait avaler la règle suivante par l'analyseur, si bien que
   @keyframes hero-fade n'existait pas — le voile du hero ne se fondait pas.
   Vérifié : le nom était absent de document.styleSheets. */
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-monte {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}
/* Titre : révélation typographique derrière un cache, sans fondu. La lecture
   est nette d'emblée, au lieu d'un texte qui s'éclaircit. */
@keyframes hero-titre {
  from { clip-path: inset(106% 0 -.2em 0); transform: translate3d(0, .3em, 0); }
  to   { clip-path: inset(-.35em 0 -.2em 0); transform: none; }
}
/* Toute animation perpétuelle s'arrête dès que sa section quitte l'écran.
   Posé par script.js. Rien de visible ne change : ce qui est hors champ ne
   se voit pas bouger, mais le processeur, lui, s'en aperçoit. */
.hors-ecran .flux__l { animation-play-state: paused; }


/* Ici se trouvaient « .page-accueil { background: #fff } » et la meme regle
   pour son en-tete collant. L'accueil etait, avec Services, la seule page a
   forcer un blanc pur : le fond du site changeait donc en cours de
   navigation, et les deux pages qui portent le plus de matiere sombre
   etaient justement celles ou le fond clair etait le plus froid. Tout le
   site tient desormais sur --paper. La classe .page-accueil reste sur le
   <body> comme point d'accroche, sans plus rien declarer. */

/* ============================================================ nos solutions ==
   Entrée vers Services, pas son résumé. À gauche, un sommaire typographique
   des deux métiers ; à droite, une seule photographie en grand, propre à
   l'accueil, dans la marie-louise commune (.cadre). Aucune image du
   sélecteur de Services, aucune vignette, aucune carte.
   ============================================================================ */

.solutions { padding-block: clamp(72px, 8vw, 124px) var(--section-y); }

.solutions__grid {
  display: grid;
  grid-template-columns: var(--split-b) var(--split-a);
  gap: var(--split-gap);
  align-items: center;
}

/* La photo reste dans la grille : elle courait jusqu'au bord de l'écran, ce
   qu'un cadre ne permet pas (il y aurait été coupé). Elle s'arrête sur le
   même bord droit que tout le contenu de la page. */
.solutions__scene { position: relative; }
.scene__large { overflow: hidden; }
.scene__large img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 40% 40%;
  filter: grayscale(.1) contrast(1.03);
}
.solutions__text h2 { max-width: 15ch; }
.solutions__lead {
  margin-top: clamp(18px, 2vw, 26px);
  max-width: 40ch;
  color: var(--ink-lead);
  font-size: var(--t-lead);
  line-height: 1.42;
}

/* Le sommaire : une ligne par métier. Le nom au niveau sous-titre, ce que
   la page de détail tranche en dessous, la flèche en bout de ligne. */
.entrees {
  list-style: none;
  margin: clamp(30px, 3.4vw, 46px) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
}
.entree {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 20px;
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.entree::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--sapin);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--e-trace);
}
.entree::after {
  content: "\2192";
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--sapin);
  transition: transform .3s var(--e-titre);
}
.entree__t {
  font-family: var(--f-display);
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.014em;
  transition: color .2s ease;
}
.entree__d {
  margin-top: 4px;
  font-size: 1rem;
  color: var(--ink-soft);
}
.entree:hover::before,
.entree:focus-visible::before { transform: scaleX(1); }
.entree:hover .entree__t,
.entree:focus-visible .entree__t { color: var(--sapin); }
.entree:hover::after,
.entree:focus-visible::after { transform: translateX(6px); }

/* Lien de suite, commun aux sections de l'accueil : le soulignement se trace
   de gauche à droite, comme dans la navigation. */
.lien-suite { margin-top: clamp(24px, 2.6vw, 34px); }
.lien-suite a {
  font-family: var(--f-display);
  font-size: 1.04rem;
  font-weight: 500;
  color: var(--sapin);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size 420ms var(--e-trace);
}
.lien-suite a::after {
  content: "\00A0\2192";
  transition: margin-left .3s var(--e-titre);
}
.lien-suite a:hover,
.lien-suite a:focus-visible { background-size: 100% 1px; }
.lien-suite a:hover::after { margin-left: 5px; }

@media (max-width: 900px) {
  .solutions__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 8vw, 56px); }
}

@media (prefers-reduced-motion: reduce) {
  .entree::before,
  .entree::after,
  .lien-suite a,
  .lien-suite a::after { transition: none; }
}

/* -------------------------------------------------------------- méthode -- */

.methode {
  background: var(--ivory);
  padding-block: var(--section-y);
}

.methode__head { max-width: 74ch; }
.methode__head h2 {
  font-size: clamp(1.85rem, 3.1vw, 2.85rem);
  letter-spacing: -.02em;
}
.methode__lead {
  margin-top: 24px;
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}

.index {
  list-style: none;
  margin: clamp(48px, 5.5vw, 84px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 6vw, 108px);
}
.index li {
  border-top: 1px solid rgba(22, 35, 47, .2);
  padding: 26px 0 34px;
}
.index h3 { font-size: 1.16rem; letter-spacing: 0; }
.index p { margin-top: 12px; font-size: .99rem; color: var(--ink-soft); max-width: 48ch; }

.methode__foot {
  margin-top: clamp(28px, 3vw, 44px);
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.4vw, 1.32rem);
  color: var(--sapin);
  max-width: 40ch;
  line-height: 1.45;
}

/* --------------------------------------------- manière de travailler -- */

/* La bascule de la page : la thèse passe sur le bleu nuit du site, au milieu
   de deux sections claires. La crête du logo, en trait vert pâle, court au
   pied de la bande : la seule évocation du relief sur l'accueil. */
.approche {
  background-color: var(--nuit);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20190'%20preserveAspectRatio='none'%3E%3Cpath%20d='M%200%20153.8%20L%2012%20153%20L%2042%20144.5%20L%2060%20144.4%20L%2072%20142.3%20L%20108%20128%20L%20132%20121%20L%20186%2098.6%20L%20204%2094.3%20L%20222%2087.3%20L%20240%2090.5%20L%20258%20100.1%20L%20282%20110.5%20L%20300%20100.3%20L%20312%2095%20L%20336%2087.4%20L%20366%2071.4%20L%20384%2059.6%20L%20420%2048%20L%20456%2077.9%20L%20486%2097.4%20L%20504%20102.9%20L%20546%20120.4%20L%20552%20121%20L%20570%20115%20L%20582%20109.2%20L%20600%20103.6%20L%20642%20126.4%20L%20672%20133%20L%20684%20137.8%20L%20714%20145.8%20L%20726%20152.8%20L%20738%20156.9%20L%20762%20147%20L%20786%20143%20L%20828%20138.3%20L%20852%20131.7%20L%20888%20119%20L%20912%20104.6%20L%20930%2097.4%20L%20936%2097.9%20L%20954%20107.2%20L%20972%20113.3%20L%20996%20118.3%20L%201014%20111.8%20L%201050%2092.5%20L%201056%2090.7%20L%201074%2090%20L%201092%2081.5%20L%201110%2077.1%20L%201146%2063.4%20L%201152%2063%20L%201170%2072.8%20L%201206%2097.2%20L%201224%20103.2%20L%201260%20110.6%20L%201290%20126%20L%201296%20127.8%20L%201308%20126.7%20L%201350%20111.8%20L%201374%20126.4%20L%201386%20129.7%20L%201398%20129.7%20L%201422%20137.9%20L%201434%20144.1%20L%201476%20149.7%20L%201500%20159.1%20L%201530%20161.1%20L%201536%20162.1%20L%201542%20164.9%20L%201566%20169.7%20L%201584%20168.2%20L%201596%20170.3'%20fill='none'%20stroke='%23B4D6BF'%20stroke-opacity='0.2'%20stroke-width='1.5'%20vector-effect='non-scaling-stroke'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% clamp(90px, 11vw, 160px);
  color: #fff;
  color-scheme: dark;
  padding-block: var(--section-y) calc(var(--section-y) + clamp(40px, 5vw, 80px));
}

/* Filigrane montagne : DEUX massifs issus du logo sur la largeur (et non un seul étiré),
   pour retrouver un rapport hauteur/largeur crédible, plus une crête lointaine très pâle.
   Le massif avant est rempli de la couleur de la bande : il masque la crête lointaine
   sous sa ligne, ce qui recrée la profondeur du hero. Aucune coupure, non répété. */
.mtn-bg {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20190'%20preserveAspectRatio='none'%3E%3Cpath%20d='M%200%20174%20L%20368%20174%20L%20376%20125.7%20L%20400%20119.6%20L%20424%20109.3%20L%20432%20106.7%20L%20440%20106.2%20L%20456%20108.4%20L%20480%20102.9%20L%20512%2090.7%20L%20536%2077.8%20L%20552%2072%20L%20568%2067.8%20L%20584%2068%20L%20616%2060.7%20L%20624%2060.4%20L%20632%2062.2%20L%20672%2077.7%20L%20680%2075%20L%20720%2052.2%20L%20728%2049.1%20L%20752%2040.3%20L%20784%2034.4%20L%20800%2030%20L%20824%2042.2%20L%20848%2051.1%20L%20912%2083.9%20L%20920%2086.3%20L%20960%2073.4%20L%20968%2074.8%20L%201024%2096.3%20L%201040%2099.7%20L%201072%20109.8%20L%201112%20119.2%20L%201128%20119.7%20L%201168%20126.2%20L%201176%20124.2%20L%201192%20123.2%20L%201200%20174%20L%201600%20174'%20fill='none'%20stroke='%232E4A38'%20stroke-opacity='0.055'%20stroke-width='1.4'%20vector-effect='non-scaling-stroke'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M%200%20153.8%20L%2012%20153%20L%2042%20144.5%20L%2060%20144.4%20L%2072%20142.3%20L%20108%20128%20L%20132%20121%20L%20186%2098.6%20L%20204%2094.3%20L%20222%2087.3%20L%20240%2090.5%20L%20258%20100.1%20L%20282%20110.5%20L%20300%20100.3%20L%20312%2095%20L%20336%2087.4%20L%20366%2071.4%20L%20384%2059.6%20L%20420%2048%20L%20456%2077.9%20L%20486%2097.4%20L%20504%20102.9%20L%20546%20120.4%20L%20552%20121%20L%20570%20115%20L%20582%20109.2%20L%20600%20103.6%20L%20642%20126.4%20L%20672%20133%20L%20684%20137.8%20L%20714%20145.8%20L%20726%20152.8%20L%20738%20156.9%20L%20762%20147%20L%20786%20143%20L%20828%20138.3%20L%20852%20131.7%20L%20888%20119%20L%20912%20104.6%20L%20930%2097.4%20L%20936%2097.9%20L%20954%20107.2%20L%20972%20113.3%20L%20996%20118.3%20L%201014%20111.8%20L%201050%2092.5%20L%201056%2090.7%20L%201074%2090%20L%201092%2081.5%20L%201110%2077.1%20L%201146%2063.4%20L%201152%2063%20L%201170%2072.8%20L%201206%2097.2%20L%201224%20103.2%20L%201260%20110.6%20L%201290%20126%20L%201296%20127.8%20L%201308%20126.7%20L%201350%20111.8%20L%201374%20126.4%20L%201386%20129.7%20L%201398%20129.7%20L%201422%20137.9%20L%201434%20144.1%20L%201476%20149.7%20L%201500%20159.1%20L%201530%20161.1%20L%201536%20162.1%20L%201542%20164.9%20L%201566%20169.7%20L%201584%20168.2%20L%201596%20170.3%20L%201600%20190%20L%200%20190%20Z'%20fill='%23F2EDE3'%20stroke='none'/%3E%3Cpath%20d='M%200%20153.8%20L%2012%20153%20L%2042%20144.5%20L%2060%20144.4%20L%2072%20142.3%20L%20108%20128%20L%20132%20121%20L%20186%2098.6%20L%20204%2094.3%20L%20222%2087.3%20L%20240%2090.5%20L%20258%20100.1%20L%20282%20110.5%20L%20300%20100.3%20L%20312%2095%20L%20336%2087.4%20L%20366%2071.4%20L%20384%2059.6%20L%20420%2048%20L%20456%2077.9%20L%20486%2097.4%20L%20504%20102.9%20L%20546%20120.4%20L%20552%20121%20L%20570%20115%20L%20582%20109.2%20L%20600%20103.6%20L%20642%20126.4%20L%20672%20133%20L%20684%20137.8%20L%20714%20145.8%20L%20726%20152.8%20L%20738%20156.9%20L%20762%20147%20L%20786%20143%20L%20828%20138.3%20L%20852%20131.7%20L%20888%20119%20L%20912%20104.6%20L%20930%2097.4%20L%20936%2097.9%20L%20954%20107.2%20L%20972%20113.3%20L%20996%20118.3%20L%201014%20111.8%20L%201050%2092.5%20L%201056%2090.7%20L%201074%2090%20L%201092%2081.5%20L%201110%2077.1%20L%201146%2063.4%20L%201152%2063%20L%201170%2072.8%20L%201206%2097.2%20L%201224%20103.2%20L%201260%20110.6%20L%201290%20126%20L%201296%20127.8%20L%201308%20126.7%20L%201350%20111.8%20L%201374%20126.4%20L%201386%20129.7%20L%201398%20129.7%20L%201422%20137.9%20L%201434%20144.1%20L%201476%20149.7%20L%201500%20159.1%20L%201530%20161.1%20L%201536%20162.1%20L%201542%20164.9%20L%201566%20169.7%20L%201584%20168.2%20L%201596%20170.3'%20fill='none'%20stroke='%232E4A38'%20stroke-opacity='0.11'%20stroke-width='1.5'%20vector-effect='non-scaling-stroke'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% clamp(104px, 13.5vw, 190px);
}
/* Pleine largeur : la thèse est un message court qui doit peser. Elle garde
   la taille commune des H2 ; sa seconde moitié, en graisse normale et en
   vert pâle, lui donne sa voix sans la grossir. Au pied, sur un filet, la
   seule phrase de détail et la passerelle vers la méthode. */
.approche h2 { color: #fff; }
.approche h2 span { display: block; font-weight: 400; }
.approche__pied {
  margin-top: clamp(40px, 4.6vw, 64px);
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px clamp(32px, 5vw, 80px);
}
.approche__pied > p:first-child { max-width: 60ch; color: rgba(255, 255, 255, .78); }
.approche__pied .lien-suite { margin-top: 0; }
.approche .lien-suite a { color: #B4D6BF; }

/* --------------------------------------------------------- réalisations -- */

/* Aperçu de la page Réalisations : le titre à gauche, la phrase et le lien
   à droite, sur la même ligne de tête,
   puis une carte par projet sur toute la largeur. Les cartes donnent l'idée
   des chantiers sans les raconter : c'est la page Réalisations qui montre
   les photos en grand. Leur traitement (planche, cartel au survol) est
   décrit avec les photographies, dans premium.css.
   Fond papier, comme le reste de l'accueil : la section s'intègre au lieu de
   se détacher en bloc de couleur. */
.apercu { padding-block: clamp(64px, 7vw, 108px); }
.sep--accueil { padding-top: 0; }
.sep--accueil + .entreprise { padding-top: clamp(64px, 7vw, 108px); }
.apercu__grid {
  display: grid;
  gap: clamp(36px, 4.2vw, 60px);
}
.apercu__texte {
  display: grid;
  grid-template-columns: var(--split-a) var(--split-b);
  column-gap: var(--split-gap);
  align-items: start;
}
.apercu__texte h2 { grid-row: 1 / span 2; }
.apercu__lead {
  max-width: 40ch;
  font-size: var(--t-lead);
  line-height: 1.42;
  color: var(--ink-lead);
}
.apercu__action { margin-top: clamp(22px, 2.4vw, 30px); }
.pcartes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  list-style: none;
}
@media (max-width: 900px) {
  .apercu__grid { gap: clamp(28px, 6vw, 40px); }
  .apercu__texte { grid-template-columns: minmax(0, 1fr); }
  .apercu__texte h2 { grid-row: auto; }
  .apercu__lead { margin-top: clamp(18px, 2vw, 26px); }
}

/* ----------------------------------------------------------- entreprise -- */

.entreprise { padding-block: var(--section-y); }

/* Aucun portrait : les deux noms, composés comme sur la page Entreprise
   (prénom plein, nom en graisse normale, filet-reliure sapin), tiennent le
   rôle de l'image. Même poids pour les deux. */
.entreprise__grid {
  display: grid;
  grid-template-columns: var(--split-b) var(--split-a);
  gap: var(--split-gap);
  align-items: center;
}
.entreprise h2 { font-size: var(--t-section); }
.entreprise__lead {
  margin-top: clamp(18px, 2vw, 26px);
  max-width: 36ch;
  font-size: var(--t-lead);
  line-height: 1.42;
  color: var(--ink-lead);
}

.entreprise__noms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.entreprise__noms li {
  border-left: 3px solid var(--sapin);
  padding-left: clamp(18px, 2vw, 28px);
}
.entreprise__nom {
  display: block;
  font-family: var(--f-display);
  /* Un nom n'est pas un titre de section : il reste sous le H2, avec la
     même taille qu'en page Entreprise. */
  font-size: clamp(1.7rem, 2.3vw, 2.05rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.034em;
}
.entreprise__nom span { display: block; font-weight: 400; }
.entreprise__role {
  display: block;
  margin-top: 14px;
  font-size: .94rem;
  letter-spacing: .02em;
  color: var(--ink-mute);
}

@media (max-width: 900px) {
  .entreprise__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 7vw, 52px); }
}
@media (max-width: 560px) {
  .entreprise__noms { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* La section tenait le texte à gauche et le portrait placeholder de Léo à
   droite (.entreprise__grid, .entreprise__portraits, .pf*) : l'ensemble est
   retiré avec le portrait lui-même, qui ne peut pas représenter les deux
   associés. Le bloc texte n'a plus besoin de grille. */

.entreprise__cols {
  margin-top: clamp(40px, 4.6vw, 68px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 96px);
}
.entreprise__cols p { color: var(--ink-soft); max-width: 56ch; }

.founders {
  margin-top: clamp(46px, 5.4vw, 82px);
  padding-top: clamp(32px, 3.4vw, 48px);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 40px;
}

.founders__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 208px));
  gap: clamp(18px, 2.6vw, 34px);
}
.founder { margin: 0; }

/* Emplacement prêt à recevoir la photo du fondateur : fond toné + crête discrète du logo. */
.founder__frame {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--rule);
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2088'%3E%3Cpath%20d='M0%2072%20L40%2050%20L66%2061%20L104%2032%20L134%2049%20L168%2029%20L200%2045'%20fill='none'%20stroke='%232E4A38'%20stroke-opacity='0.14'%20stroke-width='2'/%3E%3C/svg%3E") center bottom / 100% auto no-repeat,
    linear-gradient(168deg, #F7F2E9 0%, #ECE5D8 100%);
}

.founder__name {
  margin-top: 14px;
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 1.35vw, 1.24rem);
  letter-spacing: -.01em;
  color: var(--ink);
}

.founders__mark {
  font-family: var(--f-display);
  font-size: .92rem;
  letter-spacing: .3em;
  color: var(--sapin);
  padding-bottom: 6px;
}

/* ---------------------------------------------------------------- étude -- */

.etude {
  background: var(--nuit);
  color: #fff;
  color-scheme: dark;
  padding-block: clamp(52px, 6.2vw, 92px);
}

.etude__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(26px, 4vw, 60px);
}

.etude__text { max-width: 52ch; }
.etude__text h2 { font-size: var(--t-section); }
.etude__text p {
  margin-top: 18px;
  color: rgba(255, 255, 255, .74);
}

.etude__action {
  flex-shrink: 0;
  display: grid;
  gap: 14px;
  justify-items: start;
}
.etude__action .btn { height: 52px; padding-inline: 34px; }
.etude__note { font-size: var(--t-small); color: rgba(255, 255, 255, .56); }

/* ------------------------------------------------------------ pied de page -- */

.foot {
  background: var(--nuit);
  color: #fff;
  padding-top: clamp(56px, 6vw, 88px);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 4vw, 64px);
  padding-bottom: clamp(48px, 5vw, 76px);
}

/* Le nom en texte, comme sur le logo : AURA dans la couleur du fond de
   lecture (ici blanc), LP en vert. Le vert du logo, trop sombre sur le bleu
   nuit, est éclairci d'un cran pour garder le même contraste. */
.foot__mark {
  display: block;
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .26em;
  color: #fff;
}
.foot__mark span { color: #8DBB9C; }
.foot__brand p {
  margin-top: 18px;
  max-width: 30ch;
  font-size: .95rem;
  color: rgba(255, 255, 255, .62);
}

/* coordonnées : le téléphone (numéro provisoire, voir script.js) ; les réseaux
   attendent leurs vraies adresses */
.foot__contact { margin-top: clamp(24px, 2.6vw, 32px); }

.foot__phone {
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.foot__ct-label {
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.foot__tel {
  font-size: .98rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
}
.foot__tel[href]:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.foot__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.foot__soc {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  color: rgba(255, 255, 255, .88);
}
.foot__soc svg { flex: 0 0 auto; opacity: .82; }
.foot__soc-name { display: inline-flex; align-items: baseline; gap: 8px; }

/* libellé provisoire « à renseigner » : discret, sans jamais ressembler à un lien */
.foot__todo {
  font-size: .78rem;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .45);
}

.foot h2 {
  font-size: .89rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
  letter-spacing: 0;
  margin-bottom: 16px;
}
.foot nav a {
  display: block;
  padding: 6px 0;
  font-size: .97rem;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  text-underline-offset: 4px;
}
.foot nav a:hover { color: #fff; text-decoration: underline; }

.foot__zone p { font-size: .97rem; color: rgba(255, 255, 255, .88); max-width: 22ch; }

.foot__bar {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 26px 30px;
  font-size: .87rem;
  color: rgba(255, 255, 255, .5);
}

/* =============================================================== mouvement ==
   Aucune règle de ce bloc ne masque quoi que ce soit par elle-même : l'état
   de départ vit dans « .is-wait », posée par script.js et uniquement sur les
   éléments encore hors de l'écran. Sans JavaScript, en mouvement réduit, ou
   si le script échoue, la page est complète d'emblée.

   Sept familles, choisies selon ce qui est révélé. On ne fait pas apparaître
   une photographie comme on fait apparaître un titre : c'est ce qui évite le
   même fondu vers le haut répété d'un bout à l'autre du site.
   ========================================================================== */

/* Réglage par défaut, immédiatement redéfini famille par famille : chaque
   geste a sa durée et sa courbe, selon le poids de ce qu'il révèle. C'est le
   point qui manquait — les neuf familles partageaient auparavant 0,5 s /
   0,62 s / 0,8 s et la même courbe, si bien qu'un bandeau pleine largeur et
   une étiquette de quatre mots arrivaient au même tempo. */
[data-anim] {
  transition:
    opacity var(--d, 520ms) var(--e, var(--e-titre)),
    transform var(--d, 520ms) var(--e, var(--e-titre)),
    clip-path var(--d, 520ms) var(--e, var(--e-titre));
}
/* une fois joué, on relâche la couche composite */
[data-anim].is-done { transition: none; will-change: auto; }

/* le temps de poser l'état de départ, aucune transition ne doit courir */
.is-prep,
.is-prep * { transition: none !important; }

/* 1 — photographie : volet qui s'ouvre vers le haut, sans fondu.
       Grand visuel, donc temps long et courbe très amortie. */
[data-anim="wipe-up"] { --d: var(--d-matiere); --e: var(--e-matiere); clip-path: inset(0 0 0 0); }
[data-anim="wipe-up"].is-wait { clip-path: inset(0 0 100% 0); }

/* 2 — photographie, variante directionnelle : le volet balaie sur le côté.
       Sert à ne pas répéter le même geste sur deux images voisines. */
[data-anim="wipe-left"]  { --d: var(--d-matiere); --e: var(--e-matiere); clip-path: inset(0 0 0 0); }
[data-anim="wipe-left"].is-wait  { clip-path: inset(0 100% 0 0); }
[data-anim="wipe-right"] { --d: var(--d-matiere); --e: var(--e-matiere); clip-path: inset(0 0 0 0); }
[data-anim="wipe-right"].is-wait { clip-path: inset(0 0 0 100%); }

/* 3 — titre : révélation typographique. Le texte monte derrière un cache,
       sans fondu, ce qui donne une lecture nette plutôt qu'un flou.
       Départ franc, arrivée amortie : plus vif qu'une image. */
[data-anim="mask-up"] {
  --d: var(--d-titre);
  --e: var(--e-titre);
  clip-path: inset(-.35em 0 -.2em 0);
  transform: translate3d(0, 0, 0);
}
[data-anim="mask-up"].is-wait {
  clip-path: inset(105% 0 -.2em 0);
  transform: translate3d(0, .34em, 0);
}
/* une fois le titre révélé, ni cache ni couche composite ne restent posés */
[data-anim="mask-up"].is-done { clip-path: none; transform: none; }

/* 4 — texte court : montée brève, amplitude volontairement faible */
[data-anim="rise"] { --d: 460ms; --e: var(--e-titre); }
[data-anim="rise"].is-wait { opacity: 0; transform: translate3d(0, 14px, 0); }

/* 5 — bloc adossé à une image : glissement dans le sens de lecture.
       Il accompagne une image, il prend donc un temps intermédiaire. */
[data-anim="side"],
[data-anim="side-l"] { --d: 700ms; --e: var(--e-matiere); }
[data-anim="side"].is-wait   { opacity: 0; transform: translate3d(22px, 0, 0); }
[data-anim="side-l"].is-wait { opacity: 0; transform: translate3d(-22px, 0, 0); }

/* 7 — groupe : les enfants arrivent l'un après l'autre, jamais ensemble.
       Rythme d'étiquette : court et sec, cadence serrée. */
[data-anim-seq] > * {
  transition:
    opacity var(--d-label) var(--e-label),
    transform calc(var(--d-label) + 80ms) var(--e-label);
  transition-delay: calc(var(--i, 0) * 64ms);
}
[data-anim-seq].is-wait > * { opacity: 0; transform: translate3d(0, 12px, 0); }
[data-anim-seq].is-done > * { transition: none; }

/* 8 — tracé SVG : la ligne se dessine. Longueur mesurée par le script, donc
       valable quelle que soit la géométrie. */
[data-draw] [data-draw-path] {
  transition: stroke-dashoffset 1.25s var(--e-trace);
  transition-delay: calc(var(--i, 0) * 140ms);
  stroke-dashoffset: 0;
}
[data-draw].is-wait [data-draw-path] { stroke-dashoffset: var(--len, 1200px); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1180px) {
  .head__nav { gap: 20px; }
  .head__nav a { font-size: .9rem; }
}

@media (max-width: 900px) {
  :root { --head-h: 70px; }
  .head__cluster { display: none; }
  .mnav { display: block; }
  /* deux éléments seulement : le logo à gauche, le menu calé à droite (dans
     la grille à trois colonnes, il tombait dans la colonne centrale) */
  .head__in { grid-template-columns: auto 1fr; }
  .head__logo { margin-left: -4px; }
  .head__logo img { height: 39px; }

  /* le visuel passe sous le discours, en bandeau */
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 44px); }
  .hero__banner { min-height: clamp(430px, 92vw, 560px); align-items: flex-end; }
  /* La pompe à chaleur (le sujet de la photo) se situe autour de x:0.34 sur
     l'image source. En bandeau desktop, le cadrage large la laisse déjà dans
     le champ ; en portrait mobile, le recadrage vertical (cover) ne montrait
     plus que le bardage, unité hors champ. 29% ramène le sujet dans la
     fenêtre visible quelle que soit la largeur mobile. */
  /* En mobile, l'unité (bas de la photo source) passait sous le texte : la
     photo passe au-dessus, cadrée sur l'unité, et le texte se pose sur le
     bleu nuit du bandeau. On voit le métier avant de le lire. */
  .hero__banner { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__img {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 38% 50%;
  }
  .hero__veil { display: none; }
  .hero__in { padding-block: clamp(28px, 7vw, 40px) clamp(36px, 9vw, 52px); }
  .hero__title { font-size: clamp(2.25rem, 9.4vw, 2.9rem); line-height: 1.04; max-width: none; text-shadow: none; }
}

@media (max-width: 780px) {
  .index { grid-template-columns: minmax(0, 1fr); }
  .index li { padding: 24px 0 28px; }
  .index p { max-width: 60ch; }

  .entreprise__cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .founders { gap: 26px; }
  .founders__mark { padding-bottom: 0; }

  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}

@media (max-width: 560px) {
  .hero__title { letter-spacing: -.015em; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__cta .btn { width: 100%; }

  .foot nav a { padding: 9px 0; }

  .etude__action { width: 100%; justify-items: stretch; }
  .etude__action .btn { width: 100%; }

  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* --------------------------------------------------- mouvement réduit -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }


  /* Ceinture et bretelles : script.js sort avant d'avoir posé le moindre état
     de départ en mouvement réduit. Si « .is-wait » arrivait malgré tout, rien
     ne resterait invisible. */
  .is-wait,
  .is-wait > *,
  .is-wait [data-draw-path] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
  }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}