/* ==========================================================================
   TYPOGRAPHIE — Lato, auto-hébergée
   Les fichiers sont servis depuis notre propre domaine : aucun appel à
   Google Fonts, donc aucune donnée transmise à un tiers et la conformité
   RGPD reste intacte. Chaque graisse est sous-ensemblée au latin et aux
   accents français : 25 Ko par fichier au lieu de 120.
   Lato — Łukasz Dziedzic, licence SIL Open Font 1.1.
   ========================================================================== */
@font-face{
  font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;
  src:url("polices/lato-400.woff2") format("woff2");
}
@font-face{
  font-family:"Lato";font-style:normal;font-weight:600;font-display:swap;
  src:url("polices/lato-600.woff2") format("woff2");
}
@font-face{
  font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;
  src:url("polices/lato-700.woff2") format("woff2");
}
@font-face{
  font-family:"Lato";font-style:normal;font-weight:900;font-display:swap;
  src:url("polices/lato-900.woff2") format("woff2");
}

/* ==========================================================================
   Sud Ouest Coordination — feuille de styles principale
   Aucune dépendance externe (RGPD : pas de Google Fonts, pas de CDN tiers)
   ========================================================================== */

:root{
  --bleu:#4A7CAC;
  --bleu-clair:#6D9BC8;
  --bleu-fonce:#2F5578;
  --bleu-nuit:#12233A;
  --anthracite:#1A1D21;
  --anthracite-2:#24282E;
  --gris:#6A737D;
  --gris-clair:#DFE5EC;
  --creme:#EFF3F8;
  --blanc:#FFFFFF;

  /* Palette de fonds : aucun blanc pur en fond de page.
     Quatre valeurs très proches, mais assez distinctes pour que l'œil
     perçoive un changement de section sans avoir besoin d'un trait. */
  --papier:#FAFBFD;      /* le plus clair — respire, sans être blanc */
  --fond:#F2F5F9;        /* fond de référence du site */
  --ardoise:#E8EDF3;     /* le plus soutenu des tons neutres */
  --bleute:#EAF1F8;      /* légèrement teinté du bleu du logo */
  --trait:#DDE4EC;       /* filet de séparation */

  /* Grain très fin, généré en SVG : donne la matière « papier » et casse
     la platitude des aplats. Aucune image, aucun appel réseau. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  --ok:#2E9E6B;

  /* Accent chaud. Un bleu seul finit par être froid ; cette ocre brûlée
     rappelle la terre et les engins de chantier. Elle est réservée aux
     chiffres, aux repères de progression et aux états actifs — jamais aux
     boutons d'action, qui restent bleus pour ne pas brouiller le message. */
  --ocre:#B96C28;
  --ocre-clair:#DC9A55;
  --ocre-voile:rgba(185,108,40,.11);

  --rayon:14px;
  --rayon-s:8px;
  --ombre:0 10px 30px -12px rgba(18,35,58,.25);
  --ombre-forte:0 30px 60px -20px rgba(18,35,58,.35);
  --max:1240px;
  --h-entete:86px;   /* hauteur de l'en-tête sur téléphone */
  --mordant:30px;    /* chevauchement du bandeau de chiffres sur le héros */
  --marge-ref:20px;  /* respiration latérale du carrousel de références */
  --ease:cubic-bezier(.22,.8,.28,1);

  --police:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
html{background:var(--anthracite)}
body{
  margin:0;padding-bottom:0;
  font-family:var(--police);
  color:var(--anthracite);
  background:var(--fond);
  font-size:17.5px;
  line-height:1.62;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--ocre);color:#fff}
img{max-width:100%;height:auto;display:block}
/* `display:contents` fait disparaître la boîte du <picture> : toutes les
   règles écrites pour `.parent img` continuent de s'appliquer telles quelles
   alors que l'image est désormais enveloppée. */
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{margin:0 0 .5em;line-height:1.1;letter-spacing:-.021em;font-weight:900}
h1{letter-spacing:-.03em}
h3,h4{font-weight:700;letter-spacing:-.012em}
/* Les chiffres s'alignent verticalement : indispensable dans les tableaux
   de références et le bandeau de statistiques. */
.chiffres b,.ref__meta b,.niv h3,.note__score,.avis__date{font-variant-numeric:tabular-nums}
h1{font-size:clamp(2.15rem,5.4vw,4.15rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.75rem)}
h3{font-size:clamp(1.12rem,1.8vw,1.4rem);letter-spacing:-.015em}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.05rem,1.5vw,1.24rem);color:#414A54;line-height:1.6}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.section--serre{padding-block:clamp(40px,4.5vw,64px)}

/* --- Rythme des sections ------------------------------------------------
   Chaque section porte un ton et une matière qui lui sont propres, pour
   qu'on sente le passage de l'une à l'autre sans jamais lire un trait.
   Le grain est commun : c'est lui qui donne l'unité de l'ensemble.        */
.section--papier{background:var(--papier)}
.section--fond{background:var(--fond)}
.section--ardoise{background:var(--ardoise)}
.section--bleute{background:var(--bleute)}
.section--creme{background:var(--creme)}   /* conservé : pages internes */

.section--papier,.section--fond,.section--ardoise,.section--bleute,.section--creme{
  isolation:isolate;
}
.section--papier::before,.section--fond::before,.section--ardoise::before,
.section--bleute::before,.section--creme::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain);background-size:140px 140px;
  opacity:.32;mix-blend-mode:multiply;
}
.section--papier>*,.section--fond>*,.section--ardoise>*,
.section--bleute>*,.section--creme>*{position:relative;z-index:1}

/* Matières additionnelles, cumulables avec un ton */
.tx-points{background-image:
  radial-gradient(circle at center,rgba(26,29,33,.055) 1px,transparent 1.6px);
  background-size:26px 26px}
.tx-grille::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(74,124,172,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,124,172,.10) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 44%,#000 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 68% at 50% 44%,#000 30%,transparent 100%);
}
.tx-halo::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 52% at 50% 0%,rgba(74,124,172,.16),transparent 70%);
}

/* Filets de séparation, quand deux tons voisins sont trop proches */
.filet-haut{border-top:1px solid var(--trait)}
/* la FAQ suit immédiatement le bandeau Gironde : pas de blanc inutile */
.bandeau-zone + .section{padding-top:clamp(30px,3.4vw,46px)}
.filet-bas{border-bottom:1px solid var(--trait)}

