/* ------------------------------------------------------------------------------------------------------------- *
 *  Peda-Go — habillage du site public                                                                             *
 * ------------------------------------------------------------------------------------------------------------- *
 *  Feuille SÉPARÉE de pedago.css, et chargée seulement par les six pages du vitrine. Un élève qui enchaîne des
 *  QCM n'a aucune raison de télécharger la mise en page d'une grille tarifaire, et les deux fichiers n'évoluent
 *  pas au même rythme : le produit d'un côté, l'argumentaire commercial de l'autre.
 *
 *  Aucune couleur, aucun rayon, aucune ombre n'est réinventé ici : tout vient des variables de pedago.css, qui
 *  reste la source unique de la charte. Ce fichier ne fait que composer avec.
 * ------------------------------------------------------------------------------------------------------------- */

/* ---- En-tête ------------------------------------------------------------------------------------------------ */
.pg-site-header {
    background-color:       var(--pg-carte);
    border-bottom:          1px solid var(--pg-bordure);
    position:               sticky;
    top:                    0;
    z-index:                1020;
}

.pg-site-nav {
    display:                flex;
    align-items:            center;
    gap:                    1rem;
    min-height:             72px;
    flex-wrap:              wrap;
}

/*  Le logo ne s'étire pas et ne se comprime pas : il garde sa largeur naturelle aux deux extrémités de la
 *  barre, et c'est le menu du milieu qui absorbe la place restante.                                           */
.pg-site-nav > .pg-logo    { flex: 0 0 auto; }

.pg-site-bascule {
    margin-left:            auto;
    background:             none;
    border:                 1px solid var(--pg-bordure);
    border-radius:          var(--pg-rayon-petit);
    padding:                .45rem .7rem;
    color:                  var(--pg-texte);
}

/*  Sur grand écran la barre repliable redevient une simple rangée : la classe .collapse de Bootstrap est
 *  neutralisée, sinon le menu resterait masqué là où il y a toute la place de l'afficher.
 *
 *  DISPOSITION EN TROIS ZONES : logo à gauche, liens au centre, connexion à droite. Le bloc central prend
 *  toute la largeur disponible (flex-grow) et centre son contenu ; les deux boutons de droite sont poussés
 *  au bord par leur marge automatique. Un simple `margin-left:auto` sur l'ensemble collerait au contraire
 *  liens et boutons l'un contre l'autre, à droite, en laissant un vide après le logo.                        */
@media (min-width: 992px) {
    .pg-site-menu {
        display:            flex !important;
        align-items:        center;
        gap:                1.5rem;
        flex:               1 1 auto;
        min-width:          0;
    }

    .pg-site-liens {
        flex:               1 1 auto;
        justify-content:    center;
    }

    .pg-site-actions {
        margin-left:        auto;
        flex:               0 0 auto;
    }
}

.pg-site-liens {
    display:                flex;
    align-items:            center;
    gap:                    1.75rem;
    list-style:             none;
    margin:                 0;
    padding:                0;
}

.pg-site-lien {
    color:                  var(--pg-texte-doux);
    text-decoration:        none;
    font-weight:            500;
    padding:                .35rem 0;
    border-bottom:          2px solid transparent;
    white-space:            nowrap;
}

.pg-site-lien:hover     { color: var(--pg-texte); }

/*  L'entrée courante est soulignée ET assombrie : la couleur seule ne suffirait pas à qui la distingue mal. */
.pg-site-lien.actif {
    color:                  var(--pg-texte);
    font-weight:            600;
    border-bottom-color:    var(--pg-vert);
}

.pg-site-actions {
    display:                flex;
    align-items:            center;
    gap:                    .5rem;
}

@media (max-width: 991.98px) {
    .pg-site-menu       { width: 100%; padding-bottom: 1rem; }
    .pg-site-liens      { flex-direction: column; align-items: flex-start; gap: .25rem; margin-bottom: 1rem; }
    .pg-site-lien       { display: block; width: 100%; padding: .5rem 0; }
    .pg-site-actions    { flex-direction: column; align-items: stretch; }
}

/* ---- Sections ------------------------------------------------------------------------------------------------ */
.pg-section         { padding: 4.5rem 0; }
.pg-section-creuse  { background-color: var(--pg-fond-creux); }
.pg-section-carte   { background-color: var(--pg-carte); }

@media (max-width: 767.98px) {
    .pg-section     { padding: 3rem 0; }
}

.pg-section-titre {
    font-size:              clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
    font-weight:            700;
    letter-spacing:         -.01em;
    margin-bottom:          .75rem;
}

