/* Carnet de croquis : le style de l'appli (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;
  /* Couleur d'alerte (« À compléter », « Acompte pas reçu ») : fixe, jamais remplacée par le style choisi (style-appli.js
     et look.js ne posent que --bg, --card, --soft, --ink, --line, --mut, --acc, --btn, --onbtn). Texte et point : #B42318
     (4,6:1 au moins sur tous les fonds clairs proposés) ; pastille : fond #B42318, texte blanc (6,5:1) dans les deux thèmes. */
  --alerte:#B42318;--alerte-fond:#B42318;--sur-alerte:#FFFFFF;
  --police:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --police-titre:'Shantell Sans',Georgia,'Comic Sans MS',cursive;
  --barre:var(--barre-mesuree,72px); /* hauteur mesurée par barre-libelles.js (libellés sur 2 lignes) */
  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;--alerte:#FF8A7A;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;--alerte:#FF8A7A;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-block:4px;padding-inline:8px 10px;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}
/* Photo de profil de la personne (lot 4 du document 26) : un rond à droite du nom de la fiche, un petit appareil photo
   dessus ; dans les listes, la photo remplace l'initiale (.ava img) */
.ava-photo{background:var(--soft)}
.avatar-bouton{position:relative;flex:none;width:52px;height:52px;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;color:var(--ink)}
.avatar-entete{width:52px;height:52px;font-size:21px}
.avatar-pastille{position:absolute;inset-inline-end:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:var(--card);border:1.5px solid var(--line);display:grid;place-items:center}
.avatar-feuille{display:flex;flex-direction:column;gap:12px}
.avatar-apercu{display:flex;justify-content:center;padding:6px 0 4px}
.avatar-grand{width:132px;height:132px;font-size:48px}
.avatar-pro .note-pro{margin:0}
.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;min-width:0;overflow:hidden;text-overflow:ellipsis}
.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)}
.champ-en-erreur{border-color:var(--acc);box-shadow:0 0 0 2px 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:flex-start;gap:12px;min-height:44px;width:100%;background:none;border:0;padding:9px 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}
/* Case et texte sur plusieurs lignes : la case reste en face de la première ligne */
.ck > :not(.bx){padding-top:3px}
.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}
.pad>.txt{overflow-wrap:break-word} /* texte agrandi : une adresse e-mail trop large passe à la ligne */
.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)}
.li-libelle{cursor:pointer;-webkit-user-select:none;user-select:none}
.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)}
/* Contrôle 375 (29/10/2026) : la valeur garde 4 em (un montant « 70,00 € » tient entier, sans être rogné ni coupé).
   Vérification du 29/10/2026 (« Mindestal / ter » à ×1,5) : la valeur à côté d'un libellé n'est plus coupée n'importe où ;
   elle ne descend pas sous son mot le plus long (le libellé se resserre), et un mot trop large rapetisse (mots-entiers.js) */
.kv b{text-align:end;min-width:min(4em,100%);overflow-wrap:break-word}
.kv>span+b{overflow-wrap:normal}
/* Écran étroit (zoom du texte : moins de 340 px de large) : la valeur garde 7 em, sinon elle passe sous le libellé, à
   droite. À 375 px sans agrandir, la mise en page ne change pas */
@media (max-width:340px){
  .kv:has(>span+b){flex-wrap:wrap;row-gap:2px}
  .kv>span+b{flex:1 1 0;min-width:min(7em,100%)}
}
.kv .col b{text-align:start}
.kv .col .sub{margin:0}
.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)}
/* Bandeau d'information (rappels, réservation à voir, doublon possible) : cadre neutre, le rouge reste aux alertes (tour du 03/11/2026, défauts 24 et 31) */
.ban.ban-info{border-color:color-mix(in srgb,var(--line) 35%,transparent)}
/* Écran étroit (texte zoomé, vérification du 29/10/2026, ×2) : la pastille et le texte d'un bandeau passent l'un sous
   l'autre ; à 375 px sans agrandir, rien ne change */
@media (max-width:340px){
  .ban:has(>.pill){flex-wrap:wrap}
  .ban>.pill+span{min-width:min(6em,100%);flex:1 1 0}
}
.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:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual}
/* Titres : à la ligne entre deux mots seulement ; un mot trop long fait rapetisser le titre (composants.js ajusterMots) */
.titre-trait > .h{min-width:0;max-width:100%}
.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}
/* Vague du titre (29/10/2026, « Ton agenda » : la vague allait bien au-delà du mot) : dans une grille (en-tête de
   l'agenda), la boîte n'est pas étirée sur toute la colonne, elle garde la largeur du titre */
.titre-trait{justify-self:start}
.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:flex-start}
.tab span{width:48px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center}
/* Libellé : 2 lignes au plus, coupées entre deux mots, jamais dans un mot (ni « … », ni césure) ; un mot trop large fait
   rapetisser les libellés ensemble (--tab-echelle, 70 % au moins), au-delà la barre passe aux icônes seules
   (barre-libelles.js), le nom reste lu par les lecteurs d'écran */
.tab b{font-weight:700;font-size:calc(var(--tab-echelle,1) * 1em);width:100%;max-width:100%;padding-inline:3px;box-sizing:border-box;text-align:center;line-height:1.15;white-space:normal;overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual;text-wrap:balance}
.barre.icones-seules .tab b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.barre.icones-seules .tab{justify-content:center}
.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;justify-content:center}
  .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}
}
/* Très petit téléphone (320 × 568, N3 de la vérification 1.4) ou écran couché : image plus basse, le bouton reste plus près */
@media (max-height:600px){.vi-image{height:120px}}
@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}
/* De droite à gauche, le sous-écran vient de la gauche : son ombre passe de l'autre côté */
[dir=rtl] .couche-volante{box-shadow:10px 0 28px rgba(0,0,0,.14)}
.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;max-width:100%;white-space:normal;border-radius:14px} /* passe à la ligne (défaut 14) */
.dm-adresse{font-size:13px;color:var(--mut);margin-top:-8px;overflow-wrap:anywhere} /* adresse vue par la clientèle (défaut 34) */

/* 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-inline-start: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{flex:1;min-width: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)}
/* En-tête de l'agenda sur téléphone (lot 8) : la pastille d'ouverture monte sur la ligne du surtitre, à droite ; le
   titre n'a plus que le bouton des réglages à côté, il garde sa taille et tient sur une ligne. La pastille est moins
   haute à l'œil, sa zone de toucher garde 44 px (::after). */
@media (max-width:819px){
  .ag-entete{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
  .ag-entete .titres{display:contents}
  .ag-entete .titres > .surtitre{grid-column:1;grid-row:1;align-self:center}
  .ag-entete .titres > :not(.surtitre){grid-column:1;grid-row:2;min-width:0}
  .ag-entete > .ag-ouverture{grid-column:2 / -1;grid-row:1;justify-self:end;min-height:32px;position:relative;margin-bottom:2px}
  .ag-entete > .ag-ouverture::after{content:'';position:absolute;inset:-6px 0}
  .ag-entete > .rnd{grid-column:2;grid-row:2;justify-self:end}
  /* Le « i » du tuto (03/11/2026) : à gauche de la roue des réglages, sur la même ligne */
  .ag-entete:has(> .aide-i){grid-template-columns:minmax(0,1fr) auto auto}
  .ag-entete > .rnd.aide-i{grid-column:2}
  .ag-entete:has(> .aide-i) > .rnd:not(.aide-i){grid-column:3}
}
/* 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)}
/* Chevron vertical : la règle des flèches de direction ([dir=rtl] .fl) ne doit pas le coucher de droite à gauche */
[dir=rtl] .ag-repli .ag-repli-fleche{transform:rotate(90deg)}
[dir=rtl] .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-statut-resume{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.acompte-sans-email{font-weight:600}
.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)}
/* De droite à gauche, « Plus d'actions » pointe vers la gauche comme les autres flèches */
[dir=rtl] .fi-acc-bouton::after{transform:rotate(135deg)}
.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 prestation » : 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}
/* Fiche, lignes Acompte, Prestations, Solde (21/10/2026) : une valeur trop longue pour la ligne (« 50,00 € · avant le mer. 28 oct. »
   à 375 px, plus longue en allemand) passe à la ligne, calée à droite, au lieu de pousser la flèche hors du cadre ;
   une valeur qui tient reste sur une ligne ; balance : deux lignes de longueur proche (sans effet sur une seule ligne) */
.fi-fiche .r em{white-space:normal;text-align:end;text-wrap:balance}

/* ===== 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}
.ch-detail{font-size:clamp(10.5px,3vw,12px);line-height:1.2}
.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}
/* Texte agrandi (vérification du 29/10/2026, « Carte bancaire » rogné à ×2) : le nom passe à la ligne entre deux mots */
.ch-nom{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;min-width:0}
.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)}
/* Cadre étroit (375 px, texte agrandi : la condition est en em, elle suit la taille du texte), repris d'une autre appli Buno :
   chaque mois devient une carte, le mois et son total en tête, les montants non nuls dessous avec leur libellé.
   Plus de colonne coupée au bord ni de défilement de côté (encaissements.js, tableauMois). */
.en-defile{container-type:inline-size;font-size:14px}
.en-table .en-lib{display:none}
@container (max-width:40em){
  .en-table,.en-table thead,.en-table tbody,.en-table tfoot{display:block}
  .en-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .en-table tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:10px 8px;border-bottom:1px solid var(--line)}
  .en-table tfoot tr{border-bottom:0}
  .en-table th,.en-table td{display:block;padding:0;border:0;white-space:normal;min-width:0}
  .en-table tr > [role=rowheader]{flex:1 1 auto;order:-2}
  .en-table .en-total{order:-1;margin-inline-start:auto;white-space:nowrap}
  .en-table td.en-num:not(.en-total){flex:1 1 100%;display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-align:start;font-size:13px;font-weight:500;color:var(--mut)}
  .en-table td.en-num.en-vide{display:none}
  .en-table .en-lib{display:inline;min-width:0}
  .en-table td > span:last-child{white-space:nowrap;color:var(--ink)}
  .en-table td.ar-negatif > span:last-child{color:var(--acc)}
}
.en-total{font-weight:700}
.en-marque{display:inline-block;align-self:flex-start;width:auto;margin-inline-start:0;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}
/* Texte agrandi (vérification du 29/10/2026, « Durchschnittliche » coupé à ×2) : une tuile garde au moins 8,5 em ; sinon
   une seule colonne. À 375 px sans agrandir, toujours 2 colonnes ; dès 700 px, 4 (règle plus bas) */
.ch-tuiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,8.5em),1fr))}
/* Analyse personnalisée (lot 5 du document 26, repris d'une autre appli Buno) : courbe, camembert et tableau ; les couleurs des
   parts sont celles de l'appli, en clair et en sombre */
