/*
Theme Name: DMU Inscription – établissement
Template: dmu-inscription
Description: Thème enfant propre à l'établissement : catalogue du cursus (inscriptions/etablissement/), modèles PDF (inscriptions/pdf/) et styles du site. Les mises à jour du plugin et du thème parent ne le touchent pas.
Author: Dream me Up
Author URI: https://www.dream-me-up.fr/
Version: 1.1.0
Text Domain: dmu
*/

/*
 * Styles propres à l'établissement, à l'image de stjo-lasalle-vannes.fr.
 * Chargés après le thème parent, le plugin inscriptions et WPForms (voir
 * functions.php). Les règles du formulaire passent par #main pour l'emporter
 * sur celles de WPForms.
 *
 * Sommaire :
 * 1. Variables et base
 * 2. Boutons communs
 * 3. Header
 * 4. En-tête de page
 * 5. Encart d'information et reprise d'inscription
 * 6. Formulaire : carte, progression, titres de section
 * 7. Formulaire : libellés, champs, choix
 * 8. Formulaire : listes Select2, téléphone, fichiers
 * 9. Formulaire : boutons de navigation, erreurs
 * 10. Footer
 * 11. Responsive
 */

/* 1. Variables et base
   ========================================================================== */

:root {
    --stjo-bleu: #2682A9;
    --stjo-bleu-fonce: #1E5A7E;
    --stjo-bleu-clair: #F0F9FF;
    --stjo-degrade: linear-gradient(135deg, #1969AF, #1E5A7E 60%, #143D54);
    --stjo-magenta: #E91E8C;
    --stjo-magenta-texte: #C2177A;
    --stjo-requis: #CC3366;
    --stjo-vert: #82C83A;
    --stjo-jaune: #F5B700;
    --stjo-bleu-bandeau: #1969AF;
    --stjo-titre: #0F172A;
    --stjo-texte: #334155;
    --stjo-texte-doux: #64748B;
    --stjo-bordure: #E2E8F0;
    --stjo-bordure-legere: #EEF2F6;
    --stjo-fond: #F8FAFC;
    --stjo-erreur: #B91C1C;
    --stjo-police: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --stjo-rayon: 12px;
}

body {
    font-family: var(--stjo-police);
    color: var(--stjo-texte);
    background: var(--stjo-fond);
}

body button,
body input,
body select,
body textarea,
body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: var(--stjo-police);
}

/* Le thème parent donne aux liens une autre police et une graisse forte. */
body a {
    font-family: inherit;
}

.stjo-topbar a,
.stjo-footer a {
    font-weight: 500;
}

.stjo-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/* 2. Boutons communs
   ========================================================================== */

.stjo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 18px;
    border: 2px solid transparent;
    border-radius: var(--stjo-rayon);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.stjo-btn:hover,
.stjo-btn:focus {
    text-decoration: none;
}

.stjo-btn--primary {
    background: var(--stjo-degrade);
    color: #fff;
    box-shadow: 0 6px 18px rgba(30, 90, 126, .25);
}

.stjo-btn--primary:hover,
.stjo-btn--primary:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(30, 90, 126, .35);
}

.stjo-btn--ghost {
    background: transparent;
    color: #475569;
    border-color: var(--stjo-bordure);
}

.stjo-btn--ghost:hover,
.stjo-btn--ghost:focus {
    color: var(--stjo-bleu-fonce);
    border-color: var(--stjo-bleu);
}

/* 3. Header
   ========================================================================== */

.stjo-topbar {
    background: linear-gradient(90deg, #1B4F72, #2378A0);
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    font-weight: 500;
}

/* Le parent fixe a{font-size:16px} : les liens texte suivent la barre, les
   pictos réseaux sociaux gardent leur taille. */
.stjo-topbar__liens a {
    font-size: inherit;
}

.stjo-topbar__reseaux a {
    font-size: 16px;
}

.stjo-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 42px;
}

.stjo-topbar ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stjo-topbar__reseaux {
    gap: 18px;
}

.stjo-topbar__liens li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 14px;
    background: rgba(255, 255, 255, .4);
    vertical-align: middle;
}

.stjo-topbar a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
}

.stjo-topbar a:hover,
.stjo-topbar a:focus {
    color: #fff;
    text-decoration: underline;
}

.stjo-topbar .fa-solid {
    font-size: 11px;
}

.stjo-header__main {
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--stjo-bordure-legere);
}

.stjo-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 86px;
}

.stjo-header__marque {
    display: flex;
    align-items: center;
    gap: 22px;
}

.stjo-header__logo a {
    display: block;
}

.stjo-header__logo img {
    display: block;
    width: auto;
    height: 66px;
}

/* Fond blanc : seul le logo pour fond clair est affiché. */
.stjo-header__logo .dmu-logo-fond-sombre {
    display: none;
}

.stjo-header__sep {
    width: 1px;
    height: 36px;
    background: var(--stjo-bordure);
}

