/* =========================================================
   WL Vitrerie Solution — maquette LuxAura Studio
   Site multi-pages : accueil · réalisations · services ·
   à propos · soumission · légal. Une seule feuille.

   Palette échantillonnée sur SON identité :
   bleu du logo #06449B · marine de son site #0B2F5B ·
   vert de ses boutons #125C4D · marine nuit #071C36.

   Direction : « Soft Structuralism » — blanc généreux,
   filets fins, ombres très diffuses, photos encadrées en
   double bordure (verre dans son cadre d'aluminium).
   Angles nets volontairement conservés (2-3 px) : le verre
   et l'aluminium ne sont pas des galets.

   Planchers de taille : desktop 1,1rem partout ; mobile
   selon le tableau par type d'élément du CLAUDE.md.
   ========================================================= */

@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --marine:      #0B2F5B;
  --marine-nuit: #071C36;
  --bleu:        #06449B;
  --vert:        #125C4D;
  --vert-vif:    #17705E;
  --encre:       #14202E;
  --gris-txt:    #46525F;
  --gris-fond:   #F3F6FA;
  --gris-verre:  #E8EEF6;
  --filet:       rgba(11, 47, 91, .14);
  --filet-fin:   rgba(11, 47, 91, .09);
  --blanc:       #fff;
  --ombre:       0 1px 2px rgba(11,47,91,.04), 0 14px 34px -22px rgba(11,47,91,.30);
  --ombre-fort:  0 2px 5px rgba(11,47,91,.05), 0 34px 70px -34px rgba(11,47,91,.42);
  --ombre-flot:  0 40px 90px -46px rgba(11,47,91,.50);
  --titre: 'Archivo Black', 'Segoe UI', system-ui, sans-serif;
  --corps: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Courbe unique du site : masse et ressort, jamais un ease-in-out. */
  --courbe: cubic-bezier(.32, .72, 0, 1);
  --rythme: clamp(4rem, 7.5vw, 7.5rem);   /* respiration verticale des sections */
  color-scheme: light;
}

/* ---------- Reset court ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--corps);
  font-size: 1.1rem;
  line-height: 1.62;
  color: var(--encre);
  background: var(--blanc);
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; display: block; }
a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.int { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }
.int-etroit { width: min(100% - 2.5rem, 900px); margin-inline: auto; }

.saut {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--marine); color: #fff; padding: .8rem 1.2rem; font-size: 1.1rem;
}
.saut:focus { left: .5rem; top: .5rem; }

/* ---------- Typo commune ----------
   --ts = échelle des titres, --ink-* = encres pilotées par la barre d'aperçu. */
h1, .h1, .h2, .h3, .h4 {
  font-family: var(--titre); font-weight: 400; line-height: 1.08; letter-spacing: -.018em;
}
.h1 {
  font-size: calc(clamp(1.85rem, 5.4vw, 3.5rem) * var(--ts, 1));
  color: var(--ink-titre, var(--marine)); line-height: 1.02; text-wrap: balance;
}
.h2 { font-size: calc(clamp(1.55rem, 3.4vw, 2.6rem) * var(--ts, 1)); color: var(--ink-titre, var(--marine)); margin-bottom: 1rem; text-wrap: balance; }
.h3 { font-size: calc(1.22rem * var(--ts, 1)); color: var(--ink-titre, var(--marine)); margin-bottom: .55rem; letter-spacing: -.012em; }
.h4 { font-size: calc(1.15rem * var(--ts, 1)); color: var(--ink-titre, var(--marine)); margin-bottom: .7rem; }

/* Sur-titre de section : un filet court puis le mot, sans fond ni contour —
   ce n'est PAS une pastille (aucun badge au-dessus d'un héros). */
.etiquette {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 1.1rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-accent, var(--bleu)); font-weight: 600;
  margin-bottom: 1.1rem; line-height: 1.2;
}
.etiquette::before {
  content: ""; width: 1.9rem; height: 1px; flex: 0 0 auto;
  background: currentColor; opacity: .55;
}

.intro { max-width: 62ch; color: var(--ink-doux, var(--gris-txt)); margin-bottom: 2.8rem; }
.mesure { max-width: 66ch; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 52px; padding: .8rem 1.5rem;
  font-family: var(--corps); font-size: 1.1rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent; border-radius: 3px; cursor: pointer;
  text-decoration: none; position: relative;
  transition: background .45s var(--courbe), transform .35s var(--courbe),
              box-shadow .45s var(--courbe), border-color .45s var(--courbe), color .45s var(--courbe);
}
.btn:active { transform: scale(.985); }
/* Flèche « bouton dans le bouton » : jamais nue à côté du mot. */
.btn-fl {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); font-size: .95rem; line-height: 1;
  transition: transform .45s var(--courbe), background .45s var(--courbe);
}
.btn:hover .btn-fl { transform: translate(2px, -1px) scale(1.06); background: rgba(255,255,255,.26); }

.btn-vert { background: var(--vert); color: #fff; box-shadow: 0 14px 30px -18px rgba(18,92,77,.95); }
.btn-vert:hover { background: var(--vert-vif); transform: translateY(-2px); box-shadow: 0 20px 38px -18px rgba(18,92,77,.85); }
.btn-clair { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-clair:hover { background: rgba(255,255,255,.20); transform: translateY(-2px); }
.btn-ligne {
  background: transparent; color: var(--ink-titre, var(--marine));
  border-color: color-mix(in srgb, currentColor 26%, transparent);
}
.btn-ligne .btn-fl { background: color-mix(in srgb, currentColor 10%, transparent); }
.btn-ligne:hover { border-color: currentColor; transform: translateY(-2px); }
.btn-ligne:hover .btn-fl { background: color-mix(in srgb, currentColor 16%, transparent); }
.btn-sm { min-height: 46px; padding: .5rem 1.15rem; font-size: 1.1rem; }
.btn-bloc { width: 100%; margin-top: .4rem; }

/* Lien fléché discret, pour les fins de bloc. */
.lien-fl {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
  text-decoration: none; color: var(--ink-accent, var(--bleu));
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  padding-bottom: .15rem; transition: gap .45s var(--courbe), border-color .45s var(--courbe);
}
.lien-fl:hover { gap: .85rem; border-bottom-color: currentColor; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.90);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .5s var(--courbe), box-shadow .5s var(--courbe), background .5s var(--courbe);
}
body.defile .entete {
  background: rgba(255,255,255,.94);
  border-bottom-color: var(--filet-fin);
  box-shadow: 0 18px 40px -34px rgba(11,47,91,.65);
}
.entete-int {
  width: min(100% - 2.5rem, 1200px); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem; min-height: 82px;
}
.marque { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; text-decoration: none; }
.marque img { width: auto; height: 38px; }
.marque-mot {
  font-family: var(--titre); font-size: 1.1rem; line-height: 1.02;
  color: var(--marine); letter-spacing: -.018em;
}

.nav { margin-left: auto; display: flex; gap: 1.35rem; min-width: 0; }
.nav a {
  color: var(--marine); text-decoration: none; font-size: 1.1rem; font-weight: 500;
  padding: .4rem 0; position: relative; white-space: nowrap;
  transition: color .4s var(--courbe);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--vert); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--courbe);
}
.nav a:hover { color: var(--bleu); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--bleu); font-weight: 600; }

