@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;600&display=swap");

/* ==========================================================================
   1. BASE & TYPOGRAPHY
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  font-size: 1.02rem;
  margin: 0;
  color: #333;
}

h1, h2, h3, .section-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #000;
}

img, video {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   2. QUARTO LAYOUT (CALIBRAGE DYNAMIQUE)
   ========================================================================== */

:root {
  --quarto-body-width: 100% !important;
  --content-max: 90vw;
  --text-max: 850px;
  --sidebar-w: 260px;

  --content-usable: min(90vw, calc(100vw - var(--sidebar-w)));

  /* NOUVEAU: padding latéral de la zone blanche */
  --content-pad: 3vw;
}


/* IMPORTANT : On ne supprime plus la ligne "0px" ici pour la sidebar
   On ajuste les paddings pour qu'ils soient fluides (3% de l'écran) */
.page-columns .content, main.content {
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
  max-width: none !important;

  /* IMPORTANT : on ne force plus une largeur en vw ici */
  width: 100% !important;
}

/* ==========================================================================
   3. SIDEBAR (CALIBRAGE DYNAMIQUE)
   ========================================================================== */

.sidebar, #quarto-sidebar {
  background: #0b0b0b !important;
  width: var(--sidebar-w) !important;
  max-width: 20vw;
  min-width: 240px;

  /* NOUVEAU: la sidebar suit la montée/descente */
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  align-self: start !important;
}

#quarto-sidebar .sidebar-title {
  display: block;
  text-align: center;
  /* On passe de rem fixes à un padding vertical proportionnel */
  padding: 8vh 1rem 5vh 1rem;
  margin: 0;
  font-family: "Playfair Display", serif;
  /* Taille de police légèrement plus fluide */
  font-size: clamp(1.4rem, 1.8vw, 1.85rem);
  font-weight: 600;
  line-height: 1.05;
}

#quarto-sidebar a { color: #e8e8e8 !important; }
#quarto-sidebar a:hover { color: #ffffff !important; }

#quarto-sidebar .sidebar-item-container > a {
  /* On réduit un peu l'espacement entre les liens pour les petits écrans */
  padding: 0.8rem 1.2rem;
  font-family: "Source Sans 3", sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  font-weight: 500;
}

#quarto-sidebar i.bi {
  margin-right: 0.6rem;
  opacity: 0.85;
}

#quarto-sidebar .sidebar-item.active > a, #quarto-sidebar a.active {
  background: rgba(255, 255, 255, 0.22) !important;
  font-weight: 600;
}

/* On garde ton media query pour le mode mobile */
@media (max-width: 900px) {
  .sidebar, #quarto-sidebar {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   LOGO BARRE LATÉRALE (CALIBRAGE DYNAMIQUE)
   ========================================================================== */

/* 1. Le conteneur principal */
.quarto-sidebar-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  /* On passe de 2rem fixe à 4% de la hauteur de l'écran */
  padding: 4vh 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* 2. Le lien invisible */
.quarto-sidebar-header > a,
.sidebar-logo-container,
.sidebar-logo-container a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* 3. L'image du logo */
.sidebar-logo {
  display: block !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  /* Taille fluide : sur ton 17" elle fera 140px, sur 12" elle rétrécira légèrement */
  width: clamp(110px, 8vw, 140px) !important;
  height: clamp(110px, 8vw, 140px) !important;
  object-fit: cover !important;
  background-color: white !important;
  padding: 2px !important;
  border: 3px solid rgba(255, 255, 255, 0.15);
}

/* 4. LE NOM (Adrien Desroziers) */
.sidebar-title,
.sidebar-title a {
  display: block !important;
  font-family: "Playfair Display", serif !important;
  /* Taille de police qui s'adapte très légèrement */
  font-size: clamp(1.5rem, 1.8vw, 1.8rem) !important;
  font-weight: 600 !important;
  color: #ffffff !important;

  /* --- REGLAGE DE L'ESPACE DYNAMIQUE --- */
  /* Au lieu de 50px fixe, on utilise 5% de la hauteur de l'écran (5vh) */
  margin-top: 5vh !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;

  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  line-height: 1.2 !important;
}

/* ==========================================================================
   4. HOME HERO (SOLUTION DYNAMIQUE : LA PHOTO S'ADAPTE)
   ========================================================================== */

.home-hero {
  max-width: var(--content-max);
  margin: 0 auto 1rem auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  /* On utilise 4% de la largeur pour l'espace entre texte et photo */
  gap: 4vw;
  align-items: start;
}

/* 1. LE BLOC TEXTE */
.hero-text {
  transform: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  text-align: left !important;
  display: block !important;
}

/* 2. LE TITRE */
.hero-text h1, h1 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.1 !important;
  margin: 0 !important;
  margin-bottom: 10px !important;
  /* Taille fluide pour laptop : s'adapte entre 2rem et 4rem */
  font-size: clamp(2rem, 4.5vw, 4rem) !important;
}

