/* =========================================================================
   Ecolavage Clermont — CSS du site. Ecrit UNE SEULE FOIS a la page d'accueil.
   Recopie tel quel dans chaque page. Jamais reecrit.
   ========================================================================= */

/* --- Bloc sorti par scripts/identite_visuelle.py, colle tel quel --------- */
:root {
  --primary: #147e9f;
  --primary-dark: #0d5368;
  --soft: #f3fafc;
  --border: #dce7ea;
  --text: #182225;
  --muted: #5e7278;
  --background: #ffffff;
  --radius: 16px;
  --font: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-titre: var(--font);
  --corps-mobile: 16px;
  --titre-graisse: 600;
  --titre-tracking: -0.01em;
  --container: 1240px;
}

/* --- Tokens neutres derives. Aucune couleur ne vit hors de ces deux blocs.
       Les rgba() reprennent le RGB de --primary (20, 126, 159) et de --text (24, 34, 37). */
:root {
  --blanc: #ffffff;
  --sur-primary: #ffffff;
  --teinte-05: rgba(20, 126, 159, .05);
  --teinte-08: rgba(20, 126, 159, .08);
  --teinte-14: rgba(20, 126, 159, .14);
  --teinte-24: rgba(20, 126, 159, .24);
  --teinte-40: rgba(20, 126, 159, .40);
  --voile-08: rgba(255, 255, 255, .08);
  --voile-12: rgba(255, 255, 255, .12);
  --voile-20: rgba(255, 255, 255, .20);
  --voile-72: rgba(255, 255, 255, .72);
  --voile-86: rgba(255, 255, 255, .86);
  --ombre-s: 0 8px 28px rgba(24, 34, 37, .055);
  --ombre-m: 0 16px 44px rgba(24, 34, 37, .10);
  --ombre-l: 0 24px 60px rgba(24, 34, 37, .16);
  --radius-s: 14px;
  --pas: clamp(64px, 8vw, 100px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65;
  color: var(--text); background: var(--background); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; }
body.menu-ouvert { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

.box { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.sec { padding: var(--pas) 0; }
.sec--soft { background: var(--soft); }
.sec-tete { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.sec-tete--gauche { margin-left: 0; text-align: left; }
.eyebrow { display: inline-block; margin-bottom: 13px; color: var(--accent, var(--primary));
  font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

h1, h2, h3 { margin: 0; font-weight: var(--titre-graisse); letter-spacing: var(--titre-tracking);
  line-height: 1.1; text-wrap: balance; }
h1, h2, h3, .titre { font-family: var(--font-titre); }
.sec-tete h2, .titre { color: var(--titre-couleur, var(--primary-dark)); font-size: clamp(29px, 4vw, 45px);
  letter-spacing: -1.4px; }
.sec-tete p { max-width: 690px; margin: 18px auto 0; color: var(--muted); font-size: 16px;
  line-height: 1.78; }
.sec-tete--gauche p { margin-left: 0; }
.mesure { max-width: 68ch; margin-inline: auto; }
/* --- Liens de contenu -----------------------------------------------------
   Sur une palette ou --primary est proche de --text, la seule couleur ne
   suffit pas a signaler un lien : on ajoute un souligne franc. */
.mesure a, .carte p a, .faq__r a, .points a { color: var(--primary);
  font-weight: 620; text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 3px; text-decoration-color: var(--teinte-40);
  transition: text-decoration-color .18s ease; }
.mesure a:hover, .carte p a:hover, .faq__r a:hover, .points a:hover {
  text-decoration-color: var(--primary); }
.carte--lien { transition: border-color .18s ease, transform .18s ease; }
.carte--lien:hover { border-color: var(--primary); transform: translateY(-2px); }
.carte__l { color: var(--primary); text-decoration: none; }
.carte__l::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.carte__go { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  color: var(--primary); font-size: 14px; font-weight: 680;
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 4px; text-decoration-color: var(--teinte-40); }
.carte__go svg { width: 15px; height: 15px; transition: transform .18s ease; }
.carte--lien:hover .carte__go { text-decoration-color: var(--primary); }
.carte--lien:hover .carte__go svg { transform: translateX(3px); }
.carte--lien { position: relative; }
.carte--lien:hover .carte__l { text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.mesure p { margin: 0 0 1.15em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 14px 22px; border: 1px solid transparent;
  border-radius: var(--radius-s); font-size: 15px; font-weight: 750; line-height: 1.2;
  cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease,
  border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn--plein { background: var(--primary); color: var(--sur-primary);
  box-shadow: 0 10px 26px var(--teinte-24); }
.btn--plein:hover { background: var(--primary-dark); }
.btn--ligne { background: var(--ocre, var(--background));
  color: var(--titre-couleur, var(--primary-dark)); border-color: var(--ocre, var(--border)); }
.btn--ligne:hover { background: var(--soft); border-color: var(--primary); }
.btn--blanc { background: var(--blanc); color: var(--primary-dark); }
.btn--blanc:hover { background: var(--soft); }
.btn--voile { background: var(--voile-08); color: var(--blanc); border-color: var(--voile-20); }
.btn--voile:hover { background: var(--voile-12); }

.entete { position: sticky; top: 0; z-index: 9999; width: 100%; background: var(--voile-clair, var(--voile-86));
  border-bottom: 1px solid var(--border); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); transition: box-shadow .2s ease; }
.entete.collee { box-shadow: var(--ombre-s); }
.entete__in { min-height: 74px; display: flex; align-items: center; justify-content: space-between;
  gap: 26px; }
.logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 21px;
  font-weight: 850; letter-spacing: -.6px; color: var(--titre-couleur, var(--primary-dark)); }
.logo__mark { width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: calc(var(--radius) - 1px);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--blanc); font-size: 15px; font-weight: 900; letter-spacing: 0; }
.logo strong { color: var(--primary); }
.logo--long { font-size: 18px; }
.logo__img { display: block; height: 44px; width: auto; max-width: 220px; }
.pied__img { display: block; height: 46px; width: auto; max-width: 230px; }
@media (max-width: 520px) { .logo__img { height: 36px; max-width: 170px; } }
@media (max-width: 400px) { .logo--long { font-size: 15px; } }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__lien, .drop__btn { min-height: 44px; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; padding: 10px 13px; border: 0; background: transparent;
  border-radius: 9px; color: var(--text); font-size: 14px; font-weight: 680; cursor: pointer;
  transition: .2s ease; }
.nav__lien:hover, .drop__btn:hover { color: var(--primary); background: var(--soft); }
.drop { position: relative; }
.drop__btn svg { width: 15px; transition: transform .2s ease; }
.drop.ouvert .drop__btn svg { transform: rotate(180deg); }
.drop__menu { position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-5px); width: 300px; padding: 10px;
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--ombre-m); opacity: 0; visibility: hidden; pointer-events: none;
  transition: .18s ease; }
.drop:hover .drop__menu, .drop:focus-within .drop__menu, .drop.ouvert .drop__menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.drop__menu a { display: block; padding: 11px 12px; border-radius: 9px; font-size: 14px;
  font-weight: 620; color: var(--text); transition: .15s ease; }
.drop__menu a:hover { color: var(--primary); background: var(--soft); }
.entete__actions { display: flex; align-items: center; gap: 10px; }
.tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--titre-couleur, var(--primary-dark)); font-size: 14px; font-weight: 760; white-space: nowrap; }
.tel svg { width: 18px; height: 18px; color: var(--primary); }
.burger { display: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--border);
  border-radius: 11px; background: var(--background); align-items: center; justify-content: center;
  cursor: pointer; }
