/* =============================================================================
   CTA DE FIN DE PAGE - "Prêt à passer l'hiver au chaud ?"
   Section verte de clôture de la home : titre, texte court et deux boutons
   d'action (catalogue / contact). Pas de newsletter : le client ne l'a pas
   autorisée, la section ne collecte donc aucune adresse e-mail.

   Sommaire :
     1. Reset
     2. Design tokens
     3. Utilitaires
     4. Section - arrière-plan
     5. Layout & typographie
     6. Boutons d'action
     7. Focus (accessibilité clavier)
     8. Animation d'entrée (scroll reveal)
     9. Responsive
    10. Préférence : mouvement réduit
============================================================================= */

/* -----------------------------------------------------------------------
   1. RESET
----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   2. DESIGN TOKENS
   Source unique de vérité pour toutes les valeurs réutilisées. Les
   couleurs exposent aussi un triplet "-rgb" pour composer des opacités
   (rgba()) sans dupliquer la valeur hexadécimale ailleurs dans le fichier.
----------------------------------------------------------------------- */

.winter-cta {
    /* --- Polices ------------------------------------------------------- */

    /* --- Couleurs de marque (mesurées sur la maquette) ------------------ */

    /* --- Texte ----------------------------------------------------------- */

    --color-terracotta-dark: color-mix(in srgb, var(--color-ember) 84%, black); /* survol du bouton principal */
    --color-text-body: color-mix(in srgb, var(--color-paper) 82%, transparent);   /* paragraphe, lien */

    /* --- Ombres ------------------------------------------------------------ */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-paper) 85%, transparent);

    /* --- Mouvement ------------------------------------------------------ */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* hover / focus */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* apparitions */
    --duration-hover: 180ms;
    --duration-state: 250ms;
    --duration-enter: 600ms;
    --reveal-distance: 20px;

    /* --- Largeurs --------------------------------------------------------- */
    --container-max-width: 1280px;
    --content-max-width: 640px;   /* texte */

    /* --- Espacements fluides -----------------------------------------------
       Interpolés entre 375px (plancher mobile) et 1440px (référence desktop
       de la maquette). Au-delà de 1440px la valeur se fige au maximum : un
       très grand écran gagne de la respiration autour du bloc, jamais un
       bloc plus gros que l'intention de la maquette. */
    --space-section-top: clamp(4.5rem, 3.05rem + 8.3vw, 10rem);   /* 72px → 160px */
    --space-section-bottom: clamp(3.5rem, 1.9rem + 6.8vw, 8rem);  /* 56px → 128px */
    --space-title-gap: clamp(1.125rem, 0.95rem + 0.9vw, 1.75rem); /* 18px → 28px */
    --space-actions-gap: clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem);   /* 24px → 40px */

    /* Padding horizontal de section : 16px sous 400px, fluide jusqu'à
       24px à 600px, figé à 24px au-delà. Couvre "petit smartphone" à
       "tablette" sans média-requête dédiée. */
    --space-section-inline: clamp(1rem, 4vw, 1.5rem);
}

/* -----------------------------------------------------------------------
   3. STYLES GLOBAUX & UTILITAIRES
----------------------------------------------------------------------- */

/* Masque visuellement sans retirer l'élément du flux d'information pour
   les technologies d'assistance. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------------------------------
   4. SECTION - ARRIÈRE-PLAN
   Trois couches, du dessus vers le dessous : un grain fin (bruit fractal
   SVG, mélangé en "soft-light"), deux motifs de cernes concentriques
   ancrés en bas-gauche/bas-droite, puis la couleur de fond pleine.
   Aucune image bitmap : tout est généré en CSS, léger et ajustable.
----------------------------------------------------------------------- */

