/* ═══════════════════════════════════════════════════════════════════════════
   IMOVI+ — Thème « Ivoire Premium »
   Source unique de vérité visuelle (pages publiques + espace user + admin).
   CDC design §1. CSS pur, aucune dépendance.

   Chargement (dans le <head>, AVANT tout style de page) :
     <link rel="stylesheet" href="<?= APP_BASE ?>/assets/css/imovi-theme.css">

   Convention : toutes les classes du thème sont préfixées `ivp-`, sauf les
   composants nommés explicitement par le CDC (.btn-primaire, .card-annonce,
   .table-admin) qui gardent leur nom de spécification.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. POLICES — Marcellus (titres) + Instrument Sans (tout le reste)
   ───────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
   2. JETONS — §1.2
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --ivoire:#faf6f0;
  --surface:#ffffff;
  --encre:#2b2620;
  --encre-fonce:#221d17;
  /* Mesurés sur le fond ivoire de la charte, pas à l'œil :
     #7a7266 n'y donnait que 4,41:1 et #a89e8e 2,45:1 — les deux sous le seuil
     de 4,5:1. La hiérarchie est conservée (texte-3 reste plus clair que
     texte-2), mais les deux passent désormais sur ivoire ET sur blanc. */
  --texte-2:#635D55;   /* 6,04:1 sur ivoire · était #7a7266 (4,41) */
  --texte-3:#6F6960;   /* 5,05:1 sur ivoire · était #a89e8e (2,45) */
  --ligne:#e8e0d4;
  --ligne-claire:#f0e9dd;
  --orange:#f97316;
  --orange-fonce:#c2551a;
  --orange-clair:#f9a45c;

  /* L'ACCENT QUI MANQUAIT.
     Mesure : sur le fond ivoire de la charte, --orange donne 2,60:1 et
     --orange-fonce 4,23:1. Aucun accent de la famille n'était donc lisible
     sur le fond du site lui-même ; chaque page contournait le problème dans
     son coin. Ces deux jetons sont l'ocre pour TEXTE sur fond clair.
     --orange et --orange-clair restent réservés aux aplats et aux fonds
     sombres, où ils passent largement (6,70:1 et 9,39:1 sur l'encre). */
  --orange-texte:#8A5D2C;        /* 5,30 ivoire · 4,94 sable · 5,70 blanc */
  --orange-texte-fonce:#6B461F;  /* état survol, plus sombre encore */
  --succes:#1b6e53;
  --erreur:#b3391f;

  --radius:6px;
  --radius-btn:4px;
  --radius-lg:8px;

  --serif:'Marcellus',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Bordure de bouton secondaire — teinte lin, dérivée de --ligne */
  --ligne-forte:#cabfae;

  --ivp-ease:cubic-bezier(.4,0,.2,1);
  --ivp-max:1240px;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. RÉINITIALISATION MINIMALE
   ───────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--ivoire);
  color:var(--encre);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Anti-débordement horizontal global (clip, pas hidden : préserve sticky). */
  overflow-x:clip;
  max-width:100%;
}

img,video,canvas,svg,iframe,picture{max-width:100%}
img,video{height:auto;display:block}

::selection{background:rgba(249,115,22,.20);color:var(--encre)}

/* ─────────────────────────────────────────────────────────────────────────
   4. TYPOGRAPHIE — §1.3
   ───────────────────────────────────────────────────────────────────────── */
h1,h2,h3,.ivp-serif{
  font-family:var(--serif);
  font-weight:400;              /* Marcellus n'a QUE le 400 — jamais de gras */
  color:var(--encre);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-.005em;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,1.9rem + 2.4vw,3.625rem)}   /* 40 → 58 px */
h2{font-size:clamp(2rem,1.8rem + .8vw,2.25rem)}       /* 32 → 36 px */
h3{font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem)}  /* 18 → 20 px */

h4,h5,h6{font-family:var(--sans);font-weight:700;color:var(--encre);margin:0 0 .5em;line-height:1.3}
h4{font-size:1rem}
h5,h6{font-size:.875rem}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* Le survol éclaircissait le lien (--orange, 2,60:1 sur ivoire) : le lien
   devenait MOINS lisible au moment précis où l'on s'apprête à le suivre.
   Il s'assombrit désormais. Aucun soulignement n'apparaît au survol (choix
   du propriétaire du projet) : le retour visuel passe par la couleur, et le
   clavier garde son contour de focus. */
a{color:var(--orange-texte);text-decoration:none;transition:color .18s var(--ivp-ease)}
a:hover{color:var(--orange-texte-fonce);text-decoration:none}

strong,b{font-weight:700}
small{font-size:.8125rem}      /* 13 px — plancher absolu §1.6 */

/* Surtitre de section — §1.3 */
.ivp-surtitre{
  display:block;
  font-family:var(--sans);
  font-weight:700;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange-texte);   /* 4,23:1 en --orange-fonce sur ivoire */
  margin:0 0 14px;
}
.ivp-sombre .ivp-surtitre,.ivp-surtitre.sur-sombre{color:var(--orange-clair)}

/* Chiffres alignés partout (prix, stats, tableaux) */
.ivp-num,.ivp-stat-val,.card-annonce .ivp-prix,.table-admin td{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. MISE EN PAGE
   ───────────────────────────────────────────────────────────────────────── */
.ivp-wrap{width:100%;max-width:var(--ivp-max);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.ivp-wrap-etroit{max-width:720px}      /* pages légales / RGPD §2.13-2.14 */

.ivp-section{padding-block:clamp(48px,6vw,88px)}
.ivp-section-sm{padding-block:clamp(32px,4vw,52px)}

/* Section sombre — max 1 entre deux claires (§1.4) */
.ivp-sombre{background:var(--encre);color:var(--ivoire)}
.ivp-sombre h1,.ivp-sombre h2,.ivp-sombre h3{color:var(--ivoire)}
.ivp-sombre p{color:rgba(250,246,240,.76)}
.ivp-sombre a{color:var(--orange-clair)}

/* Grilles — 4 → 2 → 1 (§1.6) */
.ivp-grille{display:grid;gap:clamp(16px,2vw,28px)}
.ivp-grille-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ivp-grille-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ivp-grille-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:960px){
  .ivp-grille-3,.ivp-grille-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .ivp-grille-2,.ivp-grille-3,.ivp-grille-4{grid-template-columns:minmax(0,1fr)}
}

/* ─────────────────────────────────────────────────────────────────────────
   6. BOUTONS — §1.5
   ───────────────────────────────────────────────────────────────────────── */
.btn-primaire,.btn-secondaire,.btn-sombre,.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;                       /* cible tactile §1.6 */
  padding:14px 30px;
  border-radius:var(--radius-btn);
  border:1px solid transparent;
  font-family:var(--sans);
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  box-shadow:none;                       /* pas d'ombres §1.5 */
  transition:background-color .2s var(--ivp-ease),border-color .2s var(--ivp-ease),color .2s var(--ivp-ease);
}
/* Le bouton principal du site portait du blanc sur --orange : 2,80:1, très
   en dessous du seuil. Son état de SURVOL, lui, était déjà conforme (4,56) —
   autrement dit le bouton ne devenait lisible qu'une fois la souris dessus,
   ce qu'un écran tactile ne fait jamais. Les deux états descendent d'un cran. */
.btn-primaire{background:var(--orange-fonce);color:#fff;border-color:var(--orange-fonce)}
.btn-primaire:hover{background:#a8410c;border-color:#a8410c;color:#fff}

.btn-secondaire{background:transparent;color:var(--encre);border-color:var(--ligne-forte)}
.btn-secondaire:hover{background:var(--ivoire);border-color:var(--encre);color:var(--encre)}
.ivp-sombre .btn-primaire,.ivp-sombre .btn-primaire:hover{color:#fff}
/* Sans cette ligne, « .ivp-sombre a » (0,2,0) l'emporte sur « .btn-primaire »
   (0,1,0) et peint le libellé en orange clair SUR fond orange : le bouton
   principal du bloc Propriétaires devenait illisible sur les 33 pages. */
.ivp-sombre .btn-secondaire{color:var(--ivoire);border-color:rgba(250,246,240,.34)}
.ivp-sombre .btn-secondaire:hover{background:rgba(250,246,240,.08);border-color:var(--ivoire);color:var(--ivoire)}

.btn-sombre{background:var(--encre);color:var(--ivoire);border-color:var(--encre)}
.btn-sombre:hover{background:var(--encre-fonce);border-color:var(--encre-fonce);color:var(--ivoire)}

.btn-danger{background:transparent;color:var(--erreur);border-color:#f0d9ce}
.btn-danger:hover{background:#fdf2ee;border-color:var(--erreur);color:var(--erreur)}

.btn-primaire:focus-visible,.btn-secondaire:focus-visible,
.btn-sombre:focus-visible,.btn-danger:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px;
}
.btn-primaire[disabled],.btn-secondaire[disabled],
.btn-sombre[disabled],.btn-danger[disabled]{opacity:.45;cursor:not-allowed}

.btn-bloc{width:100%}
.btn-sm{min-height:38px;padding:9px 18px;font-size:.8125rem}

/* Lien-action discret (tableaux admin, listes) */
.ivp-lien-action{
  font-size:13px;font-weight:600;color:var(--orange-texte);
  background:none;border:none;padding:0;cursor:pointer;font-family:var(--sans);
}
.ivp-lien-action:hover{color:var(--orange-texte-fonce);text-decoration:none}
.ivp-lien-action.danger{color:var(--erreur)}

/* ─────────────────────────────────────────────────────────────────────────
   7. CARTES & PANNEAUX
   ───────────────────────────────────────────────────────────────────────── */
.ivp-carte{
  background:var(--surface);
  border:1px solid var(--ligne);
  border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,30px);
}
.ivp-carte-titre{
  font-family:var(--serif);font-size:18px;font-weight:400;
  color:var(--encre);margin:0 0 18px;padding-bottom:14px;
  border-bottom:1px solid var(--ligne-claire);
}

/* ─────────────────────────────────────────────────────────────────────────
   8. STATUTS — §1.4 : texte « ● LIBELLÉ », jamais de pastille pleine
   ───────────────────────────────────────────────────────────────────────── */
.ivp-statut{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-3);white-space:nowrap;
}
.ivp-statut::before{content:'●';font-size:9px;line-height:1}
.ivp-statut.ok{color:var(--succes)}          /* disponible / validé / payé */
.ivp-statut.attente{color:var(--orange-fonce)} /* en attente / réservé */
.ivp-statut.inactif{color:var(--texte-3)}    /* retiré / inactif */
.ivp-statut.ko{color:var(--erreur)}          /* refusé / impayé */

/* Badge bordé neutre (catégorie, type, rôle) */
.ivp-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border:1px solid var(--ligne);border-radius:var(--radius-btn);
  background:var(--surface);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texte-2);white-space:nowrap;
}
.ivp-badge.sur-sombre{background:rgba(43,38,32,.85);border-color:rgba(250,246,240,.2);color:var(--ivoire)}

