/**
 * =============================================================================
 * STYLES-HARMONY.CSS — Harmonisation globale (dernier fichier CSS prioritaire)
 * =============================================================================
 *
 * Héros pleine page, tailles d’images et vidéos cohérentes, typo claire,
 * alternance fond blanc/bleu des sections, décorations (ex. logo hero).
 *
 * MODIFIER EN TANT QUE NON-DEVELOPPEUR :
 * - Tailles de texte : --harmony-font-base, --harmony-font-h1/h2/h3.
 * - Tailles d’images : --harmony-img-tag, --harmony-img-content, --harmony-img-wide.
 * - Coins arrondis / espacements : --harmony-radius, --harmony-space.
 * - Règles images/vidéos : chercher « Images : tailles cohérentes », « Vidéos ».
 * =============================================================================
 */

/* ---------- Variables harmonie ---------- */
:root {
    --harmony-font-base: 1.0625rem;      /* 17px - texte clair */
    --harmony-font-lead: 1.1875rem;      /* 19px - intro */
    --harmony-font-h1: 2.75rem;
    --harmony-font-h2: 2rem;
    --harmony-font-h3: 1.5rem;
    --harmony-line-height: 1.7;
    --harmony-line-tight: 1.4;
    --harmony-img-tag: 320px;            /* images dans tags/cartes */
    --harmony-img-content: 900px;        /* images contenu principal */
    --harmony-img-wide: 1100px;          /* images larges (timeline, etc.) */
    --harmony-radius: 16px;
    --harmony-radius-lg: 20px;
    --harmony-space: 1.5rem;
    --harmony-space-lg: 2.5rem;
    --harmony-space-xl: 4rem;
}

/* ---------- Base typographique ---------- */
body {
    font-size: var(--harmony-font-base);
    line-height: var(--harmony-line-height);
}

