/* ============================================================================
   CoproScan — feuille de style unique du site.

   SOURCE DE VÉRITÉ : ce fichier. `scripts/build_site.py` le copie dans
   `site/style.css`, servi par la route `GET /style.css` de `app/main.py`.

   Pourquoi un fichier et non un <style> inline : le gabarit web_base est rendu
   dans CHAQUE page. À 4 000+ pages, 11 Ko de CSS inline font ~50 Mo de
   duplication et interdisent toute mise en cache navigateur.

   CACHE-BUSTER : les pages référencent `/style.css?v={{ CSS_VERSION }}`, où
   CSS_VERSION est une empreinte courte du contenu de CE fichier, calculée dans
   `coproscan/core.py` et exposée en global Jinja. Le site ne pose aucun
   Cache-Control : sans ce paramètre, un déploiement qui change le CSS servirait
   le nouveau HTML avec l'ancienne feuille.
   ========================================================================= */

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* Couleur : une seule teinte de marque, employée avec parcimonie. */
  --encre:      #131c2e;   /* titres, chiffres */
  --encre-2:    #33415c;   /* corps de texte */
  --gris:       #667085;   /* labels, méta */
  --gris-clair: #98a2b3;   /* méta faible, états vides */
  --trait:      #e6eaf0;   /* bordures */
  --trait-fort: #d3dae4;
  --fond:       #f7f9fc;   /* fond de page */
  --surface:    #ffffff;   /* cartes */
  --surface-2:  #f4f7f9;   /* tuiles internes */
  --accent:     #1f6f6b;   /* marque */
  --accent-fonce:#17544f;
  --accent-pale:#eaf4f3;
  /* Barres de prix : vert désaturé (teinte 154°), volontairement DISTINCT des
     verts de l'échelle DPE (A #319834, B #33cc31 — teinte 120°, saturés) du
     bloc Énergie voisin : les deux blocs ne portent pas la même sémantique.
     Ici la couleur ne code rien, les trois barres la partagent. 3,2:1 sur
     blanc, au-dessus du seuil AA des éléments graphiques (WCAG 1.4.11). */
  --vert-prix:  #5e9d82;
  /* Même teinte à 35 % : remplissage de la barre d'ESTIMATION. Écrite en rgba
     et non en color-mix pour rester lisible partout ; toute retouche de
     --vert-prix doit être reportée ici. */
  --vert-prix-pale: rgba(94,157,130,.35);
  --ambre:      #8a5a16;   /* signal factuel, jamais un jugement */
  --ambre-pale: #fdf4e7;
  --alerte:     #a8471c;

  --t-xs: 11.5px; --t-sm: 13px; --t-md: 15px; --t-lg: 17px;
  --t-xl: 21px;   --t-2xl: 27px; --t-3xl: 34px;

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;

  --rayon: 14px; --rayon-sm: 10px;
  --ombre: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fond); color:var(--encre-2);
  font-family:"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--t-md); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{color:var(--encre); letter-spacing:-.02em; margin:0}
a{color:var(--accent-fonce)}
sup{font-size:.7em}
/* Chiffres alignés : sans ça les KPI en grille dansent d'une carte à l'autre. */
.num{font-variant-numeric:tabular-nums lining-nums}

/* --- Navigation ----------------------------------------------------------- */
.nav{background:var(--surface); border-bottom:1px solid var(--trait);
     position:sticky; top:0; z-index:20}
.nav .wrap{max-width:1080px; margin:0 auto; padding:var(--e-3) var(--e-5);
     display:flex; align-items:center; justify-content:space-between; gap:var(--e-3)}
.brand{font-size:var(--t-lg); font-weight:700; letter-spacing:-.03em;
     color:var(--encre); text-decoration:none}
.brand span{color:var(--accent)}
.nav .tag{font-size:var(--t-xs); color:var(--gris); text-transform:uppercase;
     letter-spacing:.08em; font-weight:600}

