/*
Theme Name: Métiers en uniforme
Theme URI: https://app.metiersenuniforme.fr
Description: Thème enfant de Twenty Twenty-Five pour la plateforme « Les Deux Galons » (concours de contrôleur des douanes). Reprend la charte de metiersenuniforme.fr issue de la refonte du 21 septembre 2026 : nuit, garance, argent, et Archivo pour tout.
Author: Walid Joudi Gueraa
Author URI: https://metiersenuniforme.fr
Template: twentytwentyfive
Version: 1.0.0
Text Domain: metiersenuniforme
*/

/* ===================================================================
   MÉTIERS EN UNIFORME — PLATEFORME « LES DEUX GALONS »
   Créé le 23 septembre 2026 à partir du thème enfant de
   app.devenirtaxivtc.fr, dont il reprend la structure et TOUTES les
   corrections éprouvées en production (contrastes RGAA, modes sombres
   forcés, palette de Tutor). Seule la charte change : celle du site
   metiersenuniforme.fr, pour que l'élève ne change pas de monde en passant
   du site à la plateforme.

   ATTENTION — le garance n'est pas l'ambre du taxi.
   L'ambre était CLAIR : il portait du texte sombre, et brillait sur le nuit.
   Le garance est SOMBRE : il porte du texte blanc, et sur le nuit il ne fait
   que 2,93:1 — il ne peut donc jamais y servir de texte. Deux règles reprises
   du taxi ont dû être corrigées à ce titre le 23/09 : le « em » du logo
   (désormais blanc, la bande garance portant l'identité) et les initiales de
   l'avatar du tableau de bord (désormais en argent, 10,91:1).

   Contrastes mesurés (WCAG 2.x) le 23 septembre 2026 :
     blanc sur garance #C8102E .............. 5,89:1
     garance #C8102E sur blanc .............. 5,89:1
     garance foncé #A00D25 sur blanc ........ 8,15:1
     blanc sur nuit #0A1B33 ................. 17,25:1
     acier #5D6B84 sur papier #F4F7FB ....... 5,01:1
     argent #C9CED6 sur nuit #0A1B33 ........ 10,91:1
   =================================================================== */

/* -------------------------------------------------------------------
   0. POLICES — hébergées dans le thème, aucune requête vers Google.
   Mêmes fichiers que metiersenuniforme.fr (SIL Open Font License 1.1).
   ------------------------------------------------------------------- */
/* Archivo est une police VARIABLE (tables fvar, avar, STAT, HVAR vérifiées le
   23/09) : un seul fichier porte toutes les graisses de 100 à 900. Le thème du
   taxi la déclarait quatre fois, sous quatre noms, pour le même octet. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/archivo.woff2') format('woff2-variations'), url('fonts/archivo.woff2') format('woff2'); }

/* -------------------------------------------------------------------
   1. VARIABLES — mêmes noms et valeurs que metiersenuniforme.fr
   ------------------------------------------------------------------- */
