@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&display=swap");

/* ==========================================================================
   ILNET TELECOM — Couche « REFONTE PREMIUM »
   --------------------------------------------------------------------------
   Cette feuille est chargée APRÈS style.css. Elle applique la direction
   artistique de la maquette de référence :
     · fond crème chaud + halos orangés diffus
     · arabesques sahéliennes tracées en filigrane dans les angles
     · titres display très gras, seconde ligne orange
     · cartes blanches, filets chauds, ombres douces
     · une seule teinte d'accent : --brand
   Tokens uniquement — aucune couleur brute hors des variables déclarées ici.
   ========================================================================== */

:root {
  /* Fond de page plus lumineux, légèrement doré */
  --surface-page: #FBF7F2;
  --surface-veil: rgba(255, 255, 255, .72);
  --ornament-ink: #D99A4E;

  --shadow-card: 0 10px 30px rgba(86, 52, 16, .07);
  --shadow-card-hover: 0 22px 54px rgba(86, 52, 16, .14);
  --shadow-float: 0 18px 44px rgba(86, 52, 16, .16);

  --ring-brand: 0 0 0 1px var(--border-card), 0 10px 30px rgba(86, 52, 16, .08);

  /* Halos de page */
  --wash-top: radial-gradient(58% 46% at 82% 4%, rgba(250, 205, 148, .55) 0%, rgba(250, 205, 148, .18) 42%, rgba(251, 247, 242, 0) 74%);
  --wash-left: radial-gradient(46% 38% at 2% 22%, rgba(253, 226, 196, .5) 0%, rgba(251, 247, 242, 0) 70%);
  --wash-bottom: radial-gradient(60% 40% at 88% 92%, rgba(250, 214, 168, .4) 0%, rgba(251, 247, 242, 0) 72%);

  /* Arabesque d'angle : arcs concentriques + perles + rayons */
  --ornament-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23D99A4E' stroke-width='1.1'%3E%3Cpath d='M0 340A340 340 0 0 0 340 0'/%3E%3Cpath d='M0 292A292 292 0 0 0 292 0'/%3E%3Cpath d='M0 244A244 244 0 0 0 244 0'/%3E%3Cpath d='M0 176A176 176 0 0 0 176 0'/%3E%3Cpath d='M0 128A128 128 0 0 0 128 0'/%3E%3Cpath d='M0 74A74 74 0 0 0 74 0'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D99A4E' stroke-width='1.1'%3E%3Cpath d='M0 210q60 24 88 74M0 138q104 40 148 148M62 0q40 104 148 148M134 0q26 62 74 88'/%3E%3C/g%3E%3Cg fill='%23D99A4E'%3E%3Ccircle cx='24' cy='24' r='3'/%3E%3Ccircle cx='118' cy='118' r='3.4'/%3E%3Ccircle cx='172' cy='172' r='4'/%3E%3Ccircle cx='232' cy='232' r='3.4'/%3E%3Ccircle cx='286' cy='286' r='3'/%3E%3C/g%3E%3C/svg%3E");

  /* Volutes larges, pour les bas de section */
  --ornament-sweep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 320'%3E%3Cg fill='none' stroke='%23D99A4E' stroke-width='1.1'%3E%3Cpath d='M-20 300C120 300 210 236 268 168 330 96 428 40 620 46'/%3E%3Cpath d='M-20 262C112 262 196 202 254 136 318 62 424 8 620 14'/%3E%3Cpath d='M-20 224C104 224 182 168 240 104 306 30 420-24 620-18'/%3E%3Cpath d='M-20 186C96 186 168 134 226 72'/%3E%3C/g%3E%3Cg fill='%23D99A4E'%3E%3Ccircle cx='268' cy='168' r='3.4'/%3E%3Ccircle cx='254' cy='136' r='3'/%3E%3Ccircle cx='240' cy='104' r='2.6'/%3E%3C/g%3E%3C/svg%3E");

  /* Tesselle géométrique discrète (étoiles à 8 branches) */
  --ornament-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M36 8l8 12 12-8-8 12 12 8-12 8 8 12-12-8-8 12-8-12-12 8 8-12-12-8 12-8-8-12 12 8z'/%3E%3Ccircle cx='36' cy='36' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   1. Ambiance de page
   ========================================================================== */

body {
  background-color: var(--surface-page);
  background-image: var(--wash-top), var(--wash-left), var(--wash-bottom);
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Arabesques fixes dans les angles de la fenêtre */
body::before,
body::after {
  content: '';
  position: fixed;
  width: min(38vw, 460px);
  height: min(38vw, 460px);
  background: var(--ornament-corner) no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
  opacity: .17;
}

body::before {
  top: -60px;
  right: -70px;
  transform: scaleX(-1);
}

body::after {
  bottom: -80px;
  left: -80px;
  transform: scaleY(-1);
}

#root {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   2. Barre de contact + navigation
   ========================================================================== */

.top-navbar {
  background: linear-gradient(94deg, var(--orange-700) 0%, var(--orange-500) 58%, var(--orange-400) 100%);
  color: var(--white);
  padding: 9px var(--space-6);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}

.top-navbar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ornament-tile) repeat;
  opacity: .07;
  pointer-events: none;
}

