/* ============================================================
   JOE BLOW · SITE CLIENT — 9 septembre 2026 · YannCode Solutions
   Jonathan Roy · Saint-Hippolyte · homme à tout faire l'été,
   déneigement l'hiver.

   UNE SEULE FEUILLE pour les deux pages (index.html et en/index.html).
   Toute retouche vaut donc pour le français ET l'anglais : c'est voulu,
   les deux pages sont des miroirs exacts.

   ══ LA PALETTE : LE BLEU VIENT DU LOGO ══
   Le bleu du mot « BLOW » a été mesuré au pixel sur le logo fourni par
   Jonathan (photos-depot/023, bande du lettrage) : le nuage de teintes
   dominant tourne autour de #1875B9 · #1A7BC4 · #1C83CA. On retient
   --bleu #1B7BC4. Ce n'est PAS un marine : il commence à être pâle,
   comme Jonathan l'a demandé.

   ⚠️ CONSÉQUENCE MESURÉE — #1B7BC4 ne fait que 4,18:1 sur --blanc et
   4,49:1 sur du blanc pur : SOUS le seuil AA de 4,5:1 pour du texte
   courant. Il sert donc aux SURFACES (aplats, filets, badges, bordures
   d'accent) et jamais à du texte de lecture. Pour le texte et les liens,
   --bleu-texte #135C93 (6,56:1 sur --blanc, 7,05:1 sur blanc pur) : même
   teinte, assombrie jusqu'à passer AA. Les boutons pleins portent
   --bleu-texte, pas --bleu, pour que leur libellé blanc tienne à 6,56:1
   au lieu de 4,18:1.

   ── Contrastes calculés le 9 septembre 2026 (30 paires, aucune ratée) ──
     encre/blanc 17,42 · encre/bleu-pale 10,89 · encre/gris-clair 10,88
     blanc/gris 7,00 · blanc/bleu-texte 6,56 · blanc/bleu-fonce 9,40
     carte/encre 18,72 · carte/gris 7,53 · carte/bleu-texte 7,05
     pale/encre 16,02 · pale/gris 6,44 · pale/bleu-texte 6,03
     bleu-clair/encre 15,31 · bleu-clair/bleu-texte 5,76
     bleu-fonce/blanc 9,40 · bleu-fonce/bleu-pale 5,87
     carte/bord-fort 4,28 et pale/bord-fort 3,66 → contours de champs,
     seuil UI 3:1 ✓
   ⚠️ --bord (#C9D6E4) est un FILET DÉCORATIF : 1,48:1, il ne porte
   jamais un contour de formulaire. Les champs prennent --bord-fort.

   ── TAILLES : l'échelle de l'Entreprise SME (verdict Yannick, 10 sept. 2026) ──
   Jonathan aime « la grosse écriture » de SME. Sa racine vaut ~9,8 px ; les
   tailles ci-dessous reproduisent ses PIXELS RENDUS dans notre racine de
   18,4 px (html 115 %) : corps 1.4rem ≈ 26 px (SME 2.63rem) · notes 1.5rem
   ≈ 28 px (2.85rem) · UI/boutons/nav 1.35rem ≈ 25 px (2.58rem) · kicker et
   badges 1.05rem ≈ 20 px (2rem) · H2 3rem ≈ 55 px (5.6rem) · H3 2.1rem
   ≈ 38 px (3.9rem) · titre de service 2.45rem ≈ 45 px (srv h2 4.6rem) ·
   numéro de service clamp(3.7rem, 9vw, 6.9rem) ≈ 68-127 px (srv-num) ·
   H1 clamp(2.4rem, 5.2vw, 4.1rem) ≈ 44-75 px (hero-h1). Mobile : H2 1.8rem,
   H3 1.4rem, comme les paliers ≤ 767 px de SME ; le corps ne baisse pas.

   ── CE QUI N'EST PAS ICI (volontairement) ──
   canvas · neige animée · lueur radiale · piste horizontale · Google Fonts (les 3 polices sont LOCALES) ·
   backdrop-filter · GSAP · Lenis · pastille au-dessus du H1 · voile
   global sur la photo du héros (règle du 25 août : contraste LOCAL
   seulement — ici le texte n'est jamais posé sur la photo, donc il n'y a
   même pas de voile à poser).
   ============================================================ */

