/* ============================================================
   Service Nettoyage Orléans — Design System & Global Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display&display=swap');

/* 1. DESIGN TOKENS */
:root {
  --c-primary:       #0275d8;
  --c-primary-dark:  #0260b8;
  --c-primary-light: #e8f2fc;
  --c-accent:        #00c2a8;
  --c-accent-light:  #e0f7f4;
  --c-900:   #0f172a; --c-800:   #1e293b; --c-700:   #334155;
  --c-600:   #475569; --c-500:   #64748b; --c-400:   #94a3b8;
  --c-300:   #cbd5e1; --c-200:   #e2e8f0; --c-100:   #f1f5f9;
  --c-50:    #f8fafc; --c-white: #ffffff;
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem;
  --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem;
  --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem; --text-6xl:3.75rem;
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem;
  --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;
  --r-sm:0.375rem; --r-md:0.625rem; --r-lg:1rem; --r-xl:1.25rem;
  --r-2xl:1.75rem; --r-full:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:0 12px 30px rgba(0,0,0,0.10);
  --shadow-xl:0 24px 48px rgba(0,0,0,0.12);
  --t-fast:150ms ease; --t-base:250ms ease; --t-slow:400ms ease;
  --max-width:1280px; --nav-height:68px;
}

/* 2. RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:var(--text-base);line-height:1.7;color:var(--c-800);background:var(--c-white);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
ul,ol{list-style:none}

/* 3. TYPOGRAPHY */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:1.2;color:var(--c-900);font-weight:400}
h1{font-size:clamp(2rem,5vw,var(--text-5xl))}
h2{font-size:clamp(1.5rem,3vw,var(--text-3xl))}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg)}
p{color:var(--c-700)}
.lead{font-size:var(--text-lg);color:var(--c-600);font-weight:300;line-height:1.8}

/* 4. LAYOUT */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--sp-6)}
.section{padding:var(--sp-20) 0}
.section--sm{padding:var(--sp-12) 0}
.section--bg{background:var(--c-50)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.container{padding:0 var(--sp-4)}}

/* 5. BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);border-radius:var(--r-full);font-size:var(--text-sm);font-weight:600;font-family:var(--font-sans);cursor:pointer;transition:all var(--t-base);white-space:nowrap;border:2px solid transparent}
.btn--primary{background:var(--c-primary);color:var(--c-white);box-shadow:0 4px 14px rgba(2,117,216,0.3)}
.btn--primary:hover{background:var(--c-primary-dark);box-shadow:0 6px 20px rgba(2,117,216,0.4);transform:translateY(-1px)}
.btn--outline{background:transparent;color:var(--c-700);border-color:var(--c-300)}
.btn--outline:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-light)}
.btn--ghost{background:transparent;color:var(--c-primary)}
.btn--ghost:hover{background:var(--c-primary-light)}
.btn--sm{padding:var(--sp-2) var(--sp-4);font-size:var(--text-xs)}
.btn--lg{padding:var(--sp-4) var(--sp-8);font-size:var(--text-base)}

/* 6. CARDS */
.card{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-2xl);padding:var(--sp-6);box-shadow:var(--shadow-sm);transition:box-shadow var(--t-base),transform var(--t-base)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card--featured{border-color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary),var(--shadow-md)}
.card__icon{width:48px;height:48px;border-radius:var(--r-lg);background:var(--c-primary-light);color:var(--c-primary);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);font-size:22px}
.card__title{font-size:var(--text-lg);font-weight:600;color:var(--c-900);margin-bottom:var(--sp-3);font-family:var(--font-sans)}

