@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   ALTIWASH FRANCE — Feuille de style
   ──────────────────────────────────────────────────────────────
   Registre : ingénierie / énergie / patrimoine.
   Noir profond en fond, blanc cassé pour la lecture, doré en
   filets et accents, bleu technique hérité du ciel des photos.

   SOMMAIRE
     01. Polices
     02. Jetons de design
     03. Réinitialisation
     04. Primitives typographiques
     05. Motifs graphiques
     06. Boutons et liens
     07. En-tête et navigation
     08. Pied de page
     09. Page d'accueil
     10. Page Prestations
     11. Page À propos
     12. Page Contact et formulaire
     13. Pages légales
     14. Page 404
     15. Animations d'apparition
     16. Mouvement réduit et impression
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   01. POLICES
   Sous-ensemble latin, suffisant pour le français. Hébergées
   localement : aucun appel à un service extérieur.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ══════════════════════════════════════════════════════════════
   02. JETONS DE DESIGN
   Toute valeur réutilisée vit ici. Modifier une couleur à cet
   endroit la met à jour sur l'ensemble du site.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Encres (fonds) ── */
  --ink-950: #06070a;
  --ink-900: #0a0c11;
  --ink-850: #0e1117;
  --ink-800: #14181f;
  --ink-700: #1d222c;

  /* ── Papier (textes) ── */
  --paper: #edebe6;
  --paper-soft: #c8c7c3;
  --paper-dim: #8e9096;

  /* ── Doré (accents, filets) ── */
  --gold-300: #f0d79a;
  --gold-400: #e0bd71;
  --gold-500: #c9a24a;
  --gold-600: #a07c2e;
  --gold-700: #6d5320;

  /* ── Bleu technique (halos, étalonnage) ── */
  --azur-300: #7cc4ea;
  --azur-400: #4da5d8;
  --azur-700: #14405f;
  --azur-900: #08202f;

  /* ── Filets ── */
  --line: rgba(237, 235, 230, 0.11);
  --line-soft: rgba(237, 235, 230, 0.06);

  /* ── Typographie ── */
  --ff-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-sans: "Inter", system-ui, -apple-system, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --ff-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* ── Rythme ── */
  --shell: clamp(1.25rem, 5vw, 5.5rem);
  --largeur-max: 96rem;
  --hauteur-entete: 4.75rem;

  /* ── Courbe d'accélération commune ── */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

@media (min-width: 1024px) {
  :root {
    --hauteur-entete: 5.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   03. RÉINITIALISATION
   ══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--line);
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Décale les ancres pour qu'elles ne passent pas sous l'en-tête fixe. */
  scroll-padding-top: calc(var(--hauteur-entete) + 2rem);
}

body {
  min-height: 100vh;
  background-color: var(--ink-950);
  color: var(--paper);
  font-family: var(--ff-sans);
  font-feature-settings: "kern", "liga", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

::selection {
  background: var(--gold-500);
  color: var(--ink-950);
}

/* Focus clavier : anneau doré net, jamais masqué par un débordement. */
:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ── Barre de défilement ── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ink-950);
}
::-webkit-scrollbar-thumb {
  background: var(--ink-700);
  border: 3px solid var(--ink-950);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-700);
}

/* Masqué visuellement, restitué par les lecteurs d'écran. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Lien d'évitement : apparaît au premier appui sur Tab. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 60;
}
.skip-link:focus {
  left: 1.5rem;
  top: 1.5rem;
  position: fixed;
  background: var(--gold-500);
  color: var(--ink-950);
  padding: 0.75rem 1.25rem;
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════
   04. PRIMITIVES TYPOGRAPHIQUES
   ══════════════════════════════════════════════════════════════ */

/* Conteneur central de toutes les sections. */
.shell {
  padding-inline: var(--shell);
  margin-inline: auto;
  max-width: var(--largeur-max);
  width: 100%;
}

/* Titre d'affichage : grotesque resserrée, capitales, interlettrage négatif. */
.display {
  font-family: var(--ff-display);
  font-weight: 600;
  font-stretch: 92%;
  text-transform: uppercase;
  letter-spacing: -0.022em;
  line-height: 0.94;
  text-wrap: balance;
}

/* Micro-label technique : mono, capitales, très espacé. */
.label-tech {
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
}

/* Numérotation et coordonnées : mono, chiffres à chasse fixe. */
.index-tech {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* Chapô. */
.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.62;
  color: var(--paper-soft);
  text-wrap: pretty;
}

/* Corps de texte courant. */
.body-text {
  font-size: clamp(0.9688rem, 1.1vw, 1.0625rem);
  line-height: 1.72;
  color: var(--paper-soft);
  text-wrap: pretty;
}

.serif {
  font-family: var(--ff-serif);
  font-weight: 400;
}

/* ── Couleurs de texte ── */
.t-gold { color: var(--gold-500); }
.t-gold-400 { color: var(--gold-400); }
.t-gold-600 { color: var(--gold-600); }
.t-paper { color: var(--paper); }
.t-soft { color: var(--paper-soft); }
.t-dim { color: var(--paper-dim); }

/* Ligne de titre mise en valeur en doré (2e ou 3e ligne selon la page). */
.ligne-accent {
  color: var(--gold-500);
}

/* ══════════════════════════════════════════════════════════════
   05. MOTIFS GRAPHIQUES
   ══════════════════════════════════════════════════════════════ */

/* Calepinage vertical : rappelle un plan technique, pas un décor. */
.hairlines {
  position: absolute;
  inset: 0;
  display: none;
  justify-content: space-between;
  pointer-events: none;
}
.hairlines span {
  width: 1px;
  height: 100%;
  background: var(--line-soft);
}
@media (min-width: 1024px) {
  .hairlines {
    display: flex;
  }
}

/* Équerres d'angle façon réticule de visée. */
.reticule {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.reticule span {
  position: absolute;
  width: var(--taille-reticule, 20px);
  height: var(--taille-reticule, 20px);
  border-color: var(--gold-400);
  border-style: solid;
  border-width: 0;
}
.reticule span:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.reticule span:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.reticule span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.reticule span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.reticule--marge { inset: 1.25rem; }

/* Halo diffus : évoque le ciel sans l'imiter. */
.halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Grain fin : casse les aplats noirs et évite le banding. */
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ── Étalonnage des photographies ──
   Les ciels très saturés sont ramenés vers le bleu profond de la
   palette et les noirs densifiés, pour que toutes les prises de
   vue partagent le même rendu. */
.photo-grade { filter: saturate(0.82) contrast(1.06) brightness(0.9); }
.photo-grade-deep { filter: saturate(0.62) contrast(1.08) brightness(0.78); }
/* Les portraits reçoivent un étalonnage plus doux : la peau doit
   rester lisible, sans sortir du registre désaturé du site. */
.photo-portrait { filter: saturate(0.86) contrast(1.04) brightness(0.94); }

/* Cadre photographique : l'image remplit et recadre son conteneur. */
.cadre {
  position: relative;
  overflow: hidden;
}
.cadre > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cadre__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   06. BOUTONS ET LIENS
   ══════════════════════════════════════════════════════════════ */

/* Appel à l'action. Le remplissage doré monte depuis le bas, au
   survol comme au focus clavier — jamais uniquement au survol. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.0625rem 1.75rem;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-width: 1px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before {
  transform: translateY(0);
}

.btn__fleche {
  width: 22px;
  height: 8px;
  flex-shrink: 0;
  overflow: visible;
  transition: transform 0.5s var(--ease);
}
.btn:hover .btn__fleche {
  transform: translateX(4px);
}

.btn--primary {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--ink-950);
}
.btn--primary::before { background: var(--gold-300); }

.btn--ghost {
  border-color: rgba(237, 235, 230, 0.25);
  color: var(--paper);
}
.btn--ghost::before { background: var(--gold-400); }
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--ink-950);
  border-color: var(--gold-400);
}

.btn--compact {
  padding: 0.75rem 1rem;
}
@media (min-width: 640px) {
  .btn--compact { padding: 1.0625rem 1.75rem; }
}

.btn--pleine-largeur {
  width: 100%;
  justify-content: center;
}

.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Soulignement qui se déploie depuis la gauche au survol. */
.lien-souligne {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--ease), color 0.35s ease;
}
.lien-souligne:hover,
.lien-souligne:focus-visible {
  background-size: 100% 1px;
  color: var(--gold-400);
}

