/* ============================================================
 *  extra.css — Styles globaux Coghit (thème Material)
 *  Sommaire :
 *    1. Variables de marque & palettes
 *    2. Typographie (titres, gras, citations)
 *    3. Recoloration d'icônes emoji (sécurité)
 *    4. Boutons
 *    5. Header personnalisé (nav fusionnée)
 *    6. Mise en page (sidebars, largeur contenu)
 *    7. Footer
 *    8. Bascule de thème (theme-toggle)
 *    9. Formulaires & iframes
 * ============================================================ */

/* ------------------------------------------------------------
 *  1. Variables de marque & palettes
 * ------------------------------------------------------------ */

:root {
    /* Couleurs de marque « vives » — réservées aux FONDS SOMBRES
     * (hero, header, footer), où leur contraste est excellent. */
    --coghit-brown:       #342820;  /* brun principal  */
    --coghit-brown-dark:  #1e1712;  /* fond sombre     */
    --coghit-gold:        #D4960A;  /* or vif          */
    --coghit-gold-dark:   #A87408;  /* or foncé        */
    --coghit-teal:        #0FADA8;  /* turquoise vif   */
    --coghit-teal-light:  #3ec4bf;

    /* Variantes « texte » accessibles (assombries) pour usage SUR FOND CLAIR.
     * Contraste vérifié ≥ 4,5:1 sur blanc (WCAG AA, texte normal).
     *   or  #966B00  → ~4,8:1   |   turquoise #0A7D79 → ~5,0:1            */
    --coghit-gold-accessible: #966B00;
    --coghit-teal-accessible: #0A7D79;
}

[data-md-color-scheme="default"] {
    --md-primary-fg-color:        var(--coghit-brown);
    --md-primary-fg-color--light: #F5F5F5;
    --md-primary-fg-color--dark:  var(--coghit-brown);
    /* Accent (liens au survol, etc.) : version accessible sur fond clair */
    --md-accent-fg-color:         var(--coghit-gold-accessible);

    /* Couleurs de texte de marque, déclinées pour ce thème */
    --coghit-gold-text: var(--coghit-gold-accessible);
    --coghit-teal-text: var(--coghit-teal-accessible);
    /* Or « vif » réservé au GRAND texte (titres/chiffres, gras ≥ ~24px) :
     * seuil WCAG = 3:1 → #C08700 ≈ 3,2:1, bien plus doré que l'or de corps. */
    --coghit-gold-large: #C08700;
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color:        var(--coghit-brown);
    --md-primary-fg-color--light: var(--coghit-teal-light);
    --md-primary-fg-color--dark:  var(--coghit-brown);
    /* Sur fond sombre, les couleurs vives passent largement le contraste */
    --md-accent-fg-color:         var(--coghit-gold);
    --md-default-bg-color:        var(--coghit-brown-dark);

    --coghit-gold-text: var(--coghit-gold);
    --coghit-teal-text: var(--coghit-teal);
    --coghit-gold-large: var(--coghit-gold);   /* sur fond sombre : or vif direct */
}

/* ------------------------------------------------------------
 *  2. Typographie
 *  (sans !important : .hero__title peut ainsi rester blanc)
 * ------------------------------------------------------------ */

.md-typeset h1 {
    color: var(--coghit-gold-text);
}

.md-typeset strong {
    color: var(--coghit-teal-text);
}

.md-typeset blockquote {
    border-left: 4px solid var(--coghit-gold-dark);
    font-style: italic;
}

.md-typeset blockquote p {
    color: var(--coghit-gold-text);
}

/* ------------------------------------------------------------
 *  3. Recoloration d'icônes emoji liées à la sécurité
 *     (boucliers / cadenas) en turquoise de marque.
 *     Ciblage par tracé SVG Twemoji — fragile mais ponctuel.
 * ------------------------------------------------------------ */

