/* ==============================
   00 · Polices 
   ============================== */
@font-face {font-family: "Sansation"; src: url("fonts/subset-Sansation-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap;}
@font-face {font-family: "Sansation"; src: url("fonts/subset-Sansation-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap;}

.f-sans {font-family: "Sansation", Arial, sans-serif !important;
         letter-spacing: var(--ls, 0.02em) !important;}   /* espacement uniquement pour Sansation */
.w-400 {font-weight: 400 !important;}      /* Regular */
.w-700 {font-weight: 700 !important;}      /* Bold */
.lh {line-height: var(--lh, 1.2) !important;}   /* interligne réglable */
/* <h2 class="f-sans w-700" style="--ls: 0.06em">Titre</h2>
<p class="f-sans w-400 lh" style="--lh: 1.6">Texte</p> */



/* ==============================
   01 Variables 
   ============================== */
:root {
    --background: #ffffff;
    --surface: #e8e4ff;
    --text: #154607;
    --muted: #003107;
    --green: #6fa977;
    --button-bg: #eff0c0;
    --button-border: #b1be80;
    --button-text: #031e07;
    --header-text: #ffffff;
    --header-hover: #6fa977;
    --hero-text: #154607;
    --hero-muted: #082f0f;
    /* couleurs pour le bouton du bandeau */
    --cta-bg: rgba(255,255,255,.2);
    --cta-border: #ffffff;
    --cta-text: #ffffff;
    --accent-1: #ffffff;
    --accent-2: #050a3d;
    --accent-3: #8aafff;
    --accent-4: #c11111;
    --slide-bg: #e4e6ff;
    --slide-on-image: #ffffff;
    --slide-overlay: linear-gradient(to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.80) 25%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.25) 65%,
    rgba(0,0,0,.08) 82%,
    rgba(0,0,0,0) 100%); /* voile sombre sur l'image du carrousel des prestations */
    --slide-title: #154607;
    --slide-desc: #003107;
    --arrow-bg: #a4b1df;
    --arrow-text: #0e044d;
    /* points en bas du carrousel */
    --dot: rgba(255,255,255,.4);
    --dot-active: #a4b1df;
    --Nosexpertises-bg: #e4e6ff;
    --lightbox-bg: #e4e6ff;
    --lightbox-title: #050a3d;
    --lightbox-text: #003107;
    --footer-bg: #08154f;
    --footer-text: #ffffff;
    /* couleurs pour les lignes */
    --line-1: #050a3d;
    --line-2: #ffffff;
    --line-3: #4285c9;
    /* taille marge h3 */
    --h3-m: 6px;
    --max-width: 1100px;}



    
/* ==============================
  02 Base  reset, body, titres, liens
  ============================== */
#portefolio {background: transparent;}
#Nosprestations {background: var(--Nosexpertises-bg)}
#Nosprestations {margin-block: 0; padding-block: 10px;}
#Nosprestations h2 {margin-bottom: 0;}


/* page simple */ 
.page-simple main {padding-top: 120px;}
.page-simple .header {background: rgba(8,21,79,.9);}


* {box-sizing: border-box;}

html {scroll-behavior: smooth;  scroll-padding-top: 90px;}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.1;}

a {color: inherit;  text-decoration: none;}
p {margin-top: 0;}
h1, h2, h3 {line-height: 1;  letter-spacing: -0.035em;}
h1 {font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 500;}
h2 {font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500;}
h3 {font-size: 1.35rem; font-weight: 500; line-height: 1.2; margin: var(--h3-m) 0;}
.section h1 {max-width: 940px; margin: 8px 0;}
.section h2 {max-width: 940px; margin: 8px 0;}
.section h3 {max-width: 940px; margin: var(--h3-m) 0;}

.section,
.hero,
.about,
.contact {width: min(var(--max-width), calc(100% - 64px)); margin-inline: auto;}
.contact {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #fff;}
.contact h2, .contact h3 {color: #fff;}

/*section */
.section {padding-top: 20px; padding-bottom: 20px; margin-top: 10px;    margin-bottom: 10px;}
.section h2 {max-width: 1200px; margin: 20px 0;}




/* ==============================
  03 Outils c-1/2/3, f-sans, data-align, line, space, dash, box, u
  ============================== */
/* Alignement personnalisable sans modifier les classes existantes */
[data-align="left"] {text-align: left;}
[data-align="right"] {text-align: right;}
[data-align="center"] {text-align: center;}
[data-align="justify"] {text-align: justify;}

/* changer de couleur le texte selon le menu du root partie accent */
.c-1 {color: var(--accent-1) !important;}
.c-2 {color: var(--accent-2) !important;}
.c-3 {color: var(--accent-3) !important;}
.c-4 {color: var(--accent-4) !important;}

/* pour régler les paramètres de soulignage */
u {text-underline-offset: 3px; text-decoration-thickness: 2px;}

/* pour régler la taille des lignes et tout */
.line {width: var(--w, 100%); height: var(--h, 0px); margin: 0px 0; background: var(--line-1);}
.line-2 {background: var(--line-2);}
.line-3 {background: var(--line-3);}
.line-center {margin-inline: auto;}
.line-right {margin-left: auto;}
/* <div class="line line-2" style="--w: 200px; --h: 4px;"></div>
<div class="line line-3 line-center" style="--w: 50%;"></div> */
/* Pour un trait vertical, inverse les valeurs, par exemple --w: 2px; --h: 100px;.*/


/*Espace de taille personnalisable */
.space {height: var(--s, 20px);}
.space-h {display: inline-block; width: var(--s, 20px);}
/*<div class="space" style="--s: 40px"></div>             <!-- espace vertical -->
mot<span class="space-h" style="--s: 30px"></span>mot  <!-- espace horizontal -->*/

/* pour faire des listes à points*/
ul.dash {list-style: "– "; margin: 0; padding-left: 20px;}
ul.dash li {margin-bottom: 4px;}

/* pour faire des rectangles de taille réglable */
.box {
    width: var(--w, auto);
    height: var(--h, auto);          /* hauteur réelle, plus un minimum */
    max-width: 100%;
    padding: var(--p, 16px);         /* inclus dans les dimensions (border-box) */
    background: var(--bg, rgba(188,235,187,.85));
    border-radius: var(--r, 0);
    overflow: hidden;                /* le texte trop long est coupé, pas poussé dehors */
    display: flex; flex-direction: column;
    justify-content: var(--jc, center);}   /* position du texte dans le rectangle : flex-start / center / flex-end */
.box > * {margin: 0 !important; max-width: none;}
/*<div class="box" style="--w: 500px; --h: 200px; --bg: #e4e6ff;">
    <p>Ton texte</p>
</div>*/


/* pour la page mentions légales */
.about {padding-top: 10px; padding-bottom: 100px;}
.about h2 {max-width: 1200px;}
.about > p:last-child {max-width: 1200px; color: var(--muted);}
.section-intro {max-width: 620px; margin-bottom: 20px; color: var(--muted);}






/* ==============================
  04 Bandeau header, nav, logo, bouton, burger, langue
  ============================== */
.header {
    position: fixed; left: 0; right: 0;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 115px;                                        /* hauteur en haut de page */
    padding-inline: max(32px, calc((100% - var(--max-width)) / 2));
    background: transparent;
    transition: min-height 0.1s ease, background 0.3s ease;}   /* 0.2s = rétrécissement rapide */

.header.scrolled {
    min-height: 70px;
    background: rgba(8, 21, 79, 0.78);      /* transparence du bandeau uniquement */}
.header nav a {text-shadow: 0 1px 1px rgba(0,0,0,.6);}

.logo {color: var(--header-text); font-size: 3rem; font-weight: 800; letter-spacing: -0.08em; transition: font-size 0.2s ease;}
.header.scrolled .logo {font-size: 2rem;}

/* ---- Liens du bandeau : c'est ici que tu règles taille, espacement, couleur ---- */
.header nav {display: flex; align-items: center; gap: 30px;}   /* gap = écartement entre les liens */
.header nav a,
.language {font-size: 1.3rem; color: var(--header-text);}     /* font-size = taille de police */
.header nav a:hover,
.language:hover {color: var(--header-hover);}
.language {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 8px 5px;
    border-radius: 10px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgb(0, 0, 0);  
    background-size: cover;
    background-position: center;}

.language:hover {filter: brightness(1.2);}



/* Logo dans la barre en haut */
.header .logo {display: flex; align-items: center;}
.logo-img {display: block; width: auto;}
.logo-top {height: 100px;}                        /* image en haut de page */
.logo-small {height: 55px; display: none;}        /* image une fois scrollé */
.header.scrolled .logo-top {display: none;}
.header.scrolled .logo-small {display: block;}
.logo span {color: var(--green);}


/* ---- Bouton Contact du bandeau ---- */
.header nav a.button-header {
    margin: 0 0 0 20px;                  /* 20px en plus du gap = davantage séparé */
    padding: 6px 16px;
    background: var(--cta-bg);
    color: var(--cta-text);
    border: 3px solid var(--cta-border);
    border-radius: 15px;
    font-weight: 600;}

.header nav a.button-header:hover {background: transparent; color: var(--cta-border);}

/* ---- Bouton hamburger (caché sur grand écran) ---- */
.burger {
    display: none;
    background: none;
    border: 1px solid var(--header-text);
    color: var(--header-text);
    border-radius: 8px;
    font-size: 1.4rem;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;}





/* ==============================
   05 Section parallaxe  parallax-zone, parallax-bg, landing, filtre
   ============================== */
/* image de fond en parallaxe */
.parallax-zone {position: relative; display: flow-root; overflow: clip; background: var(--background);}

.parallax-bg {
    position: absolute;
    inset: -40% 0;
    background-size: cover;
    background-position: center;
    will-change: transform;}

.parallax-zone > .section {position: relative; z-index: 1;}   /* sans fond blanc */
.parallax-zone > .contact {position: relative; z-index: 1;}
.parallax-bg video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}

/* option : pas de vidéo pour les personnes qui ont réduit les animations */
@media (prefers-reduced-motion: reduce) {.parallax-bg video {display: none;}}

@media (min-width: 1265px) {
    .parallax-zone .hero-text {padding-inline: 24px;}
    .parallax-zone > .projects {width: min(var(--max-width), calc(100% - 64px)); margin-inline: auto; padding-inline: 24px;}
    .parallax-zone > .contact {padding-inline: 24px;}}



/* Bandeau stylé avec parallaxe */
.landing {
    position: relative; z-index: 1;
    min-height: var(--landing-h, clamp(480px, 55vw, 80vh));   /* suit la largeur, min 480px, max 90% de la hauteur d'écran */
    display: flex; align-items: center; justify-content: center;   /* titre centré au milieu */
    padding: 140px 32px;
    text-align: center;}
.landing h1 {width: 100%; max-width: 1000px; margin: 0; font-size: clamp(2.2rem, 7vw, 3rem); color: #fff;}
.landing .button {
    position: absolute;
    bottom: var(--btn-bottom, 60px);      /* distance du bouton au bas de la section */
    left: 50%; transform: translateX(-50%);
    margin: 0;}

.button.button-ghost {background: transparent; color: #fff; border-color: #fff;}
.button.button-ghost:hover {background: #fff; color: var(--accent-2);}

/* filtre sombre sur l'image seulement (mets transparent pour le supprimer) */
.landing-zone::after, .contact-zone::after {
    content: ""; position: absolute; inset: 0;
    background: var(--parallax-filter, rgba(0,0,0,.25));}






/* ==============================
   06 Accueil hero, hero-col, intro-row
   ============================== */
.hero {display: flex; align-items: center; gap: 48px; padding-top: 10px; padding-bottom: 10px;}
.hero-text  {flex: var(--text-part, 3);  min-width: 0;}
.hero-image {flex: var(--image-part, 2); min-width: 0; width: 100%; height: auto; border-radius: 12px;}

.eyebrow {color: var(--green);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.035em; margin: 5px 0;}

.hero h1 {color: var(--hero-text); max-width: 940px; margin: 5px 0;}

.intro {color: var(--hero-muted); max-width: 940px; font-size: 1.15rem;font-weight: 520;}

.button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 15px;
    padding: 7px 10px;
    background: var(--button-bg);
    color: var(--button-text);
    border: 5px solid var(--button-border);
    border-radius: 15px;   /* l'arrondi : 0 = angles droits, 999px = pilule */
    font-size: 1rem; font-weight: 600;
    transition: background 0.2s, color 0.2s;}

.button:hover {background: transparent; color: var(--button-border);}


/* ---- Page d'accueil en colonne sur mobile ---- */
.hero-col {flex-direction: column; align-items: stretch; gap: 0;}
.hero-col h1, .hero-col .intro, .hero-col .eyebrow {max-width: none;}
.hero-col .button {align-self: flex-start;}

.intro-row {display: flex; align-items: stretch; gap: 48px; margin: 10px 0;}
.intro-row-text {flex: 1; min-width: 0;}
.intro-row-logo {flex: 0 0 var(--logo-w, 28%); position: relative;}   /* --logo-w = largeur du logo */
.intro-row-logo img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;}



/* ==============================
   07 Prestations & Portfolio projects, projects-grid, presta
   ============================== */
.service h3 {margin-top: 10px;}

.service p,
.projects {
    width: 100%;
    padding-inline: max(32px, calc((100% - var(--max-width)) / 2));
    background: var(--surface);}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;}

    .project-info h3 {margin: 0px 0;}

/* ---- Carrousel ---- */
.carousel {position: relative;}

.carousel-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;}
.carousel-track::-webkit-scrollbar {display: none;}

.slide {
    flex: 0 0 calc((100% - 48px) / 3);      /* 3 cartes visibles */
    scroll-snap-align: start;
    background: var(--slide-bg);
    border-radius: 12px;
    overflow: hidden;
    display: flex;}

.slide-image {
    position: relative;
    flex: 1; min-height: var(--slide-h, 340px); /*hauteur de l'image du carrousel*/
    display: flex;
    align-items: flex-end;
    padding: 20px;
    background-size: cover;
    background-position: center;
    color: var(--slide-on-image);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;}
.slide-image::before {content: ""; position: absolute; inset: 0; background: var(--slide-overlay);}
.slide-image span {position: relative;}


.carousel {--slide-h: 415px;} /* hauteur des visuels des réalisations */
.carousel-btn {
    position: absolute;
    top: calc(var(--slide-h, 415px) / 2);   /* centré sur l'image */
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--arrow-bg);
    color: var(--arrow-text);
    font-size: 1.6rem;
    cursor: pointer;}
