/* Polices de la marque Sedes : manuscrite pour le nom, serif élégante pour le
reste. Elles sont déclarées dans le de App.razor, et non par @import
ici : un @import ne part en téléchargement qu'une fois cette feuille reçue et
analysée, ce qui retarde d'autant l'affichage du texte. */
/* ==================================================================
Sedes — thèmes
Les pages utilisent uniquement ces variables : chaque thème les redéfinit.
================================================================== */
/* Thème par défaut « CasaMya » : or sur bleu nuit (couleurs du logo) */
/* « color-scheme » indique au navigateur sur quel fond il dessine ses propres
widgets : sélecteur de date, cases à cocher natives, ascenseurs. Sans lui,
le calendrier d'un et son icône restent dessinés en
clair, donc illisibles sur fond sombre — un cas qu'aucune règle de fond ou
de bordure ne peut rattraper, ces parties n'étant pas stylables.
La valeur est posée sur CHAQUE thème, jamais par défaut : « casa », le thème
initial, est sombre, alors qu'« ocean », « emeraude » et « sunset » sont
clairs. Se fier à :root ferait donc l'inverse de ce qu'il faut pour la
majorité des visiteurs. Ces sélecteurs ciblent tous et ont la même
spécificité : c'est l'ordre d'écriture qui tranche, d'où la déclaration
répétée. */
:root, [data-theme="casa"] {
color-scheme: dark;
--accent: #c9a24b;
--accent-2: #e6c583;
--bleu: #c9a24b; /* alias historiques utilisés dans les pages */
--bleu-fonce: #e6c583;
--bleu-clair: #232a3d;
--fond: #12161f;
--carte: #1c2230;
--texte: #ede9df;
--gris: #9aa1b2;
--gris-clair: #232a3d;
--bord: #2f3648;
--vert: #6bbf7a;
--vert-fond: #17281c;
--orange: #e0a94b;
--orange-fond: #2e2410;
--rouge: #e5736b;
--rouge-fond: #2f1717;
--topbar: #10131b;
--topbar-texte: #cbb98d;
--degrade: linear-gradient(135deg, #c9a24b, #e6c583);
--ombre: 0 1px 3px rgba(0, 0, 0, 0.4);
--ombre-forte: 0 14px 34px rgba(201, 162, 75, 0.22);
}
[data-theme="ocean"] {
color-scheme: light;
--accent: #2563eb;
--accent-2: #7c3aed;
--bleu: #2563eb; /* alias historiques utilisés dans les pages */
--bleu-fonce: #1e3a8a;
--bleu-clair: #eff6ff;
--fond: #f1f5f9;
--carte: #ffffff;
--texte: #0f172a;
--gris: #64748b;
--gris-clair: #f1f5f9;
--bord: #e2e8f0;
--vert: #16a34a;
--vert-fond: #f0fdf4;
--orange: #ea580c;
--orange-fond: #fff7ed;
--rouge: #dc2626;
--rouge-fond: #fef2f2;
--topbar: #0f172a;
--topbar-texte: #cbd5e1;
--degrade: linear-gradient(135deg, #2563eb, #7c3aed);
--ombre: 0 1px 3px rgba(15, 23, 42, 0.07);
--ombre-forte: 0 14px 34px rgba(37, 99, 235, 0.18);
}
[data-theme="emeraude"] {
color-scheme: light;
--accent: #059669;
--accent-2: #0d9488;
--bleu: #059669;
--bleu-fonce: #065f46;
--bleu-clair: #ecfdf5;
--fond: #f0fdf4;
--carte: #ffffff;
--texte: #052e16;
--gris: #6b7280;
--gris-clair: #f0fdf4;
--bord: #d1fae5;
--topbar: #064e3b;
--topbar-texte: #a7f3d0;
--degrade: linear-gradient(135deg, #059669, #0d9488);
--ombre-forte: 0 14px 34px rgba(5, 150, 105, 0.18);
}
[data-theme="sunset"] {
color-scheme: light;
--accent: #ea580c;
--accent-2: #db2777;
--bleu: #ea580c;
--bleu-fonce: #9a3412;
--bleu-clair: #fff7ed;
--fond: #fffbf5;
--carte: #ffffff;
--texte: #431407;
--gris: #78716c;
--gris-clair: #faf5f0;
--bord: #fed7aa;
--orange: #b45309;
--orange-fond: #fef3c7;
--topbar: #431407;
--topbar-texte: #fed7aa;
--degrade: linear-gradient(135deg, #ea580c, #db2777);
--ombre-forte: 0 14px 34px rgba(234, 88, 12, 0.2);
}
[data-theme="nuit"] {
color-scheme: dark;
--accent: #60a5fa;
--accent-2: #a78bfa;
--bleu: #60a5fa;
--bleu-fonce: #bfdbfe;
--bleu-clair: #1e293b;
--fond: #0b1120;
--carte: #16203a;
--texte: #e2e8f0;
--gris: #94a3b8;
--gris-clair: #1e293b;
--bord: #2c3a55;
--vert: #4ade80;
--vert-fond: #14291c;
--orange: #fdba74;
--orange-fond: #33210f;
--rouge: #f87171;
--rouge-fond: #331414;
--topbar: #060b16;
--topbar-texte: #94a3b8;
--degrade: linear-gradient(135deg, #3b82f6, #8b5cf6);
--ombre: 0 1px 3px rgba(0, 0, 0, 0.4);
--ombre-forte: 0 14px 34px rgba(0, 0, 0, 0.5);
}
/* ==================================================================
Base
================================================================== */
* { box-sizing: border-box; }
/* Base agrandie : toutes les tailles en rem grandissent proportionnellement */
html { font-size: 18px; }
html, body {
margin: 0;
font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
background: var(--fond);
color: var(--texte);
}
body { font-size: 1rem; }
h1:focus { outline: none; }
a { color: var(--accent); }
/* ==================================================================
Nom de la marque
Partout où « Sedes » est écrit, le mot reprend la police du logo.
Seule la police change : la couleur reste celle du texte environnant.
================================================================== */
.nom-marque {
font-family: 'Dancing Script', 'Segoe Script', 'Brush Script MT', cursive;
font-weight: 700;
/* Les polices manuscrites paraissent plus petites : léger rattrapage. */
font-size: 1.12em;
letter-spacing: 0.3px;
color: inherit;
}
/* ==================================================================
Barre du haut
================================================================== */
.topbar {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
/* Gap vertical (entre les deux lignes) réduit ; gap horizontal conservé. */
gap: 0.35rem 1.5rem;
padding: 0.5rem 1.75rem;
background: var(--topbar);
flex-wrap: wrap;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.brand {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 1.35rem;
font-weight: 800;
color: white;
text-decoration: none;
letter-spacing: -0.5px;
}
.brand .logo {
width: 76px;
height: 76px;
object-fit: contain;
/* Logo à fond transparent : ombre portée qui épouse la forme
(drop-shadow) plutôt qu'un carré (box-shadow). */
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
.brand { font-size: 1.6rem; }
/* Bloc marque : nom centré au-dessus de la devise */
.brand-bloc {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
line-height: 1.15;
}
.brand-texte {
white-space: nowrap;
font-family: 'Dancing Script', 'Segoe Script', 'Brush Script MT', cursive;
font-weight: 700;
font-size: 2.35rem;
letter-spacing: 0.5px;
line-height: 1.05;
}
.brand-accent {
background: var(--degrade);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.brand-devise {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.6px;
color: var(--topbar-texte);
white-space: nowrap;
}
.brand span {
background: var(--degrade);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.topbar nav {
display: flex;
gap: 0.2rem;
flex-wrap: wrap;
align-items: center;
/* Deuxième ligne de l'entête : les onglets passent sous le logo et la
zone utilisateur (ordre supérieur + pleine largeur pour forcer le retour). */
order: 1;
flex-basis: 100%;
padding-top: 0.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.topbar nav a {
color: var(--topbar-texte);
text-decoration: none;
padding: 0.42rem 0.85rem;
border-radius: 999px;
font-size: 0.92rem;
transition: background 0.15s, color 0.15s;
}
.topbar nav a:hover { background: rgba(255, 255, 255, 0.1); color: white; }
.topbar nav a.active { background: var(--degrade); color: white; font-weight: 600; }
/* Onglet « Mon suivi » sous forme de menu déroulant. */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-lien-bouton {
color: var(--topbar-texte);
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 0.92rem;
padding: 0.42rem 0.85rem;
border-radius: 999px;
transition: background 0.15s, color 0.15s;
}
.nav-lien-bouton:hover { background: rgba(255, 255, 255, 0.1); color: white; }
.nav-voile { position: fixed; inset: 0; z-index: 90; }
.nav-sousmenu {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 100;
min-width: 220px;
background: var(--carte);
border: 1px solid var(--bord);
border-radius: 12px;
box-shadow: var(--ombre-forte);
padding: 6px;
display: flex; flex-direction: column;
}
[dir="rtl"] .nav-sousmenu { left: auto; right: 0; }
/* Sélecteur préfixé par « .topbar nav » : sans cela la règle générale
« .topbar nav a » (plus spécifique) imposerait la couleur claire de la barre
de navigation à un sous-menu qui, lui, est posé sur un fond de carte. */
.topbar nav .nav-sousmenu a {
padding: 9px 12px;
border-radius: 8px;
text-decoration: none;
color: var(--texte);
background: transparent;
font-weight: 600;
font-size: 0.92rem;
/* Chaque entrée tient sur une seule ligne : le menu s'élargit si besoin. */
white-space: nowrap;
}
.topbar nav .nav-sousmenu a:hover { background: var(--gris-clair); color: var(--texte); }
/* Sépare les écrans de réglage des sections de « Mes paramètres ». */
.nav-sousmenu-separateur { height: 1px; background: var(--bord); margin: 6px 4px; }
.zone-user {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
/* Pousse la zone utilisateur (et le menu ☰) à droite sur la première ligne. */
margin-left: auto;
}
.pseudo {
color: white;
font-size: 0.88rem;
font-weight: 600;
}
.badge-role {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0.15rem 0.55rem;
border-radius: 999px;
background: var(--degrade);
color: white;
font-weight: 700;
}
/* État du compte agent (icône ✔ / ⛔) : cliquable, mène à l'onglet abonnement. */
.badge-etat-compte {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
font-size: 0.8rem;
text-decoration: none;
}
.badge-etat-compte.etat-actif { background: var(--vert-fond); color: var(--vert); }
.badge-etat-compte.etat-inactif { background: var(--rouge-fond); color: var(--rouge); }
.badge-etat-compte:hover { filter: brightness(1.2); text-decoration: none; }
/* Bouton de déconnexion, réduit à son icône. */
.btn-deconnexion {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.5rem;
}
.btn-deconnexion svg { display: block; }
/* Bouton de visite guidée, poussé tout à droite de la ligne d'onglets. */
.nav-visite {
margin-inline-start: auto;
background: none;
border: 1px solid color-mix(in srgb, var(--topbar-texte) 35%, transparent);
color: var(--topbar-texte);
padding: 0.35rem 0.8rem;
border-radius: 999px;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.nav-visite:hover { background: rgba(255, 255, 255, 0.1); color: white; }
/* ------------------------------------------------------------------
Visite guidée : voile, trou de lumière et bulle d'explication.
Le voile attrape les clics ; l'assombrissement vient du box-shadow
géant du trou, qui laisse la cible en pleine lumière.
------------------------------------------------------------------ */
.visite-voile { position: fixed; inset: 0; z-index: 4000; }
.visite-trou {
position: absolute;
z-index: 4001;
border-radius: 10px;
pointer-events: none;
border: 2px solid var(--accent);
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
}
.visite-bulle {
position: absolute;
z-index: 4002;
width: min(340px, calc(100vw - 24px));
background: var(--carte);
color: var(--texte);
border: 1px solid var(--bord);
border-radius: 14px;
padding: 1rem 1.1rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.visite-titre { font-weight: 700; margin-bottom: 0.4rem; }
.visite-texte { font-size: 0.9rem; line-height: 1.5; }
.visite-actions {
display: flex;
align-items: center;
gap: 0.4rem;
justify-content: flex-end;
margin-top: 0.8rem;
}
.visite-compteur {
margin-inline-end: auto;
font-size: 0.78rem;
color: var(--gris);
}
/* Sélecteur de thème */
.themes { display: flex; gap: 0.35rem; align-items: center; }
/* Choix de notification : la case, l'intitulé et son explication sur une
ligne cliquable entière — viser une case de 13 px au doigt est pénible. */
.choix-notif {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--bord);
cursor: pointer;
}
.choix-notif:last-of-type { border-bottom: none; }
.choix-notif input { margin-top: 0.2rem; flex: 0 0 auto; }
.choix-notif span { display: flex; flex-direction: column; gap: 0.15rem; }
.choix-notif small { color: var(--gris); font-size: 0.85rem; line-height: 1.35; }
/* Compteur d'anomalies accolé à un titre de section : il doit accrocher
l'œil sans hurler, l'information étant déjà rouge dans le tableau. */
.badge-alerte {
display: inline-block;
margin-left: 0.5rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
background: var(--rouge-fond);
color: var(--rouge);
font-size: 0.75rem;
font-weight: 600;
vertical-align: middle;
}
.pastille {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.55);
cursor: pointer;
padding: 0;
transition: transform 0.15s, border-color 0.15s;
}
.pastille:hover { transform: scale(1.25); border-color: white; }
/* ==================================================================
Structure
================================================================== */
.page {
/* Pleine largeur avec une petite marge de respiration de chaque côté. */
max-width: none;
margin: 0 auto;
padding: 0 1.2rem 4rem;
}
.footer {
background: var(--topbar);
border-top: 1px solid var(--bord);
margin-top: 3rem;
color: var(--gris);
font-size: 0.88rem;
}
.footer-contenu {
max-width: none;
margin: 0 auto;
padding: 2.2rem 1.2rem 1.6rem;
display: grid;
/* Marque, puis Informations (plus large : coordonnées), Ressources,
Clients et Professionnels. */
grid-template-columns: 1.5fr 1.4fr 1.1fr 1fr 1fr;
gap: 2rem;
}
@media (max-width: 1100px) {
.footer-contenu { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 820px) {
.footer-contenu { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.footer-contenu { grid-template-columns: 1fr; }
}
.footer-marque { display: flex; flex-direction: column; gap: 0.15rem; }
.footer-logo {
font-family: 'Dancing Script', 'Segoe Script', 'Brush Script MT', cursive;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.15;
background: var(--degrade);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.footer-devise {
font-size: 0.75rem;
letter-spacing: 0.6px;
color: var(--topbar-texte);
}
.footer-marque p { margin: 0.7rem 0 0; line-height: 1.55; }
.footer-colonne { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-colonne h4 {
margin: 0 0 0.35rem;
font-size: 0.92rem;
letter-spacing: 0.4px;
color: var(--accent);
}
.footer-colonne a {
color: var(--gris);
text-decoration: none;
transition: color 0.12s;
}
.footer-colonne a:hover { color: var(--texte); }
/* ------------------------------------------------------------------
Pied de page — colonne « Informations »
Coordonnées (email, téléphone) et logos officiels des réseaux sociaux.
------------------------------------------------------------------ */
.footer-info {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--gris);
text-decoration: none;
/* Une adresse email longue ne doit pas déborder de la colonne. */
overflow-wrap: anywhere;
}
a.footer-info:hover { color: var(--texte); }
.footer-ico {
width: 1.05rem;
height: 1.05rem;
flex: 0 0 auto;
color: var(--accent);
}
.footer-reseaux-titre { margin-top: 0.35rem; line-height: 1.35; }
.footer-reseaux {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.15rem;
/* Aligné sous le texte de la ligne « Rejoignez-nous… ». */
padding-left: 1.55rem;
}
.footer-reseau {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 1px solid var(--bord);
color: var(--gris);
text-decoration: none;
transition: color 0.12s, border-color 0.12s, transform 0.12s;
}
.footer-reseau svg { width: 1.05rem; height: 1.05rem; }
/* Au survol, le logo reprend la couleur officielle de la marque. */
.footer-reseau:hover {
color: var(--couleur-reseau, var(--accent));
border-color: var(--couleur-reseau, var(--accent));
transform: translateY(-2px);
}
.footer-bas {
border-top: 1px solid var(--bord);
text-align: center;
padding: 1rem 1.5rem;
font-size: 0.78rem;
color: var(--gris);
}
/* ==================================================================
Simulateur de crédit immobilier
================================================================== */
.simulateur { display: flex; flex-direction: column; gap: 1.2rem; }
/* Phrase d'introduction d'une section de formulaire. */
.aide-section {
margin: -0.4rem 0 1rem;
color: var(--gris);
font-size: 0.88rem;
line-height: 1.55;
}
/* Un champ à choix peut faire apparaître une saisie libre en dessous :
les deux contrôles doivent rester lisiblement groupés. */
.champ select + input { margin-top: 0.4rem; }
/* ------------------------------------------------------------------
Formulaire du simulateur : un critère par ligne.
Le champ à gauche, son explication à droite — on lit le libellé, on
saisit, et l'explication est là sans qu'il faille la chercher.
------------------------------------------------------------------ */
.simu-criteres { display: flex; flex-direction: column; }
/* Chaque critère occupe une ligne : libellé puis saisie en colonne de gauche,
explication en colonne de droite. */
.simu-criteres > .champ {
display: grid;
grid-template-columns: minmax(15rem, 22rem) 1fr;
/* Trois rangées explicites : libellé, liste de choix, saisie libre
éventuelle. Sans elles, une explication placée « jusqu'à la dernière
rangée » ne couvrirait en fait qu'une seule rangée. */
grid-template-rows: repeat(3, auto);
column-gap: 1.5rem;
row-gap: 0.3rem;
align-items: start;
padding: 1rem 0;
border-top: 1px solid var(--bord);
}
.simu-criteres > .champ:first-child { border-top: none; padding-top: 0.2rem; }
/* L'écart entre la liste de choix et la saisie libre qu'elle révèle est déjà
assuré par row-gap : la marge générique ferait double emploi. */
.simu-criteres > .champ select + input { margin-top: 0; }
/* Libellé et champs de saisie restent à gauche… */
.simu-criteres > .champ > * { grid-column: 1; }
/* …et l'explication commence à la deuxième rangée, c'est-à-dire à la hauteur
du champ de saisie et non à celle du libellé : l'œil relie ainsi directement
le contrôle à son explication. */
.simu-criteres > .champ > .simu-explication {
grid-column: 2;
grid-row: 2 / -1;
align-self: start;
font-size: 0.86rem;
line-height: 1.6;
color: var(--gris);
}
.simu-explication b { color: var(--texte); }
@media (max-width: 760px) {
.simu-criteres > .champ { grid-template-columns: 1fr; }
.simu-criteres > .champ > .simu-explication { grid-column: 1; grid-row: auto; }
}
/* ------------------------------------------------------------------
Rangée de champs précédée d'une icône thématique (Mes paramètres).
------------------------------------------------------------------ */
.rangee {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.2rem;
}
.rangee-icone {
flex: 0 0 auto;
font-size: 1.5rem;
line-height: 1;
/* Aligné sur les champs, sous la ligne des libellés. */
padding-top: 1.6rem;
}
/* Les champs se répartissent toute la largeur restante et se replient
d'eux-mêmes sur les écrans étroits. */
.rangee-champs {
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 1rem;
min-width: 0;
}
/* Un champ qui mérite plus de place que ses voisins (adresse postale). */
.rangee-champs .champ-large { grid-column: span 2; }
@media (max-width: 620px) {
.rangee-icone { display: none; }
.rangee-champs .champ-large { grid-column: auto; }
}
/* ------------------------------------------------------------------
Formulaire sur une ligne : champs à gauche, boutons au bout.
------------------------------------------------------------------ */
.ligne-formulaire {
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
}
.ligne-champs {
flex: 1 1 30rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1rem;
min-width: 0;
}
/* Les champs se calent sur le bas de leur cellule (« .champ » aligne son
contenu en fin de colonne) : les boutons font de même, et se retrouvent donc
exactement sur la même ligne que les zones de saisie, quelle que soit la
hauteur des libellés. */
.ligne-actions {
flex: 0 0 auto;
align-self: flex-end;
display: flex;
gap: 0.6rem;
}
@media (max-width: 620px) {
.ligne-actions { width: 100%; }
.ligne-actions .btn { flex: 1 1 auto; }
}
/* Boutons d'une fenêtre modale. */
.modal-actions {
display: flex;
gap: 0.6rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1rem;
}
/* Bandeau des quatre chiffres clés. */
.simu-resume {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.simu-chiffre {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1.1rem 1.2rem;
border: 1px solid var(--bord);
border-radius: 14px;
background: var(--carte);
}
/* La mensualité est le chiffre que l'on vient chercher : elle domine. */
.simu-chiffre-principal {
border-color: var(--accent);
box-shadow: var(--ombre-forte);
}
.simu-chiffre-alerte { border-color: var(--rouge); background: var(--rouge-fond); }
.simu-libelle {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--gris);
}
.simu-valeur {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.7rem;
font-weight: 800;
line-height: 1.15;
color: var(--accent);
}
.simu-chiffre-principal .simu-valeur { font-size: 2.1rem; }
.simu-chiffre-alerte .simu-valeur { color: var(--rouge); }
.simu-detail { font-size: 0.8rem; color: var(--gris); line-height: 1.4; }
.simu-colonnes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 1.2rem;
align-items: start;
}
/* Tableaux chiffrés : montants alignés à droite pour comparer les ordres de grandeur. */
.tableau-simu { width: 100%; }
.tableau-simu .montant { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tableau-simu .montant-negatif { color: var(--vert); }
.tableau-simu .ligne-detail td {
padding-left: 1.6rem;
font-size: 0.85rem;
color: var(--gris);
}
.tableau-simu .ligne-total td {
border-top: 2px solid var(--bord);
font-weight: 700;
color: var(--texte);
}
.tableau-simu .cellule-detail { background: var(--fond); padding: 0.5rem; }
/* Jauge du taux d'endettement, avec le repère des 35 %. */
.jauge-endettement { margin: 0.6rem 0 1rem; }
.jauge-piste {
position: relative;
height: 1.1rem;
border-radius: 999px;
background: var(--gris-clair);
border: 1px solid var(--bord);
overflow: hidden;
}
.jauge-remplissage { height: 100%; border-radius: 999px; transition: width 0.2s; }
.jauge-verte { background: var(--vert); }
.jauge-rouge { background: var(--rouge); }
/* Trait vertical marquant le plafond recommandé. */
.jauge-seuil {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: var(--texte);
opacity: 0.75;
}
.jauge-legende {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin-top: 0.4rem;
font-size: 0.82rem;
color: var(--gris);
}
.jauge-legende b { font-size: 1.1rem; }
.texte-alerte { color: var(--rouge); }
.texte-ok { color: var(--vert); }
/* Bouton présenté comme un lien (retour au taux de référence). */
.lien-bouton {
background: none;
border: none;
padding: 0;
font: inherit;
color: var(--accent);
cursor: pointer;
text-decoration: underline;
}
.simu-mentions {
font-size: 0.76rem;
line-height: 1.55;
color: var(--gris);
border-top: 1px solid var(--bord);
padding-top: 0.9rem;
margin: 0;
}
/* Bloc dépliable qui accueille le simulateur sur l'accueil. */
.bloc-depliable {
border: 1px solid var(--bord);
border-radius: 14px;
background: var(--carte);
overflow: hidden;
margin-bottom: 1.2rem;
}
.bloc-depliable > .bloc-entete {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: 1rem 1.2rem;
background: none;
border: none;
color: var(--texte);
font: inherit;
text-align: left;
cursor: pointer;
}
.bloc-depliable > .bloc-entete:hover { background: var(--gris-clair); }
.bloc-entete-titre { display: flex; flex-direction: column; gap: 0.15rem; }
.bloc-entete-titre b { font-size: 1.05rem; }
.bloc-entete-titre span { font-size: 0.83rem; color: var(--gris); }
.bloc-chevron { font-size: 1.2rem; color: var(--accent); flex: 0 0 auto; }
.bloc-corps { padding: 0 1.2rem 1.2rem; }
/* ==================================================================
Grille tarifaire des abonnements
================================================================== */
.grille-tarifs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1.2rem;
margin-bottom: 1.5rem;
}
.carte-tarif {
position: relative;
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.5rem 1.3rem 1.3rem;
border: 1px solid var(--bord);
border-radius: 14px;
background: var(--carte);
}
/* La formule recommandée se distingue par sa bordure, pas par sa couleur de
fond : les prix restent tous aussi lisibles les uns que les autres. */
.carte-tarif-avant {
border: 2px solid var(--accent);
box-shadow: var(--ombre-forte);
}
.etiquette-tarif {
position: absolute;
top: -0.7rem;
left: 1.3rem;
padding: 0.15rem 0.7rem;
border-radius: 999px;
background: var(--accent);
color: var(--topbar);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.3px;
}
.carte-tarif h3 { margin: 0; font-size: 1.15rem; }
.tarif-duree { margin: 0; font-size: 0.82rem; color: var(--gris); }
.tarif-prix {
margin: 0.5rem 0 0;
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.9rem;
font-weight: 800;
line-height: 1.1;
color: var(--accent);
}
.tarif-prix small { font-size: 0.85rem; font-weight: 400; color: var(--gris); }
.tarif-detail { margin: 0; font-size: 0.82rem; color: var(--gris); }
.tarif-description {
margin: 0.5rem 0 0;
font-size: 0.88rem;
line-height: 1.5;
flex: 1 1 auto;
}
/* Le bouton reste collé en bas de la carte, avec ou sans description :
margin-top:auto absorbe tout l'espace restant de la colonne flex. */
.carte-tarif .btn { margin-top: auto; }
/* Garde un espace minimum entre le dernier texte et le bouton. */
.carte-tarif > :nth-last-child(2) { margin-bottom: 0.65rem; }
/* ------------------------------------------------------------------
Impression de la fiche de virement : seule la fiche part sur papier.
------------------------------------------------------------------ */
@media print {
.topbar, .footer, .no-print, .boutons-defilement { display: none !important; }
.page { padding: 0 !important; }
.card, .card-sensible {
border: 1px solid #999 !important;
box-shadow: none !important;
break-inside: avoid;
}
}
/* ==================================================================
Accès global (section administrateur de « Mes paramètres »)
================================================================== */
.card-sensible { border: 1px solid var(--accent); }
.encart-mode-emploi {
margin: 0.9rem 0;
padding: 0.9rem 1.1rem;
border-left: 3px solid var(--accent);
border-radius: 0 10px 10px 0;
background: var(--fond);
line-height: 1.6;
}
.encart-mode-emploi ol { margin: 0.5rem 0; padding-left: 1.3rem; }
.encart-mode-emploi li { margin: 0.25rem 0; }
/* Champ de mot de passe accompagné de son bouton « Afficher ». */
.champ-secret { display: flex; gap: 0.5rem; align-items: stretch; }
.champ-secret input { flex: 1 1 auto; font-family: "Cascadia Code", Consolas, monospace; }
.champ-secret .btn { flex: 0 0 auto; white-space: nowrap; }
/* ==================================================================
Éditeur de texte des pages de contenu (/admin/contenus)
================================================================== */
.editeur-visuel {
min-height: 22rem;
max-height: 40rem;
overflow-y: auto;
padding: 1rem 1.2rem;
border: 1px solid var(--bord);
border-radius: 10px;
background: var(--carte);
color: var(--texte);
line-height: 1.7;
}
.editeur-visuel:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Le rendu de la saisie reprend celui de la page publique, pour que
l'administrateur voie exactement ce qu'il produit. */
.editeur-visuel h2 {
font-size: 1.25rem;
margin: 1.4rem 0 0.5rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid var(--bord);
}
.editeur-visuel h3 { font-size: 1.08rem; margin: 1.1rem 0 0.35rem; }
.editeur-visuel p { margin: 0.6rem 0; }
.editeur-visuel ul, .editeur-visuel ol { margin: 0.6rem 0; padding-left: 1.4rem; }
.editeur-visuel li { margin: 0.3rem 0; }
.editeur-visuel a { color: var(--accent); }
.editeur-visuel:empty::before { content: attr(data-vide); color: var(--gris); }
/* ==================================================================
Back-office « Contenus du pied de page » (/admin/contenus)
================================================================== */
.aide {
display: block;
margin-top: 0.3rem;
font-size: 0.78rem;
color: var(--gris);
line-height: 1.45;
}
/* Aide d'une rangée : alignée sous les champs, pas sous l'icône.
Déclarée après « .aide » pour en surcharger la marge haute. */
.rangee-aide { margin: -0.6rem 0 1.2rem 2.5rem; }
@media (max-width: 620px) {
.rangee-aide { margin-left: 0; }
}
.actions-formulaire { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.liste-pages { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Une URL longue ne doit pas élargir le tableau. */
.cellule-url {
max-width: 22rem;
overflow-wrap: anywhere;
color: var(--gris);
font-size: 0.85rem;
}
.editeur-barre {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.5rem;
}
/* Aperçu du logo reconnu automatiquement pour un réseau social. */
.apercu-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border: 1px solid var(--bord);
border-radius: 50%;
background: var(--topbar);
}
.apercu-logo svg { width: 1.3rem; height: 1.3rem; }
.apercu-logo-petit { width: 1.9rem; height: 1.9rem; }
.apercu-logo-petit svg { width: 1rem; height: 1rem; }
.apercu-pied {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 1rem 1.2rem;
border-radius: 10px;
background: var(--topbar);
color: var(--gris);
font-size: 0.88rem;
}
/* ==================================================================
Pages institutionnelles (mentions légales, confidentialité, RGPD…)
Contenu rédigé par l'administrateur : la mise en forme est définie ici,
pas dans le texte saisi.
================================================================== */
.page-ressource {
max-width: 52rem;
margin: 0 auto;
padding: 1.5rem 1.2rem 2rem;
}
.contenu-redactionnel {
background: var(--carte);
border: 1px solid var(--bord);
border-radius: 14px;
padding: 2rem 2.2rem;
line-height: 1.7;
}
@media (max-width: 620px) {
.contenu-redactionnel { padding: 1.4rem 1.2rem; }
}
.contenu-redactionnel h1 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 2rem;
margin: 0 0 1.4rem;
color: var(--accent);
}
.contenu-redactionnel h2 {
font-size: 1.25rem;
margin: 2rem 0 0.6rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--bord);
color: var(--texte);
}
.contenu-redactionnel h3 { font-size: 1.08rem; margin: 1.4rem 0 0.4rem; color: var(--texte); }
.contenu-redactionnel h4 { font-size: 1rem; margin: 1.1rem 0 0.3rem; color: var(--texte); }
.contenu-redactionnel p { margin: 0.7rem 0; }
.contenu-redactionnel ul, .contenu-redactionnel ol { margin: 0.7rem 0; padding-left: 1.4rem; }
.contenu-redactionnel li { margin: 0.35rem 0; }
.contenu-redactionnel blockquote {
margin: 1rem 0;
padding: 0.6rem 1rem;
border-left: 3px solid var(--accent);
background: var(--fond);
border-radius: 0 8px 8px 0;
}
.contenu-redactionnel hr { border: none; border-top: 1px solid var(--bord); margin: 1.5rem 0; }
.contenu-maj {
margin-top: 2rem;
padding-top: 0.9rem;
border-top: 1px solid var(--bord);
font-size: 0.82rem;
color: var(--gris);
}
.contenu-liens {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.2rem;
justify-content: center;
}
/* ==================================================================
Héro
================================================================== */
.hero { text-align: center; padding: 2.25rem 1rem 0.75rem; }
.hero h1 {
font-size: clamp(1.9rem, 4.5vw, 2.9rem);
margin-top: 0;
margin-bottom: 0.6rem;
letter-spacing: -1px;
line-height: 1.15;
}
.hero .accroche {
background: var(--degrade);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero p { color: var(--gris); font-size: 1.08rem; max-width: 660px; margin: 0 auto; line-height: 1.6; }
/* Bloc éditorial du jour (SEO) : image + descriptif */
/* Bannière immersive : l'image occupe tout le bloc, le texte flotte par-dessus
un dégradé — hauteurs toujours égales, avec animations (zoom lent « Ken Burns »,
entrée du texte en cascade, badge doré scintillant). */
.hero-jour {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
/* Moitié de la hauteur d'écran : titre + image + descriptif + boutons visibles. */
min-height: 50vh;
border: 1px solid var(--bord);
border-radius: 18px;
margin: 0.5rem auto 0;
max-width: none;
box-shadow: var(--ombre);
isolation: isolate;
}
.hero-jour-fond {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
animation: hero-zoom 22s ease-in-out infinite alternate;
}
@keyframes hero-zoom {
from { transform: scale(1) translateX(0); }
to { transform: scale(1.1) translateX(-1.5%); }
}
/* Dégradé sombre à gauche pour la lisibilité du texte, quel que soit le thème. */
.hero-jour-voile {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg,
rgba(10, 14, 25, 0.92) 0%,
rgba(10, 14, 25, 0.85) 50%,
rgba(10, 14, 25, 0.55) 78%,
rgba(10, 14, 25, 0.05) 100%);
}
.hero-jour-contenu {
position: relative;
max-width: 1150px;
padding: 2.4rem 2.6rem;
color: #fff;
}
.hero-jour-contenu > * {
opacity: 0;
transform: translateY(16px);
animation: hero-entree 0.7s ease forwards;
}
.hero-jour-contenu > *:nth-child(2) { animation-delay: 0.18s; }
@keyframes hero-entree {
to { opacity: 1; transform: translateY(0); }
}
/* Badge doré avec reflet animé. */
.hero-jour-etiquette {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.38rem 1rem;
border-radius: 999px;
background: linear-gradient(110deg, #c9a24b 25%, #ffe9b0 50%, #c9a24b 75%);
background-size: 220% 100%;
color: #1a1f2e;
font-weight: 800;
font-size: 0.86rem;
letter-spacing: 0.02em;
margin-bottom: 1rem;
box-shadow: 0 4px 18px rgba(201, 162, 75, 0.45);
animation: hero-entree 0.7s ease forwards, hero-brillance 3.6s linear 1s infinite;
}
@keyframes hero-brillance {
to { background-position: -220% 0; }
}
.hero-jour-contenu p {
margin: 0;
font-size: 1.18rem;
line-height: 1.75;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
/* Confort : pas d'animations pour ceux qui les désactivent. */
@media (prefers-reduced-motion: reduce) {
.hero-jour-fond,
.hero-jour-etiquette,
.hero-jour-contenu > * {
animation: none;
opacity: 1;
transform: none;
}
}
/* Boutons centrés sous l'image et la description */
.hero-jour-boutons {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
justify-content: center;
max-width: none;
margin: 0.8rem auto 0.3rem;
}
@media (max-width: 760px) {
.hero-jour { min-height: 280px; }
.hero-jour-contenu { padding: 1.6rem 1.4rem; }
.hero-jour-contenu p { font-size: 1.02rem; }
.hero-jour-voile {
background: linear-gradient(180deg,
rgba(10, 14, 25, 0.85) 0%,
rgba(10, 14, 25, 0.55) 60%,
rgba(10, 14, 25, 0.25) 100%);
}
}
/* Boutons avec icône moderne (SVG au trait).
Sélecteur doublé (.btn.btn-icone) pour l'emporter sur le display de .btn défini plus bas. */
.btn.btn-icone, .btn-icone {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.6rem;
padding: 0.7rem 1.2rem;
font-size: 1.02rem;
}
.btn-ico {
width: 26px;
height: 26px;
flex-shrink: 0;
}
/* Dans le bandeau d'accueil : tous les boutons à la même largeur, contenu centré */
.hero-jour-boutons .btn-icone {
width: 320px;
max-width: 100%;
}
/* Actions des cartes de suivi : sous le titre, alignées à gauche, largeur uniforme */
.actions-suivi {
display: flex;
gap: 0.5rem;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
width: auto;
margin: 0.35rem 0 0.75rem;
}
.actions-suivi .btn {
flex: 0 0 auto;
width: 9.5rem;
max-width: 9.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.38rem 0.6rem;
font-size: 0.88rem;
line-height: 1.35;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Icône (emoji) des boutons d'action : plus grande que le libellé */
.actions-suivi .btn .ico {
font-size: 1.25rem;
line-height: 1;
flex-shrink: 0;
}
@media (max-width: 760px) {
.actions-suivi { flex-wrap: wrap; }
.actions-suivi .btn { width: auto; max-width: none; flex: 1 1 45%; }
}
/* Puces de résumé agrandies (Mes recherches / Mes biens déposés) */
.puces-grandes .badge {
font-size: 0.98rem;
padding: 0.3rem 0.85rem;
}
/* Liste déroulante accentuée (filtres) */
.select-accent {
padding: 0.5rem 0.8rem;
border-radius: 10px;
border: 2px solid var(--accent);
background: color-mix(in srgb, var(--accent) 14%, var(--carte));
color: var(--accent);
font-weight: 600;
font-family: inherit;
font-size: 0.95rem;
cursor: pointer;
}
.select-accent:focus { outline: 2px solid var(--accent-2); }
/* ---------- Sélecteur de classe énergie (DPE / GES) ---------- */
.selecteur-energie {
display: flex;
gap: 0.3rem;
flex-wrap: wrap;
align-items: center;
}
.selecteur-energie-case {
width: 36px;
height: 36px;
border: 2px solid transparent;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 800;
font-family: inherit;
cursor: pointer;
opacity: 0.45;
transition: opacity 0.12s, transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.selecteur-energie-case:hover { opacity: 0.9; transform: scale(1.08); }
.selecteur-energie-case.actif {
opacity: 1;
transform: scale(1.12);
border-color: var(--texte);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* Bouton « Aucune » : même design que les cases de classe, en neutre,
légèrement séparé du groupe A→G et en texte normal. */
.selecteur-energie-aucune {
width: auto;
padding: 0 0.8rem;
margin-left: 0.7rem;
background: var(--gris-clair);
color: var(--gris);
font-weight: 400;
font-size: 0.85rem;
letter-spacing: 0.2px;
}
.selecteur-energie-aucune.actif {
color: var(--texte);
border-color: var(--accent);
box-shadow: none;
transform: scale(1.04);
}
/* Brève explication de la classe sélectionnée, à droite des cases */
.selecteur-energie-info {
margin-left: 0.4rem;
font-size: 0.83rem;
font-style: italic;
color: var(--gris);
}
.selecteur-energie-info b { color: var(--texte); font-style: normal; }
/* ---------- Zone d'ajout de fichiers (remplace le bouton natif « Choisir des fichiers ») ---------- */
.zone-fichiers {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 1.25rem 1rem;
border: 2px dashed var(--bord);
border-radius: 12px;
background: var(--carte);
cursor: pointer;
text-align: center;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.zone-fichiers:hover {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* L'input natif, invisible, recouvre toute la zone : le clic ouvre le
sélecteur et un glisser-déposer de fichiers y est capté nativement. */
.zone-fichiers input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/* Surbrillance pendant qu'un fichier est glissé au-dessus de la zone */
.zone-fichiers.survol {
border-color: var(--accent);
background: color-mix(in srgb, var(--carte) 80%, var(--accent));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}
.zone-fichiers-icone { font-size: 1.7rem; line-height: 1; }
.zone-fichiers-titre { font-weight: 700; color: var(--accent); }
.zone-fichiers-note { font-size: 0.8rem; color: var(--gris); }
/* ---------- Justificatifs déposés au formulaire d'inscription ---------- */
/* Trois zones côte à côte sur grand écran, empilées sur mobile. */
.documents-inscription {
display: grid; gap: 0.6rem;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* Variante resserrée de .zone-fichiers : trois par ligne, sans occuper
la moitié du formulaire d'inscription. */
.zone-fichiers-compacte { padding: 0.7rem 0.6rem; gap: 0.25rem; }
.zone-fichiers-compacte .zone-fichiers-icone { font-size: 1.3rem; }
.zone-fichiers-compacte .zone-fichiers-titre { font-size: 0.85rem; }
.zone-fichiers-compacte .zone-fichiers-note {
font-size: 0.75rem; overflow-wrap: anywhere;
}
/* ---------- Pages éditoriales : titre + téléchargement PDF ---------- */
.contenu-entete {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
.contenu-entete h1 { margin: 0; }
/* Le bouton reste aligné sur la première ligne du titre, même s'il en fait deux. */
.lien-pdf { flex: 0 0 auto; margin-top: 0.25rem; text-decoration: none; }
@media print {
.lien-pdf { display: none; }
}
/* ---------- Acceptation des conditions générales ---------- */
/* La case et son libellé forment une seule cible cliquable. La case garde sa
taille propre (flex-shrink) même quand le texte passe sur deux lignes. */
.case-cgv {
display: flex; align-items: flex-start; gap: 0.6rem;
cursor: pointer; font-size: 0.9rem; line-height: 1.45;
font-weight: 400; color: var(--texte);
}
.case-cgv input[type=checkbox] {
flex: 0 0 auto; width: 1.05rem; height: 1.05rem;
margin-top: 0.12rem; cursor: pointer; accent-color: var(--accent);
}
.case-cgv a { color: var(--accent); text-decoration: underline; }
/* ---------- Autocomplétion des villes (base officielle) ---------- */
/* Sommaire des longs formulaires : pastilles de navigation vers les sections. */
.sommaire-form { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.1rem; }
.sommaire-form button {
padding: 0.3rem 0.85rem; border-radius: 999px; cursor: pointer;
background: var(--carte); border: 1px solid var(--bord); color: var(--texte);
font-size: 0.85rem; transition: border-color .15s, background .15s;
}
.sommaire-form button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--carte)); }
.autocomplete { position: relative; }
.autocomplete input {
width: 100%;
box-sizing: border-box;
padding: 0.55rem 0.7rem;
border: 1px solid var(--bord);
border-radius: 10px;
font-size: 0.95rem;
font-family: inherit;
background: var(--carte);
color: var(--texte);
}
.autocomplete input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.autocomplete-liste {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
/* Au-dessus des calques Leaflet (z-index ≤ 800) pour ne pas passer derrière une carte. */
z-index: 1200;
background: var(--carte);
border: 1px solid var(--bord);
border-radius: 10px;
box-shadow: var(--ombre-forte);
z-index: 300;
max-height: 280px;
overflow-y: auto;
}
.autocomplete-item {
display: flex;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: 0.55rem 0.85rem;
background: none;
border: none;
border-bottom: 1px solid var(--bord);
color: var(--texte);
font: inherit;
font-size: 0.92rem;
text-align: left;
cursor: pointer;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.actif { background: color-mix(in srgb, var(--accent) 14%, var(--carte)); }
.autocomplete-cp { color: var(--accent); font-weight: 700; }
/* Boutons de défilement haut / bas, fixes en bas à droite */
.boutons-defilement {
position: fixed;
right: 1.1rem;
bottom: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
z-index: 950;
}
.boutons-defilement button {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--bord);
background: var(--carte);
color: var(--accent);
font-size: 1.05rem;
cursor: pointer;
box-shadow: var(--ombre-forte);
transition: transform 0.15s ease, background 0.15s ease;
}
.boutons-defilement button:hover {
transform: translateY(-2px);
background: color-mix(in srgb, var(--accent) 18%, var(--carte));
}
/* Slider (rayon d'action) assorti au thème */
input[type="range"] {
width: 100%;
accent-color: var(--accent);
cursor: pointer;
}
/* Carte des zones d'activité (page Paramétrages agent) : fond neutre, France seule */
#carte-zones.leaflet-container,
#carte-zones .leaflet-container {
background: var(--carte);
}
/* Conseils de prix selon l'état du bien (page Proposer mon bien) */
.conseils-prix {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0.2rem 0 0.6rem;
}
.ligne-conseil {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
padding: 0.5rem 0.8rem;
border: 1px solid var(--bord);
border-radius: 10px;
background: var(--carte);
}
.ligne-conseil .fourchette {
color: var(--gris);
font-size: 0.85rem;
}
.ligne-conseil.retenue {
border-color: var(--vert);
background: color-mix(in srgb, var(--vert) 10%, var(--carte));
}
/* Puce de ville supprimable */
.chip-ville {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.chip-retirer {
width: 20px;
height: 20px;
border: none;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 30%, transparent);
color: inherit;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.chip-retirer:hover { background: var(--rouge); color: white; }
/* ---------- Groupes de boutons uniformes ---------- */
.groupe-boutons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
.groupe-boutons .btn { min-width: 150px; text-align: center; }
/* Boutons d'action uniformes dans les tableaux */
.tableau .btn-petit { min-width: 130px; text-align: center; }
/* ------------------------------------------------------------------
Boutons de réordonnancement (monter / descendre)
------------------------------------------------------------------
Carrés et compacts : la largeur minimale de 130px des boutons de
tableau étirait une flèche seule en pastille vide. La flèche est un
SVG à trait épais — le caractère « ↑ » rend un glyphe fin, presque
invisible sur fond sombre. */
.groupe-ordre { display: inline-flex; gap: 6px; }
.tableau .btn-ordre, .btn-ordre {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
min-width: 40px;
padding: 0;
border-radius: 11px;
border: 1px solid var(--bord);
background: var(--carte);
color: var(--accent);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn-ordre svg { width: 20px; height: 20px; display: block; }
.btn-ordre:hover:not(:disabled) {
background: color-mix(in srgb, var(--accent) 14%, var(--carte));
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: var(--ombre);
}
.btn-ordre:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn-ordre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Bout de liste : le bouton reste en place pour ne pas décaler la colonne. */
.btn-ordre:disabled { opacity: 0.3; cursor: not-allowed; }
/* Bandeau de section (image + texte + bouton) dans Mon suivi */
.section-banniere {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1.25rem;
align-items: center;
background: var(--carte);
border: 1px solid var(--bord);
border-left: 4px solid var(--accent);
border-radius: 14px;
padding: 1.1rem 1.35rem;
margin-bottom: 1rem;
box-shadow: var(--ombre);
}
.section-banniere img {
width: 110px;
height: 90px;
object-fit: cover;
border-radius: 10px;
display: block;
}
.section-banniere h3 { margin: 0 0 0.35rem; }
.section-banniere p { margin: 0; color: var(--gris); line-height: 1.5; font-size: 0.92rem; }
.section-banniere p + p { margin-top: 0.45rem; }
/* Colonne d'actions d'une bannière de section (ex. bascule recherches / biens) */
.actions-banniere {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: stretch;
}
.actions-banniere .btn {
white-space: nowrap;
text-align: center;
}
@media (max-width: 700px) {
.section-banniere { grid-template-columns: 1fr; text-align: center; }
.section-banniere img { width: 100%; height: 140px; }
}
/* ==================================================================
Cartes et sections
================================================================== */
.card {
background: var(--carte);
border: 1px solid var(--bord);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1.25rem;
box-shadow: var(--ombre);
}
.card h2, .card h3 { margin-top: 0; }
.duo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
margin-top: 2rem;
}
.duo .card { text-align: center; padding: 2rem; }
.duo .card .emoji { font-size: 2.5rem; }
/* ==================================================================
Formulaires
================================================================== */
.form-section {
background: var(--carte);
border: 1px solid var(--bord);
border-left: 4px solid var(--accent);
border-radius: 14px;
padding: 1.25rem 1.5rem;
margin-bottom: 1rem;
box-shadow: var(--ombre);
}
.form-section > h3 {
margin: 0 0 1rem;
color: var(--accent);
font-size: 1.05rem;
border-bottom: 1px solid var(--bord);
padding-bottom: 0.55rem;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.9rem 1.25rem;
}
.form-grid.wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
/* justify-content:flex-end : les zones de saisie d'une même ligne restent
alignées entre elles même si un titre de champ passe sur deux lignes. */
.champ { display: flex; flex-direction: column; gap: 0.3rem; justify-content: flex-end; }
.champ.pleine-largeur, .pleine-largeur { grid-column: 1 / -1; }
/* ------------------------------------------------------------------
Type de transaction : liste déroulante + texte explicatif à droite
------------------------------------------------------------------
Le texte est posé À CÔTÉ du choix, et non dessous : sous la liste, il
allongeait la cellule de la grille et désalignait les champs voisins
de la même rangée.
La largeur est bornée pour que l'explication tienne sur deux lignes
sans devenir une bande de texte illisible sur grand écran. */
.champ-transaction { grid-column: 1 / -1; }
.transaction-ligne {
display: flex;
align-items: center;
gap: 1.25rem;
}
/* Sélecteur préfixé par « .champ » pour l'emporter sur la règle
« .champ select { width: 100% } », plus spécifique, qui étirerait la liste
sur toute la rangée et chasserait l'explication hors de l'écran. */
.champ .transaction-ligne > select { flex: 0 0 240px; width: 240px; max-width: 240px; }
.transaction-aide {
margin: 0;
flex: 1 1 auto;
max-width: 78ch;
color: var(--gris);
font-size: 0.9rem;
line-height: 1.5;
}
/* Petit écran : le texte passe sous la liste, qui reprend toute la largeur. */
@media (max-width: 720px) {
.transaction-ligne { flex-direction: column; align-items: stretch; gap: 0.45rem; }
.champ .transaction-ligne > select { flex: 1 1 auto; width: 100%; max-width: none; }
.transaction-aide { max-width: none; }
}
/* Titre du champ : doré, en flex pour que le (i) reste à droite du texte
sans passer à la ligne — et bien distinct du texte saisi dans le champ.
« > » : ne s'applique qu'au titre direct du champ, pas aux cases à cocher. */
.champ > label {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.3px;
color: var(--accent-2);
}
.champ > label .infobulle { flex-shrink: 0; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris); opacity: 0.65; }
.champ input, .champ select, .champ textarea,
input.saisie, select.saisie, textarea.saisie {
width: 100%;
box-sizing: border-box;
padding: 0.55rem 0.7rem;
border: 1px solid var(--bord);
border-radius: 10px;
font-size: 0.95rem;
font-family: inherit;
background: var(--carte);
color: var(--texte);
transition: border-color 0.15s, box-shadow 0.15s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus,
input.saisie:focus, select.saisie:focus, textarea.saisie:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.cases {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.5rem;
}
.case-cocher {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.48rem 0.7rem;
border: 1px solid var(--bord);
border-radius: 10px;
cursor: pointer;
font-size: 0.92rem;
background: var(--carte);
color: var(--texte);
user-select: none;
transition: border-color 0.15s, background 0.15s;
}
.case-cocher:hover { border-color: var(--accent); }
.case-cocher input { accent-color: var(--accent); width: 16px; height: 16px; }
.case-cocher.cochee {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, var(--carte));
font-weight: 600;
}
/* ==================================================================
Boutons
================================================================== */
.btn {
display: inline-block;
padding: 0.6rem 1.4rem;
border-radius: 10px;
border: none;
font-size: 0.98rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
font-family: inherit;
transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-principal {
background: var(--degrade);
color: white;
box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn-principal:hover:not([disabled]) { box-shadow: var(--ombre-forte); transform: translateY(-1px); }
.btn-secondaire {
background: var(--carte);
color: var(--accent);
border: 1px solid var(--accent);
}
.btn-secondaire:hover { background: color-mix(in srgb, var(--accent) 10%, var(--carte)); }
.btn-danger { background: var(--carte); color: var(--rouge); border: 1px solid var(--rouge); }
.btn-danger:hover { background: var(--rouge-fond); }
.btn-petit { padding: 0.32rem 0.8rem; font-size: 0.85rem; }
/* ==================================================================
Badges
================================================================== */
.badge {
display: inline-block;
padding: 0.16rem 0.62rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
}
.badge-bleu { background: color-mix(in srgb, var(--accent) 14%, var(--carte)); color: var(--accent); }
.badge-vert { background: var(--vert-fond); color: var(--vert); }
.badge-orange { background: var(--orange-fond); color: var(--orange); }
.badge-gris { background: var(--gris-clair); color: var(--gris); }
.badge-rouge { background: var(--rouge-fond); color: var(--rouge); }
/* ==================================================================
Tableaux
================================================================== */
.tableau { width: 100%; border-collapse: collapse; background: var(--carte); border-radius: 12px; overflow: hidden; }
.tableau th {
text-align: left;
padding: 0.65rem 0.85rem;
background: var(--gris-clair);
font-size: 0.88rem;
/* En-têtes de colonnes : majuscules, couleur du texte principal (blanc en
thème sombre) — règle commune à tous les tableaux du site. */
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--texte);
border-bottom: 2px solid var(--bord);
}
/* Légère séparation entre les titres de colonnes */
.tableau th + th { border-left: 1px solid var(--bord); }
.tableau td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--bord); font-size: 0.92rem; }
.tableau tr:hover td { background: color-mix(in srgb, var(--accent) 4%, var(--carte)); }
/* Tableau large : défilement horizontal plutôt que débordement de la page. */
.tableau-defilant { width: 100%; overflow-x: auto; margin-top: 1rem; }
.tableau-defilant .tableau { min-width: 760px; }
/* En-tête cliquable d'une section repliable (espace annonces de l'agent). */
.entete-section {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.entete-section h2 { font-size: 1.15rem; }
/* ==================================================================
Annonces
================================================================== */
.grille-annonces {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.25rem;
}
/* Toutes les cartes de liste (annonces et recherches) partagent le même
agencement : visuel, contenu variable, puis informations de publication et
bouton d'action alignés en bas, quelle que soit la hauteur du contenu. */
.carte-annonce {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: var(--carte);
border: 1px solid var(--bord);
border-radius: 16px;
overflow: hidden;
transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
box-shadow: var(--ombre);
/* La carte se comporte comme un seul bouton : main partout, jamais le
curseur de sélection de texte, et pas de sélection accidentelle au clic.
« cursor » étant héritée, tous les textes de la carte suivent. */
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.carte-annonce:hover {
box-shadow: var(--ombre-forte);
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--accent) 45%, var(--bord));
}
.carte-annonce-visuel {
position: relative;
flex-shrink: 0;
background: var(--degrade);
height: 120px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
.carte-annonce-transaction {
position: absolute;
top: 0.6rem;
left: 0.6rem;
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
z-index: 2;
}
/* Étiquettes purement informatives posées sur le visuel : elles ne doivent pas
intercepter le clic, sinon la carte n'est plus cliquable à cet endroit. */
.carte-annonce-transaction,
.carte-annonce-visuel .badge-externe,
.carte-annonce-visuel .badge-match,
.compteur-carrousel { pointer-events: none; }
.carte-annonce-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.fleche-carrousel {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: rgba(15, 23, 42, 0.55);
color: white;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0 3px;
transition: background 0.15s;
}
.fleche-carrousel:hover { background: rgba(15, 23, 42, 0.85); }
.fleche-carrousel.gauche { left: 0.5rem; }
.fleche-carrousel.droite { right: 0.5rem; }
.compteur-carrousel {
position: absolute;
bottom: 0.5rem;
right: 0.6rem;
z-index: 3;
background: rgba(15, 23, 42, 0.65);
color: white;
font-size: 0.72rem;
font-weight: 600;
padding: 0.12rem 0.5rem;
border-radius: 999px;
}
/* Ces deux badges servent à la fois en étiquette posée sur le visuel d'une carte
et en badge normal dans un tableau : le positionnement absolu n'est donc appliqué
que dans le visuel d'une carte, sinon ils flotteraient hors de leur cellule. */
.badge-match { background: rgba(15, 23, 42, 0.82); color: #fde68a; }
.badge-externe { background: rgba(15, 23, 42, 0.82); color: #a5f3fc; }
.carte-annonce-visuel .badge-match {
position: absolute;
bottom: 0.6rem;
left: 0.6rem;
z-index: 2;
}
.carte-annonce-visuel .badge-externe {
position: absolute;
top: 0.6rem;
right: 0.6rem;
z-index: 2;
}
/* ---------- Info-bulles (i) ---------- */
.infobulle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-left: 0.35rem;
cursor: help;
outline: none;
}
.infobulle-icone {
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.infobulle-demo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
font-style: italic;
font-family: Georgia, serif;
}
.infobulle-texte {
position: absolute;
bottom: 135%;
left: 50%;
transform: translateX(-50%) translateY(4px);
width: max-content;
max-width: 260px;
background: #0f172a;
color: #f1f5f9;
text-align: left;
font-size: 0.8rem;
font-weight: 400;
line-height: 1.4;
padding: 0.55rem 0.7rem;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s, transform 0.15s;
z-index: 200;
pointer-events: none;
white-space: normal;
}
.infobulle-texte::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #0f172a;
}
.infobulle:hover .infobulle-texte,
.infobulle:focus .infobulle-texte {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Rapproche la bulle du bord pour ne pas déborder à gauche/droite */
.champ label .infobulle-texte { left: 0; transform: translateX(0) translateY(4px); }
.champ label .infobulle:hover .infobulle-texte,
.champ label .infobulle:focus .infobulle-texte { transform: translateX(0) translateY(0); }
.champ label .infobulle-texte::after { left: 8px; }
/* ---------- Étiquettes énergie (DPE / GES) ---------- */
.etiquettes-duo {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin-bottom: 0.5rem;
}
.doc-edition {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
padding: 0.5rem 0;
border-bottom: 1px solid var(--bord);
}
.doc-edition input {
flex: 1;
min-width: 160px;
padding: 0.4rem 0.6rem;
border: 1px solid var(--bord);
border-radius: 8px;
background: var(--carte);
color: var(--texte);
font-family: inherit;
font-size: 0.9rem;
}
.etiquette-energie { min-width: 210px; }
.etiquette-titre { font-size: 0.85rem; margin-bottom: 0.35rem; color: var(--gris); }
.etiquette-echelle {
display: flex;
gap: 3px;
align-items: stretch;
}
.etiquette-barreau {
position: relative;
flex: 1;
text-align: center;
padding: 0.35rem 0;
font-weight: 700;
font-size: 0.82rem;
color: #1a1a1a;
border-radius: 4px;
opacity: 0.45;
transition: opacity 0.15s;
}
.etiquette-barreau.actif {
opacity: 1;
outline: 2px solid var(--texte);
transform: scaleY(1.35);
z-index: 1;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.etiquette-fleche {
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
font-size: 0.6rem;
color: var(--texte);
}
/* Colonne : le contenu variable pousse le pied et l'action vers le bas. */
.carte-annonce-corps {
display: flex;
flex-direction: column;
flex: 1;
padding: 1rem 1.1rem 1.1rem;
}
.carte-annonce-prix { font-size: 1.22rem; font-weight: 800; color: var(--accent); }
/* Variante pour un texte long (fourchette de budget d'une recherche). */
.carte-annonce-prix.prix-long { font-size: 1.02rem; line-height: 1.35; }
.carte-annonce-titre { font-weight: 600; margin: 0.2rem 0; }
.carte-annonce-infos { color: var(--gris); font-size: 0.9rem; }
.carte-annonce-lieu { font-size: 0.9rem; margin: 0.3rem 0 0.5rem; }
/* margin-top:auto = toujours collé en bas, même sur une carte peu remplie. */
.carte-annonce-pied {
margin-top: auto;
padding-top: 0.6rem;
border-top: 1px solid var(--bord);
color: var(--gris);
font-size: 0.8rem;
}
/* Bouton d'action, tout en bas de la carte. */
.carte-annonce-action { display: flex; margin-top: 0.7rem; }
.carte-annonce-action .btn { width: 100%; text-align: center; justify-content: center; }
/* La carte entière reste cliquable : le lien d'action est étiré en surimpression.
Les commandes du visuel (cœur, flèches du carrousel) sont en z-index 3 et
restent donc accessibles par-dessus. */
.carte-annonce-action .btn::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Le cœur des favoris et l'étiquette « Particulier » occupent le même coin :
on décale l'étiquette quand les deux sont affichés. */
.carte-annonce-visuel:has(.bouton-favori) .badge-externe { right: 3.1rem; }
/* ==================================================================
Fiche bien
================================================================== */
.fiche-bien {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 1.25rem;
align-items: start;
}
@media (max-width: 900px) {
.fiche-bien { grid-template-columns: 1fr; }
}
.carte-bien {
width: 100%;
height: 420px;
border: none;
border-radius: 10px;
margin-top: 0.5rem;
}
.galerie {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.6rem;
margin-bottom: 1rem;
}
.galerie-item { margin: 0; }
.galerie img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--bord);
transition: transform 0.15s, box-shadow 0.15s;
}
.galerie img:hover { transform: scale(1.03); box-shadow: var(--ombre-forte); }
.galerie-item figcaption {
font-size: 0.8rem;
color: var(--gris);
margin-top: 0.25rem;
line-height: 1.3;
}
.galerie-item figcaption b { color: var(--texte); }
/* Vidéos jointes à une annonce (fiche du bien). */
.galerie-videos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0.6rem;
margin-bottom: 1rem;
}
.galerie-video { margin: 0; }
.galerie-video video {
width: 100%;
max-height: 320px;
border-radius: 10px;
border: 1px solid var(--bord);
background: #000;
}
.galerie-video figcaption {
font-size: 0.8rem;
color: var(--gris);
margin-top: 0.25rem;
line-height: 1.3;
}
.galerie-video figcaption b { color: var(--texte); }
/* Lecteur YouTube intégré à la fiche du bien. */
.video-youtube {
margin: 0.9rem 0 0;
max-width: 720px;
}
.video-youtube iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: 1px solid var(--bord);
border-radius: 10px;
background: #000;
}
.video-youtube figcaption {
font-size: 0.8rem;
color: var(--gris);
margin-top: 0.25rem;
}
/* Boutons des autres liens externes (visite virtuelle, site...). */
.liens-bien {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.9rem;
}
/* Tableau de saisie des liens externes (formulaires de bien). */
.tableau-liens .col-type { width: 200px; }
.tableau-liens .col-titre { width: 220px; }
.tableau-liens .col-action { width: 1%; white-space: nowrap; }
.tableau-liens select,
.tableau-liens input {
width: 100%;
box-sizing: border-box;
}
.liens-note {
color: var(--gris);
font-size: 0.88rem;
margin: 0 0 0.7rem;
}
@media (max-width: 720px) {
.tableau-liens .col-type { width: 130px; }
.tableau-liens .col-titre { display: none; }
}
.encart-viager {
background: var(--orange-fond);
border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
border-radius: 12px;
padding: 0.9rem 1.1rem;
margin-bottom: 1rem;
}
/* ==================================================================
Divers
================================================================== */
.alerte-succes {
background: var(--vert-fond);
border: 1px solid color-mix(in srgb, var(--vert) 35%, transparent);
color: var(--vert);
padding: 1rem 1.25rem;
border-radius: 12px;
margin-bottom: 1rem;
}
/* Espace entre les boutons d'action d'un message de succès */
.alerte-succes .btn { margin: 0.35rem 0.7rem 0 0; }
/* ---------- Boîte de confirmation (remplace window.confirm) ---------- */
.voile-modal {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
}
.boite-confirm {
background: var(--carte);
color: var(--texte);
border: 1px solid var(--bord);
border-radius: 14px;
padding: 1.6rem 1.8rem;
max-width: 420px;
width: calc(100% - 2rem);
text-align: center;
box-shadow: var(--ombre-forte);
animation: apparition-boite 0.15s ease-out;
}
@keyframes apparition-boite {
from { transform: scale(0.94); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.boite-confirm-icone { font-size: 2.1rem; line-height: 1; }
.boite-confirm h3 { margin: 0.5rem 0 0.3rem; }
.boite-confirm p { color: var(--gris); margin: 0 0 1.2rem; line-height: 1.5; }
.boite-confirm-actions {
display: flex;
gap: 0.6rem;
justify-content: center;
flex-wrap: wrap;
}
/* Excuses pour une langue partiellement traduite : le texte y est plus long
que dans une confirmation, et il faut lui laisser de la place. Le sens de
lecture est porté par l'attribut dir, pour l'arabe notamment. */
.boite-traduction {
max-width: 560px;
text-align: start;
}
.boite-traduction .boite-confirm-icone,
.boite-traduction h3 { text-align: center; }
.boite-traduction p {
color: var(--texte);
line-height: 1.65;
text-align: start;
}
.alerte-info {
background: color-mix(in srgb, var(--accent) 10%, var(--carte));
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
color: var(--texte);
padding: 1rem 1.25rem;
border-radius: 12px;
margin-bottom: 1rem;
}
/* Popup modal (ex. accès agent bloqué). */
.modal-fond {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, 0.5);
padding: 1rem;
}
.modal-boite {
background: var(--carte);
border: 1px solid var(--bord);
border-radius: 16px;
box-shadow: var(--ombre-forte);
padding: 1.6rem 1.8rem;
max-width: 420px; width: 100%;
text-align: center;
}
.modal-boite h3 { margin: 0.4rem 0 0.6rem; }
.modal-boite p { color: var(--gris); line-height: 1.5; margin-bottom: 1.2rem; }
.modal-icone { font-size: 2.6rem; line-height: 1; }
/* Menu ☰ (burger) : paramètres + langue, en haut à droite. */
.menu-burger { position: relative; }
.burger-bouton {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: transparent;
border: 1px solid color-mix(in srgb, var(--topbar-texte) 35%, transparent);
border-radius: 10px;
color: var(--topbar-texte);
cursor: pointer; transition: border-color .15s, background .15s;
}
.burger-bouton:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.burger-barres, .burger-barres::before, .burger-barres::after {
display: block; width: 20px; height: 2px;
background: currentColor; border-radius: 2px;
}
.burger-barres { position: relative; }
.burger-barres::before { content: ""; position: absolute; top: -6px; left: 0; }
.burger-barres::after { content: ""; position: absolute; top: 6px; left: 0; }
.burger-voile { position: fixed; inset: 0; z-index: 90; }
.burger-menu {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 100;
min-width: 210px; max-height: 75vh; overflow-y: auto;
background: var(--carte);
border: 1px solid var(--bord);
border-radius: 14px;
box-shadow: var(--ombre-forte);
padding: 6px;
display: flex; flex-direction: column;
}
[dir="rtl"] .burger-menu { right: auto; left: 0; }
.burger-item {
display: block; padding: 10px 12px;
border-radius: 9px; text-decoration: none;
color: var(--texte); font-weight: 600;
white-space: nowrap;
}
.burger-item:hover { background: var(--gris-clair); }
.burger-titre {
padding: 8px 12px 4px; font-size: 0.78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px; color: var(--gris);
}
.burger-separateur { height: 1px; background: var(--bord); margin: 6px 4px; }
/* Les onglets de navigation ne s'affichent dans le menu ☰ que sur petit écran. */
.burger-nav { display: none; flex-direction: column; }
/* Sous 900px : la barre de navigation passe dans le menu ☰ (plus de retour à la ligne). */
@media (max-width: 900px) {
.topbar nav { display: none; }
.burger-nav { display: flex; }
}
/* Très petits écrans : on allège la zone de droite pour éviter les débordements. */
@media (max-width: 560px) {
.badge-role { display: none; }
.topbar { gap: 0.75rem; padding: 0.6rem 1rem; }
}
/* Choix du thème (page paramètres). */
.choix-themes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choix-theme {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.55rem 0.9rem;
background: var(--carte); border: 1px solid var(--bord);
border-radius: 999px; color: var(--texte); font-weight: 600;
cursor: pointer; transition: border-color .12s, background .12s;
}
.choix-theme:hover { border-color: var(--accent); background: var(--gris-clair); }
.theme-pastille { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
/* Cloche de notifications dans la barre du haut. */
.cloche-notif {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.25rem; text-decoration: none;
width: 38px; height: 38px; border-radius: 50%;
transition: background .15s;
}
.cloche-notif:hover { background: color-mix(in srgb, var(--topbar-texte) 15%, transparent); }
.cloche-badge {
position: absolute; top: 2px; right: 0;
min-width: 17px; height: 17px; padding: 0 4px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; line-height: 1;
color: #fff; background: #e11d48;
border-radius: 999px;
}
/* Liste des notifications (page /notifications). */
.liste-notifs { display: flex; flex-direction: column; gap: 0.5rem; }
.ligne-notif {
display: flex; align-items: center; gap: 0.9rem;
width: 100%; text-align: start;
background: var(--carte); border: 1px solid var(--bord);
border-radius: 12px; padding: 0.85rem 1rem;
cursor: pointer; transition: background .12s, border-color .12s;
/* La ligne était un