/* ════════════════════════════════
   PAGE À PROPOS - Identité Aperitiu
   Maquette Figma : "À propos" (1440px desktop)
   Sections : Hero orange / Philosophie / 4 valeurs / Qualité / Événements.
════════════════════════════════ */

.about-page {
    --ab-cream:     #f3e9d7;
    --ab-cream-2:   #fbf4e9;
    --ab-cream-3:   #f1ead8;
    --ab-white:     #fffdf8;
    --ab-orange:    #ffa200;
    --ab-orange-2:  #f3a63c;
    --ab-red:       #e85a28;
    --ab-red-dark:  #b22222;
    --ab-dark:      #242323;
    --ab-grey:      #dbdbdb;
    --ab-muted:     #7a6b58;

    --ab-font-display: 'Erica One', 'Anton', Impact, sans-serif;
    --ab-font-script:  'Darumadrop One', 'Caveat', cursive;
    --ab-font-body:    'DM Sans', 'Poppins', system-ui, sans-serif;

    --ab-max: 1440px;
    --ab-pad: 100px;

    background: var(--ab-cream);
    overflow-x: clip;
}

/* La navbar de base est cachée sur la home / about → on reset le padding-top. */
.about-page main { padding-top: 0; }
body.about-page > .blob { display: none !important; }

.about-page h1, .about-page h2, .about-page h3 { margin: 0; }
.about-page ul { margin: 0; padding: 0; list-style: none; }
.about-page img { display: block; max-width: 100%; }

.ab-wrap {
    max-width: var(--ab-max);
    margin: 0 auto;
    padding: 0 var(--ab-pad);
    position: relative;
    box-sizing: border-box;
}

/* ════════════════════════════════
   1. HERO
════════════════════════════════ */
/* Hero - copie 1:1 du pattern .cc-hero des pages catégorie (planches /
   extras / boissons). Centré, simple, sans colonne photos. Mascotte
   décorative absolue + bande crénelée (_hero_band.html.twig) en bas. */
.ab-hero {
    position: relative;
    min-height: 700px;
    background-color: var(--ab-red);
    background-image: url('/images/home/union3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
    overflow: visible;
}

.ab-hero-mascot {
    position: absolute;
    top: 124px;
    left: calc(50% - 720px + 14px);
    width: 117px;
    height: 103px;
    z-index: 5;
    pointer-events: none;
    transform: scaleY(-1) rotate(174.51deg);
}
.ab-hero-mascot img { width: 100%; height: 100%; object-fit: contain; }

.ab-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--ab-max);
    margin: 0 auto;
    padding: 175px var(--ab-pad) 100px;
    box-sizing: border-box;
    color: #fff;
}

.ab-hero-title {
    font-family: var(--ab-font-display);
    font-size: clamp(80px, 7.5vw, 122px);
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.0;
    letter-spacing: -2px;
    max-width: 900px;
    margin: 0;
}
.ab-hero-title span { display: block; }
.ab-hero-title .ab-hero-title-line {
    display: block;
    margin-bottom: 4px;
}
/* Stamp jaune uniquement. Le texte hérite du blanc du titre. */
.ab-hero-title .ab-hero-title-stamp {
    display: inline-block;
    position: relative;
    padding: 14px 20px 18px;
    line-height: 1;
    background-image: url('/images/home/rect3464584.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.ab-hero-desc {
    margin-top: 32px;
    font-family: var(--ab-font-body);
    font-size: 22px;
    line-height: 1.55;
    color: #fff;
    max-width: 630px;
}

/* ════════════════════════════════
   2. PHILOSOPHIE
════════════════════════════════ */
.ab-philo {
    position: relative;
    padding: 120px 0 60px;
    background: var(--ab-cream);
}

.ab-philo-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 80px;
    align-items: center;
}

.ab-philo-photos {
    position: relative;
    height: 460px;
}

.ab-philo-content {
    text-align: center;
}

