/* Espace mobile (musiciens, et bientôt l'application) : le style du prototype validé par Yohan
   (app.yohanperez.com, 23/10/2026) — noir, Manrope, cartes sombres, boutons blancs. */
:root{--fond:#000;--s1:#121212;--s2:#1b1b1b;--trait:#262626;--doux:#9a9a9a;--marge:14px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:#000}
body{font-family:Manrope,system-ui,sans-serif;color:#fff;background:#000;-webkit-font-smoothing:antialiased;min-height:100vh;padding-bottom:calc(110px + env(safe-area-inset-bottom))}
.page{max-width:560px;margin:0 auto;padding-top:calc(env(safe-area-inset-top) + 14px)}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
.serif{font-family:"Bodoni Moda",serif}.he{font-family:"Frank Ruhl Libre",serif;direction:rtl}
.bw{filter:grayscale(1) contrast(1.06)}
.retour{display:inline-block;padding:2px 20px 0;font-size:14px;font-weight:700;color:#bdbdbd;text-decoration:none}
.titre{padding:6px 20px 0}.titre small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#9a9a9a}
.titre h1,.titre h2{font-size:28px;font-weight:800;margin-top:4px;letter-spacing:-.01em;line-height:1.1}.titre p{font-size:13.5px;color:#bdbdbd;margin-top:6px;line-height:1.45}
.carte{margin:12px var(--marge) 0;background:var(--s1);border:1px solid var(--trait);border-radius:20px;overflow:hidden}
.ligne{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--trait);width:100%;text-decoration:none}
.ligne:last-child{border-bottom:0}
.ligne p{font-size:15px;font-weight:700;line-height:1.25;flex:1;min-width:0}.ligne p small{display:block;font-size:12.5px;font-weight:500;color:var(--doux);margin-top:1px}
.ligne .fl{color:#666;font-size:20px}
.av{width:42px;height:42px;border-radius:50%;background:#2a2a2a center/cover;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.puce{display:inline-block;font-size:11px;font-weight:800;border-radius:99px;padding:4px 9px;white-space:nowrap}
@media (max-width:599px){.puce-detail{white-space:normal;text-align:right;max-width:120px}}
.p-ok{background:#fff;color:#000}.p-att{border:1.5px solid #fff;color:#fff}.p-non{background:#2a2a2a;color:#9a9a9a}.p-vide{border:1.5px dashed #555;color:#8a8a8a}
.bouton{display:block;margin:14px var(--marge) 0;background:#fff;color:#000;border-radius:18px;padding:16px;text-align:center;font-weight:800;font-size:15.5px;width:calc(100% - 2 * var(--marge));text-decoration:none}
.bouton.sombre{background:var(--s2);color:#fff}
.bouton[disabled]{opacity:.5}
.deux{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin:16px var(--marge) 0}.deux .bouton{margin:0;width:auto}
.note{margin:10px 22px 0;font-size:12.5px;color:#8f8f8f;line-height:1.5;text-align:center}
.section{padding:22px 20px 2px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9a}
.infos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px var(--marge) 0}
.infos div{background:var(--s1);border:1px solid var(--trait);border-radius:16px;padding:11px 12px}.infos .l{grid-column:1/-1}
.infos small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a}.infos b{display:block;font-size:14.5px;margin-top:3px;line-height:1.35}
.infos a{text-decoration:underline;text-underline-offset:3px}
.message{margin:12px var(--marge) 0;padding:12px 14px;border-radius:16px;background:#fff;color:#000;font-weight:700;font-size:14px}
.message.erreur{background:#2a1212;color:#fff;border:1px solid #5a2a2a}
.vide{margin:12px var(--marge) 0;border:1.5px dashed #3a3a3a;border-radius:16px;padding:16px;font-size:14px;color:#9a9a9a;text-align:center;line-height:1.5}
/* grande carte d'une date */
.prochain{position:relative;margin:14px var(--marge) 0;border-radius:24px;overflow:hidden;min-height:220px;display:block;text-decoration:none;background:#111}
.prochain img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.prochain::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000 10%,rgba(0,0,0,.2) 75%)}
.prochain div{position:absolute;left:18px;right:18px;bottom:16px;z-index:1}
.prochain .date{display:inline-block;background:#fff;color:#000;font-weight:800;border-radius:12px;padding:6px 10px;font-size:13px}
.prochain h3{font-family:"Bodoni Moda",serif;font-size:26px;margin:10px 0 6px;line-height:1.05}.prochain p{font-size:13px;color:#d6d6d6;line-height:1.5}
/* invitation */
.invit-photo{height:300px;background:url(/assets/hero-1.jpg) 50% 25%/cover;filter:grayscale(1) contrast(1.05);position:relative;margin-top:calc(-1 * (env(safe-area-inset-top) + 14px))}
.invit-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000 4%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.45))}
.invit-tete{margin-top:-100px;position:relative;padding:0 18px}
.invit-tete .de{display:flex;align-items:center;gap:10px;font-size:13px;color:#e2e2e2}
.invit-tete .de i{width:34px;height:34px;border-radius:50%;background:#000 url(/assets/logo-yp-blanc-2.svg) center/24px no-repeat;border:1px solid #444}
.invit-tete h1{font-family:"Bodoni Moda",serif;font-size:30px;line-height:1.05;margin:12px 0 4px}.invit-tete .quand{font-size:15px;font-weight:700}
.motif{margin:10px var(--marge) 0}.motif textarea{width:100%;font:inherit;font-size:16px;color:#fff;padding:11px 12px;background:#0b0b0b;border:1px solid #2c2c2c;border-radius:12px;outline:none;resize:vertical;min-height:70px}
.rond{width:84px;height:84px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:40px;font-weight:800;margin:40px auto 18px}
.centre h1{text-align:center;font-size:26px;font-weight:800;padding:0 30px;line-height:1.15}.centre > p{text-align:center;color:#bdbdbd;font-size:14px;margin-top:8px;padding:0 34px;line-height:1.5}
/* programme et tonalités */
.prog-l{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--trait)}.prog-l:last-child{border-bottom:0}
.prog-l .n{color:#777;width:18px;font-size:15px;font-weight:800;flex:none}
.prog-l p{font-size:15px;font-weight:700;line-height:1.25;flex:1;min-width:0}.prog-l p small{display:block;font-size:12.5px;font-weight:500;color:var(--doux)}
.ecoute{width:40px;height:40px;border-radius:50%;background:var(--s2);display:grid;place-items:center;flex:none;font-size:12px}
.ton-puce{flex:none;min-height:40px;text-align:center;font-size:12px;font-weight:800;border-radius:99px;padding:7px 11px;background:#fff;color:#000;white-space:nowrap;line-height:1.1}
.ton-puce small{display:block;font-size:9.5px;font-weight:700;opacity:.75;margin-top:1px}
.ton-puce.ton-vide{background:none;border:1.5px dashed #555;color:#9a9a9a}.ton-puce.date{background:none;border:1.5px solid #fff;color:#fff}
/* feuille (sélecteur de tonalité) */
.feuille{position:fixed;inset:0;z-index:50;display:none}
.feuille.on{display:block}
.feuille .voile{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.feuille .corps{position:absolute;left:0;right:0;bottom:0;max-height:88%;overflow-y:auto;background:#161616;border-radius:26px 26px 0 0;padding:10px 0 calc(24px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.feuille .poignee{display:block;width:40px;height:5px;border-radius:3px;background:#444;margin:0 auto 12px}
.feuille h3{font-size:19px;font-weight:800;padding:0 20px}.feuille .sous{font-size:13px;color:var(--doux);padding:2px 20px 8px;line-height:1.45}
.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 20px 0}
.notes label{position:relative}.notes input,.gamme input{position:absolute;opacity:0;pointer-events:none}
.notes span{display:block;padding:13px 0;border-radius:12px;background:#232323;font-weight:800;font-size:15px;text-align:center}
.notes input:checked + span{background:#fff;color:#000}
.gamme{display:flex;margin:12px 20px 0;background:#232323;border-radius:99px;padding:3px}.gamme label{flex:1;position:relative}
.gamme span{display:block;text-align:center;padding:9px;border-radius:99px;font-weight:800;font-size:14px;color:#bdbdbd}.gamme input:checked + span{background:#fff;color:#000}
.hist{margin:12px 20px 0;font-size:12.5px;color:#9a9a9a;line-height:1.6}
/* barre d'onglets */
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:536px;height:66px;border-radius:24px;background:rgba(28,28,28,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;text-align:center;font-size:10.5px;font-weight:700;color:#8a8a8a;z-index:20}
.nav a{display:grid;justify-items:center;gap:4px;text-decoration:none}.nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.nav .on{color:#fff}
@media (min-width:600px){.titre h1,.titre h2{font-size:32px}}
/* formulaires de la gestion (côté Yohan) */
.champ-e{display:block;margin-top:12px}.champ-e > span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9a9a9a;margin-bottom:6px}
.champ-e input,.champ-e textarea,.champ-e select{width:100%;font:inherit;font-size:16px;font-weight:600;color:#fff;padding:11px 12px;background:#0b0b0b;border:1px solid #2c2c2c;border-radius:12px;outline:none;resize:vertical}
.champ-e textarea{font-weight:500;font-size:16px;line-height:1.5}
.canaux{display:flex;gap:8px;flex-wrap:wrap}.canaux label{position:relative}.canaux input{position:absolute;opacity:0}
.historique[open] summary .fl{transform:rotate(180deg)}.historique[open]{padding-bottom:14px!important}.historique[open] summary{padding-bottom:6px!important}.historique summary::-webkit-details-marker{display:none}
.canaux b{display:block;font-size:13px;font-weight:700;border-radius:99px;padding:11px 13px;background:var(--s2);color:#9a9a9a}.canaux input:checked + b{background:#fff;color:#000}
.choisi .ordre{display:grid!important}
.ligne[disabled]{cursor:default}
/* conducteur du jour J */
.maintenant{margin:16px var(--marge) 0;border-radius:26px;background:#fff;color:#000;padding:22px}
.maintenant small{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.maintenant h2{font-size:34px;font-weight:800;line-height:1.02;margin:10px 0 8px;letter-spacing:-.02em}
.maintenant .t{font-size:20px;font-weight:700}
.maintenant .info{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.maintenant .info span{background:#000;color:#fff;border-radius:99px;padding:7px 12px;font-size:12.5px;font-weight:700}
.suite{margin:10px var(--marge) 0;display:flex;gap:12px;align-items:center;background:var(--s1);border:1px solid var(--trait);border-radius:18px;padding:12px 14px}
.suite b{font-size:22px;font-weight:800;color:#777;width:28px}.suite p{font-size:15px;font-weight:700}.suite p small{display:block;font-size:12.5px;font-weight:500;color:var(--doux)}
/* ---- application côté client (prototype validé par Yohan) ---- */
.app-accueil{position:fixed;inset:0;background:#000}
.app-accueil .photo{position:absolute;inset:0;background:url(/assets/hero-1.jpg) 56% 92%/auto 136%;filter:grayscale(1) contrast(1.08)}
@media (min-aspect-ratio:3/4){.app-accueil .photo{background-size:cover;background-position:50% 30%}}
.app-accueil .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000 26%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.05) 78%,rgba(0,0,0,.35))}
.app-accueil .bas{position:absolute;left:0;right:0;bottom:0;padding:0 22px calc(26px + env(safe-area-inset-bottom));text-align:center;max-width:560px;margin:0 auto}
.app-accueil .bas img{height:96px;margin-bottom:30px}
/* Écrans moins hauts que 830 px (iPhone SE, mini, Safari avec ses barres, petits Android) : le bloc du bas garde sa hauteur,
   donc le logo montait sur le visage. La photo prend une taille fixe et se cale depuis le bas, pour que la tête reste entière
   au-dessus du logo ; le logo rétrécit, puis s'efface sur les plus petits (audit du 10/11 : jamais le visage masqué). */
@media (max-height:830px) and (max-aspect-ratio:3/4){
  .app-accueil .photo{background-repeat:no-repeat;background-size:auto 1000px;background-position:left 56% bottom calc(52px + env(safe-area-inset-bottom))}}
@media (max-height:740px) and (max-aspect-ratio:3/4){.app-accueil .bas>img{height:64px;margin-bottom:16px}
  .app-accueil .photo{background-size:auto 900px;background-position:left 56% bottom calc(60px + env(safe-area-inset-bottom))}}
@media (max-height:660px) and (max-aspect-ratio:3/4){.app-accueil .bas>img{height:48px;margin-bottom:10px}
  .app-accueil .photo{background-size:auto 760px;background-position:left 56% bottom calc(107px + env(safe-area-inset-bottom))}}
@media (max-height:599px) and (max-aspect-ratio:3/4){.app-accueil .bas>img{display:none}
  .app-accueil .photo{background-position:left 56% bottom calc(53px + env(safe-area-inset-bottom))}}
.app-accueil .choix{display:grid;gap:12px}
.app-accueil .choix a{padding:17px;border-radius:99px;border:1.5px solid rgba(255,255,255,.55);font-weight:800;font-size:16px;text-align:center;background:rgba(0,0,0,.25);backdrop-filter:blur(6px);text-decoration:none}
.app-accueil .choix a:first-child{background:#fff;color:#000;border-color:#fff}
.app-accueil .liens{display:flex;justify-content:center;gap:10px;margin-top:22px;font-size:13px;color:#a8a8a8}.app-accueil .liens a{text-decoration:none;color:#a8a8a8;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}.app-accueil .liens{align-items:center;flex-wrap:wrap}.app-accueil .liens__seul{flex-basis:100%;justify-content:center}.app-accueil .liens i{font-style:normal;color:#555}
.rubriques{display:flex;gap:8px;padding:14px var(--marge) 0;overflow-x:auto;scrollbar-width:none}
.rubriques button{flex:none;font-size:14px;font-weight:800;border-radius:99px;padding:9px 15px;background:var(--s2);color:#cfcfcf}.rubriques button.on{background:#fff;color:#000}
.rayon{display:flex;justify-content:space-between;align-items:baseline;padding:22px 20px 0}.rayon h3{font-size:21px;font-weight:800}.rayon small{font-size:13px;color:var(--doux)}
.mini{display:flex;gap:12px;overflow-x:auto;padding:12px 20px 4px;scroll-padding-inline:20px;scrollbar-width:none;scroll-snap-type:x mandatory}
.mini::-webkit-scrollbar{display:none}
.mini button{flex:none;width:134px;scroll-snap-align:start;text-align:left}
.mini .pochette{position:relative;width:134px;height:134px;border-radius:10px;overflow:hidden;background:#1a1a1a}
.mini .pochette img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.mini .pochette em{position:absolute;left:7px;bottom:7px;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;border:1px solid rgba(255,255,255,.7);border-radius:99px;padding:2px 7px;background:rgba(0,0,0,.45)}
.mini b{display:block;font-size:13.5px;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini small{display:block;font-size:12.5px;color:var(--doux);font-family:"Frank Ruhl Libre",serif;margin-top:1px;direction:rtl;text-align:left}
.vign{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;filter:grayscale(1)}
.lecteur{position:fixed;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:536px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;background:#1c1c1c;border-radius:18px;padding:10px 12px;z-index:30;cursor:pointer}
.lecteur img{width:44px;height:44px;border-radius:9px;object-fit:cover;filter:grayscale(1)}
.lecteur p{flex:1;font-size:14px;font-weight:700;min-width:0}.lecteur p small{display:block;font-weight:500;font-size:12px;color:var(--doux)}
.lecteur button{font-size:18px;width:34px;text-align:center}
.lecteur .barre{position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:#333;border-radius:2px;overflow:hidden}.lecteur .barre i{display:block;height:100%;width:0;background:#fff}
.plein{position:fixed;inset:0;z-index:60;background:#000;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.plein.on{transform:none}
.plein .fond{position:absolute;inset:-40px;background:center/cover;filter:grayscale(1) blur(40px) brightness(.38)}
.plein .corps{position:relative;height:100%;display:flex;flex-direction:column;padding:calc(30px + env(safe-area-inset-top)) 26px calc(30px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto}
.plein .fermer{align-self:center;width:44px;height:6px;border-radius:3px;background:rgba(255,255,255,.4);margin-bottom:16px}
.plein .moment-l{text-align:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#cfcfcf}
.bascule{align-self:center;display:flex;background:rgba(255,255,255,.12);border-radius:99px;padding:3px;margin-top:14px}
.bascule button{font-size:13px;font-weight:800;padding:7px 18px;border-radius:99px;color:#cfcfcf}.bascule button.on{background:#fff;color:#000}
.plein .pochette{margin:22px auto 0;width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.plein .pochette img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.plein .pochette video{width:100%;height:100%;object-fit:contain;background:#000}.plein .pochette video.nb{filter:grayscale(1) contrast(1.05)}
.plein.video .pochette{aspect-ratio:16/9;margin-top:60px}
.plein .titre-l{margin-top:auto}.plein .titre-l h2{font-size:24px;font-weight:800}
.plein .titre-l .he{font-size:20px;color:#d6d6d6;display:block;text-align:left;margin-top:2px}.plein .titre-l small{font-size:14px;color:#9a9a9a}
.rail{margin-top:18px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden;cursor:pointer}.rail i{display:block;height:100%;width:0;background:#fff}
.temps{display:flex;justify-content:space-between;font-size:11.5px;color:#9a9a9a;margin-top:6px;font-variant-numeric:tabular-nums}
.commandes{display:flex;justify-content:center;align-items:center;gap:44px;margin-top:14px}
.commandes svg{width:34px;height:34px;fill:#fff}.commandes .lire svg{width:58px;height:58px}
/* ---- application : espace du client, réservation (prototype validé par Yohan) ---- */
.form-app{margin:14px var(--marge) 0}
.champ-a{display:block;margin-top:12px}.champ-a > span{display:block;font-size:12px;font-weight:700;color:#9a9a9a;margin:0 4px 6px}
.champ-a input,.champ-a textarea{width:100%;font:inherit;font-size:16px;color:#fff;background:var(--s1);border:1px solid var(--trait);border-radius:14px;padding:13px 14px;outline:none;-webkit-appearance:none;appearance:none;min-height:50px}
.champ-a textarea{resize:vertical;line-height:1.45}
.champ-a input:focus,.champ-a textarea:focus{border-color:#fff}
.champ-a input[readonly],.champ-a textarea[readonly]{color:#9a9a9a}
.champ-a input::placeholder,.champ-a textarea::placeholder{color:#5f5f5f}
.deux-a{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}.deux-a .champ-a{min-width:0}
.form-app .bouton{margin:18px 0 0}.form-app .message{margin:12px 0 0}
.puces-a{display:flex;flex-wrap:wrap;gap:8px}.puces-a button{padding:10px 15px;border-radius:99px;background:var(--s2);font-size:14px;font-weight:700;color:#cfcfcf}
.puces-a button.on{background:#fff;color:#000}
.pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.centre-a{text-align:center;padding:0 20px}.centre-a h2{font-size:26px;font-weight:800}.centre-a > p{color:#bdbdbd;font-size:14px;margin-top:8px;line-height:1.5}
.centre-a .bouton{margin-left:0;margin-right:0}
.bandeau-a{position:relative;margin:0 var(--marge);height:300px;border-radius:26px;overflow:hidden;background:#111}
.photo-a{position:absolute;inset:0;background:url(/assets/hero-1.jpg) 50% 22%/cover;filter:grayscale(1) contrast(1.08)}
.photo-a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 18%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.1))}
.texte-a{position:absolute;left:18px;right:18px;bottom:16px}.texte-a small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#cfcfcf}
.texte-a h1{font-size:27px;font-weight:800;line-height:1.1;margin-top:4px}
.compte-a{display:flex;align-items:center;gap:12px;margin-top:10px}.compte-a b{font-size:30px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.compte-a span{font-size:12.5px;color:#cfcfcf;line-height:1.4}.compte-a span::first-letter{text-transform:uppercase}
.jauge-a{display:grid;gap:4px;margin:16px calc(var(--marge) + 4px) 0}.jauge-a i{height:5px;border-radius:3px;background:#2a2a2a}.jauge-a i.f{background:#fff}
.carte-info{margin:14px var(--marge) 0;padding:16px;border:1.5px dashed #3a3a3a;border-radius:18px;font-size:14px;color:#bdbdbd;line-height:1.5}.carte-info b{display:block;color:#fff;font-size:15px;margin-bottom:3px}
.tuiles-a{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px var(--marge) 0}
.tuile-a{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:var(--s1);border:1px solid var(--trait);text-decoration:none;min-width:0}
.tuile-a.large{grid-column:1/-1}.tuile-a svg{width:26px;height:26px;flex:none;stroke:#fff;fill:none;stroke-width:1.7}
.tuile-a b{display:block;font-size:14.5px}.tuile-a small{display:block;font-size:12px;color:#9a9a9a;margin-top:2px;line-height:1.35}
.deconnexion-a{display:block;margin:26px auto 0;font-size:13.5px;font-weight:700;color:#8a8a8a;text-decoration:underline;text-underline-offset:3px}
.infos-a{display:grid;gap:8px;margin:14px var(--marge) 0}.infos-a > div{background:var(--s1);border:1px solid var(--trait);border-radius:18px;padding:13px 15px}
.infos-a small{display:block;font-size:11.5px;font-weight:700;color:#9a9a9a}.infos-a b{display:block;font-size:15.5px;margin-top:3px;line-height:1.35}
.a-confirmer{color:#8a8a8a;font-weight:600;font-style:italic}
#toast-a{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));background:#fff;color:#000;font-weight:700;font-size:14px;padding:12px 18px;border-radius:99px;z-index:90;max-width:calc(100vw - 32px);text-align:center;opacity:0;transition:opacity .25s;pointer-events:none}
#toast-a.on{opacity:1}
.form-app .section{padding:22px 4px 0}
.form-app .bouton,.centre-a .bouton{width:100%}
/* l'application en une page : un écran visible à la fois, entrée douce (comme l'app Davy Nataf) */
.ecran-a{display:none}
.ecran-a.on{display:block;animation:entre-a .32s cubic-bezier(.2,.7,.2,1)}
@keyframes entre-a{from{opacity:0;transform:translateY(8px)}}
body:not(.avec-nav){padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.cadre-a iframe{position:fixed;inset:0;width:100%;height:100%;border:0;background:#000;z-index:5}
.lecteur{z-index:30}
body.avec-nav .lecteur{bottom:calc(92px + env(safe-area-inset-bottom))}
body[data-ecran="programme"] .lecteur{display:none!important}
/* le lecteur affiché : la page lui garde sa place (~74 px), avec ou sans la barre d'onglets (audit du 01/11) */
body.avec-lecteur:not([data-ecran="programme"]){padding-bottom:calc(114px + env(safe-area-inset-bottom))}
body.avec-lecteur.avec-nav:not([data-ecran="programme"]){padding-bottom:calc(184px + env(safe-area-inset-bottom))}
body.avec-lecteur .app-accueil .bas{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
/* demande d'accord pour les notifications (application) */
.accord-notifs{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;opacity:0;transition:opacity .25s}
.accord-notifs.on{opacity:1}
.accord-notifs .corps{width:100%;background:#151515;border-radius:26px 26px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));border-top:1px solid #262626}
.accord-notifs b{display:block;font-size:20px;font-weight:800}.accord-notifs p{color:#bdbdbd;font-size:14.5px;line-height:1.5;margin:8px 0 6px}
.accord-notifs .bouton{width:100%;margin:12px 0 0}
/* textes légaux (confidentialité) */
.texte-legal{padding:8px 20px 20px;font-size:14.5px;line-height:1.6;color:#cfcfcf}
.texte-legal h2{font-size:16px;font-weight:800;color:#fff;margin:22px 0 6px}
.texte-legal ul{padding-left:18px;margin:6px 0}.texte-legal li{margin:6px 0}.texte-legal b{color:#fff}
.texte-legal a{color:#fff;text-underline-offset:3px}

/* Accueil musicien (maquette A1, Davy 31/10) : les invitations en grandes cartes, réponse sur place ; plusieurs = on fait
   glisser (la suivante dépasse sur le bord) ; puis les dates confirmées, toutes au même format (tuile calendrier). */
.compte{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:22px 20px 2px}
.compte b{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.compte span{font-size:12px;font-weight:700;color:#9a9a9a;white-space:nowrap}
.carrousel{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:10px;padding:0 var(--marge);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--marge);scrollbar-width:none;overscroll-behavior-x:contain}
.carrousel::-webkit-scrollbar{display:none}
.carrousel.plusieurs{grid-auto-columns:calc(100% - 34px)}
.inv{scroll-snap-align:start;margin-top:12px;border-radius:26px;overflow:hidden;background:var(--s1);border:1.5px solid #fff;min-width:0}
.inv-photo{display:block;height:170px;position:relative;text-decoration:none}
/* la photo en noir et blanc sur son propre calque : le filtre ne doit pas éteindre le point rouge de l'étiquette */
.inv-photo::before{content:"";position:absolute;inset:0;background:url(/assets/hero-1.jpg) 50% 32%/cover;filter:grayscale(1) contrast(1.05)}
.inv-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#121212 2%,rgba(0,0,0,.1) 70%)}
.inv-badge{position:absolute;top:12px;left:12px;z-index:1;background:#fff;color:#000;font-weight:800;font-size:12px;border-radius:99px;padding:6px 11px;display:flex;align-items:center;gap:6px}
.inv-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3b30}
.inv-corps{padding:4px 16px 16px;margin-top:-34px;position:relative}
.inv h2{font-family:"Bodoni Moda",serif;font-size:27px;line-height:1.05}.inv h2 a{text-decoration:none}
.inv-famille{font-size:13px;color:#bdbdbd;margin-top:4px}
.inv-grille{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.inv-grille div{background:var(--s2);border-radius:14px;padding:9px 11px;min-width:0}.inv-grille .l{grid-column:1/-1}
.inv-grille small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a}.inv-grille b{display:block;font-size:14px;margin-top:2px;line-height:1.35}
.inv .deux{grid-template-columns:1fr 1fr;margin:14px 0 0}.inv .deux .bouton{padding:14px 8px;white-space:nowrap}
.inv .motif{margin:12px 0 0}.inv form>.bouton{margin:12px 0 0;width:100%}
.points{display:flex;justify-content:center;gap:6px;margin-top:12px}.points i{width:7px;height:7px;border-radius:50%;background:#444;transition:width .2s,background .2s}.points i.on{background:#fff;width:20px;border-radius:99px}
.cal{width:54px;flex:none;border-radius:14px;background:#fff;color:#000;text-align:center;padding:6px 0 7px;line-height:1}
.cal small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#666}
.cal b{display:block;font-size:22px;font-weight:800;margin:3px 0 2px}
.cal i{display:block;font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.date-c{display:flex;gap:13px;align-items:center;margin:10px var(--marge) 0;padding:12px;background:var(--s1);border:1px solid var(--trait);border-radius:20px;text-decoration:none}
.date-c .t{flex:1;min-width:0}.date-c h3{font-family:"Bodoni Moda",serif;font-size:19px;line-height:1.1}
.date-c p{font-size:12.5px;color:var(--doux);margin-top:4px;line-height:1.4}.date-c .fl{color:#666;font-size:20px}
.ok{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;margin-top:6px}.ok::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ddc84}

/* Motifs en un toucher (refus, désistement) et champs de liste */
.motifs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}.inv .motifs{margin-top:12px}
.motifs .puce{padding:8px 11px;font-size:12.5px;cursor:pointer}.motifs .puce.on{background:#fff;color:#000;border-color:#fff}
.champ-e select{width:100%;font:inherit;font-size:16px;color:#fff;padding:11px 12px;background:#0b0b0b;border:1px solid #2c2c2c;border-radius:12px}
/* Audit du 01/11 : des zones de toucher d'au moins 40 px (le pouce, pas la souris) */
.retour{min-height:40px;display:inline-flex;align-items:center}
button.puce,a.puce{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;font-size:12px}
.lecteur button{width:44px;height:44px}
.plein .fermer{position:relative;height:44px;width:88px;background:none;margin:-19px auto -3px}
.plein .fermer::before{content:"";position:absolute;left:22px;right:22px;top:19px;height:6px;border-radius:3px;background:rgba(255,255,255,.4)}
/* Clavier ouvert (Android rétrécit la page) : la barre du bas s'efface pour ne pas couvrir le bouton sous le champ */
@media (max-width:899px){body:has(:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=date]):not([type=time]):not([type=file]),textarea):focus) :is(.nav,.nav-a,.lecteur){display:none!important}}
.trois-b .bouton{padding:14px 6px;font-size:14px;line-height:1.2;display:flex;align-items:center;justify-content:center;text-align:center}
a.puce{text-decoration:none;flex:none}
/* (suite, tour 2) */
.rubriques button,.puces-a button{min-height:40px}
.deconnexion-a{padding:12px 8px}
.plein .fermer{flex:none}
[data-p-prec],[data-p-suiv]{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.plein .pochette{width:min(100%,44vh);flex-shrink:0}
.plein .rail{flex-shrink:0}
/* plein écran de l'app (tour 5) : les commandes gardent leur taille, la pochette carrée prend la place qui reste ;
   vidéos verticales (720×1280) dans un cadre 9:16, comme sur le site */
.plein .corps>:not(.pochette){flex-shrink:0}
.plein:not(.video) .pochette{flex:0 1 auto;min-height:0;width:auto;height:min(44vh,calc(100vw - 52px));max-width:100%;aspect-ratio:1}
.plein.video .pochette{aspect-ratio:9/16;width:auto;height:min(58vh,640px);max-width:100%;flex:0 1 auto;min-height:0;margin-top:22px;margin-bottom:12px}
.bascule button{min-height:40px}
img[src*="-couleur."]{filter:none!important}.plein .fond.en-couleur{filter:blur(40px) brightness(.38)}/* pochette choisie en couleur (04/11) */

/* L'Orchestre Adrénaline proposé (Davy, 05/11) : ligne sous les boutons de l'accueil, carte après « Demande envoyée », carte de l'espace au choix de Yohan */
.app-accueil .adr-ligne{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:700;color:#d6d6d6;text-decoration:none;min-height:44px}
.app-accueil .adr-ligne img{height:30px;width:auto}.app-accueil .adr-ligne b{color:#fff}.app-accueil .adr-ligne i{font-style:normal;flex:none;color:#fff}
.adr-ligne--carte{display:flex;align-items:center;gap:12px;margin:18px var(--marge) 0;padding:14px;border-radius:16px;background:#121212;border:1px solid #262626;color:#cfcfcf;text-decoration:none;font-size:14px;line-height:1.4;text-align:left}
.adr-ligne--carte img{height:40px;width:auto;flex:none}.adr-ligne--carte b{display:block;color:#fff;font-size:15px}.adr-ligne--carte i{font-style:normal;margin-left:auto;font-size:22px;color:#888}
.adr-carte{margin:14px var(--marge) 0;padding:18px;border-radius:18px;background:linear-gradient(160deg,#1a1a1a,#0d0d0d);border:1px solid #2c2c2c;text-align:left}
.adr-carte img{display:block;height:64px;width:auto;margin:0 0 12px}.adr-carte small{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a}
.adr-carte h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:4px}.adr-carte p{font-size:15px;color:#c8c8c8;margin-top:6px;line-height:1.45}
.adr-carte .bouton{margin:14px 0 0;width:100%}

/* Le lien personnel d'un musicien dans sa fiche (05/11), comme celui d'un client */
.lien-mus__titre{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a;margin:18px 0 6px}
.lien-mus{width:100%;padding:12px 14px;border-radius:14px;background:var(--s2);border:1px solid #2a2a2a;color:#cfcfcf;font-size:16px}
.lien-mus__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-top:8px}
.lien-mus__actions .bouton{margin:0;width:auto;padding:13px 8px;font-size:14px;white-space:nowrap}
.lien-mus__actions .bouton[hidden]{display:none}