/* ══════════════════════════════════════════════════════════════
   07. EN-TÊTE ET NAVIGATION
   ══════════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom-width: 1px;
  border-bottom-color: transparent;
  background: transparent;
  transition: background-color 0.5s ease, backdrop-filter 0.5s ease, border-color 0.5s ease;
}

/* Au défilement, l'en-tête se pose sur un fond flouté. */
.site-header.est-defile,
.site-header.menu-ouvert {
  background: rgba(6, 7, 10, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  height: var(--hauteur-entete);
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ── Bloc-marque ── */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.logo__marque {
  width: 36px;
  transition: transform 0.7s var(--ease);
}
.logo:hover .logo__marque {
  transform: scale(1.06);
}
.logo__texte {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo__nom {
  font-family: var(--ff-display);
  font-weight: 600;
  font-stretch: 92%;
  text-transform: uppercase;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.logo__pays {
  font-family: var(--ff-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-top: 0.3rem;
  color: var(--gold-500);
}

/* ── Navigation principale (grands écrans) ── */
.nav {
  display: none;
  align-items: center;
  gap: 2.25rem;
}
@media (min-width: 1024px) {
  .nav { display: flex; }
}

.nav__lien {
  position: relative;
  padding-block: 0.5rem;
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-soft);
  transition: color 0.3s ease;
}
.nav__lien:hover {
  color: var(--paper);
}
.nav__lien::after {
  content: "";
  position: absolute;
  bottom: -0.125rem;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--gold-500);
  transition: width 0.5s var(--ease);
}
.nav__lien:hover::after {
  width: 100%;
}
/* Page courante : le filet doré reste déployé. */
.nav__lien[aria-current="page"] {
  color: var(--paper);
}
.nav__lien[aria-current="page"]::after {
  width: 100%;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.entete__tel {
  display: none;
  color: var(--paper-soft);
  transition: color 0.3s ease;
}
.entete__tel:hover { color: var(--gold-400); }
@media (min-width: 1280px) {
  .entete__tel { display: block; }
}

.btn__court { display: inline; }
.btn__long { display: none; }
@media (min-width: 640px) {
  .btn__court { display: none; }
  .btn__long { display: inline; }
}

/* ── Bouton menu (petits écrans) ── */
.burger {
  position: relative;
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-width: 1px;
  border-color: rgba(237, 235, 230, 0.2);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.burger:hover { border-color: var(--gold-400); }
@media (min-width: 1024px) {
  .burger { display: none; }
}

.burger__trait {
  position: relative;
  display: block;
  height: 0.75rem;
  width: 1.25rem;
}
.burger__trait span {
  position: absolute;
  left: 0;
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition: transform 0.5s var(--ease), top 0.5s var(--ease);
}
.burger__trait span:nth-child(1) { top: 0; }
.burger__trait span:nth-child(2) { top: 0.75rem; }

/* Les deux traits se croisent en X. */
.burger[aria-expanded="true"] .burger__trait span:nth-child(1) {
  top: 0.375rem;
  transform: rotate(45deg);
}
.burger[aria-expanded="true"] .burger__trait span:nth-child(2) {
  top: 0.375rem;
  transform: rotate(-45deg);
}

/* ── Menu plein écran ── */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--ink-950);
  /* Se dévoile du haut vers le bas. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.65s var(--ease), visibility 0.65s;
  visibility: hidden;
}
.menu-mobile.est-ouvert {
  clip-path: inset(0 0 0% 0);
  visibility: visible;
}
@media (min-width: 1024px) {
  .menu-mobile { display: none; }
}

.menu-mobile__fond {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: repeating-linear-gradient(
    to right,
    var(--line-soft) 0 1px,
    transparent 1px 12.5%
  );
}

.menu-mobile__nav {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-top: 6rem;
}

.menu-mobile__item {
  border-bottom-width: 1px;
  /* Les entrées montent en cascade à l'ouverture. */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.menu-mobile.est-ouvert .menu-mobile__item {
  opacity: 1;
  transform: translateY(0);
}
.menu-mobile.est-ouvert .menu-mobile__item:nth-child(1) { transition-delay: 0.16s; }
.menu-mobile.est-ouvert .menu-mobile__item:nth-child(2) { transition-delay: 0.23s; }
.menu-mobile.est-ouvert .menu-mobile__item:nth-child(3) { transition-delay: 0.30s; }
.menu-mobile.est-ouvert .menu-mobile__item:nth-child(4) { transition-delay: 0.37s; }

.menu-mobile__lien {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 1.25rem;
  color: var(--paper);
}
.menu-mobile__lien .display {
  font-size: clamp(2rem, 10vw, 3.25rem);
  transition: color 0.3s ease;
}
.menu-mobile__lien:hover .display {
  color: var(--gold-400);
}

.menu-mobile__pied {
  position: relative;
  padding-bottom: 3rem;
  opacity: 0;
  transition: opacity 0.6s ease 0.45s;
}
.menu-mobile.est-ouvert .menu-mobile__pied { opacity: 1; }

.menu-mobile__coordonnees {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
  color: var(--paper-dim);
}
.menu-mobile__coordonnees a:hover { color: var(--gold-400); }

/* Défilement bloqué tant que le menu est ouvert. */
body.menu-actif {
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   08. PIED DE PAGE
   ══════════════════════════════════════════════════════════════ */

.site-footer {
  position: relative;
  border-top-width: 1px;
  background: var(--ink-950);
  padding-block: 4rem;
}
@media (min-width: 1024px) {
  .site-footer { padding-block: 5rem; }
}

.site-footer__grille {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .site-footer__grille {
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
  }
  .site-footer__marque { grid-column: span 4; }
  .site-footer__col-prestations { grid-column: span 3; }
  .site-footer__col-entreprise { grid-column: span 2; }
  .site-footer__col-contact { grid-column: span 3; }
}

.site-footer .logo__marque { width: 44px; }

.site-footer__titre {
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.site-footer__liste {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9375rem;
}
.site-footer__liste a {
  color: var(--paper-soft);
}
.site-footer__col-contact .site-footer__liste a {
  color: var(--paper);
}

/* ── Réseaux sociaux ──
   Des carrés à filet, comme le bouton de menu : le symbole seul,
   sans aplat aux couleurs de marque, pour rester dans la palette. */
.reseaux {
  margin-top: 1.75rem;
  display: flex;
  gap: 0.625rem;
}

.reseaux__lien {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--paper-dim);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.reseaux__lien:hover,
.reseaux__lien:focus-visible {
  color: var(--gold-400);
  border-color: var(--gold-600);
}

/* Le symbole se soulève légèrement : le geste des liens du pied de
   page, transposé à une icône. */
.reseaux__lien svg {
  transition: transform 0.5s var(--ease);
}
.reseaux__lien:hover svg {
  transform: translateY(-2px);
}

.site-footer__bandeau {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top-width: 1px;
  padding-top: 1.75rem;
  color: var(--paper-dim);
  font-size: 0.6875rem;
}
@media (min-width: 1024px) {
  .site-footer__bandeau {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ══════════════════════════════════════════════════════════════
   09. PAGE D'ACCUEIL
   ══════════════════════════════════════════════════════════════ */

/* ── Ossature commune des sections ── */
.section {
  position: relative;
  border-top-width: 1px;
  background: var(--ink-950);
  padding-block: 6rem;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .section { padding-block: 8rem; }
}
.section--alt { background: var(--ink-900); }
.section--sans-filet { border-top-width: 0; }

/* Repère de section : numéro, filet qui se trace, intitulé. */
.repere {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.repere__filet {
  height: 1px;
  width: 2.5rem;
  background: var(--gold-600);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease);
}
.est-visible .repere__filet,
.repere.est-visible .repere__filet {
  transform: scaleX(1);
}

.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ── Hero ── */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink-950);
  padding-top: var(--hauteur-entete);
}

.hero__fond {
  position: absolute;
  inset: 0;
  z-index: -10;
}
.hero__halo-azur {
  right: -10%;
  top: -20%;
  height: 70vh;
  width: 70vh;
  background: rgba(20, 64, 95, 0.2);
  filter: blur(130px);
}
.hero__halo-or {
  bottom: -30%;
  left: 5%;
  height: 55vh;
  width: 55vh;
  background: rgba(109, 83, 32, 0.1);
  filter: blur(150px);
}

/* Panneau photographique : pleine largeur en mobile, moitié droite ensuite. */
.hero__photo {
  position: absolute;
  inset-block: 0;
  right: 0;
  z-index: -10;
  width: 100%;
}
@media (min-width: 1024px) {
  .hero__photo { width: 47%; }
}
.hero__photo img {
  filter: saturate(0.86) contrast(1.05) brightness(0.94);
  object-position: 60% center;
}

/* Étalonnage : le cyan du ciel est ramené vers le bleu profond,
   puis l'image est fondue dans le noir sur sa gauche et son bas. */
.hero__teinte {
  position: absolute;
  inset: 0;
  background: rgba(8, 32, 47, 0.32);
  mix-blend-mode: multiply;
}
.hero__degrade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--ink-950) 0%,
    rgba(6, 7, 10, 0.72) 46%,
    transparent 100%
  );
}
@media (min-width: 1024px) {
  .hero__degrade {
    background: linear-gradient(
      to right,
      var(--ink-950) 0%,
      rgba(6, 7, 10, 0.35) 34%,
      transparent 72%
    );
  }
}
.hero__degrade-bas {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 16rem;
  background: linear-gradient(to top, var(--ink-950) 0%, transparent 100%);
}

.hero__contenu {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-block: 3.5rem;
}
@media (min-width: 1024px) {
  .hero__contenu { padding-block: 4rem; }
}
.hero__bloc {
  max-width: 40rem;
}
@media (min-width: 1024px) {
  .hero__bloc { max-width: 45rem; }
}

.hero__surtitre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.hero__surtitre-filet {
  display: none;
  height: 1px;
  width: 2rem;
  background: var(--gold-700);
}
@media (min-width: 640px) {
  .hero__surtitre-filet { display: block; }
}

.hero__titre {
  margin-top: 1.5rem;
  font-size: clamp(2.1rem, 5.4vw, 4.15rem);
  color: var(--paper);
}

.hero__lede {
  margin-top: 1.75rem;
  max-width: 34rem;
}

.hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
    align-items: center;
  }
}

/* ── Bandeau de faits ── */
.faits {
  position: relative;
  border-top-width: 1px;
  background: rgba(6, 7, 10, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.faits__liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .faits__liste { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .faits__liste { grid-template-columns: repeat(5, 1fr); }
}
.faits__item {
  padding: 1rem;
  border-left-width: 1px;
}
.faits__item:first-child {
  padding-left: 0;
  border-left-width: 0;
}
@media (min-width: 1024px) {
  .faits__item { padding-block: 1.25rem; }
}
/* Les faits surnuméraires n'apparaissent qu'à mesure que la place vient. */
.faits__item--sm { display: none; }
.faits__item--lg { display: none; }
@media (min-width: 640px) {
  .faits__item--sm { display: block; }
}
@media (min-width: 1024px) {
  .faits__item--lg { display: block; }
}
.faits__numero {
  display: block;
  font-size: 0.625rem;
  color: var(--gold-600);
}
.faits__texte {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: var(--paper-soft);
}
@media (min-width: 1024px) {
  .faits__texte { font-size: 0.875rem; }
}

/* ── Indicateur de défilement ── */
.defiler {
  position: absolute;
  bottom: 6.5rem;
  left: var(--shell);
  display: none;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .defiler { display: flex; }
}
.defiler__rail {
  position: relative;
  display: block;
  height: 1px;
  width: 3.5rem;
  overflow: hidden;
  background: rgba(237, 235, 230, 0.15);
}
.defiler__rail span {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 33%;
  background: var(--gold-500);
  animation: defile 2.4s ease-in-out infinite;
}
@keyframes defile {
  from { transform: translateX(0); }
  to { transform: translateX(300%); }
}

/* ── Section photovoltaïque ── */
.pv__bandeau {
  position: relative;
  margin-top: 3rem;
  height: clamp(15rem, 42vw, 34rem);
  width: 100%;
}
@media (min-width: 1024px) {
  .pv__bandeau { margin-top: 4rem; }
}
.pv__bandeau .cadre__voile--teinte {
  background: rgba(8, 32, 47, 0.25);
  mix-blend-mode: multiply;
}
.pv__bandeau .cadre__voile--degrade {
  background:
    linear-gradient(to top, var(--ink-950) 0%, transparent 42%),
    linear-gradient(to right, rgba(6, 7, 10, 0.55) 0%, transparent 35%);
}
.pv__reticule {
  display: none;
}
@media (min-width: 1024px) {
  .pv__reticule {
    display: block;
    inset: var(--shell);
    --taille-reticule: 26px;
  }
}

/* Bloc éditorial en recouvrement sur l'image. */
.pv__editorial {
  position: relative;
  background: var(--ink-950);
}
@media (min-width: 1024px) {
  .pv__editorial {
    margin-top: -6rem;
    border-top: 1px solid rgba(201, 162, 74, 0.45);
    padding-top: 3.5rem;
  }
}
.pv__grille {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .pv__grille {
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
  }
  .pv__texte { grid-column: span 6; }
  .pv__points { grid-column: 8 / span 5; }
}

/* Liste numérotée à filets, réutilisée sur plusieurs pages. */
.liste-points {
  border-top-width: 1px;
}
.liste-points li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  border-bottom-width: 1px;
  padding-block: 1rem;
}
.liste-points__num {
  font-size: 0.6875rem;
  color: var(--gold-600);
  flex-shrink: 0;
}
.liste-points__texte {
  font-size: 0.9375rem;
  color: var(--paper-soft);
  transition: color 0.5s ease;
}
.liste-points li:hover .liste-points__texte {
  color: var(--paper);
}

/* ── Index des prestations ── */
.index-prestations {
  position: relative;
  margin-top: 3.5rem;
}
@media (min-width: 1024px) {
  .index-prestations { margin-top: 5rem; }
}

/* Aperçu appelé au survol (grands écrans uniquement). */
.index-prestations__apercu {
  display: none;
}
@media (min-width: 1024px) {
  .index-prestations__apercu {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 26rem;
    width: 20rem;
    pointer-events: none;
  }
}
@media (min-width: 1280px) {
  .index-prestations__apercu { height: 30rem; width: 23rem; }
}
.index-prestations__apercu .cadre {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.62s var(--ease);
}
.index-prestations__apercu .cadre.est-active { opacity: 1; }

.index-prestations__liste {
  position: relative;
  border-top-width: 1px;
}
@media (min-width: 1024px) {
  .index-prestations__liste { width: 64%; }
}
.index-prestations__liste > li {
  border-bottom-width: 1px;
}

.prestation-lien {
  display: block;
  padding-block: 1.75rem;
  transition: opacity 0.5s ease;
}
@media (min-width: 1024px) {
  .prestation-lien { padding-block: 2.25rem; }
  /* Les autres lignes s'atténuent au survol de l'une d'elles. */
  .index-prestations__liste.a-survol .prestation-lien { opacity: 0.35; }
  .index-prestations__liste.a-survol .prestation-lien:hover,
  .index-prestations__liste.a-survol .prestation-lien:focus-visible { opacity: 1; }
}

/* Vignette intégrée sur petits écrans, faute de survol.
   Le conteneur est un <span> : sans `display: block`, il reste en
   ligne et n'applique ni `width` ni `aspect-ratio` — la vignette
   se réduit alors à une hauteur nulle et l'image disparaît. */
.prestation-lien__vignette {
  display: block;
  position: relative;
  margin-bottom: 1.25rem;
  aspect-ratio: 16 / 10;
  width: 100%;
}
@media (min-width: 1024px) {
  .prestation-lien__vignette { display: none; }
}
.prestation-lien__vignette .cadre__voile {
  background: linear-gradient(to top, rgba(6, 7, 10, 0.7), transparent 60%);
}

.prestation-lien__ligne {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .prestation-lien__ligne { gap: 1.5rem; }
}
.prestation-lien__num {
  width: 1.75rem;
  flex-shrink: 0;
  color: var(--gold-600);
}
.prestation-lien__titre {
  min-width: 0;
  flex: 1;
  font-size: clamp(1.85rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  color: var(--paper);
  transition: transform 0.7s var(--ease), color 0.3s ease;
}
/* Le patrimoine passe en serif : registre différent, même grille. */
.prestation-lien__titre--serif {
  font-family: var(--ff-serif);
  font-weight: 400;
  text-transform: none;
  font-size: clamp(1.7rem, 4.2vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.prestation-lien:hover .prestation-lien__titre {
  color: var(--gold-400);
}
@media (min-width: 1024px) {
  .prestation-lien:hover .prestation-lien__titre { transform: translateX(12px); }
}
.prestation-lien__fleche {
  flex-shrink: 0;
  align-self: center;
  color: var(--paper-dim);
  transition: transform 0.7s var(--ease), color 0.7s ease;
}
.prestation-lien:hover .prestation-lien__fleche {
  transform: translateX(8px);
  color: var(--gold-400);
}
.prestation-lien__desc {
  /* <span> dans un parent en bloc : sans `display: block`, la marge
     haute et la largeur maximale sont ignorées, et le retrait ne
     s'applique qu'à la première ligne. */
  display: block;
  margin-top: 0.75rem;
  max-width: 28rem;
  padding-left: 2.75rem;
  font-size: 0.9375rem;
  color: var(--paper-dim);
}
@media (min-width: 1024px) {
  .prestation-lien__desc { padding-left: 3.25rem; }
}

/* ── Avantages ── */
.avantages__grille {
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 1024px) {
  .avantages__grille {
    grid-template-columns: repeat(12, 1fr);
    gap: 2.5rem;
  }
  .avantages__enonce { grid-column: span 4; }
  .avantages__table { grid-column: 6 / span 7; }
}
.avantages__colle {
  position: static;
}
@media (min-width: 1024px) {
  .avantages__colle { position: sticky; top: 8rem; }
}
.avantages__photo {
  position: relative;
  display: none;
  margin-top: 3rem;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 17rem;
}
@media (min-width: 1024px) {
  .avantages__photo { display: block; }
}
.avantages__photo .cadre__voile {
  background: linear-gradient(to top, var(--ink-950), transparent 55%);
}
.avantages__legende {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 0.5625rem;
  color: var(--gold-400);
}

.avantages__liste {
  display: grid;
  border-top-width: 1px;
}
@media (min-width: 640px) {
  .avantages__liste { grid-template-columns: repeat(2, 1fr); }
}
.avantage {
  position: relative;
  border-bottom-width: 1px;
  padding-block: 2rem;
  padding-right: 1.5rem;
}
@media (min-width: 640px) {
  .avantage:nth-child(odd) {
    border-right-width: 1px;
    padding-right: 2.5rem;
  }
  .avantage:nth-child(even) { padding-left: 2.5rem; }
}
/* Filet doré qui se déploie au survol. */
.avantage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 0;
  background: var(--gold-500);
  transition: width 0.7s var(--ease);
}
@media (min-width: 640px) {
  .avantage:nth-child(even)::before { left: 2.5rem; }
}
.avantage:hover::before { width: 100%; }
.avantage__titre {
  margin-top: 1rem;
  font-size: 1.35rem;
  color: var(--paper);
  transition: color 0.5s ease;
}
.avantage:hover .avantage__titre { color: var(--gold-400); }
.avantage__texte {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
}

/* ── Qualifications ── */
.qualifications__entete {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .qualifications__entete { grid-template-columns: repeat(12, 1fr); }
  .qualifications__titre-col { grid-column: span 5; }
  .qualifications__lede-col { grid-column: 7 / span 6; align-self: end; }
}

/* Grille en filets : le fond transparaît entre les cartes. */
.qualifications__grille {
  margin-top: 3.5rem;
  display: grid;
  gap: 1px;
  border-width: 1px;
  background: var(--line);
}
@media (min-width: 640px) {
  .qualifications__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .qualifications__grille {
    margin-top: 5rem;
    grid-template-columns: repeat(4, 1fr);
  }
}
.qualification {
  position: relative;
  background: var(--ink-900);
  padding: 1.75rem;
  transition: background-color 0.7s ease;
}
@media (min-width: 1024px) {
  .qualification { padding: 2rem; }
}
.qualification:hover { background: var(--ink-850); }
.qualification::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.qualification:hover::before { transform: scaleX(1); }
.qualification__titre {
  margin-top: 1.25rem;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: var(--paper);
}
.qualification__texte {
  margin-top: 1rem;
  font-size: 0.875rem;
}
.qualification__meta {
  margin-top: 1.75rem;
  font-size: 0.5625rem;
  color: var(--paper-dim);
  transition: color 0.5s ease;
}
.qualification:hover .qualification__meta { color: var(--gold-400); }

/* ── Méthode ── */
.methode__deroule {
  position: relative;
  margin-top: 4rem;
}
@media (min-width: 1024px) {
  .methode__deroule { margin-top: 6rem; }
}
/* Rail horizontal, écrans larges : il se remplit au défilement. */
.methode__rail,
.methode__rail-plein {
  display: none;
}
@media (min-width: 1024px) {
  .methode__rail,
  .methode__rail-plein {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
  }
  .methode__rail { background: var(--line); }
  .methode__rail-plein {
    background: var(--gold-500);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.1s linear;
  }
}
.methode__etapes {
  display: grid;
  row-gap: 2.25rem;
  border-left-width: 1px;
  padding-left: 2rem;
}
@media (min-width: 1024px) {
  .methode__etapes {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 1.75rem;
    border-left-width: 0;
    padding-left: 0;
  }
}
.etape {
  position: relative;
}
@media (min-width: 1024px) {
  .etape { padding-top: 2.25rem; }
}
.etape::before {
  content: "";
  position: absolute;
  left: calc(-2rem - 3px);
  top: 0.45rem;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: var(--gold-500);
}
@media (min-width: 1024px) {
  .etape::before {
    left: 0;
    top: -3px;
    border-radius: 0;
  }
}
.etape__titre {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--paper);
  transition: color 0.5s ease;
}
.etape:hover .etape__titre { color: var(--gold-400); }
.etape__texte {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

/* ── Fondateur ── */
.fondateur__grille {
  display: grid;
  align-items: center;
  gap: 3.5rem;
}
@media (min-width: 1024px) {
  .fondateur__grille {
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
  }
  .fondateur__photo-col { grid-column: span 5; }
  .fondateur__recit { grid-column: 7 / span 6; }
}
.fondateur__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.fondateur__photo .cadre__voile--teinte {
  background: rgba(8, 32, 47, 0.45);
  mix-blend-mode: multiply;
}
.fondateur__photo .cadre__voile--vignettage {
  background: radial-gradient(120% 90% at 50% 45%, transparent 20%, rgba(6, 7, 10, 0.72) 100%);
}
/* Un visage supporte mal le voile prévu pour les vues de chantier :
   on l'allège dès que le cadre est marqué comme portrait. */
/* Les photographies de Gregory sont cadrées serré : il reste 0 à 3 %
   au-dessus du crâne. Le débord de 8 % du plan parallaxe et le
   scale(1.1) du volet suffisent donc à décapiter le sujet. Sur un
   portrait, l'image s'affiche à l'échelle 1, sans débord : le volet
   conserve son rideau, il perd seulement son zoom. */
.cadre--portrait .parallaxe { inset: 0; transform: none !important; }
.cadre--portrait.volet img,
.cadre--portrait .volet img { transform: none; }
.cadre--portrait .cadre__voile--teinte { background: rgba(8, 32, 47, 0.16); }
.cadre--portrait .cadre__voile--vignettage {
  background: radial-gradient(125% 95% at 50% 38%, transparent 42%, rgba(6, 7, 10, 0.5) 100%);
}
.fondateur__citation {
  margin-top: 2rem;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.75rem);
  line-height: 1.14;
  color: var(--paper);
}
.fondateur__signature {
  margin-top: 2.5rem;
  border-top-width: 1px;
  padding-top: 1.75rem;
}

/* ── Bandeau de conversion ── */
.cta-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top-width: 1px;
  background: var(--ink-950);
  padding-block: 7rem;
}
@media (min-width: 1024px) {
  .cta-final { padding-block: 10rem; }
}
.cta-final__fond {
  position: absolute;
  inset: 0;
  z-index: -10;
}
.cta-final__fond .cadre {
  position: absolute;
  inset: -10%;
}
.cta-final__assombri {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 10, 0.62);
}
.cta-final__vignettage {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 105% at 35% 95%, transparent 0%, var(--ink-950) 82%);
}
.cta-final__teinte {
  position: absolute;
  inset: 0;
  background: rgba(8, 32, 47, 0.25);
  mix-blend-mode: multiply;
}
.cta-final__bloc { max-width: 46rem; }
.cta-final__titre {
  font-size: clamp(2rem, 5.2vw, 4.15rem);
  color: var(--paper);
}
.cta-final__actions {
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .cta-final__actions { flex-direction: row; align-items: center; }
}

