/* =========================================================
   WEB EXPERTS — Pages locales par ville (SEO / GEO)
   Système de design aligné sur web-experts.ca
   Police : Plus Jakarta Sans · Base : charbon #121212 · Accent : orange #ff7100
   Tout est limité à .we-landing pour ne pas toucher aux .we-* du layout
   (bouton flottant, modale, formulaire).
   ========================================================= */

.we-landing{
  --we-ink:#121212;
  --we-ink-2:#1c1c1c;
  --we-paper:#F5F7F5;
  --we-white:#FFFFFF;
  --we-line:#E6E7E4;
  --we-text:#121212;
  --we-muted:#5D5D63;
  --we-on-dark:#F5F7F5;
  --we-on-dark-mut:rgba(245,247,245,.68);
  --we-brand:#ff7100;
  --we-brand-deep:#e0640a;
  --we-brand-soft:#FFF1E6;
  --we-r-md:14px;
  --we-r-lg:22px;
  --we-sh-1:0 1px 2px rgba(18,18,18,.05), 0 6px 18px rgba(18,18,18,.06);
  --we-sh-brand:0 12px 28px rgba(255,113,0,.28);

  display:block;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--we-muted);
  background:var(--we-white);
  -webkit-font-smoothing:antialiased;
}

.we-landing h1,
.we-landing h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600;
  color:var(--we-text);
  margin:0 0 24px;
}
.we-landing h2{
  font-size:clamp(32px,4.4vw,56px);
  line-height:1.05;
  letter-spacing:-.04em;
}
.we-landing p{
  font-size:18px;
  line-height:1.7;
  color:var(--we-muted);
  margin:0 0 18px;
}
.we-landing p:last-child{margin-bottom:0}
.we-landing strong{color:var(--we-text);font-weight:700}
.we-landing a{transition:color .2s ease}

/* ---------- Fil d'Ariane (dans le bloc sombre, sous le header transparent) ---------- */
.we-landing .we-breadcrumb{
  background:var(--we-ink);
  padding:150px 0 0;
  font-size:15px;
  color:var(--we-on-dark-mut);
}
.we-landing .we-breadcrumb .container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.we-landing .we-breadcrumb a{color:var(--we-on-dark-mut);text-decoration:none}
.we-landing .we-breadcrumb a:hover{color:var(--we-brand)}
.we-landing .we-breadcrumb [aria-current="page"]{color:var(--we-brand);font-weight:600}

/* ---------- Hero ---------- */
.we-landing .we-hero{
  position:relative;
  overflow:hidden;
  background:var(--we-ink);
  padding:60px 0 120px;
}
.we-landing .we-hero::before{
  content:"";
  position:absolute;
  right:-180px;
  top:-120px;
  width:620px;
  height:620px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,113,0,.28) 0%, rgba(255,113,0,0) 65%);
  pointer-events:none;
}
.we-landing .we-hero .container{position:relative;z-index:1}
.we-landing .we-hero h1{
  color:var(--we-on-dark);
  font-size:clamp(44px,7.5vw,100px);
  line-height:.95;
  letter-spacing:-.05em;
  max-width:1000px;
}
.we-landing .we-hero__lead{
  font-size:clamp(18px,1.6vw,22px);
  color:var(--we-on-dark-mut);
  margin-bottom:40px;
}

/* ---------- Boutons ---------- */
.we-landing .we-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:20px 44px;
  border-radius:100px;
  font-size:18px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  border:1px solid transparent;
  transition:background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.we-landing .we-btn::after{
  content:"\2192";
  transition:transform .25s ease;
}
.we-landing .we-btn:hover::after{transform:translateX(4px)}
.we-landing .we-btn--primary{
  background:var(--we-brand);
  color:var(--we-white);
  box-shadow:var(--we-sh-brand);
}
.we-landing .we-btn--primary:hover,
.we-landing .we-btn--primary:focus-visible{
  background:var(--we-white);
  color:var(--we-ink);
  border-color:var(--we-brand);
  transform:translateY(-2px);
}

