/* ==========================================================
     1. TOKENS
     ========================================================== */
  :root{
    --color-accent: #B09862;
    --color-accent-light: #CBB78C;
    --color-accent-rgb: 176, 152, 98;
    --color-night: #041C2C;
    --color-night-2: #071f30;
    --color-night-3: #0c2c40;
    --color-text: #F2EFE9;
    --color-text-muted: #A7B4BC;
    --shadow-dark: rgba(0,0,0,0.6);
    --shadow-light: rgba(255,255,255,0.045);

    --radius-md: 14px;
    --radius-lg: 18px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }

  body{
    font-family:'Oxygen', sans-serif;
    background: var(--color-night);
    color: var(--color-text);
    min-height: 100vh;
    padding-bottom: 168px;
    position: relative;
  }

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

  /* ==========================================================
     2. FOND ANIMÉ — courbes topographiques (.topo-bg)
     canvas fixe en z-index négatif, tout le reste peint par-dessus
     ========================================================== */
  .topo-bg{
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    display:block;
  }

  /* ==========================================================
     3. CURSEUR CUSTOM
     ========================================================== */
  .cursor__dot, .cursor__ring{
    position: fixed; top:0; left:0;
    pointer-events:none; border-radius:50%; z-index: 999;
    transform: translate(-50%,-50%);
  }
  .cursor__dot{ width:6px; height:6px; background: var(--color-accent-light); transition: opacity 0.2s ease; }
  .cursor__ring{
    width:34px; height:34px;
    border:1px solid rgba(var(--color-accent-rgb),0.55);
    transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease;
  }
  .cursor__ring--hover{
    width:56px; height:56px;
    border-color: rgba(var(--color-accent-rgb),0.9);
    background: rgba(var(--color-accent-rgb),0.08);
  }
  @media (pointer:coarse){ .cursor__dot, .cursor__ring{ display:none; } }

  /* filet de securite : tous les elements du site utilisent "cursor:none" pour
     laisser place au curseur personnalise (rond + anneau). Si ce curseur ne
     s'active pas (JS non execute, pointeur non détecté comme "fin"...), la
     classe .has-custom-cursor n'est jamais ajoutee sur <html> — dans ce cas
     on force le curseur natif partout, pour ne jamais se retrouver avec un
     pointeur invisible au survol.
     */
  html:not(.has-custom-cursor) *{ cursor: auto !important; }
  html:not(.has-custom-cursor) a,
  html:not(.has-custom-cursor) button,
  html:not(.has-custom-cursor) .bento__card,
  html:not(.has-custom-cursor) .case-card,
  html:not(.has-custom-cursor) .certs__item{ cursor: pointer !important; }

  /* ==========================================================
     4. SÉLECTEUR DE LANGUE
     ========================================================== */
  .langsw{
    position: fixed; top: var(--space-5); right: var(--space-5); z-index: 60;
    display:flex; align-items:center;
    background: linear-gradient(145deg, var(--color-night-3), var(--color-night-2));
    border-radius: 999px;
    padding: var(--space-1);
    box-shadow: 5px 5px 12px var(--shadow-dark), -4px -4px 8px var(--shadow-light), 0 0 0 1px rgba(167,180,188,0.08);
  }
  .langsw__btn{
    border:none; background:none; cursor:none;
    font-family:'Oxygen', sans-serif;
    font-size: 14px; letter-spacing: 0.06em;
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    transition: color 0.25s ease, background 0.25s ease;
  }
  .langsw__btn--active{
    color: var(--color-night);
    background: linear-gradient(145deg, var(--color-accent-light), var(--color-accent));
  }

  /* ==========================================================
     5. TYPOGRAPHIE PARTAGÉE
     ========================================================== */
  .eyebrow{
    font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-accent-light);
    margin-bottom: var(--space-4);
  }
  .heading-lg{
    font-weight: 300;
    font-size: clamp(32px, 5.5vw, 53px);
    line-height: 1.18;
    letter-spacing: -0.01em;
  }
  .heading-lg em{ font-style:normal; color: var(--color-accent-light); font-weight:400; }
  .text-body{
    color: var(--color-text-muted);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.75;
  }

  /* ==========================================================
     6. HERO
     ========================================================== */
  .hero{
    position:relative;
    min-height: 86vh;
    display:flex;
    align-items:center;
    padding: var(--space-6) clamp(1.2rem, 5vw, 3rem);
    overflow:hidden;
  }
  .hero__mountain-canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; }
  .hero__mountain-fallback{
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(circle at 66% 70%, rgba(var(--color-accent-rgb),0.30), transparent 45%),
      linear-gradient(180deg, #041C2C 0%, #0c2c40 45%, #3a2f4a 72%, var(--color-accent) 100%);
  }
  .hero::after{
    content:"";
    position:absolute; inset:0; z-index:0;
    pointer-events:none;
    background: linear-gradient(180deg, rgba(4,28,44,0.25) 0%, rgba(4,28,44,0.7) 75%, var(--color-night) 100%);
  }
  .hero__content{ position:relative; z-index:1; max-width: 640px; }
  .hero__title{ margin-bottom: var(--space-5); }
  .hero__subtitle{ max-width: 46ch; margin-bottom: var(--space-6); }

  .btn{
    display:inline-flex; align-items:center; gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, var(--color-night-3), var(--color-night-2));
    box-shadow: 6px 6px 14px var(--shadow-dark), -5px -5px 10px var(--shadow-light), 0 0 0 1px rgba(var(--color-accent-rgb),0.35);
    color: var(--color-text);
    font-family:'Oxygen', sans-serif;
    font-size: 16px; letter-spacing: 0.03em;
    border:none; cursor:none;
    transition: box-shadow 0.3s ease, transform 0.15s ease;
  }
  .btn:hover{ box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 6px var(--shadow-light), 0 0 0 1px rgba(var(--color-accent-rgb),0.6); }
  .btn:active{ transform: scale(0.97); }
  .btn__arrow{ color: var(--color-accent-light); }

  /* ==========================================================
     7. SECTION générique
     ========================================================== */
  .section{ position:relative; padding: var(--space-8) clamp(1.2rem, 5vw, 3rem); max-width: 1080px; margin:0 auto; }
  .section__head{ margin-bottom: var(--space-6); }
  .section__head .eyebrow{ margin-bottom: var(--space-2); }
  .section__head h2{ font-weight:400; font-size: clamp(25px,3.4vw,34px); letter-spacing:-0.01em; }

  /* ==========================================================
     8. BENTO
     ========================================================== */
  .bento__grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(200px, auto);
    grid-auto-flow: dense;
    gap: var(--space-5);
  }

  .bento__card{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    background: linear-gradient(155deg, var(--color-night-3), var(--color-night-2));
    border: 1px solid rgba(167,180,188,0.10);
    box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease, border-color 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
    cursor: none;
  }
  /* effet spotlight : quand une carte grossit et deborde sur ses voisines,
     celles-ci s'estompent legerement — le debordement se lit comme un choix
     de mise en scene, plus jamais comme une bordure qui "tranche" un texte */
  .bento__grid.is-hovering .bento__card:not(:hover){
    opacity: 0.55;
    filter: saturate(0.7) blur(0.5px);
  }
  .bento__card::before{
    content:"";
    position:absolute; inset:0; opacity:0;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(var(--color-accent-rgb),0.24), transparent 70%);
    transition: opacity 0.6s ease;
    pointer-events:none;
  }
  .bento__card:hover::before{ opacity:1; }
  .bento__card:hover{
    transform: scale(1.14);
    z-index: 30;
    overflow: visible;
    border-color: rgba(var(--color-accent-rgb),0.55);
    box-shadow: 16px 16px 32px var(--shadow-dark), -12px -12px 22px var(--shadow-light), 0 0 0 1px rgba(var(--color-accent-rgb),0.4);
  }
  /* la carte "avale" son coin de jonction pour que le panneau supplementaire
     lise comme un simple prolongement d'elle-meme, pas comme un second bloc */
  .bento__card:hover:has(.bento__more--down){ border-bottom-left-radius:0; border-bottom-right-radius:0; }
  .bento__card:hover:has(.bento__more--up){ border-top-left-radius:0; border-top-right-radius:0; }
  .bento__card--large{ grid-column: span 3; grid-row: span 2; }
  .bento__card--medium{ grid-column: span 2; grid-row: span 1; }

  /* panneau d'info complementaire — hors flux (position:absolute), donc ne
     modifie jamais la taille de la carte ni de la grille au repos ; accole
     directement au bord de la carte (meme fond, meme bordure sur 3 cotes,
     coin de jonction carre) pour lire comme UN SEUL bloc qui grandit,
     jamais comme une zone distincte */
  .bento__more{
    position:absolute; left:0; right:0;
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(155deg, var(--color-night-3), var(--color-night-2));
    border: 1px solid rgba(var(--color-accent-rgb),0.55);
    font-size: 14.5px;
    color: var(--color-text-muted);
    line-height: 1.6;
    opacity: 0;
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
    pointer-events: none;
    z-index: 5;
  }
  .bento__more--down{
    top: 100%; margin-top: -2px; transform: translateY(-8px);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .bento__more--up{
    bottom: 100%; margin-bottom: -2px; transform: translateY(8px);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .bento__card:hover .bento__more{ opacity: 1; transform: translateY(0); pointer-events: auto; }

  .bento__head{ display:flex; align-items:center; flex-wrap:wrap; gap: var(--space-2) var(--space-3); }
  .bento__level{ opacity: 0.75; }

  /* photo en fond de carte, sous le contenu — la disposition texte/icone
     ne change pas d'un pixel, l'image est juste posee derriere */
  .bento__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; }
  .bento__bg img{ width:100%; height:100%; object-fit:cover; }
  .bento__bg::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(155deg, var(--color-night-3), var(--color-night-2));
    opacity: 0.86;
  }
  .bento__dot{ z-index:2; }
  .bento__head, .bento__body, .bento__cta{ position:relative; z-index:2; }
  .bento__icon{ width: 24px; height: 24px; display:inline-flex; align-items:center; justify-content:center; color: var(--color-accent-light); flex-shrink:0; }
  .bento__icon svg{ width:100%; height:100%; }
  .bento__card--large .bento__icon{ width: 30px; height: 30px; }

  .bento__tag{
    display:inline-block;
    font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-accent-light);
    font-weight: 400;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb),0.14);
    border: 1px solid rgba(var(--color-accent-rgb),0.32);
    width: fit-content;
  }

  .bento__body{ flex:1; display:flex; flex-direction:column; gap: var(--space-2); }
  .bento__level{
    font-size: 12px; letter-spacing: 0.08em;
    color: var(--color-text-muted);
    font-weight: 300; font-style: italic;
  }
  .bento__title{ font-weight: 400; font-size: 20.5px; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text); }
  .bento__card--medium .bento__title{ font-size: 24px; }
  .bento__card--large .bento__title{ font-size: 28.5px; max-width: 14ch; }
  .bento__text{ font-weight: 300; font-size: 15.5px; color: var(--color-text-muted); line-height: 1.6; max-width: 36ch; }

  .bento__cta{
    display:inline-flex; align-items:center; gap: var(--space-2);
    font-size: 14.5px; font-weight:400;
    color: var(--color-text-muted);
    opacity:0; transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease, color 0.3s ease;
    margin-top: auto;
    padding-top: var(--space-2);
  }
  .bento__card:hover .bento__cta{ opacity:1; transform:translateY(0); color: var(--color-accent-light); }
  .bento__cta-arrow{ transition: transform 0.3s ease; }
  .bento__card:hover .bento__cta-arrow{ transform: translateX(3px); }

  .bento__dot{
    position:absolute; top: var(--space-5); right: var(--space-5);
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-accent-light);
    box-shadow: 0 0 12px 2px rgba(var(--color-accent-rgb),0.55);
  }

  /* ==========================================================
     9. SEO — texte + photo
     ========================================================== */
  .seo__grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items:center; }
  .seo__text{ display:flex; flex-direction:column; gap: var(--space-4); }
  .seo__text strong{ color: var(--color-text); font-weight:400; }
  .seo__photo{
    border-radius: var(--radius-lg); overflow:hidden;
    border: 1px solid rgba(167,180,188,0.12);
    box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
    aspect-ratio: 4/3;
  }
  .seo__photo img{ width:100%; height:100%; object-fit:cover; }

  /* ==========================================================
     10. CERTIFICATIONS
     ========================================================== */
  .certs__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .certs__item{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-lg);
    background: linear-gradient(155deg, var(--color-night-3), var(--color-night-2));
    border: 1px solid rgba(167,180,188,0.10);
    box-shadow: 6px 6px 14px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    transition: border-color 0.35s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
    cursor: none;
  }
  .certs__item:hover{ transform: translateY(-3px); border-color: rgba(var(--color-accent-rgb),0.5); }
  .certs__icon{
    width: 44px; height: 44px;
    display:flex; align-items:center; justify-content:center;
    font-size: 23px;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb),0.14);
    border: 1px solid rgba(var(--color-accent-rgb),0.32);
  }
  .certs__icon img{ display:block; }
  .certs__name{ font-size: 15.5px; font-weight:400; color: var(--color-text); line-height:1.4; }
  .certs__issuer{ font-size: 13px; color: var(--color-text-muted); font-weight:300; }
  .certs__desc{ font-size: 13px; color: var(--color-text-muted); font-weight:300; line-height:1.5; margin-top: -4px; }

  /* ==========================================================
     10bis. MARQUEE — bandeau de logos partenaires, défilement continu
     ========================================================== */
  .marquee{
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--space-6) 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .marquee__track{
    display:flex;
    align-items:center;
    gap: var(--space-5);
    width: max-content;
    animation: marquee-scroll 36s linear infinite;
  }
  .marquee:hover .marquee__track{ animation-play-state: paused; }
  @keyframes marquee-scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  .marquee__logo{
    flex: 0 0 auto;
    display:flex; align-items:center; justify-content:center;
    width: 192px; height: 126px;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: #FFFFFF;
    box-shadow: 6px 6px 14px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
    font-family:'Oxygen', sans-serif;
    font-size: 19.5px; font-weight: 400; letter-spacing: 0.01em;
    text-align:center; line-height:1.25;
    color: var(--color-night);
    white-space: normal;
    opacity: 0.9;
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .marquee__logo:hover{ opacity: 1; transform: translateY(-2px); color: var(--color-night); }
  .marquee__logo img{ max-width: 84%; max-height: 78%; object-fit: contain; }
  @media (prefers-reduced-motion: reduce){
    .marquee__track{ animation: none; }
  }

  /* ==========================================================
     11. QBAR — barre de question, repensée pour être bien plus visible
     panneau plein (plus de fondu), bordure haute accent, label au-dessus
     ========================================================== */
  .qbar{
    position: fixed; left:0; right:0; bottom:0; z-index: 50;
    padding: var(--space-5) clamp(1rem, 4vw, 2rem) var(--space-4);
    background: var(--color-night-2);
    border-top: 1px solid rgba(var(--color-accent-rgb),0.4);
    box-shadow: 0 -12px 30px rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
  }
  .qbar__inner{ max-width: 720px; margin:0 auto; display:flex; flex-direction:column; gap: var(--space-3); }

  .qbar__label{
    display:flex; align-items:center; gap: var(--space-2);
    font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-accent-light);
    font-weight: 400;
  }
  .qbar__label-dot{
    width:6px; height:6px; border-radius:50%;
    background: var(--color-accent-light);
    box-shadow: 0 0 8px 2px rgba(var(--color-accent-rgb),0.7);
  }

  .qbar__answer{
    display:none;
    padding: var(--space-4);
    border-radius: 12px;
    background: var(--color-night-3);
    border: 1px solid rgba(var(--color-accent-rgb),0.35);
    font-size: 15.5px;
    color: var(--color-text-muted);
    line-height:1.5;
  }
  .qbar__answer--show{ display:block; }
  .qbar__answer a{ color: var(--color-accent-light); text-decoration: underline; text-underline-offset: 2px; }

  .qbar__form{
    display:flex; align-items:center; gap: var(--space-3);
    background: var(--color-night-3);
    border-radius: 999px;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    box-shadow: 0 0 0 1.5px rgba(var(--color-accent-rgb),0.5), 6px 6px 14px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    transition: box-shadow 0.3s ease;
  }
  .qbar__form:focus-within{ box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb),0.85), 0 0 16px rgba(var(--color-accent-rgb),0.25); }
  .qbar__input{
    flex:1; background:none; border:none; outline:none;
    color: var(--color-text); font-family:'Oxygen', sans-serif; font-size: 18px; font-weight: 300;
  }
  .qbar__input::placeholder{ color: var(--color-text-muted); }
  .qbar__submit{
    flex-shrink:0; width: 42px; height:42px; border-radius:50%;
    border:none; cursor:none;
    background: linear-gradient(145deg, var(--color-accent-light), var(--color-accent));
    color: var(--color-night); font-size: 19.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    transition: transform 0.15s ease;
  }
  .qbar__submit:active{ transform: scale(0.9); }

  .qbar__suggestions{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
  .qbar__suggestion{
    font-family:'Oxygen', sans-serif;
    font-size: 12.5px;
    color: var(--color-text-muted);
    background: rgba(var(--color-accent-rgb),0.08);
    border: 1px solid rgba(var(--color-accent-rgb),0.22);
    border-radius: 999px;
    padding: var(--space-1) var(--space-4);
    cursor: none;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  }
  .qbar__suggestion:hover{
    color: var(--color-accent-light);
    border-color: rgba(var(--color-accent-rgb),0.5);
    background: rgba(var(--color-accent-rgb),0.14);
  }

  .qbar__nav{ display:flex; align-items:center; justify-content:center; gap: var(--space-6); }
  .qbar__nav a{
    display:inline-flex; align-items:center; gap: var(--space-1);
    font-size: 14.5px; letter-spacing: 0.05em; color: var(--color-text-muted);
    padding: var(--space-1) 0; border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .qbar__nav a:hover{ color: var(--color-accent-light); border-color: rgba(var(--color-accent-rgb),0.5); }
  .qbar__nav svg{ width:13px; height:13px; fill: currentColor; }

  /* ==========================================================
     12bis. EN-TÊTE DE SOUS-PAGE — .pagehead (remplace le hero plein écran
     sur les pages secondaires : plus court, même esprit visuel)
     ========================================================== */
  .pagehead{
    position:relative;
    padding: calc(var(--space-9) + var(--space-5)) clamp(1.2rem, 5vw, 3rem) var(--space-7);
    max-width: 1080px; margin: 0 auto;
  }
  .pagehead__title{ margin-bottom: var(--space-4); max-width: 20ch; }
  .pagehead__subtitle{ max-width: 56ch; }

  /* ==========================================================
     13. CASE CARDS — grille masonry de projets (page Projets)
     colonnes CSS plutot que grid : chaque carte garde sa hauteur
     naturelle (variable selon le format de vignette), donc les
     cartes s'empilent en cascade plutot qu'en rangees figees
     ========================================================== */
  .cases__grid{
    column-count: 3;
    column-gap: var(--space-5);
  }
  .case-card{
    position:relative;
    display:flex; flex-direction:column; gap: var(--space-3);
    width:100%;
    break-inside: avoid;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    background: linear-gradient(155deg, var(--color-night-3), var(--color-night-2));
    border: 1px solid rgba(167,180,188,0.10);
    box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
    overflow:hidden;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease, box-shadow 0.5s ease;
    cursor:none;
  }
  .case-card:hover{
    transform: translateY(-4px);
    border-color: rgba(var(--color-accent-rgb),0.5);
    box-shadow: 12px 12px 26px var(--shadow-dark), -9px -9px 18px var(--shadow-light), 0 0 0 1px rgba(var(--color-accent-rgb),0.3);
  }
  .case-card__thumb{
    border-radius: var(--radius-md);
    aspect-ratio: 16/10; /* format par defaut, ecrase par les modificateurs ci-dessous */
    overflow:hidden;
    border: 1px solid rgba(167,180,188,0.12);
  }
  /* formats varies, repartis sur les cartes pour un vrai rendu masonry */
  .case-card__thumb--tall{ aspect-ratio: 3/4; }
  .case-card__thumb--square{ aspect-ratio: 1/1; }
  .case-card__thumb--wide{ aspect-ratio: 21/9; }
  .case-card__thumb--portrait{ aspect-ratio: 2/3; }
  .case-card__thumb img{ width:100%; height:100%; object-fit:cover; }
  .case-card__tag{
    display:inline-block; width:fit-content;
    font-size: 12.5px; letter-spacing: 0.14em; text-transform:uppercase;
    color: var(--color-accent-light);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb),0.14);
    border: 1px solid rgba(var(--color-accent-rgb),0.32);
  }
  .case-card__title{ font-size: 23px; font-weight:400; color: var(--color-text); letter-spacing:-0.01em; }
  .case-card__text{ font-size: 15.5px; color: var(--color-text-muted); line-height:1.6; }
  .case-card__meta{
    display:flex; gap: var(--space-4); margin-top: auto; padding-top: var(--space-3);
    border-top: 1px solid rgba(167,180,188,0.10);
    font-size: 13px; color: var(--color-text-muted);
  }
  .placeholder-note{
    font-size: 14px; color: var(--color-text-muted); font-style: italic;
    border: 1px dashed rgba(var(--color-accent-rgb),0.35);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
  }

  /* ==========================================================
     13septies. PAGE VIDÉO — accordéon horizontal (survol/clic
     pour agrandir), inspiré d'un pattern "image accordion" —
     evite tout probleme de sticky/scroll independant
     ========================================================== */
  .video-accordion{
    display:flex;
    align-items:center;
    gap: var(--space-3);
    overflow-x:auto;
    padding: var(--space-2) 0 var(--space-6);
  }
  .accordion-item{
    position:relative;
    flex: 0 0 56px;
    height: 400px;
    border-radius: var(--radius-lg);
    overflow:hidden;
    cursor:none;
    background: var(--color-night-3);
    border: 1px solid rgba(167,180,188,0.14);
    transition: flex-basis 0.6s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease;
  }
  .accordion-item.is-active{
    flex-basis: 340px;
    border-color: rgba(var(--color-accent-rgb),0.5);
  }
  .accordion-item img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
  }
  .accordion-item__overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 40%, rgba(4,28,44,0.9) 100%);
  }
  .accordion-item__title{
    position:absolute;
    color: var(--color-text);
    font-size: 14px; white-space:nowrap;
    left:50%; bottom: var(--space-5);
    transform: translateX(-50%) rotate(90deg);
    transform-origin: center;
    transition: transform 0.4s ease, bottom 0.4s ease;
  }
  .accordion-item.is-active .accordion-item__title{
    bottom: var(--space-4);
    transform: translateX(-50%) rotate(0deg);
    font-size: 15px;
  }
  @media (max-width: 700px){
    .accordion-item{ height: 260px; }
    .accordion-item.is-active{ flex-basis: 220px; }
  }

  /* panneau de detail sous l'accordeon, pour la video actuellement active */
  #videoDetails .video-detail{ display:flex; flex-direction:column; gap: var(--space-6); max-width: 720px; }
  @media (min-width: 700px){
    #videoDetails .video-detail{ flex-direction:row; align-items:flex-start; max-width:none; }
    #videoDetails .video-featured{ flex: 1.3; }
    #videoDetails .video-info{ flex:1; max-width: 340px; }
  }

  .video-featured{
    position:relative;
    width:100%;
    border-radius: var(--radius-lg);
    overflow:hidden;
    aspect-ratio: 16/9;
    border: 1px solid rgba(var(--color-accent-rgb),0.3);
    background: var(--color-night-3);
  }
  .video-featured img{ width:100%; height:100%; object-fit:cover; display:block; }
  .video-featured__corner{ position:absolute; width:22px; height:22px; color: var(--color-accent-light); pointer-events:none; }
  .video-featured__corner--tl{ top: var(--space-4); left: var(--space-4); border-top:2px solid; border-left:2px solid; border-color:currentColor; }
  .video-featured__corner--tr{ top: var(--space-4); right: var(--space-4); border-top:2px solid; border-right:2px solid; border-color:currentColor; }
  .video-featured__corner--bl{ bottom: var(--space-4); left: var(--space-4); border-bottom:2px solid; border-left:2px solid; border-color:currentColor; }
  .video-featured__corner--br{ bottom: var(--space-4); right: var(--space-4); border-bottom:2px solid; border-right:2px solid; border-color:currentColor; }
  .video-featured__overlay{
    position:absolute; top:0; left:0; right:0;
    padding: var(--space-5);
    background: linear-gradient(180deg, rgba(4,28,44,0.85), transparent);
  }
  .video-featured__play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:64px; height:64px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: rgba(4,28,44,0.55);
    border: 1.5px solid rgba(var(--color-accent-rgb),0.6);
    color: var(--color-accent-light);
    cursor:none;
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .video-featured__play:hover{ transform:translate(-50%,-50%) scale(1.08); background: rgba(4,28,44,0.75); }
  .video-featured__play svg{ width:26px; height:26px; margin-left:2px; }
  .video-featured__tag{
    font-size: 13px; letter-spacing:0.08em; color: var(--color-text);
  }
  .video-featured__tag span{ color: var(--color-accent-light); }
  .video-featured__type{ font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

  .video-info{ display:flex; flex-direction:column; gap: var(--space-5); }
  .video-info__title{ font-size: 22px; font-weight:400; color: var(--color-text); letter-spacing:-0.01em; line-height:1.25; }
  .video-info__field{ display:flex; flex-direction:column; gap: 2px; }
  .video-info__field .label{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--color-accent-light); }
  .video-info__field .value{ font-size: 14.5px; color: var(--color-text); }
  .video-info__desc{ color: var(--color-text-muted); font-size: 13.5px; line-height:1.75; font-weight:300; }

  .video-info__credits{ display:flex; flex-direction:column; gap: var(--space-2); }
  .video-info__credits li{
    display:flex; justify-content:space-between; gap: var(--space-3);
    font-size: 13px; padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(167,180,188,0.10);
  }
  .video-info__credits li span:first-child{ color: var(--color-text-muted); }
  .video-info__credits li span:last-child{ color: var(--color-text); text-align:right; }

  /* ==========================================================
     13quater. ARTICLES — page "Carnet de bord"
     ========================================================== */
  .articles-list{ display:flex; flex-direction:column; }
  .article-block{
    padding: var(--space-8) 0;
    border-bottom: 1px solid rgba(167,180,188,0.12);
  }
  .article-block:first-child{ padding-top: 0; }
  .article-block:last-child{ border-bottom: none; }
  .article-block__meta{ display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-3); }
  .article-block__tag{
    font-size: 12.5px; letter-spacing: 0.14em; text-transform:uppercase;
    color: var(--color-accent-light);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb),0.14);
    border: 1px solid rgba(var(--color-accent-rgb),0.32);
  }
  .article-block__date{ font-size: 13px; color: var(--color-text-muted); }
  .article-block__title{ font-weight:400; font-size: 26px; letter-spacing:-0.01em; color: var(--color-text); margin-bottom: var(--space-4); }
  .article-block__body p{ color: var(--color-text-muted); font-size: 15.5px; line-height:1.75; font-weight:300; margin-bottom: var(--space-4); }
  .article-block__body ol, .article-block__body ul{ color: var(--color-text-muted); font-size: 15.5px; line-height:1.75; font-weight:300; margin: 0 0 var(--space-4) var(--space-5); }
  .article-block__body strong{ color: var(--color-text); font-weight:400; }
  .article-block__note{
    font-size: 13.5px; color: var(--color-text-muted); font-style:italic;
    border-left: 2px solid rgba(var(--color-accent-rgb),0.4);
    padding-left: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .code-block{
    background: #05151f;
    border: 1px solid rgba(167,180,188,0.15);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    overflow-x: auto;
  }
  .code-block__filename{
    font-size: 11px; letter-spacing:0.06em; text-transform:uppercase;
    color: var(--color-accent-light);
    margin-bottom: var(--space-3);
    font-family: 'Oxygen', sans-serif;
  }
  .code-block pre{ margin:0; }
  .code-block code{
    font-family: 'SF Mono', 'Courier New', monospace;
    font-size: 13px; line-height:1.7;
    color: #cbd5df;
    white-space: pre;
  }

  /* ==========================================================
     13quinquies. CODE CARDS — bloc de code replie par defaut
     (details/summary natif), en colonnes type masonry, le texte
     complet ne s'affiche qu'au clic
     ========================================================== */
  .code-cards{
    column-count: 2;
    column-gap: var(--space-5);
    margin: var(--space-6) 0;
  }
  .code-card{
    break-inside: avoid;
    margin-bottom: var(--space-5);
    background: var(--color-night-3);
    border: 1px solid rgba(167,180,188,0.14);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
  }
  .code-card summary{
    list-style:none;
    cursor: none;
    display:flex; align-items:center; justify-content:space-between; gap: var(--space-3);
  }
  .code-card summary::-webkit-details-marker{ display:none; }
  .code-card summary::after{
    content:"+";
    flex-shrink:0;
    font-size: 20px; font-weight:300;
    color: var(--color-accent-light);
  }
  .code-card[open] summary::after{ content:"−"; }
  .code-card__label{ display:flex; flex-direction:column; gap: var(--space-1); }
  .code-card__lang{ font-size: 11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--color-accent-light); }
  .code-card__name{ font-size: 15px; color: var(--color-text); font-weight:400; }
  .code-card__preview{
    margin-top: var(--space-3);
    font-family: 'SF Mono', 'Courier New', monospace;
    font-size: 12px; color: var(--color-text-muted);
    white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .code-card[open] .code-card__preview{ display:none; }
  .code-card .code-block{ margin-top: var(--space-4); margin-bottom:0; }

  /* ==========================================================
     13sexies. DÉMO INTERACTIVE — grille reactive au survol
     (simulation reelle du code presente dans l'article)
     ========================================================== */
  .hey-demo{
    position:relative;
    background:#000;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(167,180,188,0.14);
    overflow:hidden;
    margin-bottom: var(--space-6);
    padding: var(--space-6) var(--space-5) var(--space-5);
  }
  .hey-demo__label{
    font-size: 11px; letter-spacing:0.1em; text-transform:uppercase;
    color: var(--color-accent-light);
    margin-bottom: var(--space-4);
  }
  .hey-demo__grid{
    --cols: 14; --rows: 6;
    display:grid;
    grid-template: repeat(var(--rows), 1fr) / repeat(var(--cols), 1fr);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 600;
    line-height: 1;
    height: 220px;
    touch-action: none;
  }
  .hey-demo__grid div{
    padding: 2px;
    opacity: calc(var(--opacity, 0.15) * 0.5);
    aspect-ratio: 1;
    display:grid; place-items:center;
    scale: 1.3;
    filter: grayscale(1);
    color: hsl(var(--hue, 20) 80% 60%);
    transition-property: opacity, rotate, filter;
    transition-duration: 0.8s, 0.4s, 0.6s;
    transition-timing-function: ease-in, ease-out, ease-out;
  }
  @media (hover:hover) and (pointer:fine){
    .hey-demo__grid div:hover{
      transition-duration: 0s;
      rotate: calc(var(--grade, 0) * 90deg);
      filter: grayscale(0) brightness(1.5);
      opacity: 1;
    }
  }
  .hey-demo__follow{
    position:absolute; top: var(--space-4); right: var(--space-4);
    color: var(--color-accent-light);
    width: 34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    opacity:0.85;
    cursor:none;
  }
  .hey-demo__follow:hover{ opacity:1; }
  .hey-demo__follow svg{ width:75%; }

  @media (max-width: 700px){
    .code-cards{ column-count: 1; }
  }

  /* ==========================================================
     13ter. FILTRES — tags cliquables au-dessus de la grille de projets
     ========================================================== */
  .filter-tags{ display:flex; flex-wrap:wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
  .filter-tag{
    font-family:'Oxygen', sans-serif;
    font-size: 15px; letter-spacing:0.03em;
    color: var(--color-text-muted);
    background: var(--color-night-3);
    border: 1px solid rgba(167,180,188,0.14);
    border-radius: 999px;
    padding: var(--space-2) var(--space-5);
    cursor: none;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  }
  .filter-tag:hover{ color: var(--color-text); border-color: rgba(var(--color-accent-rgb),0.35); }
  .filter-tag--active{
    color: var(--color-night);
    background: linear-gradient(145deg, var(--color-accent-light), var(--color-accent));
    border-color: transparent;
  }

  /* vignette "logo" (fond blanc) quand on n'a pas de vraie capture d'ecran du projet */
  .case-card__thumb--logo{
    background:#FFFFFF;
    display:flex; align-items:center; justify-content:center;
    padding: var(--space-6);
  }
  .case-card__thumb--logo img{ width:100%; height:100%; object-fit:contain; }

  /* ==========================================================
     13bis. FAQ — accordéon (details/summary natif : accessible,
     pas de JS necessaire, question visible, reponse au clic)
     ========================================================== */
  .faq-item{
    cursor: pointer;
  }
  .faq-item summary{
    list-style: none;
    cursor: none;
    display:flex; align-items:center; justify-content:space-between; gap: var(--space-4);
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+";
    flex-shrink:0;
    font-size: 23px; font-weight:300;
    color: var(--color-accent-light);
    transition: transform 0.3s ease;
  }
  .faq-item[open] summary::after{ content:"−"; }
  .faq-item .case-card__text{ margin-top: var(--space-3); }

  /* ==========================================================
     14. FORMULAIRE DE CONTACT — .form-field
     ========================================================== */
  .contact__grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items:start; }
  .form-field{ display:flex; flex-direction:column; gap: var(--space-2); margin-bottom: var(--space-5); }
  .form-field label{ font-size: 14px; letter-spacing:0.08em; text-transform:uppercase; color: var(--color-accent-light); }
  .form-field input, .form-field textarea{
    font-family:'Oxygen', sans-serif; font-size: 16.5px; color: var(--color-text);
    background: var(--color-night-3);
    border: 1px solid rgba(167,180,188,0.14);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    outline: none;
    box-shadow: inset 3px 3px 8px var(--shadow-dark), inset -2px -2px 6px var(--shadow-light);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    resize: vertical;
  }
  .form-field input:focus, .form-field textarea:focus{
    border-color: rgba(var(--color-accent-rgb),0.6);
    box-shadow: inset 3px 3px 8px var(--shadow-dark), inset -2px -2px 6px var(--shadow-light), 0 0 0 2px rgba(var(--color-accent-rgb),0.25);
  }
  .form-field input::placeholder, .form-field textarea::placeholder{ color: var(--color-text-muted); }
  .form-submit{
    display:inline-flex; align-items:center; gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, var(--color-accent-light), var(--color-accent));
    color: var(--color-night);
    font-family:'Oxygen', sans-serif; font-size: 16px; font-weight:400; letter-spacing:0.03em;
    border:none; cursor:none;
    box-shadow: 6px 6px 14px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    transition: transform 0.15s ease, box-shadow 0.3s ease;
  }
  .form-submit:hover{ box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 6px var(--shadow-light); }
  .form-submit:active{ transform: scale(0.97); }
  .contact__info{ display:flex; flex-direction:column; gap: var(--space-5); }
  .contact__info-block{ display:flex; flex-direction:column; gap: var(--space-1); }
  .contact__info-block .label{ font-size: 14px; letter-spacing:0.08em; text-transform:uppercase; color: var(--color-accent-light); }
  .contact__info-block a{ color: var(--color-text); text-decoration:none; }
  .contact__info-block a:hover{ color: var(--color-accent-light); }

  /* ==========================================================
     15. PAGES LÉGALES — typographie de contenu long
     ========================================================== */
  .legal{ max-width: 760px; margin: 0 auto; padding: calc(var(--space-9) + var(--space-5)) clamp(1.2rem, 5vw, 3rem) var(--space-8); }
  .legal h2{ font-weight:400; font-size: 23px; margin-top: var(--space-7); margin-bottom: var(--space-3); color: var(--color-text); }
  .legal h2:first-of-type{ margin-top: var(--space-5); }
  .legal p{ color: var(--color-text-muted); font-size: 16.5px; line-height:1.75; font-weight:300; margin-bottom: var(--space-4); }
  .legal ul{ color: var(--color-text-muted); font-size: 16.5px; line-height:1.75; font-weight:300; margin: 0 0 var(--space-4) var(--space-5); }
  .legal strong{ color: var(--color-text); font-weight:400; }
  .legal-updated{ font-size: 14px; color: var(--color-text-muted); font-style:italic; margin-bottom: var(--space-6); }

  /* ==========================================================
     16. PIED DE PAGE — liens légaux, discret, avant la qbar
     ========================================================== */
  .footer{
    max-width: 1080px; margin: 0 auto;
    padding: var(--space-6) clamp(1.2rem, 5vw, 3rem) var(--space-4);
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--space-3);
    border-top: 1px solid rgba(167,180,188,0.10);
  }
  .footer__copy{ font-size: 14px; color: var(--color-text-muted); }
  .footer__links{ display:flex; gap: var(--space-5); }
  .footer__links a{ font-size: 14px; color: var(--color-text-muted); text-decoration:none; }
  .footer__links a:hover{ color: var(--color-accent-light); }

  /* ==========================================================
     17bis. WIDGET DE CONTACT — onglet fixe sur le bord droit +
     popup (remplace la page contact dediee, pas de formulaire)
     ========================================================== */
  .contact-widget{
    position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 70;
    appearance: none; -webkit-appearance: none; text-align: left;
    display:flex; align-items:center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(145deg, var(--color-night-3), var(--color-night-2));
    border: 1px solid rgba(var(--color-accent-rgb),0.35);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    box-shadow: -6px 6px 16px var(--shadow-dark), -2px -2px 8px var(--shadow-light);
    color: var(--color-text);
    font-family:'Oxygen', sans-serif;
    font-size: 14px; letter-spacing: 0.03em;
    cursor: none;
    pointer-events: auto;
    transition: padding 0.25s ease, box-shadow 0.25s ease;
  }
  .contact-widget:hover{
    padding-right: var(--space-6);
    box-shadow: -8px 8px 20px var(--shadow-dark), -2px -2px 8px var(--shadow-light), 0 0 0 1px rgba(var(--color-accent-rgb),0.4);
  }
  .contact-widget svg{ width:18px; height:18px; color: var(--color-accent-light); flex-shrink:0; }

  .contact-popup{
    position: fixed; inset: 0; z-index: 90;
    display:none; align-items:center; justify-content:center;
    padding: var(--space-5);
  }
  .contact-popup.is-open{ display:flex; }
  .contact-popup__backdrop{
    position:absolute; inset:0;
    background: rgba(4,28,44,0.72);
    backdrop-filter: blur(5px);
  }
  .contact-popup__card{
    position:relative; z-index:1;
    width:100%; max-width: 380px;
    background: var(--color-night-2);
    border: 1px solid rgba(var(--color-accent-rgb),0.4);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-6) var(--space-6);
    box-shadow: 16px 16px 34px var(--shadow-dark), -10px -10px 20px var(--shadow-light);
    animation: contact-pop-in 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  @keyframes contact-pop-in{
    from{ opacity:0; transform: scale(0.94) translateY(8px); }
    to{ opacity:1; transform: scale(1) translateY(0); }
  }
  .contact-popup__close{
    position:absolute; top: var(--space-4); right: var(--space-4);
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: var(--color-night-3);
    border: 1px solid rgba(167,180,188,0.15);
    color: var(--color-text-muted);
    font-size: 18px; line-height:1;
    cursor:none;
  }
  .contact-popup__close:hover{ color: var(--color-accent-light); border-color: rgba(var(--color-accent-rgb),0.4); }
  .contact-popup__title{ font-weight:400; font-size: 21px; color: var(--color-text); margin: var(--space-2) 0 var(--space-5); letter-spacing:-0.01em; }
  .contact-popup__item{ display:flex; flex-direction:column; gap: var(--space-1); margin-bottom: var(--space-4); }
  .contact-popup__item .label{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color: var(--color-accent-light); }
  .contact-popup__item a, .contact-popup__item span{ color: var(--color-text); font-size: 15px; }
  .contact-popup__item a{ text-decoration:none; }
  .contact-popup__item a:hover{ color: var(--color-accent-light); }

  @media (max-width: 560px){
    .contact-widget span{ display:none; }
    .contact-widget{ padding: var(--space-3); }
    .contact-widget:hover{ padding-right: var(--space-3); }
  }
  /* ==========================================================
     18. RESPONSIVE
     ========================================================== */
  @media (max-width: 860px){
    .bento__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(190px, auto); }
    .bento__card--large{ grid-column: span 2; grid-row: span 1; }
    .bento__card--medium{ grid-column: span 2; grid-row: span 1; }
    .seo__grid{ grid-template-columns: 1fr; gap: var(--space-6); }
    .seo__photo{ order:-1; aspect-ratio: 16/9; }
    .certs__grid{ grid-template-columns: repeat(2, 1fr); }
    .cases__grid{ column-count: 2; }
    .contact__grid{ grid-template-columns: 1fr; }
  }

  @media (max-width: 560px){
    .hero{ min-height: 78vh; align-items:flex-end; padding-bottom: var(--space-7); }
    .bento__grid{ grid-template-columns: 1fr; grid-auto-rows: auto; }
    .bento__card--large{ grid-column: span 1; grid-row: span 1; }
    .bento__card--medium{ grid-column: span 1; }
    .cases__grid{ column-count: 1; }
    .qbar__form{ padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
    .qbar__nav{ gap: var(--space-5); flex-wrap:wrap; row-gap: var(--space-2); }
    .langsw{ top: var(--space-4); right: var(--space-4); }
    .footer{ flex-direction:column; align-items:flex-start; }
  }

  /* ==========================================================
     12ter. GRANDS ÉCRANS — au-dela de 1440px, les conteneurs a largeur
     fixe (1080px) laissaient trop de vide et la grille bento restait
     figee a 4 colonnes quel que soit l'espace disponible ; on etale
     un peu plus le contenu pour que la composition reste equilibree.
     ========================================================== */
  @media (min-width: 1440px){
    .section, .pagehead, .footer, .qbar__inner{ max-width: 1320px; }
    .bento__grid{ grid-template-columns: repeat(5, 1fr); }
    .bento__card--medium{ grid-column: span 2; grid-row: span 1; }
    .certs__grid{ grid-template-columns: repeat(3, 1fr); }
    .cases__grid{ column-count: 4; }
    .hero__content{ max-width: 720px; }
  }
  @media (min-width: 1920px){
    .section, .pagehead, .footer, .qbar__inner{ max-width: 1520px; }
    .bento__grid{ grid-template-columns: repeat(6, 1fr); }
  }


/* ============================================================
   SOUS-PAGES — même direction artistique que l'accueil :
   bleu nuit + doré, Oxygen, dock flottant, montagne 3D en fond
   ============================================================ */
:root{
  --paper:#041C2C; --paper-2:#071f30; --paper-3:#0c2c40;
  --ink:#F2EFE9; --ink-2:#A7B4BC; --line:rgba(167,180,188,.2);
  --gold:#B09862; --gold-d:#CBB78C; --gold-rgb:176,152,98;
  --serif:'Oxygen', system-ui, sans-serif;
  --mono:'Oxygen', system-ui, sans-serif;
  --sans:'Oxygen', system-ui, sans-serif;
  --pad:clamp(1.1rem, 4vw, 3.2rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
.mono{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:400; }
.brand{ position:fixed; top:var(--pad); left:var(--pad); z-index:70; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; }
.brand sup{ font-size:9px; margin-left:2px; }
.langs{ position:fixed; top:var(--pad); right:var(--pad); z-index:70; display:flex; gap:.45rem; align-items:center; font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.langs__btn{ letter-spacing:.08em; padding:.15rem .1rem; color:var(--ink-2); border-bottom:1px solid transparent; }
.langs__btn.is-on{ color:var(--ink); border-color:var(--gold); }
.dock{
  position:fixed; left:50%; bottom:calc(var(--pad) * .7); transform:translateX(-50%); z-index:80;
  display:flex; align-items:center; gap:1.1rem; padding:.45rem .5rem .45rem .5rem; border-radius:999px;
  background:rgba(7,31,48,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(242,239,233,.16), 0 0 0 1px rgba(242,239,233,.08);
}
.dock__menu{ width:46px; height:46px; border-radius:50%; display:grid; place-content:center; gap:6px; background:rgba(242,239,233,.06); transition:background .25s; }
.dock__menu:hover{ background:rgba(242,239,233,.12); }
.dock__menu i{ display:block; width:18px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease); }
.dock__menu[aria-expanded="true"] i:first-child{ transform:translateY(3.7px) rotate(45deg); }
.dock__menu[aria-expanded="true"] i:last-child{ transform:translateY(-3.7px) rotate(-45deg); }
.dock__logo{ font-family:var(--serif); font-size:24px; line-height:1; white-space:nowrap; }
.dock__logo em{ font-style:italic; color:var(--gold-d); margin-left:.25em; }
.dock__cta{
  display:flex; align-items:center; gap:.6rem; height:46px; padding:0 .55rem 0 1.3rem; border-radius:999px; white-space:nowrap;
  background:var(--gold); color:#041C2C; font-size:14px; font-weight:400; transition:background .25s;
}
.dock__cta b{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.2); font-weight:400; transition:transform .35s var(--ease); }
.dock__cta:hover{ background:var(--gold-d); }
.dock__cta:hover b{ transform:rotate(45deg); }
.menu{
  position:fixed; inset:0; z-index:75; background:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:var(--pad);
  clip-path:circle(0% at 50% 100%); visibility:hidden; transition:clip-path .7s var(--ease), visibility 0s .7s;
}
.menu.is-open{ clip-path:circle(150% at 50% 100%); visibility:visible; transition:clip-path .7s var(--ease), visibility 0s; }
.menu__list{ max-width:900px; margin:0 auto; width:100%; }
.menu__list a{ display:flex; align-items:baseline; gap:1.2rem; padding:.35rem 0; font-family:var(--serif); font-size:clamp(2.4rem,7vw,5.5rem); line-height:1.05; text-transform:uppercase; border-bottom:1px solid var(--line); transition:color .25s, padding-left .35s var(--ease); }
.menu__list a:hover{ color:var(--gold-d); padding-left:1rem; }
.menu__list i{ font-family:var(--mono); font-style:normal; font-size:12px; color:var(--ink-2); letter-spacing:.08em; }
.menu__foot{ max-width:900px; margin:2rem auto 0; width:100%; display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
body.menu-open{ overflow:hidden; }
.link-arrow{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:3px; transition:color .2s, border-color .2s; }
.link-arrow::after{ content:" ↗"; }
.link-arrow:hover{ color:var(--gold-d); border-color:var(--gold-d); }
.foot{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding:3rem var(--pad) calc(var(--pad) * 4); border-top:1px solid var(--line); background:var(--paper); font-size:14px; }
.foot__h{ color:var(--ink-2); margin-bottom:1rem; }
.foot li{ margin:.25rem 0; }
.foot li a:hover{ color:var(--gold-d); }
.foot i{ font-family:var(--mono); font-style:normal; font-size:11px; color:var(--ink-2); margin-right:.4rem; }
.foot__legal{ grid-column:1 / -1; color:var(--ink-2); }
.foot__legal a:hover{ color:var(--gold-d); }
.js .reveal{ opacity:0; transform:translateY(34px); }
@media (max-width:900px){.foot{ grid-template-columns:1fr 1fr; }}
@media (max-width:640px){.dock__logo{ display:none; }.foot{ grid-template-columns:1fr; }.menu__foot{ flex-direction:column; gap:.6rem; }}
@media (prefers-reduced-motion: reduce){.js .reveal{ opacity:1; transform:none; }}
.brand, .langs{ padding:.35rem .7rem; border-radius:999px; background:rgba(7,31,48,.8); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-shadow:none; }
.brand{ top:calc(var(--pad) - .35rem); left:calc(var(--pad) - .7rem); }
.langs{ top:calc(var(--pad) - .35rem); right:calc(var(--pad) - .7rem); }
.mono{ font-size:12px; letter-spacing:.18em; font-weight:400; }
.menu__list a{ font-family:var(--sans); text-transform:none; font-weight:300; font-size:clamp(2rem,5.5vw,4.4rem); letter-spacing:-.02em; }
.dock__logo{ font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:.02em; }
.dock__logo em{ font-style:normal; font-weight:300; color:var(--gold-d); }
.brand{ font-weight:700; }
.dock{ background:rgba(7,31,48,.82); box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(167,180,188,.14); }
.dock__menu{ background:rgba(242,239,233,.08); }
.brand, .langs{ background:rgba(7,31,48,.7); }
.link-arrow{ border-color:var(--gold); }
.foot{ background:rgba(4,28,44,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
body{ background:radial-gradient(1200px 800px at 75% 0%, #0c2c40 0%, #041C2C 62%) fixed; padding-bottom:120px; }
.topo-bg, .cursor__dot, .cursor__ring, .qbar, .contact-widget, .contact-popup, .langsw{ display:none !important; }
.mountain-fixed{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; display:block; opacity:.42; }
.pagehead, .section, .foot, .video-slider, main{ position:relative; z-index:1; }
.pagehead__title{ font-weight:300; letter-spacing:-.025em; line-height:1.04; }
.pagehead{ padding-top:calc(var(--pad) * 3.2 + 3rem); }
.eyebrow{ letter-spacing:.18em; }
.foot{ background:rgba(4,28,44,.55); position:relative; z-index:1; margin-top:var(--space-8); }
body{ cursor:auto; } a, button{ cursor:pointer; }
@media (max-width:900px){ .mountain-fixed{ opacity:.3; } }
.langs__btn{ background:none; border:0; font:inherit; font-size:12px; }
.dock__menu, .dock__cta{ border:0; }
.dock__menu{ background:rgba(242,239,233,.08); }
.brand, .langs{ transition:transform .35s var(--ease), opacity .35s; }
body.ui-hide .brand, body.ui-hide .langs{ transform:translateY(-140%); opacity:0; pointer-events:none; }

.menu{ overflow-y:auto; justify-content:flex-start; padding-top:clamp(4.5rem,10vh,7rem); padding-bottom:7rem; }
.menu__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.5rem,4vw,4rem); max-width:1100px; }
.menu__list a{ font-size:clamp(1.5rem,3.2vw,2.8rem); padding:.5rem 0; }
.menu__foot{ max-width:1100px; } .menu__mail{ letter-spacing:.08em; }
@media (max-width:700px){ .menu__list{ grid-template-columns:1fr; } .menu__list a{ font-size:clamp(1.4rem,6vw,2rem); padding:.35rem 0; } }
.menu__list, .foot ul{ list-style:none; padding:0; margin-left:0; }
.menu{ justify-content:safe center; }
.menu__list{ margin:0 auto; width:100%; }

/* liens vers le glossaire : discrets, en pointillés dorés */
a.gloss{ color:inherit; text-decoration:none; border-bottom:1px dotted var(--gold, #B09862); transition:color .2s, border-color .2s; cursor:help; }
a.gloss:hover, a.gloss:focus-visible{ color:var(--gold-d, #CBB78C); border-bottom-style:solid; }
/* ancres du glossaire : décalage sous l'UI fixe + mise en valeur de la cible */
.legal h2[id]{ scroll-margin-top:96px; }
.legal h2[id]:target{ color:var(--gold-d, #CBB78C); animation:glossFlash 2.4s ease-out 1; }
@keyframes glossFlash{ 0%{ text-shadow:0 0 22px rgba(176,152,98,.9); } 100%{ text-shadow:0 0 0 rgba(176,152,98,0); } }

/* widget LinkedIn : onglet collé au bord droit, se déplie au survol */
.side-in{ position:fixed; right:0; top:50%; z-index:64; transform:translateY(-50%); display:flex; align-items:center; gap:.6rem; height:48px; padding:0 14px; border-radius:12px 0 0 12px;
  background:#0A66C2; color:#fff; box-shadow:-4px 6px 18px rgba(0,0,0,.35); text-decoration:none; font-size:13px; letter-spacing:.04em; white-space:nowrap;
  transform:translate(calc(100% - 48px), -50%); transition:transform .35s var(--ease, cubic-bezier(.2,.7,.2,1)), background .25s; }
.side-in svg{ flex:none; width:20px; height:20px; margin-left:1px; }
.side-in span{ opacity:0; transition:opacity .25s; padding-right:4px; }
.side-in:hover, .side-in:focus-visible{ transform:translate(0,-50%); background:#0b5aa8; }
.side-in:hover span, .side-in:focus-visible span{ opacity:1; }
@media (max-width:900px){ .side-in{ top:auto; bottom:calc(var(--pad, 1rem) * 2 + 4.4rem); transform:translate(calc(100% - 44px), 0); height:44px; } .side-in:hover, .side-in:focus-visible{ transform:translate(0,0); } }
body.menu-open .side-in{ opacity:0; pointer-events:none; }

/* boussole « retour à l'accueil » (même pastille que la page d'accueil, ici cliquable) */
.hud{ position:fixed; right:var(--pad); bottom:var(--pad); z-index:60; display:flex; flex-direction:row-reverse; align-items:center; gap:.7rem; padding:.35rem .9rem .35rem .45rem; border-radius:999px;
  background:rgba(7,31,48,.88); box-shadow:0 0 0 1px rgba(167,180,188,.18), 0 8px 22px rgba(0,0,0,.35); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; text-align:right; transition:box-shadow .25s, color .25s; }
.hud--home{ cursor:pointer; }
.hud--home:hover, .hud--home:focus-visible{ color:var(--ink); box-shadow:0 0 0 1.5px var(--gold), 0 8px 22px rgba(0,0,0,.4); }
.hud__compass{ width:38px; height:38px; color:var(--gold); flex:none; will-change:transform; }
.hud__text{ display:flex; flex-direction:column; line-height:1.35; }
.hud__text b{ font-weight:500; color:var(--ink); }
@media (max-width:1100px){ .hud__text{ display:none; } .hud{ padding:.3rem; } }

/* ---------- business cases ---------- */
.bc-list{ max-width:1080px; margin:0 auto; position:relative; z-index:1; }
.bc{ margin-bottom:clamp(3rem,7vw,5.5rem); padding:clamp(1.2rem,3vw,2.2rem); border-radius:var(--radius-lg, 18px); background:linear-gradient(155deg, rgba(12,44,64,.94), rgba(7,31,48,.94)); border:1px solid rgba(167,180,188,.12); box-shadow:0 14px 40px rgba(0,0,0,.35); }
.bc__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-bottom:.9rem; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.bc__tag{ padding:.3rem .8rem; border-radius:999px; border:1px solid rgba(176,152,98,.5); color:var(--color-accent-light, #CBB78C); }
.bc__date{ color:var(--color-text-muted, #A7B4BC); }
.bc__title{ font-weight:300; font-size:clamp(1.7rem,3.6vw,2.8rem); line-height:1.12; letter-spacing:-.02em; max-width:24ch; }
.bc__sum{ margin-top:1rem; max-width:68ch; color:var(--color-text-muted, #A7B4BC); font-size:16.5px; line-height:1.65; }
.bc__media{ margin:1.8rem 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.bc__fig img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:10px; border:1px solid rgba(167,180,188,.16); background:#071f30; display:block; }
.bc__fig figcaption{ margin-top:.5rem; font-size:12.5px; color:var(--color-text-muted, #A7B4BC); }
.bc__cols{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.2rem,3vw,2.5rem); }
.bc__cols h3{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:400; color:var(--color-accent-light, #CBB78C); margin:0 0 .6rem; }
.bc__cols p{ margin:0 0 1.4rem; line-height:1.65; font-size:15.5px; }
.bc__feat{ list-style:none; padding:0; margin:0; display:grid; gap:.65rem; }
.bc__feat li{ position:relative; padding-left:1.3rem; line-height:1.55; font-size:15px; }
.bc__feat li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--color-accent, #B09862); }
.bc__stats{ list-style:none; padding:0; margin:1.8rem 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.bc__stats li{ border-top:2px solid var(--color-accent, #B09862); padding-top:.8rem; }
.bc__stats b{ display:block; font-weight:300; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.02em; color:var(--color-accent-light, #CBB78C); line-height:1.1; }
.bc__stats span{ display:block; margin-top:.4rem; font-size:13px; color:var(--color-text-muted, #A7B4BC); line-height:1.4; }
.bc__tech{ list-style:none; padding:0; margin:1.6rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem; }
.bc__tech li{ padding:.35rem .8rem; border-radius:999px; border:1px solid rgba(167,180,188,.25); font-size:12px; letter-spacing:.06em; }
.bc__cta{ margin-top:1.8rem; }
@media (max-width:900px){ .bc__cols{ grid-template-columns:1fr; } .bc__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .bc__media{ grid-template-columns:1fr; } }
.bc__cols p, .bc__cols p span{ font-weight:300; color:var(--color-text, #F2EFE9); }

.bc__media{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .bc__media{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .bc__media{ grid-template-columns:1fr; } }