/* ── POLICES : celles de l'Entreprise SME (verdict Yannick, 10 sept. 2026) ──
   Fichiers locaux copiés de chantiers-clients/entreprise-sme-deneigement/fonts/
   (aucun Google Fonts). Archivo Black n'existe qu'en 400 : les titres
   portent ce poids, jamais 700 (sinon le navigateur fabrique un faux gras). */
@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;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono.woff2') format('woff2');
  font-weight: 400 600; font-display: swap;
}

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

html {
  font-size: 115%;               /* option C « Grand » — 1rem = 18,4 px */
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;    /* dégagement de la barre collante */
  -webkit-text-size-adjust: 100%;
}

:root {
  /* Marque — bleu du logo relevé à la pipette par Yannick le 11 sept. 2026 : rgb(0 118 209) = #0076D1 */
  --bleu: #0076D1;               /* [le bleu EXACT du logo : aplats, filets, badges, BOUTONS PLEINS] */
  --bleu-texte: #0064B2;         /* [TEXTE et liens — le bleu du logo assombri de 15 % : 5,6:1 sur le fond de page (l'exact fait 4,3:1)] */
  --bleu-fonce: #005392;         /* [survol des boutons, bandeau d'hiver] */
  --bleu-clair: #D9EAF8;         /* [fond des cartes d'accent] */
  --bleu-pale: #8CC1EA;          /* [texte d'accent SUR les aplats sombres : 9,8:1 sur l'encre] */

  /* Neutres — style « 2 · Blanc pur » choisi par Yannick le 11 sept. 2026 (les 5 styles restent dans la tweak bar) */
  --encre: #0A0A0A;              /* noir franc : héros, nav, pied, sections sombres */
  --blanc: #FFFFFF;              /* fond de page ET texte sur les aplats sombres */
  --carte: #FFFFFF;
  --pale: #F2F3F5;               /* sections alternées, gris très pâle */
  --gris: #4A4A4A;               /* texte secondaire sur fond clair (9:1) */
  --gris-clair: #BDBDBD;         /* texte secondaire sur fond sombre (10:1) */
  --bord: #D6D6D6;               /* filet DÉCORATIF — jamais un contour porteur */
  --bord-fort: #707070;          /* contours de champs (4,5:1) */

  --police: 'Geist', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-titre: 'Archivo Black', Impact, 'Haettenschweiler', sans-serif;
  --police-mono: 'Geist Mono', 'SF Mono', Consolas, monospace;
  --large: 70rem;
  --pad: 1.2rem;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.4rem;
  line-height: 1.62;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--bleu-texte); }
h1, h2, h3 {
  margin: 0; font-family: var(--police-titre); font-weight: 400;
  text-transform: uppercase; line-height: 1.14; letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); }
h2 { font-size: 3rem; }
h3 { font-size: 2.1rem; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--bleu-texte); outline-offset: 3px; border-radius: 4px; }
.section--sombre :focus-visible, .pied :focus-visible, .entete :focus-visible { outline-color: var(--bleu-pale); }

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

.contenu { max-width: var(--large); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: 3.2rem; }
.section--pale { background: var(--pale); }
.section--sombre { background: var(--encre); color: var(--blanc); }
.section--sombre .kicker { color: var(--bleu-pale); }
.section--sombre .chapeau { color: var(--gris-clair); }
.section--sombre a { color: var(--bleu-pale); }

.kicker {
  margin: 0 0 0.5rem; font-family: var(--police-mono); font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--bleu-texte);
}
.chapeau { max-width: 46rem; margin-top: 1rem; font-size: 1.5rem; color: var(--gris); }

