/* ==========================================================================
   Déneigement TEA — feuille de style principale
   Conçu et développé par Gaboli Studio · gabolistudio.ca
   HTML/CSS/JS pur — aucune dépendance externe.
   --------------------------------------------------------------------------
   SOMMAIRE
   01. Polices
   02. Variables (couleurs, mesures)  ← personnalisation rapide ici
   03. Base et réinitialisation
   04. Utilitaires et animations
   05. Boutons et liens
   06. En-tête et navigation
   07. Section héro
   08. Bandeau avantages
   09. Section service
   10. Étapes
   11. Zones desservies
   12. Questions fréquentes
   13. Contact et formulaire
   14. Pied de page
   15. Bouton d'appel flottant
   16. Bannière de témoins
   17. Pages intérieures (légal, merci, 404)
   18. Réactivité (mobile et tablette)
   ========================================================================== */

/* ---------- 01. Polices ------------------------------------------------- */
@font-face{
  font-family:"Archivo";
  src:url("../polices/archivo-variable.woff2") format("woff2-variations"),
      url("../polices/archivo-variable.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Inter";
  src:url("../polices/inter-variable.woff2") format("woff2-variations"),
      url("../polices/inter-variable.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}

/* ---------- 02. Variables ----------------------------------------------- */
:root{
  /* Couleurs de marque — modifier ici pour réutiliser le modèle */
  --orange:#f75117;
  --orange-clair:#ff7038;
  --orange-sombre:#c93d09;

  --nuit:#0e1014;
  --anthracite:#15181e;
  --anthracite-2:#1c2027;
  --ardoise:#262c36;
  --ardoise-clair:#39424f;

  --neige:#f3f6f9;
  --neige-2:#e6ecf2;
  --givre:#9fadbd;
  --givre-fonce:#5d6a79;
  --blanc:#ffffff;

  --texte-sombre:#161a20;
  --texte-doux:#4d5865;

  /* Typographie */
  --titre:"Archivo","Archivo Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --corps:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* Mesures */
  --largeur:1240px;
  --gouttiere:clamp(20px,5vw,56px);
  --rayon:16px;
  --rayon-s:10px;
  --hauteur-entete:98px;
  --ombre:0 24px 60px -24px rgba(0,0,0,.55);
  --ombre-douce:0 18px 40px -22px rgba(22,26,32,.35);
  --transition:.35s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 03. Base ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--nuit);
  color:var(--neige);
  font-family:var(--corps);
  font-size:clamp(16px,.4vw + 15px,17.5px);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--titre);margin:0;line-height:1.02;letter-spacing:-.025em;font-weight:800}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:3px solid var(--orange-clair);outline-offset:3px;border-radius:4px}

.conteneur{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}
.section{position:relative;padding-block:clamp(72px,10vw,140px)}

/* ---------- 04. Utilitaires --------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saut{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);color:#fff;padding:14px 22px;font-weight:600;border-radius:0 0 var(--rayon-s) 0}
.saut:focus{left:0}

.surtitre{
  display:inline-flex;align-items:flex-start;gap:12px;
  font-family:var(--titre);font-size:.78rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
  margin:0 0 18px;
}
.surtitre::before{content:"";width:34px;height:3px;margin-top:.62em;background:var(--orange);flex:none}
.surtitre.pale{color:var(--orange-sombre)}
.surtitre.pale::before{background:var(--orange-sombre)}

.titre-geant{font-size:clamp(2.4rem,7.2vw,5rem)}
.titre-section{font-size:clamp(2rem,5.4vw,3.6rem)}
.titre-section em{font-style:normal;color:var(--orange)}
.plomb{font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.55;font-weight:500}
.doux{color:var(--givre)}
.doux-clair{color:var(--texte-doux)}

/* Apparition au défilement */
[data-anim]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
[data-anim].vu{opacity:1;transform:none}
[data-anim][data-delai="1"]{transition-delay:.09s}
[data-anim][data-delai="2"]{transition-delay:.18s}
[data-anim][data-delai="3"]{transition-delay:.27s}
[data-anim][data-delai="4"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
}

/* Textures de fond */
.trame-neige{
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:26px 26px;
}
.trame-hachure{
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 11px);
}

