/**
 * Responsive & Accessibilité — cours-particuliers-nice.fr
 * Phase 4 — Brief technique CONNECT3S — 2026-05-29
 * Phase 6 — Charte Graphique Esprit Libre v5 — 2026-06-02
 * WCAG 2.1 AA
 */

/* ═══════════════════════════════════════════════════════════════
   VARIABLES — Charte Graphique Esprit Libre v5
   François Birembaux — AMOS ACE / CMH — 2025-2026
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Bordeaux — 4 déclinaisons */
    --cpn-bordeaux:        #7B2D3E; /* Vif — titres, headers */
    --cpn-bordeaux-moyen:  #7A4050; /* Survol, états actifs  */
    --cpn-bordeaux-grise:  #7A5560; /* Sous-titres forts     */
    --cpn-bordeaux-cendre: #766870; /* Décoratif uniquement  */

    /* Marines & Vert */
    --cpn-marine-chaud: #1C3557; /* Bordeaux + transition          */
    --cpn-marine-froid: #1A4060; /* Data, technique, slides        */
    --cpn-vert-sauge:   #3D6B5E; /* Points clés, synthèse          */

    /* Fonds pâles */
    --cpn-rose-pale:    #F5E8EB;
    --cpn-marine-pale:  #D6E4F0;
    --cpn-vert-pale:    #D4EAE5;
    --cpn-gris-tableau: #F2F2F2;

    /* Textes */
    --cpn-texte-corps:      #4A4A4A; /* Corps & H3              */
    --cpn-texte-sous-titre: #5A5A5A; /* Sous-titres             */
    --cpn-texte-pied:       #888888; /* Pieds de page, discrets */

    /* Bordures encadrés */
    --cpn-bordure-bordeaux: #D9B8BF;
    --cpn-bordure-marine:   #A8C4DC;
    --cpn-bordure-vert:     #A0C8BE;
}

/* ─── Focus visible amélioré ─── */
*:focus-visible {
    outline: 3px solid var(--cpn-bordeaux);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Supprimer l'outline pour la souris (on garde uniquement keyboard) */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ─── Skip link (déjà présent dans le thème Learnify, on le style) ─── */
.skip-link,
a.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--cpn-marine-chaud);
    color: #fff !important;
    padding: 12px 24px;
    z-index: 100000;
    text-decoration: none;
    font-size: 1rem;
    border-bottom-right-radius: 4px;
}

.skip-link:focus,
a.skip-link:focus {
    left: 0;
    top: 0;
}

/* ─── Cibles tactiles minimales sur mobile (≥ 44 × 44 px) ─── */
@media (max-width: 768px) {
    a,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .elementor-button,
    .elementor-nav-menu a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Espacement entre éléments tactiles */
    .elementor-nav-menu li + li {
        margin-top: 4px;
    }
}

/* ─── Images fluides (sécurité si Elementor ou le thème l'oublie) ─── */
img {
    max-width: 100%;
    height: auto;
}

/* ─── Tableaux responsive (scroll horizontal si trop larges) ─── */
.entry-content table,
.elementor-widget-table table,
.tablepress {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ─── Animations réduites pour utilisateurs sensibles ─── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Désactiver les animations Elementor */
    .elementor-animation-grow,
    .elementor-animation-shrink,
    .elementor-animation-pulse,
    .elementor-animation-bob,
    .elementor-animation-hang,
    .elementor-animation-wobble-horizontal,
    .animated {
        animation: none !important;
        transition: none !important;
    }
}

/* ─── Couleur de fond sur les champs de formulaire pour le contraste ─── */
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea,
select {
    background-color: #fff;
    color: #1a1a1a;
    border: 1px solid #767676;
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
textarea:focus,
select:focus {
    border-color: var(--cpn-bordeaux);
    box-shadow: 0 0 0 2px rgba(123, 45, 62, 0.20);
}

/* ─── Assurer la visibilité du contenu screen-reader-text ─── */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    clip: auto !important;
    clip-path: none;
    color: var(--cpn-marine-chaud);
    display: block;
    font-size: .875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ─── Menu fixe — toujours visible au scroll ────────────────── */
/* position:sticky bloqué par overflow-x:hidden sur l'ancêtre → fixed + compensation JS */
.ekit-template-content-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
}