/* ─────────────────────────────────────────────────────────────────────────
   9. CARTE ANNONCE — §1.5 (véhicule / bien / hôtel / terrain : composant unique)
   ───────────────────────────────────────────────────────────────────────── */
/* Maquette « IMOVI+ Catalogue » : l'image et le texte reposent DIRECTEMENT sur
   le fond ivoire — pas de carte blanche ni de bordure. C'est ce qui donne au
   catalogue sa respiration éditoriale. */
.card-annonce{display:flex;flex-direction:column;background:transparent;border:0;border-radius:0;overflow:visible}

.card-annonce .ivp-media{position:relative;display:block;height:220px;border-radius:var(--radius-lg);overflow:hidden;background:var(--ligne-claire)}
@media(max-width:520px){.card-annonce .ivp-media{height:200px}}
.card-annonce .ivp-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ivp-ease)}
.card-annonce:hover .ivp-media img{transform:scale(1.03)}

.card-annonce .ivp-cat{
  position:absolute;top:12px;left:12px;
  padding:5px 12px;border-radius:3px;
  background:var(--ivoire);color:var(--encre);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.card-annonce .ivp-confiance{
  position:absolute;top:12px;right:12px;
  padding:5px 11px;border-radius:3px;
  background:rgba(43,38,32,.85);color:var(--ivoire);
  font-size:11px;font-weight:600;letter-spacing:.03em;
}

/* Bandeau de statut sur l'image : un bien loué, vendu ou réservé doit se voir
   avant même de lire le titre. */
.card-annonce .ivp-statut-media{
  position:absolute;left:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:3px;
  background:rgba(43,38,32,.88);color:var(--ivoire);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.card-annonce .ivp-statut-media::before{content:"\25CF";font-size:.8em;line-height:1;color:var(--orange-clair)}
.card-annonce .ivp-statut-media.ko::before{color:#e8a08c}
.card-annonce .ivp-statut-media.inactif::before{color:var(--texte-3)}
.card-annonce .ivp-corps{padding:14px 4px 0;display:flex;flex-direction:column;gap:5px;flex:1}
.card-annonce .ivp-ligne-titre{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card-annonce .ivp-titre{
  font-family:var(--serif);font-size:18px;font-weight:400;color:var(--encre);
  margin:0;line-height:1.25;min-width:0;
}
.card-annonce .ivp-prix{
  font-family:var(--sans);font-size:15px;font-weight:700;color:var(--orange-texte);
  white-space:nowrap;flex-shrink:0;
}
/* Specs sur une seule ligne de texte : les séparateurs sont dans le contenu,
   jamais en ::before — un « · » orphelin apparaissait en début de ligne au
   retour à la ligne. */
.card-annonce .ivp-specs{font-size:13px;color:var(--texte-2);margin:5px 0 0;line-height:1.5}
.card-annonce .ivp-actions{display:flex;gap:8px;margin-top:12px}
.card-annonce .ivp-actions .btn-sombre{flex:1;justify-content:center}
.card-annonce .ivp-actions .btn-sombre,
.card-annonce .ivp-actions .btn-secondaire{padding:10px 16px;font-size:13px;font-weight:600;min-height:44px}

/* Point orange du bouton « Message » (messagerie interne, jamais WhatsApp) */
.ivp-point-msg{
  width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0;display:inline-block;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. FORMULAIRES — §1.5
   ───────────────────────────────────────────────────────────────────────── */
.ivp-champ{margin-bottom:20px}
.ivp-label,.ivp-champ label{
  display:block;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texte-3);margin-bottom:8px;
}
.ivp-input,.ivp-champ input[type=text],.ivp-champ input[type=email],
.ivp-champ input[type=tel],.ivp-champ input[type=password],.ivp-champ input[type=number],
.ivp-champ input[type=date],.ivp-champ input[type=search],
.ivp-champ select,.ivp-champ textarea{
  width:100%;
  padding:13px 16px;
  background:var(--surface);
  border:1px solid var(--ligne);
  border-radius:var(--radius-btn);
  font-family:var(--sans);font-size:15px;color:var(--encre);
  line-height:1.5;
  transition:border-color .18s var(--ivp-ease);
  appearance:none;-webkit-appearance:none;
}
.ivp-input:focus,.ivp-champ input:focus,.ivp-champ select:focus,.ivp-champ textarea:focus{
  outline:none;border-color:var(--orange);
}
.ivp-input::placeholder,.ivp-champ input::placeholder,.ivp-champ textarea::placeholder{color:var(--texte-3)}
.ivp-champ textarea{min-height:130px;resize:vertical}

/* Flèche du <select> (appearance:none l'a retirée) */
.ivp-champ select,select.ivp-input{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a7266' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:40px;
}

.ivp-erreur{display:block;font-size:13px;color:var(--erreur);margin-top:6px}
.ivp-aide{display:block;font-size:13px;color:var(--texte-2);margin-top:6px}
.ivp-input.est-invalide{border-color:var(--erreur)}

/* Case à cocher / radio */
.ivp-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--encre);cursor:pointer;padding:6px 0;min-height:44px;align-items:center}
.ivp-check input{width:17px;height:17px;accent-color:var(--orange);flex-shrink:0;margin:0}

/* Zone de téléversement — pointillé neutre, jamais coloré (§2.11) */
.ivp-upload{
  border:1.5px dashed var(--ligne-forte);
  border-radius:var(--radius-lg);
  background:var(--ivoire);
  padding:28px 20px;text-align:center;cursor:pointer;
  font-size:14px;color:var(--texte-2);
  transition:border-color .18s var(--ivp-ease),background-color .18s var(--ivp-ease);
}
.ivp-upload:hover,.ivp-upload.survol{border-color:var(--orange);background:#fff}

/* ─────────────────────────────────────────────────────────────────────────
   11. ONGLETS — actif souligné orange (§1.4)
   ───────────────────────────────────────────────────────────────────────── */
.ivp-onglets{
  display:flex;gap:4px;border-bottom:1px solid var(--ligne);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.ivp-onglets::-webkit-scrollbar{display:none}
.ivp-onglet{
  flex-shrink:0;
  padding:14px 20px;min-height:44px;
  background:none;border:none;border-bottom:2px solid transparent;
  margin-bottom:-1px;
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2);
  cursor:pointer;white-space:nowrap;
  transition:color .18s var(--ivp-ease),border-color .18s var(--ivp-ease);
}
.ivp-onglet:hover{color:var(--encre)}
.ivp-onglet[aria-selected=true],.ivp-onglet.actif{color:var(--encre);border-bottom-color:var(--orange)}
.ivp-panneau[hidden]{display:none}

/* Pilules de filtre — actif = fond encre (§2.6) */
.ivp-pilules{display:flex;flex-wrap:wrap;gap:8px}
.ivp-pilule{
  padding:9px 16px;min-height:40px;display:inline-flex;align-items:center;
  border:1px solid var(--ligne);border-radius:50px;background:var(--surface);
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--texte-2);
  cursor:pointer;transition:all .18s var(--ivp-ease);
}
.ivp-pilule:hover{border-color:var(--ligne-forte);color:var(--encre)}
.ivp-pilule.actif{background:var(--encre);border-color:var(--encre);color:var(--ivoire)}

/* ─────────────────────────────────────────────────────────────────────────
   12. ACCORDÉON (FAQ) — §2.1
   ───────────────────────────────────────────────────────────────────────── */
.ivp-accordeon{border-top:1px solid var(--ligne)}
.ivp-acc-item{border-bottom:1px solid var(--ligne)}
.ivp-acc-tete{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;min-height:44px;
  background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--serif);font-size:17px;font-weight:400;color:var(--encre);
}
.ivp-acc-tete:hover{color:var(--orange-fonce)}
.ivp-acc-signe{
  flex-shrink:0;font-family:var(--serif);font-size:22px;color:var(--orange-fonce);
  line-height:1;transition:transform .25s var(--ivp-ease);
}
.ivp-acc-tete[aria-expanded=true] .ivp-acc-signe{transform:rotate(45deg)}
.ivp-acc-corps{overflow:hidden;transition:height .28s var(--ivp-ease)}
.ivp-acc-corps > div{padding:0 0 22px;font-size:15px;color:var(--texte-2);max-width:64ch}
.ivp-acc-corps[hidden]{display:none}

/* ─────────────────────────────────────────────────────────────────────────
   13. MODALES — §1.5
   ───────────────────────────────────────────────────────────────────────── */
.ivp-modal-fond{
  position:fixed;inset:0;z-index:1000;
  background:rgba(43,38,32,.6);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;transition:opacity .24s var(--ivp-ease);
}
.ivp-modal-fond.ouvert{opacity:1;pointer-events:auto}
.ivp-modal{
  background:var(--surface);border-radius:var(--radius-lg);
  width:100%;max-width:640px;max-height:calc(100dvh - 40px);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(12px);transition:transform .28s var(--ivp-ease);
}
.ivp-modal-fond.ouvert .ivp-modal{transform:none}
.ivp-modal-tete{
  background:var(--encre);color:var(--ivoire);
  padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-shrink:0;
}
.ivp-modal-tete h2,.ivp-modal-tete h3{
  font-family:var(--serif);font-size:20px;font-weight:400;color:var(--ivoire);margin:0;
}
.ivp-modal-fermer{
  width:36px;height:36px;flex-shrink:0;border-radius:var(--radius-btn);
  background:rgba(250,246,240,.1);border:1px solid rgba(250,246,240,.18);
  color:var(--ivoire);font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .18s var(--ivp-ease);
}
.ivp-modal-fermer:hover{background:rgba(250,246,240,.2)}
.ivp-modal-corps{padding:26px;overflow-y:auto;flex:1}
.ivp-modal-pied{
  padding:18px 26px;border-top:1px solid var(--ligne);background:var(--surface);
  display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;flex-wrap:wrap;
}
@media(max-width:640px){
  .ivp-modal{max-width:100%;max-height:100dvh;height:100dvh;border-radius:0}
  .ivp-modal-pied .btn-primaire,.ivp-modal-pied .btn-secondaire{flex:1}
}

/* ─────────────────────────────────────────────────────────────────────────
   14. AUTOCOMPLETE VILLE — §1.5 (remplace le <select> de 1058 entrées)
   ───────────────────────────────────────────────────────────────────────── */
.ivp-auto{position:relative}
.ivp-auto-liste{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--radius-btn);
  max-height:260px;overflow-y:auto;
  box-shadow:0 12px 32px -12px rgba(43,38,32,.28);
}
.ivp-auto-liste[hidden]{display:none}
.ivp-auto-item{
  padding:11px 16px;font-size:14px;color:var(--encre);cursor:pointer;min-height:44px;
  display:flex;align-items:center;
}
.ivp-auto-item:hover,.ivp-auto-item.survol{background:var(--ivoire);color:var(--orange-fonce)}
.ivp-auto-vide{padding:14px 16px;font-size:13px;color:var(--texte-3)}