.carousel-btn.prev {left: -22px;}
.carousel-btn.next {right: -22px;}

.carousel-dots {display: flex; justify-content: center; gap: 10px; margin-top: 20px;}
.dot {width: 12px; height: 12px; padding: 0; border: none; border-radius: 50%; background: var(--dot); cursor: pointer;}
.dot.active {background: var(--dot-active);}


/* page carrousel en plus grand */ 
.slide-image {cursor: pointer;}

.lightbox {
    width: min(800px, calc(100% - 36px));
    max-height: 95vh;
    padding: 0;
    border: none;
    border-radius: 12px;
    overflow: auto;
    background: var(--lightbox-bg);
    color: var(--lightbox-text);}
.lightbox::backdrop {background: rgba(0, 0, 0, 0.7);}   /* opacité du fond assombri */

.lightbox-content {position: relative; padding-bottom: 24px;}
.lightbox-image {height: 55vh; background: #f2f2f2 center / contain no-repeat;}
.lightbox-text {padding: 20px 28px 0;}
.lightbox-text h3 {margin: 0 0 10px; color: var(--lightbox-title); font-size: 1.6rem;}
.lightbox-body {line-height: 1.4;}
.lightbox-body p {margin: 0 0 12px;}

.lightbox-nav {
    position: absolute;
    top: 27.5vh;                         /* milieu de l'image (55vh / 2) */
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--arrow-bg);
    color: var(--arrow-text);
    font-size: 1.6rem;
    cursor: pointer;}
