/* ============================================================
   VARIABLES
============================================================ */
:root {
  --color-black:       #080808;
  --color-dark:        #111111;
  --color-card:        #161616;
  --color-red:         #e8231a;
  --color-red-hover:   #c01e16;
  --color-white:       #f2f2f2;
  --color-grey:        #888888;
  --color-border:      rgba(255, 255, 255, 0.07);

  --font-display:      'Bebas Neue', sans-serif;
  --font-body:         'Barlow', sans-serif;
  --font-condensed:    'Barlow Condensed', sans-serif;

  --space-section-v:   60px;
  --space-section-h:   20px;
  --space-nav-h:       20px;
  --space-nav-v:       18px;
  --container-max:     1400px;
}

/* ============================================================
   RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
img   { display: block; max-width: 100%; }
a     { cursor: pointer; }

/* ============================================================
   BASE
============================================================ */
body {
  background:   var(--color-black);
  color:        var(--color-white);
  font-family:  var(--font-body);
  font-weight:  300;
  overflow-x:   hidden;
  cursor:       default;
}

/* ============================================================
   KEYFRAMES
============================================================ */
@keyframes fadeup {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes marquee {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}
@keyframes rotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@keyframes spark {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: .7; transform: scale(1.2); }
}

/* ============================================================
   UTILITIES
============================================================ */
.skip-link {
  position:    absolute;
  top:         -100%;
  left:        16px;
  background:  var(--color-red);
  color:       var(--color-white);
  padding:     8px 16px;
  font-size:   13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  z-index:     999;
  transition:  top 0.2s;
}
.skip-link:focus { top: 16px; }

.section-label {
  font-family:    var(--font-condensed);
  font-size:      12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color:          var(--color-red);
  margin-bottom:  16px;
  display:        flex;
  align-items:    center;
  gap:            12px;
}
.section-label::before {
  content:    '';
  display:    block;
  width:      28px;
  height:     1px;
  background: var(--color-red);
  flex-shrink: 0;
}

.section-title {
  font-family:    var(--font-display);
  font-size:      clamp(42px, 5vw, 72px);
  line-height:    1;
  letter-spacing: 1px;
  margin-bottom:  16px;
}

.section-sub {
  font-size:   clamp(13px, 3.2vw, 16px);
  color:       var(--color-grey);
  max-width:   480px;
  line-height: 1.7;
}

.red-divider {
  width:         40px;
  height:        2px;
  background:    var(--color-red);
  margin-bottom: 24px;
}

/* ============================================================
   LAYOUT — section padding + max-width container
============================================================ */
section {
  padding: var(--space-section-v) var(--space-section-h);
}

@media (min-width: 1280px) {
  section, footer, .nav, .page-content {
    padding-left:  max(var(--space-section-h), calc((100% - var(--container-max)) / 2));
    padding-right: max(var(--space-section-h), calc((100% - var(--container-max)) / 2));
  }
}

/* ============================================================
   NAVIGATION
============================================================ */
.nav {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         100;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-nav-v) var(--space-nav-h);
  background:      linear-gradient(to bottom, rgba(8,8,8,0.98), transparent);
  backdrop-filter: blur(4px);
}

.nav__logo {
  font-family:    var(--font-display);
  font-size:      22px;
  letter-spacing: 4px;
  line-height:     1;
  color:           var(--color-white);
  text-decoration: none;
}
.nav__logo-accent { color: var(--color-red); }

/* Desktop links — hidden until lg */
.nav__links {
  display:      none;
  gap:          36px;
  list-style:   none;
  align-items:  center;
}

.nav__link {
  color:          var(--color-grey);
  text-decoration: none;
  font-size:      13px;
  font-weight:    600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition:     color 0.2s;
}
.nav__link:hover { color: var(--color-white); }

.nav__link--cta {
  color:          var(--color-white);
  background:     var(--color-red);
  padding:        10px 22px;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 2px;
  transition:     background 0.2s;
}
.nav__link--cta:hover { background: var(--color-red-hover); }