/* ─────────────────────────────────────────────────────────────────────────
   15. TOASTS / ALERTES — carte blanche bordée, jamais d'aplat fluo (§1.5)
   ───────────────────────────────────────────────────────────────────────── */
.ivp-alerte{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--surface);border:1px solid var(--ligne);border-left-width:3px;
  border-radius:var(--radius);padding:14px 18px;font-size:14px;color:var(--encre);
  margin-bottom:18px;
}
.ivp-alerte.ok{border-left-color:var(--succes)}
.ivp-alerte.ko{border-left-color:var(--erreur)}
.ivp-alerte.info{border-left-color:var(--orange)}

/* ─────────────────────────────────────────────────────────────────────────
   16. TABLEAUX ADMIN — §3.0
   ───────────────────────────────────────────────────────────────────────── */
.ivp-table-wrap{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--radius-lg);
  overflow-x:auto;                        /* jamais de tableau non scrollable §1.6 */
  -webkit-overflow-scrolling:touch;
}
.table-admin{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.table-admin thead th{
  background:var(--ivoire);
  padding:13px 16px;text-align:left;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-3);border-bottom:1px solid var(--ligne);
}
.table-admin tbody td{
  padding:14px 16px;border-bottom:1px solid var(--ligne-claire);
  color:var(--encre);vertical-align:middle;
}
.table-admin tbody tr:last-child td{border-bottom:none}
.table-admin tbody tr:hover{background:var(--ivoire)}
.table-admin .ivp-ref{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:13px;color:var(--texte-2)}
.table-admin .ivp-cel-actions{white-space:nowrap;display:flex;gap:12px;align-items:center}

.ivp-pagination{display:flex;gap:6px;justify-content:center;padding:18px;flex-wrap:wrap}
.ivp-pagination a,.ivp-pagination span{
  min-width:40px;min-height:40px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ligne);border-radius:var(--radius-btn);
  font-size:14px;font-weight:600;color:var(--texte-2);background:var(--surface);
}
.ivp-pagination a:hover{border-color:var(--ligne-forte);color:var(--encre)}
.ivp-pagination .actif{background:var(--encre);border-color:var(--encre);color:var(--ivoire)}

/* ─────────────────────────────────────────────────────────────────────────
   17. CARTES KPI / STATS — §2.10-3.0
   ───────────────────────────────────────────────────────────────────────── */
.ivp-stat{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--radius-lg);
  padding:22px 20px;display:flex;flex-direction:column;gap:6px;
}
.ivp-stat-val{font-family:var(--serif);font-size:30px;font-weight:400;color:var(--encre);line-height:1.1}
.ivp-stat-lbl{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-3)}
.ivp-stat-var{font-size:12px;font-weight:600}
.ivp-stat-var.hausse{color:var(--succes)}
.ivp-stat-var.baisse{color:var(--erreur)}
.ivp-sombre .ivp-stat{background:transparent;border-color:rgba(250,246,240,.18)}
.ivp-sombre .ivp-stat-val{color:var(--ivoire)}
/* Seule règle du thème à poser un jeton de TEXTE CLAIR sur fond sombre :
   en assombrissant --texte-3 (pour le rendre lisible sur ivoire), ce libellé
   tombait à 2,76:1 sur l'encre. Il prend donc l'idiome déjà employé juste
   au-dessus pour les paragraphes sombres — l'ivoire en transparence. */
.ivp-sombre .ivp-stat-lbl{color:rgba(250,246,240,.62)}   /* 6,26:1 sur --encre */

/* ─────────────────────────────────────────────────────────────────────────
   18. UTILITAIRES
   ───────────────────────────────────────────────────────────────────────── */
.ivp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ivp-centre{text-align:center}
.ivp-mt0{margin-top:0}.ivp-mb0{margin-bottom:0}
.ivp-flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ivp-entre{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ivp-txt2{color:var(--texte-2)}
.ivp-txt3{color:var(--texte-3)}
.ivp-separateur{height:1px;background:var(--ligne);border:none;margin:28px 0}

/* Lien d'évitement clavier */
.ivp-skip{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--encre);color:var(--ivoire);padding:12px 20px;border-radius:0 0 var(--radius) 0;
}
.ivp-skip:focus{left:0;color:var(--ivoire)}

/* Fil d'Ariane */
.ivp-ariane{font-size:13px;color:var(--texte-2);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ivp-ariane a{color:var(--texte-2)}
.ivp-ariane a:hover{color:var(--orange-fonce)}
.ivp-ariane span[aria-current]{color:var(--encre)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. HEADER PUBLIC — §1.5 (partial includes/header.php)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Bandeau confiance (au-dessus de la nav, défile avec la page) */
.ivp-bandeau{
  background:var(--encre);color:var(--ivoire);
  font-size:13px;line-height:1.4;text-align:center;
  padding:8px 16px;
}
.ivp-bandeau b{color:var(--orange-clair);font-weight:600}
.ivp-bandeau .ivp-sep{color:rgba(250,246,240,.4);margin:0 8px}
.ivp-bandeau a{color:var(--ivoire)}
.ivp-bandeau a:hover{color:var(--orange-clair)}
@media(max-width:640px){.ivp-bandeau{font-size:12.5px;padding:7px 14px}}

/* Barre de navigation collante */
.ivp-nav{
  position:sticky;top:0;z-index:900;
  background:rgba(250,246,240,.97);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ligne);
}
.ivp-nav-inner{
  max-width:var(--ivp-max);margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
  height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.ivp-logo{
  font-family:var(--serif);font-size:26px;font-weight:400;color:var(--encre);
  letter-spacing:.01em;line-height:1;flex-shrink:0;text-decoration:none;
}
.ivp-logo b{color:var(--orange);font-weight:400}
.ivp-logo:hover{color:var(--encre)}

.ivp-nav-links{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);flex:1;justify-content:center}
.ivp-nav-a{
  position:relative;padding:6px 2px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--texte-2);
  text-decoration:none;white-space:nowrap;
  transition:color .18s var(--ivp-ease);
}
.ivp-nav-a:hover{color:var(--encre)}
.ivp-nav-a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:center;
  transition:transform .2s var(--ivp-ease);
}
.ivp-nav-a.on{color:var(--encre)}
.ivp-nav-a.on::after{transform:scaleX(1)}

.ivp-nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.ivp-nav-connexion{
  font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--encre);text-decoration:none;white-space:nowrap;
}
.ivp-nav-connexion:hover{color:var(--orange-fonce)}

/* Avatar utilisateur connecté */
.ivp-user{display:flex;align-items:center;gap:11px;text-decoration:none}
.ivp-user-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--encre);color:var(--ivoire);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:17px;line-height:1;
}
.ivp-user-txt{display:flex;flex-direction:column;gap:1px;line-height:1.2;min-width:0}
.ivp-user-nom{font-size:14px;font-weight:700;color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ivp-user-role{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-fonce)}

/* Burger (mobile / tablette) */
.ivp-burger{
  display:none;width:44px;height:44px;flex-shrink:0;
  background:none;border:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.ivp-burger span{display:block;width:22px;height:2px;background:var(--encre);border-radius:2px;transition:transform .25s var(--ivp-ease),opacity .2s}
.ivp-burger.ouvert span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ivp-burger.ouvert span:nth-child(2){opacity:0}
.ivp-burger.ouvert span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1024px){
  .ivp-nav-links{display:none}
  .ivp-burger{display:flex}
  .ivp-nav-right .ivp-nav-pub,.ivp-nav-right .ivp-nav-connexion{display:none}
}

/* Tiroir mobile plein écran */
.ivp-drawer-fond{position:fixed;inset:0;z-index:1200;background:rgba(43,38,32,.5);opacity:0;pointer-events:none;transition:opacity .28s var(--ivp-ease)}
.ivp-drawer-fond.ouvert{opacity:1;pointer-events:auto}
.ivp-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:1210;
  width:min(360px,86vw);background:var(--ivoire);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s var(--ivp-ease);
  overflow-y:auto;
}
.ivp-drawer.ouvert{transform:none}
.ivp-drawer-tete{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,5vw,28px);border-bottom:1px solid var(--ligne)}
.ivp-drawer-fermer{width:44px;height:44px;background:none;border:none;cursor:pointer;font-size:26px;line-height:1;color:var(--encre)}
.ivp-drawer-liens{display:flex;flex-direction:column;padding:12px clamp(20px,5vw,28px)}
.ivp-drawer-a{
  font-family:var(--serif);font-size:24px;font-weight:400;color:var(--encre);
  text-decoration:none;padding:14px 0;border-bottom:1px solid var(--ligne-claire);
  display:flex;align-items:center;justify-content:space-between;
}
.ivp-drawer-a.on{color:var(--orange-fonce)}
.ivp-drawer-pied{margin-top:auto;padding:20px clamp(20px,5vw,28px);display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--ligne)}
.ivp-drawer-user{display:flex;align-items:center;gap:12px;padding:14px clamp(20px,5vw,28px);border-bottom:1px solid var(--ligne)}

