/* ------------------------------------------------------------------------------------------------------------- *
 *  Peda-Go — thème de l'interface adhérent                                                                        *
 * ------------------------------------------------------------------------------------------------------------- *
 *  Gris clair pour les fonds, vert pour les actions et les effets, noir pour le texte.
 *  Le rouge n'est employé que pour l'erreur : dans un jeu de QCM, juste et faux doivent se distinguer d'un
 *  coup d'œil, un vert-contre-vert rendrait le retour illisible.
 *
 *  Tout passe par des variables CSS, y compris la surcharge des tokens Bootstrap 5.3 : changer la teinte de
 *  la marque se fait alors en un seul endroit.
 * ------------------------------------------------------------------------------------------------------------- */

:root {
    /* ---- Palette --------------------------------------------------------------------------------------------- */
    --pg-fond:                  #f2f4f3;
    --pg-fond-creux:            #e9edeb;
    --pg-carte:                 #ffffff;

    --pg-vert:                  #199e5b;
    --pg-vert-fonce:            #14804a;
    --pg-vert-sombre:           #0f6339;
    --pg-vert-clair:            #e6f4ec;
    --pg-vert-rgb:              25, 158, 91;

    --pg-texte:                 #111111;
    --pg-texte-doux:            #5c635f;
    --pg-texte-tres-doux:       #8b918e;

    --pg-bordure:               #e2e6e4;
    --pg-bordure-forte:         #cfd6d2;

    --pg-rouge:                 #c8362f;
    --pg-rouge-clair:           #fbeceb;
    --pg-ambre:                 #b7791f;
    --pg-ambre-clair:           #fdf4e3;

    /* ---- Formes ---------------------------------------------------------------------------------------------- */
    --pg-rayon:                 16px;
    --pg-rayon-petit:           10px;
    --pg-ombre:                 0 1px 2px rgba(17, 17, 17, .04), 0 10px 28px rgba(17, 17, 17, .07);
    --pg-ombre-douce:           0 1px 2px rgba(17, 17, 17, .04), 0 4px 12px rgba(17, 17, 17, .05);

    /* ---- Surcharge des tokens Bootstrap ------------------------------------------------------------------------ */
    --bs-body-bg:               var(--pg-fond);
    --bs-body-color:            var(--pg-texte);
    --bs-border-color:          var(--pg-bordure);
    --bs-primary:               var(--pg-vert);
    --bs-primary-rgb:           var(--pg-vert-rgb);
    --bs-link-color:            var(--pg-vert-fonce);
    --bs-link-hover-color:      var(--pg-vert-sombre);
    --bs-focus-ring-color:      rgba(var(--pg-vert-rgb), .28);
    --bs-border-radius:         var(--pg-rayon-petit);
}

/* ---- Base -------------------------------------------------------------------------------------------------- */
/*      Le corps est une colonne flex et le <main> pousse : sans cela, sur une page courte le pied de page
 *      remonterait au milieu de l'écran en laissant du gris en dessous.                                        */
body {
    background-color:           var(--pg-fond);
    color:                      var(--pg-texte);
    font-family:                "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing:     antialiased;
    min-height:                 100vh;
    display:                    flex;
    flex-direction:             column;
}
body > main                     { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
    color:                      var(--pg-texte);
    font-weight:                700;
    letter-spacing:             -.015em;
}

.pg-doux           { color: var(--pg-texte-doux); }
.pg-tres-doux      { color: var(--pg-texte-tres-doux); }

/* ---- Boutons ------------------------------------------------------------------------------------------------- */
/*      Bootstrap 5.3 pilote chaque bouton par ses propres variables : surcharger --bs-primary ne suffit pas,
 *      il faut reprendre les --bs-btn-*.                                                                          */
