/**
 * CEMôme Design System - CSS Principal
 * Point d'entrée du design system unifié
 * Remplace front-office.css, app.css et harmonise toute l'application
 * 
 * Note: Les variables et bootstrap-theme sont intégrés directement ici
 * pour éviter les problèmes @import avec AssetMapper
 */

/**
 * TYPOGRAPHIE GLOBALE CEMOME
 * Application des fonts CEMôme de manière propre
 */

/* Body settings - Remplace le sélecteur universel * */
body {
  font-family: var(--cemome-font-primary);
  font-size: var(--cemome-fs-base);
  font-weight: var(--cemome-fw-normal);
  line-height: var(--cemome-lh-relaxed);
  color: var(--cemome-text-primary);
  margin: 0;
  background-color: var(--cemome-bg-primary);
}

/* Links globaux */
a {
  color: var(--cemome-primary);
  text-decoration: none;
  transition: var(--cemome-transition-fast);
}

a:hover {
  color: var(--cemome-primary-dark);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cemome-font-primary);
  font-weight: var(--cemome-fw-semibold);
  color: var(--cemome-text-primary);
  line-height: var(--cemome-lh-tight);
}

/**
 * LAYOUT COMPONENTS CEMOME
 * Composants layout réutilisables
 */

/* Header */
.cemome-header {
  background-color: var(--cemome-bg-primary);
  box-shadow: var(--cemome-shadow-sm);
}

/* Banner */
.cemome-banner {
  width: 100%;
  height: 2px;
  background-image: url("bg-top-header-et3w0fs.png");
  background-repeat: repeat-x;
  background-position: top;
  background-size: auto;
}

/* Logo */
.cemome-logo {
  width: var(--cemome-logo-width-desktop);
  height: var(--cemome-logo-height-desktop);
  object-fit: contain;
  cursor: pointer;
  transition: var(--cemome-transition-base);
}

.cemome-logo:hover {
  transform: scale(1.05);
}

.cemome-logo-link {
  display: inline-block;
  text-decoration: none !important;
}

/* Platform title */
.cemome-platform-title {
  font-size: 1.4rem;
  font-weight: var(--cemome-fw-semibold);
  color: var(--cemome-primary);
}

.cemome-platform-title-mobile {
  font-size: 1rem;
  font-weight: var(--cemome-fw-semibold);
  color: var(--cemome-primary);
}

/* Contact info */
.cemome-contact-info {
  font-size: var(--cemome-fs-sm);
  color: var(--cemome-text-secondary);
}

.cemome-contact-info i {
  color: var(--cemome-primary);
}

/**
 * NAVIGATION CEMOME
 * Système de navigation unifié
 */

/* Dropdown navigation */
.cemome-nav .nav-link:hover {
  color: var(--cemome-primary) !important;
}

.cemome-nav .dropdown-item:hover {
  background-color: var(--cemome-primary) !important;
  color: white !important;
}

.cemome-nav .dropdown-item:hover i {
  color: white !important;
}

.cemome-nav .dropdown-submenu {
  position: relative;
}

.cemome-nav .dropdown-submenu:hover > .dropdown-menu {
  display: block;
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.cemome-nav .nav-item.dropdown:hover > .dropdown-menu {
  display: block;
}

/**
 * PAGE LAYOUT CEMOME
 * Layout des pages de contenu
 */

.cemome-page-content {
  background-color: var(--cemome-bg-secondary);
  min-height: 60vh;
}

.cemome-content-title {
  font-size: var(--cemome-fs-3xl);
  font-weight: var(--cemome-fw-bold);
  color: var(--cemome-secondary);
  text-align: center;
}

/**
 * CARDS CEMOME
 * Système de cartes unifié
 */

.cemome-card {
  background-color: var(--cemome-bg-primary);
  border: none;
  border-radius: var(--cemome-card-radius);
  box-shadow: var(--cemome-card-shadow);
  transition: var(--cemome-transition-base);
  overflow: hidden;
}

.cemome-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cemome-card-shadow-hover);
}

.cemome-card-clickable {
  position: relative;
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}

.cemome-card-clickable:hover {
  text-decoration: none !important;
  color: inherit !important;
}

