/*
 * L'ESPACE CLIENT ET L'ADMINISTRATION — l'ossature d'une application (colonne de navigation à
 * gauche, contenu à droite, sur le modèle de l'administration de Justcrazy), habillée de la charte
 * de la vitrine : fond coquille d'œuf, panneaux crème à anneau intérieur, pilules, titres fins,
 * nappes pastel seulement en accent. UNE SEULE CLARTÉ. Les jetons viennent de /charte.css (extraits
 * de site/styles.css) : ce fichier n'en déclare aucun.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 300; letter-spacing: -0.02em; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muet { color: var(--muted); }
.discret { color: var(--faint); font-size: 13px; }
.mono { font-family: var(--mono); font-size: 13px; }
[hidden] { display: none !important; }

/* ---------- Boutons en pilule ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--blanc); color: var(--text); text-decoration: none; white-space: nowrap;
  box-shadow: var(--ombre-douce), inset 0 0 0 1px var(--anneau); font-weight: 500;
  transition: background-color .15s, transform .1s;
}
.bouton:hover { background: var(--panneau); }
.bouton:active { transform: scale(.98); }
.bouton.plein { background: var(--encre); color: var(--encre-fg); box-shadow: none; }
.bouton.plein:hover { background: var(--encre-survol); }
.bouton.petit { height: 36px; padding: 0 14px; font-size: 14px; }
.bouton.danger { color: #9b1c1c; }
.bouton.danger.plein { background: #9b1c1c; color: #fff; }
.bouton[disabled], .bouton[aria-busy='true'] { opacity: .55; cursor: default; pointer-events: none; }
.bouton[aria-busy='true']::after {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.lien { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: var(--muted); }

/* ---------- Champs ---------- */
.champ { display: grid; gap: 6px; margin-bottom: 14px; }
.champ > span { font-size: 13px; font-weight: 500; color: var(--muted); }
.champ input, .champ select, .champ textarea {
  height: 46px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--line); width: 100%;
}
.champ textarea { height: auto; min-height: 90px; padding: 12px 16px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { box-shadow: inset 0 0 0 1.5px var(--text); outline: none; }
.champ small { color: var(--faint); font-size: 12.5px; }
.champ small.erreur, .erreur { color: #9b1c1c; }
.champ small.bon { color: #1d6b3a; }
.suffixe { display: flex; align-items: center; border-radius: 14px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--line); }
.suffixe input { box-shadow: none !important; background: transparent; }
.suffixe em { font-style: normal; color: var(--faint); padding-right: 16px; white-space: nowrap; }

/* ---------- Pages publiques : un panneau centré, dans l'esprit de la vitrine ---------- */
.public { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.public-barre { display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(16px, 4vw, 40px); }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; }
.marque img { width: 28px; height: 28px; }
.public-corps { display: grid; place-items: start center; padding: 12px 16px 48px; }
.carte-publique {
  width: min(560px, 100%); padding: clamp(24px, 5vw, 44px); border-radius: 32px; background: var(--panneau);
  box-shadow: inset 0 0 0 1px var(--anneau); position: relative; isolation: isolate;
}
.carte-publique.large { width: min(920px, 100%); }
.carte-publique::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background:
    radial-gradient(60% 70% at 0% 0%, var(--peche) 0, transparent 70%),
    radial-gradient(55% 65% at 100% 100%, var(--lilas) 0, transparent 70%);
  opacity: .75;
}
.carte-publique h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.08; margin-bottom: 10px; }
.carte-publique > p { color: var(--muted); margin: 0 0 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.public-pied { text-align: center; padding: 18px; color: var(--faint); font-size: 13px; }
.public-pied a { color: var(--muted); }

/* Choix de formule, à l'inscription et dans l'espace. */
.choix-formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.choix-formules.stockage { grid-template-columns: repeat(4, 1fr); }
.choix {
  position: relative; display: grid; gap: 2px; padding: 14px 14px 12px; border-radius: 18px; cursor: pointer;
  background: var(--blanc); box-shadow: inset 0 0 0 1px var(--line); text-align: left; border: 0;
}
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix b { font-weight: 600; }
.choix .prix { font-family: var(--titre); font-size: 22px; font-weight: 300; }
.choix small { color: var(--faint); font-size: 12.5px; }
.choix:has(input:checked), .choix[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--text); }
.choix.actuel::after { content: 'actuelle'; position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--muted); }

