/*
  DIGITALBLUESKYE — GLOBAL STYLESHEET
  Central CSS file for layout, components, pages, themes, and responsive rules.
  Table of contents (line numbers):
  - VARIABLES & THÈMES (line 44)
  - RESET & STYLES DE BASE (line 100)
  - DIVISEUR D'INTRO (line 189)
  - CONTENEUR PRINCIPAL ET SECTIONS (line 216)
  - ANIMATIONS, TRANSITIONS, BOUTONS (line 281)
  - ANIMATIONS AU DÉFILEMENT (line 711)
  - LOADER STYLES (line 784)
  - HEADER (Normal & Compact) (line 828)
  - DROPDOWN MENU (line 1193)
  - SOUS-MENU DÉROULANT (line 1318)
  - TITRES DE SECTION (line 1410)
  - IMAGE FULL-BLEED PAGE ACCUEIL (line 1466)
  - SECTION RADAR DIGITAL (line 1506)
  - SECTION ACTUALITÉS ACCUEIL (line 1534)
  - PAGE EXPLORER (line 1705)
  - ANIMATIONS (line 2034)
  - BLOG - STYLES GÉNÉRAUX (line 2055)
  - BLOG - BANNIÈRE HÉRO (line 2072)
  - BLOG - FILTRES (line 2109)
  - BLOG - CARTES D'ARTICLES (line 2170)
  - CONSENT - DONNEES PERSONNELLES (line 2297)
  - PAGES LEGALES (line 2607)
  - GOUVERNANCE IA (line 2725)
  - BLOG - PAGINATION (line 2919)
  - SECTION ARTICLE DÉTAILLÉ (line 2957)
  - SECTION "À PROPOS" (line 3500)
  - BOUTONS (line 4044)
  - Carousel Inspirations - Styles améliorés (line 4207)
  - PROJETS (Grille, Aperçu, Détail) (line 5198)
  - COMPÉTENCES (Skills) - (line 5912)
  - CONTACT (line 6068)
  - FOOTER (line 6465)
  - UTILITAIRES & EFFETS (line 6742)
  - RESPONSIVE (Adaptation écrans) (line 6755)
  - RESPONSIVE BLOG + ARTICLES (line 7373)
  - SECTION CONFIANCE (TRUST) - TESTIMONIES & PARTNERS (line 7486)
*/
@import url("https://fonts.googleapis.com/css2?family=Gelasio:wght@400;500;600;700&family=Mozilla+Text:wght@200..700&family=Indie+Flower&family=Space+Mono:wght@400;700&display=swap");

/* =========================
   VARIABLES & THÈMES
   ========================= */
:root {
  /* Variables pour le thème sombre (par défaut) */
  --background-color: #1e1f2f; /* Couleur de fond principale */
  --r6MHXQ: #1e1232; /* Stop haut du gradient Canva */
  --Ypt7xQ: #16171e; /* Stop bas du gradient Canva */
  --deep-black: #0b0b10; /* Noir du bas du dégradé */
  --header-bg: linear-gradient(to left, #2b1052 45%, #0b284c);
  --background-gradient: linear-gradient(
    to bottom,
    #0b284c 0%,
    #2b1052 22%,
    var(--r6MHXQ) 45%,
    var(--Ypt7xQ) 80%,
    var(--deep-black) 100%
  ),
  linear-gradient(to left, #2b1052 45%, #0b284c); /* Dégradé global du fond */
  --text-color: #c8c4c4; /* Couleur du texte principale */
  --card-bg: #343654; /* Couleur de fond des cartes/conteneurs */
  --accent-color: #5d5dff; /* Couleur d'accentuation (liens, bordures, etc.) */
  --secondary-bg: #232436; /* Couleur de fond secondaire */
  --border-color: #5d5dff; /* Couleur des bordures */
  --shadow-color: rgb(0 0 0 / 30%); /* Couleur des ombres */
  --input-bg: rgb(
    255
    255
    255 /
    10%
  ); /* Couleur de fond des champs de formulaire */

  --skill-icon-bg: #343654; /* Couleur de fond des icônes de compétence */
  --skill-text-color: #b8c2cc; /* Couleur du texte des compétences */
  --transition-speed: 0.3s; /* Vitesse de transition générale */
  --accent-rgb: 93, 93, 255; /* Valeur RGB de #5d5dff pour les ombres */
  --font-title: "Indie Flower", cursive;
  --font-body: "Mozilla Text", sans-serif;
  --font-ai-assistant: "Gelasio", Georgia, serif;
}

[data-theme="light"] {
  /* Variables pour le thème clair */
  --background-color: #fff;
  --header-bg: var(--background-gradient);
  --background-gradient: #fff;
  --text-color: #5d5dff;
  --card-bg: rgb(255 255 255 / 80%);
  --accent-color: #c822ff; /* Couleur d'accentuation change en rose */
  --secondary-bg: rgb(229 227 255 / 80%);
  --border-color: #5d5dff;
  --shadow-color: rgb(93 93 255 / 15%);
  --input-bg: rgb(0 0 0 / 5%);
  --skill-icon-bg: rgb(255 255 255 / 80%);
  --skill-text-color: #555;
  --accent-rgb: 255, 102, 196; /* Valeur RGB de #ff66c4 pour les ombres en mode clair */
}

/* =========================
   RESET & STYLES DE BASE
   ========================= */

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

body {
  background-color: transparent !important;
  color: var(--text-color);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "ROND" 0;
  line-height: 1.6;
  overflow-x: clip;
  padding-top: 90px;
  position: relative;
  text-align: center;
  transition: color var(--transition-speed) ease;
  z-index: 0;
}

html,
body {
  overflow-x: hidden;
}

html.ai-assistant-open,
body.ai-assistant-open {
  overflow: hidden;
}

body.contact-page,
body.project-page {
  padding-top: 60px;
}

body.home-page {
  padding-top: 0;
}

body.inspirations-page {
  padding-top: 0;
}

body.inspirations-page::after {
  background: rgb(6 12 26 / 42%);
}

body::before,
body::after {
  content: "";
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

body::before {
  opacity: 0.1;
  transition: opacity var(--transition-speed) ease;
  z-index: -1;
}

body::after {
  background: var(--background-gradient);
  transition: background var(--transition-speed) ease;
  z-index: -2;
}

[data-theme="light"] body::before {
  opacity: 0;
}

[data-theme="light"] body::after {
  background: #fff;
}

h1 {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

h2 {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.main-page-title {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}

p,
li,
article {
  font-family: var(--font-body);
  font-weight: 400;
}

body :where(
  p,
  li,
  article,
  a,
  button,
  input,
  textarea,
  select,
  label,
  td,
  th,
  figcaption,
  blockquote,
  strong,
  b,
  .btn-view-more,
  .ai-assistant-message,
  .ai-assistant-message *
) {
  font-weight: 400 !important;
}

.visually-hidden,
.seo-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.page-intro {
  margin: 0 auto 36px;
  max-width: 980px;
  padding: 0 20px;
  text-align: center;
}

.page-intro-kicker {
  color: #8ea7ff;
  font-family: "Space Mono", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.page-intro-title {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-family: var(--font-title);
  font-size: clamp(2.1rem, 4.8vw, 3.6rem);
  line-height: 1.14;
  margin: 0 0 14px;
  padding: 0.12em 0.08em 0.18em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-intro-lead {
  color: var(--text-color);
  font-size: 1.3rem;
  line-height: 1.75;
  margin: 0 auto;
  max-width: 800px;
  text-align: justify;
}

.page-intro-card {
  background: linear-gradient(145deg, rgb(16 18 34 / 82%), rgb(22 26 44 / 68%));
  border: 1px solid rgb(93 93 255 / 22%);
  border-image: none;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgb(5 8 20 / 35%);
  display: block;
  height: auto;
  left: auto;
  margin: 24px auto 36px;
  max-width: 920px;
  overflow: visible;
  padding: 28px 30px;
  position: relative;
  text-align: center;
  top: auto;
  width: min(100% - 24px, 920px);
  will-change: auto;
  z-index: 1;
}

.page-intro-card::before {
  background: linear-gradient(90deg, transparent, rgb(200 34 255 / 55%), transparent);
  content: "";
  height: 2px;
  left: 12%;
  position: absolute;
  right: 12%;
  top: 0;
}

.page-intro-card .page-intro-title {
  font-size: clamp(1.65rem, 3.4vw, 2.6rem);
}

.page-intro-card .page-intro-lead {
  max-width: 720px;
  overflow-wrap: break-word;
}

.page-about .page-intro-card {
  max-width: 920px;
  padding: 32px clamp(24px, 4vw, 44px);
  width: min(100% - 32px, 980px);
}

.page-about .page-intro-card .page-intro-lead {
  line-height: 1.68;
  max-width: 820px;
  text-wrap: pretty;
}

.home-page p,
.home-page .section-subtitle,
.home-page .page-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
}

/* =========================
   DIVISEUR D'INTRO
   ========================= */
.intro-divider {
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-color),
    #c822ff,
    transparent
  );
  border-radius: 999px;
  height: 4px;
  margin: 52px auto;
  position: relative;
  width: min(90%, 760px);
}

.home-page main > .intro-text + .intro-divider {
  margin-bottom: 34px;
  margin-top: 42px;
}

.intro-divider::after {
  background: linear-gradient(180deg, rgb(93 93 255 / 20%), transparent);
  content: "";
  filter: blur(12px);
  inset: -12px 0 -20px;
  opacity: 0.6;
  position: absolute;
}

/* =========================
   CONTENEUR PRINCIPAL ET SECTIONS
   ========================= */

/* Conteneur principal du contenu */
main {
  background-color: transparent !important;
  margin: 0;
  overflow: hidden;
  padding: 0;
  transition: padding-left 0.4s ease; /* Transition pour le décalage fluide */
  width: 100%;
}

/* Nouvelle règle : Décaler main lorsque le menu est ouvert */
body.body-menu-open main {
  padding-left: 0;
  pointer-events: none;
  opacity: 0.2;

  /* IMPORTANT: Cette valeur doit correspondre à la largeur de votre .dropdown-menu.
  Si width: 250px pour le menu, utilisez padding-left: 250px; ici */
}

/* Empêcher le scroll de la page quand le menu est ouvert */
body.body-menu-open {
  overflow: hidden;
}

/* Override pour le thème clair */
[data-theme="light"] main {
  background-color: #fff !important;
}

/* Styles de base pour les sections - Mode sombre par défaut */
section {
  background-color: transparent !important;
  margin-bottom: 100px; /* Marges entre les sections */
  margin-top: 0;
  padding: 0; /* Padding pour l'espace interne */
  scroll-margin-top: 100px; /* Ajuste le point d'arrivée lors du défilement */
}

/* Marge spécifique pour l'ancre #about pour compenser le header fixe */
section#about,
#about {
  border-radius: 25%;
  margin-top: 50px;
  scroll-margin-top: 100px;
}

section#projects,
#projects {
  margin-top: 100px;
  scroll-margin-top: 100px;
}

section#skills,
#skills {
  margin-top: 100px;
  scroll-margin-top: 100px;
}

/* ==================================
   ANIMATIONS, TRANSITIONS, BOUTONS
   ================================== */

/* Styles pour le bouton "Voir plus d'articles" */
.view-more-container {
  display: flex;
  justify-content: center;
  margin: 60px 0 80px;
}

.btn-view-more {
  align-items: center;
  background: linear-gradient(135deg, var(--accent-color), #c822ff);
  border: 1px solid rgb(200 34 255 / 35%);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgb(93 93 255 / 25%);
  color: #fff;
  display: inline-flex;
  justify-content: space-around;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  gap: 8px;
  padding: 8px 18px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-view-more:hover {
  box-shadow: 0 16px 30px rgb(93 93 255 / 30%);
  transform: translateY(-2px);
}

.footer-logo-video {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.footer-logo-video #logo-video-dropdown {
  margin: 15px;
}

/* Animation d'apparition séquentielle */
.intro-text {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto 25px;
  max-width: 1200px;
  padding: 0 125px;
  width: 100%;
}

/* Titre principal */
.intro-text h1 {
  margin-bottom: 0;
  text-align: center;
  width: 100%;
}

/* Container photo et texte */
.intro-text .content-wrapper {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 100px;
  justify-content: center;
  margin: 0;
  width: 100%;
}

/* Style de la photo de profil */
.intro-text .profile-photo-container {
  align-items: center;
  border: 1px solid var(--accent-color);
  border-radius: 2%;
  box-shadow: 0 5px 5px rgb(var(--accent-rgb), 0.5);

  /* Centrage du contenu */
  display: flex;
  height: 450px;
  justify-content: center;
  margin: 0;
  max-width: 100vw;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-100px);
  transition: opacity 1s ease, transform 1s ease;

  /* Dimensions fixes qui correspondent à l'image */
  width: 600px; /* Même valeur que la photo */
}

/* Style de la photo */
.intro-text .profile-photo {
  object-fit: cover;
  border-radius: 2%;
  box-shadow: 2 2px 3px rgb(0 0 0 / 15%);
  height: 330px;
  width: 480px;
}

/* Ombre de la photo de profil au survol pour le thème clair */

/* Conteneur de texte */
.intro-text .text-content {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  text-align: center;
}

/* Titres et paragraphes dans la section texte */
.intro-text .text-content p,
.intro-text .text-content h1 {
  background: linear-gradient(90deg,
    #4fd1ff 0%,    /* IA - Cyan */
    #7c5cff 16%,   /* RAG - Violet */
    #30d158 32%,   /* Observabilité - Vert */
    #ffb547 48%,   /* Agents - Orange */
    #ff5f6d 64%,   /* Analytics - Rose */
    #b16cff 100%   /* Gouvernance - Violet */
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
  transition: transform 0.3s;
}

.text-content p {
  color: #c2c2c2;
}

/* Animations pour le titre, le paragraphe de texte et le bouton de la page d'accueil */
.intro-text .animated-title {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 4rem;
  line-height: 1.18;
  margin-bottom: 0;
  margin-top: 40px;
  opacity: 0;
  padding: 0.22em;
  transform: translateX(500px);
  transition: opacity 1.8s ease-out, transform 1.8s ease-out;
}

.intro-text .animated-paragraph {
  font-size: 1.25rem;
  margin-bottom: 25px;
  opacity: 0;
  transform: translateX(-500px);
  transition: opacity 2.4s ease-out, transform 2.4s ease-out;
}

/* Bouton explorer */
.intro-text .btn-explore {
  /* Combinaison des animations */
  animation: fadeInUp 0.8s ease forwards 3.5s, pulseButtonLight 2s infinite 3s,
    textShine 3s linear infinite 3s,
    /* textShine commence à 3s */ floatButton 3s ease-in-out infinite 5.5s; /* floatButton commence après 4s */

  background: linear-gradient(45deg, var(--accent-color), #c822ff);

  /* Effet brillant */
  background-clip: text;
  background-image: linear-gradient(
    135deg,
    var(--accent-color) 0%,
    #fff 30%,
    var(--accent-color) 60%,
    #fff 100%
  );
  background-size: 200% auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgb(var(--accent-rgb), 0.4);
  color: transparent;

  /* Style de base */
  display: inline-block;
  font-size: 1.1rem;

  /* Animation d'apparition */
  margin: 45px;
  opacity: 0;
  padding: 12px 25px;
  text-decoration: none;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.intro-text .btn-explore:hover {
  box-shadow: 0 8px 20px rgb(var(--accent-rgb), 0.6);
  transform: translateY(-3px);
}

/* Bouton de téléchargement CV */
.btn-download-cv {
  align-items: center;

  /* Nouvelles animations en boucle continue */
  animation: floatButton 3s ease-in-out infinite, pulseButton 2s infinite,
    textShine 3s linear infinite;
  background: linear-gradient(45deg, var(--accent-color), #5d5dff);

  /* Effet brillant en mode sombre */
  background-clip: text;
  background-image: linear-gradient(
    135deg,
    var(--secondary-bg) 0%,
    #fff 30%,
    var(--secondary-bg) 60%,
    #fff 100%
  );
  background-size: 200% auto;
  border: none;
  border-radius: 5%;
  box-shadow: 0 5px 15px rgb(var(--accent-rgb), 0.4);
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.2rem;
  justify-content: center;
  margin: 50px 0 0;

  /* Animation d'apparition */
  opacity: 1; /* Commencer visible plutôt que caché */
  padding: 12px 30px;
  text-decoration: none;
  transform: translateY(0); /* Position initiale normale */
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Style spécifique pour le thème clair */
[data-theme="light"] .btn-download-cv {
  /* Choisissez UNE SEULE animation selon votre préférence : */
  animation: floatButton 3s ease-in-out infinite, pulseButtonLight 2s infinite;
  background: linear-gradient(45deg, #c822ff, #ffb3ff);
  background-clip: initial;
  color: white;
}

/* Pour garantir que l'icône est visible en mode clair */
[data-theme="light"] .btn-download-cv i {
  color: white;
}

/* Style pour l'icône dans le bouton */
.btn-download-cv i {
  color: inherit; /* Hérite la couleur du parent */
  display: inline-block;
  margin-right: 15px;
}

/* Effet au survol */
.btn-download-cv:hover {
  box-shadow: 0 8px 20px rgb(var(--accent-rgb), 0.6);
  transform: translateY(-3px);
}

/* Keyframes pour les animations */

/* Animation de flottement intensifiée */
@keyframes floatButton {
  0% {
    opacity: 0.7;
    transform: translateY(0) translateX(0) rotate(0deg);
  }

  25% {
    opacity: 0.85;
    transform: translateY(-15px) translateX(5px) rotate(1deg);
  }

  50% {
    opacity: 1;
    transform: translateY(-20px) translateX(0) rotate(0deg);
  }

  75% {
    opacity: 0.85;
    transform: translateY(-15px) translateX(-5px) rotate(-1deg);
  }

  100% {
    opacity: 0.7;
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-500px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-500px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes textShine {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Animation d'arrivée depuis la gauche pour le texte */
@keyframes SlideInLeft {
  from {
    opacity: 0;
    transform: translateX(
      -500px
    ); /* Ou une autre valeur pour un effet différent */
  }

}

/* Animation d'arrivée depuis la droite pour le texte */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(500px); /* Ou une autre valeur comme 50vw ou 300px */
  }

}

/* Animation de pulsation pour le bouton */
@keyframes pulseButton {
  0% {
    box-shadow: 0 5px 15px rgb(var(--accent-rgb), 0.4);
  }

  50% {
    box-shadow: 0 5px 25px rgb(var(--accent-rgb), 0.7);
  }

  100% {
    box-shadow: 0 5px 15px rgb(var(--accent-rgb), 0.4);
  }
}

/* Applique le dégradé aux textes de l'intro dans le thème clair */
[data-theme="light"] .intro-text .text-content p,
[data-theme="light"] .intro-text .text-content h2 {
  background: linear-gradient(45deg, var(--accent-color), #5d5dff);
}

[data-theme="light"] .intro-text .text-content h1 {
  background: linear-gradient(90deg,
    #4fd1ff 0%,
    #7c5cff 16%,
    #30d158 32%,
    #ffb547 48%,
    #ff5f6d 64%,
    #b16cff 100%
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Style du bouton explorer en thème clair */
[data-theme="light"] .intro-text .btn-explore {
  animation: fadeInUp 0.8s ease forwards 3.5s, pulseButtonLight 2s infinite 3s,
    textShine 3s linear infinite 3s,
    /* textShine commence à 3s */ floatButton 3s ease-in-out infinite 5.5s; /* floatButton commence après 4s */

  /* Fond et style de base */
  background: linear-gradient(
    45deg,
    #c822ff,
    #ffb3ff
  ); /* Nouveau dégradé rose plus vif */

  border: none;
  box-shadow: 0 5px 15px rgb(var(--accent-rgb), 0.3);
  color: white; /* Couleur du texte visible (pas transparent) */
}

/* Effet de brillance pour le texte uniquement si vous le souhaitez */
[data-theme="light"] .intro-text .btn-explore.text-effect {
  /* Si vous voulez l'effet brillant sur le texte, utilisez cette classe séparément */
  background-clip: text;
  background-image: linear-gradient(
    135deg,
    var(--secondary-bg) 0%,
    #333 30%,
    var(--secondary-bg) 60%,
    #333 100%
  );
  background-size: 200% auto;
  color: transparent;
}

/* Effet de survol en thème clair */
[data-theme="light"] .intro-text .btn-explore:hover {
  box-shadow: 0 8px 20px rgb(var(--accent-rgb), 0.5);
  transform: translateY(-3px);
}

/* Keyframe spécifique pour le thème clair */
@keyframes pulseButtonLight {
  0% {
    box-shadow: 0 5px 15px rgb(var(--accent-rgb), 0.3);
  }

  50% {
    box-shadow: 0 5px 25px rgb(var(--accent-rgb), 0.5);
  }

  100% {
    box-shadow: 0 5px 15px rgb(var(--accent-rgb), 0.3);
  }
}

/* =========================
   ANIMATIONS AU DÉFILEMENT
   ========================= */

/* Animations pour le défilement */
.slide-hidden {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, visibility 0s 0.8s; /* Ajout de visibility à la transition */
  visibility: hidden;
}

/* Animation depuis la gauche */
.slide-from-left {
  transform: translateX(-250px); /* Valeur par défaut pour les grands écrans */
}

/* Animation depuis la droite */
.slide-from-right {
  transform: translateX(250px); /* Valeur par défaut */
}

/* Animation depuis le bas */
.slide-from-bottom {
  transform: translateY(150px); /* Valeur par défaut */
}

/* Animation fade-in simple */
.fade-in {
  opacity: 0;
}

/* Classe qui sera ajoutée par JavaScript pour déclencher l'animation */
.slide-visible {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 0s; /* S'assurer que la transition de visibilité s'applique immédiatement */
  visibility: visible;
}

/* Animation en cascade pour les enfants */
.cascade-container > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Délais pour les enfants en cascade */
.cascade-container.slide-visible > *:nth-child(1) {
  transition-delay: 0.1s;
}

.cascade-container.slide-visible > *:nth-child(2) {
  transition-delay: 0.3s;
}

.cascade-container.slide-visible > *:nth-child(3) {
  transition-delay: 0.5s;
}

.cascade-container.slide-visible > *:nth-child(4) {
  transition-delay: 0.7s;
}

.cascade-container.slide-visible > *:nth-child(5) {
  transition-delay: 0.9s;
}

/* Rendre visible les enfants quand le parent est visible */
.cascade-container.slide-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   LOADER STYLES
   ========================= */
#loader-wrapper {
  align-items: center;
  background: var(--background-gradient);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
  visibility: visible;
  width: 100%;
  z-index: 9999;
}

/* Classe pour cacher le loader via JS */
#loader-wrapper.hidden {
  opacity: 0;
  visibility: hidden;
}

#loader-video {
  object-fit: contain;
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: 240px;
  width: 240px;
}

.page-about #loader-video {
  height: 300px;
  width: 300px;
}

/* Assurer que la couleur de fond du loader s'adapte au thème clair */
[data-theme="light"] #loader-wrapper {
  background: var(--background-gradient);
}

/* =========================
   HEADER (Normal & Compact)
   ========================= */
header:not(.page-intro-card):not(.ai-assistant-header),
.compact-header {
  /*background: var(--header-bg);/* Dégradé pour le header */
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(45deg, var(--accent-color), #c822ff) 1;
  box-shadow: 0 4px 15px rgb(0 0 0 / 20%);
  left: 0;
  position: fixed;
  top: 0;
  transition: transform 0.2s ease, background 0.3s ease,
    box-shadow 0.3s ease;
  width: 100%;
  will-change: transform;
  z-index: 2001;
}

/* Classe pour cacher le header */
header:not(.page-intro-card):not(.ai-assistant-header).header-hidden,
.compact-header.header-hidden {
  transform: translateY(-100%);
}

/* Styles spécifiques au header normal */
header:not(.page-intro-card):not(.ai-assistant-header) {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding-bottom: 10px;
  padding-top: 0px;
}

header.site-header {
  align-items: stretch;
  backdrop-filter: blur(14px);
  background: var(--header-bg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 118px;
  justify-content: flex-start;
  left: 0;
  min-height: 0;
  padding: 0;
  right: 0;
  top: 0;
}

.header-social-strip {
  align-items: center;
  background: rgb(6 12 26 / 42%);
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  display: flex;
  flex: 0 0 38px;
  gap: 15px;
  height: 34px;
  justify-content: flex-end;
  margin: 0;
  min-height: 0;
  padding: 0 clamp(20px, 4vw, 66px);
  width: 100%;
}

.header-social-links {
  align-items: center;
  display: flex;
  gap: 15px;
}

.header-social-link {
  align-items: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  padding: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  width: 28px;
}

.header-social-link:hover {
  opacity: 0.82;
  transform: translateY(-2px);
}

.header-admin-link {
   order: 90;
}

.header-social-icon {
  height: 22px;
  width: 22px;
}

.header-social-strip .menu-controls {
  align-items: center;
  align-self: auto;
  display: flex;
  gap: 15px;
  grid-column: auto;
  grid-row: auto;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: auto;
}

.header-social-strip .language-switch {
  align-items: center;
  display: flex;
}

.header-social-strip .lang-button,
.header-social-strip #theme-switch {
  align-items: center;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.header-social-strip .lang-button img {
  display: block;
  height: 22px;
  width: 22px;
}

.header-social-strip #theme-switch svg {
  display: block;
  height: 22px;
  width: 22px;
}

.header-logo {
  align-items: center;
  align-self: flex-start;
  display: flex;
  flex: 1 1 auto;
  height: auto;
  justify-content: flex-start;
  min-height: 0;
  width: 100%;
}

.header-placeholder {
  display: none;
}

[data-theme="light"] .header-social-strip {
  background: rgb(255 255 255);
  border-bottom-color: rgb(93 93 255 / 16%);
}

.inspirations-page header.site-header {
  background: transparent;
}

.inspirations-page header.site-header:not(.nav-scrolled) {
  backdrop-filter: none;
  box-shadow: none;
}

.inspirations-page header.site-header.nav-scrolled,
.inspirations-page.body-menu-open header.site-header {
  backdrop-filter: blur(14px);
  background: var(--header-bg);
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
}

/* Centrage du logo et du hamburger */
.header-logo img {
  border-radius: 50%;
  height: 70px;
  margin: 0 30px 10px 30px;
  width: auto;
}

.header-logo :hover {
  transform: scale(1.1);
}

.header-portfolio-avatar {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  height: 60px;
  justify-content: center;
  position: absolute;
  right: 30px;
  top: calc(var(--site-header-social-height, 34px) + 7px);
  transition: filter 0.25s ease, transform 0.25s ease;
  width: 60px;
  z-index: 1003;
}

.header-portfolio-avatar img {
  border: 1px solid rgb(var(--accent-rgb), 0.35);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgb(var(--accent-rgb), 0.22);
  display: block;
  height: 60px;
  object-fit: contain;
  width: 60px;
}

.header-portfolio-avatar:hover {
  filter: brightness(1.08);
  transform: scale(1.08);
}

/* Ajustements pour le logo vidéo */
#logo-video {
  border: 1px solid var(--border-color);
  border-radius: 50%;
  box-shadow: 0 5px 100px #5d5dff;
  display: block;
  height: 50px;
  margin: 0;
  margin-bottom: 0;
  width: auto;
}

/* Réseaux sociaux dans le header */
header .social-media {
  display: flex;
  gap: 25px; /* Réduit légèrement l'espacement entre les icônes */
  justify-content: flex-end; /* Alignement à droite au lieu de center */
  margin: 0;
  margin-left: auto; /* Pousse les éléments vers la droite */
  margin-right: 0; /* Marge à droite pour l'espacement */
}

/* Taille réduite pour les icônes dans le header */
header .social-media a {
  border-radius: 50%;
  box-shadow: 0 5px 15px var(--shadow-color); /* Ombre légèrement réduite */
  height: 45px; /* Plus petit que les 66px d'origine */
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease;
  width: 45px; /* Plus petit que les 66px d'origine */
}

/* Ajuster la taille des icônes dans le header */
header .social-media img {
  height: 30px; /* Plus petit que les 32px d'origine */
  position: relative;
  transition: filter 0.3s ease;
  width: 30px; /* Plus petit que les 32px d'origine */
  z-index: 1;
}

/* Contrôles (Thème/Langue) dans le menu déroulant */
.menu-controls {
  align-items: center;
  align-self: center;
  display: flex;
  gap: 20px;
  grid-column: 3;
  grid-row: 2;
  justify-content: center;
  margin: 0; /* Ajustement de la marge pour le menu déroulant */
  padding: 0;
  width: 200px;
}

.menu-controls button {
  background: none;
  border: none;
  color: #5d5dff;
  cursor: pointer;
  outline: none;
  padding: 0;
}

.menu-controls :hover {
  color: #c822ff;
  transform: scale(1.1);
}

/* Thème clair pour le menu dropdown */
[data-theme="light"] .dropdown-menu {
  background: var(--background-gradient); /* Fond dégradé pour le menu déroulant */
  color: var(--text-color);
}

[data-theme="light"] .dropdown-nav a {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .dropdown-nav a:hover {
  filter: brightness(0.9);
}

[data-theme="light"] .menu-controls {
  border-top-color: var(--border-color);
}

/* Effet au survol adapté pour le header */
header .social-media a:hover {
  transform: translateY(-5px) scale(1.1); /* Moins prononcé que l'original */
}

/* Styles pour l'icône Hamburger */
.hamburger {
  align-items: center;
  background: linear-gradient(
    45deg,
    var(--accent-color),
    #c822ff
  ); /* Dégradé */

  border: 1px solid var(--accent-color);
  border-radius: 50%;
  bottom: 0;
  box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
  color: #fff; /* Couleur de l’icône (blanc pour contraste) */
  cursor: pointer;
  display: flex;
  font-size: 1.5rem;
  height: 30px;
  justify-content: center;
  left: 50%;
  line-height: normal;
  padding: 0;
  position: absolute;
  transform: translate(-50%, 50%);
  transition: color 0.3s;
  width: 30px;
  z-index: 1002;
}

/* Icône hamburger dans le header */
.hamburger:hover {
  background-color: #c822ff;
  color: white;
  transform: translate(-50%, 50%) scale(1.1);
}

.hamburger svg {
  color: white;
  height: 20px;
  transition: transform 0.3s ease;
  width: 20px;
}

/* Rotation du SVG quand le menu est actif */
.hamburger.active svg {
  transform: rotate(180deg);
}

/* Styles spécifiques au header compact (plus petit) */
.compact-header {
  align-items: center; /* Alignement vertical */
  display: flex; /* Utilisation de flexbox */
  height: 60px; /* Hauteur fixe réduite */
  justify-content: space-between; /* Assure l'espacement entre les groupes gauche/droite */
  padding: 0 20px; /* Padding horizontal */
}

/* Classes pour masquer/afficher le header au scroll */
header:not(.page-intro-card):not(.ai-assistant-header).nav-hidden,
.compact-header.nav-hidden {
  transform: translateY(-100%);
} /* Cache le header en le déplaçant vers le haut */

/* Style optionnel quand le header est visible après scroll */
header:not(.page-intro-card):not(.ai-assistant-header).nav-scrolled,
.compact-header.nav-scrolled {
  background: var(--header-bg);
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

body.body-menu-open header:not(.page-intro-card):not(.ai-assistant-header),
body.body-menu-open .compact-header {
  background: var(--header-bg);
}

/* Styles du header en thème clair */
[data-theme="light"] header:not(.page-intro-card):not(.ai-assistant-header),
[data-theme="light"] .compact-header {
  border-bottom-color: transparent;
  border-image: linear-gradient(45deg, #5d5dff, #c822ff) 1;
  border-radius: 0;
  box-shadow: 0 4px 15px var(--shadow-color);
}

/* Alignement du contenu du Header */
.header-container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
} /* Utilisé dans le header compact pour structurer */
.compact-header #logo-video {
  height: 35px;
} /* Logo légèrement plus petit dans le header compact */

/* Contrôles Header (Langue & Thème) */
.header-left {
  align-items: center;
  display: flex;
  gap: 15px;
} /* Côté gauche du header compact */
.header-right {
  align-items: center;
  display: flex;
  gap: 15px;
} /* Côté droit du header compact */

/* Ordre des éléments dans le header compact (côté gauche) */
.compact-header .header-left .btn-back-home {
  order: 1;
} /* Bouton retour en premier */
.compact-header .header-left .language-switch {
  order: 2;
} /* Sélecteur de langue ensuite */
.compact-header .header-left .page-title {
  color: var(--accent-color);
  font-family: var(--font-title);
  font-size: 1.2rem;
  margin: 0;
  order: 3;
} /* Titre de la page en dernier */
[data-theme="light"] .compact-header .header-left .page-title {
  color: var(--accent-color);
} /* Assure la couleur en thème clair */

/* Sélecteur de langue */
.language-switch {
  align-items: center;
  display: flex;
  gap: 10px;
}

.lang-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease;
} /* Bouton drapeau */
.lang-button:hover {
  transform: scale(1.1);
} /* Effet au survol */
.lang-button img {
  border-radius: 50%;
  height: 30px;
  width: 30px;
} /* Image du drapeau */

/* Positionnement différent des contrôles dans les headers */

/* Les contrôles du header normal sont maintenant dans le dropdown ou placés via .header-right */
.compact-header .language-switch img {
  height: 40px;
  width: 40px;
} /* Taille drapeau dans header compact */

/* Bouton de changement de thème */
.theme-toggle button {
  align-items: center;
  background: none; /* Pas de fond */
  border: none; /* Pas de bordure */
  border-radius: 50%;
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%); /* Ombre légère */
  color: #7b7bff; /* Couleur par défaut pour les icônes SVG */
  cursor: pointer; /* Curseur main */
  display: flex;
  height: 40px;
  justify-content: center;
  outline: none; /* Pas de contour */
  padding: 0; /* Pas de padding */
  transition: color 0.3s ease, transform 0.3s ease; /* Ajustement transition */
  width: 40px;
}

.theme-toggle button svg {
  fill: currentcolor;
  height: 20px;
  transition: fill 0.3s ease;
  width: 20px;
} /* Style de l'icône SVG (lune/soleil), hérite la couleur du bouton */

.theme-toggle button:hover {
  color: #c822ff; /* Couleur rose au survol */
  transform: scale(1.6); /* Léger zoom */
}

.theme-toggle button:focus {
  outline: none; /* Pas de contour au focus */
}

/* Style pour le bouton de thème dans le header normal */
[data-theme="light"] .theme-toggle button {
  background: none; /* Pas de fond */
  border: none; /* Pas de bordure */
  box-shadow: 0 2px 5px var(--shadow-color); /* Ombre légère */
  color: #7b7bff; /* Couleur par défaut pour les icônes SVG */
  cursor: pointer; /* Curseur main */
  outline: none; /* Pas de contour */
  padding: 0; /* Pas de padding */
}

[data-theme="light"] .theme-toggle button:hover {
  background-color: rgb(93 93 255 / 15%); /* Fond léger au survol */
  box-shadow: 0 4px 10px rgb(93 93 255 / 20%); /* Ombre accentuée au survol */
  color: #c822ff; /* Couleur rose au survol */
  transform: scale(1.1); /* Léger zoom */
}

/* Icône hamburger au hover dans le header */
[data-theme="light"] .hamburger {
  color: #c822ff; /* Couleur rose par défaut */
}

[data-theme="light"] .hamburger:hover {
  background-color: #5d5dff;
  color: white;
  transform: translate(-50%, 50%) scale(1.1);
}

/* =========================
   DROPDOWN MENU
   ========================= */

/* Conteneur principal du menu déroulant */
.dropdown-menu {
  background: var(--background-gradient); /* Couleur de fond sombre */
  box-shadow: -2px 0 10px rgb(0 0 0 / 20%); /* Ombre sur le côté gauche */
  color: white;
  height: calc(100vh - var(--site-header-height, 100px)); /* Toute la hauteur de la vue moins le header */
  left: 0;
  overflow: hidden auto; /* Pour le défilement si le contenu du menu est long */
  -webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
  -ms-overflow-style: none; /* IE et Edge */
  padding: 34px 86px 42px 40px; /* Ajustement du padding pour le menu */
  pointer-events: auto; /* ✅ Capture les événements de souris */
  position: fixed;
  right: 0;

  /* Masquer la barre de défilement pour Webkit (Chrome, Safari, Edge) */
  scrollbar-width: none; /* Firefox */
  text-align: left;
  top: var(--site-header-height, 100px); /* Aligné sous le header */
  transform: translateX(-100%); /* Caché à gauche initialement */
  transition: transform 0.8s ease; /* Transition sur la transformation X */
  width: 100vw;
  z-index: 2000;
}

/* Correction pour cacher la barre de défilement WebKit */
.dropdown-menu::-webkit-scrollbar {
  display: none;
}

.dropdown-menu.active {
  transform: translateX(
    0
  ); /* Le menu devient visible en glissant depuis la gauche */
}

.dropdown-close {
  align-items: center;
  background: linear-gradient(135deg, rgb(93 93 255 / 92%), rgb(200 34 255 / 86%));
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  box-shadow: 0 12px 32px rgb(9 7 22 / 35%), 0 0 18px rgb(var(--accent-rgb), 0.28);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  position: absolute;
  right: 42px;
  top: 34px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
  width: 36px;
  z-index: 2;
}

.dropdown-close::before,
.dropdown-close::after {
  background: #fff;
  border-radius: 999px;
  content: "";
  height: 2px;
  position: absolute;
  width: 16px;
}

.dropdown-close::before {
  transform: rotate(45deg);
}

.dropdown-close::after {
  transform: rotate(-45deg);
}

.dropdown-close:hover {
  box-shadow: 0 16px 36px rgb(9 7 22 / 45%), 0 0 24px rgb(var(--accent-rgb), 0.42);
  filter: brightness(1.08);
  transform: translateY(-2px) scale(1.03);
}

/* Liens de navigation dans le menu déroulant */
.dropdown-nav ul {
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  margin-bottom: 0;
  margin-top: 0;
  text-align: left;
}

.dropdown-nav a {
  background-clip: text;

  /* Bordure dégradée uniquement */
  background-image: linear-gradient(rgb(255 255 255 / 0%), white), linear-gradient(45deg, var(--accent-color), #c822ff);
  background-origin: border-box;
  color: var(--accent-color);
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.9rem;
  font-weight: 400;
  padding: 6px 15px 6px 0;
  text-decoration: none;
  -webkit-text-fill-color: transparent;
  transition: color 0.3s, transform 0.2s;
  text-align: left;
}

.dropdown-nav a h2 {
  font-size: inherit;
  margin: 0;
}

.dropdown-nav .nav-link {
  color: var(--accent-color);
  display: block;
  font-family: var(--font-body);
  font-size: 1.2rem;
  padding: 0;
  width: 100%;
}

.dropdown-nav .nav-link-with-submenu {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
}

.dropdown-nav .dropdown-gamma-item {
  margin-top: 10px;
  padding-top: 0;
  position: relative;
}

.dropdown-nav .dropdown-gamma-item::before {
  content: "";
  display: none;
}

.dropdown-nav .dropdown-gamma-link {
  align-items: center;
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  display: inline-flex;
  font-family: var(--font-title);
  font-size: 1.35rem;
  gap: 10px;
  padding: 4px 15px 4px 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.dropdown-gamma-avatar {
  border: 1px solid rgb(var(--accent-rgb), 0.35);
  border-radius: 50%;
  box-shadow: 0 6px 14px rgb(var(--accent-rgb), 0.18);
  flex: 0 0 34px;
  height: 34px;
  object-fit: contain;
  width: 34px;
  -webkit-text-fill-color: initial;
}

.dropdown-nav .dropdown-gamma-link:hover {
  filter: brightness(1.12);
  transform: translateX(6px);
}

/* Liens sociaux dans le dropdown */
.dropdown-menu .social-media {
  align-items: center;
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  justify-content: flex-start;
}

.dropdown-menu .social-media::before {
  background: linear-gradient(90deg, transparent, var(--accent-color), #c822ff, transparent);
  border-radius: 999px;
  content: "";
  flex: 0 0 100%;
  height: 4px;
  margin-bottom: 16px;
  opacity: 0.85;
  width: min(90%, 520px);
}

.dropdown-menu .social-media a {
  align-items: center;
  border-radius: 50%;
  box-shadow: 0 5px 15px var(--shadow-color);
  display: inline-flex;
  height: 52px;
  justify-content: center;
  transition: transform 0.3s ease;
  width: 52px;
}

.dropdown-menu .social-media img {
  height: 32px;
  width: 32px;
}

.dropdown-menu .social-media a:hover {
  transform: translateY(-4px) scale(1.05);
}

/* =========================
   SOUS-MENU DÉROULANT
   ========================= */

/* Conteneur parent (assure le bon contexte) */
.dropdown-submenu {
  position: relative;
}

/* Sous-menu: fermé par défaut, mais dans le flux (pas display:none) */
.dropdown-submenu > .submenu-list {
  /* Neutralise l'ancien display:none !important */
  display: flex !important;
  flex-direction: column;
  gap: 8px;

  /* Liste */
  list-style: none;
  margin: 5px 0 0;

  /* État fermé (accordéon CSS) */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 0 0 20px;
  pointer-events: none;
  transform: translateY(6px);

  /* Transitions */
  transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease,
    visibility 0s linear 0.2s; /* retarde la visibilité pour éviter le flash */
  transition-delay: 0.25s;

  visibility: hidden;
}

/* Ouvrir uniquement au focus/clic clavier/tactile, sans déclenchement au survol. */
.dropdown-submenu.is-open > .submenu-list,
.dropdown-submenu:focus-within > .submenu-list,
/* Fallback: focus direct sur le lien parent */
.dropdown-submenu > a:focus + .submenu-list {
  max-height: 1000px; /* assez grand pour contenir les éléments */
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0.25s;
  visibility: visible;
}

/* Style des éléments du sous-menu */
.dropdown-submenu .submenu-link {
  font-size: 1.2rem;
  opacity: 0.9;
  padding: 0;
}

/* Flèche du sous-menu */
.submenu-chevron {
  margin-left: 5px;
  transition: transform 0.25s ease;
}

/* Rotation de la flèche quand ouvert au focus/clic. */
.dropdown-submenu.is-open .submenu-chevron,
.dropdown-submenu:focus-within .submenu-chevron,
.dropdown-submenu > a:focus .submenu-chevron {
  transform: rotate(180deg);
}

/* Overlay sombre affiché derrière le menu déroulant (inchangé) */
.menu-overlay {
  background-color: rgb(0 0 0 / 0%);
  display: none;
  height: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: opacity 0.4s ease;
  width: 100%;
  z-index: 999;
}

.menu-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto; /* ✅ Permet les clics sur l'overlay pour fermer */
}

/* =========================
   TITRES DE SECTION
   ========================= */
.title-banner {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  border-radius: 5px 5px 15px 15px; /* Arrondit les coins inférieurs */ /* Dimensions et espacement */
  color: transparent;
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-size: 2.5rem; /* Taille du texte */
  margin: 30px auto;
  padding: 20px;
  position: relative; /* Style bannière */
  text-decoration: none;
  transition: transform 0.3s;
  width: fit-content;
}

.dynapuff-title,
.dynapuff {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.delius-regular {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
}

h3.title-banner {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  font-size: 2rem; /* Taille du texte pour h3 */
  font-weight: bold; /* Gras */
  margin-bottom: 40px; /* Espacement en dessous */
  text-decoration: none;
  transition: transform 0.3s;
} /* Titre secondaire */

/* Titre bannière en thème clair */
[data-theme="light"] .title-banner {
  color: var(--accent-color);
}

[data-theme="light"] .title-banner::after {
  background: var(--accent-color);
}


/* =========================
   HERO PAGE ACCUEIL
   ========================= */
.home-page .intro-text {
  margin: 0 auto 25px;
  max-width: none;
  padding: 0;
  position: relative;
  width: 100%;
}

.home-page .intro-text .hero-media {
  aspect-ratio: 1920 / 1082;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  height: auto;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0;
  max-width: 100%;
  overflow: hidden;
  place-items: center;
  position: relative;
  width: 100%;
  z-index: 0;
}

.home-page .intro-text .hero-media::before {
  background:
    linear-gradient(
      180deg,
      rgb(10 12 28 / 35%) 0%,
      rgb(10 12 28 / 60%) 60%,
      rgb(10 12 28 / 82%) 100%
    ),
    linear-gradient(120deg, rgb(93 93 255 / 28%), transparent 55%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

[data-theme="light"] .home-page .intro-text .hero-media::before {
  background: #fff;
}

.home-page .intro-text .content-wrapper,
.home-page .intro-text .text-content,
.home-page .intro-text .btn-explore {
  grid-area: 1 / 1;
  position: relative;
  z-index: 4;
}

.home-page .intro-text .content-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: min(100%, var(--home-content-max));
  padding: clamp(100px, 24vh, 135px) 24px 0;  
  text-align: center;
  width: 100%;
}

.home-page .intro-text .text-content {
  align-items: center;
  gap: 24px;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.home-page .intro-text .animated-title {
  margin-top: 0;
}

.title-subtitle {
  display: block;
  font-size: 0.4em;
  font-weight: 400;
  opacity: 0.68;
  margin-top: 8px;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

.home-page .intro-text .btn-explore {
  display: inline-flex;
  justify-content: center;
  margin: 12px auto 0;
}

.home-page {
  --home-content-max: 1240px;
}

.home-page main {
  margin-inline: auto;
  max-width: 100%;
  width: 100%;
}

.home-page #footer {
  margin-inline: 0;
  max-width: 100%;
  width: 100%;
}

.home-page main {
  overflow: visible;
  position: relative;
}

.home-page main::before,
.home-page main::after {
  content: none;
}


/* =========================
   SECTION RADAR DIGITAL
   ========================= */

/* Styles pour le titre principal de la section Radar sur la page d'accueil */

/* Cible le h2.section-title avec data-i18n="home.radarTeaserTitle" dans section.page-title-container */
section.page-title-container
  > h2.section-title[data-i18n="home.radarTeaserTitle"] {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-size: 3.5rem; /* Taille de police responsive, ajustée pour correspondre à d'autres titres principaux */
  margin-bottom: 20px; /* Ajusté pour un espacement standard sous le titre */
  padding-bottom: 10px; /* Optionnel, pour s'assurer que le dégradé n'est pas coupé */
  text-decoration: none;
  transition: transform 0.3s;
}

.page-subtitle {
  color: var(--text-color); /* Couleur du sous-titre */
  font-size: 1.35rem;
  padding: 40px; /* Espacement autour du sous-titre */
}

/* =========================
   SECTION ACTUALITÉS ACCUEIL
   ========================= */

.page-title-container {
  background: transparent;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 80px;
  padding: 0;
}

.page-title-container .main-page-title,
.page-title-container .page-subtitle {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent !important;
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-title-container .main-page-title {
  line-height: 1.15;
  padding-bottom: 0.20em;
}

.page-title-container .news-page-title {
  background: linear-gradient(45deg, #ffdbe7, #ffeaf2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .page-title-container .news-page-title {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-title-container .news-page-subtitle {
  font-family: var(--font-body);
}

.news-teaser-section,
.all-news-list {
  padding: 0 50px; /* Ajustez le padding selon vos besoins */
}

.news-teaser-section .section-title,
.all-news-list .main-page-title {
  margin-bottom: 40px; /* Espace sous le titre de la section */
}

.news-grid {
  display: grid;
  gap: 30px; /* Espace entre les cartes */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (width <= 1100px) {
  .news-grid {
    align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .news-card,
  .news-card-link {
    height: 100%;
  }

  .news-card-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

@media (width <= 860px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.news-card {
  background-color: rgb(79 89 102 / 2%);
  border-radius: 12px;
  box-shadow: 0 5px 5px var(--accent-color); /* Ombre plus marquée au survol */
  display: flex; /* Pour que le lien prenne toute la carte */
  flex-direction: column;
  height: auto; /* Hauteur automatique pour s'adapter au contenu */
  overflow: hidden; /* Pour que l'image/icône ne dépasse pas si vous utilisez des images */
  text-decoration: none; /* Enlève le soulignement du lien global de la carte */
  width: 100%; /* Prend toute la largeur du conteneur parent */
}

[data-theme="light"] .news-card {
  background-color: #fff;
  background-image: none;
}

.news-card-link {
  color: inherit; /* Hérite la couleur du texte de la carte */
  display: flex;
  flex-direction: column;
  height: 100%; /* Pour que le lien remplisse la carte */

  /* Le lien <a> qui englobe la carte */
  text-decoration: none;
}

.news-card-image-container {
  align-items: center;
  background-color: var(--section-bg-light);
  display: flex;
  height: 250px; /* Hauteur fixe pour l'image ou l'icône */
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.news-card-image-container img {
  object-fit: cover; /* Uniformise les visuels des cartes avec un léger recadrage */
  object-position: center;
  height: 100%;
  width: 100%;
}

.news-card-icon {
  color: var(--accent-color);

  /* Si vous utilisez une icône à la place d'une image */
  font-size: 3rem;
}

.news-card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Permet à cette section de grandir et de pousser la dateline en bas */
  padding: 20px 10px;
}

.news-card-title {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.18;
  margin-bottom: 10px;
  padding-bottom: 0.22em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.news-card-summary {
  color: var(--text-color);
  flex-grow: 1; /* Permet au résumé de prendre l'espace disponible */
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 15px;
}

.news-card-dateline {
  color: var(--accent-color);
  display: inline-block;
  font-family: var(--font-title);
  font-size: 1rem;
  margin-top: auto; /* Pousse la dateline en bas de la carte */
  padding-bottom: 0.12em;
}

.news-card-author {
  color: var(--text-color-light);
  font-size: 0.9rem;
  margin-top: 5px;
}

.home-page .news-card {
  aspect-ratio: auto;
  min-height: 470px;
}

.home-page .news-card-link {
  min-height: 100%;
}

.home-page .news-card-image-container {
  flex: 0 0 200px;
  height: 200px;
  min-height: 0;
}

.home-page .news-card-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  padding: 25px;
}

.home-page .news-card-title {
  display: block;
  font-size: 1.5rem;
  line-height: 1.2;
  overflow: visible;
}

.home-page .news-card-summary {
  display: -webkit-box;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.view-all-news-container {
  margin-top: 20px; /* Espace au-dessus du bouton "Tout voir" */
}

/* =========================
   PAGE EXPLORER
   ========================= */

body.explorer-page {
  padding-top: 80px; /* Hauteur du header normal */
}

.explorer-main-content {
  margin: 0 auto;
  max-width: none;
  min-height: calc(100vh - 80px - 100px); /* viewport - header - footer */
  padding: 0;

  /* Conteneur principal pour le contenu de la page explorer */
  width: 100%;
}

/* Titre animé de la page Explorer */
.main-page-title-container {
  grid-area: explorer-title;
  margin-bottom: 34px;
  margin-top: 0;
  overflow: hidden;
  padding: 12px 0;
  text-align: center;

  /* anciennement #project-display-placeholder */
  width: 100%;
}

h1.main-title-animated {
  animation: marquee-main-title 6s linear infinite;
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-size: 2.5rem;
  margin: 10px 16px;
  padding: 0;
  position: relative;
  text-decoration: none;
  transition: transform 0.3s;
  white-space: nowrap;
}

h1.main-title-animated .title-icon {
  font-size: 2.5rem;
  margin-left: 15px;
}

/* Structure layout Explorer (gauche/droite) */
.explorer-layout-container {
  background-color: transparent !important; /* Fond transparent */
  border-radius: 15px;
  box-shadow: 0 5px 20px var(--shadow-color);
  display: grid;
  grid-template-areas:
    "explorer-title"
    "explorer-display";
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 96px;
  overflow: hidden; /* Pour coins arrondis et contenu qui dépasse */
  padding-top: 75px;
  width: 100%;

  /* min-height: ...; /* S'adapte au contenu ou peut être défini */
}

/* Panneau de gauche : Liste des projets */
.explorer-projects-list-panel {
  background-color: transparent !important; /* Fond transparent */
  display: flex;
  flex-direction: column;
  grid-area: explorer-list;
  margin: 0;
  padding: 20px 30px;

  /* border-right: 3px solid var(--accent-color); */

 /* Bordure droite pour séparer les sections */
}

.scrollable-project-list-container {
  flex-grow: 1;

  /* max-height calculée pour s'adapter à la hauteur disponible */
  max-height: calc(
    100vh - 80px - 40px - 100px - 50px - 70px
  ); /* Ajuster précisément */

  -ms-overflow-style: none; /* IE 10+ */
  overflow-y: auto;
  position: relative;
  scrollbar-width: none; /* Firefox */
}

.scrollable-project-list-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

#explorerProjectList {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}

#explorerProjectList li {
  border-radius: 6px;
  color: var(--accent-color); /* Couleur d'accentuation */
  cursor: pointer;
  margin-bottom: 8px;
  padding: 12px 15px;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-left-color 0.3s ease, transform 0.2s ease;

  /* border-left: 4px solid var(--border-color-subtle); */

 /* Bordure gauche pour le style */
}

#explorerProjectList li:hover {
  background-color: var(--accent-color-lighter);
  color: var(--accent-color);
  transform: translateX(3px);
}

/* État actif - Thème Sombre (et par défaut) */
#explorerProjectList li.manual-active-project,
#explorerProjectList li.auto-active-project {
  /* background-color: var(--accent-color); */

 /* Supprimé pour que seul le texte change */
  border-left-color: var(--accent-color-darker);
  color: #c822ff; /* Texte en couleur d'accentuation */
  transform: translateX(5px);
}

/* Styles pour les titres et catégories dans la liste */
#explorerProjectList li .project-list-title {
  display: block;
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 4px;
}

#explorerProjectList li .project-list-category {
  display: block;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Thème Clair pour la liste des projets */
[data-theme="light"] #explorerProjectList li {
  border-left-color: var(
    --border-color-subtle
  ); /* Utilise la variable du thème clair */

  color: var(--accent-color); /* Couleur d'accentuation du thème clair */
}

[data-theme="light"] #explorerProjectList li:hover {
  background-color: var(
    --accent-color-lighter
  ); /* Utilise la variable du thème clair */

  color: var(--accent-color);
}

/* État actif - Thème Clair */
[data-theme="light"] #explorerProjectList li.manual-active-project,
[data-theme="light"] #explorerProjectList li.auto-active-project {
  /* background-color: var(--accent-color); */

 /* Supprimé */
  border-left-color: var(
    --accent-color-darker
  ); /* Utilise la variable du thème clair */

  color: #5d5dff; /* Texte en couleur d'accentuation du thème clair */
}

/* Panneau de droite : Affichage du projet */
.explorer-project-display-panel {
  background-color: transparent !important; /* Fond transparent, était var(--background-color) */
  grid-area: explorer-display;
  margin: 0;
  overflow: hidden; /* Empêche le défilement */
  padding: 30px 0 34px;
  position: relative;
  width: 100%;
}

.explorer-project-display-panel::before,
.explorer-project-display-panel::after {
  content: "";
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: min(120px, 12vw);
  z-index: 3;
}

.explorer-project-display-panel::before {
  background: linear-gradient(90deg, var(--background-color), transparent);
  left: 0;
}

.explorer-project-display-panel::after {
  background: linear-gradient(270deg, var(--background-color), transparent);
  right: 0;
}

.explorer-project-marquee-track {
  align-items: stretch;
  animation: explorer-project-marquee 58s linear infinite;
  display: flex;
  gap: 0;
  padding: 8px clamp(18px, 4vw, 70px) 16px;
  width: max-content;
  will-change: transform;
}

.explorer-project-display-panel:hover .explorer-project-marquee-track,
.explorer-project-display-panel:focus-within .explorer-project-marquee-track {
  animation-play-state: paused;
}

.project-display-content {
  animation: none;

  /* Conteneur pour la carte du projet affiché */
  display: none; /* Caché par défaut */
  text-align: center; /* Centre la carte si elle est plus petite */
}

.explorer-project-marquee-track .project-display-content {
  display: block;
  flex: 0 0 clamp(250px, 25vw, 350px);
  margin-right: clamp(18px, 2vw, 30px);
}

.project-display-content.active {
  display: block; /* Affiché lorsque actif */
}

/* Cartes de projet (dans le panneau de droite) */
.project-card-style {
  background-color: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 4px 15px var(--shadow-color);
  margin: 0;
  max-width: none;
  overflow: hidden;
  position: relative; /* Important pour positionner .project-card-overlay et .project-view-icon */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;

  /* display: flex; flex-direction: column; /* Supprimé car l'overlay sera sur l'image */
}

.project-card-style:hover {
  box-shadow: 0 10px 20px var(--accent-color), 0 6px 12px rgb(0 0 0 / 30%);
  transform: translateY(-8px);
}

.project-card-link {
  aspect-ratio: 16 / 10;
  color: inherit;
  display: block; /* Ou inline-block, mais block est souvent plus simple pour les liens conteneurs */
  height: 100%; /* S'assurer que le lien prend la hauteur de l'image si l'image est le seul contenu visible principal */
  overflow: hidden;
  position: relative; /* Nécessaire si .project-card-overlay est positionné par rapport à lui */
  text-decoration: none;
}

/* Image de projet */
.project-display-image {
  object-fit: cover;
  border-radius: 10px;
  display: block;
  height: 100%;
  max-height: none;
  transition: filter 0.3s ease;
  width: 100%;
}

.project-card-style:hover .project-display-image {
  filter: blur(3px) brightness(0.7);
}

/* MODIFICATION : .project-card-overlay (conteneur du titre) */
.project-card-overlay {
  align-items: center;
  background-color: transparent; /* PAS DE BANDE DE FOND */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  left: 50%;
  max-width: 90%; /* Empêche le titre d'être trop large */
  opacity: 0; /* Caché par défaut */
  padding: 0; /* Pas de padding pour l'overlay lui-même */
  pointer-events: none; /* Pour ne pas interférer avec le survol */
  position: absolute;

  /* Positionné pour être sous l'icône oeil */
  top: calc(
    50% + 24px + 8px
  ); /* 50% (centre carte) + moitié hauteur oeil (30px) + espace (10px) */

  transform: translateX(-50%); /* Centré horizontalement */

  /* Transition avec un léger délai pour apparaître après l'icône */
  transition: opacity 0.3s ease 0.1s, top 0.3s ease 0.1s;
  width: auto; /* S'adapte au contenu du titre */
  z-index: 11; /* Au-dessus de l'icône oeil si jamais il y a chevauchement */
}

.project-card-style:hover .project-card-overlay {
  opacity: 1; /* Apparaît au survol de la carte */
  pointer-events: auto;
}

/* Styles pour le titre h3 existant dans .project-card-overlay */
.project-card-overlay h3 {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: bold;
  line-height: 1.15;
  margin: 0;
  max-width: 100%; /* S'assure qu'il ne dépasse pas son conteneur .project-card-overlay */
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 3px rgb(0 0 0 / 26.7%); /* Ombre portée pour lisibilité */
  transition: transform 0.3s;
  white-space: normal; /* Permet le retour à la ligne si nécessaire */
}

.project-view-icon {
  align-items: center;
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
  color: transparent;
  display: flex;
  font-size: 1.45rem;
  height: 48px;
  justify-content: center;
  left: 50%;
  opacity: 0; /* Caché par défaut */
  position: absolute;
  text-decoration: none;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  transition: transform 0.3s;
  width: 48px;
  z-index: 10;
}

.project-card-style:hover .project-view-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.highlight-project {
  box-shadow: 0 0 20px var(--accent-color);
  outline: 3px solid var(--accent-color);
  transition: outline 0.3s, box-shadow 0.3s;
}

@keyframes explorer-project-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .explorer-project-marquee-track {
    animation: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    width: 100%;
  }

  .explorer-project-marquee-track .project-display-content {
    scroll-snap-align: center;
  }
}

/* =========================
   ANIMATIONS
   ========================= */
@keyframes marquee-main-title {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-110%);
  }
}

@keyframes fadeInProjectDisplay {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

}

/* =========================
   BLOG - STYLES GÉNÉRAUX
   ========================= */
.blog-page {
  background-color: var(--background-color);
}

.blog-main-container {
  padding-top: 0;
}

.container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 30px;
}

/* =========================
   BLOG - BANNIÈRE HÉRO
   ========================= */
.blog-hero {
  border-radius: 0 0 75px 75px;
  margin-bottom: 40px;
  padding: 60px 0;
  text-align: center;
}

.blog-title {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-size: 3.5rem;
  margin-bottom: 20px;
  padding: 0.25em;
}

[data-theme="light"] .blog-title {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blog-subtitle {
  font-size: 1.2rem;
  margin: 0 auto;
  max-width: 600px;
  opacity: 0.8;
}

/* =========================
   BLOG - FILTRES
   ========================= */
.blog-filters {
  margin-bottom: 40px;
}

.filter-container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.search-box input {
  background: linear-gradient(
    135deg,
    rgb(93 93 255 / 7%),
    rgb(216 141 243 / 34%)
  );
  border: 1px solid rgb(93 93 255 / 20%);
  border-radius: 8px;
  color: var(--text-color);
  font-family: var(--font-body);
  padding: 12px 45px 12px 15px;
  width: 100%;
}

.search-box button {
  background: none;
  border: none;
  color: var(--accent-color);
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.category-filter select {
  appearance: none;
  background-color: rgb(93 93 255 / 5%);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d5dff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 16px;
  border: 1px solid rgb(93 93 255 / 20%);
  border-radius: 8px;
  color: var(--text-color);
  cursor: pointer;
  font-family: var(--font-body);
  padding: 12px 35px 12px 15px;
}

/* =========================
   BLOG - CARTES D'ARTICLES
   ========================= */
.articles-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 50px;
}

@media (width <= 1100px) {
  .articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.blog-card {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  box-shadow: 0 10px 30px rgb(93 93 255 / 20%);
  transform: translateY(-5px);
}

.blog-articles-page .blog-card[data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

.blog-card-link {
  color: var(--text-color);
  display: block;
  text-decoration: none;
}

.blog-card-image-link {
  display: block;
  text-decoration: none;
}

.blog-card-image-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.blog-card-image {
  object-fit: cover;
  object-position: center;
  height: 100%;
  transition: transform 0.5s ease;
  width: 100%;
}

.blog-card:hover .blog-card-image {
  transform: scale(1.05);
}

.blog-card-category {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  border-radius: 20px;
  color: white;
  font-size: 0.8rem;
  font-family: var(--font-title);
  font-weight: 500;
  padding: 6px 12px;
  position: absolute;
  right: 15px;
  top: 15px;
}

.blog-card-content {
  padding: 25px;
}

.blog-card-title {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  font-family: var(--font-title);
  font-size: 1.5rem;
  margin-bottom: 15px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .blog-card-title {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blog-card-summary {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: 0.95rem;
  -webkit-line-clamp: 3;
  line-height: 1.6;
  margin-bottom: 20px;
  opacity: 0.9;
  overflow: hidden;
}

.blog-card-meta {
  align-items: center;
  display: flex;
  font-size: 0.9rem;
  justify-content: space-between;
  opacity: 0.8;
}

.blog-card-date {
  color: #c822ff;
  font-family: var(--font-title);
  text-shadow: 0 0 10px rgb(200 34 255 / 25%);
}

.blog-card-readmore {
  color: var(--accent-color);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.3s;
}

.blog-card:hover .blog-card-readmore {
  opacity: 1;
  text-decoration: none;
}

/* =========================
   CONSENT - DONNEES PERSONNELLES
   ========================= */
.consent-scroll-lock {
  overflow: hidden;
  touch-action: none;
}

.consent-banner {
  background: linear-gradient(135deg, #1e1232, #0b284c);
  border: 1px solid rgb(93 93 255 / 40%);
  border-radius: 16px;
  bottom: 0;
  top: auto;
  box-shadow: 0 18px 45px rgb(0 0 0 / 35%);
  color: var(--text-color);
  max-height: 55vh;
  max-width: 640px;
  opacity: 0;
  overflow-y: auto;
  padding: 14px 16px;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 110%);
  transform-origin: center bottom;
  transition: transform 0.35s ease, opacity 0.35s ease;
  width: min(640px, 94vw);
  z-index: 9999;
}

.consent-banner--visible {
  opacity: 1;
  transform: translate(-50%, -12px);
}

.consent-banner--hidden {
  display: none;
}

[data-theme="light"] .consent-banner {
  background: linear-gradient(135deg, #ffffff, #eef0ff);
  border: 1px solid rgb(93 93 255 / 30%);
  box-shadow: 0 18px 45px rgb(93 93 255 / 18%);
  color: #2a2a2a;
}

[data-theme="light"] .consent-banner__description,
[data-theme="light"] .consent-banner__info,
[data-theme="light"] .consent-toggle__label,
[data-theme="light"] .consent-toggle__text span {
  color: #3a3a4a;
  opacity: 1;
}

[data-theme="light"] .consent-toggle {
  background: rgb(93 93 255 / 8%);
  border: 1px solid rgb(93 93 255 / 18%);
}

[data-theme="light"] .consent-toggle__badge {
  background: rgb(93 93 255 / 12%);
  color: #5d5dff;
}

[data-theme="light"] .consent-banner__links a {
  color: #5d5dff;
}

[data-theme="light"] .consent-btn--secondary {
  background: rgb(93 93 255 / 12%);
  color: #2a2a2a;
}

[data-theme="light"] .consent-btn--ghost {
  border: 1px solid rgb(93 93 255 / 30%);
  color: #2a2a2a;
}

[data-theme="light"] .consent-floating {
  background: rgb(93 93 255 / 12%);
  border: 1px solid rgb(93 93 255 / 30%);
  color: #2a2a2a;
}

.consent-banner__title {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  font-family: var(--font-title);
  font-size: 1.35rem;
  margin-bottom: 8px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.consent-banner__description {
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 18px;
  opacity: 0.85;
}

.consent-banner__details {
  border-top: 1px solid rgb(200 34 255 / 20%);
  margin-top: 12px;
  padding-top: 10px;
}

.consent-banner--expanded {
  max-height: none;
}

.consent-toggle {
  align-items: center;
  background: rgb(30 31 47 / 65%);
  border: 1px solid rgb(93 93 255 / 22%);
  border-radius: 14px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 8px 10px;
}

.consent-toggle__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
}

.consent-toggle__text span {
  font-size: 0.75rem;
  opacity: 0.7;
}

.consent-toggle__badge {
  align-items: center;
  border: 1px solid rgb(200 34 255 / 40%);
  border-radius: 999px;
  color: #f3e6ff;
  display: inline-flex;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
}

.consent-toggle__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.consent-switch {
  height: 24px;
  position: relative;
  width: 44px;
}

.consent-switch input {
  height: 0;
  opacity: 0;
  width: 0;
}

.consent-slider {
  background: rgb(93 93 255 / 35%);
  border-radius: 24px;
  cursor: pointer;
  inset: 0;
  position: absolute;
  transition: background 0.2s ease;
}

.consent-slider::before {
  background: white;
  border-radius: 50%;
  content: "";
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 0.2s ease;
  width: 18px;
}

.consent-switch input:checked + .consent-slider {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
}

.consent-switch input:checked + .consent-slider::before {
  transform: translateX(20px);
}

.consent-banner__info {
  font-size: 0.72rem;
  margin: 10px 0 12px;
  opacity: 0.7;
}

.consent-banner__links {
  display: flex;
  gap: 8px;
  justify-content: center;
  text-align: center;
}

.consent-banner__links a {
  color: var(--accent-color);
  font-size: 0.78rem;
  text-decoration: none;
}

.consent-banner__links a:hover {
  text-decoration: underline;
}

.consent-banner__actions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.consent-banner__actions--save {
  grid-template-columns: 1fr;
  margin-top: 12px;
}

.consent-btn {
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 8px 8px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.consent-btn:hover {
  transform: translateY(-1px);
}

.consent-btn--primary {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  color: white;
}

.consent-btn--secondary {
  background: rgb(93 93 255 / 20%);
  color: var(--text-color);
}

.consent-btn--ghost {
  background: transparent;
  border: 1px solid rgb(200 34 255 / 35%);
  color: var(--text-color);
}

.consent-floating {
  background: rgb(93 93 255 / 25%);
  border: 1px solid rgb(200 34 255 / 35%);
  border-radius: 999px;
  bottom: 24px;
  color: var(--text-color);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 8px 14px;
  position: fixed;
  right: 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9998;
}

.consent-floating--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (width <= 576px) {
  .consent-banner {
    bottom: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 16px;
    width: min(92vw, 520px);
  }

  .consent-banner__actions {
    grid-template-columns: 1fr;
  }

  .consent-banner__description {
    font-size: 0.9rem;
  }

  .consent-toggle {
    padding: 10px 12px;
  }

  .consent-btn {
    font-size: 0.8rem;
    padding: 9px 10px;
  }
}

/* =========================
   PAGES LEGALES
   ========================= */
.legal-page-main {
  padding: 40px 0 80px;
}

.legal-container {
  background: var(--background-gradient);
  border: 1px solid rgb(43 16 82 / 35%);
  border-radius: 24px;
  box-shadow: 0 24px 55px rgb(0 0 0 / 45%);
  margin: 0 auto;
  max-width: 960px;
  padding: 40px 42px;
  text-align: center;
}

.legal-container h1 {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 10px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.legal-container .last-updated {
  color: rgb(200 34 255 / 90%);
  font-size: 0.95rem;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.legal-container section {
  background: var(--background-gradient);
  border: 1px solid rgb(11 40 76 / 35%);
  border-radius: 18px;
  margin-bottom: 22px;
  padding: 22px 26px;
}

[data-theme="light"] .legal-container {
  background: rgb(255 255 255 / 92%);
  border-color: rgb(93 93 255 / 20%);
  box-shadow: 0 18px 40px rgb(93 93 255 / 15%);
}

[data-theme="light"] .legal-container section {
  background: rgb(245 246 255 / 90%);
  border-color: rgb(93 93 255 / 18%);
}

.legal-container h2 {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  font-family: var(--font-title);
  font-size: 1.35rem;
  margin-bottom: 10px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.legal-container p,
.legal-container li {
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.7;
}

.legal-container ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.legal-container li {
  margin: 10px 0;
  padding-left: 18px;
  position: relative;
  text-align: left;
}

.legal-container li::before {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  border-radius: 50%;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  top: 9px;
  width: 8px;
}

.legal-container a {
  color: var(--accent-color);
  text-decoration: none;
}

.legal-container a:hover {
  text-decoration: underline;
}

@media (width <= 576px) {
  .legal-container {
    padding: 28px 20px;
  }

  .legal-container section {
    padding: 18px;
    text-align: left;
  }
}

/* =========================
   GOUVERNANCE IA
   ========================= */
.ia-page-main {
  padding: 40px 0 80px;
}

.ia-page {
  margin: 0 auto;
  max-width: 960px;
  padding: 0 24px;
  text-align: center;
}

.ia-page .hero {
  background: var(--background-gradient);
  border: 1px solid rgb(43 16 82 / 45%);
  border-radius: 24px;
  box-shadow: 0 24px 55px rgb(0 0 0 / 45%);
  margin-bottom: 28px;
  padding: 36px 32px;
}

.ia-page .hero h1 {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-size: 1.75rem;
  margin-bottom: 10px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ia-page .subtitle {
  color: var(--text-color);
  font-size: 1.05rem;
  opacity: 0.85;
}

.ia-page .badge-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.65rem;
  justify-content: center;
  margin: 0.8rem 0 1.5rem;
}

.ia-page .badge {
  background: rgb(255 140 0 / 22%);
  border: 1px solid rgb(255 140 0 / 45%);
  border-radius: 999px;
  color: #ffd6a1;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 0.35rem 0.75rem;
  text-decoration: none;
}

.ia-page .badge:focus-visible {
  outline: 2px solid rgb(255 140 0 / 70%);
  outline-offset: 2px;
}

.ia-page section {
  background: var(--secondary-bg);
  border: 1px solid rgb(93 93 255 / 22%);
  border-radius: 20px;
  box-shadow: 0 16px 40px var(--shadow-color);
  margin-bottom: 24px;
  padding: 24px 28px;
  text-align: center;
}

.ia-page section h2 {
  color: var(--text-color);
  font-family: var(--font-title);
  font-size: 1.4rem;
  margin-bottom: 25px;
}

.ia-page section h2[data-i18n="ia.whyTitle"],
.ia-page section h2[data-i18n="ia.roleTitle"] {
  font-family: var(--font-body);
  font-weight: 400;
}

.ia-page .ia-code-title {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  display: inline-block;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ia-page p,
.ia-page li {
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.7;
}

.ia-page .code-box {
  background: linear-gradient(135deg, #0b284c, #1e1232);
  border: 1px solid rgb(93 93 255 / 35%);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%);
  color: #e5e7eb;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 20px 22px;
  text-align: center;
}

.ia-page .code-box ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.ia-page .code-box li {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-bottom: 0.6rem;
  padding-left: 0;
}

.ia-page .code-box li::before {
  content: none;
}

.ia-page .code-box .code-subtitle {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ia-page .code-box .code-reference {
  background: linear-gradient(90deg, #ffb347, #ff6b3d);
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ia-page .project-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.ia-page .project-list li {
  margin-bottom: 0.4rem;
  padding-left: 0;
}

.ia-page .project-list li::before {
  content: none;
}

[data-theme="light"] .ia-page .hero {
  background: rgb(255 255 255 / 92%);
  border-color: rgb(93 93 255 / 20%);
  box-shadow: 0 18px 40px rgb(93 93 255 / 15%);
}

[data-theme="light"] .ia-page .badge {
  background: linear-gradient(135deg, rgb(255 214 153 / 78%), rgb(255 236 204 / 92%));
  border-color: rgb(180 95 20 / 35%);
  box-shadow: 0 8px 18px rgb(180 95 20 / 10%);
  color: #5f2b00;
}

[data-theme="light"] .ia-page .badge:hover,
[data-theme="light"] .ia-page .badge:focus-visible {
  border-color: rgb(180 95 20 / 48%);
  color: #4a2200;
}

[data-theme="light"] .ia-page section {
  background: rgb(245 246 255 / 90%);
  border-color: rgb(93 93 255 / 18%);
}

[data-theme="light"] .ia-page .code-box {
  background: linear-gradient(135deg, #f1f4ff, #e5e8ff);
  border-color: rgb(93 93 255 / 20%);
  color: #1f2937;
}

@media (width <= 576px) {
  .ia-page {
    padding: 0 18px;
  }

  .ia-page .hero {
    padding: 28px 22px;
    text-align: center;
  }

  .ia-page .badge-group {
    gap: 0.75rem 0.7rem;
    margin: 1.05rem auto 1.7rem;
    max-width: 280px;
  }

  .ia-page .badge {
    padding: 0.48rem 0.85rem;
  }

  .ia-page section {
    padding: 20px;
  }
}

/* =========================
   VISION AGILE
   ========================= */
.agility-page-main {
  margin: 0 auto;
  max-width: 960px;
  padding: 40px 24px 80px;
}

.agility-hero {
  background:
    linear-gradient(135deg, rgb(93 93 255 / 18%), rgb(255 140 0 / 10%)),
    var(--secondary-bg);
  border: 1px solid rgb(93 93 255 / 24%);
  border-radius: 18px;
  box-shadow: 0 24px 55px rgb(0 0 0 / 38%);
  margin-bottom: 28px;
  padding: 36px 32px;
  text-align: center;
}

.agility-kicker,
.agility-section-label {
  color: #9fb4ff;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.agility-title,
.agility-section-title {
  color: var(--accent-color);
  display: inline-block;
  font-family: var(--font-title);
}

.agility-title {
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  line-height: 1.08;
  margin: 0 0 18px;
}

.agility-hero-lead {
  color: var(--text-color);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 780px;
}

.agility-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}

.btn-view-more-secondary {
  background: transparent;
  border-color: rgb(93 93 255 / 42%);
  color: var(--text-color);
}

.agility-section {
  background: rgb(20 19 73 / 74%);
  border: 1px solid rgb(93 93 255 / 28%);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgb(0 0 0 / 28%);
  margin-bottom: 24px;
  padding: 24px 28px;
}

.agility-section[id] {
  scroll-margin-top: 120px;
}

.agility-manifesto {
  text-align: center;
}

.agility-framed {
  overflow: hidden;
  position: relative;
}

.agility-section-heading {
  margin: 0 auto 22px;
  max-width: 760px;
  text-align: center;
}

.agility-section-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 18px;
}

.agility-body-text,
.agility-table td,
.agility-table th {
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.7;
}

.agility-body-text {
  margin: 0 auto 22px;
  max-width: 760px;
  text-align: center;
}

.agility-source-link,
.agility-project-link {
  color: #9fb4ff;
  text-decoration: none;
}

.agility-source-link:hover,
.agility-project-link:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.agility-values-grid,
.agility-principles-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.agility-values-grid {
  gap: 18px;
  grid-template-columns: 1fr;
  margin-inline: auto;
  max-width: 760px;
}

.agility-principles-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agility-value-card,
.agility-principles-grid article {
  background: rgb(76 48 121 / 36%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 16px;
  padding: 24px 28px;
  text-align: center;
}

.agility-value-index,
.agility-principle-number {
  color: #ffb347;
  display: inline-block;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.96rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.agility-card-title {
  color: var(--text-color);
  font-family: var(--font-title);
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  margin: 0 0 18px;
}

.agility-value-priority {
  color: #ffd6a1 !important;
  font-size: 1.05rem !important;
  margin-bottom: 20px;
}

.agility-section-subtitle {
  color: #ffd6a1;
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.35;
  margin: 0;
}

.agility-daily {
  text-align: left;
}

.agility-daily-content {
  color: var(--text-color);
  display: grid;
  font-size: 1rem;
  gap: 18px;
  line-height: 1.7;
}

.agility-practice-block {
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 14px;
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.7;
  padding: 20px 22px;
}

.agility-practice-block h3,
.agility-table-title,
.agility-vision-block h3 {
  color: #ffd6a1;
  font-family: var(--font-title);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.2;
  margin: 0 0 16px;
}

.agility-practice-list {
  margin: 12px 0 18px;
  padding-left: 28px;
}

.agility-practice-item {
  margin-bottom: 8px;
}

.agility-table-title {
  margin-top: 36px;
}

.agility-table-wrap {
  margin-top: 18px;
  overflow-x: auto;
}

.agility-table {
  border-collapse: collapse;
  min-width: 640px;
  width: 100%;
}

.agility-table th,
.agility-table td {
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  padding: 16px 14px;
  text-align: left;
  vertical-align: top;
}

.agility-table th {
  color: #ffd6a1;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agility-vision-block {
  background: rgb(255 179 71 / 8%);
  border: 1px solid rgb(255 179 71 / 18%);
  border-radius: 14px;
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.7;
  margin-top: 28px;
  padding: 22px 24px;
}

.agility-tools {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(5, minmax(86px, 1fr));
  justify-items: center;
  margin: 20px auto 0;
  max-width: 680px;
}

.agility-tool {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  gap: 10px;
  text-align: center;
}

.agility-tool-icon {
  align-items: center;
  background-color: var(--skill-icon-bg);
  border: 1px solid rgb(93 93 255 / 24%);
  border-radius: 14px;
  display: flex;
  height: 76px;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  width: 76px;
}

.agility-tool-icon:hover {
  border-color: var(--accent-color);
  box-shadow: 0 10px 24px rgb(var(--accent-rgb), 0.18);
  transform: translateY(-4px);
}

.agility-tool-image {
  object-fit: contain;
  height: 42px;
  width: 42px;
}

.agility-tool-label {
  color: var(--skill-text-color);
  font-size: 0.95rem;
  margin: 0;
}

.agility-quote {
  background: linear-gradient(135deg, rgb(11 40 76 / 74%), rgb(30 18 50 / 78%));
  border: 1px solid rgb(255 179 71 / 22%);
  border-radius: 16px;
  margin-top: 24px;
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
}

.agility-quote blockquote {
  color: #fff;
  font-family: var(--font-title);
  font-size: clamp(1.2rem, 2.6vw, 1.85rem);
  line-height: 1.28;
  margin: 0 auto;
  max-width: 900px;
}

[data-theme="light"] .agility-hero,
[data-theme="light"] .agility-section {
  background: rgb(255 255 255 / 92%);
  border-color: rgb(93 93 255 / 20%);
  box-shadow: 0 18px 40px rgb(93 93 255 / 13%);
}

[data-theme="light"] .agility-value-card,
[data-theme="light"] .agility-principles-grid article {
  background: rgb(245 246 255 / 86%);
  border-color: rgb(93 93 255 / 16%);
}

[data-theme="light"] .agility-source-link,
[data-theme="light"] .agility-project-link {
  color: #4949c8;
}

[data-theme="light"] .agility-table th {
  color: #8a4300;
}

[data-theme="light"] .agility-table th,
[data-theme="light"] .agility-table td {
  border-bottom-color: rgb(93 93 255 / 16%);
}

[data-theme="light"] .agility-tool-icon {
  background-color: var(--skill-icon-bg);
  border-color: rgb(93 93 255 / 18%);
}

[data-theme="light"] .agility-tool-label {
  color: var(--skill-text-color);
}

@media (width <= 820px) {
  .agility-manifesto,
  .agility-principles-grid {
    grid-template-columns: 1fr;
  }

  .agility-page-main {
    padding-inline: 18px;
  }

  .agility-tools {
    gap: 12px;
    grid-template-columns: repeat(5, minmax(58px, 1fr));
    max-width: 520px;
  }
}

@media (width <= 560px) {
  .agility-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .agility-hero-actions .btn-view-more {
    width: 100%;
  }

  .agility-value-card,
  .agility-principles-grid article {
    padding: 18px;
  }

  .agility-section {
    padding: 20px;
  }

  .agility-tools {
    gap: 8px;
    grid-template-columns: repeat(5, minmax(46px, 1fr));
  }

  .agility-tool-icon {
    border-radius: 12px;
    height: 48px;
    width: 48px;
  }

  .agility-tool-image {
    height: 28px;
    width: 28px;
  }

  .agility-tool-label {
    font-size: 0.78rem;
  }
}

/* =========================
   BLOG - PAGINATION
   ========================= */
.blog-pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 50px 0;
}

.pagination-btn {
  background-color: transparent;
  border: 1px solid rgb(93 93 255 / 30%);
  border-radius: 8px;
  color: var(--text-color);
  cursor: pointer;
  font-weight: 600;
  height: 40px;
  transition: all 0.3s ease;
  width: 40px;
}

.pagination-btn:hover {
  background-color: rgb(93 93 255 / 10%);
  border-color: var(--accent-color);
}

.pagination-btn.active {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  border: none;
  color: white;
}

.pagination-btn.next-page {
  padding: 0 15px;
  width: auto;
}

/* =========================
   SECTION ARTICLE DÉTAILLÉ
   ========================= */

/* Styles pour la page d'article détaillé */
.article-detail-page .article-content-full {
  padding: 40px 20px;
}

.article-header-detailed {
  margin-bottom: 40px;
  text-align: center;
}

.article-title-main {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-size: 3.6rem;
  margin-bottom: 15px;
  margin-top: 50px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .article-title-main {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article-dateline-detailed {
  color: var(--text-color-light);
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 30px;
}

[data-theme="light"] .article-dateline-detailed {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article-comment-count {
  align-items: center;
  color: var(--text-color-light);
  display: inline-flex;
  font-family: var(--font-title);
  font-size: 1.05rem;
  gap: 8px;
  justify-content: center;
  margin-bottom: 30px;
}

.article-reactions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 30px;
}

.article-reactions .article-comment-count {
  margin-bottom: 0;
}

.article-reactions .like-button {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-color-light);
  padding: 0;
}

.article-reactions .like-button:hover {
  box-shadow: none;
  transform: none;
}

.article-reactions .like-button.is-active {
  background: transparent;
}

.article-reactions .like-icon {
  height: 18px;
  width: 18px;
}

.article-reactions .like-count {
  font-size: 0.95rem;
}

.article-reactions .like-label {
  font-size: 0.9rem;
}

.like-reaction-picker {
  position: relative;
}

.like-reaction-trigger {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.like-trigger-emoji {
  font-size: 1.08rem;
  line-height: 1;
}

.like-reaction-palette {
  align-items: center;
  background: rgb(9 12 27 / 96%);
  border: 1px solid rgb(93 93 255 / 35%);
  border-radius: 999px;
  box-shadow: 0 16px 28px rgb(0 0 0 / 28%);
  display: flex;
  gap: 8px;
  left: 0;
  opacity: 0;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  top: -56px;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 25;
}

.like-reaction-picker:focus-within .like-reaction-palette,
.like-reaction-picker.is-open .like-reaction-palette {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.like-reaction-choice {
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.24rem;
  line-height: 1;
  padding: 2px;
  transition: transform 0.16s ease;
}

.like-reaction-choice:hover,
.like-reaction-choice.is-active {
  transform: translateY(-3px) scale(1.08);
}

.comment-count-icon {
  height: 22px;
  width: 22px;
}

.like-button {
  align-items: center;
  background: rgb(24 25 38 / 70%);
  border: 1px solid rgb(93 93 255 / 35%);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-title);
  gap: 8px;
  justify-content: center;
  min-width: 132px;
  padding: 8px 16px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.like-button:hover {
  box-shadow: 0 8px 18px rgb(0 0 0 / 20%);
  transform: translateY(-2px);
}

.like-button.is-active {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  border-color: transparent;
}

.like-button.is-active .like-icon {
  filter: brightness(1.15);
}

.like-icon {
  display: block;
  height: 20px;
  width: 20px;
}

.like-count {
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 700;
}

.like-label {
  flex: 0 0 auto;
  font-size: 0.9rem;
}

.detail-like {
  align-self: center;
  margin-top: 10px;
}

.detail-like {
  background: transparent;
  border: none;
  box-shadow: none;
  color: inherit;
  padding: 0;
}

.detail-like:hover {
  box-shadow: none;
  transform: none;
}

.detail-like.is-active {
  background: transparent;
}

.detail-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 10px;
}

.detail-title-row h1 {
  margin: 0;
}

.detail-title-label {
  color: #5d5dff;
  font-size: 1rem;
  font-weight: 600;
}

.detail-eyebrow-row--hidden {
  display: none;
}

[data-theme="light"] .detail-title-label {
  color: #5d5dff;
}

[data-theme="light"] .like-button {
  background: #fff0f7;
  border-color: rgb(200 34 255 / 30%);
  box-shadow: 0 6px 14px rgb(93 93 255 / 12%);
  color: #b4567c;
}

[data-theme="light"] .article-reactions .like-button {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #5d5dff;
}

[data-theme="light"] .like-reaction-palette {
  background: rgb(255 255 255 / 98%);
  border-color: rgb(93 93 255 / 25%);
  box-shadow: 0 12px 20px rgb(93 93 255 / 18%);
}

[data-theme="light"] .like-button.is-active {
  background: linear-gradient(45deg, #ffb3d9, #ffd2e7);
  color: #7a2e52;
}

[data-theme="light"] .like-icon {
  filter: brightness(0.65) saturate(1.1);
}

.article-banner-image {
  border-radius: 8px;
  box-shadow: 0 12px 35px rgb(0 0 0 / 25%);
  display: block;
  height: auto;
  margin: 0 auto 60px;
  width: min(100%, 720px);
}

.article-body {
  color: var(--text-color);
  font-size: 1.3rem;
  line-height: 1.8;
  margin: 0 auto;
  max-width: 800px; /* Limite la largeur du contenu de l'article pour la lisibilité */
  text-align: left;
}

.article-body h2 {
  color: #c822ff;
  font-size: 2rem;
  margin-bottom: 20px;
  margin-top: 40px;
}

[data-theme="light"] .article-body h2 {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article-body h3 {
  color: var(--accent-color);
  font-size: 1.4rem;
  margin-bottom: 15px;
  margin-top: 30px;
}

.article-share,
.article-comments {
  background: linear-gradient(135deg, rgb(93 93 255 / 12%), rgb(200 34 255 / 8%));
  border: 1px solid rgb(93 93 255 / 35%);
  border-radius: 18px;
  margin: 40px auto 0;
  max-width: 900px;
  padding: 28px;
  text-align: center;
}

.article-section-title {
  font-family: var(--font-title);
  font-size: 1.9rem;
  margin-bottom: 12px;
}

.article-section-subtitle {
  font-size: 1rem;
  margin-bottom: 24px;
  opacity: 0.85;
}

.article-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.share-btn {
  align-items: center;
  background: rgb(24 25 38 / 75%);
  border: 1px solid rgb(93 93 255 / 45%);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-family: var(--font-title);
  justify-content: center;
  padding: 10px 16px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.share-btn img {
  display: block;
  height: 24px;
  width: 24px;
}

.share-copy-label {
  font-size: 0.95rem;
  margin-left: 8px;
}

.share-btn:hover {
  box-shadow: 0 10px 20px rgb(0 0 0 / 20%);
  transform: translateY(-2px);
}

.share-btn.share-copy {
  cursor: pointer;
}

.share-btn.is-copied {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
}

[data-theme="light"] .share-btn {
  background: #fff0f7;
  border-color: rgb(200 34 255 / 30%);
  box-shadow: 0 6px 14px rgb(93 93 255 / 12%);
  color: #b4567c;
}

[data-theme="light"] .share-btn:hover {
  box-shadow: 0 10px 20px rgb(93 93 255 / 18%);
}

[data-theme="light"] .share-btn.is-copied {
  background: linear-gradient(45deg, #ffb3d9, #ffd2e7);
  color: #7a2e52;
}

[data-theme="light"] .share-btn img {
  filter: brightness(0.65) saturate(1.1);
}

.article-comments-form {
  display: grid;
  gap: 16px;
  margin-top: 10px;
  min-width: 0;
  text-align: left;
}

.comments-status {
  font-size: 0.95rem;
  margin-bottom: 16px;
  min-height: 1.2em;
  opacity: 0.9;
  text-align: center;
}

.comments-status.is-error {
  color: #ff6b6b;
}

.comments-status.is-success {
  color: #9df5c3;
}

.comments-list {
  display: grid;
  gap: 16px;
  margin: 0 auto 24px;
  max-width: 760px;
  min-width: 0;
  overflow-wrap: anywhere;
  width: 100%;
}

.comment-item {
  background: rgb(24 25 38 / 70%);
  border: 1px solid rgb(93 93 255 / 30%);
  border-radius: 14px;
  max-width: 100%;
  min-width: 0;
  padding: 14px 18px;
  text-align: left;
  width: 100%;
}

.comment-header {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  margin-bottom: 8px;
  min-width: 0;
}

.comment-author {
  font-family: var(--font-title);
  min-width: 0;
  overflow-wrap: anywhere;
}

.comment-date {
  flex: 0 1 auto;
  font-size: 0.85rem;
  opacity: 0.7;
  overflow-wrap: anywhere;
}

.comment-message {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.comment-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 10px;
}

.comment-reaction-picker {
  max-width: 100%;
  position: relative;
}

.comment-reaction-trigger {
  align-items: center;
  background: rgb(11 40 76 / 22%);
  border: 1px solid rgb(43 16 82 / 45%);
  border-radius: 999px;
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 0.92rem;
  gap: 6px;
  line-height: 1;
  padding: 7px 12px;
}

.comment-reaction-summary {
  align-items: center;
  display: inline-flex;
  margin-right: 1px;
}

.comment-reaction-summary-item {
  border-radius: 999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 24%);
  font-size: 1rem;
  line-height: 1;
}

.comment-reaction-summary-item + .comment-reaction-summary-item {
  margin-left: -5px;
}

.comment-reaction-trigger-count {
  font-size: 0.85rem;
  font-weight: 600;
}

.comment-reaction-palette {
  align-items: center;
  background: rgb(9 12 27 / 96%);
  border: 1px solid rgb(93 93 255 / 35%);
  border-radius: 999px;
  box-shadow: 0 16px 28px rgb(0 0 0 / 28%);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  left: 0;
  max-width: min(360px, calc(100vw - 48px));
  opacity: 0;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  top: -52px;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
}

.comment-reaction-picker:focus-within .comment-reaction-palette,
.comment-reaction-picker.is-open .comment-reaction-palette {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.comment-reaction-choice {
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.22rem;
  line-height: 1;
  padding: 2px;
  transition: transform 0.16s ease;
}

.comment-reaction-choice:hover,
.comment-reaction-choice.is-active {
  transform: translateY(-3px) scale(1.08);
}

.comment-action-btn {
  background: rgb(11 40 76 / 22%);
  border: 1px solid rgb(43 16 82 / 45%);
  border-radius: 999px;
  color: var(--text-color);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 6px 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comment-action-btn:hover {
  box-shadow: 0 8px 16px rgb(0 0 0 / 20%);
  transform: translateY(-1px);
}

.comment-action-btn.is-liked,
.comment-action-btn:disabled {
  cursor: default;
  opacity: 0.7;
  transform: none;
}

.comment-replies {
  border-left: 1px solid rgb(93 93 255 / 28%);
  display: grid;
  gap: 12px;
  margin-top: 12px;
  min-width: 0;
  padding-left: 14px;
}

.comment-item-reply {
  background: rgb(17 18 30 / 72%);
}

.comment-item-reply .comment-replies {
  padding-left: 0;
}

.reply-form-wrap {
  margin-top: 12px;
  max-width: 100%;
  min-width: 0;
}

.reply-form {
  background: rgb(15 17 30 / 70%);
  border: 1px solid rgb(93 93 255 / 22%);
  border-radius: 12px;
  min-width: 0;
  padding: 12px;
}

.comment-actions-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  width: 100%;
}

.comment-submit-reply {
  font-size: 0.9rem;
  padding: 7px 14px;
}

.comment-secondary-btn {
  align-self: auto;
  background: transparent;
  border: 1px solid rgb(93 93 255 / 40%);
  border-radius: 999px;
  color: var(--text-color);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.86rem;
  padding: 6px 14px;
}

[data-theme="light"] .comment-item {
  background: #fff;
  border-color: rgb(93 93 255 / 30%);
  box-shadow: 0 10px 24px rgb(93 93 255 / 12%);
}

[data-theme="light"] .comment-author,
[data-theme="light"] .comment-message {
  color: #5d5dff;
}

[data-theme="light"] .comment-date {
  color: rgb(93 93 255 / 70%);
}

[data-theme="light"] .comment-action-btn {
  background: rgb(255 255 255 / 85%);
  border-color: rgb(93 93 255 / 30%);
  color: #5d5dff;
}

[data-theme="light"] .comment-reaction-trigger {
  background: rgb(255 255 255 / 85%);
  border-color: rgb(93 93 255 / 30%);
  color: #5d5dff;
}

[data-theme="light"] .comment-reaction-palette {
  background: rgb(255 255 255 / 98%);
  border-color: rgb(93 93 255 / 25%);
  box-shadow: 0 12px 20px rgb(93 93 255 / 18%);
}

[data-theme="light"] .comment-item-reply {
  background: #f8f9ff;
}

[data-theme="light"] .reply-form {
  background: #f2f4ff;
  border-color: rgb(93 93 255 / 30%);
}

.comment-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.article-comments-form input,
.article-comments-form textarea {
  background: rgb(11 40 76 / 22%);
  border: 1px solid rgb(43 16 82 / 45%);
  border-radius: 12px;
  color: var(--text-color);
  caret-color: var(--text-color);
  font-family: var(--font-body);
  min-width: 0;
  padding: 12px 14px;
  width: 100%;
}

.article-comments-form input::placeholder,
.article-comments-form textarea::placeholder {
  color: var(--text-color);
  opacity: 0.7;
}

.article-comments-form textarea {
  resize: vertical;
}

[data-theme="light"] .article-comments-form input,
[data-theme="light"] .article-comments-form textarea {
  background: rgb(255 244 249 / 96%);
  border-color: rgb(221 178 219 / 72%);
  color: var(--text-color);
  caret-color: var(--text-color);
}

[data-theme="light"] .article-comments-form input:-webkit-autofill,
[data-theme="light"] .article-comments-form textarea:-webkit-autofill,
[data-theme="light"] .article-comments-form input:-webkit-autofill:hover,
[data-theme="light"] .article-comments-form textarea:-webkit-autofill:hover,
[data-theme="light"] .article-comments-form input:-webkit-autofill:focus,
[data-theme="light"] .article-comments-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-color);
  box-shadow: 0 0 0 1000px rgb(255 244 249 / 96%) inset;
  caret-color: var(--text-color);
  transition: background-color 9999s ease-in-out 0s;
}

.comment-honeypot {
  display: none;
}

.comment-submit {
  align-self: flex-start;
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 6px 18px;
}

.article-body p,
.article-body ul,
.article-body ol {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.article-body ul,
.article-body ol {
  padding-left: 30px;
}

.article-body a {
  color: var(--accent-color);
  text-decoration: underline;
}

.article-body a:hover {
  text-decoration: none;
}

.article-image img {
  border-radius: 8px;
  box-shadow: 0 8px 25px rgb(0 0 0 / 20%);
  height: auto;
  margin: 20px 0;
  width: 100%;
}

.article-navigation {
  margin-top: 50px;
  text-align: center;
}

.btn-nav-style {
  align-items: center;
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  border: 1px solid rgb(93 93 255 / 35%);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgb(93 93 255 / 25%);
  color: transparent;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  gap: 10px;
  padding: 10px 26px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.btn-nav-style:hover {
  background-clip: border-box;
  box-shadow: 0 6px 24px rgb(93 93 255 / 40%);
  color: white;
  transform: translateY(-3px);
}

.btn-nav-style[aria-disabled="true"] {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

/* =========================
   SECTION "À PROPOS"
   ========================= */

.about-text-box {
  background: transparent;
  margin: 150px auto;
  max-width: 800px;
  padding: 50px;
}

.page-about main {
  background: transparent;
  position: relative;
}

.page-about .intro-text {
  display: flex;
  justify-content: center;
  padding: 40px 20px 10px;
}

.page-about .intro-text .profile-photo-container {
  background: linear-gradient(135deg, rgb(93 93 255 / 35%), rgb(0 0 0 / 0%));
  border-radius: 26px;
  padding: 20px;
}

.page-about .about-text-box {
  background: linear-gradient(145deg, rgb(16 18 34 / 92%), rgb(22 26 44 / 86%));
  border: 1px solid rgb(93 93 255 / 25%);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgb(5 8 20 / 60%);
  margin: 36px auto 40px;
  max-width: 920px;
  overflow: hidden;
  padding: 70px;
  position: relative;
  text-align: justify;
}

.page-about .about-text-box::before {
  background: radial-gradient(circle, rgb(93 93 255 / 18%), transparent 65%);
  content: "";
  height: 280px;
  left: -120px;
  position: absolute;
  top: -140px;
  width: 280px;
}

.page-about .about-text-box > * {
  position: relative;
  z-index: 1;
}

/* Typographic hierarchy for about section */
.about-text-box h1 {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  margin-top: 0;
}

.about-text-box h2 {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-size: clamp(2rem, 3.2vw, 2.35rem);
  font-weight: 400;
  line-height: 1.18;
  margin-bottom: 1.45rem;
  margin-top: 2.8rem;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-about .about-text-box h2 {
  margin-top: clamp(3.6rem, 6vw, 5.2rem);
}

.page-about .about-text-box h2:first-child {
  margin-top: 0;
}

.page-about .about-text-box h2::after {
  background: linear-gradient(90deg, var(--accent-color), #c822ff);
  border-radius: 999px;
  content: "";
  display: block;
  height: 3px;
  margin-top: 10px;
  width: 68px;
}

.about-text-box h3 {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-text-box p {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.2rem;
  text-decoration: none;
  transition: transform 0.3s;
} /* Style des paragraphes */

.page-about .about-text-box p,
.page-about .about-text-box li {
  background: none;
  color: var(--text-color);
}

[data-theme="light"] .page-about .about-text-box h1,
[data-theme="light"] .page-about .about-text-box h2,
[data-theme="light"] .page-about .about-text-box h3,
[data-theme="light"] .page-about .about-text-box p,
[data-theme="light"] .page-about .about-text-box li {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .skills-section .title-banner,
[data-theme="light"] .skills-section .category-title,
[data-theme="light"] .skills-section p {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .contact-container .title-banner,
[data-theme="light"] .contact-container label,
[data-theme="light"] .contact-email,
[data-theme="light"] .contact-email a {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-container .title-banner {
  font-size: 3rem;
}

.contact-container h3.title-banner {
  font-size: 2.3rem;
}

[data-theme="light"] .explorer-page h1.main-title-animated {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .page-intro-title,
[data-theme="light"] .page-intro-card .page-intro-title {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .page-intro-lead {
  color: #5d5dff;
}

[data-theme="light"] .page-intro-card {
  background: rgb(255 255 255 / 82%);
  border: 1px solid rgb(93 93 255 / 22%);
  border-image: none;
  border-color: rgb(93 93 255 / 22%);
  box-shadow: 0 16px 36px rgb(93 93 255 / 10%);
  border-radius: 24px;
  overflow: visible;
}

.about-text-box ul {
  margin-bottom: 1.2rem;
  margin-top: 0.8rem;
  padding-left: 1.5rem;
}

.page-about .about-text-box ul {
  list-style: none;
  padding-left: 0;
}

.about-text-box li {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 0.6rem;
}

.page-about .about-text-box li {
  padding-left: 24px;
  position: relative;
}

.page-about .about-text-box li::before {
  background: linear-gradient(135deg, var(--accent-color), #ff8c42);
  border-radius: 50%;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  top: 10px;
  width: 8px;
}

.page-about .about-values strong {
  background: linear-gradient(90deg, var(--accent-color), #ff8c42);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-about .about-values {
  margin-bottom: clamp(2.8rem, 5vw, 4.2rem);
  margin-top: 24px;
}

.page-about .consent-floating {
  display: none;
}


.page-about .about-timeline {
  display: grid;
  gap: 24px;
  margin: 34px 0 clamp(3.2rem, 5vw, 4.6rem);
  padding-left: 24px;
  position: relative;
}

.page-about .about-timeline::before {
  background: linear-gradient(180deg, var(--accent-color), #ff8c42);
  bottom: 6px;
  content: "";
  left: 8px;
  opacity: 0.6;
  position: absolute;
  top: 6px;
  width: 2px;
}

.page-about .timeline-item {
  display: grid;
  gap: 8px;
  padding-left: 24px;
  position: relative;
}

.page-about .timeline-item::before {
  background: linear-gradient(135deg, var(--accent-color), #ff8c42);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgb(93 93 255 / 18%);
  content: "";
  height: 12px;
  left: 2px;
  position: absolute;
  top: 6px;
  width: 12px;
}

.page-about .timeline-year {
  color: #ff8c42;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.page-about .timeline-content h3 {
  background: none;
  color: #ff8c42;
  margin: 0;
  -webkit-text-fill-color: currentcolor;
}

.page-about .timeline-content p {
  margin: 6px 0 0;
}

.page-about .timeline-mention {
  color: #ff8c42;
  display: inline-block;
  font-size: 0.92rem;
  font-style: italic;
  -webkit-text-fill-color: currentcolor;
}

.page-about .timeline-org {
  display: inline-block;
}

.page-about .timeline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.page-about .timeline-links .timeline-link {
  margin: 0;
}

.page-about .timeline-org {
  background: none;
  color: #fff;
  -webkit-text-fill-color: currentcolor;
}

.page-about .skill-group h3 {
  background: none;
  color: #79e6ff;
  -webkit-text-fill-color: currentcolor;
}

.page-about .timeline-link {
  align-items: center;
  background: rgb(93 93 255 / 15%);
  border: 1px solid rgb(93 93 255 / 45%);
  border-radius: 999px;
  color: var(--accent-color);
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 600;
  gap: 6px;
  margin: 4px 6px 0 0;
  padding: 4px 12px;
  position: relative;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.page-about .timeline-link::before {
  content: "✦";
  font-size: 0.8rem;
  opacity: 0.85;
}

.page-about .timeline-link:hover {
  background: rgb(255 140 66 / 20%);
  box-shadow: 0 10px 24px rgb(93 93 255 / 25%);
  color: #ff8c42;
  transform: translateY(-1px);
}

.page-about .skill-grid {
  display: grid;
  gap: 22px;
  margin-bottom: clamp(3.2rem, 5vw, 4.6rem);
  margin-top: 24px;
}

.page-about .skill-group {
  background: linear-gradient(140deg, rgb(10 12 24 / 55%), rgb(16 20 40 / 65%));
  border: 1px solid rgb(93 93 255 / 18%);
  border-radius: 22px;
  padding: 18px 22px;
}

.page-about .skill-group h3 {
  margin-top: 0;
}

.page-about .skill-item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.page-about .skill-item + .skill-item {
  border-top: 1px dashed rgb(93 93 255 / 22%);
}

.page-about .skill-name {
  font-weight: 600;
}

.page-about .skill-level {
  display: inline-flex;
  gap: 6px;
}

.page-about .level-dot {
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.page-about .level-dot.is-on {
  background: linear-gradient(135deg, #5d5dff, #ff8c42);
  border-color: rgb(93 93 255 / 55%);
  box-shadow: 0 0 10px rgb(93 93 255 / 45%);
}

.page-about .about-ai-tools {
  background: linear-gradient(140deg, rgb(10 12 24 / 55%), rgb(16 20 40 / 65%));
  border: 1px solid rgb(93 93 255 / 18%);
  border-radius: 22px;
  box-shadow: none;
  margin: 8px auto clamp(3.2rem, 5vw, 4.6rem);
  max-width: 760px;
  padding: 18px 22px;
}

.page-about .about-ai-tools h3 {
  background: linear-gradient(45deg, #79e6ff, #c822ff);
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-size: 1.55rem;
  margin: 0 0 12px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-about .about-ai-tools p {
  color: var(--text-color);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}

.page-about .ai-tools-grid {
  display: grid;
  gap: 0;
}

.page-about .ai-tool-item {
  display: grid;
  gap: 8px 14px;
  grid-template-columns: minmax(130px, 1fr) auto;
  padding: 12px 0;
  text-align: left;
}

.page-about .ai-tool-item + .ai-tool-item {
  border-top: 1px dashed rgb(93 93 255 / 22%);
}

.page-about .ai-tool-name {
  color: #79e6ff;
  font-size: 1rem;
  font-weight: 600;
  -webkit-text-fill-color: currentcolor;
}

.page-about .ai-tool-item p {
  grid-column: 1 / -1;
}

.page-about .process-steps {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(3.2rem, 5vw, 4.6rem);
  margin-top: 24px;
}

.page-about .process-step {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(42px, 60px) 1fr;
  padding: 16px 18px;
  background: linear-gradient(150deg, rgb(16 18 34 / 75%), rgb(22 26 44 / 85%));
  border: 1px solid rgb(93 93 255 / 18%);
  border-radius: 20px;
  box-shadow: 0 18px 45px rgb(5 8 20 / 35%);
}

.page-about .process-index {
  align-items: center;
  background: linear-gradient(135deg, rgb(93 93 255 / 30%), rgb(255 140 66 / 20%));
  border-radius: 16px;
  color: #ff8c42;
  display: inline-flex;
  font-weight: 700;
  height: 42px;
  justify-content: center;
  letter-spacing: 0.1em;
}

.page-about .process-body h3 {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  display: inline-block;
  margin: 0 0 6px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-about .process-body p {
  margin: 0 0 8px;
}

.page-about .process-meta {
  color: rgb(226 231 255 / 75%);
  font-size: 0.95rem;
}

.page-about .process-meta strong:first-of-type {
  color: #79e6ff;
}

.page-about .process-meta strong:last-of-type {
  color: #79e6ff;
}

.page-about .about-cta {
  align-items: center;
  border-top: 1px solid rgb(93 93 255 / 25%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: clamp(3rem, 5vw, 4.4rem);
  padding-top: 24px;
  text-align: center;
}

.page-about .about-cta-note {
  color: rgb(226 231 255 / 70%);
  font-size: 0.95rem;
  margin: 0;
}

.page-about .btn-download-cv {
  background: linear-gradient(135deg, #ff8c42, #5d5dff);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  box-shadow: 0 16px 40px rgb(93 93 255 / 35%);
  color: #fff;
  font-size: 1.1rem;
  gap: 12px;
  letter-spacing: 0.02em;
  padding: 14px 34px;
  text-transform: uppercase;
}

.page-about .btn-download-cv:hover {
  box-shadow: 0 22px 45px rgb(93 93 255 / 45%);
  transform: translateY(-4px);
}

.link-schools-openclassrooms,
.link-schools-studi {
  border-bottom: 2px dotted var(--accent-color);

  /* Liens vers les écoles */
  color: var(--accent-color);
  font-weight: bold; /* Style de base */
  padding-bottom: 2px;
  text-decoration: none;
  transition: all 0.3s ease; /* Soulignement pointillé et transition */
}

.link-schools-openclassrooms:hover,
.link-schools-studi:hover {
  border-bottom-style: solid;
  color: #5d5dff;
} /* Changement au survol */

/* Conteneur pour la photo de profil */
.profile-photo {
  object-fit: contain; /* Dimensions, forme, ajustement image */
  border: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: 0 5px 100px #5d5dff;
  height: 500px;
  width: 500px;
}

/* Styles "À propos" en thème clair */
[data-theme="light"] .about-text-box p {
  color: var(--accent-color);
} /* Couleur du texte en thème clair */

[data-theme="light"] .page-about main {
  background: transparent;
}

[data-theme="light"] .page-about .intro-text .profile-photo-container {
  background: linear-gradient(135deg, rgb(93 93 255 / 16%), rgb(255 102 196 / 6%));
  box-shadow: 0 10px 24px rgb(255 102 196 / 10%);
}

[data-theme="light"] .page-about .about-text-box {
  background: #fff;
  border-color: rgb(93 93 255 / 20%);
  box-shadow: 0 22px 50px rgb(93 93 255 / 18%);
}

[data-theme="light"] .page-about .about-timeline::before {
  opacity: 0.5;
}

[data-theme="light"] .page-about .timeline-item::before {
  box-shadow: 0 0 0 4px rgb(93 93 255 / 12%);
}

[data-theme="light"] .page-about .timeline-year {
  color: #ff8c42;
}

[data-theme="light"] .page-about .timeline-link:hover {
  color: #5d5dff;
}

[data-theme="light"] .page-about .timeline-link {
  background: rgb(93 93 255 / 12%);
  border-color: rgb(93 93 255 / 35%);
  color: #5d5dff;
  -webkit-text-fill-color: #5d5dff;
  background-clip: border-box;
  -webkit-background-clip: border-box;
}

[data-theme="light"] .page-about .timeline-org,
[data-theme="light"] .page-about .skill-group h3 {
  background: linear-gradient(90deg, #7f5bf4, #d654a4);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .page-about .skill-group {
  background: linear-gradient(140deg, rgb(245 246 255 / 95%), rgb(255 255 255 / 90%));
  border-color: rgb(93 93 255 / 20%);
}

[data-theme="light"] .page-about .about-ai-tools {
  background: linear-gradient(140deg, rgb(245 246 255 / 95%), rgb(255 255 255 / 90%));
  border-color: rgb(93 93 255 / 20%);
  box-shadow: 0 14px 35px rgb(93 93 255 / 18%);
}

[data-theme="light"] .page-about .skill-item + .skill-item {
  border-top-color: rgb(93 93 255 / 18%);
}

[data-theme="light"] .page-about .level-dot {
  background: rgb(93 93 255 / 18%);
  border-color: rgb(93 93 255 / 40%);
}

[data-theme="light"] .page-about .level-dot.is-on {
  background: linear-gradient(135deg, #5d5dff, #ff8c42);
  border-color: rgb(93 93 255 / 55%);
  box-shadow: 0 0 10px rgb(93 93 255 / 35%);
}

[data-theme="light"] .page-about .process-step {
  background: linear-gradient(150deg, rgb(245 246 255 / 95%), rgb(255 255 255 / 92%));
  border-color: rgb(93 93 255 / 20%);
  box-shadow: 0 14px 35px rgb(93 93 255 / 18%);
}

[data-theme="light"] .page-about .process-meta {
  color: rgb(90 98 140);
}

[data-theme="light"] .page-about .process-meta strong:first-of-type {
  color: #0f7ea8;
}

[data-theme="light"] .page-about .process-meta strong:last-of-type {
  color: #0f7ea8;
}

[data-theme="light"] .page-about .about-cta-note {
  color: rgb(90 98 140);
}

[data-theme="light"] .page-about .btn-download-cv {
  border-color: rgb(93 93 255 / 20%);
  box-shadow: 0 16px 35px rgb(93 93 255 / 22%);
}
[data-theme="light"] .link-schools-openclassrooms,
[data-theme="light"] .link-schools-studi {
  border-bottom-color: var(--accent-color);
  color: var(--accent-color);
}

[data-theme="light"] .link-schools-openclassrooms:hover,
[data-theme="light"] .link-schools-studi:hover {
  border-bottom-color: solid;
  color: #c822ff;
}

[data-theme="light"] .profile-photo {
  border-color: rgb(93 93 255 / 60%);
  box-shadow: 0 35px 80px var(--shadow-color);
}

[data-theme="light"] .profile-photo:hover {
  box-shadow: 0 35px 80px rgb(93 93 255 / 25%);
}

/* =========================
   BOUTONS
   ========================= */

/* Style de base commun pour les boutons principaux (dégradé) */
.btn,
.btn-back-home,
.btn-view-project,
.view-all-projects .btn,
.project-links a:first-child,
.contact-form button,
.project-detail .project-links a:first-child,
.project-links a {
  background: linear-gradient(45deg, var(--accent-color), rgb(0 0 0 / 20%));
  border: none;
  border-radius: 5%;
  box-shadow: 0 4px 15px rgb(0 0 0 / 20%); /* Style texte, forme, ombre */
  color: white; /* Affichage, padding, fond dégradé, couleur texte */
  cursor: pointer;
  display: inline-block;
  font-family: inherit; /* Transition, reset bordure, curseur, alignement */
  font-weight: bold;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Effet commun au survol des boutons principaux */
.btn:hover,
.btn-back-home:hover,
.btn-view-project:hover,
.view-all-projects .btn:hover,
.project-links a:first-child:hover,
.contact-form button:hover,
.project-detail .project-links a:first-child:hover {
  background: linear-gradient(
    45deg,
    #4a4aff,
    #4b75ff
  ); /* Léger déplacement, ombre accentuée, dégradé modifié */

  box-shadow: 0 7px 20px rgb(93 93 255 / 40%);
  transform: translateY(-3px);
}

/* Styles spécifiques à certains boutons */
.btn-back-home {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  padding: 5px 20px;
} /* Bouton retour accueil (avec icône potentielle) */
.view-all-projects .btn {
  font-size: 1.1rem;
  padding: 15px 30px;
} /* Bouton "Voir tous les projets" (plus grand) */

.project-view-live {
  font-weight: 700;
}
.contact-form button {
  align-self: center;
  font-size: 1.3rem;
  margin-top: 15px;
  min-width: 200px;
  overflow: hidden;
  padding: 8px 25px;
  position: relative;
} /* Bouton envoyer formulaire */
.contact-submit-text {
  position: relative;
  z-index: 1;
}
.contact-form button::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 255 255 / 20%),
    transparent
  );
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transition: left 0.5s ease;
  width: 100%;
} /* Effet "shine" au survol */
.contact-form button:hover::before {
  left: 100%;
}

/* Style spécifique pour les liens GitHub (style secondaire) */
.project-links a.github-link {
  background-color: transparent;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
}

/* Style spécifique lien GitHub dans la page détail projet */
.project-detail .project-links a.github-link {
  background-color: rgb(35 36 54 / 80%);
  border: 2px solid var(--accent-color);
  color: #fff;
}

/* Effet survol commun pour les liens de projet (y compris GitHub) */
.project-links a:hover,
.project-detail .project-links a:hover {
  box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
  transform: translateY(-3px);
}

/* Bouton "Scroll to Top" (remonter en haut) */
.scroll-to-top {
  align-items: center; /* Bordure, forme, centrage icône */
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
  border-radius: 50%;
  bottom: 50px;
  box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
  color: white; /* Positionnement, dimensions, couleurs */
  cursor: pointer;
  display: flex;
  height: 40px;
  justify-content: center;
  opacity: 0;
  padding: 0; /* Curseur, caché par défaut, transition, empilement, ombre */
  position: fixed;
  right: 40px;
  transition: all 0.3s ease;
  width: 40px;
  z-index: 1000;
}

.scroll-to-top svg {
  fill: currentcolor;
  height: 30px;
  width: 30px;
} /* Icône flèche */
.scroll-to-top:hover {
  background: #c822ff;
  box-shadow: 0 6px 15px rgb(93 93 255 / 40%);
  color: white;
  transform: translateY(-5px);
} /* Effet au survol */

/* Scroll to top en thème clair */
[data-theme="light"] .scroll-to-top {
  background: var(--accent-color);
  border-color: #c822ff;
  box-shadow: 0 4px 10px var(--shadow-color);
  color: white;
}

[data-theme="light"] .scroll-to-top:hover {
  background: #5d5dff;
  border-color: #c822ff;
  box-shadow: 0 6px 15px rgb(93 93 255 / 30%);
  color: white;
}

/* =========================
   Carousel Inspirations - Styles améliorés
   ========================= */

/* --- Carousel amélioré --- */
.carousel-container {
  background: none;
  margin: 0 auto 3.5rem;
  max-width: 1100px;
  overflow: hidden;
  padding: 0 1rem;
  position: relative;
  width: 100%;
}

.carousel-track {
  animation: scroll-carousel 8s linear infinite; /* Plus rapide */
  display: flex;
  gap: 2rem;
  will-change: transform;
}

@keyframes scroll-carousel {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.carousel-item {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgb(0 0 0 / 7%);
  cursor: pointer;
  display: block;
  flex: 0 0 320px;
  margin-bottom: 0.5rem;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.carousel-item img {
  object-fit: cover;
  border-radius: 16px;
  display: block;
  height: 520px;
  transition: filter 0.2s;
  width: 100%;
}

.carousel-item:hover {
  box-shadow: 0 8px 32px rgb(0 0 0 / 13%);
  transform: scale(1.05);
}

@media (width <= 900px) {
  .carousel-item {
    flex: 0 0 60vw;
  }

  .carousel-item img {
    height: 210px;
  }
}

@media (width <= 600px) {
  .carousel-item {
    flex: 0 0 80vw;
  }

  .carousel-item img {
    height: 160px;
  }
}

/* --- Espacement général et sections inspirations --- */
.inspirations-main {
  background: transparent;
  padding: 0 0 4rem;
}

.inspirations-hero {
  color: #0288d1;
  margin-bottom: 3.5rem;
}

.inspirations-hero .hero-bg {
  border-radius: 0;
  box-shadow: 0 18px 50px rgb(0 0 0 / 18%);
  display: flex;
  align-items: center;
  margin: 0 auto;
  max-width: 1200px;
  min-height: 420px;
  overflow: hidden;
  position: relative;
}

.inspirations-hero .hero-overlay {
  background: linear-gradient(120deg, rgb(7 12 32 / 65%), rgb(2 136 209 / 25%));
  inset: 0;
  position: absolute;
}

.inspirations-hero .hero-content {
  align-items: center;
  color: #f3f6ff;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin: 0 auto;
  max-width: 100%;
  padding: 3.5rem 3rem 3rem;
  position: relative;
  text-align: center;
  z-index: 1;
}

.inspirations-hero .hero-eyebrow {
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 999px;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: 0.12rem;
  margin: 0;
  padding: 0.7rem 2rem;
  text-transform: uppercase;
}

.inspirations-hero h1 {
  color: #fff;
  font-size: 2.8rem;
  margin-bottom: 0;
}

.inspirations-hero .hero-lead {
  color: rgb(240 248 255 / 90%);
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0;
}

.inspirations-hero .hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.inspirations-hero .btn-explore {
  background: linear-gradient(120deg, #0288d1, #4fc3f7);
  border-radius: 999px;
  box-shadow: 0 10px 20px rgb(0 0 0 / 22%);
  color: #fff;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.65rem 1.8rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inspirations-hero .btn-explore:hover {
  box-shadow: 0 14px 26px rgb(0 0 0 / 28%);
  transform: translateY(-2px);
}

.inspirations-hero .ghost-link {
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 999px;
  color: #fff;
  font-size: 0.95rem;
  padding: 0.6rem 1.6rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.inspirations-hero .ghost-link:hover {
  background: rgb(255 255 255 / 18%);
  transform: translateY(-2px);
}

.inspirations-hero .hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.inspirations-hero .hero-badges li {
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 12px;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.45rem 0.75rem;
}

.inspirations-subnav {
  align-items: center;
  border-bottom: 1px solid rgb(2 136 209 / 12%);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
  margin: 0 auto 3rem;
  max-width: 1200px;
  padding: 0.8rem 1rem 1.2rem;
}

.inspirations-subnav a {
  border-bottom: 2px solid transparent;
  color: #2d3a4a;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.inspirations-subnav a:hover {
  border-color: #0288d1;
  color: #0288d1;
}

.inspirations-feed {
  margin: 0 auto 3.5rem;
  max-width: 1200px;
  padding: 0 1.5rem;
}

.section-header {
  margin-bottom: 2rem;
  text-align: center;
}

.section-eyebrow {
  color: #0288d1;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18rem;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.section-lead {
  color: #2d3a4a;
  font-size: 1.1rem;
  margin: 0.5rem auto 0;
  max-width: 720px;
}

.inspiration-filters-label {
  color: #efe7ff;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  margin: 0 auto 0.9rem;
  text-align: center;
  text-transform: uppercase;
}

.inspiration-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1rem;
  margin-top: 2.4rem;
}

.inspiration-grid {
  margin-top: 3rem;
}

.filter-chip {
  background: #fff;
  border: 1px solid rgb(2 136 209 / 25%);
  border-radius: 999px;
  color: #2d3a4a;
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.45rem 1.2rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.filter-chip:hover {
  transform: translateY(-2px);
}

.filter-chip.is-active {
  background: linear-gradient(120deg, #0288d1, #4fc3f7);
  border-color: transparent;
  color: #fff;
}

.filter-summary {
  color: #5d5dff;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.inspiration-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.inspiration-detail {
  margin: 0 auto;
  max-width: 1100px;
  padding: 4rem 1.5rem 5rem;
}

.detail-hero {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 18px 40px rgb(0 0 0 / 14%);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.detail-hero-media {
  overflow: hidden;
  position: relative;
}

.detail-hero-image {
  display: block;
  height: 420px;
  object-fit: cover;
  transform: translate(var(--pan-x, 0), var(--pan-y, 0)) scale(var(--zoom, 1));
  transform-origin: center;
  transition: transform 0.2s ease;
  width: 100%;
}

.detail-hero-image.is-zoomed {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.detail-hero-image.is-zoomed:active {
  cursor: grabbing;
}

.detail-zoom {
  align-items: center;
  backdrop-filter: blur(6px);
  background: rgb(20 20 35 / 60%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  bottom: 16px;
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  position: absolute;
  right: 16px;
}

.detail-zoom-button {
  background: transparent;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  height: 22px;
  line-height: 1;
  width: 26px;
}

.detail-zoom-button:hover {
  background: rgb(255 255 255 / 15%);
}

.detail-zoom-slider {
  accent-color: #fff;
  height: 4px;
  width: 90px;
}

.detail-zoom-value {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 42px;
  text-align: right;
}

.detail-hero-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2rem 2.5rem 2.5rem;
}

.detail-eyebrow {
  color: #0288d1;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  margin: 0;
  text-transform: uppercase;
}

.detail-hero h1 {
  color: #5d5dff;
  font-size: 2.4rem;
  margin: 0;
}

.detail-lead {
  color: #4b5c72;
  font-size: 1.1rem;
  margin: 0;
}

.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 1rem;
}

.detail-hero-content .detail-links {
  margin-top: auto;
}

.detail-links a {
  color: #0288d1;
  font-weight: 600;
  text-decoration: none;
}

.detail-links a:hover {
  text-decoration: underline;
}

.detail-eyebrow {
  margin: 0;
}

.detail-eyebrow .flag-emoji {
  font-size: 1.35em;
}

.card-tag .flag-emoji {
  font-size: 1.2em;
}
.detail-eyebrow-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.detail-eyebrow-row .like-reaction-picker {
  display: flex;
  flex: 0 1 100%;
  justify-content: center;
  max-width: 100%;
}

.detail-eyebrow-row .like-reaction-trigger {
  max-width: 100%;
}

.detail-tags {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.detail-tags span {
  background: rgb(2 136 209 / 12%);
  border-radius: 999px;
  color: #0288d1;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
}

.detail-body {
  display: grid;
  gap: 0;
  margin-top: 0;
}

.detail-section {
  background: linear-gradient(120deg, rgb(7 12 32 / 65%), rgb(2 136 209 / 25%));
  border-radius: 0;
  box-shadow: 0 10px 24px rgb(0 0 0 / 8%);
  padding: 1.6rem 1.8rem;
}

.detail-section h2 {
  color: #fff;
  font-size: 1.4rem;
  margin: 0 0 0.6rem;
}

.detail-section p {
  color: rgb(240 248 255 / 90%);
  font-size: 1rem;
  margin: 0;
}

.detail-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.5rem;
}

.detail-nav {
  align-items: center;
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  margin: 0;
}

.detail-nav-link {
  align-items: center;
  background: transparent;
  border: 1px solid rgb(2 136 209 / 35%);
  border-radius: 999px;
  color: #0288d1;
  box-shadow: 0 10px 20px rgb(0 0 0 / 18%);
  display: inline-flex;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.detail-nav-link:hover {
  box-shadow: 0 8px 18px rgb(93 93 255 / 25%);
  transform: translateY(-2px);
}

.detail-nav-link .nav-arrow {
  font-size: 1.1rem;
}

.detail-back,
.detail-cta {
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.6rem 1.6rem;
  text-decoration: none;
}

.detail-back {
  align-items: center;
  background: transparent;
  border: 1px solid rgb(2 136 209 / 35%);
  box-shadow: 0 10px 20px rgb(0 0 0 / 18%);
  color: #0288d1;
  display: inline-flex;
  gap: 0.5rem;
}

.detail-cta {
  background: linear-gradient(120deg, #0288d1, #4fc3f7);
  box-shadow: 0 10px 20px rgb(0 0 0 / 18%);
  color: #fff;
}

.detail-back:hover,
.detail-cta:hover {
  transform: translateY(-2px);
}

@media (width >= 900px) {
  .detail-hero {
    grid-template-columns: 1.1fr 1fr;
  }

  .detail-hero-image {
    height: 100%;
  }
}

@media (width <= 600px) {
  .detail-hero h1 {
    font-size: 2rem;
  }

  .detail-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.inspiration-card {
  background: transparent;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 8%);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.inspiration-card .card-media {
  aspect-ratio: 4 / 5;
  background: linear-gradient(145deg, rgb(255 248 240 / 65%), rgb(224 210 185 / 70%));
  border: 2px solid rgb(176 146 104 / 70%);
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 30%),
    inset 0 0 24px rgb(120 88 48 / 30%);
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  width: 100%;
}

.inspiration-card:hover {
  box-shadow: 0 16px 36px rgb(0 0 0 / 14%);
  transform: translateY(-6px);
}

.inspiration-card.is-hidden {
  display: none;
}

.card-media {
  position: relative;
}

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

.inspiration-card {
  border: 3px solid rgb(176 146 104 / 75%);
  box-shadow: 0 18px 36px rgb(0 0 0 / 18%);
  padding: 8px;
}

.card-tag {
  background: rgb(2 136 209 / 90%);
  border-radius: 999px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  left: 16px;
  padding: 0.3rem 0.7rem;
  position: absolute;
  top: 16px;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.2rem 1.3rem 1.5rem;
}

.card-body h3 {
  color: #0288d1;
  font-size: 1.2rem;
  margin: 0;
}

.card-body p {
  color: #2d3a4a;
  font-size: 0.98rem;
  margin: 0;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card-meta span {
  background: rgb(2 136 209 / 10%);
  border-radius: 999px;
  color: #0288d1;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
}

.card-link {
  color: #5d5dff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

.inspirations-story {
  margin: 0 auto 2.5rem;
  max-width: 980px;
  padding: 0 1rem 2.5rem;
  text-align: center;
}

.inspirations-story h2 {
  color: #0288d1;
  margin-bottom: 1.2rem;
}

.inspirations-story p {
  color: #5d5dff;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.inspirations-gallery {
  color: #0288d1;
  margin: 0 auto 3.5rem;
  max-width: 1100px;
  padding: 0 1rem;
}

.inspirations-gallery h2 {
  font-family: var(--font-title);
  font-size: 2rem;
  margin-bottom: 5rem;
  text-align: center;
}

/* --- Bloc citation/voyage --- */
.inspirations-quote {
  margin: 3.5rem auto 2.5rem;
  max-width: 700px;
  text-align: center;
}

.inspirations-quote blockquote {
  background: #f0f6fa;
  border-left: 5px solid #4fc3f7;
  border-radius: 12px;
  color: #2d3a4a;
  font-size: 1.3rem;
  font-style: italic;
  margin: 0;
  padding: 1.5rem 2rem;
}

.inspirations-quote footer {
  color: #6c7a89;
  font-size: 1rem;
  margin-top: 1rem;
}

.story-placeholder {
  margin-top: 5rem;
  text-align: center;
}

.story-placeholder h3 {
  color: #0288d1;
  font-family: var(--font-title);
  font-size: 1.4rem;
  margin: 0;
}

/* --- Bloc partage inspiration stylisé --- */
.inspirations-share {
  background: linear-gradient(90deg, #e3f2fd 60%, #fff 100%);
  border: 2px solid #4fc3f7;
  border-radius: 22px;
  box-shadow: 0 4px 24px rgb(0 0 0 / 8%);
  margin: 4rem auto 2.5rem;
  max-width: 700px;
  padding: 2.5rem;
  position: relative;
  text-align: center;
}

.inspirations-share h3 {
  color: #0288d1;
  font-family: var(--font-title);
  font-size: 1.5rem;
  letter-spacing: 1px;
  margin-bottom: 1.2rem;
}

.inspirations-share p {
  color: #444;
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}

.inspirations-share .btn-explore {
  background: linear-gradient(90deg, #4fc3f7 60%, #0288d1 100%);
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top: 0.5rem;
  padding: 0.9rem 2.5rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.inspirations-share .btn-explore:hover {
  background: linear-gradient(90deg, #0288d1 60%, #4fc3f7 100%);
  box-shadow: 0 6px 24px rgb(0 0 0 / 13%);
  color: #fff;
  transform: translateY(-2px) scale(1.04);
}

.inspirations-cover {
  margin: 0 0 3.5rem;
  max-width: none;
  padding: 0;
  width: 100%;
}

.cover-image-wrapper {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  max-width: none;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.cover-image {
  border-radius: 0;
  display: block;
  filter: brightness(0.98) saturate(1.05);
  height: auto;
  width: 100%;
}

.cover-caption {
  background: linear-gradient(
    0deg,
    rgb(0 0 0 / 55%) 70%,
    rgb(0 0 0 / 8%) 100%
  );
  border-radius: 0 0 22px 22px;
  bottom: 0;
  color: #fff;
  left: 0;
  padding: 2rem 1.5rem 1.2rem;
  position: absolute;
  text-align: left;
  width: 100%;
}

.cover-caption h2 {
  font-family: var(--font-title);
  font-size: 2rem;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.cover-caption p {
  color: #e3f2fd;
  font-size: 1.15rem;
  margin: 0;
}

.travel-story-content {
  background: #f7fafd68;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgb(0 0 0 / 7%);
  margin: 2rem auto 0;
  max-width: 800px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: box-shadow 0.2s;
}

.story-block h3 {
  color: #0288d1;
  font-family: var(--font-title);
  margin-bottom: 0.7rem;
}

.story-block p {
  color: #444;
  font-size: 1.15rem;
}

@media (width <= 900px) {
  .inspirations-main {
    padding: 0 24px 3.5rem;
  }

  .inspirations-cover {
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
  }

  .inspirations-hero .hero-bg {
    border-radius: 0;
  }

  .inspirations-hero .hero-content {
    padding: 3rem 2rem 2.5rem;
  }

  .inspirations-hero h1 {
    font-size: 1.85rem;
  }

  .inspirations-subnav {
    gap: 0.8rem;
  }

  .section-header {
    text-align: center;
  }

  .inspiration-filters {
    justify-content: center;
  }

  .filter-summary {
    text-align: center;
  }
}

@media (width <= 600px) {
  .inspirations-main {
    padding: 0 16px 3rem;
  }

  .inspirations-cover {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }

  .inspirations-hero .hero-bg {
    border-radius: 0;
  }

  .inspirations-hero .hero-content {
    padding: 2.5rem 1.6rem 2.2rem;
  }

  .inspirations-hero .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .inspirations-hero .ghost-link {
    text-align: center;
  }
}

/* =========================
   PROJETS (Grille, Aperçu, Détail)
   ========================= */

/* Grille principale des projets (page projets) */
.projects-grid {
  display: grid;
  background: linear-gradient(135deg, rgb(93 93 255 / 10%), rgb(200 34 255 / 12%));
  border: 1px solid rgb(93 93 255 / 25%);
  border-radius: 28px;
  box-shadow: 0 20px 45px rgb(0 0 0 / 30%);
  gap: 34px;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin: 0 auto;
  max-width: 1320px;
  padding: 42px;
}

/* Effet Parallaxe */
.parallax-container {
  border-radius: 0%;
  height: 200px;
  overflow: hidden;
  position: relative;
} /* Conteneur */
.parallax-image {
  object-fit: cover;
  height: 250%;
  left: -25%;
  position: absolute;
  top: -25%;
  transition: transform 0.2s ease-out;
  width: 150%;
} /* Image plus grande pour effet */

/* Carte individuelle de projet */
.project-card {
  background-color: rgb(30 31 47 / 65%);
  border: 1px solid rgb(93 93 255 / 22%);
  border-radius: 15px;
  box-shadow: 0 8px 20px var(--shadow-color); /* Style de la carte */
  display: flex;
  flex-direction: column; /* Transition, hauteur, flex pour contenu */
  height: 100%;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  box-shadow: 0 15px 40px rgb(93 93 255 / 30%);
  transform: translateY(-10px);
} /* Effet au survol */
.project-card img {
  object-fit: contain;
  border-bottom: 3px solid transparent;
  height: 300px;
}

/* Image de la carte */
.project-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  padding: 20px;
} /* Zone de texte de la carte */
.project-info h3 {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  font-family: var(--font-title);
  font-size: 2.1rem;
  font-weight: bold;
  margin: 0 0 15px;
  text-decoration: none;
  transition: transform 0.3s;
} /* Titre */
.project-info p {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom: 20px;
} /* Description */
.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
} /* Technologies (tags) */
.project-tech span {
  background: transparent;
  border: 1px solid rgb(93 93 255 / 30%);
  border-radius: 15%;
  color: var(--text-color);
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 5px 10px;
} /* Style des tags */
.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-bottom: auto;
  margin-bottom: 30px;
  margin-top: auto;
}

/* Conteneur des liens (en bas) */
.project-links a {
  border-radius: 5%;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  min-width: 120px;
  padding: 10px 20px;
  text-decoration: none;
} /* Style des liens dans la carte */

#projects .title-banner,
#projects .project-info h3,
#projects .project-info p,
#projects .project-links a {
  background-image: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#projects .project-tech span,
.project-detail .project-tech span {
  display: inline-flex;
  align-items: center;
}

.project-detail h1,
.project-detail h2,
.project-detail h3,
.project-detail h4,
.project-detail p,
.project-detail li,
.project-detail .project-links a:not(.btn-live):not(.btn-github):not(.btn-view-code) {
  background-image: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#projects .project-tech span,
.project-detail .project-tech span {
  background: transparent;
  color: #5d5dff;
  -webkit-text-fill-color: initial;
}

/* Grille d'aperçu des projets (page d'accueil) */
.project-preview-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, 1fr);
  margin: 40px auto;
  max-width: 1200px;
  padding: 20px;
} /* Grille 2 colonnes */

/* Aperçu individuel */
.project-preview {
  border-radius: 15%;
  box-shadow: 0 10px 30px var(--shadow-color);
  height: 350px;
  overflow: hidden;
  position: relative;
  transition: all 0.5s ease;
} /* Conteneur avec image */
.project-preview:hover {
  box-shadow: 0 20px 40px rgb(93 93 255 / 40%);
  transform: translateY(-10px);
} /* Effet survol conteneur */
.project-preview img {
  object-fit: cover;
  height: 100%;
  transition: all 0.8s ease;
  width: 100%;
} /* Image */
.project-preview:hover img {
  filter: brightness(0.7) blur(2px);
  transform: scale(1.1);
} /* Effet survol image (zoom, assombrissement, flou) */
.project-preview-overlay {
  align-items: center;
  background: linear-gradient(
    to top,
    rgb(35 36 54 / 90%),
    transparent
  ); /* Positionnement, fond dégradé */

  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%; /* Centrage contenu */
  justify-content: center;
  left: 0;
  opacity: 0; /* Caché en bas, transition complexe, invisible */
  padding: 30px 20px 20px;

  /* Overlay qui apparaît au survol */
  position: absolute;
  right: 0;
  transform: translateY(100%);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.project-preview:hover .project-preview-overlay {
  opacity: 1;
  transform: translateY(0);
} /* Affichage de l'overlay au survol */
.project-preview-overlay h3 {
  color: white;
  font-size: 1.8rem;
  margin-bottom: 20px;
  opacity: 0;
  text-align: center;
  text-shadow: 0 2px 10px rgb(0 0 0 / 50%);
  transform: translateY(20px);
  transition: all 0.5s ease 0.1s;
} /* Titre dans l'overlay (animation) */
.project-preview:hover .project-preview-overlay h3 {
  opacity: 1;
  transform: translateY(0);
} /* Animation titre au survol */
.btn-view-project {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease 0.2s;
} /* Bouton dans l'overlay (animation) */
.project-preview:hover .btn-view-project {
  opacity: 1;
  transform: translateY(0);
} /* Animation bouton au survol */

/* Bouton "Voir tous les projets" */
.view-all-projects {
  margin: 50px 0;
  text-align: center;
}

/* Page de détail d'un projet */
.project-detail {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espace entre les sections */
  margin: 70px auto 0; /* Centrage automatique avec auto */
  max-width: 900px;
  padding: 20px;
}

.project-hero {
  border: 1px solid rgb(93 93 255 / 30%);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgb(0 0 0 / 35%);
  height: 420px;
  margin-bottom: 40px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.project-hero img {
  filter: saturate(1.05) contrast(1.05);
  object-position: center;
  object-fit: cover;
  display: block;
  height: 100%;
  transition: transform 0.8s ease, filter 0.8s ease;
  width: 100%;
} /* Style image */
.project-hero:hover img {
  filter: saturate(1.2) contrast(1.1);
  transform: scale(1.08);
} /* Effet zoom sur image */
.project-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(93 93 255 / 18%), rgb(200 34 255 / 18%));
  mix-blend-mode: screen;
  opacity: 0.6;
  transition: opacity 0.6s ease;
  z-index: 1;
}

.project-hero:hover::before {
  opacity: 0.85;
}

.project-hero::after {
  bottom: 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 100%;
} /* Ligne colorée sous l'image */

.project-hero--focus-top img {
  object-position: center top;
}
.project-content {
  background: #34365400;
  border: 1px solid transparent;
  border-radius: 15px;
  box-shadow: 0 8px 30px var(--shadow-color);
  margin-bottom: 40px;
  padding: 30px;
} /* Conteneur du contenu du projet */
.project-content p {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  font-size: 1.3rem; /* Taille du texte */
  line-height: 1.7;
  margin-bottom: 50px;
  margin-top: 50px;
  text-align: center;
} /* Paragraphes */
.project-content h4 {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  border-bottom: 2px solid rgb(93 93 255 / 20%);
  color: transparent;
  font-size: 1.5rem;
  margin-top: 20px;
  padding-bottom: 30px;
} /* Sous-titres */

.project-content h4,
.project-content p,
.project-content li,
.project-content strong,
.project-content a {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project-detail .project-links a {
  background: none;
  color: white;
  -webkit-text-fill-color: initial;
}
.project-detail .project-tech {
  justify-content: center;
  margin: 20px 0;
} /* Technologies centrées */
.project-detail .project-links {
  justify-content: center;
  margin: 25px 0;
} /* Liens centrés */
.project-detail .project-links a {
  box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
  font-size: 1rem;
  min-width: 150px;
  padding: 8px 25px;
} /* Style des liens */

.project-detail .project-links .btn-back-projects {
  background: transparent;
  border: 1px solid rgb(200 34 255 / 45%);
  color: var(--text-color);
  position: relative;
}

.project-detail .project-links .btn-back-projects:hover {
  box-shadow: 0 8px 18px rgb(93 93 255 / 25%);
  transform: translateY(-2px);
}

.project-detail .project-links .btn-live {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  color: white;
  position: relative;
}

.project-detail .project-links .btn-live:hover {
  box-shadow: 0 10px 24px rgb(93 93 255 / 35%);
  transform: translateY(-2px);
}

.project-detail .project-links .btn-github,
.project-detail .project-links .btn-view-code {
  background: linear-gradient(135deg, rgb(20 20 35 / 90%), rgb(60 60 90 / 90%));
  border: 1px solid rgb(93 93 255 / 35%);
  color: #f3f0ff;
}

.project-detail .project-links .btn-github:hover,
.project-detail .project-links .btn-view-code:hover {
  box-shadow: 0 10px 22px rgb(60 60 120 / 40%);
  transform: translateY(-2px);
}

/* Navigation entre projets (Précédent/Suivant) */
.project-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Ajout wrap et gap pour responsive */
  justify-content: space-between;
  margin: 40px 0;
}

.prev-project,
.next-project {
  align-items: center;
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  border-radius: 5%;
  box-shadow: 0 4px 15px rgb(0 0 0 / 20%);
  color: transparent;
  cursor: pointer; /* Ajout d'un curseur main */
  display: inline-flex;
  font-size: 0.9rem; /* Optionnel: Augmenter la taille de la police */
  font-weight: bold;
  gap: 12px; /* Légèrement augmenté l'espace */
  overflow: hidden;
  padding: 8px 20px; /* Augmenté le padding vertical et horizontal */
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease;
  z-index: 1;
}

.prev-project::before,
.next-project::before {
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s ease;
  width: 100%;
  z-index: -1;
}

.prev-project:hover,
.next-project:hover {
  box-shadow: 0 6px 20px rgb(93 93 255 / 50%);
  color: white;
  transform: translateY(-3px);
}

.prev-project:hover::before,
.next-project:hover::before {
  opacity: 1;
}

.prev-project svg,
.next-project svg {
  fill: currentcolor;
  flex-shrink: 0; /* Empêche le SVG de rétrécir */
  height: 22px; /* Optionnel: Augmenter la taille de l'icône */
  width: 22px; /* Optionnel: Augmenter la taille de l'icône */
}

/* Galerie d'images du projet */
.project-gallery {
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 40px;
  margin-top: 40px;
  overflow: visible;
  padding: 0;
} /* Conteneur galerie */
.project-gallery:hover {
  box-shadow: none;
} /* Effet survol galerie */
.gallery-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 25px;
} /* Grille responsive */
.gallery-item {
  align-items: center; /* Centrage vertical */
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex; /* Ajout pour centrer l'image */
  height: 220px; /* Image individuelle */
  justify-content: center; /* Centrage horizontal */
  overflow: visible;
  transition: all 0.3s ease;
}

/* Effet survol image */
.gallery-item:hover {
  border: none;
  box-shadow: none;
  transform: none;
}

.gallery-item img {
  object-fit: contain;
  height: 100%;
  padding: 0;
  transition: transform 0.5s ease;
  width: 100%;
} /* Style image (contain pour voir toute l'image) */

.gallery-item:hover img {
  transform: scale(1.35);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover img {
    transform: scale(1.55);
  }
}

/* Carrousel */
.carousel-container {
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.7s ease;
  will-change: transform;
}

.carousel-item {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: 0 auto;
  min-height: 50%;
  min-width: 50%;
  padding: 20px;
}

.carousel-item .project-preview {
  height: 280px;
}

.carousel-item .project-preview img {
  object-fit: contain;
  height: 100%;
}

.carousel-controls {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin: 20px 0;
}

.carousel-btn {
  align-items: center;
  background-color: #5d5dff;
  border: 2px solid var(--accent-color);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
  color: white;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  height: 40px;
  justify-content: center;
  transition: background-color 0.3s;
  width: 40px;
}

.carousel-btn:hover {
  background-color: #c822ff;
  transform: scale(1.05);
}

.carousel-btn:focus {
  box-shadow: 0 0 0 3px rgb(52 152 219 / 30%);
  outline: none;
}

/* Styles Projets en thème clair */
[data-theme="light"] .project-card {
  background-color: var(--card-bg);
  border-color: var(--accent-color);
  box-shadow: 0 8px 20px var(--shadow-color);
}

[data-theme="light"] .project-info p {
  color: var(--accent-color);
}

[data-theme="light"] .project-tech span {
  background: rgb(93 93 255 / 20%);
  border-color: rgb(93 93 255 / 30%);
  box-shadow: 0 2px 5px rgb(93 93 255 / 10%);
  color: var(--accent-color);
}

[data-theme="light"] .project-preview {
  box-shadow: 0 10px 30px var(--shadow-color);
}

[data-theme="light"] .project-preview:hover {
  box-shadow: 0 20px 40px rgb(93 93 255 / 25%);
}

[data-theme="light"] .project-preview-overlay {
  background: linear-gradient(to top, rgb(240 238 255 / 80%), transparent);
}

[data-theme="light"] .project-preview-overlay h3 {
  color: var(--accent-color);
  text-shadow: 0 1px 3px rgb(0 0 0 / 10%);
}

[data-theme="light"] .project-info h3 {
  color: var(--accent-color);
  font-size: 1.5rem;
  margin: 0 0 15px;
}

[data-theme="light"] .project-content {
  background-color: var(--card-bg);
  border-left-color: var(--accent-color);
  box-shadow: 0 8px 25px var(--shadow-color);
}

[data-theme="light"] .project-content p {
  color: var(--accent-color);
}

[data-theme="light"] .project-content h4 {
  border-bottom-color: rgb(93 93 255 / 20%);
  color: var(--accent-color);
}

[data-theme="light"] .project-gallery {
  background: transparent;
  box-shadow: none;
}

[data-theme="light"] .gallery-item {
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-theme="light"] .gallery-item:hover {
  border: none;
  box-shadow: none;
}

[data-theme="light"] .project-navigation a {
  background-color: var(--card-bg);
  border-color: rgb(93 93 255 / 30%);
  box-shadow: 0 4px 10px var(--shadow-color);
  color: #5d5dff;
}

[data-theme="light"] .project-navigation a:hover {
  background-color: #f0f4ff;
  border-color: var(--accent-color);
  box-shadow: 0 6px 15px rgb(93 93 255 / 20%);
  color: #5d5dff;
}

/* MODIFIÉ: Cible les nouvelles classes */
[data-theme="light"] .project-navigation .prev-project,
[data-theme="light"] .project-navigation .next-project {
  background-color: var(--card-bg);
  border-color: #c822ff;
  box-shadow: 0 4px 10px var(--shadow-color);
  color: var(--accent-color);
}

/* MODIFIÉ: Cible les nouvelles classes */
[data-theme="light"] .project-navigation .prev-project:hover,
[data-theme="light"] .project-navigation .next-project:hover {
  background-color: #f0f4ff;
  border-color: var(--accent-color);
  box-shadow: 0 6px 15px rgb(93 93 255 / 20%);
}

[data-theme="light"] .carousel-btn {
  background-color: #c822ff;
  border: 2px solid var(--accent-color);
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  color: white;
}

[data-theme="light"] .carousel-btn:hover {
  background-color: #5d5dff;
  box-shadow: 0 4px 10px rgb(93 93 255 / 20%);
}

/* =========================
   COMPÉTENCES (Skills) -
   ========================= */
.skills-section {
  margin: 0 auto 200px;
  max-width: 1400px;
  padding: 0 20px;
  width: 100%;
}

.skills-categories {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(5, minmax(128px, 1fr));
  margin: 0 auto;
  max-width: 980px;
  padding: 30px 0;
  place-items: stretch center;
  width: 100%;
}

.skills-category {
  display: contents;
}

:root:not([data-theme="light"]) .home-page .skills-category {
  background-color: rgb(16 18 26 / 70%);
  border: 1px solid rgb(43 16 82 / 35%);
  box-shadow: 0 14px 35px rgb(0 0 0 / 35%);
}

.skills-category:hover {
  transform: none;
}

.category-title {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  font-family: var(--font-title);
  display: none;
}

.skills-grid {
  display: contents;
}

.skill {
  align-items: center;
  border: 1px solid rgb(93 93 255 / 22%);
  border-radius: 14px;
  box-shadow: 0 6px 14px rgb(0 0 0 / 15%);
  display: flex;
  flex-direction: column-reverse;
  gap: 18px;
  margin: 0 auto;
  max-width: 150px;
  min-height: 128px;
  overflow: visible;
  padding: 12px 8px;
  transition: all 0.3s ease;
  width: 100%;
}

:root:not([data-theme="light"]) .home-page .skill {
  background-color: rgb(11 40 76 / 18%);
  border-color: rgb(43 16 82 / 35%);
  box-shadow: 0 8px 18px rgb(0 0 0 / 25%);
}

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

.skill-icon {
  align-items: center;
  background-color: var(--skill-icon-bg);
  border: 2px solid transparent;
  border-image: linear-gradient(45deg, var(--accent-color), #c822ff) 1;
  border-radius: 10px;
  box-shadow: 0 4px 10px var(--shadow-color);
  display: flex;
  height: 48px;
  justify-content: center;
  margin-bottom: 0;
  padding: 4px;
  transition: all 0.3s ease;
  width: 48px;
}

.skill img {
  object-fit: contain;
  height: 32px;
  transition: transform 0.3s ease;
  width: 32px;
}

.skill p {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  display: block;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  max-width: calc(100% - 0.44em);
  overflow-wrap: anywhere;
  overflow: visible;
  padding: 0.06em 0.22em 0;
  text-align: center;
  white-space: normal;
}

/* Styles Compétences en thème clair */
[data-theme="light"] .skills-category {
  background-color: var(--card-bg);
  border-top-color: var(--accent-color);
  box-shadow: 0 8px 20px var(--shadow-color);
}

[data-theme="light"] .category-title {
  color: var(--accent-color);
} /* Correction: var(--accent-color) et non var (--accent-color) */
[data-theme="light"] .category-title::after {
  background: var(--accent-color);
}

[data-theme="light"] .skill-icon {
  background-color: var(--skill-icon-bg);
  border-color: var(--accent-color);
  box-shadow: 0 4px 10px var(--shadow-color);
}

[data-theme="light"] .skill:hover .skill-icon {
  background-color: #f0f4ff;
  box-shadow: 0 8px 15px rgb(93 93 255 / 20%);
}

[data-theme="light"] .skill p {
  color: var(--accent-color);
}

/* =========================
   CONTACT
   ========================= */
.contact-form {
  /* Formulaire de contact */
  background: rgb(0 0 0 / 0%);
  border-radius: 10px;
  box-shadow: 0 10px 30px var(--shadow-color);
  margin: 30px auto;
  max-width: 600px;
  padding: 30px 40px;
  transition: all 0.5s ease; /* Forme, padding, marges, largeur max, transition */
}

.contact-form:hover {
  box-shadow: 0 15px 40px rgb(93 93 255 / 30%);
  transform: translateY(-5px);
} /* Effet survol */
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 20px;
} /* Structure interne formulaire */
.form-group {
  display: flex;
  flex-direction: column;
  text-align: left;
} /* Groupe label + input */
.contact-form label {
  align-items: center;
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  display: flex;
  font-size: 1.3rem;
  font-weight: 600;
  gap: 8px;
  margin-bottom: 10px;
  text-decoration: none;
  transition: transform 0.3s;
} /* Style des labels */
.contact-form label svg {
  fill: var(--accent-color);
  height: 18px;
  width: 18px;
} /* Icône dans le label */
.contact-form input:not([type="checkbox"]),
.contact-form textarea {
  background: rgb(11 40 76 / 22%);
  border: 2px solid rgb(43 16 82 / 45%);
  border-radius: 10px;
  color: var(--text-color);
  caret-color: var(--text-color);
  font-family: inherit;
  font-size: 16px;

  /* Champs de saisie */
  padding: 15px;
  resize: vertical; /* Autorise l'extension verticale du message */
  transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  background: rgb(11 40 76 / 32%);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgb(93 93 255 / 30%);
  outline: none;
} /* Style au focus */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-color);
  opacity: 0.7;
} /* Style placeholder */

@supports (-webkit-background-clip: text) {
  .contact-submit-text,
  .contact-toast span {
    background-image: linear-gradient(90deg, #6d63ff, #c822ff, #ff72b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

.contact-honeypot {
  display: none;
}

.contact-consent {
  margin: 20px 0 12px;
}

.contact-form .contact-consent__label {
  color: var(--text-color);
  display: inline;
  font-size: 0.55rem;
  line-height: 1.2;
  margin-bottom: 0;
}

.contact-consent__label input {
  accent-color: var(--accent-color);
  appearance: auto;
  border-radius: 4px;
  box-shadow: none;
  height: 10px;
  margin: 0 10px 0 0;
  min-height: 10px;
  min-width: 10px;
  padding: 0;
  vertical-align: baseline;
  width: 10px;
}

.contact-consent__label span {
  display: inline;
  font-size: 0.8rem;
  line-height: 1.2;
}


/* Carte Google Maps */
.contact-map {
  margin-bottom: 60px;
}

.map {
  border: none;
  border-radius: 2px;
  box-shadow: 0 10px 30px var(--shadow-color);
  display: block;
  height: 350px;
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
} /* Style de la carte */

/* Section email */
.contact-email {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  border-radius: 5%;
  box-shadow: 0 10px 25px var(--shadow-color);
  color: transparent;
  font-size: 1.3rem;
  margin: 50px auto !important; /* Style conteneur */
  max-width: 600px;
  padding: 20px;
  text-decoration: none;
  transition: transform 0.3s;
  transition: all 0.3s ease; /* Ombre, bordure gauche, texte, transition */
}

.contact-email:hover {
  box-shadow: 0 15px 30px rgb(93 93 255 / 20%);
  transform: translateY(-5px);
} /* Effet survol */
.contact-email a {
  border-bottom: 2px dotted var(--accent-color);
  color: var(--accent-color);
  font-weight: bold;
  padding-bottom: 2px;
  text-decoration: none;
  transition: all 0.3s ease;
} /* Lien email */
.contact-email a:hover {
  border-bottom-style: solid;
  color: var(--accent-color);
} /* Effet survol lien */

/* Style de base pour le logo video dans la section social-media de la page contact */
#logo-video-dropdown {
  border: 1px solid var(--accent-color); /* Bordure pour correspondre aux autres icônes */
  border-radius: 50%; /* Arrondi pour correspondre aux autres icônes */
  box-shadow: 0 4px 10px var(--shadow-color); /* Ombre pour correspondre aux autres icônes */

  /* Assurez-vous que la vidéo est affichée comme un bloc ou inline-block pour que transform fonctionne correctement */
  display: inline-block; /* ou block, selon votre layout */
  height: 66px; /* Exemple, ajustez à la taille actuelle ou souhaitée */
  margin: 30px; /* Espace autour de l'icône */

  /* Ajoutez une transition pour un effet fluide */
  transition: transform 0.3s ease-in-out;
  vertical-align: middle; /* Ajustez si nécessaire pour l'alignement */

  /* Définissez une largeur si ce n'est pas déjà fait, pour référence */
  width: 66px; /* Exemple, ajustez à la taille actuelle ou souhaitée */
}

/* Effet d'agrandissement au survol */
#logo-video-dropdown:hover {
  /* Agrandit la vidéo de 10% (ajustez la valeur si besoin) */
  transform: scale(1.4);
}

/* Styles Contact en thème clair */
[data-theme="light"] .contact-form {
  background: linear-gradient(180deg, rgb(255 246 250 / 96%), rgb(255 239 246 / 96%));
  border-top-color: var(--accent-color);
  box-shadow: 0 10px 30px var(--shadow-color);
}

[data-theme="light"] .contact-form label {
  color: var(--accent-color);
}

[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea {
  background: rgb(255 255 255 / 96%);
  border-color: rgb(200 34 255 / 52%);
  color: var(--text-color);
  caret-color: var(--text-color);
} /* Champs de saisie */
[data-theme="light"] .contact-form input::placeholder,
[data-theme="light"] .contact-form textarea::placeholder {
  color: var(--accent-color);
  opacity: 0.7;
} /* Placeholder */
[data-theme="light"] .contact-form input:-webkit-autofill,
[data-theme="light"] .contact-form textarea:-webkit-autofill,
[data-theme="light"] .contact-form input:-webkit-autofill:hover,
[data-theme="light"] .contact-form textarea:-webkit-autofill:hover,
[data-theme="light"] .contact-form input:-webkit-autofill:focus,
[data-theme="light"] .contact-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-color);
  box-shadow: 0 0 0 1000px rgb(255 255 255 / 96%) inset;
  caret-color: var(--text-color);
}
[data-theme="light"] .contact-form input:focus,
[data-theme="light"] .contact-form textarea:focus {
  border-color: #5d5dff;
  box-shadow: 0 0 0 3px rgb(93 93 255 / 30%);
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea {
  background: rgb(11 40 76 / 22%);
  color: var(--text-color);
}

[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
  color: var(--text-color);
  opacity: 0.6;
}

[data-theme="light"] .map {
  filter: grayscale(20%) contrast(90%);
} /* Léger filtre sur la carte */
[data-theme="light"] .contact-email {
  background: var(--card-bg);
  border-left: 5px solid var(--accent-color);
  border-right: 5px solid var(--accent-color);
  box-shadow: 0 10px 25px var(--shadow-color);
  color: var(--accent-color);
  font-size: 1.3rem;
  transition: all 0.3s ease; /* Ombre, bordure gauche, texte, transition */
}

[data-theme="light"] .contact-email span {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .contact-email:hover {
  box-shadow: 0 15px 30px rgb(93 93 255 / 20%);
  transform: translateY(-5px);
} /* Effet survol */
[data-theme="light"] .contact-email a {
  border-bottom: 2px dotted #5d5dff;
  color: #5d5dff;
  font-weight: bold;
  padding-bottom: 2px;
  text-decoration: none;
  transition: all 0.3s ease;
} /* Lien email */
[data-theme="light"] .contact-email a:hover {
  border-bottom-style: solid;
  color: #5d5dff;
} /* Effet survol lien */
[data-theme="light"] .social-media a {
  background: var(--card-bg);
  box-shadow: 0 8px 20px var(--shadow-color);
}

/* =========================
   FOOTER
   ========================= */
#footer {
  background: var(--deep-black);
  border-top: 1px solid var(--accent-color);
  padding: 60px 40px 30px;
  width: 100%;
}

:root:not([data-theme="light"]) #footer {
  background: var(--deep-black) !important;
  background-image: none !important;
}

:root:not([data-theme="light"]) .blog-articles-page #footer {
  background: var(--deep-black) !important;
  background-image: none !important;
}

#footer .footer-container {
  align-items: flex-start;
  display: grid;
  gap: 80px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  justify-content: center;
  justify-items: center;
  margin: 0 auto 70px;
  max-width: 1100px;
  padding: 20px 40px 40px;
  width: 100%;
}

#footer .footer-section {
  align-items: flex-start;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  max-width: none;
  min-width: 0;
  text-align: left;
  width: 100%;
}


#footer .footer-section.footer-about {
  max-width: 100%;
}

#footer .footer-section h3 {
  color: var(--accent-color);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin: 0 0 10px;
  text-transform: uppercase;
}

#footer .footer-section p {
  color: #b0b0c3;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

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

#footer .footer-section li {
  font-size: 0.9rem;
  margin-bottom: 0.7rem;
}

#footer .footer-section a {
  color: #b0b0c3;
  display: inline-block;
  font-size: 0.85rem;
  padding-left: 0;
  text-decoration: none;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

#footer .footer-section a:hover {
  color: var(--accent-color);
  padding-left: 5px;
}

#footer .footer-social {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  justify-content: left;
  margin-top: 0.5rem;
  width: 100%;
}

#footer .footer-social a {
  align-items: center;
  background: rgb(200 34 255 / 10%);
  border-radius: 50%;
  display: flex;
  height: 40px;
  justify-content: center;
  padding: 0 !important;
  transition: all 0.3s ease;
  width: 40px;
}

#footer .footer-social a:hover {
  background: rgb(200 34 255 / 25%);
  padding-left: 0 !important;
  transform: translateY(-3px);
}

#footer .footer-social img {
  filter: invert(1) brightness(0.8);
  height: 20px;
  transition: filter 0.3s ease;
  width: 20px;
}

#footer .footer-social a:hover img {
  filter: invert(1) brightness(1.2);
}

#footer .footer-bottom {
  border-top: 1px solid rgb(200 34 255 / 20%);
  margin: 60px auto 0;
  max-width: 100%;
  padding: 30px 40px 0;
  text-align: center;
}

#footer .footer-bottom p {
  color: #8a8a9e;
  font-size: 0.9rem;
  margin: 0;
}

#footer .footer-bottom .admin-export-link {
  color: rgb(93 93 255 / 65%);
  display: inline-block;
  font-size: 0.8rem;
  margin-top: 10px;
  text-decoration: none;
}

#footer .footer-bottom .admin-export-link:hover {
  color: var(--accent-color);
}

.admin-export-link--inline {
  color: rgb(93 93 255 / 55%);
  display: inline;
  font-size: 1.35rem;
  font-weight: 600;
  margin-left: 8px;
  text-decoration: none;
}

.admin-export-link--inline:hover {
  color: var(--accent-color);
}

/* Décaler le footer lors du menu ouvert */
body.body-menu-open #footer {
  transition: padding-left 0.4s ease;
}

/* Thème clair pour le FOOTER */
[data-theme="light"] #footer {
  background-color: var(--background-color) !important;
  background-image: none !important;
  border-top-color: var(--accent-color);
}

[data-theme="light"] #footer .footer-section h3 {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] #footer .footer-section p,
[data-theme="light"] #footer .footer-section a {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] #footer .footer-section a:hover {
  filter: brightness(0.9);
}

[data-theme="light"] #footer .footer-bottom p {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] #footer .footer-social a {
  background: rgb(200 34 255 / 8%);
}

[data-theme="light"] #footer .footer-social a:hover {
  background: rgb(200 34 255 / 15%);
}

[data-theme="light"] #footer .footer-social img {
  filter: brightness(0.6);
}

[data-theme="light"] #footer .footer-social a:hover img {
  filter: brightness(0.4);
}

[data-theme="light"] #footer .footer-bottom {
  border-top-color: rgb(200 34 255 / 15%);
}

/* Responsive: Tablet */
@media (width <= 1024px) {
  #footer .footer-container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);
  }

  #footer .footer-section {
    max-width: none;
  }
}

/* Responsive: Mobile */
@media (width <= 768px) {
  #footer {
    padding: 50px 20px 24px;
  }

  #footer .footer-container {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
    margin-bottom: 30px;
    padding: 10px 10px 12px;
  }

  #footer .footer-section {
    gap: 0.8rem;
  }

  #footer .footer-section h3 {
    font-size: 0.85rem;
    margin: 0 0 6px;
  }


  #footer .footer-social {
    justify-content: flex-start;
    margin-top: 0;
  }

  /* Empêcher le décalage du footer en mobile */
  body.body-menu-open #footer {
    padding-left: 20px;
  }
}

/* =========================
   UTILITAIRES & EFFETS
   ========================= */

/* Animation AOS (Animate On Scroll) */
[data-aos] {
  opacity: 0;
  transition: all 0.8s ease;
} /* Caché par défaut */
[data-aos].aos-animate {
  opacity: 1;
} /* Visible quand animé */

/* =========================
   RESPONSIVE (Adaptation écrans)
   ========================= */

@media (width >= 1400px) {
  /* Grands écrans */
  .project-detail {
    padding: 50px 80px 0;
  }

  .gallery-item {
    height: 180px; /* Hauteur plus grande sur grands écrans */
  }

  .profile-photo {
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: 0 5px 100px #5d5dff;
    height: 320px;
    width: 300px;
  }
}

@media (width <= 1200px) {
  /* Tablettes larges et ordinateurs moyens */
  .dropdown-menu {
    padding: 30px 76px 35px 40px;
    width: 100vw;
  }

  .intro-text .animated-paragraph {
    font-size: 1.05rem; /* Ajuster la taille de la police pour les tablettes */
  }
}

/* Tablettes et petits ordinateurs */
@media (width <= 992px) {
  header:not(.page-intro-card):not(.ai-assistant-header) {
    min-height: 68px;
    padding: 0px;
  }

  header.site-header {
    height: 106px;
    gap: 0;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
  }

  .header-social-strip {
    flex-basis: 30px;
    gap: 12px;
    height: 30px;
    justify-content: flex-end;
    min-height: 0;
    padding: 0 14px;
  }

  .header-logo {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  .header-portfolio-avatar {
    right: 14px;
    top: calc(var(--site-header-social-height, 30px) + 8px);
  }

  .dropdown-close {
    right: 26px;
    top: 30px;
  }

  .header-social-links {
    gap: 10px;
  }

  .header-social-link {
    height: 26px;
    width: 26px;
  }

  .header-social-icon {
    height: 16px;
    width: 16px;
  }

  .header-social-strip .menu-controls {
    gap: 10px;
  }

  .header-social-strip .lang-button,
  .header-social-strip #theme-switch {
    height: 26px;
    width: 26px;
  }

  .header-social-strip .lang-button img,
  .header-social-strip #theme-switch svg {
    height: 20px;
    width: 20px;
  }

  .compact-header {
    height: 64px;
    padding: 0 18px;
  }

  section#skills,
  #skills {
    margin-top: 50px;
    scroll-margin-top: 100px;
  }

  section#contact,
  #contact {
    margin-top: 0;
    scroll-margin-top: 100px;
  }

  .dropdown-menu {
    background-color: #1e1f2f;
    padding: 26px 28px 35px;
    width: 100vw;
  }

  .intro-text {
    padding: 0 25px;
  }

  .home-page .intro-text .hero-media {
    margin-top: 0;
    min-height: clamp(320px, 56vw, 520px);
    width: 100vw;
  }

  .intro-text .animated-paragraph {
    font-size: 1rem; /* Ajuster la taille de la police pour les tablettes */
  }

  .intro-text .profile-photo-container {
    height: 450px;
    max-width: 100%;
    width: 375px;
  }

  .page-about .page-intro-card {
    max-width: 820px;
    padding: 26px 24px;
    width: calc(100% - 32px);
  }

  .page-about .page-intro-card .page-intro-title {
    font-size: clamp(2.1rem, 6vw, 3rem);
  }

  .page-about .page-intro-card .page-intro-lead {
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: 680px;
  }

  .intro-text .profile-photo {
    height: 350px;
    width: 500px;
  }

  .about-text-box {
    margin: 50px;
    padding: 0;
  }

  .projects-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin: 0 auto;
    max-width: 100%;
    padding: 34px;
  }

  .contact-form {
    padding: 15px 75px;
  }
}

@media (width <= 576px) {
  /* Mobiles */

  /* Bloquer le scroll du body quand le menu est ouvert */
  body.body-menu-open {
    overflow: hidden; /* ✅ Empêche le scroll de la page */
    position: fixed; /* ✅ Fixe la position du body */
    width: 100%; /* ✅ Maintient la largeur */
  }

  /* Empêcher le décalage du main en mobile */
  body.body-menu-open main {
    padding-left: 0 !important; /* ✅ Annule le décalage */
    opacity: 0.2;
  }

  /* Empêcher le décalage du footer en mobile */
  body.body-menu-open #footer {
    padding-left: 20px !important; /* ✅ Garde le padding normal */
  }

  /* Faire que le menu passe au-dessus avec un overlay plus visible */
  .menu-overlay.active {
    background-color: rgb(35 36 54); /* ✅ Overlay sombre visible */
    pointer-events: auto; /* ✅ Permet de fermer en cliquant sur l'overlay */
  }

  /* Ajuster la largeur du menu pour mobile */
  .dropdown-menu {
    height: calc(100vh - var(--site-header-height, 104px)); /* Hauteur restante */
    overflow-y: auto; /* ✅ Scroll interne au menu */
    scrollbar-width: thin;
    scrollbar-color: rgb(93 93 255 / 65%) transparent;
    padding: 22px 18px 32px; /* Padding réduit */
    position: fixed; /* ✅ Menu fixe */
    top: var(--site-header-height, 104px); /* Positionné sous le header compact */
    width: 100%; /* ✅ Plus large que les 30% actuels pour une meilleure UX */
    z-index: 2000; /* ✅ S'assure qu'il passe au-dessus */
  }

  .dropdown-menu::-webkit-scrollbar {
    width: 6px;
  }

  .dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
  }

  .dropdown-menu::-webkit-scrollbar-thumb {
    background-color: rgb(93 93 255 / 55%);
    border-radius: 999px;
  }

  body {
    padding-top: 72px;
  } /* Ajuster le padding du body pour le header compact */


  section#contact,
  #contact {
    margin-top: 0;
    padding: 20px;
    scroll-margin-top: 100px;
  }

  #loader-video {
    height: min(300px, 75vw);
    width: min(300px, 75vw);
  }

  .page-about #loader-video {
    height: min(420px, 85vw);
    width: min(420px, 85vw);
  }

  /* Ajuster le Header Compact pour Mobile */
  header:not(.page-intro-card):not(.ai-assistant-header) {
    height: 80px;
    padding: 0px;
  } /* Header compact */

  header.site-header {
    height: 94px;
    min-height: 0;
    padding: 0;
  }

  .header-logo {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  header:not(.page-intro-card):not(.ai-assistant-header) h1 {
    font-size: 1rem;
    margin: 0 10px;
  } /* Titre plus petit */

  .header-logo img {
    border-radius: 50%;
    height: 38px;
    margin: 0 0 13px 8px;
    width: auto;
  }

  .header-portfolio-avatar,
  .header-portfolio-avatar img {
    height: 38px;
    width: 38px;
  }

  .header-portfolio-avatar {
    right: 8px;
    top: calc(var(--site-header-social-height, 30px) + 7px);
  }

  .dropdown-close {
    right: 18px;
    top: 36px
  }

  .hamburger {
    font-size: 1rem;
  } /* Taille de l'icône */

  /* Ajuster le Header Compact pour Mobile */
  .compact-header {
    height: 64px;
    padding: 0 16px;
  } /* Header compact */
  .compact-header .header-left {
    gap: 8px;
  } /* Espacement entre logo et titre */
  .compact-header .page-title {
    font-size: 1rem;
  } /* Titre plus petit */
  .compact-header #logo-video {
    height: 30px;
  } /* Logo plus petit */
  .compact-header .language-switch img {
    height: 32px;
    width: 32px;
  } /* Icône langue plus petite */
  .menu-toggle {
    font-size: 1.8rem;
    padding: 8px;
  } /* Bouton menu plus petit */
  .theme-toggle button {
    height: 35px;
    width: 35px;
  } /* Bouton thème plus petit */
  .theme-toggle button svg {
    height: 18px;
    width: 18px;
  }

  /* Ajuste le titre bannière pour mobile */
  .title-banner {
    font-size: 1.9rem; /* Réduire la taille de la police (ajustez si besoin) */
    padding: 15px; /* Réduire le padding */
  }

  h3.title-banner {
    font-size: 1.7rem; /* Réduire la taille de la police */
    margin-bottom: 50px; /* Réduire la marge inférieure */
  }

  .intro-text {
    margin: 0;
    padding: 0;
  }

  .home-page .intro-text .hero-media {
    aspect-ratio: 1920 / 1082;
    height: auto;
    margin-top: 0;
    min-height: 420px;
    width: 100%;
  }

  .home-page .intro-text .hero-media::before {
    inset: -24px 0;
  }

  .home-page main::before,
  .home-page main::after {
    display: none;
  }

  .home-page .intro-text .content-wrapper {
    align-items: center;
    gap: 12px;
    justify-content: center;
    padding: clamp(42px, 9vh, 72px) 16px 10px;
  }

  .home-page .intro-text .text-content {
    align-items: center;
    gap: 10px;
    text-align: center;
    width: 100%;
  }

  .home-page .intro-text .job-title,
  .home-page .intro-text .animated-title {
    text-align: center;
    width: 100%;
  }

  .intro-text .animated-title {
    font-size: 3rem; /* Réduire la taille de la police */
    padding: 12px;
  }

  .intro-text .animated-paragraph {
    font-size: 1rem; /* Réduire la taille de la police */
    margin-bottom: 10px;
    padding: 10px;
  }

  /* Taille de la photo de profil sur mobile */
  .intro-text .content-wrapper {
    flex-direction: column;
    gap: 30px;
    max-width: 100%;
    padding: 16px;
    width: 100%;
  }

  /* .intro-text .profile-photo-container { */

  /* width: 375px; /* Largeur maximale réduite */

  /* height: 400px; /* Hauteur maximale réduite */

  /* margin: 0 auto;} /* Centrage horizontal */

  .intro-text .profile-photo-container {
    height: auto;
    margin: 0 auto;
    width: min(95vw, 360px);
  }

  .intro-text .profile-photo {
    height: auto;
    max-height: 360px;
    width: 100%;
  }

  .intro-text .btn-explore {
    font-size: 1.2rem; /* Réduire la taille de la police */
    margin: 20px; /* Marge supérieure réduite */
    padding: 8px 15px; /* Réduire le padding vertical et horizontal */
    width: 250px; /* Permettre au bouton de prendre une largeur plus naturelle */
  }

  .home-page .intro-text .btn-explore {
    display: inline-flex;
    font-size: 0.8rem;
    justify-content: center;
    margin: 25px auto 0;
    min-width: 0;
    padding: 7px 18px;
    width: auto;
  }

  .btn-download-cv {
    font-size: 1.2rem; /* Réduire la taille de la police */
    margin: 60px 0 0; /* Marge supérieure réduite */
    padding: 8px 25px; /* Réduire le padding vertical et horizontal */
  }

  .btn-download-cv i {
    margin-right: 8px; /* Réduire l'espace de l'icône si besoin */
  }

  .page-about .btn-download-cv {
    max-width: 320px;
  }

  .page-about main {
    padding: 40px 0 80px;
  }

  .page-about .intro-text {
    padding: 12px 12px 0;
  }

  .page-about .intro-text .content-wrapper {
    gap: 20px;
    padding: 12px;
  }

  .page-about .about-text-box {
    margin: 20px 12px 28px;
    padding: 24px 18px;
  }

  .page-intro,
  .page-intro-card {
    margin-left: 12px;
    margin-right: 12px;
    padding: 20px 18px;
  }

  .page-about .page-intro-card {
    width: calc(100% - 24px);
  }

  .page-intro-lead {
    font-size: 1rem;
    max-width: 100%;
  }

  .explorer-layout-container {
    grid-template-areas:
      "explorer-title"
      "explorer-display";
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 68px;
    padding-top: 24px;
  }

  .main-page-title-container {
    margin-bottom: 26px;
    margin-top: 0;
    padding: 8px 0;
  }

  h1.main-title-animated {
    font-size: 2.2rem; /* Réduit la taille du titre sur les petits écrans */
    margin: 6px 12px;
  }

  .explorer-projects-list-panel {
    border-right: none; /* AJOUT : Supprimer la bordure droite si elle était active */
    flex: 0 0 100%; /* Panneau de gauche prend toute la largeur */
    padding: 10px; /* Réduit le padding */
  }

  .explorer-project-display-panel {
    padding: 26px 0 30px;
  }

  .explorer-project-display-panel::before,
  .explorer-project-display-panel::after {
    width: 44px;
  }

  .explorer-project-marquee-track {
    animation-duration: 42s;
    padding: 6px 18px 14px;
  }

  .explorer-project-marquee-track .project-display-content {
    flex-basis: clamp(220px, 72vw, 300px);
    margin-right: 16px;
  }

  .project-card-link {
    aspect-ratio: 4 / 3;
  }

  .project-card-overlay h3 {
    font-size: clamp(0.95rem, 5vw, 1.2rem);
    line-height: 1.12;
  }

  .project-view-icon {
    font-size: 1.25rem;
    height: 42px;
    width: 42px;
  }

  #explorerProjectList li {
    font-size: 0.9rem; /* Réduit la taille de la police */
    padding: 10px; /* Réduit le padding des éléments de la liste */
  }


  /* Menu dropdown en mode thème clair */
  [data-theme="light"] .dropdown-menu {
    background: var(--background-gradient);
  }

  /* Si vous voulez aussi modifier l'overlay en mode clair */
  [data-theme="light"] .menu-overlay.active {
    background-color: rgb(240 238 255 / 90%) !important;
  }

  /* Pour harmoniser les éléments du menu en mode clair */
  [data-theme="light"] .dropdown-nav a {
    color: var(--accent-color); /* Utilise la couleur de texte du thème clair */
  }

  [data-theme="light"] .dropdown-nav a:hover {
    color: #5d5dff;
  }
}

.about-text-box {
  margin: 30px auto; /* ✅ Centrage automatique horizontal */
  max-width: calc(
    100% - 80px
  ); /* Optionnel: éviter que la box touche les bords */

  padding: 0; /* Optionnel: réduire le padding pour mobile */
}

.about-text-box p {
  font-size: 1.3rem;
}

.project-info p {
  font-size: 1.2rem;
  text-align: center;
} /* Texte projet plus petit */
.project-content p {
  font-size: 1.3rem;
  text-align: center;
} /* Texte projet plus petit */
.project-detail .project-links a {
  font-size: 1.1rem;
} /* Liens projet plus petits */
.projects-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 42px;
}

@media (width <= 992px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 34px;
  }
}

@media (width <= 576px) {
  .projects-grid {
    grid-template-columns: 1fr;
    padding: 30px 22px 60px;
  }
}
.project-links a {
  font-size: 1.2rem;
} /* Liens projet plus petits */
.project-tech span {
  font-size: 1rem;
} /* Taille police tech projet plus petite */
.project-card img {
  height: 375px;
} /* Image carte projet plus haute */
.project-preview-grid {
  gap: 20px;
  grid-template-columns: 1fr;
  padding: 0 10px;
} /* Grille aperçu 1 colonne */
.project-preview {
  height: 250px;
} /* Aperçu moins haut */
.project-preview .btn-view-project {
  font-size: 0.9rem; /* Réduits la taille de la police */
  min-width: auto; /* Permet au bouton de prendre une largeur plus naturelle si nécessaire */
  padding: 8px 18px; /* Réduits le padding vertical et horizontal */
}

.project-preview-overlay h3 {
  color: white;
  font-size: 1rem;
} /* Titre overlay plus petit */
.project-hero {
  height: 250px;
} /* Image détail projet moins haute */
.project-navigation {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  justify-content: space-between;
} /* Navigation projet en colonne */
.project-detail .project-links {
  flex-direction: column;
} /* Liens détail projet en colonne */
.gallery-grid {
  grid-template-columns: 1fr;
}

.skills-categories {
  gap: 18px;
  grid-template-columns: repeat(5, minmax(128px, 1fr));
  margin-bottom: 50px;
  padding: 5px;
}

.skills-category {
  display: contents;
}

.skills-grid {
  display: contents;
}

.skill {
  box-sizing: border-box;
  flex: 1 1 40%;
  gap: 18px;
  margin-bottom: 10px;
  max-width: 160px;
  min-width: 120px;
  overflow: visible;
}

.skill-icon {
  height: 38px;
  padding: 4px;
  width: 38px;
}

.skill img {
  height: 22px;
  width: 22px;
}

.skill p {
  font-size: 1.1rem;
  line-height: 1.35;
  padding: 0.06em 0.22em 0;
}

@media (width <= 700px) {
  .skills-categories {
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  }

  .skills-category {
    display: contents;
  }
}

.contact-form {
  padding: 40px;
}

.contact-form label {
  font-size: 1.2rem;
} /* Taille police label plus petite */
.contact-form button {
  font-size: 1.2rem;
  padding: 8px 12px;
} /* Bouton formulaire plus petit */
.contact-email {
  font-size: 1.2rem;
} /* Taille police email plus petite */
.contact-email a {
  font-size: 1.2rem;
} /* Lien email plus petit */

/* Ajustements dropdown pour mobile */
  .dropdown-nav ul {
    gap: 13px;
    margin-bottom: 0px;
    padding-left: 25px;
    margin-top: 10px;
    align-items: flex-start;
    text-align: start;
}

  .dropdown-nav a {
    font-size: 1.1rem;
    padding: 8px 8px 8px 0;
    text-align: center;
  } /* Liens plus petits */

  .dropdown-nav .nav-link {
    font-size: 1.1rem;
  }

  .dropdown-submenu > .submenu-list {
    align-items: flex-start;
    padding-left: 20px;
  }

  .dropdown-submenu .submenu-link {
    text-align: center;
  }

  .dropdown-menu .social-media {
    gap: 14px;
    margin-top: 38px;
    justify-content: center;
    width: 100%;
  }

  .dropdown-menu .social-media a {
    height: 38px;
    width: 38px;
  }

  .dropdown-menu .social-media img {
    height: 24px;
    width: 24px;
  }

/* Menu dropdown en mode thème clair */
[data-theme="light"] .dropdown-menu {
  background: var(--background-gradient) !important;
}

/* Pour harmoniser les éléments du menu en mode clair */
[data-theme="light"] .dropdown-nav a {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent; /* Utilise la couleur de texte du thème clair */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .dropdown-nav .dropdown-gamma-link {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.menu-controls {
  gap: 15px;
  margin-left: 0;
  width: 100px;
} /* Contrôles dropdown */

.gallery-item:hover {
  box-shadow: none;
  transform: none;
}

.scroll-to-top {
  bottom: calc(96px + env(safe-area-inset-bottom));
  right: 16px;
}

#footer {
  flex-direction: row-reverse; /* Garde l'ordre inversé même en mobile */
  gap: 0;
  justify-content: flex-start;
  margin-top: 0;
  padding: 15px;
}

#footer p {
  font-size: 0.9rem;
  margin-right: auto;
  color: #8a8a9e;
  text-align: center;
}

/* Container pour les icônes sociales */
#footer .github,
#footer div:not(.github) {
  gap: 0;
  margin: 0;
}

/* Supprime la règle qui centre les icônes */
#footer div:first-of-type {
  display: inline-flex;
  gap: 5px;
  justify-content: left;
  width: 100%;
}

#footer img {
  height: 28px;
  width: 28px; /* Légèrement plus petit sur mobile */
}

/* =========================
   RESPONSIVE BLOG + ARTICLES
   ========================= */

/* Ajustements pour les écrans moyens et petits */
@media (width <= 576px) {
  section {
    margin-bottom: 0;
    padding: 0;
  }

  .main-page-title {
    color: whitesmoke;
    font-size: 1.9rem;
    font-weight: bold;
    padding: 20px;
  }

  .page-subtitle {
    font-size: 1rem; /* Taille de police responsive pour le sous-titre */
  }

  .news-teaser-section,
  .all-news-list {
    padding: 20px; /* Ajustez le padding selon vos besoins */
  }

  .news-grid {
    grid-template-columns: 1fr; /* Une colonne sur mobile */
  }

  .news-card-title {
    font-size: 1.9rem;
  }

  .article-title-main {
    font-size: clamp(1.7rem, 6vw, 2.3rem);
  }

  .article-body {
    font-size: 1rem;
  }

  .blog-hero {
    padding: 40px 0;
  }

  .blog-title {
    font-size: 2.8rem;
  }

  .blog-card-title {
    font-size: 1.3rem;
  }

  .filter-container {
    align-items: stretch;
    flex-direction: column;
  }

  .articles-grid {
    gap: 50px;
    grid-template-columns: 1fr;
    padding: 0px;
  }

  .page-title-container {
    background: linear-gradient(45deg, rgb(200 34 255 / 6%), rgb(200 34 255 / 18%));
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 100px;
    margin-top: 100px;
    padding: 30px;
  }

  .page-subtitle {
    padding: 20px;
  }

  .page-title-container .page-subtitle {
    background: linear-gradient(45deg, #5d5dff, #c822ff);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .page-title-container .news-page-title {
    background: linear-gradient(45deg, #ffdbe7, #ffeaf2);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .home-page .trust-methodology {
    margin-top: 50px;
    padding: 0 8px;
    width: 100%;
  }

  .home-page .trust-methodology .methodology-item--combined {
    background-position: center;
    background-size: cover;
    height: clamp(420px, 66vw, 760px);
    max-width: none;
    padding: 0;
    width: 100%;
  }

  .methodology-item--combined .methodology-subtitle {
    margin-top: 24px;
  }

  .methodology-item--combined p {
    line-height: 1.75;
    margin-bottom: 12px;
  }

  .home-page .trust-cards-grid {
    margin: 14px auto 0;
    max-width: 100%;
    padding: 0;
    width: 100%;
  }

  .home-page .trust-section .section-subtitle {
    margin-bottom: 40px;
  }

  .home-page .trust-card--merged {
    align-items: stretch;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 100%;
    overflow: visible;
    padding: 18px 10px;
    position: relative;
    width: 100%;
  }

  .home-page .trust-card-merged-col {
    min-width: 0;
    padding: 0 6px;
  }

  .home-page .trust-card-merged-col + .trust-card-merged-col {
    border-left: 0;
    padding-left: 6px;
  }

  .trust-card--merged h3 {
    font-size: 1rem;
    line-height: 1.25;
  }

  .trust-card--merged h3 a {
    display: inline-flex;
    hyphens: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .trust-cert-header {
    align-items: flex-start;
    gap: 6px;
  }

  .trust-cert-toggle {
    height: 30px;
    margin-left: 4px;
    width: 30px;
  }

  .home-page .trust-card--merged p {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .trust-title-brand {
    align-items: center;
    column-gap: 0;
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    row-gap: 6px;
  }

  .trust-title-logo {
    height: 16px;
    width: 16px;
  }
}

/* =========================
   SECTION CONFIANCE (TRUST) - TESTIMONIES & PARTNERS
   ========================= */

.trust-section {
  background: transparent;
  border-radius: 0;
  margin: 0;
  max-width: none;
  padding: 60px 40px;
  width: 100%;
}

.trust-section h2 {
  color: var(--accent-color);
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-size: 3.2rem;
  margin-bottom: 10px;
  text-align: center;
}

.trust-section .subtitle {
  color: var(--text-color);
  font-size: 1.75rem;
  margin-bottom: 50px;
  opacity: 0.9;
  text-align: center;
}

.trust-section .section-title,
.trust-section .section-subtitle,
.trust-section h3,
.trust-section p,
.trust-section a {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  font-family: var(--font-title);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.trust-section .trust-highlight {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  font-weight: 700;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.trust-section .trust-highlight--blue {
  background: none;
  color: #79e6ff !important;
  -webkit-text-fill-color: #79e6ff !important;
}

[data-theme="light"] .trust-section .trust-highlight--blue {
  color: #0f7ea8 !important;
  -webkit-text-fill-color: #0f7ea8 !important;
}

.trust-section .section-subtitle {
  font-size: 1.35rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
}


/* Testimonials Grid */
.testimonials-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-bottom: 60px;
}

.testimonial {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 5px 15px rgb(var(--accent-rgb), 0.1);
  padding: 25px;
  transition: all 0.3s ease;
}

.testimonial:hover {
  box-shadow: 0 8px 25px rgb(var(--accent-rgb), 0.2);
  transform: translateY(-5px);
}

.testimonial-text {
  color: var(--text-color);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.8;
  margin-bottom: 15px;
}

.testimonial-author {
  color: var(--accent-color);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: right;
}

/* Partners Section */
.partners-section {
  border-top: 1px solid var(--border-color);
  margin-top: 50px;
  padding-top: 50px;
  text-align: center;
}

.partners-section h3 {
  color: var(--accent-color);
  font-size: 2rem;
  margin-bottom: 30px;
}

.logos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  list-style: none;
  margin: 15px;
  padding: 0;
}

.logos-list li {
  align-items: center;
  background-color: rgb(var(--accent-rgb), 0.05);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  font-size: 0.95rem;
  font-weight: 500;
  justify-content: center;
  min-height: 60px;
  min-width: 140px;
  padding: 15px;
  transition: all 0.3s ease;
}

.logos-list li:hover {
  background-color: rgb(var(--accent-rgb), 0.15);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.logos-list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.logos-list a:hover {
  background: linear-gradient(45deg, var(--accent-color), #c822ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Responsive adjustments */
@media (width <= 768px) {
  .trust-section {
    padding: 40px 20px;
    width: 95%;
  }

  .trust-section h2 {
    font-size: 2rem;
  }

  .trust-section .subtitle {
    font-size: 1rem;
  }

  .testimonials-grid {
    gap: 20px;
    grid-template-columns: 1fr;
  }

  .partners-section h3 {
    font-size: 1.4rem;
  }

  .logos-list {
    gap: 15px;
  }

  .logos-list li {
    min-width: 120px;
  }
}

/* Grille de cartes pour certifications et formations */
.trust-cards-grid {
  display: grid;
  gap: 25px;
  grid-template-columns: 1fr;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 50px;
  margin-top: 50px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

.trust-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
  transition: all 0.3s ease;
}

.trust-card--cert {
  background: linear-gradient(135deg, var(--secondary-bg), var(--card-bg));
  border-color: rgb(var(--accent-rgb), 0.4);
}

:root:not([data-theme="light"]) .home-page .trust-card {
  background-color: rgb(16 18 26 / 80%);
  border-color: rgb(43 16 82 / 35%);
  box-shadow: 0 18px 35px rgb(0 0 0 / 30%);
}

[data-theme="light"] .trust-card--cert {
  background-color: #fff;
  border-color: rgb(93 93 255 / 45%);
  box-shadow: 0 10px 24px rgb(93 93 255 / 12%);
}

[data-theme="light"] .trust-card {
  background-color: #fff;
}

.trust-card:hover {
  border-color: var(--accent-color);
  box-shadow: 0 8px 25px rgb(var(--accent-rgb), 0.15);
  transform: translateY(-3px);
}

.trust-card h3 {
  color: var(--accent-color);
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.trust-title-brand {
  align-items: center;
  column-gap: 8px;
  display: inline-flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  row-gap: 4px;
  white-space: normal;
}

.trust-title-logo {
  border-radius: 4px;
  flex: 0 0 auto;
  height: 50px;
  object-fit: contain;
  opacity: 0.9;
  width: 50px;
}

.trust-card p {
  color: var(--text-color);
  font-size: 1.05rem;
  line-height: 1.6;
}

.trust-card--merged {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 28px 34px;
  position: relative;
}

.trust-card--merged::before {
  background: rgb(var(--accent-rgb), 0.25);
  bottom: 28px;
  content: "";
  left: 50%;
  position: absolute;
  top: 82px;
  transform: translateX(-50%);
  width: 1px;
}

.trust-card--merged .trust-cert-toggle--merged {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0 auto 4px;
}

.trust-card-merged-col {
  padding: 4px 10px;
}

.trust-card-merged-col + .trust-card-merged-col {
  border-left: 0;
}

.trust-cert-header {
  display: flex;
  gap: 15px;
  justify-content: space-evenly;
  align-items: flex-end;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: column-reverse;
}

.trust-cert-header h3 {
  margin-bottom: 0;
}

.trust-cert-toggle {
  align-items: center;
  background: rgb(var(--accent-rgb), 0.12);
  border: 1px solid rgb(var(--accent-rgb), 0.35);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  margin-left: 10px;
  padding: 0;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  width: 34px;
}

.trust-cert-toggle img {
  display: block;
  height: 16px;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  width: 16px;
}

.trust-card--merged.is-open .trust-cert-toggle--merged img,
.trust-card-merged-col.is-open .trust-cert-toggle img {
  transform: rotate(180deg);
}

.trust-cert-content {
  margin-top: 12px;
}

/* Titre des cartes certification sans surlignage/soulignement */
.trust-section .trust-card .trust-title-brand,
.trust-section .trust-card .trust-title-brand span {
  background: none !important;
  color: var(--text-color) !important;
  text-decoration: none !important;
  -webkit-text-fill-color: var(--text-color) !important;
}

[data-theme="dark"] .trust-section .trust-card .trust-title-brand,
[data-theme="dark"] .trust-section .trust-card .trust-title-brand span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

[data-theme="light"] .trust-section .trust-card .trust-title-brand,
[data-theme="light"] .trust-section .trust-card .trust-title-brand span {
  color: #2f2b5f !important;
  -webkit-text-fill-color: #2f2b5f !important;
}

.trust-section .trust-card h3,
.trust-section .trust-card p,
.trust-section .trust-card a,
.trust-section .methodology-item h3,
.trust-section .methodology-item p,
.trust-section .section-title,
.trust-section .section-subtitle {
  background: linear-gradient(45deg, #5d5dff, #c822ff);
  background-clip: text;
  color: transparent !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.trust-section .section-subtitle,
.trust-section .trust-card p,
.trust-section .methodology-item p {
  font-family: var(--font-body);
}

[data-theme="dark"] .trust-section .section-subtitle,
[data-theme="dark"] .trust-section .trust-card p,
[data-theme="dark"] .trust-section .methodology-item p {
  background: none;
  color: #fff !important;
  font-family: var(--font-body);
  -webkit-text-fill-color: #fff;
}

[data-theme="dark"] .trust-section .trust-card p a,
[data-theme="dark"] .trust-section .methodology-item p a {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.trust-card-link {
  color: var(--accent-color);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 600;
  justify-content: center;
  margin-top: 12px;
  text-decoration: none;
  width: 100%;
}

.trust-card-link + .trust-card-link {
  margin-top: 6px;
}

.trust-card-link:hover {
  text-decoration: underline;
}

/* Section méthodologie et compétences */
.trust-methodology {
  background: transparent;
  border: none;
  border-radius: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  justify-items: center;
  margin-bottom: 50px;
  padding: 0;
}

.methodology-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
}

.methodology-item h3 {
  color: var(--accent-color);
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.methodology-item p {
  color: var(--text-color);
  font-size: 0.9rem;
  line-height: 1.7;
  opacity: 0.95;
}

.methodology-item--combined {
  background-image: url("/assets/images/backgrounds/ai-powered-device-concept.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  height: clamp(520px, 66vw, 980px);
  margin: 0;
  margin-inline: auto;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.methodology-item--combined .methodology-subtitle {
  margin-top: 36px;
}

.methodology-item--combined p {
  line-height: 1.9;
  margin-bottom: 18px;
}

.methodology-item--combined p:last-child {
  margin-bottom: 0;
}

@media (width <= 768px) {
  .trust-cards-grid {
    gap: 15px;
    grid-template-columns: 1fr;
  }

  .trust-methodology {
    gap: 20px;
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .trust-card h3 {
    font-size: 1.2rem;
  }

  .methodology-item h3 {
    font-size: 1.3rem;
  }
}

@media (width <= 600px) {
  .intro-text .animated-title {
    font-size: 2rem;
  }

  .intro-text .animated-paragraph {
    font-size: 1rem;
  }

  .intro-text {
    padding: 0 4px;
  }

  .intro-text .content-wrapper {
    padding: 0 4px;
  }

  .title-banner {
    font-size: 1.6rem;
  }

  h3.title-banner {
    font-size: 1.5rem;
    margin-bottom: 32px;
  }

  .contact-container .title-banner {
    font-size: 2.1rem;
  }

  .contact-container h3.title-banner {
    font-size: 1.5rem;
  }

  .page-about .btn-download-cv {
    font-size: 1rem;
    margin-top: 30px;
    padding: 8px 16px;
  }

  .page-about .intro-text {
    padding: 0 4px;
  }

  .page-about .intro-text .content-wrapper {
    padding: 0 4px;
  }

  .page-about .about-text-box {
    margin: 20px 4px 28px;
    padding: 20px 14px;
  }

  .page-about .about-text-box h2 {
    margin-top: 2.7rem;
  }

  .page-about .about-timeline,
  .page-about .skill-grid,
  .page-about .process-steps,
  .page-about .about-values {
    margin-bottom: 2.6rem;
  }

  .page-about .about-cta {
    margin-top: 2.5rem;
  }

  .page-about .page-intro-card {
    display: grid;
    gap: 8px;
    margin: 20px 12px 45px;
    overflow: hidden;
    padding: 18px 16px;
    width: calc(100% - 24px);
  }

  .page-about .page-intro-card .page-intro-title,
  .page-about .page-intro-card .page-intro-lead {
    max-width: 100%;
    min-width: 0;
  }

  .page-about .page-intro-card .page-intro-title {
    font-size: clamp(2.25rem, 8vw, 3.15rem);
    line-height: 1.08;
  }

  .page-about .page-intro-card .page-intro-lead {
    font-size: 0.95rem;
    hyphens: auto;
    line-height: 1.62;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  .btn-download-cv i {
    margin-right: 10px;
  }

  .main-page-title {
    font-size: 1.5rem;
  }

  .page-subtitle {
    font-size: 0.95rem;
  }

  .news-card-title {
    font-size: 1.4rem;
  }

  .blog-title {
    font-size: 2.1rem;
  }

  .blog-card-title {
    font-size: 1.35rem;
  }

  .article-title-main {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
  }

  .page-title-container {
    font-size: 1.6rem;
    padding: 20px;
  }

  .inspirations-hero .hero-eyebrow {
    font-size: 1.1rem;
  }

  .detail-actions {
    gap: 0.75rem;
  }

  .detail-nav {
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
  }

  .detail-nav-link {
    font-size: 0.9rem;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    width: 100%;
  }

  .detail-back,
  .detail-cta {
    font-size: 0.9rem;
    justify-content: center;
    padding: 0.5rem 1rem;
    width: 100%;
  }

  .about-text-box p,
  .project-info p,
  .project-content p,
  .contact-form label,
  .contact-form button,
  .contact-email,
  .contact-email a,
  .project-links a,
  .project-detail .project-links a {
    font-size: 1rem;
  }

  .trust-section h2 {
    font-size: 1.9rem;
  }

  .trust-section .section-subtitle {
    font-size: 1.05rem;
  }

  .testimonial-text {
    font-size: 1rem;
  }

  .partners-section h3 {
    font-size: 1.4rem;
  }

  .logos-list li {
    font-size: 0.9rem;
  }

  .trust-section {
    padding: 32px 14px;
    width: 100%;
  }

  .trust-methodology {
    gap: 16px;
    padding: 16px;
    width: 100%;
  }

  .methodology-item {
    padding: 20px;
    width: 100%;
  }

  .article-detail-page .article-content-full {
    padding: 32px 12px;
  }

  .article-body {
    font-size: 1rem;
    margin: 0;
    max-width: none;
    padding: 0 4px;
    width: 100%;
  }

  .article-detail-page .container {
    max-width: none;
    padding: 0;
    width: 100%;
  }

  .article-body p,
  .article-body ul,
  .article-body ol {
    font-size: 1rem;
  }

  .article-body h2 {
    font-size: 1.4rem;
  }

  .article-body h3 {
    font-size: 1.15rem;
  }

  .article-share,
  .article-comments {
    margin: 28px 0 0;
    max-width: none;
    padding: 20px 16px;
    width: 100%;
  }

  .article-section-title {
    font-size: 1.4rem;
  }

  .article-section-subtitle {
    font-size: 0.95rem;
  }

  .like-reaction-palette {
    gap: 6px;
    padding: 7px 8px;
    top: -50px;
  }

  .like-reaction-choice {
    font-size: 1.08rem;
  }

  .like-reaction-trigger {
    font-size: 0.9rem;
    gap: 6px;
    padding: 6px 10px;
  }

  .comments-list {
    margin: 0 0 24px;
    max-width: none;
    width: 100%;
  }

  .comment-item {
    border-radius: 12px;
    padding: 13px 12px;
  }

  .comment-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .comment-date {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .comment-message {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .comment-actions {
    flex-wrap: wrap;
  }

  .comment-action-btn {
    font-size: 0.85rem;
    padding: 6px 10px;
  }

  .comment-reaction-trigger {
    font-size: 0.82rem;
    gap: 5px;
    padding: 6px 10px;
  }

  .comment-reaction-palette {
    border-radius: 16px;
    gap: 6px;
    max-width: calc(100vw - 56px);
    padding: 7px 8px;
    top: -48px;
  }

  .comment-reaction-choice {
    font-size: 1.08rem;
  }

  .comment-replies {
    margin-top: 10px;
    padding-left: 8px;
  }

  .comment-item-reply {
    padding: 12px 10px;
  }

  .comment-item-reply .comment-replies {
    border-left: 0;
    padding-left: 0;
  }

  .comment-actions-row {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
  }

  .reply-form {
    padding: 10px;
  }

  .detail-title-row {
    gap: 8px;
  }

  .detail-title-label {
    font-size: 0.95rem;
  }
}

@media (width >= 769px) {
  .dropdown-menu {
    padding-right: 86px;
    text-align: left;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(93 93 255 / 65%) transparent;
  }

  .dropdown-nav ul {
    align-items: flex-start;
    text-align: left;
  }

  .dropdown-nav a {
    font-size: 1.2rem;
    text-align: left;
  }

  .dropdown-nav .nav-link {
    font-size: 1.2rem;
  }

  .dropdown-submenu > .submenu-list {
    align-items: flex-start;
    padding-left: 20px;
  }

  .dropdown-submenu .submenu-link {
    text-align: left;
  }

  .dropdown-menu .social-media {
    justify-content: flex-start;
  }

  .dropdown-menu .social-media a {
    height: 35px;
    width: 35px;
  }

  .dropdown-menu .social-media img {
    height: 22px;
    width: 22px;
  }

  .dropdown-menu::-webkit-scrollbar {
    width: 6px;
  }

  .dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
  }

  .dropdown-menu::-webkit-scrollbar-thumb {
    background-color: rgb(93 93 255 / 55%);
    border-radius: 999px;
  }
}

/* =========================
   HOME - BLUE SKYE ASSISTANT
   ========================= */
.ai-assistant-launcher {
  align-items: center;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 56px;
  justify-content: center;
  left: auto;
  padding: 0;
  position: fixed;
  right: 0;
  top: 36%;
  transform: translateY(-50%);
  transition: right 0.25s ease, transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
  width: 56px;
  z-index: 2100;
}

.ai-assistant-launcher:hover {
  filter: brightness(1.15);
  transform: translateY(calc(-50% - 2px));
}

.ai-assistant-launcher__robot {
  display: block;
  height: 40px;
  object-fit: contain;
  width: 40px;
}

.ai-assistant-launcher.is-panel-open {
  opacity: 0;
  pointer-events: none;
}

body.body-menu-open .ai-assistant-launcher {
  opacity: 0;
  pointer-events: none;
}

.ai-assistant-launcher.is-collapsed {
  opacity: 0;
  pointer-events: none;
}

.ai-assistant-collapse-handle {
  background: linear-gradient(135deg, rgb(93 93 255 / 92%), rgb(43 16 82 / 92%));
  border: 1px solid rgb(var(--accent-rgb), 0.45);
  border-radius: 28px 0 0 28px;
  box-shadow: 0 8px 24px rgb(8 8 24 / 40%), 0 0 0 1px rgb(93 93 255 / 30%);
  color: #fff;
  cursor: pointer;
  height: 56px;
  padding: 0;
  position: fixed;
  /* Chevauche l'emplacement du bouton robot (même ancrage "right") : son
     extrémité droite passe derrière lui, ne laissant dépasser qu'un
     croissant sur la gauche. */
  right: 0;
  top: 36%;
  transform: translateY(-50%);
  transition: right 0.3s ease, width 0.3s ease, opacity 0.2s ease, background 0.2s ease;
  width: 72px;
  z-index: 2099;
}

.ai-assistant-collapse-handle:hover {
  background: linear-gradient(135deg, rgb(110 110 255 / 95%), rgb(58 24 104 / 95%));
}

.ai-assistant-collapse-handle span {
  border-style: solid;
  border-width: 3px 0 3px 4px;
  border-color: transparent transparent transparent #fff;
  display: block;
  height: 0;
  left: 8px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
}

.ai-assistant-collapse-handle.is-collapsed {
  right: 0;
  width: 24px;
}

.ai-assistant-collapse-handle.is-collapsed span {
  border-width: 3px 4px 3px 0;
  border-color: transparent #fff transparent transparent;
  left: 6px;
}

[data-theme="light"] .ai-assistant-collapse-handle {
  background: rgb(255 255 255 / 96%);
  border-color: rgb(200 34 255 / 45%);
  box-shadow: 0 8px 24px rgb(88 74 136 / 18%), 0 0 0 1px rgb(200 34 255 / 22%);
}

[data-theme="light"] .ai-assistant-collapse-handle:hover {
  background: rgb(255 255 255 / 100%);
}

[data-theme="light"] .ai-assistant-collapse-handle span {
  border-color: transparent transparent transparent #2f2b5f;
}

[data-theme="light"] .ai-assistant-collapse-handle.is-collapsed span {
  border-color: transparent #2f2b5f transparent transparent;
}

.ai-assistant-collapse-handle.is-panel-open,
body.body-menu-open .ai-assistant-collapse-handle {
  opacity: 0;
  pointer-events: none;
}

.ai-assistant-panel {
  --ai-history-width: clamp(252px, 30cqw, 318px);
  --ai-sources-width: clamp(264px, 26cqw, 320px);
  --ai-thread-gutter: 30px;
  --ai-rail-space: 74px;
  --ai-merged-rail-space: 62px;
  backdrop-filter: blur(22px) saturate(150%);
  background: linear-gradient(180deg, rgb(20 22 42 / 82%), rgb(11 13 28 / 88%));
  border: 2px solid transparent;
  border-radius: 15px;
  container-type: inline-size;
  left: 50%;
  box-shadow:
    0 18px 44px rgb(5 5 15 / 62%),
    0 0 0 1px rgb(93 93 255 / 28%),
    0 0 0 2px rgb(151 110 255 / 36%),
    0 0 26px rgb(123 86 255 / 26%);
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
  opacity: 0;
  pointer-events: none;
  position: fixed;
  resize: none;
  top: 12px;
  transform: translateX(-50%) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
  overflow: hidden;
  width: min(940px, calc(100vw - 24px));
  z-index: 2101;
  background-image:
    radial-gradient(circle at 16% 0%, rgb(121 230 255 / 13%), transparent 32%),
    radial-gradient(circle at 84% 12%, rgb(200 34 255 / 16%), transparent 34%),
    linear-gradient(180deg, rgb(20 22 42 / 82%), rgb(11 13 28 / 88%)),
    linear-gradient(130deg, rgb(116 99 255 / 85%), rgb(200 34 255 / 82%), rgb(116 99 255 / 85%));
  background-origin: border-box;
  background-clip: padding-box, padding-box, padding-box, border-box;
  font-family: var(--font-ai-assistant);
}

.ai-assistant-launcher,
.ai-assistant-panel button,
.ai-assistant-panel input,
.ai-assistant-panel textarea,
.ai-assistant-panel select {
  font-family: var(--font-ai-assistant);
}

.ai-assistant-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.ai-assistant-panel.is-expanded {
  border-radius: 12px;
  height: calc(100dvh - 16px) !important;
  inset: 8px !important;
  left: 8px !important;
  max-height: none !important;
  max-width: none !important;
  position: fixed !important;
  resize: none;
  top: 8px !important;
  transform: none !important;
  width: calc(100vw - 16px) !important;
}

.ai-assistant-header {
  align-items: center;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  cursor: grab;
  display: flex;
  justify-content: center;
  min-height: 62px;
  padding: 13px 116px 12px 98px;
  position: relative;
  text-align: center;
}

.ai-assistant-header-logo,
.ai-assistant-header-icon {
  display: block;
  height: 42px;
  left: 50%;
  object-fit: contain;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
}

.ai-assistant-panel.is-dragging .ai-assistant-header {
  cursor: grabbing;
  user-select: none;
}

.ai-assistant-panel.is-resizing,
.ai-assistant-panel.is-resizing * {
  user-select: none;
}

.ai-assistant-resize-handle {
  border-color: rgb(158 196 255 / 72%);
  display: block;
  height: 24px;
  opacity: 0.78;
  position: absolute;
  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  width: 24px;
  z-index: 3;
}

.ai-assistant-resize-handle::after {
  border-color: inherit;
  border-style: solid;
  content: "";
  height: 11px;
  position: absolute;
  width: 11px;
}

.ai-assistant-resize-handle:hover {
  border-color: rgb(224 134 255 / 92%);
  box-shadow: 0 0 18px rgb(93 93 255 / 24%);
  opacity: 1;
}

.ai-assistant-resize-handle--nw {
  cursor: nwse-resize;
  left: 5px;
  top: 5px;
}

.ai-assistant-resize-handle--nw::after {
  border-width: 2px 0 0 2px;
  left: 2px;
  top: 2px;
}

.ai-assistant-resize-handle--ne {
  cursor: nesw-resize;
  right: 5px;
  top: 5px;
}

.ai-assistant-resize-handle--ne::after {
  border-width: 2px 2px 0 0;
  right: 2px;
  top: 2px;
}

.ai-assistant-resize-handle--sw {
  bottom: 5px;
  cursor: nesw-resize;
  left: 5px;
}

.ai-assistant-resize-handle--sw::after {
  border-width: 0 0 2px 2px;
  bottom: 2px;
  left: 2px;
}

.ai-assistant-resize-handle--se {
  bottom: 5px;
  cursor: nwse-resize;
  right: 5px;
}

.ai-assistant-resize-handle--se::after {
  border-width: 0 2px 2px 0;
  bottom: 2px;
  right: 2px;
}

.ai-assistant-panel.is-expanded .ai-assistant-resize-handle {
  display: none;
}

@media (width >= 769px) {
  .ai-assistant-panel {
    min-height: 420px;
    min-width: 560px;
    max-height: calc(100dvh - 16px);
    max-width: calc(100vw - 16px);
  }
}

@media (width <= 768px) {
  .ai-assistant-header {
    cursor: default;
    min-height: 58px;
    padding-left: 98px;
    padding-right: 104px;
  }

  .ai-assistant-panel {
    resize: none;
  }

  .ai-assistant-resize-handle {
    display: none;
  }
}

.ai-assistant-history-toggle {
  align-items: center;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 50%;
  color: #9ec4ff;
  cursor: pointer;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  left: 16px;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: 38px;
  z-index: 4;
}

.ai-assistant-history-toggle img {
  display: block;
  filter: drop-shadow(0 0 7px rgb(121 230 255 / 16%));
  height: 20px;
  object-fit: contain;
  width: 20px;
}

.ai-assistant-history-toggle:hover,
.ai-assistant-history-toggle.is-active {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(121 230 255 / 30%);
  box-shadow: 0 0 18px rgb(121 230 255 / 13%);
}

.ai-assistant-history-toggle:hover {
  transform: translateY(calc(-50% - 1px));
}

.ai-assistant-session-bar {
  backdrop-filter: blur(24px) saturate(150%);
  background:
    radial-gradient(circle at 18% 0%, rgb(121 230 255 / 15%), transparent 36%),
    radial-gradient(circle at 88% 14%, rgb(200 34 255 / 18%), transparent 38%),
    linear-gradient(180deg, rgb(29 28 61 / 88%), rgb(14 13 34 / 92%)),
    linear-gradient(145deg, rgb(121 230 255 / 34%), rgb(157 125 255 / 30%), rgb(200 34 255 / 26%));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  bottom: 12px;
  box-shadow:
    18px 0 44px rgb(0 0 0 / 26%),
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 0 24px rgb(93 93 255 / 10%);
  color: rgb(246 247 255 / 92%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  left: var(--ai-merged-rail-space, 62px);
  opacity: 0;
  overflow: visible;
  padding: 18px 14px 14px;
  pointer-events: none;
  position: absolute;
  top: 74px;
  transform: translateX(calc(-100% - 90px));
  transition: opacity 0.22s ease, transform 0.22s ease;
  width: var(--ai-history-width);
  z-index: 7;
}

/* Fusion visuelle rail + panneau lateral en un seul bloc continu (facon ChatGPT) :
   quand l'historique est ouvert, le rail perd son propre fond/bordure/coins a droite
   et se fond directement dans le panneau, qui vient combler l'espace sans interstice. */
.ai-assistant-panel.has-rail.has-history-open .ai-assistant-rail {
  background: transparent;
  border-color: transparent;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none;
}

.ai-assistant-panel.has-rail.has-history-open .ai-assistant-session-bar {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.ai-assistant-sidebar-shell {
  display: none;
}

.ai-assistant-panel.has-rail.has-history-open .ai-assistant-sidebar-shell {
  background:
    radial-gradient(circle at 18% 0%, rgb(121 230 255 / 15%), transparent 36%),
    radial-gradient(circle at 88% 14%, rgb(200 34 255 / 18%), transparent 38%),
    linear-gradient(180deg, rgb(29 28 61 / 88%), rgb(14 13 34 / 92%)),
    linear-gradient(145deg, rgb(121 230 255 / 34%), rgb(157 125 255 / 30%), rgb(200 34 255 / 26%));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  bottom: 12px;
  box-shadow:
    18px 0 44px rgb(0 0 0 / 26%),
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 0 24px rgb(93 93 255 / 10%);
  display: block;
  left: 12px;
  pointer-events: none;
  position: absolute;
  top: 74px;
  width: calc(50px + var(--ai-history-width));
  z-index: 6;
}

/* Rail d'icones permanent (facon ChatGPT), toujours visible au bord gauche.
   La barre laterale complete s'ouvre A COTE (a droite) du rail. */
.ai-assistant-rail {
  align-items: center;
  background:
    linear-gradient(180deg, rgb(19 23 52 / 96%), rgb(12 15 35 / 96%)),
    rgb(14 17 40 / 95%);
  border: 1px solid rgb(93 93 255 / 26%);
  border-radius: 18px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  left: 12px;
  padding: 12px 0;
  position: absolute;
  top: 74px;
  width: 50px;
  z-index: 8;
}

.ai-assistant-rail-group {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-assistant-rail-btn {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgb(235 240 255 / 82%);
  cursor: pointer;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  width: 38px;
}

.ai-assistant-rail-btn:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(121 230 255 / 32%);
  color: #fff;
}

.ai-assistant-rail-btn:focus-visible {
  outline: 2px solid rgb(121 230 255 / 60%);
  outline-offset: 2px;
}

.ai-assistant-rail-btn.is-active {
  background: rgb(121 230 255 / 16%);
  border-color: rgb(121 230 255 / 42%);
}

.ai-assistant-rail-btn img {
  height: 20px;
  object-fit: contain;
  width: 20px;
}

/* Avatar de profil ancre tout en bas du panneau lateral deplie (facon ChatGPT),
   en dehors de la zone de defilement pour rester toujours visible. */
.ai-assistant-sidebar-profile {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgb(246 247 255 / 92%);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  margin: 4px 14px 14px;
  padding: 8px 10px;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.ai-assistant-sidebar-profile:hover,
.ai-assistant-sidebar-profile.is-active {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(121 230 255 / 28%);
}

.ai-assistant-sidebar-profile-avatar {
  border-radius: 50%;
  flex: 0 0 auto;
  height: 30px;
  object-fit: cover;
  width: 30px;
}

.ai-assistant-sidebar-profile-name {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Menu profil ancre a l'avatar en bas du panneau lateral (pop-up vers le haut). */
.ai-assistant-profile-menu {
  background: linear-gradient(180deg, rgb(26 26 52 / 97%), rgb(15 14 34 / 98%));
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 14px;
  bottom: 14px;
  box-shadow: 0 18px 44px rgb(0 0 0 / 50%);
  left: var(--ai-merged-rail-space, 62px);
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  width: 250px;
  z-index: 30;
}

.ai-assistant-profile-menu[hidden] {
  display: none;
}

.ai-assistant-profile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ai-assistant-profile-menu-head {
  align-items: center;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  padding: 8px 8px 10px;
}

.ai-assistant-profile-menu-avatar {
  border-radius: 50%;
  flex: 0 0 auto;
  height: 38px;
  object-fit: cover;
  width: 38px;
}

.ai-assistant-profile-menu-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ai-assistant-profile-menu-name {
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-profile-menu-email {
  color: rgb(235 240 255 / 55%);
  font-family: var(--font-body);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-profile-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-assistant-profile-menu-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: rgb(246 247 255 / 92%);
  cursor: pointer;
  display: flex;
  font-family: var(--font-body);
  font-size: 0.82rem;
  gap: 10px;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}

.ai-assistant-profile-menu-item:hover {
  background: rgb(255 255 255 / 8%);
}

.ai-assistant-profile-menu-item svg {
  color: rgb(235 240 255 / 75%);
  flex: 0 0 auto;
}

[data-theme="light"] .ai-assistant-profile-menu {
  background: linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(245 244 255 / 99%));
  border-color: rgb(93 93 255 / 18%);
  box-shadow: 0 18px 44px rgb(88 74 136 / 22%);
}

[data-theme="light"] .ai-assistant-profile-menu-name {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-profile-menu-email {
  color: rgb(47 43 95 / 60%);
}

[data-theme="light"] .ai-assistant-profile-menu-item {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-profile-menu-item:hover {
  background: rgb(93 93 255 / 10%);
}

[data-theme="light"] .ai-assistant-profile-menu-item svg {
  color: rgb(47 43 95 / 70%);
}

[data-theme="light"] .ai-assistant-sidebar-profile {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-sidebar-profile:hover,
[data-theme="light"] .ai-assistant-sidebar-profile.is-active {
  background: rgb(93 93 255 / 10%);
  border-color: rgb(93 93 255 / 24%);
}

/* Le rail remplace le toggle d'historique du header (evite le doublon). */
.ai-assistant-panel.has-rail .ai-assistant-history-toggle {
  display: none;
}

/* Le rail porte l'acces aux Parametres : on masque le bouton redondant de la
   sidebar (il reste dans le DOM pour conserver son handler, declenche par le
   rail via un clic programmatique). */
.ai-assistant-panel.has-rail .ai-assistant-settings-open {
  display: none;
}

/* Reservation de la largeur du rail cote gauche (toujours presente). */
.ai-assistant-panel.has-rail .ai-assistant-messages,
.ai-assistant-panel.has-rail .ai-assistant-quick-actions {
  padding-left: var(--ai-rail-space);
}

.ai-assistant-panel.has-rail .ai-assistant-form {
  margin-left: calc(var(--ai-rail-space, 74px) + 10px);
}

/* Modale de recherche de discussions (facon ChatGPT). */
.ai-assistant-search-modal {
  align-items: flex-start;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding-top: 11vh;
  position: absolute;
  transition: opacity 0.18s ease;
  z-index: 60;
}

.ai-assistant-search-modal[hidden] {
  display: none;
}

.ai-assistant-search-modal.is-open {
  opacity: 1;
}

.ai-assistant-search-modal-backdrop {
  backdrop-filter: blur(5px);
  background: rgb(5 6 18 / 55%);
  inset: 0;
  position: absolute;
}

.ai-assistant-search-dialog {
  background: linear-gradient(180deg, rgb(26 26 52 / 96%), rgb(15 14 34 / 97%));
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
  display: flex;
  flex-direction: column;
  max-height: 72%;
  overflow: hidden;
  position: relative;
  transform: translateY(-8px);
  transition: transform 0.18s ease;
  width: min(620px, calc(100% - 48px));
}

.ai-assistant-search-modal.is-open .ai-assistant-search-dialog {
  transform: translateY(0);
}

.ai-assistant-search-input-row {
  align-items: center;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  display: flex;
  gap: 10px;
  padding: 14px 16px;
}

.ai-assistant-search-input-icon {
  color: rgb(235 240 255 / 60%);
  display: inline-flex;
}

.ai-assistant-search-modal-input {
  background: transparent;
  border: 0;
  color: #fff;
  flex: 1;
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
}

.ai-assistant-search-modal-input::placeholder {
  color: rgb(235 240 255 / 45%);
}

.ai-assistant-search-modal-close {
  background: transparent;
  border: 0;
  color: rgb(235 240 255 / 70%);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 4px;
}

.ai-assistant-search-modal-close:hover {
  color: #fff;
}

.ai-assistant-search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 8px;
}

.ai-assistant-search-result {
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.ai-assistant-search-result:hover,
.ai-assistant-search-result.is-active {
  background: rgb(255 255 255 / 8%);
}

.ai-assistant-search-result--new {
  align-items: center;
  flex-direction: row;
  font-weight: 600;
  gap: 10px;
}

.ai-assistant-search-result--new img {
  height: 18px;
  object-fit: contain;
  width: 18px;
}

.ai-assistant-search-result-title {
  font-size: 0.92rem;
}

.ai-assistant-search-result-meta {
  color: rgb(235 240 255 / 50%);
  font-size: 0.76rem;
}

.ai-assistant-search-empty {
  color: rgb(235 240 255 / 55%);
  padding: 16px;
  text-align: center;
}

/* Modale d'entree (creation de projet, etc.) — reutilise le socle .ai-assistant-search-modal. */
.ai-assistant-input-dialog {
  background: linear-gradient(180deg, rgb(26 26 52 / 97%), rgb(15 14 34 / 98%));
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  position: relative;
  text-align: left;
  transform: translateY(-8px);
  transition: transform 0.18s ease;
  width: min(520px, calc(100% - 48px));
}

.ai-assistant-search-modal.is-open .ai-assistant-input-dialog {
  transform: translateY(0);
}

.ai-assistant-input-modal-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.ai-assistant-input-modal-title {
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.05rem;
  margin: 0;
}

.ai-assistant-input-modal-label {
  color: rgb(235 240 255 / 72%);
  font-family: var(--font-body);
  font-size: 0.82rem;
}

.ai-assistant-input-modal-field {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  padding: 12px 14px;
  width: 100%;
}

.ai-assistant-input-modal-field:focus {
  border-color: rgb(121 230 255 / 55%);
}

.ai-assistant-input-modal-field::placeholder {
  color: rgb(235 240 255 / 40%);
}

.ai-assistant-input-modal-hint {
  color: rgb(235 240 255 / 52%);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
}

.ai-assistant-input-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

.ai-assistant-input-modal-btn {
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 16px;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.ai-assistant-input-modal-btn--ghost {
  background: transparent;
  border: 1px solid rgb(255 255 255 / 18%);
  color: rgb(235 240 255 / 85%);
}

.ai-assistant-input-modal-btn--ghost:hover {
  background: rgb(255 255 255 / 8%);
}

.ai-assistant-input-modal-btn--primary {
  background: linear-gradient(135deg, #6f6bff, #9d7dff);
  border: 1px solid transparent;
  color: #fff;
}

.ai-assistant-input-modal-btn--primary:hover {
  transform: translateY(-1px);
}

[data-theme="light"] .ai-assistant-input-dialog {
  background: linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(245 244 255 / 99%));
  border-color: rgb(93 93 255 / 18%);
  box-shadow: 0 30px 80px rgb(88 74 136 / 22%);
}

[data-theme="light"] .ai-assistant-search-modal-backdrop {
  background: rgb(47 43 95 / 18%);
}

[data-theme="light"] .ai-assistant-search-dialog {
  background: linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(245 244 255 / 99%));
  border-color: rgb(93 93 255 / 18%);
  box-shadow: 0 30px 80px rgb(88 74 136 / 22%);
}

[data-theme="light"] .ai-assistant-search-input-row {
  border-bottom-color: rgb(93 93 255 / 12%);
}

[data-theme="light"] .ai-assistant-search-input-icon {
  color: rgb(47 43 95 / 60%);
}

[data-theme="light"] .ai-assistant-search-modal-input {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-search-modal-input::placeholder {
  color: rgb(47 43 95 / 45%);
}

[data-theme="light"] .ai-assistant-search-modal-close {
  color: rgb(47 43 95 / 70%);
}

[data-theme="light"] .ai-assistant-search-modal-close:hover {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-search-result {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-search-result:hover,
[data-theme="light"] .ai-assistant-search-result.is-active {
  background: rgb(93 93 255 / 8%);
}

[data-theme="light"] .ai-assistant-search-result-title {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-search-result-meta {
  color: rgb(47 43 95 / 55%);
}

[data-theme="light"] .ai-assistant-search-empty {
  color: rgb(47 43 95 / 55%);
}

[data-theme="light"] .ai-assistant-input-modal-title {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-input-modal-label {
  color: rgb(47 43 95 / 80%);
}

[data-theme="light"] .ai-assistant-input-modal-field {
  background: rgb(93 93 255 / 6%);
  border-color: rgb(93 93 255 / 24%);
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-input-modal-field::placeholder {
  color: rgb(47 43 95 / 45%);
}

[data-theme="light"] .ai-assistant-input-modal-hint {
  color: rgb(47 43 95 / 60%);
}

[data-theme="light"] .ai-assistant-input-modal-btn--ghost {
  border-color: rgb(93 93 255 / 24%);
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-input-modal-close {
  color: #2f2b5f;
}

/* Conteneur scrollable englobant tout le contenu de la sidebar (facon ChatGPT) :
   tout le panneau gauche defile, tandis que la poignee de resize et les menus
   contextuels restent hors de ce conteneur pour ne pas etre rognes. */
.ai-assistant-sidebar-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-color: rgb(121 230 255 / 34%) transparent;
  scrollbar-width: thin;
}

/* Empeche les sections (Projets, Discussions recentes…) de se faire ecraser a
   hauteur 0 par le flex quand le contenu depasse : sans cela leur contenu
   debordait et se superposait. On garde leur hauteur naturelle et c'est le
   conteneur qui defile. */
.ai-assistant-sidebar-scroll > * {
  flex-shrink: 0;
}

.ai-assistant-sidebar-nav {
  display: grid;
  gap: 10px;
}

.ai-assistant-session-search-wrap {
  align-items: center;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  display: flex;
  gap: 9px;
  min-height: 40px;
  padding: 0 12px;
}

.ai-assistant-session-search-icon {
  display: block;
  flex: 0 0 auto;
  height: 18px;
  object-fit: contain;
  width: 18px;
}

.ai-assistant-session-search {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgb(246 247 255 / 92%);
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.77rem;
  min-width: 0;
  outline: 0;
  padding: 8px 0;
}

.ai-assistant-session-search::placeholder {
  color: rgb(235 240 255 / 58%);
}

.ai-assistant-sidebar-action {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 11px;
  color: rgb(246 247 255 / 92%);
  cursor: pointer;
  display: flex;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  width: 100%;
}

.ai-assistant-sidebar-action img {
  display: block;
  height: 20px;
  object-fit: contain;
  width: 20px;
}

.ai-assistant-sidebar-action:hover,
.ai-assistant-sidebar-action.is-active {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 8%);
}

.ai-assistant-sidebar-action:hover {
  transform: translateY(-1px);
}

.ai-assistant-projects-block {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.ai-assistant-sidebar-section {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.ai-assistant-section-header {
  align-items: center;
  color: rgb(246 247 255 / 92%);
  display: flex;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.02em;
  /* padding-left aligne l'icone de section avec celle des boutons d'action. */
  padding: 0 2px 0 12px;
}

.ai-assistant-section-toggle {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: 1;
  font: inherit;
  gap: 10px;
  min-width: 0;
  padding: 4px 0;
  text-align: left;
}

.ai-assistant-section-icon {
  display: block;
  flex: 0 0 auto;
  height: 20px;
  object-fit: contain;
  width: 20px;
}

.ai-assistant-section-title {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-section-count {
  color: rgb(246 247 255 / 92%);
  flex: 0 0 auto;
  font-size: 0.63rem;
}

.ai-assistant-section-chevron {
  color: rgb(246 247 255 / 92%);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  /* Chevron place juste apres le libelle (facon ChatGPT "Epingles ›"), et non
     rejete a l'extremite. order:5 le met apres le titre/compteur. */
  order: 5;
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}

.ai-assistant-sidebar-section.is-collapsed .ai-assistant-section-chevron {
  transform: rotate(0deg);
}

.ai-assistant-projects-head #ai-assistant-project-create {
  align-items: center;
  background: rgb(121 230 255 / 13%);
  border: 1px solid rgb(121 230 255 / 24%);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: 700 1rem/1 var(--font-body);
  height: 26px;
  justify-content: center;
  width: 26px;
}

.ai-assistant-projects-block > .ai-assistant-project-list {
  display: grid;
  gap: 6px !important;
  max-height: none;
  overflow-y: visible;
  padding-right: 2px;
  transition: max-height 0.2s ease, opacity 0.18s ease, visibility 0.18s ease;
}

.ai-assistant-sidebar-empty-state {
  border: 1px dashed rgb(255 255 255 / 14%);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.ai-assistant-sidebar-empty-state p {
  color: rgb(235 240 255 / 58%);
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.4;
  margin: 0;
}

.ai-assistant-sidebar-empty-action,
.ai-assistant-project-empty-panel button {
  align-items: center;
  background: rgb(121 230 255 / 13%);
  border: 1px solid rgb(121 230 255 / 24%);
  border-radius: 8px;
  color: rgb(246 247 255 / 92%);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  justify-content: center;
  min-height: 30px;
  padding: 7px 10px;
}

.ai-assistant-project-empty-panel {
  align-items: start;
  background: rgb(255 255 255 / 5%);
  border: 1px dashed rgb(255 255 255 / 14%);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.ai-assistant-project-empty-panel p {
  color: rgb(235 240 255 / 58%);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
}

.ai-assistant-projects-block.is-collapsed > .ai-assistant-project-list,
.ai-assistant-recent-block.is-collapsed + .ai-assistant-session-select + .ai-assistant-session-list {
  flex: 0 0 auto;
  max-height: 0;
  min-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.ai-assistant-project-item {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgb(246 247 255 / 88%);
  cursor: pointer;
  display: grid;
  font-family: var(--font-body);
  gap: 9px;
  grid-template-columns: 30px minmax(0, 1fr);
  padding: 8px 9px;
  text-align: left;
  width: 100%;
}

.ai-assistant-project-item:hover,
.ai-assistant-project-item.is-active {
  background: rgb(255 255 255 / 7%);
  border-color: rgb(121 230 255 / 16%);
  color: #fff;
}

.ai-assistant-project-item-icon {
  align-items: center;
  background: color-mix(in srgb, var(--project-color, #79e6ff) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--project-color, #79e6ff) 45%, transparent);
  border-radius: 8px;
  color: rgb(246 247 255 / 94%);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.ai-assistant-project-item-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ai-assistant-project-item-body strong,
.ai-assistant-project-item-body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-project-item-body strong {
  font-size: 0.78rem;
  line-height: 1.25;
}

.ai-assistant-project-item-body span {
  color: rgb(235 240 255 / 48%);
  font-size: 0.64rem;
  line-height: 1.25;
}

.ai-assistant-library-panel {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 3%)),
    linear-gradient(135deg, rgb(121 230 255 / 16%), rgb(200 34 255 / 13%));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1px solid transparent;
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
  display: grid;
  gap: 8px;
  padding: 10px;
}

.ai-assistant-library-panel[hidden] {
  display: none;
}

.ai-assistant-library-head {
  align-items: center;
  color: rgb(235 240 255 / 62%);
  display: flex;
  font-family: var(--font-body);
  font-size: 0.68rem;
  gap: 8px;
  justify-content: space-between;
  line-height: 1.25;
}

.ai-assistant-library-clear {
  appearance: none;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  color: rgb(246 247 255 / 82%);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 0.62rem;
  line-height: 1;
  padding: 5px 8px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ai-assistant-library-clear:hover {
  background: rgb(121 230 255 / 14%);
  border-color: rgb(121 230 255 / 22%);
  color: #fff;
}

.ai-assistant-library-list {
  display: grid;
  gap: 6px;
  max-height: 108px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-color: rgb(121 230 255 / 34%) transparent;
  scrollbar-width: thin;
}

.ai-assistant-library-item {
  background: rgb(9 10 25 / 22%);
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: 9px;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
}

.ai-assistant-library-item-name {
  color: rgb(246 247 255 / 91%);
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-library-item-meta {
  color: rgb(121 230 255 / 68%);
  display: block;
  font-family: var(--font-body);
  font-size: 0.61rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-library-view,
.ai-assistant-project-view,
.ai-assistant-settings-view {
  flex: 1;
  margin-left: 0;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(24px, 4cqw, 42px);
  position: relative;
  transition: margin-left 0.22s ease;
}

.ai-assistant-library-view[hidden],
.ai-assistant-project-view[hidden],
.ai-assistant-settings-view[hidden] {
  display: none;
}

.ai-assistant-library-view-inner,
.ai-assistant-project-view-inner,
.ai-assistant-settings-view-inner {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: min(760px, 100%);
}

.ai-assistant-project-view-inner,
.ai-assistant-settings-view-inner {
  max-width: min(820px, 100%);
}

.ai-assistant-project-hero {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 52px minmax(0, 1fr);
}

.ai-assistant-project-icon {
  align-items: center;
  background: color-mix(in srgb, var(--project-color, #79e6ff) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--project-color, #79e6ff) 44%, transparent);
  border-radius: 12px;
  color: #fff;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 800;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.ai-assistant-project-icon img,
.ai-assistant-project-item-icon img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ai-assistant-project-item-icon {
  overflow: hidden;
}

.ai-assistant-project-hero h3,
.ai-assistant-settings-head h3 {
  color: rgb(246 247 255 / 94%);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2.6cqw, 1.32rem);
  line-height: 1.2;
  margin: 0;
}

.ai-assistant-project-hero p,
.ai-assistant-settings-head p {
  color: rgb(235 240 255 / 58%);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 5px 0 0;
}

.ai-assistant-project-stats,
.ai-assistant-project-rag {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
}

.ai-assistant-project-stat,
.ai-assistant-project-rag div {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 10px;
  display: grid;
  gap: 5px;
  padding: 10px 11px;
}

.ai-assistant-project-stat span,
.ai-assistant-project-rag span {
  color: rgb(235 240 255 / 52%);
  font-family: var(--font-body);
  font-size: 0.66rem;
  line-height: 1.25;
}

.ai-assistant-project-stat strong,
.ai-assistant-project-rag strong {
  color: rgb(246 247 255 / 94%);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.25;
}

.ai-assistant-project-rag p {
  color: rgb(235 240 255 / 58%);
  font-family: var(--font-body);
  font-size: 0.76rem;
  grid-column: 1 / -1;
  line-height: 1.45;
  margin: 0;
}

.ai-assistant-project-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-assistant-project-source-actions button,
.ai-assistant-project-row-action {
  background: rgb(121 230 255 / 12%);
  border: 1px solid rgb(121 230 255 / 22%);
  border-radius: 8px;
  color: rgb(246 247 255 / 92%);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  min-height: 30px;
  padding: 7px 10px;
}

.ai-assistant-project-row-action {
  justify-self: start;
  margin-top: 4px;
}

.ai-assistant-project-tabs {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}

.ai-assistant-project-tabs button {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: rgb(246 247 255 / 64%);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  min-height: 32px;
  padding: 7px 10px;
}

.ai-assistant-project-tabs button.is-active,
.ai-assistant-project-tabs button:hover {
  background: rgb(121 230 255 / 14%);
  color: #fff;
}

.ai-assistant-project-content,
.ai-assistant-settings-sections,
.ai-assistant-project-list {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.ai-assistant-project-source-group-heading {
  color: rgb(246 247 255 / 55%);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 14px 0 8px;
  text-transform: uppercase;
}

[data-theme="light"] .ai-assistant-project-source-group-heading {
  color: rgb(47 43 95 / 60%);
}

.ai-assistant-project-new-conversation {
  align-items: center;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 12px;
  color: rgb(246 247 255 / 92%);
  cursor: pointer;
  display: flex;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 14px;
  transition: background 0.18s ease, border-color 0.18s ease;
  width: 100%;
}

.ai-assistant-project-new-conversation:hover {
  background: rgb(121 230 255 / 14%);
  border-color: rgb(121 230 255 / 36%);
}

.ai-assistant-project-new-conversation img {
  height: 18px;
  object-fit: contain;
  width: 18px;
}

[data-theme="light"] .ai-assistant-project-new-conversation {
  background: rgb(93 93 255 / 6%);
  border-color: rgb(93 93 255 / 18%);
  color: #2f2b5f;
}

.ai-assistant-project-row {
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 10px;
  color: inherit;
  display: grid;
  font-family: var(--font-body);
  gap: 4px;
  padding: 10px 11px;
  text-align: left;
}

button.ai-assistant-project-row {
  cursor: pointer;
}

.ai-assistant-project-row strong {
  color: rgb(246 247 255 / 92%);
  font-size: 0.76rem;
  line-height: 1.3;
}

.ai-assistant-project-row span,
.ai-assistant-project-empty {
  color: rgb(246 247 255 / 92%);
  font-family: var(--font-body);
  font-size: 0.66rem;
  line-height: 1.4;
}

.ai-assistant-project-memory,
.ai-assistant-project-settings input,
.ai-assistant-project-settings textarea,
.ai-assistant-project-settings select,
.ai-assistant-settings-section input {
  background: rgb(80 78 140 / 38%);
  border: 1px solid rgb(157 125 255 / 30%);
  border-radius: 9px;
  color: rgb(246 247 255 / 92%);
  font-family: var(--font-body);
  font-size: 0.8rem;
  min-width: 0;
  padding: 9px 10px;
  width: 100%;
}

.ai-assistant-project-settings,
.ai-assistant-settings-section {
  background:
    radial-gradient(circle at 18% 0%, rgb(121 230 255 / 12%), transparent 36%),
    radial-gradient(circle at 88% 14%, rgb(200 34 255 / 14%), transparent 38%),
    linear-gradient(180deg, rgb(29 28 61 / 88%), rgb(14 13 34 / 92%)),
    linear-gradient(145deg, rgb(121 230 255 / 24%), rgb(157 125 255 / 20%), rgb(200 34 255 / 18%));
  background-clip: padding-box, padding-box, padding-box, border-box;
  background-origin: border-box;
  border: 1px solid transparent;
  border-radius: 12px;
  display: grid;
  gap: 12px;
  padding: 13px;
}

.ai-assistant-project-settings label,
.ai-assistant-settings-section label {
  color: rgb(235 240 255 / 60%);
  display: grid;
  font-family: var(--font-body);
  font-size: 0.72rem;
  gap: 6px;
}

.ai-assistant-settings-section h4 {
  color: rgb(246 247 255 / 92%);
  font-family: var(--font-body);
  font-size: 0.92rem;
  margin: 0;
}

.ai-assistant-project-settings > strong {
  color: rgb(246 247 255 / 92%);
  font-family: var(--font-body);
  font-size: 0.82rem;
}

.ai-assistant-project-check {
  align-items: center;
  display: flex !important;
  flex-direction: row;
  gap: 8px;
}

.ai-assistant-project-check input,
.ai-assistant-settings-section input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
}

.ai-assistant-settings-feedback {
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  margin: 0;
  padding: 8px 10px;
}

.ai-assistant-settings-feedback[hidden] {
  display: none;
}

.ai-assistant-settings-feedback.is-success {
  background: rgb(157 245 195 / 12%);
  border: 1px solid rgb(157 245 195 / 30%);
  color: #9df5c3;
}

.ai-assistant-settings-feedback.is-error {
  background: rgb(255 107 107 / 12%);
  border: 1px solid rgb(255 107 107 / 30%);
  color: #ff6b6b;
}

.ai-assistant-settings-data-row {
  display: grid;
  gap: 8px;
}

.ai-assistant-settings-data-status {
  color: rgb(235 240 255 / 60%);
  font-family: var(--font-body);
  font-size: 0.72rem;
}

.ai-assistant-project-delete-dialog {
  align-items: center;
  background: rgb(0 0 0 / 62%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: absolute;
  z-index: 35;
}

.ai-assistant-project-delete-dialog[hidden] {
  display: none;
}

.ai-assistant-project-delete-panel {
  background:
    linear-gradient(180deg, rgb(28 28 42 / 98%), rgb(13 14 28 / 98%)),
    linear-gradient(135deg, rgb(255 255 255 / 18%), rgb(255 93 124 / 20%));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 45%);
  display: grid;
  gap: 12px;
  max-width: min(420px, 100%);
  padding: 18px;
  width: 100%;
}

.ai-assistant-project-delete-panel h3 {
  color: rgb(246 247 255 / 96%);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.25;
  margin: 0;
}

.ai-assistant-project-delete-panel p {
  color: rgb(235 240 255 / 68%);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
}

.ai-assistant-project-delete-note {
  color: rgb(255 205 216 / 78%) !important;
}

.ai-assistant-project-delete-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.ai-assistant-project-delete-actions button {
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 9px;
  color: rgb(246 247 255 / 92%);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  min-height: 34px;
  padding: 8px 12px;
}

#ai-assistant-project-delete-confirm {
  background: rgb(255 82 132 / 18%);
  border-color: rgb(255 82 132 / 38%);
  color: #ffd8e4;
}

.ai-assistant-library-view-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.ai-assistant-library-view-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ai-assistant-library-count {
  color: rgb(235 240 255 / 58%);
  font-family: var(--font-body);
  font-size: 0.72rem;
  white-space: nowrap;
}

.ai-assistant-library-layout-toggle {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}

.ai-assistant-library-layout-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgb(246 247 255 / 62%);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.67rem;
  padding: 5px 9px;
}

.ai-assistant-library-layout-toggle button.is-active {
  background: rgb(121 230 255 / 14%);
  color: #fff;
}

.ai-assistant-library-view-head h3 {
  color: rgb(246 247 255 / 94%);
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 2.4cqw, 1.18rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.ai-assistant-library-import {
  align-items: center;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 999px;
  color: rgb(246 247 255 / 92%);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 0.74rem;
  gap: 8px;
  min-height: 34px;
  padding: 7px 11px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ai-assistant-library-import img {
  height: 17px;
  object-fit: contain;
  width: 17px;
}

.ai-assistant-library-import:hover {
  background: rgb(121 230 255 / 13%);
  border-color: rgb(121 230 255 / 24%);
  transform: translateY(-1px);
}

.ai-assistant-library-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(152px, 176px));
}

.ai-assistant-library-grid.is-list {
  grid-template-columns: minmax(0, 1fr);
}

.ai-assistant-library-empty {
  color: rgb(235 240 255 / 50%);
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
}

.ai-assistant-media-card {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.ai-assistant-library-grid.is-list .ai-assistant-media-card {
  align-items: center;
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 14px;
  grid-template-columns: 92px minmax(0, 1fr);
  padding: 10px;
}

.ai-assistant-media-card-thumb {
  align-items: center;
  aspect-ratio: 1;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 4%)),
    linear-gradient(135deg, rgb(121 230 255 / 22%), rgb(200 34 255 / 18%));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1px solid transparent;
  border-radius: 13px;
  box-shadow:
    0 12px 30px rgb(0 0 0 / 28%),
    inset 0 1px 0 rgb(255 255 255 / 10%);
  display: flex;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: 100%;
}

.ai-assistant-media-card:hover .ai-assistant-media-card-thumb {
  border-color: rgb(121 230 255 / 40%);
  box-shadow:
    0 16px 36px rgb(0 0 0 / 34%),
    0 0 22px rgb(121 230 255 / 15%);
  transform: translateY(-2px);
}

.ai-assistant-media-card-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ai-assistant-media-card-thumb.has-preview img,
.ai-assistant-chat-media-thumb.has-preview img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ai-assistant-media-card-thumb:not(.ai-assistant-media-card-thumb--image) {
  flex-direction: column;
  gap: 8px;
}

.ai-assistant-media-card-thumb:not(.ai-assistant-media-card-thumb--image) img {
  filter: drop-shadow(0 8px 16px rgb(0 0 0 / 24%));
  height: 54px;
  object-fit: contain;
  width: 54px;
}

.ai-assistant-media-card-thumb.has-preview:not(.ai-assistant-media-card-thumb--image) img {
  filter: none;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.ai-assistant-library-grid.is-list .ai-assistant-media-card-thumb {
  width: 92px;
}

.ai-assistant-library-grid.is-list .ai-assistant-media-card-body span {
  white-space: normal;
}

.ai-assistant-media-card-thumb span {
  color: rgb(121 230 255 / 74%);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-assistant-media-card-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-assistant-media-card-body strong {
  color: rgb(246 247 255 / 92%);
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-media-card-body span {
  color: rgb(235 240 255 / 52%);
  display: block;
  font-family: var(--font-body);
  font-size: 0.64rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-media-card-excerpt {
  color: rgb(121 230 255 / 60%) !important;
}

.ai-assistant-library-card-menu {
  backdrop-filter: blur(18px) saturate(150%);
  background:
    linear-gradient(180deg, rgb(42 43 58 / 94%), rgb(24 25 37 / 96%)),
    linear-gradient(135deg, rgb(255 255 255 / 18%), rgb(121 230 255 / 18%));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1px solid transparent;
  border-radius: 13px;
  box-shadow: 0 18px 40px rgb(0 0 0 / 38%);
  display: none;
  min-width: 182px;
  overflow: hidden;
  padding: 6px;
  position: absolute;
  z-index: 18;
}

.ai-assistant-library-card-menu.is-open {
  display: grid;
}

.ai-assistant-library-card-menu button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: rgb(246 247 255 / 91%);
  cursor: pointer;
  display: flex;
  font-family: var(--font-body);
  font-size: 0.8rem;
  gap: 9px;
  padding: 9px 10px;
  text-align: left;
}

.ai-assistant-library-card-menu button:hover {
  background: rgb(255 255 255 / 9%);
}

.ai-assistant-library-card-menu .ai-assistant-library-menu-delete {
  color: rgb(255 174 198 / 94%);
}

.ai-assistant-library-card-menu .ai-assistant-library-menu-delete:hover {
  background: rgb(255 82 132 / 13%);
  color: #ffd8e4;
}

.ai-assistant-panel.is-library-view .ai-assistant-messages,
.ai-assistant-panel.is-library-view .ai-assistant-rag-status,
.ai-assistant-panel.is-library-view .ai-assistant-quick-actions,
.ai-assistant-panel.is-library-view .ai-assistant-form,
.ai-assistant-panel.is-library-view .ai-assistant-scroll-bottom,
.ai-assistant-panel.is-project-view .ai-assistant-messages,
.ai-assistant-panel.is-project-view .ai-assistant-rag-status,
.ai-assistant-panel.is-project-view .ai-assistant-quick-actions,
.ai-assistant-panel.is-project-view .ai-assistant-form,
.ai-assistant-panel.is-project-view .ai-assistant-scroll-bottom,
.ai-assistant-panel.is-settings-view .ai-assistant-messages,
.ai-assistant-panel.is-settings-view .ai-assistant-rag-status,
.ai-assistant-panel.is-settings-view .ai-assistant-quick-actions,
.ai-assistant-panel.is-settings-view .ai-assistant-form,
.ai-assistant-panel.is-settings-view .ai-assistant-scroll-bottom {
  display: none;
}

/* Les vues (bibliotheque, projet, parametres) reservent toujours l'espace du
   rail a gauche ; quand la sidebar est ouverte (et redimensionnable), on ajoute
   sa largeur courante (--ai-history-width suit le resize) pour que le contenu
   ne passe jamais sous le rail/la sidebar. */
.ai-assistant-panel.has-rail .ai-assistant-library-view,
.ai-assistant-panel.has-rail .ai-assistant-project-view,
.ai-assistant-panel.has-rail .ai-assistant-settings-view {
  margin-left: var(--ai-rail-space, 0px);
}

.ai-assistant-panel.has-history-open .ai-assistant-library-view,
.ai-assistant-panel.has-history-open .ai-assistant-project-view,
.ai-assistant-panel.has-history-open .ai-assistant-settings-view {
  margin-left: calc(var(--ai-merged-rail-space, 62px) + var(--ai-history-width) + 18px);
}

.ai-assistant-media-preview {
  align-items: stretch;
  background: rgb(0 0 0 / 72%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 70px 18px 18px;
  position: absolute;
  z-index: 30;
}

.ai-assistant-media-preview[hidden] {
  display: none;
}

.ai-assistant-media-preview-panel {
  background: rgb(8 9 18 / 96%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 14px;
  box-shadow: 0 22px 54px rgb(0 0 0 / 48%);
  display: flex;
  flex-direction: column;
  max-width: min(920px, 100%);
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.ai-assistant-media-preview-toolbar {
  align-items: center;
  background: rgb(255 255 255 / 7%);
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  display: flex;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
}

.ai-assistant-media-preview-title {
  color: rgb(246 247 255 / 92%);
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-media-preview-toolbar button,
.ai-assistant-chat-media-actions button {
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 999px;
  color: rgb(246 247 255 / 88%);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.68rem;
  padding: 7px 10px;
}

.ai-assistant-media-preview-toolbar button:hover,
.ai-assistant-chat-media-actions button:hover {
  background: rgb(121 230 255 / 13%);
  border-color: rgb(121 230 255 / 24%);
  color: #fff;
}

#ai-assistant-media-preview-close {
  border-radius: 50%;
  font-size: 1.1rem;
  height: 32px;
  line-height: 1;
  padding: 0;
  width: 32px;
}

.ai-assistant-media-preview-body {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.ai-assistant-media-preview-body img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.ai-assistant-media-preview-body pre {
  color: rgb(235 240 255 / 86%);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0;
  max-width: 760px;
  white-space: pre-wrap;
}

.ai-assistant-message--library-media {
  max-width: min(520px, 92%);
  padding: 0;
}

.ai-assistant-chat-media-card {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(92px, 132px) 1fr;
  padding: 12px;
}

.ai-assistant-chat-media-thumb {
  align-items: center;
  aspect-ratio: 1;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.ai-assistant-chat-media-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ai-assistant-chat-media-thumb:not(.ai-assistant-chat-media-thumb--image) {
  flex-direction: column;
  gap: 7px;
}

.ai-assistant-chat-media-thumb:not(.ai-assistant-chat-media-thumb--image) img {
  height: 44px;
  object-fit: contain;
  width: 44px;
}

.ai-assistant-chat-media-thumb.has-preview:not(.ai-assistant-chat-media-thumb--image) img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.ai-assistant-chat-media-thumb span {
  color: rgb(121 230 255 / 74%);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
}

.ai-assistant-chat-media-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ai-assistant-chat-media-body strong {
  color: rgb(246 247 255 / 94%);
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-chat-media-body span {
  color: rgb(235 240 255 / 54%);
  font-family: var(--font-body);
  font-size: 0.68rem;
}

.ai-assistant-chat-media-body p {
  color: rgb(235 240 255 / 75%);
  font-size: 0.75rem;
  line-height: 1.42;
  margin: 0;
}

.ai-assistant-chat-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  grid-column: 1 / -1;
}

.ai-assistant-session-heading {
  align-items: center;
  color: rgb(246 247 255 / 92%);
  display: flex;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 0.02em;
  margin-top: 4px;
  padding: 0 2px 0 12px;
}

.ai-assistant-session-heading img {
  display: block;
  height: 20px;
  object-fit: contain;
  width: 20px;
}

.ai-assistant-panel.has-history-open .ai-assistant-session-bar {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.ai-assistant-panel.has-history-open .ai-assistant-messages,
.ai-assistant-panel.has-history-open .ai-assistant-quick-actions {
  padding-left: calc(var(--ai-merged-rail-space, 62px) + var(--ai-history-width) + 18px + var(--ai-thread-gutter, 30px));
}

.ai-assistant-panel.has-history-open .ai-assistant-form {
  margin-left: calc(var(--ai-merged-rail-space, 62px) + var(--ai-history-width) + 18px + var(--ai-thread-gutter, 30px));
}

.ai-assistant-panel.has-history-open .ai-assistant-scroll-bottom {
  left: calc(50% + ((var(--ai-history-width) + 18px) / 2));
}

/* AI sources side panel */
.ai-sources-panel,
.ai-assistant-sources-panel {
  backdrop-filter: blur(24px) saturate(150%);
  background:
    radial-gradient(circle at 82% 0%, rgb(121 230 255 / 15%), transparent 36%),
    radial-gradient(circle at 12% 14%, rgb(200 34 255 / 18%), transparent 38%),
    linear-gradient(180deg, rgb(29 28 61 / 88%), rgb(14 13 34 / 92%)),
    linear-gradient(145deg, rgb(121 230 255 / 34%), rgb(157 125 255 / 30%), rgb(200 34 255 / 26%));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  bottom: 12px;
  box-shadow:
    -18px 0 44px rgb(0 0 0 / 26%),
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 0 24px rgb(93 93 255 / 10%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 12px;
  text-align: left;
  top: 74px;
  transform: translateX(calc(100% + 26px));
  transition: opacity 0.22s ease, transform 0.22s ease;
  width: var(--ai-sources-width, 380px);
  z-index: 7;
}

.ai-sources-panel--open,
.ai-assistant-sources-panel--open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.ai-sources-panel-header {
  align-items: center;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 16px 14px 18px;
  position: relative;
  z-index: 1;
}

.ai-sources-panel-title {
  align-items: baseline;
  color: rgb(246 247 255 / 92%);
  display: flex;
  font-family: var(--font-body);
  font-size: 0.95rem;
  gap: 7px;
  margin: 0;
}

.ai-sources-panel-title-label {
  font-weight: 700;
}

.ai-sources-panel-count {
  color: rgb(235 240 255 / 52%);
  font-size: 0.86rem;
  font-weight: 600;
}

.ai-sources-panel-close {
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 8px;
  color: rgb(246 247 255 / 80%);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 1rem;
  height: 30px;
  line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease;
  width: 30px;
}

.ai-sources-panel-close:hover,
.ai-sources-panel-close:focus-visible {
  background: rgb(255 255 255 / 14%);
  border-color: rgb(121 230 255 / 38%);
}

.ai-sources-panel-body {
  align-content: start;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  justify-content: flex-start;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 16px 18px;
}

.ai-sources-section {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
}

.ai-sources-section-title {
  color: rgb(235 240 255 / 60%);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
}

.ai-source-card {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 12px;
  display: grid;
  gap: 6px;
  padding: 10px 11px;
}

a.ai-source-card,
.ai-source-card--openable {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

a.ai-source-card:hover,
.ai-source-card--openable:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(121 230 255 / 32%);
  transform: translateY(-1px);
}

.ai-source-card--openable:focus-visible {
  outline: 2px solid rgb(121 230 255 / 60%);
  outline-offset: 2px;
}

.ai-source-added {
  color: rgb(235 240 255 / 45%);
  font-family: var(--font-body);
  font-size: 0.66rem;
}

a.ai-source-card:focus-visible {
  outline: 2px solid rgb(121 230 255 / 60%);
  outline-offset: 2px;
}

.ai-source-card-head {
  align-items: center;
  display: flex;
  gap: 7px;
}

.ai-source-open-indicator {
  color: rgb(121 230 255 / 70%);
  font-size: 0.78rem;
  margin-left: auto;
}

.ai-source-favicon {
  align-items: center;
  background: rgb(255 255 255 / 10%);
  border-radius: 5px;
  display: flex;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  overflow: hidden;
  width: 18px;
}

.ai-source-favicon-img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.ai-source-favicon-fallback {
  color: rgb(246 247 255 / 80%);
}

.ai-source-favicon--fallback {
  background: rgb(255 255 255 / 14%);
  color: rgb(246 247 255 / 80%);
}

.ai-source-domain {
  color: rgb(235 240 255 / 64%);
  font-size: 0.72rem;
}

.ai-source-id {
  color: #8ab4ff;
  font-size: 0.76rem;
  font-weight: 750;
}

.ai-source-title {
  color: rgb(246 247 255 / 92%);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
}

.ai-source-meta {
  color: rgb(235 240 255 / 58%);
  display: block;
  font-size: 0.72rem;
}

.ai-source-snippet {
  -webkit-box-orient: vertical;
  color: rgb(235 240 255 / 70%);
  display: -webkit-box;
  font-size: 0.76rem;
  -webkit-line-clamp: 3;
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
}

.ai-source-badge {
  background: rgb(255 255 255 / 10%);
  border-radius: 999px;
  color: rgb(246 247 255 / 80%);
  font-size: 0.66rem;
  font-weight: 700;
  justify-self: start;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  text-transform: uppercase;
}

.ai-source-badge--web {
  background: rgb(121 230 255 / 16%);
  color: #79e6ff;
}

.ai-source-badge--project {
  background: rgb(157 125 255 / 18%);
  color: #c4b5ff;
}

.ai-source-badge--global {
  background: rgb(200 34 255 / 16%);
  color: #e7a9ff;
}

.ai-sources-trigger {
  background: rgb(121 230 255 / 12%);
  border: 1px solid rgb(121 230 255 / 22%);
  border-radius: 999px;
  color: rgb(246 247 255 / 88%);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 12px;
  padding: 6px 14px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.ai-sources-trigger:hover {
  background: rgb(121 230 255 / 18%);
  border-color: rgb(121 230 255 / 38%);
}

.ai-sources-trigger:focus-visible {
  outline: 2px solid rgb(121 230 255 / 60%);
  outline-offset: 2px;
}

.ai-assistant-panel.has-sources-open .ai-assistant-messages,
.ai-assistant-panel.has-sources-open .ai-assistant-quick-actions {
  padding-right: calc(var(--ai-sources-width) + 18px + var(--ai-thread-gutter, 30px));
}

.ai-assistant-panel.has-sources-open .ai-assistant-form {
  margin-right: calc(var(--ai-sources-width) + 18px + var(--ai-thread-gutter, 30px));
}

.ai-assistant-panel.has-sources-open .ai-assistant-scroll-bottom {
  left: calc(50% - ((var(--ai-sources-width) + 18px) / 2));
}

.ai-assistant-panel.has-history-open.has-sources-open .ai-assistant-scroll-bottom {
  left: calc(50% + ((var(--ai-history-width) - var(--ai-sources-width)) / 2));
}

.ai-assistant-session-label {
  color: inherit;
  display: block;
  font-family: var(--font-body);
  font-size: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.ai-assistant-session-select {
  display: none;
}

.ai-assistant-session-list {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  max-height: none;
  min-height: 0;
  overflow-y: visible;
  padding-right: 2px;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.ai-assistant-session-item {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgb(246 247 255 / 88%);
  cursor: pointer;
  display: grid;
  font-family: var(--font-body);
  gap: 4px;
  padding: 9px 11px;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  width: 100%;
}

.ai-assistant-session-item:hover,
.ai-assistant-session-item.is-active {
  background: rgb(255 255 255 / 7%);
  border-color: rgb(121 230 255 / 16%);
  color: #fff;
}

.ai-assistant-session-item:focus-visible {
  border-color: rgb(93 93 255 / 86%);
  box-shadow: 0 0 0 2px rgb(93 93 255 / 22%);
  outline: 0;
}

.ai-assistant-session-item-title {
  display: block;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-session-item-meta,
.ai-assistant-session-empty {
  color: rgb(246 247 255 / 92%);
  font-family: var(--font-body);
  font-size: 0.6rem;
  line-height: 1.35;
}

.ai-assistant-session-empty {
  margin: 4px 2px;
  padding: 8px 0;
}

.ai-assistant-session-tools {
  border-top: 1px solid rgb(255 255 255 / 8%);
  display: none;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 10px;
}

.ai-assistant-sidebar-resize {
  bottom: 0;
  cursor: col-resize;
  position: absolute;
  right: -6px;
  top: 0;
  width: 12px;
  z-index: 12;
}

.ai-assistant-sidebar-resize::before {
  background: rgb(255 255 255 / 18%);
  border-radius: 999px;
  content: "";
  height: 54px;
  left: 50%;
  opacity: 0.55;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, height 0.2s ease;
  width: 3px;
}

.ai-assistant-sidebar-resize:hover::before,
.ai-assistant-panel.is-sidebar-resizing .ai-assistant-sidebar-resize::before {
  background: rgb(121 230 255 / 74%);
  box-shadow: 0 0 16px rgb(121 230 255 / 30%);
  height: 82px;
  opacity: 1;
}

body.ai-assistant-sidebar-is-resizing,
body.ai-assistant-sidebar-is-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.ai-assistant-session-context-menu,
.ai-assistant-project-context-menu {
  background:
    linear-gradient(180deg, rgb(28 28 34 / 96%), rgb(16 16 22 / 98%)),
    linear-gradient(145deg, rgb(255 255 255 / 18%), rgb(121 230 255 / 18%));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1px solid transparent;
  border-radius: 13px;
  box-shadow: 0 18px 40px rgb(0 0 0 / 42%);
  display: none;
  gap: 3px;
  min-width: 218px;
  padding: 7px;
  position: absolute;
  z-index: 15;
}

.ai-assistant-session-context-menu.is-open,
.ai-assistant-project-context-menu.is-open {
  display: grid;
}

.ai-assistant-session-context-menu button,
.ai-assistant-project-context-menu button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: rgb(246 247 255 / 90%);
  cursor: pointer;
  display: flex;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  gap: 10px;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}

.ai-assistant-session-context-menu button:hover,
.ai-assistant-session-context-menu button:focus-visible,
.ai-assistant-project-context-menu button:hover,
.ai-assistant-project-context-menu button:focus-visible {
  background: rgb(255 255 255 / 9%);
  outline: 0;
}

.ai-assistant-project-context-menu .ai-assistant-project-menu-delete {
  color: rgb(255 174 198 / 94%);
}

.ai-assistant-project-context-menu .ai-assistant-project-menu-delete:hover,
.ai-assistant-project-context-menu .ai-assistant-project-menu-delete:focus-visible {
  background: rgb(255 82 132 / 13%);
  color: #ffd8e4;
}

.ai-assistant-project-export-menu,
.ai-assistant-project-sources-menu {
  position: relative;
}

.ai-assistant-project-export-trigger,
.ai-assistant-project-sources-trigger {
  justify-content: space-between;
}

.ai-assistant-project-menu-chevron {
  color: rgb(121 230 255 / 74%);
  margin-left: auto;
}

.ai-assistant-project-export-submenu,
.ai-assistant-project-sources-submenu {
  background:
    linear-gradient(180deg, rgb(28 28 34 / 98%), rgb(16 16 22 / 99%)),
    linear-gradient(145deg, rgb(255 255 255 / 18%), rgb(121 230 255 / 18%));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: 0 18px 38px rgb(0 0 0 / 42%);
  display: none;
  left: min(calc(100% - 4px), 220px);
  min-width: 190px;
  padding: 6px;
  position: absolute;
  top: 0;
  z-index: 16;
}

.ai-assistant-project-export-menu:hover .ai-assistant-project-export-submenu,
.ai-assistant-project-export-menu:focus-within .ai-assistant-project-export-submenu,
.ai-assistant-project-sources-menu:hover .ai-assistant-project-sources-submenu,
.ai-assistant-project-sources-menu:focus-within .ai-assistant-project-sources-submenu {
  display: grid;
}

.ai-assistant-project-context-menu.is-export-left .ai-assistant-project-export-submenu,
.ai-assistant-project-context-menu.is-export-left .ai-assistant-project-sources-submenu {
  left: auto;
  right: min(calc(100% - 4px), 220px);
}

.ai-assistant-session-context-menu img {
  display: block;
  height: 16px;
  object-fit: contain;
  width: 16px;
}

.ai-assistant-session-export,
.ai-assistant-session-delete {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  min-width: 32px;
  padding: 0;
}

.ai-assistant-session-export {
  background: rgb(116 99 255 / 18%);
  border: 1px solid rgb(116 99 255 / 42%);
}

.ai-assistant-session-delete {
  background: rgb(255 93 124 / 16%);
  border: 1px solid rgb(255 93 124 / 45%);
}

.ai-assistant-session-export img,
.ai-assistant-session-delete img {
  display: block;
  height: 14px;
  object-fit: contain;
  width: 14px;
}

.ai-assistant-title-wrap {
  text-align: center;
  width: 100%;
}

.ai-assistant-title {
  background: linear-gradient(90deg,
    #4fd1ff 0%,
    #7c5cff 16%,
    #30d158 32%,
    #ffb547 48%,
    #ff5f6d 64%,
    #b16cff 100%
  );
  background-clip: text;
  color: transparent;
  font-family: var(--font-body);
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-top: 0;
  text-shadow: 0 0 20px rgb(144 112 255 / 28%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-assistant-subtitle {
  display: none;
}

.ai-assistant-expand,
.ai-assistant-close {
  background: transparent;
  border: 0;
  color: #5d5dff;
  cursor: pointer;
  margin-left: 0;
  position: absolute;
  padding: 0;
  z-index: 4;
}

.ai-assistant-expand {
  align-items: center;
  border: 1px solid rgb(93 93 255 / 45%);
  border-radius: 8px;
  display: inline-flex;
  height: 27px;
  justify-content: center;
  right: 46px;
  top: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: 27px;
}

.ai-assistant-expand span {
  border: 2px solid currentColor;
  border-radius: 3px;
  display: block;
  height: 12px;
  width: 12px;
}

.ai-assistant-expand.is-active span {
  height: 10px;
  width: 10px;
}

.ai-assistant-expand:hover {
  border-color: rgb(200 34 255 / 70%);
  box-shadow: 0 0 14px rgb(93 93 255 / 25%);
  transform: translateY(-1px);
}

.ai-assistant-close {
  font-size: 1.65rem;
  line-height: 1;
  right: 14px;
  top: 12px;
}

.ai-assistant-voice-controls {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.ai-assistant-composer-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  grid-column: 2;
  grid-row: 3;
  min-height: 40px;
  min-width: max-content;
}

.ai-assistant-voice-select {
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.7rem;
  height: 38px;
  max-width: 194px;
  min-width: 120px;
  padding: 0 8px;
}

.ai-assistant-voice-select--composer {
  display: none;
}

.ai-assistant-settings-section #ai-assistant-settings-voice-select {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 42px;
}

.ai-assistant-voice-btn {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgb(240 244 255 / 78%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  padding: 0;
  -webkit-text-fill-color: initial;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.ai-assistant-web-search-btn {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgb(240 244 255 / 78%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  line-height: 1;
  padding: 0;
  -webkit-text-fill-color: initial;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.ai-assistant-web-search-btn:hover {
  background: rgb(121 230 255 / 12%);
  color: #fff;
  transform: translateY(-1px);
}

.ai-assistant-web-search-btn.is-active {
  background: rgb(93 93 255 / 24%);
  box-shadow: inset 0 0 0 1px rgb(93 93 255 / 54%);
}

.ai-assistant-web-search-btn.is-loading {
  background: rgb(121 230 255 / 20%);
  border-color: rgb(121 230 255 / 60%);
  animation: web-search-pulse 1.5s ease-in-out infinite;
}

.ai-assistant-web-search-btn.is-loading img,
.ai-assistant-web-search-btn.is-loading svg {
  animation: web-search-spin 1s linear infinite;
}

@keyframes web-search-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes web-search-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgb(121 230 255 / 40%);
  }
  50% {
    opacity: 0.85;
    box-shadow: 0 0 0 4px rgb(121 230 255 / 0%);
  }
}

.ai-assistant-web-search-btn img,
.ai-assistant-web-search-btn svg {
  display: inline-block;
  height: 18px;
  width: 18px;
  vertical-align: middle;
}

.ai-assistant-voice-btn.is-active {
  background: rgb(93 93 255 / 18%);
  box-shadow: inset 0 0 0 1px rgb(93 93 255 / 34%);
}

.ai-assistant-voice-btn img {
  display: block;
  height: 20px;
  width: 20px;
  object-fit: contain;
}

.ai-assistant-voice-btn:hover {
  background: rgb(255 255 255 / 8%);
  color: #fff;
  transform: translateY(-1px);
}

.ai-assistant-voice-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ai-assistant-messages {
  /* Colonne de lecture unique facon ChatGPT : message bot (a gauche) et message
     utilisateur (a droite) partagent une meme colonne qui REMPLIT tout l'espace
     disponible entre le panneau historique (gauche) et le panneau Sources
     (droite). Les panneaux sont des overlays absolus : on reserve donc leur
     largeur via du PADDING (les marges sur ce flex-item en colonne sont
     ignorees sur l'axe transversal). Gouttieres fines par defaut ; quand un
     panneau s'ouvre, on ajoute sa largeur du cote concerne (cf. regles
     has-history-open / has-sources-open) et la colonne se retrecit/recentre
     automatiquement. */
  --ai-thread-gutter: 30px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 26px;
  margin-left: 0;
  min-width: 0;
  overscroll-behavior: contain;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 28px var(--ai-thread-gutter) 14px;
  transition: padding 0.22s ease;
}

.ai-assistant-scroll-bottom {
  align-items: center;
  backdrop-filter: blur(14px);
  background: linear-gradient(135deg, rgb(93 93 255 / 72%), rgb(200 34 255 / 48%));
  border: 1px solid rgb(121 230 255 / 34%);
  border-radius: 50%;
  bottom: 94px;
  box-shadow:
    0 14px 34px rgb(5 8 20 / 42%),
    0 0 18px rgb(121 230 255 / 18%);
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  left: 50%;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 10px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  width: 40px;
  z-index: 6;
}

.ai-assistant-scroll-bottom.is-visible {
  opacity: 0.86;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.ai-assistant-scroll-bottom:hover {
  border-color: rgb(121 230 255 / 62%);
  opacity: 1;
  transform: translate(-50%, -2px) scale(1.03);
}

.ai-assistant-scroll-bottom span {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  display: block;
  height: 10px;
  margin-top: -4px;
  transform: rotate(45deg);
  width: 10px;
}

.ai-assistant-message {
  border-radius: 12px;
  display: block;
  flex-shrink: 0;
  font-family: var(--font-ai-assistant);
  font-size: 0.86rem;
  height: auto;
  max-width: 92%;
  min-height: 0;
  overflow-wrap: anywhere;
  padding: 12px 14px;
  position: relative;
  text-align: left;
  word-break: break-word;
  animation: ai-message-in 0.24s ease both;
}

.ai-assistant-message,
.ai-assistant-message p,
.ai-assistant-message li,
.ai-assistant-message a,
.ai-assistant-message h1,
.ai-assistant-message h2,
.ai-assistant-message h3,
.ai-assistant-message h4,
.ai-assistant-message strong,
.ai-assistant-message span {
  font-family: var(--font-ai-assistant) !important;
  letter-spacing: 0 !important;
}

.ai-assistant-message-content {
  max-height: none;
  min-width: 0;
  overflow: visible;
  padding-right: 38px;
  padding-top: 2px;
}

.ai-assistant-message::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  content: "";
  height: 31px;
  position: absolute;
  top: 2px;
  width: 31px;
}

.ai-assistant-message-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 0;
  position: absolute;
  right: 8px;
  top: 8px;
}

.ai-assistant-export-actions {
  align-items: center;
  border-top: 1px solid rgb(255 255 255 / 10%);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  padding-top: 10px;
}

.ai-assistant-export-btn {
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  color: #dfe8ff;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 6px 9px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  -webkit-text-fill-color: #dfe8ff;
}

.ai-assistant-export-btn:hover {
  background: rgb(121 230 255 / 14%);
  border-color: rgb(121 230 255 / 40%);
  transform: translateY(-1px);
}

.ai-assistant-bubble-btn {
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  color: #dce3ff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  line-height: 1;
  min-width: 28px;
  padding: 0;
  -webkit-text-fill-color: #dce3ff;
}

.ai-assistant-copy-btn img {
  display: block;
  height: 14px;
  object-fit: contain;
  width: 14px;
}

.ai-assistant-copy-btn.is-copied {
  border-color: rgb(90 207 166 / 75%);
}

/* Styles typographiques (p/titres/listes/strong/code/blockquote) supprimes
   d'ici : doublons concurrents de la couche canonique .ai-markdown (cf. plus
   bas dans ce fichier), qu'ils ne faisaient que contredire silencieusement
   sur la marge/couleur/espacement. .ai-assistant-list-detail et le wrapper
   visuel .ai-assistant-code-block (figcaption, copy-btn) sont conserves : ce
   ne sont pas des doublons, juste de l'UI specifique au bloc de code. */
.ai-assistant-list-detail {
  display: block;
  margin-top: 0.36rem !important;
  opacity: 0.9;
}

.ai-assistant-code-block {
  background: rgb(4 8 20 / 68%);
  border: 1px solid rgb(121 230 255 / 18%);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
  margin: 10px 0;
  overflow: hidden;
}

.ai-assistant-code-block figcaption {
  align-items: center;
  background: rgb(255 255 255 / 7%);
  color: rgb(218 228 255 / 78%);
  display: flex;
  font-size: 0.68rem;
  justify-content: space-between;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  text-transform: uppercase;
  -webkit-text-fill-color: rgb(218 228 255 / 78%);
}

.ai-assistant-code-copy-btn {
  align-items: center;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  margin-left: 10px;
  min-width: 24px;
  padding: 0;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.ai-assistant-code-copy-btn:hover {
  background: rgb(121 230 255 / 14%);
  border-color: rgb(121 230 255 / 45%);
  transform: translateY(-1px);
}

.ai-assistant-code-copy-btn.is-copied {
  border-color: rgb(90 207 166 / 75%);
}

.ai-assistant-code-copy-btn img {
  display: block;
  height: 13px;
  object-fit: contain;
  width: 13px;
}

/* Bouton de copie discret, ancre en haut a droite de chaque tableau. */
/* Enveloppe non-scrollable autour d'un tableau : ancre le bouton copier (fixe)
   tandis que la zone .ai-assistant-table-wrap interne défile. */
.ai-assistant-table-figure {
  margin: 14px 0 18px;
  max-width: 100%;
  min-width: 0;
  position: relative;
}

.ai-assistant-table-figure > .ai-assistant-table-wrap {
  margin: 0;
}

.ai-assistant-table-copy-btn {
  align-items: center;
  background: rgb(12 14 30 / 78%);
  backdrop-filter: blur(6px);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  height: 26px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  transition: opacity 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  width: 26px;
  z-index: 3;
}

.ai-assistant-table-figure:hover .ai-assistant-table-copy-btn,
.ai-assistant-table-copy-btn:focus-visible {
  opacity: 1;
}

.ai-assistant-table-copy-btn:hover {
  background: rgb(121 230 255 / 16%);
  border-color: rgb(121 230 255 / 48%);
}

.ai-assistant-table-copy-btn.is-copied {
  border-color: rgb(90 207 166 / 75%);
  opacity: 1;
}

.ai-assistant-table-copy-btn img {
  display: block;
  height: 13px;
  object-fit: contain;
  width: 13px;
}

.ai-assistant-code-block pre {
  margin: 0;
  overflow-x: auto;
  padding: 12px;
}

.ai-assistant-code-block code {
  background: transparent;
  border: 0;
  color: #eaf2ff;
  display: block;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
  font-size: 0.78rem;
  line-height: 1.55;
  padding: 0;
  white-space: pre;
  -webkit-text-fill-color: #eaf2ff;
}

.ai-token--keyword { color: #c8a2ff; -webkit-text-fill-color: #c8a2ff; }
.ai-token--literal { color: #79e6ff; -webkit-text-fill-color: #79e6ff; }
.ai-token--string { color: #9ff2ca; -webkit-text-fill-color: #9ff2ca; }
.ai-token--comment { color: #8b95b8; -webkit-text-fill-color: #8b95b8; }
.ai-token--tag { color: #ffb86b; -webkit-text-fill-color: #ffb86b; }
.ai-token--attr { color: #ffd479; -webkit-text-fill-color: #ffd479; }

.ai-assistant-tts-token,
.ai-assistant-tts-segment {
  border-radius: 4px;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.ai-assistant-tts-token.is-speaking,
.ai-assistant-tts-segment.is-speaking {
  background: rgb(124 242 200 / 28%);
  color: #ecfffb;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: #ecfffb;
}

.ai-assistant-emoji {
  background: none !important;
  background-clip: border-box;
  color: initial;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: initial;
}

.ai-assistant-message--bot {
  align-self: flex-start;
  background: rgb(93 93 255 / 17%);
  border: 1px solid rgb(93 93 255 / 45%);
  background: linear-gradient(92deg, #9ec4ff 0%, #9d7dff 45%, #e086ff 100%);
  background-clip: text;
  color: transparent;
  margin-left: 40px;
}

.ai-assistant-message--bot::before {
  background-color: rgb(93 93 255 / 18%);
  background-image: url("/assets/images/logo/AI.png");
  box-shadow: 0 0 20px rgb(121 230 255 / 18%);
  left: -40px;
}

.ai-assistant-message--user {
  align-self: flex-end;
  background: rgb(43 16 82 / 62%);
  border: 1px solid rgb(255 255 255 / 24%);
  color: #fff;
  margin-right: 40px;
}

.ai-assistant-message--user::before {
  background-color: rgb(255 255 255 / 12%);
  background-image: url("/assets/images/portrait/my-notion-face-transparent.png");
  box-shadow: 0 0 18px rgb(200 34 255 / 20%);
  right: -40px;
}

.ai-assistant-message--typing .ai-assistant-message-content {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-height: 22px;
  padding-right: 0;
}

.ai-assistant-thinking-label,
.ai-assistant-reasoning-label {
  color: rgb(235 240 255 / 78%);
  -webkit-text-fill-color: rgb(235 240 255 / 78%);
}

.ai-assistant-reasoning-label {
  font-size: 0.92em;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: translateY(2px);
}

.ai-assistant-reasoning-label.is-fading-in {
  opacity: 1;
  transform: translateY(0);
}

.ai-assistant-typing-dots {
  display: inline-flex;
  gap: 4px;
}

.ai-assistant-typing-dots span {
  animation: ai-typing-dot 0.95s ease-in-out infinite;
  background: #79e6ff;
  border-radius: 50%;
  height: 5px;
  opacity: 0.45;
  width: 5px;
  -webkit-text-fill-color: initial;
}

.ai-assistant-typing-dots span:nth-child(2) {
  animation-delay: 0.14s;
}

.ai-assistant-typing-dots span:nth-child(3) {
  animation-delay: 0.28s;
}

.ai-assistant-stream-caret {
  animation: ai-stream-caret 0.8s steps(2, start) infinite;
  background: #79e6ff;
  display: inline-block;
  height: 1em;
  margin-left: 3px;
  transform: translateY(2px);
  width: 2px;
}

.ai-assistant-link {
  color: #9ec4ff;
  display: inline-block;
  font-family: var(--font-body);
  margin-top: 7px;
  text-decoration: underline;
}

.ai-assistant-inline-link {
  color: #9ec4ff;
  text-decoration: underline;
  -webkit-text-fill-color: #9ec4ff;
}

.ai-assistant-citation {
  background: rgb(121 230 255 / 14%);
  border: 1px solid rgb(121 230 255 / 35%);
  border-radius: 999px;
  color: #bfeeff;
  font-size: 0.68em;
  margin-left: 3px;
  padding: 1px 5px;
  -webkit-text-fill-color: #bfeeff;
}

/* Nom de la source rendu à la place d'un marqueur [S1] / [1] : accent, gras,
   italique, pour se distinguer du texte courant. */
.ai-source-ref {
  color: #79e6ff;
  font-style: italic;
  font-weight: 650;
  -webkit-text-fill-color: #79e6ff;
}

.ai-source-ref--web {
  text-decoration: none;
}

.ai-source-ref--web:hover {
  text-decoration: underline;
}

[data-theme="light"] .ai-source-ref {
  color: #5d3bd6;
  -webkit-text-fill-color: #5d3bd6;
}

.ai-assistant-citation a {
  color: inherit;
  text-decoration: none;
  -webkit-text-fill-color: inherit;
}

.web-sources-section {
  border-top: 1px solid rgb(165 126 255 / 20%);
  margin-top: 18px;
  padding-top: 16px;
}

.web-search-badge {
  align-items: center;
  background: linear-gradient(135deg, rgb(121 230 255 / 16%), rgb(188 78 255 / 18%));
  border: 1px solid rgb(121 230 255 / 34%);
  border-radius: 999px;
  color: #c9f5ff;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 600;
  gap: 7px;
  letter-spacing: 0.02em;
  margin-bottom: 11px;
  padding: 5px 10px;
  -webkit-text-fill-color: #c9f5ff;
}

.web-search-badge::before {
  background: #79e6ff;
  border-radius: 50%;
  box-shadow: 0 0 12px rgb(121 230 255 / 70%);
  content: "";
  height: 7px;
  width: 7px;
}

.ai-assistant-rag-status {
  align-self: stretch;
  background: rgb(121 230 255 / 8%);
  border: 1px solid rgb(121 230 255 / 16%);
  border-radius: 9px;
  color: rgb(235 240 255 / 70%);
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.35;
  margin: 10px 14px 0;
  padding: 8px 10px;
}

.ai-assistant-rag-status[hidden] {
  display: none;
}

.web-sources-title {
  color: #f2efff;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0 0 12px;
  -webkit-text-fill-color: #f2efff;
}

.web-sources-grid {
  display: grid;
  gap: 10px;
}

.web-source-card {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 8%), rgb(93 93 255 / 8%)),
    rgb(13 10 35 / 66%);
  border: 1px solid rgb(157 116 255 / 26%);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgb(0 0 0 / 18%);
  display: grid;
  gap: 7px;
  padding: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.web-source-card:hover {
  border-color: rgb(121 230 255 / 42%);
  box-shadow: 0 18px 42px rgb(37 20 84 / 28%);
  transform: translateY(-1px);
}

.web-source-title {
  color: #f7f3ff;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  -webkit-text-fill-color: #f7f3ff;
}

.web-source-domain {
  color: #79e6ff;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  -webkit-text-fill-color: #79e6ff;
}

.web-source-snippet {
  color: rgb(232 225 255 / 78%);
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 0;
  -webkit-text-fill-color: rgb(232 225 255 / 78%);
}

.web-source-link {
  align-self: start;
  color: #e7c6ff;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-text-fill-color: #e7c6ff;
}

.web-source-link:hover {
  color: #79e6ff;
  text-decoration: underline;
  -webkit-text-fill-color: #79e6ff;
}

.web-source-details {
  border-top: 1px solid rgb(255 255 255 / 9%);
  color: rgb(232 225 255 / 70%);
  font-size: 0.72rem;
  margin-top: 3px;
  padding-top: 7px;
  -webkit-text-fill-color: rgb(232 225 255 / 70%);
}

.web-source-details summary {
  cursor: pointer;
  font-weight: 600;
}

.web-source-details dl {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
}

.web-source-details dt {
  color: #c9f5ff;
  font-weight: 600;
  -webkit-text-fill-color: #c9f5ff;
}

.web-source-details dd {
  margin: 0 0 5px;
  overflow-wrap: anywhere;
}

.web-sources-compact {
  color: rgb(232 225 255 / 74%);
  font-size: 0.75rem;
  line-height: 1.6;
  margin: 12px 0 0;
  -webkit-text-fill-color: rgb(232 225 255 / 74%);
}

.web-sources-compact a {
  color: #9ec4ff;
  text-decoration: none;
  -webkit-text-fill-color: #9ec4ff;
}

.web-sources-compact a:hover {
  text-decoration: underline;
}

.ai-assistant-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-left: 0;
  padding: 10px 10px 6px;
  transition: margin-left 0.22s ease;
}

.ai-assistant-quick-action {
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  color: rgb(236 239 255 / 94%);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.73rem;
  padding: 7px 10px;
}

.ai-assistant-quick-action:hover {
  background: rgb(93 93 255 / 24%);
  border-color: rgb(93 93 255 / 60%);
}

.ai-assistant-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 10px;
  margin-left: 0;
  min-width: 0;
  margin: 10px;
  padding: 14px 16px 12px;
  position: relative;
  background:
    linear-gradient(180deg, rgb(19 23 52 / 96%), rgb(12 15 35 / 96%)),
    rgb(14 17 40 / 95%);
  border: 1px solid rgb(93 93 255 / 26%);
  border-radius: 24px;
  box-shadow:
    0 18px 42px rgb(0 0 0 / 32%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
  backdrop-filter: blur(18px);
  transition: margin-left 0.22s ease, margin-right 0.22s ease;
}

.ai-assistant-attachment-preview-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
}

.ai-assistant-attachment-preview-tray[hidden] {
  display: none;
}

.ai-assistant-attachment-preview {
  align-items: center;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
  display: grid;
  gap: 9px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  min-height: 62px;
  min-width: 220px;
  max-width: min(340px, 100%);
  overflow: hidden;
  padding: 7px 8px 7px 7px;
  position: relative;
}

.ai-assistant-attachment-preview--image {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}

.ai-assistant-attachment-preview-thumb {
  aspect-ratio: 1;
  background: rgb(5 7 18 / 72%);
  border-radius: 10px;
  display: block;
  height: 58px;
  object-fit: cover;
  width: 58px;
}

.ai-assistant-attachment-preview-file-icon {
  align-items: center;
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgb(93 93 255 / 28%), rgb(121 230 255 / 16%));
  border: 1px solid rgb(121 230 255 / 22%);
  border-radius: 10px;
  color: #dfe8ff;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 700;
  justify-content: center;
  text-transform: uppercase;
  width: 48px;
}

.ai-assistant-attachment-preview-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-assistant-attachment-preview-meta strong {
  color: #f6f7ff;
  font-size: 0.78rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-attachment-preview-meta span {
  color: rgb(226 232 255 / 64%);
  font-size: 0.68rem;
  line-height: 1.2;
}

.ai-assistant-attachment-preview-remove {
  align-items: center;
  background: rgb(255 255 255 / 92%);
  border: 0;
  border-radius: 999px;
  color: #1c1d26;
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 2px;
  width: 24px;
}

.ai-assistant-attachment-preview-remove:hover {
  background: #fff;
  transform: translateY(-1px);
}

/* Separateur du composer aligne sur la colonne de lecture (et non plein cadre
   sous le rail/sidebar). Les bornes left/right suivent les memes reservations
   de paddings que la zone messages selon l'etat des panneaux. */
.ai-assistant-form::before {
  content: none;
}

.ai-assistant-panel.has-history-open .ai-assistant-form::before {
  left: calc(var(--ai-merged-rail-space, 62px) + var(--ai-history-width) + 18px + var(--ai-thread-gutter, 30px));
}

.ai-assistant-panel.has-sources-open .ai-assistant-form::before {
  right: calc(var(--ai-sources-width) + 18px + var(--ai-thread-gutter, 30px));
}

.ai-assistant-attach {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1;
  grid-row: 3;
  min-height: 40px;
  min-width: 0;
}

.ai-assistant-attach-toggle {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgb(240 244 255 / 82%);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.8rem;
  font-weight: 300;
  height: 40px;
  line-height: 1;
  min-width: 40px;
  padding: 0;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.ai-assistant-attach-toggle:hover {
  background: rgb(255 255 255 / 8%);
  color: #fff;
  transform: translateY(-1px);
}

.ai-assistant-attach-menu {
  background: rgb(14 17 40 / 95%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 10px;
  box-shadow: 0 12px 26px rgb(0 0 0 / 35%);
  display: none;
  min-width: 180px;
  padding: 6px;
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
}

.ai-assistant-attach-menu.is-open {
  display: block;
}

.ai-assistant-attach-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #e2e8ff;
  cursor: pointer;
  display: flex;
  gap: 8px;
  padding: 8px;
  text-align: left;
  width: 100%;
}

.ai-assistant-attach-item:hover {
  background: rgb(93 93 255 / 20%);
}

.ai-assistant-attach-item img {
  display: block;
  height: 18px;
  object-fit: contain;
  width: 18px;
}

.ai-assistant-attach-item span {
  font-family: var(--font-body);
  font-size: 0.72rem;
}

.ai-assistant-file-input {
  height: 1px;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: -9999px;
  width: 1px;
}

.ai-assistant-form input,
.ai-assistant-form textarea {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.45;
  /* min-width: 0 pour que le champ absorbe le retrecissement (sidebar ouverte)
     au lieu de pousser le bouton "Envoyer" hors du cadre. */
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 4px 2px 8px;
  outline: none;
  width: 100%;
}

.ai-assistant-form textarea {
  min-height: 34px;
  max-height: 156px;
  resize: none;
  overflow-y: auto;
}

.ai-assistant-form input::placeholder,
.ai-assistant-form textarea::placeholder {
  color: rgb(255 255 255 / 46%);
}

.ai-assistant-send-btn {
  align-items: center;
  background: rgb(236 239 245 / 92%);
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 999px;
  color: #17171d;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  height: 42px;
  width: 42px;
  justify-content: center;
  padding: 0;
  transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.ai-assistant-send-btn img {
  display: block;
  height: 21px;
  width: 21px;
  object-fit: contain;
}

.ai-assistant-send-btn:hover {
  background: #fff;
  transform: translateY(-1px);
}

.ai-assistant-send-btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.ai-assistant-stop-btn {
  align-items: center;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: none;
  height: 40px;
  width: 40px;
  justify-content: center;
  padding: 0;
  -webkit-text-fill-color: #fff;
}

.ai-assistant-stop-btn img {
  display: block;
  height: 18px;
  width: 18px;
  object-fit: contain;
}

.ai-assistant-stop-btn.is-visible {
  display: inline-flex;
}

.ai-assistant-stop-btn span {
  display: none;
}

.ai-assistant-stop-btn:hover {
  background: rgb(255 255 255 / 14%);
  transform: translateY(-1px);
}

.ai-assistant-panel.is-requesting .ai-assistant-send-btn {
  display: none;
}

@keyframes ai-message-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ai-typing-dot {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes ai-stream-caret {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

@container (max-width: 760px) {
  .ai-assistant-panel {
    --ai-thread-gutter: 16px;
  }

  /* Sur fenetre etroite, la sidebar devient un tiroir qui couvre toute la zone
     de contenu (du rail au bord droit), au lieu d'une demi-largeur qui chevauche
     le composer. Le rail (z-index superieur) reste visible/cliquable a gauche
     pour le refermer. */
  .ai-assistant-session-bar {
    left: var(--ai-rail-space, 74px);
    right: 12px;
    width: auto;
  }

  .ai-assistant-sidebar-resize {
    display: none;
  }

  .ai-assistant-panel.has-history-open .ai-assistant-messages,
  .ai-assistant-panel.has-history-open .ai-assistant-quick-actions,
  .ai-assistant-panel.has-history-open .ai-assistant-form,
  .ai-assistant-panel.has-history-open .ai-assistant-library-view,
  .ai-assistant-panel.has-history-open .ai-assistant-project-view,
  .ai-assistant-panel.has-history-open .ai-assistant-settings-view {
    margin-left: 0;
    padding-left: var(--ai-thread-gutter, 16px);
  }

  .ai-assistant-panel.has-history-open .ai-assistant-scroll-bottom {
    left: 50%;
  }

  .ai-sources-panel {
    left: 12px;
    right: 12px;
    width: auto;
  }

  .ai-assistant-panel.has-sources-open .ai-assistant-messages,
  .ai-assistant-panel.has-sources-open .ai-assistant-quick-actions,
  .ai-assistant-panel.has-sources-open .ai-assistant-form {
    margin-right: 0;
    padding-right: var(--ai-thread-gutter, 16px);
  }

  .ai-assistant-panel.has-sources-open .ai-assistant-scroll-bottom {
    left: 50%;
  }

  .ai-assistant-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .ai-assistant-library-view,
  .ai-assistant-project-view,
  .ai-assistant-settings-view {
    padding: 22px 16px;
  }

  .ai-assistant-library-view-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-assistant-library-import {
    justify-content: center;
    width: 100%;
  }

  .ai-assistant-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .ai-assistant-media-preview {
    padding: 62px 8px 8px;
  }

  .ai-assistant-media-preview-toolbar {
    flex-wrap: wrap;
  }

  .ai-assistant-media-preview-title {
    flex-basis: 100%;
  }

  .ai-assistant-attach {
    grid-column: 1;
  }

  .ai-assistant-form input,
  .ai-assistant-form textarea {
    flex: initial;
    grid-column: 2;
    min-width: 0;
  }

  .ai-assistant-send-btn {
    grid-column: 3;
  }

  .ai-assistant-stop-btn {
    grid-column: 3;
  }

  .ai-assistant-voice-select {
    grid-column: 1 / span 2;
    max-width: none;
    min-width: 0;
  }

  .ai-assistant-voice-controls {
    grid-column: 3;
    justify-self: end;
  }

  .ai-assistant-project-export-submenu,
  .ai-assistant-project-sources-submenu {
    box-shadow: none;
    left: auto;
    margin: 2px 0 4px 14px;
    position: static;
    top: auto;
  }
}

[data-theme="light"] .ai-assistant-panel {
  background: linear-gradient(180deg, rgb(255 255 255 / 97%), rgb(245 244 255 / 98%));
  border-color: transparent;
  box-shadow:
    0 18px 40px rgb(88 74 136 / 22%),
    0 0 0 1px rgb(93 93 255 / 17%),
    0 0 0 2px rgb(118 87 255 / 24%),
    0 0 18px rgb(137 99 255 / 16%);
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 97%), rgb(245 244 255 / 98%)),
    linear-gradient(130deg, rgb(116 99 255 / 62%), rgb(200 34 255 / 56%), rgb(116 99 255 / 62%));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

[data-theme="light"] .ai-assistant-title {
  background: linear-gradient(90deg,
    #4fd1ff 0%,
    #7c5cff 16%,
    #30d158 32%,
    #ffb547 48%,
    #ff5f6d 64%,
    #b16cff 100%
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .ai-assistant-session-label {
  color: rgb(47 43 95 / 72%);
}

[data-theme="light"] .ai-assistant-history-toggle {
  background: rgb(93 93 255 / 8%);
  border-color: rgb(93 93 255 / 22%);
  color: #5d5dff;
}

[data-theme="light"] .ai-assistant-history-toggle:hover,
[data-theme="light"] .ai-assistant-history-toggle.is-active {
  background: rgb(93 93 255 / 16%);
  border-color: rgb(93 93 255 / 38%);
  box-shadow: 0 0 14px rgb(93 93 255 / 12%);
}

[data-theme="light"] .ai-assistant-session-bar {
  background:
    radial-gradient(circle at 18% 0%, rgb(93 93 255 / 10%), transparent 36%),
    radial-gradient(circle at 88% 14%, rgb(200 34 255 / 10%), transparent 38%),
    linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(244 242 255 / 96%)),
    linear-gradient(145deg, rgb(93 93 255 / 32%), rgb(200 34 255 / 24%));
  box-shadow:
    18px 0 34px rgb(88 74 136 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 80%),
    0 0 18px rgb(93 93 255 / 8%);
}

[data-theme="light"] .ai-sources-panel {
  background:
    radial-gradient(circle at 82% 0%, rgb(93 93 255 / 10%), transparent 36%),
    radial-gradient(circle at 12% 14%, rgb(200 34 255 / 10%), transparent 38%),
    linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(244 242 255 / 96%)),
    linear-gradient(145deg, rgb(93 93 255 / 32%), rgb(200 34 255 / 24%));
  box-shadow:
    -18px 0 34px rgb(88 74 136 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 80%),
    0 0 18px rgb(93 93 255 / 8%);
}

[data-theme="light"] .ai-sources-panel-header {
  border-bottom-color: rgb(93 93 255 / 14%);
}

[data-theme="light"] .ai-sources-panel-title,
[data-theme="light"] .ai-source-title {
  color: #24235c;
}

[data-theme="light"] .ai-sources-panel-close {
  background: rgb(37 99 235 / 10%);
  border-color: rgb(37 99 235 / 35%);
  color: #1e3a8a;
}

[data-theme="light"] .ai-sources-panel-close:hover,
[data-theme="light"] .ai-sources-panel-close:focus-visible {
  background: rgb(37 99 235 / 16%);
  border-color: rgb(37 99 235 / 55%);
  color: #172554;
}

[data-theme="light"] .ai-sources-section-title,
[data-theme="light"] .ai-source-domain,
[data-theme="light"] .ai-source-meta,
[data-theme="light"] .ai-source-snippet {
  color: rgb(47 43 95 / 62%);
}

[data-theme="light"] .ai-source-card {
  background: rgb(255 255 255 / 70%);
  border-color: rgb(93 93 255 / 14%);
}

[data-theme="light"] a.ai-source-card:hover {
  background: rgb(255 255 255 / 92%);
  border-color: rgb(76 76 255 / 32%);
}

[data-theme="light"] a.ai-source-card:focus-visible {
  outline-color: rgb(76 76 255 / 55%);
}

[data-theme="light"] .ai-source-open-indicator {
  color: rgb(76 76 255 / 70%);
}

[data-theme="light"] .ai-source-favicon {
  background: rgb(93 93 255 / 10%);
}

[data-theme="light"] .ai-source-favicon--fallback {
  color: #4c4cff;
}

[data-theme="light"] .ai-source-id {
  color: #4c4cff;
}

[data-theme="light"] .ai-source-badge--web {
  background: rgb(76 76 255 / 12%);
  color: #4c4cff;
}

[data-theme="light"] .ai-source-badge--project {
  background: rgb(93 93 255 / 14%);
  color: #5b45d6;
}

[data-theme="light"] .ai-source-badge--global {
  background: rgb(200 34 255 / 12%);
  color: #a324d8;
}

[data-theme="light"] .ai-sources-trigger {
  background: rgb(37 99 235 / 10%);
  border-color: rgb(37 99 235 / 35%);
  color: #1e3a8a;
}

[data-theme="light"] .ai-sources-trigger:hover,
[data-theme="light"] .ai-sources-trigger:focus-visible {
  background: rgb(37 99 235 / 16%);
  border-color: rgb(37 99 235 / 55%);
  color: #172554;
}

[data-theme="light"] .ai-assistant-session-search-wrap {
  background: rgb(93 93 255 / 24%);
  border-color: rgb(93 93 255 / 50%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%), 0 2px 6px rgb(93 93 255 / 16%);
}

[data-theme="light"] .ai-assistant-session-search,
[data-theme="light"] .ai-assistant-session-item {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-session-search::placeholder {
  color: rgb(47 43 95 / 70%);
}

[data-theme="light"] .ai-assistant-session-heading,
[data-theme="light"] .ai-assistant-session-item-meta,
[data-theme="light"] .ai-assistant-session-empty {
  color: rgb(47 43 95 / 55%);
}


[data-theme="light"] .ai-assistant-sidebar-action {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-sidebar-action:hover,
[data-theme="light"] .ai-assistant-sidebar-action.is-active,
[data-theme="light"] .ai-assistant-session-library {
  background: rgb(93 93 255 / 16%);
  border-color: rgb(93 93 255 / 34%);
}

[data-theme="light"] .ai-assistant-projects-head,
[data-theme="light"] .ai-assistant-section-header,
[data-theme="light"] .ai-assistant-project-item-body span {
  color: rgb(47 43 95 / 56%);
}

[data-theme="light"] .ai-assistant-section-count,
[data-theme="light"] .ai-assistant-section-chevron {
  color: rgb(48 111 157 / 76%);
}

[data-theme="light"] .ai-assistant-project-item {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-project-item:hover,
[data-theme="light"] .ai-assistant-project-item.is-active {
  background: rgb(93 93 255 / 10%);
  border-color: rgb(93 93 255 / 20%);
  color: #24235c;
}

[data-theme="light"] .ai-assistant-library-panel {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 82%), rgb(248 247 255 / 76%)),
    linear-gradient(135deg, rgb(93 93 255 / 22%), rgb(200 34 255 / 14%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 62%),
    0 8px 22px rgb(88 74 136 / 10%);
}

[data-theme="light"] .ai-assistant-library-head {
  color: rgb(47 43 95 / 62%);
}

[data-theme="light"] .ai-assistant-library-clear {
  background: rgb(93 93 255 / 9%);
  border-color: rgb(93 93 255 / 16%);
  color: #343069;
}

[data-theme="light"] .ai-assistant-library-clear:hover {
  background: rgb(93 93 255 / 15%);
  border-color: rgb(93 93 255 / 28%);
  color: #24235c;
}

[data-theme="light"] .ai-assistant-library-item {
  background: rgb(255 255 255 / 58%);
  border-color: rgb(93 93 255 / 12%);
}

[data-theme="light"] .ai-assistant-library-item-name {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-library-item-meta {
  color: rgb(48 111 157 / 76%);
}

[data-theme="light"] .ai-assistant-library-view-head h3,
[data-theme="light"] .ai-assistant-project-hero h3,
[data-theme="light"] .ai-assistant-settings-head h3,
[data-theme="light"] .ai-assistant-project-stat strong,
[data-theme="light"] .ai-assistant-project-rag strong,
[data-theme="light"] .ai-assistant-project-row strong,
[data-theme="light"] .ai-assistant-settings-section h4,
[data-theme="light"] .ai-assistant-media-card-body strong,
[data-theme="light"] .ai-assistant-chat-media-body strong {
  color: #1a1240;
}

[data-theme="light"] .ai-assistant-library-import,
[data-theme="light"] .ai-assistant-library-layout-toggle,
[data-theme="light"] .ai-assistant-media-preview-toolbar button,
[data-theme="light"] .ai-assistant-chat-media-actions button {
  background: rgb(93 93 255 / 9%);
  border-color: rgb(93 93 255 / 16%);
  color: #343069;
}

[data-theme="light"] .ai-assistant-library-count {
  color: rgb(47 43 95 / 58%);
}

[data-theme="light"] .ai-assistant-library-layout-toggle button {
  color: rgb(47 43 95 / 62%);
}

[data-theme="light"] .ai-assistant-library-layout-toggle button.is-active {
  background: rgb(93 93 255 / 15%);
  color: #24235c;
}

[data-theme="light"] .ai-assistant-library-import:hover,
[data-theme="light"] .ai-assistant-media-preview-toolbar button:hover,
[data-theme="light"] .ai-assistant-chat-media-actions button:hover {
  background: rgb(93 93 255 / 15%);
  border-color: rgb(93 93 255 / 28%);
  color: #24235c;
}

[data-theme="light"] .ai-assistant-library-empty,
[data-theme="light"] .ai-assistant-project-hero p,
[data-theme="light"] .ai-assistant-settings-head p,
[data-theme="light"] .ai-assistant-project-stat span,
[data-theme="light"] .ai-assistant-project-rag span,
[data-theme="light"] .ai-assistant-project-row span,
[data-theme="light"] .ai-assistant-project-empty,
[data-theme="light"] .ai-assistant-sidebar-empty-state p,
[data-theme="light"] .ai-assistant-project-empty-panel p,
[data-theme="light"] .ai-assistant-project-settings label,
[data-theme="light"] .ai-assistant-settings-section label,
[data-theme="light"] .ai-assistant-media-card-body span,
[data-theme="light"] .ai-assistant-chat-media-body span {
  color: rgb(30 25 70 / 80%);
}

[data-theme="light"] .ai-assistant-project-stat,
[data-theme="light"] .ai-assistant-project-rag div,
[data-theme="light"] .ai-assistant-project-row,
[data-theme="light"] .ai-assistant-sidebar-empty-state,
[data-theme="light"] .ai-assistant-project-empty-panel,
[data-theme="light"] .ai-assistant-project-tabs {
  background: linear-gradient(135deg, rgb(200 215 255 / 48%), rgb(180 200 255 / 48%));
  border-color: rgb(93 93 255 / 28%);
}

[data-theme="light"] .ai-assistant-project-settings,
[data-theme="light"] .ai-assistant-settings-section {
  background:
    radial-gradient(circle at 18% 0%, rgb(93 93 255 / 10%), transparent 36%),
    radial-gradient(circle at 88% 14%, rgb(200 34 255 / 10%), transparent 38%),
    linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(244 242 255 / 96%)),
    linear-gradient(145deg, rgb(93 93 255 / 32%), rgb(200 34 255 / 24%));
  background-clip: padding-box, padding-box, padding-box, border-box;
  background-origin: border-box;
  border: 1px solid transparent;
}

/* Boutons bleus de l'onglet Sources/Documents — en mode clair, ces boutons heritaient
   des couleurs cyan/blanc reglees pour le fond sombre (texte quasi blanc sur fond clair),
   d'ou un contraste insuffisant. */
[data-theme="light"] .ai-assistant-project-tabs button {
  color: rgb(47 43 95 / 62%);
}

[data-theme="light"] .ai-assistant-project-tabs button.is-active,
[data-theme="light"] .ai-assistant-project-tabs button:hover {
  background: rgb(37 99 235 / 14%);
  color: #1e3a8a;
}

[data-theme="light"] .ai-assistant-project-source-actions button,
[data-theme="light"] .ai-assistant-project-row-action {
  background: rgb(37 99 235 / 10%);
  border-color: rgb(37 99 235 / 35%);
  color: #1e3a8a;
}

[data-theme="light"] .ai-assistant-project-source-actions button:hover,
[data-theme="light"] .ai-assistant-project-source-actions button:focus-visible,
[data-theme="light"] .ai-assistant-project-row-action:hover,
[data-theme="light"] .ai-assistant-project-row-action:focus-visible {
  background: rgb(37 99 235 / 16%);
  border-color: rgb(37 99 235 / 55%);
  color: #172554;
}

[data-theme="light"] .ai-assistant-project-memory,
[data-theme="light"] .ai-assistant-project-settings input,
[data-theme="light"] .ai-assistant-project-settings textarea,
[data-theme="light"] .ai-assistant-project-settings select,
[data-theme="light"] .ai-assistant-settings-section input {
  background: rgb(255 255 255 / 76%);
  border-color: rgb(93 93 255 / 16%);
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-settings-data-status {
  color: rgb(47 43 95 / 62%);
}

[data-theme="light"] .ai-assistant-settings-feedback.is-success {
  background: rgb(16 122 64 / 10%);
  border-color: rgb(16 122 64 / 30%);
  color: #0f6b3a;
}

[data-theme="light"] .ai-assistant-settings-feedback.is-error {
  background: rgb(167 38 88 / 10%);
  border-color: rgb(167 38 88 / 30%);
  color: #a72658;
}

[data-theme="light"] .ai-assistant-media-card-thumb {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 86%), rgb(248 247 255 / 78%)),
    linear-gradient(135deg, rgb(93 93 255 / 22%), rgb(200 34 255 / 14%));
  box-shadow: 0 12px 28px rgb(88 74 136 / 12%);
}

[data-theme="light"] .ai-assistant-media-card-excerpt,
[data-theme="light"] .ai-assistant-media-card-thumb span,
[data-theme="light"] .ai-assistant-chat-media-thumb span {
  color: rgb(48 111 157 / 76%) !important;
}

[data-theme="light"] .ai-assistant-library-card-menu {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(245 244 255 / 98%)),
    linear-gradient(145deg, rgb(93 93 255 / 28%), rgb(200 34 255 / 18%));
  box-shadow: 0 18px 38px rgb(88 74 136 / 18%);
}

[data-theme="light"] .ai-assistant-library-card-menu button {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-library-card-menu button:hover {
  background: rgb(93 93 255 / 10%);
}

[data-theme="light"] .ai-assistant-library-card-menu .ai-assistant-library-menu-delete {
  color: #a72658;
}

[data-theme="light"] .ai-assistant-library-card-menu .ai-assistant-library-menu-delete:hover {
  background: rgb(167 38 88 / 10%);
  color: #831a43;
}

[data-theme="light"] .ai-assistant-media-preview-panel {
  background: rgb(255 255 255 / 98%);
  border-color: rgb(93 93 255 / 16%);
}

[data-theme="light"] .ai-assistant-media-preview-toolbar {
  background: rgb(93 93 255 / 8%);
  border-bottom-color: rgb(93 93 255 / 12%);
}

[data-theme="light"] .ai-assistant-media-preview-title,
[data-theme="light"] .ai-assistant-media-preview-body pre,
[data-theme="light"] .ai-assistant-chat-media-body p {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-chat-media-thumb {
  background: rgb(93 93 255 / 8%);
  border-color: rgb(93 93 255 / 12%);
}

[data-theme="light"] .ai-assistant-session-item:hover,
[data-theme="light"] .ai-assistant-session-item.is-active {
  background: rgb(93 93 255 / 10%);
  border-color: rgb(93 93 255 / 20%);
  color: #24235c;
}

[data-theme="light"] .ai-assistant-session-tools {
  border-top-color: rgb(93 93 255 / 12%);
}

[data-theme="light"] .ai-assistant-sidebar-resize::before {
  background: rgb(93 93 255 / 24%);
}

[data-theme="light"] .ai-assistant-sidebar-resize:hover::before,
[data-theme="light"] .ai-assistant-panel.is-sidebar-resizing .ai-assistant-sidebar-resize::before {
  background: rgb(93 93 255 / 70%);
  box-shadow: 0 0 16px rgb(93 93 255 / 18%);
}

[data-theme="light"] .ai-assistant-session-context-menu,
[data-theme="light"] .ai-assistant-project-context-menu {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(245 244 255 / 98%)),
    linear-gradient(145deg, rgb(93 93 255 / 28%), rgb(200 34 255 / 18%));
  box-shadow: 0 18px 38px rgb(88 74 136 / 18%);
}

[data-theme="light"] .ai-assistant-session-context-menu button,
[data-theme="light"] .ai-assistant-project-context-menu button {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-session-context-menu button:hover,
[data-theme="light"] .ai-assistant-session-context-menu button:focus-visible,
[data-theme="light"] .ai-assistant-project-context-menu button:hover,
[data-theme="light"] .ai-assistant-project-context-menu button:focus-visible {
  background: rgb(93 93 255 / 10%);
}

[data-theme="light"] .ai-assistant-project-context-menu .ai-assistant-project-menu-delete {
  color: #a72658;
}

[data-theme="light"] .ai-assistant-project-menu-chevron {
  color: rgb(48 111 157 / 76%);
}

[data-theme="light"] .ai-assistant-project-export-submenu,
[data-theme="light"] .ai-assistant-project-sources-submenu {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(245 244 255 / 98%)),
    linear-gradient(145deg, rgb(93 93 255 / 28%), rgb(200 34 255 / 18%));
  box-shadow: 0 18px 38px rgb(88 74 136 / 18%);
}

[data-theme="light"] .ai-assistant-project-sources-submenu button,
[data-theme="light"] .ai-assistant-project-export-submenu button {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-project-sources-submenu button:hover,
[data-theme="light"] .ai-assistant-project-sources-submenu button:focus-visible,
[data-theme="light"] .ai-assistant-project-export-submenu button:hover,
[data-theme="light"] .ai-assistant-project-export-submenu button:focus-visible {
  background: rgb(93 93 255 / 10%);
}

[data-theme="light"] .ai-assistant-project-delete-panel {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(245 244 255 / 98%)),
    linear-gradient(135deg, rgb(93 93 255 / 20%), rgb(255 82 132 / 18%));
  box-shadow: 0 24px 58px rgb(88 74 136 / 20%);
}

[data-theme="light"] .ai-assistant-project-delete-panel h3,
[data-theme="light"] .ai-assistant-project-delete-actions button {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-project-delete-panel p {
  color: rgb(47 43 95 / 64%);
}

[data-theme="light"] .ai-assistant-project-delete-note {
  color: #a72658 !important;
}

[data-theme="light"] #ai-assistant-project-delete-confirm {
  background: rgb(255 82 132 / 13%);
  border-color: rgb(255 82 132 / 28%);
  color: #a72658;
}

[data-theme="light"] .ai-assistant-session-delete {
  background: rgb(255 93 124 / 12%);
  border-color: rgb(255 93 124 / 30%);
}

[data-theme="light"] .ai-assistant-session-export {
  background: rgb(93 93 255 / 12%);
  border-color: rgb(93 93 255 / 28%);
}

[data-theme="light"] .ai-assistant-stop-btn,
[data-theme="light"] .ai-assistant-send-btn {
  background: rgb(200 34 255 / 16%);
  border-color: rgb(200 34 255 / 32%);
  color: #c822ff;
  -webkit-text-fill-color: #c822ff;
}

[data-theme="light"] .ai-assistant-send-btn:hover {
  background: rgb(200 34 255 / 26%);
}

[data-theme="light"] .ai-assistant-subtitle,
[data-theme="light"] .ai-assistant-close {
  color: rgb(47 43 95 / 72%);
}

[data-theme="light"] .ai-assistant-message--bot {
  background: rgb(93 93 255 / 11%);
  color: #2f2b5f;
}

/* Overrides clair de .ai-assistant-message code / .ai-assistant-heading /
   blockquote supprimes ici : leurs regles de base ont ete retirees (doublons
   de la couche canonique .ai-markdown, qui a son propre filet mode clair
   plus bas dans ce fichier). */
[data-theme="light"] .ai-assistant-code-block {
  background: rgb(255 255 255 / 72%);
  border-color: rgb(93 93 255 / 18%);
}

[data-theme="light"] .ai-assistant-code-block figcaption {
  background: rgb(93 93 255 / 8%);
  color: rgb(47 43 95 / 68%);
  -webkit-text-fill-color: rgb(47 43 95 / 68%);
}

[data-theme="light"] .ai-assistant-code-copy-btn {
  background: rgb(93 93 255 / 9%);
  border-color: rgb(93 93 255 / 22%);
}

[data-theme="light"] .ai-assistant-code-copy-btn:hover {
  background: rgb(93 93 255 / 15%);
  border-color: rgb(93 93 255 / 38%);
}

[data-theme="light"] .ai-assistant-code-block code {
  color: #25234e;
  -webkit-text-fill-color: #25234e;
}

[data-theme="light"] .ai-assistant-thinking-label,
[data-theme="light"] .ai-assistant-reasoning-label {
  color: rgb(47 43 95 / 68%);
  -webkit-text-fill-color: rgb(47 43 95 / 68%);
}

[data-theme="light"] .ai-assistant-bubble-btn {
  background: rgb(93 93 255 / 10%);
  border-color: rgb(93 93 255 / 22%);
  color: #2f2b5f;
  -webkit-text-fill-color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-export-actions {
  border-top-color: rgb(93 93 255 / 14%);
}

[data-theme="light"] .ai-assistant-export-btn {
  background: rgb(93 93 255 / 9%);
  border-color: rgb(93 93 255 / 22%);
  color: #2f2b5f;
  -webkit-text-fill-color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-export-btn:hover {
  background: rgb(93 93 255 / 15%);
  border-color: rgb(93 93 255 / 38%);
}

[data-theme="light"] .ai-assistant-inline-link {
  color: #4c4cff;
  -webkit-text-fill-color: #4c4cff;
}

[data-theme="light"] .ai-assistant-citation {
  background: rgb(93 93 255 / 10%);
  border-color: rgb(93 93 255 / 24%);
  color: #4c4cff;
  -webkit-text-fill-color: #4c4cff;
}

[data-theme="light"] .web-sources-section {
  border-top-color: rgb(93 93 255 / 16%);
}

[data-theme="light"] .web-search-badge {
  background: linear-gradient(135deg, rgb(93 93 255 / 10%), rgb(200 34 255 / 9%));
  border-color: rgb(93 93 255 / 24%);
  color: #4c4cff;
  -webkit-text-fill-color: #4c4cff;
}

[data-theme="light"] .web-search-badge::before {
  background: #4c4cff;
  box-shadow: 0 0 10px rgb(76 76 255 / 42%);
}

[data-theme="light"] .web-sources-title,
[data-theme="light"] .web-source-title {
  color: #2f2b5f;
  -webkit-text-fill-color: #2f2b5f;
}

[data-theme="light"] .web-source-card {
  background: rgb(255 255 255 / 76%);
  border-color: rgb(93 93 255 / 18%);
  box-shadow: 0 14px 30px rgb(47 43 95 / 10%);
}

[data-theme="light"] .web-source-card:hover {
  border-color: rgb(93 93 255 / 34%);
  box-shadow: 0 18px 38px rgb(47 43 95 / 14%);
}

[data-theme="light"] .web-source-domain,
[data-theme="light"] .web-source-details dt {
  color: #4c4cff;
  -webkit-text-fill-color: #4c4cff;
}

[data-theme="light"] .web-source-snippet,
[data-theme="light"] .web-source-details,
[data-theme="light"] .web-sources-compact {
  color: rgb(47 43 95 / 76%);
  -webkit-text-fill-color: rgb(47 43 95 / 76%);
}

[data-theme="light"] .web-source-link,
[data-theme="light"] .web-sources-compact a {
  color: #6b45d9;
  -webkit-text-fill-color: #6b45d9;
}

[data-theme="light"] .web-source-details {
  border-top-color: rgb(93 93 255 / 14%);
}

[data-theme="light"] .ai-assistant-message--user {
  background: rgb(43 16 82 / 84%);
}

[data-theme="light"] .ai-assistant-tts-token.is-speaking,
[data-theme="light"] .ai-assistant-tts-segment.is-speaking {
  background: rgb(93 93 255 / 18%);
  color: #2f2b5f;
  -webkit-text-fill-color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-quick-action {
  background: rgb(93 93 255 / 8%);
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-voice-btn {
  background: transparent;
  color: rgb(47 43 95 / 72%);
}

[data-theme="light"] .ai-assistant-attach-toggle {
  background: transparent;
  border-color: transparent;
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-attach-menu {
  background: rgb(255 255 255 / 98%);
  border-color: rgb(93 93 255 / 20%);
}

[data-theme="light"] .ai-assistant-attach-item {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-attach-item:hover {
  background: rgb(93 93 255 / 12%);
}

[data-theme="light"] .ai-assistant-voice-select {
  background: rgb(93 93 255 / 8%);
  border-color: rgb(93 93 255 / 20%);
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-voice-btn.is-active {
  background: rgb(93 93 255 / 20%);
  border-color: rgb(93 93 255 / 48%);
}

[data-theme="light"] .ai-assistant-scroll-bottom {
  background: linear-gradient(135deg, rgb(255 255 255 / 86%), rgb(229 224 255 / 74%));
  border-color: rgb(93 93 255 / 25%);
  box-shadow:
    0 14px 28px rgb(88 74 136 / 20%),
    0 0 16px rgb(93 93 255 / 14%);
}

[data-theme="light"] .ai-assistant-scroll-bottom span {
  border-color: #5d5dff;
}

[data-theme="light"] .ai-assistant-form input,
[data-theme="light"] .ai-assistant-form textarea {
  background: transparent;
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-form {
  background:
    linear-gradient(180deg, rgb(249 250 255 / 96%), rgb(239 241 255 / 94%)),
    rgb(248 249 255 / 96%);
  border-color: rgb(93 93 255 / 20%);
  box-shadow:
    0 18px 42px rgb(47 43 95 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 80%);
}

[data-theme="light"] .ai-assistant-rail {
  background:
    linear-gradient(180deg, rgb(249 250 255 / 96%), rgb(239 241 255 / 94%)),
    rgb(248 249 255 / 96%);
  border-color: rgb(93 93 255 / 20%);
}

[data-theme="light"] .ai-assistant-panel.has-rail.has-history-open .ai-assistant-rail {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

[data-theme="light"] .ai-assistant-panel.has-rail.has-history-open .ai-assistant-sidebar-shell {
  background:
    radial-gradient(circle at 18% 0%, rgb(93 93 255 / 10%), transparent 36%),
    radial-gradient(circle at 88% 14%, rgb(200 34 255 / 10%), transparent 38%),
    linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(244 242 255 / 96%)),
    linear-gradient(145deg, rgb(93 93 255 / 32%), rgb(200 34 255 / 24%));
  box-shadow:
    18px 0 34px rgb(88 74 136 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 80%),
    0 0 18px rgb(93 93 255 / 8%);
}

[data-theme="light"] .ai-assistant-attachment-preview {
  background: rgb(255 255 255 / 76%);
  border-color: rgb(93 93 255 / 18%);
}

[data-theme="light"] .ai-assistant-attachment-preview-meta strong {
  color: #2f2b5f;
}

[data-theme="light"] .ai-assistant-attachment-preview-meta span {
  color: rgb(47 43 95 / 62%);
}

[data-theme="light"] .ai-assistant-web-search-btn {
  background: transparent;
  color: rgb(47 43 95 / 72%);
}

[data-theme="light"] .ai-assistant-form input::placeholder,
[data-theme="light"] .ai-assistant-form textarea::placeholder {
  color: rgb(47 43 95 / 57%);
}

.ai-assistant-launcher,
.ai-assistant-panel,
.ai-assistant-panel :where(button, input, textarea, select, h2, h3, h4, p, span, label, small, div, a, li) {
  font-family: var(--font-ai-assistant) !important;
}

@media (width <= 768px) {
  .ai-assistant-launcher {
    top: 60%;
    right: 0;
    transform: translateY(-50%);
  }

  .ai-assistant-collapse-handle {
    top: 60%;
  }

  .ai-assistant-panel {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    top: 8px;
    width: calc(100vw - 14px);
  }

  .ai-assistant-messages {
    gap: 16px;
    padding: 18px 16px 8px;
  }

  .ai-assistant-scroll-bottom {
    bottom: 142px;
    height: 36px;
    width: 36px;
  }

  .ai-assistant-message {
    max-width: calc(100% - 34px);
  }

  .ai-assistant-chat-media-card {
    grid-template-columns: 1fr;
  }

  .ai-assistant-chat-media-thumb {
    max-width: 180px;
    width: 100%;
  }

  .ai-assistant-message--bot {
    margin-left: 32px;
  }

  .ai-assistant-message--user {
    margin-right: 32px;
  }

  .ai-assistant-message::before {
    height: 25px;
    width: 25px;
  }

  .ai-assistant-message--bot::before {
    left: -32px;
  }

  .ai-assistant-message--user::before {
    right: -32px;
  }

  .ai-assistant-code-block code {
    font-size: 0.72rem;
  }

  .web-sources-section {
    margin-top: 15px;
    padding-top: 13px;
  }

  .web-source-card {
    padding: 10px;
  }

  .web-source-title {
    font-size: 0.82rem;
  }

  .web-sources-compact {
    font-size: 0.7rem;
  }

  .ai-assistant-form {
    grid-template-columns: 1fr auto;
    align-items: end;
    border-radius: 22px;
    margin: 8px;
    padding: 10px;
  }

  .ai-assistant-attach {
    grid-column: 1;
    grid-row: 3;
    min-height: 36px;
  }

  .ai-assistant-form input,
  .ai-assistant-form textarea {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }

  .ai-assistant-composer-right {
    grid-column: 2;
    grid-row: 3;
    gap: 4px;
  }

  .ai-assistant-attachment-preview {
    min-width: min(100%, 220px);
  }

  .ai-assistant-web-search-btn,
  .ai-assistant-voice-btn,
  .ai-assistant-stop-btn {
    width: 36px;
    height: 36px;
  }

  .ai-assistant-send-btn {
    width: 38px;
    height: 38px;
  }

  .ai-assistant-voice-select {
    flex: 1;
    max-width: none;
    min-width: 0;
    height: 38px;
  }
}

/* Home mobile: cards full-width + hero image reposition */
@media (width <= 576px) {
  .home-page .intro-text .hero-media {
    margin-top: 0;
    min-height: 420px;
  }

  .home-page .trust-section {
    padding-inline: 5px;
  }

  .home-page .trust-section .container,
  .home-page .all-news-list .container {
    max-width: 100%;
    padding-inline: 15px;
  }

  .home-page .trust-cards-grid,
  .home-page .trust-methodology {
    padding-inline: 0;
    width: 100%;
  }

  .home-page .trust-card--merged,
  .home-page .trust-methodology .methodology-item--combined {
    margin-inline: 0;
    max-width: 100%;
    width: 100%;
  }

  .home-page .trust-card--merged {
    padding: 20px 14px;
  }

  .home-page .trust-methodology .methodology-item--combined {
    height: 360px;
    padding: 0;
  }

  .home-page .all-news-list {
    padding-inline: 0;
  }

  .home-page .news-grid {
    gap: 18px;
  }

  .home-page .news-card {
    width: 100%;
  }

  .home-page .news-card-content {
    padding: 20px 14px;
  }
}

/* Mobile app polish: stronger brand background and larger header/hero affordances. */
@media (width <= 576px) {
  :root {
    --mobile-favicon-bg: #101052;
  }

  html,
  body,
  #loader-wrapper {
    background-color: var(--mobile-favicon-bg);
  }

  body::after,
  #loader-wrapper {
    background:
      radial-gradient(circle at 50% 18%, rgb(32 32 144 / 45%), transparent 32%),
      linear-gradient(180deg, #101052 0%, #0b0d3e 55%, #080a2f 100%);
  }

  body::after {
    position: fixed;
  }

  body {
    padding-top: 112px;
  }

  body.home-page,
  body.inspirations-page {
    padding-top: 0;
  }

  #loader-video {
    height: min(430px, 84vw);
    width: min(430px, 84vw);
  }

  header.site-header,
  header:not(.page-intro-card):not(.ai-assistant-header) {
    height: 124px;
  }

  .header-social-strip {
    flex-basis: 42px;
    height: 42px;
    padding-inline: 14px;
  }

  .header-social-links {
    gap: 15px;
  }

  .header-social-link,
  .header-social-strip .lang-button,
  .header-social-strip #theme-switch {
    height: 34px;
    width: 34px;
  }

  .header-social-icon,
  .header-social-strip .lang-button img,
  .header-social-strip #theme-switch svg {
    height: 27px;
    width: 27px;
  }

  .header-social-strip .menu-controls {
    gap: 16px;
  }

  .header-logo img {
    height: 58px;
    margin: 0 0 13px 16px;
  }

  .header-portfolio-avatar,
  .header-portfolio-avatar img {
    height: 58px;
    width: 58px;
  }

  .header-portfolio-avatar {
    right: 14px;
    top: calc(var(--site-header-social-height, 42px) + 10px);
  }

  .dropdown-menu {
    height: calc(100dvh - var(--site-header-height, 124px));
    top: var(--site-header-height, 124px);
  }

  .home-page .intro-text .hero-media {
    min-height: min(72dvh, 640px);
  }

  .home-page .intro-text .content-wrapper {
    padding: clamp(82px, 16dvh, 136px) 18px 18px;
  }

  .home-page .intro-text .text-content {
    gap: 18px;
  }

  .home-page .intro-text .animated-title {
    font-size: clamp(2.9rem, 10vw, 4.15rem);
    line-height: 1.04;
    padding: 14px 8px;
  }

  .home-page .intro-text .btn-explore {
    font-size: 1rem;
    padding: 13px 22px;
  }
}

/* AI Markdown rendering layer — conteneur dedie .ai-markdown / .assistant-markdown pour les reponses de l'assistant IA. Variables de couleur dediees, independantes du theme global, pour garantir un contraste fiable en mode clair et sombre. */

:root,
[data-theme="dark"] {
  --ai-text: #f5f0ff;
  --ai-text-muted: #d9d0f5;
  --ai-surface: rgb(17 12 38 / 82%);
  --ai-surface-soft: rgb(255 255 255 / 7%);
  --ai-border: rgb(255 255 255 / 15%);
  --ai-accent: #8ab4ff;
}

[data-theme="light"] {
  --ai-text: #17142a;
  --ai-text-muted: #50476f;
  --ai-surface: rgb(255 255 255 / 88%);
  --ai-surface-soft: rgb(94 79 190 / 8%);
  --ai-border: rgb(70 55 130 / 18%);
  --ai-accent: #5b45d6;
}

.assistant-markdown,
.ai-markdown {
  color: var(--ai-text, #f4f0ff);
  font-size: clamp(0.85rem, 0.82rem + 0.1vw, 0.9rem);
  line-height: 1.7;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  width: 100%;
  word-break: normal;
}

.assistant-markdown > *:first-child,
.ai-markdown > *:first-child {
  margin-top: 0;
}

.assistant-markdown > *:last-child,
.ai-markdown > *:last-child {
  margin-bottom: 0;
}

.assistant-markdown p,
.ai-markdown p {
  color: var(--ai-text, #f4f0ff);
  margin: 0 0 0.95rem;
}

.assistant-markdown h1,
.assistant-markdown h2,
.assistant-markdown h3,
.assistant-markdown h4,
.ai-markdown h1,
.ai-markdown h2,
.ai-markdown h3,
.ai-markdown h4 {
  color: var(--ai-text, #fff);
  font-weight: 680;
  line-height: 1.3;
  margin: 1.25rem 0 0.6rem;
}

/* Neutralise l'ancien effet degrade transparent (background-clip: text +
   -webkit-text-fill-color: transparent) applique au h1, qui peut rendre le
   titre illisible selon le rendu du navigateur ou le contraste du theme. */
.assistant-markdown h1,
.ai-markdown h1 {
  background: none;
  background-clip: initial;
  font-size: 1.15rem;
  -webkit-text-fill-color: var(--ai-text, #fff);
}

.assistant-markdown h2,
.ai-markdown h2 {
  font-size: 1.05rem;
}

.assistant-markdown h3,
.ai-markdown h3 {
  font-size: 0.97rem;
}

.assistant-markdown ul,
.assistant-markdown ol,
.ai-markdown ul,
.ai-markdown ol {
  color: var(--ai-text, #f4f0ff);
  margin: 0.5rem 0 1.1rem;
  padding-left: 1.35rem;
}

.assistant-markdown li,
.ai-markdown li {
  margin: 0 0 0.32rem;
  padding-left: 0.15rem;
}

.assistant-markdown li + li,
.ai-markdown li + li {
  margin-top: 0;
}

.assistant-markdown li::marker,
.ai-markdown li::marker {
  color: var(--ai-accent, #8ab4ff);
  font-weight: 700;
}

.assistant-markdown strong,
.ai-markdown strong {
  color: var(--ai-text, #fff);
  font-weight: 750;
}

.assistant-markdown em,
.ai-markdown em {
  color: var(--ai-text-muted, #d8ceff);
}

.assistant-markdown table,
.ai-markdown table {
  border: 1px solid var(--ai-border, rgb(255 255 255 / 16%));
  border-collapse: collapse;
  border-radius: 14px;
  /* display:table (et non block) directement ici : une table en display:block
     se retrecit a son contenu et s'aligne a gauche (grand vide a droite sur
     les tables courtes). table-layout:auto + width:100% remplissent
     reellement la largeur. Le defilement horizontal eventuel est porte par
     .ai-assistant-table-wrap, pas par la table elle-meme. */
  display: table;
  margin: 1rem 0;
  overflow: visible;
  table-layout: auto;
  width: 100%;
}

.assistant-markdown th,
.assistant-markdown td,
.ai-markdown th,
.ai-markdown td {
  border-bottom: 1px solid var(--ai-border, rgb(255 255 255 / 12%));
  color: var(--ai-text, #f4f0ff);
  padding: 0.75rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.assistant-markdown th,
.ai-markdown th {
  background: var(--ai-surface-soft, rgb(255 255 255 / 8%));
  color: var(--ai-text, #fff);
  font-weight: 750;
}

.assistant-markdown blockquote,
.ai-markdown blockquote {
  background: var(--ai-surface-soft, rgb(255 255 255 / 7%));
  border-left: 4px solid var(--ai-accent, #8ab4ff);
  border-radius: 12px;
  color: var(--ai-text, #f4f0ff);
  margin: 1.2rem 0;
  padding: 0.9rem 1.1rem;
}

.assistant-markdown code,
.ai-markdown code {
  background: var(--ai-surface-soft, rgb(255 255 255 / 10%));
  border-radius: 7px;
  color: var(--ai-text, #fff);
  font-size: 0.9em;
  padding: 0.15rem 0.35rem;
}

.assistant-markdown pre,
.ai-markdown pre {
  background: var(--ai-surface, rgb(8 5 22 / 72%));
  border: 1px solid var(--ai-border, rgb(255 255 255 / 14%));
  border-radius: 14px;
  margin: 1rem 0;
  overflow-x: auto;
  padding: 1rem;
}

.assistant-markdown pre code,
.ai-markdown pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.assistant-markdown hr,
.ai-markdown hr {
  border: 0;
  border-top: 1px solid var(--ai-border, rgb(255 255 255 / 14%));
  margin: 1.2rem 0;
}

/* Garde-fou mode clair explicite : la couche .ai-markdown ci-dessus repose
   entierement sur les variables --ai-* definies en [data-theme="light"] plus
   haut. Ces regles forcent ces memes variables sur chaque element, pour ne
   jamais dependre silencieusement de leur seule resolution en cascade. */
[data-theme="light"] .ai-markdown,
[data-theme="light"] .ai-markdown p,
[data-theme="light"] .ai-markdown li {
  color: var(--ai-text);
}

[data-theme="light"] .ai-markdown h1,
[data-theme="light"] .ai-markdown h2,
[data-theme="light"] .ai-markdown h3,
[data-theme="light"] .ai-markdown h4,
[data-theme="light"] .ai-markdown strong {
  color: var(--ai-text);
  -webkit-text-fill-color: var(--ai-text);
}

[data-theme="light"] .ai-markdown em {
  color: var(--ai-text-muted);
}

[data-theme="light"] .ai-markdown table,
[data-theme="light"] .ai-markdown th,
[data-theme="light"] .ai-markdown td {
  border-color: var(--ai-border);
}

[data-theme="light"] .ai-markdown th {
  background: var(--ai-surface-soft);
  color: var(--ai-text);
}

[data-theme="light"] .ai-markdown td {
  color: var(--ai-text);
}

[data-theme="light"] .ai-markdown blockquote {
  background: var(--ai-surface-soft);
  border-left-color: var(--ai-accent);
  color: var(--ai-text);
}

[data-theme="light"] .ai-markdown code,
[data-theme="light"] .ai-markdown pre {
  background: var(--ai-surface-soft);
  color: var(--ai-text);
}

[data-theme="light"] .ai-markdown pre code {
  background: transparent;
}

[data-theme="light"] .ai-markdown hr {
  border-top-color: var(--ai-border);
}

@media (width <= 640px) {
  .assistant-markdown,
  .ai-markdown {
    font-size: 0.93rem;
  }
}

/* AI message layout layer — corrige la largeur de la bulle assistant. .ai-assistant-message--bot a "align-self: flex-start" (defini plus haut), ce qui desactive l'etirement par defaut du conteneur flex .ai-assistant-messages (flex-direction: column) et fait dependre la largeur de la bulle de son seul contenu : d'ou une colonne tassee a gauche avec un grand vide a droite. On force une largeur explicite pour retrouver une vraie colonne de lecture, bornee a 980px, sans toucher aux variantes compactes (typing, library-media). */
.ai-assistant-message--bot:not(.ai-assistant-message--typing, .ai-assistant-message--library-media) {
  max-width: 100%;
  /* min-width: 0 indispensable : sans cela un flex-item prend pour largeur
     minimale son contenu insecable le plus large (longue ligne de code), ce qui
     empeche la bulle de retrecir quand le panneau Sources s'ouvre et la fait
     deborder. Avec min-width: 0, le bloc de code scrolle au lieu d'elargir. */
  min-width: 0;
  /* width 100% moins la gouttiere avatar (margin-left: 40px) pour remplir la
     bande de lecture centree sans deborder a droite. */
  width: calc(100% - 40px);
}

.ai-assistant-message-content.ai-markdown {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.ai-assistant-message-content.ai-markdown pre {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

/* display:table est desormais pose directement sur la regle canonique
   .ai-markdown table ci-dessus ; on garde juste la contrainte de largeur max
   propre au conteneur de bulle. */
.ai-assistant-message-content.ai-markdown table.ai-assistant-table {
  max-width: 100%;
}

/* Le bloc de code garde overflow:hidden (coins arrondis) ; c'est son <pre>
   interne qui scrolle. Il doit juste pouvoir retrecir avec la bulle. */
.ai-assistant-message-content.ai-markdown .ai-assistant-code-block {
  max-width: 100%;
  min-width: 0;
}

/* RAG sources block — liste deterministe des documents projet reellement utilises pour la reponse, ajoutee en JS apres le rendu Markdown (cf. appendRagSources). Reprend les variables --ai-* du calque Markdown pour rester coherent dans les deux themes. */
.rag-sources-section {
  border-top: 1px solid var(--ai-border, rgb(255 255 255 / 15%));
  margin-top: 18px;
  padding-top: 16px;
}

.rag-sources-title {
  color: var(--ai-text, #f2efff);
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0 0 12px;
}

.rag-sources-list {
  display: grid;
  gap: 10px;
}

.rag-source-card {
  background: var(--ai-surface-soft, rgb(255 255 255 / 7%));
  border: 1px solid var(--ai-border, rgb(255 255 255 / 15%));
  border-radius: 10px;
  display: grid;
  gap: 5px;
  padding: 10px 12px;
}

.rag-source-id {
  color: var(--ai-accent, #8ab4ff);
  font-weight: 750;
  margin-right: 6px;
}

.rag-source-name {
  color: var(--ai-text, #f2efff);
  font-weight: 650;
}

.rag-source-meta {
  color: var(--ai-text-muted, #d9d0f5);
  display: block;
  font-size: 0.78rem;
}

/* Non utilisee par appendRagSources pour l'instant (extrait stocke en data-excerpt, non affiche) ; reservee a un futur "Voir l'extrait" repliable. */
.rag-source-excerpt {
  color: var(--ai-text-muted, #d9d0f5);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 4px 0 0;
}