/* ============================================================================
   Espace prestataire Aya — design system (même charte que la page démo :
   Fraunces + Inter, ivoire / vert / orange). Partagé par connexion.html et
   index.html (connexion, onboarding, dashboard).
   ========================================================================== */
:root{
  --ivoire:#F5F0E6; --ivoire-2:#EDE6D6; --nuit:#14261E; --vert:#1E5C43;
  --vert-clair:#2E8B62; --orange:#FFE580; --orange-clair:#FFE580; --craie:#FBF8F2;
  --gris:#6B6357; --ligne:#D9CFBE; --rouge:#C0392B;
  --ombre:0 20px 50px -20px rgba(20,38,30,.35);
  --ombre-s:0 8px 24px -14px rgba(20,38,30,.4);
  --radius:18px;
}
*{box-sizing:border-box}
/* ── ANTI-DÉBORDEMENT GLOBAL (Nico, 01/09 : « les horaires débordent — que ça
   ne se reproduise plus, sur toutes les verticales, tous les onglets »). ──
   1) Sur iOS, input[type=time]/[type=date] IGNORE width tant que son
      apparence native est active → appearance:none le fait rentrer dans le
      rang (c'est le débordement exact vu sur la fiche business mobile).
   2) Aucun champ ne peut dépasser son conteneur (max-width), et aucun enfant
      de grille ne peut la faire exploser (min-width:0 — le « grid blowout »).
   3) Filet ultime : la page ne défile JAMAIS horizontalement. Un débordement
      résiduel devient invisible au lieu de casser tout l'écran. */
