/* =====================================================================================
   prix-facade.com — feuille de style du site outil.

   Direction : ÉDITORIAL CLAIR. Papier, encre, filets fins, grande typographie serif pour
   les titres, beaucoup d'air. Rien de commun avec la peau du site pilote (bleu nuit +
   ombres portées) : ce fichier est la seule source de vérité visuelle de ce site, et il ne
   dépend d'aucune autre feuille.

   Mobile d'abord : tout est écrit pour un écran de 390 px, puis élargi par media query.
   Copié au build vers dist/<domaine>/static/css/style.css par construire_outil().
   ===================================================================================== */

:root{
  /* Papier et encre */
  --papier:#fbfaf7;
  --papier-tinte:#f4f1ea;
  --surface:#ffffff;
  --encre:#16181a;
  --encre-douce:#5c6066;
  --encre-faible:#82868c;
  --trait:#e3ded4;
  --trait-fort:#cfc7b8;

  /* Accent : le rose brique de Toulouse, tiré vers le terracotta pour rester lisible. */
  --brique:#a8482a;
  --brique-fonce:#87371e;
  --brique-clair:#f6ece7;

  /* Seul aplat sombre du site : le bloc d'appel final. */
  --vert:#22392f;
  --vert-clair:#eaf0ec;

  --serif:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --marge:22px;
  --large:1140px;
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--sans);
  font-size:1.02rem;
  line-height:1.65;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--brique);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* Visibilité du focus : indispensable au clavier. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brique);outline-offset:2px;border-radius:2px;
}

h1,h2,h3,h4{
  font-family:var(--serif);font-weight:400;color:var(--encre);
  letter-spacing:-.015em;margin:0 0 .5em;
}
h1{font-size:clamp(2.05rem,5.4vw,3.35rem);line-height:1.07}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.15;margin-top:0}
h3{font-size:clamp(1.12rem,2vw,1.32rem);line-height:1.25}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.15em}