/* ---------- L'ossature connectée ---------- */
.coque { display: flex; min-height: 100dvh; }
.colonne {
  position: sticky; top: 0; height: 100dvh; width: 256px; flex-shrink: 0; overflow-y: auto;
  background: var(--panneau); box-shadow: inset -1px 0 0 var(--anneau);
  display: flex; flex-direction: column; gap: 20px; padding: 20px 12px;
}
.colonne .marque { padding: 0 10px; }
.groupe-titre { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 12px; margin: 0 0 6px; font-weight: 600; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 999px;
  text-decoration: none; color: var(--muted); font-weight: 500; font-size: 14.5px;
}
.nav a:hover { background: var(--panneau-2); color: var(--text); }
.nav a[aria-current='page'] { background: var(--blanc); color: var(--text); box-shadow: var(--ombre-douce), inset 0 0 0 1px var(--anneau); }
.nav svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav .pastille-nombre { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--encre); color: var(--encre-fg); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.colonne-pied { margin-top: auto; display: grid; gap: 8px; padding: 12px 6px 0; box-shadow: inset 0 1px 0 var(--line-soft); }
.qui { display: flex; gap: 10px; align-items: center; padding: 4px 6px; min-width: 0; }
.qui .initiale { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lilas); font-weight: 600; flex-shrink: 0; }
.qui div { min-width: 0; }
.qui b, .qui small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qui small { color: var(--faint); }

.contenu { flex: 1; min-width: 0; }
.barre-mobile {
  display: none; position: sticky; top: 0; z-index: 30; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); box-shadow: inset 0 -1px 0 var(--line-soft);
}
.bouton-rond { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--anneau); }
main.ecran { width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 64px; }

