/*
 * Opera Prestige — Yacht Charter Page
 * Palette réduite : noir/blanc, or uniquement sur accents clés
 */

/* ================================================================
   VARIABLES & RESET
================================================================ */
#op-yc-root {
    --op-black:      #0A0A0A;
    --op-white:      #F5F3EE;
    --op-off-white:  #CFCDC9;
    --op-gold:       #C9A96E;      /* utilisé sparingly */
    --op-grey:       #111111;
    --op-grey-mid:   #1C1C1C;
    --op-grey-lt:    #2A2A2A;
    --op-border:     rgba(245,243,238,0.12);

    --op-font-serif: 'Cormorant Garamond', Georgia, serif;
    --op-font-sans:  'Inter', system-ui, sans-serif;
    --op-section-pad: clamp(60px, 8vw, 120px);
    --op-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --op-trans: 0.3s var(--op-ease);

    font-family: var(--op-font-sans);
    font-weight: 300;
    color: var(--op-white);
    background: var(--op-black);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
#op-yc-root *, #op-yc-root *::before, #op-yc-root *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}
#op-yc-root img { display:block; width:100%; height:100%; object-fit:cover; }

/* ================================================================
   UTILITAIRES
================================================================ */
#op-yc-root .op-container {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 80px);
}

/* Label : or uniquement ici, car c'est le seul accent structurel */
#op-yc-root .op-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--op-gold);
    margin-bottom: 14px;
    font-weight: 300;
}
#op-yc-root .op-label--light { color: rgba(245,243,238,0.5); }

#op-yc-root .op-h2 {
    font-family: var(--op-font-serif);
    font-weight: 300;
    font-size: clamp(32px, 4.5vw, 58px);
    line-height: 1.15;
    color: var(--op-white);
    margin-bottom: 24px;
}
/* Plus d'italique doré sur les h2 — blanc pur */
#op-yc-root .op-h2 em { font-style: italic; color: var(--op-white); }

#op-yc-root .op-body {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(245,243,238,0.6);
    margin-bottom: 18px;
}
#op-yc-root .op-link-arrow {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--op-white);
    border-bottom: 1px solid var(--op-border);
    padding-bottom: 3px;
    transition: border-color var(--op-trans), color var(--op-trans);
}
#op-yc-root .op-link-arrow:hover { border-color: var(--op-white); }
/* Conserve .op-link-gold pour compatibilité */
#op-yc-root .op-link-gold { color:var(--op-white); border-bottom:1px solid var(--op-border); padding-bottom:3px; font-size:13px; letter-spacing:.08em; transition:border-color var(--op-trans); }
#op-yc-root .op-link-gold:hover { border-color:var(--op-white); }

/* Boutons — or uniquement sur le CTA principal */
#op-yc-root .op-btn {
    display: inline-block;
    font-family: var(--op-font-sans);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 14px 36px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--op-trans), color var(--op-trans), border-color var(--op-trans);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
/* Principal — seul bouton doré */
#op-yc-root .op-btn--gold       { background:var(--op-gold); color:var(--op-black); border-color:var(--op-gold); }
#op-yc-root .op-btn--gold:hover { background:transparent; color:var(--op-white); border-color:var(--op-white); }

/* Secondaires — blanc/transparent */
#op-yc-root .op-btn--outline       { background:transparent; color:var(--op-white); border-color:var(--op-border); }
#op-yc-root .op-btn--outline:hover { border-color:var(--op-white); }
#op-yc-root .op-btn--ghost         { background:transparent; color:rgba(245,243,238,0.7); border-color:var(--op-border); font-size:10px; padding:9px 22px; }
#op-yc-root .op-btn--ghost:hover   { color:var(--op-white); border-color:var(--op-white); }
#op-yc-root .op-btn--ghost-light   { background:transparent; color:var(--op-white); border-color:rgba(245,243,238,0.35); }
#op-yc-root .op-btn--ghost-light:hover { border-color:var(--op-white); }

/* ================================================================
   HERO — layout corrigé
   Principe : flex column, contenu en bas, sous-titre SOUS le titre
================================================================ */
#op-yc-root .op-hero {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
    background: var(--op-black);
}
#op-yc-root .op-hero__slider { position:relative; width:100%; height:100%; }

#op-yc-root .op-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s var(--op-ease);
    /* Flex column : empile eyebrow / titre / subtitle / btn verticalement */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* ancre en bas */
    align-items: flex-start;
}
#op-yc-root .op-hero__slide--active { opacity:1; }

#op-yc-root .op-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10,10,10,0.92) 0%,
        rgba(10,10,10,0.45) 50%,
        rgba(10,10,10,0.05) 100%
    );
    pointer-events: none;
}

