html {
  scroll-behavior: smooth;
}


/* =======================================================
   FLOU PROGRESSIF EN HAUT DE PAGE (au scroll) */
.top-blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8rem; /* 👉 GÈRE ICI la hauteur totale de la zone */
    z-index: 50;
    pointer-events: none;
}

.blur-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Calque 1 : flou léger, s'étend le plus bas */
.blur-layer-1 {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 60%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 60%);
}

/* Calque 2 : flou moyen, zone intermédiaire */
.blur-layer-2 {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 40%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 40%);
}

/* Calque 3 : flou fort, uniquement tout en haut */
.blur-layer-3 {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    mask-image: linear-gradient(to bottom, black 0%, transparent 20%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 20%);
}
.site-header {
  position: fixed;
  top: 1rem;
  left: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  padding: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem)
           clamp(1.25rem, 1rem + 2vw, 3rem);
  background: transparent;
}

.logo {
  margin-right: auto; /* pousse tout le reste à droite, garde le logo bien à gauche */
  display: flex;
  align-items: center;
}

.logo-img {
  height: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  width: auto;
  display: block;
}

/* MODIF : nav centré sur TOUTE la page, indépendamment du logo */
.main-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
   gap: clamp(0.8rem, 0.6rem + 0.8vw, 1.5rem);

  padding: 0.25rem 2rem; /* avant : 0.4rem 1.1rem */

  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;

  background: rgba(255,255,255,0.03);

  backdrop-filter: blur(9px); /* avant : 6px */
  -webkit-backdrop-filter: blur(12px);
}

.nav-link {
  position: relative;
  z-index: 2;
  color: #fff;
  text-decoration: none;
  font-family: 'IntelOneMono', monospace;
  font-weight: 400;
  font-size: clamp(0.65rem, 0.6rem + 0.25vw, 0.8rem);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.nav-link.active {
  color: #1a1a1a;
}

.nav-pill {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 1.5rem;
  border-radius: 999px;
  background: #F3FF9D;
  z-index: 1;
  transition: left 0.35s ease, width 0.35s ease;
}

@media (max-width: 768px) {
  .main-nav {
    display: none;
  }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex; /* MODIF : sert au centrage vertical global */
  align-items: center; /* MODIF : centre le contenu verticalement au milieu de la page */
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}

/* MODIF : contenu positionné dans les 50% droits de la page, texte aligné à gauche à l'intérieur */
.hero-content {
  width: 50%;
  margin-left: 50%; /* pousse le bloc dans la moitié droite */
  text-align: left; /* MODIF : justifié à gauche (plus centré à droite comme avant) */
  padding: 0 clamp(1.25rem, 1rem + 2vw, 3rem);
  box-sizing: border-box;
}

.hero-title {
  font-family: 'ITCGaramond', serif;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  font-weight: 400;
  color: #F3FF9D;
  line-height: 0.85;
  margin: 0;
  text-transform: uppercase; /* MODIF : tout en majuscule */
}

.hero-subtitle {
  font-family: 'IntelOneMono', monospace; /* MODIF : typo demandée pour cette phrase */
  font-weight: 200; 
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase; /* déjà présent, gardé */
  margin-top: 0.5rem;
}

.crack-outline {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    overflow: hidden;

    pointer-events: none;
    user-select: none;

    z-index: 1;
}

.crack-outline img {
    display: block;
    width: 90%;
    height: auto;
    margin-left: -2%;
    margin-bottom: -1%;

}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: 'ChivoMono', monospace;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 10;
  text-decoration: none; /* AJOUT : enlève le soulignement par défaut des liens */
  cursor: pointer; /* AJOUT : curseur main au survol */
  animation: float 2.5s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-8px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

.hero-bottom-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}


/* =======================================================
   LE STUDIO */

.studio-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F6F4EA 8%,
        #EAE8DE 15%,
        #E7E5D1 45%,
        #E6DFB8 80%,
        #F0E2A3 100%
    );
}

.studio-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: clamp(5rem, 7vw, 8rem) clamp(1.5rem, 3vw, 3rem) 4rem;

}

