/* ═══════════════════════════════════════════════════════════
   JESSE & JAMES EXTERMINATION
   Feuille de style principale
   Palette : noir profond + rouge signature + os cassé
   ═══════════════════════════════════════════════════════════ */

/* ---------- 0. Polices ---------- */
/* Hébergées sur le site, dans fonts/ (licence OFL à côté). Chargées chez
   Google, elles bloquaient l'affichage : 780 ms pour joindre deux domaines
   de plus sur un réseau cellulaire, mesuré par PageSpeed le 21 septembre 2026.
   Un seul fichier variable par famille couvre toutes les graisses. Les plages
   déclarées (400-800 et 400-600) sont celles que le site demandait à Google :
   un <strong> en Inter reste donc rendu en 600, comme avant. Les pages
   les annoncent d'avance avec <link rel="preload"> : changez le nom ici et
   là-bas en même temps. */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

/* ---------- 1. Tokens ---------- */
:root{
  /* Marque */
  --red:        #D8232A;
  --red-hot:    #F02B33;
  --red-deep:   #A5161C;
  /* Le rouge de la marque plafonne à 4,47:1 sur l'os cassé : juste sous le
     seuil de 4,5 pour du texte courant. Ce rouge un cran plus foncé sert au
     texte rouge de petite taille sur fond clair (5,3:1). */
  --red-ink:    #C41E25;
  --ink:        #0B0B0C;
  --ink-2:      #141417;
  --ink-3:      #1D1D21;

  /* Neutres */
  --bone:       #F4F2EE;
  --bone-2:     #EAE7E1;
  --white:      #FFFFFF;
  --grey:       #6E6E76;
  --grey-2:     #67676E;
  --line:       rgba(11,11,12,.12);
  --line-light: rgba(255,255,255,.14);

  /* Type */
  --font-d: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-b: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Rythme */
  --wrap: 1280px;
  --gut: 28px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --sect: clamp(72px, 9vw, 132px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow:    0 18px 50px -18px rgba(11,11,12,.28);
  --shadow-lg: 0 40px 90px -30px rgba(11,11,12,.45);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
svg{ width:100%; height:100%; display:block; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-d);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--red); color:#fff; }

:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:999;
  background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:0 0 var(--r-sm) var(--r-sm);
  font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

.container{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.section{ padding-block:var(--sect); }

/* Les ancres ne doivent pas passer sous l'en-tête fixe */
section[id], [id="top"]{ scroll-margin-top:96px; }
@media (max-width:1024px){ section[id], [id="top"]{ scroll-margin-top:76px; } }

/* ---------- 3. Typo utilitaires ---------- */
.h2{
  font-size:clamp(2.1rem, 4.4vw, 3.6rem);
  letter-spacing:-.035em;
}
.lead{
  font-size:clamp(1rem, 1.15vw, 1.12rem);
  color:var(--grey);
  max-width:52ch;
}
.muted{ color:var(--grey-2); }
.hl{ color:var(--red); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-d);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:1.15rem;
}
.eyebrow::before{
  content:''; width:26px; height:2px; background:var(--red); flex:none;
}
.eyebrow--light{ color:rgba(255,255,255,.72); }


.ticks{
  list-style:none; margin:1.1rem 0 0; padding:0;
  display:grid; gap:.5rem;
  font-size:.94rem; color:var(--grey);
}
.ticks li{ position:relative; padding-left:1.6rem; }
.ticks li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 3px rgba(216,35,42,.16);
}

/* ---------- 4. Boutons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--bg); color:var(--fg);
  font-family:var(--font-d);
  font-size:.93rem; font-weight:600; letter-spacing:-.01em;
  padding:.95em 1.6em;
  border:1px solid transparent;
  border-radius:100px;
  cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; flex:none; transition:transform .3s var(--ease); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(11,11,12,.5); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(0); }

.btn--red{ --bg:var(--red); }
.btn--red:hover{ background:var(--red-hot); box-shadow:0 14px 30px -12px rgba(216,35,42,.7); }

.btn--dark{ --bg:var(--ink); }
.btn--dark:hover{ background:var(--ink-3); }

.btn--ghost{
  --bg:transparent; --fg:#fff;
  border-color:rgba(255,255,255,.4);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.btn--lg{ padding:1.1em 1.9em; font-size:1rem; }
.btn--block{ display:flex; width:100%; }

/* ---------- 5. Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:16px;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
/* Les deux fonds de l'en-tête sont portés par des pseudo-éléments :
   un backdrop-filter posé sur .site-header créerait un bloc conteneur
   et emprisonnerait le menu mobile (position:fixed) dans l'en-tête. */
.site-header::before,
.site-header::after{
  content:''; position:absolute; inset:0;
  pointer-events:none;
  transition:opacity .35s var(--ease);
}
.site-header::before{
  background:linear-gradient(to bottom, rgba(11,11,12,.55), rgba(11,11,12,0));
  opacity:1;
}
.site-header::after{
  background:rgba(11,11,12,.92);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 18px 40px -30px #000;
  opacity:0;
}
.site-header.is-stuck{ padding-block:10px; }
.site-header.is-stuck::before{ opacity:0; }
.site-header.is-stuck::after{ opacity:1; }

.site-header__inner{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:24px;
}

