/* -------------------------------
DÉCLARATIONS DES FONTS
------------------------------- */
/* TITRES */
@font-face {
  font-family: "ClashDisplay-Variable";
  src: url("../assets/fonts/ClashDisplay-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
/* CORPS DE TEXTE */
@font-face {
  font-family: "ClashGrotesk-Variable";
  src: url("../assets/fonts/ClashGrotesk-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
/* MONO */
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  /* -------------------------------
TYPOGRAPHIE
------------------------------- */
  /* POLICES */
  --font-primary: "ClashDisplay-Variable", "Helvetica Neue", Arial, sans-serif;
  --font-body: "ClashGrotesk-Variable", sans-serif;
  --font-mono: "Geist Mono", monospace;

  /* tailles fluides des polices */
  --fs-2xs: clamp(1rem, 1vw, 1.1rem);
  --fs-xs: clamp(1.2rem, 1.2vw, 1.3rem);
  --fs-sm: clamp(1.4rem, 1.4vw, 1.6rem);
  --fs-body: clamp(1.6rem, 1.6vw, 1.8rem);
  --fs-md: clamp(1.8rem, 2vw, 2.2rem);
  --fs-lg: clamp(2.4rem, 3vw, 3.2rem);
  --fs-xl: clamp(3.2rem, 5vw, 4.8rem);
  --fs-2xl: clamp(4.8rem, 8vw, 6.4rem);
  --fs-3xl: clamp(6.4rem, 10vw, 8rem);

  /* interlignes */
  --lh-tight: 1.1;
  --lh-normal: 1.4;
  --lh-body: 1.6;

  /* -------------------------------
LARGEURS & CONTAINERS
------------------------------- */

  --content-max: 141rem; /* 1410px */
  --content-padding: 3rem; /* 30px */
  --container-inner: calc(var(--content-max) - (2 * var(--content-padding)));

  /* -------------------------------
ESPACEMENTS (8pt system fluide)
------------------------------- */
  --space-3xs: 0.2rem; /* 2px */
  --space-2xs: 0.4rem; /* 4px */
  --space-xs: 0.8rem; /* 8px */
  --space-sm: 1.6rem; /* 16px */
  --space-md: 2.4rem; /* 24px */
  --space-lg: 4rem; /* 40px */
  --space-xl: 6.4rem; /* 64px */
  --space-2xl: 9.6rem; /* 96px */
  --space-3xl: 12.8rem; /* 128px */

  /* sections */
  --section-padding-sm: var(--space-sm);
  --section-padding-md: var(--space-md);
  --section-padding-lg: var(--space-lg);
  --section-padding-xl: var(--space-xl);
  --section-padding-2xl: var(--space-2xl);

  /* -------------------------------
RADIUS & BORDERS
------------------------------- */

  --radius-sm: 0.4rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.6rem;
  --radius-xl: 3.6rem;

  /* Couleurs - échelle neutre */
  --color-neutral-100: #ffffff;
  --color-neutral-200: #efeeec;
  --color-neutral-300: #e3e1de;
  --color-neutral-400: #cbc8c5;
  --color-neutral-500: #818180;
  --color-neutral-600: #2c2c2c;
  --color-neutral-700: #1f1f1f;
  --color-neutral-800: #131313;
  --color-neutral-900: #000000;
  --color-error: #ff0033;

  /* COULEURS */
  /* THEME STUDIO */
  --dark-green-dark: #057657;
  --dark-green-bright: #00a859;
  --dark-lime: #ccff00;
  --dark-cyan: #00cccc;
  --dark-caramel: #cc9966;
  --dark-warm-gray: #e8dcc4;
  --dark-oyster: #e9e3d9;
  --dark-purple-dark: #5838af;
  --dark-black: #1c1c1c;
  --dark-black-max: #100c0b;
  --dark-beige: #fff6e9;
  --dark-purple: #5c30ff;
  --dark-green: #00cc33;
  --dark-red: #ff0033;
  --dark-blue: #0000ff;
  --dark-pink: #fe3696;
  --dark-yellow: #ffcc33;
  --dark-orange: #ff6633;

  /* THEME BAUHAUS */
  --bauhaus-black: #0a0c09;
  --bauhaus-cream: #ffe3d5;
  --bauhaus-red: #f40220;
  --bauhaus-orange: #ff7b30;
  --bauhaus-blue: #0019ff;
  --bauhaus-pink: #ff5aa9;
  --bauhaus-green: #09a953;
  --bauhaus-yellow: #efa500;
  --bauhaus-dark-red: #73000f;

  /* THEME BEACH */
  --beach-white: #ffeddc;
  --beach-black: #1f130b;
  --beach-orange: #ff9f1c;
  --beach-light-orange: #ffbf68;
  --beach-light-blue: #cbf4f0;
  --beach-blue: #2ec5b6;
  --beach-dark-blue: #01305a;
  --beach-coral: #e97045;
  --beach-sand: #f8ecbc;

  /* THEME XXXX */
  --xxx-black: #00151c;
  --xxx-white: #ffe8ce;
  --xxx-pink: #f2aed3;
  --xxx-orange: #f75d3b;
  --xxx-blue: #5c30ff;
  --xxx-cyan: #2286e6;
  --xxx-red: #e63c25;
  --xxx-green: #009945;
  --xxx-yellow: #f6bc3f;

  /* THEME NATURE */
  --nature-green: #092a2d;
  --nature-green-dark: #031b1e;
  --nature-olive: #4b5b34;
  --nature-beige: #e4ccaa;
  --nature-beige-light: #fffaf8;
  --nature-terracotta: #a44936;
  --nature-pink: #e8a29a;
  --nature-red: #980204;
  --nature-yellow: #ea8914;

  /* --- Balance des blancs --- */
  --color-white: #f0f0f0;
  --color-white-max: var(--color-neutral-100);
  --color-black: #1c1c1c;
  --color-black-max: var(--color-neutral-900);

  /* paramètres pour le dock de navigation */
  --glass-bg-dark: rgba(20, 40, 80, 0.3);
  --glass-bg-light: rgba(180, 240, 255, 0.15);
  --glass-bg-light-alt: rgba(180, 240, 255, 0.5);
  --glass-border-dark: rgba(200, 225, 255, 0.15);
  --glass-border-light: rgba(150, 220, 255, 0.3);
  --led-green: #04ff00;
  --elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Effets --- */
  --color-shadow-light: 232, 232, 232;
  --color-shadow-dark: 0, 0, 0;
  --color-shadow: var(--color-shadow-light);
  --box-shadow-main: 0 10px 30px rgba(var(--color-shadow-dark), 0.3);
  --box-shadow-hover: 0 15px 40px rgba(var(--color-shadow-dark), 0.5);

  /* Variables maîtresses */
  --bg-main: var(--color-black);
  --bg-invert: var(--color-beige);
  --bg-grid-item: var(--color-black-max);
  --text-main: var(--color-beige);
  --text-invert: var(--color-black);
  --text-accent-1: var(--color-orange-dark);
  --text-accent-2: var(--color-lime);
  --contact-color: var(--color-black);
  --contact-color-mark: var(--color-error);
  --border-main: var(--text-accent-1);
  --border-main-rgba-solid: rgba(255, 246, 233, 0.1);
  --border-main-rgba-solid-invert: rgba(28, 28, 28, 0.8);
  --border-main-projects: var(--border-main-rgba-solid);
  --glass-bg: var(--glass-bg-light);
  --glass-border: var(--glass-border-light);
  --ribbon-bg-color-var-1: var(--color-orange-dark);
  --ribbon-bg-color-var-2: var(--color-blue-klein);
  --ribbon-text-color-var-1: var(--color-beige);
  --ribbon-text-color-var-1-hover: var(--color-yellow-bright);
  --ribbon-text-color-var-2: var(--color-beige);
  --ribbon-text-color-var-2-hover: var(--color-yellow-bright);

  /* paramètres pour la modale contact */
  --modal-margin: 20px; /* Marge sur les côtés et en haut */
  --dock-height-reserved: 100px; /* Hauteur approximative du header + sa marge bottom */
  --modal-z-index: 998; /* Juste en dessous du header (999) */

  /* paramétrage des curseurs */
  --cursor-arrow-white:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.04' height='24' viewBox='0 0 16.04 24' fill='%23ffffff'%3E%3Cpath d='M16.04,13.46L0,0v20.94l4.55-5.46,3.98,8.52,4.38-2.04-3.98-8.52,7.11.03Z'/%3E%3C/svg%3E")
      0 0,
    auto;
  --cursor-arrow-black:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.04' height='24' viewBox='0 0 16.04 24' fill='%231c1c1c'%3E%3Cpath d='M16.04,13.46L0,0v20.94l4.55-5.46,3.98,8.52,4.38-2.04-3.98-8.52,7.11.03Z'/%3E%3C/svg%3E")
      0 0,
    auto;
  --cursor-hand-white:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 470.773 470.773' fill='%23ffffff'%3E%3Cpath d='M416.579 156.286c-18.778 0-34 15.222-34 34h-10V154c0-18.778-15.222-34-34-34s-34 15.222-34 34v36.286h-10v-69.429c0-18.778-15.222-34-34-34s-34 15.222-34 34v69.429h-10V34c0-18.778-15.222-34-34-34s-34 15.222-34 34v277.861h-10L85.017 196.998c-7.936-17.02-28.166-24.381-45.184-16.445-17.018 7.936-24.381 28.165-16.445 45.184l114.262 245.037h277.212l4.142-8.31c1.289-2.587 31.574-64.054 31.574-124.431V190.286c0-18.778-15.223-33.999-34.001-33.999z'/%3E%3C/svg%3E")
      8 0,
    auto;
  --cursor-hand-black:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 470.773 470.773' fill='%231c1c1c'%3E%3Cpath d='M416.579 156.286c-18.778 0-34 15.222-34 34h-10V154c0-18.778-15.222-34-34-34s-34 15.222-34 34v36.286h-10v-69.429c0-18.778-15.222-34-34-34s-34 15.222-34 34v69.429h-10V34c0-18.778-15.222-34-34-34s-34 15.222-34 34v277.861h-10L85.017 196.998c-7.936-17.02-28.166-24.381-45.184-16.445-17.018 7.936-24.381 28.165-16.445 45.184l114.262 245.037h277.212l4.142-8.31c1.289-2.587 31.574-64.054 31.574-124.431V190.286c0-18.778-15.223-33.999-34.001-33.999z'/%3E%3C/svg%3E")
      8 0,
    auto;
  --cursor-arrow: var(--cursor-arrow-white);
  --cursor-hand: var(--cursor-hand-white);

  /* paramètres pas défaut d'animation et de tailles */
  --ease-out-elastic: linear(
    0,
    0.5737 7.6%,
    0.8382 11.87%,
    0.9463 14.19%,
    1.0292 16.54%,
    1.0886 18.97%,
    1.1258 21.53%,
    1.137 22.97%,
    1.1424 24.48%,
    1.1423 26.1%,
    1.1366 27.86%,
    1.1165 31.01%,
    1.0507 38.62%,
    1.0219 42.57%,
    0.9995 46.99%,
    0.9872 51.63%,
    0.9842 58.77%,
    1.0011 81.26%,
    1
  );
  --ease-out-elastic-100-30: linear(
    0,
    0.2178 2.1%,
    1.1144 8.49%,
    1.2959 10.7%,
    1.3463 11.81%,
    1.3705 12.94%,
    1.3726,
    1.3643 14.48%,
    1.3151 16.2%,
    1.0317 21.81%,
    0.941 24.01%,
    0.8912 25.91%,
    0.8694 27.84%,
    0.8698 29.21%,
    0.8824 30.71%,
    1.0122 38.33%,
    1.0357,
    1.046 42.71%,
    1.0416 45.7%,
    0.9961 53.26%,
    0.9839 57.54%,
    0.9853 60.71%,
    1.0012 68.14%,
    1.0056 72.24%,
    0.9981 86.66%,
    1
  );
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);

  --bp-mobile: 480px;
  --bp-mobile-landscape: 767px;
  --bp-tablet: 991px;
  --bp-desktop-small: 1024px;
  --bp-desktop-large: 1440px;
  --bp-desktop-extra-large: 1919px;
}

/* 3. Reset & Base */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden] {
  display: none;
}
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%; /* 1rem = 10px */
  min-height: 0vw;
}
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: 600;
}
dfn {
  font-style: italic;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
mark {
  background: #ff0;
  color: #000;
}
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
pre {
  white-space: pre-wrap;
}
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
button,
input {
  line-height: normal;
}
button,
select {
  text-transform: none;
}
/* 1. On applique le curseur de base au body */
html,
body {
  cursor: var(--cursor-arrow);
}

/* 2. Le marteau-piqueur : TOUT hérite du curseur du parent sans exception */
*,
*::before,
*::after {
  cursor: inherit;
}

/* 3. On empêche le curseur de sélection de texte d'apparaître n'importe où */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
img,
svg {
  cursor: inherit;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
  /* cursor: inherit; */
}
button[disabled],
html input[disabled] {
  cursor: inherit;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
*,
*::after,
*::before {
  box-sizing: border-box;
}

/* Masquer la scrollbar pour tous les navigateurs */
html,
body {
  /* Pour Firefox */
  scrollbar-width: none;

  /* Pour Internet Explorer et Edge (ancienne version) */
  -ms-overflow-style: none;
}

/* Pour Chrome, Safari et Edge (nouveau) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  /* --- Textes --- */
  --color-text: var(--color-beige);
  --color-text-light: var(--color-white);
  --color-text-lightest: var(--color-white-max);
  --color-text-dark: var(--color-black);
  --color-text-darkest: var(--color-black-max);
  --color-text-medium-light: var(--color-neutral-300);
  --color-text-medium: var(--color-neutral-500);
  --color-text-medium-dark: var(--color-neutral-700);
  --color-text-accent: var(--color-orange-bright);
  /* --- Arrières-plans --- */
  --color-bg-dark: var(--color-black);
  --color-bg-darkest: var(--color-black-max);
  --color-bg-light: var(--color-white);
  --color-bg-lightest: var(--color-white-max);

  /* --- PARAMÈTRES ÉLÉMENTS SPÉCIFIQUES --- */
  /* carousel cartes */
  --card-width: 450px;
  --card-padding: 32px;
  --card-radius: var(--radius-xl);
  --text-color-dark: var(--color-text-dark);
  --text-color-light: var(--color-text);

  /* section carte avec photo */
  --card-radius: var(--radius-xl);
  --inner-padding: 24px;
  --card-bg: var(--color-green-dark);
  --tag-bg: var(--color-beige);
  --tag-color: var(--text-color-dark);

  /* --- Ruban animé --- */
  --ribbon-height: 80px;
  --ribbon-speed: 20s; /* Vitesse de défilement (plus le chiffre est grand, plus c'est lent) */
  --ribbon-gap: 40px; /* Espace entre chaque item (logo + texte) */

  /* Arrow-links */
  --color-arrow-link: var(--color-beige);
  --color-arrow-link-hover: var(--color-orange-bright);
  --duration-arrow-link: 0.3s;
  --arrow-link-anim: var(--duration-arrow-link) var(--cubic-default);

  /* paramètres de la font par défaut */
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 450;
  font-style: normal;
  line-height: var(--lh-normal);
  color: var(--color-text);

  /* Paramètres par défaut du site */
  background: var(--bg-main);
  background-color: var(--bg-main);
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden !important;
}

/* Transition globale pour les changements de thèmes */
body,
body *,
.animated-ribbon-wrapper,
.grid__item-bg {
  /* On cible uniquement les couleurs pour ne pas ralentir les animations de mouvement GSAP */
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    fill 0.4s ease;
}

/* Alerte noscript */

.no-js-banner {
  background: #ff4b2b;
  color: white;
  text-align: center;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* ===============================
RÉGLAGES DE BASE DES PAGES
=============================== */

.page-base {
  font-family: var(--font-body);
  color: var(--text-main);
  background: var(--bg-main);
  line-height: 1.6;
}

/* ===============================
RÉGLAGES DE BASE DES SECTIONS
=============================== */

.section {
  background-color: var(--bg-main);
  width: 100%;
  padding-block: var(--section-padding-2xl);
  position: relative;
  overflow: hidden;
}

.section__inner {
  max-width: var(--container-inner);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

/* ===============================
RÉGLAGES DE BASE DES TITRES ET DES TEXTES
=============================== */

.section-header {
  /* 1. Structure et Alignement */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligné à gauche par défaut */

  /* 2. Dimensions */
  width: 100%;
  max-width: 85rem; /* On limite la largeur pour une lecture confortable */
  margin-bottom: var(
    --space-lg
  ); /* Espacement généreux avant le contenu suivant */
}

.section-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-accent-1);
  margin-bottom: var(--space-xs);
  font-weight: 500;
  display: block;
}

.section-title {
  font-family: var(--font-primary);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-main);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-md);
}

.section-title span {
  display: inline-block;
  color: var(--text-accent-1);
}

.section-subtitle {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

/* ===============================
TITRES ET PARAGRAPHES DE BASE
=============================== */

h1 {
  font-family: var(--font-primary);
  font-size: var(--fs-2xl);
  line-height: var(--lh-normal);
  font-weight: 600;
}

h2 {
  font-family: var(--font-primary);
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  font-weight: 600;
}

h3 {
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  font-weight: 600;
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 450;
  line-height: var(--lh-normal);
  color: var(--text-main);
  /* max-width: 85rem; */
  overflow-wrap: break-word;
  margin-bottom: var(--space-xs);
}

.text-center {
  text-align: center;
  margin-inline: auto;
  align-items: center;
}

/* Conteneur de la barre (fond gris très discret ou transparent) */
.progress-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px; /* Épaisseur de la barre */
  /* background: var(--color-bg-dark); */
  background: rgba(255, 255, 255, 0.1); /* Fond très discret */
  z-index: 50; /* Toujours au-dessus de tout sauf de content__item */
}

/* La barre de progression elle-même */
.progress-bar {
  height: 4px;
  background: var(
    --border-main
  ); /* Couleur de la barre (orange comme les bordures) */
  width: 0%; /* Départ à zéro */
  transition: width 0.1s ease-out;
}

/* Barre de progression pour les projets du portfolio */
.project-progress-container {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.05); /* Fond très discret */
  z-index: 10001;
  display: none; /* Cachée par défaut */
}

/* L'indicateur qui se remplit - BARRE PORTFOLIO */
.project-progress-bar {
  height: 100%;
  width: 0%; /* Part du bas */
  background: var(--border-main); /* Ton orange/couleur accent */
  transition: width 0.1s ease-out;
}

/* Styles pour le bouton haut de page global HORS PORTFOLIO */
/* .back-to-top-global-portfolio est juste pour la vue grille de la page portfolio */
.back-to-top-global,
.back-to-top-global-portfolio {
  position: fixed;
  right: 50px;
  bottom: -120px; /* Caché sous l'écran */
  display: flex;
  align-items: center;
  transition:
    background-color 0.4s ease,
    opacity 0.4s ease;
  isolation: auto;
  mix-blend-mode: difference;
  z-index: 50;
}

/* .back-to-top-portfolio est juste pour les fiches projet - page portfolio */
.back-to-top-portfolio {
  position: fixed;
  right: 50px;
  bottom: -120px; /* Caché sous l'écran */
  display: flex;
  align-items: center;
  transition:
    background-color 0.4s ease,
    opacity 0.4s ease;
  isolation: auto;
  mix-blend-mode: difference;
  z-index: 10001;
}

.back-to-top-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--color-text-lightest);
  margin-right: 15px;
  /* opacity: 1; */
}

.back-to-top-icon {
  width: 30px;
  height: 30px;
  background: var(--color-bg-lightest);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  mix-blend-mode: normal;
}

.back-to-top-icon svg {
  width: 16px;
  fill: var(--color-bg-darkest);
  transform: translateY(2px);
}

@media (max-width: 1350px) {
  .back-to-top-global,
  .back-to-top-global-portfolio,
  .back-to-top-portfolio {
    right: 50px;
    bottom: -150px; /* On ajuste la position de départ (hauteur de la languette) */
    mix-blend-mode: normal; /* On désactive le mode difference pour voir la couleur de fond */
    /* transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); */
    background-color: var(--glass-bg);
    backdrop-filter: blur(2px) brightness(1.1) saturate(180%);
    -webkit-backdrop-filter: blur(2px);
    padding: 10px 12px 75px 12px;
    border-radius: 10px 10px 0 0;

    border: 1px solid var(--glass-border);
    box-shadow:
      0 8px 32px rgba(20, 40, 80, 0.2),
      inset 0 4px 20px rgba(255, 255, 255, 0.3);
    border-bottom: none;
  }

  /* On fait disparaître le texte */
  .back-to-top-text {
    display: none;
  }

  /* Ajustement de l'icône à l'intérieur de la languette */
  .back-to-top-icon {
    width: 35px; /* Légèrement plus petit pour la languette */
    height: 35px;
    background: var(--color-bg-lightest); /* On garde le cercle contrasté */
  }

  .back-to-top-icon svg {
    width: 14px;
  }
}

/* --- CURSEURS PERSONNALISÉS --- */

/* 1. Curseur par défaut pour toute la page */
html,
.section {
  cursor: var(--cursor-arrow);
}

/* 2. Curseur pour les items de la grille */
.grid__item,
.grid__item * {
  cursor:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 432.57 432.57' fill='%23ffffff'%3E%3Cpath d='M65.46 129.429C65.46 74.604 110.064 30 164.89 30s99.43 44.604 99.43 99.429c0 11.408-1.92 22.602-5.707 33.27l28.271 10.036c4.934-13.898 7.436-28.469 7.436-43.306 0-71.367-58.062-129.429-129.43-129.429S35.46 58.062 35.46 129.429c0 26.908 8.183 52.709 23.664 74.615 15.128 21.405 36.056 37.545 60.522 46.675l10.488-28.106c-18.183-6.435-44.174-43.883-44.174-85.183z'/%3E%3Cpath d='M164.89 80c27.256 0 49.43 22.174 49.43 49.43 0 .252-.011.502-.02.752l-.02.643 29.988.826.015-.45c.02-.589.037-1.178.037-1.771 0-43.798-35.632-79.43-79.43-79.43-43.797 0-79.429 35.632-79.429 79.43 0 24.33 10.97 47 30.098 62.197l18.662-23.489c-11.922-9.472-18.76-23.581-18.76-38.708 0-27.256 22.174-49.43 49.43-49.43z'/%3E%3Cpolygon points='164.89 129.43 164.89 432.568 255.511 323.766 397.108 324.283'/%3E%3C/svg%3E")
      10 10,
    auto;
}

