/* Soins mobile : même alignement à gauche que les autres pages, avec retour propre des noms longs */
@media(max-width:620px){
  #care > .section-title{
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin-left:0!important;margin-right:0!important;
    padding-left:0!important;padding-right:0!important;box-sizing:border-box!important;
    align-items:flex-start!important;justify-content:flex-start!important;text-align:left!important;
  }
  #care > .section-title > div{
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:0!important;box-sizing:border-box!important;text-align:left!important;
  }
  #care > .section-title h2,
  #care > .section-title p{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
    margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;
    box-sizing:border-box!important;text-align:left!important;white-space:normal!important;
    overflow-wrap:anywhere!important;word-break:break-word!important;
  }
}



/* Correctif ciblé : recentrage de la page Soins sur mobile */
@media(max-width:620px){
  #care{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }
  #care > .section-title,
  #care > .care-schedule-card,
  #care > .split{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }
  #care .care-schedule-card,
  #care .care-sheet-form,
  #care .care-sheet-display{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  #care .care-reminder-row{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
  }
  #care .care-reminder-row .badge{
    margin-left:0;
  }
}

/* Matériel — états : Bon état / À surveiller / À remplacer */
#gear .badge.gear-watch{
  background:#f5eadc !important;
  border-color:#dfc7aa !important;
  color:#8b6548 !important;
}
#gear .badge.gear-replace{
  background:#f8e8e3 !important;
  border-color:#e8c9c0 !important;
  color:#9c604b !important;
}

@media(max-width:700px){
  #gearModal #gearHorseChoices .check-option{
    min-width:0 !important;
  }
  #gearModal #gearHorseChoices .gear-horse-check{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    flex:0 0 20px !important;
    flex-shrink:0 !important;
  }
  #gearModal #gearHorseChoices .check-option span{
    min-width:0 !important;
    overflow-wrap:break-word;
  }
}

/* Fenêtre « Remplacement effectué » — bloc unique harmonisé */
#gearCompleteModal .gear-complete-card{
  max-width:520px;
  padding:0 !important;
  overflow:hidden;
}
#gearCompleteModal .gear-complete-content{
  padding:24px;
}
#gearCompleteModal .gear-complete-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}
#gearCompleteModal .gear-complete-top h3{
  margin:5px 0 7px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  line-height:1.15;
  font-weight:500;
  color:var(--green);
}
#gearCompleteModal .gear-complete-top p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}
#gearCompleteModal .gear-complete-top .icon-btn{
  flex:0 0 auto;
}
#gearCompleteModal .gear-complete-date{
  margin:0 0 22px;
}
#gearCompleteModal .gear-complete-date input{
  width:100%;
  box-sizing:border-box;
}
#gearCompleteModal .gear-complete-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
@media(max-width:700px){
  #gearCompleteModal .gear-complete-card{
    width:calc(100% - 28px);
    max-width:none;
  }
  #gearCompleteModal .gear-complete-content{
    padding:20px;
  }
  #gearCompleteModal .gear-complete-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  #gearCompleteModal .gear-complete-actions .btn{
    width:100%;
    min-width:0;
    white-space:normal;
  }
}

/* Correction : tout le contenu de la confirmation repose sur une carte opaque */
#gearCompleteModal .gear-complete-card{
  background:var(--cream, #faf7ef) !important;
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  box-shadow:0 20px 60px rgba(33,48,40,.18) !important;
}
#gearCompleteModal .gear-complete-content{
  background:var(--cream, #faf7ef) !important;
  border-radius:inherit;
}
#gearCompleteModal .gear-complete-top,
#gearCompleteModal .gear-complete-date,
#gearCompleteModal .gear-complete-actions{
  background:transparent;
}


/* Fenêtre « Soin effectué » — même bloc que « Remplacement effectué » */
#careCompleteModal .gear-complete-card{
  max-width:520px;
  padding:0 !important;
  overflow:hidden;
}
#careCompleteModal .gear-complete-content{
  padding:24px;
}
#careCompleteModal .gear-complete-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}
#careCompleteModal .gear-complete-top h3{
  margin:5px 0 7px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  line-height:1.15;
  font-weight:500;
  color:var(--green);
}
#careCompleteModal .gear-complete-top p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}
#careCompleteModal .gear-complete-top .icon-btn{
  flex:0 0 auto;
}
#careCompleteModal .gear-complete-date{
  margin:0 0 22px;
}
#careCompleteModal .gear-complete-date input{
  width:100%;
  box-sizing:border-box;
}
#careCompleteModal .gear-complete-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
@media(max-width:700px){
  #careCompleteModal .gear-complete-card{
    width:calc(100% - 28px);
    max-width:none;
  }
  #careCompleteModal .gear-complete-content{
    padding:20px;
  }
  #careCompleteModal .gear-complete-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  #careCompleteModal .gear-complete-actions .btn{
    width:100%;
    min-width:0;
    white-space:normal;
  }
}

/* Correction : tout le contenu de la confirmation repose sur une carte opaque */
#careCompleteModal .gear-complete-card{
  background:var(--cream, #faf7ef) !important;
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  box-shadow:0 20px 60px rgba(33,48,40,.18) !important;
}
#careCompleteModal .gear-complete-content{
  background:var(--cream, #faf7ef) !important;
  border-radius:inherit;
}
#careCompleteModal .gear-complete-top,
#careCompleteModal .gear-complete-date,
#careCompleteModal .gear-complete-actions{
  background:transparent;
}


/* Budget : répartition Matériel / Soins sur les 90 prochains jours */
#budget .budget-split-kpi .budget-split-values{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
#budget .budget-split-kpi .budget-split-values > div{
  min-width:0;
  padding:8px 6px;
}
#budget .budget-split-kpi .budget-split-values span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}
#budget .budget-split-kpi .budget-split-values strong.value{
  display:block;
  overflow-wrap:anywhere;
}

/* Répartition 90 jours : harmonisée avec les 3 cartes de prévision */
#budget .budget-split-kpi .budget-split-values{
  gap:14px;
  margin-top:14px;
}
#budget .budget-split-kpi .budget-split-values > div{
  padding:10px 8px;
}
#budget .budget-split-kpi .budget-split-values span{
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  margin-bottom:6px;
}
#budget .budget-split-kpi .budget-split-values strong.value{
  display:block;
  overflow-wrap:anywhere;
}
@media(max-width:700px){
  #budget .budget-split-kpi .budget-split-values{
    gap:8px;
    margin-top:11px;
  }
  #budget .budget-split-kpi .budget-split-values > div{
    padding:7px 3px;
  }
  #budget .budget-split-kpi .budget-split-values span{
    font-size:13px;
    margin-bottom:5px;
  }
  #budget .budget-split-kpi .budget-split-values strong.value{
    font-size:inherit;
  }
}

/* Répartition 90 jours : montants secondaires, cohérents avec les KPI */
#budget .card.kpi.budget-split-kpi .budget-split-values strong.value{
  color:var(--text) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:30px !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  margin:4px 0 2px !important;
}
@media(max-width:700px){
  #budget .card.kpi.budget-split-kpi .budget-split-values strong.value{
    font-size:26px !important;
  }
}

/* Répartition 90 jours : garder le montant et le symbole € sur une seule ligne */
#budget .card.kpi.budget-split-kpi .budget-split-values strong.value{
  font-size:27px !important;
  white-space:nowrap !important;
}
@media(max-width:700px){
  #budget .card.kpi.budget-split-kpi .budget-split-values strong.value{
    font-size:23px !important;
  }
}

/* ===== Vida Paddock — finition ordinateur : en-tête compact + contraste ===== */
.desktop-horse-context{display:none}

@media (min-width:901px){
  :root{
    --vida-brand-row:64px;
    --vida-nav-row:54px;
    --vida-header-total:118px;

    /* Contraste légèrement renforcé sur ordinateur, sans changer l'identité */
    --muted:#596860;
    --line:#D8DDD8;
    --sage:#E3ECE6;
    --green:#668676;
  }

  body{
    padding-top:calc(var(--vida-header-total) + 12px) !important;
  }

  .topbar{
    height:var(--vida-header-total) !important;
    min-height:var(--vida-header-total) !important;
    max-height:var(--vida-header-total) !important;
    padding:6px clamp(24px,4vw,64px) !important;
    background:#FBF8F1 !important;
    box-shadow:0 4px 14px rgba(45,64,53,.055) !important;
  }

  .topbar .brand{
    top:6px !important;
    height:52px !important;
  }

  /* Sur ordinateur, le cheval quitte la bannière. */
  .topbar .horse-switcher{
    display:none !important;
  }

  /* Gratuit / cloche / paramètres restent dans la ligne du logo. */
  .topbar > .profile-actions{
    position:absolute !important;
    top:10px !important;
    right:clamp(24px,4vw,64px) !important;
    left:auto !important;
    height:44px !important;
    margin:0 !important;
    z-index:1320 !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }

  .nav{
    top:var(--vida-brand-row) !important;
    height:var(--vida-nav-row) !important;
    min-height:var(--vida-nav-row) !important;
    padding:5px clamp(24px,4vw,64px) !important;
    background:#FFFDF8 !important;
  }

  .nav a{
    min-height:40px !important;
    padding:7px 12px !important;
  }

  /* Le cheval sélectionné devient un contexte de page, pas une 3e bande fixe. */
  .desktop-horse-context{
    display:flex;
    align-items:center;
    gap:10px;
    width:max-content;
    max-width:100%;
    margin:0 0 18px 0;
    padding:6px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--paper);
    box-shadow:0 5px 14px rgba(79,103,91,.045);
  }

  .desktop-horse-select{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    padding:4px 8px 4px 10px;
  }

  .desktop-horse-select span{
    font-size:11px;
    color:var(--muted);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
  }

  .desktop-horse-select select{
    min-width:110px;
    max-width:260px;
    border:0;
    outline:none;
    background:transparent;
    color:var(--green-dark);
    font-weight:900;
  }

  .desktop-horse-manage{
    min-height:38px !important;
    padding:7px 12px !important;
    white-space:nowrap;
  }

  /* Un peu plus de présence pour les champs, cartes et textes secondaires. */
  input,select,textarea{
    border-color:var(--line) !important;
  }

  .card{
    border-color:var(--line) !important;
  }

  .sub,.muted,.helper,.hint{
    color:var(--muted) !important;
  }

  /* La répartition garde deux colonnes lisibles, y compris avec le verrou Premium. */
  #budget .budget-split-kpi .budget-split-values{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
  }
  #budget .budget-split-kpi .budget-split-values > div{
    min-width:0 !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }
  #budget .card.kpi.budget-split-kpi .budget-split-values strong.value{
    font-size:24px !important;
    white-space:nowrap !important;
  }

  .app{
    padding-top:16px !important;
  }
}

/* Desktop : statut + notifications + paramètres alignés à droite du menu */
@media (min-width:901px){
  .topbar > .profile-actions{
    position:fixed !important;
    top:var(--vida-brand-row) !important;
    right:clamp(24px,4vw,64px) !important;
    left:auto !important;
    height:var(--vida-nav-row) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:5px 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    z-index:1350 !important;
  }

  /* Réserver l'espace à droite pour ne jamais chevaucher les actions. */
  .nav{
    padding-right:230px !important;
  }
}

/* ===== Vida Paddock — contraste harmonisé mobile + ordinateur =====
   Même identité, mêmes dimensions : uniquement un peu plus de présence. */
:root{
  --muted:#59675F !important;
  --line:#D5DCD6 !important;
  --sage:#E1EBE4 !important;
}

/* Champs et cartes : contours un peu plus lisibles sur tous les écrans. */
input,select,textarea{
  border-color:var(--line) !important;
}
.card{
  border-color:var(--line) !important;
}

/* Textes secondaires : restent doux mais ne se perdent plus. */
.sub,.muted,.helper,.hint{
  color:var(--muted) !important;
}

/* Logo : aucune modification de taille, forme ou proportions.
   On augmente seulement légèrement sa présence visuelle. */
.topbar .brand img,
.topbar .logo img,
.brand img{
  filter:contrast(1.09) saturate(1.05) !important;
}

/* Nom et slogan : contraste uniquement, sans toucher à la typographie ni aux dimensions. */
.topbar .brand .brand-title,
.topbar .brand .title,
.topbar .brand strong,
.topbar .brand h1{
  color:#3F594D !important;
}
.topbar .brand .brand-subtitle,
.topbar .brand .tagline,
.topbar .brand small,
.topbar .brand p{
  color:#66756D !important;
}

/* Les surfaces eucalyptus très claires gagnent juste un peu de définition. */
.btn.soft,
.chip,
.badge{
  border-color:#CCD8D0 !important;
}

/* Conserve la correction desktop précédente sans créer une palette différente. */
@media (min-width:901px){
  :root{
    --muted:#59675F !important;
    --line:#D5DCD6 !important;
    --sage:#E1EBE4 !important;
  }
}

/* ===== Correctif desktop : menu centré + actions visibles à droite ===== */
@media (min-width:901px){
  /* Le menu garde toute la largeur : son groupe de liens reste centré dans la fenêtre. */
  .nav{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding-left:clamp(24px,4vw,64px) !important;
    padding-right:clamp(24px,4vw,64px) !important;
    justify-content:center !important;
  }

  /* Les actions sont posées dans la ligne du menu sans participer au centrage des liens. */
  .topbar > .profile-actions{
    position:absolute !important;
    top:var(--vida-brand-row) !important;
    right:clamp(24px,4vw,64px) !important;
    left:auto !important;
    width:auto !important;
    height:var(--vida-nav-row) !important;
    min-height:var(--vida-nav-row) !important;
    margin:0 !important;
    padding:5px 0 !important;
    box-sizing:border-box !important;
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    z-index:5000 !important;
    pointer-events:auto !important;
  }

  .topbar > .profile-actions > *{
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 auto !important;
  }
}

/* ===== Correctif propre du bandeau desktop ===== */
@media (min-width:901px){
  /*
    Le bandeau créait son propre niveau d'empilement : les actions restaient
    derrière la barre de navigation même avec un z-index élevé.
    On supprime ce niveau sans toucher à la disposition mobile.
  */
  .topbar{
    z-index:auto !important;
    border-bottom:0 !important;
  }

  /* Une seule séparation, uniforme, sous le menu. */
  .nav{
    z-index:1310 !important;
    border-top:0 !important;
    border-bottom:1px solid var(--line) !important;
    box-shadow:0 4px 12px rgba(45,64,53,.035) !important;
    padding-left:clamp(24px,4vw,64px) !important;
    padding-right:clamp(24px,4vw,64px) !important;
    justify-content:center !important;
  }

  /* Actions desktop réellement au-dessus du menu, à droite. */
  .topbar > .profile-actions{
    position:fixed !important;
    top:var(--vida-brand-row) !important;
    right:clamp(24px,4vw,64px) !important;
    left:auto !important;
    width:auto !important;
    height:var(--vida-nav-row) !important;
    min-height:var(--vida-nav-row) !important;
    max-width:none !important;
    margin:0 !important;
    padding:5px 0 !important;
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    z-index:5000 !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  /* Le sélecteur cheval reste bien hors du bandeau sur ordinateur. */
  .topbar > .profile-actions > .horse-switcher{
    display:none !important;
  }

  .topbar > .profile-actions > #planPill,
  .topbar > .profile-actions > .notify-btn,
  .topbar > .profile-actions > .settings-trigger-btn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    flex:0 0 auto !important;
    z-index:5001 !important;
  }
}

/* ===== Structure finale du bandeau : actions réellement DANS la navigation ===== */
.desktop-nav-actions{display:none;}
.mobile-header-actions{display:flex;align-items:center;gap:8px;}

@media (min-width:901px){
  .mobile-header-actions{display:none !important;}

  .nav{
    position:fixed !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    padding-left:clamp(24px,4vw,64px) !important;
    padding-right:clamp(24px,4vw,64px) !important;
    border-top:0 !important;
    border-bottom:1px solid var(--line) !important;
    box-shadow:0 4px 12px rgba(45,64,53,.035) !important;
    box-sizing:border-box !important;
  }

  .desktop-nav-actions{
    display:flex !important;
    position:absolute !important;
    right:clamp(24px,4vw,64px) !important;
    top:0 !important;
    height:100% !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:10 !important;
  }
  .desktop-nav-actions > *{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 auto !important;
  }

  /* L'ancien conteneur du header ne porte plus les actions desktop. */
  .topbar > .profile-actions{
    display:none !important;
  }
}

/* ===== Desktop : boutons Notifications / Paramètres avec leur rond d'origine ===== */
@media (min-width:901px){
  .desktop-nav-actions .icon-btn{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border:1px solid #D5DCD6 !important;
    border-radius:50% !important;
    background:#FFFDFC !important;
    color:var(--green-dark) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-shadow:0 2px 7px rgba(79,103,91,.06) !important;
    transition:background .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease !important;
  }

  .desktop-nav-actions .icon-btn:hover{
    background:var(--sage) !important;
    border-color:#BFCFC4 !important;
    box-shadow:0 3px 9px rgba(79,103,91,.10) !important;
  }

  .desktop-nav-actions .icon-btn:active{
    background:#D8E6DD !important;
    border-color:#AFC3B6 !important;
    transform:scale(.96) !important;
  }

  .desktop-nav-actions .icon-btn:focus,
  .desktop-nav-actions .icon-btn:focus-visible{
    background:#FFFDFC !important;
    outline:2px solid rgba(111,143,126,.28) !important;
    outline-offset:2px !important;
  }

  .desktop-nav-actions .notify-btn .bell-icon{
    width:21px !important;
    height:21px !important;
    display:block !important;
  }

  .desktop-nav-actions button.icon-btn.settings-trigger-btn::before{
    font-size:23px !important;
    line-height:1 !important;
    transform:translateY(0) !important;
  }

  /* Le clic/focus reste limité au bouton : aucune coloration de la barre entière. */
  .nav:focus,
  .nav:focus-within,
  .nav:active{
    background:#FFFDF8 !important;
  }
}

/* ===== Paramètres desktop : retour au centrage optique validé ===== */
@media (min-width:901px){
  .desktop-nav-actions button.icon-btn.settings-trigger-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding:0 !important;
    font-size:0 !important;
    line-height:1 !important;
  }

  .desktop-nav-actions button.icon-btn.settings-trigger-btn::before{
    content:"⚙" !important;
    display:block !important;
    position:static !important;
    margin:0 !important;
    padding:0 !important;
    width:1em !important;
    height:1em !important;
    font-size:23px !important;
    line-height:1 !important;
    text-align:center !important;
    transform:translate(0,0) !important;
  }
}

/* ===== Paramètres desktop : centrage OPTIQUE du pictogramme ===== */
@media (min-width:901px){
  .desktop-nav-actions button.icon-btn.settings-trigger-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .desktop-nav-actions button.icon-btn.settings-trigger-btn::before{
    content:"⚙" !important;
    display:block !important;
    position:relative !important;
    left:1px !important;
    top:0 !important;
    margin:0 !important;
    padding:0 !important;
    width:1em !important;
    height:1em !important;
    font-size:23px !important;
    line-height:1 !important;
    text-align:center !important;
    transform:translateY(0px) !important;
  }
}

/* =========================================================
   CORRECTIONS CIBLÉES SUR LA VERSION DE RÉFÉRENCE
   1. Desktop : réserver une vraie zone aux 5 onglets + une zone actions.
   2. Mobile : maintenir paramètres entièrement dans le cadre.
   ========================================================= */

