/* Système de design partagé — Constar (connexion, inscription, espace pro).
   Même identité que la page d'accueil : ivoire chaud, vert pin, laiton,
   typographie géométrique serrée, radius resserré, ombres plates. */
:root{
  --paper:#F4F2EC; --card:#FBFAF6; --ink:#14201B; --muted:#63685F;
  --pine:#1E3A32; --pine-2:#2C5346; --brass:#B4823C; --line:#E4E0D6;
  /* Teintes de la barre du haut, reprises telles quelles de la page d'accueil
     pour que la vitrine et l'espace pro soient le même univers. */
  --fonce:#0E241D; --creme:#FAF6EE; --ambre:#E8B45A; --muted-clair:#A9BCAF;
  --line-sombre:rgba(250,246,238,.14);
  --danger:#8A2B34; --danger-bg:#F6E7E5;
  --ok:#1E5B3E; --ok-bg:#E7F0E7;
  --shadow:0 1px 2px rgba(20,32,27,.04), 0 8px 20px -12px rgba(20,32,27,.16);
  --shadow-float:0 2px 6px rgba(20,32,27,.06), 0 24px 44px -18px rgba(20,32,27,.28);
  --r:12px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink); overflow-x:hidden;
  font-family:"Inter", system-ui, -apple-system, sans-serif;
  font-size:16px; line-height:1.55; letter-spacing:-.006em; -webkit-font-smoothing:antialiased;
}
a{color:var(--pine); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight:600; letter-spacing:-.03em; line-height:1.1; margin:0}
.eyebrow{font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--brass); font-family:"Space Grotesk",sans-serif}

/* Barre du haut en vert profond, identique à l'en-tête de la page d'accueil :
   passer de la vitrine à l'espace pro ne doit pas donner l'impression de
   changer de site. Tout ce qu'elle contient repasse donc en clair. */
.appbar{position:sticky; top:0; z-index:20; background:rgba(14,36,29,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-sombre)}
.appbar-in{max-width:1080px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:.55em; font-family:"Space Grotesk",sans-serif; font-size:1.2rem; font-weight:700; letter-spacing:-.02em; color:var(--creme)}
.brand:hover{text-decoration:none}
/* Marque « sur la ligne » (public/icon.svg) posée devant le nom. Les arcs
   prennent la couleur du texte (currentColor) pour rester lisibles quel que
   soit le fond ; seul le point garde son or. */
.brand .mark{width:21px; height:21px; flex:none; display:block}
.brand .mark-dot{fill:var(--ambre)}
.appbar-actions{display:flex; align-items:center; gap:1rem; font-size:.92rem}
/* `:not(.btn)` est indispensable : sans lui, cette règle l'emporterait sur
   .btn-primary / .btn-ghost et repeindrait le texte des boutons. */
.appbar-actions a:not(.btn){color:var(--muted-clair)}
.appbar-actions a:not(.btn):hover{color:var(--creme); text-decoration:none}
/* Boutons de la barre : mêmes traitements que la navigation de la vitrine —
   pilule crème pour l'action principale, contour clair pour la secondaire. */
.appbar .btn{min-height:42px; padding:.5em 1.15em; font-size:.9rem}
.appbar .btn-primary{background:var(--creme); color:var(--fonce)}
.appbar .btn-primary:hover{background:#fff}
.appbar .btn-ghost{border-color:rgba(250,246,238,.3); color:var(--creme)}
.appbar .btn-ghost:hover{border-color:var(--creme); color:#fff}

.shell{max-width:1080px; margin:0 auto; padding:40px 24px 80px}
.narrow{max-width:460px; margin:0 auto; padding:56px 24px 80px}

.card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:30px}
.card + .card{margin-top:22px}

.pagehead{margin-bottom:28px}
.pagehead h1{font-size:clamp(1.7rem,3.2vw,2.3rem); margin-top:8px}
.pagehead p{color:var(--muted); margin-top:8px}

label{display:block; font-size:.86rem; font-weight:600; color:var(--ink); margin:16px 0 6px}
.hint{font-size:.8rem; color:var(--muted); margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=time],input[type=tel],select,textarea{
  width:100%; min-height:48px; padding:12px 13px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:1rem; font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pine); outline-offset:1px; border-color:var(--pine)}
textarea{min-height:90px; resize:vertical}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
/* Une case de grille ne descend pas sous la largeur de son contenu tant qu'on
   ne l'y autorise pas (min-width:auto par défaut). Sans ça, deux champs côte à
   côte — surtout des heures ou un email — poussent la colonne et débordent de
   la carte au lieu de se rétrécir. */
.row > *{min-width:0}
input,select,textarea{max-width:100%}
fieldset{border:1px solid var(--line); border-radius:var(--r); padding:18px 20px 22px; margin:0 0 20px}
legend{padding:0 8px; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:1rem; color:var(--pine)}

