/* ==========================================================
   ANIMATIONS « VIVANTES » — accueil, à propos, contact
   Réutilise les couleurs de style.css (aucune nouvelle teinte).
   ========================================================== */

:root {
    --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --intro-total: 3.6s;
}

html.intro-seen {
    --intro-total: 1.2s;
}

/* ----------------------------------------------------------
   1. ÉCRAN DE CHARGEMENT (fond blanc, ralenti)
   ---------------------------------------------------------- */
.loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background: var(--color-white);
    color: var(--color-black);
    animation: loaderOut 1.1s var(--ease-slow) calc(var(--intro-total) - 1s) forwards;
}

.loader-inner {
    text-align: center;
    padding: 0 16px;
}

.loader-title {
    display: flex;
    justify-content: center;
    font-size: clamp(2.6rem, 10vw, 6.5rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
}

.loader-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(45%);
    filter: blur(10px);
    animation: letterIn 1.2s var(--ease-slow) forwards;
}

.loader-title span:nth-child(1) { animation-delay: 0.10s; }
.loader-title span:nth-child(2) { animation-delay: 0.22s; }
.loader-title span:nth-child(3) { animation-delay: 0.34s; }
.loader-title span:nth-child(4) { animation-delay: 0.46s; }
.loader-title span:nth-child(5) { animation-delay: 0.58s; }
.loader-title span:nth-child(7) { animation-delay: 0.78s; }
.loader-title span:nth-child(8) { animation-delay: 0.90s; }
.loader-title span:nth-child(9) { animation-delay: 1.02s; }

.loader-title .loader-gap {
    width: 0.45em;
}

.loader-line {
    height: 3px;
    margin: 22px auto 18px;
    width: min(420px, 70vw);
    background: rgba(10, 10, 10, 0.08);
    overflow: hidden;
    border-radius: 3px;
}

.loader-line span {
    display: block;
    height: 100%;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    transform: scaleX(0);
    transform-origin: left;
    animation: lineGrow 1.4s var(--ease-slow) 1.1s forwards;
}

.loader-sub {
    font-size: clamp(0.9rem, 2.6vw, 1.25rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.1em;
    margin-right: -1.1em;
    opacity: 0;
    animation: subIn 1.6s var(--ease-slow) 1.3s forwards;
}

.loader-tagline {
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--color-gray);
    letter-spacing: 0.08em;
    opacity: 0;
    animation: fadeOnly 1s ease 1.9s forwards;
}

html.intro-seen .loader-title span,
html.intro-seen .loader-line span,
html.intro-seen .loader-sub,
html.intro-seen .loader-tagline {
    animation-duration: 0.01s;
    animation-delay: 0s;
}

html.is-loading,
html.is-loading body {
    overflow: hidden;
}

@keyframes letterIn {
    to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes lineGrow {
    to { transform: scaleX(1); }
}

@keyframes subIn {
    from { opacity: 0; letter-spacing: 1.1em; }
    to { opacity: 1; letter-spacing: 0.55em; }
}

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

/* Le rideau blanc se lève pour dévoiler le site */
@keyframes loaderOut {
    0% { clip-path: inset(0 0 0 0); }
    99% { clip-path: inset(0 0 100% 0); visibility: visible; }
    100% { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

/* ----------------------------------------------------------
   2. HERO — le texte s'anime, le terminal reste tel quel
   ---------------------------------------------------------- */
.hero-anim {
    opacity: 0;
    animation: heroUp 1.3s var(--ease-slow) both;
}

.hero-title {
    background-size: 200% auto;
    animation:
        heroTitle 1.8s var(--ease-slow) var(--intro-total) both,
        gradientDrift 9s ease-in-out calc(var(--intro-total) + 1.8s) infinite alternate;
}

.hero-text { animation-delay: calc(var(--intro-total) + 0.45s); }
.hero-cta.hero-anim { animation-delay: calc(var(--intro-total) + 0.75s); }

@keyframes heroTitle {
    from { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(6px); }
    to { opacity: 1; clip-path: inset(-15% -15% -20% -15%); filter: blur(0); }
}

@keyframes heroUp {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

@keyframes gradientDrift {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0;
    animation: fadeOnly 1s ease calc(var(--intro-total) + 1.4s) forwards;
}

.scroll-mouse {
    display: block;
    width: 24px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    position: relative;
}

.scroll-mouse span {
    position: absolute;
    left: 50%;
    top: 7px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--color-blue);
    animation: wheel 2.2s var(--ease-slow) infinite;
}

@keyframes wheel {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(12px); }
}

/* ----------------------------------------------------------
   3. SYSTÈME DE RÉVÉLATION AU DÉFILEMENT
   (seulement si JS est actif : sans JS, tout reste visible)
   ---------------------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-blue);
}

.eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
}

.section-header .eyebrow {
    display: flex;
    justify-content: center;
}

html.js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(4px);
    transition:
        opacity 1.1s var(--ease-slow) var(--d, 0s),
        transform 1.1s var(--ease-slow) var(--d, 0s),
        filter 1.1s var(--ease-slow) var(--d, 0s);
}

html.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Image qui se découvre comme un rideau, au ralenti */
html.js [data-reveal^="wipe"] {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.6s var(--ease-slow) var(--d, 0s);
}

html.js .svc-reverse [data-reveal="wipe"] {
    clip-path: inset(0 0 0 100%);
}

html.js [data-reveal="wipe-up"] {
    clip-path: inset(100% 0 0 0);
}

html.js [data-reveal^="wipe"].is-in {
    clip-path: inset(0 0 0 0);
}

html.js [data-reveal^="wipe"] img {
    scale: 1.25;
    transition: scale 2.6s var(--ease-slow) var(--d, 0s);
}

html.js [data-reveal^="wipe"].is-in img {
    scale: 1.06;
}

/* Le cadre des services garde son inclinaison 3D en plus du rideau */
html.js .svc-frame[data-reveal],
html.js .svc-frame[data-reveal].is-in {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition:
        clip-path 1.6s var(--ease-slow) var(--d, 0s),
        transform 0.6s var(--ease-slow);
}

/* Petit « pop » élastique */
html.js [data-reveal="pop"] {
    transform: scale(0.6);
    filter: none;
    transition:
        opacity 0.8s ease var(--d, 0s),
        transform 0.9s var(--ease-back) var(--d, 0s);
}

/* Titres : les mots montent un par un */
[data-split] .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.08em;
}

[data-split] .w > span {
    display: inline-block;
}

html.js [data-split] .w > span {
    transform: translateY(110%);
    transition: transform 1.1s var(--ease-slow) calc(var(--i) * 0.08s);
}

html.js [data-split].is-in .w > span {
    transform: none;
}

html.js .alive .section-header h2::after {
    transform: translateX(-50%) scaleX(0);
    transition: transform 1.2s var(--ease-slow) 0.5s;
}

html.js .alive .section-header h2.is-in::after {
    transform: translateX(-50%) scaleX(1);
}

/* Listes et cartes en cascade */
html.js [data-stagger] > * {
    opacity: 0;
    transform: translateX(-16px);
    transition:
        opacity 0.9s var(--ease-slow) calc(var(--i) * 0.12s + 0.2s),
        transform 0.9s var(--ease-slow) calc(var(--i) * 0.12s + 0.2s);
}

html.js [data-stagger="cards"] > * {
    transform: translateY(46px) scale(0.97);
    transition:
        opacity 1.2s var(--ease-slow) calc(var(--i) * 0.14s),
        transform 1.2s var(--ease-slow) calc(var(--i) * 0.14s),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

html.js [data-stagger].is-in > * {
    opacity: 1;
    transform: none;
}

/* ----------------------------------------------------------
   4. BIENVENUE CHEZ SOCAF
   ---------------------------------------------------------- */
.company-intro {
    position: relative;
    overflow: hidden;
    padding: 120px 0 140px;
}

.company-intro::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    right: -160px;
    top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-blue-glow), transparent 65%);
    opacity: 0.12;
    pointer-events: none;
}

.company-intro .intro-content {
    gap: 70px;
}

.intro-quote {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 30px;
    font-size: 1.3rem;
    font-style: italic;
    color: var(--color-white);
}

.quote-line {
    width: 0;
    height: 2px;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    transition: width 1.4s var(--ease-slow) 0.4s;
}

.intro-quote.is-in .quote-line,
html:not(.js) .quote-line {
    width: 40px;
}

.company-intro .intro-stats {
    gap: 16px;
    flex-wrap: wrap;
}

.company-intro .stat-item {
    flex: 1 1 120px;
    padding: 18px 16px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: transform 0.4s var(--ease-slow), border-color 0.4s ease;
}

.company-intro .stat-item:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 255, 255, 0.3);
}

.company-intro .stat-item > i {
    color: var(--color-blue);
    font-size: 1.1rem;
    margin-bottom: 8px;
    display: block;
}

.company-intro .stat-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-gray);
}

.intro-visual {
    position: relative;
    padding-bottom: 70px;
}

.intro-photo {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

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

.intro-photo-main {
    position: relative;
    width: 90%;
    aspect-ratio: 3 / 2;
}

html.js .intro-photo-main.is-in img {
    scale: 1.12;
}

.intro-photo-main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.16), transparent 45%, rgba(0, 255, 255, 0.14));
    pointer-events: none;
}

.intro-photo-small {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    aspect-ratio: 16 / 10;
    border: 6px solid var(--color-dark);
}

.intro-badge {
    position: absolute;
    left: -18px;
    top: 26px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(13, 13, 13, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: gentleFloat 6s ease-in-out infinite;
}

.intro-badge i {
    color: var(--color-pink);
    font-size: 1.3rem;
}

.intro-badge strong {
    display: block;
    font-size: 0.95rem;
}

.intro-badge span {
    font-size: 0.8rem;
    color: var(--color-gray);
}

@keyframes gentleFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

/* ----------------------------------------------------------
   5. NOS SERVICES — chaque service a son image et son histoire
   ---------------------------------------------------------- */
.services.alive {
    padding: 120px 0 80px;
}

.svc-list {
    position: relative;
}

.svc-progress {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.06);
}