/* Desktop dropdown */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-toggle {
  background:     none;
  border:         none;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-family:    var(--font-body);
  color:          var(--color-grey);
  font-size:      13px;
  font-weight:    600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition:     color 0.2s;
  padding:        0;
}
.nav__dropdown-toggle:hover { color: var(--color-white); }

.nav__dropdown-arrow {
  transition: transform 0.3s;
}

.nav__dropdown-toggle[aria-expanded="true"] .nav__dropdown-arrow {
  transform: rotate(180deg);
}

.nav__dropdown-menu {
  display:        none;
  position:       absolute;
  top:            calc(100% + 12px);
  left:           50%;
  transform:      translateX(-50%);
  background:     var(--color-card);
  border:         1px solid var(--color-border);
  list-style:     none;
  min-width:      200px;
  padding:        8px 0;
  z-index:        110;
  flex-direction: column;
}

.nav__dropdown-menu::before {
  content:     '';
  position:    absolute;
  top:         -6px;
  left:        50%;
  transform:   translateX(-50%) rotate(45deg);
  width:       10px;
  height:      10px;
  background:  var(--color-card);
  border-top:  1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.nav__dropdown.is-open .nav__dropdown-menu {
  display: flex;
}

.nav__dropdown-item {
  display:        block;
  padding:        10px 20px;
  color:          var(--color-grey);
  text-decoration: none;
  font-size:      13px;
  font-weight:    600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition:     color 0.2s, background 0.2s;
  white-space:    nowrap;
}

.nav__dropdown-item:hover {
  color:      var(--color-white);
  background: rgba(232, 35, 26, 0.1);
}

/* Mobile dropdown */
.mobile-menu__dropdown {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0;
}

.mobile-menu__dropdown-toggle {
  background:     none;
  border:         none;
  cursor:         pointer;
  font-family:    var(--font-display);
  font-size:      36px;
  letter-spacing: 3px;
  color:          var(--color-white);
  text-transform: uppercase;
  transition:     color 0.2s;
}
.mobile-menu__dropdown-toggle:hover { color: var(--color-red); }

.mobile-menu__dropdown-items {
  display:        none;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  padding-top:    12px;
}

.mobile-menu__dropdown.is-open .mobile-menu__dropdown-items {
  display: flex;
}

.mobile-menu__sublink {
  font-family:    var(--font-condensed);
  font-size:      18px;
  letter-spacing: 2px;
  color:          var(--color-grey);
  text-decoration: none;
  text-transform: uppercase;
  transition:     color 0.2s;
}
.mobile-menu__sublink:hover { color: var(--color-red); }

/* ── Page content (sub-pages) ── */

/* Hero banner */
.page-hero {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  justify-content: flex-end;
  min-height:      280px;
  padding:         120px 24px 48px;
  background:      var(--color-black);
  overflow:        hidden;
  max-width:       760px;
  margin:          0 auto;
}

.page-hero::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       24px;
  right:      24px;
  height:     1px;
  background: var(--color-border);
}

.page-hero__back {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--font-condensed);
  font-size:       13px;
  letter-spacing:  2px;
  text-transform:  uppercase;
  color:           var(--color-grey);
  text-decoration: none;
  margin-bottom:   32px;
  transition:      color 0.2s;
  position:        relative;
  z-index:         1;
}
.page-hero__back:hover { color: var(--color-red); }

.page-hero h1 {
  font-family:    var(--font-display);
  font-size:      clamp(40px, 6vw, 80px);
  line-height:    0.95;
  letter-spacing: 2px;
  position:       relative;
  z-index:        1;
}

.page-hero h1 span {
  color: var(--color-white);
}

/* Centered body */
.page-content__body {
  max-width:   760px;
  margin:      0 auto;
  padding:     56px var(--space-section-h) 80px;
  font-size:   16px;
  line-height: 1.75;
  color:       rgba(200, 200, 200, 0.85);
}

@media (min-width: 768px) {
  .page-content__body {
    font-size: 17px;
    padding:   72px var(--space-section-h) 100px;
  }
}

@media (min-width: 1024px) {
  .page-content__body {
    font-size: 17px;
    padding:   80px 24px 120px;
  }
}

.page-content__body p {
  margin-bottom: 24px;
}

