/* ═══════════════════════════════════════════════════════════════════════
   ESPACE HÔTE — la couche verre
   ═══════════════════════════════════════════════════════════════════════

   Une feuille unique posée par-dessus Tailwind, chargée après lui sur les
   seize pages de l'espace hôte. Pourquoi une couche et non une refonte
   page par page : les seize partagent exactement les mêmes chaînes de
   classes pour la barre latérale et les cartes. Retoucher le HTML de
   chacune, c'est seize occasions de diverger — et la dix-septième page
   naîtrait déjà décalée.

   Le verre n'existe que s'il a quelque chose derrière lui. Sur un aplat
   blanc il ne rend rien : c'est le fond dégradé et ses deux lueurs qui
   rendent la translucidité visible.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --lvg-or:#C4924A;
  --lvg-or-clair:#E9C591;
  --lvg-encre:#1C1614;
  --lvg-creme:#FFF7EC;
  --lvg-trait:rgba(196,146,74,.16);
  --lvg-ombre:0 4px 24px rgba(70,44,26,.055),0 1px 2px rgba(70,44,26,.04);
  --lvg-ombre-h:0 12px 38px rgba(70,44,26,.11),0 2px 6px rgba(70,44,26,.05);
}

/* ── Le fond ─────────────────────────────────────────────────────────
   Deux lueurs fixes, très diffuses. Elles ne se remarquent pas
   consciemment ; elles donnent au verre de quoi accrocher. */
body.bg-light,
body.font-sans{
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(233,197,145,.20), transparent 62%),
    radial-gradient(880px 520px at -6% 46%, rgba(196,146,74,.10), transparent 58%),
    linear-gradient(178deg,#FDF8F1 0%,#F8F1E7 58%,#F5EDE2 100%) !important;
  background-attachment:fixed !important;
  min-height:100vh;
}

/* ── La barre latérale ───────────────────────────────────────────── */
#sidebar{
  background:rgba(255,255,255,.66) !important;
  -webkit-backdrop-filter:blur(26px) saturate(175%);
  backdrop-filter:blur(26px) saturate(175%);
  border-right:1px solid var(--lvg-trait) !important;
  box-shadow:1px 0 32px rgba(70,44,26,.05);
}
#sidebar > div > div:first-child{
  border-bottom:1px solid var(--lvg-trait) !important;
}
#sidebar .p-4.border-t{ border-top:1px solid var(--lvg-trait) !important; }

/* Les entrées de navigation. Le repos est neutre, le survol effleure,
   l'actif se pose — trois niveaux, pas deux. */
#sidebar nav a{
  position:relative;
  border:1px solid transparent;
  transition:background .22s ease,border-color .22s ease,transform .22s cubic-bezier(.2,.9,.2,1);
}
#sidebar nav a:hover{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(196,146,74,.14);
  transform:translateX(2px);
}
#sidebar nav a.bg-primary-light,
#sidebar nav a[class*="bg-primary-light"]{
  background:linear-gradient(135deg,rgba(233,197,145,.30),rgba(196,146,74,.16)) !important;
  border-color:rgba(196,146,74,.30);
  color:#8A6A33 !important;
  box-shadow:0 2px 10px rgba(196,146,74,.14);
}
/* Le filet vertical de l'onglet courant : il dit « vous êtes ici » sans
   ajouter ni couleur ni graisse. */
#sidebar nav a.bg-primary-light::before,
#sidebar nav a[class*="bg-primary-light"]::before{
  content:"";position:absolute;left:-1px;top:11px;bottom:11px;width:3px;
  border-radius:99px;background:linear-gradient(180deg,var(--lvg-or-clair),var(--lvg-or));
}
#sidebar nav a svg{ transition:transform .22s cubic-bezier(.2,1.4,.4,1); }
#sidebar nav a:hover svg{ transform:scale(1.08); }

