/* Direction artistique Madame Events : noir profond, crème, un sable doré pour
   les accents, et un serif en italique pour tout ce qui porte le nom de la
   marque. Les visuels sont les seules vraies couleurs de l'interface. */
:root{
  color-scheme:dark;
  --noir:#0B0A09; --noir-2:#131110; --noir-3:#1B1816; --noir-4:#232019;
  --creme:#F3EDE3; --creme-2:#BDB4A7; --creme-3:#8C8378; --creme-4:#5E584F;
  --ligne:#241F1B; --ligne-forte:#352F28;
  --sable:#C2A878; --sable-clair:#DCC79B; --sable-voile:rgba(194,168,120,.13);

  --brouillon:#6E675E; --valider:#D9A441; --valide:#86A9C6;
  --programme:#C2A878; --publie:#85AE8C;

  --ui:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--noir);color:var(--creme);font-family:var(--ui);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--sable);outline-offset:2px;border-radius:6px}
::selection{background:var(--sable);color:var(--noir)}

.shell{display:flex;flex-direction:column;min-height:100%}
.gutter{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}

/* en-tête */
.appbar{position:sticky;top:0;z-index:20;background:rgba(11,10,9,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)}
.appbar-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-block:15px}
.logo{display:flex;align-items:center;gap:11px;min-width:0}
.logo .mark{width:34px;height:34px;border-radius:50%;border:1px solid var(--sable);
  display:grid;place-items:center;color:var(--sable);font-family:var(--display);
  font-style:italic;font-weight:600;font-size:16px;flex:0 0 34px}
.logo b{display:block;font-family:var(--display);font-size:20px;font-weight:600;
  letter-spacing:.055em;text-transform:uppercase;line-height:1.1;white-space:nowrap}
.logo span{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--creme-3);white-space:nowrap}
.tabs{display:flex;gap:26px}
.tabs button{border:0;background:transparent;padding:4px 0 6px;cursor:pointer;
  font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--creme-3);border-bottom:1px solid transparent}
.tabs button:hover{color:var(--creme-2)}
.tabs button[aria-selected="true"]{color:var(--creme);border-bottom-color:var(--sable)}
.spacer{flex:1}

.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ligne-forte);
  background:transparent;color:var(--creme-2);border-radius:0;padding:9px 20px;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--sable);color:var(--creme)}
.btn-primary{border-color:var(--sable);background:var(--sable);color:var(--noir);font-weight:600}
.btn-primary:hover{background:var(--sable-clair);border-color:var(--sable-clair);color:var(--noir)}
.btn-quiet{border-color:transparent;color:var(--creme-3)}
.btn-quiet:hover{border-color:transparent;color:var(--creme)}
.btn-danger{border-color:transparent;color:#C97A6D}
.btn-danger:hover{border-color:transparent;color:#E09487}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--ligne-forte);
  background:transparent;display:grid;place-items:center;cursor:pointer;
  font-size:15px;color:var(--creme-2);flex:0 0 34px}
.icon-btn:hover{border-color:var(--sable);color:var(--creme)}

/* bandeau d'état des données */
.source{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;
  padding:11px 16px;background:var(--sable-voile);border-left:1px solid var(--sable);
  font-size:12px;color:var(--creme-2)}
.source b{color:var(--creme);font-weight:600}

/* résumé */
.pulse{display:flex;gap:1px;flex-wrap:wrap;margin-top:20px;background:var(--ligne)}
.kpi{flex:1;min-width:132px;background:var(--noir-2);padding:16px 18px}
.kpi b{display:block;font-family:var(--display);font-size:34px;font-weight:600;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1}
.kpi span{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--creme-3)}
.kpi.p b{color:var(--programme)} .kpi.w b{color:var(--valider)}
.kpi.i b{color:var(--valide)}    .kpi.d b{color:#C97A6D}

/* barre de période */
.period{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:30px 16px}
.period h2{margin:0;font-family:var(--display);font-size:30px;font-weight:600;
  letter-spacing:.02em;text-transform:capitalize;min-width:210px}

/* grille du mois */
.month{border:1px solid var(--ligne);background:var(--ligne)}
.week-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--ligne)}
.week-head div{background:var(--noir);padding:11px 12px;font-size:10.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--creme-3)}
.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px}
.cell{min-height:202px;min-width:0;overflow:hidden;padding:9px 8px 10px;display:flex;
  flex-direction:column;gap:7px;cursor:pointer;background:var(--noir-2);transition:background .14s}
.cell:hover{background:var(--noir-3)}
.cell.out{background:var(--noir);opacity:.5}
.cell-head{display:flex;align-items:center;gap:7px;height:26px;flex:0 0 auto}
.daynum{display:inline-flex;align-items:center;justify-content:center;height:26px;min-width:26px;
  padding:0 6px;border-radius:50%;font-family:var(--display);font-size:17px;font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1}