.svc-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--color-pink), var(--color-blue));
    transform: scaleY(var(--p, 0));
    transform-origin: top;
}

.svc {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
    padding: 70px 0;
}

/* Point sur la ligne de progression */
.svc::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--color-dark);
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: background 0.6s ease, border-color 0.6s ease, transform 0.6s var(--ease-back);
}

.svc.is-active::before {
    background: var(--color-blue);
    border-color: var(--color-blue);
    transform: scale(1.25);
}

.svc-reverse .svc-media {
    order: 2;
}

.svc-media {
    position: relative;
    perspective: 1000px;
}

.svc-number {
    position: absolute;
    top: -62px;
    left: -12px;
    z-index: 0;
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
    transition: -webkit-text-stroke-color 0.8s ease;
}

.svc-reverse .svc-number {
    left: auto;
    right: -12px;
}

.svc.is-active .svc-number {
    -webkit-text-stroke-color: rgba(255, 0, 255, 0.45);
}

.svc-frame {
    position: relative;
    z-index: 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.6s var(--ease-slow), clip-path 1.6s var(--ease-slow);
}

.svc-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}

html.js .svc-frame.is-in:hover img,
.svc-frame:hover img {
    scale: 1.12;
    transition-duration: 1.2s;
}

/* Reflet lumineux qui traverse l'image au ralenti */
.svc-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%);
    transform: translateX(-120%);
    pointer-events: none;
}

.svc-frame.is-in::after {
    transition: transform 2s ease-in-out 1s;
    transform: translateX(120%);
}

.svc-tag {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    background: rgba(13, 13, 13, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.svc-tag i {
    color: var(--color-blue);
    margin-right: 4px;
}

.svc-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 16px;
    font-size: 1.6rem;
    color: var(--color-blue);
    background: rgba(0, 255, 255, 0.06);
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.svc-body h3 {
    font-size: 2rem;
    margin-bottom: 12px;
}

.svc-tagline {
    padding-left: 14px;
    border-left: 2px solid var(--color-pink);
    font-size: 1.15rem;
    color: var(--color-white);
    margin-bottom: 14px;
}

.svc-body > p:not(.svc-tagline) {
    color: var(--color-gray);
}

.svc-body .service-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    margin: 10px 0 24px;
}

.svc-body .service-link {
    font-size: 1.05rem;
}

/* ----------------------------------------------------------
   6. POURQUOI NOUS CHOISIR
   ---------------------------------------------------------- */
.why-choose-us.alive {
    padding: 110px 0 120px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}

.why-card {
    position: relative;
    overflow: hidden;
    padding-bottom: 28px;
    border-radius: 14px;
    background: var(--color-darker);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Lumière qui suit la souris */
.why-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 255, 255, 0.08), transparent 45%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.why-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-slow);
}

.why-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.why-card:hover::before {
    opacity: 1;
}

.why-card:hover::after {
    transform: scaleX(1);
}

.why-media {
    position: relative;
    height: 170px;
    overflow: hidden;
}

.why-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 35%, var(--color-darker));
}

.why-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.45);
    transition: filter 2.2s ease 0.3s, scale 1.2s var(--ease-slow);
}

/* L'image « se développe » comme une photo quand la carte apparaît */
.why-grid.is-in .why-media img,
html:not(.js) .why-media img {
    filter: grayscale(0) brightness(0.8);
}

.why-card:hover .why-media img {
    scale: 1.08;
    filter: grayscale(0) brightness(1);
    transition-delay: 0s;
}

.why-icon {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin: -28px 0 18px 28px;
    border-radius: 50%;
    font-size: 1.3rem;
    color: var(--color-blue);
    background: var(--color-dark);
    border: 1px solid rgba(0, 255, 255, 0.35);
    transition: transform 0.6s var(--ease-back), color 0.4s ease, border-color 0.4s ease;
}

.why-card:hover .why-icon {
    transform: rotate(-10deg) scale(1.1);
    color: var(--color-pink);
    border-color: rgba(255, 0, 255, 0.45);
}

.why-card h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
    padding: 0 28px;
}

.why-card p {
    margin: 0;
    padding: 0 28px;
    color: var(--color-gray);
}

/* ----------------------------------------------------------
   7. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
    .hero-content .hero-title {
        font-size: clamp(2rem, 9vw, 3rem);
        overflow-wrap: break-word;
    }

    .company-intro .intro-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .intro-badge {
        left: 8px;
    }

    .svc-progress,
    .svc::before {
        display: none;
    }

    .svc {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 50px 0;
    }

    .svc-reverse .svc-media {
        order: 0;
    }


    html.js .svc-reverse [data-reveal="wipe"] {
        clip-path: inset(0 100% 0 0);
    }

    html.js .svc-reverse [data-reveal="wipe"].is-in {
        clip-path: inset(0 0 0 0);
    }
}

@media (max-width: 480px) {
    .company-intro,
    .services.alive,
    .why-choose-us.alive {
        padding: 80px 0;
    }

    .intro-quote {
        font-size: 1.1rem;
    }

    .svc-body h3 {
        font-size: 1.6rem;
    }

    .svc-body .service-features {
        grid-template-columns: 1fr;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------
   8. MOUVEMENTS RÉDUITS : tout est visible, sans animation
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .loader {
        display: none;
    }

    .hero-anim,
    .hero-title,
    .scroll-cue {
        animation: none;
        opacity: 1;
    }

    .intro-badge,
    .scroll-mouse span {
        animation: none;
    }

    html.js [data-reveal],
    html.js [data-reveal^="wipe"],
    html.js [data-split] .w > span,
    html.js [data-stagger] > * {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        transition: none;
    }

    html.js [data-reveal^="wipe"] img {
        scale: 1;
    }

    .why-media img {
        filter: none;
    }
}

/* ==========================================================
   SUITE DE L'ACCUEIL — expertise, projets, avis, partenaires, contact
   ========================================================== */

/* ----------------------------------------------------------
   9. NOTRE EXPERTISE TECHNIQUE — système solaire
   ---------------------------------------------------------- */
.tech-showcase.alive {
    padding: 120px 0;
    overflow: hidden;
}

.tech-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.tech-text p {
    color: var(--color-light-gray);
}

.tech-families {
    display: grid;
    gap: 12px;
    margin-top: 30px;
}

.tech-families li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: default;
}

html.js .tech-families.is-in li {
    transition:
        opacity 0.9s var(--ease-slow) calc(var(--i) * 0.12s + 0.2s),
        transform 0.6s var(--ease-slow),
        border-color 0.4s ease,
        background 0.4s ease;
}

html.js .tech-families.is-in li:hover,
html.js .tech-families.is-in li.is-on,
.tech-families li:hover,
.tech-families li.is-on {
    transform: translateX(8px);
    border-color: rgba(0, 255, 255, 0.3);
    background: rgba(0, 255, 255, 0.04);
}

.tech-families strong {
    display: block;
    font-size: 1.05rem;
}

.tech-families li span:not(.family-dot) {
    font-size: 0.85rem;
    color: var(--color-gray);
}

.family-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-blue);
}

[data-family="back"] .family-dot { background: var(--color-pink); }
[data-family="game"] .family-dot { background: var(--color-red); }

.tech-orbit {
    position: relative;
    width: min(520px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
}

html.js [data-reveal="orbit"] {
    transform: scale(0.8) rotate(-20deg);
    filter: blur(6px);
    transition:
        opacity 1.6s var(--ease-slow),
        transform 2.4s var(--ease-slow),
        filter 1.6s var(--ease-slow);
}

.orbit-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background: radial-gradient(circle at 30% 30%, #1e1e1e, var(--color-darker));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 60px rgba(0, 255, 255, 0.08), 0 0 60px rgba(255, 0, 255, 0.06) inset;
}

.orbit-core span {
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.orbit-core small {
    font-size: 0.7rem;
    letter-spacing: 0.5em;
    margin-right: -0.5em;
    color: var(--color-gray);
}

/* Ondes lentes autour du noyau */
.orbit-core::before,
.orbit-core::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, 0.35);
    animation: ripple 5s var(--ease-slow) infinite;
}

.orbit-core::after {
    animation-delay: 2.5s;
    border-color: rgba(255, 0, 255, 0.3);
}

@keyframes ripple {
    from { transform: scale(1); opacity: 0.8; }
    to { transform: scale(2.4); opacity: 0; }
}

.orbit-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    translate: -50% -50%;
    animation: spin 46s linear infinite;
}

.ring-inner {
    width: 58%;
    aspect-ratio: 1;
}