.studio-title {
    margin: 0;
    font-family: 'ITCGaramond', serif;
    font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
    font-weight: 400;
    color: #1a1a1a;
    line-height: 0.85;
    text-transform: uppercase;
}

.studio-line {
    width:100%;
    height: 0.5px;
    background:#000000;
    margin:
        .5rem 0
        4rem;
}

.studio-text-block {
    width: 45%;
    margin-left: 55%; 
    box-sizing: border-box;
}

.studio-text-paragraph {
    margin: 0 0 2rem;
    font-family: 'ChivoMono', monospace;
    font-size: clamp(1rem, 0.85rem + 0.6vw, 1.2rem); /* MODIF : plus grand */
    font-weight: 200;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #707070; /* MODIF : gris */
    text-align: left;
}
.studio-text-paragraph:last-child {
    margin-bottom: 0;
}
.studio-text-paragraph strong {
    font-weight: 500;
    color: #000000; 
}
.studio-link {
    color: #707070; 
    font-weight: 200;
    text-decoration: underline;
    transition: font-weight 0.2s ease;
}
.studio-link:hover {
    font-weight: 500;
    color: #F3FF9D;
}

/* =======================================================
   TABLETTE */
@media (max-width: 991px) {
    .studio-container {
        padding: 5rem 2rem;
    }

    .studio-text-block {
        width: 65%;
        margin-left: 35%;
    }
}

/* =======================================================
   MOBILE
======================================================= */
@media (max-width: 768px) {
    .studio-container {
        padding: 4rem 1.5rem;
    }

    .studio-line {
        margin: 1rem 0 2.5rem;
    }

    .studio-text-block {
        width: 100%;
        margin-left: 0;
    }

    .studio-text-paragraph {
        font-size: clamp(0.9rem, 3.5vw, 1.1rem);
    }
}


/* =======================================================
   LE MONDE CHANGE*/
.change-section {
    position: relative;
    width: 100%;
    background: linear-gradient(
        180deg, 
        #F0E2A3 0%,
        #F0E2A3 10%,
        #E7DDB3 20%,
        #E1DABC 30%,
        #D4D1BE 50%,
        #9D9F9B 90%,
        #959595 100%
    );
}

.change-container {
    max-width: 75rem;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem) 2rem clamp(2rem, 2rem + 2vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.change-intro-line {
    margin: 0;
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem);
    line-height: 1.2;
    color: #1a1a1a;
}

.change-divider {
    width: 0.5px;
    height: clamp(3.5rem, 2.8rem + 4.5vw, 5rem);
    background: #A0A0A0;
    margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0;
}

.change-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}


.change-image {
    display: block;
    width: 100%;
    max-width: 45rem;
    height: auto;
    border-radius: 1.2rem;
    object-fit: cover;
    mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

.change-outro {
    width: 100%;
    max-width: none;
    margin-top: -6rem;
    position: relative;
    z-index: 2;
}

.change-outro-line {
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem);
    line-height: 1.2;
    color: #000000;
    margin: 0 0 1.5rem;
}

.change-outro-bold {
    font-weight: 400;
    margin-bottom: 0;
    color: #F3FF9D;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .change-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .change-outro {
        margin-top: -2rem;
    }

    .change-image {
        max-width: 100%; 
    }
}




/* =======================================================
   APPROCHE*/

.approche-section {
    position: relative;
    width: 100%;
    background: linear-gradient(
        180deg,
        #959595 0%,
#9D9F9B 10%,
#D4D1BE 50%,
#E1DABC 70%,
#E7DDB3 80%,
#F0E2A3 90%,
#F0E2A3 100%
    );
}

.approche-container {

    max-width:1800px;
    width:100%;
    box-sizing:border-box;
    margin:0 auto;
    padding:
        2.5rem
        clamp(1.5rem,3vw,3rem)
        0rem;
}

.approche-title {
    margin:0;
    font-family:'ITCGaramond', serif;
    font-size:clamp(2.5rem,1.5rem + 4vw,4rem);
    font-weight:400;
    color:#1a1a1a;
    line-height:.85;
    text-transform:uppercase;
}

