/* ================================================================
   LYSVENIA — style.css
   Palette sombre, accent orange, Space Grotesk + Grenze Gotisch
   ================================================================ */


/* ── 1. VARIABLES GLOBALES ──────────────────────────────── */
:root {
  /* Palette couleurs (format oklch — large gamut moderne) */
  --lys-orange:        oklch(0.67 0.20 42);    /* accent principal, CTA, labels */
  --lys-orange-light:  oklch(0.82 0.16 42);    /* hover, liens actifs */
  --lys-orange-deep:   oklch(0.50 0.17 42);    /* ombre boutons, états pressés */
  --lys-orange-glow:   oklch(0.67 0.20 42 / 0.35); /* glow effects */

  --lys-black:         oklch(0.105 0.010 42);  /* fond de page principal */
  --lys-900:           oklch(0.11 0.008 42);   /* surfaces, cards */
  --lys-800:           oklch(0.15 0.007 40);   /* bordures, séparateurs */
  --lys-700:           oklch(0.22 0.006 40);   /* bordures secondaires */
  --lys-500:           oklch(0.42 0.004 40);   /* texte désactivé, meta */
  --lys-300:           oklch(0.68 0.003 40);   /* corps de texte */
  --lys-100:           oklch(0.93 0.005 42);   /* texte clair */
  --lys-white:         oklch(0.97 0.005 42);   /* blanc chaud pour titres */

  /* Typographie */
  --font-sans:  'Space Grotesk', system-ui, sans-serif;
  /* Grenze Gotisch utilisé UNIQUEMENT dans .hero-title */
  --font-hero:  'Grenze Gotisch', Georgia, serif;

  /* Espacements de section */
  --pad-section: clamp(80px, 10vw, 140px);
  --pad-section-sm: clamp(48px, 6vw, 80px);

  /* Largeur max du contenu */
  --container-w: 1100px;

  /* Radius des cards et boutons */
  --radius-card: 2px;
  --radius-btn:  2px;

  /* Hauteur de la nav */
  --nav-h: 64px;
}


/* ── Reading progress bar ── */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--lys-orange);
  z-index: 9999;
  transition: width 0.05s linear;
  pointer-events: none;
}

/* ── 2. RESET & BASE ────────────────────────────────────── */
/* Normalisation des comportements par défaut des navigateurs */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Scroll fluide pour les ancres de navigation */
  scroll-behavior: smooth;
  /* Évite le saut de scrollbar lors de l'ouverture de la modale */
  scrollbar-gutter: stable;
}

body {
  background-color: var(--lys-black);
  color: var(--lys-300);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Liens : sans décoration par défaut */
a {
  color: inherit;
  text-decoration: none;
}

/* Listes : sans puces ni indentation */
ul, ol {
  list-style: none;
}

/* Images : block-level par défaut pour éviter l'espace sous l'image */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Boutons : réinitialisation des styles navigateur */
button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}


/* ── 3. UTILITAIRES ─────────────────────────────────────── */

/* Conteneur centré avec largeur max */
.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 60px);
}

/* Variante permettant aux enfants positionnés en absolu d'utiliser ce conteneur */
.container--rel {
  position: relative;
}

/* Label de section : petites capitales orange, espacement large */
.section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lys-orange);
  margin-bottom: 12px;
  display: block;
}

/* Variante claire pour sections avec fond image */
.section-label--light {
  color: var(--lys-orange-light);
}

/* Titre de section principal */
.section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 300;
  color: var(--lys-white);
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin-bottom: 28px;
}

/* Variante claire pour fond image */
.section-title--light {
  color: var(--lys-white);
}

/* Overlay sombre sur les sections avec fond photo
   À placer comme premier enfant de la section avec position: relative */
.bg-overlay {
  position: absolute;
  inset: 0;
  /* Dégradé : bords plus sombres, centre légèrement plus clair pour faire ressortir le texte */
  background: linear-gradient(
    135deg,
    oklch(0.07 0.010 42 / 0.94) 0%,
    oklch(0.10 0.008 42 / 0.88) 50%,
    oklch(0.07 0.010 42 / 0.92) 100%
  );
  z-index: 0;
}

/* Classe de révélation au scroll — état initial (invisible, décalé vers le bas) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* État final une fois visible dans le viewport (ajouté par IntersectionObserver en JS) */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Décalages successifs pour les enfants (effet cascade) */
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }

/* Texte placeholder (contenu en cours de rédaction) */
.placeholder-notice {
  font-size: 14px;
  font-style: italic;
  color: var(--lys-500);
  padding: 32px 0;
  text-align: center;
  letter-spacing: 0.04em;
}

.placeholder-notice--light {
  color: oklch(0.68 0.003 40 / 0.7);
}


/* ── 4. BOUTON PRINCIPAL ────────────────────────────────── */
/* Bouton CTA orange avec flèche — utilisé pour les actions importantes */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  background: var(--lys-orange);
  color: var(--lys-black);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius-btn);
  border: 1px solid var(--lys-orange);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.15s;
  /* Contour pour focus clavier (accessibilité) */
  outline-offset: 3px;
}

.btn-primary:hover {
  background: var(--lys-orange-light);
  border-color: var(--lys-orange-light);
  box-shadow: 0 0 24px var(--lys-orange-glow);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  background: var(--lys-orange-deep);
}

/* Variante grande taille pour section contact */
.btn-large {
  padding: 16px 40px;
  font-size: 13px;
}

/* Bouton "Envoyer" dans le formulaire */
.btn-submit {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  padding: 15px;
}


/* ── 5. NAVIGATION ──────────────────────────────────────── */
/* Barre fixe en haut — transparente au début, opaque après scroll */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  /* Transparente par défaut — JS ajoute .nav--solid au scroll */
  background: transparent;
  transition: background 0.4s ease, backdrop-filter 0.4s ease,
              border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

/* État opaque après défilement (classe ajoutée par JS) */
.nav--solid {
  background: oklch(0.105 0.010 42 / 0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: var(--lys-800);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 60px);
}

/* Logo + wordmark */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-logo {
  /* Légère rotation sur hover pour l'animation du cristal */
  transition: transform 0.6s ease;
}

.nav-brand:hover .nav-logo {
  transform: rotate(30deg);
}

.nav-wordmark {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lys-white);
}

/* Liste des liens nav desktop */
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lys-500);
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--lys-white);
}

/* Lien "Contact" différencié comme bouton discret */
.nav-cta {
  color: var(--lys-orange) !important;
  border: 1px solid oklch(0.67 0.20 42 / 0.4);
  padding: 6px 16px;
  transition: color 0.2s, border-color 0.2s, background 0.2s !important;
}

.nav-cta:hover {
  color: var(--lys-orange-light) !important;
  border-color: var(--lys-orange);
  background: oklch(0.67 0.20 42 / 0.08);
}

/* Hamburger — visible uniquement mobile */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--lys-300);
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}

/* Animation hamburger → croix quand menu est ouvert */
.nav-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ── 6. HERO ────────────────────────────────────────────── */
/* Section plein écran — le canvas topographique est le fond
   padding-bottom décale le centre flex vers le haut : le titre remonte
   et les lignes topo sont visibles dans la moitié basse avant le fondu */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 22vh;
  overflow: hidden;
  background: #08080a;
}

/* Canvas WebGL2 — couvre toute la section hero
   Le canvas est redimensionné dynamiquement par JS selon la taille affichée */
#topo-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Pas de filter CSS — l'effet de distorsion est géré dans le shader GPU */
  display: block;
}

/* Vignette haut — fondu noir léger pour masquer le bord nav */
.hero-vignette {
  position: absolute;
  inset: 0;
  /* oklch(0.105 0.010 42 / 0) = couleur de fond avec alpha 0
     Évite le voile gris que "transparent" (rgba 0,0,0,0) produit
     en s'interpolant avec une couleur non-noire */
  background: linear-gradient(
    to bottom,
    oklch(0.105 0.010 42)   0%,
    oklch(0.105 0.010 42 / 0) 18%
  );
  z-index: 1;
  pointer-events: none;
}