/* ── La marque de nouveauté ──────────────────────────────────────────
   Le mot « NOUVEAU » en toutes lettres mesure une soixantaine de pixels.
   Dans une barre de 256, après l'icône et « Boost Partenaire », il ne
   reste pas la place : le libellé passait à la ligne. Un aplat criard qui
   casse en plus la mise en page, c'est deux défauts pour un.

   Il devient un point. Six pixels, doré, avec un halo qui respire
   lentement — la convention de toutes les applications, comprise sans
   qu'on ait à la lire, et qui ne coûte aucune largeur. Le mot reste dans
   le HTML pour les lecteurs d'écran. */
#sidebar nav a > span:not([class*="bg-secondary"]){
  white-space:nowrap;
}
#sidebar nav a span[class*="bg-secondary"]{
  position:relative;
  width:7px;height:7px;flex:none;
  padding:0 !important;
  margin-left:auto;
  border-radius:50% !important;
  background:linear-gradient(135deg,var(--lvg-or-clair),var(--lvg-or)) !important;
  /* Le texte reste lisible par les lecteurs d'écran, invisible à l'œil. */
  font-size:0 !important;
  color:transparent !important;
  overflow:hidden;
}
#sidebar nav a span[class*="bg-secondary"]::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:rgba(196,146,74,.30);
  animation:lvg-halo 2.8s cubic-bezier(.3,0,.4,1) infinite;
}
@keyframes lvg-halo{
  0%{transform:scale(.55);opacity:.75}
  70%,100%{transform:scale(1.5);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  #sidebar nav a span[class*="bg-secondary"]::after{animation:none;opacity:0}
  #sidebar nav a,#sidebar nav a svg{transition:none}
}

/* Le bouton menu sur téléphone suit la même matière. */
#hamburger-btn{
  background:rgba(255,255,255,.74) !important;
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  border:1px solid var(--lvg-trait);
  box-shadow:var(--lvg-ombre) !important;
}

/* ── Les cartes ──────────────────────────────────────────────────────
   Limitées à <main> : la barre latérale a son propre traitement, et une
   règle qui attraperait tout le blanc de la page toucherait aussi les
   champs de formulaire. */
main .bg-white{
  background:rgba(255,255,255,.74) !important;
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border-color:var(--lvg-trait) !important;
  box-shadow:var(--lvg-ombre);
}
/* Les cartes qui mènent quelque part se soulèvent ; les autres non. */
main a.bg-white:hover,
main button.bg-white:hover{
  background:rgba(255,255,255,.90) !important;
  border-color:rgba(196,146,74,.30) !important;
  box-shadow:var(--lvg-ombre-h);
  transform:translateY(-2px);
}
main a.bg-white,main button.bg-white{
  transition:background .25s ease,border-color .25s ease,box-shadow .3s ease,
             transform .25s cubic-bezier(.2,.9,.2,1);
}

/* Les champs restent opaques : un formulaire translucide se lit mal, et
   c'est là qu'on demande à l'hôte de taper. */
main input,main select,main textarea{
  background:#fff !important;
  border-color:rgba(196,146,74,.22) !important;
}
main input:focus,main select:focus,main textarea:focus{
  border-color:var(--lvg-or) !important;
  box-shadow:0 0 0 3px rgba(196,146,74,.13) !important;
}

/* Les séparateurs prennent la teinte de la marque plutôt que le gris. */
main .border-gray-200,main .border-gray-100{ border-color:var(--lvg-trait) !important; }
main .divide-gray-200 > * + *{ border-color:var(--lvg-trait) !important; }

/* ── Les surfaces sombres ────────────────────────────────────────────
   Là où le fond est encre, le verre s'inverse : c'est ce contraste qui
   fait exister la matière au lieu de la répéter. */
main [style*="#0E0A09"],main .bg-dark{
  box-shadow:0 18px 50px rgba(28,22,20,.22);
  position:relative;overflow:hidden;
}
main [style*="#0E0A09"]::after{
  content:"";position:absolute;width:340px;height:340px;top:-170px;right:-100px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(233,197,145,.20),transparent 68%);
}