.container{max-width:1080px; margin:0 auto; padding:var(--e-5) var(--e-5) var(--e-8)}
.fil{font-size:var(--t-sm); color:var(--gris); margin-bottom:var(--e-4)}
.fil a{color:var(--gris); text-decoration:none}
.fil a:hover{color:var(--accent-fonce)}

/* --- En-tête de page ------------------------------------------------------ */
.entete{margin-bottom:var(--e-5)}
.entete h1{font-size:var(--t-3xl); line-height:1.15; margin-bottom:var(--e-2)}
.entete .sous{font-size:var(--t-sm); color:var(--gris)}
.badges{display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-4)}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-xs);
  font-weight:600; padding:5px 10px; border-radius:100px;
  background:var(--surface-2); color:var(--gris); border:1px solid var(--trait)}
.badge.accent{background:var(--accent-pale); color:var(--accent-fonce); border-color:#cfe6e3}
.badge.ambre{background:var(--ambre-pale); color:var(--ambre); border-color:#f0dfc4}
.badge .pt{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7}

/* --- Cartes --------------------------------------------------------------- */
/* `.bloc` est l'alias historique employé par l'accueil et les pages de message. */
.carte,.bloc{background:var(--surface); border:1px solid var(--trait);
  border-radius:var(--rayon); box-shadow:var(--ombre); padding:var(--e-5);
  margin-bottom:var(--e-4)}
.carte > h2,.bloc > h2{font-size:var(--t-lg); margin-bottom:var(--e-1)}
.carte > .chapo{font-size:var(--t-sm); color:var(--gris); margin-bottom:var(--e-5)}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-4)}
.duo > .carte{margin-bottom:0}

/* --- Grille KPI ----------------------------------------------------------- */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-3);
  margin-bottom:var(--e-4)}
.kpi{background:var(--surface); border:1px solid var(--trait);
  border-radius:var(--rayon-sm); padding:var(--e-4) var(--e-4) var(--e-3);
  box-shadow:var(--ombre); display:flex; flex-direction:column; min-height:104px}
.kpi .lab{font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.07em;
  color:var(--gris); font-weight:650; margin-bottom:auto}
.kpi .val{font-size:var(--t-2xl); font-weight:700; color:var(--encre);
  letter-spacing:-.03em; line-height:1.2; margin-top:var(--e-3)}
.kpi .val.petit{font-size:var(--t-lg); letter-spacing:-.01em}
.kpi .pied{font-size:var(--t-xs); color:var(--gris); margin-top:2px}
.kpi .pied a{color:var(--gris); text-decoration:underline; text-underline-offset:2px}
/* État vide : même gabarit, même hauteur, valeur en retrait — et TOUJOURS une
   raison. Un tiers des pages sont dans cet état, il se conçoit, il ne se subit pas. */
.kpi.vide{background:var(--surface-2); box-shadow:none}
.kpi.vide .val{color:var(--gris-clair); font-size:var(--t-lg); font-weight:600;
  letter-spacing:-.01em}

/* --- Résumé --------------------------------------------------------------- */
.resume{font-size:var(--t-lg); line-height:1.6; color:var(--encre-2)}
.resume p{margin:0 0 var(--e-3)}
.resume p:last-child{margin-bottom:0}
.resume strong{color:var(--encre); font-weight:650}

/* --- Boutons -------------------------------------------------------------- */
/* `.cta` est l'alias historique employé par l'accueil (bouton primaire). */
.actions{display:flex; flex-wrap:wrap; gap:var(--e-3); margin-top:var(--e-5)}
.btn,.cta{display:inline-flex; align-items:center; gap:8px; font:inherit;
  font-size:var(--t-md); font-weight:650; padding:11px 18px; border-radius:10px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background .15s, border-color .15s; justify-self:start}