.approche-line {
    width:100%;
    height: 0.5px;
    background:#000000;
    margin:
        .5rem 0
        4rem;
}

.approche-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(3rem, 2.5rem + 3vw, 5rem);
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 clamp(1rem, 1rem + 1vw, 2rem);
}

.approche-block {
    max-width: 45rem;
}

.approche-block-title {
    margin: 0 0 0.75rem;
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}

.approche-block-text {
    margin: 0;
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem);
    line-height: 1.2;
}

/* ===== Bloc gris (Générer) ===== */
.approche-block-grey .approche-block-title,
.approche-block-grey .approche-block-text {
    color: #707070; 
}

/* ===== Bloc noir (Produire) ===== */
.approche-block-black .approche-block-title,
.approche-block-black .approche-block-text {
    color: #000000; 
}

@media (max-width: 768px) {
    .approche-content {
        gap: 2.5rem;
        padding: 2.5rem 0;
    }

    .approche-block-title {
        font-size: clamp(1.6rem, 8vw, 2.2rem);
    }
}


/* =======================================================
   TABLEAU COMPARATIF (dans Notre Approche) */
.compare-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 3vw, 4rem);
    margin-top: clamp(3rem, 2.5rem + 3vw, 5rem);
    padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    border-top: 0.5px solid #000000;
}

.compare-col {
    position: relative;
    padding-left: clamp(1.5rem, 2vw, 2.5rem);
}

.compare-col:first-child {
    padding-left: 0;
}

.compare-col:last-child {
    border-left: 0.5px solid #000000;
    padding-left: clamp(2.5rem, 3vw, 4rem); 
}

.compare-col-title {
    display: inline-flex;
    align-items: center;
    min-height: 1.2rem;
    margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 3rem;
    padding: 1rem 1.25rem 0.5rem 1.25rem;
    font-family: 'ITCGaramond', serif;
    font-style: italic;
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    font-weight: 400;
    color: #707070;
    line-height: 0.5;
    background: #F3FF9D;
    border-radius: 1.5rem;
}
.compare-row {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 0.5px solid #000000;
    font-family: 'ChivoMono', monospace;
    font-weight: 500;
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem);
    color: #1a1a1a;
    text-transform: uppercase;
}

.compare-row:last-child {
    border-bottom: none; /* pas de ligne après le dernier item, comme sur ta photo */
    margin-bottom: 0;
    padding-bottom: 0;
}

/* =======================================================
   RESPONSIVE
======================================================= */
@media (max-width: 768px) {
    .compare-table {
        grid-template-columns: 1fr;
        row-gap: 2.5rem;
    }

    .compare-col:last-child {
        border-left: none;
        padding-left: 0;
    }

    .compare-col-title {
        font-size: clamp(1.3rem, 5vw, 1.7rem);
    }
}


/* =======================================================
   CITATION / L'IA NE REMPLACE PAS
======================================================= */
.text-quote-section {
    position: relative;
    width: 100%;
    background: linear-gradient(
        180deg,
        #F0E2A3 0%,
#F6F4EA 100%);
}

.text-quote-container {
    max-width: 1800px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: clamp(4rem, 5vw, 7rem) clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 3vw, 4rem);
}

/* ===== Petit texte du haut (mono, normal) ===== */
.text-quote-small {
    margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem);
    line-height: 1.2;
    color: #1a1a1a;
}

.text-quote-big {
    margin: 0;
    font-family: 'ITCGaramond', serif;
    font-style: italic;
    font-size: clamp(2.5rem, 1.8rem + 4.5vw, 4.5rem);
    font-weight: 400;
    line-height: 1;
    color: #B7B7B4; /* 👉 GÈRE ICI la nuance de gris exacte */
}

/* =======================================================
   RESPONSIVE
======================================================= */
@media (max-width: 768px) {
    .text-quote-container {
        padding: 3rem 1.5rem;
    }

    .text-quote-big {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }
}

