/* =========================================================
   NEXORA — STYLE GLOBAL (consolidé & mobile-first)
   ========================================================= */


/* === LEs puces === */

.nx-list-img {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nx-list-img li {
  padding-left: 32px;
  margin-bottom: 14px;
  background-image: url('../images/nexicon.png'); /* ton icône */
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 0 4px; /* alignement vertical */
}


/* === NOS OFFRES === */
.offre-container {
    text-align: center;
    margin: 40px auto;
}

.offre-intro {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 18px;
}

.btn-offre {
    display: inline-block;
    background-color: #74170F;       /* Rouge Nexora */
    color: #fff;
    padding: 14px 32px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s ease;
}

.btn-offre:hover {
    background-color: #5c110c;       /* Rouge foncé au hover */
    transform: translateY(-2px);
}



/* === FONT & VARIABLES === */
@font-face{
  font-family:"Montserrat Alternates";
  src:url("../fonts/MontserratAlternates-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900;
  font-display:swap;
}
:root{
  /* Brand */
  --accent:#74170F;
  --text-main:#515050;
  --bg-page:#ffffff;
  --bg-soft:#f5f5f5;
  --border-soft:#dddddd;
  --radius-card:12px;
  --radius-field:6px;
  --max-width:1280px;
  --content-width:680px;

  /* UI (forms thème clair par défaut) */
  --surface:#ffffff;
  --surface-2:#f9fbff;
  --text:#0f172a;
  --muted:#5a6275;
  --line:#e7ecf7;
  --primary:#4f7cff;
  --primary-600:#3f65d1;
  --primary-700:#3556b1;
  --success:#2ac48a;
  --warning:#ffc557;
  --danger:#ff6b6b;
  --ring:0 0 0 3px rgba(79,124,255,.35);
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(16,24,40,.08);
  --shadow-sm:0 6px 18px rgba(16,24,40,.06);
  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,("Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol");
}

/* === RESET / BASE === */
html{box-sizing:border-box;scroll-behavior:smooth;}
*,*::before,*::after{box-sizing:inherit;}
html,body{overflow-x:hidden;}
body{
  margin:0;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
  font-family:"Montserrat Alternates",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:var(--text-main);
  background:var(--bg-page);
  line-height:1.55;
}
img,video{max-width:100%;height:auto;display:block;}
iframe{max-width:100%;}
a,button{touch-action:manipulation;min-height:44px;}
.container,.wrapper,.section,.header-inner,.footer-inner{
  width:min(1200px,100% - 2rem);
  margin-inline:auto;
}

/* === TYPO === */
h1,h2,h3,h4{color:var(--text-main);font-weight:600;line-height:1.25;margin:0;}
h1{font-size:clamp(1.8rem,3.6vw,2.5rem);}
h2{font-size:clamp(1.2rem,2.6vw,2rem);}
h3{font-size:1.1rem;color:var(--accent);}
p{font-size:.95rem;line-height:1.6;margin:0 0 1rem;color:#4a4a4a;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.section{padding:clamp(2rem,4vw,4rem) 0;}

/* =========================================================
   HERO SLIDER (fade)
   ========================================================= */
/* ============================
   HERO SLIDER NEXORA
   ============================ */

/* ============================
   HERO SLIDER – NEXORA
   ============================ */

.hero-slider {
  position: relative;
  width: 100%;
  height: 80vh;
  max-height: 900px;
  min-height: 450px;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.fade-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Slide */
.fade-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s;
  display: flex;
  align-items: center;          /* centrage vertical */
  justify-content: flex-start;  /* texte à gauche */
  padding: 0 7%;
  overflow: hidden;
}

.fade-slide .slide-overlay h2 {
  text-transform: uppercase;      /* met le texte en CAPITAL */
  letter-spacing: 1px;            /* évite l’effet “trop collé” */
  font-weight: 700;               /* garde un rendu solide */
}


/* Slide active */
.fade-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Image de fond */
.fade-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.85); /* on garde de la lumière sous le rouge */
  z-index: 0;
}

/* --- VOILE ROUGE FONCÉ LÉGÈREMENT TRANSPARENT --- */
.fade-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(116, 23, 15, 0.65),
    rgba(116, 23, 15, 0.40),
    rgba(116, 23, 15, 0.20)
  );
  z-index: 1;           /* au-dessus de l’image, sous le texte */
  pointer-events: none;
}

