/* ==========================================================================
   Nonem Media Group : maquette one-page
   Charte : Raleway Black (titres), Barlow Semi Condensed (texte),
   jaune #FFC832, anthracite #323232, gris #7D7D7D, ocre #B38812 en touche.
   ========================================================================== */

/* ---------- Polices auto-hébergées ---------- */
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/raleway-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../assets/fonts/barlow-semi-condensed-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../assets/fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../assets/fonts/barlow-semi-condensed-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --jaune: #FFC832;
  --anthracite: #323232;
  --gris: #7D7D7D;          /* grands textes et éléments décoratifs uniquement */
  --gris-texte: #666666;    /* texte secondaire sur fond clair (AA) */
  --gris-clair: #ABABAB;    /* texte secondaire sur anthracite (AA) */
  --gris-filet: #DCDCD8;
  --gris-champ: #8A8A8A;
  --ocre: #B38812;
  --blanc: #FFFFFF;
  --fond-alt: #F6F6F4;

  --police-titre: "Raleway", "Arial Black", sans-serif;
  --police-texte: "Barlow Semi Condensed", "Arial Narrow", sans-serif;

  /* Angle unique des plans diagonaux, mesuré sur le guide de style */
  --angle: -15deg;
  --tan: 0.2679;            /* tan(15°) */
  --coupe: clamp(48px, 7vw, 128px);

  --gouttiere: clamp(16px, 5vw, 80px);
  --largeur: 1440px;
  --section: clamp(88px, 11vw, 176px);
  --entete-h: 76px;

  --sortie: cubic-bezier(.16, 1, .3, 1);
  --balayage: cubic-bezier(.65, 0, .35, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 16px);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--anthracite);
  font-family: var(--police-texte);
  font-weight: 300;
  font-size: clamp(1.125rem, 1.05rem + .25vw, 1.25rem);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
strong { font-weight: 600; }

::selection { background: var(--jaune); color: var(--anthracite); }

:focus-visible { outline: 3px solid var(--anthracite); outline-offset: 3px; }
.sombre :focus-visible { outline-color: var(--jaune); }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.evitement {
  position: fixed;
  left: 16px;
  top: -120px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--anthracite);
  color: var(--blanc);
  font-weight: 600;
  text-decoration: none;
}
.evitement:focus { top: calc(16px + env(safe-area-inset-top)); outline-color: var(--jaune); }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-left: max(var(--gouttiere), env(safe-area-inset-left));
  padding-right: max(var(--gouttiere), env(safe-area-inset-right));
}

/* ---------- Titres et barre-curseur ---------- */
.titre {
  font-family: var(--police-titre);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: .98;
}
.titre--h2 { font-size: clamp(2.4rem, 5vw, 4.75rem); }
.titre__fin { white-space: nowrap; }

/* Jaune par défaut ; grise sur fond jaune ; jamais de la couleur du titre */
.curseur {
  display: inline-block;
  width: .09em;
  height: .84em;
  margin-left: .1em;
  vertical-align: -.07em;
  border-radius: .045em;
  background: var(--couleur-curseur, var(--jaune));
}

@keyframes clignote {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/* 3 clignotements à l'entrée, puis fixe (fill-mode none : retour à opacity 1) */
.js .titre.is-vu .curseur { animation: clignote 1s linear 3; }

/* ---------- Boutons et liens ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.6em;
  border: 0;
  border-radius: 2px;
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.bouton--sombre { background: var(--anthracite); color: var(--blanc); }
@media (hover: hover) {
  .bouton--sombre:hover { background: var(--jaune); color: var(--anthracite); }
  .assistance .bouton--sombre:hover { background: var(--blanc); }
}

.lien-souligne {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--jaune);
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}
@media (hover: hover) {
  .lien-souligne:hover { text-decoration-color: var(--anthracite); }
}

.lien-jaune {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.lien-jaune:hover, .lien-jaune:focus-visible { text-decoration-color: var(--jaune); }

/* ==========================================================================
   En-tête
   ========================================================================== */
.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  transition: transform .45s var(--sortie);
}
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(50, 50, 50, .08);
  opacity: 0;
  transition: opacity .3s;
}
.entete.is-fond::before { opacity: 1; }
.entete.is-cache { transform: translateY(-100%); }

.entete__barre {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  height: var(--entete-h);
}
.entete__logo { display: inline-flex; align-items: center; min-height: 44px; }
.entete__logo img { width: clamp(132px, 11vw, 160px); height: auto; }

.entete__nav { margin-left: auto; }
.entete__nav ul { display: flex; gap: clamp(20px, 2.4vw, 40px); list-style: none; padding: 0; }
.entete__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
}
.entete__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 3px;
  background: var(--jaune);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--sortie);
}
.entete__nav a.is-actif::after { transform: scaleX(1); }
@media (hover: hover) {
  .entete__nav a:hover::after { transform: scaleX(1); }
}
.entete__cta { min-height: 46px; }