.page-content__body h2 {
  font-family:    var(--font-body);
  font-size:      clamp(22px, 2.5vw, 28px);
  font-weight:    700;
  letter-spacing: -0.01em;
  color:          var(--color-white);
  margin-top:     56px;
  margin-bottom:  20px;
  line-height:    1.25;
}

.page-content__body h2::before {
  content:       '';
  display:       block;
  width:         32px;
  height:        2px;
  background:    var(--color-red);
  margin-bottom: 16px;
}

.page-content__body h3 {
  font-family:    var(--font-body);
  font-size:      clamp(18px, 2vw, 21px);
  font-weight:    700;
  letter-spacing: 0;
  color:          var(--color-white);
  margin-top:     40px;
  margin-bottom:  12px;
  line-height:    1.3;
}

.page-content__body ul {
  list-style:     none;
  margin-bottom:  24px;
  padding-left:   0;
}

.page-content__body ul li {
  padding:       10px 0;
  border-bottom: 1px solid var(--color-border);
  display:       flex;
  align-items:   baseline;
  gap:           12px;
  line-height:   1.6;
}

.page-content__body ul li:last-child {
  border-bottom: none;
}

.page-content__body ul li::before {
  content:       '';
  width:         5px;
  height:        5px;
  background:    var(--color-red);
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    8px;
}

.page-content__intro {
  font-size:     clamp(17px, 1.6vw, 20px);
  line-height:   1.8;
  color:         var(--color-white);
  margin-bottom: 28px;
  font-weight:   300;
}

.page-content__body strong {
  color:       var(--color-white);
  font-weight: 600;
}

.page-content__body hr {
  border:        none;
  height:        1px;
  background:    var(--color-border);
  margin:        48px 0;
}

.page-content__table {
  width:           100%;
  border-collapse: collapse;
  margin:          24px 0 32px;
  font-size:       14px;
}

.page-content__table th,
.page-content__table td {
  text-align:    left;
  padding:       12px 16px;
  border-bottom: 1px solid var(--color-border);
}

.page-content__table th {
  font-family:    var(--font-condensed);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--color-red);
  border-bottom:  1px solid rgba(232, 35, 26, 0.3);
}

.page-content__table td {
  color: rgba(200, 200, 200, 0.85);
}

.page-content__table tr:hover td {
  color: var(--color-white);
}

.page-content__body blockquote {
  border-left:  3px solid var(--color-red);
  padding:      24px 28px;
  margin:       48px 0;
  background:   rgba(232,35,26,0.04);
  border-radius: 0 4px 4px 0;
}

.page-content__body blockquote p {
  margin-bottom: 8px;
  color:         var(--color-white);
  font-size:     16px;
}

.page-content__body blockquote p:last-child {
  margin-bottom: 0;
}

.page-content__cta {
  margin-top:  48px;
  padding-top: 32px;
  border-top:  1px solid var(--color-border);
}

.page-content__cta p {
  margin-bottom: 20px;
  color:         var(--color-white);
  font-size:     15px;
}

/* ── Laser application cards (cross-navigation) ── */
.laser-cards {
  max-width:    760px;
  margin:       0 auto;
  padding:      0 var(--space-section-h) 80px;
}

.laser-cards__title {
  font-family:    var(--font-condensed);
  font-size:      12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color:          var(--color-red);
  margin-bottom:  28px;
  display:        flex;
  align-items:    center;
  gap:            12px;
}

.laser-cards__title::before {
  content:    '';
  display:    block;
  width:      28px;
  height:     1px;
  background: var(--color-red);
  flex-shrink: 0;
}

.laser-cards__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   16px;
}

.laser-card {
  display:         flex;
  flex-direction:  column;
  background:      var(--color-card);
  border:          1px solid var(--color-border);
  padding:         28px 24px;
  text-decoration: none;
  color:           inherit;
  position:        relative;
  overflow:        hidden;
  transition:      border-color 0.3s, background 0.3s, transform 0.2s;
}

.laser-card::before {
  content:          '';
  position:         absolute;
  top: 0; left: 0; right: 0;
  height:           2px;
  background:       var(--color-red);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform 0.4s;
}