/* ── Bandeau de garanties ──
   La page À propos détaille le cadre réglementaire ; l'accueil n'en
   garde que les intitulés, alignés sur une seule rangée. */
.garanties {
  margin-top: 3.5rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .garanties { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .garanties { grid-template-columns: repeat(4, 1fr); }
}
.garantie {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding: 1.75rem 1.5rem 1.75rem 0;
}
@media (min-width: 720px) {
  .garantie { border-right: 1px solid var(--line); }
  .garantie:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1024px) {
  .garantie { border-right: 1px solid var(--line); padding-left: 1.5rem; }
  .garantie:first-child { padding-left: 0; }
  .garantie:nth-child(2n) { border-right: 1px solid var(--line); }
  .garantie:last-child { border-right: 0; }
}
.garantie__num { font-size: 0.6875rem; color: var(--gold-600); }
.garantie__titre {
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--paper);
}
.garantie__meta {
  font-size: 0.5625rem;
  color: var(--paper-dim);
}

/* ══════════════════════════════════════════════════════════════
   10. PAGE PRESTATIONS
   ══════════════════════════════════════════════════════════════ */

/* ── En-tête des pages intérieures ──
   Même grammaire que l'accueil — photo à droite, typographie à
   gauche — mais sur une hauteur réduite. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-950);
  padding-top: var(--hauteur-entete);
}
.page-hero__fond {
  position: absolute;
  inset: 0;
  z-index: -10;
}
.page-hero__halo {
  right: -8%;
  top: 0;
  height: 52vh;
  width: 52vh;
  background: rgba(20, 64, 95, 0.16);
  filter: blur(120px);
}
.page-hero__photo {
  position: absolute;
  inset-block: 0;
  right: 0;
  z-index: -10;
  width: 100%;
}
@media (min-width: 1024px) {
  .page-hero__photo { width: 42%; }
}
.page-hero__photo .cadre__voile--teinte {
  background: rgba(8, 32, 47, 0.35);
  mix-blend-mode: multiply;
}
.page-hero__photo .cadre__voile--degrade {
  background: linear-gradient(
    to right,
    var(--ink-950) 0%,
    rgba(6, 7, 10, 0.78) 52%,
    rgba(6, 7, 10, 0.3) 100%
  );
}
@media (min-width: 1024px) {
  .page-hero__photo .cadre__voile--degrade {
    background: linear-gradient(
      to right,
      var(--ink-950) 0%,
      rgba(6, 7, 10, 0.4) 38%,
      transparent 78%
    );
  }
}
.page-hero__photo .cadre__voile--bas {
  top: auto;
  height: 10rem;
  background: linear-gradient(to top, var(--ink-950), transparent);
}
.page-hero__contenu {
  position: relative;
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .page-hero__contenu { padding-block: 7rem; }
}
.page-hero__bloc {
  max-width: 38rem;
}
@media (min-width: 1024px) {
  .page-hero__bloc { max-width: 42rem; }
}
.page-hero__surtitre {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.page-hero__surtitre-filet {
  height: 1px;
  width: 2.5rem;
  background: var(--gold-600);
}
.page-hero__titre {
  margin-top: 1.75rem;
  font-size: clamp(2rem, 5.2vw, 4rem);
  color: var(--paper);
}
.page-hero__lede {
  margin-top: 1.75rem;
  max-width: 34rem;
}
.page-hero__sommaire {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}
.page-hero__sommaire a {
  color: var(--paper-soft);
}

/* ── Bloc d'une prestation ── */
.prestation {
  position: relative;
  scroll-margin-top: 7rem;
  border-top-width: 1px;
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .prestation { padding-block: 7rem; }
}
.prestation__grille {
  display: grid;
  align-items: start;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .prestation__grille {
    grid-template-columns: repeat(12, 1fr);
    gap: 3.5rem;
  }
  .prestation__media { grid-column: span 5; order: 1; }
  .prestation__texte { grid-column: 7 / span 6; order: 2; }
  /* Un bloc sur deux inverse les colonnes, pour éviter le gabarit répété. */
  .prestation--inverse .prestation__media { grid-column: 8 / span 5; order: 2; }
  .prestation--inverse .prestation__texte { grid-column: 1 / span 6; order: 1; }
}
.prestation__colle {
  position: static;
}
@media (min-width: 1024px) {
  .prestation__colle { position: sticky; top: 7rem; }
}
.prestation__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.prestation__photo .cadre__voile--teinte {
  background: rgba(8, 32, 47, 0.22);
  mix-blend-mode: multiply;
}
/* Second cadrage en débord : la matière plutôt que la scène. */
.prestation__photo-detail {
  display: none;
}
@media (min-width: 1024px) {
  .prestation__photo-detail {
    display: block;
    position: relative;
    margin-top: -4rem;
    margin-left: -2.5rem;
    aspect-ratio: 5 / 4;
    width: 58%;
    border: 4px solid var(--ink-950);
  }
  .prestation--inverse .prestation__photo-detail {
    margin-left: auto;
    margin-right: -2.5rem;
  }
}
.prestation__surtitre {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.prestation__surtitre-filet {
  height: 1px;
  width: 2.5rem;
  background: var(--gold-600);
}
.prestation__titre {
  margin-top: 1.5rem;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  color: var(--paper);
}
.prestation__titre--serif {
  font-family: var(--ff-serif);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.04;
}
.prestation__accroche {
  margin-top: 1rem;
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--gold-400);
}
.prestation__analyse {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.prestation__analyse p {
  margin-top: 0.75rem;
}
.prestation .liste-points {
  margin-top: 2.5rem;
}
.prestation__clients {
  margin-top: 2rem;
}
.prestation__clients p {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
}

/* ── Hors catalogue ── */
.hors-catalogue {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .hors-catalogue {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.hors-catalogue__texte { max-width: 36rem; }
.hors-catalogue__titre {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  color: var(--paper);
}
.hors-catalogue .btn { flex-shrink: 0; }

/* ── Bandeau « qui intervient » ──
   Un portrait en 4/5 face au texte : la prestation reste technique,
   mais le visiteur voit qui se déplacera sur son site. */
.telepilote__grille {
  display: grid;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .telepilote__grille {
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
  }
  .telepilote__photo-col { grid-column: span 4; }
  .telepilote__texte { grid-column: 6 / span 7; }
}
.telepilote__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.telepilote__photo .cadre__voile--teinte {
  background: rgba(8, 32, 47, 0.18);
  mix-blend-mode: multiply;
}

/* ══════════════════════════════════════════════════════════════
   11. PAGE À PROPOS
   ══════════════════════════════════════════════════════════════ */

/* La signature est une respiration : peu de contenu, beaucoup
   d'air — mais pas au point de laisser un trou. Le rembourrage
   de section est repris à la baisse ici. */
.section--signature {
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .section--signature { padding-block: 6.5rem; }
}
.signature {
  position: relative;
  text-align: center;
}
.signature .repere { justify-content: center; }
.signature__phrase {
  margin: 2.25rem auto 0;
  max-width: 26ch;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  color: var(--paper);
}

.recit__grille {
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 1024px) {
  .recit__grille {
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
  }
  .recit__media { grid-column: span 5; }
  .recit__texte { grid-column: 7 / span 6; }
}
.recit__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.recit__photo .cadre__voile--teinte {
  background: rgba(8, 32, 47, 0.25);
  mix-blend-mode: multiply;
}
.recit__paragraphes {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Valeurs ── */
.valeurs {
  margin-top: 3.5rem;
  display: grid;
  border-top-width: 1px;
}
@media (min-width: 1024px) {
  .valeurs { grid-template-columns: repeat(3, 1fr); }
}
.valeur {
  border-bottom-width: 1px;
  padding-block: 2.25rem;
}
@media (min-width: 1024px) {
  .valeur {
    border-right-width: 1px;
    padding-inline: 2.25rem;
  }
  .valeur:first-child { padding-left: 0; }
  .valeur:last-child { border-right-width: 0; padding-right: 0; }
}
.valeur__titre {
  margin-top: 1rem;
  font-size: 1.5rem;
  color: var(--paper);
  transition: color 0.5s ease;
}
.valeur:hover .valeur__titre { color: var(--gold-400); }
.valeur__texte {
  margin-top: 1rem;
  font-size: 0.9375rem;
}

/* ── Repères de l'entreprise ── */
.reperes__grille {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .reperes__grille { grid-template-columns: repeat(12, 1fr); }
  .reperes__intro { grid-column: span 4; }
  .reperes__table { grid-column: 6 / span 7; }
}
/* Paire libellé / valeur, alignée en colonnes sur grand écran. */
.paire {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-bottom-width: 1px;
  padding-block: 1rem;
}
@media (min-width: 640px) {
  .paire {
    flex-direction: row;
    align-items: baseline;
    gap: 2rem;
  }
}
.paire dt {
  width: 13rem;
  flex-shrink: 0;
  color: var(--paper-dim);
}
.paire dd {
  font-size: 0.9375rem;
  color: var(--paper-soft);
}

/* ── Planches de terrain ──
   Trois prises de vue en 4/5, alignées comme une planche contact.
   Sur écran large, la seconde est décalée vers le bas : le regard
   descend au lieu de balayer une rangée trop régulière. */
.terrain__grille {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .terrain__grille { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
@media (min-width: 1024px) {
  .terrain__grille { gap: 2rem; }
  .terrain__planche:nth-child(2) { margin-top: 3.5rem; }
  .terrain__planche:nth-child(3) { margin-top: 1.25rem; }
}
.terrain__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.terrain__photo .cadre__voile--teinte {
  background: rgba(8, 32, 47, 0.2);
  mix-blend-mode: multiply;
}
.terrain__legende {
  margin-top: 0.875rem;
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-size: 0.6875rem;
  color: var(--paper-dim);
}
.terrain__legende .index-tech { color: var(--gold-600); }

/* ══════════════════════════════════════════════════════════════
   12. PAGE CONTACT ET FORMULAIRE
   ══════════════════════════════════════════════════════════════ */

/* Portrait en tête de colonne : la demande de devis est adressée
   à quelqu'un, pas à un formulaire anonyme. */
.contact__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.contact__portrait .cadre__voile--teinte {
  background: rgba(8, 32, 47, 0.18);
  mix-blend-mode: multiply;
}

.contact__grille {
  display: grid;
  gap: 4rem;
}
@media (min-width: 1024px) {
  .contact__grille {
    grid-template-columns: repeat(12, 1fr);
    gap: 3.5rem;
  }
  .contact__formulaire { grid-column: span 7; }
  .contact__aside { grid-column: 9 / span 4; }
}
.contact__aside-colle {
  position: static;
}
@media (min-width: 1024px) {
  .contact__aside-colle { position: sticky; top: 7rem; }
}
.contact__bloc {
  margin-top: 2.5rem;
  border-top-width: 1px;
  padding-top: 1.75rem;
}
.contact__bloc:first-of-type {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(109, 83, 32, 0.6);
}
.contact__coordonnees {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact__coordonnees a {
  font-size: 1.0625rem;
  color: var(--paper);
}
.contact__besoins {
  margin-top: 1.5rem;
}
.contact__besoins li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom-width: 1px;
  padding-block: 0.75rem;
}
.contact__besoins .index-tech {
  font-size: 0.625rem;
  color: var(--gold-600);
}
.contact__besoins span:last-child {
  font-size: 0.875rem;
  color: var(--paper-soft);
}

/* ── Champs ──
   La zone de saisie est posée sur une surface légèrement plus claire
   que le fond : un simple filet ne se voyait pas sur du noir, et on
   ne remplit pas un formulaire qu'on ne distingue pas. Le filet reste
   l'accent — il passe au doré au focus. */
.form__grille {
  display: grid;
  gap: 2.5rem 2.5rem;
}
@media (min-width: 640px) {
  .form__grille { grid-template-columns: repeat(2, 1fr); }
  .champ--large { grid-column: span 2; }
}

/* Libellé : lisible avant tout. Le registre mono est conservé, mais
   l'interlettrage extrême et le gris sombre le rendaient pénible. */
.champ__label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--paper-soft);
  transition: color 0.3s ease;
}
.champ__requis { color: var(--gold-500); }

.champ__saisie {
  display: block;
  margin-top: 0.75rem;
  width: 100%;
  border: 1px solid rgba(237, 235, 230, 0.1);
  border-bottom-color: rgba(237, 235, 230, 0.28);
  background: var(--ink-850);
  padding: 0.875rem 1rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--paper);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.champ__saisie::placeholder {
  color: var(--paper-dim);
  opacity: 1;                    /* Firefox l'atténue par défaut */
}
.champ__saisie:hover {
  border-bottom-color: rgba(237, 235, 230, 0.45);
}
.champ__saisie:focus {
  outline: none;
  background: var(--ink-800);
  border-color: rgba(201, 162, 74, 0.35);
  border-bottom-color: var(--gold-400);
}
/* Le champ en cours de saisie se signale aussi par son libellé. */
.champ:focus-within .champ__label { color: var(--gold-400); }

.champ__saisie[aria-invalid="true"] {
  border-color: rgba(224, 189, 113, 0.4);
  border-bottom-color: var(--gold-300);
}
textarea.champ__saisie {
  resize: vertical;
  min-height: 9.5rem;
}

.champ__aide {
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--paper-dim);
}
.champ__erreur {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: var(--gold-300);
}
.champ__erreur:empty { display: none; }

/* ── Choix exclusifs en pastilles ── */
.pastilles {
  border: 0;
  padding: 0;
  margin: 0;
}
.pastilles legend { color: var(--paper-soft); }
.pastilles__liste {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.pastilles input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.pastille {
  display: block;
  cursor: pointer;
  border: 1px solid rgba(237, 235, 230, 0.18);
  background: var(--ink-850);
  padding: 0.8125rem 1.125rem;
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-soft);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.pastille:hover {
  border-color: rgba(201, 162, 74, 0.5);
  background: var(--ink-800);
  color: var(--paper);
}
.pastilles input:checked + .pastille {
  border-color: var(--gold-500);
  background: var(--gold-500);
  color: var(--ink-950);
}
.pastilles input:focus-visible + .pastille {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

/* ── Pièces jointes ── */
.pieces__info {
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--paper-dim);
}
.pieces__actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.pieces__liste {
  margin-top: 1rem;
  border-top-width: 1px;
}
.pieces__liste:empty { display: none; }
.pieces__liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom-width: 1px;
  padding-block: 0.75rem;
}
.pieces__nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--paper-soft);
}
.pieces__retirer {
  flex-shrink: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-dim);
  transition: color 0.3s ease;
}
.pieces__retirer:hover { color: var(--gold-400); }

