/*
Theme Name: English for Rebels
Theme URI: https://englishforrebels.fr
Description: Thème enfant punk NYC (PUNK Magazine / CBGB / Holmstrom) pour Hello Elementor. 100% compatible Elementor gratuit. Header et footer intégrés en pur HTML/CSS. Esthétique comic-book underground, hand-lettering, bulles BD, panneaux comics.
Author: English for Rebels
Author URI: https://englishforrebels.fr
Template: hello-elementor
Version: 1.1.0
Text Domain: english-for-rebels
*/

/* ═══════════════════════════════════════════════════════
   ENGLISH FOR REBELS — NYC PUNK DESIGN SYSTEM
   Inspiré par PUNK Magazine (Holmstrom/McNeil, 1976-79)
   CBGB, Ramones, Blondie, Television, Patti Smith
   ═══════════════════════════════════════════════════════ */

/* ─── ROOT: PALETTE & TOKENS ─── */
:root {
    /* Core palette — NYC Punk */
    --punk-black: #0a0a0a;
    --punk-ink: #1a1a1a;
    --punk-paper: #f5f0e8;
    --punk-paper-dark: #e8e0d0;
    --punk-red: #FF0033;
    --punk-red-dark: #CC0029;
    --punk-yellow: #FFE600;
    --punk-yellow-dark: #D4BF00;

    /* Extended palette — enrichie */
    --punk-hotpink: #FF1493;       /* Blondie / Debbie Harry */
    --punk-cyan: #00CED1;          /* Halftone printing, comic cyan */
    --punk-orange: #FF6B35;        /* Underground comix / cheap print */
    --punk-green: #2D5A27;         /* Army surplus / combat */
    --punk-purple: #7B2D8E;        /* Warhol / Factory vibes */
    --punk-gray: #555;
    --punk-gray-light: #888;
    --punk-gray-xerox: #333;

    /* Semantic */
    --color-bg: var(--punk-black);
    --color-bg-alt: var(--punk-paper);
    --color-text: var(--punk-paper);
    --color-text-dark: var(--punk-ink);
    --color-accent: var(--punk-red);
    --color-highlight: var(--punk-yellow);

    /* Typography scale */
    --font-comic: 'Bangers', cursive;
    --font-hand: 'Indie Flower', cursive;
    --font-typewriter: 'Special Elite', monospace;
    --font-mono: 'Courier Prime', monospace;
    --font-marker: 'Permanent Marker', cursive;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;

    /* Effects */
    --shadow-comic: 4px 4px 0 var(--punk-ink);
    --shadow-comic-red: 3px 3px 0 var(--punk-red);
    --shadow-comic-yellow: 3px 3px 0 var(--punk-yellow);
    --border-punk: 3px solid var(--punk-ink);
    --border-punk-thin: 2px solid var(--punk-ink);
    --rotation-slight: rotate(-1.5deg);
    --rotation-slight-pos: rotate(1.5deg);
}


/* ─── BASE RESETS & BODY ─── */
body {
    font-family: var(--font-typewriter);
    background: var(--punk-black);
    color: var(--punk-paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Texture overlay grain photocopie — désactivée (cassait le parsing CSS)
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.015;
    background-image: url("data:image/svg+xml,...");
}
*/

::selection {
    background: var(--punk-red);
    color: var(--punk-paper);
}


/* ─── TYPOGRAPHY ─── */

/* Titres comic-book (Bangers) */
h1, h2, h3, h4, h5, h6,
.punk-heading {
    font-family: var(--font-comic);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.05;
}

h1, .punk-h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    text-shadow: 3px 3px 0 var(--punk-red);
}
h2, .punk-h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    text-shadow: 2px 2px 0 var(--punk-red);
}
h3, .punk-h3 {
    font-size: clamp(1.4rem, 3vw, 2rem);
}

/* Corps machine à écrire (Special Elite) */
p, .punk-body {
    font-family: var(--font-typewriter);
    font-size: 1rem;
    line-height: 1.7;
}

/* Hand-lettering pour accents */
.punk-hand {
    font-family: var(--font-hand);
}

/* Style marker / feutre */
.punk-marker {
    font-family: var(--font-marker);
}

/* Monospace pour données */
.punk-mono {
    font-family: var(--font-mono);
}


/* ─── SPEECH BUBBLES (signature PUNK Magazine) ─── */

.punk-bubble {
    position: relative;
    background: var(--punk-paper);
    color: var(--punk-ink);
    border: 2.5px solid var(--punk-ink);
    border-radius: 20px;
    padding: 14px 18px;
    font-family: var(--font-hand);
    font-size: 1rem;
    line-height: 1.4;
    max-width: 320px;
    display: inline-block;
}
.punk-bubble::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 24px;
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid var(--punk-ink);
}
.punk-bubble::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 26px;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 11px solid var(--punk-paper);
    z-index: 1;
}

/* Bulle droite */
.punk-bubble--right::after { left: auto; right: 24px; }
.punk-bubble--right::before { left: auto; right: 26px; }

/* Bulle de pensée */
.punk-bubble--thought {
    border-radius: 30px;
}
.punk-bubble--thought::after {
    border: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--punk-ink);
    bottom: -18px;
    left: 28px;
}
.punk-bubble--thought::before {
    border: none;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--punk-ink);
    bottom: -28px;
    left: 22px;
}

/* Bulle cri / exclamation */
.punk-bubble--shout {
    background: var(--punk-yellow);
    border-color: var(--punk-ink);
    font-family: var(--font-comic);
    text-transform: uppercase;
    font-size: 1.1rem;
    letter-spacing: 1px;
    border-radius: 8px;
    transform: var(--rotation-slight);
}
.punk-bubble--shout::after {
    border-top-color: var(--punk-ink);
}
.punk-bubble--shout::before {
    border-top-color: var(--punk-yellow);
}


/* ─── COMIC PANELS (cartes services, témoignages) ─── */

.punk-panel {
    background: var(--punk-paper);
    color: var(--punk-ink);
    border: var(--border-punk);
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
}

/* Ombre double comics */
.punk-panel::after {
    content: '';
    position: absolute;
    bottom: -4px; right: -4px;
    width: 100%; height: 100%;
    border: 2px solid var(--punk-gray-light);
    z-index: -1;
}

.punk-panel--dark {
    background: var(--punk-black);
    color: var(--punk-paper);
    border-color: var(--punk-yellow);
}
.punk-panel--dark::after {
    border-color: var(--punk-yellow);
    opacity: 0.4;
}

.punk-panel--red {
    background: var(--punk-red);
    color: var(--punk-paper);
    border-color: var(--punk-ink);
}

.punk-panel--hotpink {
    background: var(--punk-hotpink);
    color: var(--punk-paper);
    border-color: var(--punk-ink);
}

.punk-panel--cyan {
    background: var(--punk-cyan);
    color: var(--punk-ink);
    border-color: var(--punk-ink);
}

.punk-panel__title {
    font-family: var(--font-comic);
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-sm);
}

.punk-panel__text {
    font-family: var(--font-hand);
    font-size: 1rem;
    line-height: 1.5;
}

.punk-panel__price {
    font-family: var(--font-comic);
    font-size: 2rem;
    color: var(--punk-red);
    margin-top: var(--space-md);
}
.punk-panel--dark .punk-panel__price {
    color: var(--punk-yellow);
}


/* ─── BUTTONS ─── */