/* ---------- Boutons : larges, contrastés, ≥ 48 px de haut ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.1rem;
  padding: 0.7rem 1.4rem; border-radius: 0.4rem;
  font-family: inherit; font-size: 1.35rem; font-weight: 700;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
/* Le plein porte --bleu-texte et non --bleu : 6,56:1 contre 4,18:1. */
.btn-plein { background: var(--bleu); color: #FFFFFF; }   /* le bleu EXACT du logo sur TOUS les boutons pleins (Yannick, 11 sept.) ; blanc pur : 4,65:1 */
.btn-plein:hover { background: var(--bleu-fonce); }
.btn-contour { border-color: var(--bord-fort); color: var(--bleu-texte); background: var(--carte); }
.btn-contour:hover { border-color: var(--bleu-texte); background: var(--bleu-clair); }
.btn-gros { width: 100%; min-height: 3.5rem; font-size: 1.4rem; }
.section--sombre .btn-plein, .entete .btn-plein { background: var(--bleu); color: #FFFFFF; }   /* même bleu sur les fonds sombres (Yannick, 11 sept.) */
.section--sombre .btn-plein:hover, .entete .btn-plein:hover { background: var(--bleu-fonce); }
.section--sombre .btn-contour, .entete .btn-contour {
  background: transparent; color: var(--blanc); border-color: var(--blanc);
}
.section--sombre .btn-contour:hover, .entete .btn-contour:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------- Barre de navigation ----------
   Aucun menu déroulant, aucun contenu au survol : sur mobile la barre perd
   le lettrage et garde les cibles. */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--carte);            /* opaque 100 %, aucun backdrop-filter */
  border-bottom: 3px solid var(--bleu);
}
.nav-interieur {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1rem;
  max-width: var(--large); margin-inline: auto; padding: 0.35rem var(--pad);
}
.nav-logo {
  margin-right: auto; padding: 0.6rem 0; font-family: var(--police-titre); font-size: 1.35rem; font-weight: 400;
  letter-spacing: 0.06em; color: var(--bleu-texte); text-decoration: none;
  text-transform: uppercase;
}
.nav-liens { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; }
.nav-liens a {
  display: inline-flex; align-items: center; min-height: 2.7rem;
  padding: 0.5rem 0.55rem; border-radius: 0.4rem;
  font-family: var(--police-mono); font-size: 1.35rem; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--encre); text-decoration: none;
}
.nav-liens a:hover { color: var(--bleu-texte); }
/* ⚠️ SPÉCIFICITÉ — .nav-liens a (0,0,1,1) bat .nav-cta (0,0,1,0) : sans ce
   sélecteur plus précis, le libellé du bouton principal héritait de
   color: var(--encre) et passait en encre foncée sur l'aplat foncé. */
.nav-liens a.nav-cta {
  margin-left: 0.4rem; padding-inline: 0.9rem; color: var(--blanc);
  font-family: var(--police); text-transform: none; letter-spacing: 0; font-size: 1.35rem; min-height: 2.7rem;
}
.nav-langue {
  font-variant: small-caps; font-weight: 700; color: var(--gris);
}
.nav-langue[aria-current="true"] { color: var(--bleu-texte); }
.nav-court { display: none; }

/* ---------- L'ENTÊTE ----------
   Le bloc d'identité sur l'encre, puis (sur l'accueil seulement) LES DEUX
   PHOTOS DU HÉROS. La page des services garde le bloc seul : Yannick
   cherche encore son image de tête (verdict du 10 sept.). */
.entete { background: var(--encre); color: var(--blanc); }
.identite {
  max-width: var(--large); margin-inline: auto;
  padding: 2.2rem var(--pad) 2.4rem; text-align: center;
}
.identite h1 { color: var(--blanc); }
.identite h1 .bleu { color: var(--bleu-pale); }
.identite-sous {
  margin: 0.7rem 0 0; font-family: var(--police-mono); font-size: 1.35rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--bleu-pale);
}
.identite-slogan { margin: 0.9rem auto 0; max-width: 42rem; font-size: 1.5rem; color: var(--gris-clair); }
.identite-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.4rem; }