.wrap{max-width:var(--large);margin:0 auto;padding:0 var(--marge)}
.center{text-align:center}
.muted{color:var(--encre-douce);font-size:.94rem}
.lead{font-size:1.09rem;line-height:1.6;color:var(--encre-douce)}
.lead-sm{font-size:1.01rem;color:var(--encre-douce);max-width:68ch}
.kicker{
  text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;font-weight:700;
  color:var(--brique);margin:0 0 .9em;
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------------- boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;                       /* cible tactile ≥ 48 px */
  padding:12px 22px;background:var(--brique);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:.97rem;
  border:1px solid var(--brique);border-radius:var(--radius);cursor:pointer;
}
.btn:hover{background:var(--brique-fonce);border-color:var(--brique-fonce);color:#fff;text-decoration:none}
.btn-ghost{background:transparent;color:var(--encre);border-color:var(--trait-fort)}
.btn-ghost:hover{background:var(--papier-tinte);color:var(--encre);border-color:var(--encre)}
.btn-light{background:#fff;color:var(--vert);border-color:#fff}
.btn-light:hover{background:var(--vert-clair);color:var(--vert);border-color:var(--vert-clair)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn-submit{
  width:100%;min-height:48px;margin-top:6px;padding:14px;
  background:var(--brique);color:#fff;font-family:var(--sans);font-size:1rem;font-weight:600;
  border:1px solid var(--brique);border-radius:var(--radius);cursor:pointer;
}
.btn-submit:hover{background:var(--brique-fonce)}

/* ------------------------------------------------------- en-tête du site */
.site-header{background:var(--papier);border-bottom:1px solid var(--trait)}
.header-inner{display:flex;flex-direction:column;gap:10px;padding-top:16px;padding-bottom:14px}
.brand{display:flex;flex-direction:column;color:var(--encre);text-decoration:none}
.brand strong{font-family:var(--serif);font-size:1.42rem;font-weight:400;letter-spacing:-.01em}
.brand span{font-size:.76rem;color:var(--encre-faible);letter-spacing:.02em}
.nav{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
.nav a{
  color:var(--encre);font-size:.79rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;padding:6px 0;
}
.nav a:hover{color:var(--brique);text-decoration:none}
.nav-cta{color:var(--brique) !important;border-bottom:1px solid var(--brique)}
.header-tel{font-family:var(--serif);font-size:1.12rem;color:var(--encre);white-space:nowrap}
.header-tel:hover{color:var(--brique);text-decoration:none}

/* Bandeau de réassurance : un filet fin, jamais d'aplat. */
.bande-confiance{background:var(--papier);border-bottom:1px solid var(--trait)}
.bande-inner{
  display:flex;flex-wrap:wrap;gap:6px 0;padding-top:10px;padding-bottom:10px;
  font-size:.8rem;color:var(--encre-douce);
}
.bc-item{display:inline-flex;align-items:center;white-space:nowrap}
.bc-item + .bc-item::before{content:"·";margin:0 12px;color:var(--trait-fort)}
.bande-iso{color:var(--brique);font-weight:600}

/* ------------------------------------------------------------------ hero */
.hero{background:var(--papier);border-bottom:1px solid var(--trait);padding:36px 0 40px}
.hero-compact{padding:26px 0 32px}
.hero-inner{display:grid;grid-template-columns:1fr;gap:32px}
.hero h1{margin:0 0 .55em}
.hero-copy .lead{max-width:56ch}
.hero-points{list-style:none;padding:0;margin:0 0 26px}
.hero-points li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--encre-douce)}
.hero-points li::before{content:"—";position:absolute;left:0;color:var(--brique)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-actions .btn{flex:1 1 210px}
.hero-form{background:var(--surface);border:1px solid var(--trait);border-radius:var(--radius);padding:22px}
/* Le formulaire est déjà encadré par .hero-form : on évite la double bordure. */
.hero-form .devis-form{border:0;padding:0;background:transparent}

/* Bandeau photo éditorial, pleine largeur. */
.hero-photo{margin:0;border-bottom:1px solid var(--trait)}
.hero-photo img{width:100%;height:auto}
.hero-photo figcaption{
  max-width:var(--large);margin:0 auto;padding:10px var(--marge) 0;
  font-size:.83rem;color:var(--encre-faible);font-style:italic;
}

/* Galerie éditoriale : trois visuels légendés, sans cadre ni ombre. */
.photos-grille{display:grid;grid-template-columns:1fr;gap:26px;margin-top:26px}
.photos-grille figure{margin:0}
.photos-grille img{width:100%;height:auto;border-radius:var(--radius)}
.photos-grille figcaption{
  margin-top:9px;font-size:.83rem;color:var(--encre-faible);font-style:italic;
}

/* --------------------------------------------------------------- sections */
.section{padding:52px 0;border-bottom:1px solid var(--trait)}
.section-alt{background:var(--papier-tinte)}
.section > h2{margin-bottom:.45em}

.cards{display:grid;grid-template-columns:1fr;gap:0}
.card{padding:22px 0;border-top:1px solid var(--trait)}
.card:first-child{border-top:0;padding-top:0}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}

.prix-cartes{display:grid;grid-template-columns:1fr;gap:0;margin:26px 0 18px}
.prix-carte{padding:22px 0;border-top:1px solid var(--trait)}
.prix-carte:first-child{border-top:0}
.prix-carte h3{margin-bottom:.3em}
.price{
  font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.15rem);line-height:1.1;
  color:var(--brique);margin:0 0 .5em;
}
.more{font-size:.92rem;font-weight:600}

/* ------------------------------------------------------------- communes */
.villes-grille{list-style:none;padding:0;margin:22px 0 0;columns:1}
.ville-lien{border-bottom:1px solid var(--trait);padding:9px 0;break-inside:avoid}
.ville-lien a{color:var(--encre);display:flex;justify-content:space-between;gap:10px}
.ville-lien a:hover{color:var(--brique);text-decoration:none}
.ville-cp{color:var(--encre-faible);font-size:.86rem}
.villes-note{margin-top:26px}
.villes-list{list-style:none;padding:0;columns:1}

/* Hub /communes/ : liste alphabétique, deux liens par commune. */
.communes-index{columns:1;margin-top:26px}
.communes-lettre{break-inside:avoid;margin-bottom:26px}
.communes-lettre h3{
  font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brique);margin:0 0 8px;padding-bottom:6px;
  border-bottom:1px solid var(--trait-fort);
}
.communes-liste{list-style:none;padding:0;margin:0}
.commune-item{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:5px 0}
.commune-nom{color:var(--encre)}
.commune-cp{color:var(--encre-faible);font-size:.85rem}
.commune-liens{display:inline-flex;gap:10px;margin-left:auto;font-size:.82rem}
.commune-liens a{color:var(--encre-douce)}
.commune-liens a:hover{color:var(--brique)}

/* Maillage : communes voisines, bas de page communale. */
.maillage-liees{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 1em}
.maillage-liees a{font-size:.92rem}

/* -------------------------------------------------------- fil d'Ariane */
.breadcrumb{font-size:.83rem;color:var(--encre-faible);padding-top:16px}
.breadcrumb a{color:var(--encre-douce)}
.breadcrumb span{margin:0 6px}

