/*
Olympe Fuga - feuille de style principale

Ce fichier regroupe les styles de l'ensemble de l'interface métier :
connexion, accueil, jeunes, déclarations, cessations, PDF et préparation
des courriels.
*/


/* =========================================================
   Variables générales
   ========================================================= */

:root {
    --couleur-principale: #1f4e78;
    --couleur-principale-foncee: #163a5a;
    --couleur-secondaire: #eaf2f8;
    --couleur-texte: #1f2937;
    --couleur-texte-secondaire: #6b7280;
    --couleur-fond: #f5f7fa;
    --couleur-blanc: #ffffff;
    --couleur-bordure: #d1d5db;
    --couleur-bordure-legere: #e5e7eb;
    --couleur-succes: #166534;
    --couleur-succes-fond: #dcfce7;
    --couleur-erreur: #991b1b;
    --couleur-erreur-fond: #fee2e2;
    --couleur-alerte: #92400e;
    --couleur-alerte-fond: #fef3c7;
    --ombre-legere: 0 2px 8px rgba(15, 23, 42, 0.08);
    --ombre-carte: 0 6px 18px rgba(15, 23, 42, 0.10);
    --rayon: 10px;
}


/* =========================================================
   Réinitialisation et base
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--couleur-fond);
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 6px;
    font-size: 1.9rem;
    line-height: 1.2;
}

h2 {
    margin-bottom: 16px;
    font-size: 1.3rem;
    line-height: 1.3;
}

h3 {
    margin-bottom: 10px;
    font-size: 1.08rem;
}

a {
    color: var(--couleur-principale);
}

button,
input,
select,
textarea {
    font: inherit;
}

img {
    max-width: 100%;
}


/* =========================================================
   En-tête principal
   ========================================================= */

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 96px;
    padding: 22px 32px;
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    box-shadow: var(--ombre-legere);
}

.entete h1 {
    color: var(--couleur-blanc);
}

.entete p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.86);
}

.entete-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.retour-accueil,
.lien-deconnexion,
.bouton-entete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    background: transparent;
    color: var(--couleur-blanc);
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.retour-accueil:hover,
.lien-deconnexion:hover,
.bouton-entete:hover {
    background: var(--couleur-blanc);
    color: var(--couleur-principale);
}


/* =========================================================
   Conteneurs et blocs
   ========================================================= */

.conteneur {
    width: min(1180px, calc(100% - 32px));
    margin: 30px auto 50px;
}

.conteneur-formulaire {
    width: min(900px, calc(100% - 32px));
}

.bloc {
    padding: 24px;
    border: 1px solid var(--couleur-bordure-legere);
    border-radius: var(--rayon);
    background: var(--couleur-blanc);
    box-shadow: var(--ombre-legere);
}

.bloc + .bloc {
    margin-top: 20px;
}

.bloc-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.texte-secondaire {
    color: var(--couleur-texte-secondaire);
}

.information-etape {
    padding: 14px 16px;
    border-left: 4px solid var(--couleur-principale);
    border-radius: 6px;
    background: var(--couleur-secondaire);
    color: var(--couleur-texte);
}

.message-erreur {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: var(--couleur-erreur-fond);
    color: var(--couleur-erreur);
    font-weight: 600;
}

.message-succes {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: var(--couleur-succes-fond);
    color: var(--couleur-succes);
    font-weight: 600;
}

.message-alerte {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: var(--couleur-alerte-fond);
    color: var(--couleur-alerte);
    font-weight: 600;
}


/* =========================================================
   Page de connexion
   ========================================================= */

.page-connexion {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(
            135deg,
            var(--couleur-principale),
            var(--couleur-principale-foncee)
        );
}

.carte-connexion {
    width: min(460px, 100%);
    padding: 34px;
    border-radius: 14px;
    background: var(--couleur-blanc);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.24);
}

.carte-connexion h1 {
    color: var(--couleur-principale);
}

.carte-connexion .sous-titre {
    margin-bottom: 26px;
    color: var(--couleur-texte-secondaire);
}

.carte-connexion form p {
    margin-bottom: 18px;
}

.carte-connexion button {
    width: 100%;
}


/* =========================================================
   Tableau de bord et cartes d'action
   ========================================================= */

.grille-actions,
.actions-principales {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.carte-action {
    display: flex;
    min-height: 150px;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    border: 1px solid var(--couleur-bordure-legere);
    border-radius: var(--rayon);
    background: var(--couleur-blanc);
    color: var(--couleur-texte);
    text-decoration: none;
    box-shadow: var(--ombre-legere);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.carte-action:hover {
    border-color: var(--couleur-principale);
    box-shadow: var(--ombre-carte);
    transform: translateY(-2px);
}

.carte-action h2,
.carte-action h3 {
    color: var(--couleur-principale);
}

.carte-action p {
    margin-bottom: 0;
    color: var(--couleur-texte-secondaire);
}

.carte-action-desactivee,
.carte-action.disabled {
    cursor: not-allowed;
    opacity: 0.56;
    pointer-events: none;
}


/* =========================================================
   Fugues en cours
   ========================================================= */

.liste-fugues {
    display: grid;
    gap: 14px;
}

.fiche-fugue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--couleur-bordure-legere);
    border-radius: 9px;
    background: var(--couleur-blanc);
}

.fiche-fugue p {
    margin: 4px 0 0;
    color: var(--couleur-texte-secondaire);
}

.date-fugue {
    color: var(--couleur-texte-secondaire);
    font-size: 0.95rem;
    white-space: nowrap;
}

.rappel-fugue {
    margin-bottom: 20px;
}

.bouton-cesser-carte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid var(--couleur-principale);
    border-radius: 8px;
    background: var(--couleur-blanc);
    color: var(--couleur-principale);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.bouton-cesser-carte:hover {
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
}


/* =========================================================
   Formulaires
   ========================================================= */

form {
    margin: 0;
}

form p,
.champ-metier,
.groupe-champ {
    margin-bottom: 18px;
}

form label,
.champ-metier label,
.groupe-champ label {
    display: block;
    margin-bottom: 7px;
    color: var(--couleur-texte);
    font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--couleur-bordure);
    border-radius: 7px;
    background: var(--couleur-blanc);
    color: var(--couleur-texte);
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--couleur-principale);
    box-shadow: 0 0 0 3px rgba(31, 78, 120, 0.14);
}

input[readonly],
textarea[readonly] {
    background: #f8fafc;
    color: #374151;
}

input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--couleur-bordure);
    border-radius: 7px;
    background: #f8fafc;
}

.helptext,
.aide-champ {
    display: block;
    margin-top: 6px;
    color: var(--couleur-texte-secondaire);
    font-size: 0.9rem;
}

.errorlist {
    margin: 0 0 8px;
    padding: 10px 14px 10px 34px;
    border-radius: 7px;
    background: var(--couleur-erreur-fond);
    color: var(--couleur-erreur);
}

.formulaire-actions,
.actions-formulaire {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}


/* =========================================================
   Boutons
   ========================================================= */

.bouton-enregistrer,
.bouton-principal,
.bouton-annuler,
.bouton-secondaire,
.bouton-copier,
.lien-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.1s ease;
}

.bouton-enregistrer,
.bouton-principal {
    border: 1px solid var(--couleur-principale);
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
}

.bouton-enregistrer:hover,
.bouton-principal:hover {
    border-color: var(--couleur-principale-foncee);
    background: var(--couleur-principale-foncee);
}

.bouton-annuler,
.bouton-secondaire {
    border: 1px solid var(--couleur-bordure);
    background: var(--couleur-blanc);
    color: var(--couleur-texte);
}

.bouton-annuler:hover,
.bouton-secondaire:hover {
    border-color: #9ca3af;
    background: #f3f4f6;
}

.bouton-copier {
    min-height: 38px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid #9ca3af;
    background: var(--couleur-blanc);
    color: var(--couleur-texte);
    font-size: 0.92rem;
}

.bouton-copier:hover {
    background: #f3f4f6;
}

button:active,
.lien-bouton:active {
    transform: translateY(1px);
}

button:disabled,
.bouton-desactive {
    cursor: not-allowed;
    opacity: 0.55;
}


/* =========================================================
   Liste des jeunes
   ========================================================= */

.barre-recherche {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-bottom: 20px;
}

.barre-recherche .champ-recherche {
    flex: 1;
}

.tableau-responsive {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--couleur-blanc);
}

th,
td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--couleur-bordure-legere);
    text-align: left;
    vertical-align: middle;
}

th {
    background: #f8fafc;
    color: #374151;
    font-size: 0.92rem;
}

tr:hover td {
    background: #fafcff;
}

.photo-jeune-miniature {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    object-fit: cover;
    background: #e5e7eb;
}

.actions-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lien-action {
    font-weight: 700;
    text-decoration: none;
}

.lien-action:hover {
    text-decoration: underline;
}

.etat-vide {
    padding: 30px 20px;
    border: 1px dashed var(--couleur-bordure);
    border-radius: var(--rayon);
    background: var(--couleur-blanc);
    color: var(--couleur-texte-secondaire);
    text-align: center;
}