/* Barre d'onglets basse (mobile) */
.ivp-tabbar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:880;
  background:var(--surface);border-top:1px solid var(--ligne);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.ivp-tabbar-inner{display:flex;height:60px}
.ivp-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:0;padding:6px 2px;text-decoration:none;color:var(--texte-2);
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.02em;
}
.ivp-tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
.ivp-tab.on{color:var(--orange)}
.ivp-tab-lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:767px){
  .ivp-tabbar{display:block}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0))}
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. FOOTER PUBLIC — §1.5 (partial includes/footer.php)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Le pied est sur fond encre : les gris du thème, assombris pour l'ivoire, y
   tombaient à 2,6-3,1:1. Sur fond sombre un gris s'éclaircit, il ne se fonce pas. */
.ivp-footer{--texte-2:#bdb6ab;--texte-3:#a5a19c;background:var(--encre-fonce);color:var(--texte-3);padding-block:clamp(44px,5vw,64px) 0}
.ivp-footer-grille{
  max-width:var(--ivp-max);margin-inline:auto;padding-inline:clamp(16px,4vw,32px);
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(28px,4vw,48px);
}
@media(max-width:960px){.ivp-footer-grille{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ivp-footer-grille{grid-template-columns:1fr;gap:32px}}
.ivp-footer-logo{display:block;margin:0 0 10px;transition:opacity .2s}
.ivp-footer-logo:hover{opacity:.85}
.ivp-footer-logo img{height:60px;width:auto;display:block}
.ivp-footer-baseline{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-clair);margin:0 0 18px}
.ivp-footer p{color:var(--texte-3);font-size:14px;margin:0 0 8px}
.ivp-footer-titre{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire);margin:0 0 16px}
.ivp-footer-liens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ivp-footer-liens a{color:var(--texte-3);font-size:14px;text-decoration:none}
.ivp-footer-liens a:hover{color:var(--orange-clair)}
.ivp-footer-alerte{display:flex;gap:8px;margin-top:8px}
.ivp-footer-alerte input{
  flex:1;min-width:0;padding:11px 14px;border-radius:var(--radius-btn);
  border:1px solid rgba(250,246,240,.16);background:rgba(250,246,240,.05);
  color:var(--ivoire);font-family:var(--sans);font-size:14px;
}
.ivp-footer-alerte input::placeholder{color:var(--texte-3)}
.ivp-footer-alerte input:focus{outline:none;border-color:var(--orange)}
.ivp-footer-seo{
  max-width:var(--ivp-max);margin:clamp(36px,4vw,52px) auto 0;
  padding:22px clamp(16px,4vw,32px);border-top:1px solid rgba(250,246,240,.08);
  font-size:13px;line-height:1.9;color:var(--texte-2);
}
.ivp-footer-seo a{color:var(--texte-2);text-decoration:none}
.ivp-footer-seo a:hover{color:var(--orange-clair)}
.ivp-footer-bas{
  max-width:var(--ivp-max);margin-inline:auto;padding:20px clamp(16px,4vw,32px);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(250,246,240,.08);font-size:13px;color:var(--texte-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. CHAT FLOTTANT PREMIUM — §1.5 (partial includes/chat-flottant.php)
   ═══════════════════════════════════════════════════════════════════════════ */
.ivp-chat-fab{
  position:fixed;bottom:24px;right:24px;z-index:940;
  width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--orange),var(--orange-fonce));
  box-shadow:0 10px 28px rgba(194,85,26,.4);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ivp-ease);
}
.ivp-chat-fab:hover{transform:translateY(-2px)}
.ivp-chat-fab svg{width:26px;height:26px;fill:#fff}
.ivp-chat-fab .ivp-chat-fermeicone{display:none}
.ivp-chat-fab.ouvert .ivp-chat-ouvreicone{display:none}
.ivp-chat-fab.ouvert .ivp-chat-fermeicone{display:block}
@media(max-width:767px){.ivp-chat-fab{bottom:calc(72px + env(safe-area-inset-bottom,0));right:16px}}

.ivp-chat-panneau{
  position:fixed;bottom:96px;right:24px;z-index:939;
  width:min(320px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--radius-lg);
  box-shadow:0 20px 50px -16px rgba(43,38,32,.34);
  overflow:hidden;
  opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;
  transition:opacity .2s var(--ivp-ease),transform .2s var(--ivp-ease);
}
.ivp-chat-panneau.ouvert{opacity:1;transform:none;pointer-events:auto}
@media(max-width:767px){.ivp-chat-panneau{bottom:calc(140px + env(safe-area-inset-bottom,0));right:16px}}
.ivp-chat-tete{background:var(--encre);color:var(--ivoire);padding:18px 20px}
.ivp-chat-tete h3{font-family:var(--serif);font-size:18px;font-weight:400;color:var(--ivoire);margin:0 0 3px}
.ivp-chat-tete p{font-size:12.5px;color:var(--texte-3);margin:0}
.ivp-chat-corps{padding:20px}
.ivp-chat-dispo{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--texte-2);margin-bottom:16px}
.ivp-chat-dispo::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--succes);flex-shrink:0}

/* ─────────────────────────────────────────────────────────────────────────
   21. CATALOGUES — maquettes « IMOVI+ Catalogue / Hotels / Terrains »
   Partage par vehicules.php, immobilier.php, residences.php, terrains.php.
   ───────────────────────────────────────────────────────────────────────── */
/* ── Catalogue — maquette « IMOVI+ Catalogue » (Claude Design) ────────────
   Jetons du thème uniquement. Aucune couleur hors §1.2.                     */

/* En-tête de page */
.cat-tete{padding:clamp(26px,3.5vw,48px) 0 0}
.cat-tete h1{font-size:clamp(30px,4vw,42px);margin:12px 0 8px}
.cat-tete .sous{color:var(--texte-2);font-size:16px;max-width:560px;margin:0 0 28px;line-height:1.6}

/* Recherche compacte segmentée : une seule carte, filets verticaux entre
   les segments, bouton orange à l'intérieur. */
.cat-recherche{display:inline-flex;align-items:stretch;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--radius-lg);
  box-shadow:0 4px 16px rgba(43,38,32,.06);overflow:hidden;max-width:100%}
.cat-seg{padding:12px 22px;border-right:1px solid var(--ligne);display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1 1 190px}
.cat-seg label{font-size:11px;font-weight:700;color:var(--texte-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.cat-seg input,.cat-seg select{border:none;background:none;padding:0;font:inherit;font-size:14px;font-weight:600;
  color:var(--encre);min-height:auto;width:100%;min-width:0;appearance:none;-webkit-appearance:none;cursor:pointer}
.cat-seg input::placeholder{color:var(--texte-3);font-weight:400}
.cat-seg input:focus,.cat-seg select:focus{outline:none;box-shadow:none}
.cat-seg:focus-within{background:var(--ivoire)}
.cat-seg-btn{display:flex;align-items:center;padding:8px 10px;border-right:none;flex:0 0 auto}
.cat-seg-btn button{background:var(--orange);color:#fff;font-weight:700;font-size:14px;padding:12px 28px;
  border:none;border-radius:var(--radius);cursor:pointer;font-family:inherit;min-height:44px;transition:background .18s var(--ivp-ease)}
.cat-seg-btn button:hover{background:var(--orange-fonce)}
@media(max-width:720px){
  .cat-recherche{display:flex;flex-direction:column;width:100%}
  .cat-seg{border-right:none;border-bottom:1px solid var(--ligne);flex:1 1 auto}
  .cat-seg-btn{border-bottom:none}
  .cat-seg-btn button{width:100%}
}

/* Corps : sidebar + grille */
.cat-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;align-items:start;padding:36px 0 80px}
@media(max-width:1080px){.cat-layout{grid-template-columns:1fr}}

/* ── Sidebar filtres : une carte par critère, surtitre seul ────────────────
   `overflow-x:clip` : sans lui, overflow-y:auto fait naître une barre de
   défilement HORIZONTALE dès qu'un champ dépasse d'un pixel (CDC §1.6 :
   aucun débordement horizontal). */
.cat-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:18px;
  max-height:calc(100dvh - 110px);overflow-y:auto;overflow-x:clip;padding-right:2px}
.cat-sidebar::-webkit-scrollbar{width:6px}
.cat-sidebar::-webkit-scrollbar-thumb{background:var(--ligne-forte);border-radius:3px}
.cat-fgroupe{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--radius);padding:22px 22px 18px;min-width:0}
.cat-fgroupe > h3{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-3);
  font-family:var(--sans);margin:0 0 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cat-fgroupe > h3 a{font-size:11px;font-weight:700;color:var(--orange-fonce);letter-spacing:.06em;text-transform:none}

/* Pilules de filtre */
.cat-pil{display:flex;gap:8px;flex-wrap:wrap}
.cat-pil button{padding:8px 16px;border:1px solid var(--ligne);border-radius:100px;background:none;
  font:inherit;font-size:13px;font-weight:600;color:var(--texte-2);cursor:pointer;min-height:36px;
  transition:border-color .18s var(--ivp-ease),background .18s var(--ivp-ease),color .18s var(--ivp-ease)}
.cat-pil button:hover{border-color:var(--ligne-forte);color:var(--encre)}
.cat-pil button.actif{background:var(--encre);color:var(--ivoire);border-color:var(--encre)}

/* Cases à cocher */
.cat-cases{display:flex;flex-direction:column;gap:11px}
.cat-case{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--encre);cursor:pointer;min-height:24px}
.cat-case input{position:absolute;opacity:0;width:0;height:0}
.cat-case i{width:18px;height:18px;flex:none;border:1.5px solid var(--ligne-forte);border-radius:3px;
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:700;
  color:transparent;transition:background .15s var(--ivp-ease),border-color .15s var(--ivp-ease)}
.cat-case input:checked + i{background:var(--orange);border-color:var(--orange);color:#fff}
.cat-case input:focus-visible + i{outline:2px solid var(--orange);outline-offset:2px}

/* Paires min / max */
.cat-duo{display:flex;gap:10px}
.cat-duo input,.cat-duo select{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--ligne);border-radius:var(--radius-btn);
  font:inherit;font-size:13px;color:var(--encre);background:var(--surface);min-height:44px}
