/* ⚠️ LE COMPOSANT HERO A DÉMÉNAGÉ dans `components.css` — `.hero-subtitle`, `.hero-ctas`,
   `.hero-trust`, `.badge-available`, `.dot-pulse` et `.text-gradient`. Il vivait ici, dans la
   feuille que SEULE l'accueil charge : la page locale neuve affichait donc un badge nu, un
   paragraphe pleine largeur et des boutons non cadrés. TROISIÈME fois que ce défaut se paie
   (les cartes, puis les utilitaires de section, puis celui-ci). `.btn-large` y était AUSSI
   redéfini à l'identique. Ne rien redéfinir ici. */

/* Hero Section */
#hero {
    position: relative;
    padding: 180px 0 100px;
    overflow: hidden;
    /* ⚠️⚠️ `svh` ET NON `vh` — c'est le correctif du « cut » sous le hero au téléphone.
       Sur mobile, `100vh` vaut la fenêtre BARRE D'ADRESSE MASQUÉE. Tant que la barre est là,
       le hero est donc plus haut que l'écran ; au premier défilement la barre s'escamote, la
       fenêtre grandit, et tout ce qui est en `vh` est remis en page d'un coup. C'est cette
       bascule qu'on lit comme « ça cut, puis ça se remet au bout d'une seconde ».
       `100svh` est la fenêtre BARRE AFFICHÉE : elle ne bouge jamais pendant le défilement.
       ⚠️ La ligne `100vh` est le REPLI des navigateurs qui ignorent `svh` — ne pas la retirer. */
    min-height: 100vh;
    min-height: 100svh;
    display: block; /* Test avec block au lieu de flex */
    background-color: transparent; /* laisse voir le fond constellation global */
    z-index: 1;
}

.container {
    width: 100%;
}

/* Le fond constellation est désormais global (voir #particles-canvas dans app.css). */

.hero-grid {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 10;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ⚠️ La règle `h1` — GLOBALE par nature, ce n'est même pas une classe — vivait ici, dans la
   feuille que seule l'accueil charge. Conséquence : la page locale neuve affichait son titre à la
   taille PAR DÉFAUT du navigateur (32 px contre 64). Déplacée dans `components.css`. */







.ambient-orbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.orb {
    position: absolute;
    filter: blur(100px);
    border-radius: 50%;
}

.orb-blue {
    top: 10%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: var(--accent-blue);
    opacity: 0.07;
}

.orb-green {
    bottom: 10%;
    left: 10%;
    width: 300px;
    height: 300px;
    background: var(--accent-green);
    opacity: 0.05;
}

/* Mockup */
.hero-visual {
    position: relative;
}

.mockup-container {
    position: relative;
    z-index: 2;
    animation: float 6s ease-in-out infinite;
}

.mockup-frame {
    padding: 10px;
    border-radius: 12px;
}

.mockup-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--border-glass);
}

.dots {
    display: flex;
    gap: 6px;
}

.dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.address-bar {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
}

.mockup-body {
    padding: 30px;
    min-height: 250px;
}

/* La variante qui porte une capture : pas de rembourrage, l'image occupe le cadre. */
.mockup-body--site {
    padding: 0;
    min-height: 0;
    line-height: 0;
}

.mockup-body--site img {
    width: 100%;
    height: auto;
    display: block;
}

.mockup-skeleton div {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin-bottom: 15px;
}

.sk-title { width: 60%; height: 20px; }
.sk-line { width: 100%; height: 10px; }
.sk-btn { width: 30%; height: 30px; margin-top: 20px; background: var(--accent-blue) !important; opacity: 0.3; }

.glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, var(--glow-blue) 0%, transparent 70%);
    z-index: 1;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* ⚠️ `.section-padding`, `.bg-alt`, `.section-title` et `.section-subtitle` ONT DÉMÉNAGÉ dans
   `components.css`. Leur commentaire disait « Sections Global » et elles vivaient pourtant dans la
   feuille que SEULE l'accueil charge : cinq gabarits les emploient. Conséquence mesurée le
   18 septembre — la page locale neuve avait `padding-top: 0` et son `h1` passait SOUS la barre
   fixe. Ne rien redéfinir ici. */

.section-subtitle small {
    display: block;
    margin-top: 8px;
    font-size: 0.88rem;
    opacity: 0.75;
}

/* Problem Grid */
.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px !important;
}

.problem-box {
    padding: 40px;
    border-radius: 20px;
    background: rgba(15, 22, 41, 0.4);
}

.problem-box h3 {
    margin-bottom: 25px;
    font-size: 1.2rem;
}

.problem-box ul li {
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.icon { font-weight: bold; }
.avant .icon { color: #ff4b4b; }
.apres .icon { color: var(--accent-green); }
.apres { border: 1px solid rgba(0, 194, 124, 0.2); background: rgba(0, 194, 124, 0.03); }

/* Timeline */
.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--border-glass);
}

.timeline-item {
    display: flex;
    gap: 60px;
    margin-bottom: 80px;
    position: relative;
}

.timeline-number {
    width: 80px;
    height: 80px;
    background: var(--bg-cards);
    border: 1px solid var(--border-glass);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-titles);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--accent-blue);
    flex-shrink: 0;
    z-index: 2;
}

/* Features Grid */
/* ⚠️ `.features-grid`, `.feature-card`, `.feature-icon` et `.features-note` ONT DÉMÉNAGÉ dans
   `components.css` : /accompagnement les emploie aussi, et ne chargeait pas cette feuille — ses
   trois cartes n'avaient donc AUCUNE apparence de carte. Un composant employé par deux pages
   n'appartient pas à la feuille d'une seule. Ne pas les redéfinir ici. */