.top-navbar .contact-info span,
.top-navbar .social-icons a {
  color: var(--white);
  position: relative;
  z-index: 1;
}

.top-navbar .contact-info span svg {
  color: rgba(255, 255, 255, .85);
}

.top-navbar .social-icons a:hover {
  color: var(--white);
  opacity: .8;
}

.nav-divider {
  display: none;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--gutter);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--border-card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  transition: box-shadow var(--dur-fast, .18s) ease, padding var(--dur-fast, .18s) ease;
}

.navbar.is-stuck {
  box-shadow: 0 10px 28px rgba(86, 52, 16, .10);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.logo {
  height: 52px;
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.nav-links > a,
.nav-links .dropdown > a {
  position: relative;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font: var(--weight-semibold) var(--text-sm) / 1 var(--font-body);
  color: var(--text-body);
  letter-spacing: .01em;
  white-space: nowrap;
}

.nav-links > a:hover,
.nav-links .dropdown > a:hover {
  color: var(--brand);
  background: var(--brand-soft);
  text-decoration: none;
}

.nav-links a.activePage {
  color: var(--brand);
}

.nav-links a.activePage::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

/* Boutons d'action du header */
.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-3);
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-card);
}

.nav-links a.btn-ghost,
.nav-links a.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h-md);
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font: var(--weight-bold) var(--text-sm) / 1 var(--font-display);
  white-space: nowrap;
}

.nav-links a.btn-ghost {
  color: var(--brand);
  border: 1.5px solid var(--brand-soft-border);
  background: var(--white);
}

.nav-links a.btn-ghost:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-press);
  text-decoration: none;
}

.nav-links a.btn-solid {
  color: var(--text-on-brand);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-brand);
  border: none;
}

.nav-links a.btn-solid:hover {
  color: var(--text-on-brand);
  filter: brightness(1.04);
  transform: translateY(-1px);
  text-decoration: none;
}

.dropdown-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-float);
  padding: var(--space-2);
  overflow: hidden;
}

.dropdown-content a {
  border-radius: var(--radius-sm);
  font: var(--weight-medium) var(--text-sm) / 1.2 var(--font-body);
  padding: 10px 12px;
}

.dropdown-content a:hover {
  background: var(--brand-soft);
  color: var(--brand-press);
}

/* ==========================================================================
   3. Rythme des sections & titres
   ========================================================================== */

.home-wrapper,
.home-wrapper-pages {
  position: relative;
}

.kicker {
  letter-spacing: var(--tracking-kicker);
}

h1,
h2,
h3 {
  letter-spacing: -.025em;
}

.section-head {
  display: grid;
  gap: var(--space-2);
  max-width: 760px;
  margin: 0 auto var(--space-10);
  text-align: center;
}

.section-head h2 {
  font: var(--weight-black) clamp(26px, 3.2vw, var(--text-3xl)) / 1.08 var(--font-display);
  text-transform: uppercase;
}

.section-head .section-sub {
  font: var(--weight-semibold) var(--text-md) / 1.4 var(--font-display);
  color: var(--brand);
}

.section-head p {
  color: var(--text-muted);
}

.section-head--left {
  margin-left: 0;
  text-align: left;
}

/* Titres de pages intérieures */
.page-title {
  position: relative;
  overflow: hidden;
  padding: var(--space-16) 0 var(--space-12);
  isolation: isolate;
}

.page-title::before {
  content: '';
  position: absolute;
  inset: auto -8% -55% auto;
  right: -6%;
  width: 620px;
  height: 320px;
  background: var(--ornament-sweep) no-repeat center / contain;
  opacity: .22;
  z-index: -1;
}

.page-title-text h2 {
  font: var(--weight-black) clamp(30px, 4.4vw, 46px) / 1.05 var(--font-display);
  text-transform: uppercase;
}

.page-title-text > p {
  font: var(--weight-semibold) var(--text-md) / 1.45 var(--font-display);
  color: var(--brand);
  max-width: 620px;
}

/* ==========================================================================
   4. Héros de la page d'accueil
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(36px, 5vw, 68px) 0 clamp(80px, 8vw, 118px);
}

.hero-content {
  max-width: 620px;
}

.hero h1 {
  font: var(--weight-black) clamp(34px, 5.1vw, 62px) / 1.02 var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.03em;
  margin-bottom: var(--space-5);
}

.hero h1 .accent {
  color: var(--brand);
  display: block;
}

.hero p {
  font: var(--weight-regular) var(--text-md) / 1.6 var(--font-body);
  color: var(--text-muted);
  max-width: 30em;
  margin-bottom: var(--space-8);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h-lg);
  padding: 0 26px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  color: var(--text-on-brand);
  font: var(--weight-bold) var(--text-sm) / 1 var(--font-display);
  letter-spacing: .02em;
  box-shadow: var(--shadow-brand);
  border: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.hero-btn:hover {
  color: var(--text-on-brand);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(229, 115, 1, .34);
  filter: brightness(1.03);
  text-decoration: none;
}

.hero-btn + .hero-btn {
  background: var(--white);
  color: var(--text-strong);
  border: 1.5px solid var(--border-card);
  box-shadow: var(--shadow-sm);
}

.hero-btn + .hero-btn:hover {
  color: var(--brand-press);
  border-color: var(--brand-soft-border);
  background: var(--brand-soft);
  box-shadow: var(--shadow-md);
}

/* Visuel : photo + anneau + satellites d'icônes + pastille */
.hero-visual {
  position: relative;
  isolation: isolate;
}