.section--nuit{background:var(--anthracite);color:#DDE3EA}
.section--nuit>*{position:relative;z-index:1}
.section--nuit h2,.section--nuit h3{color:#fff}
.center{text-align:center}
.mesure{max-width:65ch}
.mesure.center{margin-inline:auto}

/* --- Surtitre / titres de section ------------------------------------- */
.surtitre{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.775rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bleu);margin-bottom:16px;
}
.surtitre::before{content:"";width:26px;height:2px;background:var(--bleu);border-radius:2px}
.section--nuit .surtitre{color:var(--bleu-clair)}

/* --- Boutons ----------------------------------------------------------- */
.btn{
  --bg:var(--bleu);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border:0;border-radius:100px;
  background:var(--bg);color:var(--fg);
  font-weight:700;font-size:.97rem;letter-spacing:.005em;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s;
  box-shadow:0 8px 22px -10px rgba(74,124,172,.85);
  text-align:center;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(74,124,172,.9);background:var(--bleu-fonce)}
.btn:active{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--bleu-clair);outline-offset:3px}
.btn--fantome{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn--fantome:hover{background:currentColor;box-shadow:inset 0 0 0 2px currentColor}
.btn--fantome:hover span,.btn--fantome:hover svg{color:var(--anthracite);stroke:var(--anthracite)}
.btn--blanc{background:#fff;color:var(--anthracite);box-shadow:0 8px 22px -10px rgba(0,0,0,.5)}
.btn--blanc:hover{background:#fff;color:var(--bleu-fonce)}
.btn--large{padding:18px 36px;font-size:1.03rem}
.btn svg{width:18px;height:18px;flex:none}


/* --- Ajustements de rythme vertical ------------------------------------ */
.section--haut-serre{padding-top:clamp(38px,4vw,60px)}

/* Paragraphe mis en avant (même taille, même police, juste plus dense) */
.accent{font-weight:700;color:var(--anthracite)}
.section--nuit .accent{color:#fff}

/* --- Duo : la photo s'étire du titre jusqu'au bas du bouton ------------- */
.duo--etire{align-items:stretch}
.duo--etire .duo__media{display:flex;margin-top:38px}
.duo--etire .media{flex:1;display:flex;min-height:340px}
.duo--etire .media img{aspect-ratio:auto;width:100%;height:100%;object-fit:cover}
@media (max-width:960px){
  .duo--etire .duo__media{margin-top:0}
  .duo--etire .media{min-height:0}
  .duo--etire .media img{aspect-ratio:4/3;height:auto}
}

/* --- Bandeau d'appel à l'action : plus fin, texte plus large ------------ */
.cta{padding-block:clamp(32px,3.6vw,52px)}
.cta .wrap>div:first-child{flex:1 1 560px;min-width:0}
.cta h2{font-size:clamp(1.45rem,2.4vw,2rem);margin-bottom:6px}
.cta p{
  max-width:68ch;          /* le texte déborde volontairement sous la question */
  text-wrap:pretty;
  font-size:1.02rem;line-height:1.5;
}

/* --- Cartes livrables : survol plus vivant ------------------------------ */
.carte__icone{
  position:relative;overflow:hidden;
  transition:background .4s var(--ease),color .3s,transform .5s var(--ease),box-shadow .4s var(--ease);
}
.carte:hover .carte__icone{
  background:linear-gradient(140deg,var(--bleu-clair),var(--bleu-fonce));
  color:#fff;transform:rotate(-6deg) scale(1.08);
  box-shadow:0 14px 26px -12px rgba(74,124,172,.9);
}
.carte:hover .carte__icone svg{animation:icoPop .5s var(--ease)}
@keyframes icoPop{0%{transform:scale(.82)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.carte__icone::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.45),transparent 60%);
  opacity:0;transition:opacity .4s var(--ease);
}
.carte:hover .carte__icone::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  .carte:hover .carte__icone{transform:none}
  .carte:hover .carte__icone svg{animation:none}
}

/* --- En-tête ----------------------------------------------------------- */
.barre-info{
  background:var(--anthracite);color:#B9C2CD;font-size:.82rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.barre-info .wrap{display:flex;gap:26px;align-items:center;justify-content:flex-end;height:42px;
  max-width:none;padding-inline:clamp(18px,3vw,48px)}
.barre-info a{display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.barre-info a:hover{color:#fff}
.barre-info svg{width:14px;height:14px;color:var(--bleu-clair)}
.barre-info .zone{margin-right:auto;color:#7E8894}

.entete{
  position:sticky;top:0;z-index:900;background:rgba(250,251,253,.90);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--gris-clair);
  transition:box-shadow .3s,padding .3s;
}
.entete.collee{box-shadow:0 6px 24px -14px rgba(18,35,58,.5)}
.entete .wrap{display:flex;align-items:center;gap:24px;min-height:88px;position:relative;z-index:2;
  max-width:none;padding-inline:clamp(18px,3vw,48px)}
/* Le logotype porte désormais le nom : plus de texte à côté de l'image.
   Deux fichiers : le verrouillage complet, et le pavé du sigle seul. */
/* Le logotype porte désormais le nom : plus de texte à côté de l'image.
   Attention : ne pas déclarer `display` sur `.logo img`, ce sélecteur est
   plus spécifique que `.logo__sigle` et faisait réapparaître le pavé du
   sigle à côté du logotype complet sur ordinateur. */
.logo{display:flex;align-items:center;flex:none;padding:10px 0;margin-right:auto}
.logo img{width:auto}
.logo .logo__complet{display:block;height:46px}
.logo .logo__sigle{display:none;height:46px}
/* Logo agrandi uniquement dans l'en-tête */
.entete .logo .logo__complet{height:52px}

.nav{display:flex;align-items:center;gap:2px;
  position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.nav a{
  padding:9px 12px;border-radius:8px;font-size:.9rem;font-weight:600;color:#333A42;
  position:relative;transition:color .2s,background .2s;
}
.nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;
  background:var(--bleu);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--bleu-fonce)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--bleu-fonce)}
.nav__ic,.nav__pied{display:none}   /* réservés au menu déroulant */
.entete>.wrap>.btn{margin-left:auto;padding:13px 24px;font-size:.92rem;flex:none}

.burger{
  display:none;margin-left:auto;width:46px;height:46px;border:0;background:var(--creme);
  border-radius:10px;cursor:pointer;position:relative;
}
.burger span{
  position:absolute;left:13px;right:13px;height:2px;background:var(--anthracite);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --- Héros ------------------------------------------------------------- */
.hero{position:relative;background:var(--anthracite);color:#fff;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
/* La photo est légèrement surdimensionnée : elle peut ainsi glisser au
   défilement sans jamais découvrir de bord. */
.hero__media{overflow:hidden}
.hero__media img{
  width:100%;height:114%;object-fit:cover;object-position:center 60%;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){.hero__media img{height:100%;transform:none!important}}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(105deg,rgba(16,22,30,.90) 0%,rgba(16,22,30,.76) 42%,rgba(16,22,30,.38) 100%),
    linear-gradient(to bottom,
      rgba(16,20,26,.55) 0%,
      rgba(16,20,26,.12) 26%,
      rgba(16,20,26,.30) 52%,
      rgba(18,21,26,.72) 74%,
      rgba(20,23,27,.94) 90%,
      var(--anthracite) 100%);
}
/* Trame de plan : une maille fine imbriquée dans une maille large, comme
   sur un calque d'exécution. C'est ce double pas qui donne l'impression de
   papier millimétré plutôt que de simple quadrillage. */
.hero__grille{
  position:absolute;inset:0;z-index:-1;opacity:.20;pointer-events:none;
  background-image:
    linear-gradient(rgba(109,155,200,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(109,155,200,.55) 1px,transparent 1px),
    linear-gradient(rgba(109,155,200,.30) 1px,transparent 1px),
    linear-gradient(90deg,rgba(109,155,200,.30) 1px,transparent 1px);
  background-size:78px 78px,78px 78px,26px 26px,26px 26px;
  mask-image:radial-gradient(120% 80% at 75% 30%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 80% at 75% 30%,#000,transparent 72%);
}
.hero .wrap{position:relative;padding-top:clamp(78px,11vw,130px);padding-bottom:clamp(78px,11vw,130px)}

/* --- Le héros occupe exactement une hauteur d'écran ---------------------
   Hauteur = écran − barre d'infos (43 px) − en-tête (88 px), à quoi on
   ajoute les 64 px dont le bandeau de chiffres mord vers le haut : celui-ci
   commence ainsi pile sous la ligne de flottaison. Le supplément de marge
   basse compense ce même chevauchement, de sorte que l'espace visible au-
   dessus des étiquettes et sous les boutons est rigoureusement le même. */
@media (min-width:761px){
  .hero{
    display:flex;flex-direction:column;justify-content:center;
    min-height:calc(100vh - 131px + 64px);
    min-height:calc(100svh - 131px + 64px);
  }
  .hero .wrap{
    width:100%;
    padding-top:clamp(34px,4.4vw,58px);
    padding-bottom:calc(clamp(34px,4.4vw,58px) + 64px);
  }
}
/* Ligne de cote : le trait vertical à tirets d'about qu'on trouve en marge
   d'un plan. Elle borne le bloc de titre comme une cotation borne un mur. */
.hero__contenu{max-width:760px;position:relative;padding-left:38px}
.hero__cote{
  position:absolute;left:0;top:4px;bottom:8px;width:1px;pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 0%,rgba(220,154,85,.62) 9%,rgba(220,154,85,.62) 91%,transparent 100%);
}
.hero__cote::before,.hero__cote::after{
  content:"";position:absolute;left:-6px;width:13px;height:2px;
  background:var(--ocre-clair);border-radius:2px;
}
.hero__cote::before{top:9%}
.hero__cote::after{bottom:9%}
@media (max-width:760px){
  .hero__contenu{padding-left:22px}
  .hero__cote::before,.hero__cote::after{left:-5px;width:11px}
}
.hero h1{color:#fff;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--bleu-clair);display:block}
.hero p{color:#C6D0DB;font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:56ch;margin-bottom:34px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}

.badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:100px;font-size:.82rem;font-weight:600;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#DCE4EC;
  backdrop-filter:blur(6px);
}
.badge svg{width:14px;height:14px;color:var(--bleu-clair)}

/* Bandeau de chiffres accroché au héros */
.chiffres{
  position:relative;z-index:5;background:#fff;border-radius:var(--rayon);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.75);margin-top:-64px;margin-bottom:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  overflow:hidden;
}
.chiffres div{padding:32px 22px 28px;text-align:center;border-right:1px solid var(--gris-clair)}
.chiffres div:last-child{border-right:0}
.chiffres b{display:block;font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:900;color:var(--bleu-fonce);letter-spacing:-.03em;line-height:1}
.chiffres span{display:block;margin-top:8px;font-size:.83rem;color:var(--gris);font-weight:600;letter-spacing:.02em}

/* --- Grilles ----------------------------------------------------------- */
.grille{display:grid;gap:26px}
.grille--3{grid-template-columns:repeat(3,1fr)}
.grille--2{grid-template-columns:repeat(2,1fr)}
.grille--4{grid-template-columns:repeat(4,1fr)}
.wrap--large .grille--4{gap:20px}
.wrap--large .carte p{font-size:.95rem;text-wrap:pretty}
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,68px);align-items:center}
.duo--inverse .duo__media{order:-1}

/* --- Cartes services --------------------------------------------------- */
.carte{
  position:relative;background:#fff;border:1px solid var(--gris-clair);border-radius:var(--rayon);
  padding:34px 30px 30px;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
  display:flex;flex-direction:column;
}
.carte::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--bleu),var(--bleu-clair));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.carte:hover{transform:translateY(-8px);box-shadow:var(--ombre-forte);border-color:transparent}
.carte:hover::before{transform:scaleX(1)}
.carte__icone{
  width:56px;height:56px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(140deg,rgba(74,124,172,.14),rgba(74,124,172,.05));color:var(--bleu-fonce);
  transition:background .3s,color .3s;
}
.carte:hover .carte__icone{background:var(--bleu);color:#fff}
.carte__icone svg{width:27px;height:27px}
.carte h3{margin-bottom:10px}
.carte p{color:#4C555F;font-size:.97rem;margin-bottom:20px}
.carte .lien{margin-top:auto;font-weight:700;color:var(--bleu-fonce);display:inline-flex;align-items:center;gap:8px;font-size:.93rem}
.carte .lien svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.carte:hover .lien svg{transform:translateX(5px)}
.carte--nuit{background:var(--anthracite-2);border-color:rgba(255,255,255,.09)}
.carte--nuit p{color:#AEB8C4}



/* --- Variantes d'en-tête de section -------------------------------------
   Tous centrés, mais avec un traitement graphique différent à chaque fois :
   .titre-section  titre simple
   .titre-chiffre  gros chiffre fantôme derrière
   .titre-souligne mot clé souligné d'un trait dessiné
   .titre-note     titre + pastille de note Google
   .titre-filet    titre encadré de deux filets
   .titre-encadre  bloc encadré à fond dégradé
   ------------------------------------------------------------------------ */

/* Surtitre en pastille (variante du surtitre à tiret) */
.surtitre--pastille{
  padding:7px 15px;border-radius:100px;margin-bottom:18px;
  background:rgba(74,124,172,.11);border:1px solid rgba(74,124,172,.26);
  font-size:.73rem;letter-spacing:.15em;
}
.surtitre--pastille::before{display:none}
.section--nuit .surtitre--pastille,.section--missions .surtitre--pastille{
  background:rgba(109,155,200,.16);border-color:rgba(109,155,200,.34);
}

/* Gros chiffre fantôme */
.titre-chiffre{
  position:relative;text-align:center;max-width:58ch;
  margin:0 auto clamp(34px,4vw,52px);padding-top:clamp(18px,2.4vw,34px);
}
.titre-chiffre__fond{
  position:absolute;left:50%;top:-18px;transform:translateX(-50%);
  font-size:clamp(6rem,13vw,11rem);font-weight:900;line-height:.8;
  color:transparent;-webkit-text-stroke:2px rgba(185,108,40,.20);
  letter-spacing:-.06em;pointer-events:none;user-select:none;z-index:0;
}
/* NE PAS remettre `.titre-chiffre > *` ici : le sélecteur écrasait le
   position:absolute du chiffre fantôme, qui repassait alors dans le flux
   et creusait un vide énorme au-dessus du titre. */
.titre-chiffre .surtitre,.titre-chiffre h2,.titre-chiffre .lead,.titre-chiffre p{
  position:relative;z-index:1;
}
.titre-chiffre h2{margin:0 0 10px}
.titre-chiffre .lead{margin:0}
.titre-chiffre--faq{padding-top:0;margin-bottom:clamp(26px,3vw,38px)}
/* Le point d'interrogation est calé DERRIÈRE le bloc de titre, jamais
   au-dessus : il ne déborde plus sur la section précédente. */
.titre-chiffre--faq .titre-chiffre__fond{
  font-size:clamp(8.5rem,17vw,15rem);
  top:50%;left:50%;transform:translate(-50%,-48%);
  -webkit-text-stroke:2px rgba(185,108,40,.24);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.25) 100%);
  mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.25) 100%);
}

/* Mot clé souligné d'un trait dessiné à la main */
.titre-souligne{text-align:center;max-width:56ch;margin:0 auto clamp(26px,3vw,38px)}
.titre-souligne h2{margin:0}
.titre-souligne em{
  font-style:normal;position:relative;white-space:nowrap;
}
.titre-souligne em::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:-.12em;height:.32em;
  background:linear-gradient(90deg,rgba(185,108,40,.32),rgba(220,154,85,.62));
  border-radius:100px;z-index:-1;
}

/* Titre + pastille de note */
.titre-note{text-align:center;max-width:60ch;margin:0 auto clamp(30px,3.6vw,44px)}
.titre-note h2{margin:0 0 22px}
.titre-note .note{margin-inline:auto;width:fit-content}

/* Titre encadré de deux filets */
.titre-filet{
  display:flex;align-items:center;gap:clamp(16px,2.5vw,28px);
  justify-content:center;margin-bottom:clamp(24px,3vw,36px);
}
.titre-filet__bloc{text-align:center;flex:none}
.titre-filet h2{margin:0 0 6px;font-size:clamp(1.5rem,2.8vw,2.2rem);white-space:nowrap}
.titre-filet__trait{
  flex:1 1 40px;height:1px;min-width:30px;max-width:220px;
  background:linear-gradient(90deg,transparent,rgba(74,124,172,.5),transparent);
}
.titre-filet__note{
  font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--gris);
  text-transform:uppercase;white-space:nowrap;
}

/* Bloc encadré */
.titre-encadre{
  max-width:62ch;margin:0 auto clamp(32px,3.8vw,48px);text-align:center;
  padding:clamp(22px,2.6vw,32px) clamp(20px,3vw,40px);
  border:1px solid var(--gris-clair);border-radius:18px;
  background:linear-gradient(180deg,var(--blanc),var(--fond));
  box-shadow:0 12px 30px -26px rgba(18,35,58,.7);
}
.titre-encadre__eti{
  display:inline-block;margin-bottom:12px;padding:6px 14px;border-radius:100px;
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:var(--anthracite);color:#fff;
}
.titre-encadre h2{margin:0 0 10px}
.titre-encadre .lead{margin:0}

