/* =========================================================================
   WILDCRAFT — Design system "Nuit Brisée" pour WordPress / Elementor / Pixwell
   -------------------------------------------------------------------------
   OÙ COLLER CE FICHIER (au choix, du meilleur au plus rapide) :
     1. Child theme  -> wp-content/themes/pixwell-child/wildcraft.css
                        + enqueue via functions.php (voir functions-snippets.php)
     2. Elementor    -> Réglages du site > CSS personnalisé  (Elementor Pro)
     3. WordPress    -> Apparence > Personnaliser > CSS additionnel

   PRINCIPE : rien n'est appliqué globalement au thème.
   Tous les styles sont préfixés .wc- et ne s'activent que sur les widgets
   auxquels VOUS ajoutez la classe (onglet Avancé > Classes CSS d'Elementor).
   Pixwell continue de fonctionner normalement partout ailleurs.

   Après chaque modification : vider le cache WP Super Cache
   ET Elementor > Outils > Régénérer les fichiers CSS.
   ========================================================================= */


/* =========================================================================
   1. POLICES
   -------------------------------------------------------------------------
   Cet @import est la solution la plus simple mais il bloque un peu le rendu.
   Solution propre : commentez-le et utilisez wp_enqueue_style dans
   functions.php (snippet fourni), ou déclarez les 3 polices dans
   Elementor > Réglages du site > Polices globales.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');


/* =========================================================================
   2. TOKENS
   -------------------------------------------------------------------------
   Ces variables sont globales mais ne repeignent rien toutes seules.
   Reportez les mêmes couleurs dans Elementor > Réglages du site >
   Couleurs globales, pour pouvoir les piocher dans l'interface.
   ========================================================================= */
:root{
  --wc-bg:        #06080D;
  --wc-bg-2:      #0A0E16;
  --wc-surface:   #0F1420;
  --wc-surface-2: #151B29;
  --wc-surface-3: #1C2434;

  --wc-line:      #1E2634;
  --wc-line-2:    #2B3547;
  --wc-line-3:    #3A465C;

  --wc-txt:       #EDF1F8;
  --wc-txt-2:     #A3AEC2;
  --wc-txt-3:     #6B7789;
  --wc-txt-4:     #4A5364;

  --wc-moss:      #5FCE84;
  --wc-moss-2:    #3FA765;
  --wc-moss-dk:   #1B4630;
  --wc-moon:      #9CB4EC;
  --wc-moon-dk:   #263352;
  --wc-blood:     #E4595B;
  --wc-blood-dk:  #4A2026;
  --wc-gold:      #E3B45C;
  --wc-gold-dk:   #46351A;
  --wc-discord:   #5865F2;

  --wc-f-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --wc-f-body:    "Inter", system-ui, -apple-system, sans-serif;
  --wc-f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --wc-r-sm: 6px;
  --wc-r:    10px;
  --wc-r-lg: 16px;
  --wc-r-xl: 24px;

  --wc-ease: cubic-bezier(.22,.68,.32,1);
  --wc-sh:   0 24px 60px -20px rgba(0,0,0,.8);
}


/* =========================================================================
   2 bis. FOND DE SITE
   -------------------------------------------------------------------------
   L'en-tête et le pied de page vivent HORS de .wc-page (ce sont des
   gabarits à part, affichés sur toutes les pages). Leurs fonds semi-
   transparents (effet verre dépoli) supposent un site sombre du début à
   la fin. Sans cette règle, le haut de page reste clair par défaut et le
   flou de la nav se mélange avec ce fond clair au lieu du fond sombre.
   ========================================================================= */
html, body{ background: var(--wc-bg) !important; }


/* =========================================================================
   3. SOCLE DE PAGE
   -------------------------------------------------------------------------
   Ajoutez la classe .wc-page au CONTENEUR RACINE de la page Elementor
   (le tout premier conteneur, onglet Avancé > Classes CSS).
   Tout ce qui suit ne s'applique qu'à l'intérieur.
   ========================================================================= */
