/* ==========================================================================
   Styles – Mathieu Bouscaillou
   Version 4.9.8 – Patch logos (header+footer), clean @media, H1 ok
   ========================================================================== */

/* ===== VARIABLES ===== */
:root{
  /* Brand */
  --black:#000000;
  --blue:#03122d;

  /* Or (CMJN converti) */
  --gold-1:#FFE666;
  --gold-2:#CCA333;
  --gold-3:#996317;
  --gold-gradient:linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 40%, var(--gold-3) 85%, var(--gold-2) 100%);

  /* Encre / lignes */
  --ink:#ffffff;
  --ink-muted:#d6d9df;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.22);

  /* Fond BLEU NUIT – BODY (gauche → droite) */
  --bg-halo-left:  radial-gradient(520px 1100px at -10% 50%, rgba(255,230,102,.05) 0%, rgba(255,230,102,0) 60%);
  --bg-halo-right: radial-gradient(520px 1100px at 110% 50%, rgba(255,230,102,.04) 0%, rgba(255,230,102,0) 60%);
  --bg-velours-left:  radial-gradient(700px 900px at -10% 110%, rgba(2,12,28,.40) 0%, rgba(2,12,28,0) 60%);
  --bg-velours-right: radial-gradient(700px 900px at 110% -10%, rgba(2,12,28,.32) 0%, rgba(2,12,28,0) 60%);
  --bg-base: linear-gradient(90deg,#000 0%,#01070F 16%,#010914 32%,#021027 50%,#03122d 70%,#020F22 86%,#01070F 100%);
  --bg: var(--bg-halo-left), var(--bg-halo-right), var(--bg-velours-left), var(--bg-velours-right), var(--bg-base);

  /* Fond BLEU NUIT – Sections */
  --bg-sec-halo-left:  radial-gradient(360px 900px at -10% 50%, rgba(255,230,102,.045) 0%, rgba(255,230,102,0) 60%);
  --bg-sec-halo-right: radial-gradient(360px 900px at 110% 50%, rgba(255,230,102,.035) 0%, rgba(255,230,102,0) 60%);
  --bg-sec-left:  radial-gradient(520px 700px at -10% 110%, rgba(2,12,28,.45) 0%, rgba(2,12,28,0) 60%);
  --bg-sec-right: radial-gradient(520px 700px at 110% -10%, rgba(2,12,28,.30) 0%, rgba(2,12,28,0) 60%);
  --bg-sec-base: linear-gradient(90deg,#000 0%,#01070F 25%,#021027 55%,#03122d 100%);
  --bg-section: var(--bg-sec-halo-left), var(--bg-sec-halo-right), var(--bg-sec-left), var(--bg-sec-right), var(--bg-sec-base);

  /* Layout */
  --max-w:1200px;
  --header-h:88px;
  --sect-y:clamp(3rem, 6vw, 6rem);
  --pad-x:clamp(1rem, 4vw, 2rem);

  /* Rythme */
  --g1:.5rem; --g2:1rem; --g3:1.5rem; --g4:2rem; --g5:3rem; --g6:4rem;

  /* Radius & Ombres */
  --r-1:10px; --r-2:18px; --r-3:26px; --r-pill:9999px;
  --sh-1:0 6px 24px rgba(0,0,0,.25);
  --sh-2:0 10px 40px rgba(0,0,0,.35);

  /* Typo */
  --font:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem; --fs-20:1.25rem; --fs-24:1.5rem; --fs-32:2rem; --fs-40:2.5rem; --fs-56:3.5rem;

  /* Boutons */
  --btn-h:48px; --btn-px:22px; --btn-fs:var(--fs-16); --btn-minw:200px;

  /* Transitions */
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ===== RESET / BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
html, body{min-height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  background-repeat:no-repeat;
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
  background-color:var(--blue);
  line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; text-align:center;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x)}
section{
  padding:var(--sect-y) 0; position:relative; scroll-margin-top:calc(var(--header-h) + 16px);
  background:var(--bg-section);
  background-repeat:no-repeat;
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
}
h1,h2,h3{font-weight:800;line-height:1.15;margin-bottom:var(--g2)}
h1{font-size:clamp(2rem, 3.5vw, var(--fs-56)); letter-spacing:-.02em}
h2{font-size:clamp(1.5rem, 2.5vw, var(--fs-40))}
h3{font-size:clamp(1.125rem, 1.8vw, var(--fs-24))}
p{font-size:var(--fs-16); color:var(--ink); opacity:.95; margin-inline:auto; max-width:68ch}
.section-title{margin-bottom:var(--g2)}
.section-subtitle{margin-top:-.25rem;margin-bottom:var(--g5);color:var(--ink-muted)}

/* Séparateur doré pro entre sections */
section:not(.hero-section)::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--gold-2) 15%, var(--gold-1) 50%, var(--gold-3) 85%, transparent 100%);
  opacity:.6;
}

