/* ==========================================================================
   Renovation ANB - feuille de style
   --------------------------------------------------------------------------
   Direction visuelle : industrielle / chantier.
   Quatre partis pris, repris de bout en bout :
     1. Titres en Barlow Condensed, CAPITALES, interlignage serre.
     2. Angles vifs (rayon quasi nul) : une carte doit avoir l'air coupee,
        pas moulee.
     3. Bandes sombres taillees en BIAIS -- c'est la seule diagonale du site,
        elle sert de respiration entre les blocs clairs.
     4. Un accent unique, le jaune, et il ne sert que de FOND : en texte il
        tombe a 1,55 de contraste sur blanc. Partout ou il faudrait ecrire,
        c'est --color-primary qui prend le relais.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; }

:root {
  --color-primary: #023198;
  --color-secondary: #2B57C4;
  --color-accent: #E3D24C;
  /* Bleu nuit des bandes sombres : en-tete, section video, pied de page.
     Plus profond que --color-primary, qui reste la couleur du TEXTE et des
     aplats moyens ; les deux cote a cote donnent la profondeur. */
  --color-ink: #0A1024;
  --color-ink-soft: #141D38;
  --color-background: #FFFFFF;
  --color-surface: #EDF1FB;
  --color-band: #F4F6FC;
  --color-text: #111A33;
  --color-text-secondary: #4F586E;
  --color-muted: #D9E0F4;
  --color-line: rgba(2, 49, 152, 0.13);
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
  --container: 1240px;
  /* Angles quasi vifs : 2 px suffisent a eviter l'escalier de pixels au
     rendu, sans donner l'arrondi "application mobile" qu'on ne veut pas. */
  --radius-button: 2px;
  --radius-card: 3px;
  --shadow-soft: 0 18px 38px rgba(10, 16, 36, 0.08);
  --shadow-lift: 0 26px 52px rgba(10, 16, 36, 0.16);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --header-offset: 6rem;
  /* Hauteur MESUREE de l'en-tete collant, que le hero plein ecran retranche
     de la fenetre. Trois valeurs, une par palier de l'en-tete. */
  --header-h: 5.03rem;
  /* Hauteur des coupes en biais. Bornee : en dessous de 28 px la diagonale
     ne se lit plus, au-dela de 72 px elle mange le contenu. */
  --slant: clamp(26px, 4.2vw, 68px);
}

html {
  scroll-behavior: smooth;
  /* `clip` seulement (pas de `hidden`) : il ne cree pas de conteneur de
     defilement, l'en-tete `sticky` continue de coller. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-background);
  /* Les bandes en biais et les trames de points debordent de quelques pixels
     sur les cotes. `clip` plutot que `hidden` : `hidden` ferait du <body> un
     conteneur de defilement, et l'en-tete `sticky` cesserait de coller dans
     les navigateurs qui ne propagent pas le debordement au viewport.
     La ligne `hidden` reste en secours pour ceux qui ignorent `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}

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

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

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

button, input, textarea {
  font: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

iframe {
  width: 100%;
  border: 0;
}

section[id] {
  scroll-margin-top: calc(var(--header-offset) + 1rem);
}

.container {
  position: relative;
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: 6rem 0;
}

/* --------------------------------------------------------------------------
   Titres
   Capitales et interlignage sous 1 : c'est ce qui donne le bloc compact des
   references. `text-wrap: balance` evite qu'une capitale isolee tombe seule
   sur la derniere ligne, ce qui se voit beaucoup plus en condense.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: 0.005em;
  color: var(--color-primary);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.9rem, 5.6vw, 4.9rem);
}

h2 {
  font-size: clamp(2rem, 3.9vw, 3rem);
}

h3 {
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

p {
  color: var(--color-text-secondary);
}

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   Filigrane de section
   Le mot de la section, en tres grand et presque transparent, DERRIERE son
   titre. Element reel et non `::before` : porte `aria-hidden`, il ne se
   retrouve donc pas lu deux fois par un lecteur d'ecran.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Parallaxe
   Le script ne pose qu'une variable, --px ou --py ; c'est la feuille de style
   qui decide de ce qu'on en fait. Deux consequences : la composition du
   `transform` reste ici (un survol qui ajoute une echelle n'ecrase donc pas
   le decalage), et l'amplitude est BORNEE par `clamp` -- une image ne peut
   pas se decaler plus loin que le debord que son agrandissement lui donne,
   donc pas de bande vide au bord de la carte.
   -------------------------------------------------------------------------- */
[data-parallax] {
  will-change: transform;
}

.section-watermark {
  display: block;
  transform: translate3d(clamp(-34px, var(--px, 0px), 84px), 0, 0);
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 10vw, 8.5rem);
  line-height: 0.78;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: right;
  color: rgba(2, 49, 152, 0.07);
  /* Marge negative : le titre reel remonte DANS le filigrane au lieu de se
     poser dessous. Sans cela on lirait deux titres empiles. */
  margin-bottom: 0.3em;
  pointer-events: none;
  user-select: none;
}

.section-dark .section-watermark,
#videos .section-watermark,
.footer-main .section-watermark {
  color: rgba(255, 255, 255, 0.07);
}

/* Le rappel de devis est pose sur la bande claire, pas sur le bleu nuit : son
   filigrane reste donc sombre, et il ne passe PAS derriere la carte -- celle-ci
   est blanche et le mangerait a moitie. */