.pg-section-chapeau {
    color:                  var(--pg-texte-doux);
    font-size:              1.05rem;
    max-width:              62ch;
}

/* ---- Bandeau d'accueil ---------------------------------------------------------------------------------------- */
.pg-hero {
    background:             linear-gradient(180deg, var(--pg-vert-clair) 0%, var(--pg-fond) 100%);
    padding:                5rem 0 4.5rem;
}

.pg-hero h1 {
    /*  clamp plutôt qu'une pile de points de rupture : le titre suit la largeur sans marche d'escalier.       */
    font-size:              clamp(2rem, 1.35rem + 2.9vw, 3.2rem);
    font-weight:            800;
    line-height:            1.12;
    letter-spacing:         -.02em;
    margin-bottom:          1.25rem;
}

.pg-hero-chapeau {
    font-size:              1.15rem;
    color:                  var(--pg-texte-doux);
    max-width:              58ch;
    margin-bottom:          2rem;
}

.pg-hero-actions {
    display:                flex;
    flex-wrap:              wrap;
    gap:                    .75rem;
    align-items:            center;
}

/* ---- Étiquette « appuyé sur les programmes officiels » -------------------------------------------------------- */
.pg-etiquette {
    display:                inline-flex;
    align-items:            center;
    gap:                    .5rem;
    background-color:       var(--pg-carte);
    border:                 1px solid var(--pg-bordure);
    border-radius:          999px;
    padding:                .4rem .9rem;
    font-size:              .85rem;
    font-weight:            600;
    color:                  var(--pg-vert-sombre);
    margin-bottom:          1.5rem;
}

/* ---- Arguments ------------------------------------------------------------------------------------------------ */
/*      PAS de height:100% ici. La carte porterait alors la hauteur de sa colonne, ce qui n'a de sens que
 *      lorsqu'elle en est le seul contenu. Sur la page de contact, où deux cartes suivent un titre et un
 *      paragraphe dans la même colonne, chacune réclamait la hauteur totale : elles débordaient l'une après
 *      l'autre jusque sous le pied de page.
 *
 *      L'égalisation des hauteurs est donc demandée au cas par cas, par la classe utilitaire h-100 de
 *      Bootstrap — comme le fait déjà .pg-carte dans l'administration.                                        */
.pg-atout {
    background-color:       var(--pg-carte);
    border:                 1px solid var(--pg-bordure);
    border-radius:          var(--pg-rayon);
    box-shadow:             var(--pg-ombre-douce);
    padding:                1.75rem;
}

.pg-atout-icone {
    display:                inline-flex;
    align-items:            center;
    justify-content:        center;
    width:                  46px;
    height:                 46px;
    border-radius:          12px;
    background-color:       var(--pg-vert-clair);
    color:                  var(--pg-vert-fonce);
    font-size:              1.15rem;
    margin-bottom:          1rem;
}

.pg-atout h3 {
    font-size:              1.05rem;
    font-weight:            700;
    margin-bottom:          .5rem;
}

.pg-atout p {
    color:                  var(--pg-texte-doux);
    font-size:              .95rem;
    margin-bottom:          0;
}

/* ---- Étapes numérotées ---------------------------------------------------------------------------------------- */
.pg-etape {
    display:                flex;
    gap:                    1rem;
    align-items:            flex-start;
}

.pg-etape-numero {
    flex:                   0 0 auto;
    width:                  36px;
    height:                 36px;
    border-radius:          50%;
    background-color:       var(--pg-vert);
    color:                  #fff;
    font-weight:            700;
    display:                inline-flex;
    align-items:            center;
    justify-content:        center;
}

.pg-etape h3 {
    font-size:              1rem;
    font-weight:            700;
    margin-bottom:          .35rem;
}

.pg-etape p {
    color:                  var(--pg-texte-doux);
    font-size:              .95rem;
    margin-bottom:          0;
}

/* ---- Tarifs --------------------------------------------------------------------------------------------------- */
.pg-bascule-periode {
    display:                inline-flex;
    background-color:       var(--pg-fond-creux);
    border-radius:          999px;
    padding:                4px;
    gap:                    4px;
}

.pg-bascule-periode button {
    border:                 0;
    background:             transparent;
    border-radius:          999px;
    padding:                .5rem 1.25rem;
    font-weight:            600;
    color:                  var(--pg-texte-doux);
}

.pg-bascule-periode button.actif {
    background-color:       var(--pg-carte);
    color:                  var(--pg-texte);
    box-shadow:             var(--pg-ombre-douce);
}