.stjo-header__titre {
    display: flex;
    flex-direction: column;
    margin: 0;
    line-height: 1.25;
}

.stjo-header__titre span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--stjo-texte-doux);
}

.stjo-header__titre strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--stjo-titre);
}

.stjo-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stjo-header__btn {
    min-height: 42px;
    font-size: 12.5px;
}

.stjo-header__btn .fa-envelope {
    display: none;
}

.stjo-header__icone {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--stjo-rayon);
    background: rgba(38, 130, 169, .08);
    color: var(--stjo-bleu);
}

.stjo-header__icone:hover,
.stjo-header__icone:focus {
    color: var(--stjo-bleu-fonce);
    background: rgba(38, 130, 169, .14);
}

.stjo-bandeau {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 6px;
}

.stjo-bandeau span:nth-child(1) { background: var(--stjo-bleu-bandeau); }
.stjo-bandeau span:nth-child(2) { background: var(--stjo-vert); }
.stjo-bandeau span:nth-child(3) { background: var(--stjo-magenta); }
.stjo-bandeau span:nth-child(4) { background: var(--stjo-jaune); }

/* 4. En-tête de page
   ========================================================================== */

#main .page-header {
    margin: 0 0 48px;
    padding: 44px 0 48px;
    background: #fff;
    border-bottom: 1px solid var(--stjo-bordure-legere);
    text-align: center;
}

#main .page-header .inner {
    max-width: 1000px;
}

#main .stjo-ariane {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
}

#main .stjo-ariane a,
#main .stjo-ariane span {
    font-size: 13px;
    font-weight: 500;
}

#main .page-header #breadcrumbs,
#main .stjo-ariane {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--stjo-texte-doux);
    text-align: center;
}

#main .stjo-ariane a {
    color: var(--stjo-texte-doux);
    text-decoration: none;
}

#main .stjo-ariane a:hover,
#main .stjo-ariane a:focus {
    color: var(--stjo-bleu);
    text-decoration: underline;
}

#main .stjo-ariane span[aria-hidden] {
    margin: 0 6px;
    color: #CBD5E1;
}

#main .stjo-ariane span[aria-current] {
    font-weight: 600;
    color: var(--stjo-titre);
}

.stjo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 100px;
    background: rgba(233, 30, 140, .08);
    color: var(--stjo-magenta-texte);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.stjo-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stjo-magenta);
}

#main .page-header .page-title {
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.4px;
    text-transform: none;
    color: var(--stjo-titre);
}

#main .page-header .page-title span {
    color: var(--stjo-bleu);
}

/* 5. Encart d'information et reprise d'inscription
   ========================================================================== */

#primary > .inner,
#primary > #form-save-pending,
#primary > .wpforms-container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}

#main .form-warning {
    position: relative;
    max-width: none;
    margin: 0 0 24px;
    padding: 24px 26px 24px 86px;
    background: #fff;
    border: 1px solid #E0F2FE;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    font-size: 15px;
    line-height: 1.65;
    color: var(--stjo-texte);
}

/* Pastille « i » décorative, comme sur le site de l'établissement. */
#main .form-warning::before {
    content: "i";
    position: absolute;
    top: 24px;
    left: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--stjo-bleu-fonce);
    color: #fff;
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 800;
}

#main .form-warning p {
    margin: 0 0 4px;
}

#main .form-warning p:last-child {
    margin-bottom: 0;
}

#main .form-warning strong {
    color: var(--stjo-titre);
}

#main #primary > #form-save-pending {
    max-width: 1000px;
    margin-bottom: 32px;
}

#main #form-save-pending .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    margin-bottom: 24px !important; /* passe devant .mb-5 de Bootstrap */
    padding: 0 26px;
    background: #fff;
    border: 2px solid #CFE3EE;
    border-radius: var(--stjo-rayon);
    box-shadow: none;
    color: var(--stjo-bleu-fonce);
    font-size: 15px;
    font-weight: 700;
}

#main #form-save-pending .btn.btn-primary:hover,
#main #form-save-pending .btn.btn-primary:focus {
    background: var(--stjo-bleu-clair);
    border-color: var(--stjo-bleu);
    color: var(--stjo-bleu-fonce);
}

/* « Reprendre mon inscription » : simple lien sous l'encart d'accueil, pour
   ne pas prendre le pas sur une première inscription. La phrase d'accroche
   disparaît avec le lien quand le plugin le masque (dossier ouvert ou créé). */
#main form#form-save-pending .row .col-auto:has(> [name=show_input]:not(.d-none)) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0 0 28px;
}

#main form#form-save-pending .row .col-auto:has(> [name=show_input]:not(.d-none):not([style*="none"]))::before {
    content: "Vous avez déjà commencé votre dossier ?";
    color: var(--stjo-texte-doux);
    font-size: 15px;
}

