/* ============================================================
   Gomaloc — design system
   Palette "verdigris" (vert-de-gris des toits parisiens) + papier,
   typographie Fraunces (titres) / Inter (texte), signature clé.
   ============================================================ */

/* ------------------------------------------------------------
   Polices auto-hébergées (Fraunces, Inter)
   ------------------------------------------------------------
   Servies depuis /assets/fonts/ et non depuis fonts.googleapis.com : plus aucune requête
   sortante vers Google, donc plus aucune transmission de l'adresse IP du visiteur à un tiers
   au simple affichage d'une page (retrait effectué le 27/07/2026, en même temps que gtag.js).
   Les deux familles sont sous licence SIL Open Font, qui autorise explicitement
   l'auto-hébergement — voir fraunces-OFL.txt et inter-OFL.txt à côté des fichiers.

   Ce sont des polices VARIABLES : un seul fichier par sous-ensemble couvre toute la plage de
   graisses (`font-weight: 400 700`). Inutile donc de télécharger un fichier par graisse — et
   c'est aussi pourquoi les graisses intermédiaires restent disponibles si le design évolue.

   Deux sous-ensembles seulement : `latin` (couvre le français, y compris œ et les accents) et
   `latin-ext` (noms d'Europe centrale saisis par les bailleurs). Les jeux vietnamien, grec et
   cyrillique servis par Google ont été écartés : inutiles ici, et autant d'octets en moins.
   `unicode-range` laisse le navigateur ne télécharger que le fichier dont il a besoin.

   `font-display: swap` : le texte s'affiche immédiatement dans la police système, puis bascule
   — jamais de page blanche le temps du chargement.
   ------------------------------------------------------------ */

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Couleurs */
    --couleur-fond: #FBFAF6;
    --couleur-fond-alt: #F1ECE2;
    --couleur-texte: #1B2622;
    --couleur-texte-att: #5C6D63;
    --couleur-primaire: #1F5C4A;
    --couleur-primaire-fonce: #143F33;
    --couleur-primaire-claire: #DEEAE3;
    --couleur-accent: #AE6B36;
    --couleur-accent-claire: #F3E4D2;
    --couleur-ligne: #E4DFD2;
    --couleur-danger: #A23B2E;
    --couleur-danger-fond: #FBEAE7;
    --couleur-succes: #1F5C4A;
    --couleur-succes-fond: #E1EEE6;

    /* Rayons & ombres */
    --rayon: 10px;
    --rayon-lg: 18px;
    --ombre-carte: 0 1px 2px rgba(27, 38, 34, .05), 0 10px 30px -14px rgba(27, 38, 34, .18);

    /* Typographie */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-corps: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Alias conservés pour compatibilité (anciennes variables encore référencées) */
    --rayon-compat: var(--rayon);
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-corps);
    color: var(--couleur-texte);
    background: var(--couleur-fond);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--couleur-texte);
}

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-top: 2.2em; }
h3 { font-size: 1.15rem; }

a { color: var(--couleur-primaire); }

.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

:focus-visible {
    outline: 2px solid var(--couleur-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================================
   Header
   ============================================================ */

.site-header { border-bottom: 1px solid var(--couleur-ligne); padding: 18px 0; background: var(--couleur-fond); }
.site-header .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--couleur-primaire-fonce); text-decoration: none; }
.nav-principale { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.nav-principale a {
    margin-left: 20px; text-decoration: none; color: var(--couleur-texte);
    font-size: 0.95rem; position: relative; padding: 4px 0;
}
.nav-principale a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--couleur-accent); transform: scaleX(0); transform-origin: left;
    transition: transform .15s ease;
}
.nav-principale a:not(.btn):hover::after { transform: scaleX(1); }

.btn-cta-header {
    box-shadow: 0 1px 3px rgba(31, 92, 74, .22);
}
.btn-cta-header-fleche { display: inline-block; transition: transform .15s ease; }
.btn-cta-header:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(31, 92, 74, .3);
}
.btn-cta-header:hover .btn-cta-header-fleche { transform: translateX(3px); }

.menu-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 0;
}
.menu-toggle span { display: block; width: 100%; height: 2px; background: var(--couleur-texte); transition: transform .2s ease, opacity .2s ease; }
.menu-toggle--ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle--ouvert span:nth-child(2) { opacity: 0; }
.menu-toggle--ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Boutons
   ============================================================ */

.btn {
    display: inline-block; padding: 11px 22px; border-radius: var(--rayon); text-decoration: none;
    font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--couleur-primaire); color: #fff; }
