/* =========================================================
   DSITEC — style.css  (refonte design : cockpit sombre)
   Sections alternées noir / anthracite · hero image · blocs feature
   ========================================================= */

:root{
  /* fonds : noir profond + anthracite pour démarquer les sections */
  --black:      #080A0E;
  --anthracite: #171C24;
  --surface:    #1A2029;   /* cartes */
  --surface-2:  #20272F;   /* panneaux mis en avant */
  --border:     #2A323C;
  --border-soft:#232A33;

  /* encres */
  --ink:   #EDF0F3;
  --ink-2: #9BA6B2;
  --ink-3: #5E6975;

  /* accents */
  --amber:   #F0B429;
  --amber-2: #FFC94D;
  --steel:   #56A0E0;
  --steel-2: #4C8DFF;
  --success: #3DD68C;
  --danger:  #F2555A;

  --maxw: 1140px;
  --radius: 16px;
  --nav-h: 70px;

  --font-display: 'Archivo Expanded','Archivo',system-ui,sans-serif;
  --font-body:    'Archivo',system-ui,-apple-system,sans-serif;
  --font-mono:    'JetBrains Mono',ui-monospace,monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--black);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;            /* anti-débordement mobile */
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}

/* ---------- Typo ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.12; margin:0; color:var(--ink); }
h1{ font-size:clamp(30px,5.2vw,52px); font-weight:800; letter-spacing:-.5px; }
h2{ font-size:clamp(25px,3.6vw,38px); font-weight:700; letter-spacing:-.4px; }
h3{ font-size:clamp(18px,2vw,22px); font-weight:700; }
p{ margin:0; color:var(--ink-2); }

.hl{ color:var(--amber); }

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12.5px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--steel);
  margin-bottom:14px;
}
.eyebrow.center{ display:block; text-align:center; }
.kicker{
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:11px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg,var(--amber-2),var(--amber));
  color:#0A0C10;
  box-shadow:0 6px 22px -8px rgba(240,180,41,.6);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(240,180,41,.7); }
.btn-ghost{
  background:transparent; color:var(--ink);
  border-color:var(--border);
}
.btn-ghost:hover{ border-color:var(--steel); color:var(--steel); }

/* =========================================================
   NAV
   ========================================================= */
nav{
  position:sticky; top:0; z-index:60;
  background:rgba(10,12,16,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.nav-inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:0 clamp(20px,5vw,40px);
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
/* logo image (placeholder logo.svg, remplaçable) + repli texte */
.brand{ display:inline-flex; align-items:center; }
.brand img{ height:34px; width:auto; }
.brand b{ color:var(--amber); }              /* repli si logo texte */
nav .brand{ font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:.5px; }

.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{
  font-size:15px; color:var(--ink-2); font-weight:500;
  transition:color .15s ease; position:relative;
}
.nav-links a:not(.btn):hover{ color:var(--ink); }
.nav-links a.active:not(.btn){ color:var(--ink); }
.nav-links a.active:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-24px; height:2px;
  background:var(--amber);
}

.burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; padding:8px; cursor:pointer;
}
.burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none;
  border-top:1px solid var(--border-soft);
  background:var(--black);
}
.mobile-menu .wrap{ display:flex; flex-direction:column; gap:4px; padding-block:14px; }
.mobile-menu a{ padding:12px 4px; color:var(--ink-2); font-weight:500; border-bottom:1px solid rgba(35,42,51,.5); }
.mobile-menu a:last-child{ border-bottom:0; margin-top:8px; }
.mobile-menu a.btn{ justify-content:center; }
.mobile-menu.open{ display:block; }

/* =========================================================
   HERO  (image de fond + texte centré)
   ========================================================= */
.hero{
  position:relative;
  text-align:center;
  padding:clamp(64px,10vw,118px) 0 clamp(56px,8vw,96px);
  background:
    linear-gradient(180deg, rgba(10,12,16,.55), rgba(10,12,16,.78) 70%, var(--black)),
    url("hero-bg.svg") center/cover no-repeat,
    var(--black);
  border-bottom:1px solid var(--border-soft);
}
.hero .wrap{ position:relative; z-index:1; }
.hero-narrow{
  max-width:780px; margin-inline:auto;
}
.hero h1{ margin-bottom:20px; }
.hero .lede{ font-size:clamp(16px,2vw,19px); color:var(--ink-2); max-width:660px; margin:0 auto; }
.crumb{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3);
  margin-bottom:16px;
}
.crumb a{ color:var(--steel); }
.crumb a:hover{ text-decoration:underline; }

.hero-cta{
  display:flex; flex-wrap:wrap; gap:14px;
  justify-content:center; margin-top:30px;
}
.hero-note{
  font-family:var(--font-mono); font-size:13px; color:var(--ink-3);
  margin-top:22px;
}

/* =========================================================
   SECTIONS  — alternance NOIR / ANTHRACITE
   ========================================================= */
