/* ============================================================
   BASE — Reset, design tokens, fonts, typo de base
   Tokens extraits de la maquette Figma ESOP 2026 Capgemini.
   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;
}

/* ----- Safety : prévient le scroll horizontal accidentel ------------------
   Notamment en RTL (ar) où les box-shadows latérales et les paddings
   asymétriques peuvent générer un débordement infini. `clip` est préféré
   à `hidden` car il n'engendre pas de scroll-context (préserve
   position:sticky en interne). Fallback `hidden` pour les vieux navigateurs. */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100vw;
}

/* RTL spécifique : double sécurité — certaines anciennes implémentations
   d'Arabic scripts forcent un élément à déborder à droite. */
html[dir="rtl"],
html[dir="rtl"] body {
    overflow-x: clip;
}

/* ----- Flip horizontal des flèches directionnelles en RTL ─────────
   Les SVG sont dessinées en LTR (pointent à droite). En RTL elles
   doivent pointer à gauche pour respecter le sens de lecture. On
   utilise scaleX(-1) sur les classes qui contiennent visiblement
   une flèche directionnelle.
   Important : on EXCLUT les chevrons d'accordéon / dropdown
   (faqItem__arrow, countrySwitch__chevron) qui pointent VERS LE BAS
   et ne doivent pas être flippés. */
html[dir="rtl"] .homeNote__arrow,
html[dir="rtl"] .offreBullets__arrow,
html[dir="rtl"] .offreDateRow__picto svg,
html[dir="rtl"] .offrePayMethod__titleArrow {
    transform: scaleX(-1);
}

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 Ubuntu (auto-hébergées sur le S3 Capgemini) ----------------- */
@font-face {
    font-family: "Ubuntu";
    src: url("https://assets-esop.capgemini.com/xnet/2026/fonts/Ubuntu/Ubuntu-Regular.woff2") format("woff2"),
         url("https://assets-esop.capgemini.com/xnet/2026/fonts/Ubuntu/Ubuntu-Regular.ttf")    format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Ubuntu";
    src: url("https://assets-esop.capgemini.com/xnet/2026/fonts/Ubuntu/Ubuntu-Italic.woff2") format("woff2"),
         url("https://assets-esop.capgemini.com/xnet/2026/fonts/Ubuntu/Ubuntu-Italic.ttf")    format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Ubuntu";
    src: url("https://assets-esop.capgemini.com/xnet/2026/fonts/Ubuntu/Ubuntu-Medium.woff2") format("woff2"),
         url("https://assets-esop.capgemini.com/xnet/2026/fonts/Ubuntu/Ubuntu-Medium.ttf")    format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Ubuntu";
    src: url("https://assets-esop.capgemini.com/xnet/2026/fonts/Ubuntu/Ubuntu-Bold.woff2") format("woff2"),
         url("https://assets-esop.capgemini.com/xnet/2026/fonts/Ubuntu/Ubuntu-Bold.ttf")    format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Ubuntu";
    src: url("https://assets-esop.capgemini.com/xnet/2026/fonts/Ubuntu/Ubuntu-BoldItalic.woff2") format("woff2"),
         url("https://assets-esop.capgemini.com/xnet/2026/fonts/Ubuntu/Ubuntu-BoldItalic.ttf")    format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ============================================================
   DESIGN TOKENS — Figma "NEW2026" collection
   ============================================================ */
:root {
    /* ----- Palette primaire ----- */
    --color-primary-blue:        #0058AB;   /* Capgemini blue (signature) */
    --color-primary-dark-blue:   #121A38;   /* Sections sombres / footer */
    --color-primary-light-blue:  #1DB8F2;   /* Accents lumineux */
    --color-primary-light-grey:  #F3F4F5;   /* Backgrounds neutres */
    --color-primary-white:       #FFFFFF;

    /* ----- Palette secondaire ----- */
    --color-secondary-teal:      #00828E;   /* Bandeaux, CTA principaux */
    --color-secondary-turquoise: #00D5D0;   /* Accents vifs */
    --color-secondary-lilac:     #D4D3F1;   /* Fond doux (page choix pays) */
    --color-secondary-purple:    #71609E;
    --color-secondary-yellow:    #FEB100;   /* Highlight / badge */
    --color-secondary-deep-red:  #8F3237;   /* Warning / négatif */

    /* ----- Sémantique ----- */
    --color-bg:          var(--color-primary-white);
    --color-text:        var(--color-primary-dark-blue);
    --color-accent:      var(--color-secondary-teal);
    --color-link:        var(--color-primary-blue);
    --color-border:      #D6D7D9;
    --color-warning-bg:  rgba(143, 50, 55, 0.08);

    /* ----- Typographie ----- */
    --font-family-base: "Ubuntu", "Helvetica Neue", Arial, sans-serif;

    /* Échelle Figma : 10 / 12 / 16 / 20 / 32 */
    --font-size-mention: 10px;
    --font-size-nav:     12px;
    --font-size-base:    16px;
    --font-size-h2:      20px;
    --font-size-h1:      32px;

    --font-weight-regular: 400;
    --font-weight-medium:  500;
    --font-weight-bold:    700;

    --line-height-tight:  1.1;
    --line-height-base:   1.5;

    /* ----- Espacements (item spacing/* Figma) ----- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  10px;   /* item spacing/10 — token Figma */
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ----- Strokes ----- */
    --stroke-width-base: 1px;
    --stroke-width-bold: 4px;   /* stroke weight/4 — token Figma */

    /* ----- Layout ----- */
    --content-max-width: 1240px;        /* observable Figma : content 1240 dans frames 1440 */
    --content-gutter:    100px;         /* (1440 - 1240) / 2 */
    --navbar-height:     54px;          /* NAV BAR Figma 54.3 */
    --menu-height:       40px;          /* MENU Figma 40 */
}

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

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

/* ----- Bouton « Souscrire » réutilisable -------------------------------- */
/* Style principal Capgemini : fond jaune, texte navy, gras.
   Utilisé dans le menu, sur la page comment_souscrire, sur le price_banner.
   La variante --lg agrandit padding + min-width pour les zones de hero. */
.btnSubscribe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: var(--color-secondary-yellow);
    color: var(--color-primary-dark-blue);
    font-family: var(--font-family-base);
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

.btnSubscribe:hover,
.btnSubscribe:focus-visible {
    background: var(--color-primary-dark-blue);
    color: var(--color-primary-white);
    outline: none;
}

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

.btnSubscribe--lg {
    padding: 14px 28px;
    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-dark-blue);
    color: var(--color-primary-white);
    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;
}

/* Utilitaire générique : masque tout, y compris pour les lecteurs d'écran.
   Utilisé pour injecter des données DOM destinées au JS (ex. NumberFormatter). */
.u-hidden {
    display: none !important;
}

/* ----- Bouton scroll-to-top (Figma 198:1329) ---------------------------
   Rond, fond dark blue, padding 20px, drop-shadow blanche, flèche up
   blanche au centre.
   ------------------------------------------------------------------------ */
.scrollTop {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--color-primary-dark-blue);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.30);
    color: var(--color-primary-white);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

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

.scrollTop:hover {
    transform: translateY(-2px);
}

.scrollTop svg {
    width: 22px;
    height: 22px;
    display: block;
    color: inherit;
}

/* ----- Fade-in au scroll (data-reveal) ----------------------------------
   Animation à l'apparition dans le viewport. Logique JS dans site.js.
   ------------------------------------------------------------------------ */
[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);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}