/* Feuille de style minimale de la fondation technique.
   Le design des ecrans (docs/wireframes.md) sera traite avec les
   fonctionnalites metier. Responsive impose : usage sur ordinateur et tablette
   en boutique. */

:root {
    --bleu: #1f4e79;
    --gris: #f4f5f7;
    --texte: #22252a;
    --vert: #1a7f4b;
    --rouge: #b3261e;
}

* { box-sizing: border-box; }

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

.entete {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--bleu);
    color: #fff;
}

.marque { color: #fff; font-weight: 600; text-decoration: none; }

.badge {
    font-size: .8rem;
    padding: .15rem .6rem;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
}

.contenu {
    max-width: 60rem;
    margin: 1.5rem auto;
    padding: 1.5rem;
    background: #fff;
    border-radius: 6px;
}

h1 { margin-top: 0; font-size: 1.5rem; }
h2 { font-size: 1.15rem; margin-top: 2rem; }

ul, ol { padding-left: 1.25rem; }

.ok { color: var(--vert); }
.ko { color: var(--rouge); font-weight: 600; }

code {
    background: var(--gris);
    padding: .1rem .35rem;
    border-radius: 3px;
    font-size: .9em;
}

.bouton {
    display: inline-block;
    padding: .5rem 1rem;
    background: var(--bleu);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
}

.pied {
    max-width: 60rem;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
    font-size: .85rem;
    color: #5a6169;
}

@media (max-width: 40rem) {
    .contenu { margin: 0; border-radius: 0; padding: 1rem; }
}

/* ---------------------------------------------------------------------------
   Planning (creneaux)
   Responsive impose : la grille hebdomadaire doit rester utilisable sur la
   tablette posee en boutique, d'ou le conteneur a defilement horizontal plutot
   qu'un tableau compresse illisible.
   --------------------------------------------------------------------------- */

.navigation { display: flex; gap: 1rem; }
.navigation a { color: #fff; }

.titre-action {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
}

.bouton-secondaire { background: #fff; color: var(--bleu); border: 1px solid var(--bleu); }

.alerte { padding: .6rem .9rem; border-radius: 4px; border-left: 4px solid; }
.alerte-succes { background: #eaf6ef; border-color: var(--vert); }
.alerte-erreur { background: #fdecea; border-color: var(--rouge); }
.alerte-avertissement { background: #fdf3e0; border-color: #a86b00; }
.alerte-info { background: #eaf0f7; border-color: var(--bleu); }

.tableau { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.tableau th, .tableau td { padding: .5rem .6rem; border-bottom: 1px solid #e2e5ea; text-align: left; vertical-align: top; }
.tableau thead th { background: var(--gris); font-size: .85rem; }
.tableau .nombre { text-align: right; white-space: nowrap; }

.navigation-semaine {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
    padding: .5rem .75rem;
    background: var(--gris);
    border-radius: 4px;
}

.semaine-courante { font-size: 1rem; }

.grille-defilante { overflow-x: auto; }

.tableau-planning { min-width: 52rem; }
.tableau-planning .cellule-jour { min-width: 6.5rem; }
.tableau-planning .cellule-salarie { min-width: 11rem; font-weight: 600; }
.cellule-alerte { background: #fdf3e0; }

.jeton {
    display: block;
    margin-bottom: .2rem;
    padding: .15rem .4rem;
    border-radius: 3px;
    font-size: .8rem;
    text-decoration: none;
}

.jeton-creneau { background: #dce8f4; color: var(--bleu); border: 1px solid #b7cde3; }
.jeton-valide { background: #d7ecdf; color: #145c37; border-color: #a9d5bd; }
.jeton-brouillon { border-style: dashed; }
/* Creneau pose sur une autre boutique : lecture seule (arbitrage reseau). */
.jeton-ailleurs { background: #eeeff2; color: #5a6169; border: 1px dashed #b9bec6; }
.jeton-ailleurs em { display: block; font-size: .72rem; }
.jeton-absence { background: #fdf3e0; color: #7a4d00; border: 1px solid #e2c893; }
.jeton-repos { color: #8b929b; font-size: .78rem; }

.ajout-discret { color: #8b929b; font-size: .9rem; text-decoration: none; }
.ajout-discret:hover { color: var(--bleu); }

.etiquette {
    display: inline-block;
    padding: 0 .35rem;
    border-radius: 3px;
    background: var(--gris);
    font-size: .7rem;
    text-transform: uppercase;
}

.etiquette-mobile { background: #dce8f4; color: var(--bleu); }
.etiquette-fermee { background: #fdecea; color: var(--rouge); }

.formulaire { max-width: 40rem; }
.champ { display: flex; flex-direction: column; gap: .2rem; margin: 0 0 1rem; }
.champ label { font-weight: 600; font-size: .9rem; }
.champ input, .champ select { padding: .4rem; border: 1px solid #c3c8d0; border-radius: 4px; }
.champs-cote-a-cote { display: flex; flex-wrap: wrap; gap: 1rem; }
.champs-cote-a-cote > .champ { flex: 1 1 12rem; }
.obligatoire { color: var(--rouge); }
.aide-champ, .aide { font-size: .8rem; color: #5a6169; }
.erreur-champ { display: block; color: var(--rouge); font-size: .8rem; font-weight: 600; }

.actions-formulaire { display: flex; gap: 1rem; align-items: center; }
.actions-secondaires { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.en-ligne { display: inline; }
.lien-bouton { background: none; border: 0; color: var(--bleu); text-decoration: underline; cursor: pointer; font: inherit; }

/* Bouton de deconnexion : icone seule, sans encadre ni texte -- visible en
   permanence (pas seulement au survol). Couleur rougeatre par defaut,
   convention visuelle habituelle pour une action de sortie. */
.compte {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.bouton-deconnexion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
    border: 0;
    background: none;
    color: #ffd7d0;
    line-height: 0;
}
.bouton-deconnexion:hover {
    color: #ff9a90;
}
.bouton-deconnexion svg { flex-shrink: 0; display: block; }
.lien-danger { color: var(--rouge); }
.lien-annuler { color: #5a6169; }

.vide { padding: 1.5rem; text-align: center; color: #5a6169; background: var(--gris); border-radius: 4px; }
.repos { color: #8b929b; }
.compteur { font-weight: 400; color: #5a6169; font-size: .9rem; }
.ligne-inactive { opacity: .6; }

/* ---------------------------------------------------------------------------
   Conges (demandes et decisions)
   Les deux formulaires de decision (valider / refuser) tiennent dans la meme
   cellule de tableau : ils sont empiles verticalement pour rester utilisables
   sur la tablette posee en boutique.
   --------------------------------------------------------------------------- */

.jeton-statut { display: inline-block; font-weight: 600; }
.jeton-en_attente { background: #fdf3e0; color: #7a4d00; border: 1px solid #e2c893; }
.jeton-validee { background: #d7ecdf; color: #145c37; border: 1px solid #a9d5bd; }
.jeton-refusee { background: #fdecea; color: var(--rouge); border: 1px solid #f0bdb8; }
.jeton-annulee { background: #eeeff2; color: #5a6169; border: 1px dashed #b9bec6; }

.decision {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin-bottom: .5rem;
}

.decision input[type="text"] {
    flex: 1 1 9rem;
    min-width: 7rem;
    padding: .3rem;
    border: 1px solid #c3c8d0;
    border-radius: 4px;
    font-size: .85rem;
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}