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

/* Texte réservé aux lecteurs d'écran et à Google : lu mais invisible à l'écran.
   Sert au H1 de l'accueil (logo visible + phrase-clé cachée pour le SEO). */
.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;
}

:root {
    --primary: #0a0a0a;
    --foreground: #0a0a0a;
    --bg: #ffffff;
    --navbar-bg: #ffffff;
    --border: rgba(0, 0, 0, 0.08);
    --muted: rgba(0, 0, 0, 0.04);
    /* Rythme vertical uniforme entre les grandes sections (site haut de gamme, généreux) */
    --section-pad-y: 8rem;
}

html {
    /* Empêche tout débordement horizontal de forcer un dézoom sur mobile :
       le site occupe toujours exactement la largeur de l'appareil. */
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg);
    color: var(--foreground);
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* Filet de sécurité : un mot/lien anormalement long (sans espaces) revient
       à la ligne au lieu d'être rogné hors écran par l'overflow-x:hidden
       ci-dessus (ex. contenu de blog mal formaté, URL longue, etc.). */
    overflow-wrap: break-word;
}

/* Page logo (top-left) */
.page-logo {
    display: block;
    position: relative;
    margin: 1.75rem 0 0 2rem;
    font-size: 1.4rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.03em;
    color: #0a0a0a;
    text-decoration: none;
    width: fit-content;
    z-index: 60;
}

/* Recadrage : on n'affiche que « PRIMO » (bloc dégradé masqué) */
.page-logo {
    overflow: hidden;
    height: 1.7rem;
    width: 7.3rem;
}
.page-logo img {
    display: block;
    height: 1.7rem;
    width: auto;
    max-width: none;
    margin-left: -4.1rem;
}

@media (max-width: 640px) {
    .page-logo {
        margin: 1.25rem 0 0 1.25rem;
        height: 1.45rem;
        width: 6.25rem;
    }
    .page-logo img { height: 1.45rem; margin-left: -3.5rem; }
}

/* Entre 641px et 820px, la navbar reste centrée en haut mais la pilule est
   assez large pour venir chevaucher le logo à gauche. On masque le logo dans
   cette bande (la nav sert déjà de repère). En dessous de 640px la nav passe
   en bas (pas de collision), au-dessus de 820px il y a assez de marge. */
@media (min-width: 641px) and (max-width: 820px) {
    .page-logo { display: none; }
}

/* Navbar pill */
.navbar-pill {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    top: 0;
    padding-top: 1.5rem;
}