/* ---------- LE HÉROS DE L'ACCUEIL : IDENTITÉ + CAMION ----------
   Verdict Yannick, 10 sept. 2026 (2e passe) : le bloc d'identité et
   l'ancien bloc « L'entreprise » n'en font plus qu'un. Tout le texte à
   GAUCHE, la photo du camion à DROITE, sur l'encre ; sur téléphone, le
   texte puis la photo (ordre du document, aucune règle à écrire).
   Aucun texte n'est posé SUR la photo : rien à voiler (règle du 25 août).
   ⚠️ `.identite` (centrée) sert toujours à la PAGE DES SERVICES, qui n'a
   pas encore de photo de tête : ne pas la fusionner avec ce bloc-ci. */
.entete-duo { display: grid; gap: 2rem; align-items: center; padding-block: 2.4rem; }
.entete-texte { text-align: left; }
.entete-texte .identite-sous,
.entete-texte .identite-slogan { margin-inline: 0; max-width: 34rem; }
/* Le métier et la ville vivent DANS le H1 (verdict Yannick, 11 sept.) : même habit que la ligne du téléphone. */
.h1-sous {
  display: block; margin-top: 0.55rem; font-family: var(--police-mono); font-size: 1.35rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bleu-pale); line-height: 1.35;
}
/* Téléphone sur UNE ligne : l'espacement 0.26em cassait le numéro après « 821- ». */
.entete-texte .identite-sous { letter-spacing: 0.14em; white-space: nowrap; }
@media (max-width: 480px) { .entete-texte .identite-sous { white-space: normal; } }
.entete-texte .identite-cta { justify-content: flex-start; margin-top: 1.6rem; }
/* Les paragraphes NUS seulement : `.identite-sous` et `.identite-slogan`
   gardent leur propre couleur (plus spécifiques qu'un `p` seul, mais moins
   que `.entete-texte p` — d'où le :not([class])). */
.entete-texte > p:not([class]) { color: var(--gris-clair); max-width: 34rem; }
.entete-slogan { margin-bottom: 0.9rem; font-size: 2.45rem; color: var(--blanc); }
.entete-photo { width: 100%; border-radius: 0.6rem; }
@media (min-width: 901px) {
  .entete-duo { grid-template-columns: 1.05fr 1fr; }
}
@media (max-width: 760px) {
  .entete-slogan { font-size: 1.8rem; }
}

/* ---------- Sélecteur de saison ----------
   Il ne CACHE rien (le contenu reste entier dans la page, donc indexable) :
   il fait remonter la saison choisie en tête de page et marque le bouton
   actif. C'est pour ça que <main> est une colonne flex. */
main { display: flex; flex-direction: column; }
main > * { order: 3; }
main > .entete { order: 0; }
main > .saisons { order: 1; }
/* La section d'hiver est la SEULE qui bouge, et seulement d'un cran : elle
   passe devant les services d'été, jamais devant le héros. */
body.saison-hiver .section-hiver { order: 2; }
.saisons { background: var(--bleu-clair); border-bottom: 1px solid var(--bord); }
.saisons-interieur {
  max-width: var(--large); margin-inline: auto; padding: 0.9rem var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
}
.saisons-titre {
  margin: 0; font-family: var(--police-mono); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bleu-texte);
}
.saison-btn {
  flex: 0 1 11rem; min-height: 3rem; padding: 0.6rem 1rem;
  font-family: inherit; font-size: 1.35rem; font-weight: 700;
  color: var(--bleu-texte); background: var(--carte);
  border: 2px solid var(--bord-fort); border-radius: 0.4rem; cursor: pointer;
}
.saison-btn[aria-pressed="true"] {
  background: var(--bleu); color: #FFFFFF; border-color: var(--bleu);   /* bleu exact du logo (Yannick, 11 sept.) */
}

/* ---------- Services : un service = sa description, puis SES photos ----------
   Verdict Yannick, 10 septembre 2026 : plus de section Avant / après à
   part. Chaque service tient en une colonne pleine largeur : une carte de
   texte au registre 4G (filet d'accent à gauche, titre bleu), et juste
   dessous sa galerie en grand, paires avant / après comprises. */