.footer-cta-wrap .section-watermark {
  margin-bottom: -0.1em;
}

/* Trame de points : la texture discrete des blocs clairs. Posee en fond d'un
   pseudo-element pour rester sous le contenu et hors du flux. */
.dot-field::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 190px;
  height: 190px;
  background-image: radial-gradient(rgba(2, 49, 152, 0.22) 1.2px, transparent 1.2px);
  background-size: 13px 13px;
  pointer-events: none;
}

/* Posee en bas a gauche du bloc benefices : la colonne de texte s'arrete
   bien avant la pile de rangees d'en face, la trame occupe ce vide. */
.benefits-layout.dot-field::before {
  left: -2.5rem;
  bottom: -2.75rem;
}

/* Le titre de section : sur-titre barre d'un tiret, puis le titre, puis un
   filet court sous le titre -- bleu nuit sur le premier quart, jaune ensuite. */
.accent-divider {
  display: grid;
  gap: 0.7rem;
  max-width: 820px;
}

.accent-divider .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0;
}

.accent-divider .eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--color-accent);
}

.accent-divider :is(h1, h2)::after,
.centered-heading :is(h1, h2)::after,
.contact-heading h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 1.15rem;
  background: linear-gradient(90deg, var(--color-primary) 0 26px, var(--color-accent) 26px);
}

.centered-heading :is(h1, h2)::after {
  margin-inline: auto;
}

.contact-heading h2::after {
  background: linear-gradient(90deg, #FFFFFF 0 26px, var(--color-accent) 26px);
}

.section-heading {
  margin-bottom: 3rem;
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 2rem;
  align-items: end;
}

.centered-heading {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

.centered-heading p {
  margin-top: 1rem;
}

/* Panneaux. Le rayon est le seul reglage partage : les fonds sont poses cas
   par cas, une carte photo et un formulaire n'ont pas le meme besoin. */
.bevel-panel,
.bevel-panel-dark,
.service-card,
.benefit-card,
.contact-form,
.legal-card,
.testimonial-placeholder,
.map-layout,
.cta-band,
.footer-cta {
  border-radius: var(--radius-card);
}

.bevel-panel-dark {
  background: var(--color-ink);
  color: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.bevel-panel-dark h2,
.bevel-panel-dark p,
.bevel-panel-dark strong,
.bevel-panel-dark span,
.bevel-panel-dark a {
  color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   En-tete
   Barre BLANCHE pleine largeur : le logo bleu y est lisible sans version
   inversee, et la navigation en capitales espacees y tient sans cadre. Le
   contraste avec le hero sombre juste dessous fait la separation, un filet
   d'un pixel suffit a poser la barre quand la page defile.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 2px 14px rgba(10, 16, 36, 0.06);
  transition: box-shadow .3s ease;
}

/* Barre d'avancement de lecture, collee sous l'en-tete. `scaleX` et non une
   largeur : la mise a l'echelle est composee par le GPU, elle ne provoque
   donc pas de recalcul de mise en page a chaque pixel defile. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
}

/* Au-dela des premieres lignes, la barre se resserre et se detache : c'est
   ce qui signale qu'elle flotte au-dessus du contenu et non dedans. */
.site-header.is-stuck {
  box-shadow: 0 10px 28px rgba(10, 16, 36, 0.13);
}

.site-header.is-stuck .header-bar {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.site-header.is-stuck .brand-img {
  height: 38px;
}

/* Section en cours de lecture : meme trait que le survol, pose en dur. */
.nav-list a.is-current {
  color: var(--color-ink);
}

.nav-list a.is-current::after {
  transform: scaleX(1);
}

.header-bar {
  display: grid;
  /* 1fr auto 1fr : la navigation est centree sur la PAGE, pas dans l'espace
     que lui laisse le logo. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-radius: 0;
  transition: padding .3s ease;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.brand-img {
  height: 46px;
  width: auto;
  transition: height .3s ease;
}

.brand-txt {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* `display: contents` efface la BOITE du <nav> sans toucher au HTML : ses
   enfants deviennent des cases de la grille ci-dessus. */
.main-nav {
  display: contents;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5rem 0.85rem;
  white-space: nowrap;
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color .2s ease;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  color: var(--color-ink);
}

/* Meme trait que dans le tiroir mobile et le pied de page : une seule facon
   de marquer un lien survole sur tout le site. */
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.4rem;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.nav-list a:hover::after,
.nav-list a:focus-visible::after {
  transform: scaleX(1);
}

.mobile-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  white-space: nowrap;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mobile-nav a::after,
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.55rem;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.footer-links a::after {
  left: 0;
  right: auto;
  width: 100%;
  bottom: -2px;
}

.mobile-nav a:hover::after,
.mobile-nav a:focus-visible::after,
.footer-links a:hover::after,
.footer-links a:focus-visible::after {
  transform: scaleX(1);
}

.header-cta {
  justify-self: end;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-button);
  color: var(--color-primary);
  border: 1px solid var(--color-muted);
  background: var(--color-band);
}

/* Le bouton de fermeture vit DANS le tiroir, qui est reste bleu nuit : il
   reprend donc le blanc, contrairement au burger de la barre. */
.mobile-drawer .nav-toggle {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   Boutons
   Rectangles nets, libelle en capitales espacees, fleche accolee. La fleche
   est generee en CSS : elle ne doit pas se retrouver lue comme un mot.
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-button);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}

.button::after {
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
  transition: transform .25s ease;
}

.button:hover::after,
.button:focus-visible::after {
  transform: translateX(4px);
}

/* Texte bleu nuit et non blanc : sur ce jaune, le blanc tombe a 1,35 de
   contraste, le bleu nuit monte a 9,4. */
.button-primary {
  background: var(--color-accent);
  color: var(--color-primary);
  box-shadow: 0 12px 26px rgba(227, 210, 76, 0.3);
}

.button-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.button-secondary.on-dark {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.42);
}

.button-secondary.on-dark:hover,
.button-secondary.on-dark:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
}

.button:hover, .button:focus-visible,
.gallery-nav:hover, .gallery-nav:focus-visible,
.nav-toggle:hover, .nav-toggle:focus-visible,
.testimonial-placeholder:hover, .testimonial-placeholder:focus-within,
.legal-card:hover, .legal-card:focus-within {
  transform: translateY(-3px);
}

.button:hover, .button:focus-visible,
.gallery-nav:hover, .gallery-nav:focus-visible,
.testimonial-placeholder:hover, .testimonial-placeholder:focus-within,
.legal-card:hover, .legal-card:focus-within {
  box-shadow: var(--shadow-lift);
}

/* L'anneau de focus doit se voir sur le fond qui le porte. Le jaune ne
   ressort que sur le sombre et disparait sur le blanc : bleu nuit par
   defaut, jaune la ou le fond est sombre. */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.site-footer :focus-visible,
.section-dark :focus-visible,
#videos :focus-visible,
.lightbox :focus-visible,
.bevel-panel-dark :focus-visible,
.cta-band :focus-visible,
.hero-section :focus-visible,
.mobile-drawer :focus-visible {
  outline-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Hero plein ecran
   La photo tient toute la fenetre, largeur ET hauteur, moins la hauteur de
   l'en-tete : il est `sticky`, donc il occupe encore sa place dans le flux.
   `svh` plutot que `vh` : sur mobile c'est la hauteur qui reste quand la
   barre d'URL est deployee.
   Le bord bas est COUPE EN BIAIS -- la section claire du dessous remonte a
   droite. Le rembourrage bas absorbe la coupe pour qu'aucun texte n'y tombe.
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding: 4rem 0 calc(3rem + var(--slant));
  background-color: var(--color-ink);
  background-image: url("../images/hero1.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #FFFFFF;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

/* Le voile est un element a part, pas un `::before` : le hero porte deja
   l'image en fond, et un seul element ne peut pas empiler deux couches. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      98deg,
      rgba(10, 16, 36, 0.90) 0%,
      rgba(10, 16, 36, 0.72) 34%,
      rgba(10, 16, 36, 0.30) 66%,
      rgba(10, 16, 36, 0.10) 100%
    ),
    linear-gradient(to top, rgba(10, 16, 36, 0.5), transparent 42%);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: 44rem;
  padding: 1rem 0;
  /* Pas de `clamp` ici : le script borne deja le retard a 140 px, et le
     contenu du hero n'a aucun cadre a deborder. */
  transform: translate3d(0, var(--py, 0px), 0);
  opacity: var(--fade, 1);
  will-change: transform, opacity;
}

/* Le jaune ne passe pas en texte sur blanc, mais sur ce bleu nuit voile il
   monte a 9,4 : c'est ici, et seulement ici, qu'il peut ecrire. */
.hero-section .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-accent);
}

