/*
  =========================================================================
    KAATARTISTE - FEUILLE DE STYLES PRINCIPALE (index.css)
  =========================================================================
    Developpeuse Web: BambiKyara
    Date de dernière caresse : 15 juillet 2025
  -------------------------------------------------------------------------
    Structure du Fichier :
    1. Imports (Polices Google)
    2. Reset CSS & Box Sizing Fondamental
    3. Variables CSS (Palette de Couleurs, Polices)
    4. Styles Globaux (html, body, scrollbar, utilitaires)
    5. Loader de Page
    6. Navigation (Barre de Navigation, Menu Burger)
    7. Section Header (Accueil)
    8. Titres de Page Génériques
    9. Conteneurs de Contenu Principaux
   10. Section Portfolio (Carrousel, Livre Interactif)
   11. Section About (Présentation, Services, Compétences)
   12. Section Contact (Formulaire, Informations)
   13. Media Queries (Adaptabilité Responsive)
  =========================================================================
*/

/*
=========================================================================
  1. IMPORTS DE POLICES GOOGLE
=========================================================================
  Info: Importation optimisée des polices Google en une seule requête.
*/
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&family=Monoton&family=Pattaya&family=Poppins:wght@500&family=Raleway:wght@300&display=swap');

/*
=========================================================================
  2. RESET CSS & BOX SIZING FONDAMENTAL
=========================================================================
  Utilitaire: Réinitialisation des styles par défaut du navigateur.
*/
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*
=========================================================================
  3. VARIABLES CSS (PALETTE DE COULEURS, POLICES)
=========================================================================
  Configuration: Définition des variables globales pour la charte graphique.
*/
:root {
  /* --- Couleurs Primaires & Textes --- */
  --primary-color: #171717;
  --text-color: whitesmoke;
  --text-color-light: #EAEAEA;
  --text-color-muted: #D3D3D3;
  --charcoal-text: #36454F;
  --title-Brown-Brique: #6D3C36;
  --text-color-rosé: #F1E4D8;

  /* --- Polices --- */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Pattaya', sans-serif;

  /* --- Palette Lofi Pastel --- */
  --pastel-rose-light: #FFD1DC;
  --pastel-rose-vivid: #FFB6C1;
  --pastel-rose-dusty: #BC8F8F;
  --pastel-blue-light: #AEC6CF;
  --pastel-blue-medium: #80E0E6;
  --pastel-green-light: #B2DFDB;
  --pastel-yellow-light: #FFFACD;
  --pastel-cream-book-bg: #FFFDD0;
  --pastel-purple-light: #C3B1E1;
  --pastel-black: #090508;
  --pastel-black-deep: #020202;
  --pure-white: #FFF;

  /* --- Transparences & Fonds --- */
  --pastel-white-transparent: rgb(255 255 255 / 80%);
  --pastel-white-transparent-bg-subtle: rgb(255 255 255 / 10%);
  --pastel-progressbar-bg: rgb(255 255 255 / 10%);
  --pastel-border-white-transparent: rgb(255 255 255 / 12%);
  --pastel-bg-blue-tint: rgb(174 198 207 / 8%);
  --pastel-bg-blue-service: rgb(174 198 207 / 10%);
  --pastel-border-blue: rgb(174 198 207 / 15%);
  --pastel-border-blue-service: rgb(174 198 207 / 20%);
  --pastel-bg-yellow-tint: rgb(255 250 205 / 8%);
  --pastel-border-yellow: rgb(255 250 205 / 15%);

  /* --- Couleurs spécifiques UI --- */
  --pastel-icons-navbar: var(--title-Brown-Brique);
  --pastel-vert-sauge: #A3B18A;
  --pastel-status-green: #A7D7C5;
  --pastel-status-red: #f76c6c;
  --pastel-status-orange: #FFDDAF;

  /* --- Ombres --- */
  --shadow-color-light: rgb(0 0 0 / 10%);
  --shadow-color-medium: rgb(0 0 0 / 20%);
  --shadow-color-dark: rgb(0 0 0 / 30%);
  --shadow-color-deep: rgb(0 0 0 / 50%);
}