/* =======================================================
   EXEMPLES
======================================================= */
.examples-section {
    position: relative;
    width: 100%;
    background: linear-gradient(
        180deg,
        #F6F4EA 0%,
        #FDFCF5 50%,
        #FDFCF5 85%,
        #F0E2A3 100%); /* 👉 GÈRE ICI la couleur de fond */
}

.examples-container {

    max-width: 1800px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: clamp(4rem, 5vw, 7rem) clamp(4rem, 8vw, 8rem);
}

.examples-container-inner {
    max-width: 100%; 
    margin: 0 auto;
}

.examples-row {
    display: grid;
    grid-template-columns: clamp(9rem, 12vw, 14rem) minmax(18rem, 32rem) 1fr; /* MODIF : vidéo agrandie de 26rem à 32rem max */
    align-items: center;
    column-gap: clamp(2.5rem, 3.5vw, 4rem);
    margin-bottom: clamp(4rem, 5vw, 7rem);
}

.examples-row:last-child {
    margin-bottom: 0;
}

/* ===== Titre à gauche (déborde un peu sur la vidéo) ===== */
.examples-title {
    position: relative;
    z-index: 2;
    margin: 0;
    margin-right: 0; 
    font-family: 'ChivoMono', monospace;
    font-weight: 500;
    font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
    line-height: 1.15;
    color: #1a1a1a;
    text-transform: uppercase;
}

.examples-video-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 16 / 10; 
    border-radius: 0.5rem;
    overflow: hidden;
    background: #A8A8A8;
}

.examples-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Légende à droite ===== */
.examples-caption {
    position: relative;
    height: 100%;
    min-height: 12rem; 
}

.examples-caption-lead {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin: 0;
    max-width: 50rem; 
    font-family: 'ChivoMono', monospace;
    font-weight: 300;
    font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
    line-height: 1.2;
    color: #000000;
    text-align: left;
}

.examples-caption-text {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    max-width: 40rem;
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
    line-height: 1.2;
    color: #707070;
    text-align: left;
}

/* =======================================================
   TABLETTE
======================================================= */
@media (max-width: 991px) {
    .examples-row {
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
    }

    .examples-title {
        margin-right: 0;
    }

    .examples-caption {
        position: static;
        min-height: 0;
        height: auto;
    }

    .examples-caption-lead,
    .examples-caption-text {
        position: static;
        transform: none;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .examples-caption-text {
        margin-bottom: 0;
    }
}

/* =======================================================
   MOBILE
======================================================= */
@media (max-width: 768px) {
    .examples-container {
        padding: 4rem 1.5rem;
    }

    .examples-row {
        margin-bottom: 3rem;
    }

    .examples-video-wrapper {
        aspect-ratio: 4 / 3;
    }
}


/* =======================================================
SERVICES*/
.services-section {
    position: relative;
    width: 100%;
    background: linear-gradient(
        180deg,
        #F0E2A3 0%,
        #EAE8DE 50%,
        #F6F4EA 100%
    );
}

.services-container {
    max-width: 1800px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
}

.services-title {
    margin: 0;
    font-family: 'ITCGaramond', serif;
    font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
    font-weight: 400;
    color: #000000;
    line-height: 0.85;
}

.services-line {
    width: 100%;
    height: 0.5px;
    background: #000000;
    margin:
        .5rem 0
        4rem;
}

.services-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(2rem, 3vw, 4rem);
}

.services-col {
    position: relative;
    padding-left: clamp(1.5rem, 2vw, 2.5rem);
    border-left: 0.5px solid #000000;
}

.services-col:first-child {
    border-left: none;
    padding-left: 0;
}

.services-col-number {
    font-family: 'IntelOneMono', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.85rem);
    color: #7A7A7A;
    margin-bottom: 0.8rem;
}

.services-col-title {
    display: inline-flex; /
    align-items: center; 
    min-height: 1.2rem; /* 👉 GÈRE ICI la hauteur minimale de la pill (utile pour les titres 2 lignes) */
    margin: 0 0 3rem;
    padding:  1rem 1.25rem 0.5rem 1.25rem;
    font-family: 'ITCGaramond', serif;
    font-style: italic;
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    font-weight: 400;
    color: #707070;
    line-height: 0.5; 
    background: #F3FF9D;
    border-radius: 1.5rem; 
}
.services-block {
    margin-bottom: 2.2rem;
}