/* 3. L'EMAIL */
.home-email a {
  display: inline-block !important;
  color: #111 !important;
  text-decoration: none !important;
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
  border-bottom: 1px solid #999;
  transition: all 0.3s ease;
}

.home-email {
  display: block !important;
  width: 100% !important;
  margin-top: 5px;
}

/* 4. LA PHOTO (CALIBRAGE DYNAMIQUE) */
.profile-photo {
  /* On utilise une largeur relative pour le laptop */
  width: 60%;
  max-width: 550px;
  justify-self: start;
  margin-left: -2vw; /* Décalage fluide à gauche */
  margin-right: 0;
  display: flex;
  align-items: center;

  /* AJUSTEMENT : Au lieu de -100px fixes, on utilise -15% de la taille de l'image.
     Sur ton 17", cela fera environ -80 à -100px.
     Sur un 12", cela remontera moins pour ne pas sortir de l'écran. */
  margin-top: -15% !important;
}

/* --- VERSION ORDINATEUR --- */
@media (min-width: 901px) {
  /* On laisse le clamp() gérer la taille au-dessus pour plus de finesse */
  .hero-text h1, h1 {
    font-size: clamp(2.8rem, 4.5vw, 4rem) !important;
  }
}

/* ==========================================================================
   5. NAVIGATION BUTTONS (CALIBRAGE PROPORTIONNEL PC & LAPTOP)
   ========================================================================== */

.home-band {
  width: calc(100% + (2 * var(--content-pad)));
  margin-left: calc(-1 * var(--content-pad));
  margin-right: calc(-1 * var(--content-pad));
  position: relative;

  background: #2f3033;
  padding: 1.6rem 0;
}

.home-buttons {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 2vw;          /* Padding fluide sur les côtés */
  display: flex;
  justify-content: center;

  /* AJUSTEMENT : On remplace 10rem par 8% de la largeur de l'écran (8vw)
     Sur ton 17", 8vw correspond quasiment à tes 10rem. */
  gap: 8vw;
  flex-wrap: nowrap;       /* On force à rester sur une ligne sur PC/Laptop */
}

/* LE STYLE DU BOUTON */
.home-btn {
  background: #ffffff;
  color: #111;

  /* AJUSTEMENT : Au lieu de 10rem fixe, on utilise 8vw (8% de la largeur).
     Le bouton s'étire sur grand écran et se réduit sur petit laptop. */
  padding: 0.6rem 8vw;

  text-decoration: none;
  font-weight: 500;
  border: 1px solid #d0d0d0;
  min-width: 180px;         /* Sécurité pour que le texte ne soit pas serré */
  text-align: center;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  white-space: nowrap;     /* Empêche le texte du bouton de revenir à la ligne */
}

/* 1. QUAND ON PASSE LA SOURIS (Il se soulève) */
.home-btn:hover {
  background: #f8f9fa;
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  border-color: #bbb;
}

/* 2. QUAND ON CLIQUE (Il s'enfonce) */
.home-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  background: #e2e6ea;
  transition: 0.05s;
}