.punk-btn {
    display: inline-block;
    font-family: var(--font-comic);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 10px 24px;
    border: 3px solid var(--punk-ink);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    position: relative;
}
.punk-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 3px 3px 0 var(--punk-ink);
}
.punk-btn:active {
    transform: translate(0, 0);
    box-shadow: none;
}

.punk-btn--primary {
    background: var(--punk-red);
    color: var(--punk-paper);
    border-color: var(--punk-red);
}
.punk-btn--primary:hover {
    box-shadow: 3px 3px 0 var(--punk-paper);
}

.punk-btn--yellow {
    background: var(--punk-yellow);
    color: var(--punk-ink);
    border-color: var(--punk-ink);
}

.punk-btn--outline {
    background: transparent;
    color: var(--punk-paper);
    border-color: var(--punk-paper);
}

.punk-btn--hotpink {
    background: var(--punk-hotpink);
    color: var(--punk-paper);
    border-color: var(--punk-hotpink);
}

.punk-btn--cyan {
    background: var(--punk-cyan);
    color: var(--punk-ink);
    border-color: var(--punk-ink);
}

.punk-btn--dark {
    background: var(--punk-ink);
    color: var(--punk-yellow);
    border-color: var(--punk-yellow);
}


/* ─── BURST / STARBURST (badges promotionnels) ─── */

.punk-burst {
    display: inline-block;
    background: var(--punk-yellow);
    color: var(--punk-ink);
    font-family: var(--font-comic);
    font-size: 0.9rem;
    text-transform: uppercase;
    padding: 6px 16px;
    clip-path: polygon(
        0% 15%, 10% 0%, 25% 8%, 40% 0%, 50% 10%,
        60% 0%, 75% 8%, 90% 0%, 100% 15%, 92% 30%,
        100% 50%, 92% 70%, 100% 85%, 90% 100%,
        75% 92%, 60% 100%, 50% 90%, 40% 100%,
        25% 92%, 10% 100%, 0% 85%, 8% 70%,
        0% 50%, 8% 30%
    );
    transform: rotate(-3deg);
}
.punk-burst--red {
    background: var(--punk-red);
    color: var(--punk-paper);
}
.punk-burst--pink {
    background: var(--punk-hotpink);
    color: var(--punk-paper);
}


/* ─── SCOTCH TAPE (CTA, labels) ─── */

.punk-tape {
    display: inline-block;
    background: rgba(255, 230, 0, 0.85);
    color: var(--punk-ink);
    font-family: var(--font-marker);
    font-size: 0.95rem;
    padding: 4px 20px;
    transform: rotate(1.5deg);
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.punk-tape::before,
.punk-tape::after {
    content: '';
    position: absolute;
    top: 0; width: 10px; height: 100%;
    background: rgba(255, 230, 0, 0.4);
}
.punk-tape::before { left: -5px; }
.punk-tape::after { right: -5px; }


/* ─── INK STAMP (badges NOUVEAU / COMPLET) ─── */

.punk-stamp {
    display: inline-block;
    font-family: var(--font-comic);
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 2px;
    color: var(--punk-red);
    border: 3px solid var(--punk-red);
    border-radius: 50%;
    padding: 12px;
    transform: rotate(-12deg);
    opacity: 0.85;
    line-height: 1.1;
    text-align: center;
}
.punk-stamp--square {
    border-radius: 4px;
    padding: 6px 14px;
    transform: rotate(-6deg);
}


/* ─── SECTIONS / LAYOUT ─── */

/* Section fond papier journal */
.punk-section--paper {
    background: var(--punk-paper);
    color: var(--punk-ink);
    position: relative;
}

/* Section fond noir */
.punk-section--dark {
    background: var(--punk-black);
    color: var(--punk-paper);
}

/* Bord déchiré (haut) — effet papier arraché anguleux */
.punk-torn-top {
    position: relative;
}
.punk-torn-top::before {
    content: '';
    position: absolute;
    top: -39px; left: 0; right: 0;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 L0,22 L15,18 L22,24 L35,14 L48,20 L55,10 L68,16 L80,6 L95,14 L105,8 L120,18 L132,12 L145,22 L155,16 L168,26 L178,14 L190,8 L205,18 L215,10 L230,20 L240,12 L255,6 L270,16 L280,22 L295,10 L308,18 L318,8 L332,14 L345,24 L355,12 L370,6 L385,16 L395,20 L408,10 L420,18 L432,8 L448,22 L458,14 L470,6 L485,16 L498,24 L508,12 L522,8 L535,18 L548,10 L560,20 L572,14 L585,6 L600,16 L612,22 L625,10 L638,18 L650,8 L665,14 L678,24 L688,10 L702,6 L715,18 L728,12 L742,22 L752,8 L768,16 L778,24 L790,10 L805,14 L818,6 L830,20 L842,12 L855,18 L868,8 L882,22 L892,14 L905,6 L920,16 L932,24 L945,10 L958,18 L968,8 L982,14 L995,22 L1008,12 L1020,6 L1035,18 L1048,10 L1060,20 L1072,14 L1085,8 L1098,24 L1110,16 L1122,6 L1138,18 L1148,12 L1162,22 L1175,8 L1188,16 L1200,12 L1200,40 Z' fill='%23f5f0e8'/%3E%3C/svg%3E") repeat-x bottom;
    background-size: 1200px 40px;
    z-index: 2;
}

/* Bord déchiré (bas) — effet papier arraché anguleux */
.punk-torn-bottom {
    position: relative;
}
.punk-torn-bottom::after {
    content: '';
    position: absolute;
    bottom: -39px; left: 0; right: 0;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,18 L1185,22 L1172,14 L1160,24 L1145,16 L1132,8 L1118,20 L1105,12 L1092,22 L1078,10 L1065,18 L1050,6 L1038,16 L1025,24 L1010,14 L998,8 L985,20 L970,12 L958,22 L945,10 L930,18 L918,6 L905,14 L890,24 L878,16 L865,8 L850,20 L838,12 L825,22 L810,10 L798,18 L785,6 L770,16 L758,24 L745,14 L730,8 L718,20 L705,12 L690,22 L678,10 L665,18 L650,6 L638,16 L625,24 L610,14 L598,8 L585,20 L570,12 L558,22 L545,10 L530,18 L518,6 L505,16 L490,24 L478,14 L465,8 L450,20 L438,12 L425,22 L410,10 L398,18 L385,6 L370,16 L358,24 L345,14 L330,8 L318,20 L305,12 L290,22 L278,10 L265,18 L250,6 L238,14 L225,24 L210,16 L198,8 L185,20 L170,12 L158,22 L145,10 L130,18 L118,6 L105,16 L90,24 L78,14 L65,8 L50,20 L38,12 L25,22 L12,14 L0,18 Z' fill='%23f5f0e8'/%3E%3C/svg%3E") repeat-x top;
    background-size: 1200px 40px;
    z-index: 2;
}

/* Variante dark (déchirure noire) */
.punk-torn-top-dark {
    position: relative;
}
.punk-torn-top-dark::before {
    content: '';
    position: absolute;
    top: -39px; left: 0; right: 0;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 L0,22 L15,18 L22,24 L35,14 L48,20 L55,10 L68,16 L80,6 L95,14 L105,8 L120,18 L132,12 L145,22 L155,16 L168,26 L178,14 L190,8 L205,18 L215,10 L230,20 L240,12 L255,6 L270,16 L280,22 L295,10 L308,18 L318,8 L332,14 L345,24 L355,12 L370,6 L385,16 L395,20 L408,10 L420,18 L432,8 L448,22 L458,14 L470,6 L485,16 L498,24 L508,12 L522,8 L535,18 L548,10 L560,20 L572,14 L585,6 L600,16 L612,22 L625,10 L638,18 L650,8 L665,14 L678,24 L688,10 L702,6 L715,18 L728,12 L742,22 L752,8 L768,16 L778,24 L790,10 L805,14 L818,6 L830,20 L842,12 L855,18 L868,8 L882,22 L892,14 L905,6 L920,16 L932,24 L945,10 L958,18 L968,8 L982,14 L995,22 L1008,12 L1020,6 L1035,18 L1048,10 L1060,20 L1072,14 L1085,8 L1098,24 L1110,16 L1122,6 L1138,18 L1148,12 L1162,22 L1175,8 L1188,16 L1200,12 L1200,40 Z' fill='%230a0a0a'/%3E%3C/svg%3E") repeat-x bottom;
    background-size: 1200px 40px;
    z-index: 2;
}
.punk-torn-bottom-dark {
    position: relative;
}
.punk-torn-bottom-dark::after {
    content: '';
    position: absolute;
    bottom: -39px; left: 0; right: 0;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,18 L1185,22 L1172,14 L1160,24 L1145,16 L1132,8 L1118,20 L1105,12 L1092,22 L1078,10 L1065,18 L1050,6 L1038,16 L1025,24 L1010,14 L998,8 L985,20 L970,12 L958,22 L945,10 L930,18 L918,6 L905,14 L890,24 L878,16 L865,8 L850,20 L838,12 L825,22 L810,10 L798,18 L785,6 L770,16 L758,24 L745,14 L730,8 L718,20 L705,12 L690,22 L678,10 L665,18 L650,6 L638,16 L625,24 L610,14 L598,8 L585,20 L570,12 L558,22 L545,10 L530,18 L518,6 L505,16 L490,24 L478,14 L465,8 L450,20 L438,12 L425,22 L410,10 L398,18 L385,6 L370,16 L358,24 L345,14 L330,8 L318,20 L305,12 L290,22 L278,10 L265,18 L250,6 L238,14 L225,24 L210,16 L198,8 L185,20 L170,12 L158,22 L145,10 L130,18 L118,6 L105,16 L90,24 L78,14 L65,8 L50,20 L38,12 L25,22 L12,14 L0,18 Z' fill='%230a0a0a'/%3E%3C/svg%3E") repeat-x top;
    background-size: 1200px 40px;
    z-index: 2;
}

/* Halftone dots overlay (impression comics) — appliqué en background, pas en pseudo-élément */
.punk-halftone {
    background-image: radial-gradient(circle, rgba(26,26,26,0.04) 1px, transparent 1px) !important;
    background-size: 6px 6px !important;
}


/* ─── NAVIGATION PUNK ─── */

.punk-nav {
    background: var(--punk-black);
    border-bottom: 3px solid var(--punk-yellow);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.punk-nav__logo {
    font-family: var(--font-comic);
    font-size: 1.6rem;
    color: var(--punk-paper);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}
.punk-nav__logo span {
    color: var(--punk-red);
    text-shadow: 2px 2px 0 var(--punk-yellow);
}

.punk-nav__links {
    display: flex;
    gap: 20px;
    list-style: none;
    align-items: center;
}
.punk-nav__links a {
    font-family: var(--font-typewriter);
    font-size: 0.85rem;
    color: var(--punk-gray-light);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.15s;
}
.punk-nav__links a:hover,
.punk-nav__links a.current {
    color: var(--punk-yellow);
}

/* Boutons menu spéciaux (Espace Prof / Élève) */
.punk-nav__btn {
    font-family: var(--font-comic) !important;
    font-size: 0.95rem !important;
    padding: 4px 12px !important;
    border: 2px solid var(--punk-red) !important;
    color: var(--punk-red) !important;
    transition: all 0.15s !important;
}
.punk-nav__btn:hover {
    background: var(--punk-red) !important;
    color: var(--punk-paper) !important;
}
.punk-nav__btn--student {
    border-color: var(--punk-cyan) !important;
    color: var(--punk-cyan) !important;
}
.punk-nav__btn--student:hover {
    background: var(--punk-cyan) !important;
    color: var(--punk-ink) !important;
}

/* Bouton déconnexion */
.punk-nav__btn-logout {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    color: var(--punk-gray-light) !important;
    opacity: 0.7;
    transition: opacity 0.15s !important;
}
.punk-nav__btn-logout:hover {
    opacity: 1;
    color: var(--punk-red) !important;
}


/* ─── ANIMATIONS ─── */

@keyframes punk-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-1deg); }
    75% { transform: rotate(1deg); }
}

