/**
 * C2S — Design System (global.css)
 *
 * Ce fichier est LE design system du thème.
 * Il est chargé sur TOUTES les pages en premier.
 *
 * Contenu :
 *   1. Variables :root (couleurs, tailles, etc.)
 *   2. Scaling System Osmo (responsive fluide)
 *   3. Reset
 *   4. Typographie de base (body, h1-h6, p, a…)
 *   5. Utilitaires layout
 */


/* ==========================================================================
   0. @FONT-FACE — PP Neue Montreal (local)
   ========================================================================== */

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../../font-PP-Neue-Montreal/PPNeueMontreal-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../../font-PP-Neue-Montreal/PPNeueMontreal-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../../font-PP-Neue-Montreal/PPNeueMontreal-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../../font-PP-Neue-Montreal/PPNeueMontreal-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../../font-PP-Neue-Montreal/PPNeueMontreal-SemiBolditalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../../font-PP-Neue-Montreal/PPNeueMontreal-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   1. VARIABLES :ROOT — Design Tokens
   ========================================================================== */

:root {
    /* --- Couleurs --- */
    --lightgrey: #e4e4e4;
    --dark: #0e0e0e;
    --grey: #F5F5F5;
    --light: #f6f6f6;
    --orange: #FF7122;
    --transparent: #fff0;
    --dark-60: #636363;
    --darklighter: #1b1b1b;
    --lightergrey: #bebebe;
    --white: white;
    --black: black;
    --darkgrey: #848484;

    /* Alias sémantiques */
    --color-primary: var(--orange);
    /* #FF7122 */
    --color-primary-light: #ff9f5f;
    /* orange clair (gradient) */
    --color-heading: var(--darklighter);
    /* #1b1b1b */
    --color-body: var(--dark);
    /* #0e0e0e */
    --color-body-light: var(--dark-60);
    /* #636363 */
    --color-bg: var(--grey);
    /* #F5F5F5 */
    --color-bg-alt: var(--light);
    /* #f6f6f6 */
    --color-border: var(--lightgrey);
    /* #e4e4e4 */
    --color-muted: var(--grey);
    /* #9e9e9e */
    --color-overlay: #0000004d;
    /* noir 30% — backdrop page */
    --color-separator: #0000001a;
    /* noir 10% — lignes subtiles */

    /* --- Tailles typographiques --- */
    --11px-size: .6875rem;
    --12px-size: .75rem;
    --14px-size: .875rem;
    --16px-size: 1rem;
    --18px-size: 1.125rem;
    --18px-static: 18px;
    --20px-size: 1.25rem;
    --34px-size: 2.125rem;
    --40px-size: 2.5rem;
    --48px-size: 3rem;
    --64px-size: 4rem;
    --72px-size: 4.5rem;

    /* --- Display sizes (Osmo-scaled, em) ---
       xs = palier intermédiaire entre --20px-size (fixe) et --display-sm,
       pensé pour les liens nav mobile / sous-titres compacts. */
    --display-xs: 1.75em;
    --display-sm: 2em;
    --display-md: 3em;
    --display-lg: 3.5em;
    --display-xl: 4.5em;
    --display-2xl: 5em;

    /* H1 "Hero spécial" — clamp fluide pensé pour rester IMPOSANT
       sur mobile (min 55px / 3.4375rem sur smartphone 375-390px),
       monter jusqu'à ~72px (4.5rem) sur les viewports tablette/large.
       À utiliser sur les H1 de hero phare type accueil / landing où le
       titre doit dominer visuellement SANS jamais déborder du viewport
       (la valeur intermédiaire 14vw assure le scaling fluide entre les
       deux bornes). Différent de --display-2xl (5em fixe scalé par le
       root font Osmo) qui peut tomber à ~32px sur mobile. */
    --display-hero: clamp(3.4375rem, 14vw, 4.5rem);

    /* Mobile overrides */
    --12px-mob-size: .857rem;
    --14px-mob-size: 1rem;

    /* --- Espacement --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-30: 7.5rem;

    /* --- Transition --- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 200ms;
    --duration-base: 400ms;
    --duration-slow: 800ms;

    /* --- Z-index --- */
    --z-cursor: 9999;
    --z-transition: 9998;
    --z-header: 1000;
    --z-overlay: 900;
    --z-modal: 800;
}