.brand{
  position:relative; z-index:3;   /* reste au-dessus du menu mobile plein ecran */
  display:flex; align-items:center; gap:11px; flex:none;
}
/* Le J de gauche est gris : il se détache seul sur l'en-tête sombre, pas
   besoin de pastille. L'ombre portée le décolle de la photo du héros, que
   l'en-tête laisse transparaître tant qu'on n'a pas défilé. */
.brand__mark{
  width:auto; height:46px;
  transition:height .35s var(--ease);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.is-stuck .brand__mark{ height:40px; }

/* Lettrage de marque — reprise typographique du logo horizontal :
   JESSE&JAMES en blanc, esperluette rouge, filet rouge, EXTERMINATION dessous. */
.brand__word{
  display:grid;
  line-height:1;
  color:#fff;
  transition:transform .35s var(--ease);
  transform-origin:left center;
}
.brand__name{
  font-family:var(--font-d); font-weight:800;
  font-size:1.42rem; letter-spacing:-.035em;
  text-transform:uppercase; white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.brand__name .amp{ color:var(--red); margin-inline:.04em; }
.brand__rule{
  height:3px; border-radius:2px;
  background:var(--red);
  margin:4px 0 4px;
  box-shadow:0 1px 6px rgba(0,0,0,.35);
}
/* Les lettres sont réparties d'un bord à l'autre : le mot mesure donc
   exactement la largeur du filet rouge, quelle que soit la police chargée. */
.brand__sub{
  display:flex;
  justify-content:space-between;
  font-family:var(--font-d); font-weight:600;
  font-size:.6rem; letter-spacing:0;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.brand__sub i{ font-style:normal; }
/* Léger retrait une fois l'en-tête compacté */
.is-stuck .brand__word{ transform:scale(.9); }

.nav{ margin-left:auto; }
.nav__list{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0;
}
.nav__list a{
  display:block;
  padding:.5em .9em;
  font-family:var(--font-d); font-weight:500; font-size:.92rem;
  color:rgba(255,255,255,.82);
  border-radius:100px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__list a:hover{ color:#fff; background:rgba(255,255,255,.1); }
.nav__list a.is-active{ color:#fff; background:rgba(216,35,42,.9); }
.nav__foot{ display:none; }

.site-header__actions{
  position:relative; z-index:3;   /* le bouton X doit rester cliquable */
  display:flex; align-items:center; gap:14px; flex:none;
}

.tel-link{ display:flex; align-items:center; gap:10px; color:#fff; }
.tel-link__icon{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  transition:background .25s var(--ease);
}
.tel-link__icon svg{ width:16px; height:16px; }
.tel-link:hover .tel-link__icon{ background:var(--red); border-color:var(--red); }
.tel-link__txt{
  display:flex; flex-direction:column; line-height:1.15;
  font-family:var(--font-d); font-weight:700; font-size:.94rem;
}
.tel-link__txt small{
  font-weight:500; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}

/* Lien vers l'autre langue : pastille « EN » / « FR » dans l'en-tête,
   mot complet dans le menu mobile. Sous 760 px, seul le menu le porte. */
.lang-link{
  display:grid; place-items:center; flex:none;
  min-width:38px; height:38px; padding:0 10px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.22);
  font-family:var(--font-d); font-weight:600; font-size:.78rem; letter-spacing:.08em;
  color:#fff;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.lang-link:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.nav__lang{
  font-family:var(--font-d); font-weight:600; font-size:.95rem;
  color:rgba(255,255,255,.75); padding:8px 16px;
}
.nav__lang:hover{ color:#fff; }
@media (max-width:760px){
  .site-header__actions .lang-link{ display:none; }
}

.burger{
  display:none;
  width:44px; height:44px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  cursor:pointer;
  padding:0;
  position:relative;
}
.burger span{
  position:absolute; left:50%; width:18px; height:2px;
  background:#fff; border-radius:2px;
  transform:translateX(-50%);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateX(-50%) translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateX(-50%) translateY(-6px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;
  min-height:min(960px, 100svh);
  display:flex; align-items:flex-end;
  padding-block:150px 56px;
  overflow:hidden;
  background:var(--ink);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%;
  object-fit:cover; object-position:70% 14%;
  animation:heroZoom 16s var(--ease) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.72) 34%, rgba(11,11,12,.15) 62%, rgba(11,11,12,.45) 100%),
    linear-gradient(to top, rgba(11,11,12,.85) 0%, rgba(11,11,12,0) 42%);
}

.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:flex-end;
  gap:48px;
}

.hero__copy{ max-width:680px; }
.hero__title{
  color:#fff;
  font-size:clamp(2.9rem, 6.6vw, 5.6rem);
  font-weight:700;
  letter-spacing:-.042em;
  margin-bottom:1.3rem;
  animation:riseIn .9s var(--ease) both;
}
.hero__title .hl{
  color:var(--red);
  position:relative; display:inline-block;
}
.hero__title .hl::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em;
  height:5px; background:var(--red);
  transform:scaleX(0); transform-origin:left;
  animation:swipe .8s var(--ease) .7s forwards;
}
@keyframes swipe{ to{ transform:scaleX(1); } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }

.hero__lead{
  color:rgba(255,255,255,.82);
  font-size:clamp(1rem, 1.3vw, 1.13rem);
  max-width:50ch;
  margin-bottom:2rem;
  animation:riseIn .9s var(--ease) .12s both;
}
.hero .eyebrow{ animation:riseIn .8s var(--ease) both; }
/* Le petit texte est dans le H1 pour que « exterminateur » et « Montréal »
   comptent comme titre. Il garde sa propre ligne, sa taille et son
   interlignage, et suit l'animation du titre au lieu d'avoir la sienne. */
.hero__title .eyebrow{ display:flex; width:fit-content; line-height:1.65; animation:none; }

.hero__actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-bottom:2.4rem;
  animation:riseIn .9s var(--ease) .22s both;
}

.hero__pills{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0; padding:0;
  animation:riseIn .9s var(--ease) .32s both;
}
.hero__pills li{
  font-family:var(--font-d); font-size:.79rem; font-weight:500;
  letter-spacing:.02em;
  color:rgba(255,255,255,.9);
  padding:.5em 1.05em;
  border:1px solid rgba(255,255,255,.26);
  border-radius:100px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
}


.hero__scroll{
  position:absolute; left:50%; bottom:22px;
  transform:translateX(-50%);
  width:26px; height:42px;
  border:1.5px solid rgba(255,255,255,.4);
  border-radius:100px;
  display:grid; justify-items:center; padding-top:8px;
  z-index:2;
}
.hero__scroll span{
  width:3px; height:8px; border-radius:2px; background:#fff;
  animation:scrollDot 1.8s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{ opacity:0; transform:translateY(0); } 40%{ opacity:1; } 100%{ opacity:0; transform:translateY(14px); } }

/* ---------- 7. Ticker ---------- */
.ticker{
  background:var(--red);
  color:#fff;
  overflow:hidden;
  padding-block:13px;
  border-block:1px solid rgba(0,0,0,.1);
}
.ticker__track{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.ticker__group{ display:flex; align-items:center; flex:none; }
.ticker__group span{
  font-family:var(--font-d); font-weight:600; font-size:.87rem;
  letter-spacing:.03em; white-space:nowrap;
}
.ticker__group i{ font-style:normal; opacity:.5; padding-inline:22px; font-size:.7rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 8. Services ---------- */
.services{ background:var(--bone); }
.services__grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(40px, 6vw, 90px);
  align-items:start;
}
.services__intro{ position:sticky; top:110px; }
/* Ce titre fait 94 caractères : au corps des autres h2 il occupait sept
   lignes dans une colonne de 470 px. */
.services__intro .h2{ margin-bottom:1.1rem; font-size:clamp(1.9rem, 3vw, 2.6rem); }
.services__intro .lead{ margin-bottom:1.8rem; }

.services__note{
  margin-top:2.2rem; padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.9rem; color:var(--grey);
  display:grid; gap:.2rem;
}
.services__note strong{ color:var(--ink); font-family:var(--font-d); }

/* Accordéon */
.accordion{ display:grid; }
.acc-item{ border-top:1px solid var(--line); }
.acc-item:last-child{ border-bottom:1px solid var(--line); }

.acc-item h3{ margin:0; font-size:inherit; letter-spacing:normal; }

.acc-head{
  width:100%;
  display:flex; align-items:center; gap:18px;
  background:none; border:0;
  padding:26px 4px;
  text-align:left;
  cursor:pointer;
  transition:padding-inline .3s var(--ease), color .25s var(--ease);
}
.acc-head:hover{ padding-inline:12px 4px; }
.acc-head:hover .acc-title{ color:var(--red-ink); }

.acc-num{
  font-family:var(--font-d); font-weight:600; font-size:.76rem;
  letter-spacing:.1em; color:var(--grey);
  flex:none; padding-top:.25em;
}
.acc-title{
  flex:1;
  font-family:var(--font-d); font-weight:600;
  font-size:clamp(1.12rem, 1.9vw, 1.5rem);
  letter-spacing:-.025em; line-height:1.2;
  transition:color .25s var(--ease);
}
.acc-plus{
  position:relative; flex:none;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease);
}
.acc-plus::before,.acc-plus::after{
  content:''; position:absolute; left:50%; top:50%;
  background:var(--ink);
  transform:translate(-50%,-50%);
  transition:opacity .3s var(--ease), background .3s var(--ease);
}
.acc-plus::before{ width:13px; height:1.8px; }
.acc-plus::after{ width:1.8px; height:13px; }

.acc-item.is-open .acc-plus{ background:var(--red); border-color:var(--red); transform:rotate(180deg); }
.acc-item.is-open .acc-plus::before{ background:#fff; }
.acc-item.is-open .acc-plus::after{ opacity:0; }
.acc-item.is-open .acc-title{ color:var(--red-ink); }

.acc-panel{
  overflow:hidden;
  height:0;
  transition:height .48s var(--ease);
}
.acc-panel__in{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:26px;
  padding:0 4px 30px;
}
.acc-panel__in--text{ display:block; max-width:62ch; padding-bottom:26px; }
.acc-panel__in--text p{ color:var(--grey); font-size:.97rem; }

.acc-media{
  margin:0;
  border-radius:var(--r);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--bone-2);
}
.acc-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.acc-item.is-open .acc-media img{ transform:scale(1.03); }
.acc-body p{ color:var(--grey); font-size:.97rem; }

/* ---------- 9. Approche ---------- */
.approach{ background:var(--white); }
.approach__head{ max-width:900px; margin-bottom:clamp(40px,5vw,64px); }
.approach__head .h2{ margin-bottom:1.2rem; }

.approach__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
}

.approach__photo{
  grid-column:span 5;
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
  min-height:400px;
  background:var(--bone-2);
}
.approach__photo img{
  width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0;
  transition:transform .9s var(--ease);
}
.approach__photo:hover img{ transform:scale(1.04); }
.approach__photo figcaption{
  position:absolute; left:16px; right:16px; bottom:16px;
  background:rgba(11,11,12,.72);
  backdrop-filter:blur(10px);
  color:#fff;
  font-size:.8rem;
  padding:.7em 1.1em;
  border-radius:100px;
  text-align:center;
}

.approach__card{
  grid-column:span 4;
  background:var(--ink);
  color:#fff;
  border-radius:var(--r-lg);
  padding:clamp(28px,3vw,38px);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.approach__card::after{
  content:''; position:absolute; right:-60px; bottom:-60px;
  width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle, rgba(216,35,42,.34), transparent 70%);
}
.approach__card h3{
  font-size:clamp(1.4rem,2.1vw,1.85rem);
  margin-bottom:1rem;
  position:relative;
}
.approach__card p{
  color:rgba(255,255,255,.72);
  font-size:.96rem;
  margin-bottom:2rem;
  position:relative;
}
.approach__card .btn{ align-self:flex-start; margin-top:auto; position:relative; }

.approach__stat{
  grid-column:span 3;
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,32px);
  display:flex; flex-direction:column;
}
.stat-big{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(3.4rem,5vw,4.6rem);
  line-height:.9; letter-spacing:-.05em;
  color:var(--ink);
  margin-bottom:auto;
  padding-bottom:1.6rem;
}
.approach__stat h4{ font-size:1.06rem; margin-bottom:.55rem; }
.approach__stat p{ font-size:.87rem; color:var(--grey); }

.approach__steps{
  grid-column:span 12;
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin-top:4px;
}
.approach__steps li{
  display:flex; gap:14px; align-items:flex-start;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.approach__steps li:hover{
  border-color:var(--red);
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.step-n{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--red); color:#fff;
  font-family:var(--font-d); font-weight:700; font-size:1.05rem;
}
.approach__steps div{ display:grid; gap:2px; }
.approach__steps strong{ font-family:var(--font-d); font-size:1rem; }
.approach__steps div span{ font-size:.85rem; color:var(--grey); line-height:1.5; }


/* ---------- 11. Bannière ---------- */
.banner{
  position:relative;
  min-height:min(680px,86vh);
  display:flex; align-items:center;
  padding-block:70px;
  overflow:hidden;
  background:var(--ink);
}
.banner__media{ position:absolute; inset:0; }
.banner__media img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.banner__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,11,12,.45), rgba(11,11,12,.05) 45%, rgba(11,11,12,.35));
}
.banner__inner{ position:relative; display:flex; justify-content:flex-end; }

