/* ==========================================================================
   THÈME SPÉCIAL HALLOWEEN DES ENFANTS (DOUX, JOYEUX & ENFANTIN)
   École de l'Enfant-Jésus - Morlanwelz
   Fichier : css/blue.css
   ========================================================================== */

:root {
    /* Palette Halloween Enfantine : Joyeuse, Lumineuse & Gourmande */
    --primary-color: #ff851b;      /* Orange Citrouille Sucrée */
    --primary-light: #ffa756;      /* Pêche / Abricot doux */
    --primary-dark: #e06900;       /* Orange Caramel */
    --secondary-color: #7e57c2;    /* Violet Lilas Magique (très doux) */
    --secondary-light: #ede7f6;    /* Brume Mauve Pastel */
    --secondary-dark: #5e35b1;     /* Violet Améthyste doux */
    --tertiary-color: #7cb342;     /* Vert Pomme Douce & Lutin */
    --tertiary-light: #dcedc8;     /* Vert Menthe Pastel */
    --accent-yellow: #ffca28;      /* Jaune Bonbon Maïs (Candy Corn) */
    --bg-color: #fdfaf6;           /* Fond Crème Chaud & Réconfortant */
    --card-bg: #ffffff;
    --text-color: #3e2723;         /* Chocolat Chaud / Brun très doux, jamais noir dur */
    --text-muted: #6d4c41;
    --radius-soft: 20px;
    --radius-pill: 50px;
    --header-overlay: rgba(103, 58, 183, 0.62);
    --header-bg: #5e35b1;
}

/* ==========================================================================
   Corps de page et motif ludique
   ========================================================================== */
body {
    background-color: var(--bg-color) !important;
    /* Motif doux de petits confettis festifs d'Halloween */
    background-image: 
        radial-gradient(rgba(255, 133, 27, 0.12) 18%, transparent 19%),
        radial-gradient(rgba(126, 87, 194, 0.10) 18%, transparent 19%),
        radial-gradient(rgba(255, 202, 40, 0.15) 15%, transparent 16%) !important;
    background-size: 48px 48px !important;
    background-position: 0 0, 24px 24px, 12px 36px !important;
    color: var(--text-color) !important;
    font-family: 'Fredoka', 'Nunito', 'Comic Sans MS', cursive, sans-serif !important;
}

/* ==========================================================================
   Bandeau haut officiel de l'école (avec la photo du bandeau bien visible)
   ========================================================================== */
.haut {
    background-color: var(--header-bg) !important;
    background-image: 
        linear-gradient(135deg, rgba(103, 58, 183, 0.62) 0%, rgba(224, 105, 0, 0.52) 100%), 
        url('../photos/diapo/ecole10.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-bottom: 6px solid var(--primary-color) !important;
    box-shadow: 0 6px 20px rgba(103, 58, 183, 0.25) !important;
}

#logo {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}

#haut h1 a {
    color: #ffffff !important;
    text-shadow: 0 3px 0 #e06900, 0 6px 12px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
}

#haut h1 a:hover {
    transform: scale(1.03) rotate(-1deg) !important;
    color: #fff9c4 !important;
}

#haut h2 {
    color: #fff9c4 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.adresse {
    color: #ede7f6 !important;
}

/* ==========================================================================
   Menu de Navigation (Boutons bonbons très arrondis)
   ========================================================================== */
nav {
    background: linear-gradient(90deg, #ff851b 0%, #ff9f43 100%) !important;
    border-radius: var(--radius-pill) !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 6px 16px rgba(255, 133, 27, 0.35) !important;
    padding: 3px 12px !important;
}

nav a {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border-radius: var(--radius-pill) !important;
    border-bottom: none !important;
    padding: 8px 18px !important;
    transition: all 0.25s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

nav a:hover {
    background-color: #ffffff !important;
    color: var(--primary-dark) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    border-bottom: none !important;
}

/* Sous-menus déroulants */
.sous {
    background-color: #ffffff !important;
    border: 3px solid var(--primary-light) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(126, 87, 194, 0.2) !important;
    overflow: hidden !important;
}

.sous a {
    color: var(--text-color) !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}

.sous a:hover {
    background-color: var(--secondary-light) !important;
    color: var(--secondary-dark) !important;
    transform: none !important;
}

/* Boutons d'en-tête (connexion, etc.) */
.header-user-btn {
    background-color: #ffffff !important;
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-dark) !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(255, 133, 27, 0.2) !important;
    transition: all 0.2s ease !important;
}

.header-user-btn:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   Boîtes de contenu, cartes & conteneurs d'accueil
   ========================================================================== */
.conteneur {
    border-radius: var(--radius-soft) !important;
    border: 3px solid var(--secondary-light) !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(126, 87, 194, 0.12), 0 3px 0 var(--primary-light) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.conteneur:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(126, 87, 194, 0.18), 0 4px 0 var(--primary-color) !important;
}

.titre_clair {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%) !important;
    color: #ffffff !important;
    border-radius: 17px 17px 0 0 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    padding: 12px 14px !important;
}

.titre_fonce {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    color: #ffffff !important;
    border-radius: 17px 17px 0 0 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    padding: 12px 14px !important;
}

/* ==========================================================================
   Boutons d'action style « Chamallow / Bonbon 3D »
   ========================================================================== */
