/*
Charte visuelle adaptée de la maquette docs/lakaz-maquette_2.html
(nom de travail « Lakaz », le site s'appelle Noukaz).
Sous-ensemble : uniquement les composants utilisés par les pages Django
(en-tête, hero, recherche, cartes de biens, fiche annonce, footer).
*/
:root{
color-scheme: light; /* fixe le rendu des controles natifs Safari en clair, cf. Lot 2b */
--paper:#EFF2EE; --card:#FFFFFF; --card-2:#F7F9F6;
--basalt:#0D1311; --basalt-2:#18211E; --basalt-3:#2E3B36;
--lagoon:#0C766D; --lagoon-d:#085A53; --lagoon-soft:#DCECE9;
--cane:#B5811A; --cane-soft:#F5EBD5; --cane-d:#7A5610;
--danger:#9A3324; --danger-soft:#FBE4E1;
--ink:#0D1311; --muted:#5C6B65; --muted-2:#5F6F69;
--line:#DCE3DE; --line-2:#E9EEEA; --contour:#7C8B85;
--r-s:8px; --r-m:14px; --r-l:22px; --r-xl:30px;
--sh-s:0 1px 2px rgba(13,19,17,.05), 0 2px 8px rgba(13,19,17,.04);
--sh-m:0 2px 6px rgba(13,19,17,.05), 0 12px 32px rgba(13,19,17,.07);
--sh-l:0 8px 20px rgba(13,19,17,.09), 0 32px 70px rgba(13,19,17,.16);
--f-d:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
--f-b:'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
--f-m:'JetBrains Mono', ui-monospace, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Empeche Safari/Chrome mobile de regonfler le texte a leur guise en paysage. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-b);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font:inherit;color:inherit}
input,select,textarea{color:var(--ink);-webkit-text-fill-color:var(--ink)}
/* Zone tactile : la case reste petite (une case de 44px serait disgracieuse),
c'est le label parent qui porte la cible de 44px — cf. .msel-opt, .estim-chip. */
input[type=checkbox],input[type=radio]{width:22px;height:22px;accent-color:var(--lagoon)}
/* Safari iOS zoome sur tout champ sous 16px et ne dezoome jamais. Applique
partout (et non sous @media pointer:coarse) : le seuil vaut aussi pour un
Mac tactile, et l'ecart 15 -> 16px est invisible a l'oeil sur ce design. */
input,select,textarea{font-size:16px}
input:-webkit-autofill,input:-webkit-autofill:focus{
-webkit-text-fill-color:var(--ink);
-webkit-box-shadow:0 0 0 100px #FFFFFF inset;
}
a{color:inherit;text-decoration:none}
/* ---------- interaction tactile / clavier (lot 4) ----------
Les regles :hover sont enveloppees sur place dans
@media (hover:hover) and (pointer:fine) : sur iPhone, l'etat de survol
persistait apres le tap. Retour tactile de remplacement ci-dessous. */
@media (hover:none){
.card:active,.btn:active{opacity:.82}
}
a,button,[role=button],summary{-webkit-tap-highlight-color:transparent}
/* Le focus reste invisible a la souris mais toujours visible au clavier
(Acces complet au clavier / VoiceOver sur Mac). */
:focus{outline:none}
:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px;border-radius:4px}
/* Lien d'evitement : hors ecran, ramene au premier plan des qu'il prend le
focus. left:0;top:0 plutot qu'une translation : la banniere sticky de
l'en-tete est en z-index 60, d'ou le 999 ici. */
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;z-index:999}
.skip:focus{left:0;top:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* max() plutot qu'une valeur fixe : sur iPhone en paysage, l'encoche mange le
bord de l'ecran et le contenu passerait dessous (viewport-fit=cover). */
.wrap{max-width:1180px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.mono{font-family:var(--f-m);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:500}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:700;letter-spacing:-.025em;line-height:1.03}
h2{font-size:clamp(30px,4vw,50px)}
h3{font-size:22px;letter-spacing:-.02em;line-height:1.15}
.lede{color:var(--muted);font-size:17px;max-width:56ch;line-height:1.55}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .12s ease, background .16s ease, box-shadow .16s ease;white-space:nowrap}
/* La regle [hidden]{display:none} du navigateur est ecrasee par le display de
.btn ci-dessus (selecteur de classe > selecteur d'attribut du user agent) :
sans cette ligne, tout bouton marque hidden reste visible. Constate en prod
sur l'ecran de notifications, ou "M'envoyer un test" s'affichait sans aucun
appareil enregistre et "Activer" ne disparaissait pas apres activation. */
.btn[hidden]{display:none}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--lagoon);color:#fff;box-shadow:0 1px 2px rgba(8,90,83,.3), 0 6px 18px rgba(8,90,83,.22)}
@media (hover:hover) and (pointer:fine){.btn-p:hover{background:var(--lagoon-d)}}
.btn-d{background:var(--basalt);color:#fff}
@media (hover:hover) and (pointer:fine){.btn-d:hover{background:var(--basalt-2)}}
.btn-g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.4px var(--contour)}
@media (hover:hover) and (pointer:fine){.btn-g:hover{box-shadow:inset 0 0 0 1.4px var(--basalt);background:rgba(13,19,17,.03)}}
.btn-w{background:#fff;color:var(--basalt)}
@media (hover:hover) and (pointer:fine){.btn-w:hover{background:var(--card-2)}}
.btn-sm{height:44px;padding:0 16px;font-size:13.5px}
.btn-icon{padding:0;width:44px;flex-shrink:0}
/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(239,242,238,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:28px;height:80px}
.logo{display:flex;align-items:center;min-height:44px}
.logo-img{height:40px;width:auto;display:block}
footer .logo-img{height:28px}
nav.main{display:flex;gap:2px;margin-left:6px}
nav.main a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--muted);transition:color .15s,background .15s}
@media (hover:hover) and (pointer:fine){nav.main a:hover,nav.main a.on{color:var(--ink);background:rgba(13,19,17,.06)}}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Entre le seuil de bascule vers le tiroir (1080px) et 1160px, les sept
entrees de nav.main ne tiennent pas en francais a leur espacement nominal :
« Courte duree » pousse la barre hors du .wrap et TOUTE la page part en
defilement horizontal. Mesure du 06/09/2026, avant ce bloc : scrollWidth
1130 pour un viewport de 1081 (1066 a six entrees). On resserre sur cette
bande seulement — au-dela de 1160px rien ne change, et la cible cliquable
reste haute de 44px. A revoir le jour ou une huitieme entree arrive : ce
n'est pas extensible indefiniment. */
@media (min-width:1081px) and (max-width:1160px){
.hd{gap:16px}
nav.main a{padding:0 9px}
}
.hd-btn-badge{position:relative}
.hd-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff}
.lang{display:flex;background:#EDF0EC;border-radius:999px;padding:3px;box-shadow:inset 0 0 0 1.4px var(--contour)}
.lang a,.lang button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-family:var(--f-m);font-size:11px;font-weight:500;padding:0 14px;border-radius:999px;color:var(--muted);background:none;border:none;box-shadow:inset 0 0 0 1.4px var(--contour);cursor:pointer}
.lang a.on,.lang button.on{background:var(--ink);color:#fff;font-weight:600;box-shadow:none}
/* Bouton qui ouvre une page mais n'est pas un lien : ouvrir les preferences
cookies est une action, et un vers /cookies/preferences/ redonnerait
aux robots une adresse interdite a decouvrir sur chaque page du site (voir
annonces/test_liens_robots.py). Il vit au milieu d'une phrase ou d'une rangee
de liens : il doit donc etre indiscernable d'un , d'ou le meme jeu de
proprietes que la regle « a » plus haut, et rien de plus. Les regles qui
habillent les liens du pied de page et de la banniere le nomment a cote de
« a » — sans quoi il perdrait leur cible tactile de 44 px. */
.lien-bouton{font:inherit;color:inherit;background:none;border:none;padding:0;text-decoration:none;cursor:pointer}
/* ---------- sélecteur de langue de l'espace vendeur/agence/client — voir
espace_vendeur/base.html et espace_client/base.html, toujours visible
(connecté ou non), donc en position fixe plutôt que dans la sidebar
pour ne pas dupliquer le marquage entre les deux branches du template ---------- */
.eab-lang{position:fixed;top:16px;right:20px;z-index:80;display:flex;background:#fff;border-radius:999px;padding:3px;box-shadow:var(--sh-m),inset 0 0 0 1.4px var(--contour)}
.eab-lang button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-family:var(--f-m);font-size:11px;font-weight:600;padding:0 14px;border-radius:999px;color:var(--muted);background:none;border:none;box-shadow:inset 0 0 0 1.4px var(--contour);cursor:pointer}
.eab-lang button.on{background:var(--basalt);color:#fff;box-shadow:none}
/* Sous 900 px, la pastille flottante se posait en bas à droite PAR-DESSUS le
contenu (cartes de « Mes biens », pagination, mesuré le 06/10/2026 à
390 px). Sur une page à menu latéral, c'est désormais la copie rendue DANS
le menu (.eab-lang-side, voir espace_vendeur/_eab_lang.html) qui sert ; la
flottante ne reste que sur les pages sans menu (connexion), en bas à
droite, où il n'y a qu'un formulaire court à recouvrir. */
.eab-lang-side{display:none}
/* Au-dessus de 900 px, en haut à droite de la PAGE et non de l'écran : fixe,
elle recouvrait cartes et boutons dès qu'on faisait défiler (mesuré à 1024,
1280 et 1440 px le 06/10/2026). Elle reste en tête de chaque page. */
@media (min-width:901px){.eab-lang{position:absolute}}
@media (max-width:900px){
.eab-lang{top:auto;bottom:16px;right:16px}
body:has(.eab-side) .eab-lang:not(.eab-lang-side){display:none}
.eab-lang.eab-lang-side{display:flex;position:static;align-self:flex-start;margin:12px 22px 0;box-shadow:none}
}
/* ---------- hero ---------- */
.hero{position:relative;background:var(--basalt);color:#fff;overflow:hidden;border-radius:0 0 var(--r-xl) var(--r-xl);padding-bottom:54px}
.hero-in{position:relative;padding:56px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero-photo{border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh-l)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-carousel{position:relative}
.hero-carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;display:block}
.hero-carousel-slide.on{opacity:1;z-index:1}
.hero-carousel-title{position:absolute;left:0;right:0;top:0;padding:16px 18px;background-image:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.35) 85%,rgba(0,0,0,0) 100%);color:#fff;font-size:14px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-carousel-caption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:16px 18px;background-image:linear-gradient(0deg,rgba(0,0,0,.74),rgba(0,0,0,.35) 85%,rgba(0,0,0,0) 100%);color:#fff}
/* « Localité · District », comme la ligne de lieu des cartes (.card-loc-l,
.card-loc-d) : le district se tronque en premier, jamais le prix. */
.hero-carousel-loc{font-size:13px;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.4);display:flex;gap:6px;min-width:0;white-space:nowrap}
.hero-carousel-price{flex:none}
.hero-carousel-price{font-family:var(--f-d);font-size:19px;font-weight:700;letter-spacing:-.02em;text-shadow:0 1px 3px rgba(0,0,0,.4)}
/* Double anneau : le blanc inset delimite le bouton sur une photo sombre, le
lisere sombre exterieur le delimite sur une photo claire — l'un des deux
contraste toujours, quel que soit le visuel du carrousel. Sans le second,
l'anneau blanc se dissolvait dans un ciel ou un mur clair (mesure : 1,00:1
au pire, 48 a 120 points sur 120 sous le seuil de 3:1 selon la photo).
C'est un box-shadow : ni le diametre, ni l'anneau blanc, ni la taille du
bouton ne changent, et la mise en page n'est pas affectee. */
.hero-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:999px;border:none;background:rgba(13,19,17,.45);box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.55),0 0 0 3px rgba(13,19,17,.85);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .16s ease}
@media (hover:hover) and (pointer:fine){.hero-carousel-arrow:hover{background:rgba(13,19,17,.7)}}
.hero-carousel-prev{left:12px}
.hero-carousel-next{right:12px}
.hero h1{font-size:clamp(26px,3.4vw,41px);font-weight:800;letter-spacing:-.04em;line-height:1.02}
.hero h1 .hero-surtitre{display:block;margin-bottom:14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;opacity:.8}
.hero p.sub{margin-top:10px;color:rgba(255,255,255,.72);font-size:15px;max-width:48ch;line-height:1.5}
.hero-cta{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-cta .btn{height:46px;padding:0 22px;font-size:14.5px}
.hero-cta-note{margin-top:10px;color:rgba(255,255,255,.6);font-size:13px}
.trust{margin-top:18px;display:flex;gap:26px;flex-wrap:wrap;padding-top:15px;border-top:1px solid rgba(255,255,255,.12)}
.trust div span{display:block}
.trust .n{font-family:var(--f-d);font-size:20px;font-weight:700;letter-spacing:-.03em}
.trust .l{font-family:var(--f-m);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:3px}
/* ---------- searchbar ---------- */
/* margin-top négatif : pensé pour chevaucher le bas du .hero (voir liste.html,
qui laisse un padding-bottom exprès pour ça). Sur une page filtrée, le hero
est masqué (bannière homepage uniquement) — sans .search-hero, la barre se
chevauche avec le header au-dessus au lieu du hero, et se retrouve coupée. */
.search{position:relative;z-index:5;background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-l);padding:8px;margin:24px auto 0}
.search.search-hero{margin-top:-36px}
.search-note{text-align:center;font-size:13px;color:var(--muted);margin:14px 0 0}
.stabs{display:flex;gap:2px;padding:4px 4px 10px}
.stabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:.15s}
@media (hover:hover) and (pointer:fine){.stabs a:hover{background:var(--card-2);color:var(--ink)}}
.stabs a.on{background:var(--basalt);color:#fff;font-weight:600}
.sfields{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:1px;background:var(--line-2);border-radius:var(--r-m)}
.sfields > *:first-child{border-radius:var(--r-m) 0 0 var(--r-m)}
.sfields > *:last-child{border-radius:0 var(--r-m) var(--r-m) 0}
.sf{background:#fff;padding:11px 16px;display:flex;flex-direction:column;gap:3px;min-width:0;position:relative}
.sf > *:last-child{margin-top:auto}
.sf label{font-family:var(--f-m);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2)}
.sf select,.sf input:not([type=radio]):not([type=checkbox]){border:none;background:none;box-shadow:inset 0 0 0 1.4px var(--contour);border-radius:8px;font-size:16px;font-weight:500;width:100%;min-height:44px;padding:0 8px;cursor:pointer;}
.sf-go{background:#fff;display:flex;align-items:center;padding:6px}
.sf-go .btn{height:100%;border-radius:11px;padding:0 26px}
.sfields-adv{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-2);border-radius:var(--r-m);margin-top:1px}
.sfields-adv > *:first-child{border-radius:var(--r-m) 0 0 var(--r-m)}
.sfields-adv > *:last-child{border-radius:0 var(--r-m) var(--r-m) 0}
.sfields-adv .sf{flex:1 1 130px}
.sfields-adv .sf input:not([type=radio]):not([type=checkbox]){border:none;background:none;box-shadow:inset 0 0 0 1.4px var(--contour);border-radius:8px;font-size:16px;font-weight:500;width:100%;min-height:44px;padding:0 8px;}
.sfields-adv .sf select{border:none;background:none;box-shadow:inset 0 0 0 1.4px var(--contour);border-radius:8px;font-size:16px;font-weight:500;width:100%;min-height:44px;padding:0 8px;cursor:pointer;}
.sfields-adv .sf-go{flex:0 0 auto;padding:6px}
.sfields-adv .sf-go .btn{height:100%;border-radius:11px;padding:0 20px}
.toggle2{display:flex;background:rgba(13,19,17,.05);border-radius:999px;padding:2px;width:fit-content;margin-top:1px}
.toggle2-opt{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.toggle2-opt:has(input:checked){background:var(--lagoon);color:#fff;font-weight:600}
.msel summary{font-size:15px;font-weight:500;cursor:pointer;list-style:none;display:flex;align-items:center;min-height:44px;gap:6px;padding:0}
.msel summary::-webkit-details-marker{display:none}
.msel summary::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--muted-2);border-bottom:1.6px solid var(--muted-2);transform:rotate(45deg);margin-top:-3px}
.msel[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.msel-panel{position:absolute;margin-top:12px;left:0;background:#fff;border-radius:var(--r-m);box-shadow:var(--sh-l);padding:14px;z-index:30;min-width:230px;display:flex;flex-direction:column;gap:11px}
.msel-opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;font-size:13.5px;font-weight:400;color:var(--ink);cursor:pointer}
.msel-opt input[type="checkbox"]{accent-color:var(--lagoon);width:22px;height:22px;flex:none;margin:0}
.msel-num{grid-template-columns:15px 1fr auto;gap:9px 14px;cursor:default}
.msel-num input{width:88px;height:auto;border:1.4px solid var(--contour);border-radius:8px;padding:6px 8px;font-size:16px;font-family:inherit;accent-color:initial}
.sfields-adv .msel-panel{margin-top:16px}
/* ---------- puces de filtres actifs ---------- */
.chips-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.chip-filtre{display:inline-flex;align-items:center;gap:7px;padding:7px 8px 7px 14px;border-radius:999px;font-size:13px;font-weight:500;background:#fff;box-shadow:inset 0 0 0 1.4px var(--contour);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.chip-filtre:hover{box-shadow:inset 0 0 0 1.4px var(--basalt)}}
.chip-filtre .x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--card-2);font-size:11px;color:var(--muted)}
.chip-reset{font-size:13px;font-weight:500;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){.chip-reset:hover{color:var(--ink)}}
.toggle2-opt input{position:absolute;opacity:0;pointer-events:none}
/* ---------- sections ---------- */
section{padding:80px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:38px;flex-wrap:wrap}
.sec-h .lede{margin-top:14px}
.sec-link{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;font-weight:600;color:var(--lagoon-d);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.sec-link:hover{color:var(--lagoon)}}
/* ---------- listing cards ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-s);transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;display:flex;flex-direction:column;text-align:left;width:100%}
@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}}
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--basalt-3);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);font-family:var(--f-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-tags{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 24px)}
.tag{font-family:var(--f-m);font-size:9px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;padding:4px 7px;border-radius:5px;background:rgba(255,255,255,.94);color:var(--basalt);backdrop-filter:blur(6px);white-space:nowrap}
.tag.gold{background:var(--cane);color:var(--ink)}
.tag.verif{background:var(--lagoon);color:#fff}
.tag.score{background:var(--cane-soft);color:var(--cane)}
.card-b{padding:15px 15px 17px;display:flex;flex-direction:column;flex:1}
.card-loc{display:flex;align-items:center;gap:6px;font-family:var(--f-m);font-size:11px;color:var(--muted-2);letter-spacing:.04em;text-transform:uppercase;min-width:0;white-space:nowrap}
/* « Localité · District » : si la ligne déborde, le district se tronque en
premier ; la localité ne rétrécit pas, sauf si elle dépasse à elle seule. */
.card-loc-l{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.card-loc-d{min-width:0;overflow:hidden;text-overflow:ellipsis}
.card-price{font-family:var(--f-d);font-size:22px;font-weight:700;letter-spacing:-.04em;margin-top:7px;line-height:1}
.card-price small{font-family:var(--f-b);font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.card-t{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.strip{display:flex;gap:0;margin-top:12px;padding-top:11px;border-top:1px solid var(--line-2);font-family:var(--f-m);font-size:10.5px;color:var(--muted);flex-wrap:wrap;row-gap:4px}
.strip span{padding-right:8px;margin-right:8px;border-right:1px solid var(--line-2)}
.strip span:last-child{border:none;margin:0;padding:0}
/* Pied « vendeur » des cartes */
.seller{display:flex;align-items:center;gap:10px;padding:11px 15px 12px;border-top:1px solid var(--line-2);background:var(--card-2)}
.seller-av{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;overflow:hidden;background:var(--basalt);color:#fff;font:700 11.5px/1 var(--f-d);letter-spacing:.01em}
.seller-av.perso{background:var(--lagoon-soft);color:var(--lagoon-d)}
.seller-av.has-logo{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.seller-av img{width:100%;height:100%;object-fit:contain}
.seller-av svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.seller-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.seller-n{font-size:13px;font-weight:600;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seller-k{display:inline-flex;align-items:center;gap:4px;font:9.5px/1.3 var(--f-m);letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.seller-k.ok{color:var(--lagoon-d)}
.seller-k svg{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.empty{grid-column:1/-1;background:#fff;border-radius:22px;padding:56px 30px;text-align:center;box-shadow:var(--sh-s)}
.soon{background:var(--cane-soft);border-radius:var(--r-l);padding:36px 30px;text-align:center;box-shadow:inset 0 0 0 1px rgba(181,129,26,.18)}
.soon .eyebrow{color:var(--cane-d)}
.soon h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:6px}
.soon p{color:var(--muted);font-size:14px;margin-top:6px;max-width:44ch;margin-left:auto;margin-right:auto}
/* ---------- tableau simple (espace vendeur / espace client) ---------- */
.eab-table{width:100%;border-collapse:collapse}
.eab-table th{text-align:left;font-family:var(--f-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);padding:14px 18px;border-bottom:1px solid var(--line)}
.eab-table td{padding:14px 18px;border-bottom:1px solid var(--line-2);font-size:14px}
.eab-table tr:last-child td{border-bottom:none}
.eab-table tbody tr{transition:background .12s}
@media (hover:hover) and (pointer:fine){.eab-table tbody tr:hover{background:var(--card-2)}}
.eab-table td.eab-empty{padding:44px 18px;text-align:center;color:var(--muted-2);font-size:13.5px}
.eab-table-bien{display:flex;align-items:center;gap:12px}
.eab-table-thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:var(--card-2)}
.eab-table-thumb-placeholder{width:44px;height:44px;border-radius:10px;flex:none;background:var(--card-2);display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:16px}
/* ---------- cartes de stats / mise en page tableau de bord ---------- */
.eab-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.eab-stats.eab-stats-4{grid-template-columns:repeat(4,1fr)}
.eab-stat{position:relative;overflow:hidden}
.eab-stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent, var(--lagoon))}
.eab-big{font-family:var(--f-d);font-size:32px;font-weight:800;letter-spacing:-.03em;margin-top:6px}
.eab-grid-2{display:grid;grid-template-columns:360px 1fr;gap:20px;margin-top:20px;align-items:start}
.eab-actions{display:flex;gap:6px;flex-wrap:wrap}
.eab-pager{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:16px}
/* Tableau -> pile de cartes sous 720px (spec.md §12 : jamais un tableau qui
déborde). Scopé à .eab-table-edl (liste des états des lieux) — les autres
.eab-table du projet gardent leur défilement horizontal existant, pas de
régression visuelle ailleurs. */
@media (max-width:720px){
.eab-table-edl thead{display:none}
.eab-table-edl,.eab-table-edl tbody,.eab-table-edl tr,.eab-table-edl td{display:block;width:100%}
.eab-table-edl tr{border-bottom:1px solid var(--line);padding:14px 18px;margin:0}
.eab-table-edl tr:last-child{border-bottom:none}
.eab-table-edl td{padding:3px 0;border-bottom:none;display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.eab-table-edl td[data-label]::before{content:attr(data-label);color:var(--muted-2);font-family:var(--f-m);font-size:10px;letter-spacing:.06em;text-transform:uppercase;flex:none}
.eab-table-edl td:last-child{justify-content:flex-start;margin-top:8px}
.eab-table-edl td:last-child::before{content:none}
}
.rdv-message{margin-top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--card-2);border-radius:var(--r-m);border:1px solid var(--line-2);padding:14px 16px}
.accuse-lecture{margin-left:6px;color:var(--muted-2);letter-spacing:0}
.rdv-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.rdv-propose{position:relative}
.rdv-propose summary{list-style:none;cursor:pointer}
.rdv-propose summary::-webkit-details-marker{display:none}
.rdv-propose-form{position:absolute;top:calc(100% + 6px);left:0;z-index:20;background:#fff;border-radius:var(--r-m);box-shadow:var(--sh-l);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:240px}
/* Le panneau s'ouvre vers la GAUCHE quand il vit dans la derniere colonne
d'un tableau : ancre a `left:0`, il sortait de l'ecran de 41px et faisait
defiler toute la page lateralement (mesure du 29/09/2026 sur l'ecran des
leads, viewport 1280). La regle de base n'est pas touchee : elle sert
aussi dans la messagerie, ou le panneau a de la place a sa droite. */
.rdv-propose-form.a-droite{left:auto;right:0}
/* Sous 900px, le panneau rentre dans le flux au lieu de flotter : ancre a
droite d'un tableau deja plus large que l'ecran, il s'ouvrait a 487px hors
du viewport (mesure du 29/09/2026 a 405px). En flux, la confirmation se lit
sous son bouton, sans defilement lateral. Le tableau, lui, defile toujours :
c'est un defaut anterieur a ce lot, signale et non corrige ici. */
@media (max-width:900px){
.rdv-propose-form.a-droite{position:static;min-width:0;box-shadow:none;padding:10px 0}
}
.rdv-propose-form select{height:44px;padding:0 12px;border-radius:10px;box-shadow:inset 0 0 0 1.4px var(--contour);border:none;font-size:16px;background:#fff;font:inherit}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld label.regle-checkbox{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;text-transform:none;font-family:inherit;font-size:14px;letter-spacing:normal;color:var(--ink);margin-bottom:0}
.regle-checkbox input{width:22px;height:22px;flex:none;accent-color:var(--lagoon)}
.filtres-biens{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:12px;margin-top:20px}
.filtres-biens .fld{margin-bottom:0;min-width:0}
.filtres-biens-q{flex:2 1 0}
.filtres-biens-select{flex:1 1 0}
.filtres-biens-go{flex:0 0 auto}
.filtres-biens-go label{visibility:hidden}
.filtres-biens-btns{display:flex;gap:8px}
.filtres-biens-btns .btn{height:46px;white-space:nowrap}
/* 780 et non plus 760 (06/10/2026) : les quatre champs tiennent sur une
rangée jusque-là (mesuré à 800 px, menu latéral replié en tiroir). */
@media (max-width:780px){
.filtres-biens{flex-wrap:wrap}
.filtres-biens-q,.filtres-biens-select{flex:1 1 100%}
.filtres-biens-go{width:100%}
.filtres-biens-btns .btn{flex:1}
}
/* ---------- Mes biens : total, titres, cartes, pagination ----------
06/10/2026. Le tableau à huit colonnes débordait de sa carte sur téléphone,
et défilait de côté entre 781 et ~1300 px d'écran : le menu latéral (264 px)
ne laisse alors que 700 à 950 px au contenu. Le choix tableau / cartes se
fait donc sur la largeur de la ZONE DE CONTENU (`.mb-liste`, requête de
conteneur), pas sur celle de l'écran. Le tableau demande 910 px au plus
serré (mesuré, actions repliées) : sous 960 px de zone, ce sont les cartes.
Gabarit : espace_vendeur/biens.html, les deux rendus sont dans la page. */
.mb-total{margin-top:18px;font-family:var(--f-m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
/* Deux lignes au plus, partout : un titre d'annonce importé fait souvent
trois lignes et étirait toute la rangée du tableau. */
.mb-titre{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.mb-liste{container-type:inline-size}
/* Mesuré à 1440 px avec 57 biens : la référence se coupait (« NKZ-2- / 056 »)
et les trois boutons s'empilaient, triplant la hauteur de la rangée.
Cellules resserrées, et les actions sur une rangée dès que le tableau a la
place. `overflow-x:auto` n'est qu'un filet : la bascule en cartes arrive
avant que le tableau ne déborde. */
.mb-tableau{overflow-x:auto;container-type:inline-size}
.mb-tableau td:nth-child(2){min-width:200px;max-width:340px}
.mb-tableau th,.mb-tableau td{padding-left:12px;padding-right:12px}
.mb-tableau td:first-child{white-space:nowrap}
.mb-tableau .eab-actions .btn{padding:0 12px}
@container (min-width:1040px){.mb-tableau .eab-actions{flex-wrap:nowrap}}
.mb-cartes{display:none;list-style:none;margin:10px 0 0;padding:0;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@container (max-width:959px){
.mb-tableau{display:none}
.mb-cartes{display:grid}
}
.mb-carte{display:flex;flex-direction:column;margin:0;padding:14px}
.mb-haut{display:flex;align-items:flex-start;gap:12px}
.mb-vignette{flex:none;width:76px;height:76px;border-radius:12px;overflow:hidden;background:var(--card-2);display:flex;align-items:center;justify-content:center;font-size:24px}
.mb-vignette img{width:100%;height:100%;object-fit:cover}
.mb-corps{flex:1;min-width:0}
.mb-corps .mb-titre{font-size:15px;font-weight:600;line-height:1.3}
.mb-ref{margin-top:4px;font-size:12.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-prix{margin-top:4px;font-weight:700}
/* Statut, score et vues sur UNE ligne : rien ne s'y enroule. Pire cas
mesuré : « SOLD / RENTED · Score 55/100 · 12450 views » sur 322 px utiles
(écran de 390 px) — d'où l'espacement serré et la pastille réduite. */
.mb-meta{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden}
.mb-meta .badge{padding:3px 8px;font-size:10px;letter-spacing:.02em}
/* Les actions en une seule rangée, calées en bas de la carte (les cartes
d'une même ligne de grille ont la même hauteur) : chaque geste prend une
part égale, hauteur tactile de .btn-sm conservée. */
.mb-carte .eab-actions{flex-wrap:nowrap;margin-top:auto;padding-top:12px}
.mb-carte .eab-actions>*{flex:1 1 0;min-width:0}
.mb-carte .eab-actions .btn{width:100%;padding:0 8px;font-size:13px}
.mb-vide{grid-column:1/-1;padding:36px 18px;text-align:center;color:var(--muted-2);font-size:13.5px}
.mb-pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:18px}
.mb-page{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:500;background:#fff;box-shadow:inset 0 0 0 1.4px var(--contour)}
.mb-page.on{background:var(--ink);color:#fff;font-weight:600;box-shadow:none}
.mb-page-ellipse{min-width:20px;padding:0;background:none;box-shadow:none;color:var(--muted-2)}
@media (hover:hover) and (pointer:fine){a.mb-page:hover{box-shadow:inset 0 0 0 1.4px var(--basalt)}}
@media (max-width:760px){
.eab-stats,.eab-stats.eab-stats-4{grid-template-columns:1fr}
.eab-grid-2{grid-template-columns:1fr}
.fld-row{grid-template-columns:1fr}
}
/* ---------- cartes radio de formule (création d'annonce) ---------- */
.formule-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.formule-carte{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--r-m);box-shadow:inset 0 0 0 1.4px var(--contour);cursor:pointer;transition:.15s}
@media (hover:hover) and (pointer:fine){.formule-carte:hover{box-shadow:inset 0 0 0 1.4px var(--basalt)}}
.formule-carte.sel{box-shadow:inset 0 0 0 2px var(--lagoon);background:var(--lagoon-soft)}
.formule-carte input{position:absolute;top:14px;right:14px;accent-color:var(--lagoon)}
.formule-carte .fc-nom{font-weight:600;font-size:14.5px}
.formule-carte .fc-prix{font-family:var(--f-d);font-size:19px;font-weight:800;letter-spacing:-.03em}
.formule-carte .fc-d{font-size:12px;color:var(--muted);line-height:1.4}
@media (max-width:760px){
.formule-cartes{grid-template-columns:1fr}
}
/* ---------- pagination ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:38px}
.pager-btn{padding:10px 20px;border-radius:999px;font-size:14px;font-weight:500;background:#fff;box-shadow:inset 0 0 0 1.4px var(--contour);transition:.15s}
@media (hover:hover) and (pointer:fine){.pager-btn:hover{box-shadow:inset 0 0 0 1.4px var(--basalt);background:rgba(13,19,17,.03)}}
.pager-info{font-family:var(--f-m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
/* ---------- tarifs (accueil) ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;align-items:stretch}
.tier{background:#fff;border-radius:var(--r-l);padding:24px 20px;box-shadow:var(--sh-s);display:flex;flex-direction:column;position:relative}
.tier.hot{box-shadow:0 0 0 2px var(--basalt), var(--sh-m)}
.tier.pro{background:var(--basalt);color:#fff}
.tier.pro h3,.tier.pro .pr{color:#fff}
.tier.pro li{color:rgba(255,255,255,.78)}
.tier.pro li .ic{color:#8FD3CB}
.tier.pro .dl{color:rgba(255,255,255,.55)}
.tier h3{font-size:17px}
.tier .pr{font-family:var(--f-d);font-size:30px;font-weight:800;letter-spacing:-.045em;margin:12px 0 3px;line-height:1}
.tier .pr small{font-family:var(--f-b);font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0}
.tier .dl{font-family:var(--f-m);font-size:10.5px;color:var(--muted-2);margin-bottom:18px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1;margin-bottom:20px}
.tier li{display:flex;gap:8px;font-size:13px;color:var(--basalt-3);line-height:1.4}
.tier li .ic{flex:none;color:var(--lagoon);margin-top:1px}
.tier li.off{color:var(--muted-2);opacity:.5}
.tier li.off .ic{color:var(--muted-2)}
.tier-flag{position:absolute;top:-11px;left:20px;font-family:var(--f-m);font-size:9px;letter-spacing:.1em;text-transform:uppercase;background:var(--basalt);color:#fff;padding:5px 9px;border-radius:6px;font-weight:500}
@media (max-width:900px){.tiers{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tiers{grid-template-columns:1fr}}
/* ---------- packs photo (accueil) ---------- */
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:12px}
.pack{background:#fff;border-radius:var(--r-l);padding:28px;box-shadow:var(--sh-s);display:flex;flex-direction:column;position:relative}
.pack.hot{box-shadow:0 0 0 2px var(--basalt), var(--sh-m)}
.pack-flag{position:absolute;top:-11px;left:28px;font-family:var(--f-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--basalt);color:#fff;padding:5px 10px;border-radius:6px;font-weight:500}
.pack h3{font-size:19px}
.pack .pr{font-family:var(--f-d);font-size:32px;font-weight:800;letter-spacing:-.04em;margin:12px 0 3px;line-height:1}
.pack .dl{font-family:var(--f-m);font-size:11px;color:var(--muted-2);margin-bottom:20px}
.pack ul{list-style:none;display:flex;flex-direction:column;gap:9px;flex:1;margin-bottom:22px}
.pack li{display:flex;gap:9px;font-size:13.5px;color:var(--basalt-3);line-height:1.45}
.pack li .ic{flex:none;color:var(--lagoon);margin-top:2px}
.pack li.off{color:var(--muted-2);opacity:.5}
.pack li.off .ic{color:var(--muted-2)}
.uplift{display:flex;align-items:center;gap:20px;background:var(--lagoon-soft);border-radius:var(--r-l);padding:22px 26px;margin-top:18px}
.uplift .big{font-family:var(--f-d);font-size:40px;font-weight:800;letter-spacing:-.04em;color:var(--lagoon-d);line-height:1;flex:none}
.uplift p{font-size:14px;color:var(--lagoon-d);max-width:60ch;line-height:1.5}
@media (max-width:640px){.packs{grid-template-columns:1fr}.uplift{flex-direction:column;align-items:flex-start;gap:10px}}
/* ---------- quartiers ---------- */
.quartiers{display:flex;flex-wrap:wrap;gap:9px}
.qchip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;background:#fff;box-shadow:inset 0 0 0 1.4px var(--contour);transition:.15s}
@media (hover:hover) and (pointer:fine){.qchip:hover{box-shadow:inset 0 0 0 1.4px var(--basalt);background:rgba(13,19,17,.03)}}
/* ---------- detail page ---------- */
.d-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.d-tags .tag{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.d-tags .tag.gold{background:var(--cane-soft);color:var(--cane-d);box-shadow:inset 0 0 0 1px rgba(181,129,26,.3)}
.d-tags .tag.verif{background:var(--lagoon-soft);color:var(--lagoon-d);box-shadow:inset 0 0 0 1px rgba(12,118,109,.22)}
.d-title{font-family:var(--f-d);font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.08}
.d-subtitle{font-size:15px;color:var(--muted);margin-top:8px;line-height:1.4}
.d-loc{font-family:var(--f-m);font-size:12px;color:var(--muted);margin-top:12px;letter-spacing:.03em}
.d-body{display:grid;grid-template-columns:1fr 380px;gap:44px;padding:38px 0 90px;align-items:start}
.gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:180px 180px;gap:5px;margin-bottom:26px;border-radius:var(--r-l);overflow:hidden}
.gal a{position:relative;overflow:hidden;display:block;background:var(--basalt-3)}
.gal a:first-child{grid-row:span 2}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
@media (hover:hover) and (pointer:fine){.gal a:hover img{transform:scale(1.04)}}
.gal .more{position:absolute;inset:0;background:rgba(13,19,17,.55);color:#fff;display:grid;place-items:center;font-family:var(--f-m);font-size:13px;letter-spacing:.04em}
.gal-vide{aspect-ratio:16/9;border-radius:var(--r-l);background:var(--basalt-3);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);font-family:var(--f-m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:26px}
/* Ancrage du bouton de partage flottant (02/10/2026). `position:relative`
seulement : la galerie garde sa place dans le flux. */
.media{position:relative}
/* Bouton de partage par-dessus la photo principale — MOBILE SEULEMENT. Sur
ordinateur c'est la rangee sous le prix qui sert (.partage). Revele par
partage.js : le serveur ne sait pas s'il y a une feuille native. */
.gal-partage{display:none}
@media (max-width:780px){
/* CARROUSEL, PLUS DE GRILLE (02/10/2026).
L'ancienne regle declarait deux rangees (150px + 100px) mais la premiere
photo en occupait DEUX et il restait cinq vignettes : une TROISIEME rangee
implicite se creait, de hauteur `auto` — mesuree a 389 px au lieu des 286
attendus, et davantage avec de vraies photos, puisque la rangee prenait
alors leur hauteur naturelle. C'est ce qui repoussait le titre et le prix
hors du premier ecran.
Une bande horizontale a hauteur FIXE (aspect-ratio sur chaque vignette)
supprime la rangee implicite par construction : il n'y a plus de rangees.
`scroll-snap` pour que le doigt s'arrete sur une photo, pas entre deux. */
.gal{display:flex;grid-template-columns:none;grid-template-rows:none;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal a{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3}
/* Neutralise l'etalement sur deux rangees de la version bureau. */
.gal a:first-child{grid-row:auto}
.gal-partage{display:grid;place-items:center;position:absolute;z-index:2;
top:10px;right:10px;width:38px;height:38px;border:0;padding:0;
border-radius:999px;cursor:pointer;
background:rgba(13,19,17,.55);color:#fff;
backdrop-filter:blur(4px)}
.gal-partage svg{width:17px;height:17px}
}
.ref{font-family:var(--f-m);font-size:11px;color:var(--muted-2);letter-spacing:.03em;margin-top:6px;display:block}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1px;background:var(--line-2);border-radius:var(--r-m);overflow:hidden;margin:26px 0;border:1px solid var(--line-2)}
.spec{background:#fff;padding:15px 14px}
.spec .l{font-family:var(--f-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.spec .v{font-family:var(--f-d);font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:5px}
.spec .v i{font-style:normal;font-size:12px;font-weight:500;font-family:var(--f-b);color:var(--muted)}
.blk{background:#fff;border-radius:var(--r-l);padding:26px;margin-bottom:18px;box-shadow:var(--sh-s)}
.blk h3{margin-bottom:14px}
/* Les titres de section de la fiche bien sont passes de h3 a h2 au lot 5d (le
document sautait de h1 a h3). Leur taille est celle de h3, reprise a
l'identique ici : sans cela ils heriteraient du clamp de h2 (30-50px) et la
page changerait d'allure, ce que la mission interdit. */
.blk h2,.map-hd h2{font-size:22px;letter-spacing:-.02em;line-height:1.15}
.blk h2{margin-bottom:14px}
/* Lot SEO 2, B : bloc « Pour aller plus loin » des guides (guides/maillage.py) */
.guide-maillage{margin-top:28px}.guide-maillage-liens{margin:0;padding-left:18px;line-height:1.9}
.blk p{color:var(--muted);font-size:15px;line-height:1.62}
.feats{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.feat{font-size:13px;padding:6px 11px;border-radius:8px;background:var(--card-2);color:var(--basalt-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.side{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
.price-card{background:var(--basalt);color:#fff;border-radius:var(--r-l);padding:24px;box-shadow:var(--sh-m)}
.price-card .p{font-family:var(--f-d);font-size:36px;font-weight:800;letter-spacing:-.04em;line-height:1}
.price-card .p small{font-family:var(--f-b);font-size:14px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:0}
.price-card .alt{font-family:var(--f-m);font-size:12px;color:rgba(255,255,255,.5);margin-top:8px}
.price-card .sqm{font-family:var(--f-m);font-size:11px;color:#8FD3CB;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.warn{display:flex;gap:10px;padding:13px;border-radius:11px;background:var(--cane-soft);font-size:12.5px;line-height:1.5;color:#6E4E0F}
.who{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.av-init{width:48px;height:48px;border-radius:14px;background:var(--basalt);color:#fff;display:grid;place-items:center;font-family:var(--f-d);font-weight:700;font-size:17px;flex:none}
.av-init svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
/* ---------- avatar de profil (rond, style Messenger) — comptes/templatetags/comptes_extras.py::avatar ---------- */
.avatar-photo{border-radius:50%;object-fit:cover;flex:none}
.avatar-init{border-radius:50%;background:var(--basalt);color:#fff;display:grid;place-items:center;font-family:var(--f-d);font-weight:700;flex:none}
.who-t b{display:block;font-size:15px;font-weight:600}
.who-t b a{display:inline-flex;align-items:center;min-height:44px}
.who-t span{font-family:var(--f-m);font-size:11px;color:var(--muted-2);letter-spacing:.03em}
.sc-top{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;background:var(--basalt);color:#fff;margin-bottom:14px}
.sc-big{font-family:var(--f-d);font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1}
.sc-stars{display:flex;gap:2px;margin-top:5px}
.sc-stars svg{color:#E8B93A}
.sc-n{font-family:var(--f-m);font-size:10.5px;color:rgba(255,255,255,.5);margin-top:5px}
.sc-badge{margin-left:auto;text-align:right}
.sc-badge .b{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-m);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--lagoon);color:#fff;padding:5px 8px;border-radius:6px;font-weight:500}
.sc-kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.sc-kpi div{background:#fff;padding:12px}
.sc-kpi .v{font-family:var(--f-d);font-size:19px;font-weight:700;letter-spacing:-.03em}
.sc-kpi .v i{font-style:normal;font-size:11px;font-weight:500;font-family:var(--f-b);color:var(--muted)}
.sc-kpi .l{font-family:var(--f-m);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-top:3px}
.sc-none{padding:16px;border-radius:12px;background:var(--card-2);text-align:center}
.sc-none b{display:block;font-size:13.5px;margin-bottom:4px}
.sc-none span{font-size:12px;color:var(--muted)}
.map-wrap{background:var(--basalt);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-m);margin-bottom:18px}
.map-hd{padding:20px 24px 16px}
.map-hd h3{color:#fff;margin-bottom:0}
.map-hd p{color:rgba(255,255,255,.55);font-size:13px;margin-top:5px}
.map-frame{width:100%;height:320px;background:var(--basalt-3);filter:grayscale(.2) contrast(1.05) brightness(.96)}
.map-note{padding:14px 24px;font-family:var(--f-m);font-size:11.5px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.03);border-top:1px solid rgba(255,255,255,.08)}
.map-note-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:rgba(255,255,255,.75)}
.map-note-cta a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
/* Repli quand le .pmtiles est injoignable : fond neutre (map-frame) + le cercle,
et cette note centrée — jamais une mosaïque de tuiles d'erreur (carte.js). */
.carte-note-indispo{position:absolute;inset:0;z-index:500;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px;font-family:var(--f-m);font-size:12px;color:rgba(255,255,255,.6);pointer-events:none}
/* ---------- lightbox galerie ---------- */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(9,13,11,.95);display:flex;align-items:center;justify-content:center;padding:24px}
.lightbox[hidden]{display:none}
.lb-img{max-width:min(1100px,92vw);max-height:86vh;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.08);color:#fff;border:none;border-radius:999px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;line-height:1;transition:background .15s}
@media (hover:hover) and (pointer:fine){.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.2)}}
.lb-close{top:20px;right:20px}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb-next{right:20px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:var(--f-m);font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.05em}
@media (max-width:640px){
.lb-prev{left:8px}
.lb-next{right:8px}
}
/* ---------- créneaux (RDV) ---------- */
.slots{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.slot{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;border:1.4px solid var(--contour);font-size:13.5px;cursor:pointer;transition:.15s}
.slot:has(input:checked){border-color:var(--lagoon);background:var(--lagoon-soft)}
.slot input{accent-color:var(--lagoon)}
.jours-visite{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.jour-visite{border:1.4px solid var(--contour);border-radius:10px}
.jour-visite summary{padding:12px 14px;font-size:14px;font-weight:500;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;text-transform:capitalize}
.jour-visite summary::-webkit-details-marker{display:none}
.jour-visite summary::after{content:"";width:7px;height:7px;flex:none;border-right:1.6px solid var(--muted-2);border-bottom:1.6px solid var(--muted-2);transform:rotate(45deg);margin-top:-3px}
.jour-visite[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.jour-visite[open] summary{border-bottom:1.4px solid var(--line)}
.jour-visite-creneaux{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px}
.jour-visite-creneaux .slot{padding:8px 12px}
.jours-visite-plus{border:none}
.jours-visite-plus > summary{padding:6px 2px;color:var(--lagoon-d);font-weight:500;font-size:13.5px;text-transform:none;justify-content:flex-start;gap:6px}
.jours-visite-plus[open] > summary{border-bottom:none}
.jours-visite-suite{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:0}
/* ---------- séparateur "ou" (connexion sociale) ---------- */
.social-sep{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted-2);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--f-m)}
.social-sep::before,.social-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-social[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
/* Deux fournisseurs sur une seule ligne, chacun avec son logo. minmax(0,1fr)
et non 1fr : sans le min de 0, une colonne de grille refuse de passer sous
la largeur intrinsèque de son contenu et les deux boutons débordent de la
carte sur les écrans étroits. */
.soc-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.soc-duo .btn-social{width:100%;padding:0 12px;font-size:14px}
.soc-logo{flex:none}
@media (max-width:380px){.soc-duo{grid-template-columns:1fr}}
/* ---------- messages flash ---------- */
.msg{padding:13px 16px;border-radius:11px;font-size:14px;margin-bottom:14px}
.msg-success{background:var(--lagoon-soft);color:var(--lagoon-d)}
.msg-error{background:var(--danger-soft);color:var(--danger)}
/* ---------- badges de statut ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-family:var(--f-m);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;line-height:1.6}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge-succes{background:var(--lagoon-soft);color:var(--lagoon-d)}
.badge-attente{background:var(--cane-soft);color:var(--cane-d)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-neutre{background:var(--line-2);color:var(--muted)}
/* ---------- forms ---------- */
.fld{margin-bottom:16px}
.fld>label{font-family:var(--f-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;height:46px;padding:0 14px;border-radius:11px;box-shadow:inset 0 0 0 1.4px var(--contour);border:none;font-size:16px;background:#fff;font:inherit}
.fld textarea{height:auto;padding:12px 14px}
.fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:inset 0 0 0 2px var(--lagoon)}
/* RadioSelect/CheckboxSelectMultiple (ex. type_compte, raison de retrait) :
Django imbrique un par option — sans cette
remise à zéro, ces inputs héritent du style plein-largeur ci-dessus
(pensé pour les champs texte) et deviennent des cases géantes. */
.fld ul{list-style:none}
.fld ul label{display:flex;align-items:center;gap:8px;font-family:inherit;font-size:14px;letter-spacing:normal;text-transform:none;color:var(--ink);margin-bottom:8px;cursor:pointer}
.fld input[type="radio"],.fld input[type="checkbox"]{width:auto;height:auto;padding:0;border-radius:0;box-shadow:none;background:none;accent-color:var(--lagoon)}
/* Bouton « œil » des champs mot de passe : posé par static/js/navigation.js
(section 5) autour des champs `data-oeil`. Zone de 44 px, et le texte du
champ s'arrête avant l'icône. L'œil natif d'Edge est masqué là où le
nôtre existe, pour ne pas en avoir deux ; sans JavaScript, il reste. */
.oeil{position:relative;display:block}
.oeil>input[data-oeil]{padding-right:48px}
.oeil-btn{position:absolute;top:50%;right:1px;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer}
.oeil-btn:hover,.oeil-btn:focus-visible{color:var(--lagoon)}
.oeil-btn:focus-visible{outline:2px solid var(--lagoon);outline-offset:-2px}
.oeil>input::-ms-reveal,.oeil>input::-ms-clear{display:none}
.err{color:var(--danger);font-size:13px;margin-top:6px}
/* ---------- modale alerte ---------- */
.modal-overlay{position:fixed;inset:0;z-index:250;background:rgba(13,19,17,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-overlay:not(.open){display:none}
.modal-card{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-l);padding:28px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto}
.modal-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.modal-close{background:rgba(13,19,17,.06);border-radius:999px;width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;font-size:15px;color:var(--muted);line-height:1}
@media (hover:hover) and (pointer:fine){.modal-close:hover{background:rgba(13,19,17,.12)}}
.modal-crit{padding:12px 14px;border-radius:11px;background:var(--card-2);font-size:13px;color:var(--basalt-3);margin:14px 0 18px;line-height:1.5}
.modal-crit b{font-family:var(--f-m);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:4px}
.toggle2-opt.off{opacity:.45;cursor:not-allowed}
.toggle2-wide{width:100%}
.toggle2-wide .toggle2-opt{flex:1;text-align:center}
/* ---------- estimation en ligne ---------- */
.est-range{font-family:var(--f-d);font-size:28px;font-weight:800;letter-spacing:-.03em}
/* ---------- fee breakdown ---------- */
.fees{list-style:none;font-size:14px}
.fees li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line)}
.fees li:last-child{border:none;padding-bottom:0}
.fees li .k{color:var(--muted)}
.fees li .v{font-family:var(--f-m);font-size:13.5px;white-space:nowrap}
.fees li.tot{margin-top:8px;padding-top:15px;border-top:1.5px solid var(--basalt);border-bottom:none}
.fees li.tot .k{color:var(--ink);font-weight:600;font-family:var(--f-b);font-size:15px}
.fees li.tot .v{font-family:var(--f-d);font-size:20px;font-weight:700;letter-spacing:-.02em}
/* ---------- footer ---------- */
footer{padding:60px 0 40px;border-top:1px solid var(--line);margin-top:40px}
/* Cible tactile de 44px de hauteur sur les liens de pied de page (etaient a
15-17px). La largeur reste dictee par le texte, l'ecart lateral evite deux
cibles collees. Le pied de page grandit en consequence : c'est voulu. */
footer a,footer .lien-bouton{display:inline-flex;align-items:center;min-height:44px;margin-right:12px}
.f-note{margin-top:10px;font-size:13.5px;color:var(--muted);max-width:44ch;line-height:1.55}
.dis{margin-top:26px;padding:16px 18px;border-radius:14px;background:rgba(181,129,26,.09);box-shadow:inset 0 0 0 1px rgba(181,129,26,.22);font-family:var(--f-m);font-size:11px;color:var(--cane-d);line-height:1.65}
/* ---------- pages légales ---------- */
.legal-body{padding-bottom:60px}
.legal-body h3{font-size:17px;margin-top:34px;margin-bottom:10px}
.legal-body h3:first-child{margin-top:0}
.legal-body p{font-size:14.5px;line-height:1.65;color:var(--ink)}
.legal-body p+p{margin-top:10px}
/* ---------- bannière cookies ---------- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);color:#fff;padding:12px 0;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
/* La banniere est en position:fixed sans compensation : elle recouvrait le
bas du viewport quoi qu'il arrive. Devenu visible au lot 3 (cibles a 44px :
la banniere a grandi de 24px et les filtres sont descendus d'autant, les
15px de marge sont devenus 34px de recouvrement). On reserve sa hauteur
tant qu'elle est affichee — le gabarit ne la rend pas une fois le
consentement pose (templates/_cookie_banner.html), le padding disparait
donc avec elle. :has() est deja utilise ailleurs dans cette feuille. */
body:has(.cookie-banner){padding-bottom:104px}
@media (max-width:640px){body:has(.cookie-banner){padding-bottom:176px}}
.cookie-banner .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cookie-banner p{flex:1;min-width:220px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.85);margin:0}
.cookie-banner p a,.cookie-banner p .lien-bouton{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:underline;vertical-align:middle}
.cookie-banner-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-banner .btn-g{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.4)}
@media (hover:hover) and (pointer:fine){.cookie-banner .btn-g:hover{box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.7)}}
@media (max-width:640px){.cookie-banner .wrap{flex-direction:column;align-items:stretch}.cookie-banner-actions{justify-content:flex-end}}
/* ---------- responsive ---------- */
@media (max-width:1080px){
.hero-grid{grid-template-columns:1fr;gap:30px}
.hero-photo{order:-1;aspect-ratio:16/9}
.d-body{grid-template-columns:1fr;gap:26px}
.side{position:static}
nav.main{display:none}
}
@media (max-width:900px){
.grid{gap:12px}
}
@media (max-width:700px){
.grid{grid-template-columns:1fr 1fr;gap:14px}
}
@media (max-width:520px){
.grid{grid-template-columns:1fr;gap:16px}
}
@media (max-width:760px){
.wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
section{padding:56px 0}
.sfields{grid-template-columns:1fr}
.sf-go{padding:8px 6px 6px}
.sf-go .btn{width:100%;height:46px}
.sfields-adv .sf{flex:1 1 100%}
.sfields-adv .sf-go{padding:8px 6px 6px}
.sfields-adv .sf-go .btn{width:100%;height:46px}
/* Uniquement dans l'en-tete : la copie du tiroir doit rester visible.
Cette regle valait pour TOUT .lang, si bien qu'un visiteur sur telephone
n'avait aucun moyen de changer de langue ni de devise sur le site public. */
.hd-r .lang{display:none}
}
/* ---------- en-tête mobile : menu à gauche, logo à droite ----------
Demande du porteur (12/08/2026). Sous 1080px, `nav.main` était masqué et
rien ne le remplaçait : le site n'avait aucune navigation sur téléphone,
seulement deux boutons d'espace. Tout passe désormais par le tiroir. */
.hd-menu{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0 9px;border:1.4px solid var(--contour);border-radius:999px;background:none;cursor:pointer;flex:none}
/* Largeur explicite : le align-items:center pose sur .hd-menu au lot 3 (pour
centrer les barres dans le bouton passe a 44x44) supprime l'etirement par
defaut, et sans largeur propre les barres retombaient a zero — bouton vide. */
.hd-menu span{display:block;width:100%;height:2px;border-radius:2px;background:var(--ink)}
.nk-voile{position:fixed;inset:0;z-index:90;background:rgba(13,19,17,.5);backdrop-filter:blur(2px)}
.nk-voile[hidden]{display:none}
.nk-tiroir{position:fixed;top:0;left:0;bottom:0;z-index:95;width:min(310px,86vw);padding:22px 20px;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));background:var(--card);box-shadow:var(--sh-l);display:flex;flex-direction:column;gap:22px;overflow-y:auto}
.nk-tiroir[hidden]{display:none}
.nk-tiroir-fermer{position:absolute;top:10px;right:12px;width:36px;height:36px;border:none;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.nk-tiroir-nav{display:flex;flex-direction:column;margin-top:26px}
.nk-tiroir-nav a{padding:13px 10px;border-radius:var(--r-s);font-size:16px;font-weight:600}
@media (hover:hover) and (pointer:fine){.nk-tiroir-nav a:hover{background:var(--card-2)}}
.nk-tiroir-compte{display:flex;flex-direction:column;gap:9px;padding-top:20px;border-top:1px solid var(--line)}
.nk-tiroir-reglages{display:flex;gap:10px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line)}
@media (max-width:1080px){
.hd-menu{display:flex}
/* Le logo passe à droite : marge automatique plutôt qu'un `order`, pour que
l'ordre du DOM (donc la tabulation et les lecteurs d'écran) reste celui de
la lecture — menu, puis logo. */
.hd .logo{margin-left:auto}
.hd-r{display:none}
}
/* ---------- flèche retour (templates/_retour.html) ----------
Posée en haut du contenu, jamais dans l'en-tête : sur mobile l'en-tête est
déjà occupé par le menu et le logo, et une flèche qui change de place selon
la page est pire que pas de flèche. */
.nk-retour{display:inline-flex;align-items:center;min-height:44px;gap:6px;margin-bottom:14px;padding:0 14px 0 10px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted);box-shadow:inset 0 0 0 1.4px var(--contour);background:var(--card)}
@media (hover:hover) and (pointer:fine){.nk-retour:hover{color:var(--ink);box-shadow:inset 0 0 0 1.4px var(--basalt)}}
.nk-retour svg{width:15px;height:15px;flex:none}
/* ---------- typographie mobile (lot 5a) ----------
Aucun texte porteur d'information sous 12px sur telephone. Ne s'applique
QUE sous 640px : la micro-typographie en capitales espacees fait partie de
l'identite du site et le bureau ne change pas.
Palier 1 : les corps a 9 et 9,5px, les plus illisibles. */
@media (max-width:640px){
/* Palier 1 : les corps a 9 et 9,5px. */
.trust .l,
.sf label,
.tag,
.tier-flag,
.pack-flag,
.spec .l,
.sc-badge .b,
.sc-kpi .l,
.fld>label,
.modal-crit b,
.seller-k,
/* Palier 2 : les corps de 10 a 11,5px. Meme traitement que le palier 1,
sans distinguer libelle decoratif et informatif — l'ecart 11 -> 12px est
d'un pixel, une exception a documenter couterait plus cher. */
.eyebrow,
.hd-badge,
.lang a,.lang button,
.eab-lang button,
.chip-filtre .x,
.card-img,
.card-loc,
.strip,
.eab-table th,
.pager-info,
.tier .dl,
.pack .dl,
.ref,
.price-card .sqm,
.who-t span,
.sc-n,
.sc-kpi .v i,
.map-note,
.social-sep,
.badge,
.dis{font-size:12px}
}
/* ==========================================================================
Feuilles fusionnees ici le 02/09/2026 — actualites.css, guides_moyeu.css et
sidebar_ressources.css.
Pourquoi : le lot F3 avait ramene /fr/guides/ a UNE seule feuille bloquante
(noukaz.css) plus 1 216 caracteres de @font-face inlines, en auto-hebergeant
les polices et en supprimant fonts.googleapis.com. PageSpeed mobile est passe
de 83 a 92, et le gain venait entierement de la suppression de requetes
bloquantes. Le moyeu des guides, en reprenant la coquille de /news/, rajoutait
trois : la page repassait de 1 a 4 feuilles, ce qui defaisait le lot F3
sur la page meme qu'il avait servi a mesurer.
Le partage des regles entre /guides/ et /news/ etait volontaire et le reste :
c'est le NOMBRE DE REQUETES qui posait probleme, pas le partage. Fusionnees
ici, ces regles voyagent dans un fichier deja charge et deja en cache sur
toutes les pages du site, pour zero requete supplementaire. Aucun selecteur
n'entrait en collision avec ce qui precede (verifie avant fusion) et l'ordre
d'origine est conserve : actualites, puis le moyeu, puis la barre laterale.
Gain de bord : /news/ passe de 3 feuilles a 1, et chaque page de guide de 2 a 1.
========================================================================== */
/* ---------- actualites.css — coquille de /news/, partagee avec le moyeu des guides ---------- */
/* Page Actualités — voir noukaz-actualites-pack-claude-code/
prompt-claude-code-noukaz.md pour le brief d'origine.
Feuille dédiée (même principe que kyc.css) : classes scoped sous
.actu-* pour ne rien casser des styles globaux (.card, .hero... déjà
utilisés ailleurs avec un tout autre gabarit, ex. la grille de biens).
Réutilise les tokens de noukaz.css (var(--lagoon), var(--r-l)...)
plutôt que d'en redéfinir — pas de deuxième identité graphique.
La sidebar (newsletter/ebook/biens) est dans sidebar_ressources.css,
partagée avec les pages guides — charger les deux feuilles ensemble. */
.actu-hero { padding: 8px 0 4px; }
.actu-intro { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; justify-content: space-between; }
.actu-title-block { max-width: 640px; }
.actu-title-block h1 { margin: 8px 0 0; font-family: var(--f-d); font-size: clamp(34px, 5vw, 52px); line-height: 1; letter-spacing: -.03em; }
.actu-title-block p { margin-top: 14px; color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 520px; }
.actu-search { width: min(420px, 100%); }
.actu-search-box { position: relative; }
.actu-search-box input { width: 100%; height: 50px; padding: 0 108px 0 42px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14px; box-shadow: var(--sh-s); }
.actu-search-box input:focus { border-color: var(--lagoon); box-shadow: 0 0 0 4px var(--lagoon-soft); }
.actu-search-icon { position: absolute; left: 16px; top: 14px; color: var(--lagoon); pointer-events: none; }
.actu-search-box button { position: absolute; right: 5px; top: 5px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.actu-filters { display: flex; gap: 8px; padding-top: 22px; overflow-x: auto; scrollbar-width: none; }
.actu-filters::-webkit-scrollbar { display: none; }
.actu-filter { flex: 0 0 auto; min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.actu-filter.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.actu-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; padding: 24px 0 60px; }
.actu-featured { display: grid; grid-template-columns: 51% 49%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-m); text-decoration: none; color: inherit; min-height: 300px; }
.actu-featured-media { min-height: 300px; overflow: hidden; background: var(--card-2); }
.actu-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actu-featured-content { padding: 30px 32px; display: flex; flex-direction: column; align-items: flex-start; }
.actu-featured-content h2 { margin: 14px 0 10px; font-family: var(--f-d); font-size: 27px; line-height: 1.15; letter-spacing: -.02em; }
.actu-featured-content p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.actu-meta { margin-top: auto; padding-top: 18px; color: var(--muted-2); font-family: var(--f-m); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.actu-read-link { margin-top: 14px; color: var(--lagoon); font-size: 14px; font-weight: 800; }
.actu-read-link span { display: inline-block; transition: transform .15s ease; }
@media (hover:hover) and (pointer:fine){.actu-featured:hover .actu-read-link span{ transform: translateX(4px); }}
.actu-section-head { margin: 32px 0 14px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.actu-section-head h2 { margin: 0; font-family: var(--f-d); font-size: 24px; letter-spacing: -.02em; }
.actu-section-head p { margin: 0; color: var(--muted); font-size: 13px; }
.actu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.actu-card { display: grid; grid-template-columns: 136px minmax(0, 1fr); min-height: 140px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); box-shadow: var(--sh-s); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
@media (hover:hover) and (pointer:fine){.actu-card:hover{ transform: translateY(-2px); box-shadow: var(--sh-m); }}
.actu-card img { width: 100%; height: 100%; min-height: 140px; object-fit: cover; display: block; }
.actu-card-body { min-width: 0; padding: 14px 15px 12px; display: flex; flex-direction: column; align-items: flex-start; }
.actu-card-body .actu-tag { min-height: 20px; padding: 0 8px; font-size: 9px; }
.actu-card h3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin: 8px 0 6px; font-family: var(--f-d); font-weight: 600; font-size: 15px; line-height: 1.28; letter-spacing: -.01em; }
.actu-card .actu-meta { padding-top: 0; margin-top: auto; font-size: 9px; }
.actu-empty { padding: 44px 20px; border: 1px dashed var(--line); border-radius: var(--r-m); text-align: center; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
.actu-card, .actu-card:hover, .actu-read-link span, .actu-featured:hover .actu-read-link span {
transition: none;
transform: none;
}
}
@media (max-width: 1080px) {
.actu-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; }
.actu-featured { grid-template-columns: 48% 52%; }
.actu-featured-content { padding: 26px; }
.actu-featured-content h2 { font-size: 24px; }
}
@media (max-width: 860px) {
.actu-intro { align-items: flex-start; }
.actu-layout { grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
.actu-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.actu-title-block h1 { font-size: 40px; }
.actu-search { width: 100%; }
.actu-search-box input { height: 48px; }
.actu-featured { grid-template-columns: 1fr; min-height: 0; }
.actu-featured-media { min-height: 0; aspect-ratio: 16 / 10; }
.actu-featured-content { padding: 22px; }
.actu-featured-content h2 { font-size: 24px; }
.actu-section-head p { display: none; }
.actu-card { grid-template-columns: 116px 1fr; min-height: 128px; }
.actu-card img { min-height: 128px; }
.actu-card-body { padding: 12px; }
}
/* ---------- guides_moyeu.css — ce qui differe sur le moyeu des guides : carte a image en bandeau ---------- */
/* Moyeu /guides/ — reprend le systeme visuel de /news/ (02/09/2026).
*
* Le gabarit charge `actualites.css` AVANT ce fichier : la coquille est
* partagee telle quelle (.actu-hero, .actu-intro, .actu-title-block,
* .actu-layout, .actu-section-head, .actu-grid, .actu-tag, .actu-meta), pour
* que les deux pages restent d'accord sans avoir a maintenir deux copies des
* memes regles. Ce fichier ne porte QUE ce qui differe.
*
* Ce qui differe, c'est la carte. Celle de /news/ pose l'image dans une
* colonne de 136 px de large sur 140 de haut, presque carree ; les
* couvertures de guides sont des illustrations panoramiques en 1600x700
* (2,29:1). En recadrage `cover` il n'en restait qu'une bande centrale, la
* maison principale hors champ. D'ou l'image en bandeau au-dessus du texte,
* qui respecte le format d'origine — arbitrage du porteur, 02/09/2026.
*/
.gm-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--card);
box-shadow: var(--sh-s);
text-decoration: none;
color: inherit;
transition: transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) and (pointer: fine) {
.gm-card:hover { transform: translateY(-2px); box-shadow: var(--sh-m); }
}
.gm-card-media {
aspect-ratio: 1600 / 700; /* le format natif des couvertures */
background: var(--card-2);
overflow: hidden;
}
.gm-card-media img {
width: 100%;
height: 100%;
object-fit: cover; /* sans effet au format natif, filet de securite
si une future couverture s'en ecarte */
display: block;
}
.gm-card-body {
min-width: 0;
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.gm-card h3 {
margin: 0;
font-family: var(--f-d);
font-weight: 600;
font-size: 17px;
line-height: 1.24;
letter-spacing: -.012em;
}
.gm-card p {
margin: 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.5;
/* Les descriptions du moyeu vont de 90 a 210 caracteres : sans plafond, les
cartes d'une meme rangee n'ont plus la meme hauteur. */
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.gm-card-read {
margin-top: auto;
padding-top: 4px;
color: var(--lagoon);
font-size: 13.5px;
font-weight: 800;
}
.gm-card-read span { display: inline-block; transition: transform .15s ease; }
@media (hover: hover) and (pointer: fine) {
.gm-card:hover .gm-card-read span { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
.gm-card,
.gm-card:hover,
.gm-card-read span,
.gm-card:hover .gm-card-read span { transition: none; transform: none; }
}
/* La grille de /news/ passe a une colonne sous 860 px ; les cartes en bandeau
supportent trois colonnes au-dessus de 1180 px, ou elles seraient sinon
inutilement larges pour une illustration de 2,29:1. */
@media (min-width: 1180px) {
.gm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.gm-card-body { padding: 14px 15px 16px; }
.gm-card h3 { font-size: 16px; }
}
/* ---------- sidebar_ressources.css — barre laterale ressources (ebook, newsletter, annonces) ---------- */
/* Sidebar « ressources » (newsletter, ebook, biens les mieux notés) —
voir templates/_sidebar_ressources.html. Partagée entre la page
Actualités et les pages guides (annonces les mieux notées, jamais
codées en dur — voir annonces/services.py::biens_les_mieux_notes).
Réutilise les tokens de noukaz.css, pas de deuxième identité graphique. */
.actu-tag { display: inline-flex; min-height: 25px; padding: 0 10px; align-items: center; border-radius: 999px; background: var(--lagoon-soft); color: var(--lagoon-d); font-family: var(--f-m); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.actu-sidebar { position: sticky; top: 100px; display: grid; gap: 16px; }
.actu-side-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-s); }
.actu-newsletter { position: relative; padding: 26px; border-color: transparent; color: #fff; background: radial-gradient(circle at 95% 0%, rgba(213, 174, 85, .28), transparent 30%), var(--lagoon-d); }
.actu-newsletter .actu-tag { background: rgba(255, 255, 255, .16); color: #dff3ee; }
.actu-newsletter h2 { margin: 14px 0 0; max-width: 230px; font-family: var(--f-d); font-size: 23px; line-height: 1.1; letter-spacing: -.02em; }
.actu-newsletter p { margin: 12px 0 18px; color: #d2e3de; font-size: 13px; line-height: 1.5; }
.actu-newsletter-form { display: grid; gap: 9px; }
.actu-newsletter input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 11px; color: #fff; background: rgba(255, 255, 255, .12); font-size: 14px; }
.actu-newsletter input::placeholder { color: #c5d7d2; }
.actu-newsletter input:focus { border-color: var(--cane); }
.actu-newsletter-btn { width: 100%; min-height: 42px; border: 0; border-radius: 11px; background: var(--cane); color: #1b1608; font-weight: 800; cursor: pointer; font-size: 14px; }
.actu-newsletter-btn:disabled { opacity: .65; cursor: default; }
.actu-privacy { display: block; margin-top: 10px; color: #a9c6be; font-size: 10px; line-height: 1.4; }
.actu-form-msg { display: none; margin: 10px 0 0; font-weight: 700; font-size: 12.5px; }
.actu-form-msg.is-visible { display: block; }
.actu-form-msg.is-ok { color: var(--cane); }
.actu-form-msg.is-err { color: #ffcdbe; }
.actu-ebook { padding: 20px; display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; }
.actu-ebook-cover { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--sh-s); display: block; }
.actu-ebook h2 { margin: 0; font-family: var(--f-d); font-size: 18px; line-height: 1.18; letter-spacing: -.015em; }
.actu-ebook p { margin: 7px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.actu-ebook-btn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; }
.actu-listings { padding: 20px; }
.actu-listing-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; gap: 10px; }
.actu-listing-head h2 { margin: 0; font-family: var(--f-d); font-size: 17px; letter-spacing: -.01em; }
.actu-listing-head a { color: var(--lagoon); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.actu-listing { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.actu-listing + .actu-listing { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.actu-listing img { width: 78px; height: 62px; object-fit: cover; border-radius: 10px; display: block; }
.actu-listing-photo-vide { width: 78px; height: 62px; border-radius: 10px; background: var(--card-2); display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: 9px; text-align: center; }
.actu-listing small { display: block; margin-bottom: 4px; color: var(--muted-2); font-family: var(--f-m); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.actu-listing strong { display: block; font-size: 13px; line-height: 1.25; font-weight: 600; }
.actu-listing .actu-price { margin-top: 4px; color: var(--lagoon); font-size: 12px; font-weight: 800; }
@media (max-width: 860px) {
.actu-sidebar { position: static; grid-template-columns: 1fr 1fr; align-items: stretch; }
.actu-sidebar .actu-newsletter { grid-column: span 2; }
}
@media (max-width: 640px) {
.actu-sidebar { grid-template-columns: 1fr; }
.actu-sidebar .actu-newsletter { grid-column: auto; }
}
/* Mise en page à deux colonnes (contenu + sidebar) pour les pages guides —
la page Actualités a sa propre grille (.actu-layout, actualites.css),
pensée pour sa grille de cartes plutôt que pour du texte long. */
.res-layout { display: grid; grid-template-columns: minmax(0, 760px) 320px; gap: 32px; align-items: start; }
@media (max-width: 1180px) {
.res-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
}
@media (max-width: 860px) {
/* minmax(0, 1fr), pas 1fr seul : un enfant de grille a min-width:auto
par défaut (piège classique) — sans le 0 explicite, un contenu large
(tableau, mot long) pousse la colonne hors du viewport plutôt que de
s'y adapter, d'où un scroll horizontal sur mobile. */
.res-layout { grid-template-columns: minmax(0, 1fr); }
}
/* ------------------------------------------------------------------ */
/* Invitation a installer Noukaz — site public, mobile (29/09/2026). */
/* ------------------------------------------------------------------ */
/* UN PANNEAU MONTANT, PAS UN INTERSTITIEL. Il occupe le bas de l'ecran, ne
couvre pas la page, n'assombrit rien et ne verrouille pas le defilement :
Google penalise au classement les interstitiels qui masquent le contenu sur
mobile, et le trafic de ce site vient de la recherche. C'est la contrainte
qui dicte toute cette regle — comparer avec `.push-invit` du portail, qui
est une vraie modale parce qu'elle s'affiche dans une application deja
installee, hors de portee de Google. */
.pwa-invite{position:fixed;left:0;right:0;bottom:0;z-index:180;padding:10px;
padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
animation:pwaMonte .26s ease both;pointer-events:none}
.pwa-invite[hidden]{display:none}
.pwa-invite-carte{pointer-events:auto;position:relative;display:flex;gap:12px;
align-items:flex-start;max-width:520px;margin:0 auto;background:var(--card);
border:1px solid var(--line);border-radius:var(--r-l);padding:14px 40px 14px 14px;
box-shadow:var(--sh-l)}
.pwa-invite-icone{flex:0 0 44px;border-radius:10px}
.pwa-invite-texte{min-width:0}
.pwa-invite-texte h2{font-family:var(--f-d);font-size:16px;letter-spacing:-.01em;margin:0}
.pwa-invite-texte p{color:var(--muted);font-size:13px;line-height:1.5;margin-top:4px}
.pwa-invite-actions{margin-top:10px}
.pwa-invite-actions[hidden]{display:none}
/* Le guide iOS dans le panneau : plus serre que sur la page Notifications, ou
il a une page entiere pour lui. Memes classes, donc meme guide. */
.pwa-invite-guide{margin-top:10px}
.pwa-invite-guide[hidden]{display:none}
.pwa-invite-guide .push-guide-etapes{margin-top:6px}
.pwa-invite-guide .push-guide-etapes li{padding:8px 0;font-size:12.5px}
.pwa-invite-guide .push-guide-ico{flex:0 0 28px;height:28px;border-radius:7px}
.pwa-invite-guide .push-guide-ico svg{width:16px;height:16px}
/* La croix : 44px de cible tactile, la taille minimale qu'un doigt atteint. */
.pwa-invite-fermer{position:absolute;top:4px;right:4px;width:44px;height:44px;
display:flex;align-items:center;justify-content:center;font-size:22px;
line-height:1;color:var(--muted);background:none;border:none;cursor:pointer}
@media (hover:hover) and (pointer:fine){.pwa-invite-fermer:hover{color:var(--ink)}}
@keyframes pwaMonte{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
/* Une animation qui monte du bas est exactement ce que `prefers-reduced-motion`
vise : le panneau apparait, sans glisser. */
@media (prefers-reduced-motion:reduce){.pwa-invite{animation:none}}
/* Le guide d'installation iOS, PARTAGE par la page Notifications (portail) et
l'invitation ci-dessus (site public). Deplace depuis `espace_vendeur.css`
le 29/09/2026 : cette feuille-ci est la seule que les deux chargent. */
.push-guide{margin-top:12px}
.push-guide[hidden],.push-guide-etapes[hidden],.push-etat[hidden],.push-bandeau[hidden]{display:none}
.push-guide-intro{font-size:13.5px;line-height:1.55;color:var(--ink)}
.push-guide-etapes{list-style:none;margin:14px 0 0;padding:0;counter-reset:etape}
.push-guide-etapes li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;counter-increment:etape}
.push-guide-etapes li::before{content:counter(etape);flex:0 0 22px;height:22px;border-radius:999px;background:var(--lagoon);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}
.push-guide-ico{flex:0 0 36px;height:36px;border-radius:9px;background:var(--lagoon-soft);color:var(--lagoon);display:flex;align-items:center;justify-content:center}
.push-guide-ico svg{width:20px;height:20px}
/* ---------- partage d'une fiche (02/10/2026) ----------
Posé sous le h1, qui porte le prix (titre_seo.py). `.side`, qui porte la carte
de prix, passe sous toute la colonne principale en dessous de 1080 px — à
1508 px du haut sur un écran de 390 px, donc hors de question.
Mesuré, et NON tenu : le bloc est à 808 px sur un écran de 390x660, parce que
la galerie en occupe 389. Voir le commentaire de detail.html.
`flex-wrap` et pas de largeur fixe : à 390 px les quatre canaux passent sur
deux lignes plutôt que de déborder. Aucun logo de plateforme — des libellés,
donc rien à télécharger et rien à mettre à jour quand une marque change. */
.partage{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:16px}
.partage-libelle{font-family:var(--f-m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.partage-liens{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.partage-lien{font-family:var(--f-b);font-size:13px;font-weight:500;color:var(--lagoon-d);background:none;border:0;padding:5px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;text-decoration:none;display:inline-block}
@media (hover:hover) and (pointer:fine){.partage-lien:hover{box-shadow:inset 0 0 0 1px var(--lagoon-d);background:var(--lagoon-soft)}}
/* Pastilles rondes (03/10/2026) : WhatsApp, Facebook, e-mail. 34 px — au-dessus
du seuil tactile de 32 px utilise ailleurs dans cette feuille, et assez petit
pour que les trois tiennent sur une ligne a 390 px avec le bouton texte. */
.partage-icone{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;color:var(--lagoon-d);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none}
.partage-icone svg{width:17px;height:17px;display:block}
@media (hover:hover) and (pointer:fine){.partage-icone:hover{box-shadow:inset 0 0 0 1px var(--lagoon-d);background:var(--lagoon-soft)}}
.partage-natif .partage-ic{width:14px;height:14px;margin-right:5px;vertical-align:-2px}
.partage-confirme{font-family:var(--f-m);font-size:12px;color:var(--lagoon-d)}
/* Hors écran, PAS `display:none` : un champ non rendu ne se sélectionne pas, et
`execCommand("copy")` a besoin d'une sélection réelle (voir partage.js). */
.partage-repli{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* ---------- bandeau d'abonnement du portail (paiements/_bandeau_abonnement.html) ----------
`.warn` est en `display:flex` avec une gouttière, pensé pour une icône plus
une ligne de texte. Ce bandeau porte plusieurs blocs et une liste : en
colonne, sinon tout se range côte à côte. */
.warn-abo{flex-direction:column;gap:0}
.warn-abo p{margin:0}
.warn-abo ul{margin:0}
/* La coupure est en cours : le rouge dit que ce n'est plus un avertissement. */
.warn-abo.warn-coupe{background:var(--danger-soft);color:var(--danger)}
/* ---------- page agence (refonte du 31/10/2026) ----------
Maquette validée par José : docs/maquettes/page-agence/. Gabarit :
agences/templates/agences/detail.html. Tout est préfixé `pa-`.
Le HTML suit l'ordre de lecture mobile (identité, indicateurs et contact,
annonces, honoraires, équipe, zones, à propos) ; ce sont les largeurs qui
déplacent les blocs, jamais une copie du texte :
- moins de 640 px : une colonne, le contact réduit à ses tuiles, « à
propos » en carte en bas de page, barre « Écrire à l'agence » fixée ;
- de 640 à 1 023 px : une colonne, « à propos » remonte dans la carte
d'identité, le contact passe avant les annonces, vignettes par deux ;
- 1 024 px et plus : contenu limité à 1 240 px, annonces à gauche, colonne
de 300 px à droite (contact, honoraires, équipe, zones).
Les espacements verticaux sont des marges, pas des `row-gap` : une zone de
grille vide (une agence sans équipe) ne doit pas laisser de trou. */
.pa{max-width:1288px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,1fr);font-size:15px;line-height:1.5}
.pa section{padding:0}
.pa h1,.pa h2{font-family:var(--f-d);font-weight:700;margin:0}
.pa h1{font-size:23px;line-height:1.1;letter-spacing:-.015em}
.pa h2{font-size:17px;line-height:1.3;letter-spacing:-.01em}
.pa-fil{display:flex;flex-wrap:wrap;gap:6px;padding:16px 0 12px;font-size:13px;color:var(--muted)}
.pa-fil a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.pa-fil [aria-current]{color:var(--basalt-2)}
/* Identité */
.pa .pa-identite{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;align-items:center}
.pa-id-texte{display:contents}
.pa-logo{grid-row:1/3;width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--line);object-fit:contain}
.pa-monogramme{display:inline-flex;align-items:center;justify-content:center;background:var(--lagoon);border-color:var(--lagoon);color:#fff;font-family:var(--f-d);font-size:19px;font-weight:700;letter-spacing:.01em}
.pa-identite h1{grid-column:2;align-self:end}
.pa-id-ligne{grid-column:2;align-self:start;margin:2px 0 0;font-size:13px;color:var(--muted)}
.pa-large{display:none}
.pa-badges{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:10px}
.pa-badge-verif{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:var(--lagoon-soft);color:var(--lagoon-d);font-size:12.5px;font-weight:600}
.pa-badge-texte{font-size:13px;color:var(--muted)}
.pa-badge-texte b{color:var(--basalt-2);font-weight:600}
.pa-note{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:var(--cane-soft);color:var(--cane-d);font-size:12.5px;font-weight:600}
.pa-note-etoile{fill:var(--cane)}
.pa-note-detail{display:contents}
.pa-note-etoiles{display:none}
.pa-note-etoiles .pleine{fill:var(--cane)}
.pa-note-etoiles .vide{fill:var(--line)}
/* Blocs */
.pa .pa-bloc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pa-bloc-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pa-info{flex:none;width:32px;height:32px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center}
.pa-methode{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.pa-methode:not(.pa-ouvert){display:none}
.pa-tuiles{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pa-tuiles-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.pa-tuile{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px;padding:10px;border-radius:12px;background:var(--card-2)}
.pa-tuile dt{font-size:12px;line-height:1.3;color:var(--muted)}
.pa-tuile dd{margin:0;font-family:var(--f-d);font-size:22px;line-height:1.15;font-weight:700;white-space:nowrap}
.pa-ecrire{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;background:var(--lagoon);color:#fff;font-size:15px;font-weight:600}
.pa-contact-note{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
/* Mobile : le bloc contact se réduit à ses tuiles, en bandeau sous l'identité ;
le bouton passe dans la barre du bas. */
.pa .pa-contact{background:none;border:0;padding:0;margin-top:14px}
.pa-contact .pa-bloc-tete,.pa-contact .pa-ecrire,.pa-contact .pa-contact-note,.pa-contact .pa-methode{display:none}
.pa-contact .pa-tuile{background:var(--card);border:1px solid var(--line);padding:8px 10px;gap:1px}
.pa-contact .pa-tuile dt{font-size:11.5px}
.pa-contact .pa-tuile dd{font-size:18px;line-height:1.2}
.pa .pa-contact-sans-tuiles{display:none}
/* Annonces */
.pa-annonces{display:flex;flex-direction:column;gap:12px;margin-top:14px;min-width:0}
.pa-annonces-tete{display:flex;flex-direction:column;gap:12px}
.pa-annonces-tete h2{font-size:20px}
.pa-segments{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.pa-segments a{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--basalt-2);white-space:nowrap}
.pa-segments a[aria-current]{background:var(--basalt);color:#fff}
.pa-filtres{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px}
.pa-filtres::-webkit-scrollbar{display:none}
.pa-filtres a{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--basalt-2);font-size:13px;font-weight:600;white-space:nowrap}
.pa-filtres a[aria-current]{border-color:var(--lagoon);background:var(--lagoon-soft);color:var(--lagoon-d)}
.pa-grille{display:flex;flex-direction:column;gap:10px}
.pa-vignette{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;color:var(--ink);min-width:0}
.pa-v-photo{grid-row:1/3;width:104px;height:84px;border-radius:10px;overflow:hidden;background:var(--lagoon-soft);color:var(--lagoon-d);display:flex;align-items:center;justify-content:center}
.pa-v-photo img{width:100%;height:100%;object-fit:cover}
.pa-v-sans-photo{font-family:var(--f-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:0 6px}
.pa-v-texte{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.pa-v-prix{font-family:var(--f-d);font-size:17px;line-height:1.25;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.pa-v-prix small{font-family:var(--f-b);font-size:13px;font-weight:500;color:var(--muted)}
.pa-v-lieu{font-size:14px;font-weight:600;color:var(--basalt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-v-carac{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-v-badge{grid-column:2;grid-row:2;justify-self:start;margin-top:4px;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--lagoon-soft);color:var(--lagoon-d);font-size:11.5px;font-weight:600}
.pa-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding-top:8px}
.pa-pager a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--basalt-2);font-size:14px;font-weight:600}
/* Honoraires */
.pa-lignes{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pa-lignes div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1px;padding:10px 12px;border-radius:12px;background:var(--card-2)}
.pa-lignes dt{font-size:12px;line-height:1.3;color:var(--muted)}
.pa-lignes dd{margin:0;font-family:var(--f-d);font-size:20px;line-height:1.15;font-weight:700;white-space:nowrap}
.pa-remise{margin:0;display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:var(--cane-soft);color:var(--cane-d);font-size:13px;line-height:1.4}
.pa-remise svg{flex:none;margin-top:1px}
/* Équipe */
.pa-membres{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pa-membres.pa-repliable:not(.pa-ouvert){display:none}
.pa-membre{display:flex;align-items:flex-start;gap:12px}
.pa-membre-photo{flex:none;width:44px;height:44px;border-radius:999px;object-fit:cover}
.pa-membre-initiales{display:inline-flex;align-items:center;justify-content:center;background:var(--lagoon-soft);color:var(--lagoon-d);font-family:var(--f-d);font-size:16px;font-weight:700}
.pa-membre-texte{min-width:0;display:flex;flex-direction:column;gap:1px}
.pa-membre-nom{font-size:15px;font-weight:600;color:var(--ink)}
.pa-membre-role{font-size:13px;color:var(--muted)}
.pa-membre-desc{margin-top:4px;font-size:13px;color:var(--basalt-2)}
.pa-plus{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--lagoon);font-size:13px;font-weight:600}
.pa-plus[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Zones */
.pa-pastilles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pa-pastilles li{display:inline-flex;align-items:center;min-height:36px;padding:0 11px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-2);font-size:13px;color:var(--basalt-2)}
.pa-pastilles a{color:inherit}
.pa-pastilles:not(.pa-ouvert) .pa-au-dela,.pa-pastilles:not(.pa-ouvert) .pa-au-dela-mobile{display:none}
.pa-types{display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid var(--line-2)}
.pa-etiquette{font-family:var(--f-m);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pa-types span:last-child{font-size:14px;color:var(--basalt-2)}
/* À propos — une carte en bas de page sur mobile */
.pa .pa-apropos{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:12px}
.pa-apropos-texte{margin:0;font-size:14px;color:var(--basalt-2);max-width:720px}
.pa-apropos-texte.pa-repliable:not(.pa-ouvert){display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pa-lire{min-height:44px;padding:0;color:var(--lagoon);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* Barre mobile : sous 640 px seulement. Sous le bandeau cookies (z-index 60)
et l'invitation PWA (180) : elle ne les cache jamais. La page réserve sa
hauteur en bas, pour que rien ne reste dessous. */
.pa-barre{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(13,19,17,.06)}
.pa-barre .pa-ecrire{width:100%}
body:has(.pa-barre){padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body:has(.pa-barre):has(.cookie-banner){padding-bottom:176px}
@media (hover:hover) and (pointer:fine){
.pa-ecrire:hover{background:var(--lagoon-d);color:#fff}
.pa-vignette:hover{border-color:var(--contour)}
.pa-filtres a:hover,.pa-pager a:hover,.pa-plus:hover,.pa-info:hover{border-color:var(--contour)}
.pa-segments a:not([aria-current]):hover{background:var(--card-2)}
.pa-fil a:hover,.pa-membre-nom:hover,.pa-pastilles a:hover{color:var(--lagoon-d)}
}
/* « Écrire à l'agence » (agences/contact.html) : une seule colonne étroite. */
.pa.pa-contact-page{display:block;max-width:688px}
.pa-formulaire h1{font-size:23px}
.pa-formulaire form{display:flex;flex-direction:column;gap:12px}
.pa-formulaire textarea{width:100%;min-height:150px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);font:inherit;font-size:16px}
.pa-formulaire .pa-ecrire,.pa-formulaire .btn{width:100%}
/* Tablette et ordinateur : la carte d'identité, « à propos » dedans. */
@media (min-width:640px){
.pa{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:64px}
.pa h1{font-size:30px}
.pa h2{font-size:18px}
.pa-fil{padding:18px 0 14px}
.pa-fil{order:0}.pa-identite{order:1}.pa-apropos{order:2}.pa-contact{order:3}.pa-annonces{order:4}.pa-honoraires{order:5}.pa-equipe{order:6}.pa-zones{order:7}
.pa .pa-identite{position:relative;display:flex;align-items:flex-start;gap:20px 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:24px 28px;box-shadow:var(--sh-s)}
.pa-id-texte{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}
.pa-avec-note .pa-id-texte{padding-right:230px}
.pa-logo{flex:none;width:72px;height:72px;border-radius:18px}
.pa-monogramme{font-size:26px}
.pa-id-ligne{margin:0;font-size:14px}
.pa-large{display:inline}
.pa-badges{margin-top:2px;gap:8px 16px}
.pa-badge-verif{height:28px;padding:0 12px;gap:6px;font-size:13px}
.pa-note{position:absolute;top:24px;right:28px;height:auto;gap:14px;padding:14px 18px;border-radius:16px;background:var(--card-2);border:1px solid var(--line-2);color:var(--ink);font-weight:400}
.pa-note-etoile{display:none}
.pa-note-valeur{font-family:var(--f-d);font-size:34px;line-height:1;font-weight:700;letter-spacing:-.02em}
.pa-note-detail{display:flex;flex-direction:column;gap:5px}
.pa-note-etoiles{display:block}
.pa-note-avis{font-size:13px;color:var(--muted)}
/* « À propos » continue la carte d'identité, aligné sur le texte. */
.pa-avec-apropos .pa-identite{border-bottom:0;border-radius:var(--r-l) var(--r-l) 0 0;padding-bottom:12px;box-shadow:none}
.pa .pa-apropos{margin-top:0;border-top:0;border-radius:0 0 var(--r-l) var(--r-l);padding:0 28px 24px 124px;gap:4px}
.pa-apropos h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pa-apropos-texte{font-size:15px;color:var(--basalt-2)}
.pa-lire{min-height:32px;font-size:13px}
.pa .pa-bloc{border-radius:var(--r-l);padding:20px;gap:12px;margin-top:16px}
/* Le bloc contact retrouve sa carte, son bouton et sa note. */
.pa .pa-contact,.pa .pa-contact-sans-tuiles{display:flex;background:var(--card);border:1px solid var(--line);padding:20px;gap:16px;margin-top:24px;box-shadow:var(--sh-m)}
.pa-contact .pa-bloc-tete,.pa-contact .pa-ecrire{display:flex}
.pa-contact .pa-contact-note,.pa-contact .pa-methode.pa-ouvert{display:block}
.pa-contact .pa-tuile{background:var(--card-2);border:0;padding:10px;gap:2px}
.pa-contact .pa-tuile dt{font-size:12px}
.pa-contact .pa-tuile dd{font-size:22px;line-height:1.15}
.pa-annonces{gap:14px;margin-top:24px}
.pa-annonces-tete{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
.pa-annonces-tete h2{font-size:22px;line-height:1.2}
.pa-segments{display:inline-flex}
.pa-segments a{flex:none;min-height:36px}
.pa-filtres{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
.pa-filtres a{height:34px}
.pa-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pa-vignette{display:flex;flex-direction:column;align-items:stretch;padding:0;border-radius:16px;overflow:hidden}
.pa-v-photo{width:auto;height:auto;aspect-ratio:3/2;border-radius:0}
.pa-v-texte{gap:2px;padding:12px 14px 14px}
.pa-v-prix{font-size:19px}
.pa-v-badge{position:absolute;top:10px;left:10px;margin:0;height:24px;padding:0 10px;background:#fff;color:var(--basalt-2);font-size:12px;box-shadow:0 1px 2px rgba(13,19,17,.10)}
.pa-pager a{min-height:42px}
.pa-lignes{display:flex;flex-direction:column;gap:0}
.pa-lignes div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-radius:0;background:none;border-bottom:1px solid var(--line-2)}
.pa-lignes div:last-child{border-bottom:0}
.pa-lignes dt{font-size:15px;color:var(--basalt-2)}
.pa-lignes dd{font-size:17px}
.pa-remise{gap:10px}
.pa-plus{min-height:36px}
.pa-mobile-seul{display:none}
.pa-pastilles li{min-height:30px}
.pa-pastilles:not(.pa-ouvert) .pa-au-dela-mobile{display:inline-flex}
.pa-types{padding-top:12px}
.pa-barre{display:none}
body:has(.pa-barre){padding-bottom:0}
}
/* Ordinateur : deux colonnes, la colonne de droite fait 300 px. La dernière
rangée (1fr) prend la hauteur des annonces qui dépasse la colonne : les
blocs de droite restent serrés en haut. */
@media (min-width:1024px){
.pa{grid-template-columns:minmax(0,1fr) 300px;column-gap:32px;
grid-template-areas:"fil fil" "identite identite" "apropos apropos" "annonces contact" "annonces honoraires" "annonces equipe" "annonces zones" "annonces .";
grid-template-rows:auto auto auto auto auto auto auto 1fr}
.pa-fil{grid-area:fil}.pa-identite{grid-area:identite}.pa-apropos{grid-area:apropos}
.pa-annonces{grid-area:annonces}.pa-contact{grid-area:contact}.pa-honoraires{grid-area:honoraires}
.pa-equipe{grid-area:equipe}.pa-zones{grid-area:zones}
.pa .pa-bloc{align-self:start}
.pa-grille{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
}