/* ==========================================================================
   GomArent — feuille unique. Écriture mobile-first : les media queries
   élargissent, jamais l'inverse.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Palette reprise du logo.

   Le logo porte DEUX verts, et la distinction est structurante :
     - le vert profond de « goma » et de la maison porte la structure —
       en-têtes, boutons, titres ;
     - le vert vif de « rent », du swoosh et de la coche est l'accent de
       marque, réservé aux moments de réussite.
   Les confondre ferait perdre au logo ce qui le rend reconnaissable.

   Le texte reprend l'ardoise bleutée de la baseline, pas un gris chaud.
   Le fond est blanc : c'est ce sur quoi le logo est conçu.
   -------------------------------------------------------------------------- */
:root {
    --vert:          #14672B;  /* « goma » — structure, boutons, titres */
    --vert-fonce:    #0E4A1E;  /* survol, en-tête de l'application */
    --vert-vif:      #47B935;  /* « rent », swoosh, coche — accent de marque */

    /* Le même vert, assombri pour porter du TEXTE. --vert-vif donne 2,54:1 sur
       blanc, là où WCAG 1.4.3 en demande 4,5 : superbe en aplat, illisible en
       lettres. Celui-ci monte à 4,95 sur blanc et 4,62 sur --fond-alt.

       Les deux coexistent volontairement. --vert-vif reste juste là où le
       contraste ne s'applique pas — le « rent » du logo (les marques sont
       exemptées) et les ✓ des offres, décoratifs puisque le texte les suit. */
    --vert-vif-texte: #318025;

    --vert-clair:    #E6F4E3;  /* fonds, badge payé */

    /* Ambre et non orange : le logo n'a pas d'orange, et un ambre franc se
       distingue mieux des deux verts qu'un orange tirant vers le rouge. */
    --ambre:         #D98A0B;  /* en attente */
    --ambre-fonce:   #8F5C00;  /* texte sur fond ambre clair */
    --ambre-clair:   #FDF3E0;

    --rouge:         #C62828;  /* en retard */
    --rouge-clair:   #FDEAEA;

    --fond:          #FFFFFF;
    --fond-alt:      #F4F8F5;  /* teinte verte imperceptible, jamais crème */
    --texte:         #2E3D46;  /* ardoise de la baseline du logo */
    /* Assombri de #6A7A83, qui donnait 4,45:1 sur blanc et 4,15 sur --fond-alt
       — sous les 4,5 exigés, alors que c'est la couleur de presque tout le
       corps de texte du site. Passe maintenant à 4,84 et 4,51.

       L'écart à l'œil est nul ; l'écart pour qui lit en plein soleil sur un
       écran bon marché ne l'est pas. */
    --texte-attenue: #65747C;
    --ligne:         #E3E9EC;

    /* Anciens noms conservés en alias : la feuille les utilise encore par
       endroits, et un renommage global à la main est une source d'oublis. */
    --orange:        var(--ambre);
    --orange-fonce:  var(--ambre-fonce);
    --orange-clair:  var(--ambre-clair);

    --rayon: 12px;
    --ombre: 0 1px 3px rgba(46, 61, 70, .08);
}

*, *::before, *::after { box-sizing: border-box; }

/* La pile systeme est en tete du repli : si la police distante tarde ou
   echoue, le texte reste lisible et proche en metriques. */
:root {
    --police: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --police-arabe: "Noto Sans Arabic", var(--police);
}

/* Inter dispose de vraies alternatives typographiques. On active les chiffres
   tabulaires pour que les montants s'alignent en colonne — un « 150 000 » et
   un « 80 000 » superposés doivent avoir leurs chiffres au meme aplomb, sans
   quoi un tableau de loyers devient penible a lire. */