.burger {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.burger__trait {
  position: absolute;
  left: 12px;
  width: 24px;
  height: 2px;
  background: var(--anthracite);
  transition: transform .4s var(--sortie);
}
.burger__trait:nth-of-type(2) { top: 19px; }
.burger__trait:nth-of-type(3) { top: 27px; }
.burger[aria-expanded="true"] .burger__trait:nth-of-type(2) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait:nth-of-type(3) { transform: translateY(-4px) rotate(-45deg); }

/* Menu mobile plein écran */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 45;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: calc(var(--entete-h) + env(safe-area-inset-top) + 16px)
           max(24px, env(safe-area-inset-right))
           calc(32px + env(safe-area-inset-bottom))
           max(24px, env(safe-area-inset-left));
  overflow: hidden auto;
  overscroll-behavior: contain;
  background: var(--blanc);
  opacity: 0;
  transition: opacity .3s;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile.is-ouvert { opacity: 1; }
.menu-mobile::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -38vw;
  bottom: -8vh;
  width: 72vw;
  height: 62vh;
  background: var(--jaune);
  transform: skewX(var(--angle)) translateX(30%);
  transition: transform .7s var(--sortie);
}
.menu-mobile.is-ouvert::before { transform: skewX(var(--angle)); }

.menu-mobile__liens { list-style: none; padding: 0; }
.menu-mobile__liens li {
  opacity: 0;
  transform: translateY(28px);
  transition: transform .6s var(--sortie), opacity .6s var(--sortie);
  transition-delay: calc(var(--i) * 60ms + 80ms);
}
.menu-mobile.is-ouvert .menu-mobile__liens li { opacity: 1; transform: none; }
.menu-mobile__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: clamp(2.4rem, 11vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-decoration: none;
}
.menu-mobile__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
}
.menu-mobile__contact a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

html.menu-ouvert { overflow: hidden; }
html.menu-ouvert .entete::before { opacity: 0; }

/* ==========================================================================
   1. Accueil
   ========================================================================== */
.accueil {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--entete-h) + env(safe-area-inset-top) + 24px);
  padding-bottom: clamp(48px, 6vw, 96px);
  overflow: clip;
}
.accueil__grille {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
}
.accueil__accroche {
  margin-bottom: clamp(20px, 2vw, 32px);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--gris-texte);
}
.accueil__titre { font-size: clamp(3rem, 6.5vw, 7rem); line-height: .95; }
/* L'accroche fait partie du H1 (mots-clés) mais garde son style de petit texte */
.accueil__titre .accueil__accroche {
  display: block;
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Lignes du H1 : chaque ligne monte derrière un masque */
.ligne { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ligne__in { display: inline-block; }

.accueil__sous {
  max-width: 34em;
  margin-top: clamp(24px, 2.4vw, 40px);
  font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem);
}
.accueil__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 36px;
  margin-top: clamp(28px, 3vw, 48px);
}

/* Composition de lamelles diagonales : la transposition des couvertures du guide.
   Chaque lamelle est un parallélogramme (clip-path) dont le décalage horizontal
   vaut hauteur × tan(15°) ; les unités cq se rapportent au cadre de la composition.
   --u = abscisse où le bord gauche prolongé croise le haut du cadre : les bords étant
   tous parallèles, des --u espacés de « largeur + écart » ne se chevauchent jamais. */
.accueil__compo {
  position: relative;
  height: min(76svh, 760px);
  min-height: 460px;
  container-type: size;
}
.lamelle {
  --hh: calc(var(--h) * 1cqh);
  --o: calc(var(--hh) * var(--tan));
  --forme: polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%);
  position: absolute;
  left: calc(var(--u) * 1cqw - (var(--y) + var(--h)) * 1cqh * var(--tan));
  top: calc(var(--y) * 1cqh);
  width: calc(var(--bw) * 1cqw + var(--o));
  height: var(--hh);
  overflow: hidden;
  background: var(--anthracite);
  clip-path: var(--forme);
}
.lamelle img, .lamelle video { width: 100%; height: 100%; object-fit: cover; }
.lamelle--jaune { background: var(--jaune); }
.lamelle--sombre { background: var(--anthracite); }

/* écart constant de 2,4 cqw entre deux lamelles voisines */
.lamelle--1 { --u: 18;   --y: 32; --h: 48; --bw: 8;  }  /* jaune */
.lamelle--2 { --u: 28.4; --y: 3;  --h: 60; --bw: 22; }  /* pizza */
.lamelle--3 { --u: 52.8; --y: 21; --h: 75; --bw: 18; }  /* vidéo */
.lamelle--4 { --u: 73.2; --y: -6; --h: 50; --bw: 6;  }  /* anthracite */
.lamelle--6 { --u: 81.6; --y: 7;  --h: 42; --bw: 22; }  /* aquarium */
.lamelle--5 { --u: 106;  --y: 50; --h: 46; --bw: 24; }  /* gîte */

.lamelle--2 img { object-position: 50% 70%; }
.lamelle--6 img { object-position: 30% 50%; }

/* ---------- Séquence d'ouverture (le seul moment orchestré) ---------- */
.js .ligne__in { transform: translateY(112%); }
.js .accueil__fondu { opacity: 0; }
.js .accueil__titre .curseur { opacity: 0; }
.js .lamelle { clip-path: polygon(var(--o) 0, var(--o) 0, 0 100%, 0 100%); }