.winter-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;

    padding-block: var(--space-section-top) var(--space-section-bottom);
    padding-inline: var(--space-section-inline);

    background-color: var(--color-forest);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        repeating-radial-gradient(
            circle at 6% 92%,
            color-mix(in srgb, var(--color-paper) 2.8%, transparent) 0px,
            color-mix(in srgb, var(--color-paper) 2.8%, transparent) 1px,
            transparent 1px,
            transparent 26px
        ),
        repeating-radial-gradient(
            circle at 94% 92%,
            color-mix(in srgb, var(--color-paper) 2.8%, transparent) 0px,
            color-mix(in srgb, var(--color-paper) 2.8%, transparent) 1px,
            transparent 1px,
            transparent 26px
        );
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 220px 220px, auto, auto;
    background-blend-mode: soft-light, normal, normal;
}

/* -----------------------------------------------------------------------
   5. LAYOUT & TYPOGRAPHIE
----------------------------------------------------------------------- */

.winter-cta__container {
    width: 100%;
    max-width: var(--container-max-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.winter-cta__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-title-gap);
    margin-bottom: var(--space-actions-gap);
}

.winter-cta__title {
    margin: 0;
    max-width: 900px;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(2rem, 1.3rem + 3vw, 4rem); /* 32px → 64px, figé à 1440px */
    line-height: 1.1;
    color: var(--color-paper);
    text-wrap: balance; /* évite une veuve isolée sur les titres multi-lignes */
    overflow-wrap: break-word;
}

.winter-cta__description {
    margin: 0;
    max-width: var(--content-max-width);
    font-family: var(--font-sans);
    font-size: clamp(1rem, 0.91rem + 0.4vw, 1.25rem); /* 16px → 20px */
    line-height: 1.6;
    color: var(--color-text-body);
}

/* -----------------------------------------------------------------------
   6. BOUTONS D'ACTION
   Deux boutons côte à côte, centrés : un principal plein (braise) et un
   secondaire en contour clair (lisible sur le fond vert). Hauteur unique
   du site (--btn-height), même rayon que les autres boutons.
----------------------------------------------------------------------- */

.winter-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.winter-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    padding: 0 32px;
    border: 1.5px solid transparent;
    border-radius: var(--r-control);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--duration-hover) var(--ease-standard),
        border-color var(--duration-hover) var(--ease-standard),
        color var(--duration-hover) var(--ease-standard);
}

.winter-cta__button--primary {
    background-color: var(--color-ember);
    border-color: var(--color-ember);
    color: var(--color-paper);
}

.winter-cta__button--primary:hover {
    background-color: var(--color-terracotta-dark);
    border-color: var(--color-terracotta-dark);
}

.winter-cta__button--outline {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--color-paper) 70%, transparent);
    color: var(--color-paper);
}

.winter-cta__button--outline:hover {
    background-color: var(--color-paper);
    border-color: var(--color-paper);
    color: var(--color-forest);
}

.winter-cta__button:active {
    transition-duration: 100ms; /* retour au clic quasi instantané */
}

/* -----------------------------------------------------------------------
   7. FOCUS (accessibilité clavier)
   :focus-visible plutôt que :focus : l'anneau n'apparaît qu'à la
   navigation clavier, jamais sur un simple clic souris/tactile.
----------------------------------------------------------------------- */

.winter-cta__button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* -----------------------------------------------------------------------
   8. ANIMATION D'ENTRÉE (scroll reveal)
   Fade-up échelonné, activé par section-cta.js (Intersection Observer).
   Sans JavaScript, aucun élément ne reçoit .winter-reveal : le contenu
   reste visible - jamais de contenu masqué en l'absence de script.
----------------------------------------------------------------------- */

.winter-reveal {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
        opacity var(--duration-enter) var(--ease-out),
        transform var(--duration-enter) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.winter-reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------------------------------
   9. RESPONSIVE
   Typographie et espacements sont déjà fluides (section 2). Sous 576px,
   les deux boutons s'empilent en pleine largeur (zone tactile confortable).
----------------------------------------------------------------------- */

@media (max-width: 576px) {
    .winter-cta__actions {
        flex-direction: column;
        gap: 12px;
    }

    .winter-cta__button {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------
   10. PRÉFÉRENCE UTILISATEUR - MOUVEMENT RÉDUIT
   Coupe transitions/animations non essentielles. Le contenu reste
   pleinement visible et fonctionnel : seul le mouvement disparaît.
----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .winter-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}