/* Dans un panneau de l'espace pro, la CARTE est déjà le cadre : le fieldset
   qu'elle contient ne doit pas redessiner une boîte dans la boîte. Sa bordure
   et sa marge intérieure rétrécissaient le contenu d'un cran, et le retrait de
   8 px du <legend> décalait le titre par rapport aux champs juste dessous. */
.panneau .card > fieldset{border:0; border-radius:0; padding:0; margin:0}
.panneau .card > fieldset > legend{padding:0; margin-bottom:4px; font-size:1.15rem}

/* Navigation de l'espace pro : une barre VERTICALE d'onglets à icônes, à
   gauche du contenu, et UN SEUL panneau visible à la fois. L'espace ne montre
   plus tout en même temps — le pro choisit ce qu'il vient faire (tarifs, voix,
   consignes…) au lieu de faire défiler huit cartes.

   Sans JavaScript, aucun panneau n'est masqué : tout s'affiche à la suite et
   la page reste entièrement utilisable (voir le <noscript> de la page). */
.espace-layout{display:grid; grid-template-columns:216px minmax(0,1fr); gap:24px; align-items:start}
.rail{position:sticky; top:18px; display:flex; flex-direction:column; gap:3px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:10px}
.rail-item{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:10px;
  border:0; background:none; color:var(--muted); font:inherit; font-size:.88rem; font-weight:600; text-align:left;
  cursor:pointer; transition:background .15s, color .15s}