.ring-outer {
    width: 94%;
    aspect-ratio: 1;
    animation-duration: 80s;
    animation-direction: reverse;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Chaque logo est porté par un « bras » invisible orienté selon --a */
.orbit-item {
    position: absolute;
    inset: 0;
    rotate: var(--a);
    pointer-events: none;
}

.orbit-bubble {
    position: absolute;
    left: 50%;
    top: 0;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(18, 18, 18, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto;
    rotate: calc(var(--a) * -1);
    /* Tourne en sens inverse de l'anneau pour rester droit */
    animation: spin 46s linear infinite reverse;
    transition:
        top 2s var(--ease-slow) calc(var(--k, 0) * 0.1s + 0.3s),
        opacity 0.5s ease,
        scale 0.6s var(--ease-back),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.ring-outer .orbit-bubble {
    animation-duration: 80s;
    animation-direction: normal;
}

/* Les logos jaillissent du centre au ralenti */
html.js .tech-orbit:not(.is-in) .orbit-bubble {
    top: 50%;
    opacity: 0;
}

.orbit-bubble img {
    width: 34px;
    height: 34px;
}

.orbit-item.is-dark img {
    filter: invert(1);
}

.orbit-bubble em {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    translate: -50% 0;
    font-size: 0.72rem;
    font-style: normal;
    white-space: nowrap;
    color: var(--color-light-gray);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tech-orbit:hover .orbit-ring,
.tech-orbit:hover .orbit-bubble,
.tech-orbit.has-focus .orbit-ring,
.tech-orbit.has-focus .orbit-bubble {
    animation-play-state: paused;
}

.orbit-bubble:hover,
.orbit-item.is-lit .orbit-bubble {
    scale: 1.15;
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 0 8px rgba(0, 255, 255, 0.06);
}

.orbit-bubble:hover em,
.orbit-item.is-lit em {
    opacity: 1;
}

.tech-orbit.has-focus .orbit-item:not(.is-lit) .orbit-bubble {
    opacity: 0.25;
}

/* ----------------------------------------------------------
   10. NOS PROJETS RÉCENTS — bande-démo
   ---------------------------------------------------------- */
.recent-projects.alive {
    padding: 120px 0;
    overflow: hidden;
}

.reel {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 50px;
}

.reel-screen {
    position: relative;
    margin-top: 14px;
    perspective: 1600px;
}

.reel-browser {
    border-radius: 14px;
    overflow: hidden;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    transform: rotateY(-7deg) rotateX(3deg);
    transition: transform 1.4s var(--ease-slow);
}

.reel-screen:hover .reel-browser {
    transform: none;
}

.reel-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    background: #202020;
}

.reel-bar > span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ff5f56;
}

.reel-bar > span:nth-child(2) { background: #ffbd2e; }
.reel-bar > span:nth-child(3) { background: #27c93f; }

.reel-url {
    flex: 1;
    margin-left: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    color: var(--color-gray);
    background: rgba(255, 255, 255, 0.06);
    white-space: nowrap;
    overflow: hidden;
}

.reel-url i {
    font-size: 0.7rem;
    color: #27c93f;
    margin-right: 4px;
}

.reel-url-text::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-left: 2px;
    vertical-align: -1px;
    background: var(--color-blue);
    animation: caret 1s steps(1) infinite;
}

@keyframes caret {
    50% { opacity: 0; }
}

.reel-views {
    position: relative;
    aspect-ratio: 1200 / 580;
    background: var(--color-darker);
    overflow: hidden;
}

.reel-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: 0;
    clip-path: inset(0 0 0 100%);
    scale: 1.15;
    transition: clip-path 1.5s var(--ease-slow), scale 8s linear;
}

.reel-view.is-prev {
    z-index: 1;
    clip-path: inset(0 0 0 0);
    scale: 1.02;
}

.reel-view.is-active {
    z-index: 2;
    clip-path: inset(0 0 0 0);
    scale: 1.02;
}

.reel-counter {
    position: absolute;
    right: 22px;
    bottom: -30px;
    z-index: 3;
    font-size: 0.95rem;
    color: var(--color-gray);
}

.reel-counter b {
    font-size: 3.2rem;
    font-weight: 800;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.reel-list {
    list-style: none;
}

.reel-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.reel-trigger {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 18px 0 16px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.reel-cat {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-blue);
}

.reel-title {
    font-size: 1.45rem;
    font-weight: 700;
    opacity: 0.4;
    transition: opacity 0.6s ease, translate 0.6s var(--ease-slow);
}

.reel-trigger:hover .reel-title {
    opacity: 0.75;
    translate: 6px 0;
}

.reel-item.is-active .reel-title {
    opacity: 1;
    translate: 0 0;
}

.reel-progress {
    display: block;
    height: 2px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.reel-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    transform: scaleX(0);
    transform-origin: left;
}

.reel.is-playing .reel-item.is-active .reel-progress span {
    animation: progressFill 7s linear forwards;
}

.reel:hover .reel-item.is-active .reel-progress span {
    animation-play-state: paused;
}

@keyframes progressFill {
    to { transform: scaleX(1); }
}

.reel-detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.9s var(--ease-slow), opacity 0.6s ease;
}

.reel-item.is-active .reel-detail {
    max-height: 220px;
    opacity: 1;
    transition-delay: 0.2s;
}

.reel-detail p {
    margin: 0 0 10px;
    color: var(--color-gray);
    font-size: 0.95rem;
}

.reel-link {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--color-pink);
    font-weight: 600;
    font-size: 0.95rem;
}

.reel-link i {
    font-size: 0.8rem;
    margin-left: 4px;
    transition: translate 0.4s var(--ease-slow);
}

.reel-link:hover i {
    translate: 3px -3px;
}

.reel-swipe {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: -6px;
    font-size: 0.85rem;
    color: var(--color-gray);
    transition: opacity 0.6s ease;
}

.reel-swipe i {
    color: var(--color-blue);
    animation: swipeHint 2.4s var(--ease-slow) infinite;
}

@keyframes swipeHint {
    0%, 100% { translate: 8px 0; }
    50% { translate: -8px 0; }
}

.reel.has-swiped .reel-swipe {
    opacity: 0;
}

.reel.is-touching .reel-item.is-active .reel-progress span {
    animation-play-state: paused;
}

/* ----------------------------------------------------------
   11. CE QUE DISENT NOS CLIENTS — la parole en grand
   ---------------------------------------------------------- */
.testimonials.alive {
    padding: 120px 0 130px;
    overflow: hidden;
}

.testimonials.alive .section-header {
    margin-bottom: 110px;
}

.voices {
    position: relative;
    display: grid;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.voices-mark {
    position: absolute;
    left: 50%;
    top: -100px;
    translate: -50% 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16rem;
    line-height: 1;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.16;
    pointer-events: none;
    animation: gentleFloat 7s ease-in-out infinite;
}

.voice {
    grid-row: 1;
    grid-column: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.voice.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.voice-quote {
    margin: 0;
    font-size: clamp(1.25rem, 2.6vw, 1.95rem);
    font-weight: 500;
    line-height: 1.55;
    color: var(--color-white);
}

/* Les mots s'allument comme si on lisait à voix haute */
.voice-quote .vw {
    opacity: 0.12;
    transition: opacity 0.6s ease;
}

.voice.is-active .voice-quote .vw {
    opacity: 1;
    transition-delay: calc(var(--i) * 0.06s + 0.2s);
}

html:not(.js) .voice-quote .vw {
    opacity: 1;
}

.voice-author {
    margin: 28px 0 0;
    color: var(--color-gray);
    opacity: 0;
    translate: 0 10px;
    transition: opacity 0.8s ease, translate 0.8s var(--ease-slow);
}

.voice.is-active .voice-author {
    opacity: 1;
    translate: 0 0;
    transition-delay: 1.4s;
}

.voice-author strong {
    display: block;
    font-size: 1.1rem;
    color: var(--color-white);
}

.voice-people {
    grid-row: 2;
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 40px;
}

.voice-person {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: scale 0.6s var(--ease-back);
}

.voice-person::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.voice-person img {
    position: absolute;
    inset: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.5;
    transition: filter 0.8s ease, opacity 0.8s ease;
}

.voice-person:hover img,
.voice-person.is-active img {
    filter: none;
    opacity: 1;
}

.voice-person.is-active {
    scale: 1.1;
}

.voice-person svg {
    position: absolute;
    inset: 0;
    rotate: -90deg;
}

.voice-person circle {
    fill: none;
    stroke: var(--color-blue);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 214;
    stroke-dashoffset: 214;
}

.voice-person.is-active circle {
    stroke-dashoffset: 0;
}

/* L'anneau se remplit : c'est le minuteur du témoignage */
.voices.is-playing .voice-person.is-active circle {
    stroke-dashoffset: 214;
    animation: ringFill 9s linear forwards;
}

.voices:hover .voice-person.is-active circle {
    animation-play-state: paused;
}

@keyframes ringFill {
    to { stroke-dashoffset: 0; }
}

/* ----------------------------------------------------------
   12. PARTENAIRES — bandeau qui défile au ralenti
   ---------------------------------------------------------- */
.partners.alive {
    padding: 110px 0 120px;
    overflow: hidden;
}

.marquee {
    overflow: hidden;
    padding: 14px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 45s linear infinite;
}

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

.marquee-set {
    display: flex;
    gap: 28px;
    padding-right: 28px;
}

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

.partner-card {
    width: 200px;
    height: 110px;
    display: grid;
    place-items: center;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    transition: transform 0.7s var(--ease-slow), box-shadow 0.5s ease;
}

.partner-card img {
    max-width: 150px;
    max-height: 76px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.8s ease, opacity 0.8s ease;
}

.partner-card:hover {
    transform: translateY(-8px) rotate(-2deg);
    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.55), 0 20px 40px rgba(0, 0, 0, 0.4);
}

.partner-card:hover img {
    filter: none;
    opacity: 1;
}

/* ----------------------------------------------------------
   13. CONTACT — une lettre qui donne envie d'écrire
   ---------------------------------------------------------- */
.contact.alive {
    position: relative;
    padding: 120px 0 130px;
    overflow: hidden;
}

.contact.alive::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    left: -200px;
    bottom: -260px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-pink-glow), transparent 65%);
    opacity: 0.12;
    pointer-events: none;
}

.contact-layout {
    position: relative;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 40px;
    align-items: start;
}

/* --- Carte de message --- */
.contact-form.msg-card {
    position: relative;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: var(--color-dark);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    transition: border-color 0.8s ease, box-shadow 0.8s ease;
}

.contact-form.msg-card:focus-within {
    border-color: rgba(0, 255, 255, 0.22);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 70px rgba(0, 255, 255, 0.06);
}

.msg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 16px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.msg-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--color-white);
}

.msg-title i {
    color: var(--color-blue);
}

