/**
 * Styles personnalisés COOPNUM
 *
 * Ce fichier contient les ajustements graphiques propres au site COOPNUM.
 * Il centralise les couleurs, polices, boutons, titres, sections, cartes et classes utilitaires.
 *
 * Logique typographique :
 * - Open Sans : utilisée pour les titres et les textes longs, car elle est plus lisible.
 * - Barlow Condensed : utilisée pour les textes courts, accroches, éléments visuels ou slogans.
 */

/* ================================
   Variables globales COOPNUM
================================ */

:root {
    /* Couleurs principales */
    --coopnum-blue: #0097b2;
    --coopnum-azur: #78c8d6;
    --coopnum-turquoise: #29c4a9;

    /* Dégradé principal */
    --coopnum-gradient: linear-gradient(135deg, #29c4a9 0%, #0097b2 100%);

    /* Couleurs neutres */
    --coopnum-dark: #111827;
    --coopnum-light: #ffffff;
    --coopnum-grey: #f5f7fa;

    /* Polices */
    --coopnum-font-title: "Open Sans", Arial, sans-serif;
    --coopnum-font-readable: "Open Sans", Arial, sans-serif;
    --coopnum-font-condensed: "Barlow Condensed", "Open Sans", Arial, sans-serif;
}

/* ================================
   Test de chargement du thème enfant
================================ */

/*
Décommenter temporairement cette ligne pour vérifier que le CSS est bien chargé.
Après le test, remettre la ligne en commentaire.
*/

/* body { border-top: 6px solid var(--coopnum-blue); } */

/* ================================
   Base typographique
================================ */

body {
    font-family: var(--coopnum-font-readable);
    color: var(--coopnum-dark);
}

/* Titres principaux */
.coopnum-title {
    font-family: var(--coopnum-font-title);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--coopnum-blue);
    font-weight: 700;
    line-height: 1.15;
}

/* Sous-titre lisible, pour paragraphes courts ou moyens */
.coopnum-subtitle {
    font-family: var(--coopnum-font-readable);
    color: var(--coopnum-dark);
    font-size: 1.2rem;
    line-height: 1.6;
}

/* Texte long : à utiliser pour les paragraphes importants */
.coopnum-text-readable {
    font-family: var(--coopnum-font-readable);
    color: var(--coopnum-dark);
    font-size: 1rem;
    line-height: 1.7;
}

/* Texte plus stylisé : à utiliser pour slogans, petits textes, accroches */
.coopnum-text-condensed {
    font-family: var(--coopnum-font-condensed);
    color: var(--coopnum-dark);
    font-size: 1.15rem;
    line-height: 1.45;
}

