/* ============================================================
   BASE — Reset, variables, fonts, typo de base
   Chargé sur toutes les pages.
   ============================================================ */

/* ----- Reset minimal ------------------------------------------------------ */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend,
textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

ul, ol {
    list-style: none;
}

button, input, select {
    margin: 0;
    font-family: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

img, video, svg {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

iframe {
    border: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
}

details > summary {
    list-style: none;
    cursor: pointer;
}

details > summary::-webkit-details-marker {
    display: none;
}

/* ----- Fonts Noto Sans (variable fonts hébergées sur le proxy d'assets) -- */
@font-face {
    font-family: "Noto Sans";
    src: url("https://assets.weshare.amundi.com/xnet/2026/fonts/Noto_Sans/NotoSans-VariableFont_wdth,wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: url("https://assets.weshare.amundi.com/xnet/2026/fonts/Noto_Sans/NotoSans-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-style: italic;
    font-display: swap;
}

/* ----- Variables (design tokens) ----------------------------------------- */
:root {
    /* Couleurs primaires */
    --color-primary-white: #ffffff;
    --color-primary-black: #000000;
    --color-primary-cyan: #009ee0;
    --color-primary-midnightblue: #001c4b;

    /* Cyans dérivés */
    --color-cyan-02: #00b6ed;
    --color-cyan-04: #0073a3;
    --color-cyan-tint: #ccecf9;       /* fond bandeau home */
    --color-cyan-tint-light: rgba(0, 158, 224, 0.10);

    /* Gris */
    --color-grey-1: #4d4d4f;          /* gris foncé (texte du breadcrumb) */
    --color-grey-2: #d6d7d9;
    --color-grey-3: #9e9fa2;
    --color-grey-4: #c7c8ca;          /* bordure */
    --color-grey-5: #e5e5e6;
    --color-grey-6: #f5f5f5;          /* fond bandeau gris clair */

    /* Or (bouton souscrire) */
    --color-gold: #c19135;
    --color-gold-dark: #7e5d21;
    --color-beige-bg: #f9f4eb;        /* fond cartes moyens de paiement */

    /* Sémantique */
    --color-bg: var(--color-primary-white);
    --color-text: var(--color-primary-midnightblue);
    --color-accent: var(--color-primary-cyan);
    --color-border: var(--color-grey-4);

    /* Typographie */
    --font-family-base: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 32px;
    --line-height-base: 1.5;

    /* Espacements */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Layout */
    --container-padding-x: 180px;     /* gouttière des sections en desktop */
}

/* ----- Body / typo de base ----------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----- Boutons « souscrire » réutilisables ------------------------------- */
/* Bouton or mat utilisé sur le header, la home (banner), les CTA timeline */
.btnSubscribe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: var(--color-gold);
    color: var(--color-primary-white);
    font-size: var(--font-size-base);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    transition: background-color 0.15s ease, transform 0.05s ease;
    cursor: pointer;
}

.btnSubscribe:hover,
.btnSubscribe:focus-visible {
    background: #a87a25;
    outline: none;
}

.btnSubscribe:active {
    transform: translateY(1px);
}

.btnSubscribe--lg {
    padding: 12px 20px;
    font-size: var(--font-size-md);
    min-width: 250px;
}

/* ----- Accessibilité ----------------------------------------------------- */
.evitement {
    position: absolute;
    left: -9999px;
    top: 0;
}

.evitement:focus {
    left: 0;
    z-index: 9999;
    background: var(--color-primary-midnightblue);
    color: #fff;
    padding: var(--space-3) var(--space-5);
}

.hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ----- Bouton scroll-to-top --------------------------------------------- */
.scrollTop {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    width: 40px;
    height: 40px;
    padding: 10px;
    background: var(--color-gold);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: opacity 0.2s ease;
}

.scrollTop.is-visible {
    display: flex;
}

.scrollTop img {
    width: 100%;
    height: auto;
    display: block;
}

/* ----- Fade-in au scroll (data-reveal) ---------------------------------
   Les éléments ayant l'attribut [data-reveal] apparaissent en fondu +
   léger glissement vertical quand ils entrent dans le viewport.
   La logique JS est dans site.js (IntersectionObserver).
   ----------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Respect des préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}