@keyframes punk-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Hover shake sur les cartes */
.punk-panel:hover {
    animation: punk-shake 0.3s ease;
}

/* Curseur clignotant typewriter */
.punk-cursor::after {
    content: '█';
    animation: punk-blink 1s step-end infinite;
    color: var(--punk-red);
}


/* ─── FORMULAIRE LATEPOINT — OVERRIDE STYLES ─── */

.latepoint-booking-form-element {
    font-family: var(--font-typewriter) !important;
}

.latepoint-booking-form-element .lp-btn,
.latepoint-booking-form-element .latepoint-btn {
    font-family: var(--font-comic) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border-radius: 0 !important;
    border: 3px solid !important;
    transition: transform 0.1s ease !important;
}
.latepoint-booking-form-element .lp-btn:hover,
.latepoint-booking-form-element .latepoint-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 2px 2px 0 var(--punk-ink) !important;
}

/* Header du booking form */
.latepoint-booking-form-element .lp-heading {
    font-family: var(--font-comic) !important;
    text-transform: uppercase !important;
}


/* ─── RESPONSIVE ─── */

@media (max-width: 768px) {
    h1, .punk-h1 { font-size: 2.2rem; }
    h2, .punk-h2 { font-size: 1.6rem; }
    .punk-nav { flex-direction: column; gap: 12px; }
    .punk-nav__links { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .punk-panel { padding: var(--space-md); }
}


/* ─── UTILITIES ─── */

.punk-rotate-neg { transform: rotate(-1.5deg); }
.punk-rotate-pos { transform: rotate(1.5deg); }
.punk-rotate-neg-sm { transform: rotate(-0.5deg); }
.punk-rotate-pos-sm { transform: rotate(0.5deg); }

.punk-text-red { color: var(--punk-red); }
.punk-text-yellow { color: var(--punk-yellow); }
.punk-text-pink { color: var(--punk-hotpink); }
.punk-text-cyan { color: var(--punk-cyan); }
.punk-text-orange { color: var(--punk-orange); }
.punk-text-green { color: var(--punk-green); }
.punk-text-purple { color: var(--punk-purple); }
.punk-text-paper { color: var(--punk-paper); }
.punk-text-ink { color: var(--punk-ink); }

.punk-bg-black { background-color: var(--punk-black); }
.punk-bg-paper { background-color: var(--punk-paper); }
.punk-bg-red { background-color: var(--punk-red); }
.punk-bg-yellow { background-color: var(--punk-yellow); }
.punk-bg-pink { background-color: var(--punk-hotpink); }
.punk-bg-cyan { background-color: var(--punk-cyan); }
.punk-bg-orange { background-color: var(--punk-orange); }

.punk-shadow { box-shadow: var(--shadow-comic); }
.punk-shadow-red { box-shadow: var(--shadow-comic-red); }
.punk-shadow-yellow { box-shadow: var(--shadow-comic-yellow); }

.punk-border { border: var(--border-punk); }
.punk-border-thin { border: var(--border-punk-thin); }


/* ═══════════════════════════════════════════
   ELEMENTOR WIDGET CLASSES
   Ajoutez ces classes dans Avancé → CSS Classes
   de chaque widget Elementor natif
   ═══════════════════════════════════════════ */

/* ─── LABELS (petit texte en haut de section) ─── */
.punk-label .elementor-widget-container,
.punk-label .elementor-heading-title,
.elementor-widget.punk-label .elementor-heading-title,
.elementor-widget-heading.punk-label .elementor-heading-title {
    font-family: var(--font-mono) !important;
    font-size: 0.95rem !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--punk-gray-light) !important;
    margin-bottom: 6px !important;
}

