/* ================================================================
   style.css — Les Lames de la Rose
   Feuille de style principale du site.

   TABLE DES MATIÈRES
   ------------------------------------------------------------------
   1.  Variables CSS (palette, typographie)
   2.  Reset & base
   3.  Navigation fixe
   4.  Section Hero (plein écran)
   5.  Boutons réutilisables
   6.  Section Catégories
   7.  Section À Propos
   8.  Section Comment ça fonctionne
   9.  Bande Galerie
   10. Footer
   11. Animations d'apparition au scroll (.reveal)
   12. Scrollbar personnalisée
   13. Media queries (responsive ≤ 900px)
================================================================ */


/* ----------------------------------------------------------------
   1. VARIABLES CSS
   Toutes les couleurs et valeurs répétées sont centralisées ici.
   Pour modifier la palette du site, seul ce bloc est à toucher.
---------------------------------------------------------------- */
:root {
  /* Dorés */
  --gold:       #c9a84c;   /* Doré principal (titres, accents, bordures) */
  --gold-light: #e0c06a;   /* Doré clair (hover des boutons dorés)       */
  --gold-dim:   #8a6f2e;   /* Doré sombre (poignée de la scrollbar)       */

  /* Noirs et sombres */
  --black:      #0a0908;   /* Fond de page principal                     */
  --dark:       #111010;   /* Variante sombre légèrement plus claire      */
  --dark-mid:   #1a1816;   /* Fond section "À propos" texte               */
  --dark-card:  #161412;   /* Fond des cartes et footer                   */

  /* Blancs et gris */
  --white:      #f0ebe3;   /* Texte principal (blanc chaud, non pur)      */
  --white-dim:  #9e9689;   /* Texte secondaire / liens nav inactifs       */

  /* Bordure décorative semi-transparente dorée */
  --border: rgba(201, 168, 76, 0.2);
}


/* ----------------------------------------------------------------
   2. RESET & BASE
   Supprime les marges/paddings par défaut des navigateurs et
   définit les styles globaux du body.
---------------------------------------------------------------- */

/* Box-sizing appliqué à tous les éléments :
   la largeur/hauteur inclut padding et border (plus prévisible) */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Scroll fluide pour les ancres (#hero, #about, etc.) */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Raleway', sans-serif;
  font-weight: 300;          /* Raleway léger pour un rendu élégant */
  overflow-x: hidden;        /* Évite le scroll horizontal indésirable */
}


/* ----------------------------------------------------------------
   3. NAVIGATION FIXE
   La nav reste collée en haut pendant tout le scroll.
   Le fond semi-transparent + blur donne un effet "verre dépoli".
---------------------------------------------------------------- */
nav {
  position: fixed;           /* Détache la nav du flux normal */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;              /* Passe par-dessus toutes les sections */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 4rem;
  background: rgba(10, 9, 8, 0.92); /* Fond presque opaque */
  backdrop-filter: blur(12px);      /* Flou sur le contenu en dessous */
  border-bottom: 1px solid var(--border);
}

/* Conteneur logo (icône SVG + texte) */
.logo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}

/* Icône SVG du logo */
.logo-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;            /* Ne rétrécit pas si la nav est étroite */
  background: url('../assets/logo.png?v=2') center / contain no-repeat;
}

/* Les anciens tracés intégrés sont masqués au profit du logo floral partagé. */
.logo-icon > * {
  display: none;
}

/* Texte "Les Lames / de la Rose" */
.logo-text {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--white);
  line-height: 1.55;
  text-transform: uppercase;
}

/* Liste des liens de navigation (display flex = côte à côte) */
.nav-links {
  display: flex;
  gap: 2.8rem;
  list-style: none;
}

/* Bouton créé par main.js et affiché uniquement sur téléphone. */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--border);
  background: rgba(10, 9, 8, 0.72);
  color: var(--white);
  cursor: pointer;
}

