/* ================================================================
   ACL Help Center — Brand CSS v4.0
   Mayday → Code custom → Code CSS personnalisé
   Utilise les vrais noms de classes Mayday (mayday_custom-template.css)
   ================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;600;700&display=swap");

:root {
  --acl-yellow: #fedb00;
  --acl-black: #231f20;
  --acl-dark: #1a1a1a;
  --acl-radius: 40px;
}

body,
button,
input,
textarea,
select {
  font-family:
    "Albert Sans",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════
   1. HERO — fond sombre + bande diagonale jaune
   3 stratégies en cascade (du plus spécifique au plus large) :
   A. Ciblage direct par classes Mayday connues (spécificité #id)
   B. :has() — header fixe quand il contient la barre de recherche
   C. Fallback JS dans acl-custom.js
   ══════════════════════════════════════════════════════════════ */

/* A — classes connues : #__nuxt assure spécificité maximale */
#__nuxt .mayday_header-container-home,
#__nuxt .mayday_header-main-home {
  background: var(--acl-dark) !important;
  background-image: none !important;
  position: relative !important;
  overflow: hidden !important;
  padding-top: 32px !important;
  padding-bottom: 40px !important;
}

/* B — :has() : le header fixe CONTIENT la barre de recherche = c'est lui le hero */
#__nuxt .mayday_header-container-fixed:has(.mayday_search-wrapper),
#__nuxt .mayday_header-container-fixed:has(.mayday_search-bar-wrapper) {
  background: var(--acl-dark) !important;
  background-image: none !important;
  position: relative !important;
  overflow: visible !important;
}

/* Bande diagonale jaune (commune aux deux cibles) */
#__nuxt .mayday_header-main-home::before,
#__nuxt .mayday_header-container-fixed:has(.mayday_search-wrapper)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7%;
  background: var(--acl-yellow);
  clip-path: polygon(0 0, 100% 0, 38% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}

/* Tout le contenu du hero au-dessus de la bande */
#__nuxt .mayday_header-main-home > *,
#__nuxt .mayday_header-container-fixed:has(.mayday_search-wrapper) > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   2. TITRE HERO — eyebrow "Assistance ACL" + titre blanc
   ══════════════════════════════════════════════════════════════ */

/* Conteneur widget : colonne centrée */
.mayday_header-widget_container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Eyebrow "ASSISTANCE ACL" — order:-2, avant tout */
.mayday_header-widget_container::before {
  order: -2;
  content: "ASSISTANCE ACL";
  display: inline-flex;
  align-items: center;
  font-family: "Albert Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acl-yellow);
  background: rgba(254, 219, 0, 0.1);
  border: 1px solid rgba(254, 219, 0, 0.28);
  padding: 5px 16px;
  border-radius: var(--acl-radius);
  margin-bottom: 16px;
}

/* Grand titre "ACL Centre d'aide" injecté via ::after — order:-1 */
.mayday_header-widget_container::after {
  order: -1;
  content: "ACL Centre d'aide";
  display: block;
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 10px;
}

/* Centre le conteneur */
.mayday_header-center-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Titre Mayday (configuré en admin) devient la phrase d'accroche
   → régler dans Mayday : "Comment pouvons-nous vous aider ?" */
.mayday_header-widget_container_title,
.mayday_search-wrapper_label_text {
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 2vw, 20px) !important;
  line-height: 1.4 !important;
  margin-bottom: 24px !important;
}

.mayday_header-widget_container_subtitle {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
}

/* ══════════════════════════════════════════════════════════════
   3. BARRE DE RECHERCHE
   ══════════════════════════════════════════════════════════════ */