input,select,textarea{max-width:100%;min-width:0}
input[type="time"],input[type="date"]{appearance:none;-webkit-appearance:none}
.ligne-2>*,.ligne-3>*,.formulaire-inline>*,.perf-kpis>*,.grille-check>*{min-width:0}
html,body{overflow-x:clip}
html,body{margin:0}
/* ⚠️ Sans ça, Safari/Chrome mobile « boostent » d'eux-mêmes la police des cellules
   pleines de texte dans les tableaux qui défilent (vu 06/09 : colonne Produits
   énorme à côté de Client, alors que le HTML des deux cellules est identique). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;color:var(--encre,var(--nuit));background:var(--ivoire);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:700}
.cache{display:none !important}

/* --- Boutons --- */
.bouton-principal,button[type="submit"]{font-family:inherit;font-weight:600;font-size:1rem;padding:13px 24px;border-radius:12px;border:none;cursor:pointer;background:var(--orange);color:#000;box-shadow:0 10px 24px -8px rgba(239,208,97,.45);transition:transform .15s,box-shadow .2s}
.bouton-principal:hover,button[type="submit"]:hover{transform:translateY(-2px)}
.bouton-principal:disabled{opacity:.55;cursor:default;transform:none}
.btn-ghost{background:transparent;color:var(--vert);border:1.5px solid var(--ligne);border-radius:12px;padding:11px 20px;font-weight:600;cursor:pointer;font-family:inherit}
.btn-ghost:hover{border-color:var(--vert)}
.lien-bouton{background:none;border:none;color:var(--vert);font-weight:600;cursor:pointer;text-decoration:underline;font-size:.9rem;margin-top:16px;font-family:inherit}

/* --- Champs --- */
label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px}
input,select{width:100%;padding:12px 14px;border:1.5px solid var(--ligne);border-radius:12px;background:var(--surface,#fff);font-size:.98rem;font-family:inherit;color:var(--encre,var(--nuit));transition:.15s}
input:focus,select:focus{outline:none;border-color:var(--vert-clair);box-shadow:0 0 0 3px rgba(46,139,98,.14)}
.message-erreur{color:var(--rouge);font-size:.86rem;margin:10px 0 0;min-height:1em}
.message-succes{color:var(--vert);font-size:.86rem;margin:10px 0 0}
.aide{font-size:.78rem;color:var(--gris);margin-top:6px}
/* Champ obligatoire : astérisque rouge après le libellé + surbrillance si vide au submit. */
label.req::after{content:" *";color:var(--rouge);font-weight:800}
input.invalide,select.invalide{border-color:var(--rouge);box-shadow:0 0 0 3px rgba(200,60,50,.12)}
/* Cases à cocher / radios : ne pas les étirer comme les champs texte. */
input[type="checkbox"],input[type="radio"]{width:auto;margin:0;accent-color:var(--orange);cursor:pointer}
/* Bloc de sous-section dans un formulaire (Identité, Tarifs, Règles, Équipements…). */
.bloc-carac{margin-top:20px;padding-top:18px;border-top:1px dashed var(--ligne)}
.bloc-carac > h4{margin:0 0 4px;font-size:1rem}
.bloc-carac > .aide{margin:0 0 12px}
/* Grille de cases à cocher (équipements). */
.grille-check{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 14px;margin-top:6px}
.grille-check label{display:flex;align-items:center;gap:8px;font-weight:500;font-size:.9rem;margin:0;cursor:pointer}
/* Ligne « Oui / Non » et services optionnels (segment de choix). */
.choix{display:inline-flex;background:var(--ivoire-2);border:1px solid var(--ligne);border-radius:12px;padding:4px;gap:3px}
.choix button{border:none;background:none;cursor:pointer;font-weight:600;font-size:.82rem;color:var(--gris);padding:6px 14px;border-radius:12px;font-family:inherit}
.choix button.on{background:var(--surface,#fff);color:var(--vert);box-shadow:var(--ombre-s)}
.ligne-carac{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 0}
.ligne-carac + .ligne-carac{border-top:1px solid var(--ligne)}
.ligne-carac > span{font-weight:500;font-size:.92rem}
.tarif-sup{width:110px!important;display:inline-block}
/* Vignettes de photos importées. */
.apercu-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.apercu-photos .vignette{position:relative;width:74px;height:74px;border-radius:10px;overflow:hidden;border:1px solid var(--ligne)}
.apercu-photos .vignette img{width:100%;height:100%;object-fit:cover}
/* Encadré photo CARRÉ (mêmes .photo-slot que le logement), appliqué partout via
   creerUploaderPhotos. Colonnes de taille fixe → carrés modestes, pas étirés. */
.photo-slots-mini{display:grid;grid-template-columns:repeat(auto-fill,128px);gap:12px;margin-top:10px}
.apercu-photos .vignette button{position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0;border-radius:50%;background:rgba(20,38,30,.72);color:#fff;font-size:.8rem;line-height:1;display:grid;place-items:center;box-shadow:none}

/* --- Connexion + onboarding : carte centrée --- */
.page-connexion,.centre{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.carte{background:var(--craie);border:1px solid var(--ligne);border-radius:var(--radius);box-shadow:var(--ombre);padding:34px;width:100%;max-width:440px}
.carte.large{max-width:760px}
.carte h1{font-size:1.9rem;margin:.1em 0 .3em}
.sous-titre{color:var(--gris);margin:0 0 24px}
.marque{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:18px}
.marque .pastille{width:38px;height:38px;border-radius:11px;background:var(--vert) url('/dashboard/assets/aya-avatar.png') center/cover no-repeat;box-shadow:var(--ombre-s)}
.marque b{font-family:'Fraunces';font-weight:900;font-size:1.3rem;color:var(--vert)}
.lbl{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#A98600;margin:0 0 12px;text-align:center}
form label{margin-top:14px}
form label:first-of-type{margin-top:0}
.bouton-principal{width:100%;justify-content:center;margin-top:22px}

/* --- Onboarding : étapes --- */
.etapes{display:flex;gap:8px;justify-content:center;margin-bottom:22px}
.etapes .pas{width:34px;height:6px;border-radius:100px;background:var(--ligne)}
.etapes .pas.on{background:var(--vert)}
.grille-verticales{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:6px 0}
.vert-carte{background:var(--surface,#fff);border:1.5px solid var(--ligne);border-radius:14px;padding:18px;cursor:pointer;text-align:left;transition:.15s;font-family:inherit}
.vert-carte:hover{transform:translateY(-2px);box-shadow:var(--ombre-s);border-color:var(--orange-clair)}
.vert-carte.sel{border-color:var(--vert);box-shadow:0 0 0 3px rgba(30,92,67,.14)}
.vert-carte .emo{font-size:1.6rem;display:block;margin-bottom:8px}
.vert-carte b{font-size:1.02rem}
.cadenas{display:flex;gap:8px;justify-content:center;align-items:center;font-size:.82rem;color:var(--gris);background:var(--ivoire-2);border:1px dashed var(--ligne);padding:10px 14px;border-radius:12px;margin:16px 0 4px}
.seg{display:inline-flex;background:var(--ivoire-2);border:1px solid var(--ligne);border-radius:12px;padding:5px;gap:4px}
.seg button{border:none;background:none;cursor:pointer;font-weight:600;font-size:.86rem;color:var(--gris);padding:8px 16px;border-radius:12px;font-family:inherit}
.seg button.on{background:var(--surface,#fff);color:var(--vert);box-shadow:var(--ombre-s)}
.ligne-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* --- Dashboard : barre latérale (façon maquette) + contenu --- */
.dash{display:grid;grid-template-columns:238px 1fr;max-width:none;margin:22px;background:var(--craie);border:1px solid var(--ligne);border-radius:var(--radius);box-shadow:var(--ombre);overflow:hidden;min-height:calc(100vh - 44px)}
.side{background:var(--nuit);color:#fff;padding:22px 15px;display:flex;flex-direction:column;gap:3px}
.side .who{padding:2px 8px 16px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}
/* Avatar d'Aya agrandi (demande Nico, 12/08) : à 34px on ne distinguait pas
   qu'elle tient des vêtements. `center/contain` au lieu de `cover` : le cadrage
   par défaut rognait justement les bords, donc les vêtements qu'elle porte. */
.side .marque-side{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.side .marque-side .pastille{width:64px;height:64px;border-radius:16px;flex:none;background:var(--vert) url('/dashboard/assets/aya-avatar.png') center/contain no-repeat}
.side .marque-side b{font-family:'Fraunces';font-weight:900;font-size:1.6rem;color:#fff}
.side .who .n{font-family:'Fraunces';font-weight:700;font-size:1.08rem;line-height:1.2}
.side .who .c{font-size:.76rem;color:rgba(255,255,255,.6);margin-top:4px}
.status-badge{margin-top:14px;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-weight:700;font-size:.8rem;padding:8px 14px;border-radius:12px;transition:.15s;font-family:inherit;white-space:nowrap}
.status-badge .point{width:9px;height:9px;border-radius:50%;flex:none}
.status-badge.on{background:var(--vert-clair);color:#fff}
.status-badge.on .point{background:var(--surface,#fff)}
.status-badge.off{background:rgba(255,255,255,.1);color:rgba(255,255,255,.65)}
.status-badge.off .point{background:rgba(255,255,255,.5)}
.status-badge:hover{transform:translateY(-1px)}
/* Onglets = liens de la barre latérale */
.side .onglet{background:none;border:none;color:rgba(255,255,255,.72);text-align:left;padding:11px 13px;border-radius:11px;font-size:.9rem;font-weight:500;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:11px;transition:.13s;width:100%}
.side .onglet:hover{background:rgba(255,255,255,.08);color:#fff}
.side .onglet.actif{background:var(--vert);color:#fff}
.side .onglet .i{width:20px;text-align:center;font-size:1rem;flex:none}
.side .onglet.onglet-ajout{background:var(--orange);color:#000;margin-top:4px}
.side .onglet.onglet-ajout:hover{filter:brightness(1.08)}
/* « Se déconnecter » juste SOUS le dernier onglet (demande Nico, 12/08), et non
   collé en bas de l'écran : `flex:1` étirait cet espace pour l'y pousser. Un
   simple écart suffit, avec un filet de séparation. */
.side .spacer{flex:none;height:14px}
.side #bouton-deconnexion{border-top:1px solid rgba(255,255,255,.12);padding-top:14px;margin-top:2px}
#bouton-deconnexion{background:none;border:none;color:rgba(255,255,255,.5);text-align:left;padding:11px 13px;border-radius:11px;font-size:.9rem;font-weight:500;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:11px;width:100%}
#bouton-deconnexion:hover{background:rgba(255,255,255,.08);color:#fff}
#bouton-deconnexion .i{width:20px;text-align:center;flex:none}
.main{padding:28px 30px 46px;overflow:auto;min-width:0}
.main > main{display:block}

.bandeau{margin:0 0 16px;padding:14px 18px;border-radius:14px;display:flex;gap:12px;align-items:center;font-size:.92rem}
.bandeau .e{font-size:1.3rem}
.bandeau.attente{background:rgba(255,215,0,.14);border:1px solid var(--orange-clair);color:#7a6200}
.bandeau.attente button{margin-left:auto}
.bandeau.info{background:var(--ivoire-2);border:1px solid var(--ligne);color:var(--encre,var(--nuit))}

@media(max-width:860px){
  .dash{grid-template-columns:1fr;margin:0;border-radius:0;min-height:100vh}
  /* PWA plein écran : la barre latérale respecte l'encoche du téléphone
     (env(safe-area-inset-top)) — sans ça, l'heure iOS s'imprimait sur les
     onglets (vu par Nico le 01/09). */
  .side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:14px;padding-top:calc(14px + env(safe-area-inset-top, 0px))}
  .side .who{width:100%;border-bottom:none;margin-bottom:2px;padding-bottom:6px}
  .side .marque-side{display:none}
  .side .onglet{width:auto}
  .side .spacer{display:none}
  #bouton-deconnexion{width:auto;margin-left:auto}
}
.section{background:var(--craie);border:1px solid var(--ligne);border-radius:var(--radius);box-shadow:var(--ombre-s);padding:24px;margin-top:14px}
.section h3{margin:0 0 16px;font-size:1.25rem}

table{width:100%;border-collapse:collapse;font-size:.9rem}
@media(max-width:700px){
  /* Une table plus large que l'écran scrolle dans son cadre au lieu d'en
     sortir (vécu : la colonne Statut et la poubelle des créneaux hors écran). */
  section table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
thead th{text-align:left;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);font-weight:700;padding:10px 12px;border-bottom:2px solid var(--ligne)}
tbody td{padding:12px;border-bottom:1px solid var(--ligne)}
tbody tr:last-child td{border-bottom:none}
.badge{display:inline-flex;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:100px;background:var(--ivoire-2);color:var(--gris);white-space:nowrap}
/* Agenda des commerciaux (Nico, 21/09) : un créneau RÉSERVÉ (le nom du client
   est dans le libellé) ressort en VERT — un rendez-vous pris est une bonne
   nouvelle pour le commerçant, pas un état neutre comme "libre". */
.badge.full{background:rgba(30,92,67,.14);color:var(--vert)}
.badge.rupture{background:rgba(192,57,43,.12);color:var(--rouge)}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 18px}
.kpi{background:var(--craie);border:1px solid var(--ligne);border-radius:14px;padding:16px 18px;box-shadow:var(--ombre-s)}
.kpi .k{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.kpi .v{font-family:'Fraunces';font-weight:900;font-size:1.55rem;margin-top:4px}
.kpi .v.vert{color:var(--vert)}
.kpi.cliquable{cursor:pointer;transition:transform .15s,box-shadow .2s}
.kpi.cliquable:hover{transform:translateY(-2px);box-shadow:var(--ombre)}
.kpi .chevron{display:inline-block;color:var(--vert-clair);font-weight:900;transition:transform .2s}
.detail-ventes{margin:0 0 16px}
.detail-ventes table{background:var(--craie);border:1px solid var(--ligne);border-radius:14px;box-shadow:var(--ombre-s)}
.detail-ventes th,.detail-ventes td{padding:12px 16px}
.dv-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.dv-head h4{margin:0;font-size:1.05rem}
.dv-hint{font-size:.82rem;color:var(--gris)}
.dv-ca{font-weight:700;color:var(--vert)}
.tarif-ligne{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center}
.tarif-ligne .t-suppr{background:none;border:1.5px solid var(--ligne);color:var(--gris);border-radius:10px;width:40px;height:44px;cursor:pointer;font-weight:700}
.tarif-ligne .t-suppr:hover{border-color:var(--rouge);color:var(--rouge)}
.ev-carte{background:var(--surface,#fff);border:1px solid var(--ligne);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.ev-tete{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.ev-tete b{font-size:1.02rem}
.ev-tarifs{display:flex;gap:6px;flex-wrap:wrap}
.ev-tarifs .badge{background:rgba(30,92,67,.1);color:var(--vert)}
@media(max-width:640px){.tarif-ligne{grid-template-columns:1fr 1fr auto}}
/* Variante Vêtements : taille (menu étroit) × couleur (large, la plus importante) × stock.
   Surcharge la grille billetterie 2fr/1fr/1fr pour que la COULEUR soit bien visible. */
.vv-ligne{grid-template-columns:120px minmax(0,1fr) 92px auto auto}
.vv-ligne .vv-photo{background:none;border:1.5px solid var(--ligne);border-radius:10px;width:44px;height:44px;cursor:pointer;font-size:1.05rem;line-height:1}
.vv-ligne .vv-photo:hover{border-color:var(--vert,#2f6b4f)}
@media(max-width:640px){.vv-ligne{grid-template-columns:88px minmax(0,1fr) 60px auto auto;gap:6px}
  .vv-ligne .vv-photo{width:38px}}
/* Scanner de billets (cinéma + billetterie). */
.scan-carte{border:2px solid var(--ligne);border-radius:14px;padding:16px;background:var(--surface,#fff)}

/* Sélecteur de vue (segmented control) : commandes en cours / toutes, réservations en cours / passées. */
.seg-groupe{display:inline-flex;gap:4px;background:var(--craie);padding:4px;border-radius:12px;border:1px solid var(--ligne)}
.seg-groupe .seg{border:none;background:none;padding:8px 16px;border-radius:9px;cursor:pointer;font-weight:600;color:var(--gris);font-size:.9rem}
.seg-groupe .seg.actif{background:var(--surface,#fff);color:var(--vert);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* Détail d'une commande livraison (dépliable) : mêmes infos qu'Aya à l'acceptation. */
.cmd-ligne:hover td{background:rgba(30,92,67,.04)}
.cmd-detail>td{background:var(--craie);padding:0 16px}
.cmd-detail-box{display:flex;flex-direction:column;gap:6px;padding:14px 4px;font-size:.92rem}
.cmd-detail-box a{color:var(--vert);font-weight:600}
.cmd-qr{margin-top:8px}
.cmd-qr img{width:170px;height:170px;border:1px solid var(--ligne);border-radius:12px;background:var(--surface,#fff);padding:6px}
/* --- Formulaire d'ajout (produit, article…) — carte Aya (Nico, 30/08 : « la
   présentation n'est pas très sexy, très basique »). Fini la ligne unique
   écrasée (align-items:end sur minmax(150px)) : une vraie carte, liseré
   signature vert→orange, champs aérés, photo en tuile pointillée, actions
   séparées. Partagé par TOUS les formulaires d'ajout (boisson, cosmétique,
   restaurant, vêtements…) — un seul style, pas des copies qui divergent. --- */
/* La CARTE de formulaire (.carte-form) vaut pour TOUTES les verticales
   (rappel Nico, 01/09 : « je ne suis pas censé te rappeler ça ») : mêmes
   couleurs, même liseré, quel que soit le métier. `.formulaire-inline` y
   ajoute sa grille de champs. */
.formulaire-inline,.carte-form{margin-top:18px;padding:28px 24px 22px;background:var(--craie);border:1px solid var(--ligne);border-radius:var(--radius);box-shadow:var(--ombre-s);position:relative;overflow:hidden}
.formulaire-inline::before,.carte-form::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--vert),var(--vert-clair) 55%,var(--orange))}
/* ⚠️ align-items reste STRETCH (défaut) : avec `start`, une cellule au label
   sur deux lignes gardait sa hauteur propre et son champ flottait plus bas
   que les autres — c'est le désalignement exact montré par Nico. */
.formulaire-inline{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px 18px}
.formulaire-inline .form-titre{grid-column:1/-1;margin:0;font-family:'Fraunces',Georgia,serif;font-size:1.3rem;color:var(--vert)}
.formulaire-inline .form-titre .aide{display:block;font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:.85rem;margin-top:3px}
.formulaire-inline input,.formulaire-inline select,.carte-form input,.carte-form select{background:#fff}
.formulaire-inline input[type="file"],.carte-form input[type="file"]{border-style:dashed;background:var(--ivoire-2);cursor:pointer;color:var(--gris)}
.formulaire-inline input[type="file"]:hover,.carte-form input[type="file"]:hover{border-color:var(--vert-clair)}
.formulaire-inline input[type="file"]::file-selector-button,.carte-form input[type="file"]::file-selector-button{font-family:inherit;font-weight:600;border:none;border-radius:8px;background:var(--vert);color:#fff;padding:7px 12px;margin-right:10px;cursor:pointer}
.formulaire-inline .champ-large{grid-column:1/-1}
/* Inputs CALÉS EN BAS de leur cellule (Nico, 01/09 : « je veux que ce soit
   aligné ») : un label sur deux lignes ne décale plus son champ. La règle
   vaut AUSSI pour les rangées .ligne-2/.ligne-3 des autres verticales.
   ⚠️ :not(.actions-form) : sans lui, la colonne fuyait sur la rangée des
   boutons — « Ajouter » et « Retour » empilés au centre (vu par Nico). */
.formulaire-inline > div:not(.actions-form),.carte-form .ligne-2 > div,.carte-form .ligne-3 > div{display:flex;flex-direction:column;justify-content:flex-end}
/* Case à cocher en PASTILLE compacte (« Boisson alcoolisée prend trop de
   place ») : la largeur du contenu, alignée sur la ligne des champs. */
.formulaire-inline .case-pill,.carte-form .case-pill{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ligne);border-radius:12px;padding:12px 16px;background:#fff;width:fit-content;cursor:pointer;font-weight:500;margin:0;font-size:.95rem}
.formulaire-inline .case-pill:hover,.carte-form .case-pill:hover{border-color:var(--vert-clair)}
.formulaire-inline .actions-form,.carte-form .actions-form{grid-column:1/-1;display:flex;flex-direction:row;gap:10px;align-items:center;margin-top:4px;padding-top:18px;border-top:1px dashed var(--ligne)}
.formulaire-inline button[type="submit"],.carte-form button[type="submit"]{width:auto;padding:13px 28px}

/* --- Sélecteur de période (Mes encaissements, …) : segment aux couleurs
   d'Aya au lieu des boutons bruts du navigateur (même remarque du 30/08). --- */
.periode-select{display:inline-flex;flex-wrap:wrap;background:var(--ivoire-2);border:1px solid var(--ligne);border-radius:12px;padding:4px;gap:3px}
.periode-select button{border:none;background:none;cursor:pointer;font-weight:600;font-size:.85rem;color:var(--gris);padding:7px 14px;border-radius:9px;font-family:inherit;transition:.15s}
.periode-select button:hover{color:var(--vert)}
.periode-select button.actif{background:var(--vert);color:#fff;box-shadow:var(--ombre-s)}
@media(max-width:640px){.ligne-2,.grille-verticales{grid-template-columns:1fr}}

/* --- Vue métier deux colonnes (cinéma : Séances à venir | Mes salles), façon maquette --- */
.two{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.two.une-colonne{grid-template-columns:1fr}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.panneau{background:var(--surface,#fff);border:1px solid var(--ligne);border-radius:14px;padding:18px;min-width:0}
/* ⚠️ flex-wrap PARTOUT (pas seulement en mobile) : les boutons de tête
   (« ＋ Ajouter un véhicule »…) sortaient du cadre dès que la place manquait.
   La rangée de contrôles interne casse aussi, et ne peut plus déborder. */
.panneau-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.panneau-tete>div{flex-wrap:wrap;max-width:100%;min-width:0}
/* Mobile : le titre du panneau prend TOUTE sa ligne, les boutons se rangent
   dessous — plus de « Produits en vente » écrasé sur deux lignes. */
@media(max-width:640px){.panneau-tete{flex-wrap:wrap}.panneau-tete h4{flex:1 1 100%;margin:0}}
/* ── MOBILE : l'habillage empilé (.main 30px + .section 24px + .panneau 18px)
   mangeait 150 px sur un écran de 375 — il ne restait que 225 px pour une
   carte produit, d'où badges et poubelles qui sortaient de la carte (Nico,
   01/09). Sur téléphone, chaque étage se fait discret : le CONTENU d'abord. ── */
@media(max-width:640px){
  .main{padding:14px 10px 40px}
  .section{padding:16px 12px}
  .panneau{padding:14px 12px}
  .carte-form,.formulaire-inline{padding:20px 14px 16px}
  .cb-badge{padding:5px 9px;font-size:.76rem}
}
.panneau-tete h4{margin:0;font-size:1.1rem}
.btn-mini{width:auto !important;margin:0 !important;padding:8px 15px !important;font-size:.85rem !important}
.btn-lien{background:none;border:none;color:var(--vert);font-weight:600;cursor:pointer;font-family:inherit;font-size:.85rem;padding:4px 6px}
.btn-lien:hover{text-decoration:underline}
.callout{display:flex;gap:10px;align-items:flex-start;background:var(--ivoire-2);border:1px solid var(--ligne);border-radius:12px;padding:12px 14px;font-size:.85rem;color:var(--encre,var(--nuit));line-height:1.4}
.callout .e{font-size:1.1rem}
.pill-places{display:inline-flex;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:100px;white-space:nowrap}
.pill-places.ok{background:rgba(46,139,98,.14);color:var(--vert)}
.pill-places.full{background:rgba(255,215,0,.16);color:var(--orange)}

/* Formulaire d'ajout en LIGNE (catalogue boisson) : beaucoup de colonnes. Sur un
   écran étroit il sortait de la carte et le bouton « Retour » était coupé
   (constat Nico, 12/08). Il défile désormais horizontalement dans son cadre. */
.panneau, .section { min-width: 0; }
.panneau form, .ligne-champs { max-width: 100%; overflow-x: auto; }

/* ── BOUTON RETOUR TOUJOURS EN HAUT À DROITE (Nico, 02/09) ──────────────────
   « Là il est fondu dans la page » : perdu au milieu des boutons d'action en
   bas de formulaire. Règle unique posée par le script au chargement : chaque
   « ← Retour » est épinglé en haut à droite de SA carte, sur fond craie. */
.porte-retour{position:relative}
.btn-retour-page{position:absolute !important;top:12px;right:14px;margin:0 !important;background:var(--craie) !important;z-index:6}

/* Tri par clic sur les en-têtes (Nico, 07/09) — toutes les tables du dashboard. */
table thead th{cursor:pointer;user-select:none}
.tri-fleche{color:var(--vert,#1E5C43);font-weight:800}
.btn-tri-reset{margin:0 0 8px;padding:6px 12px;border:1px solid #e4dfd2;border-radius:999px;background:var(--surface,#fff);cursor:pointer;font-size:.82rem;font-family:inherit}

/* Mobile : « ← Retour » dans le FLUX, en tête de carte (l'absolu recouvrait
   titres et premiers champs — audit du 07/09, 16 cartes à 375 px). */
@media (max-width:560px){
  .btn-retour-page{position:static !important;display:block;margin:0 0 10px auto !important;width:max-content}
}

/* Visionneuse photo (Nico, 07/09 : « un aperçu quand je clique sur la photo
   du produit dans Modifier ») — générique : toute vignette d'uploader. */
.visionneuse{position:fixed;inset:0;background:rgba(20,38,30,.88);display:flex;align-items:center;justify-content:center;z-index:120;cursor:zoom-out;padding:20px}
.visionneuse img{max-width:min(92vw,900px);max-height:86vh;border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);background:#fff}
.visionneuse .v-fermer{position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.92);font-size:1.15rem;cursor:pointer;font-family:inherit}
.apercu-photos .vignette img,.photo-slot.rempli img{cursor:zoom-in}