.burger__b { position: relative; width: 21px; height: 16px; }
.burger__b span { position: absolute; left: 0; width: 21px; height: 2px; border-radius: 20px;
  background: var(--primary-dark); transition: .22s ease; }
.burger__b span:nth-child(1) { top: 0; }
.burger__b span:nth-child(2) { top: 7px; }
.burger__b span:nth-child(3) { top: 14px; }
.burger[aria-expanded="true"] .burger__b span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__b span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__b span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
.mobile { display: none; }

/* --- Hero : texte a gauche, carte d'action a droite (sans formulaire) --- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 76px 0 68px;
  background: radial-gradient(circle at 88% 10%, var(--teinte-14), transparent 36%),
    radial-gradient(circle at 4% 95%, var(--teinte-08), transparent 32%),
    linear-gradient(180deg, var(--soft) 0%, var(--background) 100%); }
.hero::before { content: ""; position: absolute; width: 470px; height: 470px; border-radius: 50%;
  right: -250px; top: -230px; border: 70px solid var(--teinte-05); pointer-events: none; }
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 56px; align-items: center; }
.pastille { display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  margin-bottom: 20px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 100px;
  background: var(--voile-clair, var(--voile-86)); color: var(--primary); font-size: 13px; font-weight: 760;
  line-height: 1.3; }
.pastille i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
  flex: 0 0 auto; }
.hero h1 { margin: 0 0 22px; color: var(--titre-couleur, var(--primary-dark)); font-size: clamp(35px, 4.6vw, 58px);
  line-height: 1.05; letter-spacing: -2px; overflow-wrap: anywhere; }
.hero h1 span { color: var(--primary); }
.hero-accroche { max-width: 56ch; color: var(--muted); font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.75; }
.hero__trust { display: grid; gap: 12px; margin-top: 28px; }
.trust { display: inline-flex; align-items: center; gap: 10px; color: var(--text);
  font-size: 14px; font-weight: 650; }
.trust i { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 50%; background: var(--teinte-08); color: var(--primary); }
.trust i svg { width: 15px; height: 15px; }

.action { padding: 32px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 10px);
  background: var(--background); box-shadow: var(--ombre-l); }
.action__titre { margin: 0 0 8px; color: var(--titre-couleur, var(--primary-dark)); font-size: 22px;
  font-weight: var(--titre-graisse); letter-spacing: var(--titre-tracking);
  line-height: 1.15; }
.action > p:not(.action__titre) { margin: 0 0 22px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.action__cta { display: grid; gap: 10px; }
.action__cta .btn { width: 100%; }
.action__pied { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--border); }
.action__pied div { display: flex; align-items: flex-start; gap: 10px; color: var(--muted);
  font-size: 13.5px; line-height: 1.5; }
.action__pied svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px;
  color: var(--primary); }

@media (max-width: 1050px) { .hero__in { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 768px) { .hero { padding: 54px 0 50px; }
  .hero h1 { font-size: clamp(33px, 9.4vw, 46px); letter-spacing: -1.5px; }
  .action { padding: 26px; } }
@media (max-width: 520px) { .hero { padding: 46px 0 42px; } .action { padding: 22px; } }

.reass { padding: 38px 0; border-bottom: 1px solid var(--border); background: var(--background); }
.reass__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reass__i { display: flex; align-items: center; gap: 13px; padding: 16px; border-radius: 15px; }
.ibox { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: var(--radius); background: var(--argile, var(--teinte-08));
  color: var(--sur-argile, var(--primary)); }
.ibox svg { width: 21px; height: 21px; }
.reass__i strong { display: block; margin-bottom: 3px; color: var(--titre-couleur, var(--primary-dark)); font-size: 14px; }
.reass__i span:not(.ibox) { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.g { display: grid; gap: 20px; }
.g--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carte { position: relative; min-width: 0; padding: 27px; border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px); background: var(--background); box-shadow: var(--ombre-s);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.carte:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--ombre-m); }
.carte__i { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 20px;
  border-radius: var(--radius); background: var(--argile, var(--teinte-08));
  color: var(--sur-argile, var(--primary)); }
.carte__i svg { width: 22px; height: 22px; }
.carte h3 { margin-bottom: 11px; color: var(--titre-couleur, var(--primary-dark)); font-size: 20px; line-height: 1.25; }
.carte p { margin: 0 0 20px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.carte p:last-child { margin-bottom: 0; }
.lien { display: inline-flex; align-items: center; gap: 7px; color: var(--primary);
  font-size: 14px; font-weight: 760; }
.lien svg { width: 17px; height: 17px; transition: transform .2s ease; }
.lien:hover svg { transform: translateX(4px); }

.duo { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 68px; }
.duo p { margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.points { display: grid; gap: 13px; margin-top: 28px;
  max-width: 820px; margin-inline: auto; }
.duo .points, .sec-tete--gauche ~ .points { max-width: none; margin-inline: 0; }
.point { display: flex; align-items: flex-start; gap: 11px; color: var(--text); font-size: 14.5px;
  line-height: 1.6; }
.check { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto;
  margin-top: 2px; border-radius: 50%; background: var(--accent-fond, var(--teinte-08));
  color: var(--accent, var(--primary)); }
.check svg { width: 13px; }

.panneau { position: relative; min-height: 440px; padding: 32px; overflow: hidden;
  border-radius: calc(var(--radius) + 14px);
  background: radial-gradient(circle at 80% 14%, var(--teinte-24), transparent 32%),
    linear-gradient(145deg, var(--text), var(--primary)); box-shadow: var(--ombre-l); }
.panneau::before, .panneau::after { content: ""; position: absolute; border-radius: 50%;
  border: 1px solid var(--voile-12); }
.panneau::before { width: 330px; height: 330px; right: -110px; top: -90px; }
.panneau::after { width: 210px; height: 210px; left: -90px; bottom: -80px; }
.panneau__badge { position: relative; z-index: 1; display: inline-flex; padding: 7px 12px;
  border: 1px solid var(--voile-20); border-radius: 100px; background: var(--voile-12);
  color: var(--voile-86); font-size: 12px; font-weight: 750; }
.panneau__gros { position: relative; z-index: 1; max-width: 440px; margin-top: 34px;
  color: var(--blanc); font-size: clamp(29px, 4vw, 46px); line-height: 1.06;
  letter-spacing: -1.8px; font-weight: 850; }
.panneau__mini { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.mini { min-width: 0; padding: 17px; border: 1px solid var(--voile-20);
  border-radius: var(--radius); background: var(--voile-12); backdrop-filter: blur(9px);
  color: var(--blanc); }
.mini strong { display: block; margin-bottom: 4px; font-size: 15px; }
.mini span { color: var(--voile-72); font-size: 12.5px; line-height: 1.45; }

.parcours { min-width: 0; padding: 36px; border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 10px); background: var(--background); }
.parcours--sombre { border-color: transparent;
  background: linear-gradient(135deg, var(--text), var(--primary-dark)); }
.parcours__lab { display: inline-flex; margin-bottom: 18px; padding: 7px 12px;
  border-radius: 100px; color: var(--primary); background: var(--teinte-08); font-size: 11px;
  font-weight: 820; text-transform: uppercase; letter-spacing: .05em; }
.parcours h3 { margin-bottom: 12px; color: var(--titre-couleur, var(--primary-dark)); font-size: 26px; line-height: 1.2; }
.parcours p { margin: 0 0 22px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.parcours--sombre h3 { color: var(--blanc); }
.parcours--sombre p { color: var(--voile-72); }
.parcours--sombre .parcours__lab { color: var(--blanc); background: var(--voile-12); }

.etapes { grid-template-columns: repeat(4, 1fr); }
.etape { position: relative; min-width: 0; padding: 27px 22px; border-left: 1px solid var(--border); }
.etape__n { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 18px;
  border-radius: var(--radius); background: var(--primary); color: var(--sur-primary); font-size: 13px;
  font-weight: 850; }
.etape h3 { margin-bottom: 8px; color: var(--titre-couleur, var(--primary-dark)); font-size: 17px; }
.etape p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.68; }

.zone { display: grid; grid-template-columns: .88fr 1.12fr; gap: 58px; align-items: center; }
.zone p { margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.villes { display: flex; flex-wrap: wrap; gap: 9px; }
.ville { padding: 10px 14px; border-radius: 100px; border: 1px solid var(--border);
  background: var(--background); color: var(--text); font-size: 13px; font-weight: 650; }

.faq { max-width: 860px; margin: 0 auto; }
.faq__i { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 0; border: 0; background: transparent; color: var(--titre-couleur, var(--primary-dark));
  text-align: left; font-size: 16px; font-weight: 760; line-height: 1.45; cursor: pointer; }
.faq-q > span:first-child { min-width: 0; }
.plus { position: relative; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  background: var(--teinte-08); }
.plus::before, .plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px;
  height: 2px; border-radius: 3px; background: var(--primary); transform: translate(-50%, -50%); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s ease; }
.faq__i.ouvert .plus::after { transform: translate(-50%, -50%) rotate(0); }
.faq__r { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq__r > div { padding: 0 44px 22px 0; color: var(--muted); font-size: 14.5px; line-height: 1.78; }

.final { position: relative; overflow: hidden; padding: 88px 0;
  background: radial-gradient(circle at 80% 8%, var(--teinte-24), transparent 32%),
    linear-gradient(135deg, var(--surface-sombre, var(--text)), var(--primary-dark)); }
.final::after { content: ""; position: absolute; width: 300px; height: 300px; right: -100px;
  bottom: -190px; border-radius: 50%; border: 55px solid var(--voile-08); }
.final__in { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; text-align: center; }
.final__in h2 { color: var(--blanc); font-size: clamp(30px, 5vw, 46px); line-height: 1.1;
  letter-spacing: -1.5px; }
.final__in p { max-width: 630px; margin: 17px auto 0; color: var(--voile-72); font-size: 16px;
  line-height: 1.72; }
.final__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 11px; margin-top: 28px; }

.pied { padding: 68px 0 24px; background: var(--surface-sombre, var(--text)); color: var(--voile-72); }
.pied__g { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 56px; }
.pied__marque { max-width: 370px; }
.pied__logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 17px;
  color: var(--blanc); font-size: 20px; font-weight: 850; letter-spacing: -.5px; }
.pied__mark { width: 37px; height: 37px; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--primary); font-size: 14px; letter-spacing: 0; }
.pied__marque p { margin: 0; color: var(--voile-72); font-size: 13.5px; line-height: 1.75; }
.pied h2 { margin-bottom: 18px; color: var(--blanc); font-size: 15px; letter-spacing: 0; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pied a, .pied li span { color: var(--voile-72); font-size: 13.5px; line-height: 1.5;
  transition: color .2s ease; }
.pied a:hover { color: var(--blanc); }
.reseaux { display: flex; gap: 11px; margin-top: 22px; }
.reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 44px;
  height: 44px; border: 1px solid var(--voile-20); border-radius: 11px; }
.reseaux a:hover { background: var(--voile-12); }
.pied__bas { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--voile-12); }
.pied__bas > span, .pied__legal a { color: var(--voile-72); font-size: 11.5px; }
.pied__legal { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 1050px) {
  .nav, .entete__actions { display: none; }
  .burger { display: inline-flex; }
  .entete__in { min-height: 68px; }
  .mobile { position: fixed; z-index: 9998; top: 68px; left: 0; right: 0;
    height: calc(100dvh - 68px); padding: 16px 20px 28px; overflow-y: auto;
    background: var(--background); border-top: 1px solid var(--border); }
  .mobile.ouvert { display: block; }
  .mobile nav { width: min(100%, 620px); margin: 0 auto; }
  .mlien { width: 100%; min-height: 52px; display: flex; align-items: center;
    justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--border);
    color: var(--titre-couleur, var(--primary-dark)); font-size: 16px; font-weight: 720; }
  .mtoggle { border: 0; background: transparent; cursor: pointer; }
  .mtoggle svg { width: 18px; transition: transform .2s ease; }
  .mtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mserv { display: none; padding: 5px 0 10px 13px; }
  .mserv.ouvert { display: block; }
  .mserv a { display: flex; align-items: center; min-height: 47px; padding: 8px 12px;
    border-left: 2px solid var(--border); color: var(--muted); font-size: 14px; font-weight: 620; }
  .mserv a:hover { color: var(--primary); }
  .mactions { display: grid; gap: 10px; margin-top: 20px; }
  .mactions .btn { width: 100%; min-height: 53px; }
  .g--3, .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo, .zone { grid-template-columns: 1fr; gap: 44px; }
  .panneau { min-height: 400px; }
  .reass__g { grid-template-columns: repeat(2, 1fr); }
  .pied__g { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .box { width: min(calc(100% - 36px), var(--container)); }
  body { font-size: var(--corps-mobile, 16px); }
  .sec-tete { margin-bottom: 36px; }
  .sec-tete h2, .titre { font-size: clamp(28px, 8.3vw, 38px); letter-spacing: -1.1px; }
  .g--3, .g--2 { grid-template-columns: 1fr; }
  .carte { padding: 23px; }
  .panneau { min-height: 380px; padding: 25px; }
  .panneau__mini { left: 25px; right: 25px; bottom: 25px; }
  .parcours { padding: 28px 24px; }
  .etape { padding: 22px 18px; }
  .final { padding: 72px 0; }
  .pied__g { gap: 38px; }
}
@media (max-width: 520px) {
  .box { width: min(calc(100% - 32px), var(--container)); }
  .logo { font-size: 18px; }
  .final__cta { display: grid; }
  .final__cta .btn { width: 100%; }
  .reass { padding: 26px 0; }
  .reass__g { grid-template-columns: 1fr; gap: 2px; }
  .reass__i { padding: 13px 3px; }
  .etapes { grid-template-columns: 1fr; }
  .etape { border-left: 0; border-top: 1px solid var(--border); padding: 22px 0; }
  .panneau { min-height: 430px; }
  .panneau__gros { font-size: 33px; }
  .panneau__mini { grid-template-columns: 1fr; }
  .ville { padding: 9px 12px; font-size: 12.5px; }
  .faq-q { padding: 20px 0; font-size: 15px; }
  .faq__r > div { padding-right: 0; }
  .pied { padding-top: 56px; }
  .pied__g { grid-template-columns: 1fr; }
  .pied__marque { grid-column: auto; }
  .pied__bas { align-items: flex-start; flex-direction: column; margin-top: 40px; }
}
@media (max-width: 340px) {
  .box { width: calc(100% - 28px); }
  .logo { font-size: 16px; }
  .carte, .parcours { padding-left: 19px; padding-right: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn:hover, .carte:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   OPTION « photos » de la ligne SEO — brief : "photos": true
   Ajoutee le 2026-11-04 pour Articlean : le client trouvait la ligne premium
   trop chargee, mais voulait quelques images. Ce bloc ne pose QUE des images :
   aucune animation, aucun parallaxe, aucun survol en relief. Un site sans
   l'option sort a l'octet pres comme avant.
   ───────────────────────────────────────────────────────────────────────── */

