/* ============================================================
   AIKO GRAPHIC — Styles Globaux
   ============================================================ */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=Barlow:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* --- Variables --- */
:root {
    --clr-bg:        #000;
    --clr-bg-card:   #1c1c1c;
    --clr-bg-hover:  #242424;
    --clr-border:    #2a2a2a;
    --clr-text:      #e8e8e8;
    --clr-text-muted:#888888;
    --clr-accent:    #00e5ff;
    --clr-accent-dk: #00b8cc;
    --clr-yellow-1:  #fec931;
    --clr-yellow-2:  #FFBF00;

    --font-display:  'Space Grotesk', sans-serif;  /* logo + CTA */
    --font-nav:      'Inter', sans-serif;           /* liens nav */
    --font-body:     'Inter', sans-serif;           /* corps de texte */

    --nav-h:         60px;
    --radius:        6px;
    --transition:    .2s ease;

    --max-w:         100%;
    --pad-x:         clamp(1rem, 4vw, 3rem);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background: var(--clr-bg);
    color:       var(--clr-text);
    font-family: var(--font-body);
    font-size:   15px;
    line-height: 1.6;
    min-height:  100vh;
    display:     flex;
    flex-direction: column;
    padding-top: calc(var(--nav-h));
}

main { flex: 1; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6, .title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: bold !important;
}

/* ============================================================
   NAVBAR — Floating Glass
   ============================================================ */