@media (min-width:901px){
  /* On garde LA nav de référence. Les 5 pages utilisent uniquement
     l'espace situé avant Premium/cloche/paramètres. */
  .nav{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(5, minmax(82px, 1fr)) 250px !important;
    column-gap:6px !important;
    align-items:center !important;
    padding-left:clamp(20px,3vw,46px) !important;
    padding-right:clamp(20px,3vw,46px) !important;
    width:100% !important;
    max-width:none !important;
    overflow:visible !important;
  }

  .nav > a{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }

  /* Les actions ont leur sixième colonne dédiée :
     elles ne peuvent donc plus recouvrir "Soins". */
  .nav > .desktop-nav-actions{
    grid-column:6 !important;
    position:static !important;
    width:250px !important;
    min-width:250px !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    transform:none !important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .nav{
    grid-template-columns:repeat(5, minmax(72px, 1fr)) 218px !important;
    column-gap:4px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .nav > .desktop-nav-actions{
    width:218px !important;
    min-width:218px !important;
    gap:5px !important;
  }
}

@media (max-width:900px){
  /* Le cadre lui-même reste strictement dans le viewport. */
  .topbar{
    box-sizing:border-box !important;
    width:calc(100% - 12px) !important;
    max-width:calc(100% - 12px) !important;
    margin-left:6px !important;
    margin-right:6px !important;
    overflow:hidden !important;
  }

  /* Ligne 2 du header : cheval/Mes chevaux à gauche,
     Gratuit/cloche/paramètres à droite, sans dépassement. */
  .topbar .profile-actions{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding-left:8px !important;
    padding-right:8px !important;
    margin:0 !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    gap:4px !important;
    overflow:hidden !important;
  }

  .topbar .profile-actions > .horse-switcher{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    gap:3px !important;
    overflow:hidden !important;
  }

  .topbar .horse-switcher > label,
  .topbar .horse-switcher > .horse-label{
    flex:0 0 auto !important;
  }

  .topbar .horse-switcher > select{
    flex:1 1 36px !important;
    min-width:0 !important;
    width:36px !important;
    max-width:none !important;
    text-overflow:ellipsis !important;
  }

  .topbar .horse-switcher .horse-manage-btn{
    flex:0 0 auto !important;
    min-width:0 !important;
    width:auto !important;
    margin:0 !important;
    white-space:nowrap !important;
  }

  .topbar .profile-actions > .mobile-header-actions{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:46% !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;
    overflow:visible !important;
  }

  .mobile-header-actions .plan-pill{
    flex:0 0 auto !important;
    margin:0 !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .mobile-header-actions .icon-btn{
    box-sizing:border-box !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Aucun décalage latéral ajouté à paramètres. */
  .mobile-header-actions .settings-trigger-btn{
    right:auto !important;
    left:auto !important;
    transform:none !important;
  }
}

@media (max-width:430px){
  .topbar{
    width:calc(100% - 8px) !important;
    max-width:calc(100% - 8px) !important;
    margin-left:4px !important;
    margin-right:4px !important;
  }
  .topbar .profile-actions{
    padding-left:5px !important;
    padding-right:5px !important;
    gap:2px !important;
  }
  .topbar .profile-actions > .horse-switcher{
    gap:2px !important;
  }
  .topbar .profile-actions > .mobile-header-actions{
    gap:2px !important;
    max-width:48% !important;
  }
  .mobile-header-actions .plan-pill{
    padding-left:5px !important;
    padding-right:5px !important;
    font-size:12px !important;
  }
  .mobile-header-actions .icon-btn{
    flex-basis:38px !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }
}

/* =========================================================
   FINITION HEADER — ENGRENAGE CENTRÉ + LARGEUR PLAN STABLE
   ========================================================= */

/* Méthode validée précédemment pour le véritable bouton paramètres :
   centrage par flex, sans déplacement artificiel du glyphe. */
button.icon-btn.settings-trigger-btn{
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:1 !important;
}

button.icon-btn.settings-trigger-btn::before{
  content:"⚙" !important;
  position:static !important;
  display:block !important;
  width:1em !important;
  height:1em !important;
  margin:0 !important;
  padding:0 !important;
  font-size:23px !important;
  line-height:1 !important;
  text-align:center !important;
  transform:none !important;
  inset:auto !important;
}

/* Gratuit et Premium occupent exactement la même largeur.
   Le passage au forfait Premium ne déplace donc aucun bouton. */
.plan-pill,
.mobile-header-actions .plan-pill,
.desktop-nav-actions .plan-pill{
  box-sizing:border-box !important;
  width:78px !important;
  min-width:78px !important;
  max-width:78px !important;
  padding-left:6px !important;
  padding-right:6px !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}

/* Ordinateur : centrage strict de l'engrenage dans son cercle. */
@media (min-width:901px){
  .desktop-nav-actions .settings-trigger-btn{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    padding:0 !important;
    margin:0 !important;
    transform:none !important;
  }
  .desktop-nav-actions .settings-trigger-btn::before{
    display:block !important;
    width:23px !important;
    height:23px !important;
    font-size:23px !important;
    line-height:23px !important;
    margin:auto !important;
    transform:none !important;
  }
}

/* Mobile : un peu plus de blanc à droite du bouton paramètres,
   sans modifier l'ordre Mes chevaux → plan → cloche → paramètres. */
@media (max-width:900px){
  .topbar .profile-actions{
    padding-left:10px !important;
    padding-right:14px !important;
  }

  .topbar .profile-actions > .mobile-header-actions{
    padding-right:0 !important;
    margin-right:0 !important;
    gap:4px !important;
    max-width:none !important;
  }

  .mobile-header-actions .plan-pill{
    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }

  .mobile-header-actions .settings-trigger-btn{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    right:auto !important;
    left:auto !important;
    transform:none !important;
  }

  .mobile-header-actions .settings-trigger-btn::before{
    display:block !important;
    width:23px !important;
    height:23px !important;
    font-size:23px !important;
    line-height:23px !important;
    margin:auto !important;
    transform:none !important;
  }
}

@media (max-width:430px){
  .topbar .profile-actions{
    padding-left:7px !important;
    padding-right:11px !important;
  }

  /* Même largeur réservée à Premium sur petit écran. */
  .mobile-header-actions .plan-pill{
    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;
    font-size:12px !important;
  }
}

/* =========================================================
   FINITION HEADER 2 — ICÔNE PARAMÈTRES GÉOMÉTRIQUE
   + ACTIONS MOBILE COMPACTES
   ========================================================= */

/* Le caractère typographique ⚙ est masqué visuellement.
   L'icône est dessinée au centre géométrique du bouton par SVG CSS. */
button.icon-btn.settings-trigger-btn{
  position:relative !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
  font-size:0 !important;
  text-indent:-9999px !important;
  overflow:hidden !important;
}

button.icon-btn.settings-trigger-btn::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:22px !important;
  height:22px !important;
  margin:0 !important;
  padding:0 !important;
  transform:translate(-50%,-50%) !important;
  background-color:currentColor !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94a7.43 7.43 0 0 0 .05-.94 7.43 7.43 0 0 0-.05-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.39.96a7.24 7.24 0 0 0-1.63-.94L14.38 2.8a.5.5 0 0 0-.49-.4h-3.84a.5.5 0 0 0-.49.4l-.36 2.52c-.58.24-1.12.56-1.63.94L5.18 5.3a.5.5 0 0 0-.61.22L2.65 8.84a.5.5 0 0 0 .12.64l2.03 1.58a7.43 7.43 0 0 0-.05.94c0 .32.02.63.05.94l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32a.5.5 0 0 0 .61.22l2.39-.96c.5.39 1.05.7 1.63.94l.36 2.52a.5.5 0 0 0 .49.4h3.84a.5.5 0 0 0 .49-.4l.36-2.52a7.24 7.24 0 0 0 1.63-.94l2.39.96a.5.5 0 0 0 .61-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94a7.43 7.43 0 0 0 .05-.94 7.43 7.43 0 0 0-.05-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.39.96a7.24 7.24 0 0 0-1.63-.94L14.38 2.8a.5.5 0 0 0-.49-.4h-3.84a.5.5 0 0 0-.49.4l-.36 2.52c-.58.24-1.12.56-1.63.94L5.18 5.3a.5.5 0 0 0-.61.22L2.65 8.84a.5.5 0 0 0 .12.64l2.03 1.58a7.43 7.43 0 0 0-.05.94c0 .32.02.63.05.94l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32a.5.5 0 0 0 .61.22l2.39-.96c.5.39 1.05.7 1.63.94l.36 2.52a.5.5 0 0 0 .49.4h3.84a.5.5 0 0 0 .49-.4l.36-2.52a7.24 7.24 0 0 0 1.63-.94l2.39.96a.5.5 0 0 0 .61-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") !important;
  mask-repeat:no-repeat !important;
  mask-position:center !important;
  mask-size:contain !important;
  inset:auto !important;
}

/* Desktop : cercle et pictogramme parfaitement concentriques. */
@media (min-width:901px){
  .desktop-nav-actions .settings-trigger-btn{
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    margin:0 !important;
    transform:none !important;
  }
  .desktop-nav-actions .settings-trigger-btn::before{
    width:22px !important;
    height:22px !important;
  }
}

/* Mobile : on gagne réellement de la largeur au lieu de pousser ⚙ dehors. */
@media (max-width:900px){
  .topbar .profile-actions{
    box-sizing:border-box !important;
    padding-left:8px !important;
    padding-right:12px !important;
    gap:3px !important;
  }

  .topbar .profile-actions > .horse-switcher{
    min-width:0 !important;
    flex:1 1 auto !important;
    gap:2px !important;
  }

  .topbar .profile-actions > .mobile-header-actions{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    gap:3px !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
  }

  /* Largeur prévue pour le mot Premium, mais compacte. */
  .mobile-header-actions .plan-pill{
    box-sizing:border-box !important;
    flex:0 0 66px !important;
    width:66px !important;
    min-width:66px !important;
    max-width:66px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 3px !important;
    font-size:11px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }

  .mobile-header-actions .notify-btn,
  .mobile-header-actions .settings-trigger-btn{
    box-sizing:border-box !important;
    flex:0 0 36px !important;
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    padding:0 !important;
    margin:0 !important;
  }

  .mobile-header-actions .settings-trigger-btn::before{
    width:19px !important;
    height:19px !important;
  }

  .mobile-header-actions .bell-icon{
    width:19px !important;
    height:19px !important;
  }
}

@media (max-width:430px){
  .topbar .profile-actions{
    padding-left:6px !important;
    padding-right:10px !important;
    gap:2px !important;
  }
  .topbar .profile-actions > .mobile-header-actions{
    gap:2px !important;
  }
  .mobile-header-actions .plan-pill{
    flex-basis:62px !important;
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    font-size:10.5px !important;
  }
  .mobile-header-actions .notify-btn,
  .mobile-header-actions .settings-trigger-btn{
    flex-basis:34px !important;
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
  }
  .mobile-header-actions .settings-trigger-btn::before{
    width:18px !important;
    height:18px !important;
  }
}

/* =========================================================
   MOBILE — HEADER EN DEUX LIGNES
   Ligne 1 : marque + cloche + paramètres
   Ligne 2 : cheval / Mes chevaux + forfait
   DESKTOP — engrenage légèrement décalé vers la droite
   ========================================================= */

/* Premier essai desktop : seul le dessin de l'engrenage bouge,
   le cercle reste exactement à sa place. */
@media (min-width:901px){
  .desktop-nav-actions .settings-trigger-btn::before{
    left:calc(50% + 1.5px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}

@media (max-width:900px){
  .topbar{
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* Ligne supérieure */
  .topbar > .brand{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    padding-right:10px !important;
    gap:8px !important;
  }

  /* La marque garde tout l'espace disponible. */
  .topbar > .brand > .mark{
    flex:0 0 auto !important;
  }

  .topbar > .brand > div:not(.mark):not(.mobile-header-actions){
    min-width:0 !important;
  }

  /* Cloche et paramètres sont maintenant dans la ligne du logo. */
  .topbar > .brand > .mobile-header-actions{
    margin-left:auto !important;
    flex:0 0 auto !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    padding:0 !important;
  }

  /* Le forfait quitte visuellement la ligne du logo :
     il est placé sur la deuxième ligne, à droite. */
  .topbar > .brand > .mobile-header-actions .plan-pill{
    position:absolute !important;
    left:auto !important;
    right:12px !important;
    top:auto !important;
    bottom:9px !important;
    box-sizing:border-box !important;
    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 6px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:13px !important;
    white-space:nowrap !important;
    z-index:5 !important;
  }

  /* Les deux vraies actions retrouvent une taille confortable. */
  .topbar > .brand > .mobile-header-actions .notify-btn,
  .topbar > .brand > .mobile-header-actions .settings-trigger-btn{
    position:relative !important;
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .topbar > .brand > .mobile-header-actions .bell-icon{
    width:22px !important;
    height:22px !important;
  }

  .topbar > .brand > .mobile-header-actions .settings-trigger-btn::before{
    left:50% !important;
    top:50% !important;
    width:22px !important;
    height:22px !important;
    transform:translate(-50%,-50%) !important;
  }

  /* Deuxième ligne : cheval + Mes chevaux, avec la place du forfait réservée. */
  .topbar > .profile-actions{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding-left:10px !important;
    padding-right:98px !important;
    margin:0 !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    overflow:hidden !important;
  }

  .topbar > .profile-actions > .horse-switcher{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    overflow:hidden !important;
  }

  /* Il n'y a plus d'actions à compresser dans profile-actions. */
  .topbar > .profile-actions > .mobile-header-actions{
    display:none !important;
  }
}

@media (max-width:430px){
  .topbar > .brand{
    padding-right:7px !important;
    gap:5px !important;
  }

  .topbar > .brand > .mobile-header-actions{
    gap:5px !important;
  }

  .topbar > .brand > .mobile-header-actions .notify-btn,
  .topbar > .brand > .mobile-header-actions .settings-trigger-btn{
    flex-basis:42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
  }

  .topbar > .brand > .mobile-header-actions .plan-pill{
    right:9px !important;
    width:74px !important;
    min-width:74px !important;
    max-width:74px !important;
    height:38px !important;
    min-height:38px !important;
    font-size:12px !important;
  }

  .topbar > .profile-actions{
    padding-left:7px !important;
    padding-right:91px !important;
  }
}

/* =========================================================
   AJUSTEMENT FIN
   - Desktop : engrenage encore légèrement à droite
   - Mobile : davantage de nom de cheval visible
   ========================================================= */

@media (min-width:901px){
  /* Deuxième essai : cercle inchangé, pictogramme seul à +3px. */
  .desktop-nav-actions .settings-trigger-btn::before{
    left:calc(50% + 3px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}

@media (max-width:900px){
  /* Deuxième ligne : on réserve un peu moins au forfait
     et on donne une vraie largeur au sélecteur du cheval. */
  .topbar > .profile-actions{
    padding-left:8px !important;
    padding-right:92px !important;
    gap:3px !important;
  }

  .topbar > .profile-actions > .horse-switcher{
    display:grid !important;
    grid-template-columns:auto minmax(92px,1fr) auto !important;
    align-items:center !important;
    column-gap:4px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .topbar > .profile-actions > .horse-switcher > label,
  .topbar > .profile-actions > .horse-switcher > .horse-label{
    min-width:max-content !important;
    width:auto !important;
  }

  .topbar > .profile-actions > .horse-switcher > select{
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    min-width:92px !important;
    max-width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    padding-left:7px !important;
    padding-right:20px !important;
  }

  .topbar > .profile-actions > .horse-switcher .horse-manage-btn{
    width:auto !important;
    min-width:max-content !important;
    margin:0 !important;
    padding-left:7px !important;
    padding-right:7px !important;
    white-space:nowrap !important;
  }

  /* Le forfait reste prévu pour Premium sans prendre plus de place. */
  .topbar > .brand > .mobile-header-actions .plan-pill{
    right:10px !important;
    width:74px !important;
    min-width:74px !important;
    max-width:74px !important;
  }
}

@media (max-width:430px){
  .topbar > .profile-actions{
    padding-left:6px !important;
    padding-right:84px !important;
  }

  .topbar > .profile-actions > .horse-switcher{
    grid-template-columns:auto minmax(76px,1fr) auto !important;
    column-gap:3px !important;
  }

  .topbar > .profile-actions > .horse-switcher > select{
    min-width:76px !important;
    padding-left:5px !important;
    padding-right:18px !important;
  }

  .topbar > .profile-actions > .horse-switcher .horse-manage-btn{
    padding-left:5px !important;
    padding-right:5px !important;
    font-size:12px !important;
  }

  .topbar > .brand > .mobile-header-actions .plan-pill{
    right:8px !important;
    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;
  }
}

/* =========================================================
   AJUSTEMENT PHOTO 10179
   - Desktop : engrenage franchement plus à droite
   - Mobile : récupérer l'espace perdu dans le sélecteur cheval
   ========================================================= */

@media (min-width:901px){
  /* Déplacement volontairement marqué pour juger le centrage visuel.
     Le cercle ne bouge toujours pas. */
  .desktop-nav-actions .settings-trigger-btn::before{
    left:calc(50% + 7px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}

@media (max-width:900px){
  /* On donne un peu plus de largeur réelle au nom. */
  .topbar > .profile-actions > .horse-switcher{
    grid-template-columns:auto minmax(108px,1fr) auto !important;
    column-gap:3px !important;
  }

  .topbar > .profile-actions > .horse-switcher > select{
    width:100% !important;
    min-width:108px !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding-left:4px !important;
    padding-right:10px !important;
    text-indent:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Mes chevaux reste compact pour céder la place au nom sélectionné. */
  .topbar > .profile-actions > .horse-switcher .horse-manage-btn{
    padding-left:5px !important;
    padding-right:5px !important;
  }
}

@media (max-width:430px){
  .topbar > .profile-actions > .horse-switcher{
    grid-template-columns:auto minmax(94px,1fr) auto !important;
    column-gap:2px !important;
  }

  .topbar > .profile-actions > .horse-switcher > select{
    min-width:94px !important;
    padding-left:3px !important;
    padding-right:8px !important;
  }

  .topbar > .profile-actions > .horse-switcher .horse-manage-btn{
    padding-left:4px !important;
    padding-right:4px !important;
  }
}

/* =========================================================
   AJUSTEMENT SUIVANT
   - Desktop : engrenage +14 px vers la droite
   - Mobile : sélecteur cheval resserré, flèche rapprochée
   ========================================================= */

@media (min-width:901px){
  .desktop-nav-actions .settings-trigger-btn::before{
    left:calc(50% + 14px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}

@media (max-width:900px){
  /* On réduit légèrement la colonne du select afin que Mes chevaux
     rentre davantage dans le cadre. */
  .topbar > .profile-actions > .horse-switcher{
    grid-template-columns:auto minmax(92px,0.88fr) auto !important;
    column-gap:2px !important;
  }

  .topbar > .profile-actions > .horse-switcher > select{
    min-width:92px !important;
    width:100% !important;
    padding-left:2px !important;
    padding-right:3px !important;
    margin:0 !important;
    background-position:right 1px center !important;
    background-size:10px auto !important;
    text-indent:0 !important;
  }

  .topbar > .profile-actions > .horse-switcher .horse-manage-btn{
    margin-left:0 !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }
}

@media (max-width:430px){
  .topbar > .profile-actions{
    padding-left:5px !important;
    padding-right:82px !important;
  }

  .topbar > .profile-actions > .horse-switcher{
    grid-template-columns:auto minmax(82px,0.84fr) auto !important;
    column-gap:1px !important;
  }

  .topbar > .profile-actions > .horse-switcher > select{
    min-width:82px !important;
    padding-left:2px !important;
    padding-right:2px !important;
    background-position:right 0 center !important;
  }

  .topbar > .profile-actions > .horse-switcher .horse-manage-btn{
    padding-left:3px !important;
    padding-right:3px !important;
  }
}

/* =========================================================
   TEST CENTRAGE PARAMÈTRES DESKTOP — +28 PX
   Mobile validé : aucune modification mobile.
   ========================================================= */
@media (min-width:901px){
  .desktop-nav-actions .settings-trigger-btn::before{
    left:calc(50% + 28px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}

/* =========================================================
   TEST CENTRAGE PARAMÈTRES DESKTOP — +56 PX
   Mobile validé : aucune modification mobile.
   ========================================================= */
@media (min-width:901px){
  .desktop-nav-actions .settings-trigger-btn::before{
    left:calc(50% + 56px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}

/* =========================================================
   TEST CENTRAGE PARAMÈTRES DESKTOP — +168 PX
   Mobile validé : aucune modification mobile.
   ========================================================= */
@media (min-width:901px){
  .desktop-nav-actions .settings-trigger-btn::before{
    left:calc(50% + 168px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}

/* =========================================================
   PARAMÈTRES DESKTOP — CORRECTION RÉELLE DE SPÉCIFICITÉ
   Cette règle reprend exactement la spécificité de l'ancienne règle
   qui imposait left:1px !important et annulait les essais précédents.
   Mobile : aucune modification.
   ========================================================= */
@media (min-width:901px){
  .desktop-nav-actions button.icon-btn.settings-trigger-btn{
    overflow:visible !important;
  }

  .desktop-nav-actions button.icon-btn.settings-trigger-btn::before{
    position:absolute !important;
    left:calc(50% + 8px) !important;
    top:50% !important;
    width:22px !important;
    height:22px !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
  }
}

/* =========================================================
   PARAMÈTRES DESKTOP — AJUSTEMENT VISUEL +4 PX
   Mobile validé : aucune modification.
   ========================================================= */
@media (min-width:901px){
  .desktop-nav-actions button.icon-btn.settings-trigger-btn::before{
    left:calc(50% + 4px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}


/* Paramètres desktop — ajustement final fin : +2 px */
@media (min-width:901px){
  .desktop-nav-actions button.icon-btn.settings-trigger-btn::before{
    left:calc(50% + 2px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}


/* Paramètres desktop — ajustement fin : +1 px */
@media (min-width:901px){
  .desktop-nav-actions button.icon-btn.settings-trigger-btn::before{
    left:calc(50% + 1px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}


/* Paramètres desktop — ajustement ultra-fin : +0,5 px */
@media (min-width:901px){
  .desktop-nav-actions button.icon-btn.settings-trigger-btn::before{
    left:calc(50% + 0.5px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}


/* Paramètres desktop — micro-ajustement : +0,25 px */
@media (min-width:901px){
  .desktop-nav-actions button.icon-btn.settings-trigger-btn::before{
    left:calc(50% + 0.25px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}


/* Paramètres desktop — micro-ajustement final : +0,10 px */
@media (min-width:901px){
  .desktop-nav-actions button.icon-btn.settings-trigger-btn::before{
    left:calc(50% + 0.10px) !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}


/* Paramètres desktop — centrage géométrique final : 0 px */
@media (min-width:901px){
  .desktop-nav-actions button.icon-btn.settings-trigger-btn::before{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}


/* =========================================================
   FINALISATION — ESPACES PARTENAIRES RETIRÉS + PREMIUM DISCRET
   ========================================================= */

/* Sécurité : même si un ancien bloc partenaire réapparaissait,
   il ne doit jamais être rendu ni réserver de place. */
.ad-rail{
  display:none !important;
  width:0 !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

/* Le losange Premium devient un simple indicateur visuel discret. */
#budget .premium-diamond{
  display:inline-block !important;
  font-family:Arial,sans-serif !important;
  font-size:.48em !important;
  line-height:1 !important;
  font-weight:400 !important;
  vertical-align:.18em !important;
  margin-left:.08em !important;
}

/* Dans la carte Répartition, les montants/locks restent lisibles
   sans que le symbole prenne le dessus. */
#budget .budget-split-kpi .premium-diamond{
  font-size:.50em !important;
  vertical-align:.16em !important;
}

/* =========================================================
   MODALES PARAMÈTRES / NOTIFICATIONS — DESKTOP
   - Le menu reste visuellement normal.
   - Le voile commence sous le menu.
   - La fenêtre ne peut plus être cachée par la navigation.
   Mobile : aucun changement.
   ========================================================= */
@media (min-width:901px){
  #settingsModal,
  #notificationsModal{
    /* La nav desktop est au-dessus du contenu normal, mais ces
       fenêtres doivent rester entièrement lisibles. */
    z-index:6000 !important;

    /* On laisse la zone du header/navigation intacte :
       le voile ne blanchit/assombrit plus le menu. */
    top:112px !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    height:auto !important;
    box-sizing:border-box !important;

    /* La fenêtre reste centrée dans la zone disponible sous le menu. */
    place-items:center !important;
    padding:18px !important;
  }

  #settingsModal .modalbox,
  #notificationsModal .modalbox{
    position:relative !important;
    z-index:6001 !important;
    max-height:calc(100vh - 148px) !important;
    max-height:calc(100dvh - 148px) !important;
    margin:0 !important;
  }
}


/* =========================================================
   MODALES DESKTOP — CORRECTION GLOBALE
   ========================================================= */
@media (min-width:901px){
  .modal{
    z-index:6000 !important;
    top:112px !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    height:auto !important;
    box-sizing:border-box !important;
    place-items:center !important;
    padding:18px !important;
  }
  .modal > .modalbox{
    position:relative !important;
    z-index:6001 !important;
    max-height:calc(100vh - 148px) !important;
    max-height:calc(100dvh - 148px) !important;
    margin:0 !important;
  }
}

/* Accueil — À mettre de côté : losange Premium discret */
#home .home-save-diamond{
  display:inline-block !important;
  font-family:Arial,sans-serif !important;
  font-size:.48em !important;
  line-height:1 !important;
  font-weight:400 !important;
  vertical-align:.18em !important;
  margin-left:.08em !important;
}

/* =========================================================
   V1 — MENU FIXE + MODALES TOUJOURS SOUS L'EN-TÊTE (DESKTOP)
   Correction structurelle finale : la zone fixe desktop mesure 118px.
   Toutes les modales commencent sous cette zone et ne peuvent plus
   être masquées par le menu, quel que soit l'onglet actif.
   Mobile : inchangé.
   ========================================================= */
@media (min-width:901px){
  :root{
    --vida-fixed-desktop-header:118px;
    --vida-modal-gap:10px;
  }

  /* En-tête + navigation restent fixes sur toutes les pages/onglets. */
  .topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:1300 !important;
  }
  .nav{
    position:fixed !important;
    top:var(--vida-brand-row) !important;
    left:0 !important;
    right:0 !important;
    z-index:1310 !important;
  }

  /* Toutes les fenêtres commencent sous l'ensemble en-tête + menu. */
  .modal{
    top:calc(var(--vida-fixed-desktop-header) + var(--vida-modal-gap)) !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    height:auto !important;
    padding:18px !important;
    box-sizing:border-box !important;
    place-items:center !important;
    overflow-y:auto !important;
    z-index:1400 !important;
  }

  .modal > .modalbox{
    position:relative !important;
    z-index:1401 !important;
    max-height:calc(100vh - var(--vida-fixed-desktop-header) - var(--vida-modal-gap) - 36px) !important;
    max-height:calc(100dvh - var(--vida-fixed-desktop-header) - var(--vida-modal-gap) - 36px) !important;
    overflow-y:auto !important;
    margin:0 !important;
  }
}

/* Validation des échéances de dépenses dans les notifications */
.notice-item .notice-content{flex:1 1 auto;min-width:0}
.notice-payment-list{display:grid;gap:7px;margin-top:9px}
.notice-payment-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:7px;border-top:1px solid var(--line)}
.notice-payment-row span{font-size:12px;color:var(--muted);font-weight:700}
.notice-paid-btn{padding:7px 12px;min-height:34px;flex:0 0 auto}
@media(max-width:620px){.notice-payment-row{align-items:center}.notice-paid-btn{min-width:72px}}

/* Budget — validation des échéances depuis la carte de dépense */
.expense-payment-box{margin-top:11px;padding:10px 11px;border:1px solid rgba(72,93,79,.16);border-radius:13px;background:rgba(250,247,239,.72);max-width:520px}
.expense-payment-title{font-size:11px;font-weight:900;letter-spacing:.02em;color:var(--green);margin-bottom:5px}
.expense-payment-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid rgba(72,93,79,.10)}
.expense-payment-line:first-of-type{border-top:0}
.expense-payment-line>span{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.expense-payment-line strong{font-size:12px;color:var(--text);font-weight:800}
.expense-payment-line small{font-size:10px;color:var(--muted);font-weight:700}
.expense-payment-line.is-late small{color:#9a5a48}
.expense-payment-line .expense-paid-btn{padding:7px 11px;min-height:34px;white-space:nowrap;flex:0 0 auto}
@media(max-width:620px){.expense-payment-box{max-width:none}.expense-payment-line{align-items:center}.expense-payment-line>span{display:block}.expense-payment-line small{display:block;margin-top:2px}}
/* Paiements Budget — version compacte, placée sous l'échéance */
.expense-payment-box{display:none!important}
.expense-due-wrap{min-width:150px;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.expense-payment-inline{display:flex;flex-direction:column;gap:4px;width:100%;max-width:205px}
.expense-payment-count{font-size:10px;font-weight:800;color:#9a5a48;line-height:1.2}
.expense-payment-inline .expense-payment-line{width:100%;padding:0;border:0;display:flex;align-items:center;justify-content:space-between;gap:7px}
.expense-payment-inline .expense-payment-line>span{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.expense-payment-inline .expense-paid-btn{padding:5px 9px;min-height:29px;font-size:11px;line-height:1;white-space:nowrap}
@media(max-width:620px){.expense-due-wrap{min-width:0}.expense-payment-inline{max-width:none}.expense-payment-inline .expense-payment-line>span{display:inline;margin:0}}

/* Budget — paiement minimal directement sous la ligne Échéance */
.expense-due-wrap{gap:3px!important}
.expense-payment-inline{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important;width:auto!important;max-width:none!important;margin:0!important}
.expense-payment-inline .expense-payment-line{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;width:auto!important;padding:0!important;border:0!important;margin:0!important}
.expense-payment-inline .expense-payment-line>span{font-size:11px!important;font-weight:700!important;color:var(--muted)!important;white-space:nowrap!important}
.expense-payment-inline .expense-paid-btn{padding:4px 9px!important;min-height:27px!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important}
@media(max-width:620px){.expense-payment-inline .expense-payment-line>span{display:inline!important;margin:0!important}}

/* ===== Budget paiements — grille stable desktop/mobile ===== */
@media (min-width:901px){
  #expenseList .row.expense-row{
    display:grid!important;
    grid-template-columns:minmax(190px,1.25fr) minmax(220px,1fr) minmax(90px,auto)!important;
    grid-template-areas:
      "horse horse horse"
      "main due amount"
      "frequency actions actions"!important;
    align-items:start!important;
    column-gap:18px!important;
    row-gap:7px!important;
  }
  #expenseList .row.expense-row .grow{grid-area:main!important}
  #expenseList .row.expense-row .expense-due-wrap{
    grid-area:due!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:58px!important;
    max-height:58px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:4px!important;
    box-sizing:border-box!important;
  }
  #expenseList .row.expense-row .expense-frequency-badge{
    grid-area:frequency!important;
    justify-self:start!important;
    align-self:center!important;
  }
  #expenseList .row.expense-row .amount{
    grid-area:amount!important;
    justify-self:end!important;
    align-self:start!important;
    padding-top:4px!important;
  }
  #expenseList .row.expense-row .row-actions{
    grid-area:actions!important;
    justify-self:end!important;
    align-self:center!important;
    margin-top:0!important;
  }
}

@media (max-width:620px){
  #expenseList .expense-horse-section .row.expense-row,
  #expenseList .row.expense-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "horse horse"
      "main main"
      "due amount"
      "frequency frequency"
      "actions actions"!important;
    align-items:start!important;
    column-gap:12px!important;
    row-gap:7px!important;
    overflow:hidden!important;
  }
  #expenseList .row.expense-row .expense-horse-badge{grid-area:horse!important}
  #expenseList .row.expense-row .grow{
    grid-area:main!important;
    width:auto!important;
    max-width:100%!important;
  }
  #expenseList .row.expense-row .expense-due-wrap{
    grid-area:due!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:58px!important;
    max-height:58px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:3px!important;
    box-sizing:border-box!important;
  }
  #expenseList .row.expense-row .amount{
    grid-area:amount!important;
    margin-left:0!important;
    justify-self:end!important;
    align-self:start!important;
    padding-top:3px!important;
    white-space:nowrap!important;
  }
  #expenseList .row.expense-row .expense-frequency-badge{
    grid-area:frequency!important;
    justify-self:start!important;
    align-self:center!important;
    margin:0!important;
  }
  #expenseList .row.expense-row .row-actions{
    grid-area:actions!important;
    width:auto!important;
    justify-self:start!important;
    justify-content:flex-start!important;
    margin:0!important;
  }
  #expenseList .expense-payment-inline{
    max-width:100%!important;
  }
}
/* Échéances Budget nombreuses : la carte garde une taille stable */
.expense-payment-summary{display:flex;align-items:flex-start;flex-direction:column;gap:4px;max-width:100%}
.expense-payment-summary strong{font-size:11px;line-height:1.2;color:var(--muted);white-space:nowrap}
.expense-view-due-btn{padding:4px 9px!important;min-height:27px!important;font-size:11px!important;line-height:1!important;white-space:nowrap}
.expense-occurrences-box{max-width:520px!important}
.expense-occurrences-list{display:flex;flex-direction:column;gap:7px;margin:14px 0;max-height:min(52vh,430px);overflow:auto;padding-right:3px}
.expense-occurrence-modal-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(60,79,69,.12)}
.expense-occurrence-modal-row:last-child{border-bottom:0}
.expense-occurrence-modal-row span{font-weight:700}
@media(min-width:621px){#expenseList .row.expense-row .expense-due-wrap{overflow:hidden!important}}
@media(max-width:620px){#expenseList .row.expense-row .expense-due-wrap{overflow:hidden!important}.expense-payment-summary strong{font-size:10.5px}}

/* Accueil — carte Période de référence : texte foncé pour lisibilité */
#kpiBudgetLeft{color:var(--ink)}
#kpiBudgetLeftLabel{color:var(--muted)}
#kpiBudgetLeftSub{color:var(--muted)}

/* Accueil — carte Période de référence : icône calculatrice harmonisée avec le texte */
#home .kpi.accent .kpi-icon{color:var(--ink)}


/* Accueil — aide courte de la période de référence, sans modifier le gabarit des KPI */
#home .reference-period-edit{position:relative;line-height:1.15}

/* Accueil — portée des trois indicateurs financiers */
.home-budget-scope{grid-column:1/-1;display:flex;align-items:center;justify-content:center;margin:2px 0 -2px}
.home-budget-controls{display:flex;flex-direction:column;align-items:center;gap:8px}
.home-budget-mode{margin-bottom:0;flex:0 0 auto}
.home-budget-horse-picker{display:flex;align-items:center;justify-content:center;gap:8px}
.home-budget-horse-picker[hidden]{display:none}
.home-budget-horse-picker label{font-size:12px;font-weight:800;color:var(--muted)}
.home-budget-horse-picker select{min-width:180px;max-width:280px;padding:8px 34px 8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-weight:700}
@media(max-width:700px){.home-budget-scope{align-items:stretch;margin-top:0}.home-budget-controls{width:100%}.home-budget-mode{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-bottom:0}.home-budget-mode button{padding:9px 8px}.home-budget-horse-picker{width:100%}.home-budget-horse-picker select{flex:1;min-width:0;max-width:none}}

/* Dépenses — modale desktop fixe, défilement uniquement vertical à l'intérieur */
@media (min-width:901px){
  #expenseModal{
    overflow:hidden !important;
  }
  #expenseModal > .modalbox{
    width:min(640px, calc(100vw - 36px)) !important;
    max-width:640px !important;
    min-width:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
  }
  #expenseModal .form,
  #expenseModal .field,
  #expenseModal .repeat-fields{
    min-width:0 !important;
    max-width:100% !important;
  }
  #expenseModal input,
  #expenseModal select,
  #expenseModal textarea{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* Matériel — sélection compacte des chevaux */
#gearModal .gear-horse-picker{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
#gearModal .gear-horse-picker summary{cursor:pointer;list-style:none;padding:11px 38px 11px 12px;font-weight:700;position:relative}
#gearModal .gear-horse-picker summary::-webkit-details-marker{display:none}
#gearModal .gear-horse-picker summary::after{content:'⌄';position:absolute;right:13px;top:9px;font-size:18px;color:var(--muted)}
#gearModal .gear-horse-picker[open] summary::after{transform:rotate(180deg)}
#gearModal .gear-horse-picker #gearHorseChoices{padding:0 10px 10px;margin-top:0;max-height:230px;overflow:auto}
#gearModal .gear-all-option{grid-column:1/-1;font-weight:800;background:var(--cream,#faf7f0)}
@media(max-width:700px){#gearModal .gear-horse-picker #gearHorseChoices{grid-template-columns:1fr}}


/* Répartition 90 jours : le verrou Premium est volontairement plus discret.
   Les montants Premium réels conservent la taille .value existante. */
#budget .budget-split-kpi .split-premium-lock{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-size:.56em;
  line-height:1;
}
#budget .budget-split-kpi .split-premium-lock .premium-diamond{
  font-size:.72em !important;
}

/* Répartition 90 jours — verrou Premium compact sur mobile.
   Cible uniquement le texte de verrouillage, jamais les montants réels. */
#budget .card.kpi.budget-split-kpi .budget-split-values strong.value > .split-premium-lock{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  width:auto !important;
  max-width:100% !important;
  white-space:nowrap !important;
  font-family:Arial,sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}
#budget .card.kpi.budget-split-kpi .budget-split-values strong.value > .split-premium-lock > .premium-diamond{
  font-size:8px !important;
  margin-left:0 !important;
  vertical-align:0 !important;
}
@media(max-width:700px){
  #budget .card.kpi.budget-split-kpi .budget-split-values strong.value > .split-premium-lock{
    font-size:9px !important;
    gap:1px !important;
  }
  #budget .card.kpi.budget-split-kpi .budget-split-values strong.value > .split-premium-lock > .premium-diamond{
    font-size:7px !important;
  }
}


/* Budget mobile — verrous Premium compacts uniquement.
   Ne modifie jamais la typographie des montants réels. */
@media (max-width:700px) {
  #budget #b60 .forecast-premium-lock,
  #budget #b90 .forecast-premium-lock {
    display:inline-flex !important;
    align-items:center !important;
    gap:3px !important;
    max-width:100% !important;
    white-space:nowrap !important;
    font-family:Arial,sans-serif !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.1 !important;
    letter-spacing:0 !important;
  }
  #budget #b60 .forecast-premium-lock .premium-diamond,
  #budget #b90 .forecast-premium-lock .premium-diamond {
    font-size:10px !important;
    margin-left:0 !important;
    vertical-align:0 !important;
  }

  #budget #bgear90 .split-premium-lock,
  #budget #bcare90 .split-premium-lock {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:1px !important;
    max-width:100% !important;
    white-space:nowrap !important;
    font-family:Arial,sans-serif !important;
    font-size:9px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:-0.15px !important;
  }
  #budget #bgear90 .split-premium-lock .premium-diamond,
  #budget #bcare90 .split-premium-lock .premium-diamond {
    font-size:6px !important;
    margin-left:0 !important;
    vertical-align:0 !important;
  }
}


/* ===== Budget Premium — correction structurelle définitive =====
   Chaque moitié Matériel / Soins possède sa propre largeur.
   Le verrou Premium est indépendant de la typographie des montants réels. */
#budget .budget-split-kpi .budget-split-values{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  column-gap:8px !important;
  width:100% !important;
}
#budget .budget-split-kpi .budget-split-values > div{
  min-width:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  text-align:center !important;
}
#budget #bgear90,
#budget #bcare90{
  width:100% !important;
  min-width:0 !important;
  text-align:center !important;
  overflow:visible !important;
}

#budget .vp-premium-lock{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  font-family:Arial,sans-serif !important;
  font-style:normal !important;
  line-height:1 !important;
  letter-spacing:-.15px !important;
  max-width:100% !important;
}
#budget .vp-premium-forecast{
  font-size:20px !important;
  font-weight:700 !important;
  gap:3px !important;
}
#budget .vp-premium-forecast .vp-premium-diamond{
  font-size:11px !important;
  font-weight:400 !important;
}
#budget .vp-premium-split{
  font-size:17px !important;
  font-weight:700 !important;
  gap:2px !important;
}
#budget .vp-premium-split .vp-premium-diamond{
  font-size:9px !important;
  font-weight:400 !important;
}

@media(max-width:700px){
  #budget .budget-split-kpi .budget-split-values{
    column-gap:4px !important;
  }
  #budget .budget-split-kpi .budget-split-values > div{
    padding-left:1px !important;
    padding-right:1px !important;
  }
  #budget .vp-premium-forecast{
    font-size:20px !important;
  }
  #budget .vp-premium-split{
    font-size:17px !important;
  }
}