.hero-section .eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-accent);
}

.hero-section h1 {
  color: #FFFFFF;
  letter-spacing: 0.002em;
}

.hero-subheadline {
  max-width: 52ch;
  font-size: 1.08rem;
  margin-top: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.2rem;
}

/* Bandeau de reperes : chaque item porte son propre filet superieur, comme
   une colonne de chiffres cles. Barlow condense pour qu'ils se lisent
   d'un coup d'oeil et non comme une phrase. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.75rem;
  margin-top: 2.6rem;
}

.hero-trust li {
  min-width: 9.5rem;
  padding: 0.95rem 0 0;
  border-top: 2px solid rgba(255, 255, 255, 0.45);
  font-family: var(--font-heading);
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Fonds de section
   Alternance voulue : blanc, bande grise, degrade clair, blanc, BANDE SOMBRE
   (les videos), blanc. La seule bande sombre pleine largeur du corps de page
   sert de point d'appui au milieu du parcours.
   -------------------------------------------------------------------------- */
.section-surface {
  background: #FFFFFF;
}

.section-band {
  background: var(--color-band);
}

.section-accent-light {
  background: linear-gradient(180deg, rgba(43, 87, 196, 0.09), rgba(43, 87, 196, 0.02));
}

.section-dark {
  background: var(--color-ink);
}

