/* ==========================================================================
   Ouali Telecom — Feuille de style principale
   Theme sombre futuriste : neon, verre depoli, animations reseau/circuit.
   Mobile-first : les styles de base ciblent le mobile,
   les media queries ajoutent/adaptent pour tablette et desktop.
   ========================================================================== */

/* --- Variables de marque (bleu/orange conserves, habillage neon sombre) --- */
:root {
  --color-blue: #007ADB;
  --color-blue-light: #4DB2FF;
  --color-blue-dark: #005BA4;
  --color-orange: #FE4A01;
  --color-orange-light: #FF8A5B;
  --color-orange-dark: #C43C02;

  --color-bg: #060911;
  --color-bg-alt: #0B101B;
  --color-surface: rgba(255, 255, 255, 0.045);
  --color-surface-strong: rgba(255, 255, 255, 0.08);
  --color-border: rgba(255, 255, 255, 0.10);

  --color-text: #EDF1F8;
  --color-text-muted: #99A3B8;

  --glow-blue: 0 0 1px rgba(0, 122, 219, 0.6), 0 0 24px rgba(0, 122, 219, 0.35), 0 0 60px rgba(0, 122, 219, 0.12);
  --glow-orange: 0 0 1px rgba(254, 74, 1, 0.6), 0 0 24px rgba(254, 74, 1, 0.35), 0 0 60px rgba(254, 74, 1, 0.12);

  --font-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-width: 1140px;
  --radius: 8px;
  --transition: 0.2s ease;
}

/* --- Reset simple --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Halos de couleur fixes en arriere-plan de toute la page : donnent la
   profondeur "futuriste" sans poids (un seul degrade, position: fixed,
   ne bouge pas au scroll donc pas de repaint couteux). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(560px circle at 12% 8%, rgba(0, 122, 219, 0.16), transparent 60%),
    radial-gradient(620px circle at 88% 18%, rgba(254, 74, 1, 0.12), transparent 60%),
    radial-gradient(700px circle at 50% 100%, rgba(0, 122, 219, 0.10), transparent 60%);
  pointer-events: none;
}

/* Grille technique tres discrete, sur toute la page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, black, transparent 75%);
  mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, black, transparent 75%);
  pointer-events: none;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke-width: 1.6; /* traits plus fins : rendu icones plus chic */
}

/* Degrade de marque applique au texte, pour mettre en valeur un mot cle.
   white-space: nowrap evite qu'un dégradé sur plusieurs mots se coupe
   entre deux lignes (le rendu devient terne/illisible si ça arrive) :
   le groupe de mots passe alors entier a la ligne suivante si besoin. */
.text-gradient {
  background: linear-gradient(90deg, var(--color-blue-light) 0%, var(--color-blue-light) 40%, var(--color-orange-light) 60%, var(--color-orange-light) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  animation: gradient-shift 6s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Apparition douce au defilement. Par defaut (sans JS, ou si
   prefers-reduced-motion), le contenu reste visible : c'est le JS qui
   ajoute .reveal--pending juste avant d'observer, jamais le CSS seul,
   pour ne jamais cacher du contenu si le script ne s'execute pas. */
.reveal {
  transition: opacity 0.7s cubic-bezier(.2, .7, .3, 1), transform 0.7s cubic-bezier(.2, .7, .3, 1);
}

.reveal.reveal--pending {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
}

.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Accessibilite clavier --- */

/* Lien d'evitement : invisible jusqu'a ce qu'il recoive le focus clavier,
   permet de sauter directement au contenu sans repasser par le menu. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 2000;
  background: var(--color-blue);
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 12px;
}

/* Anneau de focus visible et coherent avec la marque, pour la navigation
   au clavier (Tab). Remplace le focus par defaut, tres discret sur fond
   sombre, par quelque chose de clairement visible. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-blue-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Empeche le defilement de la page derriere le menu mobile plein ecran */
.no-scroll {
  overflow: hidden;
}

/* --- Titres de section --- */
.section-title {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem);
  text-align: center;
  margin-bottom: 10px;
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-bottom: 40px;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue-light);
  margin-bottom: 12px;
}