section{
  padding:clamp(58px,8vw,92px) 0;
  background:var(--black);
  border-top:1px solid var(--border-soft);
}
section:nth-of-type(even){
  background:var(--anthracite);
}
/* léger liseré lumineux pour marquer la coupe entre sections */
section::before{ content:none; }

.sec-head{ max-width:680px; margin-bottom:46px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ margin:6px 0 16px; }
.sec-head p{ font-size:17px; }

/* ---------- Grilles de cartes ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }

.card{
  display:block;
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:26px 24px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a.card:hover{
  transform:translateY(-4px);
  border-color:var(--steel);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
}
.card h3{ margin:12px 0 10px; }
.card p{ font-size:15.5px; }
.card .arrow{
  display:inline-block; margin-top:16px;
  color:var(--steel); font-weight:600; font-size:14.5px;
  font-family:var(--font-mono);
}
a.card:hover .arrow{ color:var(--amber); }

/* =========================================================
   FEATURE  — bloc « middle » deux colonnes, image gauche/droite
   ========================================================= */
.feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.feature + .feature{ margin-top:clamp(48px,7vw,80px); }
.feature-media{
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  overflow:hidden;
  background:#12161C;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.95);
}
.feature-media img{ width:100%; }
.feature-body .eyebrow{ margin-bottom:10px; }
.feature-body h2{ margin-bottom:16px; }
.feature-body p{ font-size:16.5px; margin-bottom:14px; }
.feature-body .btn{ margin-top:8px; }
/* image à droite */
.feature.reverse .feature-media{ order:2; }
.feature.reverse .feature-body{ order:1; }

/* ---------- Rail (process numéroté) ---------- */
.rail{ display:grid; gap:18px; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:22px 24px;
}
.step-num{
  font-family:var(--font-mono); font-weight:700; font-size:15px;
  color:var(--amber);
  background:rgba(240,180,41,.08);
  border:1px solid rgba(240,180,41,.25);
  width:46px; height:46px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
}
.step h3{ margin-bottom:6px; }
.step p{ font-size:15.5px; }

/* ---------- Split / panels ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.panel{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:30px 28px;
}
.panel.warm{
  background:linear-gradient(180deg,rgba(240,180,41,.06),var(--surface));
  border-color:rgba(240,180,41,.28);
}
.panel h3{ margin-bottom:16px; }
.flist{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.flist li{
  padding-left:26px; position:relative; color:var(--ink-2); font-size:15.5px;
}
.flist li::before{
  content:"→"; position:absolute; left:0; color:var(--steel); font-weight:700;
}
.flist li b{ color:var(--ink); }

/* ---------- CTA final ---------- */
.cta-final{
  text-align:center;
  max-width:720px; margin-inline:auto;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(240,180,41,.10), transparent 60%),
    var(--surface);
  border:1px solid rgba(240,180,41,.22);
  border-radius:24px;
  padding:clamp(40px,6vw,64px) clamp(24px,5vw,52px);
}
.cta-final h2{ margin:8px 0 16px; }
.cta-final p{ max-width:520px; margin:0 auto 8px; }

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  background:var(--black);
  border-top:1px solid var(--border-soft);
  padding:64px 0 36px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
}
footer .brand{ font-family:var(--font-display); font-weight:800; font-size:22px; margin-bottom:14px; }
footer .brand img{ height:32px; }
.foot-grid p{ font-size:14.5px; max-width:340px; }
.foot-col h4{ font-size:13px; font-family:var(--font-mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.foot-col a{ display:block; color:var(--ink-2); font-size:15px; padding:5px 0; }
.foot-col a:hover{ color:var(--ink); }
.foot-legal{
  border-top:1px solid var(--border-soft);
  padding-top:24px; margin:0;
  font-size:13px; color:var(--ink-3);
}

/* =========================================================
   REVEAL au scroll
   ========================================================= */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid > div:first-child{ grid-column:1 / -1; }
}

@media (max-width:880px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .nav-links a.active:not(.btn)::after{ display:none; }

  /* blocs deux colonnes -> empilés, visuel en haut */
  .feature,
  .feature.reverse{ grid-template-columns:1fr; }
  .feature .feature-media,
  .feature .feature-body,
  .feature.reverse .feature-media,
  .feature.reverse .feature-body{ order:0; }

  .split{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .hero{ padding-top:48px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ justify-content:center; }
  .grid-3,.grid-2{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:12px; }
  .step-num{ width:42px; height:42px; }
  .card{ padding:22px 20px; }
}

/* =========================================================
   Accessibilité
   ========================================================= */
a:focus-visible,.btn:focus-visible,.burger:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   FORMULAIRE DE CONTACT
   ========================================================= */
.form-card{
  max-width:640px; margin-inline:auto;
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:20px;
  padding:clamp(26px,5vw,44px);
}
.field{ margin-bottom:20px; }
.field label{
  display:block; margin-bottom:8px;
  font-size:14.5px; font-weight:600; color:var(--ink);
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:var(--black);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:11px;
  padding:13px 14px;
  font-family:var(--font-body); font-size:16px;   /* 16px = pas de zoom auto iOS */
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(240,180,41,.18);
}
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 14px) center;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
  padding-right:40px;
}
.captcha label b{ color:var(--amber); font-family:var(--font-mono); }
.captcha input{ max-width:160px; }