/* Les boutons pleins gagnent une profondeur, pas une couleur. */
main button.bg-primary,main a.bg-primary,main .bg-primary.text-white{
  box-shadow:0 6px 18px rgba(196,146,74,.24);
  transition:box-shadow .25s ease,transform .22s cubic-bezier(.2,1.4,.4,1);
}
main button.bg-primary:hover,main a.bg-primary:hover{
  box-shadow:0 12px 30px rgba(196,146,74,.32);
  transform:translateY(-1px);
}

/* ── La lisibilité du blanc sur la primaire ──────────────────────────
   `primary` = #F5C6AA. Blanc dessus : contraste 1,7:1, seuil 4,5:1. Les
   chiffres d'étape disparaissaient, les libellés de bouton se devinaient.
   Le dégradé or de la marque avec de l'encre monte à 11:1 — et c'est
   exactement la couleur du site public. */
main .bg-primary.text-white,
main button.bg-primary,
main a.bg-primary,
main .bg-primary[class*="text-white"]{
  background:linear-gradient(135deg,var(--lvg-or-clair),var(--lvg-or)) !important;
  color:#160F0C !important;
}
main .bg-primary.text-white svg{ color:#160F0C !important; }

/* Le libellé actif de la barre latérale suivait la même primaire pâle. */
#sidebar nav a[class*="text-primary"]{ color:#8A6A33 !important; }


/* ══════════════════════════════════════════════════════════════════════
   LE GROUPE DU BAS DE LA BARRE LATÉRALE — 19 août 2026
   ══════════════════════════════════════════════════════════════════════

   Tout ce qui a été ajouté ce jour-là tient ici, en fin de fichier, et
   nulle part ailleurs. La première version était insérée au milieu du
   fichier : une suppression de bloc a emporté avec elle les cartes et
   les boutons de tout l'espace hôte. Regroupé à la fin, ce travail se
   retire ou se remplace sans jamais toucher à ce qui précède. */

/* L'écart entre l'icône et le libellé. Il était porté par space-x-2.5,
   une classe absente du Tailwind purgé : l'icône touchait le mot sur
   toutes les entrées du menu. En CSS, il ne peut plus disparaître. */
#sidebar nav a,
#sidebar-bas a,
#sidebar-bas button{ gap:10px; }

/* ── Le socle de verre ─────────────────────────────────────
   Le recours, le compte et l'aide vivent en bas, séparés du reste. La
   séparation ne passe pas par une seconde couleur — l'espace n'en a
   qu'une — mais par la matière : le même verre que la barre, teinté
   crème et or, posé un cran plus dense. On sent un socle, on ne voit
   pas une bande.

   Le liseré blanc du haut est ce qui fait le verre. Sans lui, un aplat
   translucide ressemble à une zone désactivée ; avec lui, la tranche
   accroche la lumière et le bloc paraît posé sur la barre. */
#sidebar-bas{
  position:relative;
  background:linear-gradient(180deg,rgba(255,247,236,.50),rgba(233,197,145,.30)) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid rgba(196,146,74,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 -10px 26px rgba(196,146,74,.07);
}

/* Les entrées du bas parlent la même langue que celles du haut :
   repos neutre, survol qui effleure, actif qui se pose. */
#sidebar-bas a,
#sidebar-bas button{
  position:relative;
  border:1px solid transparent;
  transition:background .22s ease,border-color .22s ease,transform .22s cubic-bezier(.2,.9,.2,1);
}
/* Sur du verre teinté, un survol blanc opaque ferait tache : on éclaircit
   le verre lui-même au lieu de poser une couche par-dessus. */
