/* =====================================================================
   Absences & Remplacements — styles communs (affichage, saisie, installation)
   Thème clair « Les Persévérants » : fond menthe, couronne de lauriers et étoiles dorées (excellence), cartes blanches, en-tête de tableau bleu marine,
   compteurs teintés avec icônes, statuts en pastilles pastel.
   ===================================================================== */
:root{
  /* Surfaces */
  --fond:#eef7f4; --fond-2:#e3f3ee; --surface:#ffffff; --surface-2:#f6f9fb; --trait:#e2e9f0; --trait-2:#d3dde7;
  /* Texte */
  --encre:#13233a; --encre-2:#33445c; --gris:#6a7a8f;
  /* Couleurs de l'établissement */
  --marine:#2b4866; --bleu:#1f73e0; --menthe:#2bb38f; --menthe-fonce:#178a6c;
  /* Compteurs */
  --abs:#e42a20; --abs-fond:#ffeceb; --abs-bulle:#ffd3d0;   /* Absences : rouge */
  --rep:#1b8a4b; --rep-fond:#e9f8ef; --rep-bulle:#cdeedb;
  --ann:#f08a12; --ann-fond:#fff3e2; --ann-bulle:#ffe2bd;   /* Retards : orange */
  /* Statuts : texte / fond */
  --st-vert:#1a8a4a;   --st-vert-f:#daf5e4;
  --st-rouge:#d8261c;  --st-rouge-f:#fde2e0;
  --st-violet:#6d43cf; --st-violet-f:#ece5ff;
  --st-bleu:#2163c7;   --st-bleu-f:#e1ecff;
  --st-orange:#d26a06; --st-orange-f:#ffeedb;
  --st-ambre:#9a6a00;  --st-ambre-f:#fff3cf;
  --st-turquoise:#0b7f82; --st-turquoise-f:#d7f3f2;
  --st-rose:#b3266f;   --st-rose-f:#fbe1ef;
  --info:#1f73e0; --info-fond:#e5f0fd;
  --ombre:0 1px 2px rgba(19,35,58,.05),0 6px 20px rgba(19,35,58,.06);
  --font:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  /* Noms historiques (utilisés par l'assistant d'installation) */
  --bg:var(--surface-2); --fg:var(--encre); --fg-soft:var(--encre-2); --fg-mute:var(--gris);
  --green:var(--menthe-fonce); --red:var(--st-rouge); --gold:var(--ann); --ink:#ffffff; --line:var(--trait);
  --panel:var(--surface); --panel-2:var(--surface-2); --row:var(--surface);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  color:var(--encre);font-family:var(--font);
  background-color:var(--fond);
  background-image:
    radial-gradient(60% 50% at 0% 0%,rgba(43,179,143,.16),transparent 70%),
    radial-gradient(45% 45% at 100% 100%,rgba(43,179,143,.14),transparent 70%),
    radial-gradient(40% 35% at 62% 0%,rgba(43,179,143,.10),transparent 70%),
    linear-gradient(180deg,#f4fbf8,var(--fond));
  background-attachment:fixed;
}
body.hide-cursor{cursor:none}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
.ico{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== Décor (feuilles) ===== */
.deco{position:fixed;pointer-events:none;z-index:0}
.deco-feuilles{top:.3vw;left:58%;width:clamp(96px,8.2vw,240px);opacity:.95;filter:drop-shadow(0 6px 14px rgba(197,138,18,.18))}
.deco-coin{top:-1.6vw;left:-1.6vw;width:clamp(60px,5.2vw,150px);opacity:.45}
.deco-bas{right:-.4vw;bottom:-.4vw;width:clamp(70px,6.5vw,180px);opacity:.4}
/* Décor au choix (réglage « Décor ») : feuilles par défaut, scolaire, excellence, ou aucun */
.decor{display:none}
body:not([data-decor]) .decor-feuille,body[data-decor="feuille"] .decor-feuille,
body[data-decor="scolaire"] .decor-scolaire,body[data-decor="excellence"] .decor-excellence{display:block}
/* Feuilles : mêmes proportions que le modèle (plante entre le titre et l'horloge, base cachée derrière les compteurs) */
.deco-plante{top:-.25vw;left:58%;width:15.4vw;max-width:none}
.deco-coin-feuille{top:0;left:0;width:4.2vw;min-width:42px}
body[data-decor="feuille"]::before,body:not([data-decor])::before{content:"";position:fixed;z-index:0;pointer-events:none;
  top:-14vw;left:48%;width:22vw;height:22vw;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
.deco-toque{width:clamp(104px,9.4vw,270px)!important;top:.2vw!important;filter:drop-shadow(0 6px 12px rgba(19,35,58,.14))!important}
.deco-bas-gauche{left:-.6vw;bottom:-.6vw;width:clamp(80px,7vw,200px);opacity:.3}
.deco-fournitures.deco-bas{width:clamp(80px,7vw,200px);opacity:.3}
.board,.admin,.login,.install{position:relative;z-index:1}
/* TV et PC : l'écran tient sur une seule hauteur, sans ascenseur ; les pages défilent seules */
body.affichage.plein-ecran{height:100vh;height:100dvh;overflow:hidden}
body.plein-ecran .board{height:100%;min-height:0}
body.plein-ecran .info{min-height:0}
body.plein-ecran .info > .scroll{flex:1 1 auto;min-height:0;overflow:hidden}

/* ===== Écran d'affichage ===== */
body.affichage{font-size:clamp(13px,min(1.05vw,1.95vh),34px)} /* suit la largeur ET la hauteur : un écran large mais peu haut garde de la place pour le tableau */ /* le texte grandit avec l'écran, jusqu'aux TV 4K */
.board{min-height:100%;display:flex;flex-direction:column;gap:1.1em;padding:1.3em max(16px,1.6vw);margin:0 auto}

header{display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap;padding-inline:.4em}
.marque{display:flex;align-items:center;gap:.9em;min-width:0}
.marque-ico{font-size:2.9em;color:var(--bleu)}
.marque-ico .ico{stroke-width:1.9}
h1{margin:0;font-size:clamp(1.5em,2.1vw,2.55em);font-weight:800;line-height:1.05;letter-spacing:-.01em;color:var(--encre)}
.sous-titre{margin:.12em 0 0;font-size:clamp(.95em,1.2vw,1.45em);font-weight:500;color:var(--encre-2)}
.clock{display:flex;align-items:center;gap:.8em;background:var(--surface);border-radius:16px;box-shadow:var(--ombre);padding:.55em 1.1em .55em .95em}
.clock-ico{font-size:1.7em;color:var(--menthe-fonce)}
.clock-texte{text-align:right}
.time{font-size:clamp(1.6em,2.1vw,2.65em);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--encre)}
.date{margin-top:.15em;font-size:.92em;color:var(--encre-2);font-weight:500}
.date::first-letter{text-transform:uppercase}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2em}
.stat{border-radius:18px;display:flex;align-items:center;gap:1.1em;padding:1.1em 1.4em;box-shadow:var(--ombre);min-width:0}
.stat-bulle{width:4.6em;height:4.6em;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:1em}
.stat-bulle .ico{width:2.9em;height:2.9em;stroke-width:2.3}
.stat-texte{display:flex;flex-direction:column;min-width:0;flex:1}
.stat b{font-size:clamp(2.6em,3.6vw,4.6em);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat-label{font-size:clamp(1.2em,1.5vw,1.9em);font-weight:500;margin-top:.1em}
.stat-fleche{font-size:2em;flex-shrink:0}
.stat-fleche .ico{stroke-width:2.6}
.s-abs{background:var(--abs-fond)} .s-abs .stat-bulle{background:var(--abs-bulle);color:var(--abs)} .s-abs b,.s-abs .stat-label,.s-abs .stat-fleche{color:var(--abs)}
.s-rep{background:var(--rep-fond)} .s-rep .stat-bulle{background:var(--rep-bulle);color:var(--rep)} .s-rep b,.s-rep .stat-fleche{color:var(--rep)} .s-rep .stat-label{color:var(--encre)}
.s-ann{background:var(--ann-fond)} .s-ann .stat-bulle{background:var(--ann-bulle)} .s-ann b,.s-ann .stat-label,.s-ann .stat-fleche{color:var(--ann)}
.croix{width:3em;height:3em;border-radius:50%;background:var(--ann);color:#fff;display:grid;place-items:center}
.croix .ico{width:1.9em;height:1.9em;stroke-width:3}

.info{background:var(--surface);border-radius:20px;box-shadow:var(--ombre);padding:1.2em 1.3em 1.3em;flex:1;display:flex;flex-direction:column;min-width:0}
.info-head{display:flex;justify-content:space-between;align-items:center;gap:.6em 1.2em;padding:0 .4em .9em;flex-wrap:wrap}
.titre-bloc{display:flex;align-items:center;gap:.7em;min-width:0}
.titre-ico{font-size:2.3em;color:var(--menthe-fonce)}
h2{margin:0;font-size:clamp(1.5em,1.9vw,2.3em);font-weight:800;color:var(--encre)}
h2::first-letter{text-transform:uppercase}
.pager{display:flex;align-items:center;gap:.6em;color:var(--gris);font-size:1.05em;font-variant-numeric:tabular-nums;cursor:pointer;user-select:none}
.dots i{cursor:pointer}
.dots{display:flex;gap:.35em}
.dots i{width:.55em;height:.55em;border-radius:50%;background:var(--trait-2)}
.dots i.on{background:var(--marine)}

/* Tableau */
.scroll{overflow-x:auto;min-width:0;border-radius:14px;border:1px solid var(--trait)}
table{width:100%;min-width:980px;border-collapse:collapse;table-layout:fixed}
thead th{background:var(--marine);color:#fff;font-weight:600;font-size:1.1em;padding:.95em .8em;text-align:left;border-left:1px solid rgba(255,255,255,.12)}
thead th:first-child{border-left:0;padding-left:1.1em}
tbody td{background:var(--surface);padding:.9em .75em;font-size:1.2em;text-align:left;vertical-align:middle;overflow-wrap:break-word;border-top:1px solid var(--trait);border-left:1px solid var(--trait);color:var(--encre-2)}
tbody td:first-child{border-left:0;padding-left:1.1em}
tbody tr:nth-child(even) td{background:var(--surface-2)}
tbody td.strong{font-weight:800;color:var(--encre)}
td.day{font-weight:700;color:var(--encre);line-height:1.2;white-space:nowrap;padding-inline:.8em}
td.day small{display:block;font-weight:500;font-size:.78em;color:var(--gris);white-space:normal}
td.day small.fin{color:var(--encre-2);font-weight:600}
td.day small.retour,small.plage .retour,.carte-retour{color:var(--menthe-fonce);font-weight:700}
.carte-retour{margin:0;font-size:.92em}
/* Classes : jamais coupées ; plusieurs classes (séparées par ;) = une par ligne */
td.classes{overflow-wrap:normal;word-break:normal;line-height:1.25}
td.classes span{display:block;white-space:nowrap}
td.classes span + span{margin-top:.15em}
.carte .classe{white-space:nowrap}
/* Conseils de classe : page après les absences (TV, PC), section sous les fiches (mobile) */
.titre-ico .ico-abs{display:block}
body.page-conseils .stats,body.page-conseils .sous-titre{display:none}   /* page des conseils : ni compteurs ni sous-titre « Gestion des absences » */
td.heure{white-space:nowrap}   /* page des conseils : compteurs d'absences masqués */   /* même hauteur quelle que soit l'icône affichée */
.titre-ico .ico-conseils,body.page-conseils .titre-ico .ico-abs{display:none}
body.page-conseils .titre-ico .ico-conseils{display:block}
body.page-conseils .titre-ico{color:var(--st-bleu)}
.dots i.cons{background:#bcd3f3} .dots i.cons.on{background:var(--st-bleu)}
.badge.st-conseil{background:var(--st-bleu-f);color:var(--st-bleu)}
.carte-section{grid-column:1/-1;display:flex;align-items:center;gap:.5em;margin:1em 0 .1em;font-size:1.15em;font-weight:800;color:var(--encre)}
.carte-section .ico{width:1.3em;height:1.3em;color:var(--st-bleu)}
.carte-conseil h3{font-size:1.15em}
.moved .salle-recup{grid-column:1/-1}
tr.is-today td.day{color:var(--menthe-fonce)}
tr.is-past td{opacity:.7}
td.room{font-weight:600;color:var(--encre-2)}
td small.plage{display:block;font-size:.72em;color:var(--gris);margin-top:.15em}
.badge{display:inline-block;padding:.42em 1em;border-radius:9px;font-weight:700;font-size:.95em;white-space:nowrap}
.st-remplace{background:var(--st-vert-f);color:var(--st-vert)}
.st-absent{background:var(--st-rouge-f);color:var(--st-rouge)}
.st-retard{background:var(--st-violet-f);color:var(--st-violet)}
.st-avance{background:var(--st-bleu-f);color:var(--st-bleu)}
.st-reporte{background:var(--st-orange-f);color:var(--st-orange)}
.st-rattrape{background:var(--st-turquoise-f);color:var(--st-turquoise)}
.st-recupere{background:var(--st-rose-f);color:var(--st-rose)}
.st-attente{background:var(--st-ambre-f);color:var(--st-ambre)}
.desc{text-align:left;font-size:.95em;line-height:1.4;color:var(--encre-2)}
.desc strong{font-weight:700;color:var(--encre)}
.empty td{text-align:center!important;color:var(--gris);font-weight:500!important;padding:2.5em!important;background:var(--surface)!important}
tbody tr.fade td{animation:fade .5s ease both}
tbody tr.fade.is-past td{animation:none}
@keyframes fade{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){tbody tr.fade td{animation:none}}

/* Bandeau d'information */
footer{display:flex;align-items:center;gap:.9em;background:var(--info-fond);border-radius:14px;padding:.75em 1.1em;font-size:1.3em;color:var(--encre-2);margin-top:auto}
.info > footer{margin-top:auto}
.info > .scroll,.info > .cartes{margin-bottom:1.1em}
footer:has(#bandeau:empty){display:none}
.info-ico{width:2em;height:2em;border-radius:50%;background:var(--info);color:#fff;display:grid;place-items:center;flex-shrink:0}
.info-ico .ico{width:1.45em;height:1.45em;stroke-width:3}
footer .tel{color:var(--encre);font-weight:800;text-decoration:none;white-space:nowrap}
footer .tel:hover{text-decoration:underline}
.offline{position:fixed;left:50%;top:12px;transform:translateX(-50%);background:var(--st-rouge);color:#fff;font-weight:700;padding:.4em 1em;border-radius:999px;font-size:.9em;z-index:20;box-shadow:var(--ombre)}

/* Barre de navigation : visible seulement sur tablette et smartphone (jamais sur les écrans du hall) */
.navbar{display:flex;gap:.6em;flex-wrap:wrap;align-items:center;padding:0 .4em .9em}
.navbar .seg{font-size:.95em}
.navbar .nav{display:inline-flex;gap:.35em;margin-left:auto}
.navbar .nav button{background:var(--surface);color:var(--encre);border:1px solid var(--trait-2);border-radius:999px;min-width:2.6em;height:2.6em;padding:0 1em;font-size:.95em;font-weight:700;cursor:pointer}
.navbar .nav button:hover{background:var(--surface-2)}
.navbar .nav button:active,.navbar .seg button:active{transform:scale(.97)}

/* Fiches (à la place du tableau sur tablette et smartphone) */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:.7em;padding:.1em 0 .2em}
.carte-jour{grid-column:1/-1;margin:.6em .2em 0;font-weight:700;color:var(--encre-2);font-size:1.05em}
.carte-jour:first-child{margin-top:0}
.carte-jour.is-today{color:var(--menthe-fonce)}
.carte-jour::first-letter{text-transform:uppercase}
.carte{background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:.85em 1em;display:flex;flex-direction:column;gap:.4em;min-width:0;box-shadow:0 1px 2px rgba(19,35,58,.04)}
.carte.is-past{opacity:.7}
.carte-haut{display:flex;justify-content:space-between;align-items:center;gap:.6em}
.carte-quand{font-weight:700;color:var(--encre-2);font-variant-numeric:tabular-nums}
.carte h3{margin:0;font-size:1.2em;font-weight:800;overflow-wrap:anywhere;color:var(--encre)}
.carte-plage{margin:0;font-weight:700;color:var(--menthe-fonce);font-size:.95em}
.carte-meta{margin:0;color:var(--encre-2);overflow-wrap:anywhere}
.carte-meta b{color:var(--encre);font-weight:700}
.carte .badge{font-size:.85em;padding:.3em .8em}
.carte .desc{font-size:.95em;background:var(--surface-2);border-radius:9px;padding:.5em .75em}
.carte.fade{animation:fade .5s ease both}
.cartes .vide{grid-column:1/-1;text-align:center;color:var(--gris);padding:2em 1em;margin:0}
@media (prefers-reduced-motion:reduce){.carte.fade{animation:none}}

/* ===== Écran de saisie ===== */
body.saisie{font-size:15px}
.admin{max-width:1200px;margin:0 auto;padding:1.6em 16px 3em;display:flex;flex-direction:column;gap:1.4em}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap}
.admin-top .marque-ico{font-size:3em}
.admin-top h1{font-size:2em}
.admin-top p{margin:.2em 0 0;color:var(--encre-2)}
.admin-top .acts{display:flex;gap:.5em;flex-wrap:wrap;align-items:center}
.admin-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.4em;align-items:start}
.col{display:flex;flex-direction:column;gap:1.4em;min-width:0}
.card{background:var(--surface);border-radius:18px;box-shadow:var(--ombre);padding:1.3em;display:flex;flex-direction:column;gap:1em;min-width:0}
.card h2{font-size:1.25em}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:.8em;flex-wrap:wrap}
.btn{background:var(--surface);color:var(--encre);border:1px solid var(--trait-2);border-radius:10px;padding:.55em 1em;font-size:.95em;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--menthe-fonce);color:#fff;border-color:transparent}
.btn.primary:hover{background:#127559}
.btn.danger{background:transparent;color:var(--st-rouge);border-color:#f3b4af}
.btn.danger:hover{background:var(--st-rouge-f)}
.btn.danger.armed{background:var(--st-rouge);color:#fff;border-color:transparent}
.btn.small{padding:.4em .75em;font-size:.88em}
.btn:disabled{opacity:.5;cursor:wait}
form.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8em}
form.grid select,form.grid input{min-width:0;max-width:100%}
.full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:.3em;font-size:.85em;color:var(--encre-2);font-weight:600;letter-spacing:.02em}
label.check{flex-direction:row;align-items:center;gap:.6em}
input,select,textarea{font:inherit;font-size:1rem;background:var(--surface);color:var(--encre);border:1px solid var(--trait-2);border-radius:9px;padding:.55em .65em;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--bleu);outline:none;box-shadow:0 0 0 3px rgba(31,115,224,.15)}
input[type=checkbox]{accent-color:var(--menthe-fonce);width:1.1em;height:1.1em}
textarea{resize:vertical;min-height:3.2em}
.moved{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8em;background:var(--surface-2);border:1px dashed var(--trait-2);border-radius:12px;padding:.8em}
.moved p{grid-column:1/-1;margin:0;font-size:.85em;color:var(--encre-2)}
.form-actions{grid-column:1/-1;display:flex;gap:.6em;justify-content:flex-end;flex-wrap:wrap}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--trait);border-radius:999px;padding:3px;align-self:flex-start}
.seg button{background:transparent;color:var(--encre-2);border:0;border-radius:999px;padding:.4em .9em;font-size:.92em;font-weight:700;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--marine);color:#fff}
.seg button:hover:not([aria-pressed="true"]){background:var(--trait)}
.list{display:flex;flex-direction:column;gap:.5em;max-height:60vh;overflow-y:auto}
.item{background:var(--surface-2);border:1px solid var(--trait);border-radius:12px;padding:.65em .85em;display:flex;justify-content:space-between;align-items:center;gap:.8em}
.item .meta{min-width:0}
.item strong{display:block;color:var(--encre)}
.item small{color:var(--gris)}
.item small.motif{display:block;color:var(--encre-2)}
.item small.auteur{display:block;font-size:.8em}
.item .meta small{display:block}
/* Comptes utilisateurs */
.qui{display:inline-flex;align-items:center;gap:.5em;margin-right:.3em;color:var(--encre-2);background:var(--surface);border:1px solid var(--trait);border-radius:12px;padding:.35em .8em .35em .6em;box-shadow:var(--ombre)}
.qui .ico{width:1.5em;height:1.5em;color:var(--menthe-fonce)}
.qui b{display:block;color:var(--encre);line-height:1.15}
.qui small{display:block;font-size:.8em;color:var(--gris)}
.list.comptes{max-height:40vh}
.item.inactif,.item.passe{opacity:.6}
.role{display:inline-block;font-size:.72em;font-weight:700;padding:.15em .55em;border-radius:999px;margin-left:.45em;vertical-align:middle;background:var(--st-vert-f);color:var(--st-vert)}
.role-admin{background:var(--st-bleu-f);color:var(--st-bleu)}
.role-off{background:var(--st-rouge-f);color:var(--st-rouge)}
.role-moi{background:var(--surface);color:var(--gris);border:1px solid var(--trait-2)}
.card h3{margin:.6em 0 0;font-size:1.05em;color:var(--encre)}
.mdp-ligne{display:flex;gap:.5em;align-items:center}
.mdp-ligne input{flex:1;min-width:0;font-family:ui-monospace,Consolas,monospace;letter-spacing:.04em}
.item .acts{display:flex;gap:.4em;flex-shrink:0}
.item .badge{font-size:.75em;padding:.2em .6em;margin-left:.4em;vertical-align:middle}
input:disabled{opacity:.45;cursor:not-allowed;background:var(--surface-2)}
.hint{font-weight:400;color:var(--gris);letter-spacing:0}
label.prive{background:#fbf7ff;border:1px dashed #cdbdf0;border-radius:12px;padding:.7em}
.motif{color:var(--encre-2);font-style:italic}
.raccourcis{display:flex;flex-wrap:wrap;gap:.4em}
.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8em}
.note{color:var(--gris);font-size:.88em;margin:0;line-height:1.5}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--menthe-fonce);color:#fff;font-weight:700;padding:.6em 1.2em;border-radius:999px;z-index:30;box-shadow:var(--ombre);max-width:min(92vw,720px);text-align:center}
.toast.err{background:var(--st-rouge)}

/* Connexion */
.login{min-height:100%;display:grid;place-items:center;padding:16px}
.login form,.login .card{background:var(--surface);border-radius:18px;box-shadow:var(--ombre);padding:2em;width:min(420px,100%);display:flex;flex-direction:column;gap:1em}
.login .marque{margin-bottom:.3em}
.login .marque-ico{font-size:2.6em}
.login h1{font-size:1.6em}
.login .err{background:var(--st-rouge-f);color:var(--st-rouge);border-radius:9px;padding:.6em .8em;margin:0}

.info > .scroll{margin-bottom:1.1em}
/* PC à faible hauteur (portables 1366×768, écrans zoomés à 125 %…) : espacements resserrés pour afficher plus de lignes */
@media (min-width:1024px) and (max-height:860px){
  .board{gap:.75em;padding-block:.8em}
  .stat{padding:.65em 1.2em}
  .stat-bulle{width:3.6em;height:3.6em} .stat-bulle .ico{width:2.3em;height:2.3em}
  .croix{width:2.4em;height:2.4em} .croix .ico{width:1.5em;height:1.5em}
  .stat b{font-size:clamp(2.2em,3vw,3.6em)}
  .info{padding:.8em 1.1em 1em}
  .info-head{padding-bottom:.6em}
  thead th{padding:.65em .8em}
  tbody td{padding:.55em .75em}
  .info > .scroll{margin-bottom:.8em}
  footer{padding:.55em 1em;font-size:1.15em}
}
@media (max-width:900px){ .admin-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){
  form.grid,.settings,.moved{grid-template-columns:minmax(0,1fr)}
}

/* ===== Tablette ===== */
@media (max-width:1023px){
  .stat{padding:1em 1.1em;gap:.8em}
  .stat-bulle{width:3.8em;height:3.8em}
  .stat-fleche{display:none}
}

/* ===== Smartphone ===== */
@media (max-width:700px){
  body.affichage{font-size:15px}
  .board{gap:.8em;padding-block:1em}
  header{flex-direction:column;align-items:stretch;gap:.7em;padding-inline:.1em}
  .marque{gap:.6em}
  .marque-ico{font-size:2.6em}
  h1{font-size:1.45em}
  .sous-titre{font-size:.86em}
  .clock{padding:.55em .9em;gap:.6em;border-radius:14px}
  .clock-ico{font-size:1.6em}
  .clock-texte{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;flex:1;flex-wrap:wrap}
  .time{font-size:1.6em}
  .date{font-size:.85em;margin:0}
  .stats{gap:.5em}
  .stat{flex-direction:column;gap:.35em;padding:.75em .3em;text-align:center;border-radius:14px}
  .stat-bulle{width:2.6em;height:2.6em}
  .stat-bulle .ico{width:1.6em;height:1.6em}
  .croix{width:1.7em;height:1.7em} .croix .ico{width:1em;height:1em}
  .stat-texte{align-items:center}
  .stat b{font-size:1.9em}
  .stat-label{font-size:.74em}
  .info{padding:.9em .7em .8em;border-radius:16px}
  .info-head{padding:0 .2em .7em}
  .titre-ico{font-size:1.6em}
  h2{font-size:1.15em}
  .navbar{padding:0 0 .7em}
  .navbar .seg{width:100%;justify-content:space-between}
  .navbar .seg button{flex:1;padding-inline:.3em;white-space:nowrap}
  .navbar .nav{margin-left:0;width:100%}
  .navbar .nav button:nth-child(2){flex:1}
  footer{font-size:.9em;padding:.7em .9em;gap:.6em}
  .deco-feuilles,.deco-plante{display:none}
  .deco-coin-feuille{width:40px;min-width:0;opacity:.7}
  .deco-coin{width:44px;opacity:.3;top:-12px;left:-12px}
  .deco-fournitures{display:none}
}
/* Très petits téléphones */
.court{display:none}
@media (max-width:420px){ .long{display:none} .court{display:inline} }
@media (max-width:380px){
  .clock-texte{text-align:left}
}
/* Saisie sur smartphone : boutons des lignes sous le texte */
@media (max-width:520px){
  .item{flex-wrap:wrap}
  .item .acts{width:100%}
  .item .acts .btn{flex:1}
}