/*
 * Styles spécifiques à la page d'accueil (front-page.php).
 * Chargé uniquement quand is_front_page() est vrai (voir functions.php).
 * Toutes les couleurs viennent des variables définies dans variables.css.
 */

body.home {
    background-color: var(--frameup-color-bg);
}

/*
 * Le theme parent Astra contraint <main class="frameup-front-page"> a une
 * largeur fixe (1200px, reglage "Largeur du conteneur" du Customizer
 * Astra), appliquee directement sur cet element - pas sur notre propre
 * .frameup-container. Consequence : le hero (qui doit etre plein ecran,
 * bord a bord) restait lui aussi bloque a 1200px, avec un vide symetrique
 * sur les grands ecrans. On libere donc <main> en 100% ici ; chaque
 * section SOUS le hero garde son alignement/centrage actuel car elle
 * s'enveloppe deja individuellement dans .frameup-container (max-width:
 * 1200px, voir base.css) - rien a changer de ce cote-la.
 * !important justifie : Astra applique cette largeur via son propre
 * systeme de mise en page, potentiellement avec une specificite plus
 * elevee ou en style inline selon le reglage actif, donc pas fiable de
 * compter sur la seule specificite/l'ordre de chargement pour gagner.
 */
main.frameup-front-page {
    width: 100% !important;
    max-width: 100% !important;
}

/* =========================================================
   1. BANDEAU VIDEO PLEIN ECRAN
   ========================================================= */
.frameup-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh; /* evite les sauts de hauteur lies a la barre d'adresse mobile */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--frameup-color-bg);
    isolation: isolate;
}

/* Video de fond (desktop/tablette) */
.frameup-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Image de secours affichee sur mobile a la place de la video (perf + data) */
.frameup-hero__fallback-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block;
}

/* Voile marine semi-transparent pour garantir la lisibilite du texte,
   quelle que soit la video/l'image utilisee en fond */
.frameup-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(var(--frameup-color-bg-rgb), 0.55) 0%,
        rgba(var(--frameup-color-bg-rgb), 0.35) 45%,
        rgba(var(--frameup-color-bg-rgb), 0.85) 100%
    );
}

.frameup-hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--frameup-color-text);
    padding: var(--frameup-gutter);
    max-width: 900px;
}