#main #form-save-pending .btn.btn-primary[name=show_input] {
    display: inline-flex;
    min-height: 0;
    margin: 0 !important; /* passe devant .mb-5 de Bootstrap */
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--stjo-bleu);
    font-size: 15px !important; /* passe devant .main-btn du parent (1rem !important) */
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

#main #form-save-pending .btn.btn-primary[name=show_input].d-none {
    display: none;
}

#main #form-save-pending .btn.btn-primary[name=show_input] .fa-circle-1 {
    display: none;
}

body #main #form-save-pending .btn.btn-primary[name=show_input]::after {
    content: "\f061";
    display: inline-block; /* le parent masque .btn::after */
    margin-left: 4px;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 13px;
    transition: transform .2s ease;
}

#main #form-save-pending .btn.btn-primary[name=show_input]:hover,
#main #form-save-pending .btn.btn-primary[name=show_input]:focus {
    background: none;
    color: var(--stjo-bleu-fonce);
    text-decoration: none;
}

#main #form-save-pending .btn.btn-primary[name=show_input]:hover::after {
    transform: translateX(3px);
}

#main #form-save-pending .entry_pending_form .btn.btn-primary {
    margin-bottom: 0 !important; /* idem, dans la ligne du numéro de dossier */
    background: var(--stjo-degrade);
    border-color: transparent;
    color: #fff;
}

#main #form-save-pending .form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--stjo-titre);
}

#main #form-save-pending .form-control {
    height: 48px;
    max-width: 520px;
    padding: 0 16px;
    border: 1.5px solid var(--stjo-bordure);
    border-radius: var(--stjo-rayon);
    font-size: 15px;
    font-weight: 500;
    color: var(--stjo-titre);
}

/* E-mail de suivi : étape à part, en carte comme le formulaire, dont la
   pastille passe au vert quand l'adresse est valide. Masquée par le plugin
   (d-none, display:none en ligne) une fois le dossier créé. */
#main form#form-save-pending .row .email_suivi {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    flex: 0 0 calc(100% - 30px); /* la .row Bootstrap a des marges de -15px */
    max-width: calc(100% - 30px);
    margin: 0 15px 24px;
    padding: 24px 28px 26px;
    background: #fff;
    border: 1px solid var(--stjo-bordure-legere);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .06);
    overflow: hidden;
}

/* Pastille enveloppe, comme les numéros de section. */
#main form#form-save-pending .row .email_suivi::before {
    content: "\f0e0";
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--stjo-rayon);
    background: var(--stjo-bleu-clair);
    color: var(--stjo-bleu);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 18px;
    transition: background-color .2s ease, color .2s ease;
}

#main #form-save-pending .email_suivi .form-label {
    grid-column: 2;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--stjo-titre);
}

#main #form-save-pending .email_suivi .form-label::after {
    content: " *";
    color: var(--stjo-requis);
    font-weight: 600;
}

#main #form-save-pending .email_suivi .form-control {
    grid-column: 2;
    width: 100%;
    max-width: 60%;
    margin-top: 14px;
    padding-left: 46px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") no-repeat 16px center / 18px;
}

/* Adresse valide : pastille et champ en vert. */
#main form#form-save-pending .row .email_suivi:has(.form-control:valid:not(:placeholder-shown))::before {
    content: "\f00c";
    background: rgba(130, 200, 58, .15);
    color: #4D8A1C;
}

#main #form-save-pending .email_suivi .form-control:valid:not(:placeholder-shown) {
    border-color: var(--stjo-vert);
}

/* 6. Formulaire : carte, progression, titres de section
   ========================================================================== */

#main .wpforms-container {
    margin-bottom: 80px;
}

/* « * champs obligatoires » (data-before posé par le plugin, affiché par le
   parent en rouge sur sa propre ligne) : mention discrète, alignée à droite
   du premier titre de section au lieu d'ajouter une ligne. */
#main .wpforms-form .wpforms-field-container {
    position: relative;
}

/* Champs vides en tête d'étape (saut de page, bloc HTML vide) : leurs 24px
   de retrait creusaient un vide au-dessus du premier titre. */
#main .wpforms-form .wpforms-field.wpforms-field-pagebreak:empty,
#main .wpforms-form .wpforms-field.wpforms-field-html:has(> div:only-child:empty) {
    padding: 0;
}

#main .wpforms-form .wpforms-page > .wpforms-field-divider:first-of-type {
    padding-top: 0;
}

#main .wpforms-form .wpforms-field-container::before {
    position: absolute;
    top: 20px; /* à hauteur du premier titre de section */
    right: 0;
    padding: 0;
    color: var(--stjo-texte-doux);
    font-size: 13px;
    font-weight: 500;
}

#main .wpforms-container .wpforms-form {
    max-width: none;
    margin: 0;
    padding: 0 40px 40px;
    background: #fff;
    border: 1px solid var(--stjo-bordure-legere);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .06);
    overflow: hidden;
}