.section-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: var(--glow-orange);
}

.section-header {
  text-align: center;
}

/* --- Boutons --- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), color var(--transition), background var(--transition);
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-2px);
}

/* Reflet qui balaie le bouton au survol : simple degrade anime en
   translation, tres peu coûteux (pas de repaint, uniquement un transform). */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-dark));
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(254, 74, 1, 0.22);
}

.btn--primary:hover {
  box-shadow: var(--glow-orange);
}

.btn--secondary {
  background: linear-gradient(135deg, var(--color-blue), var(--color-blue-dark));
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(0, 122, 219, 0.22);
}

.btn--secondary:hover {
  box-shadow: var(--glow-blue);
}

.btn--outline {
  background: transparent;
  border-color: var(--color-blue-light);
  color: var(--color-blue-light);
}

.btn--outline:hover {
  box-shadow: var(--glow-blue);
}

.btn--small {
  padding: 8px 18px;
  font-size: 0.9rem;
}

.link-more {
  position: relative;
  display: inline-block;
  color: var(--color-blue-light);
  font-weight: 600;
  margin-top: 8px;
}

/* Soulignement anime au survol (se dessine de gauche a droite) */
.link-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--color-orange);
  box-shadow: var(--glow-orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}

.link-more:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- Boutons icone (telephone, reseaux sociaux) --- */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-blue-light);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-blue);
  border-color: var(--color-blue-light);
}

/* Anneau "radar" qui se propage depuis l'icone : evoque un signal qui
   part (telephone, reseau). Discret, en boucle lente. */
.icon-btn--pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-orange);
  opacity: 0;
  animation: radar-ping 2.6s ease-out infinite;
}

@keyframes radar-ping {
  0% { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ==========================================================================
   EN-TETE
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}

/* Le flou est pose sur un pseudo-element derriere le contenu du header,
   plutot que sur .site-header directement : un backdrop-filter sur
   .site-header transformerait son cadre en repere de positionnement pour
   ses descendants "fixed" (le menu mobile plein ecran), ce qui casserait
   son affichage plein ecran. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(6, 9, 17, 0.6);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Effet verre depoli une fois que la page a defile (glassmorphism) */
.site-header--scrolled::before {
  background: rgba(6, 9, 17, 0.78);
  border-bottom-color: var(--color-border);
}

@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
  .site-header::before {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo__img {
  height: 36px;
  width: auto;
  display: block;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Menu de navigation : panneau plein ecran sur mobile, ferme par defaut */
.nav {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(6, 9, 17, 0.97);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 20px;
  transform: translateX(100%);
  transition: transform var(--transition);
  overflow-y: auto;
}

@supports (backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px)) {
  .nav {
    background: rgba(6, 9, 17, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}

.nav.nav--open {
  transform: translateX(0);
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav__link {
  position: relative;
  display: block;
  padding: 14px 4px;
  font-size: 1.1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition);
}

/* Soulignement anime au survol, avec lueur */
.nav__link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-blue-light), var(--color-orange));
  box-shadow: var(--glow-blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}

.nav__link:hover::after,
.nav__link--active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__link--active {
  color: var(--color-blue-light);
}

.nav__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

/* Bouton "burger" (menu mobile) */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}

.burger[aria-expanded="true"] span {
  background: var(--color-blue-light);
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 40px;
  text-align: center;
}

/* Canevas de l'animation reseau (particules connectees) : calque de fond,
   dessine et pilote par js/main.js. Purement decoratif -> aria-hidden. */
.hero__network {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.hero__badge-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: var(--glow-orange);
}

.hero__badge-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-orange);
  animation: radar-ping 1.8s ease-out infinite;
}

.hero__title {
  font-size: clamp(1.8rem, 1.35rem + 2.2vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin-bottom: 16px;
}

.hero__text {
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto 28px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}

.hero__shop-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-blue-light);
}

.hero__shop-link:hover {
  text-decoration: underline;
}

.hero__shop-link svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition);
}

.hero__shop-link:hover svg {
  transform: translateX(3px);
}

/* Puces techniques flottantes : purement decoratives (cachees aux
   lecteurs d'ecran), masquees sur mobile pour eviter l'encombrement. */