:root {
    color-scheme: only light;

    /* Les trois teintes fixes de metiersenuniforme.fr, refonte du 21/09/2026 :
       le drap de l'uniforme, la bande garance du pantalon, l'argent des galons. */
    --nuit: #0A1B33;
    --nuit-2: #13294B;
    --bord: #1D3A66;

    /* Le garance. Contrastes mesurés (WCAG 2.x) le 23 septembre 2026 :
         blanc sur garance #C8102E ......... 5,89:1
         garance #C8102E sur blanc ......... 5,89:1
         garance foncé #A00D25 sur blanc ... 8,15:1
         blanc sur nuit #0A1B33 ............ 17,25:1
         acier #5D6B84 sur papier #F4F7FB .. 5,01:1 */
    --garance: #C8102E;
    --garance-survol: #E01234;
    --garance-f: #C8102E;
    --garance-ff: #A00D25;
    --garance-pale: #FDECEE;
    --sur-garance: #FFFFFF;

    /* Le cerclage de focus reprend celui du site : garance, comme les liens. */
    --cyan: #C8102E;
    --rouge: #C8102E;
    --rouge-pale: #FDECEE;

    --papier: #F4F7FB;
    --blanc: #FFFFFF;
    --encre: #0F1826;
    --encre-2: #39465C;
    --acier: #5D6B84;
    --argent: #C9CED6;
    --filet: #CBD5E4;
    --filet-p: #E4EBF4;

    /* Une seule famille, comme le site depuis la refonte : Archivo.
       Newsreader et Zilla Slab ne sont plus chargées nulle part. */
    --display: 'Archivo', system-ui, -apple-system, sans-serif;
    --titre: 'Archivo', system-ui, sans-serif;
    --corps: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* -------------------------------------------------------------------
   2. TYPOGRAPHIE
   ------------------------------------------------------------------- */
body {
    background-color: var(--papier);
    color: var(--encre);
    font-family: var(--corps);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.tutor-course-name,
.tutor-course-title,
.tutor-lesson-title,
.tutor-segment-title,
.tutor-course-details-title,
.tutor-course-content-title,
.tutor-dashboard-title,
.tutor-accordion-item-header {
    font-family: var(--titre);
    color: var(--encre);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

h1, h1.wp-block-heading { font-size: 2.2rem; margin-bottom: 0.6em; }
h2, h2.wp-block-heading { font-size: 1.6rem; margin-top: 1.6em; margin-bottom: 0.5em; }
h3, h3.wp-block-heading { font-size: 1.25rem; font-weight: 700; margin-top: 1.3em; margin-bottom: 0.4em; }
h4, h5, h6 { font-weight: 700; }

h1.tutor-color-black, h2.tutor-color-black, h3.tutor-color-black, h4.tutor-color-black {
    color: var(--encre);
    font-family: var(--titre);
}

.tutor-course-content-list-item-title { font-family: var(--titre); font-weight: 600; }

p, li,
.tutor-course-content p,
.tutor-lesson-content p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--encre);
}

strong, b { color: var(--encre); font-weight: 700; }

.wp-element-caption, figcaption { color: var(--acier); font-size: 0.9rem; }

.tutor-lesson-content, .tutor-course-content { background-color: var(--blanc); }

/* -------------------------------------------------------------------
   3. ENCADRÉS, CITATIONS, TABLEAUX, LIENS, FILETS
   ------------------------------------------------------------------- */
blockquote, .wp-block-quote {
    background-color: var(--garance-pale);
    border-left: 4px solid var(--garance);
    margin: 1.6em 0;
    padding: 1.1em 1.4em;
    border-radius: 0 2px 2px 0;
    font-style: normal;
}
blockquote p:first-child, .wp-block-quote p:first-child { margin-top: 0; }
blockquote p:last-child, .wp-block-quote p:last-child { margin-bottom: 0; }

table, .wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.6em 0;
    font-size: 0.98rem;
    background-color: var(--blanc);
}
/* Les tableaux des leçons débordaient à 375 px : ils défilent dans leur
   propre cadre, la page ne défile jamais horizontalement. */
.tutor-lesson-content table, .tutor-course-content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}
table thead th, .wp-block-table thead th {
    background-color: var(--nuit);
    color: var(--blanc);
    font-family: var(--titre);
    font-weight: 700;
    text-align: left;
    padding: 0.75em 1em;
    border: 1px solid var(--nuit);
}
table td, table tbody th, .wp-block-table td, .wp-block-table tbody th {
    padding: 0.7em 1em;
    border: 1px solid var(--filet);
    vertical-align: top;
}
table tbody tr:nth-child(even), .wp-block-table tbody tr:nth-child(even) { background-color: var(--papier); }

