/**
 * ============================================================
 * Campus M365 - Les Étincelles 72
 * Fichier : assets/css/style.css
 * Rôle    : Style principal du site
 * ============================================================
 *
 * Organisation :
 * 1. Variables globales
 * 2. Base HTML
 * 3. Layout général
 * 4. Header / Navigation
 * 5. Hero accueil
 * 6. Sections / cartes
 * 7. Pages internes
 * 8. Footer
 * 9. Responsive mobile
 */

/* ============================================================
   1. VARIABLES GLOBALES
   ============================================================ */

:root {
    --color-primary: #b26c28;
    --color-primary-dark: #8d531e;
    --color-secondary: #264653;
    --color-bg: #f7f3ee;
    --color-bg-light: #ffffff;
    --color-text: #222222;
    --color-muted: #666666;
    --color-border: #e6ddd2;

    --radius-small: 10px;
    --radius-medium: 18px;
    --radius-large: 28px;

    --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.08);

    --container-width: 1120px;
}

/* ============================================================
   2. BASE HTML
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1,
h2,
h3 {
    line-height: 1.2;
    margin-top: 0;
}

p {
    margin-top: 0;
}

/* ============================================================
   3. LAYOUT GÉNÉRAL
   ============================================================ */

.container {
    width: min(100% - 32px, var(--container-width));
    margin: 0 auto;
}

.container.narrow {
    max-width: 820px;
}

.section {
    padding: 72px 0;
}

.section-muted {
    background: #efe7dc;
}

.section-heading {
    max-width: 780px;
    margin-bottom: 32px;
}

.section-heading h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin-bottom: 12px;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
}

/* ============================================================
   4. HEADER / NAVIGATION
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
}

.header-inner {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text);
}

.brand:hover {
    text-decoration: none;
}

.brand-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
}

.brand small {
    display: block;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.main-nav a {
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.95rem;
}

.main-nav a:hover {
    color: var(--color-primary);
}

/* ============================================================
   5. HERO ACCUEIL
   ============================================================ */

.hero {
    padding: 90px 0;
    background:
        radial-gradient(circle at top left, rgba(178, 108, 40, 0.18), transparent 35%),
        linear-gradient(135deg, #fffaf3, #f0e5d7);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 42px;
    align-items: center;
}

.hero h1 {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    margin-bottom: 22px;
}

.hero-text {
    font-size: 1.15rem;
    color: #444444;
    max-width: 720px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.hero-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 30px;
    box-shadow: var(--shadow-soft);
}

/* ============================================================
   BOUTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 10px 22px rgba(178, 108, 40, 0.25);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-secondary {
    background: white;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}

/* ============================================================
   6. CARTES / MODULES
   ============================================================ */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.card {
    background: white;
    padding: 24px;
    border-radius: var(--radius-medium);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

.card-icon {
    display: inline-block;
    font-size: 2rem;
    margin-bottom: 12px;
}

.card h3 {
    margin-bottom: 12px;
}

.card p {
    color: var(--color-muted);
}

.module-list {
    display: grid;
    gap: 14px;
}

.module-item {
    display: flex;
    gap: 18px;
    align-items: center;
    background: white;
    padding: 18px 20px;
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border);
}

.module-item strong {
    color: var(--color-primary);
    white-space: nowrap;
}

/* ============================================================
   LISTES
   ============================================================ */

.check-list {
    padding-left: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: 900;
}

.check-list.large li {
    padding: 14px 14px 14px 42px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}

/* ============================================================
   7. PAGES INTERNES
   ============================================================ */

.page-hero {
    padding: 70px 0;
    background: linear-gradient(135deg, #fffaf3, #efe2d1);
    border-bottom: 1px solid var(--color-border);
}

.page-hero h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.info-box,
.warning-box {
    margin-top: 32px;
    padding: 24px;
    border-radius: var(--radius-medium);
    border: 1px solid var(--color-border);
    background: white;
}

.warning-box {
    border-color: #e0b36e;
    background: #fff7eb;
}

.timeline {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 18px;
    align-items: start;
    padding: 20px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
}

.timeline-item span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    font-weight: 900;
}

.certificate-preview {
    margin-top: 28px;
    padding: 34px;
    background: white;
    border: 8px solid #efe2d1;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.cert-label {
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.cert-small {
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* ============================================================
   8. FOOTER
   ============================================================ */

.site-footer {
    padding: 32px 0;
    background: #211b16;
    color: white;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-meta {
    color: #d8c7b6;
}

.site-footer a {
    color: #ffd59f;
}

/* ============================================================
   9. RESPONSIVE MOBILE
   ============================================================ */

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px 0;
    }
}

@media (max-width: 620px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }

    .module-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .main-nav {
        gap: 12px;
    }

    .main-nav a {
        font-size: 0.9rem;
    }

    .hero {
        padding: 60px 0;
    }

    .section {
        padding: 52px 0;
    }

    .footer-inner {
        flex-direction: column;
    }
}

/* ============================================================
   DASHBOARD / AUTHENTIFICATION
   ============================================================ */

.nav-login {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-primary);
    color: white !important;
}