@media (max-width: 640px) {
    .navbar-pill {
        top: auto;
        bottom: 0;
        padding-top: 0;
        margin-bottom: 1rem;
        width: 100%;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}

.pill-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--navbar-bg);
    border: 1px solid var(--border);
    padding: 0.25rem;
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.pill-indicator {
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: 0;
    width: 0;
    background-color: var(--muted);
    border-radius: 9999px;
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

.pill-item {
    position: relative;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    color: rgba(10, 10, 10, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    z-index: 1;
}

.pill-item:hover { color: var(--primary); }
.pill-item.active { color: var(--primary); }

@media (max-width: 640px) {
    .pill-container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        justify-content: space-between;
        gap: 0.1rem;
    }
    .pill-item {
        padding: 0.5rem 0.5rem;
        font-size: 0.8rem;
        flex: 1 1 0;
    }
}

@media (max-width: 360px) {
    .navbar-pill {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
    .pill-container {
        gap: 0;
    }
    .pill-item {
        padding: 0.5rem 0.25rem;
        font-size: 0.72rem;
    }
}

@media (max-width: 330px) {
    .pill-item {
        padding: 0.5rem 0.15rem;
        font-size: 0.68rem;
    }
}

.lamp-bar {
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 0.25rem;
    background-color: var(--primary);
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
}

.lamp-glow {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 9999px;
}

.lamp-glow-1 { width: 2.5rem; height: 1rem; top: -0.25rem; left: -0.25rem; filter: blur(6px); }
.lamp-glow-2 { width: 1.75rem; height: 1rem; top: -0.15rem; left: 0.125rem; filter: blur(5px); }
.lamp-glow-3 { width: 0.75rem; height: 0.75rem; top: 0; left: 0.625rem; filter: blur(3px); }

/* Hero section with parallax */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

.hero-floating {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.float-img {
    position: absolute;
    object-fit: cover;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    animation: fadeIn 0.8s ease forwards;
    pointer-events: auto;
    transition: transform 0.2s ease;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.float-img:hover {
    transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.05);
}

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

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    opacity: 0;
    animation: heroFadeIn 1s ease 1.2s forwards;
}

@keyframes heroFadeIn {
    to { opacity: 1; transform: translateY(0); }
    from { opacity: 0; transform: translateY(10px); }
}

.hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-style: italic;
    font-weight: 500;
    color: var(--primary);
    letter-spacing: -0.02em;
    text-align: center;
}

/* Image « PRIMO » déjà détourée (logo-primo-mot.png) : simple centrage,
   taille identique à l'ancien affichage recadré. */
.hero-title img {
    display: block;
    width: 165px;
    height: auto;
    margin: 0 auto;
}

.hero-rotator {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
    letter-spacing: -0.01em;
}

.rotator-static {
    color: rgba(10, 10, 10, 0.55);
    font-weight: 400;
}

.rotator-mask {
    --line: 1.9em;
    height: var(--line);
    overflow: hidden;
    display: inline-flex;
    align-items: flex-start;
    background-color: #0a0a0a;
    border-radius: 999px;
    padding: 0 0.85rem;
    /* La largeur est pilotée par le JS (mask.style.width par mot) : on empêche
       seulement le flex de la compresser sous cette valeur. */
    flex-shrink: 0;
}

.rotator-list {
    display: flex;
    flex-direction: column;
}

.rotator-word {
    height: var(--line);
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    font-style: italic;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 640px) {
    /* Rythme vertical généreux sur mobile (sensation haut de gamme) */
    :root { --section-pad-y: 6rem; }
    .hero {
        height: auto;
        min-height: 88vh;
        padding: 7rem 1.25rem 4rem;
    }
    /* Les images flottantes sont repositionnées en mobile : un bandeau en haut
       et un bandeau en bas, en laissant le centre libre pour le titre.
       Le parallax souris ne marche pas au toucher, on les anime donc en flottement. */
    .float-img {
        width: auto;
        height: auto !important;
        border-radius: 8px;
        opacity: 1 !important;
        animation: floatY 5s ease-in-out infinite !important;
    }
    /* Largeurs proportionnelles à l'écran (vw bornées) pour que les espacements
       restent constants quel que soit l'appareil et qu'il n'y ait pas de chevauchement. */
    /* Bandeau du haut */
    .float-img:nth-child(1) { top: 3% !important;  left: 2% !important;  width: clamp(64px, 22vw, 90px) !important; animation-duration: 4.4s !important; animation-delay: 0s !important; }
    .float-img:nth-child(2) { top: 12% !important; left: 34% !important; width: clamp(64px, 22vw, 90px) !important; animation-duration: 5.6s !important; animation-delay: -1.2s !important; }
    .float-img:nth-child(3) { top: 2% !important;  left: 62% !important; width: clamp(66px, 23vw, 94px) !important; animation-duration: 5s !important;   animation-delay: -2.4s !important; }
    /* Bandeau du bas */
    .float-img:nth-child(4) { top: 72% !important; left: 3% !important;  width: clamp(64px, 22vw, 90px) !important; animation-duration: 5.3s !important; animation-delay: -0.6s !important; }
    .float-img:nth-child(6) { top: 80% !important; left: 38% !important; width: clamp(62px, 21vw, 84px) !important; animation-duration: 4.7s !important; animation-delay: -1.8s !important; }
    .float-img:nth-child(7) { top: 70% !important; left: 64% !important; width: clamp(64px, 22vw, 90px) !important; animation-duration: 5.8s !important; animation-delay: -3s !important; }
    /* On masque deux images pour éviter la surcharge sur petit écran */
    .float-img:nth-child(5),
    .float-img:nth-child(8) { display: none !important; }

    .hero-content { gap: 1.25rem; }
    .hero-title { font-size: clamp(3.5rem, 18vw, 5rem); }
    .hero-rotator {
        flex-direction: column;
        gap: 0.65rem;
        /* Police proportionnelle : pleine taille sur les téléphones courants,
           rétrécit seulement sur les très petits écrans pour que le nom le plus
           long ("droit de la propriété intellectuelle") ne soit jamais coupé.
           Le texte statique et le mot rotatif partagent cette taille. */
        font-size: clamp(0.74rem, 4.6vw, 1.1rem);
        width: 100%;
    }
    .rotator-static { text-align: center; }
    .rotator-mask { max-width: 100%; }
}

/* Clients marquee */
.clients {
    width: 100%;
    padding: 4rem 0 2rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    overflow: hidden;
}

.clients-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(10, 10, 10, 0.5);
    font-weight: 500;
}

.clients-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* fade-out edges */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.clients-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.clients-marquee:hover .clients-track {
    animation-play-state: paused;
}