/* Fondu bas — pseudo-élément indépendant pour éviter la composition
   défectueuse de deux gradients sur le même élément.
   Couvre 55 % de la hauteur du hero, entièrement opaque sur 20 %
   puis fondu progressif vers le haut. */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(
    to top,
    oklch(0.105 0.010 42)   0%,
    oklch(0.105 0.010 42)   20%,
    oklch(0.105 0.010 42 / 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Conteneur du titre — au-dessus de la vignette */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  user-select: none; /* évite la sélection accidentelle */
}

/* LE TITRE HERO — seule utilisation de Grenze Gotisch dans tout le site
   Dégradé orange : blanc chaud en haut → orange Lysvenia en bas
   background-clip:text applique le dégradé uniquement aux glyphes */
.hero-title {
  font-family: var(--font-hero);
  font-weight: 315;
  font-variation-settings: 'wght' 315;
  font-size: clamp(72px, 14vw, 176px);
  letter-spacing: 0.08em;
  line-height: 1;
  /* Dégradé tout-orange : fort en haut-gauche, clair en bas-droite
     Pas de blanc — reste dans la famille orange de la palette */
  background: linear-gradient(
    160deg,
    var(--lys-orange)             0%,
    var(--lys-orange-light)      55%,
    oklch(0.90 0.09 42)         100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Lueur orange subtile sous le titre via filter (text-shadow incompatible avec color:transparent) */
  filter: drop-shadow(0 4px 48px oklch(0.67 0.20 42 / 0.28));
}

/* Curseur clignotant du typewriter hero */
.hero-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: var(--lys-orange);
  margin-left: 4px;
  vertical-align: middle;
  animation: cursor-blink 0.9s step-end infinite;
  border-radius: 1px;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Cristal rotatif sous le titre hero ── */
@keyframes cristal-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero-cristal {
  position: absolute;
  top: calc(100% + 28px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

.hero-cristal svg {
  animation: cristal-rotate 20s linear infinite;
  transform-origin: center;
}


/* ── 7. SECTION PRÉSENTATION ────────────────────────────── */
/* Section compacte — transition visuelle entre hero et services */
.section-presentation {
  padding-block: clamp(36px, 4vw, 56px);
}

/* Grille 2 colonnes : titre à gauche, texte à droite — alignées au centre */
.presentation-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* Titre : taille modérée, deux lignes (titre + sous-titre em) */
.presentation-title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 350;
  color: var(--lys-white);
  letter-spacing: 0.03em;
  line-height: 1.35;
}

/* Sous-titre inline italique en orange clair */
.presentation-subtitle {
  font-style: italic;
  color: var(--lys-orange);
  font-weight: 300;
}

/* Corps de texte */
.presentation-text {
  font-size: 16x;
  color: var(--lys-10);
  line-height: 1.78;
}


/* ── 8. SERVICES — EN-TÊTE ──────────────────────────────── */
/* Canvas constellation en fond plein, fondus haut/bas comme le hero */
.section-services-header {
  position: relative;
  padding-block: var(--pad-section);
  background: var(--lys-black);
  overflow: hidden;
}

/* Canvas — positionné en absolu, couvre toute la section */
#constellation-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Fondu noir en haut */
.section-services-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(to bottom, oklch(0.105 0.010 42), oklch(0.105 0.010 42 / 0));
  z-index: 1;
  pointer-events: none;
}

/* Fondu noir en bas */
.section-services-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to top, oklch(0.105 0.010 42) 20%, oklch(0.105 0.010 42 / 0));
  z-index: 1;
  pointer-events: none;
}

/* Texte au-dessus du canvas et des fondus — centré */
.section-services-header .container--rel {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Texte d'intro des services */
.services-intro {
  max-width: 580px;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.75;
  color: var(--lys-300);
  margin-top: 16px;
  margin-inline: auto;
}

.services-intro br {
  display: block;
  margin-bottom: 8px;
  content: '';
}



/* ── 9. SERVICES — BLOCS INDIVIDUELS ───────────────────── */
/* Conteneur commun pour les blocs service */
.service-block {
  padding-block: var(--pad-section-sm);
  position: relative;
}

/* Service 1 : fond sombre + capture de code sur la moitié droite */
.service-block--web {
  background: var(--lys-black);
  border-top: 1px solid var(--lys-800);
  border-bottom: 1px solid var(--lys-800);
  overflow: hidden;
}

/* Image bgsiteweb1 positionnée à droite, fondu vers la gauche.
   background-attachment: fixed = parallax natif CSS (l'image défile moins vite que le texte). */
.service-block--web::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 70%;
  background-image: url('images/bgsiteweb1.webp');
  background-size: cover;
  background-position: right center;
  background-attachment: fixed;
  opacity: 0.40;
  z-index: 0;
  /* Fondu gauche→droite : l'image apparaît progressivement sur 40% */
  mask-image: linear-gradient(to right, transparent 0%, black 42%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 42%);
  pointer-events: none;
}

