/* =========================================================
   ROYAL DREADS ACADEMY - STYLE PRINCIPAL

   GUIDE DE LECTURE POUR DÉBUTANT
   ---------------------------------------------------------
   Organisation du fichier :

   1. VARIABLES
   2. BASE
   3. HEADER / NAVIGATION
   4. HERO
   5. CHIFFRES CLÉS
   6. CARTES FORMATIONS
   7. PROGRAMME / MÉTHODE
   8. OBJECTIFS
   9. GALERIE
   10. POURQUOI NOUS CHOISIR
   11. CTA FINAL
   12. FOOTER
   13. RESPONSIVE

   Les commentaires expliquent le rôle des principales règles CSS.
   Les valeurs de design restent celles utilisées par la refonte.

   PROPRIÉTÉS À CONNAÎTRE :
   - margin       : espace extérieur d'un élément.
   - padding      : espace intérieur d'un élément.
   - width        : largeur.
   - max-width    : largeur maximale.
   - min-height   : hauteur minimale.
   - display      : système de disposition d'un élément.
   - flex         : disposition flexible en ligne ou colonne.
   - grid         : disposition en lignes et colonnes.
   - gap          : espace entre les éléments d'un flex ou d'un grid.
   - position     : méthode de positionnement d'un élément.
   - z-index      : ordre de superposition des éléments positionnés.
   - background   : arrière-plan, couleur, image ou dégradé.
   - color        : couleur du texte.
   - font-family  : police utilisée.
   - font-size    : taille du texte.
   - line-height  : hauteur entre les lignes.
   - border       : bordure.
   - border-radius: arrondi des coins.
   - box-shadow   : ombre.
   - object-fit   : manière dont une image remplit son cadre.
   - transition   : animation progressive d'un changement.
   - transform    : modification visuelle comme un déplacement ou un zoom.
   ========================================================= */

/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {
    /* Couleur dorée principale de l'identité visuelle. */
    --gold: #b38646;

    /* Variante foncée du doré. */
    --gold-dark: #966f37;

    /* Noir principal. */
    --black: #121212;

    /* Noir légèrement plus clair. */
    --black-soft: #1b1b1b;

    /* Blanc principal. */
    --white: #ffffff;

    /* Fond crème de certaines sections. */
    --cream: #f7f5f1;

    /* Couleur principale du texte. */
    --text: #292929;

    /* Couleur des textes secondaires. */
    --muted: #6b6b6b;

    /* Couleur des bordures légères. */
    --border: #e7e2da;

    /* Ombre réutilisable. */
    --shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

    /* Largeur maximale du contenu. */
    --max-width: 1180px;
}

/* =========================================================
   2. BASE
   ========================================================= */

/*
   Tous les éléments utilisent border-box.
   La largeur inclut alors le padding et la bordure.
*/
* {
    box-sizing: border-box;
}

/* Défilement doux lorsque la page utilise une ancre #. */
html {
    scroll-behavior: smooth;
}

/* Styles généraux de la page. */
body {
    /* Supprime la marge par défaut du navigateur. */
    margin: 0;

    /* Supprime le padding par défaut. */
    padding: 0;

    /* Police principale et police de secours. */
    font-family: "Inter", Arial, sans-serif;

    /* Couleur générale du texte. */
    color: var(--text);

    /* Couleur de fond générale. */
    background: var(--white);

    /* Espace vertical entre les lignes. */
    line-height: 1.6;
}

/* Règles générales des images. */
img {
    /* Empêche l'image de dépasser son parent. */
    max-width: 100%;

    /* Supprime certains espaces sous les images. */
    display: block;
}

/* Règles générales des liens. */
a {
    /* Utilise la couleur héritée. */
    color: inherit;

    /* Supprime le soulignement par défaut. */
    text-decoration: none;
}

/* Supprime la surbrillance tactile sur certains appareils. */
button,
a {
    -webkit-tap-highlight-color: transparent;
}

/*
   Cadre horizontal commun au site.
   min() choisit la plus petite valeur entre la largeur disponible
   et la largeur maximale définie dans --max-width.
*/
.container {
    width: min(100% - 40px, var(--max-width));
    margin: 0 auto;
}