.navbar {
    position:        fixed;
    top:             1rem;
    left:            1rem;
    right:           1rem;
    z-index:         100;
    height:          var(--nav-h);

    background:      rgba(9, 9, 11, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-radius:   18px;
    border:          0.5px solid rgba(0, 229, 255, 0.18);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        inset 0 0 0 0.5px rgba(0, 229, 255, 0.06),
        inset 0 1px 0   rgba(255, 255, 255, 0.05);
}

/* Reflet interne subtil */
.navbar::before {
    content:      '';
    position:     absolute;
    inset:        0;
    border-radius: 18px;
    background:   linear-gradient(
        135deg,
        rgba(0, 229, 255, 0.05) 0%,
        transparent             50%
    );
    pointer-events: none;
}

.navbar__inner {
    max-width:   var(--max-w);
    margin:      0 auto;
    padding:     0 var(--pad-x);
    height:      100%;
    display:     grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap:         1rem;
}

/* Logo */
.navbar__logo {
    font-family:    var(--font-display);
    font-weight:    700;
    font-size:      15px;
    text-transform: uppercase;
    white-space:    nowrap;
    flex-shrink:    0;
    color:          var(--clr-text);
}
.navbar__logo span { color: var(--clr-accent); }

/* Séparateur logo / nav */
.navbar__divider {
    width:      0.5px;
    height:     20px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* Nav links */
.navbar__nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar__nav ul {
    display: flex;
    gap:     .15rem;
}

.navbar__link {
    font-family:    var(--font-nav);
    font-weight:    500;
    text-transform: uppercase;
    font-size:      .78rem;
    letter-spacing: .06em;
    padding:        .4rem .8rem;
    border-radius:  10px;
    color:          rgba(255, 255, 255, 0.45);
    transition:     color var(--transition), background var(--transition), transform var(--transition);
}

.navbar__link:hover {
    color:       rgba(255, 255, 255, 0.9);
    background:  rgba(255, 255, 255, 0.06);
    transform:   translateY(-1px);
}
.navbar__link:active { transform: scale(0.95); }

.navbar__link--active {
    color:    var(--clr-accent);
    position: relative;
}

.navbar__link--active::after {
    content:   '';
    position:  absolute;
    bottom:    0px;
    left:      50%;
    transform: translateX(-50%);
    width:     16px;
    height:    2px;
    background:  var(--clr-accent);
    box-shadow:  0 0 8px rgba(0, 229, 255, .7);
    border-radius: 2px;
}

/* CTA — poussé à droite par le grid */
.btn--cta {
    font-family:    var(--font-display);
    text-transform: uppercase;
    font-weight:    700;
    font-size:      .72rem;
    letter-spacing: .06em;
    white-space:    nowrap;
    flex-shrink:    0;
    padding:        .48rem 1.2rem;
    border:         none;
    border-radius:  999px;
    background:     linear-gradient(135deg, var(--clr-accent), #00b8d4);
    color:          #050a0a;
    cursor:         pointer;
    box-shadow:     0 0 20px rgba(0, 229, 255, .25);
    transition:     transform var(--transition), box-shadow var(--transition);
    justify-self:   end;
}

.btn--cta:hover {
    transform:  scale(1.04) translateY(-1px);
    box-shadow: 0 4px 28px rgba(0, 229, 255, .45);
}
.btn--cta:active { transform: scale(0.98); }

/* ============================================================
   SPIN-BTN — Bouton animé (conic-gradient tournant)
   Utilisé sur toutes les pages via navbar + CTAs
   ============================================================ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Wrapper principal */
.spin-btn {
    position:       relative;
    display:        inline-flex;
    overflow:       hidden;
    border-radius:  7px;
    padding:        1.5px;
    background:     transparent;
    border:         none;
    cursor:         pointer;
    text-decoration: none;
    flex-shrink:    0;
}

/* Bordure conic-gradient animée */
.spin-btn::before {
    content:  '';
    position: absolute;
    inset:    -1000%;
    animation: spin 2.5s linear infinite;
}

.spin-btn.btn-cyan::before {
    background: conic-gradient(
        from 90deg at 50% 50%,
        #C3F5FF 0%,
        #00c8e0 30%,
        #005a66 60%,
        #00E5FF 100%
    );
}

.spin-btn.btn-dark::before {
    background: conic-gradient(
        from 90deg at 50% 50%,
        rgba(255,255,255,0.6) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.5) 100%
    );
}

/* Face intérieure */
.spin-btn__inner {
    position:        relative;
    z-index:         1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    border-radius:   5.5px;
    padding:         14px 28px;
    font-family:     var(--font-display);
    font-size:       11px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.07em;
    white-space:     nowrap;
    transition:      transform 0.25s ease;
}

.spin-btn.btn-cyan .spin-btn__inner {
    background: linear-gradient(105.87deg, #C3F5FF 0%, #00E5FF 100%);
    color:      #005a66;
}

.spin-btn.btn-dark .spin-btn__inner {
    background: #0a0a0a;
    color:      #fff;
}

.spin-btn:hover .spin-btn__inner {
    transform: translateY(-2px);
}

/* ── Navbar spin-btn CTA override ── */
.nav-spin-cta {
    justify-self: end;
    border-radius: 999px !important;
}
.nav-spin-cta__inner {
    background: linear-gradient(135deg, var(--clr-accent), #00b8d4) !important;
    color: #050a0a !important;
    border-radius: 999px !important;
    padding: .48rem 1.2rem !important;
    font-size: .72rem !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
    box-shadow: 0 0 20px rgba(0, 229, 255, .25);
    transition: transform var(--transition), box-shadow var(--transition);
}

/* Groupe droite (CTA + burger) */
.navbar__right {
    display:         flex;
    align-items:     center;
    gap:             .75rem;
    justify-content: flex-end;
}

/* Burger — desktop hidden, mobile visible */
.navbar__burger {
    display:        none;
    flex-direction: column;
    gap:            5px;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        6px;
    flex-shrink:    0;
    position:       relative;
    z-index:        999;   /* au-dessus du menu panel */
}

.navbar__burger span {
    display:          block;
    width:            22px;
    height:           2px;
    background:       rgba(255,255,255,0.8);
    border-radius:    2px;
    transition:       transform .3s ease, opacity .3s ease;
    transform-origin: center;
}

/* X animation */
.navbar.is-open .navbar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar.is-open .navbar__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar.is-open .navbar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Menu mobile panel — attaché au <body> par JS ─── */
.nav-panel {
    position:        fixed;
    inset:           0;
    z-index:         998;
    background:      rgba(4, 4, 6, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             2.5rem;
    opacity:         0;
    visibility:      hidden;
    transition:      opacity .35s ease, visibility .35s ease;
    padding:         2rem;
}

.nav-panel.is-open {
    opacity:    1;
    visibility: visible;
}

.nav-panel__list {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .25rem;
    list-style:     none;
    padding:        0;
    margin:         0;
    width:          100%;
}

.nav-panel__link {
    display:        block;
    width:          100%;
    text-align:     center;
    font-family:    var(--font-nav);
    font-size:      1.3rem;
    font-weight:    600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.55);
    padding:        .9rem 1rem;
    border-radius:  10px;
    transition:     color .2s, background .2s;
    text-decoration: none;
}

.nav-panel__link:hover,
.nav-panel__link.is-active {
    color:      #fff;
    background: rgba(255,255,255,.07);
    transform:  translateX(8px);
}

.nav-panel__link.is-active {
    color: var(--clr-accent);
}

.nav-panel .btn--cta {
    font-size: .9rem;
    padding:   .75rem 2.5rem;
}

@media (max-width: 768px) {
    .navbar__burger { display: flex; }
    .navbar__nav { display: none; }
    .navbar__right .btn--cta { display: none; }
    .navbar__right .nav-spin-cta { display: none; }
    /* Mobile : grid → flex 2 colonnes (logo ∤ burger) */
    .navbar__inner {
        display: flex;
        justify-content: space-between;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    margin-top:       auto;
    background:       #09090B;
    padding:          3rem var(--pad-x) 2.5rem;
    position:         relative;
    z-index:          2;
}

.footer__inner {
    max-width: var(--max-w);
    margin:    0 auto;
    display:   grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:       2.5rem;
    align-items: start;
}

.footer__logo {
    font-family:    var(--font-display);
    font-weight:    700;
    font-size:      1rem;
    letter-spacing: .04em;
    margin-bottom:  .5rem;
}

.footer__copy {
    font-size:      .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--clr-text-muted);
}

.footer__heading {
    font-family:    var(--font-nav);
    font-weight:    600;
    font-size:      .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--clr-text);
    margin-bottom:  .85rem;
}

/* Social liens horizontaux */
.footer__links-inline {
    display:   flex;
    gap:       1.25rem;
    flex-wrap: wrap;
}

.footer__link {
    font-family:     var(--font-nav);
    font-weight:     500;
    font-size:       .78rem;
    letter-spacing:  .04em;
    color:           var(--clr-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--clr-accent-dk);
    transition: color var(--transition), text-decoration-color var(--transition), transform var(--transition);
    display: inline-block;
}

.footer__link:hover {
    color: var(--clr-accent);
    text-decoration-color: var(--clr-accent);
    transform: translateY(-2px);
}

.footer__text {
    font-family:    var(--font-nav);
    font-weight:    500;
    font-size:      .78rem;
    letter-spacing: .04em;
    color:          var(--clr-text-muted);
}

/* Status indicator */
.footer__status {
    display:        flex;
    align-items:    center;
    gap:            .5rem;
    font-family:    var(--font-nav);
    font-weight:    500;
    font-size:      .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--clr-text);
}

.footer__status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--status-color, #6b7280); 
    box-shadow: 0 0 0 0 var(--status-color, rgba(107, 114, 128, 0.4));
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0   var(--status-color); }
    70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0);  }
    100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);  }
}