/* Contenu : colonne unique, largeur max contrainte */
#op-yc-root .op-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Largeur max = 55% du viewport, jamais plus de 700px */
    width: min(55vw, 700px);
    padding-left: clamp(24px, 6vw, 100px);
    padding-right: 40px;
    padding-bottom: clamp(72px, 9vw, 110px);
    gap: 0;   /* géré par margin-bottom sur chaque enfant */
}

#op-yc-root .op-hero__eyebrow {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--op-gold);
    margin-bottom: 18px;
    font-weight: 300;
}

#op-yc-root .op-hero__title {
    font-family: var(--op-font-serif);
    font-weight: 300;
    /* Taille calculée pour tenir sur 2 lignes max dans 55vw */
    font-size: clamp(34px, 5vw, 72px);
    line-height: 1.06;
    color: var(--op-white);
    margin-bottom: 20px;
    /* Empêche tout débordement */
    word-break: break-word;
    hyphens: manual;
}
#op-yc-root .op-hero__title em { font-style:italic; color:var(--op-white); }

/* Subtitle : affichage en une ligne, taille réduite, tronqué si nécessaire */
#op-yc-root .op-hero__subtitle {
    font-size: clamp(11px, 1.1vw, 14px);
    font-weight: 300;
    color: rgba(245,243,238,0.55);
    letter-spacing: 0.05em;
    margin-bottom: 30px;
    line-height: 1.5;
    /* Aucune chance de débordement */
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

/* Flèches */
#op-yc-root .op-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: 1px solid rgba(245,243,238,0.2);
    color: rgba(245,243,238,0.6);
    width: 46px; height: 46px;
    font-size: 16px;
    cursor: pointer;
    transition: border-color var(--op-trans), color var(--op-trans);
    display: flex; align-items: center; justify-content: center;
}
#op-yc-root .op-hero__arrow:hover { border-color:var(--op-white); color:var(--op-white); }
#op-yc-root .op-hero__arrow--prev { left: clamp(14px, 2.5vw, 36px); }
#op-yc-root .op-hero__arrow--next { right: clamp(14px, 2.5vw, 36px); }

/* Dots */
#op-yc-root .op-hero__dots {
    position: absolute;
    bottom: 26px;
    left: clamp(24px, 6vw, 100px);
    z-index: 10;
    display: flex; gap: 8px;
}
#op-yc-root .op-hero__dot {
    width: 20px; height: 2px;
    border: none;
    background: rgba(245,243,238,0.25);
    cursor: pointer; padding: 0;
    transition: background var(--op-trans);
}
#op-yc-root .op-hero__dot--active { background: var(--op-white); }

/* ================================================================
   CATALOGUE FILTRES
================================================================ */
#op-yc-root .op-catalogue {
    background: var(--op-black);
    padding-top: var(--op-section-pad);
    padding-bottom: 48px;
    border-bottom: 1px solid var(--op-border);
}
#op-yc-root .op-catalogue__header {
    padding-inline: clamp(20px,5vw,80px);
    max-width: 1320px;
    margin: 0 auto 40px;
}
#op-yc-root .op-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--op-border);
}
#op-yc-root .op-filter {
    padding: 18px 22px;
    background: var(--op-grey);
    border-right: 1px solid var(--op-border);
}
#op-yc-root .op-filter:last-child { border-right: none; }
#op-yc-root .op-filter__label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--op-off-white);
    margin-bottom: 8px;
    opacity: 0.6;
}
#op-yc-root .op-filter__select {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--op-white);
    font-family: var(--op-font-sans);
    font-weight: 300;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='rgba(245,243,238,0.4)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 10px;
}
#op-yc-root .op-filter__select option { background:var(--op-grey); color:var(--op-white); }

/* Tags */
#op-yc-root .op-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
#op-yc-root .op-tag {
    background: transparent;
    border: 1px solid var(--op-border);
    color: rgba(245,243,238,0.45);
    font-family: var(--op-font-sans);
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 7px 18px;
    cursor: pointer;
    transition: all var(--op-trans);
}
#op-yc-root .op-tag:hover   { border-color:rgba(245,243,238,0.5); color:var(--op-white); }
#op-yc-root .op-tag--active { border-color:var(--op-white); color:var(--op-white); background:rgba(245,243,238,0.06); }

