/*
Theme Name: Maneki Kitsune
Theme URI: https://maneki-kitsune.fr
Description: Thème sur mesure léger pour l'élevage de Shiba Inu Maneki Kitsune. Header transparent sur bannière, polices Marcellus + Plus Jakarta Sans, palette framboise/crème. Compatible avec le plugin MK Élevage.
Author: Maneki Kitsune
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: maneki-kitsune
*/

/* =====================================================================
 * VARIABLES — palette & polices de la maquette Figma
 * ===================================================================== */
:root {
    --mk-cta:        #931637;  /* framboise (boutons, accents) */
    --mk-cta-hover:  #7a1029;
    --mk-fonce:      #1D1510;  /* texte foncé */
    --mk-brun:       #765741;  /* brun secondaire */
    --mk-clair:      #FFF3EF;  /* fond crème clair */
    --mk-rose:       #FCA6C2;  /* fleur rose */
    --mk-blanc:      #FFFFFF;

    --mk-titre:  'Marcellus', Georgia, serif;
    --mk-corps:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --mk-largeur-max: 1200px;
    --mk-header-h: 110px;
}

/* =====================================================================
 * RESET léger
 * ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--mk-corps);
    font-weight: 300;
    color: var(--mk-fonce);
    background-color: var(--mk-blanc);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mk-titre);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 .5em;
    color: var(--mk-fonce);
}

a { color: var(--mk-cta); text-decoration: none; }
a:hover { color: var(--mk-cta-hover); }

img { max-width: 100%; height: auto; display: block; }

.mk-container {
    width: 100%;
    max-width: var(--mk-largeur-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* =====================================================================
 * HEADER — transparent, superposé sur la bannière hero
 * ===================================================================== */
.mk-site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.mk-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--mk-header-h);
    max-width: var(--mk-largeur-max);
    margin: 0 auto;
    padding: 16px 24px;
}

.mk-logo { flex: 0 0 auto; }
.mk-logo img { width: 78px; height: auto; }

/* Navigation desktop */
.mk-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.mk-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 36px;
    align-items: center;
}
.mk-nav a {
    font-family: var(--mk-corps);
    font-weight: 300;
    font-size: 18px;
    color: var(--mk-blanc);            /* clair sur la bannière sombre */
    transition: color .2s;
    white-space: nowrap;
}
.mk-nav a:hover,
.mk-nav .current-menu-item > a {
    color: var(--mk-rose);
}

/* Bouton "Nous contacter" desktop */
.mk-cta-btn { flex: 0 0 auto; }
.mk-cta-btn a {
    display: inline-block;
    background-color: var(--mk-cta);
    color: var(--mk-blanc);
    font-family: var(--mk-corps);
    font-weight: 300;
    font-size: 18px;
    padding: 12px 22px;
    border-radius: 10px;
    transition: background-color .2s;
}
.mk-cta-btn a:hover { background-color: var(--mk-cta-hover); color: var(--mk-blanc); }

/* Icône enveloppe (mobile uniquement) */
.mk-cta-icone { display: none; }