.section-dark h2,
.section-dark p {
  color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Services
   Quatre colonnes separees par un filet, numerotees en chiffres EVIDES : le
   contour seul suffit a marquer la sequence sans concurrencer le titre.
   -------------------------------------------------------------------------- */
   .services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--color-line);
  }
  
  .service-card {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.6rem 2.2rem;
    background: transparent;
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    transition: background-color .3s ease;
  }
  .service-card-featured {
    background: rgba(2, 49, 152, 0.035);
  }
  
  
  /* Première carte */
  .service-card:first-child, .service-card:nth-child(4){
    padding-left: 0;
  }
  
  /* 3e et 6e cartes : fin de ligne */
  .service-card:nth-child(3),
  .service-card:nth-child(6) {
    border-right: 0;
  }
  /* Dernière ligne : pas besoin de bordure basse */
  .service-card:nth-child(4),
  .service-card:nth-child(5),
  .service-card:nth-child(6) {
    border-bottom: 0;
  }
  
  /* Filet d'accent au survol */
  .service-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--color-accent);
    transition: width .35s ease;
  }
  
  .service-card:hover::before,
  .service-card:focus-within::before {
    width: 100%;
  }
  
  .service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.4rem;
  }
  
  .service-index {
    font-family: var(--font-heading);
    font-size: 2.9rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(2, 49, 152, 0.32);
  }
  
  .service-card p {
    margin-top: 0.7rem;
  }
  
  .service-card :is(i, svg) {
    width: 1.85rem;
    height: 1.85rem;
    color: var(--color-primary);
  }
  
  /* Icônes */
  .service-card :is(i, svg),
  .benefit-card :is(i, svg),
  .testimonial-placeholder :is(i, svg),
  .contact-list :is(i, svg),
  .contact-mini-list :is(i, svg),
  .footer-contact :is(i, svg),
  .gallery-nav :is(i, svg),
  .lightbox button :is(i, svg),
  .legal-card :is(i, svg) {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .service-card :is(i, svg),
  .benefit-card :is(i, svg),
  .testimonial-placeholder :is(i, svg),
  .contact-list :is(i, svg),
  .contact-mini-list :is(i, svg),
  .gallery-nav :is(i, svg),
  .lightbox button :is(i, svg),
  .legal-card :is(i, svg) {
    color: var(--color-primary);
  }
  
  .service-card :is(i, svg) {
    width: 1.85rem;
    height: 1.85rem;
  }
  
  
  /* =========================================
     TABLETTE
     ========================================= */
  
  @media (max-width: 900px) {
  
    .services-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .service-card,
    .service-card:nth-child(4),
    .service-card:nth-child(5) {
      grid-column: span 1;
      padding-left: 1.6rem;
      border-right: 1px solid var(--color-line);
    }
  
    .service-card:nth-child(2n) {
      border-right: 0;
    }
  
    .service-card:nth-child(1) {
      padding-left: 0;
    }
  
  }
  
  
  /* =========================================
     MOBILE
     ========================================= */
  
  @media (max-width: 600px) {
  
    .services-grid {
      grid-template-columns: 1fr;
    }
  
    .service-card,
    .service-card:nth-child(4),
    .service-card:nth-child(5) {
      grid-column: 1;
      padding: 1.8rem 0;
      border-right: 0;
    }
  
    .service-card:first-child {
      padding-top: 1.8rem;
    }
  
  }

/* --------------------------------------------------------------------------
   Materiel
   Des cartes-photo, la ou les services voisins n'ont qu'une icone : ici
   l'image EST l'argument. Le numero est genere par un compteur CSS -- il
   suit l'ordre reel des cartes et ne demande rien au balisage.
   -------------------------------------------------------------------------- */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  counter-reset: materiel;
}

.equipment-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.equipment-card::before {
  counter-increment: materiel;
  content: counter(materiel, decimal-leading-zero);
  position: absolute;
  top: 0.55rem;
  left: 0.9rem;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(10, 16, 36, 0.55);
  pointer-events: none;
}

/* `aspect-ratio` plutot qu'une hauteur fixe : les quatre visuels gardent le
   meme cadrage quelle que soit la largeur de colonne.
   L'agrandissement de 1,22 n'est pas decoratif : il donne a l'image le debord
   dans lequel la parallaxe la fait glisser. */
.equipment-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Course bornee a 16 px : l'agrandissement de 1,22 ne donne qu'une
     vingtaine de pixels de reserve de chaque cote sur la plus petite des
     colonnes. Au-dela, la parallaxe decouvrirait une bande vide en haut ou
     en bas du cadre. */
  transform: translate3d(0, clamp(-16px, var(--py, 0px), 16px), 0) scale(1.22);
}

/* La legende doit passer DEVANT l'image : agrandie, celle-ci deborde de son
   cadre en haut comme en bas. Le haut est rogne par l'`overflow` de la carte,
   mais le bas retombait sur le texte et le masquait au defilement. D'ou le
   fond opaque et l'empilement explicite. */
.equipment-card figcaption {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.5rem;
  padding: 1.35rem 1.25rem 1.5rem;
  background: var(--color-background);
  border-top: 3px solid var(--color-primary);
}

.equipment-card:hover,
.equipment-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(2, 49, 152, 0.28);
  box-shadow: var(--shadow-lift);
}

/* --------------------------------------------------------------------------
   Benefices
   Une pile de rangees a filets, et non plus quatre cartes : les quatre
   points se lisent alors comme une liste d'engagements, dans l'ordre.
   -------------------------------------------------------------------------- */
.benefits-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: start;
}

.benefits-list {
  display: grid;
  gap: 0;
}

.benefit-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem 0.4rem;
  background: transparent;
  border-top: 1px solid rgba(2, 49, 152, 0.18);
  transition: padding-left .3s ease;
}

.benefit-card:last-child {
  border-bottom: 1px solid rgba(2, 49, 152, 0.18);
}

