/* Carnet de croquis : le style de Buno Tattoo (repris de la maquette maquette-tonappli/ecrans/0301-liste.html).
   Clair par défaut, sombre par prefers-color-scheme ou data-theme="sombre" sur <html> ; data-theme="clair" force le clair.
   Seul fichier de style de l'appli et de la page publique. Propriétés logiques (inline-start/end) pour dir="rtl". */

/* ===== Polices auto-hébergées (variables : un fichier couvre toutes les graisses) ===== */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Shantell Sans';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/shantell-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Shantell Sans';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/shantell-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ===== Variables de la DA ===== */
:root{
  --bg:#FBF6EC;--card:#FFFDF8;--ink:#1D1A17;--mut:#6A6258;--line:#1D1A17;--soft:#E9DFCD;--acc:#BE3125;--btn:#1D1A17;--onbtn:#FBF6EC;
  --s2:#9A6A00;--s3:#3A9A63;--s4:#3F6FE0;--s5:#8A5BD6;
  --police:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --police-titre:'Shantell Sans',Georgia,'Comic Sans MS',cursive;
  --barre:72px;
  color-scheme:light;
}
[data-theme=sombre]{
  --bg:#171513;--card:#211E1B;--ink:#F3ECDF;--mut:#A99F90;--line:#F3ECDF;--soft:#38332D;--acc:#FF6B5B;--btn:#F3ECDF;--onbtn:#171513;
  --s2:#F0B93A;--s3:#5CC088;--s4:#7FA2FF;--s5:#B79CFF;color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=clair]){
    --bg:#171513;--card:#211E1B;--ink:#F3ECDF;--mut:#A99F90;--line:#F3ECDF;--soft:#38332D;--acc:#FF6B5B;--btn:#F3ECDF;--onbtn:#171513;
    --s2:#F0B93A;--s3:#5CC088;--s4:#7FA2FF;--s5:#B79CFF;color-scheme:dark;
  }
}
/* Images qui existent en deux thèmes : <img class="onlycl"> et <img class="onlyso"> */
.onlyso{display:none}
[data-theme=sombre] .onlycl{display:none}
[data-theme=sombre] .onlyso{display:revert}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=clair]) .onlycl{display:none}
  :root:not([data-theme=clair]) .onlyso{display:revert}
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--police);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased}
/* L'appli reste fixe comme une appli native : rien ne déborde en largeur, pas de rebond horizontal.
   clip quand le navigateur le connaît (hidden ferait de body un conteneur de défilement et casserait position:sticky). */