/* ===== ACCESSIBILITÉ ===== */
:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px}
.skip-link{position:absolute; left:0; top:-40px; background:var(--gold-gradient); color:#fff; padding:8px 12px; border-radius:8px; font-weight:700; transition:top .2s var(--ease); z-index:10000}
.skip-link:focus{top:8px}

/* ===== BARRE DE PROGRESSION ===== */
.scroll-indicator{position:fixed; top:var(--header-h); left:0; width:100%; height:4px; background:rgba(153,99,23,.18); z-index:900}
.scroll-progress{height:100%; width:0%; background:var(--gold-gradient); transition:width .25s var(--ease)}

/* ===== HEADER / NAV ===== */
.header{position:fixed; inset:0 0 auto 0; height:var(--header-h); background:rgba(3,18,45,.78); backdrop-filter: blur(16px); border-bottom:1px solid var(--line); z-index:1000; transition:background .25s var(--ease)}
.header.scrolled{background:rgba(3,18,45,.92); box-shadow:var(--sh-1)}
.nav-container{height:100%}
.nav-container .container{height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--g2)}

.logo{display:flex; align-items:center; gap:var(--g2); font-weight:900; font-size:var(--fs-18)}
/* HEADER LOGO — desktop 174px, mobile 102px */
.logo-img{height:174px; width:auto; object-fit:contain; border-radius:0; box-shadow:none; background:transparent}
.logo-text{white-space:nowrap}

.nav-menu{display:flex; align-items:center; gap:.25rem}
.nav-link{display:inline-flex; align-items:center; justify-content:center; padding:.55rem 1rem; border-radius:12px; font-weight:600; font-size:var(--fs-14); transition:background-color .2s var(--ease), transform .2s var(--ease)}
.nav-link:hover{background:rgba(255,255,255,.06)}
.nav-link.cta-nav{
  height:var(--btn-h); padding:0 var(--btn-px); min-width:var(--btn-minw); font-size:var(--btn-fs); font-weight:800; border-radius:var(--r-pill);
  background:var(--gold-gradient); color:#fff; box-shadow:var(--sh-1)
}
.nav-link.cta-nav:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}

.menu-toggle{display:none; width:48px; height:48px; border:0; background:none; border-radius:12px; cursor:pointer}
.hamburger-line{width:26px; height:3px; background:#fff; border-radius:2px; transition:transform .2s var(--ease), opacity .2s var(--ease)}
.menu-toggle.active .hamburger-line:nth-child(1){transform:rotate(45deg) translate(6px,7px)}
.menu-toggle.active .hamburger-line:nth-child(2){opacity:0}
.menu-toggle.active .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(6px,-7px)}

/* ===== MAIN ===== */
main{margin-top:var(--header-h)}