.cemome-card-activity {
  cursor: pointer;
}

.cemome-card-activity img {
  height: 200px;
  object-fit: cover;
  transition: var(--cemome-transition-base);
}

.cemome-card-activity:hover img {
  transform: scale(1.05);
}

.cemome-card-content {
  padding: var(--cemome-card-padding);
  background-color: var(--cemome-bg-primary);
  color: var(--cemome-text-primary);
}

.cemome-card-title {
  color: var(--cemome-primary);
  font-weight: var(--cemome-fw-bold);
  margin-bottom: var(--cemome-space-3);
}

/**
 * FOOTER CEMOME
 * Footer unifié pour toute l'application
 */

.cemome-footer {
  background-color: var(--cemome-bg-primary);
  border-top: 1px solid var(--cemome-border-light);
}

.cemome-footer-title {
  font-weight: var(--cemome-fw-semibold);
  color: var(--cemome-text-primary);
  margin-bottom: var(--cemome-space-4);
}

.cemome-footer-item {
  display: flex;
  align-items: center;
  margin-bottom: var(--cemome-space-3);
  color: var(--cemome-text-secondary);
}

.cemome-footer-item i {
  margin-right: var(--cemome-space-3);
  width: 1.2rem;
  color: var(--cemome-primary);
}

.cemome-btn-return {
  background-color: var(--cemome-primary);
  border-color: var(--cemome-primary);
  color: var(--cemome-white);
  padding: var(--cemome-btn-padding-y) var(--cemome-btn-padding-x);
  border-radius: var(--cemome-btn-radius);
  font-weight: var(--cemome-btn-font-weight);
  transition: var(--cemome-transition-base);
  box-shadow: var(--cemome-shadow-sm);
}

.cemome-btn-return:hover {
  background-color: var(--cemome-primary-dark);
  border-color: var(--cemome-primary-dark);
  color: var(--cemome-white);
  transform: translateY(-1px);
  box-shadow: var(--cemome-shadow-md);
}

.cemome-footer-copyright {
  background-color: #e9ecef;
  padding: var(--cemome-space-4) 0;
  color: var(--cemome-text-secondary);
  font-size: var(--cemome-fs-sm);
}

.cemome-legal-links a {
  color: var(--cemome-text-secondary);
  margin: 0 var(--cemome-space-4);
}

.cemome-legal-links a:hover {
  color: var(--cemome-primary);
}

/**
 * RESPONSIVE DESIGN CEMOME
 * Breakpoints et adaptations mobiles
 */

