/**

 * ==============================================================================

 * LES CHEMINS DE GÉGÈNE - BASE

 * ==============================================================================

 * Fichier    : /travail/css/base.css

 * Version    : 1.1

 * Date MAJ   : 16/03/2026

 * Contenu    : Variables, Reset, Structure, Grilles

 *

 * HISTORIQUE :

 * V1.0 - Création

 * V1.1 - Espacement uniforme 15px sur grilles et flex

 * ==============================================================================

 */



/* ==========================================================================

   MOBILE-FIRST ADJUSTMENTS

   ========================================================================== */

:root {

    --size-base: 1rem;

    --size-titre: 3rem;

}



@media (max-width: 768px) {

    :root {

        --size-base: 0.85rem;

        --size-titre: 2.2rem;

    }

}



@media (max-width: 480px) {

    :root {

        --size-base: 0.65rem;

        --size-titre: 1.3rem;

    }

    body#top { font-size: var(--size-base) !important; }

    .test-titre { font-size: 1.5rem; margin: 15px 0; }

    .test-titre-intermediaire { font-size: 1.2rem; margin-bottom: 8px; }

    .card-title { font-size: 1.0rem; }

    .nav-link { font-size: 0.95rem; }

    .card-box, .text-block { padding: 12px; }

    .archive-item { padding: 10px; }

    .rico-avatar { width: 50px; height: 50px; border-width: 2px; }

    .btn-primary, .btn-secondary, .btn-alert, .btn-amazon { padding: 6px 10px; font-size: 0.8rem; }

    .btn-scroll-top { font-size: 0.7rem; padding: 5px 10px; }

    .rico-touch-container { gap: 8px; }

    .sub-nav-link { font-size: 0.7rem; padding: 4px 7px; border-radius: 4px; }

    .main-nav { padding: 3px 0; }

}



/* ==========================================================================

   VARIABLES & RESET

   ========================================================================== */

html { scroll-behavior: smooth !important; }



:root {

    --font-base: 'Montserrat', sans-serif;

    --font-titre: 'Permanent Marker', cursive;

    --color-text: #333333;

    --color-orange: #e67e22;

    --color-green: #27ae60;

    --color-red-alert: #c0392b;

    --color-amazon-yellow: #FF9900;

    --bg-site: #f9f7f2;

    --bg-grey: #eceae4;

    --bg-blue-info: #BBD2E1;

    --color-border-dark: #333333;

    --spacing: 15px;

}



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

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



body {

    font-family: var(--font-base);

    line-height: 1.6;

    color: var(--color-text);

    background-color: var(--bg-site);

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    font-size: var(--size-base);

}



/* ==========================================================================

   STRUCTURE & GRILLES

   ========================================================================== */

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.container-large { width: 100%; background-color: var(--bg-site); }

.flex-row { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }

.grid-2, .grid-3 { display: grid; grid-template-columns: 1fr; gap: 15px; margin-bottom: 15px; }

@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

.centered-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; }