.pg-offre {
    background-color:       var(--pg-carte);
    border:                 1px solid var(--pg-bordure);
    border-radius:          var(--pg-rayon);
    box-shadow:             var(--pg-ombre);
    padding:                2rem;
    height:                 100%;
    display:                flex;
    flex-direction:         column;
}

.pg-offre-vedette {
    border-color:           var(--pg-vert);
    border-width:           2px;
}

.pg-offre-ruban {
    display:                inline-block;
    background-color:       var(--pg-vert-clair);
    color:                  var(--pg-vert-sombre);
    border-radius:          999px;
    padding:                .25rem .75rem;
    font-size:              .78rem;
    font-weight:            700;
    margin-bottom:          .75rem;
}

.pg-offre-prix {
    display:                flex;
    align-items:            baseline;
    gap:                    .35rem;
    margin:                 .5rem 0 .25rem;
}

.pg-offre-montant {
    font-size:              2.75rem;
    font-weight:            800;
    letter-spacing:         -.03em;
    line-height:            1;
}

.pg-offre-periode {
    color:                  var(--pg-texte-doux);
    font-weight:            500;
}

.pg-offre-detail {
    color:                  var(--pg-texte-doux);
    font-size:              .9rem;
    min-height:             1.5rem;
}

.pg-offre-liste {
    list-style:             none;
    padding:                0;
    margin:                 1.5rem 0;
    flex-grow:              1;
}

.pg-offre-liste li {
    display:                flex;
    gap:                    .6rem;
    align-items:            flex-start;
    padding:                .4rem 0;
    font-size:              .95rem;
}

.pg-offre-liste i         { color: var(--pg-vert); margin-top: .2rem; }

/* ---- Questions fréquentes ------------------------------------------------------------------------------------- */
.pg-faq .accordion-button:not(.collapsed) {
    background-color:       var(--pg-vert-clair);
    color:                  var(--pg-vert-sombre);
    box-shadow:             none;
}

.pg-faq .accordion-item {
    border:                 1px solid var(--pg-bordure);
    border-radius:          var(--pg-rayon-petit);
    margin-bottom:          .65rem;
    overflow:               hidden;
}

/* ---- Blog : la liste ------------------------------------------------------------------------------------------ */
.pg-billet {
    display:                flex;
    flex-direction:         column;
    background-color:       var(--pg-carte);
    border:                 1px solid var(--pg-bordure);
    border-radius:          var(--pg-rayon);
    box-shadow:             var(--pg-ombre-douce);
    overflow:               hidden;
    height:                 100%;
    transition:             transform .15s ease, box-shadow .15s ease;
}

.pg-billet:hover {
    transform:              translateY(-2px);
    box-shadow:             var(--pg-ombre);
}

/*  Le rapport 3/2 est réservé AVANT le chargement de l'image : sans lui, l'arrivée de l'illustration
 *  décale tout ce qui suit — c'est le décalage de mise en page que Google mesure et sanctionne.               */
.pg-billet-image {
    aspect-ratio:           3 / 2;
    width:                  100%;
    object-fit:             cover;
    background-color:       var(--pg-fond-creux);
    display:                block;
}

.pg-billet-corps {
    padding:                1.4rem;
    display:                flex;
    flex-direction:         column;
    flex-grow:              1;
}

.pg-billet-meta {
    font-size:              .8rem;
    color:                  var(--pg-texte-tres-doux);
    display:                flex;
    gap:                    .75rem;
    margin-bottom:          .6rem;
}

.pg-billet h2, .pg-billet h3 {
    font-size:              1.1rem;
    font-weight:            700;
    line-height:            1.3;
    margin-bottom:          .5rem;
}

.pg-billet a.pg-billet-titre {
    color:                  var(--pg-texte);
    text-decoration:        none;
}

.pg-billet a.pg-billet-titre:hover  { color: var(--pg-vert-fonce); }

.pg-billet-chapeau {
    color:                  var(--pg-texte-doux);
    font-size:              .93rem;
    flex-grow:              1;
    margin-bottom:          1rem;
}

/* ---- Blog : l'article ----------------------------------------------------------------------------------------- */
.pg-article {
    background-color:       var(--pg-carte);
    border:                 1px solid var(--pg-bordure);
    border-radius:          var(--pg-rayon);
    box-shadow:             var(--pg-ombre-douce);
    padding:                2.5rem;
}

@media (max-width: 575.98px) {
    .pg-article     { padding: 1.5rem; border-radius: var(--pg-rayon-petit); }
}