@media (max-width: 767px) {
  .cemome-logo {
    width: var(--cemome-logo-width-mobile);
    height: var(--cemome-logo-height-mobile);
  }
  
  .cemome-platform-title {
    display: none;
  }
  
  .cemome-card-activity img {
    height: 150px;
  }
  
  .cemome-footer .row > div {
    text-align: center !important;
    margin-bottom: var(--cemome-space-8);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .cemome-logo {
    width: var(--cemome-logo-width-tablet);
    height: var(--cemome-logo-height-tablet);
  }
  
  .cemome-platform-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .cemome-logo {
    width: 80px;
    height: 45px;
  }
  
  .cemome-platform-title-mobile {
    font-size: 0.9rem;
  }
  
  .cemome-card-activity img {
    height: 120px;
  }
}/**
 * CEMôme Design System - Variables Globales
 * Variables CSS centralisées pour toute l'application
 * Utilisées par: Front Office, Authentification, Dashboard Parents
 */

:root {
  /* ========================================
     COULEURS CEMOME - Palette Officielle
     ======================================== */
  
  /* Couleurs principales */
  --cemome-primary: #1AB6DD;           /* Bleu principal CEMôme */
  --cemome-primary-dark: #1595b8;     /* Bleu foncé pour hover */
  --cemome-primary-light: #8ed1fc;    /* Bleu clair */
  --cemome-secondary: #b6e388;        /* Vert CEMôme */
  --cemome-white: #ffffff;            /* Blanc pur */
  
  /* Couleurs textes */
  --cemome-text-primary: #555555;     /* Texte principal */
  --cemome-text-secondary: #6c757d;   /* Texte secondaire gris */
  --cemome-text-muted: #999999;       /* Texte très discret */
  
  /* Couleurs de fond */
  --cemome-bg-primary: #ffffff;       /* Fond principal blanc */
  --cemome-bg-secondary: #f8f8f8;     /* Fond gris très clair */
  --cemome-bg-light: #f7f7f7;         /* Fond alternatif */
  
  /* Couleurs bordures */
  --cemome-border-light: #dee2e6;     /* Bordure claire */
  --cemome-border-dotted: #cccccc;    /* Bordure pointillée */
  
  /* Couleurs états */
  --cemome-success: #28a745;          /* Succès */
  --cemome-warning: #ffc107;          /* Avertissement */
  --cemome-error: #dc3545;            /* Erreur */
  --cemome-info: #17a2b8;             /* Information */
  
  /* ========================================
     TYPOGRAPHIE
     ======================================== */
  
  /* Fonts families */
  --cemome-font-primary: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cemome-font-secondary: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cemome-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  
  /* Font sizes */
  --cemome-fs-xs: 0.75rem;           /* 12px */
  --cemome-fs-sm: 0.875rem;          /* 14px */  
  --cemome-fs-base: 0.9375rem;       /* 15px - Base CEMôme */
  --cemome-fs-lg: 1rem;              /* 16px */
  --cemome-fs-xl: 1.25rem;           /* 20px */
  --cemome-fs-2xl: 1.5rem;           /* 24px */
  --cemome-fs-3xl: 2rem;             /* 32px */
  
  /* Font weights */
  --cemome-fw-light: 300;
  --cemome-fw-normal: 400;
  --cemome-fw-medium: 500;
  --cemome-fw-semibold: 600;
  --cemome-fw-bold: 700;
  
  /* Line heights */
  --cemome-lh-tight: 1.25;
  --cemome-lh-normal: 1.5;
  --cemome-lh-relaxed: 1.7;           /* CEMôme standard */
  --cemome-lh-loose: 2;
  
  /* ========================================
     ESPACEMENTS - Système 8px
     ======================================== */
  
  /* Spacing scale (compatible Bootstrap) */
  --cemome-space-0: 0;
  --cemome-space-1: 0.25rem;          /* 4px */
  --cemome-space-2: 0.5rem;           /* 8px */
  --cemome-space-3: 0.75rem;          /* 12px */
  --cemome-space-4: 1rem;             /* 16px */
  --cemome-space-5: 1.25rem;          /* 20px */
  --cemome-space-6: 1.5rem;           /* 24px */
  --cemome-space-8: 2rem;             /* 32px */
  --cemome-space-10: 2.5rem;          /* 40px */
  --cemome-space-12: 3rem;            /* 48px */
  --cemome-space-16: 4rem;            /* 64px */
  
  /* Spacing sémantiques CEMôme */
  --cemome-gap-xs: var(--cemome-space-2);    /* 8px */
  --cemome-gap-sm: var(--cemome-space-3);    /* 12px */
  --cemome-gap-md: var(--cemome-space-4);    /* 16px */
  --cemome-gap-lg: var(--cemome-space-6);    /* 24px */
  --cemome-gap-xl: var(--cemome-space-8);    /* 32px */
  
  /* ========================================
     COMPOSANTS - Dimensions et Styles
     ======================================== */
  
  /* Border radius */
  --cemome-radius-xs: 0.125rem;       /* 2px */
  --cemome-radius-sm: 0.25rem;        /* 4px */
  --cemome-radius-md: 0.375rem;       /* 6px */
  --cemome-radius-lg: 0.5rem;         /* 8px */
  --cemome-radius-xl: 1rem;           /* 16px */
  --cemome-radius-2xl: 1.55rem;       /* ~25px - CEMôme signature */
  --cemome-radius-full: 9999px;       /* Arrondi complet */
  
  /* Shadows */
  --cemome-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --cemome-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --cemome-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --cemome-shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.15);
  --cemome-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  
  /* Transitions */
  --cemome-transition-fast: 0.15s ease;
  --cemome-transition-base: 0.3s ease;
  --cemome-transition-slow: 0.5s ease;
  
  /* ========================================
     LAYOUT & COMPONENTS SPECIFIQUES
     ======================================== */
  
  /* Header */
  --cemome-header-height-desktop: 140px;  /* Calculé depuis py-4 */
  --cemome-header-height-mobile: 120px;   /* Plus compact */
  --cemome-nav-height: 60px;              /* Navigation height */
  
  /* Logo dimensions */
  --cemome-logo-width-desktop: 180px;     /* Nouvelle taille */
  --cemome-logo-height-desktop: 102px;    /* Calculé proportionnellement */
  --cemome-logo-width-tablet: 120px;      /* Tablette */
  --cemome-logo-height-tablet: 68px;      
  --cemome-logo-width-mobile: 100px;      /* Mobile */
  --cemome-logo-height-mobile: 56px;      
  
  /* Cards */
  --cemome-card-radius: var(--cemome-radius-xl);
  --cemome-card-padding: var(--cemome-space-4);
  --cemome-card-shadow: var(--cemome-shadow-md);
  --cemome-card-shadow-hover: var(--cemome-shadow-xl);
  
  /* Buttons */
  --cemome-btn-radius: var(--cemome-radius-lg);
  --cemome-btn-padding-y: var(--cemome-space-3);  /* 12px */
  --cemome-btn-padding-x: var(--cemome-space-6);  /* 24px */
  --cemome-btn-font-weight: var(--cemome-fw-medium);
  
  /* Forms */
  --cemome-form-radius: var(--cemome-radius-md);
  --cemome-form-focus-shadow: 0 0 0 0.2rem rgba(46, 170, 225, 0.25);
  
  /* ========================================
     RESPONSIVE BREAKPOINTS (Bootstrap)
     ======================================== */
  
  /* Breakpoints Bootstrap 5.3 */
  --cemome-bp-xs: 0;
  --cemome-bp-sm: 576px;
  --cemome-bp-md: 768px;
  --cemome-bp-lg: 992px;
  --cemome-bp-xl: 1200px;
  --cemome-bp-xxl: 1400px;
}/**
 * CEMôme Bootstrap Theme
 * Customisation Bootstrap 5.3+ avec variables CEMôme
 * Remplace les variables Bootstrap par défaut
 */