/* ── Consentement ── */
.consentement {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: 1rem;
}
.consentement input {
  position: relative;
  margin-top: 0.05rem;
  height: 1.35rem;
  width: 1.35rem;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(237, 235, 230, 0.32);
  background: var(--ink-850);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.consentement:hover input { border-color: rgba(201, 162, 74, 0.55); }
.consentement input:checked {
  border-color: var(--gold-500);
  background: var(--gold-500);
}
/* Une coche dessinée : le simple aplat doré ne disait pas « validé ». */
.consentement input:checked::after {
  content: "";
  position: absolute;
  left: 0.44rem;
  top: 0.16rem;
  width: 0.32rem;
  height: 0.62rem;
  border: solid var(--ink-950);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consentement span {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--paper-soft);
}

/* ── Envoi ── */
.form__envoi {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .form__envoi { flex-direction: row; align-items: center; }
}
.form__retour {
  min-height: 1.5rem;
}
.form__retour p {
  margin-top: 1.25rem;
  border-left: 1px solid var(--gold-500);
  padding-left: 1rem;
  font-size: 0.875rem;
  color: var(--gold-300);
}

/* ── Confirmation ── */
.confirmation {
  border: 1px solid rgba(109, 83, 32, 0.6);
  background: var(--ink-900);
  padding: 2.25rem;
}
@media (min-width: 1024px) {
  .confirmation { padding: 3rem; }
}
.confirmation__titre {
  margin-top: 1.25rem;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  color: var(--paper);
}
.confirmation__note {
  margin-top: 1.5rem;
  border-left: 1px solid var(--gold-700);
  padding-left: 1rem;
  font-size: 0.6875rem;
  color: var(--paper-dim);
}

/* Piège à robots : hors flux et hors lecture d'écran. */
.piege {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
}

/* ══════════════════════════════════════════════════════════════
   13. PAGES LÉGALES
   ══════════════════════════════════════════════════════════════ */

.legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  padding-top: var(--hauteur-entete);
}
.legal-hero__contenu {
  position: relative;
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .legal-hero__contenu { padding-block: 6rem; }
}
.legal-hero__surtitre {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.legal-hero__surtitre span:first-child {
  height: 1px;
  width: 2.5rem;
  background: var(--gold-600);
}
.legal-hero__titre {
  margin-top: 1.75rem;
  max-width: 18ch;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  color: var(--paper);
}
.legal-hero__maj {
  margin-top: 1.5rem;
  font-size: 0.6875rem;
  color: var(--paper-dim);
}

.legal-corps {
  border-top-width: 1px;
  background: var(--ink-950);
  padding-top: 4rem;
  padding-bottom: 7rem;
}
@media (min-width: 1024px) {
  .legal-corps { padding-bottom: 9rem; }
}
.legal-corps__colonne {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.legal-bloc {
  border-top-width: 1px;
  padding-top: 1.75rem;
}
.legal-bloc__titre {
  color: var(--gold-500);
}
.legal-bloc__contenu {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.legal-bloc__contenu a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.legal-bloc__contenu a:hover { color: var(--gold-400); }

/* ══════════════════════════════════════════════════════════════
   14. PAGE 404
   ══════════════════════════════════════════════════════════════ */

.page-404 {
  position: relative;
  display: flex;
  min-height: 80svh;
  align-items: center;
  overflow: hidden;
  background: var(--ink-950);
  padding-top: var(--hauteur-entete);
}
.page-404__halo {
  right: -10%;
  top: 0;
  height: 50vh;
  width: 50vh;
  background: rgba(20, 64, 95, 0.14);
  filter: blur(130px);
}
.page-404__contenu {
  position: relative;
  padding-block: 5rem;
}
.page-404__titre {
  margin-top: 1.75rem;
  max-width: 16ch;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  color: var(--paper);
}
.page-404__actions {
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .page-404__actions { flex-direction: row; }
}
.page-404__plan {
  margin-top: 4rem;
  border-top-width: 1px;
  padding-top: 1.75rem;
}
.page-404__plan ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}
.page-404__plan a { color: var(--paper-soft); }

/* ══════════════════════════════════════════════════════════════
   14 bis. TABLETTE
   ──────────────────────────────────────────────────────────────
   Entre 640 et 1024 px, les grilles à douze colonnes ne sont pas
   encore actives : les médias verticaux passent pleine largeur et
   atteignent 960 px de haut sur une tablette, ce qui repousse le
   texte hors de l'écran. On les plafonne, sans toucher au mobile
   où la pleine largeur reste la bonne réponse.
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 640px) and (max-width: 1023.98px) {
  .prestation__media,
  .recit__media,
  .fondateur__photo-col,
  .telepilote__photo-col,
  .avantages__photo,
  .contact__portrait {
    max-width: 25rem;
  }
  .prestation__photo-detail { max-width: 30rem; }
  .page-hero__photo { width: 76%; }
}

/* ══════════════════════════════════════════════════════════════
   15. MOUVEMENT
   ──────────────────────────────────────────────────────────────
   Le mouvement du site emprunte son vocabulaire au vol et à la
   prise de vue aérienne : une trajectoire qui se trace, un
   réticule qui verrouille sa cible, un balayage de relevé, des
   plans qui se déplacent à des vitesses différentes.

   Rien ne bouge pour décorer. Chaque animation dit quelque chose
   du métier, ou hiérarchise la lecture.

   Sans JavaScript (`.no-js`) comme en mouvement réduit, tout est
   rendu immobile et lisible — voir la section 16.
   ══════════════════════════════════════════════════════════════ */

/* ── Entrée de page ──
   Le contenu se pose, très brièvement. Une transition longue se
   paierait en confort de navigation. */
@keyframes entree-page {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
.js main {
  animation: entree-page 0.55s var(--ease) both;
}
/* Quand le rideau est présent, c'est lui qui orchestre l'entrée. */
.ouverture-en-cours main,
.ouverture-finie main { animation: none; }

/* ══════════════════════════════════════════════════════════════
   Ouverture du site
   ──────────────────────────────────────────────────────────────
   Un rideau noir, la marque qui se pose, un réticule qui verrouille
   sa cible, un balayage de relevé — puis le rideau se retire en deux
   pans et le hero enchaîne sur sa trajectoire de vol.

   Environ 2 s, une seule fois par session : au-delà, une intro
   devient un péage. Elle est posée par JavaScript, donc invisible
   sans lui, et sautée en mouvement réduit.
   ══════════════════════════════════════════════════════════════ */

.ouverture {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* Deux pans qui se retirent vers le haut et le bas : le rideau
   s'ouvre sur la page, il ne disparaît pas en fondu. */
.ouverture__pan {
  position: absolute;
  inset-inline: 0;
  height: 50.5%;
  background: var(--ink-950);
  transition: transform 0.9s var(--ease);
}
.ouverture__pan--haut { top: 0; }
.ouverture__pan--bas { bottom: 0; }

.ouverture.est-levee .ouverture__pan--haut { transform: translateY(-100%); }
.ouverture.est-levee .ouverture__pan--bas { transform: translateY(100%); }

/* ── Bloc central ── */
.ouverture__marque {
  position: relative;
  display: grid;
  place-items: center;
  width: 8.5rem;
  height: 8.5rem;
  transition: opacity 0.45s ease, transform 0.7s var(--ease);
}
.ouverture.est-levee .ouverture__marque {
  opacity: 0;
  transform: scale(0.94);
}

.ouverture__logo {
  width: 4.25rem;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  animation: ouverture-logo 0.85s var(--ease) 0.1s forwards;
}
@keyframes ouverture-logo {
  to { opacity: 1; transform: none; }
}

/* Le réticule accroche la marque, comme une visée qui se cale. */
.ouverture__reticule span {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--gold-500);
  opacity: 0;
  animation: ouverture-verrou 0.7s var(--ease) 0.45s forwards;
}
.ouverture__reticule span:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; transform: translate(-16px, -16px); }
.ouverture__reticule span:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; transform: translate(16px, -16px); }
.ouverture__reticule span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; transform: translate(-16px, 16px); }
.ouverture__reticule span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; transform: translate(16px, 16px); }
@keyframes ouverture-verrou {
  to { opacity: 1; transform: none; }
}