.menu-toggle-line {
  display: block;
  width: 100%;
  height: 1px;
  margin: 5px 0;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Style de base des liens nav */
.nav-links a {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(240, 235, 227, 0.82);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s;
  position: relative;        /* Nécessaire pour le pseudo-élément ::after */
}

/* Ligne dorée animée sous chaque lien au survol
   Elle est invisible par défaut (scaleX 0) et s'étend au hover */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);      /* Réduit à 0 par défaut */
  transition: transform 0.3s;
}

/* Lien survolé ou actif : texte blanc */
.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
}

/* Lien actif : ligne dorée visible + texte doré */
.nav-links a.active {
  color: var(--gold);
}

/* Affiche la ligne dorée au hover ET pour le lien actif */
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);      /* Étend la ligne sur toute la largeur */
}


/* ----------------------------------------------------------------
   4. SECTION HERO
   Occupe toute la hauteur de l'écran.
   La photo de fond est dans .hero-bg (séparée) pour pouvoir être
   animée (zoom) sans impacter le texte au-dessus.
---------------------------------------------------------------- */
#hero {
  position: relative;
  height: 100vh;
  min-height: 700px;         /* Plancher minimum pour petits écrans */
  display: flex;
  align-items: center;       /* Centre le contenu verticalement */
  overflow: hidden;          /* Cache le débordement du zoom */
}

/* Fond photo du hero avec dégradé de masque et zoom animé */
.hero-bg {
  position: absolute;
  inset: 0;                  /* Raccourci pour top/right/bottom/left: 0 */
  background:
    radial-gradient(circle at 72% 48%, rgba(181, 104, 35, 0.18), transparent 42%),
    linear-gradient(90deg, rgba(9, 8, 7, 0.94) 0%, rgba(9, 8, 7, 0.72) 43%, rgba(9, 8, 7, 0.2) 78%, rgba(9, 8, 7, 0.42) 100%),
    url('../assets/Atelier_image_2_hd.png') center / cover no-repeat;
  filter: saturate(0.88) contrast(1.08);
  transform: scale(1.02);    /* Très léger débordement pour préserver la netteté */
  animation: heroZoom 20s ease-in-out infinite alternate;
}

/* Animation Ken Burns : zoom lent continu aller-retour */
@keyframes heroZoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.06); }
}

/* Contenu textuel positionné par-dessus le fond */
.hero-content {
  position: relative;
  z-index: 2;                /* Passe au-dessus de .hero-bg */
  margin-left: 4rem;
  padding: 3.2rem 3.5rem;
  max-width: 680px;
  background: linear-gradient(135deg, rgba(16, 14, 12, 0.88), rgba(16, 14, 12, 0.58));
  border: 1px solid rgba(201, 168, 76, 0.34);
  border-left: 3px solid var(--gold);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(5px);
  opacity: 0;                /* Invisible au chargement */
  animation: fadeUp 1s 0.3s forwards; /* Apparaît après 0.3s de délai */
}

/* Animation d'entrée du contenu hero : monte et s'opacifie */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Titre principal du hero */
.hero-content h1 {
  font-family: 'Cinzel', serif;
  /* clamp(min, préféré, max) : taille fluide entre 2.4rem et 4rem */
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

/* Mots mis en valeur dans le titre (ex: "Feu.", "Durer.") */
.hero-content h1 em {
  font-style: normal;        /* Annule l'italique par défaut de <em> */
  color: var(--gold);
}

/* Trait horizontal doré séparateur sous le titre */
.hero-divider {
  width: 50px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 1.6rem;
}

/* Texte de description sous le titre */
.hero-content p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(240, 235, 227, 0.75);
  max-width: 420px;
  margin-bottom: 2.6rem;
}


/* ----------------------------------------------------------------
   5. BOUTONS RÉUTILISABLES
   .btn-outline : contour blanc → fond doré au hover (effet slide)
   .btn-gold    : fond doré plein, texte noir
---------------------------------------------------------------- */

/* Bouton contour avec effet de remplissage doré au survol */
.btn-outline {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid var(--white);
  padding: 0.9rem 2rem;
  text-decoration: none;
  transition: color 0.35s, border-color 0.35s;
  position: relative;        /* Nécessaire pour le ::before absolu */
  overflow: hidden;          /* Cache le fond doré quand il est hors-cadre */
}