.btn-1,.cta{background:var(--accent); color:#fff}
.btn-1:hover,.cta:hover{background:var(--accent-fonce); color:#fff}
.btn-2{background:var(--surface); color:var(--encre); border-color:var(--trait-fort)}
.btn-2:hover{border-color:var(--gris-clair)}
button.cta{border:0}

/* --- Barres (DPE) --------------------------------------------------------- */
.barres{display:grid; gap:var(--e-2)}
.ligne{display:grid; grid-template-columns:26px 1fr auto; align-items:center;
  gap:var(--e-3)}
.piste{height:22px; background:var(--surface-2); border-radius:6px; overflow:hidden}
.barre{height:100%; border-radius:6px}
.ligne .chiffre{font-size:var(--t-sm); color:var(--gris); min-width:86px;
  text-align:right}
.lettre{width:26px; height:26px; border-radius:7px; color:#fff; font-weight:700;
  font-size:var(--t-sm); display:grid; place-items:center}
.A{background:#319834}.B{background:#33cc31}.C{background:#9fd934}
.D{background:#d8cf2a}.E{background:#efb731}.F{background:#e57a2b}.G{background:#d0342c}
.echeance{border-left:3px solid var(--alerte); padding:var(--e-1) 0 var(--e-1) var(--e-3);
  margin-top:var(--e-2); font-size:var(--t-sm)}

/* --- Positionnement prix -------------------------------------------------- */
.prix-lignes{display:grid; gap:var(--e-3)}
/* Largeur DIMENSIONNÉE sur le plus long libellé possible :
   « Prix réactualisé · l'arrondissement », mesuré à 236px. Il tient ainsi sur
   UNE ligne — un libellé coupé en deux se lit mal. Le SOUS-libellé, lui, tient
   volontairement sur 2 lignes (date d'arrêt, puis position par rapport au prix
   des ventes) : le saut est POSÉ dans le gabarit, il ne dépend pas de la
   largeur — même découpe de 320px à 1280px. La ligne d'estimation est donc un
   cran plus haute que les trois observées, c'est assumé. (Était 212px quand le libellé disait « Réactualisée · … » ;
   à remesurer si le libellé rallonge encore.)
   `align-items:center` : la barre se centre sur le bloc de gauche, sur les
   quatre lignes sans exception — l'estimation n'a AUCUNE règle à elle. */
.prix-lignes{--col-libelle:240px}
.prix-ligne{display:grid; grid-template-columns:var(--col-libelle) 1fr auto;
  align-items:center; gap:var(--e-3)}
/* Les TROIS barres partagent une même couleur neutre : ici la couleur ne code
   rien — les trois repères sont de même nature, seule la longueur compare.
   (Ne pas transposer aux barres DPE : l'échelle A→G est officielle, la couleur
   y EST l'information.) La hiérarchie se lit dans la typographie seule :
   `principal` = ligne immeuble, libellé et montant en gras ; rue et
   arrondissement en graisse normale et encre plus discrète. */
.prix-ligne .quoi{font-size:var(--t-sm); color:var(--gris)}
.prix-ligne .quoi b{display:block; color:var(--encre-2); font-weight:500;
  font-size:var(--t-md)}
.prix-ligne .valeur{font-size:var(--t-md); font-weight:500; color:var(--encre-2);
  min-width:104px; text-align:right}
.prix-ligne.principal .quoi b{color:var(--encre); font-weight:700}
.prix-ligne.principal .valeur{color:var(--encre); font-weight:700}
.barre-prix{height:12px; border-radius:100px; background:var(--vert-prix)}
/* 4e ligne — médiane RÉACTUALISÉE. Même teinte que les trois autres : c'est la
   même grandeur, sur la même échelle. Ce qui change est le RÉGIME de la barre,
   pas sa couleur — remplissage translucide et contour pointillé disent « cette
   valeur est calculée, pas observée ».
   Les trois régimes du bloc, à ne jamais confondre :
     plein               = fait observé
     translucide pointillé = estimation
     hachuré             = non calculable
   `border-box` global (l.52) : le contour ne déborde pas de la largeur en %. */
.prix-ligne.estimation .barre-prix{background:var(--vert-prix-pale);
  border:1px dashed var(--vert-prix)}
/* Pas de règle de mise en page propre à l'estimation : sa ligne reprend la
   grille des trois autres, libellé et sous-libellé dans la colonne de gauche,
   rien sous la barre. Le sous-libellé y tient parce qu'il a été raccourci —
   date d'arrêt + position par rapport au prix des ventes, et rien d'autre. */
/* Le libellé reste en graisse normale (règle générale) — seule la ligne
   immeuble OBSERVÉE porte le gras via `.principal`. */
.prix-ligne.estimation .valeur{color:var(--encre-2)}

/* Médiane d'immeuble non calculable (75,6 % des pages) : la ligne reste, en
   hachures neutres — la comparaison rue/arrondissement doit rester lisible.
   Le libellé garde son gras (règle `principal` ci-dessus) ; seule la mention
   « non calculée » repasse en graisse normale. `--gris` et non `--gris-clair` :
   4,97:1 sur blanc, au-dessus du seuil AA.
   Placé APRÈS `.principal` — spécificité égale, l'ordre source tranche. */
.prix-ligne.absent .barre-prix{background:repeating-linear-gradient(
  -45deg,var(--vert-prix) 0 6px,transparent 6px 12px)}
.prix-ligne.absent .valeur{color:var(--gris); font-weight:500;
  font-size:var(--t-sm)}

/* --- Listes et tuiles ----------------------------------------------------- */
.sous-titre{font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.07em;
  color:var(--gris); font-weight:650; margin:var(--e-5) 0 var(--e-2)}
.sous-titre:first-child{margin-top:0}
.liste{margin:0; padding-left:18px; font-size:var(--t-md)}
.liste li{margin-bottom:var(--e-2)}
.liste li::marker{color:var(--gris-clair)}
.tuiles{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-3)}
.tuile{background:var(--surface-2); border-radius:var(--rayon-sm); padding:var(--e-4)}
.tuile .lab{font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.07em;
  color:var(--gris); font-weight:650}
.tuile .val{font-size:var(--t-xl); font-weight:700; color:var(--encre);
  letter-spacing:-.02em; margin-top:var(--e-1)}
.tuile .val.petit{font-size:var(--t-md); font-weight:650}
.tuile .pied{font-size:var(--t-xs); color:var(--gris); margin-top:2px}

/* --- Notes et méthodologie ------------------------------------------------ */
.note{font-size:var(--t-sm); color:var(--gris); margin-top:var(--e-4)}
.note strong{color:var(--encre-2)}
details.methodo .corps p.sep{margin-top:var(--e-3); padding-top:var(--e-3);
  border-top:1px solid var(--trait)}
.vide{font-size:var(--t-md); color:var(--gris); font-style:italic}
.indispo{color:var(--gris-clair); font-style:italic; font-weight:400}
/* Chauffage : une ligne sobre sous l'identite. `.pied` est porte par
   `.tuile .pied` et ne s'appliquerait pas ici — d'ou une classe a soi
   plutot qu'un selecteur elargi, qui aurait touche d'autres blocs. */
.chauffage{margin-top:10px; font-size:var(--t-sm); font-weight:600}
.chauffage .pied{font-size:var(--t-xs); color:var(--gris); font-weight:400; margin-left:6px}
details.methodo{margin-top:var(--e-4); border-top:1px solid var(--trait);
  padding-top:var(--e-3)}
details.methodo summary{font-size:var(--t-sm); color:var(--gris); cursor:pointer;
  font-weight:600; list-style:none; display:flex; align-items:center; gap:6px}
details.methodo summary::-webkit-details-marker{display:none}
details.methodo summary::before{content:"\203A"; transition:transform .15s;
  display:inline-block; font-size:var(--t-lg); line-height:1}
details.methodo[open] summary::before{transform:rotate(90deg)}
details.methodo .corps{font-size:var(--t-sm); color:var(--gris); margin-top:var(--e-3)}

/* --- Dossier non transmis : placeholder flouté + appel net ---------------- */
.voile{position:relative}
.voile-flou{filter:blur(5px); -webkit-user-select:none; user-select:none;
  pointer-events:none}
.voile-net{position:absolute; top:0; right:0; bottom:0; left:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--e-3); text-align:center; padding:var(--e-5);
  background:rgba(247,249,252,.76); border-radius:var(--rayon)}
.voile-net p{margin:0; max-width:430px; font-size:var(--t-md); font-weight:600;
  color:var(--encre)}

/* --- Localisation --------------------------------------------------------- */
.carto{height:260px; border-radius:var(--rayon-sm); border:1px solid var(--trait);
  background:var(--surface-2); display:grid; place-items:center; cursor:pointer;
  text-align:center; padding:var(--e-5)}
.carto .pin{font-size:26px}
.carto p{margin:var(--e-2) 0 0; font-size:var(--t-sm); color:var(--gris)}
.carto:hover{border-color:var(--trait-fort)}
.carto:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Une fois Leaflet initialisé, le conteneur redevient un bloc simple : la
   grille centrée et le padding casseraient le rendu de la carte. */
.carto.chargee{display:block; padding:0; cursor:default; overflow:hidden}

/* Carte PLEINE de la page /carte. Pas d'initialisation paresseuse ici,
   contrairement à `.carto` des pages copro : on vient sur cette page POUR la
   carte, un clic de plus pour l'afficher serait une friction gratuite. */
.carte-plan{height:520px; border:1px solid var(--trait);
  border-radius:var(--rayon-sm); overflow:hidden; margin:var(--e-3) 0}
.carte-plan .flag{font-size:var(--t-xs); color:var(--accent-fonce);
  font-weight:650}

/* --- Sources : attribution TOUJOURS visible ------------------------------- */
.sources{display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-5);
  font-size:var(--t-sm); color:var(--gris)}
.sources div{display:flex; gap:6px}
.sources b{color:var(--encre-2); font-weight:650}

/* --- Formulaires ---------------------------------------------------------- */
form.cs{display:grid; gap:var(--e-3)}
form.cs .row{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-3)}
label{font-size:var(--t-sm); font-weight:650; color:var(--encre); display:block;
  margin-bottom:var(--e-1)}