.services-block:last-child {
    margin-bottom: 0;
}

.services-item-title {
    margin: 0 0 0.5rem;
    font-family: 'ChivoMono', monospace;
    font-weight: 400;
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem);
    line-height: 1.;
    color: #1a1a1a;
    text-transform: uppercase;
}

.services-item-text {
    margin: 0;
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
    line-height: 1.2;
    color: #707070;
}

.services-item-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-item-list li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 1.3rem;
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
    line-height: 1.2;
    color: #707070;
}

.services-item-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #4A4A4A;
}

/* =======================================================
   TABLETTE
======================================================= */
@media (max-width: 991px) {
    .services-columns {
        grid-template-columns: 1fr 1fr;
        row-gap: 3rem;
    }
}

/* =======================================================
   MOBILE
======================================================= */
@media (max-width: 768px) {
    .services-container {
        padding: 4rem 1.5rem;
    }

    .services-columns {
        grid-template-columns: 1fr;
        row-gap: 3rem;
    }

    .services-col {
        border-left: none;
        padding-left: 0;
    }

    .services-col-title {
        font-size: clamp(1.3rem, 5vw, 1.7rem);
    }
}

/* ===== CTA bas de section ===== */
.services-cta {
    margin-top: clamp(3rem, 2rem + 3.5vw, 5rem); /* 👉 GÈRE ICI l'espace au-dessus, entre les colonnes et ce bloc */
}

.services-cta-text {
    margin: 0 0 1.25rem;
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem);
    line-height: 1.2;
    color: #A1A1A1;
}

.services-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.1rem;
    background: #F3FF9D;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'IntelOneMono', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.85rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1a1a1a;
    /* MODIF : transition sur background ET transform */
    transition: background 0.3s ease, transform 0.3s ease;
}

.services-cta-button:hover {
    background: #FFFFFF;
    transform: scale(1.05);
}

.services-cta-icon {
    width: 2rem; 
    height: 1rem;
    display: block;
}

/* =======================================================
   BANDE CITATION */