#main .wpforms-form .wpforms-page-indicator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
    max-width: none;
    margin: 0 -40px 36px;
    padding: 28px 40px 26px;
    background: linear-gradient(180deg, #FBFDFF, #fff);
    border-bottom: 1px solid var(--stjo-bordure-legere);
}

#main .wpforms-form .wpforms-page-indicator-steps {
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--stjo-bleu);
}

/* Barre de progression découpée en 5 segments, un par étape. */
#main .wpforms-form .wpforms-page-indicator-page-progress-wrap {
    flex: 1 0 100%;
    height: 8px;
    border-radius: 0;
    background: var(--stjo-bordure);
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 8px), transparent calc(20% - 8px) 20%);
    mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 8px), transparent calc(20% - 8px) 20%);
    width: calc(100% + 8px);
    margin-right: -8px;
}

#main .wpforms-form .wpforms-page-indicator-page-progress {
    height: 8px;
    /* WPForms pose la couleur en style en ligne : !important nécessaire. */
    background: linear-gradient(90deg, #1969AF, var(--stjo-bleu)) !important;
    transition: width .3s ease;
}

#main .wpforms-form .wpforms-field-divider {
    padding: 28px 0 4px;
}

#main .wpforms-form .wpforms-page {
    counter-reset: stjo-section;
}

#main .wpforms-form .wpforms-field-divider h3 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.6px;
    color: var(--stjo-titre);
}

/* Numéro de section décoratif (01, 02…). */
#main .wpforms-form .wpforms-field-divider h3::before {
    counter-increment: stjo-section;
    content: counter(stjo-section, decimal-leading-zero);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(38, 130, 169, .1);
    color: var(--stjo-bleu);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
}

/* Séparateur passé en h2 (functions.php) : titre qui chapeaute plusieurs
   sections numérotées, sans numéro, plus grand et souligné d'un filet. */
#main .wpforms-form .wpforms-field-divider h2 {
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--stjo-bordure-legere);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.8px;
    color: var(--stjo-titre);
    text-align: left; /* le parent centre les h2 */
}

#main .wpforms-form .wpforms-field-divider h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--stjo-degrade);
}

#main .wpforms-form .wpforms-field-html,
#main .wpforms-form .wpforms-field-description {
    color: var(--stjo-texte-doux);
}

#main .wpforms-form .wpforms-field-description {
    font-size: 13px;
    line-height: 1.5;
}

#main .wpforms-form .wpforms-field-html {
    font-size: 15px;
    line-height: 1.6;
}

/* 7. Formulaire : libellés, champs, choix
   ========================================================================== */

#main .wpforms-form .wpforms-field {
    padding-top: 12px;
    padding-bottom: 12px;
}

#main .wpforms-form .wpforms-field-label {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--stjo-titre);
}

#main .wpforms-form .wpforms-field-sublabel {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--stjo-texte-doux);
}

#main .wpforms-form .wpforms-required-label {
    color: var(--stjo-requis);
    font-weight: 600;
}

#main .wpforms-form input[type=text],
#main .wpforms-form input[type=email],
#main .wpforms-form input[type=tel],
#main .wpforms-form input[type=number],
#main .wpforms-form input[type=date],
#main .wpforms-form input[type=url],
#main .wpforms-form select,
#main .wpforms-form textarea {
    height: 48px;
    padding: 0 16px;
    background-color: #fff;
    border: 1.5px solid var(--stjo-bordure);
    border-radius: var(--stjo-rayon);
    box-shadow: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--stjo-titre);
    transition: border-color .2s ease, box-shadow .2s ease;
}

#main .wpforms-form textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 16px;
    line-height: 1.5;
}

#main .wpforms-form select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, #64748B 50%), linear-gradient(135deg, #64748B 50%, transparent 50%);
    background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

#main .wpforms-form input::placeholder,
#main .wpforms-form textarea::placeholder,
#main #form-save-pending .form-control::placeholder {
    color: #94A3B8;
}

#main .wpforms-form input[type=text]:hover,
#main .wpforms-form input[type=email]:hover,
#main .wpforms-form input[type=tel]:hover,
#main .wpforms-form input[type=number]:hover,
#main .wpforms-form select:hover,
#main .wpforms-form textarea:hover {
    border-color: #CBD5E1;
}

#main .wpforms-form input[type=text]:focus,
#main .wpforms-form input[type=email]:focus,
#main .wpforms-form input[type=tel]:focus,
#main .wpforms-form input[type=number]:focus,
#main .wpforms-form input[type=date]:focus,
#main .wpforms-form select:focus,
#main .wpforms-form textarea:focus,
#main #form-save-pending .form-control:focus {
    outline: 0;
    border-color: var(--stjo-bleu);
    box-shadow: 0 0 0 4px rgba(38, 130, 169, .15);
}