.tutor-lesson-content a, .tutor-course-content a, .entry-content a, article a {
    color: var(--garance-f);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.tutor-lesson-content a:hover, .tutor-course-content a:hover, .entry-content a:hover, article a:hover {
    color: var(--garance-ff);
    text-decoration-thickness: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 2px;
}

hr, .wp-block-separator {
    border: none;
    border-top: 1px solid var(--filet);
    margin: 2em 0;
    max-width: 100%;
}

/* -------------------------------------------------------------------
   4. EN-TÊTE — gabarit parts/header.html
   ------------------------------------------------------------------- */
header.wp-block-template-part { background: var(--nuit); border-bottom: 1px solid var(--bord); }
.mu-entete {
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.mu-logo {
    font-family: var(--display); font-weight: 800;
    font-size: 1.15rem;
    color: #fff !important;
    letter-spacing: -0.02em;
    text-decoration: none !important;
}
.mu-logo em { font-style: normal; color: #fff; font-weight: 400; }
/* La bande garance du pantalon dordonnance — lidentité du site. */
.mu-bande { display: inline-block; width: 6px; height: 1.35em; background: var(--garance); margin-right: 11px; vertical-align: -0.28em; }
.mu-etiquette {
    font-family: var(--titre);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--argent);
    border-left: 1px solid var(--bord);
    padding-left: 18px;
    margin-right: auto;
}
.mu-entete-liens { display: flex; gap: 12px; align-items: center; }

/* -------------------------------------------------------------------
   5. BOUTONS — ceux du site (.btn-1 / .btn-2), et ceux de Tutor
   ------------------------------------------------------------------- */
.mu-btn {
    /* border-box : sans lui, min-height s'ajoutait aux marges intérieures
       (44 + 22 + 4 = 70 px, mesuré le 13/09/2026). */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--titre);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 11px 20px;
    border-radius: 2px;
    text-decoration: none !important;
    border: 2px solid transparent;
    transition: background-color .12s ease;
    white-space: nowrap;
    line-height: 1.3;
}
.mu-btn-1 { background: var(--garance); color: var(--sur-garance) !important; }
.mu-btn-1:hover { background: var(--garance-survol); }
.mu-btn-2 { border-color: var(--garance-f); color: var(--garance-f) !important; background: transparent; }
.mu-btn-2:hover { background: var(--garance-pale); }
header .mu-btn-2 { border-color: var(--bord); color: #fff !important; }
header .mu-btn-2:hover { background: var(--nuit-2); }

/* Bouton selon l'état de connexion (même principe que DAF, bloc 17) */
.mu-btn-connecte { display: none; }
body.logged-in .mu-btn-anonyme { display: none; }
body.logged-in .mu-btn-connecte { display: inline-flex; }

.tutor-btn-primary,
.tutor-course-entry-box .tutor-btn,
.tutor-enroll-course-button,
.tutor-add-to-cart-button,
.tutor-native-add-to-cart,
button.tutor-btn-primary,
a.tutor-btn-primary {
    background-color: var(--garance) !important;
    border-color: var(--garance) !important;
    color: var(--sur-garance) !important;
    font-family: var(--titre) !important;
    font-weight: 700 !important;
    border-radius: 2px !important;
    transition: background-color .12s ease;
}
/* La règle des liens de contenu (section 3) soulignait aussi les boutons
   Tutor — vu sur « Poursuivre la navigation » du panier, le 13/09/2026. */
.tutor-btn, a.tutor-btn, .mu-btn { text-decoration: none !important; }
.tutor-btn-primary:hover,
.tutor-course-entry-box .tutor-btn:hover,
.tutor-enroll-course-button:hover,
.tutor-add-to-cart-button:hover,
.tutor-native-add-to-cart:hover,
button.tutor-btn-primary:hover,
a.tutor-btn-primary:hover {
    background-color: var(--garance-survol) !important;
    border-color: var(--garance-survol) !important;
    color: var(--sur-garance) !important;
}
.tutor-btn-outline-primary, a.tutor-btn-outline-primary, button.tutor-btn-outline-primary {
    border-color: var(--garance-f) !important;
    color: var(--garance-f) !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    border-radius: 2px !important;
}
.tutor-btn-outline-primary:hover, a.tutor-btn-outline-primary:hover, button.tutor-btn-outline-primary:hover {
    background-color: var(--garance-pale) !important;
    color: var(--garance-ff) !important;
}

/* -------------------------------------------------------------------
   6. PAGES COURS — cartes, prix, badges, onglets, progression
   ------------------------------------------------------------------- */
.tutor-card.tutor-course-card,
.tutor-single-course-sidebar .tutor-card {
    background-color: var(--blanc);
    border: 1px solid var(--filet);
    border-radius: 4px;
    overflow: hidden;
}
.tutor-card.tutor-course-card { transition: border-color .15s ease, box-shadow .15s ease; }
.tutor-card.tutor-course-card:hover { border-color: var(--garance); box-shadow: 0 4px 16px rgba(11, 13, 18, 0.08); }

.tutor-course-price, .tutor-course-price span, .list-item-price, .tutor-card-footer .price {
    color: var(--encre) !important;
    font-family: var(--titre);
    font-weight: 800;
}
.tutor-badge-label, .tutor-course-level, .tutor-course-card .tutor-meta-value {
    background-color: var(--garance-pale);
    color: var(--garance-ff);
    border-radius: 2px;
}
.tutor-course-details-tab .tutor-nav-item a, .tutor-nav .tutor-nav-link {
    color: var(--acier);
    font-family: var(--titre);
    font-weight: 700;
}
.tutor-course-details-tab .tutor-nav-item a.is-active,
.tutor-nav .tutor-nav-link.is-active,
.tutor-course-details-tab .tutor-nav-item a.active,
.tutor-nav .tutor-nav-link.active {
    color: var(--encre) !important;
    border-bottom: 3px solid var(--garance) !important;
}
.tutor-progress-bar .tutor-progress-value, .tutor-progress-filled { background-color: var(--garance) !important; }
.tutor-icon-star-bold, .tutor-ratings-stars i { color: var(--garance) !important; }
.tutor-single-course-sidebar .tutor-card .tutor-color-black { color: var(--encre); }

/* -------------------------------------------------------------------
   7. TABLEAU DE BORD ÉLÈVE
   ------------------------------------------------------------------- */
.tutor-dashboard-permalinks .tutor-dashboard-menu-item-link {
    color: var(--encre);
    font-family: var(--corps);
    transition: color .15s ease, background-color .15s ease;
}
.tutor-dashboard-permalinks .tutor-dashboard-menu-item:not(.active) .tutor-dashboard-menu-item-link:hover { color: var(--garance-f); }
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a {
    background-color: var(--nuit);
    color: #fff;
    border-radius: 2px;
}
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a i,
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a [class*="tutor-icon-"] { color: var(--garance) !important; }
.tutor-dashboard-permalinks .tutor-dashboard-menu-item:not(.active) .tutor-dashboard-menu-item-link i,
.tutor-dashboard-permalinks .tutor-dashboard-menu-item:not(.active) .tutor-dashboard-menu-item-link [class*="tutor-icon-"] { color: var(--garance-f); }
.tutor-dashboard-content .tutor-card, .tutor-course-progress-item.tutor-card {
    background-color: var(--blanc);
    border: 1px solid var(--filet);
    border-radius: 4px;
}
.tutor-dashboard-content .tutor-card i, .tutor-dashboard-content .tutor-card [class*="tutor-icon-"] { color: var(--garance-f); }
.tutor-frontend-dashboard-header { background-color: var(--garance-pale); border-radius: 4px; padding: 1.2em 1.4em; }
.tutor-dashboard-header-avatar img, .tutor-dashboard-header-avatar .tutor-avatar { border: 2px solid var(--garance); }
.tutor-dashboard-header-avatar .tutor-avatar-text { background-color: var(--nuit); color: var(--argent); }

/* -------------------------------------------------------------------
   8. PORTAIL D'ACCUEIL — l'élève qui arrive sur app.metiersenuniforme.fr/
   ------------------------------------------------------------------- */
.mu-portail {
    max-width: 540px;
    margin: 3.5em auto;
    padding: 2.6em 2.2em;
    background: var(--blanc);
    border: 1px solid var(--filet);
    border-top: 4px solid var(--garance);
    border-radius: 4px;
    text-align: center;
}
.mu-portail-surtitre {
    font-family: var(--titre);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--garance-f);
    margin: 0 0 0.6em;
}
.mu-portail h1, .mu-portail h2 { font-size: 1.9rem; margin: 0 0 0.4em; }
.mu-portail-sous-titre { color: var(--encre-2); font-size: 1.05rem; line-height: 1.5; margin: 0 0 1.8em; }
.mu-portail-cta { margin: 1.8em 0 0.8em; }
.mu-portail .mu-btn { font-size: 1.05rem; padding: 14px 28px; }
.mu-portail-lien-secondaire { margin-top: 0.4em; font-size: 0.95rem; }
.mu-portail-lien-secondaire a, .mu-portail-lien, .mu-portail-mailto { color: var(--garance-f); }
.mu-portail-lien, .mu-portail-mailto { font-weight: 700; }
.mu-portail-separateur {
    display: flex;
    align-items: center;
    color: var(--acier);
    margin: 2em 0 1.4em;
    font-size: 0.92rem;
}
.mu-portail-separateur::before, .mu-portail-separateur::after { content: ''; flex: 1; border-top: 1px solid var(--filet); }
.mu-portail-separateur span { padding: 0 1em; }
.mu-portail p { margin: 0.3em 0; }
.mu-portail-question { color: var(--acier); }
@media (max-width: 600px) {
    .mu-portail { margin: 1.5em 1em; padding: 1.9em 1.2em; }
    .mu-portail h1, .mu-portail h2 { font-size: 1.55rem; }
}
.home .wp-block-post-title, body.home .wp-block-post-title { display: none; }

/* -------------------------------------------------------------------
   9. PIED DE PAGE — gabarit parts/footer.html
   ------------------------------------------------------------------- */
footer.wp-block-template-part { background: var(--nuit); border-top: 1px solid var(--bord); margin-top: 0; }
.mu-pied {
    max-width: 1120px;
    margin: 0 auto;
    padding: 36px 24px 40px;
    color: #7C8494;
    font-size: 0.9rem;
    line-height: 1.7;
}
.mu-pied p { color: #7C8494; font-size: 0.9rem; margin: 0 0 0.9em; }
.mu-pied b { color: var(--argent); }
.mu-pied a { color: var(--argent); text-decoration: none; }
.mu-pied a:hover { color: #fff; text-decoration: underline; }
.mu-pied .mu-logo { font-size: 1rem; display: inline-block; margin-bottom: 0.6em; }
/* Liens espacés et hauts de 44 px au pouce, comme sur metiersenuniforme.fr */
.mu-pied-liens { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 1em; }
.mu-pied-liens a { display: inline-block; padding: 10px 0; }

/* -------------------------------------------------------------------
   10. PAGE DE CONNEXION /wp-login.php
   ------------------------------------------------------------------- */
body.login, body.login.wp-core-ui { background-color: var(--nuit); color: #fff; font-family: var(--corps); }
body.login #login { width: 360px; padding: 5% 0 2em; }
body.login h1 a {
    background-image: none !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
    overflow: visible !important;
    display: block;
    font-family: var(--display); font-weight: 800 !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: #fff !important;
    text-align: center;
    text-decoration: none;
    line-height: 1.3 !important;
    margin-bottom: 1.4em;
}
body.login h1 a:hover { color: var(--garance) !important; }
body.login form {
    background-color: var(--blanc) !important;
    border: 1px solid var(--filet) !important;
    border-top: 4px solid var(--garance) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
    padding: 26px 24px 24px !important;
    margin-top: 0 !important;
}
body.login form label { color: var(--encre) !important; font-family: var(--corps) !important; font-weight: 600 !important; }
body.login input[type="text"], body.login input[type="password"], body.login input[type="email"] {
    background-color: var(--papier) !important;
    border: 1px solid var(--filet) !important;
    color: var(--encre) !important;
    border-radius: 2px !important;
    padding: 8px 10px !important;
    font-size: 1rem !important;
    box-shadow: none !important;
}
body.login input[type="text"]:focus, body.login input[type="password"]:focus, body.login input[type="email"]:focus {
    border-color: var(--garance-f) !important;
    box-shadow: 0 0 0 2px rgba(255, 176, 32, 0.35) !important;
    outline: none !important;
}
body.login .forgetmenot label, body.login p.forgetmenot { color: var(--encre) !important; font-size: 0.9rem !important; }
body.login .button-primary, body.login input#wp-submit, body.login .wp-core-ui .button-primary {
    background-color: var(--garance) !important;
    border-color: var(--garance) !important;
    color: var(--sur-garance) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    border-radius: 2px !important;
    padding: 0 18px !important;
    height: 38px !important;
    line-height: 36px !important;
    font-size: 1rem !important;
}
body.login .button-primary:hover, body.login input#wp-submit:hover {
    background-color: var(--garance-survol) !important;
    border-color: var(--garance-survol) !important;
}
body.login #nav, body.login #backtoblog { text-align: center; margin-top: 1em; padding: 0; }
body.login #nav a, body.login #backtoblog a, body.login .privacy-policy-page-link a {
    color: var(--argent) !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
}
body.login #nav a:hover, body.login #backtoblog a:hover, body.login .privacy-policy-page-link a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}
body.login .message, body.login #login_error, body.login .notice {
    background-color: var(--garance-pale) !important;
    border-left: 4px solid var(--garance) !important;
    color: var(--encre) !important;
    box-shadow: none !important;
    border-radius: 0 2px 2px 0 !important;
}
body.login #login_error { background-color: var(--rouge-pale) !important; border-left-color: var(--rouge) !important; }
body.login .privacy-policy-page-link { text-align: center; margin-top: 1em; }