/* ================================================================
   GRILLE YACHTS
================================================================ */
#op-yc-root .op-fleet { background:var(--op-black); padding-bottom:var(--op-section-pad); }
#op-yc-root .op-fleet__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--op-border); /* crée les séparateurs */
}
#op-yc-root .op-fleet__empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
    color: rgba(245,243,238,0.3);
    font-style: italic;
    background: var(--op-black);
}
#op-yc-root .op-yacht-card {
    background: var(--op-black);
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: background var(--op-trans);
}
#op-yc-root .op-yacht-card:hover { background: var(--op-grey); }
#op-yc-root .op-yacht-card__img-link { display:block; overflow:hidden; }
#op-yc-root .op-yacht-card__img {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--op-grey);
}
#op-yc-root .op-yacht-card__no-img { width:100%; height:100%; background:var(--op-grey-lt); }
#op-yc-root .op-yacht-card__img img { transition:transform 1.2s var(--op-ease); }
#op-yc-root .op-yacht-card:hover .op-yacht-card__img img { transform:scale(1.04); }
#op-yc-root .op-yacht-card__badge {
    position: absolute; top:14px; left:14px;
    background: rgba(10,10,10,0.8);
    border: 1px solid var(--op-border);
    color: rgba(245,243,238,0.6);
    font-size: 9px; letter-spacing:.18em; text-transform:uppercase;
    padding: 4px 10px;
}
#op-yc-root .op-yacht-card__body {
    padding: 22px 28px 30px;
    flex: 1; display:flex; flex-direction:column; gap:9px;
}
#op-yc-root .op-yacht-card__name { font-family:var(--op-font-serif); font-weight:400; font-size:22px; color:var(--op-white); line-height:1.2; }
#op-yc-root .op-yacht-card__name a { color:inherit; }
#op-yc-root .op-yacht-card__tagline { font-size:12px; color:rgba(245,243,238,0.4); font-style:italic; }
#op-yc-root .op-yacht-card__specs { display:flex; flex-wrap:wrap; gap:5px 14px; list-style:none; }
#op-yc-root .op-yacht-card__specs li { font-size:11px; font-weight:300; color:rgba(245,243,238,0.55); letter-spacing:.05em; }
#op-yc-root .op-yacht-card__from { font-size:12px; color:rgba(245,243,238,0.5); }
#op-yc-root .op-yacht-card__from strong { color:var(--op-white); font-weight:300; }
#op-yc-root .op-yacht-card__body .op-btn { align-self:flex-start; margin-top:8px; }

/* ================================================================
   CURATED SELECTION
================================================================ */
#op-yc-root .op-curated {
    background: var(--op-grey);
    padding: var(--op-section-pad) 0;
    border-top: 1px solid var(--op-border);
}
#op-yc-root .op-curated__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px,6vw,100px);
    align-items: center;
}
#op-yc-root .op-curated__image { aspect-ratio:3/4; overflow:hidden; }
#op-yc-root .op-curated__image img { transition:transform 1.2s var(--op-ease); }
#op-yc-root .op-curated__image:hover img { transform:scale(1.03); }

/* ================================================================
   EXPERIENCE 4 COL
================================================================ */
#op-yc-root .op-experience {
    background: var(--op-black);
    padding: var(--op-section-pad) 0;
    border-top: 1px solid var(--op-border);
    border-bottom: 1px solid var(--op-border);
}
#op-yc-root .op-experience__grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
}
#op-yc-root .op-experience__item {
    padding: 40px 28px;
    border-right: 1px solid var(--op-border);
}
#op-yc-root .op-experience__item:last-child { border-right:none; }
#op-yc-root .op-experience__title { font-family:var(--op-font-serif); font-size:19px; color:var(--op-white); margin-bottom:12px; font-weight:400; }
#op-yc-root .op-experience__text { font-size:13px; color:rgba(245,243,238,0.5); line-height:1.75; }

/* ================================================================
   EDITORIAL
================================================================ */
#op-yc-root .op-editorial {
    background: var(--op-grey);
    padding: var(--op-section-pad) 0;
    border-top: 1px solid var(--op-border);
}
#op-yc-root .op-editorial__inner {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: clamp(40px,6vw,100px);
    align-items: start;
}
#op-yc-root .op-editorial__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--op-border);
    border: 1px solid var(--op-border);
}
#op-yc-root .op-stat {
    padding: 28px 20px;
    background: var(--op-grey-mid);
    display:flex; flex-direction:column;
    align-items:center; text-align:center; gap:8px;
}
#op-yc-root .op-stat__number { font-family:var(--op-font-serif); font-size:clamp(30px,3.5vw,46px); color:var(--op-white); line-height:1; font-weight:300; }
#op-yc-root .op-stat__label { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,243,238,0.4); }