.cell.today .daynum{background:var(--sable);color:var(--noir)}
.cell.out .daynum{color:var(--creme-4)}
.cell-add{margin-left:auto;color:var(--creme-4);font-size:16px;opacity:0;transition:opacity .14s}
.cell:hover .cell-add{opacity:1}

/* une publication dans le calendrier : son visuel d'abord */
.ev{display:flex;align-items:stretch;gap:8px;width:100%;min-width:0;padding:0;
  border:0;border-left:2px solid transparent;background:transparent;cursor:pointer;text-align:left}
.ev:hover{border-left-color:var(--sable)}
.ev .vis{width:48px;height:60px;flex:0 0 48px;background:var(--noir-4);overflow:hidden;position:relative}
.ev .vis img{width:100%;height:100%;object-fit:cover;display:block}
.ev .vis .nb{position:absolute;right:2px;bottom:2px;background:rgba(11,10,9,.78);color:var(--creme);
  font-size:8.5px;font-weight:600;padding:0 3px;letter-spacing:.02em}
.ev .vis.none{display:grid;place-items:center;color:var(--creme-4);font-size:15px}
.ev .txt{min-width:0;display:flex;flex-direction:column;gap:2px;padding:1px 0 0 2px}
.ev .meta{display:flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--creme-3)}
.ev .meta i{width:5px;height:5px;border-radius:50%;flex:0 0 5px}
.ev .nom{font-size:11.5px;line-height:1.35;color:var(--creme-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ev:hover .nom{color:var(--creme)}
.more{align-self:flex-start;border:0;background:transparent;padding:0 0 0 2px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sable);cursor:pointer}

.dot-n{background:var(--brouillon)} .dot-w{background:var(--valider)}
.dot-i{background:var(--valide)}    .dot-p{background:var(--programme)} .dot-s{background:var(--publie)}

.legend{display:flex;gap:22px;flex-wrap:wrap;padding-block:18px 36px;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--creme-3)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:6px;height:6px;border-radius:50%}

/* galerie des publications */
.filters{display:flex;gap:22px;flex-wrap:wrap;padding-block:26px 20px;
  border-bottom:1px solid var(--ligne);margin-bottom:22px}
.fchip{border:0;background:transparent;padding:0 0 4px;cursor:pointer;font-size:11px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--creme-3);
  border-bottom:1px solid transparent}
.fchip:hover{color:var(--creme-2)}
.fchip[aria-pressed="true"]{color:var(--creme);border-bottom-color:var(--sable)}
.fchip span{font-family:var(--display);font-size:14px;letter-spacing:0;margin-left:4px;font-feature-settings:'lnum' 1}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:26px;padding-bottom:50px}
.pcard{background:transparent;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;text-align:left}
.cover{position:relative;aspect-ratio:4/5;background:var(--noir-2);overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pcard:hover .cover img{transform:scale(1.035)}
.cover .none{height:100%;display:grid;place-items:center;color:var(--creme-4);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:14px}
.cover .count{position:absolute;right:9px;top:9px;background:rgba(11,10,9,.72);color:var(--creme);
  padding:3px 8px;font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.cover .net{position:absolute;left:9px;top:9px;background:rgba(11,10,9,.72);color:var(--creme);
  padding:3px 9px;font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.pbody{padding:13px 1px 0;display:flex;flex-direction:column;gap:7px;min-width:0}
.pdate{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--creme-3)}
.ptitle{font-family:var(--display);font-size:19px;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pexc{font-size:12px;color:var(--creme-3);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:2px}

.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 0;font-size:10px;
  font-weight:500;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.b-n{color:var(--brouillon)} .b-w{color:var(--valider)} .b-i{color:var(--valide)}
.b-p{color:var(--programme)} .b-s{color:var(--publie)} .b-d{color:#C97A6D}

/* panneau de rédaction */
.scrim{position:fixed;inset:0;background:rgba(5,4,4,.74);z-index:30;display:grid;place-items:end center;
  backdrop-filter:blur(3px)}
.sheet{background:var(--noir-2);width:min(780px,100%);max-height:94vh;
  border:1px solid var(--ligne-forte);border-bottom:0;
  display:flex;flex-direction:column;overflow:hidden}
@media (min-width:780px){.scrim{place-items:center}.sheet{border-bottom:1px solid var(--ligne-forte);max-height:90vh}}
.sheet-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--ligne);flex:0 0 auto}
.sheet-head h3{margin:0;font-family:var(--display);font-size:20px;font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-body{overflow-y:auto;overflow-anchor:none;padding:20px;display:flex;flex-direction:column;gap:20px}
/* Sans ça, le conteneur en colonne comprime ses blocs au lieu de défiler :
   le bandeau de visuels et l'encart des contrôles se retrouvent écrasés. */
.sheet-body>*{flex:0 0 auto}
.sheet-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 20px;
  border-top:1px solid var(--ligne);flex:0 0 auto;background:var(--noir-2)}

.strip{display:flex;gap:9px;overflow-x:auto;padding-bottom:3px}
.strip figure{margin:0;position:relative;flex:0 0 auto;width:88px;height:110px}
.strip img{width:100%;height:100%;display:block;object-fit:cover;background:var(--noir-4)}
.strip figure button{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(11,10,9,.8);color:var(--creme);font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center}
.strip .add{height:110px;width:88px;border:1px dashed var(--ligne-forte);background:transparent;
  display:grid;place-items:center;color:var(--creme-3);font-size:20px;cursor:pointer;flex:0 0 auto}
.strip .add:hover{border-color:var(--sable);color:var(--sable)}

.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>label{font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--creme-3)}
input[type=text],input[type=date],input[type=time],textarea,select{
  width:100%;background:var(--noir);border:1px solid var(--ligne-forte);border-radius:0;
  padding:11px 13px;font-size:14px;color:var(--creme)}
textarea{resize:vertical;line-height:1.65}
input:focus,textarea:focus,select:focus{border-color:var(--sable);outline:none}
select{appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--creme-3) 50%),linear-gradient(135deg,var(--creme-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cols{display:flex;gap:14px;flex-wrap:wrap}
.cols>*{flex:1;min-width:150px}
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg button{border:1px solid var(--ligne-forte);background:transparent;padding:8px 18px;
  font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--creme-3);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--sable);border-color:var(--sable);color:var(--noir);font-weight:600}