/* ─── TITRES HERO (gros titre de page) ─── */
.punk-hero-title .elementor-heading-title,
.elementor-widget.punk-hero-title .elementor-heading-title,
.elementor-widget-heading.punk-hero-title .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: clamp(2rem, 5vw, 3rem) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-shadow: 3px 3px 0 var(--punk-red) !important;
    color: var(--punk-paper) !important;
    line-height: 1 !important;
}
/* Variante plus grande pour homepage */
.punk-hero-title-xl .elementor-heading-title,
.elementor-widget.punk-hero-title-xl .elementor-heading-title,
.elementor-widget-heading.punk-hero-title-xl .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: clamp(3.2rem, 7.5vw, 5rem) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-shadow: 3px 3px 0 var(--punk-red) !important;
    color: var(--punk-paper) !important;
    line-height: 0.92 !important;
}

/* ─── TITRES DE SECTION ─── */
.punk-sec-title .elementor-heading-title,
.elementor-widget.punk-sec-title .elementor-heading-title,
.elementor-widget-heading.punk-sec-title .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 12px !important;
}
/* Titre section sur fond clair */
.punk-sec-title-dark .elementor-heading-title,
.elementor-widget.punk-sec-title-dark .elementor-heading-title {
    color: var(--punk-ink) !important;
}

/* ─── SOUS-TITRES HERO ─── */
.punk-hero-sub .elementor-widget-container,
.punk-hero-sub .elementor-widget-container p,
.elementor-widget.punk-hero-sub .elementor-widget-container,
.elementor-widget-text-editor.punk-hero-sub .elementor-widget-container p {
    font-family: var(--font-typewriter) !important;
    font-size: 0.95rem !important;
    color: #aaa !important;
    line-height: 1.7 !important;
    max-width: 500px !important;
}
/* Centré */
.punk-hero-sub-center .elementor-widget-container,
.punk-hero-sub-center .elementor-widget-container p,
.elementor-widget.punk-hero-sub-center .elementor-widget-container,
.elementor-widget-text-editor.punk-hero-sub-center .elementor-widget-container p {
    font-family: var(--font-typewriter) !important;
    font-size: 0.95rem !important;
    color: #aaa !important;
    line-height: 1.7 !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* ─── TEXTE CORPS (typewriter) ─── */
.punk-text .elementor-widget-container,
.punk-text .elementor-widget-container p,
.elementor-widget.punk-text .elementor-widget-container,
.elementor-widget-text-editor.punk-text .elementor-widget-container p {
    font-family: var(--font-typewriter) !important;
    font-size: 0.9rem !important;
    line-height: 1.75 !important;
}
.punk-text .elementor-widget-container em,
.elementor-widget.punk-text .elementor-widget-container em {
    font-family: var(--font-hand) !important;
    color: var(--punk-hotpink) !important;
    font-style: normal !important;
}

/* ─── TEXTE HANDWRITTEN ─── */
.punk-text-hand .elementor-widget-container,
.punk-text-hand .elementor-widget-container p,
.elementor-widget.punk-text-hand .elementor-widget-container,
.elementor-widget-text-editor.punk-text-hand .elementor-widget-container p {
    font-family: var(--font-hand) !important;
    font-size: 0.9rem !important;
    color: var(--punk-gray) !important;
    line-height: 1.5 !important;
}

/* ─── CITATION WITTGENSTEIN ─── */
.punk-quote .elementor-widget-container,
.punk-quote .elementor-widget-container p,
.elementor-widget.punk-quote .elementor-widget-container,
.elementor-widget-text-editor.punk-quote .elementor-widget-container p {
    font-family: var(--font-marker) !important;
    font-size: 1.15rem !important;
    color: var(--punk-orange) !important;
    transform: rotate(-1deg) !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* ─── BOUTONS ─── */
/* Bouton rouge punk */
.punk-btn-red .elementor-button,
.punk-btn-red .elementor-button-link,
.punk-btn-red .elementor-button-wrapper .elementor-button,
.elementor-widget.punk-btn-red .elementor-button {
    font-family: var(--font-comic) !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 10px 22px !important;
    background-color: var(--punk-red) !important;
    background-image: none !important;
    color: var(--punk-paper) !important;
    border: 3px solid var(--punk-red) !important;
    border-radius: 0 !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
    box-shadow: none !important;
}
.punk-btn-red .elementor-button:hover,
.punk-btn-red .elementor-button:focus,
.elementor-widget.punk-btn-red .elementor-button:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 3px 3px 0 var(--punk-paper) !important;
    background-color: var(--punk-red) !important;
    color: var(--punk-paper) !important;
}

/* Bouton jaune */
.punk-btn-yellow .elementor-button,
.punk-btn-yellow .elementor-button-link,
.punk-btn-yellow .elementor-button-wrapper .elementor-button,
.elementor-widget.punk-btn-yellow .elementor-button {
    font-family: var(--font-comic) !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 10px 22px !important;
    background-color: var(--punk-yellow) !important;
    background-image: none !important;
    color: var(--punk-ink) !important;
    border: 3px solid var(--punk-ink) !important;
    border-radius: 0 !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
    box-shadow: none !important;
}
.punk-btn-yellow .elementor-button:hover,
.punk-btn-yellow .elementor-button:focus,
.elementor-widget.punk-btn-yellow .elementor-button:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 3px 3px 0 var(--punk-ink) !important;
    background-color: var(--punk-yellow) !important;
    color: var(--punk-ink) !important;
}

/* Bouton outline (transparent) */
.punk-btn-outline .elementor-button,
.punk-btn-outline .elementor-button-link,
.punk-btn-outline .elementor-button-wrapper .elementor-button,
.elementor-widget.punk-btn-outline .elementor-button {
    font-family: var(--font-comic) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 8px 18px !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--punk-ink) !important;
    border: 3px solid var(--punk-ink) !important;
    border-radius: 0 !important;
    transition: transform 0.1s !important;
    box-shadow: none !important;
}
.punk-btn-outline .elementor-button:hover,
.elementor-widget.punk-btn-outline .elementor-button:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 2px 2px 0 var(--punk-ink) !important;
    background-color: transparent !important;
}
/* Variante outline sur fond sombre */
.punk-btn-outline-light .elementor-button,
.elementor-widget.punk-btn-outline-light .elementor-button {
    font-family: var(--font-comic) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 8px 18px !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--punk-paper) !important;
    border: 3px solid var(--punk-paper) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.punk-btn-outline-light .elementor-button:hover,