/*
=========================================================================
  4. STYLES GLOBAUX (HTML, BODY, SCROLLBAR, UTILITAIRES)
=========================================================================
  Info: Styles de base pour le document et classes utilitaires.
*/
html {
  background: var(--pastel-black);
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--text-color-rosé);
  color: var(--text-color);
  font-family: var(--font-primary);
  position: relative;
  margin: 0;
  padding-top: 0;
  overflow-x: hidden;
  user-select: none;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Scrollbar Personnalisée --- */
::-webkit-scrollbar {
  width: 6px;
  background: var(--pastel-black);
}

::-webkit-scrollbar-thumb {
  background: var(--pastel-rose-dusty);
  border-radius: 3px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pastel-rose-vivid);
}

/* --- Classes Utilitaires --- */
.hidden-visually {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden-completely {
  display: none !important;
}

.color {
  color: var(--title-Brown-Brique);
}

.highlight-gradient {
  background: none;
  color: var(--title-Brown-Brique);
  font-weight: bold;
}

/*
=========================================================================
  5. LOADER DE PAGE
=========================================================================
  Info: Styles pour l'écran de chargement initial.
*/
#loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: var(--pastel-black);
  color: var(--pastel-rose-vivid);
  font-family: var(--font-secondary);
  font-size: clamp(2rem, 10vw, 4rem);
  text-align: center;
  transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
  visibility: visible;
  opacity: 1;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

/*
=========================================================================
  6. NAVIGATION (MENU BURGER PASTEL)
=========================================================================
  Info: Styles pour le menu burger et la barre latérale de navigation.
*/

/* --- Bouton Burger & Icônes Sociales --- */
.burger {
  position: fixed;
  top: 20px;
  left: 25px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 32px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.burger-line {
  width: 100%;
  height: 3px;
  background-color: var(--pastel-icons-navbar);
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform-origin: center;
}

.top-right-socials {
  position: fixed;
  top: 20px;
  right: 25px;
  z-index: 1009;
  display: flex;
  gap: 20px;
}

.top-right-socials a {
  color: var(--pastel-icons-navbar);
  font-size: 1.5rem;
  transition: color 0.3s, transform 0.3s;
}

.top-right-socials a:hover {
  color: var(--pastel-vert-sauge);
  transform: scale(1.15) translateY(-2px);
  text-shadow: 0 0 8px var(--pastel-vert-sauge);
}

/* --- Animation du Burger en 'X' --- */
.burger.active .burger-line:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}

.burger.active .burger-line:nth-child(2) {
  opacity: 0;
}

.burger.active .burger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* --- Sidebar (Menu qui glisse) --- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background: var(--pastel-vert-sauge);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 1px solid var(--pastel-border-blue);
  z-index: 1005;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 0 40px;
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.18, 1);
}

.sidebar.active {
  transform: translateX(0);
}

.sidebar-link {
  color: var(--pastel-cream-book-bg);
  font-family: var(--font-primary);
  font-size: 1.5rem;
  text-decoration: none;
  padding: 15px 0;
  transition: color 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}

.sidebar-link i {
  margin-right: 15px;
  font-size: 0.9em;
  width: 25px;
  text-align: center;
}

.sidebar-link::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--title-Brown-Brique), var(--pastel-cream-book-bg));
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-link:hover {
  color: var(--pure-white);
  transform: translateX(10px);
  text-shadow: 0 0 8px var(--title-Brown-Brique);
}

.sidebar-link:hover::before {
  width: 100%;
}

/*
=========================================================================
  7. SECTION HEADER (ACCUEIL)
=========================================================================
  Info: Styles pour la section d'en-tête principale (hero).
*/
#header {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: url('/images/BackgroundsiteKaatartiste.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
}