.frameup-hero__title {
    font-size: clamp(2.2rem, 6vw, 4rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin: 0 0 0.75rem;
    color: var(--frameup-color-text);
    text-wrap: balance;
}

.frameup-hero__subtitle {
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    font-weight: 400;
    color: var(--frameup-color-text-secondary);
    margin: 0 0 2.5rem;
    text-wrap: balance;
}

/* Cascade d'entree du hero AU CHARGEMENT (pas au scroll, contrairement a
   .frameup-reveal) : titre, sous-titre puis boutons apparaissent l'un
   apres l'autre. Anime en CSS pur (@keyframes + animation-delay), sans
   dependre du JS : ce contenu est au-dessus de la ligne de flottaison et
   doit toujours jouer, meme si front-page.js echoue a charger. Le mode
   "both" garde l'element dans son etat de depart tant que son delai n'est
   pas ecoule (pas de flash a opacite pleine avant l'animation). */
@keyframes frameup-hero-in {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.frameup-hero__title,
.frameup-hero__subtitle,
.frameup-hero__buttons {
    animation: frameup-hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.frameup-hero__title {
    animation-delay: 0s;
}

.frameup-hero__subtitle {
    animation-delay: 0.15s;
}

.frameup-hero__buttons {
    animation-delay: 0.3s;
}

@media (max-width: 767px) {
    .frameup-hero__title,
    .frameup-hero__subtitle,
    .frameup-hero__buttons {
        animation-duration: 0.32s;
        animation-delay: 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .frameup-hero__title,
    .frameup-hero__subtitle,
    .frameup-hero__buttons {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   2. TROIS BOUTONS D'ACTION DU BANDEAU
   ========================================================= */
.frameup-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Les 3 CTA du hero partagent exactement la meme largeur/hauteur, quel
   que soit leur libelle, pour un rendu parfaitement harmonise */
.frameup-hero__buttons .frameup-btn {
    min-width: 17.5rem;
    white-space: nowrap;
}

/* Sur mobile, la video reste active ; l'image demeure dessous en secours. */
@media (max-width: 768px) {
    .frameup-hero {
        min-height: 60vh;
        min-height: 60svh;
    }

    .frameup-hero__content {
        padding: 1.25rem var(--frameup-gutter);
    }

    .frameup-hero__title {
        font-size: clamp(1.85rem, 9vw, 2.6rem);
        margin-bottom: 0.5rem;
    }

    .frameup-hero__subtitle {
        font-size: clamp(0.95rem, 4vw, 1.1rem);
        margin-bottom: 1.25rem;
    }

    .frameup-hero__buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.6rem;
    }

    .frameup-hero__buttons .frameup-btn {
        width: 100%;
        /* Le nowrap desktop (ligne ~103) n'a plus lieu d'etre en colonne
           pleine largeur : on autorise le retour a la ligne par securite
           sur les ecrans tres etroits (~320px) selon la police heritee. */
        white-space: normal;
        min-height: 2.75rem;
        padding-block: 0.65rem;
    }
}

/* =========================================================
   BLOC MISE EN AVANT (actualité pilotée depuis l'admin)
   Positionné juste après le hero. Un seul padding-top par section
   (au lieu de top+bottom) evite les espaces verticaux qui s'additionnent
   entre deux sections voisines. */
.frameup-mise-en-avant {
    padding-top: var(--frameup-section-spacing);
}

.frameup-mise-en-avant__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    background-color: var(--frameup-color-bg-elevated);
    border: 1px solid var(--frameup-color-border);
    border-radius: var(--frameup-radius-lg);
    overflow: hidden;
    box-shadow: var(--frameup-shadow-md);
}

.frameup-mise-en-avant__media {
    position: relative;
    min-height: 260px;
}

.frameup-mise-en-avant__media img,
.frameup-mise-en-avant__media .frameup-placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frameup-mise-en-avant__body {
    padding: clamp(1.5rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.frameup-mise-en-avant__status {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 0.35em 0.9em;
    border-radius: 999px;
    background-color: rgba(var(--frameup-color-accent-rgb), 0.18);
    color: var(--frameup-color-accent);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.frameup-mise-en-avant__title {
    margin: 0;
    color: var(--frameup-color-text);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.frameup-mise-en-avant__text {
    color: var(--frameup-color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .frameup-mise-en-avant__card {
        grid-template-columns: 1fr;
    }

    .frameup-mise-en-avant__media {
        min-height: 200px;
    }
}

/* =========================================================
   BLOCS TEXTE + IMAGE (histoire de l'association, puis argumentaire
   "faire appel a Frame Up") - composant reutilise 2 fois sur la page,
   voir template-parts/front-page/section-texte-image.php
   ========================================================= */
.frameup-text-image {
    padding-top: var(--frameup-section-spacing);
}

.frameup-text-image__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4rem);
    /* stretch (et non center) : la colonne image occupe toute la hauteur
       de la colonne texte en face, plutot qu'un rectangle fin cale au
       centre avec du vide au-dessus/en-dessous */
    align-items: stretch;
}

/* Variante "image a gauche" (2e bloc de texte) : le composant utilise
   CSS Grid (pas Flexbox), donc l'inversion se fait en permutant les
   largeurs de colonnes ET en deplaçant l'image en 1ere position visuelle
   via `order`, plutot qu'avec flex-direction:row-reverse (sans effet ici). */
.frameup-text-image--reversed .frameup-text-image__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.frameup-text-image--reversed .frameup-text-image__media {
    order: -1;
}

.frameup-text-image__text > * + * {
    margin-top: 1.25rem;
}

.frameup-text-image__heading {
    color: var(--frameup-color-text);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    margin: 0;
}

/* Texte justifie a gauche : justify pour l'alignement des lignes, la
   colonne elle-meme reste positionnee a gauche de la grille (image a
   droite). hyphens:auto + text-justify:inter-word limitent les grands
   espaces blancs typiques du justify.
   Selectionneur renforce (body.frameup-front-page + double classe) :
   le theme parent Astra imprime une partie de son CSS dynamique en
   inline dans le <head>, potentiellement APRES nos feuilles de style
   enqueuees classiquement, ce qui peut lui donner la priorite en cascade
   si nos regles ont une specificite trop faible (ex. simple ".classe p").
   Cette regle-ci (element+classe body, classe body.frameup-front-page,
   classe .frameup-text-image__body, element p) est nettement plus
   specifique que les regles generiques d'Astra (souvent juste "p" ou
   ".entry-content p") et doit gagner sans avoir besoin de !important. */
body.frameup-front-page .frameup-text-image__body p {
    color: var(--frameup-color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.9;
    margin: 0 0 1.4rem;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
    hyphens: auto;
}

/*
 * SI le texte n'apparait toujours pas justifie une fois deploye (a
 * verifier avec l'inspecteur du navigateur : clic droit sur un
 * paragraphe > Inspecter > onglet "Computed" > chercher "text-align" et
 * voir quelle regle est barree/gagnante), c'est qu'une regle d'Astra a
 * une specificite encore plus elevee ou utilise elle-meme !important.
 * Dans ce cas seulement, decommenter la ligne ci-dessous (dernier
 * recours explicitement demande) :
 */
/*
body.frameup-front-page .frameup-text-image__body p {
    text-align: justify !important;
}
*/

body.frameup-front-page .frameup-text-image__body p:last-child {
    margin-bottom: 0;
}

/* Premier paragraphe traite comme une accroche/titre de bloc */
body.frameup-front-page .frameup-text-image__body p:first-child {
    color: var(--frameup-color-text);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 1.5rem;
    text-align: left; /* l'accroche n'est jamais justifiee, seul le corps de texte l'est */
}

/* Desktop : la colonne image remplit toute la hauteur disponible (celle
   de la colonne texte, grace a align-items:stretch ci-dessus), avec un
   minimum garanti si le texte en face est court */
.frameup-text-image__media {
    height: 100%;
    min-height: 320px;
}

.frameup-text-image__media .frameup-placeholder-img,
.frameup-text-image__media img {
    width: 100%;
    height: 100%;
    border-radius: var(--frameup-radius-md);
    object-fit: cover;
}

/* En dessous de 900px : empilement vertical texte puis image, jamais
   l'inverse, pour ne pas repousser le texte hors de vue sur mobile.
   Le stretch desktop n'a plus de sens en 1 colonne : on repasse sur un
   ratio d'aspect fixe pour une hauteur d'image raisonnable. */
@media (max-width: 900px) {
    .frameup-text-image__grid,
    .frameup-text-image--reversed .frameup-text-image__grid {
        grid-template-columns: 1fr;
    }

    /* Le bloc inverse (image a gauche en desktop) revient a l'ordre
       normal texte-puis-image en 1 colonne : la regle "jamais l'inverse
       sur mobile" prime sur image_position. */
    .frameup-text-image--reversed .frameup-text-image__media {
        order: 0;
    }

    .frameup-text-image__media {
        height: auto;
        min-height: 0;
        margin-top: 0.5rem;
    }

    .frameup-text-image__media .frameup-placeholder-img,
    .frameup-text-image__media img {
        aspect-ratio: 16 / 10; /* image plus large/basse sur mobile, ne domine pas l'ecran */
    }
}

/* =========================================================
   CARROUSEL DE PRODUCTIONS MISES EN AVANT
   ========================================================= */
.frameup-carousel-section {
    padding-top: var(--frameup-section-spacing);
}

.frameup-carousel-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.frameup-carousel {
    position: relative;
}

.frameup-carousel__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
    /* Masque la barre de défilement tout en gardant le scroll tactile */
    scrollbar-width: thin;
    scrollbar-color: var(--frameup-color-accent) transparent;
}

.frameup-carousel__card {
    /* Legere inclinaison permanente, façon photos posees de travers sur
       une table : --frameup-card-tilt est redefinie par carte via le
       cycle nth-child ci-dessous, jamais la meme valeur sur 2 cartes
       consecutives. Definie en custom property pour rester reutilisable
       telle quelle dans la regle :hover (un transform remplace toujours
       entierement le precedent, il faut donc reciter l'inclinaison a
       chaque etat plutot que de l'y perdre). */
    --frameup-card-tilt: 0deg;
    flex: 0 0 clamp(220px, 30vw, 300px);
    scroll-snap-align: start;
    display: block;
    text-decoration: none;
    background-color: var(--frameup-color-bg-elevated);
    border: 1px solid var(--frameup-color-border);
    border-radius: var(--frameup-radius-md);
    overflow: hidden;
    transform: rotate(var(--frameup-card-tilt));
    transition: transform var(--frameup-transition), border-color var(--frameup-transition);
}

/* Cycle de 4 inclinaisons alternees pour un effet naturel, pas toutes
   les cartes penchees pareil */
.frameup-carousel__card:nth-child(4n+1) {
    --frameup-card-tilt: -1deg;
}

.frameup-carousel__card:nth-child(4n+2) {
    --frameup-card-tilt: 1.5deg;
}

.frameup-carousel__card:nth-child(4n+3) {
    --frameup-card-tilt: -2deg;
}

.frameup-carousel__card:nth-child(4n+4) {
    --frameup-card-tilt: 1deg;
}

.frameup-carousel__card:hover,
.frameup-carousel__card:focus-visible {
    transform: translateY(-4px) rotate(var(--frameup-card-tilt));
    border-color: var(--frameup-color-accent);
}

.frameup-carousel__thumb {
    aspect-ratio: 16 / 10;
    width: 100%;
}

.frameup-carousel__thumb img,
.frameup-carousel__thumb .frameup-placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frameup-carousel__card-title {
    margin: 0;
    padding: 1rem 1.1rem 1.2rem;
    color: var(--frameup-color-text);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
}

.frameup-carousel__empty {
    color: var(--frameup-color-text-secondary);
    font-style: italic;
}

/* Respecte la préférence "réduire les animations" : pas d'auto-défilement JS
   (voir front-page.js) et défilement instantané plutôt qu'animé */
@media (prefers-reduced-motion: reduce) {
    .frameup-carousel__track {
        scroll-behavior: auto;
    }
}

/* =========================================================
   GALERIE PHOTO (dernière section de la page : padding-top ET
   padding-bottom, pour laisser un espace confortable avant le pied de page)
   ========================================================= */
.frameup-gallery-section {
    padding-top: var(--frameup-section-spacing);
    padding-bottom: calc(var(--frameup-section-spacing) * 1.2);
}

.frameup-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.frameup-gallery-grid__item {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--frameup-radius-md);
    overflow: hidden;
}

.frameup-gallery-grid__item img,
.frameup-gallery-grid__item .frameup-placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frameup-gallery-section__cta {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

/* =========================================================
   EFFET "POLAROID" (specifique aux images de la page d'accueil)
   Le systeme generique .frameup-reveal / .frameup-reveal--delay-*
   (classes + animation IntersectionObserver) a ete deplace dans
   base.css + assets/js/reveal.js car il est reutilise par d'autres
   templates que la page d'accueil (ex. La Team) : voir la-bas pour
   la definition et le respect de prefers-reduced-motion communs.
   ========================================================= */

/* Effet "polaroid" : reserve aux images (.frameup-text-image__media),
   jamais aux titres/texte qui gardent le translateY/scale standard
   ci-dessus. Surcharge le "resting state" ET l'etat .is-visible de
   .frameup-reveal pour cet element precis (specificite 2 classes,
   l'emporte sans !important). Flou + desaturation qui se resolvent
   lentement (1.3s) pour un effet "developpement" photographique ; la
   rotation, elle, ne revient PAS a 0 une fois l'animation terminee : une
   legere inclinaison reste en permanence (photo posee de travers), seule
   son point de depart est plus marque (-2deg) que son repos final. */
.frameup-polaroid.frameup-reveal {
    opacity: 0.3;
    transform: rotate(-2deg);
    filter: blur(8px) grayscale(60%);
    transition: opacity 1.3s ease-out, transform 1.3s ease-out, filter 1.3s ease-out;
}

.frameup-polaroid.frameup-reveal.is-visible {
    opacity: 1;
    transform: rotate(-1.5deg); /* inclinaison permanente, ne revient pas a 0deg */
    filter: blur(0) grayscale(0%);
}

/* Rotation inversee sur le bloc "image a gauche" pour varier l'effet
   d'un bloc a l'autre plutot que de repeter exactement la meme courbe,
   au depart de l'animation ET dans l'inclinaison permanente finale */
.frameup-text-image--reversed .frameup-polaroid.frameup-reveal {
    transform: rotate(2deg);
}

.frameup-text-image--reversed .frameup-polaroid.frameup-reveal.is-visible {
    transform: rotate(1.5deg);
}

/* Le reduced-motion generique (.frameup-reveal et ses variantes de delai)
   est gere dans base.css. Ici, seule la partie specifique a l'effet
   polaroid : l'inclinaison des images est un choix de mise en page
   permanent (pas une animation), elle reste meme quand les animations
   sont reduites, seuls le flou/desaturation/delai d'entree disparaissent */
@media (prefers-reduced-motion: reduce) {
    .frameup-polaroid.frameup-reveal {
        opacity: 1;
        transform: rotate(-1.5deg);
        filter: none;
        transition: none;
        transition-delay: 0s;
    }

    .frameup-text-image--reversed .frameup-polaroid.frameup-reveal {
        transform: rotate(1.5deg);
    }
}