.banner__card{
  width:min(430px,100%);
  background:var(--white);
  border-radius:var(--r-lg);
  padding:clamp(28px,3vw,40px);
  box-shadow:var(--shadow-lg);
}
.banner__card h2{
  font-size:clamp(1.6rem,2.6vw,2.15rem);
  margin-bottom:1rem;
}
.banner__card p{ color:var(--grey); font-size:.95rem; }
.banner__cta{
  margin-top:1.8rem; padding-top:1.6rem;
  border-top:1px solid var(--line);
  display:grid; gap:12px; justify-items:center;
}
.banner__cta > span{
  font-family:var(--font-d); font-weight:600; font-size:.95rem;
}
.banner__tel{ font-size:.83rem; color:var(--grey); }
.banner__tel:hover{ color:var(--red); }

/* ---------- 12. FAQ ---------- */
.faq{ background:var(--white); }
.faq__grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(40px,6vw,84px);
  align-items:start;
}
.faq__intro{ position:sticky; top:110px; }
.faq__intro .h2{ margin-bottom:1.1rem; }
.faq__intro .lead{ margin-bottom:1.8rem; }
.accordion--faq .acc-head{ padding-block:24px; }
.accordion--faq .acc-title{ font-size:clamp(1rem,1.5vw,1.16rem); font-weight:600; }
.accordion--faq .acc-plus{ width:34px; height:34px; }