.btn-primary:hover { background: var(--couleur-primaire-fonce); }
.btn-secondary { background: #fff; color: var(--couleur-primaire-fonce); border: 1px solid var(--couleur-primaire); }
.btn-secondary:hover { background: var(--couleur-primaire-claire); }
.btn-accent { background: var(--couleur-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-accent:hover { filter: brightness(0.92); }
.btn-large { padding: 15px 30px; font-size: 1.05rem; }

.btn-lien { color: var(--couleur-primaire); text-decoration: underline; font-size: 0.85rem; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.btn-lien-danger {
    background: none; border: none; color: var(--couleur-danger); padding: 0; margin-top: 10px;
    cursor: pointer; text-decoration: underline; font-size: 0.85rem; font-family: inherit;
}

/* ============================================================
   Hero / bénéfices / FAQ
   ============================================================ */

.hero { text-align: center; padding: 76px 0 56px; }
.chapo { font-size: 1.2rem; color: var(--couleur-texte-att); max-width: 620px; margin-left: auto; margin-right: auto; }
.eyebrow {
    font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--couleur-accent); margin: 0 0 10px;
}
.reassurance { color: var(--couleur-texte-att); font-size: 0.9rem; margin-top: 16px; }

.etapes { padding: 64px 0; text-align: center; border-top: 1px solid var(--couleur-ligne); border-bottom: 1px solid var(--couleur-ligne); margin: 24px 0; }
.etapes h2 { margin-top: 0; }
.grille-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-top: 40px; text-align: left; }
.etape { position: relative; padding-left: 4px; }
.numero-etape {
    display: inline-block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
    color: var(--couleur-primaire); background: var(--couleur-primaire-claire);
    width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 999px; margin-bottom: 14px;
}
.etape h3 { margin: 0 0 8px; }
.etape p { color: var(--couleur-texte-att); margin: 0; }

.lien-en-savoir-plus { display: inline-block; margin-top: 10px; font-size: 0.88rem; text-decoration: none; font-weight: 600; }
.lien-en-savoir-plus:hover { text-decoration: underline; }

.segments { text-align: center; padding: 56px 0; }
.segments h2 { margin-top: 0; }
.liste-segments { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.tag-segment {
    background: var(--couleur-fond-alt); border: 1px solid var(--couleur-ligne); color: var(--couleur-texte);
    padding: 8px 18px; border-radius: 999px; font-size: 0.9rem;
}

.bande-cta {
    text-align: center; background: var(--couleur-primaire); color: #fff; padding: 64px 24px;
    border-radius: var(--rayon-lg); margin: 64px 0;
}
.bande-cta h2 { color: #fff; margin-top: 0; }
.bande-cta p { color: #DCEAE4; margin-bottom: 28px; }
.bande-cta .btn-primary { background: #fff; color: var(--couleur-primaire-fonce); }
.bande-cta .btn-primary:hover { background: #EFEAE0; }

.benefices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 44px 0; }
.benefice {
    background: #fff; padding: 24px; border-radius: var(--rayon-lg); border: 1px solid var(--couleur-ligne);
    box-shadow: var(--ombre-carte);
}
.benefice h2 { margin-top: 0; font-size: 1.15rem; }
.benefice-icone {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: 12px; background: var(--couleur-primaire-claire); color: var(--couleur-primaire);
    margin-bottom: 14px;
}
.benefices-section { margin: 56px 0; }
.benefices-section .benefices { margin-top: 28px; }

/* Boucle mensuelle (accueil) : le mois type, avant/après. La colonne « Sans Gomaloc » est
   volontairement terne et barrée d'un filet gris ; la colonne « Avec » porte la couleur de la
   marque. Le contraste visuel dit l'argument avant même la lecture. */
.boucle-mensuelle { margin: 56px 0; text-align: center; }
.boucle-mensuelle .eyebrow { text-align: center; }
.boucle-mensuelle h2 { margin-top: 0; }
.boucle-comparaison {
    display: grid; grid-template-columns: 1fr 1.35fr; gap: 20px;
    margin: 32px auto 0; max-width: 940px; text-align: left;
}
.boucle-avant, .boucle-apres { border-radius: var(--rayon-lg); padding: 26px 28px; }
.boucle-avant { background: var(--couleur-fond-alt); border: 1px solid var(--couleur-ligne); }
.boucle-apres { background: #fff; border: 1px solid var(--couleur-primaire); box-shadow: var(--ombre-carte); }
.boucle-avant h3, .boucle-apres h3 { margin: 0 0 14px; font-size: 1.05rem; }
.boucle-avant h3 { color: var(--couleur-texte-att); }
.boucle-apres h3 { color: var(--couleur-primaire-fonce); }
.boucle-avant ul { margin: 0; padding-left: 20px; color: var(--couleur-texte-att); }
.boucle-avant li { margin-bottom: 8px; }
.boucle-etapes { list-style: none; margin: 0; padding: 0; counter-reset: boucle; }
.boucle-etapes li {
    position: relative; padding: 0 0 16px 42px; counter-increment: boucle; line-height: 1.55;
}
.boucle-etapes li:last-child { padding-bottom: 0; }
.boucle-etapes li::before {
    content: counter(boucle); position: absolute; left: 0; top: 0;
    width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 999px;
    background: var(--couleur-primaire-claire); color: var(--couleur-primaire);
    font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
}
.boucle-quand {
    display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--couleur-primaire); margin-bottom: 2px;
}
/* « 1er » s'abrège 1ᵉʳ, jamais 1ᴱᴿ : l'exposant ne doit pas hériter des capitales du libellé. */
.boucle-quand sup { text-transform: none; letter-spacing: 0; }
.boucle-conclusion { margin: 24px auto 0; max-width: 640px; color: var(--couleur-texte-att); font-size: 0.95rem; }
@media (max-width: 720px) {
    .boucle-comparaison { grid-template-columns: 1fr; }
}

/* Réassurance sur les données (accueil), juste avant l'appel à l'action final. Chaque carte
   renvoie à un engagement écrit (CGU, mentions légales) : voir le commentaire dans accueil.php. */
.reassurance-donnees { margin: 64px 0; text-align: center; }
.reassurance-donnees .eyebrow { text-align: center; }
.reassurance-donnees h2 { margin-top: 0; max-width: 680px; margin-left: auto; margin-right: auto; }
.grille-reassurance {
    list-style: none; padding: 0; margin: 32px 0 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; text-align: left;
}
.grille-reassurance li {
    background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon);
    padding: 18px 20px 18px 48px; position: relative;
}
.grille-reassurance li::before {
    content: ""; position: absolute; left: 18px; top: 21px; width: 16px; height: 16px;
    border-radius: 999px; background: var(--couleur-primaire-claire);
    box-shadow: inset 0 0 0 4px var(--couleur-primaire-claire), inset 0 0 0 16px var(--couleur-primaire);
}
.grille-reassurance strong { display: block; margin-bottom: 4px; }
.grille-reassurance span { color: var(--couleur-texte-att); font-size: 0.93rem; line-height: 1.5; }

/* Section « Pourquoi changer » (accueil) : les échéances qu'un tableur ne signale pas.
   Filet terracotta à gauche plutôt qu'un fond rouge ou une icône d'alerte : on expose un coût
   réel, on ne cherche pas à faire peur. Les cartes ne sont pas cliquables en entier — chacune
   porte un lien vers l'outil qui chiffre le cas, et c'est lui qui doit attirer le clic. */
.section-couts { margin: 64px 0; text-align: center; }
.section-couts .eyebrow { text-align: center; }
.section-couts h2 { margin-top: 0; }
.couts-intro { color: var(--couleur-texte-att); max-width: 640px; margin: 12px auto 36px; }
.grille-couts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; text-align: left; }
.carte-cout {
    background: #fff; border: 1px solid var(--couleur-ligne); border-left: 3px solid var(--couleur-accent);
    border-radius: var(--rayon); padding: 22px 24px;
}
.carte-cout h3 { margin: 0 0 10px; font-size: 1.05rem; }
.carte-cout p { color: var(--couleur-texte-att); margin: 0; font-size: 0.94rem; }
.couts-conclusion { margin: 32px auto 0; max-width: 640px; color: var(--couleur-texte); }

/* Vitrine des outils publics gratuits (accueil) : cartes cliquables en entier, sans flèche
   « en savoir plus » — c'est l'outil lui-même qui est au bout du lien, pas une page de
   présentation. */
.outils-gratuits { margin: 64px 0; text-align: center; }
.outils-gratuits .eyebrow { text-align: center; }
.outils-gratuits h2 { margin-top: 0; }
.outils-intro { color: var(--couleur-texte-att); max-width: 620px; margin: 12px auto 36px; }
.grille-outils { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; text-align: left; }
.carte-outil {
    display: block; background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon-lg);
    padding: 20px; text-decoration: none; color: var(--couleur-texte);
    transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.carte-outil:hover {
    border-color: var(--couleur-primaire); transform: translateY(-2px); box-shadow: var(--ombre-carte);
}
.carte-outil strong { display: block; color: var(--couleur-primaire-fonce); margin-bottom: 6px; }
.carte-outil span { color: var(--couleur-texte-att); font-size: 0.9rem; }

/* Fil d'Ariane (generer_breadcrumb) — fiches de courrier et articles de blog.
   Le séparateur est en CSS et non dans le HTML : un lecteur d'écran annonce déjà la liste,
   lui faire lire « slash » entre chaque niveau n'apporte rien. */
.breadcrumb { margin: 18px 0 10px; font-size: 0.85rem; color: var(--couleur-texte-att); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "/"; color: var(--couleur-ligne); }
.breadcrumb a { color: var(--couleur-texte-att); text-decoration: none; }
.breadcrumb a:hover { color: var(--couleur-primaire); text-decoration: underline; }
/* Page courante : on la tronque plutôt que de laisser un titre long casser la ligne. */
.breadcrumb [aria-current="page"] {
    color: var(--couleur-texte); max-width: 46ch; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* Bibliothèque de modèles de courriers (/documents) */
.categorie-courriers { margin: 40px 0; }
.categorie-courriers h2 { margin-bottom: 18px; }
.lien-fil-ariane { color: inherit; text-decoration: none; }
.lien-fil-ariane:hover { text-decoration: underline; }
.facultatif { font-weight: 400; color: var(--couleur-texte-att); font-size: 0.85em; }

/* Aperçu du courrier rempli, avant téléchargement : rendu en largeur de lecture, sur fond
   papier, pour qu'on relise un texte et non un formulaire. */
.apercu-courrier {
    background: var(--couleur-fond); border: 1px solid var(--couleur-ligne); border-radius: var(--rayon);
    padding: 24px 26px; margin: 16px 0 26px; white-space: normal;
    font-size: 0.95rem; line-height: 1.75; max-width: 62ch;
}

/* Pré-remplissage depuis un bail réel : réservé aux bailleurs connectés, mis en avant car
   c'est l'écart le plus net avec un générateur anonyme. */
.encart-prefill {
    background: var(--couleur-primaire-claire); border-radius: var(--rayon);
    padding: 14px 18px; margin-bottom: 22px; font-size: 0.92rem;
}
.encart-prefill p { margin: 0 0 8px; }
.liste-baux-prefill { list-style: none; margin: 0; padding: 0; }
.liste-baux-prefill li { margin-bottom: 4px; }
.liste-baux-prefill a { font-weight: 600; text-decoration: none; }
.liste-baux-prefill a:hover { text-decoration: underline; }

/* Section patrimoniale (accueil) — fonctions de l'offre Pro réellement disponibles.
   Le fond alterné la distingue du reste de la page ; la bordure était pointillée tant que
   ces fonctions étaient annoncées comme « à venir », elle est devenue pleine depuis
   qu'elles sont livrées (voir /app/patrimoine et fonctions_conseils.php). */
.vision-patrimoine { margin: 64px 0; text-align: center; }
.vision-patrimoine .eyebrow { text-align: center; }
.vision-patrimoine h2 { margin-top: 0; max-width: 720px; margin-left: auto; margin-right: auto; }
.vision-intro { color: var(--couleur-texte-att); max-width: 620px; margin: 12px auto 36px; }
.grille-vision { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; text-align: left; }
.carte-vision {
    background: var(--couleur-fond-alt); padding: 24px; border-radius: var(--rayon-lg);
    border: 1px solid var(--couleur-ligne);
}
.vision-mention { color: var(--couleur-texte-att); font-size: 0.85rem; margin: 24px auto 0; max-width: 62ch; }
.carte-vision h3 { margin: 12px 0 8px; font-size: 1.08rem; }
.carte-vision p { color: var(--couleur-texte-att); margin: 0; font-size: 0.95rem; }
.badge-bientot {
    display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--couleur-accent); background: var(--couleur-accent-claire); padding: 4px 10px; border-radius: 999px;
}

/* Hero en deux colonnes : texte à gauche, aperçu du produit à droite */
.hero-split {
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
    text-align: left; padding: 64px 0 56px;
}
.hero-split .chapo { margin-left: 0; margin-right: 0; }
.hero-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.bandeau-confiance {
    list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.bandeau-confiance li { position: relative; padding-left: 22px; font-size: 0.9rem; color: var(--couleur-texte-att); }
.bandeau-confiance li::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; background-repeat: no-repeat; background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%231F5C4A'/%3E%3Cpath d='M6 10.5l2.5 2.5 5-5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Variante des outils gratuits : la règle de gratuité posée sous le titre du formulaire, avant
   toute saisie. Le reproche le plus fréquent de ce marché est de découvrir une limite après avoir
   tout rempli (voir README, « Page d'accueil — ce que l'on promet »). */
/* Double classe volontaire : la règle mobile de l'accueil (@media 900px, plus bas dans ce
   fichier) centre tous les .bandeau-confiance. Ici, au-dessus d'un formulaire aligné à gauche,
   le centrage mêlait des lignes centrées et une ligne repliée à gauche. La spécificité rend
   cette variante prioritaire quel que soit l'ordre des règles. */
.bandeau-confiance.bandeau-confiance--outil { margin: 6px 0 22px; justify-content: flex-start; }
@media (max-width: 600px) {
    .bandeau-confiance.bandeau-confiance--outil { flex-direction: column; gap: 6px; }
}

/* Sous le bouton d'inscription : ce qui se passe au 31e jour, dit au moment de s'engager. */
.form-auth .fin-essai { margin-top: 14px; }

/* Aperçu produit (maquette CSS/SVG, ou <img class="hero-capture"> pour une vraie capture) */
.hero-capture { width: 100%; height: auto; border-radius: var(--rayon-lg); box-shadow: 0 24px 60px -24px rgba(20, 63, 51, .4); border: 1px solid var(--couleur-ligne); }
.navigateur-fictif { background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon-lg); box-shadow: 0 24px 60px -24px rgba(20, 63, 51, .4); overflow: hidden; }
.navigateur-barre { display: flex; gap: 6px; padding: 12px 14px; background: var(--couleur-fond-alt); border-bottom: 1px solid var(--couleur-ligne); }
.navigateur-barre span { width: 10px; height: 10px; border-radius: 999px; background: #CBD3CD; }
.apercu-ecran { padding: 22px; }
.apercu-salut { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--couleur-primaire-fonce); margin: 0 0 16px; }
.apercu-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.apercu-tuile { background: var(--couleur-fond); border: 1px solid var(--couleur-ligne); border-radius: 10px; padding: 12px 10px; text-align: left; }
.apercu-tuile strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--couleur-texte); }
.apercu-tuile span { font-size: 0.72rem; color: var(--couleur-texte-att); }
.apercu-tuile-accent { background: var(--couleur-primaire-claire); border-color: var(--couleur-primaire-claire); }
.apercu-graphe svg { width: 100%; height: auto; display: block; }

/* Bloc prix dans le CTA final */
.cta-prix { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 8px 0 28px; }
.cta-prix-item {
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 12px; padding: 14px 20px; min-width: 160px;
}
.cta-prix-item strong { display: block; color: #fff; font-size: 1rem; }
.cta-prix-item span { color: #DCEAE4; font-size: 0.88rem; }
.cta-garantie { color: #DCEAE4; font-size: 0.9rem; margin-top: 16px; line-height: 1.7; }
.cta-garantie a { color: #fff; text-decoration: underline; }

@media (max-width: 900px) {
    .hero-split { grid-template-columns: 1fr; text-align: center; gap: 36px; }
    .hero-split .chapo { margin-left: auto; margin-right: auto; }
    .hero-boutons { justify-content: center; }
    .bandeau-confiance { justify-content: center; }
    .hero-apercu { max-width: 460px; margin: 0 auto; width: 100%; }
}

.faq { margin: 48px 0; }
.faq details {
    margin-bottom: 10px; padding: 16px 18px; background: var(--couleur-fond-alt);
    border-radius: var(--rayon); border: 1px solid var(--couleur-ligne);
}
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin-bottom: 0; color: var(--couleur-texte-att); }

.cta { text-align: center; margin: 40px 0; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer { background: var(--couleur-primaire-fonce); color: #DCEAE4; padding: 56px 0 24px; margin-top: 80px; }
.footer-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; }
.footer-colonnes strong { font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.footer-colonnes h4 { color: #9DBFB0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; }
.footer-colonnes a { display: block; color: #C9DED4; text-decoration: none; margin-bottom: 8px; }
.footer-colonnes a:hover { color: #fff; }
.footer-marque p { margin: 8px 0 16px; }

/* Réseaux sociaux : icônes SVG en ligne (aucune requête externe, donc aucune directive CSP
   à ajouter). `display:flex` écrase le `display:block` des autres liens du footer pour les
   aligner horizontalement. */
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-bottom: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .08); color: #C9DED4;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
.footer-social a:hover { background: rgba(255, 255, 255, .18); color: #fff; transform: translateY(-1px); }
.footer-social svg { display: block; }
.copyright { text-align: center; margin-top: 40px; color: #6E9585; font-size: 0.85rem; }

/* ============================================================
   Auth (connexion / inscription)
   ============================================================ */

.page-auth { padding: 64px 0; display: flex; justify-content: center; }
.auth-card {
    max-width: 420px; margin: 0 auto; background: #fff; padding: 36px; border-radius: var(--rayon-lg);
    width: 100%; border: 1px solid var(--couleur-ligne); box-shadow: var(--ombre-carte);
}
.auth-card h1 { margin-top: 0; font-size: 1.6rem; }
.form-auth .form-group { margin-bottom: 16px; }
.form-auth label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.9rem; }
.form-auth input[type="text"],
.form-auth input[type="email"],
.form-auth input[type="password"],
.form-auth textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon);
    font-size: 1rem; font-family: inherit; background: var(--couleur-fond);
}
.form-auth textarea { resize: vertical; }
.form-auth input:focus, .form-auth textarea:focus { border-color: var(--couleur-primaire); outline: none; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-check label { display: flex; align-items: center; gap: 8px; font-weight: normal; }
.form-check input[type="checkbox"] { width: auto; }
.liste-erreurs {
    background: var(--couleur-danger-fond); border: 1px solid #F0C4BD; color: var(--couleur-danger);
    padding: 12px 16px; border-radius: var(--rayon); margin-bottom: 16px; list-style: none;
}
.liste-erreurs li { margin-bottom: 4px; }
.auth-lien-secondaire { text-align: center; margin-top: 20px; font-size: 0.95rem; color: var(--couleur-texte-att); }
.form-auth .btn-large { width: 100%; text-align: center; }

/* ============================================================
   Tunnel d'authentification (connexion / inscription / mot de passe)
   ------------------------------------------------------------
   Pages plein écran, sans en-tête ni pied de page (voir $pageSansNavigation) : deux
   panneaux côte à côte, la marque à gauche et l'action à droite. Le panneau de marque
   reprend la ligne de toiture du logo Gomaloc, agrandie et débordant du cadre, comme
   tracé d'architecte — le même trait que l'identité, pas un décor rapporté.
   ============================================================ */

.corps-tunnel { background: var(--couleur-fond-alt); }

.tunnel { display: grid; grid-template-columns: 1.02fr 1fr; min-height: 100vh; min-height: 100dvh; }

/* --- Panneau de marque --- */
.tunnel-marque {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    justify-content: space-between; gap: 32px; padding: 40px 44px;
    background: linear-gradient(160deg, var(--couleur-primaire) 0%, var(--couleur-primaire-fonce) 100%);
    color: #DEEAE3;
}
.tunnel-logo {
    position: relative; z-index: 1; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: #fff;
}
.tunnel-marque-corps { position: relative; z-index: 1; max-width: 30ch; }
.tunnel-eyebrow {
    font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--couleur-accent-claire); margin: 0 0 14px;
}
.tunnel-accroche {
    font-family: var(--font-display); font-weight: 600; color: #fff;
    font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.9rem); line-height: 1.08; letter-spacing: -0.015em;
    margin: 0 0 16px;
}
.tunnel-sous-titre { color: #B9D2C6; margin: 0; font-size: 1.02rem; }
.tunnel-liste { list-style: none; padding: 0; margin: 26px 0 0; }
.tunnel-liste li {
    position: relative; padding-left: 26px; margin-bottom: 11px; color: #C9DED4; font-size: 0.96rem;
}
/* Puce dessinée en CSS plutôt qu'en SVG répété : une coche fine, dans l'accent de la charte. */
.tunnel-liste li::before {
    content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 5px;
    border-left: 2px solid var(--couleur-accent); border-bottom: 2px solid var(--couleur-accent);
    transform: rotate(-45deg);
}
.tunnel-reassurance {
    position: relative; z-index: 1; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px;
    font-size: 0.85rem; color: #8FB3A3;
}

/* Tracé d'architecte : agrandissement de la toiture du logo, débordant en bas à droite. */
.tunnel-trace {
    position: absolute; right: -14%; bottom: -18%; width: 78%; height: auto;
    color: rgba(255, 255, 255, .07); pointer-events: none;
}

/* --- Panneau d'action --- */
.tunnel-panneau {
    display: flex; align-items: center; justify-content: center;
    padding: 48px 32px; background: var(--couleur-fond);
}
.tunnel-carte { width: 100%; max-width: 400px; }
.tunnel-carte h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 1.3rem + .6vw, 1.85rem); }
.tunnel-carte .chapo { font-size: 1rem; text-align: left; margin: 0 0 26px; max-width: none; }

.tunnel-carte .form-auth input[type="text"],
.tunnel-carte .form-auth input[type="email"],
.tunnel-carte .form-auth input[type="password"] { background: #fff; padding: 13px 14px; }

/* Champ mot de passe + bouton œil : le bouton se superpose au champ, dont on réserve la
   place à droite pour que le texte saisi ne passe jamais dessous. */
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 46px !important; }
.bascule-mdp {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; border: none; border-radius: var(--rayon);
    background: none; color: var(--couleur-texte-att); cursor: pointer;
}
.bascule-mdp:hover { color: var(--couleur-primaire); background: var(--couleur-primaire-claire); }
.bascule-mdp .oeil-barre { display: none; }
.bascule-mdp[aria-pressed="true"] .oeil-barre { display: block; }

.tunnel-ligne-champ { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.tunnel-ligne-champ label { margin-bottom: 0; }
.tunnel-lien-discret { font-size: 0.85rem; text-decoration: none; }
.tunnel-lien-discret:hover { text-decoration: underline; }

.tunnel-pied { margin-top: 26px; font-size: 0.95rem; color: var(--couleur-texte-att); }
.tunnel-pied a { font-weight: 600; text-decoration: none; }
.tunnel-pied a:hover { text-decoration: underline; }
.tunnel-retour { display: inline-block; margin-top: 22px; font-size: 0.9rem; color: var(--couleur-texte-att); text-decoration: none; }
.tunnel-retour:hover { color: var(--couleur-primaire); }

/* Apparition à l'ouverture : un seul mouvement, sur la carte d'action. */
@media (prefers-reduced-motion: no-preference) {
    .tunnel-carte { animation: tunnel-apparition .45s cubic-bezier(.22, .61, .36, 1) both; }
}
@keyframes tunnel-apparition {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* --- Repli mobile : le panneau de marque devient un bandeau, l'action passe devant --- */
@media (max-width: 860px) {
    .tunnel { grid-template-columns: 1fr; min-height: 0; }
    .tunnel-marque { padding: 22px 24px; gap: 16px; }
    .tunnel-marque-corps, .tunnel-reassurance, .tunnel-trace { display: none; }
    .tunnel-panneau { padding: 32px 22px 56px; min-height: calc(100dvh - 76px); align-items: flex-start; }
}

.confirmation-email { text-align: center; }
.confirmation-icone {
    width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 999px;
    background: var(--couleur-primaire-claire); display: flex; align-items: center; justify-content: center;
}
.confirmation-email h1 { font-size: 1.4rem; margin-bottom: 6px; }
.confirmation-email .chapo { font-size: 1rem; margin: 0; max-width: none; }
.confirmation-email-adresse { font-weight: 700; margin: 4px 0 24px; word-break: break-word; }
.confirmation-etapes {
    text-align: left; background: var(--couleur-fond-alt); border-radius: var(--rayon-lg);
    padding: 20px 22px; margin-bottom: 20px;
}
.confirmation-etapes-titre { font-weight: 700; margin: 0 0 12px; font-size: 0.95rem; }
.confirmation-etapes ol { list-style: none; margin: 0; padding: 0; }
.confirmation-etapes li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 0.92rem; line-height: 1.5; }
.confirmation-etapes li:last-child { margin-bottom: 0; }
.confirmation-numero {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; background: var(--couleur-primaire);
    color: #fff; font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.confirmation-spam { font-size: 0.82rem; color: var(--couleur-texte-att); margin-bottom: 24px; }
.confirmation-email .btn-large { width: 100%; text-align: center; }

.carte-non-confirme-alerte {
    display: flex; align-items: flex-start; gap: 12px; background: var(--couleur-accent-claire);
    border: 1px solid #E8CBA5; border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 18px;
}
.carte-non-confirme-alerte svg { flex-shrink: 0; margin-top: 2px; }
.carte-non-confirme-titre { margin: 0; font-weight: 700; color: #8A5323; font-size: 0.95rem; }
.carte-non-confirme-soustitre { margin: 2px 0 0; color: #8A5323; font-size: 0.85rem; }
.auth-card .btn-accent.btn-large { width: 100%; margin-top: 6px; }

/* ============================================================
   Espace applicatif (propriétaire + admin)
   ============================================================ */

.app-layout { display: flex; min-height: 60vh; flex-wrap: wrap; }
.app-sidebar { width: 220px; background: var(--couleur-fond-alt); padding: 24px 20px; flex-shrink: 0; }
.app-sidebar nav a {
    display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 8px 10px; border-radius: var(--rayon);
    color: var(--couleur-texte); text-decoration: none; font-size: 0.95rem;
}
.app-sidebar nav a:hover { background: var(--couleur-primaire-claire); }
.app-sidebar nav a svg { flex-shrink: 0; color: var(--couleur-primaire); }
.app-contenu { flex: 1; padding: 36px; min-width: 280px; }
.app-contenu h1 { margin-top: 0; }

.app-sidebar-admin { background: #16211C; }
.app-sidebar-admin nav a { color: #D6E3DC; }
.app-sidebar-admin nav a:hover { background: #22332B; color: #fff; }
/* Page courante : douze entrées sans repère ne disaient pas où l'on se trouvait. */
.app-sidebar-admin nav a.actif { background: #2E4A40; color: #fff; font-weight: 600; }

/* Espace locataire : même gabarit que l'espace propriétaire, différencié par un liseré
   pour que le locataire ne confonde jamais son espace avec celui de son bailleur. */
.app-sidebar-locataire { border-right: 3px solid var(--couleur-primaire-claire); }
.app-sidebar-locataire nav a.app-nav-actif {
    background: var(--couleur-primaire-claire); font-weight: 600;
}
.bandeau-locataire {
    display: flex; align-items: center; gap: 10px; background: var(--couleur-primaire-claire);
    border-radius: var(--rayon); padding: 12px 16px; margin: 0 0 24px; font-size: 0.9rem;
}
.bandeau-locataire svg { flex-shrink: 0; color: var(--couleur-primaire); }
.bandeau-locataire p { margin: 0; }

/* Fiches de synthèse (bail, logement, bailleur) de l'espace locataire */
.grille-infos-locataire { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 0 0 32px; }
.carte-info-locataire {
    background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon);
    padding: 18px; box-shadow: var(--ombre-carte);
}
.carte-info-locataire h2 { margin: 0 0 12px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--couleur-texte-att); font-family: var(--font-corps); font-weight: 600; }
.carte-info-locataire dl { margin: 0; }
.carte-info-locataire dt { font-size: 0.82rem; color: var(--couleur-texte-att); margin-top: 8px; }
.carte-info-locataire dt:first-child { margin-top: 0; }
.carte-info-locataire dd { margin: 1px 0 0; font-size: 0.95rem; }
.carte-info-locataire .montant-vedette { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--couleur-primaire-fonce); }

.etat-paiement { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.etat-paiement-recu { background: var(--couleur-succes-fond); color: var(--couleur-primaire-fonce); }
.etat-paiement-attente { background: #FBF3E9; color: #8A5323; }

/* Panneau de gestion d'un accès locataire, côté bailleur (/app/locataires?acces=ID) */
.panneau-acces {
    background: #fff; border: 1px solid var(--couleur-ligne); border-left: 3px solid var(--couleur-primaire);
    border-radius: var(--rayon); padding: 24px; margin: 0 0 32px; box-shadow: var(--ombre-carte);
    scroll-margin-top: 20px;
}
.panneau-acces h2 { margin-top: 0; }
.panneau-acces h3 { margin: 28px 0 10px; font-size: 1rem; font-family: var(--font-corps); }
.etat-acces { margin: 18px 0 0; }
.etat-acces dt { font-size: 0.82rem; color: var(--couleur-texte-att); margin-top: 10px; }
.etat-acces dt:first-child { margin-top: 0; }
.etat-acces dd { margin: 2px 0 0; font-size: 0.95rem; }
.actions-acces { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.actions-acces form { margin: 0; }

/* Bouton "Menu" dépliable de la sidebar propriétaire (masqué en desktop, voir Responsive) */
.app-menu-toggle {
    display: none; width: 100%; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon);
    padding: 11px 14px; font-size: 0.95rem; font-weight: 600; color: var(--couleur-texte);
    cursor: pointer; font-family: inherit;
}
.app-menu-toggle-gauche { display: flex; align-items: center; gap: 8px; }
.app-menu-toggle-chevron { transition: transform .15s ease; }
.app-menu-toggle--ouvert .app-menu-toggle-chevron { transform: rotate(180deg); }
.etiquette-sidebar { color: #7FA595; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; }
.separateur-sidebar { border-top: 1px solid #2A3B32; margin: 20px 0; }

.message-succes {
    background: var(--couleur-succes-fond); border: 1px solid #BEDBCB; color: var(--couleur-primaire-fonce);
    padding: 12px 16px; border-radius: var(--rayon); margin-bottom: 16px;
}

/* Message de confirmation qui s'efface tout seul (tableau de bord). Réservé aux messages de
   succès : une erreur doit rester à l'écran tant que l'utilisateur ne l'a pas traitée. */
.message-ephemere { transition: opacity .5s ease, transform .5s ease; }
.message-ephemere.est-efface { opacity: 0; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
    .message-ephemere { transition: none; }
}

/* ============================================================
   Générateur de quittance gratuit
   ============================================================ */

.generateur-quittance {
    margin-top: 56px; padding: 36px; background: var(--couleur-fond-alt); border-radius: var(--rayon-lg);
    scroll-margin-top: 20px; border: 1px solid var(--couleur-ligne);
}
.generateur-quittance-haut { margin-top: 20px; }
.generateur-quittance h2 { margin-top: 0; }
.form-generateur .form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-generateur .form-row .form-group { flex: 1; min-width: 180px; }
.form-generateur .form-group { margin-bottom: 16px; }
.form-generateur label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.9rem; }
/* `select` inclus : les simulateurs publics (prorata, retenues sur dépôt de garantie) en
   utilisent, et sans cette règle ils gardaient l'apparence native du navigateur au milieu
   de champs stylés. */
.form-generateur input,
.form-generateur select {
    width: 100%; padding: 11px 13px; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon);
    font-size: 1rem; font-family: inherit; background: #fff;
}
.form-generateur .btn-large { display: block; width: 100%; max-width: 320px; text-align: center; margin-top: 8px; }

/* Une ligne de dégradation du simulateur de retenues sur dépôt de garantie : plusieurs
   lignes identiques empilées, séparées visuellement pour qu'on distingue où commence
   chacune sur mobile, où les champs passent les uns sous les autres. */
.ligne-degradation { border-top: 1px dashed var(--couleur-ligne); padding-top: 16px; margin-bottom: 4px; }
.ligne-degradation:first-of-type { border-top: 0; padding-top: 0; }

/* ============================================================
   Tarifs
   ============================================================ */

.grille-tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 44px auto; align-items: start; max-width: 760px; }
.carte-tarif {
    background: #fff; border-radius: var(--rayon-lg); padding: 36px 26px; text-align: center;
    border: 1px solid var(--couleur-ligne); box-shadow: var(--ombre-carte);
}
.carte-tarif-recommandee { border-color: var(--couleur-primaire); border-width: 2px; position: relative; }
.badge-recommande {
    background: var(--couleur-accent); color: #fff; display: inline-block; padding: 4px 14px;
    border-radius: 999px; font-size: 0.78rem; font-weight: 600; margin-bottom: 14px;
}
.carte-tarif h2 { margin: 0 0 8px; }
.carte-tarif .prix { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; color: var(--couleur-primaire-fonce); margin: 0; }
.carte-tarif .prix span { font-family: var(--font-corps); font-size: 1rem; font-weight: 400; color: var(--couleur-texte-att); }
.carte-tarif .sous-titre { color: var(--couleur-texte-att); margin-bottom: 24px; }
.liste-fonctionnalites { list-style: none; padding: 0; text-align: left; margin-bottom: 26px; }
.liste-fonctionnalites li { padding: 8px 0 8px 28px; position: relative; border-bottom: 1px solid var(--couleur-ligne); }
.liste-fonctionnalites li::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; background-repeat: no-repeat; background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='7' cy='12' r='4.5' fill='none' stroke='%231F5C4A' stroke-width='2'/%3E%3Cline x1='11' y1='12' x2='21' y2='12' stroke='%231F5C4A' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='17' y1='12' x2='17' y2='16' stroke='%231F5C4A' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='20' y1='12' x2='20' y2='15' stroke='%231F5C4A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.carte-tarif .btn-large { display: block; width: 100%; text-align: center; }
.carte-tarif .prix-mention { font-size: .82rem; color: var(--couleur-texte-att); margin: 4px 0 0; min-height: 1.1em; }
/* Déductibilité fiscale : l'argument le plus fort contre l'objection prix pour un bailleur au
   régime réel. En accent plutôt qu'en gris, pour qu'il se remarque sous le montant. */
.carte-tarif .mention-deductible { font-size: .82rem; color: var(--couleur-accent); margin: 6px 0 0; }
.carte-tarif .mention-deductible a { color: inherit; text-decoration: underline; }

/* Grille à 3 offres : les trois cartes sur une même ligne (empilées sur mobile) */
.grille-tarifs-3 { max-width: 1040px; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.grille-tarifs-3 .carte-tarif { display: flex; flex-direction: column; }
.grille-tarifs-3 .carte-tarif .liste-fonctionnalites { flex: 1 0 auto; }
@media (max-width: 720px) { .grille-tarifs-3 { grid-template-columns: 1fr; max-width: 420px; } }

/* Bascule mensuel / annuel */
.bascule-facturation { display: flex; width: fit-content; gap: 4px; margin: 8px auto 0; padding: 4px; background: var(--couleur-fond-alt); border-radius: 999px; }
.bascule-facturation-btn {
    border: 0; background: transparent; cursor: pointer; padding: 9px 20px; border-radius: 999px;
    font-family: var(--font-corps); font-size: .92rem; font-weight: 600; color: var(--couleur-texte-att);
    display: inline-flex; align-items: center; gap: 8px; transition: background .12s ease, color .12s ease;
}
.bascule-facturation-btn.actif { background: #fff; color: var(--couleur-primaire-fonce); box-shadow: var(--ombre-carte); }
.bascule-eco { background: var(--couleur-accent); color: #fff; font-size: .7rem; padding: 2px 7px; border-radius: 999px; font-weight: 700; }

/* ============================================================
   Biens / baux (cartes, badges, formulaires)
   ============================================================ */

.liste-biens-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0 40px; }
.carte-bien { background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre-carte); scroll-margin-top: 20px; }
.carte-bien h3 { margin: 0 0 6px; font-size: 1.05rem; font-family: var(--font-corps); font-weight: 600; }
.carte-bien p { margin: 2px 0; font-size: 0.9rem; color: var(--couleur-texte-att); }
.carte-bien .btn-lien { display: inline-block; margin: 8px 0 4px; }

.encart-limite { background: var(--couleur-fond-alt); padding: 24px; border-radius: var(--rayon-lg); text-align: center; }
/* Plusieurs actions côte à côte dans un encart (dont un <form> posté vers une autre page,
   qu'on ne peut donc pas mettre dans un <p>). Passe à la ligne proprement sur mobile. */
.encart-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 4px; }

.encart-avertissement {
    background: var(--couleur-accent-claire); border: 1px solid #E6C79C; color: #6B4620;
    border-radius: var(--rayon); padding: 14px 18px; font-size: 0.88rem; line-height: 1.5; margin: 16px 0 28px;
}

.form-selecteur-annee { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; }
.form-selecteur-annee label { font-weight: 600; font-size: 0.9rem; }
.form-selecteur-annee select { padding: 8px 12px; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon); font-size: 0.9rem; }

.carte-fiscalite { margin-bottom: 20px; }
.carte-fiscalite .table-scroll { margin: 14px 0 0; }
.carte-fiscalite .table-quittances { margin: 0; }

.form-bien .form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-bien .form-row .form-group { flex: 1; min-width: 160px; }
.form-bien .form-group { margin-bottom: 16px; }
.form-bien label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.9rem; }
.form-bien input, .form-bien select {
    width: 100%; padding: 11px 13px; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon);
    font-size: 1rem; font-family: inherit; background: #fff;
}
.form-bien input:focus, .form-bien select:focus, .form-bien textarea:focus { border-color: var(--couleur-primaire); outline: none; }
.form-bien input:disabled, .form-bien select:disabled, .form-bien textarea:disabled { background: var(--couleur-fond-alt); color: var(--couleur-texte-att); cursor: not-allowed; }
.form-bien .btn-large { display: block; width: 100%; max-width: 320px; text-align: center; margin-top: 8px; }
.form-bien textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon);
    font-size: 0.95rem; font-family: 'SF Mono', Consolas, monospace; background: #fff;
}
.aide-champ { font-size: 0.8rem; color: var(--couleur-texte-att); margin-top: 4px; }

.form-bien h3 { font-size: 1.05rem; margin: 28px 0 14px; padding-top: 18px; border-top: 1px solid var(--couleur-ligne); }
.form-bien h3:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }
.form-bien > label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }

/* Sections repliées du formulaire de logement. Le formulaire compte 44 champs dont 6 seulement
   sont nécessaires : tout afficher d'un bloc contredisait la promesse « deux minutes suffisent »
   faite sur le tableau de bord et dans les emails d'onboarding. Replié par défaut à l'ajout,
   déplié en modification (on vient alors précisément compléter la fiche). */
.form-bien details { margin: 16px 0; border: 1px solid var(--couleur-ligne); border-radius: 8px; background: var(--couleur-fond-alt); }
.form-bien details > summary {
    cursor: pointer; padding: 14px 44px 14px 16px; font-weight: 600; font-size: 0.95rem;
    list-style: none; position: relative;
}
.form-bien details > summary::-webkit-details-marker { display: none; }
.form-bien details > summary::after {
    content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font-size: 1.3rem; line-height: 1; color: var(--couleur-texte-att);
}
.form-bien details[open] > summary::after { content: '\2212'; }
.form-bien .details-aide { display: block; font-weight: 400; font-size: 0.82rem; color: var(--couleur-texte-att); margin-top: 3px; }
.form-bien .details-corps { padding: 4px 16px 8px; }
.form-bien .details-corps > label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
.groupe-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 20px; margin-bottom: 20px; }
.case-inline { display: flex; align-items: center; gap: 8px; font-weight: normal; font-size: 0.9rem; cursor: pointer; }
.case-inline input[type="checkbox"] { width: auto; flex-shrink: 0; }

.fieldset-nouveau-locataire { border: 1px dashed var(--couleur-ligne); border-radius: var(--rayon); padding: 12px 16px 4px; margin-bottom: 16px; }
.fieldset-nouveau-locataire legend { font-size: 0.85rem; color: var(--couleur-texte-att); padding: 0 6px; }

.badge-statut { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; margin-bottom: 8px; }
.badge-statut-actif { background: var(--couleur-succes-fond); color: var(--couleur-primaire-fonce); }
.badge-statut-programme { background: var(--couleur-accent-claire); color: #8A5323; }
.badge-statut-brouillon, .badge-statut-termine, .badge-statut-resilie { background: var(--couleur-fond-alt); color: var(--couleur-texte-att); }
.badge-statut-admin { background: var(--couleur-accent-claire); color: var(--couleur-danger); }

.badge-recurrent {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
    background: var(--couleur-fond-alt); color: var(--couleur-texte-att); vertical-align: middle;
}

.liste-echeances { list-style: none; padding: 0; margin: 16px 0 36px; display: flex; flex-direction: column; gap: 10px; }
.echeance a {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
    background: #fff; border: 1px solid var(--couleur-ligne); border-left: 4px solid var(--couleur-accent);
    border-radius: var(--rayon); padding: 12px 16px; text-decoration: none; color: inherit;
}
.echeance a:hover { border-color: var(--couleur-primaire); box-shadow: var(--ombre-carte); }
.echeance-fin_bail a { border-left-color: var(--couleur-danger); }
.echeance-type { font-weight: 600; font-size: 0.85rem; color: var(--couleur-texte); flex-shrink: 0; }
.echeance-details { font-size: 0.85rem; color: var(--couleur-texte-att); flex: 1; }
.echeance-date { font-size: 0.85rem; font-weight: 600; color: var(--couleur-primaire-fonce); white-space: nowrap; }

/* ============================================================
   Tableaux (quittances, utilisateurs)
   ============================================================ */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0 40px; }
.table-scroll .table-quittances { margin: 0; min-width: 560px; }

.table-quittances { width: 100%; border-collapse: collapse; margin: 20px 0 40px; }
.table-quittances th, .table-quittances td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--couleur-ligne); font-size: 0.9rem; }
.table-quittances th { color: var(--couleur-texte-att); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.table-quittances tbody tr:hover { background: var(--couleur-fond-alt); }

.grille-photos-edl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 12px 0 28px; }
.carte-photo-edl { background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon); overflow: hidden; }
.carte-photo-edl img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.carte-photo-edl p { font-size: 0.85rem; color: var(--couleur-texte-att); margin: 8px 10px 0; }
.carte-photo-edl form { padding: 4px 10px 10px; }
.barre-actions-edl { display: flex; gap: 12px; align-items: center; margin-top: 32px; flex-wrap: wrap; }
.form-inline-action { display: inline-block; }

/* ============================================================
   Stats admin
   ============================================================ */

.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 16px 0 36px; }
.carte-stat {
    background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon-lg);
    padding: 22px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--ombre-carte);
}
.chiffre-stat { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--couleur-primaire-fonce); }