.hero-visual::before {
  content: '';
  position: absolute;
  inset: -12% -10% -10% -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, rgba(250, 197, 132, .45), rgba(251, 247, 242, 0) 68%);
  z-index: -1;
}

.hero-visual img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: 26px;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-float);
}

.hero-visual .ds-badge-circle {
  position: absolute;
  right: -10px;
  bottom: 28px;
  width: 128px;
  height: 128px;
  border: 5px solid var(--surface-page);
  z-index: 3;
}

.hero-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hero-orbit .orb {
  position: absolute;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--white);
  color: var(--brand);
  border: 1px solid var(--brand-soft-border);
  box-shadow: 0 10px 24px rgba(86, 52, 16, .14), 0 0 0 8px rgba(229, 115, 1, .07);
  animation: orbFloat 6s ease-in-out infinite;
}

.hero-orbit .orb:nth-child(1) { top: 4%;  right: -14px; animation-delay: 0s; }
.hero-orbit .orb:nth-child(2) { top: 28%; right: -30px; animation-delay: .8s; }
.hero-orbit .orb:nth-child(3) { top: 52%; right: -18px; animation-delay: 1.6s; }
.hero-orbit .orb:nth-child(4) { top: 12%; left: -26px;  animation-delay: 2.4s; }

@keyframes orbFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (max-width: 999px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
    padding-bottom: clamp(64px, 12vw, 96px);
  }

  .hero-visual .ds-badge-circle {
    width: 96px;
    height: 96px;
    right: 8px;
    bottom: 12px;
  }

  .hero-orbit .orb {
    width: 44px;
    height: 44px;
  }

  .hero-orbit .orb:nth-child(2),
  .hero-orbit .orb:nth-child(4) { display: none; }
}

/* ==========================================================================
   5. Bandeau de preuve (statistiques)
   ========================================================================== */

.stats-container.is-overlap {
  max-width: var(--container-max);
  margin: clamp(-90px, -6vw, -56px) auto var(--space-16);
  padding: 0 var(--gutter);
  position: relative;
  z-index: 4;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  background: transparent;
  border: none;
  border-left: 1px solid var(--border-card);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.stat-card:first-child {
  border-left: none;
}

.stat-card:hover {
  transform: none;
  background: linear-gradient(180deg, rgba(255, 244, 233, .7), rgba(255, 255, 255, 0));
}

.stat-card .ds-halo {
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-border);
  box-shadow: none;
  width: 46px;
  height: 46px;
}

.stat-value {
  font: var(--weight-black) clamp(22px, 2.4vw, 30px) / 1 var(--font-display);
  color: var(--brand);
  margin: 0 0 4px;
}

.stat-label {
  font: var(--weight-medium) var(--text-sm) / 1.3 var(--font-body);
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card:nth-child(odd) {
    border-left: none;
  }

  .stat-card:nth-child(n + 3) {
    border-top: 1px solid var(--border-card);
  }
}

@media (max-width: 520px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { border-left: none; }
  .stat-card + .stat-card { border-top: 1px solid var(--border-card); }
}

/* ==========================================================================
   6. Grille de solutions (cartes icône + photo)
   ========================================================================== */

.solutions-section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter) var(--space-16);
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.solution-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--brand-soft-border);
}

.solution-card .sc-body {
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.solution-card .ds-tile {
  border-radius: var(--radius-md);
}

.solution-card h3 {
  font: var(--weight-bold) var(--text-md) / 1.25 var(--font-display);
}

.solution-card p {
  font: var(--type-body-sm);
  color: var(--text-muted);
}

.solution-card .sc-media {
  margin-top: auto;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}

.solution-card .sc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.solution-card:hover .sc-media img {
  transform: scale(1.06);
}

@media (max-width: 1100px) {
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ==========================================================================
   7. Page « Nos offres » : filtres + grille de cartes tarifaires
   ========================================================================== */

.offers-shell {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-16);
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.filter-pill {
  height: var(--control-h-md);
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card);
  background: var(--white);
  color: var(--text-body);
  font: var(--weight-semibold) var(--text-sm) / 1 var(--font-body);
  cursor: pointer;
  transition: all .18s ease;
}

.filter-pill:hover {
  border-color: var(--brand-soft-border);
  color: var(--brand-press);
  background: var(--brand-soft);
}

.filter-pill.active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.offer-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.offer-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--brand-soft-border);
}

.offer-card .oc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-sunken);
}

.offer-card .oc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.offer-card:hover .oc-media img {
  transform: scale(1.06);
}

