:root {
--tb-vert:#31c56d;
--tb-vert-fonce:#1e9e53;
--tb-vert-doux:#e9f8f0;
--tb-ambre:#f0a63a;
--tb-ambre-doux:#fdf3e3;
--tb-rouge:#e5484d;
--tb-rouge-doux:#fdeceb;
--tb-critique:#c62f35;
--tb-fond:#f6f8f7;
--tb-blanc:#ffffff;
--tb-texte:#20302a;
--tb-texte2:#6d7d76;
--tb-ligne:#e7ece9;
--tb-ombre:0 2px 14px rgba(32,48,42,.07);
--tb-ressort:cubic-bezier(.32,.72,.25,1)
}

* { box-sizing:border-box }

html, body {
height:100%;
background:var(--tb-fond);
font-family:'Inter', system-ui, sans-serif;
color:var(--tb-texte);
margin:0
}

button { -webkit-tap-highlight-color:transparent }

button:active { transform:scale(.97) }

:focus-visible { outline:2px solid var(--tb-vert-fonce); outline-offset:2px }

.skip_lien {
position:absolute;
z-index:9000;
background:var(--tb-blanc);
border-radius:0 0 10px 0;
color:var(--tb-texte);
top:0;
left:0;
transform:translateY(-110%);
padding:10px 16px
}

.skip_lien:focus { transform:translateY(0) }

.app_frame {
position:relative;
display:flex;
flex-direction:column;
width:100%;
height:100dvh;
overflow:hidden;
background:var(--tb-fond)
}

.head_bar {
position:relative;
display:flex;
z-index:2200;
align-items:center;
gap:12px;
background:var(--tb-blanc);
border-bottom:1px solid var(--tb-ligne);
padding:12px 16px
}

.head_burger {
position:relative;
display:flex;
z-index:2400;
flex-direction:column;
justify-content:center;
gap:5px;
width:38px;
height:38px;
background:none;
border:none;
cursor:pointer;
padding:8px
}

.head_burger span {
display:block;
width:100%;
height:2.5px;
background:var(--tb-texte);
border-radius:2px;
transform-origin:center;
transition:transform .35s var(--tb-ressort), opacity .2s
}

.head_burger.ouvert span:nth-child(1) { transform:translateY(7.5px) rotate(45deg) }

.head_burger.ouvert span:nth-child(2) { opacity:0 }

.head_burger.ouvert span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg) }

.head_logo {
display:flex;
align-items:center;
gap:10px;
flex:1;
font-family:'Outfit', sans-serif;
font-size:16px;
font-weight:700
}

.head_logo img { border-radius:9px; object-fit:contain }

.head_logo b { color:var(--tb-vert-fonce); font-weight:700 }

.head_compteur { text-align:right }

.head_compteur strong {
display:block;
font-family:'Outfit', sans-serif;
font-size:15px;
font-weight:700;
color:var(--tb-vert-fonce)
}

.head_compteur span { font-size:10.5px; color:var(--tb-texte2) }

.menu_overlay {
position:absolute;
z-index:2300;
overflow-y:auto;
background:var(--tb-blanc);
top:0;
right:0;
bottom:0;
left:0;
clip-path:circle(0 at 35px 35px);
transition:clip-path .55s var(--tb-ressort);
pointer-events:none
}

.menu_overlay.ouvert { clip-path:circle(150% at 35px 35px); pointer-events:auto }

.menu_contenu { padding:86px 30px 40px }

.menu_groupe { margin-bottom:28px }

.menu_groupe h2 {
font-size:11.5px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.09em;
color:var(--tb-texte2);
margin:0 0 6px
}

.menu_groupe a {
display:flex;
align-items:center;
gap:14px;
font-family:'Outfit', sans-serif;
font-size:21px;
font-weight:600;
text-decoration:none;
color:var(--tb-texte);
transform:translateY(18px);
opacity:0;
transition:transform .45s var(--tb-ressort), opacity .35s, color .15s;
padding:8px 0
}

.menu_overlay.ouvert .menu_groupe a { transform:translateY(0); opacity:1 }

.menu_groupe a:hover { color:var(--tb-vert-fonce) }

.menu_groupe a i {
width:26px;
font-size:16px;
text-align:center;
color:var(--tb-vert)
}