.msg-live {
    font-size: 0.82rem;
}

.msg-body {
    padding: 26px 28px 8px;
}

.msg-field {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
}

.msg-key {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-light-gray);
    transition: color 0.4s ease;
}

.msg-key small {
    font-weight: 400;
    color: var(--color-gray);
}

/* Le libellé s'éclaire quand on remplit le champ */
.msg-field:focus-within .msg-key {
    color: var(--color-blue);
}

.msg-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-white);
    caret-color: var(--color-blue);
    transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.msg-input::placeholder {
    color: #6b6f78;
}

.msg-input:hover {
    border-color: rgba(255, 255, 255, 0.16);
}

.msg-input:focus {
    outline: none;
    border-color: rgba(0, 255, 255, 0.5);
    background: rgba(0, 255, 255, 0.04);
    box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.08);
}

textarea.msg-input {
    min-height: 130px;
    resize: vertical;
    line-height: 1.6;
}

.msg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.msg-chips button {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    color: var(--color-light-gray);
    cursor: pointer;
    transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, scale 0.5s var(--ease-back);
}

.msg-chips button:hover {
    border-color: rgba(0, 255, 255, 0.45);
    color: var(--color-white);
}

.msg-chips button.is-picked {
    border-color: transparent;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    color: var(--color-white);
    scale: 1.05;
}

/* Erreur : douce, pas alarmante */
.msg-error {
    display: block;
    min-height: 0;
    font-size: 0.82rem;
    color: #ff8a93;
}

.msg-error:empty {
    display: none;
}

.msg-field.has-error .msg-input {
    border-color: rgba(255, 51, 51, 0.5);
}

.msg-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 28px 24px;
}

.msg-promise {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--color-gray);
}

.msg-promise i {
    color: var(--color-blue);
}

.msg-send {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.msg-send i {
    transition: translate 0.6s var(--ease-back);
}

.msg-send:hover i {
    translate: 4px -4px;
}

.msg-card.is-sending .msg-send i {
    animation: flyAway 1.8s var(--ease-slow) forwards;
}

@keyframes flyAway {
    to { translate: 220px -160px; rotate: 18deg; scale: 0.4; opacity: 0; }
}

.msg-send.is-shaking {
    animation: shake 0.5s ease;
}

@keyframes shake {
    20%, 60% { translate: -4px 0; }
    40%, 80% { translate: 4px 0; }
}

.msg-note {
    margin: -12px 28px 20px;
    font-size: 0.78rem;
    color: #6b6f78;
}

.msg-card .form-submit-error {
    margin: -8px 28px 20px;
    font-size: 0.88rem;
    color: #ff8a93;
}

.msg-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Écran « message envoyé » */
.msg-done {
    position: absolute;
    inset: 46px 0 0;
    z-index: 3;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 6px;
    padding: 30px;
    text-align: center;
    background: var(--color-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.msg-card.is-sent .msg-done {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.6s, 0s;
}

.msg-done svg {
    width: 84px;
    height: 84px;
    margin-bottom: 10px;
}

.msg-done circle,
.msg-done path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.msg-done circle {
    stroke: url(#msgGradient);
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
}

.msg-done path {
    stroke: var(--color-white);
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
}

.msg-card.is-sent .msg-done circle {
    transition: stroke-dashoffset 1.4s var(--ease-slow) 0.8s;
    stroke-dashoffset: 0;
}

.msg-card.is-sent .msg-done path {
    transition: stroke-dashoffset 0.8s var(--ease-slow) 1.8s;
    stroke-dashoffset: 0;
}

.msg-done h3 {
    margin: 0;
    font-size: 1.6rem;
}

.msg-done p {
    margin: 0 0 16px;
    font-family: var(--mono);
    font-size: 0.9rem;
}

.msg-again {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    font: inherit;
    color: var(--color-light-gray);
    cursor: pointer;
    transition: border-color 0.4s ease, color 0.4s ease;
}

.msg-again:hover {
    border-color: var(--color-blue);
    color: var(--color-white);
}

.pulse {
    position: relative;
    flex: none;
    width: 12px;
    height: 12px;
    margin: 0 17px;
    border-radius: 50%;
    background: var(--color-blue);
}

.pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--color-blue);
    animation: ripple 2.4s ease-out infinite;
}

/* ----------------------------------------------------------
   13 bis. BANDEAU « ACCÉLÉREZ » — vitesse au ralenti
   ---------------------------------------------------------- */
.cta-section.alive {
    padding: 110px 0;
}

.cta-section.alive .container {
    gap: 50px;
}

/* Traits de lumière qui traversent le bandeau */
.cta-streaks span {
    position: absolute;
    left: -35%;
    top: var(--y);
    width: 35%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-blue), transparent);
    opacity: 0.35;
    animation: streak var(--t) linear var(--d) infinite;
}

.cta-streaks span:nth-child(even) {
    background: linear-gradient(to right, transparent, var(--color-pink), transparent);
}

@keyframes streak {
    to { transform: translateX(400%); }
}

/* Mots géants qui dérivent derrière le texte */
.cta-kinetic {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    translate: 0 -50%;
    overflow: hidden;
    pointer-events: none;
}

.cta-kinetic-track {
    display: flex;
    width: max-content;
    animation: marquee 70s linear infinite;
}

.cta-kinetic span {
    padding-right: 0.4em;
    font-size: clamp(5rem, 13vw, 11rem);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
}

.cta-section.alive .cta-content h2 {
    font-size: clamp(2rem, 4.5vw, 3rem);
}

/* Dernier mot du titre en dégradé */
.cta-section.alive h2 .w:last-of-type span {
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cta-magnet {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    translate: var(--mx, 0) var(--my, 0);
    transition: translate 0.6s var(--ease-slow), transform 0.3s, box-shadow 0.3s;
}

.cta-magnet i {
    transition: translate 0.5s var(--ease-slow);
}

.cta-magnet:hover i {
    translate: 5px 0;
}

/* Compteur de vitesse */
.cta-gauge {
    position: relative;
    flex: 0 1 380px;
    text-align: center;
}

.cta-gauge svg {
    width: 100%;
    overflow: visible;
}

.gauge-track,
.gauge-fill {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
}

.gauge-track {
    stroke: rgba(255, 255, 255, 0.07);
}

.gauge-fill {
    stroke: url(#gaugeGradient);
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 2.8s var(--ease-slow) 0.3s;
}

.gauge-ticks line {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 2;
    stroke-linecap: round;
}

.gauge-needle {
    transform-box: view-box;
    transform-origin: 120px 130px;
    rotate: -90deg;
    transition: rotate 2.8s var(--ease-back) 0.3s;
}

.gauge-needle line {
    stroke: var(--color-white);
    stroke-width: 3;
    stroke-linecap: round;
}

.gauge-needle circle {
    fill: var(--color-dark);
    stroke: var(--color-blue);
    stroke-width: 3;
}

.cta-gauge.is-in .gauge-fill,
html:not(.js) .gauge-fill {
    stroke-dashoffset: 12;
}

.cta-gauge.is-in .gauge-needle,
html:not(.js) .gauge-needle {
    rotate: 68deg;
}

/* Une fois lancé, l'aiguille vibre légèrement comme un moteur au ralenti */
.cta-gauge.is-idle .gauge-needle {
    animation: idle 2.6s ease-in-out infinite;
}

@keyframes idle {
    0%, 100% { rotate: 68deg; }
    50% { rotate: 65deg; }
}

.gauge-label {
    margin-top: -6px;
}

.gauge-label strong {
    display: block;
    font-size: 1.2rem;
}

.gauge-label span {
    color: var(--color-gray);
    font-size: 0.9rem;
}

/* ==========================================================
   PAGES À PROPOS ET CONTACT
   ========================================================== */

/* ----------------------------------------------------------
   15. BANDEAU DE PAGE
   ---------------------------------------------------------- */
.page-header.page-hero {
    padding: 170px 0 140px;
    background-image: none;
    overflow: hidden;
}

.page-hero .container {
    position: relative;
    z-index: 2;
}

.page-hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    margin-bottom: 18px;
}

.page-hero .hero-text {
    max-width: 640px;
    margin: 0 auto;
    color: var(--color-light-gray);
    font-size: 1.15rem;
}

.crumbs {
    margin-bottom: 18px;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--color-gray);
}

.crumbs a {
    color: var(--color-light-gray);
}

.crumbs a:hover {
    color: var(--color-blue);
}

.crumbs span {
    margin: 0 8px;
    color: var(--color-pink);
}

.crumbs.hero-anim {
    animation-delay: var(--intro-total);
}

/* Lumière qui suit la souris (cartes des pages) */
.cinfo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 255, 255, 0.08), transparent 45%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.cinfo:hover::before {
    opacity: 1;
}

.cinfo > * {
    position: relative;
    z-index: 1;
}

/* ----------------------------------------------------------
   16. MISSION & VISION — les images parlent
   ---------------------------------------------------------- */
.mission-vision.alive {
    padding: 110px 0;
}

.mv-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.mv-panel {
    position: relative;
    height: 580px;
    overflow: hidden;
    border-radius: 18px;
    isolation: isolate;
}

.mv-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    /* Zoom lent et continu, comme une caméra au ralenti */
    animation: kenBurns 16s ease-in-out infinite alternate;
}

.mv-panel:nth-child(2) img {
    animation-delay: -8s;
}

@keyframes kenBurns {
    from { transform: scale(1) translate(0, 0); }
    to { transform: scale(1.12) translate(-2%, -2%); }
}

.mv-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* voile assez dense pour lire le texte sur les photos chargées */
    background: linear-gradient(to top, rgba(10, 10, 10, 0.97) 30%, rgba(10, 10, 10, 0.75) 62%, rgba(10, 10, 10, 0.2));
}

.mv-panel-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 36px 34px;
}