/* Le filet d'accent glisse sous la rangee survolee : meme geste que sur les
   cartes de service, une seule grammaire de survol pour tout le site. */
.benefit-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  transition: width .35s ease;
}

.benefit-card:hover::after,
.benefit-card:focus-within::after {
  width: 100%;
}

.benefit-card:hover {
  padding-left: 0.9rem;
}

.benefit-card :is(i, svg) {
  flex: 0 0 auto;
}

.benefit-card p {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.22rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Supports (page interieure)
   -------------------------------------------------------------------------- */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

.support-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.65rem;
  row-gap: 0.8rem;
  align-content: start;
  padding: 1.35rem;
  background: var(--color-background);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  transition: transform .25s ease, box-shadow .25s ease;
}

.support-accent {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 4px;
  height: 14px;
  background: var(--color-accent);
}

.support-card h3 {
  grid-column: 2;
  grid-row: 1;
}

.support-card p {
  grid-column: 2;
  color: var(--color-text-secondary);
}

.support-card:hover, .support-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* --------------------------------------------------------------------------
   Comparateur avant / apres
   La position du trait vit dans --pos, une seule variable que le script met
   a jour ; tout ce qui bouge (le volet, le trait, la poignee) s'y accroche.
   -------------------------------------------------------------------------- */
.compare {
  --pos: 50%;
  position: relative;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  touch-action: pan-y;
}

.compare-img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 70vh;
  object-fit: cover;
}

.gallery-item .compare {
  position: absolute;
  inset: 0;
}

.gallery-item .compare-img {
  max-height: none;
}

/* `clip-path` plutot qu'une largeur reduite : rogner la boite reduirait
   l'image avec elle. Ici la photo garde sa taille, on n'en montre qu'une
   partie -- les deux vues restent donc alignees au pixel pres. */
.compare-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}

.compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 12px rgba(10, 16, 36, 0.5);
  z-index: 2;
  pointer-events: none;
}

.compare-handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow-soft);
  z-index: 3;
  pointer-events: none;
}

.compare-handle :is(i, svg) {
  width: 1.35rem;
  height: 1.35rem;
}

/* Un <input type="range"> invisible plutot qu'un glisser maison : le
   navigateur fournit le suivi du pointeur, le tactile et les fleches du
   clavier, et l'element reste annonce comme un curseur. */
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  -webkit-appearance: none;
  appearance: none;
}

.compare-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 100%;
}

.compare-range::-moz-range-thumb {
  width: 46px;
  height: 100%;
  border: 0;
}

.compare-range:focus-visible {
  outline: none;
}

.compare:has(.compare-range:focus-visible) .compare-handle {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Galerie
   -------------------------------------------------------------------------- */
.gallery-header {
  display: grid;
  gap: 0.75rem;
  max-width: 70ch;
  margin-bottom: 2rem;
}

.gallery-shell {
  padding: 0;
}

.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.gallery-nav {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-button);
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-line);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.gallery-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.gallery-dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Des barres et non des pastilles : meme vocabulaire que les filets qui
   ponctuent le reste de la page. */
.gallery-dot {
  width: 26px;
  height: 4px;
  background: rgba(2, 49, 152, 0.2);
  transition: background-color .25s ease, width .25s ease;
}

.gallery-dot.is-active {
  width: 44px;
  background: var(--color-accent);
}

/* Le carrousel repose sur une translation et non sur un conteneur defilant :
   pas de barre de defilement, pas de glissement parasite a la molette. */
.gallery-viewport {
  overflow: hidden;
  overflow: clip;
}

.gallery-track {
  display: flex;
  gap: 1rem;
  transition: transform .45s ease;
  will-change: transform;
}

.gallery-item {
  position: relative;
  /* Trois cartes par vue, deux intervalles de 1rem a retrancher. */
  flex: 0 0 calc((100% - 2rem) / 3);
  overflow: hidden;
  min-height: 320px;
  max-height: 340px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.gallery-item::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(10, 16, 36, 0.75), transparent);
  transition: opacity .25s ease;
  z-index: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.gallery-item:hover img,
.gallery-item:focus-within img {
  transform: scale(1.04);
}

/* L'etiquette « Apres » vit DANS la couche du dessus : elle est donc rognee
   par le meme `clip-path` que la photo. « Avant » reste sur la couche du bas.
   `right: 3.4rem` degage la pastille d'agrandissement. */
.compare-tag {
  position: absolute;
  top: 0.8rem;
  z-index: 4;
  padding: 0.3rem 0.62rem;
  border-radius: var(--radius-button);
  background: var(--color-ink);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}

.compare-tag-avant { left: 0.8rem; }
.compare-tag-apres { right: 3.4rem; }

/* Le libelle passe en bas a gauche, a meme la photo : le degrade du
   `::before` lui sert de fond, une pastille de plus alourdissait la carte. */
.gallery-label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  max-width: calc(100% - 2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 0.55rem;
  border-top: 2px solid var(--color-accent);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Le bouton est reduit a une pastille de coin, et pose AU-DESSUS du curseur
   pour rester cliquable malgre le comparateur qui couvre la carte. */
.gallery-open {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-button);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(10, 16, 36, 0.72);
  color: #fff;
  cursor: zoom-in;
  transition: background-color .25s ease;
}

