/*
 * ELECTROPRO 56 — Responsive & Boutique
 * Fichier : ep56-responsive.css
 * Version : 2.2.0 — 1 avril 2026
 *
 * Couvre :
 *   1. Variables CSS globales
 *   2. Resets & utilitaires
 *   3. Header — icône panier + navigation
 *   3b. Topbar — styles de base (tous écrans)
 *   3c. Mobile header redesign (≤ 767 px) — fond #071725, icônes bleues, texte blanc
 *   4. Page Boutique /shop/ — cartes produits
 *   5. Breakpoints responsive :
 *        mobile portrait   (≤ 479 px)
 *        mobile paysage    (480 – 767 px)
 *        tablette          (768 – 1023 px)
 *        desktop moyen     (1024 – 1279 px)
 *        grand écran       (≥ 1280 px)
 *   6. Accessibilité & impression
 */


/* =============================================================================
   1. VARIABLES CSS
   ============================================================================= */
:root {
    --ep56-blue:       #00AEDD;
    --ep56-dark:       #1a1a2e;
    --ep56-grey-light: #f8f9fa;
    --ep56-grey-text:  #555555;
    --ep56-white:      #ffffff;
    --ep56-border:     #e0e0e0;
    --ep56-radius:     10px;
    --ep56-shadow:     0 4px 18px rgba(0, 0, 0, 0.10);
    --ep56-transition: 0.25s ease;
}


/* =============================================================================
   2. RESETS & UTILITAIRES GLOBAUX
   ============================================================================= */

/* Images fluides */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Empêche le débordement horizontal */
body,
.wp-site-blocks {
    overflow-x: hidden;
}

/* Améliore le rendu texte sur mobile */
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Assure que les boutons font au moins 44 px de haut (accessibilité WCAG 2.5.5) */
.wp-block-button__link {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding-left: 22px !important;
    padding-right: 22px !important;
    line-height: 1.3 !important;
}

/* Liens dans les groupes de contenu */
.wp-block-group a:not(.wp-block-button__link) {
    color: var(--ep56-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.wp-block-group a:not(.wp-block-button__link):hover {
    text-decoration: none;
}

/* Séparateurs bleus */
hr.wp-block-separator.has-background {
    border: none;
}

/* Titres sans coupure de mot intempestive */
h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading {
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.25;
}


/* =============================================================================
   3. HEADER — Icône panier & navigation
   ============================================================================= */

/* Colonne icônes (loupe + panier) : centrage vertical des deux icônes */
.header-search-col {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Loupe — icône non-cliquable */
#section-g0b304e .gutentor-element-icon-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4px;
    cursor: default;
    opacity: 0.75;
}

/* Lien panier — reset + transition */
a.ep56-cart-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: inherit;
    border-radius: 50%;
    padding: 6px;
    position: relative;
    transition:
        background-color 0.22s ease,
        transform      0.22s ease,
        box-shadow     0.22s ease;
}

/* Hover : fond bleu translucide + légère élévation */
a.ep56-cart-link:hover,
a.ep56-cart-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px) scale(1.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    outline: none;
}

/* Active : légère dépression */
a.ep56-cart-link:active {
    transform: translateY(0) scale(0.96);
    box-shadow: none;
}

/* Icône panier — taille et couleur */
#section-g8672fe .gutentor-element-icon-box i {
    font-size: 20px;
    color: #ffffff;
    transition: color 0.22s ease;
    display: block;
}
a.ep56-cart-link:hover #section-g8672fe .gutentor-element-icon-box i,
a.ep56-cart-link:focus-visible #section-g8672fe .gutentor-element-icon-box i {
    color: var(--ep56-blue);
}

/* Animation pulse discrète au chargement (attire l'attention une seule fois) */
@keyframes ep56-cart-pulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.18); }
    60%  { transform: scale(0.93); }
    100% { transform: scale(1); }
}
#section-g8672fe {
    animation: ep56-cart-pulse 0.7s ease 1.5s both;
}