.illu {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--soft);
}

/* Texte a gauche, image a droite. Sous 900 px l'image passe en premier :
   une colonne de texte seule en haut d'ecran ne donne envie de rien. */
.duo {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
}
.duo > div > p { margin: 0 0 14px; }
.duo > div > p:last-child { margin-bottom: 0; }
.duo .illu { aspect-ratio: 4 / 5; }

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: 24px; }
  .duo .illu { aspect-ratio: 16 / 10; order: -1; }
}

/* Bande d'image seule, posee entre deux sections. */
.bande-illu { margin: 0 auto; max-width: var(--container); padding: 0 24px; }
.bande-illu .illu { aspect-ratio: 21 / 7; }

@media (max-width: 700px) {
  .bande-illu { padding: 0 18px; }
  .bande-illu .illu { aspect-ratio: 16 / 9; }
}

/* Image d'ouverture d'une page de prestation, juste sous le chapeau. */
.illu-page { margin-top: 28px; }
.illu-page .illu { aspect-ratio: 21 / 8; }

@media (max-width: 700px) {
  .illu-page .illu { aspect-ratio: 3 / 2; }
}

/* ─────────────────────────────────────────────────────────────────────────
   REPRISE D'UN SITE EXISTANT — brief : "reprise": true
   Ajoute le 2026-11-09 pour la refonte de ecolavage-clermont.fr. Le reste de
   l'atelier ecrit du contenu ; ici on en conserve. Ce bloc apporte donc les
   classes dont la ligne SEO n'avait pas besoin : grille de prix, corps
   d'article long, sommaire, fil d'Ariane, vignettes d'articles, bandeau.
   Aucune classe existante n'est redefinie : un site sans l'option sort a
   l'octet pres comme avant.
   Aucune couleur en dur : tout passe par les variables de :root.
   ───────────────────────────────────────────────────────────────────────── */

