/* =========================================================================
   JAWAB — feuille de style autonome.

   Volontairement independante de css/main.css de l'agence : ce site n'a pas
   Lenis, pas GSAP, pas de curseur personnalise. Une page qui doit convertir
   sur un telephone marocain en 3G ne peut pas dependre de trois bibliotheques.
   Les jetons de couleur et de typographie sont repris a l'identique de la
   charte SeePath pour que les deux sites restent de la meme famille.
   ========================================================================= */

:root {
  --bg: #FFFFFF;
  --ink: #0A0A0A;
  --ink-soft: #1A1A1A;
  --red: #FF2D2D;
  --red-deep: #D70015;
  --muted: #6B6B6B;
  --line: rgba(10, 10, 10, 0.10);
  --line-w: rgba(255, 255, 255, 0.14);
  --vert-wa: #25D366;

  --f-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad-x: clamp(20px, 5vw, 88px);
  --pad-y: clamp(64px, 10vw, 140px);
  --rayon: 14px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }

/* Accessibilite : un lien focus au clavier doit rester visible. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- structure */
.enveloppe { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad-x); }
section { padding: var(--pad-y) 0; }
.sombre { background: var(--ink); color: #fff; }
.sombre .surtitre { color: var(--red); }

.surtitre {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
  font-weight: 500;
}

h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; font-weight: 650; }
h1 { font-size: clamp(34px, 6.4vw, 68px); }
h2 { font-size: clamp(28px, 4.6vw, 46px); }
h3 { font-size: clamp(19px, 2.2vw, 23px); letter-spacing: -0.01em; }

.chapeau {
  font-size: clamp(17px, 2.1vw, 21px);
  color: var(--muted);
  max-width: 60ch;
  margin-top: 20px;
  line-height: 1.5;
}
.sombre .chapeau { color: rgba(255, 255, 255, 0.66); }