.header-content-box {
  z-index: 3;
  padding: 25px 30px;
  background-color: transparent;
  border-radius: 10px;
  max-width: 100%;
  box-sizing: border-box;
}

#header .firstline {
  font-weight: 700;
  font-family: var(--font-secondary);
  font-size: clamp(3.5rem, 8vw, 7rem);
  text-shadow: 2px 2px 5px var(--shadow-color-deep);
  margin-bottom: 0.25rem;
  line-height: 1.1;
}

#header .firstline .highlight-rose {
  color: var(--title-Brown-Brique);
}

#header .secondline {
  font-family: var(--font-primary);
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 500;
  color: var(--pastel-white-transparent);
  text-shadow: 1px 1px 3px var(--shadow-color-medium);
  line-height: 1.4;
}

#header .header-subtitle {
  font-family: var(--font-primary);
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  color: var(--pastel-vert-sauge);
  font-weight: 400;
  text-shadow: 2px 2px 8px var(--shadow-color-medium);
  margin-top: 0.5rem;
  line-height: 1.3;
}

#header .social-media-links {
  margin-top: 25px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 15px;
}

#header .social-media-links a {
  color: var(--text-color);
  opacity: 0.7;
  transition: all 0.4s ease;
  display: inline-block;
}

#header .social-media-links a:hover {
  opacity: 1;
  transform: scale(1.15) translateY(-2px);
  color: var(--pastel-rose-light);
}

#header .social-media-links .social-icon {
  font-size: 25px;
}

/*
=========================================================================
  8. TITRES DE PAGE GÉNÉRIQUES
=========================================================================
  Info: Effet Brume sur la page d'acceuil
*/
#header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--text-color-rosé) 20%, rgba(241, 228, 216, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

/*
=========================================================================
  8. TITRES DE PAGE GÉNÉRIQUES
=========================================================================
  Info: Styles pour les titres principaux de chaque section.
*/
.page-header {
  text-align: center;
  margin: 40px 0 15px;
  font-family: var(--font-secondary);
  font-size: clamp(2.8rem, 8vw, 4.5rem);
  color: var(--title-Brown-Brique);
  letter-spacing: 1px;
  text-shadow:
    /* 1. Lumière douce pour le relief */
    -1px -1px 1px rgba(255, 255, 255, 0.1),
    /* 2. Bordure colorée, légèrement adoucie */
    1px 1px 2px #4a2924,
    /* 3. Ombre portée pour la profondeur */
    3px 3px 6px rgba(0, 0, 0, 0.4);
}

.page-header .header-caption {
  display: block;
  font-family: var(--font-primary);
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  color: var(--title-Brown-Brique);
  margin-top: 5px;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

.portfolio-header-spacing {
  margin-top: 20px;
  margin-bottom: 25px;
}

.subsection-title {
  font-family: var(--font-secondary);
  font-size: 2rem;
  color: var(--title-Brown-Brique);
  /* effet 3D */
  text-shadow:
    1px 1px 0px rgba(0, 0, 0, 0.15),
    2px 2px 0px rgba(0, 0, 0, 0.1),
    3px 3px 5px rgba(0, 0, 0, 0.2);
}

/*
=========================================================================
  9. CONTENEURS DE CONTENU PRINCIPAUX
=========================================================================
  Info: Classe générique pour structurer les sections de contenu.
*/
.content-section {
  padding: 30px 20px 40px;
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
}

#portfolio-content.content-section {
  padding-top: 20px;
  padding-bottom: 40px;
}

/*
=========================================================================
  10. SECTION PORTFOLIO (CARROUSELS & MODALE)
=========================================================================
  Info: Styles pour les carrousels d'images et la modale d'affichage.
*/

/* Titre de la galerie */
.carousel-title {
  font-family: var(--font-secondary);
  font-size: 2.5rem;
  color: var(--title-Brown-Brique);
  text-align: center;
  margin-bottom: 25px;
  text-shadow:
    1px 1px 0px rgba(0, 0, 0, 0.1),
    2px 2px 4px rgba(0, 0, 0, 0.15);
}