/* =========================================================
   Badges et informations synthétiques
   ========================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
}

.badge-en-cours {
    background: var(--couleur-alerte-fond);
    color: var(--couleur-alerte);
}

.badge-cloturee {
    background: var(--couleur-succes-fond);
    color: var(--couleur-succes);
}

.badge-inactif {
    background: #e5e7eb;
    color: #4b5563;
}


/* =========================================================
   Préparation des PDF et des courriels
   ========================================================= */

.bloc-envoi {
    margin-top: 20px;
}

.actions-envoi {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

#destinataires,
#corps-mail {
    white-space: pre-wrap;
}


/* =========================================================
   Pied de page éventuel
   ========================================================= */

.pied-page {
    padding: 24px 16px;
    color: var(--couleur-texte-secondaire);
    font-size: 0.9rem;
    text-align: center;
}


/* =========================================================
   Adaptation aux écrans intermédiaires
   ========================================================= */

@media (max-width: 900px) {
    .entete {
        align-items: flex-start;
        flex-direction: column;
    }

    .grille-actions,
    .actions-principales {
        grid-template-columns: 1fr;
    }

    .fiche-fugue {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .date-fugue {
        white-space: normal;
    }
}


/* =========================================================
   Adaptation aux téléphones
   ========================================================= */

@media (max-width: 700px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 1.55rem;
    }

    .entete {
        min-height: auto;
        padding: 20px 18px;
    }

    .entete-actions {
        width: 100%;
    }

    .retour-accueil,
    .lien-deconnexion,
    .bouton-entete {
        width: 100%;
    }

    .conteneur,
    .conteneur-formulaire {
        width: min(100% - 20px, 100%);
        margin-top: 18px;
    }

    .bloc {
        padding: 18px;
    }

    .bloc-titre {
        align-items: flex-start;
        flex-direction: column;
    }

    .fiche-fugue {
        align-items: stretch;
        flex-direction: column;
    }

    .bouton-cesser-carte {
        width: 100%;
        text-align: center;
    }

    .formulaire-actions,
    .actions-formulaire,
    .actions-envoi,
    .barre-recherche {
        align-items: stretch;
        flex-direction: column;
    }

    .bouton-enregistrer,
    .bouton-principal,
    .bouton-annuler,
    .bouton-secondaire,
    .lien-bouton {
        width: 100%;
    }

    .carte-connexion {
        padding: 24px 20px;
    }

    th,
    td {
        padding: 11px 10px;
    }
}


/* =========================================================
   Messages importants
   ========================================================= */

.zone-messages {
    display: grid;
    gap: 14px;
    margin-bottom: 24px;
}

.zone-messages > div {
    position: relative;
    padding: 18px 20px 18px 54px;
    border: 2px solid;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.10);
    font-size: 1.04rem;
    font-weight: 900;
    line-height: 1.45;
}

.zone-messages > div::before {
    position: absolute;
    top: 15px;
    left: 18px;
    font-size: 1.35rem;
    font-weight: 900;
}

.message-success,
.message-succes {
    border-color: #22c55e;
    background: #dcfce7;
    color: #14532d;
}

.message-success::before,
.message-succes::before {
    content: "OK";
}

.message-error,
.message-erreur {
    border-color: #ef4444;
    background: #fee2e2;
    color: #7f1d1d;
}

.message-error::before,
.message-erreur::before {
    content: "!";
}

.message-warning,
.message-alerte {
    border-color: #f59e0b;
    background: #fef3c7;
    color: #78350f;
}

.message-warning::before,
.message-alerte::before {
    content: "!";
}

.carte-changement-mot-de-passe {
    width: min(620px, 100%);
}

.carte-changement-mot-de-passe .champ-metier input {
    width: 100%;
}


/* =========================================================
   Vignettes jeunes compactes
   ========================================================= */

.groupe-service {
    margin-top: 22px;
}

.titre-service {
    margin-bottom: 12px;
    padding: 11px 16px;
}

.grille-jeunes {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.vignette-jeune {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--couleur-bordure-legere);
    border-radius: 12px;
    background: var(--couleur-blanc);
    box-shadow: var(--ombre-carte);
}

.zone-photo-jeune {
    display: grid;
    width: 100%;
    height: 145px;
    padding: 9px;
    place-items: center;
    overflow: hidden;
    background: #eef3f8;
}

.photo-jeune-vignette {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.photo-jeune-absente {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border-radius: 50%;
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    font-size: 1.35rem;
    font-weight: 800;
}

.contenu-vignette-jeune {
    flex: 1;
    padding: 13px 15px 5px;
}

.contenu-vignette-jeune h3 {
    margin-bottom: 10px;
    font-size: 1.02rem;
}

.informations-jeune div {
    margin-bottom: 7px;
}

.informations-jeune dt {
    font-size: 0.74rem;
}

.informations-jeune dd {
    font-size: 0.92rem;
}

.actions-vignette-jeune {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 10px 15px 15px;
}

.actions-vignette-jeune .bouton-principal,
.actions-vignette-jeune .bouton-secondaire {
    width: 100%;
    min-height: 38px;
    padding: 7px 9px;
    font-size: 0.86rem;
}

.bouton-declarer-jeune {
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .grille-jeunes {
        grid-template-columns:
            repeat(auto-fit, minmax(240px, 1fr));
    }

    .zone-photo-jeune {
        height: 165px;
    }
}


/* =========================================================
   Correctif final des vignettes jeunes
   ========================================================= */

.groupe-service .grille-jeunes {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(240px, 280px));
    justify-content: start;
    align-items: stretch;
    gap: 14px;
}

.groupe-service .vignette-jeune {
    width: 100%;
    max-width: 280px;
    min-height: 0;
}

.groupe-service .zone-photo-jeune-contain {
    display: flex;
    width: 100%;
    height: 118px;
    min-height: 118px;
    padding: 8px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #eef3f8;
}