.menu_pied {
display:flex;
align-items:center;
gap:18px;
border-top:1px solid var(--tb-ligne);
padding-top:22px
}

.menu_pied a {
display:flex;
align-items:center;
gap:8px;
font-size:14px;
font-weight:600;
text-decoration:none;
color:var(--tb-texte2)
}

.menu_pied a i { font-size:17px }

.vue_ecran {
position:relative;
display:none;
flex-direction:column;
flex:1;
overflow:hidden
}

.vue_ecran.actif { display:flex; animation:vue_entree .4s var(--tb-ressort) }

@keyframes vue_entree {
0% { transform:translateY(14px); opacity:0 }
100% { transform:translateY(0); opacity:1 }
}

.vue_scroll { flex:1; overflow-y:auto; padding:18px 16px 90px }

.vue_titre {
font-family:'Outfit', sans-serif;
font-size:22px;
font-weight:700;
margin:2px 0 4px
}

.vue_soustitre { font-size:13.5px; color:var(--tb-texte2); line-height:1.5; margin:0 0 18px }

#map_zone {
flex:1;
width:100%;
background:#eef2f0
}

.leaflet-container { background:#eef2f0; font-family:'Inter', sans-serif }

.fond_neutre .leaflet-tile-pane {
opacity:.85;
filter:grayscale(1) brightness(1.06) contrast(.88)
}

.leaflet-control-attribution { font-size:8px }

.leaflet-overlay-pane { animation:carte_apparait .8s ease }

@keyframes carte_apparait {
0% { opacity:0 }
100% { opacity:1 }
}

.hex_critique { animation:critique_pulse 2s ease-in-out infinite }

@keyframes critique_pulse {
0% { fill-opacity:.45 }
50% { fill-opacity:.72 }
100% { fill-opacity:.45 }
}

.boss_icone { background:none; border:none }

.boss_icone svg {
width:100%;
height:100%;
filter:drop-shadow(0 5px 7px rgba(32,48,42,.35));
backface-visibility:hidden;
will-change:transform;
animation:boss_flotte 2.8s cubic-bezier(.45,0,.55,1) infinite
}

@keyframes boss_flotte {
0% { transform:translate3d(0,0,0) }
50% { transform:translate3d(0,-7px,0) }
100% { transform:translate3d(0,0,0) }
}

.legend_barre {
position:absolute;
display:flex;
z-index:1000;
gap:6px;
overflow-x:auto;
top:10px;
left:10px;
right:10px;
padding-bottom:2px
}

.legend_puce {
display:flex;
align-items:center;
gap:6px;
background:var(--tb-blanc);
border:1px solid var(--tb-ligne);
border-radius:20px;
box-shadow:var(--tb-ombre);
font-size:11px;
font-weight:500;
color:var(--tb-texte2);
white-space:nowrap;
flex-shrink:0;
padding:6px 11px
}

.legend_puce i {
display:block;
width:9px;
height:9px;
border-radius:50%
}

.map_astuce {
position:absolute;
z-index:1000;
background:var(--tb-blanc);
border:1px solid var(--tb-ligne);
border-radius:14px;
box-shadow:var(--tb-ombre);
font-size:12.5px;
color:var(--tb-texte2);
text-align:center;
left:50%;
bottom:18px;
transform:translateX(-50%);
transition:opacity .4s;
padding:9px 16px
}

.map_astuce.cache { opacity:0; pointer-events:none }

.map_astuce i { color:var(--tb-vert-fonce); margin-right:6px }

.sheet_fond {
position:absolute;
z-index:1300;
background:rgba(32,48,42,.35);
opacity:0;
top:0;
right:0;
bottom:0;
left:0;
transition:opacity .25s;
pointer-events:none
}

.sheet_fond.ouvert { opacity:1; pointer-events:auto }

.sheet_panneau {
position:absolute;
z-index:1400;
max-height:74%;
overflow-y:auto;
background:var(--tb-blanc);
border-radius:26px 26px 0 0;
box-shadow:0 -8px 40px rgba(32,48,42,.16);
right:0;
bottom:0;
left:0;
transform:translateY(105%);
transition:transform .35s var(--tb-ressort);
padding:10px 20px 24px
}

.sheet_panneau.ouvert { transform:translateY(0) }

.sheet_poignee {
width:40px;
height:4px;
background:var(--tb-ligne);
border-radius:2px;
margin:4px auto 16px
}

.sheet_titre {
display:flex;
align-items:center;
justify-content:space-between;
gap:10px
}

.sheet_titre h2 {
font-family:'Outfit', sans-serif;
font-size:19px;
font-weight:700;
margin:0
}

.sheet_etat {
border-radius:20px;
font-size:11px;
font-weight:600;
white-space:nowrap;
padding:6px 12px
}

.etat_vert { background:var(--tb-vert-doux); color:var(--tb-vert-fonce) }

.etat_orange { background:var(--tb-ambre-doux); color:#b47410 }

.etat_rouge { background:var(--tb-rouge-doux); color:var(--tb-rouge) }

.etat_neutre { background:#f0f3f1; color:var(--tb-texte2) }

.etat_critique { background:var(--tb-critique); color:#fff }

.sheet_sousinfo {
font-size:13.5px;
color:var(--tb-texte2);
line-height:1.55;
margin:10px 0 0
}

.sheet_section {
border-top:1px solid var(--tb-ligne);
margin-top:18px;
padding-top:16px
}

.sheet_section h3 {
display:flex;
align-items:center;
gap:7px;
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.05em;
color:var(--tb-texte2);
margin:0 0 12px
}

.defi_jauge {
width:100%;
height:9px;
overflow:hidden;
background:#f0f3f1;
border-radius:5px;
margin:4px 0 8px
}

.defi_jauge i {
display:block;
width:var(--defi-pct, 0%);
height:100%;
background:linear-gradient(90deg, var(--tb-ambre), var(--tb-vert));
border-radius:5px;
transform:translate3d(0,0,0);
animation:defi_remplit 1s var(--tb-ressort)
}

@keyframes defi_remplit {
0% { width:0 }
100% { width:var(--defi-pct, 0%) }
}

.defi_chiffres {
display:flex;
justify-content:space-between;
font-size:12.5px;
color:var(--tb-texte2)
}

.defi_chiffres strong { color:var(--tb-texte) }

.signal_item {
display:flex;
align-items:center;
gap:12px;
background:var(--tb-fond);
border-radius:16px;
margin-bottom:8px;
padding:11px 13px
}

.signal_icone {
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
background:var(--tb-rouge-doux);
border-radius:12px;
font-size:15px;
color:var(--tb-rouge);
flex-shrink:0
}

.signal_infos { flex:1; min-width:0 }

.signal_infos strong { display:block; font-size:13.5px; font-weight:600 }

.signal_infos span { display:block; font-size:12px; color:var(--tb-texte2) }

.signal_infos em { display:block; font-size:12px; font-style:normal; color:var(--tb-texte2); line-height:1.4; margin-top:2px }

.signal_photo {
width:44px;
height:44px;
object-fit:cover;
border-radius:10px;
flex-shrink:0
}

.slot_item {
display:flex;
align-items:center;
gap:12px;
background:var(--tb-fond);
border-radius:16px;
margin-bottom:8px;
padding:11px 13px
}

.slot_date {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:48px;
height:48px;
background:var(--tb-vert-doux);
border-radius:13px;
flex-shrink:0
}

.slot_date b { font-family:'Outfit', sans-serif; font-size:12px; text-transform:uppercase; color:var(--tb-vert-fonce) }

.slot_date span { font-size:10.5px; color:var(--tb-texte2) }

.slot_infos { flex:1; min-width:0 }

.slot_infos strong { display:block; font-size:13.5px; font-weight:600 }

.slot_pseudos {
overflow:hidden;
font-size:12px;
color:var(--tb-texte2);
white-space:nowrap;
text-overflow:ellipsis
}

.slot_rejoindre {
background:var(--tb-blanc);
border:1.5px solid var(--tb-vert);
border-radius:20px;
font-size:12.5px;
font-weight:600;
font-family:'Inter', sans-serif;
color:var(--tb-vert-fonce);
cursor:pointer;
flex-shrink:0;
padding:8px 14px
}

.slot_rejoindre[disabled] { border-color:var(--tb-ligne); color:var(--tb-texte2); cursor:default }

.conseil_bloc {
display:flex;
align-items:flex-start;
gap:10px;
background:var(--tb-ambre-doux);
border-radius:14px;
font-size:12.5px;
color:#8a5c10;
line-height:1.5;
margin-top:12px;
padding:11px 13px
}

.conseil_bloc i { margin-top:2px }

.sheet_actions {
display:flex;
gap:9px;
margin-top:18px
}

.btn_principal {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
background:var(--tb-vert);
border:none;
border-radius:14px;
box-shadow:0 4px 14px rgba(49,197,109,.35);
font-size:14px;
font-weight:600;
font-family:'Inter', sans-serif;
color:#fff;
cursor:pointer;
transition:background .15s, transform .15s;
padding:14px 10px
}

.btn_principal:hover { background:var(--tb-vert-fonce) }

.btn_secondaire {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
flex:1;
background:var(--tb-blanc);
border:1px solid var(--tb-ligne);
border-radius:14px;
font-size:13.5px;
font-weight:600;
font-family:'Inter', sans-serif;
color:var(--tb-texte);
cursor:pointer;
padding:13px 10px
}

.btn_secondaire.alerte { background:var(--tb-rouge-doux); border-color:#f3c9c9; color:var(--tb-rouge) }

.creneau_chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px }

.creneau_chips button {
background:var(--tb-blanc);
border:1px solid var(--tb-ligne);
border-radius:20px;
font-size:13px;
font-weight:500;
font-family:'Inter', sans-serif;
color:var(--tb-texte);
cursor:pointer;
transition:border-color .15s, color .15s, background .15s;
padding:9px 15px
}

.creneau_chips button:hover { background:var(--tb-vert-doux); border-color:var(--tb-vert); color:var(--tb-vert-fonce) }

.fab_bouton {
position:absolute;
display:flex;
z-index:1100;
align-items:center;
justify-content:center;
width:56px;
height:56px;
background:var(--tb-vert);
border:none;
border-radius:50%;
box-shadow:0 6px 20px rgba(49,197,109,.45);
font-size:20px;
color:#fff;
right:18px;
bottom:22px;
cursor:pointer;
transition:transform .25s var(--tb-ressort), background .15s
}

.fab_bouton:hover { background:var(--tb-vert-fonce); transform:rotate(90deg) }

.agenda_carte {
display:flex;
gap:14px;
background:var(--tb-blanc);
border-radius:18px;
box-shadow:var(--tb-ombre);
transform:translate3d(0,0,0);
transition:transform .25s var(--tb-ressort), box-shadow .25s;
margin-bottom:12px;
padding:16px
}

.agenda_carte:hover { box-shadow:0 8px 24px rgba(32,48,42,.12); transform:translateY(-2px) }

.agenda_date {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:56px;
height:60px;
background:var(--tb-vert-doux);
border-radius:14px;
flex-shrink:0
}

.agenda_date b { font-family:'Outfit', sans-serif; font-size:20px; font-weight:700; color:var(--tb-vert-fonce); line-height:1 }

.agenda_date span { font-size:11px; text-transform:uppercase; color:var(--tb-texte2); margin-top:3px }

.agenda_infos { flex:1; min-width:0 }

.agenda_infos h2 { font-family:'Outfit', sans-serif; font-size:15.5px; font-weight:600; margin:0 0 3px }

.agenda_meta {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:4px 12px;
font-size:12px;
color:var(--tb-texte2)
}

.agenda_meta i { font-size:11px; margin-right:4px }

.agenda_desc { font-size:12.5px; color:var(--tb-texte2); line-height:1.5; margin:7px 0 0 }

.agenda_actions {
display:flex;
flex-direction:column;
gap:4px
}

.agenda_actions button {
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
background:var(--tb-fond);
border:none;
border-radius:10px;
font-size:13px;
color:var(--tb-texte2);
cursor:pointer;
transition:background .15s, color .15s
}

.agenda_actions button:hover { background:var(--tb-vert-doux); color:var(--tb-vert-fonce) }

.agenda_actions button[data-supprimer]:hover { background:var(--tb-rouge-doux); color:var(--tb-rouge) }

.plan_carte {
display:flex;
align-items:center;
gap:12px;
background:var(--tb-blanc);
border-radius:18px;
box-shadow:var(--tb-ombre);
cursor:pointer;
transform:translate3d(0,0,0);
transition:transform .25s var(--tb-ressort), box-shadow .25s;
margin-bottom:10px;
padding:15px
}

.plan_carte:hover { box-shadow:0 8px 24px rgba(32,48,42,.12); transform:translateY(-2px) }

.plan_pastille {
width:11px;
height:11px;
border-radius:50%;
flex-shrink:0
}

.plan_infos { flex:1 }

.plan_infos strong { display:block; font-family:'Outfit', sans-serif; font-size:14.5px; font-weight:600 }

.plan_infos span { font-size:12.5px; color:var(--tb-texte2) }

.plan_quitter {
background:none;
border:none;
font-size:12.5px;
font-weight:600;
font-family:'Inter', sans-serif;
color:var(--tb-rouge);
cursor:pointer;
padding:8px
}

.vide_bloc {
text-align:center;
font-size:13.5px;
color:var(--tb-texte2);
line-height:1.6;
margin-top:60px;
padding:0 30px
}

.vide_bloc i { font-size:30px; color:var(--tb-vert); margin-bottom:12px }

.vide_bloc b { display:block; font-family:'Outfit', sans-serif; font-size:17px; color:var(--tb-texte); margin-bottom:6px }

.profil_entete { display:flex; align-items:center; gap:14px }

.profil_entete h1 { font-family:'Outfit', sans-serif; font-size:20px; margin:0 }

.profil_avatar {
display:flex;
align-items:center;
justify-content:center;
width:58px;
height:58px;
background:var(--tb-vert-doux);
border-radius:50%;
font-family:'Outfit', sans-serif;
font-size:22px;
font-weight:700;
color:var(--tb-vert-fonce)
}

.profil_statut {
display:inline-flex;
align-items:center;
gap:6px;
background:var(--tb-vert-doux);
border-radius:20px;
font-size:11.5px;
font-weight:600;
color:var(--tb-vert-fonce);
margin-top:6px;
padding:4px 11px
}

.baro_bloc {
position:relative;
display:flex;
flex-direction:column;
align-items:center;
background:var(--tb-blanc);
border-radius:20px;
box-shadow:var(--tb-ombre);
margin-top:18px;
padding:22px 16px 20px
}

.baro_bloc h2 {
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.05em;
color:var(--tb-texte2);
margin:0 0 14px
}

.baro_svg { width:170px; height:170px }

#baroCercle { transition:stroke-dashoffset 1.2s var(--tb-ressort) }

.baro_centre {
position:absolute;
text-align:center;
top:114px
}

.baro_centre strong {
display:block;
font-family:'Outfit', sans-serif;
font-size:30px;
font-weight:700;
color:var(--tb-vert-fonce)
}

.baro_centre span { font-size:11.5px; color:var(--tb-texte2) }

.baro_legende {
font-size:13.5px;
text-align:center;
color:var(--tb-texte2);
line-height:1.6;
margin-top:12px
}

.baro_legende b { color:var(--tb-texte) }

.stats_grille {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:14px
}

.stats_case {
background:var(--tb-blanc);
border-radius:16px;
box-shadow:var(--tb-ombre);
padding:15px
}

.stats_case strong {
display:flex;
align-items:center;
gap:7px;
font-family:'Outfit', sans-serif;
font-size:20px;
font-weight:700
}

.stats_case strong i { font-size:14px; color:var(--tb-vert) }

.stats_case span { font-size:12px; color:var(--tb-texte2) }

.modal_voile {
position:absolute;
display:flex;
z-index:1800;
align-items:flex-end;
justify-content:center;
background:rgba(32,48,42,.4);
top:0;
right:0;
bottom:0;
left:0;
opacity:0;
transition:opacity .25s;
pointer-events:none
}

.modal_voile.ouvert { opacity:1; pointer-events:auto }

.modal_boite {
position:relative;
width:100%;
max-width:440px;
max-height:88%;
overflow-y:auto;
background:var(--tb-blanc);
border-radius:26px 26px 0 0;
transform:translateY(40px);
transition:transform .35s var(--tb-ressort);
padding:24px 20px calc(24px + env(safe-area-inset-bottom))
}

.modal_voile.ouvert .modal_boite { transform:translateY(0) }

.modal_boite h2 {
display:flex;
align-items:center;
gap:10px;
font-family:'Outfit', sans-serif;
font-size:18px;
font-weight:700;
margin:0 0 4px
}

.modal_boite h2 i { color:var(--tb-vert-fonce) }

.modal_zone { font-size:13px; color:var(--tb-texte2); margin:0 0 16px }

.modal_fermer {
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
background:var(--tb-fond);
border:none;
border-radius:50%;
font-size:14px;
color:var(--tb-texte2);
top:18px;
right:18px;
cursor:pointer
}

.form_champ { margin-bottom:14px }

.form_champ label {
display:block;
font-size:12.5px;
font-weight:600;
margin-bottom:6px
}

.form_champ label em { font-weight:400; font-style:normal; color:var(--tb-texte2) }

.form_champ input, .form_champ textarea {
width:100%;
background:var(--tb-fond);
border:1.5px solid transparent;
border-radius:12px;
font-size:14px;
font-family:'Inter', sans-serif;
color:var(--tb-texte);
box-sizing:border-box;
transition:border-color .15s, background .15s;
padding:12px 13px
}

.form_champ input:focus, .form_champ textarea:focus {
outline:none;
background:var(--tb-blanc);
border-color:var(--tb-vert)
}

.form_champ textarea { resize:vertical }

.form_duo {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px
}

.form_note {
display:flex;
align-items:flex-start;
gap:8px;
background:var(--tb-vert-doux);
border-radius:12px;
font-size:12.5px;
color:var(--tb-vert-fonce);
line-height:1.5;
margin:0 0 16px;
padding:10px 12px
}

.form_note i { margin-top:2px }

.form_photo {
display:flex;
align-items:center;
gap:10px;
background:var(--tb-fond);
border:1.5px dashed #cdd8d2;
border-radius:14px;
font-size:13.5px;
font-weight:500;
color:var(--tb-texte2);
cursor:pointer;
transition:border-color .15s, color .15s;
margin-bottom:16px;
padding:14px
}

.form_photo:hover { border-color:var(--tb-vert); color:var(--tb-vert-fonce) }

.form_photo.rempli { background:var(--tb-vert-doux); border-color:var(--tb-vert); border-style:solid; color:var(--tb-vert-fonce) }

.form_photo i { font-size:17px }

.form_photo input { display:none }

.form_types { border:none; margin:0 0 14px; padding:0 }

.form_types legend {
font-size:12.5px;
font-weight:600;
margin-bottom:8px;
padding:0
}

.form_types { display:block }

.form_types label { display:inline-block; margin:0 6px 8px 0 }

.form_types input { position:absolute; opacity:0; pointer-events:none }

.form_types span {
display:inline-flex;
align-items:center;
gap:7px;
background:var(--tb-fond);
border:1.5px solid transparent;
border-radius:20px;
font-size:12.5px;
font-weight:500;
color:var(--tb-texte);
cursor:pointer;
transition:background .15s, border-color .15s, color .15s;
padding:9px 13px
}

.form_types input:checked + span { background:var(--tb-vert-doux); border-color:var(--tb-vert); color:var(--tb-vert-fonce) }

.form_types input:focus-visible + span { outline:2px solid var(--tb-vert-fonce); outline-offset:2px }

.nav_barre {
display:flex;
z-index:1200;
background:var(--tb-blanc);
border-top:1px solid var(--tb-ligne);
padding:6px 6px calc(8px + env(safe-area-inset-bottom))
}

.nav_bouton {
position:relative;
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
flex:1;
background:none;
border:none;
font-size:11px;
font-weight:600;
font-family:'Inter', sans-serif;
color:var(--tb-texte2);
cursor:pointer;
transition:color .15s;
padding:8px 0 4px
}

.nav_bouton i { font-size:18px; transition:transform .25s var(--tb-ressort) }

.nav_bouton.actif { color:var(--tb-vert-fonce) }

.nav_bouton.actif i { transform:translateY(-2px) }

.nav_badge[hidden] { display:none }

.nav_badge {
position:absolute;
display:flex;
align-items:center;
justify-content:center;
min-width:17px;
height:17px;
background:var(--tb-ambre);
border-radius:9px;
font-size:10px;
font-weight:700;
color:#fff;
top:2px;
transform:translateX(15px);
animation:badge_pop .4s var(--tb-ressort);
padding:0 4px
}

@keyframes badge_pop {
0% { transform:translateX(15px) scale(0) }
70% { transform:translateX(15px) scale(1.25) }
100% { transform:translateX(15px) scale(1) }
}

.toast_boite {
position:absolute;
display:flex;
z-index:2600;
align-items:center;
gap:9px;
max-width:86%;
background:var(--tb-texte);
border-radius:14px;
box-shadow:0 8px 30px rgba(32,48,42,.25);
font-size:13px;
font-weight:500;
color:#fff;
left:50%;
bottom:92px;
transform:translate(-50%, 20px);
opacity:0;
transition:opacity .25s, transform .35s var(--tb-ressort);
pointer-events:none;
padding:12px 17px
}

.toast_boite.visible { opacity:1; transform:translate(-50%, 0) }

.toast_boite i { color:var(--tb-vert) }

.desktop_voile {
position:fixed;
display:none;
z-index:5000;
align-items:center;
justify-content:center;
background:rgba(32,48,42,.5);
top:0;
right:0;
bottom:0;
left:0;
backdrop-filter:blur(6px);
padding:24px
}

.desktop_voile.visible { display:flex }

.desktop_carte {
max-width:420px;
background:var(--tb-blanc);
border-radius:26px;
box-shadow:0 24px 70px rgba(32,48,42,.3);
text-align:center;
animation:vue_entree .5s var(--tb-ressort);
padding:38px 32px 30px
}

.desktop_carte img {
border-radius:18px;
object-fit:contain;
margin-bottom:18px
}

.desktop_carte h2 {
font-family:'Outfit', sans-serif;
font-size:21px;
font-weight:700;
margin:0 0 10px
}

.desktop_carte p {
font-size:14px;
color:var(--tb-texte2);
line-height:1.6;
margin:0 0 22px
}

.desktop_carte button {
background:var(--tb-vert);
border:none;
border-radius:14px;
font-size:14px;
font-weight:600;
font-family:'Inter', sans-serif;
color:#fff;
cursor:pointer;
padding:13px 26px
}

@media (min-width:760px) {
	.modal_voile { align-items:center }

	.modal_boite { border-radius:26px }
}

@media (prefers-reduced-motion:reduce) {
	*, *::before, *::after { animation:none !important; transition:none !important }
}

.install_barre[hidden] { display:none }

.install_barre {
position:absolute;
display:flex;
align-items:center;
z-index:1500;
gap:12px;
background:var(--tb-blanc);
border:1px solid var(--tb-ligne);
border-radius:18px;
box-shadow:0 12px 34px rgba(32, 48, 42, .18);
opacity:0;
left:12px;
right:12px;
bottom:calc(62px + env(safe-area-inset-bottom));
transform:translate3d(0, 16px, 0);
backface-visibility:hidden;
will-change:transform, opacity;
transition:transform .32s cubic-bezier(.22, .9, .3, 1), opacity .32s ease;
padding:12px 14px
}

.install_barre.visible {
opacity:1;
transform:translate3d(0, 0, 0)
}

.install_barre img {
width:40px;
height:40px;
border-radius:11px;
flex-shrink:0
}

.install_texte {
display:flex;
flex-direction:column;
gap:2px;
min-width:0
}

.install_texte strong {
font-family:'Outfit', sans-serif;
font-size:14px;
font-weight:700;
color:var(--tb-texte)
}

.install_texte span {
font-size:12px;
color:var(--tb-texte2);
line-height:1.4
}

.install_texte i { color:var(--tb-vert-fonce) }

.install_texte b { color:var(--tb-texte); font-weight:600 }

.install_barre[data-mode="ios"] [data-install-bouton],
.install_barre[data-mode="bouton"] [data-install-ios],
.install_barre[data-mode="ios"] .install_action { display:none }

.install_action {
background:var(--tb-vert);
border:none;
border-radius:12px;
font-size:13px;
font-weight:600;
font-family:'Inter', sans-serif;
color:#fff;
cursor:pointer;
flex-shrink:0;
transition:background .2s ease;
margin-left:auto;
padding:10px 16px
}

.install_action:hover { background:var(--tb-vert-fonce) }

.install_fermer {
display:flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
background:none;
border:none;
font-size:14px;
color:var(--tb-texte2);
cursor:pointer;
flex-shrink:0;
padding:0
}

.install_barre[data-mode="ios"] .install_fermer { margin-left:auto }