.mayday_search-bar-wrapper,
.mayday_search-wrapper {
  max-width: 620px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.mayday_search-input_wrapper {
  border-radius: var(--acl-radius) !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.mayday_search-input_wrapper_focus {
  box-shadow:
    0 0 0 3px rgba(254, 219, 0, 0.5),
    0 4px 24px rgba(0, 0, 0, 0.28) !important;
}

.mayday_search-input {
  background: #ffffff !important;
  color: var(--acl-black) !important;
  border: none !important;
}

.mayday_search-input_custom_color {
  color: var(--acl-black) !important;
}

/* Icône loupe → couleur ACL au focus */
.mayday_search-input_icon_focus {
  color: var(--acl-yellow) !important;
}

/* Bouton "Voir tous les résultats" */
.mayday_search-show_all {
  color: var(--acl-black) !important;
  font-weight: 700 !important;
}
.mayday_search-show_all:hover {
  text-decoration-color: var(--acl-yellow) !important;
}

/* ══════════════════════════════════════════════════════════════
   4. ICÔNES DE CATÉGORIES
   Structure DOM réelle (inspectée) :
     <a href="/fr-fr/collections/Besoin-d-assistance-..."
        class="mayday_home_collection-container_col">
       <div class="mayday_home_collection">
         <div class="mayday_home_collection-img_wrapper" style="color:#677184">
           <img class="mayday_home_collection-img" src="...svg">  ← à masquer
         </div>
       </div>
     </a>
   Stratégie :
     1. Masquer le <img> original via display:none
     2. Transformer .img_wrapper en cercle ACL jaune
     3. SVG via background-image — ciblage par [href*="slug"] (infaillible vs nth-child)
   ══════════════════════════════════════════════════════════════ */

/* 1. Masquer les icônes originales (deux types selon la collection) */

/* Images SVG custom uploadées dans Mayday */
.mayday_home_collection-img {
  display: none !important;
}

/* Icônes Font Awesome (rendu via ::before sur <i>) */
.mayday_home_collection-icon {
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}

/* 2. Le wrapper devient le cercle ACL */
.mayday_home_collection-img_wrapper {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 50% !important;
  background-color: rgba(254, 219, 0, 0.14) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 28px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 220ms ease !important;
  color: var(--acl-black) !important;
  margin: 0 auto 12px !important;
}

/* Hover : cercle jaune plein */
.mayday_home_collection-container_col:hover
  .mayday_home_collection-img_wrapper {
  background-color: rgba(254, 219, 0, 0.85) !important;
}

/* 3. SVG par href — robuste quel que soit l'ordre de rendu Vue */

/* Besoin d'assistance → casque audio */
.mayday_home_collection-container_col[href*="Besoin-d-assistance"]
  .mayday_home_collection-img_wrapper {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z'/%3E%3Cpath d='M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E") !important;
}

/* Informations générales → cercle info */
.mayday_home_collection-container_col[href*="Informations-generales"]
  .mayday_home_collection-img_wrapper {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") !important;
}

/* Devenir membre → carte */
.mayday_home_collection-container_col[href*="Devenir-membre"]
  .mayday_home_collection-img_wrapper {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M7 15h2'/%3E%3Cpath d='M14 15h3'/%3E%3C/svg%3E") !important;
}

/* Mes avantages et réductions → étiquette */
.mayday_home_collection-container_col[href*="Mes-avantages"]
  .mayday_home_collection-img_wrapper,
.mayday_home_collection-container_col[href*="avantages"]
  .mayday_home_collection-img_wrapper {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7' stroke-width='2.5'/%3E%3C/svg%3E") !important;
}

/* Application mobile → smartphone */
.mayday_home_collection-container_col[href*="Application-mobile"]
  .mayday_home_collection-img_wrapper,
.mayday_home_collection-container_col[href*="Application"]
  .mayday_home_collection-img_wrapper {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M9 7h6'/%3E%3Cpath d='M12 17v.01'/%3E%3C/svg%3E") !important;
}

/* Prestations ACL → bouclier + coche */
.mayday_home_collection-container_col[href*="Prestations-ACL"]
  .mayday_home_collection-img_wrapper,
.mayday_home_collection-container_col[href*="Prestations"]
  .mayday_home_collection-img_wrapper {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E") !important;
}

/* ══════════════════════════════════════════════════════════════
   5. CARTES DE CATÉGORIES
   .mayday_home_collection-container_col = <a> (le lien carte)
   .mayday_home_collection = <div> inner (le visuel carte)
   ══════════════════════════════════════════════════════════════ */

/* Carte interne : bord transparent + transitions */
.mayday_home_collection {
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  transition:
    border-color 220ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms ease !important;
}

/* Hover sur le lien <a> → effets sur la carte interne */
.mayday_home_collection-container_col:hover .mayday_home_collection {
  border-color: var(--acl-yellow) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09) !important;
}

.mayday_home_collection-title {
  font-weight: 700 !important;
  color: var(--acl-black) !important;
}

.mayday_home_collection-description {
  color: #666 !important;
}

/* ══════════════════════════════════════════════════════════════
   6. NAVIGATION — header Mayday (hors zone hero)
   ══════════════════════════════════════════════════════════════ */

/* Header fixe hors page d'accueil → blanc propre
   Exclure les variantes -home pour ne pas écraser la Section 1 */
.mayday_header-container:not(.mayday_header-container-home),
.mayday_header-main:not(.mayday_header-main-home) {
  background: #ffffff !important;
  border-bottom: 1px solid #f0f0f0 !important;
  box-shadow: none !important;
}

/* Logo Mayday dans le header standard */
.mayday_header-col-logo {
  display: flex;
  align-items: center;
}

/* Lien actif dans la navigation */
.mayday_navigation-folder_label--root,
.mayday_navigation-nav_link {
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════
   7. BOUTONS
   ══════════════════════════════════════════════════════════════ */

.mayday_base-button--primary {
  background: var(--acl-yellow) !important;
  color: var(--acl-black) !important;
  border: none !important;
  border-radius: var(--acl-radius) !important;
  font-weight: 700 !important;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease !important;
}

.mayday_base-button--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
}

.mayday_base-button--secondary {
  border-radius: var(--acl-radius) !important;
  border-color: var(--acl-black) !important;
}

.mayday_base-button--secondary:hover {
  background: var(--acl-yellow) !important;
  border-color: var(--acl-yellow) !important;
  color: var(--acl-black) !important;
}

/* ══════════════════════════════════════════════════════════════
   8. BREADCRUMB & LIENS
   ══════════════════════════════════════════════════════════════ */

.mayday_content-breadcrumb_link:hover,
.mayday_knowledge-breadcrumb_item_label:hover,
.mayday_entity-link_hover {
  color: var(--acl-black) !important;
  text-decoration-color: var(--acl-yellow) !important;
  text-decoration-thickness: 2px !important;
}

.mayday_content-breadcrumb_label_active,
.mayday_knowledge-breadcrumb_last_item_label {
  color: var(--acl-black) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════
   9. TAGS
   ══════════════════════════════════════════════════════════════ */

.mayday_tag-selected {
  background: var(--acl-yellow) !important;
  color: var(--acl-black) !important;
  border-color: var(--acl-yellow) !important;
}

/* ══════════════════════════════════════════════════════════════
   10. FOOTER — pas de règle, déjà personnalisé via Mayday
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .mayday_header-main-home {
    padding-top: 24px !important;
    padding-bottom: 32px !important;
  }
  .mayday_header-main-home::before {
    width: 5%;
    clip-path: polygon(0 0, 100% 0, 20% 100%, 0 100%);
  }
  .mayday_header-widget_container_title,
  .mayday_search-wrapper_label_text {
    font-size: clamp(20px, 5vw, 28px) !important;
  }
  .mayday_home_collection-img_wrapper {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    background-size: 22px 22px !important;
  }
}