/* Balayage de relevé sur la marque. */
.ouverture__balayage {
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-400), transparent);
  opacity: 0;
  animation: ouverture-balaye 1s cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
@keyframes ouverture-balaye {
  0%   { top: 0;    opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Nom de la marque, en micro-typo technique. */
.ouverture__nom {
  position: absolute;
  bottom: -2.75rem;
  white-space: nowrap;
  color: var(--gold-500);
  opacity: 0;
  animation: ouverture-nom 0.7s var(--ease) 0.75s forwards;
}
@keyframes ouverture-nom {
  from { opacity: 0; letter-spacing: 0.5em; }
  to   { opacity: 1; letter-spacing: 0.24em; }
}

/* Le contenu attend derrière le rideau, puis se pose. */
.ouverture-en-cours main,
.ouverture-en-cours .site-header {
  opacity: 0;
}
.ouverture-finie main,
.ouverture-finie .site-header {
  animation: entree-page 0.7s var(--ease) both;
}

/* ── Apparition simple : montée en fondu ── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 0.8s var(--ease),
    transform 0.9s var(--ease);
}
.reveal.est-visible {
  opacity: 1;
  transform: none;
}

/* Cascade : chaque enfant part derrière le précédent. Le pas est
   court — au-delà, l'œil attend au lieu de lire. */
.reveal-groupe > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.7s var(--ease),
    transform 0.8s var(--ease);
}
.reveal-groupe.est-visible > * { opacity: 1; transform: none; }
.reveal-groupe.est-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-groupe.est-visible > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-groupe.est-visible > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-groupe.est-visible > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-groupe.est-visible > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-groupe.est-visible > *:nth-child(6) { transition-delay: 0.30s; }

/* ── Titres ligne à ligne ──
   Chaque ligne monte derrière son propre masque, comme un volet
   qui se lève. Le léger décalage entre les lignes donne au titre
   sa cadence de lecture. */
.lignes span {
  display: block;
  overflow: hidden;
  /* Marge intérieure : les jambages et accents ne doivent pas être
     rognés par le masque. */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.lignes span > span {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1s var(--ease);
}
.lignes.est-visible span > span { transform: none; }
.lignes.est-visible span:nth-child(2) > span { transition-delay: 0.07s; }
.lignes.est-visible span:nth-child(3) > span { transition-delay: 0.14s; }
.lignes.est-visible span:nth-child(4) > span { transition-delay: 0.21s; }

/* ── Volet photographique ──
   Une image ne surgit pas en fondu : un panneau se relève et la
   découvre, pendant que le cadrage se stabilise.

   Le dévoilement passe par un panneau superposé, et non par un
   `clip-path` sur le cadre : découper l'élément réduirait son aire
   d'intersection à zéro, et l'observateur qui doit le révéler ne se
   déclencherait jamais. */
.volet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--ink-950);
  transform-origin: bottom;
  transition: transform 1.1s var(--ease);
}
.volet.est-visible::after {
  transform: scaleY(0);
}