.statistique .valeur,
.loyer .combien,
.quittance-montants td,
.offre .prix {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

body {
    margin: 0;
    font-family: var(--police);
    font-size: 16px;
    line-height: 1.6;
    color: var(--texte);
    background: var(--fond);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[dir="rtl"] body,
html[lang="ar"] body { font-family: var(--police-arabe); }

/* Interlignage resserre et approche negative sur les titres : au-dela de
   24 px, l'espacement par defaut parait laché et le titre perd en tenue. */
h1, h2, h3 {
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 .5em;
    font-weight: 700;
}
h1 { font-size: 1.875rem; font-weight: 800; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.0625rem; letter-spacing: -.01em; }

/* L'arabe ne supporte pas l'approche negative : ses lettres sont liees. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: normal; }

p { margin: 0 0 1rem; }

/* Longueur de ligne : au-dela de 70 caracteres, l'oeil perd le debut de la
   ligne suivante.
   ⚠ Cette regle limite la LARGEUR DE LA BOITE, pas seulement le texte. Dans
   un conteneur centre, la boite reste calee a gauche et le texte parait
   decale meme avec text-align: center. Tout paragraphe centre doit donc
   porter `margin-inline: auto` — voir .hero-rassurance, .reponse, .vide p. */
main p, .carte p { max-width: 68ch; }

a { color: var(--vert); }

/* --- Boutons : cible tactile de 44 px minimum --- */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .625rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.bouton-primaire { background: var(--vert);   color: #fff; }
.bouton-primaire:hover { background: var(--vert-fonce); }
.bouton-secondaire { background: transparent; color: var(--vert); border-color: var(--vert); }
.bouton-accent { background: var(--orange); color: #fff; }

/* --- Statuts : les trois seules couleurs porteuses de sens --- */
.statut {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.statut-paye     { background: var(--vert-clair);   color: var(--vert); }
.statut-attente  { background: var(--orange-clair); color: var(--orange-fonce); }
.statut-retard   { background: var(--rouge-clair);  color: var(--rouge); }

/* --- Filtres de la liste des loyers ---
   Une rangee qui defile horizontalement plutot qu'une grille qui se replie :
   sur un ecran etroit, quatre onglets sur deux lignes cassent la lecture du
   choix unique. Le defilement garde les quatre sur la meme ligne mentale. */
.filtres-statut {
    display: flex;
    gap: .375rem;
    margin-bottom: 1rem;
    padding-bottom: .25rem;
    overflow-x: auto;
    /* Sur iOS, sans cette ligne le defilement s'arrete net au lieu de glisser. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.filtres-statut::-webkit-scrollbar { display: none; }

.onglet-filtre {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    /* 44px : la cible tactile minimale. Un filtre rate est un filtre qui
       renvoie a un autre ecran, pas juste un geste a refaire. */
    min-height: 44px;
    padding: 0 .875rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: var(--fond);
    color: var(--texte);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
.onglet-filtre:hover { border-color: var(--vert); color: var(--vert); }

.onglet-filtre.actif {
    background: var(--vert);
    border-color: var(--vert);
    color: #FFFFFF;
}

/* Le compteur derriere l'onglet : c'est l'information qui decide du clic.
   « En retard (0) » evite d'ouvrir un ecran vide pour le verifier. */
.onglet-filtre .compteur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: var(--fond-alt);
    color: var(--texte-attenue);
    font-size: .75rem;
    font-weight: 700;
}
.onglet-filtre.actif .compteur {
    background: rgba(255, 255, 255, .22);
    color: #FFFFFF;
}

/* --- Formulaires --- */
.champ { margin-bottom: 1rem; }
.champ label { display: block; margin-bottom: .25rem; font-weight: 600; font-size: .9375rem; }

/* Visible des lecteurs d'ecran, invisible a l'oeil.
   Ni `display:none` ni `visibility:hidden` : les deux retireraient l'element
   de l'arbre d'accessibilite, ce qui rendrait l'etiquette inutile. */
.hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Pays + numero sur une ligne ---
   La liste prend juste ce qu'il lui faut, le numero occupe le reste. En
   dessous de 380 px les deux passent l'un sous l'autre : cote a cote, le
   champ du numero devenait trop etroit pour dix chiffres. */
.champ-telephone { display: flex; gap: .5rem; }
.champ-telephone select { flex: 0 0 auto; width: auto; max-width: 45%; }
.champ-telephone input  { flex: 1 1 auto; min-width: 0; }

@media (max-width: 380px) {
    .champ-telephone { flex-direction: column; }
    .champ-telephone select { max-width: 100%; width: 100%; }
}
.champ input, .champ select, .champ textarea {
    width: 100%;
    min-height: 44px;
    padding: .625rem .75rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    font-size: 1rem;      /* 16px : en dessous, iOS zoome au focus */
    background: #fff;
    color: var(--texte);
}
.champ input:focus, .champ select:focus {
    outline: 2px solid var(--vert);
    outline-offset: 1px;
}

.erreur {
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--rayon);
    background: var(--rouge-clair);
    color: var(--rouge);
    font-size: .9375rem;
}

.conteneur { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1rem; }
.carte {
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1rem;
}

@media (min-width: 768px) {
    .conteneur { padding: 1.5rem 2rem; }
    h1 { font-size: 2.125rem; }
}

/* ==========================================================================
   Application — barre de navigation, statistiques, liste des loyers
   Ecriture en proprietes logiques (inline-start/end) : la feuille se retourne
   seule en arabe, sans feuille RTL separee a maintenir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mot-marque en deux tons, repris du logo : « goma » profond, « rent » vif.
   Ecrit en HTML plutot qu'en image — net a toute taille, selectionnable, et
   il s'adapte au fond sur lequel il est pose.
   -------------------------------------------------------------------------- */
.mot-marque {
    font-weight: 800;
    letter-spacing: -.03em;
    white-space: nowrap;
}
.mot-marque .goma { color: var(--vert); }
.mot-marque .rent { color: var(--vert-vif); }

/* Sur fond vert fonce, le vert profond disparaitrait : la premiere syllabe
   passe en blanc, la seconde garde l'accent de marque. */
.entete-app .mot-marque .goma,
.pied .mot-marque .goma { color: #fff; }

.icone { width: 22px; height: 22px; flex: 0 0 auto; }

/* --- En-tete de l'application ---------------------------------------------
   Sur mobile : marque a gauche, deconnexion a droite, et rien d'autre. La
   navigation descend dans la barre d'onglets du bas, atteignable au pouce.
   Un defilement horizontal de liens en haut d'ecran cachait les dernieres
   entrees et obligeait a changer de prise en main.                        */

.entete-app {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--vert-fonce);
    color: #fff;
    padding: .75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.entete-app a { color: #fff; text-decoration: none; }
.entete-app .marque { font-weight: 700; font-size: 1.125rem; }

.nav-large { display: none; }

.entete-app .deconnexion {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /* 44 px de cible tactile, meme si l'icone n'en fait que 22. */
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    opacity: .85;
}
.entete-app .deconnexion:hover { opacity: 1; }
.libelle-deconnexion { display: none; }

/* --- Barre d'onglets, mobile uniquement --- */
.onglets {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--ligne);
    /* Zone reservee au trait de navigation des iPhone recents. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.onglets a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1875rem;
    min-height: 56px;
    padding: .375rem .25rem;
    color: var(--texte-attenue);
    text-decoration: none;
    font-size: .6875rem;
    line-height: 1.2;
    text-align: center;
}
.onglets a.actif { color: var(--vert); font-weight: 600; }
.onglets a.actif .icone { stroke-width: 2.2; }

/* Sans cette reserve, la barre fixe masque la fin de chaque page. */
body.avec-onglets { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }

.bandeau-bloquant {
    background: var(--rouge-clair);
    color: var(--rouge);
    padding: .75rem 1rem;
    font-size: .9375rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--rouge);
}

.bandeau-essai {
    background: var(--orange-clair);
    color: var(--orange-fonce);
    padding: .625rem 1rem;
    font-size: .9375rem;
    text-align: center;
}

.bandeau-succes {
    background: var(--vert-clair);
    color: var(--vert);
    border: 1px solid var(--vert);
    border-radius: var(--rayon);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Message de confirmation qui s'efface seul.
   En CSS et non en JavaScript : l'application n'en charge aucun, et le
   comportement survit a un script bloque. Sans animation du tout, le bandeau
   reste affiche — c'est l'ancien comportement, pas une page cassee.

   La hauteur, les marges et la bordure sont ramenees a zero en fin
   d'animation : une simple opacite laisserait un trou blanc au-dessus du
   contenu. */
.bandeau-succes.ephemere {
    animation: effacer-bandeau .5s ease-in 8s forwards;
}

@keyframes effacer-bandeau {
    from { opacity: 1; }
    to {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        border-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Le message disparait quand meme — c'est le MOUVEMENT qui gene, pas le
       fait qu'il s'en aille. On supprime le fondu, pas l'effacement. */
    .bandeau-succes.ephemere { animation-duration: .01s; }
}

/* --- Boutons WhatsApp (liens wa.me, envoi manuel par le bailleur) --- */
.bouton-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    /* 44px : cible tactile minimale. */
    min-height: 44px;
    padding: 0 1rem;
    border-radius: var(--rayon);
    /* Le vert officiel de WhatsApp : le bailleur reconnait la destination
       avant de lire le libelle. */
    background: #25D366;
    color: #FFFFFF;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.bouton-whatsapp::before { content: "💬"; }
.bouton-whatsapp:hover   { background: #1FAF52; color: #FFFFFF; }

/* Variante compacte, pour une ligne de liste ou une pastille d'action. */
.bouton-whatsapp.compact {
    min-height: 36px;
    padding: 0 .75rem;
    font-size: .8125rem;
}

/* Accole au message de succes. En colonne sur mobile : cote a cote, le texte
   du message ecraserait le bouton sur un ecran etroit. */
.bandeau-succes .bouton-whatsapp { margin-top: .625rem; }

@media (min-width: 640px) {
    /* Assez large pour tenir sur la meme ligne que le message. */
    .bandeau-succes { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .bandeau-succes .bouton-whatsapp { margin-top: 0; flex: 0 0 auto; }
}

/* --- Cartes de statistiques : 2x2 sur mobile, 4 colonnes sur large --- */
.statistiques {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin: 1rem 0 1.5rem;
}
.statistique {
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    padding: .875rem;
}
.statistique .libelle {
    font-size: .8125rem;
    color: var(--texte-attenue);
    margin-bottom: .25rem;
}
.statistique .valeur {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}
.statistique.attendu   .valeur { color: var(--texte); }
.statistique.encaisse  .valeur { color: var(--vert); }
.statistique.attente   .valeur { color: var(--orange-fonce); }
.statistique.retard    .valeur { color: var(--rouge); }

/* --- Liste des loyers : cartes empilees sur mobile --- */
.loyer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 0;
    border-bottom: 1px solid var(--ligne);
}
.loyer:last-child { border-bottom: 0; }
.loyer .qui { font-weight: 600; }
.loyer .ou,
.loyer .quand { font-size: .875rem; color: var(--texte-attenue); }
.loyer .combien { font-weight: 700; white-space: nowrap; }
.loyer .droite { text-align: end; }
.loyer .detail { font-size: .8125rem; color: var(--texte-attenue); margin-top: .25rem; }

.vide {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--texte-attenue);
}
.vide p { margin: .5rem auto 1.25rem; }

.actions-rapides {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* Titre de page et son action, sur une seule ligne.
   nowrap volontaire : si le bouton passait a la ligne, on retomberait sur ce
   qu'on cherchait justement a eviter. C'est le titre qui se replie. */
.entete-page {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}
.entete-page h1 {
    margin: 0;
    /* Sans min-width, un titre long refuserait de se replier et pousserait le
       bouton hors de l'ecran. */
    min-width: 0;
}

.bouton-ajouter {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    /* 44px : cible tactile minimale. Le bouton est compact en largeur, pas en
       hauteur — on doit pouvoir l'atteindre au pouce. */
    min-height: 44px;
    padding: 0 .875rem;
    border-radius: 999px;
    background: var(--vert);
    color: #FFFFFF;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
/* Le « + » vit dans la feuille de style : un traducteur n'a pas a transporter
   de la ponctuation. En arabe, il se place naturellement a droite. */
.bouton-ajouter::before {
    content: "+";
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}
.bouton-ajouter:hover { background: var(--vert-fonce); color: #FFFFFF; }

/* ==========================================================================
   Vitrine publique
   ========================================================================== */

.entete-public {
    background: #fff;
    border-bottom: 1px solid var(--ligne);
    position: sticky;
    top: 0;
    z-index: 10;
}
.entete-public-interieur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding-block: .75rem;
}
.entete-public .marque {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--vert);
    text-decoration: none;
}
.entete-public nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .9375rem;
}

/*
 * Sur un ecran etroit, l'ecart d'1 rem entre quatre elements consomme a lui
 * seul 48 px — assez pour faire passer la barre sur deux lignes. On le
 * resserre, et l'on interdit le retour a la ligne : une barre de navigation
 * qui se dedouble mange la moitie du premier ecran.
 */
@media (max-width: 480px) {
    .entete-public nav { gap: .5rem; flex-wrap: nowrap; }
    .entete-public-interieur { gap: .5rem; flex-wrap: nowrap; }

    /*
     * « Essai gratuit » sur deux lignes, mesure a 320 px : le bouton se
     * comprimait puis coupait son libelle, et c'est LUI qui doublait la
     * hauteur de la barre — pas le selecteur de langue, qui tient en 51 px.
     *
     * `flex-shrink: 0` le protege de la compression ; le retrait de padding
     * lui rend les quelques pixels qu'il perd ainsi aux autres.
     */
    .entete-public nav .bouton-compact {
        flex-shrink: 0;
        white-space: nowrap;
        padding-inline: .75rem;
    }
}
.entete-public nav a { color: var(--texte); text-decoration: none; }
.entete-public nav a:hover { color: var(--vert); }

/* Le bouton du menu, lui, garde son texte blanc.
   `.entete-public nav a` est plus specifique que `.bouton-primaire` et
   l ecrasait : le libelle sortait en ardoise sur fond vert, illisible. */
.entete-public nav a.bouton-primaire,
.entete-public nav a.bouton-primaire:hover { color: #fff; }

/* --- Connexion en icone ---
   La cible fait 44 px : c'est le minimum tenable au doigt, et une icone de
   20 px seule serait deux fois trop petite pour etre visee sur un telephone.
   Le trait reste attenue pour ne pas concurrencer le bouton d'essai. */
.lien-connexion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
}
.lien-connexion svg { width: 1.375rem; height: 1.375rem; }

/* Selecteur complet, et non `.lien-connexion` seul : `.entete-public nav a`
   est plus specifique et gagnerait — la meme regle qui sortait le bouton
   d'essai en ardoise sur fond vert. */
.entete-public nav a.lien-connexion { color: var(--texte-attenue); }
.entete-public nav a.lien-connexion:hover {
    color: var(--vert);
    background: var(--vert-clair);
}
.bouton-compact { min-height: 38px; padding: .375rem .875rem; font-size: .9375rem; }

/* --- Selecteur de langue : menu deroulant ---
   A quatre langues, la rangee de liens disputait sa place au bouton d'essai
   sur un ecran de telephone. Replie, le selecteur ne coute plus qu'une cible.

   `position: relative` porte la liste : elle se detache du flux et ne pousse
   donc jamais la barre de navigation vers le bas en s'ouvrant. */
.langues { position: relative; }

.langues > summary {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    /* Le code et le chevron ne se separent jamais : sans cela le selecteur
       casse en deux lignes des que la barre se resserre. */
    white-space: nowrap;
    /* 40 px : la cible tactile minimale. En dessous, on rate le selecteur et
       on ouvre le bouton d'a cote. */
    min-height: 40px;
    padding: .25rem .5rem;
    border-radius: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--texte-attenue);
    cursor: pointer;
    /* Retire le triangle natif : on pose notre propre chevron, qui pivote. */
    list-style: none;
}
.langues > summary::-webkit-details-marker { display: none; }
.langues > summary:hover { background: var(--fond-alt); color: var(--texte); }

.langue-chevron {
    width: .875rem;
    height: .875rem;
    transition: transform .15s ease;
}
.langues[open] > summary .langue-chevron { transform: rotate(180deg); }

/* Le drapeau est un caractere, pas une image. Windows ne sait pas les rendre
   et affiche les deux lettres du pays a la place : le code juste a cote reste
   donc lisible dans tous les cas, et rien n'est perdu. */
.langue-drapeau { font-size: 1rem; line-height: 1; }
.langue-code { letter-spacing: .02em; }

.langues-liste {
    position: absolute;
    /*
     * Aligne sur le bord de DEBUT du selecteur, pas sur celui de fin.
     *
     * Aligner sur la fin paraissait naturel — c'est ce que fait un menu pose
     * au bout d'une barre. Mais le selecteur de langue n'est PAS au bout : il
     * precede l'icone de connexion et le bouton d'essai. Aligne par la fin,
     * la liste partait donc vers la gauche et sortait de l'ecran de 91 px sur
     * un telephone. Mesure, pas suppose.
     *
     * inset-inline-start et non `left` : en arabe, la barre est inversee et
     * la regle se retourne d'elle-meme.
     */
    inset-inline-start: 0;
    top: calc(100% + .25rem);
    z-index: 20;
    min-width: 11rem;
    margin: 0;
    padding: .25rem;
    list-style: none;
    background: var(--fond);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: 0 6px 20px rgba(46, 61, 70, .12);
}

.langues-liste a {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 40px;
    padding: .25rem .5rem;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--texte);
    text-decoration: none;
    white-space: nowrap;
}
.langues-liste a:hover { background: var(--fond-alt); }
.langues-liste a.actif { background: var(--vert-clair); color: var(--vert); }

/* Deplie, la liste a la place d'ecrire les noms en entier : c'est justement
   ce qu'on ne pouvait pas faire dans une rangee. Le code reste, en retrait,
   pour qui cherche « FR » plutot que « Français ». */
.langues-liste .langue-code {
    min-width: 1.75rem;
    color: var(--texte-attenue);
    font-size: .75rem;
}

/* Sur la ligne active, le code suit la couleur de sa ligne au lieu de rester
   attenue : #65747C sur le fond --vert-clair ne donne que 4,24:1, sous les 4,5
   exiges. En --vert il monte a 6,13.

   Trouve par Pa11y, pas par moi. Je n'avais croise le texte attenue qu'avec le
   blanc et --fond-alt, en oubliant qu'une ligne selectionnee a son propre fond.
   Enumerer a la main les paires qu'on croit exister ne vaut rien : c'est celle
   a laquelle on ne pense pas qui echoue.

   La regle vise le SPAN et non le lien : `.langues-liste a.actif` posait deja
   la couleur sur le parent, mais une regle qui atteint l'enfant l'emporte
   toujours sur ce dont il herite. */
.langues-liste a.actif .langue-code { color: var(--vert); }

.hero {
    text-align: center;
    padding: 3rem 1rem 2.5rem;
    max-width: 780px;
    margin-inline: auto;
}
.hero h1 { font-size: 2rem; letter-spacing: -.02em; }
.hero-sous-titre {
    font-size: 1.125rem;
    color: var(--texte-attenue);
    max-width: 42ch;
    margin-inline: auto;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin: 1.75rem 0 .75rem;
}
/* --------------------------------------------------------------------------
   Arguments du hero.

   Deux pastilles entre la promesse et l'appel a l'action : elles repondent
   aux deux objections d'un proprietaire d'Afrique de l'Ouest — « est-ce fait
   pour ma monnaie » et « est-ce dans ma langue » — avant qu'il n'ait a les
   formuler. Une pastille de plus les diluerait.

   <ul> et non une suite de <div> : c'est une liste d'arguments, et un lecteur
   d'ecran doit l'annoncer comme telle.
   -------------------------------------------------------------------------- */
.arguments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}
.argument {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .4375rem .875rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: #fff;
    font-size: .875rem;
    font-weight: 500;
    color: var(--texte);
    /* Le contenu est court et ne doit jamais se couper en deux lignes. */
    white-space: nowrap;
}
.icone-argument {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    /* Le vert vif du logo, seul point de couleur de la pastille. */
    color: var(--vert-vif);
}

.hero-rassurance {
    font-size: .875rem;
    color: var(--texte-attenue);
    /* auto sur l'axe horizontal : sans lui, la boite bornee a 68ch reste
       calee a gauche et la ligne parait decalee sous les boutons. */
    margin: .875rem auto 0;
    /* Chiffres tabulaires : « 14 » et « 2 » restent stables si la duree
       d'essai change un jour. */
    font-variant-numeric: tabular-nums;
}

.bande { background: var(--fond-alt); padding: 2.5rem 0; margin: 2.5rem 0; }
.bande h2, .conteneur > h2 { text-align: center; }
.sous-titre-section {
    text-align: center;
    color: var(--texte-attenue);
    max-width: 52ch;
    margin: 0 auto 1.75rem;
}

.liste-croix {
    list-style: none;
    padding: 0;
    max-width: 34rem;
    margin: 1.25rem auto;
}
.liste-croix li {
    padding: .5rem 0 .5rem 1.75rem;
    position: relative;
    color: var(--texte-attenue);
}
/* Propriete logique : la croix passe a droite en arabe, sans regle dediee. */
.liste-croix li { padding-inline-start: 1.75rem; padding-inline-end: 0; }
.liste-croix li::before {
    content: '✕';
    position: absolute;
    inset-inline-start: 0;
    color: var(--rouge);
    font-weight: 700;
}
.reponse {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vert);
    /* auto horizontal, meme raison que .hero-rassurance. */
    margin: 1.5rem auto 0;
}

.grille-trois { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grille-trois h3 { font-size: 1.0625rem; }
.grille-trois p { color: var(--texte-attenue); font-size: .9375rem; margin-bottom: 0; }

.etapes { list-style: none; padding: 0; max-width: 40rem; margin-inline: auto; }
.etapes li { display: flex; gap: 1rem; padding: .875rem 0; }
/* La pastille porte desormais un emoji et non plus un chiffre. Le fond vert
   plein et le texte blanc sont donc partis : un emoji est deja colore, et le
   poser sur un aplat vert le rendait sale. Fond pale, glyphe plus grand. */
.etapes .numero {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--vert-clair);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    line-height: 1;
}
.etapes p { color: var(--texte-attenue); font-size: .9375rem; margin: .25rem 0 0; }
.etiquette {
    display: inline-block;
    margin-inline-start: .5rem;
    padding: .0625rem .5rem;
    border-radius: 999px;
    background: var(--orange-clair);
    color: var(--orange-fonce);
    font-size: .75rem;
    font-weight: 600;
}

.offre { display: flex; flex-direction: column; position: relative; }
.offre-populaire { border-color: var(--vert); border-width: 2px; }
.etiquette-offre {
    position: absolute;
    top: -.75rem;
    inset-inline-start: 1rem;
    background: var(--vert);
    color: #fff;
    padding: .125rem .625rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.offre .prix { font-size: 1.5rem; font-weight: 700; color: var(--vert); margin-top: .5rem; }
.offre .par-mois { font-size: .875rem; font-weight: 400; color: var(--texte-attenue); }
.offre .limite { font-size: .875rem; color: var(--texte-attenue); margin-bottom: .75rem; }
/* Le `flex: 1` qui alignait les boutons est passe sur `.points-offre` : depuis
   que la liste suit le paragraphe, le laisser ici creusait un blanc entre les
   deux au lieu de pousser le bouton en bas. */
.offre p { color: var(--texte-attenue); font-size: .9375rem; }
.offre .bouton { width: 100%; }

.conteneur-etroit { max-width: 620px; }
textarea {
    width: 100%;
    padding: .625rem .75rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--texte);
}
textarea:focus { outline: 2px solid var(--vert); outline-offset: 1px; }

/* Piege a robots : retire du flux sans display:none, que certains
   automates detectent pour ignorer le champ. */
.piege {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- FAQ : accordeon natif <details>/<summary> --- */
.faq { margin-top: 1.5rem; }
.faq details {
    border-bottom: 1px solid var(--ligne);
}
.faq details:first-child { border-top: 1px solid var(--ligne); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* 44 px de cible tactile, question lisible sans zoomer. */
    min-height: 44px;
    padding: 1.125rem 0;
    font-weight: 600;
    font-size: 1.0625rem;
    cursor: pointer;
    list-style: none;
    color: var(--texte);
}
/* Safari affiche un triangle par defaut, remplace par notre chevron. */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '';
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-inline-end: 2px solid var(--vert);
    border-bottom: 2px solid var(--vert);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform .18s ease;
    margin-bottom: 4px;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.faq summary:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
.faq-reponse {
    padding-bottom: 1.25rem;
    color: var(--texte-attenue);
    max-width: 64ch;
}

/* Les chevrons pointent dans le bon sens en lecture droite-a-gauche. */
[dir="rtl"] .faq summary::after {
    border-inline-end: 0;
    border-inline-start: 2px solid var(--vert);
}

.appel-final {
    background: var(--vert);
    color: #fff;
    text-align: center;
    padding: 3.5rem 0;
    margin-top: 3rem;
}
.appel-final h2 { font-size: 1.75rem; margin-bottom: .5rem; }
.appel-final p {
    max-width: 46ch;
    margin: 0 auto 1.75rem;
    opacity: .9;
}
.bouton-clair { background: #fff; color: var(--vert); }
.bouton-clair:hover { background: var(--vert-clair); }

/* --- Pied de page --- */
.pied {
    background: var(--vert-fonce);
    color: #fff;
    padding-top: 3rem;
}
.pied-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
}
.pied-logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.pied-promesse {
    margin-top: .5rem;
    font-size: .9375rem;
    opacity: .75;
    max-width: 34ch;
}
.pied-colonne { display: flex; flex-direction: column; gap: .5rem; }
/* .62 et non .55 : a .55, du blanc sur --vert-fonce se compose en #93AE9A,
   soit 4,34:1 — sous les 4,5 exiges, sur un titre deja reduit a 12 px et en
   capitales. A .62 il donne 5,04:1 et reste tout aussi discret.

   Cette couleur-la n'existe nulle part dans la feuille : elle nait de
   l'opacite. C'est pour cela que mon croisement des jetons ne pouvait pas la
   voir, et que Lighthouse, qui lit le rendu compose, l'a trouvee tout de
   suite. */
.pied-colonne h3 {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .62;
    margin: 0 0 .25rem;
    font-weight: 600;
}
.pied-colonne a {
    color: #fff;
    text-decoration: none;
    font-size: .9375rem;
    opacity: .8;
    /* Cible tactile confortable sans etirer la colonne. */
    padding: .1875rem 0;
}
.pied-colonne a:hover { opacity: 1; text-decoration: underline; }
.pied-note { font-size: .8125rem; opacity: .62; margin: .25rem 0 0; }

.pied-bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding-block: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .8125rem;
    opacity: .62;
}

@media (min-width: 768px) {
    .pied-grille { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
    .appel-final h2 { font-size: 2.125rem; }
}

@media (min-width: 768px) {
    .hero { padding: 4.5rem 1rem 3.5rem; }
    .hero h1 { font-size: 2.75rem; }
    .grille-trois { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Relances
   ========================================================================== */

.regle { padding: 1rem 0; border-bottom: 1px solid var(--ligne); }
.regle:last-child { border-bottom: 0; }
.regle-inactive { opacity: .55; }
.regle-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}
.gabarit {
    background: var(--fond-alt);
    border-radius: var(--rayon);
    padding: .75rem;
    margin: .5rem 0;
    font-family: inherit;
    font-size: .875rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--texte-attenue);
}

/* ==========================================================================
   Quittance — vue ecran et mise en page d'impression
   ========================================================================== */

.page-quittance { background: var(--fond-alt); }
.actions-quittance {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 800px;
    margin: 1rem auto;
    padding-inline: 1rem;
}
.quittance {
    background: #fff;
    max-width: 800px;
    margin: 0 auto 2rem;
    padding: 2.5rem 2rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
}
.quittance-entete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--vert);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.quittance-marque { color: var(--vert); font-weight: 700; font-size: 1.125rem; }
.quittance h1 { font-size: 1.25rem; margin: .25rem 0 0; letter-spacing: .02em; }
.quittance-numero { font-size: .8125rem; color: var(--texte-attenue); text-align: end; }
.quittance-parties {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}
.quittance-libelle {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-attenue);
    margin-bottom: .25rem;
}
.quittance-montants { width: 100%; border-collapse: collapse; }
.quittance-montants th,
.quittance-montants td {
    padding: .625rem 0;
    border-bottom: 1px solid var(--ligne);
    text-align: start;
}
.quittance-montants th { font-weight: 400; color: var(--texte-attenue); }
.quittance-montants td { text-align: end; font-weight: 600; }
.quittance-total th,
.quittance-total td { font-size: 1.125rem; color: var(--vert); font-weight: 700; }
.quittance-mention {
    margin-top: 1.5rem;
    font-size: .875rem;
    color: var(--texte-attenue);
    line-height: 1.6;
}
.quittance-signature {
    margin-top: 2.5rem;
    text-align: end;
    font-weight: 600;
}

@media (min-width: 640px) {
    .quittance-parties { grid-template-columns: 1fr 1fr; }
}

/* Impression : la quittance seule, sans decor ni boutons. */
@media print {
    .actions-quittance { display: none; }
    body, .page-quittance { background: #fff; }
    .quittance {
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
    }
}

/* --------------------------------------------------------------------------
   Page paiements : filtres, recapitulatif, repartition par moyen
   -------------------------------------------------------------------------- */
.filtres {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .625rem 1rem;
    margin-bottom: 1.25rem;
}
.filtres .champ { margin-bottom: 0; }
.filtres .champ label { font-size: .8125rem; }
.filtres-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.recapitulatif {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.125rem;
    margin-bottom: 1rem;
    background: var(--vert-clair);
    border-radius: var(--rayon);
}
.recapitulatif-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vert);
    font-variant-numeric: tabular-nums;
}
.recapitulatif-detail { font-size: .875rem; color: var(--texte-attenue); }

.repartition {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.repartition li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .375rem .75rem;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    font-size: .875rem;
}
.repartition strong { font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
    .filtres { grid-template-columns: repeat(5, 1fr); align-items: end; }
    .filtres-actions { grid-column: auto; }
}

.barre-recherche {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}
.barre-recherche input {
    flex: 1;
    min-width: 0;          /* sans quoi le champ deborde de son conteneur flex */
    min-height: 44px;
    padding: .625rem .75rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    font-size: 1rem;       /* 16px : en dessous, iOS zoome au focus */
    background: #fff;
    color: var(--texte);
}
.barre-recherche input:focus { outline: 2px solid var(--vert); outline-offset: 1px; }

.total-calcule {
    background: var(--vert-clair);
    border-radius: var(--rayon);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--vert);
}

