/* Weazel News — identité éditoriale sobre : blanc / rouge / noir.
   Serif de titrage (masthead de presse) + sans-serif pour l'interface. */

:root {
    --blanc: #FFFFFF;
    --noir: #121212;
    --rouge: #A81723;
    --rouge-vif: #C81E2C;

    --bg: var(--blanc);
    --surface: #FBFAF9;
    --surface-2: #F1EFEC;
    --texte: var(--noir);
    --texte-att: rgba(18, 18, 18, 0.62);
    --bordure: rgba(18, 18, 18, 0.12);
    --accent: var(--rouge);
    --accent-hover: var(--rouge-vif);
    --sur-accent: var(--blanc);
    --ombre: rgba(18, 18, 18, 0.10);
    --ombre-carte: 0 1px 2px rgba(18, 18, 18, 0.04), 0 10px 24px rgba(18, 18, 18, 0.06);
    --ombre-carte-survol: 0 18px 40px rgba(18, 18, 18, 0.14);

    --police-titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --police-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --rayon: 8px;
    --rayon-grand: 16px;
    --rayon-mini: 6px;
}

html[data-theme="nuit"] {
    --bg: #0C0C0D;
    --surface: #17171A;
    --surface-2: #1F2023;
    --texte: var(--blanc);
    --texte-att: rgba(255, 255, 255, 0.6);
    --bordure: rgba(255, 255, 255, 0.1);
    --accent: var(--rouge-vif);
    --accent-hover: #E5303E;
    --sur-accent: var(--blanc);
    --ombre: rgba(0, 0, 0, 0.6);
    --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.45);
    --ombre-carte-survol: 0 20px 48px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--texte);
    font-family: var(--police-texte);
    transition: background-color .2s ease, color .2s ease;
    -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

h1, h2, h3, h4 {
    font-family: var(--police-titre);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .5em;
}

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

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 36px;
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
    position: sticky;
    top: 0;
    z-index: 1200;
    backdrop-filter: saturate(1.1) blur(6px);
}

.entete__marque {
    font-family: var(--police-titre);
    font-size: 1.5rem;
    letter-spacing: .01em;
    text-decoration: none;
    color: var(--texte);
    display: flex;
    align-items: center;
}

.entete__marque em { color: var(--accent); font-style: normal; }

.entete__gauche {
    display: flex;
    align-items: center;
    gap: 10px;
}

.entete__droite {
    display: flex;
    align-items: center;
    gap: 18px;
}

.logo-marque { height: 75px; display: block; }
html[data-theme="jour"] .logo-marque--nuit,
html:not([data-theme="nuit"]) .logo-marque--nuit { display: none; }
html[data-theme="nuit"] .logo-marque--jour { display: none; }

.bascule-theme {
    border: 1px solid var(--bordure);
    background: var(--surface-2);
    color: var(--texte);
    border-radius: 999px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.bascule-theme:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); transform: translateY(-1px); }
.bascule-theme--mini { width: 30px; height: 30px; font-size: .9rem; }

.nav-utilisateur {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .92rem;
}

.principal {
    max-width: 980px;
    margin: 0 auto;
    padding: 40px 32px 80px;
}

.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre-carte);
    padding: 28px;
    margin-bottom: 24px;
}

.carte__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.carte__entete h2 { margin: 0; font-size: 1.25rem; }

.etiquette-statut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid var(--bordure);
}
.etiquette-statut--fourni { color: #1E7A3B; border-color: transparent; background: color-mix(in srgb, #1E7A3B 16%, transparent); }
.etiquette-statut--manquant { color: var(--accent); border-color: transparent; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.etiquette-statut--expire { color: #B8790A; border-color: transparent; background: color-mix(in srgb, #B8790A 16%, transparent); }

table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--bordure); }
th { color: var(--texte-att); font-weight: 600; font-size: .82rem; }

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--sur-accent);
    padding: 10px 20px;
    border-radius: var(--rayon);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.bouton:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }

.bouton--discret {
    background: transparent;
    color: var(--texte);
    border-color: var(--bordure);
}
.bouton--discret:hover { border-color: var(--texte); background: transparent; }

.bouton--petit { padding: 6px 12px; font-size: .82rem; }

