/*
Theme Name:  PUNCH Marionnettes
Theme URI:   https://punch-marionnettes.fr
Description: Thème enfant PUNCH — Marionnettes en pleines formes (22–31 janvier 2027). Co-porté par THEMAA et Latitude Marionnette.
Author:      Alice Reveilliez
Author URI:  https://revalice.fr
Template:    revalice
Version:     1.0.0
Text Domain: revalice-punch
*/

/* ── Police Aldo (titres display, logo PUNCH) ─────────────── */
@font-face {
    font-family : 'Aldo';
    src         : url('assets/fonts/Aldo-Regular.ttf') format('truetype');
    font-weight : normal;
    font-style  : normal;
    font-display: swap;
}

/* ══════════════════════════════════════════════════════════════
   1. VARIABLES — Charte PUNCH
   ══════════════════════════════════════════════════════════════ */
:root {
    /* Couleurs */
    --punch-rouge : #FF0404;
    --punch-blanc : #FFFFFF;
    --punch-noir  : #000000;

    /* Polices */
    --punch-font-display : 'Aldo', 'Roboto', sans-serif;
    --punch-font-base    : 'Roboto', system-ui, -apple-system, sans-serif;

    /* Tailles base */
    --punch-fs-base : 17px;
    --punch-lh-base : 1.5;
}

/* ══════════════════════════════════════════════════════════════
   2. BASE
   ══════════════════════════════════════════════════════════════ */
body {
    font-family : var(--punch-font-base);
    font-size   : var(--punch-fs-base);
    line-height : var(--punch-lh-base);
    color       : var(--punch-noir);
    background  : var(--punch-blanc);
}

/* Titres — tailles ajustées (Litho est trop gros pour PUNCH) */
h1, h2, h3, h4, h5, h6 {
    font-family    : var(--punch-font-display);
    font-weight    : 400;
    color          : var(--punch-rouge);
    letter-spacing : -0.3px;
    margin         : 0 0 0.6em 0;
}

/* clamp(min, fluide, max) — fluide entre mobile et desktop */
h1 { font-size: clamp(2.15rem, 3.6vw + 0.9rem, 3.2rem);  line-height: 1.1; }
h2 { font-size: clamp(1.8rem,  2.7vw + 0.7rem, 2.5rem);  line-height: 1.15; }
h3 { font-size: clamp(1.5rem,  2.2vw + 0.6rem, 2rem);    line-height: 1.2; }
h4 { font-size: clamp(1.25rem, 1.8vw + 0.55rem, 1.7rem); line-height: 1.25; }
h5 { font-size: clamp(1.1rem,  1.3vw + 0.45rem, 1.35rem); line-height: 1.3; }
h6 { font-size: clamp(1rem,    0.9vw + 0.4rem,  1.15rem); line-height: 1.35; }

a {
    color           : var(--punch-rouge);
    text-decoration : none;
}
a:hover {
    text-decoration : underline;
}

/* Listes — puces alignées sur le titre, interligne resserré */
ul, ol,
ul.wp-block-list, ol.wp-block-list {
    padding-left : 1.1em;   /* juste la place pour la puce */
    margin-left  : 0;
    margin-top   : 0;
    margin-bottom: 1em;
    list-style-position: outside;
}

ul li, ol li,
.wp-block-list li {
    margin-bottom : 0.35em; /* moins d'espace entre items */
    padding-left  : 0.15em; /* mini respiration entre puce et texte */
}
ul li:last-child, ol li:last-child,
.wp-block-list li:last-child {
    margin-bottom : 0;
}

/* ══════════════════════════════════════════════════════════════
   3. CLASSES UTILITAIRES — fonds & textes
   ══════════════════════════════════════════════════════════════ */
.bg-punch-rouge { background-color: var(--punch-rouge); color: var(--punch-blanc); }
.bg-punch-blanc { background-color: var(--punch-blanc); color: var(--punch-noir);  }
.bg-punch-noir  { background-color: var(--punch-noir);  color: var(--punch-blanc); }

.text-punch-rouge { color: var(--punch-rouge); }
.text-punch-blanc { color: var(--punch-blanc); }
.text-punch-noir  { color: var(--punch-noir); }

/* Inverser les couleurs sur fond rouge */
.bg-punch-rouge h1,
.bg-punch-rouge h2,
.bg-punch-rouge h3,
.bg-punch-rouge h4,
.bg-punch-rouge h5,
.bg-punch-rouge h6,
.bg-punch-rouge a {
    color : var(--punch-blanc);
}

/* ══════════════════════════════════════════════════════════════
   4. FOOTER — cœur de signature animé
   ══════════════════════════════════════════════════════════════ */
.site-footer__heart {
    display       : inline-block;
    color         : var(--punch-blanc);
    transform     : translateZ(0);                /* lissage GPU */
    animation     : punch-heartbeat 1.4s ease-in-out infinite;
    will-change   : transform;
}

@keyframes punch-heartbeat {
    0%, 100% { transform: scale(1);    }
    20%      { transform: scale(1.25); }
    40%      { transform: scale(0.95); }
    60%      { transform: scale(1.15); }
    80%      { transform: scale(1);    }
}

