/* ==========================================================================
   Meden, plomberie à Saint-Pée-sur-Nivelle
   Direction : terroir chaleureux. Pierre claire, vert basque profond,
   rouge brique pour l'action. Faustina (titres) + Fira Sans (texte), auto-hébergées.
   ========================================================================== */

@font-face { font-family: "Faustina"; src: url("/fonts/faustina-vf.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Faustina"; src: url("/fonts/faustina-vf-italic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
  --fond: #F7F6F3;
  --blanc: #FFFFFF;
  --pierre: #E9E5DC;
  --pierre-2: #DDD7CA;
  --filet: #D3CCBD;
  --vert: #1B4D35;
  --vert-f: #12382A;
  --vert-2: #2C6A4B;
  --vert-pale: #E2ECE4;
  --sauge: #A9C2B0;
  --brique: #A33A25;
  --brique-f: #85301F;
  --brique-pale: #F4E2DA;
  --encre: #1C2620;
  --encre-2: #4A544D;
  --sur-vert: #D6E4DA;
  --titre: "Faustina", "Iowan Old Style", Georgia, serif;
  --texte: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 1200px;
  --pad: clamp(20px, 4vw, 40px);
  --r: 6px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ombre: 0 1px 2px rgba(28, 38, 32, .06), 0 10px 28px -12px rgba(28, 38, 32, .22);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; scrollbar-color: var(--vert-2) var(--pierre); }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 1.0625rem/1.62 var(--texte);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  caret-color: var(--brique);
}
::selection { background: var(--vert); color: #fff; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--vert); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--brique); }
:focus-visible { outline: 3px solid var(--brique); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--titre); color: var(--vert-f); margin: 0 0 .45em; text-wrap: balance; letter-spacing: -.012em; }
h1 { font-size: clamp(2.2rem, 1.55rem + 2.7vw, 3.7rem); line-height: 1.04; font-weight: 640; }
h2 { font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.45rem); line-height: 1.1; font-weight: 600; }
h3 { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.45rem); line-height: 1.2; font-weight: 620; }
p { margin: 0 0 1em; }
.nw { white-space: nowrap; }
.lead { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.27rem); line-height: 1.55; color: var(--encre-2); max-width: 58ch; }
.source { font-size: .86rem; color: var(--encre-2); margin-top: .9rem; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap--etroit { max-width: 820px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--vert-f); color: #fff; padding: 12px 18px; border-radius: var(--r); }
.skip:focus { top: 12px; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Emplacement à compléter : visible, net, jamais confondu avec une information */
.a-completer {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35em;
  padding: .12em .55em; border: 1.5px dashed var(--brique); border-radius: 4px;
  background: var(--brique-pale); color: var(--brique-f); font-size: .92em; font-style: normal; line-height: 1.45;
}
.a-completer b { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .78em; }
p.a-completer, div.a-completer { display: flex; padding: .8em 1em; margin: 0 0 1.2em; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 46px; padding: .7em 1.25em; border-radius: var(--r); border: 1.5px solid transparent;
  font: 600 1rem/1.1 var(--texte); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn--lg { min-height: 54px; padding: .85em 1.5em; font-size: 1.06rem; }
.btn--brique { background: var(--brique); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 8px 18px -10px rgba(133, 48, 31, .7); }
.btn--brique:hover { background: var(--brique-f); color: #fff; }
.btn--vert { background: var(--vert); color: #fff; }
.btn--vert:hover { background: var(--vert-f); color: #fff; }
.btn--trait { border-color: var(--vert); color: var(--vert); background: transparent; }
.btn--trait:hover { background: var(--vert); color: #fff; }
.btn--clair { background: var(--fond); color: var(--vert-f); }
.btn--clair:hover { background: #fff; color: var(--brique); }
.btn--trait-clair { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--trait-clair:hover { background: #fff; color: var(--vert-f); border-color: #fff; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- En-tête ---------- */
.head { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
/* Fond flouté porté par un pseudo-élément : un backdrop-filter sur .head piégerait le menu mobile (position: fixed) */
.head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(247, 246, 243, .96); }
@supports (backdrop-filter: blur(8px)) { .head::before { background: rgba(247, 246, 243, .86); backdrop-filter: blur(10px) saturate(1.2); } }
.head.is-scrolled { border-color: var(--filet); box-shadow: 0 6px 20px -16px rgba(28,38,32,.5); }
.head__in { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.logo { flex: none; display: block; }
.logo__svg { width: 168px; height: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; }
.nav a { display: block; padding: .55em .75em; color: var(--encre); text-decoration: none; font-weight: 500; font-size: .98rem; border-radius: 4px; }
.nav a:hover { color: var(--brique); }
.nav a[aria-current] { color: var(--vert); box-shadow: inset 0 -2px 0 var(--brique); border-radius: 0; }
.nav__extra { display: none; }
.head__actions { display: flex; align-items: center; gap: .75rem; }
.head__tel {
  display: inline-flex; align-items: center; gap: .5em; padding: .65em 1.05em; border-radius: var(--r);
  background: var(--brique); color: #fff; text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.head__tel:hover { background: var(--brique-f); color: #fff; }
.burger { display: none; width: 46px; height: 46px; border: 1.5px solid var(--filet); background: #fff; border-radius: var(--r); cursor: pointer; padding: 0; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--vert-f); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 29px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1020px) {
  .head__in { min-height: 66px; gap: .75rem; }
  .logo__svg { width: 140px; }
  .burger { display: block; }
  .nav {
    position: fixed; inset: 66px 0 0 0; background: var(--fond); padding: 1rem var(--pad) 7rem; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { font-family: var(--titre); font-size: 1.6rem; font-weight: 600; color: var(--vert-f); padding: .55em 0; border-bottom: 1px solid var(--filet); border-radius: 0; }
  .nav a[aria-current] { box-shadow: none; color: var(--brique); }
  .nav__extra { display: grid; gap: .75rem; margin-top: 1.5rem; }
  .nav .nav__extra .btn { display: flex; font: 600 1.06rem/1.1 var(--texte); padding: .85em 1.5em; border-radius: var(--r); border: 1.5px solid transparent; }
  .nav .nav__extra .btn--brique { color: #fff; }
  .nav .nav__extra .btn--trait { border-color: var(--vert); color: var(--vert); }
  .nav__horaires { margin: .25rem 0 0; color: var(--encre-2); font-size: .95rem; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 520px) { .head__tel span { display: none; } .head__tel { padding: .7em; } .head__tel .ico { width: 1.35em; height: 1.35em; } }

/* ---------- Fil d'Ariane ---------- */
.fil ol { list-style: none; margin: 0; padding: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .3em; font-size: .9rem; color: var(--encre-2); }
.fil li:not(:last-child)::after { content: "/"; margin-left: .45em; color: var(--pierre-2); }
.fil a { color: var(--encre-2); }

/* ---------- Accueil : ouverture ---------- */
.une { padding: clamp(1.5rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.une__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.une h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem); margin-bottom: .35em; }
.une h1 em { font-style: italic; font-weight: 500; color: var(--brique); }
.une .lead { margin-bottom: 1.6rem; }
.preuves { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .65rem; }
.preuves li { display: flex; gap: .7rem; align-items: flex-start; color: var(--encre); }
.preuves .ico { color: var(--vert-2); margin-top: .2em; }
.une__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Encadré d'appel (vert basque) */
.appel {
  position: relative; background: var(--vert); color: var(--sur-vert); border-radius: 10px;
  padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--ombre); overflow: hidden;
}
.appel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--frise); }
.appel__titre { font-family: var(--titre); font-size: 1.3rem; font-weight: 600; color: #fff; margin: .4rem 0 .6rem; line-height: 1.2; }
.appel__tel { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font: 700 clamp(1.8rem, 1.4rem + 1.4vw, 2.35rem)/1 var(--texte); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.appel__tel .ico { width: .9em; height: .9em; color: var(--brique-pale); }
.appel__tel:hover { color: var(--brique-pale); }
.appel__etat { display: flex; align-items: center; gap: .5rem; margin: .8rem 0 1rem; font-size: .95rem; color: var(--sur-vert); }
.pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--sauge); flex: none; }
.appel__etat.is-ouvert .pastille { background: #7FD69B; box-shadow: 0 0 0 4px rgba(127, 214, 155, .18); }
.appel__horaires { margin: 0 0 1.3rem; padding: .9rem 0 0; border-top: 1px solid rgba(214, 228, 218, .22); display: grid; gap: .3rem; font-size: .95rem; }
.appel__horaires div { display: flex; justify-content: space-between; gap: 1rem; }
.appel__horaires dt { color: var(--sur-vert); }
.appel__horaires dd { margin: 0; color: #fff; font-weight: 500; }
.appel .btn { width: 100%; }
.appel__note { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.appel__note small { color: var(--sauge); font-size: .8rem; }

/* Note Google */
.note { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--encre); font-size: .95rem; }
.note__stars { display: inline-flex; gap: 1px; color: #C98A1B; }
.note__stars .ico { width: 1.05em; height: 1.05em; }
.note strong { font-weight: 600; }
.note:hover .note__txt { text-decoration: underline; }
.note--sombre { color: #fff; }
.note--sombre .note__stars { color: #F0C565; }

/* Frise de carreaux (pierre, brique, vert) */
:root { --frise: repeating-linear-gradient(90deg, var(--brique) 0 22px, var(--pierre) 22px 26px, var(--vert-2) 26px 48px, var(--pierre) 48px 52px, #C9B79A 52px 74px, var(--pierre) 74px 78px); }
.carrelage-frise { height: 10px; background: var(--frise); }

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--pierre { background: var(--pierre); }
.section--blanc { background: var(--blanc); }
.section__tete { max-width: 62ch; margin-bottom: clamp(1.6rem, 3vw, 2.5rem); }
.section__tete p { color: var(--encre-2); }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.duo--large { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

/* Index des prestations : lignes séparées par des filets */
.index__titre { margin-bottom: 1rem; }
.index__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.index__liste li { border-bottom: 1px solid var(--filet); }
.index__liste a {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 1.2rem; align-items: center;
  padding: 1.15rem .4rem; text-decoration: none; color: var(--encre); transition: background-color .25s var(--ease);
}
.index__liste a:hover { background: rgba(255, 255, 255, .7); }
.index__illus { width: 60px; height: 60px; color: var(--vert); }
.index__nom { display: block; font: 600 1.35rem/1.2 var(--titre); color: var(--vert-f); margin-bottom: .15rem; }
.index__resume { display: block; color: var(--encre-2); font-size: 1rem; }
.index__fleche { width: 1.4em; height: 1.4em; color: var(--brique); transition: transform .25s var(--ease); }
.index__liste a:hover .index__fleche { transform: translateX(4px); }

/* Illustrations : aplats */
.illus { color: var(--vert); }
.illus .f-pierre { fill: var(--pierre); }
.illus .f-brique { fill: var(--brique); stroke: var(--brique-f); }
.illus .s-brique { stroke: var(--brique); }
.section--pierre .illus .f-pierre { fill: var(--blanc); }

/* Autres métiers */
.metiers { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.metiers a {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 1rem; padding: .9rem 1.1rem;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r); text-decoration: none; color: var(--vert-f);
  font: 600 1.25rem/1.2 var(--titre); transition: border-color .2s, box-shadow .2s;
}
.metiers a:hover { border-color: var(--vert-2); box-shadow: var(--ombre); color: var(--vert-f); }
.metiers .ico { color: var(--brique); }
.metiers__illus { width: 50px; height: 50px; }

/* Avis */
.avis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.avis__note { text-align: center; padding: 1.6rem 2rem; background: var(--vert); color: #fff; border-radius: 10px; min-width: 220px; }
.avis__chiffre { font: 640 4.2rem/1 var(--titre); color: #fff; display: block; }
.avis__chiffre small { font-size: .45em; color: var(--sur-vert); font-weight: 500; }
.avis__note .note__stars { color: #F0C565; justify-content: center; margin: .5rem 0; display: flex; }
.avis__note p { margin: 0; color: var(--sur-vert); font-size: .95rem; }
.themes { list-style: none; margin: 1rem 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.themes li { padding: .4em .85em; background: var(--blanc); border: 1px solid var(--filet); border-radius: 99px; font-size: .95rem; }
.themes b { font-weight: 600; color: var(--vert-f); }

/* Communes */
.communes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.communes--2 { columns: 2; column-gap: 2.5rem; border-top: 0; }
.communes li { break-inside: avoid; border-bottom: 1px solid var(--filet); }
.communes a, .communes__item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; color: var(--encre); text-decoration: none; }
.communes a .communes__nom { color: var(--vert); text-decoration: underline; text-decoration-color: var(--sauge); text-underline-offset: .2em; font-weight: 500; }
.communes a:hover .communes__nom { color: var(--brique); }
.communes__temps { display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--encre-2); font-size: .95rem; }
.communes__temps small { color: var(--encre-2); opacity: .8; margin-left: .2rem; }

/* Carte schématique */
.carte { width: 100%; height: auto; background: var(--blanc); border: 1px solid var(--filet); border-radius: 10px; }
.carte__mer { fill: #DCE7EA; }
.carte__mer-t { fill: #5C7A84; font: italic 500 15px var(--titre); }
.carte__riviere { fill: none; stroke: #9DBFC9; stroke-width: 3; stroke-linecap: round; }
.carte__riviere-t { fill: #5C7A84; font: italic 500 13px var(--titre); }
.carte__lien { stroke: var(--pierre-2); stroke-width: 1.3; stroke-dasharray: 3 4; }
.carte__ville { fill: #fff; stroke: var(--vert); stroke-width: 2; }
.carte__nom { fill: var(--encre); font: 500 13.5px var(--texte); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.carte__min { fill: var(--encre-2); font-weight: 400; }
.carte__za-halo { fill: rgba(163, 58, 37, .16); }
.carte__za { fill: var(--brique); stroke: #fff; stroke-width: 2.5; }
.carte__za-t { fill: var(--brique-f); font: 700 14px var(--texte); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }

/* Guides */
.guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--vert); }
.guides li + li { border-left: 1px solid var(--filet); }
.guides a { display: flex; flex-direction: column; height: 100%; gap: .5rem; padding: 1.3rem 1.4rem 1.4rem; text-decoration: none; color: var(--encre); transition: background-color .2s; }
.guides li:first-child a { padding-left: 0; }
.guides a:hover { background: rgba(255,255,255,.6); }
.guides__t { font: 600 1.25rem/1.25 var(--titre); color: var(--vert-f); }
.guides__r { color: var(--encre-2); font-size: .98rem; }
.guides__lire { margin-top: auto; padding-top: .4rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--brique); font-weight: 600; font-size: .95rem; }

/* Pages intérieures : ouverture */
.intro { padding: clamp(1.2rem, 3vw, 2.4rem) 0 clamp(2.5rem, 5vw, 4rem); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.intro h1 { margin-top: .4rem; }
.etiquettes { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.etiquettes li { display: inline-flex; align-items: center; gap: .4rem; padding: .4em .8em; background: var(--vert-pale); color: var(--vert-f); border-radius: 4px; font-size: .95rem; font-weight: 500; }
.etiquettes .ico { color: var(--vert-2); width: 1em; height: 1em; }

/* Texte courant */
.texte { max-width: 68ch; }
.texte h2 { margin-top: 2.2rem; }
.texte h2:first-child { margin-top: 0; }
.texte h3 { margin-top: 1.8rem; }
.texte ul, .texte ol { padding-left: 1.2rem; margin: 0 0 1.2em; }
.texte li { margin-bottom: .45em; }
.texte li::marker { color: var(--brique); }
.coches { list-style: none; padding: 0 !important; }
.coches li { display: flex; gap: .65rem; align-items: flex-start; }
.coches .ico { color: var(--vert-2); margin-top: .22em; }
.etapes { counter-reset: e; list-style: none; padding: 0 !important; }
.etapes li { counter-increment: e; position: relative; padding-left: 3rem; margin-bottom: 1.1rem; min-height: 2.2rem; }
.etapes li::before { content: counter(e); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--vert); color: #fff; font: 600 1.05rem/2.1rem var(--titre); text-align: center; }
.encadre { background: var(--blanc); border: 1px solid var(--filet); border-radius: 10px; padding: clamp(1.2rem, 3vw, 1.8rem); }
.encadre h2, .encadre h3 { margin-top: 0; }
.encadre--vert { background: var(--vert-pale); border-color: #C6D8CB; }
.encadre--alerte { background: var(--brique-pale); border-color: #E3C2B5; }
.encadre--alerte h2, .encadre--alerte h3 { color: var(--brique-f); }
.colonne { display: grid; gap: 1.25rem; position: sticky; top: 100px; }
.prestations-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.prestations-liste li { display: flex; gap: .6rem; align-items: flex-start; }
.prestations-liste .ico { color: var(--vert-2); margin-top: .22em; }

/* FAQ */
.faq__liste { border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; font: 600 1.18rem/1.35 var(--titre); color: var(--vert-f); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2px solid var(--brique); border-bottom: 2px solid var(--brique); transform: rotate(45deg); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--brique); }
.faq__rep { padding: 0 0 1.3rem; color: var(--encre-2); max-width: 68ch; }
.faq__rep p:last-child { margin-bottom: 0; }

/* Bandeau final */
.cta { background: var(--vert-f); color: var(--sur-vert); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.cta__in { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta h2 { color: #fff; margin-bottom: .3em; }
.cta p { margin: 0; max-width: 54ch; }
.cta__btns { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 1.1rem; }
.form__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form label, .form legend { display: block; font-weight: 500; margin-bottom: .35rem; color: var(--encre); }
.form label small, .form legend small { font-weight: 400; color: var(--encre-2); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea {
  width: 100%; min-height: 50px; padding: .7em .9em; border: 1.5px solid var(--pierre-2); border-radius: var(--r);
  background: #fff; color: var(--encre); font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(27, 77, 53, .18); }
.form ::placeholder { color: #6B7069; }
.form fieldset { border: 0; margin: 0; padding: 0; }
.choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix label { margin: 0; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix span { display: inline-block; padding: .55em .95em; border: 1.5px solid var(--pierre-2); border-radius: 99px; background: #fff; cursor: pointer; font-weight: 400; font-size: .96rem; transition: all .15s; }
.choix input:checked + span { background: var(--vert); border-color: var(--vert); color: #fff; }
.choix input:focus-visible + span { outline: 3px solid var(--brique); outline-offset: 2px; }
.form__rgpd { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; color: var(--encre-2); }
.form__rgpd input { margin-top: .3rem; width: 18px; height: 18px; accent-color: var(--vert); flex: none; }
.form__rgpd label { font-weight: 400; margin: 0; color: var(--encre-2); }
.form__msg { padding: .9rem 1.1rem; border-radius: var(--r); font-weight: 500; }
.form__msg--ok { background: var(--vert-pale); color: var(--vert-f); }
.form__msg--err { background: var(--brique-pale); color: var(--brique-f); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pied de page ---------- */
.foot { background: var(--vert-f); color: var(--sur-vert); font-size: .97rem; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 2.5rem; padding-block: clamp(2.5rem, 6vw, 4rem); }
.foot__marque .logo__svg { width: 168px; margin-bottom: 1rem; }
.foot a { color: #fff; text-decoration-color: rgba(255,255,255,.35); }
.foot a:hover { color: var(--brique-pale); }
.foot__h { font: 600 1.15rem/1.2 var(--titre); color: #fff; margin: 0 0 .8rem; }
.foot__h--suite { margin-top: 1.6rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot address { font-style: normal; line-height: 1.7; margin-bottom: .8rem; }
.foot__lien-icone { display: inline-flex; gap: .4rem; align-items: center; }
.foot__horaires { margin: .5rem 0 0; display: grid; gap: .2rem; font-size: .92rem; }
.foot__horaires div { display: flex; justify-content: space-between; gap: 1rem; max-width: 260px; }
.foot__horaires dd { margin: 0; color: #fff; }
.foot .a-completer { background: rgba(244, 226, 218, .12); color: var(--brique-pale); border-color: #E6A893; }
.foot__bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.3rem 1.5rem; border-top: 1px solid rgba(214, 228, 218, .18); font-size: .88rem; }
.foot__bas p { margin: 0; }
.foot__liens { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* Barre d'appel mobile */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom)); background: rgba(247, 246, 243, .97);
    border-top: 1px solid var(--filet); box-shadow: 0 -8px 24px -18px rgba(28,38,32,.6); transition: transform .25s var(--ease);
  }
  .mbar.is-hidden { transform: translateY(110%); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; border-radius: var(--r); font-weight: 600; text-decoration: none; }
  .mbar__tel { background: var(--brique); color: #fff; }
  .mbar__devis { background: var(--vert); color: #fff; }
  body { padding-bottom: 76px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .une__grid, .intro__grid, .duo, .duo--large { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .guides { grid-template-columns: 1fr; border-top: 0; }
  .guides li + li { border-left: 0; }
  .guides li { border-top: 1px solid var(--filet); }
  .guides li:first-child { border-top: 2px solid var(--vert); }
  .guides a, .guides li:first-child a { padding: 1.1rem 0; }
  .colonne { position: static; }
  .avis { grid-template-columns: 1fr; }
  .avis__note { justify-self: start; }
}
@media (max-width: 640px) {
  body { font-size: 1.03rem; }
  .communes--2 { columns: 1; }
  .form__ligne { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; gap: 2rem; }
  .index__liste a { grid-template-columns: 48px minmax(0, 1fr) auto; gap: .9rem; padding: 1rem 0; }
  .index__illus { width: 46px; height: 46px; }
  .index__nom { font-size: 1.2rem; }
  .une__actions .btn { flex: 1 1 100%; }
  .cta__btns .btn { flex: 1 1 100%; }
}

/* Mouvement : une seule entrée douce, respectueuse des préférences */
@media (prefers-reduced-motion: no-preference) {
  .js .une__txt > *, .js .intro__txt > * { animation: monte .7s var(--ease) both; }
  .js .une__txt > :nth-child(2), .js .intro__txt > :nth-child(2) { animation-delay: .06s; }
  .js .une__txt > :nth-child(3), .js .intro__txt > :nth-child(3) { animation-delay: .12s; }
  .js .une__txt > :nth-child(4) { animation-delay: .18s; }
  .js .appel { animation: monte .8s .15s var(--ease) both; }
  @keyframes monte { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
}
@media print { .head, .mbar, .cta, .foot, .appel .btn { display: none !important; } }

/* Titres de rôle h3 posés sur un autre niveau */
.h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.2; font-weight: 620; }
/* Lien vers un guide (encadré cliquable) */
.lien-guide { display: grid; gap: .35rem; text-decoration: none; color: var(--encre); transition: border-color .2s, box-shadow .2s; }
.lien-guide:hover { border-color: var(--vert-2); box-shadow: var(--ombre); color: var(--encre); }
.lien-guide__k { display: inline-flex; align-items: center; gap: .4rem; color: var(--brique); font-weight: 600; font-size: .92rem; }
.lien-guide__t { font: 600 1.2rem/1.25 var(--titre); color: var(--vert-f); }
.lien-guide__r { color: var(--encre-2); font-size: .96rem; }

.guides--pile { grid-template-columns: 1fr; border-top: 0; }
.guides--pile li + li { border-left: 0; }
.guides--pile li { border-top: 1px solid var(--filet); }
.guides--pile li:first-child { border-top: 2px solid var(--vert); }
.guides--pile a, .guides--pile li:first-child a { padding: 1.1rem 0; }

/* Communes ayant une page */
.villes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.villes a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem 1rem; height: 100%; padding: 1.1rem 1.2rem; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r); text-decoration: none; color: var(--encre); transition: border-color .2s, box-shadow .2s; }
.villes a:hover { border-color: var(--vert-2); box-shadow: var(--ombre); color: var(--encre); }
.villes__nom { font: 600 1.3rem/1.2 var(--titre); color: var(--vert-f); grid-column: 1; }
.villes__info { grid-column: 1; color: var(--encre-2); font-size: .95rem; }
.villes .ico { grid-column: 2; grid-row: 1 / span 2; color: var(--brique); }
.coord { font-style: normal; line-height: 1.7; margin-bottom: .8rem; }
.encadre p a .ico, .encadre > p > a { display: inline-flex; align-items: center; gap: .35rem; }
.plan { columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .plan { columns: 1; } }

/* Pages intérieures sur mobile : encadré d'appel resserré (la barre d'appel reste en bas d'écran) */
@media (max-width: 640px) {
  .intro .appel__horaires, .intro .appel__note { display: none; }
  .intro .appel__etat { margin-bottom: 1rem; }
}