.client-logo {
    height: 34px;
    width: auto;
    object-fit: contain;
    opacity: 0.55;
    filter: grayscale(100%);
    transition: opacity 0.3s ease, filter 0.3s ease;
    flex-shrink: 0;
}

/* Optical size harmonisation — each logo file has different proportions
   and internal whitespace, so heights are tuned per logo to make the
   visible marks read at a comparable size. */
.logo--standlaw { height: 62px; }              /* square emblem */
.logo--lienard  { height: 38px; }              /* two-line wordmark */
.logo--grapho   { height: 78px; }              /* big internal padding */
.logo--mbo      { height: 40px; }              /* bold, runs large */
.logo--marcia   { height: 23px; }              /* very wide banner */
.logo--ld       { height: 75px; }              /* lots of whitespace */
.logo--roussier { height: 47px; }              /* two-line */
.logo--kupfer   { height: 53px; }              /* light script */

.client-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}

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

/* Portfolio / Display cards */
.portfolio {
    width: 100%;
    min-height: 100vh;
    padding: var(--section-pad-y) 2rem;
    display: flex;
    justify-content: center;
    background-color: #ffffff;
}

.portfolio-inner {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
}

.portfolio-text {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    text-align: center;
    align-items: center;
}

.portfolio-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.portfolio-sub {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.65;
    color: rgba(10, 10, 10, 0.6);
    max-width: 560px;
}

.cards-stack {
    position: relative;
    width: 100%;
    max-width: 760px;
    height: 560px;
    display: grid;
    place-items: center;
    padding: 2rem 0;
}

.display-card {
    position: absolute;
    width: 14rem;
    height: 28rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.85rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    transform: skewY(-8deg);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.6s ease,
                border-color 0.6s ease,
                box-shadow 0.6s ease;
    filter: grayscale(100%);
    user-select: none;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* dim overlay (lifts on hover) */
.display-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 0.85rem;
    pointer-events: none;
    transition: opacity 0.7s ease;
    z-index: 3;
}

/* --- Post header --- */
.post-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    flex-shrink: 0;
}

.post-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #feda75, #d62976, #962fbf);
}

.post-user {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
    flex: 1;
}

.post-name {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0a0a0a;
    white-space: nowrap;
}

.post-verified { flex-shrink: 0; }

.post-handle {
    font-size: 0.72rem;
    color: rgba(10, 10, 10, 0.55);
}

.post-more {
    color: #0a0a0a;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* --- Post media --- */
.post-media {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background-color: #e9e9ee;
    flex-shrink: 0;
}

.post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    z-index: 2;
}