/* Burger (mobile uniquement) */
.mk-burger {
    display: none;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    position: relative;
}
.mk-burger span,
.mk-burger span::before,
.mk-burger span::after {
    content: '';
    position: absolute;
    left: 9px;
    width: 26px;
    height: 3px;
    background: var(--mk-blanc);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
.mk-burger span { top: 21px; }
.mk-burger span::before { top: -8px; }
.mk-burger span::after  { top: 8px; }
/* Croix quand le menu est ouvert */
.mk-menu-open .mk-burger span { background: transparent; }
.mk-menu-open .mk-burger span::before { transform: translateY(8px) rotate(45deg); }
.mk-menu-open .mk-burger span::after  { transform: translateY(-8px) rotate(-45deg); }

/* Variante header sur fond clair (pages sans bannière) */
.mk-header-solid .mk-site-header {
    position: relative;
    background: var(--mk-blanc);
    box-shadow: 0 1px 12px rgba(0,0,0,.06);
}
.mk-header-solid .mk-nav a { color: var(--mk-fonce); }
.mk-header-solid .mk-nav a:hover,
.mk-header-solid .mk-nav .current-menu-item > a { color: var(--mk-cta); }
.mk-header-solid .mk-burger span,
.mk-header-solid .mk-burger span::before,
.mk-header-solid .mk-burger span::after { background: var(--mk-fonce); }
.mk-header-solid.mk-menu-open .mk-burger span { background: transparent; }

/* =====================================================================
 * BANNIÈRE HERO
 * ===================================================================== */
.mk-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--mk-blanc);
    background-size: cover;
    background-position: center;
    padding: var(--mk-header-h) 24px 60px;
}
.mk-hero::after {              /* voile dégradé pour lisibilité */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29,21,16,.35) 0%, rgba(29,21,16,.55) 100%);
    z-index: 1;
}
.mk-hero > * { position: relative; z-index: 2; }
.mk-hero h1 {
    color: var(--mk-blanc);
    font-size: clamp(2.2rem, 5vw, 4rem);
    margin-bottom: .3em;
}
.mk-hero p { font-size: 1.2rem; max-width: 640px; margin: 0 auto; }

/* =====================================================================
 * CONTENU
 * ===================================================================== */
.mk-main { padding: 0; }
.mk-page-title { text-align: center; font-size: clamp(2rem,4vw,3rem); margin-bottom: 1em; }

/* =====================================================================
 * CONTENU (pages / articles) — support des largeurs Gutenberg
 * Par défaut, les blocs sont limités à 1200px et centrés.
 * Un bloc marqué "large" (.alignwide) va jusqu'à 1400px.
 * Un bloc marqué "pleine largeur" (.alignfull) déborde jusqu'aux bords.
 * ===================================================================== */
.mk-post-content {
    padding: 60px 0;
}
.mk-post-content > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}
.mk-post-content > .alignwide {
    max-width: 1400px;
}
.mk-post-content > .alignfull {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
/* Contenu intérieur des blocs pleine largeur : centré et limité à 1200px,
   pour que le fond touche les bords mais que le contenu reste lisible */
.mk-post-content > .alignfull > .wp-block-group__inner-container,
.mk-post-content > .alignfull > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
/* Sauf si l'enfant est LUI AUSSI marqué alignfull (imbrication rare) */
.mk-post-content > .alignfull > .alignfull {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
/* Le titre de page conserve son alignement centré */
.mk-post-content > .mk-page-title { text-align: center; }

.mk-content p { margin: 0 0 1.2em; }
.mk-content h2 { font-size: 2rem; margin: 1.5em 0 .6em; }
.mk-content h3 { font-size: 1.5rem; margin: 1.2em 0 .5em; }
.mk-content ul, .mk-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.mk-content img { border-radius: 16px; margin: 1.5em 0; }

/* =====================================================================
 * FOOTER — fidèle à la maquette (fond brun, coins arrondis, centré)
 * ===================================================================== */
.mk-site-footer {
    background: var(--mk-brun);
    color: var(--mk-clair);
    border-radius: 100px 100px 0 0;
    margin-top: 80px;
    padding: 80px 24px 50px;
}
.mk-footer-wrap {
    max-width: 1128px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

/* --- Bandeau haut : titre + bouton --- */
.mk-footer-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}
.mk-footer-cta h2 {
    font-family: var(--mk-titre);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 54px);
    line-height: 1.25;
    color: var(--mk-clair);
    margin: 0;
}
.mk-footer-cta .mk-btn {
    display: inline-block;
    background: var(--mk-cta);
    color: var(--mk-blanc);
    font-family: var(--mk-corps);
    font-weight: 300;
    font-size: 18px;
    padding: 12px 22px;
    border-radius: 10px;
    transition: background-color .2s;
}
.mk-footer-cta .mk-btn:hover { background: var(--mk-cta-hover); color: var(--mk-blanc); }

/* --- Corps : logo | infos | navigation --- */
.mk-footer-cols {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 100px;
    flex-wrap: wrap;
}
.mk-footer-logo-col img { width: 160px; height: auto; }

.mk-footer-infos { display: flex; flex-direction: column; gap: 15px; }
.mk-footer-infos .mk-info-fort {
    font-family: var(--mk-corps);
    font-weight: 600;
    font-size: 22px;
    color: var(--mk-clair);
    margin: 0;
}

/* Colonnes de liens */
.mk-footer-liens {
    display: flex;
    flex-direction: row;
    gap: 60px;
    flex-wrap: wrap;
}
.mk-footer-liens ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.mk-footer-liens a {
    font-family: var(--mk-corps);
    font-weight: 300;
    font-size: 18px;
    color: var(--mk-clair);
    transition: color .2s;
}
.mk-footer-liens a:hover { color: var(--mk-rose); }

/* Réseaux sociaux : pastilles framboise */
.mk-footer-reseaux { display: flex; align-items: center; gap: 13px; margin-top: 10px; }
.mk-footer-reseaux .mk-rond {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    max-width: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--mk-cta);
    transition: background-color .2s;
    overflow: hidden;
}
.mk-footer-reseaux .mk-rond:hover { background: var(--mk-cta-hover); }
.mk-footer-reseaux .mk-rond svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px;
    max-height: 18px;
    fill: var(--mk-clair);
    display: block;
}

