/* ============================================
   Ixila — page d'accueil
   ============================================ */

/* --- Sections generiques pour cette page --- */
.section {
    padding: var(--sp-4xl) 0;
}
.section--intro { padding-block: var(--sp-3xl); }
/* Le titre 2 de l'intro hierarchise par rapport au paragraphe qui suit */
.section__title--intro {
    text-align: center;
    margin: 0 0 var(--sp-lg);
    line-height: 1.25;
}
.section__title--intro strong {
    color: var(--c-primary); /* "Visibilité. Maitrise. Efficacité." en framboise pour appuyer */
    font-weight: 700;
}
.section--intro .lead { margin-top: 0; }

.section__header {
    text-align: center;
    max-width: var(--container-narrow);
    margin: 0 auto var(--sp-2xl);
}
.section__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    color: var(--c-text);
    margin: 0 0 var(--sp-md);
}
.section__subtitle {
    color: var(--c-text-muted);
    font-size: var(--fs-body-lg);
    margin: 0;
}
.section__cta {
    text-align: center;
    margin-top: var(--sp-2xl);
}

/* --- HERO accueil — video de fond + texte blanc a droite (style Wix) --- */
.hero--home {
    position: relative;
    min-height: clamp(520px, 78vh, 760px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #1a2030; /* fallback pendant chargement video */
}
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* leger voile gauche-droite pour la lisibilite du texte */
    background:
        linear-gradient(90deg, rgba(15, 25, 50, 0.30) 0%, rgba(15, 25, 50, 0.05) 40%, rgba(15, 25, 50, 0.20) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.20) 100%);
}
.hero--home > .container {
    position: relative;
    z-index: 2;
    width: 100%;
}
.hero__content {
    max-width: 960px;
    margin-left: auto;
    margin-right: clamp(var(--sp-lg), 6vw, 6rem); /* leger decalage par rapport au bord */
    text-align: right;
    color: var(--c-white);
}
.hero__title {
    font-family: var(--ff-display);
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-white);
    margin: 0 0 var(--sp-2xl);
    font-weight: 600;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.20);
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
    justify-content: flex-end;
    align-items: center;
}
.hero__cta {
    background: var(--c-primary);
    color: var(--c-white);
    border: 0;
    padding: var(--sp-md) var(--sp-xl);
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(217, 79, 112, 0.35);
    transition: background var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}
.hero__cta:hover {
    background: var(--c-primary-dark);
    box-shadow: 0 6px 22px rgba(217, 79, 112, 0.45);
    transform: translateY(-2px);
}
/* Note: les rules .hero__waves et le fond de section apres-hero ont ete
   deplacees dans pages.css (charge globalement) car elles s'appliquent
   aussi aux pages internes — sinon le SVG sans styles devient un flex
   item qui pousse le titre du hero. */

/* Header transparent au-dessus du hero (effet immersif comme Wix), avec un
   filet teinte foncé en haut pour garantir la lisibilité du menu blanc.
   Devient opaque blanc au scroll (geree par .is-scrolled dans app.js). */
body:has(.hero--home) .site-header.header--light:not(.is-scrolled) {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
/* Sur le hero (fond sombre), forcer texte blanc + ombre + plus de gras pour lisibilite */
body:has(.hero--home) .site-header.header--light:not(.is-scrolled) .nav__link,
body:has(.hero--home) .site-header.header--light:not(.is-scrolled) .lang-switcher__link {
    color: var(--c-white);
    font-weight: var(--fw-semibold);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
body:has(.hero--home) .site-header.header--light:not(.is-scrolled) .nav__link:hover,
body:has(.hero--home) .site-header.header--light:not(.is-scrolled) .nav__link--active {
    color: var(--c-white);
}
body:has(.hero--home) .site-header.header--light:not(.is-scrolled) .header__logo-img {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.30));
}

/* --- Section intro / lead --- */
.lead {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-normal);
    color: var(--c-text-soft);
    text-align: left; /* lecture plus fluide pour les paragraphes longs (3+ lignes) */
}
.lead strong {
    color: var(--c-text);
    font-weight: var(--fw-semibold);
}

/* --- Section vidéo de présentation (1 min) --- */
.section--video-intro {
    background: var(--c-light);
    padding-block: var(--sp-3xl);
}
.video-intro__text {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-normal);
    color: var(--c-text-soft);
    text-align: left;
    max-width: 760px;
    margin: 0 auto var(--sp-2xl);
}
.video-intro__player {
    max-width: 980px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: #000;
    aspect-ratio: 16 / 9;
}
.video-intro__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Benefices (5 cartes : ligne 1 = 3, ligne 2 = 2 centrees) --- */
.section--benefits { background: var(--c-white); }
.benefits-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-lg);
}
/* Chaque carte couvre 2 colonnes — donne 3 cartes sur la ligne 1 */
.benefit-card { grid-column: span 2; }
/* Cartes 4 et 5 centrees sur la ligne 2 (col 2-3 et 4-5) */
.benefit-card:nth-child(4) { grid-column: 2 / span 2; }
.benefit-card:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 1024px) {
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .benefit-card,
    .benefit-card:nth-child(4),
    .benefit-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 480px) {
    .benefits-grid { grid-template-columns: 1fr; }
}
.benefit-card {
    background: var(--c-light);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-xl);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-primary-light);
}
.benefit-card__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    color: var(--c-primary);
    margin: 0 0 var(--sp-sm);
    font-weight: 600;
}
.benefit-card__text {
    color: var(--c-text-soft);
    line-height: var(--lh-normal);
    margin: 0;
    font-size: var(--fs-body);
}

