/* ====================== Cockpit — admin.css (S30) ======================
   Feuille commune à menu.html / panel.html / superadmin.html — tout ce que
   socle.css ne fournit pas déjà (structures propres à ces trois pages).
   Aucun token de couleur/police redéfini ici (§5.8) — uniquement var(...)
   et color-mix() sur les tokens du socle. */

.hidden{display:none!important}

/* Danger réel (vider la corbeille = suppression définitive) — seul
   usage légitime de --red hors état d'échec (msg.ko), pas une
   confirmation ordinaire. */
.act-danger{color:var(--red);border-bottom-color:var(--red)}
.act-danger:hover{color:var(--red);border-bottom-color:var(--red)}

/* Envoi en cours (brief "Retour visuel de l'envoi de photos") — le bouton
   reste visible mais n'agit plus, l'intitulé porte l'état. */
.act-busy{color:var(--text-faint);border-bottom-color:var(--hair);cursor:default;pointer-events:none}

/* S69 — garde anti double-appui (guardedAction(), web/assets/js/
   mobile-nav.js, réutilisée telle quelle sur superadmin.html). Même
   déclaration que .act-busy ci-dessus : c'est le nom de classe posé par
   le composant partagé qui diffère (.is-busy, pas .act-busy), jamais le
   rendu visuel attendu. */
.act.is-busy,.act-mute.is-busy{color:var(--text-faint);border-bottom-color:var(--hair);cursor:default;pointer-events:none}

/* ===== Connexion (panel.html / superadmin.html) ===== */
.login-box{max-width:360px;margin:18vh auto 0;padding:0 24px}
.login-title{font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);
  font-weight:300;margin:0 0 40px}

/* ===== Messages de retour ===== */
.msg{font-size:12px;margin-top:10px;min-height:14px}
.msg.ok{color:var(--green)}
.msg.ko{color:var(--red)}
/* Confirmation ordinaire, pas un succès critique (brief "Photos,
   orientation et gestion", point 6) — un seul message visé pour l'instant,
   pas une règle générale sur .msg.ok (à discuter si le principe doit
   s'étendre aux autres "Enregistré."). */
#photoMsg.ok{color:var(--text-secondary)}

/* ===== menu.html — trois lignes + raccourcis ===== */
.mrow{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:26px 0;border-bottom:1px solid var(--hair);color:var(--text-primary);cursor:pointer}
.mrow:first-child{padding-top:0}
.mrow-name{font-size:15px;font-weight:300}
.mrow-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.mrow:hover .mrow-name{color:var(--gold)}

/* S56 — .mrow appliqué à un <button> (installation PWA) : un bouton n'a
   pas de rendu neutre par défaut comme un <a>, contrairement au lien.
   Réinitialisation minimale, rien qui ne serve pas ce seul cas. */
.mrow-btn{width:100%;background:none;border:none;border-bottom:1px solid var(--hair);
  font:inherit;text-align:left;-webkit-appearance:none;appearance:none}

/* S61 volet C (relance) — retour vers l'interface mobile, symétrique de
   .mlink-complete (mobile.css, agenda.html) : même poids visuel, même
   niveau de lecture — un choix qui se pose en un geste doit se retirer
   en un geste tout aussi visible, pas un lien discret de second rang. */
.link-mobile-interface{display:block;width:100%;margin:28px 0 20px;padding:14px 0;
  background:none;border:none;border-top:1px solid var(--hair);color:var(--text-muted);
  font:inherit;font-size:14px;text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none}
.link-mobile-interface:hover{color:var(--text-secondary)}

/* ===== Curseur (S38 lot 0 — opacité du fond) ===== */
.range{-webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:var(--hair);border-radius:var(--radius-none);outline:none;margin:14px 0 8px}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:var(--radius-full);background:var(--gold);cursor:pointer}
.range::-moz-range-thumb{width:16px;height:16px;border-radius:var(--radius-full);
  background:var(--gold);border:none;cursor:pointer}
.range::-moz-range-track{background:var(--hair);height:2px;border-radius:var(--radius-none)}

/* ===== ÉCRAN — sélecteur de profil avec aide de choix =====
   S38 lot 2 : trois lignes de texte quasi identiques (13px, sous-titre
   discret) se lisaient mal comme "trois choix". Hiérarchie renforcée par
   contraste/espacement — un accent de bordure gauche (pas un cadre
   fermé), pas d'ombre, pas de fond ajouté. */
#profileSel{display:flex;flex-direction:column;gap:22px}
.profile-opt{cursor:pointer;padding:2px 0 2px 16px;border-left:2px solid transparent}
.profile-opt .sel-it{font-size:16px;border-bottom:none;padding-bottom:0;color:var(--text-secondary)}
.profile-opt.is-on{border-left-color:var(--gold)}
.profile-opt.is-on .sel-it{color:var(--text-primary)}
.profile-opt .hint{margin-top:4px}