.champ { margin-bottom: 16px; }
.champ label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.champ input, .champ select, .champ textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--bg);
    color: var(--texte);
    font-size: .95rem;
    font-family: var(--police-texte);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.champ--deux { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Cases à cocher : rendu personnalisé cohérent avec l'identité du site
   (coins arrondis, coche pleine en rouge accent), plutôt que la case
   grise par défaut du navigateur — valable pour toutes les checkbox,
   dans les formulaires comme dans les listes de sélection (pôles,
   grades, colonnes, affectations...). */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    margin: 0;
    border: 1.5px solid var(--bordure);
    border-radius: 6px;
    background: var(--bg);
    display: inline-block;
    position: relative;
    top: 2px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:active { transform: scale(.92); }
input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid var(--sur-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(40deg);
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

label:has(> input[type="checkbox"]),
label:has(input[type="checkbox"]:only-of-type) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.page-centree {
    min-height: calc(100vh - 74px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.panneau-connexion {
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.panneau-connexion p { color: var(--texte-att); margin-bottom: 28px; }

.message-erreur {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 10px 14px;
    border-radius: var(--rayon);
    font-size: .88rem;
    margin-bottom: 18px;
}

/* Fenêtres modales : tout bouton de saisie ouvre une pop-up plutôt qu'une
   nouvelle page (règle d'ergonomie transverse). */
.fond-modale {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000;
}
.fond-modale.est-ouverte { display: flex; }

.modale {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre-carte-survol);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
}
.modale__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.modale__fermer {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--texte-att);
    line-height: 1;
}

.liste-vide { color: var(--texte-att); font-size: .9rem; padding: 8px 0; }

/* Montants (Étape 3 — module RH) : jamais de virgule/décimale affichée,
   toujours arrondi et présenté en entier (règle d'ergonomie transverse). */
.montant { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Panneaux de config repliables, intégrés directement à la page qui les
   concerne plutôt que dans une page séparée. */
details.carte { padding: 0; }
details.carte > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 28px;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
details.carte > summary::-webkit-details-marker { display: none; }
details.carte > summary::after { content: '+'; color: var(--accent); font-size: 1.2rem; }
details.carte[open] > summary::after { content: '–'; }
details.carte > summary + * { padding: 0 28px 24px; }
details.carte > .details-corps { padding: 0 28px 24px; }

.grille-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px 18px;
    margin-bottom: 18px;
}
.grille-colonnes label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 400;
}

.lien-tri { color: inherit; text-decoration: none; }
.lien-tri:hover { color: var(--accent); }
.lien-tri__fleche { color: var(--accent); font-size: .75rem; }

/* Compteurs de notes RH (blâmes / félicitations / remarques). */
.pastilles-notes { display: flex; gap: 6px; flex-wrap: wrap; }
.pastille {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid var(--bordure);
}
.pastille--blame { color: var(--accent); border-color: var(--accent); }
.pastille--felicitation { color: #1E7A3B; border-color: #1E7A3B33; }
.pastille--remarque { color: var(--texte-att); }

.pastilles-documents { display: flex; gap: 4px; flex-wrap: wrap; }
.pastille-doc {
    width: 10px; height: 10px; border-radius: 999px; display: inline-block;
}
.pastille-doc--fourni { background: #1E7A3B; }
.pastille-doc--manquant { background: var(--accent); }

/* Badge "contrat de travail en attente de signature" — repérable en un
   coup d'œil dans la liste des effectifs, sans ouvrir chaque fiche. */
.badge-contrat { font-size: .85em; cursor: default; }

/* Fiche employé : sections empilées dans la modale, plus large que les
   modales de saisie simples. */
.modale--large { max-width: 640px; }
.fiche-section { border-top: 1px solid var(--bordure); padding-top: 18px; margin-top: 18px; }
.fiche-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.fiche-section h3 { font-size: .95rem; margin-bottom: 10px; }
.fiche-section--discret { color: var(--texte-att); font-size: .88rem; }

.liste-documents { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.liste-documents li { display: flex; align-items: center; gap: 8px; font-size: .9rem; }

.liste-notes { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; max-height: 160px; overflow-y: auto; }
.liste-notes li { font-size: .85rem; border-left: 2px solid var(--bordure); padding-left: 10px; }
.liste-notes .note-meta { color: var(--texte-att); font-size: .78rem; }

.groupe-radio { display: grid; gap: 8px; margin-bottom: 14px; font-size: .9rem; }
.groupe-radio label { display: flex; align-items: center; gap: 8px; font-weight: 400; }

.ligne-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ligne-actions form { flex: 1 1 auto; }

/* Planning (Étape 6) : navigation de semaine, onglets Mes tâches / Vue
   globale, grille jours x créneaux horaires (14h -> 02h). Présentation en
   agenda (colonnes arrondies, en-tête collante, créneau "aujourd'hui"
   teinté, tâches en chips) plutôt qu'en tableau à cases. */
.planning-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.planning-nav__semaine { display: flex; align-items: center; gap: 10px; font-weight: 700; font-family: var(--police-titre); font-size: 1.05rem; }

.planning-onglets { display: flex; gap: 8px; margin-bottom: 18px; background: var(--surface-2); padding: 5px; border-radius: 999px; width: fit-content; }
.planning-onglet {
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    color: var(--texte-att);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    font-size: .86rem;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}
.planning-onglet:hover { color: var(--texte); }
.planning-onglet--actif { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px var(--ombre); }

.planning-grille-conteneur {
    overflow-x: auto;
    margin-bottom: 24px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre-carte);
}
.planning-grille {
    display: grid;
    grid-template-columns: 64px repeat(7, minmax(140px, 1fr));
    min-width: 1080px;
    background: var(--surface);
}
.planning-grille__cellule {
    border-bottom: 1px solid var(--bordure);
    border-right: 1px solid color-mix(in srgb, var(--bordure) 55%, transparent);
    padding: 6px;
    min-height: 60px;
}
.planning-grille__cellule:last-child { border-right: none; }
.planning-grille__entete {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface-2);
    padding: 14px 8px 12px;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-att);
    border-bottom: 1px solid var(--bordure);
    border-right: 1px solid color-mix(in srgb, var(--bordure) 55%, transparent);
}
.planning-grille__entete:last-child { border-right: none; }
.planning-grille__entete--aujourdhui { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.planning-grille__heure {
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
    font-size: .72rem;
    color: var(--texte-att);
    font-variant-numeric: tabular-nums;
}
.planning-grille__cellule--vide-heure { background: transparent; }

.planning-creneau { display: flex; flex-direction: column; gap: 5px; height: 100%; }
.planning-creneau__ajouter {
    background: none;
    border: 1px dashed transparent;
    border-radius: var(--rayon-mini);
    color: var(--texte-att);
    font-size: .74rem;
    padding: 5px;
    cursor: pointer;
    width: 100%;
    opacity: 0;
    transition: opacity .12s ease, border-color .12s ease, color .12s ease;
}
.planning-grille__cellule:hover .planning-creneau__ajouter { opacity: 1; border-color: var(--bordure); }
.planning-creneau__ajouter:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }

.tache-pastille {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--surface-2);
    border: none;
    border-left: 3px solid var(--accent);
    border-radius: var(--rayon-mini);
    padding: 6px 9px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--texte);
    box-shadow: 0 1px 2px var(--ombre);
    transition: transform .12s ease, box-shadow .12s ease;
}
.tache-pastille:hover { transform: translateY(-1px); box-shadow: 0 4px 10px var(--ombre); }
.tache-pastille--faite { border-left-color: #1E7A3B; opacity: .55; text-decoration: line-through; }
.tache-pastille--caisse { border-left-color: #B8790A; }
.tache-pastille__membres { display: block; color: var(--texte-att); font-size: .7rem; font-weight: 500; margin-top: 2px; text-decoration: none; }

.planning-checklist-employes {
    display: grid;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 16px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 10px 12px;
}
.planning-checklist-employes label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: .9rem; }

/* Contenus (Étape 7) : articles corrigés, corrections surlignées avec
   l'erreur d'origine au survol. Palette blanc / rouge / noir uniquement. */
.message-info {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--accent);
    padding: 10px 14px;
    border-radius: var(--rayon);
    font-size: .88rem;
    margin-bottom: 18px;
}
a.modale__fermer { text-decoration: none; }
.aide-champ { display: block; margin-top: 6px; color: var(--texte-att); font-size: .78rem; }
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .88rem; margin: 0 0 16px; }

