/* Design System Variables */
:root {
    --bg-main: #080D1A;
    --bg-cards: #0F1629;
    --bg-sections-alt: #0C1322;
    --accent-blue: #0099FF;
    --accent-green: #00C27C;
    --text-primary: #F0F4FF;
    --text-secondary: #8A9CC2;
    --border-glass: rgba(0, 153, 255, 0.18);
    --glow-blue: rgba(0, 153, 255, 0.12);
    --glow-green: rgba(0, 194, 124, 0.12);
    --font-titles: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
}


/* ⚠️ `height: auto` EST CE QUI GARDE LE RATIO quand une <img> porte width/height (posés le
   20 septembre 2026 pour le CLS — la page ne saute plus pendant le chargement, et le CLS est une
   métrique de classement). Sans lui, un CSS qui ne fixe que la largeur laisserait la hauteur
   déclarée en attribut : l'image s'écraserait. Une règle plus précise (.logo img { height: 40px })
   garde la main sur celle-ci. Aucune <img> du site ne portait de height avant. */
img { max-width: 100%; height: auto; }
/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ⚠️⚠️ LE CLIPPAGE HORIZONTAL EST SUR `html`, PAS SEULEMENT SUR `body`, ET C EST MESURE.
   `body { overflow-x: hidden }` seul ne suffisait pas : la page se laissait FAIRE DEFILER DE COTE
   de 214 px au telephone (mesure : `scrollTo(600, 0)` puis `scrollX`). En retirant le tableau
   comparatif, le defilement tombait a 0 — cest lui la source, et il a commence a deborder au
   moment ou il est passe a cinq colonnes.

   ⚠️ ET LA GEOMETRIE DU DOM ETAIT POURTANT CORRECTE : `.table-container` fait 335 px avec
   `overflow-x: auto`, `.container` 375, `body` 375. Chaque element est dans les clous — le
   debordement s echappait quand meme vers la fenetre. *Un balayage des elements qui depassent ne
   trouve rien dans ce cas : le seul controle qui tranche est d ESSAYER DE FAIRE DEFILER.*

   ⚠️ `clip` ET NON `hidden` sur `html` : `hidden` cree un conteneur de defilement — donc quelque
   chose qui PEUT encore etre defile par programme — et il casse `position: sticky` chez les
   descendants. `clip` coupe sans creer de conteneur. La ligne `hidden` juste avant est le repli
   pour les navigateurs qui ne connaissent pas `clip` ; ne pas la supprimer en la croyant morte. */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    background-color: var(--bg-main) !important;
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.75;
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titles);
    font-weight: 800;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

/* Logos */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-titles);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
}

.logo img {
    height: 32px;
    width: auto;
    transition: transform 0.3s ease;
}

.logo:hover img {
    transform: rotate(-5deg) scale(1.1);
}

/* Layout */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-glass);
    transition: all 0.4s ease;
    background: transparent;
}

.navbar-scrolled {
    background: rgba(8, 13, 26, 0.8) !important;
    backdrop-filter: blur(16px);
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(0, 153, 255, 0.3);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-weight: 500;
    font-size: 0.95rem;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--accent-blue);
}

.nav-cta {
    display: block;
}

    /* Burger Menu Styles */
    .burger {
        display: none;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        cursor: pointer;
        padding: 0;
        z-index: 2005;
        position: relative;
    }

.burger div {
    width: 100%;
    height: 3px;
    background-color: #FFFFFF !important;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}

/* Animation vers la croix */
.burger-active div:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg) !important;
}

.burger-active div:nth-child(2) {
    opacity: 0 !important;
}

.burger-active div:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg) !important;
}

@media (max-width: 992px) {
    .nav-links {
        display: none;
    }

    .nav-links-mobile {
        display: flex !important;
        position: fixed;
        top: 0;
        right: 0;
        /* ⚠️ `dvh` ET NON `vh` : sur une surcouche plein écran, `100vh` vaut la fenêtre BARRE
           MASQUÉE — donc, barre affichée, le menu dépasse par le bas et ses derniers liens sont
           inatteignables (une surcouche `fixed` ne se fait pas défiler). `dvh` suit la fenêtre
           réelle à chaque instant, ce qui est exactement ce qu il faut ici — alors que le hero,
           lui, veut `svh` pour NE PAS bouger. Deux problèmes voisins, deux unités différentes.
           ⚠️ La ligne `100vh` est le repli des navigateurs sans `dvh`. */
        height: 100vh;
        height: 100dvh;
        width: 100%;
        background: var(--bg-main) !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        z-index: 1050;
        animation: fadeIn 0.3s ease;
    }

    .nav-links-mobile a {
        font-size: 1.5rem;
        font-family: var(--font-titles);
        color: white !important;
    }

    .nav-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .burger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 30px !important;
        height: 20px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 2005 !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .burger div {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background-color: #FFFFFF !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
    }

    .nav-cta {
        display: none;
    }

    .nav-links-mobile .nav-cta-mobile {
        display: block !important;
    }

    main {
        padding-top: 80px; /* Éviter que le contenu soit caché sous la navbar fixe */
    }
}