/* ---------- 14. Reconnaître le problème ---------- */
.idf{ background:var(--bone); }
.idf__head{ margin-bottom:clamp(32px,4vw,52px); max-width:640px; }
.idf__head .h2{ margin-bottom:1.1rem; }

.idf__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
.idc{
  background:var(--white); padding:26px 24px 28px;
  display:flex; flex-direction:column;
  transition:background .3s var(--ease);
}
.idc:hover{ background:#FFFBFB; }

.idc__top{
  padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.idc__top h3{ font-size:1.1rem; letter-spacing:-.02em; }

/* Le signe observable — c'est l'information que le visiteur cherche */
.idc__sign{
  font-size:.95rem; color:var(--ink); line-height:1.6;
  padding-left:14px; border-left:2px solid var(--red);
  margin-bottom:16px;
}
.idc__do{ font-size:.87rem; color:var(--grey); margin-top:auto; }
.idc__do b{
  display:block; font-family:var(--font-d); font-size:.75rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--grey-2);
  margin-bottom:4px;
}

.idf__cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
  margin-top:26px; padding:24px 26px;
  background:var(--ink); color:#fff; border-radius:var(--r-lg);
}
.idf__cta div{ display:flex; flex-direction:column; }
.idf__cta strong{ font-family:var(--font-d); font-size:1.06rem; margin-bottom:3px; }
.idf__cta span{ font-size:.9rem; color:rgba(255,255,255,.66); max-width:52ch; }

