/* Portail CdC — thème clair et sombre : choix du bandeau (data-theme sur <html>), sinon celui du système.
   Le bandeau a sa propre feuille : css/cdc-header.css. */
:root {
    --fond: #f5f6f8;
    --carte: #ffffff;
    --texte: #1d2330;
    --discret: #5c6577;
    --bordure: #dfe3ea;
    --accent: #2557d6;
    --accent-texte: #ffffff;
    --alerte-fond: #fdecec;
    --alerte-texte: #8a1c1c;
    --succes-fond: #e8f6ec;
    --succes-texte: #1d6b35;
    --danger: #b42318;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --fond: #14171d;
        --carte: #1d2129;
        --texte: #e8ebf1;
        --discret: #9aa3b5;
        --bordure: #2f3541;
        --accent: #7aa2ff;
        --accent-texte: #0d1424;
        --alerte-fond: #3a1a1a;
        --alerte-texte: #ffb4ab;
        --succes-fond: #15301f;
        --succes-texte: #9ee2b2;
        --danger: #ff8a80;
    }
}

:root[data-theme="dark"] {
    --fond: #14171d;
    --carte: #1d2129;
    --texte: #e8ebf1;
    --discret: #9aa3b5;
    --bordure: #2f3541;
    --accent: #7aa2ff;
    --accent-texte: #0d1424;
    --alerte-fond: #3a1a1a;
    --alerte-texte: #ffb4ab;
    --succes-fond: #15301f;
    --succes-texte: #9ee2b2;
    --danger: #ff8a80;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

a { color: var(--accent); }

main { max-width: 64rem; margin: 0 auto; padding: 1rem; }


h1 { font-size: 1.6rem; margin: 1rem 0; }
h2 { font-size: 1.2rem; margin: 0 0 0.75rem; }

.carte {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 0 0 1rem;
}
.etroite { max-width: 26rem; margin: 2rem auto; }

.formulaire label { display: block; margin: 0 0 0.75rem; }
.formulaire label.case, label.case { display: flex; gap: 0.5rem; align-items: center; }
input[type="text"], input[type="email"], input[type="password"], select, textarea {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0.6rem;
    font: inherit;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: 6px;
}
table.droits select { margin: 0; }
fieldset { border: 1px solid var(--bordure); border-radius: 8px; margin: 0 0 1rem; padding: 0.75rem 1rem; }
legend { font-weight: 600; padding: 0 0.25rem; }
/* Administration › Applications gestion : adresse et couleur côte à côte, application inactive estompée. */
.application-reglages { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-end; }
.formulaire .application-adresse { flex: 1 1 16rem; }
.formulaire .application-couleur input[type="color"] { display: block; width: 4rem; height: 2.4rem; padding: 0.15rem; cursor: pointer; background: var(--fond); border: 1px solid var(--bordure); border-radius: 6px; }
.formulaire .application-position input { width: 5rem; }
.application-deplacer { display: inline-flex; gap: 0.25rem; margin-bottom: 0.75rem; }
.application-deplacer .bouton { padding: 0.35rem 0.7rem; }
.applications-ordre fieldset:first-child [data-deplacer="-1"],
.applications-ordre fieldset:last-child [data-deplacer="1"] { visibility: hidden; }
.application-gestion.inactive legend { color: var(--discret); text-decoration: line-through; }

.bouton {
    display: inline-block;
    padding: 0.5rem 1rem;
    font: inherit;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}
.bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.bouton.danger { color: var(--danger); border-color: var(--danger); }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.alerte, .succes { padding: 0.6rem 0.8rem; border-radius: 6px; }
.alerte { background: var(--alerte-fond); color: var(--alerte-texte); }
.alerte ul { margin: 0; padding-left: 1.2rem; }
.succes { background: var(--succes-fond); color: var(--succes-texte); }
.discret { color: var(--discret); font-size: 0.92em; }
.pastille { font-size: 0.75rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--fond); border: 1px solid var(--bordure); }

table { width: 100%; border-collapse: collapse; background: var(--carte); }
th, td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }
th { font-weight: 600; }
tr.inactif td { color: var(--discret); }

.filtres { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; align-items: end; }
.filtres a[aria-current="page"] { font-weight: 700; text-decoration: none; }
.pages { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }

.tuiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); grid-auto-rows: 1fr; gap: 1rem; }
.tuiles > li { display: flex; }
.tuile {
    /* Accent de l'application (couleur du kiosque), fixé sur chaque tuile ; trait et pastille comme au kiosque. */
    --tuile-accent: var(--accent);
    --tuile-trait: var(--tuile-accent);
    --tuile-fond-icone: color-mix(in srgb, var(--tuile-accent) 16%, transparent);
    display: block;
    flex: 1;
    box-sizing: border-box;
    padding: 1.4rem 1.1rem 1.5rem;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-top: 4px solid var(--tuile-accent);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(20, 23, 29, 0.07);
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--texte);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}
a.tuile:hover {
    border-color: var(--tuile-accent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tuile-accent) 22%, transparent);
}
a.tuile:active { transform: scale(0.98); }
a.tuile:focus-visible { outline: 2px solid var(--tuile-accent); outline-offset: 2px; }
.tuile-titre { display: flex; align-items: center; gap: 0.75rem; }
.tuile-pastille {
    flex: none;
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.55rem;
    box-sizing: border-box;
    border-radius: 10px;
    color: var(--tuile-trait);
    background: var(--tuile-fond-icone);
}
.tuile-icone {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Sombre (gris d'Horaire CdC) : icône éclaircie et pastille un peu plus soutenue pour rester lisibles. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tuile {
        --tuile-trait: color-mix(in srgb, var(--tuile-accent) 72%, #ffffff);
        --tuile-fond-icone: color-mix(in srgb, var(--tuile-accent) 24%, transparent);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    }
}
:root[data-theme="dark"] .tuile {
    --tuile-trait: color-mix(in srgb, var(--tuile-accent) 72%, #ffffff);
    --tuile-fond-icone: color-mix(in srgb, var(--tuile-accent) 24%, transparent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.tuile-description { display: block; margin-top: 0.5rem; font-size: 0.9rem; font-weight: 400; color: var(--discret); }

.logo-connexion { display: block; max-width: 100%; max-height: 10rem; margin: 0.5rem auto 1rem; object-fit: contain; }
.apercu-logo { margin: 0 0 0.75rem; }
.apercu-logo img { display: block; max-width: 100%; object-fit: contain; padding: 0.4rem; border: 1px dashed var(--bordure); border-radius: 6px; }
.apercu-petit img { height: 2.5rem; background: #2f2f33; }
.apercu-grand img { max-height: 10rem; }

.appairage { text-align: center; }
.appairage .code { font-size: 3.5rem; font-weight: 700; letter-spacing: 0.15em; margin: 1rem 0; font-family: ui-monospace, monospace; }

@media (max-width: 40rem) {
    table { display: block; overflow-x: auto; }
}

/* Administration > Calendrier */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.calendrier-entete { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; }
.calendrier-choix { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.calendrier-choix select { width: auto; margin: 0; }
.calendrier-annee { margin: 0 0 1rem; }
.calendrier-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; align-items: start; }
.calendrier-colonnes.deux { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.calendrier-colonnes > .carte { margin: 0 0 1rem; }
.calendrier-vacances { display: flex; flex-direction: column; gap: 1rem; }
.calendrier-vacances .calendrier-table { width: 100%; max-width: 46rem; table-layout: fixed; }
.calendrier-vacances .calendrier-table col.periode { width: 40%; }
.calendrier-pays { min-width: 0; overflow-x: auto; }
.calendrier-pays { border: 1px solid var(--bordure); border-radius: 8px; padding: 0.75rem; }
.calendrier-pays h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.calendrier-pays h3 .discret { font-weight: 400; }
.calendrier-table td, .calendrier-table th { padding: 0.3rem 0.25rem; }
.calendrier-table input[type="date"] { width: 100%; min-width: 0; font: inherit; }
.calendrier-pays .bouton { margin-top: 0.75rem; }
.calendrier-ajout { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0.75rem 0; }
.calendrier-ajout label { margin: 0; }
details.carte > summary { cursor: pointer; }
details.carte[open] > summary { margin-bottom: 0.75rem; }
details.repliable > summary h2 { display: inline; margin: 0; }
input[type="date"], input[type="file"] { font: inherit; color: var(--texte); }
input[type="date"] { padding: 0.35rem 0.4rem; background: var(--fond); border: 1px solid var(--bordure); border-radius: 6px; }
.calendrier-ajout input[type="date"] { display: block; margin-top: 0.25rem; padding: 0.45rem 0.5rem; }

/* Administration > SMTP */
.smtp-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1rem; }
.smtp-journal { max-height: 20rem; overflow: auto; padding: 0.5rem; border: 1px solid var(--bordure); border-radius: 6px;
    font-size: 0.85em; white-space: pre-wrap; word-break: break-all; }

/* Administration > Maintenance */
.tableau-defilant { overflow-x: auto; }
.tableau-defilant.defile-10 { overflow-y: auto; border-bottom: 1px solid var(--bordure); }
.defile-10 thead th { position: sticky; top: 0; z-index: 1; background: var(--carte); }
table.connexions tr.avec-verrou td { background: var(--alerte-fond); }
.verrou { font-weight: 600; }
.maintenance-active { border-left: 6px solid var(--danger); }
.terminer-toutes { margin-top: 1rem; align-items: center; }
.terminer-toutes label.case { margin: 0; }
.bandeau-maintenance { margin: 0 0 1rem; }

/* Administration > Sauvegarde */
table.sauvegarde-modules input { width: 7rem; margin: 0; }
table.sauvegarde-modules th[scope="row"] { font-weight: 600; }
table.sauvegarde-modules th[scope="row"] .discret { font-weight: normal; }
code.commande { overflow-wrap: anywhere; }
.tout-sauvegarder form { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0; }
.tout-sauvegarder-compte { margin: 0.75rem 0 0; padding-left: 1.2rem; }
.tout-sauvegarder-compte > li { margin: 0.25rem 0; padding: 0.25rem 0.5rem; }
.sauvegardes-modules .filtres label { display: flex; flex-direction: column; gap: 0.25rem; }

/* Bandeau commun fixé en haut pendant le défilement (Administration et toutes les pages du portail).
   Pas sur les écrans trop bas, où il prendrait trop de place ; la liste « Administration » défile si elle dépasse l'écran. */
@media screen and (min-height: 30rem) {
    .cdc-header { position: sticky; top: 0; z-index: 40; }
    .cdc-header-menu-list { max-height: calc(100vh - 5rem); overflow-y: auto; }
    html { scroll-padding-top: 4.5rem; }
}