/* ============================================================
   POPUP — Démarrer un Projet
   ============================================================ */
.popup-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         200;
    background:      rgba(0,0,0,.72);
    backdrop-filter: blur(8px);
    align-items:     center;
    justify-content: center;
    padding:         1rem;
}

.popup-overlay.is-open { display: flex; }

/* ── Propriété animable pour le conic-gradient ── */
@property --popup-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.popup {
    position: relative;
    background: rgba(12, 12, 14, 0.5);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 3.5rem 3rem;
    border-radius: 12px;
    /* PAS d'overflow:hidden sinon le ::before est rogné */
    max-width: 750px;
    width: 90%;
    box-shadow: 0 24px 60px rgba(0,0,0,.65);
}

/* ── Néon : 2 spots lumineux à 180° qui parcourent la bordure ── */
.popup::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 2px;
    border-radius: 13px;
    background: conic-gradient(
        from var(--popup-angle),
        /* Spot 1 — de 0° à 45° */
        transparent         0%,
        rgba(0,229,255,0.08) 3%,
        rgba(0,229,255,0.55) 8%,
        var(--clr-accent)   12.5%,
        rgba(0,229,255,0.55) 17%,
        rgba(0,229,255,0.08) 22%,
        transparent         25%,

        /* Vide jusqu'au spot 2 (180° = 50%) */
        transparent         50%,

        /* Spot 2 — de 180° à 225° */
        rgba(0,229,255,0.08) 53%,
        rgba(0,229,255,0.55) 58%,
        var(--clr-accent)   62.5%,
        rgba(0,229,255,0.55) 67%,
        rgba(0,229,255,0.08) 72%,
        transparent         75%,
        transparent         100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: popup-border-spin 7s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes popup-border-spin {
    to { --popup-angle: 360deg; }
}

/* ── Fond sombre pour masquer l'intérieur du conic ── */
.popup::after {
    content: "";
    position: absolute;
    inset: 1px;
    background: rgba(12, 12, 14, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 11px;
    z-index: 1;
    pointer-events: none;
}

.popup > * {
    position: relative;
    z-index: 2;
}


/* Fermer */
.popup__close {
    position:    absolute;
    top:         1.5rem;  /* ← AJUSTÉ pour le nouveau padding */
    right:       1.5rem;  /* ← AJUSTÉ pour le nouveau padding */
    background:  none;
    border:      none;
    color:       rgba(255,255,255,.3);
    font-size:   .85rem;
    cursor:      pointer;
    line-height: 1;
    transition:  color var(--transition);
    letter-spacing: .05em;
}
.popup__close:hover { color: var(--clr-text); }

/* Titre */
.popup__title {
    font-family:    var(--font-display);
    font-weight:    700;
    font-size:      clamp(1.8rem, 3.5vw, 2.4rem);  /* ← AUGMENTÉ */
    color:          var(--clr-text);
    line-height:    1.1;
    margin-bottom:  .5rem;  /* ← AUGMENTÉ */
    text-transform: none;
    letter-spacing: -.01em;
}

/* Eyebrow cyan sous le titre */
.popup__eyebrow {
    font-family:    var(--font-nav);
    font-weight:    600;
    font-size:      .7rem;  /* ← LÉGÈREMENT AUGMENTÉ */
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--clr-accent);
    margin-bottom:  2rem;  /* ← AUGMENTÉ */
}

/* Formulaire */
.popup__form { 
    display: flex; 
    flex-direction: column; 
    gap: 1.6rem;  /* ← AUGMENTÉ de 1.4rem à 1.6rem */
}

.popup__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;  /* ← AUGMENTÉ de 1.25rem à 1.5rem */
}