.article-texte {
    line-height: 1.65;
    font-size: .98rem;
    border-left: 3px solid var(--bordure);
    padding: 4px 0 4px 16px;
    margin: 12px 0;
}
.article-texte p { margin: 0 0 .8em; }
.article-texte h3 { font-size: 1.25rem; margin: 1em 0 .4em; }
.article-texte h4 { font-size: 1.08rem; margin: 1em 0 .4em; }
.article-texte ul { margin: 0 0 .8em; padding-left: 1.4em; }
.article-texte blockquote { margin: 0 0 .8em; padding-left: 14px; border-left: 3px solid var(--accent); color: var(--texte-att); font-style: italic; }
.barre-format { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.article-signature { text-align: right; font-family: var(--police-titre); font-weight: 700; margin: 4px 0 12px; }
.apercu-affiche { display: block; max-width: 100%; max-height: 360px; margin: 0 auto 14px; border: 1px solid var(--bordure); border-radius: var(--rayon); }

.correction {
    position: relative;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: inherit;
    border-bottom: 2px solid var(--accent);
    border-radius: 2px;
    padding: 0 1px;
    white-space: pre-wrap;
}
.correction--originale { background: transparent; border-bottom: 2px dashed var(--texte-att); }
.correction--reformulee { background: color-mix(in srgb, var(--texte) 12%, transparent); border-bottom: 2px solid var(--texte); }
.correction[data-correction-id] { cursor: pointer; }
.correction[data-correction-id]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Infobulle : erreur d'origine au survol (ou au focus clavier). */
.correction:hover::after, .correction:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 10;
    width: max-content;
    max-width: 280px;
    background: var(--noir);
    color: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 6px 10px;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    box-shadow: 0 4px 14px var(--ombre);
    pointer-events: none;
}
html[data-theme="nuit"] .correction:hover::after,
html[data-theme="nuit"] .correction:focus-visible::after { background: var(--blanc); color: var(--noir); }

