/* Reorganisation du site (note de novembre 2026) */

/* --- Menu a 6 onglets --- */
#menu_haut > ul > li {
    vertical-align: top;
}
@media screen and (min-width: 1170px) {
    #menu_haut > ul > li {
        max-width: none;
    }
    #menu_haut > ul > li > a {
        padding: 0 14px;
    }
    #menu_haut > ul > li > ul,
    #menu_haut > ul > li:nth-child(1) > ul,
    #menu_haut > ul > li:nth-child(2) > ul,
    #menu_haut > ul > li:nth-child(3) > ul {
        display: block;
        width: 300px;
        min-width: 0;
    }
    #menu_haut > ul > li:last-child > ul,
    #menu_haut > ul > li:last-child:hover > ul {
        width: 200px;
        left: auto;
        right: 0;
    }
    #menu_haut > ul > li:hover > ul {
        z-index: 1000;
    }
}
/* Mobile : les sous-menus etaient desactives, ils sont necessaires pour atteindre les pages rangees */
@media screen and (max-width: 1169px) {
    .extend {
        display: block !important;
    }
    #menu_haut ul li.open ul {
        display: block !important;
    }
}

/* --- Accueil : JML en chiffres --- */
.chiffres_accueil {
    background-color: #fff;
    padding-top: 50px;
}
.chiffres_accueil .satisfaction-stagiaires {
    padding-bottom: 50px !important;
}
.chiffres_detail {
    margin-top: 20px;
}
.chiffres_detail a {
    color: #222b56;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Accueil : l'application --- */
.application_accueil {
    background-color: #f4f5fa;
    padding: 60px 0;
}
.application_accueil .row {
    display: flex;
    align-items: center;
}
.application_accueil h2 {
    color: #222b56;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 18px;
    text-transform: none;
}
.application_accueil h2 span {
    color: #c22b22;
}
.application_accueil p {
    color: #4a4a49;
    font-size: 18px;
    margin-bottom: 12px;
}
.application_accueil p strong {
    color: #222b56;
}
.application_accueil img {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto;
}
a.btn_application,
#centreetdroite .jml-app__boutons a {
    display: inline-block;
    background-color: #c22b22;
    border-radius: 24px;
    color: #fff;
    font-weight: 700;
    padding: 12px 28px;
    margin-top: 10px;
    text-decoration: none;
}
a.btn_application:hover,
#centreetdroite .jml-app__boutons a:hover {
    background-color: #222b56;
    color: #fff;
}

/* --- Page L'application JML --- */
#centreetdroite .jml-app {
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
}
.jml-app .container {
    max-width: 100%;
}
.jml-app__bloc {
    padding: 50px 0;
}
.jml-app__bloc .row {
    display: flex;
    align-items: center;
}
.jml-app__bloc--entete {
    background-color: #243062;
    color: #fff;
}
.jml-app__bloc--gris {
    background-color: #f4f5fa;
}
.jml-app h2,
.jml-app h3 {
    color: #222b56;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 14px;
    text-transform: none;
}
.jml-app h2 {
    font-size: 38px;
}
.jml-app h3 {
    font-size: 28px;
}
#centreetdroite .jml-app__bloc--entete h2,
#centreetdroite .jml-app__intro {
    color: #fff;
}
#centreetdroite .jml-app__intro {
    font-size: 22px;
}
.jml-app__etiquette {
    color: #c22b22;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.jml-app__pastilles {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}
#centreetdroite .jml-app__pastilles li {
    display: inline-block;
    background-color: rgba(255, 255, 255, .15);
    border-radius: 16px;
    color: #fff;
    font-size: 15px;
    margin: 0 8px 8px 0;
    padding: 5px 14px;
}
.jml-app__image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 520px;
    height: auto;
    margin: 0 auto;
    border-radius: 14px;
}
.jml-app__bloc--principe {
    background-color: #fff;
    text-align: center;
}
.jml-app__centre {
    text-align: center;
}
.jml-app__controle {
    flex-wrap: wrap;
    align-items: stretch !important;
}
.jml-app__controle p {
    background-color: #f4f5fa;
    border-radius: 10px;
    height: calc(100% - 16px);
    margin-bottom: 16px;
    padding: 18px 20px;
}
.jml-app__controle strong {
    display: block;
    color: #222b56;
}
.jml-app__bloc--fin {
    background-color: #243062;
    color: #fff;
    text-align: center;
}
#centreetdroite .jml-app__bloc--fin p {
    color: #fff;
}
#centreetdroite .jml-app__bloc--fin a {
    color: #fff;
    text-decoration: underline;
}
@media screen and (max-width: 767px) {
    .application_accueil .row,
    .jml-app__bloc .row {
        display: block;
    }
    .application_accueil img,
    .jml-app__image img {
        margin-top: 24px;
    }
    .jml-app h2 {
        font-size: 30px;
    }
    .jml-app h3 {
        font-size: 24px;
    }
    .application_accueil h2 {
        font-size: 28px;
    }
}

