/* ============================================================
   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 --------------------------------------------------------- */
/* Syensqo compose en POPPINS, comme la maquette Figma et comme le site 2024.
   La police d'affichage « Syensqo » ne sert qu'a l'accroche de la banniere -
   c'est le caractere de marque, pas une police de labeur. Les deux sont
   AUTO-HEBERGEES dans webfonts/, reprises telles quelles du millesime 2024.
   `font-display: swap` evite un texte invisible le temps du chargement. */
@font-face {
    font-family: 'Poppins';
    src: url('webfonts/poppins-light-webfont.woff2') format('woff2'),
         url('webfonts/poppins-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('webfonts/poppins-regular-webfont.woff2') format('woff2'),
         url('webfonts/poppins-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('webfonts/poppins-italic-webfont.woff2') format('woff2'),
         url('webfonts/poppins-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('webfonts/poppins-bold-webfont.woff2') format('woff2'),
         url('webfonts/poppins-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syensqo';
    src: url('webfonts/syensqo-regular-webfont.woff2') format('woff2'),
         url('webfonts/syensqo-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ----- Variables (design tokens) ----------------------------------------- */
/* Les noms `--sy-*` sont ceux des variables du Figma « Syensqo_2024_V1 » :
   dark silver, light silver, Innovative Orange, Beige, black, white. Les noms
   generiques `--color-*`, `--font-*` sont ceux qu'attend le reste du socle
   (admin, composants) : on les fait pointer sur la charte plutot que de les
   dupliquer. */
:root {
    /* Charte Syensqo */
    --sy-orange:        #ff6542;   /* Innovative Orange : accroche, titres de section, menu */
    --sy-gris-fonce:    #353c47;   /* dark silver : titres, cartes, pied de page */
    --sy-gris-clair:    #626976;   /* light silver : fil d'ariane, textes secondaires */
    --sy-beige:         #f5ece1;   /* Beige : fonds des pastilles de menu, bandeau mentions */
    --sy-noir:          #1d1d1b;   /* black : texte des boutons clairs */
    --sy-blanc:         #ffffff;
    /* Le fil d'ariane pose le light silver a 20 % (Figma 2199:7416). */
    --sy-gris-voile:    rgba(98, 105, 118, 0.2);
    /* Ombre portee des survols : le gris fonce a 8 %. */
    --sy-ombre:         rgba(53, 60, 71, 0.08);

    /* Couleurs primaires (noms attendus par le socle) */
    --color-primary-white: var(--sy-blanc);
    --color-primary-black: var(--sy-noir);
    --color-primary-cyan: var(--sy-orange);
    --color-primary-midnightblue: var(--sy-gris-fonce);

    /* Gris */
    --color-grey-1: var(--sy-gris-clair);
    --color-grey-2: #d9d9d9;
    --color-grey-3: #9e9fa2;
    --color-grey-4: #c7c8ca;
    --color-grey-5: #e5e5e6;
    --color-grey-6: #f5f5f5;

    /* Semantique */
    --color-bg: var(--sy-blanc);
    --color-text: var(--sy-gris-fonce);
    --color-accent: var(--sy-orange);
    --color-border: var(--sy-gris-clair);

    /* Typographie. Echelle du Figma : mention 10-12, menu 14, texte 20,
       titres 32, accroche de banniere 38. L'interligne « normal » du socle est
       remplace par les valeurs de la maquette, 1.132 pour les titres et 1.12
       pour le reste - Poppins a un interligne naturel bien plus large. */
    --font-family-base: 'Poppins', Arial, sans-serif;
    --font-family-marque: 'Syensqo', 'Poppins', Arial, sans-serif;
    --font-size-mention: 12px;
    --font-size-base: 20px;
    --font-size-nav: 14px;
    --font-size-md: 20px;
    --font-size-lg: 24px;
    --font-size-h2: 32px;
    --font-size-xl: 32px;
    --font-size-accroche: 38px;
    --line-height-base: 1.12;
    --line-height-titre: 1.132;

    /* 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: 260px;     /* gouttiere du corps, Figma « BODY » px-260 */
}

/* Ecritures que Poppins ne couvre pas : chinois, japonais, coreen, thai,
   devanagari. Sans cela chaque ideogramme tombe en repli caractere par
   caractere, et une meme phrase melange deux dessins - « SYENSQO » en Poppins,
   le reste en police systeme. On rend la main au systeme, qui choisit la bonne
   police d'apres l'attribut `lang` de la page (cf. layout/public.php). C'est ce
   que 2024 obtenait avec styles_arial.css. */
body.sy-ecriture-systeme {
    --font-family-base: Arial, Helvetica, sans-serif;
    --font-family-marque: Arial, Helvetica, sans-serif;
}

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

/* La mise en page Syensqo est pleine largeur : la banniere et le pied de page
   portent leur propre retrait, et le corps se partage en trois colonnes (cf.
   syensqo-public.css). `main` ne doit donc rien contraindre. */
main {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100%;
    flex: 1;
}

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);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* 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(--sy-orange);
    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: 100px;
    width: 40px;
    height: 40px;
    padding: 10px;
    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%;
  }
}


@media screen and (max-width: 1200px) {
  body:not(.sy-index){
    padding-bottom: 104px;
  }
}