#main .wpforms-form input:disabled,
#main .wpforms-form select:disabled,
#main .wpforms-form textarea:disabled {
    background-color: #F1F5F9;
    border-color: var(--stjo-bordure);
    color: #94A3B8;
}

/* Date de naissance : trois listes côte à côte sur une ligne. */
#main .wpforms-form .wpforms-field-date-time select {
    width: calc((100% - 36px) / 3);
    min-width: 0;
    padding-left: 12px;
    padding-right: 30px;
    background-position: calc(100% - 16px) 21px, calc(100% - 11px) 21px;
}

#main .wpforms-form .wpforms-field-date-time .wpforms-field-date-time-date-sep {
    color: #CBD5E1;
}

/* Ordre de préférence (1, 2…) devant les spécialités. */
#main .wpforms-form input.dmu-rang {
    width: 40px;
    height: 36px;
    padding: 0;
    text-align: center;
}

/* Boutons radio : pastilles cliquables. */
#main .wpforms-form .wpforms-field-radio ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}

/* WPForms remet à zéro fond, bordure, marges et retraits des li avec
   !important (wpforms-full.css, chargé après ce fichier) : !important requis. */
#main .wpforms-form .wpforms-field-radio ul li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin: 0 !important;
    padding: 8px 18px 8px 16px !important;
    background: #fff !important;
    border: 1.5px solid var(--stjo-bordure) !important;
    border-radius: var(--stjo-rayon);
    transition: border-color .2s ease, background-color .2s ease;
}

#main .wpforms-form .wpforms-field-radio ul li:hover {
    border-color: #CBD5E1 !important;
}

#main .wpforms-form .wpforms-field-radio ul li:has(input:checked) {
    background: var(--stjo-bleu-clair) !important;
    border-color: var(--stjo-bleu) !important;
}

#main .wpforms-form .wpforms-field-radio ul li:has(input:checked) label {
    color: var(--stjo-bleu-fonce);
}

#main .wpforms-form .wpforms-field-radio ul li label,
#main .wpforms-form .wpforms-field-checkbox ul li label,
#main .wpforms-form .wpforms-field-gdpr-checkbox ul li label {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--stjo-titre);
    cursor: pointer;
}

#main .wpforms-form input[type=radio],
#main .wpforms-form input[type=checkbox] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--stjo-bleu);
    cursor: pointer;
}

#main .wpforms-form .wpforms-field-checkbox ul li,
#main .wpforms-form .wpforms-field-gdpr-checkbox ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px !important; /* idem : marges des li remises à zéro par WPForms */
}

/* Liste ouverte des selects natifs, au style des listes Select2. Navigateurs
   qui gèrent appearance: base-select (Chrome, Edge) ; les autres gardent la
   liste du système. Le select reste natif : WPForms et le plugin n'y voient
   aucune différence. */
@supports (appearance: base-select) {
    #main .wpforms-form select:not([multiple]),
    #main .wpforms-form select:not([multiple])::picker(select) {
        appearance: base-select;
    }

    /* En base-select, le texte du champ fermé remonte en haut : recentré. */
    #main .wpforms-form select:not([multiple]) {
        align-content: center;
    }

    /* La flèche reste celle du champ (dégradé en fond). */
    #main .wpforms-form select:not([multiple])::picker-icon {
        display: none;
    }

    #main .wpforms-form select:not([multiple])::picker(select) {
        min-width: anchor-size(width);
        max-height: 320px;
        margin-top: 6px;
        padding: 6px;
        background: #fff;
        border: 1px solid var(--stjo-bordure);
        border-radius: var(--stjo-rayon);
        box-shadow: 0 10px 30px rgba(15, 23, 42, .1);
        scrollbar-width: thin;
        scrollbar-color: var(--stjo-bordure) transparent;
    }

    #main .wpforms-form select:not([multiple]) option {
        padding: 9px 12px;
        border-radius: 8px;
        color: #334155;
        font-size: 15px;
        line-height: 1.3;
    }

    #main .wpforms-form select:not([multiple]) option::checkmark {
        display: none;
    }

    #main .wpforms-form select:not([multiple]) option:checked {
        background: rgba(38, 130, 169, .1);
        color: var(--stjo-bleu-fonce);
        font-weight: 600;
    }

    #main .wpforms-form select:not([multiple]) option:hover,
    #main .wpforms-form select:not([multiple]) option:focus-visible {
        background: var(--stjo-bleu);
        color: #fff;
        outline: 0;
    }

    /* Option de consigne (« Année », « Classe »…) : non sélectionnable. */
    #main .wpforms-form select:not([multiple]) option:disabled {
        color: var(--stjo-texte-doux);
        font-weight: 500;
    }
}

/* 8. Formulaire : listes Select2, téléphone, fichiers
   ========================================================================== */

/* Le thème parent pose bordure et arrondi des Select2 avec !important. */
#main form.wpforms-form .select2-container--default .select2-selection.select2-selection--single {
    height: 48px;
    padding: 0;
    background: #fff;
    border: 1.5px solid var(--stjo-bordure) !important;
    border-radius: var(--stjo-rayon) !important;
}