/* Variables CEMôme intégrées directement ci-dessous */

/**
 * BOOTSTRAP VARIABLE OVERRIDES
 * Override des variables Bootstrap avec les valeurs CEMôme
 */
:root {
  /* ========================================
     COULEURS BOOTSTRAP → CEMOME
     ======================================== */
  
  /* Primary color system */
  --bs-primary: var(--cemome-primary);
  --bs-primary-rgb: 26, 182, 221;
  
  /* Button primary variables */
  --bs-btn-color: var(--cemome-white);
  --bs-btn-bg: var(--cemome-primary);
  --bs-btn-border-color: var(--cemome-primary);
  --bs-btn-hover-color: var(--cemome-white);
  --bs-btn-hover-bg: var(--cemome-primary-dark);
  --bs-btn-hover-border-color: var(--cemome-primary-dark);
  --bs-btn-focus-shadow-rgb: 26, 182, 221;
  --bs-btn-active-color: var(--cemome-white);
  --bs-btn-active-bg: var(--cemome-primary-dark);
  --bs-btn-active-border-color: var(--cemome-primary-dark);
  
  /* Secondary color system */
  --bs-secondary: var(--cemome-secondary);
  --bs-secondary-rgb: 182, 227, 136;
  
  /* Body colors */
  --bs-body-color: var(--cemome-text-primary);
  --bs-body-bg: var(--cemome-bg-primary);
  --bs-secondary-color: var(--cemome-text-secondary);
  --bs-secondary-bg: var(--cemome-bg-secondary);
  
  /* Link colors */
  --bs-link-color: var(--cemome-primary);
  --bs-link-hover-color: var(--cemome-primary-dark);
  --bs-link-decoration: none;
  
  /* Border colors */
  --bs-border-color: var(--cemome-border-light);
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  
  /* ========================================
     TYPOGRAPHIE BOOTSTRAP → CEMOME
     ======================================== */
  
  /* Font families */
  --bs-font-sans-serif: var(--cemome-font-primary);
  --bs-font-monospace: var(--cemome-font-mono);
  
  /* Font sizes */
  --bs-body-font-size: var(--cemome-fs-base);
  --bs-body-font-weight: var(--cemome-fw-normal);
  --bs-body-line-height: var(--cemome-lh-relaxed);
  
  /* Headings */
  --bs-heading-color: var(--cemome-text-primary);
  
  /* ========================================
     COMPOSANTS BOOTSTRAP → CEMOME
     ======================================== */
  
  /* Border radius */
  --bs-border-radius: var(--cemome-radius-md);
  --bs-border-radius-sm: var(--cemome-radius-sm);
  --bs-border-radius-lg: var(--cemome-radius-lg);
  --bs-border-radius-xl: var(--cemome-radius-xl);
  --bs-border-radius-2xl: var(--cemome-radius-2xl);
  --bs-border-radius-pill: var(--cemome-radius-full);
  
  /* Box shadows */
  --bs-box-shadow: var(--cemome-shadow-md);
  --bs-box-shadow-sm: var(--cemome-shadow-sm);
  --bs-box-shadow-lg: var(--cemome-shadow-lg);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  
  /* Form controls */
  --bs-form-valid-color: var(--cemome-success);
  --bs-form-valid-border-color: var(--cemome-success);
  --bs-form-invalid-color: var(--cemome-error);
  --bs-form-invalid-border-color: var(--cemome-error);
}