.quote-banner {
    position: relative;
    width: 100%;
    box-sizing: border-box; /* AJOUT : sécurité */
    overflow: hidden; /* AJOUT : empêche tout débordement visuel de la section */
    background: #F3FF9D;
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.quote-banner-text {
    margin: 0;
    max-width: min(100rem, 90vw); /* MODIF : ne dépasse jamais 90% de la largeur d'écran */
    width: 100%;
    box-sizing: border-box;
    font-family: 'ITCGaramond', serif;
    font-style: italic;
    font-size: clamp(1.8rem, 1.2rem + 3.5vw, 3.25rem);
    font-weight: 400;
    line-height: 1;
    color: #707070;
    text-align: center;
}

/* =======================================================
   RESPONSIVE
======================================================= */
@media (max-width: 768px) {
    .quote-banner {
        padding: 2rem 1.5rem;
    }

    .quote-banner-text {
        font-size: clamp(1.2rem, 5vw, 1.75rem);
    }
}


/* =======================================================
   PROMPTOLOG
======================================================= */
.promptolog-section {
    position: relative;
    width: 100%;
    background: linear-gradient(
    180deg,
    #5B5B5B 0%,
    #BC4400 25%,
    #737373 60%,
    #9C9C9C 100%
);/* 👉 GÈRE ICI la couleur/dégradé de fond */
}

.promptolog-container {
    max-width: 1800px; /* MODIF : même largeur max que studio/services/faq */
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: clamp(4rem, 5vw, 7rem) clamp(1.5rem, 3vw, 3rem); /* MODIF : marges standards du site */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

/* ===== Titre en SF Pro Light ===== */
.promptolog-title {
    margin: 0;
    font-family: 'SF Pro Display', monospace;
    font-weight: 200; 
    font-size: clamp(4rem, 2.5rem + 6vw, 7rem);
    line-height: 1;
    color: #D0D0D0; 
}

.promptolog-description {
    margin: 1.5rem 0 0;
    max-width: 28rem;
    font-family: 'ChivoMono', monospace;
    font-size: clamp(1rem, 0.85rem + 0.6vw, 1.2rem);
    font-weight: 200;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #D0D0D0;
}

/* ===== Barre verticale ===== */
.promptolog-divider {
    width: 0.5px;
    height: clamp(3.5rem, 2.8rem + 4.5vw, 5rem);
    background: #D0D0D0;
    margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0;
    align-self: center; 
}

/* ===== Image ===== */
.promptolog-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.promptolog-image {
    display: block;
    width: 100%;
    max-width: 45rem;
    height: auto;
    border-radius: 1.2rem;
    object-fit: cover;
    /* AJOUT : même effet de fondu que change-image */
    mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

/* ===== Texte du bas ===== */
.promptolog-outro {
    width: 100%;
    max-width: none;
    margin-top: -4rem; /* MODIF : négatif pour chevaucher l'image, au lieu de 2rem */
    position: relative;
    z-index: 2;
    align-self: center;
    text-align: center;
}
.promptolog-outro-line {
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem);
    line-height: 1.3;
    color: #1a1a1a;
    margin: 0 0 1.25rem;
}

.promptolog-outro-bold {
    font-weight: 500;
    margin-bottom: 0;
}

/* ===== Bouton ===== */
.promptolog-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem; /* AJOUT : espace entre texte et icône */
    align-self: center;
    margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    padding: 0.5rem 1.1rem;
    background: #F3FF9D;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'IntelOneMono', monospace;
    font-weight: 400;
    font-size: clamp(0.65rem, 0.6rem + 0.2vw, 0.78rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1a1a1a;
    transition: background 0.3s ease, transform 0.3s ease;
}

.promptolog-button:hover {
    background: #FFFFFF;
    transform: scale(1.05);
}

.promptolog-button-icon {
    width: 1rem;
    height: 1rem;
    display: block;
}

/* =======================================================
   RESPONSIVE
======================================================= */
@media (max-width: 768px) {
    .promptolog-container {
        padding: 3rem 1.25rem;
        align-items: center;
        text-align: center;
    }

    .promptolog-title {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .promptolog-description {
        max-width: 100%;
    }
}

/* =======================================================
   FAQ */
.faq-section {
    position: relative;
    width: 100%;
    background: linear-gradient(
    180deg,
    #9C9C9C 0%,
    #A8A8A6 25%,
    #BABABA 40%,
    #C4C0AE 55%,
    #E8DCA8 80%,
    #F5EFC9 90%,
    #FFFFFF 100%
);
}

.faq-container {

    max-width: 1800px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: clamp(4rem, 5vw, 6.5rem) clamp(1.5rem, 3vw, 3rem);
}

.faq-title {
    margin: 0 0 clamp(3rem, 2rem + 5vw, 6rem);
    font-family: 'ITCGaramond', serif;
    font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
    font-weight: 400;
    color: #1a1a1a;
    line-height: 0.85;
    text-transform: uppercase;
}

.faq-list {
    max-width: 60rem;
    margin-left: auto;
}

.faq-item {
    position: relative;
    border-top: 0.5px solid #000000;
}

.faq-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000000;
    transform: translate(-50%, -50%);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1.25rem 0 1.25rem 0.75rem;
    text-align: left;
    font-family: 'ChivoMono', monospace;
    font-weight: 500;
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
    color: #1a1a1a;
    text-transform: uppercase;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s ease,
                padding 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    padding-left: 0.75rem;
}

.faq-answer-text {
    margin: 0 0 1.5rem;
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
    line-height: 1.2;
    color: #707070;
}

.faq-item.active .faq-answer {
    max-height: 20rem;
    opacity: 1;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s ease 0.1s,
                padding 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =======================================================
   RESPONSIVE
======================================================= */
@media (max-width: 991px) {
    .faq-list {
        max-width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .faq-container {
        padding: 4rem 1.5rem;
    }

    .faq-title {
        margin-bottom: 3rem;
    }
}

/* =======================================================
   CONTACT / FOOTER*/
.footer-section {
    position: relative;
    width: 100%;
    background: #101010; 
}

.footer-container {
    max-width: 1800px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: clamp(4rem, 5vw, 7rem) clamp(1.5rem, 3vw, 3rem);
}

.footer-title {
    margin: 0 0 clamp(1.7rem, 1.2rem + 1.8vw, 3rem); 
    font-family: 'ITCGaramond', serif;
    font-style: italic;
    font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
    font-weight: 400;
    line-height: 0.95;
    color: #FFFFFF;
}

.footer-title em {
    font-style: italic; 
}


.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-text {
    margin: 0;
    max-width: 25rem;
    font-family: 'ChivoMono', monospace;
    font-weight: 200;
    font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
    line-height: 1.2;
    color: #707070; 
}

.footer-email {
    font-family: 'ChivoMono', monospace;
    font-weight: 300;
    font-size: clamp(1.3rem, 1rem + 1.5vw, 1.8rem);
    color: #FFFFFF; 
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-email:hover {
    color: #F3FF9D; 
}

/* =======================================================
   RESPONSIVE */
@media (max-width: 768px) {
    .footer-container {
        padding: 3rem 1.5rem;
    }

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

    .footer-email {
        font-size: clamp(1.1rem, 5vw, 1.4rem);
    }
}

/* =======================================================
   RESPONSIVE GLOBAL — CORRECTIONS
======================================================= */

/* ===== Empêche le scroll du fond quand le menu mobile est ouvert ===== */
body.menu-open {
    overflow: hidden;
}

/* ===== Burger : caché par défaut (desktop) ===== */
.burger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000;
}

.burger-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger-btn.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.burger-btn.active span:nth-child(2) {
    opacity: 0;
}
.burger-btn.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===== Menu mobile plein écran ===== */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: #101010;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-nav-link {
    font-family: 'ChivoMono', monospace;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-nav-link:hover {
    color: #F3FF9D;
}

/* ===== Afficher le burger / masquer nav desktop en mobile ===== */
@media (max-width: 768px) {
    .burger-btn {
        display: flex;
    }
}

/* =======================================================
   HERO — RESPONSIVE
======================================================= */
@media (max-width: 991px) {
    .hero-content {
        width: 70%;
        margin-left: 30%;
    }
}

@media (max-width: 768px) {
    .hero-content {
        width: 100%;
        margin-left: 0;
        text-align: left;
        padding: 0 1.5rem;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .crack-outline img {
        width: 130%; /* évite que le contour "CRACK" devienne illisible, trop petit */
        margin-left: -15%;
    }
}

/* =======================================================
   EXEMPLES — TABLETTE (palier manquant entre 768 et 991)
======================================================= */
@media (max-width: 991px) {
    .examples-container {
        padding: clamp(3rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
    }
}

/* =======================================================
   APPROCHE — padding responsive manquant
======================================================= */
@media (max-width: 768px) {
    .approche-container {
        padding: 2rem 1.5rem 0;
    }
}

/* =======================================================
   PROMPTOLOG — palier tablette manquant
======================================================= */
@media (max-width: 991px) {
    .promptolog-title {
        font-size: clamp(3rem, 6vw, 4.5rem);
    }
}

/* =======================================================
   STUDIO — sécurité tablette (déjà globalement géré, vérif finale)
======================================================= */
@media (max-width: 480px) {
    .studio-title,
    .services-title,
    .faq-title,
    .approche-title {
        font-size: clamp(2rem, 10vw, 2.5rem); /* évite que les grands titres débordent sur très petit écran */
    }
}

/* =======================================================
   COMPARE-TABLE / SERVICES-COL-TITLE — pill trop large sur très petit écran
======================================================= */
@media (max-width: 480px) {
    .compare-col-title,
    .services-col-title {
        padding: 0.75rem 1rem 0.4rem;
    }
}

/* =======================================================
   TOP-BLUR-OVERLAY — réduit en mobile (moins de place à "manger")
======================================================= */
@media (max-width: 768px) {
    .top-blur-overlay {
        height: 5rem;
    }
}