.groupe-service
.zone-photo-jeune-contain
> img.photo-jeune-vignette {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

.groupe-service .contenu-vignette-jeune {
    padding: 11px 13px 4px;
}

.groupe-service .contenu-vignette-jeune h3 {
    margin-bottom: 8px;
    font-size: 0.98rem;
}

.groupe-service .informations-jeune div {
    margin-bottom: 5px;
}

.groupe-service .actions-vignette-jeune {
    gap: 6px;
    padding: 8px 13px 13px;
}

.groupe-service
.actions-vignette-jeune
.bouton-principal,
.groupe-service
.actions-vignette-jeune
.bouton-secondaire {
    min-height: 35px;
    padding: 6px 8px;
    font-size: 0.81rem;
}

@media (max-width: 620px) {
    .groupe-service .grille-jeunes {
        grid-template-columns: 1fr;
    }

    .groupe-service .vignette-jeune {
        max-width: none;
    }

    .groupe-service .zone-photo-jeune-contain {
        height: 140px;
        min-height: 140px;
    }
}


/* =========================================================
   Nouvel essai et récupération des PDF
   ========================================================= */

.carte-journal-echec {
    border-left: 6px solid #dc2626;
}

.carte-journal-envoye {
    border-left: 6px solid #16a34a;
}

.numero-tentative {
    margin-top: 5px;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 750;
}

.actions-journal-envoi {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 15px 0;
}

.actions-journal-envoi form {
    margin: 0;
}

.actions-journal-envoi button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.secours-envoi {
    display: grid;
    gap: 9px;
    margin: 15px 0;
    padding: 15px;
    border: 2px solid #f59e0b;
    border-radius: 10px;
    background: #fffbeb;
    color: #78350f;
}

.secours-envoi strong {
    font-size: 1.02rem;
}

.secours-envoi p {
    margin: 0;
}

.secours-envoi-urgent {
    border-color: #dc2626;
    background: #fef2f2;
    color: #7f1d1d;
}

.bouton-pdf-prioritaire {
    display: inline-flex;
    width: fit-content;
    min-height: 44px;
    padding: 10px 16px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #b91c1c;
    color: #ffffff;
    font-weight: 850;
    text-decoration: none;
}

.bouton-pdf-prioritaire:hover {
    background: #991b1b;
}

@media (max-width: 650px) {
    .actions-journal-envoi {
        display: grid;
        grid-template-columns: 1fr;
    }

    .actions-journal-envoi form,
    .actions-journal-envoi a,
    .actions-journal-envoi button,
    .bouton-pdf-prioritaire {
        width: 100%;
    }
}


/* =========================================================
   Échec d'envoi clairement visible
   ========================================================= */

.zone-messages {
    margin: 0 0 22px;
}

.zone-messages .message-error,
.zone-messages .message-erreur {
    display: block;
    padding: 19px 22px 19px 58px;
    border: 3px solid #dc2626;
    border-radius: 11px;
    background: #fee2e2;
    color: #7f1d1d;
    box-shadow: 0 6px 18px rgba(127, 29, 29, 0.14);
    font-size: 1.06rem;
    font-weight: 900;
    line-height: 1.5;
}

.zone-messages .message-error::before,
.zone-messages .message-erreur::before {
    top: 16px;
    left: 18px;
    color: #b91c1c;
    font-size: 1.55rem;
    font-weight: 900;
}

.alerte-envoi-manuel {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
    padding: 18px 20px;
    border: 3px solid #dc2626;
    border-radius: 11px;
    background: #fee2e2;
    color: #7f1d1d;
    box-shadow: 0 6px 18px rgba(127, 29, 29, 0.12);
}

.alerte-envoi-manuel strong {
    font-size: 1.08rem;
    font-weight: 900;
}

.alerte-envoi-manuel p {
    margin: 0;
    font-weight: 750;
    line-height: 1.5;
}

.bouton-journal-envoi {
    display: inline-flex;
    width: fit-content;
    min-height: 42px;
    padding: 9px 14px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #7f1d1d;
    color: #ffffff;
    font-weight: 850;
    text-decoration: none;
}

.bouton-journal-envoi:hover {
    background: #991b1b;
}


/* =========================================================
   Suivi ciblé d'un envoi
   ========================================================= */

.navigation-journal {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.actions-suivi-cible {
    margin-top: 12px;
}

.actions-suivi-cible .bouton-secondaire {
    width: fit-content;
}

@media (max-width: 650px) {
    .navigation-journal {
        width: 100%;
    }

    .navigation-journal a {
        width: 100%;
    }

    .actions-suivi-cible .bouton-secondaire {
        width: 100%;
    }
}


/* =========================================================
   Compte utilisateur dans les en-têtes
   ========================================================= */

.barre-compte-utilisateur {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    flex-wrap: wrap;
}

.identite-utilisateur-connecte {
    display: grid;
    gap: 1px;
    min-width: 135px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.identite-utilisateur-connecte span,
.identite-utilisateur-connecte small {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.72rem;
}

.identite-utilisateur-connecte strong {
    font-size: 0.9rem;
}

.barre-compte-utilisateur form {
    margin: 0;
}

.bouton-compte-entete,
.bouton-deconnexion-entete {
    display: inline-flex;
    min-height: 40px;
    padding: 8px 12px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.bouton-compte-entete:hover,
.bouton-deconnexion-entete:hover {
    background: #ffffff;
    color: var(--couleur-principale);
}

.grille-compte {
    display: grid;
    grid-template-columns:
        minmax(280px, 0.9fr)
        minmax(340px, 1.1fr);
    gap: 20px;
    align-items: start;
}

.informations-compte {
    display: grid;
    gap: 0;
    margin: 0;
}

.informations-compte > div {
    display: grid;
    gap: 5px;
    padding: 13px 0;
    border-bottom: 1px solid #e2e8f0;
}

.informations-compte > div:last-child {
    border-bottom: 0;
}

.informations-compte dt {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.informations-compte dd {
    margin: 0;
    font-weight: 700;
}

.services-compte {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.formulaire-compte {
    display: grid;
    gap: 16px;
}

.formulaire-compte .champ-metier {
    display: grid;
    gap: 7px;
}

.formulaire-compte input {
    width: 100%;
}

@media (max-width: 1050px) {
    .barre-compte-utilisateur {
        width: 100%;
        margin-left: 0;
    }
}

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

@media (max-width: 620px) {
    .barre-compte-utilisateur {
        display: grid;
        grid-template-columns: 1fr;
    }

    .identite-utilisateur-connecte,
    .bouton-compte-entete,
    .barre-compte-utilisateur form,
    .bouton-deconnexion-entete {
        width: 100%;
    }
}


/* Confirmation sobre : prise en charge technique, sans promettre la réception. */
.zone-messages > .message-success,
.zone-messages > .message-succes {
    padding: 14px 18px 14px 46px;
    border: 1px solid #7db88f;
    border-left: 5px solid #368a52;
    border-radius: 9px;
    background: #edf8f0;
    color: #245737;
    box-shadow: none;
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.5;
}

.zone-messages > .message-success::before,
.zone-messages > .message-succes::before {
    content: "✓";
    top: 12px;
    left: 17px;
    color: #2f7d49;
    font-size: 1.15rem;
}

/* =========================================================
   Assistance à l'envoi manuel après trois échecs
   ========================================================= */

.tutoriel-envoi-manuel {
    display: grid;
    gap: 7px;
    margin: 2px 0 4px 22px;
    padding: 0;
}

.tutoriel-envoi-manuel li {
    padding-left: 3px;
}

.actions-secours-manuel {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.bouton-ionos {
    display: inline-flex;
    width: fit-content;
    min-height: 44px;
    padding: 10px 16px;
    align-items: center;
    justify-content: center;
    border: 2px solid #1f5f96;
    border-radius: 8px;
    background: #ffffff;
    color: #16456e;
    font-weight: 850;
    text-decoration: none;
}

.bouton-ionos:hover {
    background: #eaf4fb;
}

.champs-envoi-manuel {
    display: grid;
    gap: 13px;
    margin-top: 4px;
    padding: 15px;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #ffffff;
    color: #1f2937;
}

.champ-copiable {
    display: grid;
    gap: 6px;
}

.champ-copiable label {
    color: #374151;
    font-weight: 800;
}

.champ-copiable label span {
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 650;
}

.ligne-champ-copiable {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.ligne-champ-copiable input,
.ligne-champ-copiable textarea {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #f8fafc;
    color: #111827;
    font: inherit;
}

.ligne-champ-copiable textarea {
    resize: vertical;
    line-height: 1.45;
    white-space: pre-wrap;
}

.ligne-message-copiable {
    align-items: start;
}

.bouton-copier {
    min-width: 92px;
    padding: 9px 13px;
    border: 1px solid #94a3b8;
    border-radius: 7px;
    background: #ffffff;
    color: #1e3a5f;
    font-weight: 800;
    cursor: pointer;
}

.bouton-copier:hover:not(:disabled) {
    background: #eff6ff;
}

.bouton-copier:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.bouton-copier.copie-effectuee {
    border-color: #16a34a;
    background: #dcfce7;
    color: #166534;
}

.formulaire-confirmation-manuelle {
    display: grid;
    gap: 12px;
    margin-top: 3px;
    padding: 15px;
    border: 1px solid #fca5a5;
    border-radius: 9px;
    background: #ffffff;
}

.case-confirmation-manuelle {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #374151;
    font-weight: 700;
    cursor: pointer;
}

.case-confirmation-manuelle input {
    width: 19px;
    height: 19px;
    margin-top: 1px;
    flex: 0 0 auto;
}

.bouton-confirmation-manuelle {
    display: inline-flex;
    width: fit-content;
    min-height: 44px;
    padding: 10px 16px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: #166534;
    color: #ffffff;
    font-weight: 850;
    cursor: pointer;
}

.bouton-confirmation-manuelle:hover {
    background: #14532d;
}

.confirmation-envoi-manuel {
    display: grid;
    gap: 9px;
    margin: 15px 0;
    padding: 15px;
    border: 2px solid #16a34a;
    border-radius: 10px;
    background: #f0fdf4;
    color: #14532d;
}

.confirmation-envoi-manuel > strong {
    font-size: 1.02rem;
}

.confirmation-envoi-manuel p {
    margin: 0;
}

.confirmation-envoi-manuel .bouton-secondaire {
    width: fit-content;
    border-color: #86efac;
    background: #ffffff;
    color: #166534;
}

.alerte-secours-indisponible {
    padding: 12px 14px;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    background: #ffffff;
    color: #991b1b;
    font-weight: 700;
}

@media (max-width: 700px) {
    .actions-secours-manuel {
        display: grid;
        grid-template-columns: 1fr;
    }

    .actions-secours-manuel a,
    .bouton-ionos,
    .bouton-confirmation-manuelle,
    .confirmation-envoi-manuel .bouton-secondaire {
        width: 100%;
    }

    .ligne-champ-copiable {
        grid-template-columns: 1fr;
    }

    .bouton-copier {
        width: 100%;
    }
}

/* Icônes de navigation communes */
.lien-navigation-icone,
.bouton-deconnexion-entete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.icone-navigation-svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.entete .icone-navigation-svg,
.navigation-caisse-entete .icone-navigation-svg {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
}

.bouton-compact .icone-navigation-svg,
.bouton-petit .icone-navigation-svg,
.bouton-lien-danger .icone-navigation-svg {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}

.icone-deconnexion {
    display: block;
}

.lien-navigation-icone span {
    line-height: 1.2;
}

.bloc-parametres-caisses-compte {
    margin-top: 22px;
}

.grille-parametres-caisses-compte {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.colonne-parametres-caisse {
    min-width: 0;
}

.colonne-parametres-caisse h3 {
    margin: 0 0 6px;
}

.liste-parametres-caisses {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.ligne-parametre-caisse-compte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 15px;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #fff;
}

.ligne-parametre-caisse-compte > div {
    min-width: 0;
}

.ligne-parametre-caisse-compte strong {
    display: block;
    margin-bottom: 5px;
    color: #173c5d;
}

.statut-module-caisse {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}

.statut-module-actif {
    background: #dcfce7;
    color: #166534;
}

.statut-module-inactif {
    background: #f1f5f9;
    color: #475569;
}

.bouton-caisse-compte {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

.etat-vide-caisse-compte {
    margin: 0;
    padding: 14px 15px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #64748b;
}

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

@media (max-width: 560px) {
    .ligne-parametre-caisse-compte {
        align-items: stretch;
        flex-direction: column;
    }

    .bouton-caisse-compte {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   Navigation principale par modules
   ========================================================= */

.navigation-modules {
    border-bottom: 1px solid var(--couleur-bordure-legere);
    background: var(--couleur-blanc);
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.05);
}

.navigation-modules-contenu {
    display: flex;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    gap: 4px;
}

.onglet-module {
    position: relative;
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    padding: 14px 24px 12px;
    border-bottom: 4px solid transparent;
    color: var(--couleur-texte-secondaire);
    font-weight: 750;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.onglet-module:hover {
    background: var(--couleur-secondaire);
    color: var(--couleur-principale-foncee);
}

.onglet-module-actif,
.onglet-module-actif:hover {
    border-bottom-color: var(--couleur-principale);
    background: #f8fbfe;
    color: var(--couleur-principale-foncee);
}

@media (max-width: 560px) {
    .navigation-modules-contenu {
        width: 100%;
        gap: 0;
    }

    .onglet-module {
        min-width: 0;
        flex: 1 1 50%;
        min-height: 54px;
        padding: 12px 10px 10px;
        text-align: center;
    }
}


/* =========================================================
   Rafraichissement visuel compact - juillet 2026
   ========================================================= */

:root {
    --ombre-legere: 0 6px 18px rgba(15, 23, 42, 0.07);
    --ombre-carte: 0 14px 34px rgba(15, 23, 42, 0.10);
}

html {
    background:
        radial-gradient(circle at top, rgba(31, 78, 120, 0.07), transparent 32%),
        linear-gradient(180deg, #f7f9fc 0%, #f3f6fb 100%);
}

body {
    font-size: 15px;
    letter-spacing: -0.01em;
}

h1 {
    margin-bottom: 4px;
    font-size: clamp(1.75rem, 1.2rem + 1vw, 2.3rem);
}

h2 {
    margin-bottom: 12px;
    font-size: 1.18rem;
}

h3 {
    margin-bottom: 8px;
    font-size: 1rem;
}

.entete {
    min-height: 84px;
    padding: 18px 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 26%),
        linear-gradient(135deg, #1f4e78 0%, #173c5d 60%, #1c476c 100%);
}

.entete p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
}

.entete-actions {
    gap: 9px;
}

.retour-accueil,
.lien-deconnexion,
.bouton-entete,
.bouton-compte-entete,
.bouton-deconnexion-entete {
    min-height: 40px;
    padding: 8px 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(4px);
}

.conteneur {
    width: min(1320px, calc(100% - 40px));
    margin: 24px auto 42px;
}

.conteneur-formulaire {
    width: min(920px, calc(100% - 40px));
}

.bloc {
    padding: 20px;
    border-color: #e2e8f0;
    border-radius: 16px;
    box-shadow: var(--ombre-legere);
}

.bloc + .bloc {
    margin-top: 18px;
}

.bloc-titre {
    margin-bottom: 14px;
}

.navigation-modules {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(209, 213, 219, 0.72);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
}

.navigation-modules-contenu {
    width: min(1320px, calc(100% - 40px));
    gap: 10px;
    padding: 10px 0;
}

.onglet-module {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 999px;
    font-weight: 800;
}

.onglet-module:hover {
    background: #eef4fa;
}

.onglet-module-actif,
.onglet-module-actif:hover {
    border-color: rgba(31, 78, 120, 0.16);
    background: linear-gradient(135deg, #1f4e78, #295f91);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(31, 78, 120, 0.18);
}

.grille-actions,
.actions-principales {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.carte-action {
    position: relative;
    min-height: 126px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid #dbe4ee;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.96));
}

.carte-action::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #1f4e78, #6fa0cf);
}

.carte-action:hover {
    border-color: rgba(31, 78, 120, 0.2);
    transform: translateY(-3px);
}

.carte-action h2,
.carte-action h3 {
    margin-bottom: 7px;
    color: #173c5d;
    font-size: 1.18rem;
}

.carte-action p {
    max-width: 36ch;
    font-size: 0.93rem;
    line-height: 1.45;
}

.carte-action-fugue::before {
    background: linear-gradient(90deg, #d14d54, #f2a2a8);
}

.carte-action-cessation::before {
    background: linear-gradient(90deg, #209a5c, #9bd4b1);
}

.carte-action-jeunes::before {
    background: linear-gradient(90deg, #4679ab, #9ec0e0);
}

.carte-action-compte::before {
    background: linear-gradient(90deg, #6b5acb, #b6b0eb);
}

.carte-action-gestion::before {
    background: linear-gradient(90deg, #295f91, #7fa9cf);
}

.carte-action-statistiques::before {
    background: linear-gradient(90deg, #b78616, #ecd188);
}

.accroche-interface {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
    padding: 18px 20px;
    border: 1px solid #dbe4ee;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(31, 78, 120, 0.08), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
    box-shadow: var(--ombre-legere);
}

.accroche-interface h2 {
    margin: 0 0 6px;
    color: #173c5d;
}

.accroche-interface p {
    margin: 0;
    color: #64748b;
}

.accroche-interface-indicateur {
    display: grid;
    gap: 4px;
    min-width: 150px;
    padding: 14px 16px;
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    background: #ffffff;
    text-align: right;
}

.accroche-interface-indicateur span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.accroche-interface-indicateur strong {
    color: #173c5d;
    font-size: 1.5rem;
    line-height: 1;
}

.fiche-fugue {
    padding: 16px 17px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

form p,
.champ-metier,
.groupe-champ {
    margin-bottom: 16px;
}

form label,
.champ-metier label,
.groupe-champ label {
    margin-bottom: 6px;
    font-size: 0.95rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    min-height: 42px;
    padding: 9px 12px;
    border-color: #cfd8e3;
    border-radius: 10px;
}

textarea {
    min-height: 102px;
}

.helptext,
.aide-champ {
    font-size: 0.86rem;
}

.formulaire-actions,
.actions-formulaire {
    margin-top: 20px;
}

.bouton-enregistrer,
.bouton-principal,
.bouton-annuler,
.bouton-secondaire,
.bouton-copier,
.lien-bouton {
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 10px;
}

.tableau-responsive,
.tableau-statistiques {
    border-radius: 14px;
}

th,
td {
    padding: 11px 12px;
}

.barre-compte-utilisateur {
    gap: 8px;
}

.identite-utilisateur-connecte {
    min-width: 132px;
    padding: 7px 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.09);
}

.identite-utilisateur-connecte strong {
    font-size: 0.94rem;
}

.groupe-service {
    margin-top: 18px;
}

.grille-jeunes {
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    gap: 14px;
}

.vignette-jeune {
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.zone-photo-jeune {
    height: 132px;
    background: linear-gradient(180deg, #eff4f9 0%, #edf2f7 100%);
}

.photo-jeune-absente {
    width: 64px;
    height: 64px;
    font-size: 1.22rem;
}

.contenu-vignette-jeune {
    padding: 12px 14px 4px;
}

.actions-vignette-jeune {
    gap: 8px;
    padding: 10px 14px 14px;
}

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

@media (max-width: 700px) {
    body {
        font-size: 14px;
    }

    .entete {
        padding: 18px 18px;
    }

    .conteneur,
    .conteneur-formulaire,
    .navigation-modules-contenu {
        width: min(100% - 20px, 100%);
    }

    .navigation-modules-contenu {
        gap: 8px;
        padding: 8px 0;
    }

    .onglet-module {
        min-height: 42px;
        padding: 10px 12px;
    }

    .accroche-interface-indicateur {
        min-width: 0;
        text-align: left;
    }
}

/* =========================================================
   V2 compacte - juillet 2026
   ========================================================= */

body {
    font-size: 14px;
    line-height: 1.42;
}

p {
    line-height: 1.42;
}

h1 {
    font-size: clamp(1.55rem, 1.05rem + 0.95vw, 2rem);
}

h2 {
    font-size: 1.04rem;
}

h3 {
    font-size: 0.96rem;
}

.entete {
    min-height: 66px;
    padding: 12px 24px;
    gap: 18px;
}

.entete h1 {
    margin: 0 0 3px;
    font-size: clamp(1.55rem, 1rem + 1vw, 2rem);
}

.entete p {
    font-size: 0.88rem;
}

.entete-actions {
    gap: 7px;
}

.retour-accueil,
.lien-deconnexion,
.bouton-entete,
.bouton-compte-entete,
.bouton-deconnexion-entete {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 0.88rem;
}

.identite-utilisateur-connecte {
    min-width: 120px;
    padding: 6px 10px;
    border-radius: 10px;
}

.identite-utilisateur-connecte span,
.identite-utilisateur-connecte small {
    font-size: 0.66rem;
}

.identite-utilisateur-connecte strong {
    font-size: 0.86rem;
}

.icone-navigation-svg,
.entete .icone-navigation-svg,
.navigation-caisse-entete .icone-navigation-svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
}

.conteneur {
    width: min(1380px, calc(100% - 34px));
    margin: 18px auto 34px;
}

.conteneur-formulaire {
    width: min(850px, calc(100% - 34px));
}

.bloc {
    padding: 16px 18px;
    border-radius: 14px;
}

.bloc + .bloc {
    margin-top: 14px;
}

.bloc-titre {
    gap: 12px;
    margin-bottom: 12px;
}

.navigation-modules-contenu {
    width: min(1380px, calc(100% - 34px));
    padding: 7px 0;
    gap: 8px;
}

.onglet-module {
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
}

.grille-actions,
.actions-principales {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 13px;
    margin-bottom: 16px;
}

.carte-action {
    min-height: 102px;
    padding: 15px 17px;
    border-radius: 15px;
}

.carte-action h2,
.carte-action h3 {
    margin-bottom: 5px;
    font-size: 1.02rem;
}

.carte-action p {
    font-size: 0.86rem;
}

.accroche-interface {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 15px;
}

.accroche-interface h2 {
    margin-bottom: 4px;
    font-size: 1.03rem;
}

.accroche-interface p {
    font-size: 0.88rem;
}

.accroche-interface-indicateur {
    min-width: 128px;
    padding: 11px 13px;
    border-radius: 12px;
}

.accroche-interface-indicateur span {
    font-size: 0.72rem;
}

.accroche-interface-indicateur strong {
    font-size: 1.25rem;
}

form p,
.champ-metier,
.groupe-champ {
    margin-bottom: 12px;
}

form label,
.champ-metier label,
.groupe-champ label {
    margin-bottom: 5px;
    font-size: 0.88rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 0.92rem;
}

textarea {
    min-height: 82px;
}

.helptext,
.aide-champ {
    margin-top: 4px;
    font-size: 0.8rem;
}

.formulaire-actions,
.actions-formulaire {
    gap: 9px;
    margin-top: 16px;
}

.bouton-enregistrer,
.bouton-principal,
.bouton-annuler,
.bouton-secondaire,
.bouton-copier,
.lien-bouton {
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 0.9rem;
}

.message-erreur,
.message-succes,
.message-alerte,
.information-etape {
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 0.88rem;
}

.zone-messages {
    gap: 10px;
    margin-bottom: 16px;
}

.zone-messages > div,
.zone-messages > .message-success,
.zone-messages > .message-succes {
    padding: 11px 14px 11px 38px;
    border-radius: 10px;
    font-size: 0.88rem;
}

.zone-messages > div::before,
.zone-messages > .message-success::before,
.zone-messages > .message-succes::before {
    top: 10px;
    left: 14px;
    font-size: 0.98rem;
}

.barre-recherche {
    gap: 10px;
    margin-bottom: 14px;
}

th,
td {
    padding: 9px 10px;
    font-size: 0.9rem;
}

.badge {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 0.76rem;
}

.groupe-service {
    margin-top: 14px;
}

.titre-service {
    margin-bottom: 8px;
    padding: 8px 12px;
}

.grille-jeunes {
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 12px;
}

.vignette-jeune {
    border-radius: 14px;
}

.zone-photo-jeune {
    height: 116px;
    padding: 7px;
}

.photo-jeune-absente {
    width: 56px;
    height: 56px;
    font-size: 1.08rem;
}

.contenu-vignette-jeune {
    padding: 10px 12px 3px;
}

.contenu-vignette-jeune h3 {
    margin-bottom: 7px;
    font-size: 0.94rem;
}

.informations-jeune div {
    margin-bottom: 5px;
}

.informations-jeune dt {
    font-size: 0.68rem;
}

.informations-jeune dd {
    font-size: 0.84rem;
}

.actions-vignette-jeune {
    gap: 6px;
    padding: 8px 12px 12px;
}

@media (max-width: 700px) {
    .entete {
        padding: 14px 16px;
    }

    .conteneur,
    .conteneur-formulaire,
    .navigation-modules-contenu {
        width: min(100% - 18px, 100%);
    }
}


/* =========================================================
   V3 ergonomique compacte - juillet 2026
   ========================================================= */

:root {
    --rayon: 12px;
    --ombre-legere: 0 4px 14px rgba(15, 23, 42, 0.06);
    --ombre-carte: 0 10px 24px rgba(15, 23, 42, 0.09);
}

body {
    font-size: 14px;
    line-height: 1.42;
}

h1 {
    font-size: clamp(1.45rem, 1rem + 1vw, 1.95rem);
    letter-spacing: -0.035em;
}

h2 {
    margin-bottom: 9px;
    font-size: 1.06rem;
}

h3 {
    font-size: 0.98rem;
}

.entete {
    min-height: 68px;
    padding: 12px 22px;
    gap: 16px;
}

.entete h1 {
    margin-bottom: 2px;
}

.entete p {
    font-size: 0.86rem;
}

.entete-actions {
    gap: 7px;
}

.retour-accueil,
.lien-deconnexion,
.bouton-entete,
.bouton-compte-entete,
.bouton-deconnexion-entete {
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 0.92rem;
}

.identite-utilisateur-connecte {
    min-width: 126px;
    padding: 6px 9px;
    border-radius: 10px;
}

.identite-utilisateur-connecte span,
.identite-utilisateur-connecte small {
    font-size: 0.67rem;
}

.identite-utilisateur-connecte strong {
    font-size: 0.86rem;
}

.icone-navigation-svg,
.entete .icone-navigation-svg,
.navigation-caisse-entete .icone-navigation-svg {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}

.navigation-modules-contenu {
    width: min(1400px, calc(100% - 36px));
    gap: 7px;
    padding: 7px 0;
}

.onglet-module {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.94rem;
}

.conteneur {
    width: min(1400px, calc(100% - 44px));
    margin: 18px auto 34px;
}

.conteneur-formulaire {
    width: min(860px, calc(100% - 44px));
}

.bloc {
    padding: 16px;
    border-radius: 14px;
}

.bloc + .bloc {
    margin-top: 14px;
}

.bloc-titre {
    gap: 12px;
    margin-bottom: 12px;
}

.texte-secondaire,
.helptext,
.aide-champ {
    font-size: 0.83rem;
}

.grille-actions,
.actions-principales {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.carte-action {
    min-height: 96px;
    padding: 15px 16px;
    border-radius: 15px;
}

.carte-action::before {
    height: 3px;
}

.carte-action h2,
.carte-action h3 {
    margin-bottom: 5px;
    font-size: 1.03rem;
}

.carte-action p {
    font-size: 0.84rem;
    line-height: 1.36;
}

.accroche-interface {
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 15px;
}

.accroche-interface h2 {
    margin-bottom: 3px;
    font-size: 1.04rem;
}

.accroche-interface p {
    font-size: 0.86rem;
}

.accroche-interface-indicateur {
    min-width: 130px;
    padding: 11px 13px;
    border-radius: 12px;
}

.accroche-interface-indicateur span {
    font-size: 0.72rem;
}

.accroche-interface-indicateur strong {
    font-size: 1.28rem;
}

form p,
.champ-metier,
.groupe-champ {
    margin-bottom: 12px;
}

form label,
.champ-metier label,
.groupe-champ label {
    margin-bottom: 4px;
    font-size: 0.88rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 9px;
}

textarea {
    min-height: 82px;
}

input[type="file"] {
    padding: 8px;
    border-radius: 9px;
}

.formulaire-actions,
.actions-formulaire {
    gap: 9px;
    margin-top: 16px;
}

.bouton-enregistrer,
.bouton-principal,
.bouton-annuler,
.bouton-secondaire,
.bouton-copier,
.lien-bouton {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 0.9rem;
}

.message-erreur,
.message-succes,
.message-alerte,
.information-etape {
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 0.88rem;
}

.zone-messages {
    gap: 10px;
    margin-bottom: 16px;
}

.zone-messages > div {
    padding: 12px 14px 12px 42px;
    border-radius: 10px;
    font-size: 0.92rem;
}

.zone-messages > div::before {
    top: 10px;
    left: 15px;
    font-size: 1rem;
}

.fiche-fugue {
    gap: 12px;
    padding: 13px 14px;
    border-radius: 12px;
}

.date-fugue {
    font-size: 0.84rem;
}

.bouton-cesser-carte {
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 0.88rem;
}

th,
td {
    padding: 9px 10px;
}

th {
    font-size: 0.78rem;
}

.groupe-service {
    margin-top: 14px;
}

.titre-service {
    margin-bottom: 9px;
    padding: 9px 13px;
}

.grille-jeunes {
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 12px;
}

.vignette-jeune {
    border-radius: 14px;
}

.zone-photo-jeune {
    height: 116px;
    padding: 7px;
}

.photo-jeune-absente {
    width: 56px;
    height: 56px;
    font-size: 1.08rem;
}

.contenu-vignette-jeune {
    padding: 10px 12px 3px;
}

.contenu-vignette-jeune h3 {
    margin-bottom: 7px;
    font-size: 0.95rem;
}

.informations-jeune div {
    margin-bottom: 5px;
}

.informations-jeune dt {
    font-size: 0.68rem;
}

.informations-jeune dd {
    font-size: 0.84rem;
}

.actions-vignette-jeune {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 12px 12px;
}

.actions-vignette-jeune .bouton-secondaire,
.actions-vignette-jeune .bouton-principal,
.actions-vignette-jeune .lien-bouton {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 0.82rem;
}

@media (min-width: 1200px) {
    .entete {
        padding-left: 28px;
        padding-right: 28px;
    }
}

@media (max-width: 700px) {
    .conteneur,
    .conteneur-formulaire,
    .navigation-modules-contenu {
        width: min(100% - 18px, 100%);
    }

    .entete {
        padding: 15px 16px;
    }
}


/* =========================================================
   V4 dense et priorités métier - juillet 2026
   ========================================================= */

@media (min-width: 901px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: clamp(1.48rem, 1.12rem + 0.55vw, 1.82rem);
    }

    h2 {
        font-size: 1.02rem;
    }

    .entete {
        min-height: 62px;
        padding: 9px 22px;
        gap: 16px;
    }

    .entete p {
        font-size: 0.78rem;
    }

    .retour-accueil,
    .lien-deconnexion,
    .bouton-entete,
    .bouton-compte-entete,
    .bouton-deconnexion-entete {
        min-height: 32px;
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 0.82rem;
    }

    .identite-utilisateur-connecte {
        min-width: 116px;
        padding: 5px 8px;
        border-radius: 9px;
    }

    .identite-utilisateur-connecte span,
    .identite-utilisateur-connecte small {
        font-size: 0.61rem;
    }

    .identite-utilisateur-connecte strong {
        font-size: 0.78rem;
    }

    .navigation-modules-contenu {
        width: min(1500px, calc(100% - 32px));
        gap: 5px;
        padding: 5px 0;
    }

    .onglet-module {
        min-height: 32px;
        padding: 6px 12px;
        font-size: 0.83rem;
    }

    .conteneur {
        width: min(1500px, calc(100% - 36px));
        margin: 12px auto 26px;
    }

    .conteneur-formulaire {
        width: min(1050px, calc(100% - 36px));
    }

    .bloc {
        padding: 12px 14px;
        border-radius: 12px;
    }

    .bloc + .bloc {
        margin-top: 10px;
    }

    .bloc-titre {
        margin-bottom: 9px;
    }

    .grille-actions,
    .actions-principales {
        grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
        gap: 10px;
        margin-bottom: 12px;
    }

    .carte-action {
        min-height: 78px;
        padding: 12px 14px;
        border-radius: 12px;
    }

    .carte-action h2,
    .carte-action h3 {
        margin-bottom: 3px;
        font-size: 0.93rem;
    }

    .carte-action p {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    form p,
    .champ-metier,
    .groupe-champ {
        margin-bottom: 9px;
    }

    form label,
    .champ-metier label,
    .groupe-champ label {
        margin-bottom: 3px;
        font-size: 0.8rem;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="number"],
    select,
    textarea {
        min-height: 34px;
        padding: 6px 9px;
        border-radius: 8px;
        font-size: 0.86rem;
    }

    textarea {
        min-height: 70px;
    }

    .formulaire-actions,
    .actions-formulaire {
        gap: 7px;
        margin-top: 12px;
    }

    .bouton-enregistrer,
    .bouton-principal,
    .bouton-annuler,
    .bouton-secondaire,
    .bouton-copier,
    .lien-bouton {
        min-height: 34px;
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 0.82rem;
    }

    th,
    td {
        padding: 7px 8px;
        font-size: 0.82rem;
    }

    th {
        font-size: 0.7rem;
    }

    .grille-jeunes {
        grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
        gap: 10px;
    }

    .zone-photo-jeune {
        height: 98px;
    }

    .contenu-vignette-jeune {
        padding: 8px 10px 2px;
    }

    .actions-vignette-jeune {
        padding: 7px 10px 10px;
    }
}

/* Fugues en cours : priorité visuelle du tableau de bord. */
.bloc-fugues-prioritaires {
    position: relative;
    overflow: visible;
    margin-bottom: 12px;
}

.bloc-fugues-prioritaires-alerte {
    border: 1px solid #e3a05d;
    border-left: 6px solid #c84b31;
    background:
        radial-gradient(circle at top right, rgba(200, 75, 49, 0.08), transparent 34%),
        linear-gradient(135deg, #fffaf5 0%, #fff5ec 100%);
    box-shadow: 0 10px 26px rgba(142, 62, 30, 0.10);
}

.bloc-fugues-prioritaires-calme {
    border: 1px solid #9bc9a8;
    border-left: 6px solid #3c9a5f;
    background: linear-gradient(135deg, #f4fbf6 0%, #eef9f1 100%);
}

.entete-fugues-prioritaires {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.titre-fugues-prioritaires {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.signal-fugues-prioritaires {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 50%;
    background: #c84b31;
    color: #ffffff;
    font-size: 1.16rem;
    font-weight: 900;
    box-shadow: 0 5px 12px rgba(200, 75, 49, 0.24);
}

.bloc-fugues-prioritaires-calme .signal-fugues-prioritaires {
    background: #3c9a5f;
    box-shadow: 0 5px 12px rgba(60, 154, 95, 0.20);
}

.ligne-titre-fugues-prioritaires {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ligne-titre-fugues-prioritaires h2 {
    margin: 0;
    color: #6f271d;
    font-size: 1.08rem;
}

.bloc-fugues-prioritaires-calme .ligne-titre-fugues-prioritaires h2 {
    color: #285d39;
}

.titre-fugues-prioritaires p {
    margin: 2px 0 0;
    color: #7d4b3d;
    font-size: 0.8rem;
}

.bloc-fugues-prioritaires-calme .titre-fugues-prioritaires p {
    color: #356d47;
}

.compteur-fugues-prioritaires {
    display: inline-flex;
    min-width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #c84b31;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 900;
}

.bloc-fugues-prioritaires-calme .compteur-fugues-prioritaires {
    background: #3c9a5f;
}

.entete-fugues-prioritaires .filtre-accueil-services {
    width: min(470px, 100%);
    background: rgba(255, 255, 255, 0.78);
}

.entete-fugues-prioritaires .filtre-accueil-services > summary {
    padding: 8px 10px;
    font-size: 0.78rem;
}

.resume-services-fugues-prioritaires {
    padding: 7px 10px;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.78);
}

.liste-fugues-prioritaires {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 610px), 1fr));
    gap: 9px;
}

.fiche-fugue-prioritaire {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1.15fr) minmax(120px, 0.8fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid #e4b18a;
    border-left: 5px solid #c84b31;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 5px 14px rgba(110, 47, 26, 0.07);
}

.identite-fugue-prioritaire,
.date-fugue-prioritaire {
    min-width: 0;
}

.identite-fugue-prioritaire {
    display: grid;
    gap: 2px;
}

.identite-fugue-prioritaire strong {
    color: #5e251c;
    font-size: 1rem;
}

.identite-fugue-prioritaire > span:last-child {
    color: #7d4b3d;
    font-size: 0.78rem;
    font-weight: 700;
}

.badge-fugue-prioritaire {
    width: fit-content;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fee2d5;
    color: #9b2f1f;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.date-fugue-prioritaire {
    display: grid;
    gap: 2px;
    color: #7d4b3d;
    white-space: normal;
}

.date-fugue-prioritaire span {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.date-fugue-prioritaire strong {
    color: #5e251c;
    font-size: 0.82rem;
}

.bouton-retour-prioritaire {
    max-width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border-color: #c84b31;
    background: #c84b31;
    color: #ffffff;
    font-size: 0.78rem;
    white-space: nowrap;
}

.bouton-retour-prioritaire:hover {
    border-color: #9b2f1f;
    background: #9b2f1f;
}

.etat-vide-fugues-prioritaire {
    padding: 10px 12px;
    border: 0;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
    text-align: left;
}

@media (max-width: 1320px) {
    .liste-fugues-prioritaires {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    }
}

@media (max-width: 900px) {
    .entete-fugues-prioritaires {
        align-items: stretch;
        flex-direction: column;
    }

    .entete-fugues-prioritaires .filtre-accueil-services {
        width: 100%;
    }

    .fiche-fugue-prioritaire {
        grid-template-columns: 1fr;
    }

    .bouton-retour-prioritaire {
        width: 100%;
    }
}

/* =========================================================
   Lot 1 : navigation métier, jeunes, statistiques, paramètres
   ========================================================= */

.navigation-modules {
    overflow: hidden;
}

.navigation-modules-contenu {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.onglet-module {
    flex: 0 0 auto;
    white-space: nowrap;
}

.onglets-statut-jeunes {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
}

.onglet-statut-jeune {
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-weight: 800;
    text-decoration: none;
}

.onglet-statut-jeune:hover,
.onglet-statut-jeune.actif {
    border-color: #1f4e78;
    background: #1f4e78;
    color: #ffffff;
}

.bloc-recherche-jeunes {
    margin-bottom: 14px;
}

.tableau-jeunes-epure {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

.tableau-jeunes-epure th,
.tableau-jeunes-epure td {
    padding: 12px 14px;
    border-bottom: 1px solid #dbe3ec;
    vertical-align: middle;
}

.tableau-jeunes-epure thead th {
    background: #dfeaf3;
    color: #17324d;
    font-weight: 850;
    text-align: left;
}

.tableau-jeunes-epure tbody tr:nth-child(odd) {
    background: #ffffff;
}

.tableau-jeunes-epure tbody tr:nth-child(even) {
    background: #f3f7fa;
}

.tableau-jeunes-epure tbody tr:hover {
    background: #eaf2f8;
}

.tableau-jeunes-epure th:nth-child(3),
.tableau-jeunes-epure td:nth-child(3),
.tableau-jeunes-epure th:nth-child(4),
.tableau-jeunes-epure td:nth-child(4),
.tableau-jeunes-epure th:nth-child(5),
.tableau-jeunes-epure td:nth-child(5) {
    text-align: center;
}

.cellule-solde-veture {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cellule-solde-veture.montant-negatif {
    color: #b42318;
}

.cellule-actions-jeune {
    width: 9rem;
}

.menu-actions-jeune {
    display: inline-block;
    min-width: 7rem;
    text-align: left;
}

.menu-actions-jeune summary {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid #b8c8d6;
    border-radius: 8px;
    background: #ffffff;
    color: #1f4e78;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.menu-actions-jeune summary::-webkit-details-marker {
    display: none;
}

.menu-actions-jeune summary::after {
    margin-left: 7px;
    content: "▾";
    font-size: .72rem;
}

.menu-actions-jeune[open] summary {
    border-color: #1f4e78;
    background: #edf4f9;
}

.liste-actions-jeune {
    display: grid;
    min-width: 13rem;
    margin-top: 6px;
    padding: 5px;
    border: 1px solid #d7e0e8;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
}

.liste-actions-jeune a {
    padding: 8px 10px;
    border-radius: 6px;
    color: #17324d;
    font-weight: 700;
    text-decoration: none;
}

.liste-actions-jeune a:hover {
    background: #edf4f9;
}

.conteneur-parametres {
    display: grid;
    gap: 14px;
}

.grille-parametres-principaux,
.grille-parametres-cadre,
.grille-liens-parametres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.carte-parametre-cadre,
.carte-lien-parametre {
    display: grid;
    align-content: start;
    gap: 13px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    background: #f9fbfd;
}

.carte-lien-parametre {
    color: #17324d;
    text-decoration: none;
}

.carte-lien-parametre:hover {
    border-color: #8cabc4;
    background: #edf4f9;
}

.carte-lien-parametre span {
    color: #64748b;
}

.selection-services-relais-cadre ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.selection-services-relais-cadre label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

.selection-services-relais-cadre input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.formulaire-selecteur-statistiques {
    display: grid;
    grid-template-columns: minmax(250px, 1.5fr) minmax(250px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.formulaire-selecteur-statistiques select {
    width: 100%;
    min-height: 42px;
}

.formulaire-selecteur-statistiques [hidden] {
    display: none !important;
}

@media (max-width: 820px) {
    .grille-parametres-principaux,
    .grille-parametres-cadre,
    .grille-liens-parametres,
    .formulaire-selecteur-statistiques {
        grid-template-columns: 1fr;
    }

    .formulaire-selecteur-statistiques .bouton-principal {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .navigation-modules-contenu {
        width: 100%;
        padding-inline: 10px;
    }

    .onglet-module {
        flex: 0 0 auto;
        min-width: max-content;
    }
}

/* =========================================================
   Lot 2 : tableau central des jeunes et actions par profil
   ========================================================= */

.conteneur-jeunes {
    display: grid;
    gap: 14px;
}

.barre-outils-jeunes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.actions-principales-jeunes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.barre-outils-jeunes .onglets-statut-jeunes {
    margin: 0;
}

.bloc-titre-jeunes-service {
    margin-bottom: 8px;
}

.valeur-non-disponible {
    color: #64748b;
    font-weight: 700;
}

.liste-actions-jeune a + a {
    border-top: 1px solid #edf1f5;
}

@media (max-width: 760px) {
    .barre-outils-jeunes {
        align-items: stretch;
        flex-direction: column;
    }

    .actions-principales-jeunes .bouton-principal,
    .actions-principales-jeunes .bouton-secondaire {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* =========================================================
   Lot 5 : nettoyage général et alignements communs
   ========================================================= */

.entete > div:first-child {
    min-width: 0;
}

.barre-compte-utilisateur {
    flex-wrap: nowrap;
}

.identite-utilisateur-connecte {
    align-content: center;
    grid-template-rows: auto auto;
}

.identite-utilisateur-connecte strong,
.identite-utilisateur-connecte small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navigation-modules-contenu {
    align-items: center;
}

.onglet-module {
    line-height: 1.15;
}

.grille-liens-parametres {
    align-items: stretch;
}

.carte-lien-parametre {
    height: 100%;
}

.tableau-jeunes-epure th:nth-child(3),
.tableau-jeunes-epure td:nth-child(3) {
    width: 10.5rem;
}

.tableau-jeunes-epure th:nth-child(4),
.tableau-jeunes-epure td:nth-child(4) {
    width: 9.5rem;
}

.tableau-jeunes-epure th:nth-child(5),
.tableau-jeunes-epure td:nth-child(5) {
    width: 8.5rem;
}

.cellule-actions-jeune,
.cellule-actions-agent {
    text-align: center;
}

@media (max-width: 1050px) {
    .entete {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .barre-compte-utilisateur {
        width: auto;
        margin-left: auto;
    }
}

@media (max-width: 700px) {
    .barre-compte-utilisateur {
        width: 100%;
        margin-left: 0;
    }

    .identite-utilisateur-connecte {
        min-width: 0;
        flex: 1 1 auto;
    }
}

@media (max-width: 480px) {
    .barre-compte-utilisateur {
        display: grid;
        grid-template-columns: 1fr;
    }

    .identite-utilisateur-connecte,
    .barre-compte-utilisateur form,
    .bouton-deconnexion-entete {
        width: 100%;
    }
}

/* Lot 8 : actions courantes accessibles sans ouvrir un menu. */
.actions-directes-tableau {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.action-tableau {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid #b8c8d6;
    border-radius: 8px;
    background: #ffffff;
    color: #1f4e78;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
}

.action-tableau:hover {
    border-color: #1f4e78;
    background: #edf4f9;
    text-decoration: none;
}

.action-tableau-principale {
    border-color: #1f4e78;
    background: #1f4e78;
    color: #ffffff;
}

.action-tableau-principale:hover {
    background: #173e61;
    color: #ffffff;
}

.action-tableau-alerte {
    border-color: #b42318;
    background: #fff1f0;
    color: #9f1d1d;
}

.cellule-actions-jeune,
.cellule-actions-agent {
    width: auto !important;
    min-width: 23rem;
}

.menu-actions-jeune,
.menu-actions-agent {
    position: relative;
    min-width: 0 !important;
}

.liste-actions-jeune,
.liste-actions-agent {
    position: absolute;
    z-index: 30;
    right: 0;
}

@media (max-width: 900px) {
    .cellule-actions-jeune,
    .cellule-actions-agent {
        min-width: 16rem;
    }
}

/* =========================================================
   Lot 9 : ergonomie visuelle et actions métier
   ========================================================= */

/* Les boutons retrouvent une présence d'outil métier, sans effet décoratif excessif. */
.bouton-principal,
.bouton-secondaire,
.bouton-enregistrer,
.bouton-annuler,
.lien-bouton {
    border-radius: 9px;
    font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

.bouton-principal,
.bouton-enregistrer {
    background: linear-gradient(180deg, #245f91 0%, #1f4e78 100%);
    border-color: #1b456a;
    box-shadow: 0 4px 10px rgba(31, 78, 120, 0.18);
}

.bouton-principal:hover,
.bouton-enregistrer:hover {
    background: linear-gradient(180deg, #1f537f 0%, #173e61 100%);
    box-shadow: 0 5px 13px rgba(31, 78, 120, 0.24);
}

.bouton-principal:active,
.bouton-secondaire:active,
.bouton-enregistrer:active,
.bouton-annuler:active,
.lien-bouton:active,
.action-metier:active {
    transform: translateY(1px);
}

.bouton-secondaire,
.bouton-annuler {
    border-color: #b9c9d8;
    color: #173c5d;
}

/* Situation de fugue active : l'alerte est immédiatement identifiable. */
.bloc-fugues-prioritaires-alerte {
    border: 1px solid #861f1f;
    border-left: 7px solid #651414;
    background: linear-gradient(135deg, #b42323 0%, #8f1d1d 100%);
    box-shadow: 0 12px 28px rgba(127, 29, 29, 0.24);
    color: #ffffff;
}

.bloc-fugues-prioritaires-alerte .ligne-titre-fugues-prioritaires h2,
.bloc-fugues-prioritaires-alerte .titre-fugues-prioritaires p {
    color: #ffffff;
}

.bloc-fugues-prioritaires-alerte .signal-fugues-prioritaires,
.bloc-fugues-prioritaires-alerte .compteur-fugues-prioritaires {
    background: #ffffff;
    color: #991b1b;
    box-shadow: none;
}

.bloc-fugues-prioritaires-alerte .filtre-accueil-services,
.bloc-fugues-prioritaires-alerte .resume-services-fugues-prioritaires {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.94);
    color: #5f1717;
}

.bloc-fugues-prioritaires-alerte .fiche-fugue-prioritaire {
    border: 1px solid #f1c6a7;
    border-left: 5px solid #f59e0b;
    background: #fff8eb;
    box-shadow: 0 6px 16px rgba(64, 8, 8, 0.18);
}

.bloc-fugues-prioritaires-alerte .identite-fugue-prioritaire strong,
.bloc-fugues-prioritaires-alerte .date-fugue-prioritaire strong {
    color: #5e251c;
}

.bloc-fugues-prioritaires-alerte .identite-fugue-prioritaire > span:last-child,
.bloc-fugues-prioritaires-alerte .date-fugue-prioritaire,
.bloc-fugues-prioritaires-alerte .date-fugue-prioritaire span {
    color: #7d3d2f;
}

.bloc-fugues-prioritaires-alerte .badge-fugue-prioritaire {
    background: #ffffff;
    color: #991b1b;
}

.bloc-fugues-prioritaires-alerte .bouton-retour-prioritaire {
    border-color: #ffffff;
    background: #ffffff;
    color: #8f1d1d;
    box-shadow: 0 4px 10px rgba(54, 6, 6, 0.18);
}

.bloc-fugues-prioritaires-alerte .bouton-retour-prioritaire:hover {
    border-color: #fee2e2;
    background: #fee2e2;
    color: #731515;
}

/* Colonne d'actions du tableau des jeunes. */
.identite-jeune-tableau {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-etat-jeune {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-etat-jeune-alerte {
    background: #b42318;
    color: #ffffff;
}

.tableau-jeunes-epure tbody tr.ligne-jeune-fugue-active {
    box-shadow: inset 5px 0 0 #b42318;
}

.barre-actions-metier-jeune,
.barre-actions-allocation-tableau {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    white-space: nowrap;
}

.action-metier {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.05;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.07);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.action-metier-fugue {
    border-color: #b42318;
    background: #ffffff;
    color: #9f1d1d;
}

.action-metier-fugue:hover {
    background: #fff1f0;
    color: #861b1b;
    box-shadow: 0 3px 8px rgba(180, 35, 24, 0.13);
}

.action-metier-urgence {
    border-color: #9f1d1d;
    background: linear-gradient(180deg, #c9362a 0%, #a9231b 100%);
    color: #ffffff;
    box-shadow: 0 4px 9px rgba(169, 35, 27, 0.22);
}

.action-metier-urgence:hover {
    background: linear-gradient(180deg, #b92c22 0%, #8f1d17 100%);
    color: #ffffff;
}

.action-metier-secondaire {
    border-color: #afc3d5;
    background: #f8fbfd;
    color: #1f4e78;
}

.action-metier-secondaire:hover {
    border-color: #6f94b2;
    background: #eaf2f8;
    color: #173e61;
}

.action-metier-veture {
    border-color: #83a895;
    background: #f2f8f5;
    color: #285f45;
}

.action-metier-veture:hover {
    border-color: #4f8468;
    background: #e3f1e9;
    color: #1f5139;
}

.cellule-actions-jeune {
    min-width: 21rem !important;
    text-align: right;
}

.menu-actions-jeune-compact {
    display: inline-flex;
    min-width: 36px !important;
}

.menu-actions-jeune-compact summary {
    width: 38px;
    min-width: 38px;
    min-height: 36px;
    padding: 0;
    border-color: #b9c9d8;
    border-radius: 8px;
    color: #173c5d;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.07);
}

.menu-actions-jeune-compact summary::after {
    display: none;
}

.menu-actions-jeune-compact[open] summary {
    border-color: #557d9d;
    background: #eaf2f8;
}

.menu-actions-jeune-compact .liste-actions-jeune {
    min-width: 14rem;
    padding: 6px;
    border-color: #c9d6e2;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

.menu-actions-jeune-compact .liste-actions-jeune a {
    padding: 9px 11px;
    font-size: 0.84rem;
}

@media (max-width: 980px) {
    .cellule-actions-jeune {
        min-width: 17rem !important;
    }

    .barre-actions-metier-jeune {
        flex-wrap: wrap;
    }
}

/* =========================================================
   Accueil des fugues : reprise de la charte des cartes métier
   ========================================================= */

.bloc-fugues-prioritaires-calme {
    border: 1px solid #c4ddcc;
    border-left: 6px solid #3b9460;
    background: linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
    box-shadow: 0 6px 18px rgba(31, 78, 120, 0.07);
}

.bloc-fugues-prioritaires-calme .entete-fugues-prioritaires {
    margin-bottom: 0;
}

.bloc-fugues-prioritaires-calme .signal-fugues-prioritaires {
    background: linear-gradient(180deg, #45a66c 0%, #318552 100%);
    box-shadow: 0 4px 10px rgba(49, 133, 82, 0.20);
}

.bloc-fugues-prioritaires-calme .ligne-titre-fugues-prioritaires h2 {
    color: #173c5d;
}

.bloc-fugues-prioritaires-calme .titre-fugues-prioritaires p {
    color: #4c6478;
}

.bloc-fugues-prioritaires-calme .compteur-fugues-prioritaires {
    background: #e5f5eb;
    color: #276c45;
    border: 1px solid #b9dcc5;
}

.grille-actions-fugues-metier {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    margin: 0 0 18px;
}

.grille-actions-fugues-metier .carte-caisse-action {
    width: 100%;
    min-width: 0;
    min-height: 102px;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.07);
}

.grille-actions-fugues-metier .carte-caisse-action > div {
    min-width: 0;
}

.grille-actions-fugues-metier .carte-caisse-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.11);
}

.grille-actions-fugues-metier .carte-caisse-action h2 {
    margin: 0 0 3px;
    font-size: 1rem;
    line-height: 1.2;
}

.grille-actions-fugues-metier .carte-caisse-action p {
    max-width: 58ch;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.grille-actions-fugues-metier .indication-ouverture-carte {
    margin-top: 6px;
    font-size: 0.76rem;
}

.grille-actions-fugues-metier .icone-tuile-caisse {
    width: 50px;
    height: 50px;
    min-width: 50px;
}

.grille-actions-fugues-metier .icone-tuile-caisse svg {
    width: 31px;
    height: 31px;
}

.carte-fugue-declaration {
    border-color: #e5a3a3;
    background: linear-gradient(145deg, #fffdfd, #fff1f1);
    color: #991f28;
}

.carte-fugue-declaration:hover {
    border-color: #c84c55;
    background: linear-gradient(145deg, #fffafa, #ffe8e8);
}

.carte-fugue-declaration h2,
.carte-fugue-declaration .indication-ouverture-carte {
    color: #9f1f28;
}

.carte-fugue-declaration p {
    color: #7b4b50 !important;
}

.icone-fugue-declaration {
    border: 1px solid #efb6b6;
    background: #fff0f0;
    color: #bd3039;
    box-shadow: inset 0 0 0 1px rgba(189, 48, 57, 0.06), 0 4px 10px rgba(153, 31, 40, 0.12);
}

.carte-fugue-cessation {
    border-color: #91caa6;
    background: linear-gradient(145deg, #fbfffc, #eaf8ef);
    color: #256a43;
}

.carte-fugue-cessation:hover {
    border-color: #4f9b6d;
    background: linear-gradient(145deg, #f8fdf9, #e0f3e7);
}

.carte-fugue-cessation h2,
.carte-fugue-cessation .indication-ouverture-carte {
    color: #267046;
}

.carte-fugue-cessation p {
    color: #4d705b !important;
}

.icone-fugue-cessation {
    border: 1px solid #b2ddc1;
    background: #eaf8ef;
    color: #348b56;
    box-shadow: inset 0 0 0 1px rgba(52, 139, 86, 0.06), 0 4px 10px rgba(38, 112, 70, 0.12);
}

.carte-fugue-journal {
    grid-column: 1 / -1;
    min-height: 78px !important;
    border-color: #a9bfd2;
    background: linear-gradient(145deg, #ffffff, #eef5fa);
    color: #1f4e78;
}

.carte-fugue-journal:hover {
    border-color: #6f94b2;
    background: linear-gradient(145deg, #fbfdff, #e6f0f7);
}

.carte-fugue-journal h2,
.carte-fugue-journal .indication-ouverture-carte {
    color: #1f4e78;
}

.icone-fugue-journal {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border: 1px solid #bdd1e2;
    background: #edf5fb;
    color: #245a84;
}

.icone-fugue-journal svg {
    width: 25px !important;
    height: 25px !important;
}

@media (max-width: 760px) {
    .grille-actions-fugues-metier {
        grid-template-columns: 1fr;
    }

    .carte-fugue-journal {
        grid-column: auto;
    }
}

.actions-entete-fiche-jeune {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .7rem;
}

@media (max-width: 760px) {
    .actions-entete-fiche-jeune {
        width: 100%;
        justify-content: flex-start;
    }
}