.pg-article h1 {
    font-size:              clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem);
    font-weight:            800;
    line-height:            1.15;
    letter-spacing:         -.02em;
    margin-bottom:          1rem;
}

.pg-article-image {
    width:                  100%;
    aspect-ratio:           3 / 2;
    object-fit:             cover;
    border-radius:          var(--pg-rayon-petit);
    margin:                 1.5rem 0 2rem;
    background-color:       var(--pg-fond-creux);
}

/*  Le corps est écrit par un modèle et n'a AUCUNE classe : la mise en forme se fait donc par descendance,
 *  sur les balises brutes que la liste blanche de classe_article laisse passer.                              */
.pg-article-corps {
    font-size:              1.06rem;
    line-height:            1.75;
    max-width:              70ch;
}

.pg-article-corps h2 {
    font-size:              1.4rem;
    font-weight:            700;
    margin:                 2.25rem 0 .85rem;
    letter-spacing:         -.01em;
}

.pg-article-corps h3 {
    font-size:              1.13rem;
    font-weight:            700;
    margin:                 1.75rem 0 .6rem;
}

.pg-article-corps p     { margin-bottom: 1.15rem; }
.pg-article-corps ul,
.pg-article-corps ol    { margin: 0 0 1.15rem 1.15rem; }
.pg-article-corps li    { margin-bottom: .45rem; }
.pg-article-corps strong{ font-weight: 650; }

/* ---- L'appel vers la page pilier, en fin d'article ------------------------------------------------------------- */
.pg-relance {
    background-color:       var(--pg-vert-clair);
    border-radius:          var(--pg-rayon);
    padding:                1.75rem;
    margin-top:             2.5rem;
}

.pg-relance h2 {
    font-size:              1.15rem;
    font-weight:            700;
    margin-bottom:          .5rem;
}

.pg-relance p {
    color:                  var(--pg-texte-doux);
    margin-bottom:          1rem;
    font-size:              .95rem;
}

/* ---- Fil d'Ariane --------------------------------------------------------------------------------------------- */
.pg-ariane {
    font-size:              .85rem;
    color:                  var(--pg-texte-tres-doux);
    margin-bottom:          1.25rem;
}

.pg-ariane a            { color: var(--pg-texte-doux); text-decoration: none; }
.pg-ariane a:hover      { text-decoration: underline; }

/* ---- Pied de page --------------------------------------------------------------------------------------------- */
.pg-site-footer {
    background-color:       var(--pg-carte);
    border-top:             1px solid var(--pg-bordure);
    padding:                3rem 0 1.5rem;
    margin-top:             auto;
}

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

.pg-site-footer-liens {
    list-style:             none;
    padding:                0;
    margin:                 0;
}

.pg-site-footer-liens li    { margin-bottom: .5rem; }

.pg-site-footer-liens a {
    color:                  var(--pg-texte-doux);
    text-decoration:        none;
    font-size:              .92rem;
}

.pg-site-footer-liens a:hover   { color: var(--pg-vert-fonce); text-decoration: underline; }

.pg-site-footer-bas {
    border-top:             1px solid var(--pg-bordure);
    margin-top:             2.5rem;
    padding-top:            1.25rem;
    display:                flex;
    flex-wrap:              wrap;
    gap:                    .5rem 1.5rem;
    justify-content:        space-between;
    font-size:              .82rem;
    color:                  var(--pg-texte-doux);
}

/* ---- Modale d'authentification -------------------------------------------------------------------------------- */
/*      Les quatre vues viennent de l'ancienne page de connexion, qui les empilait dans une carte. La règle
 *      .pg-vue de pedago.css gère déjà l'affichage de celle qui porte .active : rien à redéfinir ici, sinon
 *      la largeur du contenant.                                                                               */
.pg-modal-auth .modal-content {
    border:                 0;
    border-radius:          var(--pg-rayon);
    box-shadow:             var(--pg-ombre);
}

.pg-modal-auth .modal-body  { padding: 1rem 1.75rem 1.75rem; }

@media (max-width: 575.98px) {
    .pg-modal-auth .modal-body  { padding: 1rem 1.25rem 1.5rem; }
}

/* ---- Page d'erreur -------------------------------------------------------------------------------------------- */
.pg-erreur {
    text-align:             center;
    padding:                5rem 0;
}

.pg-erreur-code {
    font-size:              5rem;
    font-weight:            800;
    line-height:            1;
    color:                  var(--pg-vert);
    letter-spacing:         -.04em;
}