.lightbox-prev {left: 12px;}
.lightbox-next {right: 12px;}

.lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--arrow-bg);
    color: var(--arrow-text);
    font-size: 1.4rem;
    cursor: pointer;}

body:has(dialog[open]) {overflow: hidden;} /* bloque le scroll de la page derrière */

/* Ajouter une vidéo dans la lightbox */
.slide-image video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.slide-image::before {z-index: 1;}      /* le voile reste au-dessus de la vidéo */
.slide-image span {z-index: 2;}

.lightbox-video {display: block; width: 100%; height: 55vh; background: #000; object-fit: contain;}
.lightbox-video[hidden] {display: none;}



/* composant visuel commun (prestations + réalisations) */
.slide-image {overflow: hidden;}
.frames {position: absolute; inset: 0; transition: transform .6s ease;}
.frame {position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease;}
.frame.on {opacity: 1;}
.slide-image:hover .frames {transform: scale(1.06);}

.overlay-text {position: relative; z-index: 2; color: #fff;}
.overlay-text small {display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em;}
.overlay-text h2 {margin: 0; color: #fff; font-size: 2.5rem;}
.overlay-text h3 {margin: 0px 0; color: #fff; font-size: 1.5rem; letter-spacing: -.02em;}
.overlay-text p {margin: 0; color: #fff; font-size: .95rem; font-weight: 400; letter-spacing: 0; line-height: 1.3;}
.more {display: block; margin-top: 10px; font-size: .85rem; opacity: 0; transform: translateY(8px); transition: .3s;}
.slide-image:hover .more {opacity: 1; transform: none;}

.presta {min-width: 0; border-radius: 12px; overflow: hidden;}


.presta .slide-image {min-height: 400px;}

/* ---- Vue agrandie des prestations : images qui défilent + texte blanc dessus ---- */
.lightbox-frames {display: none;}
.lightbox-nav, .lightbox-close {z-index: 3;}

.lightbox--presta {
    --lb-ratio: 0.9167;      /* largeur / hauteur de TES images : 1100/1200 */
    width: min(1200px, calc(100% - 36px), calc(180vh * var(--lb-ratio)));  /* ne dépasse jamais l'écran */
    overflow: hidden;
    border-radius: 16px;
    background: var(--Nosexpertises-bg);}

.lightbox--presta .lightbox-content {position: relative; padding: 0;}
.lightbox--presta .lightbox-image,
.lightbox--presta .lightbox-video {display: none;}



/* moitié gauche : images qui défilent, affichées en entier */
.lightbox--presta .lightbox-frames {
    display: block; position: relative;
    width: 50%; aspect-ratio: var(--lb-ratio);   /* c'est elle qui fixe la hauteur de la vue */
    background: #050a3d;}
.lightbox--presta .lightbox-frames .frame {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* moitié droite : texte scrollable */
.lightbox--presta .lightbox-text {
    position: absolute; top: 0; bottom: 0; left: 50%; right: 0;
    overflow-y: auto;
    padding: 60px 70px 32px 28px;     /* haut : place pour la croix ; droite : place pour la flèche */
    background: var(--Nosexpertises-bg);}

.lightbox--presta .lightbox-nav {top: 50%;}

/* titre posé en bas des images (uniquement pour les prestations) */
.lightbox-presta-title {display: none;}
.lightbox--presta .lightbox-presta-title {
    display: block;
    position: absolute; left: 0; top: 0; width: 50%; z-index: 2;
    margin: 0;
    padding: 24px 28px 70px;     /* le bas du padding étale le dégradé sous le texte */
    color: #fff;
    font-size: clamp(1.5rem, 2.6vw, 2.3rem);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.605) 0%, rgba(0, 0, 0, 0.505) 55%, rgba(0,0,0,0) 100%);
    text-shadow: 0 1px 4px rgba(0,0,0,.7);}
.lightbox--presta .lightbox-text > h3 {display: none;}  /* le titre n'est plus dans la zone de texte */

/* image agrandies du carrosel */
.lightbox-image, .lightbox-body img {cursor: zoom-in;}
.lightbox-body img {max-width: 100%; border-radius: 8px;}
.zoom {width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; border: none; background: rgba(0,0,0,.92);}
.zoom img {display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-out; touch-action: pinch-zoom;}
.zoom-close {position: fixed; top: 16px; right: 16px; z-index: 2; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--arrow-bg); color: var(--arrow-text); font-size: 1.6rem; cursor: pointer;}




/* pour la navigation sans souris */
:focus-visible {outline: 3px solid var(--accent-3); outline-offset: 3px;}
.slide-image:focus-visible .more {opacity: 1; transform: none;}




/* ==============================
   11 Contact
   ============================== */
.contact > p:not(.eyebrow) {max-width: 1200px; color: var(--muted);}
.contact {padding-top: 24px; padding-bottom: 90px;}

.contact h2 {max-width: 1200px;}

.contact {justify-content: flex-start; padding-top: 80px;}   /* remplace justify-content: center */
.contact-cta {
    align-self: center; margin-top: auto; padding-top: 60px;   /* centré, poussé en bas */
    display: flex; align-items: center; justify-content: center; gap: 24px;
    white-space: nowrap;}
.contact-cta h2 {margin: 0;}
.contact-cta img {height: 90px; width: auto;}

/* ==============================
   Pied de page
   ============================== */

.footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 0px;
    padding: 30px max(32px, calc((100% - var(--max-width)) / 2));
    background: var(--footer-bg);
    color: var(--footer-text);}

.footer-main {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;}
.footer .logo {font-size: 2rem;}
.footer p {margin: 0; color: var(--footer-text); font-size: 0.9rem;}

.footer-links {display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px;}
.footer-links a {color: var(--footer-text); font-size: 0.85rem; text-decoration: underline;}
.footer-links a:hover {color: var(--header-hover);}



.section-head {display: flex; align-items: center; gap: 48px;}

/* ==============================
   Téléphones et petits écrans
   ============================== */

@media (max-width: 1055px) {
    .desktop-only {display: none;}
    .section,
    .hero,
    .about,
    .contact{width: calc(100% - 36px);}

    .header {min-height: 80px; padding-inline: 18px; gap: 16px;}
    .header.scrolled {min-height: 60px;}
    .language {margin-left: auto;}      /* pousse langue + hamburger à droite */
    .burger {display: block;}
    .header nav {                       /* menu déroulant sous le bandeau */
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 20px 18px;
        background: transparent;}
    .header nav.open {display: flex;}
    .header nav a.button-header {margin-left: 0;}
    .header.scrolled nav {background: rgba(8, 21, 79, 0.601);}   /* même teinte que le bandeau */
    .header nav a {text-shadow: 0 1px 4px rgba(0,0,0,.8);}        /* lisible sur l'image */

    .hero {flex-direction: column; padding-top: 20px; padding-bottom: 30px;}
    .section,
    .about {padding-top: 20px; padding-bottom: 20px;}
    .services-grid,
    .projects-grid {grid-template-columns: 1fr;}
    .projects {padding-inline: 18px;}
    .footer {padding: 24px 18px;}

    .slide {flex-basis: 85%;}                /* 1 carte + un bout de la suivante */
    .carousel-btn.prev {left: 8px;}
    .carousel-btn.next {right: 8px;}
    .carousel {--slide-h: 400px;}

    .section-head {flex-direction: column;}

    /* Taille du logo dans le bandeau suppérieur */
    .logo-top {height: 60px;}
    .logo-small {height: 50px;}

    /* pour la section contact */
    .contact-cta {flex-direction: column; white-space: normal; text-align: center;}

    .lightbox--presta {width: calc(100% - 36px); height: 90vh;}
    .lightbox--presta .lightbox-content {height: 100%;}
    .lightbox--presta .lightbox-frames {width: 100%; height: 38%; aspect-ratio: auto;}
    .lightbox--presta .lightbox-text {left: 0; top: 38%; padding: 20px;}
    .lightbox--presta .lightbox-nav {top: 19%;}
    .parallax-bg video {display: none;}
    .lightbox--presta .lightbox-presta-title {width: 100%; padding: 20px 20px 50px;}

    /* hauteur du carré variable */
    .box {height: var(--h-sm, auto);}     /* hauteur adaptée au texte sur petit écran */
}