/* Fond doré caché à gauche, glisse vers la droite au hover */
.btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-101%); /* Hors champ à gauche */
  transition: transform 0.35s ease;
  z-index: -1;               /* Passe derrière le texte */
}

/* Au survol : texte noir (sur fond doré), bordure dorée */
.btn-outline:hover {
  color: var(--black);
  border-color: var(--gold);
}

/* Fait glisser le fond doré dans la zone visible */
.btn-outline:hover::before {
  transform: translateX(0);
}

/* Bouton plein doré (utilisé pour le CTA "Passer une commande") */
.btn-gold {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold);
  padding: 0.9rem 2rem;
  text-decoration: none;
  transition: background 0.3s;
}

.btn-gold:hover {
  background: var(--gold-light); /* Légèrement plus clair au survol */
}


/* ----------------------------------------------------------------
   6. SECTION CATÉGORIES
   3 cartes en grille, chacune avec photo de fond + texte overlay.
---------------------------------------------------------------- */
#categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
  border-top: 1px solid var(--border);
}

/* Carte individuelle (conteneur relatif pour les éléments absolus) */
.cat-card {
  position: relative;
  height: 280px;
  overflow: hidden;
  cursor: pointer;
}

/* Séparateur vertical entre les cartes (sauf avant la 1ère) */
.cat-card + .cat-card {
  border-left: 1px solid var(--border);
}

/* Photo de fond de la carte : séparée pour zoomer indépendamment */
.cat-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease, filter 0.7s ease;
  filter: brightness(0.45);  /* Assombrie par défaut pour lisibilité */
}

/* Zoom et éclaircissement au survol de la carte */
.cat-card:hover .cat-bg {
  transform: scale(1.07);
  filter: brightness(0.6);
}

/* Overlay texte positionné en bas de la carte
   Dégradé du bas (sombre) vers le haut (transparent) */
.cat-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Colle le contenu en bas */
  padding: 2rem;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.8) 0%, transparent 60%);
}

/* Titre de catégorie */
.cat-content h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Description courte */
.cat-content p {
  font-size: 0.82rem;
  color: rgba(240, 235, 227, 0.65);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Lien "Découvrir" avec flèche animée */
.cat-link {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s;
}

/* Flèche "→" ajoutée via CSS */
.cat-link::after {
  content: '→';
  transition: transform 0.3s;
}

/* Au survol de la carte, la flèche s'éloigne du texte */
.cat-card:hover .cat-link {
  gap: 0.8rem;
}


/* ----------------------------------------------------------------
   7. SECTION À PROPOS
   Layout 2 colonnes : photo | texte+logo
---------------------------------------------------------------- */
#about {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  min-height: 0;
}

/* Colonne gauche : image du forgeron */
.about-img {
  position: relative;
  overflow: hidden;
}

.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* Recadre sans déformer */
  filter: brightness(0.6) sepia(0.2); /* Tonalité sombre légèrement chaude */
  transition: filter 0.5s;
  display: block;
}

/* Légère clarification au survol de la section entière */
#about:hover .about-img img {
  filter: brightness(0.7) sepia(0.15);
}

/* Colonne droite : texte principal et logo décoratif compact. */
.about-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 16vw, 220px);
}