/* ===== Premium responsive : mobile lisible / desktop plus incitatif ===== */
/* Desktop : les cartes 60/90 ont la place, on augmente clairement le verrou. */
@media (min-width:701px){
  #budget .vp-premium-forecast{
    font-size:26px !important;
    gap:4px !important;
  }
  #budget .vp-premium-forecast .vp-premium-diamond{
    font-size:13px !important;
  }
}

/* Mobile : priorité absolue à deux libellés complets, chacun dans sa moitié. */
@media (max-width:700px){
  #budget .budget-split-kpi .budget-split-values{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    column-gap:2px !important;
  }
  #budget .budget-split-kpi .budget-split-values > div{
    min-width:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible !important;
  }
  #budget #bgear90,
  #budget #bcare90{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    text-align:center !important;
  }
  #budget .vp-premium-split{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    justify-content:center !important;
    font-size:15px !important;
    letter-spacing:-.35px !important;
    gap:1px !important;
  }
  #budget .vp-premium-split .vp-premium-diamond{
    flex:0 0 auto !important;
    display:inline-block !important;
    font-size:8px !important;
    margin-left:0 !important;
  }
}

/* Test terrain : uniquement Payé/Fait — palette Vida Paddock inchangée */
#budget .expense-paid-btn,
#care .care-done-btn{
  min-height:46px !important;
  padding:11px 16px !important;
  border-radius:13px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}
