/* =======================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =======================================================================
   CHARTE LEVELARA DEV CLUB
   Trois couleurs de marque, fournies avec le logo :
     - Abysse  #071A29  (fond sombre, texte du logo)
     - Cyan    #36D2FF  (couleur d'accent, "Dev Club" dans le logo)
     - Papier  #F5F5F0  (fond clair)
   Tout le reste (gris, lignes, ombres) en est dérivé. Pour changer une
   couleur du site, modifiez-la ICI : elle se répercute partout.
   ======================================================================= */
:root {
  --ink:        #071A29;   /* titres */
  --ink-soft:   #123049;
  --accent:     #36D2FF;   /* cyan de la marque : fonds, bordures, éléments décoratifs */
  --accent-ink: #0A7099;   /* cyan foncé : pour le TEXTE sur fond clair (lisible) */
  --on-accent:  #071A29;   /* texte posé SUR du cyan */
  --teal:       #36D2FF;   /* ancien nom conservé pour compatibilité = cyan */
  --teal-soft:  #DDF5FC;
  --amber:      #0A7099;   /* ancien nom conservé : graphiques */
  --star:       #F5B301;   /* étoiles d'avis : or / jaune */
  --warning:    #D9921E;   /* couleur de statut "en attente" (sémantique, hors charte) */
  --paper:      #F5F5F0;
  --paper-raised: #FFFFFF;
  --line:       #DDDCD1;
  --text:       #22323F;
  --text-mute:  #566471;
  --danger:     #C4432B;
  --success:    #1E8E5A;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-card: 0 1px 2px rgba(7,26,41,0.06), 0 8px 24px rgba(7,26,41,0.06);
  --shadow-pop:  0 12px 32px rgba(7,26,41,0.16);

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --deep:          #071A29;
  --deep-raised:   #0E2B42;
  --deep-text:     #F5F5F0;
  --deep-text-mute:#AEC0CC;
  --deep-line:     #16354C;

  color-scheme: light;
}

[data-theme="dark"] {
  --ink:        #F5F5F0;
  --ink-soft:   #CFE3EC;
  --accent-ink: #36D2FF;
  --teal-soft:  #0E2B3D;
  --amber:      #7BE3FF;
  --star:       #FFC933;
  --paper:      #071A29;
  --paper-raised: #0C2336;
  --line:       #17364D;
  --text:       #DCE7ED;
  --text-mute:  #8FA7B5;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-pop:  0 16px 40px rgba(0,0,0,0.5);

  /* Plus sombre que le fond de page pour que footer et bandeaux restent
     visibles au lieu de se fondre dans la page. */
  --deep:          #040F18;
  --deep-raised:   #0A2031;
  --deep-text:     #F5F5F0;
  --deep-text-mute:#9DB3C0;
  --deep-line:     #112A3B;

  color-scheme: dark;
}
.select-statut {
    background: var(--paper-raised);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.8rem;
    color-scheme: dark;
    cursor: pointer;
}

.select-statut option {
    background: var(--paper-raised);
    color: var(--text);
}

.select-statut:focus {
    outline: none;
    border-color: var(--accent-ink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }
/* `clip` empêche aussi tout défilement horizontal, mais sans faire de <body> un
   conteneur de défilement : c'est ce qui permet à l'en-tête et à la barre de
   raccourcis (position: sticky) de rester collés en haut de l'écran. */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
img { max-width: 100%; height: auto; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  transition: background 0.25s ease, color 0.25s ease;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--text); }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Terminal chip (signature element) ---------- */
.chip-cmd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--teal-soft);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.chip-cmd::before { content: "$"; opacity: 0.55; }
.chip-cmd .cursor {
  display: inline-block;
  width: 7px; height: 14px;
  background: var(--teal);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Circuit divider ---------- */
.circuit-divider {
  position: relative;
  height: 1px;
  background: var(--line);
  margin: 64px 0;
  overflow: visible;
}
.circuit-divider::before,
.circuit-divider::after {
  content: "";
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
.circuit-divider::before { left: 0; }
.circuit-divider::after { right: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center;
  height: 72px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); flex: none; order: 0;
}
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--deep) 0%, var(--teal) 130%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); color: var(--deep-text); font-size: 0.85rem;
}
/* Sur desktop, nav-main n'a pas de boîte propre : ses enfants (liens et
   compte) deviennent des éléments flex directs de la barre du haut, au
   même niveau que le logo et les icônes. Sur mobile, ce comportement est
   annulé (voir plus bas) pour en faire un vrai panneau plein écran.
   Les valeurs "order" replacent liens / icônes / compte dans le bon
   ordre visuel malgré leur position dans le DOM. */
.nav-main { display: contents; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: 100px; order: 1; }
.nav-links a {
  color: var(--text); font-weight: 500; font-size: 0.94rem;
}
.nav-links a:hover { color: var(--accent-ink); text-decoration: none; }
.nav-links a.active { color: var(--accent-ink); font-weight: 700; position: relative; }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--teal);
}
@media (max-width: 760px) {
  .nav-links a.active::after { display: none; }
  .nav-links a.active { padding-left: 10px; border-left: 3px solid var(--teal); }
}
.nav-actions-auth { display: flex; align-items: center; gap: 10px; margin-left: 14px; flex: none; position: relative; order: 3; }
/* Icônes (thème, panier, notifications) : toujours dans la barre du haut,
   jamais dans le panneau qui glisse — sur mobile comme sur desktop. */
.nav-icons-row { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; order: 2; }

