@font-face {
  font-family: 'TeX Gyre Chorus';
  src: url('./fonts/texgyrechorus-mediumitalic2.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chillax';
  src: url('fonts/chillax-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chillax';
  src: url('fonts/chillax-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chillax';
  src: url('fonts/chillax-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chillax';
  src: url('fonts/chillax-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chillax';
  src: url('fonts/chillax-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



:root {

  --noir: #000000; 
  --bleu: #67B2FF; 
  --blanc: #F8FAFC; 
  --gris1: #111214;
  --gris2: #25201E; 


  --title1: 'Satoshi', sans-serif;
  --title2: 'TeX Gyre Chorus', serif;
  --text: 'Chillax', sans-serif;
}

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

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: var(--text);
    color: var(--blanc);
    background: var(--noir);
    overflow-x: hidden;
}


/* HEADER NAV */

header {
    position: relative;
    height: calc(100vh - 30px);
    height: calc(100dvh - 30px); /* fix mac*/
    overflow: hidden;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


.navbar {
    position: relative;
    z-index: 2; 
    display: flex;
    align-items: center;
    background: rgba(21, 21, 23, 0.77);
    border: 0.5px solid var(--bleu);
    border-radius: 20px;
    padding: 16px 30px;
    gap: 40px;
}


.logo img {
    height: 32px;
    display: block;
}

.nav-links {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
    margin: 0 auto;
}

.nav-links a {
    text-decoration: none;
    color: var(--bleu);
    font-size: 14px;
    font-family: var(--text);
    font-weight: 300;
}

/* Burger : masqué par défaut, il n'apparaît que sous 768px, là où les liens
   ne tiennent plus dans la barre (voir le média en bas de fichier). */
.nav-burger {
    display: none;
}

/* VIDÉO DU HERO — placement identique sur tous les écrans, sans JavaScript.
   La vidéo (16/9, fond noir pur) est dimensionnée à partir de la HAUTEUR de l'écran : le cube occupe la bande libre entre
   la barre de navigation (~100 px) et le haut du titre (padding-top: 43vh de .titre-hero), jamais rogné ni caché.
   Bande disponible = 43vh - 22px ; le cube occupe 50 % de la hauteur de l'image (de 20 % à 70 %) -> hauteur de l'image =
   2 x bande. Plafonnée à 153vw (cube <= 90 % de la largeur sur mobile portrait) et planchée à 280px. Les marges de
   l'image étant noires comme la page, le « letterbox » est invisible ; un dégradé masque en plus l'arête du bas. */
header video {
    --hero-h: max(280px, min(calc(86vh - 44px), 153vw));
    position: absolute;
    z-index: 0;
    top: calc(100px + 2vh - 0.2 * var(--hero-h));   /* +2vh : cube légèrement plus bas dans la bande */
    left: 50%;
    width: calc(var(--hero-h) * 16 / 9);
    height: var(--hero-h);
    max-width: none;
    transform: translateX(-50%);
    object-fit: cover;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 92%, transparent 100%);
}

@supports (height: 1dvh) {
    header video {
        --hero-h: max(280px, min(calc(86dvh - 44px), 153vw));
    }
}

.titre-hero {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 43vh;
}

h1 {
    position: relative;
    z-index: 2;
    color: var(--blanc);
    text-align: center;
    margin-top: 0;
    font-size: 88px;
    font-family: var(--title1);
    font-weight: 300;
    line-height: 1;
}


.line1 {
    display: block;
    margin-bottom: 1px;
}

.accent {
    font-family: var(--title2);
    color: var(--bleu);
    font-size: 1.2em;
    font-style: italic;
    font-weight: 400;
    font-size: 94px;


}

.texte p {
    font-family: var(--text);
    color: var(--bleu);
    font-weight: 300;
    font-size: 20px;
    line-height: 1.6;
    margin-top: 50px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* SECTION 1 */

h2, h3, h4, .section-title, .card-title { 
    font-family: var(--title1); 
}

.blue-italic {
    color: var(--bleu);
    font-style: italic;
    margin-left: 5px;
}


.btn {
    background: var(--bleu);
    color: var(--noir);
    border: none;

    padding: 10px 12px;
    border-radius: 5px;

    font-family: var(--text);
    font-weight: 300;
    font-size: 14px;

    cursor: pointer;

}
.section-badge {
    padding: 12px 0;
    width: 330px;
    text-align: center;
    border-radius: 100px;
    font-size: 14px;
    font-family: var(--text);
    font-weight: 300;
    margin-bottom: 40px;
    display: inline-block;
    color: var(--bleu);
    background-color: var(--gris1);
    border: 0.5px solid var(--bleu);
}

.section-title {
    text-align: center;
    font-size: 64px;
    font-weight: 280;
    line-height: 1.1;
    margin-bottom: 80px;
}

.cursive-title {
    font-family: var(--title2);
    color: var(--bleu);
    font-size: 72px;
    display: inline-block;
    margin-top: 10px;
}


.timeline-section, .excellence-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.timeline-section { margin-top: 100px; margin-bottom: 150px; }
.excellence-section { margin-bottom: 100px; }

/* ==========================================================================
   4. SECTIONS SPECIFIQUES
   ========================================================================== */


/* --- HERO --- */
.hero { 
    height: 100vh; 
    text-align: center; 
    position: relative; 
    padding: 0 20px; 
    overflow: hidden; 
}

.hero-content { 
    max-width: 800px; 
    z-index: 2; 
    position: relative; 
}

.hero p { 
    font-size: 18px; 
    opacity: 0.85; 
    margin-bottom: 30px; 
}


/* SECTION 1 : ANALYSE STRUCTUREE */

.timeline-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 40px; 
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 40px; 
    bottom: 87px;
    left: 50%;
    width: 1px;                             
    background-color: rgba(255, 255, 255, 0.15); 
    transform: translateX(-50%);
    z-index: 1; 
}

.timeline-item {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 90px; 
    position: relative;
    box-sizing: border-box;
}

.card {
    width: 42%; 
    background-color: var(--gris1);
    border: 0.5px solid var(--bleu);
    padding: 40px;
    min-height: 380px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
}

.timeline-item.left {
    justify-content: flex-start;
}

.timeline-item.right {
    justify-content: flex-end;
}

.step-number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; 

    width: 45px;
    height: 45px;
    background-color: var(--noir);
    border: 1px solid var(--bleu);   
    border-radius: 50%;
    color: var(--bleu);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    box-sizing: border-box;
    box-shadow: 0 0 0 12px var(--noir);
}

.timeline-item.left .card {
    margin-right: auto;
}

.timeline-item.right .card {
    margin-left: auto;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px; 
}

.category {
    color: var(--bleu);
    font-size: 13px;
    text-transform: uppercase; 
    letter-spacing: 1px;
}

.duration {
    color: var(--bleu);
    font-size: 13px;
    background: rgba(255, 255, 255, 0.05); 
    padding: 4px 15px;
    border: 0.1px solid var(--bleu);
}

.card-title {
    font-family: var(--title1);
    font-weight: 300;
    font-size: 22px;
    color: var(--blanc);
    margin-bottom: 30px;
    text-transform: uppercase; 
}

.card-list {
    margin: 0;
    padding-left: 20px;
    color: var(--bleu);
}

.card-list li {
    font-size: 14px;
    margin-bottom: 15px; 
    line-height: 1.5;
}

.card-list li:last-child {
    margin-bottom: 0; 
}



/* SECTION 2 : EXCELLENCE */

.excellence-section .section-title { 
    margin-bottom: 50px; 
}

.section-subtitle { 
    color: var(--bleu); 
    font-size: 1.1rem; 
    text-align: center;  
    margin-bottom: 80px; 
    line-height: 1.5; 
}

.features-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 60px 40px; 
    width: 100%; 
}

.feature-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 15px; 
}

.feature-icon { 
    width: 24px; 
    height: 24px; 
    flex-shrink: 0; 
    color: var(--blanc); 
    margin-top: 2px; 
}

.feature-content h4 { 
    color: var(--blanc); 
    font-size: 16px; 
    font-weight: 500; 
    margin-bottom: 12px; 
    line-height: 1.3; 
}

.feature-content p { 
    color: var(--bleu); 
    font-size: 14px; 
    line-height: 1.6; 
}

/* SECTION 3 : NOS DEUX FONCTIONNALITÉS */

.tools-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1100px; 
    margin: 0 auto 150px auto;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 110px; 
    width: 100%;
}

.tool-card {
    background-color: var(--gris1);
    border: 0.5px solid var(--bleu);
    border-radius: 32px;
    padding: 60px 45px; 
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.tool-card .card-title {
    font-size: 26px;
    letter-spacing: 0.02em;
    margin-bottom: 30px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.title-italic {
    font-style: italic;
    font-weight: 400;
}

.tool-text {
    flex-grow: 1;
    font-family: var(--text);
    color: var(--bleu);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 40px;
    padding-right: 45px;
}

.tool-text p {
    margin-bottom: 20px;
}

.tool-text p:last-child {
    margin-bottom: 0;
}

.tool-action {
    display: flex;
    justify-content: flex-end;
}

.btn-small {
    padding: 12px 22px;
    font-family: var(--text);
    font-size: 14px;
    border-radius: 8px;
    font-weight: 400;
}


/* SECTION 4 : AVIS */

.reviews-section .section-title { 
    margin-bottom: 50px; 
}

.reviews-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 150px auto;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.reviews-section .section-subtitle {
    margin-bottom: 70px;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    width: 100%;
}

.reviews-dots {
    display: none;
}

.review-card {
    background-color: var(--gris1);
    border: 0.5px solid var(--bleu);
    padding: 45px 35px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.review-icon {
    width: 32px;
    height: 32px;
    color: var(--bleu);
    margin-bottom: 25px;
}

.review-title {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 20px;
}

.review-text {
    font-family: var(--text);
    color: var(--bleu);
    font-size: 15px;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 40px;
}

.review-author {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.author-name {
    font-family: var(--text);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--blanc);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.author-role {
    font-size: 11px;
    color: var(--blanc);
    font-weight: 280;
}

/* SECTION 5 : CTA */

.cta-section {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto 150px auto;
    padding: 0 20px;
}

.cta-container {
    background-color: var(--gris1);
    border: 0.5px solid var(--bleu);
    border-radius: 23px;
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.cta-lion-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.cta-lion {
    position: absolute;
    bottom: -70%;
    top: auto;
    left: -5%;
    transform: none;
    height: 180%;
    width: auto;
}

.cta-content {
    max-width: 60%;
    position: relative;
    z-index: 2;
}

.section-title-cta {
    color: var(--blanc);
    font-size: 36px;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 20px;
}

.cursive-title-cta {
    font-family: var(--title2);
    color: var(--bleu);
    font-size: 40px;
    font-style: italic;
}

.cta-text {
    font-family: var(--text);
    color: var(--blanc);
    opacity: 0.7;
    font-size: 16px;
    line-height: 1.5;
    max-width: 450px;
}

.btn-cta {
    background-color: var(--bleu);
    color: #000000;
    font-weight: 400;
    padding: 12px 32px;
    font-family: var(--text);
    font-size: 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    letter-spacing: 0.05em;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

/* SECTION 6 : FOOTER */

.main-footer {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 20px 40px 20px;
    background-color: transparent;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col {
    flex: 0 1 auto;
    min-width: 160px;
}

.footer-col.brand-col {
    flex: 2;
    max-width: 300px;
}

.footer-logo img {
    height: 40px;
    margin-bottom: 25px;
    padding-right: 80px;
    box-sizing: border-box;
}

.footer-desc {
    color: var(--blanc);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    font-family: var(--text);
}


.footer-col h3 {
    color: var(--bleu);
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 25px;
    font-family: var(--text);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 18px;
}

.footer-col ul li a {
    color: var(--blanc);
    font-weight: 300;
    text-decoration: none;
    font-size: 14px;
    font-family: var(--text);
}

.footer-col.top-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: auto;
}

.btn-top {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--bleu);
}

.btn-top svg {
    width: 36px;
    height: 36px;
    padding: 8px;
    border: 0.5px solid var(--bleu);
    border-radius: 50%;
}

.btn-top span {
    font-size: 12px;
    letter-spacing: 0.1em;
    font-family: var(--text);
}

.footer-divider {
    border: none;
    border-top: 0.5px solid var(--blanc);
    margin-bottom: 60px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}

.copyright, .made-in-france {
    color: var(--blanc);
    font-size: 13px;
    font-family: var(--text);
}

.made-in-france {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flag {
    display: flex;
    width: 24px;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
}

.flag .blue { flex: 1; background-color: #002395; }
.flag .white { flex: 1; background-color: #ffffff; }
.flag .red { flex: 1; background-color: #ed2939; }

/* ------------------------------------------------------------- Animations au survol -------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

:root {
  --bleu-clair: #8fc7ff;
}
 
/* ---------- NAV LINKS ---------- */
:root {
    --bleu-clair: #8fc7ff;
    --bleu-doux: #5a95d6; /* variante moins lumineuse, utilisée pour les boutons */
}
 
/* Active le scroll fluide natif du navigateur (celui déjà utilisé
   par le bouton "top" via window.scrollTo behavior:'smooth').
   Du coup les liens d'ancre #id héritent automatiquement de la
   même animation, sans JS supplémentaire. */
html {
    scroll-behavior: smooth;
}
 
/* ---------- NAV LINKS ---------- */
.nav-links a {
    position: relative;
    transition: color 0.25s ease;
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 1px;
    background-color: var(--bleu-clair);
    transition: width 0.3s ease;
}
.nav-links a:hover {
    color: var(--bleu-clair);
}
.nav-links a:hover::after {
    width: 100%;
}
 
/* ---------- BOUTONS (tous, y compris CTA) ---------- */
/* Léger changement de couleur + léger mouvement */
.btn {
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover {
    background-color: var(--bleu-doux);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(90, 149, 214, 0.15);
}
.btn:active {
    transform: translateY(0);
}

/* ---------- CARTES FONCTIONNALITÉS : légère montée au survol ---------- */
/* Montée plutôt que zoom : un `scale` oblige Chrome à re-dessiner le texte (flou
   pendant le survol avec un calque GPU, ou court flou en sortie sans calque), alors
   qu'un déplacement d'un nombre entier de pixels le garde net en permanence.
   Propriété `translate` (et non `transform`) : GSAP laisse un transform inline après
   ses animations d'entrée, qui écraserait un transform posé ici. GSAP pose aussi
   `translate: none` en inline, d'où le !important (limité à l'état survolé). */
.tool-card {
    transition: translate 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
    .tool-card:hover {
        translate: 0 -3px !important;
        box-shadow: 0 10px 24px rgba(90, 149, 214, 0.10);
    }
}
 
/* ---------- FOOTER (les différentes sections/colonnes) ---------- */
.footer-col ul li a {
    transition: color 0.25s ease;
}
.footer-col ul li a:hover {
    color: var(--bleu);
}
 
/* ---------- BOUTON "TOP" ---------- */
.btn-top svg {
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.btn-top:hover svg {
    transform: translateY(-3px);
    border-color: var(--bleu-clair);
}
.btn-top span {
    transition: color 0.25s ease;
}
.btn-top:hover span {
    color: var(--bleu-clair);
}



@media (max-width: 1024px) {

  .section-badge {
    width: auto;
    max-width: 280px;
    padding: 8px 16px;
    font-size: 11px;
  }

  /* NAVBAR */

  .navbar {
    padding: 12px 16px;
    gap: 0;
    justify-content: space-between;
    border-radius: 14px;
  }

  .nav-links {
    display: none;
  }

  .logo img {
    height: 26px;
  }

  /* ANALYSE STRUCTURÉE */

  .timeline-section {
    margin-top: 60px;
    margin-bottom: 80px;
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .timeline-section .section-title {
    font-size: 36px;
    margin-bottom: 40px;
  }

  .timeline-section .cursive-title {
    font-size: 40px;
  }

  .timeline-container::before {
    display: none;
  }

  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 16px;
  }

  .timeline-item.left,
  .timeline-item.right {
    justify-content: flex-start;
  }

  .card {
    width: 100%;
    padding: 28px 20px;
    min-height: auto;
  }

  .step-number {
    position: static;
    transform: none;
    margin-bottom: 16px;
    margin-top: 32px;
    box-shadow: none;
    align-self: center;
  }

  .card-title {
    font-size: 18px;
  }

  .card-list li {
    font-size: 13px;
    margin-bottom: 10px;
  }

  /* VISION DE L'EXCELLENCE */

  .excellence-section {
    margin-bottom: 80px;
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .excellence-section .section-title {
    font-size: 36px;
    margin-bottom: 30px;
  }

  .excellence-section .cursive-title {
    font-size: 40px;
  }

  .section-subtitle {
    font-size: 14px;
    margin-bottom: 50px;
  }

  .section-subtitle br {
    display: none;
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }

  /* 2 FONCTIONNALITES */

  .tools-section {
    margin-bottom: 80px;
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tools-section .section-title {
  font-size: 36px;
  margin-bottom: 24px;
  }

  .tools-section .cursive-title {
  font-size: 40px;
  }

  .tools-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .tool-card {
    padding: 32px 20px;
    border-radius: 20px;
  }

  .tool-card .card-title {
    font-size: 20px;
  }

  .tool-text {
    padding-right: 0;
    font-size: 14px;
  }

  /* AVIS */

  .reviews-section {
    margin-bottom: 80px;
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .reviews-section .section-title {
    font-size: 36px;
    margin-bottom: 24px;
  }

  .reviews-section .cursive-title {
    font-size: 40px;
  }

  .reviews-section .section-subtitle {
    font-size: 14px;
    margin-bottom: 40px;
  }

  .reviews-section .section-subtitle br {
    display: none;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .review-card {
    padding: 28px 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .review-title {
    font-size: 17px;
  }

  .review-text {
    font-size: 14px;
  }

  /* CTA */

  .cta-section {
    margin-bottom: 80px;
    padding: 0 20px;
  }

  .cta-container {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 32px 20px;
    border-radius: 16px;
  }

  .cta-content {
    max-width: 100%;
  }

  .section-title-cta {
    font-size: 22px;
  }

  .cursive-title-cta {
    font-size: 26px;
  }

  .cta-text {
    font-size: 14px;
  }

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

  /* FOOTER */

  .main-footer {
    padding: 36px 20px 28px 20px;
  }

  .footer-top {
    flex-direction: column;
    gap: 0;
    margin-bottom: 32px;
  }

  .footer-col.brand-col {
    max-width: 100%;
    margin-bottom: 28px;
  }

  .footer-logo img {
    padding-right: 0;
    height: 32px;
    margin-bottom: 14px;
  }

  .footer-desc {
    font-size: 14px;
    line-height: 1.5;
  }

  .footer-col {
    padding: 14px 0;
    border-top: none;
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }

  .footer-col h3 {
    margin-bottom: 12px;
    font-size: 14px;
  }

  .footer-col ul li {
    margin-bottom: 10px;
  }

  .footer-col ul li a {
    font-size: 15px;
  }

  .footer-rangee {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .footer-rangee .footer-col.top-col {
    border-top: none;
    padding: 0;
    align-self: center;
  }

  .footer-col.top-col {
    justify-content: flex-end;
    border-top: none;
    padding: 10px 0 0 0;
  }

  .footer-divider {
    margin-bottom: 20px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .copyright,
  .made-in-france {
    font-size: 13px;
  }

}

@media (min-width: 769px) and (max-width: 1024px) {
  .tools-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  /* CARROUSEL AVIS */
  .reviews-carousel {
    width: 100%;
    overflow-x: hidden;
  }

  .reviews-grid {
    display: flex;
    grid-template-columns: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 40px;
    gap: 24px;
    margin: 0;
    padding: 0 40px 10px 40px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .reviews-grid::-webkit-scrollbar {
    display: none;
  }

  .review-card {
    flex: 0 0 65%;
    scroll-snap-align: center;
  }

  .review-card:nth-child(3) {
    grid-column: unset;
    max-width: none;
  }

  .reviews-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
  }

  .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
    border: 0.5px solid var(--bleu);
    padding: 0;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .dot.active {
    background: var(--bleu);
    width: 22px;
    border-radius: 4px;
  }

  .cta-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 40px 30px;
  }

  .cta-content {
    max-width: 65%;
  }

  .btn-cta {
    width: auto;
  }

    .nav-links {
    display: flex;
    gap: 14px;
  }
  .nav-links a {
    font-size: 12px;
  }
  .navbar {
    gap: 14px;
    padding: 16px 18px;
  }

}


@media (min-width:1025px) and (max-width:1280px) {

  /* SECTION BADGE */

  .section-badge {
    width: auto;
    max-width: 300px;
    padding: 10px 20px;
    font-size: 12px;
  }

  /* TITRES GLOBAUX */

  .section-title {
    font-size: 44px;
  }

  .cursive-title {
    font-size: 50px;
  }

  /* HEADER */

  h1 {
    font-size: 88px;
  }

  .accent {
    font-size: 94px;
  }

  .texte p {
    font-size: 17px;
    margin-top: 30px;
  }

  .navbar {
    gap: 24px;
    padding: 14px 22px;
  }

  .nav-links {
    gap: 20px;
  }

  /* TIMELINE */
  .timeline-section {
    margin-top: 80px;
    margin-bottom: 100px;
    padding: 0 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .card {
    width: 45%;
    padding: 28px;
    min-height: 320px;
  }

  .card-title {
    font-size: 18px;
  }

  .card-list li {
    font-size: 13px;
    margin-bottom: 10px;
  }

  /* EXCELLENCE */
  .excellence-section {
    margin-bottom: 100px;
    padding: 0 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }

  /* 2 FONCTIONNALITÉS */

  .tools-section {
    margin-bottom: 100px;
    padding: 0 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tools-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .tool-text {
    padding-right: 0;
  }

  /* AVIS */

  .reviews-section {
    margin-bottom: 100px;
    padding: 0 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .reviews-carousel {
    width: 100%;
    overflow-x: hidden;
  }

  .reviews-grid {
    display: flex;
    grid-template-columns: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 40px;
    gap: 24px;
    margin: 0;
    padding: 0 40px 10px 40px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .reviews-grid::-webkit-scrollbar {
    display: none;
  }

  .review-card {
    flex: 0 0 65%;
    scroll-snap-align: center;
  }

  .review-card:nth-child(3) {
    grid-column: unset;
    max-width: none;
  }

  .reviews-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
  }

  .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
    border: 0.5px solid var(--bleu);
    padding: 0;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .dot.active {
    background: var(--bleu);
    width: 22px;
    border-radius: 4px;
  }

 
  /* CTA */

  .cta-section {
    margin-bottom: 100px;
    padding: 0 40px;
  }

  .cta-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 40px 30px;
  }

  .cta-content {
    max-width: 65%;
  }

  .btn-cta {
    width: auto;
  }

  /* FOOTER */

  .main-footer {
    padding: 50px 40px 30px 40px;
  }

  .footer-top {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
  }

  .footer-col.brand-col {
    max-width: 280px;
    margin-bottom: 0;
  }

  .footer-col {
    width: auto;
    border-top: none;
    padding: 0;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}


/* ==========================================================================
   NAVBAR MOBILE (< 768px) — menu burger

   Sous cette largeur, les 4 liens ne tiennent plus dans la barre. Ils en
   sortent et deviennent un panneau dépliant sous la barre, ouvert par le
   burger. La barre garde ainsi une longueur justifiée (elle s'aligne sur les
   marges de la page comme le reste du contenu) au lieu d'être une pastille
   étroite contenant seulement le logo et le bouton.
   ========================================================================== */

@media (max-width: 768px) {

  /* ---------- Hero ----------
     Sur un vrai téléphone, la hauteur utile est réduite par les barres du
     navigateur : avec une hauteur fixe et overflow: hidden, la phrase bleue
     sous le titre sortait du header et était coupée. Ici le header garde au
     moins la hauteur de l'écran mais peut grandir si son contenu dépasse. */
  header {
    height: auto;
    min-height: calc(100vh - 30px);
    min-height: calc(100dvh - 30px);
    padding-bottom: 20px;
  }

  /* Titre proportionnel à la largeur (88 px maximum, comme ailleurs) : à 88 px,
     « Découvrez » est plus large qu'un écran de ~390 px, le navigateur le
     colle alors à gauche et le fait déborder à droite, d'où un titre décentré.
     20vw lui laisse ~20 px de marge de chaque côté. */
  h1 {
    font-size: min(88px, 20vw);
  }

  .accent {
    font-size: min(94px, 21.4vw);
  }

  /* Phrase sous le titre : décollée des bords, en gardant ses 2 lignes. */
  .texte p {
    font-size: 18px;
    padding: 0 16px;
  }

  /* Lion du CTA sur téléphone : en filigrane dans le coin bas-droit, tête
     entièrement dans le bloc. L'image est un lion noir sur fond transparent,
     quasi invisible sur le fond sombre : on l'éclaircit et on souligne ses
     contours d'un trait bleu, en le gardant discret derrière le texte. */
  .cta-lion-wrap {
      display: block;
      inset: 0;
      width: 100%;
  }

  .cta-lion {
      width: 118%;
      height: auto;
      left: auto;
      right: -46%;
      top: auto;
      bottom: -34%;
      transform: none;
      filter: brightness(2.2) drop-shadow(0 0 1px rgba(103, 178, 255, 0.6));
      opacity: 0.55;
  }


  .navbar {
    /* Largeur au contenu : logo + bouton + burger, séparés d'un petit espace.
       Le centrage vient de `header { align-items: center }`.
       `gap` annule le `gap: 0` du média 1024px, sinon les éléments se collent. */
    gap: 10px;
    padding: 10px 12px;
  }

  .navbar .btn {
    padding: 9px 14px;
    font-size: 13px;
  }

  /* ---------- Burger ---------- */

  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 0 9px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: transparent;
    border: 0.5px solid rgba(103, 178, 255, 0.35);
    border-radius: 10px;
    cursor: pointer;
  }

  .nav-burger span {
    display: block;
    height: 1.5px;
    background-color: var(--bleu);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  /* Ouvert : les deux barres extrêmes se croisent, celle du milieu s'efface */
  .navbar.is-open .nav-burger span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .navbar.is-open .nav-burger span:nth-child(2) {
    opacity: 0;
  }

  .navbar.is-open .nav-burger span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* ---------- Panneau des liens ---------- */
  /* Annule le `display: none` du média 1024px : le panneau est bien présent,
     simplement replié (visibility + opacity, pour garder la transition). */

  .nav-links {
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    background: rgba(21, 21, 23, 0.95);
    border: 0.5px solid var(--bleu);
    border-radius: 14px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }

  .navbar.is-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-links a {
    display: block;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  /* Le soulignement animé du survol (pensé pour des liens en ligne) n'a plus
     de sens sur des lignes pleine largeur : remplacé par un fond au toucher. */
  .nav-links a::after {
    display: none;
  }

  .nav-links a:hover,
  .nav-links a:active {
    background-color: rgba(103, 178, 255, 0.1);
    color: var(--bleu-clair);
  }

}


/* ==========================================================================
   MENU MOBILE OUVERT — fond assombri
   Quand le menu burger est ouvert (classe body.menu-ouvert posée par le JS),
   la page s'assombrit derrière lui pour qu'il se détache nettement du
   contenu (titres, cartes) qu'il recouvre. La barre passe au-dessus du voile ;
   les fenêtres d'aperçu (z-index 100 et plus) restent au-dessus de tout.
   ========================================================================== */

@media (max-width: 768px) {
  .navbar {
    z-index: 30;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  body.menu-ouvert::after {
    opacity: 1;
    visibility: visible;
  }
}


/* Téléphone : les contours de 0,5 px perdaient un trait (gauche ou du haut)
   sur iPhone, Safari arrondissant ce demi-pixel selon la position du cadre à
   l'écran. 1 px est toujours tracé, dans les mêmes couleurs. Les traits simples
   (séparateurs) restent fins. */
@media (max-width: 768px) {
    .navbar,
    .section-badge,
    .card,
    .tool-card,
    .review-card,
    .cta-container,
    .btn-top svg,
    .nav-burger,
    .nav-links {
        border-width: 1px;
    }
}


/* Téléphone : « Deux outils pour trouver » passe sur deux lignes, et les 10 px
   au-dessus de « votre voie » l'éloignaient trop de « trouver ». */
@media (max-width: 768px) {
    .tools-section .cursive-title {
        margin-top: 0;
    }
}