/* style.css — Calendrier v3 : design modernisé, 24 thèmes, 3 vues, animations, mobile.
   Deux principes tenus depuis la première version :
     · le thème d'interface ne change jamais la couleur d'une catégorie (elle vient de la palette) ;
     · la couleur d'un événement suit sa catégorie, partout et dans tous les thèmes.
   Les animations sont dosées par le réglage « animation » (aucune / légère / normale / appuyée). */

/* --- Thèmes d'interface (24) -------------------------------------------------- */
html[data-theme="clair"]      {--bg:#eef1f6;--panneau:#ffffff;--ligne:#dde3ec;--txt:#141c28;--att:#5f6d82;--acc:#2f6fd0;--auj:#e8f0fe;--case:#ffffff;--case-ext:#f4f6fa;--ombre:0 10px 30px rgba(18,28,46,.10);--rayon:14px}
html[data-theme="neige"]      {--bg:#f6f8fa;--panneau:#ffffff;--ligne:#e7ecf1;--txt:#1d2329;--att:#71808f;--acc:#527a9c;--auj:#eef4f9;--case:#ffffff;--case-ext:#f6f8fa;--ombre:0 10px 30px rgba(40,55,75,.08);--rayon:14px}
html[data-theme="parchemin"]  {--bg:#efe4cf;--panneau:#fcf5e6;--ligne:#ddcaa6;--txt:#43361a;--att:#7f6a41;--acc:#9c6f18;--auj:#f8ebcc;--case:#fcf5e6;--case-ext:#f4ead7;--ombre:0 10px 30px rgba(90,70,25,.16);--rayon:12px}
html[data-theme="rose"]       {--bg:#fdeff5;--panneau:#ffffff;--ligne:#f6d6e4;--txt:#38141f;--att:#8e5f72;--acc:#d13a76;--auj:#fde2ee;--case:#ffffff;--case-ext:#fbeaf2;--ombre:0 10px 30px rgba(150,30,80,.12);--rayon:16px}
html[data-theme="lavande"]    {--bg:#f2f0fb;--panneau:#ffffff;--ligne:#e0daf5;--txt:#221b3c;--att:#6c6393;--acc:#6b4fd0;--auj:#ebe5fb;--case:#ffffff;--case-ext:#f4f2fb;--ombre:0 10px 30px rgba(60,40,120,.12);--rayon:16px}
html[data-theme="menthe"]     {--bg:#eefaf5;--panneau:#ffffff;--ligne:#cdeee0;--txt:#0d3226;--att:#4f7f6c;--acc:#10a077;--auj:#ddf7ed;--case:#ffffff;--case-ext:#f0faf6;--ombre:0 10px 30px rgba(10,80,60,.12);--rayon:16px}
html[data-theme="ocean"]      {--bg:#e6f1f7;--panneau:#ffffff;--ligne:#c3dbe7;--txt:#082a38;--att:#4a7486;--acc:#0a6fa8;--auj:#d5ecf7;--case:#ffffff;--case-ext:#e8f1f6;--ombre:0 10px 30px rgba(8,60,85,.14);--rayon:14px}
html[data-theme="ciel"]       {--bg:#eef6ff;--panneau:#ffffff;--ligne:#d6e6f8;--txt:#102a44;--att:#5b7794;--acc:#1e88e5;--auj:#e2f0ff;--case:#ffffff;--case-ext:#f0f6fd;--ombre:0 10px 30px rgba(20,70,120,.12);--rayon:18px}
html[data-theme="foret"]      {--bg:#e9f1e6;--panneau:#ffffff;--ligne:#cfdfc6;--txt:#192815;--att:#586b4f;--acc:#2f7d2f;--auj:#deeeda;--case:#ffffff;--case-ext:#eaf0e6;--ombre:0 10px 30px rgba(25,65,20,.14);--rayon:12px}
html[data-theme="olive"]      {--bg:#f2f2e4;--panneau:#fdfdf6;--ligne:#dfdfc6;--txt:#2d3120;--att:#6e7250;--acc:#7a8b1e;--auj:#ededd5;--case:#fdfdf6;--case-ext:#f4f4e8;--ombre:0 10px 30px rgba(70,75,30,.12);--rayon:12px}
html[data-theme="sable"]      {--bg:#f8f1e7;--panneau:#fffdf9;--ligne:#eadcc8;--txt:#3a3025;--att:#877463;--acc:#b07a3c;--auj:#f8ecda;--case:#fffdf9;--case-ext:#f8f2ea;--ombre:0 10px 30px rgba(90,70,40,.12);--rayon:14px}
html[data-theme="terre"]      {--bg:#f3ece7;--panneau:#fdfaf7;--ligne:#e2d2c7;--txt:#36261e;--att:#7d6255;--acc:#8d502b;--auj:#f5e5da;--case:#fdfaf7;--case-ext:#f6efeb;--ombre:0 10px 30px rgba(80,50,30,.14);--rayon:12px}
html[data-theme="brique"]     {--bg:#fbece7;--panneau:#fffaf8;--ligne:#f2d3c8;--txt:#3b1d17;--att:#8b6154;--acc:#c1442a;--auj:#fce1d8;--case:#fffaf8;--case-ext:#fcece6;--ombre:0 10px 30px rgba(120,45,25,.14);--rayon:12px}
html[data-theme="soleil"]     {--bg:#fdf7e3;--panneau:#fffdf2;--ligne:#efe2b6;--txt:#383013;--att:#7d7038;--acc:#c99700;--auj:#fcf2c8;--case:#fffdf2;--case-ext:#f9f4e2;--ombre:0 10px 30px rgba(110,90,20,.14);--rayon:16px}
html[data-theme="corail"]     {--bg:#fff2ee;--panneau:#fffbf9;--ligne:#f8dad1;--txt:#391f1a;--att:#8e6559;--acc:#e35d3f;--auj:#ffe6dd;--case:#fffbf9;--case-ext:#fceee9;--ombre:0 10px 30px rgba(130,60,40,.14);--rayon:18px}
html[data-theme="prune"]      {--bg:#f4eef6;--panneau:#fdfbff;--ligne:#e5d7ec;--txt:#2e1938;--att:#765f85;--acc:#8e3fa8;--auj:#f3e4f8;--case:#fdfbff;--case-ext:#f6eff9;--ombre:0 10px 30px rgba(70,30,90,.14);--rayon:14px}
html[data-theme="graphite"]   {--bg:#23262c;--panneau:#2c3037;--ligne:#3b4048;--txt:#f0f2f5;--att:#a3abb6;--acc:#4d8dff;--auj:#333a46;--case:#292d34;--case-ext:#25282e;--ombre:0 12px 34px rgba(0,0,0,.45);--rayon:14px}
html[data-theme="nuit"]       {--bg:#0a1220;--panneau:#131d31;--ligne:#26334f;--txt:#e8f0fc;--att:#93a6c8;--acc:#31c4f3;--auj:#17273f;--case:#111a2c;--case-ext:#0d1524;--ombre:0 12px 34px rgba(0,0,0,.5);--rayon:14px}
html[data-theme="minuit"]     {--bg:#14161a;--panneau:#1d2026;--ligne:#30343b;--txt:#ece8e1;--att:#9a938a;--acc:#d8a029;--auj:#272b32;--case:#1a1d22;--case-ext:#171a1e;--ombre:0 12px 34px rgba(0,0,0,.5);--rayon:14px}
html[data-theme="ardoise"]    {--bg:#eceff1;--panneau:#ffffff;--ligne:#d2dade;--txt:#1d282d;--att:#63737b;--acc:#177f66;--auj:#e4efeb;--case:#ffffff;--case-ext:#f0f3f5;--ombre:0 10px 30px rgba(30,55,60,.12);--rayon:14px}
html[data-theme="neon"]       {--bg:#08090d;--panneau:#11141b;--ligne:#232a38;--txt:#eafffb;--att:#7f95a3;--acc:#00e5c0;--auj:#132c2e;--case:#0e1117;--case-ext:#0a0c11;--ombre:0 12px 34px rgba(0,229,192,.20);--rayon:18px}
html[data-theme="bordeaux"]   {--bg:#f7edea;--panneau:#fffaf8;--ligne:#ead3cd;--txt:#38181e;--att:#8a6068;--acc:#7b1e34;--auj:#f7e1e4;--case:#fffaf8;--case-ext:#f9eee9;--ombre:0 10px 30px rgba(90,20,45,.16);--rayon:12px}
html[data-theme="aube"]       {--bg:#fff3ec;--panneau:#fffaf7;--ligne:#f6dfd2;--txt:#2a2140;--att:#7d6a8b;--acc:#e0644a;--auj:#ffe8dc;--case:#fffaf7;--case-ext:#fdf1ea;--ombre:0 10px 30px rgba(120,70,60,.14);--rayon:18px}
html[data-theme="lisibilite"] {--bg:#ffffff;--panneau:#ffffff;--ligne:#111111;--txt:#000000;--att:#2b2b2b;--acc:#0033cc;--auj:#fff6a8;--case:#ffffff;--case-ext:#f0f0f0;--ombre:0 10px 30px rgba(0,0,0,.22);--rayon:6px}

/* --- Animations (dosées par html[data-anim]) --------------------------------- */
@keyframes apparition {from {opacity:0; transform:translateY(6px) scale(.985)} to {opacity:1; transform:none}}
@keyframes surgir     {from {opacity:0; transform:scale(.9)} to {opacity:1; transform:none}}
@keyframes halo       {0%,100% {box-shadow:0 0 0 0 rgba(255,170,0,0)} 30% {box-shadow:0 0 0 4px var(--acc)}}
html[data-anim="legere"]  .case,html[data-anim="legere"]  .el {animation:apparition .18s ease-out}
html[data-anim="normale"] .case,html[data-anim="normale"] .el {animation:apparition .28s ease-out}
html[data-anim="normale"] .voile .boite {animation:surgir .22s ease-out}
html[data-anim="appuyee"] .case,html[data-anim="appuyee"] .el {animation:apparition .42s cubic-bezier(.2,.8,.2,1)}
html[data-anim="appuyee"] .voile .boite {animation:surgir .34s cubic-bezier(.2,.8,.2,1)}
html[data-anim="appuyee"] .jour-vue .bandeau {animation:apparition .5s cubic-bezier(.2,.8,.2,1)}
.cible {animation:halo 1.6s ease-in-out 2}    /* l'événement trouvé par la recherche */
@media (prefers-reduced-motion:reduce) {* {animation:none !important; transition:none !important}}

* {box-sizing:border-box}
/* Le fond du thème couvre TOUTE la page : plus de bande laissée à la couleur du navigateur. */
html {background:var(--bg)}
body {margin:0;background:var(--bg);color:var(--txt);min-height:100vh;
      font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      /* Colonne pleine hauteur : en-tête, bloc du calendrier, pied de page se touchent,
         sans bande de fond entre eux. */
      min-height:100vh;display:flex;flex-direction:column}
a {color:var(--acc)}
button,input,select {font:inherit;color:inherit}
button {background:var(--panneau);border:1px solid var(--ligne);border-radius:10px;
        padding:7px 13px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
button:hover {border-color:var(--acc);color:var(--acc)}
button.on {background:var(--acc);border-color:var(--acc);color:#fff}
input,select {background:var(--panneau);border:1px solid var(--ligne);border-radius:10px;padding:7px 11px}
input:focus,select:focus,button:focus {outline:2px solid var(--acc);outline-offset:2px}

/* --- En-tête : titre, recherche, vues, actions -------------------------------- */
.barre {position:sticky;top:0;z-index:12;background:var(--panneau);border-bottom:1px solid var(--ligne);
        padding:12px 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.barre h1 {font-size:20px;margin:0;font-weight:700;letter-spacing:-.01em}
.ico-titre {font-size:22px;vertical-align:-2px;margin-right:4px}
.badge {font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
        color:var(--acc);border:1px solid var(--acc);border-radius:20px;padding:2px 9px;vertical-align:2px}
.recherche {display:flex;gap:7px;align-items:center;flex:1 1 260px;max-width:430px}
.recherche input {flex:1;border-radius:20px;min-width:0}
.recherche button {border-radius:20px;background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.recherche button:hover {color:#fff;filter:brightness(1.08)}
.compte-recherche {font-size:12.5px;color:var(--att);min-width:74px}
.vues button {padding:7px 13px;border-radius:20px;display:inline-flex;gap:6px;align-items:center}
.periode {font-weight:700;min-width:150px;text-align:center;text-transform:capitalize}
.liens {display:flex;gap:8px;align-items:center;font-size:14px;color:var(--att);flex-wrap:wrap}
.liens a {text-decoration:none}
.theme {font-size:13px;display:flex;gap:6px;align-items:center;color:var(--att)}
.icone-admin {text-decoration:none;font-size:17px;line-height:1;padding:7px 10px;border-radius:10px;
              border:1px solid var(--ligne);background:var(--panneau);opacity:.8}
.icone-admin:hover {opacity:1;border-color:var(--acc)}


/* --- Une seule ligne de navigation, glissante sur téléphone --------------------- */
/* Les quatre boutons et la période forment UNE ligne. Sur un grand écran, tout tient.
   Sur téléphone, la ligne se fait glisser de gauche à droite sans jamais se casser. */
.ligne-nav {display:flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap}
.ligne-nav .vues, .ligne-nav .nav-periode {display:flex;gap:6px;align-items:center;height:40px}
/* Tous les boutons de la ligne ont la MÊME hauteur : l'icône seule ne décale plus rien. */
.ligne-nav button {height:40px;display:inline-flex;align-items:center;justify-content:center;
                   padding:0 12px;flex:0 0 auto}
@media (max-width:860px) {
  /* Le bandeau devient une bande qui défile : ni retour à la ligne, ni bouton perdu. */
  .barre {-webkit-overflow-scrolling:touch}
  .ligne-nav {overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
              max-width:100%;width:100%;flex-wrap:nowrap;padding-bottom:2px}
  .ligne-nav .vues, .ligne-nav .nav-periode {flex-wrap:nowrap}
  .ligne-nav::-webkit-scrollbar {height:4px}
  .ligne-nav::-webkit-scrollbar-thumb {background:var(--ligne);border-radius:4px}
  .ligne-nav .vues, .ligne-nav .nav-periode {flex:0 0 auto}
  .vues button {flex:0 0 auto}
  .nav-periode {flex:0 0 auto}
}

/* --- En-tête unique ombré, sous-barre d'outils, icône de compte ---------------- */
/* Une seule bande en haut, avec une ombre qui la détache nettement du calendrier. */
/* Un seul bandeau : titre, navigation, période, recherche, outils — tous sur la même ligne.
   Il reste collé en haut en permanence (position:sticky). */
.barre {position:sticky;top:0;z-index:12;background:var(--panneau);
        border-bottom:2px solid var(--acc);padding:11px 18px;display:flex;flex-wrap:wrap;
        gap:14px;align-items:center;
        box-shadow:0 6px 18px rgba(15,25,45,.12)}
.barre .recherche {margin-left:auto}          /* la recherche va complètement à droite */
.vues {display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vues .aujourd-b {font-weight:700;color:var(--acc);border-color:var(--acc)}
/* Engrenage des réglages, à côté du compte en haut à droite */
.bouton-reglages {display:inline-flex;align-items:center;justify-content:center;
                  width:38px;height:38px;border-radius:12px;border:1px solid var(--ligne);
                  background:var(--fond);font-size:18px;text-decoration:none;line-height:1}
.bouton-reglages:hover {border-color:var(--acc)}
/* Icône de compte (🧑) : la porte de l'administration, en haut à droite. */
.icone-compte {text-decoration:none;font-size:19px;line-height:1;padding:6px 9px;border-radius:50%;
               border:1px solid var(--ligne);background:var(--panneau);opacity:.9}
.icone-compte:hover {opacity:1;border-color:var(--acc);background:var(--auj)}
/* Le calendrier ne colle plus à l'en-tête : un peu d'air au-dessus de la grille. */
.centre {padding-top:20px}
/* Titre de l'événement dans la fenêtre : bien plus gros et en gras */
.boite h2.titre-ev {font-size:25px;font-weight:800;line-height:1.15;margin:0 0 14px}
/* Boutons du bandeau : icône seule, plus compacts et mieux alignés */
.vues button {padding:7px 11px;font-size:17px;line-height:1}
.vues .aujourd-b {font-size:19px}
/* Champ avec bouton « + » accolé (création rapide d'une catégorie) */
.champ-plus {display:flex;gap:6px;align-items:stretch}
.champ-plus select {flex:1 1 auto;min-width:0}
.champ-plus button {flex:0 0 auto;width:38px;padding:0;font-size:17px;font-weight:700}
.nouvelle-cat {display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;
               margin-top:8px;padding:10px;border:1px dashed var(--ligne);border-radius:10px}
/* Masqué par l'attribut « hidden » : cette règle l'emporte sur le display:flex ci-dessus. */
.nouvelle-cat[hidden] {display:none}
.nouvelle-cat label {font-size:13px}
/* Champ « Tous les X jours » : masqué hors du mode « Tous les X jours » */
.ligne-rep label[hidden] {display:none}

/* --- Cadrage : le calendrier au centre, bordures sur les côtés ---------------- */
/* Les bandes latérales, le bloc central et le pied de page forment UNE SEULE surface
   colorée, du haut du calendrier jusqu'au bas de la page. Les bandes latérales sont donc
   dans le même conteneur que le pied de page : placées dans le conteneur du seul
   calendrier, elles s'arrêtaient à sa hauteur et le fond de page réapparaissait dessous
   (bande claire visible, et rupture de couleur entre les côtés et le bas). */
.cadreur {display:flex;justify-content:center;align-items:stretch;flex:1 1 auto}
.bordure {flex:0 0 auto;align-self:stretch;background:var(--bordure-c,transparent)}
.centre {flex:1 1 auto;width:100%;background:var(--panneau);padding:14px 16px 18px;
         display:flex;flex-direction:column}
/* Le calendrier remplit la hauteur du bloc : la couleur de fond couvre ainsi toute la
   surface, en largeur comme en hauteur, dans les trois vues. */
#calendrier {flex:1 1 auto;display:flex;flex-direction:column}
.jour-vue, .grille, .semaine {flex:1 1 auto}
.cadreur .bordure, .centre {min-height:100%}
.bas-page {display:flex;justify-content:center;align-items:stretch;flex:0 0 auto}
.carte {background:var(--panneau);border:1px solid var(--ligne);border-radius:var(--rayon);
        box-shadow:var(--ombre);overflow:hidden}

/* --- Grille du mois ---------------------------------------------------------- */
.grille {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:6px}
.grille .jour-sem {color:var(--att);font-size:11.5px;font-weight:700;text-transform:uppercase;
                   letter-spacing:.08em;padding:8px 6px;text-align:center}
.grille .case {background:var(--case);border:1px solid var(--ligne);border-radius:10px;
               min-height:112px;padding:7px;display:flex;flex-direction:column;gap:5px}
.grille .case.hors {background:var(--case-ext);opacity:.6}
.grille .case.auj {background:var(--auj);border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.grille .num {font-size:12.5px;font-weight:700;color:var(--att);display:flex;align-items:center;gap:6px;min-height:21px}
.grille .case.auj .num {color:#fff;background:var(--acc);border-radius:40px;padding:1px 9px;width:max-content}
.grille .num .aujourd {font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--acc)}
.grille .case.auj .num .aujourd {color:#fff}
.grille.edit .case {cursor:pointer}
.grille.edit .case:hover {border-color:var(--acc)}
.case.depot {border-color:var(--acc);background:var(--auj)}

/* --- Événement (toutes vues) -------------------------------------------------- */
.el {display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:9px;cursor:pointer;
     background:color-mix(in srgb, var(--el-c,#888) 14%, transparent);
     border-left:4px solid var(--el-c,#888);overflow:hidden}
.el:hover {background:color-mix(in srgb, var(--el-c,#888) 26%, transparent)}
.el .h {font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--el-c,#666);flex:0 0 auto}
.el .ico {font-size:24px;line-height:1;flex:0 0 auto}   /* icônes bien visibles, avant l'heure */
.el b {font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grille .el b {font-size:13px}
.grille.edit .el {cursor:grab}
.el.enlevement {opacity:.35}

/* --- Vue semaine -------------------------------------------------------------- */
.semaine {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:8px}
.semaine .col {background:var(--case);border:1px solid var(--ligne);border-radius:12px;
               min-height:340px;padding:9px;display:flex;flex-direction:column;gap:7px}
.semaine .col.auj {background:var(--auj);border-color:var(--acc)}
.semaine .entete {display:flex;flex-direction:column;gap:1px;padding-bottom:7px;border-bottom:1px solid var(--ligne)}
.semaine .entete .j {font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--att)}
.semaine .entete .d {font-size:22px;font-weight:800;letter-spacing:-.02em}
.semaine .col.auj .entete .d,.semaine .col.auj .entete .j {color:var(--acc)}
.semaine .el b {white-space:normal}

/* --- Vue journée : grande typographie ---------------------------------------- */
.jour-vue {padding:10px 14px 20px;display:flex;flex-direction:column;flex:1 1 auto;
           cursor:pointer}
.jour-vue .liste {flex:0 0 auto}
.jour-vue .bandeau {display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;
                    padding:14px 16px;border-radius:var(--rayon);background:var(--case);
                    border:1px solid var(--ligne);margin-bottom:14px}
.jour-vue .numeros {display:flex;align-items:baseline;gap:14px}
.jour-vue .gros-jour {font-size:64px;font-weight:800;line-height:.9;letter-spacing:-.03em;color:var(--acc)}
.jour-vue .nom-jour {font-size:30px;font-weight:750;text-transform:capitalize;letter-spacing:-.02em}
.jour-vue .etiquettes {display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.jour-vue .etiquette {font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
                      color:var(--att);border:1px solid var(--ligne);border-radius:20px;padding:4px 12px}
.jour-vue .liste {display:flex;flex-direction:column;gap:10px}
.jour-vue .el {padding:14px 18px;border-left-width:7px;border-radius:12px}
.jour-vue .el .h {font-size:22px}
.jour-vue .el .ico {font-size:38px}
.jour-vue .el b {font-size:22px;font-weight:700;white-space:normal}
.jour-vue .vide {color:var(--att);padding:22px;text-align:center;border:1px dashed var(--ligne);border-radius:12px}

/* --- Modale ------------------------------------------------------------------- */
.voile {position:fixed;inset:0;background:rgba(10,14,22,.5);display:flex;align-items:center;
        justify-content:center;padding:16px;z-index:20}
.voile[hidden] {display:none}
.boite {background:var(--panneau);border:1px solid var(--ligne);border-radius:var(--rayon);
        box-shadow:var(--ombre);padding:20px 22px;width:min(460px,100%);margin:0;max-height:92vh;overflow:auto}
.boite h2 {margin:0 0 10px;font-size:19px;display:flex;align-items:center;gap:10px}
.boite h2 .ico {font-size:26px}
.boite .ligne {margin:6px 0;color:var(--att)}
.boite label {display:block;margin:12px 0;font-size:13.5px;color:var(--att)}
.boite label input,.boite label select {display:block;width:100%;margin-top:5px;color:var(--txt)}
.boite .rangee {display:flex;gap:10px}
.boite .rangee label {flex:1}
.actions {display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.actions .principal {background:var(--acc);border-color:var(--acc);color:#fff;font-weight:650}
.actions .danger {border-color:#c0392b;color:#c0392b}
.actions .danger:hover {background:#c0392b;color:#fff;border-color:#c0392b}
.pastille-c {width:12px;height:12px;border-radius:4px;display:inline-block;flex:0 0 auto}

/* --- Légende et pied de page -------------------------------------------------- */
/* La légende pousse le pied de page vers le bas, et les deux restent dans la même
   surface que le calendrier : aucune bande d'une autre couleur ne vient s'y glisser. */
.legende {display:flex;gap:14px;flex-wrap:wrap;padding:12px 16px;font-size:13.5px;color:var(--att);
          background:var(--panneau);border-top:1px solid var(--ligne);margin-top:auto}
.legende span.item {display:flex;gap:6px;align-items:center}
/* Pied de page : exactement la couleur des bordures latérales, dans le même alignement
   qu'elles (mêmes bandes latérales de part et d'autre), pour qu'aucune rupture de teinte
   n'apparaisse entre le côté et le bas. */
footer {margin:0;padding:0;height:26px;flex:0 0 26px;background:var(--bordure-c,var(--panneau))}

/* --- Administration : page séparée, onglets ---------------------------------- */
.admin-page {max-width:1080px;margin:0 auto;padding:18px 16px 60px}
.onglets {display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
.onglets button {border-radius:20px;padding:8px 18px;font-weight:600}
.panneau {background:var(--panneau);border:1px solid var(--ligne);border-radius:var(--rayon);
          box-shadow:var(--ombre);padding:18px 20px}
.panneau h2 {margin:0 0 4px;font-size:17px}
.panneau p.aide {color:var(--att);font-size:13px;margin:6px 0 14px}
.grille-champs {display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.grille-champs label {display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--att)}
.grille-champs input,.grille-champs select {width:100%}
.admin-liste {display:flex;flex-direction:column;gap:8px;margin:12px 0 0}
.admin-liste .item {display:flex;gap:10px;align-items:center;justify-content:space-between;
                    border:1px solid var(--ligne);border-radius:10px;padding:9px 12px;flex-wrap:wrap}
.admin-liste .item .g {display:flex;gap:9px;align-items:center;min-width:0}
.admin-liste .item .g b {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44ch}
.admin-liste .item .droite {display:flex;gap:7px}
.admin-liste .item .petit {font-size:12.5px;padding:4px 10px}
.admin-liste .quand {color:var(--att);font-size:12.5px;font-variant-numeric:tabular-nums}
.form-ligne {display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.form-ligne input[type=text] {flex:1;min-width:130px}
.form-ligne input[type=color] {width:48px;height:36px;padding:3px}
.alerte {background:#c0392b;color:#fff;padding:9px 12px;border-radius:10px;font-size:14px}
.toast {position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;
        background:var(--panneau);border:1px solid var(--acc);border-radius:12px;
        padding:11px 18px;box-shadow:var(--ombre);font-size:14px}
.toast.erreur {border-color:#c0392b;color:#c0392b}
.toast[hidden] {display:none}

/* --- Recherche : navigation entre les résultats --------------------------------- */
.nav-recherche {display:inline-flex;gap:4px}
.nav-recherche[hidden] {display:none}          /* masquées tant qu'aucune recherche n'est faite */
.nav-recherche button {padding:7px 11px;line-height:1}

/* --- Bouton de connexion de l'administrateur, sur la page publique -------------- */
.bouton-connexion {text-decoration:none;font-weight:700;color:var(--acc);
  border-color:var(--acc);padding:8px 13px;border-radius:10px}
.bouton-connexion:hover {background:var(--acc);color:#fff}

/* --- Fenêtre d'événement condensée + volet du thème + refonte administration --- */
/* 1. Fenêtre condensée : titre pleine largeur, date et heure côte à côte, icône courte. */
#form-edition.condense {display:flex;flex-direction:column;gap:10px;margin-top:8px}
#form-edition.condense label {display:flex;flex-direction:column;gap:4px;font-size:12.5px;
  color:var(--att);flex:1 1 auto;min-width:0}
#form-edition.condense label.pleine {flex:1 1 100%}
#form-edition.condense .ligne-dh, #form-edition.condense .ligne-ci {display:flex;gap:10px;align-items:flex-end}
#form-edition.condense .ligne-ci label.court {flex:0 0 96px}       /* champ d'icône réduit */
#form-edition.condense input, #form-edition.condense select {width:100%}
#voile-edition .boite {width:min(500px,100%);padding:16px 18px}
#voile-edition h2 {margin:0}          /* la taille du titre est fixée par .titre-ev */
#voile-edition .actions {margin-top:12px;gap:7px}
#voile-edition .actions button {padding:8px 12px;font-size:14px}
#voile-edition .aide {margin-top:9px;font-size:12px}

/* 1 bis. Croix de fermeture en haut à droite, et petit bouton « + » de répétition. */
#voile-edition .boite {position:relative}
.croix-fermer {position:absolute;top:8px;right:8px;width:30px;height:30px;padding:0;font-size:14px;
  line-height:1;border-radius:50%;border:1px solid var(--ligne);background:var(--carte);
  color:var(--att);cursor:pointer}
.croix-fermer:hover {background:var(--dang,#c0392b);border-color:var(--dang,#c0392b);color:#fff}
.plus {align-self:flex-start;font-size:12.5px;padding:6px 11px;border-radius:999px}
#form-edition.condense .repetition[hidden] {display:none}
#form-edition.condense .repetition {display:flex;flex-direction:column;gap:8px;
  background:var(--case);border:1px solid var(--ligne);border-radius:12px;padding:10px 12px}
#form-edition.condense .ligne-rep {display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
#form-edition.condense .ligne-rep label {flex:1 1 130px}
#form-edition.condense .ligne-rep label.court {flex:0 0 92px}
#form-edition.condense .repetition .aide {margin:0}

/* 2. Volet du thème : posé sous la barre, ouvert par le bouton 🎨 (titulaire connecté). */
.volet-theme {display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  padding:10px 18px;margin:0;background:var(--panneau);border-bottom:1px solid var(--ligne)}
.volet-theme[hidden] {display:none}
.volet-theme label {display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--att);
  flex:1 1 240px}

/* 3. Administration : bandeau, onglets à deux lignes, groupes de réglages, carte d'action. */
.admin-barre {gap:12px}
.badge {font-size:11px;font-weight:600;color:var(--att);border:1px solid var(--ligne);
  border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:middle}
.lien-bouton {text-decoration:none;display:inline-block;padding:9px 15px;border-radius:10px;
  background:var(--acc);border:1px solid var(--acc);color:#fff;font-weight:700}
.lien-bouton:hover {filter:brightness(1.06)}
.onglets {display:flex;gap:9px;flex-wrap:wrap;margin:0 0 16px}
.onglets button {display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;
  text-align:left;line-height:1.25}
.onglets .o-ico {font-size:19px}
.onglets .o-txt {display:flex;flex-direction:column}
.onglets .o-txt b {font-size:14px}
.onglets .o-txt small {font-size:11.5px;color:var(--att);font-weight:500}
.onglets button.on .o-txt small {color:inherit;opacity:.85}
.carte-action {background:var(--carte);border:1px solid var(--ligne);border-radius:16px;
  padding:14px 18px 16px;margin:6px 0 14px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.carte-action .rappel {margin:0 0 14px}
.recap {background:var(--carte);border:1px solid var(--ligne);border-radius:12px;
  padding:10px 14px;margin:0}
.groupe {border:1px solid var(--ligne);border-radius:16px;padding:14px 16px 6px;margin:0 0 14px;
  background:var(--carte)}
.groupe legend {font-weight:700;font-size:13.5px;padding:0 8px;color:var(--acc)}
.groupe .aide {margin:8px 0 4px}
@media (max-width:820px) {
  .onglets button {flex:1 1 100%}
  #form-edition.condense .ligne-ci label.court {flex:0 0 84px}
}

/* --- Animations paramétrables ------------------------------------------------- */
/* 1. Apparition des cases et des colonnes : dosée par data-anim (« Animations »). */
@keyframes el-entree { from {opacity:0; transform:translateY(4px)} to {opacity:1; transform:none} }
@keyframes el-entree-appuyee { from {opacity:0; transform:translateY(10px) scale(.96)}
                              to {opacity:1; transform:none} }
html[data-anim="legere"] .el  {animation:el-entree .18s ease-out both}
html[data-anim="normale"] .el {animation:el-entree .32s ease-out both}
html[data-anim="appuyee"] .el {animation:el-entree-appuyee .48s cubic-bezier(.2,.9,.3,1.2) both}
html[data-anim="aucune"] .el  {animation:none}

/* 2. Changement de vue : la grille entre selon le réglage « Changement de vue ». */
@keyframes vue-glisse { from {opacity:0; transform:translateX(26px)} to {opacity:1; transform:none} }
@keyframes vue-fondu   { from {opacity:0} to {opacity:1} }
@keyframes vue-zoom    { from {opacity:0; transform:scale(.97)} to {opacity:1; transform:none} }
@keyframes vue-bascule { from {opacity:0; transform:perspective(700px) rotateX(8deg)} to {opacity:1; transform:none} }
#calendrier.entree {animation-duration:.36s; animation-timing-function:cubic-bezier(.2,.8,.2,1);
                    animation-fill-mode:both}
html[data-transition="glisse"]  #calendrier.entree {animation-name:vue-glisse}
html[data-transition="fondu"]   #calendrier.entree {animation-name:vue-fondu}
html[data-transition="zoom"]    #calendrier.entree {animation-name:vue-zoom}
html[data-transition="bascule"] #calendrier.entree {animation-name:vue-bascule}
html[data-transition="aucune"]  #calendrier.entree {animation:none}

/* 3. Survol d'un jour : la case grossit, au-dessus de ses voisines. */
.case, .col {position:relative; transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease}
html[data-survol="leger"] .case:hover, html[data-survol="leger"] .col:hover {transform:scale(1.03); z-index:4}
html[data-survol="net"]   .case:hover, html[data-survol="net"]   .col:hover {transform:scale(1.08); z-index:4;
  box-shadow:0 10px 26px rgba(0,0,0,.22)}
html[data-survol="fort"]  .case:hover, html[data-survol="fort"]  .col:hover {transform:scale(1.15); z-index:5;
  box-shadow:0 16px 38px rgba(0,0,0,.28)}
/* Le grossissement ne doit pas gêner le survol de dépôt pendant un glisser-déposer */
html[data-survol] .case.survol, html[data-survol] .col.survol {transform:none}
/* Sur téléphone : pas de survol. On se fie à la présence d'une souris (pointer:coarse),
   et non au seul « hover », pour ne pas neutraliser l'effet sur un poste de bureau. */
@media (pointer:coarse) {
  html[data-survol] .case:hover, html[data-survol] .col:hover {transform:none; box-shadow:none}
}

/* --- Mode modification en direct sur le calendrier ---------------------------- */
body.mode-edition .case, body.mode-edition .col {cursor:pointer}
body.mode-edition .case:hover, body.mode-edition .col:hover {outline:2px dashed var(--acc);
  outline-offset:-3px}
body.mode-edition .el {cursor:grab;padding-right:22px}   /* place pour la croix */
body.mode-edition .el:active {cursor:grabbing}
.el.glisse {opacity:.45}
.case.survol, .col.survol {background:color-mix(in srgb, var(--acc) 14%, transparent);
  box-shadow:inset 0 0 0 2px var(--acc)}
/* Croix de suppression : visible seulement en mode modification */
.el .sup {position:absolute;top:3px;right:3px;width:18px;height:18px;line-height:1;padding:0;
  border-radius:50%;border:0;background:rgba(0,0,0,.28);color:#fff;font-size:11px;cursor:pointer}
.el .sup:hover {background:var(--dang,#c0392b)}
.el {position:relative}

/* --- Administration : rappel des gestes sur le calendrier -------------------- */
.rappel {margin:6px 0 18px;padding-left:20px;line-height:1.9}
.rappel b {color:var(--acc)}

/* --- Connexion ---------------------------------------------------------------- */
/* L'écran de connexion reçoit le fond vivant de neweb.pro : fond profond,
   halos colorés, grille technique estompée, réseau de nœuds animé par-dessus.
   Le thème du calendrier reste appliqué à la boîte (lisibilité du formulaire). */
body.connexion {
  display:flex;align-items:center;justify-content:center;min-height:100vh;padding:18px;
  position:relative;overflow:hidden;
  background:#071a2f;                    /* même fond que neweb.pro */
  background-image:radial-gradient(1200px 600px at 15% 0%, #0d2d4d 0%, transparent 60%),
                   radial-gradient(900px 500px at 90% 100%, #0a2340 0%, transparent 55%);
}

/* Décor : plein écran, derrière la boîte, jamais cliquable. */
.decor-connexion {position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}

.halo {position:absolute;display:block;border-radius:50%;filter:blur(72px)}
.halo--1 {
  width:46vw;height:46vw;min-width:320px;min-height:320px;top:-12%;left:-8%;
  background:radial-gradient(circle, rgba(69,217,240,.38), transparent 68%);
  animation:halo-respire 14s ease-in-out infinite;
}
.halo--2 {
  width:52vw;height:52vw;min-width:340px;min-height:340px;right:-14%;bottom:-22%;
  background:radial-gradient(circle, rgba(111,150,255,.34), transparent 68%);
  animation:halo-respire 19s ease-in-out infinite reverse;
}
@keyframes halo-respire {
  0%,100% {opacity:.75;transform:scale(1)}
  50%     {opacity:1;transform:scale(1.08)}
}

/* Grille technique : masque radial pour qu'elle s'éteigne sur les bords. */
.grille-technique {
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
}

.canevas-reseau {
  position:absolute;inset:0;width:100%;height:100%;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 55%, transparent 100%);
}

body.connexion .boite {width:min(420px,100%);position:relative;z-index:1}
body.connexion h1 {font-size:18px;margin:0 0 4px}
body.connexion .aide {color:var(--att);font-size:13px;margin:0 0 10px}
body.connexion label {display:block;margin:12px 0;font-size:13.5px;color:var(--att)}
body.connexion input {width:100%;margin-top:5px}
/* Bouton accordé au fond vivant : dégradé cyan → bleu, comme les accents neweb.pro. */
body.connexion .principal {
  background-image:linear-gradient(115deg, #45d9f0, #6f96ff);
  background-color:#45d9f0;border:none;color:#071a2f;font-weight:800;
  padding:12px 18px;width:100%;border-radius:12px;margin-top:6px;font-size:15px;
  letter-spacing:.01em;box-shadow:0 6px 20px rgba(69,217,240,.28);
  transition:filter 160ms ease, box-shadow 160ms ease;
}
body.connexion .principal:hover {filter:brightness(1.08);box-shadow:0 8px 26px rgba(69,217,240,.38)}
body.connexion .principal:disabled {filter:grayscale(.35) brightness(.92);box-shadow:none;cursor:progress}
.note {font-size:12.5px;color:var(--att);margin:14px 0 0;text-align:center}

/* La boîte se pose sur le fond : bord net, ombre profonde, léger relief. */
body.connexion .boite {
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 70px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.06) inset;
}
body.connexion h1 {color:var(--txt)}

/* Confort : sur un fond sombre, on allège le voile des halos si l'appareil
   est modeste, et on arrête tout mouvement quand le visiteur le demande. */
@media (prefers-reduced-motion: reduce) {
  .halo {animation:none}
}

/* --- Téléphone (vérifié sur 360, 390 et 430 px) ------------------------------- */
@media (max-width:820px) {
  .barre {padding:10px 12px;gap:9px;position:static}
  .sous-barre {padding:8px 12px;gap:9px}
  .barre h1 {font-size:17px}
  .recherche {order:3;flex:1 1 100%;max-width:none}
  .compte-recherche {display:none}
  .vues {order:4;flex:1 1 100%;justify-content:space-between;gap:5px}
  .vues button {padding:8px 10px;flex:1 1 auto}
  .periode {min-width:0;flex:1 1 100%;order:2;font-size:14px;text-align:left}
  .liens {order:5;flex:1 1 100%;justify-content:space-between;border-top:1px solid var(--ligne);padding-top:8px}
  .bordure {display:none}                       /* les bordures mangeraient l'écran */
  .centre {padding:10px}
  .carte {border-radius:12px}
  .grille {gap:3px;padding:4px}
  .grille .jour-sem {font-size:9.5px;padding:5px 1px;letter-spacing:0}
  .grille .case {min-height:84px;padding:4px;border-radius:8px;gap:3px}
  .grille .num {font-size:11px;min-height:16px}
  .grille .case.auj .num {padding:0 6px}
  .el {padding:3px 5px;border-left-width:3px;gap:4px}
  .grille .el b {font-size:11.5px}
  .el .ico {font-size:19px}
  .el .h {font-size:11px}
  .semaine {grid-template-columns:1fr;gap:10px;padding:6px}
  .semaine .col {min-height:0}
  .jour-vue .gros-jour {font-size:48px}
  .jour-vue .nom-jour {font-size:23px}
  .jour-vue .el b {font-size:18px}
  .jour-vue .el .ico {font-size:30px}
  .legende {font-size:12.5px;gap:10px}
  .admin-page {padding:12px 12px 50px}
  .panneau {padding:14px}
  .onglets button {flex:1 1 auto;text-align:center}
}
@media (max-width:430px) {
  .grille .case {min-height:70px;padding:3px}
  .grille .el b {font-size:10.5px}
  .el .ico {font-size:13px}
  .jour-vue .gros-jour {font-size:42px}
  .barre h1 {font-size:16px}
}

/* --- Flèches de navigation : larges, colorées, faciles à viser ------------------ */
/* Elles commandent le déplacement de période : semaine par semaine, jour par jour. */
.nav-periode .flech {width:46px;height:40px;padding:0;font-size:26px;font-weight:800;line-height:1;
                     color:#fff;background:var(--acc);border-color:var(--acc);
                     display:inline-flex;align-items:center;justify-content:center}
.nav-periode .flech:hover {filter:brightness(1.12)}
.nav-periode .flech:active {transform:scale(.96)}
.periode {font-weight:700;min-width:150px;text-align:center;text-transform:capitalize;
          font-size:16px}

/* --- Vue liste : tous les événements, l'actuel ou le prochain au centre ---------- */
.liste-vue {padding:4px 2px 20px}
.liste-totale {display:flex;flex-direction:column;gap:8px;max-width:900px;margin:0 auto}
.titre-mois {font-size:15px;font-weight:800;text-transform:capitalize;color:var(--acc);
             padding:14px 4px 4px;border-bottom:2px solid var(--acc);margin-bottom:2px}
.ligne-ev {display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:10px}
.ligne-ev .quand {flex:0 0 122px;font-size:13px;font-weight:700;color:var(--att);
                  text-transform:capitalize;white-space:nowrap}
.ligne-ev .corps {flex:1 1 auto;min-width:0}
.ligne-ev .corps .el {margin:0}
/* L'événement en cours ou à venir : mis en avant au centre de la liste */
.ligne-ev.centre-liste {background:var(--auj);box-shadow:inset 0 0 0 2px var(--acc)}
.ligne-ev.centre-liste .quand {color:var(--acc)}
/* Le trait « maintenant » sépare ce qui est passé de ce qui vient */
.maintenant {display:flex;align-items:center;gap:10px;margin:6px 0;color:var(--acc);
             font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.maintenant::before, .maintenant::after {content:'';height:2px;background:var(--acc);flex:1 1 auto}
/* --- Bloc de la clé d'accès : exemple d'appel, lisible comme du code -------------- */
.exemple-cle {background:var(--case);border:1px solid var(--ligne);border-radius:10px;
              padding:10px 12px;font-size:12.5px;line-height:1.5;overflow-x:auto;
              white-space:pre;color:var(--txt);margin:8px 0 0}
#cle-valeur {font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}