.ch-courbe{display:block;width:100%;height:auto;max-height:180px;color:var(--acc)}
.ch-courbe .ch-axe{stroke:var(--line);stroke-width:1}
.ch-courbe-trait{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ch-courbe-point{fill:currentColor}
.ch-courbe .ch-mois{fill:var(--mut);font-size:9px}
.ch-camembert-bloc{display:flex;align-items:center;gap:16px;padding:14px;flex-wrap:wrap}
.ch-camembert{width:132px;height:132px;flex:none}
.ch-camembert-fond{fill:none;stroke:var(--soft);stroke-width:7}
.ch-camembert-part{fill:none;stroke-width:7}
.ch-camembert-part.ch-part-1{stroke:var(--acc)}.ch-camembert-part.ch-part-2{stroke:var(--s2)}.ch-camembert-part.ch-part-3{stroke:var(--s3)}
.ch-camembert-part.ch-part-4{stroke:var(--s4)}.ch-camembert-part.ch-part-5{stroke:var(--s5)}.ch-camembert-part.ch-part-6{stroke:var(--mut)}
.ch-legende{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1 1 12em;min-width:0}
.ch-legende li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;font-size:14px}
.ch-pastille{width:12px;height:12px;border-radius:4px;display:block}
.ch-pastille.ch-part-1{background:var(--acc)}.ch-pastille.ch-part-2{background:var(--s2)}.ch-pastille.ch-part-3{background:var(--s3)}
.ch-pastille.ch-part-4{background:var(--s4)}.ch-pastille.ch-part-5{background:var(--s5)}.ch-pastille.ch-part-6{background:var(--mut)}
.ch-table{width:100%;border-collapse:collapse;font-size:14px}
.ch-table th,.ch-table td{padding:9px 14px;text-align:start;border-bottom:1px solid var(--soft);vertical-align:top}
.ch-table td{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.ch-table thead th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700}
.ch-table thead th:last-child{text-align:end}
.ch-table tbody th{font-weight:400}
.ch-table tbody th small{display:block}
.ch-table tbody tr:last-child th,.ch-table tbody tr:last-child td{border-bottom:0}
.ch-perso-liste{display:flex;flex-direction:column}
.ch-perso{padding:10px 14px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--soft)}
.ch-perso:last-child{border-bottom:0}
.ch-perso .rr{padding:0;gap:6px;min-height:0}
.ch-perso-off b{color:var(--mut)}
.ch-actions{margin-top:8px}
@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}
/* Texte agrandi (×1,5, « Ajouter une carte cadeau » rogné) : le texte passe sur deux lignes, entre deux mots, au lieu
   d'être coupé en « … » ; à 375 px sans agrandir, il tient sur une ligne comme avant */
.rg-une-ligne{white-space:normal}
.rg-une-ligne>span{overflow:visible;text-overflow:clip;text-align:center;overflow-wrap:normal;word-break:normal}
.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-inline-start: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)}
[dir=rtl] .carte-accueil .tp-accueil-fleche{transform:rotate(90deg)}
[dir=rtl] .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}}

/* ===== Droite à gauche (arabe, hébreu ; 21/10/2026) : liens et codes à copier restent de gauche à droite, calés à droite ===== */
[dir=rtl] .cl-lien,[dir=rtl] .ar-code{direction:ltr;text-align:end}
/* Textes écrits par l'artiste ou sa clientèle (idée, réponses, messages, notes, présentation, conditions) : chaque paragraphe
   dans le sens de sa propre écriture (une idée en français dans l'appli en arabe garde son point à la fin). Pas les phrases
   du catalogue : une phrase arabe qui commence par un nom latin passerait de gauche à droite. */
[dir=rtl] :is(.ar-reponse .txt,.ar-pre,.ar-resume,.cl-bio,.cl-accueil,div.cl-texte-libre>.txt,.cl-mot .txt,.tp-accueil-texte,.rg-message-jour .txt){unicode-bidi:plaintext}
/* Champs dir="auto" (el(), public/js/sens.js) : vides, le navigateur les met de gauche à droite (texte d'exemple et curseur
   à gauche) ; ici ils suivent la page, et ce qui est tapé garde son propre sens (un nom latin reste de gauche à droite) */
[dir=rtl] :is(input,textarea)[dir=auto]{direction:rtl;unicode-bidi:plaintext}

/* ===== En-tête qui suit (28/10/2026) : titre et flèche de retour collés en haut quand on fait défiler =====
   Le haut de .contenu (zone sûre + 24 px) passe dans l'en-tête : au repos, rien ne bouge ; collé, son fond opaque
   couvre la zone sûre de l'iPhone et le titre reste dessous (top négatif : 16 px de marge en moins une fois collé).
   Bords : la marge de .contenu (22, puis 36 px) est reprise pour que le fond aille d'un bord à l'autre. Un en-tête
   trop haut (texte très agrandi, entete-collee.js) ne colle plus. */
.couche > .entete:first-child{position:sticky;top:-16px;z-index:6;background:var(--bg);margin:calc(-24px - env(safe-area-inset-top,0px)) -22px -10px;padding:calc(24px + env(safe-area-inset-top,0px)) 22px 10px}
.couche > .entete.entete-libre:first-child{position:relative}
.defile .couche > .entete:first-child:not(.entete-libre){box-shadow:0 1.5px 0 var(--soft)}
@media (min-width:820px){.couche > .entete:first-child{margin-inline:-36px;padding-inline:36px}}
/* Fiches en grande feuille (une demande) : l'en-tête colle en haut de la feuille, sous la croix (déjà collée) */
.sh.haute > .entete{position:sticky;top:-6px;z-index:1;background:var(--bg);margin-block:-6px 0;margin-inline:-18px;padding-block:6px 8px;padding-inline:18px 72px}
@media (min-width:1280px){.sh.haute > .entete{top:-18px;margin-block:-18px 0;margin-inline:-24px;padding-block:18px 8px;padding-inline:24px 78px}}
/* 1280 px : .contenu n'a plus de marge et coupe ce qui dépasse ; la flèche ne recule plus de 6 px (elle était rognée) */
@media (min-width:1280px){.couche > .entete:first-child{margin-inline:0;padding-inline:0}.couche > .entete:first-child .retour{margin-inline-start:0}}

/* Enregistrer collé en bas de l'écran (Mon lien, Ma page ; 30/10/2026) : au-dessus de la barre d'onglets, toujours visible */
.enregistrer-bas{position:sticky;bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px));z-index:6;display:flex;flex-direction:column;margin:4px -22px 0;padding:10px 22px 12px;background:var(--bg);border-top:1.5px solid var(--line)}
.enregistrer-bas > .btn{width:100%}

/* Mots entiers (28/10/2026, public/app/js/mots-entiers.js) : à la ligne entre deux mots seulement ; un mot trop large
   fait rapetisser son libellé. Le tableau des forfaits garde ses colonnes (table-layout fixe) au lieu de déborder. */
.ch-libelle,.ac-tuile-lab,.tableau-forfaits th,.tableau-forfaits td{overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual;min-width:0}
.tableau-forfaits{table-layout:fixed}
/* Texte agrandi (vérification du 29/10/2026) : sous 20 em, le tableau garde 20 em et défile en largeur dans sa boîte ;
   à 375 px sans agrandir, il tient dans sa place comme avant */
.tableau-defile{overflow-x:auto;container-type:inline-size;border-radius:18px}
@container (max-width:20em){.tableau-forfaits{min-width:20em}}
.tableau-forfaits thead th:not(:first-child){width:24%}
.tableau-forfaits tbody td{padding-inline:4px}
/* Texte d'une case : à la taille de la case, pour rapetisser avec elle */
.tableau-forfaits td .sub{font-size:inherit}

/* Fiche « Tout affiché » (lot 10, Réglages → Fiches clientes) : même carte et même titre qu'un accordéon, tout déplié,
   ni chevron ni main au survol ; le titre passe à la ligne entre deux mots au lieu d'être coupé */
.fi-acc-fixe>.fi-acc-titre{margin:0;font:inherit;color:inherit;cursor:auto}
.fi-acc-fixe>.fi-acc-titre::after{content:none}
.fi-acc-fixe>.fi-acc-titre .lab{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal}

/* ===== Contrôle à 375 px des 5 langues (29/10/2026, texte agrandi ×1,5 et ×2) =====
   Une ligne libellé + valeur (ou interrupteur) : quand les deux ne tiennent plus côte à côte, la valeur passe dessous, à
   droite, au lieu de rogner le libellé ou de le couper lettre par lettre. Le libellé garde au moins 6 em (4 em dans une
   ligne à interrupteur ou à bouton, 7 em pour une valeur de la fiche) : à 375 px sans agrandir, rien ne bouge (comparé
   image par image le 29/10/2026, fr et de). Seulement les lignes de liste (.r-txt) et de la fiche : une ligne libellé +
   interrupteur garde son interrupteur à droite. Les lignes clé-valeur (.kv) gardent leur mise en page. */
.r:has(>.r-txt),.fi-fiche .r{flex-wrap:wrap;row-gap:2px}
.r>.r-txt{flex:1 1 0;min-width:min(6em,100%)}
.r>.r-txt+em{flex:0 0 auto;max-width:100%}
.fi-fiche .r>em{flex:1 1 0;min-width:min(7em,100%)}
.rr{flex-wrap:wrap;row-gap:8px}
.rr>.flex1{min-width:min(4em,100%)}
/* Écran étroit (zoom du texte : moins de 340 px ; vérification du 29/10/2026, « Remplissages à proposer » rogné à ×1,5) :
   le libellé garde 7 em, sinon l'interrupteur ou les boutons passent dessous. À 375 px sans agrandir, 4 em comme avant */
@media (max-width:340px){.rr>.flex1{min-width:min(7em,100%)}}
.rr>.flex1+*{margin-inline-start:auto}
/* Liste des demandes : « il y a 3 min » passe sous le nom plutôt que de sortir de l'écran */
.ar-ligne-haut{flex-wrap:wrap}
/* Libellés suivis par mots-entiers.js (SELECTEUR_MOTS_ENTIERS_375) : un mot trop large rapetisse (70 % au moins) au
   lieu d'être coupé n'importe où. Titre ou libellé qui ne tient pas même réduit à 70 % (ajusterMots, composants.js) : coupé en fin de ligne avec un trait d'union,
   à une césure de la langue, plutôt que de sortir de sa place */
.mot-trop-long{overflow-wrap:break-word!important;-webkit-hyphens:auto!important;hyphens:auto!important}
/* En-tête d'écran : le titre garde au moins 6 em à côté du bouton retour et des actions ; sinon (×2) il passe sur sa
   ligne, toute la largeur, sous le retour, et les actions le suivent (à 375 px sans agrandir, rien ne bouge) */
.entete{flex-wrap:wrap}
.entete .titres{flex-basis:6em}
/* Titre d'un bloc de la fiche : le compte ou la pastille passent dessous quand le titre n'a plus 6 em */
.fi-acc-titre{flex-wrap:wrap;row-gap:4px}
.fi-acc-titre .lab{flex-basis:6em}
/* Pastilles de statut des listes : jamais plus larges que la ligne, elles passent sur deux lignes */
.ar-ligne-bas .pill,.ar-ligne-bas .ar-tag,.ar-ligne-bas .tg{max-width:100%;white-space:normal}
/* Bouton court dans une carte (« Voir l'abonnement ») et étiquette Pro longue : jamais plus larges que leur place */
.card>.btn.mini,a.etiquette-pro{max-width:100%;white-space:normal;text-align:center}
/* Carte cadeau en 3 étapes (repris d'une autre appli Buno) : achetée, offerte, utilisée pour la prestation */
.rg-etapes-cheque{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:4px}
.rg-etapes-cheque li{padding-inline-start:2px}
/* Petit « i » d'aide en haut à droite d'un écran (repris d'une autre appli Buno) : trait plus épais, feuille de points courts */
.aide-i .ln{stroke-width:2.6}
.aide-points{margin:0 0 16px;padding-inline-start:20px;display:flex;flex-direction:column;gap:10px;font-size:15.5px;line-height:1.4}
.aide-points li::marker{color:var(--acc)}
/* Tuto illustré des « i » (03/11/2026, repris d'une autre appli Buno) : on glisse d'une image à l'autre, points, Suivant / Fermer.
   8 à 12 images : points de 24 px de large (12 tiennent à 375 px) */