/* 7. BADGES */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);font-size:var(--text-xs);font-weight:600;letter-spacing:0.3px}
.badge--primary{background:var(--c-primary-light);color:var(--c-primary)}
.badge--accent{background:var(--c-accent-light);color:#007a6a}
.badge--neutral{background:var(--c-100);color:var(--c-600)}

/* 8. FORMS */
.form-group{display:flex;flex-direction:column;gap:var(--sp-2)}
.form-label{font-size:var(--text-sm);font-weight:500;color:var(--c-700)}
.form-input,.form-select,.form-textarea{width:100%;padding:var(--sp-3) var(--sp-4);border:1.5px solid var(--c-200);border-radius:var(--r-lg);font-size:var(--text-sm);font-family:var(--font-sans);color:var(--c-800);background:var(--c-white);transition:border-color var(--t-fast),box-shadow var(--t-fast);outline:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(2,117,216,0.12)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--c-400)}
.form-textarea{resize:vertical;min-height:120px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* 9. HERO */
.hero{background:linear-gradient(135deg,var(--c-white) 0%,#eef6ff 50%,var(--c-white) 100%);padding:var(--sp-20) 0;overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(2,117,216,0.08) 0%,transparent 70%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:center}
.hero__eyebrow{font-size:var(--text-xs);font-weight:600;color:var(--c-primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-4);display:flex;align-items:center;gap:var(--sp-2)}
.hero__eyebrow::before{content:'';display:inline-block;width:24px;height:2px;background:var(--c-primary);border-radius:var(--r-full)}
.hero__title{margin-bottom:var(--sp-6)}
.hero__desc{margin-bottom:var(--sp-8)}
.hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-8)}
.hero__trust{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4)}
.hero__trust-item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:var(--c-600)}
.hero__image-wrap{position:relative}
.hero__image-wrap::before{content:'';position:absolute;inset:-16px;background:linear-gradient(135deg,rgba(2,117,216,0.12),rgba(0,194,168,0.08));border-radius:var(--r-2xl);z-index:0}
.hero__image{position:relative;z-index:1;border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--shadow-xl)}
.hero__image img{width:100%;height:420px;object-fit:cover}
.hero__stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
.hero__stat{background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);border:1px solid var(--c-200);border-radius:var(--r-xl);padding:var(--sp-4);text-align:center}
.hero__stat-value{display:block;font-size:var(--text-xl);font-weight:700;color:var(--c-primary);line-height:1;margin-bottom:var(--sp-1)}
.hero__stat-label{font-size:var(--text-xs);color:var(--c-500)}
@media(max-width:1024px){.hero__grid{grid-template-columns:1fr}.hero__image-wrap{display:none}}

/* 10. SECTION HEADERS */
.section-header{text-align:center;max-width:640px;margin:0 auto var(--sp-12)}
.section-header .badge{margin-bottom:var(--sp-3)}
.section-header h2{margin-bottom:var(--sp-4)}
.section-header--left{text-align:left;margin:0 0 var(--sp-10)}

/* 11. STATS BAR */
.stats-bar{background:var(--c-primary);padding:var(--sp-8) 0}
.stats-bar__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);text-align:center}
.stats-bar__value{display:block;font-size:var(--text-4xl);font-weight:700;color:var(--c-white);font-family:var(--font-display);margin-bottom:var(--sp-1)}
.stats-bar__label{font-size:var(--text-sm);color:rgba(255,255,255,0.75)}
@media(max-width:768px){.stats-bar__grid{grid-template-columns:repeat(2,1fr)}}