.btn {
    --bs-btn-font-weight:       600;
    --bs-btn-padding-y:         .6rem;
    --bs-btn-padding-x:         1.1rem;
    --bs-btn-border-radius:     var(--pg-rayon-petit);
    transition:                 transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn-primary {
    --bs-btn-bg:                var(--pg-vert);
    --bs-btn-border-color:      var(--pg-vert);
    --bs-btn-hover-bg:          var(--pg-vert-fonce);
    --bs-btn-hover-border-color: var(--pg-vert-fonce);
    --bs-btn-active-bg:         var(--pg-vert-sombre);
    --bs-btn-active-border-color: var(--pg-vert-sombre);
    --bs-btn-disabled-bg:       var(--pg-bordure-forte);
    --bs-btn-disabled-border-color: var(--pg-bordure-forte);
    --bs-btn-disabled-color:    #ffffff;
}

.btn-outline-primary {
    --bs-btn-color:             var(--pg-vert-fonce);
    --bs-btn-border-color:      var(--pg-vert);
    --bs-btn-hover-bg:          var(--pg-vert);
    --bs-btn-hover-border-color: var(--pg-vert);
    --bs-btn-active-bg:         var(--pg-vert-fonce);
    --bs-btn-active-border-color: var(--pg-vert-fonce);
}

.btn-neutre {
    --bs-btn-color:             var(--pg-texte);
    --bs-btn-bg:                var(--pg-carte);
    --bs-btn-border-color:      var(--pg-bordure-forte);
    --bs-btn-hover-bg:          var(--pg-fond-creux);
    --bs-btn-hover-border-color: var(--pg-bordure-forte);
    --bs-btn-hover-color:       var(--pg-texte);
}

.btn-primary:hover:not(:disabled),
.btn-outline-primary:hover:not(:disabled)   { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--pg-vert-rgb), .26); }
.btn:disabled                               { transform: none; box-shadow: none; }

/* ---- Champs de formulaire ------------------------------------------------------------------------------------- */
.form-control, .form-select {
    border-color:               var(--pg-bordure-forte);
    border-radius:              var(--pg-rayon-petit);
    padding:                    .72rem .9rem;
    color:                      var(--pg-texte);
}
.form-control:focus, .form-select:focus {
    border-color:               var(--pg-vert);
    box-shadow:                 0 0 0 .22rem rgba(var(--pg-vert-rgb), .18);
}
.form-control::placeholder      { color: var(--pg-texte-tres-doux); }
.form-label                     { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }

/* ---- Cartes ---------------------------------------------------------------------------------------------------- */
.pg-carte {
    background:                 var(--pg-carte);
    border:                     1px solid var(--pg-bordure);
    border-radius:              var(--pg-rayon);
    box-shadow:                 var(--pg-ombre-douce);
}

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

.pg-auth {
    min-height:                 100vh;
    display:                    flex;
    align-items:                center;
    justify-content:            center;
    padding:                    2rem 1rem;
    background:                 var(--pg-fond);
}

/*      Un halo vert très dilué derrière la carte : le fond gris pur paraissait éteint, sans pour autant
 *      justifier de colorer toute la page.                                                                        */
.pg-auth::before {
    content:                    "";
    position:                   fixed;
    inset:                      0;
    background:
        radial-gradient(58rem 34rem at 12% -8%,  rgba(var(--pg-vert-rgb), .12), transparent 62%),
        radial-gradient(46rem 30rem at 105% 108%, rgba(var(--pg-vert-rgb), .10), transparent 60%);
    pointer-events:             none;
}

.pg-auth-carte {
    position:                   relative;
    width:                      100%;
    max-width:                  30rem;
    background:                 var(--pg-carte);
    border:                     1px solid var(--pg-bordure);
    border-radius:              22px;
    box-shadow:                 var(--pg-ombre);
    padding:                    2.6rem 2.4rem 2.2rem;
}

.pg-logo {
    font-size:                  2rem;
    font-weight:                800;
    letter-spacing:             -.04em;
    text-align:                 center;
    color:                      var(--pg-texte);
    margin-bottom:              .35rem;
}
.pg-logo i                      { color: var(--pg-vert); margin-right: .1em; }
.pg-baseline                    { text-align: center; color: var(--pg-texte-doux); margin-bottom: 1.8rem; }