.form-card .btn-primary{ width:100%; justify-content:center; margin-top:6px; }
.form-note{ font-size:13px; color:var(--ink-3); margin-top:14px; }

/* honeypot : invisible pour l'humain, présent pour les bots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-msg{ border-radius:12px; padding:16px 18px; margin-bottom:22px; font-size:15px; }
.form-msg.ok{ background:rgba(61,214,140,.10); border:1px solid rgba(61,214,140,.4); color:var(--ink); }
.form-msg.err{ background:rgba(242,85,90,.08); border:1px solid rgba(242,85,90,.4); color:var(--ink); }
.form-msg ul{ margin:8px 0 0; padding-left:20px; }
.form-msg li{ color:var(--ink-2); }

/* =========================================================
   RÉSERVATION — calendrier FullCalendar (thème sombre) + modale
   ========================================================= */
.cal-wrap{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:clamp(16px,3vw,28px);
}
.cal-hint{ font-size:14.5px; color:var(--ink-2); margin:0 0 18px; }
.cal-hint::before{ content:"●"; color:var(--steel); margin-right:8px; }

/* variables FullCalendar -> cockpit sombre */
#calendar{
  --fc-page-bg-color:transparent;
  --fc-border-color:#2A323C;
  --fc-neutral-bg-color:#161B22;
  --fc-neutral-text-color:#9BA6B2;
  --fc-today-bg-color:rgba(86,160,224,.08);
  --fc-now-indicator-color:#F2555A;
  --fc-non-business-color:rgba(10,12,16,.45);
  --fc-highlight-color:rgba(240,180,41,.18);
  color:var(--ink);
  font-family:var(--font-body);
}
#calendar a{ color:var(--ink); }
.fc .fc-toolbar-title{ font-family:var(--font-display); font-size:clamp(16px,2.4vw,21px); font-weight:700; }
.fc .fc-col-header-cell-cushion,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion{ color:var(--ink-2); font-family:var(--font-mono); font-size:12px; text-decoration:none; }
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid{ border-color:var(--border); }
.fc .fc-timegrid-slot{ height:2.4em; }
/* créneaux libres (heures d'ouverture) cliquables */
.fc .fc-timegrid-col.fc-day-today{ background:var(--fc-today-bg-color); }
.fc-timegrid-col-bg .fc-non-business{ background:var(--fc-non-business-color); }
.fc .fc-timegrid-col-frame:hover{ cursor:pointer; }
/* créneaux pris (events background rouge) */
.fc .fc-bg-event{ background:rgba(242,85,90,.30) !important; opacity:1; }
.fc .fc-bg-event .fc-event-title{ color:#F2b5b7; font-size:11px; font-style:normal; font-family:var(--font-mono); padding:2px 4px; }

/* boutons FC -> style DSITEC */
.fc .fc-button-primary{
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--ink); font-family:var(--font-body); font-weight:600;
  text-transform:none; box-shadow:none;
}
.fc .fc-button-primary:not(:disabled):hover{ background:#272f38; border-color:var(--steel); }
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:focus{ box-shadow:0 0 0 3px rgba(86,160,224,.25); }
.fc .fc-button-primary:disabled{ background:#1a2029; color:var(--ink-3); border-color:var(--border-soft); }
.fc .fc-button .fc-icon{ vertical-align:middle; }

/* ---------- Modale ---------- */
.modal{
  position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  background:rgba(6,8,11,.72); backdrop-filter:blur(4px);
  padding:18px;
}
.modal.open{ display:flex; }
.modal-card{
  position:relative;
  width:100%; max-width:460px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:30px clamp(20px,4vw,32px);
  max-height:92vh; overflow:auto;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
.modal-close{
  position:absolute; top:12px; right:14px;
  background:none; border:0; color:var(--ink-2);
  font-size:28px; line-height:1; cursor:pointer; padding:4px 8px;
}
.modal-close:hover{ color:var(--ink); }
.slot-label{ font-size:clamp(18px,3vw,23px); margin:6px 0 18px; color:var(--amber); }
.modal-actions{ display:flex; gap:12px; margin-top:8px; }
.modal-actions .btn{ flex:1; justify-content:center; }
.book-msg{ font-size:14.5px; border-radius:10px; }
.book-msg.err{ background:rgba(242,85,90,.08); border:1px solid rgba(242,85,90,.4); color:var(--ink); padding:12px 14px; margin-bottom:16px; }
.book-msg.ok{ background:rgba(61,214,140,.10); border:1px solid rgba(61,214,140,.4); color:var(--ink); padding:14px 16px; }