.post-badge-ig { background: linear-gradient(45deg, #feda75, #d62976, #962fbf); }
.post-badge-tt { background: #0a0a0a; }
.post-badge-li { background: #0a66c2; }

.post-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Stack positioning — base stacking order */
.card-1 { transform: skewY(-8deg) translate(-9rem, -4.5rem); z-index: 1; }
.card-2 { transform: skewY(-8deg) translate(-3rem, -1.5rem); z-index: 2; }
.card-3 { transform: skewY(-8deg) translate(3rem, 1.5rem); z-index: 3; }
.card-4 { transform: skewY(-8deg) translate(9rem, 4.5rem); filter: grayscale(0%); z-index: 4; }

.card-4::before { opacity: 0; }

/* Hover: lift + colorize, but KEEP the stacking order */
.display-card:hover {
    filter: grayscale(0%);
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}
.display-card:hover::before { opacity: 0; }

/* Lift effect for each card */
.card-1:hover { transform: skewY(-8deg) translate(-9rem, -7rem); }
.card-2:hover { transform: skewY(-8deg) translate(-3rem, -4rem); }
.card-3:hover { transform: skewY(-8deg) translate(3rem, -1rem); }
.card-4:hover { transform: skewY(-8deg) translate(9rem, 2rem); }

/* Dim overlay behind the opened card */
.card-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 90;
    cursor: pointer;
}

.card-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* Opened state: flatten, enlarge, center on viewport */
.display-card.is-open {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: min(320px, 88vw);
    height: auto;
    max-height: 92vh;
    transform: translate(-50%, -50%) skewY(0deg) !important;
    filter: grayscale(0%) !important;
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    z-index: 100 !important;
    cursor: default;
}

.display-card.is-open::before { opacity: 0 !important; }

.display-card.is-open .post-top { padding: 0.85rem 1rem; }
.display-card.is-open .post-avatar { width: 2.4rem; height: 2.4rem; }
.display-card.is-open .post-name { font-size: 0.95rem; }
.display-card.is-open .post-handle { font-size: 0.8rem; }
.display-card.is-open .post-play { width: 3.75rem; height: 3.75rem; }
.display-card.is-open .post-play svg { width: 28px; height: 28px; }

@media (max-width: 640px) {
    /* Blanc symétrique entre le texte du dessus et le texte de la section
       suivante : au-dessus = gap du flex (4rem) ; en dessous = padding-bottom
       du portfolio (2rem) + padding-top des avis (2rem, voir règle .reviews).
       L'éventail déborde de son conteneur de ~21px en haut comme en bas. */
    /* Bloc de cartes centré verticalement entre le texte du dessus et la
       section Reviews : on décale les cartes de ~56px vers le bas (gap interne
       8.5rem) et on retire d'autant le padding bas (2.5rem) → écart visuel
       identique (~115px) au-dessus de la carte la plus haute et en dessous de
       la carte la plus basse, sans déplacer la section Reviews. */
    .portfolio { padding: 6rem 1.25rem 2.5rem; min-height: 0; }
    .portfolio-inner { gap: 8.5rem; }
    .portfolio-text { gap: 1.5rem; }
    .portfolio-title { font-size: clamp(2rem, 9vw, 2.6rem); }
    .portfolio-sub { font-size: 1rem; }

    /* Resserre et réduit l'éventail de cartes : les cartes 9:16 sont très hautes,
       on les met à l'échelle 0,62 et on compacte le fan pour que la section ne
       prenne pas trop de hauteur en mobile. */
    .cards-stack { height: 300px; padding: 0.5rem 0; }
    .card-1 { transform: skewY(-8deg) translate(-4.3rem, -2rem) scale(0.62); }
    .card-2 { transform: skewY(-8deg) translate(-1.5rem, -0.7rem) scale(0.62); }
    .card-3 { transform: skewY(-8deg) translate(1.5rem, 0.7rem) scale(0.62); }
    .card-4 { transform: skewY(-8deg) translate(4.3rem, 2rem) scale(0.62); }
    .card-1:hover { transform: skewY(-8deg) translate(-4.3rem, -2.9rem) scale(0.62); }
    .card-2:hover { transform: skewY(-8deg) translate(-1.5rem, -1.6rem) scale(0.62); }
    .card-3:hover { transform: skewY(-8deg) translate(1.5rem, -0.2rem) scale(0.62); }
    .card-4:hover { transform: skewY(-8deg) translate(4.3rem, 1.1rem) scale(0.62); }
}

/* Reviews section */
.reviews {
    width: 100%;
    padding: var(--section-pad-y) 1.5rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

/* Placé après la règle de base pour la surcharger : réduit le blanc au-dessus
   des avis afin qu'il égale le blanc au-dessus des cartes (~43px de chaque côté). */
@media (max-width: 640px) {
    .reviews { padding-top: 6rem; }
}

.reviews-inner {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.reviews-carousel {
    width: 100%;
    /* Toutes les slides sont empilées dans la même cellule de grille :
       le carrousel prend automatiquement la hauteur de l'avis le plus haut,
       quelle que soit la largeur d'écran (plus de min-height fixe qui laissait
       du vide sous les avis courts). */
    display: grid;
}

.review-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
}

.review-slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.review-quote {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 600;
    line-height: 1.45;
    color: var(--primary);
    margin: 0;
    border: none;
    padding: 0;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.review-brand {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: var(--primary);
}

.review-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-sep {
    width: 1px;
    height: 2.5rem;
    background-color: rgba(10, 10, 10, 0.2);
    flex-shrink: 0;
}

.review-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.review-name {
    font-size: 0.9rem;
    font-weight: 600;
    font-style: italic;
    color: var(--primary);
}

.review-role {
    font-size: 0.85rem;
    color: rgba(10, 10, 10, 0.55);
}

.reviews-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.review-arrow {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: none;
    color: rgba(10, 10, 10, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.review-arrow:hover {
    color: var(--primary);
    transform: scale(1.12);
}

.reviews-dots {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.review-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background-color: rgba(10, 10, 10, 0.2);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.review-dot:hover {
    background-color: rgba(10, 10, 10, 0.45);
}

.review-dot.active {
    background-color: var(--primary);
}

/* Sparkles text */
.sparkles-section {
    width: 100%;
    padding: var(--section-pad-y) 1.5rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sparkles-text {
    font-size: clamp(1.3rem, 6.2vw, 4.5rem);
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
}

.sparkles-container {
    position: relative;
    display: inline-block;
}

.sparkles-container > strong {
    position: relative;
    z-index: 2;
}

.handwriting-oval {
    position: absolute;
    inset: -40% -12%;
    width: 124%;
    height: 180%;
    color: #0a0a0a;
    pointer-events: none;
    overflow: visible;
}

.handwriting-path {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
}

.handwriting-path.animate {
    animation: draw-oval 2.5s cubic-bezier(0.43, 0.13, 0.23, 0.96) 0.3s forwards;
}

@keyframes draw-oval {
    to { stroke-dashoffset: 0; }
}

.sparkle-star {
    position: absolute;
    pointer-events: none;
    animation: sparkle-anim 2.5s ease-in-out infinite;
    transition: transform 0.4s ease;
}

.sparkle-stars-layer {
    position: absolute;
    top: -320%;
    bottom: -320%;
    left: -10%;
    right: -10%;
    pointer-events: none;
    z-index: 1;
    transform: scale(1);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
}

@keyframes sparkle-anim {
    0%   { opacity: 0; transform: scale(0) rotate(75deg); }
    50%  { opacity: 1; }
    100% { opacity: 0; transform: scale(var(--spark-scale, 1)) rotate(150deg); }
}

/* Méthode */
.methode {
    width: 100%;
    padding: var(--section-pad-y) 1.5rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

.methode-inner {
    width: 100%;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.methode-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
    text-align: center;
}

.methode-steps {
    display: flex;
    flex-direction: column;
}

.methode-step {
    display: flex;
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    align-items: flex-start;
}

.methode-step:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.methode-num {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: rgba(10, 10, 10, 0.08);
    letter-spacing: -0.03em;
    line-height: 1;
    flex-shrink: 0;
    min-width: 3.5rem;
}

.methode-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.methode-step-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
}

.methode-step-desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(10, 10, 10, 0.6);
}

@media (max-width: 640px) {
    .methode { padding: 4rem 0 1.5rem; }
    .methode-inner { gap: 1.75rem; }
    .methode-title { padding: 0 1.25rem; }

    /* Carrousel horizontal : on fait glisser pour voir les étapes 1 → 5.
       Chaque étape devient une carte, la suivante dépasse pour inviter au swipe. */
    .methode-steps {
        flex-direction: row;
        align-items: stretch; /* cartes de hauteur égale, look uniforme */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 0.5rem 1.25rem 1.5rem;
        scroll-padding-left: 1.25rem;
        scrollbar-width: none;
    }
    .methode-steps::-webkit-scrollbar { display: none; }

    .methode-step {
        flex: 0 0 78%;
        scroll-snap-align: start;
        flex-direction: column;
        justify-content: flex-start; /* contenu aligné en haut : image + numéro à la même place sur toutes les cartes (comme la carte N°1) */
        gap: 0.75rem;
        padding: 1.75rem 1.5rem;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 1rem;
        background: #ffffff;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    }
    .methode-step:first-child {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .methode-num {
        min-width: 0;
        font-size: 2.25rem;
    }
}

/* Examples (client videos) */
.examples {
    width: 100%;
    padding: var(--section-pad-y) 4rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

.examples-inner {
    width: 100%;
    max-width: 920px;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.examples-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.vrai-wrap {
    position: relative;
    display: inline-block;
}

.rec-text {
    position: absolute;
    top: 0.1em;
    right: -3.6em;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(10, 10, 10, 0.55);
}

.vrai-i {
    position: relative;
}

.rec-dot {
    position: absolute;
    top: 0.19em;
    left: 0.05em;
    width: 0.26em;
    height: 0.26em;
    border-radius: 9999px;
    background-color: #e5342a;
    box-shadow: 0 0 0 0 rgba(229, 52, 42, 0.5);
    animation: recBlink 1.4s ease-in-out infinite;
}

@keyframes recBlink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(229, 52, 42, 0.5);
    }
    50% {
        opacity: 0.35;
        box-shadow: 0 0 0 6px rgba(229, 52, 42, 0);
    }
}

/* Flottement doux des images du hero en mobile */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
    .rec-dot { animation: none; }
    .float-img { animation: none !important; }
}

.examples-section-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.4);
}

.examples-section-title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 600;
    font-style: normal;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #0a0a0a;
}

.examples-section-title em {
    font-style: italic;
    font-weight: 500;
    color: rgba(10, 10, 10, 0.45);
}

.examples-group {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.examples-head {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 540px;
}

.examples-tag {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background-color: #0a0a0a;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.examples-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.examples-sub {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(10, 10, 10, 0.6);
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.vid-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    cursor: pointer;
}

.vid-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #f1f1f1;
}

.vid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.vid-card:hover .vid-thumb img {
    transform: scale(1.04);
}

.vid-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    transition: background-color 0.3s ease;
}

.vid-play svg {
    margin-left: 2px;
}

.vid-card:hover .vid-play {
    background-color: rgba(0, 0, 0, 0.65);
}

.vid-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
}

.video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.video-lightbox.is-open {
    display: flex;
}

.video-lightbox-inner {
    position: relative;
    width: 100%;
    max-width: min(90vw, 420px);
}

.video-lightbox video {
    width: 100%;
    max-height: 86vh;
    display: block;
    border-radius: 1rem;
    background: #000;
}

.video-lightbox-close {
    position: absolute;
    top: -3.5rem;
    right: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.video-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 860px) {
    .examples-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    /* Le titre tient sur une ligne en desktop (nowrap) mais doit pouvoir
       passer à la ligne en mobile pour ne pas déborder. */
    .examples-title { white-space: normal; }

    .examples { padding: 3.5rem 1.5rem var(--section-pad-y); }

    /* Cartes vidéos en slider horizontal sur mobile */
    .examples-grid {
        grid-template-columns: none;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 0.25rem 1.5rem 1rem;
        scroll-padding-left: 1.5rem;
        scrollbar-width: none;
        margin: 0 -1.5rem;
    }
    .examples-grid::-webkit-scrollbar { display: none; }
    .vid-card {
        flex: 0 0 46%;
        scroll-snap-align: start;
        min-width: 0;
    }
}

/* Pricing */
.pricing {
    width: 100%;
    padding: var(--section-pad-y) 2rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

.pricing-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pricing-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
}

.pricing-sub {
    color: rgba(10, 10, 10, 0.55);
    font-size: 1rem;
}

.pricing-grid {
    width: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.pricing-note {
    margin-top: -2rem;
    text-align: center;
    font-size: 0.98rem;
    color: rgba(10, 10, 10, 0.6);
}

.pricing-note a {
    color: #0a0a0a;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pricing-card {
    position: relative;
    border: 1.5px solid rgba(10, 10, 10, 0.12);
    border-radius: 1.5rem;
    padding: 2rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    background-color: #ffffff;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.pricing-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
    transform: translateY(-3px);
}

.pricing-card-featured {
    background-color: #ffffff;
    border-color: #0a0a0a;
    border-width: 2px;
}

.pricing-card-featured:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.plan-badge {
    position: absolute;
    top: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    color: #0a0a0a;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
}

.plan-top {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.plan-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.01em;
}



.plan-amount {
    font-size: 2.4rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.03em;
    line-height: 1.1;
}



.plan-ht {
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(10, 10, 10, 0.45);
}



.plan-rhythm {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0a0a0a;
}



.plan-rhythm-sub {
    font-weight: 400;
    color: rgba(10, 10, 10, 0.5);
}



.plan-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(10, 10, 10, 0.5);
}



.plan-commitment {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(10, 10, 10, 0.45);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(10, 10, 10, 0.12);
    align-self: flex-start;
}



.plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    border-top: 1px solid rgba(10, 10, 10, 0.08);
    padding-top: 1.5rem;
    flex: 1;
}



.plan-feature {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: rgba(10, 10, 10, 0.75);
    line-height: 1.4;
}



.feature-check {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: #0a0a0a;
}



/* CTA */
.pricing-cta {
    display: block;
    width: 100%;
    padding: 0.85rem;
    border-radius: 9999px;
    background-color: #0a0a0a;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-align: center;
    text-decoration: none;
}

.pricing-cta:hover { opacity: 0.8; transform: scale(1.02); }
.pricing-cta:active { transform: scale(0.97); }



@media (max-width: 760px) {
    /* Carrousel horizontal : glisser pour voir les formules une par une (même logique que les cas clients). */
    .pricing-grid {
        grid-template-columns: none;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100vw;   /* pleine largeur d'écran : le slider occupe tout l'écran (plus de blanc fixe à droite) */
        max-width: 100vw;
        margin: 0;      /* centré par le align-items:center de la section → bord à bord symétrique */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 0.25rem 1.5rem 1.5rem;
        scroll-padding-left: 1.5rem;
        scrollbar-width: none;
    }
    .pricing-grid::-webkit-scrollbar { display: none; }

    .pricing-card {
        flex: 0 0 calc(100vw - 4rem); /* largeur relative à l'écran : petit peek régulier, blanc de fin maîtrisé (~40px) */
        scroll-snap-align: start;
        min-width: 0;
    }
}

/* Résultats */
.resultats {
    width: 100%;
    padding: var(--section-pad-y) 1.5rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

.resultats-inner {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.resultats-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
    text-align: center;
    color: #0a0a0a;
}

.resultats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background-color: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1.25rem;
    overflow: hidden;
}

@media (max-width: 700px) {
    .resultats-grid { grid-template-columns: repeat(2, 1fr); }
}

.resultat-card {
    padding: 2rem 1.5rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
}

.resultat-stat {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.03em;
    line-height: 1;
}

.resultat-label {
    font-size: 0.85rem;
    color: rgba(10, 10, 10, 0.45);
    line-height: 1.4;
}

.resultats-cases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 640px) {
    /* Carrousel horizontal : glisser pour voir les cas clients un par un. */
    .resultats-cases {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 0.25rem 1.25rem 1.5rem;
        scroll-padding-left: 1.25rem;
        scrollbar-width: none;
        margin: 0 -1.25rem; /* compense le padding du parent pour bord à bord */
    }
    .resultats-cases::-webkit-scrollbar { display: none; }

    .resultat-case {
        flex: 0 0 82%;
        scroll-snap-align: start;
        min-width: 0;
    }
}

.resultat-case {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1.25rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.resultat-case:hover {
    border-color: rgba(0, 0, 0, 0.18);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
}

.case-top {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.case-tag {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(10, 10, 10, 0.4);
}

.case-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0a0a0a;
}

.case-quote {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(10, 10, 10, 0.6);
    font-style: italic;
    flex: 1;
}

.case-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.case-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.case-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.case-author-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.case-author-name {
    font-size: 1rem;
    font-weight: 700;
    color: #0a0a0a;
}

.case-author-role {
    font-size: 0.85rem;
    color: rgba(10, 10, 10, 0.45);
}

.case-metrics {
    display: flex;
    gap: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.case-metric {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.case-metric-val {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.02em;
}

.case-metric-lbl {
    font-size: 0.8rem;
    color: rgba(10, 10, 10, 0.4);
}

/* FAQ */
.faq {
    width: 100%;
    padding: var(--section-pad-y) 1.5rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

.faq-inner {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.faq-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
    text-align: center;
}

.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.faq-item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.faq-question {
    padding: 1.25rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: rgba(10, 10, 10, 0.7);
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-question::after {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 0 1.25rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(10, 10, 10, 0.65);
    animation: faqSlide 0.3s ease;
}

@keyframes faqSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Adresse */
.adresse {
    width: 100%;
    background-color: #ffffff;
    position: relative;
}

.adresse-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.adresse-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
}

.adresse-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(10, 10, 10, 0.5);
    letter-spacing: 0.01em;
}

.adresse-title sup {
    font-size: 0.75em;
    vertical-align: super;
}

.adresse-cta {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(10, 10, 10, 0.4);
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 10, 10, 0.2);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.adresse-cta:hover {
    color: #0a0a0a;
    border-color: #0a0a0a;
}

.adresse-note {
    font-size: 0.78rem;
    color: rgba(10, 10, 10, 0.4);
    font-style: italic;
}

.adresse-map {
    height: 266px;
    width: 100%;
    overflow: hidden;
}

/* Footer */
.site-footer {
    width: 100%;
    background-color: #0a0a0a;
    color: #ffffff;
    padding: 4rem 1.5rem 2rem;
}

.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-logo {
    font-size: 2rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.03em;
}

/* Footer : on n'affiche QUE le mot « PRIMO » (on masque le bloc dégradé de
   gauche via overflow + décalage), en blanc pour le fond sombre. */
.footer-logo {
    height: 1.9rem;
    width: 8.2rem;
    overflow: hidden;
}
.footer-logo img {
    display: block;
    height: 1.9rem;
    width: auto;
    max-width: none;
    margin-left: -4.6rem; /* pousse le rectangle dégradé hors du cadre */
    filter: brightness(0) invert(1);
}

.footer-tagline {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-email {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    margin-top: 0.5rem;
    transition: color 0.2s ease;
}

.footer-email:hover {
    color: #ffffff;
}

.footer-links {
    display: flex;
    gap: 4rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-col-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
}

.footer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-link {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
}

.footer-copy {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 640px) {
    .footer-top {
        flex-direction: column;
        gap: 2rem;
    }
    .footer-links {
        gap: 2.5rem;
    }
    /* Dégage la barre de navigation fixe en bas d'écran. */
    .site-footer {
        padding-bottom: 6rem;
    }
}

/* ===== Bloc blog sur l'accueil ===== */
.home-blog {
    padding: var(--section-pad-y) 2rem;
    background-color: #ffffff;
}
.home-blog-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.home-blog-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.home-blog-eyebrow {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.4);
    margin-bottom: 0.6rem;
}
.home-blog-title {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #0a0a0a;
}
.home-blog-all {
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0a0a0a;
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 10, 10, 0.25);
    padding-bottom: 2px;
    transition: border-color 0.2s ease;
}
.home-blog-all:hover {
    border-color: #0a0a0a;
}
.home-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.home-blog-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.75rem;
    border: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 18px;
    text-decoration: none;
    background: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.home-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(10, 10, 10, 0.1);
    border-color: rgba(10, 10, 10, 0.14);
}
.home-blog-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.4);
}
.home-blog-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: #0a0a0a;
}
.home-blog-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(10, 10, 10, 0.5);
    flex: 1;
}
.home-blog-meta {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: rgba(10, 10, 10, 0.4);
}
@media (max-width: 900px) {
    .home-blog-head { flex-direction: column; align-items: flex-start; }
    .home-blog-grid {
        grid-template-columns: none;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 0.25rem 2rem 1.5rem;
        scroll-padding-left: 2rem;
        scrollbar-width: none;
        margin: 0 -2rem;
    }
    .home-blog-grid::-webkit-scrollbar { display: none; }
    .home-blog-card {
        flex: 0 0 calc(100vw - 4rem);
        scroll-snap-align: start;
        min-width: 0;
    }
}

