/* ==========================================================================
   BrandID — Homepage v2
   Chargé APRÈS css/style.css. Tout est scopé sous body.hp-v2 pour ne jamais
   impacter les autres pages du site.
   Blocs : navbar claire · hero clair · portfolio pin plein écran ·
           grille clients · tableau comparatif des offres
   ========================================================================== */

body.hp-v2 {
    /* overflow-x:hidden casse position:sticky sur certains navigateurs.
       clip donne le même résultat visuel sans créer de conteneur de scroll. */
    overflow-x: clip;
}

body.hp-v2 {
    --hp-nav-h: 68px;
    --hp-border: #ececec;
}

/* Texte réservé aux lecteurs d'écran */
body.hp-v2 .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   1. NAVBAR CLAIRE (logo à gauche · liens centrés · lien à droite)
   ========================================================================== */

body.hp-v2 .navbar {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hp-border);
    padding: 20px 0;
}

body.hp-v2 .navbar.scrolled {
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--hp-border);
    box-shadow: 0 1px 16px rgba(0, 0, 0, .04);
    padding: 14px 0;
}

body.hp-v2 .nav-container {
    position: relative;
    max-width: 1440px;
    padding: 0 40px;
}

body.hp-v2 .nav-logo img {
    height: 27px;
}

/* Liens parfaitement centrés dans la barre, indépendamment du logo et du CTA */
body.hp-v2 .nav-links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    gap: 36px;
    margin: 0;
}

body.hp-v2 .nav-links a,
body.hp-v2 .nav-dropdown-toggle {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-gray-500);
}

body.hp-v2 .nav-links a:hover,
body.hp-v2 .nav-dropdown-toggle:hover {
    color: var(--color-black);
}

body.hp-v2 .nav-actions {
    gap: 20px;
}

/* Le CTA de droite reprend le style texte de la nav (cf. maquette) */
body.hp-v2 .nav-cta-text {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-gray-500);
    transition: color var(--transition-base);
}

body.hp-v2 .nav-cta-text:hover {
    color: var(--color-black);
}

body.hp-v2 .nav-phone {
    color: var(--color-gray-500);
}

@media (max-width: 1100px) {
    body.hp-v2 .nav-links {
        display: none;
    }
}

@media (max-width: 768px) {
    body.hp-v2 .nav-container {
        padding: 0 20px;
    }

    body.hp-v2 .nav-cta-text {
        display: none;
    }
}

/* ==========================================================================
   2. HERO CLAIR
   ========================================================================== */

body.hp-v2 .hero-light {
    background: var(--color-white);
    color: var(--color-black);
    padding: calc(var(--hp-nav-h) + 90px) 0 0;
    overflow: visible;
}

body.hp-v2 .hero-light-inner {
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

/* Apparence héritée de la pastille commune (brand-global.css) : on ne garde
   ici que l'écart propre au hero. */
body.hp-v2 .hero-eyebrow {
    margin-bottom: 26px;
}

body.hp-v2 .hero-title-light {
    /* Moderat n'existe qu'en Thin (100) et Regular (400) : on reste en 400
       pour éviter le faux-gras synthétisé par le navigateur. */
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.035em;
    color: var(--color-black);
}

body.hp-v2 .hero-subtitle-light {
    margin: 26px auto 0;
    max-width: 640px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-gray-600);
}

body.hp-v2 .hero-actions {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Le CTA pilule reprend le bouton animé défini dans brand-global.css */

body.hp-v2 .hero-callback-link {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-gray-500);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--transition-base);
}

body.hp-v2 .hero-callback-link:hover {
    color: var(--color-black);
}

body.hp-v2 .hero-callback {
    margin-top: 18px;
}