.entete-actions { display: flex; align-items: center; gap: .8rem; margin-left: 1.2rem; }
.tel-entete { color: var(--marine); font-weight: 700; text-decoration: none; font-size: 1.1rem; white-space: nowrap; transition: color .4s var(--courbe); }
.tel-entete:hover { color: var(--bleu); }

.burger {
  display: none; width: 48px; height: 48px; background: none; border: 1px solid var(--filet);
  border-radius: 3px; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--marine); transition: transform .45s var(--courbe), opacity .3s var(--courbe); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Héros cinématographique (accueil) ---------- */
.heros { position: relative; background: var(--marine-nuit); }
.heros-image img {
  width: 100%; height: clamp(440px, 78svh, 700px); object-fit: cover; object-position: 58% 42%;
}
.heros-corps {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  width: min(100% - 2.5rem, 1200px); margin-inline: auto; left: 0; right: 0;
  padding-bottom: clamp(1.5rem, 4vw, 3.4rem);
  pointer-events: none;
}
/* Scrim LOCAL : un panneau derrière le seul bloc de texte — aucune
   teinte sur le reste de la photo (règle du 25 août 2026).
   Contraste mesuré au diff-de-glyphes : pire cas 7,88:1 (blanc sur scrim). */
.heros-texte {
  pointer-events: auto;
  max-width: 43rem;
  padding: clamp(1.25rem, 2.4vw, 2.1rem) clamp(1.15rem, 2.4vw, 2.2rem);
  border-left: 3px solid var(--vert);
  background: var(--scrim, linear-gradient(102deg, rgba(7,28,54,.95) 0%, rgba(7,28,54,.90) 68%, rgba(7,28,54,.86) 100%));
  -webkit-backdrop-filter: blur(7px) saturate(1.05); backdrop-filter: blur(7px) saturate(1.05);
  box-shadow: 0 30px 66px -32px rgba(0,0,0,.78);
}
.sur-titre {
  font-size: 1.1rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-doux, #B7CFF1); margin-bottom: .75rem;
}
.heros h1 {
  font-family: var(--titre); font-size: calc(clamp(1.7rem, 7.2vw, 3.35rem) * var(--ts, 1));
  line-height: 1.02; color: var(--ink-titre, #fff); margin-bottom: .85rem; text-wrap: balance;
}
.heros-p { color: var(--ink-doux, #E4ECF7); font-size: 1.1rem; max-width: 46ch; margin-bottom: 1.5rem; }
.heros-btns { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- Tête de page (pages intérieures) ----------
   Découpe éditoriale : la typographie occupe la gauche,
   la photo s'assied dans son cadre à droite. */
.tete {
  background: var(--bg, var(--gris-fond));
  border-bottom: 1px solid var(--filet-fin);
  padding: clamp(2.6rem, 5.5vw, 5rem) 0 clamp(2.6rem, 5.5vw, 4.6rem);
}
.tete-grille {
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.8rem, 4.5vw, 4rem);
  align-items: center;
}
.tete-txt { min-width: 0; }
.tete-txt .h1 { margin-bottom: 1.1rem; }
.tete-p { color: var(--ink-doux, var(--gris-txt)); max-width: 52ch; font-size: 1.15rem; }
.tete-btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
.tete-solo .tete-grille { grid-template-columns: 1fr; }
.tete-solo .tete-p { max-width: 62ch; }

/* Tête sombre (soumission) */
.tete-sombre {
  --bg: var(--marine-nuit); --ink-titre: #fff; --ink-doux: #C6D6E9; --ink-accent: #9CC0EF;
  color: var(--ink-doux); border-bottom: 0;
}
.tete-sombre .tete-p { color: var(--ink-doux); }

/* ---------- Cadre « double bordure » : le verre dans son cadre ---------- */
.cadre {
  background: var(--gris-verre);
  border: 1px solid var(--filet-fin);
  border-radius: 4px; padding: 8px;
  box-shadow: var(--ombre-flot);
}
.cadre img { width: 100%; height: auto; border-radius: 2px; display: block; }
.cadre-fonce { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }

/* ---------- Bandeau de repères ---------- */
.confiance { background: var(--bg, var(--marine)); color: var(--ink-titre, #fff); }
.confiance-grille { display: grid; grid-template-columns: repeat(4, 1fr); padding: 1.9rem 0; }
.conf-item { padding: .35rem 1.4rem; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); min-width: 0; }
.conf-item:first-child { border-left: 0; padding-left: 0; }
.conf-cle { font-family: var(--titre); font-size: calc(1.1rem * var(--ts, 1)); letter-spacing: -.012em; line-height: 1.25; overflow-wrap: anywhere; }
.conf-note { font-size: 1.1rem; color: var(--ink-doux, #B7CFF1); margin-top: .3rem; line-height: 1.4; overflow-wrap: anywhere; }

/* Même grille, mais posée sur un fond clair (carte d'identité). */
.identite { padding: 0; color: var(--ink-titre, var(--encre)); }
.identite .conf-cle { color: var(--ink-titre, var(--marine)); }
.identite .conf-note { color: var(--ink-doux, var(--gris-txt)); }

/* ---------- Sections ---------- */
.section { padding: var(--rythme) 0; background: var(--bg, transparent); }
.section-gris { --bg: var(--gris-fond); border-top: 1px solid var(--filet-fin); }
.section-marine {
  --bg: var(--marine-nuit); --ink-titre: #fff; --ink-doux: #C6D6E9; --ink-accent: #9CC0EF;
  color: var(--ink-doux);
}
.section-marine p { color: var(--ink-doux); }
.section-serree { padding: clamp(3rem, 5.5vw, 5rem) 0; }

.tete-section { margin-bottom: 3rem; }
.tete-section-duo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2.5rem; flex-wrap: wrap; margin-bottom: 3rem;
}
.tete-section-duo .intro { margin-bottom: 0; }

/* ---------- Cartes services ---------- */
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.carte {
  background: #fff; border: 1px solid var(--filet-fin); border-radius: 4px; overflow: hidden;
  box-shadow: var(--ombre); display: flex; flex-direction: column; min-width: 0;
  text-decoration: none; color: inherit;
  transition: transform .55s var(--courbe), box-shadow .55s var(--courbe), border-color .55s var(--courbe);
}
.carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-fort); border-color: var(--filet); }
.carte-media { overflow: hidden; }
.carte-img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover;
  transition: transform 1s var(--courbe); }
.carte:hover .carte-img { transform: scale(1.045); }
.carte-txt { padding: 1.5rem 1.4rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.carte-txt p { color: var(--gris-txt); }
.carte-plus {
  margin-top: 1.1rem; font-size: 1.1rem; font-weight: 600; color: var(--bleu);
  display: inline-flex; align-items: center; gap: .45rem;
  transition: gap .5s var(--courbe);
}
.carte:hover .carte-plus { gap: .8rem; }

/* ---------- Détail d'un service (page Services) ---------- */
.serv {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center; padding: clamp(2.2rem, 4vw, 3.4rem) 0;
  border-top: 1px solid var(--filet-fin);
}
.servs .serv:first-child { border-top: 0; padding-top: 0; }
.serv { scroll-margin-top: 100px; }
.serv-txt { min-width: 0; }
.serv-txt p { color: var(--gris-txt); margin-bottom: 1rem; }
.serv-num {
  display: block; font-family: var(--titre); font-size: calc(1.15rem * var(--ts, 1));
  color: var(--bleu); letter-spacing: .06em; margin-bottom: .6rem;
}
.serv-liste { list-style: none; margin-top: 1.2rem; display: grid; gap: .55rem; }
.serv-liste li { position: relative; padding-left: 1.5rem; font-size: 1.1rem; color: var(--gris-txt); }
.serv-liste li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: .7rem; height: 1px; background: var(--vert);
}
.servs .serv:nth-child(even) .serv-media { order: -1; }

/* Services d'appoint : trois lignes sobres, sans photo. */
.appoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.6rem; }
.appoint {
  min-width: 0; padding: 1.4rem 1.35rem 1.5rem;
  background: #fff; border: 1px solid var(--filet-fin); border-radius: 4px; box-shadow: var(--ombre);
  transition: transform .55s var(--courbe), box-shadow .55s var(--courbe);
}
.appoint:hover { transform: translateY(-4px); box-shadow: var(--ombre-fort); }
.appoint p { color: var(--gris-txt); }

/* ---------- Points / pourquoi nous ---------- */
.points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem 3.2rem; margin-top: 2.6rem; }
.point { padding-top: .7rem; border-top: 1px solid color-mix(in srgb, var(--ink-doux, #fff) 28%, transparent); min-width: 0; }
.point-num {
  display: block; font-family: var(--titre); font-size: calc(1.55rem * var(--ts, 1));
  color: var(--ink-accent, #9CC0EF); margin-bottom: .55rem; letter-spacing: .02em;
}
.point .h4 { margin-bottom: .5rem; }

/* ---------- Étapes du déroulement ---------- */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: 2.6rem; counter-reset: e; }
.etape {
  min-width: 0; padding-top: 1.1rem;
  border-top: 2px solid color-mix(in srgb, var(--ink-accent, var(--bleu)) 45%, transparent);
}
.etape::before {
  counter-increment: e; content: "0" counter(e);
  display: block; font-family: var(--titre); font-size: calc(1.05rem * var(--ts, 1));
  color: var(--ink-accent, var(--bleu)); margin-bottom: .5rem; letter-spacing: .05em;
}
.etape p { color: var(--ink-doux, var(--gris-txt)); font-size: 1.1rem; }

/* ---------- Galerie de réalisations ---------- */
.bande {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  background: var(--gris-verre); padding: 10px; border: 1px solid var(--filet-fin);
  border-radius: 4px; box-shadow: var(--ombre-flot);
}
.bande img { width: 100%; height: clamp(200px, 26vw, 330px); object-fit: cover; border-radius: 2px; }

/* Bandeau immersif pleine largeur, en tête des Réalisations. */
.bande-plein {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--marine-nuit); width: 100%;
}
.bande-plein img { width: 100%; height: clamp(220px, 27vw, 380px); object-fit: cover; }

.galerie { columns: 3; column-gap: 1.5rem; }
.piece {
  break-inside: avoid; margin: 0 0 1.5rem; position: relative;
  background: var(--gris-verre); border: 1px solid var(--filet-fin); border-radius: 4px;
  padding: 8px; box-shadow: var(--ombre);
  transition: transform .6s var(--courbe), box-shadow .6s var(--courbe);
}
.piece:hover { transform: translateY(-4px); box-shadow: var(--ombre-fort); }
.piece img { width: 100%; height: auto; border-radius: 2px; }
.piece figcaption { padding: .95rem .55rem .35rem; }
.piece-cat {
  display: block; font-size: 1.1rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: var(--bleu); margin-bottom: .2rem; line-height: 1.3;
}
.piece-lgd { font-size: 1.1rem; color: var(--gris-txt); line-height: 1.5; }

/* ---------- À propos ---------- */
.apropos { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: center; }
.apropos-txt { min-width: 0; }
.apropos-txt p { color: var(--ink-doux, var(--gris-txt)); margin-bottom: 1.05rem; }
.signature { font-family: var(--titre); font-size: calc(1.15rem * var(--ts, 1)); color: var(--ink-titre, var(--marine)) !important; margin-top: 1.5rem; }
.signature span { font-family: var(--corps); font-weight: 400; font-size: 1.1rem; color: var(--ink-doux, var(--gris-txt)); }

/* Citation encadrée */
.citation {
  border-left: 3px solid var(--vert); padding: .3rem 0 .3rem 1.4rem;
  margin: 2rem 0; max-width: 56ch;
}
.citation p {
  font-family: var(--titre); font-size: calc(1.28rem * var(--ts, 1)); line-height: 1.35;
  color: var(--ink-titre, var(--marine)); letter-spacing: -.012em;
}

/* ---------- Contact ---------- */
.contact-grille { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start; }
.coord { min-width: 0; }
.coord-liste { list-style: none; color: var(--ink-titre, var(--encre)); }
.coord-liste li { padding: .9rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink-doux, var(--marine)) 20%, transparent); }
.coord-liste li:first-child { padding-top: 0; }
.coord-lbl {
  display: block; font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-doux, var(--gris-txt)); font-weight: 500; margin-bottom: .12rem; line-height: 1.35;
}
.coord-liste a { font-weight: 600; overflow-wrap: anywhere; color: var(--ink-accent, var(--bleu)); }
.coord-zone { margin-top: 1.3rem; font-size: 1.1rem; color: var(--ink-doux, var(--gris-txt)); }