/* Bas de footer */
.mk-footer-bas {
    text-align: center;
    margin-top: 50px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,243,239,.18);
    font-size: .9rem;
    color: rgba(255,243,239,.7);
}
.mk-footer-bas a { color: rgba(255,243,239,.7); }
.mk-footer-bas a:hover { color: var(--mk-clair); }

@media (max-width: 900px) {
    .mk-site-footer { border-radius: 50px 50px 0 0; padding: 50px 24px 40px; }
    .mk-footer-wrap { gap: 50px; }
    .mk-footer-cols { flex-direction: column; align-items: center; text-align: center; gap: 40px; }
    .mk-footer-infos { align-items: center; }
    .mk-footer-liens { justify-content: center; }
    .mk-footer-reseaux { justify-content: center; }
}

/* =====================================================================
 * MENU MOBILE (panneau déroulant)
 * ===================================================================== */
.mk-mobile-panel {
    display: none;
    position: fixed;
    top: 0; right: 0;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--mk-clair);
    z-index: 200;
    padding: 90px 30px 30px;
    box-shadow: -4px 0 24px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
}
.mk-menu-open .mk-mobile-panel { transform: translateX(0); }
.mk-mobile-panel ul { list-style: none; margin: 0; padding: 0; }
.mk-mobile-panel li { margin-bottom: 4px; }
.mk-mobile-panel a {
    display: block;
    font-family: var(--mk-corps);
    font-weight: 300;
    font-size: 20px;
    color: var(--mk-fonce);
    padding: 12px 0;
    border-bottom: 1px solid rgba(29,21,16,.08);
}
.mk-mobile-panel a:hover,
.mk-mobile-panel .current-menu-item > a { color: var(--mk-cta); }
.mk-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 150;
}
.mk-menu-open .mk-overlay { display: block; }

/* =====================================================================
 * RESPONSIVE — bascule mobile sous 980px
 * ===================================================================== */
@media (max-width: 980px) {
    .mk-nav { display: none; }              /* on cache le menu desktop */
    .mk-cta-btn { display: none; }          /* on cache le bouton texte */
    .mk-burger { display: block; order: 3; }
    .mk-mobile-panel { display: block; }

    /* Icône enveloppe ronde framboise (remplace le bouton) */
    .mk-cta-icone {
        display: flex;
        order: 2;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: var(--mk-cta);
        margin-left: auto;
        margin-right: 12px;
    }
    .mk-cta-icone svg { width: 22px; height: 22px; }

    .mk-header-inner { min-height: 80px; }
    .mk-logo { order: 1; }
    .mk-logo img { width: 64px; }
}

