/* ==========================================================================
   GB RÉNOV' — Rénovation tous corps d'état
   Feuille de style unique. Aucune dépendance, aucun build.
   Fond clair, encre noire. Bleu marine et orange repris de la charte.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS
   -------------------------------------------------------------------------- */
:root{
  /* Fonds */
  --blanc:     #FFFFFF;
  --creme:     #F7F6F2;
  --creme-2:   #EFEDE6;
  --creme-3:   #E4E1D7;

  /* Bleu marine de la charte */
  --bleu:      #0E2440;
  --bleu-800:  #16304F;
  --bleu-600:  #23486F;
  --bleu-400:  #4E76A4;
  --bleu-100:  #D9E2F0;

  /* Orange de la charte */
  --or-100:    #FEF4E7;
  --or-200:    #FAD6A2;
  --or:        #F5931E;
  --or-600:    #DB7A0C;
  --or-700:    #A85C06;   /* orange lisible sur blanc (AA) */

  /* Encre */
  --encre:     #0B0E11;
  --gris-doux: #7C8792;   /* reserve aux placeholders uniquement */
  --encre-2:   #1C2329;   /* quasi noir : petits textes lisibles */
  --encre-3:   #39434B;   /* labels et legendes, toujours tres sombre */

  /* Traits */
  --fil:       rgba(14,36,64,.11);
  --fil-2:     rgba(14,36,64,.17);
  --or-fil:    rgba(245,147,30,.38);

  /* Verre */
  --verre:     rgba(255,255,255,.86);
  --flou:      blur(16px) saturate(160%);

  /* Ombres */
  --ombre-1:   0 1px 2px rgba(16,20,24,.04), 0 6px 20px -10px rgba(16,20,24,.1);
  --ombre-2:   0 2px 6px rgba(16,20,24,.05), 0 20px 44px -20px rgba(16,20,24,.18);

  /* Typographie
     TITRES  — SF Pro via la pile système Apple : authentique sur iPhone,
               iPad et Mac, sans aucun téléchargement. Segoe UI sur Windows,
               Roboto sur Android.
     TEXTE   — Inter Tight, proche de SF Pro et lisible partout à l'identique. */
  --f-titre: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-sans:  "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Hauteur de la barre de navigation — sert aussi de point de départ au fond du bandeau */
  --h-nav:   clamp(68px,7vw,86px);

  /* Échelle fluide */
  --t-xs:   clamp(.69rem, .665rem + .11vw, .75rem);
  --t-sm:   clamp(.815rem, .785rem + .15vw, .875rem);
  --t-base: clamp(.945rem, .915rem + .17vw, 1.03rem);
  --t-md:   clamp(1.07rem, 1.01rem + .3vw, 1.25rem);
  --t-lg:   clamp(1.28rem, 1.14rem + .66vw, 1.75rem);
  --t-xl:   clamp(1.7rem, 1.38rem + 1.5vw, 2.75rem);
  --t-2xl:  clamp(2.1rem, 1.6rem + 2.5vw, 3.9rem);
  --t-3xl:  clamp(2.7rem, 1.9rem + 4vw, 5.6rem);
  --t-4xl:  clamp(3rem, 1.9rem + 5.4vw, 6.6rem);

  /* Rythme */
  --gouttiere: clamp(1.25rem, 4.2vw, 3.75rem);
  --section:   clamp(4.25rem, 9vw, 10rem);
  --maxw:      1340px;

  /* Rayons */
  --r-sm: 4px; --r: 10px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px;

  /* Courbes */
  --out:   cubic-bezier(.16,1,.3,1);
  --inout: cubic-bezier(.66,0,.34,1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  font-family:var(--f-sans);
  font-size:var(--t-base);
  line-height:1.68;
  color:var(--encre);
  background:var(--blanc);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
  overflow-x:hidden;
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--or-200); color:var(--bleu); }
:focus-visible{ outline:2px solid var(--or-600); outline-offset:3px; border-radius:2px; }
:focus:not(:focus-visible){ outline:none; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--f-titre); font-weight:600; line-height:1.1; letter-spacing:-.032em; text-wrap:balance; color:var(--encre); }
h1{ font-size:var(--t-3xl); }
h2{ font-size:var(--t-2xl); }
h3{ font-size:var(--t-lg); letter-spacing:-.022em; line-height:1.22; }
h4{ font-size:var(--t-md); letter-spacing:-.018em; }
p{ text-wrap:pretty; }

/* Grands titres — traitement « SF Pro Display » */
.display{
  font-family:var(--f-titre);
  font-weight:600;
  letter-spacing:-.038em;
  line-height:1.04;
}
.display em{ font-style:normal; font-weight:400; }

.or{
  background:linear-gradient(100deg,var(--or-600) 0%,var(--or-700) 55%,var(--bleu-600) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bleu{ color:var(--bleu); }

.chapo{ font-size:var(--t-md); line-height:1.62; color:var(--encre-2); max-width:58ch; }
.attenue{ color:var(--encre-2); }
.faible{ color:var(--encre-3); }

.etiq{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-sans); font-size:var(--t-sm); font-weight:500;
  letter-spacing:0; color:var(--or-700);
}
.etiq::before{ content:""; width:1.8em; height:1px; background:var(--or-600); flex:none; }
.etiq--nu::before{ display:none; }

.num{
  font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.14em; color:var(--encre-3); font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   4. ATMOSPHÈRE
   -------------------------------------------------------------------------- */
.grain{
  position:fixed; inset:-150%; z-index:9000; pointer-events:none; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(7) infinite; will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)} 14%{transform:translate(-4%,-3%)} 28%{transform:translate(3%,-5%)}
  42%{transform:translate(-2%,4%)} 56%{transform:translate(5%,2%)} 70%{transform:translate(-5%,-2%)}
  84%{transform:translate(2%,3%)} 100%{transform:translate(0,0)}
}