/* Comparison Table */
.comparison-section {
    margin-top: 40px;
}

.table-container {
    overflow-x: auto;
    margin-top: 20px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.comparison-table th, .comparison-table td {
    padding: 20px;
    border-bottom: 1px solid var(--border-glass);
}

.comparison-table th { font-family: var(--font-titles); }

.highlight {
    background: rgba(0, 153, 255, 0.05);
    border-left: 1px solid var(--border-glass);
    border-right: 1px solid var(--border-glass);
}

th.highlight {
    background: var(--accent-blue);
    color: white;
    border-radius: 12px 12px 0 0;
}


/* Final CTA */
.final-cta-box {
    text-align: center;
    padding: 80px 40px;
    background: linear-gradient(135deg, rgba(8, 13, 26, 0.8), rgba(0, 153, 255, 0.1));
}

.final-cta-box h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 20px; }
.final-cta-box p { font-size: 1.2rem; margin-bottom: 40px; color: var(--text-secondary); }


.cta-reassurance {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

/* ⚠️ `.reveal` VIVAIT ICI AUSSI, À L'OCTET PRÈS — deux sources pour la même règle, dont une
   dans une feuille que seule l'accueil charge. Elle vit désormais dans `app.css` seule, et elle
   y est conditionnée à `html.js`. Le `#hero .reveal { opacity: 1 !important }` qui suivait était
   une rustine : il sauvait le hero, et laissait le reste de la page invisible sans JavaScript.
   Ne rien redéfinir ici. */


/* Mobile Responsive */
@media (max-width: 992px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; width: 100%; }
    .hero-subtitle, .hero-trust, .hero-ctas { margin-left: auto; margin-right: auto; justify-content: center; }
    .hero-ctas { flex-direction: column; align-items: center; }
    .hero-ctas .btn { width: 100%; max-width: 300px; }
    .problem-grid { grid-template-columns: 1fr; }
    .cta-reassurance { flex-direction: column; gap: 10px; }
}

/* ⚠️ LE MAILLAGE VERS LES FICHES MÉTIER — `.features-note` vient de `components.css`, on ne pose
   ici que ce qui lui manque : la couleur des liens. La redéfinir entièrement en ferait une seconde
   version de la même règle, qui divergerait. */
.home-metiers {
    margin-top: 34px;
}

.home-metiers a {
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease;
}

.home-metiers a:hover {
    color: var(--accent-green);
}

/* ⚠️ LA PREMIÈRE COLONNE EST UN `<th scope="row">`, PAS UN `<td>` : sur un tableau de quatre
   colonnes, c'est ce qui permet à un lecteur d'écran d'annoncer « Les modifications sont faites
   pour vous — Webergeron — oui » plutôt que « oui ». Il faut donc lui rendre l'alignement d'une
   cellule de texte, que le `th` centre par défaut. */
.comparison-table th[scope="row"] {
    text-align: left;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ⚠️ UNE LÉGENDE, PARCE QUE « ~ » NE VEUT RIEN DIRE. Trois symboles circulaient dans ce tableau
   sans que rien ne les explique : chacun les interprétait à sa façon, et « en partie » se lisait
   aussi bien « presque » que « à peine ». */
.comparison-legende {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-top: 18px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.comparison-legende span span {
    color: var(--text-primary);
    font-weight: 700;
}

/* ═══ TÉLÉPHONE : ON RETIRE TOUT CE QUI SE REPEINT À CHAQUE IMAGE ═══ (19 septembre 2026)

   ⚠️⚠️ CETTE FOIS J'AI FAIT L'INVENTAIRE DES COUCHES DE COMPOSITION AU LIEU DE SUPPOSER. Quatre
   tours d'hypothèses (le reveal, le fond animé, `100vh`, le `backdrop-filter`) avant de simplement
   ÉNUMÉRER ce qui force une couche sur cette page. Le relevé, à 390 px :

     · `<canvas id="particles-canvas">` — `position: fixed`, **375 × 844 px de couche plein écran**…
       qui ne dessine plus RIEN au téléphone depuis qu'on y a coupé le JavaScript. Elle reste
       pourtant là, et une couche fixe de la taille de l'écran se recompose à chaque image ;
     · `.orb-blue` — **`filter: blur(100px)` sur 400 × 400 px** ;
     · `.orb-green` — **`filter: blur(100px)` sur 300 × 300 px** ;
     · `.mockup-container` — une animation `float` **infinie**, qui repeint sans jamais s'arrêter.

   Un flou gaussien de 100 px est l'une des opérations les plus chères qui soient, et il y en a
   DEUX, en permanence, sous le contenu qu'on fait défiler. Ajoutés à la couche fixe et à
   l'animation sans fin, c'est ce qui fait que le téléphone n'arrive plus à peindre les tuiles
   assez vite : le contenu qui « met une plombe », le hero qui « disparaît et repop ».

   ⚠️ CE SONT TROIS DÉCORS, SANS AUCUNE VALEUR D'INFORMATION. À 7 % et 5 % d'opacité sous du texte,
   personne n'a jamais vu ces halos sur un téléphone. On ne les allège pas — on ne les affiche pas.
   Ils restent intacts sur grand écran.

   ⚠️ SI LE DÉFAUT PERSISTE APRÈS ÇA, le suspect suivant est `html { overflow-x: clip }`, posé le
   même jour pour empêcher la page de dériver latéralement : sur iOS, un clippage à la racine change
   le mode de composition de toute la page. Il faudra alors le retirer ET corriger le débordement du
   tableau comparatif à sa source, sans quoi la dérive revient. */
@media (max-width: 900px) {
    #particles-canvas,
    .ambient-orbs {
        display: none;
    }

    .mockup-container {
        animation: none;
    }
}