.is-pret .ligne__in {
  transform: none;
  transition: transform .8s var(--sortie) calc(var(--i) * 90ms);
}
.is-pret .accueil__fondu { opacity: 1; transition: opacity .7s var(--sortie) .55s; }
.is-pret .lamelle {
  clip-path: var(--forme);
  transition: clip-path .75s var(--balayage) calc(var(--i) * 110ms + 250ms);
}
/* Le curseur du H1 apparaît en dernier (1,4 s) puis clignote lentement en continu */
@keyframes clignote-lent {
  0%, 59.9% { opacity: 1; }
  60%, 100% { opacity: 0; }
}
.is-pret .accueil__titre .curseur { animation: clignote-lent 1.8s linear 1.4s infinite; }

/* ==========================================================================
   2. Partenaires
   ========================================================================== */
.partenaires { padding-block: clamp(40px, 5vw, 72px); }
.partenaires__titre {
  margin-bottom: clamp(20px, 2.4vw, 32px);
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--gris-texte);
}
.defile { overflow: hidden; }
.defile__piste { display: flex; justify-content: center; }
.defile__serie {
  --ecart: clamp(40px, 5vw, 80px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px var(--ecart);
  padding-inline: var(--gouttiere);
}
.defile__serie a { display: flex; align-items: center; min-width: 44px; min-height: 72px; }
.defile__serie img {
  width: auto;
  height: var(--h, 48px);
  max-width: none;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .3s;
}
/* River Aqua est un logo blanc : inversé sur fond clair, teinte d'origine rétablie */
.defile__serie img.logo-inverse { filter: invert(1) hue-rotate(180deg) grayscale(1); }
.defile__serie a:hover img, .defile__serie a:focus-visible img { filter: none; opacity: 1; }
.defile__serie a:hover img.logo-inverse,
.defile__serie a:focus-visible img.logo-inverse { filter: invert(1) hue-rotate(180deg); }

/* Version animée, activée par JS (série clonée, décalage mesuré en pixels) */
.defile.is-anime .defile__piste {
  justify-content: flex-start;
  width: max-content;
  animation: defile var(--duree, 40s) linear infinite;
}
.defile.is-anime .defile__serie { flex-wrap: nowrap; padding-inline: 0 var(--ecart); }
.defile.is-anime:hover .defile__piste,
.defile.is-anime:focus-within .defile__piste { animation-play-state: paused; }
@keyframes defile {
  to { transform: translate3d(calc(-1 * var(--distance, 0px)), 0, 0); }
}

/* ==========================================================================
   3. L'agence
   ========================================================================== */
.agence {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--section);
}
/* Plan diagonal jaune fin qui traverse le bord droit */
.agence::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -4%;
  bottom: -4%;
  right: -3.5vw;
  width: 10vw;
  background: var(--jaune);
  transform: skewX(var(--angle));
}
.manifeste {
  max-width: 21em;
  margin-top: clamp(36px, 4.5vw, 72px);
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.005em;
}
.mot { transition: opacity .35s linear; }
.manifeste.is-pret .mot { opacity: .2; }
.manifeste.is-pret .mot.is-lu { opacity: 1; }

.agence__bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 112px);
  align-items: start;
  margin-top: clamp(56px, 7vw, 112px);
  padding-right: 8vw;
}
.agence__texte { max-width: 32em; color: var(--anthracite); }

.chiffres {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 24px;
}
.chiffre { display: flex; flex-direction: column; gap: 10px; }
.chiffre__valeur {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: clamp(3.25rem, 6vw, 6.25rem);
  line-height: .9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chiffre__plus { color: var(--jaune); }
.chiffre__label { font-weight: 600; font-size: 1.0625rem; color: var(--gris-texte); }

/* ==========================================================================
   4. Nos savoir-faire
   ========================================================================== */
.savoir { position: relative; padding-block: 0 var(--section); }
.savoir__tete {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 80px);
}
.savoir__intro { max-width: 26em; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); }

.metiers { list-style: none; padding: 0; border-bottom: 1px solid var(--gris-filet); }
.metier {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 12px 48px;
  align-items: center;
  padding-block: clamp(28px, 3.2vw, 48px);
  border-top: 1px solid var(--gris-filet);
}
.metier::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 3px;
  background: var(--jaune);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--balayage);
}
.metier__nom {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: transform .5s var(--sortie);
}
.metier__texte { max-width: 30em; color: var(--gris-texte); }
.curseur--survol { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .metier:hover::before { transform: scaleX(1); }
  .metier:hover .metier__nom { transform: translateX(1rem); }
  .metier:hover .curseur--survol { opacity: 1; }
}

/* Image découpée en parallélogramme qui suit le curseur (desktop, pointeur fin) */
.flottant {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  width: clamp(240px, 21vw, 330px);
  aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--sortie), visibility 0s .3s;
}
.flottant.is-visible { opacity: 1; visibility: visible; transition: opacity .3s var(--sortie); }
.flottant__cadre {
  position: relative;
  width: 100%;
  height: 100%;
  /* décalage = hauteur × tan(15°) = 0,75 × 0,268 ≈ 20 % de la largeur */
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
  transform: scale(.88);
  transition: transform .5s var(--sortie);
  background: var(--anthracite);
}
.flottant.is-visible .flottant__cadre { transform: none; }
.flottant img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s var(--sortie);
}
.flottant img.is-actif { opacity: 1; }

/* ==========================================================================
   Sites web & e-commerce (plateformes)
   ========================================================================== */