.hero__chip {
  display: none;
}

@media (min-width: 900px) {
  .hero {
    padding: 0;
    min-height: 640px;
    display: flex;
    align-items: center;
  }

  .hero__chip {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    z-index: 2;
    padding: 10px 16px;
    border-radius: 14px;
    background: var(--color-surface-strong);
    border: 1px solid var(--color-border);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    animation: float-chip 6s ease-in-out infinite;
  }

  @supports (backdrop-filter: blur(12px)) {
    .hero__chip {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
  }

  .hero__chip svg {
    width: 18px;
    height: 18px;
  }

  .hero__chip--1 { top: 14%; left: 6%; color: var(--color-blue-light); animation-delay: 0s; }
  .hero__chip--2 { top: 66%; left: 3%; color: var(--color-orange-light); animation-delay: 1.4s; }
  .hero__chip--3 { top: 20%; right: 5%; color: var(--color-orange-light); animation-delay: 0.7s; }
  .hero__chip--4 { top: 68%; right: 7%; color: var(--color-blue-light); animation-delay: 2.1s; }
}

@keyframes float-chip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ==========================================================================
   BADGES DE CONFIANCE
   ========================================================================== */

.trust {
  padding: 32px 0;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.trust__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 0.95rem;
}

.trust__icon {
  position: relative;
  color: var(--color-orange-light);
  background: rgba(254, 74, 1, 0.10);
  border: 1px solid rgba(254, 74, 1, 0.25);
  border-radius: 50%;
  padding: 8px;
  box-sizing: content-box;
  flex-shrink: 0;
  transition: box-shadow var(--transition);
}

.trust__item:hover .trust__icon {
  box-shadow: var(--glow-orange);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */

.services {
  position: relative;
  overflow: hidden;
  padding: 56px 0;
}

/* Taches de couleur discretes en arriere-plan, animees tres lentement :
   donnent au flou des cartes quelque chose a "flouter" et un mouvement
   d'ambiance quasi imperceptible mais vivant. */
.services::before,
.services::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: drift 18s ease-in-out infinite;
}

.services::before {
  top: -100px;
  right: -100px;
  background: radial-gradient(circle, rgba(0, 122, 219, 0.20), transparent 70%);
}

.services::after {
  bottom: -120px;
  left: -100px;
  background: radial-gradient(circle, rgba(254, 74, 1, 0.16), transparent 70%);
  animation-delay: 4s;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-24px, 24px); }
}

.services > .container {
  position: relative;
  z-index: 1;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.service-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  will-change: transform;
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .service-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Barre lumineuse qui balaie le haut de la carte au survol : evoque un
   scan / signal, discret et peu coûteux (transform uniquement). */
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-blue-light), var(--color-orange-light), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), var(--glow-blue);
}

.service-card:hover::before {
  opacity: 1;
  animation: scan-line 1.6s linear infinite;
}

@keyframes scan-line {
  0% { left: -30%; }
  100% { left: 100%; }
}

.service-card__icon {
  color: var(--color-blue-light);
  background: rgba(0, 122, 219, 0.12);
  border: 1px solid rgba(0, 122, 219, 0.3);
  width: 28px;
  height: 28px;
  padding: 10px;
  border-radius: 50%;
  box-sizing: content-box;
  margin-bottom: 18px;
  transition: box-shadow var(--transition), transform var(--transition);
}

.service-card:hover .service-card__icon {
  box-shadow: var(--glow-blue);
  transform: scale(1.08) rotate(-6deg);
}

.service-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.service-card p {
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

/* ==========================================================================
   APPEL A L'ACTION BOUTIQUE
   ========================================================================== */

.shop-cta {
  padding: 48px 0;
  text-align: center;
}

.shop-cta__inner {
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  padding: 40px 28px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, var(--color-blue), var(--color-blue-dark) 55%, #071018);
}

/* Halo orange en surimpression pour rappeler les deux couleurs de marque */
.shop-cta__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px circle at 85% 120%, rgba(254, 74, 1, 0.35), transparent 60%);
  pointer-events: none;
}