/* Supprime tous les styles de .swiper-container, .swiper-slide, .swiper-button-next, etc. */

/*
=========================================================================
  10.B - NOUVELLE GALERIE VIVANTE (SCROLLING GALLERY)
=========================================================================
*/
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    /* On déplace de la moitié de la largeur totale (car on a dupliqué les images) */
    transform: translateX(-50%);
  }
}

.scrolling-gallery-section {
  margin-bottom: 80px;
}

.scrolling-gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Masque les côtés pour un effet de fondu doux */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.scrolling-gallery-track {
  display: flex;
  /* Opti téléphone */
  width: var(--track-width);
  animation: scroll 40s linear infinite;
}

/* carousel en pause au survol */
.scrolling-gallery:hover .scrolling-gallery-track {
  animation-play-state: paused;
}

.gallery-item {
  width: 350px;
  /* Largeur fixe pour chaque image */
  flex-shrink: 0;
  padding: 0 15px;
  /* Espace entre les images */
  cursor: pointer;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 5px 20px var(--shadow-color-dark);
}

.scrolling-gallery:hover .gallery-item {
  filter: blur(2px);
  /* Floute légèrement les autres images */
  transform: scale(0.95);
}

.scrolling-gallery .gallery-item:hover {
  filter: none;
  /* Annule le flou sur l'image survolée */
  transform: scale(1.05);
  /* Agrandit l'image survolée */
}

/* --- Modale d'Image --- */
.gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 26, 42, 0.8);
  backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
}

.modal-content {
  position: relative;
  background: var(--text-color-rosé);
  border-radius: 15px;
  border: 1px solid var(--pastel-border-blue);
  box-shadow: 0 10px 40px var(--shadow-color-deep);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  color: var(--pastel-rose-light);
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 10;
  transition: color 0.3s, transform 0.3s;
}

.modal-close-btn:hover {
  color: var(--pastel-yellow-light);
  transform: rotate(90deg);
}

#modal-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: contain;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.modal-description-wrapper {
  padding: 30px;
  text-align: center;
}

.scroll-arrow {
  font-size: 2rem;
  color: var(--pastel-rose-light);
  animation: bounce 2s infinite;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-15px);
  }

  60% {
    transform: translateY(-8px);
  }
}

.modal-text-content {
  opacity: 1;
}

#modal-title {
  font-family: var(--font-secondary);
  font-size: 2rem;
  color: var(--title-Brown-Brique);
  margin-bottom: 15px;
}

#modal-description {
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--pastel-vert-sauge);
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto;
}

/*
=========================================================================
  11. SECTION ABOUT (Présentation, Services, Compétences)
=========================================================================
  Info: Styles pour la page "À propos".
*/

/* --- Section Principale "About Me" --- */
#about-content .about-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 30px;
  margin-bottom: 50px;
}

#about-content .about-text-content {
  flex: 1;
  min-width: 300px;
  text-align: left;
}

#about-content .about-text-content .about-first-line {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--title-Brown-Brique);
  margin-bottom: 15px;
}

#about-content .about-text-content .about-second-line {
  display: block;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--pastel-vert-sauge);
  margin-bottom: 10px;
}

#about-content .about-img {
  flex-basis: 300px;
  max-width: 350px;
  margin: 0 auto;
}

#about-content .about-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px var(--shadow-color-medium);
}

/* --- Boutons de langue --- */
#about-content .about-text-content button[onclick^="showLang"] {
  background-color: transparent;
  color: var(--title-Brown-Brique);
  border: 1px solid var(--title-Brown-Brique);
  padding: 6px 12px;
  margin: 15px 5px 5px 0;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

#about-content .about-text-content button[onclick^="showLang"]:hover {
  background-color: var(--title-Brown-Brique);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(174, 198, 207, 0.3);
}