/* Texte service 1 au-dessus de l'image ::after */
.service-block--web > .container {
  position: relative;
  z-index: 1;
}

/* Service 2 : fond bgdesign1 + overlay */
.service-block--design {
  background-image: url('images/bgdesign1.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.service-block--design .container--rel > * {
  position: relative;
  z-index: 1;
}

/* Layout interne : numéro décoratif + corps texte
   max-width ~55% du container = espace vide de l'autre côté pour l'alternance */
.service-inner {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  max-width: 560px;
  margin-right: auto; /* colle à gauche */
}

/* Numéro en grand format (décoratif, non lu par les lecteurs d'écran) */
.service-number {
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 700;
  color: oklch(0.28 0.008 42);
  line-height: 1;
  letter-spacing: -0.03em;
  user-select: none;
  padding-top: 6px;
}

/* Variante claire (sur fond image) */
.service-number--light {
  color: oklch(0.97 0.005 42 / 0.18);
}

/* Numéros orange : 01, 02, 03, 04 */
.service-block--web .service-number,
.service-block--design .service-number--light,
.service-block--photo .service-number--light,
.service-block--conseil .service-number {
  color: var(--lys-orange);
}

/* Variante inversée (services 02 & 04) : numéro à droite, bloc poussé à droite */
.service-inner--reverse {
  grid-template-columns: 1fr 80px;
  margin-left: auto;
  margin-right: 0;
}

/* Dans le reverse, corps avant numéro visuellement */
.service-inner--reverse .service-body  { order: 1; }
.service-inner--reverse .service-number { order: 2; }

/* Titre du service */
.service-title-small {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  color: var(--lys-white);
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  /* Ligne orange sous le titre */
  padding-bottom: 16px;
  border-bottom: 1px solid oklch(0.67 0.20 42 / 0.25);
}

/* Variante claire */
.service-title-small--light {
  color: var(--lys-white);
  border-bottom-color: oklch(0.97 0.005 42 / 0.2);
}

/* Corps du texte service */
.service-text {
  font-size: 15px;
  color: var(--lys-300);
  line-height: 1.7;
  margin-top: 14px;
}

/* Variante claire (sur fond image) */
.service-text--light {
  color: var(--lys-100);
}


/* ── 10. SERVICES 3 & 4 — BLOCS PLEINE LARGEUR ─────────── */

/* Service 3 : Photographie — canvas orbites en fond */
.service-block--photo {
  position: relative;
  background: var(--lys-black);
  overflow: hidden;
}

/* Canvas en fond absolu pleine section */
#orbites-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Fondu haut : fondu dans la section précédente */
.service-block--photo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(to bottom, var(--lys-black), oklch(0.105 0.010 42 / 0));
  z-index: 1;
  pointer-events: none;
}

/* Fondu bas : fondu dans la section suivante */
.service-block--photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(to top, var(--lys-black), oklch(0.105 0.010 42 / 0));
  z-index: 1;
  pointer-events: none;
}

/* Texte au-dessus des fades (z-index 2 > z-index 1 des ::before/::after) */
.service-block--photo .container--rel > * {
  position: relative;
  z-index: 2;
}

/* ── Pétales décoratives — section Conseil ── */
@keyframes petale-wave {
  0%, 100% { opacity: var(--op, 1); }
  50%       { opacity: 0.15; }
}

.petales-deco {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}

.petales-deco svg {
  filter: drop-shadow(0 0 14px oklch(0.67 0.20 42 / 0.35));
}

.petales-wave .pp1 { animation: petale-wave 2.4s ease-in-out 0.00s infinite; }
.petales-wave .pp2 { animation: petale-wave 2.4s ease-in-out 0.20s infinite; }
.petales-wave .pp3 { animation: petale-wave 2.4s ease-in-out 0.40s infinite; }
.petales-wave .pp4 { animation: petale-wave 2.4s ease-in-out 0.60s infinite; }
.petales-wave .pp5 { animation: petale-wave 2.4s ease-in-out 0.80s infinite; }
.petales-wave .pp6 { animation: petale-wave 2.4s ease-in-out 1.00s infinite; }