#budget .expense-paid-btn{white-space:normal !important;text-align:center !important;max-width:230px !important;}
@media(max-width:700px){
  #budget .expense-paid-btn,#care .care-done-btn{min-height:48px !important;padding:12px 16px !important;}
  #budget .expense-paid-btn{max-width:100% !important;}
}


/* ===== Ajustement terrain 2 — géométrie uniquement, couleurs inchangées ===== */

/* Desktop : Fait retrouve les proportions des boutons Modifier/Supprimer. */
@media (min-width:701px){
  #care .care-done-btn{
    min-height:0 !important;
    height:auto !important;
    padding:8px 12px !important;
    border-radius:12px !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }

  /* Budget : la validation épouse le texte au lieu de former un gros bloc. */
  #budget .expense-paid-btn{
    min-height:0 !important;
    height:auto !important;
    width:auto !important;
    max-width:none !important;
    padding:8px 12px !important;
    border-radius:12px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
}

/* Mobile : zone tactile confortable, mais sans largeur artificielle. */
@media (max-width:700px){
  #care .care-done-btn{
    min-height:44px !important;
    height:44px !important;
    padding:9px 14px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }
  #budget .expense-paid-btn{
    min-height:44px !important;
    height:auto !important;
    width:auto !important;
    max-width:100% !important;
    padding:9px 13px !important;
    border-radius:12px !important;
    font-size:12px !important;
    line-height:1.15 !important;
  }
}

/* Soins : réserve la hauteur de la zone d'actions.
   Le passage Fait ↔ Remettre à faire ne redimensionne plus la carte. */
#care .care-reminder-row .row-actions{
  min-height:44px !important;
  align-content:flex-start !important;
}
@media (min-width:701px){
  #care .care-reminder-row .row-actions{
    min-height:32px !important;
  }
}


/* ===== Ajustement terrain 3 — compacité paiement + ordre visuel Soins ===== */

/* Mobile : validation de paiement légèrement moins haute,
   tout en conservant une zone suffisamment confortable. */
@media (max-width:700px){
  #budget .expense-paid-btn{
    min-height:40px !important;
    padding:7px 12px !important;
    line-height:1.1 !important;
  }
}

/* Soins : actions alignées de gauche à droite :
   Fait / Remettre à faire, puis Modifier, puis Supprimer.
   Plus de bouton central laissant un blanc visuel. */
#care .care-reminder-row .row-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  width:100% !important;
}
#care .care-reminder-row .care-done-btn,
#care .care-reminder-row .care-undo-btn{
  margin-left:0 !important;
  margin-right:0 !important;
}
#care .care-reminder-row .row-actions .btn{
  flex:0 0 auto !important;
}

@media (max-width:700px){
  #care .care-reminder-row .row-actions{
    gap:6px !important;
    flex-wrap:wrap !important;
  }
}


/* ===== Ajustement terrain 4 — ordre Soins + paiement mobile équilibré ===== */

/* IMPORTANT : la zone d'actions reste dans sa colonne naturelle.
   Ne jamais lui donner width:100%, ce qui la faisait remonter sur le titre. */
#care .care-reminder-row .row-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:7px !important;
  width:auto !important;
  min-width:max-content !important;
  min-height:0 !important;
  align-content:normal !important;
}
#care .care-reminder-row .row-actions .btn{
  flex:0 0 auto !important;
  margin:0 !important;
}

/* Mobile : le bouton de paiement épouse le texte.
   Padding vertical strictement identique en haut et en bas. */
@media (max-width:700px){
  #budget .expense-paid-btn{
    min-height:0 !important;
    height:auto !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
    padding-left:11px !important;
    padding-right:11px !important;
    line-height:1.15 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }

  #care .care-reminder-row .row-actions{
    gap:6px !important;
    flex-wrap:nowrap !important;
  }
}


/* ===== Ajustement terrain 5 — actions Soins alignées à droite =====
   Les trois actions restent groupées à droite sur desktop et mobile.
   Modifier/Supprimer ne changent donc plus de position selon Fait/Remettre à faire. */
#care .care-reminder-row .row-actions{
  margin-left:auto !important;
  justify-content:flex-end !important;
  width:auto !important;
}

@media (max-width:700px){
  #care .care-reminder-row .row-actions{
    margin-left:auto !important;
    justify-content:flex-end !important;
    width:auto !important;
    flex-wrap:nowrap !important;
  }
}


/* ===== Lisibilité desktop — micro-informations uniquement =====
   Mobile inchangé. Matériel : boutons inchangés. Couleurs inchangées. */
@media (min-width:701px){

  /* Soins : actions quotidiennes / gestion */
  #care .care-reminder-row .row-actions .btn{
    font-size:13px !important;
    padding:9px 13px !important;
    line-height:1.2 !important;
  }

  /* Budget : boutons d'action, dont validation de paiement */
  #budget .btn{
    font-size:13px;
  }
  #budget .expense-paid-btn{
    font-size:13px !important;
    padding:9px 13px !important;
    line-height:1.2 !important;
  }

  /* Petites pastilles / catégories Soins et Budget */
  #care .tag,
  #care .badge,
  #care .pill,
  #budget .tag,
  #budget .badge,
  #budget .pill{
    font-size:12px !important;
  }

  /* État des équipements + notes + échéances :
     hausse légère des textes secondaires, sans toucher aux gros titres. */
  #equipment .status,
  #equipment .state,
  #equipment .note,
  #equipment .notes,
  #equipment .muted,
  #material .status,
  #material .state,
  #material .note,
  #material .notes,
  #material .muted,
  #care .muted,
  #budget .muted{
    font-size:12px;
  }

  /* Accueil : CTA Premium un cran plus lisible */
  #home .premium-cta,
  #home .premium-link,
  #home .discover-premium{
    font-size:13px !important;
  }
}


/* ===== Budget — cartes de dépenses plus compactes =====
   Réduit uniquement le vide vertical interne, sans masquer l'action de paiement. */
#budget .expense-row{
  padding-top:11px !important;
  padding-bottom:11px !important;
  row-gap:7px !important;
}
#budget .expense-row .row-actions{
  margin-top:2px !important;
}
#budget .expense-row .expense-paid-btn{
  width:auto !important;
  max-width:100% !important;
  white-space:nowrap !important;
}

/* Desktop : aspect "ligne de gestion" plus dense. */
@media (min-width:701px){
  #budget .expense-row{
    min-height:0 !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
  #budget .expense-row .expense-paid-btn{
    min-height:0 !important;
    padding:8px 12px !important;
    line-height:1.2 !important;
  }
}

/* Mobile : compact, mais le libellé complet reste visible.
   En cas d'écran étroit, le texte peut revenir proprement à la ligne. */
@media (max-width:700px){
  #budget .expense-row{
    min-height:0 !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
    row-gap:6px !important;
  }
  #budget .expense-row .expense-paid-btn{
    white-space:normal !important;
    text-align:center !important;
    padding:6px 11px !important;
    line-height:1.15 !important;
  }
}

/* ===== Matériel — actions desktop centrées et cadres équilibrés ===== */
@media (min-width:701px){
  #gear .material-actions{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  #gear .material-actions .btn,
  #gear .material-actions .gear-replaced-btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:58px !important;
    height:100% !important;
    margin:0 !important;
    padding:10px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    line-height:1.2 !important;
    box-sizing:border-box !important;
  }
}

/* ===== Matériel — actions desktop V2 : 4 cadres égaux, contenu parfaitement centré ===== */
@media (min-width:701px){
  #gear .material-actions{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:stretch !important;
    width:100% !important;
  }
  #gear .material-actions > .btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:64px !important;
    height:100% !important;
    margin:0 !important;
    padding:10px 8px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    line-height:1.2 !important;
  }
}

/* ===== Correctif final Matériel : actions adaptatives, sans chevauchement ===== */
@media (min-width:701px){
  #gear .material-actions{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(105px,1fr)) !important;
    gap:8px !important;
    align-items:stretch !important;
    width:100% !important;
  }
  #gear .material-actions > .btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:54px !important;
    height:auto !important;
    margin:0 !important;
    padding:9px 8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    line-height:1.18 !important;
    box-sizing:border-box !important;
  }
}


/* Fenetres longues : fermeture toujours accessible sans deplacer les actions principales */
.modalbox.has-top-close{position:relative;}
.modal-top-close{
  position:sticky;
  top:0;
  z-index:30;
  height:0;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}
.modal-top-close .modal-x{
  pointer-events:auto;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.96);
  color:var(--text);
  font:inherit;
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(18,37,33,.10);
}
.modal-top-close .modal-x:hover{background:var(--paper);}
.modalbox.has-top-close > .eyebrow,
.modalbox.has-top-close > h3{padding-right:50px;}
@media (max-width:700px){
  .modal-top-close .modal-x{width:36px;height:36px;font-size:17px;}
  .modalbox.has-top-close > .eyebrow,
  .modalbox.has-top-close > h3{padding-right:46px;}
}

/* Correctif modal : l'aperçu de fiche garde sa pastille visible sans chevaucher la fermeture */
#carePreviewModal .care-preview-head{
  padding-right:52px !important;
  box-sizing:border-box;
}
@media (max-width:700px){
  #carePreviewModal .care-preview-head{padding-right:48px !important;}
}


/* Premium : un seul appel commercial volontaire sur l’accueil.
   Les mentions Premium verrouillées restent informatives et non cliquables. */
@media (min-width:701px){
  #home .home-welcome .premium-badge{
    font-size:15px !important;
    padding:7px 11px !important;
    line-height:1.25 !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}
#home .kpi:not([onclick]) .premium-diamond,
#budget .vp-premium-lock{cursor:default !important;}


/* Budget desktop — grille de cartes inspirée des Soins.
   Mobile conserve sa présentation existante. */
@media (min-width:701px){
  #expenseList{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    align-items:stretch !important;
  }
  #budget .expense-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    min-width:0 !important;
    height:100% !important;
    padding:16px !important;
    border-radius:16px !important;
    row-gap:8px !important;
  }
  #budget .expense-row > div:first-child{
    width:100% !important;
    min-width:0 !important;
  }
  #budget .expense-row > div:nth-child(2){
    width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    align-items:flex-start !important;
    text-align:left !important;
  }
  #budget .expense-row .row-actions{
    width:100% !important;
    margin-top:auto !important;
    margin-left:0 !important;
    padding-top:6px !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }
  #budget .expense-row .expense-paid-btn{
    width:auto !important;
    max-width:100% !important;
  }
}
@media (min-width:1180px){
  #expenseList{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}


/* Budget PC v2 — cartes alignées, montant visible, marges régulières */
@media (min-width:701px){
  #expenseList{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }
  #budget .expense-row{
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto 1fr auto !important;
    column-gap:18px !important;
    row-gap:10px !important;
    box-sizing:border-box !important;
    padding:18px !important;
    min-height:190px !important;
    overflow:hidden !important;
  }
  #budget .expense-row > .grow{
    grid-column:1 !important;
    grid-row:1 !important;
    width:auto !important;
    min-width:0 !important;
  }
  #budget .expense-row > .expense-due-wrap{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    width:auto !important;
    min-width:145px !important;
    max-width:210px !important;
    margin:0 !important;
    text-align:right !important;
    align-items:flex-end !important;
    justify-self:end !important;
  }
  #budget .expense-row > .expense-frequency-badge{
    grid-column:1 !important;
    grid-row:2 !important;
    justify-self:start !important;
    align-self:start !important;
    margin:0 !important;
  }
  #budget .expense-row > .amount{
    grid-column:2 !important;
    grid-row:3 !important;
    position:static !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    align-self:end !important;
    justify-self:end !important;
    text-align:right !important;
    white-space:nowrap !important;
    font-size:24px !important;
    line-height:1.1 !important;
    font-weight:700 !important;
    color:var(--green) !important;
  }
  #budget .expense-row > .row-actions{
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    width:100% !important;
    margin:0 !important;
    padding-top:4px !important;
    justify-content:flex-start !important;
    align-self:end !important;
    gap:8px !important;
  }
  #budget .expense-row .expense-due{
    line-height:1.3 !important;
    overflow-wrap:anywhere !important;
  }
  #budget .expense-row .expense-payment-inline,
  #budget .expense-row .expense-payment-summary{
    width:100% !important;
    align-items:flex-end !important;
  }
  #budget .expense-row .expense-paid-btn,
  #budget .expense-row .expense-view-due-btn{
    max-width:100% !important;
    white-space:normal !important;
    text-align:center !important;
  }
}
@media (min-width:1180px){
  #expenseList{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* Budget PC v3 — correction structurelle : aucun contenu hors carte */
@media (min-width:701px){
  #budget #expenseList{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
  #budget #expenseList .expense-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto 1fr auto!important;
    gap:10px!important;
    position:relative!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:230px!important;
    padding:18px!important;
    overflow:hidden!important;
  }
  #budget #expenseList .expense-row>.grow{grid-column:1!important;grid-row:1!important;width:100%!important;min-width:0!important}
  #budget #expenseList .expense-row>.expense-due-wrap{
    grid-column:1!important;grid-row:2!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    margin:0!important;justify-self:stretch!important;align-items:flex-start!important;text-align:left!important
  }
  #budget #expenseList .expense-row>.expense-frequency-badge{
    grid-column:1!important;grid-row:3!important;position:static!important;
    justify-self:start!important;margin:0!important
  }
  #budget #expenseList .expense-row>.expense-card-amount{
    grid-column:1!important;grid-row:4!important;
    position:static!important;inset:auto!important;transform:none!important;float:none!important;
    display:block!important;width:auto!important;min-width:0!important;max-width:100%!important;
    margin:0!important;padding:4px 0 0!important;
    justify-self:start!important;align-self:end!important;text-align:left!important;
    white-space:nowrap!important;font-size:25px!important;line-height:1.1!important;font-weight:700!important
  }
  #budget #expenseList .expense-row>.expense-card-actions{
    grid-column:1!important;grid-row:5!important;
    position:static!important;inset:auto!important;transform:none!important;float:none!important;
    display:flex!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;
    margin:0!important;padding:4px 0 0!important;gap:8px!important;
    justify-content:flex-start!important;align-items:center!important;flex-wrap:wrap!important
  }
  #budget #expenseList .expense-row .expense-payment-inline,
  #budget #expenseList .expense-row .expense-payment-line,
  #budget #expenseList .expense-row .expense-payment-summary{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  #budget #expenseList .expense-row .expense-paid-btn,
  #budget #expenseList .expense-row .expense-view-due-btn{
    position:static!important;transform:none!important;float:none!important;
    width:auto!important;max-width:100%!important;box-sizing:border-box!important;
    white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important
  }
}

/* Budget PC v4 — répartition gauche/droite équilibrée */
@media (min-width:701px){
  #budget #expenseList .expense-row{
    grid-template-columns:minmax(0,1fr) minmax(155px,0.9fr)!important;
    grid-template-rows:auto auto 1fr auto!important;
    column-gap:20px!important;
    row-gap:10px!important;
    padding:18px 20px!important;
    min-height:205px!important;
  }
  /* Gauche : identité + périodicité */
  #budget #expenseList .expense-row>.grow{
    grid-column:1!important;grid-row:1!important;
    align-self:start!important;
  }
  #budget #expenseList .expense-row>.expense-frequency-badge{
    grid-column:1!important;grid-row:2!important;
    align-self:start!important;justify-self:start!important;
  }
  /* Droite : statut/validation + montant */
  #budget #expenseList .expense-row>.expense-due-wrap{
    grid-column:2!important;grid-row:1 / span 2!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    justify-self:stretch!important;align-self:start!important;
    align-items:flex-end!important;text-align:right!important;
  }
  #budget #expenseList .expense-row>.expense-card-amount{
    grid-column:2!important;grid-row:3!important;
    justify-self:end!important;align-self:end!important;
    text-align:right!important;padding:0!important;
  }
  /* Actions en bas, toujours contenues dans la carte */
  #budget #expenseList .expense-row>.expense-card-actions{
    grid-column:1 / -1!important;grid-row:4!important;
    align-self:end!important;justify-content:flex-start!important;
    padding-top:8px!important;border-top:1px solid rgba(78,107,92,.12)!important;
  }
  #budget #expenseList .expense-row .expense-payment-inline,
  #budget #expenseList .expense-row .expense-payment-line,
  #budget #expenseList .expense-row .expense-payment-summary{
    align-items:flex-end!important;text-align:right!important;
  }
  #budget #expenseList .expense-row .expense-paid-btn,
  #budget #expenseList .expense-row .expense-view-due-btn{
    margin-left:auto!important;
  }
}

/* Budget PC v5 — placement final demandé */
@media (min-width:701px){
  #budget #expenseList .expense-row{
    grid-template-columns:minmax(0,1fr) minmax(230px,1.15fr)!important;
    grid-template-rows:auto 1fr auto auto!important;
    column-gap:24px!important;
    row-gap:8px!important;
    min-height:210px!important;
    padding:18px 20px!important;
  }
  #budget #expenseList .expense-row>.grow{
    grid-column:1!important;grid-row:1!important;
    align-self:start!important;
  }
  /* Échéance / validation : droite, lignes complètes */
  #budget #expenseList .expense-row>.expense-due-wrap{
    grid-column:2!important;grid-row:1 / span 2!important;
    width:100%!important;min-width:0!important;max-width:none!important;
    justify-self:stretch!important;align-self:start!important;
    align-items:flex-end!important;text-align:right!important;
  }
  #budget #expenseList .expense-row .expense-due{
    width:100%!important;white-space:nowrap!important;
    overflow:visible!important;overflow-wrap:normal!important;
    text-align:right!important;
  }
  #budget #expenseList .expense-row .expense-payment-inline,
  #budget #expenseList .expense-row .expense-payment-line,
  #budget #expenseList .expense-row .expense-payment-summary{
    width:100%!important;max-width:none!important;
    align-items:flex-end!important;text-align:right!important;
  }
  #budget #expenseList .expense-row .expense-paid-btn,
  #budget #expenseList .expense-row .expense-view-due-btn{
    width:auto!important;max-width:none!important;
    white-space:nowrap!important;overflow-wrap:normal!important;
    margin-left:auto!important;text-align:center!important;
  }
  /* Tarif toujours à droite */
  #budget #expenseList .expense-row>.expense-card-amount{
    grid-column:2!important;grid-row:3 / span 2!important;
    justify-self:end!important;align-self:end!important;
    text-align:right!important;margin:0!important;padding:0 0 2px!important;
  }
  /* Périodicité en bas à gauche, juste au-dessus des actions */
  #budget #expenseList .expense-row>.expense-frequency-badge{
    grid-column:1!important;grid-row:3!important;
    justify-self:start!important;align-self:end!important;
    margin:0 0 2px!important;
  }
  /* Actions bas gauche, sans trait */
  #budget #expenseList .expense-row>.expense-card-actions{
    grid-column:1!important;grid-row:4!important;
    justify-content:flex-start!important;align-self:end!important;
    width:auto!important;margin:0!important;padding:0!important;
    border-top:0!important;border:none!important;
  }
}