.mv-tag {
    display: inline-block;
    margin-bottom: 16px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-white);
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
}

.mv-quote {
    margin-bottom: 16px;
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-white);
}

/* Les mots s'allument comme si on lisait à voix haute */
[data-read] .vw {
    opacity: 0.3;
    transition: opacity 0.6s ease;
}

[data-read].is-in .vw {
    opacity: 1;
    transition-delay: calc(var(--i) * 0.07s + 0.8s);
}

.mv-more {
    margin: 0;
    color: var(--color-light-gray);
    opacity: 0;
    translate: 0 12px;
    transition: opacity 1s ease 2.8s, translate 1s var(--ease-slow) 2.8s;
}

.mv-panel.is-in .mv-more,
html:not(.js) .mv-more {
    opacity: 1;
    translate: 0 0;
}

/* ----------------------------------------------------------
   17. VALEURS — une image fixe qui change à chaque valeur
   ---------------------------------------------------------- */
.values.alive {
    padding: 110px 0 60px;
}

.sv {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 70px;
}

.sv-visual {
    position: sticky;
    top: 110px;
    height: min(620px, calc(100vh - 150px));
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sv-frame {
    position: relative;
    flex: 1;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.sv-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.75), transparent 45%),
        linear-gradient(135deg, rgba(255, 0, 255, 0.12), transparent 50%, rgba(0, 255, 255, 0.1));
    pointer-events: none;
}

.sv-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    scale: 1.14;
    filter: blur(6px);
    transition: opacity 1.4s ease, scale 2.4s var(--ease-slow), filter 1.4s ease;
}

.sv-img.is-active {
    opacity: 1;
    scale: 1;
    filter: none;
}

.sv-count {
    position: absolute;
    left: 24px;
    bottom: 18px;
    z-index: 1;
    font-size: 1rem;
    color: var(--color-light-gray);
}

.sv-count b {
    font-size: 3.4rem;
    font-weight: 800;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sv-dots {
    display: flex;
    gap: 8px;
    list-style: none;
}

.sv-dots li {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.8s ease;
}

.sv-dots li.is-done {
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
}

.sv-step {
    min-height: 72vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.22;
    translate: 0 20px;
    transition: opacity 0.9s ease, translate 0.9s var(--ease-slow);
}

.sv-step.is-active {
    opacity: 1;
    translate: 0 0;
}

.sv-inline {
    display: none;
}

/* Numéro plein et lisible plutôt qu'un contour pâle */
.sv-num {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1em;
    color: transparent;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    -webkit-background-clip: text;
    background-clip: text;
}

@media (max-width: 900px) {
    .reel-counter {
        display: none;
    }
}

.sv-step h3 {
    margin: 10px 0 12px;
    font-size: 2.3rem;
}


.sv-step p:not(.sv-lead) {
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-gray);
}

/* ----------------------------------------------------------
   18. GALERIE
   ---------------------------------------------------------- */
.about-gallery.alive {
    padding: 110px 0;
}

.ab-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 250px 250px;
    gap: 18px;
}

.ab-shot {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
}

.ab-shot-large {
    grid-row: span 2;
}

.ab-shot:nth-child(4) {
    grid-column: span 2;
}

.ab-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html.js .ab-shot[data-reveal^="wipe"] img {
    transition: scale 2.6s var(--ease-slow) var(--d, 0s), filter 0.8s ease;
}

html.js .ab-shot.is-in:hover img,
.ab-shot:hover img {
    scale: 1.12;
}

.ab-shot figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 50px 20px 18px;
    font-size: 0.88rem;
    color: var(--color-light-gray);
    background: linear-gradient(to top, rgba(10, 10, 10, 0.9), transparent);
}

.ab-shot figcaption strong {
    display: block;
    font-size: 1.1rem;
    color: var(--color-white);
}

/* La légende se dévoile au survol (toujours visible sur écran tactile) */
@media (hover: hover) {
    .ab-shot figcaption {
        translate: 0 34px;
        transition: translate 0.8s var(--ease-slow);
    }

    .ab-shot:hover figcaption {
        translate: 0 0;
    }
}

/* ----------------------------------------------------------
   19. PARCOURS (frise)
   ---------------------------------------------------------- */
.timeline.alive {
    padding: 110px 0;
}

.tl {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
}

.tl-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.06);
}

.tl-line span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--color-pink), var(--color-blue));
    transform: scaleY(var(--p, 0));
    transform-origin: top;
}

.tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
    padding: 36px 0;
}

.tl-item::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--color-dark);
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: background 0.6s ease, border-color 0.6s ease, scale 0.6s var(--ease-back);
}

.tl-item.is-active::before {
    background: var(--color-blue);
    border-color: var(--color-blue);
    scale: 1.25;
}

.tl-body {
    text-align: right;
}

.tl-item:nth-of-type(even) .tl-body {
    order: 2;
    text-align: left;
}

.tl-date {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(0, 255, 255, 0.35);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-blue);
}

.tl-body h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.tl-body p {
    margin: 0;
    color: var(--color-gray);
}

.tl-media {
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.tl-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.tl-media img[src*="logo"] {
    object-fit: contain;
    background: #fff;
}

/* ----------------------------------------------------------
   20. CONTACT : CARTES, PLAN, FAQ
   ---------------------------------------------------------- */
.contact-details.alive {
    padding: 80px 0 30px;
}

/* --- Cartes de coordonnées animées (accueil et page Contact) --- */
.ct-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.contact-aside {
    display: grid;
    gap: 14px;
}

.cinfo {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 16px;
    background: var(--color-darker);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--color-white);
}

.cinfo.is-row {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 14px;
}

html.js [data-stagger].is-in > .cinfo {
    transition:
        opacity 1.2s var(--ease-slow) calc(var(--i) * 0.14s),
        transform 0.6s var(--ease-slow),
        border-color 0.5s ease;
}

html.js [data-stagger].is-in > .cinfo:hover,
.cinfo:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 255, 255, 0.3);
}

html.js [data-stagger].is-in > .cinfo.is-row:hover,
.cinfo.is-row:hover {
    transform: translateX(6px);
}

.cinfo-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.cinfo h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
}

.cinfo.is-row h3 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.cinfo p {
    flex: 1;
    margin: 0 0 14px;
    font-size: 0.95rem;
    color: var(--color-gray);
}

.cinfo.is-row p {
    margin: 0 0 4px;
    font-size: 0.88rem;
}

.ci-nums {
    display: flex;
    flex-direction: column;
}

.ci-num {
    font-variant-numeric: tabular-nums;
    color: var(--color-light-gray);
    letter-spacing: 0.02em;
}

.ci-num:hover {
    color: var(--color-blue);
}

/* La scène qui accueille chaque animation */
.ci-art {
    position: relative;
    flex: none;
    height: 130px;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 60%, rgba(0, 255, 255, 0.07), transparent 70%), rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.cinfo.is-row .ci-art {
    width: 96px;
    height: 96px;
    margin: 0;
}

/* Délai commun : chaque carte s'anime après son apparition */
.cinfo {
    --go: calc(var(--i, 0) * 0.14s + 0.5s);
}

/* Adresse : l'épingle tombe sur le plan */
.ci-map {
    background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 16px 16px,
        rgba(255, 255, 255, 0.02);
}

.ci-roads::before,
.ci-roads::after {
    content: '';
    position: absolute;
    left: -20%;
    width: 140%;
    height: 7px;
    background: rgba(0, 255, 255, 0.14);
    top: 58%;
    rotate: -18deg;
}

.ci-roads::after {
    top: 30%;
    rotate: 62deg;
    background: rgba(255, 0, 255, 0.12);
}

.ci-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -34px 0 0 -15px;
    border-radius: 50% 50% 50% 0;
    rotate: -45deg;
    background: linear-gradient(135deg, var(--color-pink), var(--color-blue));
    box-shadow: 0 4px 14px rgba(255, 0, 255, 0.35);
}

.ci-pin::after {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--color-darker);
}

.ci-shadow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 8px;
    margin: 2px 0 0 -11px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
}

.ci-shadow::after {
    content: '';
    position: absolute;
    inset: -6px -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 0, 255, 0.6);
    opacity: 0;
}

.cinfo.is-row .ci-pin {
    width: 24px;
    height: 24px;
    margin: -28px 0 0 -12px;
}

.cinfo.is-row .ci-pin::after {
    inset: 7px;
}

html.js .ci-pin {
    opacity: 0;
    translate: 40px -40px;
}

html.js .ci-shadow {
    scale: 0;
}

[data-stagger].is-in .ci-pin {
    animation: pinDrop 1.3s var(--ease-back) var(--go) forwards;
}

[data-stagger].is-in .ci-shadow {
    animation: shadowIn 1.3s var(--ease-back) var(--go) forwards;
}

[data-stagger].is-in .ci-shadow::after {
    animation: ripple 2.6s var(--ease-slow) calc(var(--go) + 1.3s) infinite;
}

.cinfo:hover .ci-pin {
    animation: pinHop 0.8s var(--ease-back);
    opacity: 1;
    translate: 0 0;
}

@keyframes pinDrop {
    0% { opacity: 0; translate: 0 -70px; }
    60% { opacity: 1; translate: 0 4px; }
    100% { opacity: 1; translate: 0 0; }
}

@keyframes shadowIn {
    to { scale: 1; }
}

@keyframes pinHop {
    40% { translate: 0 -14px; }
}

/* Téléphone : le combiné sonne, les ondes partent */
.ci-handset {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.3rem;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-pink), var(--color-blue));
}

.cinfo.is-row .ci-handset {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
}

.ci-wave {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 255, 0.5);
    opacity: 0;
}

[data-stagger].is-in .ci-handset {
    animation: ringing 4s ease-in-out var(--go) infinite;
}

[data-stagger].is-in .ci-wave {
    animation: ripple 4s var(--ease-slow) var(--go) infinite;
}

