/* ============================================================
   RDV-STYLE.CSS — design system du module rendez-vous
   Portail client : papier chaud, cuivre, Playfair Display
   Admin : application à barre latérale espresso, finitions premium
   Modifié le 2026-06-14 16:16:13
   ============================================================ */
:root{
  --papier:#F7F3EC; --carte:#FFFFFF;
  --encre:#261D14; --encre-2:#8A795F; --encre-3:#B5A78F;
  --cuivre:#C08552; --cuivre-clair:#D9A678; --cuivre-fonce:#5C3520;
  --lin:#EDE4D7; --lin-2:#F5EFE5; --creme:#FDFBF7;
  --vert:#4E7D5B; --vert-pale:#EAF2EC;
  --rouge:#B0492F; --rouge-pale:#F9ECE7;
  --ardoise:#4E6E8E;
  --espresso:#241B11; --espresso-2:#2F2415; --espresso-trait:#3D3122;
  --rayon:16px; --rayon-s:10px;
  --ombre:0 1px 2px rgba(38,29,20,.05),0 10px 30px rgba(38,29,20,.07);
  --ombre-haute:0 2px 6px rgba(38,29,20,.08),0 24px 60px rgba(38,29,20,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Lato',sans-serif;background:var(--papier);color:var(--encre);min-height:100vh;line-height:1.6;font-size:15.5px}
h1,h2,h3{font-family:'Playfair Display',serif;color:var(--cuivre-fonce);font-weight:600;letter-spacing:.01em}
h2{font-size:1.45rem}
button{font-family:'Lato',sans-serif;cursor:pointer;border:none;font-size:.95rem}
::selection{background:var(--cuivre);color:#fff}

/* ---------- Champs ---------- */
input,select,textarea{font-family:'Lato',sans-serif;font-size:.97rem;width:100%;padding:.68rem .95rem;border:1px solid var(--lin);border-radius:var(--rayon-s);background:var(--creme);color:var(--encre);transition:border-color .15s, box-shadow .15s, background .15s}
input:hover,select:hover,textarea:hover{border-color:#DCCFBB}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cuivre);background:#fff;box-shadow:0 0 0 3.5px rgba(192,133,82,.16)}
input[type=date],input[type=time]{min-height:42px}
input[type=color]{padding:.25rem;height:42px;cursor:pointer}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--cuivre);cursor:pointer}
input[type=file]{background:transparent;border:1.5px dashed var(--lin);padding:.6rem}
input::placeholder,textarea::placeholder{color:var(--encre-3)}
label{display:block;font-size:.72rem;font-weight:700;color:var(--encre-2);margin:1rem 0 .35rem;text-transform:uppercase;letter-spacing:.09em}
textarea{resize:vertical;min-height:96px;line-height:1.5}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A795F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.3rem}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:linear-gradient(180deg,var(--cuivre-clair),var(--cuivre));color:#fff;font-weight:700;padding:.66rem 1.45rem;border-radius:999px;transition:transform .12s, box-shadow .12s, filter .12s;text-decoration:none;text-align:center;box-shadow:0 1px 2px rgba(92,53,32,.25),inset 0 1px 0 rgba(255,255,255,.25);letter-spacing:.01em}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 4px 12px rgba(92,53,32,.28),inset 0 1px 0 rgba(255,255,255,.25)}
.btn:active{transform:translateY(0)}
.btn.secondaire{background:#fff;color:var(--cuivre-fonce);border:1px solid #DCCBB4;box-shadow:0 1px 2px rgba(38,29,20,.06)}
.btn.secondaire:hover{background:var(--lin-2);filter:none}
.btn.danger{background:#fff;color:var(--rouge);border:1px solid #E5C2B5;box-shadow:0 1px 2px rgba(38,29,20,.06)}
.btn.danger:hover{background:var(--rouge-pale);filter:none}
.btn.vert{background:linear-gradient(180deg,#5E8F6C,var(--vert))}
.btn.petit{padding:.4rem .95rem;font-size:.82rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.pleine{width:100%}
.lien{background:none;color:var(--cuivre-fonce);text-decoration:underline;text-underline-offset:3px;font-size:.88rem;padding:0}
.lien:hover{color:var(--cuivre)}

/* ---------- Cartes & messages ---------- */
.carte{background:var(--carte);border:1px solid rgba(38,29,20,.055);border-radius:var(--rayon);box-shadow:var(--ombre);padding:1.6rem 1.7rem;margin-bottom:1.15rem}
.carte h2{margin-bottom:.35rem}
.erreur{background:var(--rouge-pale);color:var(--rouge);border:1px solid #EDD2C7;border-radius:var(--rayon-s);padding:.7rem 1rem;margin:.8rem 0;font-size:.92rem;display:none}
.succes{background:var(--vert-pale);color:var(--vert);border:1px solid #CFE2D4;border-radius:var(--rayon-s);padding:.7rem 1rem;margin:.8rem 0;font-size:.92rem;display:none}
.cache{display:none!important}
.centre{text-align:center}
.note{font-size:.86rem;color:var(--encre-2)}
hr{border:none;border-top:1px solid var(--lin);margin:1.3rem 0}

/* ============================================================
   PORTAIL CLIENT
   ============================================================ */
body:not(.admin) header{background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--lin);padding:1.05rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;position:sticky;top:0;z-index:20}
body:not(.admin) header h1{font-size:1.55rem}
header .sous{font-size:.92rem;color:var(--encre-2);letter-spacing:.01em;line-height:1.4}
header .sous-2{display:block;font-size:.8rem;color:var(--encre-2);opacity:.78;margin-top:.1rem;letter-spacing:.02em}
body:not(.admin) nav{display:flex;gap:.4rem;flex-wrap:wrap}
body:not(.admin) nav button{background:transparent;color:var(--encre-2);padding:.5rem .95rem;border-radius:999px;font-weight:700;font-size:.9rem;transition:background .15s,color .15s}
body:not(.admin) nav button.actif{background:var(--cuivre);color:#fff;box-shadow:0 1px 3px rgba(92,53,32,.3)}
body:not(.admin) nav button:hover:not(.actif){background:var(--lin)}
body:not(.admin) main{max-width:720px;margin:0 auto;padding:1.6rem 1.2rem 4.5rem}

/* Étapes */
.etapes{display:flex;gap:.45rem;margin-bottom:1.3rem;font-size:.78rem;color:var(--encre-3)}
.etapes span{flex:1;text-align:center;padding:.45rem .2rem;border-bottom:3px solid var(--lin);letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.etapes span.faite{border-color:var(--cuivre);color:var(--cuivre-fonce)}

/* Cartes de types */
.type-carte{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;border:1px solid var(--lin);border-radius:var(--rayon);padding:1.15rem 1.2rem;margin-bottom:.85rem;cursor:pointer;transition:border-color .15s, box-shadow .15s, transform .15s;background:#fff}
.type-carte:hover{border-color:var(--cuivre);box-shadow:0 6px 20px rgba(92,53,32,.12);transform:translateY(-1px)}
.type-titre{flex:1;min-width:0;font-size:1.12rem;margin:0;font-family:'Playfair Display',Georgia,serif;color:var(--espresso)}
.type-desc{width:100%;padding-left:calc(110px + 1rem);margin-top:-.2rem}
@media(max-width:640px){
  .type-icone{width:64px !important;height:64px !important;border-radius:16px !important}
  .type-titre{font-size:1.05rem}
  .type-desc{padding-left:0}
}
.type-icone{width:110px;height:110px;border-radius:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 4px 14px rgba(38,29,20,.22)}
.type-icone img{width:100%;height:100%;object-fit:cover}
.type-icone span{color:#fff;font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:700}
.picto-grille{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 .6rem}
.picto-btn{width:46px;height:46px;border-radius:50%;background:var(--bg);border:2px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;color:var(--texte);transition:border-color .12s,background .12s}
.picto-btn:hover{border-color:var(--cuivre);background:var(--lin)}
.picto-btn.actif{background:var(--cuivre);border-color:var(--cuivre);color:#fff}
.picto-btn svg{width:22px;height:22px}
.duree{display:inline-block;font-size:.74rem;font-weight:700;color:#fff;border-radius:999px;padding:.18rem .7rem;margin-top:.45rem;letter-spacing:.03em}

/* Calendrier */
.cal-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.cal-tete h3{font-size:1.08rem;text-transform:capitalize}
.cal-tete button{background:var(--lin-2);border:1px solid var(--lin);width:2.3rem;height:2.3rem;border-radius:50%;font-size:1.05rem;color:var(--cuivre-fonce);transition:background .15s}
.cal-tete button:hover{background:var(--lin)}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:.32rem;text-align:center}
.cal-grille .ent{font-size:.7rem;font-weight:700;color:var(--encre-3);padding:.3rem 0;text-transform:uppercase;letter-spacing:.08em}
.cal-jour{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.95rem;color:#D4C8B3}
.cal-jour.dispo{background:var(--lin-2);border:1px solid var(--lin);color:var(--cuivre-fonce);font-weight:700;cursor:pointer;transition:background .12s,color .12s,transform .12s}
.cal-jour.dispo:hover{background:var(--cuivre);border-color:var(--cuivre);color:#fff;transform:scale(1.07)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.55rem;margin-top:.9rem}
.slots button{background:#fff;border:1px solid #DCCBB4;color:var(--cuivre-fonce);font-weight:700;padding:.62rem 0;border-radius:var(--rayon-s);transition:all .12s}
.slots button:hover{background:var(--cuivre);border-color:var(--cuivre);color:#fff;box-shadow:0 4px 10px rgba(92,53,32,.25)}

/* Prochain RDV */
.prochain{position:relative;border:1px solid #E3CDB4;background:linear-gradient(135deg,#FFFDF9,#F9EFE2);overflow:hidden}
.prochain::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--cuivre-clair),var(--cuivre))}
.prochain h3{font-family:'Lato',sans-serif;font-size:.72rem;color:var(--cuivre);text-transform:uppercase;letter-spacing:.14em;margin-bottom:.55rem;font-weight:700}
.prochain .grand{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--cuivre-fonce)}

/* Listes de RDV */
.rdv-ligne{display:flex;align-items:center;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--lin-2);flex-wrap:wrap}
.rdv-ligne:last-child{border-bottom:none}
.rdv-pastille{width:11px;height:11px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(0,0,0,.045)}
.rdv-infos{flex:1;min-width:170px}
.rdv-infos b{display:block;font-size:1.02rem}
.rdv-infos small{color:var(--encre-2)}
.statut{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;border-radius:999px;padding:.22rem .68rem;white-space:nowrap;letter-spacing:.03em}
.statut::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.statut.confirme{background:var(--vert-pale);color:var(--vert)}
.statut.annule{background:var(--rouge-pale);color:var(--rouge)}
.statut.termine{background:var(--lin-2);color:var(--encre-2)}
.statut.pending{background:#fff8e1;color:#e65100;}

/* Onglets auth */
.onglets-auth{display:flex;border-bottom:1px solid var(--lin);margin-bottom:1.1rem}
.onglets-auth button{flex:1;background:none;padding:.75rem;font-weight:700;color:var(--encre-2);border-bottom:3px solid transparent;font-size:.95rem;transition:color .15s}
.onglets-auth button.actif{color:var(--cuivre-fonce);border-color:var(--cuivre)}

/* ============================================================
   ADMINISTRATION — application à barre latérale
   ============================================================ */
body.admin{display:flex;min-height:100vh;background:
  radial-gradient(1200px 500px at 85% -10%, #F2E9DB 0%, transparent 60%), var(--papier)}

/* Barre latérale */
.sidebar{width:248px;flex-shrink:0;background:linear-gradient(180deg,var(--espresso-2),var(--espresso) 40%);color:#CBBBA2;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:1.5rem 1rem 1.2rem;box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}
.marque{padding:0 .65rem 1.4rem;border-bottom:1px solid var(--espresso-trait);margin-bottom:1.1rem}
.marque h1{font-size:1.22rem;color:#F3E8D8;line-height:1.25}
.marque .sous{color:#9D8B6E;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-top:.3rem}
.sidebar nav{display:flex;flex-direction:column;gap:.25rem;flex:1}
.sidebar nav button.quitter{margin-top:auto;color:#9D8B6E;border-top:1px solid var(--espresso-trait);border-radius:0 0 11px 11px;padding-top:1rem}
.sidebar nav button.quitter:hover{color:#EBDFC9}
.sidebar nav button{display:flex;align-items:center;gap:.7rem;width:100%;background:transparent;color:#BBA988;padding:.62rem .8rem;border-radius:11px;font-weight:700;font-size:.92rem;text-align:left;transition:background .15s,color .15s;letter-spacing:.01em}
.sidebar nav button svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor;opacity:.85}
.sidebar nav button:hover{background:rgba(255,255,255,.06);color:#EBDFC9}
.sidebar nav button.actif{background:linear-gradient(180deg,var(--cuivre-clair),var(--cuivre));color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.22)}

/* Zone de contenu */
.contenu{flex:1;min-width:0;padding:2.1rem 2.4rem 4.5rem}
.contenu>section{max-width:1060px;margin:0 auto;animation:apparait .22s ease}
@keyframes apparait{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
body.admin h2{font-size:1.5rem}
.entete-vue{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:.8rem;margin-bottom:1.3rem}
.entete-vue .note{margin-top:.2rem}

/* Connexion admin */
#vueLogin{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 8rem)}
#vueLogin .carte{width:100%;max-width:400px;padding:2.2rem 2.1rem}
#vueLogin h2{text-align:center}
#vueLogin .filet{width:44px;height:3px;background:var(--cuivre);border-radius:2px;margin:.7rem auto 1rem}

/* Tables */
.table-enrobe{overflow-x:auto;border:1px solid var(--lin);border-radius:var(--rayon-s);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-size:.69rem;text-transform:uppercase;letter-spacing:.1em;color:var(--encre-2);padding:.75rem .9rem;border-bottom:1px solid var(--lin);background:var(--lin-2);white-space:nowrap}
td{padding:.78rem .9rem;border-bottom:1px solid var(--lin-2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#FCF9F4}

/* Barres de filtres */
.barre{display:flex;gap:.7rem .9rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.1rem}
.barre>div{flex:1 1 150px;min-width:135px}
.barre label{margin-top:0}
.barre .boutons-jour{flex:0 0 auto;display:flex;gap:.4rem}
.barre .boutons-jour .btn{white-space:nowrap}

/* Cartes d'éléments (types, rappels, messages) */
.item-carte{border:1px solid var(--lin);border-radius:var(--rayon);padding:1.05rem 1.15rem;margin-bottom:.75rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;background:#fff;transition:box-shadow .15s,border-color .15s}
.item-carte:hover{border-color:#DCCBB4;box-shadow:0 4px 16px rgba(38,29,20,.07)}
.item-carte.envoye{opacity:.55}
.item-infos{flex:1;min-width:190px}
.item-infos b{display:block;font-size:1rem}
.item-infos small{color:var(--encre-2)}
.apercu-sms{background:var(--vert-pale);border-left:3px solid var(--vert);border-radius:0 var(--rayon-s) var(--rayon-s) 0;padding:.65rem .9rem;font-size:.86rem;margin:.45rem 0;width:100%;color:#3D6249}
.badge-rappel{font-size:.72rem;font-weight:700;color:var(--vert)}
.dispo-ligne{display:flex;gap:.6rem;align-items:center;padding:.42rem 0;font-size:.92rem;border-bottom:1px dashed var(--lin-2)}
.dispo-ligne:last-child{border-bottom:none}
.dispo-ligne b{min-width:80px}
.icone-mini{width:28px;height:28px;border-radius:8px;object-fit:cover;vertical-align:middle}

/* Modales */
.modal-fond{position:fixed;inset:0;background:rgba(31,23,14,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50;animation:fond .18s ease}
@keyframes fond{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:18px;max-width:580px;width:100%;max-height:92vh;overflow-y:auto;padding:1.7rem 1.8rem;box-shadow:var(--ombre-haute);animation:modale .2s ease}
@keyframes modale{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal h2{font-size:1.25rem;padding-bottom:.8rem;border-bottom:1px solid var(--lin);margin-bottom:.4rem}
.modal-pied{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--lin)}

/* Grilles */
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.trois-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 1rem}
@media(max-width:620px){.deux-col,.trois-col{grid-template-columns:1fr}}
.ligne-flex{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
label.ligne-flex{text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--encre);font-weight:400}

/* ---------- Responsive admin ---------- */
@media(max-width:860px){
  body.admin{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;padding:1rem 1rem .6rem;flex-direction:column}
  .marque{padding-bottom:.8rem;margin-bottom:.7rem}
  .sidebar nav{flex-direction:row;overflow-x:auto;padding-bottom:.4rem;gap:.35rem;scrollbar-width:none}
  .sidebar nav::-webkit-scrollbar{display:none}
  .sidebar nav button{white-space:nowrap;width:auto;padding:.5rem .85rem}
  .sidebar nav button.quitter{margin-top:0;border-top:none;border-radius:11px;padding-top:.5rem}
  .contenu{padding:1.4rem 1.1rem 4rem}
  .carte{padding:1.25rem 1.2rem}
}