.wc-page{
  background: var(--wc-bg);
  color: var(--wc-txt);
  font-family: var(--wc-f-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Grain discret. Retirez ce bloc si vous préférez un fond parfaitement lisse. */
.wc-page::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wc-page h1,.wc-page h2,.wc-page h3,.wc-page h4,.wc-page h5{
  font-family: var(--wc-f-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: var(--wc-txt);
}
.wc-page h1{ font-size: clamp(2.4rem,5.5vw,4.2rem); }
.wc-page h2{ font-size: clamp(1.85rem,3.6vw,2.85rem); }
.wc-page h3{ font-size: clamp(1.25rem,2vw,1.6rem); }
.wc-page h4{ font-size: 1.06rem; letter-spacing:-.02em; }
.wc-page p{ text-wrap: pretty; }
.wc-page ::selection{ background: rgba(95,206,132,.28); color:#fff; }

/* Fond alterné : classe à poser sur un conteneur pleine largeur */
.wc-alt{
  background: var(--wc-bg-2);
  border-top: 1px solid var(--wc-line);
  border-bottom: 1px solid var(--wc-line);
}


/* -------------------------------------------------------------------------
   3 bis. UTILITAIRES DE MISE EN PAGE
   -------------------------------------------------------------------------
   Ces classes rendent la structure indépendante des réglages de flex
   d'Elementor. Utile si vous importez les gabarits JSON : la grille est
   pilotée par le CSS, pas par les réglages du conteneur.
   ------------------------------------------------------------------------- */

/* Section : marge verticale standard */
.wc-section{ padding-block: clamp(64px,9vw,120px); }
.wc-section--tight{ padding-block: clamp(48px,6vw,80px); }

/* Largeur de contenu */
.wc-wrap{ width:100% !important; max-width:1240px !important; margin-inline:auto !important; padding-inline:24px !important; }
.wc-wrap--narrow{ max-width:820px !important; }

/* Grilles */
.wc-g-2,.wc-g-3,.wc-g-4,.wc-g-5{ display:grid !important; gap:20px; }
.wc-g-2{ grid-template-columns:repeat(2,1fr); }
.wc-g-3{ grid-template-columns:repeat(3,1fr); }
.wc-g-4{ grid-template-columns:repeat(4,1fr); }
.wc-g-5{ grid-template-columns:repeat(5,1fr); }

/* Conteneur unique des gabarits d'en-tête et de pied de page : il
   n'enveloppe qu'un widget « Code court », il ne doit rien imposer. */
.wc-part{ padding:0 !important; margin:0 !important; max-width:none !important; }

/* Empilement et alignement */
.wc-stack{ display:flex !important; flex-direction:column; }
.wc-row{ display:flex !important; flex-direction:row !important; align-items:center; gap:12px; flex-wrap:wrap; }
.wc-row--between{ justify-content:space-between; }

/* Elementor impose width:100% à chaque conteneur enfant, via la variable
   --width déclarée sur .e-con (frontend.min.css). Dans une rangée, chaque
   enfant occupe donc toute la largeur disponible et repasse à la ligne à
   cause de flex-wrap : la rangée s'affiche empilée alors que sa direction
   est bien "row". On rend la largeur automatique aux enfants directs. */
.wc-row > .e-con{ width:auto !important; max-width:100%; }
.wc-center{ text-align:center; }
.wc-center .wc-eyebrow{ justify-content:center; }
.wc-center .wc-eyebrow::before{ display:none; }

/* En-tête de section */
.wc-sec-head{ max-width:720px; margin-bottom:clamp(32px,5vw,56px); }
.wc-sec-head h2{ margin-top:14px; }
.wc-sec-head p{ margin-top:14px; color:var(--wc-txt-2); font-size:1.04rem; }
.wc-sec-head--center{ margin-inline:auto; text-align:center; }

/* Espacements ponctuels */
.wc-mt-1{ margin-top:8px  !important; }
.wc-mt-2{ margin-top:16px !important; }
.wc-mt-3{ margin-top:24px !important; }
.wc-mt-4{ margin-top:32px !important; }
.wc-mt-5{ margin-top:48px !important; }
.wc-mb-2{ margin-bottom:16px !important; }
.wc-mb-3{ margin-bottom:24px !important; }
.wc-mb-4{ margin-bottom:32px !important; }

/* Padding interne des cartes */
.wc-pad{ padding:22px !important; }
.wc-pad-lg{ padding:30px !important; }

@media (max-width:1024px){
  .wc-g-4,.wc-g-5,.wc-g-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .wc-g-2,.wc-g-3,.wc-g-4,.wc-g-5{ grid-template-columns:1fr; }
  .wc-wrap{ padding-inline:18px; }
}


/* =========================================================================
   3. SOCLE DE PAGE
   -------------------------------------------------------------------------
   Ajoutez la classe .wc-page au CONTENEUR RACINE de la page Elementor
   (le tout premier conteneur, onglet Avancé > Classes CSS).
   Tout ce qui suit ne s'applique qu'à l'intérieur.
   ========================================================================= */
.wc-page{
  background: var(--wc-bg);
  color: var(--wc-txt);
  font-family: var(--wc-f-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  position: relative;
  /* Elementor pose 10px de padding par défaut sur le conteneur racine.
     Il faut l'annuler, sinon les sections pleine largeur (hero, fonds
     alternés) laissent une bande du fond du site sur les deux bords.
     Les marges intérieures sont gérées par .wc-wrap, pas ici. */
  padding-inline: 0 !important;
  max-width: 100% !important;
}

/* Grain discret. Retirez ce bloc si vous préférez un fond parfaitement lisse. */
.wc-page::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wc-page h1,.wc-page h2,.wc-page h3,.wc-page h4,.wc-page h5{
  font-family: var(--wc-f-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: var(--wc-txt);
}
.wc-page h1{ font-size: clamp(2.4rem,5.5vw,4.2rem); }
.wc-page h2{ font-size: clamp(1.85rem,3.6vw,2.85rem); }
.wc-page h3{ font-size: clamp(1.25rem,2vw,1.6rem); }
.wc-page h4{ font-size: 1.06rem; letter-spacing:-.02em; }
.wc-page p{ text-wrap: pretty; }
.wc-page ::selection{ background: rgba(95,206,132,.28); color:#fff; }

/* =========================================================================
   3bis. PASSER UN BLOC AU-DESSUS DE SON VOISIN
   -------------------------------------------------------------------------
   Classe à poser (Avancé > Classes CSS, en AJOUTANT aux classes
   existantes) sur le conteneur qui doit passer par-dessus la marge
   négative d'un autre. Utile pour tout chevauchement volontaire entre
   deux sections voisines.
   ========================================================================= */
.wc-z-front{ position: relative !important; z-index: 3 !important; }


/* =========================================================================
   4. TYPOGRAPHIE UTILITAIRE
   -------------------------------------------------------------------------
   .wc-eyebrow  -> sur un widget Titre (balise DIV ou SPAN de préférence)
   ========================================================================= */
.wc-eyebrow,
.wc-eyebrow .elementor-heading-title{
  font-family: var(--wc-f-mono) !important;
  font-size: .7rem !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: var(--wc-moss) !important;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.wc-eyebrow::before{
  content:""; width:22px; height:1px; background: currentColor; opacity:.6;
}
.wc-eyebrow--moss,.wc-eyebrow--moss .elementor-heading-title{ color: var(--wc-moss) !important; }
.wc-eyebrow--moon,.wc-eyebrow--moon .elementor-heading-title{ color: var(--wc-moon) !important; }
.wc-eyebrow--blood,.wc-eyebrow--blood .elementor-heading-title{ color: var(--wc-blood) !important; }
.wc-eyebrow--gold,.wc-eyebrow--gold .elementor-heading-title{ color: var(--wc-gold) !important; }
.wc-eyebrow--center::before{ display:none; }

.wc-lead{ font-size: 1.1rem; color: var(--wc-txt-2); line-height: 1.7; }
.wc-muted{ color: var(--wc-txt-2) !important; }
.wc-dim{ color: var(--wc-txt-3) !important; }
.wc-mono{ font-family: var(--wc-f-mono); font-size: .82rem; letter-spacing: .02em; }


/* =========================================================================
   5. BOUTONS
   -------------------------------------------------------------------------
   Classe à poser sur le widget Bouton d'Elementor.
   Elle cible le <a> interne, donc laissez le style natif du bouton à vide.
   ========================================================================= */
.wc-btn .elementor-button,
a.wc-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--wc-f-body) !important;
  font-weight: 600 !important;
  font-size: .925rem !important;
  letter-spacing: -.01em;
  padding: .78em 1.35em !important;
  border-radius: var(--wc-r) !important;
  border: 1px solid transparent !important;
  transition: all .22s var(--wc-ease);
  text-decoration: none !important;
  line-height: 1.4 !important;
}

.wc-btn--primary .elementor-button, a.wc-btn--primary{
  background: linear-gradient(180deg, var(--wc-moss), var(--wc-moss-2)) !important;
  color: #04150B !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 20px -8px rgba(95,206,132,.7);
}
.wc-btn--primary .elementor-button:hover, a.wc-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 28px -8px rgba(95,206,132,.85);
}

.wc-btn--ghost .elementor-button, a.wc-btn--ghost{
  background: var(--wc-surface-2) !important;
  color: var(--wc-txt) !important;
  border-color: var(--wc-line-2) !important;
}
.wc-btn--ghost .elementor-button:hover, a.wc-btn--ghost:hover{
  background: var(--wc-surface-3) !important;
  border-color: var(--wc-line-3) !important;
  transform: translateY(-1px);
}

.wc-btn--line .elementor-button, a.wc-btn--line{
  background: transparent !important;
  color: var(--wc-txt-2) !important;
  border-color: var(--wc-line-2) !important;
}
.wc-btn--line .elementor-button:hover, a.wc-btn--line:hover{
  color: var(--wc-txt) !important;
  border-color: var(--wc-line-3) !important;
  background: var(--wc-surface) !important;
}

.wc-btn--discord .elementor-button, a.wc-btn--discord{
  background: var(--wc-discord) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
}
.wc-btn--discord .elementor-button:hover, a.wc-btn--discord:hover{
  background: #4752EB !important; transform: translateY(-1px);
}

.wc-btn--gold .elementor-button, a.wc-btn--gold{
  background: linear-gradient(180deg, var(--wc-gold), #C99B3F) !important;
  color: #231705 !important;
  border-color: rgba(255,255,255,.16) !important;
}
.wc-btn--gold .elementor-button:hover, a.wc-btn--gold:hover{ transform: translateY(-1px); }

.wc-btn--lg .elementor-button, a.wc-btn--lg{ font-size: 1rem !important; padding: .95em 1.7em !important; }
.wc-btn--sm .elementor-button, a.wc-btn--sm{ font-size: .83rem !important; padding: .6em 1em !important; }

.wc-link{
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; font-size: .9rem; color: var(--wc-moss);
  transition: gap .2s var(--wc-ease); text-decoration: none;
}
.wc-link:hover{ gap: .75em; color: var(--wc-moss); }


/* =========================================================================
   6. CARTES
   -------------------------------------------------------------------------
   .wc-card sur un CONTENEUR Elementor. Laissez son fond et sa bordure
   à vide dans le panneau Style, tout est géré ici.
   ========================================================================= */
.wc-card{
  background: var(--wc-surface) !important;
  border: 1px solid var(--wc-line) !important;
  border-radius: var(--wc-r-lg) !important;
  overflow: hidden;
  transition: border-color .25s var(--wc-ease),
              transform .25s var(--wc-ease),
              background .25s var(--wc-ease);
  position: relative;
}
.wc-card:hover{ border-color: var(--wc-line-2) !important; }
.wc-card--hover:hover{
  transform: translateY(-3px);
  background: var(--wc-surface-2) !important;
  border-color: var(--wc-line-3) !important;
}
.wc-card h3,.wc-card h4{ margin-bottom: 8px; }
.wc-card p{ color: var(--wc-txt-2); font-size: .925rem; line-height: 1.6; }

/* Cartes "image bord à bord" : à réserver aux cards dont le texte est
   regroupé dans un bloc .wc-pad avec son propre padding interne (comme
   les 3 étapes de la home). NE PAS appliquer par simple détection d'image,
   ça casse l'espacement des cards qui ont leurs widgets à plat
   (ex: les cards de la page Jouer). Ajoutez la classe wc-card--flush
   à la main, en plus de wc-card, uniquement où c'est voulu. */
.wc-card.wc-card--flush{
  padding: 0 !important;
  gap: 0 !important;
}

/* Zoom de l'image au survol : classe .wc-card__media sur le widget Image.
   Le ratio 16/9 est imposé pour que toutes les captures aient exactement
   la même hauteur, quelle que soit la proportion du fichier d'origine.
   Le recadrage se fait depuis le centre, ajustable image par image
   avec les classes utilitaires .wc-media--top / .wc-media--bottom. */
.wc-card__media img{
  transition: transform .5s var(--wc-ease);
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}
.wc-card--hover:hover .wc-card__media img{ transform: scale(1.05); }

/* Réglage du cadrage quand le sujet n'est pas au centre de la capture */
.wc-media--top img{ object-position: center top !important; }
.wc-media--bottom img{ object-position: center bottom !important; }

/* Espacement interne du bloc texte d'une carte flush.
   Le gap d'Elementor est ramené à 9px et la marge des titres annulée,
   sinon les deux se cumulent et éloignent le titre de sa description. */
.wc-card > .wc-pad{ gap: 9px !important; }
.wc-card > .wc-pad > .wc-step-n{ margin-bottom: 5px !important; }
.wc-card > .wc-pad h3,
.wc-card > .wc-pad h4{ margin-bottom: 0 !important; }

/* Numéro d'étape (01, 02, 03) : sur un widget Titre */
.wc-step-n,
.wc-step-n .elementor-heading-title{
  font-family: var(--wc-f-mono) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em;
  color: var(--wc-moss) !important;
  background: var(--wc-moss-dk);
  border: 1px solid rgba(95,206,132,.28);
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Réduit le padding du HAUT du bloc texte uniquement sur les cards
   flush, pour que le titre suive de près l'image qui touche les bords.
   Les autres côtés du .wc-pad gardent leur padding normal de 22px. */
.wc-card--flush > .wc-pad{
  padding-top: 10px !important;
}

/* =========================================================================
   7. TAGS
   ========================================================================= */
.wc-tag,
.wc-tag .elementor-heading-title{
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--wc-f-mono) !important;
  font-size: .66rem !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  padding: .35em .7em;
  border-radius: 5px;
  background: var(--wc-surface-3);
  color: var(--wc-txt-2) !important;
  border: 1px solid var(--wc-line-2);
  line-height: 1.4;
}
.wc-tag--moss,.wc-tag--moss .elementor-heading-title{
  background: var(--wc-moss-dk); color: var(--wc-moss) !important; border-color: rgba(95,206,132,.3);
}
.wc-tag--moon,.wc-tag--moon .elementor-heading-title{
  background: var(--wc-moon-dk); color: var(--wc-moon) !important; border-color: rgba(156,180,236,.3);
}
.wc-tag--blood,.wc-tag--blood .elementor-heading-title{
  background: var(--wc-blood-dk); color: var(--wc-blood) !important; border-color: rgba(228,89,91,.3);
}
.wc-tag--gold,.wc-tag--gold .elementor-heading-title{
  background: var(--wc-gold-dk); color: var(--wc-gold) !important; border-color: rgba(227,180,92,.3);
}


/* =========================================================================
   8. BANDEAU DE CHIFFRES
   -------------------------------------------------------------------------
   .wc-stats sur le conteneur parent, .wc-stat sur chaque enfant.
   Fonctionne aussi avec le widget Compteur d'Elementor.

   Pas de backdrop-filter ici : il floutait le paysage vu à travers
   l'encart, ce qui donnait l'impression que le bloc passait sous un
   filtre. Le fond opaque suffit à garantir la lisibilité.
   ========================================================================= */
.wc-stats{
  border: 1px solid var(--wc-line) !important;
  border-radius: var(--wc-r-lg) !important;
  background: rgba(10,14,22,.86) !important;
  overflow: hidden;
  gap: 0 !important;
}
.wc-stat{
  padding: 20px 22px !important;
  border-right: 1px solid var(--wc-line);
}
.wc-stat:last-child{ border-right: none; }
.wc-stat .elementor-heading-title,
.wc-stat .elementor-counter-number-wrapper{
  font-family: var(--wc-f-display) !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  line-height: 1.1 !important;
  color: var(--wc-txt) !important;
}
.wc-stat .elementor-counter-title,
.wc-stat p{
  font-size: .82rem !important;
  color: var(--wc-txt-3) !important;
  margin-top: 3px;
}
@media (max-width:1024px){
  .wc-stat:nth-child(2){ border-right: none; }
  .wc-stat:nth-child(-n+2){ border-bottom: 1px solid var(--wc-line); }
}


/* =========================================================================
   9. BANDEAUX D'ANNONCE
   ========================================================================= */
.wc-notice{
  padding: 14px 18px !important;
  border-radius: var(--wc-r) !important;
  background: linear-gradient(90deg, rgba(228,89,91,.09), rgba(228,89,91,.02)) !important;
  border: 1px solid rgba(228,89,91,.24) !important;
}
.wc-notice--moss{
  background: linear-gradient(90deg, rgba(95,206,132,.09), rgba(95,206,132,.02)) !important;
  border-color: rgba(95,206,132,.24) !important;
}
.wc-notice--moon{
  background: linear-gradient(90deg, rgba(156,180,236,.09), rgba(156,180,236,.02)) !important;
  border-color: rgba(156,180,236,.24) !important;
}
.wc-notice--gold{
  background: linear-gradient(90deg, rgba(227,180,92,.09), rgba(227,180,92,.02)) !important;
  border-color: rgba(227,180,92,.24) !important;
}
.wc-notice p{ font-size: .9rem; color: var(--wc-txt-2); margin: 0; }
.wc-notice strong{ color: var(--wc-txt); }


/* =========================================================================
   10. ENCADRÉS (conseils du staff, avertissements)
   ========================================================================= */
.wc-callout{
  padding: 16px 18px !important;
  border-radius: var(--wc-r) !important;
  background: var(--wc-surface-2) !important;
  border-left: 2px solid var(--wc-moss) !important;
}
.wc-callout--warn{ border-left-color: var(--wc-blood) !important; background: rgba(228,89,91,.06) !important; }
.wc-callout--info{ border-left-color: var(--wc-moon) !important; background: rgba(156,180,236,.06) !important; }
.wc-callout--gold{ border-left-color: var(--wc-gold) !important; background: rgba(227,180,92,.06) !important; }
.wc-callout p{ margin: 0 !important; font-size: .9rem !important; color: var(--wc-txt-2); }


/* =========================================================================
   11. GRILLE DE FONCTIONNALITÉS (bordures partagées)
   -------------------------------------------------------------------------
   .wc-feat sur le conteneur, .wc-feat-i sur chaque enfant.
   Mettez l'espacement du conteneur Elementor à 1px pour l'effet de grille.
   ========================================================================= */
.wc-feat{
  background: var(--wc-line) !important;
  border: 1px solid var(--wc-line) !important;
  border-radius: var(--wc-r-lg) !important;
  overflow: hidden;
  gap: 1px !important;
}
.wc-feat-i{
  background: var(--wc-surface) !important;
  padding: 26px 24px !important;
  transition: background .25s;
  border-radius: 0 !important;
}
.wc-feat-i:hover{ background: var(--wc-surface-2) !important; }
.wc-feat-ic{
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wc-surface-3);
  border: 1px solid var(--wc-line-2);
  font-size: 1.05rem;
}


/* =========================================================================
   12. CITATIONS / AVIS
   ========================================================================= */
.wc-quote p{ font-size: .96rem; line-height: 1.75; color: var(--wc-txt-2); }
.wc-quote p::before{ content:"« "; color: var(--wc-moss); }
.wc-quote p::after{ content:" »"; color: var(--wc-moss); }
.wc-quote img{
  width: 38px; height: 38px; border-radius: 9px;
  object-fit: cover; border: 1px solid var(--wc-line-2);
}


/* =========================================================================
   13. LISTES
   -------------------------------------------------------------------------
   .wc-list sur un widget Éditeur de texte contenant un <ul>
   ========================================================================= */
.wc-list ul{ list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 9px; }
.wc-list li{
  position: relative; padding-left: 20px;
  color: var(--wc-txt-2); font-size: .92rem; line-height: 1.65;
}
.wc-list li::before{
  content:""; position: absolute; left: 4px; top: 10px;
  width: 5px; height: 5px; border-radius: 1px;
  background: var(--wc-moss); opacity: .7;
}
.wc-list--neutral li::before{ background: var(--wc-txt-4); opacity: 1; }
.wc-list--blood li::before{ background: var(--wc-blood); }
.wc-list--moon li::before{ background: var(--wc-moon); }

.wc-list ol{ list-style: none; counter-reset: wcs; padding: 0; display: grid; gap: 10px; margin: 12px 0; }
.wc-list ol li{ counter-increment: wcs; padding-left: 30px; }
.wc-list ol li::before{
  content: counter(wcs);
  width: 20px; height: 20px; border-radius: 5px; left: 0; top: 2px;
  background: var(--wc-surface-3); border: 1px solid var(--wc-line-2);
  color: var(--wc-moss);
  font-family: var(--wc-f-mono); font-size: .68rem;
  display: flex; align-items: center; justify-content: center;
}


/* =========================================================================
   14. ACCORDÉON ELEMENTOR (FAQ, dépannage)
   -------------------------------------------------------------------------
   ATTENTION : Elementor propose deux widgets d'accordéon selon la version.
   Les deux jeux de sélecteurs sont fournis. Vérifiez lequel s'applique
   avec l'inspecteur du navigateur (clic droit > Inspecter sur un titre).

   Classe à poser sur le widget : .wc-acc
   ========================================================================= */

/* --- Widget "Accordéon" classique --- */
.wc-acc .elementor-accordion{
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-lg);
  overflow: hidden;
  background: var(--wc-surface);
}
.wc-acc .elementor-accordion-item{
  border: none !important;
  border-bottom: 1px solid var(--wc-line) !important;
}
.wc-acc .elementor-accordion-item:last-child{ border-bottom: none !important; }
.wc-acc .elementor-tab-title{
  padding: 18px 22px !important;
  background: transparent !important;
  font-family: var(--wc-f-display) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: -.015em;
  transition: background .18s;
}
.wc-acc .elementor-tab-title a{ color: var(--wc-txt) !important; }
.wc-acc .elementor-tab-title:hover{ background: var(--wc-surface-2) !important; }
.wc-acc .elementor-tab-title.elementor-active{ background: var(--wc-surface-2) !important; }
.wc-acc .elementor-tab-title.elementor-active a{ color: var(--wc-moss) !important; }
.wc-acc .elementor-tab-content{
  padding: 2px 22px 24px !important;
  background: var(--wc-surface-2) !important;
  border: none !important;
  color: var(--wc-txt-2);
  font-size: .94rem;
  line-height: 1.75;
}
.wc-acc .elementor-accordion-icon{ color: var(--wc-txt-3) !important; }
.wc-acc .elementor-active .elementor-accordion-icon{ color: var(--wc-moss) !important; }

/* --- Widget "Accordéon imbriqué" (basé sur <details>) --- */
.wc-acc .e-n-accordion{ display: grid; gap: 0; }
.wc-acc .e-n-accordion-item{
  background: var(--wc-surface) !important;
  border: 1px solid var(--wc-line) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
}
.wc-acc .e-n-accordion-item:first-child{ border-radius: var(--wc-r-lg) var(--wc-r-lg) 0 0 !important; }
.wc-acc .e-n-accordion-item:last-child{
  border-bottom: 1px solid var(--wc-line) !important;
  border-radius: 0 0 var(--wc-r-lg) var(--wc-r-lg) !important;
}
.wc-acc .e-n-accordion-item-title{
  padding: 18px 22px !important;
  font-family: var(--wc-f-display) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--wc-txt) !important;
  transition: background .18s;
}
.wc-acc .e-n-accordion-item-title:hover{ background: var(--wc-surface-2) !important; }
.wc-acc details[open] > .e-n-accordion-item-title{
  background: var(--wc-surface-2) !important;
  color: var(--wc-moss) !important;
}


/* =========================================================================
   15. ONGLETS ELEMENTOR (changelog par version)
   -------------------------------------------------------------------------
   Classe : .wc-tabs
   ========================================================================= */
.wc-tabs .elementor-tabs-wrapper{ gap: 8px; border: none !important; }
.wc-tabs .elementor-tab-desktop-title{
  padding: .5em 1em !important;
  border-radius: 99px !important;
  border: 1px solid var(--wc-line-2) !important;
  background: var(--wc-surface) !important;
  color: var(--wc-txt-2) !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  transition: all .2s var(--wc-ease);
}
.wc-tabs .elementor-tab-desktop-title:hover{
  color: var(--wc-txt) !important; border-color: var(--wc-line-3) !important;
}
.wc-tabs .elementor-tab-desktop-title.elementor-active{
  background: var(--wc-moss) !important;
  color: #04150B !important;
  border-color: var(--wc-moss) !important;
  font-weight: 600 !important;
}
.wc-tabs .elementor-tab-content{
  border: none !important; background: transparent !important; padding: 28px 0 0 !important;
}


/* =========================================================================
   16. MODULE NEWS — widget "Articles" d'Elementor Pro
   -------------------------------------------------------------------------
   Classe à poser sur le widget Articles : .wc-posts
   Pour la version "article vedette horizontal", ajoutez aussi .wc-posts--hero
   et réglez le widget sur Skin "Classique", 1 article, image à gauche.
   ========================================================================= */
.wc-posts .elementor-post{
  background: var(--wc-surface);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-lg);
  overflow: hidden;
  transition: border-color .25s var(--wc-ease),
              transform .25s var(--wc-ease),
              background .25s var(--wc-ease);
}
.wc-posts .elementor-post:hover{
  transform: translateY(-3px);
  background: var(--wc-surface-2);
  border-color: var(--wc-line-3);
}
.wc-posts .elementor-post__thumbnail{ border-radius: 0; }
.wc-posts .elementor-post__thumbnail img{ transition: transform .5s var(--wc-ease); }
.wc-posts .elementor-post:hover .elementor-post__thumbnail img{ transform: scale(1.05); }
.wc-posts .elementor-post__text{ padding: 22px; }
.wc-posts .elementor-post__title{
  font-family: var(--wc-f-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -.025em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.wc-posts .elementor-post__title a{ color: var(--wc-txt) !important; transition: color .2s; }
.wc-posts .elementor-post:hover .elementor-post__title a{ color: var(--wc-moss) !important; }
.wc-posts .elementor-post__excerpt p{
  color: var(--wc-txt-2) !important; font-size: .925rem !important; line-height: 1.6 !important;
}
.wc-posts .elementor-post__meta-data{
  font-family: var(--wc-f-mono) !important;
  font-size: .72rem !important;
  color: var(--wc-txt-4) !important;
  border-top: 1px solid var(--wc-line);
  padding-top: 14px !important;
  margin-top: 14px !important;
}
.wc-posts .elementor-post__meta-data a{ color: var(--wc-txt-3) !important; }

/* Badge de catégorie */
.wc-posts .elementor-post__badge{
  font-family: var(--wc-f-mono) !important;
  font-size: .66rem !important;
  font-weight: 500 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35em .7em !important;
  border-radius: 5px !important;
  background: var(--wc-moss-dk) !important;
  color: var(--wc-moss) !important;
  border: 1px solid rgba(95,206,132,.3);
  top: 14px !important; left: 14px !important;
}

/* Lien "Lire la suite" */
.wc-posts .elementor-post__read-more{
  color: var(--wc-moss) !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  text-decoration: none !important;
}

/* Article vedette horizontal */
.wc-posts--hero .elementor-post{ display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
.wc-posts--hero .elementor-post__thumbnail__link{ height: 100%; }
.wc-posts--hero .elementor-post__thumbnail{ height: 100%; min-height: 280px; padding-bottom: 0 !important; }
.wc-posts--hero .elementor-post__thumbnail img{ height: 100%; object-fit: cover; position: static !important; }
.wc-posts--hero .elementor-post__text{
  padding: clamp(26px,3.2vw,40px);
  display: flex; flex-direction: column; justify-content: center;
}
.wc-posts--hero .elementor-post__title{ font-size: clamp(1.35rem,2.4vw,1.95rem) !important; }
.wc-posts--hero .elementor-post__excerpt p{ font-size: 1rem !important; line-height: 1.68 !important; }
@media (max-width:860px){
  .wc-posts--hero .elementor-post{ grid-template-columns: 1fr; }
  .wc-posts--hero .elementor-post__thumbnail{ min-height: 0; }
}

/* Pagination / filtres du widget Articles */
.wc-posts .elementor-pagination .page-numbers{
  color: var(--wc-txt-2) !important;
  border: 1px solid var(--wc-line-2);
  border-radius: 8px;
  padding: .4em .8em;
}
.wc-posts .elementor-pagination .page-numbers.current{
  background: var(--wc-moss) !important; color: #04150B !important; border-color: var(--wc-moss);
}


/* =========================================================================
   17. TIMELINE (journal de bord)
   -------------------------------------------------------------------------
   .wc-tl sur le conteneur, .wc-tl-i sur chaque étape.
   ========================================================================= */
.wc-tl{ position: relative; padding-left: 34px; }
.wc-tl::before{
  content:""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--wc-line-2) 8%, var(--wc-line-2) 92%, transparent);
}
.wc-tl-i{ position: relative; }
.wc-tl-i::before{
  content:""; position: absolute; left: -30px; top: 8px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--wc-bg); border: 2px solid var(--wc-line-3);
}
.wc-tl-i--on::before{
  border-color: var(--wc-moss); background: var(--wc-moss);
  box-shadow: 0 0 0 4px rgba(95,206,132,.15);
}


/* =========================================================================
   18. JAUGE DE DONS
   -------------------------------------------------------------------------
   Utilisable avec le widget Barre de progression d'Elementor : .wc-goal
   ========================================================================= */
.wc-goal .elementor-progress-wrapper{
  height: 9px !important;
  border-radius: 99px !important;
  background: var(--wc-surface-3) !important;
  border: 1px solid var(--wc-line);
  overflow: hidden;
}
.wc-goal .elementor-progress-bar{
  background: linear-gradient(90deg, var(--wc-gold), #F0CB7E) !important;
  border-radius: 99px;
}
.wc-goal .elementor-progress-percentage,
.wc-goal .elementor-title{ display: none !important; }
.wc-goal-amount{
  font-family: var(--wc-f-display); font-size: 2rem; font-weight: 700;
  letter-spacing: -.03em; color: var(--wc-txt);
}
.wc-goal-amount span{ color: var(--wc-txt-3); font-size: 1.1rem; font-weight: 500; }

/* Icône des paliers de don */
.wc-tier__ic{ font-size: 1.8rem; line-height: 1; margin-bottom: 12px; }


/* =========================================================================
   19. FORMULAIRE (Contact Form 7 ou Formulaire Elementor Pro)
   -------------------------------------------------------------------------
   Classe .wc-form sur le conteneur qui entoure le formulaire.
   ========================================================================= */
.wc-form label,
.wc-form .elementor-field-label{
  font-size: .85rem !important; font-weight: 500 !important;
  color: var(--wc-txt-2) !important; margin-bottom: 7px; display: block;
}
.wc-form input[type=text],
.wc-form input[type=email],
.wc-form input[type=tel],
.wc-form textarea,
.wc-form select,
.wc-form .elementor-field-textual{
  width: 100%;
  padding: 12px 14px !important;
  border-radius: var(--wc-r) !important;
  background: var(--wc-surface) !important;
  border: 1px solid var(--wc-line-2) !important;
  color: var(--wc-txt) !important;
  font-family: var(--wc-f-body) !important;
  font-size: .94rem !important;
  transition: border-color .2s, box-shadow .2s;
}
.wc-form textarea{ min-height: 150px; resize: vertical; line-height: 1.6; }
.wc-form input:focus,
.wc-form textarea:focus,
.wc-form select:focus,
.wc-form .elementor-field-textual:focus{
  outline: none;
  border-color: var(--wc-moss) !important;
  box-shadow: 0 0 0 3px rgba(95,206,132,.12) !important;
}
.wc-form ::placeholder{ color: var(--wc-txt-4) !important; }
.wc-form input[type=submit],
.wc-form .wpcf7-submit,
.wc-form .elementor-button[type=submit]{
  background: linear-gradient(180deg, var(--wc-moss), var(--wc-moss-2)) !important;
  color: #04150B !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: var(--wc-r) !important;
  padding: .78em 1.35em !important;
  font-weight: 600 !important;
  font-size: .925rem !important;
  cursor: pointer;
  transition: transform .2s var(--wc-ease);
}
.wc-form input[type=submit]:hover,
.wc-form .wpcf7-submit:hover{ transform: translateY(-1px); }
.wc-form .wpcf7-not-valid-tip{ color: var(--wc-blood) !important; font-size: .8rem !important; }
.wc-form .wpcf7-response-output{
  border-radius: var(--wc-r) !important;
  border: 1px solid var(--wc-line-2) !important;
  color: var(--wc-txt-2) !important;
  font-size: .88rem;
}


/* =========================================================================
   20. HERO
   -------------------------------------------------------------------------
   .wc-hero sur le conteneur du hero.
   L'image de fond est gérée ICI, plus dans Elementor : laissez le champ
   Style > Arrière-plan du conteneur vide, sinon les deux se superposent.

   ::before  = l'image, en parallaxe
   ::after   = le voile de lisibilité + le halo lunaire

   IMPORTANT : ne jamais poser de `filter` sur .wc-hero::before.
   Un filter crée un bloc conteneur, et background-attachment: fixed
   s'ancre alors sur l'élément au lieu de la fenêtre. La parallaxe meurt
   et une bande sombre apparaît sur le bord droit.
   Pour flouter le fond, flouter le FICHIER image en amont.
   ========================================================================= */
.wc-hero{
  position: relative;
  overflow: hidden;
  /* Sans ceci, le z-index du voile ::after s'échappe dans le contexte
     de .wc-page et recouvre les sections suivantes qui remontent sur
     le hero par marge négative (bandeau Patch, etc.). */
  isolation: isolate;
}

/* Calque image en parallaxe. inset: 0 et pas de débord : avec `fixed`,
   tout débord se retrouve hors fenêtre et donc sans image. */
.wc-hero::before{
  content:""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* ↓↓↓ REMETTRE ICI VOTRE URL D'IMAGE DÉJÀ EN PLACE ↓↓↓ */
  background-image: url("https://wildcraftmc.fr/wp-content/uploads/2026/08/image-3-1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Voile de lisibilité et halo lunaire.
   La première couche plate remplace le brightness() qu'on ne peut plus
   appliquer au calque image : c'est elle qui règle l'assombrissement
   général du paysage. */
.wc-hero::after{
  content:""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 92% 4%,
      rgba(200,216,255,.13), rgba(156,180,236,.05) 45%, transparent 70%),
    radial-gradient(90% 70% at 22% 18%, rgba(156,180,236,.10), transparent 60%),
    radial-gradient(60% 55% at 85% 90%, rgba(95,206,132,.09), transparent 65%),
    linear-gradient(180deg,
      rgba(6,8,13,.34) 0%,
      rgba(6,8,13,.56) 55%,
      var(--wc-bg) 100%);
}

.wc-hero > *{ position: relative; z-index: 2; }

/* La parallaxe est cassée ou saccadée sur iOS et sur la plupart des mobiles */
@media (max-width:1024px){
  .wc-hero::before{ background-attachment: scroll; }
}

/* -------------------------------------------------------------------------
   Logo du hero : classe .wc-hero-logo sur le widget Image.
   Le halo est un pseudo-élément placé DERRIÈRE l'image, dans les deux
   teintes de la charte : vert au cœur, bleu lunaire en périphérie.
   ------------------------------------------------------------------------- */
.wc-hero-logo{
  position: relative;
  display: block;
}
.wc-hero-logo::before{
  content:""; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 420px; height: 420px;
  background:
    radial-gradient(circle,
      rgba(95,206,132,.26) 0%,
      rgba(95,206,132,.11) 32%,
      rgba(156,180,236,.09) 55%,
      transparent 72%);
  filter: blur(6px);
}
.wc-hero-logo img{
  position: relative; z-index: 1;
  max-height: 250px;
  width: auto;
  filter: drop-shadow(0 0 22px rgba(6,8,13,.85))
          drop-shadow(0 0 40px rgba(95,206,132,.22));
  transition: transform .3s ease;
}
.wc-hero-logo img:hover{ transform: scale(1.05); }

@media (max-width:768px){
  .wc-hero-logo::before{ width: 300px; height: 300px; }
  .wc-hero-logo img{ max-height: 180px; }
}

/* Dégradé vert-bleu sur une portion de titre.
   Dans Elementor, écrivez : Explorez <em>WildCraft</em> */
.wc-grad em,
.wc-grad .elementor-heading-title em{
  font-style: normal;
  background: linear-gradient(105deg, var(--wc-moss) 10%, var(--wc-moon) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* =========================================================================
   21. BLOC D'APPEL FINAL
   ========================================================================= */
.wc-cta{
  position: relative; overflow: hidden;
  border-radius: var(--wc-r-xl) !important;
  border: 1px solid var(--wc-line-2) !important;
  background: var(--wc-surface) !important;
}
.wc-cta::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(95,206,132,.14), transparent 62%),
    radial-gradient(50% 100% at 88% 100%, rgba(156,180,236,.1), transparent 60%);
}
.wc-cta > *{ position: relative; z-index: 1; }


/* =========================================================================
   22. PASTILLE DE STATUT SERVEUR
   -------------------------------------------------------------------------
   Voir functions-snippets.php pour le shortcode [wildcraft_status]
   ========================================================================= */
.wc-status{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--wc-f-mono); font-size: .78rem; color: var(--wc-txt-2);
}
.wc-status b{ color: var(--wc-txt); font-weight: 500; }
.wc-dot{ width: 7px; height: 7px; border-radius: 99px; background: var(--wc-moss); flex: none; }
.wc-dot--live{ animation: wc-pulse 2.4s infinite; }
.wc-dot--off{ background: var(--wc-txt-4); animation: none; }
@keyframes wc-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(95,206,132,.55); }
  70%{ box-shadow: 0 0 0 7px rgba(95,206,132,0); }
  100%{ box-shadow: 0 0 0 0 rgba(95,206,132,0); }
}


/* =========================================================================
   23. EN-TÊTE
   -------------------------------------------------------------------------
   Gabarit à importer : wildcraft-header.json
   Classes utilisées : wc-topbar, wc-nav, wc-brand
   ========================================================================= */

/* Barre de statut, au-dessus de la navigation */
.wc-topbar{
  background: var(--wc-bg-2) !important;
  border-bottom: 1px solid var(--wc-line) !important;
  font-family: var(--wc-f-mono);
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--wc-txt-3);
  padding: 6px 0 !important;
  min-height: 34px;
}
.wc-topbar p{ margin: 0; font-size: .72rem; color: var(--wc-txt-3); }
.wc-topbar a{ color: var(--wc-txt-3); text-decoration: none; transition: color .2s; }
.wc-topbar a:hover{ color: var(--wc-txt); }
.wc-topbar .wc-gold-link a,
.wc-topbar a.wc-gold-link{ color: var(--wc-gold); }