/* Fil à plomb — progression de lecture */
.plomb{
  position:fixed; left:max(1rem,2.2vw); top:0; bottom:0; width:1px; z-index:60;
  background:var(--fil); pointer-events:none; display:none;
}
@media (min-width:1180px){ .plomb{ display:block; } }
.plomb__fil{
  position:absolute; left:0; top:0; width:1px; height:100%;
  background:linear-gradient(180deg,var(--or),var(--bleu-600));
  transform-origin:top; transform:scaleY(0);
}
.plomb__pt{
  position:absolute; left:50%; width:7px; height:7px; margin-left:-3.5px; margin-top:-3.5px;
  border-radius:50%; background:var(--or);
  box-shadow:0 0 0 4px rgba(245,147,30,.18);
}

/* --------------------------------------------------------------------------
   5. STRUCTURE
   -------------------------------------------------------------------------- */
.cadre{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gouttiere); position:relative; }
.cadre--etroit{ max-width:940px; }
.section{ padding-block:var(--section); position:relative; }
.section--serree{ padding-block:clamp(3rem,6vw,5.5rem); }
.fond-blanc{ background:var(--blanc); }
.fond-creme{ background:var(--creme); }
.fond-bleu{ background:var(--bleu); color:var(--blanc); }
.fond-bleu h1,.fond-bleu h2,.fond-bleu h3{ color:var(--blanc); }
.fond-bleu .chapo,.fond-bleu .attenue{ color:rgba(255,255,255,.76); }
.fond-bleu .faible{ color:rgba(255,255,255,.55); }
.fond-bleu .etiq{ color:var(--or-200); }
.fond-bleu .etiq::before{ background:var(--or-200); }
.fond-bleu .num{ color:rgba(255,255,255,.5); }

.entete{ display:grid; gap:clamp(1.25rem,3vw,3rem); margin-bottom:clamp(2.5rem,5vw,4.5rem); align-items:end; }
@media (min-width:940px){ .entete--duo{ grid-template-columns:minmax(0,1fr) minmax(0,.82fr); } }
.entete h2{ margin-top:.85rem; }

.trait{ height:2px; background:linear-gradient(90deg,var(--or) 0%,var(--or-600) 22%,transparent 70%); border:0; transform-origin:left; }
.fond-bleu .trait{ background:linear-gradient(90deg,var(--or-200) 0%,var(--or) 22%,transparent 70%); }

.grille{ display:grid; gap:clamp(1rem,2vw,1.6rem); }
.g-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.g-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr)); }
.g-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); }

/* --------------------------------------------------------------------------
   6. BOUTONS
   -------------------------------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  padding:1.05em 1.85em;
  font-family:var(--f-mono); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--fil-2); border-radius:var(--r-full);
  color:var(--encre); background:var(--blanc); overflow:hidden; isolation:isolate;
  transition:color .45s var(--out), border-color .45s var(--out), transform .3s var(--out), box-shadow .45s var(--out);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--bleu); transform:translateY(101%); transition:transform .5s var(--out);
}
.btn:hover{ color:var(--blanc); border-color:var(--bleu); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:scale(.975); }

.btn--or{
  background:linear-gradient(100deg,var(--or-200),var(--or));
  border-color:var(--or); color:var(--bleu); font-weight:600;
  box-shadow:0 10px 30px -14px rgba(245,147,30,.85);
}
.btn--or::before{ background:var(--bleu); }
.btn--or:hover{ color:var(--blanc); border-color:var(--bleu); box-shadow:0 14px 38px -14px rgba(14,36,64,.45); }

.btn--bleu{ background:var(--bleu); border-color:var(--bleu); color:var(--blanc); }
.btn--bleu::before{ background:linear-gradient(100deg,var(--or-200),var(--or)); }
.btn--bleu:hover{ color:var(--bleu); border-color:var(--or); }

.btn--fant{ background:transparent; border-color:var(--fil-2); }
.fond-bleu .btn--fant{ color:var(--blanc); border-color:rgba(255,255,255,.3); }
.fond-bleu .btn--fant::before{ background:var(--blanc); }
.fond-bleu .btn--fant:hover{ color:var(--bleu); border-color:var(--blanc); }

.btn--pt{ padding:.78em 1.3em; }
.btn--plein{ width:100%; }
.btn svg{ flex:none; transition:transform .4s var(--out); }
.btn:hover svg{ transform:translateX(3px); }

.lien{
  position:relative; display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--or-700); padding-bottom:.35em;
}
.lien::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform-origin:right; transition:transform .5s var(--out);
}
.lien:hover::after{ transform-origin:left; animation:balai .6s var(--out); }
@keyframes balai{ 0%{transform:scaleX(1)} 45%{transform:scaleX(0)} 100%{transform:scaleX(1)} }
.lien svg{ transition:transform .4s var(--out); }
.lien:hover svg{ transform:translateX(4px); }

/* --------------------------------------------------------------------------
   7. NAVIGATION
   -------------------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  border-bottom:1px solid transparent;
  transition:transform .55s var(--out), background-color .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.nav.colle{
  background:var(--verre);
  -webkit-backdrop-filter:var(--flou); backdrop-filter:var(--flou);
  border-bottom-color:var(--fil);
  box-shadow:0 1px 24px -12px rgba(16,20,24,.2);
}
.nav.cache{ transform:translateY(-102%); }
.nav__in{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  height:var(--h-nav);
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gouttiere);
}

/* Logo réel, petit, en haut à gauche */
.marque{ display:flex; align-items:center; gap:.7rem; flex:none; }
.marque__logo{
  height:clamp(40px,4.6vw,52px); width:auto; flex:none;
  transition:transform .5s var(--out);
}
.marque:hover .marque__logo{ transform:scale(1.04); }
.marque__txt{ display:flex; flex-direction:column; line-height:1; }
.marque__nom{
  font-family:var(--f-titre); font-size:1.2rem; font-weight:600; letter-spacing:-.02em; color:var(--bleu);
}
.marque__nom b{ font-weight:400; color:var(--or-700); }
.marque__sous{
  font-family:var(--f-mono); font-size:.5rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--encre-3); margin-top:.42em;
}
@media (max-width:420px){ .marque__txt{ display:none; } }

.menu{ display:none; }
@media (min-width:1060px){ .menu{ display:flex; align-items:center; gap:clamp(1.3rem,2.4vw,2.3rem); } }
.menu a{
  font-family:var(--f-sans); font-size:var(--t-sm); letter-spacing:0;
  color:var(--encre-2); position:relative; padding-block:.4em;
  transition:color .3s ease;
}
.menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px;
  background:var(--or); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--out);
}
.menu a:hover{ color:var(--bleu); }
.menu a:hover::after,.menu a.actif::after{ transform:scaleX(1); transform-origin:left; }
.menu a.actif{ color:var(--bleu); }