input[type=text],input[type=email],input[type=number],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--trait-fort);
  border-radius:var(--rayon-sm); font:inherit; font-size:var(--t-md);
  background:var(--surface); color:var(--encre)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-pale);
  border-color:var(--accent)}
textarea{min-height:90px; resize:vertical}
/* A6 — cases de selection des blocs. `fieldset` et `legend` plutot qu'un
   `div` + `strong` : quatre cases qui portent sur une meme question forment
   un groupe, et c'est le seul balisage que les lecteurs d'ecran annoncent
   comme tel. Le `legend` reste visible — un intitule masque obligerait le
   lecteur voyant a deviner ce que les cases commandent. */
.blocs{border:1px solid var(--trait); border-radius:var(--rayon-sm);
  padding:10px 12px; margin:0; display:grid; gap:6px}
.blocs legend{padding:0 5px; font-size:var(--t-sm); font-weight:600;
  color:var(--gris)}
.blocs label{display:flex; gap:9px; align-items:flex-start; margin:0;
  font-weight:400; color:var(--encre); font-size:var(--t-sm)}
.blocs input{flex:none; margin-top:2px}
.consent{display:flex; gap:9px; align-items:flex-start; font-size:var(--t-sm);
  color:var(--gris); font-weight:400}
.consent input{margin-top:3px; flex:none}
.consent label{font-weight:400; color:var(--gris); font-size:var(--t-sm); margin:0}
.erreur{background:#fbeae2; border:1px solid #e6b9a4; color:#8a3a16;
  padding:10px 12px; border-radius:var(--rayon-sm); font-size:var(--t-sm)}