/* Biseau « lame de gratte » entre les sections */
.biseau-haut{clip-path:polygon(0 3.2vw,100% 0,100% 100%,0 100%)}
.biseau-bas{clip-path:polygon(0 0,100% 0,100% calc(100% - 3.2vw),0 100%)}

/* ---------- 05. Boutons ------------------------------------------------- */
.btn{
  --fond:var(--orange);--texte:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 26px;border:0;border-radius:var(--rayon-s);
  background:var(--fond);color:var(--texte);
  font-family:var(--titre);font-size:1rem;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;overflow:hidden;isolation:isolate;
  box-shadow:0 12px 26px -14px rgba(247,81,23,.9);
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
}
.btn svg{flex:none}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--orange-clair),var(--orange));
  opacity:0;transition:opacity var(--transition);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(247,81,23,.95)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0)}
.btn.grand{padding:20px 34px;font-size:1.12rem}
.btn.fantome{
  background:transparent;color:var(--neige);
  border:1.5px solid rgba(255,255,255,.28);box-shadow:none;
}
.btn.fantome::after{background:rgba(255,255,255,.08)}
.btn.fantome:hover{border-color:rgba(255,255,255,.55);box-shadow:none}
.btn.sombre{background:var(--anthracite);color:#fff;box-shadow:0 14px 30px -18px rgba(14,16,20,.9)}
.btn.sombre::after{background:var(--ardoise)}

.lien-fleche{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--titre);font-weight:700;color:var(--neige);
  padding-bottom:3px;border-bottom:2px solid rgba(255,255,255,.22);
  transition:color var(--transition),border-color var(--transition),gap var(--transition);
}
.lien-fleche svg{transition:transform var(--transition)}
.lien-fleche:hover{color:var(--orange);border-color:var(--orange)}
.lien-fleche:hover svg{transform:translateX(4px)}
.lien-fleche.sombre{color:var(--texte-sombre);border-color:rgba(22,26,32,.2)}
.lien-fleche.sombre:hover{color:var(--orange);border-color:var(--orange)}

/* ---------- 06. En-tête ------------------------------------------------- */
.entete{
  position:fixed;inset:0 0 auto;z-index:90;
  height:var(--hauteur-entete);
  display:flex;align-items:center;
  transition:background var(--transition),height var(--transition),box-shadow var(--transition),border-color var(--transition);
  border-bottom:1px solid transparent;
}
.entete::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,16,20,.92),rgba(14,16,20,0));
  transition:opacity var(--transition);
}
.entete.figee{
  height:78px;background:rgba(14,16,20,.9);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.9);
}
.entete.figee::before{opacity:0}
.entete .conteneur{display:flex;align-items:center;gap:26px;width:100%}

.logo-lien{display:flex;align-items:center;flex:none;margin-right:auto}
.logo-lien img{height:clamp(54px,5.6vw,72px);width:auto;transition:height var(--transition)}
.entete.figee .logo-lien img{height:54px}

