/*
╔══════════════════════════════════════════════════════════════════╗
║          NOTRE-DAME DE PARIS — SYSTÈME CSS COMPLET               ║
║          Crystal INC. - Mathis Bégué.                            ║
╚══════════════════════════════════════════════════════════════════╝

TABLE DES MATIÈRES
──────────────────────────────────────────────────────────────────
  1.  TOKENS & RESET
        Variables globales, reset navigateur, scrollbar, sélection

  2.  TYPOGRAPHIE
        h1                   → Titre héroïque (Cinzel, très grand)
        h2                   → Titre de section centré + ligne or
        h3                   → Titre de carte ou sous-section
        h4                   → Sous-titre italic or (Cormorant)
        p                    → Paragraphe courant (Raleway 300)
        .nd-eyebrow          → Surtitre doré en capitales espacées
        .nd-lead             → Paragraphe d'introduction mis en valeur
        .nd-quote            → Citation courte avec barre or à gauche
        .nd-blockquote       → Citation longue avec guillemet décoratif
        .nd-caption          → Légende photo, petite et discrète
        .nd-label            → Étiquette de catégorie dorée

  3.  BOUTONS
        .btn-primary         → Bouton or plein — action principale
        .btn-secondary       → Bouton contour or — action secondaire
        .btn-ghost           → Bouton texte + soulignement animé
        .btn-dark            → Bouton fond sombre avec bordure subtile
        .btn-sm              → Modificateur taille petite
        .btn-lg              → Modificateur taille grande

  4.  LAYOUT & CONTENEURS
        .nd-container        → Wrapper centré max 1200px responsive
        .nd-section          → Section standard avec padding vertical
        .nd-section-dark     → Section fond légèrement plus clair
        .nd-section-gold     → Section avec touche or très subtile
        .nd-divider          → Séparateur décoratif avec lignes dégradées
        .nd-grid-2           → Grille 2 colonnes (responsive)
        .nd-grid-3           → Grille 3 colonnes (responsive)
        .nd-grid-4           → Grille 4 colonnes (responsive)

  5.  NAVIGATION
        .nd-nav              → Barre de navigation fixe avec blur
        .nd-nav-brand        → Logo / nom du site en Cinzel or
        .nd-nav-links        → Liste des liens de navigation
        .nd-nav-link         → Lien nav avec soulignement animé au survol
        .nd-nav-link.active  → Lien actif (page courante)

  6.  HERO
        .nd-hero             → Section plein écran centrée
        .nd-hero-bg          → Div image de fond (assombrie)
        .nd-hero-overlay     → Dégradé sombre automatique sur l'image
        .nd-hero-content     → Contenu centré avec animation d'entrée
        .nd-hero-title       → Grand titre héroïque avec ombre
        .nd-hero-subtitle    → Sous-titre italic léger
        .nd-hero-actions     → Conteneur flex pour les boutons CTA
        .nd-hero-scroll      → Indicateur de défilement animé en bas

  7.  CARTES
        .nd-card             → Carte verticale standard avec hover
        .nd-card-image       → Image de carte (240px, filtrée)
        .nd-card-body        → Corps de la carte avec padding
        .nd-card-horizontal  → Variante carte image à gauche + texte à droite

  8.  BADGES & TAGS
        .nd-badge            → Pastille or pleine (statut, catégorie)
        .nd-badge-outline    → Pastille contour or transparent
        .nd-badge-muted      → Pastille discrète fond sombre
        .nd-tag              → Tag arrondi cliquable avec hover

  9.  STATISTIQUES
        .nd-stat             → Bloc stat centré (à mettre dans .nd-grid-4)
        .nd-stat-number      → Grand chiffre doré Cinzel 900
        .nd-stat-label       → Libellé sous le chiffre en capitales

 10.  IMAGES
        .nd-img-full         → Image pleine largeur panoramique (filtrée)
        .nd-img-frame        → Image avec cadre or décalé décoratif

 11.  TIMELINE
        .nd-timeline         → Conteneur de la chronologie verticale
        .nd-timeline-item    → Un événement dans la timeline
        .nd-timeline-year    → Année en Cinzel or au-dessus du titre

 12.  ACCORDÉON
        .nd-accordion        → Conteneur de l'accordéon FAQ
        .nd-accordion-item   → Un item (question + réponse)
        .nd-accordion-item.open → Item ouvert (affiche la réponse)
        .nd-accordion-trigger   → Bouton question (onclick toggle "open")
        .nd-accordion-body      → Réponse cachée / affichée si .open

 13.  FORMULAIRE
        .nd-form-group       → Groupe label + champ avec espacement
        .nd-input            → Champ texte / textarea stylisé
        .nd-alert            → Bloc message informatif ou neutre
        .nd-alert-info       → Variante alerte dorée (info)
        .nd-alert-dark       → Variante alerte sombre (neutre)

 14.  FIL D'ARIANE
        .nd-breadcrumb       → Liste de navigation hiérarchique
        .current             → Élément actif (page courante) en or

 15.  FOOTER
        .nd-footer           → Pied de page fond sombre avec bordure
        .nd-footer-inner     → Grille interne 4 colonnes responsive
        .nd-footer-brand     → Nom / logo dans le footer en Cinzel or
        .nd-footer-col       → Colonne de liens avec titre h5
        .nd-footer-copy      → Mention copyright centrée en bas

 16.  UTILITAIRES
        .text-center         → Centrer le texte
        .text-gold           → Couleur or
        .text-muted          → Couleur grisée
        .mt-1  .mt-2  .mt-3  .mt-4   → Margin-top  0.5 / 1 / 1.5 / 2rem
        .mb-1  .mb-2  .mb-3  .mb-4   → Margin-bottom 0.5 / 1 / 1.5 / 2rem
        .flex                → display flex
        .flex-center         → Flex centré horizontalement et verticalement
        .flex-wrap           → Flex avec retour à la ligne automatique
        .gap-1  .gap-2  .gap-3       → Gap 0.5 / 1 / 1.5rem
──────────────────────────────────────────────────────────────────
*/