#sidebar-bas a:hover{
  background:rgba(255,255,255,.55) !important;
  border-color:rgba(196,146,74,.22);
  transform:translateX(2px);
}
#sidebar-bas button[data-deconnexion]:hover{
  background:rgba(255,255,255,.48) !important;
}
/* « Vous êtes ici » doit se dire pareil en haut et en bas, sinon l'œil
   apprend deux signes pour une seule idée. Même or, simplement posé un
   peu plus fort pour tenir sur un fond déjà doré. */
#sidebar-bas a[class*="bg-primary-light"]{
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(233,197,145,.52)) !important;
  border-color:rgba(196,146,74,.42);
  color:#8A6A33 !important;
  box-shadow:0 2px 12px rgba(196,146,74,.20),inset 0 1px 0 rgba(255,255,255,.9);
}
#sidebar-bas a[class*="bg-primary-light"]::before{
  content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;
  border-radius:99px;background:linear-gradient(180deg,var(--lvg-or-clair),var(--lvg-or));
}
#sidebar-bas a svg,
#sidebar-bas button svg{ transition:transform .22s cubic-bezier(.2,1.4,.4,1); }
#sidebar-bas a:hover svg{ transform:scale(1.08); }

@media (prefers-reduced-motion:reduce){
  #sidebar-bas a,#sidebar-bas button,#sidebar-bas a svg{ transition:none; }
  #sidebar-bas a:hover{ transform:none; }
}

/* ── Le bandeau de consentement et la barre latérale ───────────────
   Le bandeau cookies est fixe sur toute la largeur, en z-index 2000 ;
   la barre latérale est en z-index 50. Il recouvrait donc ses 72 derniers
   pixels : « Aide » et « Déconnexion » n'étaient pas cliquables tant que
   l'hôte n'avait pas répondu au bandeau. Vérifié au clic, pas à l'œil.

   On ne monte pas la barre au-dessus du bandeau : le consentement doit
   rester atteignable. On décale le bandeau de la largeur de la barre,
   là où elle est affichée — sur mobile elle est hors écran, le bandeau
   garde donc toute la largeur. */
@media (min-width:768px){
  #luvia-consent{ left:16rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LA BARRE DU HAUT — 19 août 2026
   ═══════════════════════════════════════════════════════════════════════

   Elle traverse toute la largeur, la barre latérale commence en dessous.
   L'autre option — une barre qui ne couvre que la zone de contenu —
   obligeait à afficher le logo deux fois, dans la barre et en tête de la
   colonne. Un logo par écran suffit.

   Le verre a besoin de quelque chose derrière lui pour exister : ici,
   c'est le contenu qui défile dessous. C'est pour cela que le fond reste
   translucide plutôt que blanc plein. */

.lv-barre{
  position:fixed; top:0; left:0; right:0; height:60px; z-index:60;
  display:flex; align-items:center; gap:22px; padding:0 16px;
  background:rgba(255,255,255,.70);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid var(--lvg-trait);
  box-shadow:0 1px 24px rgba(70,44,26,.05);
}
.lv-barre .lv-ic{ flex:none; }

/* On descend la colonne et le contenu sous la barre. Le calcul remplace
   min-h-screen : sans cela, 100vh sous une barre de 60px fabrique une
   barre de défilement sur toutes les pages, y compris les vides. */
body > main{ padding-top:60px; min-height:calc(100vh - 60px) !important; }
#sidebar{ top:60px !important; height:calc(100vh - 60px) !important; }
/* La colonne n'a plus besoin de son propre logo : il est dans la barre. */
#sidebar > div > div:first-child{ display:none !important; }

.lv-barre__marque{
  display:flex; align-items:center; gap:9px; text-decoration:none; flex:none;
}
.lv-barre__marque img{ width:30px; height:30px; border-radius:8px; }
.lv-barre__nom{
  font-weight:800; font-size:16px; letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--lvg-or),var(--lvg-or-clair));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* « Espace hôte » est une précision, pas un titre : il reste discret et
   disparaît quand la place manque. */