/* Sections 01 & 04 sur fond sombre — texte aligné sur les sections 02 & 03 */
.service-block--web .service-text,
.service-block--conseil .service-text {
  color: var(--lys-100);
}
.service-block--conseil .service-subtitle {
  color: oklch(0.68 0.003 40 / 0.7);
}

/* Service 4 : Conseil — fond sombre uni alterné pour créer un rythme visuel */
.service-block--conseil {
  background: var(--lys-900);
  border-top: 1px solid var(--lys-800);
  border-bottom: 1px solid var(--lys-800);
}

/* Sous-titre de service (ex : "Formation & Accompagnement") — fond sombre */
.service-subtitle {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lys-500);
  margin-bottom: 18px;
  display: block;
}

/* Variante claire pour fond image */
.service-subtitle--light {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.68 0.003 40 / 0.7);
  margin-bottom: 18px;
  display: block;
}


/* ── 10b. PANNEAUX ACCORDION SERVICES ──────────────────── */

/* Rangée de boutons sous le texte du service */
.service-btns {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Bouton discret — bordure fine, texte petit, pas de fond */
.service-btn {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lys-orange);
  border: 1px solid var(--lys-700);
  background: none;
  padding: 8px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s;
}

.service-btn:hover {
  border-color: var(--lys-orange);
}

/* État actif (panneau ouvert) */
.service-btn.is-active {
  color: var(--lys-orange);
  border-color: oklch(0.67 0.20 42 / 0.5);
}

/* Variante claire pour fonds image */
.service-btn--light {
  color: var(--lys-orange);
  border-color: oklch(0.97 0.005 42 / 0.15);
}
.service-btn--light:hover,
.service-btn--light.is-active {
  border-color: var(--lys-orange);
}

/* Flèche qui tourne quand le panneau est ouvert */
.service-btn-arrow {
  display: inline-block;
  transition: transform 0.35s ease;
}
.service-btn.is-active .service-btn-arrow {
  transform: rotate(180deg);
}

/* Panneau accordion — masqué par défaut via max-height */
.service-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-panel.is-open {
  max-height: 600px;
}

/* Contenu intérieur du panneau */
.service-panel-inner {
  border-top: 1px solid var(--lys-800);
  padding-block: 32px 8px;
  margin-top: 32px;
}

/* Variante claire */
.service-panel--light .service-panel-inner {
  border-top-color: oklch(0.97 0.005 42 / 0.12);
}

/* Grille 3 colonnes dans le panneau */
.service-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 48px);
}

/* Label de colonne dans le panneau */
.service-panel-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lys-orange);
  margin-bottom: 12px;
}

/* Lien externe dans le panneau */
.service-panel-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lys-orange);
  transition: color 0.2s;
}
.service-panel-link:hover {
  color: var(--lys-orange-light);
}

/* Responsive : grille 1 colonne sur mobile */
@media (max-width: 768px) {
  .service-panel-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* ── 11. SÉPARATEUR "NOS ACTIVITÉS ANNEXES" ─────────────── */
/* Titre centré entre deux lignes — fond image bgligne2 */
.section-separator {
  padding-block: clamp(56px, 7vw, 96px);
  background: var(--lys-black);
}

/* Variante avec fond photo bgligne2 */
.section-separator--bg {
  position: relative;
  background-image: url('images/bgligne2.webp');
  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;
}

/* Contenu au-dessus de l'overlay */
.section-separator--bg .container--rel {
  position: relative;
  z-index: 1;
}

/* Disposition flex avec lignes de chaque côté du titre */
.separator-inner {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Lignes horizontales décoratives */
.separator-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--lys-700),
    transparent
  );
}

/* Titre du séparateur */
.separator-title {
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lys-500);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Variante claire pour fond image */
.separator-title--light {
  color: var(--lys-white);
}

/* Lignes latérales plus visibles sur fond photo */
.section-separator--bg .separator-line {
  background: linear-gradient(90deg, transparent, oklch(0.97 0.005 42 / 0.3), transparent);
}


/* ── 13. L'HÔTEL DES PÈLERINS ───────────────────────────── */
.section-hdp {
  padding-block: var(--pad-section);
  background: var(--lys-900);
  border-top: 1px solid var(--lys-800);
  border-bottom: 1px solid var(--lys-800);
}