.gallery-open:hover, .gallery-open:focus-visible {
  background: rgba(10, 16, 36, 0.94);
}

.gallery-open :is(i, svg) {
  width: 1.05rem;
  height: 1.05rem;
}

/* --------------------------------------------------------------------------
   Videos
   La seule bande sombre pleine largeur du corps de page, et elle est taillee
   en biais en haut. La marge negative compense la coupe : sans elle, la
   section precedente perdrait une bande de sa hauteur.
   -------------------------------------------------------------------------- */
#videos.section {
  background: var(--color-ink);
  margin-top: calc(var(--slant) * -1);
  padding-top: calc(6rem + var(--slant));
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}

#videos h2,
#videos h3 {
  color: #FFFFFF;
}

#videos p {
  color: rgba(255, 255, 255, 0.78);
}

#videos .eyebrow {
  color: var(--color-accent);
}

#videos .accent-divider .eyebrow::before {
  background: var(--color-accent);
}

#videos .accent-divider h2::after {
  background: linear-gradient(90deg, #FFFFFF 0 26px, var(--color-accent) 26px);
}

.video-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}

.video-intro {
  justify-items: start;
  align-content: start;
}

/* Selecteur double pour passer devant le `max-width` de .accent-divider,
   declare plus haut. Sans `align-self`, la colonne etiree allongerait le
   filet bien au-dela du texte. */
.video-intro.accent-divider {
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
  align-self: start;
}

.video-intro p + p {
  margin-top: 0.35rem;
}

.video-intro .button {
  margin-top: 1.1rem;
}

.video-slider {
  display: grid;
  gap: 1rem;
}

.video-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.video-track::-webkit-scrollbar {
  display: none;
}

.video-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
}

/* Cadre de taille FIXE : les sources melangent du 9/16 et du 3/4, et sans lui
   la largeur du lecteur -- donc toute la mise en page -- sautait a chaque
   changement de sequence. */
.video-frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 30rem;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-ink-soft);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La legende passe SUR la video. Les commandes natives ont ete retirees --
   les sequences sont muettes, en boucle, et le script ne joue que celle qui
   est a l'ecran : il n'y a plus de barre de lecture a degager, d'ou le
   rembourrage bas ramene a la normale. `pointer-events: none` reste : la
   legende ne doit pas intercepter un glissement du carrousel. */
.video-frame figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 0.35rem;
  padding: 2.6rem 1.3rem 1.4rem;
  color: #fff;
  text-align: left;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 16, 36, 0.95) 0%,
    rgba(10, 16, 36, 0.8) 42%,
    rgba(10, 16, 36, 0) 100%
  );
}

.video-frame figcaption h3 {
  color: #fff;
  padding-top: 0.6rem;
  border-top: 2px solid var(--color-accent);
  justify-self: start;
}

.video-frame figcaption p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.94rem;
}

.video-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.video-controls .gallery-nav {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.video-controls .gallery-nav :is(i, svg) {
  color: #FFFFFF;
}

.video-dots {
  display: flex;
  gap: 0.4rem;
}

.video-dot {
  width: 22px;
  height: 4px;
  border: 0;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}

.video-dot.is-active {
  width: 40px;
  background: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Bande devis
   -------------------------------------------------------------------------- */
.section-cta {
  padding: 6rem 0;
  background: #FFFFFF;
}

.cta-band {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 2.5rem;
  align-items: start;
  padding: 2.75rem 2.5rem;
  background: linear-gradient(120deg, var(--color-ink) 0%, var(--color-primary) 100%);
}

/* Trame de points dans l'angle : la meme texture que les blocs clairs,
   inversee en clair sur le fond sombre. */
.cta-band::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 210px;
  height: 210px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.2px);
  background-size: 13px 13px;
  pointer-events: none;
}

.cta-band h2,
.cta-band p,
.cta-band li {
  color: #FFFFFF;
  position: relative;
  z-index: 1;
}

.cta-band .eyebrow {
  color: var(--color-accent);
}

.cta-band h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 1.1rem;
  background: linear-gradient(90deg, #FFFFFF 0 26px, var(--color-accent) 26px);
}

.cta-band p {
  margin-top: 1.2rem;
  color: rgba(255, 255, 255, 0.82);
}

.cta-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.5rem;
  margin-top: 1.8rem;
}

.cta-points li {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.95rem;
}

.cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   Avis
   -------------------------------------------------------------------------- */
.testimonial-placeholder {
  padding: 2rem;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-muted);
  transition: transform .25s ease, box-shadow .25s ease;
}

.testimonial-placeholder i {
  width: 2rem;
  height: 2rem;
  margin-bottom: 1rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem 1.75rem;
  background: #FFFFFF;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-primary);
  transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-top-color: var(--color-accent);
  box-shadow: var(--shadow-lift);
}

.testimonial-card > :is(i, svg) {
  width: 1.9rem;
  height: 1.9rem;
  color: rgba(2, 49, 152, 0.28);
}

.testimonial-quote {
  flex: 1;
  font-size: 1rem;
  line-height: 1.65;
}

/* Les etoiles sont decoratives : le nom de l'auteur porte l'information. */
.testimonial-stars {
  display: flex;
  gap: 0.15rem;
  color: var(--color-accent);
}

.testimonial-stars :is(i, svg) {
  width: 1rem;
  height: 1rem;
  color: inherit;
  fill: currentColor;
}

