/* app/css/config.css */

:root {
  /* =========================
     PALETTE PRINCIPALE
     ========================= */
  --color2: rgb(36, 150, 245);
  --color1: rgb(236, 33, 136);
  --color3: rgb(244, 228, 11);
  --color4: #e5521d;
  --color5: #d2fc15;
  --color6: #1564b3;

  /* =========================
     TEXTES ET FONDS
     ========================= */
  --color_text: #333333;
  --color_bg: #ffffff;
  --color_bg_alt: #f7f7f7;

  /* =========================
     SHADOWS
     ========================= */
  --shadow_small: 0 2px 4px rgba(0,0,0,0.08);
  --shadow_medium: 0 4px 8px rgba(0,0,0,0.15);
  --shadow_large: 0 8px 16px rgba(0,0,0,0.25);

  /* =========================
     HOVER GENERIQUE - PARAMETRES
     ========================= */
   --hover-transition: 0.2s ease;
   --hover-lift-y: 0px;
   --hover-shadow: var(--shadow_medium);
  /* =========================
     BOUTONS - COULEURS
     ========================= */
  --btn-annuler-bg: whitesmoke;
  --btn-annuler-color: black;
  --btn-valider-bg: var(--color3);
  --btn-valider-color: #ffffff;
  --btn-enregistrer-bg: var(--color1);
  --btn-enregistrer-color: #ffffff;
  --btn-supprimer-bg: var(--color4);
  --btn-supprimer-color: #ffffff;

  /* =========================
     BOUTONS - PARAMÈTRES
     ========================= */
  --btn-padding-y: 8px;
  --btn-padding-x: 14px;
  --btn-font-size: 14px;
  --btn-font-weight: normal;
  --btn-text-transform: uppercase;
  --btn-border-width: 1px;
  --btn-border: transparent;
  --btn-border-radius: 4px;
  --btn-shadow: var(--shadow_medium);
  --btn-transition: all 0.2s ease-in-out;
  --btn-hover-opacity: 0.9;
  --btn-hover-border: lightgray;
  --btn-hover-shadow: var(--shadow_large);
  --btn-icon-display: block;

  /* =========================
     TABLES - PARAMÈTRES
     ========================= */
  --table-font-size: 12px;
  --table-cell-padding: 0.5rem 0.5rem;
  --bg_tr_thead: var(--color1);
  --color_tr_thead: white;
  --bg_tr_odd: #fff;
  --bg_tr_even: whitesmoke;
  --bg_tr_hover: lightgrey;

  /* =========================
     ONGLETS - PARAMÈTRES
     ========================= */
  --bg_onglet: #e4e4e4;
  --color_onglet: #444343;
  --bg_onglet_hover: #e9f3ff;
  --color_onglet_hover: #000000;
  --bg_onglet_active: var(--color1);
  --color_onglet_active: #fff;

  /* =========================
     HEADER PAGE - PARAMÈTRES
     ========================= */
  --header-page-bg: white;
  --header-page-padding: 10px;  /* Padding de .entete_page */
  --header-page-margin: 0px;   /* Margin de .entete_page */
  --header-title-font-size: 20px;
  --header-title-width: calc(100% - 10px);
  --header-title-padding: 0px 10px;
  --header-title-margin-top: 0px;  /* Margin-top de .titre_page */
  --header-title-color: var(--color1);
  --header-subtitle-font-size: 15px;
  --header-subtitle-padding: 5px 10px;
  --header-subtitle-margin: 0 0 0 0;
  --header-subtitle-color: var(--color1);

    /* =========================
     TRANSIENT STATE - PARAMÈTRES :  différenciation visuelle de champs
     ========================= */
     --transient-border-left: 3px solid #2196f3;
     --transient-color: #2196f3;
     --transient-font-weight: 600;

  /* =============================================
      EMPTY STATES : MSG AUCUN RESULTAT 
   ======================================== */

   --empty-state-padding: 60px 20px;
   --empty-state-min-height: 200px;
   --empty-state-font-size: 1.1em;
   --empty-state-color: var(--COLOR4);
   --empty-state-msg-default: "Aucun contenu disponible";
   --empty-state-msg-no-results: "Aucun résultat trouvé";
   --empty-state-msg-entity-not-found: "Élément introuvable";

  /* =========================
     LOGO ALERT - PARAMÈTRES
     ========================= */
  --logo-alert-display: block;

  /* =========================
     ALERT - PARAMÈTRES
     ========================= */
     --alert-popup-z-index: 1001;
     --alert-popup-top: 30%;
     --alert-popup-left: 50%;
     --alert-popup-transform-x: -50%;
     --alert-popup-padding: 20px;
     --alert-popup-min-width: 300px;
     --alert-popup-max-width: 400px;
     --alert-popup-border-radius: 10px;
     --alert-popup-bg: white;
     --alert-container-z-index: 10000;
     --alert-container-left: -100px;
     --alert-container-top: -100px;
     --alert-container-max-width: 0px;
     --alert-container-max-height: 0px;
     --alert-logo-max-width: 40px;
     --alert-logo-max-height: 40px;
     --alert-logo-margin: 0 0 15px 0;
     --alert-popup-mobile-left: 0%;
     --alert-popup-mobile-transform-x: 1%;
     --alert-popup-mobile-width: 98%;
     --alert-logo-mobile-margin: 0;
     
   /* =========================
      BUBBLE - PARAMÈTRES
      ========================= */
      --bubble-content-bg: #ffffff;
      --bubble-content-shadow: var(--shadow_medium);
      --bubble-content-radius: 8px;
      --bubble-content-padding: 20px;
      --bubble-content-min-width: 280px;
      --bubble-content-max-width: 400px;
      --bubble-content-min-height: 150px;
      --bubble-content-max-height: 600px;
      --bubble-title-font-size: 1rem;
      --bubble-title-font-weight: normal;
      --bubble-title-margin-bottom: 0rem;
      --bubble-title-color: var(--color1);
      --bubble-title-text-transform: uppercase;


     /* =========================
        POPUP - REPEAT EVENT
        ========================= */        
      --repeat-popup-z-index: 1001;
      --repeat-popup-top: 10vh;
      --repeat-popup-left: 50%;
      --repeat-popup-transform-x: -50%;
      --repeat-popup-padding: 20px;
      --repeat-popup-min-width: 300px;
      --repeat-popup-max-width: 500px;
      --repeat-popup-border-radius: 10px;
      --repeat-popup-bg: white;
      --repeat-bg-z-index: 1000;
      --repeat-bg-opacity: 0.4;
      
      

  /* =========================
     RÉPÉTITION ÉVÉNEMENT - PARAMÈTRES
     ========================= */
     --repeat-week-day-padding: 5px 10px;
     --repeat-week-day-border-radius: 20px;
     --repeat-week-day-border: 1px solid var(--form-input-border, #ddd);
     --repeat-week-day-bg: var(--color_bg, #fff);
     --repeat-week-day-color: var(--color_text, #333);
     --repeat-week-day-gap: 8px;
     --repeat-week-day-font-size: 12px;
     --repeat-week-day-selected-bg: whitesmoke;
     --repeat-week-day-selected-color: black;
     --repeat-week-day-selected-border: 1px solid #404547; /* #404547 : BLACK_light */
     --repeat-week-day-hover-border: 1px solid var(--color1, #2abbca);
     --repeat-week-day-hover-bg: rgba(42, 187, 202, 0.1);
     --repeat-week-day-transition: all 0.2s;

     /* =========================
        POPUP - PARAMÈTRES
        ========================= */
     --popup-container-z-index: 2000;
     --popup-container-top: 0;
     --popup-container-left: 0;
     --popup-container-width: 100%;
     --popup-container-min-height: 100%;
     --popup-container-max-height: 100%;
     --popup-container-bg: white;
     --popup-container-transition: width 0.15s ease;
     --popup-oauth-z-index: 2000;
     --popup-oauth-top: 0;
     --popup-oauth-left: 0;
     --popup-oauth-width: 100%;
     --popup-oauth-min-height: 100%;
     --popup-oauth-max-height: 100%;
     --popup-oauth-bg: whitesmoke;
     --popup-oauth-transition: width 0.15s ease;
     
     /* =========================
        LAYOUT - PARAMÈTRES
        ========================= */
     --layout-menu-bg: #fff;
     --layout-container-bg: #fff;

   /* =========================
      MENU MOBILE - PARAMÈTRES
      ========================= */
   --menu-mobile-btn-gap: 25px;

   --menu-mobile-burger-color: #fff;
   --menu-mobile-burger-font-size: 2rem;
   --menu-mobile-burger-margin-right: 20px;

   --menu-mobile-bg: var(--color1);

   --menu-mobile-link-font-size: 1.5rem;
   --menu-mobile-link-color: #fff;
   --menu-mobile-link-padding: 10px 20px;
   --menu-mobile-links-gap: 1.5rem;

   --menu-mobile-close-top: 20px;
   --menu-mobile-close-right: 20px;
   --menu-mobile-close-font-size: 2rem;
   --menu-mobile-close-color: #fff;

   --menu-mobile-side-bg: #fff;
   --menu-mobile-side-padding: 60px 20px 20px;
   
   --menu-mobile-side-close-top: 20px;
   --menu-mobile-side-close-right: 20px;
   --menu-mobile-side-close-font-size: 2rem;
   --menu-mobile-side-close-color: grey;

     /* =========================
       FOOTER - PARAMETRES
        ========================= */
        --footer-padding: 1rem 1.5rem;
        --footer-font-size: 0.875rem;
        --footer-color: #666;
        --footer-border: #eee;
        --footer-bg: #fafafa;

     /* =========================
        ONGLETS - PARAMÈTRES (mécanique)
        ========================= */
     --onglet-transition: all 0.2s ease-in-out;
     --onglet-width: calc(100% - 4px);
     --onglet-margin: 2px 2px 0 2px;
     --onglet-close-transition: all 0.05s ease-in-out;
     --onglet-close-margin: 7px 0 0 0;
     --onglet-title-reduct-margin: 10px 0;
     --onglet-title-reduct-width: calc(100% - 0px);
     --onglet-title-full-margin: 10px 0 10px 5px;
     --onglet-title-full-width: calc(100% - 40px);
     
     /* =========================
        BOUTONS - PARAMÈTRES (mécanique)
        ========================= */
     --btn-base-transition: all 0.2s ease-in-out;
     --btn-base-margin-left: 10px;
     --btn-base-margin-right: 10px;
     --btn-base-margin-bottom: 2px;
     --btn-disabled-opacity: 0.6;
     
       /* =========================
     TITLE TOOLTIP - PARAMÈTRES
     ========================= */
      --tooltip-bg: grey;
      --tooltip-color: white;
      --tooltip-padding: 6px 10px;
      --tooltip-border-radius: 6px;
      --tooltip-font-size: 0.8rem;
      --tooltip-z-index: 1000001;
      --tooltip-shadow: 0 2px 6px rgba(0,0,0,.25);

     /* =========================
        ICÔNES - PARAMÈTRES
        ========================= */
     --icon-hover-opacity: 0.5;
     --icon-close-margin: 15px;
     --icon-close-color: grey;
     
     /* =========================
        GALLERY - PARAMÈTRES
        ========================= */
     --gallery-container-gap: 10px;
     --gallery-container-padding: 10px;
     --gallery-card-bg: white;
     --gallery-card-padding: 15px;
     --gallery-card-border-radius: 0px;
     --gallery-card-border: 1px solid transparent;
     --gallery-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     --gallery-card-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     --gallery-card-hover-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
     --gallery-card-hover-transform: translateY(+3px) scale(1.02);
     --gallery-card-hover-border: 1px solid transparent;
     --gallery-card-header-margin-bottom: 15px;
     --gallery-card-header-padding-bottom: 10px;
     --gallery-card-header-border-bottom: 1px solid #e0e0e0;
     --gallery-card-img-padding-bottom: 100%;
     --gallery-card-img-border-radius: 4px;
     --gallery-card-img-margin-bottom: 10px;
     
   /* =========================
     CAROUSEL LINE - PARAMÈTRES
     ========================= */
      /* Conteneur nav */
      --scroll_nav_gap: 0.5rem;

      /* Bouton : zone cliquable (taille, états) */
      --scroll_nav_btn_size: 2.5rem;
      --scroll_nav_btn_disabled_opacity: 0;
      --scroll_nav_btn_transition_opacity: 0.25s;

      /* Icône : rendu visuel (taille, couleur) */
      --scroll_nav_btn_icon_size: 4rem;
      --scroll_nav_btn_icon_color: lightgrey;


     /* =========================
        API AGENDA OAUTH - PARAMÈTRES
        ========================= */
     --oauth-card-width: 40%;
     --oauth-card-margin-left: 30%;
     --oauth-platform-label-font-size: 1.2em;
     --oauth-platform-label-margin-left: 25px;
     --oauth-account-padding: 10px 0;
     --oauth-account-border-bottom: 1px solid #e0e0e0;
     --oauth-account-label-margin: -2px 0 0 15px;
     --oauth-edit-icon-width: 16px;
     --oauth-edit-icon-height: 16px;
     --oauth-edit-icon-margin: 0 10px 0 0;
     --oauth-edit-icon-color: grey;
     --oauth-input-label-width: calc(100% - 70px);
     --oauth-input-label-margin: -5px 0 0 15px;
     --oauth-card-mobile-width: 90%;
     --oauth-card-mobile-margin-left: 5%;
     
     /* =========================
        BOUTON AVEC ICÔNE - PARAMÈTRES
        ========================= */
     --btn-ic-gap: 6px;
     --btn-ic-padding: 6px 12px;
     --btn-ic-font-size: 14px;
     --btn-ic-icon-font-size: 16px;
     --btn-ic-mobile-padding: 2px 4px;

  /* =========================
     FORMULAIRES - PARAMÈTRES
     ========================= */
  
  /* Champs inputs */
  --form-input-padding-y: 8px;
  --form-input-padding-x: 12px;
  --form-input-font-size: 14px;
  --form-input-border-radius: 5px;
  --form-input-border-width: 1px;
  --form-input-border: #cccccc;
  --form-input-border-focus: var(--color1, #007bff);
  --form-input-bg: #ffffff;
  --form-input-bg-focus: #f0f8ff;
  --form-input-color: #333333;
  --form-input-shadow-focus: 0 2px 6px rgba(0,0,0,0.12);
  --form-input-transition: all 0.2s ease-in-out;
  
  /* Champs inputs floating */
  --form-input-floating-padding-top: 14px;
  --form-input-floating-padding-bottom: 14px;
  
  /* Input number */
  --form-input-number-max-width: 100px;
  
  /* Champs field */
  --form-field-margin-bottom: 10px;
  --form-field-floating-padding-top: 10px;
  
  /* Labels floating */
  --form-label-floating-left: 12px;
  --form-label-floating-top: 25px;
  --form-label-floating-color: #999;
  --form-label-floating-font-size: 14px;
  --form-label-floating-transition: all 0.2s ease-in-out;
  --form-label-floating-bg: transparent;
  --form-label-floating-border-radius: 3px;
  
  /* Labels floating actif */
  --form-label-floating-active-top: 6px;
  --form-label-floating-active-left: 8px;
  --form-label-floating-active-font-size: 12px;
  --form-label-floating-active-color: var(--form-input-border-focus);
  --form-label-floating-active-bg: var(--form-input-bg);
  --form-label-floating-active-padding: 0 4px;
  
  /* Labels standard (layout colonne) */
  --form-label-standard-min-width: 150px;
  --form-label-standard-font-size: 14px;
  --form-label-standard-color: var(--form-input-color);
  
  /* Labels stacked (layout ligne) */
  --form-label-stacked-font-size: 14px;
  --form-label-stacked-color: var(--form-input-color);
  --form-label-stacked-margin-bottom: 8px;
  --form-label-stacked-font-weight: 500;
  
  /* Layout standard */
  --form-layout-standard-gap: 15px;
  
  /* Sections */
  --form-section-margin: 30px 0 20px 0;
  --form-section-padding-bottom: 10px;
  --form-section-border-width: 2px;
  --form-section-border: var(--form-input-border);
  --form-section-title-font-size: 18px;
  --form-section-title-font-weight: bold;
  --form-section-title-color: var(--color1, #007bff);
  
  /* Groupes inline */
  --form-group-inline-gap: 10px;
  --form-group-inline-margin-bottom: 20px;
  --form-group-label-font-size: 14px;
  --form-group-label-font-weight: 500;
  --form-group-label-color: var(--form-input-color);
  --form-group-label-margin-right: 10px;
  --form-group-label-min-width: 120px;
  --form-group-fields-gap: 10px;
  --form-group-separator-color: #666;
  --form-group-separator-font-size: 14px;
  
  /* Groupes grid */
  --form-group-grid-gap: 15px;
  --form-group-grid-margin-bottom: 20px;
  --form-group-label-grid-font-size: 14px;
  --form-group-label-grid-font-weight: 500;
  --form-group-label-grid-color: var(--form-input-color);
  --form-group-label-grid-margin-bottom: 5px;
  
  /* Radio et checkbox */
  --form-radio-group-gap: 20px;
  --form-radio-item-gap: 8px;
  --form-checkbox-label-margin-left: 8px;

  /* Blocs formulaires */
  --form-block-margin-bottom: 10px;
  --form-block-header-margin-bottom: 10px;
  --form-block-title-font-size: 16px;
  --form-block-title-font-weight: 600;
  --form-block-title-color: var(--color1, #007bff);
  --form-block-content-transition: max-height 0.3s ease, opacity 0.2s ease;


  /* =========================
     NOTIFICATIONS - PARAMÈTRES
     ========================= */
  
  /* Conteneur */
  --notif-container-z-index: 9999;
  --notif-position-offset: 20px;
  
  /* Notification individuelle */
  --notif-padding: 12px 16px;
  --notif-border-radius: 4px;
  --notif-shadow: 0 4px 12px rgba(0,0,0,0.15);
  --notif-stack-spacing: 10px;
  --notif-min-width: 300px;
  --notif-max-width: 400px;
  --notif-font-size: 14px;
  --notif-content-gap: 12px;
  --notif-content-line-height: 1.4;
  
  /* Couleurs par type */
  --notif-success-bg: #4caf50;
  --notif-success-color: #ffffff;
  --notif-info-bg: #2196f3;
  --notif-info-color: #ffffff;
  --notif-warning-bg: #ff9800;
  --notif-warning-color: #ffffff;
  --notif-error-bg: #f44336;
  --notif-error-color: #ffffff;
  
  /* Animations */
  --notif-animation-duration: 300ms;
  --notif-animation-translate-y: 20px;
  
  /* Liens dans notifications */
  --notif-link-font-weight: bold;
  --notif-link-hover-opacity: 0.8;
  
  /* Bouton fermer */
  --notif-close-padding: 4px;
  --notif-close-opacity: 0.7;
  --notif-close-hover-opacity: 1;
  --notif-close-font-size: 18px;
  
  /* Icône */
  --notif-icon-font-size: 20px;
  
  /* Responsive mobile */
  --notif-mobile-max-width: calc(100% - 20px);
  --notif-mobile-left: 5px;
}