/* Notifications & Todolist (Étape 8) : palette blanc / rouge / noir. */
.lien-notifications { display: inline-flex; align-items: center; gap: 6px; }
.compteur-notifications {
    background: var(--accent);
    color: var(--sur-accent);
    border-radius: 999px;
    min-width: 20px;
    padding: 0 6px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.liste-notifications { list-style: none; margin: 0; padding: 0; }
.notification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0 12px 12px;
    border-bottom: 1px solid var(--bordure);
    border-left: 3px solid transparent;
}
.notification--non-lue { border-left-color: var(--accent); font-weight: 600; }
.notification__corps { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.notification__date { color: var(--texte-att); font-size: .78rem; font-weight: 400; }
.notification .ligne-actions form { flex: 0 0 auto; }

.barre-filtres { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; font-size: .85rem; }
.barre-filtres label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.barre-filtres select {
    padding: 6px 10px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--bg);
    color: var(--texte);
    font-family: var(--police-texte);
}

.pastille-importance {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    border: 1px solid var(--bordure);
    color: var(--texte-att);
}
.pastille-importance--normale { color: var(--texte); border-color: var(--texte); }
.pastille-importance--haute { color: var(--accent); border-color: var(--accent); }
.pastille-importance--urgente { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }

.case-tache {
    width: 24px;
    height: 24px;
    border: 2px solid var(--texte-att);
    border-radius: var(--rayon);
    background: transparent;
    color: var(--sur-accent);
    font-size: .9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.case-tache:hover { border-color: var(--accent); }
.case-tache--cochee { background: var(--accent); border-color: var(--accent); }
.case-tache--inactive { cursor: default; opacity: .5; }
.case-tache--inactive:hover { border-color: var(--texte-att); }
.tache-ligne--faite td:not(:first-child):not(:last-child) { opacity: .55; text-decoration: line-through; }
.tache-retard { color: var(--accent); font-weight: 700; }

@media (max-width: 640px) {
    .entete { padding: 14px 18px; }
    .principal { padding: 28px 18px 60px; }
    .champ--deux { grid-template-columns: 1fr; }
}

/* Affectation d'une tâche (todolist / planning) : tout le monde, pôles,
   grades, personnes. */
.affectation__tous { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; margin-bottom: 10px; }
.affectation__titre { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-att); margin: 4px 0 6px; }
.affectation__liste { max-height: 130px; margin-bottom: 10px; }
.affectation--tous .affectation__groupes { opacity: .4; pointer-events: none; }

/* Étape 9 — comptabilité : indicateurs, onglets, tableaux larges. */
.kpi-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.kpi { border: 1px solid var(--bordure, #ddd); border-left: 4px solid var(--texte, #111); border-radius: 6px; padding: 10px 12px; }
.kpi--fort { border-left-color: var(--accent); }
.kpi__libelle { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-att); }
.kpi__valeur { font-size: 1.25rem; font-weight: 700; margin-top: 4px; }
.kpi--fort .kpi__valeur { color: var(--accent); }
.kpi__detail { font-size: .7rem; color: var(--texte-att); margin-top: 2px; }
.onglet-panneau[hidden] { display: none; }
.planning-onglets { flex-wrap: wrap; }
.table-defilante { overflow-x: auto; max-width: 100%; }
.table-defilante table { min-width: 720px; }
tfoot th { border-top: 2px solid var(--accent); }

/* Étape 10 — menu à sous-menus déroulants et fenêtre de personnalisation.
   Palette blanc / rouge / noir uniquement, mêmes variables que le reste du site
   (le mode nuit s'applique donc automatiquement). */
.nav-utilisateur { flex-wrap: wrap; justify-content: flex-end; gap: 22px; font-weight: 600; }
.nav-utilisateur a {
    text-decoration: none;
    color: var(--texte-att);
    font-size: .88rem;
    letter-spacing: .01em;
    transition: color .15s ease;
}
.nav-utilisateur a:hover, .menu-groupe__bouton:hover { color: var(--texte); text-decoration: none; }
.menu-actif { color: var(--accent) !important; font-weight: 700; text-decoration: none; }

.menu-groupe { position: relative; }
.menu-groupe__bouton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--texte-att);
    cursor: pointer;
    transition: color .15s ease;
}
.menu-groupe__bouton::after { content: '▾'; font-size: .75em; }
.menu-groupe__bouton[aria-expanded="true"]::after { content: '▴'; }
.menu-groupe__liste {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    max-width: min(340px, calc(100vw - 36px));
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: 0 6px 18px var(--ombre);
    z-index: 1500;
}
.menu-groupe__liste[hidden] { display: none; }
.menu-groupe__liste--droite { left: auto; right: 0; }
.menu-groupe__liste a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px;
    color: var(--texte);
}
.menu-groupe__liste a:hover,
.menu-groupe__liste a:focus-visible {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    text-decoration: none;
}