/* Pré-compensation header fixe en CSS (évite le flash JS au chargement).
   La valeur 82px correspond à la hauteur du header desktop.
   Le JS dans wp_footer ajuste la valeur précise au resize. */
body:not(.admin-bar) {
    padding-top: 82px;
}
body.admin-bar {
    padding-top: 114px; /* 82px header + 32px admin bar */
}
@media (max-width: 782px) {
    body.admin-bar { padding-top: 128px; } /* admin bar mobile = 46px */
}

/* ─── CTA "1er entretien en visio" — pleine largeur ─────────── */
/* Pattern strict : section avec UNE col-50 vide ET UNE col-50 CTA
   (évite de toucher les sections homepage où les deux cols ont du contenu) */
.elementor-top-section:has(.elementor-top-column.elementor-col-50:not(:has(.elementor-element-populated))):has(.elementor-widget-jkit_icon_box)
    .elementor-top-column.elementor-col-50:not(:has(.elementor-element-populated)) {
    display: none;
}
.elementor-top-section:has(.elementor-top-column.elementor-col-50:not(:has(.elementor-element-populated))):has(.elementor-widget-jkit_icon_box)
    .elementor-top-column.elementor-col-50:has(.elementor-widget-jkit_icon_box) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   Page 398 — Galerie moderne : hover zoom + lightbox
   CONNECT3S — 2026-05-30
   ═══════════════════════════════════════════════════════════════ */

/* Curseur zoom-in sur les images de la mosaïque */
.cpn-mosaic__item {
    cursor: zoom-in;
}

/* ─── Lightbox overlay ─────────────────────────────────────── */
#cpn-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(5, 5, 5, 0.94);
    align-items: center;
    justify-content: center;
}

#cpn-lightbox.cpn-lb-open {
    display: flex;
    animation: cpn-lb-in 0.22s ease forwards;
}

@keyframes cpn-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#cpn-lightbox__img {
    max-width: 88vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
    animation: cpn-img-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    cursor: default;
    display: block;
}

@keyframes cpn-img-in {
    from { transform: scale(0.93); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Bouton fermer */
#cpn-lb-close {
    position: fixed;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
    z-index: 10;
}
#cpn-lb-close:hover { border-color: #fff; background: rgba(255,255,255,0.18); }

/* Boutons prev / next */
.cpn-lb-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
    z-index: 10;
}
.cpn-lb-nav:hover { border-color: #fff; background: rgba(255,255,255,0.18); }
#cpn-lb-prev { left: 16px; }
#cpn-lb-next { right: 16px; }

/* Compteur */
#cpn-lb-counter {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font: 13px/1 system-ui, sans-serif;
    letter-spacing: 2px;
    z-index: 10;
}

/* Caption (alt text) */
#cpn-lb-caption {
    position: fixed;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.82);
    font: italic 14px/1.4 Georgia, serif;
    text-align: center;
    max-width: 60ch;
    z-index: 10;
}

@media (max-width: 767px) {
    .cpn-lb-nav { display: none; }
    #cpn-lightbox__img { max-width: 96vw; max-height: 80vh; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    #cpn-lightbox__img,
    #cpn-lightbox.cpn-lb-open { animation: none; }
    .cpn-mosaic__item img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Page 398 — Galerie mosaïque (rebuilt by JS)
   ═══════════════════════════════════════════════════════════════ */
.cpn-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 230px;
    gap: 5px;
    width: 100%;
    padding: 20px 0 0;
}
@media (max-width: 1024px) {
    .cpn-mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }
}
@media (max-width: 767px) {
    .cpn-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
}

.cpn-mosaic__item {
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
    background: #0d0d0d;
}
.cpn-mosaic__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cpn-mosaic__item:hover img { transform: scale(1.07); }
.cpn-mosaic__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 38px;
    opacity: 0;
    transition: opacity 0.3s, background-color 0.3s;
    pointer-events: none;
}
.cpn-mosaic__item:hover::after { opacity: 1; background-color: rgba(0,0,0,0.3); }