/* Cible tactile 44px (S38 lot 2, même principe qu'ailleurs). */
@media (hover: none), (pointer: coarse) {
  .profile-opt{min-height:44px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
}

/* ===== ÉCRAN — miniature + blocs commutables ===== */
.miniature-wrap{position:relative;width:100%;max-width:720px;aspect-ratio:16/9;
  background:var(--bg-lift);overflow:hidden}
.miniature-wrap iframe{position:absolute;top:0;left:0;width:1920px;height:1080px;
  border:none;pointer-events:none;transform-origin:top left}

/* S73 point 5 — profil Téléphone : grand/moyen sont de vrais écrans
   1920×1080 (paysage), un téléphone ne l'est jamais. Un cadre 1920×1080
   systématique empêchait la bascule de mise en page réelle d'un
   téléphone (@media max-width:1024px et portrait, cockpit.css) de se
   déclencher dans l'aperçu — celui-ci montrait donc une mise en page
   qu'aucun téléphone réel n'affiche jamais (mesuré, docs/JOURNAL-S73.md).
   Dimensions reprises telles que mesurées par Arnaud sur son propre
   appareil : 375×610 CSS utiles, jamais 390×844 (résolution physique). */
.miniature-wrap.is-portrait{aspect-ratio:375/610;max-width:280px}
.miniature-wrap.is-portrait iframe{width:375px;height:610px}

.blk-list{margin-top:30px;max-width:720px}
.blk{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 0 0;margin-top:14px;
  border-top:1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
  cursor:pointer}
.blk:first-child{margin-top:0}
.blk-name{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.blk.is-on{border-top-color:var(--gold)}
.blk.is-on .blk-name{color:var(--gold)}

.blk-legend{display:flex;gap:26px;margin-top:22px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint)}
.blk-legend span{display:flex;align-items:center;gap:7px}
.blk-legend span::before{content:'';display:inline-block;width:14px;height:1px}
.blk-legend .on::before{background:var(--gold)}
.blk-legend .off::before{background:color-mix(in srgb, var(--text-primary) 9%, transparent)}

/* ===== Point focal (S41 lot 1) — contenu propre à cette modale
   seulement : la fenêtre elle-même (fond, positionnement, feuille
   pleine largeur sur pointeur grossier, tailles de texte) vient
   entièrement de .modal-overlay/.modal-sheet.modal-sheet-wide
   (socle.css) depuis S46 — deux implémentations de fenêtre ne
   coexistent pas (§5.8). ===== */
.focal-img-wrap{position:relative;max-width:100%;max-height:78vh;line-height:0;
  cursor:crosshair;touch-action:none}
.focal-img-wrap img{max-width:100%;max-height:78vh;display:block;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.focal-marker{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;
  border:2px solid var(--gold);border-radius:var(--radius-full);
  background:color-mix(in srgb, var(--gold) 25%, transparent);pointer-events:none}
.focal-marker::after{content:'';position:absolute;inset:8px;border-radius:var(--radius-full);background:var(--gold)}

/* ===== PHOTOS — grille de vignettes ===== */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:16px;margin-top:0;width:100%}
/* S38 lot 1 : 4 actions à 44px + espacements ≈ 200px de large minimum —
   une colonne de 150px ne les contient pas. */
@media (max-width: 600px) {
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
.photo-item{position:relative;border-radius:var(--radius-none);overflow:hidden;background:var(--bg-lift);
  aspect-ratio:4/3;cursor:pointer;min-width:0}
.photo-item .thumb{width:100%;height:100%;object-fit:cover;display:block}
.photo-item.is-sel{outline:3px solid var(--gold);outline-offset:3px}
.photo-item .pi-actions{position:absolute;left:0;right:0;bottom:0;display:flex;
  justify-content:flex-end;gap:14px;padding:8px 10px;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--bg) 75%, transparent) 0%,
    color-mix(in srgb, var(--bg) 75%, transparent) 65%,
    transparent 100%);
  opacity:0;transition:opacity .15s}
.photo-item:hover .pi-actions{opacity:1}
.photo-item .pi-actions span{font-size:13px;color:var(--text-primary)}
.photo-item .pi-actions span:hover{color:var(--gold)}
.photo-item .pi-actions span.del:hover{color:var(--red)}

/* Pointeur grossier (S38 lot 1) : pas de survol sur iPhone/iPad, les
   actions doivent être visibles en permanence et atteignables au doigt —
   44x44px minimum (WCAG 2.5.5 / HIG), 8px d'écart minimum. Le survol sur
   pointeur fin reste inchangé (règles ci-dessus, hors de ce bloc). */
@media (hover: none), (pointer: coarse) {
  .photo-item .pi-actions{
    opacity:1;
    gap:8px;
    padding:6px;
  }
  .photo-item .pi-actions span{
    display:flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;
    font-size:22px;
  }
  /* S39 : ⟳ ← → ✕ n'ont pas la même hauteur d'oeil dans Inter à corps
     égal (mesuré : ⟳ 17px d'encre à 22px, ✕ 16px, ← → seulement 14px).
     Ajustés individuellement pour revenir à ~17px d'encre chacun, plutôt
     que d'agrandir tout le monde au niveau du plus petit. */
  .photo-item .pi-actions [data-up],
  .photo-item .pi-actions [data-down]{
    font-size:26px;
  }
  .photo-item .pi-actions span.del{
    font-size:24px;
  }
}

