/* ============================================================
   PAGE HOME — Bannière + CTAs + Vidéo + Avantages + Dates clés
   Frame Figma HOMEPAGE (1:246).
   Structure : header(navbar+menu) + banner + ctaButtons +
   homeVideo + homeAdvantages + homeDates + ctaButtons + footer.
   ============================================================ */

body.home {
    background: var(--color-primary-light-grey);
}

/* ============================================================
   Section vidéo + titre "Comprendre ESOP en vidéo"
   Frame : content (2014:2854)
   ============================================================ */
.homeVideo {
    background: var(--color-primary-light-grey);
    padding: var(--space-10) var(--content-gutter);
    display: flex;
    flex-direction: column;
    align-items: flex-start;     /* aligne le titre sur le bord gauche du gutter */
}

/* Layout Figma 2014:2854 :
   - Titre card en HAUT-GAUCHE (auto width, contenu)
   - Vidéo CENTRÉE horizontalement (max 800px)
   - Le bas du titre passe SOUS la vidéo (z-index titre < z-index vidéo)
     → effet d'onglet où la vidéo recouvre les ~30 derniers px du titre. */
.homeVideo__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;     /* le titre prend sa width auto à gauche */
    width: 100%;
}

.homeVideo__title {
    background: var(--color-primary-white);
    padding: var(--space-8) var(--space-10);
    margin-bottom: -30px;        /* overlap : le titre passe sous le haut de la vidéo */
    z-index: 1;                  /* DERRIÈRE la vidéo */
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(0, 112, 173, 0.08);
}

/* Le contenu BDD est un <p> contenant texte principal + <em> (rendu par
   TinyMCE pour le sous-titre italique). On style la structure réelle. */
.homeVideo__title p {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark-blue);
}

.homeVideo__title em {
    color: var(--color-secondary-teal);
    font-style: italic;
    /* L'<em> est précédé d'un <br> dans le contenu — affichage en bloc visuel */
    display: inline-block;
    margin-top: var(--space-2);
}

.homeVideo__player {
    /* Vidéo CENTRÉE horizontalement, dimension Figma ~800px.
       z-index supérieur → passe DEVANT le bas du titre (effet d'onglet). */
    width: 800px;
    max-width: 100%;
    align-self: center;
    position: relative;
    z-index: 2;
}

/* ============================================================
   Section Avantages
   Frame : TX (2014:2870) — bg lilac, padding 80V/100H, gap 40
   ============================================================ */
.homeAdvantages {
    background: var(--color-secondary-lilac);
    padding: 80px var(--content-gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.homeAdvantages__title {
    margin: 0;
    padding-left: var(--content-gutter);
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark-blue);
}

.homeAdvantages__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-10);
    margin: 0;
    padding: 0;
    list-style: none;
}

.advantageCard {
    background: var(--color-primary-white);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: flex-start;
    box-shadow: 0 0 30px rgba(0, 112, 173, 0.10);
}

.advantageCard__icon {
    width: 60px;
    height: 60px;
    background: var(--color-primary-dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.advantageCard__icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;          /* sécurité ratio même si l'SVG le force */
    /* Les SVG ont stroke="var(--stroke-0, #FEB100)" par défaut.
       On laisse la couleur jaune Capgemini ressortir sur le fond navy. */
}

/* Rotation Figma sur l'icône décote (étiquette penchée) */
.advantageCard--decote .advantageCard__icon img {
    transform: rotate(-46deg);
}

.advantageCard__title {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-secondary-purple);
}

.advantageCard__body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    color: var(--color-primary-dark-blue);
}

/* ----- Bloc "À noter avant d'investir" --------------------------------- */
.homeNote {
    display: flex;
    align-items: stretch;
    padding-left: var(--content-gutter);
}

.homeNote__label {
    background: var(--color-secondary-purple);
    color: var(--color-primary-white);
    padding: var(--space-5);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.homeNote__labelMain {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.homeNote__labelSub {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: 300;
    font-style: italic;
    line-height: var(--line-height-tight);
}

.homeNote__body {
    background: var(--color-primary-white);
    flex: 1 1 0;
    padding: var(--space-5) var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
}

.homeNote__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.homeNote__item {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--color-primary-dark-blue);
}

.homeNote__arrow {
    flex-shrink: 0;
    width: 30px;
    height: auto;
    color: var(--color-primary-dark-blue);
}

.homeNote__text strong {
    font-weight: var(--font-weight-bold);
}

/* ============================================================
   Section Dates clés
   Frame : content (2037:2154) — bg light grey, gap 10
   ============================================================ */
.homeDates {
    background: var(--color-primary-light-grey);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}

/* CTA buttons placés juste après la grille dates : on supprime le padding-top
   pour éviter le doublon avec le padding-bottom de homeDates (sinon 80px de gap) */
.homeDates + .ctaButtons {
    padding-top: 0;
}

.homeDates__titleWrap {
    padding: 0 160px;
    display: flex;
    margin-bottom: -30px;       /* tab : titre légèrement caché sous les cartes */
    z-index: 1;
    position: relative;
}

.homeDates__title {
    margin: 0;
    background: var(--color-secondary-lilac);
    padding: var(--space-5) var(--space-10) var(--space-10);
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark-blue);
}

