/* L'espace client : seulement la mise en page qui lui est propre. Tout le
   reste (couleurs, polices, champs, boutons, liens en bloc, tableaux) vient
   du design system (ds/css/synaps.css). Aucune valeur en dur : des tokens. */

.espace { min-height: 100vh; }

.espace__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gouttiere);
  max-width: calc(var(--largeur-fenetre) + 2 * var(--pad-x));
  margin: 0 auto;
  padding: 22px var(--pad-x);
}

.espace__page {
  max-width: calc(var(--largeur-fenetre) + 2 * var(--pad-x));
  margin: 0 auto;
  padding: clamp(24px, 6vw, 72px) var(--pad-x) var(--marge-section);
}
/* les pages du client tiennent dans 7 des 12 colonnes de la fenêtre (la place
   du titre dans un panneau du design system), alignées sur la marque ; au
   téléphone, toute la largeur */
.espace__colonne { max-width: calc((var(--largeur-fenetre) - 11 * var(--gouttiere)) * 7 / 12 + 6 * var(--gouttiere)); }
.espace__colonne > .titre-section { max-width: 22ch; }
.espace__texte { margin-bottom: 28px; }
.espace__note { margin-top: 32px; }
.espace__note a { color: var(--accent-text); }

.espace__site + .espace__site { margin-top: 36px; }
.espace__site > .sous-titre { margin-bottom: 14px; }
.espace__site > .sous-titre:has(+ .espace__domaine) { margin-bottom: 4px; }
.espace__domaine { margin-bottom: 14px; }

/* le code : la phrase d'aide se colle au champ, comme une erreur */
.formulaire > .note { margin-top: -8px; }

/* ---------- l'accueil : une carte par service ----------
   Les cartes du design system (.carte), plus basses que sur synaps.re : un
   espace où l'on vient chercher un service, pas une vitrine. Trois par
   rangée, deux sur tablette, une au téléphone ; jamais de ligne orpheline
   (docs/principes.md) : sur six colonnes, une carte en prend deux, et la
   dernière rangée se partage la largeur (deux cartes : trois colonnes
   chacune ; une carte : toute la largeur). */
.espace__titre { max-width: 22ch; margin-bottom: clamp(28px, 3.4vw, 44px); }
.espace__cartes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gouttiere); }
.espace__cartes > * { grid-column: span 2; }
.espace__cartes > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.espace__cartes > :nth-last-child(2):nth-child(3n + 1),
.espace__cartes > :last-child:nth-child(3n + 2) { grid-column: span 3; }
@media (max-width: 1000px) {
  .espace__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .espace__cartes > *,
  .espace__cartes > :nth-last-child(2):nth-child(3n + 1),
  .espace__cartes > :last-child:nth-child(3n + 2) { grid-column: auto; }
  .espace__cartes > :last-child:nth-child(3n + 1) { grid-column: auto; }
  .espace__cartes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .espace__cartes { grid-template-columns: minmax(0, 1fr); }
  .espace__cartes > :last-child:nth-child(odd) { grid-column: auto; }
}
.espace__carte { min-height: clamp(330px, 27vw, 370px); }
/* au téléphone, neuf cartes l'une sous l'autre : plus basses, la page reste courte */
@media (max-width: 640px) { .espace__carte { min-height: 290px; } }
.espace__carte .carte__titre { font-size: clamp(20px, 1.6vw, 24px); font-weight: 700; }
.espace__carte .carte__texte { font-size: 15px; }
.espace__carte .carte__prix { font-size: 15px; }
.espace__carte-form { display: flex; margin: 0; }
.espace__carte-form > .carte { flex: 1 1 auto; width: 100%; }
/* les catégories : Mon site, Mes modules, Mon abonnement ; un titre en deux
   tons au-dessus de chaque grille, le même écart entre elles */
.espace__categorie + .espace__categorie { margin-top: clamp(48px, 5.5vw, 72px); }
.espace__categorie-titre { margin: 0 0 clamp(16px, 1.8vw, 24px); }
/* l'abonnement, seul sur sa ligne : une carte plus basse */
.espace__carte--basse { min-height: 260px; }