/* Éditeur du menu (dans la modale « Personnaliser le menu »). */
.menu-editeur { list-style: none; margin: 0 0 14px; padding: 0; }
.menu-editeur--sous {
    margin: 8px 0 4px 18px;
    padding: 2px 0 0 14px;
    border-left: 2px solid var(--bordure);
    min-height: 10px;
}
.menu-editeur__element { margin-bottom: 8px; }
.menu-editeur__ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.menu-editeur__ligne input[type="text"],
.menu-editeur__ligne select {
    padding: 8px 10px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--bg);
    color: var(--texte);
    font-size: .9rem;
    font-family: var(--police-texte);
}
.menu-editeur__ligne input[type="text"] { flex: 1 1 170px; min-width: 0; }
.menu-editeur__ligne select { flex: 0 1 190px; min-width: 0; }
.menu-editeur__ligne input:focus, .menu-editeur__ligne select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.menu-editeur__element--groupe > .menu-editeur__ligne input[type="text"] { font-weight: 700; }
.menu-editeur__type {
    flex: 0 1 190px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-att);
}
.menu-editeur__option { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; margin: 0 0 14px; }
.menu-editeur__option input { margin-top: 3px; }
.menu-editeur__reinit { margin-top: 14px; }

@media (max-width: 640px) {
    .entete { flex-wrap: wrap; gap: 12px; }
    .entete__droite { flex-wrap: wrap; gap: 12px; }
}

/* Étape 11 — avatar Discord + cloche de notifications dans l'en-tête, logo
   configurable en mode jour / nuit. Palette blanc / rouge / noir, mêmes
   variables que le reste du site. */

.profil-utilisateur { position: relative; }
.profil-utilisateur__bouton {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--texte);
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
}
.profil-utilisateur__bouton:hover .profil-utilisateur__prenom { color: var(--accent); }
.profil-utilisateur__bouton::after {
    content: '▾';
    font-size: .68rem;
    color: var(--texte-att);
    margin-left: -2px;
}
.profil-utilisateur__avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--bordure);
    display: block;
}

.cloche-notifications, .profil-utilisateur { position: relative; }
.cloche-notifications__bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bordure);
    background: var(--surface-2);
    border-radius: 999px;
    color: var(--texte);
    font: inherit;
    cursor: pointer;
    font-size: 1rem;
    position: relative;
    transition: border-color .15s ease, transform .15s ease;
}
.cloche-notifications__bouton:hover { border-color: var(--accent); transform: translateY(-1px); }
.cloche-notifications__bouton .compteur-notifications {
    position: absolute;
    top: -4px;
    right: -4px;
    line-height: 18px;
    min-width: 18px;
    font-size: .68rem;
}