.services { display: grid; gap: 0; margin-top: 1.8rem; }
.service { display: grid; gap: 1rem; }
.service-texte {
  background: var(--carte); border: 1px solid var(--bord);
  border-top: 22px solid var(--bleu); border-radius: 0.5rem; padding: 1.2rem 1.3rem;
}
/* Le numéro GÉANT est le trait de SME que Jonathan aime : mêmes pixels
   rendus (68 → 127 px). --bleu (4,49:1) est permis ici : texte de grande
   taille, seuil AA 3:1. */
.service-num {
  display: block; margin-bottom: 1rem;
  font-family: var(--police-titre); font-size: clamp(3.7rem, 9vw, 6.9rem); font-weight: 400; line-height: 0.82;
  letter-spacing: -0.03em; color: var(--bleu);
}
.service h3 { margin-bottom: 0.8rem; font-size: 2.45rem; color: var(--bleu-texte); }
.service-texte p:last-child { margin: 0; color: var(--gris); }

/* La galerie : 2 colonnes sur grand écran, 1 sur téléphone. Une photo
   seule = une colonne (~ 600 px, contre ~ 170 px dans l'ancienne carte) ;
   une paire avant / après = la rangée entière, chaque vue à la même
   largeur qu'une photo seule (les paires portrait sont donc hautes : c'est
   voulu, « les images en grand »). */
.service-galerie { display: grid; gap: 0.8rem; grid-template-columns: 1fr; align-items: start; }
.service-galerie > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; }
.service-galerie > img.pleine { aspect-ratio: 4 / 3; }   /* plus de pleine largeur (verdict 10 sept. soir) */
.service-galerie > figure.pleine, .service-galerie > figure.simple { margin: 0; }
.service-galerie > figure.simple > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; }
.service-galerie > figure.pleine > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; }
.service-galerie figcaption { margin-top: 0.6rem; color: var(--gris); font-size: 1.5rem; }
.section--sombre .service-galerie figcaption { color: var(--gris-clair); }
.service-sans-photo {
  display: flex; align-items: center; justify-content: center;
  min-height: 7rem; padding: 1rem; text-align: center; border-radius: 0.5rem;
  background: var(--bleu-clair); color: var(--bleu-texte);
  font-family: var(--police-mono); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
@media (min-width: 761px) {
  .service-galerie { grid-template-columns: 1fr 1fr; }
}

/* ---------- Les trois emprunts à SME (verdict Yannick, 10 sept. 2026) ----------
   ① liste à crochets sous la description ② texte et photo vedette côte à
   côte, alternés gauche / droite ③ un service sur deux sur fond pâle,
   pleine largeur (box-shadow + clip-path : aucun débordement horizontal).
   Un service sans photo simple met son curseur avant / après dans la
   colonne de droite. */
.service { gap: 1.4rem; padding-block: 2.6rem; }
.service:nth-child(odd) {
  background: var(--pale);
  box-shadow: 0 0 0 100vmax var(--pale); clip-path: inset(0 -100vmax);
}
.service + .service { border-top: 1px solid var(--bord); }
.service .service-texte {
  background: none; border: 0; border-top: 22px solid var(--bleu); border-radius: 0;
  padding: 1.4rem 0 0;
}
.service .service-texte p:last-of-type { margin-bottom: 0; }
.service-points { list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 40rem; }
.service-points li {
  position: relative; padding: 0.8rem 0 0.8rem 2.4rem;
  border-bottom: 1px solid var(--bord); font-size: 1.4rem;
}
.service-points li:last-child { border-bottom: 0; }
.service-points li::before {
  content: ''; position: absolute; left: 0.2rem; top: 1.3rem;
  width: 1.1rem; height: 0.55rem;
  border-left: 0.22rem solid var(--bleu); border-bottom: 0.22rem solid var(--bleu);
  transform: rotate(-45deg);
}
.service-duo { display: grid; gap: 2rem; align-items: center; }
.service-vedette { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.5rem; border: 1px solid var(--bord); }
@media (min-width: 901px) {
  .service-duo { grid-template-columns: 1fr 1fr; }
  .service:nth-child(even) .service-duo > :last-child { order: -1; }
}
.service-duo > .service-sans-photo { min-height: 14rem; }

/* ---------- Badges Avant / Après (servent au curseur) ---------- */
.aa-badge {
  position: absolute; left: 0.5rem; top: 0.5rem; z-index: 1;
  padding: 0.25rem 0.6rem; border-radius: 0.3rem;
  font-family: var(--police-mono); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--encre); color: var(--blanc);
}
.aa-badge-apres { background: var(--bleu-texte); color: var(--blanc); }