.deux-colonnes { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }

@media (min-width: 768px) {
    /* Sur large, la navigation remonte dans l'en-tete : le pointeur atteint
       le haut de l'ecran aussi facilement que le bas, et la barre d'onglets
       mangerait de la hauteur utile pour rien. */
    .entete-app { padding: 1rem 2rem; gap: 2rem; justify-content: flex-start; }
    .nav-large {
        display: flex;
        gap: 1.5rem;
        font-size: .9375rem;
        margin-inline-end: auto;
    }
    .nav-large a { opacity: .75; padding-bottom: .25rem; white-space: nowrap; }
    .nav-large a.actif { opacity: 1; border-bottom: 2px solid #fff; font-weight: 600; }
    .libelle-deconnexion { display: inline; }
    .onglets { display: none; }
    body.avec-onglets { padding-bottom: 0; }

    .statistiques { grid-template-columns: repeat(4, 1fr); }
    .statistique { padding: 1.125rem; }
    .statistique .valeur { font-size: 1.5rem; }
    .deux-colonnes { grid-template-columns: 1fr 1fr; }
}

/* Groupe d'actions de l'en-tete applicatif : parametres puis deconnexion. */
.entete-actions { display: flex; align-items: center; gap: .25rem; }
.entete-actions [aria-current="page"] { opacity: 1; }

/* --------------------------------------------------------------------------
   Documents juridiques : lecture longue, colonne etroite, hierarchie sobre.
   -------------------------------------------------------------------------- */
.juridique {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}
.juridique h1 { font-size: 1.75rem; }
.juridique h2 {
    font-size: 1.0625rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ligne);
    text-align: start;   /* la regle globale centre les h2, pas ici */
}
.juridique p, .juridique li { color: var(--texte-attenue); }
.juridique strong { color: var(--texte); }
.juridique ul { padding-inline-start: 1.25rem; }
.juridique li { margin-bottom: .375rem; }
.juridique-date { font-size: .875rem; }
.juridique-langue {
    padding: .625rem .875rem;
    background: var(--fond-alt);
    border-radius: var(--rayon);
    font-size: .875rem;
}
.juridique-lien { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ligne); }