.cloche-notifications__menu, .profil-utilisateur__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: 0 6px 18px var(--ombre);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.cloche-notifications__menu { width: min(340px, calc(100vw - 36px)); padding: 8px 0; }
.profil-utilisateur__menu { min-width: 200px; padding: 6px 0; }
[data-menu-hover]:hover > [data-menu-hover-liste],
[data-menu-hover]:focus-within > [data-menu-hover-liste],
[data-menu-hover].est-ouverte > [data-menu-hover-liste] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.cloche-notifications__menu .liste-vide { padding: 10px 16px; margin: 0; }
.cloche-notifications__liste { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.cloche-notifications__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bordure);
    font-size: .86rem;
}
.cloche-notifications__item:last-child { border-bottom: none; }
.cloche-notifications__item--non-lue { border-left: 3px solid var(--accent); font-weight: 600; padding-left: 13px; }
.cloche-notifications__message { color: var(--texte); }
.cloche-notifications__tout {
    display: block;
    text-align: center;
    padding: 10px 16px 2px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.cloche-notifications__tout:hover { text-decoration: underline; text-underline-offset: 3px; }

.profil-utilisateur__menu a {
    display: block;
    padding: 9px 16px;
    color: var(--texte);
    text-decoration: none;
    font-size: .88rem;
    white-space: nowrap;
}
.profil-utilisateur__menu a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.profil-utilisateur__deconnexion {
    border-top: 1px solid var(--bordure);
    margin-top: 4px;
    color: var(--accent) !important;
}

@media (max-width: 640px) {
    .cloche-notifications__menu, .profil-utilisateur__menu { right: -18px; }
    .profil-utilisateur__prenom { display: none; }
}

/* ============================================================
   Étape 13 — page d'accueil (tableau de bord après connexion).
   Grille de widgets plus large que .principal (980px) : mise en avant
   éditoriale façon "vitrine" pour les contenus, tout en réutilisant les
   variables jour/nuit et la palette blanc/rouge/noir du reste du site
   (pas de couleurs figées en dur — la bascule de thème doit continuer à
   fonctionner ici comme partout ailleurs).
   ============================================================ */

.principal:has(.page-accueil) { max-width: 1360px; }

.grille-accueil {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 32px;
}

/* --- Carte profil --- */
.carte-profil { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; }
.carte-profil__avatar {
    width: 88px;
    height: 88px;
    border-radius: var(--rayon);
    object-fit: cover;
    border: 1px solid var(--bordure);
    flex: 0 0 auto;
}
.carte-profil__corps { flex: 1 1 auto; min-width: 0; }
.carte-profil__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.carte-profil__nom { margin: 0; font-size: 1.15rem; }
.carte-profil__pole { color: var(--texte-att); font-size: .84rem; }

.badge-role {
    display: inline-block;
    background: var(--texte);
    color: var(--bg);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 3px 10px;
    border-radius: 999px;
}
.badge-role--direction { background: var(--accent); color: var(--sur-accent); }

.fiche-infos__ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--bordure);
    font-size: .84rem;
}
.fiche-infos__ligne:last-child { border-bottom: none; }
.fiche-infos__libelle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--texte-att);
}
.fiche-infos__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: .68rem;
    flex: 0 0 auto;
}
.fiche-infos__valeur { text-align: right; font-weight: 500; }

@media (max-width: 560px) {
    .carte-profil { flex-direction: column; }
    .carte-profil__avatar { width: 72px; height: 72px; }
}

.lien-notes {
    background: none;
    border: none;
    padding: 0;
    color: var(--texte);
    font: inherit;
    cursor: pointer;
    text-align: right;
    max-width: 260px;
}
.lien-notes:hover { color: var(--accent); text-decoration: underline; }

.pastilles-notes--bouton {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.ronds-permis { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rond-permis {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    background: var(--bg);
    border: 2px solid var(--bordure);
    opacity: .55;
    filter: grayscale(1);
}
.rond-permis--obtenu {
    border-color: #1E7A3B;
    background: color-mix(in srgb, #1E7A3B 14%, transparent);
    opacity: 1;
    filter: none;
}

/* --- Accès rapides --- */
.grille-acces-rapides { display: flex; flex-direction: column; gap: 10px; }
.acces-rapide {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface-2);
    text-decoration: none;
    color: var(--texte);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.acces-rapide:hover {
    border-color: var(--accent);
    box-shadow: var(--ombre-carte-survol);
    transform: translateX(3px);
}
.acces-rapide__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--rayon);
    background: var(--surface);
    font-size: 1.1rem;
    flex: 0 0 auto;
}
.acces-rapide__bas { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; justify-content: space-between; }
.acces-rapide__libelle { font-weight: 700; font-size: .95rem; }
.acces-rapide__fleche { color: var(--accent); transition: transform .15s ease; }
.acces-rapide:hover .acces-rapide__fleche { transform: translateX(3px); }

/* --- Vitrines "Derniers articles" / "Dernières vidéos" : cartes façon
   vignette (image/pictogramme en haut, texte en dessous), grille large et
   effet de survol — l'esprit "Netflix" adapté à la palette du site plutôt
   qu'un thème sombre figé, pour ne pas casser le mode jour. --- */
.bloc-contenus { margin-bottom: 40px; }
.bloc-contenus__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}
.bloc-contenus__entete h2 { margin: 0; font-size: 1.25rem; }
.lien-voir-tout { color: var(--accent); font-size: .88rem; text-decoration: none; font-weight: 600; white-space: nowrap; }
.lien-voir-tout:hover { text-decoration: underline; }