/* Les filtres restent centrés sous le titre */
.filtres{margin-bottom:clamp(26px,3vw,34px)}

@media (max-width:820px){
  .titre-filet{flex-wrap:wrap}
  .titre-filet__bloc{flex:1 1 100%}
  .titre-filet h2{white-space:normal}
  .titre-filet__trait{display:none}
}

/* --- Titre de section compact ------------------------------------------ */
.titre-section{text-align:center;max-width:56ch;margin:0 auto clamp(38px,4vw,56px)}
.titre-section h2{margin:0}

/* --- Nos missions : cartes photo larges, dégradé sombre -> gris --------- */
/* conteneur plus large que le reste du site */
.wrap--large{max-width:1560px;padding-inline:clamp(18px,3vw,48px)}

.section--missions{
  position:relative;color:#D7DEE6;
  display:flow-root;            /* empêche l'effondrement de la marge du bandeau */   /* pas d'overflow:hidden : le bandeau de chiffres déborde vers le haut */
  /* prolonge le sombre du héros puis fond vers le gris de la section suivante */
  background:linear-gradient(to bottom,
    var(--anthracite) 0%,
    #1E242B 38%,
    #39424C 62%,
    #7C8792 80%,
    #C6CED8 92%,
    var(--papier) 100%);
  padding:0 0 clamp(46px,5vw,72px);
  margin-top:-1px;
}
.section--missions>*{position:relative;z-index:1}
.section--missions::before{
  content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;overflow:hidden;
  background-image:linear-gradient(rgba(140,180,220,.7) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(140,180,220,.7) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(90% 60% at 50% 0%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(90% 60% at 50% 0%,#000,transparent 78%);
}
.missions__titre{
  position:relative;color:#fff;text-align:center;text-wrap:balance;
  margin:clamp(64px,7vw,104px) auto clamp(34px,4vw,52px);
  font-size:clamp(1.65rem,3.1vw,2.6rem);
}

.cartes-photo{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,24px);perspective:1800px;
}
.cp{
  position:relative;display:block;overflow:hidden;border-radius:18px;
  aspect-ratio:16/11;isolation:isolate;background:#10161E;
  box-shadow:0 20px 44px -24px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08);
  transform-style:preserve-3d;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
  will-change:transform;
}
.cp img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .9s var(--ease), filter .55s var(--ease);
  filter:saturate(.85) contrast(1.05);
}
.cp::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(8,12,18,.95) 0%,
    rgba(8,12,18,.78) 40%,
    rgba(8,12,18,.34) 72%,
    rgba(8,12,18,.14) 100%);
  transition:opacity .5s var(--ease);
}
/* icône de mission (remplace le numéro) */
.cp__ic{
  position:absolute;top:20px;left:22px;
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .35s var(--ease),border-color .35s,transform .45s var(--ease);
}
.cp__ic svg{width:27px;height:27px}