.offer-card .oc-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--brand-press);
  font: var(--weight-bold) var(--text-3xs) / 1 var(--font-display);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.offer-card .oc-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;
}

.offer-card h3 {
  font: var(--weight-bold) var(--text-md) / 1.25 var(--font-display);
}

.offer-card .oc-desc {
  font: var(--type-body-sm);
  color: var(--text-muted);
}

.offer-card .oc-price {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-card);
}

.offer-card .oc-price .from {
  display: block;
  font: var(--weight-medium) var(--text-2xs) / 1.2 var(--font-body);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: 2px;
}

.offer-card .oc-price .amount {
  font: var(--weight-black) var(--text-lg) / 1.1 var(--font-display);
  color: var(--text-strong);
}

.offer-card .oc-price .unit {
  font: var(--weight-medium) var(--text-sm) / 1 var(--font-body);
  color: var(--text-muted);
}

.offer-card .link-arrow {
  margin-top: var(--space-3);
  font: var(--weight-bold) var(--text-sm) / 1 var(--font-display);
}

@media (max-width: 1100px) { .offer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .offer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   8. Blocs éditoriaux : split média/texte, listes à puces, étapes
   ========================================================================== */

.split {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.split--reverse .split-media { order: 2; }

.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-float);
}

.split-text h2 {
  font: var(--weight-black) clamp(24px, 3vw, 36px) / 1.1 var(--font-display);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.split-text p {
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.check-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-6);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font: var(--weight-medium) var(--text-base) / 1.45 var(--font-body);
  color: var(--text-body);
}

.check-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
}

/* Cartes « bénéfices » compactes */
.mini-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-16);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.mini-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.mini-card h4 {
  font: var(--weight-bold) var(--text-base) / 1.25 var(--font-display);
  color: var(--text-strong);
  margin: 0 0 2px;
}

.mini-card p {
  font: var(--weight-regular) var(--text-xs) / 1.4 var(--font-body);
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 1000px) { .mini-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .mini-grid { grid-template-columns: 1fr; } }

/* Étapes numérotées 01 → 04 */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  counter-reset: step;
}

.step-card {
  position: relative;
  padding: var(--space-6) var(--space-5);
  background: var(--white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.step-card .step-num {
  display: block;
  font: var(--weight-black) var(--text-xl) / 1 var(--font-display);
  color: var(--brand-soft-border);
  margin-bottom: var(--space-3);
}

.step-card h4 {
  font: var(--weight-bold) var(--text-base) / 1.25 var(--font-display);
  color: var(--text-strong);
  margin: var(--space-3) 0 var(--space-2);
}

.step-card p {
  font: var(--type-body-sm);
  color: var(--text-muted);
}

.step-card::after {
  content: '';
  position: absolute;
  top: var(--space-6);
  right: var(--space-5);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-border);
}

@media (max-width: 1000px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .steps-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   9. Bandes : ICT (orange) & panneau sombre
   ========================================================================== */

.ds-duo {
  max-width: var(--container-max);
  margin: 0 auto var(--space-16);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: var(--space-5);
  align-items: stretch;
}

.ds-band-ict {
  position: relative;
  overflow: hidden;
  background: var(--gradient-brand);
  color: var(--text-on-brand);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  box-shadow: 0 18px 44px rgba(229, 115, 1, .24);
  display: grid;
  gap: var(--space-8);
  align-content: center;
}

.ds-band-ict::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ornament-tile) repeat;
  opacity: .1;
  pointer-events: none;
}

.ds-band-ict > * {
  position: relative;
  z-index: 1;
}

.ds-band-ict .kicker {
  color: rgba(255, 255, 255, .82);
}

.ds-band-ict h3 {
  font: var(--weight-black) clamp(22px, 2.6vw, 32px) / 1.14 var(--font-display);
  color: var(--white);
  max-width: 18ch;
}

.ds-ict-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.ds-ict-item {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  font: var(--weight-semibold) var(--text-sm) / 1.3 var(--font-body);
  color: var(--white);
}

.ds-ict-item .ds-halo {
  background: rgba(255, 255, 255, .16);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

.ds-panel-dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1E1712 0%, var(--surface-dark) 62%);
  color: var(--text-on-dark);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-3);
  align-content: center;
  box-shadow: var(--shadow-lg);
}

.ds-panel-dark::before {
  content: '';
  position: absolute;
  right: -70px;
  bottom: -80px;
  width: 280px;
  height: 280px;
  background: var(--ornament-corner) no-repeat center / contain;
  opacity: .2;
  transform: scaleY(-1);
  pointer-events: none;
}

.ds-panel-dark > * {
  position: relative;
  z-index: 1;
}

.ds-panel-dark h3 {
  color: var(--white);
  font: var(--weight-bold) var(--text-lg) / 1.25 var(--font-display);
  margin-bottom: var(--space-4);
}

.ds-contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  color: var(--text-on-dark);
  transition: background .18s ease, transform .18s ease;
}

.ds-contact-row:hover {
  background: rgba(255, 255, 255, .1);
  transform: translateX(3px);
  text-decoration: none;
  color: var(--white);
}