/* Panneau de texte "À propos" */
.about-text {
  background: var(--dark-mid);
  padding: 3.25rem clamp(2rem, 4vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

/* Étiquette de section (ex: "À PROPOS", "COMMANDES SUR MESURE") */
.section-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

/* Titre h2 des sections secondaires */
.about-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 1.2rem;
}

/* Séparateur doré fin sous le titre */
.about-divider {
  width: 36px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 1.4rem;
}

/* Paragraphes du texte "À propos" */
.about-text p {
  font-size: 0.87rem;
  line-height: 1.85;
  color: rgba(240, 235, 227, 0.65);
  margin-bottom: 1rem;
}

.about-text p:last-of-type {
  margin-bottom: 2rem;       /* Espace avant le bouton */
}

.about-text .btn-outline {
  align-self: flex-start;
}

.about-text .about-highlight {
  color: var(--gold-light);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05em;
  font-weight: 400;
}

/* Panneau contenant le logo décoratif géant */
.about-logo-pane {
  background: var(--dark-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo SVG agrandi, très transparent (watermark décoratif) */
.about-logo-large {
  width: 150px;
  height: 180px;
  opacity: 0.14;
  background: url('../assets/logo.png?v=2') center / contain no-repeat;
}

.about-logo-large > * {
  display: none;
}


/* ----------------------------------------------------------------
   8. SECTION "COMMENT ÇA FONCTIONNE"
   4 étapes du processus en grille horizontale.
---------------------------------------------------------------- */
#how {
  padding: 6rem 4rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* Titre de section */
#how h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4rem;
}

/* Grille des 4 étapes */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;                  /* Fin espace entre les cartes */
  margin-bottom: 3.5rem;
}

/* Carte d'une étape */
.step {
  padding: 2.5rem 1.8rem;
  background: var(--dark-card);
  text-align: left;
  border: 1px solid var(--border);
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}

/* Lueur dorée subtile en haut-gauche au survol (pseudo-élément) */
.step::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}

/* Fond légèrement plus clair + lueur au survol */
.step:hover {
  background: #1c1a17;
}

.step:hover::before {
  opacity: 1;
}

/* Numéro de l'étape (01, 02…) en grand, semi-transparent */
.step-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--gold);
  opacity: 0.6;
  line-height: 1;
  margin-bottom: 1rem;
}

/* Titre de l'étape */
.step h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

/* Description de l'étape */
.step p {
  font-size: 0.82rem;
  color: rgba(240, 235, 227, 0.55);
  line-height: 1.75;
}


/* ----------------------------------------------------------------
   9. BANDE GALERIE
   5 photos en une rangée horizontale, effet sépia levé au hover.
---------------------------------------------------------------- */
#gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 220px;
  overflow: hidden;
  border-top: 1px solid var(--border);
}

/* Cellule individuelle de la galerie */
.gallery-item {
  overflow: hidden;
  cursor: pointer;
}

/* Photo avec filtre sombre + sépia par défaut */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5) sepia(0.3);
  transition: filter 0.5s, transform 0.7s;
}

/* Au survol : éclaircissement, moins de sépia, léger zoom */
.gallery-item:hover img {
  filter: brightness(0.75) sepia(0.1);
  transform: scale(1.08);
}


/* ----------------------------------------------------------------
   10. FOOTER
   2 colonnes : marque + contact.
---------------------------------------------------------------- */
footer {
  background: var(--dark-card);
  border-top: 1px solid var(--border);
  padding: 3.5rem 4rem;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
  justify-content: space-between;
  gap: 3rem;
}

/* Description courte de la marque dans le footer */
.footer-brand p {
  font-size: 0.8rem;
  color: var(--white-dim);
  line-height: 1.8;
  margin-top: 1rem;
  max-width: 240px;
}

/* Titre de colonne footer (ex: "NAVIGATION") */
.footer-col h4 {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}

footer > .footer-col:last-child {
  justify-self: end;
  min-width: 240px;
}

/* Liste de liens du footer */
.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 0.55rem;
}

.footer-col ul li a {
  font-size: 0.8rem;
  color: var(--white-dim);
  text-decoration: none;
  transition: color 0.3s;
}

/* Lien doré au survol */
.footer-col ul li a:hover {
  color: var(--gold);
}

.footer-cgv,
.footer-email,
.footer-instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.footer-cgv::before,
.footer-email::before,
.footer-instagram::before {
  content: '';
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
}