.popup__field {
    display:        flex;
    flex-direction: column;
    gap:            .5rem;  /* ← LÉGÈREMENT AUGMENTÉ */
}

/* Labels cyan */
.popup__field > label {
    font-family:    var(--font-nav);
    font-weight:    600;
    font-size:      .68rem;  /* ← AUGMENTÉ */
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--clr-accent);
}

/* Inputs & Textarea — bottom border only */
.popup__field input,
.popup__field textarea {
    background:    transparent;
    border:        none;
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
    color:         var(--clr-text);
    font-family:   var(--font-body);
    font-size:     .92rem;  /* ← AUGMENTÉ */
    padding:       .5rem 0;  /* ← AUGMENTÉ */
    outline:       none;
    transition:    border-color var(--transition);
    resize:        none;
}

.popup__field input:focus,
.popup__field textarea:focus {
    border-bottom-color: var(--clr-accent);
}

.popup__field input::placeholder,
.popup__field textarea::placeholder {
    color:   rgba(255,255,255,.25);
}

/* ============================================================
   CUSTOM SELECT
   ============================================================ */
.cselect {
    position: relative;
}

/* Trigger */
.cselect__trigger {
    width:          100%;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    background:     transparent;
    border:         none;
    border-bottom:  1px solid rgba(255,255,255,.12);
    border-radius:  0;
    color:          var(--clr-text);
    font-family:    var(--font-body);
    font-size:      .88rem;
    padding:        .45rem 0;
    cursor:         pointer;
    outline:        none;
    transition:     border-color var(--transition);
    text-align:     left;
}

