/*
Theme Name:     Anna Photo — Child
Theme URI:      https://annaphoto.eu
Template:       bard
Description:    Child theme personnalise pour annaphoto.eu, versionne dans le repo GitHub. Herite du parent Bard. Toutes les modifications CSS et fonctions personnelles vont ici — le parent reste intouche.
Author:         Anna Photo
Author URI:     https://annaphoto.eu
Version:        1.0.1
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    annaphoto-child
Tags:           photography, portfolio, custom
*/

/* ===========================================================================
 * Anna Photo — Child theme CSS
 *
 * Astuces :
 * - Toutes les regles ci-dessous ecrasent celles du parent 1001photo.
 * - Utilise !important seulement si le parent utilise deja des styles inline
 *   ou tres specifiques, sinon evite (ca rend le debug plus dur).
 * - Pour organiser proprement : mets les gros blocs dans assets/css/*.css
 *   et importe-les depuis functions.php (voir plus bas).
 * ========================================================================= */

/* -----------------------------------------------------------------------
 * 1. Variables globales (couleurs, tailles, polices...)
 * ----------------------------------------------------------------------- */
:root {
    /* Couleurs principales Anna Photo */
    --ap-color-primary:    #d4a5a5;   /* rose poudre principal */
    --ap-color-accent:     #8b6f6f;   /* accent plus fonce */
    --ap-color-text:       #2a2a2a;   /* texte de base */
    --ap-color-text-soft:  #6b6b6b;   /* texte secondaire */
    --ap-color-bg:         #fdf8f5;   /* fond creme */
    --ap-color-bg-alt:     #ffffff;   /* fond alternatif */

    /* Espacements */
    --ap-space-xs: 8px;
    --ap-space-sm: 16px;
    --ap-space-md: 24px;
    --ap-space-lg: 48px;
    --ap-space-xl: 96px;

    /* Rayons de bordure */
    --ap-radius-sm: 4px;
    --ap-radius-md: 8px;
    --ap-radius-lg: 16px;
}


/* -----------------------------------------------------------------------
 * 2. Header — logo aligne a gauche
 * (le fix qu'on avait fait en CSS additionnel, deplace ici pour etre versionne)
 * ----------------------------------------------------------------------- */
/* Adapte le selecteur si necessaire une fois le parent installe */
.site-branding,
.custom-logo-link,
.site-header .logo {
    text-align: left !important;
    margin-left: 0 !important;
}


/* -----------------------------------------------------------------------
 * 3. Placeholders — decommente pour activer
 * ----------------------------------------------------------------------- */

/* --- Boutons plus arrondis et plus gros ---
.wp-block-button__link,
.button,
button {
    border-radius: var(--ap-radius-md);
    padding: 14px 28px;
    font-size: 15px;
    letter-spacing: 0.05em;
}
*/

/* --- Titres en Cormorant Garamond ---
h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    letter-spacing: 0.02em;
}
*/

/* --- Galerie FooGallery en 4 colonnes desktop, 2 mobile ---
.foogallery.fg-preset {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ap-space-sm);
}
@media (max-width: 768px) {
    .foogallery.fg-preset {
        grid-template-columns: repeat(2, 1fr);
    }
}
*/

/* --- Menu mobile burger plus visible ---
.mobile-menu-toggle {
    font-size: 28px;
    color: var(--ap-color-accent);
}
*/


/* -----------------------------------------------------------------------
 * 4. Container hero (Bard) — banniere ENTIERE visible sans deformation
 *    Ratio image = 1520 / 585 = 2.6:1. On force le container au meme
 *    ratio pour que rien ne soit rogne ou etire.
 * ----------------------------------------------------------------------- */
.entry-header,
.entry-header .cv-outer,
.entry-header .cv-inner,
#page-header .cv-outer,
#page-header .cv-inner,
.cv-outer,
.cv-inner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1520 / 585 !important;
    padding: 0 !important;
}

/* Force l'image a s'afficher entierement, sans crop */
.cv-outer img,
.cv-inner img,
.entry-header img,
#page-header img,
.custom-header img,
.custom-header-media img,
.wp-custom-header img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
}