.nav-principale{display:flex;align-items:center;gap:6px}
.nav-principale a{
  position:relative;padding:10px 14px;border-radius:8px;
  font-family:var(--titre);font-size:.95rem;font-weight:600;color:rgba(255,255,255,.82);
  transition:color var(--transition),background var(--transition);
}
.nav-principale a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform var(--transition);
}
.nav-principale a:hover,.nav-principale a.actif{color:#fff}
.nav-principale a:hover::after,.nav-principale a.actif::after{transform:scaleX(1)}

.entete .btn{padding:13px 20px;font-size:.95rem}

/* Bouton hamburger */
.bascule-menu{
  display:none;width:48px;height:48px;flex:none;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;cursor:pointer;
}
.bascule-menu span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;position:relative;transition:background .2s}
.bascule-menu span::before,.bascule-menu span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform var(--transition),top var(--transition);
}
.bascule-menu span::before{top:-7px}
.bascule-menu span::after{top:7px}
.bascule-menu[aria-expanded="true"] span{background:transparent}
.bascule-menu[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.bascule-menu[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Panneau mobile */
.panneau-mobile{
  position:fixed;inset:0;z-index:85;
  background:linear-gradient(165deg,#12151b 0%,#1b2029 100%);
  padding:calc(var(--hauteur-entete) + 30px) var(--gouttiere) 40px;
  display:flex;flex-direction:column;gap:8px;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),visibility .45s;
  overflow-y:auto;
}
.panneau-mobile.ouvert{transform:translateY(0);visibility:visible}
.panneau-mobile a.lien-mobile{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 4px;border-bottom:1px solid rgba(255,255,255,.09);
  font-family:var(--titre);font-size:1.5rem;font-weight:700;color:#fff;
}
.panneau-mobile a.lien-mobile svg{color:var(--orange);flex:none}
.panneau-mobile .btn{margin-top:26px;width:100%}
.panneau-mobile .info-mobile{margin-top:auto;padding-top:28px;color:var(--givre);font-size:.92rem}

/* ---------- 07. Héro ---------------------------------------------------- */
.hero{
  position:relative;min-height:min(100svh,900px);
  display:flex;align-items:flex-end;
  padding-top:calc(var(--hauteur-entete) + 40px);
  padding-bottom:clamp(40px,7vw,86px);
  overflow:hidden;isolation:isolate;
}
.hero-fond{position:absolute;inset:0;z-index:-3}
.hero-fond img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;transform:scale(1.06)}
.hero-voile{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(14,16,20,.86) 0%,rgba(14,16,20,.5) 32%,rgba(14,16,20,.78) 70%,rgba(14,16,20,.97) 100%),
    linear-gradient(96deg,rgba(14,16,20,.92) 0%,rgba(14,16,20,.55) 46%,rgba(14,16,20,.15) 100%);
}
/* width/height explicites : un <canvas> est un élément remplacé, `inset:0` seul
   ne suffit pas à le contraindre à son conteneur. */