/* Le titre d'écran reste accroché en haut et se resserre quand on descend. */
.repere-titre { height: 1px; margin-bottom: -1px; }
.titre-ecran {
  position: sticky; top: 0; z-index: 20; margin: 0 calc(-1 * clamp(16px, 4vw, 40px)) 22px;
  padding: 6px clamp(16px, 4vw, 40px) 14px; background: var(--bg);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px;
  transition: padding .2s, box-shadow .2s;
}
.titre-ecran h1 { font-size: 34px; line-height: 1.1; transition: font-size .25s; }
.titre-ecran p { margin: 6px 0 0; color: var(--muted); max-width: 680px; }
.titre-ecran[data-compact='oui'] { padding-top: 10px; padding-bottom: 10px; box-shadow: inset 0 -1px 0 var(--line-soft); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
.titre-ecran[data-compact='oui'] h1 { font-size: 21px; }
.titre-ecran[data-compact='oui'] p { display: none; }
.titre-ecran .actions { margin: 0; }

/* Panneaux, cartes de chiffres, grilles */
.panneau { border-radius: 24px; background: var(--panneau); box-shadow: inset 0 0 0 1px var(--anneau); margin-bottom: 18px; overflow: hidden; }
.panneau-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; box-shadow: inset 0 -1px 0 var(--line-soft); }
.panneau-tete h2 { font-family: var(--sans); font-weight: 600; font-size: 15.5px; letter-spacing: 0; }
.panneau-corps { padding: 20px 22px; }
.panneau.nappe { isolation: isolate; position: relative; }
.panneau.nappe::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 90% at 0% 0%, var(--ciel) 0, transparent 70%), radial-gradient(45% 90% at 100% 100%, var(--menthe) 0, transparent 70%);
  opacity: .8;
}
.carte-blanche { border-radius: 18px; background: var(--blanc); box-shadow: var(--ombre-douce), inset 0 0 0 1px var(--anneau); padding: 16px 18px; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.chiffre { border-radius: 20px; background: var(--panneau); box-shadow: inset 0 0 0 1px var(--anneau); padding: 16px 18px; }
.chiffre span { display: block; font-size: 13px; color: var(--muted); }
.chiffre b { display: block; font-family: var(--titre); font-weight: 300; font-size: 30px; letter-spacing: -0.02em; margin-top: 4px; }
.chiffre small { color: var(--faint); }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lignes { display: grid; gap: 0; }
.ligne-info { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--line-soft); }
.ligne-info:last-child { box-shadow: none; }
.ligne-info > span:first-child { color: var(--muted); }
.ligne-info > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Pastilles d'état */
.etat { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--anneau); white-space: nowrap; }
.etat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.etat.ok::before { background: #23a35a; }
.etat.cours::before { background: #e08a1e; }
.etat.alerte::before { background: #c0392b; }

/* Bandeaux */
.bandeau { border-radius: 18px; padding: 14px 18px; margin-bottom: 18px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bandeau.alerte { background: #fbe9e7; box-shadow: inset 0 0 0 1px rgba(155, 28, 28, .18); }
.bandeau.info { background: var(--citron); box-shadow: inset 0 0 0 1px var(--anneau); }

/* Grand bloc « mon atelier » */
.atelier-adresse { font-family: var(--titre); font-weight: 300; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.etapes li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; padding: 9px 0; align-items: start; box-shadow: inset 0 -1px 0 var(--line-soft); }
.etapes li:last-child { box-shadow: none; }
.etapes .puce { width: 10px; height: 10px; border-radius: 50%; margin: 7px 0 0 6px; background: var(--faint); }
.etapes .erreur .puce { background: #c0392b; }
.etapes .alerte .puce { background: #e08a1e; }
.etapes li:first-child .puce { background: var(--text); }
.etapes time { color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.etapes p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.progression { height: 6px; border-radius: 999px; background: var(--panneau-2); overflow: hidden; margin: 14px 0 6px; }
.progression > div { height: 100%; background: var(--text); border-radius: inherit; transition: width .6s; }

/* Tableaux */
.tableau-defile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; white-space: nowrap; }
td { padding: 12px 14px; box-shadow: inset 0 1px 0 var(--line-soft); vertical-align: top; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover td { background: var(--panneau-2); }
.vide { padding: 28px 22px; color: var(--muted); text-align: center; }

/* Silhouette de chargement */
.chargement { padding: 40px; }
.squelette { height: 120px; border-radius: 24px; background: linear-gradient(90deg, var(--panneau) 0, var(--panneau-2) 50%, var(--panneau) 100%); background-size: 200% 100%; animation: luit 1.4s ease-in-out infinite; }
@keyframes luit { to { background-position: -200% 0; } }

/* Annonces (succès / erreur) */
#annonces { position: fixed; z-index: 100; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px); transform: translateX(-50%); display: grid; gap: 8px; width: min(520px, calc(100vw - 32px)); }
.annonce { padding: 12px 18px; border-radius: 16px; background: var(--encre); color: var(--encre-fg); box-shadow: 0 10px 30px -10px var(--ombre); animation: monte .2s ease-out; }
.annonce.erreur { background: #9b1c1c; }
@keyframes monte { from { transform: translateY(8px); opacity: 0; } }

/* Fenêtre de confirmation */
dialog { border: 0; border-radius: 28px; padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--bg); box-shadow: 0 30px 80px -20px var(--ombre), inset 0 0 0 1px var(--anneau); color: var(--text); }
dialog::backdrop { background: rgba(20, 15, 10, .32); }
dialog .dialogue { padding: 26px; }
dialog h2 { font-size: 26px; margin-bottom: 10px; }
dialog p { color: var(--muted); }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 1023px) {
  .colonne { position: fixed; z-index: 60; left: 0; top: 0; width: min(290px, 86vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: 20px 0 60px -20px var(--ombre); }
  .coque[data-menu='ouvert'] .colonne { transform: none; }
  .voile { position: fixed; inset: 0; z-index: 50; background: rgba(20, 15, 10, .28); }
  .barre-mobile { display: flex; }
  .titre-ecran { top: calc(env(safe-area-inset-top) + 61px); }
  .grille-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .choix-formules, .choix-formules.stockage { grid-template-columns: minmax(0, 1fr); }
  .titre-ecran h1 { font-size: 27px; }
  .panneau-corps { padding: 16px; }
  .panneau-tete { padding: 14px 16px; }
  .chiffre b { font-size: 24px; }
  td, th { padding: 10px; }
}