/* --- Menu deroulant en groupes (brief : "groupes") ----------------------- */
.drop__menu--groupes {
  width: min(760px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 14px;
  padding: 18px;
}
.drop__grp > p {
  margin: 0 0 6px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}
.drop__menu--groupes a { padding: 8px 12px; font-size: 13.5px; font-weight: 600; }

/* Sur mobile, les memes groupes dans le panneau deroulant. */
.mserv .drop__grp > p {
  margin: 14px 0 2px;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}

@media (max-width: 1100px) {
  .drop__menu--groupes { grid-template-columns: repeat(2, 1fr); width: min(520px, calc(100vw - 48px)); }
}

/* --- Pied en colonnes par groupe ----------------------------------------- */
.pied__g--groupes { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 44px; }
.pied__contact { margin-top: 18px !important; }
.pied__contact li { line-height: 1.5; }

@media (max-width: 1000px) {
  .pied__g--groupes { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .pied__g--groupes { grid-template-columns: 1fr; gap: 30px; }
}

/* --- Bandeau de promotion, au-dessus de l'entete ------------------------- */
.bandeau {
  background: var(--primary-dark);
  color: var(--blanc);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  line-height: 1.4;
}
.bandeau a { color: var(--blanc); text-decoration: underline; }

/* --- Fil d'Ariane -------------------------------------------------------- */
.fil { font-size: 13.5px; color: var(--muted); padding: 22px 0 0; }
.fil ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.fil li { display: flex; align-items: center; gap: 8px; }
.fil li + li::before { content: "/"; color: var(--border); }
.fil a { color: var(--muted); text-decoration: none; }
.fil a:hover { color: var(--primary); text-decoration: underline; }
.fil [aria-current] { color: var(--text); font-weight: 600; }

/* --- Grille de prix ------------------------------------------------------ */
.tarifs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
  margin-top: 34px;
}
.offre {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ombre-s);
}
.offre h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font-titre);
  letter-spacing: var(--titre-tracking);
}
.offre__d { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }
.offre__p {
  margin: 0 0 18px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.offre__n {
  font-size: 34px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.offre__b {
  font-size: 18px;
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 600;
}
.offre__u { font-size: 13px; color: var(--muted); }
.offre ul { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.offre li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  padding: 5px 0;
  color: var(--text);
}
.offre li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--primary); }
.offre .btn { width: 100%; justify-content: center; }
.note-tarif {
  margin: 22px auto 0;
  max-width: 760px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  line-height: 1.65;
}

/* --- Corps d'article long ------------------------------------------------ */
.art { max-width: 760px; margin: 0 auto; }
.art > h2 {
  font-size: clamp(23px, 2.5vw, 29px);
  font-family: var(--font-titre);
  font-weight: var(--titre-graisse);
  letter-spacing: var(--titre-tracking);
  line-height: 1.25;
  margin: 46px 0 16px;
  scroll-margin-top: 92px;
}
.art > h3 {
  font-size: clamp(18.5px, 2vw, 21px);
  font-family: var(--font-titre);
  font-weight: 650;
  line-height: 1.3;
  margin: 34px 0 12px;
  scroll-margin-top: 92px;
}
.art > h4 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; }
.art > *:first-child { margin-top: 0; }
.art p { margin: 0 0 17px; line-height: 1.72; }
.art ul, .art ol { margin: 0 0 20px; padding-left: 22px; }
.art li { margin-bottom: 9px; line-height: 1.7; }
.art a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.art a:hover { color: var(--primary-dark); }
.art strong { font-weight: 650; }
.art .illu { margin: 8px 0 26px; }
.art blockquote {
  margin: 0 0 24px;
  padding: 18px 22px;
  border-left: 3px solid var(--primary);
  background: var(--soft);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.art blockquote p:last-child { margin-bottom: 0; }
.art table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 26px;
  font-size: 14.5px;
}
.art th, .art td {
  padding: 12px 14px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.art th { background: var(--soft); font-weight: 650; }
.art__enc {
  margin: 0 0 26px;
  padding: 20px 22px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
}
.art__enc h4 { margin-top: 0; }
.art__enc p:last-child { margin-bottom: 0; }

/* --- En-tete d'article --------------------------------------------------- */
.tete-art { max-width: 760px; margin: 0 auto; padding-top: 10px; }
.tete-art h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-family: var(--font-titre);
  font-weight: var(--titre-graisse);
  letter-spacing: var(--titre-tracking);
  line-height: 1.16;
  margin: 14px 0 16px;
}
.meta-art {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 8px;
  align-items: center;
}
.meta-art a { color: var(--primary); text-decoration: none; font-weight: 600; }
.meta-art a:hover { text-decoration: underline; }
.chapo-art { font-size: 17.5px; line-height: 1.65; color: var(--muted); margin: 0; }