.nav__act{ display:flex; align-items:center; gap:.7rem; }
.nav__tel{
  display:none; align-items:center; gap:.55em;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.09em; color:var(--encre-2);
  transition:color .3s ease;
}
.nav__tel:hover{ color:var(--or-700); }
@media (min-width:720px){ .nav__tel{ display:inline-flex; } }
.nav__cta{ display:none; }
@media (min-width:1060px){ .nav__cta{ display:inline-flex; } }

.burger{
  width:44px; height:44px; display:grid; place-items:center; flex:none;
  border:1px solid var(--fil-2); border-radius:var(--r-full); background:var(--blanc);
  transition:border-color .3s ease;
}
.burger:hover{ border-color:var(--or); }
@media (min-width:1060px){ .burger{ display:none; } }
.burger span{ display:block; width:17px; height:1.6px; background:var(--bleu); border-radius:2px; transition:transform .45s var(--out), opacity .3s; }
.burger span+span{ margin-top:5px; }
body.ouvert .burger span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
body.ouvert .burger span:nth-child(2){ opacity:0; }
body.ouvert .burger span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.tiroir{
  position:fixed; inset:0; z-index:799; background:var(--blanc);
  padding:clamp(6rem,14vh,9rem) var(--gouttiere) var(--section);
  display:flex; flex-direction:column;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--out);
  visibility:hidden; overflow-y:auto;
}
body.ouvert .tiroir{ clip-path:inset(0 0 0 0); visibility:visible; }
body.ouvert{ overflow:hidden; }
.tiroir a.tiroir__l{
  font-family:var(--f-titre); font-weight:600; letter-spacing:-.03em; font-size:clamp(1.8rem,7.4vw,2.7rem); color:var(--bleu);
  padding-block:.42em; border-bottom:1px solid var(--fil);
  display:flex; align-items:baseline; gap:1rem;
  opacity:0; transform:translateY(22px);
  transition:opacity .55s var(--out), transform .55s var(--out), color .3s ease;
}
.tiroir a.tiroir__l:hover{ color:var(--or-700); }
body.ouvert .tiroir__l{ opacity:1; transform:none; }
body.ouvert .tiroir__l:nth-child(1){ transition-delay:.14s }
body.ouvert .tiroir__l:nth-child(2){ transition-delay:.19s }
body.ouvert .tiroir__l:nth-child(3){ transition-delay:.24s }
body.ouvert .tiroir__l:nth-child(4){ transition-delay:.29s }
body.ouvert .tiroir__l:nth-child(5){ transition-delay:.34s }
.tiroir__pied{
  margin-top:auto; padding-top:2.5rem; display:grid; gap:.75rem;
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--out) .4s, transform .55s var(--out) .4s;
}
body.ouvert .tiroir__pied{ opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   8. BANDEAU D'ACCUEIL
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; background:var(--blanc);
  padding-top:clamp(8.5rem,18vh,12rem); padding-bottom:clamp(4rem,9vh,7rem);
  min-height:min(88vh,780px); display:flex; align-items:center;
}

/* Photo de fond : démarre exactement sous la barre de navigation
   et s'arrête au bas du bandeau. */
.hero__fond{
  position:absolute; top:var(--h-nav); left:0; right:0; bottom:0;
  z-index:0; overflow:hidden; pointer-events:none;
}
.hero__fond img{
  width:100%; height:100%; object-fit:cover; object-position:58% 46%;
  transform:scale(1.045); transform-origin:60% 50%;
  animation:heroZoom 22s var(--out) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }

/* Voile : le texte reste sur du blanc, la photo se découvre vers la droite. */
.hero__fond::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 14%),
    linear-gradient(0deg,   #fff 0%, rgba(255,255,255,0) 16%),
    linear-gradient(180deg, rgba(255,255,255,.955) 0%, rgba(255,255,255,.9) 46%, rgba(255,255,255,.82) 100%);
}
@media (min-width:1000px){
  .hero__fond::after{
    background:
      linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 16%),
      linear-gradient(0deg,   #fff 0%, rgba(255,255,255,0) 14%),
      linear-gradient(96deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.96) 30%,
        rgba(255,255,255,.78) 47%,
        rgba(255,255,255,.42) 64%,
        rgba(255,255,255,.24) 82%,
        rgba(255,255,255,.3)  100%);
  }
}

.hero::before{
  content:""; position:absolute; top:-14%; right:-8%; width:min(58vw,720px); aspect-ratio:1;
  border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(245,147,30,.2) 0%, rgba(245,147,30,.06) 44%, transparent 70%);
  mix-blend-mode:multiply;
}
.hero::after{
  content:""; position:absolute; bottom:-24%; left:-14%; width:min(48vw,600px); aspect-ratio:1;
  border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(14,36,64,.07) 0%, transparent 66%);
}

.hero__grille{ position:relative; z-index:2; width:100%; }
.hero__txt{ max-width:min(100%,640px); }
@media (min-width:1000px){ .hero__txt{ max-width:min(56%,660px); } }

.hero h1{ font-size:clamp(2.7rem,1.75rem + 4.8vw,5.9rem); }
.hero h1.hero__titre{ color:var(--bleu); }

.etiq--hero{ font-size:var(--t-base); }
.hero h1 .ligne{ display:block; overflow:hidden; }
.hero h1 .ligne>span{ display:block; transform:translateY(106%); animation:monte 1.15s var(--out) forwards; }
.hero h1 .ligne:nth-child(1)>span{ animation-delay:.2s }
.hero h1 .ligne:nth-child(2)>span{ animation-delay:.3s }
@keyframes monte{ to{ transform:translateY(0); } }

.hero__chapo{ margin-top:clamp(1.4rem,2.6vw,2rem); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.9rem,3.5vw,2.6rem); }

.hero__preuves{
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.5rem; border-top:1px solid var(--fil-2);
  display:flex; flex-wrap:wrap; gap:.85rem 1.9rem;
}
.hero__preuves span{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--encre-2);
  display:inline-flex; align-items:center; gap:.6em;
}
.hero__preuves span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--or); flex:none; }