/* ════════════════════════════════════════════════════════════════
   1. TOKENS & RESET
   ──────────────────────────────────────────────────────────────
   Aucune classe à renseigner ici.
   Les variables sont utilisées automatiquement par tout le reste.
   ════════════════════════════════════════════════════════════════ */

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

:root {
  /* Couleurs principales */
  --clr-bg:           #0D1117;   /* fond global */
  --clr-bg-alt:       #111820;   /* fond sections alternées */
  --clr-bg-card:      #161C26;   /* fond des cartes */
  --clr-gold:         #D4AF37;   /* or principal */
  --clr-gold-light:   #E8CB6A;   /* or clair (hover) */
  --clr-gold-dark:    #A8891E;   /* or foncé (accents) */
  --clr-text:         #E8E0D0;   /* texte principal */
  --clr-text-muted:   #99825f;   /* texte secondaire */
  --clr-text-faint:   #4A4238;   /* texte très discret */
  --clr-border:       rgba(212, 175, 55, 0.431);   /* bordure subtile */
  --clr-border-strong:rgba(212,175,55,.45);   /* bordure marquée */

  /* Typographie */
  --ff-display: 'Cinzel', serif;             /* titres majeurs */
  --ff-serif:   'Cormorant Garamond', serif; /* citations, leads */
  --ff-sans:    'Raleway', sans-serif;       /* corps, UI */

  /* Échelle de taille */
  --fs-xs:   .7rem;
  --fs-sm:   .85rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.35rem;
  --fs-xl:   1.7rem;
  --fs-2xl:  2.2rem;
  --fs-3xl:  3rem;
  --fs-4xl:  4rem;
  --fs-5xl:  5.5rem;

  /* Rayons */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Ombres */
  --shadow-card: 0 4px 32px rgba(0,0,0,.55);
  --shadow-gold: 0 0 24px rgba(212,175,55,.18);

  /* Animations */
  --transition: 280ms cubic-bezier(.4,0,.2,1);

  /* Largeur max du contenu */
  --max-w: 1200px;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--clr-gold);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--clr-gold-light); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: var(--clr-gold-dark); border-radius: 3px; }

/* Sélection de texte */
::selection { background: rgba(212,175,55,.3); color: var(--clr-gold-light); }


/* ════════════════════════════════════════════════════════════════
   2. TYPOGRAPHIE
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     Surtitre doré    → <span class="nd-eyebrow">Patrimoine</span>
     Titre principal  → <h1>Titre</h1>
     Titre section    → <h2>Titre</h2>
     Titre carte      → <h3>Titre</h3>
     Sous-titre       → <h4>Sous-titre</h4>
     Corps texte      → <p>Texte</p>
     Intro mise avant → <p class="nd-lead">Texte</p>
     Citation courte  → <p class="nd-quote">Citation</p>
     Citation longue  → <blockquote class="nd-blockquote">
                          <p>Texte</p>
                          <cite>Auteur</cite>
                        </blockquote>
     Légende photo    → <p class="nd-caption">Légende</p>
     Étiquette        → <span class="nd-label">Architecture</span>
   ════════════════════════════════════════════════════════════════ */

