html, body {
  background: #fff;
}

body {
  overflow-x: hidden;
}

/* ------------------------------
   Fonts
--------------------------------- */

/* HK Grotesk - Regular */
@font-face {
  font-family: "HK Grotesk";
  src: url("../fonts/HKGrotesk-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* HK Grotesk - SemiBold */
@font-face {
  font-family: "HK Grotesk";
  src: url("../fonts/HKGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* HK Grotesk - Bold */
@font-face {
  font-family: "HK Grotesk";
  src: url("../fonts/HKGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* AV Estiana – Regular */
@font-face {
  font-family: "AV Estiana";
  src: url("../fonts/av-estiana-regular.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* AV Estiana – Bold */
@font-face {
  font-family: "AV Estiana";
  src: url("../fonts/av-estiana-bold.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* AV Estiana – italic */
@font-face {
  font-family: "AV Estiana";
  src: url("../fonts/av-estiana-italic.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* LINKS */
a {
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 400 !important; /* enlève le bold */
    text-transform: uppercase;

}

a:hover {
  opacity: 0.7;
}





/* ------------------------------
   Variables
--------------------------------- */

:root {
  --page-bg: #ffffff;
  --text: #111111;
  --muted: #666666;
  --border: #111111;
  --accent: #000000;
  --max-width: 1320px;

  --grid-color: rgb(153, 153, 153); /* lignes & points */
  --grid-step: 190px;               /* distance entre colonnes */

  --cta-bg: rgb(51, 51, 51);        /* Make it simple but magnetic */
}



:root {
  --font-sans: "HK Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-serif: "AV Estiana", Georgia, "Times New Roman", serif;
}



/* ------------------------------
   lignes horizontales 
--------------------------------- */
.hr-grid {
  width: 100%;
  height: 1px;
  background: var(--grid-color);
  opacity: 0.25;
  margin: 2rem 0;
}


/* ------------------------------
   Reset
--------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
   font-family: var(--font-sans);
  color: var(--text);
  background: var(--page-bg);
  line-height: 1.5;
  min-height: 100vh;
}
/* RESET ANTI-ESPACE-PROJET */
.page-project body,
.page-project main,
.page-project .case-hero,
.page-project .case-hero .container,
.page-project .case-hero-grid,
.page-project .case-content,
.page-project .case-main,
.page-project .case-media-stack {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Supprime l’espace créé par la grille verticale si elle existe */
.page-project .project-grid-bg {
  display: none !important;
}

/* Supprime potentiels padding implicites */
.page-project main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Colle la toute première image contre le header */
.page-project .case-media-stack > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Neutralise tout pseudo-espace */
.page-project .case-hero::before,
.page-project .case-hero::after {
  content: none !important;
  display: none !important;
}


/* ------------------------------
   Lien d’évitement
--------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 1000;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}
















/* ------------------------------
   Layout global
--------------------------------- */

.section {
  padding: 7rem 0;
}



.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ------------------------------
   Header + top menu
--------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  border-bottom: 1px solid var(--grid-color);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header.is-scrolled .site-header-inner{
  padding: 0.9rem 1.5rem 0.6rem;
}

.site-brand {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* nouveau wrapper centré */
.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.3rem 1.5rem 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: transparent;
}

/* header plus compact au scroll */
.site-header.is-scrolled .site-header-inner{
  padding: 0.9rem 1.5rem 0.6rem;
}




/* =============================
   HEADER — NAV DESKTOP (QUI / QUE / QUOI / DONT / OÙ)
============================= */

.top-nav{
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  gap: 1.6rem;              /* espace entre les mots */
  flex-wrap: nowrap;
}

.top-nav a{
  position: relative;
  display: inline-block;
  padding: .25rem 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 1;               /* évite un “fade” permanent */
}

/* underline animé (indépendant du text-decoration) */
.top-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  height:1px;
  width:0%;
  background: currentColor;
  transition: width .25s ease;
  opacity: .9;
}

.top-nav a:hover::after,
.top-nav a:focus-visible::after{
  width:100%;
}


/*///// burger + menu mobile////*/
/* Bouton burger (caché en desktop) 
.nav-toggle{
  display: inline-flex;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none !important;          /* ← suppression du contour 
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle:hover{
  opacity: 0.6;
}
.nav-toggle:active{
  transform: scale(0.96);
}
*/

.nav-toggle-bars{
  width:28px;
  height:2px;
  background: var(--text);
  position:relative;
  display:block;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background: var(--text);
}
.nav-toggle-bars::before{ top:-6px; }
.nav-toggle-bars::after{ top: 6px; }

/* Menu mobile (caché par défaut) */
.mobile-nav{
  display:none;
  text-align: center;      /* centre le texte */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.6rem 1.5rem 1rem;
}

.mobile-nav a{
  display:block;
  text-decoration:none;
  color: var(--text);
  padding: 0.9rem 0;
  border-top: 1px solid var(--grid-color);
}


/* ============================
   NAV "QUI QUE QUOI..." — FIX RESPONSIVE
============================ */

/* Bouton burger (caché en desktop) */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle:hover{ opacity: .6; }
.nav-toggle:active{ transform: scale(.96); }

/* Mobile/tablette : nav en grille -> alignement parfait */
@media (max-width: 900px) {
  .top-nav{ display:none; }

  .nav-toggle{
    display: inline-flex; /* ✅ visible en mobile */
  }

  .site-header.is-open .mobile-nav{
    display:block;
  }

  .site-header.is-open .mobile-nav{
    display:block;         /* le menu déroulant apparaît */
  }
}





/* =============================
   HERO HOME — animation en BG test
============================= */

#heroDots{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none; /* on écoute les events sur window */
    background: transparent !important;

}

.hero-content{ position:relative; z-index:1; }


/* =============================
   HERO HOME — SECTION PRINCIPALE
============================= */
/* Section principale de la home */

.page-home .home-hero {
  position: relative;
  height: 90vh;
  min-height: 660px;
  padding-block: 5.5rem; /* même espace en haut ET en bas */

  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Canvas en fond */
.page-home #heroDots{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;                 /* <- clé */
  pointer-events: none;
  background: transparent !important;
}

/* Contenu au-dessus */
.page-home .home-hero-orbit-wrapper,
.page-home .home-hero-inner{
  position: relative;
  z-index: 2;                 /* <- clé */
}

/* Wrapper central : TEXTE + ORBITE */
.home-hero-orbit-wrapper {
  position: relative;
  display: inline-block;
  margin-top: 1.8rem;
  z-index: 1;
}

/* =============================
   FIX : HERO HOME centré
============================= */
.page-home .home-hero .home-hero-inner{
  width: 100%;
  justify-content: center;   /* <- clé */
}

/* Optionnel mais ultra-sûr */
.page-home .home-hero-center{
  width: 100%;
  text-align: center;
}

/* Le texte au centre */
.home-hero-hello {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}


.home-hero-title {
  margin: 0 auto 1rem;
  max-width: 30ch;
  line-height: 1.1;
  font-family: var(--font-serif);
  font-size: clamp(3.1rem, 4vw, 4.2rem);
}

.home-hero-role {
  display: inline-block;
  margin-left: 0.25rem;
  font-weight: 900; /* BOLD */
}


/* =============================
   FIX FINAL — HERO HOME CENTRÉ
============================= */

.home-hero {
  display: flex;
  align-items: center;
  justify-content: center; /* ← centre horizontalement */
  text-align: center
}

.home-hero-inner {
  width: 100%;
  display: flex;
  justify-content: center; /* ← clé n°1 */
}

.home-hero-orbit-wrapper {
  margin-inline: auto;     /* ← clé n°2 */
  text-align: center;
}

.home-hero-center {
  width: 100%;
  text-align: center;      /* ← clé n°3 */
}


/* Flip animation */
@keyframes flipOutIn {
  0%   { transform: rotateX(0deg);   opacity: 1; }
  50%  { transform: rotateX(90deg);  opacity: 0; }
  51%  { transform: rotateX(-90deg); opacity: 0; }
  100% { transform: rotateX(0deg);   opacity: 1; }
}
.home-hero-role.is-flipping {
  animation: flipOutIn 0.5s ease;
  transform-origin: 50% 100%;
}




.home-hero-inner {
  position: relative;
  z-index: 1;
}


/* =============================
   ORBITE DES PASTILLES
============================= */

/* Cercle d’orbite centré autour du texte */
.home-hero-pills {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;         /* diamètre approximatif → tu peux ajuster */
  height: 220px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Pastille individuelle */
.home-pill-block {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  transform-origin: -140px 0; /* ← rayon orbit */
  pointer-events: auto;
}

/* Style pastille */
.home-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 1.2rem;
  border: 1px solid #000;
  background: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-pill-arrow {
  font-size: 0.8rem;
}

/* Label au hover */
.home-pill-label {
  background: #111;
  color: #fff;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s, transform .25s;
}

.home-pill-block--ou .home-pill-label { transform: translateX(6px); }

.home-pill-block:hover .home-pill-label,
.home-pill-block:focus-within .home-pill-label {
  opacity: 1;
  transform: translateX(0);
}

/* =============================
   ANIMATIONS D’ORBITE
============================= */

.home-pill-block--ou {
  animation: orbit-ou 26s linear infinite;
}
@keyframes orbit-ou {
  from { transform: rotate(0deg) translateX(-220px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(-200px) rotate(-360deg); }
}

.home-pill-block--qui {
  animation: orbit-qui 20s linear infinite;
}
@keyframes orbit-qui {
  from { transform: rotate(0deg) translateX(-250px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(-250px) rotate(-360deg); }
}

.home-pill-block--que {
  animation: orbit-que 30s linear infinite;
}
@keyframes orbit-que {
  from { transform: rotate(0deg) translateX(-300px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(-280px) rotate(-360deg); }
}

.home-pill-block--dont {
  animation: orbit-dont 62s linear infinite;
}
@keyframes orbit-dont {
  from { transform: rotate(0deg) translateX(-350px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(-350px) rotate(-360deg); }
}

.home-pill-block--quoi {
  animation: orbit-quoi 54s linear infinite;
}
@keyframes orbit-quoi {
  from { transform: rotate(0deg) translateX(-250px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(250px) rotate(-360deg); }
}












/* ------------------------------
   Hero : citation + grille lignes
--------------------------------- */

.hero {
  padding-top: 10rem;
  padding-bottom: 10rem;
  background: transparent;
  position: relative;
  isolation: isolate;
}

/* lignes verticales uniquement à partir d’ici */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  pointer-events: none;
  background-image: linear-gradient(
      to right,
      var(--grid-color) 1px,
      transparent 1px
    );
  background-size: var(--grid-step) 1px;   /* 190px */
  background-position: center top;        /* même centrage que Missions */
  opacity: 0.28;
  z-index: 1;
}

.hero-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.hero-quote-container {
  max-width: 780px;
  margin-left: 1.5rem;
}

.hero-quote {
 font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 1.1;
  margin: 0;
  transition: opacity 0.4s ease;
}

.hero-author {
  margin-top: 0.4rem; /* un peu plus d’air sous la quote */
  font-size: 1rem; /* ← agrandit le nom */
  letter-spacing: 0.18em;   /* important en caps */
  text-transform: uppercase;

  opacity: 0.8;
  transition: opacity 0.4s ease;
}

/* utilisé par le JS pour le fade */
.hero-quote.is-fading,
.hero-author.is-fading {
  opacity: 0;
}



/* =============================
   MOBILE FIX — Pills centrées sous le texte (pas d’orbite)
============================= */
@media (max-width: 900px){
  .page-home .home-hero{
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding-inline: 1rem;
  }

  /* Le wrapper doit être centré */
  .page-home .home-hero-inner{
    justify-content: center !important;
  }

  /* Le bloc orbite devient un bloc normal centré */
  .page-home .home-hero-orbit-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
  }

  .page-home .home-hero-center{ order: 1; }
  .page-home .home-hero-pills{ order: 2; }

  /* Les pills passent sous le texte et se centrent */
  .page-home .home-hero-pills{
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    width: 100%;
    max-width: 520px;            /* ajuste si tu veux + large */
    height: auto !important;

    margin: 1.8rem auto 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem 1.2rem;

    padding-inline: 0.5rem;
    box-sizing: border-box;
    pointer-events: auto !important;
  }

  /* Chaque “pill block” ne doit plus être absolute */
  .page-home .home-pill-block{
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    transform-origin: unset !important;
    animation: none !important;
  }

  /* (Option) si tu veux que le label soit lisible en mobile */
  .page-home .home-pill-label{
    opacity: 1 !important;
    transform: none !important;
    display: none !important;

  }

}


/* =============================
   CTA BUTTON 
============================= */
a.cta-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;

  padding: .80rem .80rem;
  border: 1px solid #111;
  background: #111;
  color: #fff !important;      /* bat le a{color...!important} */
  font-weight: 400 !important; /* bat le a{font-weight...!important} */

  letter-spacing: .14em;
  text-transform: uppercase;
  width: fit-content;
}

a.cta-button:hover{
  background: transparent;
  color: #111 !important;
  opacity: 1;
}

.cta-band .hero-quote{
  margin-bottom: 1.4rem;
}

.cta-band .cta-button{
  margin-top: 1.4rem;
}

.cta-band.section {
  background: transparent;
}

.cta-band {
  position: relative;
  isolation: isolate;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: linear-gradient(
    to right,
    var(--grid-color) 1px,
    transparent 1px
  );
  background-size: var(--grid-step) 1px;
  background-position: center top;
  opacity: 0.28;

  z-index: -1;
}



/*  —————————————————
HOME - Video en hover 


.home-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* vidéo 
.home-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.9);
  opacity: 0;
  transition: opacity 0.5s ease;
}*/
/* Hover sur "Élodie" → affiche la vidéo */
.home-hero:has(.home-hero-name.hover-bg:hover) .home-hero-video {
  opacity: 1;
}

.home-hero-video{ opacity: 0; transition: opacity .5s ease; }
.home-hero.is-video-on .home-hero-video{ opacity: 1; }


/* overlay léger pour la lisibilité du texte */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0); /* ajustable si besoin */
  z-index: -1;
  transition: background 0.35s ease;
}

/* Spotlight micro-interaction dans le menu */

.menu-item {
  position: relative;
  overflow: hidden;
}

/* inversion subtile fond noir + texte blanc */
.menu-item.hovered {
  background: #000;
  color: #fff;
}

.menu-item.hovered .menu-dot {
  background: #fff;
}

.menu-item.hovered .menu-arrow {
  color: #fff;
}



/* ------------------------------
   Projets HOME : grille 3 colonnes
--------------------------------- */

.projects {
  background: transparent;
  position: relative;
  isolation: isolate;
  padding-top: 4rem;
  padding-bottom: 6rem;
}

/* lignes verticales comme le hero */
.projects::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to right,
    var(--grid-color) 1px,
    transparent 1px
  );
  background-size: var(--grid-step) 1px;
  background-position: center top;
  opacity: 0.28;
  z-index: -1;
}

.projects .container {
  position: relative;
}

.projects-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.projects-kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 0 0 0.4rem;
}

.projects-title {
  font-size: 2.1rem;
  margin: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.projects-intro {
  margin: 0;
  max-width: 28ch;
  color: var(--muted);
  font-size: 0.9rem;
}

/* =============================
   Grille 3 colonnes régulières
============================= */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.2rem;
  row-gap: 3.5rem;
}

/* Carte générique */
.projects .project-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s ease,
    opacity 0.45s ease-out;
}


/* Thumbnails : ratios pour dynamiser les cases */

/* ratios d’images pour dynamiser la grille */
.projects .project-thumb--tall {
  aspect-ratio: 3 / 4;
}

.projects .project-thumb--square {
  aspect-ratio: 1 / 1;
}

.projects .project-thumb--square-large {
  aspect-ratio: 4 / 3;
}

/* pour CITEO : ratio horizontal mais pas trop extrême */
.projects .project-thumb--wide {
  aspect-ratio: 16 / 9;
}

/* image en background (cover) */
.projects .project-thumb .project-image-inner {
  position: absolute;
  inset: 0;
  background-image: var(--project-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

/* effet zoom léger au hover */
.projects .project-card:hover .project-thumb .project-image-inner {
  transform: scale(1.04);
}



/* Texte sous l’image */

.projects .project-info {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.projects .project-client {
  margin-top: 1.2rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.projects .project-description {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 40ch;
  letter-spacing: 0.1em;
}

/* Tag souligné au hover, largeur = mot */

.projects .project-tag {
  position: relative;
  display: inline-block;
  margin-top: 0.30rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 2px;
}

/* Ligne invisible au repos */
.projects .project-tag::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0%;
  background: currentColor;
  opacity: 0.8;
  transition: width 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Animation au hover de la carte */
.projects .project-card:hover .project-tag::after {
  width: 60%;
}

/* petite flèche vers le haut/droite */
.projects .project-arrow {
  margin-top: 0.15rem;
  font-size: 0.9rem;
}

/* Décor : lignes horizontales partielles + “+” (desktop only) */

.projects-deco-line,
.projects-plus {
  position: absolute;
  pointer-events: none;
}

.projects-deco-line--1 {
  top: 40%;
  left: 5%;
  width: 25%;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}

.projects-deco-line--2 {
  top: 78%;
  right: 8%;
  width: 18%;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}

.projects-plus--1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
}

.projects-plus--2 {
  bottom: 6%;
  right: 14%;
  font-size: 1rem;
}


.project-card {
  opacity: 0;
  transform: translateY(25px) scale(0.97);
  transition:
    opacity 0.5s ease-out,
    transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.project-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}



/* =============================
   Responsive – pile éditoriale
============================= */

@media (max-width: 980px) {
  .projects-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .projects-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.6rem;
  }

  .projects-grid .project-card {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }

  .projects-deco-line,
  .projects-plus {
    display: none;
  }
}



/* ------------------------------
   Pages Projet – layout général
--------------------------------- */

/* Fond générique des pages projets */
.page-project {
  --project-bg: #ffffff;
  --case-sidebar-bg: #fbfbfb; /* couleur du bloc de gauche */
  background: var(--project-bg);
}

/* Custom par projet si besoin */
.page-project.page-project-1 {
  --project-bg: #ffffff;
  --case-sidebar-bg: #ffffff;
}

.page-project.page-project-2 {
  --project-bg: #ffffff;
  --case-sidebar-bg: #fff7f0; /* change ici si tu veux un fond coloré pour SISTEMIC */
}

.page-project.page-project-3 {
  --project-bg: #ffffff;
  --case-sidebar-bg: #f4f4f4;
}

.page-project.page-project-4 {
  --project-bg: #fcfcfc98;
  --case-sidebar-bg: #fcfcfc98; /* change ici si tu veux un fond coloré pour SISTEMIC */
}

/* SECTION CASE STUDY collée sous le header */
.page-project .case-hero {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

/* Full width, sans marge à gauche pour coller le bloc gris */
.page-project .case-hero .container {
  max-width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 1.5rem;
}

/* Grille : 430px de colonne gauche + colonne droite fluide */
.page-project .case-hero-grid {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 1.6rem;
  align-items: flex-start;
  position: relative;
}

/* Sidebar sticky alignée sous le header */
.page-project .case-sidebar {
  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
  padding-top: 0;
  margin-top: 0;
}

/* Carte de gauche : fond gris (ou autre via variable) */
.page-project .case-sidebar-inner {
  background: var(--case-sidebar-bg);
  padding: 2rem 2.2rem;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  margin: 0;
}

/* TAGS */
.page-project .case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
}

.page-project .case-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
}

/* TITRES CLIENT + PROJET (commun à CITEO & SISTEMIC) */

.case-title {
  margin: 0 0 0.4rem;
}

.case-title-line {
  display: block;
}

/* Ligne 1 : nom du client (HK Grotesk caps) */
.case-title-main {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* Ligne 2 : phrase de titre (AV Estiana) */
.case-title-sub {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1.20;
}

/* Intro */
.case-intro {
  margin-bottom: 1.2rem; /* ← respiration entre ligne 2 du titre et intro */
 
  max-width: 40ch;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Lignes de séparation */
.case-divider {
  height: 1px;
  background: #111;
  margin: 2.6rem 0 1.6rem;
}

.case-divider--thin {
  margin: 1rem 0 1.4rem;
  opacity: 1;
}

/* AUDIO */
.case-audio-block {
  max-width: 260px;
  margin-top: 0.5rem;
}

.case-audio-player {
  width: 100%;
}

.case-audio-label {
  margin: 0.35rem 0 0;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* META (Scope / Secteur, etc.) */
.case-meta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
}

.case-meta-block {
  margin: 0;
}

.case-meta-label {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.case-meta-value {
  margin: 0;
  line-height: 1.2;
  font-size: 0.9rem;
}

/* Variante split avec ligne verticale */
.case-meta-row--split .case-meta-block + .case-meta-block {
  border-left: 1px solid #111;
  padding-left: 2rem;
}

/* COLONNE DROITE — MÉDIAS */

.case-content {
  padding-top: 0;
  margin-top: 0;
}

.case-main {
  display: flex;
  flex-direction: column;
}

/* Stack vertical : on supprime les trous entre visuels */
.case-media-stack {
  display: flex;
  flex-direction: column;
  gap: 0; /* pas d’espace entre les éléments */
}

/* Par sécurité : aucun margin-top pour le premier enfant */
.case-media-stack > *:first-child {
  margin-top: 0 !important;
}

/* Bloc média générique */
.case-media {
  margin: 0;
}

/* Diptyque serré */
.case-media-tight {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0.4rem 0;
}

.case-media-tight .tight-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Deux images côte à côte (si tu en as besoin) */
.case-media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0.4rem 0;
}

/* Cartouches texte (brief / rôle / texte contextuel) */

.case-caption-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.4rem 0;
}

.case-caption {
  background: #ffffff;
  border: 1px solid rgb(0, 0, 0);
  padding: 0.9rem 1rem;
  border-radius: 0;
}

.case-caption--full {
  grid-column: 1 / -1;
}

.case-caption h2 {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.case-caption p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

/* Bloc texte simple dans la colonne droite */
.case-body-text {
  margin: 0.6rem 0 0.8rem;
}

/* VIDÉO locale */
.case-media--video video {
  width: 100%;
  display: block;
  border-radius: 0px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* ------------------------------
   Images projet protégées
--------------------------------- */

.project-media-block {
  padding: 0; /* plus de padding vertical → images collées */
}

.project-image {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* ratio 16:9 */
  overflow: hidden;
}

/* background-image actual */
.project-image-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.project-image:hover .project-image-inner {
  transform: scale(1.03);
}

/* Watermark discret en bas à gauche */
.project-image-watermark {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-size: 0.4rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

/* Overlay diagonal © sur les visuels protégés */
.protected {
  position: relative;
}

.protected::after {
  content: "©ÉLODIE DA SILVA COSTA";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 0.4rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
  transform: rotate(-27deg);
  mix-blend-mode: soft-light;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.protected:hover::after {
  opacity: 0.4;
}

/* ------------------------------
   NAVIGATION ENTRE PROJETS
--------------------------------- */

.project-nav {
  padding: 2rem 0 0.8rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  margin-top: 2rem;
}

.project-nav-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.project-nav-link {
  text-decoration: none;
  position: relative;
}

.project-nav-link .nav-icon {
  font-size: 0.9rem;
}


/* ============================
   SERVICES – SECTION MATRIX
============================ */

.services {
  background: #ffffff; /* léger off-white comme ta capture */
  padding-top: 3rem;   /* ↓ on réduit le haut */
  padding-bottom: 6rem;  /* ← on garde le bas */
}

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 4rem;
  align-items: flex-start;
}

/* Colonne gauche */

.services-title {
  margin: 0 0 2.5rem;
  font-size: 1.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.services-list li + li {
  margin-top: 0.8rem;
}

/* Colonne droite : grille de carrés */

.services-right {
  display: flex;
  justify-content: center;
}

.services-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 230px;            /* hauteur des carrés */
  gap: 1.5rem;
}

/* Placement pour recréer la “diagonale” de la maquette */

.service-card--intro {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.service-card--identity {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.service-card--clarifier {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.service-card--structurer {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.service-card--explorer {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

/* Style des cartes */

.service-card {
  position: relative;
  padding: 1rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.9rem;
}

.service-card--black {
  background: #000;
  color: #fff;
}

.service-card--white {
  background: #ffffff;
  color: #000;
}

/* Texte principal (haut gauche) */

.service-card-main p {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Baseline en bas à gauche */

.service-card-caption {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  max-width: 25ch;
}

/* Micro hover : léger lift + contraste */

.service-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}


/* État "caché" avant scroll */
.services-matrix .service-card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
}

/* Quand la carte devient visible */
.services-matrix .service-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* Responsive */

@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .services-right {
    justify-content: flex-start;
  }

  .services-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 220px;
  }

  /* Reflow simple en 2 colonnes */
  .service-card--intro,
  .service-card--identity,
  .service-card--clarifier,
  .service-card--structurer,
  .service-card--explorer {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .services {
    padding: 4rem 0;
  }

  .services-matrix {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 210px;
  }

  .service-card {
    padding: 1.7rem 1.8rem;
  }
}


/* ------------------------------
   BANDE CLIENTS DÉFILANTE
--------------------------------- */

.client-strip {
  background: #000;
  color: #f5f5f5;
  padding: 0.8rem 0;
  overflow: hidden;
}

.client-strip-inner {
  display: inline-flex;
  gap: 3rem;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  padding-left: 100%;
}

.client-strip-inner span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ------------------------------
   Responsive – Pages projet
--------------------------------- */

@media (max-width: 980px) {
  .page-project .case-hero .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .page-project .case-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .page-project .case-main {
    order: -1; /* visuels d’abord sur mobile */
  }

  .page-project .case-sidebar {
    position: static;
  }

  .case-caption-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-meta-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  .project-nav-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

@media (max-width: 640px) {
  .case-title-sub {
    font-size: 2rem;
  }

  .case-hero {
    padding-top: 3rem;
  }
}






/* ==============================
   FOOTER FULL BLACK
============================== */

.site-footer {
  background: #000;
  color: #fff;
  padding: 2.5rem 0;
  margin-top: 0;              /* ← supprime l’espace blanc au-dessus du footer */
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
}

/* Texte à gauche */
.footer-left {
  margin: 0;
}

/* Liens RS */
.footer-right {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Force les liens du footer en blanc */
.site-footer a,
.footer-social {
  color: #fff !important;
  text-decoration: none;
  position: relative;
  font-weight: 400;
}

/* Soulignement en hover (style menu) */
.footer-social::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: #fff;          /* ← ligne blanche */
  transition: width 0.25s ease;
}

.footer-social:hover::after {
  width: 100%;
}

/* Séparateur bullet */
.footer-right span {
  color: #fff;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 760px) {
  .footer-grid {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}



/* ==============================
   Responsive header + hero
============================== */

@media (max-width: 900px) {
  .site-header-inner{
    flex-direction: row;        /* ← clé */
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem 0.7rem;
  }

  .hero {
    padding-top: 5.5rem;
    padding-bottom: 4rem;
  }

  .hero-layout {
    flex-direction: column;
  }

  .hero-quote-container {
    margin-left: 0;
  }

  .menu-preview {
    width: 100%;
  }

  .menu-list {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 900px) {

  /* 🔒 empêche toute fuite horizontale */
  body {
    overflow-x: hidden;
  }

  /* 🔥 neutralise les débordements liés à l’orbite */
  .home-hero,
  .home-hero-orbit-wrapper {
    overflow: hidden;
  }

  /* 🧹 sécurité : rien ne dépasse la largeur écran */
  .home-hero-pills,
  .home-pill-block {
    max-width: 100vw;
  }
}



@media (max-width: 740px) {
  .site-brand {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    gap: 0.15rem;        /* ↓ espace entre les 2 lignes */
    line-height: 1.15;   /* ↓ interlignage global */
  }

  .hero-quote {
    font-size: clamp(2rem, 7vw, 2.6rem);
  }
}
@media (min-width: 1024px) {
  .project-card--1 .project-thumb--wide {
    aspect-ratio: 2 / 1; /* plus haut que le 16/9 par défaut */
  }
}




/*  HOME PROJETS */
.project-client {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  text-transform: uppercase; /* si tu veux tout en majuscules */
}


.project-tag {
  position: relative;
  display: inline-block;
  margin-top: 0.10rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.project-tag::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor; /* la ligne prend la couleur du texte */
  opacity: 0.7;
}

/* Style de base du tag */
.projects .project-tag {
  position: relative;
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 2px; /* espace pour la ligne */
}

/* Ligne invisible (rétractée) */
.projects .project-tag::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0%;                       /* ← ligne à 0 au repos */
  background: currentColor;
  opacity: 0.8;
  transition: width 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Animation au hover de la carte */
.project-card:hover .project-tag::after {
  width: 155px;                     /* ← la ligne se “dessine” */
}







/* ============================================
   PAGES PROJET – VERSION SIMPLE & PROPRE
   - Colonne grise fixe à gauche
   - Header + nav en blanc
   - Première image visible
============================================ */

/* Colonne grise fixe sur toutes les pages .page-project */
.page-project {
  --case-sidebar-width: 430px;
  --case-sidebar-bg: #ececec;

  background-color: #ffffff;
  background-image: linear-gradient(
    to right,
    var(--case-sidebar-bg) 0,
    var(--case-sidebar-bg) var(--case-sidebar-width),
    #ffffff var(--case-sidebar-width)
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Couleur personnalisable par projet si tu veux plus tard */
.page-project-1 { /* CITEO */
  --case-sidebar-bg: #ececec;
}
.page-project-2 { /* SISTEMIC */
  --case-sidebar-bg: #ececec;
}

/* On neutralise d’anciens ::before éventuellement restés */
.page-project::before,
.page-project .case-hero::before {
  content: none !important;
}

/* Header toujours blanc, par-dessus le fond gris */
.site-header {
  background: #ffffff !important;
  position: relative;
  z-index: 20;
}

/* Zone "projet précédent / suivant" blanche aussi */
.page-project .project-nav {
  background: #ffffff;
  position: relative;
  z-index: 10;
}

/* Case study collé sous le header, full width */
.page-project .section.case-hero,
.page-project .case-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0;
}

.page-project .case-hero .container {
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}

/* Grille : colonne gauche fixe + colonne droite fluide */
.page-project .case-hero-grid {
  display: grid;
  grid-template-columns: var(--case-sidebar-width) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: flex-start;
}

/* Sidebar sticky à gauche */
.page-project .case-sidebar {
  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
  margin-top: 0;
  padding-top: 0;
}

/* Le gris vient du background, donc bloc transparent */
.page-project .case-sidebar-inner {
  background: transparent !important;
  padding: 2rem 2.2rem;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  margin: 0 !important;
}

/* Colonne de droite : stack d’images propre */
.page-project .case-main {
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
  padding-top: 0.8rem !important; /* petit décalage sous le header */
}

.page-project .case-media-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Premier média : on garantit qu’il est visible */
.page-project .case-media-stack > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Toutes les images / gifs / vidéos dans les médias */
.page-project .case-media {
  margin: 0 !important;
}

.page-project .case-media img,
.page-project .case-media picture,
.page-project .case-media video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Espacements “propres” pour le reste */
.page-project .case-media-tight,
.page-project .case-media-row {
  margin: 0.6rem 0 !important;
  gap: 1rem !important;
}

.page-project .case-caption {
  margin: 0.4rem 0 !important;
}

.page-project .case-caption-row {
  margin: 0.6rem 0 !important;
}

.page-project .case-body-text {
  margin: 0.6rem 0 0.8rem !important;
}

/* Anti scroll horizontal global */
body {
  overflow-x: hidden;
}

/* --------------------------------------------
   Responsive – PAGES PROJET
-------------------------------------------- */

@media (max-width: 980px) {
  .page-project {
    background-attachment: scroll;
    background-image: none;
    background-color: #ffffff;
  }

  .page-project .case-hero .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .page-project .case-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .page-project .case-main {
    order: -1;  /* visuels d'abord */
    padding-top: 1rem !important;
  }

  .page-project .case-sidebar {
    position: static;
  }
}


/* GOUTTIÈRE DROITE POUR TOUTES LES PAGES PROJETS (DESKTOP) */
@media (min-width: 980px) {
  .page-project .case-main {
    padding-right: 1.4rem;
  }
}

/* SUPPRESSION ULTIME DE TOUT ESPACE ENTRE HEADER ET 1ÈRE IMAGE */
.page-project .case-hero,
.page-project .case-hero .container,
.page-project .case-hero-grid,
.page-project .case-main,
.page-project .case-content,
.page-project .case-media-stack > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}







/* ======================================
   FIX GRILLE PROJETS HOME
   ====================================== */

@media (min-width: 900px) {
  /* On annule les vieux placements en 12 colonnes */
  .projects-grid .project-card {
    grid-column: auto !important;
  }
}


/* ======================================
   HOME – PROJETS EN CARRÉS ALIGNÉS
   ====================================== */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.2rem;
  row-gap: 3.2rem;
  justify-items: stretch;   /* chaque carte occupe bien sa colonne */
}

/* Toutes les vignettes projet = carrés */
.projects .project-thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  background: #000;
}

/* On neutralise les anciens ratios (wide, square-large, etc.) */
.projects .project-thumb--wide,
.projects .project-thumb--square,
.projects .project-thumb--square-large,
.projects .project-thumb--tall {
  aspect-ratio: 1 / 1 !important;
}

/* Les <img> remplissent bien le carré */
.projects .project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ======================================
   HOME – HOVER NOIR + PLUS AU CENTRE
   ====================================== */

/* IMAGE = couche 0 */
.projects .project-thumb .project-image-inner {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Overlay transparent au repos */
.projects .project-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background .25s ease;
  z-index: 1;
}

/* Signe + centré, invisible au repos */
.projects .project-thumb::after {
  content: "+";
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 4.2rem;
  color: #fff;

  opacity: 0;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease;

  z-index: 2;
  pointer-events: none;
}

/* Au hover de la carte → fond noir + apparition du + */
.projects .project-card:hover .project-thumb::before {
  background: rgba(0, 0, 0, 0.721);
}

.projects .project-card:hover .project-thumb::after {
  opacity: 1;
  transform: translateX(2px) scale(1);;
}

/* On garde le petit zoom tout doux sur l'image */
.projects .project-card:hover .project-thumb .project-image-inner {
  transform: scale(1.04);
}










/* ======================================
   FIX GLOBAL – ALIGNEMENT TEXTE / IMAGE
====================================== */

.projects-grid .project-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* texte calé à gauche */
  margin: 0;
  padding: 0;
  width: 100%;
}

.projects-grid .project-card > figure,
.projects-grid .project-card > .project-info {
  width: 100%;
  margin: 0;
  padding: 0;
}

.page-home .projects-grid .project-card .project-info {
    margin-top: 0.7rem;
}

.projects-grid .project-card .project-info {
  margin-left: 0 !important;
  padding-left: 0 !important;
}





/* ======================================
   GOUTTIÈRES SYMÉTRIQUES BLOC PROJETS
====================================== */

.projects {
  padding-left: 0;
  padding-right: 0;
}

.projects > .container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;  /* même marge à gauche et à droite */
}


.case-media--video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;        /* même style que tes images */
  margin: 0;
}


/* ======================================
   **** PAGE LAB ****
====================================== */

/* layout */
.lab-grid{
  display:grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 40px;
  align-items:start;
}

.lab-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items:start;
  border: 1px solid currentColor;
  padding: 14px;
  margin-bottom: 14px;
}

.lab-row-btn{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  background: transparent;
  border: 2px solid currentColor;
  cursor:pointer;
}

.lab-row-meta{
  margin-top: 8px;
  display:flex;
  gap: 10px;
  align-items:center;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lab-right-placeholder{
  min-height: 320px;
}

/* overlay */
.lab-overlay[hidden]{ display:none; }

.lab-overlay{
  position: fixed;
  inset: 0;
  z-index: 999;
}

.lab-overlay-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.82);
}

.lab-overlay-panel{
  position: relative;
  height: 100%;
  overflow: auto;
  padding: 64px 18px;
}

.lab-overlay-close{
  position: sticky;
  top: 18px;
  margin-left: auto;
  display:grid;
  place-items:center;
  width: 44px;
  height: 44px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  cursor:pointer;
}

.lab-overlay-content{
  max-width: 980px;
  margin: 0 auto;
  color: #fff;
}

.lab-figure, .lab-video{ margin: 0 0 18px; }
.lab-figure img, .lab-video video{ width:100%; height:auto; display:block; }

.lab-exp-meta{
  display:grid;
  grid-template-columns: 1fr 220px;
  gap: 28px;
  margin: 18px 0 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.25);
}

.lab-exp-tools-title{
  margin: 0 0 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
}

@media (max-width: 900px){
  .lab-grid{ grid-template-columns: 1fr; }
  .lab-right-placeholder{ display:none; }
  .lab-exp-meta{ grid-template-columns: 1fr; }
}



















/* ------------------------------
   Page QUI ?
   Page QUI ?
   Page QUI ?
   Page QUI ?
--------------------------------- */
/* =========================================================
   PAGE QUI — CSS CLEAN (mockups)
   - Grille de fond verticale (fixed)
   - HERO vidéo + 2 carrés (bio + claim)
   - WHAT I DO : gutter + 3 colonnes + trou en haut
   - MES COMMANDEMENTS : fond noir + 2 rangées de 5
   - Image + liens + Skills + Publications
========================================================= */

/* BG changement */

/* parent de la zone animée */
.page-qui .about-hero{
  position: relative;
  overflow: hidden;
  background: #000;          /* fond noir */
}

/* canvas en fond */
.page-qui #pagequiDots{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: transparent !important;
}

/* contenu au-dessus */
.page-qui .about-grid,
.page-qui .container{
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------
   PAGE QUI : fond + grille verticale
--------------------------------------------------------- */

.page-qui{
  background: #fff;
}

.page-qui .project-grid-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;

  background-image: linear-gradient(to right, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-step) 1px;
  background-position: center top;

  opacity: 0.20;
  z-index: -1;
}


/* ---------------------------------------------------------
   HERO QUI : vidéo BG + overlay + 2 blocs carrés
--------------------------------------------------------- */

.page-qui .about-hero{
  position: relative;
  overflow: hidden;

  padding: 1rem 0 5rem;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vidéo plein écran 
.page-qui .about-hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}*/

.page-qui .about-hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transform: scale(1.02);
  filter: grayscale(1) contrast(1.05) brightness(1.09);
}

/* Overlay noir */
.page-qui .about-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
}

/* Contenu */
.page-qui .about-grid{
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 560px);
  gap: 3.2rem;
  align-items: start;
  justify-content: center;
}

/* Petit label “↗ QUI” */
.page-qui .about-mini{
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.969);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Bloc bio : carré */
.page-qui .about-card{
  width: 100%;
  aspect-ratio: 1 / 1;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: #fff;
  padding: 1.9rem 1.6rem;
}

/* Titres bio */
.page-qui .about-card-title{
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(3rem, 3.4vw, 3.2rem);
  text-transform: uppercase;
  line-height: 1;
}

.page-qui .about-card h3{
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-qui .about-card-body p{
  margin: 0 0 .90rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #111;
}
.page-qui .about-card-body p:last-child{ margin-bottom: 0; }

/* Bloc claim : carré translucide */
.page-qui .about-claim-wrap{
  width: 590px;
  padding-top: 2rem;

  aspect-ratio: 1 / 1;
  position: relative;
}

.page-qui .about-claim{
  width: 100%;
  padding: 1rem 1rem;

  display: flex;
  align-items: center;

  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(5rem, 3vw, 2.5rem);
  line-height: 1;

  color: #fff;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}

/* Petits boutons (pills) si tu les utilises */
.page-qui .about-pill{
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  padding: .55rem 1.15rem;
  border: 1px solid #fff;
  color: #fff !important;
  background: transparent;

  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  width: fit-content;
  margin-bottom: 1rem;
}

.page-qui .about-pill:hover{
  background: #fff;
  color: #111 !important;
  opacity: 1;
}

/* Petit + entre les deux (optionnel) */
.page-qui .about-divider-plus{
  position: absolute;
  left: 50%;
  bottom: -1.8rem;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

/* Responsive hero */
@media (max-width: 980px){
  .page-qui .about-grid{
    grid-template-columns: minmax(0, 1fr);
    gap: 2.2rem;
  }
  .page-qui .about-divider-plus{ display:none; }
}

/* QI — FIX claim mobile (texte non cropé) */
@media (max-width: 900px){

  .page-qui .about-claim-wrap{
    width: 100%;
    max-width: 100%;
    height: auto;          /* ← clé n°1 */
    min-height: unset;     /* ← clé n°2 */
    aspect-ratio: auto;    /* ← clé n°3 (si jamais il existait) */
    padding: 1rem 1rem;
  }

  .page-qui .about-claim{
    font-size: clamp(1.4rem, 5vw, 2rem);
    line-height: 1.25;
    white-space: normal;   /* ← empêche le crop */
    word-break: normal;
    overflow-wrap: break-word;
  }
}


/* ---------------------------------------------------------
   WHAT I DO — mockup 3 colonnes + gutters
--------------------------------------------------------- */

.page-qui .qui-whatido{
  position: relative;
  padding: 5.2rem 0;
}

/* lignes haut / bas section */
.page-qui .qui-whatido::before,
.page-qui .qui-whatido::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:1px;
  background: rgba(0,0,0,0.08);
}
.page-qui .qui-whatido::before{ top:0; }
.page-qui .qui-whatido::after{ bottom:0; }

/* Cadre centré qui crée les “blancs” gauche/droite */
.page-qui .whatido-wrapper{
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 3.2rem; /* ajuste : 2rem / 3.2rem */
}

/* Grille 3 colonnes (comme ton mockup) */
.page-qui .whatido-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 3.2rem;
  row-gap: 4.2rem;

  width: 100%;
  margin: 0;

  grid-auto-rows: minmax(320px, auto);
  align-items: start;
}

/* TITRE */
.page-qui .whatido-title{
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin: 90; /* important */

  font-size: clamp(3rem, 4.3vw, 4.8rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Cartes */
.page-qui .whatido-card{
  border-top: 1px solid #111;
  padding-top: 1.25rem;
  min-width: 0;

  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
  line-height: 1.3;
}

.page-qui .whatido-card h3{
  margin: 0 0 1.1rem;
  font-size: 1.08rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.page-qui .whatido-kicker{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.page-qui .whatido-spacer{
  flex: 1 1 auto;
  min-height: 2.4rem;
}

.page-qui .whatido-card p{
  margin: 0;
  margin-top: 10px;
  color: #111;
  max-width: 52ch;
}

/* Placement EXACT mockup */
.page-qui .whatido-card--top1{ grid-column: 2; grid-row: 1; } /* Direction créative */
.page-qui .whatido-card--top2{ grid-column: 3; grid-row: 1; } /* Expérience */
.page-qui .whatido-card--top3{ grid-column: 1; grid-row: 2; } /* Identités */
.page-qui .whatido-card--top4{ grid-column: 2; grid-row: 2; } /* Narration */
.page-qui .whatido-card--top5{ grid-column: 3; grid-row: 2; } /* Design fiction */

/* ---------------------------------------------------------
   Responsive — tout en dessous proprement
--------------------------------------------------------- */

@media (max-width: 1100px){
  .page-qui .whatido-wrapper{ padding-inline: 2rem; }

  .page-qui .whatido-grid{
    grid-template-columns: 1fr 1fr;
    column-gap: 2.4rem;
    row-gap: 3rem;
    grid-auto-rows: auto;
  }

  .page-qui .whatido-title{
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* On laisse le flow naturel (plus de placements manuels) */
  .page-qui .whatido-card{
    grid-column: auto !important;
    grid-row: auto !important;
    display: block;
  }
  .page-qui .whatido-spacer{ display:none; }
}

@media (max-width: 760px){
  .page-qui .whatido-wrapper{ padding-inline: 1.2rem; }

  .page-qui .whatido-grid{
    grid-template-columns: 1fr;
    row-gap: 2.4rem;
  }

  .page-qui .whatido-title{
    font-size: clamp(2.6rem, 9vw, 3.2rem);
    line-height: 0.95;
  }
}



/* ---------------------------------------------------------
   MES COMMANDEMENTS : mockup (fond noir + 2 rangées de 5)
   -> HTML recommandé :
      <li><div class="cmd-num">1</div><p class="cmd-text">...</p></li>
      et <li class="is-ten">...10...</li>
--------------------------------------------------------- */
.page-qui .whatido-commandments .qui-section-label{
  color: #111;
  mix-blend-mode: normal;  
  margin-bottom: 2.2rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 1rem;
}

.page-qui .whatido-commandments{
  position: relative;
  color: #fff;

  /* padding interne (tes valeurs) */
  padding: 4rem 0 4rem;
  margin-top: 4.5rem;
  margin-bottom: 4.5rem;
  background: transparent;
}

/* Le vrai fond noir "plein écran" */
.page-qui .whatido-commandments::before{
  content:"";
  position: absolute;
  top: 0;
  bottom: 0;

.page-qui .whatido-commandments .qui-section-label{
  color: rgba(255,255,255,0.92);
  margin: 0 0 2.2rem;

  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 1rem;
}

}

/* Grille 5 colonnes */
.page-qui .whatido-commandments ol{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

/* Carte ivoire */
.page-qui .whatido-commandments li{
  min-height: 250px;
  padding: 1.4rem;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 
    transform 200ms ease,
    background-color 200ms ease,
    color 200ms ease;
}

/* Carte blanche */
.page-qui .whatido-commandments li:nth-child(odd){
  background: #ffffff;
  color: #111;
}
.page-qui .whatido-commandments li:nth-child(odd):hover{
  background: #111;
  color: #ffffff;
}

/* Carte noir */
.page-qui .whatido-commandments li:nth-child(even){ 
    background: #111;
  color: #ffffff;
}
.page-qui .whatido-commandments li:nth-child(even):hover{
  background: #ffffff;
  color: #111;
}


.page-qui .whatido-commandments li:hover{
  transform: translateY(-6px);
}

/* Numéro */
.page-qui .whatido-commandments .cmd-num{
  font-size: 4rem;
  line-height: 1;
  font-weight: 900;
}

/* “10_” */
.page-qui .whatido-commandments li.is-ten .cmd-num::after{
  content: "_";
}

/* Texte bas */
.page-qui .whatido-commandments .cmd-text{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.25;
  font-weight: 600;
  max-width: 26ch;
}

/* Responsive commandements */
@media (max-width: 1100px){
  .page-qui .whatido-commandments ol{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
  }
  .page-qui .whatido-commandments li{ min-height: 230px; }
}

@media (max-width: 760px){
  .page-qui .whatido-commandments{
    padding: 3.2rem 0 3.6rem;
  }
  .page-qui .whatido-commandments ol{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
  .page-qui .whatido-commandments li{ min-height: 210px; }
  .page-qui .whatido-commandments .cmd-num{ font-size: 3.2rem; }
}

@media (max-width: 420px){
  .page-qui .whatido-commandments ol{
    grid-template-columns: 1fr;
  }
}



/* ---------------------------------------------------------
   IMAGE + LIENS (sous commandements)
   -> ton HTML : <figure class="whatido-image"> ... <figcaption class="whatido-links">
--------------------------------------------------------- */

.page-qui .whatido-image{
  margin: 0;
  padding: 4.5rem 0 0;
}

.page-qui .whatido-image img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-qui .whatido-links{
  padding: 0.2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;

  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.page-qui .whatido-links a{
  display: inline-flex;
  align-items: center;

  padding: .7rem 1rem;
  border: 1px solid #111;
  background: #fff;

  width: fit-content;
}

.page-qui .whatido-links a:hover{
  background: #111;
  color: #fff !important;
  opacity: 1;
}


/* ---------------------------------------------------------
   SKILLS + PUBLICATIONS (bloc)
--------------------------------------------------------- */

.page-qui .qui-skills-block{
  padding: 3.4rem 0 0;
}

/* Titres “+ Skills / + Publications” */
.page-qui .qui-skills-block > .qui-section-label,
.page-qui .qui-publications > .qui-section-label{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #111;
  margin: 0 0 1rem;
}

.page-qui .qui-skills-block > .qui-section-label::before,
.page-qui .qui-publications > .qui-section-label::before{
  content: "+";
  margin-right: 0.5rem;
}

/* Pills */
.page-qui .skills-pills{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.page-qui .skills-pills span{
  display: inline-flex;
  align-items: center;

  padding: .25rem .7rem;
  border-radius: 999px;
  border: 1px solid #111;

  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  background: #fff;
}

/* Publications */
.page-qui .qui-publications{
  margin-top: 2.8rem;
}

.page-qui .qui-publications ul{
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.7;
}

.page-qui .qui-publications a{
  color: #111;
  text-decoration: none;
  font-weight: 400;
}

.page-qui .qui-publications a:hover{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* ---------------------------------------------------------
   Responsive “stack” pour image + skills/publications
   (si tu veux tout en colonne sans te battre)
--------------------------------------------------------- */

@media (max-width: 980px){
  .page-qui .whatido-links{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =========================================================
   QUI — AFTER (image + links | skills + publications)
   - conforme mockup
   - classes dédiées => pas de conflit
========================================================= */

.qui-after{
  padding: 4.5rem 0 5rem;
}

.qui-after-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 3.2rem;
  align-items: start;
}

/* LEFT */
.qui-after-figure{
  margin: 0 0 1.2rem;
  border: 1px solid rgba(0,0,0,0.12);
  background: #f5f5f5;
}

.qui-after-figure img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Links row */
.qui-after-links{
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.after-sep{
  opacity: 0.6;
}

.after-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.95rem 1.35rem;
  border: 1px solid #111;
  background: #fff;

  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #111 !important;
  opacity: 1 !important;
}

.after-btn:hover{
  background: #111;
  color: #fff !important;
}

.after-btn.is-active{
  background: #111;
  color: #fff !important;
}

/* RIGHT */
.qui-after-right{
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.qui-after-title{
  margin: 0 0 1rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* pills */
.qui-after .skills-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.55rem;
}

.qui-after .skills-pills span{
  display: inline-flex;
  align-items: center;

  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #111;

  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;

  background: #fff;
}

/* publications list */
.pubs-list{
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.75;
}

.pubs-list li{
  margin: 0.35rem 0;
}

/* Responsive */
@media (max-width: 980px){
  .qui-after-grid{
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .qui-after-right{
    gap: 2.4rem;
  }

  .qui-after-title{
    font-size: 1.45rem;
  }
}

@media (max-width: 560px){
  .qui-after-links{
    gap: 0.6rem;
  }

  .after-btn{
    width: 100%;
    justify-content: center;
  }

  .after-sep{
    display: none;
  }
}




/* FIX Samsung / Chrome Android : backdrop-filter bug (fond noir) */
@supports (-webkit-touch-callout: none) {
  /* iOS → on ne touche pas */
}

@supports not (-webkit-touch-callout: none) {
  /* Android */
  @media (max-width: 900px) {
    .site-header {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: #fff !important;
    }
  }
}









/* ===== Mémoire : scope isolé ===== */
.memoire-main { background: #efefefd2; }
.memoire-scope{
  max-width: 1320px;
  margin: 0 auto;
  padding: 90px 32px 60px;
  background:#efefefd2;
}

/* Hero */
.memoire-hero{ margin-bottom: 40px; }
.memoire-title{
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: .02em;
  margin: 0 0 18px;
}
.memoire-meta{ margin:0; opacity:.85; }

/* Grille 3 colonnes (Sommaire / Texte / Notes) */
.memoire-grid{
  display: grid;
  grid-template-columns: 220px 1fr 260px; /* sommaire | texte | notes */
  gap: 2.5rem;
  align-items: start;

}

/* Sommaire */
.memoire-toc h2 {
  font-size: 14px;
}

.memoire-toc h3 {
  font-size: 12px;
  opacity: 0.7;
}

.memoire-toc ol,
.memoire-toc a {
  font-size: 12.5px;
  line-height: 1.6;
}

.memoire-content p {
  text-align: justify;
  hyphens: auto;
}


.memoire-toc a.is-active{ font-weight:700; }

/* Texte */
.memoire-section-title{ margin:0 0 11px; }
.memoire-content p{ line-height: 1.3; margin: 0 0 16px; max-width: 68ch; }

/* Appels de note dans le texte */
.memoire-note-call{
  font-weight:900;
  text-decoration:none;
  margin-left: 4px;
}

/* Notes à droite */
.memoire-notes-list{ list-style:none; padding:0; margin:0; }
.memoire-notes-list li{ margin: 0 0 14px; }
.memoire-note-num{
  display:block;
  font-size: 24px;
  font-weight:900;
  line-height:1;
  margin-bottom: 6px;
}
.memoire-note-text{ display:block; opacity:.9; }

.memoire-notes .note,
.memoire-notes .noteBreak {
  font-size: 22px;   /* ajuste ici */
  font-weight: 900;
  line-height: 1;
}

.memoire-notes p {
  font-size: 0.8rem;
}


/* Footerline mémoire */
.memoire-footerline{
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,.15);
  font-size: 13px;
  opacity:.85;
}

/* Responsive */
@media (max-width: 1100px){
  .memoire-grid{ grid-template-columns: 260px 1fr; }
  .memoire-notes{ grid-column: 1 / -1; }
}
@media (max-width: 760px){
  .memoire-scope{ padding: 70px 18px 50px; }
  .memoire-grid{ grid-template-columns: 1fr; gap: 26px; }
}