/* Ohlala Yoga — l'OS de Gaëlle. Téléphone : menu du bas, « + » central. Ordinateur : barre latérale. */
body.os { min-height: 100vh; }
.os-haut { position: sticky; top: 0; z-index: 20; background: var(--fond); display: flex; align-items: center; gap: var(--e12); padding: calc(var(--e8) + env(safe-area-inset-top)) var(--e16) var(--e8); border-bottom: 1px solid var(--ligne); min-height: 60px; }
.os-haut img { width: 64px; }
.os-haut .os-titre { font-weight: 700; font-size: var(--t16); margin: 0; flex: 1; }
.os-contenu { padding: var(--e16) var(--e16) calc(110px + env(safe-area-inset-bottom)); max-width: 980px; margin: 0 auto; }
.os-contenu h1 { font-size: var(--t32); }

.os-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--fond-2); border-top: 1px solid var(--ligne); display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 6px var(--e8) calc(6px + env(safe-area-inset-bottom)); }
.os-bas a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; font-size: var(--t12); font-weight: 600; color: var(--texte-2); min-height: 52px; justify-content: center; border-radius: var(--r-champ); }
.os-bas a svg { width: 24px; height: 24px; }
.os-bas a[aria-current="page"] { color: var(--texte); }
.os-bas a[aria-current="page"] svg { color: var(--orange); }
.os-bas .plus-central span.rond { width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: var(--sur-accent); display: grid; place-items: center; margin-top: -26px; box-shadow: var(--ombre); }
.os-bas .plus-central svg { width: 28px; height: 28px; color: var(--sur-accent) !important; }

.os-cote { display: none; }
@media (min-width: 960px) {
  body.os #app { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 100vh; }
  .os-bas, .os-haut .menu-reglages { display: none; }
  .os-cote { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; padding: var(--e16) var(--e12); background: var(--fond-2); border-right: 1px solid var(--ligne); }
  .os-cote img { width: 84px; margin: var(--e8) 0 var(--e16) var(--e8); }
  .os-cote a { display: flex; align-items: center; gap: 10px; padding: 0 var(--e8); min-height: 36px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: var(--t14); }
  .os-cote a svg { width: 18px; height: 18px; }
  .os-cote a:hover { background: var(--fond); }
  .os-cote a[aria-current="page"] { background: var(--fond); color: var(--texte); box-shadow: inset 4px 0 0 var(--orange-vif); }
  .os-cote a[aria-current="page"] svg { color: var(--orange); }
  .os-cote .bouton { min-height: 40px; margin: var(--e8) 0 var(--e12); color: var(--sur-accent); justify-content: center; }
  .os-cote .bouton:hover { background: var(--accent); }
  .os-cote .bas-cote { margin-top: auto; }
  .os-haut { display: none; }
  .os-contenu { padding: var(--e32) var(--e32) var(--e48); width: 100%; }
}

/* Aujourd'hui */
.prochain { background: var(--accent); color: var(--sur-accent); border-radius: var(--r-bloc); padding: var(--e24); margin-bottom: var(--e24); position: relative; overflow: hidden; }
.prochain .petit-titre { font-weight: 700; font-size: var(--t14); text-transform: uppercase; letter-spacing: 1px; opacity: .9; margin: 0; }
.prochain .gros { font-family: var(--police-titres); font-size: var(--t32); margin: 4px 0; line-height: 1.1; }
.prochain .compteur { font-family: var(--police-titres); font-size: var(--t44); line-height: 1; }
.prochain a { color: var(--sur-accent); }
.prochain .bouton { background: var(--fond-2); color: var(--texte); border-color: var(--fond-2); }
.prochain img { position: absolute; right: -28px; bottom: -28px; width: 120px; opacity: .9; }
.grille-os { display: grid; gap: var(--e16); }
@media (min-width: 960px) { .grille-os { grid-template-columns: 1.4fr 1fr; align-items: start; } }