.theme-toggle {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { border-color: var(--accent-ink); transform: rotate(14deg); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

.nav-toggle {
  display: none;
  order: 4;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  border-radius: var(--radius-sm);
  width: 42px; height: 42px;
  cursor: pointer;
  color: var(--ink);
}
/* ---------- Filter bar (page Tarifs) ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.filter-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 320px;
}
.filter-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-mute);
  pointer-events: none;
}
.filter-search .form-control {
  padding-left: 40px;
  border-radius: 999px;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-pill {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-pill:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.filter-pill.active { background: var(--deep); border-color: var(--deep); color: var(--deep-text); }

@media (max-width: 640px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-search { max-width: none; flex: 0 0 auto; }
}
/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--deep); color: var(--deep-text); }
.btn-primary:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
[data-theme="dark"] .btn-primary { background: var(--accent); color: var(--on-accent); }
[data-theme="dark"] .btn-primary:hover { background: #7BE3FF; }
.btn-accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn-sm { padding: 8px 14px; font-size: 0.82rem; }
.btn-block { width: 100%; }
.btn-danger { background: var(--danger); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  padding: 76px 0 60px;
  background:
    radial-gradient(680px 320px at 88% -8%, color-mix(in srgb, var(--teal) 18%, transparent), transparent),
    var(--paper);
}
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}
.hero h1 { margin: 18px 0 16px; }
.hero .lead { font-size: 1.08rem; color: var(--text-mute); max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.terminal-card {
  background: var(--deep);
  border-radius: var(--radius-lg);
  padding: 22px 24px 26px;
  box-shadow: var(--shadow-pop);
  font-family: var(--font-mono);
  color: #CFEAE6;
}
.terminal-dots { display: flex; gap: 6px; margin-bottom: 16px; }
.terminal-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--deep-raised); }
.terminal-dots span:first-child { background: #E8735F; }
.terminal-dots span:nth-child(2) { background: #F2C14E; }
.terminal-dots span:nth-child(3) { background: #58C77B; }
.terminal-line { font-size: 0.88rem; margin: 6px 0; opacity: 0; animation: type-in 0.4s ease forwards; }
.terminal-line b { color: var(--accent-ink); }
.terminal-line:nth-child(2) { animation-delay: 0.2s; }
.terminal-line:nth-child(3) { animation-delay: 0.6s; }
.terminal-line:nth-child(4) { animation-delay: 1.0s; }
.terminal-line:nth-child(5) { animation-delay: 1.4s; }
@keyframes type-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .terminal-line { animation: none !important; opacity: 1; }
  .chip-cmd .cursor { animation: none; }
}

/* ---------- Trust bar ---------- */
.trust-bar {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: center;
  padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-mute); font-weight: 500; }
.trust-item svg { color: var(--accent-ink); width: 18px; height: 18px; }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section-head { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.section-head .chip-cmd { margin-bottom: 14px; }

/* ---------- Service cards ---------- */
.grid-services {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px;
}
.card-service {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-service:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.card-service .icon-box {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--teal-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.card-service h3 { margin-bottom: 8px; }
.card-service p { color: var(--text-mute); font-size: 0.92rem; }
.card-service .price-tag {
  font-family: var(--font-mono); font-weight: 600; color: var(--ink);
  margin-top: 14px; display: block; font-size: 1.05rem;
}

/* ---------- Testimonials ---------- */
.grid-testi { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card-testi {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-card);
}
.card-testi .stars { color: var(--star); letter-spacing: 2px; margin-bottom: 10px; }
.card-testi footer { margin-top: 14px; font-size: 0.85rem; color: var(--text-mute); font-weight: 600; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--deep); border-radius: var(--radius-lg); color: var(--deep-text);
  padding: 48px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.cta-band h3 { color: var(--deep-text); margin-bottom: 6px; }
.cta-band p { color: var(--deep-text-mute); margin: 0; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px; box-shadow: var(--shadow-card); max-width: 460px; margin: 0 auto;
}
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 7px;
}
.form-control {
  width: 100%; padding: 11px 14px; font-size: 0.95rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--text); font-family: var(--font-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
  outline: none; border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent);
}
.form-hint { font-size: 0.78rem; color: var(--text-mute); margin-top: 5px; }
.form-error { font-size: 0.78rem; color: var(--danger); margin-top: 5px; display: none; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

.phone-field { display: flex; gap: 8px; }
.phone-field .country-select {
  position: relative; flex: 0 0 128px;
}
.country-select-btn {
  width: 100%; height: 100%; display: flex; align-items: center; gap: 6px;
  padding: 11px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--text); cursor: pointer; font-size: 0.88rem;
}
.country-select-btn .flag { font-size: 1.1rem; }
.country-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); width: 240px; max-height: 260px; overflow-y: auto; padding: 6px;
}
.country-dropdown.open { display: block; }
.country-option {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px;
  cursor: pointer; font-size: 0.88rem;
}
.country-option:hover { background: var(--teal-soft); }
.phone-field input[type="tel"] { flex: 1; }

.auth-tabs { display: flex; gap: 6px; margin-bottom: 26px; background: var(--paper); padding: 4px; border-radius: 999px; border: 1px solid var(--line); }
.auth-tab {
  flex: 1; text-align: center; padding: 10px; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: 0.88rem; color: var(--text-mute);
}
.auth-tab.active { background: var(--deep); color: var(--deep-text); }
.auth-panel { display: none; }
.auth-panel.active { display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep); color: var(--deep-text-mute); padding: 56px 0 26px; margin-top: 40px; }
.site-footer h4 { color: var(--deep-text); font-size: 0.95rem; margin-bottom: 14px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.site-footer p { color: var(--deep-text-mute); }
.site-footer a { color: var(--deep-text-mute); font-size: 0.88rem; }
.site-footer a:hover { color: var(--accent-ink); }
.footer-bottom {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--deep-line);
  display: flex; justify-content: center; text-align: center; flex-wrap: wrap; gap: 10px;
  font-size: 0.8rem; color: var(--deep-text-mute);
}