.tt-piste{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:20px;outline-offset:3px}
.tt-piste::-webkit-scrollbar{display:none}
.tt-etape{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column;gap:14px}
.tt-cadre{border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:var(--soft)}
.tt-image{display:block;width:100%;height:100%;object-fit:cover}
/* une seule des deux images par thème (sinon .tt-image l'emporte sur .onlyso), thème de l'appareil compris */
.tt-image.onlyso,[data-theme=sombre] .tt-image.onlycl{display:none}
[data-theme=sombre] .tt-image.onlyso{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme=clair]) .tt-image.onlycl{display:none}:root:not([data-theme=clair]) .tt-image.onlyso{display:block}}
.tt-texte{margin:0;padding:0 6px;font-size:16px;line-height:1.45;text-align:center;min-height:4.35em;text-wrap:pretty}
.tt-points{display:flex;justify-content:center;flex-wrap:wrap}
.tt-point{width:24px;height:36px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}
.tt-point::before{content:'';width:8px;height:8px;border-radius:99px;background:var(--mut);opacity:.45;transition:width .2s,background-color .2s,opacity .2s}
.tt-point.on::before{width:20px;background:var(--acc);opacity:1}
.tt-boutons{display:flex;gap:10px}
.tt-boutons .btn{flex:1 1 0;min-width:0}
.tt-boutons .tt-suivant{flex-grow:1.5}
@media (prefers-reduced-motion:reduce){.tt-point::before{transition:none}}
/* « Voir ma page comme un client » à la fin de la visite (repris d'une autre appli Buno) : un lien sous les deux boutons */
.vi-voir-page{min-height:44px;margin:0 auto}
@media (min-width:1024px){.vi-actions{flex-wrap:wrap}.vi-voir-page{flex-basis:100%}}

/* Carte de fidélité (03/11/2026, reprise d'une autre appli Buno) : tampons de la carte en cours */
.rg-tampons{display:grid;grid-template-columns:repeat(5,minmax(0,40px));gap:8px}
.rg-tampon{width:40px;height:40px;border-radius:50%;border:1.5px dashed var(--line)}
.rg-tampon.on{background:var(--acc);border:1.5px solid var(--acc)}

/* Style de mon appli (03/11/2026, point 1 de Marco ; même rangement qu'une autre appli Buno le 03/11/2026) : un aperçu dans le
   thème montré (bascule « Aperçu en »), collé sous l'en-tête quand on descend dans les réglages ; Ambiances, puis Réglage
   fin (fond, couleur, écriture des titres) en tuiles serrées pour peu défiler à 375 px */
.sa-apercu{background:var(--bg);color:var(--ink);border:1.5px solid var(--line);border-radius:22px;padding:14px 14px 0;display:flex;flex-direction:column;gap:10px;min-width:0;overflow:hidden;box-shadow:0 14px 34px -22px rgba(0,0,0,.55)}
.sa-apercu .h{margin:0}
.sa-ap-tete{align-self:flex-start}
.sa-ap-titre{margin:0;font-size:26px;line-height:1.1;overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual}
.sa-ap-tete .trait{color:var(--acc)}
.sa-ap-carte{padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0;background:var(--card);color:var(--ink);border-color:var(--line)}
.sa-ap-carte .sub{margin:0;font-size:14px;color:var(--mut)}
.sa-ap-ligne{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.sa-ap-carte-titre{font-size:16px;min-width:0;overflow-wrap:break-word}
.sa-ap-tag{font-size:12px;font-weight:700;color:var(--acc);border:1.5px solid var(--acc);border-radius:999px;padding:1px 9px;white-space:nowrap}
.sa-ap-bouton{align-self:flex-start;background:var(--btn);color:var(--onbtn);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:700;max-width:100%}
.sa-ap-barre{display:flex;justify-content:space-around;gap:4px;border-top:1.5px solid var(--line);margin:0 -14px;padding:7px 6px 8px;background:var(--bg);color:var(--mut)}
.sa-ap-onglet{width:46px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.sa-ap-onglet.on{background:var(--btn);color:var(--onbtn)}
.sa-lisible{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px}
.sa-lisible svg{flex:none}
.sa-ech{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;border-radius:12px;background:var(--bg);color:var(--ink);border:1px solid var(--soft)}
.sa-ech-aa{font-size:22px;line-height:1}
.sa-ech-point{width:14px;height:14px;border-radius:50%;flex:none}
.tuile-fond{gap:6px}
.fond-pastille{width:40px;height:28px;border-radius:10px;border:1.5px solid var(--line);flex:none}
.sa-buno{margin-top:4px}
.sa-pro,.sa-fin{display:flex;flex-direction:column;gap:8px}
.sa-pro .rr-titre{margin-top:10px}
.sa-pro>.rr-titre:first-child{margin-top:0}
.sa-fin .lab{margin-top:6px}
.sa-fin-aide{margin:0 4px}
.sa-vue .chips{margin-bottom:-4px}
/* Tuiles serrées : 3 ambiances et 3 fonds par ligne à 375 px (6 de chaque : deux lignes), sans couper un mot */
.sa-ambiances,.sa-fin .polices:has(.tuile-fond){grid-template-columns:repeat(3,minmax(0,1fr))}
.sa-ambiances .sa-ambiance{min-height:0;padding:6px 6px 8px;gap:6px}
.sa-ambiances .sa-ech{min-height:40px;padding:4px 6px}
.sa-ambiance.on{outline:2.5px solid var(--acc);outline-offset:2px}
.sa-fin .tuile-fond{min-height:62px;padding:6px 4px}
.sa-fin .tuile-fond .fond-pastille{width:34px;height:24px}
.sa-ambiances .tuile-police-libelle,.sa-fin .tuile-fond .tuile-police-libelle{overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual;max-width:100%;line-height:1.2}
@media (min-width:560px){.sa-ambiances,.sa-fin .polices:has(.tuile-fond){grid-template-columns:repeat(6,minmax(0,1fr))}}
/* Aperçu toujours visible : collé sous l'en-tête (--sa-haut, look.js) quand on descend dans les réglages. Téléphone : en
   petit pour laisser la place aux choix. Grand écran : la colonne de l'aperçu (vue, aperçu, lisibilité) reste à côté des
   réglages. Écran trop bas : il ne colle plus. */
.sa-mise{display:flex;flex-direction:column;gap:14px;min-width:0}
.sa-mise[hidden]{display:none}
.sa-cote{display:contents}
.sa-reglages{display:flex;flex-direction:column;gap:14px;min-width:0}
.sa-colle{position:sticky;top:var(--sa-haut,0px);z-index:5;background:var(--bg);margin-inline:-6px;padding:4px 6px 10px}
@media (max-width:1099px){
  .sa-colle .sa-apercu{padding:10px 12px 0;gap:7px;border-radius:20px}
  .sa-colle .sa-ap-titre{font-size:20px}
  .sa-colle .sa-ap-carte{padding:8px 12px;gap:2px}
  .sa-colle .sa-ap-carte-titre{font-size:15px}
  .sa-colle .sa-ap-bouton{padding:4px 12px;margin-top:2px;font-size:13.5px}
  .sa-colle .sa-ap-barre{margin:0 -12px;padding:5px 6px 6px}
  .sa-colle .sa-ap-onglet{height:26px}
}
@media (min-width:820px) and (max-width:1099px) and (min-height:1000px){
  .sa-colle .sa-apercu{padding:14px 14px 0;gap:10px;border-radius:22px}
  .sa-colle .sa-ap-titre{font-size:26px}
}
@media (max-height:560px){.sa-colle{position:static}}
/* Style de ma page (03/11/2026, soir) : l'aperçu reste collé sous l'en-tête aussi, à toutes les largeurs ; en petit sur
   téléphone pour laisser la place aux choix ; il ne colle plus sur un écran trop bas */
.look-colle{position:sticky;top:var(--sa-haut,0px);z-index:5;background:var(--bg);margin-inline:-6px;padding:4px 6px 10px}
@media (max-width:819px){
  .look-colle .apercu-look{padding:10px 14px;gap:2px}
  .look-colle .apercu-nom{font-size:22px}
  .look-colle .apercu-look>.sub{display:none}
  .look-colle .apercu-bouton{min-height:34px;margin-top:4px;padding:0 14px;font-size:14px}
}
@media (max-height:560px){.look-colle{position:static}}
@media (min-width:1100px){
  .sa-mise{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:24px;align-items:start}
  .sa-cote{display:flex;flex-direction:column;gap:14px;grid-column:2;grid-row:1;position:sticky;top:calc(var(--sa-haut,0px) + 6px);max-height:calc(100vh - var(--sa-haut,0px) - 12px);overflow-y:auto;scrollbar-width:thin;padding-bottom:6px}
  .sa-reglages{grid-column:1;grid-row:1}
  .sa-colle{position:static;margin:0;padding:0;background:none}
}
/* Titres en écriture décorative : les alphabets qu'elle n'a pas (arabe, hébreu, thaï, devanagari, chinois, japonais,
   coréen, cyrillique, grec) et le vietnamien gardent l'écriture de base, lisible (public/js/style-appli.js LANGUES_SANS_DECOR) */
html:is(:lang(ar),:lang(he),:lang(th),:lang(hi),:lang(zh),:lang(ja),:lang(ko),:lang(ru),:lang(uk),:lang(el),:lang(vi),:lang(bg),:lang(sr),:lang(bn),:lang(ur),:lang(ta),:lang(te),:lang(mr),:lang(ka),:lang(mk),:lang(hy),:lang(kk),:lang(km),:lang(ne),:lang(si),:lang(mn))[data-police] :is(.h,h1,h2,h3,.ac-surtitre,.rr-titre>b,.carte-page-titre),
html:is(:lang(ar),:lang(he),:lang(th),:lang(hi),:lang(zh),:lang(ja),:lang(ko),:lang(ru),:lang(uk),:lang(el),:lang(vi),:lang(bg),:lang(sr),:lang(bn),:lang(ur),:lang(ta),:lang(te),:lang(mr),:lang(ka),:lang(mk),:lang(hy),:lang(kk),:lang(km),:lang(ne),:lang(si),:lang(mn)) .sa-ap-titre{font-family:var(--police);font-weight:700;letter-spacing:normal}

/* Icône de l'appli au choix (03/11/2026, point 2 de Marco, repris d'une autre appli Buno) : aperçu, rangée de 6 dessins, curseur de teintes */
.sa-icones-bloc{display:flex;flex-direction:column;gap:10px}
.sa-icone-apercu{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 12px;border-radius:20px;background:var(--soft);text-align:center}
.sa-icone-grande{width:88px;height:88px;border-radius:20px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.sa-icone-app{font-size:13.5px;font-weight:700;color:var(--ink)}
.sa-icone-nom{font-size:12.5px;color:var(--mut)}
.sa-icones-bloc{container-type:inline-size}
.sa-icones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@container (min-width:40em){.sa-icones{grid-template-columns:repeat(6,minmax(0,1fr))}}
.sa-teinte-zone{display:flex;flex-direction:column;gap:8px;padding:12px 14px 10px;border-radius:18px;background:var(--soft)}
.sa-teinte-zone[hidden]{display:none}
.sa-teinte-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sa-teinte-nom{font-size:13.5px;font-weight:700;color:var(--ink)}
.sa-teinte-aide{margin:0}
.sa-teinte{-webkit-appearance:none;appearance:none;display:block;width:100%;height:30px;margin:4px 0;border-radius:15px;background:var(--gamme);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer}
.sa-teinte::-webkit-slider-runnable-track{height:30px;background:transparent;border:0}
.sa-teinte::-moz-range-track{height:30px;background:transparent;border:0}
.sa-teinte::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:34px;height:34px;margin-top:-2px;border-radius:50%;background:var(--teinte);border:4px solid var(--teinte-trait);box-shadow:0 0 0 2px var(--card),0 2px 8px rgba(0,0,0,.35)}
.sa-teinte::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--teinte);border:4px solid var(--teinte-trait);box-shadow:0 0 0 2px var(--card),0 2px 8px rgba(0,0,0,.35)}
.sa-teinte:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px}
.sa-icones .sa-icone{min-height:96px;padding:8px 4px;gap:6px;justify-content:flex-start}
.sa-icone-img{width:56px;height:56px;border-radius:13px;display:block;box-shadow:0 0 0 1.5px var(--line)}
.sa-icone.on{outline:2.5px solid var(--acc);outline-offset:2px}
.sa-icone .tuile-police-libelle{overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual;max-width:100%;line-height:1.2}
.sa-explication{padding:14px 16px}
.sa-explication b{display:block}