/* Spans dynamiques (assigned by JS based on aspect ratio) */
.cpn-mosaic__item--wide { grid-column: span 2; }
.cpn-mosaic__item--tall { grid-row: span 2; }
.cpn-mosaic__item--feature { grid-column: span 2; grid-row: span 2; }

/* Caption artiste en bas de la galerie */
.cpn-mosaic + .cpn-mosaic-credit {
    text-align: center;
    font-style: italic;
    font-size: 0.82rem;
    color: var(--cpn-texte-pied);
    margin-top: 10px;
    padding-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   CHARTE GRAPHIQUE — Couleurs globales site
   Esprit Libre v5 — François Birembaux — 2026-06-02
   ═══════════════════════════════════════════════════════════════ */

/* ─── Typographie globale — corps de texte ─── */
body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
p {
    color: var(--cpn-texte-corps);
}

/* ─── Headings — H1 à H3 en bordeaux, H4-H6 en quasi-noir ─── */
h1, h2,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
    color: var(--cpn-bordeaux);
    font-family: Arial, sans-serif;
}

h3 {
    color: var(--cpn-texte-corps);
    font-family: Arial, sans-serif;
}

h4, h5, h6 {
    color: var(--cpn-texte-sous-titre);
    font-family: Arial, sans-serif;
}

/* ─── Liens — bordeaux vif, hover bordeaux moyen ─── */
a,
.elementor-widget a {
    color: var(--cpn-bordeaux);
    text-decoration-color: var(--cpn-bordure-bordeaux);
}

a:hover,
a:focus,
.elementor-widget a:hover {
    color: var(--cpn-bordeaux-moyen);
    text-decoration-color: var(--cpn-bordeaux-moyen);
}

/* ─── Boutons — bordeaux fond, blanc texte ─── */
.elementor-button,
.elementor-button-wrapper .elementor-button,
input[type="submit"],
button[type="submit"] {
    background-color: var(--cpn-bordeaux) !important;
    border-color: var(--cpn-bordeaux) !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    transition: background-color 0.2s, border-color 0.2s;
}

.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--cpn-bordeaux-moyen) !important;
    border-color: var(--cpn-bordeaux-moyen) !important;
}