.homeDates__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* Toutes les cartes prennent la hauteur de la plus grande (équivalent
       à align-items: stretch par défaut sur grid). On s'assure que les
       cellules ne dépassent jamais (min-width: 0) et que le contenu wrap
       correctement même pour les langues à textes longs (ES, FR…). */
    grid-auto-rows: 1fr;
    gap: var(--space-5);
    padding: 0 var(--content-gutter);
    margin: 0;
    list-style: none;
    z-index: 2;
    position: relative;
}

.dateCard {
    background: var(--color-primary-white);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: 0 0 30px rgba(0, 112, 173, 0.10);
    min-width: 0;          /* permet au texte de wrapper dans la grid cell */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.dateCard__picto {
    width: 40px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: var(--space-3);
}

.dateCard__pictoIcon {
    width: 40px;
    height: 40px;
    background: var(--color-secondary-teal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dateCard__pictoIcon img {
    width: 24px;
    height: 24px;
    /* Pictos dates exportés avec stroke jaune par défaut — on les force
       en blanc sur le fond teal de la pastille */
    filter: brightness(0) invert(1);
}

.dateCard__pictoDrop {
    width: 20px;
    height: 10px;
    margin-top: -1px;
}

.dateCard__when {
    background: var(--color-secondary-purple);
    color: var(--color-primary-white);
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-family-base);
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    align-self: flex-start;
    /* Avant : white-space: nowrap → débordait pour ES "Desde el 12 de…".
       On laisse wrapper, avec un max-width pour rester compact. */
    max-width: 100%;
    box-decoration-break: clone;
}

/* Le contenu BDD enveloppe le texte dans un <p>. On veut que le badge
   purple soit visible derrière le texte uniquement (pas de marge default). */
.dateCard__when p {
    margin: 0;
}

.dateCard__title {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--color-primary-dark-blue);
    /* Permet aux titres longs (DE "Festlegung des Referenzpreises") de
       passer sur plusieurs lignes proprement. */
    overflow-wrap: break-word;
}

.dateCard__title p {
    margin: 0;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
    .homeAdvantages__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .homeDates__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .homeVideo,
    .homeAdvantages,
    .homeDates__grid {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .homeAdvantages__title {
        padding-left: 0;
    }

    .homeNote {
        padding-left: 0;
        flex-direction: column;
    }

    .homeNote__label {
        flex-direction: row;
        gap: var(--space-2);
    }

    .homeVideo__titleMain,
    .homeVideo__titleSub {
        font-size: 24px;
        white-space: normal;
    }

    .homeAdvantages__title,
    .homeDates__title {
        font-size: 24px;
    }

    .homeDates__titleWrap {
        padding: 0 var(--space-5);
    }
}

@media (max-width: 700px) {
    .homeAdvantages__grid,
    .homeDates__grid {
        grid-template-columns: 1fr;
    }

    /* Carte avantage en 1 colonne (pleine largeur) : icône À CÔTÉ du texte
       (au lieu d'être au-dessus, sur sa propre ligne) pour exploiter la
       largeur disponible. */
    .advantageCard {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon title"
            "icon body";
        column-gap: var(--space-5);
        align-items: start;
    }
    .advantageCard__icon  { grid-area: icon; }
    .advantageCard__title { grid-area: title; }
    .advantageCard__body  { grid-area: body; }

    /* Carte date en 1 colonne : picto À CÔTÉ du (badge date + titre),
       au lieu d'être empilé au-dessus. */
    .dateCard {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "picto when"
            "picto title";
        column-gap: var(--space-5);
        row-gap: var(--space-2);
        align-items: start;
    }
    .dateCard__picto { grid-area: picto; margin-bottom: 0; }
    .dateCard__when  { grid-area: when; justify-self: start; }
    .dateCard__title { grid-area: title; }

    .homeVideo__title {
        padding: var(--space-5);
        margin-bottom: -16px;
    }
}