/* =====================================================================
   ESPACE PRIVÉ — feuille de style
   Reprend l'identité de la parapharmacie (rose framboise et anthracite),
   en plus sobre : c'est un outil de travail, pas une vitrine.
   ===================================================================== */

:root {
  --sol: #FAF8F9;
  --carte: #FFFFFF;
  --encre: #2E2B31;
  --encre-2: #565060;
  --muet: #736D7B;
  --ligne: #E9E2E8;
  --ligne-forte: #D6CDD6;
  --rose: #C82A6B;
  --rose-fonce: #9C2154;
  --rose-voile: #FBEAF2;
  --gris-logo: #C9C6CE;
  --rouge: #A32036;
  --rouge-voile: #FBE9EC;
  --vert: #2C6047;
  --vert-voile: #DDEDE4;
  --r: 14px;
  --ombre: 0 1px 2px rgba(46,43,49,.05), 0 10px 30px -14px rgba(46,43,49,.22);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--sol);
  color: var(--encre);
  font: 400 16px/1.6 "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- Page centrée (connexion, installation) ---- */
.centre {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 20px 60px;
}
.boite {
  width: 100%;
  max-width: 400px;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 20px;
  padding: 32px 30px 28px;
  box-shadow: var(--ombre);
}
.boite--large { max-width: 620px; }

.logo { display: grid; place-items: center; margin-bottom: 16px; }
.logo svg { width: 52px; height: 52px; }

h1 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 1.5rem; font-weight: 600; line-height: 1.15;
  margin: 0 0 4px; text-align: center; letter-spacing: -.01em;
}
.sousTitre { text-align: center; color: var(--muet); font-size: .9rem; margin: 0 0 26px; }

h2 {
  font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; font-weight: 600;
  margin: 0 0 14px;
}

/* ---- Formulaire ---- */
.champ { margin-bottom: 16px; }
label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--encre-2); }
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%;
  font: inherit; font-size: .95rem;
  padding: 12px 14px;
  border: 1.5px solid var(--ligne-forte);
  border-radius: 10px;
  background: var(--carte);
  color: var(--encre);
}
input:focus-visible { outline: 3px solid var(--rose); outline-offset: 1px; border-color: var(--rose); }
.aide { font-size: .8rem; color: var(--muet); margin: 6px 0 0; }

button {
  width: 100%;
  border: 0; border-radius: 999px;
  background: var(--rose); color: #FFFFFF;
  font: 600 .95rem/1 "Outfit", sans-serif;
  padding: 14px 24px;
  cursor: pointer;
  transition: background .15s ease;
}
button:hover:not(:disabled) { background: var(--rose-fonce); }
button:disabled { background: var(--ligne-forte); cursor: default; }
button:focus-visible { outline: 3px solid var(--rose-fonce); outline-offset: 3px; }
button.discret {
  width: auto; background: transparent; color: var(--rose-fonce);
  border: 1.5px solid var(--ligne-forte); padding: 9px 18px; font-size: .85rem;
}
button.discret:hover:not(:disabled) { background: var(--rose-voile); }

/* ---- Messages ---- */
.message {
  border-radius: 10px; padding: 11px 14px; font-size: .88rem;
  margin: 0 0 18px; line-height: 1.5;
}
.message--erreur { background: var(--rouge-voile); color: var(--rouge); }
.message--succes { background: var(--vert-voile); color: var(--vert); }
.message--info { background: var(--rose-voile); color: var(--rose-fonce); }
[hidden] { display: none !important; }

/* ---- Accueil ---- */
.barre {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 22px; background: var(--carte); border-bottom: 1px solid var(--ligne);
}
.barre__logo { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem;
               text-decoration: none; color: inherit; }
.barre__logo:hover { color: var(--rose-fonce); }
.barre__logo svg { width: 28px; height: 28px; }
.barre__droite { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: .88rem; color: var(--muet); }
.contenu { max-width: 900px; margin: 0 auto; padding: 30px 22px 60px; }