/* Le zoom porte sur l'image, jamais sur `.parallaxe` dont la
   transformation est pilotée par le JavaScript. */
.volet img {
  transform: scale(1.1);
  transition: transform 1.7s var(--ease);
}
.volet.est-visible img { transform: none; }

/* ── Réticule : verrouillage de cible ──
   Les quatre équerres arrivent de l'extérieur du cadre et se
   posent sur leurs angles, comme une visée qui accroche. */
.reticule span {
  opacity: 0;
  transition:
    opacity 0.5s ease,
    transform 0.9s var(--ease);
}
.reticule span:nth-child(1) { transform: translate3d(-14px, -14px, 0); }
.reticule span:nth-child(2) { transform: translate3d(14px, -14px, 0); }
.reticule span:nth-child(3) { transform: translate3d(-14px, 14px, 0); }
.reticule span:nth-child(4) { transform: translate3d(14px, 14px, 0); }
.est-visible > .reticule span,
.reticule.est-visible span {
  opacity: 1;
  transform: none;
}
.est-visible > .reticule span:nth-child(2),
.reticule.est-visible span:nth-child(2) { transition-delay: 0.06s; }
.est-visible > .reticule span:nth-child(3),
.reticule.est-visible span:nth-child(3) { transition-delay: 0.12s; }
.est-visible > .reticule span:nth-child(4),
.reticule.est-visible span:nth-child(4) { transition-delay: 0.18s; }