body.hp-v2 .hero-callback-form {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

body.hp-v2 .hero-callback-form input[type="tel"] {
    padding: 12px 18px;
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 14px;
    min-width: 220px;
    color: var(--color-black);
    background: var(--color-white);
}

body.hp-v2 .hero-callback-form input[type="tel"]:focus {
    outline: none;
    border-color: var(--color-black);
}

body.hp-v2 .hero-callback-msg {
    margin-top: 10px;
    font-size: 13px;
    color: var(--color-gray-600);
}

body.hp-v2 .hero-callback-msg.error {
    color: #dc2626;
}

body.hp-v2 .hero-callback-msg.success {
    color: #16a34a;
}

/* ==========================================================================
   3. PORTFOLIO — bloc épinglé qui passe en plein écran au scroll
   ========================================================================== */

body.hp-v2 .pf-pin {
    position: relative;
    /* Hauteur de repos du cadre, réutilisée pour le calage vertical */
    --pf-h: min(470px, 42vw);
    /* Le cadre est centré dans une zone de 100vh : on remonte la section
       pour qu'au repos il reste à ~110px sous le hero, sans vide géant. */
    margin-top: calc(110px + (var(--pf-h) / 2) - 50vh);
    /* Le bloc remonte sous le hero et sa piste fait 330vh : positionné, il
       passe au-dessus et intercepterait le survol des CTA du hero. */
    pointer-events: none;
}

/* Piste haute : c'est sa hauteur qui donne la "durée" de l'animation */
body.hp-v2 .pf-pin-track {
    position: relative;
    height: 330vh;
}

body.hp-v2 .pf-pin-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Le cadre. width/height/border-radius sont pilotés en inline par le JS.
   Sans fond : il ne sert plus que de fenêtre de découpe pour les colonnes. */
body.hp-v2 .pf-frame {
    /* Le cadre reçoit les événements de pointeur : le survol ralentit le
       défilement sans jamais l'arrêter (cf. homepage-v2.js). */
    pointer-events: auto;
    position: relative;
    width: min(1120px, 92vw);
    height: var(--pf-h, min(470px, 42vw));
    border-radius: 10px;
    background: none;
    overflow: hidden;
    will-change: width, height;
    /* Le nombre de colonnes suit la largeur du cadre, pas celle de l'écran :
       c'est ce qui fait passer 2 → 3 colonnes pendant l'expansion. */
    container-type: inline-size;
}

body.hp-v2 .pf-viewport {
    --pf-cols: 2;
    --pf-gap: clamp(12px, 1.4vw, 22px);
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--pf-cols), 1fr);
    gap: var(--pf-gap);
    padding: 0 var(--pf-gap);
    /* Les colonnes débordent volontairement en hauteur : sans ça la ligne de
       grille s'étirerait à leur taille et il n'y aurait plus rien à faire
       défiler. */
    align-items: start;
    overflow: hidden;
    /* Le cadre n'ayant plus de fond, une coupe nette en haut et en bas
       ressemblerait à un bug d'affichage : les cartes s'estompent.
       Valeur en px plafonnée en % : en plein écran, un fondu en pourcentage
       passait en grande partie derrière la barre de navigation et ne se
       voyait plus. */
    --pf-fade: min(24%, 190px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pf-fade), #000 calc(100% - var(--pf-fade)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pf-fade), #000 calc(100% - var(--pf-fade)), transparent 100%);
}

body.hp-v2 .pf-col-inner {
    display: flex;
    flex-direction: column;
    animation: pf-vscroll 54s linear infinite;
    will-change: transform;
}

/* Colonne du milieu à contresens */
body.hp-v2 .pf-col-2 .pf-col-inner {
    animation-direction: reverse;
    animation-duration: 47s;
}

body.hp-v2 .pf-col-3 .pf-col-inner {
    animation-duration: 61s;
}

/* Délais négatifs : les colonnes démarrent à des points différents de la
   boucle, sinon la même vignette apparaît à la même hauteur dans deux
   colonnes voisines. */
body.hp-v2 .pf-col-2 .pf-col-inner { animation-delay: -19s; }
body.hp-v2 .pf-col-3 .pf-col-inner { animation-delay: -37s; }

/* -50% = exactement une copie de la liste, à condition que l'écart entre
   cartes soit une margin-bottom et non un gap (cf. .pf-card). */
@keyframes pf-vscroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

/* Troisième colonne réservée au plein écran */
body.hp-v2 .pf-col-3 {
    display: none;
}

@container (min-width: 1180px) {
    body.hp-v2 .pf-viewport {
        --pf-cols: 3;
    }

    body.hp-v2 .pf-col-3 {
        display: block;
    }
}

/* Deux vignettes de 150 px côte à côte sur un téléphone seraient illisibles.
   Seuil bas (480) pour garder les deux colonnes dès les grandes tablettes. */
@container (max-width: 479px) {
    body.hp-v2 .pf-viewport {
        --pf-cols: 1;
    }

    body.hp-v2 .pf-col-2 {
        display: none;
    }
}