/* -------------------------------------------------------------------
   11. ACCESSIBILITÉ — contrastes hérités de Tutor LMS (repris de DAF)
   Tutor plafonne deux gris à 4,16:1 sur blanc, sous les 4,5:1 du RGAA
   (critère 3.2). `html:root` l'emporte quel que soit l'ordre des feuilles.
   ------------------------------------------------------------------- */
html:root {
    --tutor-color-muted: #6b7183;
    --tutor-color-hints: #6b7183;
}
html:root .tutor-item-price del,
html:root .list-item-price del,
html:root .tutor-course-price del { color: #6b7183; }

/* -------------------------------------------------------------------
   12. MODES SOMBRES FORCÉS — repris de DAF, où deux apprenants ont
   signalé du texte illisible les 10 et 11/08/2026 (Chrome Android,
   Samsung Internet, iPhone/Safari). Fond ET texte déclarés sur les
   conteneurs, pour que toute inversion reste cohérente.
   ------------------------------------------------------------------- */
.tutor-lesson-content,
.tutor-course-topic-single-body,
.tutor-lesson-content-tab { background-color: #ffffff; color: var(--encre); }
.tutor-lesson-content p,
.tutor-lesson-content li,
.tutor-lesson-content td,
.tutor-course-topic-single-body p,
.tutor-course-topic-single-body li { color: var(--encre); }
html[data-tutor-theme="dark"],
html[data-tutor-theme="system"] { background-color: var(--papier) !important; }
.tutor-learning-area { background-color: var(--papier) !important; }
.tutor-lesson-content,
.tutor-lesson-content .tutor-lesson-content-tab,
.tutor-lesson-content .tutor-lesson-content-tab .tutor-tabs-content { background-color: #ffffff !important; }

/* -------------------------------------------------------------------
   13. MOBILE
   ------------------------------------------------------------------- */
@media (max-width: 600px) {
    .mu-entete { padding: 12px 16px; gap: 10px; }
    .mu-etiquette { display: none; }
    .mu-logo { margin-right: auto; }
    /* 44 px de haut au minimum : mesuré à 40 px le 13/09/2026, sous le seuil tactile. */
    .mu-entete .mu-btn { padding: 11px 14px; font-size: 0.88rem; min-height: 44px; }
    h1, h1.wp-block-heading { font-size: 1.75rem; }
    h2, h2.wp-block-heading { font-size: 1.35rem; }
}

/* -------------------------------------------------------------------
   14. PHOTOS ET COULEURS — 6 octobre 2026
   Demande de Walid : « fais pareil sur tout app.metiersenuniforme »,
   après la refonte de l'accueil du site (photos, couleurs, façon SLA).
   Mêmes partis pris que metiersenuniforme.fr :
   - le liseré tricolore des coques de la douane, sous l'en-tête ;
   - une couleur par préparation : bleu pour Le Premier Galon (cours 180),
     garance pour Les Deux Galons (14), vert pour Les Deux Colonnes (63) ;
   - des photos libres (Wikimedia Commons), créditées sur place et au pied.
   La plateforme est en clair seulement (color-scheme: only light) : les
   teintes ci-dessous ne sont mesurées que sur fond clair ou sur le nuit.
     bleu #1F4FA3 sur blanc ................. 7,6:1   blanc sur bleu : 7,6:1
     vert #1E7A50 sur blanc ................. 5,5:1   blanc sur vert : 5,5:1
   ------------------------------------------------------------------- */
:root { --mu-bleu: #1F4FA3; --mu-vert: #1E7A50; --mu-tricolore: linear-gradient(90deg, #1F4FA3 0 33.33%, #FFFFFF 33.33% 66.66%, #C8102E 66.66%); }

/* 14.1 — le liseré tricolore, sous l'en-tête de toutes les pages
   et sous la barre de l'espace d'apprentissage */
header.wp-block-template-part { position: relative; border-bottom: 0; }
header.wp-block-template-part::after,
.tutor-learning-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--mu-tricolore); }
.tutor-learning-header { position: relative; }

/* 14.2 — l'accueil de la plateforme (page « Espace élève », n° 54) */
.home .wp-block-post-content, body.home main { padding-top: 0 !important; margin-top: 0 !important; }
/* La mise en page « contrainte » de Twenty Twenty-Five borne chaque enfant du
   contenu à la largeur de lecture, avec des marges !important : la page
   d'accueil doit en sortir pour occuper toute la largeur. */
.is-layout-constrained > .mu-app, .mu-app { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; margin-top: 0 !important; }
.home .wp-block-post-content.is-layout-constrained { overflow-x: clip; }
/* Le groupe qui enveloppe le contenu porte 70 px de marge haute (style du
   parent) : sur l'accueil, la photo vient coller au liseré de l'en-tête. */
.home main > .wp-block-group:has(.mu-app) { padding-top: 0 !important; padding-bottom: 0 !important; }
.mu-app h1, .mu-app h2, .mu-app h3 { font-family: var(--display); }
.mu-app em { font-style: normal; }
.mu-app-heros { position: relative; isolation: isolate; overflow: hidden; background: var(--nuit); color: #fff; min-height: 520px; display: flex; align-items: center; }
.mu-app-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; z-index: -2; max-width: none; }
.mu-app-heros::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,27,51,.96) 0%, rgba(10,27,51,.86) 45%, rgba(10,27,51,.35) 100%); }
.mu-app-heros::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--garance); }
.mu-app-heros-in { width: 100%; max-width: 1180px; margin: 0 auto; padding: 72px 32px 84px; }
.mu-app-badge { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.85rem; letter-spacing: .04em; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); padding: 6px 14px 6px 12px; margin: 0 0 22px; }
.mu-app-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--garance); box-shadow: 0 0 0 4px rgba(200,16,46,.3); }
.mu-app-heros h1 { color: #fff; font-stretch: 72%; font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; margin: 0 0 18px; max-width: 12em; }
.mu-app-heros h1 em { box-shadow: inset 0 -.15em 0 var(--garance); }
.mu-app-chapeau { color: #D9DFE9; font-size: 1.15rem; line-height: 1.6; max-width: 32em; margin: 0; }
.mu-app-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; align-items: center; }
.mu-app-actions .mu-btn { font-size: 1.05rem; padding: 16px 28px; }
.mu-app-btn-trait { display: inline-flex; align-items: center; padding: 14px 24px; border: 2px solid rgba(255,255,255,.75); color: #fff !important; font-weight: 700; text-decoration: none !important; }
.mu-app-btn-trait:hover { background: #fff; color: var(--nuit) !important; }
.mu-app-credit { position: absolute; right: 16px; bottom: 8px; margin: 0; font-size: 12px; color: rgba(255,255,255,.75); }
.mu-app-credit a { color: inherit; text-decoration: underline; }
.mu-app-preps, .mu-app-metiers { max-width: 1180px; margin: 0 auto; padding: 80px 32px 40px; }
.mu-app-sur { font-family: var(--titre); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--garance-f); margin: 0 0 12px; }
.mu-app-preps h2, .mu-app-metiers h2 { font-stretch: 72%; font-weight: 800; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.05; color: var(--nuit); margin: 0; }
.mu-app-preps h2 em, .mu-app-metiers h2 em { color: var(--garance-f); }
.mu-app-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.mu-app-carte { --c: var(--nuit); display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--filet); border-top: 8px solid var(--c); border-radius: 0 0 14px 14px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(10,27,51,.55); transition: transform .2s ease; }
.mu-app-carte:hover { transform: translateY(-3px); }
.mu-app-bleu { --c: var(--mu-bleu); }
.mu-app-garance { --c: var(--garance); }
.mu-app-vert { --c: var(--mu-vert); }
.mu-app-photo { height: 170px; overflow: hidden; }
.mu-app-photo img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.mu-app-corps { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.mu-app-cat { font-family: var(--titre); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acier); margin: 0 0 8px; }
.mu-app-carte h3 { font-stretch: 72%; font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--nuit); margin: 0; }
.mu-app-pour { color: var(--c); font-weight: 700; margin: 6px 0 14px; }
.mu-app-carte ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.mu-app-carte li { position: relative; padding-left: 26px; color: var(--encre-2, #39465C); font-size: .97rem; line-height: 1.45; }
.mu-app-carte li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 4px; background: var(--c); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.mu-app-ouvrir { margin-top: auto; display: block; text-align: center; background: var(--c); color: #fff !important; font-weight: 700; padding: 14px 18px; border-radius: 8px; text-decoration: none !important; }
.mu-app-ouvrir:hover { background: var(--nuit); }
.mu-app-note { margin: 24px 0 0; color: var(--acier); font-size: .95rem; }
.mu-app-note a { color: var(--garance-f); font-weight: 700; }
.mu-app-bande { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.mu-app-bande figure { position: relative; margin: 0; height: 300px; border-radius: 14px; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; }
.mu-app-bande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; max-width: none; }
.mu-app-bande figure::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,27,51,0) 40%, rgba(10,27,51,.92) 100%); }
.mu-app-bande figcaption { color: #fff; padding: 16px; font-size: .95rem; line-height: 1.35; }
.mu-app-bande figcaption b { display: block; font-family: var(--display); font-stretch: 80%; font-weight: 800; font-size: 1.45rem; color: #fff; }
.mu-app-bande small { display: block; margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.75); }
.mu-app-pos-helico { object-position: 66% 40%; }
.mu-app-pos-chien { object-position: 28% 60%; }
.mu-app-aide { max-width: 1116px; margin: 40px auto 80px; padding: 30px 32px; background: var(--nuit); color: #fff; border-radius: 14px; display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.mu-app-aide::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--mu-tricolore); }
.mu-app-aide h2 { color: #fff; font-size: 1.6rem; margin: 0 0 4px; }
.mu-app-aide p { color: var(--argent); margin: 0; }
.mu-app-mail { background: var(--garance); color: #fff !important; font-weight: 700; padding: 14px 22px; border-radius: 8px; text-decoration: none !important; }
.mu-app-mail:hover { background: #fff; color: var(--nuit) !important; }
@media (max-width: 960px) {
    .mu-app-cartes { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    .mu-app-bande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mu-app-bande figure { height: 240px; }
    .mu-app-heros::before { background: linear-gradient(180deg, rgba(10,27,51,.9), rgba(10,27,51,.94)); }
}
@media (max-width: 600px) {
    .mu-app-heros { min-height: 0; }
    .mu-app-heros-in { padding: 44px 20px 64px 28px; }
    .mu-app-preps, .mu-app-metiers { padding: 56px 16px 24px; }
    .mu-app-aide { margin: 24px 16px 56px; padding: 26px 20px; }
    .mu-app-actions .mu-btn, .mu-app-btn-trait { width: 100%; justify-content: center; }
    .mu-app-bande figure { height: 190px; }
    .mu-app-bande figcaption b { font-size: 1.15rem; }
}

/* 14.3 — les pages de cours : un bandeau nuit et la couleur du cours */
.single-courses .tutor-course-details-header,
.single-course-bundle .tutor-course-details-header { --c: var(--garance); position: relative; background: var(--nuit); color: #fff; padding: 34px 32px 30px; border-radius: 14px; overflow: hidden; }
.single-courses .tutor-course-details-header::after,
.single-course-bundle .tutor-course-details-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--mu-tricolore); }
.single-courses .tutor-course-details-header::before,
.single-course-bundle .tutor-course-details-header::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--c); }
.single-courses .tutor-course-details-title,
.single-course-bundle .tutor-course-details-title { color: #fff !important; font-stretch: 72%; font-weight: 800 !important; font-size: clamp(2rem, 4vw, 3rem) !important; line-height: 1.05; }
.single-courses .tutor-course-details-header a,
.single-courses .tutor-course-details-header span,
.single-courses .tutor-course-details-header div,
.single-course-bundle .tutor-course-details-header a,
.single-course-bundle .tutor-course-details-header span,
.single-course-bundle .tutor-course-details-header div { color: var(--argent) !important; }
.single-courses .tutor-course-details-header [class*="tutor-icon-"],
.single-course-bundle .tutor-course-details-header [class*="tutor-icon-"] { color: #fff !important; }
.postid-180 .tutor-course-details-header { --c: var(--mu-bleu); }
.postid-63 .tutor-course-details-header { --c: var(--mu-vert); }
.tutor-single-course-sidebar .tutor-card { border-top: 6px solid var(--garance); border-radius: 0 0 12px 12px; box-shadow: 0 30px 60px -40px rgba(10,27,51,.5); }
.postid-180 .tutor-single-course-sidebar .tutor-card { border-top-color: var(--mu-bleu); }
.postid-63 .tutor-single-course-sidebar .tutor-card { border-top-color: var(--mu-vert); }
.postid-180 .tutor-single-course-sidebar .tutor-btn-primary { background-color: var(--mu-bleu) !important; border-color: var(--mu-bleu) !important; }
.postid-63 .tutor-single-course-sidebar .tutor-btn-primary { background-color: var(--mu-vert) !important; border-color: var(--mu-vert) !important; }
.postid-180 .tutor-single-course-sidebar .tutor-btn-primary:hover,
.postid-63 .tutor-single-course-sidebar .tutor-btn-primary:hover { background-color: var(--nuit) !important; border-color: var(--nuit) !important; }

/* 14.4 — l'espace d'apprentissage : progression tricolore, leçon en cours marquée */
.tutor-learning-progress .tutor-progress-bar,
.tutor-learning-progress [class*="progress-bar"] { background-color: #E4EBF4 !important; }
.tutor-learning-progress .tutor-progress-value,
.tutor-learning-progress [class*="progress-value"],
.tutor-learning-progress [class*="progress-filled"] { background: var(--mu-tricolore) !important; background-size: 300px 100% !important; }
.tutor-learning-nav-item.active { box-shadow: inset 4px 0 0 var(--garance); background-color: #FDECEE !important; }

/* 14.5 — le tableau de bord : en-tête nuit et liseré, cartes colorées */
.tutor-dashboard-header { position: relative; background: var(--nuit) !important; color: #fff; border-radius: 14px; overflow: hidden; }
.tutor-dashboard-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--mu-tricolore); }
.tutor-dashboard-header *:not(.tutor-btn):not(.tutor-btn *) { color: #fff; }
.tutor-dashboard-header [class*="avatar"] * { color: var(--nuit); }
.tutor-stat-card { border-radius: 12px !important; border-top: 5px solid var(--garance) !important; }
.tutor-stat-card:nth-child(4n+2) { border-top-color: var(--mu-bleu) !important; }
.tutor-stat-card:nth-child(4n+3) { border-top-color: var(--mu-vert) !important; }
.tutor-stat-card:nth-child(4n) { border-top-color: var(--nuit) !important; }

/* 14.6 — la caisse : un titre sur le nuit, et la promesse de sécurité */
.page-id-10 .wp-block-post-title { position: relative; background: var(--nuit); color: #fff; padding: 30px 32px 34px; border-radius: 14px; overflow: hidden; font-stretch: 72%; font-weight: 800; }
.page-id-10 .wp-block-post-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--mu-tricolore); }
.page-id-10 .wp-block-post-title::before { content: "Paiement sécurisé par Stripe · accès dès le paiement"; display: block; font-family: var(--titre); font-weight: 600; font-stretch: 100%; font-size: .95rem; letter-spacing: 0; color: var(--argent); margin-bottom: 8px; }
.tutor-checkout-details { border-top: 6px solid var(--garance); border-radius: 0 0 12px 12px; }

/* 14.7 — le pied : les crédits photo */
.mu-pied-credits { font-size: .8rem !important; }
@media (max-width: 600px) {
    .single-courses .tutor-course-details-header, .single-course-bundle .tutor-course-details-header { padding: 26px 20px 24px 26px; }
    .page-id-10 .wp-block-post-title { padding: 24px 20px 28px; }
}

/* 14.8 — Tutor : les infobulles des chapitres (.tooltip-txt, cachées) dépassaient
   de 150 px à droite sur téléphone, d'où un défilement horizontal de la page
   du cours (relevé le 6/10/2026 à 375 px : 526 px de large). */
.single-courses .wp-site-blocks, .single-course-bundle .wp-site-blocks { overflow-x: clip; }
/* Le titre du cours restait gris (classe tutor-color-black de Tutor, plus précise) */
body.single-courses .tutor-course-details-header h1.tutor-course-details-title,
body.single-course-bundle .tutor-course-details-header h1.tutor-course-details-title { color: #fff !important; }

/* 7 octobre 2026 : sur téléphone, la grille de la caisse de Tutor (.tutor-row, gouttière négative)
   dépassait de 6 px à droite, et la page glissait de côté. Mesuré à 375 px. */
.tutor-checkout-page { overflow-x: clip; }