/* ── Balayage de relevé ──
   Une seule passe dorée sur l'image, à la manière d'un scan.
   Elle ne se rejoue pas : c'est un relevé, pas un gyrophare. */
.balayage {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--gold-400), transparent);
}
.balayage.est-visible {
  animation: balaye 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both;
}
@keyframes balaye {
  0%   { top: 0%;   opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { top: 100%; opacity: 0; }
}

/* ── Filet de repère de section ── */
.repere__filet {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease) 0.1s;
}
.repere.est-visible .repere__filet { transform: scaleX(1); }

/* ── Calepinage qui se trace ──
   Les verticales descendent une à une à l'entrée de la section. */
.hairlines span {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s var(--ease);
}
.est-visible > .hairlines span,
.hairlines.est-visible span { transform: scaleY(1); }
.hairlines.est-visible span:nth-child(2) { transition-delay: 0.05s; }
.hairlines.est-visible span:nth-child(3) { transition-delay: 0.10s; }
.hairlines.est-visible span:nth-child(4) { transition-delay: 0.15s; }
.hairlines.est-visible span:nth-child(5) { transition-delay: 0.20s; }
.hairlines.est-visible span:nth-child(6) { transition-delay: 0.25s; }
.hairlines.est-visible span:nth-child(7) { transition-delay: 0.30s; }