.cat-duo input::placeholder{color:var(--texte-3)}
.cat-duo input:focus,.cat-duo select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.12)}
.cat-champ{display:block;width:100%;min-width:0;padding:11px 12px;border:1px solid var(--ligne);border-radius:var(--radius-btn);
  font:inherit;font-size:13px;color:var(--encre);background:var(--surface);min-height:44px}
.cat-champ:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.12)}
.cat-fgroupe .cat-duo + .cat-duo,.cat-fgroupe .cat-champ + .cat-champ{margin-top:10px}

/* Pied de la sidebar */
.cat-appliquer{width:100%;text-align:center;padding:14px;background:var(--encre);color:var(--ivoire);
  border:none;border-radius:var(--radius-btn);font:inherit;font-size:13px;font-weight:700;cursor:pointer;min-height:44px}
.cat-appliquer:hover{background:var(--encre-fonce)}
.cat-reset{display:block;width:100%;text-align:center;font-size:13px;color:var(--orange-fonce);font-weight:600;
  background:none;border:none;cursor:pointer;font-family:inherit;padding:6px;min-height:44px}

/* Barre de résultats */
.cat-barre{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:22px}
.cat-count{font-size:15px;font-weight:600;color:var(--encre)}
.cat-count b{font-family:var(--serif);font-size:20px;font-weight:400;margin-right:6px;font-variant-numeric:tabular-nums}
.cat-tri{display:flex;gap:10px;align-items:center}
.cat-tri span{font-size:13px;color:var(--texte-2)}
.cat-tri select{padding:9px 30px 9px 16px;border:1px solid var(--ligne);border-radius:var(--radius-btn);
  font:inherit;font-size:13px;font-weight:600;color:var(--encre);background:var(--surface);min-height:40px;width:auto}

/* Grille : 3 colonnes fermes, comme la maquette */
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:1080px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cat-grid{grid-template-columns:1fr}}

/* Bouton filtres mobile */
.cat-filtres-btn{display:none;align-items:center;gap:8px;width:100%;margin-bottom:18px}
@media(max-width:1080px){
  .cat-filtres-btn{display:inline-flex}
  .cat-sidebar{position:fixed;inset:0 0 0 auto;width:min(340px,88vw);max-height:none;height:100dvh;
    background:var(--ivoire);z-index:1200;padding:20px;transform:translateX(100%);
    transition:transform .3s var(--ivp-ease);box-shadow:-14px 0 44px -20px rgba(43,38,32,.5)}
  .cat-sidebar.ouvert{transform:none}
  .cat-fermer{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
  .cat-fermer h2{font-family:var(--serif);font-size:20px;margin:0}
  .cat-fermer button{width:44px;height:44px;border:none;background:none;font-size:24px;cursor:pointer;color:var(--encre)}
}
.cat-fermer{display:none}

/* Squelette de chargement + état vide */
.cat-sk{border-radius:var(--radius-lg);overflow:hidden}
.cat-sk .i{height:220px;background:linear-gradient(90deg,var(--ligne-claire),var(--ivoire),var(--ligne-claire));background-size:200% 100%;animation:catShine 1.3s infinite;border-radius:var(--radius-lg)}
.cat-sk .b{padding:14px 4px 0;display:flex;flex-direction:column;gap:10px}
.cat-sk .l{height:12px;border-radius:4px;background:var(--ligne-claire)}
@keyframes catShine{to{background-position:-200% 0}}
.cat-vide{grid-column:1/-1;text-align:center;padding:60px 20px;background:var(--surface);border:1px dashed var(--ligne-forte);border-radius:var(--radius-lg)}
.cat-vide h3{font-family:var(--serif);font-size:22px;font-weight:400;margin:0 0 8px}
.cat-vide p{color:var(--texte-2);margin:0 0 18px}

/* ═══════════════════════════════════════════════════════════════════════════
   23. FICHE DÉTAIL — maquette « Détail Annonce »
   ───────────────────────────────────────────────────────────────────────────
   Cette feuille était dupliquée dans les deux fiches (véhicule, propriété),
   posée par-dessus un millier de lignes de l'ancien design. Source unique
   désormais : les pages n'ont plus de <style> propre, et une correction ici
   vaut pour les deux — c'est précisément ce qui manquait le jour où les
   flèches de galerie ont été rognées d'un seul côté.
   ═══════════════════════════════════════════════════════════════════════════ */
.vd-wrap{max-width:1220px;margin:0 auto;padding:32px clamp(18px,4vw,40px) 80px}
.vd-bread{font-size:13px;color:var(--texte-3);margin-bottom:18px}
.vd-bread a{color:var(--texte-3)}
.vd-bread a:hover{color:var(--orange-fonce)}
.vd-bread .cur{color:var(--encre)}

.vd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.vd-h1{font-family:var(--serif);font-size:clamp(28px,4vw,38px);margin:0;font-weight:400;line-height:1.15;text-wrap:balance}
.vd-headmeta{display:flex;gap:16px;align-items:center;margin-top:10px;flex-wrap:wrap}
.vd-headmeta .sp{font-size:14px;color:var(--texte-2)}
.vd-chip{background:rgba(43,38,32,.08);color:var(--encre);font-size:11px;font-weight:700;padding:5px 12px;border-radius:3px}
.vd-ref{font-size:12px;color:var(--texte-3);text-align:right;white-space:nowrap}

.vd-grid{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:start}
@media(max-width:960px){.vd-grid{grid-template-columns:1fr}}
.vd-left{display:flex;flex-direction:column;gap:28px;min-width:0}
.vd-card{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--radius);padding:clamp(20px,3vw,28px)}
.vd-ctitle{font-family:var(--serif);font-size:20px;margin:0 0 16px;font-weight:400}
.vd-card p{font-size:15px;line-height:1.75;color:var(--texte-2);margin:0}

.vd-specs{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
@media(max-width:520px){.vd-specs{grid-template-columns:1fr}}
.vd-specs .r{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--ligne-claire)}
.vd-specs .k{font-size:13px;color:var(--texte-3);font-weight:600}
.vd-specs .v{font-size:14px;font-weight:600;text-align:right}

.vd-req{display:flex;flex-direction:column;gap:10px}
.vd-req .it{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--texte-2);line-height:1.5}
.vd-req .dot{width:6px;height:6px;border-radius:50%;background:var(--encre);flex-shrink:0;margin-top:7px}

.vd-arnaque{background:var(--ivoire);border:1px solid var(--ligne);border-left:3px solid var(--orange-clair);border-radius:var(--radius);padding:24px clamp(20px,3vw,28px)}
.vd-arnaque .vd-ctitle{font-size:18px;margin-bottom:12px}
.vd-arnaque .l{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--texte-2);line-height:1.6}

/* Colonne droite : elle suit le défilement, sauf si elle dépasse la hauteur
   de l'écran — sticky en figerait alors le bas hors de vue. */
.vd-right{position:sticky;top:90px;display:flex;flex-direction:column;gap:20px}
@media(max-width:960px){.vd-right{position:static}}
@media(max-height:760px){.vd-right{position:static}}
/* Le prix est cadré à 36 px dans la maquette. Les montants ivoiriens étant
   longs, « 54 000 000 XOF » passait à la ligne dans la colonne de 360 px : la
   page ajoute .l ou .xl selon le nombre de caractères. Aucune requête de
   conteneur ne saurait le faire — c'est la longueur du texte qui décide,
   pas la largeur disponible. */
.vd-price{font-family:var(--serif);font-size:36px;color:var(--orange-fonce);line-height:1.05;white-space:nowrap}
.vd-price.l{font-size:30px}
.vd-price.xl{font-size:25px}
.vd-price-sub{font-size:14px;color:var(--texte-2);margin-top:6px}
.vd-statut{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--succes)}
.vd-statut.ko{color:var(--erreur)}
.vd-statut.att{color:var(--orange-fonce)}
.vd-statut .d{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}

.vd-btns{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.vd-btn{text-align:center;padding:14px;border-radius:var(--radius-btn);font-size:14px;font-weight:700;cursor:pointer;
  border:none;font-family:inherit;text-decoration:none;display:block;min-height:48px;
  transition:background .18s var(--ivp-ease),color .18s var(--ivp-ease)}
.vd-btn.o{background:var(--orange-fonce);color:#fff}
.vd-btn.o:hover{background:var(--orange-fonce);color:#fff}
.vd-btn.g{border:1px solid var(--ligne-forte);color:var(--encre);font-weight:600;background:none}
.vd-btn.g:hover{background:var(--ivoire);color:var(--encre)}
.vd-btn.grn{background:var(--succes);color:#fff}
.vd-btn.lock{background:var(--texte-2);color:var(--ivoire);cursor:not-allowed}

.vd-owner-head{display:flex;gap:14px;align-items:center}
.vd-owner-av{width:56px;height:56px;border-radius:50%;background:var(--encre);color:var(--ivoire);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px;
  border:2px solid var(--orange);flex-shrink:0;overflow:hidden}
.vd-owner-av img{width:100%;height:100%;object-fit:cover}
.vd-owner-name{font-weight:700;font-size:16px}
.vd-owner-badges{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap}
.vd-ob{font-size:10px;font-weight:700;padding:3px 8px;border-radius:3px}
.vd-ob.or{background:var(--encre);color:var(--orange-clair)}
.vd-ob.br{background:var(--ivoire);border:1px solid var(--ligne);color:var(--encre)}
.vd-owner-stats{border-top:1px solid var(--ligne-claire);margin-top:16px;padding-top:16px}
.vd-owner-stats .r{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:6px}
.vd-owner-stats .r span:first-child{color:var(--texte-2)}
.vd-owner-link{text-align:center;margin-top:16px;padding:11px;border:1px solid var(--ligne-forte);
  border-radius:var(--radius-btn);font-size:13px;font-weight:600;color:var(--orange-fonce);display:block;text-decoration:none}
.vd-owner-link:hover{background:var(--ivoire);color:var(--orange-fonce)}

.vd-frais{border:1px solid var(--succes);border-radius:var(--radius);padding:18px 22px;background:var(--ivoire)}
.vd-frais-t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--succes)}
.vd-frais-t .d{width:8px;height:8px;border-radius:50%;background:var(--succes);flex-shrink:0}
.vd-frais-s{font-size:13px;color:var(--texte-2);margin-top:6px}

.vd-sim{margin-top:64px;border-top:1px solid var(--ligne);padding-top:44px}
.vd-sim .sur{font-size:12px;font-weight:700;color:var(--orange-texte);letter-spacing:.16em}
.vd-sim h2{font-family:var(--serif);font-size:clamp(24px,3.4vw,30px);margin:10px 0 24px;font-weight:400}
.vd-sim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.vd-sim-grid{grid-template-columns:1fr}}

/* ── Galerie ────────────────────────────────────────────────────────────── */
.gallery-card{display:block}
.gallery-stage{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--ligne);aspect-ratio:16/10}
.gal-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .35s var(--ivp-ease)}
.gal-slide.active{opacity:1}
.gal-overlay-ui{position:absolute;inset:0;pointer-events:none}
.gal-top-ui,.gal-bottom-ui,.gal-dots{display:none}
.gal-counter{position:absolute;bottom:14px;right:14px;background:rgba(43,38,32,.85);color:var(--ivoire);
  font-size:13px;font-weight:600;padding:6px 14px;border-radius:var(--radius-btn);
  display:inline-flex;align-items:center;gap:6px;pointer-events:auto}