#main .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 40px 0 16px;
    line-height: 45px;
    font-size: 15px;
    font-weight: 500;
    color: var(--stjo-titre);
}

#main .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94A3B8;
}

#main .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 10px;
    height: 45px;
}

#main form.wpforms-form .select2-container--default.select2-container--open .select2-selection.select2-selection--single,
#main form.wpforms-form .select2-container--default.select2-container--focus .select2-selection.select2-selection--single {
    border-color: var(--stjo-bleu) !important; /* idem */
    box-shadow: 0 0 0 4px rgba(38, 130, 169, .15);
}

.select2-container--default .select2-dropdown {
    border-color: var(--stjo-bordure);
    border-radius: var(--stjo-rayon);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .1);
    overflow: hidden;
    font-family: var(--stjo-police);
    font-size: 15px; /* sinon les 18px du body */
}

.select2-container--default .select2-search--dropdown {
    padding: 8px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--stjo-bordure);
    border-radius: 10px;
    font-size: 15px;
    color: var(--stjo-titre);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: 0;
    border-color: var(--stjo-bleu);
    box-shadow: 0 0 0 3px rgba(38, 130, 169, .15);
}

.select2-container--default .select2-results > .select2-results__options {
    padding: 0 6px 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--stjo-bordure) transparent;
}

.select2-container--default .select2-results__option {
    padding: 9px 12px;
    border-radius: 8px;
    color: #334155;
    line-height: 1.3;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(38, 130, 169, .1);
    color: var(--stjo-bleu-fonce);
    font-weight: 600;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--stjo-bleu);
    color: #fff;
}

.select2-container--default .select2-results__message {
    color: var(--stjo-texte-doux);
}

/* Ville de naissance (champ 229 du formulaire 33, liste select2) : tant qu'aucun département n'est
   choisi, la liste n'a que l'option vide. Le champ est alors grisé, non
   cliquable, et renvoie au département. */
#main .wpforms-form #wpforms-33-field_229-container:has(select > option:only-child) .select2-container {
    pointer-events: none;
}

#main form.wpforms-form #wpforms-33-field_229-container:has(select > option:only-child) .select2-container--default .select2-selection.select2-selection--single {
    background: var(--stjo-fond);
    border-style: dashed !important; /* le parent impose la bordure en !important */
}

#main .wpforms-form #wpforms-33-field_229-container:has(select > option:only-child) .select2-selection__placeholder {
    font-size: 0;
}

#main .wpforms-form #wpforms-33-field_229-container:has(select > option:only-child) .select2-selection__placeholder::before {
    content: "\f060";
    margin-right: 8px;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 13px;
}

#main .wpforms-form #wpforms-33-field_229-container:has(select > option:only-child) .select2-selection__placeholder::after {
    content: "Choisissez d'abord le département";
    font-size: 14px;
    font-style: italic;
}

#main .wpforms-form #wpforms-33-field_229-container:has(select > option:only-child) .select2-selection__arrow {
    opacity: .35;
}

#main .wpforms-form .iti {
    width: 100%;
}

#main .wpforms-form .iti--allow-dropdown input[type=tel] {
    padding-left: 58px;
}

#main .wpforms-form .iti__flag-container .iti__selected-flag {
    padding-left: 14px;
    border-radius: var(--stjo-rayon) 0 0 var(--stjo-rayon);
}

#main .wpforms-form .wpforms-uploader {
    padding: 26px;
    background: #F8FCFF;
    border: 2px dashed #CFE3EE;
    border-radius: 16px;
    transition: border-color .2s ease, background-color .2s ease;
}

#main .wpforms-form .wpforms-uploader:hover {
    background: var(--stjo-bleu-clair);
    border-color: var(--stjo-bleu);
}

#main .wpforms-form .wpforms-uploader .dz-message svg {
    fill: var(--stjo-bleu);
}

#main .wpforms-form .wpforms-uploader .modern-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--stjo-titre);
}

#main .wpforms-form .wpforms-uploader .modern-hint {
    font-size: 12.5px;
    color: var(--stjo-texte-doux);
}

/* 9. Formulaire : boutons de navigation, erreurs
   ========================================================================== */

#main .wpforms-form .wpforms-pagebreak-left,
#main .wpforms-form .wpforms-submit-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 16px;
    margin: 24px -40px -40px;
    padding: 24px 40px;
    background: #FBFDFF;
    border-top: 1px solid var(--stjo-bordure-legere);
}

#main .wpforms-form .wpforms-pagebreak-left .wpforms-page-prev {
    margin-right: auto;
}

#main form.wpforms-form button.wpforms-page-button,
#main form.wpforms-form button.wpforms-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    margin: 0;
    padding: 0 26px;
    background: var(--stjo-degrade);
    border: 2px solid transparent;
    border-radius: var(--stjo-rayon);
    box-shadow: 0 6px 18px rgba(30, 90, 126, .25);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* body : passe devant « body #main … page-next::after {display:none} » du parent. */