.plateformes { padding-block: 0 var(--section); }
.plateformes__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px clamp(20px, 2.4vw, 40px);
  list-style: none;
  padding: 0;
}
.plateforme { padding-top: 22px; border-top: 3px solid var(--jaune); }
.plateforme__nom {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.plateforme__role { margin-top: 8px; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.plateforme__texte { margin-top: 12px; font-size: 1.0625rem; line-height: 1.55; color: var(--gris-texte); }

/* ==========================================================================
   Questions fréquentes
   ========================================================================== */
.faq { padding-block: var(--section); }
.faq__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 32px clamp(40px, 6vw, 112px);
  align-items: start;
}
.faq__liste { border-bottom: 1px solid var(--gris-filet); }
.faq__item { border-top: 1px solid var(--gris-filet); }
.faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 20px 52px 20px 0;
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem);
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Croix jaune qui pivote en « × » à l'ouverture */
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 18px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 1px;
  background: var(--anthracite);
  transition: transform .35s var(--sortie);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::before { transform: rotate(45deg); }
.faq__item[open] summary::after { transform: rotate(135deg); }
@media (hover: hover) {
  .faq__item summary:hover { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; text-underline-offset: 6px; }
}
.faq__item p { max-width: 42em; padding: 0 52px 24px 0; color: var(--gris-texte); }

/* ==========================================================================
   5. Nos réalisations : le mur de projets
   ========================================================================== */
.realisations {
  position: relative;
  z-index: 1;
  padding-block: calc(var(--section) + var(--coupe) * .6) calc(var(--section) * .7 + var(--coupe));
  background: var(--anthracite);
  color: var(--blanc);
  clip-path: polygon(0 var(--coupe), 100% 0, 100% calc(100% - var(--coupe)), 0 100%);
}
.realisations__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  margin-bottom: clamp(48px, 5vw, 88px);
}
.realisations__sous { margin-top: 18px; color: var(--gris-clair); }

.filtres { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 2vw, 32px); }
.filtre {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--gris-clair);
  white-space: nowrap;
  cursor: pointer;
}
.filtre sup { margin-left: .2em; font-size: .62em; line-height: 0; }
.filtre::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1.05em;
  margin-left: .35em;
  border-radius: 1px;
  background: var(--jaune);
  opacity: 0;
}
.filtre[aria-pressed="true"] { color: var(--blanc); }
.filtre[aria-pressed="true"]::after { opacity: 1; }
@media (hover: hover) {
  .filtre:hover { color: var(--blanc); }
}

/* Toutes les vignettes gardent le format des captures (16/10) : aucun gros recadrage.
   Seule la carte XL (2 × 2) est un peu plus carrée. Les tailles sont calculées en JS
   (data-f4 à 4 colonnes, data-f2 à 2 colonnes) pour qu'aucune case ne reste vide. */