/* Le shortcode [wildcraft_status format="version"] ne renvoie que le
   numéro. Le libellé est posé ici pour rester fidèle à la maquette
   (« Version 6.2 », le numéro en gras). */
.wc-tb-ver{ font-weight: 600; color: var(--wc-txt-2); white-space: nowrap; }
.wc-tb-ver::before{ content: "Version "; font-weight: 400; color: var(--wc-txt-3); }
@media (max-width: 760px){ .wc-tb-ver{ display: none !important; } }

/* Adresse IP copiable : texte + icône sur une seule ligne */
.wc-ip{ display: inline-flex !important; align-items: center; gap: 6px;
        white-space: nowrap; }
.wc-ip svg{ opacity: .55; flex: none; }
.wc-ip:hover svg{ opacity: 1; }
.wc-topbar .wc-row{ gap: 18px; }

/* Barre de navigation */
.wc-nav{
  background: rgba(6,8,13,.82) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--wc-line) !important;
  min-height: 68px;
  padding: 10px 0 !important;
}

/* Logo + nom du site */
/* flex-direction explicite : Elementor pose par défaut column sur tout
   conteneur (flex-direction:var(--flex-direction) dans frontend.min.css).
   Une règle qui ne déclare que display:flex laisse donc la colonne gagner. */