body #main form.wpforms-form button.wpforms-page-next::after {
    display: inline-block;
    content: "\f061";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 14px;
}

/* body : passe devant « body #main … :hover » du parent (fond gris). */
body #main form.wpforms-form button.wpforms-page-button:hover,
body #main form.wpforms-form button.wpforms-page-button:focus,
body #main form.wpforms-form button.wpforms-submit:hover,
body #main form.wpforms-form button.wpforms-submit:focus {
    background: var(--stjo-degrade);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(30, 90, 126, .35);
}

/* Validation finale : magenta, comme les boutons forts du site. */
#main form.wpforms-form button.wpforms-submit,
body #main form.wpforms-form button.wpforms-submit:hover,
body #main form.wpforms-form button.wpforms-submit:focus {
    background: linear-gradient(135deg, #E91E63, #C2185B 60%, #AD1457);
    box-shadow: 0 6px 18px rgba(194, 24, 91, .25);
}

#main form.wpforms-form button.wpforms-page-button.wpforms-page-prev {
    background: transparent;
    border-color: var(--stjo-bordure);
    box-shadow: none;
    color: #475569;
    text-decoration: none;
}

#main form.wpforms-form button.wpforms-page-button.wpforms-page-prev::before {
    content: "\f060";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 14px;
}

body #main form.wpforms-form button.wpforms-page-button.wpforms-page-prev:hover,
body #main form.wpforms-form button.wpforms-page-button.wpforms-page-prev:focus {
    background: transparent;
    border-color: var(--stjo-bleu);
    box-shadow: none;
    color: var(--stjo-bleu-fonce);
    transform: none;
}

#main form.wpforms-form button:disabled {
    background: var(--stjo-bordure);
    box-shadow: none;
    color: #94A3B8;
    transform: none;
}

#main .wpforms-form input.wpforms-error,
#main .wpforms-form select.wpforms-error,
#main .wpforms-form textarea.wpforms-error,
#main .wpforms-form .wpforms-error + .select2-container .select2-selection--single {
    background-color: #FEF2F2;
    border-color: #DC2626;
}

#main .wpforms-form label.wpforms-error,
#main .wpforms-form em.wpforms-error {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--stjo-erreur);
}

/* 10. Footer
   ========================================================================== */

/* Espace au-dessus du pied de page : 80px sous le formulaire (WPForms) plus
   90px en bas de #main (parent, body.page #main), ramenés à 56px au total. */
body.page #main {
    padding-bottom: 56px;
}

#main #primary > .wpforms-container {
    margin-bottom: 0;
}

.stjo-footer {
    background: linear-gradient(135deg, #0F1419 0%, #1A2332 50%, #1E2D3D 100%);
    color: rgba(255, 255, 255, .95);
}

.stjo-footer a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
}

.stjo-footer a:hover,
.stjo-footer a:focus {
    color: #fff;
}

.stjo-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stjo-footer__grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
    padding-top: 72px;
    padding-bottom: 56px;
}

.stjo-footer__logo img {
    display: block;
    width: auto;
    height: 78px;
}

.stjo-footer__reseaux {
    display: flex;
    gap: 12px;
    margin-top: 28px !important; /* passe devant le margin: 0 des listes du footer */
}

.stjo-footer__reseaux a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--stjo-rayon);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    transition: background-color .2s ease;
}

.stjo-footer__reseaux a:hover,
.stjo-footer__reseaux a:focus {
    background: rgba(255, 255, 255, .14);
}

.stjo-footer__titre {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: #fff;
}

.stjo-footer__coord {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

.stjo-footer__coord li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.stjo-footer__coord .fa-solid {
    flex: none;
    width: 16px;
    margin-top: 4px;
    color: #3FA6D2;
    text-align: center;
}

.stjo-footer__texte {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

.stjo-footer__boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stjo-footer .stjo-footer__btn {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 22px;
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: border-color .2s ease, background-color .2s ease;
}

.stjo-footer .stjo-footer__btn:hover,
.stjo-footer .stjo-footer__btn:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, .06);
}

.stjo-footer__bas {
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

.stjo-footer__bas strong {
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.stjo-footer__bas a {
    display: inline;
    font-style: italic;
}

/* Le parent fixe a{font-size:16px} : liens texte à la taille de leur ligne. */
.stjo-footer__coord a,
.stjo-footer__bas a {
    font-size: inherit;
}

.stjo-footer #back-to-top a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--stjo-rayon);
    background: var(--stjo-degrade);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 6px 18px rgba(30, 90, 126, .3);
}

/* Le parent, une fois la page défilée, met la flèche en gris (!important)
   et le bouton à 50 % d'opacité. */
.stjo-footer #back-to-top.scrolled-arrow {
    opacity: 1;
}