.cp__bas{position:absolute;left:0;right:0;bottom:0;padding:24px 24px 22px;transform:translateZ(40px)}
.cp__bas h3{color:#fff;margin:0 0 5px;font-size:clamp(1.2rem,1.55vw,1.48rem)}
.cp__bas p{color:#BCC7D3;margin:0 0 14px;font-size:.93rem;line-height:1.45}
.cp__lien{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:.88rem;color:#fff;
  padding:9px 17px;border-radius:100px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  transition:background .3s,border-color .3s;
}
.cp__lien svg{width:15px;height:15px;transition:transform .35s var(--ease)}

.cp:hover,.cp.vu:hover{
  transform:translateY(-12px) rotateX(4deg) scale(1.012);
  box-shadow:0 48px 72px -30px rgba(0,0,0,.95),
             0 0 0 1px rgba(109,155,200,.5),
             0 0 62px -18px rgba(74,124,172,.55);
}
.cp:hover img{transform:scale(1.08);filter:saturate(1) contrast(1.08)}
.cp:hover::after{opacity:.9}
.cp:hover .cp__ic{background:var(--bleu);border-color:var(--bleu);transform:scale(1.06)}
.cp:hover .cp__lien{background:var(--bleu);border-color:var(--bleu)}
.cp:hover .cp__lien svg{transform:translateX(4px)}
.cp:focus-visible{outline:3px solid var(--bleu-clair);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .cp:hover,.cp.vu:hover{transform:none}
  .cp:hover img{transform:none}
}
@media (max-width:900px){
  .cartes-photo{grid-template-columns:1fr;gap:16px}
  .cp{aspect-ratio:16/9}
  .cp:hover,.cp.vu:hover{transform:translateY(-6px)}
  .cp__bas{padding:20px 20px 18px}
  .cp__ic{width:46px;height:46px;top:16px;left:18px}
}
@media (max-width:560px){
  .cp{aspect-ratio:4/3}
}

/* --- Étapes / process -------------------------------------------------- */
.etapes{counter-reset:e;display:grid;gap:2px;grid-template-columns:repeat(4,1fr);background:var(--gris-clair);border-radius:var(--rayon);overflow:hidden}
.etape{counter-increment:e;background:#fff;padding:34px 28px;position:relative;transition:background .3s}
.etape:hover{background:var(--creme)}
.etape::before{
  content:"0" counter(e);display:block;font-size:2.1rem;font-weight:800;color:var(--bleu);
  opacity:.32;letter-spacing:-.04em;margin-bottom:12px;line-height:1;
}
.etape h3{font-size:1.08rem;margin-bottom:8px}
.etape p{font-size:.92rem;color:var(--gris);margin:0}


/* --- Parcours en 4 étapes (remplace l'ancienne grille à traits) --------- */
.parcours{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,26px);padding-top:6px;
}
/* ligne de liaison derrière les pastilles */
.parcours::before{
  content:"";position:absolute;top:38px;left:12%;right:12%;height:2px;z-index:0;
  background:linear-gradient(90deg,
    rgba(74,124,172,0) 0%, var(--bleu) 12%, var(--bleu) 88%, rgba(74,124,172,0) 100%);
  opacity:.35;
}
.parcours__etape{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}

.parcours__pastille{
  position:relative;width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:22px;flex:none;
  background:#fff;box-shadow:0 0 0 2px var(--gris-clair), 0 12px 26px -14px rgba(18,35,58,.45);
  transition:box-shadow .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
.parcours__num{
  font-size:1.22rem;font-weight:900;letter-spacing:-.03em;color:var(--ocre);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.parcours__ic{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  opacity:0;transform:scale(.6);
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.parcours__ic svg{width:30px;height:30px}

.parcours__carte{
  position:relative;width:100%;flex:1;
  background:#fff;border:1px solid var(--gris-clair);border-radius:16px;
  padding:26px 22px 24px;overflow:hidden;
  box-shadow:0 10px 26px -20px rgba(18,35,58,.5);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
}
.parcours__carte::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--ocre),var(--ocre-clair));
  transform:scaleX(0);transform-origin:center;transition:transform .5s var(--ease);
}
.parcours__carte h3{font-size:1.12rem;margin:0 0 8px}
.parcours__carte p{font-size:.93rem;color:#5A636D;margin:0;line-height:1.5}

.parcours__etape:hover .parcours__pastille{
  background:var(--bleu);transform:translateY(-4px) scale(1.06);
  box-shadow:0 0 0 2px var(--bleu), 0 0 0 10px rgba(74,124,172,.14),
             0 18px 34px -14px rgba(74,124,172,.85);
}
.parcours__etape:hover .parcours__num{opacity:0;transform:scale(.7)}
.parcours__etape:hover .parcours__ic{opacity:1;transform:scale(1)}
.parcours__etape:hover .parcours__carte{
  transform:translateY(-8px);border-color:transparent;
  box-shadow:0 30px 50px -26px rgba(18,35,58,.55);
}
.parcours__etape:hover .parcours__carte::before{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .parcours__etape:hover .parcours__pastille,
  .parcours__etape:hover .parcours__carte{transform:none}
}
@media (max-width:1080px){
  .parcours{grid-template-columns:repeat(2,1fr);gap:28px 20px}
  .parcours::before{display:none}
}
@media (max-width:560px){
  .parcours{grid-template-columns:1fr;gap:18px}
  .parcours__etape{flex-direction:row;align-items:flex-start;text-align:left;gap:16px}
  .parcours__pastille{width:58px;height:58px;margin-bottom:0}
  .parcours__num{font-size:1.02rem}
  .parcours__ic svg{width:24px;height:24px}
  .parcours__carte{padding:18px 18px 16px}
}

/* --- Liste à puces custom ---------------------------------------------- */
.liste{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:13px}
.liste li{
  position:relative;padding-left:34px;font-size:1rem;color:#404952;
  text-wrap:pretty;
}
.liste li::before{
  content:"";position:absolute;left:0;top:.34em;width:20px;height:20px;border-radius:50%;
  background:rgba(74,124,172,.14);
}
.liste li::after{
  content:"";position:absolute;left:6.5px;top:.64em;width:7px;height:4px;
  border-left:2px solid var(--bleu-fonce);border-bottom:2px solid var(--bleu-fonce);
  transform:rotate(-45deg);
}
.section--nuit .liste li{color:#C3CCD6}

/* --- Média (photos) ---------------------------------------------------- */
.media{position:relative;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre-forte);background:linear-gradient(135deg,#2B3E52,#1B2733)}
.media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
.media:hover img{transform:scale(1.05)}
.media--haut img{aspect-ratio:3/4}
.media--carre img{aspect-ratio:1/1}
.media__etiquette{
  position:absolute;left:0;bottom:0;padding:26px 28px;color:#fff;width:100%;
  background:linear-gradient(to top,rgba(12,18,26,.88),transparent);
  font-weight:700;font-size:1rem;
}
.cadre-deco{position:relative}
.cadre-deco::before{
  content:"";position:absolute;inset:auto -22px -22px auto;width:62%;height:62%;
  border:2px solid var(--bleu);border-radius:var(--rayon);z-index:-1;
}

/* --- Galerie ----------------------------------------------------------- */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.galerie button{
  padding:0;border:0;background:#0f1720;cursor:pointer;border-radius:var(--rayon-s);
  overflow:hidden;position:relative;display:block;
}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease),opacity .3s}
.galerie button:hover img{transform:scale(1.07);opacity:.82}
.galerie button::after{
  content:"";position:absolute;inset:0;background:rgba(74,124,172,0);transition:background .3s;
}
.galerie button:hover::after{background:rgba(74,124,172,.22)}
.galerie button:nth-child(1){grid-column:span 2;grid-row:span 2}
.galerie button:nth-child(1) img{aspect-ratio:auto;height:100%}
.galerie__mob{display:none}   /* 7e photo : téléphone uniquement */

/* --- Fiche détaillée d'un chantier (page Réalisations) ------------------
   Reprend exactement la mise en forme des références de l'accueil, dans un
   panneau flottant. */
.fiche{
  position:fixed;inset:0;z-index:2000;
  background:rgba(10,14,20,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:none;place-items:center;padding:20px;overflow-y:auto;
}
.fiche.ouvert{display:grid;animation:fondu .25s var(--ease)}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.fiche__boite{
  position:relative;width:min(540px,100%);max-height:calc(100svh - 40px);
  overflow-y:auto;background:var(--blanc);border-radius:22px;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.7);
  animation:monte .35s var(--ease);
}
.fiche__fermer{
  position:absolute;top:14px;right:14px;z-index:3;
  width:40px;height:40px;border:1px solid rgba(255,255,255,.25);border-radius:13px;
  background:rgba(12,18,26,.5);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.fiche__fermer svg{width:19px;height:19px}
.fiche__img{position:relative;overflow:hidden;background:#10161E}
.fiche__img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.fiche__corps{padding:22px 22px 24px}
.fiche__corps h3{margin:0 0 3px;font-size:1.3rem}
.fiche__corps .ref__meta{margin-bottom:16px}
.fiche__corps .ref__res{margin:0 0 20px}
.fiche__corps .btn{width:100%;justify-content:center}


/* --- Bandeau de légende sur les photos de chantier ---------------------- */
.galerie button{display:block}
.galerie .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:block;text-align:left;padding:16px 18px 14px;
  background:linear-gradient(to top,rgba(8,12,18,.90) 0%,rgba(8,12,18,.72) 55%,rgba(8,12,18,0) 100%);
  color:#fff;pointer-events:none;
  transform:translateY(0);transition:transform .45s var(--ease),opacity .35s;
}
.galerie .cap b{
  display:block;font-size:1rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;
  text-wrap:balance;
}
.galerie .cap span{
  display:block;margin-top:3px;font-size:.8rem;font-weight:600;color:#A9BDD2;
  letter-spacing:.03em;
}
/* Repère « ouvrir la fiche » en haut à droite de chaque photo : on comprend
   immédiatement qu'un clic ouvre le détail du chantier, pas une image. */
.galerie button::before{
  content:"";position:absolute;top:14px;right:14px;z-index:3;
  width:40px;height:40px;border-radius:13px;pointer-events:none;
  background:rgba(12,18,26,.44) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M7 13h7M7 16.5h5'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
  border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.galerie button:hover::before{background-color:var(--bleu);transform:scale(1.08)}
.galerie button:hover .cap{transform:translateY(-4px)}
.galerie button::after{z-index:1}


/* --- Bandeau « toute la Gironde » (compact) ----------------------------- */
.bandeau-zone{
  background:linear-gradient(180deg,var(--bleute),var(--fond));
  border-block:1px solid var(--trait);
  padding:clamp(16px,1.8vw,24px) 0;
}
.bandeau-zone .wrap{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;
}
.bandeau-zone__txt{flex:1;min-width:240px}
.bandeau-zone h2{
  margin:0;font-size:clamp(1.25rem,2.1vw,1.75rem);letter-spacing:-.025em;text-wrap:balance;
}
.bandeau-zone p{margin:4px 0 0;color:var(--gris);font-size:.95rem;font-weight:600}
.bandeau-zone .btn{flex:none;padding:13px 26px;font-size:.93rem}

/* Carte de France avec la Gironde mise en évidence */
.carte-fr{height:clamp(74px,7vw,96px);width:auto;flex:none;overflow:visible}
.cfr__pays{
  fill:#fff;stroke:#C3CBD4;stroke-width:3;stroke-linejoin:round;
}
.cfr__zone{
  fill:var(--bleu);stroke:var(--bleu-fonce);stroke-width:3.5;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(74,124,172,.55));
  animation:zonePulse 3.4s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center;
}
@keyframes zonePulse{
  0%,100%{opacity:.92}
  50%{opacity:1;filter:drop-shadow(0 0 13px rgba(74,124,172,.85))}
}
@media (prefers-reduced-motion:reduce){.cfr__zone{animation:none}}
@media (max-width:620px){
  .bandeau-zone .wrap{gap:16px}
  .bandeau-zone .btn{width:100%}
  .carte-fr{height:64px}
}

/* --- Zones d'intervention (ancien, conservé pour d'autres pages) -------- */
.zones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.zones span{
  padding:9px 18px;border-radius:100px;background:#fff;border:1px solid var(--gris-clair);
  font-size:.9rem;font-weight:600;color:#3B444D;transition:all .25s var(--ease);
}
.zones span:hover{border-color:var(--bleu);color:var(--bleu-fonce);transform:translateY(-2px)}
.section--nuit .zones span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#D3DBE4}

/* --- Bandeau CTA ------------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(115deg,var(--bleu-nuit) 0%,var(--bleu-fonce) 58%,var(--bleu) 100%);
}
.cta::before{
  content:"";position:absolute;inset:0;opacity:.13;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(90% 90% at 20% 50%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(90% 90% at 20% 50%,#000,transparent 70%);
}
.cta .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta h2{color:#fff;margin-bottom:8px}
.cta p{color:#CBD9E8;margin:0;max-width:48ch}

/* --- Formulaire -------------------------------------------------------- */
.form{display:grid;gap:16px}
.form .ligne{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ label{font-size:.86rem;font-weight:700;color:#333A42}
.champ label .req{color:#C0392B}
.champ input,.champ select,.champ textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--gris-clair);border-radius:var(--rayon-s);
  font:inherit;font-size:.97rem;color:var(--anthracite);background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.champ textarea{min-height:140px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:0;border-color:var(--bleu);box-shadow:0 0 0 4px rgba(74,124,172,.15);
}
.consentement{display:flex;gap:12px;align-items:flex-start;font-size:.85rem;color:var(--gris);line-height:1.5}
.consentement input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--bleu)}
.consentement a{color:var(--bleu-fonce);text-decoration:underline}
.form .btn{width:100%;justify-content:center}
.form__note{font-size:.78rem;color:var(--gris);margin:0}
.form__retour{display:none;padding:16px 18px;border-radius:var(--rayon-s);font-weight:600;font-size:.93rem}
.form__retour.ok{display:block;background:rgba(46,158,107,.12);color:#1F7A50;border:1px solid rgba(46,158,107,.35)}
.form__retour.ko{display:block;background:rgba(192,57,43,.1);color:#A4302A;border:1px solid rgba(192,57,43,.3)}
.pot{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* Page contact : grille 2 colonnes × 2 rangées.
   Les deux en-têtes partagent la même rangée, donc ils sont alignés en haut
   quelle que soit la longueur des titres, et les deux blocs de contenu
   démarrent eux aussi exactement au même niveau. */
.grille-contact{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  column-gap:clamp(32px,5vw,68px);
  row-gap:clamp(20px,2.4vw,32px);
  align-items:start;
}
.col-tete{display:flex;flex-direction:column;justify-content:flex-start}
.col-tete h1,.col-tete h2{
  margin:0;font-size:clamp(1.55rem,3.1vw,2.35rem);text-wrap:balance;
}
.col-tete__sous{
  margin:14px 0 0;color:#4A535D;font-size:1rem;line-height:1.6;max-width:46ch;
}
@media (max-width:960px){
  /* En colonne unique, on réassocie chaque en-tête à son propre contenu :
     titre 1 → coordonnées → titre 2 → formulaire. */
  .grille-contact{grid-template-columns:1fr;row-gap:clamp(14px,3vw,22px)}
  .grille-contact>*:nth-child(1){order:1}
  .grille-contact>*:nth-child(3){order:2}
  .grille-contact>*:nth-child(2){order:3;margin-top:clamp(22px,5vw,40px)}
  .grille-contact>*:nth-child(4){order:4}
}

/* Chaque moyen de contact est une carte : on repère d'un coup d'œil s'il
   faut appeler ou écrire. Le téléphone, premier réflexe, est en bleu plein. */
.contact-infos{display:grid;gap:10px;margin-bottom:0}
.contact-ligne{
  display:flex;gap:14px;align-items:center;
  background:var(--blanc);border:1px solid var(--trait);border-radius:16px;
  padding:13px 16px;
  box-shadow:0 10px 24px -22px rgba(18,35,58,.8);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.contact-ligne:hover{transform:translateY(-2px);box-shadow:0 16px 32px -22px rgba(18,35,58,.85)}
.contact-ligne .ic{
  width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:rgba(74,124,172,.12);color:var(--bleu-fonce);
}
.contact-ligne .ic svg{width:21px;height:21px}
.contact-ligne b{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gris);font-weight:700;margin-bottom:2px}
.contact-ligne a,.contact-ligne p{font-size:1rem;font-weight:700;color:var(--anthracite);margin:0;line-height:1.35;overflow-wrap:anywhere}
.contact-ligne:first-child{
  background:linear-gradient(150deg,var(--bleu-clair),var(--bleu-fonce));
  border-color:transparent;
  box-shadow:0 18px 36px -20px rgba(47,85,120,.95);
}
.contact-ligne:first-child .ic{background:rgba(255,255,255,.20);color:#fff}
.contact-ligne:first-child b{color:rgba(255,255,255,.72)}
.contact-ligne:first-child a{color:#fff;font-size:1.24rem;letter-spacing:.01em}

/* Le formulaire vit dans son propre encadré, aligné avec les cartes */
.grille-contact .form{
  background:var(--blanc);border:1px solid var(--trait);border-radius:20px;
  padding:24px 24px 26px;
  box-shadow:0 20px 44px -32px rgba(18,35,58,.85);
}
.grille-contact .form .btn{width:100%;justify-content:center}
/* Titres de colonne : présents mais discrets — la page doit se lire, pas crier. */
.col-tete h1,.col-tete h2{
  margin:0;font-size:clamp(1.42rem,2.2vw,1.85rem);
  letter-spacing:-.025em;font-weight:800;
}

/* --- FAQ --------------------------------------------------------------- */
.faq{display:grid;gap:12px;max-width:860px;margin-inline:auto}
.faq details{
  background:#fff;border:1px solid var(--gris-clair);border-radius:var(--rayon-s);
  padding:0;overflow:hidden;transition:border-color .25s,box-shadow .25s;
}
.faq details[open]{border-color:var(--bleu);box-shadow:var(--ombre)}
.faq summary{
  padding:20px 54px 20px 22px;cursor:pointer;font-weight:700;font-size:1.02rem;position:relative;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2.4px solid var(--bleu);border-bottom:2.4px solid var(--bleu);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .rep{padding:0 22px 22px;color:#4C555F;font-size:.98rem}
.faq .rep p:last-child{margin:0}

/* --- Fil d'ariane ------------------------------------------------------ */
.ariane{font-size:.83rem;color:#8A94A0;padding:16px 0 0}
.ariane a:hover{color:var(--bleu-fonce)}
.ariane span{margin:0 7px;opacity:.5}

/* --- Bannière de page interne ------------------------------------------ */
.banniere{
  position:relative;background:var(--anthracite);color:#fff;overflow:hidden;isolation:isolate;
}
.banniere__media{position:absolute;inset:0;z-index:-2}
.banniere__media img{width:100%;height:100%;object-fit:cover}
.banniere__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(14,20,28,.94) 0%,rgba(14,20,28,.74) 55%,rgba(14,20,28,.55) 100%),
    linear-gradient(to bottom,rgba(14,20,28,.35) 0%,rgba(14,20,28,0) 30%);
}
/* voile fumé qui fond vers le fond de la section suivante */
.banniere::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(90px,14vh,170px);
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(250,251,253,0) 0%,
    rgba(250,251,253,.20) 42%,
    rgba(250,251,253,.62) 72%,
    rgba(250,251,253,.92) 90%,
    var(--papier) 100%);
}
.banniere .wrap{z-index:2}
.banniere .wrap{position:relative;padding-top:clamp(58px,8vw,96px);padding-bottom:clamp(74px,10vw,130px)}
.banniere h1{color:#fff;margin-bottom:16px;font-size:clamp(1.95rem,4.4vw,3.3rem)}
.banniere p{color:#C1CBD6;max-width:60ch;margin:0;font-size:clamp(1rem,1.4vw,1.16rem)}
.banniere .ariane{color:#8E9AA7;padding:0 0 18px}
.banniere .ariane a{color:#B8C3CE}

/* --- Pied de page ------------------------------------------------------ */
.pied{background:var(--anthracite);color:#98A2AE;font-size:.93rem;padding-top:clamp(52px,7vw,80px)}
.pied .colonnes{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px}
.pied h4{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pied a{transition:color .2s}
.pied a:hover{color:#fff}
.pied__logo{height:58px;width:auto;display:block;margin-bottom:6px}
.pied__desc{margin:18px 0 0;max-width:34ch;font-size:.9rem;line-height:1.6}
/* Zone d'intervention : la liste des communes est un signal fort de
   référencement local, c'est le premier levier du métier. */
.pied__zone{border-top:1px solid rgba(255,255,255,.09);padding:24px 0 4px}
.pied__zone h4{margin-bottom:10px}
.pied__zone p{margin:0;font-size:.83rem;line-height:1.75;color:#6E7986}

/* Fil d'Ariane visible */
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;
  font-size:.82rem;font-weight:600;color:var(--gris)}
.ariane li+li::before{content:"›";margin-right:8px;opacity:.55}
.ariane a{color:inherit;text-decoration:none;transition:color .2s}
.ariane a:hover{color:var(--bleu-fonce);text-decoration:underline}
.ariane [aria-current="page"]{color:var(--anthracite)}
.banniere .ariane ol{color:#93A0AE;margin-bottom:16px}
.banniere .ariane a{color:#BAC6D2}
.banniere .ariane [aria-current="page"]{color:#E7EDF3}

.pied__bas{
  border-top:1px solid rgba(255,255,255,.09);padding:22px 0;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.85rem;color:#77828E;
}
.pied__bas nav{display:flex;gap:18px;flex-wrap:wrap}

/* --- Signature de l'agence, tout en bas du pied de page ----------------
   Même fond que le reste du pied. « Réalisé par » en gris discret, le nom
   dans le bleu vif du site, puis la pastille du logo. Le lien s'ouvre dans
   un nouvel onglet et ne suit pas le soulignement des autres liens. */
.signature{
  display:flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 0 24px;
  font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:#5F6A76;
}
.pied .signature a{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--bleu-clair);background-image:none;
  transition:color .22s var(--ease),transform .22s var(--ease);
}
.pied .signature a:hover{color:#A9CCEC}
.signature img{width:19px;height:19px;display:block;flex:none}
@media (max-width:420px){
  .signature{font-size:.68rem;letter-spacing:.14em;gap:9px;padding-bottom:20px}
  .signature img{width:17px;height:17px}
}

/* --- Barre d'action mobile --------------------------------------------- */
/* La barre fixe « Appeler / Devis gratuit » a été retirée : les mêmes
   actions sont désormais dans l'en-tête, toujours visible car collant. */

/* Actions de conversion dans l'en-tête, sur tablette et téléphone */
.entete__mob{display:none;align-items:center;gap:9px}
.btn--mini{padding:11px 17px;font-size:.87rem;flex:none;gap:7px}
.btn--mini svg{width:15px;height:15px}

/* --- Bulle d'appel flottante -------------------------------------------
   Toujours à portée de pouce, en bas à droite, sur téléphone et tablette.
   Un appui compose directement le numéro.                               */
.bulle-tel{
  display:none;position:fixed;z-index:940;
  right:16px;bottom:calc(18px + env(safe-area-inset-bottom));
  width:60px;height:60px;border-radius:50%;
  align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--bleu-clair),var(--bleu-fonce));
  color:#fff;box-shadow:0 14px 30px -8px rgba(18,44,74,.62),0 3px 8px rgba(0,0,0,.22);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.bulle-tel svg{width:26px;height:26px;position:relative;z-index:2}
.bulle-tel__txt{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}
.bulle-tel:active{transform:scale(.93)}
.bulle-tel:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Onde qui pulse doucement : elle attire l'œil sans clignoter. */
.bulle-tel__onde{
  position:absolute;inset:0;border-radius:50%;z-index:1;
  background:var(--bleu);opacity:.55;
  animation:ondeTel 2.6s var(--ease) infinite;
}
@keyframes ondeTel{
  0%{transform:scale(1);opacity:.5}
  70%,100%{transform:scale(1.75);opacity:0}
}
@media (prefers-reduced-motion:reduce){.bulle-tel__onde{animation:none;opacity:0}}
/* La bulle s'efface derrière la bannière cookies tant qu'elle est là. */
body:has(.cookies.visible) .bulle-tel{opacity:0;pointer-events:none;transform:scale(.8)}

/* --- Animations d'apparition ------------------------------------------- */
/* Les fondus au défilement sont supprimés (ordinateur ET téléphone).
   La classe reste neutralisée : le HTML des neuf pages n'a pas à changer.
   Les carrousels de logos et d'avis, eux, continuent de défiler. */
.reveal{opacity:1!important;transform:none!important;transition:none!important}

/* --- Bannière cookies (RGPD) ------------------------------------------- */
.cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:1500;
  background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre-forte);
  padding:24px;max-width:520px;display:none;border:1px solid var(--gris-clair);
}
.cookies.visible{display:block;animation:monte .5s var(--ease)}
@keyframes monte{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.cookies h4{margin:0 0 8px;font-size:1.05rem}
.cookies p{font-size:.88rem;color:var(--gris);margin:0 0 16px;line-height:1.55}
.cookies p a{color:var(--bleu-fonce);text-decoration:underline}
.cookies .actions{display:flex;gap:10px;flex-wrap:wrap}
.cookies .btn{flex:1;padding:12px 18px;font-size:.9rem;min-width:130px}
.cookies .btn--refus{background:var(--creme);color:#39424B;box-shadow:none}
.cookies .btn--refus:hover{background:var(--gris-clair);color:var(--anthracite)}

/* --- Accessibilité ------------------------------------------------------ */
.saut{
  position:absolute;left:-9999px;top:0;background:var(--bleu);color:#fff;padding:12px 20px;
  z-index:2000;border-radius:0 0 8px 0;font-weight:700;
}
.saut:focus{left:0}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px;border-radius:4px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .grille--4{grid-template-columns:repeat(2,1fr)}
  .etapes{grid-template-columns:repeat(2,1fr)}
  .pied .colonnes{grid-template-columns:1fr 1fr;gap:34px}
}

@media (max-width:1360px){
  /* Attention : `.entete .btn` visait AUSSI les pastilles Appeler et Devis,
     qui restaient donc invisibles. On ne cible que le bouton de la barre. */
  .entete>.wrap>.btn{display:none}
  .entete__mob{display:flex}
  .bulle-tel{display:flex}
  .burger{display:block;margin-left:0}
  .entete .logo .logo__complet{height:44px}

  /* --- Menu déroulant ---------------------------------------------------
     Panneau flottant en verre dépoli, détaché de la barre. Chaque page a
     son icône dans une tuile arrondie ; les lignes n'ont plus ni cadre ni
     filet, seul l'espacement les sépare. Les entrées apparaissent en
     cascade, ce qui donne au panneau sa sensation de matière.           */
  .nav{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:calc(100% + 10px);left:10px;right:10px;
    transform:translateY(-10px) scale(.98);transform-origin:top right;
    background:rgba(250,251,253,.975);
    -webkit-backdrop-filter:blur(26px) saturate(180%);
    backdrop-filter:blur(26px) saturate(180%);
    border:1px solid rgba(18,35,58,.07);
    border-radius:26px;
    box-shadow:0 30px 64px -22px rgba(12,26,44,.45),0 2px 8px rgba(12,26,44,.10);
    padding:12px;
    max-height:calc(100svh - 130px);overflow-y:auto;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .24s var(--ease),transform .34s var(--ease),visibility .34s;
  }
  .entete.menu-ouvert .nav{opacity:1;visibility:visible;transform:none;pointer-events:auto}

  .nav>a{
    display:flex;align-items:center;gap:14px;
    padding:8px 10px;border-radius:17px;background:none;border:0;
    font-size:1.05rem;font-weight:700;color:var(--anthracite);
    opacity:0;transform:translateY(9px);
    transition:opacity .34s var(--ease),transform .34s var(--ease),background .2s;
  }
  .entete.menu-ouvert .nav>a{opacity:1;transform:none}
  .entete.menu-ouvert .nav>a:nth-child(1){transition-delay:.05s}
  .entete.menu-ouvert .nav>a:nth-child(2){transition-delay:.09s}
  .entete.menu-ouvert .nav>a:nth-child(3){transition-delay:.13s}
  .entete.menu-ouvert .nav>a:nth-child(4){transition-delay:.17s}
  .entete.menu-ouvert .nav>a:nth-child(5){transition-delay:.21s}
  .entete.menu-ouvert .nav>a:nth-child(6){transition-delay:.25s}
  .nav>a:active{background:rgba(74,124,172,.09)}

  .nav__ic{
    display:grid;place-items:center;flex:none;
    width:44px;height:44px;border-radius:14px;
    background:rgba(74,124,172,.11);color:var(--bleu-fonce);
    transition:background .25s,color .25s,box-shadow .25s;
  }
  .nav__ic svg{width:21px;height:21px}
  .nav__lb{flex:1;min-width:0}

  .nav>a::after{
    content:"";position:static;display:block;flex:none;
    width:7px;height:7px;border-radius:0;background:none;opacity:.42;
    border-right:2px solid var(--gris);border-top:2px solid var(--gris);
    transform:rotate(45deg);transition:none;margin-right:6px;
  }
  .nav>a:hover::after{transform:rotate(45deg)}
  .nav>a[aria-current="page"]{color:var(--bleu-fonce)}
  .nav>a[aria-current="page"] .nav__ic{
    background:linear-gradient(145deg,var(--bleu-clair),var(--bleu-fonce));color:#fff;
    box-shadow:0 10px 20px -9px rgba(47,85,120,.95);
  }
  .nav>a[aria-current="page"]::after{opacity:0}

  /* Pied du panneau : l'action principale, puis le numéro */
  .nav__pied{
    display:block;margin-top:12px;padding-top:14px;
    border-top:1px solid rgba(18,35,58,.09);
    opacity:0;transform:translateY(9px);
    transition:opacity .34s var(--ease) .29s,transform .34s var(--ease) .29s;
  }
  .entete.menu-ouvert .nav__pied{opacity:1;transform:none}
  .nav__pied .btn{width:100%;justify-content:center;padding:15px 18px;font-size:.98rem}
  .nav__tel{
    display:flex;align-items:center;justify-content:center;gap:9px;
    margin-top:8px;padding:11px;border-radius:14px;
    font-size:.95rem;font-weight:700;color:var(--bleu-fonce);
  }
  .nav__tel svg{width:17px;height:17px}

  /* Voile sombre derrière le panneau */
  .entete.menu-ouvert::after{
    content:"";position:fixed;inset:0;z-index:1;
    background:rgba(12,17,24,.42);backdrop-filter:blur(2px);
  }
  .entete.menu-ouvert .logo,.entete.menu-ouvert .burger,
  .entete.menu-ouvert .entete__mob{position:relative;z-index:3}
  body.bloque{overflow:hidden}

  .grille--3,.grille--2{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr;gap:34px}
  .duo--inverse .duo__media{order:0}
  .chiffres{grid-template-columns:repeat(2,1fr);margin-top:-40px}
  .chiffres div:nth-child(2){border-right:0}
  .chiffres div:nth-child(1),.chiffres div:nth-child(2){border-bottom:1px solid var(--gris-clair)}
  /* En colonne, `flex:1 1 560px` s'appliquait à la HAUTEUR et creusait
     un vide de 560 px avant les boutons. */
  .cta .wrap{flex-direction:column;align-items:stretch;gap:22px}
  .cta .wrap>div:first-child{flex:0 0 auto}
  .cta .wrap>div:last-child{width:100%}
  .cadre-deco::before{display:none}
  .barre-info .wrap{justify-content:center;gap:18px;font-size:.78rem}
  .barre-info .zone{display:none}
}

/* ======================================================================
   TÉLÉPHONE — 760 px et moins
   ====================================================================== */
@media (max-width:760px){
  body{font-size:16px;padding-bottom:0}

  /* --- En-tête : le logo, puis un seul bouton rond « Appeler » -------- */
  .barre-info{display:none}
  /* Sur téléphone, seul le pavé du sigle reste : le nom complet
     prendrait toute la barre. */
  .logo .logo__complet{display:none}
  .logo .logo__sigle{display:block;height:54px}
  .entete .wrap{min-height:var(--h-entete);gap:10px;padding-inline:16px}
  .logo{margin-right:auto;padding:5px 0}
  .entete__mob{gap:8px}
  .btn--mini{padding:13px 20px;font-size:.92rem}

  /* --- Héros : exactement une hauteur d'écran ------------------------- 
     La hauteur vaut l'écran moins l'en-tête, plus le chevauchement du
     bandeau de chiffres : celui-ci commence donc pile sous la ligne de
     flottaison et n'apparaît qu'au premier défilement.                  */
  .badges{display:none}
  .hero{
    display:flex;flex-direction:column;justify-content:center;
    min-height:calc(100vh - var(--h-entete) + var(--mordant));
    min-height:calc(100svh - var(--h-entete) + var(--mordant));
  }
  .hero .wrap{
    width:100%;
    display:flex;flex-direction:column;
    padding-top:clamp(20px,6vw,38px);
    padding-bottom:calc(clamp(22px,6vw,38px) + var(--mordant));
  }
  /* Le titre occupe toute la largeur disponible ; « Vos chantiers livrés »
     et « dans les délais. » tiennent chacun sur une ligne grâce au <br>. */
  .hero h1{
    font-size:clamp(2.05rem,9vw,2.9rem);
    line-height:1.06;letter-spacing:-.032em;
    margin:0 0 clamp(26px,7vw,40px);      /* respiration avant le texte    */
  }
  .hero h1 em{margin-top:.06em}
  .hero p{
    font-size:1.02rem;line-height:1.55;max-width:40ch;
    margin:0 0 clamp(30px,8vw,46px);      /* respiration avant les boutons */
  }
  .hero__actions{gap:11px;margin-top:auto}
  .hero__actions .btn{flex:1 1 100%;min-width:0;padding:17px 22px}

  /* --- Bandeau de chiffres : 2 × 2 compact, jamais en colonne --------- */
  .chiffres{margin-top:calc(0px - var(--mordant));border-radius:12px}
  .chiffres div{padding:16px 10px 14px}
  .chiffres b{font-size:1.5rem}
  .chiffres span{margin-top:4px;font-size:.7rem;line-height:1.3;letter-spacing:0}

  .missions__titre{
    font-size:clamp(1.8rem,6.6vw,2.3rem);
    margin:clamp(38px,9vw,56px) auto clamp(24px,5vw,34px);
  }

  /* --- Galerie : une colonne, des cartes larges et lisibles -----------
     En deux colonnes, les légendes devenaient illisibles. Une seule
     colonne : la photo respire et le texte reprend une taille normale. */
  .galerie{grid-template-columns:1fr;gap:16px}
  .galerie button{border-radius:20px}
  .galerie button:nth-child(1){grid-column:auto;grid-row:auto}
  .galerie button:nth-child(1) img{aspect-ratio:4/3;height:auto}
  .galerie__mob{display:block}
  /* La légende se lit de bas en haut : pastille de mission, puis titre. */
  .galerie .cap{
    display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px;
    padding:20px 18px 17px;
    background:linear-gradient(to top,
      rgba(8,12,18,.95) 0%,rgba(8,12,18,.80) 42%,rgba(8,12,18,.25) 76%,rgba(8,12,18,0) 100%);
  }
  .galerie .cap b{font-size:1.18rem;line-height:1.2}
  .galerie .cap span{
    display:inline-flex;align-items:center;margin:0;
    padding:6px 12px;border-radius:100px;
    background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    color:#EAF1F8;font-size:.78rem;font-weight:700;letter-spacing:.01em;
  }


  /* --- Critères de chiffrage : une colonne, en ligne ------------------ */
  .grille--4{grid-template-columns:1fr;gap:12px}
  .wrap--large .grille--4{gap:12px}
  .grille--4 .carte{
    display:grid;grid-template-columns:auto 1fr;align-items:start;
    column-gap:16px;row-gap:5px;padding:18px 18px 18px 16px;
  }
  .grille--4 .carte .carte__icone{grid-column:1;grid-row:1/3;margin:0;align-self:start}
  .grille--4 .carte h3{grid-column:2;grid-row:1;margin:0;font-size:1.02rem}
  .grille--4 .carte p{grid-column:2;grid-row:2;margin:0;font-size:.9rem;line-height:1.5;min-width:0}

  /* --- FAQ : elle suit le bandeau Gironde de très près ---------------- */
  .bandeau-zone + .section{padding-top:24px}
  .titre-chiffre--faq{margin-bottom:20px}
  .titre-chiffre--faq .titre-chiffre__fond{font-size:7rem}

  /* --- Bandeau final : un seul bouton, centré ------------------------- */
  .cta .wrap{align-items:center;text-align:center;gap:20px}
  .cta p{max-width:40ch;margin-inline:auto}
  .cta .wrap>div:last-child{justify-content:center}
  .cta .wrap>div:last-child .btn--fantome{display:none}
  .cta .wrap>div:last-child .btn{width:auto;min-width:230px}

  /* --- Bandeau Gironde : une vraie section, pas une ligne perdue ------ */
  .bandeau-zone{padding:clamp(34px,9vw,52px) 0}
  .bandeau-zone__sous,.bandeau-zone__cta{display:none}
  .bandeau-zone .wrap{
    flex-direction:column;align-items:center;text-align:center;
    gap:clamp(14px,4vw,22px);padding-inline:22px;
  }
  .carte-fr{height:clamp(92px,24vw,124px);flex:none}
  .bandeau-zone__txt{flex:0 0 auto;min-width:0}
  .bandeau-zone h2{
    font-size:clamp(1.5rem,6.8vw,2.05rem);line-height:1.15;text-wrap:balance;
  }

  /* --- Pied de page --------------------------------------------------- */
  .pied__logo{height:64px}

  /* L'ordre des sections est désormais identique sur ordinateur et sur
     téléphone : il est porté par le HTML seul, plus aucune réorganisation
     en CSS. Une seule page, une seule logique de lecture.               */

  /* --- Page contact : l'essentiel, mis en avant ------------------------
     Sur téléphone on va droit au but : un titre, les moyens de contact en
     grosses cartes tapables, puis le formulaire dans son propre encadré. */
  .col-tete h1,.col-tete h2{font-size:clamp(1.55rem,6.6vw,2rem)}
  .grille-contact{row-gap:18px}
  .contact-infos{gap:10px}
  .contact-ligne{gap:13px;padding:13px 15px}
  .contact-ligne:hover{transform:none}
  .contact-ligne .ic{width:48px;height:48px;border-radius:14px}
  .contact-ligne .ic svg{width:22px;height:22px}
  .contact-ligne a,.contact-ligne p{font-size:1.02rem}
  .contact-ligne:first-child a{font-size:1.24rem}
  .grille-contact .form{padding:20px 18px 22px;border-radius:20px}

  /* --- Divers --------------------------------------------------------- */
  .form .ligne{grid-template-columns:1fr}
  .cookies{left:10px;right:10px;bottom:10px;padding:20px}
  .pied .colonnes{grid-template-columns:1fr;gap:30px}
  .pied__bas{flex-direction:column;gap:12px}
  .etapes{grid-template-columns:1fr}
  .media__etiquette{padding:20px}
}

@media (max-width:420px){
  :root{--h-entete:78px}
  .logo .logo__sigle{height:48px}
  .hero h1{font-size:clamp(1.9rem,8.6vw,2.5rem)}
  .hero p{font-size:.97rem}
  .btn--mini{padding:10px 13px;font-size:.82rem;gap:5px}
  .chiffres b{font-size:1.35rem}
  .chiffres span{font-size:.66rem}
}

/* --- Impression --------------------------------------------------------- */
@media print{
  .entete,.barre-info,.cookies,.cta,.btn,.bulle-tel{display:none!important}
  body{color:#000;font-size:12pt}
  .hero__media,.banniere__media{display:none}
  .hero,.banniere,.section--nuit{background:#fff!important;color:#000!important}
}

/* ==========================================================================
   BLOCS DE DÉMONSTRATION — conversion & réassurance
   (contenus d'exemple, voir le bandeau « maquette » en haut de page)
   ========================================================================== */

/* --- Bandeau de réassurance --------------------------------------------- */
.reassurance{
  background:linear-gradient(180deg,var(--papier) 0%,var(--fond) 100%);
  border-block:1px solid var(--trait);
  padding:clamp(26px,3vw,40px) 0;
}
.reassurance .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.rea{
  display:flex;align-items:center;gap:15px;
  background:#fff;border:1px solid var(--gris-clair);border-radius:15px;
  padding:18px 20px;position:relative;overflow:hidden;
  box-shadow:0 8px 20px -18px rgba(18,35,58,.6);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.rea::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--ocre),var(--ocre-clair));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.rea:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 40px -24px rgba(18,35,58,.6);
  border-color:transparent;
}
.rea:hover::before{transform:scaleX(1)}

/* Pastille d'icône : centrage garanti (inline-flex + line-height:0) */
.rea__ic{
  width:48px;height:48px;flex:0 0 48px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;
  background:linear-gradient(140deg,rgba(74,124,172,.16),rgba(74,124,172,.07));
  color:var(--bleu-fonce);
  transition:background .4s var(--ease),color .3s,transform .45s var(--ease);
}
.rea__ic svg{width:24px;height:24px;display:block;flex:none}
.rea:hover .rea__ic{
  background:linear-gradient(140deg,var(--bleu-clair),var(--bleu-fonce));
  color:#fff;transform:scale(1.07);
}

.rea__txt{min-width:0}
.rea__txt b{
  display:block;font-size:.95rem;font-weight:800;line-height:1.25;
  letter-spacing:-.015em;color:var(--anthracite);text-wrap:balance;
}
.rea__txt span{
  display:block;margin-top:4px;font-size:.83rem;color:var(--gris);
  line-height:1.35;text-wrap:pretty;
}
@media (prefers-reduced-motion:reduce){
  .rea:hover{transform:none}
  .rea:hover .rea__ic{transform:none}
}

/* --- Cadran « obligations SPS » ----------------------------------------- */
.obligations{background:var(--papier)}
.obligations--creme{background:var(--bleute)}
.obligations{position:relative;isolation:isolate}
.obligations::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain);background-size:140px 140px;
  opacity:.32;mix-blend-mode:multiply;
}

.cadran{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  border-radius:22px;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,#171B21 0%,#1E242C 55%,#182029 100%);
  box-shadow:0 40px 80px -40px rgba(10,16,24,.85), inset 0 0 0 1px rgba(255,255,255,.07);
}
.cadran::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.10;pointer-events:none;
  background-image:linear-gradient(rgba(140,180,220,.75) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(140,180,220,.75) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(110% 90% at 0% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(110% 90% at 0% 0%,#000,transparent 72%);
}

/* Colonne des questions */
.cadran__form{position:relative;z-index:1;padding:clamp(28px,3.2vw,44px)}
.cadran__intro{
  font-size:.85rem;font-weight:700;letter-spacing:.02em;color:var(--bleu-clair);
  margin:0 0 26px;
}
.cadran__q{display:flex;gap:16px;margin-bottom:26px}
.cadran__q:last-child{margin-bottom:0}
.cadran__num{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:.76rem;font-weight:800;letter-spacing:.04em;color:var(--bleu-clair);
  background:rgba(109,155,200,.14);border:1px solid rgba(109,155,200,.32);
}
.cadran__q >div{flex:1;min-width:0}
.cadran__q p{margin:6px 0 12px;font-size:.97rem;font-weight:700;color:#E4EAF1;line-height:1.35}
.cadran__opts{display:flex;flex-wrap:wrap;gap:8px}
.cadran__opts button{
  padding:10px 16px;border-radius:100px;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#CBD5E1;font-size:.89rem;font-weight:600;
  transition:all .28s var(--ease);
}
.cadran__opts button:hover{
  border-color:var(--bleu-clair);color:#fff;background:rgba(109,155,200,.16);
  transform:translateY(-2px);
}
.cadran__opts button[aria-pressed="true"]{
  background:var(--bleu);border-color:var(--bleu);color:#fff;
  box-shadow:0 10px 22px -10px rgba(74,124,172,1), 0 0 0 4px rgba(74,124,172,.18);
}
.cadran__opts button:focus-visible{outline:3px solid var(--bleu-clair);outline-offset:2px}

/* Écran de résultat */
.cadran__ecran{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,3.2vw,44px);
  background:linear-gradient(160deg,rgba(8,12,18,.82),rgba(12,18,26,.55));
  border-left:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.cadran__ecran::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 70% 22%,rgba(74,124,172,.20),transparent 68%);
  transition:opacity .6s var(--ease);
}
.cadran--ok .cadran__ecran::after{opacity:1}
.cadran__scan{
  position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--bleu-clair),transparent);
  box-shadow:0 0 18px rgba(109,155,200,.9);
}
.cadran--calcul .cadran__scan{animation:scan .85s var(--ease)}
@keyframes scan{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(320px)}}

.cadran__attente{
  display:flex;align-items:center;gap:11px;margin:0;
  font-size:.94rem;font-weight:600;color:#7D8A99;
}
.cadran__attente svg{width:22px;height:22px;opacity:.7}
.cadran--ok .cadran__attente{display:none}

.cadran__verdict{display:none}
.cadran--ok .cadran__verdict{display:block;animation:monte .5s var(--ease)}
.cadran__badge{
  display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:100px;
  font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:16px;
  background:rgba(109,155,200,.18);color:#9DC1E4;border:1px solid rgba(109,155,200,.4);
}
.cadran__badge--non{background:rgba(46,158,107,.16);color:#6FD3A5;border-color:rgba(46,158,107,.42)}
.cadran__verdict h3{margin:0 0 10px;font-size:clamp(1.25rem,2vw,1.6rem);color:#fff}
.cadran__verdict >p:not(.cadran__note){font-size:.95rem;color:#B4C0CD;line-height:1.55;margin:0 0 26px}
.cadran__verdict >p strong{color:#fff}
.cadran__verdict .btn{margin-top:4px}
.cadran__verdict .cadran__note{
  /* Le filet restait collé au bouton parce que `.cadran__verdict > p`,
     plus spécifique, lui réimposait `margin:0 0 26px`. D'où le sélecteur
     renforcé ici et l'exclusion ci-dessus. */
  margin:clamp(40px,3.8vw,58px) 0 0;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.10);
  font-size:.77rem;color:#7D8A99;line-height:1.5;
}

@media (prefers-reduced-motion:reduce){
  .cadran__opts button:hover{transform:none}
  .cadran--calcul .cadran__scan{animation:none}
}
@media (max-width:900px){
  .cadran{grid-template-columns:1fr}
  .cadran__ecran{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
}

/* --- Références filtrables ---------------------------------------------- */
.filtres{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px}
.filtres button{
  padding:10px 18px;border-radius:100px;border:1.5px solid var(--gris-clair);
  background:#fff;color:#3B444D;font-size:.88rem;font-weight:700;cursor:pointer;
  transition:all .25s var(--ease);
}
.filtres button:hover{border-color:var(--bleu-clair);color:var(--bleu-fonce)}
.filtres button[aria-pressed="true"]{background:var(--ocre);border-color:var(--ocre);color:#fff;box-shadow:0 8px 20px -12px rgba(185,108,40,.9)}

.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.refs__plus{display:none;margin:0}
.ref{
  background:#fff;border:1px solid var(--gris-clair);border-radius:var(--rayon);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s,opacity .3s;
}
.ref:hover{transform:translateY(-8px);box-shadow:var(--ombre-forte);border-color:transparent}
.ref.masque{display:none}
.ref__img{position:relative;overflow:hidden;background:#10161E}
.ref__img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s var(--ease)}
.ref:hover .ref__img img{transform:scale(1.06)}
.ref__mission{
  position:absolute;top:14px;left:14px;padding:7px 13px;border-radius:100px;
  font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(8,12,18,.72);color:#fff;backdrop-filter:blur(6px);
}
.ref__corps{padding:20px 20px 18px;display:flex;flex-direction:column;flex:1}
.ref__corps h3{margin:0 0 4px;font-size:1.08rem}
.ref__lieu{font-size:.85rem;color:var(--bleu-fonce);font-weight:700;margin:0 0 14px}
.ref__meta{
  list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px;
  font-size:.85rem;color:#5A636D;
}
.ref__meta li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--gris-clair);padding-bottom:5px}
.ref__meta b{color:var(--anthracite);font-weight:700;text-align:right}
.ref__res{
  margin:auto 0 0;font-size:.86rem;font-weight:700;color:#1F7A50;
  display:flex;align-items:flex-start;gap:8px;line-height:1.35;
}
.ref__res svg{width:16px;height:16px;flex:none;margin-top:2px}

/* --- Preuve client : bandes de logos défilantes ------------------------- */
.preuves-clients{background:var(--fond);overflow:hidden}
.bandes{display:grid;gap:14px;margin-top:clamp(28px,3.4vw,44px)}
.marquee{
  position:relative;overflow:hidden;padding:2px 0;
}
.marquee__piste{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;width:auto;animation:none}
/* Mur de logos fige : avec cinq references, le defilement faisait apparaitre
   deux fois la meme plaque dans le meme ecran et donnait une impression de
   page qui bouge lateralement. Rendu statique et centre. */
.marquee--inverse .marquee__piste{animation-duration:68s;animation-direction:reverse}
.marquee:hover .marquee__piste{animation-play-state:paused}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Plaques de marque : rendu typographique, pas de fichier logo */
.lm{
  --teinte:#5A636D;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;
  height:74px;min-width:212px;padding:0 30px;border-radius:14px;
  background:#fff;border:1px solid var(--gris-clair);
  box-shadow:0 6px 18px -16px rgba(18,35,58,.7);
  color:#8A929B;
  transition:color .4s var(--ease),transform .4s var(--ease),
             box-shadow .4s var(--ease),border-color .3s,background .4s;
}
.lm:hover{
  color:var(--teinte);transform:translateY(-4px);
  box-shadow:0 20px 34px -22px rgba(18,35,58,.6);
  border-color:transparent;background:#fff;
}
.lm__mk{font-size:1.05rem;line-height:1;opacity:.85;transition:transform .45s var(--ease)}
.lm:hover .lm__mk{transform:rotate(-12deg) scale(1.12)}
.lm__nom{
  font-size:1.12rem;font-weight:800;letter-spacing:.10em;
  white-space:nowrap;line-height:1;
}

/* Variantes typographiques pour que les plaques ne se ressemblent pas */
.lm--a{--teinte:#0B3B8C} .lm--a .lm__nom{font-weight:900;letter-spacing:.03em}
.lm--b{--teinte:#C8102E} .lm--b .lm__nom{font-weight:700;letter-spacing:.22em;font-size:1.02rem}
.lm--c{--teinte:#00794C} .lm--c .lm__nom{font-weight:900;letter-spacing:.14em}
.lm--d{--teinte:#E2001A} .lm--d .lm__nom{font-weight:600;letter-spacing:.26em;font-size:.98rem}
.lm--e{--teinte:#1F3864} .lm--e .lm__nom{font-weight:800;letter-spacing:.06em;font-style:italic}
.lm--f{--teinte:#0072BC} .lm--f .lm__nom{font-weight:700;letter-spacing:.11em;font-size:1.02rem}
.lm--g{--teinte:#6D3A8E} .lm--g .lm__nom{font-weight:900;letter-spacing:.02em}

@media (prefers-reduced-motion:reduce){
  .marquee__piste{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .lm{color:var(--teinte)}
  .lm:hover{transform:none}
  .lm:hover .lm__mk{transform:none}
}
@media (max-width:700px){
  .lm{height:62px;min-width:170px;padding:0 22px}
  .lm__nom{font-size:.98rem}
}

/* --- Avis Google : bloc de note ----------------------------------------- */
.avis-zone{overflow:hidden}
/* Le bloc d'avis est désormais la section sombre de la page : les cartes
   blanches et la pastille de note ressortent, le halo bleu se voit enfin. */
.section--nuit .note{border-color:rgba(255,255,255,.14);box-shadow:0 22px 50px -28px rgba(0,0,0,.9)}
.section--nuit .avis{border-color:rgba(255,255,255,.10);box-shadow:0 20px 44px -30px rgba(0,0,0,.9)}
.g-mark{width:18px;height:18px;flex:none}

.note{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--gris-clair);border-radius:100px;
  padding:12px 22px;box-shadow:0 10px 26px -20px rgba(18,35,58,.7);
}
.note__score{
  font-size:1.75rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  color:var(--anthracite);font-variant-numeric:tabular-nums;
}
.note__etoiles{display:flex;gap:2px;color:#FBBC05}
.note__etoiles svg{width:17px;height:17px}
.note__sur{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.88rem;font-weight:700;color:var(--anthracite);white-space:nowrap;
}
.note__sep{width:1px;height:26px;background:var(--gris-clair);flex:none}
.note__live{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.85rem;font-weight:700;color:#1F7A50;white-space:nowrap;
}
.pastille-live{
  position:relative;width:9px;height:9px;border-radius:50%;flex:none;
  background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.18);
}
.pastille-live::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:#22C55E;
  animation:pulseLive 1.8s ease-out infinite;
}
@keyframes pulseLive{
  0%{transform:scale(1);opacity:.65}
  70%,100%{transform:scale(2.9);opacity:0}
}
.note__lien{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.85rem;font-weight:700;color:var(--bleu-fonce);white-space:nowrap;
  transition:color .2s;
}
.note__lien svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.note__lien:hover{color:var(--bleu)}
.note__lien:hover svg{transform:translateX(4px)}

/* --- Carrousel d'avis ---------------------------------------------------- */
/* Le carrousel n'est plus une animation CSS mais un vrai conteneur qui
   défile : on peut donc l'attraper au doigt ou à la souris. Le JavaScript
   se contente de faire avancer la position, et s'efface dès qu'on touche. */
.carrousel-avis{
  position:relative;padding:6px 0 10px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.carrousel-avis::-webkit-scrollbar{display:none}
.carrousel-avis__piste{display:flex;gap:18px;width:max-content}

.avis{
  flex:none;width:352px;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--gris-clair);border-radius:16px;
  padding:20px 22px 16px;
  box-shadow:0 10px 26px -22px rgba(18,35,58,.7);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.avis:hover{
  transform:translateY(-6px);border-color:transparent;
  box-shadow:0 26px 44px -26px rgba(18,35,58,.6);
}
.avis__tete{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.avis__av{
  width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;
  background:linear-gradient(140deg,var(--bleu-clair),var(--bleu-fonce));
  color:#fff;font-weight:800;font-size:.88rem;
}
.avis__qui{flex:1;min-width:0}
.avis__qui b{display:block;font-size:.94rem;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.avis__qui span{
  display:block;margin-top:2px;font-size:.79rem;color:var(--gris);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.avis__etoiles{display:flex;gap:2px;color:#FBBC05;margin-bottom:10px}
.avis__etoiles svg{width:15px;height:15px}
.avis__txt{
  font-size:.92rem;color:#3E4650;line-height:1.55;margin:0 0 16px;flex:1;
}
.avis__pied{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:12px;border-top:1px solid var(--gris-clair);
}
.avis__verif{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:700;color:#1F7A50;
  background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.28);
  padding:4px 10px;border-radius:100px;
}
.avis__verif svg{width:13px;height:13px}
.avis__date{font-size:.78rem;color:#94A0AC;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .carrousel-avis__piste{flex-wrap:wrap;width:auto;justify-content:center}
  .pastille-live::after{animation:none}
  .avis:hover{transform:none}
}
@media (max-width:560px){
  .note{border-radius:20px;gap:10px;padding:14px 18px}
  .note__sep{display:none}
  .avis{width:290px}
}

/* --- Responsive des nouveaux blocs -------------------------------------- */
@media (max-width:1080px){
  .reassurance .wrap{grid-template-columns:repeat(2,1fr)}
  .refs{grid-template-columns:repeat(2,1fr)}
  .diag__grille{grid-template-columns:1fr}
  .diag__res{position:static}
}
@media (max-width:700px){
  .reassurance .wrap{grid-template-columns:1fr}
  .refs{grid-template-columns:1fr}
}

/* ==========================================================================
   RÉFÉRENCES EN CARROUSEL — TÉLÉPHONE
   Ce bloc est volontairement en toute fin de feuille : les styles de base
   de `.refs` sont déclarés plus haut, et une règle de même spécificité
   déclarée après l'emporte. Placé au milieu du fichier, le carrousel était
   silencieusement réécrit en grille.
   ========================================================================== */
@media (max-width:760px){
  /* --- Références : carrousel tactile --------------------------------
     Défilement natif (donc parfaitement fluide au pouce) + accroche sur
     chaque carte. Le JavaScript ne fait que le faire avancer tout seul.  */
  .filtres{display:none}
  .refs{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scroll-padding-inline:var(--marge-ref);
    padding:4px var(--marge-ref) 14px;
    margin-inline:calc(0px - var(--marge-ref));
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .refs::-webkit-scrollbar{display:none}
  .ref{flex:0 0 82%;scroll-snap-align:center}
  .ref:hover{transform:none;box-shadow:none}
  .ref__meta{font-size:.82rem}
}

/* ==========================================================================
   TROIS CATÉGORIES D'OPÉRATION (page Coordination SPS)
   ========================================================================== */
.niveaux{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.niv{
  position:relative;background:var(--blanc);border:1px solid var(--trait);
  border-radius:20px;padding:26px 24px 24px;
  box-shadow:0 16px 36px -28px rgba(18,35,58,.85);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.niv:hover{transform:translateY(-5px);box-shadow:0 26px 50px -28px rgba(18,35,58,.9)}
.niv__tag{
  display:inline-block;margin-bottom:14px;padding:6px 14px;border-radius:100px;
  font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(74,124,172,.12);color:var(--bleu-fonce);
}
.niv h3{margin:0 0 6px;font-size:1.16rem;letter-spacing:-.02em}
.niv__sous{margin:0 0 16px;font-size:.9rem;color:var(--gris);font-weight:600}
.niv__sous strong{color:var(--bleu-fonce)}
.niv ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem;color:#4A535D}
.niv li{position:relative;padding-left:22px;line-height:1.5}
.niv li::before{
  content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;border-radius:50%;
  background:var(--bleu-clair);
}
/* La catégorie 2 est le cas courant : on la met en avant. */
.niv--phare{
  background:linear-gradient(165deg,#17222F,var(--anthracite));
  border-color:transparent;color:#C6D0DB;
  box-shadow:0 26px 54px -26px rgba(0,0,0,.85);
}
.niv--phare h3{color:#fff}
.niv--phare .niv__tag{background:rgba(109,155,200,.20);color:#A8C8E8}
.niv--phare .niv__sous{color:#93A2B2}
.niv--phare .niv__sous strong{color:#A8C8E8}
.niv--phare ul{color:#B4C0CD}
.niv--phare li::before{background:var(--bleu-clair)}

@media (max-width:960px){
  .niveaux{grid-template-columns:1fr;gap:14px}
  .niv{padding:22px 20px}
  .niv:hover{transform:none}
}

/* ==========================================================================
   TRÈS PETITS ÉCRANS (iPhone SE, Galaxy S8 — 320 à 380 px)
   Vérifié sélecteur par sélecteur : plus aucune largeur fixe ne dépasse la
   largeur utile de l'écran.
   ========================================================================== */
@media (max-width:380px){
  .avis{width:calc(100vw - 56px);max-width:280px}
  .cookies{padding:18px}
  .cookies .actions{flex-wrap:wrap}
  .cookies .btn{min-width:0;flex:1 1 110px}
  .niv{padding:20px 17px}
  .contact-ligne{padding:13px 14px;gap:12px}
  .contact-ligne .ic{width:46px;height:46px;border-radius:13px}
  .contact-ligne:first-child a{font-size:1.18rem}
  .cta .wrap>div:last-child .btn{min-width:0;width:100%}
  .bandeau-zone h2{font-size:1.36rem}
  .pied__zone p{font-size:.79rem}
}

/* ==========================================================================
   FINITIONS ET MICRO-INTERACTIONS
   Rien de spectaculaire ici : ce sont les détails qu'on ne remarque que
   lorsqu'ils manquent.
   ========================================================================== */

/* --- Focus clavier : un seul style, cohérent partout -------------------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--ocre);outline-offset:3px;border-radius:6px;
}
.section--nuit a:focus-visible,.section--nuit button:focus-visible,
.hero a:focus-visible,.banniere a:focus-visible,.cta a:focus-visible,
.pied a:focus-visible{outline-color:var(--ocre-clair)}

/* --- Le bouton principal reçoit un reflet qui balaie au survol ---------- */
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn:hover::after{transform:translateX(120%)}
.btn--fantome::after,.btn--blanc::after{display:none}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

/* --- La flèche des liens de carte avance au survol ---------------------- */
.cp:hover .cp__lien svg{transform:translateX(5px)}
.cp__lien svg{transition:transform .35s var(--ease)}

/* --- Les photos de mission respirent légèrement ------------------------- */
.cp img{transition:transform .8s var(--ease),filter .5s var(--ease)}
.cp:hover img{transform:scale(1.05)}

/* --- Liens du pied de page : soulignement qui se déploie ---------------- */
.pied a:not(.logo){
  background-image:linear-gradient(var(--ocre-clair),var(--ocre-clair));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s var(--ease),color .2s;
}
.pied a:not(.logo):hover{background-size:100% 1px}

/* --- Champs de formulaire : la bordure s'anime, pas de saut ------------- */
.champ input,.champ select,.champ textarea{
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:#B9C4D0}

/* --- Question de FAQ ouverte : repère coloré à gauche ------------------- */
.faq details{transition:border-color .25s,box-shadow .25s,background .25s}
.faq details[open]{border-color:rgba(185,108,40,.34);box-shadow:0 14px 30px -22px rgba(18,35,58,.7)}
.faq details[open] summary{color:var(--ocre)}
.faq summary::after{transition:transform .3s var(--ease),border-color .25s}
.faq details[open] summary::after{border-color:var(--ocre)}

/* --- Le curseur indique ce qui est cliquable --------------------------- */
.galerie button,.filtres button,.cadran__opts button{cursor:pointer}

/* --- Fiche de chantier : le bouton de fermeture réagit ----------------- */
.fiche__fermer{transition:background .25s,transform .25s var(--ease)}
.fiche__fermer:hover{background:var(--ocre);transform:rotate(90deg)}

/* --- Bulle d'appel : léger rebond à l'apparition ------------------------ */
@keyframes bulleEntree{
  from{opacity:0;transform:scale(.6) translateY(14px)}
  to{opacity:1;transform:none}
}
.bulle-tel{animation:bulleEntree .5s var(--ease) both .6s}

/* --- Rien de tout cela si l'utilisateur préfère le calme ---------------- */
@media (prefers-reduced-motion:reduce){
  .btn::after,.bulle-tel{animation:none;transition:none}
  .cp:hover img,.btn:hover svg,.fiche__fermer:hover{transform:none}
  .bulle-tel{opacity:1}
}

/* ==========================================================================
   RENDU DIFFÉRÉ DES SECTIONS HORS ÉCRAN
   Le navigateur ne calcule la mise en page et la peinture d'une section
   qu'au moment où elle approche du champ de vision. La taille annoncée
   évite tout saut de la barre de défilement. Aucun effet visuel.
   ========================================================================== */
@supports (content-visibility:auto){
  .accueil main>section:nth-of-type(n+6),
  .preuves-clients,
  .avis-zone,
  .pied{
    content-visibility:auto;
    contain-intrinsic-size:auto 720px;
  }
  .bandeau-zone{content-visibility:auto;contain-intrinsic-size:auto 220px}
}

/* ---------- Fiches chantier en attente des dossiers client -------------- */
.ref--attente{position:relative}
.ref--attente .ref__img{position:relative;overflow:hidden;border-radius:inherit}
.ref--attente .ref__img img{filter:blur(9px) saturate(.55) brightness(.82);transform:scale(1.12);transition:none}
.ref--attente .ref__voile{position:absolute;inset:0;background:linear-gradient(170deg,rgba(14,20,28,.32),rgba(14,20,28,.62))}
.ref--attente .ref__bientot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:.55em;
  padding:.62em 1.15em;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  color:#fff;font-size:.82rem;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;text-align:center;
}
.ref--attente .ref__bientot::before{
  content:"";width:.5em;height:.5em;border-radius:50%;
  background:currentColor;opacity:.85;
  animation:refPulse 2.4s ease-in-out infinite;
}
@keyframes refPulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.ref--attente .ref__bientot::before{animation:none}}
.ref--attente:hover .ref__img img{transform:scale(1.12)}

/* ---------- Galerie Realisations en attente ----------------------------- */
.galerie--attente{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.gal-attente{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#0e141c}
.gal-attente picture,.gal-attente img{display:block;width:100%;height:100%;object-fit:cover}
.gal-attente img{filter:blur(9px) saturate(.55) brightness(.82);transform:scale(1.12)}
.gal-attente__voile{position:absolute;inset:0;background:linear-gradient(170deg,rgba(14,20,28,.32),rgba(14,20,28,.62))}
.gal-attente figcaption{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:.55em;
  padding:.62em 1.15em;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  color:#fff;font-size:.82rem;font-weight:600;white-space:nowrap;
}
.gal-attente figcaption::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;opacity:.85;animation:refPulse 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.gal-attente figcaption::before{animation:none}}
.refs-chapo{max-width:62ch;margin:26px auto 36px;text-align:center;line-height:1.65;opacity:.82}

/* ---------- Pages communes -------------------------------------------- */
/* Banniere sans photo : les pages communes n'ont pas d'image dediee, et une
   photo generique repetee dix fois ferait plus de mal que de bien.          */
.banniere--sobre{
  background:
    radial-gradient(1200px 420px at 18% -10%,rgba(90,130,180,.28),transparent 60%),
    linear-gradient(150deg,#161b22 0%,#1A1D21 45%,#12171d 100%);
}
.banniere--sobre::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:62px 62px;
}
.texte-local{max-width:72ch;margin:0 auto}
.texte-local h2{margin:0 0 20px}
.texte-local p{line-height:1.75;margin:0 0 18px}
.texte-local p + p{margin-top:0}
.texte-local a{color:var(--bleu-fonce);text-decoration:underline;text-underline-offset:3px}
.texte-local a:hover{text-decoration-thickness:2px}
.communes-voisines{
  max-width:72ch;margin:0 auto;text-align:center;line-height:2;
  font-size:.95rem;color:var(--gris);
}
.communes-voisines a{color:var(--bleu-fonce);text-decoration:none;white-space:nowrap}
.communes-voisines a:hover{text-decoration:underline}