/* ---- Bouton Google : blanc bordé, comme l'exige la charte Google ---------------------------------------------- */
.pg-btn-google {
    width:                      100%;
    display:                    flex;
    align-items:                center;
    justify-content:            center;
    gap:                        .75rem;
    padding:                    .8rem 1rem;
    background:                 #ffffff;
    border:                     1px solid var(--pg-bordure-forte);
    border-radius:              var(--pg-rayon-petit);
    font-weight:                600;
    color:                      var(--pg-texte);
    transition:                 background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.pg-btn-google:hover            { background: var(--pg-fond); transform: translateY(-1px); box-shadow: var(--pg-ombre-douce); }
.pg-btn-google svg              { width: 20px; height: 20px; flex: 0 0 20px; }

/* ---- Séparateur « ou » ----------------------------------------------------------------------------------------- */
.pg-separateur {
    display:                    flex;
    align-items:                center;
    gap:                        1rem;
    margin:                     1.6rem 0;
    color:                      var(--pg-texte-tres-doux);
    font-size:                  .9rem;
}
.pg-separateur::before,
.pg-separateur::after           { content: ""; flex: 1; height: 1px; background: var(--pg-bordure); }

.pg-auth-liens                  { text-align: center; margin-top: 1.4rem; font-size: .93rem; }
.pg-auth-liens a                { color: var(--pg-vert-fonce); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pg-auth-liens a:hover          { color: var(--pg-vert-sombre); }
.pg-auth-aide                   { text-align: center; color: var(--pg-texte-tres-doux); font-size: .85rem; margin-top: .5rem; }

/* ---- Vues échangées dans la carte ------------------------------------------------------------------------------ */
.pg-vue                         { display: none; }
.pg-vue.active                  { display: block; }

/* ---- Œil du mot de passe --------------------------------------------------------------------------------------- */
.pg-champ-mdp                   { position: relative; }
.pg-champ-mdp .form-control     { padding-right: 3rem; }
.pg-oeil {
    position:                   absolute;
    right:                      .35rem;
    top:                        50%;
    transform:                  translateY(-50%);
    border:                     0;
    background:                 transparent;
    color:                      var(--pg-texte-tres-doux);
    padding:                    .5rem .65rem;
    border-radius:              8px;
}
.pg-oeil:hover                  { color: var(--pg-texte); background: var(--pg-fond); }

/* ================= En-tête de l'espace adhérent =================================================================== */

.pg-header {
    background:                 var(--pg-carte);
    border-bottom:              1px solid var(--pg-bordure);
    position:                   sticky;
    top:                        0;
    z-index:                    1030;
}
.pg-header-inner {
    display:                    flex;
    align-items:                center;
    gap:                        1rem;
    padding:                    .8rem 0;
}
.pg-header .pg-logo             { font-size: 1.35rem; margin: 0; text-align: left; }

.pg-avatar {
    width:                      42px;
    height:                     42px;
    border-radius:              50%;
    object-fit:                 cover;
    border:                     2px solid var(--pg-vert-clair);
    background:                 var(--pg-fond-creux);
}
.pg-avatar-sm                   { width: 32px; height: 32px; }

.pg-identite                    { line-height: 1.2; }
.pg-identite strong             { display: block; font-size: .95rem; }
.pg-identite span               { font-size: .8rem; color: var(--pg-texte-doux); }

/* ---- Badge d'abonnement ------------------------------------------------------------------------------------------ */
.pg-badge-abo {
    display:                    inline-flex;
    align-items:                center;
    gap:                        .45rem;
    padding:                    .38rem .8rem;
    border-radius:              999px;
    font-size:                  .82rem;
    font-weight:                600;
    border:                     1px solid transparent;
    white-space:                nowrap;
}
.pg-badge-abo.abo-actif         { background: var(--pg-vert-clair);  color: var(--pg-vert-sombre); border-color: rgba(var(--pg-vert-rgb), .25); }
.pg-badge-abo.abo-expire        { background: var(--pg-rouge-clair); color: var(--pg-rouge);       border-color: rgba(200, 54, 47, .22); }
.pg-badge-abo.abo-aucun         { background: var(--pg-fond-creux);  color: var(--pg-texte-doux);  border-color: var(--pg-bordure-forte); }

/* ================= Page d'accueil ================================================================================== */

.pg-titre-section {
    font-size:                  .8rem;
    font-weight:                700;
    text-transform:             uppercase;
    letter-spacing:             .08em;
    color:                      var(--pg-texte-tres-doux);
    margin-bottom:              .85rem;
}

/* ---- Liste des matières -------------------------------------------------------------------------------------------- */
/*      Les matières sont des <a> pour rester navigables au clavier et partageables par URL ; il faut donc
 *      neutraliser le soulignement que Bootstrap applique aux liens.                                           */
.pg-matiere {
    display:                    flex;
    align-items:                center;
    gap:                        .85rem;
    width:                      100%;
    text-align:                 left;
    padding:                    .95rem 1.1rem;
    margin-bottom:              .6rem;
    background:                 var(--pg-carte);
    border:                     1px solid var(--pg-bordure);
    border-left:                4px solid transparent;
    border-radius:              var(--pg-rayon-petit);
    font-weight:                600;
    color:                      var(--pg-texte);
    text-decoration:            none;
    transition:                 border-color .18s ease, background-color .18s ease, transform .12s ease;
}
.pg-matiere:hover               { color: var(--pg-texte); text-decoration: none; }
.pg-matiere:hover               { border-left-color: var(--pg-vert); transform: translateX(2px); }
.pg-matiere.active              { border-left-color: var(--pg-vert); background: var(--pg-vert-clair); }
.pg-matiere-icone {
    width:                      36px;
    height:                     36px;
    flex:                       0 0 36px;
    display:                    grid;
    place-items:                center;
    border-radius:              10px;
    background:                 var(--pg-fond-creux);
    color:                      var(--pg-texte-doux);
}
.pg-matiere.active .pg-matiere-icone    { background: var(--pg-vert); color: #ffffff; }
.pg-matiere small               { display: block; font-weight: 500; font-size: .78rem; color: var(--pg-texte-doux); }

/* ---- Carte d'une leçon ---------------------------------------------------------------------------------------------- */
.pg-lecon {
    background:                 var(--pg-carte);
    border:                     1px solid var(--pg-bordure);
    border-radius:              var(--pg-rayon);
    padding:                    1.15rem 1.3rem;
    margin-bottom:              .85rem;
    transition:                 box-shadow .18s ease, border-color .18s ease;
}
.pg-lecon:hover                 { box-shadow: var(--pg-ombre-douce); border-color: var(--pg-bordure-forte); }
.pg-lecon-objectif              { font-weight: 600; margin-bottom: .75rem; }
.pg-lecon-meta                  { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.pg-progress {
    flex:                       1 1 12rem;
    height:                     9px;
    background:                 var(--pg-fond-creux);
    border-radius:              999px;
    overflow:                   hidden;
}
.pg-progress-barre {
    height:                     100%;
    background:                 linear-gradient(90deg, var(--pg-vert), var(--pg-vert-fonce));
    border-radius:              999px;
    transition:                 width .5s ease;
}
.pg-progress-texte {
    font-size:                  .85rem;
    font-weight:                700;
    color:                      var(--pg-texte-doux);
    font-variant-numeric:       tabular-nums;
    white-space:                nowrap;
}
.pg-lecon.terminee .pg-progress-texte    { color: var(--pg-vert-fonce); }

/* ---- État vide --------------------------------------------------------------------------------------------------- */
.pg-vide {
    text-align:                 center;
    padding:                    3rem 1.5rem;
    color:                      var(--pg-texte-doux);
    background:                 var(--pg-carte);
    border:                     1px dashed var(--pg-bordure-forte);
    border-radius:              var(--pg-rayon);
}
.pg-vide i                      { font-size: 2.2rem; color: var(--pg-bordure-forte); margin-bottom: .9rem; display: block; }

/* ================= Jeu ============================================================================================== */

/* ---- Choix du mode ---------------------------------------------------------------------------------------------- */
.pg-mode {
    display:                    flex;
    align-items:                flex-start;
    gap:                        1rem;
    width:                      100%;
    text-align:                 left;
    padding:                    1.25rem;
    background:                 var(--pg-carte);
    border:                     2px solid var(--pg-bordure);
    border-radius:              var(--pg-rayon);
    transition:                 border-color .18s ease, background-color .18s ease, transform .12s ease;
}
.pg-mode:hover                  { border-color: var(--pg-vert); background: var(--pg-vert-clair); transform: translateY(-2px); }
.pg-mode-icone {
    width:                      48px;
    height:                     48px;
    flex:                       0 0 48px;
    display:                    grid;
    place-items:                center;
    border-radius:              12px;
    background:                 var(--pg-vert-clair);
    color:                      var(--pg-vert-fonce);
    font-size:                  1.3rem;
}
.pg-mode:hover .pg-mode-icone   { background: var(--pg-vert); color: #ffffff; }
.pg-mode strong                 { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
.pg-mode span                   { font-size: .88rem; color: var(--pg-texte-doux); }

/* ---- Options de réponse ------------------------------------------------------------------------------------------- */
/*      Le bouton radio natif est masqué mais reste dans le DOM : c'est lui qui porte le nom accessible et la
 *      navigation au clavier. Le <label> ne fait que l'habiller.                                                      */
.pg-option {
    display:                    flex;
    align-items:                center;
    gap:                        .85rem;
    width:                      100%;
    padding:                    .95rem 1.1rem;
    margin-bottom:              .65rem;
    background:                 var(--pg-carte);
    border:                     2px solid var(--pg-bordure);
    border-radius:              var(--pg-rayon-petit);
    cursor:                     pointer;
    transition:                 border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.pg-option:hover                { border-color: var(--pg-vert); background: var(--pg-vert-clair); }
.pg-option input                { position: absolute; opacity: 0; width: 0; height: 0; }
.pg-option input:focus-visible + .pg-option-puce    { box-shadow: 0 0 0 .22rem rgba(var(--pg-vert-rgb), .3); }

.pg-option-puce {
    width:                      28px;
    height:                     28px;
    flex:                       0 0 28px;
    display:                    grid;
    place-items:                center;
    border-radius:              50%;
    background:                 var(--pg-fond-creux);
    color:                      var(--pg-texte-doux);
    font-weight:                700;
    font-size:                  .85rem;
}
.pg-option.choisie              { border-color: var(--pg-vert); background: var(--pg-vert-clair); }
.pg-option.choisie .pg-option-puce  { background: var(--pg-vert); color: #ffffff; }

/* ---- Après validation : le vert dit juste, le rouge dit faux ------------------------------------------------------- */
.pg-option.correcte             { border-color: var(--pg-vert); background: var(--pg-vert-clair); }
.pg-option.correcte .pg-option-puce { background: var(--pg-vert); color: #ffffff; }
.pg-option.incorrecte           { border-color: var(--pg-rouge); background: var(--pg-rouge-clair); }
.pg-option.incorrecte .pg-option-puce { background: var(--pg-rouge); color: #ffffff; }
.pg-option.figee                { cursor: default; pointer-events: none; }
.pg-option.figee.neutre         { opacity: .55; }

/* ---- Colonne d'explication ------------------------------------------------------------------------------------------ */
.pg-explication {
    background:                 var(--pg-fond);
    border:                     1px solid var(--pg-bordure);
    border-radius:              var(--pg-rayon);
    padding:                    1.25rem;
    height:                     100%;
}
.pg-explication-vide            { color: var(--pg-texte-tres-doux); text-align: center; padding: 2rem 1rem; }
.pg-verdict {
    display:                    inline-flex;
    align-items:                center;
    gap:                        .5rem;
    padding:                    .45rem .9rem;
    border-radius:              999px;
    font-weight:                700;
    font-size:                  .9rem;
    margin-bottom:              1rem;
}
.pg-verdict.juste               { background: var(--pg-vert-clair);  color: var(--pg-vert-sombre); }
.pg-verdict.faux                { background: var(--pg-rouge-clair); color: var(--pg-rouge); }
.pg-verdict.neutre              { background: var(--pg-ambre-clair); color: var(--pg-ambre); }

/* ---- Chronomètre ------------------------------------------------------------------------------------------------------ */
.pg-chrono {
    display:                    inline-flex;
    align-items:                center;
    gap:                        .55rem;
    padding:                    .5rem 1.05rem;
    border-radius:              999px;
    background:                 var(--pg-vert-clair);
    color:                      var(--pg-vert-sombre);
    font-weight:                700;
    font-variant-numeric:       tabular-nums;
    transition:                 background-color .3s ease, color .3s ease;
}
.pg-chrono.urgent               { background: var(--pg-rouge-clair); color: var(--pg-rouge); }
/*      Le battement ne démarre que dans les dix dernières secondes, et s'efface si l'utilisateur a demandé
 *      la réduction des animations.                                                                                     */
.pg-chrono.urgent i             { animation: pg-battement 1s ease-in-out infinite; }
@keyframes pg-battement         { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

.pg-score-vif {
    font-weight:                700;
    font-variant-numeric:       tabular-nums;
    color:                      var(--pg-texte-doux);
}

/* ---- Récapitulatif ------------------------------------------------------------------------------------------------------ */
/*      La couleur du score suit le résultat. Un 0/6 affiché en vert féliciterait un échec : le vert est
 *      réservé à ce qui est réussi, l'ambre à ce qui reste à travailler.                                       */
.pg-recap-score {
    font-size:                  3rem;
    font-weight:                800;
    line-height:                1;
    color:                      var(--pg-texte-doux);
    font-variant-numeric:       tabular-nums;
}
.pg-recap-score.reussite-forte      { color: var(--pg-vert); }
.pg-recap-score.reussite-moyenne    { color: var(--pg-ambre); }
.pg-recap-score.reussite-faible     { color: var(--pg-rouge); }
.pg-recap-ligne {
    display:                    flex;
    align-items:                flex-start;
    gap:                        .75rem;
    padding:                    .75rem .9rem;
    border-radius:              var(--pg-rayon-petit);
    border:                     1px solid var(--pg-bordure);
    margin-bottom:              .5rem;
    background:                 var(--pg-carte);
    font-size:                  .92rem;
}
.pg-recap-ligne.juste           { border-left: 4px solid var(--pg-vert); }
.pg-recap-ligne.faux            { border-left: 4px solid var(--pg-rouge); }
.pg-recap-ligne .pg-recap-reponse   { color: var(--pg-texte-doux); font-size: .85rem; }

/* ---- Modale ------------------------------------------------------------------------------------------------------------- */
.modal-content {
    border:                     1px solid var(--pg-bordure);
    border-radius:              var(--pg-rayon);
    box-shadow:                 var(--pg-ombre);
}
.modal-header, .modal-footer    { border-color: var(--pg-bordure); }
.pg-modal-jeu .modal-body       { background: var(--pg-fond); }

/* ---- Zone d'administration ----------------------------------------------------------------------------------------------- */
/*      Le même habillage que le site, à deux repères près : une étiquette près du logo et une barre d'onglets.
 *      Un administrateur doit voir au premier coup d'œil qu'il n'est pas sur l'espace public.                     */
.pg-etiquette-admin {
    display:                    inline-block;
    margin-left:                .6rem;
    padding:                    .12rem .5rem;
    border-radius:              999px;
    background:                 var(--pg-fond-creux);
    border:                     1px solid var(--pg-bordure-forte);
    color:                      var(--pg-texte-doux);
    font-size:                  .68rem;
    font-weight:                700;
    text-transform:             uppercase;
    letter-spacing:             .07em;
    vertical-align:             middle;
}

.pg-nav-admin {
    background:                 var(--pg-carte);
    border-bottom:              1px solid var(--pg-bordure);
    padding:                    .35rem 0;
}
.pg-onglet {
    display:                    inline-flex;
    align-items:                center;
    padding:                    .5rem .9rem;
    border-radius:              var(--pg-rayon-petit);
    color:                      var(--pg-texte-doux);
    font-size:                  .9rem;
    font-weight:                600;
    text-decoration:            none;
    transition:                 background-color .15s ease, color .15s ease;
}
.pg-onglet:hover                { background: var(--pg-fond-creux); color: var(--pg-texte); text-decoration: none; }
.pg-onglet.active               { background: var(--pg-vert-clair); color: var(--pg-vert-sombre); }

/* ---- Alerte de conformité du serveur ------------------------------------------------------------------------------------- */
/*      Rouge, et sur toutes les pages de l'administration : un fichier modifié hors commit sera écrasé au
 *      prochain déploiement. La variante « info » est bleutée-ambre : être en retard de quelques commits n'est
 *      pas une anomalie, c'est un état normal entre deux mises à jour.                                            */
.pg-alerte-git {
    background:                 var(--pg-rouge-clair);
    color:                      var(--pg-rouge);
    border-bottom:              1px solid rgba(200, 54, 47, .25);
    font-size:                  .89rem;
    padding:                    .6rem 0;
}
.pg-alerte-git strong           { color: var(--pg-texte); }
.pg-alerte-git a                { color: inherit; font-weight: 600; }
.pg-alerte-git-doux             { color: rgba(200, 54, 47, .75); font-size: .85em; }

.pg-alerte-git-info {
    background:                 var(--pg-ambre-clair);
    color:                      var(--pg-ambre);
    border-bottom-color:        rgba(183, 121, 31, .25);
}

/* ---- Bandeau de bascule ------------------------------------------------------------------------------------------------- */
/*      Il coiffe l'en-tête sur toutes les pages tant que le parent est dans le compte de son enfant. Ambre et
 *      non vert : la couleur de marque signifierait « tout va bien », or il s'agit justement de signaler que
 *      l'on n'est pas chez soi.                                                                                  */
.pg-bandeau-bascule {
    background:                 var(--pg-ambre-clair);
    color:                      var(--pg-ambre);
    border-bottom:              1px solid rgba(183, 121, 31, .25);
    font-size:                  .89rem;
    padding:                    .6rem 0;
}
.pg-bandeau-bascule strong      { color: var(--pg-texte); }

/* ---- Espace parent : la fiche d'un enfant ------------------------------------------------------------------------------- */
/*      Reprend la carte et la barre de progression déjà définies plus haut ; il n'y a ici que la mise en
 *      colonnes des jauges, qui doivent s'aligner d'une matière à l'autre pour être comparables d'un coup d'œil. */
.pg-enfant                      { margin-bottom: 1rem; }
.pg-enfant-tete                 { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.pg-enfant-nom                  { font-weight: 700; }

.pg-jauge {
    display:                    grid;
    grid-template-columns:      28px minmax(6rem, 11rem) 1fr auto;
    align-items:                center;
    gap:                        .7rem;
}
.pg-jauge + .pg-jauge           { margin-top: .55rem; }
.pg-jauge-icone {
    width:                      28px;
    height:                     28px;
    display:                    grid;
    place-items:                center;
    border-radius:              8px;
    background:                 var(--pg-fond-creux);
    color:                      var(--pg-texte-doux);
    font-size:                  .8rem;
}
.pg-jauge-nom                   { font-size: .88rem; font-weight: 600; }

/*      Les domaines sont décalés sous leur matière : le retrait dit l'appartenance sans qu'il faille un titre. */
.pg-jauge-domaine               { padding-left: 2.3rem; }
.pg-jauge-domaine .pg-jauge-nom { font-weight: 500; color: var(--pg-texte-doux); }

/* ================= Transcription d'une image ======================================================================== */
/*  L'image à gauche, sa transcription à droite, et la même hauteur pour les deux : c'est en les lisant côte à
    côte qu'on vérifie que rien n'a été corrigé au passage.                                                          */

.pg-depot {
    display:                    flex;
    flex-direction:             column;
    align-items:                center;
    justify-content:            center;
    text-align:                 center;
    gap:                        .5rem;
    min-height:                 20rem;
    padding:                    2rem 1.5rem;
    color:                      var(--pg-texte-doux);
    background:                 var(--pg-carte);
    border:                     1px dashed var(--pg-bordure-forte);
    border-radius:              var(--pg-rayon);
    cursor:                     pointer;
    transition:                 border-color .15s, background .15s;
}
.pg-depot:hover,
.pg-depot:focus-visible         { border-color: var(--pg-vert); background: var(--pg-vert-clair); }
.pg-depot.pg-survol             { border-color: var(--pg-vert); background: var(--pg-vert-clair); }
.pg-depot i                     { font-size: 2.2rem; color: var(--pg-bordure-forte); }

/* ---- Aperçu : l'image entière doit tenir, quitte à laisser du vide autour --------------------------------------- */
.pg-apercu {
    display:                    block;
    max-width:                  100%;
    max-height:                 34rem;
    margin:                     0 auto;
    border-radius:              var(--pg-rayon-petit);
    border:                     1px solid var(--pg-bordure);
}

/* ---- Le texte relevé : chasse fixe, sauts de ligne respectés --------------------------------------------------- */
/*      Une police à chasse fixe n'est pas une coquetterie : elle rend visibles les espaces doubles et les
        alignements, que la transcription doit conserver.                                                            */
.pg-transcription {
    min-height:                 20rem;
    max-height:                 34rem;
    overflow:                   auto;
    margin:                     0;
    padding:                    1rem;
    font-family:                ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:                  .9rem;
    line-height:                1.6;
    white-space:                pre-wrap;
    overflow-wrap:              break-word;
    color:                      var(--pg-texte);
    background:                 var(--pg-fond-creux);
    border-radius:              var(--pg-rayon-petit);
}
.pg-transcription:empty::before {
    content:                    attr(data-vide);
    color:                      var(--pg-texte-tres-doux);
}

/* ---- Pied de page --------------------------------------------------------------------------------------------------------- */
.pg-footer {
    border-top:                 1px solid var(--pg-bordure);
    background:                 var(--pg-carte);
    color:                      var(--pg-texte-doux);
    font-size:                  .87rem;
    padding:                    1.6rem 0;
    margin-top:                 3rem;
}
.pg-footer a                    { color: var(--pg-texte-doux); text-decoration: none; }
.pg-footer a:hover              { color: var(--pg-vert-fonce); text-decoration: underline; }

/* ---- SweetAlert2 : mêmes formes et mêmes couleurs que le reste --------------------------------------------------------------- */
.swal2-popup                    { border-radius: var(--pg-rayon); font-family: inherit; }
.swal2-title                    { color: var(--pg-texte); font-weight: 700; }
.swal2-html-container           { color: var(--pg-texte-doux); }

/* ---- Accessibilité : on respecte prefers-reduced-motion ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:     .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:    .001ms !important;
    }
}

/* ---- Mobile ---------------------------------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .pg-auth-carte              { padding: 2rem 1.4rem 1.8rem; }
    .pg-header-inner            { flex-wrap: wrap; gap: .6rem; }
    .pg-explication             { margin-top: 1rem; height: auto; }
    .pg-recap-score             { font-size: 2.4rem; }
}