/* ---------- 16. Contact ---------- */
/* ---------- Zones desservies ---------- */
/* Une page qui vend « exterminateur a Laval » doit prononcer le nom des
   villes dans son contenu, pas seulement dans la balise titre. */
/* Sur ce fond plus foncé, le gris courant tombe à 4,1:1 : on le fonce ici
   seulement, pour atteindre 5,2:1 sans toucher au reste du site. */
.zones{ background:var(--bone-2); --grey:#5E5E66; }
.zones__head{ max-width:760px; margin-bottom:clamp(30px,4vw,48px); }
.zones__head .h2{ margin-bottom:1.1rem; }

.zones__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.zones__col{ background:var(--bone); padding:24px 22px 26px; }
.zones__col h3{ font-family:var(--font-d); font-size:1.02rem; margin-bottom:.6rem; }
.zones__col h3::before{
  content:''; display:block; width:22px; height:2px;
  background:var(--red); margin-bottom:.75rem;
}
.zones__col p{ font-size:.9rem; color:var(--grey); line-height:1.6; }
.zones__note{ margin-top:1.4rem; font-size:.9rem; color:var(--grey); max-width:62ch; }
.zones__note a{ color:var(--ink); border-bottom:1px solid var(--red); }
.zones__note a:hover{ color:var(--red-ink); }


.contact{ background:var(--white); }
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,4vw,56px);
  align-items:stretch;
}
.contact__photo{
  margin:0; position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  min-height:520px;
  background:var(--ink);
}
.contact__photo img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 28%;
}
.contact__photo figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px;
  background:linear-gradient(to top, rgba(11,11,12,.9), transparent);
  color:#fff;
  display:grid; gap:2px;
}
.contact__photo figcaption strong{ font-family:var(--font-d); font-size:1.05rem; }
.contact__photo figcaption span{ font-size:.82rem; color:rgba(255,255,255,.7); font-style:italic; }

.contact__panel{
  background:var(--bone);
  border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,46px);
}
.contact__panel .h2{ font-size:clamp(1.8rem,3vw,2.5rem); margin-bottom:.9rem; }
.contact__panel .lead{ margin-bottom:2rem; font-size:.97rem; }

/* Formulaire */
.form{ display:grid; gap:16px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:7px; }
.field > label:not(.dropzone){
  font-family:var(--font-d); font-weight:600; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--grey);
}
.field__lbl{
  font-family:var(--font-d); font-weight:600; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--grey);
}
/* Pas d'opacité : à .7, « (facultatif) » tombait à 2,6:1, illisible. */
.field__lbl em{ font-style:normal; letter-spacing:.04em; }

/* ---- Zone de dépôt de photos ---- */

.dropzone{
  position:relative;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  background:var(--white);
  border:1.5px dashed rgba(11,11,12,.22);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease);
}
/* Le champ fichier lui-même couvre la zone, invisible mais bien présent :
   c'est lui que le doigt touche, quel que soit le navigateur. */
