/* =====================================================================================
   GRAND CHAPITRE — Cnaturel — header.css (VERSION STICKY) — CLEAN
   Rôle : ne styliser QUE le header moderne (header.inc.php)
   Objectif : navigation fluide, compatible PC / mobile / tablette
   Sticky : header fixe au scroll + ombre au scroll (.scrolled)
   ===================================================================================== */


/* =====================================================================================
   CHAPITRE 0 — ACCESSIBILITÉ (texte masqué)
   ===================================================================================== */

.sr-only{                                        /* classe utilitaire pour masquer visuellement un texte tout en le gardant lisible par les lecteurs d’écran */
  position:absolute;                             /* sort le texte du flux normal */
  width:1px;                                     /* largeur minimale */
  height:1px;                                    /* hauteur minimale */
  padding:0;                                     /* aucun espace interne */
  margin:-1px;                                   /* décale légèrement hors zone visible */
  overflow:hidden;                               /* masque tout débordement */
  clip:rect(0,0,0,0);                            /* ancienne technique de masquage visuel accessible */
  white-space:nowrap;                            /* évite le retour à la ligne */
  border:0;                                      /* aucune bordure */
}


/* =====================================================================================
   CHAPITRE 1 — HEADER : CONTENEUR GLOBAL (STICKY)
   ===================================================================================== */

.site-header{                                    /* conteneur principal du header */
  position: fixed;                               /* header fixé en haut de la fenêtre */
  top: 0;                                        /* collé en haut */
  left: 0;                                       /* collé à gauche */
  right: 0;                                      /* collé à droite */
  z-index: 1000;                                 /* passe au-dessus du contenu */

  background: rgba(255,255,255,.80);             /* fond blanc + transparent */
  border-bottom: 1px solid #eee;                 /* filet discret en bas */
  padding: 6px 0;                                /* hauteur verticale du header */

  transition: box-shadow 0.3s ease;              /* ombre douce au scroll */
}

.site-header.scrolled{                           /* état activé quand la page a été scrollée */
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);       /* ombre légère pour détacher le header */
}

/* IMPORTANT : Compenser l'espace du header fixe */
body{                                            /* corps de page global */
  padding-top: 66px;                             /* réserve la place du header fixe pour éviter que le contenu passe dessous */
}


/* =====================================================================================
   CHAPITRE 2 — HEADER : GRILLE INTERNE (logo + signature + burger + nav)
   NOTE : votre HTML contient 4 éléments dans .header-inner
   ===================================================================================== */

.header-inner{                                   /* structure interne du header */
  max-width: 1200px;                             /* largeur maximale cohérente avec le site */
  margin: 0 auto;                                /* centrage horizontal */
  padding: 0 12px;                               /* marge intérieure latérale */

  display: grid;                                 /* mise en page en grille */
  grid-template-columns: auto 1fr auto auto;     /* colonnes : logo | signature | burger | nav */
  align-items: center;                           /* alignement vertical centré */
  column-gap: 12px;                              /* espacement horizontal entre colonnes */
}


/* =====================================================================================
   CHAPITRE 3 — LOGO / MARQUE
   ===================================================================================== */

.brand{                                          /* lien englobant le logo */
  display: inline-flex;                          /* affichage souple inline */
  align-items: center;                           /* centrage vertical du logo */
  text-decoration: none;                         /* pas de soulignement */
  justify-self: start;                           /* aligné au début de sa cellule */
}

.brand-logo{                                     /* image/logo */
  height: 54px;                                  /* hauteur du logo */
  width: auto;                                   /* largeur auto pour conserver les proportions */
  display: block;                                /* évite l’espace sous image inline */
}


/* =====================================================================================
   CHAPITRE 4 — SIGNATURE CENTRALE
   ===================================================================================== */

.header-signature{                               /* signature manuscrite au centre */
  justify-self: center;                          /* centrée dans sa cellule */
  font-family: 'Allura', cursive;                /* police manuscrite */
  font-size: 2rem;                               /* taille visuelle soutenue */
  letter-spacing: 0.5px;                         /* légère aération */
  color: rgba(46,46,46,.92);                     /* couleur douce mais lisible */
  opacity: 0.9;                                  /* très légère atténuation */
  transform: rotate(-1.5deg);                    /* petite inclinaison vivante */
  white-space: nowrap;                           /* empêche le retour à la ligne */
  pointer-events: none;                          /* non interactif */
  user-select: none;                             /* non sélectionnable */
}