.ds-contact-value {
  font: var(--weight-bold) var(--text-sm) / 1.2 var(--font-display);
  color: var(--white);
}

.ds-contact-label {
  font: var(--weight-regular) var(--text-xs) / 1.3 var(--font-body);
  color: rgba(246, 241, 236, .62);
}

@media (max-width: 1000px) {
  .ds-duo { grid-template-columns: 1fr; }
  .ds-ict-list { grid-template-columns: repeat(2, 1fr); }
  .ds-band-ict { padding: var(--space-8); }
}

/* ==========================================================================
   10. Bandeau CTA & bandeau de confiance
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  max-width: calc(var(--container-max) - 0px);
  margin: 0 auto var(--space-16);
  padding: clamp(40px, 6vw, 64px) var(--space-8);
  border-radius: var(--radius-2xl);
  background: linear-gradient(150deg, #201812 0%, #12100D 70%);
  color: var(--text-on-dark);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.cta-band::before,
.cta-band::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: var(--ornament-corner) no-repeat center / contain;
  opacity: .16;
  pointer-events: none;
}

.cta-band::before { top: -50px; left: -60px; transform: rotate(180deg); }
.cta-band::after  { bottom: -60px; right: -60px; transform: scaleY(-1); }

.cta-band h2 {
  position: relative;
  z-index: 1;
  color: var(--white);
  font: var(--weight-black) clamp(24px, 3vw, 34px) / 1.14 var(--font-display);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.cta-band p {
  position: relative;
  z-index: 1;
  color: rgba(246, 241, 236, .72);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}

.cta-band-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: var(--control-h-lg);
  padding: 0 30px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  color: var(--text-on-brand);
  font: var(--weight-bold) var(--text-sm) / 1 var(--font-display);
  letter-spacing: .02em;
  box-shadow: var(--shadow-brand);
  border: none;
}

.cta-band-btn:hover {
  color: var(--text-on-brand);
  transform: translateY(-2px);
  text-decoration: none;
}

.ds-trust {
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
  background: rgba(255, 255, 255, .55);
  margin-bottom: var(--space-16);
}

.ds-trust-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
  justify-content: center;
}

.ds-trust .kicker {
  margin: 0;
  flex: 0 0 auto;
}

.ds-trust-name {
  font: var(--weight-semibold) var(--text-sm) / 1.2 var(--font-display);
  color: var(--text-muted);
  letter-spacing: .01em;
}

.ds-trust-logo {
  height: 34px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .68;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.ds-trust-logo:hover {
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

/* ==========================================================================
   11. Polissage global des cartes existantes
   ========================================================================== */

.feature-card,
.card,
.adv-card,
.why-card,
.service-card,
.product-card,
.starlink-product-card,
.contact-card,
.faq-item,
.team-card,
.ilnet-content,
.agencies-container,
.form-section,
.ds-step {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.feature-card:hover,
.card:hover,
.adv-card:hover,
.why-card:hover,
.service-card:hover,
.product-card:hover,
.starlink-product-card:hover,
.contact-card:hover,
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--brand-soft-border);
}

.feature-img,
.card-img,
.adv-img,
.product-img,
.service-image,
.starlink-product-image,
.team-img,
.gallery-item,
.ilnet-image img,
.who-image img,
.our-image img,
.image-section img {
  border-radius: var(--radius-lg);
}

.values .value-item {
  background: var(--white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-4);
  transition: transform .22s ease, box-shadow .22s ease;
}

.values .value-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}

.chooseus {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.tab-btn.active {
  background: var(--gradient-brand);
  color: var(--text-on-brand);
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}

.more-btn,
.contact-form button,
.iptvHero button,
.iptvDownload button,
.download-the-app button {
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-brand);
  border: none;
}

.more-btn:hover,
.contact-form button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

/* Formulaires */
.contact-form input,
.contact-form textarea,
.field input,
.field select {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  background: var(--white);
  font: var(--type-body-sm);
  padding: 12px 14px;
  color: var(--text-strong);
  width: 100%;
}

.contact-form input:focus,
.contact-form textarea:focus,
.field input:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 4px rgba(229, 115, 1, .12);
}

/* Carte de connexion « Espace client » */
.login-card {
  background: var(--white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-4);
  max-width: 440px;
}

.login-card h3 {
  font: var(--weight-black) var(--text-lg) / 1.2 var(--font-display);
  text-transform: uppercase;
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-body);
  color: var(--text-muted);
}

.login-card .hero-btn {
  width: 100%;
  justify-content: center;
}

.login-hint {
  font: var(--type-body-sm);
  color: var(--text-muted);
  text-align: center;
}

/* ==========================================================================
   12. Pied de page
   ========================================================================== */

.ilnet-description-container {
  background: transparent;
  border-top: 1px solid var(--border-card);
}

.ilnet-footer-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1C1611 0%, #100E0B 68%);
  color: var(--text-on-dark);
  padding-top: var(--space-16);
}