.form {
  background: #fff; border: 1px solid var(--filet-fin); border-radius: 4px;
  padding: clamp(1.4rem, 2.8vw, 2.2rem); box-shadow: var(--ombre-fort); min-width: 0;
}
.champ { margin-bottom: 1.05rem; }
.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.champ label { display: block; font-size: 1.1rem; font-weight: 600; color: var(--marine); margin-bottom: .35rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; font-family: var(--corps); font-size: 1.1rem; color: var(--encre);
  padding: .74rem .9rem; border: 1px solid rgba(11,47,91,.22); border-radius: 3px;
  background: var(--gris-fond); min-height: 52px;
  transition: background .4s var(--courbe), border-color .4s var(--courbe), box-shadow .4s var(--courbe);
}
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: rgba(11,47,91,.34); }
.champ textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: 2px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); background: #fff;
}
.form-note { margin-top: .95rem; font-size: 1.1rem; color: var(--gris-txt); line-height: 1.5; }
.form-note.actif { color: var(--vert); font-weight: 600; }

/* ---------- Appel final ---------- */
.appel { text-align: center; }
.appel .intro { margin-inline: auto; margin-bottom: 2.2rem; }
.appel-btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------- Pied ---------- */
.pied {
  --ink-titre: #fff; --ink-doux: #9FB4CC; --ink-accent: #A9C6EE;
  background: var(--bg, var(--marine-nuit)); color: var(--ink-doux);
  padding-top: clamp(3rem, 5.5vw, 4.4rem);
  /* Filet de séparation : indispensable quand la dernière section est
     elle aussi sombre (page Contact), invisible ailleurs. */
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.pied a { color: var(--ink-accent); }
.pied .h4 { color: var(--ink-titre); }
.pied-haut {
  display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 2rem 3rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-doux) 26%, transparent);
}
.pied-marque { font-family: var(--titre); font-size: calc(1.3rem * var(--ts, 1)); color: var(--ink-titre); margin-bottom: .8rem; }
.pied-bloc { min-width: 0; }
.pied-bloc p { font-size: 1.1rem; }
.pied-nav { display: grid; gap: .55rem; }
.pied-nav a { text-decoration: none; font-size: 1.1rem; width: fit-content;
  border-bottom: 1px solid transparent; transition: border-color .4s var(--courbe); }