/* ==========================================================================
   6. INTERNAL NAV BAND (CALIBRAGE PROPORTIONNEL)
   ========================================================================== */

.home-navband {
  background: #2f3033;
  padding: 3vh 0;
  margin: 2rem 0;

  /* Full width dans la zone blanche (contenu) */
  width: calc(100% + (2 * var(--content-pad)));
  margin-left: calc(-1 * var(--content-pad));
  margin-right: calc(-1 * var(--content-pad));
  position: relative;

  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  column-gap: 3vw;
}

.home-navlink {
  font-family: "Playfair Display", serif;
  /* TAILLE FLUIDE : Sur ton 17" il fera 1.75rem.
     Sur un 12" il descendra vers 1.4rem pour ne pas déborder. */
  font-size: clamp(1.3rem, 1.6vw, 1.75rem);
  color: #f5f5f5;
  text-decoration: none;
  /* On remplace la marge fixe par un espacement fluide */
  margin: 0 1vw;
  white-space: nowrap; /* Empêche un mot de passer à la ligne */
}

.home-navlink:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ==========================================================================
   7. TEXT CONTENT SECTIONS (CALIBRAGE TAILLE TEXTE)
   ========================================================================== */

.home-text {
  max-width: var(--text-max);
  margin: 0 auto;
  color: #333;
}

.section-title {
  text-align: center;
  margin-top: 8vh;
  margin-bottom: 4vh;
  font-size: clamp(1.8rem, 2.5vw, 2.2rem);
  color: #000;
}

.home-text p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  font-size: 1.05rem; /* Taille standard pour le corps de texte */
  line-height: 1.7;
  margin-bottom: 1.2rem;
  font-weight: 400;
  color: #333;
}

/* --- CONFIGURATION DES LISTES (LANGUAGES, DIPLÔMES, ETC.) --- */

.home-text ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 1rem;
  max-width: 800px;
}

/* On ajoute .home-list-item pour cibler tes blocs de recherche */
.home-text li, .content li, main.content li, .home-list-item {
  position: relative;
  margin-bottom: clamp(0.8rem, 2vh, 1.2rem) !important;
  padding-left: 1.2rem;
  border-left: 2px solid #e0e0e0;
  text-align: left !important;
  transition: all 0.3s ease-out !important;
  font-size: 1.05rem !important;
  line-height: 1.4;
  display: block; /* Nécessaire pour les div comme .home-list-item */
}

@media (min-width: 992px) {
  /* On ajoute le survol sur .home-list-item */
  .home-text li:hover, .content li:hover, main.content li:hover, .home-list-item:hover {
    border-left: 2px solid #000 !important;
    padding-left: 2.2rem !important;
    background-color: rgba(0, 0, 0, 0.01);
  }
}

/* --- TAILLE DU TEXTE EN GRAS (NATIVE, FLUENT, ETC.) --- */
.home-text li strong {
  color: #000;
  /* On réduit ici : passage à 1.1rem au lieu des tailles géantes */
  font-size: 1.15rem !important;
  font-weight: 600;
  display: inline-block;
  margin-right: 5px;
}

/* ==========================================================================
   8. RESPONSIVE MOBILE
   ========================================================================== */