/* ---------------------------------------------------------------- en-tete */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.entete .enveloppe {
  display: flex; align-items: center; justify-content: space-between;
  height: 66px;
}
.logo { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.logo span { color: var(--red); }
.entete-liens { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.entete-liens a.discret { color: var(--muted); }
.entete-liens a.discret:hover { color: var(--ink); }
@media (max-width: 720px) { .entete-liens a.discret { display: none; } }

/* ---------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 100px;
  font-weight: 600; font-size: 16px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  white-space: nowrap;
}
.bouton:active { transform: scale(.97); }
.bouton-wa { background: var(--vert-wa); color: #fff; box-shadow: 0 6px 20px rgba(37, 211, 102, .32); }
.bouton-wa:hover { background: #1fbe5a; box-shadow: 0 8px 26px rgba(37, 211, 102, .42); }
.bouton-noir { background: var(--ink); color: #fff; }
.bouton-noir:hover { background: var(--ink-soft); }
.bouton-vide { border: 1.5px solid var(--line); color: var(--ink); }
.bouton-vide:hover { border-color: var(--ink); }
.sombre .bouton-vide { border-color: var(--line-w); color: #fff; }
.sombre .bouton-vide:hover { border-color: #fff; }
.bouton-petit { padding: 11px 20px; font-size: 15px; }

.sous-bouton {
  font-size: 14px; color: var(--muted); margin-top: 16px;
}
.sombre .sous-bouton { color: rgba(255, 255, 255, .55); }

/* ---------------------------------------------------------------- hero */
.hero { padding-top: clamp(52px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 104px); }
.hero-grille {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grille { grid-template-columns: 1fr; gap: 48px; }
}
.hero h1 { margin-bottom: 4px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.bandeau-preuve {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}
.bandeau-preuve b { color: var(--ink); font-weight: 650; }

/* ---------------------------------------------------------------- telephone */
.telephone {
  width: 100%; max-width: 340px; margin: 0 auto;
  background: #0d0d0d;
  border-radius: 34px;
  padding: 11px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .28);
}
.telephone-ecran {
  background: #ECE5DD;
  border-radius: 25px;
  overflow: hidden;
  display: flex; flex-direction: column;
  height: 546px;
}
.telephone-barre {
  background: #075E54; color: #fff;
  padding: 13px 15px;
  display: flex; align-items: center; gap: 11px;
  flex-shrink: 0;
}
.pastille {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
}
.telephone-barre .nom { font-weight: 600; font-size: 15px; line-height: 1.2; }
.telephone-barre .etat { font-size: 11.5px; opacity: .78; }

.fil {
  flex: 1; overflow-y: auto;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: none;
}
.fil::-webkit-scrollbar { display: none; }

.bulle {
  max-width: 82%;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 14.5px; line-height: 1.42;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  opacity: 0; transform: translateY(9px);
  animation: apparait .32s ease forwards;
  word-wrap: break-word;
}
@keyframes apparait { to { opacity: 1; transform: none; } }

.bulle.eux { background: #fff; align-self: flex-start; border-top-left-radius: 2px; }
.bulle.nous { background: #DCF8C6; align-self: flex-end; border-top-right-radius: 2px; }
.bulle .heure {
  display: block; text-align: right;
  font-size: 10.5px; color: rgba(0, 0, 0, .42); margin-top: 3px;
}
.bulle.bascule { background: #FFF3CD; border-left: 3px solid var(--red); }

/* Les trois points d'ecriture. */
.ecrit {
  align-self: flex-start; background: #fff;
  padding: 11px 13px; border-radius: 9px; border-top-left-radius: 2px;
  display: flex; gap: 4px;
}
.ecrit i {
  width: 6px; height: 6px; border-radius: 50%; background: #b6b6b6;
  animation: rebond 1.25s infinite;
}
.ecrit i:nth-child(2) { animation-delay: .18s; }
.ecrit i:nth-child(3) { animation-delay: .36s; }
@keyframes rebond {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.telephone-pied {
  text-align: center; font-size: 13px; color: var(--muted);
  margin-top: 18px; line-height: 1.45;
}

/* ---------------------------------------------------------------- constats */
.constats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
@media (max-width: 860px) { .constats { grid-template-columns: 1fr; } }
.constat { background: var(--bg); padding: 34px 30px; }
.constat .chiffre {
  font-family: var(--f-mono); font-size: 12px; color: var(--red);
  letter-spacing: .12em; margin-bottom: 14px;
}
.constat p { color: var(--muted); font-size: 16px; margin-top: 10px; }

/* ---------------------------------------------------------------- capacites */
.capacites { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 56px; }
@media (max-width: 1020px) { .capacites { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .capacites { grid-template-columns: 1fr; } }
.capacite { padding: 28px; border: 1px solid var(--line-w); border-radius: var(--rayon); }
.capacite .num {
  font-family: var(--f-mono); font-size: 12px; color: var(--red); margin-bottom: 16px;
}
.capacite h3 { margin-bottom: 10px; }
.capacite p { color: rgba(255, 255, 255, .62); font-size: 15.5px; }

/* ---------------------------------------------------------------- tarifs */
.tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; align-items: start; }
@media (max-width: 940px) { .tarifs { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.offre {
  border: 1px solid var(--line); border-radius: var(--rayon);
  padding: 32px 28px; background: var(--bg);
  display: flex; flex-direction: column;
}
.offre.vedette {
  border: 2px solid var(--ink); position: relative;
  box-shadow: 0 16px 46px rgba(0, 0, 0, .09);
}
.etiquette {
  position: absolute; top: -12px; left: 28px;
  background: var(--red); color: #fff;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  padding: 5px 12px; border-radius: 100px;
}
.offre .titre { font-weight: 650; font-size: 19px; }
.offre .prix { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; margin-top: 18px; line-height: 1; }
.offre .prix small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.offre .install { font-size: 14.5px; color: var(--muted); margin-top: 8px; }
.offre ul { list-style: none; margin: 26px 0 30px; display: grid; gap: 11px; }
.offre li { font-size: 15.5px; padding-left: 24px; position: relative; }
.offre li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 11px; height: 6px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}
.offre li.absent { color: #ADADAD; }
.offre li.absent::before {
  border: none; top: 10px; left: 1px;
  width: 9px; height: 2px; background: #D6D6D6; transform: none;
}
.offre .bouton { margin-top: auto; justify-content: center; }
.note-tarif { font-size: 14px; color: var(--muted); margin-top: 26px; text-align: center; }

/* ---------------------------------------------------------------- donnees */
.donnees-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 46px; }
@media (max-width: 860px) { .donnees-grille { grid-template-columns: 1fr; } }
.donnee { border: 1px solid var(--line); border-radius: var(--rayon); padding: 26px; }
.donnee h3 { font-size: 17px; margin-bottom: 9px; }
.donnee p { font-size: 15px; color: var(--muted); }

/* ---------------------------------------------------------------- faq */
.faq { max-width: 780px; margin: 46px auto 0; }
.question { border-bottom: 1px solid var(--line); }
.question summary {
  padding: 22px 40px 22px 0; cursor: pointer; position: relative;
  font-weight: 600; font-size: 17.5px; list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.question[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.question p { padding-bottom: 24px; color: var(--muted); font-size: 16px; max-width: 66ch; }

/* ---------------------------------------------------------------- final */
.final { text-align: center; }
.final h2 { max-width: 18ch; margin: 0 auto; }
.final .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------------------------------------------------------------- pied */
.pied { border-top: 1px solid var(--line); padding: 44px 0; font-size: 14.5px; color: var(--muted); }
.pied .enveloppe { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 22px; }
.pied a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- reveal */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].vu { opacity: 1; transform: none; }

/* Filet de securite : si JavaScript ne s'execute pas, rien ne doit rester
   invisible. Sans cette regle, une erreur JS rendrait la page blanche. */
.sans-js [data-reveal] { opacity: 1; transform: none; }

/* Respect du reglage systeme : certaines personnes ont mal au coeur avec les
   animations. On coupe tout, y compris le defilement de la conversation. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}