/* Layout deux colonnes : texte | image */
.hdp-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* Titre HDP */
.hdp-title {
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 300;
  color: var(--lys-white);
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin-bottom: 20px;
}

/* Texte de description */
.hdp-text {
  font-size: 15px;
  color: var(--lys-300);
  line-height: 1.75;
  margin-bottom: 32px;
}

/* Conteneur image avec cadre décoratif décalé — 75% de la colonne */
.hdp-image-wrap {
  position: relative;
  width: 75%;
  margin-left: auto; /* aligne à droite dans la colonne */
}

/* Photo de l'hôtel — hauteur naturelle, pas de crop */
.hdp-image {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

/* Cadre orange décalé en bas à droite (effet de profondeur) */
.hdp-image-frame {
  position: absolute;
  bottom: -14px;
  right: -14px;
  width: 100%;
  height: 100%;
  border: 1px solid oklch(0.67 0.20 42 / 0.4);
  z-index: 0;
  /* Transition subtile au hover du conteneur */
  transition: transform 0.4s ease;
}

.hdp-image-wrap:hover .hdp-image-frame {
  transform: translate(-4px, -4px);
}


/* ── 14. SECTION CONTACT ────────────────────────────────── */
.section-contact {
  padding-block: var(--pad-section);
  background: var(--lys-black);
  position: relative;
  overflow: hidden;
}

/* Canvas fractures en fond absolu */
#fracture-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.55;
}

/* Fondus haut/bas pour intégration douce avec les sections voisines */
.section-contact::before,
.section-contact::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 40%;
  pointer-events: none;
  z-index: 1;
}
.section-contact::before {
  top: 0;
  background: linear-gradient(to bottom, var(--lys-black), oklch(0.105 0.010 42 / 0));
}
.section-contact::after {
  bottom: 0;
  background: linear-gradient(to top, var(--lys-black), oklch(0.105 0.010 42 / 0));
}

/* Contenu centré au-dessus du canvas et des fondus */
.section-contact .container--rel {
  position: relative;
  z-index: 2;
}

.contact-inner {
  text-align: center;
  max-width: 540px;
  margin-inline: auto;
}

/* Grand titre de la section contact */
.contact-title {
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 300;
  color: var(--lys-white);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

/* Texte d'accroche sous le titre */
.contact-sub {
  font-size: 15px;
  color: var(--lys-500);
  margin-bottom: 36px;
  letter-spacing: 0.02em;
}


/* ── 15. MODALE CONTACT ─────────────────────────────────── */
/* Overlay plein écran semi-transparent */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: oklch(0.07 0.010 42 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Centrage de la modale */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Animation d'entrée */
  animation: modal-fadein 0.25s ease forwards;
}

/* Masquage natif — [hidden] remplace display:none */
[hidden] { display: none !important; }

@keyframes modal-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Boîte de la modale */
.modal {
  background: var(--lys-900);
  border: 1px solid var(--lys-800);
  padding: clamp(32px, 5vw, 56px);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  /* Ligne orange en haut */
  border-top: 2px solid var(--lys-orange);
  animation: modal-slidein 0.3s ease forwards;
}

@keyframes modal-slidein {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Bouton de fermeture positionné en haut à droite */
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--lys-500);
  padding: 6px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--lys-white);
}

/* Titre de la modale */
.modal-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--lys-white);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  margin-right: 40px; /* espace pour le bouton close */
}

/* Sous-titre avec adresse email */
.modal-sub {
  font-size: 12px;
  color: var(--lys-100);
  letter-spacing: 0.06em;
  margin-bottom: 32px;
}


/* ── 16. FORMULAIRE ─────────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Ligne avec deux champs côte à côte (nom + email) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Groupe label + input */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-group label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lys-100);
}

/* Champs texte et textarea */
.form-group input,
.form-group textarea {
  background: oklch(0.14 0.006 42);
  border: 1px solid var(--lys-500);
  color: var(--lys-white);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  /* Réinitialise le resize par défaut du navigateur pour textarea */
  resize: vertical;
}

/* Focus : bordure orange + légère lueur */
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--lys-orange);
  box-shadow: 0 0 0 3px oklch(0.67 0.20 42 / 0.12);
}

/* Placeholder */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--lys-300);
}

