/*
Theme Name: Hermits Child Theme
Theme URI: https://hermits.fr
Description: Thème enfant pour Divi 5
Author: Hermits
Author URI: https://hermits.fr
Template: Divi
Version: 1.0.0
*/
/* ===== NAVBAR RESPONSIVE ===== */
.ma-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  transition: transform 0.3s ease;
}

.ma-navbar.hide {
  transform: translateY(-100%);
}

/* ===== THÈMES COULEURS ===== */
/* Thème sombre (par défaut) - MENU uniquement */
.ma-navbar .et_pb_menu__menu a,
.ma-navbar .mobile_menu_bar,
.ma-navbar .mobile_menu_bar::before,
.ma-navbar .mobile_menu_bar::after {
  color: white !important;
  border-color: white !important;
  transition: all 0.3s ease;
}

/* Thème clair - MENU uniquement */
.ma-navbar.light-bg .et_pb_menu__menu a,
.ma-navbar.light-bg .mobile_menu_bar,
.ma-navbar.light-bg .mobile_menu_bar::before,
.ma-navbar.light-bg .mobile_menu_bar::after {
  color: #0c1e66 !important;
  border-color: #0c1e66 !important;
}

/* BOUTON CONTACT - Toujours blanc */
.ma-navbar .et_pb_button_0_tb_header {
  color: white !important;
}

.ma-navbar.light-bg .et_pb_button_0_tb_header {
  color: white !important; /* Force le blanc même en mode clair */
}

/* ===== LOGO ADAPTATIF ===== */
.ma-navbar .et_pb_image_0_tb_header {
  position: relative;
}

.ma-navbar .et_pb_image_0_tb_header img {
  transition: opacity 0.3s ease;
}

/* Logo bleu en overlay */
.ma-navbar .et_pb_image_0_tb_header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0c1e66;
  mask: url('https://www.amipi.fr/wp-content/uploads/2025/07/Logo-Amipi-industrie-blanc-pad-top.svg') no-repeat center/contain;
  -webkit-mask: url('https://www.amipi.fr/wp-content/uploads/2025/07/Logo-Amipi-industrie-blanc-pad-top.svg') no-repeat center/contain;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.ma-navbar.light-bg .et_pb_image_0_tb_header::after {
  opacity: 1;
}

.ma-navbar.light-bg .et_pb_image_0_tb_header img {
  opacity: 0;
}

/* ===== AJUSTEMENTS WORDPRESS ===== */
/* Ajustement pour la barre d'admin WordPress */
body.admin-bar .ma-navbar {
  top: 32px; /* Hauteur de l'admin bar sur desktop */
}

/* Sur mobile/tablet, l'admin bar a une hauteur différente */
@media screen and (max-width: 782px) {
  body.admin-bar .ma-navbar {
    top: 46px; /* Hauteur de l'admin bar sur mobile */
  }
}

/* Compenser le décalage du contenu */
body.admin-bar {
  padding-top: 0; /* Enlève le padding automatique de WP si nécessaire */
}

/* Si ton contenu est poussé vers le bas, ajoute ceci */
body.admin-bar .et-l--body {
  margin-top: 0 !important;
}

/* ===== CACHER CONTACT DANS LE MENU ===== */
@media (min-width: 981px) {
  li.et_pb_menu_page_id-2.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1483 {
    display: none !important; /* Using !important to ensure it overrides other styles */
  }
}

/* ===== STYLE DE LA CATÉGORIE ACTIVE ===== */