/* =====================================================================================
   CHAPITRE 5 — BOUTON BURGER
   ===================================================================================== */

.nav-toggle{                                     /* bouton burger mobile */
  display: none;                                 /* caché en desktop */
  align-items: center;                           /* centre verticalement l’icône */
  justify-content: center;                       /* centre horizontalement l’icône */
  justify-self: end;                             /* aligné à droite dans la grille */

  padding: 10px 12px;                            /* zone cliquable confortable */
  border: 1px solid #e6e6e6;                     /* bord discret */
  background: #fff;                              /* fond blanc */
  border-radius: 10px;                           /* angles arrondis */
  cursor: pointer;                               /* curseur interactif */
  line-height: 1;                                /* évite les décalages verticaux */
}

.nav-toggle:focus{                               /* focus standard */
  outline: none;                                 /* on retire l’outline brut du navigateur */
}

.nav-toggle:focus-visible{                       /* focus clavier visible */
  box-shadow: 0 0 0 3px rgba(0,0,0,.10);         /* halo discret */
}

.nav-toggle-icon{                                /* icône burger */
  font-size: 22px;                               /* taille de l’icône */
}


/* =====================================================================================
   CHAPITRE 6 — NAV PRINCIPALE (DESKTOP)
   ===================================================================================== */

.site-nav{                                       /* bloc de navigation principal */
  position: relative;                            /* base de positionnement pour dropdowns */
  z-index: 1001;                                 /* légèrement au-dessus du header */
  justify-self: end;                             /* poussé à droite */
}

.nav-list{                                       /* liste racine du menu */
  margin: 0;                                     /* annule marge ul */
  padding: 0;                                    /* annule padding ul */
  list-style: none;                              /* supprime les puces */

  display: flex;                                 /* menu horizontal */
  align-items: center;                           /* centrage vertical */
  gap: 14px;                                     /* espace entre éléments */
}