/* Section titles (Erica One UPPERCASE, accent rouge sur la 2e ligne) */
.ab-section-title {
    font-family: var(--ab-font-display);
    font-size: clamp(40px, 4.5vw, 78px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ab-dark);
    margin: 0 0 28px;
}
.ab-section-title-line { display: block; }
.ab-section-title-line--accent { color: var(--ab-red); }
.ab-section-title--inverse,
.ab-section-title--inverse .ab-section-title-line { color: #fff; }

.ab-text {
    font-family: var(--ab-font-body);
    font-size: clamp(16px, 1.3vw, 21px);
    line-height: 1.55;
    color: var(--ab-dark);
    margin: 0 0 16px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}
.ab-text--white { color: rgba(255,255,255,.95); }
.ab-text:last-child { margin-bottom: 0; }

/* Polaroids - cadre blanc rotation/skew variable */
.ab-polaroid {
    position: absolute;
    background: #fff;
    border: 21px solid #fff;
    box-shadow: 0 18px 40px rgba(36,35,35,.18);
    overflow: hidden;
}
.ab-polaroid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Polaroids de la section philosophie (positions inspirées Figma) */
.ab-polaroid--p1 {
    width: 285px; height: 270px;
    top: -25px; left: 50px;
    transform: rotate(5.95deg);
    z-index: 2;
}
.ab-polaroid--p2 {
    width: 285px; height: 270px;
    top: 130px; left: -10px;
    transform: rotate(-4.65deg);
    z-index: 1;
}
.ab-polaroid--p3 {
    width: 285px; height: 270px;
    top: 170px; left: 175px;
    transform: rotate(-4.65deg);
    z-index: 3;
}

/* ════════════════════════════════
   3. VALEURS (4 cards)
════════════════════════════════ */
.ab-values {
    padding: 80px 0 100px;
    background: var(--ab-cream);
}

.ab-values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
}

