/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
/* ============================================================
   UX PEAU DE MIEL - LUXE ÉDITION (MARGES 250px)
   ============================================================ */

:root {
    --pdm-phi: 1.618;
    --pdm-max-width: 1600px; /* Élargi pour compenser les marges */
    --pdm-margin-side: 250px; 
    --pdm-text-color: #232323;
}

/* 1. CONTENEUR PRINCIPAL */
.pdm-magazine-v5 {
    max-width: var(--pdm-max-width);
    margin: 0 auto;
    padding: 100px var(--pdm-margin-side); /* Application des 250px */
}

/* 2. STRUCTURE DE LA GRILLE DYNAMIQUE */
.pdm-row-grid {
    display: grid;
    gap: 80px; /* Espace entre texte et image */
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
}

/* --- RÈGLE 1/3 - 2/3 STRICTE --- */

/* PORTRAIT : Image 1/3 (1fr) | Texte 2/3 (2fr) */
.pdm-fmt-portrait.pdm-side-left  { grid-template-columns: 1fr 2fr; }
.pdm-fmt-portrait.pdm-side-right { grid-template-columns: 2fr 1fr; }

/* CARRÉ : Équilibre (1fr / 1fr) mais on peut forcer 1/3-2/3 si tu préfères l'image petite */
.pdm-fmt-carre.pdm-side-left  { grid-template-columns: 1fr 2fr; }
.pdm-fmt-carre.pdm-side-right { grid-template-columns: 2fr 1fr; }

/* PAYSAGE : Image 2/3 (2fr) | Texte 1/3 (1fr) */
.pdm-fmt-paysage.pdm-side-left  { grid-template-columns: 2fr 1fr; }
.pdm-fmt-paysage.pdm-side-right { grid-template-columns: 1fr 2fr; }

/* 3. ALIGNEMENT DES CELLULES */
.pdm-side-left .pdm-img-cell { grid-column: 1; grid-row: 1; }
.pdm-side-left .pdm-text-cell { grid-column: 2; grid-row: 1; }

.pdm-side-right .pdm-img-cell { grid-column: 2; grid-row: 1; }
.pdm-side-right .pdm-text-cell { grid-column: 1; grid-row: 1; }

/* 4. TEXTE SEUL (FOCUS LECTURE) */
.pdm-no-img {
    grid-template-columns: 1fr;
    max-width: 750px;
    margin: 0 auto;
}

/* 5. TYPOGRAPHIE & MÉDIAS */
.pdm-text-cell p {
    font-size: 20px; /* Légèrement plus grand pour compenser l'espace */
    line-height: 1.75;
    color: var(--pdm-text-color);
    margin: 0 !important;
    padding: 40px 0;
}

.pdm-img-cell {
    display: flex;
    justify-content: center;
}

.pdm-img-cell img {
    width: 100%;
    height: auto;
    max-width: 100%; 
    display: block;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    border-radius: 2px;
}

/* 6. RESPONSIVE (ADAPTATION INDISPENSABLE) */
@media (max-width: 1400px) {
    .pdm-magazine-v5 {
        padding: 60px 100px; /* Réduction progressive des marges */
    }
}

@media (max-width: 1024px) {
    .pdm-magazine-v5 {
        padding: 40px 40px;
    }
    .pdm-row-grid {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .pdm-row-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    .pdm-img-cell { order: -1; }
}

/* Clearfix */
.pdm-magazine-v5::after {
    content: "";
    display: table;
    clear: both;
}
/* ============================================================
   UX PEAU DE MIEL - LUXE ÉDITION V2 (CADRE DORÉ & INTERACTIF)
   ============================================================ */

:root {
    --pdm-gold: #d4af37; /* Or véritable */
    --pdm-gold-light: rgba(212, 175, 55, 0.15);
    --pdm-max-width: 1650px;
    --pdm-margin-side: 250px;
}

/* 1. CONTENEUR PRINCIPAL */
.pdm-magazine-v5 {
    max-width: var(--pdm-max-width);
    margin: 0 auto;
    padding: 100px var(--pdm-margin-side);
}

/* 2. LA GRILLE MAGIQUE */
.pdm-row-grid {
    display: grid;
    gap: 100px; /* Espace généreux entre texte et image */
    align-items: center;
    margin-bottom: 60px;
}

/* Ratios 1/3 - 2/3 strictes */
.pdm-fmt-portrait.pdm-side-left, .pdm-fmt-carre.pdm-side-left { grid-template-columns: 1fr 2fr; }
.pdm-fmt-portrait.pdm-side-right, .pdm-fmt-carre.pdm-side-right { grid-template-columns: 2fr 1fr; }
.pdm-fmt-paysage.pdm-side-left { grid-template-columns: 2fr 1fr; }
.pdm-fmt-paysage.pdm-side-right { grid-template-columns: 1fr 2fr; }

/* 3. LE CADRE DORÉ ET LE FILIGRANE */
.pdm-img-cell {
    position: relative;
    padding: 15px; /* Espace pour le cadre doré */
    display: flex;
    justify-content: center;
    transition: all 0.4s ease;
}

/* Le filet doré extérieur */
.pdm-img-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid var(--pdm-gold-light);
    transition: all 0.4s ease;
    pointer-events: none;
}

/* Le filet doré intérieur (effet double cadre) */
.pdm-img-cell::after {
    content: 'PDM'; /* Ton filigrane discret */
    position: absolute;
    bottom: 25px;
    right: 25px;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--pdm-gold);
    opacity: 0.4;
    font-family: serif;
    z-index: 5;
}

/* 4. IMAGE ET EFFET AU SURVOL (INTERACTIVITÉ) */
.pdm-img-cell img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 2;
    cursor: pointer;
}

/* L'effet de dingue au survol */
.pdm-img-cell:hover img {
    transform: scale(1.04);
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.2); /* Ombre dorée */
}

.pdm-img-cell:hover::before {
    border: 1px solid var(--pdm-gold); /* Le cadre s'illumine */
    transform: scale(1.02);
}

/* 5. TYPOGRAPHIE LECTURE */
.pdm-text-cell p {
    font-size: 20px;
    line-height: 1.8;
    color: #222;
    margin: 0 !important;
    padding: 40px 0;
}

/* 6. RESPONSIVE */
@media (max-width: 1400px) {
    .pdm-magazine-v5 { padding: 60px 100px; }
}

@media (max-width: 1024px) {
    .pdm-magazine-v5 { padding: 40px 30px; }
    .pdm-row-grid { gap: 40px; }
}

@media (max-width: 768px) {
    .pdm-row-grid { grid-template-columns: 1fr !important; }
    .pdm-img-cell { order: -1; margin-bottom: 20px; }
}

.pdm-magazine-v5::after { content: ""; display: table; clear: both; }