/* ---------- Curseur avant / après (verdict Yannick, 10 sept. 2026) ----------
   Les deux photos l'une sur l'autre ; l'« avant » est découpé par clip-path
   à la position --pos, que le <input type=range> invisible pilote (souris
   et doigt, sans librairie). Occupe la place d'UNE photo au lieu de deux. */
.aa-curseur { margin: 0; }
.aa-curseur .aa-cadre { position: relative; overflow: hidden; border-radius: 0.5rem; background: var(--pale); user-select: none; }
.aa-curseur .aa-cadre img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.aa-curseur.large .aa-cadre img { aspect-ratio: 4 / 3; }
.aa-curseur .aa-avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.aa-curseur .aa-badge-apres { left: auto; right: 0.5rem; }
/* Curseur en SUITE (verdict Yannick, 10 sept. soir) : 2 à 4 photos empilées, UN seul
   range. La couche k recouvre la précédente de gauche à droite pendant son segment ;
   --k1..--k3 et --ligne sont écrits par le JS. Les badges sont posés par le générateur. */
.aa-curseur.suite .aa-k1 { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--k1, 0%)) 0 0); }
.aa-curseur.suite .aa-k2 { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--k2, 0%)) 0 0); }
.aa-curseur.suite .aa-k3 { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--k3, 0%)) 0 0); }
.aa-curseur.suite .aa-ligne { left: var(--ligne, 50%); }
.aa-curseur.suite .aa-badge-mi { transform: translateX(-50%); background: var(--bleu); color: var(--blanc); }
/* Chantiers de plus, repliés derrière un bouton (details natif : rien ne se charge avant le clic) */
.chantiers-plus { grid-column: 1 / -1; margin-top: 0.4rem; }
.chantiers-plus > summary { list-style: none; cursor: pointer; display: inline-block; padding: 0.7rem 1.3rem; border: 2px solid var(--bleu); border-radius: 0.4rem; color: var(--bleu); font-weight: 700; font-size: 1.1rem; }
.chantiers-plus > summary::-webkit-details-marker { display: none; }
.chantiers-plus[open] > summary { margin-bottom: 0.8rem; }
.section--sombre .chantiers-plus > summary { border-color: var(--bleu-pale); color: var(--bleu-pale); }
.aa-curseur .aa-ligne {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px;
  background: var(--blanc); box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none;
}
.aa-curseur .aa-ligne::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 2.6rem; height: 2.6rem;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--blanc); border: 3px solid var(--bleu);
  background-image: linear-gradient(var(--bleu), var(--bleu)), linear-gradient(var(--bleu), var(--bleu));
  background-size: 0.55rem 0.2rem; background-repeat: no-repeat; background-position: 28% 50%, 72% 50%;
}
.aa-curseur input[type=range] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y;
}
.aa-curseur .aa-cadre:has(input:focus-visible) { outline: 3px solid var(--bleu); outline-offset: 2px; }
.aa-curseur figcaption { margin-top: 0.6rem; color: var(--gris); font-size: 1.5rem; }
@media (min-width: 761px) {
  /* Verdict Yannick 10 sept. soir : les curseurs de galerie prennent UNE colonne,
     la même largeur que la photo jumelée à la description — plus de pleine largeur. */
  .service-galerie > .aa-curseur { grid-column: auto; }
}

/* ---------- Raccourcis vers la page des services ----------
   Chaque catégorie de l'accueil porte les liens des services détaillés
   qu'elle regroupe (verdict Yannick, 10 sept.). Pastilles, pas une liste :
   elles se lisent d'un coup d'œil et se touchent au doigt (≥ 2,8rem). */