@media (prefers-reduced-motion:reduce){
  .hero__fond img{ animation:none; transform:none; }
}

/* --------------------------------------------------------------------------
   9. RUBAN
   -------------------------------------------------------------------------- */
.ruban{
  overflow:hidden; border-block:1px solid var(--fil); padding-block:1.15rem;
  background:var(--creme);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ruban__piste{ display:flex; width:max-content; animation:defile 46s linear infinite; }
.ruban:hover .ruban__piste{ animation-play-state:paused; }
@keyframes defile{ to{ transform:translateX(-50%); } }
.ruban__el{
  display:inline-flex; align-items:center; gap:1.7rem; padding-inline:1.7rem;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--encre-3); white-space:nowrap;
}
.ruban__el::after{ content:""; width:4px; height:4px; border-radius:50%; background:var(--or); }

/* --------------------------------------------------------------------------
   10. MÉTIER — texte + vidéo épinglée
   -------------------------------------------------------------------------- */
@media (min-width:1000px){
  .metier{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.42fr); gap:clamp(2.5rem,6vw,6rem); align-items:start; }
  .metier__video{ position:sticky; top:clamp(105px,15vh,150px); }
}
.metier__video{ margin-top:2.5rem; }
@media (min-width:1000px){ .metier__video{ margin-top:0; } }

.tube{
  position:relative; max-width:290px; margin-inline:auto;
  border:1px solid var(--fil); border-radius:var(--r-lg);
  overflow:hidden; background:var(--creme-2);
  box-shadow:var(--ombre-2);
}
.tube video{ width:100%; aspect-ratio:540/778; object-fit:cover; background:var(--creme-3); }
.tube__cadre{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(245,147,30,.28); border-radius:var(--r-lg); }
.tube__son{
  position:absolute; top:.75rem; right:.75rem; z-index:3;
  width:34px; height:34px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:rgba(255,255,255,.86); border:1px solid var(--fil-2); color:var(--bleu);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .3s, color .3s;
}
.tube__son:hover{ border-color:var(--or); color:var(--or-700); }

/* --------------------------------------------------------------------------
   11. PRESTATIONS — image en tête, contenu dessous
   -------------------------------------------------------------------------- */
.presta{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--fil); border-radius:var(--r-lg); background:var(--blanc);
  transition:border-color .5s var(--out), transform .5s var(--out), box-shadow .5s var(--out);
}
.presta:hover{ border-color:var(--or-fil); transform:translateY(-5px); box-shadow:var(--ombre-2); }
.presta__vue{ position:relative; overflow:hidden; background:var(--creme-2); }
.presta__vue img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1.1s var(--out); }
.presta:hover .presta__vue img{ transform:scale(1.05); }
.presta__vue::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,39,68,.06), rgba(20,39,68,.02));
}
.presta__ico{
  position:absolute; left:1rem; bottom:-22px; z-index:2;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--or-fil); border-radius:var(--r-full);
  background:var(--blanc); color:var(--or-700);
  box-shadow:var(--ombre-1);
  transition:background-color .5s var(--out), color .5s var(--out), border-color .5s var(--out);
}
.presta:hover .presta__ico{ background:var(--or); color:var(--bleu); border-color:var(--or); }
.presta__corps{ padding:2.2rem clamp(1.4rem,2.6vw,1.8rem) clamp(1.5rem,2.6vw,1.9rem); display:flex; flex-direction:column; flex:1; }
.presta__corps .num{ margin-bottom:.5rem; display:block; }
.presta h3{ margin-bottom:.6rem; }
.presta p{ color:var(--encre-2); font-size:var(--t-sm); }
.presta__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:1.2rem; }

.puce{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--encre-2); border:1px solid var(--fil-2); border-radius:var(--r-full);
  padding:.4em .8em; white-space:nowrap; background:var(--creme);
}

/* --------------------------------------------------------------------------
   12. GALERIE — sans légende
   -------------------------------------------------------------------------- */
.galerie{ display:grid; gap:clamp(.7rem,1.4vw,1.15rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:820px){ .galerie{ grid-template-columns:repeat(4,1fr); } }
.vue{
  position:relative; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--fil); background:var(--creme-2);
  aspect-ratio:3/4; display:block;
  transition:border-color .5s var(--out), box-shadow .5s var(--out);
}
.vue:hover{ border-color:var(--or-fil); box-shadow:var(--ombre-1); }
.vue--large{ grid-column:span 2; aspect-ratio:3/4; }
@media (min-width:820px){ .vue--large{ grid-row:span 2; aspect-ratio:3/4.05; } }
@media (min-width:820px){ .vue--duo{ grid-column:span 2; aspect-ratio:3/2; } }
.vue img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--out); }
.vue:hover img{ transform:scale(1.045); }

/* --------------------------------------------------------------------------
   13. ÉTAPES
   -------------------------------------------------------------------------- */
.etapes{ counter-reset:e; position:relative; }
.etape{ position:relative; padding-left:clamp(3rem,6vw,4.6rem); padding-bottom:clamp(2.2rem,4.5vw,3.4rem); }
.etape:last-child{ padding-bottom:0; }
.etape::before{
  counter-increment:e; content:counter(e,decimal-leading-zero);
  position:absolute; left:0; top:0; width:2.5em; height:2.5em;
  display:grid; place-items:center; z-index:1;
  border:1px solid var(--or-fil); border-radius:var(--r-full); background:var(--blanc);
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em; color:var(--or-700);
}
.etape::after{
  content:""; position:absolute; left:1.25em; top:2.5em; bottom:0; width:1px;
  background:linear-gradient(180deg,var(--fil-2),transparent); transform:translateX(-.5px);
}
.etape:last-child::after{ display:none; }
.etape h3{ font-size:var(--t-md); }
.etape p{ color:var(--encre-2); margin-top:.55rem; max-width:62ch; font-size:var(--t-sm); }

/* --------------------------------------------------------------------------
   14. CARTES
   -------------------------------------------------------------------------- */
