/* =========================================================================
   ESDI : page d'accueil, en-tête et pied de page.

   Dérivée d'un prototype unique, pour que toutes les sections partagent la
   même échelle, les mêmes couleurs et le même rythme.
   Charte : turquoise #3fbecc, bleu #1b5aa8, Inter. Logo et favicon officiels.

   Partis pris : aucune carte, aucun surtitre, aucun texte en dégradé, aucun
   numéro de section. Un seul aplat de couleur (ESDI Manager). Une seule
   animation d'entrée (le hero), qui part d'un état visible. Les vraies
   captures des sites livrés remplacent le faux terminal de l'ancien site.

   Mouvement : menu mobile en transitions (220 ms ouverture, 160 ms fermeture,
   liens décalés de 30 ms), ombre d'en-tête pilotée par le défilement en CSS
   pur, fondu croisé de la bascule de thème. Rien d'autre ne bouge.

   Cette feuille est chargée APRÈS esdi.css : ses règles l'emportent.
   ========================================================================= */

/* =========================================================================
   ESDI - page d'accueil
   Charte : turquoise #3fbecc, bleu #1b5aa8, Inter. Logo et favicon officiels.
   Un seul aplat de couleur (ESDI Manager), une seule animation d'entrée (hero).
   Aucune carte, aucun surtitre, aucun texte en dégradé.
   ========================================================================= */

:root {
  --bleu:        #1b5aa8;
  --bleu-fonce:  #164d8f;
  --bleu-nuit:   #0f3a6e;
  --turquoise:   #3fbecc;

  /* Neutres tirés vers le bleu : air froid, montagne, pas un gris d'imprimante. */
  --fond:        #ffffff;
  --surface:     #f4f7fa;
  --encre:       #0b1526;
  --encre-2:     #4a6079;
  --encre-3:     #8497ad;
  --filet:       rgb(11 21 38 / .10);
  --filet-fort:  rgb(11 21 38 / .18);

  --ombre-1: 0 1px 2px rgb(11 21 38 / .06), 0 6px 20px -10px rgb(11 21 38 / .18);
  --ombre-2: 0 2px 6px rgb(11 21 38 / .08), 0 28px 60px -24px rgb(11 21 38 / .35);

  --sortie: cubic-bezier(.23, 1, .32, 1);
  --mesure: 1200px;
  --marge:  clamp(1.25rem, 4.5vw, 3rem);
}
html.esdi-sombre {
  --fond:        #0e141d;
  --surface:     #151d29;
  --encre:       #eaf0f7;
  --encre-2:     #9fb1c6;
  --encre-3:     #6c7f96;
  --filet:       rgb(255 255 255 / .10);
  --filet-fort:  rgb(255 255 255 / .18);
  --ombre-1: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px -10px rgb(0 0 0 / .5);
  --ombre-2: 0 2px 6px rgb(0 0 0 / .35), 0 28px 60px -24px rgb(0 0 0 / .7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 1rem/1.6 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Surfaces du navigateur : sélection, focus, barre de défilement.
   Ce sont les pièces qu'on n'a pas dessinées et qui trahissent une page assemblée. */
::selection { background: rgb(63 190 204 / .28); color: var(--encre); }
:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: var(--encre-3) transparent; scrollbar-width: thin; }

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.4vw, 4.75rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.875rem, 3.8vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.02em; line-height: 1.2; }
p  { margin: 0; }
a  { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }

.lisible { max-width: var(--mesure); margin-inline: auto; padding-inline: var(--marge); }
.prose   { max-width: 36rem; color: var(--encre-2); font-size: 1.0625rem; line-height: 1.65; }
.prose strong { color: var(--encre); font-weight: 600; }

/* Icônes Lucide : la balise <i> est remplacée par un <svg> qui hérite des classes. */
.ic { width: 20px; height: 20px; flex: none; stroke-width: 1.75; }
.ic-t { color: var(--turquoise); }