/* Les cartes se dimensionnent sur la largeur de colonne :
   elles grandissent donc naturellement pendant l'expansion. */
body.hp-v2 .pf-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: var(--pf-gap);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-gray-200);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .10);
}

body.hp-v2 .pf-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Voile assez dense : les captures de sites sont souvent claires et le
   libellé blanc se noyait dans l'image. */
body.hp-v2 .pf-card-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 48px 18px 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--color-white);
    background: linear-gradient(to top,
                rgba(0, 0, 0, .9) 0%,
                rgba(0, 0, 0, .62) 45%,
                transparent 100%);
}

body.hp-v2 .pf-card-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
}

body.hp-v2 .pf-card-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .72);
}

/* Repli mobile / sans JS / mouvement réduit : colonnes seules, aucun pin */
body.hp-v2 .pf-pin.pf-static {
    margin-top: 72px;
}

body.hp-v2 .pf-pin.pf-static .pf-pin-track {
    height: auto;
}

body.hp-v2 .pf-pin.pf-static .pf-pin-sticky {
    position: static;
    height: auto;
}

body.hp-v2 .pf-pin.pf-static .pf-frame {
    width: min(1120px, 92vw);
    /* Plus haut qu'avant : en colonne unique il faut de quoi voir passer
       deux vignettes, sinon le défilement ne se lit pas. */
    height: min(560px, 116vw);
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    body.hp-v2 .pf-col-inner {
        animation: none;
    }
}

@media (max-width: 768px) {
    body.hp-v2 .pf-pin,
    body.hp-v2 .pf-pin.pf-static {
        margin-top: 44px;
    }
}

/* ==========================================================================
   4. PREUVE CLIENT — note Google + grille de logos
   ========================================================================== */

body.hp-v2 .client-proof {
    padding: 90px 0 40px;
}

body.hp-v2 .client-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 44px;
}

body.hp-v2 .client-rating-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--color-black);
}

body.hp-v2 .client-rating-label {
    font-size: 13px;
    color: var(--color-gray-500);
}

/* Grille centrée, dernière ligne centrée elle aussi (cf. maquette) */
body.hp-v2 .client-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 22px 46px;
    max-width: 880px;
    margin: 0 auto;
}

body.hp-v2 .client-grid-item {
    flex: 0 0 auto;
    width: 98px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(1);
    opacity: .78;
    transition: filter var(--transition-base), opacity var(--transition-base);
}

body.hp-v2 .client-grid-item:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* Sans cette règle, le <a> se réduit à zéro et le logo disparaît */
body.hp-v2 .client-grid-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

body.hp-v2 .client-grid-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    body.hp-v2 .client-proof {
        padding: 60px 0 24px;
    }

    body.hp-v2 .client-grid {
        gap: 20px 32px;
    }

    body.hp-v2 .client-grid-item {
        width: 78px;
        height: 46px;
    }
}

/* ==========================================================================
   5. TABLEAU COMPARATIF DES OFFRES (port vanilla de comparison-3)
   ========================================================================== */

body.hp-v2 .offers-compare {
    padding: 110px 0;
}

body.hp-v2 .cmp-head {
    max-width: 640px;
    margin: 0 auto 44px;
    text-align: center;
}

/* .cmp-badge est le modèle de la pastille commune : son apparence vit
   désormais dans brand-global.css, étoile comprise. */

body.hp-v2 .cmp-wrap {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
}

body.hp-v2 .cmp-popular {
    position: absolute;
    bottom: 100%;
    /* Centre de la 2e colonne : 34% (libellés) + 22% + 11% */
    left: 67%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    z-index: 3;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Pas d'overflow sur desktop : sinon .cmp-scroll devient un conteneur de
   défilement et l'en-tête sticky se décale vers le bas dans le tableau. */
body.hp-v2 .cmp-scroll {
    border: 1px solid var(--color-gray-200);
    border-radius: 4px;
}

@media (max-width: 900px) {
    body.hp-v2 .cmp-scroll {
        overflow-x: auto;
    }

    body.hp-v2 .cmp-table thead th {
        position: static;
    }
}

body.hp-v2 .cmp-table {
    width: 100%;
    min-width: 760px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 14px;
}

body.hp-v2 .cmp-table col.cmp-col-label { width: 34%; }
body.hp-v2 .cmp-table col.cmp-col-plan  { width: 22%; }

body.hp-v2 .cmp-table th,
body.hp-v2 .cmp-table td {
    padding: 10px 16px;
    text-align: center;
    vertical-align: middle;
}

body.hp-v2 .cmp-table th:first-child,
body.hp-v2 .cmp-table td:first-child {
    text-align: left;
}

/* En-tête collant sous la navbar */
body.hp-v2 .cmp-table thead th {
    position: sticky;
    top: var(--hp-nav-h);
    z-index: 2;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    vertical-align: bottom;
}

body.hp-v2 .cmp-table thead th.is-featured {
    background: #f7f7f7;
}

body.hp-v2 .cmp-col-title {
    display: inline-block;
    padding-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-gray-500);
}