/* Respect des préférences d'accessibilité : pas d'anim si reduced motion */
@media (prefers-reduced-motion: reduce) {
    .site-footer__heart { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   5. HEADER — Navbar PUNCH
   ══════════════════════════════════════════════════════════════
   On surcouche la navbar Bootstrap/Litho du parent.
   Pas de réécriture des classes .navbar/.navbar-toggler/.collapse :
   on cible .punch-header (modifier) et les sous-éléments BEM.
   ══════════════════════════════════════════════════════════════ */

.punch-header {
    transition: background-color .25s ease;
}

/* Pages intérieures : fond rouge plein (au lieu du gris parent) */
.punch-header:not(.punch-header--home) {
    background-color: var(--punch-rouge);
}

/* Container interne : on ajuste juste la hauteur visuelle */
.punch-header .nav-header-container {
    min-height : 80px;
    padding-top   : 8px;
    padding-bottom: 8px;
}

/* ── Logo : marque + sous-titre ───────────────────────────── */
.punch-header__brand {
    display      : inline-flex;
    align-items  : center;
    text-decoration: none;
}
.punch-header__brand:hover {
    text-decoration: none;
}

.punch-header__logo {
    display       : flex;
    flex-direction: column;
    line-height   : 1;
}

.punch-header__logo-mark {
    font-family   : var(--punch-font-display);
    font-size     : clamp(1.6rem, 1.4vw + 1.2rem, 2.2rem);
    color         : var(--punch-blanc);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.punch-header__logo-sub {
    font-family   : var(--punch-font-base);
    font-size     : 11px;
    font-weight   : 400;
    color         : var(--punch-blanc);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top    : 4px;
    opacity       : .85;
}

/* ── Liens du menu principal ──────────────────────────────── */
.punch-header__nav .nav-link {
    font-family   : var(--punch-font-base);
    font-size     : 14px;
    font-weight   : 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color         : var(--punch-blanc) !important; /* override Litho */
    padding       : 10px 16px;
    transition    : opacity .2s ease;
}
.punch-header__nav .nav-link:hover,
.punch-header__nav .nav-link:focus,
.punch-header__nav .current-menu-item > .nav-link {
    opacity: .65;
}

/* ── Item CTA (Participer) ────────────────────────────────── */
.punch-header__nav .menu-item-cta > .nav-link {
    background-color : var(--punch-blanc);
    color            : var(--punch-rouge) !important;
    margin-left      : 8px;
    padding          : 10px 20px;
    border-radius    : 0;
    box-shadow       : 4px 4px 0 0 var(--punch-noir);
    transition       : transform .15s ease, box-shadow .15s ease;
    display          : inline-flex;
    align-items      : center;
    gap              : 8px;
}
.punch-header__nav .menu-item-cta > .nav-link::after {
    content     : "→";
    display     : inline-block;
    transition  : transform .2s ease;
}
.punch-header__nav .menu-item-cta > .nav-link:hover {
    opacity     : 1;
    transform   : translate(-2px, -2px);
    box-shadow  : 6px 6px 0 0 var(--punch-noir);
}
.punch-header__nav .menu-item-cta > .nav-link:hover::after {
    transform   : translateX(4px);
}

/* ── Bloc dates édition ───────────────────────────────────── */
.punch-header__dates {
    border        : 2px solid var(--punch-blanc);
    padding       : 6px 12px;
    line-height   : 1.1;
    background    : transparent;
    color         : var(--punch-blanc);
    text-align    : right;
}
.punch-header__dates-label {
    font-family   : var(--punch-font-base);
    font-size     : 10px;
    font-weight   : 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity       : .8;
}
.punch-header__dates-value {
    font-family   : var(--punch-font-display);
    font-size     : 16px;
    letter-spacing: .5px;
    margin-top    : 2px;
}

/* ── Réseaux sociaux (icônes) ─────────────────────────────── */
.punch-header .nav-reseau-icon {
    color           : var(--punch-blanc);
    width           : 32px;
    height          : 32px;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    border          : 1px solid rgba(255,255,255,.4);
    border-radius   : 0;
    transition      : background-color .2s ease;
}
.punch-header .nav-reseau-icon:hover {
    background-color: var(--punch-blanc);
    color           : var(--punch-rouge);
    text-decoration : none;
}

/* ── Burger mobile : lignes blanches ──────────────────────── */
.punch-header .navbar-toggler {
    border : 1px solid var(--punch-blanc);
    padding: 8px 10px;
}
.punch-header .navbar-toggler-line {
    background-color: var(--punch-blanc);
}

/* ── Mobile : ajustements ─────────────────────────────────── */
@media (max-width: 991.98px) {
    .punch-header__nav {
        padding-top   : 16px;
        padding-bottom: 8px;
    }
    .punch-header__nav .nav-link {
        padding: 12px 0;
    }
    .punch-header__nav .menu-item-cta > .nav-link {
        margin-left: 0;
        margin-top : 12px;
        align-self : flex-start;
    }
    .punch-header__logo-mark {
        font-size: 1.6rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   6. À COMPLÉTER — pages, blocs, carte, formulaire
   ══════════════════════════════════════════════════════════════ */