/* ══════════════════════════════════════════════════════════════
   Trajectoire de vol
   ──────────────────────────────────────────────────────────────
   Le fil conducteur graphique du site. Le plan de vol est tracé
   en pointillé ; la portion parcourue se dessine en plein au fil
   du défilement, et le drone — un carré doré, pas un point — se
   déplace à sa pointe.
   ══════════════════════════════════════════════════════════════ */

.trace {
  position: relative;
  width: 100%;
  margin-top: 2rem;
  height: 6rem;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .trace { margin-top: 2.5rem; height: 7rem; }
}

/* Une section qui se termine par une trajectoire n'a pas besoin de
   son rembourrage bas : le tracé fait la respiration. */
.section--avec-trace { padding-bottom: 2.5rem; }
@media (min-width: 1024px) {
  .section--avec-trace { padding-bottom: 3.5rem; }
}
.trace svg {
  display: block;
  height: 100%;
  width: 100%;
  overflow: visible;
}

/* Plan de vol : le tracé prévu, en retrait. */
.trace__plan {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 1 9;
  opacity: 0.34;
}

/* Portion parcourue : elle se dessine, pilotée en JavaScript. */
.trace__vol {
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.9;
}

/* Le drone à la pointe du tracé. Positionné en pixels par le
   JavaScript, pour ne pas subir la déformation du viewBox. */
.trace__drone {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--gold-400);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.trace__drone::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid var(--gold-500);
  opacity: 0.45;
  animation: halo-drone 2.6s ease-out infinite;
}
@keyframes halo-drone {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50%      { transform: scale(2.1); opacity: 0; }
}

/* Le tracé du hero se superpose à la photographie, en bas à droite.
   Réservé aux grands écrans : ailleurs, la photo occupe toute la
   largeur et le tracé deviendrait illisible. */
@media (min-width: 1024px) {
  }

/* ══════════════════════════════════════════════════════════════
   Parallaxe
   Deux plans qui ne remontent pas à la même vitesse : c'est
   l'écart entre eux qui crée la profondeur, pas l'amplitude.
   ══════════════════════════════════════════════════════════════ */

.parallaxe {
  position: absolute;
  inset: -8%;
  will-change: transform;
}
.parallaxe > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Hero : le contenu remonte plus vite que la photographie ── */
.js .hero__photo { will-change: transform; }
.js .hero__contenu { will-change: transform, opacity; }

/* La photographie s'ouvre au chargement. */
.js .hero__photo img {
  animation: ouverture-hero 2.4s var(--ease) both;
}
@keyframes ouverture-hero {
  from { transform: scale(1.14); }
  to   { transform: none; }
}

/* ── Barre de progression, façon télémétrie ──
   Un filet doré sous l'en-tête : où en est la lecture. */
.progression {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.site-header.est-defile .progression { opacity: 0.7; }

/* ── Bandeau de faits : les entrées se posent en séquence ── */
.faits__item {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.6s ease, transform 0.7s var(--ease);
}
.faits.est-visible .faits__item { opacity: 1; transform: none; }
.faits.est-visible .faits__item:nth-child(1) { transition-delay: 0.05s; }
.faits.est-visible .faits__item:nth-child(2) { transition-delay: 0.11s; }
.faits.est-visible .faits__item:nth-child(3) { transition-delay: 0.17s; }
.faits.est-visible .faits__item:nth-child(4) { transition-delay: 0.23s; }
.faits.est-visible .faits__item:nth-child(5) { transition-delay: 0.29s; }

/* ── Index des prestations : le survol déplace le regard ──
   Un filet doré traverse la ligne survolée, de gauche à droite. */
.prestation-lien__ligne {
  position: relative;
}
.prestation-lien__ligne::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.25rem;
  height: 1px;
  width: 0;
  background: var(--gold-500);
  transition: width 0.8s var(--ease);
}
@media (min-width: 1024px) {
  .prestation-lien:hover .prestation-lien__ligne::after,
  .prestation-lien:focus-visible .prestation-lien__ligne::after { width: 100%; }
}

/* Le numéro de ligne s'éclaire avec le titre. */
.prestation-lien__num { transition: color 0.5s ease; }
.prestation-lien:hover .prestation-lien__num { color: var(--gold-400); }

/* ── Aperçu appelé au survol : volet vertical ── */
.index-prestations__apercu .cadre {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 0.7s var(--ease), opacity 0.5s ease;
}
.index-prestations__apercu .cadre.est-active {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
}

/* Sans JavaScript, tout le contenu reste lisible et immobile. */
.no-js .reveal,
.no-js .reveal-groupe > *,
.no-js .faits__item {
  opacity: 1;
  transform: none;
}
.no-js .lignes span > span { transform: none; }
.no-js .volet::after { display: none; }
.no-js .volet img { transform: none; }
.no-js .reticule span { opacity: 1; transform: none; }
.no-js .repere__filet { transform: scaleX(1); }
.no-js .hairlines span { transform: scaleY(1); }
.no-js .index-prestations__apercu .cadre:first-child { clip-path: none; opacity: 1; }
.no-js .trace__drone { display: none; }

/* ══════════════════════════════════════════════════════════════
   16. MOUVEMENT RÉDUIT ET IMPRESSION
   ══════════════════════════════════════════════════════════════ */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Neutraliser les transitions ne suffit pas : les états de départ
     laisseraient le contenu invisible. On les annule explicitement. */
  .reveal,
  .reveal-groupe > *,
  .faits__item {
    opacity: 1 !important;
    transform: none !important;
  }
  .lignes span > span { transform: none !important; }
  .volet::after { display: none; }
  .volet img { transform: none !important; }
  .reticule span { opacity: 1 !important; transform: none !important; }
  .repere__filet { transform: scaleX(1) !important; }
  .hairlines span { transform: scaleY(1) !important; }
  .parallaxe { transform: none !important; }
  .balayage { display: none; }
  .trace__drone { display: none; }
  .trace__plan { opacity: 0.5; }
  .index-prestations__apercu .cadre.est-active { clip-path: none !important; }
}

@media print {
  .site-header,
  .menu-mobile,
  .cta-final,
  .defiler,
  .hairlines,
  .halo,
  .grain,
  .trace,
  .balayage { display: none !important; }

  body { background: #fff; color: #000; }
  .body-text,
  .lede { color: #333; }
  a { text-decoration: underline; }

  /* Rien ne doit rester masqué à l'impression. */
  .reveal,
  .reveal-groupe > *,
  .lignes span > span,
  .faits__item {
    opacity: 1 !important;
    transform: none !important;
  }
  .volet::after { display: none !important; }
}