.carte{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--fil); border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.8vw,2.1rem); background:var(--blanc);
  transition:border-color .5s var(--out), transform .5s var(--out), box-shadow .5s var(--out);
}
.carte:hover{ border-color:var(--or-fil); transform:translateY(-3px); box-shadow:var(--ombre-1); }
.carte__haut{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.carte h3{ font-size:var(--t-md); margin-bottom:.55rem; }
.carte p{ color:var(--encre-2); font-size:var(--t-sm); }

.anneau{
  width:44px; height:44px; display:grid; place-items:center; flex:none;
  border:1px solid var(--or-fil); border-radius:var(--r-full);
  background:var(--creme); color:var(--or-700);
  transition:background-color .5s var(--out), color .5s var(--out), border-color .5s var(--out);
}
.carte:hover .anneau{ background:var(--or); color:var(--bleu); border-color:var(--or); }

/* --------------------------------------------------------------------------
   15. CHIFFRES
   -------------------------------------------------------------------------- */
.chiffres{ display:grid; gap:1px; background:var(--fil); border:1px solid var(--fil); border-radius:var(--r-lg); overflow:hidden; }
@media (min-width:760px){ .chiffres{ grid-template-columns:repeat(3,1fr); } }
.chiffre{ background:var(--blanc); padding:clamp(1.6rem,3.2vw,2.5rem); }
.chiffre__v{
  font-family:var(--f-titre); font-weight:600; letter-spacing:-.04em; font-size:var(--t-2xl); line-height:1;
  font-variant-numeric:tabular-nums; color:var(--bleu);
}
.chiffre__v span[data-compte]{ color:var(--or-700); }
.chiffre__k{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.15em;
  text-transform:uppercase; color:var(--encre-3); margin-top:.9rem;
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq{ border-top:1px solid var(--fil-2); }
.faq__el{ border-bottom:1px solid var(--fil-2); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding-block:clamp(1.15rem,2.4vw,1.75rem); text-align:left;
  font-size:var(--t-md); font-weight:600; letter-spacing:-.015em; line-height:1.32;
  color:var(--encre); transition:color .3s ease;
}
.faq__q:hover{ color:var(--or-700); }
.faq__ico{
  flex:none; width:25px; height:25px; position:relative; margin-top:.2rem;
  border:1px solid var(--fil-2); border-radius:var(--r-full); color:var(--bleu);
  transition:border-color .4s ease, background-color .4s ease, color .4s ease;
}
.faq__ico::before,.faq__ico::after{
  content:""; position:absolute; top:50%; left:50%; width:9px; height:1.4px;
  background:currentColor; transform:translate(-50%,-50%);
  transition:transform .45s var(--out), opacity .3s;
}
.faq__ico::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__el.ouv .faq__ico{ border-color:var(--or); background:var(--or); color:var(--bleu); }
.faq__el.ouv .faq__ico::after{ transform:translate(-50%,-50%) rotate(0); opacity:0; }
.faq__r{ overflow:hidden; height:0; transition:height .5s var(--out); }
.faq__r>div{ padding-bottom:clamp(1.15rem,2.4vw,1.75rem); }
.faq__r p{ color:var(--encre-2); max-width:70ch; font-size:var(--t-sm); }
.faq__r p+p{ margin-top:.85rem; }

/* --------------------------------------------------------------------------
   17. FORMULAIRE DE DEVIS
   -------------------------------------------------------------------------- */
.devis{
  border:1px solid var(--fil-2); border-radius:var(--r-xl); overflow:hidden;
  background:var(--blanc); box-shadow:var(--ombre-2);
}
.devis__haut{
  padding:clamp(1.5rem,3vw,2.2rem) clamp(1.35rem,3vw,2.5rem);
  border-bottom:1px solid var(--fil);
  background:linear-gradient(180deg,var(--creme),var(--blanc));
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
}
.devis__corps{ padding:clamp(1.5rem,3.5vw,2.6rem) clamp(1.35rem,3vw,2.5rem); }
.devis__pied{
  padding:clamp(1.25rem,2.5vw,1.9rem) clamp(1.35rem,3vw,2.5rem);
  border-top:1px solid var(--fil); background:var(--creme);
  display:grid; gap:.85rem;
}

.champs{ display:grid; gap:1.1rem; }
@media (min-width:680px){ .champs--2{ grid-template-columns:repeat(2,1fr); } .plein{ grid-column:1/-1; } }
.champ label{
  display:block; font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.13em; text-transform:uppercase; color:var(--encre-3); margin-bottom:.45rem;
}
.champ input,.champ textarea,.champ select{
  width:100%; padding:.92rem 1.05rem;
  background:var(--blanc); border:1px solid var(--fil-2);
  border-radius:var(--r-sm); color:var(--encre); font-size:var(--t-sm);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.champ input::placeholder,.champ textarea::placeholder{ color:var(--gris-doux); }
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none; border-color:var(--or); box-shadow:0 0 0 3px rgba(245,147,30,.18);
}
.champ textarea{ resize:vertical; min-height:110px; }

.cats{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,158px),1fr)); }
.cat{ position:relative; }
.cat input{ position:absolute; opacity:0; width:0; height:0; }
.cat label{
  display:flex; align-items:center; gap:.6rem; height:100%;
  padding:.85rem 1rem; cursor:pointer;
  border:1px solid var(--fil-2); border-radius:var(--r-sm); background:var(--blanc);
  font-size:var(--t-sm); font-weight:500; color:var(--encre-2);
  transition:border-color .35s var(--out), background-color .35s var(--out), color .35s var(--out);
}
.cat label svg{ flex:none; color:var(--encre-3); transition:color .35s; }
.cat label:hover{ border-color:var(--or-fil); background:var(--creme); }
.cat input:checked+label{ border-color:var(--or); background:var(--or-100); color:var(--bleu); font-weight:600; }
.cat input:checked+label svg{ color:var(--or-700); }
.cat input:focus-visible+label{ outline:2px solid var(--or-600); outline-offset:3px; }

.accord{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1.25rem; }
.accord input{ margin-top:.28rem; width:16px; height:16px; accent-color:var(--or-600); flex:none; }
.accord span{ font-size:var(--t-xs); color:var(--encre-3); line-height:1.6; }
.accord a{ color:var(--or-700); text-decoration:underline; text-underline-offset:2px; }