#about-content .about-text-content button[onclick^="showLang"].active-lang {
  background-color: var(--title-Brown-Brique);
  color: var(--pure-white);
  border-color: var(--title-Brown-Brique);
  box-shadow: 0 1px 5px rgba(255, 182, 193, 0.4);
}

/* --- Section Services --- */
#services {
  margin-bottom: 50px;
  text-align: center;
}

#services .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

#services .service {
  background-color: var(--pastel-bg-blue-service);
  padding: 25px 20px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--pastel-border-blue-service);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#services .service:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px var(--shadow-color-medium);
}

#services .service-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

#services .service h4 {
  font-size: 1.3rem;
  color: var(--title-Brown-Brique);
  margin-bottom: 8px;
  font-family: var(--font-secondary);
}

#services .service p {
  font-size: 0.9rem;
  color: var(--pastel-vert-sauge);
  line-height: 1.5;
}

/* --- Section Compétences (Skills) --- */
#skills {
  margin-bottom: 50px;
  text-align: center;
}

#skills .skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px 30px;
  margin-top: 30px;
  text-align: left;
}

#skills .skill {
  padding: 10px 0;
}

#skills .skill-name {
  display: block;
  font-size: 1rem;
  color: var(--title-Brown-Brique);
  margin-bottom: 8px;
  font-weight: 500;
}

#skills .skill-bar-container {
  width: 100%;
  background-color: var(--pure-white);
  border-radius: 5px;
  height: 12px;
  overflow: hidden;
}

#skills .skill-bar {
  height: 100%;
  width: 0;
  background-color: var(--pastel-vert-sauge);
  border-radius: 5px;
}

/*
=========================================================================
  12. SECTION CONTACT & AVIS
=========================================================================
  Info: Styles pour les pages Contact et Avis.
*/

#contact-content,
#review-content {
  padding: 15px 20px 40px;
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
}

#contact-content .page-header,
#review-content .page-header {
  margin-top: 15px;
}

/* --- Section Contact --- */
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
  padding: 25px;
  background-color: var(--text-color-rosé);
  border-radius: 8px;
}

.contact-form,
.contact-info {
  flex: 1;
  min-width: 280px;
  padding: 20px;
  background-color: var(--text-color-rosé);
  box-shadow: 0 4px 15px var(--shadow-color-medium);
}

.contact-form h2,
.contact-info h2 {
  font-family: var(--font-secondary);
  color: var(--title-Brown-Brique);
  font-size: 1.6rem;
  margin-bottom: 20px;
  text-align: center;
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  color: var(--pastel-vert-sauge);
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 500;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--pastel-border-blue);
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--title-Brown-Brique);
  border-radius: 4px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--pastel-rose-vivid);
  background-color: rgba(255, 255, 255, 0.08);
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form button#submit {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: var(--pastel-status-green);
  color: var(--pure-white);
  border: none;
  border-radius: 4px;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-form button#submit:hover {
  background-color: var(--title-Brown-Brique);
  color: var(--charcoal-text);
  transform: translateY(-2px);
}

.contact-info .contact-info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 12px;
  border-radius: 6px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-info .contact-info-item:hover {
  background-color: rgba(255, 255, 255, 0.03);
  transform: translateY(-2px);
}

.contact-info .contact-info-item i {
  font-size: 1.3rem;
  color: var(--title-Brown-Brique);
  margin-right: 15px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 3px;
}

.contact-info .contact-info-item .info-details {
  display: flex;
  flex-direction: column;
}

/* ✨ 2. MODIFIE LA COULEUR DES TITRES ("Email", "Discord", etc.) ICI ✨ */
.contact-info .contact-info-item .info-details strong {
  display: block;
  /* On remplace le vert sauge par le marron brique */
  color: var(--title-Brown-Brique);
  font-size: 1rem;
  margin-bottom: 4px;
}

.contact-info .contact-info-item .info-details p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--pastel-vert-sauge);
}