[data-stagger].is-in .ci-wave + .ci-wave {
    animation-delay: calc(var(--go) + 0.4s);
    border-color: rgba(255, 0, 255, 0.45);
}

@keyframes ringing {
    0%, 30%, 100% { rotate: 0deg; }
    4%, 12%, 20% { rotate: -16deg; }
    8%, 16%, 24% { rotate: 16deg; }
}

/* Email : l'enveloppe s'ouvre, la lettre sort */
.ci-env {
    position: relative;
    width: 86px;
    height: 56px;
    margin-top: 22px;
    border-radius: 6px;
    background: #24242b;
    border: 1px solid rgba(255, 255, 255, 0.16);
    perspective: 300px;
}

.cinfo.is-row .ci-env {
    width: 62px;
    height: 40px;
    margin-top: 16px;
}

/* Poche avant de l'enveloppe */
.ci-env::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 6px;
    background: #2d2d36;
    clip-path: polygon(0 100%, 0 30%, 50% 70%, 100% 30%, 100% 100%);
}

.ci-letter {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 8%;
    height: 84%;
    z-index: 1;
    display: grid;
    place-items: start center;
    padding-top: 2px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 1.2rem;
    background: #fff;
    color: var(--color-pink);
    transition: translate 1.1s var(--ease-back);
}

.ci-flap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 62%;
    z-index: 3;
    background: #33333d;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top;
    transition: transform 0.9s var(--ease-slow), z-index 0s linear 0.45s;
}

[data-stagger].is-in .ci-flap,
html:not(.js) .ci-flap {
    transform: rotateX(180deg);
    z-index: 0;
    transition-delay: var(--go), calc(var(--go) + 0.45s);
}

[data-stagger].is-in .ci-letter,
html:not(.js) .ci-letter {
    translate: 0 -46%;
    transition-delay: calc(var(--go) + 0.7s);
}

.cinfo:hover .ci-letter {
    translate: 0 -62%;
    transition-delay: 0s;
}

/* Horaires : l'horloge se règle sur l'heure d'Abidjan */
.ci-face {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background:
        repeating-conic-gradient(rgba(255, 255, 255, 0.4) 0 1.5deg, transparent 1.5deg 30deg);
    -webkit-mask: radial-gradient(circle, #000 0 68%, transparent 69% 74%, #000 75%);
    mask: radial-gradient(circle, #000 0 68%, transparent 69% 74%, #000 75%);
}

.cinfo.is-row .ci-face {
    width: 66px;
    height: 66px;
}

.ci-face::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--color-pink);
}

.ci-face i {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 3px;
    height: 24%;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--color-white);
    transform-origin: bottom center;
    rotate: 0deg;
    transition: rotate 2.4s var(--ease-slow) var(--go);
}

.ci-face .ci-m {
    height: 34%;
    width: 2px;
    margin-left: -1px;
    background: var(--color-light-gray);
}

.ci-face .ci-s {
    height: 38%;
    width: 1px;
    margin-left: -0.5px;
    background: var(--color-pink);
}

[data-stagger].is-in .ci-h { rotate: var(--hr, 0deg); }
[data-stagger].is-in .ci-m { rotate: var(--mn, 0deg); }
[data-stagger].is-in .ci-s {
    rotate: var(--sc, 0deg);
    animation: tick 60s steps(60) calc(var(--go) + 2.4s) infinite;
}

@keyframes tick {
    from { rotate: var(--sc, 0deg); }
    to { rotate: calc(var(--sc, 0deg) + 360deg); }
}

/* WhatsApp : la conversation commence */
.ci-chat {
    align-content: center;
    gap: 6px;
    padding: 0 10px;
}

.ci-b {
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.68rem;
    line-height: 1.3;
    white-space: nowrap;
}

.ci-b1 {
    justify-self: start;
    border-bottom-left-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-light-gray);
}

.ci-b2 {
    justify-self: end;
    display: flex;
    gap: 3px;
    padding: 8px 10px;
    border-bottom-right-radius: 3px;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
}

.ci-b2 i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-white);
    animation: typingDot 1.2s ease-in-out infinite;
}

.ci-b2 i:nth-child(2) { animation-delay: 0.15s; }
.ci-b2 i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingDot {
    0%, 60%, 100% { translate: 0 0; opacity: 0.6; }
    30% { translate: 0 -4px; opacity: 1; }
}

html.js .ci-b {
    opacity: 0;
    scale: 0.6;
}

[data-stagger].is-in .ci-b1 {
    animation: bubbleIn 0.7s var(--ease-back) var(--go) forwards;
}

[data-stagger].is-in .ci-b2 {
    animation: bubbleIn 0.7s var(--ease-back) calc(var(--go) + 1s) forwards;
}

@keyframes bubbleIn {
    to { opacity: 1; scale: 1; }
}

.ct-action {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-pink);
}

.ct-action i {
    margin-left: 4px;
    transition: translate 0.5s var(--ease-slow);
}

.cinfo:hover .ct-action i {
    translate: 4px 0;
}

.ct-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-gray);
    font-weight: 500;
}

.ct-open::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gray);
}

.ct-open.is-open {
    color: #7ee08a;
}

.ct-open.is-open::before {
    background: #27c93f;
    box-shadow: 0 0 0 4px rgba(39, 201, 63, 0.18);
}

/* Plan d'accès */
.map-card {
    overflow: hidden;
    border-radius: 14px;
    background: var(--color-darker);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.map-view {
    position: relative;
    margin: 0;
}

.map-view img {
    display: block;
    width: 100%;
    filter: grayscale(0.5) brightness(0.8);
    transition: filter 1.2s ease;
}

.map-card:hover .map-view img {
    filter: none;
}

/* Ondes au ralenti autour du point de rendez-vous */
.map-pin {
    position: absolute;
    /* pointe de l'épingle rouge dans carte.webp */
    left: 33.5%;
    top: 36%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
}

.map-pin::before,
.map-pin::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--color-pink);
    animation: ripple 3s var(--ease-slow) infinite;
}

.map-pin::after {
    animation-delay: 1.5s;
    border-color: var(--color-blue);
}

.map-view figcaption {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--color-light-gray);
    background: rgba(13, 13, 13, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.map-view figcaption strong {
    display: block;
    color: var(--color-white);
}

.map-info {
    padding: 24px;
}

.map-info h3 {
    font-size: 1.15rem;
    margin-bottom: 16px;
}

.map-step {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    font-size: 0.92rem;
    color: var(--color-gray);
}

.map-step i {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--color-blue);
    background: rgba(0, 255, 255, 0.07);
}

.map-step strong {
    display: block;
    color: var(--color-white);
}

.map-open {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

/* FAQ en cartes */
.faq.alive {
    padding: 110px 0;
}

.faq.alive .faq-container {
    display: grid;
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
}

.faq.alive .faq-item {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--color-darker);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

html.js .faq.alive .faq-container.is-in > .faq-item {
    transition:
        opacity 1.2s var(--ease-slow) calc(var(--i) * 0.14s),
        transform 1.2s var(--ease-slow) calc(var(--i) * 0.14s),
        border-color 0.5s ease;
}

.faq.alive .faq-item.active,
.faq.alive .faq-item:hover {
    border-color: rgba(0, 255, 255, 0.3);
}

.faq.alive .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    cursor: pointer;
}

.faq.alive .faq-question h3 {
    margin: 0;
    font-size: 1.05rem;
}

.faq.alive .faq-toggle {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, 0.35);
    color: var(--color-blue);
    transition: rotate 0.7s var(--ease-slow), background 0.5s ease, color 0.5s ease;
}

.faq.alive .faq-item.active .faq-toggle {
    rotate: 180deg;
    border-color: transparent;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    color: var(--color-white);
}

/* Ouverture plus lente que le comportement d'origine */
.faq.alive .faq-answer {
    padding: 0;
    /* style.css bloquait la réponse à max-height: 0 : elle ne s'ouvrait jamais */
    max-height: none;
    transition: height 0.8s var(--ease-slow) !important;
}

.faq.alive .faq-answer p {
    margin: 0;
    padding: 0 24px 22px;
    color: var(--color-gray);
}

/* ----------------------------------------------------------
   14. RESPONSIVE (suite)
   ---------------------------------------------------------- */