.laser-card:hover {
  border-color: rgba(232, 35, 26, 0.3);
  background:   #1a1a1a;
  transform:    translateY(-2px);
}

.laser-card:hover::before {
  transform: scaleX(1);
}

.laser-card__tag {
  font-family:    var(--font-condensed);
  font-size:      10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--color-red);
  margin-bottom:  10px;
}

.laser-card__name {
  font-family:    var(--font-display);
  font-size:      clamp(24px, 3vw, 32px);
  letter-spacing: 1px;
  line-height:    1;
  color:          var(--color-white);
  margin-bottom:  12px;
}

.laser-card__desc {
  font-size:   14px;
  line-height: 1.6;
  color:       var(--color-grey);
}

.laser-card__arrow {
  font-family:    var(--font-condensed);
  font-size:      12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--color-red);
  margin-top:     16px;
  transition:     letter-spacing 0.3s;
}

.laser-card:hover .laser-card__arrow {
  letter-spacing: 4px;
}

@media (min-width: 640px) {
  .laser-cards__grid {
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
  }
}

@media (min-width: 768px) {
  .laser-cards {
    padding-bottom: 100px;
  }
}

@media (min-width: 1024px) {
  .laser-cards {
    padding:     0 24px 120px;
  }

  .laser-cards__grid {
    gap: 20px;
  }
}

/* Hamburger */
.nav__toggle {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            5px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        4px;
}
.nav__toggle-bar {
  display:    block;
  width:      24px;
  height:     2px;
  background: var(--color-white);
  transition: transform 0.3s, opacity 0.3s;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg);  }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer */
.mobile-menu {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         99;
  background:      rgba(8,8,8,0.97);
  backdrop-filter: blur(8px);
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             32px;
  padding:         40px 24px;
}
.mobile-menu.is-open { display: flex; }

.mobile-menu__link {
  font-family:    var(--font-display);
  font-size:      36px;
  letter-spacing: 3px;
  color:          var(--color-white);
  text-decoration: none;
  text-transform: uppercase;
  transition:     color 0.2s;
}
.mobile-menu__link:hover { color: var(--color-red); }

.mobile-menu__link--cta {
  font-size:  20px;
  background: var(--color-red);
  padding:    12px 32px;
}
.mobile-menu__link--cta:hover { background: var(--color-red-hover); color: var(--color-white); }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display:        inline-block;
  font-family:    var(--font-condensed);
  font-size:      14px;
  font-weight:    700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  padding:        15px 34px;
  border:         none;
  cursor:         pointer;
  transition:     background 0.2s, border-color 0.2s, transform 0.15s;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--color-red); color: var(--color-white); }
.btn--primary:hover { background: var(--color-red-hover); }

.btn--ghost { background: transparent; color: var(--color-white); border: 1px solid rgba(255,255,255,0.15); }
.btn--ghost:hover { border-color: var(--color-red); }

/* ============================================================
   HERO
============================================================ */
#hero {
  min-height:     100svh;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  padding:        100px var(--space-section-h) 80px;
  position:       relative;
  overflow:       hidden;
  text-align:     center;
}

/* Spacer to push text to vertical center */
.hero__spacer { flex: 1; }

/* Background radial glow */
#hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(232,35,26,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index:    0;
}

.hero__video {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center center;
  z-index:        0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero__video {
    object-position: 60% center;
  }
  .hero__overlay {
    background: rgba(0, 0, 0, 0.5);
  }
}

.hero__overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.7);
  z-index:    1;
  pointer-events: none;
}

#laser-canvas {
  position: absolute;
  inset:    0;
  z-index:  2;
  width:    100%;
  height:   100%;
  pointer-events: none;
}

.hero__text {
  position:       relative;
  z-index:        10;
  max-width:      820px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

.hero__eyebrow {
  font-family:    var(--font-condensed);
  font-size:      12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color:          var(--color-red);
  margin-bottom:  22px;
  display:        flex;
  align-items:    center;
  gap:            12px;
  opacity:        0;
  animation:      fadeup 0.5s 0.1s both;
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content:    '';
  display:    block;
  width:      28px;
  height:     1px;
  background: var(--color-red);
  flex-shrink: 0;
}

.hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(68px, 9vw, 130px);
  line-height:    0.92;
  letter-spacing: 3px;
  opacity:        0;
  animation:      fadeup 0.6s 0.25s both;
}
.hero__title-accent { color: var(--color-red); }