/* ==========================================================================
   2. SCALING SYSTEM OSMO — https://osmo.supply/
   ========================================================================== */

/* Desktop */
:root {
    --size-unit: 16;
    --size-container-ideal: 1440;
    --size-container-min: 992px;
    --size-container-max: 1920px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
    --col: calc((var(--size-container) - 19.5em) / 12);
}

/* Tablet */
@media screen and (max-width: 991px) {
    :root {
        --size-container-ideal: 834;
        --size-container-min: 768px;
        --size-container-max: 991px;
    }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
    :root {
        --size-container-ideal: 550;
        --size-container-min: 480px;
        --size-container-max: 767px;
    }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
    :root {
        --size-container-ideal: 390;
        --size-container-min: 320px;
        --size-container-max: 479px;
    }
}


/* ==========================================================================
   3. RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

ul,
ol {
    list-style: none;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
}


/* ==========================================================================
   4. TYPOGRAPHIE DE BASE
   ========================================================================== */

body {
    font-family: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: var(--size-font);
    line-height: 1.6;
    color: var(--color-body);
    background-color: var(--color-bg);
    overflow-x: hidden;
    -webkit-text-rendering: optimizeSpeed;
    text-rendering: optimizeSpeed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-heading);
}

h1 {
    font-size: 8rem;
}

h2 {
    font-size: var(--48px-size);
}

h3 {
    font-size: var(--20px-size);
}

h4 {
    font-size: var(--18px-size);
}

p {
    margin-bottom: var(--space-4);
    font-size: var(--16px-size);
    color: var(--color-body-light);
    line-height: 1.7;
}

a {
    transition: color var(--duration-fast) ease;
}

strong,
b {
    font-weight: 700;
}

/* Responsive typo */
@media screen and (max-width: 767px) {
    h1 {
        font-size: var(--48px-size);
    }

    h2 {
        font-size: var(--20px-size);
    }
}

@media screen and (max-width: 479px) {
    h1 {
        font-size: var(--20px-size);
    }
}


/* ==========================================================================
   5. UTILITAIRES LAYOUT
   ========================================================================== */

.container {
    max-width: var(--size-container);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.container.medium {
    max-width: calc(var(--size-container) * 0.85);
}

.container.small {
    max-width: calc(var(--size-container) * 0.7);
}

.c2s-section {
    padding-top: calc(var(--col) * 1.5);
    padding-bottom: calc(var(--col) * 1.5);
}

.c2s-pt-0        { padding-top: 0; }
.c2s-pt-half     { padding-top: calc(var(--col) * 0.5); }
.c2s-pt-1        { padding-top: var(--col); }
.c2s-pt-1half    { padding-top: calc(var(--col) * 1); }
.c2s-pt-2        { padding-top: calc(var(--col) * 2); }
.c2s-pt-3        { padding-top: calc(var(--col) * 3); }

.c2s-pb-half     { padding-bottom: calc(var(--col) * 0.5); }
.c2s-pb-1        { padding-bottom: var(--col); }
.c2s-pb-1half    { padding-bottom: calc(var(--col) * 2); }
.c2s-pb-2        { padding-bottom: calc(var(--col) * 2); }
.c2s-pb-3        { padding-bottom: calc(var(--col) * 3); }

.c2s-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;
}


/* ==========================================================================
   6. UNDERLINE LINK — https://osmo.supply/
   ========================================================================== */

[data-underline-link] {
    text-decoration: none;
    position: relative;
}

