/* 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; }
.marque:hover { opacity: .85; }

.lien-portail {
    color: rgba(255,255,255,.65);
    font-size: .8rem;
    text-decoration: none;
    padding: .2rem .5rem;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.lien-portail:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
}

.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;
}

/* ---------------------------------------------------------------------------
   Catalogue de formation (Learning)
   Meme charte que Planning : les deux applications sont vues comme une seule
   par les utilisateurs, un ecart visuel se lirait comme un bug.
   --------------------------------------------------------------------------- */

/* Champs longs : la description d'une formation et le contenu d'un chapitre se
   redigent, ils ne tiennent pas sur une ligne. */
.champ textarea {
    padding: .4rem;
    border: 1px solid #c3c8d0;
    border-radius: 4px;
    font: inherit;
    resize: vertical;
    min-height: 4rem;
}

.champ input[type="search"],
.champ input[type="number"],
.champ input[type="url"] { font: inherit; }

.navigation-semaine input[type="search"] {
    flex: 1 1 14rem;
    padding: .4rem;
    border: 1px solid #c3c8d0;
    border-radius: 4px;
    font: inherit;
}

.navigation-semaine label { font-size: .9rem; }

/* Fleches de reordonnancement : deux boutons colles, discrets, et clairement
   inertes quand l'element est deja en butee (haut ou bas de la liste). */
.lien-bouton[disabled] {
    color: #b9bec6;
    text-decoration: none;
    cursor: default;
}

.tableau td .lien-bouton { padding: 0 .15rem; font-size: 1rem; }

/* Le bouton d'une action destructrice reste un bouton plein, mais rouge : il ne
   doit pas se confondre avec l'action d'enregistrement habituelle. */
.bouton.lien-danger {
    background: var(--rouge);
    color: #fff;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

/* Fil d'Ariane : catalogue › formation › module. */
.contenu > .aide a { color: var(--bleu); }

/* Le titre d'une formation et son extrait de description tiennent dans la meme
   cellule : l'extrait passe a la ligne, en gris. */
.tableau th[scope="row"] .aide-champ { display: block; font-weight: 400; }

/* ---------------------------------------------------------------------------
   Quiz (administration)
   Chaque question est un bloc autonome : enonce, reponses proposees, puis le
   formulaire d'ajout d'une reponse. La redaction d'un quiz enchaine des dizaines
   de petites saisies, elles doivent toutes tenir sur le meme ecran.
   --------------------------------------------------------------------------- */

.bloc-question,
.bloc-module,
.bloc-formation {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #e2e5ea;
    border-radius: 6px;
}

.bloc-question h2,
.bloc-module h3 { margin-top: 0; font-size: 1.05rem; }

.enonce { font-weight: 600; margin: .25rem 0 .75rem; }

.actions-question { display: flex; gap: .75rem; align-items: center; }

.liste-reponses { list-style: none; padding: 0; margin: 0 0 1rem; }
.liste-reponses li {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    padding: .35rem 0;
    border-bottom: 1px solid #eef0f3;
}

/* ---------------------------------------------------------------------------
   Progression
   La jauge est un <progress> natif et non une <div> dont on reglerait la
   largeur : la CSP du projet (default-src 'self') interdit l'attribut style en
   ligne autant que le script en ligne. L'element natif porte sa valeur dans un
   attribut HTML et est correctement annonce par les lecteurs d'ecran.
   --------------------------------------------------------------------------- */

.progression { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.progression-valeur { font-weight: 600; font-size: .85rem; }

.jauge {
    width: 7rem;
    height: .6rem;
    border: 1px solid #c3c8d0;
    border-radius: 999px;
    background: var(--gris);
    /* Les deux moteurs stylent <progress> par des pseudo-elements differents :
       les deux jeux de regles sont necessaires, aucun navigateur ne comprend
       ceux de l'autre. */
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
}
.jauge-large { width: 100%; height: .8rem; }
.jauge::-webkit-progress-bar { background: var(--gris); }
.jauge::-webkit-progress-value { background: var(--bleu); }
.jauge::-moz-progress-bar { background: var(--bleu); }

.encadre-progression {
    margin: 1rem 0 1.5rem;
    padding: 1rem;
    background: var(--gris);
    border-radius: 6px;
}
.encadre-progression h2 { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Parcours du collaborateur
   --------------------------------------------------------------------------- */

.liste-etapes { list-style: none; padding: 0; margin: 0; }
.liste-etapes li {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    padding: .4rem 0;
    border-bottom: 1px solid #eef0f3;
}
.etape-marque { width: 1.2rem; color: #8b929b; font-weight: 600; }
.etape-faite .etape-marque { color: var(--vert); }
.etape-faite a { color: #5a6169; }

.contenu-chapitre {
    margin: 1rem 0 1.5rem;
    padding: 1rem;
    border: 1px solid #e2e5ea;
    border-radius: 6px;
    background: #fff;
}

/* Groupes de cases a cocher : selection des destinataires d'une attribution,
   reponses d'une question de quiz. Une case par ligne, cible tactile large :
   ces ecrans s'utilisent aussi sur la tablette posee en boutique. */
.groupe-cases { border: 1px solid #c3c8d0; border-radius: 4px; padding: .75rem; }
.groupe-cases legend { font-weight: 600; font-size: .9rem; padding: 0 .35rem; }

.case-collaborateur,
.case-reponse {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    padding: .4rem .2rem;
    border-bottom: 1px solid #eef0f3;
    font-weight: 400;
}
.case-collaborateur:last-child,
.case-reponse:last-child { border-bottom: 0; }
.case-collaborateur input[disabled] + * { color: #8b929b; }

.formulaire-quiz { max-width: 45rem; }

@media (max-width: 40rem) {
    .titre-action { align-items: flex-start; }
    .navigation-semaine { flex-direction: column; align-items: stretch; }
    .jauge { width: 100%; }
}