/* Mood du jour (03/11/2026, point 3 de Marco, repris d'une autre appli Buno, teintes et classes renommées pour les moods des pros ; 5 moods depuis le 03/11/2026, puis 9 le soir ; teintes reprises des 9 du premier lot, déjà contrôlées) */
/* Mood du jour (30/10/2026, points 15 puis 2) : 9 personnages en grille, le petit calendrier coloré, la répartition, la
   série, les jours de la semaine et les liens avec l'activité. Une teinte calme par mood (--mood-*, ni rouge ni
   terracotta), plus claire en sombre ; chiffres du calendrier en var(--card) (4,5 au moins sur chacune, clair et sombre).
   Le choix du jour : fond doux et trait de couleur, sans aplat de couleur. */
:root{--mood-top:#8A5F00;--mood-motive:#1D6E65;--mood-ca_va:#356A9E;--mood-fatigue:#4A50B8;--mood-stresse:#8E4468;--mood-zen:#277A4C;--mood-inspire:#6E5A8E;--mood-bof:#5A616B;--mood-repos:#5E6B26}
[data-theme=sombre]{--mood-top:#F0C24A;--mood-motive:#5CC7B8;--mood-ca_va:#8DB8E8;--mood-fatigue:#A3A8FF;--mood-stresse:#E59AC0;--mood-zen:#5CC088;--mood-inspire:#B9A6E0;--mood-bof:#A9B0BA;--mood-repos:#B5C46E}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=clair]){--mood-top:#F0C24A;--mood-motive:#5CC7B8;--mood-ca_va:#8DB8E8;--mood-fatigue:#A3A8FF;--mood-stresse:#E59AC0;--mood-zen:#5CC088;--mood-inspire:#B9A6E0;--mood-bof:#A9B0BA;--mood-repos:#B5C46E}
}
.mood-carte{display:flex;flex-direction:column;gap:10px;padding:16px;border-color:color-mix(in srgb,var(--line) 22%,transparent)}
.mood-question{font-size:20px;margin:2px 0 4px}
/* 9 moods (03/11/2026, soir, comme une autre appli Buno) : 3 par ligne, trois lignes pleines */
.mood-choix-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:520px}
.mood-choix{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:10px 6px;min-height:44px;border:1.5px solid color-mix(in srgb,var(--line) 28%,transparent);border-radius:18px;background:var(--card);color:var(--ink);cursor:pointer;font:inherit}
.mood-choix.choisi{background:var(--soft);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mood-choix:disabled{opacity:.6}
.mood-image{height:64px;display:flex;align-items:flex-end;justify-content:center}
.mood-img{max-height:64px;max-width:100%;width:auto;height:auto}
.mood-nom{font-size:13.5px;font-weight:600;text-align:center;line-height:1.2;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual}
.mood-du-jour{display:flex;align-items:center;gap:14px;min-width:0;flex-wrap:wrap}
.mood-du-jour-image{width:56px;height:64px;display:flex;align-items:flex-end;justify-content:center;flex:none}
.mood-du-jour-texte{min-width:8em}
.mood-du-jour-nom{font-size:20px;line-height:1.2}
.mood-voir{align-self:flex-start;padding:0}
.mood-cal{padding:4px 14px 10px}
/* Flèches des mois du calendrier (31/10/2026, demande de Marco) : la flèche seule, sans le rond autour ; la zone à
   toucher garde 44 px */
.mood-nav .rnd{border:0;background:none}
.mood-cal-grille{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:440px;margin:0 auto}
.mood-cal-jour-nom{text-align:center;font-size:11px;color:var(--mut);font-weight:700}
.mood-cal-case{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;font-size:12.5px;background:var(--soft);color:var(--ink);font-variant-numeric:tabular-nums}
.mood-cal-case.auj{box-shadow:inset 0 0 0 2px var(--line)}
.mood-cal-case.mood-teinte{color:var(--card);font-weight:700}
.mood-top.mood-teinte{background:var(--mood-top)}
.mood-motive.mood-teinte{background:var(--mood-motive)}
.mood-ca_va.mood-teinte{background:var(--mood-ca_va)}
.mood-fatigue.mood-teinte{background:var(--mood-fatigue)}
.mood-stresse.mood-teinte{background:var(--mood-stresse)}
.mood-zen.mood-teinte{background:var(--mood-zen)}
.mood-inspire.mood-teinte{background:var(--mood-inspire)}
.mood-bof.mood-teinte{background:var(--mood-bof)}
.mood-repos.mood-teinte{background:var(--mood-repos)}
/* « Mon mood » (30/10/2026, soir, point 4) : titre centré entre deux boutons ronds plus petits, posés un peu plus loin
   des bords (le titre respire à 375 px) ; la période de la Répartition en segments sur une ligne ; anneau et camembert
   aux teintes des moods (posées par element.style) */
.entete.entete-centre{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:10px}
.entete.entete-centre .titres{text-align:center;display:flex;flex-direction:column;align-items:center}
.entete.entete-centre > .rnd{width:40px;height:40px;margin:0}
.entete.entete-centre > .rnd svg{width:18px;height:18px}
/* Avec le « i » du tuto (03/11/2026) : deux boutons à droite ; le titre garde toute la place du milieu (une ligne à 375 px) */
.entete.entete-centre:has(> .aide-i){grid-template-columns:40px minmax(0,1fr) 40px 40px;gap:6px}
.couche > .entete.entete-centre:first-child{padding-inline:30px}
@media (max-width: 400px){.entete.entete-centre h1{font-size:25px}}
@media (min-width:820px){.couche > .entete.entete-centre:first-child{padding-inline:44px}}
@media (min-width:1280px){.couche > .entete.entete-centre:first-child{padding-inline:8px}}
.mood-segments{gap:0;padding:3px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);margin-bottom:10px}
.mood-segments .chip{border:0;min-height:38px;padding-inline:6px;font-size:14px;background:none}
.mood-segments .chip.on{background:var(--btn);color:var(--onbtn)}
.mood-anneau-part{fill:none;stroke-width:7}
.mood-plein .mood-part{stroke:var(--card);stroke-width:.6}
.mood-legende{list-style:none;margin:0;padding:0 14px 14px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px}
.mood-legende li{display:flex;align-items:center;gap:6px}
.mood-tuile{background:var(--soft)}
.mood-note{margin:0 0 12px}
.mood-semaine{list-style:none;margin:0;padding:6px 14px 10px;display:flex;flex-direction:column}
.mood-semaine-ligne{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr) minmax(0,9em);align-items:center;gap:10px;min-height:40px;font-size:14px}
.mood-semaine-jour{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mood-pile{display:flex;height:10px;border-radius:999px;background:var(--soft);overflow:hidden}
.mood-seg{display:block;height:100%}
.mood-semaine-principal{margin:0;text-align:end;overflow-wrap:normal}
@media (max-width:420px){
  .mood-semaine-ligne{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"jour principal" "pile pile";gap:4px 10px;padding:6px 0}
  .mood-semaine-jour{grid-area:jour}.mood-pile{grid-area:pile}.mood-semaine-principal{grid-area:principal}
}
.mood-liens{list-style:none;margin:0;padding:12px 14px 6px;display:flex;flex-direction:column;gap:10px}
.mood-lien{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.4}
.mood-lien .ch-pastille{flex:none;transform:translateY(1px)}
.ac-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:8px}
.ac-tuile{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:16px;background:var(--soft);color:var(--ink);text-decoration:none;min-width:0;min-height:44px}
.ac-tuile-n{font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ac-tuile-texte{font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}

/* Avatar « Un Buno » (03/11/2026, point 4 de Marco, repris d'une autre appli Buno) : la tête de la mascotte des pros sur un fond doux */
.ava.ava-buno{border-color:rgba(28,27,23,.16)}
.ava-buno img{object-fit:contain}
.ava-fond-rose{background:#F6D6DC}.ava-fond-corail{background:#F7D2CB}.ava-fond-nude{background:#F2DCCF}.ava-fond-peche{background:#F8DEC6}.ava-fond-sable{background:#EFE4C8}
.ava-fond-sauge{background:#D9E6D3}.ava-fond-menthe{background:#CFE8E1}.ava-fond-ciel{background:#D4E3F2}.ava-fond-lilas{background:#E2D8F0}.ava-fond-perle{background:#E5E3E8}
.buno-etiquette{font-size:15px;margin-top:4px}
.buno-tetes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:360px}
.buno-tete{aspect-ratio:1;min-width:44px;padding:0;border-radius:50%;border:1.5px solid rgba(28,27,23,.16);overflow:hidden;cursor:pointer}
.buno-tete img{display:block;width:100%;height:100%}
.buno-tete[aria-pressed=true],.buno-fond[aria-pressed=true]{outline:3px solid var(--acc);outline-offset:2px}
.buno-fonds{display:grid;grid-template-columns:repeat(5,44px);gap:10px}
.buno-fond{width:44px;height:44px;flex:none;padding:0;border-radius:50%;border:1.5px solid rgba(28,27,23,.16);cursor:pointer}
.buno-retour{align-self:center}

/* ===== Mode découverte (03/11/2026, B8, ecrans/decouvrir.js ; repris d'une autre appli Buno) : bandeau discret et fixe, au-dessus
   de la barre sur téléphone, en bas à droite de la barre sur tablette et ordinateur ; le contenu et les toasts remontent
   d'autant ===== */
.decouverte-bandeau{position:fixed;inset-inline:0;bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px));z-index:19;display:flex;align-items:center;justify-content:center;gap:10px;padding:4px 14px;min-height:52px;background:var(--soft);color:var(--ink);border-top:1.5px solid var(--line);font-size:13.5px;font-weight:600;line-height:1.3}
.decouverte-bandeau .dc-texte{min-width:0;flex:0 1 auto;overflow-wrap:normal;word-break:normal}
.decouverte-bandeau .btn.mini{flex:none;min-height:40px;background:var(--card)}
.sans-barre>.decouverte-bandeau{bottom:0;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
.en-decouverte .contenu{padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px) + 28px + 56px)}
.en-decouverte .sans-barre .contenu{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px + 56px)}
.en-decouverte .toasts{bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px) + 70px)}
.en-decouverte .toasts.en-haut{bottom:auto}
.dc-gestes{gap:12px}
@media (min-width:820px){
  .avec-barre>.decouverte-bandeau{inset-inline-start:104px}
  .en-decouverte .toasts{bottom:80px}
}