.testimonial-author {
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-line);
}

.testimonial-author strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.testimonial-author span {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Localisation
   -------------------------------------------------------------------------- */
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2rem;
  padding: 1.25rem;
  overflow: hidden;
  background: var(--color-band);
  border: 1px solid var(--color-line);
}

.map-copy {
  padding: 1.25rem;
}

.contact-mini-list {
  margin-top: 1.75rem;
  display: grid;
  gap: 1rem;
}

.contact-mini-list li,
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.map-frame iframe {
  min-height: 380px;
  height: 100%;
  border-radius: var(--radius-card);
  /* La carte Google arrive tres saturee a cote d'une page bleu nuit : on la
     desature legerement pour qu'elle se tienne dans la meme gamme. */
  filter: saturate(0.85) contrast(1.02);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.section-contact {
  background: linear-gradient(180deg, rgba(43, 87, 196, 0.1), transparent);
}

.contact-block {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.contact-panel,
.contact-form {
  padding: 2rem;
}

/* Meme empilement que .accent-divider : le filet sous le titre est repris
   plus haut, en blanc, pour le panneau sombre. */
.contact-heading {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
}

.contact-panel .eyebrow {
  color: var(--color-accent);
}

.contact-panel p {
  color: rgba(255, 255, 255, 0.82);
}

.contact-list {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.contact-list :is(i, svg) {
  color: var(--color-accent);
}

.contact-list strong {
  display: block;
  font-size: 1rem;
}

.contact-list span {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.contact-form {
  background: #FFFFFF;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-soft);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.field label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.78rem 0.9rem;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-button);
  background: var(--color-band);
  color: var(--color-text);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.field input:focus,
.field textarea:focus {
  outline: 0;
  background: #FFFFFF;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(2, 49, 152, 0.14);
}

.checkbox-field {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
}

.checkbox-field label {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-secondary);
}

.checkbox-field input {
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

.form-submit {
  width: 100%;
}

.form-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.form-status {
  margin: 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.95rem;
}

.form-status.is-error {
  border-left-color: #B42318;
  background: #FDECEA;
  color: #7A1A12;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--color-ink);
}

/* Le bandeau clair recouvre le haut du pied : la carte de rappel le
   chevauche donc a moitie, moitie clair moitie bleu nuit. */
.footer-cta-wrap {
  padding: 3.5rem 0 2rem;
  background: var(--color-band);
}

.footer-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.9rem 2.25rem;
  background: #FFFFFF;
  border: 1px solid rgba(2, 49, 152, 0.25);
  box-shadow: var(--shadow-soft);
  transform: translateY(2rem);
}

.footer-cta h2 {
  margin-top: 0.2rem;
}

.footer-main {
  padding: 5rem 0 1.5rem;
}

.footer-main-simple {
  padding-top: 3rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1fr;
  gap: 2.5rem;
}

.footer-grid h3 {
  position: relative;
  color: #FFFFFF;
  padding-bottom: 0.8rem;
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
}

.footer-grid h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--color-accent);
}

.footer-brand .brand-img {
  height: 52px;
}

.footer-tagline {
  margin-top: 1rem;
  max-width: 34ch;
}

.footer-tagline,
.footer-bottom p,
.footer-contact span,
.footer-contact a,
.footer-links a {
  color: rgba(255, 255, 255, 0.78);
}

.footer-links a {
  position: relative;
  display: inline-block;
  font-size: 0.92rem;
  transition: color .2s ease;
}

.footer-links a:hover {
  color: #FFFFFF;
}

.footer-links li + li {
  margin-top: 0.7rem;
}

.footer-contact li + li {
  margin-top: 0.9rem;
}

/* L'accent manque de contraste sur le bleu nuit : les icones reprennent le
   blanc du texte qui les accompagne. */
.footer-contact :is(i, svg) {
  color: rgba(255, 255, 255, 0.78);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Page mentions legales
   -------------------------------------------------------------------------- */
.legal-page {
  padding-top: 4rem;
}

.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.legal-card {
  padding: 1.75rem;
  background: #FFFFFF;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-primary);
  transition: transform .25s ease, box-shadow .25s ease;
}

.legal-card h2,
.legal-card h3 {
  margin-bottom: 0.7rem;
}

.legal-card p + p {
  margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   Apparition au defilement
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Visionneuse
   -------------------------------------------------------------------------- */
.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 16, 36, 0.94);
}

.lightbox-figure {
  max-width: min(92vw, 1100px);
}

/* Dans la visionneuse, c'est la photo qui donne sa taille au comparateur :
   les paires n'ont pas le meme format, un cadre fixe les aurait encadrees de
   bandes vides. La vue « avant » reste dans le flux et dimensionne la boite. */
.lightbox-compare {
  height: auto;
  min-height: 0;
  border-radius: var(--radius-card);
}

.lightbox-compare .compare-img {
  width: auto;
  height: auto;
  max-width: min(92vw, 1100px);
  max-height: 80vh;
  object-fit: contain;
}

/* Les deux vues ont exactement les memes dimensions d'origine : etirer
   celle-ci sur la boite la recale donc au pixel pres sur l'autre. */
.lightbox-compare .compare-after .compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Photo de chantier seule : il n'y a rien a comparer, tout l'appareillage du
   curseur disparait. */
.lightbox-compare.is-solo :is(.compare-after, .compare-line, .compare-handle, .compare-range) {
  display: none;
}

.lightbox-caption {
  margin-top: 0.9rem;
  text-align: center;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Au-dessus du comparateur : sur un ecran etroit la photo occupe presque
   toute la largeur, et le curseur passait devant les fleches. */
.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-button);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  transition: transform .25s ease, background-color .25s ease;
}

.lightbox button :is(i, svg) {
  color: #FFFFFF;
}

.lightbox-close:hover,
.lightbox-close:focus-visible,
.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

/* --------------------------------------------------------------------------
   Menu mobile
   -------------------------------------------------------------------------- */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 36, 0.6);
  z-index: 39;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(78vw, 360px);
  height: 100vh;
  padding: 1rem;
  background: var(--color-ink);
  transform: translateX(100%);
  /* Range hors ecran, un element fixe echappe au `clip` du <body> : sur
     mobile la page s'elargissait de toute la largeur du tiroir. Masque une
     fois la glissade finie, il ne compte plus (et ses liens sortent de la
     tabulation). */
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
  z-index: 40;
  box-shadow: -20px 0 40px rgba(10, 16, 36, 0.4);
}