.grille-vitrine {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.carte-vitrine {
    display: block;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre-carte);
    overflow: hidden;
    text-decoration: none;
    color: var(--texte);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.carte-vitrine:hover {
    transform: translateY(-6px);
    box-shadow: var(--ombre-carte-survol);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--bordure));
}

.carte-vitrine__couverture {
    position: relative;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--noir), var(--rouge));
    overflow: hidden;
}
.carte-vitrine__couverture--video { background: linear-gradient(135deg, var(--rouge), var(--noir)); }
.carte-vitrine__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carte-vitrine__couverture::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 55%);
}
.carte-vitrine__pictogramme { font-size: 2.2rem; opacity: .9; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); }
.carte-vitrine__etiquette {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(3px);
}
.carte-vitrine__duree {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--rayon-mini);
    font-variant-numeric: tabular-nums;
}
.carte-vitrine__lecture {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 1;
    transition: background-color .18s ease, transform .18s ease;
}
.carte-vitrine:hover .carte-vitrine__lecture { background: var(--accent); transform: scale(1.08); }

.carte-vitrine__corps { padding: 16px 18px 18px; }
.carte-vitrine__categorie { margin: 0 0 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.carte-vitrine__titre { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.35; font-weight: 700; }
.carte-vitrine__extrait { margin: 0 0 10px; font-size: .85rem; color: var(--texte-att); line-height: 1.45; }
.carte-vitrine__meta { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--texte-att); }

/* --- Pop-up "Mes notes RH" (lecture seule, cf. .pastilles-notes du module RH) --- */
.liste-notes-rh { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.liste-notes-rh__item { border-bottom: 1px solid var(--bordure); padding-bottom: 12px; }
.liste-notes-rh__item:last-child { border-bottom: none; padding-bottom: 0; }
.liste-notes-rh__contenu { margin: 8px 0 4px; font-size: .92rem; }
.liste-notes-rh__meta { font-size: .78rem; color: var(--texte-att); }

@media (max-width: 900px) {
    .grille-accueil { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .carte-profil__entete { flex-wrap: wrap; }
    .fiche-infos__ligne { flex-direction: column; align-items: flex-start; gap: 4px; }
    .fiche-infos__valeur { text-align: left; }
    .ronds-permis { justify-content: flex-start; }
}

/* --- Page Annonces : un jour à la fois, quatre bandeaux (tranches) tarifés
       de créneaux de 30 min (12h00 -> 02h00), sur le modèle de l'affichage
       « Publicité : X $ » de l'entreprise. Palette blanc / rouge / noir : les
       bandeaux sont des dégradés de noir et de rouge sombre (variables
       --cal-tranche-0..3, à changer ici pour d'autres teintes).
       Créneau libre = contour blanc ; pris = plein blanc ; réservé (contrat
       pas encore payé) = blanc hachuré. Identique en mode jour et nuit. --- */
.calendrier-annonces {
    --cal-tranche-0: #16161A;
    --cal-tranche-1: #2A2A30;
    --cal-tranche-2: #4A141A;
    --cal-tranche-3: #1F1012;
    margin-bottom: 26px;
}
.cal-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-semaine { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-semaine__titre { font-weight: 700; font-family: var(--police-titre); font-size: 1.05rem; }

.cal-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.cal-jour {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 10px 4px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-grand);
    background: var(--surface);
    color: var(--texte);
    text-decoration: none;
    box-shadow: var(--ombre-carte);
    transition: border-color .15s ease, transform .15s ease;
}
.cal-jour:hover { border-color: var(--accent); transform: translateY(-1px); }
.cal-jour__nom { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-att); }
.cal-jour__date { font-family: var(--police-titre); font-size: 1.15rem; font-weight: 700; }
.cal-jour__libres { font-size: .72rem; color: var(--texte-att); }
.cal-jour--aujourdhui .cal-jour__nom { color: var(--accent); }
.cal-jour--passe { opacity: .55; }
.cal-jour--actif { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; }
.cal-jour--actif .cal-jour__nom, .cal-jour--actif .cal-jour__libres { color: rgba(255, 255, 255, .85); }

.cal-legende { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 14px; font-size: .8rem; color: var(--texte-att); }
.cal-legende__jour { color: var(--texte); font-family: var(--police-titre); font-size: 1.1rem; margin-right: auto; }
.cal-legende__item { display: inline-flex; align-items: center; gap: 6px; }
.cal-puce { display: inline-block; width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--texte); }
.cal-puce--libre { background: transparent; }
.cal-puce--pris { background: var(--texte); }
.cal-puce--reserve { background: repeating-linear-gradient(135deg, var(--texte) 0 2px, transparent 2px 5px); }