/* ------------------------------------------------------------ Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  height: 3rem; padding: 0 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 .9375rem/1 Inter, sans-serif;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s var(--sortie), border-color .18s var(--sortie),
              color .18s var(--sortie), transform .16s var(--sortie), box-shadow .18s var(--sortie);
}
.btn:active { transform: scale(.97); }
/* Plein : bleu de marque, blanc dessus (7,4:1). Jamais de blanc sur turquoise (2,2:1). */
.btn-plein { background: var(--bleu); color: #fff; box-shadow: 0 1px 2px rgb(27 90 168 / .3); }
.btn-plein .ic { color: rgb(255 255 255 / .85); }
/* Trait : filet fort, encre. */
.btn-trait { border-color: var(--filet-fort); color: var(--encre); background: transparent; }
/* Sur fond bleu profond. */
.btn-blanc { background: #fff; color: var(--bleu); }
.btn-clair { border-color: rgb(255 255 255 / .5); color: #fff; background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn-plein:hover { background: var(--bleu-fonce); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgb(27 90 168 / .5); }
  .btn-trait:hover { border-color: var(--encre); }
  .btn-blanc:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgb(0 0 0 / .3); }
  .btn-clair:hover { border-color: #fff; background: rgb(255 255 255 / .1); }
  .btn:hover .ic-fleche { transform: translateX(2px); }
}
.ic-fleche { transition: transform .18s var(--sortie); }

/* La feuille générale du thème colore TOUS les liens en cyan en mode sombre
   (html.esdi-sombre a). Ici chaque lien porte sa propre couleur : on rend la
   main, puis on refixe celle des boutons, que cette règle rendait illisibles
   (cyan sur blanc dans « Découvrir ESDI Manager »). */
html.esdi-sombre a { color: inherit; }
html.esdi-sombre .btn-plein { color: #fff; }
html.esdi-sombre .btn-blanc { color: var(--bleu); }
html.esdi-sombre .btn-trait { color: var(--encre); }
html.esdi-sombre .btn-clair { color: #fff; }

/* ------------------------------------------------------------ En-tête */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fond) 94%, transparent);
  border-bottom: 1px solid var(--filet);
}
@media (min-width: 1024px) { .entete { backdrop-filter: saturate(160%) blur(10px); } }
.entete .lisible { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 76px; }

/* Ombre au défilement : indication d'état, imperceptible, pilotée par la
   position de défilement en CSS pur. Aucun écouteur de défilement, ils
   tournent à chaque image et saccadent. Sans prise en charge, pas d'ombre. */
.entete::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 8px 24px -16px rgb(11 21 38 / .25);
  opacity: 0;
}
@supports (animation-timeline: scroll()) {
  .entete::after { animation: ombre-entete linear both; animation-timeline: scroll(); animation-range: 0 80px; }
  @keyframes ombre-entete { to { opacity: 1; } }
}
html.esdi-sombre .entete::after { box-shadow: 0 8px 24px -16px rgb(0 0 0 / .6); }

.logo { display: block; height: 56px; flex: none; }
.logo img { height: 100%; width: auto; }
/* Le logo garde ses couleurs d'origine dans les deux modes, à la demande du
   client : aucun filtre. Sur fond sombre, le bleu de marque est dense (2,7:1) ;
   c'est un graphique, pas du texte, et c'est le logo tel qu'il existe. */

/* Mode sombre : le menu et ses boutons passent en blanc pur, pas en gris-bleu. */
html.esdi-sombre .nav a { color: #fff; }
html.esdi-sombre .rond { color: #fff; border-color: rgb(255 255 255 / .22); }
html.esdi-sombre .menu-panneau li a { color: #fff; }
html.esdi-sombre .menu-panneau li a .ic { color: rgb(255 255 255 / .55); }
html.esdi-sombre .menu-tel { color: #fff; }

.nav { display: none; align-items: center; gap: .125rem; }
@media (min-width: 1024px) { .nav { display: flex; } }
.nav a {
  padding: .55rem .75rem; border-radius: 8px;
  font-size: .9375rem; font-weight: 500; color: var(--encre-2); text-decoration: none;
  transition: color .15s var(--sortie), background-color .15s var(--sortie);
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--encre); background: var(--surface); } }
.entete-actions { display: flex; align-items: center; gap: .5rem; }
.btn-entete { height: 2.625rem; padding: 0 1.2rem; font-size: .9rem; }
@media (max-width: 1199px) { .btn-entete { display: none; } }

/* Boutons ronds de l'en-tête : bascule de thème, menu. */
.rond {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--filet);
  background: transparent; color: var(--encre-2); display: grid; place-items: center; cursor: pointer;
  position: relative;
  transition: border-color .15s var(--sortie), color .15s var(--sortie), transform .16s var(--sortie);
}
.rond:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .rond:hover { border-color: var(--filet-fort); color: var(--encre); } }
.rond .ic { width: 18px; height: 18px; }