#bouton, .bouton, .btn-action {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    border-radius: var(--radius-pill) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 0 #b35300, 0 6px 14px rgba(255, 133, 27, 0.35) !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#bouton:hover, .bouton:hover, .btn-action:hover {
    background: linear-gradient(135deg, #ffa040 0%, var(--primary-color) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 0 #b35300, 0 10px 20px rgba(255, 133, 27, 0.45) !important;
}

#bouton:active, .bouton:active, .btn-action:active {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 #b35300, 0 3px 6px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   Signature, Citations et Titres
   ========================================================================== */
.signature {
    color: var(--secondary-color) !important;
    font-family: 'Fredoka', cursive, sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-shadow: 0 2px 0 rgba(255, 133, 27, 0.2) !important;
}

#citation {
    color: var(--secondary-dark) !important;
    font-size: 26px !important;
    text-shadow: 0 2px 8px rgba(126, 87, 194, 0.15) !important;
}

/* Liens du site */
a {
    color: var(--primary-dark) !important;
    font-weight: 600 !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

a:hover {
    color: var(--secondary-color) !important;
}

/* Fil d'Ariane */
#filrouge {
    background: #ffffff !important;
    border: 2px solid var(--secondary-light) !important;
    border-radius: var(--radius-pill) !important;
    padding: 6px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--text-muted) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05) !important;
    margin: 10px 0 20px 20px !important;
}

#filrouge a {
    color: var(--primary-color) !important;
}

#filrouge a:hover {
    color: var(--secondary-dark) !important;
}

/* ==========================================================================
   Cartes de documents et items (reglements.php, ecole.php, etc.)
   ========================================================================== */
.item {
    float: none !important;
    display: inline-block !important;
    margin: 10px !important;
}

.item a {
    float: none !important;
    left: auto !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    border: 3px solid var(--secondary-light) !important;
    border-radius: var(--radius-soft) !important;
    box-shadow: 0 6px 16px rgba(126, 87, 194, 0.08), 0 2px 0 var(--primary-light) !important;
    color: var(--text-color) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    width: 180px !important;
    height: 160px !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    margin: 0 !important;
}

.item a:hover {
    background-color: #ffffff !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-4px) scale(1.04) !important;
    box-shadow: 0 12px 24px rgba(255, 133, 27, 0.22), 0 3px 0 var(--primary-dark) !important;
    color: var(--primary-dark) !important;
}

.item a img {
    transition: transform 0.25s ease !important;
}

.item a:hover img {
    transform: scale(1.08) !important;
}

/* ==========================================================================
   Cartes d'exercices sur la page exercices/index.php
   ========================================================================== */
.exercice-card {
    border-radius: 20px !important;
    border: 3px solid var(--secondary-light) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(126, 87, 194, 0.08) !important;
    transition: all 0.25s ease !important;
}

.exercice-card:hover {
    border-color: var(--primary-color) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(255, 133, 27, 0.2) !important;
}

.btn-play {
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 4px 0 #b35300 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   Pied de page (#bas)
   ========================================================================== */
#bas {
    background: linear-gradient(180deg, transparent 0%, rgba(237, 231, 246, 0.6) 100%) !important;
    border-top: 3px dashed var(--primary-light) !important;
    padding: 25px 15px !important;
    color: var(--text-muted) !important;
}

#bas hr {
    display: none !important;
}

#bas b {
    color: var(--secondary-dark) !important;
}

#bas a {
    color: var(--primary-dark) !important;
}

#bas a:hover {
    color: var(--secondary-color) !important;
}

/* ==========================================================================
   Portail d'Accueil du Local Informatique (start_me.php) - Thème Halloween
   ========================================================================== */
.startme-badge {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%) !important;
    box-shadow: 0 4px 12px rgba(126, 87, 194, 0.3) !important;
}

.startme-header h2,
.startme-title {
    color: var(--secondary-color) !important;
    text-shadow: 0 3px 0 rgba(255, 133, 27, 0.22), 0 6px 14px rgba(126, 87, 194, 0.15) !important;
}

.startme-header p,
.startme-subtitle {
    color: var(--text-muted) !important;
}

.search-container {
    border: 3px solid var(--secondary-light) !important;
    box-shadow: 0 8px 24px rgba(126, 87, 194, 0.12), 0 3px 0 var(--primary-light) !important;
}

.search-container:focus-within {
    border-color: var(--primary-color) !important;
    box-shadow: 0 12px 28px rgba(255, 133, 27, 0.3), 0 4px 0 var(--primary-dark) !important;
}

.search-container button {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    box-shadow: 0 4px 0 #b35300, 0 6px 14px rgba(255, 133, 27, 0.35) !important;
}

.search-container button:hover {
    background: linear-gradient(135deg, #ffa040 0%, var(--primary-color) 100%) !important;
    box-shadow: 0 6px 0 #b35300, 0 10px 20px rgba(255, 133, 27, 0.45) !important;
}

/* Grille de liens : tuiles d'apps gourmandes */
.card-body.layout-grid .portal-link-row {
    background-color: #ffffff !important;
    border: 2px solid var(--secondary-light) !important;
    box-shadow: 0 4px 10px rgba(126, 87, 194, 0.06), 0 2px 0 var(--primary-light) !important;
}

.card-body.layout-grid .portal-link-row:hover {
    border-color: var(--primary-color) !important;
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 12px 24px rgba(255, 133, 27, 0.25), 0 3px 0 var(--primary-dark) !important;
}

.card-body.layout-grid .portal-link-row:hover .portal-link span {
    color: var(--primary-dark) !important;
}