.md-typeset .twemoji svg path[d="M8.04 16.34c1.01-2.51 2.15-5.38 6.46-6.34 0 0-5 0-6.62 4.63 0 0-.88-.88-.88-1.88s1-3.12 3.5-3.62c.71-.13 1.5-.26 2.28-.37 1.97-.26 3.86-.54 4.22-1.26 0 0-1.5 8.5-7 8.5-.18 0-.43-.06-.67-.15L8.86 17l-.95-.33zM12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"],
.md-typeset .twemoji svg path[d="M21 11c0 5.55-3.84 10.74-9 12-5.16-1.26-9-6.45-9-12V5l9-4 9 4zm-9 10c3.75-1 7-5.46 7-9.78V6.3l-7-3.12L5 6.3v4.92C5 15.54 8.25 20 12 21m2.8-10V9.5C14.8 8.1 13.4 7 12 7S9.2 8.1 9.2 9.5V11c-.6 0-1.2.6-1.2 1.2v3.5c0 .7.6 1.3 1.2 1.3h5.5c.7 0 1.3-.6 1.3-1.2v-3.5c0-.7-.6-1.3-1.2-1.3m-1.3 0h-3V9.5c0-.8.7-1.3 1.5-1.3s1.5.5 1.5 1.3z"],
.md-typeset .twemoji svg path[d="M22.11 21.46 2.39 1.73 1.11 3 6.7 8.59c-.06.14-.13.27-.2.41H3l-1 2h4.06c-.06.33-.06.66-.06 1s0 .67.06 1H3l-1 2h4.5c1.26 3.5 4.58 6 8.5 6 1.21 0 2.36-.26 3.41-.7l2.43 2.43zM8.58 13c-.05-.33-.08-.66-.08-1s.03-.67.08-1h.53l2 2zM15 18.5c-2.5 0-4.68-1.42-5.76-3.5h3.87l3.33 3.33c-.47.1-.94.17-1.44.17M12.2 9H16l-1 2h-.8zm-1.7-1.68L8.74 5.54A8.96 8.96 0 0 1 15 3c2.3 0 4.41.87 6 2.3l-1.77 1.77A6.47 6.47 0 0 0 15 5.5c-1.74 0-3.31.7-4.5 1.82"],
.md-typeset .twemoji svg path[d="M14 15c0 1.11-.89 2-2 2a2 2 0 0 1-2-2c0-1.11.89-2 2-2a2 2 0 0 1 2 2m-.91 5c.12.72.37 1.39.72 2H6a2 2 0 0 1-2-2V10c0-1.11.89-2 2-2h1V6c0-2.76 2.24-5 5-5s5 2.24 5 5v2h1a2 2 0 0 1 2 2v3.09c-.33-.05-.66-.09-1-.09s-.67.04-1 .09V10H6v10zM9 8h6V6c0-1.66-1.34-3-3-3S9 4.34 9 6zm12.34 7.84-3.59 3.59-1.59-1.59L15 19l2.75 3 4.75-4.75z"] {
    color: var(--coghit-teal-text) !important;
}

/* ------------------------------------------------------------
 *  4. Boutons
 * ------------------------------------------------------------ */

/* Mode sombre : boutons secondaires lisibles (contour clair) */
[data-md-color-scheme="slate"] .md-button:not(.md-button--primary) {
    color: #bebfc2;
    border-color: #bebfc2;
    background-color: transparent;
}

[data-md-color-scheme="slate"] .md-button:not(.md-button--primary):hover {
    color: #F5F5F5;
    border-color: transparent;
    background-color: var(--coghit-gold);
}

/* Bouton "Envoyer" des formulaires */
.btn-primary {
    display: inline-block;
    background-color: var(--md-primary-fg-color);
    color: #fff;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 0.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: var(--md-accent-fg-color);
    transform: translateY(-1px);
}