.devis__note{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.06em;
  color:var(--encre-3); text-align:center; line-height:1.7;
}
.devis__ok{ display:none; text-align:center; padding-block:clamp(1rem,3vw,2rem); }
.devis__ok.on{ display:block; animation:apparait .55s var(--out); }
@keyframes apparait{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.devis__ok .anneau{ margin:0 auto 1.4rem; width:62px; height:62px; background:var(--or); color:var(--bleu); border-color:var(--or); }
.devis__err{
  color:#A3391F; font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.09em; text-transform:uppercase; margin-top:1rem;
}

/* --------------------------------------------------------------------------
   18. CONTACT DIRECT
   -------------------------------------------------------------------------- */
.contacts{ display:grid; gap:1px; background:var(--fil); border:1px solid var(--fil); border-radius:var(--r-lg); overflow:hidden; }
@media (min-width:760px){ .contacts{ grid-template-columns:repeat(3,1fr); } }
.contact{
  background:var(--blanc); padding:clamp(1.5rem,3vw,2.1rem);
  display:flex; flex-direction:column; gap:.85rem; transition:background-color .4s ease;
}
.contact:hover{ background:var(--creme); }
.contact__k{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--encre-3); }
.contact__v{ font-size:var(--t-md); font-weight:600; letter-spacing:-.015em; color:var(--bleu); }
.contact__v a:hover{ color:var(--or-700); }
.contact address{ font-style:normal; color:var(--encre-2); font-size:var(--t-sm); line-height:1.75; }

/* --------------------------------------------------------------------------
   19. FINALE — bandeau bleu
   -------------------------------------------------------------------------- */
.finale{
  position:relative; padding-block:clamp(4.5rem,10vw,8rem); text-align:center; overflow:hidden;
  background:var(--bleu); color:var(--blanc);
}
.finale::after{
  content:""; position:absolute; left:50%; bottom:-46%;
  width:min(120vw,1000px); aspect-ratio:1; transform:translateX(-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(245,147,30,.2), transparent 62%);
}
.finale__in{ position:relative; z-index:1; }
.finale h2{ font-size:var(--t-3xl); color:var(--blanc); }
.finale .etiq{ color:var(--or-200); }
.finale .etiq::before{ background:var(--or-200); }
.finale .chapo{ margin-inline:auto; margin-top:1.4rem; color:rgba(255,255,255,.78); }
.finale__cta{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:clamp(2rem,4vw,2.9rem); }
.finale .btn--fant{ color:var(--blanc); border-color:rgba(255,255,255,.32); background:transparent; }
.finale .btn--fant::before{ background:var(--blanc); }
.finale .btn--fant:hover{ color:var(--bleu); border-color:var(--blanc); }

/* --------------------------------------------------------------------------
   20. PIED DE PAGE
   -------------------------------------------------------------------------- */
.pied{ background:var(--bleu); color:var(--blanc); padding-top:clamp(3rem,6vw,5rem); }
.pied .marque__nom{ color:var(--blanc); }
.pied .marque__nom b{ color:var(--or-200); }
.pied .marque__sous{ color:rgba(255,255,255,.5); }
.pied__g{ display:grid; gap:clamp(2rem,4vw,3rem); }
@media (min-width:900px){ .pied__g{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.8fr)); } }
.pied h3{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--or-200); font-weight:500; margin-bottom:1.2rem;
}
.pied__l{ display:grid; gap:.65rem; }
.pied__l a{ font-size:var(--t-sm); color:rgba(255,255,255,.72); transition:color .3s ease, transform .35s var(--out); display:inline-block; }
.pied__l a:hover{ color:var(--or-200); transform:translateX(3px); }
.pied address{ font-style:normal; color:rgba(255,255,255,.72); font-size:var(--t-sm); line-height:1.85; }
.pied address a:hover{ color:var(--or-200); }
.pied .attenue{ color:rgba(255,255,255,.7); }
.pied__sig{
  padding-top:clamp(2rem,4.5vw,3.5rem); overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 18%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 18%,transparent 100%);
}
.pied__sig svg{ width:100%; height:auto; color:rgba(255,255,255,.08); }
.pied__bar{
  margin-top:clamp(1.5rem,3vw,2.5rem); padding-block:1.4rem; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.08em; color:rgba(255,255,255,.55);
}
.pied__bar a:hover{ color:var(--or-200); }
.pied__legal{ display:flex; flex-wrap:wrap; gap:1.25rem; }

/* --------------------------------------------------------------------------
   21. BARRE D'ACTION MOBILE
   -------------------------------------------------------------------------- */
.barre{
  position:fixed; left:0; right:0; bottom:0; z-index:700;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--fil-2); border-top:1px solid var(--fil-2);
  box-shadow:0 -6px 30px -14px rgba(16,20,24,.3);
  transform:translateY(100%); transition:transform .5s var(--out);
  padding-bottom:env(safe-area-inset-bottom);
}
.barre.on{ transform:translateY(0); }
@media (min-width:1060px){ .barre{ display:none; } }
.barre a{
  display:flex; align-items:center; justify-content:center; gap:.55em;
  padding:1.05rem .6rem; background:var(--blanc); color:var(--bleu);
  font-family:var(--f-mono); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
}
.barre a:last-child{ background:linear-gradient(100deg,var(--or-200),var(--or)); color:var(--bleu); font-weight:600; }

/* --------------------------------------------------------------------------
   22. RÉVÉLATIONS
   -------------------------------------------------------------------------- */
[data-rv]{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--out), transform .9s var(--out);
  will-change:opacity, transform;
}
[data-rv="fondu"]{ transform:none; }
[data-rv="gauche"]{ transform:translateX(-24px); }
[data-rv="droite"]{ transform:translateX(24px); }
[data-rv="echelle"]{ transform:scale(.965); }
[data-rv].vu{ opacity:1; transform:none; }
[data-trait]{ transform:scaleX(0); transition:transform 1.1s var(--out); }
[data-trait].vu{ transform:scaleX(1); }
[data-px]{ will-change:transform; }

/* --------------------------------------------------------------------------
   23. UTILITAIRES
   -------------------------------------------------------------------------- */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}.mt-6{margin-top:4rem}.mt-7{margin-top:5rem}