#neige{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.85;display:block}
.hero-contenu{position:relative;max-width:min(980px,100%)}
.hero h1{font-size:clamp(2.7rem,7.6vw,5.1rem);font-weight:800;color:#fff;margin-bottom:26px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--orange);display:inline-block}
.hero .intro{max-width:640px;color:#dbe3ec;font-size:clamp(1.03rem,1.5vw,1.22rem);margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px}

.hero-bas{
  position:relative;z-index:2;margin-top:clamp(44px,6vw,72px);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
}
.hero-etiquette{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--titre);font-size:.82rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#c7d2de;
}
.hero-etiquette svg{color:var(--orange);flex:none}

.defilement{
  position:absolute;right:var(--gouttiere);bottom:clamp(40px,7vw,86px);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
  writing-mode:vertical-rl;
}
.defilement::after{
  content:"";width:1px;height:56px;background:linear-gradient(rgba(255,255,255,.5),transparent);
  animation:coule 2.4s ease-in-out infinite;
}
@keyframes coule{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- 08. Bandeau avantages --------------------------------------- */
.avantages{position:relative;background:var(--anthracite-2);border-top:3px solid var(--orange)}
.avantages .conteneur{
  display:grid;grid-template-columns:repeat(3,1fr);
  padding-block:clamp(30px,4vw,46px);
}
.avantage{display:flex;align-items:center;gap:18px;padding:14px 26px}
.avantage + .avantage{border-left:1px solid rgba(255,255,255,.09)}
.avantage .pastille{
  flex:none;width:56px;height:56px;border-radius:14px;
  display:grid;place-items:center;color:var(--orange);
  background:rgba(247,81,23,.12);border:1px solid rgba(247,81,23,.25);
  transition:transform var(--transition),background var(--transition);
}
.avantage:hover .pastille{transform:translateY(-3px) rotate(-4deg);background:rgba(247,81,23,.2)}
.avantage b{display:block;font-family:var(--titre);font-size:1.15rem;font-weight:700;color:#fff;line-height:1.2}
.avantage span{font-size:.92rem;color:var(--givre)}

/* ---------- 09. Section service ----------------------------------------- */
.service{
  background:var(--neige);color:var(--texte-sombre);
  background-image:
    radial-gradient(rgba(22,26,32,.055) 1px,transparent 1px),
    linear-gradient(180deg,#fff 0%,var(--neige) 45%,var(--neige-2) 100%);
  background-size:24px 24px,100% 100%;
}
.service h2,.service h3{color:var(--texte-sombre)}
.service-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(34px,5vw,80px);align-items:start}
.service-intro{position:sticky;top:calc(var(--hauteur-entete) + 30px)}
.service-intro .plomb{color:var(--texte-doux);margin-top:22px;max-width:26ch}

.fiche{
  position:relative;background:#fff;border:1px solid rgba(22,26,32,.09);
  border-radius:var(--rayon);padding:clamp(24px,3vw,34px);
  box-shadow:var(--ombre-douce);overflow:hidden;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.fiche + .fiche{margin-top:20px}
.fiche::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--orange);transform:scaleY(0);transform-origin:top;
  transition:transform var(--transition);
}
.fiche:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(22,26,32,.45);border-color:rgba(247,81,23,.3)}
.fiche:hover::before{transform:scaleY(1)}
.fiche-tete{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.fiche-icone{
  flex:none;width:52px;height:52px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(247,81,23,.14),rgba(247,81,23,.05));
  border:1px solid rgba(247,81,23,.22);color:var(--orange);
}
.fiche h3{font-size:1.32rem;font-weight:700}
.fiche p{color:var(--texte-doux);font-size:1rem;margin:0}

.service-texte p{color:var(--texte-doux)}
.service-texte .plomb{color:var(--texte-sombre);font-weight:600;margin-bottom:18px}
.bloc-fiches{margin-top:34px}

/* ---------- 10. Étapes -------------------------------------------------- */
.etapes{background:var(--neige-2);color:var(--texte-sombre);padding-bottom:clamp(80px,11vw,150px)}
.etapes h2{color:var(--texte-sombre)}
.etapes-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(38px,5vw,58px)}
.etape{
  position:relative;background:#fff;border-radius:var(--rayon);
  padding:clamp(28px,3vw,38px) clamp(24px,2.6vw,32px);
  border:1px solid rgba(22,26,32,.08);overflow:hidden;
  transition:transform var(--transition),box-shadow var(--transition);
}
.etape:hover{transform:translateY(-5px);box-shadow:0 28px 54px -32px rgba(22,26,32,.5)}
.etape .pastille{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:var(--texte-sombre);color:var(--orange);margin-bottom:20px;
  transition:background var(--transition),transform var(--transition);
}
.etape:hover .pastille{background:var(--orange);color:#fff;transform:rotate(-5deg)}
.etape h3{font-size:1.28rem;margin-bottom:10px}
.etape p{color:var(--texte-doux);font-size:.99rem;margin:0}

/* ---------- 11. Zones desservies ---------------------------------------- */
.zones{background:var(--anthracite);overflow:hidden}
.zones::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 460px at 82% 8%,rgba(247,81,23,.16),transparent 62%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 2px,transparent 2px 12px);
}
.zones .conteneur{position:relative}
.zones-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(34px,5vw,70px);align-items:center}
.zones-texte p{color:var(--givre);max-width:52ch}

.liste-secteurs{list-style:none;margin:32px 0 26px;padding:0;display:grid;gap:12px}
.liste-secteurs li{
  display:flex;align-items:center;gap:16px;
  padding:18px 22px;border-radius:var(--rayon-s);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  font-family:var(--titre);font-size:1.22rem;font-weight:700;color:#fff;
  transition:background var(--transition),border-color var(--transition),transform var(--transition);
}
.liste-secteurs li:hover{background:rgba(247,81,23,.12);border-color:rgba(247,81,23,.4);transform:translateX(5px)}
.liste-secteurs svg{color:var(--orange);flex:none}
.liste-secteurs small{margin-left:auto;font-family:var(--corps);font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--givre)}
.note-secteur{font-size:.97rem;color:var(--givre);margin-bottom:26px}

.photo-cadre{position:relative;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre);margin:0}
.photo-cadre img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.photo-cadre:hover img{transform:scale(1.045)}
.photo-cadre figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 22px 18px;
  background:linear-gradient(transparent,rgba(14,16,20,.9));
  font-family:var(--titre);font-size:.85rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;
}
.photo-cadre::after{
  content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--rayon);pointer-events:none;
}