body.hp-v2 .cmp-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 0;
}

body.hp-v2 .cmp-plan-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
}

body.hp-v2 .cmp-plan-prefix {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-gray-400);
}

body.hp-v2 .cmp-plan-price {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--color-black);
}

body.hp-v2 .cmp-plan-cadence {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-gray-500);
}

body.hp-v2 .cmp-section td {
    background: #fafafa;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-black);
}

body.hp-v2 .cmp-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}

body.hp-v2 .cmp-table tbody tr:last-child {
    border-bottom: 0;
}

body.hp-v2 .cmp-feature {
    font-weight: 500;
    color: var(--color-black);
}

body.hp-v2 td.is-featured {
    background: #fafafa;
}

/* Pastilles carrées oui/non (identiques au composant d'origine) */
body.hp-v2 .cmp-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

body.hp-v2 .cmp-mark svg {
    width: 14px;
    height: 14px;
}

body.hp-v2 .cmp-mark-yes {
    background: var(--color-gray-800);
    color: var(--color-white);
}

body.hp-v2 .cmp-mark-yes-featured {
    background: var(--color-black);
    color: var(--color-white);
}

body.hp-v2 .cmp-mark-no {
    background: var(--color-gray-100);
    color: var(--color-gray-400);
}

body.hp-v2 .cmp-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-500);
}

body.hp-v2 .cmp-value-featured {
    color: var(--color-black);
}

body.hp-v2 .cmp-cta td {
    padding: 20px 16px;
}

body.hp-v2 .cmp-cta .glass-button {
    width: 100%;
    gap: 6px;
}

body.hp-v2 .cmp-cta .glass-button svg {
    width: 14px;
    height: 14px;
}

body.hp-v2 .cmp-note {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--color-gray-500);
}

body.hp-v2 .cmp-note a {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 768px) {
    body.hp-v2 .offers-compare {
        padding: 70px 0;
    }

    body.hp-v2 .cmp-popular {
        display: none;
    }

    body.hp-v2 .cmp-table thead th {
        position: static;
    }
}

/* ==========================================================================
   6. AVIS CLIENTS — carrousel deux rangées (sens opposés, pause au survol)
   ========================================================================== */

body.hp-v2 .testimonials .container + .tm-marquee {
    margin-top: 52px;
}

body.hp-v2 .tm-marquee {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

body.hp-v2 .tm-row {
    display: flex;
    overflow: hidden;
}

/* Le padding latéral vaut la moitié du gap : la translation de -50% boucle
   alors exactement, sans saut visible à la jonction des deux passes. */
body.hp-v2 .tm-track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    padding: 0 10px;
    width: max-content;
    animation: tm-marquee 46s linear infinite;
}

body.hp-v2 .tm-row-reverse .tm-track {
    animation-direction: reverse;
}

body.hp-v2 .tm-marquee:hover .tm-track {
    animation-play-state: paused;
}

@keyframes tm-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- Carte ---------- */

body.hp-v2 .tm-card {
    flex: 0 0 auto;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 20px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

body.hp-v2 .tm-card:hover {
    border-color: var(--color-gray-300);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

body.hp-v2 .tm-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

body.hp-v2 .tm-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-gray-700);
}

body.hp-v2 .tm-card-id {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

body.hp-v2 .tm-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-black);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.hp-v2 .tm-source {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-gray-500);
    line-height: 1.3;
}

body.hp-v2 .tm-g {
    flex: 0 0 auto;
}