/* 1.2 : période Pro gratuite, nouvelle version, « Commence avec Pro » (public/app/js/periode-pro.js, ecrans/commencer-pro.js) */
.ban.ban-col{flex-direction:column;align-items:stretch;gap:8px}
.pro-liste{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:4px}
.pro-actions{display:flex;flex-wrap:wrap;gap:8px}
.pro-compteur{align-self:flex-start;margin-top:6px;color:var(--ink);text-decoration:none;white-space:normal}
.pro-carte{display:flex;flex-direction:column;gap:8px}
.pro-carte .btn{align-self:flex-start}
/* « Bienvenue » et carte de l'Accueil (06/11/2026) : marge intérieure de la carte, icône « i » à sa taille */
.pro-carte{padding-bottom:14px}
.pro-carte>.sub,.pro-carte>.btn{margin-inline:14px}
.pro-carte>.sub{margin-block:0}
.pro-rassure>svg{flex:none;width:24px;height:24px}
.pro-choix{gap:12px;margin-top:10px}
.pro-choix>.col{gap:4px}
.pro-choix .sub,.pro-centre{margin:0;text-align:center}
.pro-choix .btn{white-space:normal;padding-block:6px}
/* Deux blocs Pro côte à côte, même taille ; le bloc entier est le bouton d'achat, le prix y est le plus gros (Apple 3.1.2(c)) */
.pro-blocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-top:10px}
.pro-bloc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:16px 8px 10px;color:var(--ink);font-family:inherit;text-align:center;cursor:pointer;min-height:112px}
.pro-bloc:disabled{opacity:.5;cursor:default}
.pro-bloc-nom{font-size:13px;font-weight:700;color:var(--mut)}
.pro-bloc-prix{font-size:24px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.pro-bloc-per{font-size:13px;font-weight:600}
.pro-bloc .pro-offert{font-size:12px;font-weight:500;color:var(--mut);margin-top:3px}
.pro-eco{position:absolute;top:-11px;inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100% - 12px);background:var(--btn);color:var(--onbtn);border-color:var(--btn);font-size:11.5px;padding-inline:8px}
.pro-petit .sub{margin:0;text-align:center}
.pro-petit .sub{font-size:12.5px}
.pro-petit .legal-abo{gap:2px}
.pro-petit .liens-legaux{justify-content:center}
/* Carte « Avec le Pro » : son titre dedans, puis une liste alignée à gauche ; accent sur « illimité » */
.pro-avec-titre{font-size:17px;font-weight:800;margin:0;padding:14px 14px 4px}
.pro-avec-titre+.rr{border-top:0}
/* Feuille « Entre ton code » et haut de #/abonnement/code : trois lignes à coche */
.pro-lignes-code .rr{padding:8px 0;min-height:0;margin:0;font-size:15px;line-height:1.35;align-items:flex-start}
.pro-lignes-code .rr+.rr{border-top:0}
.pro-lignes-code svg{flex:none;color:var(--s3);margin-top:1px}
.pro-annuler{align-self:center;min-height:44px;background:none;border:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.pro-avec{font-weight:600}

.pro-sans-eng{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font-size:14px;font-weight:700;text-align:center}
.pro-sans-eng>svg{flex:none;color:var(--s3)}
.pro-avec-ic{display:inline-flex;flex:none;width:18px;justify-content:center;color:var(--encre,currentColor);opacity:.75}
.pro-avec-ic svg{width:16px;height:16px}
/* « C'est fait ! » : la date de fin en grand */
.pro-fait-jusqua{margin:0;font-size:19px;font-weight:800;line-height:1.3}

/* ===== Arrivée sur l'Accueil (07/11/2026, revue en 1.4) : « ce qui reste à faire », visite guidée en bulles ===== */
/* .card n'a pas de marge intérieure (ses lignes .r / .rr la portent) : ces blocs posent la leur */
.ac-afaire,.vg-bulle,.ac-pense-bete{padding:16px 18px;box-sizing:border-box}
.ac-pense-bete{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ac-afaire{display:flex;flex-direction:column;gap:10px}
.ac-afaire-titre{font-size:16px}
.ac-afaire-bouton{justify-content:flex-start;gap:10px;text-align:start}
.ac-afaire-bouton:first-of-type{background:var(--btn);color:var(--onbtn);border-color:var(--btn)}
/* Haut de carte avec la croix « Masquer » (10/11/2026) : titre à gauche, croix ronde discrète en haut à droite (44 px de
   cible, posée dans le coin de la marge intérieure) */
.ac-carte-haut{display:flex;align-items:flex-start;gap:12px;min-width:0}
.ac-carte-haut>.flex1{flex:1 1 0;min-width:0}
.ac-carte-haut .ac-afaire-titre{padding-top:2px;min-width:0;overflow-wrap:anywhere}
.ac-masquer{border:0;background:none;color:var(--mut);margin-block:-12px -8px;margin-inline-end:-12px}
.ac-masquer:hover,.ac-masquer:focus-visible{color:var(--ink)}
/* Carte « Visite guidée » : petit dessin de la mascotte, titre, phrase, bouton « Lancer la visite » */
.ac-visite{display:flex;flex-direction:column;gap:12px;padding:16px 18px;box-sizing:border-box}
.ac-visite-dessin{display:inline-flex;width:56px;height:56px;flex:none}
.ac-visite-dessin img{width:100%;height:100%;object-fit:contain}
.ac-visite-textes{display:flex;flex-direction:column;min-width:0}
.ac-visite-textes .sub{margin:2px 0 0}
.ac-visite-lancer{align-self:flex-start}
.vg-titre{font-size:16px}
.ac-prenom-invite{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:start}
.vg-voile{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45)}
.vg-bulle{position:fixed;width:min(320px,calc(100vw - 24px));display:flex;flex-direction:column;gap:8px;margin:0;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.vg-bulle.vg-centre{inset:0;margin:auto;height:fit-content}
.vg-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.barre .tab.vg-cible{position:relative;z-index:61;background:var(--bg);border-radius:12px;color:var(--ink)}
.barre:has(.vg-cible){z-index:61}
/* Dessins d'aperçu : la vignette à côté du nom */
.tuile-dessin{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0}
.vignette-dessin{width:44px;height:44px;object-fit:contain}
[data-theme=sombre] .vignette-dessin{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme=clair]) .vignette-dessin{filter:invert(1)}}
/* Style de l'appli, sur mesure (07/11/2026) : deux sélecteurs (fond, cartes) et une pastille d'accent libre */
.sa-perso-ligne{display:flex;flex-wrap:wrap;gap:12px}
.sa-perso{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.sa-perso input[type=color]{width:44px;height:44px;border:1.5px solid var(--line);border-radius:12px;padding:2px;background:var(--card)}
.nuance-perso{position:relative;overflow:hidden}
.nuance-perso input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.ar-ferme-partiel{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--soft) 5px 7px)}