html,body{overflow-x:hidden;overscroll-behavior-x:none}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
img,svg{max-width:100%}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
/* Cadre de focus au clavier seulement (:focus-visible), jamais au toucher ni au focus posé par le code */
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:2px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ===== Composants (noms de la maquette) ===== */
.h{font-family:var(--police-titre);font-weight:700}
.ln{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:22px 18px 21px 17px / 18px 22px 17px 21px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border:1.5px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.dot.vide{background:transparent!important;border:1.5px solid currentColor}
.lab{display:block;font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.04em;text-transform:uppercase;margin:0 4px 6px}
.btn{min-height:52px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font-family:inherit;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;padding:0 18px;width:100%;text-align:center}
.btn.p1,.p1{background:var(--btn);color:var(--onbtn)}
.btn.dg,.dg{color:var(--acc);border-color:var(--acc)}
.btn.p1.dg{background:var(--acc);color:var(--onbtn);border-color:var(--acc)}
.btn:disabled,.chip:disabled{opacity:.5;cursor:default}
.mini{min-height:44px;height:auto;font-size:14px;padding:0 14px;width:auto}
.rnd{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0}
.rnd.p1{background:var(--btn);color:var(--onbtn)}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;font-size:14.5px;font-weight:500;white-space:nowrap;background:transparent;color:var(--ink);font-family:inherit;text-decoration:none}
.chip.on,.on{background:var(--btn);color:var(--onbtn);font-weight:700}
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.chips::-webkit-scrollbar{display:none}
.stp{width:22px;height:5px;border-radius:3px;background:var(--soft)}
.stp.on{background:var(--ink)}
.sub{font-size:14.5px;color:var(--mut);margin-top:4px;line-height:1.4}
.m{color:var(--mut)}
.ava{flex:none;border-radius:50%;border:1.5px solid var(--line);background:var(--soft);display:flex;align-items:center;justify-content:center;font-family:var(--police-titre);font-weight:700;width:48px;height:48px;font-size:19px;overflow:hidden}
.ava img{width:100%;height:100%;object-fit:cover}
.r{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 14px;font-size:15.5px;font-weight:500;color:var(--ink);text-decoration:none;width:100%;background:none;border:0;text-align:start;font-family:inherit}
.r + .r{border-top:1.5px solid var(--soft)}
.r em{font-style:normal;font-size:14px;color:var(--mut);margin-inline-start:auto;white-space:nowrap}
.r .fl{flex:none;color:var(--mut)}
[dir=rtl] .r .fl,[dir=rtl] .fl{transform:scaleX(-1)}
input,textarea,select{display:block;width:100%;border:1.5px solid var(--line);border-radius:17px 15px 16px 14px / 15px 17px 14px 16px;background:var(--card);color:var(--ink);font-family:inherit;font-size:16px;padding:0 14px}
input,select{height:50px}
/* 16 px au moins dans tous les champs : en dessous, l'iPhone agrandit la page au toucher du champ (audit du 20/10/2026, M8) */
textarea{resize:vertical;min-height:110px;line-height:1.45;padding:12px 14px;font-size:16px}
input::placeholder,textarea::placeholder{color:var(--mut)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--acc)}
input.code6{font-size:28px;letter-spacing:.4em;text-align:center;font-weight:700;height:64px}
.champ{display:flex;flex-direction:column;gap:0}
.champ .aide{font-size:13.5px;color:var(--mut);margin:6px 4px 0}
.champ .err{font-size:13.5px;color:var(--acc);margin:6px 4px 0;font-weight:700}
.ck{display:flex;align-items:center;gap:12px;min-height:44px;width:100%;background:none;border:0;padding:0;font-family:inherit;font-size:15px;line-height:1.35;color:var(--ink);text-align:start}
.bx{width:26px;height:26px;flex:none;border:1.5px solid var(--line);border-radius:8px 7px 8px 6px;background:var(--card);color:var(--onbtn);display:flex;align-items:center;justify-content:center}
.bx.ok{background:var(--btn)}
.lk{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:4px;background:none;border:0;font-family:inherit;padding:0 8px}
.hx{background-color:var(--soft);background-image:repeating-linear-gradient(135deg,transparent 0 8px,var(--card) 8px 9.5px)}
.col{display:flex;flex-direction:column}
.txt{font-size:14.5px;line-height:1.5;margin:0}
.txt + .txt{margin-top:8px}
.sw{width:54px;height:32px;flex:none;border-radius:999px;border:1.5px solid var(--line);background:var(--btn);padding:3px;display:flex;justify-content:flex-end;cursor:pointer;position:relative}
.sw::after{content:"";position:absolute;inset:-7px -2px}
.sw i{width:23px;height:23px;border-radius:50%;background:var(--onbtn)}
.sw.off,.sw[aria-checked=false]{background:transparent;justify-content:flex-start}
.sw.off i,.sw[aria-checked=false] i{background:var(--ink)}
.rr{display:flex;align-items:center;gap:12px;padding:11px 14px;min-height:48px}
.rr + .rr{border-top:1.5px solid var(--soft)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cc{justify-content:center;padding:0 6px}
.wd{font-size:12px;font-weight:700;color:var(--mut);text-align:center}
.d{height:36px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;border-radius:999px;position:relative;border:1.5px solid transparent;color:var(--ink);text-decoration:none;background:none;font-family:inherit}
.d.off{color:var(--mut);opacity:.55;text-decoration:line-through}
.d.fr{border-color:var(--line)}
.d.rv::after{content:"";position:absolute;bottom:2px;width:6px;height:6px;border-radius:50%;background:var(--s4)}
.d.td{border-color:var(--acc);color:var(--acc);font-weight:700}
.d.sel{background:var(--btn);color:var(--onbtn);font-weight:700}
.tg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--mut);white-space:nowrap}
.tg i{width:9px;height:9px;border-radius:2px;flex:none}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;font-size:15px}
.kv + .kv{border-top:1.5px solid var(--soft)}
.kv span{color:var(--mut)}
.kv b{text-align:end}
.li{display:flex;align-items:center;gap:12px;padding:11px 14px;color:inherit;text-decoration:none;min-height:48px}
.li + .li{border-top:1.5px solid var(--soft)}
.sk{background:var(--soft);border-radius:8px}
.ban{display:flex;align-items:center;gap:10px;border:1.5px solid var(--acc);border-radius:16px;padding:10px 12px;font-size:14px;line-height:1.35;color:var(--ink);text-decoration:none;background:var(--card)}
.toast{display:flex;align-items:center;gap:10px;background:var(--btn);color:var(--onbtn);border-radius:999px;padding:12px 18px;font-size:15px;font-weight:700}

/* Couleurs des statuts (point + mot, jamais la couleur seule) */
.st-nouvelle{--c:var(--acc)}.st-en_cours{--c:var(--s2)}.st-sans_reponse{--c:var(--mut)}.st-accepte{--c:var(--s4)}.st-booke{--c:var(--s4)}
.st-a_cloturer{--c:var(--s3)}.st-tatoue{--c:var(--s3)}.st-refusee{--c:var(--mut)}.st-annulee{--c:var(--mut)}.st-attente{--c:var(--s5)}.st-archivee{--c:var(--mut)}
.pill .dot{background:var(--c,var(--ink))}
.st-a_cloturer .dot,.st-refusee .dot{background:transparent;border:1.5px solid var(--c)}