/* Surtitre — texte doré en capitales espacées */
.nd-eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--clr-gold);
  display: block;
  margin-bottom: .75rem;
}

/* H1 — titre héroïque */
h1 {
  font-family: var(--ff-display);
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .04em;
  color: var(--clr-text);
  margin-bottom: 1rem;
}

/* H2 — titre de section centré avec ligne or */
h2 {
  font-family: var(--ff-display);
  font-size: clamp(var(--fs-xl), 3.5vw, var(--fs-3xl));
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--clr-text);
  text-align: center;
  position: relative;
  padding-bottom: 1.4rem;
  margin-bottom: 3rem;
}
h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-gold), transparent);
}

/* H3 — titre de carte ou sous-section */
h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--clr-text);
  line-height: 1.3;
  margin-bottom: .6rem;
}

/* H4 — sous-titre élégant en italic or */
h4 {
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  font-style: italic;
  color: var(--clr-gold);
  line-height: 1.4;
  margin-bottom: 1rem;
}

/* Paragraphe courant */
p {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.85;
  color: var(--clr-text-muted);
  margin-bottom: 1.2rem;
}

/* Lead — paragraphe d'introduction mis en valeur */
.nd-lead {
  font-family: var(--ff-serif);
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.6;
  color: var(--clr-text);
  font-style: italic;
  margin-bottom: 1.5rem;
}

/* Citation courte avec barre or à gauche */
.nd-quote {
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-style: italic;
  font-weight: 300;
  color: var(--clr-gold-light);
  border-left: 2px solid var(--clr-gold);
  padding: 1rem 0 1rem 2rem;
  margin: 2rem 0;
  line-height: 1.5;
}

/* Citation longue stylisée — avec guillemet décoratif */
.nd-blockquote {
  position: relative;
  padding: 2.5rem 3rem;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  margin: 2rem 0;
}
.nd-blockquote::before {
  content: '\201C';
  font-family: var(--ff-serif);
  font-size: 7rem;
  line-height: 1;
  color: var(--clr-gold-dark);
  position: absolute;
  top: -.5rem;
  left: 1.5rem;
  opacity: .4;
}
.nd-blockquote p {
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-style: italic;
  font-weight: 300;
  color: var(--clr-text);
  line-height: 1.5;
  margin: 0 0 1rem;
}
.nd-blockquote cite {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-gold);
}

/* Légende photo */
.nd-caption {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-text-faint);
  margin-top: .5rem;
}

/* Étiquette de catégorie */
.nd-label {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-gold);
}


/* ════════════════════════════════════════════════════════════════
   3. BOUTONS
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     Principal (or plein) → <a href="#" class="btn-primary">Texte</a>
     Secondaire (contour) → <a href="#" class="btn-secondary">Texte</a>
     Ghost (texte + ligne)→ <a href="#" class="btn-ghost">Texte →</a>
     Dark (fond sombre)   → <a href="#" class="btn-dark">Texte</a>

     Tailles (à combiner) → ajouter .btn-sm  ou  .btn-lg
     Exemples :
       <a class="btn-primary btn-lg">Grand bouton</a>
       <button class="btn-secondary btn-sm">Petit</button>
   ════════════════════════════════════════════════════════════════ */

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  padding: .85em 2.2em;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  min-width: 0;
  text-align: center;
  justify-content: center;
}

/* Or plein — action principale */
.btn-primary {
  background: var(--clr-gold);
  color: var(--clr-bg);
}
.btn-primary:hover {
  background: var(--clr-gold-light);
  color: var(--clr-bg);
  box-shadow: 0 0 28px rgba(212,175,55,.4);
  transform: translateY(-1px);
}

/* Contour or — action secondaire */
.btn-secondary {
  background: transparent;
  color: var(--clr-gold);
  border: 1.5px solid var(--clr-gold);
}
.btn-secondary:hover {
  background: rgba(212,175,55,.1);
  border-color: var(--clr-gold-light);
  color: var(--clr-gold-light);
  transform: translateY(-1px);
}

/* Ghost — lien discret avec soulignement animé */
.btn-ghost {
  background: transparent;
  color: var(--clr-gold);
  padding-left: 0;
  padding-right: 0;
}
.btn-ghost::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--clr-gold);
  width: 0;
  transition: width var(--transition);
  position: absolute;
  bottom: .4em;
  left: 0;
}
.btn-ghost:hover { color: var(--clr-gold-light); }
.btn-ghost:hover::after { width: 100%; }