.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .3s ease;
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.mobile-drawer-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.mobile-drawer .nav-toggle {
  display: inline-flex;
}

.mobile-nav {
  display: grid;
  gap: 0.2rem;
}

.mobile-cta {
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Colonnes collantes
   Seulement au-dessus de 1024 px : en pile, une colonne collante bloquerait
   le texte en haut de l'ecran pendant tout le defilement du bloc d'en face.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .benefits-copy,
  .video-intro.accent-divider {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* ==========================================================================
   Adaptations
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --header-h: 4.69rem; }
  .nav-toggle { display: inline-flex; justify-self: end; }
  .nav-list,
  .header-cta { display: none; }
  /* Deux colonnes seulement : le burger prend la place du bouton, sinon il
     se retrouverait au centre, la ou vivait la navigation. */
  .header-bar { grid-template-columns: 1fr auto; }
  .split-heading,
  .benefits-layout,
  .gallery-header,
  .map-layout,
  .contact-block,
  .cta-band,
  .footer-cta,
  .video-layout,
  .legal-grid {
    grid-template-columns: 1fr;
  }
  /* En pile, le texte passe au-dessus : le lecteur n'a plus besoin de la
     hauteur d'un ecran entier pour rester visible a cote de lui. */
  .video-frame {
    max-width: 420px;
  }
  .video-intro.accent-divider {
    max-width: none;
  }
  .gallery-item {
    flex-basis: calc((100% - 1rem) / 2);
  }
  /* Navigation et Coordonnees restent cote a cote : deux listes courtes. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
  /* Les services repassent en deux colonnes : les filets verticaux ne
     tiennent plus a quatre, et le premier/dernier retrouvent leur marge. */
  .services-grid {
    grid-template-columns: 1fr 1fr;
    border-left: 1px solid var(--color-line);
  }
  /* 4 et 5 sont nommees : les regles `:nth-child` plus haut leur retirent la
     marge gauche et, plus precises que `.service-card`, l'emporteraient. */
  .service-card,
  .service-card:first-child,
  .service-card:nth-child(4),
  .service-card:nth-child(5),
  .service-card:last-child {
    padding: 1.75rem 1.4rem;
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
  }
  .applications-grid,
  .form-row,
  .cta-points,
  .testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  :root { --header-offset: 5.5rem; --header-h: 4.49rem; }
  .section { padding: 4.5rem 0; }
  #videos.section { padding-top: calc(4.5rem + var(--slant)); }
  /* Marges resserrees : sur telephone la colonne de texte est haute (titre,
     accroche, deux boutons empiles, trois reperes). */
  .hero-section { padding: 2.25rem 0 calc(2rem + var(--slant)); }
  .hero-copy { max-width: none; }
  .header-bar { padding: 0.8rem 1rem; }
  .brand-img { height: 48px; }
  .section-heading { margin-bottom: 2.25rem; }
  .services-grid,
  .applications-grid,
  .form-row,
  .cta-points,
  .testimonial-grid,
  .legal-grid {
    grid-template-columns: 1fr;
  }
  .cta-band {
    padding: 2rem 1.5rem;
  }
  .contact-panel,
  .contact-form {
    padding: 1.5rem;
  }
  .footer-cta {
    padding: 1.5rem;
  }
  .gallery-item {
    flex-basis: 100%;
    min-height: 280px;
  }
  /* Sur telephone, les deux boutons prennent toute la largeur : cote a cote
     ils se retrouvaient de tailles differentes. */
  .cta-actions,
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  /* Le pied revient a une colonne : a 390 px, l'adresse ne tient pas dans une
     demi-largeur. */
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-trust {
    gap: 0 1.5rem;
  }
  .hero-trust li {
    min-width: 0;
    flex: 1 1 8rem;
    font-size: 1.2rem;
  }
  .dot-field::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track {
    transition: none;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  /* Le script cesse de poser --px/--py, mais les transformations restent
     declarees : on les annule ici, sans quoi la derniere valeur posee avant
     un changement de reglage resterait figee a l'ecran. */
  .section-watermark,
  .equipment-card img,
  .hero-copy {
    transform: none !important;
  }
  .hero-copy {
    opacity: 1 !important;
  }
}