/* Navigation FSE — améliorations globales */
.wp-block-navigation .wp-block-navigation-item__content {
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s ease;
}
/* Soulignement animé au survol des liens du menu */
.wp-block-navigation .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    right: 50%;
    height: 2px;
    background-color: var(--ep56-blue);
    border-radius: 2px;
    transition: left 0.25s ease, right 0.25s ease;
}
.wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
    left: 0;
    right: 0;
}
/* Page courante : couleur bleue */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
    color: var(--ep56-blue) !important;
}


/* =============================================================================
   3b. TOPBAR — Styles de base (tous écrans)
   ============================================================================= */

/* Hauteur minimale et alignement vertical */
.ac-maintenance-topbar-sec {
    min-height: 42px !important;
}

/* La rangée topbar = flex horizontal, sans retour à la ligne par défaut */
.topbar_row {
    align-items: center !important;
    row-gap: 0 !important;
}

/* Pictos (email.png, phone.png, location.png) — taille fixe + non-déformable */
.topbar-mail-col .wp-block-image img,
.topbar-call-col .wp-block-image img,
.topbar-location-col .wp-block-image img {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* Groupe icône + texte dans chaque colonne : centrage vertical + gap uniforme */
.topbar-mail-col .wp-block-group,
.topbar-call-col .wp-block-group,
.topbar-location-col .wp-block-group {
    gap: 7px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* Textes de la topbar : taille, pas de retour à la ligne */
.topbar-mail-col .gutentor-text,
.topbar-call-col .gutentor-text,
.topbar-location-col .gutentor-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
    line-height: 1.2;
}

/* Liens de la topbar : pas de décoration */
.topbar-mail-col a.gutentor-element-advanced-text-link,
.topbar-call-col a.gutentor-element-advanced-text-link,
.topbar-location-col a.gutentor-element-advanced-text-link {
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}
.topbar-mail-col a.gutentor-element-advanced-text-link:hover,
.topbar-call-col a.gutentor-element-advanced-text-link:hover,
.topbar-location-col a.gutentor-element-advanced-text-link:hover {
    opacity: 0.8;
}

/* Colonne icônes sociales : alignement à droite */
.social-icon-col {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}


/* =============================================================================
   3c. MOBILE HEADER — Smartphones (≤ 767 px)
       Fond sombre #071725 | Icônes topbar bleues | Texte blanc | Icônes sociales blanches
   ============================================================================= */
@media screen and (max-width: 767px) {

    /* ── Wrapper logo + topbar : fond sombre, empilement vertical ── */
    .ac-maintenance-topbar-header-sec > .wp-block-columns {
        background-color: #071725 !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* ── Logo : pleine largeur, fond transparent, aligné à gauche ── */
    .logo-div {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        background-color: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px 16px !important;
    }
    .logo-div .wp-block-image { margin: 0; }
    .logo-div .wp-block-image img {
        max-height: 44px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* La colonne 80% → 100% */
    .ac-maintenance-topbar-header-sec > .wp-block-columns > .wp-block-column:not(.logo-div) {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* ── Topbar : affichée + fond transparent (override display:none section 5) ── */
    .ac-maintenance-topbar-sec {
        display: block !important;
        min-height: auto !important;
    }
    .ac-maintenance-topbar-sec .wp-block-cover__background { display: none !important; }
    .ac-maintenance-topbar-sec .wp-block-cover__inner-container { padding: 0 !important; }
    .ac-maintenance-topbar-sec .wp-block-group.container {
        padding: 0 !important;
        max-width: none !important;
    }

    /* ── topbar_row : infos empilées verticalement ── */
    .topbar_row {
        flex-direction: column !important;
        gap: 5px !important;
        padding: 8px 16px 12px !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
    }

    /* ── Toutes les colonnes info topbar : visibles en pleine largeur ── */
    .topbar-mail-col,
    .topbar-call-col,
    .topbar-location-col {
        display: flex !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
    }

    /* ── Pictos PNG (email/phone/location) → couleur bleue #00AEDD ── */
    .topbar-mail-col .wp-block-image img,
    .topbar-call-col .wp-block-image img,
    .topbar-location-col .wp-block-image img {
        filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(162deg) brightness(1.05) !important;
        width: 15px !important;
        height: 15px !important;
        min-width: 15px;
    }

    /* ── Textes topbar → blanc ── */
    .topbar-mail-col .gutentor-text,
    .topbar-call-col .gutentor-text,
    .topbar-location-col .gutentor-text,
    .topbar-mail-col .gutentor-text a,
    .topbar-call-col .gutentor-text a,
    .topbar-location-col .gutentor-text a {
        color: #ffffff !important;
        font-size: 12px !important;
        white-space: normal !important;
    }

    /* ── Colonne icônes sociales : centrée, pleine largeur ── */
    .social-icon-col {
        display: flex !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        padding-top: 8px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    /* ── Icônes sociales Stackable → blanches ── */
    .social-icon-col .stk-button .stk--inner-svg svg,
    .social-icon-col .stk-button .stk--inner-svg svg path,
    .social-icon-col .stk-button .stk--inner-svg svg :is(g, path, rect, polygon, ellipse),
    .stk-block-content.stk-button-group .stk-button .stk--inner-svg svg,
    .stk-block-content.stk-button-group .stk-button .stk--inner-svg svg :is(g, path, rect, polygon, ellipse) {
        fill: #ffffff !important;
    }

    /* ── Barre de navigation : fond sombre + hamburger à gauche ── */
    .heads-are-up {
        background-color: #071725 !important;
        border-radius: 0 !important;
    }
    .header-menu-col .wp-block-navigation {
        justify-content: flex-start !important;
    }
    .wp-block-navigation__responsive-container-open {
        order: -1;
    }
}


/* =============================================================================
   4. PAGE BOUTIQUE /shop/
   ============================================================================= */

/* Fond légèrement grisé pour la zone grille */
.ep56-shop-grid {
    background-color: var(--ep56-grey-light);
}

/* Carte produit — conteneur */
.ep56-product-card .wp-block-group {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--ep56-shadow);
    transition: transform var(--ep56-transition), box-shadow var(--ep56-transition);
    border: 1px solid var(--ep56-border);
    border-radius: var(--ep56-radius);
}

/* Effet survol */
.ep56-product-card .wp-block-group:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 174, 221, 0.20);
}

/* Emoji icône produit */
.ep56-product-card p[style*="48px"] {
    line-height: 1;
    margin-bottom: 8px !important;
}

/* Référence produit */
.ep56-product-card p[style*="666666"] {
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 11px !important;
    margin-bottom: 0 !important;
}

/* Séparateur court dans les cartes */
.ep56-product-card hr.wp-block-separator {
    max-width: 56px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Prix mis en valeur */
.ep56-product-card p[style*="font-weight:700"],
.ep56-product-card p[style*="fontWeight"] {
    margin-top: 14px !important;
    margin-bottom: 6px !important;
}

/* Hero boutique — dégradé custom */
.ep56-hero-shop {
    background-image: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 60%, #003a52 100%) !important;
}

/* Gap standard entre les colonnes produits */
.ep56-shop-grid .wp-block-columns {
    gap: 24px;
}


/* =============================================================================
   5. RESPONSIVE — Mobile portrait  (≤ 479 px)
   ============================================================================= */
@media screen and (max-width: 479px) {

    /* ── Typographie ── */
    h1.wp-block-heading { font-size: 1.65rem !important; line-height: 1.2 !important; }
    h2.wp-block-heading { font-size: 1.3rem !important;  line-height: 1.25 !important; }
    h3.wp-block-heading { font-size: 1.05rem !important; }

    .wp-block-cover__inner-container p[style*="font-size:20px"],
    .wp-block-cover__inner-container p[style*="font-size:18px"] {
        font-size: 14px !important;
    }
    .wp-block-cover__inner-container p[style*="font-size:16px"] {
        font-size: 13px !important;
    }

    /* ── Hero banners ── */
    .wp-block-cover.alignfull {
        min-height: 320px !important;
    }
    .wp-block-cover.ep56-hero-shop {
        min-height: 260px !important;
    }
    .wp-block-cover__inner-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* ── Colonnes : tout en colonne unique ── */
    .wp-block-columns {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
    }

    /* ── Espacement des groupes ── */
    .wp-block-group[style*="padding-top:60px"],
    .wp-block-group[style*="padding-top:50px"] {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    .wp-block-group[style*="padding-left:20px"] {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* ── Boutons ── */
    .wp-block-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .wp-block-button {
        width: 100%;
    }
    .wp-block-button__link {
        width: 100%;
        text-align: center !important;
        font-size: 15px !important;
        padding: 12px 16px !important;
    }

    /* ── Topbar : comportement géré en section 3c (fond sombre + visible) ── */

    /* ── Icône panier en mobile : position centrale dans la bande bleue ── */
    .header-search-col {
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: center !important;
        padding: 6px 0 !important;
    }
    #section-g0b304e { display: none; } /* masquer loupe sur mobile */
    a.ep56-cart-link { padding: 8px; }
    #section-g8672fe .gutentor-element-icon-box i { font-size: 22px; }

    /* ── Navigation ── */
    header nav ul {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    header nav ul li a {
        font-size: 13px !important;
    }

    /* ── Boutique : cartes empilées ── */
    .ep56-shop-grid .wp-block-columns {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .ep56-shop-grid .wp-block-column {
        flex-basis: 100% !important;
    }
    .ep56-product-card .wp-block-group {
        margin-bottom: 0;
    }

    /* ── Tableaux horizontalement scrollables ── */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* =============================================================================
   6. RESPONSIVE — Mobile paysage / Phablet  (480 px – 767 px)
   ============================================================================= */
@media screen and (min-width: 480px) and (max-width: 767px) {

    /* ── Typographie ── */
    h1.wp-block-heading { font-size: 2rem !important; }
    h2.wp-block-heading { font-size: 1.5rem !important; }
    h3.wp-block-heading { font-size: 1.15rem !important; }

    .wp-block-cover__inner-container p[style*="font-size:20px"] {
        font-size: 16px !important;
    }

    /* ── Hero ── */
    .wp-block-cover.alignfull {
        min-height: 380px !important;
    }
    .wp-block-cover__inner-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* ── Colonnes : 2 colonnes ── */
    .wp-block-columns {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    .wp-block-column {
        flex-basis: calc(50% - 10px) !important;
        min-width: calc(50% - 10px);
    }
    /* Quand il y a 3+ colonnes, tout à 100% */
    .wp-block-columns .wp-block-column:nth-child(3),
    .wp-block-columns .wp-block-column:nth-child(4) {
        flex-basis: 100% !important;
    }

    /* ── Boutique : 2 colonnes ── */
    .ep56-shop-grid .wp-block-columns {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    .ep56-shop-grid .wp-block-column {
        flex-basis: calc(50% - 10px) !important;
        min-width: 0;
    }

    /* ── Boutons ── */
    .wp-block-buttons {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    /* ── Espacement ── */
    .wp-block-group[style*="padding-top:60px"] {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* ── Topbar paysage : comportement géré en section 3c (fond sombre + visible) ── */

    /* ── Navigation ── */
    header nav ul {
        gap: 14px !important;
    }
    header nav ul li a {
        font-size: 13px !important;
    }
}


/* =============================================================================
   7. RESPONSIVE — Tablette portrait & paysage  (768 px – 1023 px)
   ============================================================================= */
@media screen and (min-width: 768px) and (max-width: 1023px) {

    /* ── Typographie ── */
    h1.wp-block-heading { font-size: 2.2rem !important; }
    h2.wp-block-heading { font-size: 1.75rem !important; }

    /* ── Hero ── */
    .wp-block-cover.alignfull[style*="min-height:600"] {
        min-height: 480px !important;
    }

    /* ── Colonnes 3 → 2 sur tablette ── */
    .wp-block-columns {
        flex-wrap: wrap !important;
    }
    /* 3 colonnes égales → 2 + 1 centré */
    .wp-block-columns > .wp-block-column:nth-child(3):last-child {
        flex-basis: 60% !important;
        margin: 0 auto;
    }

    /* ── Boutique : 2 colonnes ── */
    .ep56-shop-grid .wp-block-columns {
        flex-wrap: wrap !important;
        gap: 20px !important;
    }
    .ep56-shop-grid .wp-block-column {
        flex-basis: calc(50% - 12px) !important;
    }

    /* ── Topbar : 2 rangées sur tablette ── */
    /* Rangée unique mais réorganisée : email + tel + social, localisation masquée */
    .topbar-location-col {
        display: none !important;  /* trop étroit pour tenir sur tablette */
    }
    .topbar_row {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    .topbar-mail-col {
        flex-basis: auto !important;
        flex-grow: 1 !important;
        min-width: 0;
    }
    .topbar-call-col {
        flex-basis: auto !important;
        flex-grow: 1 !important;
        min-width: 0;
    }
    .social-icon-col {
        flex-basis: auto !important;
        flex-shrink: 0;
        justify-content: flex-end !important;
    }
    /* Textes réduits */
    .topbar-mail-col .gutentor-text,
    .topbar-call-col .gutentor-text {
        font-size: 12px !important;
    }
    /* Pictos légèrement réduits */
    .topbar-mail-col .wp-block-image img,
    .topbar-call-col .wp-block-image img {
        width: 15px !important;
        height: 15px !important;
    }
    /* Icônes sociales : gap réduit */
    .stk-ab00a7f .stk-inner-blocks {
        column-gap: 10px !important;
    }

    /* ── Icône panier sur tablette ── */
    .header-search-col {
        gap: 8px !important;
    }
    #section-g8672fe .gutentor-element-icon-box i { font-size: 18px; }

    /* ── Navigation ── */
    header nav ul {
        gap: 16px !important;
        flex-wrap: wrap !important;
    }
    header nav ul li a {
        font-size: 13px !important;
    }

    /* ── Espacement ── */
    .wp-block-group[style*="padding-top:60px"] {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* ── Boutons ── */
    .wp-block-buttons {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}


/* =============================================================================
   8. RESPONSIVE — Desktop moyen  (1024 px – 1279 px)
   ============================================================================= */
@media screen and (min-width: 1024px) and (max-width: 1279px) {

    /* ── Navigation ── */
    header nav ul {
        gap: 20px !important;
    }
    header nav ul li a {
        font-size: 14px !important;
    }

    /* ── Boutique ── */
    .ep56-shop-grid .wp-block-columns {
        gap: 20px !important;
    }
}


/* =============================================================================
   9. RESPONSIVE — Grand écran  (≥ 1280 px)
   ============================================================================= */
@media screen and (min-width: 1280px) {

    /* Hauteur uniforme des cartes produit */
    .ep56-product-card .wp-block-group {
        min-height: 440px;
    }
}


/* =============================================================================
   10. ACCESSIBILITÉ & IMPRESSION
   ============================================================================= */

/* Focus visible — navigation clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 3px solid var(--ep56-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Réduction des animations pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
    .ep56-product-card .wp-block-group,
    .ep56-product-card .wp-block-group:hover {
        transition: none !important;
        transform: none !important;
    }
    #section-g8672fe {
        animation: none !important;
    }
    a.ep56-cart-link {
        transition: none !important;
    }
    a.ep56-cart-link:hover {
        transform: none !important;
    }
}

/* Mode sombre système */
@media (prefers-color-scheme: dark) {
    /* Les héros ont déjà un fond sombre — pas de changement majeur */
    /* On améliore juste le contraste des cartes boutique */
    .ep56-product-card .wp-block-group.has-background[style*="ffffff"] {
        background-color: #1e1e2e !important;
        border-color: #333 !important;
    }
    .ep56-product-card .wp-block-group p[style*="444444"],
    .ep56-product-card .wp-block-group p[style*="555555"] {
        color: #ccc !important;
    }
    .ep56-product-card .wp-block-group h3 {
        color: #ffffff !important;
    }
}

/* =============================================================================
   7. FORMULAIRE DE CONTACT (Contact Form 7)
   ============================================================================= */

/* Champs texte, email, tel, url */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-url,
.wpcf7-form .wpcf7-number,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"] {
    width: 100%;
    padding: 12px 16px;
    background-color: #f4f7fa;
    border: 2px solid #eaf2f8;
    border-radius: 4px;
    font-size: 14px;
    color: #0d1b2a;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

/* Textarea */
.wpcf7-form .wpcf7-textarea,
.wpcf7-form textarea {
    width: 100%;
    min-height: 140px;
    padding: 12px 16px;
    background-color: #f4f7fa;
    border: 2px solid #eaf2f8;
    border-radius: 4px;
    font-size: 14px;
    color: #0d1b2a;
    line-height: 1.6;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
}

/* Focus : bordure bleue + légère lueur */
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-tel:focus,
.wpcf7-form .wpcf7-textarea:focus,
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    border-color: #00AEDD;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(0, 174, 221, 0.15);
}

/* Labels */
.wpcf7-form label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #0d1b2a;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* Espacement entre les champs */
.wpcf7-form p {
    margin-bottom: 18px !important;
}

/* Bouton d'envoi */
.wpcf7-form .wpcf7-submit,
.wpcf7-form input[type="submit"] {
    display: inline-block;
    padding: 13px 36px;
    background-color: #00AEDD;
    color: #ffffff !important;
    border: none;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.22s ease, transform 0.15s ease;
    margin-top: 6px;
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form input[type="submit"]:hover {
    background-color: #0090bb;
    transform: translateY(-1px);
}

/* Messages de validation */
.wpcf7-not-valid-tip {
    font-size: 12px;
    color: #c0392b;
    margin-top: 4px;
    display: block;
}
.wpcf7-response-output {
    margin-top: 16px !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    border-left: 4px solid #00AEDD !important;
    background: #f0faff !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* =============================================================================
   9. PAGE ACCUEIL (MAINTENANCE) — masquer le menu de navigation
   ============================================================================= */

/* Sur la page d'accueil (body.home), on cache la barre nav + sticky ;
   le topbar reste visible si besoin, seul le bloc heads-are-up est masqué */
body.home .heads-are-up {
    display: none !important;
}

/* =============================================================================
   8. MENU STICKY — fond visible sur page claire / blanche
   ============================================================================= */

/* Quand l'utilisateur scroll > 100px, .sticky est ajoutée par jQuery sur
   .ac-maintenance-header-sec — on remplace le fond blanc par un fond sombre
   et on arrondit les 4 coins (20px) */
.sticky {
    background-color: rgba(7, 43, 77, 0.93) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30) !important;
    border-top-left-radius:    20px !important;
    border-top-right-radius:   20px !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius:20px !important;
}

/* Les liens de navigation restent blancs sur fond sombre */
.sticky .wp-block-navigation .wp-block-navigation-item__content,
.sticky .wp-block-navigation .wp-block-navigation-item__label {
    color: #ffffff !important;
}

/* Couleur active/hover : bleu électro */
.sticky .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.sticky .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
    color: #00AEDD !important;
}

/* Soulignement animé : conserver la couleur bleue */
.sticky .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.sticky .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
    background-color: #00AEDD;
    width: 100%;
}

/* Icônes (loupe, panier) dans le sticky */
.sticky .header-search-col {
    background-color: #00AEDD !important;
}

/* Impression */
@media print {
    header,
    footer,
    #wpadminbar,
    .wp-block-buttons,
    .ep56-hero-shop {
        display: none !important;
    }
    body, * {
        font-size: 12pt;
        color: #000 !important;
        background: #fff !important;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
    .ep56-product-card .wp-block-group {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}