/* --- Sommaire ------------------------------------------------------------ */
.somm {
  max-width: 760px;
  margin: 30px auto 0;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.somm > p {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}
.somm ol { margin: 0; padding-left: 20px; }
.somm li { margin-bottom: 7px; font-size: 14.5px; line-height: 1.5; }
.somm a { color: var(--text); text-decoration: none; }
.somm a:hover { color: var(--primary); text-decoration: underline; }

/* --- Vignettes d'articles ------------------------------------------------ */
.vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(282px, 1fr));
  gap: 22px;
  margin-top: 34px;
}
.vign {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ombre-s);
}
.vign__i { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--soft); }
.vign__c { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.vign__cat {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 9px;
}
.vign h3 { margin: 0 0 10px; font-size: 16.5px; line-height: 1.35; font-weight: 650; }
.vign h3 a { color: var(--text); text-decoration: none; }
.vign h3 a:hover { color: var(--primary); }
.vign p { margin: 0 0 14px; font-size: 14px; color: var(--muted); line-height: 1.6; flex: 1; }
.vign__go {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.vign__go svg { width: 16px; height: 16px; }

/* --- Formulaire -----------------------------------------------------------
   Le formulaire reste celui d'Elementor — memes champs, meme traitement, memes
   notifications — mais il est habille ici. Elementor peut alors etre retire de
   toutes les pages : seul son JavaScript d'envoi est conserve.
   -------------------------------------------------------------------------- */
.zone-widget .elementor-form,
.zone-widget form { display: grid; gap: 16px; }
.elementor-field-group { display: grid; gap: 7px; }
.elementor-field-group > label,
.elementor-field-label {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.4;
}
.elementor-field-group .elementor-field-required .elementor-mark-required,
.elementor-mark-required { color: var(--primary); }
.elementor-field-textual,
.zone-widget input[type="text"],
.zone-widget input[type="tel"],
.zone-widget input[type="email"],
.zone-widget textarea,
.zone-widget select {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.elementor-field-textual:focus,
.zone-widget input:focus,
.zone-widget textarea:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--teinte-14);
}
.zone-widget textarea { min-height: 148px; resize: vertical; }
.zone-widget ::placeholder { color: var(--muted); opacity: .75; }

/* Cases a cocher et boutons radio, en ligne. */
.elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.elementor-field-option { display: flex; align-items: center; gap: 8px; }
.elementor-field-option label { font-size: 14.5px; font-weight: 500; margin: 0; }
.elementor-field-option input { width: 17px; height: 17px; accent-color: var(--primary); }

.zone-widget button[type="submit"],
.elementor-button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 30px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--sur-primary);
  background: var(--primary);
  border: 0;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.zone-widget button[type="submit"]:hover,
.elementor-button[type="submit"]:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.elementor-field-type-submit { display: grid; }

/* Messages d'Elementor apres envoi. */
.elementor-message {
  margin: 12px 0 0;
  padding: 13px 16px;
  border-radius: var(--radius-s);
  font-size: 14.5px;
  background: var(--soft);
  border: 1px solid var(--border);
}
.elementor-message-danger { border-color: var(--primary); }

@media (max-width: 700px) {
  .zone-widget button[type="submit"] { width: 100%; }
}

/* --- Lecteur video ------------------------------------------------------- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--soft);
  margin: 0 auto 26px;
  max-width: 820px;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Zone d'un widget tiers (avis Google, formulaire, reservation) ------- */
.zone-widget { max-width: 820px; margin: 0 auto; }
.zone-widget--large { max-width: var(--container); }

/* --- Articles lies ------------------------------------------------------- */
.lies { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.lie {
  display: block;
  padding: 18px 20px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
}
.lie:hover { border-color: var(--primary); color: var(--primary); }

@media (max-width: 700px) {
  .art > h2 { margin-top: 36px; }
  .offre { padding: 22px 20px; }
  .somm { padding: 18px 20px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   MISE EN PAGE DES PAGES DE SERVICE — brief : "reprise": true
   Refondue le 2026-11-09. La première version suivait l'ordre du site
   d'origine : on obtenait des sections de 2 200 px mêlant tarifs, FAQ, image
   et texte, et des questions isolées au milieu du contenu. Idris : « c'est
   très moche », « t'étais pas obligé de garder la même mise en page ».
   Le contenu est le même ; l'architecture ne l'est plus.
   Aucune couleur en dur : tout passe par les variables de :root.
   ───────────────────────────────────────────────────────────────────────── */

/* --- Apparition au défilement ---------------------------------------------
   Faite en CSS pur dans reprise-premium.css (animation-timeline: view()).
   Aucune règle ne masque le contenu ici : un navigateur sans la
   fonctionnalité affiche simplement tout, et aucun script ne peut
   laisser du texte à opacité zéro.
   -------------------------------------------------------------------------- */

/* --- Rythme des sections -------------------------------------------------- */
.sec--serre { padding-top: 0; }
.sec--large .box { max-width: 1240px; }

.tete2 { max-width: 700px; margin: 0 auto 44px; text-align: center; }
.tete2--gauche { margin-left: 0; text-align: left; }
.tete2 .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--teinte-08);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tete2 h2 {
  margin: 0;
  font-family: var(--font-titre);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: var(--titre-graisse);
  letter-spacing: var(--titre-tracking);
  line-height: 1.18;
}
.tete2 p {
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* --- Bande de réassurance, juste sous le héros ---------------------------- */
.bande-conf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.conf {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: var(--background);
}
.conf i {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--teinte-08);
  color: var(--primary);
}
.conf svg { width: 21px; height: 21px; }
.conf b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.conf span { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* --- Duo texte / image, alterné ------------------------------------------- */
.duo2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 68px);
  align-items: center;
}
.duo2--inverse .duo2__t { order: 2; }
.duo2__t > h2 {
  margin: 0 0 18px;
  font-family: var(--font-titre);
  font-size: clamp(24px, 3vw, 33px);
  font-weight: var(--titre-graisse);
  letter-spacing: var(--titre-tracking);
  line-height: 1.2;
}
.duo2__t > h3 {
  margin: 26px 0 12px;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.35;
}
.duo2__t > h3:first-child { margin-top: 0; }
.duo2__t p { margin: 0 0 15px; line-height: 1.75; }
.duo2__t p:last-child { margin-bottom: 0; }
.duo2__t ul { margin: 0 0 15px; padding-left: 20px; line-height: 1.7; }
.duo2__i {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--ombre-m);
}
.duo2__i img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: 460px;
  object-fit: cover;
}
.duo2__i--haut img { aspect-ratio: 4 / 5; max-height: 560px; }

@media (max-width: 880px) {
  .duo2 { grid-template-columns: 1fr; gap: 28px; }
  .duo2--inverse .duo2__t { order: 0; }
  .duo2__i img { min-height: 220px; max-height: 320px; }
}

/* --- Colonne de lecture seule --------------------------------------------- */
.colonne { max-width: 760px; margin: 0 auto; }
.colonne h3 { margin: 30px 0 12px; font-size: 19px; font-weight: 650; }
.colonne h3:first-child { margin-top: 0; }
.colonne p { margin: 0 0 15px; line-height: 1.75; }
.colonne ul { margin: 0 0 16px; padding-left: 20px; line-height: 1.7; }

/* --- Cartes de points ------------------------------------------------------ */
.grille-pts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}
.pt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 24px 24px 24px 22px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pt:hover {
  border-color: var(--teinte-40);
  transform: translateY(-3px);
  box-shadow: var(--ombre-m);
}
.pt__i {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--teinte-08);
  color: var(--primary);
}
.pt__i svg { width: 20px; height: 20px; }
.pt h3 { margin: 0 0 6px; font-size: 16px; font-weight: 680; line-height: 1.35; }
.pt p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.pt--nu { padding: 18px 20px; }
.pt--nu h3 { margin: 0; }