/* Backgrounds appliques par le theme via CSS -> contain aussi */
.cv-outer[style*="background"],
.cv-inner[style*="background"],
.entry-header[style*="background"] {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* -----------------------------------------------------------------------
 * 5. Bouton "Retour en haut" (back to top)
 * ----------------------------------------------------------------------- */
#ap-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #f7c4c4 0%, #d4a5a5 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(212, 165, 165, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease, box-shadow .2s ease, background .2s ease;
    z-index: 9999;
    padding: 0;
}
#ap-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#ap-back-to-top:hover {
    box-shadow: 0 10px 28px rgba(212, 165, 165, 0.6);
    background: linear-gradient(135deg, #d4a5a5 0%, #8b6f6f 100%);
    transform: translateY(-3px);
}
#ap-back-to-top:active {
    transform: translateY(-1px);
}
#ap-back-to-top:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
#ap-back-to-top svg {
    width: 22px;
    height: 22px;
}

/* Mobile : bouton un peu plus petit et plus proche du bord */
@media (max-width: 600px) {
    #ap-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }
    #ap-back-to-top svg {
        width: 20px;
        height: 20px;
    }
}

/* Respect des preferences utilisateur (moins d'animations) */
@media (prefers-reduced-motion: reduce) {
    #ap-back-to-top {
        transition: opacity .15s ease, visibility .15s ease;
        transform: none !important;
    }
}

/* -----------------------------------------------------------------------
 * 6. Sticky nav — transparent au top, opaque au scroll, cache au scroll-down
 *    IMPORTANT : ce bloc est ENTIEREMENT scope en desktop uniquement
 *    (>= 901px). Sur mobile, AUCUNE de mes regles ne s'applique -> Bard
 *    gere son menu mobile (hamburger + drawer) sans interference.
 *    Le JS aussi retourne early sur mobile (voir inc/scroll-menu.php).
 * ----------------------------------------------------------------------- */