/* ===== Mise en page de l'appli ===== */
.appli{min-height:100vh;min-height:100dvh}
.contenu{padding:calc(env(safe-area-inset-top,0px) + 24px) 22px calc(var(--barre) + env(safe-area-inset-bottom,0px) + 28px);display:flex;flex-direction:column;gap:14px;max-width:100%}
.sans-barre .contenu{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px)}
.entete{display:flex;align-items:flex-start;gap:12px}
.entete .retour{margin-inline-start:-6px}
.entete .titres{flex:1;min-width:0}
.entete .surtitre{font-size:13px;font-weight:500;color:var(--mut)}
.entete h1{margin:2px 0 0;font-size:34px;line-height:1.1;overflow-wrap:anywhere}
.trait{width:150px;height:10px;display:block;margin:4px 0 0;color:var(--acc)}
.trait path{stroke-width:2.5;vector-effect:non-scaling-stroke}
/* Titre de page + trait : la boîte prend la largeur du titre, le trait la suit exactement */
.titre-trait{display:inline-flex;flex-direction:column;align-items:stretch;max-width:100%;vertical-align:top}
.titre-trait .trait{width:0;min-width:100%} /* width:0 : le trait ne compte pas dans la largeur, min-width le cale sur le titre */
.section{display:flex;flex-direction:column;gap:6px}
.section > .lab{margin-top:8px}
.vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 12px}
.vide img{width:170px;height:auto;margin-inline:auto;align-self:center}
.vide .h{font-size:22px;margin:0}
.chargement{display:flex;flex-direction:column;gap:10px}
.chargement .sk{height:64px;border-radius:18px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}

/* Barre d'onglets : en bas sur téléphone */
.barre{position:fixed;inset-inline:0;bottom:0;z-index:20;background:var(--bg);border-top:1.5px solid var(--line);display:flex;padding:8px 6px calc(env(safe-area-inset-bottom,0px) + 8px);gap:2px}
.tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--mut);text-decoration:none;min-height:52px;justify-content:center}
.tab span{width:48px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.tab b{font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab[aria-current=page]{color:var(--ink)}
.tab[aria-current=page] span{background:var(--btn);color:var(--onbtn)}

/* Bandeau hors ligne : son fond couvre l'encoche, son texte passe dessous ; l'écran n'ajoute pas l'encoche une 2e fois */
.hors-ligne{position:sticky;top:0;z-index:25;margin:0;border-radius:0;border-inline:0;border-top:0;justify-content:center;padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
.hors-ligne~.appli .contenu{padding-top:24px}

/* Feuille du bas */
.voile{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.35);display:flex;flex-direction:column;justify-content:flex-end}
.sh{background:var(--bg);color:var(--ink);border-top:1.5px solid var(--line);border-radius:26px 26px 0 0;padding:10px 22px calc(env(safe-area-inset-bottom,0px) + 30px);position:relative;display:flex;flex-direction:column;gap:10px;max-height:90vh;overflow-y:auto;width:100%;animation:monte .22s cubic-bezier(.2,.8,.2,1)}
.sh::before{content:"";align-self:center;width:44px;height:5px;border-radius:3px;background:var(--soft);margin-bottom:4px;flex:none}
.sh .h{font-size:24px;margin:0}
@keyframes monte{from{transform:translateY(100%)}}

/* Toast */
.toasts{position:fixed;inset-inline:0;bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px) + 14px);z-index:50;display:flex;justify-content:center;pointer-events:none;padding:0 22px}
.toasts .toast{pointer-events:auto;animation:apparait .2s ease-out}
/* Feuille du bas ouverte : le toast en haut, jamais sur le bouton de la feuille (toast() pose la classe, 20/10/2026) */
.toasts.en-haut{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 14px)}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}}

/* Tablette et plus : barre à gauche */
@media (min-width:820px){
  :root{--barre:0px}
  .barre{inset-block:0;inset-inline-start:0;inset-inline-end:auto;width:104px;flex-direction:column;justify-content:flex-start;padding:calc(env(safe-area-inset-top,0px) + 28px) 8px 20px;border-top:0;border-inline-end:1.5px solid var(--line);gap:10px}
  .tab{flex:none;min-height:64px}
  .avec-barre{padding-inline-start:104px}
  .voile{align-items:center;justify-content:center;padding:22px}
  .sh{max-width:520px;border:1.5px solid var(--line);border-radius:26px;padding-bottom:26px}
  .sh::before{display:none}
  .toasts{bottom:24px}
  .contenu{padding-inline:36px}
}
/* Ordinateur : contenu centré, 720 px au plus ; fiche en deux colonnes (classe .deux-colonnes) */
@media (min-width:1280px){
  .contenu{max-width:720px;margin-inline:auto;padding-inline:0}
  .contenu.large{max-width:1100px}
  .deux-colonnes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
}

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

/* ===== Centrage du texte dans les petites formes (pastilles, puces, boutons, cases) ===== */
.pill,.chip,.btn,.rnd,.etiquette-pro,.d,.bx,.lk{justify-content:center;align-items:center;text-align:center}
.chip,.pill,.etiquette-pro,.btn{line-height:1.15}
.d{line-height:1}
/* Champs date et heure : 50 px, texte centré comme les autres champs (iOS colle sinon le texte en haut) */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{height:50px;min-height:50px;line-height:normal;padding-block:0;text-align:center;-webkit-appearance:none;appearance:none}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value{text-align:center;margin:0;line-height:48px}
input[type=date]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit{padding:0;display:inline-flex;align-items:center;height:100%}

