/* Styles CSS principaux pour Langevin Aventure */

/* =============================
   FONTS LOCALES
   ============================= */
@font-face {
    font-family: 'Protest Riot';
    /* Chemin relatif depuis css/style.css vers fonts/ pour rester indépendant du préfixe (mathieu, resa, etc.) */
    src: url('../fonts/ProtestRiot-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   RESET ET BASE
   Règles de base pour harmoniser l'affichage sur tous les navigateurs
   ======================================== */

/* Reset universel : enlève les marges/padding par défaut de tous les éléments */
* {
    margin: 0;           /* Supprime toutes les marges par défaut */
    padding: 0;          /* Supprime tous les padding par défaut */
    box-sizing: border-box; /* Inclut padding et border dans la taille totale */
}

/* Empêcher le scroll horizontal sur tout le document */
html,
body {
    overflow-x: hidden;
}

/* Styles de base du body (page entière) */
/* DÉSACTIVÉ - Maintenant géré par design-system.css pour cohérence avec RESA
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
}
*/

/* ========================================
   LAYOUT PRINCIPAL
   Conteneur principal du contenu de la page
   ======================================== */

main {
    width: 100%;        /* Force la largeur à 100% du parent */
    max-width: 1200px;  /* Largeur maximum pour une bonne lecture (pas trop large) */
    margin: 0 auto;     /* Centre le contenu horizontalement */
    padding: 20px;      /* Espace intérieur pour éviter que le texte touche les bords */
    flex: 1;            /* Prend tout l'espace disponible pour pousser le footer en bas */
}

/* ========================================
   TITRES ET HIERARCHIE
   Styles pour les différents niveaux de titres
   ======================================== */

/* Titre principal H1 - Style unifié pour tout le site
   Aligné sur le style .titre-presta (RESA) */
h1,
.page-main-title {
    margin: 0px;
    font-family: 'Protest Riot', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    letter-spacing: 0px;
    color: var(--color-primary-medium);
    text-align: left;
}

/* Titre de section H2 - Sous-sections importantes */
h2 {
    font-size: 2em;     /* Taille moyenne (2 fois la taille de base) */
    color: var(--color-primary);     /* Même couleur que H1 pour la cohérence */
    margin: var(--spacing-xl) 0 var(--spacing-md) 0; /* Espace au-dessus et en dessous */
}

/* Titre de sous-section H3 - Subdivisions */
h3 {
    font-family: 'Protest Riot', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;    /* 2/3 de H1 (32px vs 48px) */
    font-weight: 700;   /* Bold pour correspondre à H1 */
    color: var(--color-primary);        /* Même couleur primaire que H1 */
    margin: var(--spacing-lg) 0 var(--spacing-md) 0; /* Espacement proportionnel */
}

/* ========================================
   NAVIGATION PRINCIPALE
   ======================================== */

/* DÉSACTIVÉ - Maintenant géré par menu.css pour cohérence avec RESA
.main-navigation {
    background: var(--color-white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}
*/

/* ========================================
   BOUTONS ET APPELS À L'ACTION
   DÉSACTIVÉ - Le design system (design-system.css) gère maintenant tous les boutons
   ======================================== */

/* Tous les styles .btn et .btn-primary sont maintenant dans design-system.css
   pour éviter les conflits et assurer la cohérence avec le design RESA */

/* Bouton secondaire (action moins importante comme "En savoir plus") */
/* CONSERVÉ car spécifique au site MATHIEU et non présent sur RESA */
.btn-secondary {
    background: transparent; /* Fond transparent */
    color: var(--color-primary);        /* Texte bleu-vert */
    border: var(--border-medium) solid var(--color-primary); /* Bordure bleu-vert */
}

/* Animation au survol du bouton secondaire */
.btn-secondary:hover {
    background: var(--color-primary);   /* Se remplit de bleu-vert au survol */
    color: var(--color-white);          /* Texte devient blanc */
    transform: translateY(-1px); /* Même élévation que le primary */
}

/* ========================================
   GRILLES DE MISE EN PAGE
   Systèmes de colonnes flexibles et responsives
   ======================================== */

/* Grille de base */
.grid {
    display: grid;         /* Utilise CSS Grid pour la mise en page */
    gap: var(--spacing-lg);            /* Espace entre les éléments de la grille */
}

/* Grille 2 colonnes (responsive - s'adapte à la taille d'écran) */
.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* auto-fit = s'adapte au nombre d'éléments */
    /* minmax(300px, 1fr) = minimum 300px, sinon prend l'espace disponible */
}

/* Grille 3 colonnes */
.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Plus d'éléments = colonnes plus étroites (250px minimum) */
}

