/* ═══════════════════════════════════════════════════════════
   Tuft-o-rama · feuille de style · V1
   Bleu Klein par défaut, mode blanc au choix. Mobile d'abord.
   ═══════════════════════════════════════════════════════════ */

@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* ─── Couleurs ─── */
:root {
  --klein: #1B27FF; --papier: #F8F8F5; --encre: #0A0A0A;
  --bg: var(--klein); --fg: var(--papier); --acc: var(--papier); --sur-acc: var(--klein);
  --texte: #E8E9FF; --trait: rgba(248,248,245,.7); --trait-doux: rgba(248,248,245,.35);
  --doux: #1620E0; --photo: #E4E4DE; --photo-fg: var(--klein);
  --erreur-bg: #FFE3E0; --erreur-fg: #8A1300;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Archivo', system-ui, sans-serif;
  --marge: clamp(20px, 4vw, 48px);
  color-scheme: dark;
}
html.mode-blanc {
  --bg: var(--papier); --fg: var(--encre); --acc: var(--klein); --sur-acc: var(--papier);
  --texte: #3A3A40; --trait: rgba(10,10,10,.85); --trait-doux: #D9D9D3;
  --doux: #EDEDE8; --photo: #2B36FF; --photo-fg: var(--papier);
  color-scheme: light;
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--fg); color: var(--bg); padding: 12px 16px; font-family: var(--mono); font-size: 13px; text-decoration: none; }
.evitement:focus { top: 8px; }
.cadre { max-width: 1280px; margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ─── Typo ─── */
.mono { font-family: var(--mono); }
.etiquette { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.titre-xl { font-weight: 800; font-size: clamp(38px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; }
.titre-l  { font-weight: 800; font-size: clamp(40px, 5.4vw, 76px); line-height: .92; letter-spacing: -.03em; text-transform: uppercase; }
.titre-m  { font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); line-height: .95; letter-spacing: -.02em; text-transform: uppercase; }
.chapo { font-size: 18px; line-height: 1.55; color: var(--texte); max-width: 34em; }
.chapo-mono { font-family: var(--mono); font-size: 15px; line-height: 1.65; color: var(--texte); max-width: 46ch; }
.texte { color: var(--texte); }
.prose p + p { margin-top: 14px; }
.prose h2 { margin: 40px 0 12px; font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.prose ul { padding-left: 20px; margin-top: 10px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--acc); }

/* ─── Boutons ─── */
.btn { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid var(--acc); cursor: pointer; transition: background .15s, color .15s; }
.btn-plein { background: var(--acc); color: var(--sur-acc); }
.btn-plein:hover { background: transparent; color: var(--acc); }
.btn-contour { background: transparent; color: var(--acc); }
.btn-contour:hover { background: var(--acc); color: var(--sur-acc); }
.btn-large { width: 100%; justify-content: space-between; min-height: 56px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; }
.lien { color: var(--acc); text-underline-offset: 3px; }

/* ─── En-tête ─── */
.entete { border-bottom: 1.5px solid var(--trait); background: var(--bg); position: relative; z-index: 10; }
.entete-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.logo { text-decoration: none; color: var(--acc); font-family: var(--mono); font-weight: 500; font-size: 15px; line-height: .95; display: flex; flex-direction: column; min-height: 44px; justify-content: center; }
.entete-actions { display: flex; align-items: center; gap: 8px; }
.btn-petit { min-height: 44px; padding: 0 14px; font-size: 12px; }
.mode { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); background: transparent; border: 1.5px solid var(--acc); border-radius: 40px; min-height: 44px; padding: 0 14px 0 8px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.mode-piste { width: 34px; height: 18px; border: 1.5px solid currentColor; border-radius: 20px; display: inline-flex; align-items: center; justify-content: flex-end; padding: 0 2px; }
html.mode-blanc .mode-piste { justify-content: flex-start; }
.mode-bille { width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
.menu-bouton { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); background: transparent; border: 2px solid var(--acc); min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.menu-bouton .icone-fermer { display: none; }
.menu-bouton[aria-expanded="true"] .icone-ouvrir { display: none; }
.menu-bouton[aria-expanded="true"] .icone-fermer { display: inline; }
.nav-principale ul { list-style: none; }
.nav-principale a { text-decoration: none; }
.nav-principale a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.entete .mode-bureau { display: none; }

/* mobile : menu plein écran sous l'en-tête */
.nav-principale { display: none; border-top: 1.5px solid var(--trait); }
.nav-principale.ouvert { display: block; }
.nav-principale li { border-bottom: 1px solid var(--trait-doux); }
.nav-principale li a { color: var(--fg); font-weight: 800; font-size: 30px; letter-spacing: -.02em; text-transform: uppercase; min-height: 72px; padding: 0 var(--marge); display: flex; align-items: center; justify-content: space-between; }
.nav-principale li a::after { content: '→'; color: var(--acc); font-weight: 400; }
.nav-pied { padding: 20px var(--marge); display: flex; flex-direction: column; gap: 16px; }
.nav-pied p { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--texte); }

@media (min-width: 900px) {
  .menu-bouton, .nav-pied { display: none; }
  .entete .mode-bureau { display: inline-flex; }
  .nav-principale { display: block; }
  .nav-principale ul { max-width: 1280px; margin: 0 auto; padding: 0 var(--marge); display: flex; flex-wrap: wrap; gap: 0 40px; border-top: 0; }
  .nav-principale li { border: 0; }
  .nav-principale li a { font-size: 14px; font-weight: 600; letter-spacing: .03em; min-height: 44px; padding: 0; }
  .nav-principale li a::after { content: none; }
  .nav-principale { border-top: 1px solid var(--trait-doux); }
}

/* ─── Sections ─── */
.bandeau { border-bottom: 1.5px solid var(--trait); }
.bandeau .cadre { padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.bandeau h2, .bandeau p { font: inherit; }
.section { border-top: 1.5px solid var(--trait); }
.section + .section { border-top: 0; }
.espace { margin-top: clamp(56px, 7vw, 96px); }
.intro { border-bottom: 1.5px solid var(--trait); }
.intro .cadre { padding-top: clamp(80px, 12vw, 176px); padding-bottom: clamp(72px, 10vw, 152px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; }
.intro .boutons { justify-content: center; margin-top: 10px; }
.intro-page .cadre { padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(56px, 7vw, 104px); align-items: flex-start; text-align: left; }
.intro-page .boutons { justify-content: flex-start; }
.mot-acc { color: var(--acc); }
html.mode-blanc .mot-acc { color: var(--klein); }

/* ─── Deux offres ─── */
.offres { display: flex; flex-wrap: wrap; border-top: 1.5px solid var(--trait); }
.offre { flex: 1 1 520px; min-width: 0; padding: clamp(32px, 5vw, 56px) var(--marge); display: flex; flex-direction: column; gap: 28px; }
.offre + .offre { background: var(--doux); }
@media (min-width: 1080px) { .offre:first-child { border-right: 1.5px solid var(--trait); } }
@media (max-width: 1079px) { .offre + .offre { border-top: 1.5px solid var(--trait); } }
.offre-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pastille { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); border: 1px solid var(--acc); border-radius: 40px; padding: 7px 14px; }
.prix { text-align: right; font-weight: 800; font-size: 44px; line-height: .9; letter-spacing: -.03em; color: var(--acc); }
.prix small { display: block; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; color: var(--texte); }
.offre .btn-large { margin-top: auto; }

/* tuiles (séances, pass) */
.tuiles { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tuiles-pass { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.tuile { border: 1.5px solid var(--acc); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.tuile-titre { font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: -.01em; }
.tuile-prix { font-weight: 800; font-size: 28px; letter-spacing: -.02em; }
.tuile p { font-size: 15px; line-height: 1.45; color: var(--texte); }

/* fiche (infos pratiques) */
.fiche { border-top: 1px solid var(--trait-doux); }
.fiche > div { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--trait-doux); }
.fiche dt { flex: 0 0 140px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); padding-top: 3px; }
.fiche dd { flex: 1 1 200px; font-size: 16px; }

/* ─── Sessions ─── */
.sessions { list-style: none; }
.session { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding: 26px var(--marge); border-bottom: 1px solid var(--trait-doux); max-width: 1280px; margin: 0 auto; }
.session-mois { flex: 0 0 220px; font-weight: 800; font-size: 32px; letter-spacing: -.02em; text-transform: uppercase; line-height: 1; }
.session-dates { flex: 1 1 260px; font-size: 17px; line-height: 1.45; color: var(--texte); }
.session-dates .mono { font-size: 13px; }
.places { flex: 0 1 230px; display: flex; align-items: center; gap: 5px; }
.place { width: 14px; height: 14px; border: 2px solid var(--acc); }
.place.prise { background: var(--acc); }
.places-texte { margin-left: 10px; font-family: var(--mono); font-size: 13px; }
.session .btn { margin-left: auto; min-height: 48px; }
.vide { padding: 32px var(--marge); max-width: 1280px; margin: 0 auto; color: var(--texte); }
.note { max-width: 1280px; margin: 0 auto; padding: 22px var(--marge) 0; font-size: 16px; color: var(--texte); }
.note a { color: var(--acc); }

/* ─── Galerie ─── */
.galerie { display: flex; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; }
.galerie figure { flex: 1 1 150px; min-width: 0; border-right: 1px solid var(--trait-doux); border-bottom: 1px solid var(--trait-doux); }
.galerie .visuel { aspect-ratio: 1 / 1; background: var(--photo); color: var(--photo-fg); overflow: hidden; position: relative; }
.galerie .visuel img { width: 100%; height: 100%; object-fit: cover; }
.galerie figcaption { padding: 12px 14px; font-size: 15px; color: var(--texte); }
.visuel.manquant img { display: none; }
.visuel.manquant::after { content: attr(data-manquant); position: absolute; left: 14px; top: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* ─── Bloc couleur (groupes) ─── */
.bloc-acc { background: var(--acc); color: var(--sur-acc); }
.bloc-acc .cadre { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end; }
.bloc-acc .colonne { flex: 1 1 360px; min-width: 0; }
.bloc-acc .colonne-large { flex: 1 1 520px; }
.bloc-acc .etiquette { color: var(--sur-acc); }
.bloc-acc .btn { border-color: var(--sur-acc); background: var(--sur-acc); color: var(--acc); margin-top: 24px; }
.bloc-acc .btn:hover { background: transparent; color: var(--sur-acc); }

/* ─── Colonnes génériques ─── */
.duo { display: flex; flex-wrap: wrap; gap: 40px 64px; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.duo > * { flex: 1 1 400px; min-width: 0; }
.pile { display: flex; flex-direction: column; gap: 20px; }

/* étapes numérotées */
.etapes { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.etapes li { border: 1.5px solid var(--acc); padding: 18px; display: flex; flex-direction: column; gap: 8px; }

/* ─── Questions (FAQ) ─── */
.questions { border-top: 1.5px solid var(--trait); }
.questions details { border-bottom: 1px solid var(--trait-doux); }
.questions summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 19px; display: flex; justify-content: space-between; gap: 16px; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: '+'; font-family: var(--mono); color: var(--acc); font-weight: 400; }
.questions details[open] summary::after { content: '–'; }
.questions details > div { padding: 0 0 22px; color: var(--texte); max-width: 46em; }
.questions details a { color: var(--acc); }

/* ─── Formulaires ─── */
.formulaire { display: grid; gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .champ legend { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.champ .aide { font-size: 14px; color: var(--texte); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=time], select, textarea {
  font: inherit; font-size: 17px; color: var(--fg); background: transparent; border: 1.5px solid var(--trait); border-radius: 0; padding: 12px 14px; min-height: 50px; width: 100%;
}
select option { color: #0A0A0A; }
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--acc); outline-offset: 0; }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.case input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--acc); }
.case a { color: var(--acc); }
.deux-champs { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message { padding: 14px 16px; font-size: 16px; border: 1.5px solid var(--acc); }
.message:empty { display: none; }
.message.erreur { background: var(--erreur-bg); color: var(--erreur-fg); border-color: var(--erreur-fg); }

/* fenêtre de réservation */
dialog.fenetre { border: 2px solid var(--acc); background: var(--bg); color: var(--fg); padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
dialog.fenetre::backdrop { background: rgba(10,10,10,.6); }
.fenetre-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1.5px solid var(--trait); }
.fenetre-corps { padding: 24px 20px; display: grid; gap: 20px; }
.fermer { background: transparent; color: var(--acc); border: 2px solid var(--acc); min-width: 44px; min-height: 44px; cursor: pointer; font-family: var(--mono); font-size: 18px; }
.recap { border: 1px solid var(--trait-doux); padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.recap strong { font-size: 22px; font-weight: 800; }

/* ─── Parc machines : désordre / ranger ─── */
.parc-barre { display: flex; flex-wrap: wrap; border-top: 1.5px solid var(--trait); border-bottom: 1.5px solid var(--trait); }
.parc-barre button { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: transparent; color: var(--acc); border: 0; border-right: 1px solid var(--trait-doux); min-height: 52px; padding: 0 20px; cursor: pointer; }
.parc-barre button[aria-pressed="true"] { background: var(--acc); color: var(--sur-acc); }
.parc-filtres { display: flex; flex-wrap: wrap; }
.parc-filtres[hidden] { display: none; }
.parc { list-style: none; position: relative; }
.parc.desordre { height: 900px; overflow: hidden; }
.parc.desordre .objet { position: absolute; width: var(--l, 150px); transform: rotate(var(--r, 0deg)); transition: left .6s, top .6s, transform .6s; }
.parc.desordre .objet img { width: 100%; filter: drop-shadow(0 6px 14px rgba(10,10,10,.18)); }
.parc.desordre .objet .objet-texte .ds { display: none; }
.parc.desordre .objet .objet-texte { font-family: var(--mono); font-size: 11px; line-height: 1.35; text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.parc.desordre .objet.manquant .objet-texte { border: 1.5px solid var(--acc); padding: 14px 12px; background: var(--bg); font-size: 12px; }
.parc.range { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-left: 1px solid var(--trait-doux); }
.parc.range .objet { display: flex; gap: 16px; align-items: center; padding: 18px var(--marge) 18px 18px; border-right: 1px solid var(--trait-doux); border-bottom: 1px solid var(--trait-doux); }
.parc.range .objet img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.parc.range .objet.manquant img { display: none; }
.parc .nm { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--acc); }
.parc.range .ds { display: block; font-size: 15px; line-height: 1.45; color: var(--texte); margin-top: 4px; }
.parc .objet[hidden] { display: none; }
@media (max-width: 700px) { .parc.desordre { height: 1300px; } }

/* ─── Calculateur ─── */
.calcul { display: flex; flex-wrap: wrap; border: 1.5px solid var(--trait); }
.calcul > * { flex: 1 1 340px; padding: clamp(24px, 4vw, 40px); }
.calcul-res { background: var(--acc); color: var(--sur-acc); }
.calcul-res .ligne { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid currentColor; gap: 16px; }
.calcul-res .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; gap: 16px; }
.calcul-res .total strong { font-size: 44px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.calcul-res .petit { font-family: var(--mono); font-size: 12px; line-height: 1.55; margin-top: 18px; }

/* ─── Pied de page ─── */
.pied { border-top: 1.5px solid var(--trait); }
.pied .cadre { padding-top: clamp(48px, 6vw, 80px); padding-bottom: 28px; }
.pied-logo { font-family: var(--mono); font-weight: 500; font-size: clamp(52px, 11vw, 168px); line-height: .85; letter-spacing: -.04em; color: var(--acc); }
.pied-colonnes { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 56px; padding-top: 28px; border-top: 1.5px solid var(--trait); font-size: 16px; line-height: 1.7; }
.pied-colonnes > div { flex: 1 1 200px; }
.pied-colonnes h2 { margin: 0 0 8px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.pied-bas { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texte); }

/* ─── Divers ─── */
.carte-lieu { border: 1.5px solid var(--trait); padding: 24px; display: grid; gap: 12px; }
.statut { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--acc); padding: 6px 10px; }

/* ─── Petits utilitaires (pas de style dans le HTML : sécurité) ─── */
.chapo-herite, .etiquette-herite { color: inherit; }
.titre-serre { line-height: .88; }
.titre-section { padding-top: 18px; padding-bottom: 18px; }
.titre-section h2 { font: inherit; }
.cadre-plein { padding-left: 0; padding-right: 0; }
.cadre-haut { padding-top: clamp(32px, 5vw, 56px); }
.note-mono { font-family: var(--mono); text-transform: uppercase; font-size: 13px; letter-spacing: .06em; }
.note-sans-marge { padding-left: 0; padding-right: 0; }
.etapes-pleines { flex-basis: 100%; }
.pastille-gauche { align-self: flex-start; }
.petit-texte { font-size: 15px; }
.questions-sans-bord { border-top: 0; }
.prose { max-width: 46em; }
.liste-seances { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.etiquette-large { letter-spacing: .24em; }

/* ─── Espace admin ─── */
.admin-connexion { max-width: 520px; }
.admin-barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; }
.admin-onglets { margin-bottom: 32px; }
.admin-panneau { display: grid; gap: 24px; padding-bottom: 48px; }
.admin-tableau { overflow-x: auto; border: 1.5px solid var(--trait); }
.admin-tableau:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.admin-tableau table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15px; }
.admin-tableau th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); padding: 12px; border-bottom: 1.5px solid var(--trait); }
.admin-tableau td { padding: 12px; border-bottom: 1px solid var(--trait-doux); vertical-align: top; }
.admin-tableau td .boutons { gap: 8px; }
.admin-tableau .btn { min-height: 44px; padding: 0 12px; font-size: 11px; }
.admin-form { border: 1.5px solid var(--trait); padding: clamp(20px, 3vw, 32px); }
.admin-filtre { max-width: 420px; }
.admin-cartes { list-style: none; display: grid; gap: 12px; }
.admin-cartes li { border: 1.5px solid var(--trait); padding: 18px; display: grid; gap: 8px; }
.admin-cartes .traitee { border-style: dashed; }
.confirmation { display: grid; gap: 8px; padding: 10px; border: 1.5px solid var(--acc); }

/* ─── Ajustements après tests visuels ─── */
.tuiles { grid-template-columns: 1fr; }
.tuiles-pass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) {
  .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tuiles-pass { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* parc : photo absente → carte nette, sans icône cassée */
.parc .objet.manquant img { display: none; }
.parc.desordre .objet.manquant .objet-texte { display: block; border: 1.5px solid var(--acc); padding: 14px 12px; background: var(--bg); font-size: 12px; line-height: 1.35; margin-top: 0; }
.parc.desordre .objet.manquant { transform: rotate(var(--r, 0deg)); }
.parc.range .objet.manquant { padding-left: var(--marge); }

/* ═══ V1.1 · pass, créneaux, espace, textes des workshops ═══ */
.tuiles-achat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .tuiles-pass.tuiles-achat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tuiles-achat .btn { margin-top: auto; width: 100%; }
.tuile[hidden] { display: none; }

/* sessions : titre et texte mis en forme */
.session-titre { display: block; font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: -.01em; color: var(--fg); margin-bottom: 4px; }
.session-texte { flex: 1 1 100%; max-width: 46em; color: var(--texte); }
.riche > * + * { margin-top: 12px; }
.riche h3 { font-size: 19px; font-weight: 800; text-transform: uppercase; color: var(--fg); }
.riche ul, .riche ol { padding-left: 22px; }
.riche a { color: var(--acc); }
.riche img { max-height: 420px; width: auto; border: 1.5px solid var(--trait-doux); }
.riche .btn { margin-top: 4px; }
.session .riche .btn { margin-left: 0; }

/* calendrier des créneaux */
.creneaux { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 24px; padding-bottom: clamp(40px, 6vw, 72px); }
@media (min-width: 640px) { .creneaux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .creneaux { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.creneaux > .vide, .creneaux > .semaine { grid-column: 1 / -1; padding-left: 0; padding-right: 0; }
.creneaux > .creneaux-plus { grid-column: 1 / -1; }
.semaine { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); padding-top: 18px; border-bottom: 1px solid var(--trait-doux); padding-bottom: 8px; }
.jour { border: 1.5px solid var(--trait); padding: 16px; display: grid; gap: 10px; align-content: start; }
.jour-titre { font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: -.01em; }
.jour ul { list-style: none; display: grid; gap: 8px; }
.creneau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; border-top: 1px solid var(--trait-doux); padding-top: 10px; }
.creneau-heure { font-family: var(--mono); font-size: 14px; }
.creneau-heure small { display: block; font-size: 12px; color: var(--texte); letter-spacing: .04em; }
.creneau .btn { min-height: 44px; padding: 0 14px; font-size: 12px; }
.creneau-etat { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texte); }
.creneau.choisi { outline: 3px solid var(--acc); outline-offset: 4px; }
.creneau .confirmation { flex: 1 1 100%; }
.creneaux-plus { justify-self: start; }

/* espace client */
.liste-pass { list-style: none; display: grid; gap: 10px; }
.liste-pass li, .liste-seances li.ligne-creneau { border: 1.5px solid var(--trait); padding: 14px 16px; display: grid; gap: 6px; }
.liste-pass .reste { font-weight: 800; font-size: 26px; letter-spacing: -.02em; }
.liste-pass .expire { border-style: dashed; }
.ligne-creneau .boutons { gap: 8px; }
.ligne-creneau .btn { min-height: 44px; padding: 0 12px; font-size: 12px; }

/* éditeur de texte de l'admin */
.editeur-outils { display: flex; flex-wrap: wrap; border: 1.5px solid var(--trait); border-bottom: 0; }
.editeur-outils button { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; background: transparent; color: var(--acc); border: 0; border-right: 1px solid var(--trait-doux); min-height: 44px; min-width: 44px; padding: 0 12px; cursor: pointer; }
.editeur-outils button:hover { background: var(--acc); color: var(--sur-acc); }
.editeur-outils b, .editeur-outils i { font-family: var(--sans); font-size: 16px; text-transform: none; }
.editeur-panneau { border: 1.5px solid var(--acc); padding: 14px; display: grid; gap: 12px; }
.editeur-panneau[hidden] { display: none; }
.editeur textarea { min-height: 200px; font-family: var(--mono); font-size: 14px; }
.editeur-apercu { border: 1.5px dashed var(--trait-doux); padding: 16px; min-height: 60px; color: var(--texte); }
.admin-panneau h3.etiquette { margin-top: 12px; }
@media (min-width: 900px) { .session-texte { margin-left: 252px; } }
.ligne-creneau .btn, .ligne-creneau .confirmation { justify-self: start; }
.tableau-achats { border: 1.5px solid var(--trait); }
.tableau-achats table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau-achats th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); padding: 10px 8px; border-bottom: 1.5px solid var(--trait); }
.tableau-achats td { padding: 10px 8px; border-bottom: 1px solid var(--trait-doux); vertical-align: top; }
@media (min-width: 600px) { .tableau-achats th, .tableau-achats td { padding: 12px; } }

/* ─── Logo vectoriel (couleur héritée : blanc sur bleu, bleu sur blanc) ─── */
.logo { display: inline-flex; align-items: center; }
.logo svg { display: block; height: 30px; width: auto; }
@media (min-width: 900px) { .logo svg { height: 36px; } }
.pied-logo svg { display: block; width: min(100%, 720px); height: auto; }

/* ═══ V1.2 · paiement sur facture ═══ */
fieldset.facturation { border: 1.5px solid var(--trait); padding: 16px; display: grid; gap: 14px; min-width: 0; margin: 0; }
fieldset.facturation legend { padding: 0 6px; }
fieldset.facturation[hidden] { display: none !important; }
#espace-bloc-facturation .formulaire { display: grid; gap: 14px; }

/* ═══ V1.2 · admin : onglets, aperçu, statistiques ═══ */
.pastille { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 11px; background: var(--acc); color: var(--sur-acc); font-size: 12px; font-weight: 700; }
.admin-filtres { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; }
.admin-filtres .admin-filtre { flex: 1 1 220px; }
.badge { display: inline-block; margin-top: 4px; padding: 2px 8px; border: 1.5px solid var(--acc); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kpi { border: 1.5px solid var(--trait); padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.kpi strong { font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--fg); }
.kpis-petits .kpi strong { font-size: 22px; }
.a-faire li { grid-template-columns: 1fr auto; align-items: center; }
.a-faire .btn { justify-self: end; }
.facturation-donnees { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 15px; }
.facturation-donnees dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texte); padding-top: 3px; }
.facturation-donnees dd { margin: 0; word-break: break-word; }
.etat-mail { white-space: normal; }
.mail-probleme .etat-mail { font-weight: 700; }

