/* Studio Cévenza — compléments de l'application (formulaires, espace studio).
   Mêmes couleurs et polices que le site : variables de style.css (copie de 10-OUTILS/modeles/site/). */

:root { --brique: #9B3B2A; --vert: #4F6B4A; }

.etroit { max-width: 860px; }
.page-texte { padding-top: 130px; min-height: 70vh; }
.note-prix { font-size: .85rem; color: var(--taupe); margin-top: 1.4em; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- formulaires ---------- */
.formulaire { display: grid; gap: 24px; margin-top: 32px; }
.formulaire fieldset { border: 0; margin: 0; min-width: 0; }
.formulaire legend { padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.formulaire legend + * { clear: both; }
.formulaire legend h2 { font-size: 1.35rem; margin: 0; }
.formulaire h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.formulaire h4 { font-family: var(--texte); font-weight: 500; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); margin: 18px 0 8px; }
.champ { margin: 18px 0 0; }
.champ label, .champ .libelle { display: block; font-weight: 400; color: var(--encre); margin-bottom: 6px; }
.facultatif { color: var(--taupe); font-weight: 300; font-size: .9em; }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="date"],
.formulaire input[type="search"], .formulaire textarea, .formulaire select, .recherche-bons input, .recherche-bons select {
  width: 100%; font: inherit; color: var(--encre); background: var(--blanc);
  border: 1px solid var(--filet); border-radius: 12px; padding: 11px 14px;
}
.formulaire textarea { resize: vertical; min-height: 84px; }
.formulaire input:focus-visible, .formulaire textarea:focus-visible, .formulaire select:focus-visible,
.recherche-bons input:focus-visible, .recherche-bons select:focus-visible, .carte-choix:focus-within {
  outline: 2px solid var(--taupe); outline-offset: 2px;
}
.aide { font-size: .85rem; color: var(--taupe); margin: 6px 0 0; line-height: 1.45; }
.erreur { color: var(--brique); font-size: .9rem; font-weight: 400; margin: 6px 0 0; }
.en-erreur input, .en-erreur textarea, input.en-erreur, select.en-erreur { border-color: var(--brique) !important; }
label.case { display: flex; gap: 10px; align-items: baseline; font-weight: 300; color: var(--taupe-fonce); margin: 8px 0; cursor: pointer; }
label.case input { accent-color: var(--taupe); flex: 0 0 auto; transform: translateY(1px); }
label.case a { color: var(--taupe); }

/* le choix du bon : des cartes à cocher */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cartes-montants { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.carte-choix {
  position: relative; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  background: var(--creme); border: 1px solid var(--filet); border-radius: 16px; padding: 14px 16px 14px 44px;
  transition: border-color .15s, background .15s;
}
.carte-choix:hover { border-color: var(--taupe); }
.carte-choix > input[type="radio"] { position: absolute; left: 16px; top: 17px; accent-color: var(--taupe); margin: 0; }
.carte-choix:has(> input[type="radio"]:checked) { background: var(--sable); border-color: var(--taupe); }
.carte-titre { font-family: var(--titre); letter-spacing: .04em; color: var(--taupe); font-size: 1.02rem; line-height: 1.3; }
.carte-detail { font-size: .85rem; color: var(--taupe-fonce); }
.carte-prix { font-weight: 500; color: var(--encre); margin-top: 4px; }
.carte-large { grid-column: span 2; }
.carte-large select { margin-top: 8px; }
@media (max-width: 520px) { .carte-large { grid-column: auto; } .cartes { grid-template-columns: 1fr; } .cartes-montants { grid-template-columns: 1fr 1fr; } .cartes-montants .carte-large { grid-column: span 2; } }
.saisie-montant { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.saisie-montant input { max-width: 140px; }
.total { font-size: 1.1rem; margin: 0 0 12px; }
.formulaire .bouton { cursor: pointer; font-size: .95rem; }

/* messages */
.alerte { background: var(--blanc); border-left: 3px solid var(--brique); border-radius: 8px; padding: 14px 18px; margin: 18px 0; }
.alerte.succes { border-left-color: var(--vert); }
.alerte ul { margin: 6px 0 0; padding-left: 1.2em; }

/* ---------- espace studio ---------- */
.recherche-bons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 24px 0; }
.recherche-bons input { flex: 1 1 220px; width: auto; }
.recherche-bons select { flex: 0 1 200px; width: auto; }
.recherche-bons .bouton { padding: 12px 22px; cursor: pointer; }
.vide { color: var(--taupe); }
.tableau-bons { background: var(--blanc); border-radius: 20px; overflow: hidden; font-size: .92rem; }
.ligne-bon {
  display: grid; grid-template-columns: 7.5em 1.6fr 1fr 1.3fr 6.5em 6.5em 7em 9em; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--creme-2); align-items: start;
}
.ligne-bon small { display: block; color: var(--taupe); font-size: .8rem; overflow-wrap: anywhere; }
.entete-tableau { border-top: 0; background: var(--taupe); color: var(--sable); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.code-bon { font-weight: 500; color: var(--encre); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.etat { display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: .78rem; font-weight: 500; }
.etat-valide .etat { background: var(--sable); color: var(--taupe-fonce); }
.etat-utilise .etat { background: var(--taupe); color: var(--blanc); }
.etat-expire .etat { background: var(--creme-2); color: var(--brique); }
.etat-utilise, .etat-expire { color: var(--taupe); }
.attention { color: var(--brique) !important; }
.actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.actions a, button.lien { color: var(--taupe); font: inherit; font-size: .88rem; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.actions form { margin: 0; }
.etiquette-mobile { display: none; }
@media (max-width: 1000px) {
  .entete-tableau { display: none; }
  .ligne-bon { grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 16px 18px; }
  .ligne-bon > :nth-child(2) { grid-column: 1 / -1; order: -1; font-weight: 400; color: var(--encre); }
  .ligne-bon > .code-bon { order: -2; }
  .etiquette-mobile { display: inline; color: var(--taupe); font-size: .8rem; }
  .actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 16px; }
}

/* ---------- lot 2 : réserver une séance ---------- */
.boutons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cartes-seances { margin: 28px 0 12px; }
.carte-lien { padding-left: 16px; text-decoration: none; color: inherit; }
.carte-lien:hover, .carte-lien:focus-visible { background: var(--sable); border-color: var(--taupe); }
.titre-semaine { font-size: 1.15rem; margin: 28px 0 10px; }
.nav-semaines { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.nav-semaines .bouton { padding: 10px 18px; font-size: .88rem; }
.semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.jour { background: var(--blanc); border-radius: 16px; padding: 12px 10px; min-height: 90px; }
.jour h3 { font-family: var(--texte); font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--taupe); margin: 0 0 10px; text-align: center; }
.jour h3 span { display: block; }
.jour ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jour .vide { text-align: center; margin: 0; }
.creneau { display: block; text-align: center; padding: 7px 4px; border: 1px solid var(--filet); border-radius: 10px; background: var(--creme); color: var(--encre); text-decoration: none; font-variant-numeric: tabular-nums; }
.creneau:hover, .creneau:focus-visible { background: var(--taupe); border-color: var(--taupe); color: var(--blanc); }
@media (max-width: 900px) {
  .semaine { grid-template-columns: 1fr; }
  .jour { min-height: 0; }
  .jour h3 { text-align: left; }
  .jour h3 span { display: inline; }
  .jour ul { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .jour .vide { text-align: left; }
}
.recap { display: grid; grid-template-columns: auto auto; gap: 6px 18px; margin: 10px 0 16px; background: var(--blanc); border-radius: 16px; padding: 16px 18px; }
.recap dt { color: var(--taupe-fonce); font-weight: 300; }
.recap dd { margin: 0; text-align: right; color: var(--encre); overflow-wrap: anywhere; }
.recap-montants dt:last-of-type, .recap-montants dd:last-of-type { font-weight: 500; border-top: 1px solid var(--creme-2); padding-top: 6px; }
@media (max-width: 520px) { .recap { grid-template-columns: 1fr; } .recap dd { text-align: left; margin-bottom: 6px; } }
.saisie-bon { display: flex; gap: 10px; align-items: center; }
.saisie-bon input { max-width: 220px; text-transform: uppercase; letter-spacing: .08em; }
.saisie-bon .bouton { padding: 10px 18px; }
.aide.succes { color: var(--vert); }
.gauche { text-align: left; }

/* ---------- espace studio : les séances ---------- */
.onglets { display: flex; gap: 8px; margin: 16px 0 8px; }
.onglets a { padding: 8px 18px; border-radius: 20px; border: 1px solid var(--filet); color: var(--taupe); text-decoration: none; font-size: .9rem; }
.onglets a[aria-current="page"] { background: var(--taupe); border-color: var(--taupe); color: var(--blanc); }
.ligne-seance {
  display: grid; grid-template-columns: 11rem 1.6fr 1.3fr 7rem 8rem 8rem; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--creme-2); align-items: start; color: inherit; text-decoration: none;
}
a.ligne-seance:hover { background: var(--creme); }
.ligne-seance small { display: block; color: var(--taupe); font-size: .8rem; overflow-wrap: anywhere; }
.etat-confirmee { background: var(--sable); color: var(--taupe-fonce); }
.etat-en_attente_paiement, .etat-expiree { background: var(--creme-2); color: var(--taupe-fonce); }
.etat-annulee { background: var(--creme-2); color: var(--taupe); text-decoration: line-through; }
.etat-anomalie { background: var(--brique); color: var(--blanc); }
.statut-annulee { color: var(--taupe); }
@media (max-width: 1000px) {
  .ligne-seance { grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 16px 18px; }
  .ligne-seance > :nth-child(2) { grid-column: 1 / -1; order: -1; }
  .ligne-seance > .code-bon { order: -2; grid-column: 1 / -1; }
}
.agenda .jour { min-height: 160px; }
.bloc-seance { display: block; border-radius: 10px; padding: 7px 8px; background: var(--sable); color: var(--encre); text-decoration: none; font-size: .82rem; line-height: 1.35; }
.bloc-seance span, .bloc-seance small { display: block; }
.bloc-seance.statut-en_attente_paiement { background: var(--creme-2); border: 1px dashed var(--taupe); }
.bloc-seance.statut-anomalie { background: var(--brique); color: var(--blanc); }
.bloc-apple { font-size: .78rem; color: var(--taupe); background: repeating-linear-gradient(135deg, var(--creme), var(--creme) 6px, var(--creme-2) 6px, var(--creme-2) 12px); border-radius: 10px; padding: 6px 8px; }
.liste-simple { padding-left: 1.2em; }
.liste-simple li { margin: 4px 0; }
form.en-ligne { display: inline; }
.pastille { display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.formulaire.fermeture { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; gap: 12px; margin-top: 12px; }
.formulaire.fermeture .champ { margin: 0; }
.formulaire input[type="tel"] { width: 100%; font: inherit; color: var(--encre); background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; padding: 11px 14px; }
.bloc > h2 { font-size: 1.35rem; margin: 0 0 8px; }

/* ---------- lot 7 : l'espace studio, le planning (H1), les activités (H2), poser une activité (H3) ----------
   Séance 3 bis : la mise en page, les couleurs et les tailles de la maquette du 28/10/2026
   (13-APPLICATION/maquette-planning/ du dossier iCloud), au principe de Résa Plein Air. */
body.studio {
  --encre-studio: #2E2A24; --gris-studio: #5F5948; --gris-clair: #8A8370; --bord: #CFC7B2; --pointille: #B8B09C;
  --fond-agenda: #EFEBE2; --texte-agenda: #4A4537; --du-fond: #FBE9D7; --du-bord: #E2B98E; --du-texte: #6E4314;
  background: var(--creme); color: var(--encre-studio); font-weight: 400;
}
body.studio strong { color: inherit; }
.page-studio { min-height: 70vh; }
.page-studio h1, .page-studio h2, .page-studio h3, body.feuille h1 { font-family: var(--texte); color: var(--encre-studio); letter-spacing: 0; text-transform: none; }
.page-studio section.serre { padding: 24px 0 48px; }
.page-studio section.serre h1 { font-size: 28px; font-weight: 700; }

/* le haut de l'écran : bandeau taupe collé en haut, onglets en emojis, bouton « + » */
.entete-studio { position: sticky; top: 0; z-index: 50; background: var(--taupe); color: var(--blanc); padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 12px; }
.haut-studio, .onglets-studio { width: 100%; max-width: 1180px; margin-inline: auto; }
.haut-studio { display: flex; align-items: center; justify-content: space-between; }
.nom-studio { font-family: var(--titre); font-size: 18px; letter-spacing: 1px; color: var(--blanc); text-decoration: none; }
.bouton-plus { width: 44px; height: 44px; border-radius: 22px; background: var(--creme); color: var(--encre-studio); font-size: 24px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1; }
.onglets-studio { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.onglets-studio a { height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--blanc); font-size: 15px; font-weight: 600; }
.onglets-studio a[aria-current="page"] { background: var(--creme); color: var(--encre-studio); }
.onglets-studio a:focus-visible, .bouton-plus:focus-visible { outline: 2px solid var(--blanc); outline-offset: 2px; }
.emoji-onglet { font-size: 22px; line-height: 1; }
@media (max-width: 699px) { .nom-onglet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* les pages du planning et des activités */
.planning { padding: 16px; display: flex; flex-direction: column; gap: 14px; max-width: 1180px; margin-inline: auto; }
.planning.etroit { max-width: 760px; }
.planning h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; }
.tete-planning { display: flex; flex-direction: column; gap: 2px; }
.tete-activites { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; }
.compteur { margin: 0; font-size: 14px; color: var(--gris-studio); }
.planning .alerte { margin: 0; }
.retour { margin: 0; font-size: 14px; }
.retour a { color: var(--gris-studio); }
.bouton-plein { height: 44px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--taupe); color: var(--blanc); display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bouton-plein:hover { background: var(--taupe-fonce); color: var(--blanc); }
.bouton-clair { height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--bord); background: var(--blanc); color: var(--encre-studio); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }

.barre-planning { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nav-planning { display: flex; gap: 8px; }
.nav-planning a { height: 40px; border-radius: 10px; border: 1px solid var(--bord); background: var(--blanc); color: var(--encre-studio); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.nav-planning .carre { width: 44px; font-size: 18px; }
.nav-planning .aujourdhui-lien { padding: 0 14px; font-size: 14px; font-weight: 600; }
.bascule-vues { margin-left: auto; display: flex; padding: 3px; border-radius: 12px; background: var(--sable); }
.bascule-vues a { height: 34px; padding: 0 14px; border-radius: 9px; display: flex; align-items: center; color: var(--encre-studio); font-size: 14px; font-weight: 600; text-decoration: none; }
.bascule-vues a[aria-current="page"] { background: var(--taupe); color: var(--blanc); }
@media (max-width: 699px) { .bascule-vues .vue-ordinateur:not([aria-current]) { display: none; } }

/* la barre des 7 jours */
.barre-jours { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 8px 4px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); }
.barre-jours a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: 10px; color: var(--encre-studio); text-decoration: none; }
.barre-jours .jour-court { font-size: 11px; color: var(--gris-studio); }
.barre-jours .numero { font-size: 16px; font-weight: 600; line-height: 1.2; }
.barre-jours .points { display: flex; gap: 2px; height: 6px; }
.barre-jours .points span { width: 6px; height: 6px; border-radius: 3px; background: var(--couleur); }
.barre-jours .mention-ferme { font-size: 10px; height: 6px; line-height: 6px; }
.barre-jours a.ferme { color: var(--gris-clair); }
.barre-jours a.ferme .jour-court { color: inherit; }
.barre-jours a.aujourdhui { outline: 2px solid var(--taupe); outline-offset: -2px; }
.barre-jours a.aujourdhui .numero { font-weight: 700; color: var(--taupe); }
.barre-jours a.affiche { background: var(--taupe); color: var(--blanc); outline: 0; }
.barre-jours a.affiche .jour-court, .barre-jours a.affiche .numero { color: var(--blanc); font-weight: 700; }
.barre-jours a.affiche .points span { background: var(--creme); }

/* la vue Jour : ☀️ Matin, 🌅 Après-midi, les cartes */
.vue-jour { display: flex; flex-direction: column; gap: 14px; }
.tete-moitie { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.tete-moitie h2 { margin: 0; font-size: 18px; font-weight: 700; }
.tete-moitie span { font-size: 13px; color: var(--gris-studio); }
.cartes { display: flex; flex-direction: column; gap: 14px; }
.mention-jour { margin: 0; font-size: 14px; color: var(--gris-studio); }
.rien-de-prevu { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--sable); }
.rien-de-prevu p { margin: 0; font-size: 16px; font-weight: 600; }

.carte { border-radius: 16px; overflow: hidden; border: 2px solid var(--couleur); margin: 0; }
.haut-carte { background: var(--couleur); color: var(--blanc); padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.emoji-carte { font-size: 22px; line-height: 1; }
.titre-carte { font-size: 17px; font-weight: 700; flex-grow: 1; color: var(--blanc); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
/* toucher la carte, hors de l'étiquette de l'heure, l'ouvre */
.carte { position: relative; }
.titre-carte::after { content: ""; position: absolute; inset: 0; }
.titre-carte:focus-visible { outline: none; }
.carte:has(.titre-carte:focus-visible) { outline: 2px solid var(--taupe); outline-offset: 2px; }
.etiquette-heure { position: relative; z-index: 1; height: 34px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .22); color: var(--blanc); font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
a.etiquette-heure:hover, a.etiquette-heure:focus-visible { background: rgba(255, 255, 255, .36); outline: 2px solid var(--blanc); outline-offset: 1px; }
.bas-carte { background: color-mix(in srgb, var(--couleur) 14%, var(--blanc)); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ligne-carte { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.ligne-carte .gauche { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ligne-carte .droite { color: var(--gris-studio); white-space: nowrap; }
.pastilles-carte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pastilles-carte li { padding: 4px 9px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--bord); font-size: 13px; overflow-wrap: anywhere; }
.pastilles-carte li.du { background: var(--du-fond); border-color: var(--du-bord); color: var(--du-texte); }
.carte-agenda, .carte-fermeture { border: 2px dashed var(--pointille); background: var(--fond-agenda); padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.texte-carte { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.texte-carte strong { font-size: 15px; font-weight: 600; color: var(--texte-agenda); }
.texte-carte span { font-size: 13px; color: var(--gris-studio); }
.heures-carte { font-size: 15px; font-weight: 700; color: var(--texte-agenda); white-space: nowrap; }
.carte-fermeture { border-style: solid; border-color: var(--sable); }
/* séance 4 bis : 📆 Google du studio en pointillés gris, 🏡 iCloud perso en pointillés sable ; « Ne bloque pas » plus pâle */
.carte-agenda { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; }
.agenda-icloud { --pointille: #C9B88C; --fond-agenda: #F8F2E3; }
.carte-agenda.libere, .petite-agenda.libere { opacity: .62; }
.carte-agenda.libere:focus-within { opacity: 1; }
.form-bloque { margin: 0 0 0 auto; }
.bouton-bloque { height: 40px; padding: 0 12px; border-radius: 20px; border: 1px solid var(--bord); background: var(--blanc); color: var(--encre-studio); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bouton-bloque.libere { border-style: dashed; background: transparent; }
.bouton-bloque:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }
@media (max-width: 699px) {
  .carte-agenda { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .carte-agenda .form-bloque { grid-column: 1 / -1; justify-self: end; }
}
/* la bascule 📸 Studio · 🏡 Perso · Les deux, sous la date (D36) */
.bascule-voir { display: flex; padding: 3px; border-radius: 12px; background: var(--sable); align-self: flex-start; max-width: 100%; }
.bascule-voir a { min-height: 36px; padding: 0 14px; border-radius: 9px; display: flex; align-items: center; color: var(--encre-studio); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bascule-voir a[aria-current="true"] { background: var(--taupe); color: var(--blanc); }

/* les vues 3 jours et Semaine : des colonnes de cartes réduites, sans défilement de côté */
.colonnes-planning { display: grid; grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr)); gap: 8px; align-items: start; }
.colonne { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tete-colonne { text-align: center; padding: 8px 0; border-radius: 10px; background: var(--blanc); border: 1px solid var(--sable); color: var(--encre-studio); text-decoration: none; display: flex; flex-direction: column; }
.tete-colonne span { font-size: 12px; color: var(--gris-studio); overflow: hidden; text-overflow: ellipsis; }
.tete-colonne strong { font-size: 20px; font-weight: 700; line-height: 1.2; }
.tete-colonne.aujourdhui { background: var(--taupe); border-color: var(--taupe); color: var(--blanc); }
.tete-colonne.aujourdhui span { color: var(--blanc); }
.moitie-colonne { margin: 0; font-size: 12px; font-weight: 700; color: var(--gris-studio); }
.mention-colonne { margin: 0; font-size: 12px; color: var(--gris-studio); text-align: center; padding: 6px 0; }
.petite { display: block; border-radius: 10px; overflow: hidden; font-size: 12px; line-height: 1.35; text-decoration: none; color: var(--encre-studio); }
a.petite { border: 2px solid var(--couleur); }
.haut-petite { display: block; background: var(--couleur); color: var(--blanc); padding: 5px 6px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bas-petite { display: block; background: color-mix(in srgb, var(--couleur) 14%, var(--blanc)); padding: 5px 6px; }
.bas-petite > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.nom-petite { white-space: nowrap; }
.petite-agenda, .petite-fermeture { border: 2px dashed var(--pointille); background: var(--fond-agenda); padding: 5px 6px; color: var(--texte-agenda); }
.petite-fermeture { border-style: solid; border-color: var(--sable); }
@media (max-width: 699px) {
  /* la semaine (une adresse ouverte depuis l'ordinateur) : les jours l'un sous l'autre */
  .planning-semaine .colonnes-planning { grid-template-columns: 1fr; }
}

@media (display-mode: standalone) { .aide-ecran-accueil { display: none; } }

/* Mes activités */
.liste-activites { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.fiche-activite { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--sable); color: var(--encre-studio); text-decoration: none; }
.fiche-activite:hover, .fiche-activite:focus-visible { border-color: var(--taupe); }
.tuile-emoji { width: 56px; height: 56px; border-radius: 14px; background: var(--couleur); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; line-height: 1; }
.corps-activite { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.nom-activite { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.pastilles-activite { display: flex; flex-wrap: wrap; gap: 5px; }
.pastilles-activite span { padding: 3px 8px; border-radius: 999px; background: var(--creme); font-size: 12px; }
.chevron { font-size: 18px; color: var(--gris-clair); }
.fiche-activite.en-pause { background: var(--fond-agenda); border: 1px dashed var(--pointille); }
.fiche-activite.en-pause .tuile-emoji { background: var(--pointille); }
.fiche-activite.en-pause .nom-activite { color: var(--texte-agenda); }
.mention-pause { font-size: 12px; color: var(--gris-studio); }
.titre-activite { display: flex; align-items: center; gap: 12px; }
.titre-activite .tuile-emoji { width: 48px; height: 48px; font-size: 24px; }
.planning .formulaire.bloc { margin-top: 0; padding: 20px 18px; }

.choix-couleur, .choix-emoji { border: 0; padding: 0; min-width: 0; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille-choix {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px;
  border: 1px solid var(--filet); border-radius: 20px; cursor: pointer; background: var(--blanc); font-size: .88rem;
}
.pastille-choix input, .emoji-choix input, .tuile-activite input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastille-choix:has(input:checked) { border-color: var(--couleur); box-shadow: 0 0 0 2px var(--couleur); }
.pastille-choix:has(input:focus-visible), .emoji-choix:has(input:focus-visible), .tuile-activite:has(input:focus-visible) { outline: 2px solid var(--taupe); outline-offset: 3px; }
.rond { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--couleur); flex: 0 0 auto; }
.emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.emoji-choix { position: relative; height: 48px; border-radius: 12px; border: 2px solid var(--sable); background: var(--blanc); display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; }
.emoji-choix:has(input:checked) { border-color: var(--taupe); background: var(--sable); }
.emoji-autre { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.emoji-autre label { font-size: 14px; color: var(--gris-studio); margin: 0; }
.formulaire .emoji-autre input { width: 5.5em; font-size: 22px; text-align: center; padding: 6px 8px; }

/* « Poser une activité » : une fenêtre qui monte du bas sur le téléphone, centrée sur ordinateur */
body.feuille { background: var(--texte-agenda); }
.fond-feuille { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; }
section.feuille { background: var(--creme); border-radius: 22px 22px 0 0; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 560px; margin-inline: auto; box-sizing: border-box; }
.poignee { width: 40px; height: 5px; border-radius: 3px; background: var(--bord); align-self: center; }
.tete-feuille { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tete-feuille h1 { margin: 0; font-size: 22px; font-weight: 700; }
.fermer { width: 44px; height: 44px; border-radius: 22px; background: var(--sable); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--encre-studio); text-decoration: none; flex-shrink: 0; }
section.feuille > .aide { margin: -8px 0 0; }
.formulaire-pose { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.formulaire-pose .champ { margin: 0; }
.formulaire-pose .alerte { margin: 0; }
.tuiles-activites { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tuile-activite { position: relative; min-height: 76px; border-radius: 14px; border: 2px solid var(--sable); background: var(--blanc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; font-size: 13px; font-weight: 600; color: var(--encre-studio); text-align: center; cursor: pointer; box-sizing: border-box; }
.tuile-activite .emoji-tuile { font-size: 26px; line-height: 1; }
.tuile-activite .nom-tuile { overflow-wrap: anywhere; line-height: 1.2; }
.tuile-activite small { font-size: 11px; font-weight: 400; color: var(--gris-studio); }
.tuile-activite:has(input:checked) { border: 3px solid var(--couleur); background: color-mix(in srgb, var(--couleur) 14%, var(--blanc)); color: color-mix(in srgb, var(--couleur) 65%, #000); font-weight: 700; }
.ligne-journee { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); font-size: 15px; font-weight: 600; cursor: pointer; }
.ligne-journee input { width: 26px; height: 26px; accent-color: var(--taupe); margin: 0; }
.formulaire-pose .deux-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.formulaire-pose label { font-size: 13px; font-weight: 600; color: var(--gris-studio); }
.formulaire-pose .ligne-journee, .formulaire-pose .ligne-journee span { font-size: 15px; color: var(--encre-studio); }
.formulaire-pose input[type="text"], .formulaire-pose input[type="date"], .formulaire-pose input[type="time"] {
  width: 100%; box-sizing: border-box; height: 46px; border-radius: 12px; border: 1px solid var(--bord); background: var(--blanc); padding: 0 12px; font: inherit; font-size: 15px; color: var(--encre-studio);
}
.champs-heures.grise { opacity: .45; }
.avertissement { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--du-fond); border: 1px solid var(--du-bord); color: var(--du-texte); font-size: 14px; }
.avertissement strong { color: inherit; font-weight: 600; }
.avertissement ul { margin: 6px 0; padding-left: 1.1em; }
.avertissement p { margin: 0; }
.avertissement a { color: inherit; }
.emoji-avertissement { font-size: 18px; }
.bouton-feuille { height: 52px; border-radius: 14px; border: 0; background: var(--taupe); color: var(--blanc); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.bouton-feuille:hover { background: var(--taupe-fonce); }
.formulaire-annuler { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--sable); padding-top: 14px; }

.formulaire input[type="time"] { width: 100%; font: inherit; color: var(--encre); background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; padding: 11px 14px; }
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.reglage-langue { margin-top: 24px; }

/* sur ordinateur : l'emoji et le nom des onglets, les cartes en grille, la fenêtre centrée */
@media (min-width: 900px) {
  .planning { padding: 24px 32px; }
  .vue-jour .cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
  .fond-feuille { justify-content: center; padding: 32px 16px; box-sizing: border-box; }
  section.feuille { border-radius: 22px; }
  .poignee { display: none; }
  .petite { font-size: 13px; }
}

/* ---------- lot 7, séance 4 ---------- */
/* les temps avant/après sur la carte (D31) : au-dessus de l'heure de début, et après */
.champs-temps, .choix-reservable { padding: 0; border: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.champs-temps .deux-champs { align-items: end; }
.champs-temps .deux-champs .champ { margin-top: 8px; }
.champs-temps.grise { opacity: .45; }
.formulaire-pose .champs-temps .deux-champs { gap: 0 10px; }

/* Mes activités : « Dupliquer » à côté de chaque activité (D32), la pastille 🌐 (D20) */
.ligne-activite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.dupliquer { width: 64px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--sable); color: var(--gris-studio); text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; }
.dupliquer span { font-size: 20px; line-height: 1; color: var(--encre-studio); }
.dupliquer:hover, .dupliquer:focus-visible { border-color: var(--taupe); color: var(--encre-studio); }
.pastilles-activite .pastille-en-ligne { background: #E3ECEC; color: #1F4E52; }
.choix-reservable .champ-prestation { margin-top: 6px; }
.choix-reservable:not(:has(.case-reservable:checked)) .champ-prestation select { opacity: .6; }

/* ⚙️ Réglages : l'encart Google Agenda (D33) */
.encart-google form { margin-top: 12px; }
.encart-google .etat-google { font-weight: 600; margin: 8px 0; }
.file-google { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--creme); }
.file-google p { margin: 0 0 6px; }

/* ---------- séance 4 bis : la saisie tout à toucher (maquette 5-poser-tout-a-toucher.html) ----------
   Chaque choix est un vrai bouton radio (caché à l'œil), le calendrier et les « − / + » de vrais boutons
   d'envoi : la page marche sans script. Les couleurs : olive #5E6B3F pour ce qui est choisi, comme la maquette. */
.formulaire-saisie { --choisi: #5E6B3F; --choisi-texte: #3B4427; }
.saisie-bloc { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tete-saisie { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0; }
.tete-saisie h2, .saisie-temps h2 { margin: 0; font-size: 15px; font-weight: 700; }
.aide-saisie { font-size: 13px; color: var(--gris-studio); margin: 0; }
.valeur-saisie { font-size: 14px; font-weight: 700; color: var(--choisi-texte); white-space: nowrap; font-variant-numeric: tabular-nums; }
.choix-bouton { position: relative; display: block; min-width: 0; cursor: pointer; }
.choix-bouton input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choix-bouton span { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; border: 1px solid var(--bord); background: var(--blanc); font-size: 14px; color: var(--encre-studio); box-sizing: border-box; white-space: nowrap; }
.choix-bouton input:checked + span { background: var(--choisi); border-color: var(--choisi); color: var(--blanc); font-weight: 700; }
.choix-bouton input:focus-visible + span { outline: 2px solid var(--taupe); outline-offset: 2px; }
.choix-bouton[hidden] { display: none; }

/* 📅 le jour */
.mois-saisie { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.nom-mois { font-size: 15px; font-weight: 700; }
.fleche-mois { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--bord); background: var(--blanc); font: inherit; font-size: 16px; color: var(--encre-studio); cursor: pointer; }
.fleche-mois:disabled { opacity: .35; cursor: default; }
.jours-semaine, .grille-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.jours-semaine { text-align: center; font-size: 11px; color: var(--gris-studio); }
.jour-cal { height: 40px; border-radius: 10px; border: 0; text-align: center; background: var(--blanc); font: inherit; font-size: 14px; color: var(--encre-studio); cursor: pointer; padding: 0; font-variant-numeric: tabular-nums; }
.jour-cal.aujourdhui { box-shadow: inset 0 0 0 2px var(--taupe); }
.jour-cal.dans-periode { background: color-mix(in srgb, var(--choisi) 22%, var(--blanc)); color: var(--choisi-texte); font-weight: 600; }
.jour-cal.choisi { background: var(--choisi); color: var(--blanc); font-weight: 700; }
.jour-cal:disabled { color: var(--gris-clair); background: transparent; cursor: default; }
.jour-cal:disabled.choisi { background: color-mix(in srgb, var(--choisi) 55%, var(--blanc)); color: var(--blanc); }
.jour-cal:focus-visible, .rond-temps:focus-visible, .fleche-mois:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }

/* 🕐 l'heure */
.bascule-moment { display: flex; padding: 3px; border-radius: 12px; background: var(--sable); border: 0; margin: 0; min-width: 0; }
.bascule-moment .choix-bouton { flex: 1; }
.bascule-moment .choix-bouton span { height: 38px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; }
.bascule-moment .choix-bouton input:checked + span { background: var(--taupe); color: var(--blanc); }
.heures-choix, .minutes-choix { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.choix-heure span { height: 44px; font-size: 15px; font-weight: 600; }
.formulaire-saisie:has(input[name="moment"][value="matin"]:checked) .heures-apresmidi,
.formulaire-saisie:has(input[name="moment"][value="apresmidi"]:checked) .heures-matin,
.formulaire-saisie:has(input[name="moment"][value="journee"]:checked) .si-heures { display: none; }

/* ⏱️ la durée */
.pastilles-duree { display: flex; flex-wrap: wrap; gap: 6px; }
.choix-duree span { height: 40px; padding: 0 12px; border-radius: 20px; }

/* avant et après */
.saisie-temps { padding: 12px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); gap: 10px; }
.ligne-temps { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.ligne-temps .erreur { flex-basis: 100%; margin: 0; }
.reglage-temps { display: flex; align-items: center; gap: 6px; }
.rond-temps { width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--bord); background: var(--creme); font: inherit; font-size: 18px; color: var(--encre-studio); cursor: pointer; padding: 0; }
.valeur-temps { width: 64px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* la pastille « Autre » de la durée : « − / + » de 5 en 5 minutes, ouverte quand elle est choisie */
.reglage-autre { display: none; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); font-size: 14px; }
.saisie-duree:has(input[name="duree"][value="autre"]:checked) .reglage-autre { display: flex; }
.choix-autre span { font-style: italic; }
/* les légendes et le bouton cachés restent dans leur bloc : pas de défilement de côté sur le téléphone */
.formulaire-saisie fieldset { position: relative; }
.formulaire-saisie .visuellement-cache { top: 0; left: 0; padding: 0; border: 0; margin: 0; }
.carte-agenda { scroll-margin-top: 150px; }
/* les cartes réduites des agendas (3 jours, Semaine) : texte foncé sur le fond pointillé, sans bandeau de couleur */
.petite-agenda .haut-petite, .petite-agenda .bas-petite { background: transparent; color: var(--texte-agenda); padding: 0; }
.petite-agenda .bas-petite { margin-top: 2px; }

/* ---------- lot 7, séance 4 ter ---------- */
/* le planning (D40, maquette 6) : la bascule et « Aujourd'hui » sur une ligne, centrée ; les flèches sous la date,
   centrées, dans toutes les vues ; toute la largeur sur grand écran ; la date du jour plus grosse au téléphone */
.planning:not(.etroit) { max-width: none; }
.planning > .bascule-vues { margin-left: 0; align-self: center; max-width: 100%; }
.bascule-vues .aujourdhui-lien { padding: 0 12px; }
.planning .tete-planning { align-items: center; text-align: center; gap: 6px; }
.planning .tete-planning .nav-planning { justify-content: center; align-items: center; gap: 16px; }
.nav-planning .carre { width: 52px; height: 44px; border-radius: 12px; font-size: 22px; }
.milieu-nav { font-size: 13px; color: var(--gris-studio); min-width: 3.5em; text-align: center; }
.planning > .bascule-voir { align-self: center; }
@media (max-width: 699px) { .planning h1.date-du-jour { font-size: 32px; } }
.plus-jour { height: 36px; border-radius: 10px; border: 1px dashed var(--pointille); background: transparent; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #6B6553; text-decoration: none; }
.plus-jour:hover { background: var(--blanc); }
.plus-jour.vide-plus { border-color: transparent; }
.tete-colonne span { white-space: nowrap; }

/* ⚙️ Réglages : la liste groupée (maquette 7) */
.liste-reglages { gap: 18px; }
.groupe-reglages { display: flex; flex-direction: column; gap: 6px; }
.groupe-reglages h2 { margin: 0 0 2px 4px; font-size: 13px; font-weight: 700; color: var(--gris-studio); letter-spacing: .5px; text-transform: uppercase; }
.lignes-reglages { border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); overflow: hidden; }
.ligne-reglage { min-height: 52px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; color: var(--encre-studio); border-bottom: 1px solid var(--fond-agenda); }
.ligne-reglage:last-child { border-bottom: 0; }
.ligne-reglage:hover { background: #FBF9F4; color: var(--encre-studio); }
.ligne-reglage:focus-visible { outline: 2px solid var(--taupe); outline-offset: -2px; }
.titre-ligne { font-size: 15px; min-width: 0; }
.droite-ligne { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.resume-ligne { font-size: 13px; color: var(--gris-studio); text-align: right; }
.resume-ligne.succes { color: #2F6B70; }
.resume-ligne.attention { color: var(--du-texte); }

/* un réglage ouvert seul (maquette 8) : « ‹ » et le titre dans le bandeau */
.entete-retour { padding: 14px 16px; }
.entete-retour .haut-studio { justify-content: flex-start; gap: 12px; }
.retour-rond { width: 44px; height: 44px; border-radius: 22px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; color: var(--blanc); font-size: 20px; text-decoration: none; flex-shrink: 0; }
.retour-rond:hover, .retour-rond:focus-visible { color: var(--blanc); background: rgba(255, 255, 255, .3); outline-color: var(--blanc); }
.titre-retour { font-size: 18px; font-weight: 700; min-width: 0; }
.explication-reglage { margin: 0; font-size: 14px; color: var(--gris-studio); line-height: 1.45; }
.reglage-ouvert .bloc { margin: 0; }
.reglage-ouvert .formulaire.bloc { padding: 18px 16px; }
.bouton-enregistrer { width: 100%; height: 52px; border-radius: 14px; font-size: 16px; font-weight: 700; margin-top: 4px; }
.saisie-nombre { display: flex; align-items: center; gap: 10px; }
.saisie-nombre input, .saisie-nombre select { max-width: 120px; }
.saisie-nombre span { font-size: 14px; color: var(--gris-studio); }

/* l'encadré des modifications non enregistrées */
.non-enregistre { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--du-fond); border: 1px solid var(--du-bord); color: var(--du-texte); font-size: 14px; margin: 8px 0; }
.non-enregistre[hidden] { display: none; }
.non-enregistre p { margin: 0; }
.actions-quitter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px !important; }
.actions-quitter[hidden] { display: none; }
.actions-quitter .bouton-clair { display: inline-flex; align-items: center; text-decoration: none; height: 44px; }
.non-enregistre.signale { outline: 3px solid var(--du-bord); }

/* les horaires d'ouverture : un jour par ligne, les heures en boutons, le sélecteur sous le jour */
.jours-horaires { display: flex; flex-direction: column; gap: 8px; }
.ligne-horaire { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); scroll-margin-top: 90px; }
.ligne-horaire.ouverte { border: 2px solid var(--taupe); }
.nom-jour-horaire { width: 44px; flex-shrink: 0; font-size: 15px; font-weight: 700; }
.ferme-horaire { flex: 1; font-size: 14px; color: var(--gris-clair); }
.plages-horaire { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plage-horaire { display: flex; gap: 6px; align-items: center; }
.fleche-plage { color: var(--gris-clair); }
.heure-bouton, .bouton-petit { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--bord); background: var(--blanc); font: inherit; font-size: 14px; font-weight: 600; color: var(--encre-studio); cursor: pointer; font-variant-numeric: tabular-nums; }
.bouton-petit { background: var(--creme); font-size: 13px; }
.heure-bouton[aria-pressed="true"] { background: var(--taupe); border-color: var(--taupe); color: var(--blanc); font-weight: 700; }
.retirer-plage { width: 30px; height: 30px; border-radius: 15px; border: 0; background: transparent; color: var(--gris-clair); font: inherit; font-size: 14px; cursor: pointer; }
.rond-plus { width: 36px; height: 36px; border-radius: 18px; border: 1px solid var(--bord); background: var(--creme); font: inherit; font-size: 16px; color: var(--encre-studio); cursor: pointer; flex-shrink: 0; align-self: flex-start; }
.choix-heure-reglage { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: #EDE9DF; }
.choix-heure-reglage .heures-choix, .choix-heure-reglage .minutes-choix { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.choix-heure-reglage:has(input[name="pm"][value="matin"]:checked) .heures-apresmidi,
.choix-heure-reglage:has(input[name="pm"][value="apresmidi"]:checked) .heures-matin { display: none; }
@media (max-width: 380px) { .ligne-horaire { gap: 6px; padding: 10px 8px; } .nom-jour-horaire { width: 36px; } .heure-bouton { padding: 0 7px; } }

/* les emails : l'éditeur d'un modèle, ses variables, son aperçu */
.formulaire-modele textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; line-height: 1.45; color: var(--encre); background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; padding: 11px 14px; resize: vertical; }
.formulaire-modele h2 { font-size: 17px; margin: 8px 0 0; }
.variables { padding: 12px; border-radius: 14px; background: #EDE9DF; }
.variables h3 { margin: 0 0 4px; font-size: 15px; }
.variables ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.variable { height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--bord); background: var(--blanc); font-family: ui-monospace, Menlo, monospace; font-size: 13px; cursor: pointer; color: var(--encre-studio); }
.boutons-modele { display: flex; flex-wrap: wrap; gap: 8px; }
.apercu-courriel { border: 1px solid var(--sable); border-radius: 12px; background: var(--blanc); padding: 12px 14px; margin-top: 12px; }
.langue-apercu { margin: 0 0 6px; font-size: 13px; color: var(--gris-studio); }
.sujet-apercu { margin: 0 0 8px; }
.texte-apercu { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14px; line-height: 1.5; }
.cases-courriels { border: 0; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.cases-courriels .case { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jours-relance { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gris-studio); }
.jours-relance input { width: 64px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--filet); font: inherit; }
.choix-reservable:not(:has(.case-reservable:checked)) .courriels-activite { display: none; }
.tuiles-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.choix-tuile span { height: 48px; font-weight: 600; }

/* la fiche d'une séance : les emails partis, « 🔔 Relancer » */
.liste-courriels { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-courriels li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--creme); font-size: 14px; }
.liste-courriels li.echec { background: var(--du-fond); color: var(--du-texte); }
.quand-courriel { color: var(--gris-studio); font-variant-numeric: tabular-nums; }
.formulaire-relancer { margin-top: 12px; }
/* la couleur du choix, hors de la fenêtre « Poser » : le taupe de la maquette 8 */
.choix-heure-reglage, .formulaire-tuiles { --choisi: var(--taupe); --choisi-texte: var(--taupe-fonce); }
.alerte-courriel { color: var(--du-texte); }

/* ---------- lot 7, séance 4 quater ---------- */
/* D49 : une pastille est une INFO (pas de cadre, rien au survol) ; un BOUTON porte un verbe dans un cadre net, qui
   change au survol et au toucher */
.bouton-cadre { height: 40px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--taupe); background: var(--blanc); color: var(--encre-studio); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; transition: background .12s, transform .06s; }
.bouton-cadre:hover { background: var(--sable); }
.bouton-cadre:active { transform: scale(.97); background: var(--sable); }
.bouton-cadre:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }
.bouton-danger, .bouton-supprimer { border-color: #A4553F; color: #8C3F2C; }
.bouton-supprimer { width: 100%; border-width: 1.5px; }
.bouton-supprimer:hover, .bouton-danger:hover { background: #F6E3DC; }
.bouton-clair:hover { background: var(--sable); }
.bouton-clair:active, .bouton-plein:active, .bouton-feuille:active { transform: scale(.98); }
.info-bloque, .info-envoi { font-size: 13px; font-weight: 600; color: var(--texte-agenda); }
.info-envoi.echec { color: var(--du-texte); }
.actions-carte { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1; }
.form-bloque { margin: 0; }
.actions-envoi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.alerte-envoi { display: block; }

/* la carte d'un événement d'agenda : toucher la carte ouvre sa fenêtre (D45) ; séance 6 bis (D61) : celle qui bloque s'affiche
   normalement, sans hachures ni signe ; celle qui ne bloque pas est plus transparente */
.carte-agenda { position: relative; }
.titre-agenda { color: inherit; text-decoration: none; }
.titre-agenda::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.titre-agenda:focus-visible { outline: none; }
.carte-agenda:has(.titre-agenda:focus-visible) { outline: 2px solid var(--taupe); outline-offset: 2px; }
.carte-agenda:hover { filter: brightness(.98); }
.carte-agenda.libere, .petite-agenda.libere { opacity: 1; }
.carte-agenda.ne-bloque-pas, .petite-agenda.ne-bloque-pas, .bloc-agenda.ne-bloque-pas { opacity: .5; }
.carte-agenda.ne-bloque-pas:focus-within, .petite-agenda.ne-bloque-pas:focus-visible, .bloc-agenda.ne-bloque-pas:focus-visible { opacity: 1; }
.actions-fenetre { justify-content: flex-start; margin: -4px 0 4px; }
.carte-agenda.a-supprimer strong { text-decoration: line-through; }
@media (max-width: 699px) {
  .carte-agenda .actions-carte { grid-column: 1 / -1; justify-self: end; }
}

/* « + Poser » sous chaque jour (D40) : un verbe dans un cadre (D49) */
.plus-jour { border: 1.5px solid var(--bord); background: var(--blanc); font-size: 13px; font-weight: 600; color: var(--encre-studio); }
.plus-jour:hover { background: var(--sable); border-color: var(--taupe); }
.plus-jour.vide-plus { background: transparent; }

/* la vue Semaine sur un axe des heures (D48), sur ordinateur (D47) */
.semaine-heures { display: flex; flex-direction: column; gap: 6px; }
.rangee-semaine { display: grid; grid-template-columns: 46px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: start; }
.rangee-semaine .coin { display: block; }
.rangee-tetes .tete-colonne { cursor: default; }
.libelle-journee { font-size: 11px; color: var(--gris-studio); text-align: right; padding-top: 8px; }
.journee-colonne { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rangee-heures { position: relative; align-items: stretch; }
.axe-heures { position: relative; }
.axe-heures span { position: absolute; right: 4px; transform: translateY(-50%); font-size: 11px; color: var(--gris-studio); font-variant-numeric: tabular-nums; }
.axe-heures span:first-child { transform: none; }
.colonne-heures {
  position: relative; min-width: 0; border-radius: 10px; border: 1px solid var(--sable); overflow: hidden;
  background-color: var(--blanc); background-image: repeating-linear-gradient(to bottom, var(--sable) 0 1px, transparent 1px 60px);
}
.colonne-heures .mention-colonne { position: absolute; top: 8px; left: 0; right: 0; }
.hors-ouverture { position: absolute; left: 0; right: 0; background: rgba(95, 89, 72, .07); }
.bloc-heure {
  position: absolute; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px;
  text-decoration: none; color: var(--encre-studio); z-index: 1; box-shadow: 0 0 0 1px var(--blanc);
}
.bloc-heure:hover { z-index: 2; box-shadow: 0 0 0 2px var(--taupe); }
.bloc-heure:focus-visible { z-index: 2; outline: 2px solid var(--taupe); outline-offset: 1px; }
.corps-bloc { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 3px 6px; font-size: 12px; line-height: 1.3; display: flex; flex-direction: column; gap: 1px; background: var(--couleur); color: var(--blanc); }
.nom-bloc { font-weight: 700; overflow-wrap: anywhere; }
.heures-bloc { font-variant-numeric: tabular-nums; opacity: .92; }
.bloc-heure.court .corps-bloc { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 0 5px; padding: 2px 5px; font-size: 11px; line-height: 1.25; }
.bloc-heure.court .heures-bloc { order: -1; font-weight: 700; opacity: 1; }
.bloc-heure.court .gauche-bloc { display: none; }
.gauche-bloc { opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloc-agenda .corps-bloc { background-color: var(--fond-agenda); color: var(--texte-agenda); border: 2px dashed var(--pointille); border-radius: 8px; }
.bloc-agenda { box-shadow: none; }

/* « Poser » : la tuile 📆 Rendez-vous (D46) ; ses champs à elle, et ce qu'elle n'a pas (temps avant/après, note) */
.si-rdv { display: none; flex-direction: column; gap: 16px; }
.formulaire-saisie:has(input[name="activite"][value="rendezvous"]:checked) .si-rdv { display: flex; }
.formulaire-saisie:has(input[name="activite"][value="rendezvous"]:checked) .sauf-rdv { display: none; }
p.si-rdv { display: none; }
.formulaire-saisie:has(input[name="activite"][value="rendezvous"]:checked) p.si-rdv { display: block; }
.tuile-rdv { border-style: dashed; }
.choix-bouton.inactif { cursor: not-allowed; }
.choix-bouton.inactif span { opacity: .4; }
.formulaire-evenement .champ, .si-rdv .champ { margin: 0; }

/* la réservation d'une séance iris : le nombre de personnes (D50) */
.choix-personnes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; background: var(--blanc); border-radius: 16px; padding: 14px 16px; margin: 18px 0 8px; }
.libelle-personnes { font-weight: 500; }
.reglage-personnes { display: inline-flex; align-items: center; gap: 12px; }
.reglage-personnes strong { min-width: 7.5em; text-align: center; font-weight: 500; }
.rond-personnes { width: 42px; height: 42px; border-radius: 21px; border: 1px solid var(--taupe); background: var(--creme); color: var(--encre); font-size: 20px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.rond-personnes:hover { background: var(--sable); }
.rond-personnes.inactif { opacity: .35; border-color: var(--filet); }
.choix-personnes .aide { flex-basis: 100%; margin: 0; }
.champ-battement .libelle { display: block; margin-bottom: 6px; }
/* la revue D49 : « Marquer utilisé », « Renvoyer l'email », « Retirer » deviennent des boutons à cadre ; « + Poser » en haut ;
   les variables des emails, « Insérer {prenom} » (un verbe, un cadre, un changement au survol) */
.bouton-cadre.petit { height: 34px; padding: 0 10px; font-size: 13px; border-width: 1px; }
.bouton-plus { width: auto; padding: 0 14px; font-size: 15px; gap: 4px; white-space: nowrap; }
.bouton-plus:hover { background: var(--blanc); }
.variable:hover { background: var(--sable); }
.actions .bouton-cadre { text-decoration: none; }
/* séance 4 quater : « 9:00 – 16:00 » et ⛔ / ⚠️ sur les cartes réduites des 3 jours passent à la ligne plutôt que d'être coupés */
.petite .haut-petite { white-space: normal; overflow-wrap: anywhere; }

/* ---------- lot 7, séance 5 : 🧾 le Comptoir, ✅ À faire, 📇 les clients ----------
   Maquettes 15-comptoir.html, 16-comptoir-impressions.html, 12-commande-format.html, 13-commande-combien.html et
   14-commande-recap-devis-ou-commande.html (13-APPLICATION/maquette-planning/ du dossier iCloud). */
body.studio { --barre: #EDE9DF; --etape-vide: #D8D1BF; --pastille-retard: var(--brique); }
.onglets-studio a { position: relative; }
.compte-onglet { position: absolute; top: -4px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--creme); color: var(--encre-studio); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; box-sizing: border-box; box-shadow: 0 0 0 2px var(--taupe); }
.compte-onglet.en-retard { background: var(--pastille-retard); color: var(--blanc); }
.onglets-studio a[aria-current="page"] .compte-onglet { box-shadow: 0 0 0 2px var(--creme); }
@media (max-width: 420px) { .onglets-studio a { font-size: 13px; } .emoji-onglet { font-size: 20px; } }

.comptoir { gap: 14px; padding-bottom: 8px; }
.comptoir h1 { font-size: 26px; }
.tete-comptoir h1 { font-size: 30px; }
.tete-comptoir { display: flex; flex-direction: column; gap: 2px; }
.sous-titre { margin: 0; font-size: 16px; color: var(--texte-agenda); }
.pour-qui { margin: 0; font-size: 15px; color: var(--texte-agenda); }

/* la barre des étapes */
.etapes-comptoir { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.etapes-comptoir li { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gris-studio); }
.etapes-comptoir .trait { height: 5px; border-radius: 3px; background: var(--etape-vide); }
.etapes-comptoir li.faite .trait { background: var(--taupe); }
.etapes-comptoir li.en-cours { font-weight: 700; color: var(--encre-studio); }

/* les huit cases (maquette 15) */
.cases-comptoir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.case-comptoir { min-height: 112px; padding: 14px; box-sizing: border-box; border-radius: 18px; border: 2px solid var(--sable); background: var(--blanc); display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--encre-studio); }
.case-comptoir:hover, .papier-comptoir:hover { border-color: var(--taupe); color: var(--encre-studio); }
.emoji-case { font-size: 34px; line-height: 1.1; }
.nom-case { font-size: 18px; font-weight: 700; }
.detail-case { font-size: 13px; color: var(--gris-studio); }
@media (min-width: 900px) { .cases-comptoir { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.attente-comptoir { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.attente-comptoir h2 { margin: 0; font-size: 17px; font-weight: 700; }
.ligne-attente { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); }
.texte-attente { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.texte-attente strong { font-size: 15px; }
.texte-attente span { font-size: 13px; color: var(--gris-studio); overflow-wrap: anywhere; }
.ligne-attente .bouton-clair, .choisi .bouton-clair { height: 40px; padding: 0 14px; font-size: 14px; background: var(--creme); display: inline-flex; align-items: center; text-decoration: none; }

/* la barre 🧾 en bas de chaque écran */
.pied-comptoir { position: sticky; bottom: 0; z-index: 20; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--creme) 30%); max-width: 760px; margin: 0 auto; box-sizing: border-box; }
.barre-commande { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--barre); text-decoration: none; color: var(--encre-studio); box-shadow: 0 1px 3px rgba(46, 42, 36, .12); }
.emoji-barre { font-size: 18px; }
.texte-barre { flex: 1; min-width: 0; font-size: 14px; color: var(--texte-agenda); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.total-barre { font-size: 16px; font-weight: 700; white-space: nowrap; }

/* 🖨️ sur quel papier ? (maquette 16) */
.papiers-comptoir { display: flex; flex-direction: column; gap: 10px; }
.papier-comptoir { min-height: 84px; padding: 14px; box-sizing: border-box; border-radius: 18px; border: 2px solid var(--sable); background: var(--blanc); display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--encre-studio); }
.papier-comptoir.epuise { opacity: .6; }
.emoji-papier { font-size: 30px; }
.texte-papier { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.texte-papier strong { font-size: 18px; }
.texte-papier span { font-size: 13px; color: var(--gris-studio); }
.prix-papier { font-size: 14px; color: var(--texte-agenda); white-space: nowrap; }
.prix-papier strong { font-size: 16px; color: var(--encre-studio); }

/* 2. quel format ? (maquette 12) */
.choisi { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--texte-agenda); }
.choisi > span { flex: 1; min-width: 0; }
.choisi strong { color: var(--encre-studio); }
.formulaire-comptoir { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.formulaire-comptoir h1 { margin: 0; }
.formulaire-comptoir > .champ { margin: 0; }
.formulaire-comptoir > .aide { margin-top: -8px; }
.liste-formats { display: flex; flex-direction: column; border-radius: 16px; background: var(--blanc); border: 1px solid var(--sable); overflow: hidden; }
.ligne-format { position: relative; min-height: 56px; padding: 0 14px; border-bottom: 1px solid var(--fond-agenda); display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--encre-studio); }
.ligne-format:last-child { border-bottom: 0; }
.ligne-format input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nom-format { min-width: 64px; font-size: 17px; font-weight: 700; }
.dims-format { flex: 1; font-size: 14px; color: var(--gris-studio); }
.prix-format { font-size: 16px; font-weight: 700; white-space: nowrap; text-align: right; }
.coche-format { visibility: hidden; font-size: 18px; }
.ligne-format:has(input:checked) { background: var(--taupe); color: var(--blanc); }
.ligne-format:has(input:checked) .dims-format { color: var(--blanc); }
.ligne-format:has(input:checked) .coche-format { visibility: visible; }
.ligne-format:has(input:focus-visible) { outline: 2px solid var(--encre-studio); outline-offset: -2px; }
.bloc-comptoir { display: flex; flex-direction: column; gap: 8px; padding: 0; }
.bloc-comptoir h2, .recap-comptoir h2 { margin: 0; font-size: 17px; font-weight: 700; }
.segments { display: flex; padding: 3px; border-radius: 12px; background: var(--sable); }
.segment { position: relative; flex: 1; min-width: 0; cursor: pointer; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segment span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--encre-studio); text-align: center; box-sizing: border-box; }
.segment input:checked + span { background: var(--taupe); color: var(--blanc); font-weight: 700; }
.segment input:focus-visible + span { outline: 2px solid var(--encre-studio); outline-offset: 1px; }
.segment.encadre span { border: 1px solid var(--bord); background: var(--blanc); border-radius: 12px; min-height: 48px; font-size: 14px; }
.segment.encadre input:checked + span { border-color: var(--taupe); }

/* 3. combien ? (maquette 13) */
.plus-moins { display: flex; align-items: center; justify-content: center; gap: 14px; }
.plus-moins.grand { gap: 24px; padding: 8px 0; }
.plus-moins .rond { width: 48px; height: 48px; border-radius: 24px; border: 1px solid var(--bord); background: var(--blanc); font: inherit; font-size: 24px; color: var(--encre-studio); cursor: pointer; flex-shrink: 0; }
.plus-moins.grand .rond { width: 60px; height: 60px; border-radius: 30px; font-size: 28px; }
.valeur-plus { width: 72px; height: 48px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: center; font: inherit; font-size: 24px; font-weight: 700; color: var(--encre-studio); font-variant-numeric: tabular-nums; }
.plus-moins.grand .valeur-plus { width: 96px; font-size: 44px; height: 60px; }
.valeur-plus:focus { border-color: var(--bord); background: var(--blanc); outline: none; }
.unite-plus { font-size: 14px; color: var(--gris-studio); margin-left: -8px; }
.libelle-plus { display: block; font-size: 14px; color: var(--texte-agenda); margin-bottom: 4px; text-align: center; }
.dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dimensions .plus-moins { gap: 6px; }
.dimensions .rond { width: 40px; height: 40px; font-size: 20px; }
.dimensions .valeur-plus { width: 64px; font-size: 20px; }
.champ-comptoir { display: flex; flex-direction: column; gap: 4px; }
.champ-comptoir > span { font-size: 13px; color: var(--gris-studio); }
.champ-comptoir input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bord); background: var(--blanc); font: inherit; font-size: 16px; color: var(--encre-studio); box-sizing: border-box; width: 100%; }
.champs-cadre { display: flex; flex-direction: column; gap: 10px; }
.bordures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bordure { position: relative; cursor: pointer; }
.bordure.large-2 { grid-column: span 2; }
.bordure input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bordure > span { height: 52px; border-radius: 12px; border: 1px solid var(--bord); background: var(--blanc); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--encre-studio); box-sizing: border-box; }
.nom-bordure { font-size: 15px; font-weight: 600; }
.mm-bordure { font-size: 12px; color: var(--gris-studio); }
.bordure input:checked + span { background: var(--taupe); border-color: var(--taupe); color: var(--blanc); }
.bordure input:checked + span .mm-bordure { color: var(--blanc); }
.bordure input:focus-visible + span { outline: 2px solid var(--encre-studio); outline-offset: 2px; }
.apercu-bordure { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); }
.tirage-apercu { flex-shrink: 0; box-sizing: border-box; background: var(--blanc); box-shadow: 0 1px 4px rgba(46, 42, 36, .25); display: flex; }
.image-apercu { flex: 1; background: #8E8670; }
.apercu-bordure > span { flex: 1; font-size: 14px; color: var(--texte-agenda); line-height: 1.4; }
.calcul-comptoir { display: flex; flex-direction: column; border-radius: 16px; background: var(--blanc); border: 1px solid var(--sable); overflow: hidden; }
.titre-calcul { padding: 10px 14px; background: var(--barre); font-size: 14px; font-weight: 700; }
.ligne-calcul { padding: 10px 14px; display: flex; justify-content: space-between; gap: 12px; font-size: 15px; border-bottom: 1px solid var(--fond-agenda); }
.ligne-calcul span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.total-calcul { padding: 12px 14px; font-size: 17px; font-weight: 700; border-bottom: 0; }
.refus-comptoir { padding: 12px 14px; border-radius: 12px; background: var(--du-fond); border: 1px solid var(--du-bord); color: var(--du-texte); margin: 0; }
.avertissement-comptoir { margin: -6px 0 0; }
.comptoir .bouton-feuille { display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 12px; text-align: center; }

/* 4. le récapitulatif (maquette 14) */
.recap-comptoir { gap: 16px; }
.lignes-recap { border-radius: 16px; background: var(--blanc); border: 1px solid var(--sable); overflow: hidden; }
.ligne-recap { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--sable); }
.tete-ligne-recap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 16px; }
.tete-ligne-recap strong:last-child { white-space: nowrap; }
.detail-recap { font-size: 14px; color: var(--texte-agenda); }
.calcul-recap { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--gris-studio); }
.calcul-recap > div { display: flex; justify-content: space-between; gap: 10px; }
.calcul-recap span:last-child { white-space: nowrap; }
.actions-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.actions-ligne .bouton-clair { height: 40px; padding: 0 14px; font-size: 14px; background: var(--creme); display: inline-flex; align-items: center; text-decoration: none; }
.ajouter-autre { height: 52px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #6B6553; text-decoration: none; }
.total-recap { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: var(--barre); font-size: 17px; font-weight: 700; }
.total-recap strong { font-size: 30px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
/* séance 7 ter (point 2, D49) : un choix qui se touche a un cadre net, pas l'air d'une pastille */
.pastille-bouton { height: 48px; border-radius: 12px; border: 1.5px solid var(--taupe); background: var(--blanc); font: inherit; font-size: 15px; font-weight: 600; color: var(--encre-studio); cursor: pointer; padding: 0 10px; }
.pastille-bouton.choisi, .segment-bouton.choisi { background: var(--taupe); border-color: var(--taupe); color: var(--blanc); font-weight: 700; justify-content: center; }
.segments-etape { gap: 0; }
.segment-bouton { flex: 1; height: 44px; border-radius: 9px; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--encre-studio); cursor: pointer; }
.client-choisi { min-height: 52px; padding: 8px 14px; border-radius: 12px; background: var(--taupe); color: var(--blanc); display: flex; align-items: center; gap: 10px; }
.client-choisi > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.client-choisi > span:first-child span { font-size: 13px; }
.client-choisi .coche-format { visibility: visible; }
.client-choisi .bouton-clair { height: 40px; font-size: 14px; }
.resultats-clients { display: flex; flex-direction: column; gap: 6px; }
.resultat-client { min-height: 52px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--bord); background: var(--blanc); display: flex; flex-direction: column; align-items: flex-start; text-align: left; font: inherit; color: var(--encre-studio); cursor: pointer; }
.resultat-client strong { font-size: 15px; }
.resultat-client span { font-size: 13px; color: var(--gris-studio); }
.nouveau-pointille { height: 44px; border-radius: 12px; border: 1px dashed var(--pointille); background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: #6B6553; cursor: pointer; }
.nouveau-client .champ { margin-top: 8px; }
.nouveau-client input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bord); background: var(--blanc); font: inherit; font-size: 16px; box-sizing: border-box; }
.boutons-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.boutons-ligne > form, .boutons-ligne > a { margin: 0; }
.separateur { height: 1px; background: var(--etape-vide); margin: 4px 0; }
.cadre-commande, .cadre-devis { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--sable); }
.cadre-commande { border: 2px solid var(--taupe); }
.cadre-commande h2, .cadre-devis h2 { margin: 0; font-size: 17px; font-weight: 700; }
.cadre-commande p, .cadre-devis p { margin: 0; font-size: 14px; color: var(--texte-agenda); }
.choix-paye { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.choix-paye .segment span { border: 1px solid var(--bord); background: var(--blanc); border-radius: 12px; min-height: 48px; font-size: 14px; }
.choix-paye .segment input:checked + span { border-color: var(--taupe); }
.bouton-valider { height: auto; min-height: 54px; }
.cadre-devis .bouton-cadre { height: auto; min-height: 50px; border-radius: 14px; border-width: 2px; font-size: 16px; font-weight: 700; justify-content: center; }
.calendrier-comptoir { margin-top: 6px; }
.calendrier-comptoir .jour-cal.choisi { background: var(--taupe); color: var(--blanc); font-weight: 700; }
.calendrier-comptoir .jour-cal:disabled { opacity: .35; cursor: default; }

/* ✅ À faire (D41) */
.tete-a-faire { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.tete-a-faire .bouton-clair, .tete-a-faire .bouton-plein, .fiche-client .bouton-clair { height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-size: 14px; }
.rien-a-faire { font-size: 17px; padding: 20px 0; text-align: center; }
.groupe-a-faire h2, .fiche-client h2 { margin: 6px 0 8px; font-size: 17px; font-weight: 700; }
.groupe-retard h2 { color: var(--brique); }
.nombre-groupe { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 11px; background: var(--sable); font-size: 13px; text-align: center; color: var(--encre-studio); margin-left: 4px; }
.groupe-retard .nombre-groupe { background: var(--brique); color: var(--blanc); }
.lignes-a-faire { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ligne-a-faire { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); }
.ligne-a-faire.en-retard { border: 2px solid var(--brique); background: #FBEFEC; }
.ligne-a-faire.fait { opacity: .8; }
.emoji-a-faire { font-size: 24px; line-height: 1.2; flex-shrink: 0; }
.corps-a-faire { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.quoi-a-faire { font-size: 15px; font-weight: 600; color: var(--encre-studio); text-decoration: none; overflow-wrap: anywhere; }
a.quoi-a-faire:hover { text-decoration: underline; }
.infos-a-faire { font-size: 13px; color: var(--gris-studio); }
.infos-a-faire a { color: inherit; }
.en-retard .date-a-faire, .en-retard-texte { color: var(--brique); font-weight: 700; }
.actions-a-faire { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.actions-a-faire .bouton-clair, .actions-a-faire .bouton-plein, .encaisser .bouton-clair, .page-commande .boutons-ligne .bouton-clair, .page-commande .boutons-ligne .bouton-plein {
  height: 40px; padding: 0 12px; font-size: 14px; display: inline-flex; align-items: center; text-decoration: none; }
.encaisser { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.info-ligne { font-size: 13px; color: var(--texte-agenda); align-self: center; }
.fiche-client .info-ligne, .page-commande .info-ligne { align-self: flex-start; margin: 0; }
.fiche-client .bouton-feuille { padding: 0 18px; }
.bouton-sms { gap: 6px; }
.faits { margin-top: 8px; }
.faits summary { cursor: pointer; font-size: 17px; font-weight: 700; padding: 8px 0; }
.faits .lignes-a-faire { margin-top: 6px; }

/* 📇 les clients (H8) */
.recherche-clients { display: flex; gap: 8px; align-items: flex-end; }
.recherche-clients .champ-comptoir { flex: 1; }
.recherche-clients .bouton-plein { height: 48px; }
.liste-clients { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--blanc); border: 1px solid var(--sable); overflow: hidden; }
.ligne-client { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "nom compte chevron" "infos compte chevron"; gap: 2px 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--fond-agenda); text-decoration: none; color: var(--encre-studio); }
.liste-clients li:last-child .ligne-client { border-bottom: 0; }
.ligne-client strong { grid-area: nom; }
.ligne-client > span:nth-of-type(1) { grid-area: infos; font-size: 13px; color: var(--gris-studio); overflow-wrap: anywhere; }
.compteurs-client { grid-area: compte; font-size: 13px; white-space: pre; }
.ligne-client .chevron { grid-area: chevron; }
.coordonnees-client { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.coordonnees-client a { color: var(--encre-studio); }
.modifier-client { margin-top: 12px; }
.modifier-client summary { cursor: pointer; font-weight: 700; }
.page-commande h1 { font-size: 26px; }
.page-commande p { margin: 0; }
.etat-commande { font-weight: 700; }
.ligne-papier .droite-ligne { gap: 10px; }
.ligne-papier .bouton-clair { height: 40px; font-size: 14px; }

/* ---------- lot 7, séance 5 ter ---------- */
/* D51 : la carte occupe toute la place bloquée ; dedans, « 🧳 Prépa + trajet » en haut et « 🧹 Trajet + rangement » en bas,
   à la couleur de la carte, séparés de la séance par un trait (plus de bandes gris clair) */
.partie-temps { margin: 0; padding: 6px 12px; font-size: 14px; font-weight: 600; background: var(--couleur); color: var(--blanc); font-variant-numeric: tabular-nums; }
.partie-temps.partie-avant { border-bottom: 1px solid rgba(255, 255, 255, .6); }
.partie-temps.partie-apres { border-top: 2px solid var(--couleur); }
.partie-petite { display: block; padding: 3px 6px; background: var(--couleur); color: var(--blanc); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.partie-petite.partie-avant { border-bottom: 1px solid rgba(255, 255, 255, .6); }
.partie-petite.partie-apres { border-top: 1px solid rgba(255, 255, 255, .6); }
.bloc-seance, .bloc-activite { background: var(--couleur); }
.partie-bloc { flex: 0 1 auto; min-height: 0; box-sizing: border-box; overflow: hidden; padding: 0 6px; font-size: 11px; line-height: 13px; font-weight: 600;
  color: var(--blanc); background: var(--couleur); white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; display: flex; align-items: center; }
.partie-bloc.partie-avant { border-bottom: 1px solid rgba(255, 255, 255, .65); }
.partie-bloc.partie-apres { border-top: 1px solid rgba(255, 255, 255, .65); }
/* la séance garde au moins son nom et ses heures : ce sont les parties d'avant et d'après qui cèdent la place */
.bloc-seance .corps-bloc, .bloc-activite .corps-bloc { flex: 1 0 auto; min-height: 18px; }
/* O28 : « 👤 Pour qui ? » dans Poser, comme au Comptoir (maquette 14) ; « 💳 L'acompte » */
.saisie-pour-qui .client-choisi .bouton-clair { flex: 0 0 auto; }
.saisie-pour-qui .champ-comptoir input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bord); background: var(--blanc); font: inherit; font-size: 16px; box-sizing: border-box; }
.saisie-pour-qui .bouton-chercher-client { align-self: flex-start; }
.saisie-pour-qui .resultats-clients:empty { display: none; }
.cadre-acompte { padding: 12px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); }
.cadre-acompte .bouton-cadre { align-self: flex-start; }
.info-acompte { font-weight: 600; }
.info-acompte.attente { color: var(--du-texte); }
.montants-acompte { margin: 0; padding: 12px 14px; border-radius: 14px; background: #EDE9DF; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.reglage-prix input { width: 7em; height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--bord); background: var(--blanc); font: inherit; font-size: 18px; font-weight: 700; text-align: center; box-sizing: border-box; }
.boutons-envoi { display: flex; flex-wrap: wrap; gap: 8px; }
.boutons-envoi .bouton-cadre { height: 48px; font-size: 15px; }
.boutons-envoi .bouton-cadre[disabled], .bouton-cadre.inactif { opacity: .45; cursor: not-allowed; }
#lien-acompte { width: 100%; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--bord); background: var(--blanc); font: inherit; font-size: 14px; box-sizing: border-box; }
.feuille-acompte .bouton-clair { display: inline-flex; align-items: center; text-decoration: none; }
/* D52 : « Noter un remboursement » sur une commande payée puis annulée ; l'encaissement remboursé, barré dans « Fait » */
.formulaire-rembourser { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--sable); margin-top: 8px; }
.formulaire-rembourser h3 { margin: 0; font-size: 16px; font-weight: 700; }
.formulaire-rembourser input[name="montant"] { width: 9em; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--bord); font: inherit; font-size: 17px; box-sizing: border-box; }
.moyens-rembourser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.moyens-rembourser legend { font-size: 14px; color: var(--gris-studio); margin-bottom: 6px; padding: 0; }
.formulaire-rembourser .bouton-plein { align-self: flex-start; }
.ligne-a-faire.annule .quoi-a-faire { color: var(--gris-studio); }
.info-ligne.rembourse { font-weight: 600; font-size: 14px; }
.feuille-acompte .info-ligne, .cadre-acompte .info-ligne { text-align: left; align-self: flex-start; margin: 0; }
.formulaire-acompte .bouton-clair { align-self: flex-start; }
/* O28 : en 3 jours, « Séance photo · Mme Martin » passe à la ligne plutôt que de perdre le nom du client */
.petite-activite .nom-petite { white-space: normal; overflow-wrap: anywhere; }

/* correctif du 29/10 (D59) : le montant de l'acompte seulement pour « Un acompte » ; « Plus tard » n'a pas de moyen de paiement */
.cadre-commande:not(:has(input[name="paye"][value="acompte"]:checked)) .si-acompte,
.cadre-commande:not(:has(input[name="paye"][value="plus_tard"]:checked)) .si-plus-tard,
.cadre-commande:has(input[name="paye"][value="plus_tard"]:checked) .sauf-plus-tard { display: none; }

/* Séance 6 — « Poser » : 📍 le lieu (D53) ; le champ de l'adresse avec « Une adresse » seulement */
.saisie-lieu .si-adresse .champ { margin: 12px 0 0; }
.saisie-lieu:has(input[name="lieu_choix"][value="studio"]:checked) .si-adresse { display: none; }

/* Séance 6 — 💍 les mariages, 📋 les check-lists, 📝 le rappel détaillé */
.texte-libre { white-space: pre-line; }
.a-completer { color: #A4553F; font-weight: 600; white-space: nowrap; }
.fiche-mariage .boutons-ligne, .resume-mariage .boutons-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.fiche-mariage .recap dd { overflow-wrap: anywhere; }
.resume-mariage p { margin: 4px 0; }
details.completer summary { cursor: pointer; text-decoration: underline; margin-top: 6px; }
.ligne-echeance { border: 1px solid var(--sable, #E1DBCB); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 8px; }
.ligne-echeance legend { font-weight: 600; padding: 0 4px; }
.compteur-checklist { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--sable, #E1DBCB); font-weight: 700; }
.lignes-checklist { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.ligne-checklist { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; text-align: left; font: inherit; font-size: 1.05rem;
  background: #fff; border: 1px solid var(--sable, #E1DBCB); border-radius: 10px; color: inherit; cursor: pointer; }
.ligne-checklist.cochee { background: #EEF2EA; color: #566F52; }
.ligne-checklist.cochee span:last-child { text-decoration: line-through; }
.case-checklist { font-size: 1.4rem; line-height: 1; }
.rubrique-checklist h3 { margin: 16px 0 8px; font-size: 1rem; }
.depart-jour-j { margin: 12px 0 20px; }
.lignes-modele { list-style: none; padding: 0; display: grid; gap: 8px; }
.lignes-modele li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.renommer-ligne { display: flex; gap: 6px; flex: 1 1 220px; min-width: 0; }
.renommer-ligne input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--sable, #E1DBCB); border-radius: 6px; font: inherit; }
.formulaire-rappel textarea { width: 100%; }

/* ---------- séance 6 bis ---------- */
/* D63 : « 📆 Plusieurs jours » dans le calendrier de Poser ; l'aide ne se montre qu'une fois la case cochée */
.choix-plusieurs { margin-left: auto; }
.choix-plusieurs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-plusieurs span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1.5px solid var(--bord); background: var(--blanc); font-size: 14px; font-weight: 600; color: var(--encre-studio); cursor: pointer; }
.choix-plusieurs input:checked + span { background: var(--taupe); border-color: var(--taupe); color: var(--blanc); }
.choix-plusieurs input:focus-visible + span { outline: 2px solid var(--taupe); outline-offset: 2px; }
.aide-plusieurs { display: none; margin: -2px 0 6px; }
.saisie-jour:has(input[name="plusieurs"]:checked) .aide-plusieurs { display: block; }

/* D62 : sur ordinateur, le haut du planning sur une ligne — à gauche 📸 · 🏡 · Les deux, au milieu ‹ la date ›, au bout
   « Aujourd'hui » et « + Poser » */
.ligne-planning { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.ligne-planning .bascule-voir { justify-self: start; }
.ligne-planning .nav-planning { display: flex; justify-content: center; align-items: center; gap: 14px; }
.planning .ligne-planning h1.titre-ligne { font-size: 22px; white-space: nowrap; text-align: center; }
.bout-ligne { justify-self: end; display: flex; gap: 8px; align-items: center; }
.bout-ligne .aujourdhui-lien { height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bord); background: var(--blanc); display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 600; color: var(--encre-studio); text-decoration: none; white-space: nowrap; }
.bout-ligne .aujourdhui-lien[aria-current] { border-color: var(--taupe); }
.bout-ligne .aujourdhui-lien:hover { background: var(--sable); }

/* D60 : la vue Jour du téléphone, sans fin — la barre des jours glisse au doigt, chaque jour garde son titre collé en haut */
.barre-jours { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 6 * 4px) / 7); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.barre-jours::-webkit-scrollbar { display: none; }
.barre-jours li { scroll-snap-align: start; }
.barre-jours a.vide:not(.affiche):not(.aujourdhui) .numero { font-weight: 400; color: var(--gris-studio); }
.barre-jours a.debut-mois .jour-court, .barre-jours li:first-child .jour-court { font-weight: 700; color: var(--encre-studio); }
.barre-jours a.cible { outline: 2px dashed var(--taupe); outline-offset: -2px; background: var(--sable); }
.defile { display: flex; flex-direction: column; gap: 12px; }
.defile-actif .barre-jours { position: sticky; top: var(--haut-entete, 0px); z-index: 30; box-shadow: 0 0 0 10px var(--creme), 0 14px 12px -10px rgba(46, 42, 36, .35); }
.defile-actif .plus-tot, .defile-actif .plus-tard { display: none; }
.defile-actif .plus-tot.montre, .defile-actif .plus-tard.montre { display: block; }
/* le dernier jour chargé peut monter jusque sous la barre (toucher un jour de la fin y amène vraiment) */
.defile-actif { padding-bottom: 55vh; }
.plus-tot, .plus-tard { margin: 0; text-align: center; }
.plus-tot .bouton-clair, .plus-tard .bouton-clair { display: inline-flex; align-items: center; height: 44px; text-decoration: none; font-size: 14px; }
.liste-defile { display: flex; flex-direction: column; gap: 18px; }
.planning .jour-defile { display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; scroll-margin-top: calc(var(--haut-entete, 0px) + var(--haut-barre, 0px)); }
.titre-jour-defile { position: sticky; top: calc(var(--haut-entete, 0px) + var(--haut-barre, 0px)); z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 2px; background: var(--creme); }
.titre-jour-defile h2 { margin: 0; font-family: var(--texte); font-size: 20px; font-weight: 700; color: var(--encre-studio); text-transform: none; letter-spacing: 0; }
.jour-defile.aujourdhui .titre-jour-defile h2 { color: var(--taupe); }
.mention-aujourdhui { font-size: 15px; font-weight: 600; }
.titre-jour-defile .plus-jour { padding: 0 12px; flex-shrink: 0; }
.jour-defile.cible .titre-jour-defile { outline: 2px dashed var(--taupe); outline-offset: -2px; border-radius: 10px; }
.morceau-defile { display: none; }

/* D64 : le glisser-déposer — la carte prise reste à sa place, en pâle ; son fantôme suit la souris ou le doigt, avec le jour et l'heure */
[data-glisser] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (hover: hover) { .bloc-heure[data-glisser] { cursor: grab; } }
.glisser-actif, .glisser-actif * { cursor: grabbing !important; }
.en-glisse { opacity: .35; }
.fantome-glisser { position: fixed; z-index: 200; margin: 0; pointer-events: none; opacity: .9; box-shadow: 0 10px 24px rgba(46, 42, 36, .3); transition: none; }
.etiquette-glisser { position: fixed; z-index: 201; pointer-events: none; padding: 6px 10px; border-radius: 10px; background: var(--encre-studio); color: var(--blanc);
  font-size: 14px; font-weight: 700; white-space: nowrap; }
.colonne-heures.cible { background: rgba(125, 118, 98, .12); }
.colonne.cible { outline: 2px dashed var(--taupe); outline-offset: 2px; border-radius: 10px; }
.sentinelle-defile { height: 1px; }

/* D66 : dupliquer, répéter */
.actions-pose { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.actions-pose .bouton-clair { display: inline-flex; align-items: center; gap: 6px; height: 44px; text-decoration: none; font-size: 15px; }
.formulaire-repeter .si-mois { display: none; margin-top: 10px; }
.formulaire-repeter:has(input[name="frequence"][value="mois"]:checked) .si-mois { display: flex; flex-wrap: wrap; }
.si-mois legend { width: 100%; margin-bottom: 4px; }
.apercu-repetitions { border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); padding: 12px 14px; }
.apercu-repetitions p { margin: 0 0 6px; }
.liste-repetitions { margin: 0; padding-left: 1.1em; max-height: 280px; overflow-y: auto; font-size: 14px; }
.liste-repetitions li.en-conflit { color: var(--du-texte); font-weight: 600; }
.boutons-repeter { display: flex; flex-direction: column; gap: 10px; }

/* § 7 (relevé par le correctif du 29/10) : les champs de nombre des Réglages prennent le style des autres champs */
.formulaire input[type="number"] { font: inherit; color: var(--encre); background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; padding: 11px 14px;
  width: 100%; min-height: 46px; }
.formulaire input[type="number"]:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }
.saisie-nombre input[type="number"] { max-width: 140px; }
.cases-courriels input[type="number"] { width: 90px; padding: 8px 10px; min-height: 40px; }

.bouton-annuler-deplacer { display: flex; align-items: center; justify-content: center; height: 48px; width: 100%; text-decoration: none; font-size: 16px; font-weight: 600; }

/* ---------- lot 3, séance 7 : commander des tirages en ligne (/tirages) ----------
   Une page du client, aux couleurs du site ; les choix reprennent ceux du Comptoir (maquettes 12, 13, 14). */
.page-tirages, .editeur-cadre {
  --encre-studio: #2E2A24; --gris-studio: #5F5948; --bord: #CFC7B2; --fond-agenda: #EFEBE2; --texte-agenda: #4A4537; --barre: var(--creme-2);
}
.page-tirages .conteneur.etroit { max-width: 760px; }
.depot-tirages { margin: 8px 0 18px; }
.zone-depot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px; border: 1.5px dashed var(--taupe); border-radius: 18px; background: var(--blanc); text-align: center; cursor: pointer; }
.zone-depot.survol { background: var(--sable); }
.zone-depot .champ-depot { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zone-depot:has(.champ-depot:focus-visible) { outline: 2px solid var(--taupe); outline-offset: 3px; }
.zone-depot .bouton { cursor: pointer; }
.envois { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.envoi { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 4px 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--blanc); font-size: 14px; }
.envoi .nom-envoi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envoi progress { width: 90px; accent-color: var(--taupe); }
.envoi .etat-envoi { grid-column: 1 / -1; color: var(--taupe); font-size: 13px; }
.envoi.fini .etat-envoi { color: var(--vert); }
.envoi.refusee .etat-envoi, .envoi.ratee .etat-envoi { color: var(--brique); }
.envoi .bouton-clair { grid-column: 1 / -1; justify-self: start; height: 40px; }
.liste-photos { display: flex; flex-direction: column; gap: 16px; margin: 18px 0; }
.carte-photo { background: var(--blanc); border: 1px solid var(--sable); border-radius: 18px; padding: 14px; color: var(--encre-studio); font-weight: 400; scroll-margin-top: 16px; }
.haut-carte { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; color: var(--gris-studio); }
.rang-photo { font-weight: 700; color: var(--encre-studio); font-size: 15px; }
.nom-photo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corps-carte { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .corps-carte { grid-template-columns: 220px minmax(0, 1fr); } }
.cote-vignette { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.papier-vignette { max-width: 100%; background: var(--blanc); box-shadow: 0 1px 6px rgba(46, 42, 36, .3); box-sizing: border-box; display: flex; }
.image-vignette { position: relative; flex: 1; overflow: hidden; background: #8E8670; display: flex; align-items: center; justify-content: center; }
.image-vignette img { position: absolute; max-width: none; }
.sans-apercu { font-size: 32px; }
.bouton-recadrer { height: 44px; }
.etat-cadre { margin: 0; font-size: 13px; color: var(--gris-studio); text-align: center; line-height: 1.4; }
.etat-cadre.fait { color: var(--vert); font-weight: 600; }
.choix-photo { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.champ-carte { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ-carte legend, .champ-carte .libelle { font-size: 13px; font-weight: 600; color: var(--gris-studio); padding: 0; margin-bottom: 4px; text-transform: none; letter-spacing: 0; }
p.champ-carte { display: block; font-size: 15px; }
p.champ-carte .libelle { display: block; }
.champ-carte select { height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--bord); background: var(--blanc); font: inherit; font-size: 16px; color: var(--encre-studio); width: 100%; }
.page-tirages .segment span { font-size: 14px; padding: 0 4px; }
.page-tirages .plus-moins { justify-content: flex-start; }
.ligne-mm { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.ligne-mm .valeur-plus { width: 64px; border-color: var(--bord); background: var(--blanc); font-size: 18px; height: 44px; }
.avertissement-tirage { color: var(--du-texte, #6E4314); }
.actions-carte { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bouton-lien { background: none; border: 0; padding: 8px 0; font: inherit; font-size: 14px; color: var(--taupe); text-decoration: underline; cursor: pointer; }
.page-tirages .bouton-clair { display: inline-flex; align-items: center; justify-content: center; }
.calcul-tirages { margin: 8px 0 12px; color: var(--encre-studio); font-weight: 400; }
.ligne-tirages { border-bottom: 1px solid var(--fond-agenda); }
.ligne-tirages .ligne-calcul { border-bottom: 0; padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
.ligne-tirages .titre-ligne { padding-top: 10px; font-size: 15px; }
.detail-ligne { padding: 0 14px 4px; font-size: 13px; color: var(--gris-studio); }
.calcul-tirages .erreur { padding: 8px 14px; margin: 0; }
.suite-tirages { padding: 0 14px 12px; margin: 0; }
.vide-tirages { text-align: center; margin: 18px 0; }

/* la fenêtre du recadrage (C6) : plein écran, la photo sous un cadre clair, le reste assombri */
body.editeur-ouvert { overflow: hidden; }
.editeur-cadre { position: fixed; inset: 0; z-index: 200; background: #1E1C18; color: var(--blanc); display: flex; flex-direction: column; }
.editeur-cadre[hidden] { display: none; }
.haut-editeur, .bas-editeur { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
.bas-editeur { padding-bottom: max(14px, env(safe-area-inset-bottom)); justify-content: center; gap: 8px; }
.haut-editeur strong { font-size: 16px; color: var(--blanc); }
.haut-editeur .bouton-lien { color: var(--sable); font-size: 16px; }
.haut-editeur .bouton { padding: 10px 20px; cursor: pointer; background: var(--sable); color: var(--encre); border-color: var(--sable); }
.scene-editeur { flex: 1; min-height: 0; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.scene-editeur:active { cursor: grabbing; }
.cadre-edition { position: relative; }
.cadre-edition img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.cadre-edition::after { content: ""; position: absolute; inset: 0; box-shadow: 0 0 0 100vmax rgba(20, 18, 15, .62); outline: 2px solid var(--blanc); pointer-events: none; }
.aide-editeur { color: var(--sable); text-align: center; padding: 0 16px; margin: 6px 0 0; }
.bas-editeur .rond { width: 44px; height: 44px; border-radius: 22px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: var(--blanc); font: inherit; font-size: 24px; cursor: pointer; }
.bas-editeur .bouton-clair { height: 44px; padding: 0 10px; font-size: 14px; white-space: nowrap; background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, .4); }
.editeur-cadre button:focus-visible { outline: 2px solid var(--sable); outline-offset: 2px; }

/* ---------- lot 3, séance 7 bis : commander (coordonnées, CGV, payer) et les photos d'une commande en ligne ---------- */
.commander-tirages { margin-top: 18px; }
.commander-tirages legend h2 { font-size: 1.4rem; margin-bottom: 6px; }
.photos-commande { margin-top: 18px; }
.liste-photos-commande { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.photo-commande { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--sable); }
.vignette-commande { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--creme-2); display: flex; align-items: center; justify-content: center; }
.infos-photo-commande { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; }
.nom-fichier { font-size: 12px; overflow-wrap: anywhere; color: var(--gris-studio); }
.liens-photo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.liens-photo .bouton-clair { height: 40px; display: inline-flex; align-items: center; text-decoration: none; font-size: 14px; }
.etat-photo { font-size: 13px; color: var(--gris-studio); width: 100%; }

/* séance 7 ter (point 1) : la page du mot de passe de l'espace studio */
.page-connexion { max-width: 420px; padding-top: max(48px, env(safe-area-inset-top)); }
.nom-studio-connexion { font-family: var(--titre); letter-spacing: .08em; color: var(--taupe); text-transform: uppercase; margin: 0; }
.page-connexion .formulaire-comptoir { display: flex; flex-direction: column; gap: 14px; }

/* séance 7 ter (D68, point 5) : ✅ À faire — le nom du client en gros ; l'encart « ⏳ J'attends le client », fermé par défaut */
.client-a-faire { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--encre-studio); }
.client-a-faire a { color: inherit; text-decoration: none; }
.attente-client { margin-top: 18px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--sable); padding: 4px 14px; }
.attente-client > summary { cursor: pointer; padding: 10px 0; font-size: 17px; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.attente-client .lignes-a-faire { margin-bottom: 10px; }

/* séance 7 ter (points 6 à 8) : article par article — fait, payé ; l'ajout à une commande enregistrée */
.actions-article { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0 2px; }
.ligne-faite .tete-ligne-recap strong:first-child { color: var(--vert); }
.payer-article > summary { list-style: none; display: inline-flex; }
.payer-article > summary::-webkit-details-marker { display: none; }
.payer-article[open] .encaisser { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.faits-commande.tout-fait { color: var(--vert); font-weight: 700; }
.barre-ajout { background: var(--sable); }
/* la page du mot de passe : le fond clair de l'espace studio (pas celui des fenêtres qui montent du bas) */
body.feuille:has(.page-connexion) { background: var(--creme); }
body.feuille:has(.page-connexion) h1 { color: var(--encre-studio); }