.rail-icone{flex:none; width:1.5em; text-align:center; font-size:1.05rem}
.rail-item:hover{background:rgba(30,58,50,.06); color:var(--pine)}
.rail-item[aria-current="page"]{background:var(--pine); color:#F4F2EC}
/* Pastille d'alerte (étapes de mise en route restantes) sur l'entrée concernée. */
.rail-pastille{margin-left:auto; flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--brass); color:#fff; font-size:.7rem; font-weight:700; display:grid; place-items:center}
.rail-sep{height:1px; background:var(--line); margin:7px 4px}
.panneau[hidden]{display:none}
.panneau > .card:first-child{margin-top:0}

/* Barre de section : n'existe que sur téléphone, où la barre latérale ne peut
   pas rester affichée en permanence. */
.barre-mobile{display:none}

@media (max-width:860px){
  /* Neuf onglets ne tiennent pas côte à côte sur un téléphone : les faire
     défiler latéralement cache la moitié des sections, et on ne cherche pas
     ce qu'on ne voit pas. On passe donc à DEUX ÉCRANS — un menu en grille où
     tout est visible d'un coup, et la section choisie, seule — reliés par une
     barre collée en haut. C'est le va-et-vient habituel d'une application. */
  .espace-layout{grid-template-columns:minmax(0,1fr); gap:0}

  .barre-mobile{display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:40;
    margin-bottom:14px; padding:9px 12px; background:var(--card); border:1px solid var(--line);
    border-radius:12px; box-shadow:var(--shadow)}
  .barre-mobile button{flex:none; display:flex; align-items:center; gap:7px; border:0; background:none;
    font:inherit; font-size:.9rem; font-weight:700; color:var(--pine); cursor:pointer; padding:6px 2px}
  .barre-mobile .titre-section{min-width:0; font-family:'Space Grotesk',sans-serif; font-weight:700;
    color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  /* Le menu : des pastilles assez grandes pour le pouce, trois par ligne. */
  .rail{position:static; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px}
  .rail-item{position:relative; flex-direction:column; justify-content:center; gap:6px; min-height:86px;
    padding:10px 6px; border:1px solid var(--line); background:#fff;
    font-size:.72rem; text-align:center; line-height:1.15}
  .rail-icone{font-size:1.5rem; width:auto}
  .rail-pastille{position:absolute; top:6px; right:6px; margin:0}
  .rail-sep{display:none}

  /* Un seul des deux écrans à la fois. Ces règles n'existent que sous 860px :
     sur grand écran la classe « menu » est sans effet, la barre latérale et le
     panneau restent affichés ensemble.

     `js-onglets` n'est posée qu'une fois le script en place : si celui-ci
     échoue, on ne masque rien — mieux vaut une grille de sections inerte qu'un
     écran sans aucune navigation. */
  .espace-layout.js-onglets:not(.menu) .rail{display:none}
  .espace-layout.menu .panneau, .espace-layout.menu form{display:none}
}

.days{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.days label{display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); padding:8px 13px; border-radius:999px; margin:0; cursor:pointer; font-weight:500}
.days input{width:auto}

/* Ligne "prestation" (nom / prix / détail / supprimer) : flex, pas la grille
   .row à 2 colonnes qui masquait le champ prix. */
.prestation-row{display:flex; gap:10px; align-items:flex-start; margin-bottom:8px}
.prestation-row>div{margin-bottom:0}
.prestation-row input{width:100%}
.prestation-row .p-nom{flex:2 1 0; min-width:0}
.prestation-row .p-prix{flex:1 1 0; min-width:90px}
.prestation-row .p-detail{flex:2 1 0; min-width:0}
/* Ligne de FAQ : la réponse est toujours plus longue que la question, elle prend
   donc plus de place que dans une ligne de prestation. */
.prestation-row .p-reponse{flex:3 1 0; min-width:0}
.prestation-row .p-suppr{flex:none; min-height:48px; padding:0 14px; color:var(--danger)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:48px; font-weight:600; font-size:.98rem; white-space:nowrap;
  padding:.72em 1.4em; border-radius:999px; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:transform .15s, background .2s, box-shadow .2s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--pine); color:#F4F2EC}
.btn-primary:hover{background:var(--pine-2); transform:translateY(-1px)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--pine); color:var(--pine)}
.btn-block{display:flex; width:100%}
.btn-google{background:#fff; border-color:var(--line); color:#1f1f1f}
.btn-google:hover{border-color:#c9c9c9; box-shadow:0 1px 4px rgba(0,0,0,.12)}
.separateur-ou{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--muted); font-size:.85rem}
.separateur-ou::before, .separateur-ou::after{content:""; flex:1; height:1px; background:var(--line)}
:focus-visible{outline:2px solid var(--pine); outline-offset:3px}

.alert{padding:12px 15px; border-radius:11px; font-size:.92rem; margin-bottom:18px}
.alert-error{background:var(--danger-bg); border:1px solid rgba(138,43,52,.25); color:var(--danger)}
.alert-ok{background:var(--ok-bg); border:1px solid rgba(30,91,62,.25); color:var(--ok)}

.meta{display:flex; align-items:center; gap:.6em; font-size:.9rem; color:var(--muted)}
/* L'attribut `hidden` du HTML ne pose qu'un `display:none` de feuille par défaut :
   il est donc perdu dès qu'une classe impose un display (.btn, .pill, .alert…).
   Ce rappel le rétablit partout — sans lui, un bouton `hidden` reste visible. */
[hidden]{display:none !important}

.pill{display:inline-flex; align-items:center; gap:.4em; padding:.3em .8em; border-radius:999px; font-size:.82rem; font-weight:600}
.pill-ok{background:var(--ok-bg); color:var(--ok)}
.pill-wait{background:#F1ECE0; color:#8a6d33}

.foot-mini{max-width:1080px; margin:0 auto; padding:26px 24px; color:var(--muted); font-size:.85rem; border-top:1px solid var(--line)}

.actions-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:24px}
/* Les boutons sont en `white-space:nowrap` : un libellé long (« Revenir à une
   voix du catalogue ») déborde alors de l'écran sur un téléphone étroit, au lieu
   de passer à la ligne. À poser sur ces libellés-là plutôt que de les tronquer. */
.btn-wrap{white-space:normal; text-align:center}
.spacer{flex:1}

/* Widget de support flottant (au lieu d'un encart plein dans les réglages) :
   une bulle en bas à droite qui déplie la conversation avec l'équipe. Pur
   CSS — <details>/<summary> gère l'ouverture/fermeture, aucun JS requis. */
.support-widget{position:fixed; right:20px; bottom:20px; z-index:70}
.support-fab{list-style:none; width:56px; height:56px; border-radius:50%; background:var(--pine); color:#F4F2EC;
  display:grid; place-items:center; font-size:1.3rem; box-shadow:var(--shadow); cursor:pointer; user-select:none;
  transition:transform .15s, background .2s}
.support-fab::-webkit-details-marker, .support-fab::marker{display:none}
.support-fab:hover{background:var(--pine-2); transform:translateY(-1px)}
.support-fab .icon-open{display:none}
.support-widget[open] .support-fab .icon-closed{display:none}
.support-widget[open] .support-fab .icon-open{display:inline}
.support-badge{position:absolute; top:-2px; right:-2px; width:11px; height:11px; border-radius:50%; background:var(--brass); border:2px solid var(--paper)}

.support-panel{position:absolute; right:0; bottom:68px; width:min(340px, 88vw); max-height:min(70vh, 460px);
  background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden}
.support-panel-head{padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700; font-family:"Space Grotesk",sans-serif}
.support-thread{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px; min-height:80px}
.support-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); align-items:flex-end}
.support-form textarea{min-height:44px; margin:0}
.support-form .btn{min-height:44px; padding:.6em 1em}

@media (max-width:560px){
  .row{grid-template-columns:1fr}
  .card{padding:22px}
  .appbar-actions .hide-sm{display:none}
  /* Sur mobile : chaque champ de prestation passe pleine largeur (empilé). */
  .prestation-row{flex-wrap:wrap}
  .prestation-row .p-nom,.prestation-row .p-prix,.prestation-row .p-detail,.prestation-row .p-reponse{flex:1 1 100%}
  .support-widget{right:14px; bottom:14px}
  .support-panel{width:min(320px, 92vw)}
}