/* Dark — fond sombre avec bordure subtile */
.btn-dark {
  background: var(--clr-bg-card);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
}
.btn-dark:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold);
  transform: translateY(-1px);
}

/* Petit bouton */
.btn-sm {
  font-size: var(--fs-xs);
  padding: .6em 1.5em;
}

/* Grand bouton */
.btn-lg {
  font-size: var(--fs-md);
  padding: 1em 3em;
  letter-spacing: .2em;
}


/* ════════════════════════════════════════════════════════════════
   4. LAYOUT & CONTENEURS
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     Wrapper centré    → <div class="nd-container"> … </div>
     Section standard  → <section class="nd-section"> … </section>
     Section sombre    → <section class="nd-section-dark"> … </section>
     Section or subtil → <section class="nd-section-gold"> … </section>
     Séparateur déco   → <div class="nd-divider">✦</div>

     Grilles :
       2 colonnes → <div class="nd-grid-2"> … </div>
       3 colonnes → <div class="nd-grid-3"> … </div>
       4 colonnes → <div class="nd-grid-4"> … </div>
       (responsive automatiquement sur mobile)
   ════════════════════════════════════════════════════════════════ */

/* Conteneur centré responsive */
.nd-container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  min-width: 0;
}

/* Section sur fond principal */
.nd-section {
  padding: clamp(4rem, 8vw, 8rem) 0;
}

/* Section sur fond légèrement plus clair */
.nd-section-dark {
  background: var(--clr-bg-alt);
  padding: clamp(4rem, 8vw, 8rem) 0;
}

/* Section avec touche or très subtile */
.nd-section-gold {
  background: linear-gradient(135deg, rgba(212,175,55,.05) 0%, rgba(212,175,55,.02) 100%);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  padding: clamp(4rem, 8vw, 8rem) 0;
}

/* Séparateur décoratif avec lignes dégradées */
.nd-divider {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2.5rem 0;
  color: var(--clr-text-faint);
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  letter-spacing: .3em;
}
.nd-divider::before,
.nd-divider::after {
  content: '';
  flex: 1;
  height: 1px;
}
.nd-divider::before {
  background: linear-gradient(90deg, transparent, var(--clr-gold-dark));
}
.nd-divider::after {
  background: linear-gradient(90deg, var(--clr-gold-dark), transparent);
}

/* Grilles */
.nd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.nd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.nd-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

@media (max-width: 900px) {
  .nd-grid-3,
  .nd-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .nd-grid-2,
  .nd-grid-3,
  .nd-grid-4 { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   5. NAVIGATION
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     <nav class="nd-nav">
       <span class="nd-nav-brand">Notre-Dame</span>
       <ul class="nd-nav-links">
         <li><a href="#" class="nd-nav-link active">Accueil</a></li>
         <li><a href="#" class="nd-nav-link">Histoire</a></li>
       </ul>
       <a href="#" class="btn-primary btn-sm">Faire un don</a>
     </nav>
   ════════════════════════════════════════════════════════════════ */

.nd-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem clamp(1.5rem, 5vw, 4rem);
  background: rgba(13,17,23,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--clr-border);
}

.nd-nav-brand {
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--clr-gold);
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nd-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 2vw, 2.5rem);
  list-style: none;
  min-width: 0;
}

.nd-nav-link {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  transition: color var(--transition);
  position: relative;
  padding-bottom: .25em;
  white-space: nowrap;
}
.nd-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--clr-gold);
  transition: width var(--transition);
}
.nd-nav-link:hover,
.nd-nav-link.active {
  color: var(--clr-gold);
}
.nd-nav-link:hover::after,
.nd-nav-link.active::after {
  width: 100%;
}


/* ════════════════════════════════════════════════════════════════
   6. HERO
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     <section class="nd-hero">
       <div class="nd-hero-bg"></div>        ← image de fond (via CSS background-image inline)
       <div class="nd-hero-overlay"></div>   ← dégradé sombre automatique
       <div class="nd-hero-content">
         <span class="nd-eyebrow">Surtitre</span>
         <h1 class="nd-hero-title">Grand Titre</h1>
         <p class="nd-hero-subtitle">Accroche élégante</p>
         <div class="nd-hero-actions">
           <a href="#" class="btn-primary btn-lg">CTA</a>
           <a href="#" class="btn-secondary btn-lg">Secondaire</a>
         </div>
       </div>
       <div class="nd-hero-scroll">Défiler</div>
     </section>

     Pour l'image de fond, ajouter dans le HTML :
     <div class="nd-hero-bg"
          style="background-image:url('photo.jpg')"></div>
   ════════════════════════════════════════════════════════════════ */