.lv-barre__role{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#A98B62; padding-left:9px; margin-left:2px;
  border-left:1px solid var(--lvg-trait);
}

.lv-barre__liens{ display:flex; align-items:center; gap:4px; }
.lv-barre__liens a{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius:10px; text-decoration:none; white-space:nowrap;
  font-size:13.5px; font-weight:600; color:#5B5048;
  border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.lv-barre__liens a:hover{
  background:rgba(255,255,255,.85); border-color:var(--lvg-trait); color:var(--lvg-encre);
}

/* ── Le compte, à droite ─────────────────────────────────────────────
   L'identité est toujours visible ; le reste attend qu'on la demande. */
.lv-barre__compte{ position:relative; margin-left:auto; flex:none; }
.lv-compte__bouton{
  display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px;
  border-radius:999px; border:1px solid var(--lvg-trait); cursor:pointer;
  background:rgba(255,255,255,.72); color:var(--lvg-encre);
  transition:background .2s ease,box-shadow .2s ease;
}
.lv-compte__bouton:hover{ background:#fff; box-shadow:var(--lvg-ombre); }
.lv-compte__bouton svg{ color:#A98B62; }
.lv-avatar{
  width:32px; height:32px; border-radius:999px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#fff;
  background:linear-gradient(135deg,var(--lvg-or-clair),var(--lvg-or));
  background-size:cover; background-position:center;
}
.lv-avatar--photo{ color:transparent; }
.lv-compte__texte{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.lv-compte__texte b{ font-size:13px; font-weight:700; }
.lv-compte__texte small{ font-size:11px; color:#8B7A6B; }

.lv-panneau{
  position:absolute; right:0; top:calc(100% + 8px); width:270px; z-index:80;
  border-radius:16px; overflow:hidden;
  /* Fond plein, et pas de backdrop-filter ici. Le panneau est enfant de
     la barre, qui en porte déjà un : Chromium recompose mal les deux
     filtres imbriqués et laisse remonter le contenu du dessous — vérifié,
     le texte des cartes traversait encore à 97,5 % d'opacité. Un menu de
     compte se lit, il ne se contemple pas : le verre reste sur la barre,
     la lisibilité gagne ici. */
  background:#FFFDFA;
  border:1px solid var(--lvg-trait);
  box-shadow:0 18px 48px rgba(70,44,26,.16);
  animation:lv-panneau-ouvre .16s cubic-bezier(.2,.9,.2,1);
}
.lv-panneau[hidden]{ display:none; }
@keyframes lv-panneau-ouvre{ from{ opacity:0; transform:translateY(-6px); } }
.lv-panneau__tete{
  display:flex; flex-direction:column; gap:2px; padding:13px 15px;
  background:linear-gradient(180deg,rgba(255,247,236,.55),rgba(233,197,145,.22));
  border-bottom:1px solid var(--lvg-trait);
}
.lv-panneau__tete b{ font-size:13.5px; }
.lv-panneau__tete small{ font-size:11.5px; color:#8B7A6B; word-break:break-all; }
.lv-panneau__corps{ padding:6px; }
.lv-panneau__pied{ padding:6px; border-top:1px solid var(--lvg-trait); }
.lv-panneau a,
.lv-panneau button{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:9px 11px; border:0; border-radius:10px; background:transparent;
  font-size:13.5px; font-weight:600; color:#3F372F; text-decoration:none;
  cursor:pointer; transition:background .18s ease;
}
.lv-panneau a:hover,
.lv-panneau button:hover{ background:rgba(196,146,74,.12); }
.lv-panneau [data-deconnexion-barre]{ color:#DC2626; }
.lv-panneau [data-deconnexion-barre]:hover{ background:rgba(220,38,38,.09); }

/* ── En dessous de md ────────────────────────────────────────────────
   Le bouton hamburger vit déjà en haut à gauche, en position fixe. On
   lui laisse la place plutôt que de le recouvrir, et on le fait passer
   au-dessus de la barre — sinon le menu devient inatteignable sur
   téléphone, ce qui serait pire que tout ce qu'on vient de corriger. */
@media (max-width: 767px){
  .lv-barre{ padding-left:62px; gap:12px; }
  .lv-barre__liens{ display:none; }
  .lv-barre__role{ display:none; }
  .lv-compte__texte{ display:none; }
  .lv-compte__bouton{ padding:5px; border-radius:999px; }
  #hamburger-btn{ z-index:70 !important; top:12px !important; left:12px !important; }
}
@media (max-width: 400px){
  .lv-barre__nom{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .lv-panneau{ animation:none; }
  .lv-barre__liens a,.lv-compte__bouton,.lv-panneau a,.lv-panneau button{ transition:none; }
}

/* ── La cloche, remontée dans la barre ──────────────────────────
   C'est elle qui pousse le bloc vers la droite quand elle est là ; sans
   elle, c'est le compte. D'où les deux règles : deux marges automatiques
   se partageraient l'espace et écarteraient la cloche du profil. */
.lv-cloche{ position:relative; margin-left:auto; flex:none; }
.lv-cloche + .lv-barre__compte{ margin-left:10px; }
.lv-cloche #btn-notifs{ padding:8px; border-radius:999px; }
.lv-cloche #btn-notifs svg{ width:21px; height:21px; color:#7A6B5C; }
.lv-cloche #btn-notifs:hover{ background:rgba(196,146,74,.12); }
/* Le panneau des notifications reprend l'ombre et le trait de la barre,
   pour qu'il n'ait pas l'air venu d'un autre écran. */
.lv-cloche #notifs-panneau{
  border-color:var(--lvg-trait) !important;
  box-shadow:0 18px 48px rgba(70,44,26,.16) !important;
}

/* La marque dans une phrase. Meme degrade que le mot-marque de la barre :
   deux ors differents pour le meme nom donneraient deux marques. */
.lv-marque-texte{
  font-weight:800;
  background:linear-gradient(135deg,var(--lvg-or),var(--lvg-or-clair));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* La salutation du tableau de bord. Elle a remplace le titre "Tableau de
   bord", qui ne faisait que repeter l'onglet allume dans la colonne. Elle
   en reprend donc la taille : c'est bien le titre de la page, et un titre
   se lit d'un coup d'oeil depuis l'autre bout du bureau.

   clamp() plutot qu'un point de rupture : entre un portable de 13 pouces
   et un ecran de bureau, la phrase grandit progressivement au lieu de
   sauter d'un cran. */
.lv-salutation{
  margin:0;
  font-size:clamp(21px, 1.9vw, 27px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.018em;
  color:var(--lvg-encre);
  text-wrap:balance;
}

/* L'ancien parcours Stripe, quand le formulaire unique prend la main.
   Il ne suffit pas de l'effacer une fois : le script de la page le
   raffiche a l'arrivee de l'authentification. Une regle CSS ne se laisse
   pas ecraser par un classList.remove('hidden'). */
body.lv-onboarding-direct #cta-zone,
body.lv-onboarding-direct #bank-form,
body.lv-onboarding-direct #prepare-card,
body.lv-onboarding-direct #steps{ display:none !important; }

/* ── Le formulaire de paiement, sur un seul écran ────────────────────
   En une colonne il faisait deux écrans et demi : on découvrait qu'on
   devait aussi donner son IBAN après avoir fait défiler, ce qui donne
   l'impression d'un formulaire sans fin. Deux colonnes sur ordinateur,
   une seule sur téléphone où le défilement est naturel. */
.od-grille{ display:flex; flex-direction:column; gap:14px; }
.od-col{ display:flex; flex-direction:column; gap:12px; }
.od-duo{ display:flex; gap:10px; }
.od-bloc{ display:flex; flex-direction:column; }
.od-titre{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:#A98B62; margin:0 0 2px;
}
.od-label{ font-size:13px; font-weight:600; color:var(--lvg-encre); margin-bottom:5px; }
.od-champ{
  width:100%; padding:10px 13px; border-radius:11px;
  border:1px solid #E5E7EB; outline:none; background:#fff;
  font-size:14px; color:var(--lvg-encre);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.od-champ:focus{ border-color:var(--lvg-or); box-shadow:0 0 0 3px rgba(196,146,74,.16); }

@media (min-width: 980px){
  .od-grille{
    flex-direction:row;
    gap:0 32px;
    align-items:stretch;
  }
  .od-col{ flex:1; min-width:0; }
  /* Un filet entre les deux colonnes : sans lui, les deux listes de
     champs se lisent comme une seule, en zigzag. */
  .od-col + .od-col{ padding-left:32px; border-left:1px solid var(--lvg-trait); }
}

/* Pour un nouvel hôte, la carte de statut annonce « non configuré » juste
   au-dessus du formulaire qui sert à le configurer. On la retire : elle
   coûte une hauteur d'écran pour répéter ce que le formulaire dit déjà. */
body.lv-onboarding-direct #status-card{ display:none !important; }

/* Les quatre etapes « vous etes redirige vers le site de Stripe » ne
   decrivent plus rien pour un nouvel hote : il ne quitte plus Luvia. Une
   explication fausse coute plus cher que pas d'explication du tout, donc
   elle disparait — et reste pour les hotes qui suivent encore l'ancien
   parcours, chez qui elle est toujours exacte. */
body.lv-onboarding-direct #explication-express{ display:none !important; }

/* ── Les quatre chiffres, sur téléphone ──────────────────────────────
   En une colonne, il fallait faire défiler quatre fois pour voir quatre
   nombres — et le score de référencement, qui est l'écran le plus utile
   pour un hôte qui démarre, n'apparaissait jamais à l'ouverture.

   Deux colonnes, et tout ce qui n'est pas le chiffre rétrécit : l'icône,
   les marges, le rayon. Le nombre, lui, garde sa taille : c'est la seule
   chose qu'on vient lire. */
@media (max-width: 767px){
  #cartes-stats{
    grid-template-columns:1fr 1fr !important;
    gap:11px !important;
    margin-bottom:18px !important;
  }
  #cartes-stats > div{ padding:14px !important; border-radius:16px !important; }
  #cartes-stats > div > div:first-child{ margin-bottom:10px !important; }
  #cartes-stats .w-12{ width:36px !important; height:36px !important; border-radius:11px !important; }
  #cartes-stats .w-6{ width:18px !important; height:18px !important; }
  /* La pastille « +12 % » ou « Ce mois » : elle informe, elle ne doit pas
     pousser l'icône hors de la carte sur un écran de 360 px. */
  #cartes-stats span[class*="rounded-full"]{
    font-size:10px !important;
    padding:2px 7px !important;
    white-space:nowrap;
  }
  #cartes-stats p:first-of-type{ font-size:12px !important; margin-bottom:1px !important; }
  #cartes-stats .text-3xl{ font-size:26px !important; line-height:1.15 !important; }
}

/* Sous 380 px, la pastille et l'icône ne tiennent plus côte à côte. */
@media (max-width: 379px){
  #cartes-stats span[class*="rounded-full"]{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LE SCORE DE RÉFÉRENCEMENT
   ═══════════════════════════════════════════════════════════════════════

   Deux défauts corrigés ici. Le premier était logique : toutes les barres
   prenaient la couleur du score global, donc un groupe achevé à 14/14
   s'affichait dans la même teinte qu'un groupe resté à 0/56 — la barre ne
   disait plus rien sur elle-même. Le second était de matière : la carte
   restait un aplat blanc au milieu d'un espace en verre.

   L'achèvement se dit en or, pas en vert. Le vert est la couleur du
   « conforme » ; l'or est celle de la maison, et c'est bien une réussite
   qu'on marque, pas une case cochée. */

.lv-score-groupe{ display:flex; flex-direction:column; }
.lv-score-nom{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; color:var(--lvg-encre);
}
.lv-score-pts{ font-weight:600; color:#9CA3AF; }
.lv-score-piste{
  height:7px; border-radius:99px; overflow:hidden;
  background:rgba(70,44,26,.07);
  box-shadow:inset 0 1px 2px rgba(70,44,26,.06);
}
.lv-score-jauge{
  height:100%; border-radius:99px;
  transition:width .7s cubic-bezier(.2,.9,.2,1), background .3s ease;
}

/* ── Un groupe terminé ─────────────────────────────────────────────── */
.lv-score-coche{ width:15px; height:15px; flex:none; color:var(--lvg-or); }
.lv-score-groupe--fini .lv-score-nom{ color:#8A6A33; }
.lv-score-groupe--fini .lv-score-pts{ color:var(--lvg-or); }
.lv-score-groupe--fini .lv-score-jauge{
  background:linear-gradient(90deg,var(--lvg-or-clair),var(--lvg-or));
  box-shadow:0 0 10px rgba(196,146,74,.35);
}
/* Un reflet qui traverse la barre une fois, à l'arrivée. Il dit « c'est
   fait » mieux qu'un texte, et ne se répète pas — une animation en boucle
   sur un tableau de bord qu'on garde ouvert devient vite insupportable. */
.lv-score-groupe--fini .lv-score-jauge::after{
  content:""; display:block; height:100%; width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:translateX(-120%);
  animation:lv-reflet 1.1s ease-out .35s 1;
}
@keyframes lv-reflet{ to{ transform:translateX(320%); } }

/* ── La carte, en verre comme le reste de l'espace ─────────────────── */
#score-carte{
  background:rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter:blur(22px) saturate(175%);
  backdrop-filter:blur(22px) saturate(175%);
  border:1px solid var(--lvg-trait) !important;
  box-shadow:var(--lvg-ombre) !important;
}
#score-carte > div:first-child{ border-bottom:1px solid var(--lvg-trait) !important; }

/* ── Tout est complet ──────────────────────────────────────────────── */
#score-carte.lv-score--complet{
  background:linear-gradient(150deg,rgba(255,247,236,.78),rgba(233,197,145,.30)) !important;
  border-color:rgba(196,146,74,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 34px rgba(196,146,74,.16) !important;
}
#score-carte.lv-score--complet > div:first-child{
  border-bottom-color:rgba(196,146,74,.26) !important;
}

@media (prefers-reduced-motion:reduce){
  .lv-score-groupe--fini .lv-score-jauge::after{ animation:none; display:none; }
  .lv-score-jauge{ transition:none; }
}

/* ── Les boutons du parcours de paiement ─────────────────────────────
   Ils vivent dans du HTML genere en JavaScript : ecrits en classes
   Tailwind, ils seraient absents de la feuille purgee et rendraient des
   boutons sans forme. */
.od-bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:18px; padding:13px 22px; border:0; border-radius:12px;
  background:var(--lvg-or); color:#fff; font-weight:700; font-size:14px;
  text-decoration:none; cursor:pointer;
  transition:filter .18s ease, box-shadow .18s ease;
}
.od-bouton:hover{ filter:brightness(1.06); box-shadow:0 6px 18px rgba(196,146,74,.28); }
.od-bouton:disabled{ opacity:.6; cursor:default; }
.od-bouton--clair{
  background:#fff; color:#8A6A33; border:1px solid rgba(196,146,74,.38);
}
.od-bouton--clair:hover{ background:#FFFBF4; }

/* Deux issues cote a cote, empilees quand la place manque. */
.od-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Les champs de fichier ne se laissent pas styler comme les autres. */
input[type="file"].od-champ{ padding:9px 11px; font-size:13px; cursor:pointer; }