/**
 * C2S — Footer CSS (Parallax Footer)
 *
 * Basé sur le composant Osmo Footer Parallax.
 * Utilise les variables du design system (global.css).
 * Variables d'espacement existantes : 1, 2, 3, 4, 6, 8, 10, 12, 16, 20, 24, 30.
 */


/* ============================================
   Footer wrap (parallax container)
   ============================================ */
.footer-wrap {
    position: relative;
    overflow: hidden;
}

.footer-wrap__dark {
    opacity: 0;
    pointer-events: none;
    background-color: var(--color-heading);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


/* ============================================
   Footer
   ============================================ */
.c2s-footer {
    row-gap: var(--space-12);
    letter-spacing: -.02em;
    flex-flow: column;
    justify-content: space-between;
    min-height: 100svh;
    padding-block: var(--space-10);
    font-weight: 500;
    display: flex;
    position: relative;
    background-color: var(--color-bg-alt);
    padding-top: 6em;
}

.c2s-footer__eyebrow {
    opacity: .5;
    margin-bottom: 0;
    font-size: var(--20px-size);
    font-weight: 500;
}


/* ============================================
   Links row (3 colonnes — Pages / Socials / Contact)
   ============================================ */
.c2s-footer__links-row {
    gap: var(--space-10);
    display: flex;
}

.c2s-footer__col {
    gap: var(--space-8);
    flex-flow: column;
    width: calc((100% - 2 * var(--space-10)) / 3);
    display: flex;
    min-width: 0;
}

.c2s-footer__links {
    gap: var(--space-1);
    flex-flow: column;
    align-items: flex-start;
    display: flex;
}

.c2s-footer__a {
    color: inherit;
    font-size: var(--40px-size);
    line-height: 1;
    text-decoration: none;
    /* Garde-fous : que le lien ne puisse JAMAIS s'effondrer (height 0)
       si bouton.js n'a pas fini son init au moment du paint. */
    display: block;
    min-height: 1em;
}

/* ============================================
   Variant --small : sous-blocs (Sous pages, Articles)
   Texte beaucoup plus discret, listes plus serrées,
   eyebrow réduit. Réutilise le même char-stagger.
   ============================================ */
.c2s-footer__a--small {
    font-size: var(--16px-size);
    line-height: 1.4;
    min-height: auto;
    opacity: 0.85;
}

.c2s-footer__eyebrow--small {
    margin-top: var(--space-6);
    font-size: var(--12px-size);
    opacity: 0.45;
}

.c2s-footer__links--small {
    gap: var(--space-1);
}

.c2s-footer__a [data-button-animate-chars] {
    /* Garde-fou : empêche le collapse vertical du wrapper char-stagger
       qui contient les <span> de chaque lettre. */
    display: inline-block;
    min-height: 1em;
    line-height: 1;
    vertical-align: top;
}


/* ============================================
   Character Stagger — appliqué à TOUS les liens
   du footer (système identique au menu twostep-nav).
   Le JS bouton.js split chaque lettre en <span>.
   ============================================ */
.c2s-footer__a [data-button-animate-chars],
.c2s-footer__cta-side [data-button-animate-chars] {
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.c2s-footer__a [data-button-animate-chars] span,
.c2s-footer__cta-side [data-button-animate-chars] span {
    display: inline-block;
    position: relative;
    text-shadow: 0px 1.3em currentColor;
    transform: translateY(0em) rotate(0.001deg);
    transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-footer__a:hover [data-button-animate-chars] span,
    .c2s-footer__cta-side:hover [data-button-animate-chars] span {
        transform: translateY(-1.3em) rotate(0.001deg);
    }
}

/* Sur mobile/tactile (pas de :hover réel), l'animation translateY ne se
   déclenche jamais, donc le text-shadow 1.3em sert juste à dupliquer le texte
   visiblement sous chaque lien → liens superposés / illisibles. On désactive
   sur plusieurs queries équivalentes pour couvrir tous les cas. */
@media (hover: none),
       (pointer: coarse),
       not all and (hover: hover),
       screen and (max-width: 991px) {
    .c2s-footer__a [data-button-animate-chars] span,
    .c2s-footer__cta-side [data-button-animate-chars] span,
    .c2s-footer [data-button-animate-chars] span {
        text-shadow: none !important;
    }
}


/* ============================================
   CTA Aside — calé sur la grille 12 cols du site.
   Carré + 2 hover-links occupent les 5 dernières colonnes
   (cols 8 → 12), collés tout à droite.
   ============================================ */
.c2s-footer__cta-aside {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: var(--space-4);
}

.c2s-footer__cta-card,
.c2s-footer__cta-extras {
    grid-column: 8 / span 5;     /* cols 8-12 = collé tout à droite */
    min-width: 0;                /* indispensable pour que les enfants flex/grid n'élargissent pas la cellule */
}


/* --------- Carré CTA — TITRE + BOUTON sur la même ligne --------- */
.c2s-footer__cta-card {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8);
    box-sizing: border-box;
    width: 100%;
    background-color: var(--color-heading);
    color: var(--white);
    border-radius: 1.25em;
    overflow: hidden;
    box-shadow:
        0 24px 48px -20px rgba(0, 0, 0, 0.3),
        0 8px 16px -8px rgba(0, 0, 0, 0.18);
}

/* Halo orange subtil pour la profondeur (clipé par overflow:hidden) */
.c2s-footer__cta-card::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -25%;
    width: 22em;
    height: 22em;
    background: radial-gradient(
        circle,
        rgba(255, 113, 34, 0.22) 0%,
        rgba(255, 113, 34, 0) 65%
    );
    pointer-events: none;
    z-index: 0;
}

