/*
#|#|#|##|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|
#|                                                                                                                            						 #|
#|  ███╗   ██╗██╗   ██╗ ██████╗██╗     ███████╗██╗   ██╗███████╗    ███████╗██╗   ██╗███████╗████████╗███████╗███╗   ███╗              ██╗██████╗    #|
#|  ████╗  ██║██║   ██║██╔════╝██║     ██╔════╝██║   ██║██╔════╝    ██╔════╝╚██╗ ██╔╝██╔════╝╚══██╔══╝██╔════╝████╗ ████║    ██╗   ██╗███║╚════██╗   #|
#|  ██╔██╗ ██║██║   ██║██║     ██║     █████╗  ██║   ██║███████╗    ███████╗ ╚████╔╝ ███████╗   ██║   █████╗  ██╔████╔██║    ██║   ██║╚██║ █████╔╝   #|
#|  ██║╚██╗██║██║   ██║██║     ██║     ██╔══╝  ██║   ██║╚════██║    ╚════██║  ╚██╔╝  ╚════██║   ██║   ██╔══╝  ██║╚██╔╝██║    ╚██╗ ██╔╝ ██║██╔═══╝    #|
#|  ██║ ╚████║╚██████╔╝╚██████╗███████╗███████╗╚██████╔╝███████║    ███████║   ██║   ███████║   ██║   ███████╗██║ ╚═╝ ██║     ╚████╔╝  ██║███████╗   #|
#|  ╚═╝  ╚═══╝ ╚═════╝  ╚═════╝╚══════╝╚══════╝ ╚═════╝ ╚══════╝    ╚══════╝   ╚═╝   ╚══════╝   ╚═╝   ╚══════╝╚═╝     ╚═╝      ╚═══╝   ╚═╝╚══════╝   #|
#|                                                                                                                           						 #|
#|           Theme NUCLEUS v12.0.0 for Wordpress, héritage SYSTEM TEMPLATE - fait avec ♥ par Romain-NT - Gam'NT Services - 2026                      #|
#|                                                                                                                      					         #|
#|#|#|##|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|#|
#|
#|  LEGENDE DE LA STRUCTURE DU THEME NUCLEUS SYSTEM - Gam'NT Services
#|  ================================================================
#|
#|  0. CORE
#|   - 0.1 Polices
#|   - 0.2 Variables
#|   - 0.3 Base globale
#|   - 0.4 Accessibilite
#|
#|  1. LAYOUT
#|   - 1.1 Conteneur
#|   - 1.2 Systeme Glass
#|   - 1.3 Structure globale
#|
#|  2. SYSTEME EN-TETE
#|   - 2.1 Base du header
#|   - 2.2 Header top
#|   - 2.3 Header bottom
#|   - 2.4 Logo
#|   - 2.5 Liens rapides
#|   - 2.6 Etats scroll / hover
#|
#|  3. SYSTEME NAVIGATION
#|   - 3.1 Navigation desktop
#|   - 3.2 Sous-menus desktop
#|   - 3.3 Bouton menu
#|   - 3.4 Overlay menu
#|   - 3.5 Panneau menu responsive
#|   - 3.6 Footer du panneau
#|
#|  4. SYSTEME CTA
#|   - 4.1 Boutons generiques
#|   - 4.2 Bouton CTA header
#|
#|  5. COMPOSANTS
#|   - 5.1 Loader
#|   - 5.2 Animations Nucleus
#|
#|  6. REGLES RESPONSIVE
#|   - 6.1 Desktop
#|   - 6.2 Tablette
#|   - 6.3 Mobile
#|   - 6.4 Visibilite CTA / Menu
#|
#|  7. SYSTEME PAGE ACCUEIL NUCLEUS → voir home.css
#|  10. PAGES INTERIEURES NUCLEUS → voir pages.css
#|
#|  8. SYSTEME PIED DE PAGE NUCLEUS
#|   - 8.1 Pied de page — base
#|   - 8.2 Pied de page — bas
#|   - 8.3 Pied de page responsive
#|
#|  9. NUCLEUS RETOUR EN HAUT
#|
====================-FIN-=======================
*/

/*======================================================
=           0.0 - NUCLEUS CORE                        =
======================================================*/

/* --===== 0.1 Polices =====-- */