/* ---------- les fenêtres ----------
   La petite interface de la carte, en grand, dans un panneau de visuel. */
/* plus bas que le panneau du design system (420 px) : les petites interfaces
   y restaient à moitié vides */
.espace-visuel { position: relative; min-height: 0; height: 320px; }
@media (max-width: 760px) { .espace-visuel { height: 260px; } }
.espace-visuel .sv { position: absolute; inset: 0; width: auto; translate: none; font-size: 15px; }
.sv--grand .interface, .sv--grand .sv-fen, .sv--grand .sv-pile { left: 50%; right: auto; width: min(460px, 84%); transform: translateX(-50%); }
.sv--grand .sv-demande { right: calc(50% - min(230px, 42%)); }
.sv--grand .sv-notif { right: calc(50% - min(300px, 46%)); }
.espace-ajout { display: grid; gap: 40px; }
/* la carte de réservation est un conteneur de requêtes : sans largeur
   donnée, centrée par ses marges dans une grille, elle tombait à 0 px */
.espace-ajout .reservation { width: 100%; }
/* l'assistant des rendez-vous : un titre, puis le chat dans un cadre qui
   prend la hauteur de la fenêtre */
.espace-assistant .fenetre__contenu { gap: 24px; padding-bottom: 48px; }
.espace-assistant__haut p { max-width: 56ch; margin: 12px 0 0; color: var(--ink-60); }
.espace-assistant__cadre { display: block; width: 100%; height: min(70vh, 720px); border: 1px solid var(--filet-carte); border-radius: var(--rayon-panneau); background: var(--blanc); }
@media (max-width: 760px) { .espace-assistant__cadre { height: 72vh; } }

/* ---------- les visuels des cartes ----------
   De petites interfaces du design system (.interface, .notif, .bulle, la
   fenêtre de verre .navigateur), posées en bas de la carte et coupées par
   son bord, comme chez Stripe. Au repos, tout est là ; au survol (ou quand
   la carte est à l'écran au téléphone : .carte--active), elles s'avancent
   et ce qui vient d'arriver apparaît. Pas d'inclinaison : elles portent du
   texte (Zen le perdait, principes). */
/* sur une carte large (seule sur sa ligne), la scène garde la largeur d'une
   carte, au milieu : les interfaces ne s'étirent pas sur 1 100 px */
.sv { top: 0; bottom: 0; left: 50%; width: min(100%, 440px); translate: -50% 0; display: block; font-size: 13px; line-height: 1.35; color: var(--ink); text-wrap: wrap; }
.sv > * { position: absolute; transition: transform var(--duree-scene) var(--ease-sortie), opacity var(--duree-entree) ease; }
.espace__carte:is(:hover, :focus-visible, .carte--active) .sv > * { transform: translateY(-6px); }
.sv-petit { display: block; font-size: 12px; color: var(--ink-60); }
.sv-petit-titre { display: block; margin-bottom: 10px; font-family: var(--title-font); font-size: 14px; font-weight: 700; }
.sv-traits { display: grid; gap: 6px; margin: 10px 0; }
.sv-traits i { display: block; height: 7px; border-radius: var(--rayon-pastille); background: rgba(20, 17, 15, 0.08); }
.sv-l40 { width: 40%; } .sv-l50 { width: 50%; } .sv-l55 { width: 55%; } .sv-l70 { width: 70%; }
.sv-l75 { width: 75%; } .sv-l80 { width: 80%; } .sv-l85 { width: 85%; } .sv-l90 { width: 90%; }
.sv-mini-actions { display: flex; gap: 6px; margin-top: 12px; }
.sv-mini { padding: 6px 10px; border: 1px solid var(--filet-bouton); border-radius: var(--rayon-bouton); font-size: 11.5px; font-style: normal; font-weight: 600; white-space: nowrap; }
.sv-mini--plein { border-color: var(--orange); background: var(--orange); color: var(--blanc); }
/* ce qui arrive : caché au repos sur ordinateur, il glisse au survol ; au
   téléphone, quand la carte est à l'écran */