/* 3. Curseur pour les liens et boutons (avec sélecteurs renforcés) */
a[href]:not([href="#"]),
a[href],
button:not([disabled]),
.boost-item,
.panel-btn,
.item,
.hero__dot,
.back-to-top-portfolio,
.back-to-top-global,
.back-to-top-global-portfolio,
.domaines-list_item_header,
#hero-logo-container {
  cursor: var(--cursor-hand) !important;
}

/* 4. Curseur pour les éléments désactivés */
button[disabled],
html input[disabled] {
  cursor: inherit;
}

/* 5. Curseur pour les formulaires-input texte */
#name_input,
#email_input,
#tel_input,
#budget_input,
#message_input {
  cursor:
    url("data:image/svg+xml;charset=utf8,%3Csvg fill='%23f1f1f1' height='24px' width='24px' version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 485 485'%3E%3Cpolygon points='312.274,30 312.274,0 172.726,0 172.726,30 227.5,30 227.5,227.5 202.5,227.5 202.5,257.5 227.5,257.5 227.5,455 172.726,455 172.726,485 312.274,485 312.274,455 257.5,455 257.5,257.5 282.5,257.5 282.5,227.5 257.5,227.5 257.5,30 '%3E%3C/polygon%3E%3C/svg%3E")
      12 12,
    text;
}

/* --- FIN CURSEURS PERSONNALISÉS --- */

/* SITE LOADER */
/* Bloquer le scroll pendant le chargement */
body.is-loading {
  overflow: hidden;
  height: 100vh;
}

.site-loader {
  position: fixed;
  inset: 0;
  background-color: var(--bg-main);
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Pour la vitesse, on prévient le navigateur de ce qui va bouger */
  will-change: transform;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.loader-logo {
  width: 40vw; /* Ajuste la taille */
  height: auto;
  /* Optionnel : un léger battement de cœur pour que l'écran ne paraisse pas figé */
  animation: pulseLogo 0.8s infinite alternate ease-in-out;
}

@keyframes pulseLogo {
  from {
    transform: scale(0.98);
    opacity: 0.9;
  }
  to {
    transform: scale(1.02);
    opacity: 1;
  }
}

.loader-text-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.loader-title {
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Le masque magique pour le carrousel */
.loader-carousel-wrapper {
  height: 80px; /* Doit correspondre à peu près à la taille de la typo en dessous */
  overflow: visible;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40vw; /* Largeur max pour que les phrases tiennent */
}

.loader-phrase {
  position: absolute;
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  color: var(--text-accent-1);
  opacity: 0;
  transform: translateY(20px);
}

.page-curtain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-main); /* Ta couleur de fond globale */
  z-index: 9998; /* Juste en dessous de ton .site-loader (qui doit être à 9999 ou +) */
  pointer-events: none;
  opacity: 1;
}

/* FIN DU SITE LOADER */

a {
  text-decoration: none;
  color: var(--text-main);
  outline: none;
}

a:hover,
a:focus {
  color: var(--text-accent-1);
  outline: none;
}

.hidden {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  pointer-events: none;
}

main {
  position: relative;
}

/* Styles pour les images "onboarding" */
.onboarding-tip {
  position: absolute;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Pour ne pas bloquer les clics en dessous */
}

/* Positionne-les manuellement selon ton design */
.tip-theme {
  top: 80px;
  left: 60px;
  max-width: 245px;
}
.tip-social {
  top: 80px;
  right: 80px;
  max-width: 170px;
}
.tip-nav {
  bottom: 100px;
  left: 60%;
  max-width: 230px;
}

/* ===============================
STYLES POUR LE DOCK DE NAVIGATION
============================== */

/* --- CONTAINER PRINCIPAL --- */
.dock-container {
  position: fixed; /* 1. Sort l'élément du flux pour le fixer à l'écran */
  bottom: 20px; /* 2. Détachement du bas (ajuste selon tes envies) */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  max-width: 90vw;
  z-index: 9999; /* 5. Assure que le dock soit au-dessus des autres éléments */
  background-color: var(--glass-bg);
  backdrop-filter: blur(2px) brightness(1.1) saturate(180%);
  -webkit-backdrop-filter: blur(38px);
  border: 1px solid var(--glass-border);
  border-radius: 52px;
  padding: 8px;
  display: flex;
  align-items: center;
  box-shadow:
    0 8px 32px rgba(20, 40, 80, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity, width, padding;
}

.dock-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 52px;
  backdrop-filter: blur(1px) brightness(1.1) saturate(180%);
  box-shadow:
    inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
    inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
}

/* --- LOGO --- */
.dock-logo {
  background-color: var(--glass-bg);
  box-shadow:
    0 8px 32px rgba(20, 40, 80, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
  color: var(--color-text-lightest);
  height: 50px;
  width: 138px;
  padding: 0 24px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-items: center;
  /* gap: 10px; */
  margin-right: 8px;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition:
    transform 0.3s var(--elastic),
    width 0.3s ease,
    margin 0.3s ease,
    opacity 0.3s ease;
  z-index: 2;
}

.dock-logo svg,
.dock-logo img {
  height: 40px;
  width: auto;
  align-items: center;
  justify-items: center;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

.logo-mobile {
  display: none !important; /* Caché par défaut */
}

.logo-full {
  display: block !important;
}

/* --- BOUTON TOGGLE (+) --- */
.dock-toggle {
  width: 50px;
  height: 50px;
  overflow: hidden;
  transition:
    width 0.4s var(--smooth),
    opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-btn {
  width: 50px;
  height: 50px;
  background: var(--color-neutral-100);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-neutral-700);
}

/* --- MENU NAVIGATON (ICONES) --- */
.dock-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-width 0.6s var(--smooth),
    opacity 0.4s ease;
  z-index: 1;
}

.dock-menu li {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Style des items */
.dock-item {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--color-bg-lightest); /* Icone blanche par défaut */
  border-radius: 50%;
  opacity: 0;
  transform: translateX(10px); /* Optionnel : petit effet de montée */
  transition:
    opacity 0.4s ease,
    transform 0.4s var(--elastic),
    color 0.2s ease;
  will-change: opacity, transform;
  overflow: visible;
}

/* L'arrière plan blanc élastique */
.dock-item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-neutral-100);
  border-radius: 50%;
  transform: scale(0); /* Caché par défaut */
  opacity: 0;
  transition:
    opacity 0.2s var(--elastic),
    transform 0.3s var(--elastic); /* Rebond */
  z-index: 0;
}

/* Interaction au survol des icones */
.dock-item:hover {
  color: var(--color-neutral-700); /* Icone devient noire */
}

.dock-item:hover::before {
  transform: scale(1); /* Cercle blanc apparait avec rebond */
  opacity: 1;
}

.icon-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
}

.dock-icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* --- TOOLTIP DOCK PRINCIPAL (Info bulle) --- */
.tooltip {
  position: absolute;
  bottom: 70px; /* Au dessus de l'icone */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #111;
  color: #fff;
  padding: 6px 12px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* Petite flèche du tooltip */
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #111 transparent transparent transparent;
}

.dock-item:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- BOUTON CONTACT --- */
.dock-contact {
  background-color: var(--glass-bg);
  box-shadow:
    0 8px 32px rgba(20, 40, 80, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
  color: var(--color-text-lightest);
  height: 50px;
  width: 138px; /* Largeur fixe pour le texte "Contact" */
  padding: 0 24px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-left: 8px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 500;
  white-space: nowrap;
  transition:
    transform 0.3s var(--elastic),
    width 0.3s ease,
    padding 0.3s ease,
    margin 0.3s ease,
    opacity 0.3s ease;
  z-index: 2;
}
.dock-contact:hover,
.dock-contact:focus {
  color: var(--led-green) !important;
}

/* Gestion de l'affichage Texte vs Icône sur Desktop */
.contact-icon {
  display: none; /* Caché sur desktop */
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.contact-text {
  display: block; /* Visible sur desktop */
}

/* --- LED VERTE --- */
.led-container {
  position: relative;
  width: 10px;
  height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.led-core {
  width: 8px;
  height: 8px;
  background-color: var(--led-green);
  border-radius: 50%;
  z-index: 2;
}

.led-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--led-green);
  border-radius: 50%;
  z-index: 1;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  70% {
    transform: scale(2.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* --- ETATS GÉRÉS PAR JS (OUVERT / FERMÉ) --- */

/* État Hover sur le container global */
.dock-container.is-hovered {
  padding-left: 12px; /* Ajustement visuel */
}

/* Quand ouvert : On cache le toggle + */
.dock-container.is-hovered .dock-toggle {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

/* Quand ouvert : On affiche le menu */
.dock-container.is-hovered .dock-menu {
  max-width: 500px; /* Assez large pour contenir les icones */
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
}

.dock-container.is-hovered .dock-item {
  opacity: 1;
  transform: translateX(0); /* Revient à sa place */
}

/* L'icône 1 apparaît presque de suite */
.dock-menu li:nth-child(1) .dock-item {
  transition-delay: 0.1s;
}
/* L'icône 2 un peu après */
.dock-menu li:nth-child(2) .dock-item {
  transition-delay: 0.15s;
}
/* L'icône 3 encore après */
.dock-menu li:nth-child(3) .dock-item {
  transition-delay: 0.2s;
}
/* L'icône 4 en dernier */
.dock-menu li:nth-child(4) .dock-item {
  transition-delay: 0.25s;
}

/* Quand on n'est PAS en hover, on enlève le délai pour une disparition instantanée */
.dock-container:not(.is-hovered) .dock-item {
  transition-delay: 0s !important;
  opacity: 0;
  transition: opacity 0.2s ease; /* Disparition plus rapide */
}

/* --- RESPONSIVE MOBILE (La magie de la symétrie) --- */
@media (max-width: 768px) {
  /* 1. La pilule LOGO sur mobile */
  .dock-logo,
  .dock-contact {
    width: 60px; /* Nouvelle largeur carrée/pilule courte */
    padding: 0; /* On enlève le padding pour centrer le logo SVG */
    justify-content: center;
    border-radius: 50px; /* Plus arrondi pour matcher la petite taille */
  }

  .logo-full {
    display: none !important;
  }
  .dock-logo .logo-mobile svg,
  .dock-logo .logo-mobile img,
  .dock-logo .logo-mobile {
    display: block !important;
    width: auto;
    height: 30px; /* On réduit légèrement la hauteur du SVG pour qu'il respire */
  }

  /* On cache le texte et la LED, on affiche l'icône LED */
  .dock-contact .led-container,
  .dock-contact .contact-text {
    display: none;
  }
  .dock-contact .contact-icon {
    display: block;
    width: 26px; /* Légèrement plus grande pour compenser l'absence de texte */
    height: 26px;
    color: var(--led-green); /* L'icône prend la couleur de la LED */
    fill: currentColor;

    /* Application de l'animation */
    animation: iconPulseLive 2s infinite ease-in-out;
  }
}

@media (max-width: 420px) {
  .dock-container.is-hovered .dock-logo,
  .dock-container.is-hovered .dock-contact {
    width: 0;
    max-width: 0; /* On force la réduction */
    margin: 0; /* On supprime les marges pour gagner chaque pixel */
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8); /* Petit effet de rétrécissement en plus */
    overflow: hidden; /* Indispensable pour que le contenu ne dépasse pas pendant la réduction */
  }
}

@keyframes iconPulseLive {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px var(--led-green));
    opacity: 1;
  }
  50% {
    transform: scale(1.1); /* Légère dilatation pour le côté organique */
    filter: drop-shadow(0 0 8px var(--led-green)); /* Halo vert */
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px var(--led-green));
    opacity: 1;
  }
}

/* ===============================
STYLES POUR LA CAPSULE RÉSEAUX SOCIAUX
============================== */

.social-capsule {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 50;
  background-color: var(--glass-bg);
  backdrop-filter: blur(2px) brightness(1.1) saturate(180%);
  -webkit-backdrop-filter: blur(38px);
  transform: translateZ(0);
  backface-visibility: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 40px; /* Un peu moins arrondi car plus petite */
  padding: 5px 12px;
  box-shadow:
    0 8px 32px rgba(20, 40, 80, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.social-capsule::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 52px;
  backdrop-filter: blur(1px) brightness(1.1) saturate(180%);
  box-shadow:
    inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
    inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
}

.social-list {
  display: flex;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  line-height: 0;
}

.social-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  color: white;
  text-decoration: none;
  padding: var(--space-2xs);
  transition: color 0.3s ease;
  box-sizing: border-box;
  line-height: 0;
  will-change: transform, opacity;
}

.social-icon {
  width: 24px; /* Plus petit que le dock principal */
  height: 24px;
  fill: currentColor;
}

/* TOOLTIP Spécial capsule social */
.social-item .tooltip {
  position: absolute;
  top: 120%; /* Positionnée EN DESSOUS de l'icône */
  left: 50%;
  bottom: auto;
  transform: translateX(-50%) translateY(-10px); /* Part d'un peu plus haut */
  background: #111;
  color: #fff;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: var(--lh-body);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  z-index: 51;
}

/* Flèche inversée (pointe vers le haut) */
.social-item .tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%; /* La flèche est maintenant en haut du tooltip */
  left: 50%;
  top: auto;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #111 transparent; /* Couleur sur la bordure basse */
}

/* État Hover */
.social-item:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Responsive : On la cache ou on la réduit sur mobile */
@media (max-width: 768px) {
  .social-capsule {
    top: 10px;
    right: 10px;
    padding: 4px 8px;
  }
}

/* STYLES POUR LE THEME SWITCHER */
.nav-pills-container {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 12px;
  z-index: 100;
  overflow: visible;
}

@media (max-width: 768px) {
  .nav-pills-container {
    top: 10px;
    left: 10px;
  }
}

/* Capsule Thème */
.pill-theme-switcher {
  position: relative;
  width: 52px;
  height: 52px; /* Cercle parfait au départ */
  /* transition:
    width 0.5s var(--smooth),
    background-color 0.3s ease,
    border-color 0.3s ease; */
  opacity: 0;
  visibility: hidden;
  /* will-change: transform, opacity; */
  overflow: visible;
}

.pill-trigger {
  position: relative;
  z-index: 2; /* Devant les points */
  width: 52px;
  height: 52px;
  background-color: var(--glass-bg);
  backdrop-filter: blur(2px) brightness(1.1) saturate(180%);
  -webkit-backdrop-filter: blur(38px);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  box-shadow:
    0 8px 32px rgba(20, 40, 80, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pill-trigger::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 52px;
  backdrop-filter: blur(1px) brightness(1.1) saturate(180%);
  box-shadow:
    inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
    inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
}

/* Conteneur des petits cercles */
.theme-options {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  z-index: 1; /* Derrière le bouton */
}

/* Petits cercles de couleur */
.theme-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  /* On les centre exactement pour le départ du jaillissement */
  transform: translate(-50%, -50%) scale(0);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  opacity: 0;
}

.dot-dark {
  background: var(--dark-black);
  border: 2px solid var(--dark-beige);
}
.dot-light {
  background: var(--bauhaus-cream);
  border: 2px solid var(--bauhaus-red);
}
.dot-beach {
  background: var(--beach-blue);
  border: 2px solid var(--beach-orange);
}
.dot-electric {
  background: var(--electric-green);
  border: 2px solid var(--electric-black);
}
.dot-xxx {
  background: var(--xxx-black);
  border: 2px solid var(--xxx-white);
}
.dot-nature {
  background: var(--nature-olive);
  border: 2px solid var(--nature-yellow);
}

/* STYLES POUR LA PAGE D'ACCUEIL */
.section-full-img {
  width: 100vw;
  height: 100vh; /* Plein écran moins la hauteur du header */
  min-height: 500px; /* Hauteur minimale pour les petits écrans */
  position: relative;
  overflow: hidden;
}

.section-full-img__inner {
  width: 100vw;
  height: 100%; /* Important pour remplir les 75vh */
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.section-full-img__content {
  width: 100%;
  height: 100%;
  /* position: relative; */
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 0;
  overflow: hidden;
  clip-path: inset(0% 0% 0% 0%);
  opacity: 0;
  will-change: transform, clip-path, opacity, z-index;
}

.section-full-img__img-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
}

/* --- L'IMAGE (Optimisée pour le parallaxe) --- */
.section-full-img__content img {
  width: 100%;
  height: 140%; /* 40% de marge pour le mouvement GSAP */
  object-fit: cover;
  position: absolute;
  top: -20%; /* On centre l'image verticalement */
  left: 0;
  display: block;
  will-change: transform;
  pointer-events: none;
}

/* --- LE DÉGRADÉ DE TRANSITION (Bas de page) --- */
.section-full-img__content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* Entre l'image et le grain */
  /* On part de transparent pour finir sur la couleur de ton fond de site */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 60%,
    var(--bg-main) 100%
  );
  pointer-events: none;
}

/* --- OVERLAY GLOBAL --- */
.section-full-img__overlay {
  position: absolute;
  inset: 0;
  /* z-index: 2; Au-dessus du grain et du dégradé */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Laisse passer le clic vers d'autres éléments si besoin */
  /* padding-top: 100px; */
  padding-bottom: 110px; /* à potentiellement remplacer par la variable de hauteur de la nav bar */
}

/* LE BLOC ANIMÈ */
.section-full-img__logo-wrapper {
  /* width: 50vw; */
  height: 100vh;
  /* max-width: 800px; Ajuste selon ton design */
  margin: 0 auto;
  position: relative;
  z-index: 10;
  pointer-events: auto; /* Indispensable pour capter le hover */
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-full-img__logo-wrapper svg {
  overflow: visible;
}

.section-full-img__logo-anim {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  overflow: visible; /* Laisse dépasser les éléments explosés */
  /* visibility: hidden; */
}

/* Optimisation pour l'animation */
.anim-el {
  transform-box: fill-box;
  /* Indique au navigateur d'utiliser la carte graphique (GPU) */
  will-change: transform, filter;
  /* Évite les micro-vibrations pendant l'animation */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* spécifique pour la version AVIF */
.hero-logo-container {
  position: relative;
  width: 40vw;
  /* height: 500px; */
  /* min-width: 35vw; */
  /* max-width: 75vw; */
  height: auto;
  aspect-ratio: 1/1;
  /* Pour rendre ça responsive, tu peux utiliser max-width: 100% et aspect-ratio: 1/1 */
}

@media screen and (max-width: 992px) {
  .hero-logo-container {
    min-width: 60vw; /* Taille adaptative */
  }
}

/* éléments AVIF */
.anim-el-avif {
  position: absolute;
  /* Indique au navigateur d'utiliser la carte graphique (GPU) */
  will-change: transform, filter;
  /* Évite les micro-vibrations pendant l'animation */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
}
.yellow-star-1-avif {
  top: 22.37%;
  left: 18.46%;
  width: 10.88%; /* À ajuster selon la taille réelle de ton image */
}
.yellow-star-2-avif {
  top: 39.13%;
  left: 94.33%;
  width: 10.88%; /* À ajuster selon la taille réelle de ton image */
}
.purple-sun-avif {
  top: 39.17%;
  left: 6.87%;
  width: 32.4%; /* À ajuster selon la taille réelle de ton image */
}
.palette-avif {
  top: 29.1%;
  left: 41.62%;
  width: 31.39%; /* À ajuster selon la taille réelle de ton image */
}
.yellow-sun-avif {
  top: 69.54%;
  left: 66.99%;
  width: 32.4%; /* À ajuster selon la taille réelle de ton image */
}
.brush-avif {
  top: 24.09%;
  left: 50.79%;
  width: 10.71%; /* À ajuster selon la taille réelle de ton image */
}
.badge-avif {
  top: 30.52%;
  left: 72.67%;
  width: 30.36%; /* À ajuster selon la taille réelle de ton image */
}
.logo-main-avif {
  top: 50%;
  left: 50%;
  width: 100%; /* À ajuster selon la taille réelle de ton image */
}
.badge-graphic-avif {
  top: 78.09%;
  left: 35.22%;
  width: 45.37%; /* À ajuster selon la taille réelle de ton image */
}
.hello-avif {
  top: 62.94%;
  left: 90.52%;
  width: 37.62%; /* À ajuster selon la taille réelle de ton image */
}

/* éléments AVIF V2 */
.TroisD-art-avif {
  top: 20%;
  left: 55%;
  width: 24%;
}
.visiteurs-avif {
  top: 74.4%;
  left: 50.2%;
  width: 28%;
}
.windows-avif {
  top: 54.6%;
  left: 93.3%;
  width: 31.4%;
}
.more-coffee-avif {
  top: 52.3%;
  left: 0.5%;
  width: 27.4%;
}
.LDLH-avif {
  top: 36.5%;
  left: 94.7%;
  width: 38.4%;
}
.dark-n-stormy-avif {
  top: 73.7%;
  left: 67.8%;
  width: 27.5%;
}
.music-note-avif {
  top: 36.4%;
  left: 25.9%;
  width: 24.8%;
}
.art-avif {
  top: 24.6%;
  left: 20.8%;
  width: 35.3%;
}
.madland-avif {
  top: 43%;
  left: 12%;
  width: 33.9%;
}
.music-lover-avif {
  top: 68%;
  left: 9.8%;
  width: 29.3%;
}
.is-ok-avif {
  top: 30%;
  left: 42.7%;
  width: 35.8%;
}
.red-badge-avif {
  top: 30.8%;
  left: 74%;
  width: 31.1%;
}
.graphic-workshop-avif {
  top: 77%;
  left: 31%;
  width: 30.2%;
}
.name-tag-avif {
  top: 70.4%;
  left: 81.2%;
  width: 31.6%;
}
.logo-full-avif {
  top: 50%;
  left: 50%;
  width: 100%;
}

.section-full-img__logo {
  display: block; /* Sort du mode inline par défaut */
  width: 293px;
  height: 152px; /* On force la hauteur basée sur viewBox="0 0 292.64 153.43" */
  fill: #ffffff;
}

/* --- LE TITRE --- */
.section-full-img__title-mask {
  overflow: hidden;
  padding-bottom: 20px; /* On laisse de la place pour que l'ombre ne soit pas coupée en bas */
  margin-bottom: -20px; /* On compense la marge pour rester centré */
}

.section-full-img__title {
  font-family: var(--font-primary); /* Ta typo principale */
  font-size: var(--fs-3xl); /* Taille adaptative */
  font-weight: 700;
  color: var(--text-invert);
  letter-spacing: 0.25em;
  margin: 0;

  /*  text-shadow: 0 10px 20px rgba(15, 15, 15, 0.3),
  0 2px 5px rgba(15, 15, 15, 0.1); */
}

.section-full-img__title span {
  display: inline-block; /* Pour pouvoir animer la transformation */
  will-change: transform, opacity;
}

/* --- INDICATEUR DE SCROLL --- */
.scroll-indicator-wrapper {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translate(-50%, 20px);
  opacity: 0; /* On commence à zéro */
  visibility: hidden; /* Sécurité pour empêcher les clics fantômes */
  pointer-events: none;
  transition:
    opacity 0.6s ease,
    visibility 0.6s;
}

.scroll-indicator-wrapper.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.section-full-img__icon--caret {
  display: block; /* Sort du mode inline par défaut */
  width: 32px;
  height: 19px; /* On force la hauteur basée sur ton viewBox 32/19 */
  fill: #ffffff;
  animation: scrollBounce 2s infinite ease-in-out;
}

@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(10px);
    opacity: 1;
  }
}