/* Budget PC v6 — cartes plus basses + statut plus lisible */
@media (min-width:701px){
  #budget #expenseList .expense-row{
    min-height:180px!important;
    padding-top:16px!important;
    padding-bottom:16px!important;
  }
  #budget #expenseList .expense-row .expense-due{
    font-size:15px!important;
    line-height:1.25!important;
    font-weight:600!important;
  }
  #budget #expenseList .expense-row>.expense-card-actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
  }
  #budget #expenseList .expense-row>.expense-card-actions .btn{
    width:auto!important;
    flex:0 0 auto!important;
    margin:0!important;
  }
}

/* Budget PC v7 — tarif aligné avec la périodicité */
@media (min-width:701px){
  #budget #expenseList .expense-row>.expense-card-amount{
    grid-column:2!important;
    grid-row:3!important;
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    padding:0!important;
    text-align:right!important;
  }
  #budget #expenseList .expense-row>.expense-frequency-badge{
    grid-column:1!important;
    grid-row:3!important;
    align-self:center!important;
  }
}

/* Budget PC v8 — notes plus larges sans déplacer les autres informations */
@media (min-width:701px){
  #budget #expenseList .expense-row>.grow{
    width:calc(100% + 150px)!important;
    max-width:calc(100% + 150px)!important;
    position:relative!important;
    z-index:1!important;
  }
  #budget #expenseList .expense-row>.grow .muted,
  #budget #expenseList .expense-row>.grow .note,
  #budget #expenseList .expense-row>.grow .expense-note{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  #budget #expenseList .expense-row>.expense-due-wrap{
    position:relative!important;
    z-index:2!important;
  }
}

/* Budget PC v9 — largeur des notes adaptée à la périodicité */
@media (min-width:701px){
  #budget #expenseList .expense-row>.grow{
    width:100%!important;
    max-width:none!important;
  }

  /* Récurrente/personnalisée : la note s'arrête avant la zone échéance/paiement. */
  #budget #expenseList .expense-row.expense-row-recurring>.grow{
    width:calc(100% + 105px)!important;
    max-width:calc(100% + 105px)!important;
  }

  /* Ponctuelle : davantage d'espace, mais une marge avant la colonne du prix. */
  #budget #expenseList .expense-row.expense-row-oneoff>.grow{
    width:calc(100% + 175px)!important;
    max-width:calc(100% + 175px)!important;
  }

  #budget #expenseList .expense-row>.grow .muted,
  #budget #expenseList .expense-row>.grow .note,
  #budget #expenseList .expense-row>.grow .expense-note{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
}

/* Budget PC v10 — notes récurrentes protégées + cartes alignées par rangée */
@media (min-width:701px){
  /* La grille étire naturellement les deux cartes d'une même rangée
     à la hauteur de la plus grande. */
  #budget #expenseList{
    align-items:stretch!important;
  }
  #budget #expenseList .expense-row{
    height:100%!important;
    align-self:stretch!important;
  }

  /* Récurrente/personnalisée : la note reste nettement avant
     le bloc Échéance / Valider le paiement. */
  #budget #expenseList .expense-row.expense-row-recurring>.grow{
    width:calc(100% + 55px)!important;
    max-width:calc(100% + 55px)!important;
  }

  /* Ponctuelle : conserve la largeur plus généreuse validée. */
  #budget #expenseList .expense-row.expense-row-oneoff>.grow{
    width:calc(100% + 175px)!important;
    max-width:calc(100% + 175px)!important;
  }

  /* Les notes longues peuvent continuer sur autant de lignes que nécessaire. */
  #budget #expenseList .expense-row>.grow .muted,
  #budget #expenseList .expense-row>.grow .note,
  #budget #expenseList .expense-row>.grow .expense-note{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
}

/* Check-lists v11 — modèles proposés sans modifier la disposition existante */
.check-template-block{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.check-template-list{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:9px;
}
.check-template-btn{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  cursor:pointer;
}
.check-template-btn:hover{border-color:#c9d7cf}
.check-template-btn span{font-weight:700;font-size:13px}
.check-template-btn small{color:var(--green);font-weight:700;font-size:11px;text-align:right}
.check-template-btn.is-added{background:var(--sage)}
@media(max-width:900px){
  .check-template-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .check-template-btn{align-items:flex-start;flex-direction:column;gap:3px}
}
@media(max-width:620px){
  .check-template-list{grid-template-columns:1fr}
  .check-template-btn{align-items:center;flex-direction:row}
}

/* Check-lists v12 — un modèle utilisé disparaît ; × masque une suggestion */
.check-template-block[hidden]{display:none!important}
.check-template-btn{
  padding:0!important;
  overflow:hidden;
  position:relative;
}
.check-template-use{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  color:inherit;
  padding:10px 34px 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  cursor:pointer;
}
.check-template-use span{font-weight:700;font-size:13px}
.check-template-use small{color:var(--green);font-weight:700;font-size:11px;text-align:right}
.check-template-hide{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  font-size:17px;
  line-height:20px;
  cursor:pointer;
}
.check-template-hide:hover{background:rgba(0,0,0,.045);color:var(--ink)}
@media(max-width:900px){
  .check-template-use{align-items:flex-start;flex-direction:column;gap:3px}
}
@media(max-width:620px){
  .check-template-use{align-items:center;flex-direction:row}
}

/* Audit final v16 */
.premium-free-limits{margin:12px 0 14px!important;text-align:left}

/* Premium v17 — limites Free intégrées à la liste existante */
.premium-free-hint{font-weight:400;color:var(--muted)}

/* Premium v18 — une fonctionnalité par ligne sur PC et mobile */
#premiumModal .feature-list{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:8px!important;
}
#premiumModal .feature-list>div{
  display:block!important;
  width:100%!important;
  min-width:0!important;
}
#premiumModal .premium-free-hint{
  display:inline!important;
  white-space:normal!important;
}

/* Budget v20 — PC uniquement : cartes de répartition par cheval compactes */
@media (min-width:701px){
  #budget .horse-expense-group{height:auto!important;min-height:0!important;align-self:start!important}
  #budget .horse-expense-grid{align-items:start!important}
}

/* Budget v21 — PC uniquement : sections de dépenses par cheval à hauteur de contenu */
@media (min-width:701px){
  #budget #expenseList .expense-horse-section{
    height:auto!important;
    min-height:0!important;
    align-self:start!important;
    align-content:start!important;
  }
  #budget #expenseList{
    align-items:start!important;
  }
  #budget #expenseList .expense-horse-section .expense-row{
    height:auto!important;
    min-height:180px!important;
    align-self:auto!important;
  }
}

/* Budget v22 — PC uniquement : deux colonnes indépendantes, sans trous entre chevaux */
@media (min-width:701px){
  #budget #expenseList:has(.expense-horse-column){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
    align-items:start!important;
  }
  #budget #expenseList .expense-horse-column{
    display:flex!important;
    flex-direction:column!important;
    gap:16px!important;
    min-width:0!important;
  }
  #budget #expenseList .expense-horse-column .expense-horse-section{
    margin:0!important;
    height:auto!important;
    min-height:0!important;
  }
  #budget #expenseList .expense-horse-column .expense-row{
    height:auto!important;
    min-height:180px!important;
    align-self:auto!important;
  }
}
@media (max-width:700px){
  #budget #expenseList .expense-horse-column{display:contents!important}
}

/* Budget v23 — PC uniquement : badges complets + séparation identité/échéance en Budget global */
@media (min-width:701px){
  /* La périodicité garde toujours toute sa largeur (ex. « Toutes les 8 semaines »). */
  #budget #expenseList .expense-horse-column .expense-frequency-badge{
    width:max-content!important;
    max-width:none!important;
    min-width:max-content!important;
    box-sizing:border-box!important;
    padding:5px 9px!important;
    white-space:nowrap!important;
    justify-content:center!important;
    text-align:center!important;
  }

  /* Dans les cartes groupées par cheval, l'identité reste dans sa colonne gauche :
     elle se replie avant la zone Échéance / paiement et ne peut plus la chevaucher. */
  #budget #expenseList .expense-horse-column .expense-row>.grow,
  #budget #expenseList .expense-horse-column .expense-row.expense-row-recurring>.grow,
  #budget #expenseList .expense-horse-column .expense-row.expense-row-oneoff>.grow{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-right:6px!important;
    box-sizing:border-box!important;
  }
  #budget #expenseList .expense-horse-column .expense-row>.grow .title,
  #budget #expenseList .expense-horse-column .expense-row>.grow .expense-category-sub,
  #budget #expenseList .expense-horse-column .expense-row>.grow .meta{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
}


/* V26 — Confirmation depuis Paramètres : conserve Paramètres derrière sur PC et mobile.
   La confirmation reste toujours au premier plan, sans modifier les autres parcours. */
#confirmModal.open{
  z-index:7000 !important;
}
#confirmModal.open > .modalbox{
  position:relative !important;
  z-index:7001 !important;
}

/* V27 — Budget mobile : une échéance en retard sur plusieurs lignes ne coupe plus
   le bouton « Valider le paiement ». Desktop inchangé. */
@media (max-width:620px){
  #budget #expenseList .row.expense-row .expense-due-wrap{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  #budget #expenseList .row.expense-row .expense-payment-inline,
  #budget #expenseList .row.expense-row .expense-payment-line{
    overflow:visible !important;
  }
  #budget #expenseList .row.expense-row .expense-paid-btn{
    height:auto !important;
    min-height:0 !important;
    white-space:normal !important;
    line-height:1.15 !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
  }
}

/* V28 — Audit anti-coupure mobile des contenus variables.
   Les zones de texte métier peuvent grandir/revenir à la ligne ; navigation et desktop inchangés. */
@media (max-width:700px){
  /* Cartes métier : aucun texte saisi/généré ne doit imposer sa largeur au conteneur. */
  #home .card > *,
  #budget .card > *,
  #budget #expenseList .expense-row > *,
  #care .care-reminder-row > *,
  #gear .card > *,
  #gear .row > *,
  #lists .card > *,
  #lists .row > *,
  .notice-item > *,
  #premiumModal .feature-list > div{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  /* Titres, notes, métadonnées et libellés dynamiques : retour à la ligne sans coupe. */
  #home .title,#home .meta,#home .sub,#home .label,
  #budget .title,#budget .meta,#budget .expense-category-sub,#budget .expense-due,
  #care .title,#care .meta,
  #gear .title,#gear .meta,
  #lists .title,#lists .meta,
  .notice-item .title,.notice-item .meta,.notice-item .notice-content,
  #premiumModal .feature-list > div{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  /* Badges métier : ils gardent leur forme, mais peuvent devenir plus hauts si le texte s'allonge. */
  #budget .expense-horse-badge,
  #budget .expense-frequency-badge,
  #care .care-reminder-row > .badge,
  #gear .badge,
  #lists .badge{
    width:auto;
    max-width:100%!important;
    height:auto!important;
    min-height:0;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
    line-height:1.2!important;
    text-align:center;
  }

  /* Actions dont le libellé peut évoluer : hauteur intrinsèque, jamais de texte rogné. */
  #budget #expenseList .expense-paid-btn,
  #budget #expenseList .expense-view-due-btn,
  #care .care-reminder-row .row-actions .btn,
  #gear .material-actions .btn,
  #gearAttention .btn,
  #lists .row-actions .btn,
  .notice-paid-btn{
    height:auto!important;
    max-height:none!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
    line-height:1.2!important;
    text-align:center;
  }

  /* Les groupes d'actions peuvent se replier uniquement si leur largeur devient insuffisante. */
  #care .care-reminder-row .row-actions,
  #gear .material-actions,
  #lists .row-actions,
  .notice-payment-row{
    max-width:100%!important;
  }
  #care .care-reminder-row .row-actions{
    min-width:0!important;
    flex-wrap:wrap!important;
  }
  .notice-payment-row{flex-wrap:wrap!important;}

  /* Budget : la zone échéance/paiement reste entièrement visible quelle que soit sa hauteur. */
  #budget #expenseList .row.expense-row .expense-due-wrap,
  #budget #expenseList .row.expense-row .expense-payment-inline,
  #budget #expenseList .row.expense-row .expense-payment-line{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #budget #expenseList .expense-payment-summary strong{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}


/* V30 — Budget global PC : largeur de note selon le cas réel.
   Ponctuelle déjà payée = pas de zone échéance/bouton à protéger : la note profite de l’espace libre.
   Ponctuelle avec échéance active et récurrente/personnalisée = largeur V23 conservée pour protéger le paiement. */
@media (min-width:701px){
  #budget #expenseList .expense-horse-column .expense-row.expense-row-oneoff-paid>.grow{
    width:calc(100% + 110px)!important;
    max-width:calc(100% + 110px)!important;
  }
  #budget #expenseList .expense-horse-column .expense-row.expense-row-oneoff-due>.grow,
  #budget #expenseList .expense-horse-column .expense-row.expense-row-recurring>.grow{
    width:100%!important;
    max-width:100%!important;
  }
}


/* V33 — Soins mobile : Santé garde une largeur de texte lisible.
   Correctif ciblé uniquement sur les cartes Santé ; Maréchalerie et autres catégories inchangées. */
@media (max-width:700px){
  #care .care-reminder-row.care-health-row{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:start !important;
    column-gap:12px !important;
    row-gap:10px !important;
  }
  #care .care-reminder-row.care-health-row > .badge{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  #care .care-reminder-row.care-health-row > .grow{
    grid-column:2 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
  }
  #care .care-reminder-row.care-health-row > .row-actions{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
  }
}