/* Footer Responsive */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center;
    }

    .footer-brand .logo {
        justify-content: center;
    }

    .footer-brand p {
        margin: 20px auto;
        max-width: 300px;
    }

    .footer-links h3, .footer-legal h3 {
        margin-bottom: 20px;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.btn {
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    display: inline-block;
}

.btn-green {
    background-color: var(--accent-green);
    color: white;
}

/* ═══ Animations d'apparition ═══
   ⚠️⚠️ TOUT EST CONDITIONNÉ À `html.js`, ET C'EST LE CŒUR DU CORRECTIF. `.reveal` posait
   `opacity: 0` et attendait un `IntersectionObserver` : sans JavaScript — script bloqué, erreur
   JS en amont, robot qui n'exécute rien — TOUTE LA PAGE SOUS LE HERO RESTAIT INVISIBLE, et rien
   ne le signalait. La classe `js` est posée par un script en tête du <head> ; quand il ne tourne
   pas, ces règles n'existent pas et le contenu s'affiche, simplement sans animation.
   *Une dégradation doit retirer l'animation, jamais le contenu.*

   ⚠️ Un `#hero .reveal { opacity: 1 !important }` traînait dans `home.css` : quelqu'un avait vu
   le symptôme et n'avait sauvé QUE le hero. Il est retiré — on corrige la cause, pas l'instance. */
html.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html.js .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ⚠️⚠️ CE QUI EST AU-DESSUS DE LA LIGNE DE FLOTTAISON NE S'ANIME PAS. Le hero est la première
   chose qu'on voit : le faire apparaître en fondu, c'est offrir une page vide à la première image,
   à celui qui arrive ET au robot qui capture une vignette. Il n'y a rien à « révéler » d'un
   contenu déjà à l'écran.
   ⚠️ Une règle de ce genre existait déjà — `#hero .reveal { opacity: 1 !important }` dans
   `home.css` — mais comme RUSTINE d'un défaut qu'elle ne nommait pas, et avec un `!important` qui
   interdisait toute adaptation. Elle revient ici comme une décision, sans `!important`, à côté de
   la règle qu'elle borne.

   ⚠️⚠️ ET ELLE ÉNUMÉRAIT DEUX IDENTIFIANTS À LA MAIN — `#hero`, `#acc-hero` — DONC ELLE NE GARDAIT
   QUE DEUX PAGES SUR SIX. *(Mesuré à l'écran le 19 septembre 2026 : `/realisations` s'ouvrait en
   gris, son titre et son sous-titre parqués à `opacity: 0` en attendant un observateur qui ne se
   déclenche que sur une intersection — et `/creation-site-internet-orange`, `/contact` et
   `/tarifs` avaient exactement le même défaut, chacun avec l'identifiant de hero que son gabarit
   s'était choisi.)* Une liste écrite à la main se périme au premier gabarit ajouté, **en silence**,
   et personne ne pense à la rallonger — le défaut ne casse rien, il ternit.

   La règle porte donc désormais la PROPRIÉTÉ et non les instances : **ce qui n'anime pas, c'est la
   PREMIÈRE SECTION DE LA PAGE**, quel que soit son identifiant. C'est exactement la population que
   `components.css` désigne déjà pour lui donner sa marge haute (`main > section:first-of-type`) —
   une seule définition de « le haut de la page », partagée par les deux règles qui en dépendent. */
html.js main > section:first-of-type .reveal {
    opacity: 1;
    transform: none;
}

/* ⚠️⚠️ AUCUNE APPARITION AU TÉLÉPHONE, ET C'EST MESURÉ. L'accueil fait 8 925 px de haut pour
   32 éléments en `.reveal` — **un fondu tous les 279 px**. Sur un écran de téléphone, où l'on
   fait défiler vite et où trois blocs tiennent dans la fenêtre, ça donne un clignotement
   permanent qu'on lit comme de la lenteur. Alexandre l'a signalé deux fois, en parlant d'un
   « temps de chargement » : rien ne chargeait. Mesuré le même jour, le plus gros fichier de la
   page est le logo (26,7 Ko) et tout le CSS fait 10 Ko.
   *Un effet qui coûte l'impression de rapidité coûte plus qu'il ne rapporte* — et sur un
   téléphone, la rapidité est précisément ce que cette page vend.
   ⚠️ Le seuil est 768 px et non 600 : entre les deux on est sur une tablette, qu'on tient
   comme un téléphone et qu'on fait défiler pareil. */
@media (max-width: 768px) {
    html.js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Qui demande moins d'animation voit la page, tout de suite. */
@media (prefers-reduced-motion: reduce) {
    html.js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== Fond constellation global (tout le site) =====
   Le canvas est un calque fixe en fond, dessiné par assets/js/animations.js.
   Il est peint au-dessus du fond sombre du <body> mais sous tout le contenu. */
#particles-canvas {
    position: fixed;
    inset: 0;
    /* ⚠️⚠️ `100%` ET NON `100vw` : L'UNITÉ vw INCLUT LA BARRE DE DÉFILEMENT. Le fond était donc
       systématiquement ~15 px plus large que la fenêtre, sur TOUTES les pages — mesuré à 410 px
       dans un parent de 395. C'est ce qui faisait déborder le site horizontalement au téléphone.
       Sous `position: fixed` avec `inset: 0`, `100%` se résout sur la fenêtre SANS la barre.
       (La taille du TAMPON de dessin, elle, est posée en JS par `canvas.width` — autre chose.) */
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Le contenu passe au-dessus du canvas (le header #main-header est déjà en z-index 1000). */
main,
#main-footer {
    position: relative;
    z-index: 1;
}

/* Le footer devient transparent pour laisser voir la constellation (sa bordure haute suffit à le séparer). */
#main-footer {
    background: transparent;
}