.pied-nav a:hover { border-bottom-color: currentColor; }
.pied-bas { padding: 1.7rem 0 2.4rem; }
.pied-demo { font-size: 1.1rem; color: var(--ink-doux); line-height: 1.6; max-width: 82ch; }

.legal-page p, .legal-page li { color: var(--gris-txt); margin-bottom: 1rem; max-width: 78ch; }
.legal-page .h4 { margin-top: 2.2rem; }
.legal-page .h2 + p { margin-top: .3rem; }
.legal-page ul + .h2, .legal-page p + .h2 { margin-top: 3rem; }
.legal-page ul { padding-left: 1.3rem; margin-bottom: 1rem; }
#form-soumission { scroll-margin-top: 100px; }

/* ---------- Barre mobile ---------- */
.barre-mobile { display: none; }

/* ---------- Entrées au défilement ----------
   transform + opacity seulement : aucun reflow. */
.rev { opacity: 0; transform: translateY(26px); }
.rev.vu { opacity: 1; transform: none; transition: opacity .85s var(--courbe), transform .85s var(--courbe); }
.rev-2.vu { transition-delay: .09s; }
.rev-3.vu { transition-delay: .18s; }
.rev-4.vu { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; } }

/* Le bandeau de repères de l'accueil ne s'anime qu'en desktop : le rendu
   mobile approuvé le 26 août ne bouge pas d'un pixel. Le bloc ≥ 1024 px
   le réarme. */
.confiance .rev { opacity: 1; transform: none; }