/* ---------- Alerts / toasts ---------- */
.alert {
  padding: 13px 16px; border-radius: var(--radius-sm); font-size: 0.88rem; margin-bottom: 18px;
  border: 1px solid transparent;
}
.alert-success { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.alert-error { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-info { background: var(--teal-soft); color: var(--accent-ink); border-color: var(--line); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: 0.72rem;
  padding: 3px 9px; border-radius: 999px; font-weight: 600;
}
.badge-success { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.badge-warning { background: color-mix(in srgb, var(--warning) 20%, transparent); color: #8A5A0E; }
.badge-danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

/* ---------- Responsive ---------- */
/* Barre du haut : sur desktop elle tient toujours sur une seule ligne
   (logo | liens | compte | icônes) ; sur mobile elle ne garde que le
   logo, les icônes (thème/panier/notifications) et le bouton menu. */
.site-header .container { flex-wrap: nowrap; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ----- Bascule mobile : logo + icônes + bouton menu dans la barre du
   haut ; les liens et le compte glissent dans un panneau plein écran
   ouvert par le bouton. ----- */
@media (max-width: 880px) {
  .nav-toggle { display: flex; align-items: center; justify-content: center; flex: none; margin-left: 12px; }

  /* nav-main redevient une vraie boîte (annule le display:contents du
     desktop) pour agir comme panneau plein écran. */
  .nav-main {
    display: flex; position: fixed; top: 72px; left: auto; right: 0;
    width: 50%; min-width: 220px; height: calc(100vh - 72px);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-left: 1px solid var(--line);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 22px 20px 32px;
    transform: translateX(100%); transition: transform 0.25s ease, visibility 0.25s ease;
    overflow-y: auto; z-index: 90; visibility: hidden;
  }
  .nav-main.open { transform: translateX(0); visibility: visible; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 4px; margin-left: 0; }
  .nav-links a { padding: 12px 4px; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav-links a.active { background: var(--teal-soft); border-radius: var(--radius-sm); border-bottom: 1px solid transparent; }

  .nav-actions-auth {
    width: 100%; flex-direction: column; align-items: stretch; gap: 10px; margin-left: 0;
    margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line);
  }
  .nav-actions-auth a.btn, .nav-actions-auth .btn { width: 100%; justify-content: center; }
  .nav-actions-auth .nav-user-toggle { width: 100%; justify-content: center; }
  .nav-actions-auth > div { position: relative; width: 100%; }
  .nav-user-menu { position: static; box-shadow: none; border: none; padding: 10px 0 0; width: 100%; min-width: 0; margin-top: 8px; }
  .nav-user-menu.open { display: flex; }

  .nav-icons-row { margin-left: auto; gap: 10px; position: relative; }
  .notif-menu { min-width: 260px; max-width: calc(100vw - 88px); left: auto; right: 0; }

  .cta-band { flex-direction: column; text-align: center; }
  .form-row { flex-direction: column; }
}

/* Zone intermédiaire (entre desktop plein et le menu replié) : resserre
   les espacements pour que rien ne se chevauche avant que le menu bascule. */
@media (min-width: 881px) and (max-width: 1080px) {
  .nav-links { gap: 16px; margin-left: 20px; }
  .nav-links a { font-size: 0.86rem; }
  .nav-icons-row { gap: 8px; }
}

/* Grilles à largeur de colonne fixe (services vedettes, catalogue de
   tarifs, mission/vision) : au-delà d'un certain point elles doivent
   repasser à une seule colonne, sinon elles débordent sur mobile. */
@media (max-width: 560px) {
  .grid-services, #liste-services, #grid-top-services {
    grid-template-columns: 1fr !important;
  }
}

/* Typographie fluide et espacement resserré sur très petits écrans
   (téléphones), pour éviter le débordement de texte ou les marges
   trop larges qui donnent une impression de site "non adapté mobile". */
h1 { font-size: clamp(1.6rem, 5vw + 0.5rem, 2.6rem); line-height: 1.15; }
h2 { font-size: clamp(1.3rem, 3vw + 0.5rem, 1.9rem); }
@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .hero { padding-top: 32px; padding-bottom: 24px; }
  .lead { font-size: 0.95rem; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn, .btn-block { width: 100%; justify-content: center; }
  .card-service, .card-testi { padding: 18px; }
}

/* =======================================================================
   Avatars — utilisés partout où le nom d'un utilisateur apparaît
   ======================================================================= */
.avatar-img, .avatar-fallback, .dash-avatar {
  border-radius: 50%; object-fit: cover; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar-img { border: 1px solid var(--line); background: var(--paper); }
.avatar-fallback, .dash-avatar {
  background: var(--accent);
  color: var(--on-accent); font-family: var(--font-display); font-weight: 700;
}
.avatar-nom { display: inline-flex; align-items: center; gap: 10px; }

/* Menu utilisateur connecté (header) */
.nav-user-toggle {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper-raised);
  cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.86rem; color: var(--ink);
}
.nav-user-toggle:hover { border-color: var(--accent-ink); }
.nav-user-menu {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 95;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); min-width: 200px; padding: 8px; flex-direction: column; gap: 2px;
}
.nav-user-menu.open { display: flex; }
.nav-user-menu a, .nav-user-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px;
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  font-size: 0.88rem; color: var(--text);
}
.nav-user-menu a:hover, .nav-user-menu button:hover { background: var(--teal-soft); color: var(--accent-ink); text-decoration: none; }
.nav-user-menu .nav-user-info { padding: 6px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.nav-user-menu .nav-user-info strong { display: block; font-size: 0.9rem; color: var(--ink); }
.nav-user-menu .nav-user-info span { font-size: 0.76rem; color: var(--text-mute); }

/* Notifications en temps réel (cloche + menu déroulant + toasts) */
.notif-menu {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 95;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); min-width: 280px; max-width: 320px; max-height: 360px; overflow-y: auto;
  padding: 8px; flex-direction: column; gap: 2px;
}
.notif-menu.open { display: flex; }
.notif-menu .notif-item {
  padding: 10px 12px; border-radius: 8px; font-size: 0.85rem; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.notif-menu .notif-item:last-child { border-bottom: none; }
.notif-menu .notif-item time { display: block; font-size: 0.72rem; color: var(--text-mute); margin-top: 2px; }
.notif-menu .notif-vide { padding: 18px 12px; text-align: center; color: var(--text-mute); font-size: 0.85rem; }

/* Panier (icône header) — réutilise la coquille .notif-menu */
.panier-liste { max-height: 240px; overflow-y: auto; }
.panier-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 0.85rem;
}
.panier-ligne:last-child { border-bottom: none; }
.panier-ligne-info { display: flex; flex-direction: column; gap: 2px; }
.panier-ligne-info span { font-size: 0.76rem; color: var(--text-mute); }
.panier-retirer {
  background: none; border: none; cursor: pointer; color: var(--text-mute);
  font-size: 1.1rem; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.panier-retirer:hover { background: var(--teal-soft); color: var(--danger); }
.panier-total {
  display: flex; justify-content: space-between; font-weight: 700; font-size: 0.9rem;
  padding: 10px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px;
}
.notif-menu #btn-panier-payer { margin: 10px 4px 4px; width: calc(100% - 8px); }


.toast-conteneur {
  position: fixed; top: 88px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 10px;
}
.toast {
  background: var(--paper-raised); border: 1px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: 10px; box-shadow: var(--shadow-pop); padding: 12px 16px; min-width: 240px; max-width: 320px;
  font-size: 0.85rem; color: var(--text); animation: toast-in 0.25s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* =======================================================================
   Espaces client / admin (tableaux de bord) — vocabulaire FR utilisé
   dans les vues espace-client / espace-admin.
   ======================================================================= */
.conteneur { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ===== Pages catégories (/categories/...) ===== */
.steps-list { display: flex; flex-direction: column; gap: 0; max-width: 760px; margin: 0 auto; }
.step-item { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.step-item:last-child { border-bottom: none; }
.step-num {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--deep);
  color: var(--deep-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
}
.step-item h3 { margin-bottom: 6px; }
.step-item p { color: var(--text-mute); margin: 0; font-size: 0.94rem; }

.cat-hero-icon {
  width: 64px; height: 64px; border-radius: var(--radius-lg);
  background: var(--teal-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 0.95rem; }
.check-list svg { flex-shrink: 0; color: var(--accent-ink); margin-top: 3px; }

.cat-nav-pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.cat-nav-pill {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 0.82rem; font-weight: 500; color: var(--text-mute); background: var(--paper-raised);
}
.cat-nav-pill:hover { border-color: var(--accent-ink); color: var(--accent-ink); text-decoration: none; }
.cat-nav-pill.active { background: var(--deep); border-color: var(--deep); color: var(--deep-text); }

.cat-illustration-wrap {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
  max-width: 780px;
  margin: 0 auto;
}
.cat-illustration-wrap svg { width: 100%; height: auto; display: block; }
.section-entete { margin-bottom: 28px; }
.eyebrow {
  display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px;
}
.section-entete h2 { margin: 0; }

.tabs-dashboard {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; border-bottom: 1px solid var(--line);
}
.tabs-dashboard a {
  padding: 12px 16px; font-weight: 600; font-size: 0.9rem; color: var(--text-mute);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs-dashboard a:hover { color: var(--accent-ink); text-decoration: none; }
.tabs-dashboard a.actif { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }

.carte-formulaire {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-card);
}
.champ { margin-bottom: 18px; }
.champ label {
  display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 7px;
}
.champ input, .champ textarea, .champ select {
  width: 100%; padding: 11px 14px; font-size: 0.95rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--text); font-family: var(--font-body);
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none; border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent);
}
.champ input:disabled { opacity: 0.6; cursor: not-allowed; }
.champ-erreur { display: block; font-size: 0.78rem; color: var(--danger); margin-top: 5px; }
.champ.invalide input, .champ.invalide textarea { border-color: var(--danger); }
.champ-ligne { display: flex; gap: 14px; }
.champ-ligne .champ { flex: 1; }

.btn-primaire { background: var(--deep); color: var(--deep-text); }
.btn-primaire:hover { background: var(--accent); color: var(--on-accent); }
.btn-bloc { width: 100%; }

.alerte {
  padding: 13px 16px; border-radius: var(--radius-sm); font-size: 0.88rem; margin-bottom: 18px;
  border: 1px solid transparent; display: none;
}
.alerte.visible { display: block; }
.alerte-succes { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.alerte-erreur { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alerte-info { background: var(--teal-soft); color: var(--accent-ink); border-color: var(--line); }

.tableau-wrap, .table-wrap {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow-x: auto; box-shadow: var(--shadow-card);
}
.tableau-wrap table, .table-wrap table, .data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tableau-wrap th, .table-wrap th, .data-table th {
  text-align: left; padding: 14px 18px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-mute); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tableau-wrap td, .table-wrap td, .data-table td {
  padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.tableau-wrap tr:last-child td, .table-wrap tr:last-child td { border-bottom: none; }
.chargement, .vide { text-align: center !important; color: var(--text-mute); padding: 28px 18px !important; }
.mono { font-family: var(--font-mono); font-size: 0.85rem; }

.badge-statut {
  display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; text-transform: capitalize;
  background: var(--teal-soft); color: var(--accent-ink);
}
.badge-statut.actif, .badge-statut.confirmee, .badge-statut.reussi, .badge-statut.terminee {
  background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success);
}
.badge-statut.inactif, .badge-statut.annulee, .badge-statut.echoue, .badge-statut.suspendu, .badge-statut.supprime {
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger);
}
.badge-statut.en_attente { background: color-mix(in srgb, var(--warning) 20%, transparent); color: #8A5A0E; }

.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-carte {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-card);
}
.stat-valeur { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--ink); }
.stat-label { font-size: 0.82rem; color: var(--text-mute); margin-top: 4px; }

.panel {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-card);
}
.empty-state { text-align: center; color: var(--text-mute); padding: 40px 20px; }

.btn-editer, .btn-desactiver, .btn-supprimer, .btn-suspendre {
  padding: 7px 12px; font-size: 0.78rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); cursor: pointer;
  font-family: var(--font-body); font-weight: 600;
}
.btn-editer:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn-desactiver:hover, .btn-supprimer:hover { border-color: var(--danger); color: var(--danger); }
.btn-suspendre:hover { border-color: var(--warning); color: #8A5A0E; }

.carte-service {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-card);
}

/* =======================================================================
   Avis clients (témoignages dynamiques + formulaire de dépôt d'avis)
   ======================================================================= */
.card-testi { position: relative; }
.card-testi .testi-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-testi .testi-header .testi-identite strong { display: block; font-size: 0.92rem; color: var(--ink); }
.card-testi .testi-header .testi-identite span { font-size: 0.76rem; color: var(--text-mute); }
.card-testi .testi-service {
  display: inline-block; margin-top: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--accent-ink); background: var(--teal-soft); padding: 3px 9px; border-radius: 999px;
}

.avis-form {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 18px; margin-top: 10px; display: none;
}
.avis-form.open { display: block; }
.avis-note-select { display: flex; gap: 6px; margin-bottom: 14px; }
.avis-note-select button {
  border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-sm);
  width: 38px; height: 38px; cursor: pointer; font-size: 1.1rem; color: var(--line);
}
.avis-note-select button.actif, .avis-note-select button:hover { color: var(--star); border-color: var(--star); }
.avis-form textarea { min-height: 90px; resize: vertical; }

/* Upload de photo de profil */
.upload-photo { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.upload-photo-apercu {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line);
  background: var(--paper);
}
.upload-photo-actions input[type="file"] { display: none; }
.upload-photo-actions label {
  display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--ink);
}
.upload-photo-actions label:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.upload-photo-hint { font-size: 0.76rem; color: var(--text-mute); margin-top: 6px; }