.wc-brand{ display: flex !important; flex-direction: row !important;
           align-items: center; gap: 11px; }
.wc-brand img{ height: 34px; width: auto; }
.wc-brand-txt,
.wc-brand-txt .elementor-heading-title{
  font-family: var(--wc-f-display) !important;
  font-weight: 800 !important;
  font-size: 1.12rem !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
  color: var(--wc-txt) !important;
}
.wc-brand-txt em{ font-style: normal; color: var(--wc-moss); }

/* Menu principal (widget Menu de navigation d'Elementor Pro) */
.wc-menu .elementor-nav-menu > li > a{
  font-family: var(--wc-f-body) !important;
  font-size: .905rem !important;
  font-weight: 500 !important;
  color: var(--wc-txt-2) !important;
  padding: 9px 13px !important;
  border-radius: 8px;
  transition: color .18s, background .18s;
}
.wc-menu .elementor-nav-menu > li > a:hover,
.wc-menu .elementor-nav-menu > li > a.elementor-item-active{
  color: var(--wc-txt) !important;
  background: var(--wc-surface-2) !important;
}
.wc-menu .elementor-nav-menu > li > a.elementor-item-active{ position: relative; }
.wc-menu .elementor-nav-menu > li > a.elementor-item-active::after{
  content:""; position: absolute; left: 13px; right: 13px; bottom: -12px;
  height: 2px; background: var(--wc-moss); border-radius: 2px;
}