.mur {
  --rangee: clamp(200px, 18vw, 290px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(28px, 2.6vw, 44px) clamp(16px, 1.8vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Grand plan diagonal jaune qui déborde derrière la carte XL */
.mur::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -4vw;
  top: -48px;
  width: 15%;
  height: calc(var(--rangee) * 1.7);
  background: var(--jaune);
  transform: skewX(var(--angle));
  pointer-events: none;
  transition: opacity .4s;
}
.mur.is-filtre::before { opacity: 0; }

.projet { position: relative; z-index: 1; min-width: 0; }
.projet[hidden] { display: none; }
.projet:first-child, .projet[data-f4="xl"] { grid-column: span 2; grid-row: span 2; }
.projet[data-f4="m"] { grid-column: auto; grid-row: auto; }

.projet__carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.projet__media {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #262626;
  container-type: size;
}
/* XL : au moins le format 16/10, étirée un peu si les deux rangées voisines sont plus hautes */
.projet:first-child .projet__media, .projet[data-f4="xl"] .projet__media { flex: 1 0 auto; aspect-ratio: 16 / 10; }
.projet[data-f4="m"] .projet__media { flex: none; aspect-ratio: 16 / 10; }
.projet__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .8s var(--sortie);
}
.projet__titre {
  margin-top: 14px;
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: clamp(1.125rem, 1.3vw, 1.375rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.projet__desc { margin-top: 4px; font-size: 1rem; line-height: 1.4; color: var(--gris-clair); }
.projet:first-child .projet__titre, .projet[data-f4="xl"] .projet__titre { font-size: clamp(1.375rem, 1.8vw, 1.875rem); }
.projet[data-f4="m"] .projet__titre { font-size: clamp(1.125rem, 1.3vw, 1.375rem); }

/* Survol : un plan jaune diagonal balaie l'image et couvre ~40 % */
.projet__voile {
  --o: calc(100cqh * var(--tan) / 2);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 18px 22px;
  background: var(--jaune);
  color: var(--anthracite);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.2;
  white-space: nowrap;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path .55s var(--balayage);
}
.projet__badge { display: none; }

@media (hover: hover) and (pointer: fine) {
  .projet__carte:hover .projet__voile,
  .projet__carte:focus-visible .projet__voile {
    clip-path: polygon(0 0, calc(40% + var(--o)) 0, calc(40% - var(--o)) 100%, 0 100%);
  }
  .projet__carte:hover .projet__media img { transform: scale(1.04); }
}
@media (hover: none), (pointer: coarse) {
  .projet__voile { display: none; }
  .projet__badge {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 7px 16px 7px 24px;
    background: var(--jaune);
    color: var(--anthracite);
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.3;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* Révélation au scroll : balayage diagonal, en cascade, une seule fois.
   Le clip-path est sur la carte intérieure : IntersectionObserver tient compte
   du clip-path de l'élément observé, qui doit donc rester entier. */
.mur.js-revele .projet:not(.is-revele) .projet__carte { clip-path: polygon(0 0, 0 0, -25% 100%, 0 100%); }
.mur.js-revele .projet.is-revele:not(.is-fini) .projet__carte {
  clip-path: polygon(0 0, 125% 0, 100% 100%, 0 100%);
  transition: clip-path .9s var(--balayage) var(--delai, 0ms);
}

/* ---------- Étude de cas à la une (sous le mur) ---------- */
.une {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 32px clamp(32px, 5vw, 88px);
  align-items: center;
  margin-top: clamp(56px, 6vw, 104px);
  padding-top: clamp(40px, 4.5vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.une__visuel { display: block; overflow: hidden; }
.une__visuel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .8s var(--sortie);
}
.une__surtitre { font-weight: 800; font-size: .9375rem; letter-spacing: .08em; color: var(--gris-clair); }
.une__surtitre::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 3px;
  margin-right: 12px;
  vertical-align: .3em;
  background: var(--jaune);
}
.une__titre {
  margin-top: 12px;
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: .98;
  letter-spacing: -0.02em;
}
.une__desc { max-width: 28em; margin-top: 18px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: #E4E4E4; }
.une .bouton { margin-top: clamp(24px, 2.6vw, 36px); }
.bouton--jaune { background: var(--jaune); color: var(--anthracite); }
@media (hover: hover) {
  .bouton--jaune:hover { background: var(--blanc); }
  .une:has(.bouton:hover) .une__visuel img, .une__visuel:hover img { transform: scale(1.03); }
}
@media (max-width: 999px) {
  .une { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .une__visuel img { transition: none; }
}

/* ==========================================================================
   6. Assistance web
   ========================================================================== */
.assistance {
  position: relative;
  margin-top: calc(-1 * var(--coupe));
  padding-top: calc(var(--coupe) + var(--section));
  padding-bottom: var(--section);
  overflow: clip;
  background: var(--jaune);
  clip-path: polygon(0 var(--coupe), 100% 0, 100% 100%, 0 100%);
  --couleur-curseur: var(--gris);
}
.assistance__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.assistance__phrase {
  margin-top: clamp(24px, 2.6vw, 40px);
  font-weight: 800;
  font-size: clamp(1.625rem, 2.6vw, 2.5rem);
  line-height: 1.15;
}
.assistance__para { max-width: 32em; margin-top: 20px; margin-bottom: clamp(28px, 3vw, 44px); }

/* Grand plan anthracite incliné qui sort par la droite */
.assistance__plan {
  position: relative;
  isolation: isolate;
  padding: clamp(44px, 5vw, 80px) 0 clamp(44px, 5vw, 80px) clamp(88px, 9vw, 150px);
  color: var(--blanc);
}
.assistance__plan::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: -100vw;
  background: var(--anthracite);
  transform: skewX(var(--angle));
  transform-origin: 0 50%;
}
.assistance__chiffres { display: grid; gap: clamp(24px, 3vw, 40px); }
.assistance__chiffres li { display: flex; flex-direction: column; gap: 6px; }
.assistance__n {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: clamp(2.75rem, 5vw, 5rem);
  line-height: .95;
  letter-spacing: -0.03em;
  color: var(--jaune);
}
.assistance__l { font-weight: 300; color: #E4E4E4; }

/* ==========================================================================
   7. Contact
   ========================================================================== */
.contact { padding-block: var(--section); background: var(--fond-alt); }
.contact__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 128px);
  align-items: start;
}
.contact__texte { max-width: 28em; margin-top: clamp(24px, 2.6vw, 40px); }
.contact__coord { display: grid; gap: 22px; margin-top: clamp(32px, 3.6vw, 56px); }
.contact__coord dt { font-weight: 600; font-size: 1rem; color: var(--gris-texte); }
.contact__coord dd { font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.35; overflow-wrap: anywhere; }
.contact__coord a { display: inline-block; padding-block: 6px; }

.formulaire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 32px;
  padding-top: 8px;
}
.formulaire__note { grid-column: 1 / -1; font-size: 1rem; color: var(--gris-texte); }
.champ--large { grid-column: 1 / -1; }
.champ label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 1.0625rem; }
.champ__facultatif { font-weight: 300; color: var(--gris-texte); }
.champ input,
.champ textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--gris-champ);
  border-radius: 0;
  background: transparent;
  font-size: 1.125rem;   /* 18 px : pas de zoom iOS */
  font-weight: 300;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus-visible,
.champ textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--anthracite);
  box-shadow: 0 2px 0 0 var(--anthracite);
}
.champ.is-erreur input,
.champ.is-erreur textarea { border-bottom-color: var(--ocre); box-shadow: 0 2px 0 0 var(--ocre); }
.champ.is-erreur input:focus-visible,
.champ.is-erreur textarea:focus-visible { border-bottom-color: var(--anthracite); box-shadow: 0 2px 0 0 var(--anthracite); }
.champ__erreur {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}
.champ__erreur:empty { display: none; }
.champ__erreur::before {
  content: "";
  flex: none;
  width: 4px;
  margin-block: 2px;
  background: var(--ocre);
}
.formulaire__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.formulaire__mention { flex: 1 1 16em; font-size: 1rem; line-height: 1.5; color: var(--gris-texte); }
.formulaire__mention a { color: var(--anthracite); text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.formulaire__statut:empty { display: none; }
.formulaire__statut {
  padding: 18px 22px;
  border-left: 4px solid var(--jaune);
  background: var(--blanc);
  font-weight: 600;
}

/* ==========================================================================
   9. Pied de page
   ========================================================================== */
.pied {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(96px, 11vw, 168px) 0 calc(28px + env(safe-area-inset-bottom));
  background: var(--anthracite);
  color: var(--blanc);
}
/* Grand plan jaune diagonal dans le coin supérieur droit */
.pied::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12%;
  right: -9vw;
  width: 27vw;
  height: 62%;
  background: var(--jaune);
  transform: skewX(var(--angle));
}
.pied__devise {
  font-size: clamp(2.5rem, 9vw, 9.5rem);
  line-height: .9;
  letter-spacing: -0.03em;
}
.pied__devise > span { display: block; }