/**
 * BOOTSTRAP COMPONENT CUSTOMIZATION
 * Styles spécifiques aux composants Bootstrap
 */

/* Buttons */
.btn {
  border-radius: var(--cemome-btn-radius);
  font-weight: var(--cemome-btn-font-weight);
  padding: var(--cemome-btn-padding-y) var(--cemome-btn-padding-x);
  transition: var(--cemome-transition-base);
  box-shadow: var(--cemome-shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--cemome-shadow-md);
}

/* Les boutons utilisent maintenant les variables Bootstrap --bs-btn-* définies ci-dessus */

/* Cards */
.card {
  border: none;
  border-radius: var(--cemome-card-radius);
  box-shadow: var(--cemome-card-shadow);
  transition: var(--cemome-transition-base);
}

.card:hover {
  box-shadow: var(--cemome-card-shadow-hover);
}

/* Forms */
.form-control,
.form-select {
  border-radius: var(--cemome-form-radius);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--cemome-primary);
  box-shadow: var(--cemome-form-focus-shadow);
}

/* Navigation */
.navbar {
  --bs-navbar-padding-y: var(--cemome-space-3);
}

.navbar-nav .nav-link:hover {
  color: var(--cemome-primary) !important;
}

.dropdown-menu {
  border: none;
  border-radius: var(--cemome-radius-lg);
  box-shadow: var(--cemome-shadow-lg);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--cemome-primary) !important;
  color: white !important;
}

.dropdown-item:hover i,
.dropdown-item:focus i {
  color: white !important;
}

.dropdown-item {
  color: var(--cemome-text-primary);
}

/* Alerts */
.alert {
  border-radius: var(--cemome-radius-lg);
}

/* Badges */
.badge {
  border-radius: var(--cemome-radius-md);
}

/* Modal */
.modal-content {
  border-radius: var(--cemome-radius-xl);
  border: none;
  box-shadow: var(--cemome-shadow-2xl);
}

/* Breadcrumb */
.breadcrumb-item + .breadcrumb-item::before {
  content: "\f0da";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--cemome-text-secondary);
}

.breadcrumb-item.active {
  color: var(--cemome-primary);
}

/**
 * UTILITIES CEMOME
 * Classes utilitaires spécifiques CEMôme
 */

/* Text colors */
.text-cemome-primary { color: var(--cemome-primary) !important; }
.text-cemome-secondary { color: var(--cemome-secondary) !important; }

/* Background colors */  
.bg-cemome-primary { background-color: var(--cemome-primary) !important; }
.bg-cemome-secondary { background-color: var(--cemome-secondary) !important; }
.bg-cemome-light { background-color: var(--cemome-bg-secondary) !important; }

/* Border colors */
.border-cemome-primary { border-color: var(--cemome-primary) !important; }
.border-cemome-secondary { border-color: var(--cemome-secondary) !important; }