/**
 * Crystal Palace - feuille de style commune.
 *
 * Variables de charte, largeurs, typographie, et composants partages
 * (boutons dont le bouton Retour, panneaux, cartes, badges d'etat,
 * tableaux, champs de formulaire, pied de page) repris de l'existant
 * (includes/admin_layout.php, manager/index.php, landing/*, sign.php,
 * legal.php) - rien d'invente.
 *
 * Chargee par toutes les zones du produit (back-office, espace
 * responsable, staff, pages publiques, mentions legales, signature,
 * application). Chaque zone garde ses composants reellement specifiques
 * dans son propre <style> apres ce lien - la cascade CSS les fait
 * primer sans rien dupliquer ici.
 *
 * Cache-busting : lien charge avec ?v=<APP_VERSION> (includes/config.php,
 * source unique). Bump manuel des deux a chaque changement visuel (lot
 * CSS unifie, 2026-09-20).
 */

:root {
    /* Charte graphique - une seule source pour ces valeurs. */
    --cp-navy: #1a1a2e;
    --cp-gold: #c9a84c;
    --cp-ink: #0f172a;
    --cp-panel-light: #ffffff;
    --cp-panel-dark: #16213e;
    --cp-border-light: #e2e8f0;
    --cp-muted: #64748b;
    --cp-muted-2: #94a3b8;

    /* Couleurs d'etat (valeurs deja utilisees par les badges du back-office). */
    --cp-success-bg: #dcfce7; --cp-success-fg: #166534;
    --cp-danger-bg: #fee2e2;  --cp-danger-fg: #991b1b;
    --cp-warning-bg: #fef9c3; --cp-warning-fg: #854d0e;

    /* Couleur distincte du WiFi (ecran mural public, scripts/display.php). */
    --cp-wifi: #4dd0c4;

    /* Largeurs de reference (back-office, includes/admin_layout.php) :
       lecture pour les formulaires/textes, large pour les ecrans de donnees.
       Tout le reste du produit s'y aligne (lot CSS unifie, 2026-09-20). */
    --cp-width-reading: 900px;
    --cp-width-wide: 1600px;

    /* Typographie, rayons, ombre. */
    --cp-font: system-ui, sans-serif;
    --cp-radius: .6rem;
    --cp-radius-sm: .35rem;
    --cp-shadow-card: 0 2px 8px rgba(26, 26, 46, .12);
}

