/* ── La police voyage AVEC le site (30 août 2026) : « Avenir Next » n'existe
   que chez Apple — Android retombait sur Roboto, plus large : lettres,
   retours à la ligne et entête différents d'un téléphone à l'autre. Nunito
   Sans variable (une graisse 200-1000 par fichier), auto-hébergée : 100 %
   des appareils dessinent les mêmes lettres. */
@font-face{
  font-family:"Nunito Sans";
  font-style:italic;
  font-weight:200 1000;
  font-display:swap;
  src:url(/police-nunito-sans-italique-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Nunito Sans";
  font-style:italic;
  font-weight:200 1000;
  font-display:swap;
  src:url(/police-nunito-sans-italique-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Nunito Sans";
  font-style:normal;
  font-weight:200 1000;
  font-display:swap;
  src:url(/police-nunito-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Nunito Sans";
  font-style:normal;
  font-weight:200 1000;
  font-display:swap;
  src:url(/police-nunito-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Palette 100 % dérivée du vert de marque #174135 (RVB 23·65·53).
   Les noms --bleu / --orange sont hérités du premier gabarit : ils désignent
   désormais le vert de marque et le vert d'appel à l'action. */
:root{
  --bleu:#174135; --bleu-fonce:#0f2d24; --bleu-clair:#dfece5;
  --orange:#2e7a5b; --orange-clair:#eaf4ee;
  --encre:#13221c; --encre-2:#465f54; --encre-3:#5b7267;
  --fond:#f2f6f4; --surface:#ffffff; --surface-2:#e6efea; --trait:#cfdfd6;
  --vert:#1f5c44; --rouge:#1f5c44;
  --form-bg:#174135; --final-bg:#0f2d24;
  /* Police du site actuel : Avenir (Light pour le texte, Heavy pour les titres).
     Native sur Apple ; en production, équivalent auto-hébergé (Nunito Sans) pour Windows/Android. */
  --sans:"Nunito Sans","Avenir Next",Avenir,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; /* annotations de maquette seulement */
  --max:1080px; --lisible:68ch;
  /* Libération Express : bloc de couleur constant dans les deux thèmes,
     donc défini une seule fois — surcharger en mode sombre le ferait
     changer de teinte alors que le texte blanc, lui, ne change pas. */
  --promo-fond:#1f5a48; --promo-clair:#b6e6cd; --promo-voile:rgba(31,90,72,.90);
  /* Vert vif réservé à l'étiquette Libération Express : il doit accrocher
     l'œil sur le fond sombre, là où le vert pastel se fondait. */
  --promo-vif:#5df6a6;
}
/* Pas de bascule automatique en sombre : le site s'affiche clair pour tout le
   monde, comme approuvé par le propriétaire (captures du 29 août). La palette
   sombre reste définie ci-dessous, activable seulement par data-theme="dark". */
:root[data-theme="dark"]{
  --bleu:#8cc7ad; --bleu-fonce:#c2e2d3; --bleu-clair:#1b3229;
  --orange:#4a9a77; --orange-clair:#152a21;
  --encre:#e1ece6; --encre-2:#a2b8ac; --encre-3:#7f978b;
  --fond:#0b1511; --surface:#12211a; --surface-2:#182c23; --trait:#2a453a;
  --vert:#7fc2a4; --rouge:#7fc2a4;
  --form-bg:#143529; --final-bg:#0d231b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance;letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(28px,4.6vw,40px)}
h2{font-size:clamp(21px,2.9vw,27px)}
h3{font-size:19px}
p{margin:0}
a{color:var(--bleu)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px}
code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);padding:1px 5px;border-radius:3px}
.max{width:min(var(--max),100%);margin:0 auto;padding:0 20px}
section{padding:38px 0;border-top:1px solid var(--trait)}
section>.max{display:flex;flex-direction:column;gap:16px}
.lis{max-width:var(--lisible)}

#barre{position:sticky;top:0;z-index:50;background:var(--encre);color:#fff;
  font-family:var(--mono);font-size:12.5px;padding:9px 20px;display:flex;flex-wrap:wrap;
  gap:8px 18px;align-items:center;justify-content:center}
#barre b{font-weight:600;letter-spacing:.04em}
#barre button{font:inherit;background:#fff;color:var(--encre);border:0;padding:5px 12px;
  border-radius:4px;cursor:pointer;font-weight:600}
#barre button[aria-pressed="true"]{background:var(--orange);color:#fff}
.ann{display:none}
body.annote .ann{display:block}
.ann{font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--encre-2);
  background:var(--surface-2);border-left:3px solid var(--bleu);padding:8px 12px;border-radius:0 3px 3px 0}
.ann b{color:var(--encre);letter-spacing:.05em}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  padding:2px 6px;border-radius:2px;color:#fff;vertical-align:2px;margin-left:8px}
.tag.g{background:var(--encre-3)} .tag.d{background:var(--bleu)} .tag.u{background:var(--orange)}
body:not(.annote) .tag{display:none}

header.site{background:var(--surface);border-bottom:1px solid var(--trait)}
header.site .max{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
header.site img{width:250px;max-width:60vw}
.logo-lien{display:block;flex:none;line-height:0}
.entete-droite{display:flex;align-items:center;gap:14px;font-size:15px}
.tel{font-weight:700;color:var(--encre);text-decoration:none;white-space:nowrap;font-size:19px}
.langue{font-size:12px;color:var(--encre-3);text-decoration:none;
  border:1px solid var(--trait);padding:4px 8px;border-radius:3px}
/* padding-block : le raccourci « padding:11px 0 » écrasait le 20px horizontal
   de .max — « Accueil » collait au bord de l'écran (vu par le propriétaire). */
.fil{font-size:14px;color:var(--encre-2);padding-block:11px}
/* clip, pas hidden : hidden ferait de body un conteneur de défilement et
   casserait position:sticky. Un élément qui dépasse ne fera plus dériver la
   page de gauche à droite sur téléphone. */
html,body{overflow-x:clip}
.fil a{color:var(--encre-2)}

/* Héros : la photo couvre toute la largeur, le texte se pose dessus.
   La photo reste une vraie balise image, et non un background CSS : elle garde son
   alt, reste indexable dans Google Images — le site vit du référencement
   local — et le navigateur la découvre tôt, ce qui compte pour le LCP.
   Le voile reprend l'idiome de la section promo : sans lui, du texte blanc
   sur un ciel clair tombe sous le seuil de contraste. Il est dégradé, dense
   à gauche où vit le texte, léger à droite où la photo respire. */
.heros{position:relative;isolation:isolate;overflow:hidden;border-top:0;padding:0;
  display:flex;flex-direction:column;justify-content:center;background:var(--promo-fond)}
.heros-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 45%;z-index:-2;margin:0;max-width:none}
/* La droite s'éclaircit (demande du 29 août : « mieux voir le conteneur sur
   le camion ») : le texte vit dans les 58 % de gauche, qui gardent leur
   assise sombre — seul le côté du camion se dévoile. */
.heros-voile{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(15,45,36,.94) 0%,rgba(15,45,36,.86) 45%,
    rgba(15,45,36,.38) 66%,rgba(15,45,36,.10) 100%)}
.heros-contenu{display:flex;flex-direction:column;gap:18px;max-width:58%;
  padding-top:54px;padding-bottom:54px}