/* Espacement vertical standard des grandes sections. */
.section {
    padding: 100px 0;
}

/* Zone qui contient les titres de section. */
.section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

/* Titres principaux des sections. */
.section-heading h2,
.split-section h2,
.cta-content h2 {
    margin: 8px 0 18px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.15;
    color: var(--black);
}

/* Texte secondaire des sections claires. */
.section-heading p,
.split-section > div > p {
    color: var(--muted);
}

/* Version claire des titres placés sur fond sombre. */
.section-heading.light h2,
.section-heading.light p {
    color: var(--white);
}

/* Petit texte placé au-dessus des grands titres. */
.eyebrow {
    margin: 0;
    color: #e2c18e;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

/* Variante foncée pour les fonds clairs. */
.eyebrow.dark {
    color: var(--gold-dark);
}

/* =========================================================
   3. HEADER / NAVIGATION
   ========================================================= */

/* Header fixé en haut de la fenêtre. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(18, 18, 18, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Organisation horizontale de la barre de navigation. */
.navbar {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 28px;
}

/* Logo et nom de l'académie. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Dimensions de l'image du logo. */
.brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

/* Zone contenant les liens de navigation. */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-left: auto;
}

/* Apparence des liens du menu. */
.nav-links a {
    color: #eeeeee;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.25s ease;
}

/* Couleur du lien au survol. */
.nav-links a:hover {
    color: #d9b77e;
}

/* Bouton d'inscription du menu. */
.nav-cta {
    padding: 11px 18px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 700;
    transition: background 0.25s ease, color 0.25s ease;
}

/* État du bouton au survol. */
.nav-cta:hover {
    background: var(--gold);
    color: var(--black);
}

/* =========================================================
   4. HERO
   ========================================================= */

/* Grande section d'accueil avec image et dégradé. */
.hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.48)),
        url("../image-locs.png") center / cover no-repeat;
}

/* Couche sombre placée au-dessus de l'image. */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.32));
}

/* Contenu du hero placé au-dessus de l'overlay. */
.hero-content {
    position: relative;
    z-index: 1;
    padding-top: 76px;
}

/* Grand titre de la page d'accueil. */
.hero h1 {
    max-width: 820px;
    margin: 16px 0 24px;
    color: var(--white);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(3rem, 7vw, 6.2rem);
    line-height: 0.98;
}

/* Partie mise en évidence dans le titre. */
.hero h1 span {
    color: #d8b477;
}

/* Texte descriptif du hero. */
.hero-text {
    max-width: 650px;
    margin: 0 0 34px;
    color: #eeeeee;
    font-size: clamp(1rem, 2vw, 1.2rem);
}

/* Groupe des boutons du hero. */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Style de base des boutons. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

/* Petit mouvement au survol. */
.button:hover {
    transform: translateY(-2px);
}

/* Bouton doré. */
.button-gold {
    background: var(--gold);
    color: var(--white);
}

.button-gold:hover {
    background: var(--gold-dark);
}

/* Bouton transparent avec bordure. */
.button-outline {
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: var(--white);
}

.button-outline:hover {
    background: var(--white);
    color: var(--black);
}

/* Bouton sombre. */
.button-dark {
    background: var(--black);
    color: var(--white);
}

.button-dark:hover {
    background: var(--gold-dark);
}

/* =========================================================
   5. CHIFFRES CLÉS
   ========================================================= */

/* Fait remonter la zone de statistiques vers le hero. */
.trust-section {
    position: relative;
    margin-top: -50px;
    z-index: 2;
}

/* Grille de quatre statistiques. */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--white);
    box-shadow: var(--shadow);
    border-radius: 18px;
    overflow: hidden;
}

/* Une statistique. */
.stat-card {
    padding: 28px 20px;
    text-align: center;
    border-right: 1px solid var(--border);
}

/* La dernière carte n'a pas de bordure à droite. */
.stat-card:last-child {
    border-right: 0;
}

/* Nombre principal. */
.stat-card strong {
    display: block;
    color: var(--black);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2rem;
}

/* Texte secondaire. */
.stat-card span {
    color: var(--muted);
    font-size: 0.82rem;
}

/* =========================================================
   6. CARTES FORMATIONS
   ========================================================= */

/* Grille générique. */
.cards-grid {
    display: grid;
    gap: 28px;
}