/* ===== Page article de blog ===== */
.article-page {
    background-color: #ffffff;
    color: #0a0a0a;
}
.article-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 9rem 1.5rem 4rem;
}
.article-breadcrumb {
    font-size: 0.85rem;
    color: rgba(10, 10, 10, 0.45);
    margin-bottom: 2rem;
}
.article-breadcrumb a {
    color: rgba(10, 10, 10, 0.45);
    text-decoration: none;
}
.article-breadcrumb a:hover {
    color: #0a0a0a;
}
.article-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0a0a0a;
    background: rgba(10, 10, 10, 0.05);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}
.article-h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}
.article-meta {
    font-size: 0.9rem;
    color: rgba(10, 10, 10, 0.45);
    margin-bottom: 2.5rem;
}
.article-cover {
    width: 100%;
    border-radius: 18px;
    margin-bottom: 2.5rem;
    display: block;
}
.article-body {
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(10, 10, 10, 0.82);
    /* Un mot anormalement long (sans espaces) ne doit jamais déborder du
       cadre : il revient à la ligne plutôt que d'être rogné hors écran. */
    overflow-wrap: break-word;
    word-break: break-word;
}
.article-body h2 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #0a0a0a;
    margin: 2.5rem 0 1rem;
}
.article-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0a0a0a;
    margin: 2rem 0 0.75rem;
}
.article-body p {
    margin-bottom: 1.25rem;
}
.article-body ul,
.article-body ol {
    margin: 0 0 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.article-body a {
    color: #0a0a0a;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article-body blockquote {
    border-left: 3px solid #0a0a0a;
    padding-left: 1.25rem;
    margin: 2rem 0;
    font-style: italic;
    color: rgba(10, 10, 10, 0.7);
}
.article-cta {
    margin-top: 3.5rem;
    padding: 2.5rem;
    border-radius: 18px;
    background: #0a0a0a;
    color: #fff;
    text-align: center;
}
.article-cta h3 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}
.article-cta p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}
.article-cta a {
    display: inline-block;
    background: #fff;
    color: #0a0a0a;
    font-weight: 600;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.article-cta a:hover {
    transform: translateY(-2px);
}

/* ===== Page liste du blog ===== */
.blog-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
}
.blog-hero {
    padding: 9rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}
.blog-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(10,10,10,0.4);
}
.blog-title {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #0a0a0a;
}
.blog-subtitle {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.65;
    color: rgba(10,10,10,0.5);
    max-width: 520px;
}
.blog-grid {
    max-width: 1100px;
    width: 100%;
    margin: 3rem auto 7rem;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
}
.blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border: 1px solid rgba(10,10,10,0.08);
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(10,10,10,0.1);
    border-color: rgba(10,10,10,0.14);
}
.blog-card-thumb {
    height: 180px;
    background: linear-gradient(135deg, #1a1f2b 0%, #0a0e16 100%);
    position: relative;
    overflow: hidden;
}
.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-card-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(93,177,255,0.22), transparent 60%);
}
.blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 1.5rem 1.75rem;
    flex: 1;
}
.blog-card-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(10,10,10,0.4);
}
.blog-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: #0a0a0a;
}
.blog-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(10,10,10,0.5);
    flex: 1;
}
.blog-card-meta {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: rgba(10,10,10,0.4);
}
@media (max-width: 900px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; }
}