.pilule {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 11px; font-size: .76rem; font-weight: 600;
  background: var(--rose-voile); color: var(--rose-fonce);
}

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 20px; }
.tuile {
  background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r);
  padding: 20px 18px;
}
a.tuile { text-decoration:none; color:inherit; display:block; }
a.tuile:hover { border-color:var(--rose); background:var(--rose-voile); }
.tuile strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.tuile small { color: var(--muet); font-size: .85rem; line-height: 1.45; }
.tuile--aVenir { background: transparent; border-style: dashed; }
.tuile--aVenir strong { color: var(--encre-2); }
.tuile--aVenir small { color: var(--muet); }

.encadre {
  background: var(--carte); border: 1px solid var(--ligne); border-left: 3px solid var(--rose);
  border-radius: 0 var(--r) var(--r) 0; padding: 18px 20px; margin-top: 24px;
}
.encadre p { margin: 0; font-size: .92rem; color: var(--encre-2); }

.listeComptes { list-style: none; padding: 0; margin: 0; }
.listeComptes li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--ligne);
}
.listeComptes li:first-child { border-top: 0; }
.listeComptes strong { font-size: .93rem; }
.listeComptes small { color: var(--muet); font-size: .82rem; display: block; }

.aide--centre { text-align: center; margin-top: 18px; }
.sectionComptes { margin-top: 26px; }
.label__detail { font-weight: 400; color: var(--muet); }
.titrePage { text-align: left; font-size: 1.6rem; margin-bottom: 4px; }
.chapo { color: var(--muet); margin-top: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============ LISTE DES ARTICLES ==================================== */
.enTetePage { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.enTetePage h1 { text-align:left; font-size:1.5rem; margin:0; }
.pousse { margin-left:auto; }

/* Aperçu avant import d'une sélection de références */
.refsUnivers { margin: 16px 0 6px; font-size: .78rem; font-weight: 700;
               text-transform: uppercase; letter-spacing: .07em; color: var(--muet); }
.refsListe { margin: 0; padding-left: 18px; font-size: .9rem; line-height: 1.6; }
.refsListe b { font-weight: 600; }
button.compact { width:auto; padding:11px 20px; font-size:.9rem; }

.liste { background:var(--carte); border:1px solid var(--ligne); border-radius:var(--r); padding:6px 20px; }
.rangee { display:flex; align-items:center; gap:15px; padding:14px 0; border-top:1px solid var(--ligne); }
.rangee:first-child { border-top:0; }
.rangee__vignette {
  width:66px; height:44px; border-radius:8px; flex:none; object-fit:cover;
  background:linear-gradient(135deg,var(--rose-voile),#EFEAEF); border:1px solid var(--ligne);
}
.rangee__corps { flex:1; min-width:0; }
.rangee__corps strong { display:block; font-size:.94rem; line-height:1.3; }
.rangee__corps small { font-size:.8rem; color:var(--muet); }
.rangee__actions { display:flex; gap:8px; align-items:center; flex:none; flex-wrap:wrap; }

.pilule--enligne   { background:var(--vert-voile); color:var(--vert); }
.pilule--brouillon { background:#FAEEDA; color:#8A5A16; }
.pilule--archive   { background:#EFEAEF; color:#6B6672; }
.pilule--programme { background:#E2EAF5; color:#33578C; }
.point { width:7px; height:7px; border-radius:50%; background:currentColor; display:block; }

.filtres { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.filtre {
  width:auto; background:var(--carte); color:var(--encre-2); border:1.5px solid var(--ligne-forte);
  border-radius:999px; padding:7px 15px; font-size:.85rem; font-weight:600;
}
.filtre[aria-pressed="true"] { background:var(--rose); border-color:var(--rose); color:#FFFFFF; }
.vide { text-align:center; color:var(--muet); padding:34px 20px; font-size:.94rem; }

/* ============ ÉDITEUR =============================================== */
.editeur { display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:start; }
.panneau { background:var(--carte); border:1px solid var(--ligne); border-radius:var(--r); padding:22px; }
.panneau__titre {
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muet); margin:0 0 14px;
}
.deuxColonnes { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
textarea {
  width:100%; font:inherit; font-size:.93rem; line-height:1.6; padding:12px 14px;
  border:1.5px solid var(--ligne-forte); border-radius:10px; background:var(--carte);
  color:var(--encre); resize:vertical; min-height:120px;
}
textarea:focus-visible { outline:3px solid var(--rose); outline-offset:1px; border-color:var(--rose); }
select {
  width:100%; font:inherit; font-size:.93rem; padding:12px 14px;
  border:1.5px solid var(--ligne-forte); border-radius:10px; background:var(--carte); color:var(--encre);
}
.outils { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.outil {
  width:auto; background:var(--carte); border:1.5px solid var(--ligne-forte); border-radius:8px;
  padding:7px 13px; font-size:.83rem; font-weight:600; color:var(--encre-2);
}
.outil:hover { background:var(--rose-voile); border-color:var(--rose); color:var(--rose-fonce); }
.compteur { font-size:.78rem; color:var(--muet); margin:6px 0 0; }
.compteur.trop { color:var(--rouge); font-weight:600; }

.depot {
  border:2px dashed var(--ligne-forte); border-radius:12px; padding:22px; text-align:center;
  background:var(--carte); cursor:pointer;
}
.depot:hover, .depot.survol { border-color:var(--rose); background:var(--rose-voile); }
.depot strong { display:block; font-size:.9rem; margin-bottom:3px; }
.depot small { font-size:.8rem; color:var(--muet); }
.photoChoisie { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.photoChoisie img { width:140px; height:78px; object-fit:cover; border-radius:10px; border:1px solid var(--ligne); }
.deuxBoutons { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }

.barreActions {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--ligne);
}
.barreActions .etat { font-size:.82rem; color:var(--muet); margin-right:auto; }

/* Aperçu tel qu'il apparaîtra sur le site */
.apercuCarte { background:var(--carte); border:1px solid var(--ligne); border-radius:13px; overflow:hidden; }
.apercuCarte__image { height:104px; background:linear-gradient(135deg,#E7C7D7,#CFCAD4); object-fit:cover; width:100%; display:block; }
.apercuCarte__corps { padding:15px 16px 18px; }
.apercuCarte__meta { display:flex; gap:9px; align-items:center; margin-bottom:8px; }
.apercuCarte h3 { font-family:"Fraunces",Georgia,serif; font-size:1.02rem; margin:0 0 7px; line-height:1.25; }
.apercuCarte p { font-size:.84rem; color:var(--muet); margin:0; line-height:1.5; }
.apercuTexte { margin-top:16px; font-size:.88rem; line-height:1.65; color:var(--encre-2); }
.apercuTexte h4 { font-family:"Fraunces",Georgia,serif; font-size:.98rem; margin:16px 0 6px; color:var(--encre); }
.apercuTexte ul { margin:8px 0; padding-left:20px; }
.apercuTexte li { margin-bottom:5px; }
.apercuTexte p { margin:0 0 10px; }

/* Mémo rédaction */
.memo { margin-top:18px; border:1px solid var(--ligne); border-radius:12px; background:#F5EFF3; padding:15px 16px; }
.memo__titre { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muet); margin:0 0 10px; }
.memo__alerte {
  display:flex; gap:9px; align-items:flex-start; background:#FAEEDA; color:#8A5A16;
  border-radius:9px; padding:10px 12px; margin:0 0 13px; font-size:.84rem; line-height:1.45;
}
.memo__sous { font-size:.77rem; font-weight:600; color:var(--encre-2); margin:0 0 6px; }
.memo__mots { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 13px; }
.memo__mots:last-child { margin-bottom:0; }
.mot { border-radius:6px; padding:3px 8px; font-size:.78rem; }
.mot--non { background:var(--rose-voile); color:var(--rose-fonce); text-decoration:line-through; }
.mot--oui { background:var(--vert-voile); color:var(--vert); }

@media (max-width:900px) {
  .editeur { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .deuxColonnes { grid-template-columns:1fr; }
  .rangee { flex-wrap:wrap; }
  .rangee__actions { width:100%; }
}

/* ============ CONTRÔLE DE CONFIGURATION ============================= */
.verifConfig { margin-top: 24px; }
.listeControle { list-style: none; margin: 0; padding: 0; }
.listeControle li {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--ligne); font-size: .92rem; flex-wrap: wrap;
}
.listeControle li:first-child { border-top: 0; }
.listeControle .marque { font-weight: 700; flex: none; width: 16px; }
.listeControle .oui { color: var(--vert); }
.listeControle .non { color: var(--rouge); }
.listeControle .valeur {
  font: 500 .82rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muet); overflow-wrap: anywhere;
}
.listeControle .aide { font-size: .82rem; color: var(--muet); width: 100%; padding-left: 26px; }

/* ============ HORAIRES ============================================== */
.ligneHoraire {
  display: grid; grid-template-columns: 110px 1fr 1fr; gap: 12px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--ligne);
}
.ligneHoraire:first-child { border-top: 0; }
.ligneHoraire .jour { text-transform: capitalize; font-size: .9rem; color: var(--encre-2); font-weight: 600; }
.plage { display: flex; align-items: center; gap: 8px; }
.plage input[type="time"] {
  font: inherit; font-size: .88rem; padding: 8px 10px; border: 1.5px solid var(--ligne-forte);
  border-radius: 9px; background: var(--carte); color: var(--encre); width: 100%;
}
.plage input:focus-visible { outline: 3px solid var(--rose); outline-offset: 1px; }
.plage .fleche { color: var(--muet); flex: none; font-size: .85rem; }
.plage--seconde { opacity: .78; }
.plage--seconde:focus-within { opacity: 1; }

/* ============ FENÊTRE D'ÉDITION ==================================== */
.fenetreFond {
  position: fixed; inset: 0; background: rgba(46, 43, 49, .5);
  display: grid; place-items: center; padding: 20px; z-index: 50; overflow-y: auto;
}
.fenetreBoite {
  background: var(--carte); border-radius: 18px; padding: 26px 26px 22px;
  width: 100%; max-width: 560px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .45);
  max-height: 92vh; overflow-y: auto;
}
.fenetreBoite h2 {
  font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-weight: 600; margin: 0 0 18px;
}
.fenetreBoite .barreActions { justify-content: flex-end; }

@media (max-width: 560px) {
  .ligneHoraire { grid-template-columns: 1fr; gap: 7px; }
  .ligneHoraire .jour { margin-top: 4px; }
}

.chapo--enTete { margin: 0; flex: 1; min-width: 240px; }
.panneau--suite { margin-top: 16px; }

.detailAttente { display: block; margin-top: 4px; color: var(--muet); font-size: .82rem; }
.bandeauValider {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #E2EAF5; border: 1px solid #B8CBE6; border-radius: var(--r);
  padding: 16px 20px; margin-bottom: 16px;
}
.bandeauValider span { flex: 1; min-width: 200px; font-size: .92rem; color: var(--encre-2); }
.commentaireRetour {
  background: #FAEEDA; color: #8A5A16; border-radius: 10px; padding: 12px 14px;
  font-size: .88rem; margin: 0 0 16px; line-height: 1.5;
}

/* Vignette d'une photo de boutique, dans la liste des réglages */
.vignettePhoto {
  width: 68px; height: 52px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--ligne); flex: none; margin-right: 12px;
}