/* ============================================================
   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;
}

/* ----- Polices --------------------------------------------------------- */
/* ExoShare compose en Segoe UI, comme la maquette et comme le site 2025 :
   police systeme sur Windows, avec repli sur les sans-serif de macOS et de
   Linux. Rien a heberger, donc rien a charger. */

/* ----- 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 */
    /* Pile alignee sur le legacy : 'Segoe UI', Arial, sans-serif — SANS
       'Helvetica Neue'. Le legacy ne l'a pas, et l'inserer changeait la chasse
       du texte sur les postes sans Segoe UI (macOS). */
    --font-family-base: 'Segoe UI', 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-0: 0px;
    --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%;
}

/* La mise en page ExoShare est pleine largeur : chaque bande porte sa couleur
   et centre elle-meme son contenu sur 1200 px. `main` ne doit donc rien
   contraindre — l'ancienne largeur fixe de 1400 px et le retrait de 110 px
   heritees d'un autre jumeau coupaient les bandes sur les cotes. */
main {
    width: 100%;
    margin: 0;
    padding: 0;
}

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);
    /* PAS DE LISSAGE FORCE. Le legacy n'en pose aucun : il laisse le rendu par
       defaut du navigateur. `antialiased` + `grayscale` amincissaient le texte
       sur macOS (le grief « police » le plus probable si la relecture se fait
       sur Mac) ; sous Windows ces proprietes sont ignorees, donc aucun effet la
       ou tourne le client. On revient au rendu du legacy. */
}

/* ----- Boutons « souscrire » réutilisables ------------------------------- */
/* Bouton or mat utilisé sur le header, la home (banner), les CTA timeline */
.btnSubscribe {
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;

    background: var(--color-gold);
    color: var(--color-primary-white);

    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;

    cursor: pointer;

    transition: transform 0.05s ease;
}

/* Fond animé */
.btnSubscribe::before {
    content: "";
    position: absolute;
    inset: 0;

    background: #64481538;

    transform: translateX(-100%);
    transition: transform 0.25s ease;

    z-index: 0;
}

/* Slide gauche -> droite */
.btnSubscribe:hover::before {
    transform: translateX(0);
}

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

/* Texte au-dessus */
.btnSubscribe span {
    position: relative;
    z-index: 1;
}

.btnSubscribe--lg {
    padding: 12px 20px;
    min-width: auto;
}

/* ----- Accessibilité ----------------------------------------------------- */
/* Le lien d'évitement sort de l'écran par le côté « début » de la ligne, pas par
   la gauche : en écriture de droite à gauche, un `left: -9999px` place le lien
   9999 px à gauche d'un contenu qui commence à droite, ce qui rend toute la page
   défilable horizontalement (mesuré sur israel_he : 11 439 px de large pour une
   fenêtre de 1440). `inset-inline-start` suit le sens d'écriture. */
.evitement {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
}

.evitement:focus {
    inset-inline-start: 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;
    }
}

@media screen and (max-width: 1400px) {
  main{
    width: 100%;
  }
}