/* Grille 4 colonnes */
.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* Encore plus d'éléments = colonnes encore plus étroites (200px minimum) */
}

/* ========================================
   CARDS (CARTES DE CONTENU)
   Boîtes de contenu avec effet visuel
   ======================================== */

/* Style de base des cartes */
.card {
    background: var(--color-white);     /* Fond blanc pour se détacher */
    border-radius: 8px;    /* Coins arrondis */
    padding: var(--spacing-lg);         /* Espace intérieur pour le contenu */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Ombre légère pour la profondeur */
    transition: transform var(--transition-base), box-shadow var(--transition-base); /* Animations fluides */
}

/* Animation au survol des cartes */
.card:hover {
    transform: translateY(-2px); /* Élévation de 2px vers le haut */
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* Ombre plus marquée */
}

/* Titres dans les cartes */
.card h3 {
    color: var(--color-primary);        /* Couleur de la marque */
    margin-top: 0;         /* Pas d'espace en haut (déjà géré par le padding) */
}

/* Sections */
.section {
    margin: 40px 0;
    padding: 40px 0;
}

.section-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    text-align: center;
    padding: 80px var(--spacing-lg);
    margin-bottom: 0;
}

.section-hero h1 {
    color: var(--color-white);
    font-size: 3em;
    margin-bottom: var(--spacing-lg);
}

.section-hero p {
    font-size: 1.3em;
    margin-bottom: var(--spacing-xl);
    opacity: var(--opacity-subtle);
}

/* Formulaires */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.form-control {
    width: 100%;
    padding: 12px var(--spacing-md);
    border: var(--border-thin) solid var(--color-gray-300);
    border-radius: 6px;
    font-size: var(--font-size-base);
    transition: border-color var(--transition-base);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 110, 120, 0.2);
}

.form-control.error {
    border-color: var(--color-danger);
}

.form-error {
    color: var(--color-danger);
    font-size: 14px;
    margin-top: var(--spacing-xs);
}

/* Footer */
footer {
    background: var(--color-gray-900);
    color: var(--color-white);
    padding: 40px var(--spacing-lg) var(--spacing-lg);
    margin-top: 60px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
}

.footer-section h4 {
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
}

.footer-section a {
    color: var(--color-gray-300);
    text-decoration: none;
    transition: color var(--transition-base);
}

.footer-section a:hover {
    color: var(--color-white);
}

.footer-bottom {
    border-top: var(--border-thin) solid var(--color-gray-800);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    text-align: center;
    color: var(--color-gray-500);
}

/* Messages d'état */
.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 6px;
    margin: var(--spacing-lg) 0;
    border-left: var(--border-thick) solid;
}

.alert-success {
    background: var(--color-background-success);
    border-color: var(--color-success);
    color: var(--color-text-on-success);
}

.alert-error {
    background: var(--color-background-error);
    border-color: var(--color-danger);
    color: var(--color-text-on-error);
}

.alert-info {
    background: var(--color-background-info);
    border-color: var(--color-info);
    color: var(--color-text-on-info);
}

/* Debug (mode développement) */
.debug-info {
    background: var(--color-gray-50);
    border: var(--border-thin) solid var(--color-gray-300);
    border-radius: 6px;
    padding: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    font-family: monospace;
    font-size: 14px;
}