.hero__sub {
  font-size:    clamp(14px, 1.5vw, 17px);
  font-weight:  300;
  color:        rgba(242,242,242,0.85);
  letter-spacing: 1px;
  margin-top:   18px;
  max-width:    560px;
  line-height:  1.7;
  opacity:      0;
  animation:    fadeup 0.6s 0.4s both;
}

.hero__actions {
  display:         flex;
  flex-wrap:       wrap;
  gap:             14px;
  margin-top:      36px;
  justify-content: center;
  position:        relative;
  z-index:         10;
  opacity:         0;
  animation:       fadeup 0.6s 0.55s both;
}

/* KPI bar */
.hero__kpi {
  display:        none;
  flex-direction: column;
  width:          100%;
  margin-top:     44px;
  margin-bottom:  48px;
  border:         1px solid var(--color-border);
  background:     var(--color-card);
  position:       relative;
  z-index:        10;
  opacity:        0;
  animation:      fadeup 0.6s 0.7s both;
}

.kpi-item {
  flex:            1 1 0;
  padding:         16px 20px;
  border-bottom:   1px solid var(--color-border);
  text-align:      center;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
}
.kpi-item:last-child { border-bottom: none; }

.kpi-item__num {
  font-family: var(--font-display);
  font-size:   28px;
  color:       var(--color-red);
  line-height: 1;
}

.kpi-item__label {
  font-size:      clamp(9px, 1.8vw, 11px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--color-grey);
  margin-top:     3px;
  white-space:    nowrap;
}

/* Tech strip marquee */
.tech-strip {
  position:     absolute;
  bottom:       0;
  left:         0;
  right:        0;
  background:   var(--color-red);
  padding:      14px 0;
  overflow:     hidden;
  width:        100%;
  z-index:      10;
  display:      flex;
}

.tech-strip__inner {
  display:      flex;
  gap:          60px;
  white-space:  nowrap;
  animation:    marquee 20s linear infinite;
  flex-shrink:  0;
  padding-right: 60px;
}

.tech-strip__item {
  font-family:    var(--font-condensed);
  font-size:      13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight:    700;
}

.tech-strip__dot { color: rgba(255,255,255,0.4); }

/* ============================================================
   AVANTAGES — "Pourquoi le laser ?"
============================================================ */
#avantages { background: var(--color-dark); }

.avantages-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1px;
  margin-top:            60px;
  background:            var(--color-border);
  border:                1px solid var(--color-border);
}

.avantage-card {
  background:  var(--color-card);
  padding:     32px 24px;
  position:    relative;
  overflow:    hidden;
  transition:  background 0.3s;
}

/* Animated red top bar — visible on hover (desktop) */
.avantage-card::before {
  content:          '';
  position:         absolute;
  top: 0; left: 0; right: 0;
  height:           2px;
  background:       var(--color-red);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform 0.4s;
}

.avantage-card__icon {
  width:         36px;
  height:        36px;
  margin-bottom: 24px;
  display:       block;
  color:         var(--color-red);
  transition:    color 0.3s;
}
.avantage-card__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }

.avantage-card__title {
  font-family:    var(--font-condensed);
  font-size:      20px;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom:  10px;
}

.avantage-card__desc {
  font-size:   14px;
  color:       var(--color-grey);
  line-height: 1.65;
}

/* ============================================================
   SECTEURS — "Quatre secteurs"
============================================================ */
#secteurs { background: var(--color-dark); }

.secteurs__header {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  margin-bottom:  60px;
  gap:            20px;
}

.secteurs-grid {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  background:     var(--color-border);
  border:         1px solid var(--color-border);
}

.secteur-card {
  flex:           0 0 auto;
  min-width:      0;
  background:     var(--color-card);
  padding:        32px 20px 28px;
  display:        flex;
  flex-direction: column;
  position:       relative;
  overflow:       hidden;
  transition:     background 0.3s;
}