/* Une carte qui mène quelque part doit se voir : la flèche apparaît au survol
   et le titre prend la couleur de marque. */
a.pt { text-decoration: none; color: inherit; position: relative; }
a.pt > div { padding-right: 18px; }
a.pt h3 { transition: color .18s ease; }
a.pt::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-right: 2px solid var(--primary);
  border-top: 2px solid var(--primary);
  transform: rotate(45deg) translateX(-3px);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
a.pt:hover h3 { color: var(--primary); }
a.pt:hover::after { opacity: 1; transform: rotate(45deg) translateX(0); }

/* --- Galerie --------------------------------------------------------------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.galerie img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: transform .3s ease;
}
.galerie a:hover img, .galerie img:hover { transform: scale(1.02); }

/* --- Bande des communes ---------------------------------------------------- */
.zone2 {
  position: relative;
  padding: clamp(46px, 6vw, 72px) 0;
  background: var(--primary-dark);
  color: var(--blanc);
  overflow: hidden;
}
.zone2::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--voile-08);
}
.zone2 .box { position: relative; z-index: 1; }
.zone2 .eyebrow { color: var(--voile-72); }
.zone2 h2 {
  margin: 12px 0 14px;
  font-family: var(--font-titre);
  font-size: clamp(25px, 3.2vw, 34px);
  font-weight: var(--titre-graisse);
  letter-spacing: var(--titre-tracking);
  color: var(--blanc);
}
.zone2 > .box > p { margin: 0 0 26px; max-width: 760px; color: var(--voile-86); line-height: 1.7; }
.zone2__v { display: flex; flex-wrap: wrap; gap: 9px; }
.zone2__v span {
  padding: 8px 15px;
  border-radius: 100px;
  background: var(--voile-12);
  border: 1px solid var(--voile-20);
  font-size: 13.5px;
  font-weight: 600;
}

/* --- FAQ ------------------------------------------------------------------- */
.faq2 { max-width: 840px; margin: 0 auto; display: grid; gap: 12px; }
.faq2 .faq__i {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq2 .faq__i.ouvert { border-color: var(--teinte-40); box-shadow: var(--ombre-s); }
.faq2 .faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 24px;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
}
.faq2 .faq-q:hover { color: var(--primary); }
.faq2 .plus {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teinte-08);
  transition: background .2s ease, transform .3s ease;
}
.faq2 .plus::before, .faq2 .plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--primary);
  transition: transform .3s ease;
}
.faq2 .plus::after { transform: rotate(90deg); }
.faq2 .ouvert .plus { background: var(--primary); }
.faq2 .ouvert .plus::before, .faq2 .ouvert .plus::after { background: var(--sur-primary); }
.faq2 .ouvert .plus::after { transform: rotate(0); }
.faq2 .faq__r { max-height: 0; overflow: hidden; transition: max-height .34s ease; }
.faq2 .faq__r > div { padding: 0 24px 22px; color: var(--muted); line-height: 1.75; }
.faq2 .faq__r p { margin: 0 0 12px; }
.faq2 .faq__r p:last-child { margin-bottom: 0; }

/* --- Bande d'appel finale --------------------------------------------------- */
.final2 {
  position: relative;
  margin: 0 auto;
  max-width: var(--container);
  padding: clamp(42px, 5vw, 64px) clamp(26px, 4vw, 60px);
  border-radius: calc(var(--radius) + 8px);
  background: var(--primary-dark);
  color: var(--blanc);
  overflow: hidden;
}
.final2::after {
  content: "";
  position: absolute;
  left: -90px;
  bottom: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--voile-08);
}
.final2__g {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.final2 h2 {
  margin: 0 0 14px;
  font-family: var(--font-titre);
  font-size: clamp(25px, 3.2vw, 35px);
  font-weight: var(--titre-graisse);
  letter-spacing: var(--titre-tracking);
  line-height: 1.2;
  color: var(--blanc);
}
.final2 p { margin: 0; color: var(--voile-86); font-size: 16px; line-height: 1.7; }
.final2__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.final2__cta .btn { min-height: 54px; }
.final2__cta .btn--blanc {
  background: var(--blanc);
  color: var(--primary-dark);
  border: 0;
}
.final2__cta .btn--blanc:hover { background: var(--voile-86); transform: translateY(-1px); }
.final2__cta .btn--voile2 {
  background: var(--voile-12);
  color: var(--blanc);
  border: 1px solid var(--voile-20);
}
.final2__cta .btn--voile2:hover { background: var(--voile-20); }
.final2__n { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.final2__n span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--voile-86); }
.final2__n svg { width: 17px; height: 17px; color: var(--blanc); }

@media (max-width: 880px) {
  .final2__g { grid-template-columns: 1fr; }
}

/* --- Zone d'un widget tiers, recentrée --------------------------------------- */
.widget-centre { display: flex; justify-content: center; }

/* ─────────────────────────────────────────────────────────────────────────
   REGISTRE PREMIUM — brief : "reprise": true
   Ajoute le 2026-11-09 : « fais-moi quelque chose de beaucoup plus premium
   et moderne ». Posee APRES reprise-pages.css, cette feuille ne fait que
   redefinir : profondeur, echelle typographique, degrades, mouvement.
   Aucune couleur en dur : tout passe par les variables de :root.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --ray-xl: 26px;
  --ray-l: 20px;
  --halo: 0 30px 70px -28px rgba(13, 83, 104, .42);
  --halo-fort: 0 44px 90px -30px rgba(13, 83, 104, .55);
  --degrade: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  --degrade-clair: linear-gradient(170deg, var(--soft) 0%, var(--background) 68%);
  --ombre-xs: 0 2px 6px rgba(0, 0, 0, .025);
  --masque: #000;   /* opacite du masque des rubans, pas une couleur visible */
}