.ilnet-footer-container::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -70px;
  width: 340px;
  height: 340px;
  background: var(--ornament-corner) no-repeat center / contain;
  opacity: .18;
  transform: scaleX(-1);
  pointer-events: none;
}

.ilnet-footer-grid,
.ilnet-footer-container .line,
.ilnet-footer-container .copy {
  position: relative;
  z-index: 1;
}

.ilnet-footer-title {
  color: var(--white);
  font: var(--weight-bold) var(--text-2xs) / 1.2 var(--font-display);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.ilnet-footer-link {
  color: rgba(246, 241, 236, .68);
  font: var(--type-body-sm);
}

.ilnet-footer-link:hover {
  color: var(--brand);
  text-decoration: none;
  padding-left: 3px;
}

.footer-signoff {
  color: rgba(246, 241, 236, .7);
  font: var(--weight-semibold) var(--text-sm) / 1.5 var(--font-display);
}

.ilnet-footer-logo {
  filter: brightness(0) invert(1);
  opacity: .95;
}

.ilnet-footer-container .line {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin: var(--space-10) auto 0;
}

.ilnet-footer-container .copy {
  color: rgba(246, 241, 236, .5);
  font: var(--weight-regular) var(--text-xs) / 1.4 var(--font-body);
  padding: var(--space-5) 0;
  text-align: center;
}

/* ==========================================================================
   13. Animations d'apparition
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-orbit .orb { animation: none; }
}

/* ==========================================================================
   14. Mobile
   ========================================================================== */

@media (max-width: 1180px) {
  .nav-links > a,
  .nav-links .dropdown > a { padding: 10px 9px; font-size: var(--text-xs); }
  .nav-links a.btn-ghost,
  .nav-links a.btn-solid { padding: 0 14px; font-size: var(--text-xs); }
}

@media (max-width: 999px) {
  .navbar {
    position: relative;
    flex-wrap: wrap;
  }

  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-card);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-cta {
    flex-direction: column;
    align-items: stretch;
    margin: var(--space-3) 0 0;
    padding: var(--space-3) 0 0;
    border-left: none;
    border-top: 1px solid var(--border-card);
  }

  .nav-links a.btn-ghost,
  .nav-links a.btn-solid {
    justify-content: center;
    height: var(--control-h-lg);
    font-size: var(--text-sm);
  }

  .hamburger { margin-left: auto; }

  body::before,
  body::after { opacity: .1; }

  .cta-band { border-radius: var(--radius-xl); margin-left: var(--space-4); margin-right: var(--space-4); }
}

/* ==========================================================================
   15. Icônes intégrées (data-URI) — aucune dépendance à un CDN externe
   ========================================================================== */