/* Champ photo facultatif du formulaire d'inscription */
.champ-photo-inscription { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.champ-photo-inscription .apercu-photo {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 1px dashed var(--line);
  background: var(--paper); display: flex; align-items: center; justify-content: center; flex: none;
  color: var(--text-mute); font-size: 0.7rem; text-align: center;
}

/* ---------- Fiche service : image + détails ---------- */
.service-detail-grid {
  display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 40px; align-items: flex-start;
}
@media (max-width: 760px) {
  .service-detail-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Tableau de bord admin : graphiques côte à côte ---------- */
.dash-charts-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin: 28px 0;
}
@media (max-width: 760px) {
  .dash-charts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .champ-ligne { flex-direction: column; gap: 0; }
  .grille-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Bannière image (moitié image / moitié infos) — pages catégories, accueil ---------- */
.split-panel {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
  border: 1px solid var(--line); background: var(--paper-raised);
}
.split-panel img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.split-panel-content { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.split-panel-content h2 { margin-bottom: 12px; }
.split-panel-content p { color: var(--text-mute); margin-bottom: 16px; }
.split-panel-content ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.split-panel-content li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-mute); font-size: 0.94rem; }
.split-panel-content li svg { flex: none; width: 18px; height: 18px; color: var(--accent-ink); margin-top: 2px; }
@media (max-width: 760px) {
  .split-panel { grid-template-columns: 1fr; }
  .split-panel img { min-height: 200px; }
  .split-panel-content { padding: 26px; }
}

/* ---------- Cartes service — image en haut, infos en dessous (tarifs, services les mieux notés) ---------- */
.card-service-split {
  display: flex; flex-direction: column;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-service-split:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.card-service-split .css-image { width: 100%; height: 190px; object-fit: cover; display: block; background: var(--teal-soft); }
.css-body { padding: 18px 20px; display: flex; flex-direction: column; flex: 1; }
.css-body h3 { margin-bottom: 6px; font-size: 1.02rem; }
.css-body p { color: var(--text-mute); font-size: 0.85rem; margin-bottom: 8px; flex: 1; }
.css-body .price-tag { margin-top: 6px; }
@media (max-width: 520px) {
  .card-service-split .css-image { height: 160px; }
}

/* ---------- Bouton "ajouter au panier" — état déjà ajouté (persistant) ---------- */
[data-ajouter-panier].deja-ajoute,
#btn-ajouter-panier.deja-ajoute {
  background: var(--success); border-color: var(--success); color: #fff;
}

/* ---------- Témoignages : une seule rangée qui défile automatiquement ---------- */
.testi-carousel { overflow: hidden; }
.testi-track {
  display: flex; gap: 20px; transition: transform 0.6s ease;
  will-change: transform;
}
.testi-track .card-testi { flex: 0 0 320px; }
@media (max-width: 640px) {
  .testi-track .card-testi { flex-basis: 260px; }
}


/* =======================================================================
   LEVELARA DEV CLUB — refonte graphique et interactive
   Motif de la marque : les biseaux (coins coupés en diagonale) et les
   petits carrés "pixel" du logo. On les retrouve sur les photos, le
   bandeau de chiffres et les puces des listes.
   ======================================================================= */

.ico { flex: none; }

/* ---------- Logo (en-tête) ---------- */
.brand { gap: 10px; font-size: 1rem; }
.brand-logo { height: 38px; width: auto; display: block; }
.logo-on-dark { display: none; }
[data-theme="dark"] .logo-on-light { display: none; }
[data-theme="dark"] .logo-on-dark { display: block; }
.brand-text {
  display: flex; flex-direction: column; line-height: 1.05;
  font-family: var(--font-display); font-size: 0.98rem; font-weight: 500;
  color: var(--ink); letter-spacing: -0.01em;
}
.brand-text b { font-weight: 700; color: var(--accent-ink); }
.brand:hover { text-decoration: none; }

/* ---------- Menu déroulant "Expertises" (en-tête) ---------- */
.nav-dd { position: relative; }
.nav-dd::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; } /* pont pour garder le survol */
.nav-dd-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 500; font-size: 0.94rem; color: var(--text);
  display: inline-flex; align-items: center; gap: 4px;
}
.nav-dd-btn .ico { transition: transform 0.2s ease; }
.nav-dd:hover .nav-dd-btn, .nav-dd.open .nav-dd-btn, .nav-dd-btn.active { color: var(--accent-ink); }
.nav-dd:hover .nav-dd-btn .ico, .nav-dd.open .nav-dd-btn .ico { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: calc(100% + 16px); left: -16px; min-width: 270px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 18px;
  padding: 8px; box-shadow: var(--shadow-pop); z-index: 120;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; transform: none;
}
.nav-links .nav-dd-menu a {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px;
  color: var(--text); font-weight: 500; font-size: 0.92rem; border-bottom: 0;
}
.nav-links .nav-dd-menu a:hover, .nav-links .nav-dd-menu a.active { background: var(--teal-soft); color: var(--ink); text-decoration: none; }
.nav-links .nav-dd-menu a.active::after { display: none; }
.nav-dd-ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--teal-soft); color: var(--accent-ink);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), background 0.2s, color 0.2s;
}
.nav-dd-menu a:hover .nav-dd-ico { background: var(--accent); color: var(--on-accent); transform: rotate(-8deg) scale(1.1); }