/* Photo pleine largeur (section « Notre service ») */
.photo-bande{
  position:relative;margin:clamp(44px,5.5vw,72px) 0 0;border-radius:var(--rayon);
  overflow:hidden;box-shadow:var(--ombre);
}
.photo-bande img{
  display:block;width:100%;height:clamp(230px,32vw,420px);
  object-fit:cover;object-position:50% 58%;
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.photo-bande:hover img{transform:scale(1.04)}
.photo-bande figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:56px 24px 20px;
  background:linear-gradient(transparent,rgba(14,16,20,.9));
  font-family:var(--titre);font-size:.85rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;
}
.photo-bande::after{
  content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--rayon);pointer-events:none;
}

.cartes-secteurs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(40px,5vw,64px)}
.carte-secteur{
  margin:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--rayon);overflow:hidden;
  transition:border-color var(--transition),transform var(--transition);
}
.carte-secteur:hover{border-color:rgba(247,81,23,.42);transform:translateY(-4px)}
.carte-secteur figcaption{
  display:flex;align-items:center;gap:12px;padding:18px 22px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.carte-secteur figcaption svg{color:var(--orange);flex:none}
.carte-secteur h3{font-size:1.1rem;font-weight:700;color:#fff}
.carte-secteur img{width:100%;background:#f2f1eb}
.attribution{
  display:block;padding:11px 22px;font-size:.75rem;color:var(--givre-fonce);
  border-top:1px solid rgba(255,255,255,.07);transition:color var(--transition);
}
.attribution:hover{color:var(--givre)}
.note-cartes{margin-top:20px;font-size:.9rem;color:var(--givre-fonce);text-align:center}

/* ---------- 12. Questions fréquentes ------------------------------------ */
.faq{background:var(--nuit)}
.faq-grille{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.faq-intro p{color:var(--givre);margin-top:20px}
.faq-liste{display:grid;gap:12px}
.question{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--rayon-s);overflow:hidden;
  transition:border-color var(--transition),background var(--transition);
}
.question:hover{border-color:rgba(255,255,255,.2)}
.question.ouverte{border-color:rgba(247,81,23,.45);background:rgba(247,81,23,.06)}
.question button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 22px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--titre);font-size:1.06rem;font-weight:700;color:#fff;line-height:1.3;
}
.question .chevron{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.09);color:var(--orange);
  transition:transform var(--transition),background var(--transition);
}
.question.ouverte .chevron{transform:rotate(45deg);background:var(--orange);color:#fff}
.reponse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,.61,.36,1)}
.question.ouverte .reponse{grid-template-rows:1fr}
.reponse > div{overflow:hidden}
.reponse p{padding:0 22px 22px;color:var(--givre);font-size:1rem;margin:0}

/* ---------- 13. Contact ------------------------------------------------- */
.contact{
  position:relative;background:var(--anthracite-2);overflow:hidden;
}
.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 12% 100%,rgba(247,81,23,.2),transparent 65%),
    radial-gradient(600px 380px at 92% 0%,rgba(120,160,210,.1),transparent 65%);
}
.contact .conteneur{position:relative}
.contact-grille{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:clamp(36px,5vw,70px);align-items:start}
.contact-info p{color:var(--givre);max-width:48ch}