/* ===== HERO ===== */
.hero-section{min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; overflow:hidden}
.hero-content{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--g5); text-align:center;
}
.hero-image{order:-1; justify-self:center; max-width:560px; width:100%; margin:0 auto var(--g3)}
.hero-image img{border:0; border-radius:0; box-shadow:none; background:transparent; transition:transform .4s var(--ease)}
.hero-image img:hover{transform:scale(1.03) rotate(.5deg)}
.hero-subtitle{color:var(--ink-muted); margin-top:var(--g2); margin-bottom:var(--g4)}
.certifications{display:flex; gap:var(--g3); justify-content:center; flex-wrap:wrap; margin:var(--g4) 0}
.certification-badge{display:flex; flex-direction:column; align-items:center; gap:var(--g2); background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:var(--r-2); padding:var(--g3); min-width:180px; box-shadow:var(--sh-1)}
.badge-img{width:72px; height:72px; object-fit:contain}
.badge-text{font-weight:700}
.cta-buttons{display:flex; gap:var(--g2); justify-content:center; flex-wrap:wrap; margin-top:var(--g4)}

/* H1 — Fallback or plein + gradient si supporté */
.hero-title{
  display:inline-block; position:relative; z-index:1;
  color: var(--gold-1);
  background:none;
  -webkit-text-fill-color:initial;
  -webkit-background-clip:initial; background-clip:initial;
}
@supports (-webkit-background-clip: text) or (background-clip: text){
  .hero-title{
    background: var(--gold-gradient);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}

/* ===== BOUTONS ===== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:var(--btn-h); padding:0 var(--btn-px); min-width:var(--btn-minw);
  font-size:var(--btn-fs); font-weight:800; border-radius:var(--r-pill);
  border:none; cursor:pointer; transition: transform .2s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap; text-decoration:none;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--gold-gradient); color:#fff; box-shadow:var(--sh-1); text-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn-secondary{background:transparent; color:#fff; border:2px solid var(--line-strong)}
.btn-secondary:hover{border-color:var(--gold-3); color:var(--gold-1)}
.btn-full{width:100%}

/* ===== LOCALO ===== */
.localo-section{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.localo-content{padding:var(--g5) 0}
.localo-widget{min-height:300px; display:flex; align-items:center; justify-content:center}
.loading-spinner{width:44px; height:44px; border:4px solid rgba(255,230,102,.25); border-top-color:var(--gold-3); border-radius:50%; animation:spin 1s linear infinite}

/* ===== RÉSULTATS – CARROUSEL ===== */
.results-slider{position:relative; overflow:hidden; border-radius:var(--r-2); border:1px solid var(--line); background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
.slider-track{display:flex; transition:transform .6s var(--ease); will-change:transform}
.slide{min-width:100%; padding:var(--g4)}
.result-image{height:220px; overflow:hidden; border-radius:var(--r-2); border:1px solid var(--line); margin-bottom:var(--g3)}
.result-image img{width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
.slide:hover .result-image img{transform:scale(1.07)}
.result-content h3{margin-bottom:.25rem}
.result-client{color:var(--ink-muted); font-size:var(--fs-14); margin-bottom:.25rem}

.slider-btn{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; background:var(--gold-gradient); color:#fff; box-shadow:var(--sh-1)}
.slider-btn.prev{left:12px}
.slider-btn.next{right:12px}
.slider-dots{display:flex; gap:.5rem; justify-content:center; padding:var(--g2)}
.slider-dots button{width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.35); cursor:pointer}
.slider-dots button[aria-selected="true"]{background:var(--gold-2)}

/* ===== METRICS (compteur) ===== */
.section-metrics{display:flex;gap:.6rem;justify-content:center;align-items:baseline;margin:-.25rem 0 var(--g3)}
.section-metrics .counter{
  font-weight:900;
  font-size:clamp(1.5rem,3.5vw,2.5rem);
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;
}

/* ===== OFFRES ===== */
.offers-grid{display:grid; gap:var(--g4); grid-template-columns:repeat(auto-fit, minmax(320px, 1fr))}
.offer-card{
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--r-2);
  box-shadow:var(--sh-1);
  position:relative;
  overflow:hidden;
}

/* Badge OFFRE PHARE via data-badge sur .offer-card.featured */
.offer-card.featured{ position:relative; z-index:1; }
.offer-card.featured::before{
  content: attr(data-badge);
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold-gradient);
  color: #fff;
  font-weight: 900;
  font-size: var(--fs-12);
  letter-spacing: .06em;
  padding: .45rem .8rem;
  border-radius: 12px;
  box-shadow: var(--sh-1);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
/* Espace sous badge pour la carte “featured” */
.offer-card.featured .offer-content{ padding-top: calc(var(--g4) + 28px); }

.offer-content{padding:var(--g4)}
.offer-title{margin-bottom:var(--g2)}
.offer-description{color:var(--ink-muted); margin-bottom:var(--g3)}
.offer-pricing{display:grid; gap:.75rem; margin:var(--g3) 0}
.price-line{display:flex; flex-direction:column; gap:.15rem}
.price-value{font-size:var(--fs-20); font-weight:900; background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; color:transparent}
.price-subtitle{font-size:var(--fs-14); color:var(--ink-muted)}

/* CTA dorés sur TOUTES les cartes (remplace .btn-secondary) */
.offers-grid .offer-card .btn{ background: var(--gold-gradient); color:#fff; border:0; box-shadow: var(--sh-1); text-shadow:0 1px 0 rgba(0,0,0,.25) }
.offers-grid .offer-card .btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2) }

/* ===== POURQUOI MOI ===== */
.strengths-list{display:grid; gap:var(--g3)}
.strengths-list.strengths-centered{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width:1000px; margin:0 auto; justify-items:center}
.strength-item{background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:var(--r-2); padding:var(--g4); display:flex; flex-direction:column; align-items:center; gap:var(--g2); box-shadow:var(--sh-1)}
.strength-icon{width:60px; height:60px; border-radius:50%; background:var(--gold-gradient); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-1); font-size:var(--fs-20)}

/* ===== FAQ ===== */
.faq-container{max-width:900px; margin:0 auto}
.faq-item{background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:var(--r-2); overflow:hidden; margin-bottom:var(--g2); box-shadow:var(--sh-1)}
.faq-question{width:100%; background:none; border:0; cursor:pointer; text-align:center; padding:var(--g3) var(--g4); display:flex; align-items:center; justify-content:center; gap:.75rem; color:#fff}
.faq-toggle{width:24px; height:24px; border-radius:50%; background:var(--gold-gradient); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:900; position:relative}
.faq-toggle::after{content:'+'}
.faq-question[aria-expanded="true"] .faq-toggle{transform:rotate(45deg)}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .3s var(--ease); padding:0 var(--g4) var(--g3)}
.faq-answer p{color:var(--ink-muted)}
.faq-answer.active{max-height:520px}

/* ===== CTA FINAL ===== */
.final-cta-section{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.final-cta-content{padding:var(--g5) 0}

/* ===== ARTICLES (accordéon) ===== */
.articles-accordion{max-width:900px; margin:0 auto; text-align:left}
.article-item{background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:var(--r-2); padding:var(--g3) var(--g4); box-shadow:var(--sh-1)}
.article-item + .article-item{margin-top:var(--g2)}
.article-item > summary{cursor:pointer; list-style:none; font-weight:800}
.article-item > summary::-webkit-details-marker{display:none}
.article-item[open] > summary{color:var(--gold-1)}
.article-item p{margin-top:.5rem; color:var(--ink-muted)}
.article-item a{text-decoration:underline}

/* ===== CONTACT ===== */
.contact-actions p + p{margin-top:.25rem}
.contact-actions .cta-buttons{margin-top:var(--g2)}

/* ===== FOOTER ===== */
.footer{padding:var(--g5) 0 var(--g4); border-top:1px solid var(--line); background:rgba(3,18,45,.7)}
.footer-content{display:grid; gap:var(--g4); grid-template-columns: 2fr 1fr 1fr; align-items:start; margin-bottom:var(--g4)}
.footer-brand{text-align:center}
.footer-logo{display:flex; justify-content:center; align-items:center; gap:var(--g2); margin-bottom:var(--g2)}
/* FOOTER LOGO — 134px */
.footer-logo-img{height:134px; width:auto; object-fit:contain; border-radius:0; box-shadow:none; background:transparent}
.footer-brand-name{font-weight:900}
.footer-tagline{color:var(--ink-muted)}
.footer-links{display:flex; gap:var(--g4); justify-content:center}
.footer-title{font-weight:800; margin-bottom:.5rem}
.footer-list li + li{margin-top:.35rem}
.footer-link{color:var(--ink-muted)}
.footer-link:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--line); padding-top:var(--g3)}
.footer-copy{color:var(--ink-muted)}