.dropzone input[type="file"]{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; padding:0; border:0;
  opacity:0;
  cursor:pointer;
  font-size:0;            /* évite que Safari dimensionne le bouton natif */
  z-index:2;
}
.dropzone:hover{ border-color:var(--red); background:#fff; }
.dropzone.is-drag{ border-color:var(--red); background:rgba(216,35,42,.05); transform:scale(1.01); }
/* pendant la réduction des images */
.dropzone.is-busy{ opacity:.6; pointer-events:none; }
.dropzone.is-busy .dropzone__icon{
  background:var(--red); color:#fff;
  animation:pulse 1s ease-in-out infinite;
}
@keyframes pulse{ 50%{ transform:scale(.88); opacity:.6; } }
/* le focus clavier vit sur l'input masqué : on le reporte visuellement ici */
.field:focus-within .dropzone{ outline:3px solid var(--red); outline-offset:3px; }

.dropzone__icon{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--bone);
  color:var(--red);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.dropzone__icon svg{ width:21px; height:21px; }
.dropzone:hover .dropzone__icon,.dropzone.is-drag .dropzone__icon{ background:var(--red); color:#fff; }

.dropzone__txt{ display:grid; gap:3px; min-width:0; }
.dropzone__txt strong{ font-family:var(--font-d); font-size:.95rem; }
.dropzone__txt span{ font-size:.82rem; color:var(--grey); line-height:1.45; }

/* ---- Vignettes ---- */
.thumbs{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
}
.thumbs:not(:empty){ margin-top:12px; }

.thumb{
  display:flex; align-items:center; gap:12px;
  padding:8px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  animation:thumbIn .35s var(--ease) both;
}
@keyframes thumbIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.thumb__img{
  width:54px; height:54px; flex:none;
  object-fit:cover;
  border-radius:7px;
  background:var(--bone-2);
}
.thumb__meta{ display:grid; gap:2px; min-width:0; flex:1; }
.thumb__name{
  font-size:.86rem; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.thumb__size{ font-size:.76rem; color:var(--grey); }
.thumb__size b{ color:#0E7A42; font-weight:600; }

.thumb__del{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  background:transparent;
  border:1px solid var(--line);
  border-radius:50%;
  cursor:pointer;
  color:var(--grey);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.thumb__del svg{ width:14px; height:14px; }
.thumb__del:hover{ background:var(--red); border-color:var(--red); color:#fff; }

.field input,.field select,.field textarea{
  font-family:var(--font-b); font-size:.95rem;
  width:100%;
  padding:.9em 1.1em;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E76' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1em center; background-size:15px;
  padding-right:2.8em;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--grey-2); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(216,35,42,.14);
}
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:var(--red); }
.field__err{
  font-size:.78rem; color:var(--red-ink); min-height:0;
  display:none;
}
.field__err.is-shown{ display:block; }

.check{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.87rem; color:var(--grey);
  cursor:pointer;
  margin-top:2px;
}
.check input{
  width:18px; height:18px; flex:none; margin-top:2px;
  accent-color:var(--red);
  cursor:pointer;
}

.form__status{
  margin:0; font-size:.88rem; font-weight:500;
  padding:0; min-height:0;
  transition:padding .2s var(--ease);
}
.form__status.is-ok{
  color:#0E7A42; background:rgba(14,122,66,.08);
  padding:.8em 1.1em; border-radius:var(--r-sm);
}
.form__status.is-err{ color:var(--red-ink); }
.form__status.is-warn{
  color:#7A4A00; background:rgba(180,110,0,.1);
  padding:.85em 1.15em; border-radius:var(--r-sm);
  border:1px solid rgba(180,110,0,.25);
  line-height:1.55;
}
.form__status.is-warn a{ color:var(--red-deep); font-weight:600; text-decoration:underline; }

.contact__direct{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-top:2rem; padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.contact__direct a{ display:grid; gap:2px; min-width:0; }
.contact__direct strong{
  font-family:var(--font-d); font-size:.95rem;
  overflow-wrap:anywhere;
  transition:color .2s var(--ease);
}
.contact__direct a:hover strong{ color:var(--red); }
.contact__direct span{ font-size:.76rem; color:var(--grey); }

/* ---------- 17. Footer ---------- */
.footer{
  background:var(--ink);
  color:#fff;
  padding-top:clamp(56px,6vw,86px);
  overflow:hidden;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.7fr 1.1fr .9fr .9fr;
  gap:34px;
  padding-bottom:clamp(36px,4vw,54px);
}
.brand--footer{ margin-bottom:18px; }
.brand--footer .brand__mark{ height:76px; }
.footer__brand p{
  color:rgba(255,255,255,.6);
  font-size:.88rem;
  max-width:34ch;
}

/* h3 et non h4 : le titre qui précède est un h2, et sauter un niveau
   désoriente les lecteurs d'écran qui naviguent par titres. */
.footer__col h3{
  font-size:.74rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
  margin-bottom:16px;
}
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer__col a,.footer__col address{
  color:rgba(255,255,255,.72);
  font-size:.89rem; font-style:normal;
  transition:color .2s var(--ease);
}
.footer__col a:hover{ color:var(--red-hot); }
.footer__col address{ margin-bottom:14px; line-height:1.6; }
.footer__link{ display:block; margin-bottom:8px; overflow-wrap:anywhere; }
.footer__link--strong{ font-family:var(--font-d); font-weight:700; font-size:1.05rem; color:#fff; }


.footer__wordmark{
  font-family:var(--font-d); font-weight:800;
  /* La phrase fait 48 caracteres contre 13 pour l'ancien mot : mesure faite,
     elle occupe 2522 px a 100 px de corps, donc 3,8vw la fait tenir sur une
     ligne de 320 px a 2560 px sans jamais deborder (white-space:nowrap).
     3,35vw et non 3,8 : l'interlettrage desserre a -.02em elargit le texte. */
  font-size:clamp(.8rem,3.35vw,6rem);
  line-height:1;
  letter-spacing:-.02em;
  text-align:center;
  color:rgba(255,255,255,.055);
  user-select:none;
  margin-top:10px;
  white-space:nowrap;
}
/* Filigrane purement décoratif, donc exempté des règles de contraste. La
   phrase vit dans l'attribut data-mot et s'affiche ici : écrite dans le
   HTML, elle était lue comme du texte et signalée à 1,1:1 par PageSpeed. */
.footer__wordmark::before{ content:attr(data-mot); }
/* Sous 480 px, tenir sur une ligne imposerait un corps de 10 px : illisible.
   On laisse la phrase passer sur deux lignes et on garde une taille lisible. */
@media (max-width:480px){
  .footer__wordmark{
    white-space:normal;
    font-size:1.3rem;
    line-height:1.2;
    letter-spacing:-.01em;
  }
}

.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap;
  padding-block:22px;
  border-top:1px solid var(--line-light);
  margin-top:clamp(10px,2vw,24px);
}
.footer__bottom p{ margin:0; font-size:.8rem; color:rgba(255,255,255,.45); }
.footer__tagline{ font-style:italic; }

/* ---------- 18. Barre d'appel mobile ---------- */
.callbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:9px;
  background:rgba(11,11,12,.94);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.1);
}
.callbar a{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:.5em;
  padding:.9em 1em;
  border-radius:100px;
  font-family:var(--font-d); font-weight:600; font-size:.9rem;
}
.callbar svg{ width:1.05em; height:1.05em; }
.callbar__tel{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); }
.callbar__quote{ background:var(--red); color:#fff; }

/* ---------- 18b. Témoins (Loi 25) ---------- */
/* Bandeau créé par js/temoins.js tant que le visiteur n'a pas choisi.
   Au-dessus de la barre d'appel (90), sous l'en-tête (100) : le menu
   mobile ouvert le recouvre. */
.temoins{
  position:fixed; left:16px; bottom:16px; z-index:95;
  width:min(440px, calc(100% - 32px));
  padding:20px 20px 18px;
  background:var(--ink); color:#fff;
  border:1px solid var(--line-light);
  border-radius:var(--r-lg);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.6);
  animation:temoinsIn .45s var(--ease) both;
}
@keyframes temoinsIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.temoins__titre{ margin:0 0 .45rem; font-family:var(--font-d); font-weight:700; font-size:1rem; }
.temoins__txt{ margin:0; font-size:.86rem; line-height:1.55; color:rgba(255,255,255,.72); }
.temoins__txt a{ color:#fff; border-bottom:1px solid var(--red); }
.temoins__txt a:hover{ color:var(--red-hot); }
/* Refuser pèse autant qu'accepter : même taille, même rangée. */
.temoins__actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.temoins__actions .btn{ padding:.85em 1em; }

/* Liens légaux du pied de page ; « Gérer les témoins » reste caché sans JS */
.footer__legal{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; }
.footer__legal a,.footer__temoins{
  font:inherit; color:rgba(255,255,255,.6);
  background:none; border:0; padding:0; cursor:pointer;
  transition:color .2s var(--ease);
}
.footer__legal a:hover,.footer__temoins:hover{ color:#fff; }

.form__legal{ margin:0; font-size:.8rem; color:var(--grey); }
.form__legal a{ color:var(--ink); border-bottom:1px solid var(--line); }
.form__legal a:hover{ border-color:var(--red); }

@media (max-width:1024px){
  .footer__legal a,.footer__temoins{ padding-block:10px; }
}
@media (max-width:760px){
  .temoins{
    left:10px; right:10px; width:auto;
    bottom:calc(10px + env(safe-area-inset-bottom));
    padding:18px 16px 16px;
  }
}

/* ---------- 19. Révélation au défilement ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--d, 0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ═══════════════ 20. RESPONSIVE ═══════════════ */

@media (max-width:1180px){
  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .approach__photo{ grid-column:span 6; }
  .approach__card{ grid-column:span 6; }
  .approach__stat{ grid-column:span 12; }
  .stat-big{ padding-bottom:.8rem; }
}

/* ---------- Bascule de l'en-tête ---------- */
/* La barre complète réclame 1280 px sur une page service et 1134 px sur
   l'accueil : marque, entrées de menu insécables, téléphone et bouton. Sous
   ce seuil rien ne se comprimait, et le bouton rouge sortait de l'écran,
   escamoté sans bruit par overflow-x:hidden. Le menu compact prend donc le
   relais dès 1279 px. */
@media (max-width:1279px){
  /* Nav mobile */
  .nav{
    position:fixed; inset:0;
    background:var(--ink);
    display:flex; flex-direction:column; justify-content:center;
    padding:100px 26px 40px;
    margin:0;
    transform:translateY(-100%);
    /* masqué au clavier tant qu'il est fermé */
    visibility:hidden;
    transition:transform .5s var(--ease), visibility 0s linear .5s;
    overflow-y:auto;
  }
  .nav.is-open{
    transform:none;
    visibility:visible;
    transition:transform .5s var(--ease), visibility 0s;
  }
  .nav__list{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav__list a{
    font-size:1.7rem; font-weight:600; letter-spacing:-.03em;
    padding:.42em .2em;
    border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav__list a:hover,.nav__list a.is-active{ background:none; color:var(--red); }
  .nav__foot{ display:grid; gap:14px; margin-top:32px; justify-items:center; }
  .nav__tel{
    font-family:var(--font-d); font-weight:700; font-size:1.2rem; color:#fff;
  }

  .burger{ display:block; }
  /* Masqué à l'écran seulement : avec display:none, le lien d'appel n'avait
     plus de nom et un lecteur d'écran annonçait « lien », sans plus. */
  .tel-link__txt{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
    white-space:nowrap; border:0;
  }
  .site-header__actions .btn{ display:none; }
  .nav__tel{ display:inline-block; padding:10px 16px; }
  /* Sur bureau, c'est .nav{margin-left:auto} qui pousse les actions à
     droite. Superposé, le menu sort du flux : sans cette ligne, le
     téléphone et le bouton se collaient au logo. */
  .site-header__actions{ margin-left:auto; }
}
/* Entre 1025 et 1279 px, la barre a largement la place du bouton rouge :
   marque, icône téléphone, bouton et burger tiennent en 540 px. */
@media (min-width:1025px) and (max-width:1279px){
  .site-header__actions .btn{ display:inline-flex; }
}

@media (max-width:1024px){
  :root{ --gut:22px; }


  .hero{ padding-block:130px 44px; min-height:auto; }
  .hero__inner{ grid-template-columns:1fr; gap:34px; }
  .hero__media img{ object-position:64% center; }

  .zones__grid{ grid-template-columns:1fr 1fr; }
  .services__grid,.faq__grid{ grid-template-columns:1fr; gap:34px; }
  .services__intro,.faq__intro{ position:static; }
  .services__intro .h2 br{ display:none; }

  .idf__grid{ grid-template-columns:1fr 1fr; }

  .contact__grid{ grid-template-columns:1fr; }
  .contact__photo{ min-height:380px; }

  .approach__steps{ grid-template-columns:1fr 1fr; }

  .footer__grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .footer__brand{ grid-column:span 2; }
}

@media (max-width:760px){
  body{ font-size:16px; padding-bottom:70px; }
  :root{ --sect:clamp(58px,10vw,80px); }

  .hero{ padding-block:118px 40px; }
  /* Sur mobile le texte passe sous le sujet : voile vertical, pas latéral */
  .hero__scrim{
    background:
      linear-gradient(to top,
        rgba(11,11,12,.96) 0%,
        rgba(11,11,12,.9)  26%,
        rgba(11,11,12,.6)  52%,
        rgba(11,11,12,.3)  74%,
        rgba(11,11,12,.6)  100%);
  }
  .hero__media img{ object-position:62% 12%; }
  .hero__title{ font-size:clamp(2.6rem,10.5vw,3.6rem); }
  .hero__actions .btn{ flex:1; min-width:180px; }
  .zones__grid{ grid-template-columns:1fr; }
  .hero__scroll{ display:none; }

  .acc-head{ gap:12px; padding-block:20px; }
  .acc-num{ display:none; }
  .acc-panel__in{ grid-template-columns:1fr; gap:18px; }
  .acc-media{ aspect-ratio:16/10; }

  .approach__photo,.approach__card,.approach__stat{ grid-column:span 12; }
  .approach__photo{ min-height:300px; }
  .approach__steps{ grid-template-columns:1fr; }

  .banner{ min-height:auto; padding-block:56px; }
  .banner__inner{ justify-content:center; }
  .banner__media img{ object-position:62% center; }

  .idf__grid{ grid-template-columns:1fr; }
  .idf__cta{ flex-direction:column; align-items:flex-start; }
  .idf__cta .btn{ width:100%; }


  .form__row{ grid-template-columns:1fr; }
  .contact__direct{ grid-template-columns:1fr; }

  .footer__grid{ grid-template-columns:1fr; }
  .footer__brand{ grid-column:span 1; }
  .footer__bottom{ justify-content:center; text-align:center; }

  .callbar{ display:flex; }

}

@media (max-width:420px){
  /* Le lettrage est désormais toute la marque : on le réduit au lieu de le masquer */
  .brand__name{ font-size:1.16rem; }
  .brand__sub{ font-size:.52rem; }
  .brand__rule{ height:2.5px; margin:3px 0; }
  .hero__pills li{ font-size:.74rem; padding:.45em .9em; }
}

/* ---------- 21. Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    /* Sans ces deux lignes, l'animation dure zero mais ATTEND toujours son
       delai : riseIn est en fill-mode « both », donc le titre, le chapeau et
       les boutons du heros restent invisibles 120 a 320 ms puis apparaissent
       d'un coup. On supprime l'attente, pas seulement le mouvement. */
    animation-delay:.001ms !important;
    transition-delay:0s !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__media img{ transform:none; }
  .hero__title .hl::after{ transform:scaleX(1); }
}

/* ---------- 22. Impression ---------- */
@media print{
  .site-header,.callbar,.ticker,.hero__scroll{ display:none !important; }
  body{ background:#fff; color:#000; padding:0; }
  .acc-panel{ height:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- Cibles tactiles ---------- */
/* Sur écran tactile, un lien de 17 px de haut se rate une fois sur trois.
   On élargit la zone cliquable sans toucher au rythme visuel : le padding
   remplace la marge entre les éléments. */
@media (max-width:1024px){
  .footer__col ul{ gap:0; }
  .footer__col ul a{ display:block; padding-block:11px; }

  .footer__link{ display:block; padding-block:10px; margin-bottom:0; }
  .footer__link--strong{ margin-top:6px !important; }

  .banner__tel{ display:inline-block; padding:11px 4px; }



  /* Le label entier est cliquable, mais la case elle-même mérite d'être
     plus facile à viser au doigt. */
  .check{ padding-block:7px; }
  .check input{ width:22px; height:22px; }

  /* Le bouton de retrait d'une photo faisait 34 px : sous le seuil tactile. */
  .thumb__del{ width:44px; height:44px; }

}