*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ */
/* Boutons - famille marine/dore, une seule definition pour toutes     */
/* les zones. Chaque zone peut garder une variante locale (taille,     */
/* affichage) si son gabarit l'exige : la cascade la fait primer.      */
/* ------------------------------------------------------------------ */
.btn {
    display: inline-block; padding: .5rem 1rem; background: var(--cp-gold); color: var(--cp-navy);
    border: 0; border-radius: var(--cp-radius-sm); font-size: .9rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.btn.danger { background: #ef4444; color: #fff; }
.btn.ghost { background: transparent; border: 1px solid #cbd5e1; color: var(--cp-ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
form.inline { display: inline; margin: 0; }

/* Bouton Retour : variante "contour dore" du bouton principal, en tete de
   zone de contenu (fond clair) depuis le brief 2026-09-20 (sorti du bandeau
   sombre, qui n'a plus la place sur mobile). Texte #8a6d1a - meme teinte
   foncee que .badge.alert, deja eprouvee lisible sur fond clair, plutot
   qu'une couleur inventee (X.4). Taille alignee sur les boutons secondaires
   de l'admin (.btn plus dense d'admin_layout.php), pas le bouton principal
   de l'ecran, tout en gardant une hauteur tactile suffisante. */
.cp-back-btn {
    display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px;
    background: transparent; border: 1px solid var(--cp-gold); border-radius: 8px;
    color: #8a6d1a; font-size: 13px; font-weight: 600; text-decoration: none;
    margin-bottom: .8rem;
}
.cp-back-btn:hover { background: rgba(201, 168, 76, .12); }

/* Bouton Aide + panneau d'ecran (lot aide, 2026-09-20) : un seul gros bouton,
   tout le texte d'un coup (Arnaud a explicitement refuse les bulles
   contextuelles). Meme ligne que .cp-back-btn, mais nettement plus grand et
   plus gras (constat Arnaud 2026-09-20 : a taille egale au Retour, ce n'est
   pas un gros bouton, c'est un bouton de plus) et plein (dore) plutot que
   contour, pour se distinguer du Retour par la forme autant que par la
   taille. Le conteneur (.cp-screen-actions) est deja en flex-wrap : si les
   deux boutons ne tiennent pas cote a cote sur un ecran etroit, l'aide passe
   seule a la ligne, jamais de debordement. Mecanisme <details>/<summary>
   pur : [open] bascule le bouton en pleine largeur de ligne (flex-basis
   100%) pour que le panneau s'etale sur toute la largeur de l'ecran, sans
   une ligne de JavaScript. */
.cp-screen-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; margin-bottom: .4rem; }
.cp-screen-actions .cp-back-btn { margin-bottom: 0; }
.cp-help { margin-left: auto; }
.cp-help[open] { flex-basis: 100%; margin-left: 0; }
.cp-help-btn {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 56px; padding: 14px 26px;
    background: var(--cp-gold); border: 1px solid var(--cp-gold); border-radius: 10px;
    color: var(--cp-navy); font-size: 18px; font-weight: 800; cursor: pointer; list-style: none;
}
.cp-help-btn::-webkit-details-marker { display: none; }
.cp-help-btn:hover { background: #d8bd6c; }
.cp-help-panel {
    background: var(--cp-panel-light); border: 1px solid var(--cp-border-light);
    border-radius: var(--cp-radius); padding: 1.1rem 1.3rem; margin-top: .6rem;
}
.cp-help-panel h2 { margin: 0 0 .6rem; font-size: 1.15rem; color: var(--cp-ink); }
.cp-help-panel h3 { font-size: .95rem; color: var(--cp-ink); margin: 1.1rem 0 .4rem; }
.cp-help-panel h3:first-of-type { margin-top: .8rem; }
.cp-help-panel p { line-height: 1.65; color: var(--cp-ink); margin: .4rem 0; }
.cp-help-panel ul { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.cp-help-panel li { line-height: 1.65; margin-bottom: .55rem; color: var(--cp-ink); }
.cp-help-panel li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Panneaux et cartes.                                                 */
/* ------------------------------------------------------------------ */
.panel {
    background: var(--cp-panel-light); border: 1px solid var(--cp-border-light);
    border-radius: var(--cp-radius); padding: 1rem 1.2rem; margin-top: 1rem;
}
.panel > *:first-child { margin-top: 0; }
.cp-mt-lg { margin-top: 1.5rem; }
.card {
    background: var(--cp-panel-light); border: 1px solid var(--cp-border-light);
    border-radius: var(--cp-radius); padding: .8rem 1.1rem;
}

/* ------------------------------------------------------------------ */
/* Badges d'etat - deux etats visuellement distincts ne partagent      */
/* jamais la meme couleur (doctrine BP, cf. admin_layout.php).         */
/* ------------------------------------------------------------------ */
.badge { padding: .2rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.badge.active, .badge.processed { background: var(--cp-success-bg); color: var(--cp-success-fg); }
.badge.blocked, .badge.dismissed { background: var(--cp-danger-bg); color: var(--cp-danger-fg); }
.badge.pending { background: var(--cp-warning-bg); color: var(--cp-warning-fg); }
/* Distinct de .badge.pending (ambre, deja utilise par contracts.php/superadmin.php) :
   "invitation envoyee" doit se distinguer visuellement de l'ambre "invitation
   non envoyee" (meme carte .badge.pending), pas une nuance du meme badge. */
.badge.waiting { background: #e0f2fe; color: #075985; }

/* ------------------------------------------------------------------ */
/* Tableaux - defilement horizontal plutot que debordement de page     */
/* sur mobile (constat Arnaud, iPhone, S44). Meme regle partout.       */
/* ------------------------------------------------------------------ */
table {
    border-collapse: collapse; width: 100%; margin-top: .6rem; background: #fff;
    display: block; overflow-x: auto; white-space: nowrap;
}
th, td { border: 1px solid var(--cp-border-light); padding: .5rem .6rem; text-align: left; font-size: .88rem; }
th { background: #f8fafc; }

/* ------------------------------------------------------------------ */
/* Champs de formulaire (base claire - les zones a theme sombre        */
/* gardent leur propre variante locale, la cascade la fait primer).    */
/* ------------------------------------------------------------------ */
label { display: block; font-size: .82rem; color: #475569; margin: .6rem 0 .2rem; }
input, select { padding: .45rem .5rem; border: 1px solid #cbd5e1; border-radius: var(--cp-radius-sm); font-size: .9rem; }
.msg-ok { color: var(--cp-success-fg); }
.msg-err { color: #b91c1c; }

/* ------------------------------------------------------------------ */
/* Carte de liste - composant unique pour tout ecran qui liste des     */
/* choses complexes (abonnes, ouvriers, alertes de partage, droits du  */
/* personnel, contrats, RGPD). Porte depuis la maquette validee        */
/* docs/charte-cartes.html (lot cartes unifie, 2026-09-20) : classes   */
/* renommees avec le prefixe cp- deja utilise par les composants       */
/* partages inter-ecrans (cp-back-btn, cp-footer) plutot que les noms  */
/* d'une lettre de la maquette (l1/l2/l3/b/f), pour rester lisibles    */
/* repartis sur plusieurs fichiers PHP. Remplace .person-card (meme    */
/* jour, lot structure et mise en page), generalise au-dela des        */
/* personnes.                                                          */
/* Trois lignes toujours dans le meme ordre : qui/ou/etat, histoire en */
/* une phrase, actions utiles a l'etat + reglages replies.             */
/* ------------------------------------------------------------------ */
.cp-card-grid { display: block; margin-top: .6rem; }
.cp-card-grid .cp-card { margin-bottom: .6rem; }
.cp-card { background: var(--cp-panel-light); border: 1px solid var(--cp-border-light);
    border-radius: 10px; padding: .9rem 1.1rem; min-width: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.cp-card.cp-card-alert { background: #fffbeb; border-color: #fcd34d; }
.cp-card.cp-card-danger { background: #fef2f2; border-color: #fca5a5; }
.cp-card-line1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; min-width: 0; }
.cp-card-who { font-size: 1rem; font-weight: 650; overflow-wrap: anywhere; min-width: 0; }
.cp-card-where { color: var(--cp-muted); font-size: .85rem; }
.cp-card-line1 .badge { margin-left: auto; white-space: nowrap; }
.cp-card-line2 { margin-top: .5rem; color: var(--cp-muted); font-size: .85rem; line-height: 1.5; overflow-wrap: anywhere; }
.cp-card-line3 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; }
/* Boutons DANS une carte uniquement (contexte .cp-card-line3) : fins et neutres
   par defaut, dores si ni .ghost ni .danger, contour rouge fin (jamais un aplat)
   pour .danger - .btn global (hors carte) n'est pas touche. */
.cp-card-line3 .btn { border: 1px solid var(--cp-border-light); background: #fff; color: var(--cp-ink);
    border-radius: 7px; padding: .42rem .8rem; font-size: .84rem; font-weight: 600;
    font-family: inherit; line-height: 1.2; }
.cp-card-line3 .btn:not(.ghost):not(.danger) { background: var(--cp-gold); border-color: var(--cp-gold); color: var(--cp-navy); }
.cp-card-line3 .btn.danger { background: #fff; border-color: #fca5a5; color: #b91c1c; }
/* form.inline ecrase l'alignement flex de .cp-card-line3 (display:inline en fait
   un element de la rangee) : neutralise UNIQUEMENT dans le contexte carte, la
   regle globale form.inline (ligne 68) reste inchangee ailleurs. */
.cp-card-line3 form.inline, .cp-card-settings-body form.inline { display: contents; }
.cp-card-settings { margin-left: auto; }
.cp-card-settings summary { cursor: pointer; color: var(--cp-muted); font-size: .8rem; }
.cp-card-settings-body { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem;
    padding-top: .6rem; border-top: 1px dashed var(--cp-border-light); width: max-content; max-width: 100%; }
/* Formulaire d'édition groupé dans un repli Réglages (ex. admin/staff.php) :
   plusieurs champs cote a cote plutot qu'un seul par form.inline.cp-card-field,
   quand ils partagent un seul bouton Enregistrer. */
.cp-card-edit-form { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.cp-card-field { display: flex; flex-direction: column; gap: .2rem; }
.cp-card-field label { font-size: .74rem; color: var(--cp-muted); margin: 0; font-weight: 400; }
.cp-card-field-checkbox { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; font-size: .85rem; }
.cp-card-field-hours { width: 4.5rem; }
.cp-card-note { color: var(--cp-muted); font-size: .8rem; margin: .4rem 0 0; }

/* Temoin de session (point de couleur) - repris de la maquette,       */
/* utilise dans .cp-card-line2 (abonnes/ouvriers). */
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; vertical-align: middle; }
.dot.on { background: #16a34a; }
.dot.off { background: #cbd5e1; }

/* Pastilles de droit (admin/permissions.php) - vert accorde, gris     */
/* retire, cliquables (boutons stylees en pilule). */
.perm { font: inherit; font-size: .78rem; font-weight: 600; padding: .18rem .6rem; border-radius: 999px;
    background: #f1f5f9; color: #475569; border: 1px solid var(--cp-border-light); cursor: pointer; }
.perm.on { background: var(--cp-success-bg); color: var(--cp-success-fg); border-color: #86efac; }

/* Etat neutre (ex. compte anonymise RGPD, role hors permissions       */
/* editables) - ni succes, ni alerte, ni danger. */
.badge.neutral { background: #f1f5f9; color: #475569; }

/* ------------------------------------------------------------------ */
/* Pied de page - pages publiques/theme sombre (landing/*, sign.php,   */
/* legal.php, meeting-room-reservations.php, pwa/index.html). Le pied  */
/* de page du back-office reste local (lie a la version applicative et */
/* au bandeau de fraicheur d'ecran, pas un simple copyright).          */
/* ------------------------------------------------------------------ */
/* Journal CodePin (admin/superadmin.php) : zone de texte pleine largeur,
   copiable, contenu brut du log quotidien. */
.codepin-log-textarea {
    width: 100%; height: 28rem; font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: .85rem; white-space: pre; overflow: auto;
}

.cp-footer {
    padding: .9rem 1rem; color: var(--cp-muted-2); font-size: .75rem; font-weight: 300;
    letter-spacing: .04em; text-align: center; border-top: 1px solid #ffffff10;
}

/* ------------------------------------------------------------------ */
/* Colonne de notifications - PIN du jour (LOT 8, 2026-09-22). Partagee */
/* par admin/pins.php et scripts/display.php (includes/pins_wall.php).  */
/* Mecanisme de bascule repris de .status-banner-row (admin_layout.php  */
/* + scripts/display.php) : flex-wrap, colonne en premier dans le DOM,  */
/* flex-basis 100% sous 640px pour passer au-dessus de la grille plutot */
/* qu'a cote, jamais une seconde regle de bascule inventee. Couleurs et */
/* fond laisses aux deux themes locaux (clair back-office, sombre mural)*/
/* - seule la structure vit ici. */
/* ------------------------------------------------------------------ */
.pins-wall-layout { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.notif-column { flex: 0 0 280px; min-width: 0; }
.pins-wall-main { flex: 1 1 420px; min-width: 0; }
@media (max-width: 640px) { .notif-column { flex-basis: 100%; } }
.notif-block { margin-bottom: 1rem; }
.notif-block h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .5rem; }
.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.notif-item-what { font-weight: 600; font-size: .86rem; }
.notif-item-detail { font-size: .78rem; margin-top: .2rem; }

/* ------------------------------------------------------------------ */
/* En-tete de l'ecran des codes, en trois rangees (LOT F, 2026-09-22). */
/* Constat d'Arnaud : « il y a des informations partout, ce n'est pas  */
/* propre ». Rangee 1 : retour, titre, date/heure, aide, sur UNE seule */
/* ligne. Rangee 2 : panneau d'etat (jour/wifi/QR). Rangee 3 (inchangee*/
/* structurellement, cf. bloc ci-dessus) : notifications + grille.     */
/* Cartes de code, badge responsable et position de la colonne de      */
/* notifications INCHANGES (decisions actees d'Arnaud) ; afficheur     */
/* mural (scripts/display.php) non concerne, il ne partage ni cette    */
/* grille ni ces classes.                                              */
/*                                                                      */
/* main.cp.cp-full-width n'est utilise QUE par admin/pins.php (seul    */
/* appel avec $fullWidth=true, includes/admin_layout.php) : le devenir */
/* grille ci-dessous ne touche aucun autre ecran admin.                */
/*                                                                      */
/* .cp-screen-actions (retour + aide, rendu par admin_header(), hors   */
/* perimetre de ce lot) passe en display:contents SOUS CETTE SEULE     */
/* PORTEE : ses deux enfants (.cp-back-btn, .cp-help) deviennent des   */
/* items de grille directs de <main>, sans toucher a admin_layout.php. */
/* ------------------------------------------------------------------ */
main.cp.cp-full-width {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    column-gap: .8rem;
    row-gap: 1rem;
}
.cp-full-width .cp-screen-actions { display: contents; }
.cp-full-width .cp-back-btn { grid-column: 1; grid-row: 1; align-self: center; order: 1; margin: 0; }
.cp-full-width .pin-screen-title { grid-column: 2; grid-row: 1; align-self: center; order: 2; margin: 0; font-size: 1.25rem; }
.cp-full-width .pin-screen-title-count { color: var(--muted); font-weight: 400; font-size: .85em; }
.cp-full-width .pin-screen-time { grid-column: 3; grid-row: 1; align-self: center; order: 3;
    font-size: .85rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-full-width .cp-help { grid-column: 4; grid-row: 1; align-self: center; order: 4; margin: 0; }
/* Panneau ouvert : passe sous la rangee 1, pleine largeur (repris du
   patron flex-basis:100% d'origine, cf. assets/style.css .cp-help[open]
   ci-dessus) - aucune ligne de grille fixee : la rangee suivante (panneau
   d'etat) glisse simplement plus bas, jamais de chevauchement (§8.4,
   verifie par le calcul, pas suppose). */
.cp-full-width .cp-help[open] { grid-column: 1 / -1; grid-row: auto; }
.cp-full-width .pin-status-panel,
.cp-full-width .pins-wall-layout,
.cp-full-width .diagnostic-details { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) {
    main.cp.cp-full-width { grid-template-columns: 1fr; row-gap: .5rem; }
    /* grid-row: auto obligatoire ici : sans lui, les quatre items restent
       tous epingles a la rangee 1 (regle desktop ci-dessus) et se
       superposeraient au lieu de s'empiler chacun sur sa propre rangee. */
    .cp-full-width .cp-back-btn,
    .cp-full-width .pin-screen-title,
    .cp-full-width .pin-screen-time,
    .cp-full-width .cp-help { grid-column: 1 / -1; grid-row: auto; }
}

/* Rangee 2 : panneau d'etat du jour, trois zones separees par des filets
   verticaux (etat, wifi, QR) - includes/pins_wall.php::render_pins_status_panel().
   Panneau clair, coherent avec le reste du back-office (pas le theme sombre
   de l'afficheur mural, qui ne rend jamais cette fonction). */
.pin-status-panel { display: flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--border);
    border-radius: .6rem; align-items: stretch; overflow: hidden; }
.pin-status-zone { padding: .9rem 1.2rem; display: flex; flex-direction: column; justify-content: center;
    border-left: 1px solid var(--border); }
.pin-status-zone:first-child { border-left: 0; }
.pin-status-zone-state { flex: 1 1 18rem; gap: .3rem; }
.pin-status-zone-wifi { flex: 1 1 12rem; gap: .3rem; }
.pin-status-zone-qr { flex: 0 0 auto; align-items: center; gap: .3rem; }
.pin-status-line { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.pin-status-line::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; }
.pin-status-line.ok { color: #166534; }
.pin-status-line.ok::before { background: #16a34a; }
.pin-status-line.amber { color: #8a6d1a; }
.pin-status-line.amber::before { background: #e0a72e; }
.pin-status-line.muted { color: var(--muted); font-size: .82rem; }
.pin-status-line.muted::before { background: transparent; }
.pin-status-zone-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pin-status-wifi-code { font-size: 1.6rem; font-weight: 700; color: var(--cp-wifi); letter-spacing: .08em; }
.pin-status-wifi-missing { font-size: .88rem; font-weight: 600; color: #8a6d1a; }
.pin-status-qr-frame { background: #fff; border: 1px solid var(--border); border-radius: .5rem; padding: 6px; line-height: 0; }
.pin-status-qr-frame canvas, .pin-status-qr-frame img { display: block; width: 104px; height: 104px; }
.pin-status-qr-caption { font-size: .74rem; color: var(--muted); text-align: center; }
@media (max-width: 640px) {
    .pin-status-panel { flex-direction: column; }
    .pin-status-zone { border-left: 0; border-top: 1px solid var(--border); }
    .pin-status-zone:first-child { border-top: 0; }
    .pin-status-zone-qr { align-items: flex-start; }
}