/*
Theme Name: NiVus NiConnus - Édition Finale 2026
Author: HB Formation & Conseil - Script Automatisé
Description: Thème WordPress natif 100% fidèle, 100% Client-Proof (Structure verrouillée).
Version: 20.0
*/

* { box-sizing: border-box; }
body { margin: 0; background: #FFFEF8; font-family: 'Figtree', system-ui, sans-serif; color: #020202; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .9; }
input, textarea, select { font-family: inherit; font-size: 15px; width: 100%; padding: 13px 15px; border: 2px solid #020202; border-radius: 10px; background: #fff; color: #020202; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #bd0000; }
label { font-family: 'Baloo 2', cursive; font-weight: 500; font-size: 14px; display: block; margin: 0 0 7px; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }

/* 🛡️ HEADER & MENUS (Desktop) */
.nivus-nav-dropdown { position: relative !important; display: inline-block !important; }
.nivus-nav-submenu { display: none !important; position: absolute !important; left: 0 !important; top: 100% !important; min-width: 270px !important; background: #020202 !important; color: #FFFEF8 !important; border-radius: 12px !important; padding: 8px !important; box-shadow: 0 16px 40px rgba(0,0,0,.35) !important; z-index: 99999 !important; }
.nivus-nav-dropdown:hover .nivus-nav-submenu { display: block !important; }
.nivus-nav-submenu a { display: block !important; padding: 11px 14px !important; border-radius: 8px !important; font-size: 14.5px !important; color: #FFFEF8 !important; text-decoration: none !important; }
.nivus-nav-submenu a:hover { background: #bd0000 !important; color: #fff !important; }

/* 📱 BOUTON MENU MOBILE */
.nivus-mobile-btn { display: none; background: #020202; color: #fff; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-family: 'Baloo 2', cursive; font-weight: 600; font-size: 16px; margin-left: auto; }

/* 🐔 MASCOTTE POULET */
figure:has(img[src*="mascotte"]) { background: transparent !important; border: none !important; margin: 0 !important; padding: 0 !important; }
img[src*="mascotte"], img[alt*="mascotte"], img[alt*="poulet"] { background-color: transparent !important; background: none !important; border: none !important; box-shadow: none !important; filter: none !important; padding: 0 !important; max-width: 100%; height: auto; display: inline-block !important; mix-blend-mode: multiply !important; }

/* 🖼️ GALERIE & GRILLES */
div[style*="grid-template-columns:repeat(3"] { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; align-items: stretch !important; }
div[style*="grid-auto-rows:200px"] { grid-auto-rows: 200px !important; }

/* 📸 INTERACTIVITÉ DES VRAIES PHOTOS */
.nivus-editable-img { transition: filter 0.2s ease, transform 0.2s ease; cursor: pointer; }
.nivus-editable-img:hover { filter: brightness(0.92); transform: scale(0.99); }

/* 🛡️ VERROUILLAGE DU CADRAGE PHOTO
   Quand un client remplace une image dans l'éditeur WordPress (double-clic > Modifier
   l'image), WordPress réécrit lui-même les attributs width/height/style de la balise
   <img> avec les dimensions natives du nouveau fichier. Ça détruit le recadrage et fait
   parfois "exploser" la boîte qui la contient (grille qui passe en colonne unique, etc.).
   Ces règles forcent le cadrage à rester correct QUOI QUE WordPress réécrive sur la balise.
   ⚠️ Ciblé UNIQUEMENT sur les vraies photos de grille/carte (marquées nivus-cover-lock
   par le script, car elles avaient déjà object-fit:cover à l'origine) — PAS sur les
   icônes/mascotte/petites images décoratives qui ont leurs propres dimensions fixes. */
.nivus-cover-lock {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
/* Le conteneur (la boîte à taille fixe autour de la photo) reste, lui, protégé
   par le fix wp_kses côté functions.php : son style="height:...px" n'est jamais retouché. */

/* 🛡️ CARTES CLIQUABLES (ex-<a> convertis en <div> pour éviter la casse TinyMCE) */
.nivus-card-link { transition: transform 0.2s ease; }
.nivus-card-link:hover { transform: translateY(-4px); }

/* 🛡️ CAROUSELS */
div[style*="overflow-x:auto"] { display: flex !important; flex-wrap: nowrap !important; gap: 20px !important; align-items: stretch !important; scroll-behavior: smooth !important; }
div[style*="overflow-x:auto"] > div { flex: 0 0 auto !important; max-width: 85vw !important; }

/* 📱 MOBILE RESPONSIVE */
@media (max-width: 900px) {
    .nivus-mobile-btn { display: block !important; }
    .nivus-nav { display: none !important; flex-direction: column !important; position: absolute; top: 100%; left: 0; right: 0; background: #FFFEF8; padding: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); z-index: 100000; border-top: 2px solid #e8e4db; max-height: 85vh; overflow-y: auto; align-items: flex-start !important; gap: 10px !important; }
    .nivus-nav.is-open { display: flex !important; }
    .nivus-nav > a, .nivus-nav > div { width: 100% !important; margin: 0 !important; }
    .nivus-nav a { padding: 12px 0 !important; font-size: 18px !important; border-bottom: 1px solid #e8e4db; border-radius: 0 !important; display: block; }
    .nivus-nav-dropdown { width: 100% !important; }
    .nivus-nav-submenu { position: static !important; display: none !important; box-shadow: none !important; padding: 0 0 0 20px !important; margin-top: 0 !important; background: transparent !important; border: none !important; min-width: 100% !important; }
    .nivus-nav-submenu a { color: #020202 !important; font-size: 16px !important; border-bottom: none !important; }
    .nivus-nav-dropdown.is-open .nivus-nav-submenu { display: block !important; }
    div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 30px !important; }
    section, footer { padding: 40px 20px !important; }
    h1, h2, h3, h4, p { word-break: break-word !important; }
    h1, [style*="font-size:78px"], [style*="font-size:60px"], [style*="font-size:58px"], [style*="font-size:56px"], [style*="font-size:52px"] { font-size: 38px !important; line-height: 1.1 !important; margin-bottom: 15px !important; }
    h2, [style*="font-size:44px"], [style*="font-size:42px"], [style*="font-size:40px"], [style*="font-size:36px"], [style*="font-size:34px"] { font-size: 28px !important; line-height: 1.2 !important; margin-bottom: 15px !important; }
    div[style*="height:400px"], div[style*="height:520px"] { height: auto !important; min-height: 300px !important; margin-top: 20px !important; }
}