/* V64: preserve short important information on narrow and wide screens. */
.multiline-highlight { white-space:pre-line; overflow-wrap:anywhere; word-break:normal; min-width:0; max-width:100%; line-height:1.45; }
#sHighlight, #eHighlight { min-height:76px; resize:vertical; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.budget-optin { padding:9px 12px; border:1px solid var(--line, #d8ddd8); border-radius:12px; background:var(--cream, #faf7ef); min-width:0; }
.budget-optin label { display:flex; align-items:flex-start; gap:8px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
.budget-optin label input { flex:0 0 auto; margin-top:3px; }
@media (max-width:620px) { .budget-optin { padding:9px 11px; } .multiline-highlight { max-width:100%; } }

/* V66: preserve user-entered line breaks in every important-info preview. */
.multiline-highlight{white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:normal;min-width:0;max-width:100%;line-height:1.45;}
.material-note{min-width:0;overflow-wrap:anywhere;}
.material-note .multiline-highlight{display:inline;white-space:pre-wrap!important;}

/* V67: mobile previews preserve user-entered newlines and wrap long words. */
#home .multiline-highlight, #budget .multiline-highlight, #care .multiline-highlight,
#gear .multiline-highlight, .material-note .multiline-highlight,
.row .multiline-highlight, .card .multiline-highlight {
 white-space:pre-wrap!important; overflow-wrap:anywhere!important; word-break:break-word!important;
 min-width:0!important; max-width:100%!important;
}
.material-note .multiline-highlight {display:inline-block!important;vertical-align:top;}
.budget-optin input:disabled {cursor:not-allowed;}

/* V68: keep the optional Budget choice immediately below its amount. */
.budget-price-group { min-width:0; }
.budget-price-group .budget-optin-compact { margin-top:8px; padding:9px 11px; background:var(--cream, #faf7ef); border-color:var(--line, #d8ddd8); }
.budget-price-group .budget-optin-compact label { margin:0; font-size:inherit; }

/* V69: optional linking checkboxes are body text, never uppercase form headings. */
.field .budget-optin > label,
.field .budget-optin-compact > label,
.budget-optin > label {
  font-family:inherit;
  font-size:14px;
  font-weight:400;
  line-height:1.45;
  letter-spacing:normal;
  text-transform:none;
  color:var(--muted);
  overflow-wrap:break-word;
}
.budget-optin > label input[type="checkbox"] { align-self:flex-start; margin-top:3px; }
@media (max-width:620px) {
  .field .budget-optin > label, .field .budget-optin-compact > label, .budget-optin > label {font-size:14px;}
}

/* V70: one subtle shared container for price and optional Budget link. */
.field.budget-price-group {
  padding: 12px 13px;
  border: 1px solid var(--line, #d8ddd8);
  border-radius: 15px;
  background: var(--cream, #faf7ef);
  min-width: 0;
  box-sizing: border-box;
  gap: 0;
}
.field.budget-price-group > label { display:block; margin-bottom:8px; }
.field.budget-price-group > input[type="number"] {
  box-sizing:border-box;
  width:100%;
  min-width:0;
  background:var(--white, #fffdfa);
}
.field.budget-price-group > .budget-optin-compact {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.field.budget-price-group > .budget-optin-compact > label {
  font-family:inherit;
  font-size:14px;
  font-weight:400;
  letter-spacing:normal;
  line-height:1.45;
  text-transform:none;
  color:var(--muted);
  margin:0;
}
@media (max-width:620px) {
  .field.budget-price-group { padding:11px 12px; }
}

/* V72 — Le bouton d'ajout de soin occupe la largeur de sa carte sur mobile,
   comme les boutons d'ajout des autres rubriques. */
@media (max-width:620px) {
  .care-schedule-head { align-items:stretch; }
  .care-schedule-head > .btn.primary {
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    text-align:center;
    align-self:stretch;
  }
}

/* V74 : information honnête sur les sauvegardes, sans boutons inactifs. */
.settings-export-clarification{font-size:.82rem;line-height:1.5;color:var(--muted,#6c716d);margin:10px 0 12px;overflow-wrap:anywhere}
.settings-backup-info{border:1px solid #d8d8d3;background:#f8f7f3;border-radius:12px;padding:12px 14px;color:inherit}
.settings-backup-info strong{font-size:.92rem;font-weight:600}
.settings-backup-info p{margin:6px 0 0;font-size:.84rem;line-height:1.5;color:var(--muted,#6c716d);overflow-wrap:anywhere}

/* Export formats: secondary action, accessible on small screens */
.export-formats-content{max-width:560px;width:min(94vw,560px);box-sizing:border-box}
.export-formats-options{display:grid;gap:10px;margin:18px 0}
.export-formats-options button{display:flex;align-items:flex-start;flex-direction:column;text-align:left;gap:4px;white-space:normal;padding:14px 16px;width:100%;background:#faf8f3;border:1px solid #d9d9d4;border-radius:12px;color:inherit}
.export-formats-options button strong{font-size:1rem;font-weight:600}
.export-formats-options button span{font-size:.86rem;font-weight:400;color:var(--muted,#66716b)}

/* V76 : fenêtre d’export opaque et lisible sur mobile et ordinateur */
#exportFormatsModal{z-index:6500!important;background:rgba(18,37,33,.58)!important}
#exportFormatsModal > .export-formats-content{position:relative!important;z-index:6501!important;width:min(560px,100%)!important;max-width:560px!important;max-height:calc(100dvh - 36px)!important;overflow-y:auto!important;box-sizing:border-box!important;background:#fffdfa!important;color:#3e4d46!important;border:1px solid #d9ddd6!important;border-radius:24px!important;padding:26px 22px!important;box-shadow:0 24px 75px rgba(0,0,0,.28)!important}
#exportFormatsModal .export-formats-close{position:absolute;top:12px;right:14px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #d8ddd7;border-radius:50%;background:#fffdfa;color:#3e4d46;font-size:24px;cursor:pointer}
#exportFormatsModal h2{font-family:Georgia,serif;color:#6f8f7e;font-weight:500;font-size:clamp(25px,5.5vw,34px);line-height:1.15;margin:8px 44px 12px 0}
#exportFormatsModal .meta{font-size:.88rem;line-height:1.5;color:#69746d;margin:8px 0}
#exportFormatsModal .export-formats-options button{background:#faf8f3!important;color:#3e4d46!important;min-height:72px;cursor:pointer}
@media(max-width:600px){#exportFormatsModal{padding:14px!important}#exportFormatsModal > .export-formats-content{padding:24px 18px!important;border-radius:22px!important}}

/* V78 — Espace visuel entre les actions de confidentialité et la future sauvegarde */
.settings-backup-info{margin-top:22px!important}

/* V86: discreet expandable history, and actions only inside the edit form. */
.old-horses-section{margin-top:16px;border:1px solid #d9ded8;border-radius:14px;padding:12px 14px}
.old-horses-section summary{cursor:pointer;font-weight:650;color:#607c6c;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.old-horses-section summary::-webkit-details-marker{display:none}
.old-horses-chevron{width:11px;height:11px;border-right:2px solid #607c6c;border-bottom:2px solid #607c6c;transform:rotate(45deg);transition:transform .2s;margin-right:7px;margin-top:-5px;flex-shrink:0}
.old-horses-section[open] .old-horses-chevron{transform:rotate(225deg);margin-top:5px}
.horse-edit-danger-actions{margin-top:22px;padding-top:18px;border-top:1px solid #e0e2dc;display:flex;flex-direction:column;gap:10px}
.horse-edit-danger-actions[hidden],.horse-edit-danger-actions button[hidden]{display:none!important}
.horse-edit-danger-actions button{width:100%;min-height:44px}

/* V128 — Les écrans de compte sont des pages plein écran, pas des modales
   de l'application : annuler le décalage desktop de 128px hérité ci-dessus.
   Conserver les autres fenêtres et le bandeau du logo inchangés. */
@media (min-width:901px){
  .modal.auth-fullscreen.open{
    top:0!important;
    bottom:0!important;
    height:100dvh!important;
  }
}

/* V130 : aucun pictogramme devant Sauvegarde et synchronisation. */
.settings-backup-info .backup-status-heading::before,
.settings-backup-info .backup-status-heading::after { content:none !important; display:none !important; }

/* V131 : galerie d'aperçus, indépendante des écrans validés */
.preview-entry{margin-top:16px;padding:16px;border:1px solid #d9e3d9;border-radius:13px;background:#f8faf6}.preview-entry p{font-size:13px;margin:7px 0 12px;color:var(--muted)}.preview-library-box{max-width:860px;max-height:88vh;overflow-y:auto}.preview-library-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.preview-library-head h3{margin:0 0 8px}.preview-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.preview-library-grid section{border:1px solid #dce5da;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}.preview-library-grid h4{margin:0 0 4px;color:var(--green)}.preview-library-grid button{white-space:normal;text-align:left;line-height:1.35;min-height:40px}.preview-library-head button{flex-shrink:0}@media(max-width:650px){.preview-library-grid{grid-template-columns:1fr}.preview-library-box{max-height:90dvh}.preview-library-head{align-items:flex-start}.preview-library-head button{font-size:12px}}

/* V132 — barre de navigation desktop entièrement visible devant les modales.
   La barre occupe 82px–140px ; les fenêtres commencent après sa bordure/ombre. */
@media (min-width:901px){
  .nav > a{
    align-items:center !important;
    justify-content:center !important;
    line-height:1.25 !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }
  .nav > a .ico{align-self:center !important;line-height:1 !important;vertical-align:middle !important;}
  .modal:not(.auth-fullscreen){top:150px !important;}
}

/* V133 — finition de la bordure inférieure du menu ordinateur.
   Le fond clair descend jusqu'au bord inférieur visible, même lorsque
   le voile d'une fenêtre est affiché. Aucun changement aux écrans mobiles. */
@media (min-width:901px){
  .nav{
    background:#FFFDF8 !important;
    border-bottom:0 !important;
    box-shadow:0 0 0 1px #FFFDF8, 0 5px 0 #FFFDF8 !important;
    overflow:visible !important;
  }
  .nav::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-6px;
    height:6px;
    background:#FFFDF8;
    pointer-events:none;
  }
}

/* V134 — le fond clair de la navigation rejoint exactement la ligne
   de séparation au-dessus du voile des fenêtres (mode ordinateur). */
@media (min-width:901px){
  .nav{box-shadow:0 0 0 1px #FFFDF8,0 14px 0 #FFFDF8 !important;}
  .nav::after{bottom:-15px !important;height:15px !important;background:#FFFDF8 !important;z-index:1 !important;}
}

/* V135 — Le voile des fenêtres ne commence qu'après le vrai bandeau clair.
   Sur l'affichage PC, conserver les 48px de fond non assombri situés
   sous le bord des boutons de navigation, sans déplacer la fenêtre. */
@media (min-width:901px){
  .modal:not(.auth-fullscreen){
    background:linear-gradient(to bottom, transparent 0, transparent 48px, rgba(18,37,33,.48) 48px, rgba(18,37,33,.48) 100%) !important;
  }
  /* Supprimer les rallonges artificielles V133/V134. */
  .nav{box-shadow:none !important;}
  .nav::after{content:none !important;display:none !important;}
}

/* V136 — Ajustement précis d'après comparaison des captures :
   réduire la zone transparente du voile (V135:48px) à 18px.
   La transition se place juste sous le bandeau clair, sans changer
   les dimensions ni la position de la fenêtre. */
@media (min-width:901px){
  .modal:not(.auth-fullscreen){
    background:linear-gradient(to bottom, transparent 0 18px, rgba(18,37,33,.48) 18px 100%) !important;
  }
}

/* V137 — alignement mesuré sur les captures : fin du bandeau clair.
   La transition du voile est placée 24px CSS après son origine desktop,
   sans toucher à la navigation ou au positionnement des fenêtres. */
@media (min-width:901px){
  .modal:not(.auth-fullscreen){
    background:linear-gradient(to bottom, transparent 0 24px, rgba(18,37,33,.48) 24px 100%) !important;
  }
}

/* V138 — Le bas réel de la navigation définit le départ du voile.
   Aucun décalage manuel : adapté au zoom et au mode ordinateur mobile. */
@media (min-width:901px){
  .modal:not(.auth-fullscreen){
    top:var(--vida-nav-bottom, 150px) !important;
    background:rgba(18,37,33,.48) !important;
  }
}

/* V139 — voile indépendant de toutes les fenêtres classiques, desktop.
   Il n'est plus dessiné par chaque fenêtre : la limite claire du bandeau
   reste identique pour tous les écrans et toutes les modales. */
@media (min-width:901px){
  body:has(.modal.open:not(.auth-fullscreen))::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1390;
    pointer-events:none;
    background:rgba(18,37,33,.48);
    clip-path:inset(var(--vida-protected-header-bottom, 160px) 0 0 0);
  }
  .modal:not(.auth-fullscreen){
    background:transparent !important;
    top:var(--vida-nav-bottom,150px) !important;
  }
}

/* V140 : le voile commence exactement au bord supérieur du sélecteur cheval,
   qui marque la fin du bandeau clair en mode ordinateur. */
@media(min-width:901px){
 body:has(.modal.open:not(.auth-fullscreen))::before{clip-path:inset(var(--vida-protected-header-bottom, 160px) 0 0 0)!important;}
}

/* V141 : limite exacte du bandeau de navigation, sans référence au sélecteur cheval. */
@media(min-width:901px){body:has(.modal.open:not(.auth-fullscreen))::before{clip-path:inset(var(--vida-nav-bottom,150px) 0 0 0)!important;}}

/* V142 — micro-ajustement optionnel : +1 px CSS (≈2 px sur la capture)
   uniquement sur la limite du voile, sans déplacer les fenêtres. */
@media (min-width:901px){
  body:has(.modal.open:not(.auth-fullscreen))::before{
    clip-path:inset(calc(var(--vida-nav-bottom,150px) + 1px) 0 0 0)!important;
  }
}

/* V143 — bandeau desktop uniforme : même crème sur toute la hauteur
   du menu, sans modifier sa taille, sa position ni le voile des modales. */
@media (min-width:901px){
  body:not(:has(.auth-fullscreen.open)){
    background:linear-gradient(to bottom,
      #FFFDF8 0,
      #FFFDF8 calc(var(--vida-nav-bottom, 150px) + 1px),
      #FBF8F1 100%) !important;
  }
  .nav{background:#FFFDF8 !important;}
}

/* V144 — Formulaire de changement de mot de passe : espacement mobile lisible.
   Styles limités à cette fenêtre, sans toucher aux autres formulaires. */
#accountPasswordPreviewModal .modalbox > p.meta {
  margin: 0 0 24px;
  line-height: 1.5;
}
#accountPasswordPreviewModal .modalbox > .field {
  gap: 8px;
}
#accountPasswordPreviewModal .modalbox > .field + .field {
  margin-top: 20px;
}
#accountPasswordPreviewModal .modalbox > .actions {
  margin-top: 28px;
}

/* V145 — Sur ordinateur, le changement de mot de passe doit passer devant
   la fenêtre Paramètres restée ouverte (z-index 6000).
   Aucun changement du comportement ni de l'affichage sur mobile. */
@media (min-width:901px){
  #accountPasswordPreviewModal.open{
    z-index:6500 !important;
  }
  #accountPasswordPreviewModal.open > .modalbox{
    position:relative !important;
    z-index:6501 !important;
  }
}


/* V149 — Mise en page plus naturelle du bouton de suppression du cheval.
   Le bouton dangereux retrouve un alignement cohérent dans la colonne,
   tout en restant nettement séparé des actions Annuler / Enregistrer. */
#horseEditModal #horseEditDangerActions{
  padding-bottom:34px;
  border-bottom:1px solid #e0e2dc;
}
#horseEditModal #horseEditDangerActions .btn.danger{
  width:100%;
  min-width:0;
  max-width:none;
  align-self:stretch;
  padding-inline:20px;
  margin-top:4px;
}
#horseEditModal #horseEditDangerActions:not([hidden]) + .actions{
  margin-top:22px;
}


/* V150 — Historique détaillé, recherche des soins et des check-lists. */
.vida-search-field{display:flex;flex-direction:column;gap:7px;margin:15px 0 18px}
.vida-search-field label{font-weight:750;color:var(--ink);font-size:13px}
.vida-search-field input{width:100%;box-sizing:border-box;min-height:44px;border-radius:13px;border:1px solid var(--line);background:#fffdfb;color:var(--ink);padding:11px 13px;font:inherit}
.vida-search-field input:focus{outline:2px solid #9eb9a4;outline-offset:1px}
.vida-search-field small{color:var(--muted);font-size:12px;line-height:1.4}
/* V190 — Effacer la recherche des check-lists, sans toucher aux tâches. */
#checks .check-search-row{display:flex;align-items:center;gap:8px;min-width:0}
#checks .check-search-row input{flex:1 1 auto;min-width:0;width:auto}
#checks .check-search-clear{flex:0 0 auto;min-height:44px;white-space:nowrap;padding:10px 14px}

.check-found-task{color:var(--green)!important;font-weight:650;overflow-wrap:anywhere}
#checks .check-task-match{border-color:#a7c4ae;background:#f3f8f1}
#care .care-search-box{margin:5px 0 18px;max-width:620px}
.care-reason-inline{font-size:13px;color:var(--ink);margin-top:7px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
#care .care-history-card{margin:0 0 16px;background:#fffdfb}
.care-history-head{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:17px}
.care-history-head h3{font-family:Georgia,'Times New Roman',serif;font-size:27px;font-weight:500;color:var(--green);margin:4px 0 6px}
.care-history-head p{margin:0;line-height:1.5}
.care-history-count{background:#e5eee4;color:#4b705d;white-space:nowrap;border-radius:30px;padding:7px 12px;font-weight:700;font-size:12px}
.care-history-list{display:flex;flex-direction:column;gap:11px}
.care-history-entry{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fbfaf6;border:1px solid #dee5dc;border-radius:16px;padding:14px 16px}
.care-history-entry-main{min-width:0;flex:1}
.care-history-date{font-size:12px;font-weight:800;color:#678573;margin-bottom:4px}
.care-history-entry strong{display:block;color:var(--green);font-size:16px;margin-bottom:4px}
.care-history-summary{font-size:13px;color:var(--ink);line-height:1.5;margin-top:8px;white-space:pre-line;overflow-wrap:anywhere}
.care-history-entry .btn{flex:none}
.care-legacy-hint{display:block;color:#8b725c;margin-top:6px;line-height:1.45}
.care-history-empty{background:#f7f9f5;color:var(--muted);padding:18px;border-radius:14px;line-height:1.55}
#careCompleteModal .gear-complete-card{max-height:calc(100dvh - 40px);overflow-y:auto!important}
#careCompleteModal .gear-complete-content{max-height:none}
#careCompleteModal .care-complete-fields{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
#careCompleteModal .care-complete-fields .field{margin:0;min-width:0}
#careCompleteModal .care-complete-fields textarea,#careCompleteModal .care-complete-fields select{width:100%;box-sizing:border-box}
#careCompleteModal .gear-complete-date{margin:0}
#careCompleteModal .field-optional{font-size:12px;color:var(--muted);font-weight:400}
#careHistoryModal .care-history-modalbox{max-width:600px;max-height:calc(100dvh - 36px);overflow-y:auto}
#careHistoryModal .care-history-modal-head h3{margin:5px 0 8px}
#careHistoryModal .care-history-edit-form{margin:20px 0 0}
#careHistoryModal .care-history-edit-form textarea{resize:vertical}
@media(max-width:620px){
  .care-history-head{flex-wrap:wrap}
  .care-history-entry{align-items:stretch;flex-direction:column;gap:12px}
  .care-history-entry .care-history-view{align-self:flex-start}
  #careCompleteModal .gear-complete-card{max-height:calc(100dvh - 24px)}
  #careCompleteModal .gear-complete-content{padding:18px}
}


/* V151 — Recherche simple par nom/date et vue du mois (soins à venir + historique). */
#care .care-search-controls{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-top:12px}
#care .care-search-controls .vida-search-field{margin:0;gap:7px}
#care .care-search-box{flex:1 1 270px;max-width:none}
#care .care-month-box{flex:0 1 178px;min-width:158px}
#care .care-search-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#care .care-search-buttons .btn{min-height:44px;white-space:nowrap}
#care .care-search-hint{color:var(--muted);font-size:12px;margin:10px 0 18px;line-height:1.5}
#care .care-upcoming-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#care .care-upcoming-heading h4{margin:0;color:var(--green);font-size:17px;font-weight:700}
#care .care-upcoming-count{color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}
@media(max-width:620px){
 #care .care-search-controls{gap:12px}
 #care .care-search-box{flex-basis:100%}
 #care .care-month-box{flex:1 1 160px}
 #care .care-search-buttons{flex:0 0 auto;gap:8px}
 #care .care-search-buttons .btn{flex:0 0 auto}
}

#care .care-forecast-note{display:block;margin-top:5px;font-size:12px;color:#678573;font-weight:650}
#care .care-reminder-row .row-actions:empty{display:none}

/* V154 — « Fiche de garde » apparaît dès l'édition des consignes. */
#care .care-sheet-form-eyebrow{margin-bottom:8px}

/* V156 — Actions de sauvegarde complètes, adaptées aux petits écrans. */
.vida-backup-actions{display:flex;flex-wrap:wrap;gap:10px;margin:13px 0 6px}
.vida-backup-actions .btn{min-height:44px;white-space:normal}
.vida-backup-help{line-height:1.5;margin:0 0 16px}
@media(max-width:520px){.vida-backup-actions{flex-direction:column}.vida-backup-actions .btn{width:100%}}

/* V158 — Présentation sobre du futur fonctionnement synchronisé ; le statut
   de la préversion reste exact tant que la synchronisation est inactive. */
#settingsModal .settings-backup-info{margin-top:12px!important;margin-bottom:14px}
#settingsModal .settings-backup-info .backup-caution{margin-top:12px;font-size:12px}

/* V162 — Historique du budget : lisible sur mobile comme sur ordinateur. */
#expensePaymentHistoryModal.open{z-index:6400!important}
#expensePaymentEditModal.open{z-index:6600!important}
.expense-payment-history-box{max-width:600px!important}
.expense-payment-edit-box{max-width:480px!important}
.expense-payment-history-last{margin:12px 0 14px;padding:10px 12px;border-radius:12px;background:#ecf4ed;color:#466956;font-weight:700;font-size:13px;line-height:1.5}
.expense-payment-history-list{display:flex;flex-direction:column;gap:0;max-height:min(55vh,470px);overflow-y:auto;overflow-x:hidden;margin:8px 0;padding-right:3px}
.expense-payment-history-row{padding:13px 0;border-bottom:1px solid #e0e5dd;display:flex;align-items:center;justify-content:space-between;gap:14px}
.expense-payment-history-info{min-width:0;display:flex;flex-direction:column;gap:5px;line-height:1.45}
.expense-payment-history-info strong{font-size:13px;color:var(--text)}
.expense-payment-history-info span{font-size:12px;color:var(--muted)}
.expense-payment-history-actions{display:flex;flex-shrink:0;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.expense-payment-history-actions .btn{font-size:12px;min-height:35px;padding:8px 12px;white-space:normal}
.expense-history-open-btn{white-space:nowrap}
.expense-payment-edit-box .field{margin:17px 0}
.expense-payment-edit-box .field label{display:block;margin-bottom:8px}
@media(max-width:620px){
 .expense-payment-history-box,.expense-payment-edit-box{width:100%;max-width:100%!important}
 .expense-payment-history-row{flex-direction:column;align-items:stretch;gap:10px}
 .expense-payment-history-actions{justify-content:flex-start}
 .expense-payment-history-actions .btn{flex:1 1 auto}
 .expense-payment-history-list{max-height:min(50dvh,440px)}
}

/* La liste de dates de confirmation reste accessible même pour de nombreuses échéances. */
#confirmModal #confirmDetails{max-height:min(32dvh,260px);overflow-y:auto;overflow-x:hidden;line-height:1.6;text-align:left}


/* V163 — Retards Budget : même signalement doux que les soins en retard.
   Aucun changement des échéances ou de la logique des paiements. */
#budget #expenseList .expense-row.expense-row-overdue {
  border-color:#e7c3bb !important;
  background:#fff9f7 !important;
}
#budget #expenseList .expense-row.expense-row-overdue .expense-due {
  color:#a45a57 !important;
  font-weight:700 !important;
}

/* V166 — Trois filtres Budget sur une seule ligne, sur ordinateur et mobile.
   Styles limités à la barre des filtres de fréquence des dépenses. */
#expenseFilterToolbar {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
#expenseFilterToolbar .btn {
  min-width:0;
  width:100%;
  white-space:nowrap;
  padding-inline:6px;
}
/* V167 — Libellés Budget plus lisibles sur smartphone, sur une seule ligne.
   Ajuster uniquement la typographie et les espacements des trois filtres. */
@media(max-width:620px){
  #expenseFilterToolbar{gap:6px;}
  #expenseFilterToolbar .btn{
    font-size:clamp(12px,3.65vw,14px);
    padding-inline:2px;
    letter-spacing:-0.12px;
  }
}

/* V172 — Indication discrète pour un achat/soin déjà présent dans Budget. */
.budget-price-group .budget-linked-status{color:var(--green, #5f806e);font-weight:650;line-height:1.4;padding:3px 0;}

/* V172 — La confirmation de restauration doit rester au premier plan sur PC
   comme sur mobile, même si une fenêtre Paramètres était auparavant ouverte. */
#feedbackModal.open{z-index:7600!important}
#feedbackModal.open > .modalbox{z-index:7601!important}

/* V173 — Attribution obligatoire : choisir ses chevaux ou tous les chevaux. */
#gearModal #gearHorseAssignmentField .gear-assignment-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:4px 0 10px;
}
#gearModal .gear-assignment-option{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-weight:650;
  cursor:pointer;
}
#gearModal .gear-assignment-option input{
  accent-color:var(--green);
  flex:0 0 auto;
}
#gearModal .gear-assignment-option:has(input:checked){
  background:#e4eee5;
  border-color:#94b09d;
  color:#416c57;
}
#gearModal #gearHorsePicker[hidden]{display:none!important}
@media(max-width:540px){
  #gearModal #gearHorseAssignmentField .gear-assignment-options{grid-template-columns:1fr;gap:8px}
}

/* V179 — Répartition sur 90 jours : deux légendes discrètes, sans agrandir la carte. */
#budget .budget-split-kpi .budget-split-values .sub{
  font-size:13px;
  line-height:1.1;
  font-weight:400;
  color:var(--muted);
  white-space:nowrap;
}


/* V181 — Un seul contexte de cheval et filtres toujours accessibles.
   Les champs conservent une hauteur confortable (au moins 44 px).
   Sur mobile courant : deux lignes Budget (recherche/catégorie, fréquence/effacer).
   À 320 px, garder des cibles cliquables reste prioritaire sur le nombre de lignes. */
#gear .gear-mode{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 16px}
#gear .gear-mode button{min-width:0;min-height:46px;white-space:normal;line-height:1.25}
#budget .budget-visible-filters{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}
#gear .gear-visible-filters{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:center}
#budget .budget-visible-filters .searchbox,
#budget .budget-visible-filters .filter-select,
#gear .gear-visible-filters .searchbox,
#gear .gear-visible-filters .filter-select {min-width:0;min-height:46px;font-size:14px}
#budget .budget-visible-filters .filter-select,
#gear .gear-visible-filters .filter-select {text-overflow:ellipsis;padding-inline:9px}
#expenseFilterToolbar {grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px}
#expenseFilterToolbar .btn {min-height:44px}
#budget .visible-filter-reset,
#gear .visible-filter-reset {min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:7px 11px;white-space:nowrap}
.visible-filter-reset span[aria-hidden]{font-size:19px;line-height:1}
.visible-filter-reset-text{font-size:13px}
@media(max-width:760px){
  #budget .budget-visible-filters{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important;gap:8px}
  #gear .gear-visible-filters{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto!important;gap:6px}
  #expenseFilterToolbar{grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:5px}
  #expenseFilterToolbar .btn {min-height:46px;padding-inline:4px;font-size:clamp(12px,3.4vw,14px);letter-spacing:0}
  #budget .visible-filter-reset{padding:5px 7px}
  #gear .visible-filter-reset{padding:5px 8px}
  .visible-filter-reset-text{font-size:12px}
  #budget .budget-visible-filters .searchbox,#gear .gear-visible-filters .searchbox{padding-inline:9px}
  #budget .budget-visible-filters .filter-select,#gear .gear-visible-filters .filter-select{font-size:13px;padding-inline:5px}
}
@media(max-width:350px){
  #expenseFilterToolbar .btn{font-size:12px}
  .visible-filter-reset-text{display:none}
  #budget .visible-filter-reset,#gear .visible-filter-reset{width:44px;min-width:44px}
}

/* V181 — Ajustements finaux : pas de boutons de fréquence comprimés. */
#budget .budget-visible-filters{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto}
#expenseFilterToolbar{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#gear .gear-visible-filters{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto}
@media(max-width:760px){
  #budget .budget-visible-filters{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 44px!important;gap:7px}
  #budget .visible-filter-reset{padding:5px;min-width:44px;width:44px}
  #budget .visible-filter-reset-text{display:none}
  #expenseFilterToolbar{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  #expenseFilterToolbar .btn{font-size:clamp(12px,3.45vw,14px);padding-inline:5px}
  #gear .gear-visible-filters{grid-template-columns:minmax(0,1fr) auto!important;row-gap:8px;column-gap:8px}
  #gear .gear-visible-filters .searchbox{grid-column:1/-1}
  #gear .gear-visible-filters .filter-select{grid-column:1;min-height:46px;font-size:14px;padding-inline:11px}
  #gear .gear-visible-filters .visible-filter-reset{grid-column:2;min-width:76px}
  #gear .gear-visible-filters .visible-filter-reset-text{display:inline}
}


/* V182 — Terminologie des paiements ponctuels dans app.js ; filtres compacts
   et toujours lisibles. Le mode Matériel reprend exactement le comportement
   de largeur du commutateur Budget, sans ajout de pictogramme. */
#gear .gear-mode{
  width:auto;
  display:inline-flex;
  grid-template-columns:none;
  margin-bottom:16px;
}
#gear .gear-mode button{
  min-height:0;
  white-space:normal;
  line-height:normal;
}
#budget .budget-visible-filters,
#gear .gear-visible-filters{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
#budget .budget-visible-filters .searchbox,
#gear .gear-visible-filters .searchbox,
#budget .budget-visible-filters .filter-select,
#gear .gear-visible-filters .filter-select{
  min-width:0;
  min-height:46px;
  font-size:15px;
  padding-inline:10px;
}
#budget .budget-visible-filters .filter-select,
#gear .gear-visible-filters .filter-select {text-overflow:ellipsis;}
#budget .visible-filter-reset,
#gear .visible-filter-reset{
  width:auto;
  min-width:76px;
  min-height:46px;
  padding:8px 13px;
  gap:0;
  grid-column:auto;
}
#budget .visible-filter-reset .visible-filter-reset-text,
#gear .visible-filter-reset .visible-filter-reset-text{
  display:inline;
  font-size:14px;
  font-weight:650;
}
@media(max-width:760px){
  #gear .gear-mode{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #gear .gear-mode button{min-width:0;min-height:46px;}
  #budget .budget-visible-filters,
  #gear .gear-visible-filters{
    grid-template-columns:minmax(0,1.02fr) minmax(0,1.08fr) 78px!important;
    gap:6px;
  }
  #budget .budget-visible-filters .searchbox,
  #gear .gear-visible-filters .searchbox{
    grid-column:auto;
    padding-inline:9px;
    font-size:15px;
  }
  #budget .budget-visible-filters .filter-select,
  #gear .gear-visible-filters .filter-select{
    grid-column:auto;
    min-height:46px;
    font-size:14px;
    padding-inline:7px;
  }
  #budget .visible-filter-reset,
  #gear .visible-filter-reset{
    grid-column:auto;
    width:auto;
    min-width:0;
    padding:7px 5px;
  }
  #budget .visible-filter-reset .visible-filter-reset-text,
  #gear .visible-filter-reset .visible-filter-reset-text{
    display:inline;
    font-size:14px;
  }
  #expenseFilterToolbar .btn{font-size:clamp(12px,3.65vw,15px)}
}
@media(max-width:365px){
  /* Sur très petit téléphone, on privilégie des textes complets et des
     zones tactiles confortables plutôt qu'une ligne trop serrée. */
  #budget .budget-visible-filters,
  #gear .gear-visible-filters{
    grid-template-columns:minmax(0,1fr) 86px!important;
    row-gap:7px;
    column-gap:7px;
  }
  #budget .budget-visible-filters .searchbox,
  #gear .gear-visible-filters .searchbox{grid-column:1/-1;}
  #budget .budget-visible-filters .filter-select,
  #gear .gear-visible-filters .filter-select{grid-column:1;}
  #budget .visible-filter-reset,
  #gear .visible-filter-reset{grid-column:2;}
}

/* V182 — Verrouiller la même ligne pour les trois contrôles de Matériel.
   Les styles hérités de V181 plaçait encore Effacer en colonne 2. */
@media(min-width:366px) and (max-width:760px){
  #budget .budget-visible-filters,
  #gear .gear-visible-filters{
    grid-template-columns:minmax(0,1.13fr) minmax(0,1fr) 76px!important;
  }
  #gear .gear-visible-filters>.searchbox{grid-column:1;grid-row:1;}
  #gear .gear-visible-filters>.filter-select{grid-column:2;grid-row:1;}
  #gear .gear-visible-filters>.visible-filter-reset{grid-column:3;grid-row:1;}
}
@media(max-width:365px){
  #gear .gear-visible-filters>.searchbox{grid-column:1/-1;grid-row:1;}
  #gear .gear-visible-filters>.filter-select{grid-column:1;grid-row:2;}
  #gear .gear-visible-filters>.visible-filter-reset{grid-column:2;grid-row:2;}
}

/* V184 — Matériel : mêmes dimensions que le sélecteur Budget, sans
   hauteur spécifique; boîte discrète à côté du mode global. */
#gear > .gear-mode {
  display:inline-flex;
  width:auto;
  grid-template-columns:none;
  margin-bottom:16px;
}
#gear > .gear-mode button {
  min-width:0;
  min-height:0;
  padding:9px 13px;
  line-height:normal;
  white-space:normal;
}
#gear .gear-package-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:5px;
  color:currentColor;
  line-height:1;
  vertical-align:middle;
}
#gear .gear-package-mark svg {
  display:block;
  width:16px;
  height:16px;
  flex-shrink:0;
}
@media (max-width:620px) {
  #gear > .gear-mode {
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

/* V185 — Alignement vertical du pictogramme avec « Matériel global ».
   Aucun changement de dimensions du sélecteur, ni de comportement. */
#gear #gearModeGlobal {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#gear #gearModeGlobal .gear-package-mark {
  margin-left:8.5px;
  vertical-align:baseline;
}

/* V186 — Les soins et les dépenses réellement en retard ressortent en rose pâle. */
.notice-item.overdue{border-color:#e7c3bb;background:#fff9f7}
.notice-item.overdue .notice-icon{background:#fbe9e6;color:#a45a57}
.notice-item.overdue .notice-content strong{color:#794540}
.notice-item.overdue .notice-content > small{color:#a45a57}

/* V188 : aucun cheval déverrouillé automatiquement après suppression du cheval Gratuit. */
.free-horse-vacancy[hidden]{display:none!important}
.free-horse-vacancy{
 position:fixed;inset:0;z-index:7600;display:flex;align-items:center;justify-content:center;
 padding:24px;overflow-y:auto;background:linear-gradient(155deg,#f6f1e8,#fdfbf6);
}
.free-horse-vacancy-card{
 width:min(540px,100%);background:#fffdfa;border:1px solid #ddd9cc;border-radius:25px;
 padding:clamp(24px,5vw,40px);text-align:center;box-shadow:0 20px 55px rgba(33,53,44,.12);
}
.free-horse-vacancy-card .eyebrow{color:#759485;letter-spacing:.14em;font-size:12px;font-weight:700}
.free-horse-vacancy-card h2{font:400 clamp(27px,5vw,36px)/1.15 Georgia,serif;color:#587c6b;margin:14px 0}
.free-horse-vacancy-card p{line-height:1.6;margin:10px auto;max-width:390px}
.free-horse-vacancy-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.free-horse-vacancy-settings{border:0;background:none;color:#668678;text-decoration:underline;padding:12px;margin-top:12px;cursor:pointer;font:inherit}
body.free-horse-vacant .modal.open{z-index:7700!important}
body.free-horse-vacant #confirmModal.open{z-index:7800!important}
@media(max-width:520px){.free-horse-vacancy-actions .btn{width:100%}.free-horse-vacancy{padding:16px}}

/* V191 — Choix explicites lors du passage Gratuit, interface légère sur mobile. */
.free-plan-modal{max-width:650px;max-height:min(88vh,920px);overflow-y:auto}
.free-plan-modal h4{margin:18px 0 6px;color:var(--green)}
.free-plan-choices{display:flex;flex-direction:column;gap:9px;max-height:250px;overflow-y:auto;margin:10px 0;padding:2px 3px}
.free-plan-choice{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.free-plan-choice input{flex:0 0 auto;margin-top:4px;accent-color:var(--green)}
.free-plan-choice span{display:block;min-width:0;overflow-wrap:anywhere}
.free-plan-choice small{display:block;margin-top:4px;color:var(--muted,#6c7471);font-size:12px}
.free-plan-assignment{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px}
.free-plan-assignment label{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.free-plan-assignment input{accent-color:var(--green)}
.gear-to-assign[hidden]{display:none!important}
.gear-to-assign .row{flex-wrap:wrap;gap:10px}
.free-list-action{margin-top:4px;width:100%;font-size:12px;padding:8px}
@media(max-width:600px){.free-plan-modal{max-height:90vh}.free-plan-choices{max-height:220px}}

/* V193 — Matériel à attribuer : petit bloc, cartes compactes et réattribution en une étape. */
#gearToAssign.gear-to-assign{padding:18px 20px;}
.gear-assign-heading{font-family:Georgia,"Times New Roman",serif;color:var(--green);font-weight:500;font-size:23px;margin:0 0 13px;}
.gear-assign-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:9px;align-items:stretch;}
.gear-assign-tile{display:flex;align-items:center;justify-content:space-between;gap:7px;border:1px solid var(--line);background:#fffefa;border-radius:13px;padding:9px 10px;min-width:0;}
.gear-assign-tile-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.28;overflow-wrap:anywhere;}
.gear-assign-tile-info strong{font-size:14px;font-weight:700;color:var(--ink);}
.gear-assign-tile-info span{font-size:12px;color:var(--muted);}
#gearToAssign .gear-assign-fast-btn{flex:0 0 auto;min-width:0;padding:8px 6px;border-radius:11px;font-size:13px;line-height:1.2;white-space:nowrap;}
.quick-gear-modal{max-width:440px!important;}
.quick-gear-modal h3{margin:6px 0 7px;overflow-wrap:anywhere;}
.quick-gear-horse-choices{display:flex;flex-direction:column;gap:8px;margin:14px 0;max-height:40vh;overflow-y:auto;}
.quick-gear-horse-choices label{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#fffefa;cursor:pointer;font-size:14px;}
.quick-gear-horse-choices input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--green);}
.quick-gear-horse-all{font-weight:700;background:#f4f7f4!important;}
.quick-gear-footnote{font-size:12px;margin:4px 0;}
@media(max-width:600px){
 #gearToAssign.gear-to-assign{padding:15px 13px;}
 .gear-assign-heading{font-size:21px;margin-bottom:10px;}
 .gear-assign-grid{grid-template-columns:1fr;gap:7px;}
 .gear-assign-tile{padding:9px 10px;}
 #gearToAssign .gear-assign-fast-btn{font-size:13px;padding:9px 6px;}
 .quick-gear-modal{width:calc(100% - 30px)!important;}
}

/* V194 — Identification fiable sans agrandir inutilement les cartes. */
.gear-assign-identity-details{overflow-wrap:anywhere;}
.gear-assign-identity-purchase{display:flex;gap:4px 9px;flex-wrap:wrap;justify-content:space-between;align-items:baseline;}
#quickGearAssignModal .quick-gear-modal{display:flex;flex-direction:column;max-height:min(90dvh,760px);overflow:hidden;}
.quick-gear-fixed-header{flex:0 0 auto;min-width:0;}
.quick-gear-modal .quick-gear-identity{display:flex;flex-direction:column;gap:5px;min-width:0;padding:11px 12px;background:#f6f2ea;border:1px solid var(--line);border-radius:13px;line-height:1.35;}
.quick-gear-identity strong{color:var(--ink);font-size:15px;overflow-wrap:anywhere;}
.quick-gear-identity .gear-assign-identity-details{font-size:12px;color:var(--muted);}
.quick-gear-identity .gear-assign-identity-purchase{font-size:12px;color:var(--ink);}
.quick-gear-modal-content{flex:1 1 auto;min-height:0;overflow-y:auto;padding:13px 2px 4px;}
.quick-gear-step-title{font-size:14px;font-weight:700;color:var(--ink);}
#quickGearAssignModal .quick-gear-horse-choices{max-height:none;overflow:visible;margin:10px 0 14px;}
.quick-gear-keep{border:0;border-top:1px solid var(--line);margin:4px 0 0;padding:13px 0 0;min-width:0;}
.quick-gear-keep[hidden]{display:none!important;}
.quick-gear-keep legend{float:left;display:block;width:100%;padding:0 0 7px;font-weight:700;color:var(--ink);font-size:14px;line-height:1.35;}
.quick-gear-keep label{display:flex;align-items:center;gap:9px;padding:7px 3px;cursor:pointer;font-size:14px;}
.quick-gear-keep input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--green);}
.quick-gear-modal-actions{flex:0 0 auto;margin-top:9px!important;padding-top:11px;border-top:1px solid var(--line);}
@media(max-width:600px){#quickGearAssignModal .quick-gear-modal{max-height:calc(100dvh - 28px);} .quick-gear-identity{padding:10px!important;}}

/* V195 · Les trois actions de l'aperçu de la fiche de garde tiennent sur une ligne. */
#carePreviewModal .care-preview-actions{
 display:grid!important;
 grid-template-columns:minmax(0,.75fr) minmax(0,1fr) minmax(0,1.48fr);
 gap:7px!important;
 align-items:stretch;
 width:100%;
}
#carePreviewModal .care-preview-actions .btn{
 min-width:0!important;
 width:100%;
 padding:10px 7px!important;
 font-size:12px!important;
 line-height:1.2!important;
 white-space:nowrap;
 text-align:center;
}
@media(max-width:420px){
 #carePreviewModal .care-preview-actions{gap:5px!important}
 #carePreviewModal .care-preview-actions .btn{font-size:11px!important;padding:9px 3px!important}
}

/* V199 · Export PDF avec sélection simple, sans modifier le classeur Excel. */
#pdfExportOptions[hidden],#exportFormatsChoices[hidden],#pdfExportOptions [hidden]{display:none!important}
#pdfExportOptions{display:flex;flex-direction:column;gap:12px;margin-top:12px}
#pdfExportOptions .pdf-export-field{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:700;color:#41574C}
#pdfExportOptions select,#pdfExportOptions input[type="date"]{box-sizing:border-box;width:100%;min-width:0;border:1px solid #d7dfd7;border-radius:11px;background:#fffefa;color:#35473E;padding:10px 12px;font-size:15px;min-height:43px}
#pdfExportOptions .pdf-export-nested{display:flex;flex-direction:column;gap:5px;margin-top:6px;color:#5e6c62;font-size:13px}
#pdfExportOptions .pdf-export-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
#pdfExportOptions .pdf-export-dates label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#5e6c62}
#pdfExportOptions .meta{margin:2px 0!important;font-weight:400}
#pdfExportOptions .pdf-export-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:8px}
#pdfExportOptions .pdf-export-actions button{min-height:44px}
/* Sur ordinateur, rapprocher le prix de la date. Aucun changement sur mobile. */
@media(min-width:701px){
 #gearToAssign .gear-assign-identity-purchase{justify-content:flex-start;column-gap:12px;row-gap:4px}
}

/* V200 — Sur ordinateur : date à gauche, prix décalé et bouton légèrement rapproché.
   Aucun changement des dimensions ou de la disposition sur mobile. */
@media (min-width:901px){
 #gearToAssign .gear-assign-tile{gap:11px;}
 #gearToAssign .gear-assign-identity-purchase{
   display:flex;justify-content:space-between;align-items:baseline;
   gap:14px 22px;flex-wrap:wrap;
 }
 #gearToAssign .gear-assign-fast-btn{margin-right:10px;}
}

/* V201 — Attribution groupée claire, détails dépliables seulement à la demande. */
.free-plan-global{border:0;padding:0;margin:14px 0 8px;display:flex;flex-direction:column;gap:10px;min-width:0}
.free-plan-global label{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:#fffefa;cursor:pointer;font-size:15px;line-height:1.45}
.free-plan-global input{flex-shrink:0;accent-color:var(--green);margin-top:4px;width:17px;height:17px}
.free-plan-customize-toggle{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:10px 5px;border:0;background:none;color:var(--green);font:inherit;font-size:15px;font-weight:650;cursor:pointer}
.free-plan-customize-toggle span{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;background:#e6eee8;font-size:22px;line-height:1}
.free-plan-custom-summary:empty{display:none}
.free-plan-custom-list{max-height:280px}
.free-plan-custom-list[hidden]{display:none!important}
.free-plan-assignment-check{display:flex;align-items:flex-start;flex-direction:row;gap:12px;cursor:pointer;background:#fffefa}
.free-plan-assignment-check input{flex:0 0 auto;width:17px;height:17px;margin-top:3px;accent-color:var(--green)}
.free-plan-assignment-check span{display:block;min-width:0;overflow-wrap:anywhere}
.free-plan-assignment-check small{display:block;margin-top:4px;font-size:12px;color:var(--muted,#6c7471)}
@media(max-width:600px){.free-plan-custom-list{max-height:240px}}

/* V204 — Chevron centré indépendamment de la police Android. */
.free-plan-customize-toggle .free-plan-customize-icon{display:inline-flex;flex:0 0 23px;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;background:#e6eee8}
.free-plan-customize-toggle .free-plan-customize-icon::after{content:"";display:block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateX(-1px) rotate(-45deg)}
.free-plan-customize-toggle[aria-expanded="true"] .free-plan-customize-icon::after{transform:translateY(-1px) rotate(45deg)}

/* V208 — Slogan harmonisé partout en gris #59635B : en-tête principal,
   pages d'inscription, connexion et récupération/confirmation de compte,
   sur ordinateur et mobile, sans changer tailles ni polices. */
.topbar .brand small,
.modal.auth-fullscreen .auth-welcome-tagline,
.modal.auth-fullscreen .auth-page-tagline{color:#59635B !important;}


/* V210 — Signature Vida Paddock : italique affirmé (poids 700),
   même police et mêmes couleurs partout où le nom est un élément de marque.
   Les autres titres, textes courants et le slogan restent inchangés. */
:root{
  --vida-brand-font:Georgia,"Times New Roman",serif;
  --vida-brand-weight:700;
}
.topbar .brand h1,
.modal.auth-fullscreen .auth-page-name,
.modal.auth-fullscreen .auth-welcome-name,
.vida-wordmark{
  font-family:var(--vida-brand-font) !important;
  font-style:italic !important;
  font-weight:var(--vida-brand-weight) !important;
}
/* La totalité des titres « Bienvenue sur Vida Paddock » reçoit l'italique. */
.modal.auth-fullscreen .auth-desktop-greeting,
.modal.auth-fullscreen .auth-welcome-greeting,
.vida-branded-welcome,
#previewNoticeTitle.vida-branded-welcome{
  font-family:var(--vida-brand-font) !important;
  font-style:italic !important;
  font-weight:var(--vida-brand-weight) !important;
}
/* Les deux couleurs de la signature, y compris dans la phrase d'accueil. */
.vida-name-vida{color:#547767 !important;}
.vida-name-paddock{color:#B18160 !important;}
.topbar .brand h1 .brand-vida{color:#4E6B5C !important;}
.topbar .brand h1 .brand-paddock{color:var(--copper) !important;}
.vida-greeting-wave{font-style:normal;}
#onboardingModal .vida-branded-welcome{
  font-size:16px;letter-spacing:normal;text-transform:none;
}


/* V211 — identité harmonisée. Uniquement les textes de marque et les écrans de compte. */
:root{--vida-identity-green:#547767;--vida-identity-copper:#B18160;}
.topbar .brand h1 .brand-vida,
.vida-name-vida,
.modal.auth-fullscreen .auth-welcome-name span,
.modal.auth-fullscreen .auth-page-name span,
.modal.auth-fullscreen .auth-greeting-vida{color:var(--vida-identity-green)!important;}
.topbar .brand h1 .brand-paddock,
.vida-name-paddock,
.modal.auth-fullscreen .auth-welcome-name,
.modal.auth-fullscreen .auth-page-name,
.modal.auth-fullscreen .auth-greeting-paddock{color:var(--vida-identity-copper)!important;}
/* « Bienvenue sur » est droit, non italique, dans le vert de Vida. */
.modal.auth-fullscreen .auth-desktop-greeting,
.modal.auth-fullscreen .auth-welcome-greeting,
.vida-branded-welcome,
#previewNoticeTitle.vida-branded-welcome{
  font-style:normal!important;
  font-weight:600!important;
  color:var(--vida-identity-green)!important;
}
.modal.auth-fullscreen .auth-desktop-greeting .auth-greeting-vida,
.modal.auth-fullscreen .auth-desktop-greeting .auth-greeting-paddock,
.modal.auth-fullscreen .auth-welcome-greeting .auth-greeting-vida,
.modal.auth-fullscreen .auth-welcome-greeting .auth-greeting-paddock,
.vida-branded-welcome .vida-name-vida,
.vida-branded-welcome .vida-name-paddock{
  font-family:var(--vida-brand-font)!important;
  font-weight:700!important;
  font-style:italic!important;
}
/* Même fond d'ensemble que le site principal; pas de nouvelle couleur. */
.modal.auth-fullscreen{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF8F1 100%)!important;
}
@media(min-width:900px){
  /* Bandeau des comptes ramené à la hauteur de la ligne de marque du site. */
  .modal.auth-fullscreen .auth-site-header{
    height:76px!important;
    padding:8px clamp(36px,6vw,110px)!important;
    background:#FBF8F1!important;
  }
  .modal.auth-fullscreen .auth-site-header img{width:56px!important;height:56px!important;}
  .modal.auth-fullscreen .auth-site-header .auth-welcome-name{font-size:30px!important;}
  .modal.auth-fullscreen .auth-site-header .auth-welcome-tagline{font-size:11px!important;}
  .modal.auth-fullscreen.open{padding-top:114px!important;}
  /* Hiérarchie : le titre émotionnel cesse de dominer le bienvenue. */
  .modal.auth-fullscreen .auth-welcome h2{font-size:clamp(35px,3.05vw,49px)!important;}
}
@media(max-width:899px){
  .modal.auth-fullscreen .auth-welcome h2{font-size:clamp(19px,4.6vw,24px)!important;}
  /* Le slogan cuivré conserve sa taille actuelle. */
}


/* V212 — fond plus chaleureux sur les pages d'inscription / connexion,
   et signature de bas de page en vert. */
.modal.auth-fullscreen{
  background:linear-gradient(180deg,#FBF8F1 0%,#F3EEE4 100%)!important;
}
@media(min-width:900px){
  .modal.auth-fullscreen .auth-site-header{
    background:#FBF8F1!important;
  }
}
/* Le mot-symbole du pied de page redevient entièrement vert. */
.footer-note .vida-wordmark .vida-name-vida,
.footer-note .vida-wordmark .vida-name-paddock{
  color:var(--vida-identity-green)!important;
}


/* V213 — pages Compte : bannière distincte du fond + footer sans italique. */
.modal.auth-fullscreen{
  background:linear-gradient(180deg,#FBF8F1 0%,#F2ECE1 100%)!important;
}
@media(min-width:900px){
  .modal.auth-fullscreen .auth-site-header{
    background:#F6EFE3!important;
    border-bottom:1px solid rgba(177,129,96,.16)!important;
    box-shadow:0 8px 24px rgba(84,119,103,.05)!important;
  }
}
/* Le nom du site dans le footer redevient simple, droit et entièrement vert. */
.footer-note .vida-wordmark{
  font-style:normal!important;
  font-weight:600!important;
}
.footer-note .vida-wordmark .vida-name-vida,
.footer-note .vida-wordmark .vida-name-paddock{
  color:var(--vida-identity-green)!important;
  font-style:normal!important;
}


/* V214 — le logo et le nom du site servent de raccourci vers l’accueil.
   Même comportement dans l’application et les aperçus de compte.
   Les actions mobiles à côté du logo restent indépendantes. */
.topbar .brand .brand-home-link{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  max-width:100%;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.topbar .brand .brand-home-link > div:not(.mark){min-width:0}
.modal.auth-fullscreen .auth-site-header,
.modal.auth-fullscreen .auth-page-brand,
.modal.auth-fullscreen .auth-welcome-brand{
  text-decoration:none;
  cursor:pointer;
}
.topbar .brand .brand-home-link:focus-visible,
.modal.auth-fullscreen .auth-site-header:focus-visible,
.modal.auth-fullscreen .auth-page-brand:focus-visible,
.modal.auth-fullscreen .auth-welcome-brand:focus-visible{
  outline:2px solid var(--vida-identity-green,#547767);
  outline-offset:3px;
}
@media(max-width:900px){
  .topbar .brand .brand-home-link{gap:8px}
}
@media(max-width:430px){
  .topbar .brand .brand-home-link{gap:5px}
}


/* V215 — les logos des ecrans de compte sont uniquement decoratifs.
   La navigation via le logo de l'application reste active.
   Cette regle pourra etre revue apres activation de Supabase Auth. */
.modal.auth-fullscreen .auth-site-header,
.modal.auth-fullscreen .auth-page-brand,
.modal.auth-fullscreen .auth-welcome-brand{cursor:default!important;}


/* V217 — signature du pied de page sobre : vert, droit, graisse normale.
   Une seule règle pour les formats ordinateur et mobile. */
.footer-note .vida-wordmark,
.footer-note .vida-wordmark .vida-name-vida,
.footer-note .vida-wordmark .vida-name-paddock{
  font-style:normal!important;
  font-weight:400!important;
}

/* V218 — mentions secondaires de Vida Paddock, en vert uniforme.
   Le nom de marque dans les en-têtes et les titres de bienvenue garde
   sa signature vert/cuivre. Le pied de page reste droit, poids normal. */
.vida-wordmark .vida-name-vida,
.vida-wordmark .vida-name-paddock{
  color:var(--vida-identity-green,#547767)!important;
}


/* V219 — finition ciblée des bannières de compte sur ordinateur.
   Le site principal utilise --cream (#FBF8F1) pour son bandeau.
   La nuance entre bandeau et contenu est assurée par le dégradé
   déjà validé des écrans de compte, sans bordure ni ombre sous le bandeau. */
@media (min-width:900px){
  .modal.auth-fullscreen .auth-site-header{
    background:var(--cream)!important;
    border-bottom:0!important;
    box-shadow:none!important;
    gap:14px;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
  /* Même encadrement que .topbar .mark, sans modifier le logo mobile. */
  .modal.auth-fullscreen .auth-site-header img{
    width:62px!important;
    height:62px!important;
    flex:0 0 62px;
    display:block;
    object-fit:contain;
    object-position:center;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow-soft);
  }
}


/* V220 — seul le logo des cartes de connexion/inscription est arrondi
   en affichage mobile et tablette. Les tailles déjà validées restent
   intactes ; finition identique au bloc .mark de l'accueil. */
@media (max-width:899px){
  .modal.auth-fullscreen .auth-page-brand img{
    display:block;
    border-radius:18px;
    background:var(--paper);
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
  }
}
@media (max-width:620px){
  .modal.auth-fullscreen .auth-page-brand img{
    border-radius:16px;
  }
}


/* V221 — barre blanche de transition sur les écrans de compte.
   Elle reprend l'esprit visuel du menu principal, sans ajouter de navigation.
   Le texte est volontairement plus long pour occuper la largeur et guider
   l'utilisateur vers l'espace personnel. */
.auth-account-strip{display:none}
@media (min-width:900px){
  .modal.auth-fullscreen .auth-account-strip{
    position:fixed;
    top:76px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    width:min(1120px,calc(100% - 72px));
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 20px;
    border:1px solid var(--line);
    border-radius:0 0 24px 24px;
    background:rgba(255,253,252,.95);
    box-shadow:0 14px 36px rgba(79,103,91,.08);
    color:var(--muted);
    font-size:13px;
    font-weight:800;
    letter-spacing:.055em;
    text-transform:uppercase;
    text-align:center;
    line-height:1.35;
    backdrop-filter:blur(20px);
  }
  .modal.auth-fullscreen.open{padding-top:172px!important;}
}
@media (max-width:899px){
  .modal.auth-fullscreen .auth-account-strip{
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(100%,540px);
    margin:4px auto 14px;
    padding:11px 14px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,253,252,.96);
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    text-align:center;
    line-height:1.4;
    box-shadow:0 10px 24px rgba(79,103,91,.07);
  }
}
@media (max-width:620px){
  .modal.auth-fullscreen .auth-account-strip{
    font-size:10px;
    padding:10px 12px;
    margin:0 auto 12px;
  }
}


/* V223 — barre d’accès : texte moins dense et discret accent eucalyptus.
   Réutilise la couleur de marque déjà présente, sans modifier la barre blanche,
   le fond des pages, les tailles, ni la navigation. */
.modal.auth-fullscreen .auth-account-strip{
  font-weight:600;
}
.modal.auth-fullscreen .auth-account-strip-promise{
  color:var(--vida-identity-green,#547767);
}


/* V224 — micro-retouche de la barre d'espace personnel.
   Texte entièrement eucalyptus, graisse V223 conservée ;
   taille desktop légèrement agrandie, mobile inchangé. */
.modal.auth-fullscreen .auth-account-strip{
  color:var(--vida-identity-green,#547767);
  font-weight:600;
}
@media (min-width:900px){
  .modal.auth-fullscreen .auth-account-strip{
    font-size:14px;
  }
}


/* V225 — la barre de texte remplit uniquement le bandeau desktop.
   En affichage mobile/tablette (< 900px), on la retire entièrement,
   sans conserver d'emplacement ni modifier les styles du site principal. */
@media (max-width:899px){
  .modal.auth-fullscreen .auth-account-strip{
    display:none!important;
  }
}


/* V226 — aide publique « Adresse e-mail oubliée ? » dans l'écran de connexion.
   Ne donne aucun accès au compte et ne dépend pas de Supabase Auth. */
#loginPreviewModal .auth-forgot-email-help{
  margin:3px 0 8px;
  color:var(--ink,#3E4F47);
  font-size:14px;
  line-height:1.5;
}
#loginPreviewModal .auth-forgot-email-help summary{
  display:list-item;
  list-style:none;
  width:fit-content;
  max-width:100%;
  padding:5px 0;
  color:#547767;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
#loginPreviewModal .auth-forgot-email-help summary::-webkit-details-marker{display:none}
#loginPreviewModal .auth-forgot-email-help summary:focus-visible{
  outline:2px solid #547767;
  outline-offset:3px;
  border-radius:3px;
}
#loginPreviewModal .auth-forgot-email-help .auth-forgot-email-answer{
  margin:8px 0 10px;
  padding:12px 14px;
  background:#FBF8F1;
  border:1px solid var(--line,#E7E3DC);
  border-radius:14px;
}
#loginPreviewModal .auth-forgot-email-answer p{margin:0 0 9px}
#loginPreviewModal .auth-forgot-email-answer ul{margin:5px 0 10px;padding-left:20px}
#loginPreviewModal .auth-forgot-email-answer li + li{margin-top:5px}
#loginPreviewModal .auth-forgot-email-answer .auth-forgot-email-note{
  margin-bottom:0;
  color:#59635B;
  font-size:13px;
}


/* V227 — même taille pour les deux liens d’aide de connexion.
   Le texte déplié conserve sa taille discrète et lisible (14 px). */
#loginPreviewModal .auth-forgot-email-help summary{
  font-size:16px;
  line-height:normal;
}


/* V230 — prévisualisation des trois e-mails de compte (préversion uniquement).
   Déjà présents dans une section des tests des écrans, ils ne doivent pas
   être exposés aux futurs utilisateurs avant un contrôle d'accès réel. */
.vida-email-library-section > .meta{margin:0 0 4px;font-size:12px;line-height:1.45}
#vidaEmailPreviewModal .vida-email-preview-box{
  width:min(760px,100%);max-height:min(90vh,90dvh);overflow-y:auto;
  padding:clamp(14px,3vw,26px);background:#FBF8F1;
}
.vida-email-preview-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:15px}
.vida-email-preview-toolbar h3{margin:0 0 5px;color:#547767;font:600 24px/1.2 Georgia,'Times New Roman',serif}
.vida-email-preview-toolbar p{margin:0;color:#68756E;font-size:12px;line-height:1.5}
.vida-email-preview-toolbar button{flex:0 0 auto}
.vida-email-subject{padding:10px 14px;margin:0 0 12px;background:#FFFDFC;border:1px solid #E7E3DC;border-radius:12px;font-size:13px;color:#4F675B;font-weight:600;overflow-wrap:anywhere}
.vida-email-sheet{max-width:640px;margin:0 auto;background:#FFFDFC;border:1px solid #E7E3DC;border-radius:17px;overflow:hidden;box-shadow:0 10px 28px rgba(79,103,91,.07)}
.vida-email-sheet-header{display:flex;align-items:center;gap:12px;padding:18px 22px;background:#FBF8F1;border-bottom:1px solid #E7E3DC}
.vida-email-sheet-mark{width:52px;height:52px;flex:0 0 52px;overflow:hidden;border:1px solid #E7E3DC;border-radius:15px;background:#FFFDFC}
.vida-email-sheet-mark img{width:100%;height:100%;object-fit:contain;display:block}
.vida-email-sheet-brand{font:italic 700 25px/1 Georgia,'Times New Roman',serif;white-space:nowrap}
.vida-email-sheet-brand span{color:#547767}.vida-email-sheet-brand em{font-style:italic;color:#B18160}
.vida-email-sheet-slogan{font:500 10px/1.3 Inter,Manrope,system-ui,sans-serif;letter-spacing:.075em;color:#59635B;margin-top:5px}
.vida-email-sheet-body{padding:clamp(22px,5vw,34px);color:#3E4F47;font-size:15px;line-height:1.68}
.vida-email-sheet-body p{margin:0 0 18px;overflow-wrap:anywhere}
.vida-email-sheet-body .vida-email-greeting{font:600 clamp(22px,4vw,27px)/1.25 Georgia,'Times New Roman',serif;color:#547767;margin:0 0 22px}
.vida-email-action-wrap{text-align:center;margin:25px 0}
.vida-email-inert-button{display:inline-block;background:#547767;color:#FFFDFC;padding:13px 22px;border-radius:12px;font-weight:650;font-size:14px;line-height:1.4;max-width:100%;overflow-wrap:anywhere;cursor:default;box-shadow:0 4px 10px rgba(84,119,103,.12)}
.vida-email-sheet-body .vida-email-placeholder{font-size:13px;color:#547767;font-weight:600;overflow-wrap:anywhere;padding:9px 12px;background:#F4F7F3;border-radius:8px}
.vida-email-sheet-body .vida-email-farewell{margin-top:26px}
.vida-email-sheet-body .vida-email-signature{color:#547767;font-weight:650;margin:0}
@media(max-width:620px){
 #vidaEmailPreviewModal .vida-email-preview-box{padding:12px}
 .vida-email-preview-toolbar{flex-direction:column;gap:8px}
 .vida-email-preview-toolbar h3{font-size:21px}
 .vida-email-preview-toolbar button{align-self:flex-start}
 .vida-email-sheet-header{padding:14px;gap:10px}
 .vida-email-sheet-mark{width:44px;height:44px;flex-basis:44px;border-radius:13px}
 .vida-email-sheet-brand{font-size:22px}
 .vida-email-sheet-slogan{font-size:9px}
 .vida-email-sheet-body{font-size:14px;line-height:1.6;padding:20px 17px}
}
@media(max-width:620px){
  .vida-email-sheet-body .vida-email-greeting{font-size:21px;line-height:1.35}
}


/* V231 — rangement des brouillons d’e-mails, sans changement de la carte e-mail. */
.preview-library-grid > .vida-email-library-section{grid-column:1/-1}
.vida-email-library-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vida-email-library-group{display:flex;flex-direction:column;gap:7px;min-width:0}
.vida-email-library-group h5{margin:0 0 5px;font-size:13px;color:#547767;font-weight:700}
.vida-email-library-group > button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;font-size:13px}
.vida-email-library-group > button small{font-size:11px;color:#68756E;font-weight:500}
.vida-email-preview-context{margin:0 0 12px;padding:0 2px;color:#68756E;font-size:12px;line-height:1.45}
@media(max-width:700px){.vida-email-library-groups{grid-template-columns:1fr}}


/* V232 — accès à la future gestion Stripe depuis Mon abonnement.
   Styles limités à cette rubrique et à sa fenêtre d'aperçu. */
#settingsModal .vida-subscription-manage{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
#settingsModal .vida-subscription-manage-heading{margin:0 0 10px;font-weight:700;color:var(--vida-identity-green,#547767);font-size:14px}
#settingsModal .vida-subscription-manage-grid{display:grid;grid-template-columns:1fr;gap:8px}
#settingsModal .vida-subscription-manage-grid>.btn{width:100%;min-width:0;white-space:normal;text-align:left;line-height:1.3;min-height:42px;padding:10px 12px}
#settingsModal .vida-subscription-period-note{margin:11px 0 8px;line-height:1.5;font-size:13px;color:var(--ink)}
#settingsModal .vida-subscription-demo-note{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
#vidaSubscriptionPreviewModal .vida-subscription-preview-box{width:min(520px,100%)}
#vidaSubscriptionPreviewModal .vida-subscription-demo-warning{padding:12px 14px;background:#FBF8F1;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:13px;line-height:1.5}
#vidaSubscriptionPreviewModal .vida-subscription-preview-body p{color:var(--ink);font-size:14px;line-height:1.6;margin:12px 0}