/* Message de succès (affiché après envoi) */
.form-success {
  text-align: center;
  color: var(--lys-orange-light);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 16px;
  border: 1px solid oklch(0.67 0.20 42 / 0.3);
  background: oklch(0.67 0.20 42 / 0.06);
  margin-top: 8px;
}


/* ── 17. FOOTER ─────────────────────────────────────────── */
.footer {
  position: relative;
  background-image: url('images/bgligne1.webp');
  background-size: cover;
  background-position: center;
  border-top: 1px solid var(--lys-800);
  padding-block: clamp(48px, 7vw, 80px) 0;
}

/* Overlay sombre pour lisibilité du texte sur l'image */
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: oklch(0.08 0.008 42 / 0.88);
  z-index: 0;
}

/* Tout le contenu du footer passe devant l'overlay */
.footer > * {
  position: relative;
  z-index: 1;
}

/* Layout trois colonnes */
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(32px, 5vw, 60px);
  padding-bottom: 48px;
}

/* Ligne de marque dans la colonne 1 */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-wordmark {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lys-white);
}

/* Slogan */
.footer-tagline {
  font-size: 11px;
  color: var(--lys-300);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

/* Infos (email, adresse, légal) */
.footer-info {
  font-size: 12px;
  color: var(--lys-300);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* Variante encore plus discrète */
.footer-info--dim {
  color: var(--lys-500);
  font-size: 11px;
}

/* Colonne nav du footer */
.footer-col--nav ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col--nav a {
  font-size: 12px;
  color: var(--lys-300);
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.footer-col--nav a:hover {
  color: var(--lys-white);
}

/* Barre de bas du footer */
.footer-bottom {
  border-top: 1px solid var(--lys-800);
  padding-block: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lys-700);
}


/* ── 18. SECTION DOTS — navigation latérale droite ─────── */
/* ── 19. RESPONSIVE — MOBILE ────────────────────────────── */
/* Point de bascule principal à 768px */
@media (max-width: 768px) {
  .petales-deco { display: none; }

  /* ── Navigation mobile ── */
  .nav-links {
    /* Menu caché par défaut en mobile */
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: oklch(0.105 0.010 42 / 0.97);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-block: 20px;
    border-bottom: 1px solid var(--lys-800);
  }

  /* Affichage du menu quand la classe is-open est ajoutée par JS */
  .nav-links.is-open {
    display: flex;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-links a {
    display: block;
    padding: 16px;
    font-size: 13px;
  }

  .nav-cta {
    border: none !important;
    margin: 8px 20px 0;
    padding: 14px !important;
  }

  /* Affichage du hamburger */
  .nav-burger {
    display: flex;
  }

  /* ── Services ── */
  /* Toutes les sections service en colonne simple sur mobile */
  .service-inner,
  .service-inner--reverse {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    gap: 12px;
  }

  /* Remet le numéro en premier sur mobile (annule order du --reverse) */
  .service-inner--reverse .service-body,
  .service-inner--reverse .service-number {
    order: unset;
  }

  .service-number {
    font-size: 40px;
    padding-top: 0;
  }

  /* Services 3 & 4 : pas de grille — blocs pleine largeur natifs */

  /* ── Présentation ── */
  .presentation-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ── HDP ── */
  /* Image sous le texte sur mobile */
  .hdp-inner {
    grid-template-columns: 1fr;
  }

  /* Image prend toute la largeur */
  .hdp-image-wrap {
    order: -1; /* image avant le texte */
  }

  /* Réduction du cadre décoratif sur mobile */
  .hdp-image-frame {
    bottom: -10px;
    right: -10px;
  }

  /* ── Footer ── */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* ── Formulaire ── */
  /* Champs nom + email en colonne sur mobile */
  .form-row {
    grid-template-columns: 1fr;
  }

}

/* Breakpoint intermédiaire : tablettes */
@media (max-width: 900px) {
  /* Désactive le parallaxe sur mobile — souvent saccadé sur touch */
  .service-block--design,
  .section-separator--bg {
    background-attachment: scroll;
  }

  /* Désactive le parallaxe de l'image ::after de service-web sur mobile */
  .service-block--web::after {
    background-attachment: scroll;
  }
}

/* Très petits écrans : ajustements fin */
@media (max-width: 420px) {
  .hero-title {
    letter-spacing: 0.04em;
  }

  .separator-title {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
}