/* Sous-menus */
.wc-menu .elementor-nav-menu--dropdown,
.wc-menu .sub-menu{
  background: var(--wc-surface) !important;
  border: 1px solid var(--wc-line-2) !important;
  border-radius: var(--wc-r-lg) !important;
  padding: 8px !important;
  box-shadow: var(--wc-sh) !important;
}
.wc-menu .sub-menu a{
  border-radius: 8px !important;
  font-size: .885rem !important;
  color: var(--wc-txt-2) !important;
  padding: 9px 12px !important;
}
.wc-menu .sub-menu a:hover{
  background: var(--wc-surface-3) !important;
  color: var(--wc-txt) !important;
}

/* Menu mobile */
.wc-menu .elementor-menu-toggle{
  color: var(--wc-txt) !important;
  background: var(--wc-surface-2) !important;
  border: 1px solid var(--wc-line-2) !important;
  border-radius: 9px !important;
  padding: 10px !important;
}


/* =========================================================================
   24. PIED DE PAGE
   -------------------------------------------------------------------------
   Gabarit à importer : wildcraft-footer.json
   ========================================================================= */
.wc-foot{
  background: var(--wc-bg-2) !important;
  border-top: 1px solid var(--wc-line) !important;
  padding-block: clamp(48px,6vw,72px) 0 !important;
  color: var(--wc-txt-2);
}
.wc-foot p{ color: var(--wc-txt-3); font-size: .9rem; line-height: 1.7; }