.tac{text-align:center}.mxa{margin-inline:auto}
.pastille{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.13em; text-transform:uppercase;
  padding:.55em 1em; border:1px solid var(--fil-2); border-radius:var(--r-full);
  color:var(--encre-2); background:var(--blanc);
}
.pastille i{ width:6px; height:6px; border-radius:50%; background:var(--or); flex:none; }
.note{
  border-left:3px solid var(--or); padding:1rem 0 1rem 1.35rem;
  color:var(--encre-2); font-size:var(--t-sm); background:linear-gradient(90deg,var(--creme),transparent 72%);
}
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.evite{ position:absolute; left:-9999px; top:0; z-index:9500; background:var(--bleu); color:var(--blanc); padding:.85rem 1.3rem; font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; }
.evite:focus{ left:0; }

.tableau{ font-size:var(--t-sm); width:100%; border-collapse:collapse; }
.tableau th,.tableau td{ text-align:left; padding:1rem .5rem; border-bottom:1px solid var(--fil); vertical-align:top; }
.tableau th{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.13em; text-transform:uppercase; color:var(--encre-3); font-weight:500; width:38%; }
.tableau td{ color:var(--encre-2); }

/* --------------------------------------------------------------------------
   24. MOUVEMENT RÉDUIT / IMPRESSION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  [data-trait]{ transform:scaleX(1) !important; }
  .hero h1 .ligne>span{ transform:none; }
  .grain{ animation:none; }
}
@media print{
  .nav,.tiroir,.grain,.plomb,.barre,.finale::after{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* --------------------------------------------------------------------------
   23. AVIS CLIENTS — carrousel continu
   -------------------------------------------------------------------------- */
.avis{ background:var(--creme); border-block:1px solid var(--fil); }

.avis__tete{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 2.2rem;
  margin-top:1.6rem;
}
.avis__note{
  display:flex; align-items:baseline; gap:.5rem;
  font-family:var(--f-titre); font-weight:600; letter-spacing:-.03em;
}
.avis__note b{ font-size:clamp(2.1rem,5vw,2.9rem); line-height:1; color:var(--encre); }
.avis__note span{ font-size:var(--t-sm); color:var(--encre-2); font-family:var(--f-sans); font-weight:400; }

.etoiles{ display:inline-flex; gap:.16em; color:var(--or-600); }
.etoiles svg{ width:1em; height:1em; }
.etoiles--sm{ font-size:.86rem; }

.avis__src{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.13em;
  text-transform:uppercase; color:var(--encre-2);
  border:1px solid var(--fil-2); border-radius:var(--r-full);
  padding:.45rem .9rem; background:var(--blanc);
}
.avis__src i{ width:6px; height:6px; border-radius:50%; background:var(--or); flex:none; }

.avisrail{
  margin-top:2.4rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.avispiste{
  display:flex; width:max-content; gap:1.1rem;
  animation:avisdefile 68s linear infinite;
  will-change:transform;
}
.avisrail:hover .avispiste,
.avisrail:focus-within .avispiste{ animation-play-state:paused; }
@keyframes avisdefile{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }

.avis__c{
  flex:none; width:min(340px,78vw);
  display:flex; flex-direction:column;
  background:var(--blanc); border:1px solid var(--fil);
  border-radius:var(--r-lg); padding:1.5rem 1.5rem 1.3rem;
  transition:border-color .4s var(--out), box-shadow .4s var(--out);
}
.avis__c:hover{ border-color:var(--or-fil); box-shadow:var(--ombre-1); }
.avis__c blockquote{ margin:.85rem 0 0; font-size:var(--t-sm); line-height:1.65; color:var(--encre-2); }
.avis__c blockquote::before{ content:"« "; color:var(--or-600); }
.avis__c blockquote::after{ content:" »"; color:var(--or-600); }
.avis__pied{
  margin-top:auto; padding-top:1.1rem; display:flex; align-items:center; gap:.7rem;
  border-top:1px solid var(--fil);
}
.avis__ini{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--bleu); color:var(--blanc);
  font-family:var(--f-titre); font-size:.8rem; font-weight:600;
}
.avis__qui{ display:flex; flex-direction:column; line-height:1.35; }
.avis__qui b{ font-weight:500; font-size:var(--t-sm); color:var(--encre); }
.avis__qui time{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--encre-3); letter-spacing:.06em; }

@media (prefers-reduced-motion:reduce){
  .avispiste{ animation:none; }
  .avisrail{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; scroll-snap-type:x mandatory; }
  .avis__c{ scroll-snap-align:start; }
}

/* --------------------------------------------------------------------------
   24. AUTRES CORPS D'ÉTAT — grille compacte
   -------------------------------------------------------------------------- */
.metiers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr));
  gap:1px; background:var(--fil);
  border:1px solid var(--fil); border-radius:var(--r-lg); overflow:hidden;
  margin-top:1.7rem;
}
.metiers__el{
  background:var(--blanc); padding:1.25rem 1.3rem;
  display:flex; flex-direction:column; gap:.55rem;
  transition:background .4s var(--out);
}
.metiers__el:hover{ background:var(--or-100); }
.metiers__el svg{ width:20px; height:20px; color:var(--or-700); flex:none; }
.metiers__el b{ font-family:var(--f-titre); font-weight:600; font-size:var(--t-sm); color:var(--encre); letter-spacing:-.02em; }
.metiers__el span{ font-size:var(--t-xs); color:var(--encre-2); line-height:1.55; }

/* --------------------------------------------------------------------------
   25. PAGES VILLE
   -------------------------------------------------------------------------- */
.vhero{ padding-block:clamp(6.5rem,13vh,9rem) clamp(2.5rem,5vh,4rem); }
@media (min-width:960px){
  .vhero__g{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
}
.vhero__vue{ margin:2rem 0 0; }
@media (min-width:960px){ .vhero__vue{ margin:0; } }
.vhero__vue img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-lg); border:1px solid var(--fil);
}
.filariane{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em;
  color:var(--encre-3); margin-bottom:1.3rem;
}
.filariane a{ color:var(--encre-2); }
.filariane a:hover{ color:var(--or-700); }
.filariane span{ color:var(--fil-2); }