/* Trou visible plutot qu'une mention legale muette : une information
   obligatoire manquante doit sauter aux yeux, pas se fondre dans le texte. */
.a-completer {
    background: var(--ambre-clair);
    color: var(--ambre-fonce);
    padding: .0625rem .375rem;
    border-radius: 4px;
    font-size: .875rem;
    font-weight: 600;
}

/* Zone d'actions irreversibles : separee visuellement du reste du formulaire
   pour qu'on ne l'atteigne pas par inadvertance en tabulant. */
.zone-danger { margin-top: 2rem; border-color: var(--rouge); }
.zone-danger h2 { color: var(--rouge); font-size: 1.0625rem; }
.zone-danger p { font-size: .9375rem; color: var(--texte-attenue); }
.bouton-danger { background: var(--rouge); color: #fff; }
.bouton-danger:hover { background: #A31F1F; }

/* --- Saisies hors ligne en attente ---
   Ambre comme le bandeau hors ligne : meme famille de message, meme couleur.
   Le bailleur apprend une seule convention. */
[data-file-attente] { margin-bottom: 1rem; }
.file-attente, .file-refus {
    padding: .625rem .875rem;
    border-radius: var(--rayon);
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
.file-attente {
    background: var(--ambre-clair);
    border: 1px solid var(--ambre);
    color: var(--ambre-fonce);
}
/* Un refus est une saisie PERDUE si le bailleur ne la refait pas : il doit
   se distinguer d une simple attente. */
.file-refus {
    background: var(--rouge-clair);
    border: 1px solid var(--rouge);
    color: var(--rouge);
}
.file-refus a { color: inherit; }

/* --- En-tete des ecrans d authentification ---
   Le logo est centre et respire : c est le premier ecran que voit un bailleur,
   et souvent le seul avant qu il ne decide de creer un compte. */
.entete-formulaire {
    margin: 2rem 0 1.5rem;
    text-align: center;
}
.entete-formulaire a {
    display: inline-block;
    text-decoration: none;
    font-size: 1.5rem;
}

/* Taille FIXE : 300 x 100. La largeur relative laissait le logo grandir avec
   la colonne, jusqu a ecraser le formulaire.

   object-fit: contain protege des proportions : si le fichier depose n est pas
   exactement en 3:1, il est mis a l echelle dans le cadre au lieu d etre
   etire. Un logo deforme se remarque plus qu un logo un peu plus petit.

   max-width sert aux ecrans tres etroits, ou 300 px ne tiendraient pas. */
.logo-formulaire {
    display: block;
    width: 300px;
    height: 100px;
    max-width: 100%;
    object-fit: contain;
    margin-inline: auto;
}

/* --- Proposition d installation ---
   Vert clair et non ambre : c est une invitation, pas un avertissement. Les
   couleurs d alerte sont reservees a ce qui demande une action. */
.carte-installer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    position: relative;
    padding: .875rem 2.25rem .875rem 1rem;
    margin-bottom: 1rem;
    background: var(--vert-clair);
    border: 1px solid var(--vert);
    border-radius: var(--rayon);
}
.installer-texte { flex: 1 1 12rem; min-width: 0; }
.installer-texte strong { display: block; color: var(--vert); }
.installer-texte span {
    display: block;
    font-size: .875rem;
    color: var(--texte-attenue);
}
.carte-installer .bouton { flex: 0 0 auto; }

/* Croix en position absolue : elle ne doit pas pousser le bouton a la ligne
   sur un ecran etroit. 44 px de cible, comme partout. */
.installer-fermer {
    position: absolute;
    top: .25rem;
    inset-inline-end: .25rem;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--texte-attenue);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* --- Vitrine : surtitre du hero ---
   Au-dessus du titre, en vert vif : c est la promesse qui distingue GomaRent
   de ses concurrents, et elle se lit avant le reste.

   D'ou la version assombrie du vert : c'etait la PREMIERE ligne de la page, et
   la moins lisible de toutes. Une promesse qu'on ne dechiffre pas ne distingue
   de rien. */
.hero-surtitre {
    margin: 0 0 .5rem;
    color: var(--vert-vif-texte);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- Vitrine : bandeau de reassurance ---
   Les emoji tiennent lieu de pictogrammes : aucune image a telecharger, et
   ils survivent au mode hors ligne. */
.rassurances {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 1rem;
    background: var(--fond-alt);
    border-radius: var(--rayon);
}
.rassurances li {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--texte);
    white-space: nowrap;
}

/* --- Vitrine : « Vous vous reconnaissez ? » ---
   Respiration entre la liste des irritants et la promesse. Centre et etroit :
   c est un paragraphe qu on lit, pas une section qu on parcourt. */
.reconnaissez {
    max-width: 38rem;
    margin: 1.5rem auto 0;
    text-align: center;
}
.reconnaissez h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.reconnaissez p  { color: var(--texte-attenue); margin: 0; }

/* --- Vitrine : encart hors ligne ---
   Encadre plutot que fondu dans la page : c est l argument que les
   concurrents n ont pas, il ne doit pas se lire comme un paragraphe de plus. */
.encart-hors-ligne {
    max-width: 40rem;
    margin-inline: auto;
    padding: 1.5rem;
    background: var(--vert-clair);
    border: 1px solid var(--vert);
    border-radius: var(--rayon);
    text-align: center;
}
.encart-hors-ligne h2 { font-size: 1.25rem; margin-bottom: .5rem; color: var(--vert); }
.encart-hors-ligne p  { margin: 0; color: var(--texte); }

/* --- Vitrine : points d une offre ---
   La coche est en ::before et non dans le texte : elle reste hors du contenu
   traduit, et un lecteur d ecran ne lit pas « coche » avant chaque ligne. */
.points-offre {
    flex: 1;              /* pousse le bouton en bas : cartes alignees */
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    text-align: start;
}
.points-offre li {
    position: relative;
    padding-inline-start: 1.375rem;
    margin-bottom: .5rem;
    font-size: .875rem;
    color: var(--texte-attenue);
    line-height: 1.4;
}
.points-offre li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: var(--vert-vif);
    font-weight: 700;
}

/* --- Vitrine : entrees de menu reservees au grand ecran ---
   A cinq entrees, la barre depassait la largeur d un telephone. Les ancres
   sortent du menu sur mobile ; la page reste atteignable en defilant. */
.nav-large-seulement { display: none; }

@media (min-width: 768px) {
    .nav-large-seulement { display: inline; }
}

/* --- Vitrine : tutoriels ---
   Meme <details> que la FAQ, seulement precedes de leur propre titre : ce
   sont des questions elles aussi, posees sous forme de geste. */
.tuto-titre {
    margin: 2.5rem 0 .25rem;
    font-size: 1.25rem;
    text-align: center;
}
.tuto-sous-titre {
    margin: 0 0 1rem;
    text-align: center;
    color: var(--texte-attenue);
    font-size: .9375rem;
}
/* padding-inline-start et non padding-left : les chiffres passent a droite
   en arabe, ou la liste se lit dans l autre sens. */
.tuto-etapes {
    margin: 0;
    padding-inline-start: 1.25rem;
}
.tuto-etapes li { margin-bottom: .5rem; }
.tuto-etapes li:last-child { margin-bottom: 0; }


/* --- Administration : histogramme -------------------------------------------
   En CSS pur : ni bibliotheque, ni <canvas>. Il reste lisible sans
   JavaScript, s imprime, et ne coute aucun telechargement sur une connexion
   mobile lente — ce qui est la regle partout ailleurs dans ce produit.

   Les barres partent du BAS : align-items: flex-end. Sans cela elles
   pendraient du haut, et un histogramme a l envers se lit de travers. */
.histogramme {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 160px;
    overflow-x: auto;
    padding-bottom: .25rem;
}
.histogramme-jour {
    position: relative;
    flex: 1 0 6px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    min-width: 6px;
}
.histogramme-barre {
    flex: 1;
    background: var(--vert);
    border-radius: 2px 2px 0 0;
    /* Une journee a zero visite ne doit pas disparaitre : un trait de 2 px
       dit « ce jour existe et vaut zero », l absence de barre laisserait
       croire a un trou dans les donnees. */
    min-height: 2px;
}
.histogramme-barre.visiteurs { background: var(--vert-vif); }

/* --- Administration : tableaux de repartition --- */
.tableau-admin {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}
.tableau-admin td {
    padding: .375rem 0;
    border-bottom: 1px solid var(--ligne);
    /* Une valeur UTM peut etre longue et sans espace : sans cette regle elle
       elargit le tableau au-dela de la carte. */
    word-break: break-word;
}
.tableau-admin tr:last-child td { border-bottom: 0; }
.tableau-admin .nombre {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding-inline-start: .75rem;
}
.tableau-admin .attenue { color: var(--texte-attenue); font-weight: 400; }
/* --- Vitrine : apercu du produit ---
   Centre et borne : le mockup est un portrait, et le laisser s etaler sur
   un ecran large le rendrait plus grand que la promesse qu il illustre. */
.apercu-produit {
    text-align: center;
    padding-top: 0;
}
.apercu-produit img {
    width: 100%;
    max-width: 560px;
    height: auto;
    /* Le mockup porte deja son propre fond clair : ni cadre ni ombre, qui
       ajouteraient un second contour au premier. */
}
.apercu-legende {
    margin: .5rem auto 0;
    max-width: 34rem;
    color: var(--texte-attenue);
    font-size: .9375rem;
}

/* --- Suggestion de correction d'adresse email ---
   Discrete : c'est une aide, pas un reproche. Elle occupe la place sous le
   champ meme vide, sinon le formulaire sursauterait sous les doigts au moment
   ou elle apparait. */
.suggestion-email {
    margin: .375rem 0 0;
    min-height: 1.25rem;
    font-size: .875rem;
    color: var(--texte-attenue);
}

/* Un BOUTON deguise en lien. Il n'y a nulle part ou aller : un <a href> sans
   destination mentirait aux lecteurs d'ecran, qui l'annoncent comme un lien. */
.lien-suggestion {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--vert);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.lien-suggestion:hover { color: var(--vert-fonce); }
.lien-suggestion:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }

/* --- Expediteur attendu, sur la page « verifiez votre boite » ---
   Un encadre discret plutot qu'un paragraphe de plus : c'est une information
   qu'on RELIT, en cherchant dans sa boite, pas une phrase qu'on lit une fois.
   Elle doit se retrouver d'un coup d'oeil. */
.expediteur-attendu {
    margin: 1rem 0;
    padding: .75rem .875rem;
    border-inline-start: 3px solid var(--vert-clair);
    background: var(--fond-alt);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    font-size: .9375rem;
    color: var(--texte-attenue);
    line-height: 1.6;
}
.expediteur-attendu strong { color: var(--texte); }

/* --- Listes nominatives de l'administration ---
   Un tableau a quatre colonnes ne tient pas sur un telephone. Plutot que de
   le replier en cartes — ce qui casse la comparaison ligne a ligne, seule
   raison d'avoir un tableau — on le laisse defiler lateralement. */
.tableau-defilant {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.liste-personnes { min-width: 34rem; }
.liste-personnes th {
    text-align: start;
    padding: 0 0 .5rem;
    border-bottom: 1px solid var(--ligne);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--texte-attenue);
}
.liste-personnes td { padding: .625rem 0; vertical-align: top; }
.liste-personnes td + td { padding-inline-start: .75rem; }