@media screen and (max-width: 992px) {
  .section-full-img__title {
    font-size: var(--fs-2xl); /* Taille adaptative */
  }
}

@media screen and (max-width: 480px) {
  .section-full-img__title {
    font-size: var(--fs-xl); /* Taille adaptative */
  }
}

/* SECTION AVEC TITRE H1 */
/* Section H1 Intro */
.section-hero-text {
  text-align: center;
}

.hero-intro {
  max-width: 900px; /* On resserre un peu le texte pour la lisibilité */
  margin-inline: auto;
}

.hero-title {
  font-family: var(--font-primary);
  font-size: var(--fs-2xl);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--text-main);
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}

.hero-title__line {
  display: block;
  overflow: hidden; /* Pour l'effet de révélation par le bas */
  line-height: 1.2;
  padding-bottom: 0.1em;
}

.hero-title__line,
.hero-title__line span,
.hero-description,
.hero-separator {
  opacity: 0;
  will-change: transform, opacity, filter;
}

.hero-title__line--alt {
  font-size: var(--fs-xl);
  font-weight: 350; /* Variation de graisse pour le côté design */
  /* font-style: italic; Optionnel : pour le contraste visuel */
}

.hero-title strong {
  color: var(--text-accent-1);
  font-weight: inherit;
}

.hero-description {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-main);
  max-width: 650px;
  margin-inline: auto;
  opacity: 0.9;
}

.hero-description strong {
  position: relative;
  display: inline-block;
  color: var(--text-accent-1);
}

.hero-description strong::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; /* Animé en JS */
  height: 1px;
  background-color: var(--text-accent-1);
  transition: none;
}

.hero-separator {
  width: 150px;
  height: 2px;
  background-color: var(--text-accent-1);
  margin: var(--space-md) auto;
  transform-origin: center;
  will-change: transform;
}

/* Tablette / Mobile */
@media (max-width: 768px) {
  .hero-title {
    font-size: var(--fs-xl);
  }
}

.mood-container {
  margin-top: var(--space-md);
}

.mood-section-title {
  font-size: var(--fs-body);
  margin-bottom: var(--space-md);
}

.mood-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.mood-btn {
  background-color: transparent;
  border: 1px solid var(--text-main);
  color: var(--text-main);
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.8em 1.5em;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0.4;
  will-change: transform, opacity;
}

.mood-btn.active {
  opacity: 1;
  color: var(--text-accent-1);
  border-color: var(--text-accent-1);
}

.mood-icon {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
}

/* Effet de survol façon F1 */
.mood-btn:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  color: var(--text-accent-1);
  border-color: var(--text-accent-1);
  transition: box-shadow 0.3s var(--cubic-default);
}

/* ===============================
STYLES POUR LA GRILLE DE FICHES PROJET
============================== */

.grid-wrap {
  position: relative;
  /* max-width: 1100px; */
  width: 100%;
  max-width: var(--container-inner);
  margin: 0 auto;
  padding: 6rem 1rem 0;
}

.grid-wrap--hidden {
  height: 0;
  overflow: hidden;
}

.grid {
  margin: 0 auto;
  position: relative;
  display: none;
}

.js .grid {
  display: block;
}

/* Désactive toute interaction avec la grille pendant le filtrage */
.grid.is-animating {
  pointer-events: none;
}

.grid__item {
  width: 260px;
  position: relative;
  padding: var(--space-lg);
  margin-bottom: 5rem;
}
.grid a:hover,
.grid a:focus,
.grid a:hover .grid__item-number,
.grid a:focus .grid__item-number {
  color: var(--text-accent-1);
}

/* On force le display:none et on désactive les clics */
.grid__item.is-filtered-out {
  display: none !important;
  pointer-events: none;
}

.grid__item-wrap {
  position: relative;
}

.grid__item-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-grid-item);
  border-radius: var(--radius-md);
}

.grid__item-img {
  pointer-events: none;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  outline: 1px solid transparent;
}

.grid__item:nth-child(even) .grid__item-img {
  transform: rotate3d(0, 0, 1, 4deg);
}

.grid__item:nth-child(odd) .grid__item-img {
  transform: rotate3d(0, 0, 1, -4deg);
}

.grid__item-title {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 500;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0 0 0 1rem;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: 0 50%;
}

.grid__item-number {
  font-weight: bold;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: var(--fs-xl);
  margin: 0 0 0.15rem;
  color: var(--grid-item-number);
}

.grid__item-number > span {
  display: inline-block;
}

/* Style des boutons de filtre de projets */
.filter-controls {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: var(--section-padding-xl);
  flex-wrap: wrap;
}

.filter-domaines {
  padding-top: var(--section-padding-md);
}

.filter-controls.filter-category .filter-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-accent-1);
  align-self: center;
  text-transform: uppercase;
}

.filter-controls.filter-domaines .filter-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-accent-2);
  align-self: center;
  text-transform: uppercase;
}

.filter-controls .filter-btn {
  background-color: var(--bg-main);
  color: var(--text-main);
  border: 1px solid var(--text-main);
  border-radius: var(--radius-sm); /* O.4rem */
  padding: var(--space-xs) var(--space-sm);
  display: flex;
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 300;
  white-space: nowrap; /* Interdit au texte de passer sur 2 lignes */
  flex-shrink: 0;
}

.filter-btn-overlay {
  z-index: 2;
  position: absolute;
  inset: -1px;
}

.filter-btn-overlay-corner {
  border-top: 1px solid var(--text-main);
  border-left: 1px solid var(--text-main);
  border-top-left-radius: var(--radius-sm);
  width: 1rem;
  height: 1rem;
}

.filter-btn-overlay-corner.top-right {
  position: absolute;
  inset: 0% 0% auto auto;
  transform: rotate(90deg);
}

.filter-btn-overlay-corner.bottom-left {
  position: absolute;
  inset: auto auto 0% 0%;
  transform: rotate(-90deg);
}

.filter-btn-overlay-corner.bottom-right {
  position: absolute;
  inset: auto 0% 0% auto;
  transform: rotate(180deg);
}

.filter-btn,
.filter-btn-overlay {
  transition:
    transform 0.475s var(--cubic-default),
    opacity 0.475s var(--cubic-default),
    inset 0.4s var(--cubic-default);
}

.filter-btn:hover .filter-btn-overlay {
  /* transform: scale(1.4); */
  inset: -10px;
  transform: none;
}

.filter-controls:hover:has(.filter-btn:hover) .filter-btn {
  opacity: 0.4;
}

.filter-btn:hover {
  transform: scale(0.9);
  opacity: 1 !important;
}

.filter-controls.filter-category .filter-btn.active {
  background: var(--text-accent-1);
  color: var(--text-invert);
  border: 1px solid var(--text-accent-1);
  font-weight: 700;
}

.filter-controls.filter-domaines .filter-btn.active {
  background: var(--text-accent-2);
  color: var(--text-invert);
  border: 1px solid var(--text-accent-2);
  font-weight: 700;
}

.filter-controls.filter-category .filter-btn.active .filter-btn-overlay-corner {
  border-color: var(--text-accent-1);
}

.filter-controls.filter-domaines .filter-btn.active .filter-btn-overlay-corner {
  border-color: var(--text-accent-2);
}

.filter-btn.unavailable {
  opacity: 0.3 !important; /* Tu peux ajuster cette valeur selon tes préférences */
  pointer-events: none !important; /* Hyper important : empêche le clic et annule tes effets de hover */
  cursor: default;
}

/* --- RESPONSIVE FILTRES PORTFOLIO --- */
@media (max-width: 1100px) {
  .filter-controls {
    /* On réduit un peu l'écart entre les boutons pour qu'ils tiennent mieux */
    gap: var(--space-sm);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .filter-label {
    /* On centre le label au-dessus des boutons */
    width: 100%;
    text-align: center;
    margin-bottom: var(--space-xs);
  }
}

/* ===============================
STYLES POUR LE CONTENU DES FICHES PROJET
============================== */

.content {
  margin: 0 auto;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  align-items: center;
  pointer-events: none;
}

.js .content {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.content__item {
  /* initial : padding: 10rem 5vw 10rem; */
  padding: 16rem 5vw 16rem;
  grid-area: 1 / 1 / 1 / 1;
  z-index: 100;
}

.js .content__item {
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
}

.js .content__item--current {
  height: auto;
  opacity: 1;
  /* initial : padding: 3rem 5vw 10rem; */
  padding: 3rem 3rem 16rem;
  pointer-events: auto;
}

.content__item-intro {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  align-items: center;
  padding: 0;
  margin: 0;
}

.content__item-img {
  position: relative;
  height: auto;
  /* max-width: 100%; */
  display: block;
  margin: 0 auto;
  grid-area: 1 / 1 / 1 / 1;
  pointer-events: none;
}

.js .content__item-img {
  visibility: hidden;
}

/* TEST POUR LE TRES LEGER DECALAGE DE PX */
/* À ajouter pour cibler les deux images */
.grid__item-img,
.content__item-img {
  display: block;
  /* On force le ratio exact de la miniature pour tout le monde */
  aspect-ratio: 180 / 238;
  /* "Cover" va rogner les 2px de trop de l'image full sans déformer */
  object-fit: cover;
  object-position: center;

  /* On met le même outline partout pour éviter le saut de rendu */
  outline: 1px solid transparent;

  /* Optimisation rendu */
  will-change: transform;
}

.grid__item-wrap,
.content__item-intro {
  line-height: 0;
  font-size: 0;
}

/* FIN DU TEST */

.content__item-title {
  position: relative;
  font-size: 5vw;
  line-height: 1;
  text-align: center;
  margin: 0;
  padding: 0 5vw;
  white-space: nowrap;
  grid-area: 1 / 1 / 1 / 1;
  color: var(--color-neutral-100);
  /* L'ombre portée */
  text-shadow:
    0 10px 20px rgba(15, 15, 15, 0.3),
    /* Ombre diffuse (utilise l--color-bg-darkest: #0f0f0f en RGB) */ 0 2px 5px
      rgba(15, 15, 15, 0.1); /* Ombre de contact plus proche */
  will-change: transform, opacity;
}

.content__item-title > span {
  white-space: pre;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.content__item-subtitle {
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-projects);
  margin: 3rem auto;
}

.content__item-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  text-align: justify;
  /* max-width: 800px;
  margin: 0 auto; REMETTRE SI BUG et enlever les lignes suivantes */
  max-width: 1400px;
  margin-inline: auto;
  /* padding-inline: 3rem; */
  width: 100%;
}

.content__item-text p {
  margin: 0;
  color: var(--text-projects);
}

@media screen and (min-width: 55em) {
  .grid__item-number {
    right: -2.45rem;
  }
  .grid__item-title {
    margin-left: -0.25rem;
  }
  .content__item-subtitle {
    font-size: var(--fs-xl);
    max-width: 75%;
  }
  .content__item-img {
    max-width: none;
    /* height: calc(100vh - 6rem); */
    height: calc(100vh - 6vh);
    /* CRUCIAL : Comme on fixe la hauteur, la largeur doit être auto 
       pour que l'aspect-ratio calcule la bonne largeur */
    width: auto;
  }
  .content__indicator {
    display: block;
  }
}

/* Styles pour les blocs à l'intérieur des fiches projet */

/* Pour l'icone "icon-caret" */
.icon {
  display: block;
  width: var(--space-md);
  height: var(--space-md);
  margin: 0 auto;
  fill: currentColor;
  z-index: 10000;
}

.content__close {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  position: absolute;
  top: 0.6rem;
  left: 50%;
  z-index: 10000;
  transform: translateX(-50%);
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: var(--text-projects);
  pointer-events: auto;
}

.content__close:focus {
  outline: none;
}

.content__item--current ~ .content__close {
  pointer-events: auto;
}

.content__indicator {
  position: absolute;
  /* top: calc(100vh - 8rem); */
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(15, 15, 15, 0.3))
    drop-shadow(0 2px 5px rgba(15, 15, 15, 0.1));
  will-change: transform, opacity;
}

.js .content__item-title > span,
.js .content__item-subtitle,
.js .content__item-text,
.content__close,
.content__indicator {
  opacity: 0;
}

/* STYLES POUR LES BLOCKS */
/* GLOBAL */

[class^="block-"] {
  margin-bottom: 8rem; /* Espace constant entre chaque type de bloc */
  margin-inline: auto;
  width: 100%;
}

.block-header {
  /* 1. Structure et Alignement */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligné à gauche par défaut */
  /* 2. Dimensions */
  width: 100%;
  max-width: 85rem; /* On limite la largeur pour une lecture confortable */
  margin-bottom: var(--space-lg);
  margin-inline: 0;
}

/* Variante : Tout centrer */
.block-header--center {
  align-items: center;
  text-align: center;
  margin-inline: auto; /* Centre le bloc lui-même */
}

/* Variante : Texte à droite */
.block-header--right {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}

.block-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-projects);
  margin-bottom: var(--space-xs);
}

.block-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-projects);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-md);
}

.block-title span {
  display: inline;
  color: var(--text-accent-1);
}

.block-subtitle {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-projects);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

/* 1. Bloc 2 colonnes (déjà présent mais à isoler) */
.block-text-2 {
  column-count: 2;
  column-gap: 40px;
  margin-bottom: 4rem;
}

/* 2. Bloc Image Pleine Largeur */
.block-full-img {
  width: 100%;
  margin: 4rem 0; /* Espacement vertical entre les blocs */
}

.block-full-img__inner {
  width: 100vw;
  margin-left: calc(
    -50vw + 50%
  ); /* Pour sortir du conteneur et toucher les bords */
  margin-bottom: 4rem;
  /* On définit la hauteur maximale du conteneur */
  height: 50vh; /* 75% de la hauteur de l'écran */
  min-height: 400px; /* Sécurité pour les petits écrans en mode paysage */
  overflow: hidden;
  position: relative;
  pointer-events: none; /* Désactive les interactions pour éviter les problèmes */
}
.block-full-img img {
  width: 100%;
  height: 120%;
  position: absolute;
  top: -20%;
  left: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

/* 3. Bloc Quote sur Image */
.block-quote-img {
  position: relative;
  height: 60vh;
  min-height: 400px;
  background-attachment: fixed; /* Effet parallaxe simple */
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
}
.block-quote-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Voile noir à 50% d'opacité */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
}
.block-quote-img blockquote {
  position: relative;
  z-index: 2;
  color: var(--text-projects);
  max-width: 800px;
  padding: calc(
    var(--space-lg) + var(--space-md)
  ); /* pour laisser de la place aux guillemets */
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  line-height: 1.4;
  font-weight: 700;
}

/* On utilise le positionnement absolu pour les placer avec précision */
.block-quote-img blockquote::before,
.block-quote-img blockquote::after {
  position: absolute;
  font-size: var(--fs-2xl); /* Plus grand pour le style */
  opacity: 0.3;
  font-family: serif; /* Souvent plus joli pour des guillemets même avec du mono */
  margin-inline: var(--space-md);
}

.block-quote-img blockquote::before {
  content: "“";
  top: 0;
  left: 0;
}

.block-quote-img blockquote::after {
  content: "”";
  bottom: calc(-1 * var(--space-md));
  right: 0;
}
.quote-author {
  display: flex;
  align-items: center;
  justify-content: center; /* Pour rester centré sous la citation */
  margin-top: var(--space-md);
  font-family: var(--font-primary); /* On change de police pour varier */
  font-size: var(--fs-sm);
  font-style: normal; /* Annule l'italique par défaut de <cite> */
  text-transform: uppercase;
  letter-spacing: var(--space-2xs);
  opacity: 0.8;
}

/* La petite barre verticale ou horizontale décorative */
.quote-author::before {
  content: "";
  display: inline-block;
  width: 40px; /* Longueur de la barre */
  height: 1px; /* Épaisseur */
  background-color: var(--text-projects);
  margin-right: 15px;
}

/* 4. DUAL SCROLLING BLOCK */
.block-dual-scroll {
  width: 100%;
  margin: 10vh 0; /* remplacer par padding-block ? */
}

.block-dual-scroll__inner {
  max-width: 1400px; /* Ta cible : 1200px */
  margin-inline: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  overflow: hidden;
}

.dual-img-left {
  width: 40%;
  transform: translateY(10%); /* Décalage initial */
}

.dual-img-right {
  width: 50%;
  transform: translateY(-10%); /* Décalage opposé */
}

.dual-img-left,
.dual-img-right {
  will-change: transform; /* Optimisation performance */
}

.block-dual-scroll img {
  width: 100%;
  height: auto;
  transition: filter 0.5s;
  pointer-events: none;
}

/* FLYING IMAGES SECTION */
/* Le conteneur qui définit l'espace de la section */
.block-flying-images {
  width: 100%;
  max-width: 1400px;
  margin: 10vh auto; /* Espace avant et après la section */
  /* padding: 0 5vw; */
}

/* La liste spécifique */
.flying-list {
  display: grid;
  column-gap: 24px;
  row-gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;

  /* On commence en 1 colonne (mobile) */
  grid-template-columns: 1fr;

  @media (min-width: 500px) {
    grid-template-columns: 1fr 1fr;
  }

  @media (min-width: 768px) {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Les éléments de la liste et les images à l'intérieur */
.flying-item {
  width: 100%;
  aspect-ratio: 1/1; /* Carré */
  padding: 0;
  /* border: 1px solid rgba(0, 0, 0, 0.1); */
  background: var(--bg-invert); /* Optionnel : fond pour tes images */
  overflow: hidden;
  will-change: transform, opacity;
}
.flying-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Assure que les images remplissent bien leur cadre */
  pointer-events: none;
}

/* 5. HORIZONTAL CAROUSEL */
.block-carousel {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: auto;
  display: flex;
  padding: 2rem 5vw;
  gap: 2rem;
  scrollbar-width: none; /* Cache la barre sur Firefox */
}

.block-carousel::-webkit-scrollbar {
  display: none; /* Cache la barre sur Chrome/Safari */
}

.carousel-item {
  flex: 0 0 400px; /* Largeur fixe pour chaque image du scroll */
  height: 500px;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* 6. MOODBOARD BLOCK */
.section-moodboard {
  width: 100%;
  padding: var(--section-padding-lg) 0;
  background: var(--color-bg-darkest);
}

.moodboard-grid {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Espace entre les lignes */
}

.mood-row {
  display: flex;
  gap: 20px; /* Espace entre les images d'une ligne */
  width: 100%;
}

.mood-item {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-darkest);
  flex: 1; /* Par défaut, elles prennent la même place */
}

.mood-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--cubic-default);
  pointer-events: none;
}

/* Effet de survol classe et minimaliste */
.mood-item:hover img {
  transform: scale(1.03);
}

/* --- Variantes de Layouts --- */

/* 1 image seule : Format panoramique ou grand carré */
.mood-row[data-layout="1"] .mood-item {
  aspect-ratio: 21 / 9;
}

/* 2 images : 50/50 */
.mood-row[data-layout="2"] .mood-item {
  aspect-ratio: 1 / 1; /* Carrés parfaits côte à côte */
}

/* 3 images : 1/3 chacune */
.mood-row[data-layout="3"] .mood-item {
  aspect-ratio: 4 / 5; /* Format portrait vertical */
}

/* Layout Asymétrique (très moderne) : 1 grande et 1 petite */
.mood-row[data-layout="asym-left"] .mood-item:nth-child(1) {
  flex: 2;
  aspect-ratio: 16 / 9;
}
.mood-row[data-layout="asym-left"] .mood-item:nth-child(2) {
  flex: 1;
  aspect-ratio: 4 / 5;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .mood-row {
    flex-direction: column; /* On empile tout sur mobile */
  }
  .mood-item {
    aspect-ratio: 1 / 1 !important; /* On force le carré sur mobile pour plus de clarté */
  }
}

/* 7. Vidéo */
.block-video {
  width: 100%;
  background: #000;
}
.block-video video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  outline: none;
}

/* 8. Bouton Lien Externe */
.block-link {
  text-align: center;
  margin: 10vh 0 15vh;
  pointer-events: auto;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 2.5rem;
  border: 1px solid var(--text-projects);
  color: var(--text-projects);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.1rem;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
  pointer-events: auto;
}