/* Listes */
.liste { display: flex; flex-direction: column; background: var(--fond-2); border-radius: var(--r-bloc); border: 1px solid var(--ligne); overflow: hidden; }
.liste > * { display: flex; align-items: center; gap: var(--e12); padding: var(--e12) var(--e16); border-bottom: 1px solid var(--ligne); text-decoration: none; color: inherit; min-height: 60px; }
.liste > *:last-child { border-bottom: 0; }
.liste a:hover, .liste button.rangee:hover { background: var(--fond); }
.liste .grand { flex: 1; min-width: 0; }
.liste .grand p { margin: 0; }
.liste .sous { font-size: var(--t14); color: var(--texte-2); }
button.rangee { width: 100%; border: 0; border-bottom: 1px solid var(--ligne); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.date-mini { width: 52px; flex: none; text-align: center; line-height: 1.1; }
.date-mini b { display: block; font-family: var(--police-titres); font-weight: 400; font-size: var(--t24); color: var(--orange); }
.date-mini span { font-size: var(--t12); font-weight: 700; text-transform: uppercase; }
.jauge { font-weight: 700; font-size: var(--t14); white-space: nowrap; }
.section-titre { font-weight: 700; font-size: var(--t14); text-transform: uppercase; letter-spacing: 1px; color: var(--texte-2); margin: var(--e24) 0 var(--e8); }

/* Liste d'un cours : pointage */
.inscrite { flex-wrap: wrap; }
.inscrite .actions-pointage { display: flex; gap: var(--e8); width: 100%; }
@media (min-width: 700px) { .inscrite .actions-pointage { width: auto; } }
.pointer { min-height: 44px; padding: 0 var(--e12); border-radius: var(--r-pilule); border: 2px solid var(--ligne); background: var(--fond-2); color: var(--texte); font: 600 var(--t14) var(--police-texte); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; flex: 1; justify-content: center; }
.pointer svg { width: 18px; height: 18px; }
.pointer[aria-pressed="true"].venue { background: var(--ok); border-color: var(--ok); color: var(--blanc); }
.pointer[aria-pressed="true"].absente { background: var(--probleme); border-color: var(--probleme); color: var(--blanc); }
.appel { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--fond); color: var(--texte); flex: none; }
.appel svg { width: 20px; height: 20px; }
.barre-actions { display: flex; gap: var(--e8); flex-wrap: wrap; margin: var(--e16) 0; }

/* Formulaire « Nouvelle date » */
.carte-form { max-width: 640px; }
.ligne-champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--e12); }
.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: var(--e12); padding: var(--e12) 0; cursor: pointer; font-weight: 600; }
.interrupteur input { appearance: none; width: 52px; height: 30px; border-radius: 99px; background: var(--ligne); position: relative; cursor: pointer; flex: none; margin: 0; }
.interrupteur input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--blanc); transition: left .15s; }
.interrupteur input:checked { background: var(--accent); }
.interrupteur input:checked::after { left: 25px; }
.connexion { min-height: 100vh; display: grid; place-items: center; padding: var(--e16); grid-column: 1 / -1; }
.connexion .carte { width: 100%; max-width: 400px; }
.boite-mail iframe { width: 100%; height: 60vh; border: 1px solid var(--ligne); border-radius: var(--r-champ); background: var(--fond); }
/* Icônes des lignes de liste (QA M1) */
.liste > a > svg, .liste > div > svg, button.rangee > svg { width: 22px; height: 22px; flex: none; color: var(--texte-2); }

/* L'appel et la caisse */
.appel-carte { margin-bottom: var(--e16); }
.appel-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e8); text-align: center; }
.appel-chiffres b { display: block; font-family: var(--police-titres); font-weight: 400; font-size: var(--t24); color: var(--texte); }
.appel-chiffres span { font-size: var(--t12); font-weight: 700; color: var(--texte-2); }
.pointer.encaisser { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); flex: 2; }
.inscrite.est-absente .grand { opacity: .6; }
.inscrite .etiquette svg { width: 14px; height: 14px; }
.caisse-nav { margin: var(--e16) 0; background: var(--fond-2); border-radius: var(--r-pilule); padding: 2px var(--e8); }
.caisse-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e12); }
.caisse-chiffres .carte { padding: var(--e16); }
.caisse-chiffres .carte:first-child { grid-column: 1 / -1; }
.caisse-chiffres span { display: block; font-size: var(--t14); font-weight: 600; color: var(--texte-2); }
.caisse-chiffres b { font-family: var(--police-titres); font-weight: 400; font-size: var(--t32); color: var(--texte); }
.caisse-chiffres .carte:first-child b { font-size: var(--t44); color: var(--ok); }
.caisse-chiffres b.attention { color: var(--attention); }
@media (min-width: 960px) { .caisse-chiffres { grid-template-columns: 2fr 1fr 1fr; } .caisse-chiffres .carte:first-child { grid-column: auto; } }
.recap-caisse { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--e16); margin: 0 0 var(--e16); }
.recap-caisse dt { font-weight: 600; } .recap-caisse dd { margin: 0; font-weight: 700; text-align: right; }
.actions-pointage { flex-wrap: wrap; }
a.carte svg, .carte.ligne svg { width: 22px; height: 22px; flex: none; }