.cselect__trigger:hover,
.cselect.is-open .cselect__trigger {
    border-bottom-color: var(--clr-accent);
}

.cselect__icon {
    width:      10px;
    height:     10px;
    flex-shrink: 0;
    color:      rgba(255,255,255,.35);
    transition: transform .22s ease, color .2s ease;
}

.cselect.is-open .cselect__icon {
    transform: rotate(180deg);
    color:     var(--clr-accent);
}

/* Dropdown list */
.cselect__list {
    position:      absolute;
    top:           calc(100% + 6px);
    left:          -1rem;
    right:         -1rem;
    z-index:       50;
    background:    #1a1b1e;
    border:        1px solid rgba(0, 229, 255, .15);
    border-radius: 8px;
    padding:       .4rem;
    list-style:    none;

    /* État fermé */
    opacity:        0;
    transform:      translateY(-6px);
    pointer-events: none;
    transition:     opacity .2s ease, transform .2s ease;

    box-shadow:
        0 8px 32px rgba(0,0,0,.5),
        0 0 0 1px rgba(0,229,255,.05),
        0 16px 40px rgba(0, 229, 255, .08);
}

/* État ouvert */
.cselect.is-open .cselect__list {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

/* Options */
.cselect__option {
    font-family:   var(--font-body);
    font-size:     .85rem;
    color:         rgba(255,255,255,.6);
    padding:       .55rem .75rem;
    border-radius: 5px;
    cursor:        pointer;
    transition:    background .15s ease, color .15s ease;
    display:       flex;
    align-items:   center;
    gap:           .6rem;
}

.cselect__option::before {
    content:      '';
    width:        5px;
    height:       5px;
    border-radius: 50%;
    background:   transparent;
    flex-shrink:  0;
    transition:   background .15s ease;
}

.cselect__option:hover {
    background: rgba(0, 229, 255, .07);
    color:      var(--clr-text);
}

.cselect__option:hover::before {
    background: rgba(0, 229, 255, .4);
}

.cselect__option--selected {
    color: var(--clr-accent);
}

.cselect__option--selected::before {
    background: var(--clr-accent);
    box-shadow: 0 0 6px var(--clr-accent);
}

/* ============================================================
   FOOTER POPUP
   ============================================================ */
.popup__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1.25rem;
    padding-top:     .25rem;
}

.popup__note {
    font-family: var(--font-body);
    font-size:   .73rem;
    color:       rgba(255,255,255,.3);
    line-height: 1.55;
    max-width:   200px;
}