/* ===== ANIMATIONS / REVEAL / LOADER ===== */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.visible{opacity:1; transform:translateY(0)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none}
  .slider-track{transition:none}
}

/* Failsafe : si le JS ne s'exécute pas, on montre quand même le contenu */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }
																																																																																																																																																								
/* ===== TO-TOP ===== */
.to-top{
  position: fixed;
  right: 18px;
  bottom: clamp(16px, env(safe-area-inset-bottom) + 12px, 32px);
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: var(--gold-gradient);
  color: #fff; font-weight: 900; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-2);
  cursor: pointer; z-index: 1500;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease);
}
.to-top.show{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) }
.to-top:hover{ box-shadow:0 12px 40px rgba(0,0,0,.45); filter:brightness(1.03) }
.to-top:active{ transform:translateY(1px) }
.to-top:focus-visible{ outline:2px solid var(--gold-2); outline-offset:4px }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .footer-content{grid-template-columns:1fr 1fr}
}

@media (max-width:768px){
  :root{--header-h:74px}
  .menu-toggle{display:flex; align-items:center; justify-content:center}

  /* NAV MOBILE opaque (iOS-safe) */
  .nav-menu{
    position:fixed; top:var(--header-h); left:0; right:0;
    height:calc(100vh - var(--header-h));
    background:#03122d;
    background-image: radial-gradient(1000px 500px at 50% 0, rgba(255,230,102,.07), transparent 60%);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    transform:translateY(-120%); opacity:0; pointer-events:none;
    transition:transform .45s var(--ease), opacity .3s var(--ease);
    padding:var(--g4) var(--pad-x) calc(env(safe-area-inset-bottom) + var(--g4));
    display:flex; flex-direction:column; gap:var(--g2);
    overflow-y:auto; z-index:2000; box-shadow:0 12px 40px rgba(0,0,0,.45);
  }
  @supports (height: 100svh){
    .nav-menu{ height:calc(100svh - var(--header-h)); }
  }
  .nav-menu.active{transform:translateY(0); opacity:1; pointer-events:auto}

  .nav-link{font-size:var(--fs-16); padding:.9rem 1.1rem}

  /* HEADER LOGO — mobile 102px */
  .logo-img{height:102px}

  .results-slider .result-image{height:200px}
  .btn{width:100%; max-width:320px}

  /* Badge mobile léger */
  .offer-card.featured::before{ top:10px; font-size:var(--fs-12); padding:.35rem .7rem }

  .footer-content{grid-template-columns:1fr; gap:var(--g3)}
}

@media (max-width:480px){
  :root{--pad-x:1rem}
  h1{font-size:clamp(1.75rem, 8vw, 2.25rem)}
  .hero-image{max-width:320px}
}

/* === H1 — Dégradé doré forcé partout (mobile + desktop) === */
/* Place ce bloc tout en bas du fichier pour écraser les précédents ! */
.hero-section .hero-title,
.hero-text .hero-title {
  background: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  opacity: 1 !important;
  transform: none !important;
  backface-visibility: hidden;
  will-change: auto;
}