.stjo-footer #back-to-top.scrolled-arrow a {
    color: #fff !important; /* passe devant le !important du parent */
}

.stjo-footer #back-to-top a:hover,
.stjo-footer #back-to-top a:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(30, 90, 126, .4);
}

/* 11. Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .stjo-header__sep,
    .stjo-header__titre {
        display: none;
    }

    .stjo-footer__grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stjo-footer__grille .stjo-footer__col:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .stjo-container {
        padding: 0 16px;
    }

    .stjo-topbar {
        display: none;
    }

    .stjo-header__inner {
        min-height: 72px;
    }

    .stjo-header__logo img {
        height: 52px;
    }

    .stjo-header__actions {
        gap: 8px;
    }

    /* Mobile : deux boutons icône, téléphone et e-mail. */
    .stjo-header__btn.stjo-btn--primary {
        display: none;
    }

    .stjo-header__btn.stjo-btn--ghost {
        width: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: rgba(38, 130, 169, .08);
        color: var(--stjo-bleu);
    }

    .stjo-header__btn.stjo-btn--ghost span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .stjo-header__btn .fa-envelope {
        display: inline-block;
    }

    .stjo-header__icone {
        display: inline-flex;
        order: -1;
    }

    .stjo-bandeau {
        height: 5px;
    }

    #main .page-header {
        margin-bottom: 24px;
        padding: 28px 0 30px;
    }

    #main .page-header .page-title {
        margin-top: 14px;
        font-size: 32px;
        letter-spacing: -1px;
    }

    #primary > .inner,
    #primary > #form-save-pending,
    #primary > .wpforms-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    #main .form-warning {
        padding: 18px 18px 18px 66px;
        font-size: 14px;
    }

    #main .form-warning::before {
        top: 18px;
        left: 18px;
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    #main #form-save-pending .col-auto {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Pas la place à côté du titre : la mention repasse au-dessus. */
    #main .wpforms-form .wpforms-field-container::before {
        position: static;
        margin-bottom: 10px;
        text-align: right;
    }

    /* Département au-dessus de la ville une fois les colonnes empilées. */
    #main .wpforms-form #wpforms-33-field_229-container:has(select > option:only-child) .select2-selection__placeholder::before {
        content: "\f062";
    }

    #main form#form-save-pending .row .email_suivi {
        grid-template-columns: 38px minmax(0, 1fr);
        column-gap: 12px;
        padding: 20px 18px 20px 22px;
        border-radius: 18px;
    }

    #main form#form-save-pending .row .email_suivi::before {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    #main #form-save-pending .email_suivi .form-label {
        font-size: 15px;
    }

    #main #form-save-pending .email_suivi .form-control {
        grid-column: 1 / -1;
        max-width: none;
    }

    #main #form-save-pending .btn.btn-primary:not([name=show_input]) {
        width: 100%;
        justify-content: center;
        padding: 0 16px;
    }

    /* Colonnes WPForms empilées sur mobile. */
    #main .wpforms-form .wpforms-field.wpforms-one-half,
    #main .wpforms-form .wpforms-field.wpforms-one-third,
    #main .wpforms-form .wpforms-field.wpforms-two-thirds,
    #main .wpforms-form .wpforms-field.wpforms-one-fourth,
    #main .wpforms-form .wpforms-field.wpforms-three-fourths,
    #main .wpforms-form .wpforms-field-row-block.wpforms-one-half {
        float: none;
        width: 100%;
        margin-left: 0;
    }

    #main .wpforms-form .wpforms-field-row-block.wpforms-one-half + .wpforms-field-row-block {
        margin-top: 12px;
    }

    #main .wpforms-container .wpforms-form {
        padding: 0 20px 24px;
        border-radius: 20px;
    }

    #main .wpforms-form .wpforms-page-indicator {
        margin: 0 -20px 24px;
        padding: 20px;
    }

    #main .wpforms-form .wpforms-field-divider h3 {
        font-size: 21px;
    }

    #main .wpforms-form .wpforms-field-divider h2 {
        font-size: 25px;
    }

    #main .wpforms-form .wpforms-pagebreak-left,
    #main .wpforms-form .wpforms-submit-container {
        margin: 24px -20px -24px;
        padding: 20px;
    }

    #main form.wpforms-form button.wpforms-page-button,
    #main form.wpforms-form button.wpforms-submit {
        flex: 1 1 100%;
        min-height: 52px;
    }

    #main .wpforms-form .wpforms-pagebreak-left .wpforms-page-prev {
        order: 2;
        margin-right: 0;
    }

    .stjo-footer__grille {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 40px;
        padding-bottom: 32px;
    }

    .stjo-footer__logo img {
        height: 64px;
    }

    .stjo-footer__boutons {
        flex-direction: column;
    }

    .stjo-footer .stjo-footer__btn {
        justify-content: center;
    }
}