.popup__footer .btn--cta {
    flex-shrink:    0;
    padding:        .7rem 1.5rem;
    font-size:      .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius:  999px;
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.container {
    max-width: var(--max-w);
    margin:    0 auto;
    padding:   0 var(--pad-x);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {

    /* Navbar mobile */
    .navbar__nav { display: none; }
    .navbar__right .btn--cta { display: none; }
    .navbar__right .nav-spin-cta { display: none; }

    .navbar__burger { display: flex; }

    /* Navbar ouverte */
    .navbar.is-open .navbar__nav {
        display:    flex;
        position:   fixed;
        inset:      var(--nav-h) 0 0 0;
        background: var(--clr-bg);
        padding:    2rem var(--pad-x);
        flex-direction: column;
    }

    .navbar.is-open .navbar__nav ul {
        flex-direction: column;
        gap: .5rem;
    }

    .navbar.is-open .navbar__link {
        font-size: 1.2rem;
        padding:   .6rem .5rem;
    }

    /* Footer mobile */
    .footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .popup {
        padding: 1.75rem 1.25rem 1.5rem;
    }

    .popup__row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .popup__footer {
        flex-direction: column;
        align-items:    flex-start;
    }

    .popup__footer .btn--cta {
        width: 100%;
        text-align: center;
    }

    .cselect__list {
        left: 0;
        right: 0;
    }
}

/* ============================================================
   RESPONSIVE MOBILE GLOBAL
   ============================================================ */
@media (max-width: 768px) {
    body { padding-top: 70px; }

    /* Navbar */
    .navbar {
        top: .5rem;
        left: .5rem;
        right: .5rem;
    }

    .navbar__nav  { display: none; }
    .navbar__burger { display: flex; }
    /* Masquer le CTA dans la div .navbar__right en mobile */
    .navbar__right .btn--cta { display: none; }

    /* Footer */
    .footer__inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Popup */
    .popup {
        width: 96%;
        padding: 2rem 1.25rem;
    }

    /* Portfolio header */
    .portfolio-header {
        padding: 2rem 1rem 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .portfolio-header__right { text-align: left; }

    /* Projects grid */
    .projects-grid {
        padding: 1.5rem 1rem;
        grid-template-columns: 1fr;
    }
    .project-card--large,
    .project-card--medium,
    .project-card--small,
    .project-card--cta { grid-column: span 1; }
}


/* ============================================================
   SCROLLBAR — Custom Style
   ============================================================ */

/* Pour les navigateurs WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--clr-bg, #000);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(0, 229, 255, 0.4) 0%,
        rgba(0, 184, 212, 0.3) 100%
    );
    border-radius: 10px;
    border: 2px solid var(--clr-bg, #000);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(0, 229, 255, 0.6) 0%,
        rgba(0, 184, 212, 0.5) 100%
    );
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(
        180deg,
        rgba(0, 229, 255, 0.8) 0%,
        rgba(0, 184, 212, 0.7) 100%
    );
}

/* Pour Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 229, 255, 0.4) var(--clr-bg, #000);
}

/* ═══════════════ LIGHTBOX IMAGE GLOBALE ═══════════════ */
.image-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    pointer-events: none; opacity: 0;
    transition: opacity .35s ease;
}
.image-lightbox.is-open {
    pointer-events: all; opacity: 1;
}
.il__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.il__btn {
    position: absolute; top: 1.5rem; z-index: 10;
    background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7); cursor: pointer;
    transition: all .2s ease;
}
.il__btn:hover {
    color: #fff; background: rgba(0,0,0,.8); border-color: rgba(255,255,255,.5);
    transform: scale(1.05);
}
.il__btn--close { right: 1.5rem; }
.il__btn--fs { right: 5rem; }

.il__content {
    position: relative; z-index: 1;
    max-width: 100%; max-height: 100%;
    transform: scale(.95);
    transition: transform .4s cubic-bezier(.22,.68,0,1.2);
}
.image-lightbox.is-open .il__content {
    transform: scale(1);
}
.il__content img {
    max-width: 90vw; max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,.8);
    display: block;
}

/* ============================================================
   ANIMATIONS D'APPARITION GLOBALES — Scroll Reveal
   ============================================================ */

/* ── Base : état caché avant révélation ── */
[data-reveal] {
    opacity: 0;
    transition-property: opacity, transform, filter;
    transition-timing-function: cubic-bezier(0.22, 0.68, 0, 1.2);
    transition-duration: 0.75s;
    will-change: opacity, transform;
}

/* ── Variantes d'entrée ── */
[data-reveal="up"]    { transform: translateY(36px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="fade"]  { }
[data-reveal="scale"] { transform: scale(0.9); }
[data-reveal="blur"]  { transform: translateY(20px); filter: blur(8px); }

/* ── État visible (ajouté par JS) ── */
[data-reveal].is-revealed {
    opacity:   1;
    transform: none;
    filter:    none;
}

/* ── Délais configurables ── */
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="500"] { transition-delay: 0.50s; }
[data-delay="600"] { transition-delay: 0.60s; }

/* ── Animation d'entrée de page (header/hero) ── */
@keyframes pageSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageSlideLeft {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.anim-page-up {
    animation: pageSlideUp 0.85s cubic-bezier(0.22, 0.68, 0, 1.1) forwards;
    opacity: 0;
}
.anim-page-left {
    animation: pageSlideLeft 0.85s cubic-bezier(0.22, 0.68, 0, 1.1) forwards;
    opacity: 0;
}
.anim-page-fade {
    animation: pageFadeIn 0.9s ease forwards;
    opacity: 0;
}