/* Colonnes de liens */
.wc-foot-col > .elementor-widget-heading .elementor-heading-title,
.wc-foot-title{
  font-family: var(--wc-f-mono) !important;
  font-size: .68rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--wc-txt-3) !important;
  margin-bottom: 14px;
}
.wc-foot-col ul{ list-style: none; padding: 0; margin: 0; }
.wc-foot-col li{ margin: 0; }
.wc-foot-col a{
  display: block;
  padding: 5px 0;
  font-size: .885rem;
  color: var(--wc-txt-2);
  text-decoration: none;
  transition: color .18s;
}
.wc-foot-col a:hover{ color: var(--wc-moss); }

/* Bas de page */
.wc-foot-bottom{
  border-top: 1px solid var(--wc-line) !important;
  padding-block: 22px !important;
  margin-top: 44px;
  font-size: .8rem;
  color: var(--wc-txt-4);
}
.wc-foot-bottom p{ font-size: .8rem; color: var(--wc-txt-4); margin: 0; }
.wc-foot-bottom a{ color: var(--wc-txt-4); text-decoration: none; }
.wc-foot-bottom a:hover{ color: var(--wc-txt-2); }
.wc-foot-legal p{ font-size: .76rem !important; line-height: 1.6; color: var(--wc-txt-4) !important; }