/* --- Page Formations pour les professionnels --- */
.jml-entreprises__accroche {
    font-size: 22px;
}
#centreetdroite .jml-entreprises__etapes {
    margin: 0 0 18px;
    padding-left: 24px;
}
#centreetdroite .jml-entreprises__etapes li {
    font-size: 20px;
    line-height: 1.4;
    list-style: decimal;
    margin-bottom: 6px;
}
.jml-entreprises__temoignages {
    margin-top: 24px;
}
.jml-entreprises__temoignages blockquote {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #fff;
    border-left: 4px solid #c22b22;
    border-radius: 6px;
    margin: 0 0 16px;
    padding: 18px 20px;
}
.jml-entreprises__temoignages blockquote p {
    font-family: inherit;
    font-size: 17px;
    font-style: normal;
}
.jml-entreprises__temoignages blockquote footer {
    color: #222b56;
    font-family: inherit;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
}
.jml-entreprises__contact {
    padding: 20px 0 40px;
    text-align: center;
}

/* --- Page Nos engagements qualite et RSE --- */
.jml-rse {
    margin: 30px auto 0;
    max-width: 1000px;
    text-align: center;
}
.jml-rse img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* [12/11/2026] Titre principal des pages interieures : le titre du bandeau passe de h2 a h1
   (index.php), le logo n'est plus un h1 (header_new.inc.php). Memes valeurs que les regles
   ".main-slider .carousel-inner .item h2" de theme_new.css, pour un rendu identique ;
   color, font-weight, margin-top et line-height neutralisent les regles generiques des h1. */
.main-slider .carousel-inner .item h1.titre-bandeau { font-size: 8rem; font-family: 'Playball', cursive; margin-bottom: 3%; text-shadow: 1px 1px 3px #000000;
    color: inherit; font-weight: 500; margin-top: 20px; line-height: 1.46; }
@media (max-width: 1200px) { .main-slider .carousel-inner .item h1.titre-bandeau { font-size: 2.5em; margin-bottom: 3%; } }
@media (max-width: 970px) { .main-slider .carousel-inner .item h1.titre-bandeau { font-size: 2em !important; margin-bottom: 3%; } }
#logo .logo-titre { margin: 0; }
#carousel-homepage h1.titre-bandeau { color: #fff; }
@media (max-width: 1500px) { #carousel-homepage h1.titre-bandeau { font-size: 50px; } }

/* [12/11/2026] Accueil, bloc "Pour les particuliers" (bloc2.png, 300 x 531) : zones cliquables
   posees sur les lignes "ENFANTS / ADOS" et "ADULTES" de l'image, en pourcentage pour suivre sa taille. */
.block1 .bloc-particuliers { position: relative; }
.block1 .bloc-particuliers__zone { position: absolute; left: 15%; width: 70%; display: block; }
.block1 .bloc-particuliers__enfants { top: 81.5%; height: 8.5%; }
.block1 .bloc-particuliers__adultes { top: 90.5%; height: 9.5%; }

/* [12/11/2026] Page Actualites (liste en vignettes, style_new.css) : les liens faisaient 380 x 380 px fixes
   dans des colonnes de 33 % ; des que l'ecran retrecit, les vignettes se chevauchaient et la page debordait
   (270 px sur telephone). Vignettes carrees qui suivent la colonne : 3 par ligne, 2 sur tablette, 1 sur telephone. */
.carre_actu a { width: 100%; max-width: 380px; height: auto; aspect-ratio: 1 / 1; }
.carre_actu a img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) { .carre_actu { width: 50%; } }
@media (max-width: 600px) { .carre_actu { width: 100%; } .carre_actu a { margin: 0 auto; } }