.project-link:hover {
  background: var(--text-accent-1);
  color: var(--text-projects);
  border: 1px solid var(--text-projects);
  transform: translateY(-3px);
}

.project-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 0.4s;
}

.project-link:hover svg {
  transform: translateX(5px);
}

/* Styles pour la section title-and-text-2-cols */
.block-title-and-text-2-cols {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.title-and-text-2-cols-container {
  width: fit-content;
  max-width: 1400px; /* À ajuster selon votre design */
  margin: 0 auto;
  display: grid;
  grid-template-columns: max-content minmax(0, 650px);
  column-gap: 3rem;
  row-gap: 2rem; /* Espace entre les items (lignes) */
  align-items: start;
}

.title-and-text-2-cols-row {
  display: contents;
}

.text-title {
  grid-column: 1;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-projects);
  line-height: 1.2;
  white-space: nowrap; /* Empêche le titre de revenir à la ligne pour forcer la largeur max */
  margin: 0;
  text-align: right; /* Alignement à droite */
  /* text-transform: uppercase; Optionnel : pour le style */
}

.text-body {
  grid-column: 2;
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: left; /* Alignement à gauche (pas justifié) */
}

.text-body p {
  margin-bottom: 1.5rem;
}

/* Responsivité : Passage sur une seule colonne pour mobile */
@media (max-width: 768px) {
  .title-and-text-2-cols-container {
    grid-template-columns: 1fr; /* Passage en une seule colonne */
  }
  .title-and-text-2-cols-row {
    display: flex; /* On repasse en flex pour empiler titre et texte */
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
  }

  .text-title {
    text-align: left;
    white-space: normal;
  }
}

/* 9. Block work-presentation */
/* .block-work-presentation {
  width: 100%;
  margin-bottom: 12rem;
} */

.work-container {
  position: relative;
  margin-inline: auto;
  /* width: fit-content; */
  max-width: 100%;
  overflow: visible;
  display: flex;
  justify-content: center;
}

.work-full-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  /* max-height: 85vh; */
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* Le Cartouche */
.work-cartouche {
  position: absolute;
  bottom: var(--space-sm); /* Marge tournante */
  right: var(--space-sm); /* Marge tournante */
  background: rgba(15, 15, 15, 0.8); /* Ton color-bg-darkest avec opacité */
  backdrop-filter: blur(10px); /* Petit rappel de ton style global */
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-sm) var(--space-md);
  max-width: 300px;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-neutral-100);
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.work-container:hover .work-cartouche {
  opacity: 1;
  transform: translateY(0);
}

.cartouche-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-accent-1);
  margin-bottom: var(--space-2xs);
}

.cartouche-title {
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2xs);
}

.work-cartouche .cartouche-desc,
.work-cartouche .cartouche-desc p {
  font-size: var(--fs-xs);
  text-align: left;
  line-height: 1.4;
  margin-bottom: var(--space-xs);
  color: var(--color-neutral-300);
}

.cartouche-year {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: var(--space-xs);
}

/* Responsive Mobile */
@media screen and (max-width: 48em) {
  .work-container {
    flex-direction: column;
    width: 100%;
  }

  .work-cartouche {
    position: static;
    max-width: 100%;
    width: 100%;
    margin-top: var(--space-sm);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: var(--space-sm) 0;
    border: none;
    animation: none;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* 10. block project info */
.block-project-info {
  width: 100%;
  padding: var(--content-padding);
  display: flex;
  justify-content: center; /* Centre la grille horizontalement dans la section */
  color: var(--text-projects);
  border-top: 2px solid var(--border-main-projects);
  border-bottom: 2px solid var(--border-main-projects);
}

.info-grid {
  display: grid;
  /* La première colonne s'adapte au plus grand label (Description) 
       La deuxième colonne prend le reste mais on peut la limiter */
  grid-template-columns: max-content minmax(200px, max-content);
  column-gap: 40px; /* L'espace horizontal entre label et contenu */
  row-gap: 32px; /* L'espace vertical entre les sections */
  align-items: start;
}

.info-label h3 {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.info-value p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-projects);
  max-width: 800px;
  margin: 0;
  text-align: left;
}

/* Conteneur pour aligner plusieurs tags */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Espace entre les tags */
  align-items: center;
}
/* Style du Tag "Visual Designer" */
.project-info-tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-main-projects);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--text-projects);
  white-space: nowrap;
  transform: translateY(-5px);
}
.project-info-tag:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--border-main);
  transition: all 0.3s ease;
}

/* Responsive : On empile tout sur mobile */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr; /* Une seule colonne */
    column-gap: 0;
    row-gap: 40px;
    justify-items: start; /* Aligne tout à gauche */
  }
}

/* block dual-images */
.block-dual-images {
  /* Reprend ta base margin-bottom et width */
  max-width: 100%;
}

.dual-images-container {
  display: grid;
  /* Création de deux colonnes égales */
  grid-template-columns: 1fr 1fr;
  /* Le "petit gap" - ajustable selon tes goûts */
  gap: var(--space-sm);
  width: 100%;
}

.dual-image-item {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.dual-image-item:hover .work-cartouche {
  opacity: 1;
  transform: translateY(0);
}

.work-dual-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Responsive : On réduit le gap sur mobile ou on empile */
@media (max-width: 768px) {
  .dual-images-container {
    gap: 0.8rem;
    grid-template-columns: 1fr;
  }
}

/* 12. block triptyque-images */
.block-triptyque-images {
  width: 100%;
}

.triptyque-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  width: 100%;
}

/* La colonne de droite qui contient les deux petites images */
.triptyque-side {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-sm);
}

.triptyque-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.triptyque-item:hover .work-cartouche {
  opacity: 1;
  transform: translateY(0);
}

.triptyque-img-left,
.triptyque-img-right {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.triptyque-img-left {
  aspect-ratio: 2 / 3;
}
.triptyque-img-right {
  aspect-ratio: 692 / 511;
}

/* Responsive : On empile tout sur mobile pour la lisibilité */
@media (max-width: 768px) {
  .triptyque-container {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .triptyque-side {
    grid-template-rows: auto;
  }
}

/* 13. block quad-images */
.block-quad-images {
  width: 100%;
}

/* Les colonnes */
.quad-images-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  width: 100%;
}

/* Les lignes */
.quad-images-column {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-sm);
}

.quad-images-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.quad-images-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  aspect-ratio: 692 / 511;
}

/* Responsive : On empile tout sur mobile pour la lisibilité */
@media (max-width: 768px) {
  .quad-images-container {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .quad-images-column {
    grid-template-rows: auto;
  }
}

/* 14. block img-text-2-cols */
.block-img-text-2-cols {
  width: 100%;
  padding: var(--space-lg) 0;
}

.img-text-container {
  display: flex; /* Utilisation de flex pour faciliter l'inversion */
  gap: var(--space-md);
  align-items: flex-start;
}

/* Les deux colonnes occupent 50% chacune moins la moitié du gap */
.col-img,
.col-content {
  flex: 1;
  width: 50%;
}

/* L'option d'inversion */
.img-text-container.is-reversed {
  flex-direction: row-reverse;
}

.col-img .work-img-ratio {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 692 / 511;
  pointer-events: none;
}

.col-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.col-title {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-lg);
  color: var(--text-projects);
  line-height: 1.2;
  white-space: nowrap;
  margin: 0;
  text-align: left;
}

.col-text p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: left;
}

.col-title.is-reversed,
.col-text.is-reversed p {
  text-align: right;
}

/* Responsivité mobile */
@media (max-width: 768px) {
  .img-text-container,
  .img-text-container.is-reversed {
    flex-direction: column;
  }

  .col-img,
  .col-content {
    width: 100%;
  }
  .col-title.is-reversed,
  .col-text.is-reversed p,
  .col-content {
    text-align: left;
  }
}

/* Fin des styles pour les blocs contenus dans les fiches projets */

/* --- Styles pour le Footer --- */

.site-footer {
  background-color: var(--color-bg-darkest);
  padding: var(--space-xl);
  --cursor-arrow: var(--cursor-arrow-white);
  --cursor-hand: var(--cursor-hand-white);
  cursor: var(--cursor-arrow);
}

.footer-container {
  max-width: var(--container-inner);
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.footer-column .footer-logo {
  max-width: 200px;
  margin-bottom: 1.5rem;
}

.footer-column .footer-bio {
  color: var(--color-text-medium-light);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.footer-title {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  color: var(--color-neutral-100);
  margin: 0 0 var(--space-sm) 0;
}

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

.footer-links li {
  margin-bottom: var(--space-xs);
}

.footer-links a {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-medium-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--text-accent-2);
}

.site-footer .arrow-link,
.site-footer .arrow-link .arrow-link_text {
  opacity: 1;
  color: var(--color-text-medium-light);
  font-size: var(--fs-md);
}
.site-footer .arrow-link .arrow {
  scale: 0.9;
  transform: translateY(-1px);
}
.site-footer .arrow-link .arrow-part {
  opacity: 1;
  background-color: var(--color-text-medium-light);
}
.site-footer .arrow-link:hover .arrow-link_text {
  opacity: 1;
  color: var(--text-accent-2);
}
.site-footer .arrow-link:hover .arrow-part {
  opacity: 1;
  background-color: var(--text-accent-2);
}

.footer-secondary-logo {
  display: flex;
  justify-content: flex-end;
  padding: 2rem 0;
}

.footer-secondary-logo img {
  max-width: 80px;
  height: auto;
}

.footer-separator {
  border: 0;
  height: 1px;
  background-color: var(--color-neutral-600);
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-neutral-600);
}

.footer-bottom-bar a {
  color: var(--color-neutral-600);
}

.footer-bottom-bar a:hover {
  color: var(--color-neutral-300);
}

/* --- Responsive spécial Footer --- */
#element-cache {
  display: none;
}

/* Pour les tablettes */
@media screen and (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

/* Pour les mobiles */
@media screen and (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-column {
    text-align: center;
  }

  .footer-column .footer-logo,
  .footer-column .content__bouton {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-secondary-logo {
    justify-content: center;
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 1rem;
  }
}

/* --- Fin des styles pour le Footer --- */

/* --- Styles pour la page remerciements --- */
/* 1. Style du texte remerciements */
.merci-texte {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  font-weight: 550;
  color: var(--text-main);
}

/* 2. Conteneur principal pour centrer le contenu */
.construction-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;

  background-color: var(--bg-main);
}

/* 3. Conteneur pour le logo et le texte */
.logo-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-main);
}

/* 4. Style du logo au centre */
.logo {
  width: 150px;
  height: 150px;
  border-radius: 0;
  color: var(--text-main);
  fill: currentColor;
}

.logo-wrapper .logo img,
.logo img {
  color: var(--text-main);
}

.logo-wrapper .logo svg,
.logo svg {
  fill: currentColor;
}

/* 5. Style et positionnement du SVG pour le texte rotatif */
.texte-rotatif {
  position: absolute; /* Se superpose au logo */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: spin 30s linear infinite;
}

/* On stylise le texte à l'intérieur du SVG */
.texte-rotatif text {
  font-size: var(--fs-sm);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 4px; /* Espacement entre les lettres */
  fill: var(--text-main);
}

/* 6. Définition de l'animation de rotation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.timer-retour {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 500;
  opacity: 0.7;
  color: var(--text-main);
}

#count {
  font-weight: 700;
  color: var(--text-accent-1);
}

/* --- Fin des styles pour la page remerciements --- */

/* STYLES POUR LA PAGE CONTACT */
/* STYLES POUR LA MODALE DE CONTACT modal_contact.php */
/* 1. L'OVERLAY (FOND SOMBRE) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--modal-z-index);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

/* 2. LA FENÊTRE MODALE (GLASSMORPHISM) */
.modal-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: var(--modal-margin);
  width: calc(100vw - (var(--modal-margin) * 2));
  max-width: 1400px;
  height: calc(100vh - var(--modal-margin) - var(--dock-height-reserved));
  padding-top: var(--modal-margin);
  background-color: var(--glass-bg-light);
  backdrop-filter: blur(2px) brightness(1.1) saturate(180%);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  box-shadow:
    0 8px 32px rgba(20, 40, 80, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
  transform: translateY(30px) scale(0.98);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
  background-clip: padding-box;
  isolation: isolate;
  cursor: var(--cursor-arrow-white);
}

.modal-window::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(1px) brightness(1.1) saturate(180%);
  border-radius: var(--radius-sm);
  box-shadow:
    inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
    inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
}

/* 3. LE CONTENU SCROLLABLE */
.modal-content-scroll {
  width: 100%;
  /* height: 100%; */
  flex: 1;
  flex-grow: 1;
  height: auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.modal-window,
.modal-content-scroll {
  /* on enlève la barre de scroll */
  scrollbar-width: none;
  /* Pour Internet Explorer et Edge (ancienne version) */
  -ms-overflow-style: none;
}

/* Pour Chrome, Safari et Edge (nouveau) */
.modal-window::-webkit-scrollbar,
.modal-content-scroll::-webkit-scrollbar {
  display: none;
}

/* --- ÉTAT OUVERT (GÉRÉ PAR JS) --- */
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  backdrop-filter: blur(20px) brightness(1.1) saturate(180%);
  -webkit-backdrop-filter: blur(20px);
}

.modal-overlay.is-open .modal-window {
  transform: translateY(0) scale(1);
}

.modal-header {
  width: 100%;
  padding: 20px var(--content-padding);
  max-width: var(--container-inner);
  margin-inline: auto;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  background-color: var(--glass-bg-light-alt);
  backdrop-filter: blur(2px);
  box-shadow:
    0 8px 32px rgba(20, 40, 80, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  position: relative;
  z-index: 20;
}

/* On ajuste le title-wrapper pour qu'il soit bien aligné à gauche */
.modal-header .title-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 0;
  justify-content: center;
  color: var(--contact-color);
}

.modal-header .title-logo {
  width: 36px;
  height: 36px;
}

.modal-header h3 {
  font-size: var(--fs-md);
  letter-spacing: 1px;
  margin: 0;
}

/* 4. BOUTON FERMER */
.modal-close-btn {
  position: relative;
  top: auto;
  right: auto;
  background: var(--glass-bg-light-alt);
  box-shadow: inset 0 4px 20px rgba(255, 255, 255, 0.3);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  color: var(--contact-color);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  --cursor-hand: var(--cursor-hand-white);
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.modal-close-btn:hover {
  background: var(--glass-bg);
  transform: rotate(90deg);
}

/* On s'assure que la section prend toute la hauteur dispo */
.modal-content-scroll .contact-section {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  top: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  cursor: var(--cursor-arrow-white);
}

/* Suppression de la ligne underline sous le titre si elle n'est plus utile dans le header */
.modal-header + .modal-content-scroll .underline {
  display: none;
}

/* Conteneur principal */
.contact-section {
  overflow: visible;
  background-color: transparent;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}

/* Sidebar gauche */
.contact-sidebar {
  position: sticky;
  align-self: start;
}

/* --- RESPONSIVE : Mobile & Tablette --- */
@media (max-width: 992px) {
  .contact-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    align-items: start;
  }

  .modal-content-scroll {
    align-items: center;
    justify-content: flex-start;
  }

  .contact-sidebar {
    width: 100%;
    display: flex;
    justify-content: center;
    position: static;
    order: 1;
  }

  .contact-main {
    order: 2;
  }
}
/* --- Carte de visite --- */
.card {
  position: relative;
  max-width: 440px;
  width: 100%;
  padding: var(--space-md);
  background-color: var(--glass-bg-light-alt);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md);
  backdrop-filter: blur(2px);
  box-shadow:
    0 8px 32px rgba(20, 40, 80, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transform-style: preserve-3d;
  --cursor-hand: var(--cursor-hand-white);
}

/* NAME */
.name-card,
.name-card span {
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: 0.95;
  display: block;
  color: var(--contact-color);
}
/* ROLE */
.role {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  color: var(--contact-color);
  opacity: 0.75;
}

/* DIVIDER + DOT */
.divider {
  margin: 12px 0 18px;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--contact-color),
    transparent
  );
  opacity: 0.2;
}
.accent-dot {
  width: 6px;
  height: 6px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--contact-color);
  opacity: 0.7;
}

/* INFO */
.info {
  display: grid;
  gap: var(--space-sm);
}
.item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* icones couleur solid */
.icon-card-solid-color {
  width: 24px;
  height: 24px;
  opacity: 1;
  overflow: visible;
  fill: var(--contact-color);
}

.item span {
  position: relative;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--contact-color);
  transition: color 0.3s ease;
}
.item span::before {
  content: "—";
  position: absolute;
  left: -20px;
  opacity: 0;
  background: var(--contact-color);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity 0.3s ease;
}
.item:hover .icon-card,
.item:hover .icon-card-solid-color {
  opacity: 0;
}
.item:hover span::before {
  opacity: 1;
}
.item:hover span {
  color: var(--contact-color);
}

/* WATERMARK */
.watermark {
  position: absolute;
  bottom: -30px;
  right: -20px;
  font-size: 130px;
  font-weight: 700;
  letter-spacing: -4px;
  color: rgba(255, 255, 255, 0.1);
  transform: rotate(-8deg);
  pointer-events: none;
  mix-blend-mode: overlay;
}

@media (max-width: 480px) {
  .card {
    padding: var(--space-md);
  }
  .name-card {
    font-size: var(--fs-md);
  }
  .watermark {
    font-size: 80px;
  }
}

@media (max-width: 992px) {
  .card {
    display: none;
    margin: 0 auto;
  }
}

/* --- Conteneur Principal --- */
#form-container {
  position: relative;
  max-width: 1200px;
  width: 100%;
  padding: var(--space-md);
  background: var(--glass-bg-light-alt);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md);
  backdrop-filter: blur(2px);
  box-shadow:
    0 8px 32px rgba(20, 40, 80, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
  overflow: hidden;
  z-index: 0;
}

/* --- Titres et Décoration --- */
.title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: 1rem;
  color: var(--contact-color);
  z-index: 1;
}

.title-logo {
  width: 45px;
  height: 45px;
  color: var(--contact-color);
}

.underline {
  border-bottom: var(--contact-color);
  margin: 0 auto 2.5rem auto;
  width: 100%;
}

/* --- Styles Généraux du Formulaire --- */
form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem 2rem;
}

.form-group {
  width: 100%;
  position: relative;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Classes pour la largeur des champs */
.form-group.name,
.form-group.email {
  width: calc(50% - 1rem);
}
.form-group.telephone {
  width: calc(50% - 1rem);
}
.form-group.budget {
  width: calc(50% - 1rem);
}

/* --- ALIGNEMENT TEXTE LÉGAL & BOUTON --- */
.form-actions-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
}

.form-actions-wrapper .legal {
  margin: 0;
  font-size: var(--fs-xs, 0.8rem);
  opacity: 0.7;
  flex: 1;
  color: var(--contact-color);
}

.form-actions-wrapper .submit-group {
  flex-shrink: 0;
  width: auto;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .form-actions-wrapper {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 1.5rem;
  }

  .form-actions-wrapper .submit-group {
    justify-content: center;
  }

  .form-actions-wrapper .legal {
    text-align: center;
  }
}

label,
.fake-label {
  display: block;
  font-weight: 550;
  text-transform: uppercase;
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: var(--contact-color);
}
label {
  margin-bottom: 0.5rem;
}
.fake-label {
  margin-bottom: 1rem;
}

/* --- Style des Champs de Saisie (Input, Textarea) --- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--contact-color);
  background: none;
  border: none;
  border-bottom: 1px solid var(--contact-color);
  padding: 0.5rem 0;
  width: 100%;
  box-sizing: border-box;
  background-image: linear-gradient(
    to right,
    var(--contact-color),
    var(--text-accent-1)
  );
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition:
    background-size 0.4s ease,
    border-color 0.3s ease;
}

/* --- EFFET AU SURVOL (DISCRET) --- */
/* 1. On neutralise les événements de souris sur les labels de texte uniquement */
.form-group:not(.checkbox-group) > label {
  pointer-events: none;
}

/* 2. On s'assure que les labels des services (checkboxes) restent cliquables */
.checkbox-item label {
  pointer-events: auto !important;
  cursor:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 470.773 470.773' fill='%23f1f1f1'%3E%3Cpath d='M416.579 156.286c-18.778 0-34 15.222-34 34h-10V154c0-18.778-15.222-34-34-34s-34 15.222-34 34v36.286h-10v-69.429c0-18.778-15.222-34-34-34s-34 15.222-34 34v69.429h-10V34c0-18.778-15.222-34-34-34s-34 15.222-34 34v277.861h-10L85.017 196.998c-7.936-17.02-28.166-24.381-45.184-16.445-17.018 7.936-24.381 28.165-16.445 45.184l114.262 245.037h277.212l4.142-8.31c1.289-2.587 31.574-64.054 31.574-124.431V190.286c0-18.778-15.223-33.999-34.001-33.999z'/%3E%3C/svg%3E")
      4 0,
    pointer !important;
}

/* 3. On définit l'animation de survol strictement sur l'input/textarea */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
textarea:hover {
  background-size: 30% 1px !important;
}

/* 4. Cas particulier du budget : l'input est dans une div, on cible le survol de cette div */
.budget-wrapper:hover input {
  background-size: 30% 1px !important;
}

/* 5. On maintient le focus à 100% (prioritaire) */
input:focus,
textarea:focus {
  background-size: 100% 1px !important;
  border-bottom-color: var(--contact-color) !important;
  outline: none;
}

/* --- EFFET AU CLIC / FOCUS (COMPLET) --- */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: none;
  background-size: 100% 1px !important;
  border-bottom-color: var(--contact-color);
}

textarea {
  height: 120px;
  resize: vertical;
}

/* --- Champ Budget --- */
.budget-wrapper {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
}
.budget-wrapper input {
  flex-grow: 1;
}
.budget-wrapper span {
  /* padding-bottom: 0.5rem; */
  font-size: var(--fs-body);
  font-weight: 550;
  color: var(--contact-color);
}