.elementor-widget.punk-btn-outline-light .elementor-button:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 2px 2px 0 var(--punk-paper) !important;
}

/* ─── SECTIONS / ARRIÈRE-PLANS ─── */
/* Section fond papier */
.punk-bg-paper,
.elementor-section.punk-bg-paper,
.elementor-element.punk-bg-paper {
    background-color: var(--punk-paper) !important;
}

.punk-bg-paper .elementor-widget-container,
.punk-bg-paper .elementor-heading-title,
.punk-bg-paper .elementor-widget-container p {
    color: var(--punk-ink) !important;
}

/* Section fond noir */
.punk-bg-dark,
.elementor-section.punk-bg-dark,
.elementor-element.punk-bg-dark {
    background-color: var(--punk-black) !important;
}

/* Section fond rouge */
.punk-bg-red,
.elementor-section.punk-bg-red,
.elementor-element.punk-bg-red {
    background-color: var(--punk-red) !important;
}
.punk-bg-red .elementor-widget-container,
.punk-bg-red .elementor-heading-title,
.punk-bg-red .elementor-widget-container p,
.punk-bg-red .elementor-widget-text-editor .elementor-widget-container p {
    color: var(--punk-paper) !important;
}

/* ─── CTA (titre + sous-titre dans bandeau rouge) ─── */
.punk-cta-title .elementor-heading-title,
.elementor-widget.punk-cta-title .elementor-heading-title,
.elementor-widget-heading.punk-cta-title .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: clamp(1.4rem, 3.5vw, 2rem) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-shadow: 2px 2px 0 rgba(0,0,0,.3) !important;
    color: var(--punk-paper) !important;
}
.punk-cta-sub .elementor-widget-container,
.punk-cta-sub .elementor-widget-container p,
.elementor-widget.punk-cta-sub .elementor-widget-container,
.elementor-widget-text-editor.punk-cta-sub .elementor-widget-container p {
    font-family: var(--font-hand) !important;
    font-size: 1rem !important;
    color: var(--punk-paper) !important;
    opacity: 0.9 !important;
}

/* ─── HALFTONE (sur section Elementor) ─── */
.punk-halftone,
.elementor-section.punk-halftone,
.elementor-element.punk-halftone {
    background-image: radial-gradient(circle, rgba(26,26,26,0.04) 1px, transparent 1px) !important;
    background-size: 6px 6px !important;
}

/* ─── TORN EDGE (sur section Elementor) ─── */
.punk-torn-top,
.elementor-section.punk-torn-top,
.elementor-element.punk-torn-top {
    position: relative !important;
}
.punk-torn-top::before,
.elementor-section.punk-torn-top::before,
.elementor-element.punk-torn-top::before {
    content: '' !important;
    position: absolute !important;
    top: -39px !important;
    left: 0 !important;
    right: 0 !important;
    height: 40px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 L0,22 L15,18 L22,24 L35,14 L48,20 L55,10 L68,16 L80,6 L95,14 L105,8 L120,18 L132,12 L145,22 L155,16 L168,26 L178,14 L190,8 L205,18 L215,10 L230,20 L240,12 L255,6 L270,16 L280,22 L295,10 L308,18 L318,8 L332,14 L345,24 L355,12 L370,6 L385,16 L395,20 L408,10 L420,18 L432,8 L448,22 L458,14 L470,6 L485,16 L498,24 L508,12 L522,8 L535,18 L548,10 L560,20 L572,14 L585,6 L600,16 L612,22 L625,10 L638,18 L650,8 L665,14 L678,24 L688,10 L702,6 L715,18 L728,12 L742,22 L752,8 L768,16 L778,24 L790,10 L805,14 L818,6 L830,20 L842,12 L855,18 L868,8 L882,22 L892,14 L905,6 L920,16 L932,24 L945,10 L958,18 L968,8 L982,14 L995,22 L1008,12 L1020,6 L1035,18 L1048,10 L1060,20 L1072,14 L1085,8 L1098,24 L1110,16 L1122,6 L1138,18 L1148,12 L1162,22 L1175,8 L1188,16 L1200,12 L1200,40 Z' fill='%23f5f0e8'/%3E%3C/svg%3E") repeat-x bottom !important;
    background-size: 1200px 40px !important;
    z-index: 2 !important;
}

/* ─── BURST (étoile jaune) ─── */
.punk-burst,
.elementor-widget.punk-burst {
    width: fit-content !important;
    max-width: fit-content !important;
    display: inline-block !important;
}
.punk-burst .elementor-widget-container,
.punk-burst .elementor-heading-title,
.elementor-widget.punk-burst .elementor-widget-container,
.elementor-widget.punk-burst .elementor-heading-title,
.elementor-widget-heading.punk-burst .elementor-heading-title {
    display: inline-block !important;
    background: var(--punk-yellow) !important;
    color: var(--punk-ink) !important;
    font-family: var(--font-comic) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    padding: 5px 14px !important;
    clip-path: polygon(0% 15%,10% 0%,25% 8%,40% 0%,50% 10%,60% 0%,75% 8%,90% 0%,100% 15%,92% 30%,100% 50%,92% 70%,100% 85%,90% 100%,75% 92%,60% 100%,50% 90%,40% 100%,25% 92%,10% 100%,0% 85%,8% 70%,0% 50%,8% 30%) !important;
    transform: rotate(-3deg) !important;
    width: auto !important;
    max-width: fit-content !important;
}

/* ─── STAMP (cercle rose) ─── */
.punk-stamp-circle .elementor-widget-container,
.elementor-widget.punk-stamp-circle .elementor-widget-container,
.elementor-widget-heading.punk-stamp-circle .elementor-heading-title {
    width: 160px !important;
    height: 160px !important;
    border: 3px solid var(--punk-hotpink) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-comic) !important;
    font-size: 1rem !important;
    color: var(--punk-hotpink) !important;
    text-align: center !important;
    transform: rotate(-15deg) !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 auto !important;
}

/* ─── WPFORMS OVERRIDES ─── */
.punk-form .wpforms-container{max-width:600px!important;margin:0 auto!important;padding:0 24px!important}
.punk-form .wpforms-container .wpforms-form{background:var(--punk-paper)!important}
.punk-form .wpforms-container .wpforms-field{margin-bottom:12px!important;padding:0!important}
.punk-form .wpforms-container .wpforms-field-label{font-family:var(--font-typewriter)!important;font-size:.8rem!important;text-transform:uppercase!important;letter-spacing:1px!important;color:var(--punk-ink)!important;margin-bottom:4px!important;font-weight:normal!important}
.punk-form .wpforms-container .wpforms-field-sublabel{font-family:var(--font-mono)!important;font-size:.65rem!important;color:var(--punk-gray)!important}
.punk-form .wpforms-container input[type="text"],
.punk-form .wpforms-container input[type="email"],
.punk-form .wpforms-container input[type="tel"],
.punk-form .wpforms-container textarea{font-family:var(--font-typewriter)!important;font-size:.88rem!important;border:2px solid var(--punk-ink)!important;border-radius:0!important;background:#fff!important;color:var(--punk-ink)!important;padding:8px 10px!important;width:100%!important;box-shadow:none!important}
.punk-form .wpforms-container input:focus,
.punk-form .wpforms-container textarea:focus{border-color:var(--punk-red)!important;outline:none!important;box-shadow:none!important}
.punk-form .wpforms-container textarea{min-height:80px!important;resize:vertical!important}
.punk-form .wpforms-container button[type="submit"],
.punk-form .wpforms-container .wpforms-submit,
.punk-form .wpforms-submit,
.punk-form button[type="submit"],
.punk-form div.wpforms-container-full .wpforms-form button[type="submit"],
.punk-form div.wpforms-container-full .wpforms-form .wpforms-submit-container button {
    font-family: var(--font-comic) !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 10px 28px !important;
    background-color: var(--punk-red) !important;
    background-image: none !important;
    color: var(--punk-paper) !important;
    border: 3px solid var(--punk-red) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
    box-shadow: none !important;
    width: auto !important;
}
.punk-form .wpforms-container button[type="submit"]:hover,
.punk-form .wpforms-submit:hover,
.punk-form button[type="submit"]:hover,
.punk-form div.wpforms-container-full .wpforms-form button[type="submit"]:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 3px 3px 0 var(--punk-ink) !important;
    background-color: var(--punk-red) !important;
}
.punk-form .wpforms-container .wpforms-recaptcha-container{margin-top:8px!important;margin-bottom:0!important}
.punk-form .wpforms-container-full .wpforms-form{padding:0!important;margin:0!important}
.punk-form .wpforms-container-full{padding:0!important;margin:0!important}