/* ===== Écritures du titre (Google Fonts auto-hébergées, latin ; chargées seulement si une page les utilise) ===== */
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(polices/pinceau.woff2) format('woff2')}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;src:url(polices/marqueur.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(polices/elegante.woff2) format('woff2')}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(polices/affiche.woff2) format('woff2')}
@font-face{font-family:'UnifrakturMaguntia';font-style:normal;font-weight:400;font-display:swap;src:url(polices/gothique.woff2) format('woff2')}
@font-face{font-family:'Pacifico';font-style:normal;font-weight:400;font-display:swap;src:url(polices/script.woff2) format('woff2')}
@font-face{font-family:'Rye';font-style:normal;font-weight:400;font-display:swap;src:url(polices/western.woff2) format('woff2')}
.police-manuscrite{font-family:var(--police-titre)}
.police-classique{font-family:Georgia,'Times New Roman',serif}
.police-simple{font-family:var(--police)}
.police-pinceau{font-family:'Caveat',var(--police-titre)}
.police-marqueur{font-family:'Permanent Marker',var(--police-titre);font-weight:400}
.police-elegante{font-family:'Playfair Display',Georgia,serif}
.police-affiche{font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:.02em}
.police-gothique{font-family:'UnifrakturMaguntia','Old English Text MT',Georgia,serif;font-weight:400}
.police-script{font-family:'Pacifico','Brush Script MT',cursive;font-weight:400}
.police-western{font-family:'Rye',Georgia,serif;font-weight:400}