/* ─── Navigation / Menu ─── */
.elementor-nav-menu .elementor-item,
.elementor-nav-menu .elementor-sub-item {
    color: var(--cpn-bordeaux);
    font-family: Arial, sans-serif;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-nav-menu .elementor-sub-item:hover {
    color: var(--cpn-bordeaux-moyen);
}

/* Indicateur actif / ligne sous item menu */
.elementor-nav-menu .elementor-item:after,
.elementor-nav-menu--indicator-underline .elementor-item:after {
    background-color: var(--cpn-bordeaux);
}

/* Sous-menu fond marine chaud */
.elementor-nav-menu .sub-menu {
    background-color: var(--cpn-marine-chaud);
}
.elementor-nav-menu .sub-menu .elementor-sub-item {
    color: #fff;
}
.elementor-nav-menu .sub-menu .elementor-sub-item:hover {
    color: var(--cpn-rose-pale);
}

/* ─── Header fixe — fond marine chaud si fond transparent ─── */
.ekit-template-content-header:not([style*="background"]) {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(28, 53, 87, 0.10);
}

/* ─── Encadrés de contenu — À retenir / Info / Points clés ─── */

/* À RETENIR — bordeaux */
.cpn-encadre-retenir,
.wp-block-info.is-style-retenir {
    background: var(--cpn-rose-pale);
    border-left: 4px solid var(--cpn-bordeaux);
    padding: 14px 18px;
    margin: 20px 0;
    border-radius: 0 4px 4px 0;
    color: var(--cpn-texte-corps);
}
.cpn-encadre-retenir strong,
.cpn-encadre-retenir .cpn-label {
    color: var(--cpn-bordeaux);
    font-size: 0.85em;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* INFO — marine chaud */
.cpn-encadre-info,
.wp-block-info.is-style-info {
    background: var(--cpn-marine-pale);
    border-left: 4px solid var(--cpn-marine-chaud);
    padding: 14px 18px;
    margin: 20px 0;
    border-radius: 0 4px 4px 0;
    color: var(--cpn-texte-corps);
}
.cpn-encadre-info strong,
.cpn-encadre-info .cpn-label {
    color: var(--cpn-marine-chaud);
    font-size: 0.85em;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* POINTS CLÉS — vert sauge */
.cpn-encadre-cles,
.wp-block-info.is-style-cles {
    background: var(--cpn-vert-pale);
    border-left: 4px solid var(--cpn-vert-sauge);
    padding: 14px 18px;
    margin: 20px 0;
    border-radius: 0 4px 4px 0;
    color: var(--cpn-texte-corps);
}
.cpn-encadre-cles strong,
.cpn-encadre-cles .cpn-label {
    color: var(--cpn-vert-sauge);
    font-size: 0.85em;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── Tableaux — fiche de suivi ─── */
.elementor-widget-table table thead,
.tablepress thead tr,
.entry-content table thead tr {
    background-color: var(--cpn-bordeaux);
    color: #fff;
}

.elementor-widget-table table tbody tr:nth-child(even),
.tablepress tbody tr:nth-child(even),
.entry-content table tbody tr:nth-child(even) {
    background-color: var(--cpn-gris-tableau);
}

.elementor-widget-table table,
.tablepress,
.entry-content table {
    border-color: var(--cpn-bordure-bordeaux);
}

/* ─── Séparateurs / dividers ─── */
.elementor-divider-separator {
    border-color: var(--cpn-bordeaux) !important;
}

/* ─── Footer ─── */
.ekit-template-content-footer,
footer {
    color: var(--cpn-texte-pied);
    background-color: var(--cpn-marine-chaud);
}

footer a,
.ekit-template-content-footer a {
    color: var(--cpn-rose-pale);
}
footer a:hover,
.ekit-template-content-footer a:hover {
    color: #fff;
}

/* ─── Formulaires Contact Form 7 ─── */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    border: 1px solid var(--cpn-bordure-bordeaux);
    font-family: Arial, sans-serif;
    color: var(--cpn-texte-corps);
}

.wpcf7 input[type="submit"] {
    background-color: var(--cpn-bordeaux) !important;
    color: #fff !important;
    border: none !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700;
    padding: 12px 28px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.wpcf7 input[type="submit"]:hover {
    background-color: var(--cpn-bordeaux-moyen) !important;
}

/* Message d'envoi réussi */
.wpcf7 .wpcf7-response-output {
    border-color: var(--cpn-vert-sauge);
    color: var(--cpn-vert-sauge);
}

/* ─── Badges / tags ─── */
.post-tag,
.tag-cloud-link,
.wp-block-tag-cloud a {
    background: var(--cpn-rose-pale);
    color: var(--cpn-bordeaux);
    border: 1px solid var(--cpn-bordure-bordeaux);
}

.post-tag:hover,
.tag-cloud-link:hover,
.wp-block-tag-cloud a:hover {
    background: var(--cpn-bordeaux);
    color: #fff;
}

/* ─── Barre de défilement (Chrome/Edge) ─── */
::-webkit-scrollbar-thumb {
    background: var(--cpn-bordeaux);
    border-radius: 4px;
}
::-webkit-scrollbar-track {
    background: var(--cpn-gris-tableau);
}

/* ─── Sélection texte ─── */
::selection {
    background: var(--cpn-rose-pale);
    color: var(--cpn-bordeaux);
}
::-moz-selection {
    background: var(--cpn-rose-pale);
    color: var(--cpn-bordeaux);
}

/* ─── Hero homepage — sous-titre blanc (#ECECEC → #FFFFFF) ─── */
.elementor-158 .elementor-element.elementor-element-3e139f2e,
.elementor-158 .elementor-element.elementor-element-3e139f2e p {
    color: #ffffff !important;
}