/* Bascule : les deux icônes se superposent, celle qui part tourne d'un quart
   de tour en s'effaçant, celle qui arrive fait l'inverse. Une transition, pas
   une image-clé : re-cliquer à mi-course repart de l'état courant. */
.bascule .ic { position: absolute; transition: opacity .2s var(--sortie), transform .2s var(--sortie); }
.bascule .lune   { opacity: 1; transform: rotate(0); }
.bascule .soleil { opacity: 0; transform: rotate(-90deg) scale(.9); }
html.esdi-sombre .bascule .lune   { opacity: 0; transform: rotate(90deg) scale(.9); }
html.esdi-sombre .bascule .soleil { opacity: 1; transform: rotate(0); }

/* Menu : bouton visible sous 1024 px, panneau qui descend de l'en-tête.
   Cinq entrées, un logo de 150 px et deux boutons ronds : en dessous, le
   menu de bureau déborderait. Le bouton « devis » attend 1200 px. */
.menu-bouton { display: grid; }
@media (min-width: 1024px) { .menu-bouton { display: none; } }
.menu-bouton .ic { position: absolute; transition: opacity .18s var(--sortie), transform .18s var(--sortie); }
.menu-bouton .ferme { opacity: 0; transform: rotate(-90deg) scale(.9); }
.entete[data-ouvert] .menu-bouton .ouvre { opacity: 0; transform: rotate(90deg) scale(.9); }
.entete[data-ouvert] .menu-bouton .ferme { opacity: 1; transform: rotate(0); }

/* Le panneau vient d'en haut, comme un tiroir attaché à l'en-tête : il glisse
   de 8 px et s'éclaircit. Ouverture 220 ms ; fermeture 160 ms, plus nette,
   parce que c'est la réponse du système, pas la décision de l'utilisateur. */
.menu-panneau {
  position: fixed; top: 76px; left: 0; right: 0; z-index: 39;
  max-height: calc(100dvh - 76px); overflow-y: auto;
  background: var(--fond); border-bottom: 1px solid var(--filet);
  box-shadow: 0 24px 48px -24px rgb(11 21 38 / .3);
  padding: .5rem var(--marge) 1.5rem;
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity .16s var(--sortie), transform .16s var(--sortie), visibility 0s .16s;
}
.entete[data-ouvert] .menu-panneau {
  opacity: 1; transform: translateY(0); visibility: visible;
  transition: opacity .22s var(--sortie), transform .22s var(--sortie), visibility 0s;
}
@media (min-width: 1024px) { .menu-panneau { display: none; } }
.menu-panneau ul { display: grid; }
.menu-panneau li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem 0; border-bottom: 1px solid var(--filet);
  font-size: 1.125rem; font-weight: 600; color: var(--encre); text-decoration: none;
}
.menu-panneau li a .ic { color: var(--encre-3); width: 18px; height: 18px; }
.menu-panneau li a:active { color: var(--bleu); }
/* Les liens arrivent décalés de 30 ms à l'ouverture seulement. À la fermeture,
   tout part ensemble : on ne fait pas attendre une décision déjà prise. */