[data-underline-link]::before {
    content: "";
    position: absolute;
    bottom: -0.0625em;
    left: 0;
    width: 100%;
    height: 0.1em;
    background-color: currentColor;
    transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {

    [data-hover]:hover [data-underline-link]::before,
    [data-underline-link]:hover::before {
        transform-origin: left;
        transform: scaleX(1) rotate(0.001deg);
    }
}


/* ==========================================================================
   7. ACCORDION / FAQ — text black on orange hover tile (slide-in/out)
   ========================================================================== */

.cds-accordion__header,
.cds-accordion__h3,
.cds-accordion__icon,
.cds-accordion__body p {
    transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.cds-accordion__item[data-status^="enter-"] .cds-accordion__header,
.cds-accordion__item[data-status^="enter-"] .cds-accordion__h3,
.cds-accordion__item[data-status^="enter-"] .cds-accordion__body p {
    color: var(--color-heading);
}


/* ==========================================================================
   8. RESPONSIVE — Mobile + Tablet (≤ 991px)

   Source unique de vérité du responsive C2S. Chaque CSS de page DOIT lire
   ses valeurs ici (variables `--*-mob`, classes utilitaires `.c2s-mob-*`)
   au lieu de réinventer ses propres breakpoints / valeurs en dur.

   Principes :
     1. Le DESKTOP n'est JAMAIS modifié. Tout passe par @media (max-width:991px).
     2. Tablet = mobile (un seul breakpoint à 991px).
     3. Le scaling fluide Osmo gère déjà les fonts + container ; ce bloc gère
        UNIQUEMENT les overrides structurels (grilles, flex, padding, gap).
     4. AUCUNE animation n'est touchée (pas de transform, opacity, transition).
   ========================================================================== */

:root {
    /* --- Variables structurelles mobile ---
       Réutilisables partout via `var(--*-mob)`. Source unique de vérité. */
    --col-mob:           calc(var(--size-container) / 6);  /* col mobile (~6 cols logiques) */
    --gap-mob:           var(--space-4);                   /* gap entre items grille mobile */
    --gap-mob-tight:     var(--space-3);                   /* gap serré (cards collées) */
    --gap-mob-loose:     var(--space-6);                   /* gap large (sections) */

    --section-py-mob:    calc(var(--col) * 1.25);          /* padding vertical de section */
    --section-py-mob-sm: calc(var(--col) * 0.75);          /* compact */
    --section-py-mob-lg: calc(var(--col) * 2);             /* spacious */

    --container-px-mob:  var(--space-4);                   /* padding latéral container mobile */

    --hero-py-mob:       calc(var(--col) * 1.5);           /* padding vertical hero */
    --hero-vh-mob:       100dvh;                           /* hauteur hero mobile */

    --grid-stack-gap:    var(--gap-mob);                   /* gap quand grid collapse en 1col */
}

@media screen and (max-width: 991px) {

    /* ==========================================================================
       8.0 REBASE DE `--col` SUR `--col-mob`
       ────────────────────────────────────────────────────────────────────────
       Pourquoi : `--col` desktop = `(container - 19.5em) / 12`. Sa formule
       suppose un container ≥ ~600px (sinon le terme - 19.5em domine et le
       résultat tombe à ~6-8px). Sur 390px de viewport on a littéralement
       `--col ≈ 6.5px` → tous les `calc(var(--col) * N)` (padding-block,
       margin, gap) des sections, heros, articles, fiches outils, pages
       villes, etc., deviennent quasi-invisibles en mobile.

       Fix DRY : on rebase `--col` sur `--col-mob` (= container / 6) sur tout
       le site dès qu'on passe en tablette/mobile (≤ 991px). Aucun fichier
       de page CSS n'a besoin d'être touché : la cascade CSS vars (résolues
       au moment de l'usage) propage automatiquement la nouvelle valeur
       partout. Les variables dérivées (`--section-py-mob`, `--hero-py-mob`,
       etc.) sont résolues à chaque usage avec la NOUVELLE valeur de
       `--col`, donc elles bénéficient aussi du fix sans modification.

       Safe à 100% pour les usages "calcul de width/height en cols" du site :
         - vault.css max-width `calc(N * --col + ...)`     → clampé par container
         - accueil.css min-height `calc(--col * 5 + ...)` → reste cohérent
         - consultant-seo.css width `calc(3 * --col + ...)` → reste cohérent
         - header.css flex `calc(100% - 2 * --col - 3em)` → toujours positif
           (testé : 991 - 130 - 48 > 0), et `.is--visual` passe en
           display:none à 767px, donc pas de risque en dessous.

       Le DESKTOP n'est JAMAIS modifié — la redéfinition est strictement
       enfermée dans @media (max-width: 991px). */
    :root {
        --col: var(--col-mob);
    }


    /* ==========================================================================
       8.1 LAYOUT GLOBAL — overrides des utilities du fichier
       ========================================================================== */

    .container {
        padding-inline: var(--container-px-mob);
    }

    /* `.container.medium` / `.container.small` perdent leur réduction sur mobile
       (sinon le contenu est trop étroit à 375px). */
    .container.medium,
    .container.small {
        max-width: var(--size-container);
    }

    .c2s-section {
        padding-top: var(--section-py-mob);
        padding-bottom: var(--section-py-mob);
    }

    /* Padding utilities — versions mobile compressées (multiplicateurs
       réduits pour ne pas exploser l'espace vertical : `--col` est déjà
       rebasé sur `--col-mob` au-dessus, donc 1 col mobile ≈ 65px à 390px,
       on ne veut pas 2-3 cols × 65px = 130-195px de padding au bouton). */
    .c2s-pt-2        { padding-top: calc(var(--col) * 1.5); }
    .c2s-pt-3        { padding-top: calc(var(--col) * 2); }
    .c2s-pb-1half    { padding-bottom: calc(var(--col) * 1.25); }
    .c2s-pb-2        { padding-bottom: calc(var(--col) * 1.5); }
    .c2s-pb-3        { padding-bottom: calc(var(--col) * 2); }


    /* ==========================================================================
       8.2 GRILLES 12 COLONNES — collapse opt-in via `.c2s-mob-stack`
                                 ou auto via `[data-mob-stack]`

       Pattern d'usage : la majorité des grilles 12-cols du site DOIVENT
       passer en 1-col (full width) sur mobile. Cette utility le fait
       proprement sans casser le HTML existant.

       Usage :
         <div class="c2s-mob-stack" style="display:grid;
              grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5em;">
              <div style="grid-column:span 5;">…</div>
              <div style="grid-column:span 7;">…</div>
         </div>

       Sur mobile, la grille passe à 1 colonne, le gap devient `--gap-mob`,
       et chaque enfant prend la full largeur. Aucune ligne CSS à dupliquer
       par page.
       ========================================================================== */

    .c2s-mob-stack,
    [data-mob-stack] {
        grid-template-columns: 1fr !important;
        gap: var(--grid-stack-gap) !important;
    }

    .c2s-mob-stack > *,
    [data-mob-stack] > * {
        grid-column: 1 / -1 !important;
    }

    /* Variant : 2 colonnes en mobile (cards 2x2). */
    .c2s-mob-stack-2,
    [data-mob-stack="2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--grid-stack-gap) !important;
    }

    .c2s-mob-stack-2 > *,
    [data-mob-stack="2"] > * {
        grid-column: span 1 !important;
    }


    /* ==========================================================================
       8.3 FLEX UTILITIES — passer flex-direction row → column en mobile
       ========================================================================== */

    .c2s-mob-flex-col {
        flex-direction: column !important;
    }

    .c2s-mob-flex-col > * {
        width: 100% !important;
    }

    .c2s-mob-flex-wrap {
        flex-wrap: wrap !important;
    }


    /* ==========================================================================
       8.4 VISIBILITY UTILITIES
       ========================================================================== */

    .c2s-mob-hide   { display: none !important; }
    .c2s-mob-show   { display: block !important; }
    .c2s-mob-show-flex { display: flex !important; }
    .c2s-mob-show-grid { display: grid !important; }


    /* ==========================================================================
       8.5 SIZING UTILITIES
       ========================================================================== */

    .c2s-mob-full   { width: 100% !important; }
    .c2s-mob-auto   { width: auto !important; }


    /* ==========================================================================
       8.6 OVERFLOW GUARD — anti horizontal scroll
                            (à activer manuellement sur les sections "qui dépassent")
       ========================================================================== */

    .c2s-mob-no-overflow {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }


    /* ==========================================================================
       8.7 TYPO — extensions de la section 4 (qui couvre déjà h1/h2 à <767px)
       ========================================================================== */

    h1 {
        font-size: var(--display-md);  /* 3em → cohérent avec scaling fluide */
        line-height: 1.05;
    }

    h2 {
        font-size: var(--display-sm);  /* 2em */
        line-height: 1.1;
    }

    h3 {
        font-size: var(--18px-size);
    }

    /* ==========================================================================
       8.8 OVERFLOW GUARD GLOBAL — protection anti-scroll-horizontal mobile

       Garde-fou : sur mobile, beaucoup d'éléments décoratifs en position absolue
       (cross, dot, label vertical, médias hover) peuvent dépasser. On masque
       proprement l'overflow-x au niveau `body` pour qu'un débordement local
       ne crée jamais de scroll horizontal global.

       NB: on ne fait PAS `overflow-x: hidden` sur `html` car ça casse les
       `position: sticky` (Lenis + ScrollTrigger pin / horizontal scroll).
       ========================================================================== */
    body {
        overflow-x: clip;
    }

    /* Tout élément `data-barba="container"` doit aussi clipper son overflow-x
       sinon les transitions Barba peuvent réintroduire le scroll horizontal. */
    [data-barba="container"] {
        overflow-x: clip;
    }
}


/* ==========================================================================
   8b. BREAKPOINT TRÈS PETIT — Mobile portrait (≤ 479px)

   Override fin pour les très petits écrans (iPhone SE 320, iPhone 12/13/14 Pro 390).
   On évite les valeurs minuscules sur la cible "mobile classique" (375-414px).
   ========================================================================== */

@media screen and (max-width: 479px) {

    :root {
        --container-px-mob: var(--space-3);  /* padding latéral plus serré */
    }

    /* h1 reste cohérent avec global.css ligne 333-337 (--20px-size) */
}


/* ==========================================================================
   9. PAGE 404 (template 404.php)

   Layout simple, centré, héritant du design system du thème.
   Aucune dépendance externe : la page 404 doit fonctionner même si
   les autres modules CSS sont absents.
   ========================================================================== */

.c2s-page-404 {
    min-height: calc(100svh - var(--space-12, 6em));
    display: flex;
    align-items: center;
    justify-content: center;
}

.c2s-404-hero {
    width: 100%;
    padding-top: var(--space-12, 6em);
    padding-bottom: var(--space-12, 6em);
    text-align: center;
}

.c2s-404-hero__eyebrow {
    font-size: var(--16px-size);
    font-weight: 500;
    letter-spacing: 0.1em;
    opacity: 0.5;
    margin: 0 0 var(--space-4, 1em);
}

.c2s-404-hero__title {
    font-size: var(--display-md, clamp(2em, 6vw, 4em));
    line-height: 1.05;
    font-weight: 500;
    margin: 0 0 var(--space-4, 1em);
}

.c2s-404-hero__lead {
    font-size: var(--20px-size);
    line-height: 1.5;
    max-width: 36em;
    margin: 0 auto var(--space-8, 2em);
    opacity: 0.7;
}

.c2s-page-404 .c2s-btn {
    margin: 0 auto;
}