/* Document contractuel : une page aux lignes fines. */
.footer-cgv::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h8l4 4v14H6z' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M14 3v5h4M9 12h6M9 16h6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h8l4 4v14H6z' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M14 3v5h4M9 12h6M9 16h6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Enveloppe pour l'adresse de contact. */
.footer-email::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='white' stroke-width='1.8'/%3E%3Cpath d='m4 7 8 6 8-6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='white' stroke-width='1.8'/%3E%3Cpath d='m4 7 8 6 8-6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.footer-instagram::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Barre de copyright sous le footer */
.footer-bottom {
  background: var(--black);
  border-top: 1px solid var(--border);
  padding: 1.2rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  font-size: 0.72rem;
  color: rgba(158, 150, 137, 0.5);
  letter-spacing: 0.08em;
}


/* ----------------------------------------------------------------
   11. ANIMATIONS D'APPARITION AU SCROLL (.reveal)
   Les éléments avec cette classe commencent invisibles et décalés
   vers le bas. Le JS ajoute la classe .visible quand ils entrent
   dans le viewport, déclenchant la transition CSS.
---------------------------------------------------------------- */

/* État initial : invisible + décalé vers le bas */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* État final déclenché par JS : visible + en position */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ----------------------------------------------------------------
   12. SCROLLBAR PERSONNALISÉE (WebKit : Chrome, Edge, Safari)
   Donne une scrollbar fine et dorée cohérente avec la palette.
---------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--black);  /* Fond de la piste : noir */
}

::-webkit-scrollbar-thumb {
  background: var(--gold-dim); /* Poignée : doré sombre */
  border-radius: 3px;
}


/* ----------------------------------------------------------------
   13. MEDIA QUERIES — RESPONSIVE (≤ 900px)
   Adaptations pour tablettes et mobiles :
   les grilles multi-colonnes passent en 1 ou 2 colonnes.
---------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Navigation : padding réduit */
  nav {
    padding: 1rem 1.5rem;
  }

  .nav-links {
    gap: 1.5rem;
  }

  /* Hero : padding latéral réduit */
  .hero-content {
    margin: 0 1.25rem;
    padding: 2.5rem 2rem;
  }

  /* Catégories : empilées verticalement */
  #categories {
    grid-template-columns: 1fr;
  }

  /* Séparateur vertical → horizontal entre les cartes empilées */
  .cat-card + .cat-card {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  /* À propos : empilé verticalement */
  #about {
    grid-template-columns: 1fr;
  }

  .about-img img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* Sous-grille à propos : une seule colonne, logo masqué */
  .about-right {
    grid-template-columns: 1fr;
  }

  .about-logo-pane {
    display: none;            /* Supprimé sur mobile (pas assez de place) */
  }

  /* Étapes : 2 colonnes au lieu de 4 */
  .steps {
    grid-template-columns: 1fr 1fr;
  }

  /* Galerie : 3 colonnes au lieu de 5 */
  #gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer : 2 colonnes */
  footer {
    grid-template-columns: 1fr 1fr;
  }

  footer > .footer-col:last-child {
    justify-self: stretch;
    min-width: 0;
  }

  /* Copyright : centré et empilé */
  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* Navigation téléphone : le menu horizontal devient un menu burger. */
@media (max-width: 760px) {
  nav {
    padding: 0.8rem 1rem;
  }

  .logo-icon {
    width: 38px;
    height: 38px;
  }

  .logo-text {
    font-size: 0.62rem;
  }

  .menu-toggle {
    display: block;
    position: relative;
    z-index: 102;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    background: rgba(10, 9, 8, 0.98);
    border-bottom: 1px solid var(--border);
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 0.35s ease, opacity 0.25s ease,
      transform 0.25s ease, visibility 0.35s;
  }

  nav.menu-open .nav-links {
    max-height: calc(100vh - 65px);
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .nav-links li {
    border-top: 1px solid rgba(201, 168, 76, 0.12);
  }

  .nav-links a {
    display: block;
    padding: 1rem 1.5rem;
    font-size: 0.74rem;
  }

  .nav-links a::after {
    top: 0;
    bottom: 0;
    right: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
  }

  .nav-links a:hover::after,
  .nav-links a.active::after {
    transform: scaleY(1);
  }
}