@media (max-width: 900px) {
    .tech-layout,
    .reel,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .tech-orbit {
        width: min(440px, 100%);
    }

    .reel-browser {
        transform: none;
    }

    /* Projets : on fait glisser les cartes horizontalement */
    .reel {
        gap: 34px;
    }

    .reel-list {
        position: relative;
        display: flex;
        gap: 14px;
        margin: 0 -20px;
        padding: 6px 20px 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .reel-list::-webkit-scrollbar {
        display: none;
    }

    .reel-item {
        flex: 0 0 82%;
        scroll-snap-align: center;
        padding: 0 18px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        background: var(--color-darker);
        opacity: 0.5;
        scale: 0.95;
        transition: opacity 0.6s ease, scale 0.6s var(--ease-slow), border-color 0.6s ease;
    }

    .reel-item.is-active {
        opacity: 1;
        scale: 1;
        border-color: rgba(0, 255, 255, 0.35);
    }

    .reel-item .reel-title {
        opacity: 1;
    }

    .reel-item .reel-detail {
        max-height: 220px;
        opacity: 1;
    }

    .reel-swipe {
        display: flex;
    }

    .cta-section.alive .container {
        flex-direction: column;
        text-align: center;
    }

    .mv-panels {
        grid-template-columns: 1fr;
    }

    .mv-panel {
        height: 520px;
    }

    .sv {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sv-visual {
        display: none;
    }

    .sv-step {
        min-height: 0;
        padding: 30px 0;
        opacity: 1;
        translate: 0 0;
    }

    .sv-inline {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        margin-bottom: 18px;
        border-radius: 14px;
    }

    .sv-step h3 {
        font-size: 1.8rem;
    }

    .ab-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 280px 200px 200px;
    }

    .ab-shot-large {
        grid-row: auto;
        grid-column: span 2;
    }

    .ab-shot:nth-child(4) {
        grid-column: span 2;
    }

    .tl-line {
        left: 8px;
    }

    .tl-item {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px 0 28px 36px;
    }

    .tl-item::before {
        left: 8px;
        top: 44px;
    }

    .tl-body,
    .tl-item:nth-of-type(even) .tl-body {
        order: 0;
        text-align: left;
    }

    .ct-cards {
        grid-template-columns: 1fr 1fr;
    }

    .cta-gauge {
        flex-basis: auto;
        width: min(320px, 100%);
    }

}

@media (max-width: 480px) {
    .tech-showcase.alive,
    .recent-projects.alive,
    .testimonials.alive,
    .partners.alive,
    .contact.alive {
        padding: 80px 0;
    }

    .orbit-bubble {
        width: 48px;
        height: 48px;
        margin: -24px 0 0 -24px;
    }

    .orbit-bubble img {
        width: 26px;
        height: 26px;
    }

    .voices-mark {
        font-size: 11rem;
        top: -70px;
    }

    .testimonials.alive .section-header {
        margin-bottom: 80px;
    }

    .voice-person {
        width: 60px;
        height: 60px;
    }

    .partner-card {
        width: 160px;
        height: 92px;
    }

    .msg-body {
        padding: 22px 18px 6px;
    }

    .msg-foot {
        padding: 12px 18px 22px;
    }

    .msg-note,
    .msg-card .form-submit-error {
        margin-left: 18px;
        margin-right: 18px;
    }

    .msg-head {
        padding: 14px 18px;
    }

    .page-header.page-hero {
        padding: 130px 0 110px;
    }

    .mv-panel {
        height: 500px;
    }

    .mv-panel-text {
        padding: 26px 22px;
    }

    .ab-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: 220px;
    }

    .ab-shot-large,
    .ab-shot:nth-child(4) {
        grid-column: auto;
    }

    .ct-cards {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orbit-ring,
    .orbit-bubble,
    .orbit-core::before,
    .orbit-core::after,
    .marquee-track,
    .voices-mark,
    .pulse::after,
    .reel-url-text::after,
    .reel-swipe i,
    .cta-streaks span,
    .cta-kinetic-track,
    .cta-gauge.is-idle .gauge-needle {
        animation: none;
    }

    .gauge-fill,
    .gauge-needle {
        transition: none;
    }

    html.js .tech-orbit:not(.is-in) .orbit-bubble {
        top: 0;
        opacity: 1;
    }

    .voice-quote .vw {
        opacity: 1;
        transition: none;
    }

    .marquee {
        overflow-x: auto;
    }
}

/* Mouvements réduits : coordonnées et pages, sans animation */
@media (prefers-reduced-motion: reduce) {
    html.js .ci-pin,
    html.js .ci-shadow,
    html.js .ci-b,
    .ci-handset,
    .ci-wave,
    .ci-b2 i,
    .ci-shadow::after,
    .mv-panel img {
        opacity: 1;
        translate: 0 0;
        scale: 1;
        animation: none !important;
    }

    .ci-wave {
        opacity: 0;
    }

    .ci-face i,
    .ci-flap,
    .ci-letter,
    .sv-img,
    .sv-step,
    .mv-more,
    [data-read] .vw {
        transition: none !important;
    }

    [data-read] .vw {
        opacity: 1;
    }
}

/* ==========================================================
   PARCOURS « ÉTAPE PAR ÉTAPE » — commun à toutes les pages
   ========================================================== */

/* Passage d'une page à l'autre en fondu lent (navigateurs récents ;
   les autres changent de page normalement). */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: pageOut 0.45s ease both;
}

::view-transition-new(root) {
    animation: pageIn 0.75s var(--ease-slow) both;
}

@keyframes pageOut {
    to { opacity: 0; }
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(14px); }
}

/* Ligne de progression de lecture, tout en haut */
.read-progress {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    transform: scaleX(var(--p, 0));
    transform-origin: left;
    pointer-events: none;
}

/* Rail des chapitres : où suis-je dans la page, et accès direct à chaque partie */
.rail {
    position: fixed;
    right: 22px;
    top: 50%;
    z-index: 900;
    translate: 0 -50%;
    display: none;
}

.rail ol {
    display: grid;
    gap: 14px;
    list-style: none;
}

.rail button {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 2px 0;
    border: none;
    background: none;
    color: var(--color-light-gray);
    font: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.rail-label {
    opacity: 0;
    translate: 8px 0;
    white-space: nowrap;
    transition: opacity 0.4s ease, translate 0.5s var(--ease-slow);
}

.rail-dot {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.25);
    transition: height 0.6s var(--ease-slow), background 0.6s ease;
}

.rail:hover .rail-label,
.rail button:focus-visible .rail-label {
    opacity: 1;
    translate: 0 0;
}

/* Sur très grand écran, le nom de la partie en cours reste affiché */
@media (min-width: 1500px) {
    .rail:not(:hover) button[aria-current="true"] .rail-label {
        opacity: 0.75;
        translate: 0 0;
    }
}

.rail button[aria-current="true"] .rail-dot {
    height: 26px;
    background: linear-gradient(to bottom, var(--color-pink), var(--color-blue));
}

.rail button:hover .rail-dot {
    background: rgba(255, 255, 255, 0.6);
}

html.is-loading .rail {
    opacity: 0;
}