/* ─── LATEPOINT BUTTON OVERRIDE ─── */
.punk-latepoint .latepoint-book-button,
.punk-latepoint .latepoint-btn,
.elementor-widget.punk-latepoint .latepoint-book-button,
.elementor-section.punk-latepoint .latepoint-book-button,
.elementor-element.punk-latepoint .latepoint-book-button {
    font-family: var(--font-comic) !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 14px 36px !important;
    background-color: var(--punk-red) !important;
    background-image: none !important;
    color: var(--punk-paper) !important;
    border: 3px solid var(--punk-red) !important;
    border-radius: 0 !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
    box-shadow: none !important;
}
.punk-latepoint .latepoint-book-button:hover,
.punk-latepoint .latepoint-btn:hover,
.elementor-widget.punk-latepoint .latepoint-book-button:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 3px 3px 0 var(--punk-paper) !important;
    background-color: var(--punk-red) !important;
}


/* ═══════════════════════════════════════════
   CLASSES COLONNES / SECTIONS ELEMENTOR
   Pour les layouts complexes (cartes, profils,
   valeurs, étapes, etc.)
   ═══════════════════════════════════════════ */

/* ─── CARTES MATIÈRES (section 2 colonnes) ─── */
/* Appliquer sur une colonne Elementor */
.punk-card-eng,
.elementor-column.punk-card-eng > .elementor-widget-wrap,
.elementor-column.punk-card-eng > .elementor-element {
    border: 3px solid var(--punk-red) !important;
    border-left: 6px solid var(--punk-red) !important;
    padding: 28px !important;
    background-color: rgba(255,0,51,0.03) !important;
    transition: transform 0.15s !important;
}
.punk-card-eng:hover { transform: rotate(-0.5deg) !important; }

.punk-card-math,
.elementor-column.punk-card-math > .elementor-widget-wrap,
.elementor-column.punk-card-math > .elementor-element {
    border: 3px solid var(--punk-cyan) !important;
    border-left: 6px solid var(--punk-cyan) !important;
    padding: 28px !important;
    background-color: rgba(0,206,209,0.03) !important;
    transition: transform 0.15s !important;
}
.punk-card-math:hover { transform: rotate(-0.5deg) !important; }

/* ─── TITRES MATIÈRES ─── */
.punk-title-eng .elementor-heading-title,
.elementor-widget.punk-title-eng .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: 1.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--punk-red) !important;
}
.punk-title-math .elementor-heading-title,
.elementor-widget.punk-title-math .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: 1.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--punk-cyan) !important;
}

/* ─── TEXTE PROF (sous le titre matière) ─── */
.punk-prof .elementor-widget-container,
.punk-prof .elementor-widget-container p,
.elementor-widget.punk-prof .elementor-widget-container {
    font-family: var(--font-hand) !important;
    font-size: 0.9rem !important;
    color: var(--punk-gray-light) !important;
}

/* ─── TEXTE DESCRIPTION (sous le prof) ─── */
.punk-desc .elementor-widget-container,
.punk-desc .elementor-widget-container p,
.elementor-widget.punk-desc .elementor-widget-container {
    font-family: var(--font-typewriter) !important;
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    color: #bbb !important;
}

/* ─── LIEN FLÈCHE (Voir les formules →) ─── */
.punk-link .elementor-widget-container a,
.punk-link a,
.elementor-widget.punk-link .elementor-widget-container a {
    font-family: var(--font-comic) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: text-decoration 0.15s !important;
}
.punk-link a:hover { text-decoration: underline !important; }
.punk-link-red a { color: var(--punk-red) !important; }
.punk-link-cyan a { color: var(--punk-cyan) !important; }

/* ─── VALEURS (colonnes avec bord gauche) ─── */
.punk-value,
.elementor-column.punk-value > .elementor-widget-wrap {
    padding: 24px !important;
    border-left: 4px solid var(--punk-red) !important;
    background-color: rgba(255,0,51,0.02) !important;
}
.punk-value-pink,
.elementor-column.punk-value-pink > .elementor-widget-wrap {
    padding: 24px !important;
    border-left: 4px solid var(--punk-hotpink) !important;
    background-color: rgba(255,20,147,0.02) !important;
}
.punk-value-cyan,
.elementor-column.punk-value-cyan > .elementor-widget-wrap {
    padding: 24px !important;
    border-left: 4px solid var(--punk-cyan) !important;
    background-color: rgba(0,206,209,0.02) !important;
}

/* Titre de valeur */
.punk-value-title .elementor-heading-title,
.elementor-widget.punk-value-title .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    color: var(--punk-ink) !important;
    margin-bottom: 6px !important;
}
/* Texte de valeur */
.punk-value-text .elementor-widget-container,
.punk-value-text .elementor-widget-container p,
.elementor-widget.punk-value-text .elementor-widget-container {
    font-family: var(--font-hand) !important;
    font-size: 0.88rem !important;
    color: var(--punk-gray) !important;
    line-height: 1.5 !important;
}

/* ─── INFOS PRATIQUES (colonnes avec bord gauche jaune) ─── */
.punk-info,
.elementor-column.punk-info > .elementor-widget-wrap {
    padding: 14px 16px !important;
    border-left: 3px solid var(--punk-yellow) !important;
}
.punk-info-title .elementor-heading-title,
.elementor-widget.punk-info-title .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    margin-bottom: 3px !important;
}
.punk-info-text .elementor-widget-container,
.punk-info-text .elementor-widget-container p,
.elementor-widget.punk-info-text .elementor-widget-container {
    font-family: var(--font-typewriter) !important;
    font-size: 0.82rem !important;
    color: var(--punk-gray) !important;
    line-height: 1.5 !important;
}

/* ─── ÉTAPES NUMÉROTÉES ─── */
.punk-step-num .elementor-heading-title,
.elementor-widget.punk-step-num .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: 2.2rem !important;
    color: var(--punk-red) !important;
    line-height: 1 !important;
}
.punk-step-title .elementor-heading-title,
.elementor-widget.punk-step-title .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}
.punk-step-desc .elementor-widget-container,
.punk-step-desc .elementor-widget-container p,
.elementor-widget.punk-step-desc .elementor-widget-container {
    font-family: var(--font-hand) !important;
    font-size: 0.88rem !important;
    color: var(--punk-gray-light) !important;
    line-height: 1.4 !important;
}