/* Graphique en barres empilées : workshops = plein, pass = hachuré (lisible sans la couleur) */
.graphe { margin: 0; border: 1.5px solid var(--trait); padding: clamp(16px, 3vw, 24px); display: grid; gap: 16px; }
.graphe figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; }
.legende { list-style: none; display: flex; gap: 16px; font-size: 14px; margin: 0; padding: 0; }
.legende li { display: flex; align-items: center; gap: 6px; }
.marque { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--acc); }
.marque-workshop, .seg-workshop { background: var(--acc); }
.marque-pass, .seg-pass { background: repeating-linear-gradient(45deg, var(--acc) 0 2px, transparent 2px 6px); }
.barres { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; height: 220px; padding: 0 0 26px; }
.barres-axe { position: absolute; inset: 0 0 26px 0; pointer-events: none; }
.barres-ligne { position: absolute; left: 0; right: 0; border-top: 1px solid var(--trait-doux); font-family: var(--mono); font-size: 10px; color: var(--texte); padding-top: 2px; }
.barre { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; outline: none; cursor: default; }
.barre-pile { position: relative; flex: 1; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px; margin: 0 2px; }
.seg { display: block; width: 100%; border: 1.5px solid var(--acc); min-height: 3px; }
.seg.haut { border-radius: 4px 4px 0 0; }
.parc-barre button[aria-pressed="true"] .pastille { background: var(--sur-acc); color: var(--acc); }
.barre-valeur { position: absolute; left: 50%; transform: translate(-50%, -4px); font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--fg); }
.barre-mois { position: absolute; bottom: -24px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 10px; color: var(--texte); }
.barre:hover .barre-pile, .barre:focus-visible .barre-pile { outline: 2px solid var(--acc); outline-offset: 3px; }
.bulle { display: none; position: absolute; bottom: calc(100% - 20px); left: 50%; transform: translateX(-50%); z-index: 2; background: var(--bg); color: var(--fg); border: 1.5px solid var(--acc); padding: 8px 10px; font-size: 13px; white-space: nowrap; gap: 2px; }
.barre:hover .bulle, .barre:focus-visible .bulle { display: grid; }
.barre:first-child + .barre .bulle, .barre:nth-child(3) .bulle { left: 0; transform: none; }
.barre:nth-last-child(-n+2) .bulle { left: auto; right: 0; transform: none; }
.graphe-info { font-size: 14px; color: var(--texte); min-height: 1.4em; }
.graphe-table summary { cursor: pointer; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.graphe-table .admin-tableau table { min-width: 0; }
@media (max-width: 599px) { .barres { gap: 2px; height: 180px; } .barre:nth-child(odd) .barre-mois { visibility: hidden; } .kpi { padding: 12px; } .kpi strong { font-size: 22px; } }

.jauges { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.jauges li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 15px; }
.jauge-val { font-weight: 700; }
.jauge { grid-column: 1 / -1; height: 10px; border: 1.5px solid var(--acc); border-radius: 5px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--acc); }
@media (forced-colors: active) { .seg-workshop, .marque-workshop, .jauge span { background: CanvasText; } .seg-pass, .marque-pass { background: repeating-linear-gradient(45deg, CanvasText 0 2px, Canvas 2px 6px); } }