.debug-info h3 {
    color: var(--color-gray-700);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
}

/* ========================================
   RESPONSIVE DESIGN
   Adaptation du design aux différentes tailles d'écran
   ======================================== */

/* Tablettes et petits écrans (largeur max 768px) */
@media (max-width: 768px) {
    main {
        padding: 10px;     /* Moins d'espace sur les petits écrans */
    }
    
    h1 {
        font-size: 2em;    /* Titres plus petits pour tenir sur l'écran */
    }
    
    .section-hero {
        padding: 60px 20px; /* Section hero moins haute */
    }
    
    .section-hero h1 {
        font-size: 2.5em;  /* Titre hero adapté */
    }
    
    .btn {
        display: block;     /* Boutons en largeur complète */
        margin: 10px 0;    /* Espacement vertical entre boutons */
    }
}

/* Smartphones (largeur max 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 1.8em;  /* Titres encore plus petits */
    }
    
    .section-hero h1 {
        font-size: 2em;    /* Titre hero compact pour mobile */
    }
    
    .card {
        padding: 15px;     /* Moins de padding dans les cartes */
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* ========================================
   CLASSES UTILITAIRES
   Petites classes pratiques pour ajustements rapides
   ======================================== */

/* Alignement de texte */
.text-center { text-align: center; }  /* Centre le texte */
.text-left { text-align: left; }      /* Aligne à gauche */
.text-right { text-align: right; }    /* Aligne à droite */

/* Marges du haut (mt = margin-top) */
.mt-0 { margin-top: 0; }     /* Pas de marge en haut */
.mt-1 { margin-top: 10px; }  /* Petite marge (10px) */
.mt-2 { margin-top: 20px; }  /* Marge moyenne (20px) */
.mt-3 { margin-top: 30px; }  /* Grande marge (30px) */

/* Marges du bas (mb = margin-bottom) */
.mb-0 { margin-bottom: 0; }     /* Pas de marge en bas */
.mb-1 { margin-bottom: 10px; }  /* Petite marge */
.mb-2 { margin-bottom: 20px; }  /* Marge moyenne */
.mb-3 { margin-bottom: 30px; }  /* Grande marge */

/* Visibilité */
.hidden { display: none; }   /* Cache complètement l'élément */
.visible { display: block; } /* Affiche l'élément en bloc */

/* ========================================
   FOOTER ET INFORMATIONS SYSTÈME
   Styles pour le pied de page et les éléments de debug
   ======================================== */

/* Footer principal du site */
.site-footer {
    background-color: var(--color-gray-50);      /* Fond gris très clair */
    border-top: var(--border-thin) solid var(--color-gray-200);  /* Ligne de séparation subtile */
    padding: 2rem 1rem 1rem;        /* Espacement intérieur confortable */
    margin-top: 3rem;               /* Espace au-dessus pour séparer du contenu */
    text-align: center;             /* Centre le contenu du footer */
}

/* Informations de version dans le footer */
.version-info {
    margin-top: 1rem;               /* Espace au-dessus */
    opacity: var(--opacity-medium);                   /* Légèrement transparent pour être discret */
    font-size: 0.85em;              /* Légèrement plus petit que le texte normal */
}

/* Panel de debug (visible uniquement en développement) */
.debug-panel {
    margin-top: 2rem;               /* Espace au-dessus pour séparer du contenu */
    padding: 1rem;                  /* Espacement intérieur */
    background: var(--color-gray-50);            /* Fond gris clair */
    border-left: var(--border-thick) solid var(--color-info); /* Barre colorée à gauche pour identifier */
    border-radius: 0 4px 4px 0;     /* Coins arrondis à droite */
    font-family: 'Courier New', monospace; /* Police à chasse fixe pour le code */
    font-size: 0.9em;               /* Légèrement plus petit */
    max-width: 1200px;              /* Même largeur que le main */
    margin-left: auto;              /* Centre horizontalement */
    margin-right: auto;             /* Centre horizontalement */
}