/* ─── PRIX (gros chiffre) ─── */
.punk-price .elementor-heading-title,
.elementor-widget.punk-price .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: 2.4rem !important;
    line-height: 1 !important;
}
.punk-price-red .elementor-heading-title { color: var(--punk-red) !important; }
.punk-price-yellow .elementor-heading-title { color: var(--punk-yellow) !important; }
.punk-price-pink .elementor-heading-title { color: var(--punk-hotpink) !important; }
.punk-price-cyan .elementor-heading-title { color: var(--punk-cyan) !important; }

/* ─── SOUS-PRIX (détail) ─── */
.punk-price-info .elementor-widget-container,
.punk-price-info .elementor-widget-container p,
.elementor-widget.punk-price-info .elementor-widget-container {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    color: var(--punk-gray-light) !important;
}

/* ─── LISTE FEATURES (→ devant chaque item) ─── */
.punk-features .elementor-widget-container ul,
.punk-features .elementor-widget-container li,
.elementor-widget.punk-features .elementor-widget-container li {
    font-family: var(--font-typewriter) !important;
    font-size: 0.82rem !important;
    line-height: 1.8 !important;
    list-style: none !important;
}
.punk-features .elementor-widget-container li::before {
    content: '→ ' !important;
    color: var(--punk-red) !important;
}

/* ─── PROFILS PROFS (sur colonne) ─── */
.punk-profile-name .elementor-heading-title,
.elementor-widget.punk-profile-name .elementor-heading-title {
    font-family: var(--font-comic) !important;
    font-size: 2rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}
.punk-profile-name-red .elementor-heading-title { color: var(--punk-red) !important; }
.punk-profile-name-cyan .elementor-heading-title { color: var(--punk-cyan) !important; }

.punk-profile-role .elementor-widget-container,
.punk-profile-role .elementor-widget-container p,
.elementor-widget.punk-profile-role .elementor-widget-container {
    font-family: var(--font-hand) !important;
    font-size: 1.1rem !important;
    color: var(--punk-gray-light) !important;
}