.page-home .tag-text,
.page-home .block-text,
.page-home .presentation-content p,
.page-home .innovation-ftt-text,
.page-home .rbc-text,
.page-home .featured-project-description p {
    font-size: var(--harmony-font-base);
    line-height: var(--harmony-line-height);
    color: var(--text-dark, #1a1a1a);
}

.page-home .tag-title,
.page-home .block-title {
    font-size: var(--harmony-font-h3);
    font-weight: 600;
    line-height: var(--harmony-line-tight);
    color: var(--primary-color, #2c5f8d);
}

.page-home .section-title {
    font-size: var(--harmony-font-h2);
    font-weight: 700;
    line-height: var(--harmony-line-tight);
    color: var(--primary-color, #2c5f8d);
}

.page-home .solution-title {
    font-size: var(--harmony-font-h2);
    font-weight: 600;
    line-height: var(--harmony-line-tight);
    color: var(--primary-color, #2c5f8d);
}

.page-home .hero-title {
    font-size: clamp(2rem, 5vw, var(--harmony-font-h1));
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.page-home .hero-subtitle {
    font-size: var(--harmony-font-lead);
}

.page-home .hero-description,
.page-home .hero-tagline {
    font-size: var(--harmony-font-base);
    line-height: var(--harmony-line-height);
}

/* ---------- Héros : pleine page bleue (accueil, technologies, recherche, sepsis, drépanocytose) ---------- */
.page-home .hero-section,
.page-projets .hero-section,
.page-technologies .hero-section,
.page-recherche .hero-section,
.page-sepsis .hero-section,
.page-drepanocytose .hero-section {
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 0;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
}

.page-home .hero-section .container,
.page-projets .hero-section .container,
.page-technologies .hero-section .container,
.page-recherche .hero-section .container,
.page-sepsis .hero-section .container,
.page-drepanocytose .hero-section .container {
    width: 100%;
    max-width: 900px;
    text-align: center;
}

/* Logo décoratif dans le hero */
.page-home .hero-section::after,
.page-projets .hero-section::after,
.page-technologies .hero-section::after,
.page-recherche .hero-section::after,
.page-sepsis .hero-section::after,
.page-drepanocytose .hero-section::after {
    content: '';
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 80px;
    height: 80px;
    background: url('accueil img/Accueilpng/Logo.png') center/contain no-repeat;
    opacity: 0.15;
    pointer-events: none;
}

@media (max-width: 768px) {
    .page-home .hero-section,
    .page-projets .hero-section,
    .page-technologies .hero-section,
    .page-recherche .hero-section,
    .page-sepsis .hero-section,
    .page-drepanocytose .hero-section {
        min-height: calc(100vh - 70px);
        padding: 1.5rem;
    }
    .page-home .hero-section::after,
    .page-projets .hero-section::after,
    .page-technologies .hero-section::after,
    .page-recherche .hero-section::after,
    .page-sepsis .hero-section::after,
    .page-drepanocytose .hero-section::after {
        width: 56px;
        height: 56px;
        bottom: 1rem;
        right: 1rem;
    }
}

/* Projets : pas de hero, première section = titre seul */
.page-projets .projects-cards-section {
    padding: var(--harmony-space-xl) 2rem;
}

/* ---------- Images : tailles cohérentes (site entier) ---------- */
/* Icônes dans tags (accueil) */
.page-home .tag-item > .tag-image {
    max-width: min(var(--harmony-img-tag), 100%);
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--harmony-radius);
    box-shadow: 0 4px 16px rgba(44, 95, 141, 0.12);
    margin: 0 auto;
    display: block;
}

/* Images contenu (sepsis, drépanocytose, technologies, recherche, accueil) — max 900px */
.main-content .tag-content .tag-image,
.main-content .tag-content img.tag-image,
.page-home .block-image,
.page-home .ftt-image,
.page-home .innovation-ftt-content .tag-image {
    max-width: min(var(--harmony-img-content), 100%) !important;
    width: auto;
    height: auto !important;
    object-fit: contain;
    border-radius: var(--harmony-radius);
    box-shadow: 0 6px 20px rgba(44, 95, 141, 0.15);
    margin: 1rem auto 0;
    display: block;
}

/* Images larges (timeline, etc.) */
.page-home .timeline-image,
.page-home .impact-image,
.page-home .wide-image,
.world-map-image,
.progression-image,
.testimonials-image,
.stat-image {
    max-width: min(var(--harmony-img-wide), 100%);
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--harmony-radius-lg);
    box-shadow: 0 6px 24px rgba(44, 95, 141, 0.12);
    margin: 0 auto;
    display: block;
    aspect-ratio: auto; /* Permet la flexibilité par défaut */
}

/* Fixer le ratio pour les images qui changent de langue pour éviter les sauts de mise en page */
.timeline-image { aspect-ratio: 1024 / 483; }
.progression-image { aspect-ratio: 826 / 1024; }
.carte-image { aspect-ratio: 1024 / 600; } /* Ratio approximatif pour la carte */
.severity-image { aspect-ratio: 1024 / 445; }

/* Vidéos (site entier) — max 900px, hauteur auto */
.main-content video,
.page-home .process-video,
.page-home .block-video-wrapper video,
.page-home .home-video {
    max-width: min(var(--harmony-img-content), 100%) !important;
    width: 100% !important;
    height: auto !important;
    border-radius: var(--harmony-radius);
    box-shadow: 0 6px 20px rgba(44, 95, 141, 0.15);
    display: block;
}

/* Forcer les dimensions identiques pour les images switchables */
img[data-image-en] {
    object-fit: contain !important;
}

/* Conteneurs vidéo + divs englobant une vidéo */
.main-content .video-container,
.main-content .block-video-wrapper,
.main-content .video-wrapper,
.main-content div:has(> video) {
    max-width: min(var(--harmony-img-content), 100%);
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--harmony-radius);
    overflow: hidden;
    width: 100%;
}

/* ---------- Sections ---------- */
.page-home .solution-header {
    position: relative;
    text-align: center;
}

.page-home .section-title {
    position: relative;
}

/* Cartes (sans logos décoratifs) */
.page-home .tag-item,
.page-home .project-card-modern,
.page-home .design-block,
.page-home .stat-card {
    position: relative;
    border-radius: var(--harmony-radius-lg);
    padding: var(--harmony-space-lg);
    box-shadow: 0 6px 24px rgba(44, 95, 141, 0.1);
    border: 1px solid rgba(44, 95, 141, 0.12);
}

/* ---------- Conteneurs & grilles ---------- */
.page-home .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.page-home .tags-grid {
    gap: var(--harmony-space-lg);
}

.page-home .projects-cards-grid {
    gap: var(--harmony-space-lg);
}

/* ---------- Sections alternées (bleu / blanc) ---------- */
.page-home main > .section:not(.hero-section):not(.cta-section):nth-of-type(odd),
.page-projets main > .section:not(.hero-section):nth-of-type(odd),
.page-technologies main > .section:not(.hero-section):nth-of-type(odd),
.page-recherche main > .section:not(.hero-section):nth-of-type(odd) {
    background: #fff;
    margin: 0;
    padding: var(--harmony-space-xl) 2rem;
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(44, 95, 141, 0.08);
    box-shadow: none;
}

.page-home main > .section:not(.hero-section):not(.cta-section):nth-of-type(odd)::before,
.page-projets main > .section:not(.hero-section):nth-of-type(odd)::before,
.page-technologies main > .section:not(.hero-section):nth-of-type(odd)::before,
.page-recherche main > .section:not(.hero-section):nth-of-type(odd)::before {
    display: none;
}

.page-home main > .section:not(.hero-section):not(.cta-section):nth-of-type(even),
.page-projets main > .section:not(.hero-section):nth-of-type(even),
.page-technologies main > .section:not(.hero-section):nth-of-type(even),
.page-recherche main > .section:not(.hero-section):nth-of-type(even) {
    background: linear-gradient(135deg, rgba(44, 95, 141, 0.04) 0%, rgba(44, 95, 141, 0.08) 100%);
    margin: 0;
    padding: var(--harmony-space-xl) 2rem;
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(44, 95, 141, 0.08);
    box-shadow: none;
}

.page-home main > .section:not(.hero-section):not(.cta-section):nth-of-type(even)::before,
.page-projets main > .section:not(.hero-section):nth-of-type(even)::before,
.page-technologies main > .section:not(.hero-section):nth-of-type(even)::before,
.page-recherche main > .section:not(.hero-section):nth-of-type(even)::before {
    display: none;
}

/* ---------- Footer : logo ---------- */
.page-home .footer-logo-container {
    margin-bottom: 0.75rem;
}

.page-home .footer-logo-b3 {
    max-height: 52px;
    height: auto;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
}

.page-home .footer-contact-content strong {
    font-size: var(--harmony-font-base);
}

.page-home .footer-contact-content span {
    font-size: var(--harmony-font-base);
    line-height: var(--harmony-line-height);
}

/* ---------- Boutons & liens ---------- */
.page-home .btn-en-savoir-plus,
.page-home .btn-pour-soignants {
    font-size: var(--harmony-font-base);
    padding: 0.9rem 1.75rem;
}

/* ---------- Responsive global ---------- */
@media (max-width: 992px) {
    :root {
        --harmony-img-tag: 280px;
        --harmony-img-content: 100%;
        --harmony-img-wide: 100%;
    }
    .page-home .section,
    .page-home .solution-section,
    .page-home .projects-cards-section {
        padding: var(--harmony-space-lg) 1.5rem;
    }
    .page-home .section-title { font-size: 1.75rem; }
    .page-home .solution-title { font-size: 1.6rem; }
}

@media (max-width: 768px) {
    body { font-size: 1rem; }
    .page-home .hero-title { font-size: clamp(1.75rem, 6vw, 2.25rem); }
    .page-home .section-title { font-size: 1.5rem; }
    .page-home .solution-title { font-size: 1.35rem; }
    .page-home .tag-title { font-size: 1.25rem; }
    .page-home .section,
    .page-home .solution-section,
    .page-home .projects-cards-section {
        padding: var(--harmony-space-lg) 1rem;
    }
    .main-content video {
        max-height: 400px;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    .page-home .hero-title { font-size: 1.6rem; }
    .page-home .section-title { font-size: 1.35rem; }
    .page-home .solution-title { font-size: 1.2rem; }
    .page-home .tag-item,
    .page-home .project-card-modern {
        padding: var(--harmony-space);
    }
    .main-content video {
        max-height: 320px;
        object-fit: contain;
    }
}