.menu-panneau li { opacity: 0; transform: translateY(6px); transition: opacity .2s var(--sortie), transform .2s var(--sortie); }
.entete[data-ouvert] .menu-panneau li { opacity: 1; transform: none; }
.entete[data-ouvert] .menu-panneau li:nth-child(2) { transition-delay: 30ms; }
.entete[data-ouvert] .menu-panneau li:nth-child(3) { transition-delay: 60ms; }
.entete[data-ouvert] .menu-panneau li:nth-child(4) { transition-delay: 90ms; }
.entete[data-ouvert] .menu-panneau li:nth-child(5) { transition-delay: 120ms; }
.entete[data-ouvert] .menu-panneau li:nth-child(6) { transition-delay: 150ms; }
.menu-actions { display: grid; gap: .75rem; margin-top: 1.25rem; }
.menu-actions .btn { width: 100%; }
.menu-tel { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem; font-weight: 600; color: var(--encre-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.menu-tel .ic { color: var(--turquoise); width: 18px; height: 18px; }

/* Voile derrière le panneau : ferme au toucher. */
.voile {
  position: fixed; inset: 76px 0 0 0; z-index: 38;
  background: rgb(11 21 38 / .35);
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--sortie), visibility 0s .2s;
}
body:has(.entete[data-ouvert]) .voile { opacity: 1; visibility: visible; transition: opacity .22s var(--sortie), visibility 0s; }
@media (min-width: 1024px) { .voile { display: none; } }
html:has(.entete[data-ouvert]) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menu-panneau, .menu-panneau li { transform: none !important; }
  .bascule .ic, .menu-bouton .ic { transform: none !important; }
}

