/* ============================================================
   OUI — ESPACE MEMBRE, ESPACE CABINET, BUREAU
   Teintes chaudes, Raleway, accent brun cuir. Aucun or.
   Les noms de variables n'ont pas changé : seules leurs
   valeurs ont bougé, pour que les pages qui les appellent
   (connexion, entreprise, admin) suivent sans retouche.
   ============================================================ */
:root{
  --papier:#E3D7C4;        /* le flanc, nettement plus foncé que la scène */
  --craie:#EDE4D5;         /* le fond de la scène */
  --bloc:#FBF6EC;          /* les blocs posés sur la scène */
  --encre:#2A1E16;
  --encre-doux:#3A2B20;
  --pierre:#6E5F50;        /* le texte secondaire */
  --sable:#7A5134;         /* ex-or, devenu brun cuir : l'accent */
  --terre:#3E2A1F;
  --filet:rgba(42,30,22,.16);
  --filet-fin:rgba(42,30,22,.08);
  --ease:cubic-bezier(0.19,1,0.22,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden;}
body{
  background:var(--craie); color:var(--encre);
  font-family:'Raleway','Avenir Next',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased;
  opacity:0; animation:fp .7s ease .05s forwards;
}
@keyframes fp{ to{ opacity:1 } }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input, textarea, select{ font-family:inherit; font-size:14.5px; color:inherit; }
img{ display:block; max-width:100%; }

.kick{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--pierre); font-weight:600; }
.mark{ font-size:15px; letter-spacing:.3em; text-transform:uppercase; font-weight:300; }

/* ── CONNEXION ─────────────────────────────────────────────── */
.auth{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-gauche{
  background:var(--papier); color:var(--encre);
  padding:clamp(44px,6.4vw,100px); display:flex; flex-direction:column; justify-content:space-between;
  border-right:1px solid var(--filet);
}
.auth-o{
  width:58px; height:58px; border-radius:50%; border:1px solid var(--filet);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:300; margin-bottom:clamp(36px,5vw,66px);
}
.auth-gauche h1{ font-size:clamp(30px,3.3vw,46px); font-weight:300; line-height:1.14; letter-spacing:-.01em; }
.auth-gauche p{ margin-top:22px; max-width:30ch; color:var(--pierre); font-size:14.5px; line-height:1.75; }
.auth-pied{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--pierre); font-weight:600; }

.auth-droite{ background:var(--craie); display:flex; align-items:center; justify-content:center; padding:clamp(32px,5vw,74px); }
.auth-boite{ width:100%; max-width:368px; background:var(--bloc); border:1px solid var(--filet);
  border-radius:8px; padding:clamp(26px,3vw,38px); }
.auth-boite h2{ font-size:25px; font-weight:600; margin:10px 0 30px; letter-spacing:-.015em; }

/* ── Champs ── */
.champ{ margin-bottom:22px; }
.champ label{ display:block; font-size:13px; font-weight:600; color:var(--pierre); margin-bottom:7px; letter-spacing:0; text-transform:none; }
.champ input, .champ select, .champ textarea{
  width:100%; padding:11px 13px; background:rgba(255,255,255,.6);
  border:1px solid var(--filet); border-radius:5px; line-height:1.6; resize:vertical;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.champ input:focus, .champ select:focus, .champ textarea:focus{
  outline:none; border-color:var(--encre); background:#FFF;
}
.champ input[disabled]{ color:var(--pierre); background:transparent; border-style:dashed; }
.champ textarea{ min-height:92px; }
.demande .champ{ margin-bottom:20px; }

/* ── Boutons ── */
.btn{
  width:100%; padding:14px 22px; background:var(--encre); color:var(--bloc);
  font-size:14.5px; font-weight:600; letter-spacing:0; text-transform:none; border-radius:5px;
  transition:opacity .3s var(--ease);
}
.btn:hover{ opacity:.85; }
.btn[disabled]{ opacity:.45; cursor:default; }
.btn-fin{
  width:100%; padding:13px; margin-top:10px;
  font-size:14px; color:var(--pierre); transition:color .3s var(--ease);
}
.btn-fin:hover{ color:var(--encre); }
.msg{ margin-top:18px; font-size:14px; line-height:1.6; color:var(--pierre); }
.msg.err{ color:#8E2F24; }
.msg.ok{ color:var(--sable); }

/* ── CHARPENTE DE L'ESPACE ─────────────────────────────────── */
.app{ display:grid; grid-template-columns:clamp(226px,18vw,268px) 1fr; min-height:100vh; }

.flanc{
  background:var(--papier); border-right:1px solid var(--filet);
  padding:30px 0 24px; display:flex; flex-direction:column;
}
.flanc-tete{ padding:0 24px 24px; }
.flanc-o{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--filet);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:300; margin-bottom:16px;
}
.flanc-tete .kick{ display:block; margin-top:7px; }
.qui{ margin-top:16px; font-size:24px; font-weight:300; letter-spacing:.005em; line-height:1.15; }

.onglets{ display:flex; flex-direction:column; gap:1px; padding:0 12px; }
.onglet{
  position:relative; text-align:left; padding:9px 12px; border-radius:4px;
  font-size:14.5px; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--pierre); transition:background .25s var(--ease), color .25s var(--ease);
}
.onglet:hover{ color:var(--encre); background:var(--filet-fin); }
.onglet.on{ color:var(--encre); font-weight:600; background:var(--bloc); box-shadow:inset 0 0 0 1px var(--filet-fin); }
.onglet.on::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:17px; border-radius:0 2px 2px 0; background:var(--sable); margin-left:0;
}
.sep{ height:1px; background:var(--filet-fin); margin:12px 24px; }