/* Petite accroche visuelle */
.coopnum-kicker {
    font-family: var(--coopnum-font-condensed);
    color: var(--coopnum-blue);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ================================
   Boutons
================================ */

.coopnum-button {
    display: inline-block;
    background-color: var(--coopnum-blue);
    color: var(--coopnum-light);
    padding: 12px 24px;
    border-radius: 999px;
    font-family: var(--coopnum-font-title);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.coopnum-button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.coopnum-button-azur {
    display: inline-block;
    background-color: var(--coopnum-azur);
    color: var(--coopnum-dark);
    padding: 12px 24px;
    border-radius: 999px;
    font-family: var(--coopnum-font-title);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.coopnum-button-azur:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.coopnum-button-gradient {
    display: inline-block;
    background: var(--coopnum-gradient);
    color: var(--coopnum-light);
    padding: 12px 24px;
    border-radius: 999px;
    font-family: var(--coopnum-font-title);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.coopnum-button-gradient:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* ================================
   Sections
================================ */

.coopnum-section {
    padding: 64px 24px;
}

.coopnum-section-light {
    background-color: var(--coopnum-grey);
}

.coopnum-section-azur {
    background-color: var(--coopnum-azur);
}

.coopnum-section-blue {
    background-color: var(--coopnum-blue);
    color: var(--coopnum-light);
}

.coopnum-section-gradient {
    background: var(--coopnum-gradient);
    color: var(--coopnum-light);
}

.coopnum-section-dark {
    background-color: var(--coopnum-dark);
    color: var(--coopnum-light);
}

/* Pour garder les titres et textes lisibles dans les sections foncées/colorées */
.coopnum-section-blue .coopnum-title,
.coopnum-section-gradient .coopnum-title,
.coopnum-section-dark .coopnum-title,
.coopnum-section-blue .coopnum-kicker,
.coopnum-section-gradient .coopnum-kicker,
.coopnum-section-dark .coopnum-kicker {
    color: var(--coopnum-light);
}

.coopnum-section-blue .coopnum-subtitle,
.coopnum-section-gradient .coopnum-subtitle,
.coopnum-section-dark .coopnum-subtitle,
.coopnum-section-blue .coopnum-text-readable,
.coopnum-section-gradient .coopnum-text-readable,
.coopnum-section-dark .coopnum-text-readable,
.coopnum-section-blue .coopnum-text-condensed,
.coopnum-section-gradient .coopnum-text-condensed,
.coopnum-section-dark .coopnum-text-condensed {
    color: var(--coopnum-light);
}

/* ================================
   Cartes / blocs de contenu
================================ */

.coopnum-card {
    background-color: var(--coopnum-light);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.coopnum-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.12);
}

.coopnum-card-blue {
    background-color: var(--coopnum-blue);
    color: var(--coopnum-light);
}

.coopnum-card-azur {
    background-color: var(--coopnum-azur);
    color: var(--coopnum-dark);
}

.coopnum-card-gradient {
    background: var(--coopnum-gradient);
    color: var(--coopnum-light);
}

/* Titres et textes dans les cartes colorées */
.coopnum-card-blue .coopnum-title,
.coopnum-card-gradient .coopnum-title,
.coopnum-card-blue .coopnum-kicker,
.coopnum-card-gradient .coopnum-kicker {
    color: var(--coopnum-light);
}

.coopnum-card-blue .coopnum-subtitle,
.coopnum-card-gradient .coopnum-subtitle,
.coopnum-card-blue .coopnum-text-readable,
.coopnum-card-gradient .coopnum-text-readable,
.coopnum-card-blue .coopnum-text-condensed,
.coopnum-card-gradient .coopnum-text-condensed {
    color: var(--coopnum-light);
}

.coopnum-card-azur .coopnum-title,
.coopnum-card-azur .coopnum-kicker {
    color: var(--coopnum-dark);
}

/* ================================
   Images
================================ */

.coopnum-rounded-img {
    border-radius: 24px;
    overflow: hidden;
}

.coopnum-img-shadow {
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.18);
}

/* ================================
   Classes utilitaires simples
================================ */

.coopnum-text-blue {
    color: var(--coopnum-blue);
}

.coopnum-text-azur {
    color: var(--coopnum-azur);
}

.coopnum-text-turquoise {
    color: var(--coopnum-turquoise);
}

.coopnum-bg-blue {
    background-color: var(--coopnum-blue);
}

.coopnum-bg-azur {
    background-color: var(--coopnum-azur);
}

.coopnum-bg-turquoise {
    background-color: var(--coopnum-turquoise);
}

.coopnum-bg-gradient,
.coopnum-gradient {
    background: var(--coopnum-gradient);
    color: var(--coopnum-light);
}

.coopnum-bg-light {
    background-color: var(--coopnum-light);
}

.coopnum-bg-grey {
    background-color: var(--coopnum-grey);
}

/* ================================
   Responsive
================================ */

@media (max-width: 980px) {
    .coopnum-section {
        padding: 52px 22px;
    }
}

@media (max-width: 768px) {
    .coopnum-section {
        padding: 40px 18px;
    }

    .coopnum-title {
        font-size: 2rem;
    }

    .coopnum-subtitle {
        font-size: 1.05rem;
    }

    .coopnum-text-readable {
        font-size: 1rem;
        line-height: 1.65;
    }

    .coopnum-text-condensed {
        font-size: 1.05rem;
        line-height: 1.45;
    }

    .coopnum-card {
        padding: 24px;
        border-radius: 18px;
    }

    .coopnum-button,
    .coopnum-button-azur,
    .coopnum-button-gradient {
        padding: 10px 20px;
    }
}