.meter{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.06em;color:var(--creme-3)}
.meter b{font-family:var(--display);font-size:18px;letter-spacing:0;color:var(--creme);
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1}
.meter .bar{flex:1;min-width:60px;height:1px;background:var(--ligne-forte);overflow:hidden}
.meter .bar i{display:block;height:100%;width:0;background:var(--publie);transition:width .15s}
.meter.near b{color:var(--valider)} .meter.near .bar i{background:var(--valider)}
.meter.over b,.meter.over{color:#C97A6D} .meter.over .bar i{background:#C97A6D}

.checks{border:1px solid var(--ligne);background:var(--noir)}
.checks header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--ligne)}
.checks header h4{margin:0;font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--creme-3)}
.checks ul{list-style:none;margin:0;padding:8px 0}
.checks li{display:flex;gap:11px;padding:8px 16px;font-size:13px;align-items:flex-start}
.tick{width:16px;height:16px;border-radius:50%;flex:0 0 16px;display:grid;place-items:center;
  font-size:9px;font-weight:700;margin-top:2px}
.tick.y{background:transparent;border:1px solid var(--publie);color:var(--publie)}
.tick.n{background:#C97A6D;color:var(--noir)}
.checks li.y>div{color:var(--creme-3)} .checks li.n>div{color:var(--creme)}
.checks em{font-style:normal;display:block;font-size:12px;color:var(--creme-3);margin-top:2px}

.empty{border:1px solid var(--ligne);padding:56px 24px;text-align:center}
.empty h3{margin:0 0 9px;font-family:var(--display);font-size:24px;font-weight:600}
.empty p{margin:0 0 20px;color:var(--creme-3);font-size:13px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));
  background:var(--creme);color:var(--noir);padding:11px 22px;font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;z-index:50;max-width:88vw;text-align:center}

/* Sur téléphone la grille ne peut plus porter de texte : il reste le visuel. */
@media (max-width:860px){
  .cell{min-height:150px}
  .ev .nom{-webkit-line-clamp:2;font-size:11px}
  .ev .vis{width:34px;height:42px;flex:0 0 34px}
}
@media (max-width:720px){
  .gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .appbar-in{gap:12px}
  .logo{flex:1 1 100%}
  .tabs{order:2;flex:1 1 100%;gap:22px}
  #export{order:3} #new{order:3;flex:1;justify-content:center}
  .spacer{display:none}
  .kpi{min-width:calc(50% - 1px)}
  .period h2{min-width:0;font-size:24px}
  .week-head div{padding:9px 5px;font-size:9.5px;letter-spacing:.08em}
  .cell{min-height:96px;padding:5px 4px}
  .cell-head{height:22px}
  .daynum{height:22px;min-width:22px;font-size:13px}
  .cell-add{display:none}
  .ev{gap:0}
  .ev .vis{width:100%;height:40px;flex:1 1 auto}
  .ev .txt{display:none}
  .more{font-size:9px;letter-spacing:.04em}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
  .ptitle{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}