/* --- Mouvement : au defilement, sans JavaScript --------------------------
   Les animations pilotees par le defilement sont natives en CSS. Aucun
   script a retarder, donc rien que WP Rocket puisse casser, et aucun risque
   de laisser du texte invisible : les navigateurs qui ne la connaissent pas
   affichent simplement le contenu.
   ------------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rev {
      animation: monte linear both;
      animation-timeline: view();
      /* La plage se referme sur « entry 92% » : un bloc deja entierement
         visible au chargement est au-dela, donc affiche. Avec une plage qui
         courait jusqu'a « cover », le heros restait a opacite zero. */
      animation-range: entry 8% entry 92%;
    }
  }
}
@keyframes monte {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* --- Héros ---------------------------------------------------------------- */
.hero2 {
  position: relative;
  padding: clamp(54px, 7vw, 104px) 0 clamp(60px, 7vw, 108px);
  background: var(--degrade-clair);
  overflow: hidden;
}
.hero2::before {
  content: "";
  position: absolute;
  top: -340px;
  right: -240px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--teinte-14), transparent 62%);
  pointer-events: none;
}
.hero2__g {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(32px, 4.5vw, 70px);
  align-items: center;
}
.pastille2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 8px 16px 8px 12px;
  border-radius: 100px;
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: var(--ombre-s);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--primary-dark);
}
.pastille2 i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--teinte-14);
}
.hero2 h1 {
  margin: 0 0 20px;
  font-family: var(--font-titre);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.04;
  color: var(--primary-dark);
}
.hero2 h1 em {
  font-style: normal;
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero2__ch {
  margin: 0 0 30px;
  max-width: 560px;
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.68;
  color: var(--muted);
}
.hero2__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.hero2__cta .btn { min-height: 56px; padding: 0 28px; font-size: 15.5px; border-radius: 14px; }
.hero2__cta .btn--plein { box-shadow: var(--halo); }
.hero2__cta .btn--plein:hover { transform: translateY(-2px); box-shadow: var(--halo-fort); }

.hero2__preuves { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.hero2__p { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--primary-dark); }
.hero2__p svg { width: 18px; height: 18px; color: var(--primary); }

/* Le visuel : image cadrée, badge flottant. */
.hero2__v { position: relative; }
.hero2__v img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  border-radius: var(--ray-xl);
  box-shadow: var(--halo-fort);
}
.hero2__badge {
  position: absolute;
  left: -26px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 20px;
  border-radius: 16px;
  background: var(--background);
  box-shadow: var(--halo);
  border: 1px solid var(--border);
}
.hero2__badge b { display: block; font-size: 20px; font-weight: 800; line-height: 1; color: var(--primary-dark); }
.hero2__badge span { font-size: 12.5px; color: var(--muted); }
.hero2__badge i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--degrade);
  color: var(--sur-primary);
}
.hero2__badge svg { width: 21px; height: 21px; }

/* Sans image : le bloc devis reprend sa place. */
.hero2__devis {
  padding: 30px;
  border-radius: var(--ray-xl);
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: var(--halo);
}
.hero2__devis h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.hero2__devis > p { margin: 0 0 20px; font-size: 14.5px; color: var(--muted); }
.hero2__devis .btn { width: 100%; justify-content: center; min-height: 54px; border-radius: 13px; }
.hero2__devis .btn + .btn { margin-top: 10px; }

@media (max-width: 920px) {
  .hero2__g { grid-template-columns: 1fr; gap: 36px; }
  .hero2__v { max-width: 520px; }
  .hero2__v img { aspect-ratio: 4 / 3; }
  .hero2__badge { left: 16px; bottom: 16px; }
}

/* --- Chiffres -------------------------------------------------------------- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  padding: 0;
  border-radius: var(--ray-xl);
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: var(--ombre-m);
  overflow: hidden;
}
.chiffre {
  position: relative;
  padding: 30px 28px;
  text-align: center;
}
.chiffre + .chiffre::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: var(--border);
}
.chiffre b {
  display: block;
  font-family: var(--font-titre);
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.chiffre span { display: block; margin-top: 9px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 760px) { .chiffre + .chiffre::before { display: none; } }

/* --- Titres de section ------------------------------------------------------ */
.tete2 h2 { font-size: clamp(28px, 3.7vw, 44px); font-weight: 700; letter-spacing: -.028em; line-height: 1.1; }
.tete2 .eyebrow {
  background: var(--teinte-08);
  border: 1px solid var(--teinte-14);
}
.tete2 p { font-size: 17px; }

/* --- Cartes ------------------------------------------------------------------ */
.pt {
  padding: 28px 26px;
  border-radius: var(--ray-l);
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: var(--ombre-xs);
}
.pt:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--halo);
}
.pt__i {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--degrade);
  color: var(--sur-primary);
}
.pt__i svg { width: 22px; height: 22px; }
.pt h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }

/* --- Duos -------------------------------------------------------------------- */
.duo2__t > h2 { font-size: clamp(26px, 3.1vw, 36px); font-weight: 700; letter-spacing: -.026em; }
.duo2__i { border-radius: var(--ray-xl); box-shadow: var(--halo); }
.duo2__i img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.duo2:hover .duo2__i img { transform: scale(1.035); }

/* --- Galerie ------------------------------------------------------------------ */
.galerie img { border-radius: var(--ray-l); box-shadow: var(--ombre-s); }

/* --- Tarifs -------------------------------------------------------------------- */
.offre {
  padding: 32px 28px 28px;
  border-radius: var(--ray-xl);
  border: 1px solid var(--border);
  box-shadow: var(--ombre-xs);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.offre:hover { transform: translateY(-5px); box-shadow: var(--halo); border-color: transparent; }
.offre h3 { font-size: 18px; font-weight: 700; letter-spacing: -.012em; }
.offre__n { font-size: 42px; letter-spacing: -.035em; background: var(--degrade);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.offre__b { font-size: 17px; }
.offre li svg { color: var(--primary); }
.offre .btn { min-height: 50px; border-radius: 13px; }
.offre--phare {
  border: 0;
  background: var(--degrade);
  color: var(--blanc);
  box-shadow: var(--halo-fort);
}
.offre--phare h3, .offre--phare .offre__n { color: var(--blanc); background: none; -webkit-text-fill-color: currentColor; }
.offre--phare .offre__d, .offre--phare .offre__u, .offre--phare li { color: var(--voile-86); }
.offre--phare li svg { color: var(--blanc); }
.offre--phare .offre__b { color: var(--voile-72); }
.offre--phare .btn { background: var(--blanc); color: var(--primary-dark); border: 0; }
.offre__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 13px;
  border-radius: 100px;
  background: var(--voile-20);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- Bande des communes --------------------------------------------------------- */
.zone2 { background: var(--degrade); }
.zone2::after { background: radial-gradient(circle at 50% 50%, var(--voile-12), transparent 68%); }
.zone2 h2 { font-size: clamp(27px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.028em; }
.zone2__v span { backdrop-filter: blur(4px); }

/* --- FAQ -------------------------------------------------------------------------- */
.faq2 .faq__i { border-radius: var(--ray-l); }
.faq2 .faq__i.ouvert { box-shadow: var(--halo); border-color: transparent; }
.faq2 .faq-q { font-size: 17px; padding: 24px 26px; letter-spacing: -.012em; }
.faq2 .plus { width: 34px; height: 34px; }
.faq2 .ouvert .plus { background: var(--degrade); }

/* --- Appel final -------------------------------------------------------------------- */
.final2 { border-radius: var(--ray-xl); background: var(--degrade); box-shadow: var(--halo-fort); }
.final2::after { background: radial-gradient(circle at 50% 50%, var(--voile-12), transparent 66%); }
.final2 h2 { font-size: clamp(27px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.028em; }
.final2__cta .btn { border-radius: 13px; }

/* --- Barre d'appel fixe sur mobile ------------------------------------------------- */
.barre-mob { display: none; }
@media (max-width: 760px) {
  .barre-mob {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--voile-86);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
  }
  .barre-mob .btn { min-height: 50px; justify-content: center; font-size: 14.5px; border-radius: 12px; }
  body { padding-bottom: 76px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   DÉFILEMENTS ET APPEL PERMANENT — ajoutés le 2026-11-09
   « fais défiler les avis, fais défiler les photos, mets en sticky le bouton
   d'appel et de demande de devis ».
   Tout en CSS : WP Rocket reporte le JavaScript jusqu'à la première
   interaction, un carrousel piloté par script resterait figé.
   ───────────────────────────────────────────────────────────────────────── */

/* --- Ruban défilant, base commune ----------------------------------------- */
.ruban {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--masque) 7%, var(--masque) 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--masque) 7%, var(--masque) 93%, transparent);
}
.ruban__p { display: flex; width: max-content; gap: 20px; }
.ruban__p > * { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .ruban__p { animation: defile var(--duree, 46s) linear infinite; }
  .ruban:hover .ruban__p,
  .ruban:focus-within .ruban__p { animation-play-state: paused; }
}
@keyframes defile {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 10px)); }
}
/* Sans animation, le ruban redevient une bande qu'on fait glisser au doigt. */
@media (prefers-reduced-motion: reduce) {
  .ruban { overflow-x: auto; scroll-snap-type: x mandatory; }
  .ruban__p > * { scroll-snap-align: center; }
}