.nd-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: 5.5rem;
}

.nd-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  filter: brightness(.45);
}

.nd-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,17,23,.3) 0%,
    rgba(13,17,23,.1) 40%,
    rgba(13,17,23,.8) 100%
  );
}

.nd-hero-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
  width: min(100%, 860px);
  padding: 0 clamp(1.25rem, 5vw, 2rem);
  animation: heroReveal .9s ease both;
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nd-hero-title {
  font-family: var(--ff-display);
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .04em;
  color: var(--clr-text);
  text-shadow: 0 4px 40px rgba(0,0,0,.6);
  margin-bottom: 1.5rem;
}

.nd-hero-subtitle {
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-style: italic;
  font-weight: 300;
  color: rgba(232,224,208,.8);
  margin-bottom: 2.5rem;
}

.nd-hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}

/* Indicateur de défilement animé */
.nd-hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--clr-text-faint);
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  animation: scrollBounce 2s ease infinite;
}
.nd-hero-scroll::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--clr-gold), transparent);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}


/* ════════════════════════════════════════════════════════════════
   7. CARTES
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     Carte verticale (standard) :
       <div class="nd-card">
         <img src="photo.jpg" alt="…" class="nd-card-image">
         <div class="nd-card-body">
           <span class="nd-eyebrow">Catégorie</span>
           <h3>Titre de la carte</h3>
           <p>Description…</p>
           <a href="#" class="btn-ghost">Lire →</a>
         </div>
       </div>

     Carte horizontale (image à gauche) :
       <div class="nd-card nd-card-horizontal">
         <img src="photo.jpg" alt="…" class="nd-card-image">
         <div class="nd-card-body"> … </div>
       </div>
   ════════════════════════════════════════════════════════════════ */

.nd-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition);
  position: relative;
  min-width: 0;
}
.nd-card:hover {
  border-color: var(--clr-border-strong);
  box-shadow: var(--shadow-card), var(--shadow-gold);
  transform: translateY(-4px);
}
/* Ligne or en haut de carte au survol */
.nd-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-gold), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.nd-card:hover::before { opacity: 1; }

.nd-card-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  filter: brightness(.9) saturate(.85);
  transition: filter var(--transition);
}
.nd-card:hover .nd-card-image {
  filter: brightness(1) saturate(1);
}

.nd-card-body {
  padding: 1.8rem;
  min-width: 0;
}
.nd-card-body h3 { margin-bottom: .5rem; }
.nd-card-body p  { margin-bottom: 1.2rem; }

/* Carte horizontale — image à gauche */
.nd-card-horizontal {
  display: grid;
  grid-template-columns: 280px 1fr;
}
.nd-card-horizontal .nd-card-image { height: 100%; }

@media (max-width: 700px) {
  .nd-card-horizontal { grid-template-columns: 1fr; }
  .nd-card-horizontal .nd-card-image { height: 200px; }
}

@media (max-width: 1100px) {
  .nd-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .85rem;
    padding-top: .9rem;
    padding-bottom: .85rem;
  }

  .nd-nav-links {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .15rem .1rem .35rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  }

  .nd-nav-links::-webkit-scrollbar {
    display: none;
  }

  .nd-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: .45rem 0;
  }

  .nd-hero {
    padding-top: 8.5rem;
  }
}