.contact-info .contact-info-item .info-details p a {
  color: var(--pastel-vert-sauge);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-info .contact-info-item .info-details p a:hover {
  color: var(--title-Brown-Brique);
  text-decoration: underline;
}

/* --- Section Avis (Reviews) --- */
.reviews-display-section,
.review-form-section {
  background-color: rgba(255, 255, 255, 0.02);
  padding: 25px 30px;
  border-radius: 15px;
  margin-bottom: 40px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

#review-content .section-title {
  color: var(--title-Brown-Brique);
  font-family: var(--font-secondary);
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin-bottom: 30px;
  text-shadow: 1px 1px 2px var(--shadow-color-light);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 25px;
  padding: 20px 0;
}

.review-card {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--pastel-border-white-transparent);
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.review-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

.review-card .review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.review-card .review-author {
  font-family: var(--font-secondary);
  font-size: 1.4rem;
  color: var(--title-Brown-Brique);
  font-weight: normal;
  margin: 0;
}

.review-card .review-date {
  font-size: 0.8rem;
  color: var(--pastel-vert-sauge);
  font-style: italic;
  padding-top: 5px;
}

.review-card .review-rating {
  color: var(--pastel-yellow-light);
  font-size: 1.1rem;
}

.review-card .review-rating .fas.fa-star,
.review-card .review-rating .far.fa-star {
  margin-right: 3px;
}

.review-card .review-rating .far.fa-star {
  opacity: 0.6;
}

.review-card .review-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--title-Brown-Brique);
  margin-top: 5px;
  line-height: 1.3;
}

.review-card .review-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--pastel-vert-sauge);
  flex-grow: 1;
  white-space: pre-wrap;
}

.reviews-grid .no-reviews-message {
  text-align: center;
  font-family: var(--font-primary);
  color: var(--text-color-muted);
  font-size: 1.1rem;
  padding: 40px 20px;
  font-style: italic;
  line-height: 1.6;
  background-color: var(--title-Brown-Brique);
  border-radius: 8px;
  border: 1px dashed var(--title-Brown-Brique);
  margin: 20px auto;
  max-width: 80%;
}

/* --- Formulaire d'avis --- */
.review-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.review-form .form-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
}

.review-form label {
  font-family: var(--font-primary);
  color: var(--pastel-vert-sauge);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
}

.review-form input[type="text"],
.review-form input[type="email"],
.review-form textarea {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--title-Brown-Brique);
  padding: 12px 15px;
  border-radius: 8px;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.review-form textarea {
  min-height: 130px;
  resize: vertical;
}

.review-form input:focus,
.review-form textarea:focus {
  border-color: var(--title-Brown-Brique);
  box-shadow: 0 0 0 2.5px rgba(128, 224, 230, 0.25);
  background-color: rgba(255, 255, 255, 0.07);
  outline: none;
}

.star-rating-input i.fa-star {
  color: var(--title-Brown-Brique);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  font-size: 1.8rem;
  margin: 0 3px;
}

.star-rating-input i.fa-star.selected,
.star-rating-input i.fa-star.hovered {
  color: var(--pastel-yellow-light);
  transform: scale(1.12);
}

.review-form button.submit-button {
  display: block;
  width: auto;
  max-width: 300px;
  margin: 25px auto 0;
  background-color: var(--pastel-status-green);
  color: var(--pure-white);
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 25px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px var(--shadow-color-medium);
}

.review-form button.submit-button:hover,
.review-form button.submit-button:focus {
  background-color: var(--title-Brown-Brique);
  color: var(--charcoal-text);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 12px var(--shadow-color-dark);
  outline: none;
}