/* ================================================================
   DESTINATIONS
================================================================ */
#op-yc-root .op-destinations { background:var(--op-black); padding:var(--op-section-pad) 0; border-top:1px solid var(--op-border); }
#op-yc-root .op-destinations__header { max-width:1320px; margin:0 auto 44px; padding-inline:clamp(20px,5vw,80px); }
#op-yc-root .op-destinations__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--op-border); }
#op-yc-root .op-dest-card { background:var(--op-black); overflow:hidden; display:flex; flex-direction:column; transition:background var(--op-trans); }
#op-yc-root .op-dest-card:hover { background:var(--op-grey); }
#op-yc-root .op-dest-card__img { aspect-ratio:3/4; overflow:hidden; }
#op-yc-root .op-dest-card__img img { transition:transform 1s var(--op-ease); }
#op-yc-root .op-dest-card:hover .op-dest-card__img img { transform:scale(1.05); }
#op-yc-root .op-dest-card__body { padding:20px 22px 26px; display:flex; flex-direction:column; gap:10px; }
#op-yc-root .op-dest-card__name { font-family:var(--op-font-serif); font-size:20px; color:var(--op-white); font-weight:400; }
#op-yc-root .op-dest-card__desc { font-size:13px; color:rgba(245,243,238,0.45); line-height:1.65; flex:1; }

/* ================================================================
   CTA
================================================================ */
#op-yc-root .op-cta__bg {
    position:relative; min-height:460px;
    background-size:cover; background-position:center;
    display:flex; align-items:center; justify-content:center;
}
#op-yc-root .op-cta__overlay { position:absolute; inset:0; background:rgba(10,10,10,0.78); }
#op-yc-root .op-cta__content {
    position:relative; z-index:2;
    text-align:center; max-width:640px;
    padding: clamp(60px,8vw,100px) clamp(20px,5vw,60px);
}
#op-yc-root .op-cta__title { font-family:var(--op-font-serif); font-weight:300; font-size:clamp(32px,5vw,64px); line-height:1.1; color:var(--op-white); margin-bottom:14px; }
#op-yc-root .op-cta__title em { font-style:italic; color:var(--op-white); }
#op-yc-root .op-cta__subtitle { font-size:14px; color:rgba(245,243,238,0.55); line-height:1.75; margin-bottom:36px; }
#op-yc-root .op-cta__actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ================================================================
   RESPONSIVE — tablette ≤ 1024px
================================================================ */
@media (max-width: 1024px) {
    #op-yc-root .op-hero__content { width: min(75vw, 600px); }
    #op-yc-root .op-filters { grid-template-columns:repeat(2,1fr); }
    #op-yc-root .op-filter:nth-child(2) { border-right:none; }
    #op-yc-root .op-filter:nth-child(1),
    #op-yc-root .op-filter:nth-child(2) { border-bottom:1px solid var(--op-border); }
    #op-yc-root .op-curated__inner { grid-template-columns:1fr; }
    #op-yc-root .op-curated__image { aspect-ratio:16/9; order:-1; }
    #op-yc-root .op-experience__grid { grid-template-columns:repeat(2,1fr); }
    #op-yc-root .op-experience__item:nth-child(2) { border-right:none; }
    #op-yc-root .op-experience__item:nth-child(1),
    #op-yc-root .op-experience__item:nth-child(2) { border-bottom:1px solid var(--op-border); }
    #op-yc-root .op-editorial__inner { grid-template-columns:1fr; }
    #op-yc-root .op-destinations__grid { grid-template-columns:repeat(2,1fr); }
}

/* ================================================================
   RESPONSIVE — mobile ≤ 640px
================================================================ */
@media (max-width: 640px) {
    #op-yc-root .op-hero { min-height:100svh; }
    #op-yc-root .op-hero__content { width:100%; padding-left:20px; padding-right:20px; padding-bottom:72px; }
    #op-yc-root .op-hero__title { font-size: clamp(28px, 10vw, 44px); }
    #op-yc-root .op-hero__subtitle { font-size:12px; }
    #op-yc-root .op-hero__arrow { display:none; }

    #op-yc-root .op-filters { grid-template-columns:1fr; }
    #op-yc-root .op-filter { border-right:none; border-bottom:1px solid var(--op-border); }
    #op-yc-root .op-filter:last-child { border-bottom:none; }

    #op-yc-root .op-fleet__grid { grid-template-columns:1fr; }

    #op-yc-root .op-experience__grid { grid-template-columns:1fr; }
    #op-yc-root .op-experience__item { border-right:none; border-bottom:1px solid var(--op-border); }
    #op-yc-root .op-experience__item:last-child { border-bottom:none; }

    #op-yc-root .op-destinations__grid { grid-template-columns:1fr; }
    #op-yc-root .op-dest-card__img { aspect-ratio:16/9; }

    #op-yc-root .op-editorial__stats { grid-template-columns:1fr 1fr; }
    #op-yc-root .op-cta__actions { flex-direction:column; align-items:center; }
    #op-yc-root .op-btn { text-align:center; width:100%; max-width:280px; }
}