body.hp-v2 .tm-stars {
    margin-left: auto;
    align-self: flex-start;
    font-size: 12px;
    letter-spacing: 1px;
    color: #f59e0b;
    line-height: 1.6;
}

body.hp-v2 .tm-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-gray-600);
}

/* ---------- Fondus latéraux ---------- */

body.hp-v2 .tm-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15%;
    max-width: 180px;
    pointer-events: none;
    z-index: 2;
}

body.hp-v2 .tm-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--color-gray-50), rgba(250, 250, 250, 0));
}

body.hp-v2 .tm-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--color-gray-50), rgba(250, 250, 250, 0));
}

body.hp-v2 .tm-cta {
    margin-top: 44px;
    text-align: center;
}

@media (max-width: 768px) {
    body.hp-v2 .tm-card {
        width: 290px;
        padding: 18px;
    }

    body.hp-v2 .tm-fade {
        width: 12%;
    }
}

/* Sans animation : les avis redeviennent une simple grille centrée,
   les duplicatas de boucle disparaissent. */
@media (prefers-reduced-motion: reduce) {
    body.hp-v2 .tm-marquee {
        overflow: visible;
        gap: 0;
    }

    body.hp-v2 .tm-row {
        overflow: visible;
    }

    body.hp-v2 .tm-row-reverse {
        display: none;
    }

    body.hp-v2 .tm-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        max-width: var(--container-width);
        margin: 0 auto;
        padding: 0 24px;
    }

    body.hp-v2 .tm-card[aria-hidden="true"] {
        display: none;
    }

    body.hp-v2 .tm-fade {
        display: none;
    }
}


/* ==========================================================================
   9. MOBILE : ALIGNEMENT À GAUCHE DES BLOCS CENTRÉS DE LA PAGE D'ACCUEIL
   Complément à la règle générale de brand-global.css : ces trois conteneurs
   sont centrés jusque sur grand écran, il faut donc les reprendre ici — et
   depuis ce fichier, chargé après, pour l'emporter en cascade.
   ========================================================================== */

@media (max-width: 900px) {
    body.hp-v2 .hero-light-inner,
    body.hp-v2 .cmp-head,
    body.hp-v2 .cmp-note,
    body.hp-v2 .tm-cta {
        text-align: left;
    }

    /* Le sous-titre du hero est bridé à 640px et centré par ses marges auto :
       il se décalerait à droite du titre entre 640 et 900px. */
    body.hp-v2 .hero-subtitle-light {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    body.hp-v2 .btn-pill {
        --btn-h: 56px;
        width: 100%;
    }

    body.hp-v2 .hero-actions {
        align-items: stretch;
    }

    /* Étiré par le stretch ci-dessus, le lien garderait son libellé au centre. */
    body.hp-v2 .hero-callback-link {
        text-align: left;
    }

    /* Le champ de rappel et son bouton passent l'un sous l'autre. */
    body.hp-v2 .hero-callback-form {
        flex-direction: column;
    }

    body.hp-v2 .hero-callback-form input[type="tel"] {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Zoom slider — section Réalisations
   Bande sombre posée dans une section claire : le contraste fait ressortir les
   captures, sans repeindre la section (le CTA .glass-button-dark qui la clôt
   suppose un fond clair).
   Les dimensions des cartes sont écrites par js/zoom-slider.js ; le CSS ne
   gère que l'habillage et l'état de repli .zs-static.
   ========================================================================== */

body.hp-v2 .realisations-slider {
    margin-top: 48px;
}

body.hp-v2 .zs {
    position: relative;
    border-radius: 10px;
    background: var(--color-black);
    overflow: hidden;
}

body.hp-v2 .zs-viewport {
    position: relative;
    height: clamp(400px, 58vh, 620px);
    overflow: hidden;
    outline: none;
}

body.hp-v2 .zs:not(.zs-static) .zs-viewport {
    cursor: grab;
}

body.hp-v2 .zs.is-dragging .zs-viewport {
    cursor: grabbing;
}

body.hp-v2 .zs-viewport:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: -4px;
}

body.hp-v2 .zs-track {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Carte ---------- */

body.hp-v2 .zs:not(.zs-static) .zs-card {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform, width, height;
}

body.hp-v2 .zs-card {
    --zs-scale: 1;
    overflow: hidden;
    border-radius: 10px;
    background: var(--color-gray-900);
}

body.hp-v2 .zs-card > a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

body.hp-v2 .zs-media {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
}

body.hp-v2 .zs-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Les cartes rétrécies sont recadrées vers le haut de la capture : c'est
       là que se trouve l'en-tête reconnaissable d'un site. */
    object-position: 50% 0;
    -webkit-user-drag: none;
    user-select: none;
}

/* Voile de lisibilité, absent tant que la carte n'est pas dépliée.
   Il doit couvrir toute la légende : les captures de sites sont souvent
   blanches en pied de page, et le texte blanc s'y perdrait. */
body.hp-v2 .zs-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(10, 10, 10, .94) 0%,
        rgba(10, 10, 10, .88) 38%,
        rgba(10, 10, 10, .6) 60%,
        rgba(10, 10, 10, 0) 88%);
    opacity: calc((var(--zs-scale) - .55) * 2.2);
    pointer-events: none;
}