@media (max-width: 880px) {
  .nav-dd::after { display: none; }
  .nav-dd-btn { width: 100%; justify-content: space-between; padding: 12px 4px; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav-dd-menu {
    position: static; min-width: 0; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 6px 6px;
    background: transparent; opacity: 1; visibility: visible; transform: none; display: none;
  }
  .nav-dd.open .nav-dd-menu { display: block; }
  .nav-dd:hover .nav-dd-menu { opacity: 1; }
  .nav-links .nav-dd-menu a { padding: 10px 4px; }
}

/* ---------- Boutons : icônes qui glissent ---------- */
.btn .ico { width: 18px; height: 18px; transition: transform 0.2s ease; }
.btn:hover .ico { transform: translateX(3px); }
.btn-ghost { color: var(--ink); }

/* ---------- Hero : diagonales de la marque ---------- */
.hero { position: relative; overflow: hidden; }
.hero::after {
  content: ''; position: absolute; top: 0; right: -40px; bottom: 0; width: 38%;
  background: repeating-linear-gradient(115deg, transparent 0 34px, color-mix(in srgb, var(--accent) 11%, transparent) 34px 68px);
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 85%);
          mask-image: linear-gradient(to left, #000 0%, transparent 85%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

/* ---------- Terminal animé (accueil) ---------- */
.terminal-card { position: relative; background: var(--deep); }
.terminal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.terminal-top .terminal-dots { margin-bottom: 0; }
.tw-replay {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--deep-line); color: var(--deep-text-mute);
  transition: transform 0.35s ease, background 0.2s, color 0.2s, border-color 0.2s;
}
.tw-replay:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: rotate(-120deg); }
.tw-screen { font-size: clamp(0.84rem, 1.6vw, 1.02rem); line-height: 2; min-height: calc(6 * 2em); }
.tw-cmd { color: #EAF6FA; white-space: pre-wrap; }
.tw-line {
  display: block; color: #CFE3EA; padding: 0 10px; margin: 0 -10px; border-radius: 9px;
  text-decoration: none !important; white-space: pre-wrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.tw-status { color: var(--accent); font-weight: 600; }
.tw-status.is-live::before {
  content: ''; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.35em;
  border-radius: 50%; background: #58C77B; vertical-align: 0.05em;
  animation: tw-pulse 1.6s ease-in-out infinite;
}
.tw-spin { color: var(--deep-text-mute); }
.tw-caret {
  display: inline-block; width: 0.55em; height: 1.05em; margin-left: 2px; background: var(--accent);
  vertical-align: text-bottom; animation: blink 1s steps(1) infinite;
}
.tw-screen.is-typing .tw-line { pointer-events: none; }
.tw-screen.is-ready .tw-line:hover, .tw-screen.is-ready .tw-line:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); color: #fff; }
.tw-screen.is-ready .tw-line:hover .tw-text::after { content: '  →'; color: var(--accent); }
.tw-flash { animation: tw-flash 0.6s ease-out; }
@keyframes tw-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(88,199,123,0.55); } 50% { box-shadow: 0 0 0 6px rgba(88,199,123,0); } }
@keyframes tw-flash { from { text-shadow: 0 0 14px var(--accent); } to { text-shadow: 0 0 0 transparent; } }