@media (max-width: 760px) {
  :root {
    --fs-5xl: 4.2rem;
    --fs-4xl: 3.2rem;
    --fs-3xl: 2.45rem;
    --fs-2xl: 1.85rem;
    --fs-xl: 1.35rem;
  }

  .nd-container {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .nd-section,
  .nd-section-dark,
  .nd-section-gold {
    padding: 3.5rem 0;
  }

  .nd-nav {
    gap: .8rem;
    padding: .75rem 1rem .65rem;
  }

  .nd-nav-brand {
    font-size: .95rem;
    letter-spacing: .06em;
    max-width: 100%;
  }

  .nd-nav-brand::before {
    content: 'Notre-Dame';
  }

  .nd-nav-brand {
    font-size: 0;
  }

  .nd-nav-brand::before {
    font-size: .95rem;
  }

  .nd-nav > .btn-primary {
    padding: .55em 1.05em;
    letter-spacing: .12em;
  }

  .nd-nav-links {
    gap: .95rem;
  }

  .nd-nav-link {
    font-size: .66rem;
    letter-spacing: .13em;
  }

  .nd-hero {
    min-height: 100svh;
    padding-top: 7.5rem;
    padding-bottom: 5rem;
  }

  .nd-hero-title {
    font-size: clamp(2.5rem, 14vw, 4.2rem);
    letter-spacing: .025em;
    margin-bottom: 1rem;
  }

  .nd-hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 1.75rem;
  }

  .nd-hero-actions {
    align-items: stretch;
  }

  .nd-hero-actions .btn-primary,
  .nd-hero-actions .btn-secondary,
  .nd-hero-actions .btn-dark {
    width: min(100%, 22rem);
  }

  .btn-lg {
    font-size: .95rem;
    padding: .9em 1.45em;
    letter-spacing: .14em;
  }

  .nd-card-body {
    padding: 1.35rem;
  }

  .nd-card-image {
    height: 210px;
  }

  .nd-stat {
    padding: 1.25rem .75rem;
  }

  .nd-footer-copy {
    letter-spacing: .04em;
  }
}

@media (max-width: 430px) {
  .nd-nav {
    padding-left: .85rem;
    padding-right: .85rem;
  }

  .nd-nav-brand::before {
    font-size: .86rem;
  }

  .nd-nav > .btn-primary {
    font-size: .62rem;
    padding: .5em .8em;
  }

  .nd-nav-links {
    gap: .75rem;
  }

  .nd-nav > .btn-primary {
    width: auto;
  }

  .nd-nav-link {
    font-size: .62rem;
    letter-spacing: .1em;
  }

  .nd-hero-title {
    font-size: clamp(2.25rem, 15vw, 3.6rem);
  }

  .nd-hero-scroll {
    bottom: 1.4rem;
  }

  .btn-primary,
  .btn-secondary,
  .btn-dark {
    width: 100%;
  }

  .btn-ghost {
    width: auto;
  }

  .nd-card-body div[style*="display:flex"],
  #contact form > div[style*="display:flex"] {
    flex-direction: column;
  }
}


/* ════════════════════════════════════════════════════════════════
   8. BADGES & TAGS
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     Pastille pleine  → <span class="nd-badge">Patrimoine</span>
     Pastille contour → <span class="nd-badge nd-badge-outline">UNESCO</span>
     Pastille discrète→ <span class="nd-badge nd-badge-muted">Architecture</span>

     Tag cliquable    → <a href="#" class="nd-tag">Gothique</a>
   ════════════════════════════════════════════════════════════════ */

.nd-badge {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .3em .85em;
  border-radius: 2px;
  background: var(--clr-gold);
  color: var(--clr-bg);
}
.nd-badge-outline {
  background: transparent;
  border: 1px solid var(--clr-gold);
  color: var(--clr-gold);
}
.nd-badge-muted {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
}

.nd-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--clr-text-muted);
  border: 1px solid var(--clr-border);
  border-radius: 40px;
  padding: .25em .9em;
  transition: all var(--transition);
}
.nd-tag:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold);
}


/* ════════════════════════════════════════════════════════════════
   9. STATISTIQUES
   ──────────────────────────────────────────────────────────────
   USAGE HTML (à placer dans .nd-grid-4 par exemple) :
     <div class="nd-stat">
       <span class="nd-stat-number">1163</span>
       <span class="nd-stat-label">Année de fondation</span>
     </div>
   ════════════════════════════════════════════════════════════════ */

.nd-stat {
  text-align: center;
  padding: 2rem 1rem;
}

.nd-stat-number {
  font-family: var(--ff-display);
  font-size: var(--fs-4xl);
  font-weight: 900;
  color: var(--clr-gold);
  line-height: 1;
  display: block;
  margin-bottom: .4rem;
}

.nd-stat-label {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}


/* ════════════════════════════════════════════════════════════════
   10. IMAGES
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     Image pleine largeur → <img src="…" alt="…" class="nd-img-full">
     Image avec cadre or  → <div class="nd-img-frame">
                               <img src="…" alt="…">
                             </div>
   ════════════════════════════════════════════════════════════════ */

/* Image panoramique pleine largeur avec teinte discrète */
.nd-img-full {
  width: 100%;
  height: clamp(300px, 45vw, 600px);
  object-fit: cover;
  filter: brightness(.85) saturate(.85);
}

/* Image encadrée avec bordure or décalée */
.nd-img-frame {
  position: relative;
  display: inline-block;
}
.nd-img-frame img {
  display: block;
  position: relative;
  z-index: 1;
}
.nd-img-frame::before {
  content: '';
  position: absolute;
  inset: -12px -12px 12px 12px;
  border: 1px solid var(--clr-border-strong);
  z-index: 0;
}