/* --- Cases à cocher (Services) --- */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.checkbox-item {
  display: flex;
  align-items: center;
}
.checkbox-item input[type="checkbox"] {
  display: none;
}
.checkbox-item label {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--contact-color);
  opacity: 0.75;
  margin-bottom: 0;
  transition: color 0.3s;
  text-transform: none;
}
.checkbox-item label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--contact-color);
  /* background: var(--bg-main); */
  transition: all 0.3s;
}
.checkbox-item label:hover:before {
  border-color: var(--contact-color);
}
.checkbox-item input[type="checkbox"]:checked + label:before {
  background-color: var(--contact-color);
  border-color: var(--contact-color);
}
.checkbox-item input[type="checkbox"]:checked + label:after {
  content: "✔";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-neutral-100);
  font-size: var(--fs-sm);
  font-weight: bold;
}

/* Couleur des placeholders */
/* Pour les navigateurs modernes (Chrome, Firefox, Edge, Safari) */
input::placeholder,
textarea::placeholder {
  color: var(--contact-color);
  opacity: 0.6; /* Nécessaire pour Firefox qui baisse l'opacité par défaut */
}

/* Une couleur différente au focus */
input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.2;
}

/* Champ obligatoire */
.required-mark {
  color: var(--contact-color-mark);
  margin-left: 4px;
  font-size: var(--fs-body);
  vertical-align: top;
}

/* Un petit message discret en bas de formulaire */
.form-footer-note {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--contact-color);
  opacity: 1;
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

.form-footer-note span {
  color: var(--contact-color-mark);
  margin-right: 4px;
  font-size: var(--fs-body);
  vertical-align: top;
  font-weight: 550;
}

.form-footer-note.legal {
  font-size: var(--fs-xs);
  font-style: italic;
  margin: 0;
}
.form-footer-note.legal a {
  color: var(--contact-color);
  font-weight: 500;
}

/* --- Bouton d'envoi --- */

#form_button {
  display: inline-flex;
  padding: var(--space-sm) var(--space-md);
  width: fit-content;
  align-items: end;
  gap: var(--space-xs);
  background-color: var(--glass-bg-light);
  border: 1px solid var(--glass-border-light, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  box-shadow:
    0 8px 32px rgba(20, 40, 80, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
  text-decoration: none;
  font-family: inherit;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--contact-color);
  cursor:
    url("data:image/svg+xml;charset=utf8,%3Csvg fill='%23FFFFFF' height='24px' width='24px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.62 56.62'%3E%3Cpath d='M33.66,56.62c-.63,0-1.27-.15-1.85-.45-1.33-.69-1.82-1.94-2.62-4.01l-6.92-17.81-17.8-6.92c-2.07-.8-3.32-1.29-4.01-2.62-.6-1.15-.6-2.53,0-3.69.69-1.34,1.94-1.82,4.01-2.63L49.49.91c1.83-.72,3.05-1.19,4.42-.73,1.19.4,2.13,1.34,2.53,2.53.46,1.37-.01,2.59-.73,4.42l-17.57,45.03c-.81,2.07-1.29,3.32-2.63,4.01-.58.3-1.21.45-1.84.45ZM32.45,51.94h0ZM27.44,32.95l6.22,16,14.22-36.44-20.44,20.44ZM7.67,22.96l16,6.22,20.44-20.44L7.67,22.96ZM4.68,24.17h0Z'/%3E%3C/svg%3E")
      24 0,
    auto;
  transition: all 0.3s ease-in-out;
}

#form_button:hover,
#form_button:focus {
  color: var(--contact-color);
  transform: translateY(-2px);
  box-shadow:
    0 8px 32px rgba(20, 40, 80, 0.4),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

/* Animation de tremblement du formulaire */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}

/* Classe appliquée par le JS en cas d'erreur */
.shake-error {
  animation: shake 0.4s ease-in-out;
  /* On force une bordure rouge pour signaler l'erreur */
  border-bottom-color: var(--contact-color-mark) !important;
}

/* --- Responsive spécial page contact --- */
@media screen and (max-width: 768px) {
  #form-container {
    padding: 1.5rem;
  }
  .form-group.name,
  .form-group.email,
  .form-group.telephone,
  .form-group.budget {
    width: 100%;
  }
}

/* --- OPTIMISATION RENDU MODALE --- */
/* Quand la card et le formulaire sont dans la modale, on simplifie leur rendu */
.modal-window .card,
.modal-window #form-container {
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* On s'assure que le bruit (noise) reste subtil sans casser le rendu */
.modal-window .card::after,
.modal-window #form-container::after {
  opacity: 0.05;
}

/* --- /styles pour la page contact --- */

/* --- Section élastique --- */
/* --- Conteneur --- */
.elastic-section {
  display: flex;
  justify-content: center;
}

.elastic__inner {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.elastic-container {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  height: 500px;
  width: 100%;
  gap: var(--space-xs);
  overflow: hidden;
  margin-bottom: var(--space-md);
  pointer-events: none;
}

/* --- PANNEAU INDIVIDUEL --- */
.elastic-panel {
  position: relative;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex: 1;
  min-width: 0;
  transition:
    flex 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- IMAGE DE FOND (ÉTAT NORMAL) --- */
.panel-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.1s ease;
  opacity: 1;
  z-index: 0;
}

/* --- CONTENU --- */
.panel-content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: var(--space-sm);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-xs);
  place-items: start;
  justify-items: start;
  color: var(--text-invert);
  transition: opacity 0.2s ease;
}

.panel-content-text {
  grid-column: 1;
  height: 100%;
}
.panel-content-img {
  grid-column: 2;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* --- TITRE --- */
.panel-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-bg1);
  margin: 0;
  white-space: nowrap; /* Empêche le retour à la ligne */
  transform-origin: 0 0; /* Point de pivot pour la rotation : coin haut gauche */
  transition:
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.3s ease;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  background-color: var(--c-bg2);
  padding: var(--space-xs) 1.2rem;
  line-height: 0.8;
  width: fit-content;
}

/* --- ÉLÉMENTS CACHÉS (SOUS-TITRE, TEXTE, BOUTON, NOUVELLE IMAGE) --- */
.panel-hidden-info,
.panel-illustration {
  opacity: 0;
  transition:
    opacity 0.15s ease-out,
    transform 0.15s ease-out;
  transition-delay: 0s;
  pointer-events: none;
}

.panel-illustration {
  position: relative;
  width: auto;
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-position: center;
  /* transform: translateX(50px); */
  pointer-events: none;
  border-radius: var(--radius-md);
}

/* =========================================
   INTERACTIONS ET ÉTATS
   ========================================= */

/* 1. QUAND ON SURVOLE LE CONTENEUR GLOBAL */
/* On réduit tous les items par défaut pour laisser place à celui survolé */
.elastic-container:hover .elastic-panel {
  flex: 0.3; /* Très étroit */
}

/* 2. QUAND ON SURVOLE UN PANEL SPÉCIFIQUE (Celui-ci gagne) */
.elastic-container .elastic-panel:hover {
  flex: 4; /* Prend environ 75% de l'espace (4 vs 0.3+0.3+0.3) */
  background: var(--c-bg1);
}

/* Changement d'apparence du panel survolé */
.elastic-panel:hover .panel-bg {
  opacity: 0; /* L'image de fond disparaît */
}

.elastic-panel:hover .panel-title {
  text-shadow: none;
  margin-bottom: var(--space-sm);
  border-radius: 0px;
  background-color: var(--c-bg1);
  padding: var(--space-xs) 0;
  color: var(--c-h2);
}

/* Apparition des infos */
.elastic-panel:hover .panel-hidden-info,
.elastic-panel:hover .panel-illustration {
  opacity: 1;
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-out;
  transition-delay: 0.2s;
}

/* Structure du contenu étendu */
.panel-subtitle {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.5rem;
}

.panel-text {
  line-height: 1.6;
  margin-bottom: var(--space-sm);
  margin-right: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
}

.panel-btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: var(--c-bg2);
  color: var(--c-bg1);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.2s;
  pointer-events: auto;
}

.panel-btn:hover {
  transform: translateY(-2px);
  color: var(--c-hover);
}

/* 3. GESTION DES BLOCS NON SURVOLÉS (RÉTRÉCIS) */
/* Cible les panels qui NE SONT PAS survolés, mais dont le parent est survolé */
.elastic-container:hover .elastic-panel:not(:hover) .panel-title {
  /* Rotation à 90deg */
  transform: rotate(90deg);
  /* Ajustement de la position pour qu'il rentre dans la colonne fine */
  position: absolute;
  top: 2rem; /* Reste en haut */
  left: 50%; /* Centre horizontalement dans la colonne fine */
  /* On compense le décalage dû à la rotation */
  margin-left: 5px;
  text-shadow: none;
  border-radius: 0px;
  background-color: transparent;
  padding: 0;
  color: var(--c-bg2);
}

.elastic-container:hover .elastic-panel:not(:hover) .panel-content {
  padding: 1rem 0; /* Moins de padding */
  align-items: center; /* Centre le point de pivot */
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
  /* 1. On fixe la hauteur du conteneur global. 
     700px est un bon compromis pour loger l'image et le texte ouvert. */
  .elastic-container {
    flex-direction: column;
    height: 700px;
    gap: var(--space-xs);
    pointer-events: auto; /* On s'assure que le hover fonctionne */
  }

  /* 2. État par défaut : tous les panneaux se partagent équitablement les 700px */
  .elastic-panel {
    width: 100%;
    flex: 1; /* Chaque panneau fait 1/4 de la hauteur (moins les gaps) */
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* 3. AU SURVOL DU CONTENEUR : 
     On réduit tous les panneaux pour laisser la place à celui qui sera survolé.
     Ratio 0.5 : assure une hauteur d'environ 80-90px, parfait pour la lisibilité du titre. */
  .elastic-container:hover .elastic-panel,
  .elastic-container.has-active .elastic-panel {
    flex: 0.5;
  }

  /* 4. AU SURVOL D'UN PANNEAU PRÉCIS :
     Il prend le dessus sur les autres. */
  .elastic-container .elastic-panel:hover,
  .elastic-container .elastic-panel.is-active {
    flex: 3; /* Il devient 6 fois plus grand que les panneaux rétrécis */
    background: var(--c-bg1);
  }

  /* 5. AJUSTEMENT DU CONTENU */
  .panel-content {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-sm);
    padding: var(--space-sm);
    height: 100%;
    overflow: hidden;
  }

  .elastic-panel .panel-title {
    font-size: var(--fs-md);
    text-align: left;
    transition: all 0.5s ease;
    transform: none !important; /* On tue les rotations desktop */
    position: static !important;
  }

  .elastic-panel:hover .panel-content,
  .elastic-panel.is-active .panel-content {
    display: grid; /* On repasse en grid pour la structure Texte/Image */
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
    justify-items: start;
    padding: var(--space-sm);
  }

  .elastic-panel:hover .panel-title,
  .elastic-panel.is-active .panel-title {
    font-size: var(--fs-md);
    margin-bottom: var(--space-xs);
    text-align: left;
  }

  /* On s'assure que les infos cachées ne poussent pas les murs */
  .panel-hidden-info {
    max-height: 250px;
    overflow-y: auto; /* Au cas où le texte serait trop long sur petit écran */
  }

  /* 6. NETTOYAGE DES TITRES */
  /* Panneaux non-survolés : on centre le titre pour la propreté */
  .elastic-container:hover .elastic-panel:not(:hover) .panel-content {
    align-items: start;
    padding: var(--space-sm);
  }

  .elastic-container:hover .elastic-panel:not(:hover) .panel-title {
    /* Rotation à 90deg */
    transform: none !important;
    position: static !important;

    /* On compense le décalage dû à la rotation */
    margin-left: 0;
    text-shadow: none;
  }

  /* Image à droite bien calée */
  .panel-content-img {
    position: relative;
    height: 100%;
    align-self: center;
  }
}

/* préparation pour GSAP */
.elastic-tag,
.elastic-title,
.elastic-intro,
.elastic-panel {
  opacity: 0;
}
/* état final GSAP */
.elastic-section.is-ready .elastic-container {
  pointer-events: auto;
}

/* Section carousel scrollable */
.projects-section {
  position: relative;
  overflow: hidden;
}
/* Le fondu à GAUCHE */
.projects-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 10vw; /* Largeur du dégradé */
  background: linear-gradient(to left, transparent, var(--bg-main));
  z-index: 2; /* Pour passer au-dessus des cartes qui défilent */
  pointer-events: none; /* Laisse passer le clic à travers */
}

/* Le fondu à DROITE */
.projects-section::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10vw;
  background: linear-gradient(to right, transparent, var(--bg-main));
  z-index: 2;
  pointer-events: none;
}

.projects-container {
  display: flex;
  gap: var(--space-md); /* Un peu plus d'espace pour l'aération */
  padding: var(--space-lg) 12vw;

  /* --- SCROLL FLUIDE ET LIBRE --- */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth; /* Pour les sauts via boutons si besoin */
  -webkit-overflow-scrolling: touch; /* Momentum scroll pour iOS */
  touch-action: pan-x; /* Indique au navigateur que cette zone est faite pour le scroll horizontal */
  scroll-snap-type: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.projects-container::-webkit-scrollbar {
  height: 6px;
}
.projects-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.project-card {
  flex: 0 0 350px; /* Largeur confortable */
  min-width: 350px;
  height: 450px;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--space-md);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  background: rgba(0, 0, 0, 0.2);
  color: var(--text-main);
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
}

/* --- SECTION UNIFIÉE : PROCESSUS & EXPERTISE --- */
.section-process {
  background-color: var(--bg-main);
  overflow: hidden;
  padding-block: var(--space-xl);
}

.section-process-title {
  margin-bottom: 0;
}

.section-process__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
  position: relative;
}

/* Base de la carte avec lueur */
.section-process_card {
  position: relative;
  border-radius: var(--radius-md);
  padding: 2px;
  overflow: hidden;
  display: flex;
  transition: box-shadow 0.3s ease;
}

.section-process_card:hover {
  box-shadow: 0 0 30px rgba(var(--color-shadow), 0.2);
}

/* Intérieur de la carte */
.section-process_card_content {
  position: relative;
  background: var(--bg-main);
  border-radius: calc(var(--radius-md) - 1px);
  padding: var(--space-md);
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* En-tête de la carte (Numéro + Icône) */
.section-process_card_content_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-process-card);
  padding-bottom: 1rem;
}

.section-process_card_content_top_number {
  font-family: var(--font-mono);
  font-size: 1.5rem; /* Un peu plus grand pour l'impact */
  font-weight: 700;
  color: var(--color-process-card);
  line-height: 1;
}

.section-process_card_content_top_icon {
  width: 32px;
  height: 32px;
  z-index: 10;
  color: var(--color-process-card);
  transition: transform 0.3s ease;
}

.section-process_card:hover .section-process_card_content_top_icon {
  transform: scale(1.1); /* L'icône grossit légèrement au survol */
}

.section-process_card_content_top_icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--color-process-card);
}

/* Typographie */
.section-process_card_content h3 {
  font-size: var(--fs-md);
  color: var(--text-main);
  font-weight: 600;
  margin-bottom: 1rem;
}

.section-process_card_content p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-main);
  margin: 0;
}

/* Animations JS de la lueur (Inchangé) */
.section-process_card_content_glow {
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(
    circle,
    var(--color-process-card) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  filter: blur(15px);
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  will-change: top, left;
}

/* Responsive */
@media (max-width: 992px) {
  .section-process__grid {
    grid-template-columns: 1fr;
    padding-inline: 10rem;
  }
}

/* SLIDER AVEC COMPTEUR DE SLIDES */
.block-slider-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--container-inner);
  margin: 8rem auto;
  gap: 2rem;
}

/* Contrôles — inchangés visuellement */
.slider-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 45vw;
  max-width: 800px;
}

.controls-left {
  display: flex;
  align-items: center;
}
.controls-right {
  display: flex;
  gap: 1rem;
}

.overlay-count-row {
  display: flex;
  flex-flow: row;
  align-items: baseline;
  column-gap: var(--space-xs);
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  height: 1em;
}

.count-column {
  height: 1em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Le wrapper qui se translate verticalement */
.count-steps-wrapper {
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.count-heading {
  width: 2ch;
  height: 1em;
  font-size: 1em;
  line-height: 1;
  margin: 0;
  color: var(--text-projects);
  flex-shrink: 0;
}

.count-row-divider {
  background-color: var(--text-projects);
  width: 2px;
  height: 0.8em;
  transform: rotate(15deg);
}

/* Boutons — identiques à avant */
.button-slider {
  background-color: var(--bg-grid-item);
  color: var(--text-projects);
  border: 1px solid var(--text-projects);
  border-radius: 0.4em;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  padding: 0;
  display: flex;
  position: relative;
  font-size: 1rem;
  cursor: pointer;
}

.button-slider-arrow {
  flex: none;
  width: 1em;
  height: 0.75em;
}
.button-slider-arrow.next {
  transform: rotate(180deg);
}
.button-slider-overlay {
  z-index: 2;
  position: absolute;
  inset: -1px;
}
.overlay-corner {
  border-top: 1px solid var(--text-projects);
  border-left: 1px solid var(--text-projects);
  border-top-left-radius: 0.4em;
  width: 1em;
  height: 1em;
}
.overlay-corner.top-right {
  position: absolute;
  inset: 0% 0% auto auto;
  transform: rotate(90deg);
}
.overlay-corner.bottom-left {
  position: absolute;
  inset: auto auto 0% 0%;
  transform: rotate(-90deg);
}
.overlay-corner.bottom-right {
  position: absolute;
  inset: auto 0% 0% auto;
  transform: rotate(180deg);
}

.button-slider,
.button-slider-overlay {
  transition:
    transform 0.475s var(--cubic-default),
    opacity 0.475s var(--cubic-default);
}
.button-slider:hover .button-slider-overlay {
  transform: scale(1.4);
}
.controls-right:hover:has(.button-slider:hover) .button-slider {
  opacity: 0.4;
}
.button-slider:hover {
  transform: scale(0.85);
  opacity: 1 !important;
}

/* Track wrapper */
.slider-track-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider-overlays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.slider-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 20%;
}
.slider-overlay.left {
  left: 0;
  background-image: linear-gradient(90deg, var(--bg-grid-item) 0%, #0000);
}
.slider-overlay.right {
  right: 0;
  background-image: linear-gradient(-90deg, var(--bg-grid-item) 0%, #0000);
}

/* ✅ Le cœur : scroll-snap natif */
.slider-track {
  display: flex;
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Cache la scrollbar */
  gap: var(--space-xs);
  padding: 0 27.5%; /* Centre la slide active */
  box-sizing: border-box;
}
.slider-track::-webkit-scrollbar {
  display: none;
}

.slider-slide {
  flex: none;
  width: 45vw;
  max-width: 800px;
  scroll-snap-align: center;
  opacity: 0.2;
  transition: opacity 0.5s ease;
}
.slider-slide.active {
  opacity: 1;
}

.slide-inner {
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--bg-grid-item);
}
.slide-inner img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

/* AJOUTS POUR LE DRAG SOURIS NATIF */
.slider-track.is-dragging {
  scroll-snap-type: none !important; /* On désactive le magnétisme pendant qu'on tire */
  scroll-behavior: auto !important; /* On enlève la fluidité forcée pour suivre la souris */
}
.slider-track.is-dragging .slider-slide {
  pointer-events: none; /* Évite de cliquer sur une image par erreur en draguant */
}

/* Curseurs personnalisés */
/* État normal : Main Ouverte (Grab) sur toute la zone du slider */
.slider-track,
.slider-track * {
  cursor:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 429.407 429.407' fill='%23ffffff'%3E%3Cg%3E%3Cpath d='M346.204,195.951c-14.083,0-25.5,11.417-25.5,25.5h-10v-27.474c0-14.083-11.417-25.5-25.5-25.5s-25.5,11.417-25.5,25.5v27.474h-10v-52.567c0-14.083-11.417-25.5-25.5-25.5s-25.5,11.417-25.5,25.5v52.567h-10V105.5c0-14.083-11.417-25.5-25.5-25.5s-25.5,11.417-25.5,25.5v188.798h-10v-61.571c0-14.083-11.417-25.5-25.5-25.5s-25.5,11.417-25.5,25.5v93.851c0,56.7,46.129,102.829,102.829,102.829h89.343c56.699,0,102.828-46.129,102.828-102.829V221.451C371.704,207.368,360.287,195.951,346.204,195.951z'/%3E%3Cpath d='M57.704,90.5h50v30h-50V90.5z'/%3E%3Cpath d='M99.21,20.293l35.354,35.354L113.351,76.86L77.997,41.506L99.21,20.293z'/%3E%3Cpath d='M148.204,0h30v50h-30V0z'/%3E%3C/g%3E%3C/svg%3E")
      12 12,
    grab !important;
}
/* On exclut les boutons pour garder le pointeur (main avec doigt) */
.slider-track .button-slider,
.slider-track .button-slider * {
  cursor: var(--cursor-hand) !important;
}
/* L'état de mouvement (Main fermée) : appliqué sur le body via JS */
body.is-dragging,
body.is-dragging * {
  cursor:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 383.916 383.916' fill='%23ffffff'%3E%3Cpath d='M347.958,69.429c-18.778,0-34,15.222-34,34h-10V67.143c0-18.778-15.222-34-34-34s-34,15.222-34,34v36.286h-10V34c0-18.778-15.222-34-34-34s-34,15.222-34,34v69.429h-10V67.143c0-18.778-15.222-34-34-34s-34,15.222-34,34v158.14h-10v-85.568c0-18.778-15.222-34-34-34s-34,15.222-34,34v111.461c0,60.377,30.286,121.844,31.575,124.431l4.141,8.31h308.568l4.142-8.31c1.289-2.587,31.574-64.054,31.574-124.431V103.429C381.958,84.651,366.736,69.429,347.958,69.429z'/%3E%3C/svg%3E")
      12 12,
    grabbing !important;
}

@media (max-width: 768px) {
  .slider-controls {
    width: 90vw;
    padding: 0 1.5rem;
  }
  .slider-track {
    padding: 0;
    gap: 0;
  }
  .slider-slide {
    width: 100vw;
    max-width: none;
    scroll-snap-align: start;
  }
  .slide-inner {
    border-radius: 0;
  }
  .slider-overlays {
    display: none;
  }
}

/* --- Styles pour la page Mentions Légales --- */
.section-legal {
  padding-block: 8rem 12rem;
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
}

.legal-content {
  max-width: 800px; /* Centre le contenu et limite la largeur pour la lisibilité */
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.legal-content h1 {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 6rem;
  line-height: 0.9;
  text-transform: uppercase;
}

.legal-content h2 {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-top: 5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* La ligne appliquée aux titres légaux */
.legal-content h2::before {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background-color: var(--text-accent-1);
}

.legal-content p {
  font-size: var(--fs-sm);
  opacity: 0.85;
  margin-bottom: 1.5rem;
}

.legal-content strong {
  font-weight: 700;
  color: var(--text-main);
}

.legal-content a {
  color: var(--text-accent-1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.legal-content a:hover {
  border-bottom-color: currentColor;
}

/* Style spécifique pour l'adresse ou les listes */
.legal-content p br + strong {
  display: inline-block;
  margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .section-legal {
    padding-block: 4rem 6rem;
  }
  .legal-content h1 {
    margin-bottom: 4rem;
  }
}

/* --- /styles pour la page Mentions Légales --- */

/* --- Styles pour la page PRESTATIONS & SERVICES --- */

/* --- LE CONTENEUR MAÎTRE --- */
.services-hero-wrapper {
  position: relative;
  height: 100dvh; /* Prend toute la hauteur de l'écran (version mobile-friendly) */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Repousse les rubans aux extrémités */
  overflow: visible;
  background-color: var(--bg-main); /* Assure-toi que le fond est raccord */
}

/* --- LE CONTENU CENTRAL --- */
.services-hero-content {
  flex-grow: 1; /* Prend tout l'espace disponible entre les deux rubans */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  padding-inline: var(--space-md);
  z-index: 2;
}

/* --- LE HALO LUMINEUX (Profondeur) --- */
.ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  height: 60vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(circle, var(--text-accent-1) 0%, transparent 70%);
  opacity: 0.05; /* Très subtil, ajuste selon ton thème */
  filter: blur(60px);
  z-index: -1; /* Reste derrière le texte */
  pointer-events: none;
}

.services-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-main);
  text-transform: uppercase;
}

/* Conteneur pour s'assurer que tout reste centré et propre */
.section-title-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: var(--space-lg);
  margin-top: var(--space-md);
}

.custom-logo-header {
  display: inline-flex; /* Permet au bloc de ne prendre que la place nécessaire */
  align-items: center; /* Aligne verticalement le texte et le logo */
  justify-content: center;
  gap: 0.1em;
  margin: 0;
  line-height: 1;
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--text-main);
  text-transform: uppercase;
}

.text-highlight {
  white-space: nowrap; /* Évite que le & ne se retrouve tout seul */
}

.text-highlight span {
  display: inline-block; /* Permet les transformations de rotation et translation */
  min-width: 0.1em; /* Garde un espace pour le caractère "espace" */
}

.header-logo-svg {
  /* L'unité 'em' permet au logo de grandir avec la taille du texte */
  height: 1.2em;
  aspect-ratio: 292.64 / 153.43;
  fill: currentColor;
  object-fit: contain;
  object-position: left center;
  /* Optionnel : petit ajustement visuel si le logo paraît trop haut par rapport au texte 
  transform: translateY(-0.02em); */
}

/* --- L'INDICATEUR DE SCROLL --- */
.scroll-prompt {
  position: absolute;
  bottom: var(--space-xl); /* Juste au-dessus du ruban du bas */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0; /* Caché par défaut, révélé par GSAP */
}

.scroll-prompt-text {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-main);
  opacity: 0.7;
}