@font-face{
  font-family:"Sora";
  src:url("../fonts/sora-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Sora";
  src:url("../fonts/sora-medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Sora";
  src:url("../fonts/sora-semibold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Sora";
  src:url("../fonts/sora-bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Sora";
  src:url("../fonts/sora-extrabold.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

/* --===== 0.2 Variables =====-- */

:root{
  --brand-green:#158745;
  --brand-gold:#f4ce35;
  --bg:#100d05;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --muted-2:rgba(255,255,255,.56);

  --section-light:#ECF6F0;
  --section-light-alt:#e4efe6;
  --section-light-text:#1a2a1a;
  --section-light-muted:#4a5a4a;
  --section-light-border:rgba(21,135,69,.10);

  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:26px;

  --nav-item-h:58px;
  --ease-nucleus:280ms cubic-bezier(.22,1,.36,1);
  --ease-nucleus-slow:600ms cubic-bezier(.22,1,.36,1);

  --bp-menu-switch:840px;
  --bp-cta-hide:580px;

  --header-top-height:72px;
  --header-bottom-height:58px;
  --header-total-height:calc(var(--header-top-height) + var(--header-bottom-height));

  --header-bg-solid:rgba(10,10,10,.96);
  --header-bg-blur:rgba(10,10,10,.62);
  --header-border:rgba(255,255,255,.10);
  --header-shadow-soft:0 10px 30px rgba(0,0,0,.16);
  --header-shadow-strong:0 18px 40px rgba(0,0,0,.28);
  --header-text:#ffffff;
  --header-ease:var(--ease-nucleus);

  --glass-bg:rgba(255,255,255,.08);
  --glass-border:rgba(255,255,255,.15);
  --glass-blur:14px;
  --glass-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* --===== 0.3 Base globale =====-- */

html{
  overflow-y:scroll;
  scrollbar-gutter:stable;
}

body{
  margin:0;
  font-family:"Sora", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-top:var(--header-total-height);
}

h1{
  color:var(--brand-gold);
}

a{
  color:var(--brand-green);
}

img{
  max-width:100%;
  height:auto;
}

/* --===== 0.4 Accessibilite =====-- */

:focus-visible{
  outline:2px solid var(--brand-gold);
  outline-offset:3px;
  border-radius:8px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
}

.skip-link:focus{
  left:16px;
  top:16px;
  z-index:99999;
  display:inline-block;
  padding:.75rem 1rem;
  background:#000;
  color:#fff;
}

.screen-reader-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

/*======================================================
=           1.0 - NUCLEUS LAYOUT                      =
======================================================*/

/* --===== 1.1 Conteneur =====-- */

.container{
  width:min(1600px, calc(100% - 80px));
  margin:0 auto;
}

/* --===== 1.2 Systeme Glass =====-- */

.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
}

/* --===== 1.3 Structure globale =====-- */
/* Reserve pour les futurs espacements globaux */

/*======================================================
=           2.0 - SYSTEME EN-TETE NUCLEUS               =
======================================================*/

/* --===== 2.1 Base du header =====-- */

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1200;
  color:#fff;
}

.admin-bar .site-header{
  top:32px;
}

/* --===== 2.2 Header top =====-- */

.site-header__top,
.site-header__bottom{
  position:relative;
  width:100%;
  background:var(--header-bg-solid);
  transition:
    background var(--ease-nucleus),
    backdrop-filter var(--ease-nucleus),
    -webkit-backdrop-filter var(--ease-nucleus),
    border-color var(--ease-nucleus),
    transform var(--ease-nucleus),
    box-shadow var(--ease-nucleus),
    opacity var(--ease-nucleus);
}

.site-header__top{
  z-index:2;
  min-height:var(--header-top-height);
  border-bottom:1px solid rgba(255,255,255,.04);
}

.site-header__top-inner{
  min-height:var(--header-top-height);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
}

/* --===== 2.3 Header bottom =====-- */

.site-header__bottom{
  z-index:1;
  min-height:var(--header-bottom-height);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.site-header__bottom-inner{
  min-height:var(--header-bottom-height);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* --===== 2.4 Logo =====-- */

.site-header__top-left{
  min-width:1px;
}

.site-header__brand{
  justify-self:center;
}

.brand,
.brand-logo{
  display:flex;
  align-items:center;
  justify-content:center;
}

.site-header__logo-link{
  color:inherit;
  text-decoration:none;
}

.site-header__logo-link img.custom-logo,
.site-header__brand .custom-logo{
  display:block;
  width:auto;
  max-height:65px;
}

.site-header__logo-text{
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
}

/* --===== 2.5 Liens rapides =====-- */

.site-header__top-left,
.site-header__top-right{
  display:flex;
  align-items:center;
  gap:.7rem;
}

.site-header__top-left{
  justify-self:start;
}

.site-header__top-right{
  justify-self:end;
}

.site-header__social{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.site-header__icon-link,
.site-header__phone{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  min-width:32px;
  border-radius:999px;
  color:var(--header-text);
  text-decoration:none;
  transition:
    background var(--header-ease),
    color var(--header-ease),
    transform var(--header-ease),
    box-shadow var(--header-ease),
    border-color var(--header-ease);
}

.site-header__icon-link{
  width:32px;
  min-width:32px;
  padding:0;
}

.site-header__phone{
  gap:.7rem;
  padding:0 1rem;
}

.site-header__icon-link svg,
.site-header__phone svg{
  display:block;
  width:24px;
  height:24px;
  flex:0 0 auto;
  transition:stroke .3s ease, fill .3s ease, filter .3s ease;
}

/* Hover commun — passage du blanc au GRADIENT vert->dore */
/* Technique : on cible les attributs stroke/fill du SVG inline
   et on les remplace par url(#nucleus-hover-gradient) defini dans le footer.
   C'est la methode pro utilisee par Stripe, GitHub, etc. */

/* Icones LUCIDE OUTLINE (stroke) : mail, phone, arrow-up-to-line */
.site-header__icon-link:hover svg [stroke="#ffffff"],
.site-header__phone:hover svg [stroke="#ffffff"],
.site-header__icon-link:focus-visible svg [stroke="#ffffff"],
.site-header__phone:focus-visible svg [stroke="#ffffff"]{
  stroke:url(#nucleus-hover-gradient);
}

/* Icones MARQUES (fill) : facebook, instagram */
.site-header__icon-link:hover svg [fill="#ffffff"],
.site-header__phone:hover svg [fill="#ffffff"],
.site-header__icon-link:focus-visible svg [fill="#ffffff"],
.site-header__phone:focus-visible svg [fill="#ffffff"]{
  fill:url(#nucleus-hover-gradient);
}

/* Glow dore subtil au hover (effet premium chaleureux) */
.site-header__icon-link:hover svg,
.site-header__phone:hover svg,
.site-header__icon-link:focus-visible svg,
.site-header__phone:focus-visible svg{
  filter:drop-shadow(0 0 6px rgba(244,206,53,.45));
}

/* Téléphone — vibration circulaire */
.site-header__phone:hover svg{
  animation:nucleus-ring 0.6s ease 1;
}

@keyframes nucleus-ring{
  0%{ transform:rotate(0deg); }
  10%{ transform:rotate(14deg); }
  20%{ transform:rotate(-12deg); }
  30%{ transform:rotate(10deg); }
  40%{ transform:rotate(-8deg); }
  50%{ transform:rotate(6deg); }
  60%{ transform:rotate(-4deg); }
  70%{ transform:rotate(2deg); }
  80%{ transform:rotate(-1deg); }
  100%{ transform:rotate(0deg); }
}

/* Mail — heartbeat pulse */
.site-header__icon-link[aria-label*="mail" i]:hover svg,
.site-header__icon-link[aria-label*="email" i]:hover svg{
  animation:nucleus-heartbeat 0.6s ease 1;
}

/* Facebook — heartbeat pulse */
.site-header__icon-link[aria-label*="acebook" i]:hover svg{
  animation:nucleus-heartbeat 0.6s ease 1;
}

/* Instagram — heartbeat pulse */
.site-header__icon-link[aria-label*="nstagram" i]:hover svg{
  animation:nucleus-heartbeat 0.6s ease 1;
}

@keyframes nucleus-heartbeat{
  0%{ transform:scale(1); }
  15%{ transform:scale(1.2); }
  30%{ transform:scale(1); }
  45%{ transform:scale(1.12); }
  60%{ transform:scale(1); }
  100%{ transform:scale(1); }
}

.site-header__icon-label{
  display:none;
}

.site-header__phone-text{
  font-size:.95rem;
  line-height:1;
  white-space:nowrap;
}

/* --===== 2.6 Etats scroll / hover =====-- */

.site-header.is-scrolled .site-header__top{
  background:var(--header-bg-blur);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--header-shadow-soft);
  border-bottom-color:var(--header-border);
}

.site-header.is-scrolling-down .site-header__bottom{
  transform:translateY(calc(-1 * var(--header-bottom-height)));
  opacity:0;
  pointer-events:none;
}

.site-header.is-scrolling-up .site-header__top,
.site-header.is-scrolling-up .site-header__bottom{
  background:var(--header-bg-blur);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--header-shadow-soft);
  border-bottom-color:var(--header-border);
}

.site-header.is-scrolling-up .site-header__bottom{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.site-header.is-at-top .site-header__top,
.site-header.is-at-top .site-header__bottom{
  background:var(--header-bg-solid);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

.site-header.is-header-hover .site-header__top,
.site-header.is-header-hover .site-header__bottom{
  background:var(--header-bg-solid);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:var(--header-shadow-strong);
}

.site-header.is-scrolling-down.is-header-hover .site-header__bottom{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

/*======================================================
=           3.0 - SYSTEME NAVIGATION NUCLEUS           =
======================================================*/

/* --===== 3.1 Navigation desktop =====-- */

.site-nav{
  width:100%;
}

.site-nav__menu,
.menu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem, 2vw, 2rem);
  margin:0;
  padding:0;
  list-style:none;
}

.site-nav__menu > li,
.menu > li{
  position:relative;
}

.site-nav__menu > li > a,
.menu > li > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:var(--header-bottom-height);
  color:#fff;
  text-decoration:none;
  font-size:.9rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.88;
  transition:
    color var(--ease-nucleus),
    opacity var(--ease-nucleus);
}

.site-nav__menu > li > a:hover,
.menu > li > a:hover{
  opacity:1;
}

.site-nav__menu > li > a::after,
.menu > li > a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:12px;
  width:100%;
  height:2px;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      rgba(21,135,69,0) 0%,
      rgba(21,135,69,.55) 12%,
      rgba(21,135,69,.92) 30%,
      rgba(126,160,31,.96) 50%,
      rgba(244,206,53,.9) 75%,
      rgba(244,206,53,.45) 86%,
      rgba(244,206,53,0) 100%
    );
  box-shadow:
    0 0 10px rgba(244,206,53,.16),
    0 0 20px rgba(21,135,69,.12);
  transform:scaleX(0);
  transform-origin:left center;
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    opacity .32s ease;
}

.site-nav__menu > li:hover > a::after,
.site-nav__menu > li.current-menu-item > a::after,
.site-nav__menu > li.current-menu-ancestor > a::after,
.menu > li:hover > a::after,
.menu > li.current-menu-item > a::after,
.menu > li.current-menu-ancestor > a::after{
  transform:scaleX(1);
  box-shadow:
    0 0 12px rgba(244,206,53,.24),
    0 0 24px rgba(21,135,69,.16);
}

/* --===== 3.2 Sous-menus desktop =====-- */

.site-nav__menu .sub-menu,
.menu .sub-menu{
  position:absolute;
  top:calc(100% + .75rem);
  left:50%;
  min-width:240px;
  margin:0;
  padding:.8rem;
  list-style:none;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(14,14,14,.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 50px rgba(0,0,0,.28);
  transform:translate(-50%, 8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity var(--ease-nucleus),
    transform var(--ease-nucleus),
    visibility var(--ease-nucleus);
}

.site-nav__menu li:hover > .sub-menu,
.site-nav__menu li:focus-within > .sub-menu,
.menu li:hover > .sub-menu,
.menu li:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%, 0);
}

.site-nav__menu .sub-menu a,
.menu .sub-menu a{
  display:block;
  padding:.75rem .9rem;
  border-radius:12px;
  color:var(--muted);
  text-decoration:none;
  font-size:.94rem;
  transition:
    background var(--ease-nucleus),
    color var(--ease-nucleus),
    transform var(--ease-nucleus);
}

.site-nav__menu .sub-menu a:hover,
.site-nav__menu .sub-menu a:focus-visible,
.menu .sub-menu a:hover,
.menu .sub-menu a:focus-visible{
  background:rgba(255,255,255,.06);
  color:#fff;
  transform:translateX(3px);
}

/* --===== 3.3 Bouton menu =====-- */

.menu-toggle{
  display:none;
  position:relative;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s ease;
}

.menu-toggle:hover,
.menu-toggle:focus-visible{
  box-shadow:none;
  border:0;
  outline:0;
}

.menu-toggle__line{
  position:absolute;
  left:12px;
  width:24px;
  height:2px;
  border-radius:2px;
  background:#fff;
  transform-origin:center center;
  overflow:hidden;
  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    opacity .2s ease,
    width .3s ease,
    top .3s cubic-bezier(.22,1,.36,1);
}

.menu-toggle__line::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg, #158745, #f4ce35);
  opacity:0;
  transition:opacity .3s ease;
}

.menu-toggle__line:nth-child(1){ top:15px; }
.menu-toggle__line:nth-child(2){ top:23px; width:17px; margin-left:auto; }
.menu-toggle__line:nth-child(3){ top:31px; }

/* Hover — barre milieu s'allonge + lignes en gradient */
.menu-toggle:hover .menu-toggle__line:nth-child(2){
  width:24px;
}

.menu-toggle:hover .menu-toggle__line::after{
  opacity:1;
}

/* État ouvert — croix X */
.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(1){
  top:23px;
  transform:rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(2){
  opacity:0;
  width:0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(3){
  top:23px;
  transform:rotate(-45deg);
}

/* Hover etat ouvert — croix rouge */
.menu-toggle[aria-expanded="true"]:hover .menu-toggle__line::after{
  background:#e53935;
  opacity:1;
}

/* --===== 3.4 Overlay menu =====-- */

.menu-overlay{
  position:fixed;
  inset:0;
  z-index:0;
  background:rgba(0,0,0,.5);
  opacity:0;
  transition:opacity var(--ease-nucleus);
}

.menu-overlay.is-active{
  opacity:1;
}

/* --===== 3.5 Panneau menu responsive =====-- */

/* Menu ouvert — navbar ET panel : meme fond que le hover desktop */
.site-header.menu-is-open .site-header__top,
.site-header.menu-is-open ~ .mobile-panel{
  background:var(--header-bg-solid) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:var(--header-shadow-strong) !important;
  border-bottom-color:rgba(255,255,255,.06) !important;
}

.mobile-panel{
  position:fixed;
  top:var(--header-top-height);
  left:0;
  right:0;
  z-index:1198;
  max-height:calc(100dvh - var(--header-top-height));
  padding:0;
  background:var(--header-bg-solid);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  border-bottom:1px solid rgba(21,135,69,.15);
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    opacity .3s ease;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}

.admin-bar .mobile-panel{
  top:calc(var(--header-top-height) + 32px);
  max-height:calc(100dvh - var(--header-top-height) - 32px);
}

.mobile-panel.is-active{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

/* Header du panel — caché, on utilise le X du hamburger */

.mobile-panel__header{
  display:none;
}

/* Body — liens de navigation */

.mobile-panel__body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:1rem 1.5rem;
}

.mobile-panel__body .menu,
.mobile-panel__body .site-nav__menu{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}

/* Liens principaux */
.mobile-panel__body > .menu > li > a,
.mobile-panel__body > .site-nav__menu > li > a{
  display:flex;
  align-items:center;
  width:100%;
  padding:1.1rem 0;
  color:rgba(255,255,255,.8);
  text-decoration:none;
  font-size:1.05rem;
  font-weight:500;
  letter-spacing:.01em;
  text-transform:none;
  border:none;
  background:transparent;
  transition:
    color .25s ease;
}

/* Kill TOUS les pseudo-elements herites du desktop */
.mobile-panel__body > .menu > li > a::before,
.mobile-panel__body > .site-nav__menu > li > a::before,
.mobile-panel__body > .menu > li > a::after,
.mobile-panel__body > .site-nav__menu > li > a::after,
.mobile-panel__body .menu > li > a::after,
.mobile-panel__body .menu > li > a::before{
  display:none !important;
  content:none !important;
}

/* Séparateur entre les liens — sur le li, fixe */
.mobile-panel__body > .menu > li,
.mobile-panel__body > .site-nav__menu > li{
  border-bottom:1px solid rgba(255,255,255,.06);
}

.mobile-panel__body > .menu > li:last-child,
.mobile-panel__body > .site-nav__menu > li:last-child{
  border-bottom:0;
}

.mobile-panel__body > .menu > li:hover,
.mobile-panel__body > .site-nav__menu > li:hover{
  border-bottom-color:rgba(255,255,255,.06);
}

/* Hover — soulignement gradient identique au desktop (via background) */
.mobile-panel__body > .menu > li > a,
.mobile-panel__body > .site-nav__menu > li > a{
  background-image:
    linear-gradient(
      90deg,
      rgba(21,135,69,0) 0%,
      rgba(21,135,69,.55) 12%,
      rgba(21,135,69,.92) 30%,
      rgba(126,160,31,.96) 50%,
      rgba(244,206,53,.9) 75%,
      rgba(244,206,53,.45) 86%,
      rgba(244,206,53,0) 100%
    );
  background-repeat:no-repeat;
  background-size:0% 2px;
  background-position:left bottom 12px;
  transition:
    color .25s ease,
    background-size .32s ease;
}

.mobile-panel__body > .menu > li > a:hover,
.mobile-panel__body > .site-nav__menu > li > a:hover{
  color:#fff;
  background-size:100% 2px;
}

/* Sous-menus */
.mobile-panel__body .sub-menu{
  position:static;
  min-width:0;
  margin:0 0 0 1.2rem;
  padding:0 0 .5rem;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

.mobile-panel__body .sub-menu a{
  font-size:.92rem;
  font-weight:400;
  color:rgba(255,255,255,.6);
  padding:.7rem 0;
}

.mobile-panel__body .sub-menu a:hover{
  color:#fff;
}

/* --===== 3.6 Footer du panneau — masqué =====-- */

.mobile-panel__footer{
  display:none;
}

/*======================================================
=           4.0 - SYSTEME CTA NUCLEUS                  =
======================================================*/

/* --===== 4.1 BOUTONS — Design System Nucleus Premium =====-- */
/*
 *  Architecture BEM modulable :
 *  - .btn               : base commune (padding, font, transitions)
 *  - .btn--primary      : action principale (vert plein -> gradient hover)
 *  - .btn--secondary    : action secondaire (outline -> fill hover)
 *  - .btn--arrow        : modificateur fleche qui glisse a droite
 *  - .btn--icon         : modificateur icone a gauche
 *
 *  Compatibilite : les anciennes classes .btn-primary, .btn-cta, .btn-secondary
 *  sont conservees comme alias pour ne rien casser dans le code existant.
 */

/* ===== BASE COMMUNE ===== */
.btn,
.btn-primary,
.btn-secondary,
.btn-cta{
  /* Reset visuel */
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;

  /* Dimensions */
  min-height:48px;
  padding:.85rem 1.6rem;
  border-radius:10px;

  /* Typo */
  font-family:inherit;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.005em;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;

  /* Interactions */
  cursor:pointer;
  border:1.5px solid transparent;
  user-select:none;

  /* Transitions premium (cubic-bezier "out-expo" pour effet pro) */
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    box-shadow .35s cubic-bezier(.16,1,.3,1),
    background .35s ease,
    border-color .35s ease,
    color .35s ease,
    filter .35s ease;
}

/* Accessibilite : focus visible au clavier */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-cta:focus-visible{
  outline:3px solid rgba(21,135,69,.4);
  outline-offset:3px;
}

/* ===== PRIMARY (vert plein -> gradient au hover) ===== */
/* Technique : on superpose un calque gradient en ::before qui fade en opacite */
/* AVANTAGES :
   - Pas de swap brutal couleur -> gradient (bug du flash blanc)
   - Pas de glissement directionnel
   - Juste un fade d'opacite tres propre */

.btn-primary,
.btn-cta,
.btn.btn--primary{
  background:#158745;
  color:#fff;
  border-color:#158745;
  position:relative;
  overflow:hidden;
  z-index:0;
  box-shadow:
    0 4px 14px rgba(21,135,69,.20),
    0 1px 3px rgba(21,135,69,.15);
}

/* Calque gradient SUPERPOSE en ::before (cache au repos) */
.btn-primary::before,
.btn-cta::before,
.btn.btn--primary::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg, #158745 0%, #f4ce35 100%);
  opacity:0;
  transition:opacity .35s ease;
}

.btn-primary:hover,
.btn-cta:hover,
.btn.btn--primary:hover{
  color:#fff;
  border-color:#158745;
  transform:translateY(-3px);
  box-shadow:
    0 12px 28px rgba(21,135,69,.30),
    0 0 0 1px rgba(244,206,53,.20),
    0 0 24px rgba(244,206,53,.20);
}

/* Au hover : le calque gradient devient visible (fade in) */
.btn-primary:hover::before,
.btn-cta:hover::before,
.btn.btn--primary:hover::before{
  opacity:1;
}

.btn-primary:active,
.btn-cta:active,
.btn.btn--primary:active{
  transform:translateY(-1px);
  transition-duration:.1s;
}

/* ===== SECONDARY (soft fill -> vert plein au hover) ===== */
/* Animation : FADE SIMPLE du fond ECF6F0 vers le vert plein */

.btn-secondary,
.btn.btn--secondary{
  background:#ECF6F0;
  color:#158745;
  border-color:#158745;
  box-shadow:
    0 4px 14px rgba(21,135,69,.12),
    0 1px 3px rgba(21,135,69,.08);
}

.btn-secondary:hover,
.btn.btn--secondary:hover{
  /* Fade simple vers le vert plein */
  background:#158745;
  color:#fff;
  border-color:#158745;
  transform:translateY(-3px);
  box-shadow:
    0 12px 28px rgba(21,135,69,.30),
    0 0 0 1px rgba(244,206,53,.20),
    0 0 24px rgba(244,206,53,.20);
}

.btn-secondary:active,
.btn.btn--secondary:active{
  transform:translateY(-1px);
  transition-duration:.1s;
}

/* ===== ICONES dans les boutons ===== */
/* Position : .btn__icon (a gauche) ou .btn__arrow (a droite, anime au hover) */

.btn__icon,
.btn__arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.btn__icon svg,
.btn__arrow svg{
  width:18px;
  height:18px;
  display:block;
}

/* Fleche : glisse a droite au hover (+4px) */
.btn__arrow{
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}

.btn-primary:hover .btn__arrow,
.btn-cta:hover .btn__arrow,
.btn-secondary:hover .btn__arrow,
.btn.btn--primary:hover .btn__arrow,
.btn.btn--secondary:hover .btn__arrow{
  transform:translateX(4px);
}

/* Icone : vibration oscillante au hover (effet "telephone qui sonne") */
/* Meme animation que celle du header pour coherence sur tout le site */
.btn-primary:hover .btn__icon,
.btn-cta:hover .btn__icon,
.btn-secondary:hover .btn__icon,
.btn.btn--primary:hover .btn__icon,
.btn.btn--secondary:hover .btn__icon{
  animation:nucleus-ring 0.6s ease 1;
}

/* ===== TAILLES (modificateurs) ===== */

.btn--lg{
  min-height:56px;
  padding:1rem 2rem;
  font-size:1rem;
}

.btn--sm{
  min-height:40px;
  padding:.6rem 1.2rem;
  font-size:.85rem;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 600px){
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-cta{
    padding:.8rem 1.4rem;
    font-size:.9rem;
  }

  .btn--lg{
    padding:.9rem 1.6rem;
    font-size:.95rem;
  }
}

/*======================================================
=           5.0 - COMPOSANTS NUCLEUS                  =
======================================================*/

/* --===== 5.1 Loader =====-- */

.nucleus-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050508;
  overflow:hidden;
  opacity:1;
  visibility:visible;
  transition:opacity .6s ease .2s, visibility .6s ease .2s;
}

/* Fond photographique plein ecran */
.nucleus-loader__scene{
  position:absolute;
  inset:0;
  background:url('../img/loader-forest.webp') center center / cover no-repeat;
  opacity:.35;
}

/* Vignettage par-dessus la photo */
.nucleus-loader__vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, #050508 85%);
  pointer-events:none;
}

/* Orbes lumineuses flottantes */
.nucleus-loader__orb{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  will-change:transform, opacity;
}

.nucleus-loader__orb--1{
  width:420px;
  height:420px;
  background:radial-gradient(circle, rgba(21,135,69,.7) 0%, transparent 65%);
  top:10%;
  left:15%;
  animation:nucleus-orb-float-1 6s ease-in-out infinite;
}

.nucleus-loader__orb--2{
  width:350px;
  height:350px;
  background:radial-gradient(circle, rgba(244,206,53,.6) 0%, transparent 65%);
  bottom:15%;
  right:10%;
  animation:nucleus-orb-float-2 7s ease-in-out infinite;
}

.nucleus-loader__orb--3{
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(21,135,69,.45) 0%, transparent 65%);
  top:55%;
  left:45%;
  animation:nucleus-orb-float-3 8s ease-in-out infinite;
}

@keyframes nucleus-orb-float-1{
  0%, 100%{
    transform:translate(0, 0) scale(1);
    opacity:.6;
  }
  33%{
    transform:translate(80px, -50px) scale(1.2);
    opacity:.85;
  }
  66%{
    transform:translate(-40px, 40px) scale(.9);
    opacity:.5;
  }
}

@keyframes nucleus-orb-float-2{
  0%, 100%{
    transform:translate(0, 0) scale(1);
    opacity:.5;
  }
  33%{
    transform:translate(-60px, 40px) scale(1.25);
    opacity:.8;
  }
  66%{
    transform:translate(50px, -30px) scale(.85);
    opacity:.45;
  }
}

@keyframes nucleus-orb-float-3{
  0%, 100%{
    transform:translate(0, 0) scale(1);
    opacity:.4;
  }
  33%{
    transform:translate(40px, 50px) scale(1.15);
    opacity:.7;
  }
  66%{
    transform:translate(-50px, -40px) scale(1.25);
    opacity:.6;
  }
}

/* Contenu central */
.nucleus-loader__inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
}

/* Logo */
.nucleus-loader__logo{
  width:min(280px, 65vw);
  max-width:280px;
  animation:nucleus-loader-breathe 2.5s ease-in-out infinite;
}

.nucleus-loader__logo img,
.nucleus-loader__logo svg,
.nucleus-loader__logo .custom-logo{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
  max-height:140px;
  object-fit:contain;
}

@keyframes nucleus-loader-breathe{
  0%, 100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.04); }
}

/* Barre de progression */
.nucleus-loader__progress{
  width:min(260px, 60vw);
  height:3px;
  border-radius:3px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}

.nucleus-loader__bar{
  width:0%;
  height:100%;
  border-radius:3px;
  background:linear-gradient(90deg, #158745, #f4ce35);
  box-shadow:0 0 16px rgba(21,135,69,.5), 0 0 30px rgba(244,206,53,.2);
  transition:width .2s ease-out;
}

.nucleus-loader__percent{
  margin:0;
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.06em;
  color:rgba(255,255,255,.35);
  font-variant-numeric:tabular-nums;
}

/* Disparition */
.nucleus-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.nucleus-loader.is-hidden .nucleus-loader__orb{
  transition:opacity .4s ease;
  opacity:0;
}

/* --===== 5.2 Animations Nucleus =====-- */

@keyframes nucleus-popIn{
  0%{
    opacity:0;
    transform:scale(.88) translateY(-6px);
  }
  100%{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

/*======================================================
=           6.0 - REGLES RESPONSIVE NUCLEUS            =
======================================================*/

/* --===== 6.1 Desktop =====-- */

@media (min-width:841px){
  .menu-toggle{
    display:none;
  }
}

/* --===== 6.2 Tablette =====-- */

@media (max-width:1240px){
  .site-nav__menu,
  .menu{
    gap:1rem;
  }

  .site-header__icon-label{
    display:none;
  }
}

@media (max-width:840px){
  :root{
    --header-bottom-height:0px;
    --header-total-height:var(--header-top-height);
  }

  body{
    padding-top:var(--header-total-height);
  }

  .site-header__bottom{
    display:none;
  }

  .site-header__top-inner{
    grid-template-columns:auto 1fr auto;
  }

  .site-header__top-left,
  .site-header__social{
    display:none;
  }

  .site-header__brand{
    justify-self:center;
  }

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* --===== 6.3 Mobile =====-- */

@media (max-width:782px){
  .admin-bar .site-header{
    top:46px;
  }
}

@media (max-width:640px){
  .container{
    width:min(100%, calc(100% - 32px));
  }

  .site-header__logo-link img.custom-logo,
  .site-header__brand .custom-logo{
    max-height:55px;
  }

  .site-header__phone-text{
    display:none;
  }

  .site-header__phone{
    padding:0;
  }
}

/* --===== 6.4 Visibilite CTA / Menu =====-- */

@media (max-width:580px){
  body.menu-open{
    overflow:hidden;
  }
}

/*======================================================
=           8.0 - SYSTEME PIED DE PAGE NUCLEUS                =
======================================================*/

/* --===== 8.1 Pied de page — base =====-- */

.site-footer{
  padding:clamp(2rem, 4vw, 3.5rem) 0 0;
  background:rgba(10,10,10,.96);
  border-top:1px solid rgba(255,255,255,.06);
}

.site-footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2rem;
}

.site-footer__brand a{
  display:inline-block;
  text-decoration:none;
  margin-top:-1rem;
}

.site-footer__brand .custom-logo{
  max-height:100px;
  width:auto;
}

.site-footer__logo-text{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
}

.site-footer__tagline{
  margin:.8rem 0 0;
  font-size:.88rem;
  line-height:1.55;
  color:var(--muted-2);
  max-width:320px;
}

/* === Reseaux sociaux dans le footer === */
/* Cercles avec icones blanches qui passent au gradient au hover */
/* Coherent avec les icones du header */
.site-footer__social{
  display:flex;
  gap:.65rem;
  margin-top:1.25rem;
  flex-wrap:wrap;
}

.site-footer__social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:9px; /* 38px - 9*2 = 20px d'espace pour l'icone */
  border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  transition:background var(--ease-nucleus), border-color var(--ease-nucleus), transform var(--ease-nucleus);
  box-sizing:border-box; /* Le padding est INCLUS dans les 38px */
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible{
  background:rgba(255,255,255,.10);
  border-color:rgba(244,206,53,.45);
  transform:translateY(-2px);
}

.site-footer__social-link svg{
  display:block;
  width:100%;  /* Remplit toute la zone disponible (38 - padding 18 = 20px) */
  height:100%;
  transition:fill .3s ease, filter .3s ease;
}

/* Hover : les icones passent du blanc au GRADIENT vert->dore */
/* Utilise le meme #nucleus-hover-gradient defini dans le footer */
.site-footer__social-link:hover svg [fill="#ffffff"],
.site-footer__social-link:focus-visible svg [fill="#ffffff"]{
  fill:url(#nucleus-hover-gradient);
}

.site-footer__social-link:hover svg [stroke="#ffffff"],
.site-footer__social-link:focus-visible svg [stroke="#ffffff"]{
  stroke:url(#nucleus-hover-gradient);
}

/* Glow dore subtil au hover */
.site-footer__social-link:hover svg,
.site-footer__social-link:focus-visible svg{
  filter:drop-shadow(0 0 4px rgba(244,206,53,.35));
}

.site-footer__heading{
  margin:0 0 1rem;
  font-size:.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.site-footer__nav ul,
.site-footer__contact ul{
  list-style:none;
  margin:0;
  padding:0;
}

.site-footer__nav li,
.site-footer__contact li{
  margin-bottom:.5rem;
}

.site-footer__nav a,
.site-footer__contact a{
  color:var(--muted-2);
  text-decoration:none;
  font-size:.9rem;
  transition:color var(--ease-nucleus);
}

.site-footer__nav a:hover,
.site-footer__contact a:hover{
  color:#fff;
}

.site-footer__contact li{
  font-size:.9rem;
  color:var(--muted-2);
}

/* --===== 8.2 Pied de page — bas =====-- */

.site-footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem 0;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:.82rem;
  color:var(--muted-2);
}

.site-footer__bottom p{
  margin:0;
}

.site-footer__legal{
  display:flex;
  gap:1.5rem;
}

.site-footer__legal a{
  color:var(--muted-2);
  text-decoration:none;
  transition:color var(--ease-nucleus);
}

.site-footer__legal a:hover{
  color:#fff;
}

/* --===== 8.3 Pied de page responsive =====-- */

@media (max-width:840px){
  .site-footer__grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
}

@media (max-width:480px){
  .site-footer__bottom{
    flex-direction:column;
    gap:.8rem;
    text-align:center;
  }
}

/*======================================================
=           9.0 - NUCLEUS RETOUR EN HAUT                =
======================================================*/

.scroll-top{
  position:fixed;
  bottom:2rem;
  right:2rem;
  z-index:1100;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg, #158745 0%, #106b38 100%);
  color:#fff;
  cursor:pointer;
  box-shadow:
    0 4px 16px rgba(21,135,69,.30),
    0 0 0 0 rgba(21,135,69,0);
  opacity:0;
  visibility:hidden;
  transform:translateY(16px) scale(.8);
  transition:
    opacity .35s ease,
    visibility .35s ease,
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .3s ease,
    background .3s ease;
}

.scroll-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.scroll-top:hover{
  background:linear-gradient(135deg, #1a9e52 0%, #158745 100%);
  box-shadow:
    0 8px 24px rgba(21,135,69,.35),
    0 0 20px rgba(244,206,53,.10);
  transform:translateY(-2px) scale(1.05);
}

.scroll-top:active{
  transform:translateY(0) scale(.95);
}

.scroll-top svg{
  transition:transform .3s ease;
}

.scroll-top:hover svg{
  transform:translateY(-2px);
}

@media (max-width:640px){
  .scroll-top{
    bottom:1.2rem;
    right:1.2rem;
    width:42px;
    height:42px;
  }
}