.btn-primary:active   { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------
 *  5. Header personnalisé — nav fusionnée dans l'en-tête
 * ------------------------------------------------------------ */

/* Barre d'onglets native masquée (nav gérée dans header.html) */
.md-tabs { display: none !important; }

.md-header__inner { position: relative; }

/* Le titre occupe l'espace, la nav + le toggle restent à droite */
.md-header__title { flex-grow: 1; }

.md-header__nav-custom {
    display: flex;
    align-items: center;
    gap: 0;
}

.md-header__nav-link {
    display: inline-flex;
    align-items: center;
    height: var(--md-header-height, 3.6rem);
    padding: 0 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

/* Survol : repère discret. Page active : trait turquoise (comme les onglets ===) */
.md-header__nav-link:hover {
    color: #fff;
    border-bottom-color: color-mix(in srgb, var(--coghit-teal) 55%, transparent);
}

.md-header__nav-link--active {
    color: #fff;
    border-bottom-color: var(--coghit-teal);
}

/* Mobile : la nav custom cède la place au menu burger */
@media (max-width: 960px) {
    .md-header__nav-custom { display: none; }
}

/* En-tête du drawer : on GARDE le logo, on retire seulement le texte
 * du site_name « Coghit - Formations… » (nœud de texte → font-size: 0).
 * Le logo est une image, sa taille ne dépend pas de font-size. */
.md-nav--primary > .md-nav__title { font-size: 0; }

/* Entrée active du menu hamburger (drawer) — surbrillance turquoise.
 * Material la met en marron primaire par défaut → invisible sur fond
 * marron en mode sombre. On la rend lisible dans les deux thèmes. */
.md-nav--primary .md-nav__link--active {
    color: var(--coghit-teal-text) !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--coghit-teal);
}

/* ------------------------------------------------------------
 *  6. Mise en page — sidebars masquées, contenu centré
 * ------------------------------------------------------------ */

@media (min-width: 961px) {
    .md-sidebar--primary { display: none !important; }
}

.md-sidebar--secondary { display: none !important; }

.md-content {
    max-width: 860px;
    margin: 0 auto;
}

/* Compense la hauteur de la barre d'onglets supprimée.
 * overflow-x: hidden absorbe le débord du hero full-bleed (100vw)
 * sans rogner son contenu (qui reste dans la largeur visible). */
.md-main {
    margin-top: 0 !important;
    overflow-x: hidden;
}

/* ------------------------------------------------------------
 *  7. Footer
 * ------------------------------------------------------------ */

.md-footer-meta { background-color: var(--coghit-brown) !important; }

/* Copyright natif Material masqué (footer.html fournit le sien) */
.md-footer-copyright { display: none !important; }

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem 1rem;
    width: 100%;
}

.footer-col { flex: 1; min-width: 200px; }

.footer-col h5 {
    color: var(--coghit-gold);   /* fond footer toujours sombre → or vif OK */
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.footer-col p,
.footer-col small {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.75rem;
    line-height: 1.6;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}

.footer-col ul li { margin-bottom: 0.35rem; }

.footer-col a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: var(--coghit-gold);
    text-decoration: underline;
}

.footer-col small {
    display: block;
    margin-top: 0.75rem;
    opacity: 0.5;
}

/* Bandeau Qualiopi / liens légaux */
.md-footer-qualiopi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.3rem 0.1rem;
    padding: 1rem 1rem 0.5rem;
    width: 100%;
    font-size: 0.7rem;
}

.md-footer-qualiopi a {
    color: var(--md-footer-fg-color--light, rgba(255, 255, 255, 0.7));
    text-decoration: none;
    transition: color 0.2s ease;
}

.md-footer-qualiopi a:hover {
    color: var(--coghit-gold);
    text-decoration: underline;
}

.footer-sep {
    color: var(--md-footer-fg-color--lighter, rgba(255, 255, 255, 0.3));
    user-select: none;
}

@media (max-width: 600px) {
    .footer-columns { flex-direction: column; }
    .footer-sep     { display: none; }
}

/* ------------------------------------------------------------
 *  8. Bascule de thème (bouton emoji)
 * ------------------------------------------------------------ */

[data-md-color-scheme="default"] .theme-icon-dark  { display: none; }
[data-md-color-scheme="slate"]   .theme-icon-light { display: none; }

#theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--md-header-height, 3.6rem);
    padding: 0 0.7rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

/* ------------------------------------------------------------
 *  9. Formulaires & iframes
 * ------------------------------------------------------------ */

.form-message-success {
    background-color: color-mix(in srgb, var(--md-primary-fg-color) 15%, transparent);
    border: 1px solid var(--md-primary-fg-color);
    border-radius: 0.4rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--md-default-fg-color);
    font-size: 0.95rem;
}

.form-iframe-container {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

#contact-iframe,
#reclamation-iframe {
    width: 100%;
    min-height: 700px;
    border: none;
    background: transparent !important;
}