.scroll-prompt-line {
  width: 2px;
  height: 40px;
  background-color: var(--text-main);
  opacity: 0.3;
  position: relative;
  overflow: hidden;
}

/* La petite goutte qui tombe dans la ligne */
.scroll-prompt-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: var(--text-accent-1);
  animation: scrollDrop 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollDrop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(200%);
  }
}

/* Ajustement mobile pour éviter que ce soit trop énorme */
@media (max-width: 600px) {
  .custom-logo-header {
    font-size: var(--fs-2xl);
  }
}

/* Préparation GSAP SEO friendly (seulement l'opacité) */
.services-tag,
.text-highlight span,
.header-logo-svg,
.services-subtitle {
  opacity: 0;
}

/* SECTION DOMAINES D'ACTIVITÉ */
/* État initial pour l'animation GSAP */
.section-domaines .section-header h2,
.domaines-list,
.domaines-list_item,
.domaines-visuals {
  opacity: 0;
}

.domaine-header {
  margin-bottom: var(--space-md);
}
.domaines-content {
  display: grid;
  grid-template-columns: 4fr 6fr; /* Ratio 40% / 60% */
  gap: 40px;
  max-width: var(--container-inner);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  position: relative;
  align-items: center;
}

/* --- COLONNE GAUCHE --- */
.domaines-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--text-main);
  list-style: none;
  padding: 0;
  margin: 0;
}

.domaines-list_item {
  border-bottom: 1px solid var(--text-main);
  padding: 20px 0;
  position: relative;
  scroll-margin-top: 100px; /* à ajuster selon la hauteur du header */
}

.domaines-list_item_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  background: none;
  width: 100%;
  padding: 0;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.domaines-list_item_header_title {
  font-size: var(--fs-md);
  margin: 0;
  transition: color 0.3s ease;
  font-weight: 600;
  flex: 1;
}

/* --- ICONE MODERNE (+) vers (-) --- */
.domaines-list_item_header_icon-plus {
  position: relative;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar-horizontal,
.bar-vertical {
  position: absolute;
  background-color: var(--text-main);
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.bar-horizontal {
  width: 100%;
  height: 2px;
}

.bar-vertical {
  width: 2px;
  height: 100%;
  transform: scaleY(1); /* Visible par défaut */
}

/* Transformation en moins quand actif */
.domaines-list_item.active .bar-vertical {
  transform: scaleY(0); /* Réduit la barre verticale à néant */
  opacity: 0;
}

/* Style de l'item actif pour la typographie */
/* Style de l'item actif */
.domaines-list_item.active .domaines-list_item_header_title {
  color: var(--text-accent-1);
}

/* Le texte caché par défaut */
.domaines-list_item_content {
  height: 0;
  overflow: hidden;
  /* On utilise clip-path pour une fermeture plus nette */
  transition: height 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.domaines-list_item_content-inner {
  padding-top: 20px;
  opacity: 0;
  /* ransform: translateY(10px);
  transition: all 0.1s ease; */
}

.domaines-list_item.active .domaines-list_item_content-inner {
  opacity: 1;
  /* transform: translateY(0); */
}

/* --- COLONNE DROITE --- */
.domaines-visuals {
  position: sticky;
  top: 100px; /* S'arrête à 100px du haut de l'écran */
  height: auto;
  max-height: 80vh; /* Prend presque tout l'écran */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  pointer-events: none;
  overflow: visible;
}

.domaines-visuals-sticky-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  border-radius: 20px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.domaines-visual-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  /* transition:
    opacity 0.8s ease,
    transform 0.8s ease; */
  will-change: opacity, transform;
  border-radius: 20px;
}

.domaines-visual-img.active-img {
  opacity: 1;
  z-index: 2;
}

/* --- VISUELS MOBILES (Cachés par défaut sur Desktop) --- */
.domaines-item-mobile-image {
  display: none;
  width: 100%;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9; /* Format paysage pour ne pas trop manger de hauteur */
  pointer-events: none;
}

.domaines-item-mobile-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 992px) {
  .domaines-content {
    grid-template-columns: 1fr; /* Une seule colonne */
    max-width: 700px;
  }
  .domaines-visuals {
    display: none; /* On cache la colonne de droite fixe sur mobile */
  }
  .domaines-list_item_header_title {
    font-size: var(--fs-lg);
  }
  .domaines-item-mobile-image {
    display: block; /* On révèle l'image dans l'accordéon */
  }

  .domaines-list_item_content-inner {
    padding-top: 10px;
    padding-bottom: 20px; /* Un peu d'air en bas */
  }
}

/* FIN SECTION DOMAINES D'ACTIVITÉS */
/* --- SECTION FOCUS --- */
.section--focus {
  background: var(--bg-main);
  padding-block: var(--space-xl);
  overflow: hidden;
}

.focus-layout {
  display: grid;
  align-items: center;
  grid-template-columns: 1.2fr 1fr;
  gap: 8rem;
  text-align: left;
}

@media (max-width: 992px) {
  .focus-layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }
}

/* --- TYPOGRAPHIE & HEADER --- */
.focus-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: bold;
  color: var(--text-accent-1);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-md);
  position: relative;
}

/* Petite ligne déco devant le tag */
.focus-tag::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: var(--text-accent-1);
  margin-right: 10px;
  vertical-align: middle;
}

@media (max-width: 992px) {
  .focus-tag::before {
    display: none;
  }
}

.focus-title {
  font-size: var(--fs-xl); /* N'hésite pas à utiliser un clamp() ici si tu as */
  line-height: 1.05;
  margin-bottom: var(--space-md);
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.focus-title span {
  font-style: italic;
  font-weight: 300;
  color: var(--text-accent-1); /* Met l'accent sur l'identité sonore */
}

.focus-intro {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-main);
  opacity: 0.8;
  margin-bottom: var(--space-xl);
  max-width: 60ch;
  margin-inline: auto;
}

/* --- LA TRACKLIST (Liste magique avec compteurs CSS) --- */
.focus-tracklist {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: track-counter; /* Initialise le compteur */
}

.focus-tracklist li {
  position: relative;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--border-main-rgba-solid);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  counter-increment: track-counter; /* Incrémente à chaque li */
}

.focus-tracklist li:first-child {
  border-top: 1px solid var(--border-main-rgba-solid);
}

/* Le numéro généré automatiquement (01, 02...) */
.focus-tracklist li::before {
  content: "0" counter(track-counter);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-accent-1);
  font-weight: bold;
}

.track-text {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Interaction au survol de la liste */
.section--focus.is-ready .focus-tracklist li:hover {
  transition: transform 0.3s ease;
  transform: translateX(10px);
}
.section--focus.is-ready .focus-tracklist li:hover .track-text {
  transition:
    color 0.3s ease,
    transform 0.3s ease;
  color: var(--text-accent-1);
}

/* --- VISUEL & IMAGE ÉDITO --- */
.focus-visual-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end; /* Poussé à droite sur desktop */
}

@media (max-width: 992px) {
  .focus-visual-wrapper {
    justify-content: center; /* Centré sur mobile */
  }
}

.focus-image-container {
  max-width: 540px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  /* Ombre douce pour décoller l'image du fond */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

@media (max-width: 992px) {
  .focus-image-container {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-width: none;
  }
}

.focus-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.focus-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 40%);
  z-index: 1;
  opacity: 0.5;
  transition: opacity 0.5s ease;
}

/* Magie au survol de l'image (Révélation) */
.section--focus.is-ready .focus-image-container:hover .focus-img {
  transition: transform 0.4s ease;
  transform: scale(1.05); /* Zoom très lent */
}
.section--focus.is-ready .focus-image-container:hover .focus-img-overlay {
  opacity: 0;
}

/* --- LE LABEL TECHNIQUE (La Carte) --- */
.expertise-label {
  position: absolute;
  z-index: 2;
  top: unset;
  right: unset;
  bottom: 40px;
  left: -40px; /* Déborde sur la gauche pour casser la grille */
  width: 320px;
  border-left: 4px solid var(--text-accent-1); /* Ligne de force technique */
  background: var(--bg-invert);
  color: var(--text-invert);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  animation: none;
}

/* Mobile */
@media (max-width: 992px) {
  .expertise-label {
    top: -30px;
    right: 10px;
    bottom: unset;
    left: unset;
  }
}

/* Desktop */
@media (min-width: 991px) {
  .focus-visual-wrapper {
    margin-bottom: 40px; /* Espace pour la carte qui déborde en bas */
  }
}

.label-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
}

.label-icon {
  width: 20px;
  height: 20px;
  color: var(--text-accent-1);
}

.label-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

.label-title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.label-text {
  font-size: var(--fs-sm);
  color: var(--text-invert);
  line-height: 1.5;
  margin: 0;
}

/* Animation pure CSS (Lévitation) */
@keyframes floatLabel {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* On cache les éléments initialement pour GSAP */
.focus-header,
.focus-intro,
.focus-tracklist li,
.focus-image-container,
.expertise-label {
  opacity: 0;
}

/* Animation de flottaison perpétuelle */
/* L'animation se déclenche uniquement quand la section est prête */
.section--focus.is-ready .expertise-label {
  animation: floatLabel 6s ease-in-out infinite;
}

/* --- SECTION FAQ (ACCORDION) --- */
.faq_section {
  margin-bottom: var(--space-2xl);
}

.faq-container {
  max-width: 800px; /* Plus étroit pour la lisibilité */
  margin: 0 auto;
}

.faq-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem;
}

.faq-intro {
  font-size: var(--fs-body);
  font-weight: 400;
  max-width: 70ch;
  margin: 0 auto;
  color: var(--text-main);
}

.faq-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Style de l'item fermé */
.faq-item {
  background: var(--bg-invert);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  interpolate-size: allow-keywords;
  transition:
    height 1s ease-out,
    background-color 0.3s ease;
  will-change: transform, height;
}

.faq-item {
  cursor: var(--cursor-arrow-white);
}

.faq-item summary,
.faq-item span {
  cursor: var(--cursor-hand-white);
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.1); /* Petit effet premium au survol */
}

/* La question (clickable) */
summary {
  list-style: none; /* Cache la flèche par défaut moche */
  padding: 1.5rem 2rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-invert);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* Hack pour cacher la flèche native sur certains navigateurs */
summary::-webkit-details-marker {
  display: none;
}

/* L'icône flèche perso */
.faq-icon {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* Création d'une croix (+) en CSS pur qui deviendra un (-) */
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--text-accent-1);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.faq-icon::before {
  width: 2px;
  height: 14px;
}
.faq-icon::after {
  width: 14px;
  height: 2px;
}

/* État OUVERT */
details[open] summary {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

details[open] .faq-icon {
  transform: rotate(90deg);
}
details[open] .faq-icon::before {
  opacity: 0;
}

/* La réponse */
.faq-answer p {
  padding: 0 2rem 2rem 2rem;
  margin-top: 1rem;
  color: var(--text-invert);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  animation: slideDown 1s ease-out;
}

.faq-answer strong {
  color: var(--text-accent-1);
  font-weight: 500;
}

/* Petite animation d'ouverture douce */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-title,
.faq-intro,
.faq-item {
  opacity: 0;
}

/* PHILOSOPHY SECTION */
/* --- CONTENEUR PRINCIPAL --- */
.section--philosophy {
  padding-block: var(--space-xl);
}

.philosophy-title,
.philosophy-tag {
  opacity: 0;
}

.philo-interactive-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  max-width: 900px;
  margin-inline: auto;
  min-height: 420px;
}

/* --- LA LIGNE (ROW) --- */
.philo-row {
  position: relative;
  background-color: var(--c-bg1);
  border-radius: var(--radius-lg); /* On garde tes beaux arrondis */
  padding: var(--space-md) var(--space-lg);
  transition:
    background-color 0.4s ease,
    transform 0.4s var(--ease-out-elastic-100-30),
    opacity 0.4s ease;
}

/* --- ÉTAT INITIAL --- */
.philo-row {
  pointer-events: none;
}

/* --- ÉTAT PRÊT --- */
.section--philosophy.is-ready .philo-row {
  pointer-events: auto;
}

.section--philosophy.is-ready .philo-row:hover {
  background-color: var(
    --c-bg2
  ); /* Inverse subtilement les couleurs au survol */
}

/* --- PARTIE TOUJOURS VISIBLE --- */
.philo-row-visible {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.philo-number {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 450;
  color: var(--c-h3);
  opacity: 0.65;
  transition: opacity 0.3s ease;
}

.section--philosophy.is-ready .philo-row:hover .philo-number {
  opacity: 1;
}

.philo-row-title {
  margin: 0;
  font-size: var(--fs-lg);
  text-transform: uppercase;
  color: var(--c-h3);
  flex-grow: 1;
  transition: color 0.3s ease;
}

.section--philosophy.is-ready .philo-row:hover .philo-row-title,
.section--philosophy.is-ready .philo-row:hover .philo-number {
  color: var(--c-bg1);
}

/* Indicateur (+ qui tourne) */
.philo-indicator {
  width: 12px;
  height: 12px;
  position: relative;
}
.philo-indicator::before,
.philo-indicator::after {
  content: "";
  position: absolute;
  background-color: var(--c-text);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition:
    transform 0.6s var(--ease-out-elastic-100-30),
    background-color 0.3s;
}
.philo-indicator::before {
  width: 100%;
  height: 2px;
}
.philo-indicator::after {
  height: 100%;
  width: 2px;
}

.section--philosophy.is-ready .philo-row:hover .philo-indicator::after {
  transform: translate(-50%, -50%) rotate(90deg); /* Transforme le + en - */
}
.section--philosophy.is-ready .philo-row:hover .philo-indicator::before,
.section--philosophy.is-ready .philo-row:hover .philo-indicator::after {
  background-color: var(--c-bg1);
}

/* --- L'ACCORDÉON MAGIQUE --- */
.philo-row-hidden {
  display: grid;
  grid-template-rows: 0fr; /* Fermé par défaut */
  transition: grid-template-rows 0.6s var(--ease-out-elastic-100-30);
}

.philo-row-content {
  overflow: hidden; /* Empêche le texte de déborder pendant l'animation */
  padding-left: calc(
    var(--space-md) + 25px
  ); /* Aligné avec le titre (selon taille de typo) */
}

.philo-row-content p {
  margin: 0;
  padding-top: var(--space-sm);
  color: var(--c-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.3s ease,
    transform 0.4s ease;
}

.section--philosophy.is-ready .philo-row:hover .philo-row-content p {
  color: var(--c-bg1);
}

/* Ouverture au survol */
.section--philosophy.is-ready .philo-row:hover .philo-row-hidden {
  grid-template-rows: 1fr;
}

.section--philosophy.is-ready .philo-row:hover .philo-row-content p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s; /* Petit délai élégant */
}

/* --- LE BADGE QUI POP (Ton style signature) --- */
.philo-row-badge {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 60px;
  height: 60px;
  background: var(--c-bg1);
  border: 1px solid var(--text-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  opacity: 0;
  scale: 0;
  rotate: -45deg;
  transition:
    scale 0.4s ease-out,
    rotate 0.4s var(--ease-out-elastic-100-30),
    opacity 0.2s ease-out;
}

.philo-row-badge .philo-icon {
  width: 30px;
  height: 30px;
  color: var(--c-h2);
}

.section--philosophy.is-ready .philo-row:hover .philo-row-badge {
  opacity: 1;
  scale: 1;
  rotate: 10deg; /* Fait coucou sur le côté */
  transition:
    scale 0.8s var(--ease-out-elastic-100-30) 0.1s,
    rotate 0.8s var(--ease-out-elastic-100-30) 0.1s,
    opacity 0.3s ease-out 0.1s;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
  .philo-interactive-list {
    min-height: auto; /* On rend le contrôle au contenu sur mobile */
  }
  /* Sur mobile le hover est capricieux, on force l'ouverture ou on laisse cliquable */
  .philo-row-hidden {
    grid-template-rows: 1fr; /* Toujours ouvert sur petit écran */
  }
  .philo-row-content p {
    opacity: 1;
    transform: none;
  }
  .philo-indicator {
    display: none;
  }
  .philo-row-badge {
    top: -15px;
    left: 10px;
    scale: 0.8;
  }
}

/* --- SERVICES - PRICING --- */
/* --- SECTION ET GRILLE --- */
.pricing-section {
  padding-block: var(--space-xl);
  overflow: visible;
}

.pricing-header {
  margin-bottom: var(--space-xl);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
  align-items: end;
}

/* --- LE TICKET (Base) --- */
.price-ticket {
  position: relative;
  background: var(--c-bg1);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  min-height: 450px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  will-change: transform, box-shadow;
}

/* --- LE WATERMARK (Le gros chiffre en fond) --- */
.ticket-watermark {
  position: absolute;
  bottom: -32px;
  right: -10px;
  font-family: var(--font-primary);
  font-size: 15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-bg2);
  opacity: 0.1;
  z-index: -1;
  user-select: none;
  transition:
    transform 0.6s var(--ease-out-elastic-100-30),
    opacity 0.4s;
}

/* --- CONTENU DU TICKET --- */
.ticket-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  z-index: 2;
}

.ticket-top {
  margin-bottom: var(--space-lg);
}

.ticket-type {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-span);
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 2px;
}

.ticket-amount {
  font-size: var(--fs-xl);
  color: var(--c-h2);
  margin-bottom: var(--space-2xs);
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.ticket-amount strong {
  font-weight: 650;
  color: var(--c-strong);
}
.ticket-unit,
.ticket-from {
  font-size: var(--fs-sm);
  color: var(--c-span);
  font-weight: 500;
}

.ticket-desc {
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: 1.5;
  margin: 0;
}

.ticket-middle {
  flex-grow: 1;
}

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

.ticket-list li {
  padding-block: 0.8rem;
  border-top: 1px dashed var(--c-bg2);
  font-size: var(--fs-body);
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.ticket-list li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c-span);
}

/* --- ACTION AU SURVOL (Le bouton qui apparait) --- */
.ticket-action {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid transparent;
  display: flex;
  justify-content: flex-end;
  /* Caché par défaut */
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  cursor: var(--cursor-arrow);
}

.ticket-link {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  color: var(--c-span);
  font-weight: 500;
}