@media (min-width: 768px) {
  .secteurs-grid {
    flex-direction: row;
    align-items: stretch;
  }
  .secteur-card {
    flex: 1 1 0%;
  }
}

.secteur-card__name {
  font-family:    var(--font-display);
  font-size:      clamp(22px, 2.5vw, 36px);
  letter-spacing: 1px;
  line-height:    1;
  margin-bottom:  24px;
  word-break:     break-word;
}

/* Animated red top bar */
.secteur-card::before {
  content:          '';
  position:         absolute;
  top: 0; left: 0; right: 0;
  height:           2px;
  background:       var(--color-red);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform 0.4s;
}
.secteur-card:hover               { background: #1c1c1c; }
.secteur-card:hover::before       { transform: scaleX(1); }
.secteur-card:hover .secteur-card__item { color: rgba(242,242,242,0.8); }

.secteur-card__tag {
  display:        inline-block;
  align-self:     flex-start;
  background:     var(--color-red);
  font-family:    var(--font-condensed);
  font-size:      11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight:    700;
  padding:        4px 12px;
  margin-bottom:  16px;
}

.secteur-card__divider {
  width:         32px;
  height:        1px;
  background:    var(--color-red);
  margin-bottom: 20px;
}

.secteur-card__items { list-style: none; }

.secteur-card__item {
  font-size:     13px;
  color:         var(--color-grey);
  padding:       9px 0;
  border-bottom: 1px solid var(--color-border);
  display:       flex;
  align-items:   center;
  gap:           10px;
  transition:    color 0.2s;
}
.secteur-card__item:last-child { border-bottom: none; }

.secteur-card__item::before {
  content:       '';
  width:         4px;
  height:        4px;
  background:    var(--color-red);
  border-radius: 50%;
  flex-shrink:   0;
}

/* ============================================================
   TECHNOLOGIE — "Comment ça marche"
============================================================ */
#technologie {
  background:            var(--color-dark);
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   40px;
}

.tech-visual {
  position:        relative;
  height:          260px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.tech-circle {
  width:         200px;
  height:        200px;
  border:        1px solid rgba(232,35,26,0.2);
  border-radius: 50%;
  position:      relative;
  animation:     rotate 20s linear infinite;
}
.tech-circle::before {
  content:       '';
  position:      absolute;
  top: -4px; left: 50%;
  transform:     translateX(-50%);
  width:         8px;
  height:        8px;
  background:    var(--color-red);
  border-radius: 50%;
  box-shadow:    0 0 12px var(--color-red), 0 0 24px var(--color-red);
}

.tech-circle__inner {
  position:      absolute;
  inset:         30px;
  border:        1px solid rgba(232,35,26,0.1);
  border-radius: 50%;
  animation:     rotate 15s linear infinite reverse;
}
.tech-circle__inner::before {
  content:       '';
  position:      absolute;
  bottom: -4px; left: 50%;
  transform:     translateX(-50%);
  width:         6px;
  height:        6px;
  background:    rgba(232,35,26,0.6);
  border-radius: 50%;
}

.tech-center {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
}

.tech-center__text {
  font-family:    var(--font-display);
  font-size:      40px;
  letter-spacing: 2px;
  text-align:     center;
  line-height:    1;
}

.tech-center__sub {
  font-size:      11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color:          var(--color-red);
  margin-top:     8px;
}

.tech-content .section-title { margin-top: 20px; }

.tech-features {
  margin-top:     40px;
  display:        flex;
  flex-direction: column;
}

.tech-feature {
  display:       flex;
  gap:           20px;
  align-items:   flex-start;
  padding:       20px 0;
  border-bottom: 1px solid var(--color-border);
}

.tech-feature__num {
  font-family: var(--font-display);
  font-size:   32px;
  color:       rgba(232,35,26,0.3);
  line-height: 1;
  min-width:   40px;
}

.tech-feature__title {
  display:        block;
  font-family:    var(--font-condensed);
  font-size:      16px;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom:  4px;
}

.tech-feature__desc { font-size: 14px; color: var(--color-grey); }

/* ============================================================
   RÉALISATIONS
============================================================ */
#realisations { background: var(--color-black); }

.real__header {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  margin-bottom:  40px;
  gap:            20px;
}

.real-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   2px;
}