/* 12. MAP */
.map-section{background:var(--c-50);padding:var(--sp-20) 0}
.map-wrap{border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--c-200);height:480px;position:relative}
.map-wrap iframe{width:100%;height:100%;border:none;display:block}
.map-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}
.map-legend-item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-lg);font-size:var(--text-sm);font-weight:500;color:var(--c-700);transition:all var(--t-fast)}
.map-legend-item:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-light)}
.map-legend-item::before{content:'📍';font-size:14px}
@media(max-width:1024px){.map-legend{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.map-legend{grid-template-columns:1fr}.map-wrap{height:320px}}

/* 13. TESTIMONIALS */
.testimonial{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-2xl);padding:var(--sp-6)}
.testimonial__stars{color:#f59e0b;font-size:var(--text-base);margin-bottom:var(--sp-3)}
.testimonial__text{font-size:var(--text-sm);color:var(--c-700);line-height:1.7;font-style:italic;margin-bottom:var(--sp-4)}
.testimonial__author{font-size:var(--text-xs);color:var(--c-500);font-weight:500}

/* 14. FOOTER */
.nc-footer{background:var(--c-900);color:var(--c-400);padding:var(--sp-16) 0 var(--sp-8)}
.nc-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:var(--sp-10);margin-bottom:var(--sp-12)}
.nc-footer__logo{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.nc-footer__logo-icon{width:40px;height:40px;border-radius:var(--r-lg);background:var(--c-primary);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm)}
.nc-footer__logo-text{color:var(--c-white);font-size:var(--text-base);font-weight:600}
.nc-footer__logo-sub{color:var(--c-400);font-size:var(--text-xs)}
.nc-footer__desc{font-size:var(--text-sm);line-height:1.7;margin-bottom:var(--sp-5);color:white}
.nc-footer__col-title{font-size:var(--text-xs);font-weight:700;color:var(--c-white);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-5)}
.nc-footer__links{display:flex;flex-direction:column;gap:var(--sp-3)}
.nc-footer__link{font-size:var(--text-sm);color:var(--c-400);transition:color var(--t-fast)}
.nc-footer__link:hover{color:var(--c-white)}
.nc-footer__newsletter-form{display:flex;gap:var(--sp-2)}
.nc-footer__newsletter-input{flex:1;padding:var(--sp-3) var(--sp-4);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-lg);background:rgba(255,255,255,0.06);color:var(--c-white);font-size:var(--text-sm);font-family:var(--font-sans);outline:none}
.nc-footer__newsletter-input::placeholder{color:var(--c-500)}
.nc-footer__newsletter-input:focus{border-color:var(--c-primary)}
.nc-footer__newsletter-btn{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--c-primary);color:white;font-size:var(--text-sm);font-weight:600}
.nc-footer__newsletter-btn:hover{background:var(--c-primary-dark)}
.nc-footer__bottom{padding-top:var(--sp-8);border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4)}
.nc-footer__copy{font-size:var(--text-sm)}
.nc-footer__socials{display:flex;gap:var(--sp-3)}
.nc-footer__social{width:36px;height:36px;border-radius:var(--r-md);background:rgba(255,255,255,0.06);color:var(--c-400);display:flex;align-items:center;justify-content:center;transition:all var(--t-fast)}
.nc-footer__social:hover{background:var(--c-primary);color:white}
@media(max-width:1024px){.nc-footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.nc-footer__grid{grid-template-columns:1fr}}

/* 15. SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* 16. UTILITIES */
.text-primary{color:var(--c-primary)} .text-accent{color:var(--c-accent)} .text-muted{color:var(--c-500)} .text-center{text-align:center}
.mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)} .mt-12{margin-top:var(--sp-12)}
.mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)} .mb-8{margin-bottom:var(--sp-8)}
.flex{display:flex} .flex-center{display:flex;align-items:center;justify-content:center}
.gap-2{gap:var(--sp-2)} .gap-4{gap:var(--sp-4)} .gap-6{gap:var(--sp-6)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 17. FAQ */
.faq-item{border:1px solid var(--c-200);border-radius:var(--r-xl);margin-bottom:var(--sp-3);overflow:hidden}
.faq-question{width:100%;padding:var(--sp-5) var(--sp-6);display:flex;align-items:center;justify-content:space-between;font-size:var(--text-base);font-weight:600;color:var(--c-900);cursor:pointer;background:var(--c-white);font-family:var(--font-sans);transition:background var(--t-fast)}
.faq-question:hover{background:var(--c-50)}
.faq-question svg{transition:transform var(--t-base);flex-shrink:0}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--t-slow)}
.faq-answer-inner{padding:0 var(--sp-6) var(--sp-5);color:var(--c-700);font-size:var(--text-sm);line-height:1.7}
.faq-item.is-open .faq-answer{max-height:500px}
.faq-item.is-open .faq-question svg{transform:rotate(180deg)}

/* 18. SIMULATOR */
.simulator{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-2xl);padding:var(--sp-8);box-shadow:var(--shadow-md)}
.simulator__results{background:var(--c-50);border:1px solid var(--c-200);border-radius:var(--r-xl);padding:var(--sp-6);margin-top:var(--sp-6)}
.simulator__result-value{font-size:var(--text-3xl);font-weight:700;color:var(--c-primary);font-family:var(--font-display)}