/* ---------- Légende ---------- */

body.hp-v2 .zs-caption {
    position: absolute;
    right: 28px;
    bottom: 28px;
    left: 28px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
}

/* Chaque ligne est masquée par son propre conteneur : le texte remonte
   derrière le bord au lieu de se contenter d'un fondu. */
body.hp-v2 .zs-line {
    overflow: hidden;
}

body.hp-v2 .zs-line > * {
    display: block;
    margin: 0;
    transform: translateY(105%);
    opacity: 0;
    transition:
        transform .55s var(--ease-out-expo),
        opacity .4s var(--ease-out-quart);
}

body.hp-v2 .zs-card.is-open .zs-line > * {
    transform: translateY(0);
    opacity: 1;
}

body.hp-v2 .zs-card.is-open .zs-line:nth-child(2) > * { transition-delay: .05s; }
body.hp-v2 .zs-card.is-open .zs-line:nth-child(3) > * { transition-delay: .10s; }
body.hp-v2 .zs-card.is-open .zs-line:nth-child(4) > * { transition-delay: .15s; }

body.hp-v2 .zs-tag {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    padding: 6px 12px;
}

body.hp-v2 .zs-line:first-child {
    /* Le padding de la pastille doit tenir dans le masque. */
    padding-bottom: 2px;
}

body.hp-v2 .zs-title {
    font-family: var(--font-serif);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--color-white);
}

body.hp-v2 .zs-sector {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, .62);
}

body.hp-v2 .zs-desc {
    max-width: 46ch;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

body.hp-v2 .zs-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

body.hp-v2 .zs-tech li {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 300;
    color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    padding: 4px 10px;
}

/* ---------- Barre d'état ---------- */

body.hp-v2 .zs-hud {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 28px 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

body.hp-v2 .zs-index,
body.hp-v2 .zs-hint {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

body.hp-v2 .zs-index-cur {
    color: var(--color-white);
}

body.hp-v2 .zs-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Repli : bande à défilement natif ----------
   Mobile, pointeur grossier, mouvement réduit, ou JS absent. Le défilement du
   navigateur reprend la main : rien à piloter, rien à intercepter. */

body.hp-v2 .zs.zs-static .zs-viewport {
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.hp-v2 .zs.zs-static .zs-viewport::-webkit-scrollbar {
    display: none;
}

body.hp-v2 .zs.zs-static .zs-track {
    position: static;
    display: flex;
    gap: 16px;
    padding: 20px;
}

body.hp-v2 .zs.zs-static .zs-card {
    position: relative;
    flex: 0 0 min(78vw, 460px);
    height: clamp(340px, 52vh, 460px);
    scroll-snap-align: center;
}

body.hp-v2 .zs.zs-static .zs-card::after {
    opacity: 1;
}

body.hp-v2 .zs.zs-static .zs-line > * {
    transform: none;
    opacity: 1;
    transition: none;
}

body.hp-v2 .zs.zs-static .zs-caption {
    right: 20px;
    bottom: 20px;
    left: 20px;
}

body.hp-v2 .zs.zs-static .zs-hint {
    display: none;
}

@media (max-width: 768px) {
    body.hp-v2 .realisations-slider {
        margin-top: 32px;
    }

    body.hp-v2 .zs-title {
        font-size: 22px;
    }

    body.hp-v2 .zs-desc {
        font-size: 14px;
    }

    body.hp-v2 .zs-hud {
        padding: 14px 20px 18px;
    }
}