.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.1fr);
  gap: 40px clamp(32px, 5vw, 80px);
  margin-top: clamp(64px, 8vw, 128px);
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.pied__marque img { width: 190px; height: auto; }
.pied__marque p { max-width: 22em; margin-top: 20px; color: #D2D2D2; }
.pied__titre { margin-bottom: 10px; font-weight: 600; font-size: 1rem; color: var(--gris-clair); }
.pied__col ul { display: grid; gap: 2px; }
.pied__col li { color: #E4E4E4; overflow-wrap: anywhere; }
.pied__col a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.pied__col a:hover, .pied__col a:focus-visible { text-decoration-color: var(--jaune); }
.pied__mentions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: clamp(48px, 6vw, 88px);
  font-size: .9375rem;
  color: var(--gris-clair);
}
.pied__mentions a { color: #E4E4E4; text-decoration-color: var(--jaune); text-underline-offset: 3px; }

/* ==========================================================================
   Page politique de confidentialité
   ========================================================================== */
.legal-tete {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(var(--entete-h) + env(safe-area-inset-top) + clamp(56px, 8vw, 120px)) 0 clamp(56px, 7vw, 104px);
}
.legal-tete::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  bottom: -10%;
  right: -4vw;
  width: 14vw;
  background: var(--jaune);
  transform: skewX(var(--angle));
}
.legal-fil { font-weight: 600; font-size: 1rem; color: var(--gris-texte); }
.legal-fil a { display: inline-flex; align-items: center; min-height: 44px; color: var(--anthracite); text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.legal-titre { margin-top: 16px; font-size: clamp(2.6rem, 6vw, 5.5rem); }
.legal-maj { margin-top: 24px; color: var(--gris-texte); }

.legal-contenu {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
  gap: clamp(40px, 6vw, 112px);
  align-items: start;
  padding-bottom: var(--section);
}
.legal-sommaire { position: sticky; top: calc(var(--entete-h) + 24px); }
.legal-sommaire p { margin-bottom: 12px; font-weight: 600; color: var(--gris-texte); font-size: 1rem; }
.legal-sommaire ol { list-style: none; padding: 0; counter-reset: s; display: grid; gap: 2px; }
.legal-sommaire li { counter-increment: s; }
.legal-sommaire a {
  display: inline-flex;
  gap: .6em;
  align-items: baseline;
  padding-block: 6px;
  font-size: 1.0625rem;
  line-height: 1.35;
  text-decoration: none;
}
.legal-sommaire a::before { content: counter(s); font-weight: 800; color: var(--gris); min-width: 1.1em; }
.legal-sommaire a:hover { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.legal-corps { max-width: 46em; }
.legal-section { padding-top: clamp(40px, 4vw, 64px); }
.legal-section:first-child { padding-top: 0; }
.legal-section h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); margin-bottom: 20px; }
.legal-section h3 { margin: 28px 0 10px; font-family: var(--police-titre); font-weight: 900; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.2; }
.legal-section p + p { margin-top: 14px; }
.legal-section ul { margin: 12px 0 14px; padding-left: 1.2em; }
.legal-section li { margin-top: 6px; }
.legal-section li::marker { color: var(--ocre); }
.legal-section a { text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal-carte { margin-top: 16px; padding: clamp(20px, 2.4vw, 32px); background: var(--fond-alt); border-left: 4px solid var(--jaune); }
.legal-carte dl { display: grid; gap: 10px; }
.legal-carte dl div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; }
.legal-carte dt { font-weight: 600; }
.legal-tableau { margin-top: 16px; overflow-x: auto; }
.legal-tableau table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 1.0625rem; line-height: 1.45; }
.legal-tableau th { text-align: left; font-weight: 600; padding: 12px 16px 12px 0; border-bottom: 2px solid var(--anthracite); }
.legal-tableau td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--gris-filet); vertical-align: top; }
.legal-droits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 16px 0 20px; }
.legal-droits div { padding: 18px 0; border-top: 1px solid var(--gris-filet); }
.legal-droits dt { font-weight: 800; }
.legal-droits dd { margin-top: 4px; }
.legal-adresse { margin-top: 16px; font-style: normal; }
.legal-retour { margin-top: clamp(48px, 5vw, 80px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
  .agence__bas { padding-right: 0; }
  .chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 999px) {
  :root { --entete-h: 68px; }

  .entete__nav, .entete__cta { display: none; }
  .burger { display: block; margin-left: auto; }

  .accueil { min-height: 0; padding-bottom: clamp(56px, 8vw, 88px); }
  .accueil__grille { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); }
  .accueil__compo { height: clamp(320px, 60vw, 560px); min-height: 0; }

  .agence::before { width: 14vw; right: -7vw; }
  .agence__bas { grid-template-columns: minmax(0, 1fr); }
  .chiffres { max-width: 36em; }

  .savoir__tete { grid-template-columns: minmax(0, 1fr); }
  .plateformes__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__grille { grid-template-columns: minmax(0, 1fr); }
  .metier { grid-template-columns: minmax(0, 1fr); }

  .mur { grid-template-columns: repeat(2, minmax(0, 1fr)); --rangee: clamp(240px, 36vw, 340px); }
  .mur::before { width: 34%; }
  .mur .projet[data-f2] { grid-column: auto; grid-row: auto; }
  .mur .projet[data-f2="xl"] { grid-column: 1 / -1; }
  .mur .projet[data-f2] .projet__media { flex: none; aspect-ratio: 16 / 10; }

  .assistance__grille { grid-template-columns: minmax(0, 1fr); }
  .assistance__plan { padding-left: clamp(64px, 12vw, 120px); margin-right: calc(-1 * var(--gouttiere)); }
  .assistance__chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .contact__grille { grid-template-columns: minmax(0, 1fr); }

  .pied::before { width: 34vw; height: 40%; }
  .pied__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pied__marque { grid-column: 1 / -1; }

  .legal-contenu { grid-template-columns: minmax(0, 1fr); }
  .legal-sommaire { position: static; }
}