.shop-cta__inner > * {
  position: relative;
  z-index: 1;
}

.shop-cta h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.shop-cta p {
  max-width: 520px;
  margin: 0 auto 24px;
  opacity: 0.9;
}

/* ==========================================================================
   A PROPOS (apercu)
   ========================================================================== */

.about-preview {
  padding: 56px 0;
}

.about-preview__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.about-preview p {
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

/* ==========================================================================
   CONTACT (apercu)
   ========================================================================== */

.contact-preview {
  padding: 56px 0;
}

.contact-preview__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 28px 0 32px;
}

@media (min-width: 480px) {
  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 11px;
  margin-bottom: 12px;
  border-radius: 50%;
  color: var(--color-blue-light);
  background: rgba(0, 122, 219, 0.12);
  border: 1px solid rgba(0, 122, 219, 0.3);
  transition: box-shadow var(--transition);
}

.contact-card:hover .contact-card__icon {
  box-shadow: var(--glow-blue);
}

.contact-card__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.contact-card__text {
  font-weight: 600;
}

.contact-card__text--primary {
  font-size: 1.05rem;
}

.contact-card__text--secondary {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.contact-card a:hover {
  text-decoration: underline;
}

.contact-card__map-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-blue-light);
}

.contact-card__map-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition);
}

.contact-card__map-link:hover svg {
  transform: translateX(3px);
}

/* Carte interactive (itineraire) : hauteur fixe mobile-first, agrandie
   sur desktop. loading="lazy" sur l'iframe evite de charger la carte
   avant que l'utilisateur n'arrive sur cette section. */
.map-embed {
  margin: 32px 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
  height: 240px;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* Google Maps n'a pas de mode sombre natif sans cle API : cette astuce
     (inversion + rotation de teinte) rapproche la carte du theme sombre
     du site sans script supplementaire. */
  filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

.contact-preview__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */

.site-footer {
  background: #030509;
  color: #FFFFFF;
  padding: 40px 0 24px;
  border-top: 1px solid var(--color-border);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

.footer__brand p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 4px;
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__nav a {
  transition: color var(--transition);
}

.footer__nav a:hover {
  color: var(--color-orange-light);
}

.footer__social {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.footer__social .icon-btn {
  background: rgba(255, 255, 255, 0.06);
}

.footer__copy {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* ==========================================================================
   TABLETTE ET DESKTOP (min-width: 768px)
   ========================================================================== */

@media (min-width: 768px) {
  .burger {
    display: none;
  }

  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    background: none;
    padding: 0;
    transform: none;
    transition: none;
    overflow: visible;
    width: auto;
  }

  .nav__list {
    flex-direction: row;
    gap: 28px;
  }

  .nav__link {
    padding: 4px 0;
    border-bottom: none;
    font-size: 1rem;
  }

  .nav__link::after {
    left: 0;
    right: 0;
  }

  .nav__actions {
    display: none;
  }

  .header__actions {
    gap: 12px;
  }

  .header__inner {
    height: 76px;
  }

  .logo__img {
    height: 42px;
  }

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

  .services {
    padding: 88px 0;
  }

  .services__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .shop-cta {
    padding: 72px 0;
  }

  .about-preview {
    padding: 88px 0;
  }

  .contact-preview {
    padding: 88px 0;
  }

  .contact-preview__inner {
    max-width: 900px;
  }

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

  .map-embed {
    height: 360px;
  }

  .contact-preview__actions {
    flex-direction: row;
    justify-content: center;
  }

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

  .footer__nav {
    flex-direction: row;
    gap: 20px;
  }
}

/* ==========================================================================
   PREFERENCE "MOINS DE MOUVEMENT"
   Desactive les animations decoratives en boucle pour les personnes qui
   le demandent au niveau systeme (le reveal au scroll reste gere par le
   JS, qui verifie aussi cette preference avant de masquer le contenu).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .text-gradient,
  .hero__badge-dot::after,
  .icon-btn--pulse::before,
  .hero__chip,
  .services::before,
  .services::after,
  .service-card:hover::before {
    animation: none !important;
  }

  * {
    scroll-behavior: auto !important;
  }
}