.c2s-footer__cta-card > * {
    position: relative;
    z-index: 1;
}

.c2s-footer__cta-card-title {
    margin: 0;
    font-size: var(--34px-size);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--white);
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Bouton qui pulse (halo orange en boucle infinie) --- */
.c2s-footer__cta-card-btn-wrap {
    position: relative;
    display: inline-block;
    border-radius: 99px;
    flex-shrink: 0;          /* ne pas tronquer le bouton */
}

.c2s-footer__cta-card-btn-wrap::before,
.c2s-footer__cta-card-btn-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(255, 113, 34, 0.55);
    animation: c2s-footer-cta-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.c2s-footer__cta-card-btn-wrap::after {
    animation-delay: 1.1s;
}

@keyframes c2s-footer-cta-pulse {
    0%   { box-shadow: 0 0 0 0px rgba(255, 113, 34, 0.55); }
    70%  { box-shadow: 0 0 0 18px rgba(255, 113, 34, 0); }
    100% { box-shadow: 0 0 0 18px rgba(255, 113, 34, 0); }
}

.c2s-footer__cta-card .c2s-btn {
    --c2s-btn-height: 3.25em;
    position: relative;
    z-index: 2;
}


/* --------- Hover-links sous le carré (1 ligne, gauche/droite) --------- */
.c2s-footer__cta-extras {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--space-2);
    box-sizing: border-box;
}

.c2s-footer__cta-side {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--16px-size);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-heading);
    text-decoration: none;
    transition: color 0.4s var(--ease-in-out);
}

.c2s-footer__cta-side:hover {
    color: var(--color-primary);
}

.c2s-footer__cta-side-icon {
    display: inline-block;
    font-size: 0.9em;
    opacity: 0.55;
    transition: transform 0.4s var(--ease-in-out), opacity 0.4s var(--ease-in-out);
}

.c2s-footer__cta-side:hover .c2s-footer__cta-side-icon {
    opacity: 1;
    transform: translate(3px, -3px);
}


/* ============================================
   Bottom row
   ============================================ */
.c2s-footer__bottom-row {
    gap: var(--space-6);
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
    display: flex;
}

.c2s-footer__bottom-text {
    gap: var(--space-4);
    flex-flow: column;
    display: flex;
    min-width: 0;
}

.c2s-footer__tagline {
    font-size: var(--20px-size);
    font-weight: 500;
    margin-bottom: 0;
    opacity: .5;
}

/* Logos certifications/labels — bas droite (Crédit d'Impôt Innovation UX
   + Activateur France Num alignés sur la même ligne) */
/* Conteneur "logos" du footer (Crédit d'Impôt Innovation UX + Activateur
   France Num). Doit IMPÉRATIVEMENT rester en row horizontal sur toutes
   les viewports : CII à gauche, France Num à droite, sur la MÊME ligne.
   Les `!important` ne sont là que pour neutraliser une éventuelle règle
   héritée (reset, plugin tiers, plus tard) qui forcerait un display: block. */
.c2s-footer__logos {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.c2s-footer__activateur {
    display: block;
    flex-shrink: 0;
    line-height: 0;
    border-radius: 0.375em;
    overflow: hidden;
    transition: opacity var(--duration-base) var(--ease-in-out),
                transform var(--duration-base) var(--ease-out-expo);
    opacity: 0.85;
    cursor: pointer;
}

.c2s-footer__activateur-img {
    display: block;
    width: auto;
    height: 4em;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
}


/* ============================================
   Responsive
   ============================================ */
@media screen and (max-width: 991px) {
    .c2s-footer__links-row {
        flex-flow: column;
    }

    .c2s-footer__bottom-row {
        flex-flow: column;
        align-items: flex-start;
        gap: var(--space-6);
    }

    .c2s-footer__activateur-img {
        height: 4.5em;
    }

    .c2s-footer__col {
        width: 100%;
    }

    /* CTA prend toute la largeur (plus de grille 12 cols) */
    .c2s-footer__cta-card,
    .c2s-footer__cta-extras {
        grid-column: 1 / -1;
    }

    /* Liens footer : 40px (--40px-size) trop gros tablette → display-sm scale
       fluide (= 2em par rapport à --size-font Osmo). */
    .c2s-footer__a {
        font-size: var(--display-sm);
        line-height: 1.05;
    }
}

@media screen and (max-width: 767px) {
    .c2s-footer__eyebrow {
        font-size: var(--16px-size);
    }

    .c2s-footer__col {
        gap: var(--space-4);
    }

    .c2s-footer__a {
        font-size: var(--20px-size);
    }

    /* Variants --small en mobile : on ré-affirme la hiérarchie pour rester
       plus discret que les liens principaux, tout en restant lisible.
       Sur mobile, le bloc --small vient directement après le bloc Contact
       qui est déjà espacé via le gap de la colonne → margin-top à 0 pour
       éviter le double espacement. */
    .c2s-footer__a--small {
        font-size: var(--16px-size);
    }

    .c2s-footer__eyebrow--small {
        font-size: var(--12px-size);
        margin-top: 0;
    }

    /* Sur mobile, repasse en column (titre puis bouton) pour pas tasser */
    .c2s-footer__cta-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-6);
        padding: var(--space-8);
    }

    .c2s-footer__cta-card-title {
        font-size: var(--20px-size);
    }
}