@media (min-width: 901px) {
    .site-nav {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 99999 !important;
        padding: 14px 0;
        background: transparent;
        transition:
            background .4s ease,
            padding .4s ease,
            box-shadow .4s ease,
            transform .45s cubic-bezier(.16, 1, .3, 1);
        will-change: transform;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        isolation: isolate;
        transform: translateZ(0);

        /* Centrage des items du menu */
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }

    /* Force le container interne (ul du menu principal Bard) a centrer */
    .site-nav > *,
    .site-nav ul,
    .site-nav .top-menu,
    .site-nav .navigation {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Decale sous l'admin bar WP */
    body.admin-bar .site-nav { top: 32px; }

    /* ETAT 1 — on a scrolle : fond rose OPAQUE (aucune transparence) */
    .site-nav.is-scrolled {
        background: #fde8e8 !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        padding: 8px 0;
        box-shadow: 0 4px 24px rgba(139, 111, 111, 0.15);
    }

    /* ETAT 2 — on descend : la barre se cache vers le haut */
    .site-nav.is-hidden {
        transform: translateY(-100%);
    }

    /* Couleur et taille du texte du menu (desktop uniquement) */
    .site-nav a,
    .site-nav ul li a,
    .site-nav #top-menu li a,
    .site-nav .menu-item a {
        color: #000 !important;
        font-size: 14px !important;
    }
    /* Etat hover / actif : garde noir mais plus marque */
    .site-nav a:hover,
    .site-nav ul li a:hover,
    .site-nav .current-menu-item > a,
    .site-nav .current_page_item > a {
        color: #000 !important;
        opacity: 0.7;
    }

    /* Espace subtil entre le menu et la banniere sans casser le fond rose.
       Padding-top sur le menu lui-meme -> plus d'air en bas du menu sans
       creer de blanc entre menu et banniere. */
    .site-nav {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    .site-nav.is-scrolled {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

/* Preferences reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .site-nav {
        transition: background .2s ease, box-shadow .2s ease;
    }
    .site-nav.is-hidden {
        transform: none;
        opacity: 0;
        pointer-events: none;
    }
}

/* -----------------------------------------------------------------------
 * 7. Icone "retweet" (Font Awesome) — style theme Anna Photo
 *    Desktop uniquement : sur mobile Bard peut utiliser cette icone
 *    pour son toggle burger, on ne le customise pas.
 * ----------------------------------------------------------------------- */
@media (min-width: 901px) {
.fa-retweet,
.fas.fa-retweet,
i.fa-retweet,
i.fas.fa-retweet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f7c4c4 0%, #d4a5a5 100%);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(212, 165, 165, 0.3);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1),
                box-shadow .3s ease,
                background .3s ease;
    cursor: pointer;
    vertical-align: middle;
}

.fa-retweet:hover,
.fas.fa-retweet:hover,
a:hover > .fa-retweet,
a:hover > .fas.fa-retweet,
button:hover > .fa-retweet,
button:hover > .fas.fa-retweet {
    transform: rotate(180deg);
    background: linear-gradient(135deg, #d4a5a5 0%, #8b6f6f 100%);
    box-shadow: 0 4px 14px rgba(139, 111, 111, 0.4);
    color: #fff;
}

/* Si l'icone est dans un lien/bouton, on enleve tout le style bordure/fond
   du parent pour eviter les doublons visuels */
a:has(> .fa-retweet),
button:has(> .fa-retweet) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px !important;
}

/* Preferences reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .fa-retweet,
    .fas.fa-retweet {
        transition: box-shadow .2s ease, background .2s ease;
    }
    .fa-retweet:hover,
    .fas.fa-retweet:hover {
        transform: none;
    }
}
} /* fin @media (min-width: 901px) pour icone retweet */

/* -----------------------------------------------------------------------
 * 8. Menu mobile custom Anna Photo (hamburger + drawer)
 *    Visible UNIQUEMENT sur mobile (< 901px). Cache sur desktop.
 * ----------------------------------------------------------------------- */

/* Bouton hamburger, cache par defaut (desktop) */
#ap-mm-toggle {
    display: none;
}
#ap-mm-drawer,
#ap-mm-backdrop {
    display: none;
}

/* Sur mobile : bouton visible + drawer/backdrop actifs */
@media (max-width: 900px) {
    #ap-mm-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 12px;
        right: 12px;
        width: 46px;
        height: 46px;
        padding: 12px 10px;
        border: 0;
        border-radius: 50%;
        background: linear-gradient(135deg, #f7c4c4 0%, #d4a5a5 100%);
        cursor: pointer;
        z-index: 999999;
        box-shadow: 0 4px 14px rgba(212, 165, 165, 0.4);
        transition: background .25s ease, transform .25s ease;
    }
    body.admin-bar #ap-mm-toggle { top: 58px; }

    #ap-mm-toggle .ap-mm-bar {
        display: block;
        width: 100%;
        height: 2.5px;
        background: #fff;
        border-radius: 2px;
        transition: transform .3s ease, opacity .2s ease;
    }
    #ap-mm-toggle.is-open {
        background: linear-gradient(135deg, #d4a5a5 0%, #8b6f6f 100%);
    }
    #ap-mm-toggle.is-open .ap-mm-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    #ap-mm-toggle.is-open .ap-mm-bar:nth-child(2) { opacity: 0; }
    #ap-mm-toggle.is-open .ap-mm-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    #ap-mm-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(30, 15, 15, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
        z-index: 999997;
    }
    #ap-mm-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    #ap-mm-drawer {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: min(85%, 340px);
        background: #fde8e8;
        box-shadow: -8px 0 30px rgba(139, 111, 111, 0.25);
        transform: translateX(100%);
        transition: transform .35s cubic-bezier(.4, 0, .2, 1);
        z-index: 999998;
        overflow-y: auto;
        padding: 24px 20px;
        box-sizing: border-box;
    }
    body.admin-bar #ap-mm-drawer { top: 46px; height: calc(100% - 46px); }
    #ap-mm-drawer.is-open { transform: translateX(0); }

    .ap-mm-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(212, 165, 165, 0.3);
        margin-bottom: 20px;
    }
    .ap-mm-title {
        font-size: 18px;
        font-weight: 600;
        color: #8b6f6f;
    }
    .ap-mm-close {
        background: transparent;
        border: 0;
        font-size: 32px;
        line-height: 1;
        color: #8b6f6f;
        cursor: pointer;
        padding: 0 8px;
    }
    .ap-mm-close:hover { color: #d4a5a5; }

    .ap-mm-content ul,
    .ap-mm-content .ap-mm-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .ap-mm-content li {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(212, 165, 165, 0.15);
    }
    .ap-mm-content a {
        display: block;
        padding: 14px 8px;
        color: #2a2a2a;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: color .2s ease, padding-left .2s ease;
    }
    .ap-mm-content a:hover,
    .ap-mm-content .current-menu-item > a,
    .ap-mm-content .current_page_item > a {
        color: #8b6f6f;
        padding-left: 14px;
    }
    /* Sous-menus */
    .ap-mm-content .sub-menu,
    .ap-mm-content .children {
        list-style: none;
        padding-left: 16px;
        margin: 0;
    }
    .ap-mm-content .sub-menu a,
    .ap-mm-content .children a {
        font-size: 14px;
        color: #6b6b6b;
        padding: 10px 8px;
    }
}

/* -----------------------------------------------------------------------
 * 9. Espace pour tes futurs styles personnalises
 * ----------------------------------------------------------------------- */
/* Ajoute tes regles ici ou dans assets/css/custom.css */