/* ---------- Sections ---------- */
.we-landing .we-section{
  background:var(--we-white);
  padding:110px 0;
}
.we-landing .we-section--alt{background:var(--we-paper)}
.we-landing .we-section a:not(.we-btn){
  color:var(--we-brand);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.we-landing .we-section a:not(.we-btn):hover{color:var(--we-brand-deep)}

/* ---------- Listes à puces (cartes avec coche orange) ---------- */
.we-landing .we-list{
  list-style:none;
  margin:36px 0 0;
  padding:0;
  display:grid;
  gap:18px;
}
.we-landing .we-list li{
  position:relative;
  background:var(--we-white);
  border:1px solid var(--we-line);
  border-radius:var(--we-r-md);
  padding:24px 28px 24px 70px;
  font-size:17px;
  line-height:1.65;
  color:var(--we-muted);
  box-shadow:var(--we-sh-1);
}
.we-landing .we-section:not(.we-section--alt) .we-list li{background:var(--we-paper);box-shadow:none}
.we-landing .we-list li::before{
  content:"\2713";
  position:absolute;
  left:24px;
  top:24px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--we-brand-soft);
  color:var(--we-brand);
  font-weight:700;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.we-landing .we-list--cols{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- Étapes numérotées ---------- */
.we-landing .we-steps{
  list-style:none;
  counter-reset:we-step;
  margin:40px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.we-landing .we-steps li{
  counter-increment:we-step;
  position:relative;
  background:var(--we-ink);
  color:var(--we-on-dark-mut);
  border-radius:var(--we-r-lg);
  padding:90px 32px 36px;
  font-size:17px;
  line-height:1.65;
  transition:transform .25s ease;
}
.we-landing .we-steps li:hover{transform:translateY(-4px)}
.we-landing .we-steps li::before{
  content:counter(we-step, decimal-leading-zero);
  position:absolute;
  top:28px;
  left:32px;
  font-size:40px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--we-brand);
}
.we-landing .we-steps strong{
  display:block;
  color:var(--we-on-dark);
  font-size:21px;
  margin-bottom:10px;
}

/* ---------- FAQ (même esprit que l'accordéon de l'accueil) ---------- */
.we-landing .we-faq{
  margin-top:36px;
  border-top:1px solid var(--we-line);
}
.we-landing .we-faq details{border-bottom:1px solid var(--we-line)}
.we-landing .we-faq summary{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:28px 60px 28px 0;
  font-size:20px;
  font-weight:600;
  color:var(--we-text);
  transition:color .2s ease;
}
.we-landing .we-faq summary::-webkit-details-marker{display:none}
.we-landing .we-faq summary:hover{color:var(--we-brand)}
.we-landing .we-faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  width:40px;
  height:40px;
  margin-top:-20px;
  border-radius:50%;
  border:1px solid var(--we-line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:400;
  color:var(--we-text);
  transition:transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.we-landing .we-faq details[open] summary::after{
  transform:rotate(45deg);
  background:var(--we-brand);
  border-color:var(--we-brand);
  color:var(--we-white);
}
.we-landing .we-faq details p{
  padding:0 60px 28px 0;
  font-size:17px;
}

/* ---------- CTA final ---------- */
.we-landing .we-cta{
  position:relative;
  overflow:hidden;
  background:var(--we-ink);
  padding:120px 0;
  text-align:center;
}
.we-landing .we-cta::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-320px;
  width:760px;
  height:760px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,113,0,.25) 0%, rgba(255,113,0,0) 65%);
  pointer-events:none;
}
.we-landing .we-cta .container{position:relative;z-index:1}
.we-landing .we-cta h2{
  color:var(--we-on-dark);
  margin-left:auto;
  margin-right:auto;
}
.we-landing .we-cta p{
  color:var(--we-on-dark-mut);
  margin-left:auto;
  margin-right:auto;
}
.we-landing .we-cta .we-btn{margin:20px 0 28px}
.we-landing .we-cta__contact{font-size:17px}
.we-landing .we-cta a:not(.we-btn){
  color:var(--we-brand);
  font-weight:600;
  text-decoration:none;
}
.we-landing .we-cta a:not(.we-btn):hover{color:var(--we-white)}
.we-landing .we-related{
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid rgba(245,247,245,.14);
  font-size:16px;
}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .we-landing .we-steps{grid-template-columns:1fr}
  .we-landing .we-section{padding:80px 0}
  .we-landing .we-cta{padding:90px 0}
}
@media (max-width:767px){
  .we-landing .we-breadcrumb{padding-top:120px;font-size:14px}
  .we-landing .we-hero{padding:40px 0 80px}
  .we-landing .we-hero::before{width:380px;height:380px;right:-160px;top:-80px}
  .we-landing p{font-size:17px}
  .we-landing .we-list--cols{grid-template-columns:1fr}
  .we-landing .we-list li{padding:20px 20px 20px 62px}
  .we-landing .we-list li::before{left:20px;top:20px}
  .we-landing .we-section{padding:64px 0}
  .we-landing .we-btn{padding:18px 32px;font-size:16px}
  .we-landing .we-faq summary{font-size:18px;padding-right:56px}
  .we-landing .we-faq details p{padding-right:0}
}