.raccourcis { margin-top: 1.6rem; }
.raccourcis-titre {
  margin: 0 0 0.6rem; font-family: var(--police-mono); font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bleu-texte);
}
.raccourcis-liens { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.raccourci {
  display: inline-flex; align-items: center; min-height: 2.8rem;
  padding: 0.45rem 0.95rem; border-radius: 2rem;
  background: var(--carte); border: 2px solid var(--bord-fort);
  color: var(--bleu-texte); font-size: 1.2rem; font-weight: 700; text-decoration: none;
}
.raccourci:hover { background: var(--bleu-clair); border-color: var(--bleu-texte); }
.services-tout { margin: 2.6rem 0 0; }
.services-tout .btn { max-width: 34rem; margin-inline: auto; }

/* ---------- L'hiver : la section sombre qui porte la NEIGE ----------
   Le même effet de flocons que le site de l'Entreprise SME, porté ici en
   un seul fichier (js/neige.js) : deux canvas empilés dans .blizzard,
   derrière le contenu. La boucle s'arrête quand la section sort de
   l'écran, quand l'onglet passe à l'arrière-plan, et elle ne démarre pas
   du tout si le visiteur a demandé moins d'animation. */
.section-hiver { position: relative; overflow: clip; background: #000; } /* fond NOIR (verdict Yannick 10 sept. PM), pas l'encre bleutée */
.section-hiver > .contenu { position: relative; z-index: 1; }
.blizzard { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.blizzard canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.neige-arriere { filter: blur(2.5px); }

/* Les mêmes blocs de service, mais sur l'encre : l'alternance de fond pâle
   n'a plus de sens et les couleurs de texte doivent remonter. */
.section--sombre .service:nth-child(odd) { background: none; box-shadow: none; clip-path: none; }
.section--sombre .service h3 { color: var(--bleu-pale); }
.section--sombre .service-num { color: var(--bleu-pale); }
.section--sombre .service-texte { border-top-color: var(--bleu-pale); }
.section--sombre .service-texte p,
.section--sombre .service-texte p:last-child,
.section--sombre .aa-curseur figcaption { color: var(--gris-clair); }
.section--sombre .service-points li { border-bottom-color: rgba(255, 255, 255, 0.28); }
.section--sombre .service-points li::before { border-color: var(--bleu-pale); }
.section--sombre .service + .service { border-top-color: rgba(255, 255, 255, 0.28); }
.section--sombre .service-galerie > img,
.section--sombre .service-vedette { border-color: rgba(255, 255, 255, 0.2); }

/* ---------- Colonnes sobres ---------- */
.colonnes { display: grid; gap: 1.6rem; margin-top: 1.2rem;
            grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.liste-points { margin: 1rem 0 0; padding-left: 1.3rem; }
.liste-points li { margin-bottom: 0.5rem; }

/* ---------- Avis : le bouton « f » vers la page ---------- */
.avis-bloc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: 1.4rem; padding: 1.4rem; border-radius: 0.6rem;
  background: var(--carte); border: 1px solid var(--bord); border-left: 5px solid var(--bleu);
}
.btn-f { gap: 0.6rem; }
.btn-f .f {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem; border-radius: 0.25rem;
  background: var(--blanc); color: var(--bleu-texte);
  font-weight: 900; font-size: 1.35rem; line-height: 1;
}

/* ---------- Formulaire ---------- */
.form { max-width: 36rem; margin-top: 1.6rem; }
.champ { margin-bottom: 1.1rem; }
.champ label { display: block; margin-bottom: 0.35rem; font-size: 1.4rem; font-weight: 700; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 3.1rem; padding: 0.7rem 0.8rem;
  font-family: inherit; font-size: 1.4rem; color: var(--encre);
  background: var(--carte); border: 2px solid var(--bord-fort); border-radius: 0.4rem;
}
.champ textarea { min-height: 6.5rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bleu-texte); }
.champ .aide { margin: 0.3rem 0 0; font-size: 1.5rem; color: var(--gris); }
.form__consentement {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin-bottom: 1.2rem; font-size: 1.4rem; line-height: 1.45; color: var(--gris);
}
.form__consentement input { margin-top: 0.35rem; width: 1.15rem; height: 1.15rem; accent-color: var(--bleu-texte); }
.form-note { margin-top: 0.9rem; font-size: 1.5rem; color: var(--gris); }
.form-etat {
  margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 0.4rem;
  background: var(--carte); border: 1px solid var(--bord);
  border-left: 5px solid var(--bleu); font-size: 1.4rem;
}

/* ---------- Coordonnées ---------- */
.contact-liste { list-style: none; margin: 1rem 0 0; padding: 0; }
.contact-liste li { margin-bottom: 0.4rem; }
/* overflow-wrap:anywhere (et non break-word) : lui seul réduit la taille
   MIN-CONTENT de l'item, sinon l'adresse courriel déborde sous 375 px. */
.contact-liste a { display: inline-flex; align-items: center; min-height: 2.6rem;
                   font-size: 1.4rem; max-width: 100%; overflow-wrap: anywhere; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: var(--blanc); padding-block: 2.6rem; }
.pied a { color: var(--bleu-pale); }
.pied-nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; margin-bottom: 1rem; }
.pied-nav a { display: inline-flex; align-items: center; min-height: 2.6rem;
              font-size: 1.35rem; color: var(--blanc); text-decoration: none; }
.pied-nav a:hover { color: var(--bleu-pale); }
/* Le logo fourni par Jonathan est une image à FOND NOIR (aucune
   transparence, et aucun détourage génératif n'est permis). Il est donc posé
   sur --encre, la seule surface du site où son fond disparaît. */
/* mix-blend-mode: lighten fait disparaître le carré noir du fichier sans y
   toucher : sur --encre, chaque pixel noir du logo devient exactement
   --encre, et l'écusson garde ses couleurs. C'est la seule façon honnête de
   détourer une image sans transparence (aucun détourage génératif). */
.pied-logo { width: 100%; max-width: 200px; height: auto; margin-bottom: 0.9rem;
             mix-blend-mode: lighten; }
.pied-marque { margin-bottom: 0.8rem; font-size: 1.4rem; font-weight: 700; }
.pied-note { max-width: 58rem; font-family: var(--police-mono); font-size: 1.05rem; color: var(--gris-clair); }
/* Loi 25 : la politique doit être ACCESSIBLE, pas affichée en permanence —
   masquée par défaut, révélée par :target via « Mentions légales ». Pas de JS. */
#confidentialite { display: none; }
#confidentialite:target { display: block; }
.legal { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.legal h2 { font-size: 2.1rem; }
.legal h3 { font-size: 1.6rem; margin-top: 1.4rem; }
.legal p { max-width: 58rem; margin-top: 0.5rem; font-size: 1.5rem; color: var(--gris-clair); }
.legal-close { display: inline-block; margin-top: 1.4rem; font-weight: 700; }

/* ---------- Retour en haut ---------- */
.retour-haut {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--bleu); color: #FFFFFF;   /* bleu exact du logo (Yannick, 11 sept.) */
  border-radius: 50%; text-decoration: none; font-size: 1.35rem;
  box-shadow: 0 2px 8px rgba(11, 18, 32, 0.3);
  opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;
}
.retour-haut.visible { opacity: 1; visibility: visible; }
.retour-haut:hover { background: var(--bleu-fonce); }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .nav-logo { display: none; }
  .nav-interieur { justify-content: center; padding-inline: 0.5rem; }
  .nav-liens { margin-inline: auto; gap: 0; flex-wrap: wrap; justify-content: center; }
  .nav-liens a { padding-inline: 0.4rem; font-size: 1rem; }
  .nav-liens a.nav-cta { font-size: 1.1rem; }
  .nav-long { display: none; }
  .nav-court { display: inline; }
  .section { padding-block: 2.4rem; }
  .identite { padding-top: 1.8rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.4rem; }
  .service h3 { font-size: 1.8rem; }
}

/* Téléphones étroits : on resserre les gouttières, jamais la taille du
   texte ni la hauteur des cibles (plancher CLAUDE.md). */
@media (max-width: 480px) {
  :root { --pad: 0.9rem; }
  .nav-interieur { padding-inline: 0.25rem; }
  .nav-liens a { padding-inline: 0.3rem; }
  .nav-liens a.nav-cta { padding-inline: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}