.reperes{ display:grid; gap:1px; background:var(--fil); border:1px solid var(--fil); border-radius:var(--r-lg); overflow:hidden; }
@media (min-width:760px){ .reperes{ grid-template-columns:repeat(3,1fr); } }
.reperes__el{ background:var(--blanc); padding:1.5rem 1.4rem; }
.reperes__el h3{ font-size:var(--t-sm); margin-bottom:.5rem; }
.reperes__el p{ font-size:var(--t-xs); color:var(--encre-2); line-height:1.65; }

.communes{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.communes a{
  display:inline-flex; align-items:center;
  padding:.5rem .95rem; border:1px solid var(--fil-2); border-radius:var(--r-full);
  font-size:var(--t-xs); color:var(--encre-2); background:var(--blanc);
  transition:border-color .35s var(--out), color .35s var(--out), background .35s var(--out);
}
.communes a:hover{ border-color:var(--or); color:var(--or-700); background:var(--or-100); }
.communes a[aria-current]{ background:var(--bleu); border-color:var(--bleu); color:var(--blanc); }

/* ==========================================================================
   26. BANDEAU MOBILE — version sombre, plein cadre
   Sur petit écran le voile blanc donnait un rendu « article de blog ».
   On inverse : la photo occupe tout l'écran, un voile marine la fonce,
   le texte passe en blanc. C'est le rendu attendu d'un site d'artisan.
   ========================================================================== */
.sur-grand{ display:none; }
@media (min-width:1000px){ .sur-grand{ display:inline; } }

/* Note d'avis — visible surtout sur mobile, juste sous l'accroche */
.heronote{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.5rem;
  padding:.55rem 1rem; border-radius:var(--r-full);
  border:1px solid var(--fil-2); background:var(--blanc);
  transition:border-color .35s var(--out), background .35s var(--out);
}
.heronote:hover{ border-color:var(--or); }
.heronote__e{ color:var(--or-600); letter-spacing:.1em; font-size:.9rem; }
.heronote__t{ font-size:var(--t-xs); color:var(--encre-2); letter-spacing:.02em; }
.heronote__t b{ font-family:var(--f-titre); font-weight:600; color:var(--encre); font-size:.95rem; }

@media (max-width:999px){

  .hero{
    min-height:100svh;
    align-items:flex-end;
    padding-top:calc(var(--h-nav) + 2rem);
    padding-bottom:calc(3rem + env(safe-area-inset-bottom));
  }
  /* plein cadre : la photo passe aussi derrière la barre de navigation */
  .hero__fond{ top:0; }
  .hero__fond img{ object-position:56% 42%; }

  .hero__fond::after{
    background:
      linear-gradient(180deg,
        rgba(9,20,38,.60) 0%,
        rgba(9,20,38,.50) 22%,
        rgba(10,24,45,.74) 52%,
        rgba(9,20,38,.90) 78%,
        rgba(8,17,33,.96) 100%),
      linear-gradient(90deg, rgba(8,17,33,.34) 0%, transparent 55%);
  }
  /* les halos clairs n'ont plus lieu d'être sur fond sombre */
  .hero::before{
    background:radial-gradient(circle, rgba(245,147,30,.3) 0%, transparent 66%);
    mix-blend-mode:screen; top:-6%; right:-24%;
  }
  .hero::after{ display:none; }

  .hero .etiq{ color:var(--or-200); }
  .hero .etiq::before{ background:var(--or); width:2.4em; }

  .hero h1{
    color:#fff;
    font-size:clamp(2.45rem,10.6vw,3.5rem);
    letter-spacing:-.035em; line-height:1.015;
  }
  /* Sur fond sombre (photo), le titre reste blanc pour le contraste */
  .hero h1.hero__titre{ color:#fff; }
  /* Orange éclairci : #F5931E ne passe pas le contraste sur fond sombre */
  .hero h1 .or{
    background:none; -webkit-background-clip:initial; background-clip:initial;
    color:#FFB05A;
  }

  .hero__chapo{
    color:rgba(255,255,255,.9); font-size:var(--t-base);
    max-width:34ch; margin-top:1.1rem;
  }

  .heronote{
    border-color:rgba(255,255,255,.34);
    background:rgba(255,255,255,.09);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    margin-top:1.35rem;
  }
  .heronote__e{ color:#FFB05A; }
  .heronote__t{ color:rgba(255,255,255,.85); }
  .heronote__t b{ color:#fff; }

  .hero__cta{ margin-top:1.6rem; gap:.65rem; }
  .hero__cta .btn{ width:100%; justify-content:center; padding-block:1.05rem; }
  .hero__cta .btn--fant{
    color:#fff; border-color:rgba(255,255,255,.4); background:transparent;
  }
  .hero__cta .btn--fant::before{ background:rgba(255,255,255,.14); }
  .hero__cta .btn--fant:hover{ color:#fff; border-color:#fff; }

  .hero__preuves{
    margin-top:1.7rem; padding-top:0; border-top:0;
    gap:.5rem;
  }
  .hero__preuves span{
    color:rgba(255,255,255,.82);
    border:1px solid rgba(255,255,255,.24); border-radius:var(--r-full);
    padding:.42rem .8rem .42rem .68rem; font-size:.6rem; letter-spacing:.11em;
  }
  .hero__preuves span::before{ width:4px; height:4px; background:#FFB05A; }

  /* Barre de navigation posée sur la photo : logo et burger en clair */
  .nav:not(.colle) .marque__logo{
    background:#fff; border-radius:50%;
    box-shadow:0 0 0 1px rgba(255,255,255,.5);
  }
  .nav:not(.colle) .marque__nom{ color:#fff; }
  .nav:not(.colle) .marque__nom b{ color:#FFB05A; }
  .nav:not(.colle) .marque__sous{ color:rgba(255,255,255,.66); }
  .nav:not(.colle) .nav__tel{ color:rgba(255,255,255,.9); }
  .nav:not(.colle) .burger{
    background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.42);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .nav:not(.colle) .burger span{ background:#fff; }
  body.ouvert .nav:not(.colle) .burger span{ background:var(--bleu); }
  body.ouvert .nav:not(.colle) .burger{ background:var(--blanc); border-color:var(--fil-2); }
}

/* Très petits écrans : on resserre encore */
@media (max-width:400px){
  .hero h1{ font-size:2.15rem; }
  .hero__chapo{ font-size:var(--t-sm); }
  .hero__preuves span:nth-child(n+4){ display:none; }
}