/* Doublon lisible d'un décor en aria-hidden (la bande gravée). */
.sr-seul {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* La bande gravée et sa poignée d'agrandissement sont des ajouts
   desktop : invisibles en dessous de 1024 px. */
.marquee, .piece-zoom { display: none; }
.section-marquee { display: none; } /* bande des métiers : desktop seulement, comme le marquee */

/* =========================================================
   VISIONNEUSE DE GALERIE
   <dialog> natif : Échap, piège de focus et fond inerte sont
   fournis par le navigateur — aucune lib, ~30 lignes de JS.
   Avec les transitions de page, c'est l'un des deux seuls
   ajouts HORS du bloc desktop : elle sert aussi le téléphone
   et ne change AUCUNE mise en page (elle vit dans la couche
   supérieure, par-dessus la page).
   ========================================================= */
.vue {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
}
.vue::backdrop {
  background: rgba(7, 28, 54, .93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* Le fond de page ne défile pas derrière la visionneuse. */
html:has(dialog.vue[open]) { overflow: hidden; }

.vue-cadre {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: .9rem;
  padding: clamp(.9rem, 2.5vw, 1.9rem);
}
.vue-scene { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.vue-scene img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 2px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
}
.vue-txt { flex: 0 0 auto; text-align: center; max-width: 68ch; margin-inline: auto; }
.vue-cat {
  display: block; font-size: 1.1rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: #9CC0EF; margin-bottom: .2rem; line-height: 1.3;
}
.vue-lgd { font-size: 1.1rem; color: #D3DFEE; line-height: 1.5; }
.vue-cpt { font-size: 1.1rem; color: #7E96B4; margin-top: .45rem; letter-spacing: .1em; }

.vue-btn {
  position: absolute; z-index: 2; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 3px;
  background: rgba(7, 28, 54, .55); color: #fff; cursor: pointer;
  font: 400 1.45rem/1 var(--corps);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .4s var(--courbe), border-color .4s var(--courbe);
}
.vue-btn:hover { background: rgba(7, 28, 54, .9); border-color: rgba(255, 255, 255, .6); }
.vue-fermer { top: clamp(.7rem, 2vw, 1.5rem); right: clamp(.7rem, 2vw, 1.5rem); }
.vue-prec, .vue-suiv { top: 50%; transform: translateY(-50%); }
.vue-prec { left: clamp(.4rem, 1.6vw, 1.5rem); }
.vue-suiv { right: clamp(.4rem, 1.6vw, 1.5rem); }
@media (max-width: 560px) {
  .vue-btn { width: 46px; height: 46px; }
  .vue-lgd { font-size: 1.1rem; }
  .vue-cat, .vue-cpt { font-size: max(.95rem, 13.3px); }
}

/* =========================================================
   TRANSITIONS ENTRE PAGES
   Amélioration progressive : Chrome/Edge fondent-glissent,
   les autres naviguent normalement. Le no-preference porte
   sur @view-transition lui-même — sans lui, pas même le
   fondu par défaut du navigateur.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-sort .25s cubic-bezier(.32, .72, 0, 1) both; }
  ::view-transition-new(root) { animation: vt-entre .25s cubic-bezier(.32, .72, 0, 1) both; }
  @keyframes vt-sort  { to   { opacity: 0; transform: translateY(-10px); } }
  @keyframes vt-entre { from { opacity: 0; transform: translateY(14px); } }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  .nav { gap: 1.05rem; }
  .entete-actions { margin-left: .8rem; }
  .cartes, .appoints { grid-template-columns: repeat(2, 1fr); }
  .etapes { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2rem; }
}

@media (max-width: 1060px) {
  .tel-entete { display: none; }
  .galerie { columns: 2; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
}

/* ---------- Passage au menu déroulant : AVANT que ça déborde ---------- */
@media (max-width: 900px) {
  .burger { display: flex; }
  .entete-int { min-height: 74px; gap: .6rem; }
  .entete-actions { margin-left: auto; gap: .55rem; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 0;
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--filet);
    box-shadow: 0 22px 40px -26px rgba(11,47,91,.6);
    max-height: 0; overflow: hidden; transition: max-height .55s var(--courbe);
  }
  .nav.ouvert { max-height: 380px; }
  .nav a { padding: 1rem 1.25rem; border-bottom: 1px solid var(--filet-fin); border-left: 3px solid transparent; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"], .nav a:hover { border-left-color: var(--vert); }
}

@media (max-width: 860px) {
  .confiance-grille { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0; }
  .conf-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .tete-grille, .apropos, .contact-grille, .serv { grid-template-columns: 1fr; }
  /* En colonne unique, la photo passe TOUJOURS devant le texte : l'alternance
     n'a plus de sens et un ordre stable se lit mieux au pouce. */
  .servs .serv .serv-media { order: -1; }
  .serv-media, .apropos-img, .tete-media { max-width: 460px; }
  .points { grid-template-columns: 1fr; gap: 1.9rem; }
  .bande img { height: clamp(150px, 30vw, 220px); }
}

/* ---------- Mobile : tableau des minimums par type d'élément ----------
   Corps monté de 1rem à 1.1rem le 26 août (verdict Yannick) : la plainte n°1 de
   William sur son Wix était le texte mobile trop petit — on lit à la même taille
   que le desktop. */
@media (max-width: 768px) {
  body { font-size: 1.15rem; padding-bottom: 66px; }
  .br-desk { display: none; }

  /* Échelle montée 2× le 26 août (verdicts Yannick — 2e cran demandé) :
     corps 1,15rem · lecture 1,1rem · secondaire 1rem · UI/badges 0,95rem (plancher 13,3px) */
  .intro, .carte-txt p, .apropos-txt p, .section-marine p, .serv-txt p,
  .coord-zone, .champ input, .champ select, .champ textarea, .tete-p,
  .heros-p, .conf-cle, .pied-bloc p, .legal-page p, .legal-page li,
  .piece-lgd, .serv-liste li, .etape p { font-size: 1.1rem; }
  .signature span, .champ label, .conf-note, .coord-lbl,
  .form-note, .pied-nav a, .carte-plus { font-size: 1rem; }
  .btn, .nav a { font-size: 1.1rem; }
  /* max() = plancher en px RENDUS : tient même au cran « Compact » (root 85 %),
     le piège documenté de l'option A du questionnaire. */
  .btn-sm, .etiquette, .sur-titre, .marque-mot, .piece-cat, .serv-num { font-size: max(.95rem, 13.3px); }
  .pied-demo { font-size: max(.95rem, 13.3px); }
  .h3 { font-size: 1.22rem; }
  .h4 { font-size: 1.18rem; }
  .signature { font-size: 1.15rem; }
  .pied-marque { font-size: 1.25rem; }
  .citation p { font-size: 1.3rem; }

  .marque { gap: .55rem; min-height: 44px; }
  .marque img { height: 30px; }

  .heros-image img { height: clamp(450px, 82svh, 640px); object-position: 62% 40%; }
  .heros-corps { padding-bottom: 1.2rem; }
  .heros-texte { max-width: 100%; padding: 1.2rem 1.1rem 1.3rem; }
  .heros-p { max-width: 100%; margin-bottom: 1.15rem; }
  .heros-btns, .tete-btns, .appel-btns { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .btn { width: 100%; }
  .btn-sm { width: auto; }

  .cartes, .appoints { grid-template-columns: 1fr; gap: 1.2rem; }
  .galerie { columns: 1; }
  .etapes { grid-template-columns: 1fr; gap: 1.4rem; }
  .champ-duo { grid-template-columns: 1fr; gap: 0; }
  .serv-media, .apropos-img, .tete-media { max-width: 100%; }
  .bande { grid-template-columns: 1fr; gap: 8px; padding: 8px; }
  .bande img { height: 210px; }
  .pied-haut { grid-template-columns: 1fr; gap: 1.8rem; }
  .tete-section, .tete-section-duo { margin-bottom: 2.2rem; }
  .coord-lbl { letter-spacing: .12em; }

  .barre-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(11,47,91,.35);
    box-shadow: 0 -8px 22px -14px rgba(0,0,0,.5);
  }
  .bm-btn {
    display: flex; align-items: center; justify-content: center; min-height: 58px;
    font-weight: 700; font-size: 1.1rem; text-decoration: none; color: #fff;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bm-tel { background: var(--marine); }
  .bm-devis { background: var(--vert); }
}

@media (max-width: 560px) {
  .bande-plein { grid-template-columns: 1fr 1fr; }
  .bande-plein img:nth-child(3) { display: none; }
  .bande-plein img { height: 210px; }
}

/* Très petits écrans : le bouton Soumission de l'en-tête est redondant
   avec la barre fixe du bas — on le retire plutôt que d'écraser la marque. */
@media (max-width: 430px) {
  .int, .int-etroit, .entete-int { width: min(100% - 1.8rem, 1200px); }
}
@media (max-width: 359px) {
  .entete-actions .btn-sm { display: none; }
}

@media (max-width: 480px) {
  .conf-item { padding: .35rem .8rem; }
  .conf-item:nth-child(odd) { padding-left: 0; }
  .conf-cle { font-size: 1.05rem; }
  .conf-note { font-size: .97rem; }
  .etiquette::before { width: 1.2rem; }
}

/* =========================================================
   DESKTOP ≥ 1024 px — LA COUCHE « GRAND ÉCRAN »
   (ajoutée le 26 août 2026)

   RÈGLE DE CE BLOC : tout ce qui suit vit à l'intérieur de
   @media (min-width: 1024px). Le rendu à 1023 px et moins est
   identique au bit près à la version approuvée — aucune règle
   de base, aucun HTML et aucun JS n'ont été touchés.

   Direction : le VERRE devient la matière du site lui-même.
   Aucun concurrent visité (7 sites, Laurentides → Toronto) ne
   traite la transparence autrement qu'en photo plate : c'est
   là que se prend l'écart.
   Trois signatures, jamais plus : ① le dépoli qui devient net
   à l'entrée, ② le reflet qui glisse au survol, ③ les meneaux
   (filets verticaux) sur les grands aplats marine.
   Transform, opacity et filter seulement : aucun reflow.
   ========================================================= */
@media (min-width: 1024px) {

  /* ---------- Respiration générale ---------- */
  :root { --rythme: clamp(6rem, 8vw, 9.5rem); }
  /* Les trois gouttières doivent rester d'accord : contenu,
     en-tête et bloc de texte du héros partagent la même mesure. */
  .int, .entete-int { width: min(100% - 4rem, 1240px); }
  .heros-corps { width: min(100% - 4rem, 1240px); }
  .int-etroit  { width: min(100% - 4rem, 920px); }

  /* ---------- ① Le dépoli qui devient net ----------
     Le verre embué qui s'éclaircit : toute image d'un bloc
     révélé entre floue et se pose nette. L'image du héros n'est
     JAMAIS concernée (elle est hors .rev) — le LCP est intact. */
  .rev img { transition: filter 1.15s var(--courbe), transform 1.15s var(--courbe); }
  .rev:not(.vu) img { filter: blur(13px) saturate(.78); transform: scale(1.035); }
  /* Chorégraphie plus ample qu'en mobile : plus de course,
     et l'escalier des retards s'étire. */
  .rev { transform: translateY(38px); }
  .rev.vu { transition: opacity 1s var(--courbe), transform 1s var(--courbe); }
  .rev-2.vu { transition-delay: .12s; }
  .rev-3.vu { transition-delay: .24s; }
  .rev-4.vu { transition-delay: .36s; }

  /* Filet reduced-motion du bloc desktop — il doit venir APRÈS les deux
     règles ci-dessus pour les battre à spécificité égale. Sans lui, les
     transitions étant coupées, un bloc pas encore observé resterait
     décalé de 38 px et sa photo dépolie pour de bon : ça sauterait à
     l'observation. Rien ne bouge, rien ne reste flou. */
  @media (prefers-reduced-motion: reduce) {
    .rev { transform: none; }
    .rev:not(.vu) img { filter: none; transform: none; }
  }

  /* ---------- ② Le reflet qui glisse ----------
     Une lame de lumière traverse le média au survol. Un seul
     jeu de règles pour les cartes, les pièces de galerie, les
     cadres et la bande d'accueil. */
  .carte-media, .piece, .cadre { position: relative; overflow: hidden; }
  .carte-media::after, .piece::after, .cadre::after {
    content: ""; position: absolute; inset: -20% -60%;
    background: linear-gradient(112deg,
      transparent 34%, rgba(255,255,255,.34) 46%,
      rgba(255,255,255,.08) 53%, transparent 66%);
    transform: translateX(-115%); pointer-events: none;
    transition: transform 1.25s var(--courbe);
  }
  .carte:hover .carte-media::after,
  .piece:hover::after,
  .cadre:hover::after { transform: translateX(115%); }

  /* ---------- ③ Les meneaux ----------
     Les grands aplats marine reçoivent les filets verticaux d'un
     mur-rideau et une lumière rasante en diagonale. Blancs en
     alpha : ils suivent la couleur choisie dans la barre d'aperçu.
     Aucune lueur radiale (règle du 19 août). */
  .section-marine, .tete-sombre, .pied { position: relative; overflow: hidden; }
  .section-marine::before, .tete-sombre::before, .pied::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(104deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 46%),
      repeating-linear-gradient(90deg,
        rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 12.5%);
  }
  .section-marine > *, .tete-sombre > *, .pied > * { position: relative; z-index: 1; }

  /* ---------- En-tête ----------
     ponytail : hauteur CONSTANTE. Une en-tête qui se resserre au
     défilement est jolie mais elle est dans le flux : la page
     entière remonterait de 28 px, c'est-à-dire un décalage de
     mise en page compté par Lighthouse. On garde la retenue. */
  .entete-int { min-height: 96px; }
  .marque img { height: 42px; }
  .marque-mot { font-size: 1.18rem; }
  .nav { gap: 2rem; }
  .nav a { font-size: 1.12rem; letter-spacing: .005em; }

  /* Le verre se givre davantage une fois la page descendue : plus de
     flou, moins d'opacité — on voit la page passer DERRIÈRE l'en-tête. */
  body.defile .entete {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(18px) saturate(1.55);
    backdrop-filter: blur(18px) saturate(1.55);
  }
  /* Soulignement directionnel : il entre par la gauche et sort par la
     droite. Un seul basculement d'origine, aucun JS. */
  .nav a::after { transform-origin: right; }
  .nav a:hover::after,
  .nav a:focus-visible::after,
  .nav a[aria-current="page"]::after { transform-origin: left; transform: scaleX(1); }

  /* ---------- HÉROS : plein écran, typographie à l'échelle ---------- */
  .heros-image img { height: min(92svh, 880px); object-position: 56% 42%; }
  .heros-corps { z-index: 2; padding-bottom: clamp(3rem, 5vw, 5rem); }
  .heros-texte {
    max-width: 53rem;
    padding: clamp(2rem, 2.8vw, 2.9rem) clamp(2rem, 2.8vw, 3rem) clamp(2.1rem, 3vw, 3rem);
    border-left-width: 4px;
  }
  .heros h1 {
    font-size: calc(clamp(3rem, 4.6vw, 4.9rem) * var(--ts, 1));
    letter-spacing: -.032em; margin-bottom: 1.1rem;
  }
  .heros-p { font-size: 1.22rem; max-width: 50ch; margin-bottom: 2rem; }
  .sur-titre { font-size: 1.12rem; letter-spacing: .2em; margin-bottom: 1.1rem; }
  /* La lumière du verre : une lame diagonale claire en haut à droite,
     LOIN du panneau de texte. Jamais un voile sombre sur la photo. */
  .heros::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(122deg,
      transparent 38%, rgba(255,255,255,.11) 54%,
      rgba(255,255,255,.03) 63%, transparent 72%);
  }

  /* Entrée du héros : le panneau monte, ses lignes suivent. */
  @media (prefers-reduced-motion: no-preference) {
    .heros-texte { animation: entree-panneau 1.1s var(--courbe) both; }
    .heros .sur-titre { animation: entree-ligne .9s var(--courbe) .22s both; }
    .heros h1        { animation: entree-ligne .9s var(--courbe) .32s both; }
    .heros-p         { animation: entree-ligne .9s var(--courbe) .44s both; }
    .heros-btns      { animation: entree-ligne .9s var(--courbe) .56s both; }
  }
  @keyframes entree-panneau {
    from { opacity: 0; transform: translateY(34px); clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
  }
  @keyframes entree-ligne {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  /* La photo du héros arrive dépolie et se pose nette ----------
     C'est une SURCOUCHE (backdrop-filter) qui se dissout, jamais un
     filtre sur l'<img> : l'image est peinte tout de suite, à sa taille
     définitive, et le LCP reste celui de la version sobre. Au repos
     (fin d'animation, ou reduced-motion) la surcouche est à opacity 0 :
     rien à composer. */
  .heros::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .heros::before { animation: depoli-heros 1.5s var(--courbe) both; }
  }
  /* La tenue à 18 % n'est pas décorative : --courbe est une courbe de masse,
     elle a déjà fait 78 % du chemin au quart du temps. Sans ce palier, le
     dépoli disparaît avant qu'on l'ait vu. */
  @keyframes depoli-heros {
    0%, 18% {
      opacity: 1;
      -webkit-backdrop-filter: blur(16px) saturate(.82); backdrop-filter: blur(16px) saturate(.82);
    }
    100% {
      opacity: 0;
      -webkit-backdrop-filter: blur(0px) saturate(1); backdrop-filter: blur(0px) saturate(1);
    }
  }

  /* ---------- Bandeau de repères ---------- */
  .confiance-grille { padding: 2.6rem 0; }
  .conf-item { padding: .35rem 2.2rem; }
  .conf-cle { font-size: calc(1.32rem * var(--ts, 1)); }
  .conf-note { font-size: 1.05rem; margin-top: .45rem; }

  /* Les séparateurs ne sont plus posés d'avance : ils se TRACENT du haut
     vers le bas à l'entrée du bandeau — même patron que le filet des
     étapes (.etape.vu::after), étendu ici. Alpha de currentColor : la
     barre d'aperçu les repeint avec la section. */
  .conf-item { position: relative; border-left-color: transparent; }
  .conf-item::before {
    content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
    background: color-mix(in srgb, currentColor 24%, transparent);
    transform: scaleY(0); transform-origin: top;
    transition: transform 1s var(--courbe);
  }
  .conf-item:first-child::before { display: none; }
  .conf-item.vu::before { transform: scaleY(1); }
  .conf-item.rev-2.vu::before { transition-delay: .12s; }
  .conf-item.rev-3.vu::before { transition-delay: .24s; }
  .conf-item.rev-4.vu::before { transition-delay: .36s; }
  /* Le bandeau de l'accueil entre comme son jumeau d'À propos
     (asymétrie corrigée le 26 août) — neutralisé en dessous de 1024 px,
     et jamais armé en reduced-motion (il resterait invisible). */
  @media (prefers-reduced-motion: no-preference) {
    .confiance .rev:not(.vu) { opacity: 0; transform: translateY(38px); }
  }

  /* ---------- Titres de section ---------- */
  .h1 { font-size: calc(clamp(2.6rem, 4.3vw, 4.15rem) * var(--ts, 1)); letter-spacing: -.03em; }
  .h2 { font-size: calc(clamp(2.1rem, 3.2vw, 3.1rem) * var(--ts, 1)); letter-spacing: -.026em; margin-bottom: 1.2rem; }
  .h3 { font-size: calc(1.34rem * var(--ts, 1)); }
  .intro { font-size: 1.18rem; }
  .tete { padding: clamp(4.2rem, 6.5vw, 7rem) 0 clamp(4rem, 6vw, 6rem); }
  .tete-p { font-size: 1.22rem; }
  .tete-section, .tete-section-duo { margin-bottom: 4rem; }

  /* Le cadre de la tête de page prend un contre-cadre décalé :
     une deuxième feuille de verre derrière la première. */
  .tete-media { position: relative; }
  .tete-media::before {
    content: ""; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem;
    border: 1px solid var(--filet); border-radius: 4px; z-index: 0;
  }
  .tete-media .cadre { position: relative; z-index: 1; }
  .tete-sombre .tete-media::before { border-color: rgba(255,255,255,.20); }

  /* ---------- Cartes services : le média répond ---------- */
  .cartes { gap: 2rem; }
  .carte { border-radius: 4px; }
  .carte:hover { transform: translateY(-9px); }
  .carte-img { transition: transform 1.3s var(--courbe), filter 1.3s var(--courbe); }
  .carte:hover .carte-img { transform: scale(1.07); filter: saturate(1.06) contrast(1.03); }
  .carte-txt { padding: 1.9rem 1.8rem 2rem; position: relative; }
  /* Le filet qui se déploie sous le titre. */
  .carte-txt::before {
    content: ""; position: absolute; top: 0; left: 1.8rem; right: 1.8rem; height: 2px;
    background: var(--vert); transform: scaleX(0); transform-origin: left;
    transition: transform .8s var(--courbe);
  }
  .carte:hover .carte-txt::before { transform: scaleX(1); }

  /* ---------- Aperçu des réalisations (accueil) ---------- */
  .bande { grid-template-columns: 1.18fr 1fr 1.18fr; gap: 12px; padding: 12px; }
  .bande img {
    height: clamp(340px, 26vw, 440px);
    transition: transform 1.3s var(--courbe), filter .7s var(--courbe);
  }
  .bande:hover img { filter: brightness(.74) saturate(.9); }
  .bande img:hover { filter: none; transform: scale(1.035); }

  /* ---------- Bandeau immersif (page Réalisations) ---------- */
  .bande-plein { gap: 5px; overflow: hidden; }
  .bande-plein img {
    height: clamp(320px, 31vw, 540px);
    transition: transform 1.4s var(--courbe), filter .7s var(--courbe);
  }
  .bande-plein:hover img { filter: brightness(.7) saturate(.88); }
  .bande-plein img:hover { filter: none; transform: scale(1.04); }

  /* ---------- GALERIE ÉDITORIALE ----------
     Le pavage à colonnes égales devient une mise en page à
     douze colonnes, tailles et formats variés, deux pièces
     décalées vers le bas pour la respiration. */
  .galerie {
    columns: auto; column-gap: normal;
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 2.4rem 1.8rem; align-items: start;
  }
  .piece { margin: 0; padding: 10px; }
  /* aspect-ratio + cover : c'est la MISE EN PAGE qui décide du format,
     pas le fichier — d'où les tailles variées sans recouper une image. */
  .piece img { width: 100%; height: auto; object-fit: cover; }
  /* Le pavage ci-dessous est calibré pour les 9 pièces actuelles.
     Ce défaut à 6 colonnes est le filet : une 10e photo ajoutée plus
     tard tombe en demi-largeur au lieu de se retrouver en colonne
     d'un douzième. */
  .piece { grid-column: span 6; }
  .piece:nth-child(1) { grid-column: span 7; }
  .piece:nth-child(1) img { aspect-ratio: 4 / 3; }
  .piece:nth-child(2) { grid-column: span 5; margin-top: 3.5rem; }
  .piece:nth-child(2) img { aspect-ratio: 3 / 4; }
  .piece:nth-child(3),
  .piece:nth-child(4),
  .piece:nth-child(5) { grid-column: span 4; }
  .piece:nth-child(3) img,
  .piece:nth-child(4) img,
  .piece:nth-child(5) img { aspect-ratio: 1 / 1; }
  .piece:nth-child(6) { grid-column: span 5; }
  .piece:nth-child(6) img { aspect-ratio: 3 / 4; }
  .piece:nth-child(7) { grid-column: span 7; margin-top: 3.5rem; }
  .piece:nth-child(7) img { aspect-ratio: 4 / 3; }
  .piece:nth-child(8),
  .piece:nth-child(9) { grid-column: span 6; }
  .piece:nth-child(8) img,
  .piece:nth-child(9) img { aspect-ratio: 5 / 4; }

  .piece { transition: transform .7s var(--courbe), box-shadow .7s var(--courbe); }
  .piece:hover { transform: translateY(-7px); box-shadow: var(--ombre-flot); }
  .piece figcaption { padding: 1.15rem .7rem .5rem; position: relative; }
  .piece figcaption::before {
    content: ""; position: absolute; top: .35rem; left: .7rem; right: .7rem; height: 1px;
    background: var(--bleu); transform: scaleX(0); transform-origin: left;
    transition: transform .85s var(--courbe);
  }
  .piece:hover figcaption::before { transform: scaleX(1); }
  /* Le même filet se trace aussi à l'ENTRÉE, sans attendre le survol. */
  .piece.vu figcaption::before { transform: scaleX(1); transition-delay: .38s; }
  .piece.rev-2.vu figcaption::before { transition-delay: .50s; }
  .piece.rev-3.vu figcaption::before { transition-delay: .62s; }
  .piece-lgd { font-size: 1.05rem; }

  /* Poignée d'agrandissement : la seule chose qui annonce que la photo
     s'ouvre. Posée par le JS — aucun HTML de galerie n'est touché, le
     pavage nth-child reste intact — et c'est elle qui porte l'accès
     clavier à la visionneuse. */
  .piece { cursor: zoom-in; }
  .piece-zoom {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 18px; right: 18px; z-index: 2;
    width: 44px; height: 44px; border-radius: 3px; cursor: zoom-in;
    border: 1px solid rgba(255, 255, 255, .30); background: rgba(7, 28, 54, .50); color: #fff;
    font: 400 1.15rem/1 var(--corps);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transform: translateY(-6px);
    transition: opacity .5s var(--courbe), transform .5s var(--courbe), background .4s var(--courbe);
  }
  /* :focus et non :focus-visible — une poignée qui a le focus doit se
     voir, quelle que soit la façon dont on l'a atteinte. */
  .piece:hover .piece-zoom, .piece-zoom:focus { opacity: 1; transform: none; }
  .piece-zoom:hover { background: rgba(7, 28, 54, .88); }

  /* ---------- Page Services : le numéro devient une enseigne ---------- */
  .serv { padding: clamp(3.4rem, 5vw, 5.4rem) 0; gap: clamp(2.6rem, 5vw, 4.6rem); }
  .serv-num {
    font-size: calc(4.6rem * var(--ts, 1)); line-height: .82;
    letter-spacing: .01em; margin-bottom: 1.1rem;
  }
  @supports (-webkit-text-stroke: 1px black) {
    .serv-num {
      color: transparent;
      -webkit-text-stroke: 1.4px color-mix(in srgb, var(--bleu) 45%, transparent);
    }
  }
  .serv-txt p { font-size: 1.15rem; }
  .serv-liste li { font-size: 1.12rem; }
  /* Contre-cadre décalé, comme sur la tête de page. */
  .serv-media { position: relative; }
  .serv-media::before {
    content: ""; position: absolute; inset: 1.6rem -1.6rem -1.6rem 1.6rem;
    border: 1px solid var(--filet); border-radius: 4px;
  }
  .servs .serv:nth-child(even) .serv-media::before { inset: 1.6rem 1.6rem -1.6rem -1.6rem; }
  .serv-media .cadre { position: relative; z-index: 1; }

  .appoints { gap: 2rem; }
  .appoint { padding: 2rem 1.9rem 2.1rem; }
  .appoint:hover { transform: translateY(-7px); }

  /* ---------- Pourquoi nous / engagements ---------- */
  .points { gap: 3.2rem 4rem; margin-top: 3.4rem; }
  .point-num { font-size: calc(2.6rem * var(--ts, 1)); line-height: .9; margin-bottom: .8rem; }
  .point { padding-top: 1.1rem; }

  /* ---------- Étapes : le filet se trace à l'entrée ---------- */
  .etapes { gap: 2.2rem; margin-top: 3.4rem; }
  .etape { border-top-color: transparent; position: relative; padding-top: 1.4rem; }
  .etape::after {
    content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
    background: color-mix(in srgb, var(--ink-accent, var(--bleu)) 55%, transparent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 1s var(--courbe);
  }
  .etape.vu::after { transform: scaleX(1); }
  .etape.rev-2.vu::after { transition-delay: .12s; }
  .etape.rev-3.vu::after { transition-delay: .24s; }
  .etape.rev-4.vu::after { transition-delay: .36s; }
  .etape::before { font-size: calc(1.35rem * var(--ts, 1)); margin-bottom: .7rem; }
  .etape p { font-size: 1.08rem; }

  /* ---------- À propos ---------- */
  .apropos { gap: clamp(2.6rem, 5vw, 5rem); }
  .apropos-txt p { font-size: 1.15rem; }
  .apropos-img { position: relative; }
  .apropos-img::before {
    content: ""; position: absolute; inset: 1.6rem -1.6rem -1.6rem 1.6rem;
    border: 1px solid var(--filet); border-radius: 4px;
  }
  .apropos-img .cadre { position: relative; z-index: 1; }
  .citation { margin: 2.6rem 0; border-left-width: 4px; padding-left: 1.9rem; }
  .citation p { font-size: calc(1.55rem * var(--ts, 1)); line-height: 1.3; }

  /* ---------- Contact : la colonne des coordonnées suit ---------- */
  .contact-grille { gap: clamp(2.6rem, 5vw, 4.5rem); }
  .coord { position: sticky; top: 130px; }
  .form { padding: 2.6rem 2.4rem; }
  .champ { margin-bottom: 1.25rem; }

  /* ---------- Appel de fin ---------- */
  .appel .h2 { font-size: calc(clamp(2.3rem, 3.6vw, 3.5rem) * var(--ts, 1)); }
  .appel .intro { font-size: 1.22rem; }

  /* ---------- Pied ---------- */
  .pied-haut { gap: 2.5rem 4rem; padding-bottom: 3.2rem; }
  .pied-marque { font-size: calc(1.5rem * var(--ts, 1)); }
  .pied-bloc p, .pied-nav a { font-size: 1.06rem; }

  /* ---------- La bande gravée ----------
     Les cinq métiers écrits en lettres creuses, en contour seulement :
     du texte gravé dans le verre, pas un slogan peint dessus. Le patron
     -webkit-text-stroke est celui déjà éprouvé sur .serv-num. La bande
     est aria-hidden ; un doublon .sr-seul la restitue aux lecteurs
     d'écran. Elle se fige au survol et en reduced-motion (la règle
     globale l.60-63 coupe l'animation, le texte reste lu). */
  .section-marquee { display: block; background: var(--bg, var(--gris-fond)); padding: 2.8rem 0 2.4rem; overflow: hidden; }
  .marquee {
    display: block; overflow: hidden;
    margin-top: clamp(4rem, 6vw, 7rem);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .marquee-piste {
    display: flex; width: max-content;
    animation: glisse-gravee 42s linear infinite;
  }
  .marquee:hover .marquee-piste { animation-play-state: paused; }
  .marquee-piste span {
    font-family: var(--titre); font-weight: 400;
    font-size: calc(clamp(3.4rem, 7.4vw, 6.6rem) * var(--ts, 1));
    line-height: 1.12; letter-spacing: -.02em; text-transform: uppercase;
    white-space: nowrap; padding-right: .35em;
    color: color-mix(in srgb, var(--ink-titre, var(--marine)) 15%, transparent);
  }
  @supports (-webkit-text-stroke: 1px black) {
    .marquee-piste span {
      color: transparent;
      -webkit-text-stroke: 1.6px color-mix(in srgb, var(--ink-titre, var(--marine)) 34%, transparent);
    }
  }
  /* Deux exemplaires identiques : à -50 % le second est exactement là où
     le premier était — la boucle ne se voit pas. */
  @keyframes glisse-gravee { to { transform: translateX(-50%); } }
}

/* Grand écran : la galerie et le héros gagnent encore de l'air. */
@media (min-width: 1440px) {
  .heros-texte { max-width: 58rem; }
  .galerie { gap: 3rem 2.2rem; }
  .points { grid-template-columns: repeat(4, 1fr); gap: 2.6rem; }
  .point-num { font-size: calc(3rem * var(--ts, 1)); }
}