/* ===== CONNEXIONS — lignes de filets ===== */
.row-list{display:flex;flex-direction:column}
.row-it{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px 0;border-top:1px solid var(--hair)}
.row-it:first-child{border-top:none}
.row-it-name{font-size:13px;color:var(--text-primary)}
.row-it-addr{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0 16px}
.row-it-fresh{font-size:10px;letter-spacing:.06em;color:var(--text-faint);white-space:nowrap}

.add-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin-top:24px}

/* LOT "membres du foyer et discrétion d'affichage" — un membre n'est
   pas un compte : un nom, une couleur, choisie dans une palette fixe
   (jamais un sélecteur libre, §1 du brief). Même patron visuel que
   .row-it ci-dessus pour la liste, adapté au bureau (pas de contrainte
   44px, contrairement à mobile.css). */
.member-row{display:flex;align-items:center;gap:12px}
.member-row-dot{width:12px;height:12px;border-radius:var(--radius-full);flex-shrink:0}
.color-swatch{width:26px;height:26px;border-radius:var(--radius-full);border:none;padding:3px;cursor:pointer;background-clip:content-box}
.color-swatch.is-on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold)}
/* Ligne de pastilles NOMMÉES (formulaire d'événement, §2 : "on tape
   dessus pour sélectionner"). */
.member-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--bg-lift);border:1px solid var(--hair);color:var(--text-secondary);font-size:13px;cursor:pointer}
.member-pill.is-on{border-color:var(--gold-dim);color:var(--text-primary);background:var(--gold-faint)}
.member-pill-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}

/* ===== ADMINISTRATION — deux colonnes ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 86px}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl td,.tbl th{padding:8px 4px;border-bottom:1px solid var(--hair);text-align:left;
  color:var(--text-secondary);font-weight:300}
.tbl th{color:var(--text-muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.tbl .ev-ok{color:var(--green)}
.tbl .ev-ko{color:var(--red)}
.tbl .ev-lock{color:var(--gold)}
/* S61 volet A — troisième état "jamais mesuré", distinct de ev-ok/ev-ko :
   ni sain ni dégradé, une absence de mesure ne prend jamais la couleur
   d'un résultat. Jamais ev-lock (déjà pris par le verrou anti-force-brute
   du journal des connexions — sémantique différente). */
.tbl .ev-neutre{color:var(--text-muted)}
/* S60 — mêmes couleurs hors tableau (ex. un .hint de statut au-dessus
   d'une carte d'inspection) : réutilisation du même vocabulaire visuel,
   jamais une troisième paire de classes pour la même distinction. */
.ev-ok{color:var(--green)}
.ev-ko{color:var(--red)}
.ev-neutre{color:var(--text-muted)}

/* ===== Adaptation < 700px (une seule règle, pas trois) ===== */
@media (max-width:700px){
  .app-header{padding:26px 22px 0;gap:14px}
  .tabs{padding:22px 22px 0;gap:26px}
  .tabs-rule{margin-left:22px;margin-right:22px}
  .page{padding:0 22px 40px}
  .two-col{grid-template-columns:1fr}
  .add-grid{grid-template-columns:1fr}
}

/* ===== LOT "citation, et ajout d'événement depuis le calendrier" §2 —
   agenda jour par jour sur bureau, même mécanisme que web/agenda.html
   mobile (S63/S81) : la colonne de date ouvre l'ajout préremplie de sa
   date sur TOUT jour, une ligne d'événement ouvre CET événement — deux
   cibles distinctes, jamais confondues. ===== */
.agenda-pc-row{display:flex;gap:20px;padding:12px 0;border-top:1px solid var(--hair);align-items:flex-start}
.agenda-pc-row:first-child{border-top:none}
.agenda-pc-datecol{
  flex-shrink:0;width:110px;text-align:left;background:none;border:none;font:inherit;cursor:pointer;
  padding:6px 8px;border-radius:var(--radius-sm);color:inherit
}
.agenda-pc-datecol:hover{background:var(--bg-field)}
.agenda-pc-datecol-day{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.agenda-pc-datecol-date{font-size:14px;color:var(--text-secondary);margin-top:2px}
.agenda-pc-row.is-today .agenda-pc-datecol-day,
.agenda-pc-row.is-today .agenda-pc-datecol-date{color:var(--gold)}
.agenda-pc-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:6px}
.agenda-pc-evt{display:flex;align-items:baseline;gap:10px;cursor:pointer;border-radius:var(--radius-sm);padding:4px 6px;margin:-4px -6px}
.agenda-pc-evt:hover{background:var(--bg-field)}
.agenda-pc-evt-title{font-size:14px;color:var(--text-primary)}
.agenda-pc-evt-time{font-size:12px;color:var(--text-muted)}
.agenda-pc-allday{font-size:14px;color:var(--text-primary);padding:4px 6px;margin:-4px -6px}
.agenda-pc-empty{font-size:13px;color:var(--text-faint);padding-top:6px}