/* transform:none est indispensable : sans lui, un translateY(-50%) hérité se
   combine à inset:0 et fait sortir les flèches par le haut de l'image. */
.gal-arrows{position:absolute;inset:0;transform:none;display:flex;align-items:center;justify-content:space-between;padding:0 12px;pointer-events:none}
.gal-arrow{pointer-events:auto;width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(250,246,240,.9);color:var(--encre);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:background .18s var(--ivp-ease)}
.gal-arrow:hover{background:#fff}
.gal-filmstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.gal-thumb{height:90px;border-radius:var(--radius);overflow:hidden;cursor:pointer;border:2px solid transparent;
  opacity:.7;transition:opacity .2s var(--ivp-ease),border-color .2s var(--ivp-ease);padding:0;background:none}
.gal-thumb.on{border-color:var(--orange);opacity:1}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-fullscreen-btn{width:36px;height:36px;border-radius:50%;background:rgba(43,38,32,.55);color:#fff;
  border:none;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;
  transition:background .18s var(--ivp-ease)}
.gal-fullscreen-btn:hover{background:var(--orange)}

/* ── Visionneuse plein écran ────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:99990;background:rgba(34,29,23,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .28s var(--ivp-ease),visibility .28s}
.lb.open{opacity:1;visibility:visible}
.lb-stage{position:relative;max-width:94vw;max-height:92vh}
.lb-stage img{max-width:94vw;max-height:86vh;object-fit:contain;border-radius:var(--radius-lg);display:block}
.lb-close,.lb-nav{border:none;cursor:pointer;color:#fff;background:rgba(250,246,240,.14);
  display:flex;align-items:center;justify-content:center;transition:background .18s var(--ivp-ease)}
.lb-close{position:absolute;top:-46px;right:0;width:40px;height:40px;border-radius:50%;font-size:1rem}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;font-size:1.1rem}
.lb-close:hover,.lb-nav:hover{background:var(--orange)}
.lb-prev{left:-64px}
.lb-next{right:-64px}
/* Sur petit écran les flèches ne tiennent pas hors du cadre : on les ramène
   à l'intérieur plutôt que de les laisser sortir de la fenêtre. */
@media(max-width:820px){.lb-prev{left:8px}.lb-next{right:8px}.lb-close{top:8px;right:8px}}
.lb-info{text-align:center;margin-top:14px;color:rgba(250,246,240,.5);font-size:.8rem}


/* Lecteur vidéo (Plyr) : ses variables sont bleues par défaut, ce qui jurait
   avec la charte sur les deux fiches. */
.plyr{--plyr-color-main:var(--orange-fonce);--plyr-video-background:var(--encre-fonce);
  --plyr-badge-background:var(--encre);--plyr-range-thumb-background:#fff;
  border-radius:var(--radius);overflow:hidden}

/* ── Estimateur de devis ────────────────────────────────────────────────── */
.devis-box{padding:2px}
.devis-dates{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:420px){.devis-dates{grid-template-columns:1fr}}
.devis-dates label{display:block;font-size:11px;font-weight:700;color:var(--texte-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.devis-dates input{width:100%;padding:12px 16px;border:1px solid var(--ligne);border-radius:var(--radius-btn);
  font-family:inherit;font-size:14px;color:var(--encre);background:var(--surface);min-height:48px}
.devis-dates input:focus{outline:none;border-color:var(--orange)}
.devis-opts{display:flex;flex-direction:column;gap:8px;margin-top:14px;font-size:14px;color:var(--texte-2)}
.devis-opts label{display:flex;align-items:center;gap:8px;cursor:pointer}
.devis-alerte{margin-top:12px;font-size:13px;color:var(--erreur)}
.devis-lignes{margin-top:12px;font-size:13px;color:var(--texte-2)}
.devis-ligne{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.devis-total{margin-top:16px;padding:18px;background:var(--ivoire);border-radius:var(--radius);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.devis-total span{font-size:14px;color:var(--texte-2)}
.devis-total strong{font-family:var(--serif);font-size:26px;color:var(--orange-fonce);font-weight:400}
.devis-caution{margin-top:12px;font-size:13px;color:var(--texte-2);display:flex;gap:8px;align-items:flex-start}
.devis-note{margin-top:12px;font-size:12.5px;color:var(--texte-3);line-height:1.6}

/* La fiche porte sa propre barre d'action (fiche-action-bar) : la barre
   d'onglets du bas ferait doublon sur mobile. */
@media(max-width:767px){body:has(.vd-wrap) .ivp-tabbar{display:none!important}}

/* ═══════════════════════════════════════════════════════════════════════════
   24. PAGES DE COMPTE — connexion, inscription client, inscription propriétaire
   ───────────────────────────────────────────────────────────────────────────
   Construites sur le modèle de la page Contact : barre de navigation partagée,
   bandeau d'accroche, carte de formulaire et colonne de réassurance. Ces trois
   pages n'ont plus de feuille locale — tout est ici, en source unique.

   Le préfixe est .cp- (compte). Aucune règle de l'ancien design n'y survit :
   ni fond bleu nuit, ni dégradé, ni ombre colorée.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bandeau d'accroche ───────────────────────────────────────────────────
   Fond encre, exactement comme le bandeau de la page Contact. En ivoire, il
   se confondait avec le fond de page : une grande zone pâle qui ne posait
   rien et laissait la moitié droite vide. */
.cp-band{background:var(--encre);padding:clamp(40px,5vw,64px) clamp(18px,4vw,24px) clamp(36px,4vw,56px)}
.cp-band-in{max-width:1080px;margin:0 auto}
.cp-k{font-size:12px;font-weight:700;color:var(--orange-clair);letter-spacing:.16em;margin-bottom:16px}
.cp-h1{font-family:var(--serif);font-size:clamp(30px,4.4vw,44px);font-weight:400;line-height:1.15;
  color:var(--ivoire);margin:0 0 20px;max-width:640px;text-wrap:balance}
.cp-lead{font-size:16px;line-height:1.7;color:#a5a19c;margin:0;max-width:640px}
.cp-lead a{color:var(--orange-clair);font-weight:600}
.cp-chips{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.cp-chip{border:1px solid rgba(250,246,240,.2);border-radius:var(--radius-btn);padding:10px 18px;
  font-size:13px;color:var(--ivoire);font-weight:600}

/* Fil d'Ariane, posé DANS le bandeau : au-dessus, sur le fond de page, il
   flottait seul sans rien à quoi se raccrocher. */
.cp-bread{font-size:13px;color:rgba(250,246,240,.55);margin-bottom:22px}
.cp-bread a{color:rgba(250,246,240,.55)}
.cp-bread a:hover{color:var(--orange-clair)}
.cp-bread .cur{color:var(--ivoire)}

/* ── Corps ──────────────────────────────────────────────────────────────── */
.cp-wrap{max-width:1080px;margin:0 auto;padding:clamp(36px,4vw,56px) clamp(18px,4vw,24px) clamp(56px,6vw,80px)}
.cp-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,3.5vw,48px);align-items:start}
@media(max-width:900px){.cp-grid{grid-template-columns:1fr}}
.cp-card{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--radius);padding:clamp(24px,3.4vw,36px)}
.cp-h2{font-family:var(--serif);font-size:clamp(24px,3vw,30px);font-weight:400;margin:0 0 6px}
.cp-sub{font-size:14px;color:var(--texte-2);margin:0 0 28px;line-height:1.65}

/* ── Aiguillage client / propriétaire ───────────────────────────────────── */
.cp-toggle{display:flex;border:1px solid var(--ligne);border-radius:var(--radius);overflow:hidden;margin-bottom:30px}
.cp-tg{flex:1;text-align:center;padding:14px 10px;font-size:14px;font-weight:600;color:var(--texte-2);
  background:var(--surface);cursor:pointer;border:none;font-family:inherit;min-height:50px;
  transition:background .18s var(--ivp-ease),color .18s var(--ivp-ease)}
.cp-tg + .cp-tg{border-left:1px solid var(--ligne)}
.cp-tg:hover{background:var(--ivoire)}
.cp-tg.on{font-weight:700;color:var(--encre);background:var(--ivoire);box-shadow:inset 0 -2px 0 var(--orange)}


/* ── En-tête de formulaire à médaillon ──────────────────────────────────────
   Un titre seul au-dessus d'une pile de champs se lit mal : rien ne dit où
   commence le formulaire. Le médaillon donne un point d'entrée à l'œil. */
.cp-tete{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px}
.cp-tete-ico{width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:var(--ivoire);border:1px solid var(--ligne);color:var(--orange-fonce);
  display:flex;align-items:center;justify-content:center;font-size:17px}
.cp-tete .cp-h2{margin:0 0 4px}
.cp-tete .cp-sub{margin:0}
@media(max-width:460px){.cp-tete-ico{display:none}}

/* ── Groupes de champs ──────────────────────────────────────────────────────
   Sépare les blocs de sens (identité, contact, sécurité) sans multiplier les
   cartes : le trait et l'intitulé suffisent à faire respirer une longue pile. */
.cp-groupe{padding-top:24px;margin-top:24px;border-top:1px solid var(--ligne-claire)}
.cp-groupe-t{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texte-3);margin-bottom:18px}
.cp-groupe-t::after{content:"";flex:1;height:1px;background:var(--ligne-claire)}

/* ── Champs ─────────────────────────────────────────────────────────────── */
.cp-field{margin-bottom:20px}
.cp-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
@media(max-width:520px){.cp-row2{grid-template-columns:1fr;gap:0}.cp-row2 > *{margin-bottom:20px}}
.cp-lbl{display:block;font-size:11px;font-weight:700;color:var(--texte-3);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:8px}
.cp-lbl span{color:var(--orange-fonce)}
.cp-labrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.cp-labrow .cp-lbl{margin:0}
.cp-link{font-size:12.5px;color:var(--orange-fonce);font-weight:600}
.cp-input{width:100%;padding:14px 16px;border:1px solid var(--ligne);border-radius:var(--radius-btn);
  background:var(--surface);font-size:14.5px;color:var(--encre);font-family:inherit;min-height:50px;
  transition:border-color .18s var(--ivp-ease)}
.cp-input::placeholder{color:var(--texte-3)}
.cp-input:focus{outline:none;border-color:var(--orange)}
.cp-input.is-err{border-color:var(--erreur)}
textarea.cp-input{min-height:120px;resize:vertical;line-height:1.6}
select.cp-input{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7266' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:42px}
.cp-err{font-size:12.5px;color:var(--erreur);margin-top:6px;display:none}
.cp-err.show{display:block}
.cp-aide{font-size:12.5px;color:var(--texte-3);margin-top:6px;line-height:1.55}

/* Mot de passe : l'œil est un bouton, il doit rester atteignable au doigt. */
.cp-pwd{position:relative}
.cp-pwd .cp-input{padding-right:50px}
.cp-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border:none;background:none;color:var(--texte-3);cursor:pointer;font-size:15px}
.cp-eye:hover{color:var(--encre)}

/* Robustesse du mot de passe */
.cp-jauge{display:flex;gap:5px;margin-top:10px}
.cp-jauge i{flex:1;height:4px;border-radius:2px;background:var(--ligne);transition:background .25s var(--ivp-ease)}
.cp-jauge.n1 i:nth-child(1){background:var(--erreur)}
.cp-jauge.n2 i:nth-child(-n+2){background:var(--orange)}
.cp-jauge.n3 i:nth-child(-n+3){background:var(--orange-clair)}
.cp-jauge.n4 i{background:var(--succes)}
.cp-jauge-t{font-size:12px;color:var(--texte-3);margin-top:6px}

.cp-check{display:flex;align-items:flex-start;gap:11px;margin-bottom:22px;font-size:13.5px;
  color:var(--texte-2);line-height:1.6;cursor:pointer}
.cp-check input{width:18px;height:18px;accent-color:var(--orange);margin:2px 0 0;flex-shrink:0}

.cp-submit{width:100%;text-align:center;padding:16px;background:var(--orange-fonce);color:#fff;border:none;
  border-radius:var(--radius-btn);font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;
  min-height:54px;transition:background .18s var(--ivp-ease)}
.cp-submit:hover{background:var(--orange-fonce)}
.cp-submit:disabled{background:var(--texte-3);cursor:not-allowed}
.cp-submit .sp{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:cpSpin .7s linear infinite;margin-left:10px;vertical-align:-3px}
.cp-submit.load .sp{display:inline-block}
@keyframes cpSpin{to{transform:rotate(360deg)}}

.cp-alt{text-align:center;font-size:13.5px;color:var(--texte-2);margin-top:22px}
.cp-alt a{color:var(--orange-fonce);font-weight:600}
.cp-ou{display:flex;align-items:center;gap:16px;margin:30px 0}
.cp-ou .l{flex:1;height:1px;background:var(--ligne)}
.cp-ou span{font-size:12px;color:var(--texte-3);font-weight:600;letter-spacing:.08em}
.cp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:460px){.cp-tiles{grid-template-columns:1fr}}
.cp-tile{border:1px solid var(--ligne);border-radius:var(--radius);padding:20px 16px;text-align:center;
  display:block;background:var(--surface);transition:border-color .18s var(--ivp-ease),background .18s var(--ivp-ease)}
.cp-tile:hover{border-color:var(--orange);background:var(--ivoire)}
.cp-tile b{font-family:var(--serif);font-size:16px;color:var(--encre);display:block;margin-bottom:4px;font-weight:400}
.cp-tile span{font-size:12.5px;color:var(--texte-2)}


/* ── Listes de la page « Mes données » ─────────────────────────────────────
   Une grille étiquette / valeur plutôt qu'un tableau : sur téléphone, un
   tableau à deux colonnes déborde dès que la valeur est un e-mail. */
.cp-specs{display:grid;grid-template-columns:1fr}
.cp-specs .r{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--ligne-claire)}
.cp-specs .r:last-child{border-bottom:none}
.cp-specs .k{font-size:13px;color:var(--texte-3);font-weight:600;flex-shrink:0}
.cp-specs .v{font-size:14.5px;font-weight:600;text-align:right;word-break:break-word;min-width:0}
@media(max-width:460px){
  .cp-specs .r{flex-direction:column;gap:3px}
  .cp-specs .v{text-align:left}
}
.cp-req{display:flex;flex-direction:column;gap:10px}
.cp-req .it{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--texte-2);line-height:1.6}
.cp-req .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;margin-top:8px}