.ds-i-network { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x=%2216%22 y=%2216%22 width=%226%22 height=%226%22 rx=%221%22/><rect x=%222%22 y=%2216%22 width=%226%22 height=%226%22 rx=%221%22/><rect x=%229%22 y=%222%22 width=%226%22 height=%226%22 rx=%221%22/><path d=%22M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3%22/><path d=%22M12 12V8%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x=%2216%22 y=%2216%22 width=%226%22 height=%226%22 rx=%221%22/><rect x=%222%22 y=%2216%22 width=%226%22 height=%226%22 rx=%221%22/><rect x=%229%22 y=%222%22 width=%226%22 height=%226%22 rx=%221%22/><path d=%22M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3%22/><path d=%22M12 12V8%22/></svg>"); }
.ds-i-users { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22/><circle cx=%229%22 cy=%227%22 r=%224%22/><path d=%22M22 21v-2a4 4 0 0 0-3-3.87%22/><path d=%22M16 3.13a4 4 0 0 1 0 7.75%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22/><circle cx=%229%22 cy=%227%22 r=%224%22/><path d=%22M22 21v-2a4 4 0 0 0-3-3.87%22/><path d=%22M16 3.13a4 4 0 0 1 0 7.75%22/></svg>"); }
.ds-i-shield { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z%22/><path d=%22m9 12 2 2 4-4%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z%22/><path d=%22m9 12 2 2 4-4%22/></svg>"); }
.ds-i-headphones { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3%22/></svg>"); }
.ds-i-globe { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><path d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/><path d=%22M2 12h20%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><path d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/><path d=%22M2 12h20%22/></svg>"); }
.ds-i-cloud { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z%22/></svg>"); }
.ds-i-phone { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z%22/></svg>"); }
.ds-i-chat { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M7.9 20A9 9 0 1 0 4 16.1L2 22Z%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M7.9 20A9 9 0 1 0 4 16.1L2 22Z%22/></svg>"); }
.ds-i-mail { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x=%222%22 y=%224%22 width=%2220%22 height=%2216%22 rx=%222%22/><path d=%22m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x=%222%22 y=%224%22 width=%2220%22 height=%2216%22 rx=%222%22/><path d=%22m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%22/></svg>"); }
.ds-i-house { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M3 10.5 12 3l9 7.5%22/><path d=%22M5 9.5V21h14V9.5%22/><path d=%22M9 21v-6h6v6%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M3 10.5 12 3l9 7.5%22/><path d=%22M5 9.5V21h14V9.5%22/><path d=%22M9 21v-6h6v6%22/></svg>"); }
.ds-i-building { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x=%224%22 y=%222%22 width=%2216%22 height=%2220%22 rx=%222%22/><path d=%22M9 22v-4h6v4%22/><path d=%22M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x=%224%22 y=%222%22 width=%2216%22 height=%2220%22 rx=%222%22/><path d=%22M9 22v-4h6v4%22/><path d=%22M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01%22/></svg>"); }
.ds-i-lightbulb { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.8.8 1.3 1.5 1.5 2.5%22/><path d=%22M9 18h6%22/><path d=%22M10 22h4%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.8.8 1.3 1.5 1.5 2.5%22/><path d=%22M9 18h6%22/><path d=%22M10 22h4%22/></svg>"); }
.ds-i-handshake { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22m9 12 2 2 4-4%22/><path d=%22M12 2.5 14.4 4.8 17.6 4.3 18.2 7.5 21 9l-1.4 2.9L21 15l-2.8 1.5-.6 3.2-3.2-.5L12 21.5 9.6 19.2l-3.2.5-.6-3.2L3 15l1.4-2.9L3 9l2.8-1.5.6-3.2 3.2.5z%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22m9 12 2 2 4-4%22/><path d=%22M12 2.5 14.4 4.8 17.6 4.3 18.2 7.5 21 9l-1.4 2.9L21 15l-2.8 1.5-.6 3.2-3.2-.5L12 21.5 9.6 19.2l-3.2.5-.6-3.2L3 15l1.4-2.9L3 9l2.8-1.5.6-3.2 3.2.5z%22/></svg>"); }
.ds-i-clipboard { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x=%228%22 y=%222%22 width=%228%22 height=%224%22 rx=%221%22/><path d=%22M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2%22/><path d=%22M9 12h6M9 16h6%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x=%228%22 y=%222%22 width=%228%22 height=%224%22 rx=%221%22/><path d=%22M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2%22/><path d=%22M9 12h6M9 16h6%22/></svg>"); }
.ds-i-wrench { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z%22/></svg>"); }
.ds-i-smile { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><path d=%22M8 14s1.5 2 4 2 4-2 4-2%22/><path d=%22M9 9h.01M15 9h.01%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><path d=%22M8 14s1.5 2 4 2 4-2 4-2%22/><path d=%22M9 9h.01M15 9h.01%22/></svg>"); }
.ds-i-tv { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x=%222%22 y=%227%22 width=%2220%22 height=%2215%22 rx=%222%22/><path d=%22m17 2-5 5-5-5%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x=%222%22 y=%227%22 width=%2220%22 height=%2215%22 rx=%222%22/><path d=%22m17 2-5 5-5-5%22/></svg>"); }
.ds-i-zap { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M13 2 3 14h9l-1 8 10-12h-9z%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M13 2 3 14h9l-1 8 10-12h-9z%22/></svg>"); }
.ds-i-gauge { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22m12 14 4-4%22/><path d=%22M3.34 19a10 10 0 1 1 17.32 0%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22m12 14 4-4%22/><path d=%22M3.34 19a10 10 0 1 1 17.32 0%22/></svg>"); }
.ds-i-satellite { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M4 10a7.31 7.31 0 0 0 10 10Z%22/><path d=%22m9 15 3-3%22/><path d=%22M17 13a6 6 0 0 0-6-6%22/><path d=%22M21 13A10 10 0 0 0 11 3%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d=%22M4 10a7.31 7.31 0 0 0 10 10Z%22/><path d=%22m9 15 3-3%22/><path d=%22M17 13a6 6 0 0 0-6-6%22/><path d=%22M21 13A10 10 0 0 0 11 3%22/></svg>"); }
.ds-i-clock { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><path d=%22M12 6v6l4 2%22/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><path d=%22M12 6v6l4 2%22/></svg>"); }

/* ==========================================================================
   16. Finitions : carrousel d'accueil, bandeau ICT, confiance, pied de page
   ========================================================================== */

.features-wrapper {
  background: transparent;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-16);
}

.features-tabs {
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.tab-btn {
  height: var(--control-h-md);
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card);
  background: var(--white);
  font: var(--weight-semibold) var(--text-sm) / 1 var(--font-body);
  color: var(--text-body);
}

.feature-card { padding: var(--space-3); }

.feature-content { align-items: center; gap: var(--space-5); }

.feature-text .title {
  font: var(--weight-bold) var(--text-md) / 1.25 var(--font-display);
  color: var(--text-strong);
}

.feature-text .btn {
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-brand);
  border: none;
}

.nav-btn {
  border-radius: 50%;
  border: 1px solid var(--border-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--brand);
}

.nav-btn:hover:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--brand-soft-border);
}

/* Pourquoi nous choisir */
.chooseus {
  max-width: var(--container-max);
  margin: 0 auto var(--space-16);
  border: 1px solid var(--border-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.chooseus-title {
  font: var(--weight-black) clamp(24px, 3vw, 34px) / 1.1 var(--font-display);
  text-transform: uppercase;
}

.chooseus-item + .chooseus-item { margin-top: var(--space-5); }

/* Bandeau ICT : pas de césure, items alignés à gauche */
.ds-band-ict h3 {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  max-width: 22ch;
}

.ds-ict-item {
  text-align: left;
  align-content: start;
}

/* Bandeau de confiance */
.ds-trust-inner { gap: clamp(14px, 2.4vw, 34px); }

.ds-trust-name { max-width: 15ch; text-align: center; }

.ds-trust-logo {
  height: 30px;
  padding: 6px 10px;
  background: var(--white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  box-sizing: content-box;
}

/* Signature avant le pied de page */
.ilnet-description-container {
  padding: var(--space-10) var(--gutter);
}

.ilnet-description-text {
  font: var(--weight-semibold) var(--text-md) / 1.4 var(--font-display);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.ilnet-footer-logo {
  width: 180px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
  margin-bottom: var(--space-4);
}

/* Boutons flottants (WhatsApp / chatbot) */
.whatsapp-float,
.chatbot-toggle {
  box-shadow: var(--shadow-float);
}

.chatbot-toggle {
  background: var(--gradient-brand);
  color: var(--white);
}

.chatbot-header {
  background: var(--gradient-brand);
  color: var(--white);
}

/* Cartes contact & agences */
.contact-card { padding: var(--space-5); gap: var(--space-4); }

.agency-row { padding: var(--space-5); }

.agency-name {
  font: var(--weight-bold) var(--text-base) / 1.3 var(--font-display);
  color: var(--text-strong);
}

.map-container {
  max-width: var(--container-max);
  margin: 0 auto var(--space-16);
  padding: 0 var(--gutter);
}

.map-container iframe {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
  display: block;
}

/* Héros des pages Énergie / Starlink / IPTV */
.energyHero,
.starlinkHero,
.iptvHero,
.iptvDownload {
  border-radius: var(--radius-2xl);
  max-width: var(--container-max);
  margin: var(--space-8) auto var(--space-12);
  overflow: hidden;
}

.energyHero .hero-title,
.starlinkHero .hero-title,
.iptvHero .hero-title {
  font: var(--weight-black) clamp(30px, 4.4vw, 52px) / 1.05 var(--font-display);
  text-transform: uppercase;
}

/* FAQ */
.faq-item { padding: var(--space-5); }

.faq-question {
  font: var(--weight-semibold) var(--text-base) / 1.35 var(--font-display);
  color: var(--text-strong);
}

.faq-icon {
  color: var(--brand);
  font-size: var(--text-lg);
}

/* Bandeau de statistiques posé (pages intérieures, sans chevauchement) */
.stats-container.is-plain {
  max-width: var(--container-max);
  margin: 0 auto var(--space-16);
  padding: 0 var(--gutter);
}

/* L'étape numérotée n'a pas besoin de pastille décorative supplémentaire */
.step-card::after { display: none; }

/* ==========================================================================
   17. Corrections de détail (carrousel services, IPTV, cartes contact)
   ========================================================================== */

/* Carrousel de la page Services : cartes de hauteur homogène, sans débordement */
.carousel { padding: var(--space-10) var(--gutter); }

.carousel-track { align-items: stretch; }

.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  margin: 0 var(--space-2);
  min-height: 0;
}

.card .card-desc { margin-top: 0; }

.img-and-title { gap: var(--space-3); margin-bottom: var(--space-3); }

.card-img { margin: 0; }

.pagination .dot { cursor: pointer; }

/* Section « avantages » de la page IPTV : passage sur fond clair pour que les
   pictogrammes noirs restent lisibles et cohérents avec le reste du site. */
.iptv-advantages {
  background: transparent;
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
}

.iptv-advantages .advantages-title { color: var(--text-strong); }

.iptv-advantages .adv-card {
  background: var(--white);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

.iptv-advantages .adv-card:hover {
  border-color: var(--brand-soft-border);
  box-shadow: var(--shadow-card-hover);
}

.iptv-advantages .adv-card-title { color: var(--text-strong); }

.iptv-advantages .adv-details { color: var(--text-muted); }

/* Titres de section homogènes sur les pages internes */
.advantages-title,
.services-title,
.why-title,
.gallery-title,
.faq-title,
.partners-title,
.team-title,
.starlink-products-title,
.dia-container h2 {
  font: var(--weight-black) clamp(24px, 3vw, 34px) / 1.12 var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.025em;
}

/* Cartes contact : icône alignée sur la première ligne de texte */
.contact-card { align-items: flex-start; }

.contact-info h3 {
  font: var(--weight-bold) var(--text-base) / 1.3 var(--font-display);
  color: var(--text-strong);
}

/* Le carrousel ne laisse plus dépasser la carte suivante dans la gouttière */
.carousel { clip-path: inset(0 var(--gutter)); }

.carousel-track { align-items: flex-start; }

.card { min-height: 190px; }

@media (max-width: 767px) {
  .carousel { clip-path: inset(0 var(--space-4)); }
  .card { min-height: 0; }
}