/* Bloc texte */
.slide-overlay {
  position: relative;
  z-index: 2;           /* au-dessus du dégradé */
  max-width: 100%;
  color: #fff;
  text-align: left;
}
.slide-overlay p {
  font-size: 130%;
  color: #fff;
}
.slide-overlay h1 {
  font-size: 330%;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Boutons de nav (si utilisés) */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  font-size: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  z-index: 3;
}

.slider-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}

.slider-btn.prev { left: 1rem; }
.slider-btn.next { right: 1rem; }

/* === Points de navigation === */
.slider-dots {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
  justify-content: center;
  align-items: center;
}

.slider-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.slider-dots button.active {
  background: #fff;
  transform: scale(1.2);
}

.slider-dots button:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* === Responsive === */
@media (max-width: 768px) {
  .hero-slider {
    height: 70vh;
    min-height: 360px;
  }

  .fade-slide {
    padding: 0 10%;
  }

  .slide-overlay {
    max-width: 95%;
    padding: 0 1rem;
  }

  .slide-overlay h2 {
    font-size: clamp(20px, 5.5vw, 32px);
    line-height: 1.3;
  }

  .slider-btn {
    width: 38px;
    height: 38px;
    font-size: 1.5rem;
  }

  .slider-dots {
    bottom: 1rem;
    gap: 6px;
  }

  .slider-dots button {
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 480px) {
  .hero-slider {
    height: 60vh;
    min-height: 300px;
  }

  .slide-overlay h2 {
    font-size: clamp(18px, 5vw, 26px);
  }

  .slider-dots {
    bottom: 0.8rem;
  }
}

/* ============================
   HERO SLIDER – MOBILE ONLY
   ============================ */

/* Téléphones & petites tablettes */
@media (max-width: 768px) {

  /* Hauteur plus raisonnable, proche du ratio desktop */
  .hero-slider {
    height: 52vh;          /* au lieu de 70–80vh */
    min-height: 260px;
    max-height: 420px;
  }

  /* On recentre le contenu, moins de padding */
  .fade-slide {
    align-items: center;          /* comme sur PC */
    padding: 0 1.4rem;
  }

  /* Image moins "zoomée" visuellement */
  .fade-slide img {
    object-fit: cover;
    object-position: center center;   /* recentre le sujet */
  }

  .slide-overlay {
    max-width: 90%;
    text-align: left;
  }

  .slide-overlay h1 {
    font-size: clamp(1.35rem, 4.8vw, 1.9rem);
    line-height: 1.25;
    margin-bottom: 0.4rem;
  }

  .slide-overlay p {
    font-size: 0.95rem;
  }

  .slider-btn {
    width: 34px;
    height: 34px;
    font-size: 1.3rem;
  }

  .slider-dots {
    bottom: 0.8rem;
    gap: 6px;
  }

  .slider-dots button {
    width: 6px;
    height: 6px;
  }
}

/* Très petits écrans (iPhone SE & co) */
@media (max-width: 480px) {

  .hero-slider {
    height: 48vh;
    min-height: 240px;
  }

  .fade-slide {
    padding: 0 1.1rem;
  }

  .slide-overlay h1 {
    font-size: clamp(1.25rem, 4.6vw, 1.7rem);
  }

  .slider-btn {
    width: 30px;
    height: 30px;
    font-size: 1.1rem;
  }

  .slider-dots {
    bottom: 0.6rem;
  }
}





/* =========================================================
   HEADER / NAV (checkbox no-JS)
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border-soft);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 0;
}
.brand-logo{height:40px;width:auto;display:block;}

.main-nav{display:flex;align-items:center;gap:24px;white-space:nowrap;font-weight:600;}
.main-nav>a{color:#0f172a;text-decoration:none;height:56px;display:inline-flex;align-items:center;}
.main-nav>a:hover{color:#4f46e5;}

.main-nav details.dropdown{position:relative;display:inline-flex;align-items:center;}
.main-nav summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;height:56px;color:#0f172a;}
.main-nav summary::-webkit-details-marker{display:none;}
.main-nav summary::after{content:" ▾";font-size:.9em;color:#4f46e5;margin-left:4px;}
.main-nav .dropdown-content{
  position:absolute;top:100%;left:0;min-width:320px;z-index:2000;
  background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:12px 0;
  box-shadow:0 30px 60px rgba(0,0,0,.08);display:none;
}
.main-nav details[open] .dropdown-content,
.main-nav details.dropdown:hover .dropdown-content{display:block;}
.main-nav .dropdown-content a{display:block;padding:10px 18px;color:#1e293b;text-decoration:none;font-weight:500;}
.main-nav .dropdown-content a:hover{background:rgba(79,70,229,.06);color:#4f46e5;}

.cta-header{
  background:#73160e;color:#fff;font-weight:700;text-decoration:none;
  padding:.8rem 1.1rem;border-radius:12px;line-height:1;box-shadow:0 8px 18px rgba(13,110,253,.18);
}

.nav-toggle{display:none;}
.burger{display:none;cursor:pointer;padding:.5rem;}
.burger span{display:block;width:28px;height:2px;background:#0f172a;margin:6px 0;transition:.25s;}
#nav-toggle:checked ~ .header-inner .burger span:nth-child(1){transform:translateY(8px) rotate(45deg);}
#nav-toggle:checked ~ .header-inner .burger span:nth-child(2){opacity:0;}
#nav-toggle:checked ~ .header-inner .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.mobile-nav{
  display:none;flex-direction:column;gap:.25rem;
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid #e5e7eb;
  box-shadow:0 20px 40px rgba(0,0,0,.10);
  padding:.75rem 1rem 1rem;z-index:1500;
  max-height:calc(100vh - 70px);overflow:auto;
}
.mobile-nav a{display:block;padding:.8rem 0;font-weight:600;color:#0f172a;text-decoration:none;}
.mobile-nav a:hover{color:#4f46e5;}

.mobile-dropdown summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;font-weight:600;}
.mobile-dropdown summary::-webkit-details-marker{display:none;}
.mobile-dropdown summary::after{content:"▾";transition:transform .2s;}
.mobile-dropdown[open] summary::after{transform:rotate(180deg);}
.mobile-nav .dropdown-content{position:static;display:block;box-shadow:none;border:0;padding:0 0 0 .75rem;}

.mobile-nav .cta-contact{
  align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.2rem;border-radius:12px;font-weight:700;text-decoration:none;
  background:#0d6efd;color:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12);margin-top:.5rem;
}

@media (max-width:899px){
  .main-nav{display:none;}
  .cta-header{display:none;}
  .burger{display:inline-block;}
  #nav-toggle:checked ~ .mobile-nav{display:flex;animation:slideDown .25s ease;}
}
@media (min-width:900px){
  .mobile-nav{display:none !important;}
  .burger{display:none;}
  .main-nav{display:flex;}
  .cta-header{display:inline-flex;}
}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}

/* =========================================================
   HERO SIMPLE (hors slider)
   ========================================================= */
.hero{display:grid;gap:1.5rem;}
@media (min-width:900px){.hero{grid-template-columns:1fr 1fr;align-items:start;}}
.hero-image-wrap{background:#000;border-radius:var(--radius-card);overflow:hidden;}
.hero-image{width:100%;height:auto;object-fit:cover;aspect-ratio:16/9;}
.hero-content h1{font-weight:600;}
.hero-content p{font-size:.95rem;max-width:36rem;color:#4a4a4a;}

/* =========================================================
   SERVICES (cards + overlay)
   ========================================================= */
.services-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding-top: 1rem;
}

/* ===== CARTE SERVICE ===== */
.service-card {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ===== IMAGE ===== */
.service-image {
  position: relative;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.service-card:hover img {
  transform: scale(1.1);
  filter: brightness(0.5);
}

/* ===== OVERLAY ===== */
.service-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.service-card:hover .service-overlay {
  opacity: 1;
  visibility: visible;
}

/* ===== TEXTES ===== */
.service-overlay h3 {
  margin: 0 0 0.8rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

.service-overlay p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #f1f1f1;
  max-width: 280px;
}

/* ===== BOUTON ===== */
.btn-more {
  display: inline-block;
  background: var(--accent, #74170F);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  margin-top: 1rem;
  box-shadow: 0 8px 18px rgba(116, 23, 15, 0.18);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.btn-more:hover {
  background: #3a0b08;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(116, 23, 15, 0.28);
}


/* =========================================================
   BLOCS ENGAGEMENT
   ========================================================= */
.engagement{display:grid;gap:1rem;margin-top:2rem;}
@media (min-width:900px){.engagement{grid-template-columns:1fr 1fr;align-items:start;}}
.engagement img{width:100%;object-fit:cover;border-radius:var(--radius-card);aspect-ratio:4/3;}
.engagement-text h2{color:var(--accent);font-weight:600;margin-bottom:.5rem;}
.engagement-text p{font-size:.9rem;color:#4a4a4a;}

/* =========================================================
   CONTACT (bloc simple)
   ========================================================= */
.contact-block{background:#fafafa;border:1px solid var(--border-soft);border-radius:var(--radius-card);padding:1.5rem;box-shadow:0 16px 32px rgba(0,0,0,.05);margin-top:2rem;}
.contact-title{font-size:1rem;font-weight:600;color:var(--text-main);margin-bottom:1rem;}
.form-grid{display:grid;gap:1rem;}
@media (min-width:700px){.form-grid{grid-template-columns:repeat(2,1fr);}}
.form-field{display:flex;flex-direction:column;font-size:.85rem;color:var(--text-main);}
.form-field label{font-weight:600;margin-bottom:.4rem;}
.form-field input,.form-field textarea{border:1px solid var(--border-soft);border-radius:var(--radius-field);padding:.6rem .7rem;font-size:.95rem;font-family:inherit;color:var(--text-main);}
.form-field textarea{min-height:5rem;resize:vertical;}
.form-full{grid-column:1 / -1;}
@media (max-width:699px){.form-full{grid-column:1 / -1;}}
.btn-submit{background:var(--accent);border:0;border-radius:var(--radius-field);color:#fff;font-weight:600;padding:.8rem 1rem;font-size:.95rem;cursor:pointer;box-shadow:0 16px 32px rgba(0,0,0,.15);}
.btn-submit:hover{background:#3a0b08;}

/* =========================================================
   PAGE BANNER (variantes)
   ========================================================= */
.page-banner {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.page-banner .bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-banner .overlay {
  position: absolute;
  inset: 0;
  background: rgba(58, 58, 58, 0.6); /* gris foncé avec transparence */
  z-index: 1;
}

.page-banner .container {
  position: relative;
  z-index: 2;
}

.page-banner h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  margin: 0;
  color: #fff;
}

/* Version mobile */
@media (max-width: 768px) {
  .page-banner {
    height: 420px;
  }
}
.intro {
  color: #fff;
}

.page-banner::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:0;}
.page-banner .container{position:relative;z-index:1;}
.page-banner h1{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:700;margin:0;color:#fff;}
@media (max-width:768px){.page-banner{padding:60px 0;background-position:top;}}
.page-banner-service.is-relation-client{background-image:url('../images/servreca.jpg');}
.page-banner-service.is-marketing{background-image:url('../images/sevmakdev.jpg');}
.page-banner-service.is-conciergerie{background-image:url('../images/sevcon.jpg');}
.page-banner-service.is-image-carriere{background-image:url('../images/sevimcar.jpg');}
.page-banner-service.is-amenagementorg{background-image:url('../images/servmaorg.jpg');}
.page-banner-service.is-amenagement{background-image:url('../images/servespro.jpg');}

/* === Banner service avec même style et dimension que la section du haut === */
.page-banner-service {
  position: relative;
  width: 100%;
  height: 400px; /* même hauteur que celle sur ta capture */

/*.page-banner-service.is-marketing          { background-image:url('../images/conce.jpg'); }
.page-banner-service.is-conciergerie       { background-image:url('../images/services/conciergerie.jpg'); }
.page-banner-service.is-image-carriere     { background-image:url('../images/services/image-carriere.jpg'); }
.page-banner-service.is-amenagementorg     { background-image:url('../images/services/amenagement-organisation.jpg'); }
.page-banner-service.is-amenagement        { background-image:url('../images/services/amenagement-securite.jpg'); }*/
  
  background: #3a3737;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;     /* centre verticalement le texte */
  justify-content: center; /* centre horizontalement */
  border-radius: 0;        /* pas d'arrondi pour coller au style du haut */
  overflow: hidden;
}

/* superposition sombre pour lisibilité du texte */
.page-banner-service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* voile transparent */
  z-index: 0;
}

/* Conteneur et titre */
.page-banner-service .container {
  position: relative;
  z-index: 1; /* au-dessus du voile */
  text-align: center;
}

.page-banner-service h1 {
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); /* lisibilité */
}

/* responsive */
@media (max-width: 768px) {
  .page-banner-service {
    height: 280px; /* un peu plus petit sur mobile */
  }
  .page-banner-service h1 {
    font-size: clamp(22px, 6vw, 32px);
  }
}



/* =========================================================
   LAYOUT 2 COLONNES (sidebar + contenu)
   ========================================================= */
.content-two-cols{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start;margin:60px auto;max-width:1200px;padding:0 20px;}
.sidebar{background:#5a1f1f;border-radius:12px;padding:20px 0;display:flex;flex-direction:column;}
.side-link{display:block;padding:14px 18px;color:#fff;text-decoration:none;font-weight:500;border-bottom:1px solid rgba(255,255,255,.15);transition:all .2s;}
.side-link:hover{background:#7b2f2f;}
.side-link.active{background:#8b2f2f;font-weight:600;}
.content-area img{max-width:100%;border-radius:12px;margin-bottom:20px;}
.content-area .intro{color:#6b1c1c;font-weight:700;font-size:1.3rem;margin-bottom:10px;}
.content-area h2{color:#5a1f1f;font-size:1.25rem;margin-top:30px;}
@media (max-width:900px){
  .content-two-cols{grid-template-columns:1fr;}
  .sidebar{flex-direction:row;flex-wrap:wrap;background:transparent;border:none;gap:8px;}
  .side-link{background:#5a1f1f;color:#fff;border-radius:6px;border:none;}
  .side-link.active{background:#fff;color:#5a1f1f;font-weight:700;border-left:6px solid #d34b4b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);}
  .side-link:hover:not(.active){background:#7b2f2f;color:#fff;}
}

/* =========================================================
   CONTENT NARROW (pages internes)
   ========================================================= */
.content-narrow{max-width:var(--content-width);margin:2rem auto 0;padding:0 1rem 3rem;font-size:.95rem;line-height:1.6;color:#333;}
.content-narrow h2{font-size:1.05rem;font-weight:700;color:var(--accent);margin:1.5rem 0 .5rem;}
.content-narrow ul{padding-left:1.1rem;margin:0 0 1rem;}
.content-narrow li{margin-bottom:.5rem;}
.content-narrow img{width:100%;border-radius:var(--radius-card);border:1px solid var(--border-soft);box-shadow:0 16px 32px rgba(0,0,0,.07);object-fit:cover;aspect-ratio:16/9;margin-bottom:1rem;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:#fff;border-top:1px solid var(--border-soft);margin-top:3rem;font-size:.85rem;color:var(--text-main);}
.footer-top{display:grid;gap:1rem;padding:2rem 0 1rem;align-items:start;}
@media (min-width:700px){.footer-top{grid-template-columns:1fr auto auto;}}
.footer-logo{height:40px;width:auto;display:block;}
.footer-company{font-weight:600;color:var(--text-main);margin:0 0 .5rem;}
.footer-contact p{margin:0 0 .3rem;color:#4a4a4a;line-height:1.4;}
.footer-bottom{border-top:1px solid var(--border-soft);text-align:center;padding:1rem 0 2rem;color:#777;font-size:.8rem;}
.footer-legal{text-align:center;margin-top:1.5rem;}
.legal-link{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-weight:600;text-decoration:none;color:#fff;background:var(--accent);
  padding:.6rem 1rem;border-radius:8px;transition:.3s;
}
.legal-link:hover{background:#3a0b08;transform:translateY(-2px);}
.legal-link svg{width:18px;height:18px;fill:currentColor;transition:transform .3s;}
.legal-link:hover svg{transform:translateY(-3px);}

/* =========================================================
   EFFET REVEAL
   ========================================================= */
.reveal{opacity:0;transform:translateY(24px);transition:all .6s cubic-bezier(.16,1,.3,1);}
.reveal.visible{opacity:1;transform:translateY(0);}

/* =========================================================
   FORMS — NEXORA UI (scopé, pas d’override global body)
   ========================================================= */
.forms-section{max-width:1100px;margin:clamp(24px,5vw,60px) auto;padding:0 20px;display:grid;gap:clamp(18px,3vw,28px);}
.form-block{
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:clamp(18px,3.5vw,32px);overflow:hidden;
}
.form-block h2{margin:0 0 6px;font-size:clamp(20px,2.3vw,28px);letter-spacing:.2px;}
.form-block>p{margin:0 0 20px;color:var(--muted);}
.nexora-form{display:grid;gap:18px;}
.nexora-form fieldset{margin:0;padding:0;border:0;display:grid;gap:16px;grid-template-columns:1fr;}
@media (min-width:720px){.nexora-form fieldset{grid-template-columns:1fr 1fr;} .nexora-form textarea,.nexora-form .full,.nexora-form button,.nexora-form input[type="file"]{grid-column:1 / -1;}}
.nexora-form label{display:block;font-weight:700;font-size:14px;color:var(--text);margin-bottom:6px;}
.nexora-form label.required::after{content:" *";color:var(--danger);font-weight:800;}
.nexora-form input[type="text"],.nexora-form input[type="email"],.nexora-form input[type="tel"],.nexora-form input[type="date"],.nexora-form input[type="file"],.nexora-form select,.nexora-form textarea{
  width:100%;border:1px solid var(--line);background:#fff;color:var(--text);
  border-radius:12px;padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s,transform .05s;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
}
.nexora-form textarea{min-height:140px;resize:vertical;}
.nexora-form ::placeholder{color:color-mix(in oklab,var(--muted) 80%,transparent);}
.nexora-form :is(input,select,textarea):focus-visible{border-color:var(--primary);box-shadow:var(--ring);background:rgba(79,124,255,.08);}
.nexora-form :is(input,select,textarea):user-invalid{border-color:var(--danger);}
.nexora-form :is(input,select,textarea):user-valid{border-color:var(--success);}
.nexora-form select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%),linear-gradient(to right,transparent,transparent);
  background-position:calc(100% - 20px) 1.05em, calc(100% - 14px) 1.05em, 100% 0;
  background-size:6px 6px,6px 6px,2.5em 2.5em;background-repeat:no-repeat;padding-right:46px;
}
.nexora-form input[type="file"]{padding:12px;cursor:pointer;}
.nexora-form input[type="file"]::file-selector-button,
.nexora-form input[type="file"]::-webkit-file-upload-button{
  background:var(--primary);color:#fff;border:0;padding:8px 12px;margin-right:10px;border-radius:10px;cursor:pointer;
}
.nexora-form input[type="file"]:hover::file-selector-button{background:var(--primary-600);}
.nexora-form .field{display:flex;flex-direction:column;}
.nexora-form .hint{margin-top:6px;font-size:12px;color:var(--muted);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:12px;padding:12px 18px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .06s,box-shadow .2s,background-color .2s,border-color .2s,color .2s;white-space:nowrap;}
.btn-primary{background:linear-gradient(180deg,var(--primary) 0%,var(--primary-600) 100%);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0) scale(.98);}
.btn-primary:focus-visible{box-shadow:var(--ring);}
.btn-secondary{background:transparent;border-color:var(--line);color:var(--text);}
.btn-secondary:hover{background:#f8faff;border-color:color-mix(in oklab,var(--line),var(--primary) 35%);}
.nexora-form button{width:100%;margin-top:6px;}
.form-error{background:color-mix(in oklab,var(--danger) 16%,transparent);border:1px solid color-mix(in oklab,var(--danger),transparent 60%);color:#8a1c1c;padding:10px 12px;border-radius:var(--radius-sm);margin:6px 0 0;}
.form-success{background:color-mix(in oklab,var(--success) 16%,transparent);border:1px solid color-mix(in oklab,var(--success),transparent 60%);color:#0d5c3f;padding:10px 12px;border-radius:var(--radius-sm);margin:6px 0 0;}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}
@supports (-webkit-overflow-scrolling:touch){input,select,textarea{font-size:16px;}}
@media (max-width:420px){:root{--radius:12px;--radius-sm:8px;} .form-block{padding:16px;}}

/* =========================================================
   OFFRES — Sections horizontales
   ========================================================= */
.offres-sections{padding:80px 20px;max-width:1200px;margin:0 auto;}
.offres-header{text-align:center;margin-bottom:50px;}
.offres-header h1{font-size:2.4rem;color:var(--accent);margin:0 0 10px;}
.offres-header p{color:#555;max-width:760px;margin:0 auto;line-height:1.6;}
.offre-row{
  display:grid;grid-template-columns:520px 1fr;gap:40px;align-items:center;
  background:#fff;border:1px solid #E7E7E7;border-radius:14px;padding:28px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);margin-bottom:36px;
}
.offre-media{border-radius:12px;overflow:hidden;background:#f6f8fb;border:1px solid #EEE;}
.offre-media img{display:block;width:100%;height:auto;object-fit:contain;}
.offre-content{padding:10px 10px 10px 0;}
.offre-title{font-size:clamp(26px,3.8vw,44px);line-height:1.1;margin:0 0 8px;color:#111;}
.offre-title span{font-weight:500;}
.offre-title strong{font-weight:800;}
.offre-subtitle{font-size:1.05rem;color:#666;margin:6px 0 22px;}
.offre-actions .btn{display:inline-block;padding:14px 26px;border-radius:10px;font-weight:700;text-decoration:none;transition:transform .2s, box-shadow .2s, background .2s;margin-right:12px;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(116,23,15,.25);}
.btn-primary:hover{background:#5d110c;transform:translateY(-1px);box-shadow:0 10px 22px rgba(116,23,15,.28);}
.btn-ghost{border:1px solid var(--accent);color:var(--accent);background:transparent;}
.btn-ghost:hover{background:#f7eceb;}
@media (max-width:1100px){.offre-row{grid-template-columns:460px 1fr;}}
@media (max-width:900px){
  .offre-row{grid-template-columns:1fr;padding:22px;}
  .offre-media{order:1;} .offre-content{order:2;padding:4px 0 0;}
}
@media (max-width:520px){
  .offres-header h1{font-size:1.9rem;}
  .offre-row{padding:18px;}
  .offre-title{font-size:clamp(24px,5.6vw,34px);}
}
.back-to-form{text-align:center;margin-top:60px;}
.btn-back{
  display:inline-block;padding:14px 30px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:600;font-size:1rem;transition:background .3s, transform .2s;
}
.btn-back:hover{background:#5b100b;transform:translateY(-2px);}

/* =========================================================
   NEXORA — Bloc “Découvrez Nexora”
   ========================================================= */
/* === LAYOUT SECTION – 2 colonnes desktop, 1 colonne mobile === */
.nx-showcase.nx-showcase--grid {
  max-width: 1700px;                /* élargit la zone par rapport à 1320px */
  padding: 52px 32px;
  display: grid;
  gap: 40px;
  
}
@media (min-width: 1100px){
  .nx-showcase.nx-showcase--grid {
    grid-template-columns: 1fr 1fr; /* 2 cartes côte-à-côte */
    gap: 48px;
  }
}

/* === CARDS – stoppe les goulots d’étranglement === */
.feature-card {
  width: 100%;
  max-width: none;                  /* enlève la limite 1100px */
  margin: 0;                        /* la grille gère l’alignement */
  border-radius: 20px;
  border: 1px solid var(--nx-border);
  background: #fff;
  box-shadow: 0 16px 36px rgba(0,0,0,.08);
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(0,0,0,.12);
}

/* alternance background très léger si tu veux */
.feature-card:nth-child(even){ background:#fff; }

/* === MEDIA (image arrondie) === */
.feature-media {
  border-radius: 16px;
  overflow: hidden;
}
.feature-media img{
  display:block;
  width:100%;
  height: 260px;                    /* cohérent avec ta maquette */
  object-fit: cover;
  border-radius: 16px;
}

/* Ordres pour alternance image haut/bas */
.feature-card.media-top .feature-media { order: 0; }
.feature-card.media-top .feature-content { order: 1; }
.feature-card.media-bottom .feature-content { order: 0; }
.feature-card.media-bottom .feature-media { order: 1; }

/* === CONTENT – titres massifs, lecture confortable === */
.feature-content{ 
  max-width: 100%;                  /* on laisse respirer, la grille gère la largeur */
}
.eyebrow{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--nx-muted);
  margin-bottom: 8px;
}
.feature-content h3{
  margin: 0 0 12px;
  font-size: clamp(28px, 3.2vw, 40px); /* titre plus grand comme dans le mockup */
  line-height: 1.15;
  font-weight: 800;
  color: var(--nx-text);
}
.feature-content p{
  margin: 0 0 14px;
  color: #313131;
  line-height: 1.7;
  text-align: justify;
}

/* Liste valeurs propre */
.nx-list{
  margin: 8px 0 0;
  padding-left: 18px;
  list-style: disc;
}
.nx-list li{ 
  margin: 8px 0; 
  color:#313131;
  line-height:1.65;
}
.nx-list li strong{ color:#111; }

/* === RWD === */
@media (max-width: 1024px){
  .feature-media img{ height: 240px; }
}
@media (max-width: 768px){
  .nx-showcase.nx-showcase--grid{ padding: 16px 16px 48px; gap: 24px; }
  .feature-card{ padding: 20px; border-radius: 16px; gap: 14px; }
  .feature-media img{ height: 220px; }
  .feature-content h3{ font-size: clamp(24px, 5vw, 32px); }
}


/* =========================================================
   Loader barre
   ========================================================= */
#page-loader{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#74170F,#D34B4B,#FF6B6B);z-index:9999;box-shadow:0 0 10px rgba(116,23,15,.6);transition:width .4s ease;}
#page-loader.active{width:80%;animation:loaderPulse 1.2s infinite ease-in-out;}
#page-loader.complete{width:100%;transition:width .3s ease,opacity .5s ease;opacity:0;}
@keyframes loaderPulse{0%{opacity:1;}50%{opacity:.6;}100%{opacity:1;}}

/* La section sort du container parent et prend toute la largeur du viewport */
.nx-showcase {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 40px 5vw;
}


/* On élargit le conteneur principal de la section */
:root{
  --nx-page-max: 1600px; /* 1440px si tu veux rester prudent */
}

.nx-showcase{
  max-width: 120%;
  padding: 30px;
}

/* Stoppe les goulots d’étranglement */
.nx-showcase .feature-card{
  width: 90%;
  max-width: 100%;
  margin: 0 auto; /* la grille gère l’alignement */
}

.nx-showcase .feature-content{
  max-width: 100%; /* ou 72ch */
  margin: 0 auto;
}


/* Palette (ajuste si besoin) */
:root{
  --nl-bg: #ffffff;
  --nl-border: rgba(255,255,255,.85);      /* bord clair comme sur la capture */
  --nl-placeholder: #8c94a6;               /* gris bleuté du placeholder */
  --nl-btn: #616fb4;                       /* violet/indigo du bouton */
  --nl-btn-hover: #5663a6;
}

/* Conteneur pill */
.newsletter-form{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--nl-bg);
  border: 3px solid var(--nl-border);
  border-radius: 18px;                     /* arrondi externe */
  padding: 10px;                           /* crée l’espace “cannelure” autour du bouton */
  width: 100%;
  max-width: 520px;                        /* ajuste à ton layout */
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Champ email */
.newsletter-input{
  flex: 1 1 auto;
  height: 48px;
  padding: 0 14px 0 18px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #2b2f3a;
  font-size: 16px;
}

.newsletter-input::placeholder{
  color: var(--nl-placeholder);
  opacity: 1;
}

/* Bouton à droite, arrondi interne */
.newsletter-btn{
  flex: 0 0 auto;
  height: 48px;
  width: 56px;                             /* carré arrondi comme sur la capture */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;                      /* arrondi interne du bouton */
  background: var(--nl-btn);
  cursor: pointer;
  transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);  /* petit liseré blanc interne comme l’image */
}

.newsletter-btn:hover{
  background: var(--nl-btn-hover);
  transform: translateY(-1px);
}

.newsletter-btn:active{
  transform: translateY(0);
}

.newsletter-btn svg{
  display: block;
}

/* Focus accessible (form + champ + bouton) */
.newsletter-form:focus-within{
  box-shadow: 0 4px 14px rgba(0,0,0,.12), 0 0 0 4px rgba(97,111,180,.15);
  border-color: rgba(255,255,255,.95);
}

@media (max-width: 480px){
  .newsletter-form{ max-width: 100%; padding: 8px; }
  .newsletter-input{ height: 44px; }
  .newsletter-btn{ height: 44px; width: 52px; border-radius: 12px; }
}


/* ELEMENT GRISE */

.element {
  pointer-events: none;   /* empêche le clic */
  opacity: 0.5;           /* rend visuellement “désactivé” */
  filter: grayscale(100%); /* optionnel, noir et blanc */
  cursor: not-allowed;    /* curseur interdit */
}



/* Slot qui remplace le rectangle noir */
.footer-socials-slot {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ou flex-end selon ton besoin */
  padding-top: 10px;
}

.socials {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-link {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-link img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.social-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/*IL NOUS ON FAIT CONFIANCE*/

/* Section partenaires */
.trust-title {
  text-align: center;
  padding: 60px 20px;
}

/* Titre centré */
.trust-title {
  font-size: clamp(22px, 2.5vw, 28px);
  color: var(--nx-bordeaux, #74170F);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom:
  text-align: center;
}

/* Grille des logos */
.logo-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

/* Image des partenaires */
.logo-grid img {
  width: 1500px; /* augmente la taille des logos */
  height: auto;
  transition: transform 0.4s ease, filter 0.4s ease;
  cursor: pointer;
}

/* Effet zoom au survol */
.logo-grid img:hover {
  transform: scale(1.1); /* zoom un peu plus fort */
  filter: brightness(1.05);
}


/*VIDEO*/
.content-area .media { margin-bottom: 1.25rem; }
.content-area .media .nx-video,
.content-area .media iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  border-radius: 12px;
  background: #000;
  object-fit: cover; /* utile si la source n'est pas 16:9 */
}