/* ----------------------------------------------------------------- bande */
.band{background:var(--vert);color:#eef3f0;padding:44px 0}
.band-inner{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
.band h2{color:#fff;margin-bottom:.3em}
.band p{margin:0;color:#c9d6cf}
.band-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ----------------------------------------------------------- prose, listes */
.prose{max-width:72ch}
.prose h2{margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.1em}
.prose li{margin-bottom:.4em}

.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:20px;margin-bottom:6px}
.ticks li::before{content:"—";position:absolute;left:0;color:var(--brique)}
.hp-list li{position:relative;padding-left:20px;margin-bottom:6px}

/* Liste « hero-points » réutilisable hors hero. */
.hp{list-style:none;padding:0}
.hp li{position:relative;padding-left:20px;margin-bottom:6px}
.hp li::before{content:"—";position:absolute;left:0;color:var(--brique)}
/* Champ piège du formulaire : hors écran, jamais caché par display (les robots le remplissent). */
.hp-field,.devis-form .hp{position:absolute;left:-9999px}

.etapes{list-style:none;padding:0;counter-reset:etape}
.etapes li{counter-increment:etape;position:relative;padding-left:34px;margin-bottom:14px}
.etapes li::before{
  content:counter(etape);position:absolute;left:0;top:0;
  font-family:var(--serif);color:var(--brique);font-size:1.1rem;
}

.faq{margin-top:8px}
.faq-item{border-top:1px solid var(--trait);padding:16px 0}
.faq-item:first-child{border-top:0}
.faq-item h3{margin-bottom:.3em;font-size:1.06rem}
.faq-item p:last-child{margin-bottom:0}

.note-chantier{
  border-left:2px solid var(--brique);padding:2px 0 2px 16px;margin:0 0 1.2em;
  color:var(--encre-douce);font-size:.95rem;
}

.two-col{display:grid;grid-template-columns:1fr;gap:28px}
.contact-list{list-style:none;padding:0;margin:18px 0}
.contact-list li{padding:10px 0;border-bottom:1px solid var(--trait)}

/* ------------------------------------------------------------- formulaire */
.devis-form{background:var(--surface);border:1px solid var(--trait);border-radius:var(--radius);padding:22px}
.devis-form h3{margin:0 0 4px}
.devis-form label{
  display:block;margin-bottom:14px;
  font-size:.88rem;font-weight:600;color:var(--encre);
}
.devis-form input,.devis-form select,.devis-form textarea{
  display:block;width:100%;margin-top:5px;
  min-height:48px;padding:11px 13px;
  font-family:var(--sans);font-size:1rem;color:var(--encre);
  background:var(--surface);border:1px solid var(--trait-fort);border-radius:var(--radius);
}
.devis-form textarea{min-height:120px;resize:vertical}
.devis-form input:focus,.devis-form select:focus,.devis-form textarea:focus{border-color:var(--brique)}
.devis-form .field-row{display:grid;grid-template-columns:1fr;gap:0}
.field-row{display:grid;gap:0}
.form-sub{margin:0 0 16px;font-size:.88rem;color:var(--encre-faible)}
.commune-field{position:relative;display:block}
.devis-form label.consent{
  display:flex;gap:10px;align-items:flex-start;font-weight:400;
  font-size:.87rem;color:var(--encre-douce);
}
.devis-form label.consent input{width:22px;height:22px;min-height:22px;margin:2px 0 0;flex:0 0 auto}
.form-alt{margin:12px 0 0;font-size:.88rem;color:var(--encre-faible);text-align:center}
.form-status{margin:10px 0 0;font-size:.9rem;min-height:1.2em;text-align:center}
.form-status.ok{color:#1d6b45}
.form-status.err{color:#a3231b}

/* Saisie assistée des communes, créée par lead.js : les noms de classes ne sont pas
   négociables, ils viennent du script. */
.ta-liste{
  position:absolute;z-index:30;left:0;right:0;top:100%;margin:2px 0 0;padding:4px;
  list-style:none;background:var(--surface);
  border:1px solid var(--trait-fort);border-radius:var(--radius);
  max-height:260px;overflow:auto;
}
.ta-item{display:flex;justify-content:space-between;gap:10px;padding:11px 10px;cursor:pointer}
.ta-item.actif{background:var(--brique-clair)}
.ta-cp{color:var(--encre-faible);font-variant-numeric:tabular-nums}
.ta-vide{padding:9px 10px;color:var(--encre-faible);font-size:.88rem}

/* --------------------------------------------------------- pied de page */
.site-footer{background:var(--papier);border-top:1px solid var(--trait);padding:38px 0 26px;font-size:.94rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:26px}
.footer-grid strong{font-family:var(--serif);font-size:1.1rem;font-weight:400;display:block;margin-bottom:8px}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:6px}
.footer-grid a{color:var(--encre-douce)}
.footer-grid p{color:var(--encre-douce);margin:0}
.footer-legal{
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--trait);
  font-size:.83rem;color:var(--encre-faible);
}

/* Barre d'appel collante (mobile). */
.sticky-call{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;gap:10px;padding:10px 14px;
  background:var(--papier);border-top:1px solid var(--trait);
}
.sticky-call a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  border-radius:var(--radius);font-weight:600;font-size:.95rem;text-decoration:none;
}
.sticky-call .call{background:var(--surface);border:1px solid var(--trait-fort);color:var(--encre)}
.sticky-call .devis{background:var(--brique);border:1px solid var(--brique);color:#fff}

/* Le contenu ne doit jamais passer sous la barre collante. */
body{padding-bottom:74px}

/* --------------------------------------------------------- élargissements */
@media (min-width:700px){
  :root{--marge:26px}
  .photos-grille{grid-template-columns:repeat(3,1fr);gap:30px}
  .header-inner{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .hero-actions .btn{flex:0 0 auto}
  .cards{grid-template-columns:repeat(3,1fr);gap:0 30px}
  .card,.card:first-child{border-top:1px solid var(--trait);padding-top:20px}
  .prix-cartes{grid-template-columns:repeat(2,1fr);gap:0 34px}
  .prix-carte:first-child{border-top:0;padding-top:22px}
  .communes-index{columns:2;column-gap:38px}
  .villes-grille,.villes-list{columns:2;column-gap:34px}
  .band-inner{grid-template-columns:1.4fr auto}
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
  .two-col{grid-template-columns:1.1fr .9fr;gap:40px}
  .devis-form .field-row{grid-template-columns:1fr 1fr;gap:14px}
}

@media (min-width:1000px){
  .hero{padding:54px 0 58px}
  .hero-compact{padding:34px 0 40px}
  .hero-inner{grid-template-columns:1.25fr .75fr;gap:52px;align-items:start}
  .section{padding:78px 0}
  .communes-index{columns:3}
  .villes-grille{columns:3}
  /* Sur grand écran, la barre collante disparaît : le téléphone reste dans l'en-tête. */
  .sticky-call{display:none}
  body{padding-bottom:0}
}

/* =====================================================================================
   Accord du composant simulateur avec cette palette.

   static/css/simulateur.css lit des noms de variables (--navy, --orange, --line…) avec une
   valeur de repli : les redéfinir ici suffit à accorder le composant au site, sans toucher
   d'une ligne au composant lui-même. Un résolveur de variable n'entre pas dans la bataille
   d'ordre des feuilles, donc le résultat ne dépend pas de l'ordre de chargement.
   ===================================================================================== */
:root{
  --navy:var(--encre);
  --orange:var(--brique);
  --orange-d:var(--brique-fonce);
  --line:var(--trait);
  --muted:var(--encre-douce);
  --bg:var(--papier-tinte);
  --ink:var(--encre);
}
/* Les rares teintes du composant qui ne passent pas par une variable. Le sélecteur est plus
   spécifique : l'ordre des feuilles n'a plus d'importance. */
.simu .simu-confiance{background:var(--brique-clair);border-color:#e8d2c8;color:var(--brique-fonce)}
.simu .simu-carte.simu-on,.simu .simu-opt.simu-on{background:var(--brique-clair)}
.simu .simu-carte:hover,.simu .simu-opt:hover{border-color:var(--trait-fort)}
.simu .simu-chip:hover{background:var(--brique-clair);border-color:var(--trait-fort)}
/* Le script déplace le focus sur le titre de l'étape (utile au lecteur d'écran, qui l'annonce).
   L'anneau de focus autour d'un titre non cliquable se lit comme un champ de saisie : on le
   retire. Les éléments réellement interactifs gardent le leur, défini plus haut. */
.simu .simu-titre:focus,.simu .simu-titre:focus-visible,
.simu .simu-final-titre:focus,.simu .simu-final-titre:focus-visible{outline:none}
.simu .simu-titre,.simu .simu-final-fourchette,.simu .simu-final-entre,.simu .simu-final-et{
  font-family:var(--serif);font-weight:400;letter-spacing:-.015em;
}