/* La bordure de gauche dit l'etat d'activation d'un coup d'oeil, sans ajouter
   de colonne. Elle DOUBLE la lecture des trois nombres, elle ne la remplace
   pas : la couleur seule ne doit jamais porter une information. */
.liste-personnes .activation-vide     td:first-child { box-shadow: inset 3px 0 0 var(--rouge-clair); padding-inline-start: .625rem; }
.liste-personnes .activation-commence td:first-child { box-shadow: inset 3px 0 0 var(--ambre-clair); padding-inline-start: .625rem; }
.liste-personnes .activation-utilise  td:first-child { box-shadow: inset 3px 0 0 var(--vert-clair);  padding-inline-start: .625rem; }
/* En arabe le trait passe a droite. Chaque etat garde SA couleur : un
   `currentColor` mutualise aurait rendu les trois identiques, et la
   distinction aurait disparu dans la seule langue ou personne ne l'aurait
   verifiee. */
[dir="rtl"] .liste-personnes .activation-vide     td:first-child { box-shadow: inset -3px 0 0 var(--rouge-clair); }
[dir="rtl"] .liste-personnes .activation-commence td:first-child { box-shadow: inset -3px 0 0 var(--ambre-clair); }
[dir="rtl"] .liste-personnes .activation-utilise  td:first-child { box-shadow: inset -3px 0 0 var(--vert-clair); }