.ab-value-card {
    position: relative;
    background: var(--ab-cream-2);
    border: 1.5px dashed var(--ab-dark);
    border-radius: 50px;
    padding: 32px 38px 30px;
    min-height: 224px;
    backdrop-filter: blur(13.5px);
    box-shadow: 0 12px 32px rgba(36,35,35,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.ab-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(36,35,35,.12);
}

.ab-value-card--orange {
    background: var(--ab-orange-2);
    color: #fff;
    box-shadow: 2px 6px 13px rgba(0,0,0,.1),
                9px 23px 24px rgba(0,0,0,.09),
                19px 51px 33px rgba(0,0,0,.05),
                35px 90px 39px rgba(0,0,0,.01);
}
.ab-value-card--tilt { transform: rotate(-1.25deg); }
.ab-value-card--tilt:hover { transform: rotate(-1.25deg) translateY(-4px); }

.ab-value-icon {
    width: 60px;
    height: 60px;
    color: var(--ab-red);
    margin-bottom: 12px;
}
.ab-value-card--orange .ab-value-icon { color: #fff; }
.ab-value-icon svg { width: 100%; height: 100%; }

.ab-value-title {
    font-family: var(--ab-font-script);
    font-size: clamp(28px, 2.5vw, 39px);
    line-height: 1;
    color: var(--ab-dark);
    margin: 0 0 14px;
}
.ab-value-card--orange .ab-value-title { color: #fff; }

.ab-value-sep {
    border: none;
    border-top: 1px solid var(--ab-dark);
    margin: 0 0 16px;
    opacity: .85;
}
.ab-value-card--orange .ab-value-sep { border-top-color: rgba(255,255,255,.85); }

.ab-value-text {
    font-family: var(--ab-font-body);
    font-size: 18.7px;
    line-height: 1.5;
    color: var(--ab-dark);
    margin: 0;
    font-weight: 400;
}
.ab-value-card--orange .ab-value-text { color: #fff; }

/* ════════════════════════════════
   4. NOTRE QUALITÉ (bande orange)
════════════════════════════════ */
.ab-quality {
    position: relative;
    padding: 100px 0;
    background: var(--ab-orange);
    overflow: hidden;
    color: #fff;
}

.ab-quality-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.ab-quality-content { max-width: 540px; }
.ab-quality-content .ab-section-title { margin-bottom: 32px; }
.ab-quality-content .ab-text { margin-left: 0; margin-right: 0; }

/* Tampon "engagement" v3 - resserré pour matcher la pill compacte de la
   maquette. Si tu vois encore une pill chunky, c'est que le cache CSS est
   bloqué (DevTools > Network > Disable cache + Ctrl+Shift+R). */
.ab-quality-stamp-wrap { display: block; }
.ab-quality-stamp {
    display: inline-block;
    position: relative;
    padding: 6px 28px 9px;
    line-height: 1;
    background: var(--ab-red);
    color: #fff;
    font-family: 'Erica One', 'Anton', Impact, sans-serif !important;
    font-size: clamp(28px, 2.8vw, 40px);
    letter-spacing: .04em;
    text-transform: uppercase !important;
    transform: rotate(-1deg);
    box-shadow: 0 4px 0 var(--ab-red-dark);
    border-radius: 999px;
    margin: 4px 0;
}

.ab-quality-photos {
    position: relative;
    height: 520px;
}
.ab-polaroid--q1 {
    width: 460px; height: 440px;
    top: 0; right: 80px;
    transform: rotate(1.5deg);
    z-index: 3;
}
.ab-polaroid--q2 {
    width: 380px; height: 360px;
    top: 50px; right: -60px;
    transform: rotate(-2deg);
    z-index: 2;
}
.ab-polaroid--q3 {
    width: 260px; height: 250px;
    top: 280px; left: 30px;
    transform: rotate(-5deg);
    z-index: 1;
}

/* ════════════════════════════════
   5. ÉVÉNEMENTS
════════════════════════════════ */
.ab-events {
    padding: 120px 0 140px;
    background: var(--ab-cream);
}

.ab-events-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.ab-events-photos {
    position: relative;
    height: 480px;
}

.ab-polaroid--e1 {
    width: 240px; height: 230px;
    top: -20px; left: 60px;
    transform: rotate(-4.65deg);
    z-index: 1;
}
.ab-polaroid--e2 {
    width: 200px; height: 190px;
    top: 230px; left: 0;
    transform: rotate(-4.65deg);
    z-index: 2;
}
.ab-polaroid--e3 {
    width: 340px; height: 320px;
    top: 130px; left: 220px;
    transform: rotate(2.91deg);
    z-index: 3;
}

.ab-events-arrow {
    position: absolute;
    /* La flèche connecte e1 (map, top-left, finit vers x=300, y=210) à e3
       (grande, top-right, démarre à x=220, y=130). Position juste au-dessus
       du coin top-left d'e3 : base près du bord droit d'e1, pointe sur le
       bord top d'e3 - effet "regarde, c'est ici sur la map qu'on est". */
    width: 130px;
    height: 130px;
    top: 0;
    left: 295px;
    z-index: 4;
    color: var(--ab-dark);
    transform: rotate(0deg);
    pointer-events: none;
}

.ab-events-content { max-width: 600px; }
.ab-events-content .ab-section-title { margin-bottom: 24px; }
.ab-events-content .ab-text { margin-left: 0; margin-right: 0; }

.ab-events-actions {
    display: flex;
    gap: 16px;
    margin-top: 28px;
    flex-wrap: wrap;
}

/* CTA boutons section événements - alignés sur le bouton "Voir l'itinéraire"
   de la page principale. Pattern : chaque .ab-btn est wrappé d'un span
   .ab-cta-wrap qui porte le double-fond crème via ::after positif (z-index:0),
   et le bouton orange est au-dessus en z-index: 1. C'est exactement la
   technique de .hp-hero-cta sur la home. */
.ab-cta-wrap {
    position: relative;
    display: inline-block;
    width: max-content;
}
.ab-cta-wrap::after {
    content: '';
    position: absolute;
    inset: 8px -6px -8px 6px;
    border-radius: 90px;
    background: #fff;
    z-index: 0;
}

.ab-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ab-orange-2);
    color: #fff;
    text-decoration: none;
    padding: 18px 32px;
    border-radius: 80px;
    font-family: var(--ab-font-body);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
    min-width: 237px;
    height: 70px;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.ab-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .15);
}

/* Compat : ces 2 modifiers gardent leur nom de classe pour la compat Twig
   mais rendent désormais le même style que .ab-btn de base. */
.ab-btn--orange,
.ab-btn--outline {
    background: var(--ab-orange-2);
    color: #fff;
}

/* ════════════════════════════════
   RESPONSIVE - 2 breakpoints clairs : tablette (≤1100px) et mobile (≤760px).
   Pattern unifié : sous 1100px tout passe en 1 colonne, contenu centré, et
   les 3 sections de photos (philo / quality / events) utilisent le MÊME
   layout en cluster (1 grande polaroid au-dessus, 2 petites côte à côte
   en bas) pour la cohérence visuelle.
════════════════════════════════ */
/* ── Hero : pattern identique à .cc-hero (catalog-category.css L568-571) ── */
@media (max-width: 1440px) {
    .about-page { --ab-pad: 60px; }
    .ab-hero-mascot { left: 30px; }
}

/* Breakpoint tablette à 1370px pour le contenu (philo / quality / events) :
   le cluster polaroids prend le relais AVANT que la grande polaroid e3
   (340px de large, left:220 → finit à x=560) ne déborde dans la colonne
   contenu côté droit. */
@media (max-width: 1370px) {

    /* ── TITRES DE SECTION : taille intermédiaire pour les sous-pages */
    .ab-section-title { font-size: clamp(48px, 7vw, 70px); }
    .ab-quality-stamp { font-size: clamp(32px, 4.5vw, 44px); }

    /* ── SECTIONS PRINCIPALES : 1 colonne, contenu centré uniforme */
    .ab-philo-inner,
    .ab-quality-inner,
    .ab-events-inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .ab-philo-content,
    .ab-quality-content,
    .ab-events-content {
        text-align: center;
        max-width: none;
    }
    .ab-philo-content .ab-text,
    .ab-quality-content .ab-text,
    .ab-events-content .ab-text {
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }
    .ab-quality-content .ab-section-title,
    .ab-events-content .ab-section-title { text-align: center; }

    /* Ordre logique : titre + texte (+ CTA) en premier, photos après.
       Vaut pour les 3 sections en colonne. */
    .ab-philo-content,
    .ab-quality-content,
    .ab-events-content { order: 1; }
    .ab-philo-photos,
    .ab-quality-photos,
    .ab-events-photos { order: 2; }

    /* ── POLAROIDS CLUSTERS : pattern unifié pour les 3 sections */
    .ab-philo-photos,
    .ab-quality-photos,
    .ab-events-photos {
        position: relative;
        max-width: 400px;
        margin: 0 auto;
        height: 440px;
    }
    .ab-philo-photos .ab-polaroid,
    .ab-quality-photos .ab-polaroid,
    .ab-events-photos .ab-polaroid { position: absolute; margin: 0; }

    /* Philo : p1 grande top centrée + p2/p3 petites en bas */
    .ab-polaroid--p1 {
        width: 240px; height: 220px;
        top: 0; left: 50%; margin-left: -120px;
        right: auto;
        transform: rotate(-3deg);
        z-index: 3;
    }
    .ab-polaroid--p2 {
        width: 190px; height: 170px;
        top: 240px; left: -10px;
        right: auto;
        transform: rotate(-5deg);
        z-index: 1;
    }
    .ab-polaroid--p3 {
        width: 190px; height: 170px;
        top: 255px; right: -10px; left: auto;
        transform: rotate(4deg);
        z-index: 2;
    }

    /* Quality : q1 grande top centrée + q2 droite + q3 gauche */
    .ab-polaroid--q1 {
        width: 240px; height: 220px;
        top: 0; left: 50%; margin-left: -120px;
        right: auto;
        transform: rotate(-2.5deg);
        z-index: 3;
    }
    .ab-polaroid--q3 {
        width: 190px; height: 170px;
        top: 240px; left: -10px;
        right: auto;
        transform: rotate(-5deg);
        z-index: 1;
    }
    .ab-polaroid--q2 {
        width: 190px; height: 170px;
        top: 255px; right: -10px; left: auto;
        transform: rotate(4deg);
        z-index: 2;
    }

    /* Events : e3 grande top centrée + e1 gauche + e2 droite */
    .ab-polaroid--e3 {
        width: 240px; height: 220px;
        top: 0; left: 50%; margin-left: -120px;
        right: auto;
        transform: rotate(3deg);
        z-index: 3;
    }
    .ab-polaroid--e1 {
        width: 190px; height: 170px;
        top: 240px; left: -10px;
        right: auto;
        transform: rotate(-5deg);
        z-index: 2;
    }
    .ab-polaroid--e2 {
        width: 190px; height: 170px;
        top: 255px; right: -10px; left: auto;
        transform: rotate(4deg);
        z-index: 1;
    }

    /* Flèche events : positionnée entre grande polaroid et cluster bas,
       pointée vers le cluster (down-left grâce au scaleX). */
    .ab-events-arrow {
        width: 100px; height: 105px;
        top: 200px;
        left: 10px;
        right: auto;
        transform: rotate(5deg) scaleX(-1);
    }

    /* ── CTA events : centrés, possibilité 2 cols ou 1 col selon largeur */
    .ab-events-actions {
        justify-content: center;
        gap: 20px;
    }
}

/* Mobile : copie 1:1 du responsive hero de .cc-hero (catalog-category.css L573-585) */
@media (max-width: 900px) {
    .about-page { --ab-pad: 24px; }
    .ab-hero { min-height: 0; }
    .ab-hero-inner { padding: 130px var(--ab-pad) 70px; }
    .ab-hero-title { font-size: clamp(36px, 11vw, 90px); letter-spacing: -1px; max-width: none; }
    .ab-hero-title .ab-hero-title-stamp { padding: 6px 12px 10px; }
    .ab-hero-desc { font-size: 16px; margin-top: 22px; }
    .ab-hero-mascot { left: 22px; top: 92px; width: 78px; height: 68px; }
}

@media (max-width: 760px) {
    .about-page { --ab-pad: 24px; }

    /* ── TITRES SECTION mobile : encore plus gros pour l'impact */
    .ab-section-title { font-size: clamp(56px, 14vw, 66px); }
    .ab-quality-stamp { font-size: clamp(34px, 8vw, 42px); }

    /* ── VALEURS : grille en 1 colonne */
    .ab-values-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .ab-value-card { padding: 26px 28px; border-radius: 32px; min-height: auto; }
    .ab-value-card--tilt,
    .ab-value-card--tilt:hover { transform: none; }

    /* ── PADDING SECTIONS uniformisé */
    .ab-philo   { padding: 70px 0 50px; }
    .ab-quality { padding: 70px 0; }
    .ab-events  { padding: 70px 0 90px; }

    /* ── POLAROIDS : conteneurs et tailles plus compactes */
    .ab-polaroid { border-width: 12px; }

    .ab-philo-photos,
    .ab-quality-photos,
    .ab-events-photos {
        max-width: 320px;
    }
    .ab-philo-photos   { height: 380px; }
    .ab-quality-photos { height: 400px; }
    .ab-events-photos  { height: 400px; }

    /* Philo mobile */
    .ab-polaroid--p1 {
        width: 200px; height: 180px;
        margin-left: -100px;
    }
    .ab-polaroid--p2 {
        width: 165px; height: 150px;
        top: 200px;
    }
    .ab-polaroid--p3 {
        width: 165px; height: 150px;
        top: 215px;
    }

    /* Quality mobile */
    .ab-polaroid--q1 {
        width: 220px; height: 200px;
        margin-left: -110px;
    }
    .ab-polaroid--q2 {
        width: 170px; height: 160px;
        top: 230px;
    }
    .ab-polaroid--q3 {
        width: 170px; height: 160px;
        top: 220px;
    }

    /* Events mobile */
    .ab-polaroid--e3 {
        width: 220px; height: 200px;
        margin-left: -110px;
    }
    .ab-polaroid--e1 {
        width: 160px; height: 150px;
        top: 220px;
    }
    .ab-polaroid--e2 {
        width: 160px; height: 150px;
        top: 230px;
    }

    /* Flèche mobile : plus compacte, position ajustée au container 320px */
    .ab-events-arrow {
        width: 90px; height: 96px;
        top: 180px;
        left: 5px;
    }

    /* ── CTA EVENTS : full-width et stack vertical */
    .ab-events-actions { flex-direction: column; align-items: stretch; }
    .ab-cta-wrap { width: 100%; display: block; }
    .ab-btn { width: 100%; }
}

/* Petit écran (≤480px) : copie 1:1 de .cc-hero-title à 480px */
@media (max-width: 480px) {
    .ab-hero-title { font-size: clamp(32px, 12vw, 64px); }
}