/* ---------- Icônes interactives (tuiles) ----------
   Au survol : la tuile se remplit en cyan, s'incline et grossit légèrement
   (comme sur levelaragroup.com). Utilisé partout : .ico-tile / .icon-box. */
.ico-tile, .card-service .icon-box {
  width: 56px; height: 56px; flex: none; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-soft); color: var(--accent-ink);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
}
.card-service .icon-box { width: 46px; height: 46px; border-radius: 13px; }
.tile:hover .ico-tile, .xcard:hover .ico-tile, .ico-tile:hover, .card-service:hover .icon-box,
.contact-info a:focus-visible .ico-tile {
  background: var(--accent); color: var(--on-accent);
  transform: rotate(-8deg) scale(1.1);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---------- Tuiles (liste d'éléments avec icône) ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.tile-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile {
  display: flex; align-items: flex-start; gap: 18px; padding: 24px; border-radius: 20px;
  border: 1px solid transparent; color: inherit;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tile:hover { background: var(--paper-raised); border-color: var(--line); box-shadow: var(--shadow-card); transform: translateY(-3px); text-decoration: none; }
.tile h3 { font-size: 1.05rem; margin-bottom: 6px; }
.tile p { margin: 0; color: var(--text-mute); font-size: 0.92rem; }
.tile-big, .tile-stack, .contact-info .tile { background: var(--paper-raised); border-color: var(--line); box-shadow: var(--shadow-card); }
.tile-big { padding: 30px; gap: 22px; }
.tile-big h3 { font-size: 1.25rem; }
.tile-stack { flex-direction: column; gap: 16px; }
.tile-link { cursor: pointer; }

/* ---------- Cartes d'expertise (accueil) : photo + icône ---------- */
.xgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.xcard {
  grid-column: span 2; display: flex; flex-direction: column; color: inherit;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.xcard:nth-child(n+4) { grid-column: span 3; }
.xcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-pop); border-color: var(--accent); text-decoration: none; }
.xcard-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--deep); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 70px) 100%, 0 100%); }
.xcard:nth-child(n+4) .xcard-media { aspect-ratio: 21 / 9; }
.xcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.xcard:hover .xcard-media img { transform: scale(1.06); }
.xcard-body { padding: 0 26px 26px; display: flex; flex-direction: column; flex: 1; }
.xcard-ico { margin-top: -34px; margin-bottom: 14px; border: 4px solid var(--paper-raised); position: relative; z-index: 2; }
.xcard-body h3 { margin-bottom: 8px; }
.xcard-body p { color: var(--text-mute); font-size: 0.92rem; flex: 1; }
.xcard-more { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-weight: 600; font-size: 0.9rem; }
.xcard-more .ico { width: 16px; height: 16px; transition: transform 0.2s ease; }
.xcard:hover .xcard-more .ico { transform: translateX(5px); }

/* ---------- Bandeau de chiffres clés ---------- */
.stats-band { padding: 26px 0 8px; }
.stats-panel {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--deep); color: var(--deep-text);
  clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
}
[data-theme="dark"] .stats-panel { background: var(--deep-raised); }
.stat-item {
  position: relative; background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 10px 26px;
}
.stat-item + .stat-item::before { content: ''; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--deep-line); }
.stat-ico {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 6px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), background 0.2s, color 0.2s;
}
.stat-item:hover .stat-ico, .stat-item:focus-visible .stat-ico { background: var(--accent); color: var(--on-accent); transform: rotate(-8deg) scale(1.1); }
.stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.1; color: var(--deep-text); font-variant-numeric: tabular-nums; }
.stat-item .stat-label { font-size: 0.86rem; color: var(--deep-text-mute); text-align: center; }

/* ---------- Menus déroulants (accordéon) ---------- */
.acc-wrap { max-width: 920px; margin: 0 auto; }
.acc { display: flex; flex-direction: column; gap: 14px; }
.acc-item {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.acc-item:hover, .acc-item:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.acc-h { margin: 0; font-size: inherit; letter-spacing: 0; }
.acc-btn {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  background: none; border: 0; padding: 22px 26px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--ink);
}
.acc-title { flex: 1; }
.acc-num {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: var(--deep); color: var(--accent); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: background 0.2s, color 0.2s;
}
.is-open > .acc-h .acc-num { background: var(--accent); color: var(--on-accent); }
.acc-plus { position: relative; width: 22px; height: 22px; flex: none; color: var(--accent-ink); }
.acc-plus::before, .acc-plus::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 2px;
  background: currentColor; transform: translate(-50%, -50%); transition: transform 0.3s ease;
}
.acc-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.is-open > .acc-h .acc-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc-panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
}
.is-open > .acc-panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.acc-inner { min-height: 0; overflow: hidden; }
.acc-content { padding: 0 26px 26px; }
.acc-numbered .acc-content { padding-left: 76px; }
.acc-content p { color: var(--text-mute); margin: 0; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.acc-chip {
  background: var(--deep); color: var(--deep-text); padding: 8px 18px; border-radius: 10px;
  font-size: 0.88rem; font-weight: 500; box-shadow: inset 0 -3px 0 var(--accent);
}
.acc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 30px; }
.acc-list li { position: relative; padding-left: 22px; color: var(--text); font-size: 0.95rem; }
.acc-list li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 7px; height: 7px; background: var(--accent); transform: skewX(-20deg); }

/* ---------- Photos en biseau (panneaux image + texte) ---------- */
.split-media { position: relative; min-height: 320px; background: var(--deep); clip-path: polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%); }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.split-panel-reverse .split-media { order: 2; clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 760px) {
  .split-media, .split-panel-reverse .split-media { order: 0; min-height: 220px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%); }
}

/* ---------- Pastilles de navigation des expertises ---------- */
.cat-nav-pill { display: inline-flex; align-items: center; gap: 8px; }
.cat-nav-pill .ico { width: 16px; height: 16px; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); }
.cat-nav-pill:hover .ico { transform: rotate(-12deg) scale(1.2); }