.sv .sv-arrive { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease 0.15s, transform 0.7s var(--ease-sortie) 0.15s; }
.espace__carte:is(:hover, :focus-visible, .carte--active) .sv .sv-arrive { opacity: 1; transform: none; }

/* la fenêtre de verre : un site, sa version d'essai */
.sv-fen { left: 9%; right: 9%; top: 14px; bottom: -40px; }
/* la barre de la fenêtre se mesure en cqi : dans une carte étroite, son
   adresse devenait illisible ; ici, des tailles fixes */
.sv-fen .navigateur__barre { gap: 5px; padding: 8px 4px; }
.sv-fen .navigateur__barre i { width: 6px; height: 6px; }
.sv-fen .navigateur__url { width: 62%; margin-left: 8%; padding: 2px 10px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-page { display: block; flex: 1 1 auto; padding: 14px 16px; }
.sv-entete { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.sv-entete b { margin-right: auto; font-family: var(--title-font); font-size: 12px; }
.sv-entete i { width: 26px; height: 5px; border-radius: var(--rayon-pastille); background: rgba(20, 17, 15, 0.12); }
.sv-accroche { display: block; max-width: 16ch; font-family: var(--title-font); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sv-boutons { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-bouton { padding: 6px 10px; border-radius: var(--rayon-bouton); background: var(--ink); color: var(--paper); font-size: 11px; font-style: normal; font-weight: 600; }
.sv-bouton--clair { border: 1px solid var(--filet-bouton); background: transparent; color: var(--ink); }
.sv-fen--essai .navigateur__url { color: var(--accent-text); }
.sv-surligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px -6px; padding: 6px; border-radius: var(--rayon-champ); box-shadow: 0 0 0 1.5px var(--orange); font-weight: 700; }

/* modifier : la demande, puis ce qui change */
.sv-demande { top: 18px; right: 8%; max-width: 72%; font-size: 13px; }
.sv-change { left: 8%; right: 14%; bottom: -14px; padding: 14px 16px 26px; }
.sv-avant-apres { display: block; font-size: 14px; }
.sv-avant-apres s { color: var(--ink-60); }
.sv-avant-apres b { color: var(--accent-text); }

/* les statistiques : le chiffre du mois et sa courbe, qui se trace au survol */
.sv-stats { left: 8%; right: 8%; top: 18px; bottom: -20px; padding: 14px 16px; }
.sv-chiffre { display: block; margin-top: 2px; font-family: var(--title-font); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.sv-chiffre small { font-family: var(--body-font); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-60); }
.sv-hausse { position: absolute; top: 16px; right: 16px; padding: 2px 8px; border-radius: var(--rayon-pastille); background: var(--orange-voile); color: var(--accent-text); font-size: 12px; font-weight: 700; }
.sv-courbe { position: absolute; left: 0; right: 0; bottom: 20px; width: 100%; height: 45%; }
.sv-courbe__aire { fill: var(--orange-voile); }
.sv-courbe__trait { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sv-notif { right: 5%; bottom: 26%; }
.sv-stats + .sv-notif { right: 3%; bottom: 8%; }
@media (prefers-reduced-motion: no-preference) {
  .espace__carte:is(:hover, .carte--active) .sv-courbe__trait { stroke-dasharray: 100; animation: sv-trace 1.4s var(--ease-sortie) both; }
}
@keyframes sv-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* les messages : une pile, le dernier arrive */
.sv-pile { left: 10%; right: 10%; top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sv-pile .notif { max-width: 100%; white-space: normal; }
.sv-pile .notif:nth-child(2) { margin-left: 8%; }
.sv-pile .notif__icone { flex: none; }

/* les rendez-vous : le jour, ses heures ; le dernier vient d'être pris */
.sv-agenda { left: 9%; right: 9%; top: 16px; bottom: -16px; padding: 14px 16px; }
.sv-heure { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 30px; border-top: 1px solid var(--filet-doux); }
.sv-heure > i { font-size: 11.5px; font-style: normal; color: var(--ink-60); }
.sv-rdv { display: block; padding: 4px 8px; border-left: 3px solid var(--orange); border-radius: 4px; background: var(--orange-voile); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-rdv--clair { border-left-color: var(--filet-bouton); background: rgba(20, 17, 15, 0.05); }

/* les séjours : les nuits demandées, la réponse */
.sv-sejour { left: 9%; right: 9%; top: 18px; bottom: -16px; padding: 14px 16px; }
.sv-dates { display: flex; gap: 4px; margin-bottom: 10px; }
.sv-dates i { flex: 1 1 0; padding: 7px 0; border-radius: var(--rayon-champ); background: rgba(20, 17, 15, 0.05); font-size: 12px; font-style: normal; font-weight: 600; text-align: center; }
.sv-dates .sv-pris { background: var(--orange); color: var(--blanc); }
.espace__carte:is(:hover, .carte--active) .sv-dates .sv-pris { animation: sv-pris 0.5s var(--ease-sortie) both; }
.sv-dates .sv-pris + .sv-pris { animation-delay: 0.08s; }
.sv-dates .sv-pris + .sv-pris + .sv-pris { animation-delay: 0.16s; }
@keyframes sv-pris { from { opacity: 0.3; transform: translateY(4px); } }

/* la newsletter : la lettre, et qui l'a ouverte */
.sv-lettre { left: 9%; right: 16%; top: 16px; bottom: -20px; padding: 14px 16px; }
.sv-objet { display: block; margin: 4px 0 10px; font-family: var(--title-font); font-size: 15px; }
.sv-photo { display: block; height: 54px; border-radius: var(--rayon-champ); background: var(--degrade-peche); }

/* l'abonnement : les factures, payées */
.sv-factures { left: 9%; right: 9%; top: 18px; bottom: -16px; padding: 14px 16px; }
.sv-facture { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--filet-doux); font-size: 12.5px; }
.sv-facture i { font-style: normal; font-weight: 600; }
.sv-paye { color: var(--accent-text); }
.sv-paye::before { content: "✓ "; }

@media (prefers-reduced-motion: reduce) {
  .sv > *, .sv .sv-arrive { transition: none; }
  .espace__carte:is(:hover, :focus-visible, .carte--active) .sv > * { transform: none; }
}

/* la version d'essai, sur un poste */
.espace__essai { margin: 0 0 24px; }
.formulaire + .espace__essai { margin-top: 40px; }
.espace__comptes-essai { display: flex; flex-wrap: wrap; gap: var(--ecart-boutons); }
.espace__comptes-essai form { margin: 0; }

/* « Recevoir un autre code » et « Changer d'adresse » */
.espace__suite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 24px; font-size: var(--taille-note); }
.espace__suite form { margin: 0; }

/* un bouton qui se lit comme un lien du texte */
.lien-texte {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.lien-texte:hover { color: var(--ink); }
.barre__sortie { margin: 0; font-size: var(--taille-note); }

/* l'administrateur voit l'espace d'un client */
.bandeau-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  padding: 10px var(--pad-x);
  background: var(--orange-voile);
  font-size: var(--taille-note);
}
.bandeau-admin p, .bandeau-admin form { margin: 0; }

/* ---------- l'administration ---------- */
.espace__page:has(.admin__bloc) { max-width: calc(var(--largeur-contenu) + 2 * var(--pad-x)); }
.admin__bloc { margin-top: 56px; }
.admin__bloc > .sous-titre { margin-bottom: 16px; }
.admin__titre-form { margin: 32px 0 16px; font-size: var(--taille-carte); }
.admin__tableau { margin-bottom: 8px; }
.admin__sous { display: block; font-weight: 400; color: var(--ink-60); font-size: var(--taille-note); }
.admin__actions { white-space: nowrap; }
.admin__actions form { display: inline; margin: 0 0 0 14px; }
.admin__journal td { font-size: var(--taille-note); }
.admin__formulaire fieldset { display: grid; gap: 8px; }
.admin__aide { max-width: 62ch; margin-top: 14px; }
.admin__aide a { color: var(--accent-text); }
@media (max-width: 760px) {
  .admin__actions form { display: block; margin: 8px 0 0; }
  .admin__journal { display: block; overflow-x: auto; }
}