@media (max-width: 639px) {
  /* Composition réduite à 4 lamelles, sous le texte, hauteur ≈ 75 % de la largeur */
  .accueil__compo { height: 62vw; }
  .lamelle--4, .lamelle--5 { display: none; }
  .lamelle--1 { --u: 14; --y: 18; --h: 66; --bw: 9;  }
  .lamelle--2 { --u: 26; --y: 0;  --h: 78; --bw: 28; }
  .lamelle--3 { --u: 57; --y: 14; --h: 86; --bw: 20; }
  .lamelle--6 { --u: 80; --y: 4;  --h: 62; --bw: 28; }

  /* Section haute et étroite : le plan reste à côté du titre pour ne pas passer sous le texte */
  .agence::before { top: -40px; bottom: auto; height: 160px; width: 20vw; right: -9vw; }
  /* Rythme resserré : la page doit rester courte au pouce */
  :root { --section: 64px; --coupe: 40px; }
  .titre--h2 { font-size: clamp(2.1rem, 9.6vw, 2.6rem); }

  .accueil { padding-top: calc(var(--entete-h) + env(safe-area-inset-top) + 12px); padding-bottom: 40px; }
  .accueil__grille { gap: 32px; }
  .accueil__accroche { margin-bottom: 14px; font-size: 1rem; }
  .accueil__titre { font-size: clamp(2.6rem, 12.4vw, 3.25rem); }
  .accueil__sous { margin-top: 18px; font-size: 1.0625rem; line-height: 1.55; }
  .accueil__actions { margin-top: 24px; gap: 8px 24px; }

  .partenaires { padding-block: 28px 16px; }
  .partenaires__titre { margin-bottom: 8px; }
  .defile__serie a { min-height: 60px; }
  .defile__serie img { height: calc(var(--h, 48px) * .8); }

  .manifeste { margin-top: 20px; font-size: 1.375rem; line-height: 1.3; }
  .agence__bas { margin-top: 32px; gap: 28px; }
  .agence__texte { font-size: 1.0625rem; }
  .chiffres { grid-template-columns: repeat(3, auto); gap: 12px; }
  .chiffre { gap: 6px; }
  .chiffre__valeur { font-size: 2.75rem; }
  .chiffre__label { font-size: .9375rem; line-height: 1.3; }

  .savoir__tete { gap: 12px; margin-bottom: 24px; }
  .savoir__intro { font-size: 1.0625rem; }
  /* Métiers en rangée à faire défiler du doigt : la carte suivante dépasse pour inviter au geste */
  .metiers {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * max(var(--gouttiere), env(safe-area-inset-left)));
    padding: 0 max(var(--gouttiere), env(safe-area-inset-left)) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
    border-bottom: 0;
  }
  .metiers::-webkit-scrollbar { display: none; }
  .metier {
    flex: 0 0 78%;
    display: block;
    padding: 20px 18px 22px;
    border-top: 3px solid var(--jaune);
    background: var(--fond-alt);
    scroll-snap-align: start;
  }
  .metier::before { display: none; }

  .plateformes__liste {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * max(var(--gouttiere), env(safe-area-inset-left)));
    padding: 0 max(var(--gouttiere), env(safe-area-inset-left)) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  .plateformes__liste::-webkit-scrollbar { display: none; }
  .plateforme { flex: 0 0 78%; padding: 20px 18px 22px; background: var(--fond-alt); scroll-snap-align: start; }
  .plateforme__nom { font-size: 1.5rem; }
  .plateforme__role, .plateforme__texte { font-size: 1rem; }

  .faq__grille { gap: 20px; }
  .faq__item summary { padding: 14px 40px 14px 0; font-size: 1.0625rem; }
  .faq__item summary::before, .faq__item summary::after { right: 6px; width: 16px; }
  .faq__item p { padding: 0 0 18px; font-size: 1rem; line-height: 1.55; }
  .metier__nom { font-size: 1.5rem; line-height: 1.05; }
  .metier__texte { margin-top: 10px; font-size: 1rem; line-height: 1.5; }

  .realisations__tete { display: block; margin-bottom: 28px; }
  .realisations__sous { margin-top: 10px; font-size: 1.0625rem; }
  .filtres {
    flex-wrap: nowrap;
    gap: 0 22px;
    margin: 24px calc(-1 * max(var(--gouttiere), env(safe-area-inset-left))) 0;
    padding-inline: max(var(--gouttiere), env(safe-area-inset-left));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filtres::-webkit-scrollbar { display: none; }
  .filtre { flex: none; scroll-snap-align: start; }

  /* Mur compact à 2 colonnes : première carte en pleine largeur, les autres en vignettes */
  .mur { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 24px 14px; }
  .mur::before { left: -14vw; top: -20px; width: 40%; height: 46vw; }
  .mur .projet[data-f2="xl"] { grid-column: 1 / -1; }
  .projet__titre { margin-top: 10px; font-size: 1.0625rem; line-height: 1.15; }
  .projet__desc { margin-top: 2px; font-size: .9375rem; line-height: 1.35; }
  .projet[data-f2="m"] .projet__desc { display: none; }   /* vignettes : le titre suffit, les filtres donnent la catégorie */
  .projet[data-f2="xl"] .projet__titre { font-size: 1.375rem; }
  .projet__badge { padding: 3px 8px 3px 13px; font-size: .75rem; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%); }
  .projet[data-f2="xl"] .projet__badge { padding: 7px 16px 7px 24px; font-size: .9375rem; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); }

  .assistance { padding-bottom: 0; }
  .assistance__phrase { margin-top: 16px; font-size: 1.5rem; }
  .assistance__para { margin-top: 12px; margin-bottom: 24px; font-size: 1.0625rem; }
  .assistance__grille { gap: 40px; }
  .assistance__plan { padding: 28px 0 32px 48px; margin-inline: 0 calc(-1 * max(var(--gouttiere), env(safe-area-inset-right))); }
  .assistance__chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-right: 16px; }
  .assistance__n { font-size: 1.875rem; }
  .assistance__l { font-size: .875rem; line-height: 1.3; }


  .contact__grille { gap: 36px; }
  .contact__texte { margin-top: 16px; font-size: 1.0625rem; }
  .contact__coord { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 24px; }
  .contact__coord > div:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .contact__coord dd { font-size: 1.125rem; }
  .contact__coord a { padding-block: 10px; }
  .formulaire { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .formulaire__note { font-size: .9375rem; }
  .champ label { margin-bottom: 0; font-size: 1rem; }
  .champ input, .champ textarea { min-height: 44px; padding: 6px 0; }
  .champ textarea { min-height: 96px; }

  .pied { padding-top: 56px; }
  .pied::before { width: 40vw; height: 34%; right: -16vw; }
  .pied__devise { font-size: clamp(2.5rem, 13vw, 3.25rem); }
  .pied__grille { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; padding-top: 28px; }
  .pied__marque img { width: 150px; }
  .pied__marque p { margin-top: 12px; font-size: 1rem; }
  .pied__col ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .pied__col { display: none; }   /* doublons du menu et de la section contact juste au-dessus */
  .pied__titre { margin-bottom: 2px; }
  .pied__mentions { margin-top: 28px; font-size: .875rem; }

  .legal-carte dl div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal-droits { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Mouvement réduit : pas de parallaxe, pas de balayage, pas de clignotement,
   bandeau figé et centré, ouverture remplacée par un simple fondu.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }

  .js .ligne__in, .is-pret .ligne__in { transform: none; }
  .js .lamelle, .is-pret .lamelle { clip-path: var(--forme); }
  .js .accueil__fondu, .js .accueil__titre .curseur { opacity: 1; }
  .js .accueil__grille { opacity: 0; }
  .is-pret .accueil__grille { opacity: 1; transition: opacity .6s ease !important; }
  .js .titre .curseur, .is-pret .accueil__titre .curseur { animation: none !important; opacity: 1; }

  .defile .defile__piste { animation: none !important; }

  .projet__voile { display: none; }
  .projet__badge {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 7px 16px 7px 24px;
    background: var(--jaune);
    color: var(--anthracite);
    font-weight: 600;
    font-size: .9375rem;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
  }
  .projet__carte:hover .projet__media img { transform: none; }
  .metier:hover .metier__nom { transform: none; }
  .menu-mobile__liens li { opacity: 1; transform: none; }
  .flottant { display: none; }
}