/* ── Messages ───────────────────────────────────────────────────────────── */
.cp-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-btn);
  font-size:13.5px;line-height:1.6;margin-bottom:22px;border:1px solid}
.cp-alert.ok{background:#eef6f1;border-color:var(--succes);color:#155943}
.cp-alert.ko{background:#fdf2ee;border-color:#f0d9ce;color:var(--erreur)}
.cp-alert.info{background:var(--ivoire);border-color:var(--ligne);color:var(--texte-2)}
.cp-alert i{margin-top:2px;flex-shrink:0}
.cp-alert a{color:inherit;text-decoration:underline}

/* ── Colonne de réassurance ─────────────────────────────────────────────── */
.cp-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}
@media(max-width:900px){.cp-side{position:static}}
@media(max-height:820px){.cp-side{position:static}}
.cp-panneau{background:var(--encre);border-radius:var(--radius);padding:28px 26px;color:var(--ivoire)}
.cp-panneau h3{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--ivoire);margin:0 0 18px}
.cp-etapes{display:flex;flex-direction:column;gap:18px}
.cp-etape{display:flex;gap:14px;align-items:flex-start}
.cp-num{width:42px;height:42px;border-radius:50%;border:1px solid rgba(250,246,240,.2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:17px;color:var(--orange-clair)}
.cp-etape b{display:block;font-size:14.5px;font-weight:700;color:var(--ivoire)}
.cp-etape span{font-size:13px;color:#a5a19c;line-height:1.55;display:block;margin-top:3px}
.cp-aide-bloc{border-top:1px solid rgba(250,246,240,.12);margin-top:24px;padding-top:20px}
.cp-aide-bloc .a{font-size:13px;color:#a5a19c}
.cp-aide-bloc .b{font-size:14px;color:var(--orange-clair);font-weight:600;margin-top:4px;display:block}

.cp-info{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--ligne);border-radius:var(--radius);padding:20px}
.cp-info-ico{width:42px;height:42px;border-radius:50%;background:var(--ivoire);border:1px solid var(--ligne);
  display:flex;align-items:center;justify-content:center;color:var(--orange-fonce);flex-shrink:0}
.cp-info-t{font-size:13px;font-weight:700;color:var(--encre);margin-bottom:3px}
.cp-info-x{font-size:13px;color:var(--texte-2);line-height:1.6}

/* ── Formulaire en étapes (inscription propriétaire) ────────────────────── */
.cp-jalons{display:flex;gap:8px;margin-bottom:30px}
.cp-jalon{flex:1;min-width:0}
.cp-jalon .bar{height:3px;border-radius:2px;background:var(--ligne);transition:background .3s var(--ivp-ease)}
.cp-jalon.fait .bar,.cp-jalon.on .bar{background:var(--orange)}
.cp-jalon .t{font-size:11.5px;font-weight:700;color:var(--texte-3);letter-spacing:.06em;margin-top:9px;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-jalon.on .t{color:var(--encre)}
.cp-jalon.fait .t{color:var(--texte-2)}
@media(max-width:600px){.cp-jalon .t{display:none}}
.cp-etape-panneau{display:none}
.cp-etape-panneau.on{display:block}
.cp-nav{display:flex;gap:12px;margin-top:28px}
.cp-nav .cp-submit{margin:0}
.cp-prec{padding:16px 24px;border:1px solid var(--ligne-forte);background:none;color:var(--encre);
  border-radius:var(--radius-btn);font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;min-height:54px}
.cp-prec:hover{background:var(--ivoire)}

/* Choix visuel (type de bien, type de compte) */
.cp-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cp-choix label{border:1px solid var(--ligne);border-radius:var(--radius);padding:18px 16px;cursor:pointer;
  display:block;text-align:center;background:var(--surface);transition:border-color .18s var(--ivp-ease),background .18s var(--ivp-ease)}
.cp-choix input{position:absolute;opacity:0;pointer-events:none}
.cp-choix label:hover{border-color:var(--orange-clair)}
.cp-choix input:checked + .cp-choix-in{color:var(--encre)}
.cp-choix label:has(input:checked){border-color:var(--orange);background:var(--ivoire);box-shadow:inset 0 -2px 0 var(--orange)}
.cp-choix b{display:block;font-size:14.5px;font-weight:700;margin-bottom:4px}
.cp-choix span{font-size:12.5px;color:var(--texte-2);line-height:1.5}

/* Dépôt de pièce (KYC) */
.cp-fichier{border:1px dashed var(--ligne-forte);border-radius:var(--radius);padding:24px 18px;text-align:center;
  background:var(--ivoire);cursor:pointer;display:block;transition:border-color .18s var(--ivp-ease)}
.cp-fichier:hover{border-color:var(--orange)}
.cp-fichier input{display:none}
.cp-fichier .ico{font-size:22px;color:var(--texte-3);margin-bottom:8px}
.cp-fichier b{display:block;font-size:14px;margin-bottom:4px}
.cp-fichier span{font-size:12.5px;color:var(--texte-2)}
.cp-fichier.rempli{border-style:solid;border-color:var(--succes);background:#eef6f1}
.cp-fichier.rempli .ico{color:var(--succes)}

/* ═══════════════════════════════════════════════════════════════════════════
   25. FORMULAIRES DE COMPTE — retours de saisie en direct
   ───────────────────────────────────────────────────────────────────────────
   Habillage des mécanismes portés par assets/js/imovi-formulaires.js :
   pastille d'état dans le champ, ligne de message dessous, jauge de
   robustesse. La boîte .cp-boite est créée par le module, pas par les pages.
   ═══════════════════════════════════════════════════════════════════════════ */
.cp-boite{position:relative}
.cp-boite .cp-input{padding-right:46px}

/* Pastille d'état. Sur un champ de mot de passe, l'œil occupe déjà la droite :
   la pastille se décale pour ne pas le recouvrir. */
.cp-etat{position:absolute;right:14px;top:25px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;pointer-events:none;line-height:1;
  opacity:0;transition:opacity .2s var(--ivp-ease)}
.cp-etat:not(:empty){opacity:1}
.cp-boite:has(.cp-pwd) .cp-etat{right:52px}
.cp-boite:has(.cp-pwd) .cp-input{padding-right:88px}
.cp-etat.e-ok{color:var(--succes)}
.cp-etat.e-ko{color:var(--erreur)}
.cp-etat.e-alerte{color:var(--orange-fonce)}
.cp-etat.e-info,.cp-etat.e-charge{color:var(--texte-3)}

/* La bordure double le message : un daltonien doit voir l'icône changer,
   pas seulement la couleur. */
.cp-input.est-ok{border-color:var(--succes)}
.cp-input.est-ko{border-color:var(--erreur)}
.cp-input.est-charge{border-color:var(--ligne-forte)}

.cp-msg{font-size:12.5px;line-height:1.55;margin-top:0;max-height:0;overflow:hidden;
  opacity:0;transition:max-height .22s var(--ivp-ease),opacity .22s var(--ivp-ease),margin-top .22s var(--ivp-ease)}
.cp-msg.vu{max-height:80px;opacity:1;margin-top:7px}
.cp-msg.m-ok{color:var(--succes)}
.cp-msg.m-ko{color:var(--erreur)}
.cp-msg.m-alerte{color:var(--orange-fonce)}
.cp-msg.m-info,.cp-msg.m-charge{color:var(--texte-2)}
.cp-msg a{color:inherit;text-decoration:underline;font-weight:600}

/* ── Jauge de robustesse ────────────────────────────────────────────────── */
.cp-force{margin-top:12px}
.cp-force .piste{height:5px;border-radius:3px;background:var(--ligne);overflow:hidden}
.cp-force .remplissage{height:100%;width:0;border-radius:3px;background:var(--erreur);
  transition:width .3s var(--ivp-ease),background .3s var(--ivp-ease)}
.cp-force[data-niveau="60"]  .remplissage{background:var(--orange)}
.cp-force[data-niveau="80"]  .remplissage{background:var(--orange-clair)}
.cp-force[data-niveau="100"] .remplissage{background:var(--succes)}
.cp-force .bas{display:flex;justify-content:space-between;gap:12px;margin-top:7px}
.cp-force .aide{font-size:12.5px;color:var(--texte-3);line-height:1.5}
.cp-force .mot{font-size:12.5px;font-weight:700;color:var(--texte-2);white-space:nowrap}
.cp-force[data-niveau="100"] .mot{color:var(--succes)}
.cp-force[data-niveau="20"] .mot,.cp-force[data-niveau="40"] .mot{color:var(--erreur)}

/* ── Récapitulatif d'erreurs ────────────────────────────────────────────── */
.cp-resume{display:none;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:22px;
  border:1px solid #f0d9ce;background:#fdf2ee;color:var(--erreur);
  border-radius:var(--radius-btn);font-size:13.5px;line-height:1.6}
.cp-resume.vu{display:flex}

/* ── Raffinements de la carte ───────────────────────────────────────────── */
/* Une ombre très basse détache la carte du fond ivoire sans l'alourdir : à
   plat, la carte et la page se confondaient sur écran peu contrasté. */
.cp-card{box-shadow:0 1px 2px rgba(43,38,32,.04),0 8px 24px -12px rgba(43,38,32,.10)}
.cp-panneau{box-shadow:0 10px 30px -18px rgba(43,38,32,.5)}
.cp-input:focus{box-shadow:0 0 0 3px rgba(249,115,22,.13)}
.cp-input.est-ok:focus{box-shadow:0 0 0 3px rgba(27,110,83,.13)}
.cp-input.est-ko:focus{box-shadow:0 0 0 3px rgba(179,57,31,.13)}
.cp-submit:focus-visible,.cp-prec:focus-visible,.cp-tg:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Le changement d'étape se voit : sans transition, le formulaire semblait
   sauter d'un écran à l'autre sans qu'on sache si l'on avançait. */
.cp-etape-panneau.on{animation:cpEntre .32s var(--ivp-ease) both}
@keyframes cpEntre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .cp-etape-panneau.on{animation:none}
  .cp-msg{transition:none}
}

/* Aiguillage client / propriétaire : le trait actif glisse au lieu d'apparaître. */
.cp-tg{position:relative}
.cp-tg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--orange);transform:scaleX(0);transition:transform .25s var(--ivp-ease)}
.cp-tg.on::after{transform:scaleX(1)}
.cp-tg.on{box-shadow:none}

/* ═══════════════════════════════════════════════════════════════════════════
   MENU PROFIL UTILISATEUR — Refonte 2026 v2.2
   Design premium, groupes, icônes, badges de notification
   ═══════════════════════════════════════════════════════════════════════════ */

.ivp-user-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 300px;
  max-width: 340px;
  background: #FFFFFF;
  border: 1px solid rgba(26, 22, 18, .08);
  border-radius: 18px;
  box-shadow:
    0 4px 8px -4px rgba(26, 22, 18, .06),
    0 24px 48px -12px rgba(26, 22, 18, .18),
    0 48px 96px -24px rgba(26, 22, 18, .12);
  overflow: hidden;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition:
    opacity .2s cubic-bezier(.22, .61, .36, 1),
    visibility .2s,
    transform .2s cubic-bezier(.22, .61, .36, 1);
}
.ivp-user-menu.ouvert {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ivp-user-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, #FAF6F0 0%, #FFFFFF 100%);
  border-bottom: 1px solid rgba(26, 22, 18, .06);
}

