/* ============================================================
   MAISON LE DUC — fix.css  v1.8
   Classes confirmées DevTools :
     .img--fond           → wrapper image (cards articles ET hero)
     .img--fond.hero-img  → bannière hero catégorie (EXCLURE du ratio)
     .encart-rea          → encarts icônes (EXCLURE totalement)
     .ct-section.hero     → section hero catégorie
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. RESET MINIMAL — uniquement ce qui est nécessaire
   ══════════════════════════════════════════════════════════ */
img {
    max-width: 100% !important;
    /* PAS de display:block ni height:auto global */
}

/* ══════════════════════════════════════════════════════════
   LOGO — contraindre la taille sur mobile
   Mon max-width:100% retirait la contrainte naturelle du logo
   ══════════════════════════════════════════════════════════ */
header img,
.oxy-header img,
.oxy-header-wrap img,
.oxy-sticky-header img,
.site-logo img,
.custom-logo,
.custom-logo-link img,
header .ct-image img,
header picture img {
    max-width: 160px !important;
    max-height: 120px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}


html, body {
    overflow-x: hidden !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════
   2. HERO CATÉGORIE — .img--fond.hero-img
   Confirmation DevTools : hauteur calculée 1046px à cause du
   padding-top:56.25% de mon plugin. Fix : limiter la hauteur.
   ══════════════════════════════════════════════════════════ */
/* Section hero entière */
.ct-section.hero {
    max-height: 420px !important;
    overflow: hidden !important;
}

/* Conteneur image hero : hauteur fixe, PAS de padding-top */
.img--fond.hero-img {
    height: 420px !important;
    max-height: 420px !important;
    padding-top: 0 !important;   /* annule le 56.25% du reset global */
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

.img--fond.hero-img img,
.ct-section.hero .img--fond img,
.ct-section.hero .img--fond picture img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════════
   3. CARDS ARTICLES — .img--fond SANS .hero-img
   Ratio 16/9 uniquement pour les cards du blog
   ══════════════════════════════════════════════════════════ */
.img--fond:not(.hero-img) {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    padding-top: 56.25% !important;
    height: 0 !important;
}

.img--fond:not(.hero-img) img,
.img--fond:not(.hero-img) picture img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════════
   4. ICÔNES ENCARTS — .encart-rea
   Totalement exclus de tout reset
   ══════════════════════════════════════════════════════════ */
/* Icônes encart : taille fixe, ne pas déborder sur le texte */
.encart-rea img,
.encart-rea picture img,
.encart-rea .ct-image img {
    max-width: 80px !important;   /* contraindre la taille de l'icône */
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;    /* centrer dans le flex column */
    position: static !important;
    object-fit: contain !important;
    padding-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   5. WOOCOMMERCE — images produits
   ══════════════════════════════════════════════════════════ */
.woocommerce ul.products,
.woocommerce-page ul.products {
    overflow: visible !important;
}

.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
.attachment-woocommerce_thumbnail,
.attachment-shop_catalog {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════════
   6. IMAGES ARRIÈRE-PLAN
   ══════════════════════════════════════════════════════════ */
[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ══════════════════════════════════════════════════════════
   7. CONTENU ÉDITEUR / SVG / IFRAMES
   ══════════════════════════════════════════════════════════ */
.entry-content img,
.post-content img {
    max-width: 100% !important;
    height: auto !important;
}

svg { max-width: 100% !important; }
iframe { max-width: 100% !important; }