/* =========================================================================
   26. FILTRES
   -------------------------------------------------------------------------
   Généré par filter_bar() dans wc_builder.py.
   ========================================================================= */
.wc-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.wc-filters button{
  padding:.5em 1em !important; border-radius:99px !important; font-size:.85rem !important;
  font-weight:500 !important; border:1px solid var(--wc-line-2) !important;
  color:var(--wc-txt-2) !important; background:var(--wc-surface) !important;
  transition:all .2s var(--wc-ease); cursor:pointer;
}
.wc-filters button:hover{ color:var(--wc-txt) !important; border-color:var(--wc-line-3) !important; }
.wc-filters button.is-on{
  background:var(--wc-moss) !important; color:#04150B !important;
  border-color:var(--wc-moss) !important; font-weight:600 !important;
}


/* =========================================================================
   27. VISIONNEUSE PLEIN ÉCRAN (galerie)
   -------------------------------------------------------------------------
   Généré par lightbox_script() dans wc_builder.py.
   ========================================================================= */
.wc-lb{
  position:fixed; inset:0; z-index:9999; background:rgba(4,6,10,.94);
  backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:40px;
}
.wc-lb.is-on{ display:flex; }
.wc-lb img{ max-width:92vw; max-height:86vh; border-radius:var(--wc-r); box-shadow:var(--wc-sh); }
.wc-lb__x{
  position:absolute; top:22px; right:26px; font-size:1.8rem; color:var(--wc-txt-2);
  line-height:1; background:none; border:none; cursor:pointer;
}
.wc-lb__x:hover{ color:var(--wc-txt); }
.wc-lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; background:var(--wc-surface);
  border:1px solid var(--wc-line-2); color:var(--wc-txt); font-size:1.2rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.wc-lb__nav:hover{ background:var(--wc-surface-3); }