/* 19. BENTO GRID */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-6)}
.bento__item{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-2xl);padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.bento__item--7{grid-column:span 7}
.bento__item--5{grid-column:span 5}
.bento__item--6{grid-column:span 6}
.bento__item--4{grid-column:span 4}
.bento__item--12{grid-column:span 12}
@media(max-width:1024px){.bento__item--7,.bento__item--5,.bento__item--6,.bento__item--4{grid-column:span 6}}
@media(max-width:640px){.bento__item--7,.bento__item--5,.bento__item--6,.bento__item--4,.bento__item--12{grid-column:span 12}}

/* 20. BEFORE/AFTER */
.before-after{border-radius:var(--r-2xl);overflow:hidden;border:1px solid var(--c-200);box-shadow:var(--shadow-sm)}
.before-after__images{display:grid;grid-template-columns:1fr 1fr}
.before-after__images img{width:100%;height:200px;object-fit:cover}
.before-after__caption{padding:var(--sp-4);font-size:var(--text-sm);color:var(--c-700)}

/* 21. CONTACT INFO */
.contact-info{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.contact-info__item{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-xl);padding:var(--sp-5);text-align:center}
.contact-info__icon{font-size:1.5rem;margin-bottom:var(--sp-3)}
.contact-info__label{font-size:var(--text-xs);color:var(--c-500);margin-bottom:var(--sp-1)}
.contact-info__value{font-size:var(--text-sm);font-weight:600;color:var(--c-900)}
@media(max-width:768px){.contact-info{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.contact-info{grid-template-columns:1fr}}

/* 22. PRICING CARDS */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.pricing-card{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-2xl);padding:var(--sp-8);text-align:center;position:relative;transition:all var(--t-base)}
.pricing-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.pricing-card--featured{border-color:var(--c-primary);box-shadow:0 0 0 2px var(--c-primary),var(--shadow-lg)}
.pricing-card__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--c-primary);color:var(--c-white);padding:var(--sp-1) var(--sp-4);border-radius:var(--r-full);font-size:var(--text-xs);font-weight:700}
.pricing-card__price{font-size:var(--text-4xl);font-weight:700;color:var(--c-primary);font-family:var(--font-display);margin:var(--sp-4) 0}
.pricing-card__unit{font-size:var(--text-sm);color:var(--c-500);font-weight:400}
.pricing-card__features{list-style:none;text-align:left;margin:var(--sp-6) 0}
.pricing-card__features li{padding:var(--sp-2) 0;font-size:var(--text-sm);color:var(--c-700);display:flex;align-items:center;gap:var(--sp-2)}
.pricing-card__features li::before{content:'✓';color:var(--c-primary);font-weight:700}
@media(max-width:768px){.pricing-grid{grid-template-columns:1fr}}

/* 23. QUARTIER SPECIFICS */
.quartier-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.quartier-spec{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-xl);padding:var(--sp-5)}
.quartier-spec__icon{font-size:1.25rem;margin-bottom:var(--sp-2)}
.quartier-spec__text{font-size:var(--text-sm);color:var(--c-700)}
@media(max-width:768px){.quartier-specs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.quartier-specs{grid-template-columns:1fr}}

/*24  Topbar ajout sandrine */
.nc-footer__topbar {
  background: #0275d8 !important;
  border-bottom: 1px solid #0265c0;
  padding: 0.6rem 0;
}

.nc-footer__topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: #ffffff !important; /* ← était #000000 */
  text-align: center;
  font-weight: 700;
}

.nc-footer__topbar-brand {
  font-weight: 600;
  color: #FFFFFF;
  width: 100%; /* seul sur sa ligne en mobile */
}

.nc-footer__topbar-sep {
  color: #FFFFFF  !important;
  display: none; /* masqué en mobile, inutile quand ça saute à la ligne */
}

.nc-footer__topbar-tel {
  color: #FFFFFF  !important;
  text-decoration: none;
  font-weight: 600;
}

/* Tablette et + */
@media (min-width: 640px) {
  .nc-footer__topbar-inner {
    justify-content: center;
    text-align: left;
  }

  .nc-footer__topbar-brand {
    width: auto; /* revient en ligne avec les autres */
  }

  .nc-footer__topbar-sep {
    display: inline; /* séparateurs visibles */
  }
}