/* J'ajuste à 992px pour couvrir les tablettes qui posent souvent problème sur PC portable */
@media (max-width: 992px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .hero-text h1 {
     /* Taille fluide pour mobile : s'adapte entre 2.5rem et 3.5rem */
     font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
  }
  .profile-photo {
    justify-self: center;
    width: 80%;
    margin: 0 auto !important; /* On centre la photo sur mobile sans décalage */
  }
  .home-buttons {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
}

/* ==========================================================================
   9. ANIMATIONS (CALIBRAGE DU MOUVEMENT)
   ========================================================================== */

/* Animation "Fade In Up" pour le chargement de la page (Haut de page) */
.animate-load {
  opacity: 0;
  animation: fadeInUpLoad 1.2s ease-out forwards;
}

/* On décale légèrement l'apparition de chaque élément pour un effet cascade */
.home-hero.animate-load { animation-delay: 0.1s; }
.home-band.animate-load { animation-delay: 0.4s; }
.home-navband.animate-load { animation-delay: 0.6s; }

@keyframes fadeInUpLoad {
  from {
    opacity: 0;
    /* On remplace 20px par 2vh pour que la montée soit proportionnelle à l'écran */
    transform: translateY(2vh);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation "Scroll Reveal" pour la descente (Bas de page) */
.reveal {
  opacity: 0;
  /* On remplace 50px par 4vh pour éviter les sauts trop grands sur petit laptop */
  transform: translateY(4vh);
  transition: all 1s ease-out; /* Durée de l'apparition */
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   CUSTOM CURSOR (LOGO SOURIS)
   ========================================================================== */

/* 1. On cache la souris Windows/Mac par défaut */
body, a, button, .home-btn, input {
  cursor: none !important;
}

/* Sécurité Mobile : on réactive le toucher normal sur téléphone */
@media (max-width: 900px) {
  body, a, button { cursor: auto !important; }
}

/* 2. Le style de votre souris personnalisée */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;

  /* AJUSTEMENT : Taille fluide pour que le logo ne soit pas géant sur le 12" */
  width: clamp(100px, 10vw, 150px) !important;
  height: clamp(100px, 10vw, 150px) !important;

  /* C'est cette ligne qui fait marcher l'image à tous les coups */
  background-image: url('../img/Logo_souris.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 2147483647 !important;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: block;
  opacity: 0;
}

/* Le curseur custom devient visible dès qu'on est sur desktop */
@media (min-width: 901px) {
  #custom-cursor { opacity: 1 !important; }
}

/* ==========================================================================
   DETAILS PREMIUM (SÉLECTION + LIENS)
   ========================================================================== */

/* 1. SÉLECTION PERSONNALISÉE (Quand on surligne le texte) */
::selection {
  background: #222 !important; /* Fond gris foncé */
  color: #fff !important;      /* Texte blanc */
}
::-moz-selection { /* Pour Firefox */
  background: #222 !important;
  color: #fff !important;
}

/* ==========================================================================
   LIENS ÉLÉGANTS (Partout : Texte + Mail Haut + Mail Bas)
   ========================================================================== */

.home-text a,
.home-email a,
.reveal a:not(.home-btn) {
  color: #111 !important;           /* Couleur quasi noire */
  text-decoration: none !important; /* On enlève le souligné par défaut */
  border-bottom: 1px solid #999;    /* La ligne fine grise */
  transition: all 0.3s ease;        /* Animation fluide */
  padding-bottom: 0px;              /* Petit espace entre texte et ligne */
}

/* AU SURVOL (Souris dessus) */
.home-text a:hover,
.home-email a:hover,
.reveal a:not(.home-btn):hover {
  color: #000 !important;
  border-bottom: 2px solid #000;    /* La ligne devient noire et plus épaisse */
  background-color: #f2f2f2;        /* Le petit fond gris "surligneur" */
}

/* ==========================================================================
   EFFET 3D (DEPTH & SHADOWS)
   ========================================================================== */

/* 1. LA SIDEBAR (Ombre vers la droite pour la détacher du contenu) */
#quarto-sidebar, .sidebar {
  /* L'ombre : Décalage X, Décalage Y, Flou, Couleur (Noir transparent) */
  box-shadow: 4px 0 0px rgba(0, 0, 0, 0.7) !important;

  /* Z-Index élevé pour être sûr qu'elle passe "au-dessus" du reste */
  z-index: 1000 !important;

  /* (Optionnel) Petite transition si jamais la taille change */
  transition: box-shadow 0.3s ease;
}

/* 2. LES BANDES HORIZONTALES (Ombre vers le bas pour flotter) */
.home-band,
.home-navband {
  /* AJUSTEMENT : On utilise 1vh (1% hauteur) pour que l'ombre reste fine sur petit PC */
  box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.7) !important;

  /* On s'assure qu'elles passent au-dessus du fond blanc */
  z-index: 100 !important;

  /* Petite astuce pour que l'ombre ne soit pas coupée sur les côtés */
  position: relative !important;
}

/* ==========================================================================
   MASTER TEMPLATE (LOGIQUE UNIVERSELLE ET CONTACT TOTAL)
   ========================================================================== */

/* 1 & 2. ANIMATIONS (Strictement conservées) */
@keyframes fadeInOnly { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUpCV {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 3. CONTENEUR GLOBAL */
.cv-page-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

/* 4. IMAGE D'EN-TÊTE (Header) - COPIE CONFORME LOGIQUE HOME */
.cv-hero {
  height: clamp(450px, 50vh, 600px);

  /* Full width dans la zone blanche (contenu), calculée après sidebar */
  width: calc(100% + (2 * var(--content-pad))) !important;
  margin-left: calc(-1 * var(--content-pad)) !important;
  margin-right: calc(-1 * var(--content-pad)) !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;

  /* IMPORTANT: plus besoin de compenser la sidebar ici */
  padding-left: 0 !important;
  padding-right: 0 !important;

  margin-top: -5rem !important;
  margin-bottom: 0rem !important;
  border-radius: 0 !important;

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

  background-image: url('../img/Plongeur.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center bottom !important;
  background-repeat: no-repeat;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0;
  animation: fadeInOnly 1.5s ease-out forwards;
  z-index: 10;
}

/* Désactivation du padding-left (centrage) sur mobile/tablette */
@media (max-width: 992px) {
  .cv-hero { padding-left: 0 !important; }
}

/* 5. LE CADRE BLANC (TITRE) - CENTRAGE DANS LA ZONE BLANCHE */
.cv-title-box {
  margin: 0 !important; /* Géré par le parent flexbox */
  border: 4px solid #ffffff;
  padding: 15px clamp(30px, 5vw, 60px);
  color: #ffffff;
  font-family: "Playfair Display", serif;
  /* Taille fluide : s'adapte sans jamais déborder sur 12" */
  font-size: clamp(2rem, 3.8vw, 3.5rem);
  font-weight: 700;
  text-align: center;
  background-color: rgba(0,0,0,0.1);
  backdrop-filter: blur(2px);
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
  opacity: 0;
  animation: fadeInUpCV 1s ease-out forwards;
  animation-delay: 0.3s;
}

/* 6. LA BARRE NOIRE (BOUTON) - ALIGNEMENT PARFAIT */
.cv-download-bar {
  display: block !important;
  width: 90% !important;
  max-width: 1000px; /* Taille maximale sur ton 17" */

  /* --- CENTRAGE RÉEL --- */
  /* "auto" centre le bouton dans la zone de texte blanche de Quarto.
     Il sera donc pile sous ton titre "Curriculum Vitae". */
  margin: 5rem auto 0 auto !important;

  background-color: #222;
  color: #ffffff !important;
  text-align: center;
  padding: 18px 0;
  font-family: "Source Sans 3", sans-serif;
  font-size: 1rem;
  text-decoration: none !important;
  border: none;
  border-radius: 10px !important;
  box-shadow: 0 15px 20px rgba(0,0,0,0.4);

  opacity: 0;
  animation: fadeInUpCV 1s ease-out forwards;
  animation-delay: 0.6s;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 20;
}

.cv-download-bar:hover {
  background-color: #000;
  transform: translateY(-5px);
  box-shadow: 0 20px 30px rgba(0,0,0,0.5);
}

/* ==========================================================================
   7. ZONE DE CONTENU (TEXTE & LISTES ÉPURÉES)
   ========================================================================== */
.cv-signature-area {
  width: 100%;
  max-width: 1000px;

  margin: 0 auto;
  margin-top: 300px !important;  /* Votre réglage "bas" */
  margin-left: 0rem !important;
  margin-right: 0rem;

  text-align: left;
  padding-left: 0px;
}

/* Application du style "Home" à toutes les listes du site */
.cv-signature-area ul {
  list-style: none !important; /* Supprime les puces */
  padding-left: 0 !important;  /* Aligne à gauche */
  margin-top: 1rem;
}

.cv-signature-area li {
  position: relative;
  margin-bottom: 1.5rem !important; /* Espace entre les éléments */
  padding-left: 1.5rem;             /* Espace pour la barre */
  border-left: 2px solid #e0e0e0;   /* La barre grise verticale élégante */
  transition: border-color 0.3s ease;
}

/* Petit effet : la barre devient noire quand on passe la souris */
.cv-signature-area li:hover {
  border-left: 2px solid #000;
}

.cv-signature-area li strong {
  color: #000;
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  display: block; /* Force le titre sur sa propre ligne si besoin */
  margin-bottom: 0.2rem;
}

/* VERSION MOBILE */
@media (max-width: 900px) {
  .cv-hero, .cv-download-bar {
    width: 100vw !important;
    margin-left: -2rem !important;
    background-attachment: scroll;
  }
  .cv-signature-area {
      margin-left: 0 !important;
      padding: 0 20px;
  }
}

/* ==========================================================================
   NOUVEAU BLOC : LARGEUR TYPE "HOME" POUR PAGES INTERNES
   ========================================================================== */

.content-container {
  max-width: 920px !important; /* Même largeur que .home-text  */
  margin: 0 auto !important;   /* Centrage horizontal  */
  padding-top: 100px;          /* Espace sous la barre noire */
  padding-bottom: 100px;
}

/* On force le style des listes de la Home ici  */
.content-container ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.content-container li {
  position: relative;
  margin-bottom: 1.5rem !important;
  padding-left: 1.5rem;
  border-left: 2px solid #e0e0e0; /* La barre grise  */
  transition: border-color 0.3s ease;
}

.content-container li:hover {
  border-left: 2px solid #000; /* Devient noire au survol  */
}

.page-main-content {
  max-width: 920px !important; /* Largeur identique à la Home */
  margin: 0 auto !important;   /* Centre le bloc horizontalement */
  padding-top: 100px;
  padding-bottom: 100px;
}

/* FORCE LA SIDEBAR SUR MOBILE */
@media (max-width: 991.98px) {
  /* 1. On force la sidebar au premier plan absolu */
  #quarto-sidebar {
    z-index: 99999 !important;
    visibility: visible !important;
    pointer-events: all !important; /* Force la détection du toucher */
  }

  /* 2. On s'assure que chaque lien est une grosse cible tactile */
  .sidebar-item, .sidebar-link, .sidebar-item-text {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important; /* Taille minimale recommandée par Apple/Google */
    width: 100% !important;
    pointer-events: all !important;
    z-index: 100000 !important;
  }

  /* 3. On désactive l'interférence du contenu arrière quand le menu est ouvert */
  body.nav-sidebar-expanded {
    overflow: hidden !important; /* Empêche de scroller le site derrière */
  }
}

@media (max-width: 991.98px) {
  /* Sidebar au-dessus de l’overlay Quarto */
  #quarto-sidebar { z-index: 1000000 !important; }

  /* Bouton toggle au-dessus de tout */
  #quarto-sidebar-toggle, .quarto-sidebar-toggle { z-index: 1000001 !important; }
}

/* =========================
   FIX ESTHETIQUE MOBILE (HOME)
   ========================= */
@media (max-width: 900px) {

  /* 1) Titre : éviter débordement */
  .hero-text h1,
  h1 {
    font-size: 2.4rem !important;
    line-height: 1.05 !important;
    text-align: center !important;
    margin-top: 0.5rem !important;
  }

  /* 2) Email : réduire un peu */
  .home-email a {
    font-size: 1.1rem !important;
    word-break: break-word !important;
  }

  /* 3) Photo : éviter qu'elle "mange" le haut */
  .profile-photo {
    margin-top: 0px !important;
    width: 85% !important;
    max-width: 420px !important;
    justify-self: center !important;
    margin-left: 0 !important;
  }

  /* 4) Boutons : supprimer le padding géant sur mobile */
  .home-buttons {
    padding: 0 1rem !important;
    gap: 1rem !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .home-btn {
    padding: 0.9rem 1.2rem !important;  /* remplace le 10rem */
    width: min(92vw, 360px) !important;
    max-width: 92vw !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* 5) Si le logo/curseur est visible en haut et gêne (rare), on le masque sur mobile */
  #custom-cursor { display: none !important; }
}

/* ==========================================================================
   FIX GLOBAL: largeur de contenu "utile" (desktop avec sidebar) + pages internes
   ========================================================================== */

@media (max-width: 991.98px) {
  :root { --content-usable: 100vw; }
}

.home-hero,
.home-buttons,
.home-text,
.page-main-content,
.content-container,
.cv-signature-area {
  max-width: var(--content-usable) !important;
  width: 100% !important;
}

html, body {
  overflow-x: hidden;
}

/* ==========================================================================
   FIX DESKTOP (>= 992px): sidebar fixe + contenu = toute la largeur restante
   ========================================================================== */

@media (min-width: 992px) {

  /* Sidebar fixe à gauche */
  #quarto-sidebar, .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: var(--sidebar-w) !important;
    overflow-y: auto !important;
    z-index: 1000000 !important;
  }

  /* Contenu décalé à droite de la sidebar */
  #quarto-content {
    margin-left: var(--sidebar-w) !important;
    width: calc(100vw - var(--sidebar-w)) !important;
    max-width: none !important;
  }
}


@media (min-width: 992px) {

  /* Force un layout 2 colonnes sans "gap" */
  .page-columns {
    display: flex !important;
    gap: 0 !important;
    column-gap: 0 !important;
  }

  /* Sidebar = colonne gauche fixe */
  #quarto-sidebar, .sidebar {
    flex: 0 0 var(--sidebar-w) !important;
  }

  /* Contenu = colonne droite qui prend le reste */
  #quarto-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Le contenu interne remplit sa colonne */
  main.content, .page-columns .content {
    width: 100% !important;
    box-sizing: border-box;
  }
}

@media (min-width: 992px) {

  /* Sidebar toujours au premier plan */
  #quarto-sidebar, .sidebar {
    z-index: 2147483646 !important;
  }

  #quarto-sidebar-toggle,
  .quarto-sidebar-toggle {
    z-index: 2147483646 !important;
  }
}


/* ==========================================================================
   FIX ROBUSTE: CURSEUR CUSTOM TOUJOURS VISIBLE (Y COMPRIS SUR SIDEBAR)
   ========================================================================== */

#custom-cursor {
  z-index: 2147483647 !important;
  position: fixed !important;

  /* Rendu sur calque séparé */
  will-change: transform, left, top;
  transform: translate3d(-50%, -50%, 0) !important;

  /* Neutralise les effets de composition */
  mix-blend-mode: normal !important;
  filter: none !important;

  /* Toujours visible sur desktop */
  opacity: 1 !important;
}

/* Si la sidebar (ou ses parents) crée un contexte qui "mange" le rendu,
   on neutralise les suspects les plus courants côté sidebar uniquement. */
@media (min-width: 992px) {
  #quarto-sidebar, .sidebar {
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   FIX FINAL: empêcher #quarto-content de créer un stacking context
   (sinon le curseur peut rester "bloqué" derrière la sidebar)
   ========================================================================== */

@media (min-width: 992px) {

  /* 1) Sidebar au-dessus du contenu */
  #quarto-sidebar, .sidebar {
    z-index: 2147483646 !important;
  }

  /* 2) IMPORTANT: le contenu ne doit PAS avoir de z-index
        (sinon il crée un contexte et peut piéger le curseur) */
  #quarto-content,
  main.content,
  .page-columns .content {
    z-index: auto !important;
  }

  /* 3) Curseur au-dessus de tout */
  #custom-cursor {
    z-index: 2147483647 !important;
  }
}