.ticket-link span {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* --- FEATURED TICKET (Le Best Seller) --- */
.ticket-featured {
  min-height: 500px; /* Plus grand pour dominer visuellement */
  /* border: 2px solid var(--c-strong); */
}

.ticket-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--c-strong);
  color: var(--c-bg2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  font-weight: 550;
  padding: 8px 16px;
  border-bottom-left-radius: var(--radius-md);
}

/* --- LE RUBAN (Note finale) --- */
.pricing-ribbon {
  margin-top: var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--text-accent-1);
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: translateY(20px);
}

.ribbon-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.ribbon-label {
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--text-accent-1);
}
.ribbon-list {
  font-family: var(--font-mono);
  display: flex;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--text-main);
  font-size: var(--fs-sm);
  align-items: center;
  line-height: 0.8;
  transform: translateY(1px);
}
.ribbon-inner p {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  flex-basis: 100%; /* Force le passage à la ligne en prenant toute la largeur */
  text-align: center; /* Centre le texte sur sa nouvelle ligne */
  margin: 0; /* Retire les marges par défaut pour un rendu propre */
  color: var(--text-main);
}
.ribbon-link {
  color: var(--text-accent-1);
  font-weight: 500;
}
.ribbon-link:hover {
  color: var(--text-accent-2);
}

@media (max-width: 768px) {
  .pricing-ribbon {
    border-radius: var(--radius-md);
    padding: var(--space-md);
  }
  .ribbon-inner {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* =========================================
   LA MAGIE DE L'ÉTAT "READY" ET DES HOVERS
   ========================================= */

/* Une fois que GSAP a fini, on donne la main au CSS */
.pricing-section.is-ready .price-ticket {
  opacity: 1;
  pointer-events: auto; /* Active la souris */
  /* On remet SEULEMENT les transitions de hover, on ne touche pas à l'opacité */
  transition:
    transform 0.6s var(--ease-out-elastic-100-30),
    box-shadow 0.4s ease;
}

.pricing-section.is-ready .price-ticket:hover {
  transform: translateY(-12px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.1); /* Ombre douce et large */
}

/* Animation du watermark au survol */
.pricing-section.is-ready .price-ticket:hover .ticket-watermark {
  transform: scale(1.1) rotate(-5deg);
  opacity: 0.15;
}

/* Apparition du bouton d'action */
.pricing-section.is-ready .price-ticket:hover .ticket-action {
  opacity: 1;
  transform: translateY(0);
  border-top-color: var(--c-border);
}

/* couleur du lien survolé */
.pricing-section.is-ready .ticket-link:hover {
  color: var(--c-bg2) !important;
  font-weight: 600;
}

.pricing-section.is-ready .ticket-link:hover span {
  transform: translateX(5px);
}

/* STATS SECTION */
.stats-section {
  padding: var(--space-xl) 0;
}

.stats__header {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: var(--space-sm);
}

.stats-title {
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-main);
}

.stats-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.stat-row {
  position: relative;
  width: 100%;
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: baseline; /* Aligne le texte sur la ligne de base */
  padding: 2rem 0; /* Espace vertical généreux */
  min-height: 1em;
}

/* Le Chiffre */
.stat-number-wrapper {
  display: flex;
  align-items: baseline;
  line-height: 1;
}

.stat-number {
  font-family: var(--font-primary);
  font-size: var(--fs-xl);
  font-weight: 300; /* Light pour le côté luxe, ou 800 pour l'impact */
  line-height: 1;
  color: var(--text-main); /* Blanc pur */
  font-variant-numeric: tabular-nums; /* INDISPENSABLE pour éviter le tremblement */
}

.stat-suffix {
  font-family: var(--font-primary);
  font-size: var(--fs-xl);
  font-weight: 300;
  color: var(--text-accent-1);
}

/* Le Libellé */
.stat-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: var(--fs-body);
  font-weight: 450;
  color: var(--text-main);
  text-align: right;
  max-width: 75%;
}

/* La Ligne de séparation animée */
.stat-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--text-accent-1);
  transform: scaleX(0); /* Cachée au départ */
  transform-origin: left; /* L'animation partira de la gauche */
}

@media (max-width: 768px) {
  .stat-content {
    grid-template-columns: 1fr; /* On empile sur mobile */
    gap: 0.5rem;
    padding: 1.5rem 0;
  }

  .stat-number {
    font-size: 3.5rem; /* On réduit un peu la taille */
  }
}

.stats-tag,
.stats-title,
.stat-row,
.stats-actions {
  opacity: 0;
}

/* --- SECTION VISION (Éditoriale) --- */
.section--vision {
  padding-block: 8rem;
  background: var(--bg-main); /* À adapter selon ton fond */
  overflow: hidden;
}

.vision__header {
  text-align: center;
  margin-bottom: 6rem;
}

.vision__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.vision__title .text-italic {
  font-style: italic;
  font-weight: 300;
  color: var(--text-accent-1);
}

/* --- LA GRILLE DES CARTES --- */
.vision__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  margin-bottom: 8rem;
  max-width: var(--container-inner);
  margin-inline: auto;
}

.vision__card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* La ligne architecturale en haut de chaque carte */
.vision__card-line {
  width: 100%;
  height: 1px;
  background-color: var(--text-main);
  opacity: 0.2;
  margin-bottom: 2rem;
  transform-origin: left; /* Pour l'animation GSAP */
}

.vision__card-header {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.vision__number {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--text-accent-1);
  font-weight: 700;
}

.vision__card-title {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.vision__card-text {
  font-size: var(--fs-sm);
  color: var(--text-main);
  opacity: 1;
  line-height: 1.6;
  margin: 0;
}

/* --- LA CITATION (Mode Manifeste) --- */
.vision__quote-wrapper {
  max-width: 900px;
  margin: 0 auto 6rem auto;
  text-align: center;
}

.vision__quote {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin: 0;
}

/* --- ACTIONS (Hiérarchie visuelle) --- */
.vision__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.vision__actions .arrow-link {
  opacity: 1;
}

.vision__links {
  display: flex;
  gap: 3rem;
}

/* Style élégant pour les liens secondaires */
.link-elegant {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-main);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease;
  position: relative;
}

.link-elegant::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-elegant:hover {
  color: var(--text-accent-1);
}

.link-elegant:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.link-elegant .icon-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
  fill: currentColor;
}

.link-elegant:hover .icon-arrow {
  transform: translateX(4px);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 992px) {
  .vision__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .vision__links {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
}

/* --- SECTION PROCESS --- */
.section--process {
  padding-block: var(--space-xl);
  background: var(--bg-main);
}

.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 4rem;
  position: relative;
}

@media (min-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr); /* 2x2 sur tablette/desktop */
  }
}

@media (min-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur grand écran */
  }
}

.step-item {
  position: relative;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.step-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
  border-color: var(--text-accent-1);
}

.step-number {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-accent-1);
  opacity: 0.2;
  margin-bottom: 1.5rem;
  transition: opacity 0.3s ease;
}

.step-item:hover .step-number {
  opacity: 1;
}

.step-content h3 {
  font-size: var(--fs-md);
  color: var(--color-text-lightest);
  margin-bottom: 1rem;
  font-weight: 700;
}

.step-content p {
  font-size: var(--fs-sm);
  color: var(--color-text-medium-light);
  line-height: 1.6;
}

.vision-title,
.vision-card,
.vision-actions,
.vision_section {
  opacity: 0; /* Préparation animation d'entrée */
}

/* STYLES DU RUBAN ANIMÉ */
.animated-ribbon-wrapper {
  background-color: var(--c-bg1);
  width: 112vw;
  margin-left: -6vw;
  height: var(--ribbon-height);
  overflow: hidden; /* Cache ce qui dépasse */
  position: relative;
  display: flex; /* Utile pour le centrage vertical si besoin */
  align-items: center; /* Centre le contenu verticalement */
  transform-origin: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.animated-ribbon-wrapper_portfolio {
  background-color: var(--c-bg1);
  width: 100vw;
  height: var(--ribbon-height);
  overflow: hidden; /* Cache ce qui dépasse */
  position: relative;
  display: flex; /* Utile pour le centrage vertical si besoin */
  align-items: center; /* Centre le contenu verticalement */
  transform-origin: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.animated-ribbon-content {
  display: flex; /* Met les items en ligne */
  white-space: nowrap; /* Empêche les items de passer à la ligne */
  width: max-content;
  /* animation: scrollRibbon var(--ribbon-speed) linear infinite;  Animation de défilement en CSS */
}

.ribbon-item {
  display: flex;
  align-items: center; /* Centre le logo et le texte verticalement */
  gap: 15px; /* Espace entre le logo et le texte */
  padding-right: 15px; /* Espace entre les blocs "item" */
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--c-text);
  transition: color 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0; /* Empêche les items de rétrécir */
}

.animated-ribbon-wrapper,
.ribbon-item {
  opacity: 0;
  transform: translateY(100px);
  visibility: hidden;
  will-change: transform, opacity;
}

.ribbon-item:hover,
.ribbon-item:hover svg {
  color: var(--c-hover);
}

.ribbon-logo {
  width: 40px; /* Taille de ton logo */
  height: 40px;
  vertical-align: middle; /* Aligne le logo avec le texte */
  fill: currentColor;
  transition: fill 0.3s ease;
}

/* Nouvelle section HIGHLIGHT */
.section-highlight {
  align-items: center;
  justify-content: center;
  background-color: var(--c-bg1);
  display: flex;
  height: min-content;
  overflow: visible;
  position: relative;
  width: 100%;
}

.section-highlight {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  will-change: clip-path, transform;
}

.section-highlight_inner {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  align-items: start;
  height: min-content;
  overflow: hidden;
  position: relative;
  padding-inline: var(--space-xl);
}

.section-highlight_inner {
  transform: translateX(50px);
  opacity: 0;
  will-change: transform, opacity;
}

.section-highlight_column_left,
.section-highlight_column_right {
  width: 100%;
  overflow-wrap: anywhere;
  flex-direction: column;
  display: flex;
}

.section-highlight_title,
.section-highlight_text {
  font-family: var(--font-primary);
  font-size: var(--fs-xl);
  font-style: normal;
  font-weight: 650;
  color: var(--c-h3);
  text-align: start;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.48px;
  line-height: 0.92;
  word-break: normal;
  hyphens: none;
  overflow: hidden;
}

.section-highlight_title span,
.section-highlight_text span {
  font-style: normal;
  white-space: nowrap;
  color: var(--c-span);
}

.section-highlight_column_right .section-highlight_text:last-child {
  margin-bottom: 0;
}

/* --- RESPONSIVE --- */
/* Sur petits écrans, on passe en 1 seule colonne */
@media (max-width: 1024px) {
  .section-highlight_inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .section-highlight_title,
  .section-highlight_text {
    font-size: var(--fs-xl);
  }
}

/* Nouvelle page about-me */
/* .section-about
.section-about__inner */
.section-about__header {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}
.section-about__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-accent-1);
  margin-bottom: var(--space-xs);
  font-weight: 700;
  display: block;
}

.section-about__title {
  font-family: var(--font-primary);
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-main);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-lg);
}

.section-about__subtitle {
  font-family: var(--font-primary);
  font-size: var(--fs-xl);
  font-weight: 650;
  text-transform: uppercase;
  color: var(--text-main);
  line-height: var(--lh-tight);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.section-about__intro {
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  font-weight: 550;
  text-wrap: pretty;
  line-height: 1;
  max-width: 65ch;
  margin-bottom: var(--space-lg);
}

.section-about__intro span {
  font-weight: 600;
  color: var(--text-accent-1);
}

.phonetic {
  font-family: var(--font-mono);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-lg);
  text-transform: none;
}

/* Variante section about me */
/* Styles pour la section title-and-text-2-cols */
.about-2-cols-container {
  width: fit-content;
  max-width: 1400px; /* À ajuster selon votre design */
  margin: 0 auto;
  display: grid;
  grid-template-columns: max-content minmax(0, 650px);
  column-gap: 3rem;
  row-gap: 2rem; /* Espace entre les items (lignes) */
  align-items: start;
}

.about-2-cols-row {
  display: contents;
}

.about-2-cols-title {
  grid-column: 1;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
  white-space: nowrap; /* Empêche le titre de revenir à la ligne pour forcer la largeur max */
  margin: 0;
  text-align: right; /* Alignement à droite */
  /* text-transform: uppercase; Optionnel : pour le style */
}

.about-2-cols-text-body {
  grid-column: 2;
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: left; /* Alignement à gauche (pas justifié) */
}

.about-2-cols-text-body p {
  margin-bottom: 1.5rem;
}

.about-2-cols-text-body span {
  font-weight: 450;
  color: var(--text-accent-1);
}

.about-2-cols-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-lg);
}
.about-2-cols-logo svg {
  height: 100px;
  width: auto;
}

/* Responsivité : Passage sur une seule colonne pour mobile */
@media (max-width: 768px) {
  .about-2-cols-container {
    grid-template-columns: 1fr; /* Passage en une seule colonne */
  }
  .about-2-cols-row {
    display: flex; /* On repasse en flex pour empiler titre et texte */
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-inline: 2rem;
  }

  .about-2-cols-title {
    text-align: center;
    white-space: normal;
    margin-bottom: var(--space-sm);
  }

  .about-2-cols-text-body {
    text-align: center;
  }
}

/* Empêche le flash de contenu avant l'animation si GSAP est chargé */
.js .about-intro .section-tag,
.js .about-intro .section-title,
.js .about-intro .about-2-cols-title,
.js .about-intro .about-2-cols-text-body,
.js .about-intro .about-2-cols-logo {
  opacity: 0;
}

/* Conteneur pour lien avec flèche */
.arrow-link-container {
  /* opacity: 1; */
  /* color: var(--color-arrow-link); */
  gap: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  /* margin-bottom: var(--space-xs); */
  margin-top: var(--space-lg);
  /* flex: none;
  width: auto;
  height: auto;
  position: relative;
  line-height: 1; */
}

.arrow-link_center {
  justify-content: center;
}

.arrow-link {
  display: inline-flex;
  flex-flow: row;
  place-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  /* width: min-content;
  height: min-content; */
  padding: 0;
  text-decoration: none;
  position: relative;
  overflow: visible;
}

.arrow-link {
  opacity: 0;
}

.arrow-link_text {
  font-family: var(--font-primary), serif;
  font-size: var(--fs-lg);
  font-style: normal;
  font-weight: 550;
  letter-spacing: 0.24px;
  line-height: 0.8;
  text-align: start;
  text-decoration: none;
  text-transform: uppercase;
  user-select: none;
  margin: 0;
  justify-content: center;
  color: var(--ar-text);
  transform: none;
  will-change: auto;
  user-select: none;
  flex: none;
  width: auto;
  height: auto;
  position: relative;
  will-change: color;
  transition: color var(--arrow-link-anim);
}

/* Flèche pour les liens */
.arrow {
  aspect-ratio: 1;
  height: 24px;
  flex: none;
  width: 24px;
  position: relative;
  overflow: visible;
  display: block;
}
.arrow-container {
  transform: none;
  transform-origin: 50% 50% 0px;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  left: 4px;
  overflow: visible;
}

.arrow-part {
  background-color: var(--ar-text);
  position: absolute;
  will-change: transform, background-color;
  transition:
    background-color var(--arrow-link-anim),
    transform var(--arrow-link-anim);
  transform-origin: 50% 50% 0px;
}
.arrow-top-part {
  width: 16px;
  height: 4px;
  top: 0;
  left: 0;
  transform: none;
}
.arrow-right-part {
  transform: rotate(90deg);
  width: 16px;
  height: 4px;
  top: 6px;
  right: -6px;
}
.arrow-body-part {
  transform: rotate(135deg);
  width: 17px;
  height: 4px;
  top: 6px;
  left: -1px;
}

/* --- ÉTAT SURVOL (HOVER) --- */
.arrow-link:hover .arrow-link_text {
  color: var(--ar-hover);
}
.arrow-link:hover .arrow-part {
  background-color: var(--ar-hover);
}
/* 2. Déplace la flèche en diagonale (Haut + Droite) */
.arrow-link:hover .arrow-container {
  /* translate(X, Y) -> X positif (droite), Y négatif (haut) */
  transform: translate(4px, -4px);
}

/* RESPONSIVE ARROW-LINKS */

/* Nouvelle section carousel témoignages */
/* 1. LA SECTION (Le Masque) */
.testimonials-section {
  width: 100%;
  overflow: hidden;
  padding: 80px 0;
  background-color: var(--bg-main);
}

.testimonials-title {
  text-align: center;
  font-family: var(--font-primary);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  margin-bottom: 40px;
  color: var(--text-main);
  opacity: 0;
}

/* 2. LE TRACK (La bande qui contient tout) */
.testimonials-track {
  display: flex;
  gap: 32px; /* Espace entre les cartes */
  width: max-content; /* Force le conteneur à être aussi large que son contenu */
  padding-right: 32px; /* Marge sur les côtés pour ne pas coller au bord */
  margin: 0;
  list-style: none;

  /* Préparation pour l'animation */
  opacity: 0;
  will-change: transform;
}

/* 3. LA CARTE (L'élément individuel) */
.testimony-card {
  /* Dimensions */
  flex: 0 0 var(--card-width); /* Ne pas rétrécir, ne pas grandir, largeur fixe */
  width: var(--card-width);
  min-height: 320px; /* Hauteur minimale pour l'uniformité */

  /* Apparence */
  background-color: var(--c-bg1, #fff);
  color: var(--c-text);
  border-radius: var(--card-radius);
  padding: var(--card-padding);

  /* Layout interne (Flex Column pour pousser le footer en bas) */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: space-between;
  box-sizing: border-box; /* Important pour que le padding ne casse pas la width */
  will-change: transform;
}

/* --- TYPOGRAPHIE CARTE --- */
.testimony-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimony-title {
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: var(--c-h3);
}

.testimony-desc {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 450;
  line-height: 1.5;
  opacity: 0.9;
  margin: 0;
  color: var(--c-text);
}

/* --- LE SPEAKER (FOOTER) --- */
.testimony-author {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px; /* Espace minimum avec le texte du dessus */
  width: 100%;
}

.author-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.author-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0; /* Empêche l'image de s'écraser */
  border: 2px solid rgba(255, 255, 255, 0.2); /* Petit détail sympa */
}

.author-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.author-name {
  font-size: var(--fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 4px 0;
  color: var(--c-h4);
}

.author-company {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: inherit;
  opacity: 0.8;
  text-transform: uppercase;
  color: var(--c-span);
}

.author-role {
  font-size: var(--fs-xs);
  font-weight: 500;
  opacity: 1;
}

.author-logo {
  flex-shrink: 0;
  width: 80px; /* Largeur max du logo */
  height: 40px; /* Hauteur max du logo */
  display: flex;
  align-items: flex-end; /* Calé bien en bas à droite */
  justify-content: flex-end;
}

.author-logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* La magie : le SVG prend la couleur du texte de la carte */
  fill: var(--c-span);
}

.author-logo svg path {
  fill: var(--c-span);
}

/* Nouvelle section grille 2 colonnes dans "carte" avec photo */
.section--card {
  padding: 80px 20px;
  display: flex;
  justify-content: center;
  max-width: var(--container-inner);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  overflow: visible;
}

/* Le conteneur parent donne la référence pour le positionnement absolu */
.card-stack-wrapper {
  position: relative;
  z-index: 1;
}

.section--card.arrow-link {
  flex-shrink: 1; /* Permet au lien de réduire un peu si besoin */
  min-width: 0;
}

.section--card.arrow-link_text h3 {
  font-size: var(--fs-body);
  white-space: nowrap;
}

.section--card__inner {
  position: relative;
  max-width: var(--container-inner);
  width: 100%;
  background-color: var(--c-bg1);
  border-radius: var(--card-radius);
  padding: var(--inner-padding);
  display: grid;
  /* 1.2fr pour l'image, 1.8fr pour le texte pour un équilibre visuel */
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: stretch;
  overflow: visible;
  z-index: 6;
}

/* Les fonds de couleur (Traînées) */
.card-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: var(--card-radius);
  background-color: var(--c-bg1);
}

.trail-1 {
  z-index: 5;
}
.trail-2 {
  z-index: 4;
}
.trail-3 {
  z-index: 3;
}
.trail-4 {
  z-index: 2;
}
.trail-5 {
  z-index: 1;
}

/* --- LE TAG OPTIONNEL --- */
.card-tag {
  font-family: var(--font-mono);
  line-height: 1;
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 8px 16px;
  background-color: var(--c-bg2);
  color: var(--c-bg1);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  /* On utilise la même logique d'arrondi réduit */
  border-radius: calc(var(--card-radius) / 2.5);
  z-index: 6;
}

/* --- COLONNE IMAGE --- */
.card-image-container {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  overflow: hidden;
  /* Formule magique : Rayon Extérieur - Marge */
  border-radius: calc(var(--card-radius) - (var(--inner-padding) / 2));
  transition: none;
  will-change: transform;
}

.card-img-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease; /* Prêt pour un hover simple ou GSAP */
  pointer-events: none;
}

/* --- COLONNE TEXTE --- */
.card-content-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 32px;
  /* padding-right: 20px; */
}

.card-main-title {
  font-family: var(--font-primary);
  font-size: var(--fs-xl);
  line-height: 0.95;
  margin-bottom: 8px;
  padding-right: var(--space-3xl);
  color: var(--c-h2);
  text-transform: uppercase;
}

.card-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-h3);
  margin: 0;
  margin-bottom: var(--space-sm);
}

.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card-body p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  margin-bottom: 16px;
}

.card-body p strong {
  color: var(--c-strong);
}

/* --- Arrow links --- */
.card-footer {
  display: flex;
  gap: clamp(10px, 2vw, 24px);
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-top: auto;
  align-items: center;
}

