/* =========================================================================
   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 {
  /* ---------------------------------------------------------------------
     MARQUE JAWAB — passage au vert le 2026-08-02.
     Jawab devient une marque a part entiere : le rouge SeePath ne s'applique
     plus ici. Le vert n'est pas decoratif, c'est la couleur de WhatsApp — le
     visiteur fait le lien avec le canal avant meme d'avoir lu le titre.

     Deux verts, et c'est voulu : le clair manque de contraste sur blanc, le
     fonce est terne sur noir. On ne les melange jamais.
     --------------------------------------------------------------------- */
  --bg: #FFFFFF;
  --ink: #0A0A0A;
  --ink-soft: #1C1C1C;
  --creme: #F5F4F0;
  --vert: #3ECF6E;          /* sur fond sombre */
  --vert-fonce: #2BA85A;    /* sur fond clair, pour le contraste */
  --muted: #6B6B6B;
  --line: rgba(10, 10, 10, 0.10);
  --line-w: rgba(255, 255, 255, 0.14);

  /* `--red` reste defini le temps de la transition : il pointe desormais sur le
     vert, pour qu'aucune regle oubliee ne reste rouge a l'ecran. */
  --red: var(--vert-fonce);
  --vert-wa: var(--vert-fonce);

  --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: var(--creme); }
/* Sur fond sombre on remonte a la version claire du vert : le vert fonce y
   devient boueux et l'accent se perd. */
.sombre { --red: var(--vert); --vert-wa: var(--vert); }
.sombre .surtitre { color: var(--vert); }

.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); }
/* Texte NOIR sur le vert, jamais blanc : c'est la regle de la fiche de marque,
   et c'est aussi ce qui se lit le mieux sur un aplat aussi lumineux. */
.bouton-wa { background: var(--vert-wa); color: var(--ink); box-shadow: 0 6px 20px rgba(62, 207, 110, .30); }
.bouton-wa:hover { background: #34b85f; box-shadow: 0 8px 26px rgba(62, 207, 110, .42); }
.sombre .bouton-wa:hover { background: #5ada85; }
.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); }

/* Reseaux du pied de page.
   Cible de 40 px : en dessous, sur telephone, on rate le lien une fois sur
   trois. La zone cliquable depasse volontairement l'icone dessinee (20 px). */
.pied-reseaux { display: flex; gap: 6px; align-items: center; }
.pied-reseaux a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  color: var(--muted); transition: color .18s ease, background-color .18s ease;
}
.pied-reseaux svg { width: 20px; height: 20px; display: block; }
/* Le pied de page est sur fond CLAIR : c'est le vert fonce, pas le vert clair.
   La regle est ecrite en haut de ce fichier et vaut ici comme ailleurs — le
   vert clair sur blanc n'a pas assez de contraste pour etre lisible. */
.pied-reseaux a:hover { color: var(--vert-fonce); background: rgba(43, 168, 90, .09); }
/* Le focus clavier doit rester visible : sans cette regle, un utilisateur au
   clavier ne sait plus ou il se trouve dans le pied de page. */
.pied-reseaux a:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }

/* ---------------------------------------------------------------- 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; }
}

/* ---------------------------------------------------------------- tunnel
   La place de l'agent dans l'entreprise. Une liste numerotee plutot qu'un
   schema en image : ca reste lisible sur un telephone, ca se traduit, et
   ca ne pese rien a charger. */