.marque-desabonne { color: var(--rouge); font-weight: 700; }

.legende-liste {
    margin: .75rem 0 0;
    font-size: .8125rem;
    color: var(--texte-attenue);
}

/* --- Bouton « Poser une question », a cote de l'essai ---
   SECONDAIRE et non concurrent : contour, pas aplat. L'essai reste le chemin
   principal ; celui-ci est la sortie de ceux qui ne sont pas prets a creer un
   compte, et qui partaient sans rien dire.

   Le vert de WhatsApp n'est PAS repris : deux verts differents cote a cote
   sur la meme rangee feraient bavure, et le notre suffit a dire que c'est un
   bouton. L'icone dit deja WhatsApp. */
.bouton-whatsapp-contact {
    background: transparent;
    color: var(--vert);
    border-color: var(--vert);
}
.bouton-whatsapp-contact:hover {
    background: var(--vert-clair);
    color: var(--vert-fonce);
}
.bouton-whatsapp-contact svg { flex: 0 0 auto; }

/* Les deux boutons du hero se rangent l'un sous l'autre sur telephone : cote
   a cote, chacun tombe sous 160 px et « Commencer gratuitement » se coupe. */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    justify-content: center;
}
.hero-actions .bouton { flex: 1 1 15rem; max-width: 20rem; }

/* --- Page « A propos » : la fiche d'entreprise ---
   Une grille etiquette / valeur plutot qu'un <dl> par defaut, ou la valeur
   tombe sous son etiquette et double la hauteur pour rien. */
.fiche-entreprise {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: .5rem 1rem;
    margin: 1rem 0 0;
    padding: 1rem 1.125rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    font-size: .9375rem;
}
.fiche-entreprise dt { color: var(--texte-attenue); }
.fiche-entreprise dd { margin: 0; font-weight: 600; }

/* Sous 30rem, l'etiquette et la valeur ne tiennent plus cote a cote sans que
   « Annee de creation » ne se coupe en trois lignes. On empile alors, et le
   trait vertical garde les couples visuellement lies. */
@media (max-width: 30rem) {
    .fiche-entreprise { grid-template-columns: 1fr; gap: 0; }
    .fiche-entreprise dt { margin-top: .625rem; }
    .fiche-entreprise dt:first-child { margin-top: 0; }
}