/* Grille à deux colonnes. */
.two-columns {
    grid-template-columns: repeat(2, 1fr);
}

/* Grille à trois colonnes. */
.three-columns {
    grid-template-columns: repeat(3, 1fr);
}

/* Carte principale d'une formation. */
.course-card {
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

/* Cadre de l'image. */
.card-image {
    height: 300px;
    overflow: hidden;
}

/* Image qui remplit son cadre sans déformation. */
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Zoom léger au survol de la carte. */
.course-card:hover .card-image img {
    transform: scale(1.04);
}

/* Espace intérieur du contenu. */
.card-body {
    padding: 32px;
}

/* Petit label et numéro de carte. */
.card-label,
.card-number {
    color: var(--gold-dark);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

/* Titres des cartes. */
.card-body h3,
.simple-card h3,
.process-card h3 {
    margin: 8px 0 12px;
    color: var(--black);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.65rem;
}

/* Texte descriptif d'une carte de formation. */
.card-body > p:not(.card-label) {
    color: var(--muted);
}

/* Liste des techniques. */
.check-list {
    margin: 22px 0;
    padding: 0;
    list-style: none;
}

/* Chaque ligne de la liste. */
.check-list li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 22px;
    color: #4d4d4d;
    font-size: 0.92rem;
}

/* Coche créée avec un pseudo-élément CSS. */
.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--gold-dark);
    font-weight: 800;
}

/* Lien textuel. */
.text-link {
    color: var(--gold-dark);
    font-weight: 800;
}

.text-link:hover {
    text-decoration: underline;
}

/* =========================================================
   7. PROGRAMME / MÉTHODE
   ========================================================= */

/* Fond noir de la section. */
.section-dark {
    background: var(--black);
}

/* Quatre étapes sur grand écran. */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* Carte d'une étape. */
.process-card {
    min-height: 230px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

/* Numéro de l'étape. */
.process-card span {
    color: #d8b477;
    font-size: 0.8rem;
    font-weight: 800;
}

/* Titre d'une carte sombre. */
.process-card h3 {
    color: var(--white);
}

/* Texte d'une carte sombre. */
.process-card p {
    color: #bdbdbd;
    font-size: 0.92rem;
}

/* =========================================================
   8. OBJECTIFS
   ========================================================= */

/* Deux colonnes : texte à gauche, liste à droite. */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Ligne supérieure de la liste. */
.feature-list {
    border-top: 1px solid var(--border);
}

/* Une ligne de compétence. */
.feature-list div {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}

/* Numéro de compétence. */
.feature-list strong {
    color: var(--gold-dark);
}

/* Texte de compétence. */
.feature-list span {
    color: #4e4e4e;
}

/* =========================================================
   9. GALERIE
   ========================================================= */

/* Fond crème de l'aperçu galerie. */
.gallery-preview {
    background: var(--cream);
}

/* Grille asymétrique de la galerie. */
.gallery-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 240px 240px;
    gap: 14px;
}

/* Images de la galerie. */
.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Première image sur deux lignes. */
.gallery-grid img:first-child {
    grid-row: span 2;
}

/* Zone centrant le bouton de la galerie. */
.center-action {
    margin-top: 32px;
    text-align: center;
}

/* =========================================================
   10. POURQUOI NOUS CHOISIR
   ========================================================= */

/* Carte générique sans image. */
.simple-card {
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--white);
}

/* Texte secondaire de la carte. */
.simple-card p {
    margin-bottom: 0;
    color: var(--muted);
}

/* =========================================================
   11. CTA FINAL
   ========================================================= */

/* Fond de la section d'appel à l'action. */
.cta-section {
    background: var(--black-soft);
}

/* Largeur et alignement du contenu. */
.cta-content {
    max-width: 850px;
    text-align: center;
}

/* Titre blanc du CTA. */
.cta-content h2 {
    color: var(--white);
}

/* Texte du CTA. */
.cta-content > p:not(.eyebrow) {
    max-width: 650px;
    margin: 0 auto 28px;
    color: #bdbdbd;
}

/* =========================================================
   12. FOOTER
   ========================================================= */

/* Fond du pied de page. */
.site-footer {
    padding: 70px 0 20px;
    background: #0c0c0c;
    color: #ffffff;
}