@media (min-width: 1180px) {
    .rail {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ----------------------------------------------------------
   ÉCRANS TACTILES ET TÉLÉPHONES
   ---------------------------------------------------------- */

/* Consignes adaptées : « Survolez » à la souris, « Touchez » au doigt */
.on-touch {
    display: none;
}

@media (hover: none) {
    .on-hover {
        display: none;
    }

    .on-touch {
        display: inline;
    }

    /* Pas de souris sur un téléphone : l'icône de défilement n'a pas de sens */
    .scroll-cue {
        display: none;
    }
}

/* Les grands chiffres en contour dépassaient derrière les images : retirés */
.svc-number {
    display: none;
}

/* Les numéros apparaissent l'un après l'autre, toujours exacts */
[data-stagger].is-in .ci-num {
    animation: numIn 0.9s var(--ease-slow) both;
}

[data-stagger].is-in .ci-num:nth-child(2) { animation-delay: 0.12s; }
[data-stagger].is-in .ci-num:nth-child(3) { animation-delay: 0.24s; }

@keyframes numIn {
    from { opacity: 0; translate: -10px 0; }
}

@media (max-width: 900px) {
    /* Les traits lumineux traversaient le texte sur petit écran */
    .cta-streaks {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-stagger].is-in .ci-num {
        animation: none;
    }
}

/* ----------------------------------------------------------
   TÉLÉPHONES : LISIBILITÉ ET CONFORT
   ---------------------------------------------------------- */
@media (max-width: 900px) {
    /* Mission et vision : voile plus dense, texte lisible d'un coup */
    .mv-panel::after {
        background: linear-gradient(to top, rgba(10, 10, 10, 0.97) 40%, rgba(10, 10, 10, 0.8) 68%, rgba(10, 10, 10, 0.3));
    }

    [data-read] .vw {
        opacity: 1;
        transition: none;
    }

    .mv-more {
        transition-delay: 0.3s;
    }

    /* Légendes de la galerie lisibles sur les photos chargées */
    .ab-shot figcaption {
        padding-top: 80px;
        background: linear-gradient(to top, rgba(10, 10, 10, 0.96) 35%, rgba(10, 10, 10, 0.6) 70%, transparent);
    }

    /* Bandeau final : un compteur plus discret */
    .cta-section.alive .container {
        gap: 34px;
    }

    .cta-gauge {
        width: min(240px, 72%);
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    /* Moins de vide entre deux parties */
    section.alive:not(.hero):not(.page-header) {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .eyebrow {
        letter-spacing: 0.2em;
    }

    /* Chiffres clés : une seule ligne de trois */
    .company-intro .intro-stats {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .company-intro .stat-item {
        flex: 1 1 0;
        min-width: 0;
        padding: 14px 6px 12px;
    }

    .company-intro .stat-item > i {
        display: none;
    }

    .company-intro .stat-item .stat-number {
        font-size: 1.8rem;
    }

    .company-intro .stat-item p {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    /* Textes trop petits */
    .reel-cat,
    .ci-b {
        font-size: 0.75rem;
    }

    /* Zones tactiles confortables (44 px) */
    .service-link,
    .reel-link,
    .ct-action {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .ci-num {
        display: flex;
        align-items: center;
        min-height: 40px;
    }

    .msg-chips button {
        min-height: 40px;
        padding: 8px 16px;
    }

    /* La fenêtre de code du hero tient dans l'écran */
    .code-content {
        padding: 16px;
        font-size: 0.72rem;
    }
}

/* ----------------------------------------------------------
   PIED DE PAGE COMMUN
   ---------------------------------------------------------- */
.footer-brand {
    max-width: 320px;
}

.footer-brand .footer-logo {
    color: var(--color-white);
}

.footer-brand p {
    color: var(--color-gray);
    font-size: 0.92rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    footer {
        padding: 56px 0 20px;
    }

    .footer-content {
        gap: 34px;
        margin-bottom: 34px;
    }

    /* Navigation et services côte à côte, contact en dessous */
    .footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }

    .footer-contact {
        grid-column: 1 / -1;
    }

    .footer-column ul li {
        margin-bottom: 2px;
    }

    .footer-column ul li a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }
}

/* ----------------------------------------------------------
   MENU PLEIN ÉCRAN (TÉLÉPHONES ET TABLETTES)
   Au-delà de 1080 px, le menu classique tient sur une ligne.
   ---------------------------------------------------------- */
@media (max-width: 1080px) {
    .cta-button {
        display: none;
    }

    /* le logo et le bouton restent au-dessus du menu ouvert */
    .menu-toggle {
        position: relative;
        z-index: 1001;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-right: -8px;
    }

    header .logo {
        position: relative;
        z-index: 1001;
    }

    /* Trois traits dessinés en CSS (visibles même sans la police d'icônes), qui deviennent une croix */
    .menu-toggle i {
        display: none;
    }

    .menu-toggle::before,
    .menu-toggle::after {
        content: '';
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: box-shadow 0.3s ease, rotate 0.4s var(--ease-slow), opacity 0.3s ease;
    }

    .menu-toggle::before {
        box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
    }

    .menu-toggle::after {
        position: absolute;
        opacity: 0;
    }

    .menu-toggle.active::before {
        box-shadow: none;
        rotate: 45deg;
    }

    .menu-toggle.active::after {
        opacity: 1;
        rotate: -45deg;
    }

    header nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        padding: 108px 24px 32px;
        overflow-y: auto;
        background-color: var(--color-black);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-speed);
    }

    header nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    header nav ul {
        flex-direction: column;
        gap: 0;
        max-width: 560px;
        margin: 0 auto;
    }

    header nav ul li {
        margin: 0;
    }

    header nav ul li a {
        display: block;
        padding: 14px 2px;
        font-size: 1.2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    header nav ul li a::after {
        display: none;
    }

    header nav ul li a.active {
        color: var(--color-blue);
    }

    header nav .nav-cta {
        margin-top: 28px;
    }

    header nav .nav-cta a.btn-primary {
        display: block;
        padding: 14px 24px;
        border-bottom: none;
        font-size: 1rem;
        text-align: center;
    }
}

@media (min-width: 1081px) {
    .nav-cta {
        display: none;
    }
}

/* La page reste immobile derrière le menu ouvert */
html.menu-open,
html.menu-open body {
    overflow: hidden;
}

/* ==========================================================
   ACCUEIL — FINITIONS ORDINATEUR ET TÉLÉPHONE
   ========================================================== */

/* ---------- Hero : deux vraies réalisations autour du terminal ---------- */
.hero-shot {
    position: absolute;
    z-index: 0;
    width: 240px;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--color-dark);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
    opacity: 0;
    animation:
        shotIn 1.6s var(--ease-slow) calc(var(--intro-total) + 1.1s) forwards,
        shotFloat 9s ease-in-out calc(var(--intro-total) + 2.7s) infinite alternate;
}

.hero-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    filter: brightness(0.85);
}

.hero-shot figcaption {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--color-white);
    background: rgba(13, 13, 13, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero-shot figcaption i {
    margin-right: 4px;
    color: var(--color-blue);
}

/* Toutes deux derrière le terminal : il reste entièrement lisible */
.hero-shot-a {
    top: -88px;
    left: 0;
    rotate: -6deg;
}

/* la légende de la carte du haut se lit au-dessus du terminal */
.hero-shot-a figcaption {
    top: 10px;
    bottom: auto;
}

.hero-shot-b {
    right: -10px;
    bottom: -86px;
    width: 220px;
    rotate: 5deg;
    animation-delay: calc(var(--intro-total) + 1.35s), calc(var(--intro-total) + 3s);
}

@keyframes shotIn {
    from { opacity: 0; translate: 0 40px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes shotFloat {
    from { translate: 0 0; }
    to { translate: 0 -12px; }
}

@media (max-width: 1024px) {
    .hero-shot {
        display: none;
    }
}

/* ---------- Partenaires : une rangée nette ---------- */
.partners-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 14px 0 0;
    list-style: none;
}

/* Les logos gardent leurs couleurs */
.partners-row .partner-card img,
.partners-row .partner-card:hover img {
    filter: none;
    opacity: 1;
}

/* ---------- Points de repère sous les listes à faire glisser ---------- */
.swipe-dots {
    display: none;
}

/* ---------- Pourquoi nous choisir : le titre est un bouton sur téléphone ---------- */
.why-toggle {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}

.why-toggle:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 4px;
    border-radius: 6px;
}

/* ==========================================================
   TÉLÉPHONE (≤ 760 px)
   ========================================================== */
@media (max-width: 760px) {
    .hero {
        padding: 120px 0 64px;
    }

    /* ---------- Services : des cartes que l'on fait glisser ---------- */
    .services.alive .svc-list {
        display: flex;
        gap: 14px;
        margin: 0 -20px;
        padding: 6px 20px 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 20px;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .services.alive .svc-list::-webkit-scrollbar {
        display: none;
    }

    .services.alive .svc {
        flex: 0 0 86%;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 18px;
        background: var(--color-darker);
        border: 1px solid rgba(255, 255, 255, 0.07);
        scroll-snap-align: center;
    }

    .services.alive .svc-media {
        order: 0;
        perspective: none;
    }

    .services.alive .svc-frame {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    html.js .services.alive .svc-frame[data-reveal],
    html.js .services.alive .svc-frame[data-reveal].is-in {
        transform: none;
    }

    /* En haut de l'image : le bas accueille l'icône du service */
    .services.alive .svc-tag {
        top: 10px;
        bottom: auto;
        left: 10px;
        font-size: 0.75rem;
    }

    .services.alive .svc-body {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 34px 18px 18px;
    }

    /* L'icône se pose à cheval sur l'image (au-dessus d'elle) */
    .services.alive .svc-icon {
        position: absolute;
        z-index: 2;
        top: -26px;
        left: 18px;
        width: 52px;
        height: 52px;
        margin: 0;
        border-radius: 14px;
        font-size: 1.25rem;
        background: var(--color-darker);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    }

    .services.alive .svc-body h3 {
        margin-bottom: 6px;
        font-size: 1.35rem;
    }

    .services.alive .svc-body > p {
        font-size: 0.92rem;
    }

    .services.alive .svc-body .service-features {
        grid-template-columns: 1fr 1fr;
        gap: 2px 10px;
        margin: 10px 0 14px;
        font-size: 0.88rem;
    }

    .services.alive .svc-body .service-link {
        margin-top: auto;
    }

    .swipe-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 18px;
    }

    .swipe-dots span {
        width: 7px;
        height: 7px;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.2);
        transition: width 0.5s var(--ease-slow), background 0.5s ease;
    }

    .swipe-dots span.is-active {
        width: 24px;
        background: linear-gradient(to right, var(--color-pink), var(--color-blue));
    }

    /* ---------- Pourquoi nous choisir : une liste compacte qui s'ouvre ---------- */
    .why-choose-us.alive .why-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .why-choose-us.alive .why-card {
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: 14px;
        align-items: center;
        padding: 10px 14px 10px 10px;
    }

    .why-choose-us.alive .why-media {
        grid-row: 1;
        grid-column: 1;
        width: 64px;
        height: 64px;
        border-radius: 12px;
    }

    .why-choose-us.alive .why-media::after,
    .why-choose-us.alive .why-icon {
        display: none;
    }

    .why-choose-us.alive .why-card h3 {
        grid-row: 1;
        grid-column: 2;
        margin: 0;
        padding: 0;
        font-size: 1.05rem;
    }

    .why-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        cursor: pointer;
    }

    /* Chevron dessiné en CSS */
    .why-toggle::after {
        content: '';
        flex: none;
        width: 9px;
        height: 9px;
        margin-right: 4px;
        border-right: 2px solid var(--color-blue);
        border-bottom: 2px solid var(--color-blue);
        rotate: 45deg;
        translate: 0 -3px;
        transition: rotate 0.5s var(--ease-slow), translate 0.5s var(--ease-slow);
    }

    .why-card.is-open .why-toggle::after {
        rotate: -135deg;
        translate: 0 3px;
    }

    .why-choose-us.alive .why-card p {
        grid-column: 1 / -1;
        padding: 12px 4px 4px;
        font-size: 0.93rem;
    }

    /* Repliés seulement si le script est là pour les ouvrir */
    html.js .why-choose-us.alive .why-card p {
        max-height: 0;
        padding: 0 4px;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.7s var(--ease-slow), opacity 0.5s ease, padding 0.5s ease;
    }

    .why-choose-us.alive .why-card.is-open {
        border-color: rgba(0, 255, 255, 0.25);
    }

    html.js .why-choose-us.alive .why-card.is-open p {
        max-height: 220px;
        padding: 12px 4px 4px;
        opacity: 1;
    }

    /* ---------- Contact : les moyens rapides d'abord, puis le formulaire ---------- */
    .contact-layout {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .contact-aside {
        order: -1;
        display: grid;
        gap: 10px;
    }

    .contact-aside .cinfo.is-row {
        gap: 14px;
        padding: 10px;
    }

    .contact-aside .cinfo.is-row .ci-art {
        width: 64px;
        height: 64px;
    }

    /* ---------- Partenaires : trois logos sur une ligne ---------- */
    .partners-row {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .partners-row .partner-card {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 84px;
        padding: 10px;
        border-radius: 12px;
    }

    .partners-row .partner-card img {
        max-width: 100%;
        max-height: 58px;
    }
}

/* ---------- Bouton WhatsApp flottant (accueil) ---------- */
.wa-float {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 950;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-pink), var(--color-blue));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    translate: 0 20px;
    scale: 0.8;
    transition: opacity 0.6s ease, translate 0.8s var(--ease-slow), scale 0.8s var(--ease-back), visibility 0s linear 0.8s;
}

.wa-float svg {
    width: 28px;
    height: 28px;
    fill: var(--color-white);
}

.wa-float.is-shown {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    scale: 1;
    transition-delay: 0s;
}

.wa-float:hover {
    scale: 1.08;
}

.wa-float:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 4px;
}

html.menu-open .wa-float {
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .wa-float {
        transition: none;
    }
}