.nav-login:hover {
    background: var(--color-primary-dark);
    text-decoration: none;
}

.user-strip {
    padding: 8px 0;
    background: #fff7eb;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.9rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: start;
}

.dashboard-panel,
.course-box {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    padding: 24px;
}

.dashboard-panel {
    position: sticky;
    top: 110px;
}

.course-box {
    margin-bottom: 22px;
}

.course-box h3 {
    color: var(--color-secondary);
}

.module-item small {
    color: var(--color-muted);
}

@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-panel {
        position: static;
    }
}

/* ============================================================
   CORRECTIF DASHBOARD - LONGS EMAILS / TEXTES
   ============================================================
   Évite que les longues adresses mail débordent des cartes.
*/

.dashboard-main,
.dashboard-panel,
.course-box,
.module-item,
.module-item span {
    min-width: 0;
}

.dashboard-panel p,
.dashboard-panel strong,
.dashboard-panel a,
.module-item span,
.course-box p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dashboard-grid {
    grid-template-columns: minmax(250px, 280px) minmax(0, 1fr);
}

/* ============================================================
   ADMIN - TABLE UTILISATEURS
   ============================================================ */

.admin-table-wrapper {
    overflow-x: auto;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.admin-table th,
.admin-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    background: #fff7eb;
    color: var(--color-secondary);
    font-weight: 800;
}

.admin-table td {
    overflow-wrap: anywhere;
}

.badge-role {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff7eb;
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 0.85rem;
}

/* ============================================================
   CORRECTIF ADMIN - BADGES ET SELECTS
   ============================================================
   Empêche les badges comme "admin" de se couper en plusieurs lignes.
*/

.badge-role {
    white-space: nowrap;
    min-width: max-content;
}

.admin-table select {
    width: 100%;
    min-width: 110px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: white;
    font: inherit;
}

.admin-table .btn-small {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.9rem;
}

.admin-message {
    margin-bottom: 24px;
    padding: 16px 18px;
    border-radius: var(--radius-small);
    background: #eaf7ea;
    border: 1px solid #b9ddb9;
    color: #235423;
}

.admin-message.error {
    background: #fff0f0;
    border-color: #e7b5b5;
    color: #8a2222;
}

/* ============================================================
   CORRECTIF ADMIN - BOUTON ACTION
   ============================================================
   Évite que le bouton "Enregistrer" se coupe en deux lignes.
*/

.admin-table th:last-child,
.admin-table td:last-child {
    width: 140px;
    min-width: 140px;
    white-space: nowrap;
}

.admin-table .btn-small {
    min-width: 105px;
    white-space: nowrap;
    line-height: 1;
}

/* ============================================================
   ADMIN - NAVIGATION INTERNE
   ============================================================ */

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.admin-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: white;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: 700;
}

.admin-nav a:hover {
    background: var(--color-primary);
    color: white;
    text-decoration: none;
}

/* ============================================================
   ADMIN - FORMULAIRES PARCOURS / MODULES
   ============================================================ */

.admin-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 56px;
}

.admin-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    padding: 24px;
}

.admin-form {
    display: grid;
    gap: 16px;
}

.admin-form label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.admin-form input,
.admin-form textarea,
.admin-form select,
.admin-table input,
.admin-table textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: white;
    font: inherit;
}

.admin-form textarea,
.admin-table textarea {
    resize: vertical;
}

.checkbox-line {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px !important;
}

.checkbox-line input {
    width: auto;
}