/* Mood sur ordinateur (07/11/2026) : plus de colonnes, plus de grand vide à droite */
@media (min-width:900px){.mood-choix-liste{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));max-width:none}}
.sa-accent-perso{position:relative;align-self:flex-start;min-width:120px}
.sa-accent-perso input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.fond-pastille.nuance-libre{display:inline-flex;align-items:center;justify-content:center}
.sa-accent-point{width:16px;height:16px;border-radius:50%;border:2px solid #fff}
/* Petits « i » d'aide coupés par l'artiste (Réglages → Aide, 07/11/2026) */
html[data-sans-i] .aide-i{display:none}
/* Organiser mes fiches : petit exemple sous « Tout affiché » et « Accordéon » (07/11/2026) */
.fi-aff-choix{display:inline-flex;flex-direction:column;align-items:center;gap:6px;height:auto;padding:8px 12px;border-radius:16px}
.fi-aff-ex{display:flex;flex-direction:column;gap:3px;width:72px}
.fi-aff-bloc{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:4px;padding:2px}
.fi-aff-titre{display:block;height:4px;width:60%;background:var(--ink);border-radius:2px;opacity:.7}
.fi-aff-corps{display:block;height:10px;background:var(--soft);border-radius:2px}
.fi-joindre-off{opacity:.5;cursor:default}
/* Sur mesure (07/11/2026) : nos palettes lisibles, centrées */
.sa-perso-ligne{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.sa-perso-bloc{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.sa-teintes{justify-content:center;max-width:340px}
.sa-teinte-libre{width:34px;height:34px}
.sa-accent-perso{align-self:center}
/* Titres sur une ligne (lot C de la 1.3) : mesurés par composants.js ajusterTitre, qui retire la classe s'il faut passer à la ligne */
.titre-une-ligne{white-space:nowrap}
/* Style de mon appli / de ma page (lot C de la 1.3) : trois rangées de pastilles (Fond, Fond des cases, Couleur d'accent),
   chacune sur une ligne qui défile de côté ; 20 pastilles au plus (public/js/style-appli.js MAX_PASTILLES) */
.sa-rangee-bloc{display:flex;flex-direction:column;gap:6px;min-width:0}
.sa-rangee{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 2px 8px;scrollbar-width:thin}
.sa-rangee > .sa-pastille{flex:none;scroll-snap-align:start}

/* Limite du Gratuit (lot D de la 1.3) : compteur du mois, et demandes verrouillées au-delà de la 10e (floutées, cadenas).
   Le flou est dessiné ici (barres vides) : le serveur ne renvoie aucun contenu de ces demandes. */
.ar-quota{margin:0 4px 8px}
.ar-quota.plein{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ar-quota.plein .txt{display:flex;gap:8px;align-items:flex-start;margin:0}
.ar-quota.plein svg{flex:none;margin-top:2px}
.ar-verrou .ar-verrou-av{display:inline-flex;align-items:center;justify-content:center;background:var(--soft);color:var(--mut)}
.ar-flou{display:flex;flex-direction:column;gap:6px;margin:4px 0;filter:blur(3px)}
.ar-flou i{display:block;height:9px;border-radius:5px;background:var(--line);width:70%}
.ar-flou i + i{width:45%}
.ar-quota-refus{margin-top:4px}

/* ===== Onboarding « bienvenue » du premier lancement (1.4, #/demarrage/bienvenue, ecrans/bienvenue.js) =====
   Maquette de l'onboarding du dépôt tonappli : écran plein, colonne centrée, jamais de défilement
   (un écran trop haut se réduit : bienvenue.js, tenir). Couleurs du style choisi posées par style.setProperty sur .onb
   (--bg, --card, --soft, --ink, --mut, --acc, --onbtn, --hl) ; écriture des titres d'après data-police. */
.onb{position:fixed;inset:0;z-index:35;background:var(--bg);color:var(--ink);font-family:var(--police);overflow:hidden;transition:background .6s,color .6s;--onb-ts:1;--onb-ls:-.02em;--onb-sens:1;--onb-ligne:color-mix(in srgb,var(--ink) 18%,transparent)}
[dir=rtl] .onb{--onb-sens:-1}
.onb[data-police=affiche]{--onb-ts:1.22;--onb-ls:.02em}
.onb .onb-t{font-family:var(--police-titre);font-weight:700;color:var(--ink)}
.onb[data-police=affiche] .onb-t{font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;font-weight:400}
.onb[data-police=elegante] .onb-t{font-family:'Playfair Display',Georgia,serif}
.onb[data-police=classique] .onb-t{font-family:Georgia,'Times New Roman',serif}
.onb[data-police=simple] .onb-t{font-family:var(--police)}
/* Marges sûres (encoche, coins arrondis, barre d'accueil) : le cadre évite les zones de l'appareil, côtés compris (la plus grande des deux, des deux côtés : juste dans les deux sens d'écriture) */
.onb-cadre{position:absolute;inset-block:0;inset-inline:max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));max-width:440px;margin:0 auto}
/* Toutes les langues (1.5) : un mot trop long se coupe proprement (césure de la langue, sinon coupure) plutôt que de sortir ;
   onb-mesure l'interdit le temps que bienvenue.js (ajuster) mesure et réduise les titres */
.onb{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.onb .onb-mesure,.onb .onb-mesure *{overflow-wrap:normal!important;word-break:normal!important;-webkit-hyphens:manual!important;hyphens:manual!important}
.onb-filtres{position:absolute;width:0;height:0;overflow:hidden}
/* Haut : retour, progression, compteur */
.onb-haut{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);inset-inline:20px;display:flex;align-items:center;gap:12px;z-index:10;transition:opacity .3s}
.onb-haut.onb-cache{opacity:0;visibility:hidden;pointer-events:none}
.onb-retour{width:40px;height:40px;flex:none;border-radius:50%;background:var(--card);border:1.5px solid var(--onb-ligne);color:var(--ink);display:grid;place-items:center;padding:0;transition:background .6s}
.onb-progres{flex:1;height:6px;border-radius:6px;background:var(--soft);overflow:hidden}
.onb-progres i{display:block;height:100%;width:0;background:var(--acc);border-radius:6px;transition:width .7s cubic-bezier(.2,.8,.2,1),background .6s}
.onb-compte{font-size:14px;font-weight:700;min-width:42px;text-align:end;font-variant-numeric:tabular-nums}
.onb-compte small{color:var(--mut);font-size:14px}
/* Écrans : centrés verticalement, glissent d'un côté à l'autre */
.onb-scenes{position:absolute;inset:0}
.onb-etape{position:absolute;inset:0;padding:calc(env(safe-area-inset-top,0px) + var(--onb-haut-h,40px) + 28px) 24px calc(env(safe-area-inset-bottom,0px) + var(--onb-bas-h,58px) + 60px);display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateX(calc(46px * var(--onb-sens)));transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.onb-etape::before,.onb-etape::after{content:"";flex:1 0 0}
.onb-etape>*{flex-shrink:0}
.onb-etape.onb-on{opacity:1;pointer-events:auto;transform:none}
.onb-etape.onb-entre-retour,.onb-etape.onb-sort{transform:translateX(calc(-46px * var(--onb-sens)))}
.onb-etape.onb-sort-retour{transform:translateX(calc(46px * var(--onb-sens)))}
.onb-etape.onb-avec-alt{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--onb-bas-h,108px) + 44px)}
.onb h2.onb-t.onb-t1{font-size:calc(33px * var(--onb-ts));line-height:1.1;letter-spacing:var(--onb-ls);text-wrap:balance;margin:10px 0 0}
.onb h2.onb-t{font-size:calc(25px * var(--onb-ts));line-height:1.18;letter-spacing:var(--onb-ls);text-wrap:balance;text-align:center;margin:6px 0 0}
.onb-lead{color:var(--mut);font-size:14.5px;line-height:1.45;margin:8px 0 0;text-wrap:balance;text-align:center}
.onb-main{font-size:13.5px;font-weight:500;color:var(--mut);line-height:1.35;text-wrap:balance;text-align:center;margin:12px 0 0}
.onb-main-haut{margin-top:16px}
.onb-pied{font-size:12px;color:var(--mut);text-align:center;line-height:1.4;padding-top:18px;margin:0;text-wrap:balance}
.onb-fort{color:var(--ink);font-weight:700}
.onb-centre{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center}
/* Apparition décalée (--d = rang) et surligné au feutre */
.onb-a{opacity:0;transform:translateY(14px)}
.onb-etape.onb-on .onb-a{animation:onb-monte .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d,0) * 70ms + 120ms)}
@keyframes onb-monte{to{opacity:1;transform:none}}
.onb-hl{background:linear-gradient(var(--hl),var(--hl)) no-repeat 0 88%/0 38%;transition:background-size .9s cubic-bezier(.3,.8,.2,1) .5s}
[dir=rtl] .onb-hl{background-position:100% 88%}
.onb-etape.onb-on .onb-hl,.onb-hl.onb-on{background-size:100% 38%}
.onb-hl.onb-on{transition:none}
/* Bas : bouton principal, et « Pas vraiment » */
.onb-bas{position:absolute;inset-inline:24px;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);z-index:10}
.onb-bas[hidden]{display:none}
.onb-btn{display:block;width:100%;min-height:58px;height:auto;border-radius:30px;border:none;background:var(--acc);color:var(--onbtn);font-family:var(--police);font-size:17px;font-weight:600;line-height:1.2;text-wrap:balance;padding:10px 18px;transition:transform .15s,opacity .3s,background .6s,color .6s}
.onb-btn:active{transform:scale(.97)}
.onb-btn:disabled{opacity:.3}
.onb-btn-petit{height:46px;font-size:15px;margin-top:10px}
.onb-alt{display:block;width:100%;min-height:44px;margin-top:6px;background:none;border:none;color:var(--mut);font-family:var(--police);font-size:14.5px;font-weight:500}
.onb-alt[hidden]{display:none}
/* Buno : couleur colorée par le style, trait qui « vit » */
.onb-buno{width:calc(200px * var(--onb-dessin,1));max-width:100%;aspect-ratio:1;margin:0 auto;flex-shrink:0;animation:onb-bout .5s steps(1) infinite}
.onb-buno i{display:block;width:100%;height:100%;background:var(--ink);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;transition:background .6s}
.onb-etape.onb-on .onb-buno i{animation:onb-croquis .9s cubic-bezier(.3,.7,.2,1) both .1s}
@keyframes onb-croquis{from{clip-path:inset(0 100% 0 0);transform:rotate(-4deg) scale(.92)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes onb-bout{0%{filter:url(#onb-b1)}34%{filter:url(#onb-b2)}67%{filter:url(#onb-b3)}}
.onb-balance{animation:onb-bout .5s steps(1) infinite,onb-balance 3.6s ease-in-out infinite}
@keyframes onb-balance{50%{transform:translateY(-8px) rotate(-2deg)}}
.onb-grand{width:calc(250px * var(--onb-dessin,1))}
.onb-moyen{width:calc(180px * var(--onb-dessin,1))}
.onb-petit{width:calc(128px * var(--onb-dessin,1))}
.onb-ico{display:block;background:var(--ink);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;transition:background .6s}
/* Bulles qui tombent */
.onb-arene{position:relative;flex:8 1 300px;min-height:200px;margin:22px -24px 0;overflow:hidden;touch-action:none;cursor:grab}
.onb-arene:active{cursor:grabbing}
.onb-bulle{position:absolute;top:0;max-width:calc(100% - 24px);padding:10px 15px;border-radius:20px;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);font-size:14.5px;font-weight:500;text-align:center;text-wrap:balance;user-select:none;-webkit-user-select:none;will-change:transform;pointer-events:none}
.onb-bulle.onb-moi{background:var(--ink);color:var(--bg)}
.onb-arene-buno{position:absolute;inset-inline-start:50%;bottom:-6px;width:170px;margin-inline-start:-85px}
.onb-tas{position:absolute;inset-inline:16px;top:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 6px}
.onb-tas .onb-bulle{position:static;transform:rotate(-2deg);will-change:auto}
.onb-tas .onb-bulle:nth-child(odd){transform:rotate(2deg)}
/* Nom d'artiste */
.onb .onb-champ{width:100%;height:auto;margin-top:18px;padding:16px 4px 10px;border:none;border-bottom:2.5px solid var(--ink);border-radius:0;background:none;color:var(--ink);font-family:var(--police);font-size:26px;font-weight:700;outline:none;text-align:center}
.onb .onb-champ::placeholder{color:var(--mut);opacity:.55}
.onb .onb-champ:focus-visible{border-bottom-color:var(--acc)}
/* Tuiles à choisir (volume, canaux, styles) et coche */
.onb-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.onb-tuile,.onb-canal,.onb-style{position:relative;background:var(--card);color:var(--ink);font-family:var(--police);text-align:center;transition:border-color .25s,background .25s,transform .25s}
.onb-tuile{border:2px solid var(--onb-ligne);border-radius:22px;padding:12px 10px 14px}
.onb-tuile .onb-ico{width:calc(74px * var(--onb-dessin,1));height:calc(74px * var(--onb-dessin,1));margin:0 auto 4px}
.onb-tuile b{display:block;font-size:16px;font-weight:650}
.onb-tuile small{display:block;font-size:12px;color:var(--mut)}
.onb-tuile.onb-sel{border-color:var(--ink);background:var(--soft);transform:scale(1.03)}
.onb-tuile.onb-sel .onb-ico{animation:onb-remue .5s}
@keyframes onb-remue{30%{transform:rotate(-8deg) scale(1.1)}60%{transform:rotate(6deg)}}
.onb-canaux{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.onb-canal{width:calc((100% - 20px) / 3);border:2px solid var(--onb-ligne);border-radius:20px;padding:12px 4px 10px;font-size:12.5px;font-weight:600}
.onb-canal b{display:block;font-weight:600}
.onb-canal .onb-ico{width:calc(58px * var(--onb-dessin,1));height:calc(58px * var(--onb-dessin,1));margin:0 auto 7px;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.onb-canal.onb-sel{border-color:var(--ink);background:var(--soft)}
.onb-canal.onb-sel .onb-ico{transform:scale(1.05) rotate(-4deg)}
.onb-coche{position:absolute;top:7px;inset-inline-end:7px;width:24px;height:24px;border-radius:46% 54% 50% 50%;background:var(--hl);display:grid;place-items:center;transform:scale(0) rotate(-20deg);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.onb-coche svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.onb-coche path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s .15s}
.onb-sel>.onb-coche{transform:none}
.onb-sel>.onb-coche path{stroke-dashoffset:0}
/* Temps de réponse : chiffre, plus et moins, curseur au trait de crayon */
.onb-pm{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
.onb-pm button{width:44px;height:44px;flex:none;border-radius:50%;border:2px solid var(--ink);background:none;color:var(--ink);font-family:var(--police);font-size:24px;font-weight:500;line-height:1;padding:0;transition:transform .15s}
.onb-pm button:active{transform:scale(.88)}
.onb-grand-chiffre{min-width:0;flex:0 1 190px;font-size:56px;font-weight:700;letter-spacing:-.04em;text-align:center;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.onb-plage{position:relative;margin-top:18px;height:44px}
.onb-plage svg{position:absolute;inset-inline:0;top:14px;width:100%;height:16px;overflow:visible}
.onb-plage path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.onb .onb-curseur{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none}
.onb-curseur::-webkit-slider-runnable-track{background:none}
.onb-curseur::-moz-range-track{background:none}
.onb-curseur::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:var(--bg);border:3px solid var(--ink);box-shadow:2px 3px 0 var(--ink);transition:transform .15s}
.onb-curseur:active::-webkit-slider-thumb{transform:scale(1.15)}
.onb-curseur::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--bg);border:3px solid var(--ink)}
.onb-bornes{display:flex;justify-content:space-between;margin-top:3px}
.onb-note{border:1.5px dashed var(--ink);border-radius:18px;padding:13px 16px;margin-top:16px;font-size:15px;line-height:1.45;text-align:center}
.onb-note .onb-hl{font-size:17px;font-weight:700}
/* Avant et après : deux barres hachurées, une flèche */
.onb-carte{flex-shrink:0;background:var(--card);border:1.5px solid var(--onb-ligne);border-radius:24px;padding:18px;margin-top:22px;transition:background .6s}
.onb-barres{position:relative;display:flex;gap:26px;align-items:flex-end;height:180px;padding:0 18px;border-bottom:2.5px solid var(--ink)}
.onb-fleche{position:absolute;inset-inline-start:50%;top:6px;width:86px;height:66px;margin-inline-start:-34px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .onb-fleche{transform:scaleX(-1)}
.onb-fleche path{stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset .7s 1.9s}
.onb-fleche path+path{transition-delay:2.5s;transition-duration:.3s}
.onb-etape.onb-on .onb-fleche path{stroke-dashoffset:0}
.onb-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%}
.onb-bv{font-size:17px;font-weight:700;opacity:0;transition:opacity .5s 1s;white-space:nowrap}
.onb-bv.onb-on{opacity:1}
.onb-barre{position:relative;width:100%;height:0;border:2.5px solid var(--ink);border-bottom:none;border-radius:10px 12px 0 0;transition:height 1.3s cubic-bezier(.2,.8,.2,1)}
.onb-barre::after{content:"";position:absolute;inset:-5px -4px 0;border:1.5px solid var(--ink);border-bottom:none;border-radius:13px 9px 0 0;transform:rotate(-1.2deg);opacity:.55}
.onb-barre.onb-avant{background:repeating-linear-gradient(-45deg,transparent 0 6px,var(--ink) 6px 7.5px)}
.onb-barre.onb-apres{background:repeating-linear-gradient(-52deg,var(--ink) 0 3.5px,transparent 3.5px 4.6px),repeating-linear-gradient(40deg,var(--ink) 0 3px,transparent 3px 4.4px);transition-delay:.4s}
.onb-col-lab{font-size:13px;color:var(--mut);font-weight:500;text-align:center}
.onb-gain{text-align:center;margin:14px 0 0;font-size:16px;font-weight:500}
.onb-gain>b{display:block;font-size:30px;font-weight:700;letter-spacing:-.03em}
.onb-gain>span{display:block}
.onb-gain>b.onb-seances{display:inline;font-size:22px;letter-spacing:0}
/* Outils autour de Buno */
.onb-orbite{position:relative;flex:1 1 400px;min-height:240px;max-height:400px;margin:26px 0 30px}
.onb-orbite-buno{position:absolute;inset-inline-start:50%;top:50%;width:170px;margin-block-start:-85px;margin-inline-start:-85px}
.onb-puce{position:absolute;inset-inline-start:var(--x);top:var(--y);transform:translate(calc(-50% * var(--onb-sens)),-50%) scale(0);padding:9px 14px;border-radius:20px;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);font-size:13.5px;font-weight:600;max-width:48%;text-align:center;text-wrap:balance;box-shadow:2px 3px 0 var(--ink)}
.onb-etape.onb-on .onb-puce{animation:onb-jaillit .8s cubic-bezier(.3,1.5,.4,1) forwards,onb-flotte 4s ease-in-out infinite;animation-delay:calc(var(--k) * 110ms + 700ms),calc(var(--k) * 110ms + 1500ms)}
@keyframes onb-jaillit{from{inset-inline-start:50%;top:50%;transform:translate(calc(-50% * var(--onb-sens)),-50%) scale(0) rotate(-30deg)}to{transform:translate(calc(-50% * var(--onb-sens)),-50%) scale(1) rotate(var(--r))}}
@keyframes onb-flotte{0%,100%{transform:translate(calc(-50% * var(--onb-sens)),-50%) rotate(var(--r))}50%{transform:translate(calc(-50% * var(--onb-sens)),calc(-50% - 7px)) rotate(calc(var(--r) * -1))}}
/* Les 4 styles */
.onb-styles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.onb-style{border:2.5px solid var(--onb-ligne);border-radius:22px;padding:9px;transition:all .3s}
.onb-style.onb-sel{border-color:var(--ink);transform:scale(1.03)}
.onb-mini{height:104px;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px}
.onb-mini i{display:block;height:8px;border-radius:5px}
.onb-mini .onb-mini-l1{width:55%}
.onb-mini .onb-mini-c{height:26px;border-radius:8px}
.onb-mini .onb-mini-b{width:100%;height:16px;border-radius:8px;margin-top:auto}
.onb-style>b{display:block;font-size:16px;margin-top:8px;text-align:center;font-weight:700}
/* Les questions deviennent un formulaire rempli */
.onb-scene{position:relative;flex-shrink:0;height:calc(var(--onb-rang,62px) * 4 + 14px);margin:26px 0 22px}
.onb-q{position:absolute;inset-inline-start:16px;top:calc(var(--n) * var(--onb-rang,62px) + 17px);max-width:calc(100% - 32px);padding:7px 13px;border-radius:17px 17px 17px 5px;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);font-size:13.5px;font-weight:500;opacity:0;transform:translateY(16px) scale(.9);transition:all .5s cubic-bezier(.3,1.4,.4,1);transform-origin:left bottom}
.onb-q.onb-in{opacity:1;transform:none}
.onb-q.onb-gone{opacity:0;transform:translateX(calc(40px * var(--onb-sens))) scale(.7);transition:all .45s cubic-bezier(.5,0,.8,.4)}
.onb-q s{position:absolute;inset-inline:10px;top:50%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.onb-q.onb-cut s{transform:scaleX(1)}
.onb-fiche{position:absolute;inset:0;padding:4px 16px;border:2px solid var(--ink);border-radius:22px;background:var(--card);box-shadow:4px 5px 0 var(--ink);opacity:0;transform:translateY(20px) rotate(1.5deg);transition:all .6s cubic-bezier(.2,.8,.2,1)}
.onb-fiche.onb-in{opacity:1;transform:none}
.onb-rang{height:var(--onb-rang,62px);display:flex;align-items:center;gap:10px;border-bottom:1.5px dashed var(--onb-ligne);opacity:0;transform:translateX(calc(-14px * var(--onb-sens)));transition:all .4s}
.onb-rang:nth-child(4){border:none}
.onb-rang.onb-in{opacity:1;transform:none}
.onb-rang-lab{flex:0 1 auto;min-width:58px;max-width:40%;font-size:12px;line-height:1.15;color:var(--mut);font-weight:500}
.onb-rang-val{flex:1;min-width:0;font-size:15px;line-height:1.15;font-weight:700}
.onb-rang>svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.onb-rang>svg path{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .35s}
.onb-rang.onb-ok>svg path{stroke-dashoffset:0}
.onb-ph3{display:flex;gap:6px;flex:1}
.onb-ph3 i{width:34px;height:34px;border-radius:8px;border:1.5px solid var(--ink);background:var(--bg);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.onb-ph3 i.onb-in{transform:none}
.onb-ph3 svg{display:block;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.onb-tampon{position:absolute;inset-inline-end:-4px;bottom:-12px;max-width:72%;text-align:center;padding:2px 14px;border:3px solid var(--ink);border-radius:12px;background:var(--hl);font-size:18px;font-weight:700;opacity:0;transform:rotate(-9deg) scale(2.4);transition:all .35s cubic-bezier(.3,1.5,.5,1)}
.onb-tampon.onb-in{opacity:1;transform:rotate(-9deg) scale(1)}
/* Dans 3 mois : compteur et courbe */
.onb-c3{font-size:62px;font-weight:700;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.onb-c3{overflow-wrap:break-word}
.onb-c3 small{display:inline-block;font-size:22px;font-weight:700;letter-spacing:-.02em}
.onb-aire{direction:ltr;display:block;width:100%;height:150px;overflow:visible;margin-top:26px}
.onb-aire pattern line{stroke:var(--ink);stroke-width:1.2;opacity:.45}
.onb-aire .onb-aire-fill{opacity:0;transition:opacity 1s 1.6s}
.onb-etape.onb-on .onb-aire .onb-aire-fill{opacity:1}
.onb-aire .onb-aire-ln{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 2s cubic-bezier(.4,0,.2,1) .3s}
.onb-etape.onb-on .onb-aire .onb-aire-ln{stroke-dashoffset:0}
.onb-aire .onb-aire-axe{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.onb-aire text{font-family:var(--police);font-size:10px;font-weight:700;fill:var(--mut)}
.onb-aire text.onb-aire-up{fill:var(--ink);font-size:var(--taille);opacity:0;transition:opacity .5s var(--delai)}
.onb-etape.onb-on .onb-aire text.onb-aire-up{opacity:1}
.onb-aire .onb-aire-dot{fill:var(--ink);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1) var(--delai)}
.onb-etape.onb-on .onb-aire .onb-aire-dot{transform:scale(1)}
/* Buno prépare ton appli : anneau et liste cochée */
.onb-anneau{position:relative;width:150px;height:150px;margin:8px auto 0}
.onb-anneau svg{transform:rotate(-90deg)}
.onb-anneau-fond{fill:none;stroke:var(--soft);stroke-width:11}
.onb-anneau-plein{fill:none;stroke:var(--ink);stroke-width:11;stroke-linecap:round;stroke-dasharray:402;stroke-dashoffset:402}
.onb-pc{position:absolute;inset:0;display:grid;place-items:center;font-size:36px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.onb-todo{display:flex;flex-direction:column;margin-top:22px;text-align:start}
.onb-todo>div{display:flex;align-items:center;gap:12px;padding:9px 2px;font-size:15px;border-bottom:1.5px dashed var(--onb-ligne);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.onb-todo>div:last-child{border:none}
.onb-todo span{flex:1;color:var(--mut)}
.onb-todo b{min-width:0;overflow-wrap:anywhere;font-weight:700;color:var(--ink);text-align:end}
.onb-todo svg{flex-shrink:0;width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible;animation:onb-bout .5s steps(1) infinite}
.onb-todo svg circle{fill:var(--hl);stroke:none;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1) .3s}
.onb-todo .onb-ck{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .4s .5s}
.onb-todo>div.onb-ok{opacity:1;transform:none}
.onb-todo>div.onb-ok circle{transform:scale(1)}
.onb-todo>div.onb-ok .onb-ck{stroke-dashoffset:0}
/* C'est prêt : aperçu, confettis, puis l'appli s'ouvre */
.onb-apercu{margin-top:16px;padding:16px;border:2px solid var(--ink);border-radius:24px;background:var(--card);box-shadow:4px 5px 0 var(--ink);text-align:start}
.onb-apercu-haut{display:flex;align-items:center;gap:12px}
.onb-apercu-haut b{display:block;font-size:18px;overflow-wrap:anywhere}
.onb-apercu-haut small{display:block;color:var(--mut);font-size:12.5px}
.onb-av{flex-shrink:0;width:46px;height:46px;border-radius:50%;background:var(--acc);color:var(--onbtn);display:grid;place-items:center;font-size:18px;font-weight:700}
.onb-apercu-lignes{margin-top:12px;font-size:14px;line-height:1.7}
.onb-apercu-lignes p{margin:0}
.onb-confettis{position:absolute;inset:0;z-index:30;overflow:hidden;pointer-events:none}
.onb-confettis i{position:absolute;top:-20px;width:8px;height:15px;border-radius:2px;animation:onb-tombe linear forwards}
@keyframes onb-tombe{to{transform:translateY(110vh) rotate(720deg)}}
.onb-lancement{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:var(--bg);transition:opacity .6s,transform .8s cubic-bezier(.6,0,.3,1)}
.onb-lancement.onb-bye{opacity:0;transform:scale(1.6);pointer-events:none}
.onb-saut{width:220px;animation:onb-bout .5s steps(1) infinite,onb-saut 1s cubic-bezier(.3,0,.3,1) infinite}
@keyframes onb-saut{0%,100%{transform:translateY(0) scaleY(.96)}45%{transform:translateY(-34px) scaleY(1.03)}}
/* « Garde ton appli » (e-mail) et code à 6 chiffres, juste avant le paywall */
.onb-garde{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.onb-garde>span{display:flex;align-items:center;gap:6px;padding-block:7px;padding-inline:8px 12px;border-radius:20px;background:var(--card);border:1.5px solid var(--ink);font-size:13px;font-weight:600;box-shadow:2px 3px 0 var(--ink)}
.onb-garde i{width:18px;height:18px;border-radius:50%;background:var(--hl);display:grid;place-items:center}
.onb-garde svg{width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.onb-boite-mail{margin-top:26px;padding:6px 18px 16px;background:var(--card);border:2px solid var(--ink);border-radius:22px;box-shadow:4px 5px 0 var(--ink);text-align:start;transition:background .6s}
.onb-boite-mail label{display:block;margin-top:12px;font-size:12px;font-weight:600;color:var(--mut)}
.onb .onb-mail-champ{width:100%;height:auto;padding:8px 0 9px;border:none;border-bottom:2px dashed var(--onb-ligne);border-radius:0;background:none;color:var(--ink);font-family:var(--police);font-size:20px;font-weight:600;outline:none}
.onb .onb-mail-champ:focus{border-bottom-color:var(--ink)}
.onb .onb-mail-champ::placeholder{color:var(--mut);opacity:.55}
.onb-otp{display:flex;justify-content:center;gap:8px;margin-top:26px}
.onb .onb-otp-case{width:auto;min-width:0;height:58px;flex:0 1 46px;padding:0;border-radius:14px;border:2px solid var(--onb-ligne);background:var(--card);color:var(--ink);font-family:var(--police);font-size:26px;font-weight:700;text-align:center;outline:none;transition:border-color .2s,transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.onb .onb-otp-case:focus{border-color:var(--ink)}
.onb .onb-otp-case.onb-ok{border-color:var(--ink);box-shadow:2px 3px 0 var(--ink);transform:translateY(-2px)}
.onb-renvoyer{margin-top:14px}
.onb-erreur{margin:10px 0 0;color:var(--ink);font-size:14px;font-weight:600;text-align:center}
.onb-erreur[hidden]{display:none}
/* Animations coupées sur le téléphone : tout est posé d'un coup, rien ne bouge */
/* Ajustements posés par bienvenue.js (ajuster) quand un libellé ou l'écran ne tient pas */
.onb-grille.onb-une-col,.onb-styles.onb-une-col{grid-template-columns:1fr;gap:8px}
.onb-une-col .onb-tuile{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;text-align:start;padding-block:8px;padding-inline:12px 38px}
.onb-une-col .onb-tuile .onb-ico{grid-row:span 2;width:calc(46px * var(--onb-dessin,1));height:calc(46px * var(--onb-dessin,1));margin:0}
.onb-une-col .onb-tuile.onb-sel,.onb-une-col .onb-style.onb-sel{transform:none}
.onb-une-col .onb-style{display:flex;align-items:center;gap:12px;padding-inline-end:38px}
.onb-une-col .onb-mini{flex:none;width:78px;height:58px}
.onb-une-col .onb-style>b{margin:0;text-align:start}
.onb-canaux.onb-canaux-2 .onb-canal{width:calc((100% - 10px) / 2)}
.onb-orbite.onb-orbite-flux{flex:0 0 auto;max-height:none;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:8px;margin:16px 0}
.onb-orbite-flux .onb-orbite-buno{position:static;flex:0 0 100%;width:auto;height:calc(110px * var(--onb-dessin,1));margin:0 0 4px}
.onb-orbite-flux .onb-puce,.onb-etape.onb-on .onb-orbite-flux .onb-puce{position:static;max-width:100%;transform:none;animation:none}
.onb-serre{--onb-rang:50px}
.onb-serre .onb-lead,.onb-serre .onb-main{margin-top:6px}
.onb-serre .onb-carte,.onb-serre .onb-scene,.onb-serre .onb-grille,.onb-serre .onb-styles,.onb-serre .onb-canaux,.onb-serre .onb-boite-mail,.onb-serre .onb-otp,.onb-serre .onb-garde{margin-top:12px}
.onb-serre .onb-carte{padding:12px}
.onb-serre .onb-pied{padding-top:8px}
.onb-serre .onb-barres{height:130px}
.onb-serre .onb-aire{height:110px;margin-top:24px}
.onb-serre .onb-orbite{margin:12px 0}
.onb-serre .onb-todo{margin-top:10px}
.onb-serre .onb-todo>div{padding:5px 2px}
.onb-serre .onb-anneau{width:120px;height:120px}
.onb-serre .onb-anneau svg{width:120px;height:120px}
.onb-serre .onb-anneau circle{transform:scale(.8);transform-origin:75px 75px}
/* Droite à gauche : bulles des questions et trait qui les barre partent du bon côté */
.onb-serre .onb-une-col .onb-mini{width:64px;height:40px;padding:6px;gap:4px}
.onb-serre .onb-une-col .onb-style{padding:6px;padding-inline-end:38px}
.onb-serre .onb-une-col .onb-mini .onb-mini-c{height:8px}
[dir=rtl] .onb-q{transform-origin:right bottom;border-radius:17px 17px 5px 17px}
[dir=rtl] .onb-q s{transform-origin:right}
@media (prefers-reduced-motion:reduce){
  .onb-buno,.onb-balance,.onb-saut,.onb-todo svg,.onb-etape.onb-on .onb-buno i,.onb-tuile.onb-sel .onb-ico{animation:none}
  .onb-etape,.onb-etape *,.onb-lancement{transition:none!important}
  .onb-a,.onb-etape.onb-on .onb-a{animation:none;opacity:1;transform:none}
  .onb-puce,.onb-etape.onb-on .onb-puce{animation:none;transform:translate(calc(-50% * var(--onb-sens)),-50%) rotate(var(--r))}
}

/* Analyse, l'essentiel de la période (1.4.0, point 11) : quatre chiffres en gros, variation, phrase d'aide ; 2 colonnes
   sur téléphone, 4 dès 820 px ; rien n'est coupé (les textes passent à la ligne, les montants longs rapetissent) */
.ch-periode{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px}
.ch-essentiel{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.ch-cles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ch-cle{display:flex;flex-direction:column;gap:4px;padding:14px;min-width:0}
.ch-cle-libelle{font-size:14px;font-weight:700;color:var(--ink);overflow-wrap:break-word;hyphens:auto}
.ch-cle-valeur{font-size:32px;line-height:1.05;margin:2px 0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ch-cle-valeur.ch-long{font-size:23px}
.ch-evol{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;max-width:100%;padding:3px 9px;border-radius:999px;font-size:13px;font-weight:700;border:1.5px solid var(--line);background:var(--soft);color:var(--ink);white-space:normal}
.ch-evol.hausse{border-color:var(--acc);color:var(--acc)}
.ch-evol.baisse{color:var(--mut)}
.ch-cle-avant{font-size:12.5px;overflow-wrap:break-word}
.ch-cle-aide{margin:2px 0 0;font-size:13px;line-height:1.35;overflow-wrap:break-word}
.ch-graphe-aide{margin:6px 0 0;font-size:13px}
@media (min-width:820px){.ch-cles{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Story du mois (1.5, B) : bouton sous la grille de l'agenda, aperçu 9:16 dans sa feuille */
.ag-story{margin:12px auto 4px;display:flex}
.story-cadre{display:flex;align-items:center;justify-content:center;min-height:min(99vw,427px);padding:4px 0}
.story-apercu{display:block;width:min(56vw,240px);height:auto;aspect-ratio:9/16;border-radius:18px;border:1.5px solid var(--line);box-shadow:0 14px 34px -22px rgba(0,0,0,.55)}
.story-attente{text-align:center}
/* Guests (1.5, revu avec Marco) : aucune teinte de plus. Le jour de guest a un fond doux tiré de l'accent et du fond
   de la page (--acc et --bg, ceux de l'artiste en Pro), chiffre à la couleur, sans anneau ; sans color-mix : --soft. Distinct
   de libre (sans fond), choisi (encre pleine), complet et fermé (gris barré). Lieu à la couleur, sans couleur. */
:root{--guest:var(--soft)}
@supports (background:color-mix(in srgb,red 10%,blue)){:root{--guest:color-mix(in srgb,var(--acc) 16%,var(--bg))}}
.d.guest:not(.sel){background:var(--guest);color:var(--ink)}
.d.off.guest{opacity:.75}
.leg-guest{display:inline-block;flex:none;width:14px;height:14px;border-radius:4px;background:var(--guest)}
.ag-legende{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;margin:0 0 8px}
.ag-guest-jour{display:flex;align-items:center;gap:8px;margin:2px 0;color:var(--ink);font-weight:600;font-size:14.5px}
.ag-guest-ligne .leg-guest{margin-inline-end:10px}
.cl-cal-guests{display:flex;flex-direction:column;gap:4px}
.cl-cal-guest-lieu{display:flex;align-items:center;gap:8px;margin:0;color:var(--mut);font-weight:600;font-size:14.5px}
.tg i.leg-guest{width:12px;height:12px;border-radius:3px}
/* Ma fiche de soin (1.5) : le texte d'une étape tient sur deux lignes dans la liste (la feuille montre tout) */
.soin-resume{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* Délai d'acompte (10/11/2026, 0029) : carte « Acompte reçu ? Oui / Non » de la fiche et de « À traiter » (Accueil) ; Oui et Non côte à côte, même à 375 px */
.delai-echu{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.delai-echu .txt{margin:0;overflow-wrap:anywhere}
.delai-oui-non{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ac-traiter-groupe{display:flex;flex-direction:column;gap:12px}

/* Acompte (1.5, parcours de Marco du 11/11/2026) : fil de la fiche, carte « Acompte reçu / pas reçu » avec une ligne grise
   sous chaque geste, curseurs de Mes règles (vrais input range, 44 px de haut), choix rapides du délai */
.acompte-fil{display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.acompte-fil-l{margin:0;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.acompte-fil .acompte-etat{font-weight:700}
.acompte-reste{color:var(--mut);font-weight:600}
.ar-acompte{display:block;margin-top:2px;overflow-wrap:anywhere}
.delai-gestes{display:flex;flex-direction:column;gap:14px}
.delai-zone{display:flex;flex-direction:column;gap:8px}
.delai-geste{display:flex;flex-direction:column;gap:4px}
.delai-geste .btn{width:100%;min-height:44px}
.delai-geste .sub{margin:0}
.chip[aria-pressed=true]{background:var(--btn);color:var(--onbtn);font-weight:700}
.curseur{width:100%;min-height:44px;margin:0;accent-color:var(--acc)}
.montant-grand{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.delai-valeur{font-size:20px;font-weight:700}
.acompte-resume{margin:4px 0 0;line-height:1.45}
/* Liste d'attente par mois (1.5) : feuille du choix du mois (années puis mois, à la ligne à 375 px), mois sous le statut de
   la fiche, intertitres de la liste groupée par mois, mention « mois passé » dans la couleur d'alerte */
.ar-attente-choix{display:flex;flex-direction:column;gap:10px}
.fi-attente{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ar-attente-ligne{display:block}
.ar-groupe-mois{margin:16px 2px 6px}
.ar-attente-passe{color:var(--acc)}