@media (max-width: 480px) {
    .mk-footer-inner { flex-direction: column; }
}

/* =====================================================================
 * CLASSE UTILITAIRE : mk-icone-item
 * Pour les items "icône + titre + description" (ex. section "Grandir chez nous")
 * Dimensions maquette : 270×134, texte centré
 * À appliquer sur chaque bloc Colonne dans Gutenberg (Réglages avancés
 * → Classe(s) CSS additionnelle(s) → mk-icone-item)
 * ===================================================================== */
.mk-icone-item {
    width: 270px !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.mk-icone-item p,
.mk-icone-item h1,
.mk-icone-item h2,
.mk-icone-item h3,
.mk-icone-item h4 {
    text-align: center;
    margin: 0;
}
.mk-icone-item img,
.mk-icone-item svg {
    display: block;
    margin: 0 auto;
}

/* =====================================================================
 * CLASSE UTILITAIRE : mk-section-arrondie
 * Coins arrondis 100px en haut (comme le footer)
 * À appliquer sur un bloc Groupe pleine largeur dans Gutenberg
 * (Réglages avancés → Classe(s) CSS additionnelle(s))
 * ===================================================================== */
.mk-section-arrondie {
    border-radius: 100px 100px 0 0 !important;
    overflow: hidden;
}
@media (max-width: 900px) {
    .mk-section-arrondie { border-radius: 50px 50px 0 0 !important; }
}

/* =====================================================================
 * PÉTALES QUI TOMBENT — effet discret de fond de page
 * Créé dynamiquement par assets/petales.js
 * Les pétales tombent dans le document (pas dans la fenêtre) et restent
 * DERRIÈRE le contenu (textes, images, cartes) pour ne pas distraire.
 * ===================================================================== */
.mk-petales {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
/* Rendre le body référentiel absolu pour que .mk-petales s'y attache */
body { position: relative; }

/* Placer le contenu principal AU-DESSUS des pétales */
.mk-site-header,
.mk-hero,
.mk-main,
.mk-mobile-panel,
.mk-overlay,
.mk-site-footer {
    position: relative;
    z-index: 1;
}
/* Le header transparent doit garder son z-index élevé pour rester au-dessus de la bannière */
.mk-site-header { z-index: 100; }

.mk-petale {
    position: absolute;
    top: 0;
    background-color: #FDD5DE;                     /* rose pâle discret */
    /* Forme de pétale : cercle asymétrique via border-radius */
    border-radius: 150% 0 150% 0 / 60% 0 60% 0;
    transform-origin: center;
    animation-timing-function: ease-in-out;        /* mouvement plus doux, pas linéaire */
    animation-iteration-count: infinite;
    will-change: transform;
    filter: blur(.3px);
}

/* 5 trajectoires différentes : chaque pétale reçoit l'une d'elles */
/* --- Variante 1 : zigzag large et lent, rotation modérée --- */
@keyframes mk-petale-tombe-1 {
    0%   { transform: translate(0px,   -40px) rotate(0deg); }
    10%  { transform: translate(45px,  calc(var(--mk-fall) * 0.10)) rotate(35deg); }
    22%  { transform: translate(-30px, calc(var(--mk-fall) * 0.22)) rotate(-20deg); }
    35%  { transform: translate(55px,  calc(var(--mk-fall) * 0.35)) rotate(60deg); }
    50%  { transform: translate(-40px, calc(var(--mk-fall) * 0.50)) rotate(-10deg); }
    65%  { transform: translate(35px,  calc(var(--mk-fall) * 0.65)) rotate(85deg); }
    78%  { transform: translate(-45px, calc(var(--mk-fall) * 0.78)) rotate(30deg); }
    90%  { transform: translate(20px,  calc(var(--mk-fall) * 0.90)) rotate(120deg); }
    100% { transform: translate(-10px, var(--mk-fall))              rotate(90deg); }
}

/* --- Variante 2 : zigzag plus serré, beaucoup de rotation --- */
@keyframes mk-petale-tombe-2 {
    0%   { transform: translate(0px,   -40px) rotate(0deg); }
    12%  { transform: translate(-40px, calc(var(--mk-fall) * 0.12)) rotate(-60deg); }
    24%  { transform: translate(35px,  calc(var(--mk-fall) * 0.24)) rotate(80deg); }
    38%  { transform: translate(-25px, calc(var(--mk-fall) * 0.38)) rotate(-40deg); }
    52%  { transform: translate(50px,  calc(var(--mk-fall) * 0.52)) rotate(150deg); }
    66%  { transform: translate(-35px, calc(var(--mk-fall) * 0.66)) rotate(-30deg); }
    80%  { transform: translate(40px,  calc(var(--mk-fall) * 0.80)) rotate(200deg); }
    100% { transform: translate(15px,  var(--mk-fall))              rotate(280deg); }
}

/* --- Variante 3 : dérive douce vers la gauche puis retour --- */
@keyframes mk-petale-tombe-3 {
    0%   { transform: translate(0px,   -40px) rotate(15deg); }
    18%  { transform: translate(-35px, calc(var(--mk-fall) * 0.18)) rotate(-25deg); }
    36%  { transform: translate(-60px, calc(var(--mk-fall) * 0.36)) rotate(40deg); }
    55%  { transform: translate(-25px, calc(var(--mk-fall) * 0.55)) rotate(-15deg); }
    72%  { transform: translate(30px,  calc(var(--mk-fall) * 0.72)) rotate(60deg); }
    88%  { transform: translate(-15px, calc(var(--mk-fall) * 0.88)) rotate(-45deg); }
    100% { transform: translate(20px,  var(--mk-fall))              rotate(30deg); }
}

/* --- Variante 4 : très flottant, petits mouvements rapprochés --- */
@keyframes mk-petale-tombe-4 {
    0%   { transform: translate(0px,   -40px) rotate(0deg); }
    8%   { transform: translate(20px,  calc(var(--mk-fall) * 0.08)) rotate(20deg); }
    18%  { transform: translate(-15px, calc(var(--mk-fall) * 0.18)) rotate(-15deg); }
    30%  { transform: translate(25px,  calc(var(--mk-fall) * 0.30)) rotate(45deg); }
    42%  { transform: translate(-20px, calc(var(--mk-fall) * 0.42)) rotate(-30deg); }
    55%  { transform: translate(30px,  calc(var(--mk-fall) * 0.55)) rotate(65deg); }
    68%  { transform: translate(-25px, calc(var(--mk-fall) * 0.68)) rotate(-10deg); }
    82%  { transform: translate(15px,  calc(var(--mk-fall) * 0.82)) rotate(90deg); }
    100% { transform: translate(-10px, var(--mk-fall))              rotate(140deg); }
}

/* --- Variante 5 : dérive vers la droite, rotation lente --- */
@keyframes mk-petale-tombe-5 {
    0%   { transform: translate(0px,   -40px) rotate(-10deg); }
    20%  { transform: translate(30px,  calc(var(--mk-fall) * 0.20)) rotate(20deg); }
    40%  { transform: translate(65px,  calc(var(--mk-fall) * 0.40)) rotate(-5deg); }
    58%  { transform: translate(45px,  calc(var(--mk-fall) * 0.58)) rotate(50deg); }
    75%  { transform: translate(80px,  calc(var(--mk-fall) * 0.75)) rotate(15deg); }
    90%  { transform: translate(55px,  calc(var(--mk-fall) * 0.90)) rotate(80deg); }
    100% { transform: translate(70px,  var(--mk-fall))              rotate(45deg); }
}

/* Réduction des animations : on cache complètement les pétales */
@media (prefers-reduced-motion: reduce) {
    .mk-petales { display: none; }
}

/* Sur mobile, on ne montre pas les pétales (économie CPU/batterie) */
@media (max-width: 600px) {
    .mk-petales { display: none; }
}