/* [12/11/2026] Blocs "J'aime les langues" et equipe administrative : .row (marges -15 px de Bootstrap)
   pose hors d'un .container, la page bougeait de 15 px sur le cote sur telephone et tablette. */
@media (max-width: 1199px) { .row.jaime, .row.equipe_admin, .liste_carre { margin-left: 0; margin-right: 0; } }

/* ===== 13/11/2026 : accessibilite (rapport PageSpeed) ===== */
/* Titres h4 de l'accueil passes en h3 (ordre des titres h2 -> h3) : meme rendu qu'avant. */
h3.ex-h4, h3.titre4 { font-size: 18px; margin-top: 10px; margin-bottom: 10px; color: #4a4a49; }
.jaime h3.ex-h4, h3.titre4 { font-weight: 800; color: #4a4a49; font-size: 25px; }
.contact_bj h3.ex-h4 { color: #c22b22; font-size: 28px; font-weight: 700; }
.itemsoeasy h3.ex-h4 { font-weight: 300; font-style: italic; font-size: 80px; color: #222b56; }
.itemsoeasy h3.ex-h4 span { font-weight: 700; color: #c22b22; font-size: 80px; font-family: 'Source Sans Pro'; }
/* Liens dans les textes : soulignes, pour les distinguer autrement que par la couleur. */
/* !important : style_new.css impose "a { text-decoration: none!important }" a tout le site. */
#ariane .ariane a, #contenu_scroller p a:not(.btn), #contenu_scroller li a:not(.btn) { text-decoration: underline !important; }
/* Liens sur fond bleu marine (bloc .bg_blue) : rose clair, lisible (contraste 6,8). */
#contenu_scroller .bg_blue p a:not(.btn) { color: #f0a3ab; }
/* Cibles tactiles d'au moins 24 px : listes de villes (tableaux) et liens de contact du pied de page. */
#contenu_scroller td > a { display: inline-block; padding: 2px 0; }
.footer-light .header2 > a { padding-top: 1px; padding-bottom: 1px; }
/* Page Contact : titre h3 passe en h2 (ordre des titres) : reprend les regles de style-contact.css et la taille d'un h3. */
#contactgauche h2.ex-h3 { position: relative; width: 100%; font-size: 24px; }
#contactgauche h2.ex-h3 span { width: 100%; height: auto; background-color: transparent; position: relative; }
/* Vignettes des actualites : voile un peu plus fonce sous le titre (contraste 3,9 -> 5,7). */
.carre_actu a span { background-color: rgb(0 0 0 / 0.6); }

/* ===== 13/11/2026 : performance sur telephone ===== */
/* Police d'icones : font-awesome.css n'est plus charge ; les styles n'utilisent que 10 symboles (fleches sous les titres,
   fleches du menu, puces, coches) : police reduite a ces symboles (polices/fontawesome-jml.woff2, 1 Ko au lieu de 64 Ko).
   Pour un nouveau symbole : refaire le sous-ensemble avec pyftsubset depuis css/fonts/fontawesome-webfont.ttf. */
@font-face { font-family: 'FontAwesome'; src: url('polices/fontawesome-jml.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: block; }
/* Icones des reseaux sociaux (pied de page) : dimensions declarees dans le HTML pour reserver leur place avant
   chargement (images differees) ; largeur calculee depuis la hauteur de theme_new.css, sans deformation. */
#pied .reseaux_footer li img { width: auto; }