/* ════════════════════════════════════════════════════════════════
   11. TIMELINE
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     <div class="nd-timeline">
       <div class="nd-timeline-item">
         <div class="nd-timeline-year">1163</div>
         <h3>Pose de la première pierre</h3>
         <p>Description de l'événement.</p>
       </div>
       <div class="nd-timeline-item"> … </div>
     </div>
   ════════════════════════════════════════════════════════════════ */

.nd-timeline {
  position: relative;
  padding-left: 3rem;
}
/* Ligne verticale dégradée */
.nd-timeline::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 8px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--clr-gold)       0%,
    var(--clr-gold)       60%,
    transparent           100%
  );
}

.nd-timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
}
/* Point doré sur la ligne */
.nd-timeline-item::before {
  content: '';
  position: absolute;
  left: -3rem;
  top: .35rem;
  width: 10px;
  height: 10px;
  border: 2px solid var(--clr-gold);
  background: var(--clr-bg);
  border-radius: 50%;
  transform: translateX(3px);
}

.nd-timeline-year {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-gold);
  letter-spacing: .1em;
  margin-bottom: .25rem;
}


/* ════════════════════════════════════════════════════════════════
   12. ACCORDÉON
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     <div class="nd-accordion">
       <div class="nd-accordion-item">
         <button class="nd-accordion-trigger"
           onclick="this.closest('.nd-accordion-item').classList.toggle('open')">
           Question ?
           <span class="icon">+</span>
         </button>
         <div class="nd-accordion-body">Réponse…</div>
       </div>
     </div>

     Pour ouvrir par défaut, ajouter "open" sur .nd-accordion-item :
     <div class="nd-accordion-item open">
   ════════════════════════════════════════════════════════════════ */

.nd-accordion {
  border-top: 1px solid var(--clr-border);
}

.nd-accordion-item {
  border-bottom: 1px solid var(--clr-border);
}

.nd-accordion-trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem 0;
  text-align: left;
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--clr-text);
  transition: color var(--transition);
}
.nd-accordion-trigger:hover { color: var(--clr-gold); }

.nd-accordion-trigger .icon {
  font-size: 1.2rem;
  color: var(--clr-gold);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.nd-accordion-item.open .nd-accordion-trigger .icon {
  transform: rotate(45deg);
}

.nd-accordion-body {
  display: none;
  padding: 0 0 1.5rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  line-height: 1.8;
}
.nd-accordion-item.open .nd-accordion-body {
  display: block;
}


/* ════════════════════════════════════════════════════════════════
   13. FORMULAIRE
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     <div class="nd-form-group">
       <label for="nom">Nom</label>
       <input type="text" id="nom" class="nd-input" placeholder="…">
     </div>

     Textarea :
     <div class="nd-form-group">
       <label for="msg">Message</label>
       <textarea id="msg" class="nd-input" placeholder="…"></textarea>
     </div>

     Alertes :
     <div class="nd-alert nd-alert-info">Message informatif</div>
     <div class="nd-alert nd-alert-dark">Message neutre</div>
   ════════════════════════════════════════════════════════════════ */

.nd-form-group {
  margin-bottom: 1.5rem;
}
.nd-form-group label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: .5rem;
}

.nd-input {
  width: 100%;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: .8em 1.1em;
  color: var(--clr-text);
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.nd-input::placeholder { color: var(--clr-text-faint); }
.nd-input:focus {
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}
textarea.nd-input {
  resize: vertical;
  min-height: 120px;
}

/* Messages d'alerte */
.nd-alert {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: var(--fs-sm);
  font-family: var(--ff-sans);
  margin: 1rem 0;
}
.nd-alert-info {
  background: rgba(212,175,55,.08);
  border-color: rgba(212,175,55,.3);
  color: var(--clr-gold-light);
}
.nd-alert-dark {
  background: var(--clr-bg-card);
  border-color: var(--clr-border);
  color: var(--clr-text-muted);
}


/* ════════════════════════════════════════════════════════════════
   14. FIL D'ARIANE
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     <ul class="nd-breadcrumb">
       <li><a href="#">Accueil</a></li>
       <li><a href="#">Histoire</a></li>
       <li class="current">L'incendie de 2019</li>
     </ul>
   ════════════════════════════════════════════════════════════════ */

.nd-breadcrumb {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-text-faint);
  list-style: none;
}
.nd-breadcrumb li + li::before {
  content: '›';
  color: var(--clr-gold-dark);
}
.nd-breadcrumb a { color: var(--clr-text-faint); }
.nd-breadcrumb a:hover { color: var(--clr-gold); }
.nd-breadcrumb .current { color: var(--clr-gold); }