.flanc-pied{ margin:auto 12px 0; padding:16px 12px 0; border-top:1px solid var(--filet-fin); }
.flanc-pied .courriel{ font-size:12.5px; color:var(--pierre); word-break:break-all; line-height:1.5; }
.sortir{ margin-top:9px; font-size:13.5px; color:var(--pierre); transition:color .25s var(--ease); }
.sortir:hover{ color:var(--encre); }

/* ── LA SCÈNE ──────────────────────────────────────────────── */
.scene{ padding:36px clamp(22px,3.6vw,56px) 60px; width:100%; max-width:1560px; }
.vue{ display:none; }
.vue.on{ display:block; animation:monte .55s var(--ease) both; }
@keyframes monte{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.vue > .kick{ display:block; }
.vue h1{ font-size:clamp(28px,3.1vw,38px); font-weight:300; margin:6px 0 26px; letter-spacing:.005em; line-height:1.12; }

/* ── Le bloc : la brique de base ── */
.bloc{
  background:var(--bloc); border:1px solid var(--filet); border-radius:7px;
  padding:24px 26px; margin-bottom:15px;
}
.bloc-tete{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px; }
.bloc-tete h2{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--pierre); }
.titre-rang{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:32px 0 14px; }
.titre-rang h2{ font-size:25px; font-weight:300; letter-spacing:.005em; }

/* ── L'en-tête d'écran ────────────────────────────────────────
   Le salut à gauche, la date et l'heure de la prochaine
   prestation tout en haut à droite, dans deux cases carrées. */
.entete{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
  gap:22px; margin-bottom:26px;
}
.entete h1{ margin-bottom:0; }

.suivante{ display:block; }
.suivante .kick{ display:block; margin-bottom:12px; }
.suivante-t{ font-size:clamp(26px,3vw,36px); font-weight:300; line-height:1.08; letter-spacing:.005em; }
.suivante-q{ margin-top:11px; font-size:14.5px; color:var(--pierre); }
/* Gravée dans le mur : la typo prend la couleur du fond, une
   ombre au-dessus la creuse, une lumière en dessous la relève.
   Aucun cadre, aucun trait — elle fait partie de la surface. */
.quand-mur{
  flex:none; text-align:right; line-height:1; user-select:none;
  padding-top:2px;
}
.quand-mur .jour,
.quand-mur .ou{
  display:block; font-size:11px; letter-spacing:.3em; text-transform:uppercase; font-weight:600;
  color:rgba(42,30,22,.34);
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.quand-mur .ou{ margin-top:9px; color:rgba(42,30,22,.28); }
.quand-mur .hh{
  display:block; margin-top:9px;
  font-size:clamp(50px,5.6vw,78px); font-weight:200; line-height:.86;
  letter-spacing:-.015em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  color:#E6DCCB;
  text-shadow:
    0 -1px 1px rgba(42,30,22,.38),
    0  2px 0   rgba(255,255,255,.92),
    0  3px 3px rgba(42,30,22,.07);
}
/* Le tableau de bord, à la manière d'un panneau de gare :
   des colonnes égales, des filets verticaux, des chiffres alignés. */
.suivante-rien{ font-size:clamp(21px,2.4vw,28px); font-weight:300; color:var(--pierre); line-height:1.3; }
.suivante-rien small{ display:block; margin-top:14px; font-size:14px; line-height:1.7; max-width:44ch; }

/* La pastille d'état, à droite de la prestation */
.pastille{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--sable); border:1px solid var(--sable); border-radius:40px; padding:5px 14px; white-space:nowrap;
}
.pastille::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--sable); }

/* ── Compteurs ── */
.compteurs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); gap:1px;
  background:var(--filet); border:1px solid var(--filet); border-radius:7px;
  overflow:hidden; margin-bottom:15px; padding-top:0; border-top:1px solid var(--filet);
}
.compteur{ background:var(--bloc); padding:19px 22px; text-align:left; transition:background .25s var(--ease); }
button.compteur{ cursor:pointer; }
button.compteur:hover{ background:var(--craie); opacity:1; }
.compteur b{ display:block; font-size:31px; font-weight:300; line-height:.95; letter-spacing:.005em; }
.compteur span{ display:block; margin-top:8px; font-size:13.5px; letter-spacing:0; text-transform:none; color:var(--pierre); }

/* ── Listes ── */
.liste{ border-top:0; }
.ligne{
  display:grid; grid-template-columns:1fr 160px minmax(170px,auto); gap:20px; align-items:center;
  padding:15px 0; border-top:1px solid var(--filet-fin); border-bottom:0;
}
.ligne:first-child{ border-top:0; }
.ligne-t{ font-size:15.5px; font-weight:500; letter-spacing:0; }
.ligne-s{ font-size:13.5px; color:var(--pierre); margin-top:3px; }
.ligne-d{ font-size:13.5px; color:var(--pierre); }
.etat{ justify-self:end; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--pierre); white-space:nowrap; }
.etat.vert{ color:var(--sable); }