.cal-tranche {
    border-radius: var(--rayon-grand);
    border: 2px solid rgba(255, 255, 255, .85);
    margin-bottom: 12px;
    padding: 0 10px 12px;
    color: #fff;
    background: var(--cal-tranche-0);
    box-shadow: var(--ombre-carte);
}
.cal-tranche--0 { background: linear-gradient(160deg, var(--cal-tranche-0), color-mix(in srgb, var(--cal-tranche-0) 70%, #000)); }
.cal-tranche--1 { background: linear-gradient(160deg, var(--cal-tranche-1), color-mix(in srgb, var(--cal-tranche-1) 70%, #000)); }
.cal-tranche--2 { background: linear-gradient(160deg, var(--cal-tranche-2), color-mix(in srgb, var(--cal-tranche-2) 70%, #000)); }
.cal-tranche--3 { background: linear-gradient(160deg, var(--cal-tranche-3), color-mix(in srgb, var(--cal-tranche-3) 70%, #000)); }

.cal-tranche__entete { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 4px; }
.cal-tranche__prix { position: absolute; left: 6px; top: 10px; font-size: .82rem; line-height: 1.35; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.cal-tranche__prix strong { color: #fff; font-size: .95rem; }
.cal-tranche__titre { margin: 0; color: #fff; font-family: var(--police-titre); font-size: 1.7rem; font-weight: 700; text-shadow: 0 0 18px rgba(255, 255, 255, .25); }

.cal-creneaux { display: grid; grid-template-columns: repeat(var(--nb), minmax(0, 1fr)); gap: 8px; }
.cal-cren {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    min-height: 84px;
    padding: 8px 6px;
    margin: 0;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-family: inherit;
    text-align: center;
    min-width: 0;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cal-cren__heure { font-size: .82rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.cal-cren__etat { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.cal-cren__etat--libre { opacity: .6; }
.cal-cren__nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .85rem; }
.cal-cren__plus { display: none; font-size: .75rem; font-weight: 700; }

.cal-cren--cliquable { cursor: pointer; }
.cal-cren--cliquable:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.cal-cren--cliquable:hover .cal-cren__etat { display: none; }
.cal-cren--cliquable:hover .cal-cren__plus { display: block; }
.cal-cren--passe { opacity: .35; border-style: dashed; }

.cal-cren--pris, .cal-cren--reserve { cursor: pointer; }
.cal-cren--pris { background: #fff; color: #121212; border-color: #fff; }
.cal-cren--pris .cal-cren__etat { opacity: .6; }
.cal-cren--reserve {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 6px, rgba(255, 255, 255, .06) 6px 12px);
}
.cal-cren--pris:hover, .cal-cren--reserve:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }

@media (max-width: 900px) {
    .cal-creneaux { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cal-tranche__titre { font-size: 1.35rem; }
}
@media (max-width: 560px) {
    .cal-creneaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cal-jours { gap: 4px; }
    .cal-jour { padding: 8px 2px; }
    .cal-jour__libres { display: none; }
    .cal-tranche__entete { flex-direction: column; align-items: flex-start; }
    .cal-tranche__prix { position: static; margin-bottom: 4px; }
    .cal-tranche__titre { font-size: 1.2rem; align-self: center; }
}

/* Pop-up de prise : cases jours / semaines (les inputs ne passent pas par .champ,
   dont le style cible tous les <input>). */
.cal-groupe { margin-bottom: 16px; }
.cal-groupe__entete { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; font-weight: 600; margin-bottom: 8px; }
.cal-lien { background: none; border: none; color: var(--accent); font-family: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; padding: 0; }
.cal-lien:hover { text-decoration: underline; }
.cal-cases { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-cases label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--surface);
}
.cal-cases label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); }
.cal-cases input { width: auto; margin: 0; accent-color: var(--accent); }

/* Champ masqué par script (ex. nom d'entreprise quand un contrat est choisi) */
.champ[hidden] { display: none; }

/* Annonces : pastille « faite / à valider » sur un créneau pris */
.cal-cren__fait { align-self: flex-start; margin-top: 2px; padding: 1px 6px; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.cal-cren__fait--valide { background: #1E7A3B; }
.cal-cren__fait--a_valider { background: #B8790A; }

/* Logo d'une entreprise cliente (contrats, détail d'une annonce). */
.logo-entreprise { height: 28px; width: auto; max-width: 90px; object-fit: contain; border-radius: 6px; vertical-align: middle; background: var(--surface); }
.logo-entreprise--grand { height: 48px; max-width: 140px; }
.aide-champ[hidden] { display: none; }