/* ===== Couleurs : 5 pastilles + « au choix » ===== */
.nuances{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.nuance{width:44px;height:44px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1.5px var(--line);padding:0;flex:none;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center}
.nuance.on{box-shadow:0 0 0 3px var(--ink)}
.nuance-libre{background:conic-gradient(#BE3125,#E0A030,#6E8B6B,#23395B,#8A5BD6,#BE3125);overflow:hidden}
.nuance-libre::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:20px;text-shadow:0 0 3px rgba(0,0,0,.6);pointer-events:none}
.nuance-libre-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.nuance-libre:focus-within{outline:2.5px solid var(--acc);outline-offset:2px}

/* ===== Fonction Pro vue en Gratuit : un seul traitement (composants.js etiquettePro, teinterPro, rappelPro) ===== */
.etiquette-pro{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border:1.5px solid var(--acc);border-radius:999px;background:transparent;color:var(--acc);font-size:12px;font-weight:700;letter-spacing:.03em;text-decoration:none;white-space:nowrap;flex:none}
.entete .etiquette-pro{align-self:center}
.surtitre-pro{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.btn .etiquette-pro{margin-inline-start:6px}
.pro-off{background:color-mix(in srgb,var(--acc) 9%,var(--card))}
.card>.pro-off:first-child{border-start-start-radius:inherit;border-start-end-radius:inherit}
.card>.pro-off:last-child{border-end-start-radius:inherit;border-end-end-radius:inherit}
/* Colonne fixe : l'étiquette part à droite, juste avant la flèche ou l'interrupteur, même sans valeur */
.r>.etiquette-pro,.rr>.etiquette-pro,.rr-titre>.etiquette-pro{margin-inline-start:auto}
.r>em~.etiquette-pro{margin-inline-start:0}
.pro-off-tete{display:flex;justify-content:flex-end;padding:10px 14px 0}
.note-pro{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-4px 4px 0;font-size:13.5px;color:var(--mut);text-decoration:none;align-self:flex-start}
.bloc-pro{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:18px}
.carte-pro{padding-block:12px;font-size:14.5px;line-height:1.4}

/* ===== Glisser une ligne pour révéler « Supprimer » ===== */
.glisse{position:relative;overflow:hidden}
.glisse + .glisse{border-top:1.5px solid var(--soft)}
.glisse-ligne{position:relative;z-index:1;background:var(--card);touch-action:pan-y}
.glisse-anim{transition:transform .2s ease}
.glisse-action{position:absolute;inset-block:0;inset-inline-end:0;width:104px;border:0;background:var(--acc);color:var(--onbtn);font-family:inherit;font-weight:700;font-size:14.5px;display:flex;align-items:center;justify-content:center}

/* ===== Visite guidée ===== */
.visite{display:flex;flex-direction:column;gap:12px;align-items:stretch}
/* Hauteur réservée à l'image : le bouton Suivant ne saute pas au chargement ni d'une étape à l'autre */
.visite-image{display:flex;justify-content:center;align-items:flex-end;height:200px;flex:none}
.visite-image img{width:auto;height:100%;max-width:100%;object-fit:contain}
.visite-carte{padding:14px 16px;min-height:168px;box-sizing:border-box}
.visite-carte .h{font-size:22px;margin:2px 0 4px}
.visite-n{margin:0;font-size:12.5px;font-weight:700}
.visite-points{display:flex;gap:6px;justify-content:center}
/* Visite refaite (lot I) : Passer en haut de chaque écran, deux sorties au dernier */
.vi-haut{display:flex;justify-content:space-between;align-items:center;gap:8px}
.vi-passer{margin:0;padding:8px 4px}
.vi-carte .txt{margin:0}
.vi-actions{display:flex;flex-direction:column;gap:8px}
@media (min-width:768px){
  .vi{max-width:560px;width:100%;margin:0 auto}
  .vi-image{height:240px}
}
@media (min-width:1024px){
  .vi-actions{flex-direction:row}
  .vi-actions .btn{flex:1}
}

/* ===== Adresse du studio : trois choix (boutons radio) ===== */
.champ-groupe{border:0;margin:0;padding:0;min-width:0}
.choix-radio{cursor:pointer}
.radio{width:24px;height:24px;flex:none;margin:0;accent-color:var(--btn)}
.bloc{display:block;margin-top:2px}

/* ===== Grande feuille (fiche d'une demande par-dessus la liste) ===== */
.voile-haute{z-index:30}
.sh.haute{height:92vh;height:92dvh;max-height:none;padding:6px 18px calc(env(safe-area-inset-bottom,0px) + 24px);gap:14px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sh.haute::before{display:none}
.sh-poignee{align-self:center;width:44px;height:5px;border-radius:3px;background:var(--soft);margin:4px 0 0;flex:none}
.sh-croix{position:sticky;top:0;align-self:flex-end;margin-bottom:-58px;z-index:2;flex:none}
.sh.haute .entete{padding-inline-end:54px}
/* Croix collante : un anneau du fond de la feuille la détache du contenu qui défile dessous (boutons pleine largeur) */
.sh.haute .sh-croix{box-shadow:0 0 0 8px var(--bg),0 6px 16px rgba(0,0,0,.14)}
.sh.haute .deux-colonnes{display:flex;flex-direction:column;gap:14px}
.sh-anim{transition:transform .2s ease}
@media (min-width:820px){
  .sh.haute{max-width:720px;height:92vh;border-radius:26px}
}
/* Ordinateur : la fiche en panneau à droite de la liste, la liste reste lisible à gauche */
@media (min-width:1280px){
  .voile-haute{background:transparent;justify-content:stretch;align-items:stretch;padding:0;inset-inline-start:auto;width:min(600px,46vw)}
  .sh.haute{max-width:none;width:100%;height:100vh;border-radius:0;border:0;border-inline-start:1.5px solid var(--line);animation:none;padding:18px 24px 24px}
  .sh.haute .sh-poignee{display:none}
  .avec-panneau .contenu{margin-inline:24px auto;max-width:calc(100vw - min(600px,46vw) - 104px - 48px)}
}

/* ===== Icône de l'appli ===== */
.grille-icones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grille-icones.pro-off{padding:10px;border-radius:18px}
.tuile-icone{aspect-ratio:1;padding:4px;border:1.5px solid var(--soft);border-radius:22%;background:var(--card);display:flex;align-items:center;justify-content:center;min-width:0}
.tuile-icone img{width:100%;height:auto;border-radius:20%;display:block}
.tuile-icone.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}

/* Titres longs à côté des boutons ronds (ex. « Tes demandes ») : un peu plus petits sur les téléphones étroits */
@media (max-width: 400px){.entete h1{font-size:27px}}

/* ===== Geste Pro refusé en Gratuit : la carte vibre (secouerPro, composants.js) ===== */
@keyframes secousse{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}30%{transform:translateX(6px)}45%{transform:translateX(-5px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.secoue{animation:secousse .4s ease-in-out}
@media (prefers-reduced-motion:reduce){.secoue{animation:none}}
.carte-propulse{display:flex;flex-direction:column;gap:2px}
.carte-propulse .rr{padding-bottom:0}
.carte-propulse .sub{margin:0;padding:0 14px 12px}

/* ===== Pile de navigation (app.js) : un écran = une couche ; les couches d'en dessous restent, cachées ===== */
.contenu{position:relative;overflow-x:clip}
.couche{display:flex;flex-direction:column;gap:14px;min-width:0}
.couche[hidden]{display:none}
/* Sous-écran qui entre ou qui sort : il flotte par-dessus l'écran d'en dessous le temps du glissement */
.couche-volante{position:absolute;z-index:3;background:var(--bg);min-height:100vh;min-height:100dvh;box-shadow:-10px 0 28px rgba(0,0,0,.14);will-change:transform}
.couche-anim{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.couche-fondu{animation:fondu-onglet .12s ease-out}
@keyframes fondu-onglet{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.couche-anim{transition:none}.couche-fondu{animation:none}}

/* ===== Zoom d'une photo ou du corps (zoom.js) : plein écran, fond sombre, pincer, double-toucher, glisser vers le bas ===== */
.zoom{position:fixed;inset:0;z-index:60;background:rgba(8,8,8,.94);display:flex;align-items:center;justify-content:center;touch-action:none;overscroll-behavior:contain;animation:fondu-onglet .15s ease-out}
.zoom-scene{max-width:100vw;max-height:100vh;max-height:100dvh;display:flex;align-items:center;justify-content:center;transform-origin:0 0;will-change:transform;user-select:none;-webkit-user-select:none}
.zoom-scene img{max-width:100vw;max-height:100vh;max-height:100dvh;object-fit:contain;display:block;pointer-events:none}
.zoom-scene .zoom-corps{width:min(92vw,520px);background:var(--bg);border-radius:18px;padding:12px}
.zoom-croix{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);inset-inline-end:12px;z-index:2;background:rgba(255,255,255,.14);color:#fff;border-color:transparent}
.zoom-anim{transition:transform .2s ease}
.zoomable{cursor:zoom-in}
@media (prefers-reduced-motion:reduce){.zoom{animation:none}.zoom-anim{transition:none}}

/* Démarrage : la pastille « Libre » / « Pris » garde sa taille dans la colonne du formulaire */
.dm-statut{align-self:flex-start}

/* Fiche d'une demande (19/10/2026) : accordéons (composants.js accordeon), statut, joindre la personne */
.fi-acc{border:1.5px solid var(--line);border-radius:18px;padding:0 14px;background:var(--card)}
.fi-acc-titre{min-height:48px;display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none}
.fi-acc-titre::-webkit-details-marker{display:none}
.fi-acc-titre::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.fi-acc[open]>.fi-acc-titre::after{transform:rotate(-135deg)}
.fi-acc-titre .lab{margin:0}
.fi-acc-corps{display:flex;flex-direction:column;gap:10px;padding-bottom:14px}
.fi-acc-corps .card{margin:0}
.fi-statut{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fi-sous{margin-top:14px}
.fi-joindre{display:flex;flex-wrap:wrap;gap:8px}
.fi-joindre-lien{min-height:44px;display:inline-flex;align-items:center}
.fi-fil{display:flex;flex-direction:column;gap:10px}
@media (prefers-reduced-motion:reduce){.fi-acc-titre::after{transition:none}}

/* ===== Lot B (retours de Marco du 19/10/2026) : agenda (ag-) et réglages (rg-) ===== */
/* Points du mois : 3 au plus puis « +n », jamais hors de la case (même le jour entouré) */
.ag-points{max-width:100%;overflow:hidden;flex-wrap:nowrap;align-items:center}
.ag-points .dot{flex:none}
.ag-plus{font-size:10px;font-weight:700;line-height:1;color:var(--mut);white-space:nowrap}
.ar-jour.sel .ag-plus{color:inherit}
/* Pastille d'ouverture du calendrier, en haut à droite */
.ag-ouverture{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.ag-ouverture-point{width:8px;height:8px;border-radius:50%;background:var(--mut)}
.ag-ouverture.on .ag-ouverture-point{background:var(--s3)}
/* Résumé d'un rendez-vous */
.ag-resume{padding:4px 14px}
.ag-kv{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;border-bottom:1.5px solid var(--soft)}
.ag-kv:last-child{border-bottom:0}
.ag-kv > span:first-child{color:var(--mut)}
.ag-statuts{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
/* Bloc Pro repliable (fermé en Gratuit, ouvert en Pro) */
.ag-repli{margin-top:18px}
.ag-repli > summary{list-style:none}
.ag-repli > summary::-webkit-details-marker{display:none}
.ag-repli-titre{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer}
.ag-repli-titre .lab{flex:1;margin:0}
.ag-repli-texte{flex:1;min-width:0;padding:8px 0}
.ag-repli-titre .etiquette-pro{flex:none}
.ag-repli:not([open]) > summary{border-bottom:0}
.ag-repli-fleche{transform:rotate(90deg);transition:transform .2s}
.ag-repli[open] .ag-repli-fleche{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.ag-repli-fleche{transition:none}}
/* Abonnement : personnage en haut à droite, coche verte et croix rouge */
.rg-mascotte{display:inline-flex;width:64px;height:64px;flex:none}
.rg-mascotte img{width:100%;height:100%;object-fit:contain}
.rg-coche{color:var(--s3);display:inline-flex}
/* Croix des forfaits (« Vois la différence », « Tout comparer ») : vrai rouge léger, sans opacité ; « .non.rg-croix » passe devant « .non » de lien.css */
.rg-croix,.non.rg-croix,.tableau-forfaits .rg-croix{color:#D9534F;opacity:1;display:inline-flex}
/* Clientèle : filtres */
.rg-filtres{flex-wrap:wrap}
.rg-selects{display:flex;gap:8px;flex-wrap:wrap}
.rg-select{flex:1 1 140px;min-height:44px;padding:0 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit}

/* Forfaits, « Vois la différence » : bascule Gratuit / Pro en deux moitiés égales, sur toute la largeur (19/10/2026) */
.chips.ab-bascule { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; flex-wrap: nowrap; }
.chips.ab-bascule .chip { width: 100%; justify-content: center; text-align: center; margin: 0; }

/* Zones du corps (retours de Marco du 19/10/2026, lot D) */
/* Cadre fixe 660 x 940 : le corps des quatre vues tombe au même endroit (face et dos : 400 de large, centrés à 330 ;
   profils : 460 de large, corps à 330 depuis le bord du bras) ; les zones restent calées sur l'image */
.zn-cadre{position:relative;width:min(100%,440px);aspect-ratio:660/940;margin-inline:auto}
.zn-cadre>.silhouette{position:absolute;top:0;height:100%;margin:0;width:60.606%;left:19.697%}
.zn-cadre[data-vue="gauche"]>.silhouette{width:69.697%;left:0}
.zn-cadre[data-vue="droite"]>.silhouette{width:69.697%;left:30.303%}
/* Liste de toutes les zones : une ligne touchable par zone */
.zn-lignes{border:0;border-radius:0;background:none}
.zn-ligne{cursor:pointer}
.zn-ligne+.zn-ligne{border-top:1.5px solid var(--soft)}
.zn-ligne-nom{flex:1;min-width:0;text-transform:none}
.zn-ligne-statut{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:14px;color:var(--mut)}

/* ===== Lot F (19/10/2026, troisième série) : demandes, agenda, fiche ===== */
/* Demandes : statuts en deux rangées compactes qui glissent ensemble, textes qui ne passent pas à la ligne */
/* Une seule ligne qui glisse (retour de Marco du 19/10, soir), bulles compactes */
.chips.dm-statuts{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.chips.dm-statuts::-webkit-scrollbar{display:none}
.chips.dm-statuts .chip{flex:none;white-space:nowrap}
.chips.dm-statuts .chip{min-height:36px;padding:0 12px;font-size:13px;gap:5px}
.chips.dm-statuts .chip .dot{width:8px;height:8px}
.chips.dm-statuts .ar-compte{font-size:12px;opacity:.8}
@media (min-width:1024px){.chips.dm-statuts{flex-wrap:wrap;overflow:visible}}
/* Agenda : jour sélectionné sans fond plein ; les points gardent leur couleur, sans anneau clair autour */
.ar-calendrier .ar-jour.sel{background:transparent;color:var(--ink);border-color:var(--line);font-weight:700}
.ar-calendrier .ar-jour.sel .ar-points .dot{outline:0}
.ar-calendrier .ar-jour.sel .ag-plus{color:var(--mut)}
.ag-ajouter{margin-top:4px}
/* Fiche : tous les blocs ont la même tête (carte, titre, flèche), aucun texte clair sur fond clair */
.fi-fiche .fi-acc{color:var(--ink);margin:0}
.fi-fiche .ar-colonne{display:flex;flex-direction:column;gap:10px}
.fi-acc-titre .lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-acc-resume{flex:none;display:inline-flex;align-items:center}
.fi-acc-bouton{width:100%;min-height:48px;display:flex;align-items:center;gap:8px;font:inherit;color:var(--ink);cursor:pointer;text-align:start}
.fi-acc-bouton .lab{flex:1;margin:0}
.fi-acc-bouton::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.fi-fiche .ar-histo{color:var(--ink)}
.fi-notes{display:flex;flex-direction:column;gap:6px}
/* Fiche, audit visuel du 20/10/2026 (M1, M2) : dans le panneau (ordinateur) et la grande feuille, une seule colonne qui prend
   toute la largeur (le « align-items:start » des deux colonnes rétrécissait les premiers blocs à 170-320 px) ;
   bloc fermé sans espace vide sous la tête, titre et flèche sur la même ligne ; « Plus d'actions » sur une ligne */
.sh.haute .fi-fiche{align-items:stretch;gap:10px}
.fi-acc{gap:0}
.fi-acc-titre::after{transform:translateY(-3px) rotate(45deg)}
.fi-acc[open]>.fi-acc-titre::after{transform:translateY(3px) rotate(-135deg)}
.fi-acc-bouton{flex-direction:row}
.fi-acc-bouton::after{flex:none;margin-inline-end:2px}
.fi-note-carte{padding:10px 12px;border-radius:14px;background:var(--soft)}
/* Carte cadeau dans « Paiement en fin de séance » : l'action, puis le code et le reste dessous (coupés proprement) */
.fi-carte{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-block:8px}
.fi-carte-detail{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Chiffres (ch-) et encaissements (en-) : tuiles, graphiques SVG, barres, tableau des mois ===== */
.ch-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.ch-tuile{display:flex;flex-direction:column;gap:2px;padding:14px;min-width:0}
.ch-nombre{font-size:clamp(18px,5vw,26px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Montant long (devise à gros nombres, gros total) : plus petit plutôt que coupé par « … » (devise, 20/10/2026).
   La taille suit la largeur de la tuile (cqi : 2 colonnes au téléphone, 4 dès 700 px) ; un téléphone qui ne connaît pas
   ces unités (iOS 15) ignore la 2e déclaration et garde la taille d'après l'écran. */
.ch-tuile{container-type:inline-size}
.ch-nombre{font-size:min(clamp(18px,5vw,26px),16cqi)}
.ch-nombre.ch-long{font-size:clamp(15px,4.2vw,19px);font-size:min(clamp(15px,4.2vw,19px),12.5cqi)}
.ch-nombre.ch-tres-long{font-size:clamp(12px,3.4vw,16px);font-size:min(clamp(12px,3.4vw,16px),10cqi)}
/* Libellés des tuiles : le texte se réduit plutôt que d'être coupé (retours du 19/10) */
.ch-libelle{font-size:clamp(11px,3.4vw,13.5px);color:var(--ink);line-height:1.2;overflow-wrap:anywhere}
.ch-detail{font-size:clamp(10.5px,3vw,12px);line-height:1.2;overflow-wrap:anywhere}
.ch-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}
.ch-histo{display:block;width:100%;height:auto;max-height:180px;color:var(--acc)}
.ch-histo .ch-axe{stroke:var(--line);stroke-width:1}
.ch-histo .ch-fond{fill:var(--soft)}
.ch-histo .ch-barre{fill:currentColor}
.ch-histo .ch-negatif{fill:var(--mut)}
.ch-histo .ch-mois{fill:var(--mut);font-size:9px}
.ch-histo .ch-choisie .ch-fond{fill:var(--line)}
.ch-histo a{cursor:pointer}
.ch-barres{list-style:none;margin:0;padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.ch-ligne{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:14px}
.ch-nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-piste{display:block;height:10px;border-radius:999px;background:var(--soft);overflow:hidden}
.ch-rempli{display:block;height:100%;border-radius:999px;background:var(--acc)}
.ch-val{white-space:nowrap;font-variant-numeric:tabular-nums}
.en-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.en-natures{flex-wrap:nowrap;overflow-x:auto;max-width:100%}
.en-select{min-height:44px;border:1.5px solid var(--line);border-radius:999px;padding:0 14px;background:var(--card);color:var(--ink);font:inherit;font-size:16px;max-width:100%}
.en-defile{overflow-x:auto;margin-top:8px}
.en-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.en-table th,.en-table td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:start;white-space:nowrap}
.en-table .en-num{text-align:end}
.en-table thead th{font-size:12px;color:var(--mut);font-weight:600}
.en-table tfoot th,.en-table tfoot td{border-bottom:0;font-weight:700}
.en-table a{color:var(--ink);text-decoration:none;font-weight:600}
.en-table .en-choisi{background:var(--soft)}
.en-total{font-weight:700}
.en-marque{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;border:1px solid var(--line);font-size:11.5px;color:var(--mut);font-weight:500}
.en-correction .ar-nom{font-style:italic}
@media (min-width:700px){.ch-tuiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){.ch-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Chèques cadeaux : bouton « Ajouter un chèque cadeau » sur une seule ligne (le texte se réduit), aide « à quoi sert un chèque » */
.rg-une-ligne{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-width:0;font-size:clamp(13px,4vw,16px)}
.rg-une-ligne>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.rg-aide-cheque{display:flex;flex-direction:column;gap:4px}
.rg-aide-cheque .sub{margin:0}
/* Accueil (Pro) : message du jour et raccourcis au choix (Réglages → Mon accueil) */
.rg-message-jour{display:flex;flex-direction:column;gap:4px;padding:12px 14px}
.rg-message-jour .txt{margin:0;overflow-wrap:anywhere}
.rg-raccourcis{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.rg-raccourcis::-webkit-scrollbar{display:none}
.rg-raccourci{flex:0 0 auto;white-space:nowrap}
/* Charges fixes (#/charges) : une carte par charge, enregistrement automatique */
.cg-aide{margin:0 0 12px}
.cg-liste{display:flex;flex-direction:column;gap:12px}
.cg-charge{display:flex;flex-direction:column;gap:10px}
.cg-ligne{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cg-pied{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px}
.cg-etat{flex:1}
.cg-ajouter{margin-top:12px;align-self:flex-start}
/* Mes stocks (#/stocks, Pro) : une carte par fourniture, quantité modifiable sur place, pense-bête */
.st-stock-liste{display:flex;flex-direction:column;gap:10px}
.st-stock{display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.st-stock-tete{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:0;color:inherit;font:inherit;text-align:start;cursor:pointer}
.st-stock-corps{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;overflow-wrap:anywhere}
.st-stock-pied{display:flex;align-items:flex-end;gap:8px}
.st-stock-qte{flex:0 1 160px;margin:0}
.st-stock-bas{white-space:nowrap}
.vi-gestes{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
/* Message pour Instagram et tes mails : replié en bas de Mon formulaire (retours de Marco du 20/10/2026, soir) */
.tp-accueil-titre{padding-block:10px}
.tp-accueil-titre .sub{margin-top:2px}
.tp-accueil-fleche{transform:rotate(90deg);transition:transform .2s}
.carte-accueil[open] .tp-accueil-fleche{transform:rotate(-90deg)}
.carte-accueil .btn.mini{align-self:flex-start}
.tp-accueil-texte{margin:0;white-space:pre-wrap;user-select:text;overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.tp-accueil-fleche{transition:none}}