.vide{ padding:28px 0; font-size:15px; color:var(--pierre); font-weight:400; }
.chargement{ padding:28px 0; font-size:13.5px; letter-spacing:0; text-transform:none; color:var(--pierre); }

/* ── LA MAISON PROPOSE ─────────────────────────────────────── */
.vedette{
  position:relative; border-radius:7px; overflow:hidden; border:1px solid var(--filet);
  margin-bottom:15px; min-height:330px; display:flex; align-items:flex-end;
}
.vedette img, .vedette video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vedette::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(14,9,6,.9) 0%,rgba(14,9,6,.45) 45%,rgba(14,9,6,.05) 100%);
}
.vedette-txt{ position:relative; z-index:2; padding:30px 32px; color:#F7F2E9; max-width:620px; }
.vedette-q{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:#D2A982; }
.vedette-txt h3{ font-size:clamp(26px,3vw,36px); font-weight:300; margin:10px 0 9px; line-height:1.08; letter-spacing:.005em; }
.vedette-txt p{ font-size:14.5px; line-height:1.65; opacity:.9; max-width:48ch; }
.vedette-txt .agir{ margin:20px 0 0; padding-bottom:0; border-bottom:0; }

.propose{ display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:15px; }
.carte{
  background:var(--bloc); border:1px solid var(--filet); border-radius:7px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .35s var(--ease);
}
.carte:hover{ transform:translateY(-3px); }
.carte-img{ aspect-ratio:3/2; overflow:hidden; background:var(--filet-fin); }
.carte-img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.carte:hover .carte-img img{ transform:scale(1.04); }
.carte-corps{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.carte .quand{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--sable); font-weight:600; }
.carte h3{ font-size:21px; font-weight:300; margin:8px 0 7px; letter-spacing:.005em; line-height:1.18; }
.carte p{ font-size:14px; color:var(--pierre); line-height:1.6; flex:1; }
.carte .lien{ margin-top:18px; align-self:flex-start; }

/* Ancien format d'événement, conservé pour les pages qui s'en servent */
.evt{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--filet-fin); }
.evt-t{ font-size:18px; font-weight:400; letter-spacing:.005em; }
.evt-d{ font-size:14px; color:var(--pierre); margin-top:7px; line-height:1.65; }
.evt button{
  font-size:14px; font-weight:500; color:var(--encre);
  border:1px solid var(--filet); border-radius:5px; padding:10px 20px;
  transition:border-color .3s var(--ease);
}
.evt button:hover{ border-color:var(--encre); }
.evt button[disabled]{ color:var(--pierre); border-color:var(--filet-fin); cursor:default; }

/* ── Déposer une demande ── */
.demande{ margin-top:0; padding-top:0; border-top:0; max-width:640px; }
.demande h3{ font-size:21px; font-weight:300; margin-bottom:8px; letter-spacing:.005em; }
.demande p.sous{ font-size:14px; color:var(--pierre); margin-bottom:20px; line-height:1.7; }
.demande textarea{
  width:100%; min-height:120px; padding:12px 13px; background:rgba(255,255,255,.6);
  border:1px solid var(--filet); border-radius:5px; resize:vertical; line-height:1.7;
}
.demande textarea:focus{ outline:none; border-color:var(--encre); background:#FFF; }
.demande .btn{ margin-top:18px; width:auto; padding:13px 32px; }

/* La nature, la date et le lieu tiennent sur une ligne : le membre
   voit d'un coup ce qu'on lui demande, et ça ne ressemble plus à un
   formulaire administratif empilé. */
.demande-haut{
  display:grid; grid-template-columns:1.1fr .9fr 1fr; gap:18px;
  margin-bottom:4px;
}
.demande-haut .champ{ margin-bottom:16px; }
.demande-haut .aide{ margin-top:6px; font-size:12px; }
.demande .champ label{ font-size:12.5px; font-weight:500; }
.demande .champ select,
.demande .champ input{
  width:100%; padding:11px 12px; background:rgba(255,255,255,.6);
  border:1px solid var(--filet); border-radius:5px;
  /* même hauteur pour les trois : un sélecteur et un champ de date
     ne se mesurent pas pareil si on les laisse faire. */
  height:46px; box-sizing:border-box; line-height:1.2;
}
.demande .champ textarea{ height:auto; }
.demande .champ select:focus,
.demande .champ input:focus{ outline:none; border-color:var(--encre); background:#FFF; }
/* le sélecteur garde sa flèche : « appearance:none » la ferait disparaître */
.demande .champ select{ -webkit-appearance:menulist; appearance:menulist; cursor:pointer; }
.demande .champ input[type=date]{ -webkit-appearance:none; appearance:none; }

@media (max-width:760px){
  .demande-haut{ grid-template-columns:1fr; gap:0; }
}

.avis{
  margin-bottom:18px; padding:14px 16px; border-radius:6px;
  border:1px solid var(--filet); border-left:3px solid var(--sable);
  background:var(--bloc); font-size:14px; line-height:1.7; color:var(--pierre);
}

/* ── Actions ── */
.agir{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:15px; padding-bottom:0; border-bottom:0;
}
.lien{
  display:inline-block; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--bloc); background:var(--encre); border:1px solid var(--encre);
  padding:12px 22px; border-radius:5px; text-align:center;
  transition:opacity .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.lien:hover{ opacity:.85; background:var(--encre); color:var(--bloc); }
.lien.doux{ background:none; color:var(--encre); border-color:var(--filet); font-weight:500; }
.lien.doux:hover{ background:none; color:var(--encre); border-color:var(--encre); opacity:1; }
.lien.clair{ background:#FFF; color:#16110E; border-color:#FFF; }
.lien.sur-photo{ background:none; color:#F7F2E9; border-color:rgba(247,242,233,.45); font-weight:500; }
.lien.sur-photo:hover{ border-color:#F7F2E9; }
.lien[disabled]{ opacity:.45; cursor:default; }
.agir .note{ font-size:14px; color:var(--pierre); line-height:1.65; max-width:42ch; }
.agir + .compteurs{ border-top:1px solid var(--filet); padding-top:0; }

/* ── L'adhésion : la carte de la page Adhésion, sur son fond ──
   Même fond sombre #1B1512 que la page publique : le membre
   retrouve exactement l'écran sur lequel il a choisi. */
.formule{
  margin-top:0; border-top:0; text-align:center;
  background:#1B1512; border-color:rgba(245,241,234,.12);
  padding:clamp(34px,4vw,56px) clamp(22px,3vw,40px);
}
.formule .kick{
  display:block; margin-bottom:26px;
  color:#C08A5E; letter-spacing:.5em; font-size:10px; font-weight:500;
}
.formule-a{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.formule-m{ margin:18px auto 0; max-width:46ch; font-size:13.5px; color:#A1958A; }

/* Les boutons passent en clair-sur-sombre dans ce bloc */
.formule .lien.doux{
  background:none; color:var(--papier); border-color:rgba(245,241,234,.34);
  letter-spacing:.06em;
}
.formule .lien.doux:hover{ background:var(--papier); color:#1B1512; border-color:var(--papier); }
.formule .msg{ color:#A1958A; }

/* La carte elle-même — même objet que sur la page publique */
.carte-adh{
  width:100%; max-width:400px; margin:0 auto; text-align:left;
  display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
  background:#171311; border:1px solid rgba(245,241,234,.12);
  box-shadow:0 26px 60px rgba(0,0,0,.5);
}
.ca-im{ position:relative; height:152px; flex:none; }
.ca-im img{ width:100%; height:100%; object-fit:cover; display:block; }
.ca-im::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(23,19,17,.18) 0%,rgba(23,19,17,.55) 62%,#171311 100%);
}
.ca-sceau{
  position:absolute; top:14px; right:14px; z-index:2; padding:6px 12px; border-radius:999px;
  background:rgba(192,138,94,.95); color:#171311;
  font-size:8.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
}
.ca-tete{ padding:0 26px 20px; margin-top:-34px; position:relative; z-index:2; text-align:center; }
.ca-tete h3{
  font-weight:300; font-size:27px; letter-spacing:.2em; text-indent:.2em; text-transform:uppercase;
  color:#fff; line-height:1.1; text-shadow:0 3px 14px rgba(0,0,0,.9);
}
.ca-essence{
  margin-top:8px; font-size:10.5px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:#C08A5E;
}
.ca-lignes{ padding:4px 0 0; margin:0 26px; border-top:1px solid rgba(245,241,234,.1); }
.ca-l{
  min-height:66px; display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:9px 0; border-bottom:1px solid rgba(245,241,234,.07);
}
.ca-l:last-child{ border-bottom:none; }
.ca-l b{ font-size:8.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:#A1958A; }
.ca-l span{ font-size:13.5px; line-height:1.55; color:rgba(245,241,234,.92); font-weight:400; }
.ca-pied{
  margin:0 26px; padding:16px 0 24px; border-top:1px solid rgba(245,241,234,.1);
  font-size:12.5px; color:#A1958A; text-align:center;
}
.ca-pied b{ display:block; color:#F2EDE4; font-weight:500; font-size:14px; margin-top:3px;
  font-variant-numeric:tabular-nums; }
.ca-pied.alerte b{ color:#E3836F; }

/* ── Annuler, au bout d'une ligne ── */
.ligne-fin{ justify-self:end; display:flex; align-items:center; gap:16px; }
.annule{
  font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--pierre);
  border:1px solid transparent; border-radius:4px; padding:5px 10px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.annule:hover{ color:#8E2F24; border-color:#8E2F24; }
.annule[disabled]{ opacity:.5; cursor:default; }

/* ── Les demandes, sous les rendez-vous ── */
.bloc-demandes{ margin-top:15px; }
.bloc-demandes h3{ font-size:19px; font-weight:300; margin-bottom:6px; letter-spacing:.005em; }
.bloc-demandes .sous{ font-size:13.5px; color:var(--pierre); margin-bottom:16px; }
.bloc-demandes[hidden]{ display:none; }

/* ── Réglages ── */
.reglages{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:15px; max-width:900px; }
.reglages h3{ font-size:19px; font-weight:300; margin-bottom:20px; letter-spacing:.005em; }
.reglages .btn{ width:auto; padding:13px 30px; margin-top:4px; }
.reglages input[disabled]{ color:var(--pierre); border-style:dashed; }
.aide{ margin-top:9px; font-size:13px; color:var(--pierre); }

@media (max-width:900px){
  .app, .flanc, .scene, .onglets{ min-width:0; max-width:100%; }
  .scene{ overflow-x:hidden; padding:24px 18px 48px; }
  .auth{ grid-template-columns:1fr; }
  .auth-gauche{ min-height:36vh; border-right:0; border-bottom:1px solid var(--filet); }
  .app{ grid-template-columns:1fr; }
  .flanc{ padding:20px 0 14px; border-right:0; border-bottom:1px solid var(--filet); }
  .flanc-tete{ padding-bottom:18px; }
  .flanc-o{ display:none; }
  .onglets{ flex-direction:row; overflow-x:auto; padding:0 16px; gap:4px; }
  .onglet{ white-space:nowrap; }
  .onglet.on::before{ display:none; }
  .onglet.on{ box-shadow:inset 0 -2px 0 var(--sable); }
  .sep{ display:none; }
  .flanc-pied{ display:flex; align-items:center; gap:18px; margin:12px 16px 0; padding:14px 0 0; }
  .sortir{ margin-top:0; }
  .compteurs{ grid-template-columns:1fr 1fr; }
  .ligne{ grid-template-columns:1fr; gap:7px; }
  .etat, .ligne-fin{ justify-self:start; }
  .evt{ grid-template-columns:1fr; gap:16px; }
  .evt button{ justify-self:start; }
  .entete{ gap:10px; }
  .quand-mur{ text-align:left; }
  .quand-mur .hh{ font-size:clamp(44px,13vw,60px); margin-top:6px; }
  .agir .lien{ width:100%; }
  .agir .note{ max-width:none; }
  .formule-a{ flex-direction:column; }
  .formule-a .lien{ width:100%; }
  .vedette{ min-height:280px; }
  .vedette-txt{ padding:24px 22px; }
}

/* ============================================================
   LE SOUHAIT — la demande passe devant
   Un champ, cinq familles, et le détail qui s'ouvre seulement
   quand le membre a commencé à parler. L'écran dit ce qu'il
   sert à faire avant de dire ce qu'il contient.
   ============================================================ */
.souhait{ margin-bottom:clamp(26px,3vw,38px); }

.souhait-barre{
  display:flex; align-items:center; gap:14px;
  background:var(--bloc); border:1px solid var(--filet);
  border-radius:11px; padding:9px 9px 9px 20px;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.souhait-barre:focus-within{
  border-color:rgba(122,81,52,.45);
  box-shadow:0 0 0 4px rgba(122,81,52,.07), 0 10px 30px rgba(42,30,22,.05);
}
/* Le « + » n'est plus un ornement : c'est le bouton qui ouvre la nature. */
.souhait-type{ position:relative; flex:none; }
.type-bouton{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px 9px 11px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; background:transparent;
  font-family:inherit; font-size:13.5px; font-weight:400; color:var(--pierre);
  white-space:nowrap;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.type-bouton i{ font-style:normal; font-size:17px; font-weight:200; line-height:1; }
.type-bouton:hover{ background:rgba(42,30,22,.05); color:var(--encre); }
.type-bouton.choisi{
  background:var(--encre); border-color:var(--encre); color:var(--bloc); font-weight:500;
}
.type-bouton.choisi i{ font-size:13px; }

.type-menu{
  position:absolute; top:calc(100% + 9px); left:0; z-index:40;
  min-width:206px; padding:7px; border-radius:10px;
  background:var(--bloc); border:1px solid var(--filet);
  box-shadow:0 20px 48px rgba(42,30,22,.14);
  display:flex; flex-direction:column; gap:1px;
}
/* « display:flex » l'emporte sur la règle par défaut de [hidden] : sans
   cette ligne le menu ne se referme jamais. Même piège pour le détail. */
.type-menu[hidden]{ display:none; }
.souhait-detail[hidden]{ display:none; }
.type-menu button{
  text-align:left; padding:10px 13px; border:0; border-radius:6px; cursor:pointer;
  background:transparent; font-family:inherit; font-size:13.5px; font-weight:300;
  color:var(--encre); transition:background .22s ease;
}
.type-menu button:hover{ background:rgba(42,30,22,.055); }
.type-menu .type-vide{
  margin-top:5px; padding-top:11px; border-top:1px solid var(--filet-fin);
  border-radius:0 0 6px 6px; color:var(--pierre); font-size:12.5px;
}
.souhait-barre input{
  flex:1; min-width:0; border:0; background:transparent; padding:13px 0;
  font-size:16px; font-weight:300; color:var(--encre);
}
.souhait-barre input::placeholder{ color:var(--pierre); opacity:.85; }
.souhait-barre input:focus{ outline:none; }

.souhait-go{
  flex:none; display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border:0; border-radius:8px; cursor:pointer;
  background:var(--encre); color:var(--bloc);
  font-family:inherit; font-size:13.5px; font-weight:500; letter-spacing:.01em;
  transition:background .35s var(--ease), gap .35s var(--ease), opacity .3s ease;
}
.souhait-go i{ font-style:normal; font-size:12px; }
.souhait-go:hover{ background:var(--terre); gap:14px; }
.souhait-go[disabled]{ opacity:.5; cursor:default; }

/* Le détail ne s'impose pas : il se déplie. */
.souhait-detail{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height .5s var(--ease), opacity .4s ease, margin-top .4s var(--ease);
}
.souhait-detail.ouvert{ max-height:160px; opacity:1; margin-top:16px; }
.souhait-detail .champ{ margin-bottom:0; }
.souhait-detail label{
  display:block; font-size:12px; font-weight:500; color:var(--pierre);
  margin-bottom:6px; letter-spacing:0; text-transform:none;
}
.souhait-detail input{
  width:100%; height:44px; box-sizing:border-box; padding:11px 13px;
  background:var(--bloc); border:1px solid var(--filet); border-radius:7px;
  -webkit-appearance:none; appearance:none;
}
.souhait-detail input:focus{ outline:none; border-color:var(--encre); }

#msgSouhait:empty{ display:none; }
#msgSouhait{ margin-top:12px; }

/* Le compteur discret à côté du titre « À suivre ». */
.bloc-tete h2 .compte{
  margin-left:10px; font-size:12px; font-weight:400; letter-spacing:.14em;
  color:var(--pierre); font-variant-numeric:tabular-nums;
}

@media (max-width:720px){
  .souhait-barre{ flex-wrap:wrap; padding:14px; gap:10px; }
  .souhait-barre input{ flex:1 0 100%; padding:4px 0 10px; }
  .souhait-go{ width:100%; justify-content:center; }
  .type-bouton{ padding:8px 11px; font-size:12.5px; }
  .type-menu{ min-width:190px; }
  .souhait-detail{ grid-template-columns:1fr; }
  .souhait-detail.ouvert{ max-height:260px; }
}

/* ============================================================
   LES ENVIES — des cartes qui déclenchent une demande
   Aucun lieu n'est nommé : ce sont des intentions, pas un
   catalogue. Un rail qui défile, comme on feuillette.
   ============================================================ */
.envies{ margin-bottom:clamp(26px,3vw,38px); }
.envies-tete{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:14px;
}
.envies-glisse{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pierre); opacity:.55;
}

.envies-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(212px,1fr);
  gap:14px; overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
  scrollbar-color:var(--filet) transparent;
}
.envies-rail::-webkit-scrollbar{ height:5px; }
.envies-rail::-webkit-scrollbar-thumb{ background:var(--filet); border-radius:9px; }
.envies-rail::-webkit-scrollbar-track{ background:transparent; }

.envie{
  position:relative; scroll-snap-align:start; cursor:pointer;
  display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:3/4; padding:18px; border:0; border-radius:10px;
  overflow:hidden; text-align:left; font-family:inherit;
  background:var(--papier);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
/* L'image vit dans un calque à part : c'est lui qui bouge au survol,
   pas la carte — le texte reste net. */
.envie::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:var(--v); background-size:cover; background-position:center;
  transition:transform .9s var(--ease), filter .6s ease;
}
.envie::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,
    rgba(26,18,13,.88) 0%, rgba(26,18,13,.55) 32%, rgba(26,18,13,.08) 62%, transparent 100%);
}
.envie > *{ position:relative; z-index:2; }
.envie:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(42,30,22,.16); }
.envie:hover::before{ transform:scale(1.05); filter:brightness(1.05); }
.envie:focus-visible{ outline:2px solid var(--sable); outline-offset:3px; }

.envie-k{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(251,246,236,.72); margin-bottom:7px;
}
.envie-t{
  font-size:15.5px; line-height:1.4; font-weight:300; color:#FBF6EC;
  text-wrap:balance;
}

@media (max-width:720px){
  .envies-rail{ grid-auto-columns:minmax(168px,1fr); gap:11px; }
  .envie{ padding:14px; }
  .envie-t{ font-size:14px; }
  .envies-glisse{ display:none; }
}

/* ── Les jauges : une ligne de repères, pas un tableau de bord ── */
.jauges{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--filet-fin);
}
.jauge{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:7px 13px; border:0; border-radius:7px; cursor:pointer;
  background:transparent; font-family:inherit;
  font-size:13px; font-weight:300; color:var(--pierre);
  transition:background .3s ease, color .3s ease;
}
.jauge b{ font-size:14.5px; font-weight:500; color:var(--encre); font-variant-numeric:tabular-nums; }
.jauge:hover{ background:var(--bloc); color:var(--encre); }
/* ce qui réclame un geste se signale, le reste se tait */
.jauge.du b, .jauge.du{ color:var(--sable); }
.jauge.du b{ font-weight:600; }

/* la première ligne d'« À suivre » porte la prochaine prestation :
   elle n'a plus besoin de son bloc à elle. */
.liste .ligne:first-child .ligne-t{ font-weight:500; }

@media (max-width:620px){
  .jauges{ gap:2px; }
  .jauge{ padding:7px 10px; font-size:12.5px; }
}

/* ============================================================
   LE VOLET — la carte devient une porte
   ============================================================ */
body.fige{ overflow:hidden; }

.volet{ position:fixed; inset:0; z-index:200; display:flex; }
.volet[hidden]{ display:none; }
.volet-fond{
  /* Le voile couvre la page entière, menu compris. Léger, et le flou
     fait le travail : un rideau noir ferme la page, un voile la met
     à distance. */
  position:fixed; inset:0;
  background:rgba(42,30,22,.26);
  backdrop-filter:blur(9px) saturate(.92);
  -webkit-backdrop-filter:blur(9px) saturate(.92);
  opacity:0; transition:opacity .42s var(--ease);
}
.volet.ouvert .volet-fond{ opacity:1; }

.volet-boite{
  position:relative; margin:auto; z-index:1;
  width:min(900px, calc(100vw - 40px)); max-height:calc(100vh - 56px);
  display:grid; grid-template-columns:5fr 6fr;
  background:var(--bloc); border-radius:14px; overflow:hidden;
  box-shadow:0 44px 110px rgba(26,18,13,.4);
  opacity:0; transform:translateY(16px) scale(.985);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
.volet.ouvert .volet-boite{ opacity:1; transform:none; }

.volet-image{
  background-size:cover; background-position:center; min-height:380px;
}
.volet-corps{
  padding:clamp(26px,3vw,40px); overflow-y:auto;
  display:flex; flex-direction:column;
}

.volet-k{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sable); margin-bottom:12px;
}
.volet-t{
  font-size:clamp(22px,2.4vw,28px); font-weight:300; line-height:1.3;
  color:var(--encre); margin-bottom:24px; text-wrap:balance;
}
.volet-corps .champ{ margin-bottom:18px; }
.volet-corps label{
  display:block; font-size:12.5px; font-weight:500; color:var(--pierre);
  margin-bottom:7px; letter-spacing:0; text-transform:none;
}
.volet-corps textarea{
  width:100%; min-height:104px; box-sizing:border-box; padding:12px 13px;
  background:rgba(255,255,255,.6); border:1px solid var(--filet);
  border-radius:7px; resize:vertical; line-height:1.7; font-size:14.5px;
}
.volet-corps input{
  width:100%; height:46px; box-sizing:border-box; padding:11px 13px;
  background:rgba(255,255,255,.6); border:1px solid var(--filet);
  border-radius:7px; -webkit-appearance:none; appearance:none;
}
.volet-corps textarea:focus, .volet-corps input:focus{
  outline:none; border-color:var(--encre); background:#FFF;
}
.volet-deux{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.volet-corps .btn{ margin-top:6px; width:100%; }
#voletMsg:empty{ display:none; }
#voletMsg{ margin-top:12px; }

.volet-x{
  position:absolute; top:12px; right:14px; z-index:3;
  width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(251,246,236,.9); color:var(--encre);
  font-size:21px; line-height:1; font-family:inherit;
  transition:background .3s ease, transform .3s var(--ease);
}
.volet-x:hover{ background:#FFF; transform:rotate(90deg); }

@media (max-width:820px){
  .volet-boite{
    grid-template-columns:1fr; width:calc(100vw - 24px);
    max-height:calc(100vh - 32px);
  }
  .volet-image{ min-height:168px; }
  .volet-deux{ grid-template-columns:1fr; gap:0; }
}

/* ── Le bouton PDF d'une facture ── */
.ligne-fact .ligne-fin{ gap:14px; }
.pdf{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:7px; cursor:pointer;
  background:transparent; border:1px solid var(--filet);
  font-family:inherit; font-size:12.5px; font-weight:500; color:var(--encre);
  white-space:nowrap;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.pdf i{ font-style:normal; font-size:13px; opacity:.6; }
.pdf:hover{ background:var(--encre); border-color:var(--encre); color:var(--bloc); }
.pdf:hover i{ opacity:1; }
.pdf[disabled]{ opacity:.5; cursor:default; }
/* ── Une proposition à valider ──────────────────────────────
   Du verre posé sur une lueur. La lueur est là pour que la
   transparence ait quelque chose à montrer : flouter du crème
   sur du crème ne produit rien. Aucune animation — elle se
   détache par la profondeur, pas par le mouvement. */

.prop-zone{ position:relative; margin-bottom:clamp(22px,2.6vw,32px); isolation:isolate; }

/* La lueur, derrière le verre */
.prop-zone::before{
  content:''; position:absolute; inset:-18px -10px -24px; z-index:0; border-radius:26px;
  background:
    radial-gradient(42% 70% at 12% 24%, rgba(122,81,52,.30), transparent 70%),
    radial-gradient(38% 62% at 88% 76%, rgba(196,154,110,.26), transparent 72%),
    radial-gradient(30% 50% at 60% 8%,  rgba(227,215,196,.55), transparent 70%);
  filter:blur(14px);
}

.proposition{
  position:relative; z-index:1;
  background:rgba(251,246,236,.62);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.62);
  border-radius:16px;
  padding:clamp(26px,3vw,36px);
  /* le liseré clair en haut, c'est l'arête du verre ;
     l'ombre longue, c'est ce qui le décolle du fond. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(42,30,22,.05),
    0 2px 6px rgba(42,30,22,.04),
    0 26px 60px rgba(42,30,22,.16);
}
/* un reflet oblique, très faible, qui donne l'épaisseur */
.proposition::after{
  content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 38%);
}
.proposition > *{ position:relative; z-index:1; }

.prop-tete{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:15px; }
.prop-pastille{
  flex:none; padding:7px 14px; border-radius:100px;
  background:rgba(122,81,52,.92); color:#FBF6EC;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  box-shadow:0 4px 14px rgba(122,81,52,.28);
}
.proposition h2{ font-size:clamp(21px,2.3vw,27px); font-weight:300; line-height:1.28; margin:0 0 22px; }

.prop-releve{ width:100%; border-top:1px solid rgba(42,30,22,.1); margin-bottom:20px; }
.prop-releve td{ padding:12px 0; border-bottom:1px solid rgba(42,30,22,.08); font-size:14px; }
.prop-releve td:first-child{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--pierre); white-space:nowrap;
}
.prop-releve td:last-child{ text-align:right; color:var(--encre); }
.prop-releve .prix{ font-size:18px; font-weight:500; font-variant-numeric:tabular-nums; }

.prop-mot{
  padding:16px 19px; border-radius:9px; margin-bottom:24px;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.5);
  font-size:14px; line-height:1.75; color:var(--encre-doux); font-style:italic;
}
.prop-agir{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.prop-agir .btn{
  width:auto; padding:14px 32px; margin:0;
  box-shadow:0 10px 26px rgba(42,30,22,.22);
}
.prop-refus{
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:13.5px; color:var(--pierre); text-decoration:underline;
  text-underline-offset:4px; text-decoration-color:rgba(42,30,22,.25);
}
.prop-refus:hover{ color:var(--encre); }
.prop-delai{ margin-left:auto; font-size:12.5px; color:var(--pierre); }

/* Le flou n'existe pas partout : sans lui, on garde une carte
   opaque et nette plutôt qu'un voile sale. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .proposition{ background:var(--bloc); }
  .prop-zone::before{ opacity:.5; }
}
@media (max-width:620px){
  .prop-delai{ margin-left:0; width:100%; }
  .prop-zone::before{ inset:-10px -4px -14px; }
}
/* ── hidden l'emporte sur le flex/grid, ici aussi ── */
.prop-zone[hidden]{ display:none; }
#propMsg:empty{ display:none; }
#propMsg{ margin-top:14px; }

/* ── Les filtres de l'onglet Réservations ── */
.filtres{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.filtres button{
  padding:8px 15px; border-radius:100px; cursor:pointer;
  background:transparent; border:1px solid var(--filet);
  font-family:inherit; font-size:12.5px; font-weight:400; color:var(--pierre);
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.filtres button:hover{ color:var(--encre); border-color:rgba(42,30,22,.3); }
.filtres button.on{
  background:var(--encre); border-color:var(--encre); color:var(--bloc); font-weight:500;
}
/* le rail recopié respire au-dessus du pied de page */
#enviesResa{ margin-top:clamp(30px,3.4vw,44px); }
#enviesResa[hidden]{ display:none; }
/* le bouton de l'en-tête reste discret */
.entete #versSouhait{ flex:none; font-size:13px; }

/* ── L'accès au Bureau, en tête du menu ── */
.vers-bureau{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 16px; padding:11px 14px; border-radius:8px;
  background:var(--encre); color:var(--bloc);
  font-size:12.5px; font-weight:500; letter-spacing:.02em;
  transition:background .3s ease, gap .3s var(--ease);
}
.vers-bureau i{ font-style:normal; font-size:11px; opacity:.7; }
.vers-bureau:hover{ background:var(--terre); }
.vers-bureau:hover i{ opacity:1; }
.vers-bureau[hidden]{ display:none; }

/* ── Le solde du cabinet, en bandeau ── */
.solde{
  display:flex; align-items:center; flex-wrap:wrap; gap:clamp(22px,3vw,48px);
  margin-bottom:clamp(24px,2.8vw,36px);
  padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,34px);
  background:var(--bloc); border:1px solid var(--filet); border-radius:9px;
}
.solde-chiffre{ flex:none; }
.solde-chiffre .kick{ display:block; margin-bottom:8px; }
.solde-n{ font-size:clamp(40px,4.6vw,58px); font-weight:200; line-height:.95; letter-spacing:-.02em; }
.solde-n small{ font-size:15px; font-weight:300; color:var(--pierre); margin-left:10px; letter-spacing:0; }
.solde-milieu{ flex:1; min-width:220px; }
.solde-d{ margin-top:14px; display:flex; flex-wrap:wrap; gap:0 38px; font-size:12.5px; color:var(--pierre); line-height:1.8; }
.solde-d b{ display:block; font-weight:400; color:var(--encre); font-size:14px; }
.solde-d .et{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.solde #btnPack{ flex:none; }
.solde .alerte, .solde .rien{ flex-basis:100%; margin:0; }
@media (max-width:760px){
  .solde{ gap:18px; } .solde-milieu{ flex-basis:100%; } .solde #btnPack{ width:100%; }
}