/* Mon lien bio */
.lienbio-grille { display: grid; gap: var(--e24); margin-top: var(--e16); }
@media (min-width: 1100px) { .lienbio-grille { grid-template-columns: 1fr 320px; align-items: start; } .apercu-colonne { position: sticky; top: var(--e24); } }
.bloc-lb { gap: var(--e8) !important; align-items: flex-start !important; flex-wrap: wrap; }
.bloc-lb.cache-lb .grand { opacity: .5; }
.bloc-lb .fleches { display: flex; flex-direction: column; }
.bloc-lb .fleches .icone-bouton svg { transform: rotate(90deg); width: 20px; height: 20px; }
.bloc-lb .fleches .icone-bouton:disabled { opacity: .25; cursor: default; }
.bloc-lb .grand { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.petit-champ { font: var(--t16) var(--police-texte); color: var(--texte); background: var(--blanc); border: 2px solid var(--ligne); border-radius: var(--r-champ); padding: 8px 12px; min-height: 44px; width: 100%; }
.petit-champ:focus { border-color: var(--accent); outline: none; }
.actions-lb { display: flex; align-items: center; gap: var(--e8); }
.actions-lb .pastille svg { width: 18px; height: 18px; }
.apercu-tel { width: 300px; max-width: 100%; aspect-ratio: 9 / 18.5; margin: 0 auto; background: var(--texte); border-radius: 44px; padding: 12px; box-shadow: var(--ombre); }
.apercu-tel iframe { width: 100%; height: 100%; border: 0; border-radius: 34px; background: var(--fond); }
.cours-ligne { display: flex !important; align-items: center; padding: 0 !important; }
.cours-ligne .rangee { flex: 1; border-bottom: 0; }
.cours-ligne.cache-lb .grand { opacity: .55; }
.cours-ligne .rangee { display: flex; align-items: center; gap: var(--e12); padding: var(--e12) var(--e16); min-height: 60px; text-decoration: none; color: inherit; }
.cours-ligne .rangee > svg { width: 22px; height: 22px; flex: none; color: var(--texte-2); }
.cours-ligne .rangee .point { flex: none; }
.cours-ligne { border-bottom: 1px solid var(--ligne); }
.onglets-mail { margin: 0 0 var(--e16); }
.reglage-ligne { display: flex; align-items: center; gap: var(--e12); }
.reglage-ligne input { width: 96px !important; text-align: center; font: var(--t16) var(--police-texte); color: var(--texte); background: var(--blanc); border: 2px solid var(--ligne); border-radius: var(--r-champ); min-height: 48px; }
.reglage-ligne span { font-weight: 600; }

/* Menu du bas : 6 cases (4 raccourcis, +, Menu) */
.os-bas { grid-template-columns: repeat(5, 1fr) !important; }
.os-bas a span:not(.rond) { font-size: var(--t12); text-align: center; line-height: 1.15; }
/* Marketing */
.mk-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e12); margin: var(--e16) 0; }
@media (min-width: 960px) { .mk-chiffres { grid-template-columns: repeat(4, 1fr); } }
.mk-chiffres .carte { padding: var(--e16); }
.mk-chiffres span { display: block; font-size: var(--t14); font-weight: 600; color: var(--texte-2); }
.mk-chiffres b { display: block; font-family: var(--police-titres); font-weight: 400; font-size: var(--t32); color: var(--texte); line-height: 1.15; }
.mk-chiffres b.mk-petit { font-size: var(--t20); font-family: var(--police-texte); font-weight: 700; margin: 6px 0 2px; }
.mk-chiffres small { font-size: var(--t12); color: var(--texte-2); }
.mk-grille { display: grid; gap: var(--e16); }
@media (min-width: 960px) { .mk-grille { grid-template-columns: 1fr 1fr; } }
.mk-grille h3 { margin-bottom: var(--e12); }
.mk-barre { display: flex; align-items: center; gap: var(--e8); margin: 6px 0; }
.mk-lab { flex: none; width: 120px; font-size: var(--t14); font-weight: 600; text-align: right; }
.mk-piste { flex: 1; height: 14px; background: var(--fond); border-radius: 99px; overflow: hidden; }
.mk-piste span { display: block; height: 100%; border-radius: 99px; }
.mk-nb { flex: none; width: 72px; font-size: var(--t12); font-weight: 700; color: var(--texte-2); text-align: right; }
.mk-fideles { margin: 0; padding-left: 20px; } .mk-fideles li { margin-bottom: 6px; }
.os-haut .plus-haut { background: var(--accent); color: var(--sur-accent); border-radius: 50%; }
.os-haut .plus-haut svg { color: var(--sur-accent); }
.gerer-cours { display: flex; flex-wrap: wrap; gap: var(--e8) var(--e24); margin-top: var(--e32); padding-top: var(--e16); border-top: 1px solid var(--ligne); }
.gerer-cours .bouton { padding: 0; min-height: 44px; }
.danger-texte { color: var(--probleme) !important; }
/* Demandes et fiche élève : en-tête nom / étiquette, contacts compacts (Julien, 24 oct. : « les boutons sont énormes ») */
.liste > .demande { display: block; padding: var(--e16); }
.demande-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--e12); margin-bottom: 4px; }
.demande-tete strong { font-size: var(--t16); }
.demande .sous { margin: 0; }
.demande p[style] { margin: var(--e8) 0 0 !important; }
.contacts { display: flex; align-items: center; gap: var(--e8); flex-wrap: wrap; margin-top: var(--e12); }
.bouton-wa { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--e16); border-radius: var(--r-pilule); background: var(--ok); color: #fff; font-weight: 700; font-size: var(--t14); text-decoration: none; }
.bouton-wa svg { width: 18px; height: 18px; color: #fff; }
.rond-contact { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ligne); background: var(--fond-2); color: var(--texte); }
.rond-contact svg { width: 18px; height: 18px; }
.lien-petit { margin-left: auto; background: none; border: 0; padding: 0 2px; min-height: 40px; font: 600 var(--t12) var(--police-texte); color: var(--texte-2); text-decoration: underline; cursor: pointer; }
.volet .contacts { margin: 0 0 var(--e8); }
/* Textes longs (adresse e-mail, lien collé) : retour à la ligne au lieu de dépasser des cartes (QA 24 oct.) */
.liste, .volet .corps, .demande { overflow-wrap: anywhere; }
#go { margin-top: var(--e16); }
/* Titre de page + sélecteur à droite (Planning : à venir / passés ; Caisse : jour / semaine / mois) */
.titre-ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--e12); margin-bottom: var(--e16); }
.titre-ligne h1 { margin: 0; }
.selecteur { -webkit-appearance: none; appearance: none; min-height: 40px; padding: 0 36px 0 var(--e16); border-radius: var(--r-pilule); border: 1.5px solid var(--ligne); background: var(--fond-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232B5672' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; font: 600 var(--t14) var(--police-texte); color: var(--texte); cursor: pointer; }
/* Fiche élève en plein écran sur téléphone : on quitte avec la croix */
@media (max-width: 759px) {
  .voile:has(.volet.plein) { align-items: stretch; }
  .volet.plein { max-height: none; height: 100%; border-radius: 0; padding-top: calc(var(--e24) + env(safe-area-inset-top)); }
  .volet.plein .entete { top: calc(-1 * (var(--e24) + env(safe-area-inset-top))); margin-top: calc(-1 * (var(--e24) + env(safe-area-inset-top))); padding-top: calc(var(--e16) + env(safe-area-inset-top)); }
}
.contacts .lien-petit svg { width: 14px; height: 14px; vertical-align: -2px; }
/* Cloche : pastille du nombre de nouvelles */
.cloche { position: relative; margin-left: auto; }
.os-haut .cloche + .plus-haut { margin-left: var(--e8); }
.pastille-n { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--probleme); color: #fff; font: 700 11px/18px var(--police-texte); text-align: center; }
.cote-tete { display: flex; align-items: center; justify-content: space-between; }
.cote-tete .cloche { margin: 0 0 var(--e8); }
.liste > a.non-lue { background: var(--fond); }
.liste > a.non-lue p:first-child { font-weight: 700; }
/* Téléphone : le nom de la page est déjà dans l'en-tête (et la barre du bas) : pas de grand titre en double (Julien, 24 oct.).
   On garde « Coucou Gaëlle » (Aujourd'hui) et la date d'un cours, qui disent autre chose. */
@media (max-width: 959px) {
  body.os:not([data-vue="aujourdhui"]):not([data-vue="seance"]) .os-contenu h1 { display: none; }
  .os-contenu .titre-ligne:not(:has(.selecteur)) { display: none; }
  .os-haut .selecteur { min-height: 36px; padding: 0 30px 0 12px; background-position: right 10px center; font-size: 16px; flex: none; }
  .os-haut .os-titre { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .os-haut .cloche { margin-left: auto; }
}
.compte-eleves { margin: -8px 0 var(--e12); color: var(--texte-2); font-weight: 600; }
.version-app { margin: var(--e16) 0 0; text-align: right; font-size: var(--t12); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.version-app:empty { display: none; }
.bas-cote .version-app { margin: var(--e8) var(--e8) 0; }
@media (max-width: 959px) {
  .os-haut { gap: var(--e8); }
  .os-haut .cloche, .os-haut .plus-haut { flex: none; }
  .os-haut:has(.selecteur) img { width: 54px; }
  .os-haut:has(.selecteur) .cloche { width: 40px; }
}
@media (max-width: 379px) { .os-haut:has(.selecteur) img { display: none; } }
/* Téléphone : plus de logo dans l'en-tête (l'icône de l'appli le porte déjà), le nom de la page en plus gros (Julien, 24 oct.) */
@media (max-width: 959px) {
  .os-haut img { display: none !important; }
  .os-haut .os-titre { font-family: var(--police-titres); font-weight: 400; font-size: 26px; color: var(--orange); line-height: 1.1; }
  .os-haut .deroulant .selecteur { font-size: 16px; }
}
/* Une inscrite : WhatsApp en rond vert ; paiement : un bouton principal, « Autre » pour les autres moyens */
.rond-wa { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; }
.rond-wa svg { width: 20px; height: 20px; color: #fff; }
.inscrite .actions-pointage { flex-wrap: nowrap; }
.inscrite .actions-pointage .pointer { flex: none; white-space: nowrap; }
.inscrite .actions-pointage .pointer.encaisser { flex: 1; }
.fiche-infos { margin: -4px 0 var(--e12); color: var(--texte-2); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pastille:has(input:checked) { border-color: var(--accent); background: var(--accent); color: var(--sur-accent); }

/* Choix du moyen de paiement (fenêtre) : un gros bouton par moyen, le moyen actuel coché. */
.choix-moyens { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e12); }
.choix-moyen { min-height: 64px; border-radius: var(--r-champ); border: 2px solid var(--ligne); background: var(--fond-2); color: var(--texte); font: 700 var(--t16) var(--police-texte); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.choix-moyen:hover { border-color: var(--accent); }
.choix-moyen[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.choix-moyen span { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t12); font-weight: 600; }
.choix-moyen svg { width: 14px; height: 14px; }
/* Écran de connexion : liens secondaires assez hauts pour le doigt ; noms très longs coupés au lieu de déborder. */
.liens-connexion { margin: 14px 0 0; display: flex; flex-direction: column; align-items: center; }
.liens-connexion a { display: inline-flex; align-items: center; min-height: 44px; }
.connexion h1, .compte-ligne p { overflow-wrap: anywhere; }
/* Téléphone : « Espèces » sur toute la largeur, puis « Autre moyen » et « Absente » côte à côte (rien ne sort de la carte). */
@media (max-width: 699px) {
  .inscrite .actions-pointage { flex-wrap: wrap; }
  .inscrite .actions-pointage .pointer { flex: 1 1 0; min-width: 0; }
  .inscrite .actions-pointage .pointer.encaisser { flex: 1 1 100%; }
}
.connexion p { overflow-wrap: anywhere; }