/* ==========================================================================
   YCMC — Bandeau « hero » (pack autonome pour la plateforme de réservation Symfony)
   Repris du site WordPress ycmc.fr : dégradé à la couleur de la page, grandes bandes en biais (voiles),
   vague blanche en bas, photo en filigrane facultative, angles droits, aucune dépendance (pas de JS, pas de framework).

   Utilisation : <section class="ycmc-hero" style="--hc:#1e4c8a"> … </section>   (voir README.md et _ycmc_hero.html.twig)

   Variables (à poser sur .ycmc-hero, en style inline ou en CSS) :
     --hc          couleur de la page (défaut #1e4c8a)
     --wave-bg     couleur du fond de la page sous la vague (défaut #fff)
     --hero-img    photo en filigrane : url('…')  (facultatif). ATTENTION : une URL relative est résolue depuis CE fichier CSS,
                   pas depuis la page : utilisez un chemin absolu depuis la racine du site (/uploads/x.jpg) ou une URL complète.
     --hero-top    hauteur de l'en-tête du site qui recouvre le bandeau, en px (défaut 0px) : ajoutée au padding du haut
   Modificateurs : --compact (bandeau plus bas, titre plus petit), --light (couleur claire : ombre portée sur le texte),
                   --wave-top (vague blanche aussi en haut)
   ========================================================================== */

.ycmc-hero {
    --hc: #1e4c8a;
    --wave-bg: #ffffff;
    --hero-top: 0px;
    --hero-ink: #1f2d3d;
    position: relative;
    width: 100%;
    padding: calc(clamp(120px, 14vw, 220px) + var(--hero-top)) 0 clamp(130px, 15vw, 230px);
    background: var(--hc);
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow: hidden;
    isolation: isolate;
}
.ycmc-hero, .ycmc-hero *, .ycmc-hero *::before, .ycmc-hero *::after,
.ycmc-hero-overlap, .ycmc-hero-overlap *, .ycmc-hero-overlap *::before, .ycmc-hero-overlap *::after { box-sizing: border-box; }

/* Dégradé de la couleur de la page (+ photo en filigrane dessous) */
.ycmc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(115deg, rgba(0, 0, 0, 0.38) 8%, rgba(0, 0, 0, 0.12) 55%, rgba(255, 255, 255, 0.12)), var(--hero-img, none);
    background-size: cover;
    background-position: center;
}
@supports (background: color-mix(in srgb, red, blue)) {
    .ycmc-hero::before {
        background-image: linear-gradient(115deg,
            color-mix(in srgb, color-mix(in srgb, var(--hc) 62%, #0b1d36) 95%, transparent) 8%,
            color-mix(in srgb, var(--hc) 78%, transparent) 55%,
            color-mix(in srgb, var(--hc) 42%, transparent)), var(--hero-img, none);
    }
    /* Sans photo : dégradé plein, sans transparence (la couleur de fond ne transparaît pas) */
    .ycmc-hero:not(.has-img)::before {
        background-image: linear-gradient(115deg,
            color-mix(in srgb, var(--hc) 62%, #0b1d36) 8%,
            color-mix(in srgb, var(--hc) 92%, #0b1d36) 55%,
            color-mix(in srgb, var(--hc) 78%, #fff));
    }
}

/* Grosses bandes diagonales (les voiles) */
.ycmc-hero__shapes { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.ycmc-hero__shapes i { position: absolute; top: -2%; height: 135%; transform: skewX(-17deg); transform-origin: 0 0; }
.ycmc-hero__shapes i:nth-child(1) { left: 73.5%; width: 30%; background: rgba(255, 255, 255, 0.22); }
.ycmc-hero__shapes i:nth-child(2) { left: 79.5%; width: 3.2%; background: #e8490f; }
.ycmc-hero__shapes i:nth-child(3) { left: 86.5%; width: 9.5%; background: #f0a80a; }
@media (max-width: 900px) {
    .ycmc-hero__shapes i:nth-child(1) { left: 62%; }
    .ycmc-hero__shapes i:nth-child(2) { left: 70%; }
    .ycmc-hero__shapes i:nth-child(3) { left: 80%; width: 14%; }
}

/* Pleine largeur, comme .main-container (pas de max-width/centrage : sinon decalage
   avec le contenu sur grand ecran). Gouttiere alignee sur celle du contenu (5vw). */
.ycmc-hero__wrap { position: relative; z-index: 2; width: 100%; padding: 0 5vw; }

/* Gouttiere de reference de tout le front (ex Stage/PassNautique) : 5vw de chaque cote,
   appliquee ici globalement a .main-container pour que bandeau et contenu s'alignent
   partout (catalogue, home, compte client, panier...). */
.main-container { padding-left: 5vw; padding-right: 5vw; }

.ycmc-hero__kicker {
    display: block;
    margin: 0 0 26px;
    padding: 0;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(8, 30, 50, 0.4);
    text-transform: uppercase;
}

.ycmc-hero__title {
    max-width: 14ch;
    margin: 0 0 0.3em;
    padding: 0;
    color: #fff;
    font-size: clamp(2.8rem, 7.4vw, 6.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.ycmc-hero__lead {
    max-width: 34ch;
    margin: 0;
    color: #fff;
    font-size: clamp(1.1rem, 1.9vw, 1.55rem);
    line-height: 1.5;
}

/* Vagues blanches : même forme partout sur le site (masque SVG, colorée par --wave-bg) */
.ycmc-hero__wave {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    display: block;
    height: clamp(46px, 7.5vw, 124px);
    background: var(--wave-bg);
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V70C1320 104 1200 112 1080 90 960 68 840 14 720 20 600 26 480 86 360 98 240 110 120 92 0 60Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V70C1320 104 1200 112 1080 90 960 68 840 14 720 20 600 26 480 86 360 98 240 110 120 92 0 60Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.ycmc-hero__wave--top { top: -1px; display: none; }
.ycmc-hero__wave--bottom { bottom: -1px; transform: scaleY(-1); }
.ycmc-hero--wave-top .ycmc-hero__wave--top { display: block; }

/* ---------- Variantes ---------- */

/* Compact : pages de service (juridique, panier, confirmation…) */
.ycmc-hero--compact { padding: calc(clamp(100px, 8vw, 120px) + var(--hero-top)) 0 clamp(120px, 11vw, 170px); }
.ycmc-hero--compact .ycmc-hero__title { max-width: none; font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.06; }
.ycmc-hero--compact .ycmc-hero__lead { max-width: 640px; }

/* Couleur claire (turquoise, jaune) : ombre portée pour garder le texte lisible */
.ycmc-hero--light .ycmc-hero__title, .ycmc-hero--light .ycmc-hero__lead { text-shadow: 0 2px 10px rgba(8, 30, 50, 0.45); }

/* ---------- Carte blanche qui chevauche le bandeau (facultatif) ---------- */
.ycmc-hero-overlap { position: relative; z-index: 4; margin-top: calc(-1 * clamp(80px, 9vw, 140px)); padding-bottom: clamp(48px, 6vw, 96px); }
.ycmc-hero-overlap__inner { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 20px; }
.ycmc-card {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 52px);
    background: #fff;
    border-top: 7px solid var(--hc, #1e4c8a);
    box-shadow: 0 18px 40px rgba(20, 48, 92, 0.14);
    color: #666;
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) { .ycmc-hero * { transition: none !important; animation: none !important; } }