/* Honeypot anti-bot. HORS ÉCRAN, pas `display:none` : certains remplisseurs
   automatiques honorent l'un et ignorent l'autre — or ce champ ne vaut que
   s'ils le remplissent. Masqué depuis la FEUILLE COMMUNE et non en style en
   ligne, pour la même raison qu'ailleurs : une règle qu'on peut lire dans le
   HTML est une règle qu'un bot peut apprendre. Le champ porte un libellé
   explicite (« Laissez ce champ vide ») et `tabindex="-1"` : hors du parcours
   clavier, mais compréhensible si un lecteur d'écran l'annonce quand même. */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden}

/* --- Accueil -------------------------------------------------------------- */
.hero{background:var(--surface); border:1px solid var(--trait);
  border-radius:var(--rayon); box-shadow:var(--ombre); padding:var(--e-6) var(--e-5);
  margin-bottom:var(--e-4)}
.hero h1{font-size:var(--t-3xl); margin:0 0 var(--e-3); line-height:1.15}
.hero .pitch{font-size:var(--t-lg); color:var(--gris); margin:0 0 var(--e-3)}
.hero .baseline{font-size:var(--t-xl); font-weight:700; color:var(--accent-fonce);
  letter-spacing:-.02em; margin:var(--e-5) 0 var(--e-4)}