/* ---------- Pied de page ---------- */
.footer-brand img { height: 94px; width: auto; display: block; margin-bottom: 14px; }
.footer-about { color: var(--deep-text-mute); font-size: 0.88rem; max-width: 34ch; }
.site-footer a:hover { color: var(--accent); text-decoration: none; }
.footer-line { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.footer-ico {
  width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), background 0.2s, color 0.2s;
}
.footer-line:hover .footer-ico { background: var(--accent); color: var(--on-accent); transform: rotate(-8deg) scale(1.12); }

/* ---------- Page Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 34px; align-items: start; }
.contact-grid .form-card { max-width: none; margin: 0; }
.contact-info { display: flex; flex-direction: column; gap: 14px; }
.contact-info .tile { align-items: center; padding: 20px 22px; }
.contact-info .tile p { color: var(--text); font-weight: 500; }

/* ---------- Adaptation aux écrans ---------- */
@media (max-width: 1000px) {
  .xgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xcard, .xcard:nth-child(n+4) { grid-column: span 1; }
  .xcard:nth-child(5) { grid-column: span 2; }
  .xcard:nth-child(n+4) .xcard-media { aspect-ratio: 16 / 9; }
  .tile-grid, .tile-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-item:nth-child(4)::before { display: none; }
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .xgrid { grid-template-columns: 1fr; }
  .xcard:nth-child(5) { grid-column: span 1; }
  .tile-grid, .tile-grid-2, .tile-grid-4 { grid-template-columns: 1fr; }
  .stats-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item:nth-child(odd)::before { display: none; }
  .stat-item:nth-child(4)::before { display: block; }
  .stat-item:last-child { grid-column: span 2; }
  .stat-item:last-child::before { display: none; }
  .acc-btn { padding: 18px 18px; font-size: 1rem; }
  .acc-content, .acc-numbered .acc-content { padding: 0 18px 20px; }
  .acc-list { grid-template-columns: 1fr; }
  .brand-text { font-size: 0.86rem; }
  .brand-logo { height: 34px; }
}

/* ---------- Mouvement réduit : pas d'inclinaison ni de défilement animé ---------- */
@media (prefers-reduced-motion: reduce) {
  .ico-tile, .stat-ico, .nav-dd-ico, .footer-ico, .tw-replay, .xcard-media img, .acc-panel, .btn .ico {
    transition: none !important;
  }
  .tile:hover .ico-tile, .xcard:hover .ico-tile, .stat-item:hover .stat-ico, .nav-dd-menu a:hover .nav-dd-ico, .footer-line:hover .footer-ico {
    transform: none;
  }
  .tw-caret, .tw-status.is-live::before { animation: none; }
}

/* Garde les marges latérales des sections (.section écrasait le padding du .container) */
.section.container { padding-left: 24px; padding-right: 24px; }
@media (max-width: 480px) { .section.container { padding-left: 16px; padding-right: 16px; } }
.tw-status.is-live { margin-left: 0.3em; }

/* =======================================================================
   SHOWCASE — "En quoi consiste ce service" (onglets + image / infos)
   ======================================================================= */
.sc-intro { max-width: 760px; margin: 0 auto 22px; text-align: center; }
.sc-kicker { display: inline-block; margin-bottom: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.sc-lead { color: var(--text-mute); margin: 0 auto; }
/* Chaque section : grand titre centré + petite phrase, identiques partout */
.sc-panel-head { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.sc-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 10px; }
.sc-phrase { color: var(--text-mute); margin: 0 auto; }
.sc-pills {
  /* Barre de raccourcis : reste visible sous l'en-tête pendant qu'on défile les blocs */
  position: sticky; top: 82px; z-index: 50;
  display: flex; flex-wrap: nowrap; gap: 4px; justify-content: flex-start;
  width: fit-content; max-width: 100%; margin: 0 auto 48px; padding: 6px;
  overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-card);
}
.sc-pills::-webkit-scrollbar { display: none; }
.sc-pill {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  flex: none; white-space: nowrap; text-decoration: none; gap: 7px;
  padding: 4px 11px 4px 4px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 0.8rem;
  background: transparent; color: var(--text); border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.sc-pill-ico {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--accent-ink); transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), background 0.2s, color 0.2s;
}
.sc-pill:hover { border-color: var(--accent); transform: translateY(-2px); }
.sc-pill:hover .sc-pill-ico { transform: rotate(-12deg) scale(1.12); }
.sc-pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent); }
.sc-pill.is-active .sc-pill-ico { background: var(--on-accent); color: var(--accent); }

.sc-stage { display: grid; gap: clamp(64px, 9vw, 110px); }
.sc-panel { scroll-margin-top: 150px; /* le bloc ne se cache pas sous l'en-tête + la barre de raccourcis */ }
/* Même forme pour TOUTES les sections : image à gauche, texte à droite */
.sc-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.sc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink);
}
.sc-visual {
  position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3.2; background: var(--deep);
  box-shadow: var(--shadow-pop);
}
.sc-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s ease; }
.sc-panel.is-active .sc-visual img { transform: scale(1.06); }
.sc-visual::before { /* voile aux couleurs de la marque */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 28%, transparent) 0%, rgba(7,26,41,0.15) 45%, rgba(7,26,41,0.78) 100%);
}
.sc-visual::after { /* bande en biseau, motif du logo */
  content: ''; position: absolute; z-index: 1; left: -8%; top: -10%; width: 34%; height: 130%;
  background: color-mix(in srgb, var(--accent) 18%, transparent); transform: skewX(-20deg);
}
.sc-badge {
  position: absolute; z-index: 2; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: rgba(245,245,240,0.92); color: #071A29; backdrop-filter: blur(6px);
}
.sc-badge .ico { color: #0A7099; }
.sc-float {
  position: absolute; z-index: 2; left: 18px; bottom: 18px; right: 18px; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 20px; background: rgba(7,26,41,0.55); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.14); color: #F5F5F0;
}
.sc-float-ico { width: 52px; height: 52px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chips i { font-style: normal; font-size: 0.8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(245,245,240,0.14); border: 1px solid rgba(245,245,240,0.22); }

.sc-info h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--accent-ink); margin-bottom: 14px; }
.sc-info > p { color: var(--text-mute); margin-bottom: 20px; }
.sc-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.sc-points li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ink); }
.sc-points .ico {
  width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--teal-soft); color: var(--accent-ink);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), background 0.2s, color 0.2s;
}
.sc-points li:hover .ico { background: var(--accent); color: var(--on-accent); transform: scale(1.2) rotate(-8deg); }

