/* =========================================================
   BOUTONS WHATSAPP — ROYAL DREADS ACADEMY
   ---------------------------------------------------------
   Ce fichier contient le style des boutons WhatsApp ainsi que
   les ajustements responsive nécessaires au site.

   L'objectif est de conserver le design premium sur ordinateur
   tout en garantissant une navigation confortable sur mobile.
   ========================================================= */

/* =========================================================
   1. BOUTONS WHATSAPP
   ========================================================= */

/*
   On cible uniquement les boutons de navigation et les boutons
   principaux dont le lien contient "wa.me".
*/
.nav-cta[href*="wa.me"],
.button[href*="wa.me"] {
    /* Vert principal de l'identité WhatsApp. */
    background-color: #25D366;

    /* Texte blanc pour un contraste clair. */
    color: #ffffff;

    /* Bordure assortie au fond. */
    border-color: #25D366;

    /* Ombre légère pour donner de la profondeur. */
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.22);

    /* Animation fluide lors des interactions. */
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/* État du bouton lorsque l'utilisateur passe la souris dessus. */
.nav-cta[href*="wa.me"]:hover,
.button[href*="wa.me"]:hover {
    background-color: #1ebe5d;
    border-color: #1ebe5d;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.30);
}

/* Accessibilité : contour visible lors de la navigation au clavier. */
.nav-cta[href*="wa.me"]:focus-visible,
.button[href*="wa.me"]:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.35);
    outline-offset: 4px;
}

/* =========================================================
   2. TABLETTES
   ========================================================= */

@media (max-width: 1024px) {
    /* Réduit légèrement les espaces horizontaux de la navigation. */
    .navbar {
        gap: 18px;
    }

    .nav-links {
        gap: 16px;
    }

    /* Deux colonnes restent confortables sur tablette. */
    .two-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Trois cartes deviennent deux colonnes pour éviter les cartes trop étroites. */
    .three-columns {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .stat-card:nth-child(2) {
        border-right: 0;
    }

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

/* =========================================================
   3. MOBILE
   ========================================================= */

@media (max-width: 768px) {
    /*
       Le header occupe naturellement deux lignes :
       première ligne = logo + bouton WhatsApp,
       deuxième ligne = navigation défilable horizontalement.
    */
    .site-header {
        position: fixed;
    }

    .navbar {
        min-height: auto;
        padding-top: 12px;
        padding-bottom: 10px;
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    /* Le logo garde suffisamment d'espace pour rester lisible. */
    .brand {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.78rem;
    }

    .brand img {
        width: 36px;
        height: 36px;
    }

    /*
       Le bouton d'inscription reste accessible sur la première ligne.
    */
    .nav-cta {
        flex: 0 0 auto;
        padding: 9px 13px;
        font-size: 0.75rem;
    }

    /*
       La navigation devient une ligne défilable.
       Cela évite de créer un menu qui déborde de l'écran.
    */
    .nav-links {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        gap: 18px;
        padding: 2px 0 4px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    /* Masque la barre de défilement sur Chrome/Safari. */
    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links a {
        flex: 0 0 auto;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /*
       Les sections deviennent moins hautes pour éviter des pages
       inutilement longues sur smartphone.
    */
    .section {
        padding: 70px 0;
    }

    /* Le contenu horizontal est légèrement réduit. */
    .container {
        width: min(100% - 28px, var(--max-width));
    }

    /*
       Le hero tient compte du header devenu plus haut sur mobile.
    */
    .hero {
        min-height: 680px;
    }

    .hero-content {
        padding-top: 125px;
    }

    .hero h1 {
        font-size: clamp(2.6rem, 12vw, 4.2rem);
    }

    .hero-text {
        font-size: 1rem;
    }

    /* Les boutons du hero occupent une largeur confortable. */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .button {
        width: 100%;
    }

    /* Une seule colonne pour les cartes principales. */
    .two-columns,
    .three-columns {
        grid-template-columns: 1fr;
    }

    /* Une seule colonne pour les statistiques. */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card,
    .stat-card:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .stat-card:last-child {
        border-bottom: 0;
    }

    /* Les sections en deux parties passent l'une sous l'autre. */
    .split-section {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Les grilles de processus passent également en colonne. */
    .process-grid {
        grid-template-columns: 1fr;
    }

    /* Les images de cartes restent suffisamment grandes sans dépasser. */
    .card-image {
        height: 240px;
    }

    .card-body {
        padding: 24px;
    }

    /* Réduit la taille des grands titres de section. */
    .section-heading h2,
    .split-section h2,
    .cta-content h2 {
        font-size: clamp(1.8rem, 9vw, 2.6rem);
    }

    /* Les boutons généraux deviennent plus faciles à toucher au doigt. */
    .button {
        min-height: 52px;
        padding: 0 20px;
    }

    /*
       Le footer passe sur une colonne pour éviter les contenus serrés.
    */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    /* Réduit l'ombre WhatsApp sur les petits écrans. */
    .nav-cta[href*="wa.me"],
    .button[href*="wa.me"] {
        box-shadow: 0 6px 18px rgba(37, 211, 102, 0.20);
    }

    .nav-cta[href*="wa.me"]:hover,
    .button[href*="wa.me"]:hover {
        transform: translateY(-1px);
    }
}

/* =========================================================
   4. TRÈS PETITS ÉCRANS
   ========================================================= */

@media (max-width: 480px) {
    /* Le nom de l'académie ne doit jamais forcer le header à déborder. */
    .brand span {
        max-width: 165px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-cta {
        padding: 8px 11px;
        font-size: 0.7rem;
    }

    .nav-links {
        gap: 15px;
    }

    .nav-links a {
        font-size: 0.74rem;
    }

    .hero {
        min-height: 620px;
    }

    .hero-content {
        padding-top: 115px;
    }

    .card-body {
        padding: 20px;
    }

    .section {
        padding: 60px 0;
    }
}