.copros{list-style:none; margin:0; padding:0; display:grid; gap:var(--e-2)}
.copros a{display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--e-3); background:var(--surface); border:1px solid var(--trait);
  border-radius:var(--rayon-sm); padding:var(--e-3) var(--e-4);
  text-decoration:none; color:var(--encre); transition:border-color .15s}
.copros a:hover{border-color:var(--accent)}
.copros .adr{font-weight:650}
.copros .meta{font-size:var(--t-sm); color:var(--gris)}
.copros .flag{font-size:var(--t-xs); color:var(--accent-fonce); font-weight:650}

footer.pied{border-top:1px solid var(--trait); background:var(--surface)}
footer.pied .wrap{max-width:1080px; margin:0 auto; padding:var(--e-5);
  font-size:var(--t-sm); color:var(--gris)}
footer.pied strong{color:var(--encre)}
footer.pied div + div{margin-top:var(--e-2)}

/* =============================== RECHERCHE ================================ */
/* Champ de recherche de l'accueil. `input[type=search]` n'était pas couvert
   par le sélecteur des formulaires : sans cette règle il tomberait au style
   natif du navigateur, seul élément du site à ne pas suivre le design system. */
.recherche{margin:var(--e-3) 0 var(--e-2)}
.recherche input[type=search]{
  width:100%; padding:12px 14px; border:1px solid var(--trait-fort);
  border-radius:var(--rayon-sm); font:inherit; font-size:var(--t-lg);
  background:var(--surface); color:var(--encre); -webkit-appearance:none}
.recherche input[type=search]:focus{outline:2px solid var(--accent-pale);
  border-color:var(--accent)}
.recherche .copros{margin-top:var(--e-2)}
/* Étiquette réservée aux lecteurs d'écran : le champ porte un placeholder,
   qui n'est PAS un label — il disparaît à la saisie et n'est pas annoncé. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ============================== RESPONSIVE ================================ */
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr}
  .entete h1{font-size:var(--t-2xl)}
}
@media (max-width:600px){
  .container{padding:var(--e-4) var(--e-4) var(--e-7)}
  .carte,.bloc,.hero{padding:var(--e-4)}
  .kpis{gap:var(--e-2)}
  .kpi{min-height:92px; padding:var(--e-3)}
  .kpi .val{font-size:var(--t-xl)}
  .entete h1,.hero h1{font-size:var(--t-xl)}
  .resume{font-size:var(--t-md)}
  .prix-ligne{grid-template-columns:1fr; gap:var(--e-1)}
  .prix-ligne .valeur{text-align:left}
  .tuiles,form.cs .row{grid-template-columns:1fr}
  .actions .btn{width:100%; justify-content:center}
  .voile-net{justify-content:flex-start; padding-top:56px}
  .carte-plan{height:380px}
}