/* Trois zones principales du footer. */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
}

/* Marge sous le logo du footer. */
.footer-brand {
    margin-bottom: 18px;
}

/* Description de l'académie dans le footer. */
.footer-grid > div > p {
    max-width: 430px;
    color: #888;
}

/* Titres des colonnes du footer. */
.footer-grid h3 {
    margin-top: 0;
    color: var(--white);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
}

/* Liens du footer. */
.footer-grid > div > a:not(.brand) {
    display: block;
    margin-bottom: 9px;
    color: #a5a5a5;
    font-size: 0.9rem;
}

/* Couleur des liens au survol. */
.footer-grid > div > a:not(.brand):hover {
    color: #d8b477;
}

/* Zone du copyright. */
.footer-bottom {
    margin-top: 55px;
    padding-top: 20px;
    border-top: 1px solid #252525;
    color: #666;
    font-size: 0.8rem;
}

/* =========================================================
   13. RESPONSIVE
   ========================================================= */

/*
   TABLETTE / ÉCRAN MOYEN
   À partir de 900px et moins, on réduit certains espacements
   et on passe certaines grilles à deux colonnes.
*/
@media (max-width: 900px) {

    /* Réduit l'espace entre les liens de navigation. */
    .nav-links {
        gap: 14px;
    }

    /* Réduit légèrement le texte de navigation. */
    .nav-links a {
        font-size: 0.8rem;
    }

    /* Les grilles de quatre/trois éléments passent à deux colonnes. */
    .process-grid,
    .three-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    /* La section en deux colonnes devient verticale. */
    .split-section {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}

/*
   MOBILE
   À partir de 700px et moins, les éléments sont davantage empilés
   pour conserver une lecture confortable sur téléphone.
*/
@media (max-width: 700px) {

    /* Réduit les marges horizontales du conteneur. */
    .container {
        width: min(100% - 28px, var(--max-width));
    }

    /* Réduit l'espace vertical des sections. */
    .section {
        padding: 72px 0;
    }

    /* Sur mobile, le header suit le défilement plutôt que de rester fixe. */
    .site-header {
        position: sticky;
    }

    /* Permet à la navigation de passer sur plusieurs lignes. */
    .navbar {
        min-height: auto;
        padding: 12px 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Centre le nom et le logo. */
    .brand {
        width: 100%;
        justify-content: center;
    }

    /* Place le menu sur une nouvelle ligne et permet son défilement horizontal. */
    .nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 18px;
        margin-left: 0;
        padding-bottom: 4px;
    }

    /* Empêche les liens de se casser sur plusieurs lignes. */
    .nav-links a {
        flex: 0 0 auto;
        font-size: 0.78rem;
    }

    /* Le bouton d'inscription passe sous le nom. */
    .nav-cta {
        margin-top: 4px;
    }

    /* Réduit la hauteur minimale du hero. */
    .hero {
        min-height: 680px;
    }

    /* Réduit le titre du hero sur petit écran. */
    .hero h1 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }

    /* Les statistiques passent à deux colonnes. */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Supprime certaines bordures qui ne sont plus adaptées à la grille mobile. */
    .stat-card:nth-child(2) {
        border-right: 0;
    }

    .stat-card:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
    }

    /* Les cartes de formation passent l'une sous l'autre. */
    .two-columns {
        grid-template-columns: 1fr;
    }

    /* Les cartes de processus passent à une colonne. */
    .process-grid,
    .three-columns {
        grid-template-columns: 1fr;
    }

    /* Réduit l'image des cartes sur mobile. */
    .card-image {
        height: 240px;
    }

    /* Réduit l'espace intérieur des cartes. */
    .card-body,
    .simple-card,
    .process-card {
        padding: 24px;
    }

    /* La galerie devient une seule colonne. */
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    /* La première image ne prend plus deux lignes. */
    .gallery-grid img:first-child {
        grid-row: auto;
    }

    /* Le footer devient vertical. */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Centre les éléments du footer. */
    .footer-grid > div {
        text-align: center;
    }

    .footer-brand {
        justify-content: center;
    }

    .footer-grid > div > p {
        margin-left: auto;
        margin-right: auto;
    }
}