@media (max-width: 860px) {
  .sc-row { grid-template-columns: 1fr; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-visual img { transition: none !important; }
}

/* =======================================================================
   COUVERTURE D'ACCUEIL — photo floutée aux couleurs de la marque
   ======================================================================= */
.hero-cover { background: var(--deep); isolation: isolate; padding-bottom: 110px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); }
.hero-cover::after { display: none; }
.cover-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cover-photo { position: absolute; inset: -50px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.15); transform: scale(1.06); }
.cover-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(7,26,41,0.95) 0%, rgba(7,26,41,0.84) 40%, rgba(10,112,153,0.55) 72%, rgba(54,210,255,0.7) 100%);
}
.orb { position: absolute; z-index: 1; border-radius: 50%; filter: blur(64px); animation: orb-drift 14s ease-in-out infinite alternate; }
.orb-1 { width: 460px; height: 460px; right: -100px; top: -140px; background: #36D2FF; opacity: 0.55; }
.orb-2 { width: 320px; height: 320px; left: 34%; bottom: -170px; background: #36D2FF; opacity: 0.28; animation-delay: -5s; }
.orb-3 { width: 260px; height: 260px; left: -90px; top: 20%; background: #0A7099; opacity: 0.5; animation-delay: -9s; }
@keyframes orb-drift { from { translate: 0 0; scale: 1; } to { translate: 46px 34px; scale: 1.14; } }
.hero-cover h1 { color: #F5F5F0; }
.hero-cover h1 span { color: var(--accent) !important; }
.hero-cover .lead { color: rgba(245,245,240,0.84); }
.hero-cover .btn-primary { background: var(--accent); color: var(--on-accent); }
.hero-cover .btn-primary:hover { background: #7BE3FF; }
.hero-cover .btn-ghost { color: #F5F5F0; border-color: rgba(245,245,240,0.42); background: rgba(245,245,240,0.08); backdrop-filter: blur(6px); }
.hero-cover .btn-ghost:hover { background: rgba(245,245,240,0.18); }
.hero-cover .terminal-card { background: rgba(7,26,41,0.74); backdrop-filter: blur(12px); border: 1px solid rgba(245,245,240,0.14); }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

/* Astérisque des champs obligatoires */
.form-group label .obligatoire,
.champ label .obligatoire {
  color: var(--danger);
  margin-left: 4px;
  font-weight: 700;
}

/* =======================================================================
   APPARITION AU DÉFILEMENT — chaque partie entre en scène, et se rejoue
   à chaque fois qu'elle revient à l'écran (voir initReveal dans ui.js).
   On utilise `translate` / `scale` (propriétés indépendantes) pour ne pas
   écraser les effets de survol qui utilisent `transform`.
   ======================================================================= */
html.js-reveal [data-rv] {
  opacity: 0; filter: blur(6px);
  transition:
    opacity 0.85s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms),
    translate 0.85s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms),
    scale 0.85s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms),
    filter 0.85s ease var(--rv-d, 0ms),
    transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.2s ease;
}
html.js-reveal [data-rv="up"]    { translate: 0 56px; }
html.js-reveal [data-rv="left"]  { translate: -80px 0; }
html.js-reveal [data-rv="right"] { translate: 80px 0; }
html.js-reveal [data-rv="zoom"]  { scale: 0.88; }
html.js-reveal [data-rv].rv-in   { opacity: 1; filter: none; translate: 0 0; scale: 1; }
@media (max-width: 760px) {
  html.js-reveal [data-rv="left"], html.js-reveal [data-rv="right"] { translate: 0 44px; }
}

/* =======================================================================
   ACCUEIL — MODE CLAIR : couverture plus claire et plus transparente
   La photo de fond reste visible et lumineuse (au lieu d'être noyée sous un
   voile sombre), le texte passe en foncé et le terminal "LevelARA Dev Club
   --diagnostic" devient une carte claire translucide.
   Pour ajuster : --cover-voile (0 = photo nette, 1 = photo effacée).
   Le mode sombre n'est pas modifié.
   ======================================================================= */
:root:not([data-theme="dark"]) .hero-cover { --cover-voile: 0.74; background: var(--paper); }
:root:not([data-theme="dark"]) .cover-photo { filter: blur(10px) saturate(1.05); opacity: 0.9; }
:root:not([data-theme="dark"]) .cover-bg::before {
  background: linear-gradient(105deg,
    rgba(245,245,240,var(--cover-voile)) 0%,
    rgba(245,248,250,calc(var(--cover-voile) - 0.1)) 45%,
    rgba(221,245,252,calc(var(--cover-voile) - 0.3)) 78%,
    rgba(54,210,255,0.28) 100%);
}
:root:not([data-theme="dark"]) .orb-1 { opacity: 0.28; }
:root:not([data-theme="dark"]) .orb-2 { opacity: 0.16; }
:root:not([data-theme="dark"]) .orb-3 { opacity: 0.2; }
:root:not([data-theme="dark"]) .hero-cover h1 { color: var(--ink); }
:root:not([data-theme="dark"]) .hero-cover h1 span { color: var(--accent-ink) !important; }
:root:not([data-theme="dark"]) .hero-cover .lead { color: var(--ink-soft); }
:root:not([data-theme="dark"]) .hero-cover .btn-primary { background: var(--ink); color: var(--paper); }
:root:not([data-theme="dark"]) .hero-cover .btn-primary:hover { background: var(--accent-ink); }
:root:not([data-theme="dark"]) .hero-cover .btn-ghost { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); background: rgba(255,255,255,0.45); }
:root:not([data-theme="dark"]) .hero-cover .btn-ghost:hover { background: rgba(255,255,255,0.8); }

/* terminal "diagnostic" en clair */
:root:not([data-theme="dark"]) .hero-cover .terminal-card {
  background: rgba(255,255,255,0.62); backdrop-filter: blur(14px);
  border: 1px solid rgba(7,26,41,0.1); box-shadow: 0 18px 44px rgba(7,26,41,0.12);
}
:root:not([data-theme="dark"]) .hero-cover .tw-cmd { color: var(--ink); }
:root:not([data-theme="dark"]) .hero-cover .tw-line { color: var(--ink-soft); }
:root:not([data-theme="dark"]) .hero-cover .tw-status { color: var(--accent-ink); }
:root:not([data-theme="dark"]) .hero-cover .tw-spin { color: var(--text-mute); }
:root:not([data-theme="dark"]) .hero-cover .tw-caret { background: var(--accent-ink); }
:root:not([data-theme="dark"]) .hero-cover .tw-replay { border-color: rgba(7,26,41,0.18); color: var(--ink-soft); }
:root:not([data-theme="dark"]) .hero-cover .tw-screen.is-ready .tw-line:hover,
:root:not([data-theme="dark"]) .hero-cover .tw-screen.is-ready .tw-line:focus-visible { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
:root:not([data-theme="dark"]) .hero-cover .tw-screen.is-ready .tw-line:hover .tw-text::after { color: var(--accent-ink); }