/* Carte-statistique cliquable (admin) : le chiffre mène au détail de ce qu'il compte.
   `display:flex` rétablit la mise en page de .carte-stat, qu'un <a> inline casserait. */
.carte-stat-lien { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.carte-stat-lien:hover, .carte-stat-lien:focus-visible { border-color: var(--couleur-primaire); box-shadow: 0 4px 14px rgba(31, 92, 74, .14); transform: translateY(-1px); }
.carte-stat-lien .indice-detail { font-size: .78rem; color: var(--couleur-texte-att, #5C6D63); }

/* Résumé du tableau de bord : une ligne discrète, pas un bandeau. */
.dashboard-resume { margin: 0 0 18px; font-size: .88rem; color: var(--couleur-texte-att, #5C6D63); }
.dashboard-resume strong { color: var(--couleur-texte, #1B2622); }

/* Mini-graphique à barres du tableau de bord mobile, rendu côté serveur (aucun script).
   Barres horizontales et non verticales : sur 375 px, six mois × deux séries en colonnes
   seraient illisibles, alors qu'en lignes chaque mois garde toute la largeur disponible. */
.mini-barres-legende { display: flex; gap: 16px; margin: 0 0 12px; font-size: .8rem; color: var(--couleur-texte-att, #5C6D63); }
.mini-barres-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.pastille-revenus { background: var(--couleur-primaire, #1F5C4A); }
.pastille-depenses { background: var(--couleur-accent, #AE6B36); }
.mini-barres-ligne { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mini-barres-mois { flex: 0 0 34px; font-size: .8rem; color: var(--couleur-texte-att, #5C6D63); }
.mini-barres-paire { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* min-width sur la barre : une valeur non nulle mais minuscule doit rester visible, sinon un
   mois à 5 € paraît identique à un mois à 0 €. */
.mini-barre { height: 7px; border-radius: 3px; min-width: 2px; }
.mini-barre-revenus { background: var(--couleur-primaire, #1F5C4A); }
.mini-barre-depenses { background: var(--couleur-accent, #AE6B36); }
.mini-barres-valeur { flex: 0 0 auto; font-size: .82rem; font-weight: 600; white-space: nowrap; }

/* Encarts contextuels dans l'espace connecté.
   « attention » : une action va modifier des documents déjà émis — ton d'alerte, pas de blocage.
   « astuce » : une capacité disponible dans une offre supérieure, ton informatif et discret. */
.encart-attention, .encart-astuce {
    margin: 0 0 18px; padding: 14px 16px; border-radius: var(--rayon-lg);
    font-size: .92rem; line-height: 1.55;
}
.encart-attention { background: #FDF8F0; border: 1px solid #E8D5B7; color: #6B4A24; }
/* #DEEAE3 : vert pâle déjà employé par l'encart promotionnel du blog, aucune variable
   correspondante n'existant dans la palette. */
.encart-astuce { background: #DEEAE3; border: 1px solid var(--couleur-primaire); color: var(--couleur-primaire-fonce); }
.encart-attention a, .encart-astuce a { color: inherit; font-weight: 600; white-space: nowrap; }

/* Carte-résumé d'une journée (admin, statistiques) : un chiffre dominant en haut, les mesures
   secondaires au milieu, la liste des meilleures campagnes en bas. Remplace quatre blocs de
   trois cartes empilés, qui obligeaient à faire défiler la page pour comparer deux jours. */
.grille-jours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin: 16px 0 28px; }
.carte-jour {
    background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon-lg);
    padding: 20px 22px; box-shadow: var(--ombre-carte);
}
.carte-jour-entete { display: flex; align-items: baseline; gap: 10px; }
.carte-jour-chiffre { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--couleur-primaire-fonce); }
.carte-jour-libelle { font-size: .95rem; font-weight: 600; }
.carte-jour-date { margin: 2px 0 14px; font-size: .78rem; color: var(--couleur-texte-att, #5C6D63); }
.carte-jour-mesures { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 12px; border-bottom: 1px solid var(--couleur-ligne); }
.carte-jour-mesures span { font-size: .84rem; color: var(--couleur-texte-att, #5C6D63); }
.carte-jour-mesures b { color: var(--couleur-texte, #1B2622); }
.carte-jour-titre-liste { margin: 12px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--couleur-texte-att, #5C6D63); }
.carte-jour-ligne {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: var(--couleur-fond-alt, #F1ECE2); border-radius: 6px;
    padding: 7px 10px; margin-bottom: 5px; font-size: .86rem;
}
.carte-jour-ligne span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-jour-ligne b { flex-shrink: 0; }
.carte-jour-vide { font-size: .84rem; color: var(--couleur-texte-att, #5C6D63); margin: 0; }

/* Tableau compact des périodes : une ligne par mesure, une colonne par fenêtre de temps. */
.table-periodes { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table-periodes th, .table-periodes td { padding: 9px 10px; border-bottom: 1px solid var(--couleur-ligne); }
.table-periodes th { font-size: .76rem; text-transform: uppercase; color: var(--couleur-texte-att, #5C6D63); font-weight: 600; }
.table-periodes td:not(:first-child), .table-periodes th:not(:first-child) { text-align: right; }
.table-periodes tbody td:not(:first-child) { font-weight: 700; }

/* Parcours de démarrage (tableau de bord) : checklist logement → locataire → bail */
.onboarding-carte {
    background: #fff; border: 1px solid var(--couleur-ligne); border-left: 4px solid var(--couleur-primaire);
    border-radius: var(--rayon-lg); box-shadow: var(--ombre-carte); padding: 24px; margin: 8px 0 32px;
}
.onboarding-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.onboarding-entete h2 { margin: 0; font-size: 1.25rem; }
.onboarding-progression {
    flex-shrink: 0; background: var(--couleur-primaire-claire); color: var(--couleur-primaire-fonce);
    font-weight: 700; font-size: .9rem; padding: 5px 12px; border-radius: 999px;
}
.onboarding-etapes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.onboarding-etape { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon-lg); }
.onboarding-puce {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: .95rem;
    background: var(--couleur-fond-alt); color: var(--couleur-texte-att);
}
.onboarding-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.onboarding-texte strong { font-size: 1rem; }
.onboarding-texte span { font-size: .88rem; color: var(--couleur-texte-att); }
.onboarding-badge { flex-shrink: 0; color: var(--couleur-primaire); font-weight: 600; font-size: .88rem; }
/* étape terminée */
.onboarding-etape--faite { background: var(--couleur-succes-fond); border-color: var(--couleur-primaire-claire); }
.onboarding-etape--faite .onboarding-puce { background: var(--couleur-primaire); color: #fff; }
/* étape à réaliser maintenant */
.onboarding-etape--active { border-color: var(--couleur-primaire); border-width: 2px; }
.onboarding-etape--active .onboarding-puce { background: var(--couleur-primaire); color: #fff; }
/* étape à venir (grisée, non encore accessible) */
.onboarding-etape--a-venir { opacity: .55; }
@media (max-width: 560px) {
    .onboarding-etape { flex-wrap: wrap; }
    .onboarding-etape .btn { width: 100%; text-align: center; }
}

/* min(280px, 100%) : sur un téléphone étroit, une colonne de 280 px imposés débordait de la carte
   qui la contient (carte d'un bien dans Patrimoine) et forçait un défilement horizontal. */
.grille-graphiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; margin: 0 0 36px; }
.carte-graphique {
    background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon-lg);
    padding: 22px; box-shadow: var(--ombre-carte);
}
.carte-graphique h3 { margin: 0 0 16px; font-size: 0.95rem; }
.carte-graphique canvas { max-height: 280px; }

/* ============================================================
   Sous-menu en cartes carrées (hubs Finances, Paramètres...)
   ============================================================ */

.grille-cartes-carrees { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; margin: 20px 0 36px; max-width: 560px; }
.carte-carree {
    aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 16px; background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-carte); text-decoration: none; color: var(--couleur-texte); text-align: center;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.carte-carree:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(27, 38, 34, .3); border-color: var(--couleur-primaire); }
.carte-carree svg { color: var(--couleur-primaire); flex-shrink: 0; }
.carte-carree span { font-weight: 600; font-size: 0.88rem; line-height: 1.25; }

/* Carte d'une fonction non incluse dans l'offre : visible mais grisée, avec une invite
   « Passer au plan … » révélée au survol (le lien mène vers /app/abonnement). */
.carte-carree--verrouillee { position: relative; opacity: .55; filter: grayscale(1); overflow: hidden; }
.carte-carree--verrouillee svg { color: var(--couleur-texte-att); }
.carte-carree--verrouillee:hover { transform: none; opacity: 1; filter: grayscale(0); box-shadow: var(--ombre-carte); border-color: var(--couleur-primaire); }
.carte-carree-cadenas { position: absolute; top: 8px; right: 8px; }
.carte-carree--verrouillee::after {
    content: attr(data-plan-requis);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 12px; text-align: center;
    background: var(--couleur-primaire); color: #fff;
    font-weight: 600; font-size: .82rem; line-height: 1.3;
    opacity: 0; transition: opacity .12s ease; pointer-events: none;
}
.carte-carree--verrouillee:hover::after { opacity: 1; }

/* Lien grisé réutilisable (ex. entrée de menu réservée à une offre) : infobulle « Passer
   au plan … » au survol via l'attribut data-plan-requis. */
.lien-verrouille { position: relative; opacity: .5; }
.lien-verrouille:hover { opacity: 1; }
.lien-verrouille::after {
    content: attr(data-plan-requis);
    position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
    white-space: nowrap; background: var(--couleur-primaire); color: #fff;
    padding: 5px 9px; border-radius: var(--rayon-md, 6px); font-size: .76rem; font-weight: 600;
    opacity: 0; transition: opacity .12s ease; pointer-events: none; z-index: 5;
}
.lien-verrouille:hover::after { opacity: 1; }
.lien-retour { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--couleur-texte-att); text-decoration: none; margin-bottom: 18px; }
.lien-retour:hover { color: var(--couleur-primaire); }

/* ============================================================
   Blog (liste, article, images)
   ============================================================ */

.page-blog h1 { margin-bottom: 4px; }
.page-blog .chapo { margin: 0 0 32px; }
.liste-articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.carte-article { margin-bottom: 0; }
.carte-article h2 { margin-top: 12px; font-size: 1.2rem; }
.carte-article h2 a { color: var(--couleur-texte); text-decoration: none; }
.carte-article h2 a:hover { color: var(--couleur-primaire); }
.carte-article p { color: var(--couleur-texte-att); }
.miniature-article { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon); display: block; }
.image-une-article { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon-lg); margin: 20px 0 28px; }
.apercu-image-une { max-width: 240px; display: block; border-radius: var(--rayon); margin-bottom: 8px; }

.pagination-blog { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 48px 0; }
.pagination-etat { color: var(--couleur-texte-att); font-size: 0.9rem; }

.page-article article { max-width: 720px; margin: 0 auto; }
.date-article { color: var(--couleur-texte-att); font-size: 0.9rem; margin-top: -10px; }
.contenu-article { line-height: 1.75; font-size: 1.05rem; }
.contenu-article h2 { margin-top: 1.8em; }

/* Blocs éditoriaux, tableaux et citations du corps d'article
   (vocabulaire HTML imposé par le brief de rédaction — cf. skill redaction-article-seo). */

.contenu-article .info,
.contenu-article .warning,
.contenu-article .tip {
    border-radius: var(--rayon);
    padding: 18px 22px;
    margin: 28px 0;
    border-left: 4px solid;
    font-size: 0.98rem;
}
.contenu-article .info > :first-child,
.contenu-article .warning > :first-child,
.contenu-article .tip > :first-child { margin-top: 0; }
.contenu-article .info > :last-child,
.contenu-article .warning > :last-child,
.contenu-article .tip > :last-child { margin-bottom: 0; }

.contenu-article .info { background: var(--couleur-fond-alt); border-left-color: var(--couleur-texte-att); }
.contenu-article .warning { background: var(--couleur-danger-fond); border-left-color: var(--couleur-danger); }
.contenu-article .tip { background: var(--couleur-primaire-claire); border-left-color: var(--couleur-primaire); }

/* Aperçu d'un document généré (quittance, courrier…). La bordure et l'ombre ne sont pas
   décoratives : le document est blanc sur une page blanche, sans elles on ne voit pas où il
   commence. La largeur est bridée car l'image est fournie en A4 haute définition (1588 px de
   large) pour rester nette sur écran dense et exploitable par Google Images. */
.contenu-article .figure-document { margin: 32px 0; text-align: center; }
.contenu-article .figure-document img {
    width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto;
    border: 1px solid var(--couleur-ligne);
    border-radius: 4px;
    box-shadow: 0 2px 14px rgba(20, 63, 51, .09);
}
.contenu-article .figure-document figcaption {
    margin-top: 12px; font-size: 0.88rem; color: var(--couleur-texte-att); line-height: 1.5;
}

/* Illustration en paysage sur une page d'outil. .figure-document ne convient pas : elle n'est
   stylée que sous .contenu-article et suppose un document A4 en portrait. L'illustration a son
   propre fond, donc ni bordure ni ombre. Largeur bridée pour ne pas écraser le texte sur grand
   écran ; height:auto + width/height dans le HTML réservent la place avant chargement. */
.figure-illustration { margin: 32px 0; }
.figure-illustration img {
    width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto;
    border-radius: var(--rayon);
}
.figure-illustration figcaption {
    max-width: 720px; margin: 12px auto 0; text-align: center;
    font-size: 0.88rem; color: var(--couleur-texte-att); line-height: 1.5;
}

/* Tableaux : scrollables sous 620px pour ne pas élargir la page sur mobile. */
.contenu-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 0.95rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
@media (min-width: 620px) {
    .contenu-article table { display: table; white-space: normal; }
}
.contenu-article th,
.contenu-article td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--couleur-ligne);
    vertical-align: top;
}
.contenu-article thead th {
    background: var(--couleur-fond-alt);
    font-weight: 600;
    border-bottom: 2px solid var(--couleur-ligne);
}
.contenu-article tbody tr:last-child td { border-bottom: none; }

.contenu-article blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--couleur-accent);
    color: var(--couleur-texte-att);
    font-style: italic;
}
.contenu-article hr {
    border: none;
    border-top: 1px solid var(--couleur-ligne);
    margin: 40px 0;
}

.encart-promo-blog {
    background: var(--couleur-primaire-claire);
    border: 2px solid var(--couleur-primaire);
    border-radius: var(--rayon-lg);
    box-shadow: 0 6px 20px rgba(31, 92, 74, 0.12);
    padding: 32px 36px;
    margin: 40px 0;
    text-align: center;
}
.encart-promo-blog h3 {
    margin: 0 0 24px; font-size: 1.35rem; color: var(--couleur-primaire-fonce);
}
.encart-promo-grille {
    display: grid;
    grid-template-columns: minmax(90px, 130px) 1fr;
    gap: 30px;
    align-items: center;
    text-align: left;
}
.encart-promo-image { display: flex; align-items: center; justify-content: center; }
.encart-promo-image svg { width: 100%; height: auto; }
.encart-promo-texte ul { margin: 0; padding-left: 22px; font-size: 1rem; line-height: 1.7; }
.encart-promo-texte li { margin-bottom: 6px; }
.encart-promo-cta { margin-top: 26px; }
@media (max-width: 600px) {
    .encart-promo-blog { padding: 26px 22px; }
    .encart-promo-grille { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .encart-promo-image svg { max-width: 90px; }
    .encart-promo-texte ul { display: inline-block; text-align: left; }
}
.articles-recents, .articles-precedents { max-width: 720px; margin: 48px auto 0; padding-top: 28px; border-top: 1px solid var(--couleur-ligne); }
.liste-liens-articles { list-style: none; padding: 0; }
.liste-liens-articles li { padding: 7px 0; }
.liste-liens-articles a { color: var(--couleur-primaire); text-decoration: none; }
.liste-liens-articles a:hover { text-decoration: underline; }

/* ============================================================
   404
   ============================================================ */

.page-404 { text-align: center; padding: 100px 0; }
.page-404 h1 { font-size: 2.2rem; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 720px) {
    /* flex-wrap: nowrap est indispensable, pas cosmétique. .app-layout est déclaré
       `flex-wrap: wrap` pour la disposition desktop (sidebar + contenu côte à côte). Combiné au
       passage en `flex-direction: column` ci-dessous, on obtient un conteneur flex colonne
       multi-lignes : la largeur d'une ligne y est alors calculée sur le contenu **max-content**
       de ses éléments, au lieu d'être contrainte par le conteneur. Résultat, .app-contenu
       s'étirait à 494 px sur un écran de 375 px (débordement horizontal de 119 px sur TOUTES les
       pages /app/* et /locataire/*), et la grille des pages hub tenait 3 colonnes dont la
       dernière — « Quittances » — sortait de l'écran. */
    .app-layout { flex-direction: column; flex-wrap: nowrap; }
    .app-sidebar { width: 100%; padding: 12px 0; }
    .app-sidebar nav {
        display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        gap: 6px; padding: 0 20px;
    }
    .app-sidebar nav a { margin-bottom: 0; white-space: nowrap; flex-shrink: 0; }

    /* Sidebar propriétaire : un seul menu général dépliable plutôt que le défilement horizontal ci-dessus */
    .app-sidebar.app-sidebar-proprietaire { padding: 14px 20px; }
    .app-sidebar.app-sidebar-proprietaire .app-menu-toggle { display: flex; }
    .app-sidebar.app-sidebar-proprietaire nav {
        display: none; flex-direction: column; flex-wrap: wrap; overflow-x: visible;
        gap: 4px; padding: 0; margin-top: 10px;
    }
    .app-sidebar.app-sidebar-proprietaire nav.app-nav-proprietaire--ouvert { display: flex; }
    .app-sidebar.app-sidebar-proprietaire nav a { white-space: normal; flex-shrink: initial; width: 100%; }

    /* Sidebar locataire : même menu dépliable que la sidebar propriétaire */
    .app-sidebar.app-sidebar-locataire { padding: 14px 20px; border-right: none; border-bottom: 3px solid var(--couleur-primaire-claire); }
    .app-sidebar.app-sidebar-locataire .app-menu-toggle { display: flex; }
    .app-sidebar.app-sidebar-locataire nav {
        display: none; flex-direction: column; flex-wrap: wrap; overflow-x: visible;
        gap: 4px; padding: 0; margin-top: 10px;
    }
    .app-sidebar.app-sidebar-locataire nav.app-nav-locataire--ouvert { display: flex; }
    .app-sidebar.app-sidebar-locataire nav a { white-space: normal; flex-shrink: initial; width: 100%; }

    .menu-toggle { display: flex; }
    .nav-principale {
        display: none; width: 100%; flex-direction: column; align-items: flex-start;
        gap: 4px; margin-top: 14px;
    }
    .nav-principale--ouvert { display: flex; }
    .nav-principale a { margin-left: 0; padding: 8px 0; width: 100%; }
    .nav-principale a.btn { margin-top: 6px; text-align: center; }

    .hero { padding: 52px 0 40px; }

    /* --- Footer réduit : utilisateur connecté, sur mobile (voir $footerReduit dans footer.php) ---
       Le footer complet empile 5 blocs et une vingtaine de liens sous chaque écran, soit
       plusieurs hauteurs d'écran de contenu d'acquisition qu'un utilisateur déjà inscrit ne
       lira jamais. On ne garde que le strictement nécessaire, sur une seule ligne :
         - Contact (accès au support) ;
         - CGU et Mentions légales, qui doivent rester accessibles depuis n'importe quelle page ;
         - Gérer mes cookies, le choix devant rester modifiable à tout moment (exigence CNIL).
       Rien n'est retiré du DOM : desktop et visiteurs non connectés gardent le footer complet. */
    .site-footer--connecte { padding: 22px 0 18px; margin-top: 36px; }
    .site-footer--connecte .footer-bloc-promo,
    .site-footer--connecte .footer-lien-promo,
    .site-footer--connecte .footer-marque,
    .site-footer--connecte .footer-bloc-informations h4 { display: none; }
    .site-footer--connecte .footer-colonnes { display: block; gap: 0; }
    .site-footer--connecte .footer-liens-essentiels {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
    }
    .site-footer--connecte .footer-liens-essentiels a {
        margin: 0; font-size: 0.85rem; padding: 4px 0; /* cible tactile un peu plus haute */
    }
    .site-footer--connecte .copyright { margin-top: 16px; font-size: 0.78rem; }
}

/* ============================================================
   Bandeau de consentement aux cookies
   ============================================================ */

/* ============================================================
   Interface « application » sur mobile (espaces connectés)
   ============================================================
   Voir templates/partial_barre_app_mobile.php et partial_onglets_mobile.php.
   Les deux barres sont dans le DOM sur toute page connectée mais ne s'affichent que sous
   720 px : au-dessus, l'en-tête de site et la sidebar reprennent leur rôle. */

/* Hauteur de la barre d'onglets, réutilisée pour dégager le contenu et empiler le bandeau
   cookies au-dessus. Une seule source de vérité : changer la barre ne doit pas obliger à
   corriger trois valeurs éparpillées. */
:root { --hauteur-onglets-mobile: 58px; }

.barre-app-mobile, .onglets-mobile { display: none; }

/* Bascule mobile / desktop pour un même contenu présenté différemment (tableau de bord).
   .bloc-mobile n'apparaît que sous 720 px, .bloc-desktop qu'au-dessus. */
.bloc-mobile { display: none; }

/* Résumé compact du tableau de bord mobile : trois chiffres cliquables au-dessus du lanceur. */
.resume-mobile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.resume-mobile-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 12px 6px; background: #fff; border: 1px solid var(--couleur-ligne);
    border-radius: var(--rayon); text-decoration: none; color: var(--couleur-texte-att);
    font-size: 0.72rem; line-height: 1.15; text-align: center;
}
.resume-mobile-chiffre {
    font-family: var(--font-display); font-size: 1.45rem; font-weight: 600;
    color: var(--couleur-primaire-fonce); line-height: 1;
}
/* Un impayé est la seule information du résumé qui appelle une action : elle se distingue. */
.resume-mobile-item--alerte { background: #FBF3E9; border-color: #E7C9A6; }
.resume-mobile-item--alerte .resume-mobile-chiffre { color: #8A5323; }

@media (max-width: 720px) {
    /* L'en-tête marketing laisse la place à la barre d'application. */
    .site-header--masque-mobile { display: none; }

    .barre-app-mobile {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; padding: 10px 16px;
        background: #fff; border-bottom: 1px solid var(--couleur-ligne);
        position: sticky; top: 0; z-index: 900;
    }
    .barre-app-marque {
        display: flex; align-items: center; gap: 8px;
        text-decoration: none; color: var(--couleur-primaire-fonce);
        font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
    }
    .barre-app-action {
        display: flex; align-items: center; justify-content: center;
        /* 44 px : cible tactile minimale recommandée, sinon l'icône seule est trop petite. */
        width: 44px; height: 44px; margin-right: -10px;
        color: var(--couleur-texte-att); text-decoration: none; border-radius: var(--rayon);
    }
    .barre-app-action:active { background: var(--couleur-fond-alt); }

    /* Barre d'onglets fixe en bas. */
    .onglets-mobile {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
        background: #fff; border-top: 1px solid var(--couleur-ligne);
        box-shadow: 0 -2px 12px rgba(20, 63, 51, .07);
        /* Zone sûre des iPhone à encoche : sans ça, les libellés passent sous la barre système. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .onglet-mobile {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 8px 2px; min-height: var(--hauteur-onglets-mobile);
        color: var(--couleur-texte-att); text-decoration: none; font-size: 0.68rem; font-weight: 600;
        text-align: center; line-height: 1.1;
    }
    .onglet-mobile svg { color: currentColor; }
    .onglet-mobile--actif { color: var(--couleur-primaire); }
    .onglet-mobile--actif svg { stroke-width: 1.9; }
    .onglet-mobile:active { background: var(--couleur-primaire-claire); }

    /* La sidebar fait doublon avec les onglets : on la retire du flux sur mobile. */
    .app-layout .app-sidebar-proprietaire,
    .app-layout .app-sidebar-locataire { display: none; }

    /* Bascule des blocs propres à chaque support (tableau de bord). */
    .bloc-mobile { display: block; }
    .bloc-desktop { display: none; }

    /* Graphiques Chart.js masqués : illisibles à cette largeur, et Chart.js n'est même pas
       téléchargé (chargement conditionné au viewport, voir app/dashboard.php).
       ⚠️ La règle vise la seule grille qui porte des canvas (.grille-graphiques--canvas), jamais
       .grille-graphiques en général : cette classe de mise en page sert aussi à des formulaires.
       Écrite sur la classe générique, elle faisait disparaître sur mobile les objectifs, la valeur
       des biens, les crédits et la capacité d'emprunt de Patrimoine — et, avant un premier
       correctif ponctuel, le planning et les calculateurs du back-office. */
    .grille-graphiques--canvas { display: none; }

    /* Back-office : une seule colonne, blocs empilés. */
    .app-sidebar-admin + .app-contenu .grille-graphiques { display: block; }
    .app-sidebar-admin + .app-contenu .grille-graphiques > * { margin-bottom: 16px; }

    /* Navigation admin : une seule bande défilant horizontalement, au lieu de quatre rangées
       empilées qui remplissaient le premier écran avant tout contenu. Les séparateurs
       deviennent de simples traits verticaux entre groupes. */
    .app-sidebar.app-sidebar-admin {
        display: flex; align-items: center; gap: 6px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding: 10px 16px;
    }
    .app-sidebar.app-sidebar-admin .etiquette-sidebar { display: none; }
    .app-sidebar.app-sidebar-admin .separateur-sidebar {
        flex: 0 0 auto; width: 1px; height: 18px; border: 0;
        background: #3A4A42; margin: 0 2px;
    }
    .app-sidebar.app-sidebar-admin nav {
        display: flex; flex: 0 0 auto; gap: 6px;
        padding: 0; overflow: visible;
    }
    .app-sidebar.app-sidebar-admin nav a { padding: 7px 12px; font-size: .88rem; }

    /* Tableaux éditables du pilotage : leurs champs portent des largeurs minimales en style
       en ligne (200 px et plus), qui rendaient le défilement horizontal interminable.
       !important est ici le seul moyen de passer devant un attribut style. */
    .app-sidebar-admin + .app-contenu .table-scroll input[type="text"],
    .app-sidebar-admin + .app-contenu .table-scroll input[type="url"],
    .app-sidebar-admin + .app-contenu .table-scroll input[type="email"] {
        min-width: 130px !important;
    }

    /* Les pages applicatives respirent mieux avec des marges intérieures réduites : 36 px de
       chaque côté consomment près de 20 % d'un écran de 375 px. */
    .app-contenu { padding: 20px 16px 28px; }

    /* Le contenu doit pouvoir défiler entièrement au-dessus de la barre fixe.
       La classe vient de PHP (header.php) plutôt que d'un sélecteur :has() : l'information est
       déjà connue côté serveur, autant ne pas dépendre du support de :has(). */
    .corps-app-mobile { padding-bottom: calc(var(--hauteur-onglets-mobile) + env(safe-area-inset-bottom, 0px)); }
}

/* Les styles du bandeau de consentement (.cookie-banner et suivants) ont été retirés le
   27/07/2026 avec le bandeau lui-même : le site ne dépose plus que des cookies exemptés. */

/* ============================================================
   Contenu légal (mentions légales, CGU) — tableaux cookies
   ============================================================ */

.contenu-legal h3 { margin-top: 1.6em; font-size: 1.02rem; }
.table-legal { width: 100%; border-collapse: collapse; margin: 14px 0 8px; font-size: 0.9rem; }
.table-legal th, .table-legal td { text-align: left; padding: 9px 12px; border: 1px solid var(--couleur-ligne); vertical-align: top; }
.table-legal thead th { background: var(--couleur-primaire-claire); color: var(--couleur-primaire-fonce); font-weight: 600; }
.table-legal td:first-child { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.85rem; white-space: nowrap; }
.maj-legal { margin-top: 2.4em; font-size: 0.85rem; color: var(--couleur-texte-att); font-style: italic; }

@media (max-width: 560px) {
    .table-legal td:first-child { white-space: normal; }
}

/* ============================================================
   PATRIMOINE (offre Pro) — /app/patrimoine
   ============================================================ */
.carte-stat-patrimoine { background: var(--couleur-primaire); border-color: var(--couleur-primaire); }
.carte-stat-patrimoine .chiffre-stat, .carte-stat-patrimoine span { color: #fff; }

.barre-objectif { background: var(--couleur-fond-alt); border-radius: 999px; height: 12px; overflow: hidden; }
.barre-objectif span { display: block; height: 100%; background: var(--couleur-primaire); border-radius: 999px; transition: width .3s ease; }
.objectif-libelle { margin: 0 0 8px; font-weight: 600; font-size: .92rem; }

.carte-patrimoine {
    background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-carte); padding: 20px; margin-bottom: 20px;
}
/* Arrivée depuis le rappel du copilote (#valeur-bien-{id}) : le bien visé est mis en évidence,
   et il ne se retrouve pas collé sous le haut de l'écran. */
.carte-patrimoine { scroll-margin-top: 90px; }
.carte-patrimoine:target { outline: 2px solid var(--couleur-accent); outline-offset: 4px; }
.carte-patrimoine-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.carte-patrimoine-entete strong { display: block; font-size: 1.05rem; }
.carte-patrimoine-cashflow { text-align: right; }
.carte-patrimoine-cashflow span { display: block; }
.carte-patrimoine-cashflow strong { font-size: 1.1rem; }
.carte-patrimoine-chiffres {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--couleur-ligne);
}
.carte-patrimoine-chiffres span { display: block; font-size: .78rem; }
.carte-patrimoine-chiffres strong { font-size: 1rem; }

/* ============================================================
   ASSISTANT PROACTIF — « Conseils du copilote » (tableau de bord)
   ============================================================ */
.conseils-copilote { margin: 8px 0 32px; }
.conseils-entete { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.conseils-entete h2 { margin: 0; }
.conseils-compteur {
    background: var(--couleur-primaire); color: #fff; font-weight: 700; font-size: .82rem;
    min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
}
.liste-conseils { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.conseil {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff;
    border: 1px solid var(--couleur-ligne); border-left: 4px solid var(--couleur-texte-att);
    border-radius: var(--rayon-lg); box-shadow: var(--ombre-carte);
}
.conseil-icone { flex-shrink: 0; display: inline-flex; }
.conseil-corps { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.conseil-corps strong { font-size: .98rem; }
.conseil-corps span { font-size: .88rem; color: var(--couleur-texte-att); }
.conseil-cta { flex-shrink: 0; font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.conseil-cta:hover { text-decoration: underline; }
/* Tonalités */
.conseil--alerte { border-left-color: var(--couleur-danger); }
.conseil--alerte .conseil-icone { color: var(--couleur-danger); }
.conseil--info { border-left-color: var(--couleur-accent); }
.conseil--info .conseil-icone { color: var(--couleur-accent); }
.conseil--succes { border-left-color: var(--couleur-primaire); }
.conseil--succes .conseil-icone { color: var(--couleur-primaire); }

/* Bouton « masquer ce conseil » : discret au repos, il ne doit pas concurrencer visuellement
   l'action utile du conseil (le CTA). Il reste néanmoins toujours présent — le révéler au
   survol le rendrait introuvable au doigt, où il n'y a pas de survol. */
.conseil-masquer-form { flex-shrink: 0; margin: 0; line-height: 0; }
.conseil-masquer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%;
    background: none; color: var(--couleur-ligne); cursor: pointer;
    transition: color .12s ease, background .12s ease;
}
.conseil-masquer:hover { color: var(--couleur-texte-att); background: var(--couleur-fond-alt); }
.conseil-masquer:focus-visible { outline: 2px solid var(--couleur-primaire); outline-offset: 1px; }

.conseils-pied { margin: 12px 0 0; text-align: right; }
.conseils-copilote--vide .conseils-pied { text-align: left; }

@media (max-width: 560px) {
    .conseil { flex-wrap: wrap; }
    .conseil-cta { margin-left: 34px; }
    /* Cible tactile élargie sur mobile, et bouton calé en haut à droite de la carte pour ne pas
       se retrouver coincé entre le texte et le CTA une fois le contenu passé à la ligne. */
    .conseil { position: relative; padding-right: 44px; }
    .conseil-masquer-form { position: absolute; top: 6px; right: 6px; }
    .conseil-masquer { width: 34px; height: 34px; }
    .conseils-pied { text-align: left; }
}

/* ============================================================
   Signature électronique (page publique /signer)
   ============================================================
   Écran d'action sans navigation (voir $pageSansNavigation) : tout doit converger vers la
   lecture du document puis la signature. */

/* Masqué à l'œil, lu par les lecteurs d'écran (libellés des choix de couleur). */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page-signature { max-width: 860px; margin: 0 auto; padding: 24px 16px 60px; }
.signature-entete { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.signature-entete h1 { margin: 0; font-size: 1.5rem; }
.signature-surtitre { margin: 0 0 2px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--couleur-texte-att); }
.signature-destinataire { margin: 0; font-size: 0.9rem; color: var(--couleur-texte-att); }

.signature-carte {
    background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-carte); padding: 22px; margin: 0 0 18px;
}
.signature-carte h2 { margin: 0 0 14px; font-size: 1.05rem; font-family: var(--font-corps); }
.signature-carte--message { text-align: center; max-width: 560px; margin: 40px auto; }
.signature-icone-succes { margin-bottom: 10px; }

/* Visionneuse : hauteur généreuse en desktop, réduite sur mobile pour que le bouton de
   signature reste atteignable sans un défilement interminable. */
.signature-visionneuse { border: 1px solid var(--couleur-ligne); border-radius: var(--rayon); overflow: hidden; background: var(--couleur-fond-alt); }
.signature-visionneuse iframe { display: block; width: 100%; height: 560px; border: 0; }

.signature-onglets { display: flex; gap: 6px; border-bottom: 1px solid var(--couleur-ligne); margin-bottom: 18px; }
.signature-onglet {
    flex: 1; padding: 10px 8px; background: none; border: none; border-bottom: 2px solid transparent;
    font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--couleur-texte-att); cursor: pointer;
}
.signature-onglet--actif { color: var(--couleur-primaire); border-bottom-color: var(--couleur-primaire); }

/* Choix de police : l'aperçu EST le libellé, on juge sur pièce. */
.signature-choix-polices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 14px 0 18px; }
.signature-police {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 84px; padding: 10px; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon);
    cursor: pointer; text-align: center; overflow: hidden;
}
.signature-police--choisie { border-color: var(--couleur-primaire); border-width: 2px; background: var(--couleur-primaire-claire); }
.signature-police input { position: absolute; opacity: 0; pointer-events: none; }
.signature-apercu { font-size: 1.6rem; line-height: 1.3; max-width: 100%; overflow-wrap: anywhere; }
.signature-police-nom { font-size: 0.72rem; color: var(--couleur-texte-att); text-transform: uppercase; letter-spacing: 0.05em; }

.signature-couleurs { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 10px; }
.signature-couleurs legend { float: left; margin-right: 12px; font-size: 0.85rem; font-weight: 600; }
.signature-couleur { width: 26px; height: 26px; border-radius: 50%; background: var(--teinte); cursor: pointer; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--couleur-ligne); }
.signature-couleur:has(input:checked) { border-color: #fff; box-shadow: 0 0 0 2px var(--couleur-primaire); }
.signature-couleur input { position: absolute; opacity: 0; pointer-events: none; }

.signature-zone-dessin { border: 2px dashed var(--couleur-ligne); border-radius: var(--rayon); background: var(--couleur-fond-alt); margin-bottom: 10px; }
/* touch-action: none — sans cela, dessiner au doigt fait défiler la page au lieu de tracer. */
#canvas-signature { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; }

.signature-consentement { margin-bottom: 12px; }
.signature-consentement label { align-items: flex-start; gap: 10px; font-size: 0.92rem; line-height: 1.45; }
.signature-consentement input { margin-top: 3px; }
.signature-mention-preuve { margin: 0 0 18px; }
.signature-formulaire .btn-large { width: 100%; }

.signature-refus { margin-top: 18px; }
.signature-refus summary { cursor: pointer; font-size: 0.85rem; color: var(--couleur-texte-att); }
.signature-refus input[type="text"] { width: 100%; margin: 10px 0 8px; padding: 9px 12px; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon); }

@media (max-width: 720px) {
    .signature-visionneuse iframe { height: 340px; }
    .signature-carte { padding: 16px; }
    .signature-apercu { font-size: 1.35rem; }
}

/* Suivi des demandes de signature (bailleur : /app/signatures — locataire : /locataire/documents) */
.liste-documents-signature { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 32px; }
.carte-document-signature {
    background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-carte); padding: 18px;
}
/* Un document qui attend une action se distingue de l'historique. */
.carte-document-signature--action { border-left: 4px solid var(--couleur-primaire); }
.document-signature-entete { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: flex-start; }
.document-signature-entete h3 { margin: 0 0 2px; font-size: 1rem; font-family: var(--font-corps); }
.document-signature-entete .aide-champ { margin: 0; }

.etat-signature { flex-shrink: 0; padding: 3px 11px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.etat-signature--envoye,
.etat-signature--partiellement_signe { background: #FBF3E9; color: #8A5323; }
.etat-signature--signe { background: var(--couleur-succes-fond); color: var(--couleur-primaire-fonce); }
.etat-signature--refuse,
.etat-signature--annule { background: #F6E7E7; color: #8A2323; }

.liste-signataires { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.liste-signataires li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.88rem; padding: 7px 10px; background: var(--couleur-fond-alt); border-radius: var(--rayon); }
.signataire-nom { font-weight: 600; }
.signataire-etat { margin-left: auto; font-size: 0.82rem; color: var(--couleur-texte-att); }
.signataire-etat--signe { color: var(--couleur-primaire); font-weight: 600; }
.signataire-etat--refuse { color: var(--couleur-danger); }

.document-signature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.document-signature-actions form { margin: 0; }
.empreinte-document { margin: 12px 0 0; font-family: Consolas, Monaco, monospace; font-size: 0.72rem; color: var(--couleur-texte-att); word-break: break-all; }

@media (max-width: 560px) {
    .signataire-etat { margin-left: 0; width: 100%; }
    .document-signature-actions .btn { width: 100%; text-align: center; }
}

/* ============================================================
   Zone de suppression de compte (Mon compte)
   Repliée par défaut : une action irréversible ne doit pas être
   à portée de clic distrait, mais rester trouvable sans nous écrire.
   ============================================================ */

.zone-danger {
    border: 1px solid var(--couleur-danger);
    border-radius: var(--rayon);
    padding: 0 20px;
    margin-top: 12px;
    background: #fff;
}
.zone-danger[open] { padding-bottom: 20px; }
.zone-danger summary {
    cursor: pointer;
    padding: 16px 0;
    font-weight: 600;
    color: var(--couleur-danger);
    list-style-position: inside;
}
.zone-danger summary:hover { text-decoration: underline; }
.zone-danger > p { margin: 0 0 12px; }

.liste-suppression {
    background: var(--couleur-danger-fond);
    border-radius: var(--rayon);
    padding: 14px 18px 14px 36px;
    margin: 0 0 16px;
    line-height: 1.9;
}

.btn-suppression {
    background: var(--couleur-danger);
    color: #fff;
    margin-top: 8px;
}
.btn-suppression:hover { filter: brightness(0.9); }

/* Deux tableaux côte à côte (répartition du journal des documents, admin).
   Repasse en une colonne sous 720px, comme le reste du backoffice. */
.grille-deux-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: start;
}
.grille-deux-colonnes h4 { margin: 0 0 10px; font-size: 0.95rem; }

/* ============================================================
   Bandeau d'essai gratuit / d'accès suspendu (espace bailleur)
   Hors du <header>, donc visible aussi sur mobile, où l'interface
   applicative masque l'en-tête marketing.
   ============================================================ */
.bandeau-essai {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 6px 16px; padding: 10px 20px; font-size: 0.92rem; text-align: center;
    background: var(--couleur-primaire-claire); color: var(--couleur-primaire-fonce);
    border-bottom: 1px solid var(--couleur-ligne);
}
.bandeau-essai a { font-weight: 600; color: inherit; white-space: nowrap; }
.bandeau-essai--urgent { background: #FDF8F0; color: #6B4A24; border-bottom-color: #E8D5B7; }
.bandeau-essai--suspendu {
    background: var(--couleur-danger-fond); color: var(--couleur-danger);
    border-bottom-color: var(--couleur-danger);
}

/* ============================================================
   Tarifs : fonctions incluses dans toutes les offres
   Les offres ne diffèrent que par le nombre de logements : la liste
   des fonctions est commune, affichée une seule fois sous les cartes.
   ============================================================ */
.prix-par-logement { font-size: 0.85rem; color: var(--couleur-texte-att); margin: -4px 0 10px; }
.tarifs-inclus {
    max-width: 920px; margin: 40px auto 0; padding: 28px 32px;
    background: var(--couleur-fond-alt); border-radius: var(--rayon-lg);
}
.tarifs-inclus h2 { margin-top: 0; text-align: center; }
.tarifs-inclus .liste-fonctionnalites {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 32px;
}

/* Montant hors taxe sous chaque prix TTC (tarifs, abonnement). */
.prix-ht { font-size: 0.85rem; color: var(--couleur-texte-att); margin: -4px 0 10px; }

/* ============================================================
   Messages du locataire au bailleur (espace locataire, tableau de bord)
   ============================================================ */
.liste-messages-locataires, .liste-messages-recus {
    list-style: none; padding: 0; margin: 16px 0 36px; display: flex; flex-direction: column; gap: 12px;
}
.liste-messages-locataires li, .liste-messages-recus li {
    background: #fff; border: 1px solid var(--couleur-ligne); border-radius: var(--rayon-lg); padding: 14px 18px;
}
.message-entete { margin: 0 0 6px; }
.message-texte { margin: 0 0 6px; overflow-wrap: anywhere; }

/* ============================================================
   Régularisation des charges intégrée
   ============================================================ */
.form-inline-regularisation { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 16px 0 24px; }
.form-inline-regularisation .form-group { margin: 0; min-width: 200px; }
.decompte-solde--trop-percu .chiffre-stat { color: var(--couleur-primaire); }
.decompte-solde--complement .chiffre-stat { color: var(--couleur-accent); }
.encart-vigilance {
    background: var(--couleur-accent-claire); border-radius: var(--rayon-lg); padding: 14px 18px; margin: 16px 0;
}
.encart-vigilance p { margin: 0; }
.detail-depenses-recuperables { margin: -24px 0 32px; }
.detail-depenses-recuperables summary { cursor: pointer; color: var(--couleur-primaire); }
.actions-decompte { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0 8px; }
.actions-decompte form { margin: 0; }