.tel-geant{
  display:inline-flex;align-items:center;gap:18px;margin:30px 0 14px;
  font-family:var(--titre);font-size:clamp(2.1rem,5.6vw,3.3rem);font-weight:800;
  letter-spacing:-.03em;color:#fff;transition:color var(--transition),gap var(--transition);
}
.tel-geant .rond{
  flex:none;width:clamp(52px,7vw,64px);height:clamp(52px,7vw,64px);border-radius:50%;
  display:grid;place-items:center;background:var(--orange);color:#fff;
  box-shadow:0 0 0 0 rgba(247,81,23,.55);animation:onde 2.6s ease-out infinite;
}
.tel-geant:hover{color:var(--orange-clair);gap:22px}
@keyframes onde{
  0%{box-shadow:0 0 0 0 rgba(247,81,23,.5)}
  70%{box-shadow:0 0 0 20px rgba(247,81,23,0)}
  100%{box-shadow:0 0 0 0 rgba(247,81,23,0)}
}
@media (prefers-reduced-motion:reduce){.tel-geant .rond{animation:none}}
.etiquette-contact{display:inline-flex;align-items:center;gap:10px;color:var(--givre);font-size:.96rem}
.etiquette-contact svg{color:var(--orange);flex:none}
.contact-liens{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.puce-lien{
  display:inline-flex;align-items:center;gap:11px;padding:13px 20px;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-size:.94rem;font-weight:500;color:#fff;
  transition:background var(--transition),border-color var(--transition),transform var(--transition);
}
.puce-lien:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.puce-lien img{width:20px;height:20px}

/* Formulaire */
.formulaire{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--rayon);padding:clamp(24px,3.2vw,38px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:var(--ombre);
}
.formulaire h3{font-size:1.5rem;margin-bottom:8px;color:#fff}
.formulaire > p{color:var(--givre);font-size:.95rem;margin-bottom:26px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ.pleine{grid-column:1 / -1}
.champ label{font-size:.84rem;font-weight:600;letter-spacing:.03em;color:#cfd8e2}
.champ label .requis{color:var(--orange)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:14px 16px;border-radius:var(--rayon-s);
  background:rgba(14,16,20,.55);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:1rem;font-family:var(--corps);
  transition:border-color var(--transition),background var(--transition),box-shadow var(--transition);
}
.champ textarea{min-height:118px;resize:vertical}
.champ select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f75117' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:44px;
}
.champ select option{background:#1c2027;color:#fff}
.champ input::placeholder,.champ textarea::placeholder{color:#7b8794}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--orange);background:rgba(14,16,20,.75);
  box-shadow:0 0 0 3px rgba(247,81,23,.2);
}
.champ.erreur input,.champ.erreur select,.champ.erreur textarea{border-color:#ff6b5e;box-shadow:0 0 0 3px rgba(255,107,94,.16)}
.message-erreur{font-size:.82rem;color:#ff9b91;min-height:0}
.champ.erreur .message-erreur{min-height:1em}

.consentement{display:flex;align-items:flex-start;gap:12px;grid-column:1/-1;margin-top:4px}
.consentement input{
  flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--orange);cursor:pointer;
}
.consentement label{font-size:.86rem;color:var(--givre);line-height:1.5}
.consentement a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.formulaire .btn{width:100%;margin-top:22px}
.mention-formulaire{margin-top:16px;font-size:.8rem;color:var(--givre-fonce);text-align:center}
.avis-formulaire{
  display:none;margin-top:18px;padding:15px 18px;border-radius:var(--rayon-s);
  font-size:.93rem;border:1px solid;
}
.avis-formulaire.succes{display:block;background:rgba(64,190,120,.12);border-color:rgba(64,190,120,.4);color:#a8e9c4}
.avis-formulaire.echec{display:block;background:rgba(255,107,94,.12);border-color:rgba(255,107,94,.4);color:#ffb3ac}

.secours{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.secours p{font-size:.86rem;color:var(--givre);margin-bottom:12px}
.secours-actions{display:flex;flex-wrap:wrap;gap:10px}
.secours-actions .btn{flex:1 1 0;min-width:0;padding:12px 14px;font-size:.9rem;box-shadow:none;white-space:nowrap}

/* ---------- 14. Pied de page -------------------------------------------- */
.pied{background:var(--nuit);border-top:1px solid rgba(255,255,255,.08);padding-block:clamp(48px,6vw,72px) 30px}
.pied-haut{
  display:grid;grid-template-columns:auto 1fr auto;gap:30px 40px;align-items:center;
  padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.08);
}
.pied-marque img{height:78px;width:auto}
.pied-slogan{
  font-family:var(--titre);font-size:clamp(1.2rem,2.4vw,1.65rem);font-weight:700;
  color:#fff;line-height:1.15;margin:0;
}
.pied-slogan span{color:var(--orange)}
.pied-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}

.pied-liens{
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;
  padding-block:26px;color:var(--givre-fonce);font-size:.88rem;
}
.pied-mentions{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.pied-liens a,.pied-liens button{
  color:var(--givre);background:none;border:0;padding:0;cursor:pointer;
  transition:color var(--transition);font-size:.88rem;
}
.pied-liens a:hover,.pied-liens button:hover{color:var(--orange)}

/* Signature Gaboli Studio — composant figé, ne pas modifier.
   Elle vit sur la même ligne que les mentions légales, à droite. */
.gaboli-credit{display:inline-flex;margin:0}
.gaboli-credit a{display:inline-flex;align-items:center;gap:10px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:.01em;line-height:1;text-transform:none;text-decoration:none;color:rgba(255,255,255,.55);transition:color .2s ease,opacity .2s ease}
.gaboli-credit span{white-space:nowrap}
.gaboli-credit img{height:22px;width:auto;display:block;opacity:.82;transition:opacity .2s ease}
.gaboli-credit a:hover{color:rgba(255,255,255,.92)}
.gaboli-credit a:hover img{opacity:1}

/* ---------- 15. Bouton d'appel flottant --------------------------------- */
.appel-flottant{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 22px;border-radius:100px;
  background:var(--orange);color:#fff;
  font-family:var(--titre);font-size:1rem;font-weight:700;
  box-shadow:0 16px 34px -14px rgba(247,81,23,.95),0 0 0 0 rgba(247,81,23,.5);
  transform:translateY(140%);opacity:0;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .4s,background var(--transition);
  animation:onde 2.8s ease-out infinite 1s;
}
.appel-flottant.visible{transform:translateY(0);opacity:1}
body.temoins-ouverts .appel-flottant{transform:translateY(200%)!important;opacity:0!important}
.appel-flottant:hover{background:var(--orange-sombre)}
.appel-flottant svg{flex:none;animation:sonne 3.2s ease-in-out infinite}
@keyframes sonne{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-13deg)}92%{transform:rotate(11deg)}96%{transform:rotate(-7deg)}}
@media (prefers-reduced-motion:reduce){
  .appel-flottant,.appel-flottant svg{animation:none}
}

/* ---------- 16. Bannière de témoins ------------------------------------- */
.temoins{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:95;max-width:640px;
  background:rgba(20,23,29,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--rayon);
  padding:24px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  transform:translateY(150%);transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.temoins.visible{transform:translateY(0)}
.temoins strong{display:block;font-family:var(--titre);font-size:1.08rem;color:#fff;margin-bottom:10px}
.temoins p{font-size:.88rem;color:var(--givre);margin-bottom:10px;line-height:1.55}
.temoins a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.temoins-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.temoins-actions .btn{flex:1 1 160px;padding:13px 20px;font-size:.95rem}
.temoins .refuser{
  flex:1 1 130px;background:transparent;border:1px solid rgba(255,255,255,.24);
  color:#fff;border-radius:var(--rayon-s);padding:13px 20px;cursor:pointer;
  font-family:var(--titre);font-weight:700;font-size:.95rem;
  transition:border-color var(--transition),background var(--transition);
}
.temoins .refuser:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}

/* ---------- 17. Pages intérieures --------------------------------------- */
.entete-page{
  padding-top:calc(var(--hauteur-entete) + clamp(50px,8vw,90px));
  padding-bottom:clamp(36px,5vw,56px);
  background:linear-gradient(160deg,var(--anthracite) 0%,var(--nuit) 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.entete-page h1{font-size:clamp(2.1rem,5.6vw,3.4rem);color:#fff}
.entete-page p{color:var(--givre);margin-top:14px;max-width:60ch}
.fil{display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--givre-fonce);margin-bottom:18px}
.fil a:hover{color:var(--orange)}

.contenu-legal{max-width:820px;padding-block:clamp(48px,7vw,84px)}
.contenu-legal h2{font-size:clamp(1.4rem,3vw,1.85rem);color:#fff;margin:44px 0 14px}
.contenu-legal h2:first-child{margin-top:0}
.contenu-legal h3{font-size:1.12rem;color:#fff;margin:26px 0 10px}
.contenu-legal p,.contenu-legal li{color:var(--givre);font-size:1rem}
.contenu-legal ul{padding-left:22px;margin:0 0 1.1em}
.contenu-legal li{margin-bottom:8px}
.contenu-legal a{color:var(--orange-clair);text-decoration:underline;text-underline-offset:3px}
.maj{
  display:inline-block;margin-bottom:34px;padding:8px 16px;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  font-size:.82rem;color:var(--givre);
}

.page-centree{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--hauteur-entete) + 50px) var(--gouttiere) 70px;
  background:
    radial-gradient(800px 500px at 50% 12%,rgba(247,81,23,.16),transparent 62%),
    linear-gradient(180deg,var(--anthracite) 0%,var(--nuit) 100%);
}
.page-centree .sceau{
  width:96px;height:96px;border-radius:26px;display:grid;place-items:center;margin-bottom:30px;
  background:rgba(247,81,23,.14);border:1px solid rgba(247,81,23,.3);color:var(--orange);
}
.page-centree h1{font-size:clamp(2.2rem,6vw,3.6rem);color:#fff;margin-bottom:18px}
.page-centree p{color:var(--givre);max-width:52ch;margin-inline:auto}
.page-centree .actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:34px}

/* ---------- 18. Réactivité ---------------------------------------------- */
@media (max-width:1080px){
  .service-grille,.zones-grille,.contact-grille,.faq-grille{grid-template-columns:1fr}
  .service-intro{position:static}
  .service-intro .plomb{max-width:none}
  .zones-grille .photo-cadre{max-height:520px}
  .etapes-grille{grid-template-columns:1fr;gap:16px}
}

@media (max-width:900px){
  :root{--hauteur-entete:84px}
  .logo-lien img{height:58px}
  .entete.figee .logo-lien img{height:50px}
  .nav-principale{display:none}
  .entete .btn.tel-entete{display:none}
  .bascule-menu{display:flex}
  .avantages .conteneur{grid-template-columns:1fr;gap:4px;padding-block:20px}
  .avantage{padding:14px 6px}
  .avantage + .avantage{border-left:0;border-top:1px solid rgba(255,255,255,.09)}
  .defilement{display:none}
  .pied-haut{grid-template-columns:1fr;text-align:center;justify-items:center;gap:24px}
  .pied-actions{justify-content:center}
  .pied-liens{flex-direction:column;text-align:center;gap:18px}
  .pied-mentions{justify-content:center}
}

@media (max-width:760px){
  .hero{min-height:auto;padding-top:calc(var(--hauteur-entete) + 56px)}
  .hero h1{font-size:clamp(2.5rem,10.5vw,3.4rem)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-actions .lien-fleche{align-self:center;margin-top:4px}
  .hero-bas{gap:12px 20px;margin-top:34px}
  .hero-etiquette{font-size:.74rem}
  .cartes-secteurs{grid-template-columns:1fr}
  .champs{grid-template-columns:1fr}
  .secours-actions{flex-direction:column}
  .secours-actions .btn{width:100%}
  .contact-liens{flex-direction:column;align-items:stretch}
  .puce-lien{justify-content:center}
  .temoins{left:10px;right:10px;bottom:10px;padding:18px}
  .temoins strong{font-size:1rem;margin-bottom:8px}
  .temoins p{font-size:.82rem;margin-bottom:8px;line-height:1.48}
  .temoins-actions{gap:10px;margin-top:14px}
  .temoins-actions .btn,.temoins .refuser{flex:1 1 0;min-width:0;padding:12px 10px;font-size:.92rem}
  .appel-flottant{left:12px;right:12px;bottom:12px;justify-content:center;padding:16px 20px}
  .appel-flottant.decale{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .liste-secteurs li{font-size:1.08rem;padding:16px 18px}
  .liste-secteurs small{display:none}
  .fiche-tete{gap:13px}
  .fiche h3{font-size:1.18rem}
  .tel-geant{gap:14px}
  .pied{padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))}
}

@media (max-width:480px){
  .surtitre{font-size:.72rem;letter-spacing:.14em;gap:10px}
  .surtitre::before{width:26px}
}

@media (max-width:420px){
  :root{--gouttiere:18px}
  .hero h1{font-size:2.35rem}
  .titre-section{font-size:2rem}
  .formulaire{padding:20px}
  .btn{padding:15px 20px}
  .btn.grand{padding:17px 22px;font-size:1.02rem}
}

/* Écrans larges */
@media (min-width:1500px){
  :root{--largeur:1340px}
}

/* Impression */
@media print{
  .entete,.appel-flottant,.temoins,.panneau-mobile,.defilement,#neige,.formulaire{display:none!important}
  body{background:#fff;color:#000}
  .hero-voile,.hero-fond{display:none}
  *{box-shadow:none!important}
}