/* Style par défaut pour tous les liens à l'intérieur des divs category-link */
.category-link a {
    transition: all 0.3s ease;
    text-decoration: none;
    padding: 10px 16px;
    display: inline-block;
    color: #0c1e66;
    font-weight: 500;
    border-radius: 25px;
    background-color: transparent;
    margin-right: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Effet au survol pour les liens non actifs */
.category-link a:hover {
    background-color: #f8f9fa;
    color: #FF7A59;
    transform: translateY(-1px);
}

/* Style pour le lien du div actif - FOND ORANGE ARRONDI */
.category-link.active a {
    background-color: #FF7A59 !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 122, 89, 0.3);
}

/* Effet au survol pour le lien actif (plus subtil) */
.category-link.active a:hover {
    background-color: #e65a3a !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 122, 89, 0.4);
}

/* Styles responsives pour mobile */
@media (max-width: 768px) {
    .category-link a {
        padding: 8px 12px;
        margin-right: 4px;
        margin-bottom: 6px;
        font-size: 13px;
        border-radius: 20px;
    }
    
    /* Conteneur flex pour une meilleure disposition sur mobile */
    .et_pb_group_0_tb_body {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
    }
    
    .category-link {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
}

/* Styles pour très petits écrans */
@media (max-width: 480px) {
    .category-link a {
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 18px;
        margin-right: 3px;
        margin-bottom: 5px;
    }
    
    /* Forcer le retour à la ligne pour "Insertion et inclusion" */
    .category-link a[href*="Insertion-et-inclusion"] {
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }
}

.et_mobile_menu li a {
    padding: 8px 5%;
}


/*
** Décalage pour les articles et les 3 pages spécifiques
*/

/* Cible tous les articles, et les pages avec les ID 1873, 3, et 1862 */
body.single-post #et-main-area,
body.page-id-1873 #et-main-area,
body.page-id-3 #et-main-area,
body.page-id-1862 #et-main-area
{
  padding-top: 120px !important;
}

/* Ajustement tablettes et mobiles pour les mêmes pages */
@media (max-width: 980px) {
  body.single-post #et-main-area,
  body.page-id-1873 #et-main-area,
  body.page-id-3 #et-main-area,
  body.page-id-1862 #et-main-area
  {
    padding-top: 80px !important;
  }
}



/* ========================================
   VARIABLES CSS POUR LA TYPOGRAPHIE
   ======================================== */

:root {
  /* Variables pour les titres */
  --font-h1: clamp(1.75rem, 3.5vw, 2.5rem);
  --font-h2: clamp(1.5rem, 3vw, 2.25rem);
  --font-h3: clamp(1.375rem, 2.5vw, 2rem);
  --font-h4: clamp(1.125rem, 2vw, 1.75rem);
  --font-h5: clamp(1rem, 1.3vw, 1.125rem);
  --font-h6: clamp(0.875rem, 1.1vw, 0.938rem);
  --font-tagline: clamp(1rem, 1.5vw, 1rem);

  /* Variables pour les textes */
  --font-text-lg: clamp(1.25rem, 2vw, 1.5rem);
  --font-text-md: clamp(1.125rem, 1.5vw, 1.25rem);
  --font-text: clamp(1rem, 1.2vw, 1.125rem);
  --font-text-sm: clamp(0.875rem, 1vw, 1rem);
  --font-text-xs: clamp(0.75rem, 0.9vw, 0.875rem);
  --font-text-tiny: clamp(0.688rem, 0.8vw, 0.75rem);
}

/* ========================================
   STYLES POUR LES TITRES GUTENBERG UNIQUEMENT
   ======================================== */

/* Titres dans les blocs Gutenberg uniquement */
.wp-block-heading h1 {
  font-size: var(--font-h1) !important;
  line-height: 1.2 !important;
}

.wp-block-heading h2 {
  font-size: var(--font-h2) !important;
  line-height: 1.2 !important;
}

.wp-block-heading h3 {
  font-size: var(--font-h3) !important;
  line-height: 1.1 !important;
}

.wp-block-heading h4 {
  font-size: var(--font-h4) !important;
  line-height: 1.1 !important;
}

.wp-block-heading h5 {
  font-size: var(--font-h5) !important;
  line-height: 1.1 !important;
}

.wp-block-heading h6 {
  font-size: var(--font-h6) !important;
  line-height: 1.1 !important;
}

/* Titres dans le contenu des articles/pages (mais pas dans les modules Divi) */
.entry-content > h1:not([class*="et_pb"]),
.post-content > h1:not([class*="et_pb"]) {
  font-size: var(--font-h1) !important;
  line-height: 1.2 !important;
}

.entry-content > h2:not([class*="et_pb"]),
.post-content > h2:not([class*="et_pb"]) {
  font-size: var(--font-h2) !important;
  line-height: 1.2 !important;
}

.entry-content > h3:not([class*="et_pb"]),
.post-content > h3:not([class*="et_pb"]) {
  font-size: var(--font-h3) !important;
  line-height: 1.1 !important;
}

.entry-content > h4:not([class*="et_pb"]),
.post-content > h4:not([class*="et_pb"]) {
  font-size: var(--font-h4) !important;
  line-height: 1.1 !important;
}

.entry-content > h5:not([class*="et_pb"]),
.post-content > h5:not([class*="et_pb"]) {
  font-size: var(--font-h5) !important;
  line-height: 1.1 !important;
}

.entry-content > h6:not([class*="et_pb"]),
.post-content > h6:not([class*="et_pb"]) {
  font-size: var(--font-h6) !important;
  line-height: 1.1 !important;
}

/* ========================================
   STYLES POUR LES PARAGRAPHES GUTENBERG UNIQUEMENT
   ======================================== */

/* Paragraphes Gutenberg uniquement */
.wp-block-paragraph {
  font-size: var(--font-text) !important;
  line-height: 1.5 !important;
}

/* Paragraphes dans le contenu (mais pas dans les modules Divi) */
.entry-content > p:not([class*="et_pb"]),
.post-content > p:not([class*="et_pb"]) {
  font-size: var(--font-text) !important;
  line-height: 1.5 !important;
}

/* Classes pour les différentes tailles de texte */
.wp-block-paragraph.has-large-font-size,
.entry-content .has-large-font-size {
  font-size: var(--font-text-lg) !important;
  line-height: 1.5 !important;
}

.wp-block-paragraph.has-medium-font-size,
.entry-content .has-medium-font-size {
  font-size: var(--font-text-md) !important;
  line-height: 1.5 !important;
}

.wp-block-paragraph.has-small-font-size,
.entry-content .has-small-font-size {
  font-size: var(--font-text-sm) !important;
  line-height: 1.5 !important;
}

.wp-block-paragraph.has-x-small-font-size,
.entry-content .has-x-small-font-size {
  font-size: var(--font-text-xs) !important;
  line-height: 1.5 !important;
}

/* ========================================
   STYLES POUR LES LISTES GUTENBERG UNIQUEMENT
   ======================================== */

.wp-block-list {
  font-size: var(--font-text) !important;
  line-height: 1.5 !important;
}

.entry-content > ul:not([class*="et_pb"]),
.entry-content > ol:not([class*="et_pb"]),
.post-content > ul:not([class*="et_pb"]),
.post-content > ol:not([class*="et_pb"]) {
  font-size: var(--font-text) !important;
  line-height: 1.5 !important;
}

.wp-block-list li {
  font-size: inherit !important;
  line-height: inherit !important;
}

.entry-content > ul:not([class*="et_pb"]) li,
.entry-content > ol:not([class*="et_pb"]) li,
.post-content > ul:not([class*="et_pb"]) li,
.post-content > ol:not([class*="et_pb"]) li {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* ========================================
   STYLES POUR LES CITATIONS GUTENBERG UNIQUEMENT
   ======================================== */

.wp-block-quote,
.wp-block-pullquote {
  font-size: var(--font-text-lg) !important;
  line-height: 1.5 !important;
}

.entry-content > blockquote:not([class*="et_pb"]),
.post-content > blockquote:not([class*="et_pb"]) {
  font-size: var(--font-text-lg) !important;
  line-height: 1.5 !important;
}

.wp-block-quote p,
.wp-block-pullquote p {
  font-size: inherit !important;
  line-height: inherit !important;
}

.entry-content > blockquote:not([class*="et_pb"]) p,
.post-content > blockquote:not([class*="et_pb"]) p {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* ========================================
   STYLES POUR LES AUTRES BLOCS GUTENBERG UNIQUEMENT
   ======================================== */

/* Blocs de code Gutenberg */
.wp-block-code {
  font-size: var(--font-text-sm) !important;
  line-height: 1.5 !important;
}

.entry-content > code:not([class*="et_pb"]),
.post-content > code:not([class*="et_pb"]) {
  font-size: var(--font-text-sm) !important;
  line-height: 1.5 !important;
}

/* Blocs de préformatage Gutenberg */
.wp-block-preformatted {
  font-size: var(--font-text-sm) !important;
  line-height: 1.5 !important;
}

.entry-content > pre:not([class*="et_pb"]),
.post-content > pre:not([class*="et_pb"]) {
  font-size: var(--font-text-sm) !important;
  line-height: 1.5 !important;
}

/* Blocs de vers Gutenberg */
.wp-block-verse {
  font-size: var(--font-text) !important;
  line-height: 1.5 !important;
}

/* Tableaux Gutenberg */
.wp-block-table {
  font-size: var(--font-text) !important;
}

.entry-content > table:not([class*="et_pb"]),
.post-content > table:not([class*="et_pb"]) {
  font-size: var(--font-text) !important;
}

.wp-block-table td,
.wp-block-table th {
  font-size: inherit !important;
  line-height: 1.5 !important;
}

.entry-content > table:not([class*="et_pb"]) td,
.entry-content > table:not([class*="et_pb"]) th,
.post-content > table:not([class*="et_pb"]) td,
.post-content > table:not([class*="et_pb"]) th {
  font-size: inherit !important;
  line-height: 1.5 !important;
}

/* ========================================
   STYLES POUR LES CLASSES PERSONNALISÉES
   ======================================== */

/* Classes pour tagline/sous-titres */
.tagline,
.subtitle,
.wp-block-paragraph.is-style-tagline {
  font-size: var(--font-tagline) !important;
  line-height: 1.5 !important;
}

/* Classes pour texte tiny */
.tiny-text,
.wp-block-paragraph.is-style-tiny {
  font-size: var(--font-text-tiny) !important;
  line-height: 1.5 !important;
}

/* ========================================
   RESPONSIVE ET OVERRIDE SPÉCIFIQUES GUTENBERG
   ======================================== */

/* Assurer que les styles s'appliquent dans l'éditeur Gutenberg */
.block-editor-block-list__layout .wp-block-heading h1,
.block-editor-block-list__layout .wp-block-heading h2,
.block-editor-block-list__layout .wp-block-heading h3,
.block-editor-block-list__layout .wp-block-heading h4,
.block-editor-block-list__layout .wp-block-heading h5,
.block-editor-block-list__layout .wp-block-heading h6 {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Styles spécifiques pour les articles (single post) - Gutenberg uniquement */
.single-post .entry-content .wp-block-heading h1 { font-size: var(--font-h1) !important; line-height: 1.2 !important; }
.single-post .entry-content .wp-block-heading h2 { font-size: var(--font-h2) !important; line-height: 1.2 !important; }
.single-post .entry-content .wp-block-heading h3 { font-size: var(--font-h3) !important; line-height: 1.1 !important; }
.single-post .entry-content .wp-block-heading h4 { font-size: var(--font-h4) !important; line-height: 1.1 !important; }
.single-post .entry-content .wp-block-heading h5 { font-size: var(--font-h5) !important; line-height: 1.1 !important; }
.single-post .entry-content .wp-block-heading h6 { font-size: var(--font-h6) !important; line-height: 1.1 !important; }
.single-post .entry-content .wp-block-paragraph { font-size: var(--font-text) !important; line-height: 1.5 !important; }

/* Styles spécifiques pour les pages - Gutenberg uniquement */
.page .entry-content .wp-block-heading h1 { font-size: var(--font-h1) !important; line-height: 1.2 !important; }
.page .entry-content .wp-block-heading h2 { font-size: var(--font-h2) !important; line-height: 1.2 !important; }
.page .entry-content .wp-block-heading h3 { font-size: var(--font-h3) !important; line-height: 1.1 !important; }
.page .entry-content .wp-block-heading h4 { font-size: var(--font-h4) !important; line-height: 1.1 !important; }
.page .entry-content .wp-block-heading h5 { font-size: var(--font-h5) !important; line-height: 1.1 !important; }
.page .entry-content .wp-block-heading h6 { font-size: var(--font-h6) !important; line-height: 1.1 !important; }
.page .entry-content .wp-block-paragraph { font-size: var(--font-text) !important; line-height: 1.5 !important; }