/* --- Avis qui défilent ----------------------------------------------------- */
.avis-c { width: 370px; padding: 28px 26px; border-radius: var(--ray-l);
  background: var(--background); border: 1px solid var(--border);
  box-shadow: var(--ombre-xs); display: flex; flex-direction: column; gap: 14px; }
.avis-c__e { display: flex; gap: 3px; color: var(--primary); }
.avis-c__e svg { width: 17px; height: 17px; }
.avis-c p { margin: 0; font-size: 14.8px; line-height: 1.68; color: var(--text); }
.avis-c footer { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.avis-c__i { display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--degrade); color: var(--sur-primary);
  font-size: 14px; font-weight: 800; }
.avis-c b { font-size: 14.5px; font-weight: 700; }
.avis-c small { display: block; font-size: 12.5px; color: var(--muted); }

/* --- Photos qui défilent ---------------------------------------------------- */
.ruban--photos .ruban__p { gap: 16px; }
.ruban--photos img {
  display: block;
  width: 330px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ray-l);
  box-shadow: var(--ombre-s);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.ruban--photos img:hover { transform: scale(1.03); }
@media (max-width: 560px) {
  .avis-c { width: 290px; padding: 24px 22px; }
  .ruban--photos img { width: 250px; }
}

/* --- Appel permanent -------------------------------------------------------- */
.fixe {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.fixe .btn {
  min-height: 52px;
  padding: 0 22px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: var(--halo-fort);
  white-space: nowrap;
}
.fixe .btn--plein { background: var(--degrade); border: 0; }
.fixe .btn--blanc {
  background: var(--background);
  color: var(--primary-dark);
  border: 1px solid var(--border);
}
.fixe .btn--blanc svg { color: var(--primary); }
.fixe .btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: no-preference) {
  .fixe .btn--plein::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 100px;
    box-shadow: 0 0 0 0 var(--teinte-40);
    animation: pulse 2.8s ease-out infinite;
  }
}
.fixe .btn--plein { position: relative; overflow: visible; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--teinte-40); }
  70% { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 760px) { .fixe { display: none; } }

/* --- Grille de services illustrée (accueil) --------------------------------
   Les cartes d'origine n'étaient qu'un titre. Chaque service montre désormais
   sa photo, dit ce qu'il couvre et mène à sa page.
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.serv {
  display: flex;
  flex-direction: column;
  border-radius: var(--ray-xl);
  overflow: hidden;
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: var(--ombre-xs);
  text-decoration: none;
  color: inherit;
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s ease, border-color .28s ease;
}
.serv:hover { transform: translateY(-6px); box-shadow: var(--halo); border-color: transparent; }
.serv__i { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--soft); }
.serv__i img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.serv:hover .serv__i img { transform: scale(1.06); }
.serv__c { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.serv h3 {
  margin: 0 0 9px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  transition: color .18s ease;
}
.serv:hover h3 { color: var(--primary); }
.serv p { margin: 0 0 16px; font-size: 14.3px; line-height: 1.6; color: var(--muted); flex: 1; }
.serv__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
}
.serv__go svg { width: 16px; height: 16px; transition: transform .22s ease; }
.serv:hover .serv__go svg { transform: translateX(4px); }

/* --- Bandeau de promotion qui défile ----------------------------------------
   Demande d'Idris le 09/11/2026 : le faire défiler et le grossir. Même
   principe que les autres rubans — CSS seul, contenu posé deux fois pour
   boucler sans saut, pause au survol.
   -------------------------------------------------------------------------- */
.bandeau {
  padding: 0;
  overflow: hidden;
  background: var(--degrade);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .005em;
}
.bandeau__p {
  display: flex;
  width: max-content;
  align-items: center;
  padding: 12px 0;
}
.bandeau__p span {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  white-space: nowrap;
}
.bandeau__p span::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--voile-72);
}
@media (prefers-reduced-motion: no-preference) {
  .bandeau__p { animation: defile 38s linear infinite; }
  .bandeau:hover .bandeau__p { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau__p { width: 100%; justify-content: center; }
  .bandeau__p > span:not(:first-child) { display: none; }
  .bandeau__p span::after { display: none; }
}
@media (max-width: 700px) {
  .bandeau { font-size: 14px; }
  .bandeau__p { padding: 10px 0; }
}

/* --- Encadrés « bon à savoir » ----------------------------------------------
   Les fragments courts du site d'origine — un titre et deux lignes — avaient
   chacun recu une section entiere avec un titre geant. Idris : « c'est un peu
   parti en cacahuète ». Ils sont desormais regroupes en encadres.
   -------------------------------------------------------------------------- */
.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 20px;
}
.note {
  position: relative;
  padding: 30px 30px 30px 32px;
  border-radius: var(--ray-xl);
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: var(--ombre-xs);
  transition: transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s ease, border-color .26s ease;
}
.note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  bottom: 30px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--degrade);
}
.note:hover { transform: translateY(-4px); box-shadow: var(--halo); border-color: transparent; }
.note h3 {
  margin: 0 0 12px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--primary-dark);
}
.note p { margin: 0 0 12px; font-size: 14.8px; line-height: 1.7; color: var(--muted); }
.note p:last-child { margin-bottom: 0; }
.note ul { margin: 0; padding-left: 20px; font-size: 14.8px; line-height: 1.7; color: var(--muted); }
@media (max-width: 560px) { .note { padding: 24px 24px 24px 26px; } }

/* --- En-tête vraiment collant, mobile compris --------------------------------
   `overflow-x: hidden` sur html et body en fait des conteneurs de defilement :
   `position: sticky` s'y accroche et ne bouge plus par rapport a la page, donc
   l'en-tete ne suivait pas sur mobile. `clip` coupe le debordement sans creer
   de conteneur. Le bandeau, lui, defile avec la page : il ne vole pas de
   hauteur utile sur un ecran de telephone.
   -------------------------------------------------------------------------- */
/* Ni `hidden` ni `clip` sur html et body : `hidden` neutralise le
   `position: sticky` de l'en-tete, et `clip` casse le `position: fixed` du
   panneau de menu, qui s'ouvrait a -613 px hors de l'ecran des que la page
   etait defilee. Les pages ne debordent pas horizontalement — mesure a
   375 px : zero pixel de trop — donc le garde-fou ne sert a rien ici. */
html, body { overflow-x: visible; }
.entete { position: sticky; top: 0; }

/* Zone tactile du bouton de menu. A 46 px, un pouce la manque d'un rien :
   l'agrandir est la difference entre « le menu ne marche pas » et « le menu
   marche ». La zone cliquable deborde le carre visible. */
@media (max-width: 1050px) {
  .entete { position: sticky; top: 0; }
  .burger { position: relative; width: 50px; height: 50px; }
  .burger::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .burger:active { background: var(--soft); transform: scale(.96); }
  .burger__b { width: 23px; height: 17px; }
}