.review-form button.submit-button i {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.review-form button.submit-button:hover i {
  transform: translateX(3px) rotate(10deg);
}

/*
=========================================================================
  12.C - FOOTER (PIED DE PAGE)
=========================================================================
  Info: Styles pour le pied de page.
*/
.footer {
  width: 100%;
  padding: 25px 0;
  background-color: var(--primary-color);
  color: var(--text-color-muted);
  text-align: center;
  margin-top: auto;
  border-top: 1px solid var(--pastel-border-white-transparent);
}

.footer-text {
  font-size: 0.85rem;
}

.footer-text img.images {
  vertical-align: middle;
  margin-right: 8px;
}

/*
=========================================================================
  13. SECTION COMMANDES (COMMISSIONS)
=========================================================================
  Info: Styles pour la page des commandes.
*/
#commission-content {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
}

/* --- Statut des Commandes --- */
#commission-status-wrapper {
  text-align: center;
  margin-bottom: 40px;
}

#commission-status-badge {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 50px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--primary-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#commission-status-badge:hover {
  transform: scale(1.05);
}

.status-open {
  background: linear-gradient(45deg, var(--pastel-green-light), var(--pastel-status-green));
  box-shadow: 0 4px 15px rgba(178, 223, 219, 0.4);
}

.status-closed {
  background: linear-gradient(45deg, var(--pastel-rose-dusty), var(--pastel-status-red));
  box-shadow: 0 4px 15px rgba(188, 143, 143, 0.4);
}

.status-waitlist {
  background: linear-gradient(45deg, var(--pastel-blue-light), var(--pastel-status-orange));
  box-shadow: 0 4px 15px rgba(174, 198, 207, 0.4);
}

/* --- Accordéon pour Détails des Commandes --- */
#commission-accordion-container {
  max-width: 900px;
  margin: 0 auto 50px;
}

.accordion-item {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--pastel-border-white-transparent);
  border-radius: 12px;
  margin-bottom: 15px;
  overflow: hidden;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.accordion-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.accordion-title {
  font-family: var(--font-secondary);
  font-size: 1.7rem;
  color: var(--pastel-vert-sauge);
  text-shadow:
    -1px -1px 1px rgba(255, 255, 255, 0.08),
    1px 1px 2px #6b785d,
    2px 2px 4px rgba(0, 0, 0, 0.3);
}

.accordion-icon {
  font-size: 1.5rem;
  color: var(--title-Brown-Brique);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.subsection-title {
  font-family: var(--font-secondary);
  font-size: 2rem;
  color: var(--title-Brown-Brique);
  text-shadow:
    -1px -1px 1px rgba(255, 255, 255, 0.1),
    1px 1px 2px #4a2924,
    3px 3px 6px rgba(0, 0, 0, 0.4);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  padding: 0 25px;
}

.accordion-content-inner {
  padding-bottom: 25px;
}

.accordion-image {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--pastel-border-white-transparent);
  box-shadow: 0 4px 15px var(--shadow-color-light);
  margin-bottom: 25px;
}

.accordion-details-wrapper {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.content-col {
  flex: 1;
  min-width: 250px;
}

.content-col h4 {
  font-family: var(--font-secondary);
  font-size: 1.2rem;
  color: var(--title-Brown-Brique);
  margin-bottom: 15px;
  border-bottom: 1px solid var(--pastel-border-white-transparent);
  padding-bottom: 8px;
}

.pricing-table,
.process-list {
  list-style: none;
  padding: 0;
}

.pricing-table li,
.process-list li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--pastel-vert-sauge);
}

.process-list li {
  justify-content: flex-start;
  padding-left: 20px;
  position: relative;
}

.process-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--title-Brown-Brique);
}

/* Classe 'active' pour l'état ouvert */
.accordion-item.active .accordion-icon {
  transform: rotate(135deg);
}

.accordion-item.active .accordion-content {
  max-height: 1000px;
  /* Fallback pour l'animation JS */
}

/*
=========================================================================
  Ajoute ce bloc entier pour styliser les conditions.
=========================================================================
*/
.commission-terms {
  max-width: 900px;
  margin: 60px auto 40px;
}

.subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--pastel-border-white-transparent);
  padding-bottom: 15px;
}