/* --- LE GADGET MASCOTTE CACHÉE --- */
.card-mascot {
  position: absolute;
  top: 10px;
  right: 80px;
  width: 80px; /* Ajuste la taille de ton logo ici */
  height: auto;
  z-index: 0; /* Il est tout au fond, derrière la carte et les traînées */

  /* L'animation : un effet "ressort" très satisfaisant */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Point de pivot pour la rotation (en bas à gauche de l'image) */
  transform-origin: bottom left;
  pointer-events: none; /* Pour ne pas gêner le clic sur la carte */
  opacity: 0;
  fill: var(--bg-invert);
}

.card-mascot.is-ok {
  opacity: 1;
}

/* Quand on survole n'importe où sur le conteneur de la carte... */
.card-stack-wrapper:hover .card-mascot {
  /* ...il sort vers le haut, vers la droite, et tourne un peu pour faire "coucou" */
  transform: translate(40px, -90px) rotate(15deg);
}

.section--card__inner,
.card-trail,
.card-image-container,
.card-main-title,
.card-subtitle,
.card-body p,
.card-tag {
  opacity: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
  .section--card__inner {
    /* On donne plus de place au texte (1fr / 2fr) avant de tout basculer */
    grid-template-columns: 1fr 2.5fr;
    gap: 24px;
  }

  .card-main-title {
    font-size: var(--fs-lg); /* On réduit le titre principal plus tôt */
  }

  /* .card-tag {
    top: unset;
    right: unset;
    bottom: 24px;
    left: 24px;
  } */
}

@media (max-width: 860px) {
  .section--card__inner {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .card-image-container {
    min-height: 250px;
    aspect-ratio: 16 / 9;
    max-height: 300px;
  }

  .card-content-container {
    padding: 0 10px 10px 10px;
  }

  /* .card-tag {
    top: 24px;
    right: 24px;
    bottom: unset;
    left: unset;
  } */

  /* .card-stack-wrapper:hover .card-mascot {
    transform: translate(30px, -40px) rotate(10deg);
  } */
}

/* SECTION CURSEUR HOVER REVEAL */
/* la section */
.hero-text-section {
  overflow: visible;
}
/* Le texte */
.hero-text {
  text-align: center;
  font-size: var(--fs-2xl); /* Taille responsive */
  line-height: 1.2;
  max-width: 900px;
  margin: 0 auto;
}

/* Les mots clés */
.word-highlight {
  color: var(--text-accent-1); /* Ta couleur de mise en évidence */
  cursor: none; /* IMPORTANT : on cache le vrai curseur souris au survol */
  position: relative;
  display: inline-block;
  z-index: 1;
  will-change: transform;
}

/* Le conteneur qui suit la souris */
.hover-reveal-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px; /* Taille de ton visuel */
  height: 200px;
  pointer-events: none; /* CRUCIAL : sinon l'image bloque le clic sur le lien dessous */
  z-index: 999;

  /* Centrage du contenu */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Caché par défaut */
  opacity: 0;
  transform: scale(0);
  visibility: hidden;
  transform-origin: top left;
}

.hover-reveal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.1s ease; /* Transition rapide */
  will-change: opacity;
}

/* Nouvelle section NEWS */
.news-section {
  max-width: 1100px;
  margin: 0 auto;
  overflow: visible;
}

.news-section .arrow-link {
  opacity: 1;
}

.news-title {
  text-align: center;
  font-family: var(--font-primary);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  margin-bottom: 40px;
  color: var(--text-main);
}

/* Grille principale */
.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  gap: var(--space-sm);
}

/* Style de base d'une carte */
.news-card {
  background-color: var(--c-bg1);
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr 2fr;
  place-items: start;
  justify-items: start;
  position: relative;
  text-align: left;
  align-items: center;
  padding: var(--space-xs);
  border-radius: var(--radius-lg);
  text-decoration: none;
  rotate: 0deg;
  scale: 1;
  transition:
    1s scale var(--ease-out-elastic-100-30),
    1s rotate var(--ease-out-elastic-100-30);
}

/* Conteneur d'image blanc */
.news-card-image {
  display: block;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--radius-lg) - var(--space-xs));
  overflow-clip-margin: content-box;
  overflow: hidden;
  pointer-events: none;
}

/* l'image à l'intérieur */
.news-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  /* 'cover' remplit tout le cadre et croppe, 'contain' garde l'image entière */
  object-fit: cover;
  pointer-events: none;
}

/* Contenu texte */
.news-card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Espace le haut et le bas */
  height: 100%;
  font-family: var(--font-primary);
  padding: var(--space-2xs) var(--space-sm) 0 var(--space-xs);
  color: var(--c-text);
}

.news-card-top-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs); /* Ajustez l'écart selon vos besoins */
}

.news-card-title {
  margin: 0;
  font-size: var(--fs-md);
  text-transform: uppercase;
  color: var(--c-h3);
}

.news-card p {
  color: var(--c-text);
}

.news-card-category {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--c-span);
  font-weight: 450;
}

.main-link,
.main-link:hover {
  text-decoration: none;
  color: inherit !important;
}

/* On crée une couche invisible par-dessus toute la carte */
.main-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* Le lien couvre tout */
}

/* --- LE BADGE/STICKER APPARAISSANT AU SURVOL --- */
.news-card-badge {
  position: absolute;
  /* Positionnement "à cheval" en haut à gauche. 
     Ajuste ces valeurs selon la taille de tes images */
  top: -45px;
  left: -45px;

  width: 120px; /* Taille du badge */
  height: auto;
  z-index: 5; /* Au-dessus de la carte mais attention au z-index des autres sections */

  /* On désactive les clics sur l'image pour ne pas bloquer le lien en dessous */
  pointer-events: none;

  /* ÉTAT INITIAL (Caché et réduit) */
  opacity: 0;
  scale: 0;
  rotate: -20deg; /* Départ un peu penché pour accentuer l'effet pop */

  /* On réutilise tes variables d'élasticité pour une animation cohérente */
  transition:
    0.4s scale ease-out,
    0.4s rotate var(--ease-out-elastic-100-30),
    0.2s opacity ease-out;
}

/* ÉTAT AU SURVOL (Apparition élastique) */
/* Quand on survole .news-card, on anime l'enfant .news-card-badge */
.news-card:hover .news-card-badge {
  transition:
    scale 0.8s var(--ease-out-elastic-100-30) 0.12s,
    rotate 0.8s var(--ease-out-elastic-100-30) 0.12s,
    opacity 0.3s ease-out 0.12s;
}

/* Responsive : 1 seule colonne sur mobile */
@media (max-width: 1200px) {
  .news-section .section__inner {
    padding-inline: 6rem;
  }
  .news-section .news-card-title {
    font-size: var(--fs-body);
  }
  .news-card-badge {
    width: 100px; /* Taille du badge */
  }
}
@media (max-width: 920px) {
  .news-section .section__inner {
    padding-inline: 15rem;
  }
  .news-grid {
    grid-template-columns: 1fr;
  }
  .news-card {
    height: auto;
  }
}
@media (max-width: 800px) {
  .news-section .section__inner {
    padding-inline: 10rem;
  }
}
@media (max-width: 700px) {
  .news-section .section__inner {
    padding-inline: 8rem;
  }
  .news-section .news-card-title {
    font-size: var(--fs-sm);
  }
}
@media (max-width: 600px) {
  .news-section .section__inner {
    padding-inline: 6rem;
  }
  .news-section .news-card-title {
    font-size: var(--fs-sm);
  }
  .news-card-badge {
    width: 80px; /* Taille du badge */
    top: -30px;
    left: -30px;
  }
}
@media (max-width: 500px) {
  .news-section .section__inner {
    padding-inline: 4rem;
  }
  .news-card p {
    display: none;
  }
  .news-card-category {
    font-size: var(--fs-xs);
    font-weight: 550;
  }
}

/* Préparation GSAP NEWS CARD SECTION */
/* 1. État initial : on cache tout */
.news-title,
.news-card,
.news-section .arrow-link {
  opacity: 0;
}
/* 2. État final : Une fois l'animation finie, on force l'affichage */
/* On utilise .is-ready sur la section pour tout libérer d'un coup */
.news-section.is-ready .news-title,
.news-section.is-ready .news-card,
.news-section.is-ready .arrow-link {
  opacity: 1;
}

.news-card {
  /* On s'assure que le point d'ancrage est au centre pour le pop */
  transform-origin: center center;
  will-change: transform, opacity;
}

.news-section.is-ready .news-card:hover {
  scale: 1.03;
  rotate: 1.3deg;
}

.news-section.is-ready .news-card:hover .news-card-badge {
  opacity: 1;
  scale: 1;
  rotate: -5deg; /* On laisse une petite rotation finale pour le côté organique */
}

/* Section Scrub-based parallax */
.parallax-container {
  position: relative;
  width: 100%;
  height: 220vh; /* durée du voyage */
  min-height: 100vh;
  background-color: var(--bg-main); /* Fond de secours */
  overflow: hidden;
  pointer-events: none;
}

/* --- STYLE DES IMAGES --- */
/* Base pour tous les calques */
[class^="layer-"] {
  position: absolute;
  will-change: transform;
}
/* Positionnement spécifique si tu veux les déplacer verticalement */
.layer-sky {
  z-index: 1;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 120%;
  aspect-ratio: auto;
  display: block;
  filter: blur(5px);
}
.layer-sky img {
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
  aspect-ratio: auto;
  overflow: clip;
}
.layer-island {
  z-index: 2;
  height: auto;
  width: 50vw;
  max-width: 1100px;
  filter: blur(5px);
  aspect-ratio: auto;
  top: 10%;
  left: 5%;
  display: block;
}
.layer-island img {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  display: block;
}
.layer-text {
  z-index: 3;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  width: 85vw;
  max-width: 1400px;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-accent-1);
}
.layer-text svg {
  image-rendering: pixelated;
  width: 100%;
  height: 50vh;
  display: block;
}

.layer-clouds-back {
  z-index: 4;
  filter: blur(5px);
  aspect-ratio: auto;
  height: auto;
  width: 70vw;
  top: 20%;
  right: -5%;
  display: block;
  opacity: 0.5;
}
.layer-clouds-back img {
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: fill;
  aspect-ratio: auto;
  overflow: clip;
}
.layer-character {
  display: block;
  width: 25%;
  max-width: 400px;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
  z-index: 5;
}
.layer-character img {
  display: block;
  width: 100%;
  height: 100%;
  object-position: center center;
  object-fit: cover;
  aspect-ratio: auto;
}
.layer-clouds-front {
  z-index: 6;
  aspect-ratio: auto;
  height: auto;
  width: 110vw;
  bottom: 20%;
  left: -10%;
  display: block;
}
.layer-clouds-front_2 {
  z-index: 6;
  aspect-ratio: auto;
  height: auto;
  width: 80vw;
  bottom: -30%;
  right: -10%;
  display: block;
}
.layer-clouds-front img,
.layer-clouds-front_2 img {
  display: block;
  height: 100%;
  width: 100%;
  object-position: center;
  object-fit: cover;
  aspect-ratio: auto;
  overflow: clip;
}
.layer-plane {
  z-index: 2;
  aspect-ratio: auto;
  height: auto;
  width: 20vw;
  bottom: 35%;
  right: 50%;
  display: block;
  filter: blur(1px);
}
.layer-plane img {
  display: block;
  height: 100%;
  width: 100%;
  object-position: center;
  object-fit: cover;
  aspect-ratio: auto;
  overflow: clip;
}

/* L'overlay qui fait la transition vers la suite */
.parallax-fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(to bottom, transparent, var(--bg-main));
  opacity: 1;
  z-index: 10;
  pointer-events: none;
}

/* --- MEDIA QUERIES --- */
@media (min-width: 1300px) and (max-width: 1599.98px) {
  .layer-island {
    width: 60vw;
    top: 10%;
    left: 5%;
  }
  .layer-text {
    top: 50%;
    width: 70vw;
  }
  .layer-clouds-back {
    width: 70vw;
    top: 20%;
    right: -5%;
  }
  .layer-character {
    width: 50vw;
    top: 50%;
  }
  .layer-clouds-front {
    bottom: 10%;
  }
  .parallax-fade-overlay {
    height: 20%;
  }
}
@media (min-width: 1200px) and (max-width: 1299.98px) {
  .layer-island {
    width: 60vw;
    top: -10%;
    left: 5%;
  }
  .layer-text {
    top: 50%;
    width: 70vw;
  }
  .layer-clouds-back {
    width: 70vw;
    top: 25%;
    right: -5%;
  }
  .layer-character {
    width: 50vw;
    top: 35%;
  }
  .layer-clouds-front {
    bottom: 10%;
  }
  .parallax-container {
    height: 220vh;
  }
  .parallax-fade-overlay {
    height: 20%;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .layer-island {
    width: 60vw;
    top: -10%;
    left: 5%;
  }
  .layer-text {
    top: 50%;
    width: 70vw;
  }
  .layer-clouds-back {
    width: 60vw;
    top: 30%;
    right: -5%;
  }
  .layer-character {
    width: 50vw;
    top: 35%;
  }
  .layer-clouds-front {
    bottom: 5%;
  }
  .parallax-container {
    height: 200vh;
  }
  .parallax-fade-overlay {
    height: 20%;
  }
}
@media (max-width: 809.98px) {
  .layer-island {
    width: 70vw;
    top: -10%;
    left: -5%;
  }
  .layer-text {
    top: 75%;
    width: 70vw;
  }
  .layer-clouds-back {
    width: 70vw;
    top: 60%;
    right: -5%;
  }
  .layer-character {
    width: 40vw;
    top: 60%;
  }
  .layer-clouds-front {
    bottom: 5%;
  }
  .parallax-container {
    height: 180vh;
  }
  .parallax-fade-overlay {
    height: 20%;
  }
}

/* SHOWCASE CARD */
/* Espacement autour de la carte pour qu'elle ne touche pas les bords de l'écran */
.showcase-section {
  /* padding: 2vw 4vw; */
  position: relative;
  display: flex;
  gap: var(--space-xl);
}

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

.showcase-header {
  margin-bottom: 0;
}

/* La carte principale */
.block-showcase-card,
.showcase-card {
  position: relative;
  width: 100%;
  min-height: 70vh; /* Ajuste la hauteur selon tes besoins */
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Flexbox pour pousser le contenu vers le bas */
  display: flex;
  align-items: flex-end;
}
@media (max-width: 750px) {
  .block-showcase-card,
  .showcase-card {
    min-height: 50vh; /* Ajuste la hauteur selon tes besoins */
  }
}

/* --- LES COUCHES DE FOND --- */

.showcase-bg {
  position: absolute;
  inset: 0; /* Équivaut à top: 0, left: 0, right: 0, bottom: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* L'image remplit la carte sans être déformée */
  z-index: 1;
}

.showcase-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
}

.showcase-overlay::before {
  content: "";
  position: absolute;
  inset: 0;

  /* 1. Le dégradé de couleur */
  background: linear-gradient(
    to top,
    var(--bg-grid-item) 0%,
    var(--bg-grid-item) 60%
  );

  /* 2. L'effet de flou */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* 3. Le Masque : C'est lui qui dit où le FLOU doit s'arrêter */
  /* On floute le bas, et on devient transparent vers le haut */
  mask-image: linear-gradient(to top, black 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 60%);
}

/* --- LE CONTENU --- */
.showcase-content {
  position: relative;
  z-index: 3; /* Au-dessus de l'image et du dégradé */
  width: 100%;
  padding: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  color: var(--text-projects);
}

.showcase-text {
  max-width: 65%; /* Empêche le texte de toucher le bouton */
}

.showcase-title {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 var(--space-xs) 0;
}

.showcase-title strong {
  font-weight: 600;
}

.showcase-tags .tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  opacity: 0.8;
  letter-spacing: 0.5px;
  margin-right: var(--space-sm);
}

.showcase-card .arrow-link {
  opacity: 1;
  transform: translateY(0px);
  visibility: visible;
}

@media (max-width: 768px) {
  .showcase-content {
    flex-direction: column; /* On empile les éléments de haut en bas */
    align-items: flex-start; /* On aligne tout à gauche */
    padding: 25px; /* Un peu moins de marges sur mobile */
  }

  .showcase-text {
    max-width: 100%; /* Le texte prend toute la largeur */
    margin-bottom: 20px; /* Espace avant le bouton */
  }

  .showcase-card {
    min-height: 50vh; /* On réduit un peu la hauteur de la carte sur mobile */
  }
}
/* /SHOWCADE CARD */

/* STYLES POUR LA TIMELINE EXPERIENCES */
.timeline-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.timeline-main-title {
  font-size: var(--fs-xl);
  color: var(--text-main);
  font-weight: 600;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.js .timeline-main-title {
  opacity: 0;
}

/* Timeline Base */
.timeline {
  width: 100%;
  box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  cursor: var(--cursor-arrow-white);
}

.timeline-wrapper {
  height: 600px;
  width: 100%;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.timeline-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  visibility: hidden; /* Géré par GSAP autoAlpha */
  opacity: 0;
  z-index: 1;
}

/* Slide active au 1er chargement */
.timeline-slide.is-active {
  visibility: visible;
  opacity: 1;
  z-index: 2;
}

/* Overlay sombre sur l'image */
.timeline-slide::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -115%;
  bottom: -10%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: -230px 0 150px 60vw rgba(0, 0, 0, 0.7);
  border-radius: 100%;
}

.timeline-slide-content {
  position: absolute;
  text-align: center;
  line-height: 1.2;
  width: 80%;
  max-width: 310px;
  right: 50%;
  top: 13%;
  transform: translate(50%, 0);
  font-size: 12px;
  z-index: 2;
}

.timeline-year {
  display: block;
  font-size: var(--fs-md);
  margin-bottom: var(--space-lg);
  color: var(--text-accent-1);
  font-family: var(--font-mono);
  font-weight: 400;
}

.timeline-item-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-md) 0;
  color: var(--color-neutral-200);
}

.timeline-text {
  line-height: 1.5;
  color: var(--color-neutral-300);
}

/* Pagination (Les années sur le côté) */
.timeline-controls {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-around;

  /* Mobile : En haut, horizontalement au centre */
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: row;
  gap: 20px; /* Espace entre flèches et bullets */
  width: 100%;
}

.timeline-pagination {
  /* masqué sur mobile */
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: relative;
  right: auto !important;
  height: auto;

  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  z-index: 10;
}

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

.timeline-pagination-bullet {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--text-accent-1);
  margin: 15px 0;
  position: relative;
  cursor: var(--cursor-hand-white);
  opacity: 0.7;
  transition: opacity 0.3s;
}

.timeline-pagination-bullet.is-active {
  opacity: 1;
  font-weight: 550;
}

/* Boutons Précédent / Suivant */
.timeline-button-next,
.timeline-button-prev {
  position: relative;
  z-index: 10;
  width: 30px !important;
  height: 30px !important;
  transition: transform 0.2s;
  cursor: var(--cursor-hand-white);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  padding: 5px;
  background-color: var(--bg-main);
  border-radius: 50%;
  border: none;
}
.timeline-button-next svg,
.timeline-button-prev svg {
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.2s;
  flex-shrink: 0;
  fill: var(--text-accent-1);
}

.timeline-button-prev svg {
  transform: rotate(90deg) translateY(1px);
}

.timeline-button-next svg {
  transform: rotate(-90deg) translateY(1px);
}

/* --- Bouton CV Spécifique --- */
.cv-button {
  position: absolute;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--text-accent-1);
  border-radius: 50px;
  /* Mobile : Centré en bas */
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 25px;
  font-size: 1.4rem;
  background-color: var(--bg-main);
  color: var(--text-main);
  text-decoration: none;
  white-space: nowrap;
}

.cv-button:hover {
  background-color: var(--text-accent-1);
  color: var(--text-invert);
  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.cv-icon {
  width: 18px;
  height: 18px;
}

.cv-button:hover .cv-icon {
  transform: translateY(2px);
  transition: transform 0.3s ease;
}

/* Responsive Tablet & Desktop */
@media screen and (min-width: 768px) {
  .timeline-controls {
    /* Desktop : À droite, centré verticalement */
    top: 50%;
    right: 10%;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: column; /* Vertical */
    width: auto;
    border: none;
  }

  .timeline-slide::after {
    right: -30%;
    bottom: -8%;
    width: 240px;
    height: 50%;
    box-shadow: -230px 0 150px 50vw rgba(0, 0, 0, 0.7);
  }
  .timeline-slide-content {
    right: calc(10% + 160px);
    top: 50%;
    transform: translateY(-50%);
    width: 310px;
    font-size: 11px;
    text-align: right;
  }
  .timeline-year {
    margin-bottom: 0;
    font-size: var(--fs-body);
  }
  .timeline-item-title {
    font-size: var(--fs-lg);
    margin: 0;
  }
  .timeline-pagination {
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    z-index: 5;
  }
  /* On redonne le clic uniquement aux chiffres (bullets) */
  .timeline-pagination-bullet {
    pointer-events: auto;
    background: none;
    border: none;
  }
  .timeline-pagination-bullet:hover {
    opacity: 1;
  }
  .timeline-pagination::before {
    display: block;
    content: "";
    position: absolute;
    left: -30px;
    top: -50px; /* On l'allonge pour qu'elle passe sous les flèches */
    bottom: -50px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
  }
  /* On place les flèches au-dessus de tout le monde */
  .timeline-button-prev,
  .timeline-button-next {
    z-index: 20;
    pointer-events: auto;
    width: 30px !important;
    height: 30px !important;
    background-color: transparent;
    border: none;
  }
  .timeline-button-prev svg {
    transform: rotate(180deg);
  }
  .timeline-button-prev:hover svg {
    transform: rotate(180deg) translateY(5px);
  }
  .timeline-button-next svg {
    transform: rotate(0deg);
  }
  .timeline-button-next:hover svg {
    transform: rotate(0deg) translateY(5px);
  }

  .cv-button {
    /* Desktop : En bas à gauche */
    left: 15%;
    bottom: 40px;
    transform: none; /* On annule le centrage mobile */
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .timeline-controls {
    right: 15%;
  }

  .timeline-slide::after {
    right: -20%;
    bottom: -12%;
    width: 240px;
    height: 50%;
    box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);
  }
  .timeline-slide-content {
    right: calc(15% + 160px);
  }

  .cv-button {
    left: 15%; /* Plus d'espace sur très grands écrans */
    bottom: 60px;
  }
}

/* /FIN DES STYLES TIMELINE EXPERIENCES */