/* ─── TAGS (petits badges) ─── */
.punk-tags .elementor-widget-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* ─── PHOTO PLACEHOLDER (rectangle coloré) ─── */
.punk-photo-placeholder-red,
.elementor-column.punk-photo-placeholder-red > .elementor-widget-wrap {
    background-color: var(--punk-red) !important;
    border: 3px solid var(--punk-ink) !important;
    transform: rotate(-2deg) !important;
    box-shadow: 4px 4px 0 var(--punk-ink) !important;
    min-height: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.punk-photo-placeholder-cyan,
.elementor-column.punk-photo-placeholder-cyan > .elementor-widget-wrap {
    background-color: var(--punk-cyan) !important;
    border: 3px solid var(--punk-ink) !important;
    transform: rotate(1.5deg) !important;
    box-shadow: 4px 4px 0 var(--punk-ink) !important;
    min-height: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ─── LIEN DISCRET (style contact) ─── */
.punk-link-quiet .elementor-widget-container a,
.punk-link-quiet a {
    font-family: var(--font-hand) !important;
    font-size: 0.9rem !important;
    color: var(--punk-gray) !important;
    text-decoration: underline !important;
}
.punk-link-quiet a:hover {
    color: var(--punk-paper) !important;
}

/* ─── ICÔNE EMOJI (gros) ─── */
.punk-emoji .elementor-heading-title,
.elementor-widget.punk-emoji .elementor-heading-title {
    font-size: 2rem !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

/* ─── TAPE / SCOTCH ─── */
.punk-tape-el .elementor-widget-container,
.punk-tape-el .elementor-heading-title,
.elementor-widget.punk-tape-el .elementor-widget-container {
    display: inline-block !important;
    background-color: rgba(255,230,0,0.85) !important;
    color: var(--punk-ink) !important;
    font-family: var(--font-marker) !important;
    font-size: 0.78rem !important;
    padding: 3px 14px !important;
    transform: rotate(1.5deg) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}


/* ═══════════════════════════════════════════
   FIX: Elementor sans .elementor-widget-container
   Certaines versions d'Elementor ne génèrent pas
   le wrapper .elementor-widget-container.
   Ces règles ciblent le contenu directement.
   ═══════════════════════════════════════════ */

/* Labels */
.punk-label > .elementor-heading-title,
.punk-label > p,
.punk-label > div { font-family: var(--font-mono) !important; font-size: 0.95rem !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--punk-gray-light) !important; margin-bottom: 6px !important; }

/* Hero titles */
.punk-hero-title > .elementor-heading-title,
.punk-hero-title > h1,
.punk-hero-title > h2 { font-family: var(--font-comic) !important; font-size: clamp(2rem, 5vw, 3rem) !important; text-transform: uppercase !important; letter-spacing: 2px !important; text-shadow: 3px 3px 0 var(--punk-red) !important; color: var(--punk-paper) !important; line-height: 1 !important; }

.punk-hero-title-xl > .elementor-heading-title,
.punk-hero-title-xl > h1,
.punk-hero-title-xl > span { font-family: var(--font-comic) !important; font-size: clamp(3.2rem, 7.5vw, 5rem) !important; text-transform: uppercase !important; letter-spacing: 2px !important; text-shadow: 3px 3px 0 var(--punk-red) !important; color: var(--punk-paper) !important; line-height: 0.92 !important; }

/* Section titles */
.punk-sec-title > .elementor-heading-title,
.punk-sec-title > h2,
.punk-sec-title > h3 { font-family: var(--font-comic) !important; font-size: clamp(1.6rem, 4vw, 2.4rem) !important; text-transform: uppercase !important; letter-spacing: 2px !important; margin-bottom: 12px !important; }

.punk-sec-title-dark > .elementor-heading-title,
.punk-sec-title-dark > h2 { color: var(--punk-ink) !important; }

/* Hero sub */
.punk-hero-sub > p,
.punk-hero-sub > div { font-family: var(--font-typewriter) !important; font-size: 0.95rem !important; color: #aaa !important; line-height: 1.7 !important; max-width: 500px !important; }

.punk-hero-sub-center > p,
.punk-hero-sub-center > div { font-family: var(--font-typewriter) !important; font-size: 0.95rem !important; color: #aaa !important; line-height: 1.7 !important; max-width: 500px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; }

/* Body text */
.punk-text > p,
.punk-text > div { font-family: var(--font-typewriter) !important; font-size: 0.9rem !important; line-height: 1.75 !important; color: var(--punk-ink) !important; }
.punk-text > p em,
.punk-text > div em { font-family: var(--font-hand) !important; color: var(--punk-hotpink) !important; font-style: normal !important; }

/* Handwritten text */
.punk-text-hand > p,
.punk-text-hand > div { font-family: var(--font-hand) !important; font-size: 0.9rem !important; color: var(--punk-gray) !important; line-height: 1.5 !important; }

/* Quote */
.punk-quote > p,
.punk-quote > div { font-family: var(--font-marker) !important; font-size: 1.15rem !important; color: var(--punk-orange) !important; transform: rotate(-1deg) !important; text-align: center !important; line-height: 1.3 !important; }

/* CTA title */
.punk-cta-title > .elementor-heading-title,
.punk-cta-title > h2 { font-family: var(--font-comic) !important; font-size: clamp(1.4rem, 3.5vw, 2rem) !important; text-transform: uppercase !important; letter-spacing: 2px !important; text-shadow: 2px 2px 0 rgba(0,0,0,.3) !important; color: var(--punk-paper) !important; }

/* CTA sub */
.punk-cta-sub > p,
.punk-cta-sub > div { font-family: var(--font-hand) !important; font-size: 1rem !important; color: var(--punk-paper) !important; opacity: 0.9 !important; }

/* Burst */
.punk-burst > .elementor-heading-title,
.punk-burst > span,
.punk-burst > div { display: inline-block !important; background: var(--punk-yellow) !important; color: var(--punk-ink) !important; font-family: var(--font-comic) !important; font-size: 0.75rem !important; text-transform: uppercase !important; padding: 5px 14px !important; clip-path: polygon(0% 15%,10% 0%,25% 8%,40% 0%,50% 10%,60% 0%,75% 8%,90% 0%,100% 15%,92% 30%,100% 50%,92% 70%,100% 85%,90% 100%,75% 92%,60% 100%,50% 90%,40% 100%,25% 92%,10% 100%,0% 85%,8% 70%,0% 50%,8% 30%) !important; transform: rotate(-3deg) !important; width: auto !important; max-width: fit-content !important; }

/* Stamp circle */
.punk-stamp-circle > .elementor-heading-title,
.punk-stamp-circle > div,
.punk-stamp-circle > p { width: 160px !important; height: 160px !important; border: 3px solid var(--punk-hotpink) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-comic) !important; font-size: 1rem !important; color: var(--punk-hotpink) !important; text-align: center !important; transform: rotate(-15deg) !important; line-height: 1.1 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 0 auto !important; }

/* Descriptions */
.punk-desc > p,
.punk-desc > div { font-family: var(--font-typewriter) !important; font-size: 0.88rem !important; line-height: 1.65 !important; color: #bbb !important; }

/* Prof */
.punk-prof > p,
.punk-prof > div { font-family: var(--font-hand) !important; font-size: 0.9rem !important; color: var(--punk-gray-light) !important; }

/* Title eng/math */
.punk-title-eng > .elementor-heading-title,
.punk-title-eng > h3 { font-family: var(--font-comic) !important; font-size: 1.5rem !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: var(--punk-red) !important; }
.punk-title-math > .elementor-heading-title,
.punk-title-math > h3 { font-family: var(--font-comic) !important; font-size: 1.5rem !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: var(--punk-cyan) !important; }

/* Links */
.punk-link a,
.punk-link > p a,
.punk-link > div a { font-family: var(--font-comic) !important; font-size: 0.85rem !important; text-transform: uppercase !important; letter-spacing: 1px !important; text-decoration: none !important; }
.punk-link a:hover { text-decoration: underline !important; }
.punk-link-red a { color: var(--punk-red) !important; }
.punk-link-cyan a { color: var(--punk-cyan) !important; }

/* Value titles */
.punk-value-title > .elementor-heading-title,
.punk-value-title > h3 { font-family: var(--font-comic) !important; font-size: 1.1rem !important; text-transform: uppercase !important; color: var(--punk-ink) !important; margin-bottom: 6px !important; }

/* Value text */
.punk-value-text > p,
.punk-value-text > div { font-family: var(--font-hand) !important; font-size: 0.88rem !important; color: var(--punk-gray) !important; line-height: 1.5 !important; }

/* Info titles */
.punk-info-title > .elementor-heading-title,
.punk-info-title > h3 { font-family: var(--font-comic) !important; font-size: 0.9rem !important; text-transform: uppercase !important; margin-bottom: 3px !important; }

/* Info text */
.punk-info-text > p,
.punk-info-text > div { font-family: var(--font-typewriter) !important; font-size: 0.82rem !important; color: var(--punk-gray) !important; line-height: 1.5 !important; }

/* Step number */
.punk-step-num > .elementor-heading-title,
.punk-step-num > div { font-family: var(--font-comic) !important; font-size: 2.2rem !important; color: var(--punk-red) !important; line-height: 1 !important; }

/* Step title */
.punk-step-title > .elementor-heading-title,
.punk-step-title > h3 { font-family: var(--font-comic) !important; font-size: 1rem !important; text-transform: uppercase !important; margin-bottom: 4px !important; }

/* Step desc */
.punk-step-desc > p,
.punk-step-desc > div { font-family: var(--font-hand) !important; font-size: 0.88rem !important; color: var(--punk-gray-light) !important; line-height: 1.4 !important; }

/* Prices */
.punk-price > .elementor-heading-title,
.punk-price > div { font-family: var(--font-comic) !important; font-size: 2.4rem !important; line-height: 1 !important; }
.punk-price-red > .elementor-heading-title { color: var(--punk-red) !important; }
.punk-price-yellow > .elementor-heading-title { color: var(--punk-yellow) !important; }
.punk-price-pink > .elementor-heading-title { color: var(--punk-hotpink) !important; }
.punk-price-cyan > .elementor-heading-title { color: var(--punk-cyan) !important; }

/* Price info */
.punk-price-info > p,
.punk-price-info > div { font-family: var(--font-mono) !important; font-size: 0.72rem !important; color: var(--punk-gray-light) !important; }

/* Profile name */
.punk-profile-name > .elementor-heading-title,
.punk-profile-name > h3 { font-family: var(--font-comic) !important; font-size: 2rem !important; text-transform: uppercase !important; letter-spacing: 2px !important; }
.punk-profile-name-red > .elementor-heading-title,
.punk-profile-name-red > h3 { color: var(--punk-red) !important; }
.punk-profile-name-cyan > .elementor-heading-title,
.punk-profile-name-cyan > h3 { color: var(--punk-cyan) !important; }

/* Profile role */
.punk-profile-role > p,
.punk-profile-role > div { font-family: var(--font-hand) !important; font-size: 1.1rem !important; color: var(--punk-gray-light) !important; }

/* Emoji */
.punk-emoji > .elementor-heading-title,
.punk-emoji > div { font-size: 2rem !important; line-height: 1 !important; margin-bottom: 8px !important; }

/* Features list */
.punk-features ul,
.punk-features li,
.punk-features > div li { font-family: var(--font-typewriter) !important; font-size: 0.82rem !important; line-height: 1.8 !important; list-style: none !important; }
.punk-features li::before { content: '→ ' !important; color: var(--punk-red) !important; }

/* Tape */
.punk-tape-el > div,
.punk-tape-el > .elementor-heading-title,
.punk-tape-el > p { display: inline-block !important; background-color: rgba(255,230,0,0.85) !important; color: var(--punk-ink) !important; font-family: var(--font-marker) !important; font-size: 0.78rem !important; padding: 3px 14px !important; transform: rotate(1.5deg) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; }

/* Quiet link */
.punk-link-quiet a,
.punk-link-quiet > p a,
.punk-link-quiet > div a { font-family: var(--font-hand) !important; font-size: 0.9rem !important; color: var(--punk-gray) !important; text-decoration: underline !important; }
.punk-link-quiet a:hover { color: var(--punk-paper) !important; }

/* Bg sections - text colors for direct children */
.punk-bg-paper > p,
.punk-bg-paper > div > p { color: var(--punk-ink) !important; }
.punk-bg-red > p,
.punk-bg-red > div > p,
.punk-bg-red > h2 { color: var(--punk-paper) !important; }