/* --- Principes (4 cartes numerotees) --- */
.section--principles {
    background: linear-gradient(180deg, var(--c-light), var(--c-surface));
}
.principles-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 explicite — evite le 3+1 boiteux */
    gap: var(--sp-xl);
}
@media (max-width: 600px) {
    .principles-grid { grid-template-columns: 1fr; }
}
.principle-card {
    position: relative;
    background: var(--c-white);
    border-radius: var(--radius-lg);
    padding: var(--sp-2xl) var(--sp-xl) var(--sp-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.principle-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.principle-card__num {
    position: absolute;
    top: var(--sp-md);
    right: var(--sp-lg);
    font-family: var(--ff-display);
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--c-primary);
    opacity: 0.18;
    line-height: 1;
}
.principle-card__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    color: var(--c-text);
    margin: 0 0 var(--sp-md);
    padding-right: var(--sp-2xl);
    font-weight: 600;
}
.principle-card__text {
    color: var(--c-text-soft);
    line-height: var(--lh-normal);
    margin: 0;
}

/* --- CTA bridge --- */
.section--cta-bridge {
    background: var(--c-white);
    padding-block: var(--sp-3xl);
}
.cta-bridge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-lg);
    text-align: center;
    padding: var(--sp-lg) 0;
}
.cta-bridge p {
    margin: 0;
    color: var(--c-text);
    font-size: var(--fs-body-lg);
}
.cta-bridge--soft {
    border-top: 1px solid var(--c-border);
    margin-top: var(--sp-lg);
    padding-top: var(--sp-2xl);
}

/* CTAs des bridges sur fond clair : .btn--primary est deja framboise (global).
   On override .btn--outline pour utiliser le framboise au lieu du blanc/transparent
   (qui est conçu pour fond sombre). */
.cta-bridge .btn--outline {
    background-color: transparent;
    color: var(--c-primary);
    border-color: var(--c-primary);
}
.cta-bridge .btn--outline:hover {
    background-color: var(--c-primary);
    color: var(--c-white);
    border-color: var(--c-primary);
}

/* --- Exemples (5 cartes) --- */
.section--examples { background: var(--c-light); }
.examples-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-lg);
}
/* 5 cartes : 3 sur la ligne 1, 2 centrees sur la ligne 2 (cols 2-3 et 4-5) */
.example-card { grid-column: span 2; }
.example-card:nth-child(4) { grid-column: 2 / span 2; }
.example-card:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 1024px) {
    .examples-grid { grid-template-columns: repeat(2, 1fr); }
    .example-card,
    .example-card:nth-child(4),
    .example-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 480px) {
    .examples-grid { grid-template-columns: 1fr; }
}
.example-card {
    background: var(--c-white);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--radius-md);
    padding: var(--sp-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.example-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.example-card__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    color: var(--c-secondary);
    margin: 0 0 var(--sp-sm);
    font-weight: 600;
}
.example-card__text {
    color: var(--c-text-soft);
    line-height: var(--lh-normal);
    margin: 0;
    font-size: var(--fs-body);
}

/* --- Clients gallery --- */
.section--clients {
    background: var(--c-white);
}
.clients-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 colonnes x 3 lignes = 18 logos */
    gap: var(--sp-lg);
    align-items: center;
    justify-items: center;
}
.client-tile {
    width: 100%;
    aspect-ratio: 16 / 10; /* moins carre, plus large pour mieux mettre en valeur les logos */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* fond transparent (consigne) */
    padding: var(--sp-sm);
    transition: transform var(--transition-normal);
}
.client-tile:hover {
    transform: scale(1.05);
}
.client-tile img {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0.2);
    opacity: 0.9;
    transition: filter var(--transition-normal), opacity var(--transition-normal);
}
.client-tile:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* --- CTA final --- */
.section--cta-final {
    background: linear-gradient(135deg, var(--c-secondary) 0%, var(--c-secondary-dark) 100%);
    color: var(--c-white);
    text-align: center;
}
.section--cta-final h2 {
    font-family: var(--ff-display);
    color: var(--c-white);
    font-size: var(--fs-h2);
    margin: 0 0 var(--sp-md);
}
.section--cta-final p {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-body-lg);
    margin: 0 0 var(--sp-2xl);
}
/* Exception : sur le fond navy gradient du cta-final, on ne veut PAS le framboise.
   Harmonisation avec la DA bleue : btn--primary en cuivre (plus discret que le jaune
   tertiary, plus chaleureux), btn--outline en blanc (deja conçu pour fond sombre). */
.section--cta-final .btn--primary {
    background-color: #C87533; /* cuivre — chaleur sans crier */
    border-color: #C87533;
    color: var(--c-white);
}
.section--cta-final .btn--primary:hover {
    background-color: #D88840;
    border-color: #D88840;
    color: var(--c-white);
    box-shadow: 0 6px 20px rgba(200, 117, 51, 0.40);
}
.section--cta-final .btn--outline {
    color: var(--c-white);
    border-color: var(--c-white);
    background-color: transparent;
}
.section--cta-final .btn--outline:hover {
    background: var(--c-white);
    color: var(--c-secondary-dark);
    border-color: var(--c-white);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .hero__content {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    .hero__actions { justify-content: center; }
    .hero__overlay {
        background: linear-gradient(180deg, rgba(15, 25, 50, 0.20) 0%, rgba(15, 25, 50, 0.45) 100%);
    }
}
@media (max-width: 1100px) {
    .clients-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .hero--home { min-height: 540px; }
    .principle-card__num { font-size: 2.5rem; }
    .clients-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .hero--home { min-height: 480px; }
    .clients-grid { grid-template-columns: repeat(2, 1fr); }
    .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .hero__actions .btn { width: 100%; }
}