.site-nav a{                                     /* base commune de tous les liens du menu */
  display: block;                                /* surface de clic cohérente */
  padding: 10px 6px;                             /* respiration du lien */
  font-family: var(--font, Arial, sans-serif);   /* police du site */
  font-weight: 500;                              /* graisse standard */
  line-height: 1.1;                              /* interligne compact */
  color: var(--ink, #2e2e2e);                    /* couleur du texte */
  text-decoration: none;                         /* pas de soulignement natif */
}

.nav-item{                                       /* conteneur lien + caret pour les items avec sous-menu */
  display: flex;                                 /* aligne lien et caret */
  align-items: center;                           /* centrage vertical */
  gap: 6px;                                      /* espace entre texte et caret */
}

/* -------------------------------------------------------------------------------------
   MENU DESKTOP — TRAIT ANIMÉ SOUS LE TEXTE
   Principe :
   - petit trait au repos
   - au hover/focus : le trait s’étend à 100% de la largeur du texte
   - appliqué uniquement aux liens principaux desktop
   ------------------------------------------------------------------------------------- */

@media (min-width: 1025px){                      /* effet réservé au desktop */

  .nav-list > li > a,                            /* cible les liens directs du menu principal */
  .nav-list > li > .nav-item > a{                /* cible les liens du menu principal quand il y a un sous-menu */
    position: relative;                          /* base pour le pseudo-élément ::after */
  }

  .nav-list > li > a::after,                     /* trait animé pour les liens directs */
  .nav-list > li > .nav-item > a::after{         /* trait animé pour les liens avec sous-menu */
    content: "";                                 /* pseudo-élément décoratif */
    position: absolute;                          /* positionné par rapport au lien */
    left: 6px;                                   /* aligné avec le début visuel du texte (compense le padding horizontal du lien) */
    bottom: 4px;                                 /* légèrement au-dessus du bas du lien */
    width: 18px;                                 /* petit trait au repos */
    height: 3px;                                 /* même épaisseur que dans vos bulles */
    background: #cfcfcf;                         /* même gris doux que les bulles */
    border-radius: 2px;                          /* extrémités adoucies */
    opacity: .92;                                /* légère douceur visuelle */
    transition: width .32s ease, background .32s ease, opacity .32s ease; /* animation douce */
  }

  .nav-list > li > a:hover::after,               /* hover sur lien direct */
  .nav-list > li > a:focus-visible::after,       /* focus clavier sur lien direct */
  .nav-list > li:hover > .nav-item > a::after,   /* hover sur item avec sous-menu : le trait reste sous le texte */
  .nav-list > li > .nav-item > a:focus-visible::after, /* focus clavier sur lien avec sous-menu */
  .nav-list > li.has-sub:focus-within > .nav-item > a::after{ /* focus dans le sous-menu garde le trait étendu */
    width: calc(100% - 12px);                    /* couvre toute la largeur utile du texte (largeur totale moins les paddings gauche/droite de 6px) */
    background: #b9b2a7;                         /* légère mise en avant au survol */
    opacity: 1;                                  /* visibilité maximale */
  }
}

/* caret bouton (mobile + desktop “sympa”) */
.sub-toggle{                                     /* bouton du caret pour ouvrir/indiquer un sous-menu */
  border: 0;                                     /* pas de bord */
  background: transparent;                       /* fond transparent */
  padding: 8px 6px;                              /* zone de clic confortable */
  cursor: pointer;                               /* curseur interactif */
  line-height: 1;                                /* évite les décalages */

  display: inline-flex;                          /* visible et bien centré */
  align-items: center;                           /* centrage vertical */
  justify-content: center;                       /* centrage horizontal */

  border-radius: 10px;                           /* angles arrondis */
  transition: background .15s ease, transform .15s ease; /* animation douce */
}

.sub-toggle:focus{                               /* focus standard */
  outline: none;                                 /* retire l’outline natif */
}

.sub-toggle:focus-visible{                       /* focus clavier visible */
  box-shadow: 0 0 0 3px rgba(0,0,0,.10);         /* halo léger */
}

.sub-toggle:hover{                               /* survol du caret */
  background: rgba(0,0,0,.04);                   /* léger fond gris */
}

.sub-toggle-icon{                                /* icône du caret */
  font-size: 14px;                               /* taille discrète */
  display: inline-block;                         /* permet transform */
  opacity: .7;                                   /* un peu atténué au repos */
  transition: transform .18s ease, opacity .18s ease; /* animation fluide */
}


/* =====================================================================================
   CHAPITRE 7 — SOUS-MENUS (DROPDOWNS DESKTOP)
   ===================================================================================== */

.has-sub{                                        /* item possédant un sous-menu */
  position: relative;                            /* base de positionnement du dropdown */
}

/* Zone tampon anti “perte du hover” */
.has-sub::after{                                 /* zone invisible entre item et dropdown */
  content: "";                                   /* pseudo-élément vide */
  position: absolute;                            /* positionné sous l’item */
  left: 0;                                       /* commence à gauche de l’item */
  top: 100%;                                     /* juste sous l’item */
  width: 100%;                                   /* prend toute la largeur */
  height: 14px;                                  /* petite hauteur tampon */
}

/* Rotation caret quand ouvert (hover/focus) */
.has-sub:hover .sub-toggle-icon,                 /* caret tourné au survol */
.has-sub:focus-within .sub-toggle-icon{          /* caret tourné au focus */
  transform: rotate(180deg);                     /* rotation vers le haut */
  opacity: .95;                                  /* un peu plus visible */
}

.has-sub > .sub{                                 /* sous-menu desktop */
  position: absolute;                            /* sort du flux et se place sous le parent */
  top: calc(100% + 10px);                        /* légèrement sous le menu principal */
  left: 0;                                       /* aligné à gauche du parent */

  margin: 0;                                     /* reset ul */
  padding: 10px;                                 /* respiration interne */
  list-style: none;                              /* sans puces */

  min-width: 240px;                              /* largeur mini confortable */
  border-radius: 14px;                           /* angles arrondis */
  border: 1px solid rgba(0,0,0,.08);             /* bord discret */

  background: rgba(255,255,255,.92);             /* fond blanc légèrement translucide */
  backdrop-filter: blur(8px);                    /* effet de flou derrière */
  -webkit-backdrop-filter: blur(8px);            /* compatibilité Safari */

  box-shadow: 0 18px 40px rgba(0,0,0,.14);       /* ombre élégante */
  z-index: 2000;                                 /* au-dessus du reste */

  opacity: 0;                                    /* invisible au repos */
  visibility: hidden;                            /* masqué au repos */
  transform: translateY(6px) scale(.985);        /* léger décalage + mini zoom */
  transform-origin: top left;                    /* origine de la transformation */
  transition: opacity .16s ease, transform .16s ease, visibility .16s; /* apparition douce */
  pointer-events: none;                          /* non cliquable tant que masqué */
}

.has-sub:hover > .sub,                           /* ouverture au survol */
.has-sub:focus-within > .sub{                    /* ouverture au focus clavier */
  opacity: 1;                                    /* visible */
  visibility: visible;                           /* visible pour l’accessibilité */
  transform: translateY(0) scale(1);             /* revient à sa position normale */
  pointer-events: auto;                          /* devient cliquable */
}

.has-sub .sub a{                                 /* liens du sous-menu */
  padding: 10px 12px;                            /* zone de clic confortable */
  line-height: 1.2;                              /* interligne lisible */
  font-family: var(--font, Arial, sans-serif);   /* police cohérente */
  font-weight: 500;                              /* graisse normale */
  color: var(--ink, #2e2e2e);                    /* couleur standard */
  text-decoration: none;                         /* pas de soulignement */

  border-radius: 12px;                           /* petits arrondis */
  transition: background .14s ease, transform .14s ease; /* survol doux */
}

.has-sub .sub a:hover{                           /* survol d’un lien de sous-menu */
  background: rgba(0,0,0,.06);                   /* fond léger */
  transform: translateX(2px);                    /* mini déplacement horizontal */
  text-decoration: none;                         /* pas de soulignement cheap */
}

.has-sub .sub a:focus-visible{                   /* focus clavier sur lien de sous-menu */
  outline: none;                                 /* retire outline natif */
  box-shadow: 0 0 0 3px rgba(0,0,0,.14);         /* halo visible */
  background: rgba(0,0,0,.06);                   /* fond léger */
}

/* Réduction mouvement */
@media (prefers-reduced-motion: reduce){         /* accessibilité : réduction animations */
  .has-sub > .sub,                               /* sous-menu */
  .sub-toggle,                                   /* bouton caret */
  .sub-toggle-icon,                              /* icône caret */
  .has-sub .sub a,                               /* liens du sous-menu */
  .nav-list > li > a::after,                     /* trait animé des liens directs */
  .nav-list > li > .nav-item > a::after{         /* trait animé des liens avec sous-menu */
    transition: none;                            /* coupe les transitions */
  }

  .has-sub > .sub{                               /* sous-menu en mode mouvement réduit */
    transform: none;                             /* pas de déplacement */
  }
}
.site-nav a:hover,
.site-nav a:focus,
.site-nav a:focus-visible{
  text-decoration: none;   /* empêche tout soulignement */
}

/* =====================================================================================
   CHAPITRE 8 — RESPONSIVE (MOBILE / TABLETTE)
   ===================================================================================== */

@media (max-width: 1024px){                      /* règles mobile / tablette */

  body{                                          /* corps de page */
    padding-top: 60px;                           /* header un peu plus compact sur petit écran */
  }

  .brand-logo{                                   /* logo mobile */
    height: 48px;                                /* réduit légèrement la hauteur */
  }

  .header-signature{                             /* signature manuscrite */
    display: none;                               /* masquée sur écran étroit */
  }

  .header-inner{                                 /* structure interne mobile */
    display: flex;                               /* flex plus simple que grid ici */
    align-items: center;                         /* centrage vertical */
    justify-content: space-between;              /* logo à gauche, burger à droite */
    gap: 12px;                                   /* espace entre éléments */
  }

  .nav-toggle{                                   /* bouton burger */
    display: inline-flex;                        /* affiché en mobile */
  }

  .site-nav{                                     /* menu mobile repliable */
    display: none;                               /* caché tant qu’il n’est pas ouvert */
    position: absolute;                          /* placé sous le header */
    left: 0;                                     /* bord gauche */
    right: 0;                                    /* bord droit */
    top: 100%;                                   /* juste sous le header */

    background: rgba(248,244,238,.80);           /* fond réellement translucide */
    backdrop-filter: blur(14px);                 /* flou plus marqué */
    -webkit-backdrop-filter: blur(14px);         /* compatibilité Safari */
    border-bottom: 1px solid rgba(255,255,255,.35); /* séparation douce */
    box-shadow: 0 10px 22px rgba(0,0,0,.12);     /* ombre un peu plus visible */

    padding: 10px 12px 14px;                     /* respiration interne */
  }

  .site-nav[data-open="true"]{                   /* menu mobile ouvert */
    display: block;                              /* devient visible */
  }

  .nav-list{                                     /* liste principale mobile */
    display: flex;                               /* pile verticale flexible */
    flex-direction: column;                      /* colonne */
    align-items: stretch;                        /* pleine largeur */
    gap: 0;                                      /* pas d’espace entre items */
  }

  .nav-list > li{
    border-top: 1px solid rgba(0,0,0,.08);       /* séparateurs plus doux sur fond translucide */
  }

  .nav-list > li:first-child{                    /* premier item */
    border-top: 0;                               /* pas de trait en haut */
  }

  .nav-item{                                     /* ligne lien + caret en mobile */
    display: grid;                               /* structure claire */
    grid-template-columns: 1fr auto;             /* texte large + caret à droite */
    align-items: stretch;                        /* étire la ligne pour en faire une vraie zone tactile */
    gap: 0;                                      /* pas d’espace creux entre texte et caret */
    width: 100%;                                 /* occupe toute la largeur disponible */
  }

  /* ===================================================================================
     AJOUT MOBILE — LE LIEN PARENT OCCUPE TOUTE LA PARTIE GAUCHE
     Objectif :
     - toute la ligne du menu parent devient naturellement cliquable
     - la flèche reste à droite
     - on ne change rien au desktop
     =================================================================================== */

  .nav-item > a,                                 /* lien parent dans une ligne avec sous-menu */
  .nav-link{                                     /* lien mobile si classe présente dans votre HTML */
    display: flex;                               /* facilite le centrage vertical du texte */
    align-items: center;                         /* centre le texte verticalement */
    width: 100%;                                 /* le lien prend toute la largeur utile */
    min-height: 48px;                            /* vraie hauteur tactile confortable */
    padding: 14px 6px;                           /* grande zone cliquable */
  }

  .sub-toggle{                                   /* bouton caret mobile */
    align-self: stretch;                         /* le bouton prend toute la hauteur de la ligne */
    min-width: 44px;                             /* largeur tactile minimum confortable */
    padding: 12px 10px;                          /* zone tactile plus grande */
    border-radius: 10px;                         /* angles arrondis */
  }

  .has-sub::after{                               /* zone tampon desktop */
    display: none;                               /* inutile en mobile */
  }

  .has-sub > .sub{                               /* sous-menu mobile */
    position: static;                            /* revient dans le flux */
    min-width: 0;                                /* aucune largeur mini */

    border: 0;                                   /* pas de bord */
    border-radius: 0;                            /* pas d’arrondis */
    box-shadow: none;                            /* pas d’ombre */
    background: transparent;                     /* fond transparent */
    backdrop-filter: none;                       /* pas de flou */
    -webkit-backdrop-filter: none;               /* pas de flou Safari */

    padding: 0 0 10px 0;                         /* espace en bas */

    opacity: 1;                                  /* toujours visible une fois affiché */
    visibility: visible;                         /* visible */
    transform: none;                             /* aucune transformation */
    pointer-events: auto;                        /* cliquable */

    display: none;                               /* mais masqué tant que data-open n’est pas true */
  }

  .has-sub > .sub[data-open="true"]{             /* sous-menu mobile ouvert */
    display: block;                              /* affiché */
  }

  .has-sub .sub a{                               /* liens de sous-menu mobile */
    padding: 12px 12px 12px 28px;                /* indentation vers la droite */
    border-radius: 10px;                         /* arrondi léger */
  }

  .has-sub .sub a:hover{                         /* survol sous-menu mobile */
    background: rgba(0,0,0,.04);                 /* fond léger */
    transform: none;                             /* pas de glissement */
  }
}


/* =====================================================================================
   CHAPITRE 9 — GRAS CONDITIONNEL (menu mobile ouvert)
   ===================================================================================== */

.site-nav[data-open="true"] .nav-list > li > a{ /* liens directs du menu quand le panneau mobile est ouvert */
  font-weight: 700 !important;                   /* mise en avant en gras */
}

.site-nav[data-open="true"] .nav-list > li.has-sub > .nav-item > a{ /* liens parents avec sous-menu quand le panneau mobile est ouvert */
  font-weight: 700 !important;                   /* mise en avant en gras */
}


/* =====================================================================================
   CHAPITRE 10 — FIX RESIZE (éviter les bugs au redimensionnement)
   ===================================================================================== */

@media (min-width: 1025px){                      /* retour en desktop après resize */

  .site-nav{                                     /* menu principal desktop */
    display: block !important;                   /* force l’affichage */
  }

  .site-nav[data-open="true"],                   /* si JS a laissé data-open=true */
  .site-nav[data-open="false"]{                  /* ou data-open=false */
    display: block !important;                   /* on neutralise les états mobiles */
  }
}