.heros h1{color:#fff}
.heros .reponse{color:rgba(255,255,255,.92);border-left-color:var(--promo-clair)}
.heros .reassurance span{background:rgba(9,32,25,.55);color:#fff;
  border:1px solid rgba(255,255,255,.28)}
.heros .btn-1{background:var(--promo-clair);color:#0f2d24}
.heros .btn-2{color:#fff;border-color:rgba(255,255,255,.55)}
/* À l'impression la photo disparaît : le texte doit redevenir lisible sur blanc. */
@media print{
  .heros-photo,.heros-voile{display:none}
  .heros h1,.heros .reponse{color:#000}
}
@media(max-width:820px){
  .heros-contenu{max-width:100%;padding-top:38px;padding-bottom:38px}
  .heros-photo{object-position:center 42%}
}
.reponse{font-size:clamp(19px,1.55vw,22px);line-height:1.55;color:var(--encre-2);border-left:3px solid var(--bleu);padding-left:18px}
.reassurance{display:flex;flex-wrap:wrap;gap:8px}
.reassurance span{background:var(--bleu-clair);color:var(--bleu-fonce);font-size:15.5px;font-weight:600;
  padding:6px 12px;border-radius:99px;white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;
  padding:14px 24px;border-radius:5px;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:17px}
.btn-1{background:var(--orange);color:#fff}
.btn-2{background:transparent;color:var(--bleu);border-color:var(--bleu)}
.heros figure{margin:0}
.heros figure img{border-radius:6px}

.formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.format{background:var(--surface);border:1px solid var(--trait);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column}
.format img{background:var(--surface-2);padding:14px;width:100%;height:210px;object-fit:contain;display:block}
.format-corps{padding:14px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.format h3{color:var(--bleu-fonce)}
.dim{font-size:15px;color:var(--encre-2)}
.format ul{margin:0;padding-left:18px;font-size:16.5px;color:var(--encre-2);display:flex;flex-direction:column;gap:3px}

.form-zone{background:var(--form-bg);color:#fff;position:relative;overflow:hidden}
/* ── Filigranes de marque (30 août 2026, demande du propriétaire : « un vert
   uni comme ça, ça fait mort ») : deux logos blancs très doux, flous, en
   diagonale derrière la carte. Décoratifs : aria vide, aucun clic. */
.form-zone::before,.form-zone::after{content:"";position:absolute;z-index:0;
  background:url(/logo-blanc.webp) center/contain no-repeat;
  opacity:.06;filter:blur(2.5px);pointer-events:none}
.form-zone::before{width:min(430px,60vw);height:160px;top:34px;left:-56px;
  transform:rotate(-8deg)}
.form-zone::after{width:min(540px,70vw);height:200px;bottom:26px;right:-70px;
  transform:rotate(6deg)}
.form-zone>.max{position:relative;z-index:1}
.form-zone h2,.form-zone h3{color:#fff}
/* ── La carte de soumission (29 août 2026) : le formulaire devient une
   feuille blanche posée sur le vert — l'allure du document qu'on remet au
   client. Champs adoucis, étoiles Google en tête, bouton pleine largeur. */
.form-carte{background:#fff;color:var(--encre);border-radius:18px;width:100%;
  max-width:880px;margin:0 auto;padding:clamp(22px,4vw,38px);
  box-shadow:0 24px 60px rgba(0,0,0,.30);display:flex;flex-direction:column;gap:22px}
.form-carte h2{color:var(--encre);margin:0}
.form-tete{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  padding-bottom:16px;border-bottom:1px solid #e2ece5}
.form-sous{margin:0;font-size:16.5px;color:var(--encre-2)}
.form-preuve{margin:2px 0 0;display:flex;align-items:baseline;gap:8px;font-size:15.5px;
  color:var(--encre-2)}
.form-preuve b{color:var(--encre);font-size:16.5px}
.form-etoiles{color:#FBBC05;letter-spacing:2.5px;font-size:15.5px}
.form-grille{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.form-grille{grid-template-columns:1fr}}
.champ{display:flex;flex-direction:column;gap:6px}
.champ.large{grid-column:1/-1}
.champ label{font-size:14.5px;font-weight:700}
.champ .req{color:var(--orange)}
.champ input,.champ select,.champ textarea{font:inherit;font-size:16px;padding:12px 14px;
  border-radius:10px;border:1.5px solid #d8e3dc;background:#f6faf7;color:#16232c;width:100%;
  transition:border-color .15s,box-shadow .15s}
.champ :is(input,select,textarea):focus{outline:2px solid transparent;
  border-color:var(--form-bg);box-shadow:0 0 0 3px rgba(23,65,53,.16)}
/* appearance:none retire la flèche du système — on la redessine (data URI),
   sinon le select n'a plus aucun indice visuel qu'il se déroule. */
.champ select{-webkit-appearance:none;appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23445b52' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.champ textarea{min-height:88px;resize:vertical}
.apres{background:#eef6f0;border-left:4px solid var(--form-bg);border-radius:8px;
  padding:14px 16px;font-size:15.5px;color:var(--encre-2)}
.apres strong{color:var(--encre)}
.form-zone .btn-1{background:var(--orange);width:100%;padding:16px 20px;font-size:17.5px;
  border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.10)}

.encadre{background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:18px 20px;
  display:flex;flex-direction:column;gap:10px}
.encadre.alerte{border-left:4px solid var(--orange);background:var(--orange-clair)}
.encadre.guide{border-left:4px solid var(--bleu);flex-direction:row;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.deux{grid-template-columns:1fr}}
ul.liste,ol.liste{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--encre-2)}
ol.liste li::marker{font-weight:700;color:var(--bleu)}
ul.coche{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--encre-2)}
ul.coche li{padding-left:26px;position:relative}
ul.coche li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:700}
.tw{overflow-x:auto;border:1px solid var(--trait);border-radius:6px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:16px;min-width:420px}
table:has(thead th:nth-child(2):last-child){table-layout:fixed}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--trait)}
thead th{background:var(--surface-2);font-size:13.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--encre-3);font-weight:500}
tbody tr:last-child td{border-bottom:0}
/* Première colonne : une étiquette, pas une valeur. Le nowrap forçait une
   largeur énorme dès qu'elle listait des villes, et comprimait le texte de
   droite en colonne de vingt caractères. Elle se replie maintenant, et sa
   largeur est bornée pour que le contenu utile garde la place. */
td.n{font-weight:700;font-variant-numeric:tabular-nums;white-space:normal;
  color:var(--encre);vertical-align:top;line-height:1.4}
/* Les largeurs ne valent QUE pour les tableaux à deux colonnes (règle /
   conséquence). Le guide en a à quatre : leur imposer 31/69 écraserait les
   colonnes du milieu à zéro et superposerait les textes. */
thead:has(th:nth-child(2):last-child) th:first-child{width:31%}
thead:has(th:nth-child(2):last-child) th:last-child{width:69%}
/* Repli pour les navigateurs sans :has() — la colonne d'étiquette reste
   bornée sans jamais écraser les autres. */
td.n{max-width:34ch}
th,td{vertical-align:top}
tbody td:last-child{line-height:1.55}
/* Sous 700 px, le tableau règle/conséquence devient des cartes empilées :
   un tableau à défilement latéral est illisible au pouce. L'en-tête disparaît
   (chaque carte se comprend seule), la règle devient le titre de sa carte. */
@media(max-width:700px){
  .tw{border:0;background:transparent;overflow:visible}
  .tw table{min-width:0}
  .tw thead{display:none}
  .tw tr{display:block;background:var(--surface);border:1px solid var(--trait);
    border-radius:8px;margin-bottom:10px}
  .tw td{display:block;border-bottom:0;padding:4px 15px}
  .tw td.n{white-space:normal;font-family:var(--sans);font-weight:700;
    padding-top:13px;color:var(--encre)}
  .tw td:last-child{padding-bottom:13px;color:var(--encre-2)}
}
/* Index régionaux : une grappe de villes par sous-secteur. Réutilise .voisines
   (les pastilles de villes voisines du bas des pages) — rien de neuf à styler. */
.groupe-villes{margin-top:6px}
.groupe-villes h3{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.groupe-villes .compte{font-size:14px;font-weight:500;color:var(--encre-3)}
.groupe-villes+.groupe-villes{margin-top:26px;padding-top:22px;border-top:1px solid var(--trait)}
/* Vérificateur de permis : une ville = un <details> natif. Marche sans
   JavaScript, au clavier, et le contenu reste dans le HTML — donc indexable,
   ce qui est tout l'intérêt SEO de la page. */
.groupe-permis{margin-top:6px}
.groupe-permis h3{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.groupe-permis .compte{font-size:14px;font-weight:500;color:var(--encre-3)}
.groupe-permis+.groupe-permis{margin-top:30px;padding-top:24px;border-top:1px solid var(--trait)}
.permis-ville{background:var(--surface);border:1px solid var(--trait);border-radius:6px;
  margin-bottom:8px}
.permis-ville summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer;
  list-style:none;padding:14px 16px;min-height:48px;font-size:16.5px}
.permis-ville summary::-webkit-details-marker{display:none}
.permis-ville summary::after{content:"";width:8px;height:8px;margin-left:auto;flex:none;
  border-right:2px solid var(--encre-3);border-bottom:2px solid var(--encre-3);
  transform:translateY(-2px) rotate(45deg)}
.permis-ville[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.permis-ville[open] summary{border-bottom:1px solid var(--trait)}
.permis-eclair{font-size:14.5px;color:var(--encre-2)}
.permis-detail{padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px;font-size:16px}
.permis-detail p{color:var(--encre-2)}
.permis-ou{display:inline-block;min-width:132px;font-weight:700;color:var(--encre)}
.permis-lien{padding-bottom:12px}
@media(max-width:620px){
  .permis-ou{display:block;min-width:0;margin-bottom:2px}
}
/* Recherche de ville : masquée sans JavaScript (le script la révèle), parce
   qu'un champ qui ne filtre rien est pire que pas de champ du tout. */
.permis-recherche{background:var(--surface);border:1px solid var(--trait);border-radius:8px;
  padding:16px 18px;margin-bottom:18px}
.permis-recherche label{display:block;font-weight:700;margin-bottom:8px;font-size:16px}
.permis-recherche input{width:100%;font:inherit;font-size:17px;padding:12px 14px;min-height:48px;
  border:1px solid var(--trait);border-radius:5px;background:var(--fond);color:var(--encre)}
.permis-recherche input:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.permis-compte{margin-top:8px;font-size:14.5px;color:var(--encre-3);min-height:1.2em}
/* Les six régions sont repliées : 76 villes déroulées faisaient sept écrans. */
details.groupe-permis{border:1px solid var(--trait);border-radius:8px;background:var(--surface-2);
  margin-bottom:10px;padding:0}
details.groupe-permis>summary{display:flex;align-items:center;gap:10px;cursor:pointer;
  list-style:none;padding:15px 18px;min-height:52px}
details.groupe-permis>summary::-webkit-details-marker{display:none}
details.groupe-permis>summary::after{content:"";width:9px;height:9px;margin-left:auto;flex:none;
  border-right:2px solid var(--encre-2);border-bottom:2px solid var(--encre-2);
  transform:translateY(-3px) rotate(45deg)}
details.groupe-permis[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
details.groupe-permis>summary h3{display:inline-flex;align-items:baseline;gap:10px;margin:0;
  font-size:18px}
details.groupe-permis[open]>summary{border-bottom:1px solid var(--trait)}
details.groupe-permis .permis-ville{margin:8px 12px}
details.groupe-permis .permis-ville:first-of-type{margin-top:12px}
details.groupe-permis+details.groupe-permis{margin-top:0;padding-top:0;border-top:1px solid var(--trait)}
/* Preuve sociale du héros — rectangle vert translucide posé sur la photo
   (même style à tous les formats depuis le 25 août, demande du propriétaire :
   la boîte blanche tranchait trop), couleurs officielles de Google, et un
   diaporama de VRAIS avis cités tels quels (DECISIONS § 7). Sans JavaScript,
   le premier avis reste affiché : la boîte ne dépend jamais du script. La note
   s'AFFICHE, elle n'est jamais balisée en aggregateRating (DECISIONS § 3). */
.heros-avis>.max{display:flex;flex-direction:row;align-items:center;
  justify-content:space-between;gap:36px}
.avis-panneau{flex:none;width:308px;display:flex;flex-direction:column;gap:14px;
  padding:20px 22px;border-radius:20px;
  background:rgba(9,32,25,.58);border:1.5px solid rgba(251,188,5,.75);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(9,32,25,.35),0 10px 30px rgba(9,32,25,.30)}
.avis-panneau{position:relative}
.avis-pause{position:absolute;top:9px;right:9px;width:30px;height:30px;border:0;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:flex;
  align-items:center;justify-content:center;cursor:pointer;padding:0}
.avis-pause svg{width:13px;height:13px;display:block}
.avis-pause:hover{background:rgba(255,255,255,.28)}
.avis-entete{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.18)}
.avis-g{display:flex;gap:1px;font-size:22px;font-weight:700;line-height:1;letter-spacing:-.5px}
.avis-g i{font-style:normal}
.avis-g .g1{color:#4285F4}.avis-g .g2{color:#EA4335}.avis-g .g3{color:#FBBC05}
.avis-g .g4{color:#4285F4}.avis-g .g5{color:#34A853}.avis-g .g6{color:#EA4335}
.avis-etoiles{color:#FBBC05;font-size:19px;letter-spacing:3px;line-height:1}
.avis-chiffres{display:flex;align-items:baseline;gap:8px}
.avis-note{font-size:29px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;
  line-height:1}
.avis-nb{font-size:16px;font-weight:700;color:#fff}
/* Le diaporama : les avis sont empilés, un seul visible. La hauteur suit le
   plus long — la boîte ne saute pas d'un avis à l'autre. */
.avis-diaporama{position:relative;display:grid;align-content:center;min-height:7.5em}
.avis-item{grid-area:1/1;margin:0;opacity:0;visibility:hidden}
.avis-item.visible{opacity:1;visibility:visible}
@media (prefers-reduced-motion:no-preference){
  .avis-item{transition:opacity .45s ease}
}
.avis-item blockquote{margin:0;font-size:15px;line-height:1.5;
  color:rgba(255,255,255,.88);font-style:italic}
.avis-item blockquote::before{content:"«\00a0"}
.avis-item blockquote::after{content:"\00a0»"}
.avis-item figcaption{margin-top:9px;font-size:13.5px;font-weight:700;color:#fff}
.avis-fiche{font-weight:500;color:rgba(255,255,255,.66)}
@media(max-width:900px){
  .heros-avis>.max{flex-direction:column;align-items:flex-start;gap:26px}
  .avis-panneau{width:100%;align-self:center}
}
/* Sur téléphone ET tablette, la boîte blanche tranchait trop et son bord
   touchait la section suivante. Elle devient un rectangle vert translucide
   posé sur la photo — discret, dans le ton du héros — et se décolle du bas.
   Le palier va jusqu'à 900 px : c'est exactement là que le héros passe en
   colonne et que la boîte blanche se retrouvait plein cadre sur la photo. */
@media(max-width:900px){
  .heros-avis>.max{gap:18px}
  .avis-panneau{max-width:none;width:100%;padding:14px 16px;gap:9px;
    border-radius:12px;margin-bottom:38px;
    background:rgba(9,32,25,.58);border:1.5px solid rgba(251,188,5,.75);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    box-shadow:0 0 0 1px rgba(9,32,25,.35),0 10px 30px rgba(9,32,25,.30)}
  .avis-entete{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
    align-items:center;gap:9px;text-align:left;padding-bottom:10px;
    border-bottom-color:rgba(255,255,255,.18)}
  .avis-g{font-size:16px}
  .avis-etoiles{font-size:14px;letter-spacing:1.5px}
  .avis-chiffres{gap:6px}
  .avis-note{font-size:19px;color:#fff}
  .avis-nb{font-size:13px;color:#fff}
  .avis-diaporama{min-height:4.4em}
  .avis-item blockquote{font-size:13px;line-height:1.45;color:rgba(255,255,255,.86)}
  .avis-item figcaption{font-size:12px;margin-top:6px;color:#fff}
  .avis-fiche{color:rgba(255,255,255,.66)}
}
/* Outil « Trouvez votre format » — trois questions cliquables et un résultat.
   Sans JavaScript, les boutons sont inertes mais le tableau sous l'outil porte
   déjà toutes les réponses : rien n'est caché derrière un clic. */
.outil{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.outil-q{border:1px solid var(--trait);border-radius:10px;background:var(--surface);
  padding:16px 18px;margin:0}
.outil-q legend{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17.5px;
  padding:0 6px;margin-left:-6px}
.outil-num{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  flex:none;border-radius:50%;background:var(--bleu);color:#fff;font-size:14.5px}
.outil-q.repondu .outil-num{background:var(--vert)}
.outil-choix{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.outil-opt{display:flex;align-items:center;gap:9px;min-height:48px;padding:10px 15px;
  border:1px solid var(--trait);border-radius:99px;background:var(--fond);cursor:pointer;
  font-size:15.5px;line-height:1.35}
.outil-opt input{margin:0;flex:none;accent-color:var(--bleu);width:17px;height:17px}
.outil-opt:hover{border-color:var(--bleu)}
.outil-opt:has(input:checked){background:var(--bleu-clair);border-color:var(--bleu);
  font-weight:600}
.outil-opt:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.outil-q .source{margin-top:11px}

.outil-resultat{display:block;border-radius:12px;padding:22px 24px;
  background:var(--form-bg);color:#fff}
.outil-libelle{font-size:13.5px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--promo-clair);font-weight:700}
.outil-format{font-size:clamp(30px,4.4vw,42px);font-weight:700;line-height:1.1;margin-top:4px}
.outil-matiere{color:rgba(255,255,255,.82);font-size:16.5px;margin-top:2px}
.outil-note{margin-top:12px;font-size:16px;color:rgba(255,255,255,.88)}
.outil-avert{margin-top:14px;padding:12px 15px;border-radius:8px;font-size:15.5px;
  background:rgba(255,255,255,.10);border-left:3px solid var(--promo-clair)}
.outil-acces{margin-top:14px;padding:13px 15px;border-radius:8px;font-size:15.5px;
  background:rgba(255,255,255,.08)}
.outil-acces.alerte{background:rgba(255,255,255,.13);border-left:3px solid #f5c518}
.outil-acces b{display:block;margin-bottom:4px}
.outil-acces p{color:rgba(255,255,255,.86)}
.outil-reserve{margin-top:16px;font-size:14px;color:rgba(255,255,255,.66);line-height:1.5}
.outil-actions{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-top:18px}
.outil-resultat .btn-1{background:var(--promo-clair);color:#0f2d24}
.outil-resultat .btn-2{color:#fff;border-color:rgba(255,255,255,.55)}
.outil-reprise{font:inherit;font-size:15px;background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.78);text-decoration:underline;padding:10px 4px;min-height:44px}
.outil-reprise:hover{color:#fff}
@media(max-width:620px){
  .outil-choix{flex-direction:column;gap:8px}
  .outil-opt{border-radius:10px}
  .outil-resultat{padding:18px 17px}
}
/* Les visuels de l'outil. Vignette de matière sur chaque choix, et le conteneur
   recommandé en grand dans le résultat — ce sont les mêmes images que la section
   « Les trois formats », déjà dans la page : rien de plus à télécharger. */
.outil-banque{display:none}
.outil-vignette{width:46px;height:34px;object-fit:contain;flex:none;
  border-radius:5px;background:#fff;padding:2px}
.outil-q[data-cle="matiere"] .outil-opt{padding:8px 15px 8px 11px}
.outil-tete{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.outil-photo{width:180px;max-width:44%;height:auto;flex:none;border-radius:10px;
  background:#fff;padding:9px;box-shadow:0 8px 22px rgba(9,32,25,.28)}
@media (prefers-reduced-motion:no-preference){
  .outil-photo{animation:outil-apparait .4s ease}
}
@keyframes outil-apparait{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media(max-width:620px){
  .outil-tete{gap:14px}
  .outil-photo{width:120px;padding:7px}
  .outil-vignette{width:40px;height:30px}
}
/* ═══════════ Toiture en bardeaux — section dédiée ═══════════
   Fond sombre pour la détacher du guide, un toit dessiné au trait (aucune
   photo de toiture dans assets/), trois repères en chaîne et le compteur au
   centre. Les chiffres viennent du propriétaire : 32 pi² par paquet,
   25 paquets par tonne. Aucun prix, jamais. */
.toiture{background:var(--final-bg);color:#fff;border-top:0;
  background-image:radial-gradient(120% 90% at 85% 0%,rgba(127,194,164,.14),transparent 60%)}
.toiture>.max{display:flex;flex-direction:column;gap:26px}
.toiture h2{color:#fff}
.toit-entete{display:grid;grid-template-columns:1.35fr .65fr;gap:32px;align-items:center}
.toit-oeil{display:flex;align-items:center;gap:11px;color:var(--promo-clair);font-weight:700;
  font-size:14px;letter-spacing:.10em;text-transform:uppercase;margin-bottom:10px}
.toit-pastille{display:flex;width:34px;height:34px;flex:none;color:var(--promo-clair)}
.toit-pastille svg{width:100%;height:100%}
.toit-intro{margin-top:12px;font-size:17.5px;line-height:1.55;color:rgba(255,255,255,.87);
  max-width:60ch}
.toit-illus{width:100%;max-width:250px;justify-self:end;color:var(--promo-clair);opacity:.55}

.toit-chaine{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.toit-carte{display:flex;flex-direction:column;gap:7px;padding:20px 22px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.toit-icone{display:block;width:40px;height:34px;color:var(--promo-clair)}
.toit-icone svg{width:100%;height:100%}
.toit-carte b{font-size:26px;line-height:1.1;font-weight:700}
.toit-txt{font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.80)}

/* Deux façons de compter : en paquets, ou en pieds carrés. Les onglets
   basculent l'un vers l'autre ; la conversion se fait à 32 pi² par paquet. */
.toit-bascule{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.toit-onglet{font:inherit;font-size:15px;font-weight:600;cursor:pointer;min-height:44px;
  padding:10px 16px;border-radius:99px;border:1px solid var(--trait);background:var(--fond);
  color:var(--encre-2)}
.toit-onglet:hover{border-color:var(--bleu);color:var(--encre)}
.toit-onglet.actif{background:var(--bleu);border-color:var(--bleu);color:#fff}
.toit-onglet:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.toit-calc{background:#fff;border-radius:14px;padding:24px 26px;display:flex;
  flex-direction:column;gap:12px;box-shadow:0 16px 40px rgba(9,32,25,.32)}
.toit-calc-tete{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
  justify-content:space-between}
.toit-champ{font-weight:700;font-size:19px;color:var(--encre)}
.toit-saisie{display:flex;align-items:center;gap:11px}
.toit-saisie input{font:inherit;font-size:23px;font-weight:700;width:132px;min-height:56px;
  padding:10px 16px;border:2px solid var(--trait);border-radius:9px;background:var(--fond);
  color:var(--encre);text-align:center}
.toit-saisie input:focus-visible{outline:2px solid var(--orange);outline-offset:2px;
  border-color:var(--bleu)}
.toit-unite{font-size:17px;color:var(--encre-2);font-weight:600}
.toit-aide{font-size:14.5px;color:var(--encre-3);line-height:1.5;margin:0}

.toit-resultat[hidden]{display:none}
.toit-resultat{display:block;margin-top:4px;padding:20px 22px;border-radius:11px;
  background:var(--form-bg);color:#fff}
.toit-format{font-size:clamp(27px,3.8vw,36px);font-weight:700;line-height:1.1;
  color:var(--promo-clair)}
.toit-phrase{margin-top:9px;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.90)}
.toit-phrase b{color:#fff}
/* Deux options côte à côte : à partir de 50 paquets, le 20 et le 40 verges
   sont tous deux valables — le volume rentre, c'est le tonnage compris qui
   diffère. Le client tranche selon qu'il veut, ou non, en profiter pour
   faire du ménage. */
/* Le nombre de paquets : c'est LA réponse quand le client compte en pieds
   carrés — il doit se lire d'un coup d'oeil, avant même le format. */
.toit-conv{margin:-4px 0 18px;padding:20px 22px;border-radius:12px;text-align:center;
  background:linear-gradient(160deg,rgba(182,230,205,.22),rgba(182,230,205,.09));
  border:1px solid rgba(182,230,205,.45)}
.toit-conv-tete{font-size:16px;font-weight:600;color:rgba(255,255,255,.85);margin:0}
.toit-conv-nombre{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:6px 12px;margin:6px 0 0}
.toit-conv-nombre b{font-size:clamp(46px,8vw,68px);font-weight:700;line-height:1;
  color:var(--promo-clair);letter-spacing:-.02em}
.toit-conv-nombre span{font-size:clamp(19px,2.6vw,24px);font-weight:700;color:#fff}
.toit-conv-calcul{margin:9px 0 0;font-size:14.5px;line-height:1.5;
  color:rgba(255,255,255,.62)}
.toit-conv sup{font-size:.62em;vertical-align:super;line-height:0}
.toit-chapeau{font-size:17px;line-height:1.55;color:rgba(255,255,255,.90)}
.toit-chapeau b{color:#fff}
.toit-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;margin-top:16px}
.toit-option{padding:16px 18px;border-radius:10px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15)}
.toit-option.vedette{background:rgba(182,230,205,.13);border-color:var(--promo-clair)}
.toit-opt-format{font-size:23px;font-weight:700;line-height:1.1;color:var(--promo-clair)}
.toit-opt-titre{margin-top:5px;font-size:15px;font-weight:700;color:#fff}
.toit-opt-corps{margin-top:7px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82)}
.toit-opt-corps b{color:#fff}
.toit-detail{margin-top:10px;font-size:14.5px;color:rgba(255,255,255,.62)}
.toit-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:16px}
.toit-resultat .btn-1{background:var(--promo-clair);color:#0f2d24}
.toit-resultat .btn-2{color:#fff;border-color:rgba(255,255,255,.55)}

.toit-exemples{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.toit-ex{padding:20px 22px;border-radius:12px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14)}
.toit-ex h3{color:var(--promo-clair);font-size:17.5px;margin-bottom:8px}
.toit-ex p{color:rgba(255,255,255,.86);font-size:16px;line-height:1.5}
.toit-ex strong{color:#fff}
.toit-source{color:rgba(255,255,255,.52)}

@media(max-width:820px){
  .toit-entete{grid-template-columns:1fr;gap:20px}
  .toit-illus{max-width:190px;justify-self:start}
}
@media(max-width:620px){
  .toit-calc{padding:19px 17px}
  .toit-calc-tete{flex-direction:column;align-items:flex-start;gap:12px}
  .toit-saisie input{width:118px;font-size:21px}
  .toit-carte b{font-size:23px}
}
.materiaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:14px}
.mat{background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:12px;text-align:center;
  display:flex;flex-direction:column;gap:7px;align-items:center;font-size:13.5px;color:var(--encre-2)}
.mat img{width:120px}
.faq{display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--trait);border-radius:6px}
.faq details{border-bottom:1px solid var(--trait)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:15px 18px;font-weight:600;list-style:none;display:flex;
  justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--bleu);font-size:20px;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 18px 16px;color:var(--encre-2);max-width:var(--lisible)}
.avis{background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:18px 20px;
  display:flex;flex-direction:column;gap:8px}
.avis blockquote{margin:0;font-size:18px;color:var(--encre)}
.avis cite{font-style:normal;font-weight:600;font-size:15.5px;color:var(--encre-2)}
.trou{font-size:12px;color:var(--orange);border:1px dashed var(--orange);
  padding:9px 12px;border-radius:4px}
.voisines{display:flex;flex-wrap:wrap;gap:9px}
.voisines a{background:var(--surface);border:1px solid var(--trait);border-radius:99px;padding:7px 15px;
  text-decoration:none;font-size:15px;font-weight:600}
/* Section promo — Libération Express. Bloc de couleur pleine largeur, de la
   même famille que .form-zone et .final : identique dans les deux thèmes, texte
   blanc. Le fond photographique passe sous un voile vert dense — sans lui, le
   texte blanc tombe sous le seuil de contraste sur les zones claires du ciel.
   Les numéros viennent d'un compteur CSS et les icônes de nth-child : le même
   balisage sert donc au gabarit de ville (en dur) et aux pages transverses
   (boucle sur les données). */
.promo{color:#fff;border-top:0;padding-bottom:38px;border-radius:0 0 26px 26px;
  overflow:hidden;background-color:var(--promo-fond);
  background-image:linear-gradient(var(--promo-voile),var(--promo-voile)),
    radial-gradient(115% 85% at 12% 0%,rgba(255,255,255,.09),transparent 60%),
    url("/livraison-conteneur-20-verges-entree-pave-uni-megabac.webp");
  background-size:cover;background-position:center,center,center 42%;
  background-repeat:no-repeat}
.promo>.max{position:relative;gap:20px}
.promo h2{color:#fff;font-size:clamp(26px,3.6vw,36px)}
.promo .lis{color:rgba(255,255,255,.88)}
.promo strong{color:#fff}
.promo .source{color:rgba(255,255,255,.62)}
.promo .btn-1{background:var(--promo-clair);color:#0f2d24}
.promo .btn-2{color:#fff;border-color:rgba(255,255,255,.5)}
.promo-accent{color:var(--promo-clair)}

.promo-etiquette{display:flex;align-items:center;gap:11px;color:var(--promo-vif);
  text-shadow:0 0 18px rgba(93,246,166,.42);
  font-weight:700;font-size:19px;letter-spacing:.10em;text-transform:uppercase}
.promo-etiquette svg{width:32px;height:32px;flex:none}
/* Respiration lente de l'étiquette, et seulement si la personne n'a pas demandé
   moins d'animations. Volontairement lente : au-delà de trois clignotements par
   seconde, c'est un risque pour les personnes photosensibles. */
@media (prefers-reduced-motion:no-preference){
  .promo-etiquette{animation:promo-respire 2.1s ease-in-out infinite}
}
@keyframes promo-respire{0%,100%{opacity:1}50%{opacity:.18}}

.promo-chrono{position:absolute;top:-4px;right:8px;width:min(300px,24vw);height:auto;
  color:var(--promo-clair);opacity:.20;pointer-events:none;z-index:0}
.promo>.max>*:not(.promo-chrono){position:relative;z-index:1}

.promo-etapes{list-style:none;margin:0;padding:0;counter-reset:etape;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.promo-etapes li{counter-increment:etape;display:flex;flex-direction:column;gap:9px;
  padding:20px;border-radius:10px;background:rgba(9,32,25,.42);
  border:1px solid rgba(255,255,255,.20)}
.etape-entete{display:flex;align-items:center;gap:11px}
.etape-num{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--promo-clair);color:#0f2d24;font-weight:700;
  font-size:16px;flex:none}
.etape-num::before{content:counter(etape)}
.etape-icone{width:26px;height:26px;flex:none;background-repeat:no-repeat;
  background-position:center;background-size:contain}
.promo-etapes li:nth-child(1) .etape-icone{background-image:url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cfe8dc" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>")}
.promo-etapes li:nth-child(2) .etape-icone{background-image:url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cfe8dc" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 3h15v13H1z"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>")}
.promo-etapes li:nth-child(3) .etape-icone{background-image:url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cfe8dc" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 6v12"/><path d="M14.8 9.3a2.6 2.6 0 0 0-2.5-1.5h-.6a2.35 2.35 0 0 0 0 4.7h.6a2.35 2.35 0 0 1 0 4.7h-.6a2.6 2.6 0 0 1-2.5-1.5"/></svg>")}
.etape-titre{display:block;font-weight:700;font-size:18px;line-height:1.3}
.etape-titre .montant{display:inline-block;font-size:1.6em;line-height:1;
  color:var(--promo-clair);letter-spacing:-.01em;vertical-align:-2px}
.etape-detail{display:block;color:rgba(255,255,255,.86);font-size:16.5px;line-height:1.55}

.promo-limite{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:17px 19px;border-radius:10px;background:rgba(9,32,25,.42);
  border:1px solid rgba(255,255,255,.26);color:rgba(255,255,255,.94);font-size:16px}
.promo-limite svg{width:24px;height:24px;color:var(--promo-clair);flex:none}

@media(max-width:820px){
  .promo-etapes{grid-template-columns:1fr}
  .promo-chrono{width:150px;right:-26px;top:-10px;opacity:.15}
}
.repere{display:flex;align-items:center;gap:10px;background:var(--bleu-clair);color:var(--bleu-fonce);
  padding:8px 12px;border-radius:5px;font-size:14px;font-weight:600;line-height:1.35}
.repere svg{width:46px;height:auto;flex:none;color:var(--bleu)}
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.galerie img{border-radius:6px;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.quartiers{display:flex;flex-wrap:wrap;gap:9px}
.quartiers span{background:var(--surface);border:1px solid var(--trait);border-radius:99px;padding:7px 15px;
  font-size:15px;color:var(--encre-2)}
.source{font-size:13.5px;color:var(--encre-2)}
footer.site{background:var(--encre);color:#c9d6de;padding:34px 0;font-size:16px}
footer.site .max{display:flex;flex-direction:column;gap:12px}
footer.site a{color:#fff}
/* Les pastilles de liens gardent un fond clair : leur texte doit rester foncé,
   sinon on obtient du blanc sur blanc dans le pied de page. */
footer.site .voisines a{color:var(--encre)}
.final{background:var(--final-bg);color:#fff;text-align:center}
.final h2{color:#fff}
.final .max{align-items:center}
@media (prefers-reduced-motion:no-preference){.btn,.voisines a{transition:opacity .12s ease}}
.btn:hover{opacity:.9}

/* ═══════════ Menu principal ═══════════
   Items et cibles : DECISIONS.md § 1bis (validés le 14 août 2026) ; les URL
   anglaises viennent de docs/urls/plan-urls.csv, la source qui fait foi.
   EN-TÊTE À DEUX ÉTAGES : la colonne du site fait 1080 px, or logo + 7 items +
   téléphone + bouton en réclament près de 1270. Plutôt que de rapetisser le
   texte sous le lisible, le menu prend sa propre ligne ; le téléphone et le
   bouton restent « toujours visibles à droite », comme le veut la décision.
   Aucun JavaScript : case à cocher pour le tiroir mobile, <details> natif pour
   le sous-menu — donc au clavier, sans réseau et sans script tiers. */
header.site .max{flex-wrap:wrap;row-gap:12px;gap:12px}
header.site img{width:210px}
.entete-droite{gap:12px}
.menu-bascule{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.menu-ouvrir{display:none;align-items:center;gap:9px;cursor:pointer;user-select:none;
  min-height:48px;padding:11px 14px;border:1px solid var(--trait);border-radius:5px;
  background:var(--surface-2);color:var(--encre);font-weight:700;font-size:16px}
.menu-ouvrir svg{width:21px;height:21px;flex:none}
.menu-bascule:focus-visible+.menu-ouvrir{outline:2px solid var(--orange);outline-offset:2px}

.menu{order:3;flex-basis:100%;min-width:0;border-top:1px solid var(--trait);
  margin-top:2px;padding-top:4px}
.menu ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  justify-content:flex-start;gap:2px;flex-wrap:wrap}
.menu a,.menu summary{display:flex;align-items:center;gap:6px;min-height:44px;
  padding:9px 6px;border-radius:5px;text-decoration:none;color:var(--encre);
  font-weight:600;font-size:15px;white-space:nowrap}
.menu a:hover,.menu summary:hover{background:var(--surface-2)}
.menu a{margin-right:9px}
.menu details{position:relative}
.menu summary{cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:7px;height:7px;margin-left:1px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.menu details[open]>summary{background:var(--surface-2)}
.menu details[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.tiroir-liste{position:absolute;top:calc(100% + 6px);left:0;z-index:55;
  display:flex;flex-direction:column;min-width:236px;padding:6px;
  background:var(--surface);border:1px solid var(--trait);border-radius:6px;
  box-shadow:0 12px 28px rgba(15,45,36,.18)}
.tiroir-liste a{padding:11px 12px;margin-right:0}
.tiroir-liste .toutes{margin-top:4px;padding-top:12px;border-top:1px solid var(--trait);
  color:var(--bleu);font-weight:700}
.entete-droite .btn{padding:10px 15px;font-size:15px;min-height:44px}

@media(max-width:1180px){
  .menu-ouvrir{display:inline-flex;order:2}
  .entete-droite{order:1}
  .menu{display:none;border-top:0;margin-top:0;padding-top:0}
  .menu a{margin-right:0}
  .menu-bascule:checked~.menu{display:block}
  .menu ul{flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--trait);padding-top:6px}
  .menu a,.menu summary{min-height:48px;font-size:16.5px;padding:12px 4px;border-radius:0}
  .menu li+li{border-top:1px solid var(--trait)}
  .menu summary::after{margin-left:auto}
  /* Dans le tiroir, le sous-menu se déplie sur place : rien ne flotte. */
  .tiroir-liste{position:static;min-width:0;padding:0 0 8px 14px;border:0;
    box-shadow:none;background:transparent}
  .tiroir-liste a{min-height:46px;font-size:16px}
  .tiroir-liste .toutes{border-top:0;margin-top:0}
}
@media(max-width:520px){
  header.site img{width:190px}
  .entete-droite{gap:10px;font-size:14px}
  .tel{font-size:17px}
}

/* ── L'entête mobile en UNE rangée (30 août 2026, demande du propriétaire :
   « un beau menu mobile ») : logo + EN + Menu, rien d'autre — la barre fixe
   du bas porte déjà Appeler et Soumission rapide, inutile de les répéter en
   haut. Téléphone et soumission déménagent EN TÊTE du menu déroulant, en
   grands boutons pleine largeur. */
.menu-actions{display:none}
@media(max-width:680px){
  header.site .max{row-gap:0;gap:10px;padding-top:10px;padding-bottom:10px}
  header.site img{width:150px}
  .entete-droite{order:1;gap:8px;margin-left:auto}
  .langue{min-width:44px;min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
  .menu-ouvrir{order:2}
  .menu{order:3;flex-basis:100%;width:100%}
}
/* Les deux grands boutons vivent dans L'ENTÊTE, visibles EN TOUT TEMPS
   (demande du propriétaire, 30 août) : rangée 1 = logo · EN · Menu,
   rangée 2 = 514 708-2424 et Soumission gratuite. Sous 1180 px ils
   remplacent les petites versions de la barre ; au-dessus, l'entête
   bureau reprend sa forme et ils disparaissent. */
.entete-actions{display:none}
@media(max-width:1180px){
  .entete-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;
    order:4;flex-basis:100%;width:100%;padding:2px 0 10px}
  .entete-actions a{display:flex;align-items:center;justify-content:center;
    gap:9px;min-height:52px;border-radius:12px;font-weight:700;font-size:16.5px;
    text-decoration:none;padding:12px 10px}
  .entete-actions svg{width:18px;height:18px;flex:none}
  .entete-actions .menu-appel{border:1.5px solid var(--trait);
    color:var(--bleu);background:var(--surface)}
  .entete-actions .menu-soumission{background:var(--bleu);color:#fff}
  .entete-droite .tel,.entete-droite .btn{display:none}
}
@media(max-width:430px){
  .entete-actions a{font-size:14.5px;gap:7px;min-height:48px;padding:11px 8px}
  .entete-actions svg{width:16px;height:16px}
}
/* Très petits écrans (iPhone SE, 320 px) : tout se resserre pour que la
   rangée unique tienne — et le H1, dont le bloc « 10, 20 et 40 verges
   cube » est insécable, redescend d'un cran. */
@media(max-width:374px){
  header.site img{width:126px}
  header.site .max{gap:8px}
  .menu-ouvrir{padding:9px 10px;font-size:14.5px}
  .menu-ouvrir svg{width:18px;height:18px}
  .langue{min-width:40px;min-height:40px}
  h1{font-size:24.5px}
}

.pied-facebook{display:inline-flex;align-items:center;gap:9px;color:#fff;
  text-decoration:none;font-weight:600;min-height:48px}
.pied-facebook svg{width:22px;height:22px;flex:none}
.pied-facebook:hover{text-decoration:underline}

/* Barre d'action rapide — mobile seulement */
.cta-mobile{display:none}
/* ── Remonter au haut de page (30 août 2026, demande du propriétaire) :
   bulle ronde à droite, posée AU-DESSUS de la barre Appeler/Soumission —
   jamais par-dessus. Sans JavaScript elle reste visible en tout temps ;
   avec, elle s'efface tant qu'on est déjà en haut. */
.haut-page{display:none}
@media(max-width:820px){
  .haut-page{position:fixed;right:14px;
    bottom:calc(78px + env(safe-area-inset-bottom));z-index:59;
    display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:50%;
    background:var(--bleu);color:#fff;text-decoration:none;
    box-shadow:0 6px 18px rgba(15,45,36,.35);opacity:.94;
    transition:opacity .25s,transform .25s}
  .haut-page svg{width:22px;height:22px}
  .haut-page.cache{opacity:0;pointer-events:none;transform:translateY(8px)}
}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media(max-width:820px){
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .cta-mobile{
    position:fixed;bottom:0;left:0;right:0;z-index:60;
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    background:var(--trait);border-top:1px solid var(--trait);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 10px rgba(15,45,36,.18);
  }
  .cta-mobile a{
    display:flex;align-items:center;justify-content:center;gap:9px;
    padding:16px 10px;font-weight:700;font-size:16.5px;text-decoration:none;
  }
  .cta-mobile svg{width:19px;height:19px;flex:none}
  .cta-appel{background:var(--surface);color:var(--bleu)}
  .cta-soum{background:var(--bleu);color:#fff}

  /* Le bouton Appeler fait un petit sursaut toutes les 12 secondes : de quoi
     attraper l'oeil sans agacer. Le combiné oscille, le libellé pulse une
     fois — pas de clignotement continu, et rien ne bouge du tout si le
     visiteur a demandé moins d'animations (réglage d'accessibilité). */
  @media (prefers-reduced-motion:no-preference){
    .cta-appel svg{animation:sonne 12s ease-in-out 4s infinite;transform-origin:50% 60%}
    .cta-appel .cta-mot{display:inline-block;animation:secousse 12s ease-in-out 4s infinite}
    .cta-appel{animation:remarque 12s ease-in-out 4s infinite}
  }
}
@keyframes sonne{
  0%,7%,100%{transform:rotate(0)}
  1%{transform:rotate(-13deg)}   2%{transform:rotate(11deg)}
  3%{transform:rotate(-9deg)}    4%{transform:rotate(7deg)}
  5%{transform:rotate(-4deg)}    6%{transform:rotate(2deg)}
}
@keyframes secousse{
  0%,9%,100%{transform:translateX(0) scale(1)}
  1%{transform:translateX(-3px) scale(1.06)}
  2.5%{transform:translateX(3px) scale(1.06)}
  4%{transform:translateX(-2px) scale(1.04)}
  5.5%{transform:translateX(2px) scale(1.04)}
  7%{transform:translateX(0) scale(1.02)}
}
@keyframes remarque{
  0%,9%,100%{background:var(--surface)}
  2%,6%{background:var(--bleu-clair)}
}

/* ── Blogue ─────────────────────────────────────────────────────────────── */
.art-fil{margin:0 0 14px;font-size:15px;font-weight:600}
.art-fil a{color:var(--encre-2);text-decoration:none}
.art-fil a:hover{color:var(--bleu);text-decoration:underline}
.art-meta{margin:10px 0 18px;font-size:15px;color:var(--encre-3);font-weight:600}
.blog-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:16px;margin-top:18px}
.blog-carte{display:flex;flex-direction:column;gap:9px;padding:24px 24px 20px;
  border:1px solid var(--trait);border-radius:14px;background:var(--surface);
  text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.blog-carte:hover{border-color:var(--bleu);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(19,34,28,.10)}
.blog-date{margin:0;font-size:13.5px;font-weight:600;color:var(--encre-3);
  text-transform:uppercase;letter-spacing:.04em}
.blog-carte h3{margin:0;font-size:20px;line-height:1.3;color:var(--encre)}
.blog-resume{margin:0;font-size:15.5px;line-height:1.55;color:var(--encre-2)}
.blog-lire{margin-top:auto;padding-top:10px;font-weight:700;font-size:15px;color:var(--bleu)}

/* ── Deux chemins (page Succession) ─────────────────────────────────────── */
.chemins{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:18px;margin-top:20px}
.chemin{display:flex;flex-direction:column;gap:12px;padding:28px 28px 24px;
  border-radius:16px;border:1px solid var(--trait);background:var(--surface)}
.chemin.vedette{border-color:var(--bleu);
  box-shadow:0 14px 34px rgba(23,65,53,.12)}
.chemin-surtitre{margin:0;font-size:13.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bleu)}
.chemin h3{margin:0;font-size:23px;line-height:1.25;color:var(--encre)}
.chemin-texte{margin:0;font-size:16px;line-height:1.55;color:var(--encre-2)}
.chemin .liste{margin:0}
.chemin .btn{margin-top:auto;align-self:flex-start}

/* ── Aide-mémoire imprimable (Succession) ───────────────────────────────── */
.memo-carte{margin-top:18px;padding:26px 30px 22px;border:1.5px dashed var(--trait);
  border-radius:14px;background:var(--surface)}
.memo-groupe{margin:20px 0 11px;font-size:14.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--bleu)}
.memo-groupe:first-of-type{margin-top:2px}
.memo-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.memo-liste label{display:flex;gap:12px;align-items:flex-start;font-size:16px;
  line-height:1.5;cursor:pointer;color:var(--encre)}
.memo-liste input{width:19px;height:19px;margin-top:2px;flex:none;accent-color:var(--vert)}
.memo-liste :checked + span{color:var(--encre-3);text-decoration:line-through}
.memo-imp{display:none}
.memo-imprimer{margin-top:16px}
@media print{
  html.imprime-memo body *{visibility:hidden}
  html.imprime-memo .memo-carte,html.imprime-memo .memo-carte *{visibility:visible}
  html.imprime-memo .memo-carte{position:absolute;top:0;left:0;width:100%;
    border:none;padding:0;background:#fff}
  html.imprime-memo .memo-imp{display:block;visibility:visible}
  html.imprime-memo .memo-titre-imp{font-size:19px;font-weight:700;margin:0 0 14px}
  html.imprime-memo .memo-pied-imp{margin-top:18px;font-size:13px;color:#555}
  html.imprime-memo .memo-liste :checked + span{color:#555}
}

/* ── Estimateur pièce par pièce (Succession) ────────────────────────────── */
.estim{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.estim-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.estim-carte{display:flex;flex-direction:column;gap:5px;padding:18px 20px;cursor:pointer;
  border:1.5px solid var(--trait);border-radius:12px;background:var(--surface);
  transition:border-color .12s ease,background .12s ease}
.estim-carte:hover{border-color:var(--bleu)}
.estim-carte:has(:checked){border-color:var(--bleu);background:var(--bleu-clair)}
.estim-carte input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.estim-libelle{font-weight:700;font-size:16.5px;color:var(--encre);
  display:flex;align-items:center;gap:9px}
.estim-libelle::before{content:"";width:19px;height:19px;flex:none;border-radius:5px;
  border:2px solid var(--trait);background:var(--fond)}
.estim-carte:has(:checked) .estim-libelle::before{background:var(--vert);border-color:var(--vert);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 13l5 5L20 7"/></svg>');
  background-size:13px;background-position:center;background-repeat:no-repeat}
.estim-detail{font-size:14px;line-height:1.45;color:var(--encre-2);padding-left:28px}
.estim-maison{border-style:dashed}
.estim-combien{display:flex;align-items:center;gap:9px;padding-left:28px;margin-top:4px;
  font-size:14px;font-weight:600;color:var(--encre-2)}
.estim-nombre{font:inherit;font-size:16px;font-weight:700;width:64px;min-height:44px;
  padding:6px 10px;text-align:center;border:1.5px solid var(--trait);border-radius:8px;
  background:var(--fond);color:var(--encre)}
.estim-resultat{display:block;padding:22px 24px;border-radius:12px;
  background:var(--form-bg);color:#fff}
.estim-format{font-size:clamp(25px,3.4vw,33px);font-weight:700;line-height:1.15;
  color:var(--promo-clair)}
.estim-phrase{margin-top:8px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.90)}
.estim-phrase b{color:#fff}
.estim-argument{margin-top:10px;padding:12px 14px;border-left:3px solid var(--promo-clair);
  border-radius:8px;background:rgba(182,230,205,.13);font-size:15px;line-height:1.5;
  color:rgba(255,255,255,.88)}
.estim-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:14px}
.estim-resultat .btn-1{background:var(--promo-clair);color:#0f2d24}
.estim-resultat .btn-2{color:#fff;border-color:rgba(255,255,255,.55)}

/* ── Logos clients ──────────────────────────────────────────────────────── */
.logos-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:12px;margin-top:20px}
/* Pleine largeur de la page (demande du propriétaire, 23 août) : la bande
   s'étire d'un bord à l'autre, seule une marge de respiration subsiste. */
.logos-pleine{width:100%;padding:0 22px;box-sizing:border-box}
@media (max-width:700px){.logos-pleine{padding:0 14px}
  .logos-grille{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px}}
.logo-client{margin:0;display:flex;align-items:center;justify-content:center;
  padding:14px;border:1px solid var(--trait);border-radius:12px;background:#fff}
.logo-client img{width:100%;height:auto;max-width:150px;border-radius:7px}

/* ── Calculateur « Combien de voyages ? » (matériaux uniques) ───────────── */
.voy{display:flex;flex-direction:column;gap:14px;margin-top:18px;background:#fff;
  border-radius:14px;padding:24px 26px;box-shadow:0 16px 40px rgba(9,32,25,.15)}
.voy-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.voy-champ{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:15.5px;
  color:var(--encre)}
.voy-saisie{display:flex;align-items:center;gap:9px}
.voy-saisie input{font:inherit;font-size:21px;font-weight:700;width:100%;min-height:54px;
  padding:10px 14px;border:2px solid var(--trait);border-radius:9px;background:var(--fond);
  color:var(--encre);text-align:center}
.voy-saisie input:focus-visible{outline:2px solid var(--orange);outline-offset:2px;
  border-color:var(--bleu)}
.voy-saisie i{font-style:normal;font-size:16px;font-weight:600;color:var(--encre-2)}
.voy-resultat{display:block;padding:20px 22px;border-radius:11px;
  background:var(--form-bg);color:#fff}
.voy-chiffres{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.voy-gros{font-size:clamp(24px,3.4vw,31px);font-weight:700;color:var(--promo-clair)}
.voy-unite{font-size:15px;color:rgba(255,255,255,.70);font-weight:600}
.voy-phrase{margin-top:10px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.90)}
.voy-phrase b{color:#fff}
.voy-resultat .estim-actions{margin-top:14px}

/* ── Types de conteneurs : capsules pleine largeur (accueil) ────────────── */
.types-liste{display:flex;flex-direction:column;gap:18px;margin-top:24px}
.type-capsule{display:flex;align-items:center;gap:34px;padding:26px 38px;
  border-radius:30px;background:var(--surface);border:1px solid var(--trait);
  box-shadow:0 10px 30px rgba(19,34,28,.05)}
.type-visuel{flex:none;width:150px;display:flex;align-items:center;justify-content:center;min-height:110px}
.type-visuel img{width:100%;height:auto;display:block}
.type-corps h3{margin:0;font-size:23px;line-height:1.25;color:var(--encre)}
.type-formats{margin:6px 0 10px;font-size:13.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent,var(--vert))}
.type-texte{margin:0;font-size:17px;line-height:1.6;color:var(--encre-2)}
.type-capsule{text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.type-capsule:hover{border-color:var(--bleu);transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(19,34,28,.10)}
.type-chevron{margin-left:auto;flex:none;font-size:34px;line-height:1;
  color:var(--encre-3);transition:color .15s ease,transform .15s ease}
.type-capsule:hover .type-chevron{color:var(--bleu);transform:translateX(3px)}
@media (max-width:680px){.type-chevron{display:none}}
@media (max-width:680px){
  .type-capsule{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 22px}
  .type-visuel{width:140px;align-self:center}}
.voy-invite{margin:0;text-align:center;font-size:16.5px;font-weight:600;
  color:rgba(255,255,255,.78)}
/* La garde qui manquait : display:block écrasait l'attribut hidden. */
.toit-resultat[hidden],.estim-resultat[hidden],.voy-resultat[hidden]{display:none}

/* ── Portes de sortie de la 404 ──────────────────────────────────────────── */
.secours{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin-top:20px}
.secours-porte{display:flex;flex-direction:column;gap:6px;padding:22px 24px;
  min-height:48px;border:1px solid var(--trait);border-radius:16px;
  background:var(--surface);text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.secours-porte:hover{border-color:var(--bleu);transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(19,34,28,.09)}
.secours-titre{font-size:18.5px;font-weight:700;color:var(--encre)}
.secours-texte{font-size:15.5px;line-height:1.5;color:var(--encre-2)}

/* ── Diagnostic de la page Ramassage ────────────────────────────────────── */
.diag{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.diag-question{margin:10px 0 2px;font-size:18px;color:var(--encre)}
.diag-resultat{display:block;margin-top:10px;padding:20px 22px;border-radius:11px;
  background:var(--form-bg);color:#fff}
.diag-verdict{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.diag-gros{font-size:clamp(22px,3.2vw,28px);font-weight:700;color:var(--promo-clair)}
.diag-phrase{margin-top:10px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.90)}
.diag-phrase b{color:#fff}
.diag-resultat .toit-actions{margin-top:14px}

/* Sur le fond vert foncé des sections finales, le bouton contour doit être
   blanc — relevé par le propriétaire sur la page Ramassage (24 août). */
.final .btn-2{color:#fff;border-color:rgba(255,255,255,.6)}
.final .btn-2:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ── La bande Ramassage de l'accueil : le service qui porte à votre place ── */
.bande-ramassage{position:relative;overflow:hidden;display:flex;align-items:center;
  gap:30px;padding:34px 38px;border-radius:24px;text-decoration:none;
  background:linear-gradient(120deg,#0c2018 0%,var(--bleu-fonce) 45%,var(--bleu) 100%);
  border:1px solid var(--bleu);box-shadow:0 18px 44px rgba(15,45,36,.28);
  transition:transform .15s ease,box-shadow .15s ease}
.bande-ramassage::before{content:"";position:absolute;right:-70px;top:-90px;width:340px;
  height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(182,230,205,.20),transparent 65%)}
.bande-ramassage::after{content:"";position:absolute;left:150px;bottom:-120px;width:260px;
  height:260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(182,230,205,.10),transparent 60%)}
.bande-ramassage:hover{transform:translateY(-2px);box-shadow:0 24px 54px rgba(15,45,36,.36)}
.br-visuel{flex:none;width:126px;color:var(--promo-clair);position:relative;z-index:1;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.br-visuel svg{width:100%;height:auto;display:block}
.br-corps{flex:1;min-width:0;position:relative;z-index:1}
.br-surtitre{display:inline-block;margin:0;padding:5px 13px;border-radius:99px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--promo-clair);border:1.5px solid rgba(182,230,205,.55);
  background:rgba(182,230,205,.10)}
.br-titre{margin:12px 0 0;font-size:clamp(21px,2.8vw,27px);font-weight:700;
  line-height:1.25;color:#fff}
.br-texte{margin:8px 0 0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.85)}
.br-bouton{flex:none;position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:48px;
  padding:13px 22px;border-radius:99px;font-weight:700;font-size:15.5px;
  background:var(--promo-clair);color:#0f2d24;white-space:nowrap}
.bande-ramassage:hover .br-bouton{background:#fff}
@media (max-width:680px){
  .bande-ramassage{flex-direction:column;align-items:flex-start;padding:24px 22px}
  .br-visuel{width:96px}
  .br-bouton{align-self:stretch;justify-content:center}}

.toiture .toit-renvoi{margin-top:18px;color:rgba(255,255,255,.85)}
.toiture .toit-renvoi a{color:var(--promo-clair);font-weight:600}

/* Piège anti-robots : invisible aux humains, rempli par les scripts. */
.champ-piege{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Carte du territoire et des fiches Google (Contact) ─────────────────── */
.cf-pleine{width:100%;margin:24px 0 0}
.cf-pleine svg{width:100%;height:auto;display:block}
.cf-fond{fill:#fff;stroke:#cfdfd6;stroke-width:1.5}
.cf-fleuve{fill:none;stroke:#dfece5;stroke-width:30;stroke-linecap:round}
.cf-voile{fill:rgba(31,92,68,.10);stroke:rgba(31,92,68,.40);stroke-width:1.6;
  stroke-linejoin:round;stroke-dasharray:7 7}
.cf-point{fill:#111;stroke:#fff;stroke-width:2.6;
  transition:transform .12s ease;transform-box:fill-box;transform-origin:center}
.cf-bulle{cursor:pointer}
.cf-bulle:hover .cf-point,.cf-bulle:focus-visible .cf-point{transform:scale(1.45)}
.cf-bulle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.cf-nom{font-size:15.5px;font-weight:600;fill:#20342a;
  paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
.cf-bulle:hover .cf-nom{fill:#0f2d24;font-weight:700}
.cf-legende .cf-nom{font-size:14.5px;fill:#46604f}
@media (max-width:640px){.cf-pleine{padding:0 12px}}

.cf-ile{fill:#e9f3ee;stroke:#b9d4c6;stroke-width:1.2}
.cf-riviere{fill:none;stroke:#dfece5;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.cf-repere{fill:#93a89c}
.cf-repere-nom{font-size:11.5px;font-weight:600;fill:#7d948a;
  paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.cf-region{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  fill:#a9bfb2}
.cf-frontiere{stroke:#c4d5cb;stroke-width:1.5;stroke-dasharray:2 7}
.cf-frontiere-nom{font-size:11px;font-style:italic;fill:#a9bfb2}

/* Héros « cadré » : l'image recule pour se montrer ENTIÈRE (les paquets de
   bardeaux sur le toit se voient), et un fondu vert comble chaque côté. */
.heros-cadre{background:
  linear-gradient(90deg,#0c2018 0%,#0f2d24 32%,rgba(15,45,36,.4) 40%,
                  transparent 47%),
  #12211a}
.heros-cadre .heros-photo{left:auto;width:52%;object-fit:cover;object-position:center 32%}
/* Le voile s'éclaircit vers l'arrière droite : la maison et les paquets
   ressortent, le texte garde son assise sombre à gauche. */
.heros-cadre .heros-voile{background:linear-gradient(90deg,
  #0c2018 0%,#0c2018 45%,rgba(12,32,24,.78) 51%,rgba(12,32,24,.34) 57%,
  rgba(12,32,24,0) 65%)}
.heros-cadre .heros-contenu{max-width:min(560px,46%)}
@media (max-width:900px){
  .heros-cadre .heros-photo{width:100%}
  .heros-cadre .heros-contenu{max-width:none}
  .heros-cadre .heros-voile{background:linear-gradient(180deg,
    rgba(12,32,24,.92) 0%,rgba(12,32,24,.80) 62%,rgba(12,32,24,.55) 100%)}}

/* ── Héros sur téléphone : la photo sort de derrière le voile ─────────────
   Demande du propriétaire (29 août) : « on voit mal l'image, c'est la porte
   d'entrée ». Sous 820 px, la photo cesse d'être un fond noyé : elle devient
   une vraie bande d'image en pleine lumière au SOMMET du héros, et le texte
   descend sur un fond vert plein — lisible sans voile. Un léger dégradé au
   pied de la photo coud les deux. */
@media(max-width:820px){
  .heros-avis{background:#0f2d24}
  .heros-avis .heros-photo{position:static;inset:auto;z-index:auto;
    width:100%;height:44vh;max-height:380px;object-fit:cover;
    object-position:center 86%;display:block}
  .heros-avis .heros-voile{position:absolute;inset:0 0 auto;
    height:min(44vh,380px);z-index:auto;pointer-events:none;
    background:linear-gradient(180deg,rgba(15,45,36,0) 30%,rgba(15,45,36,.4) 55%,
      rgba(15,45,36,.85) 80%,#0f2d24 96%)}
  .heros-avis>.max{margin-top:-96px;position:relative}
  .heros-avis .heros-contenu{padding-top:0;padding-bottom:26px}
}

/* ── Bouton de son des vidéos ─────────────────────────────────────────────
   Les contrôles natifs posaient un voile sombre au survol (demande du
   29 août : AUCUN voile, jamais) — ils sont retirés de toutes les vidéos.
   Ce bouton, injecté par le script, reste le seul chemin vers le son de la
   vidéo du grand ménage. Sans JavaScript il n'existe pas : la vidéo joue
   muette, rien n'est cassé. */
.figure-video{position:relative}
.btn-son{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;padding:0;color:#0f2d24;
  background:rgba(255,255,255,.9);border:0;border-radius:50%;cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.22)}
.btn-son:hover{background:#fff}
.btn-son svg{width:16px;height:16px;display:block;flex:none}
/* Au tactile, la pastille reste petite à l'œil mais la cible respecte les
   48 px de la convention (zone cliquable étendue, invisible). */
@media(pointer:coarse){
  .btn-son::before{content:"";position:absolute;inset:-9px}
}