.tunnel { list-style: none; margin-top: 44px; display: grid; gap: 1px; background: var(--line); }
.tunnel li {
  background: var(--bg); padding: 20px 26px;
  display: flex; align-items: baseline; gap: 18px;
  font-size: clamp(16px, 1.9vw, 18px);
}
.tunnel li span {
  font-family: var(--f-mono); font-size: 12px; color: var(--red);
  flex-shrink: 0; letter-spacing: .08em;
}
/* La derniere ligne est celle ou le patron reprend la main : elle doit trancher. */
.tunnel li.vous { background: var(--ink); color: #fff; font-weight: 600; }
.tunnel li.vous span { color: var(--red); }

/* =========================================================================
   DESIGN — deuxieme passe, 2026-08-02.
   Principe : la conversation est la colonne vertebrale de la page. Le produit
   se demontre a chaque section au lieu d'etre decrit. On n'ajoute AUCUN
   ornement qui ne prouve rien — le visiteur est un patron de PME marocaine,
   pas un directeur artistique.
   ========================================================================= */

/* ---------------------------------------------------------------- extrait
   Un fragment de conversation, pose dans le flux du texte. Volontairement
   statique et ecrit dans le HTML : pas de JavaScript, donc il s'affiche meme
   si le script echoue, et les moteurs de recherche le lisent. */
.extrait {
  background: #ECE5DD;
  border-radius: var(--rayon);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 7px;
  max-width: 460px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
}
.sombre .extrait { box-shadow: 0 8px 34px rgba(0, 0, 0, .40); }
.extrait .b {
  max-width: 86%;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 14.5px; line-height: 1.42;
  color: var(--ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  position: relative;
}
.extrait .b.eux  { background: #fff; align-self: flex-start; border-top-left-radius: 2px; }
.extrait .b.nous { background: #DCF8C6; align-self: flex-end; border-top-right-radius: 2px; }
.extrait .b i {
  display: block; font-style: normal; text-align: right;
  font-size: 10.5px; color: rgba(0, 0, 0, .42); margin-top: 3px;
}
/* L'etiquette de langue : elle dit au visiteur, sans phrase, que l'agent suit
   la langue du client. C'est l'argument le plus difficile a faire passer par
   du texte, et le plus simple a montrer. */
.extrait-lang {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red);
  margin-bottom: 12px; display: block;
}

/* Deux colonnes texte + extrait, qui alternent d'une section a l'autre. */
.duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 76px); align-items: center;
}
.duo.inverse > *:first-child { order: 2; }
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; gap: 34px; }
  .duo.inverse > *:first-child { order: 0; }
  .extrait { max-width: 100%; }
}

/* ---------------------------------------------------------- comparaison
   L'argument qui vend : ce que coute un salarie, en face de ce que coute
   l'agent. Deux colonnes, l'une terne, l'autre qui tranche. */
.balance {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); margin-top: 48px;
  border-radius: var(--rayon); overflow: hidden;
}
@media (max-width: 720px) { .balance { grid-template-columns: 1fr; } }
.plateau { background: var(--bg); padding: 34px 30px; }
.plateau.retenu { background: var(--ink); color: #fff; }
.plateau .qui {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
.plateau.retenu .qui { color: var(--red); }
.plateau .somme { font-size: clamp(34px, 5vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.plateau .somme small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plateau.retenu .somme small { color: rgba(255, 255, 255, .6); }
.plateau ul { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.plateau li { font-size: 15.5px; padding-left: 26px; position: relative; color: var(--muted); }
.plateau.retenu li { color: rgba(255, 255, 255, .78); }
/* Croix pour le salarie, coche pour l'agent : la difference se lit sans lire. */
.plateau li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 12px; height: 2px; background: #C9C9C9; transform: rotate(45deg);
}
.plateau li::after {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 12px; height: 2px; background: #C9C9C9; transform: rotate(-45deg);
}
.plateau.retenu li::before {
  width: 11px; height: 6px; top: 7px;
  background: none; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}
.plateau.retenu li::after { display: none; }

/* ------------------------------------------------------------- accroche
   Une phrase seule, en grand. Sert de respiration entre deux blocs denses. */
.accroche {
  font-size: clamp(26px, 4.2vw, 44px);
  font-weight: 650; letter-spacing: -.02em; line-height: 1.15;
  max-width: 20ch;
}
.accroche em { font-style: normal; color: var(--red); }

/* -------------------------------------------------------- barre collante
   Sur telephone, le bouton doit rester a portee de pouce quelle que soit la
   position dans la page. C'est la seule facon qu'un visiteur qui a fini de
   lire n'ait pas a remonter pour agir. */
.barre-collante {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 12px var(--pad-x) calc(12px + env(safe-area-inset-bottom));
  display: none;
  transform: translateY(110%);
  transition: transform .28s ease;
}
.barre-collante.visible { transform: none; }
.barre-collante .bouton { width: 100%; justify-content: center; }
@media (max-width: 860px) {
  .barre-collante { display: block; }
  /* On laisse la place a la barre pour ne pas masquer le pied de page. */
  .pied { padding-bottom: 96px; }
}

/* ---------------------------------------------------------------- logo
   Le J est INLINE dans le HTML, pas en <img> : c'est la seule facon que
   `currentColor` le teinte selon le fond. Le bloc vert, lui, garde sa
   couleur propre — il ne suit jamais le texte, sinon il disparait. */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-marque { display: block; height: 26px; }
.logo-marque svg { height: 100%; width: auto; display: block; }
.sombre .logo-marque rect, .pied .logo-marque rect { fill: #3ECF6E; }

/* La pastille de la conversation porte la marque, plus une lettre tapee. */
.pastille { background: var(--ink); padding: 8px 9px; }
.pastille svg { height: 100%; width: auto; }