/* ════════════════════════════════════════════════════════════════
   15. FOOTER
   ──────────────────────────────────────────────────────────────
   USAGE HTML :
     <footer class="nd-footer">
       <div class="nd-container">
         <div class="nd-footer-inner">
           <div>
             <div class="nd-footer-brand">Notre-Dame</div>
             <p>Description courte…</p>
           </div>
           <div class="nd-footer-col">
             <h5>Rubrique</h5>
             <ul>
               <li><a href="#">Lien</a></li>
             </ul>
           </div>
         </div>
         <p class="nd-footer-copy">© 2024 Notre-Dame de Paris</p>
       </div>
     </footer>
   ════════════════════════════════════════════════════════════════ */

.nd-footer {
  background: var(--clr-bg-alt);
  border-top: 1px solid var(--clr-border);
  padding: 4rem 0 2rem;
}

.nd-footer-inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 2rem;
}

.nd-footer-brand {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--clr-gold);
  letter-spacing: .06em;
  margin-bottom: 1rem;
}

.nd-footer-col h5 {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 1rem;
}
.nd-footer-col ul { list-style: none; }
.nd-footer-col li { margin-bottom: .6rem; }
.nd-footer-col a {
  font-size: var(--fs-sm);
  font-weight: 300;
  color: var(--clr-text-faint);
  transition: color var(--transition);
}
.nd-footer-col a:hover { color: var(--clr-gold); }

.nd-footer-copy {
  font-size: var(--fs-xs);
  color: var(--clr-text-faint);
  text-align: center;
  letter-spacing: .1em;
}

@media (max-width: 900px) {
  .nd-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .nd-footer-inner { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   16. UTILITAIRES
   ──────────────────────────────────────────────────────────────
   USAGE HTML (combinables avec n'importe quelle autre classe) :
     .text-center   → centrer le texte
     .text-gold     → couleur or
     .text-muted    → couleur grisée
     .mt-1 … .mt-4  → margin-top (0.5rem → 2rem)
     .mb-1 … .mb-4  → margin-bottom (0.5rem → 2rem)
     .flex          → display flex
     .flex-center   → flex centré horizontalement et verticalement
     .flex-wrap     → flex avec retour à la ligne
     .gap-1…3       → gap entre éléments flex/grid
   ════════════════════════════════════════════════════════════════ */

.text-center  { text-align: center; }
.text-gold    { color: var(--clr-gold); }
.text-muted   { color: var(--clr-text-muted); }

.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap   { flex-wrap: wrap; }

.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }


/* ════════════════════════════════════════════════════════════════
   17. RESPONSIVE FINAL
   ──────────────────────────────────────────────────────────────
   Ajustements de fin pour empêcher les débordements sur petits écrans.
   ════════════════════════════════════════════════════════════════ */

p,
h1,
h2,
h3,
h4,
.nd-nav-link,
.nd-footer-copy {
  overflow-wrap: anywhere;
}

iframe {
  max-width: 100%;
  border: 0;
}

@media (max-width: 760px) {
  h2 {
    font-size: clamp(1.7rem, 9vw, 2.4rem);
    margin-bottom: 2rem;
  }

  h3 {
    font-size: clamp(1.25rem, 6vw, 1.65rem);
  }

  .nd-stat {
    padding: 1.25rem .75rem;
  }

  .nd-stat-number {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .nd-footer {
    padding: 3rem 0 2rem;
  }

  .nd-footer-inner {
    gap: 2rem;
  }

  .nd-footer-copy {
    line-height: 1.6;
    letter-spacing: .04em;
  }

  .nd-accordion-trigger {
    gap: 1rem;
    align-items: flex-start;
    font-size: .88rem;
    letter-spacing: .05em;
  }

  .nd-input {
    font-size: 1rem;
  }
}

@media (max-width: 430px) {
  .nd-container {
    padding-left: .95rem;
    padding-right: .95rem;
  }

  .nd-divider {
    gap: .8rem;
    margin: 2rem 0;
  }

  .nd-card-body {
    padding: 1.15rem;
  }

  .nd-card-image,
  .nd-card-horizontal .nd-card-image {
    height: 185px;
  }

  .nd-form-group {
    margin-bottom: 1.15rem;
  }
}