.wc-lb__prev{ left:24px; } .wc-lb__next{ right:24px; }
@media (max-width:767px){ .wc-lb__nav{ display:none; } }


/* =========================================================================
   28. SOMMAIRE COLLANT (règlement)
   -------------------------------------------------------------------------
   Généré par toc_widget() dans wc_builder.py.
   ========================================================================= */
.wc-rules-grid{
  display:grid !important; grid-template-columns:250px 1fr !important;
  gap:48px !important; align-items:start !important;
}
.wc-toc{ position:sticky; top:24px; }
.wc-toc b{
  display:block; font-family:var(--wc-f-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--wc-txt-3); margin-bottom:14px;
}
.wc-toc a{
  display:flex; gap:10px; padding:8px 12px; border-radius:8px;
  font-size:.875rem; color:var(--wc-txt-2); border-left:2px solid transparent;
  transition:all .18s; text-decoration:none; cursor:pointer;
}
.wc-toc a:hover{ color:var(--wc-txt); background:var(--wc-surface); }
.wc-toc a.is-on{ color:var(--wc-moss); border-left-color:var(--wc-moss); background:var(--wc-surface); }
.wc-toc a span{ font-family:var(--wc-f-mono); font-size:.7rem; color:var(--wc-txt-4); }
@media (max-width:1024px){
  .wc-rules-grid{ grid-template-columns:1fr !important; }
  .wc-toc{ position:static; }
  .wc-toc > div{ display:grid; grid-template-columns:repeat(2,1fr); gap:4px; }
}
@media (max-width:600px){
  .wc-toc > div{ grid-template-columns:1fr; }
}


/* Enveloppes purement structurelles (widgets HTML auto-générés) */
.wc-filters-outer,.wc-lb-script,.wc-toc-outer{ display:block; }


/* =========================================================================
   25. DIVERS
   ========================================================================= */
.wc-page ::-webkit-scrollbar{ width: 11px; height: 11px; }
.wc-page ::-webkit-scrollbar-track{ background: var(--wc-bg); }
.wc-page ::-webkit-scrollbar-thumb{
  background: var(--wc-line-2); border-radius: 99px; border: 3px solid var(--wc-bg);
}

/* Neutralise l'espacement par défaut des conteneurs Elementor imbriqués */
.wc-page .e-con-inner{ padding-inline: 0; }

@media (prefers-reduced-motion: reduce){
  .wc-page *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   FORMULAIRE DE CONTACT — bouton d'envoi
   -------------------------------------------------------------------------
   Contact Form 7 ignore la syntaxe [submit "..." class:wc-submit], le
   bouton garde donc sa classe d'origine wpcf7-submit. On cible ça
   directement plutôt qu'une classe custom qui n'existe jamais.
   ========================================================================= */
.wc-submit-row input[type="submit"]{
  padding: 12px 32px !important;
  align-self: flex-start;
  flex: 0 0 auto;
  width: auto !important;
}
.wc-submit-row{
  margin-top: 20px;
}
.wc-submit-row input[type="submit"]{
  align-self: flex-start;
  flex: 0 0 auto;
  width: auto !important;
  padding: 10px 24px !important;
  font-size: .875rem !important;
}
.elementor-element-5a301785.wc-pad-lg{
  padding-bottom: 12px !important;
}
.wc-field{
  margin-top: 20px;
}
.wc-field label{
  margin-bottom: 6px;
}
.wc-field:first-child{
  margin-top: 0;
}