/* Page de départ CFPMI — complète charte.css */
main { max-width: 560px; }
main.large { max-width: 1040px; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 4px; font-weight: 600; font-size: .95rem; }
input { padding: 11px 12px; font: inherit; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); color: var(--encre); }
button { padding: 12px; font: inherit; font-weight: 700; color: #fff; background: var(--cfpmi-bleu); border: 0; border-radius: 10px; cursor: pointer; }
button:hover { filter: brightness(1.15); }
.erreur { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #fde8e6; color: #8a1c10; border: 1px solid #f3b8b1; }
.info { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #e6f0fb; color: #123d6b; border: 1px solid #b8d2ee; }
.deconnexion { margin-top: 24px; text-align: center; }
.deconnexion a { color: var(--discret); }

/* Modules sur trois colonnes (comme dans le module Administration) : deux sur tablette, une sur téléphone. */
.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.grille a.appli { margin: 0; }
@media (max-width: 820px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grille { grid-template-columns: 1fr; } }

/* Page de départ : bandeaux noirs en haut et en bas (même mise en forme que les modules), partie centrale inchangée. */
:root { --marine: #16324a; }
body.page-depart { padding: 0; align-items: stretch; justify-content: flex-start; }
body.page-depart > main { flex: 1 1 auto; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; justify-content: center; }
body.page-depart .entete, body.page-depart .pied { background: var(--marine); color: #fff; position: sticky; z-index: 50; }
body.page-depart .entete { top: 0; }
body.page-depart .pied { bottom: 0; }
body.page-depart .entete-contenu, body.page-depart .pied-contenu { padding: .9rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
body.page-depart .entete-contenu > .zone-connexion { margin-left: auto; }
body.page-depart .marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
body.page-depart .marque-logo { height: 40px; width: auto; background: #fff; border-radius: 6px; margin-right: .3rem; }
body.page-depart .marque-sigle { font-size: 1.3rem; font-weight: 700; letter-spacing: .03em; }
body.page-depart .marque-libelle, body.page-depart .utilisateur-connecte, body.page-depart .mode-courant { font-size: .95rem; color: #cfe0d9; }
body.page-depart .utilisateur-connecte, body.page-depart .mode-courant { font-size: .9rem; }
body.page-depart .bouton { font: inherit; font-size: .9rem; font-weight: 700; padding: .5rem 1.1rem; border-radius: 6px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; line-height: 1.2; text-decoration: none; }
body.page-depart .bouton-contour { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
body.page-depart .bouton-contour:hover { background: rgba(255, 255, 255, .12); }

/* Titre gardé pour les lecteurs d'écran, invisible à l'écran (le logo tient lieu de titre). */
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Logo du centre de la page de départ : 20 % plus petit que dans la charte (380 px -> 304 px). */
body.page-depart .logo { max-width: 304px; }