/* ------------------------------------------------------------ Hero */
.hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero-grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .hero-grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em { font-style: normal; color: var(--bleu); }
html.esdi-sombre .hero h1 em { color: #6fcfdc; }
.hero .prose { margin-bottom: 2.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* La pile de captures : trois vrais sites, légèrement en éventail.
   Tout est en transform, rien n'est absolu hors du conteneur : sur téléphone,
   seule la première capture reste, à plat. */
.pile { position: relative; aspect-ratio: 16 / 11; }
.pile img {
  position: absolute; inset: 0; margin: auto;
  width: 82%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--filet);
  box-shadow: var(--ombre-2);
  background: var(--surface);
}
.pile img:nth-child(1) { transform: translate(-13%, -9%) rotate(-5deg); z-index: 1; opacity: .92; }
.pile img:nth-child(2) { transform: translate(13%, 9%) rotate(4deg);   z-index: 2; opacity: .96; }
.pile img:nth-child(3) { transform: translate(0, 0) rotate(-1deg) scale(1.04); z-index: 3; }
@media (max-width: 1023px) {
  .pile { aspect-ratio: 16 / 10; max-width: 34rem; }
  .pile img { width: 100%; position: static; transform: none !important; opacity: 1; }
  .pile img:not(:nth-child(1)) { display: none; }
}

/* Une phrase, pas quatre tuiles. Les chiffres vivent dans le texte. */
.hero-preuve {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.75rem;
  border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; align-items: baseline;
  color: var(--encre-2); font-size: .9375rem;
}
.hero-preuve b { color: var(--encre); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-preuve span { display: inline-flex; align-items: center; gap: .5rem; }

/* La seule animation d'entrée du site. Chaque élément part visible ; l'animation
   ne joue que si le mouvement est autorisé, et se lit du bas vers le haut. */
@media (prefers-reduced-motion: no-preference) {
  .hero [data-m] { animation: monte .7s var(--sortie) both; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes monte { from { opacity: 0; transform: translateY(14px); } }
  .pile img { animation: pose .9s var(--sortie) both; }
  .pile img:nth-child(1) { animation-delay: .25s; }
  .pile img:nth-child(2) { animation-delay: .35s; }
  .pile img:nth-child(3) { animation-delay: .45s; }
  @keyframes pose { from { opacity: 0; translate: 0 20px; } }
}

/* ------------------------------------------------------------ Sections */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-tete { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-tete .prose { margin-top: 1rem; }

/* ------------------------------------------------------------ Services */
.services-grille { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 900px) { .services-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.services-tete { position: sticky; top: 6rem; }
.services-tete .prose { margin-top: 1rem; }
.service { padding-block: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--filet); }
.service:last-child { border-bottom: 1px solid var(--filet); }
.service-tete { display: flex; align-items: center; gap: .85rem; margin-bottom: .75rem; }
.service-tete .ic { width: 24px; height: 24px; }
.service p { color: var(--encre-2); max-width: 40rem; }
.service ul { margin-top: 1.25rem; display: grid; gap: .55rem 1.5rem; }
@media (min-width: 560px) { .service ul { grid-template-columns: 1fr 1fr; } }
.service li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; line-height: 1.5; }
.service li .ic { width: 16px; height: 16px; margin-top: .3rem; }
.service li b { font-weight: 600; }
.service li span { color: var(--encre-2); }
.lien {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem;
  font-size: .9375rem; font-weight: 600; color: var(--bleu); text-decoration: none;
}
html.esdi-sombre .lien { color: #6fcfdc; }
.lien .ic { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .lien:hover { text-decoration: underline; text-underline-offset: 4px; } }

/* ------------------------------------------------------------ ESDI Manager */
/* Le seul aplat de couleur de la page : le produit maison. Blanc sur bleu
   profond, 8,6:1 au point le plus clair. Jamais sur le turquoise. */
.manager {
  background: linear-gradient(160deg, var(--bleu-nuit) 0%, var(--bleu-fonce) 60%, var(--bleu) 100%);
  color: #fff;
}
.manager-grille { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { .manager-grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.manager h2 { color: #fff; }
.manager .prose { color: rgb(255 255 255 / .82); }
.manager .prose strong { color: #fff; }
.manager ul { margin-top: 1.75rem; display: grid; gap: .8rem; }
.manager li { display: flex; gap: .8rem; align-items: flex-start; font-size: .9375rem; line-height: 1.5; color: rgb(255 255 255 / .9); }
.manager li .ic { color: #7fd8e4; margin-top: .15rem; }
.manager li b { color: #fff; font-weight: 600; }
.manager-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.manager-capture {
  border-radius: 12px; border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / .6), 0 2px 8px rgb(0 0 0 / .2);
  aspect-ratio: 16 / 10; object-fit: cover; width: 100%;
}
@media (min-width: 960px) { .manager-capture { transform: rotate(1.5deg) translateX(2%); } }

/* ------------------------------------------------------------ Locski */
/* Second produit maison, sur fond clair pour alterner avec le bleu profond
   d'ESDI Manager juste au-dessus. Le visuel est une famille d'avatars : cinq
   silhouettes qui se chevauchent légèrement, les adultes derrière, les enfants
   devant, comme une photo de groupe au pied des pistes. */
.locski { background: var(--surface); }
.locski-grille { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { .locski-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.famille {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 1.5rem;
  /* La rangée se mesure à la largeur de SA colonne : les tailles ci-dessous
     sont en cqw, donc les cinq silhouettes tiennent toujours dans la case,
     quelle que soit la largeur de l'écran. En pixels fixes, la cinquième
     débordait sur le texte. */
  container-type: inline-size;
}
/* Un sol : une ellipse en dégradé radial, décalée vers le bas, sans flou. */
.famille::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 2rem;
  background: radial-gradient(ellipse at center, rgb(11 21 38 / .14), transparent 70%);
  z-index: 0;
}
html.esdi-sombre .famille::after { background: radial-gradient(ellipse at center, rgb(0 0 0 / .5), transparent 70%); }
.famille img {
  position: relative; z-index: 1; flex: none; width: auto;
  transition: transform .25s var(--sortie);
}
/* Tailles décroissantes : adultes, ado, enfants. Largeur totale ≈ 93 cqw
   après chevauchement (chaque image fait 0,83 fois sa hauteur). */
.famille img:nth-child(1) { height: 36cqw; margin-right: -8cqw; z-index: 1; }
.famille img:nth-child(2) { height: 36cqw; margin-right: -8cqw; z-index: 2; }
.famille img:nth-child(3) { height: 31cqw; margin-right: -8cqw; z-index: 3; }
.famille img:nth-child(4) { height: 25cqw; margin-right: -8cqw; z-index: 4; }
.famille img:nth-child(5) { height: 23cqw; z-index: 5; }
/* Sans unités de conteneur : tailles fixes, la rangée reste centrée et rognée. */
@supports not (height: 1cqw) {
  .famille { overflow: hidden; }
  .famille img:nth-child(1), .famille img:nth-child(2) { height: 200px; margin-right: -2.5rem; }
  .famille img:nth-child(3) { height: 172px; margin-right: -2.5rem; }
  .famille img:nth-child(4) { height: 140px; margin-right: -2.5rem; }
  .famille img:nth-child(5) { height: 128px; }
}
@media (hover: hover) and (pointer: fine) {
  .famille img:hover { transform: translateY(-6px); z-index: 6; }
}
@media (prefers-reduced-motion: reduce) { .famille img { transition: none; } }

.locski-logo { height: 44px; width: auto; margin-bottom: 1.25rem; }
/* Le logo Locski est bleu nuit : sur fond sombre, il se pose sur une pastille claire. */
html.esdi-sombre .locski-logo { background: #fff; padding: .5rem .7rem; border-radius: 10px; height: 56px; }
.locski-points { margin-top: 1.5rem; display: grid; gap: .75rem; }
.locski-points li { display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem; line-height: 1.5; color: var(--encre-2); }
.locski-points li .ic { margin-top: .15rem; }
.locski-points b { color: var(--encre); font-weight: 600; }
.locski-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.locski-statut { margin-top: 1rem; font-size: .875rem; color: var(--encre-3); }

/* ------------------------------------------------------------ Réalisations */
.travaux { display: grid; gap: 2rem 1.5rem; }
@media (min-width: 640px) { .travaux { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .travaux { grid-template-columns: repeat(4, 1fr); gap: 2rem 1.25rem; } }
.travail a { display: block; text-decoration: none; color: inherit; }
.travail img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--filet); box-shadow: var(--ombre-1);
  background: var(--surface);
  transition: transform .25s var(--sortie), box-shadow .25s var(--sortie);
}
@media (hover: hover) and (pointer: fine) {
  .travail a:hover img { transform: translateY(-4px); box-shadow: var(--ombre-2); }
}
.travail h3 { font-size: 1.0625rem; margin-top: 1rem; letter-spacing: -.01em; }
.travail p { font-size: .875rem; color: var(--encre-2); margin-top: .25rem; }

/* Les noms, en deux bandeaux qui défilent en sens contraires. C'est la
   preuve qui compte pour un commerçant de la vallée : il y reconnaît ses
   voisins. Une seule propriété animée, transform, sur une piste par rang :
   une couche de composition chacune, rien de commun avec les 85 flous qui
   faisaient tomber Safari. Mouvement constant, donc courbe linéaire. Pause au
   survol. Si l'utilisateur demande moins d'animation : arrêt, et la piste
   redevient défilable au doigt. */
.clients { margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--filet); }
.clients-tete { display: grid; gap: 1rem 3rem; align-items: start; margin-bottom: 2.25rem; }
@media (min-width: 900px) { .clients-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.clients-tete .prose { font-size: 1rem; }

/* 100vw compte la barre de défilement verticale : le bandeau déborderait de
   sa largeur (15 px) et ferait apparaître une barre horizontale. On rogne la
   section. « clip » ne crée pas de conteneur de défilement, contrairement à
   « hidden » : rien ne change pour le reste de la page. */
#realisations { overflow-x: clip; }
@supports not (overflow-x: clip) { #realisations { overflow-x: hidden; } }

.defile {
  /* Pleine largeur d'écran, en sortant du conteneur : les noms filent bord à bord. */
  width: 100vw; margin-left: calc(50% - 50vw);
  display: grid; gap: .875rem;
  /* Les extrémités s'estompent : un masque en dégradé, pas un flou. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.defile-rang { display: flex; overflow: hidden; }
.defile-piste {
  display: flex; flex: none; align-items: center;
  animation: defiler 95s linear infinite;
  will-change: transform;
}
.defile-droite .defile-piste { animation-direction: reverse; animation-duration: 110s; }
.defile-piste li {
  flex: none; white-space: nowrap;
  padding: .55rem 1.5rem; border-left: 1px solid var(--filet);
  font-size: .9375rem; font-weight: 500; color: var(--encre-2);
}
.defile-piste li i { font-style: normal; font-weight: 400; color: var(--encre-3); margin-left: .35rem; }
@keyframes defiler { to { transform: translateX(-100%); } }
@media (hover: hover) and (pointer: fine) {
  .defile-rang:hover .defile-piste { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .defile { -webkit-mask-image: none; mask-image: none; width: auto; margin-left: 0; }
  .defile-rang { overflow-x: auto; scrollbar-width: thin; padding-bottom: .25rem; }
  .defile-piste { animation: none; }
  .defile-piste[aria-hidden] { display: none; }
}

/* ------------------------------------------------------------ À propos */
.apropos { background: var(--surface); }
.apropos-grille { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 900px) { .apropos-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.apropos .prose + .prose { margin-top: 1.25rem; }
.valeurs { margin-top: 2.25rem; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .valeurs { grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; } }
.valeur .ic { width: 22px; height: 22px; margin-bottom: .75rem; }
.valeur h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
.valeur p { margin-top: .4rem; font-size: .9375rem; color: var(--encre-2); line-height: 1.55; }

/* ------------------------------------------------------------ Contact */
/* Le numéro de téléphone est l'appel à l'action : pour un commerçant de
   montagne, c'est ce qu'il cherche. Il est donc en taille d'affiche, cliquable. */
.contact { padding-block: clamp(4rem, 9vw, 7.5rem); }
.contact-grille { display: grid; gap: 2.5rem 4rem; align-items: end; }
@media (min-width: 900px) { .contact-grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.tel {
  display: inline-block; margin-top: 1.5rem;
  font-size: clamp(2rem, 5.6vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--bleu); text-decoration: none;
  transition: color .15s var(--sortie);
}
html.esdi-sombre .tel { color: #6fcfdc; }
@media (hover: hover) and (pointer: fine) { .tel:hover { color: var(--turquoise); } }
.contact-autres { display: grid; gap: 1.25rem; }
.contact-autres a { display: inline-flex; align-items: center; gap: .6rem; color: var(--encre); text-decoration: none; font-weight: 500; }
.contact-autres a .ic { color: var(--turquoise); }
@media (hover: hover) and (pointer: fine) { .contact-autres a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.contact-autres .adresse { color: var(--encre-2); font-size: .9375rem; line-height: 1.5; }
.contact-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.garanties { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: .875rem; color: var(--encre-2); }
.garanties span { display: inline-flex; align-items: center; gap: .45rem; }
.garanties .ic { width: 16px; height: 16px; }

/* ------------------------------------------------------------ Pied */
.pied { border-top: 1px solid var(--filet); padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; font-size: .9375rem; }
.pied-grille { display: grid; gap: 2.5rem 2rem; }
@media (min-width: 640px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pied-grille { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem 3rem; } }
.pied .logo { height: 44px; }
.pied h4 { margin: 0 0 1rem; font-size: .875rem; font-weight: 700; color: var(--encre); }
.pied ul { display: grid; gap: .6rem; }
.pied a { color: var(--encre-2); text-decoration: none; transition: color .15s var(--sortie); }
@media (hover: hover) and (pointer: fine) { .pied a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--turquoise); } }
.pied .prose { font-size: .9375rem; margin-top: 1.1rem; max-width: 24rem; }
.pied-contact li { display: flex; gap: .65rem; align-items: flex-start; color: var(--encre-2); line-height: 1.5; }
.pied-contact .ic { color: var(--turquoise); width: 18px; height: 18px; margin-top: .2rem; }
.pied-contact a { font-variant-numeric: tabular-nums; }
.pied-bas {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  color: var(--encre-3); font-size: .8125rem;
}
.haut { display: inline-flex; align-items: center; gap: .4rem; color: var(--encre-2) !important; font-weight: 500; }
.haut .ic { width: 16px; height: 16px; transition: transform .18s var(--sortie); }
@media (hover: hover) and (pointer: fine) { .haut:hover .ic { transform: translateY(-2px); } }

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