.subsection-title {
  font-family: var(--font-secondary);
  font-size: 2rem;
  color: var(--title-Brown-Brique);
  text-shadow:
    -1px -1px 1px rgba(255, 255, 255, 0.15),
    1px 1px 2px #4a2924,
    3px 3px 6px rgba(0, 0, 0, 0.4);
}

.lang-switcher-container .lang-btn {
  background-color: transparent;
  color: var(--title-Brown-Brique);
  border: 1px solid var(--text-color-rosé);
  padding: 8px 15px;
  margin-left: 10px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lang-switcher-container .lang-btn:hover {
  background-color: var(--pastel-cream-book-bg);
  color: var(--primary-color);
}

.lang-switcher-container .lang-btn.active-lang {
  background-color: var(--title-Brown-Brique);
  color: var(--pure-white);
  border-color: var(--title-Brown-Brique);
}

#commission-terms-list {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

#commission-terms-list li {
  background-color: rgba(255, 255, 255, 0.02);
  padding: 15px 20px 15px 45px;
  margin-bottom: 8px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pastel-vert-sauge);
  position: relative;
  border-left: 3px solid var(--pastel-vert-sauge);
}

#commission-terms-list li::before {
  content: '📜';
  position: absolute;
  left: 15px;
  top: 15px;
  font-size: 1.2rem;
}

/*
=========================================================================
  Ajoute ce bloc pour sublimer la section contact.
=========================================================================
*/
#commission-contact-wrapper {
  max-width: 900px;
  margin: 60px auto 40px;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--pastel-border-white-transparent);
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

#commission-contact-wrapper p {
  font-size: 1.1rem;
  color: var(--pastel-vert-sauge);
  line-height: 1.6;
  margin-bottom: 25px;
}

.commission-contact-button {
  display: inline-block;
  background-color: var(--pastel-status-green);
  color: var(--primary-color);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1rem;
  padding: 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.2);
}

.commission-contact-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 182, 193, 0.3);
  background-color: var(--title-Brown-Brique);
  color: var(--pure-white);
}

/*
=========================================================================
  15. STYLES POUR LA PAGE LÉGALE
=========================================================================

  Info: Rend le texte de la page légale parfaitement lisible.
*/
.legal-content {
  /* On définit une couleur de texte sombre par défaut pour cette section */
  color: var(--charcoal-text);
  line-height: 1.7;
}

.legal-content .subsection-title {
  /* On s'assure que les sous-titres restent bien visibles */
  color: var(--title-Brown-Brique);
  margin-top: 40px;
  margin-bottom: 15px;
}

.legal-content p {
  /* On ajuste la taille pour une meilleure lisibilité */
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.legal-content strong {
  /* On met les labels en gras et dans la couleur principale */
  color: var(--title-Brown-Brique);
  font-weight: 600;
}

/*
=========================================================================
  14. SECTION NEWSLETTER (ACCUEIL)
=========================================================================
  Info: Styles pour la section des actualités (newsletter).
*/
#newsletter-section {
  /* opacity: 0; */
  /* ✨ SUPPRIMÉ */
  /* visibility: hidden; */
  /* ✨ SUPPRIMÉ */
  padding-top: 40px;
  padding-bottom: 60px;
}

#newsletter-section .page-header {
  margin-bottom: 50px;
}

.newsletter-posts-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px;
}

.newsletter-post {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--pastel-border-white-transparent);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.newsletter-post:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.newsletter-post .post-thumbnail {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.newsletter-post .post-content {
  padding: 20px 25px 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
}

.newsletter-post .post-title {
  font-family: var(--font-secondary);
  font-size: 1.8rem;
  color: var(--title-Brown-Brique);
  margin-bottom: 15px;
}

.newsletter-post .post-excerpt {
  font-size: 0.95rem;
  color: var(--pastel-vert-sauge);
  line-height: 1.75;
  margin-bottom: 0;
  flex-grow: 1;
}