.ivp-user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A1612 0%, #2B2620 100%);
  color: #FAF6F0;
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(26, 22, 18, .3);
  position: relative;
}

.ivp-user-avatar.verifie::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #B87333;
  border: 2px solid #FFFFFF;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 8px;
  background-position: center;
  background-repeat: no-repeat;
}

.ivp-user-info { flex: 1; min-width: 0; }

.ivp-user-name {
  font-family: Georgia, serif;
  font-size: 15.5px;
  font-weight: 500;
  color: #1A1612;
  line-height: 1.2;
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ivp-user-role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8E561F;
  background: rgba(184, 115, 51, .10);
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
}
.ivp-user-role i { font-size: 9px; }

.ivp-user-group { padding: 8px 8px 6px; }
.ivp-user-group + .ivp-user-group { border-top: 1px solid rgba(26, 22, 18, .06); }

.ivp-user-group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A39B93;
  padding: 8px 12px 6px;
  margin: 0;
}

.ivp-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #2B2620;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s, transform .15s;
  position: relative;
}
.ivp-user-item:hover { background: #FAF6F0; color: #1A1612; }
.ivp-user-item:active { transform: scale(.98); }
.ivp-user-item:focus-visible { outline: 2px solid #B87333; outline-offset: -2px; }

.ivp-user-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(26, 22, 18, .05);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #6B6560;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.ivp-user-item:hover .ivp-user-item-icon {
  background: rgba(184, 115, 51, .12);
  color: #8E561F;
}

.ivp-user-item-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ivp-user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #B87333;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.ivp-user-badge.discret {
  background: rgba(184, 115, 51, .15);
  color: #8E561F;
}

.ivp-user-item.danger { color: #B91C1C; }
.ivp-user-item.danger:hover { background: rgba(185, 28, 28, .08); color: #991B1B; }
.ivp-user-item.danger .ivp-user-item-icon { background: rgba(185, 28, 28, .08); color: #B91C1C; }
.ivp-user-item.danger:hover .ivp-user-item-icon { background: rgba(185, 28, 28, .15); }

.ivp-user-footer {
  padding: 12px 20px;
  background: #FAF6F0;
  border-top: 1px solid rgba(26, 22, 18, .06);
  font-size: 11.5px;
  color: #A39B93;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ivp-user-footer a { color: #8E561F; text-decoration: none; font-weight: 600; }
.ivp-user-footer a:hover { text-decoration: none; }

/* Pastille non-lus sur l'avatar toggle */
.ivp-user-toggle { position: relative; }
.ivp-user-toggle[data-unread]:not([data-unread="0"])::after {
  content: attr(data-unread);
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #B87333;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid #FFFFFF;
  line-height: 1;
}

@media (max-width: 480px) {
  .ivp-user-menu { min-width: 280px; max-width: calc(100vw - 32px); }
  .ivp-user-header { padding: 16px 16px 14px; }
  .ivp-user-avatar { width: 42px; height: 42px; font-size: 17px; }
  .ivp-user-group { padding: 6px 6px 4px; }
  .ivp-user-item { padding: 10px 10px; font-size: 13.5px; }
  .ivp-user-item-icon { width: 30px; height: 30px; font-size: 13px; }
}
.ivp-user-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: transparent;
  border: 1px solid rgba(26, 22, 18, .08);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #1A1612;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  position: relative;
}
.ivp-user-toggle:hover {
  background: #FAF6F0;
  border-color: rgba(184, 115, 51, .35);
}
.ivp-user-toggle:focus-visible {
  outline: 3px solid #B87333;
  outline-offset: 2px;
}

.ivp-user-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A1612 0%, #2B2620 100%);
  color: #FAF6F0;
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}

.ivp-user-toggle-name {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}