.admin-section-heading {
    margin-top: 48px;
}

.admin-table code {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    background: #fff7eb;
    color: var(--color-primary-dark);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .admin-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ADMIN - FORMULAIRES PARCOURS / MODULES
   ============================================================ */

.admin-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 56px;
}

.admin-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    padding: 24px;
}

.admin-card h2 {
    margin-bottom: 18px;
}

.admin-form {
    display: grid;
    gap: 16px;
}

.admin-form label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: white;
    font: inherit;
}

.admin-form textarea {
    resize: vertical;
}

.checkbox-line {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
}

.checkbox-line input {
    width: auto;
}

.admin-section-heading {
    margin-top: 48px;
}

@media (max-width: 900px) {
    .admin-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ADMIN - TABLEAUX MODIFIABLES PARCOURS / MODULES
   ============================================================ */

.admin-edit-table input,
.admin-edit-table textarea,
.admin-edit-table select {
    width: 100%;
    min-width: 110px;
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: white;
    font: inherit;
}

.admin-edit-table textarea {
    resize: vertical;
    min-width: 260px;
}

.admin-edit-table input[type="number"] {
    min-width: 80px;
}

.admin-edit-table td {
    vertical-align: middle;
}

.admin-edit-table code {
    white-space: normal;
}

/* ============================================================
   CORRECTIF ADMIN - TABLEAUX PARCOURS / MODULES PLUS LISIBLES
   ============================================================
   Objectif :
   - éviter que les slugs se coupent verticalement ;
   - donner plus de largeur aux champs titre/description ;
   - garder un scroll horizontal propre si le tableau dépasse.
*/

.admin-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tableau modifiable plus large que son conteneur si nécessaire */
.admin-edit-table {
    min-width: 1450px;
    table-layout: fixed;
}

/* ID */
.admin-edit-table th:nth-child(1),
.admin-edit-table td:nth-child(1) {
    width: 60px;
}

/* Slug */
.admin-edit-table th:nth-child(2),
.admin-edit-table td:nth-child(2) {
    width: 170px;
}

/* Colonne 3 : titre pour les parcours, parcours pour les modules */
.admin-edit-table th:nth-child(3),
.admin-edit-table td:nth-child(3) {
    width: 220px;
}

/* Colonne 4 : description pour parcours, titre pour modules */
.admin-edit-table th:nth-child(4),
.admin-edit-table td:nth-child(4) {
    width: 320px;
}

/* Colonne 5 : rôle cible pour parcours, description pour modules */
.admin-edit-table th:nth-child(5),
.admin-edit-table td:nth-child(5) {
    width: 340px;
}

/* Colonnes ordre / actif / durée */
.admin-edit-table th:nth-child(6),
.admin-edit-table td:nth-child(6),
.admin-edit-table th:nth-child(7),
.admin-edit-table td:nth-child(7),
.admin-edit-table th:nth-child(8),
.admin-edit-table td:nth-child(8) {
    width: 130px;
}

/* Action */
.admin-edit-table th:last-child,
.admin-edit-table td:last-child {
    width: 150px;
    min-width: 150px;
    white-space: nowrap;
}

/* Slug lisible sur une seule ligne */
.admin-edit-table code,
.admin-table code {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

/* Champs plus confortables */
.admin-edit-table input,
.admin-edit-table textarea,
.admin-edit-table select {
    font-size: 0.95rem;
}

.admin-edit-table textarea {
    min-height: 92px;
}

/* Bouton action plus propre */
.admin-edit-table .btn-small {
    min-width: 115px;
    white-space: nowrap;
}

/* ============================================================
   CORRECTIF RESPONSIVE ADMIN - TABLEAUX ADAPTATIFS
   ============================================================
   Objectif :
   - sur grand écran : pas de scroll inutile ;
   - sur écran plus petit : scroll horizontal automatique ;
   - éviter que les colonnes soient trop écrasées.
*/

/* Par défaut, le tableau prend toute la largeur disponible */
.admin-edit-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
}

/* On annule les largeurs fixes précédentes */
.admin-edit-table th,
.admin-edit-table td {
    width: auto !important;
}

/* Les champs peuvent se réduire proprement */
.admin-edit-table input,
.admin-edit-table textarea,
.admin-edit-table select {
    min-width: 0;
}

/* Description un peu plus confortable */
.admin-edit-table textarea {
    min-height: 82px;
}

/* Slug lisible sans forcer une largeur énorme */
.admin-edit-table code,
.admin-table code {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Bouton propre */
.admin-edit-table .btn-small {
    min-width: 115px;
    white-space: nowrap;
}

/* Sur écrans moyens/petits, on autorise le scroll horizontal */
@media (max-width: 1100px) {
    .admin-edit-table {
        min-width: 1050px;
    }

    .admin-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Sur très petits écrans, on garde assez de largeur pour ne pas casser les champs */
@media (max-width: 760px) {
    .admin-edit-table {
        min-width: 980px;
    }
}

/* ============================================================
   ADMIN - TABLEAUX CONFORT LARGE ÉCRAN
   ============================================================
   Objectif :
   - utiliser mieux la largeur disponible sur grand écran ;
   - éviter un tableau trop comprimé ;
   - garder le scroll uniquement quand l'écran est trop petit.
*/

/* Les pages admin avec tableaux peuvent utiliser plus de largeur */
.container:has(.admin-edit-table),
.container:has(.admin-table-wrapper) {
    --container-width: 1480px;
}

/* Le tableau prend toute la largeur disponible */
.admin-table-wrapper {
    width: 100%;
    overflow-x: visible;
}

/* Tableau éditable : confortable sur grand écran */
.admin-edit-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

/* Largeurs mieux réparties pour les parcours */
.admin-edit-table th:nth-child(1),
.admin-edit-table td:nth-child(1) {
    width: 50px;
}

.admin-edit-table th:nth-child(2),
.admin-edit-table td:nth-child(2) {
    width: 140px;
}

.admin-edit-table th:nth-child(3),
.admin-edit-table td:nth-child(3) {
    width: 230px;
}

.admin-edit-table th:nth-child(4),
.admin-edit-table td:nth-child(4) {
    width: 330px;
}

.admin-edit-table th:nth-child(5),
.admin-edit-table td:nth-child(5) {
    width: 190px;
}

.admin-edit-table th:nth-child(6),
.admin-edit-table td:nth-child(6) {
    width: 110px;
}

.admin-edit-table th:nth-child(7),
.admin-edit-table td:nth-child(7) {
    width: 110px;
}

.admin-edit-table th:last-child,
.admin-edit-table td:last-child {
    width: 150px;
}

/* Champs plus lisibles */
.admin-edit-table input,
.admin-edit-table textarea,
.admin-edit-table select {
    width: 100%;
    min-width: 0;
    font-size: 0.95rem;
}

/* Les zones description doivent respirer */
.admin-edit-table textarea {
    min-height: 100px;
    line-height: 1.45;
}

/* Les slugs restent propres, sans exploser le tableau */
.admin-edit-table code,
.admin-table code {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Bouton propre */
.admin-edit-table .btn-small {
    min-width: 115px;
    white-space: nowrap;
}

/* Sur écran moyen ou petit, le scroll revient automatiquement */
@media (max-width: 1200px) {
    .admin-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-edit-table {
        min-width: 1180px;
    }
}

/* Sur mobile, on garde une largeur minimale pour ne pas casser les champs */
@media (max-width: 760px) {
    .admin-edit-table {
        min-width: 1050px;
    }
}

/* ============================================================
   CAMPUS M365 v0.4.0 - MODULES, LEÇONS, PROGRESSION
   ============================================================ */

.module-meta {
    margin-top: 18px;
    color: var(--color-muted);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-not_started {
    background: #fff7eb;
    color: var(--color-primary-dark);
}

.status-in_progress {
    background: #eef4ff;
    color: #224f9c;
}

.status-completed {
    background: #eaf7ea;
    color: #235423;
}

.module-item-dashboard {
    grid-template-columns: 80px minmax(0, 1fr) auto auto;
}

.lesson-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    padding: 28px;
    margin-bottom: 24px;
}

.lesson-content {
    font-size: 1.05rem;
}

.lesson-content h3 {
    margin-top: 24px;
}

.lesson-content ul,
.lesson-content ol {
    padding-left: 24px;
}

.lesson-video-link {
    margin: 16px 0;
    padding: 14px 16px;
    background: #fff7eb;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}

.module-actions {
    margin-top: 32px;
    display: grid;
    gap: 18px;
}

.admin-card-wide {
    margin-bottom: 48px;
}

.lessons-edit-table {
    min-width: 1500px;
}

.lessons-edit-table textarea {
    min-height: 150px;
    font-family: Consolas, Monaco, monospace;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .module-item-dashboard {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

/* ============================================================
   PARCOURS - BRIQUES DE FORMATION
   ============================================================
   Utilisé sur les pages de parcours comme :
   - Parcours bénévole
   - Futur C.A.
   - Bureau
*/

.learning-blocks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.learning-block-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    padding: 24px;
}

.learning-block-number {
    margin: 0;
    color: var(--color-primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
}

.learning-block-card h3 {
    margin-bottom: 4px;
}

.learning-block-card p {
    color: var(--color-muted);
}

.learning-block-footer {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid var(--color-border);
}

.learning-block-footer span {
    color: var(--color-muted);
    font-weight: 700;
}

@media (max-width: 1000px) {
    .learning-blocks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .learning-blocks-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CAMPUS M365 v0.5.0 - LEÇONS VIDÉO + QUIZ
   ============================================================ */

.lesson-card-v050 {
    overflow: hidden;
}

.lesson-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.lesson-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 22px 0;
    border-radius: var(--radius-medium);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-soft);
}

.lesson-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lesson-quiz {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

.quiz-form {
    display: grid;
    gap: 22px;
}

.quiz-question {
    margin: 0;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: #fffaf3;
}

.quiz-question legend {
    padding: 0 8px;
    font-weight: 800;
    color: var(--color-secondary);
}

.quiz-answer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-small);
    background: white;
    border: 1px solid var(--color-border);
    cursor: pointer;
}

.quiz-answer:hover {
    border-color: var(--color-primary);
}

.quiz-answer input {
    margin-top: 4px;
}

.status-started {
    background: #eef4ff;
    color: #224f9c;
}

@media (max-width: 700px) {
    .lesson-topline {
        flex-direction: column;
    }
}

/* ============================================================
   ACCUEIL - EXPLICATION CONNEXION M365
   ============================================================ */

.login-explain-box {
    margin-top: -28px;
}

.login-explain-box h2 {
    margin-bottom: 14px;
}

.login-explain-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 22px;
}

.login-explain-grid h3 {
    margin-bottom: 10px;
    color: var(--color-secondary);
}

@media (max-width: 760px) {
    .login-explain-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ADMIN v0.5.1 - QUESTIONS / RÉPONSES
   ============================================================ */

.quiz-admin-answer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.quiz-admin-list {
    display: grid;
    gap: 24px;
}

.quiz-admin-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    padding: 24px;
}

.quiz-admin-context {
    padding: 12px 14px;
    border-radius: var(--radius-small);
    background: #fff7eb;
    color: var(--color-muted);
    font-weight: 700;
}

.quiz-admin-answers {
    display: grid;
    gap: 14px;
}

.quiz-admin-answer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px 180px;
    gap: 14px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #fffaf3;
}

.btn-danger {
    background: #9f2d2d;
    color: white;
    border: none;
}

.btn-danger:hover {
    background: #7f2020;
    color: white;
    text-decoration: none;
}

.module-actions-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.module-actions-bottom form {
    margin: 0;
}

@media (max-width: 800px) {
    .quiz-admin-answer-grid,
    .quiz-admin-answer-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ADMIN - MASQUER LES ID TECHNIQUES
   ============================================================
   Les ID MariaDB restent bien présents en base de données.
   On les cache simplement dans l'interface pour éviter la confusion,
   car ils ne correspondent pas forcément à l'ordre d'affichage.
*/

.admin-table th:first-child,
.admin-table td:first-child {
    display: none;
}

/* Quand la colonne ID est masquée, on évite que le tableau garde
   un espace inutile ou une largeur bizarre. */
.admin-table {
    width: 100%;
}

/* ============================================================
   FORMATION - SIGNATURE NUMÉRIQUE INTERNE
   ============================================================ */

.acknowledgement-box {
    margin-top: 28px;
    padding: 24px;
    border-radius: var(--radius-medium);
    border: 1px solid #d5b17e;
    background: #fff7eb;
}

.acknowledgement-box h3 {
    color: var(--color-secondary);
}

.acknowledgement-box form {
    margin-top: 18px;
}