.real-item {
  overflow:        hidden;
  position:        relative;
  background:      var(--color-card);
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          220px;
}

.real-item__bg {
  position:   absolute;
  inset:      0;
  transition: transform 0.5s;
}
.real-item:hover .real-item__bg { transform: scale(1.05); }

.real-item__bg--1 { background: linear-gradient(135deg, #1a0f08 0%, #3d2010 100%); }
.real-item__bg--2 { background: linear-gradient(135deg, #0f0f1a 0%, #1e2040 100%); }
.real-item__bg--3 { background: linear-gradient(135deg, #141414 0%, #2c2c2c 100%); }
.real-item__bg--4 { background: linear-gradient(135deg, #1a1008 0%, #352015 100%); }
.real-item__bg--5 { background: linear-gradient(135deg, #0a0f14 0%, #152030 100%); }

.real-item__spark {
  position:      absolute;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(232,35,26,0.8) 0%, transparent 70%);
  animation:     spark 3s ease-in-out infinite;
  pointer-events: none;
  width:  40px;
  height: 40px;
  top: 30%; left: 50%;
}
.real-item--featured .real-item__spark { width: 80px; height: 80px; top: 40%; left: 40%; }

.real-item__label {
  position:       absolute;
  bottom: 0; left: 0; right: 0;
  padding:        20px 24px;
  background:     linear-gradient(to top, rgba(8,8,8,0.9), transparent);
  font-family:    var(--font-condensed);
  font-size:      14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight:    700;
}

.real-item__label-sub {
  display:        block;
  font-size:      12px;
  color:          var(--color-grey);
  font-weight:    400;
  letter-spacing: 1px;
  margin-top:     2px;
}

.real__note {
  margin-top:  20px;
  font-size:   13px;
  color:       var(--color-grey);
  font-style:  italic;
}

/* ============================================================
   CONTACT
============================================================ */
#contact {
  background:            var(--color-dark);
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   40px;
}

.contact-info .section-title { margin-top: 20px; margin-bottom: 30px; }

.contact-points {
  display:        flex;
  flex-direction: column;
  gap:            28px;
  margin-top:     40px;
}

.contact-point {
  display:       flex;
  gap:           16px;
  align-items:   flex-start;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
}

.contact-point__icon {
  width:           40px;
  height:          40px;
  border:          1px solid rgba(232,35,26,0.3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  color:           var(--color-red);
}
.contact-point__icon svg { width: 18px; height: 18px; stroke-width: 1.5; }

.contact-point__label {
  font-size:      11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--color-grey);
}

.contact-point__value { font-size: 15px; font-weight: 600; margin-top: 4px; }
.contact-point__value a { color: inherit; text-decoration: none; }
.contact-point__value a:hover { color: var(--color-red); }

.contact-form-wrapper { padding-top: 10px; }

.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.form-row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   16px;
}

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.form-group label {
  font-size:      11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--color-grey);
}

.form-group input,
.form-group textarea,
.form-group select {
  background:  var(--color-card);
  border:      1px solid var(--color-border);
  color:       var(--color-white);
  padding:     14px 16px;
  font-family: var(--font-body);
  font-size:   14px;
  outline:     none;
  resize:      none;
  appearance:  none;
  transition:  border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--color-red); }

.form-group textarea  { height: 120px; }
.form-group select option { background: var(--color-card); }

.form-submit { margin-top: 8px; }

.form-required { color: var(--color-red); margin-left: 2px; }

.form-hint {
  display:    block;
  font-size:  11px;
  color:      var(--color-grey);
  margin-top: 4px;
}

.form-error {
  display:    block;
  font-size:  11px;
  color:      var(--color-red);
  margin-top: 4px;
  min-height: 16px;
}

.form-group input.is-invalid,
.form-group textarea.is-invalid,
.form-group select.is-invalid {
  border-color: var(--color-red);
}

.form-status {
  padding:       12px 16px;
  border-radius: 4px;
  font-size:     13px;
  margin-bottom: 20px;
}
.form-status--success {
  background:  rgba(40, 167, 69, 0.12);
  border:      1px solid rgba(40, 167, 69, 0.4);
  color:       #6fcf97;
}
.form-status--error {
  background:  rgba(232, 35, 26, 0.1);
  border:      1px solid rgba(232, 35, 26, 0.4);
  color:       var(--color-red);
}
.form-submit .btn { width: 100%; border: none; text-align: center; }

/* ============================================================
   FOOTER
============================================================ */
footer {
  background:      var(--color-black);
  border-top:      1px solid var(--color-border);
  padding:         40px var(--space-nav-h);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             16px;
}

.footer__logo {
  font-family:    var(--font-display);
  font-size:      22px;
  letter-spacing: 4px;
}
.footer__logo-accent { color: var(--color-red); }

.footer__copy { font-size: 12px; color: var(--color-grey); letter-spacing: 1px; }

.footer__links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }

.footer__link {
  font-size:      12px;
  color:          var(--color-grey);
  text-decoration: none;
  letter-spacing: 1px;
  transition:     color 0.2s;
}
.footer__link:hover { color: var(--color-white); }

/* ============================================================
   BREAKPOINTS
============================================================ */

/* sm — 480px */
@media (min-width: 480px) {
  .hero__kpi { flex-direction: row; align-items: stretch; width: auto; }

  .kpi-item {
    width:         33.333%;
    flex:          none;
    border-bottom: none;
    border-right:  1px solid var(--color-border);
    padding:       20px 48px;
  }
  .kpi-item:last-child  { border-right: none; }
  .kpi-item__num        { font-size: 38px; }
  .kpi-item__label      { font-size: 10px; }
}

/* md — 768px */
@media (min-width: 768px) {
  :root {
    --space-section-v: 80px;
    --space-section-h: 40px;
    --space-nav-h:     40px;
  }

  #hero { padding-top: 140px; }

  .avantages-grid { grid-template-columns: repeat(2, 1fr); }
  .avantage-card  { padding: 48px 36px; }

  .secteurs__header {
    flex-direction:  row;
    align-items:     flex-end;
    justify-content: space-between;
  }
  .secteurs__sub { text-align: right; max-width: 300px; }

  .real__header { flex-direction: row; justify-content: space-between; align-items: flex-end; }

  .real-grid                         { grid-template-columns: 1fr 1fr; }
  .real-item--featured               { grid-column: 1 / -1; height: 280px; }
  .real-item:not(.real-item--featured) { height: 200px; }

  .form-row { grid-template-columns: 1fr 1fr; }

  footer { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .footer__links { justify-content: flex-start; }
}

/* lg — 1024px */
@media (min-width: 1024px) {
  :root {
    --space-section-v: 100px;
    --space-section-h: 60px;
    --space-nav-h:     60px;
  }

  /* Show desktop nav, hide hamburger */
  .nav__links  { display: flex; }
  .nav__toggle { display: none; }

  .avantages-grid { grid-template-columns: repeat(4, 1fr); }

  /* Avantage cards: hover system replaces static icon color */
  .avantage-card:hover              { background: #1e1e1e; }
  .avantage-card:hover::before      { transform: scaleX(1); }
  .avantage-card__icon              { color: var(--color-grey); }
  .avantage-card:hover .avantage-card__icon { color: var(--color-red); }

  #technologie {
    grid-template-columns: 1fr 1fr;
    gap:                   80px;
    align-items:           center;
  }
  .tech-visual        { height: 500px; }
  .tech-circle        { width: 320px; height: 320px; }
  .tech-center__text  { font-size: 56px; }

  .real-grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows:    240px 240px;
  }
  .real-item--featured               { grid-row: 1 / 3; grid-column: auto; height: auto; }
  .real-item:not(.real-item--featured) { height: auto; }

  #contact { grid-template-columns: 1fr 1fr; gap: 80px; }
  .contact-form-wrapper .red-divider { margin-top: 60px; }
}

/* xl — 1280px */
@media (min-width: 1280px) {
  .tech-circle { width: 360px; height: 360px; }
}