/* ══════════════════════════════════════════════════════════════
   SILENS — identité visuelle

   Parti pris : fond profond presque noir avec une pointe de vert,
   une seule couleur d'accent, serif éditorial pour la voix, sans-serif
   pour le fonctionnel. Volontairement à l'opposé du bleu/violet SaaS.

   L'ONDE est le motif narratif : pleine quand le son passe, plate quand
   Silens coupe. Elle revient en fil conducteur — dans le héros, dans le
   séparateur de sections, dans le popup de l'extension.
   ══════════════════════════════════════════════════════════════ */

:root {
  --fond:     #0B0E0D;
  --surface:  #101413;
  --surface2: #151A18;
  --texte:    #ECEFEC;
  --doux:     #7E8C86;
  --tres-doux:#5A6560;
  --trait:    #1C2321;
  --accent:   #6FD39A;
  --accent-sombre: #062314;
  --serif:    "Instrument Serif", Georgia, serif;
  --sans:     "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════ entête ══════════ */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 56px);
  background: rgba(11, 14, 13, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  /* La barre du haut reste toujours logo-a-gauche / nav-a-droite, y compris
     en arabe (document en RTL) : le selecteur de langue doit rester au meme
     endroit quelle que soit la langue choisie, pour qu'on le retrouve
     facilement si on veut en changer. Le reste de la page, lui, suit
     normalement le sens de lecture (RTL pour l'arabe). */
  direction: ltr;
}
.marque {
  font-weight: 500; font-size: 14px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--texte); text-decoration: none;
}
.nav { display: flex; gap: 26px; }
.nav a {
  font-size: 13.5px; color: var(--doux); text-decoration: none;
  transition: color .18s ease;
}
.nav a:hover { color: var(--texte); }
@media (max-width: 520px) { .nav { gap: 18px; } .nav a { font-size: 12.5px; } }

/* ══════════ 1 · héros ══════════ */
.hero {
  max-width: 940px; margin: 0 auto;
  padding: clamp(48px, 11vh, 104px) clamp(20px, 5vw, 56px) clamp(56px, 9vh, 96px);
  text-align: center;
}
.sur-titre {
  margin: 0 0 clamp(22px, 4vh, 34px);
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--doux);
}
h1 {
  margin: 0 0 26px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.7rem, 7.6vw, 5.4rem);
  line-height: 1.04; letter-spacing: -.018em; text-wrap: balance;
}
h1 em { font-style: italic; color: var(--accent); }
.accroche {
  max-width: 46ch; margin: 0 auto clamp(38px, 6vh, 58px);
  font-size: clamp(15px, 1.7vw, 17px); color: var(--doux); text-wrap: pretty;
}

/* onde du héros : le motif central de l'identité */
.onde-hero { max-width: 780px; margin: 0 auto clamp(38px, 6vh, 56px); color: var(--accent); }
.onde-hero svg { width: 100%; height: clamp(70px, 11vh, 110px); display: block; }
.jalons {
  display: flex; justify-content: space-between; margin-top: 13px;
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--tres-doux);
}
.jalon-pub { color: var(--accent); }

/* ══════════ appel à l'action ══════════ */
.cta {
  display: inline-block; padding: 17px 34px; border-radius: 999px;
  background: var(--accent); color: var(--accent-sombre);
  font-size: 15.5px; font-weight: 500; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 12px 36px -14px rgba(111,211,154,.65); }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sous-cta { margin: 15px 0 0; font-size: 13px; color: var(--doux); }

/* ══════════ sections ══════════ */
.section {
  max-width: 1000px; margin: 0 auto;
  padding: clamp(56px, 10vh, 104px) clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--trait);
}
.titre-section {
  margin: 0 0 14px; text-align: center;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.14;
  letter-spacing: -.012em; text-wrap: balance;
}
.intro-section {
  max-width: 52ch; margin: 0 auto clamp(38px, 6vh, 56px);
  text-align: center; color: var(--doux); font-size: 15px;
}

/* ══════════ 2 · démonstration ══════════ */
.ecran {
  max-width: 720px; margin: 0 auto;
  border: 1px solid var(--trait); border-radius: 14px; overflow: hidden;
  background: var(--surface); box-shadow: 0 30px 80px -40px rgba(0,0,0,.9);
}
.ecran-barre {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: var(--surface2); border-bottom: 1px solid var(--trait);
}
.pastille-fen { width: 9px; height: 9px; border-radius: 50%; background: #2A322F; }
.url {
  margin-left: 12px; font-size: 11.5px; color: var(--tres-doux);
  font-family: ui-monospace, Menlo, monospace;
}

.lecteur { background: #000; }
.video-fond {
  position: relative; aspect-ratio: 16 / 9;
  background: radial-gradient(120% 90% at 50% 40%, #1A211E 0%, #0C100E 70%, #070908 100%);
  display: grid; place-items: center;
}
.etiquette-pub {
  position: absolute; left: 14px; top: 14px;
  padding: 4px 9px; border-radius: 4px;
  background: #F5C518; color: #101010;
  font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}

/* la bulle Silens : preuve visible que le produit agit */
.silens-bulle {
  position: absolute; right: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(11,14,13,.86); border: 1px solid rgba(111,211,154,.34);
  backdrop-filter: blur(8px);
  font-size: 11.5px;
}
.silens-point {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(111,211,154,.55); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(111,211,154,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(111,211,154,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,211,154,0); }
}
.silens-nom { font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
.silens-sep { width: 1px; height: 11px; background: var(--trait); }
.silens-etat { color: var(--accent); }

.faux-contenu { display: flex; flex-direction: column; gap: 11px; align-items: center; opacity: .3; }
.faux-bloc { height: 9px; border-radius: 5px; background: #47524D; }
.faux-bloc.grand  { width: 190px; }
.faux-bloc.moyen  { width: 118px; }

.controles { padding: 12px 14px 14px; background: #0A0C0B; }
.barre-progression { height: 3px; border-radius: 2px; background: #262E2B; overflow: hidden; }
.progression-pub { display: block; width: 27%; height: 100%; background: #F5C518; }
.controles-bas {
  display: flex; align-items: center; gap: 13px; margin-top: 11px;
  font-size: 11.5px; color: var(--doux);
}
.icone-lecture {
  width: 0; height: 0; border-left: 9px solid var(--doux);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.icone-son.coupe { color: var(--accent); display: inline-flex; }
.temps { font-variant-numeric: tabular-nums; }
.pousse { flex: 1; }
.mention-pub { color: var(--tres-doux); }

.legende {
  max-width: 52ch; margin: clamp(26px, 4vh, 38px) auto 0;
  text-align: center; font-size: 13px; color: var(--tres-doux);
}

/* ══════════ 3 · bénéfices ══════════ */
.liste-benefices {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(28px, 5vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.liste-benefices h3 {
  margin: 0 0 9px; font-size: 16px; font-weight: 500; letter-spacing: -.005em;
}
.liste-benefices h3::before {
  content: ""; display: block; width: 22px; height: 2px;
  background: var(--accent); margin-bottom: 15px; border-radius: 2px;
}
.liste-benefices p { margin: 0; font-size: 14px; color: var(--doux); }

/* ══════════ 4 · parcours ══════════ */
.parcours { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; }
.parcours li {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 20px 0; border-bottom: 1px solid var(--trait);
}
.parcours li:last-child { border-bottom: 0; }
.parcours-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 500;
}
.parcours b { display: block; font-weight: 500; font-size: 15.5px; margin-bottom: 3px; }
.parcours span:not(.parcours-num) { font-size: 13.5px; color: var(--doux); }

/* ══════════ 5 · comparatif ══════════ */
.tableau-enveloppe { overflow-x: auto; border-radius: 14px; border: 1px solid var(--trait); }
.comparatif { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--surface); }
.comparatif th, .comparatif td {
  padding: 15px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--trait); font-size: 14px;
}
.comparatif thead th {
  font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--doux); background: var(--surface2); border-bottom-color: var(--trait);
}
.comparatif thead th.col-silens { color: var(--accent); }
.comparatif tbody th {
  font-weight: 400; color: var(--doux); width: 34%;
}
.comparatif tbody tr:last-child th,
.comparatif tbody tr:last-child td { border-bottom: 0; }
/* La colonne Silens est mise en avant sans écraser l'autre : on compare, on n'attaque pas. */
.comparatif .col-silens { background: rgba(111,211,154,.045); color: var(--texte); }
.comparatif td b { font-weight: 500; }
.comparatif .note {
  display: block; margin-top: 4px; font-size: 12px; color: var(--tres-doux);
}

.estimation {
  margin-top: clamp(32px, 5vh, 46px); padding: 24px 26px;
  border: 1px solid var(--trait); border-radius: 14px; background: var(--surface);
}
.estimation h3 { margin: 0 0 10px; font-size: 15.5px; font-weight: 500; }
.estimation p { margin: 0 0 10px; font-size: 14px; color: var(--doux); }
.estimation p:last-child { margin-bottom: 0; }
.estimation b { color: var(--texte); font-weight: 500; }
.estimation-detail { font-size: 13.5px; }

.verdict {
  max-width: 54ch; margin: clamp(28px, 4vh, 40px) auto 0;
  text-align: center; font-size: 15px; color: var(--doux);
}
.verdict em { color: var(--texte); font-style: normal; }

/* ══════════ 6 · questions ══════════ */
.questions { max-width: 640px; margin: 0 auto; }
.questions details { border-bottom: 1px solid var(--trait); }
.questions summary {
  padding: 18px 34px 18px 0; cursor: pointer; position: relative;
  font-size: 15px; font-weight: 500; list-style: none;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--doux); border-bottom: 1.5px solid var(--doux);
  transform: rotate(45deg); transition: transform .2s ease, border-color .2s ease;
}
.questions details[open] summary::after { transform: rotate(-135deg); border-color: var(--accent); }
.questions summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.questions p { margin: 0 0 20px; font-size: 14px; color: var(--doux); max-width: 60ch; }

/* ══════════ 7 · final ══════════ */
.final { text-align: center; }
/* Le trait plat : le silence, réduit à sa forme la plus simple. */
.trait-silence {
  width: 100%; max-width: 300px; height: 2px; margin: 0 auto clamp(30px, 5vh, 44px);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55; border-radius: 2px;
}
.titre-final {
  margin: 0 0 clamp(30px, 5vh, 42px);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.1; text-wrap: balance;
}

/* ══════════ pied ══════════ */
.pied {
  display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 30px 20px 36px; border-top: 1px solid var(--trait);
  font-size: 12.5px; color: var(--tres-doux);
}
.pied a { color: var(--doux); text-decoration: none; }
.pied a:hover { color: var(--texte); }
.separateur { opacity: .45; }

/* ══════════ liaison site ↔ extension ══════════
   Quand l'extension est détectée, le bouton d'installation cède la place à
   l'état réel et au contrôle ON/OFF — même identité que le popup, parce que
   c'est le même produit vu d'ailleurs. */
.panneau {
  display: inline-flex; align-items: center; gap: clamp(20px, 4vw, 40px);
  padding: 17px 21px 17px 25px;
  border: 1px solid var(--trait); border-radius: 16px;
  background: var(--surface); text-align: left;
}
.panneau-titre { margin: 0 0 4px; font-size: 15.5px; font-weight: 500; }
.panneau-sous  { margin: 0; font-size: 13px; color: var(--doux); }
#lien-silens[data-etat="pause"] .panneau-titre { color: var(--doux); }

.bascule-site {
  display: inline-flex; align-items: center; gap: 11px;
  background: none; border: 0; padding: 6px; cursor: pointer;
  font-family: inherit; color: var(--doux);
}
.bascule-site .piste {
  width: 46px; height: 26px; border-radius: 26px; background: var(--trait);
  position: relative; display: inline-block; transition: background .18s ease;
}
.bascule-site .pastille {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #4A5450;
  transition: transform .18s ease, background .18s ease;
}
.bascule-site .mot {
  font-size: 12px; font-weight: 500; letter-spacing: .12em;
  min-width: 30px; text-align: left;
}
#lien-silens[data-etat="actif"] .bascule-site .piste { background: rgba(111,211,154,.22); }
#lien-silens[data-etat="actif"] .bascule-site .pastille { transform: translateX(20px); background: var(--accent); }
#lien-silens[data-etat="actif"] .bascule-site .mot { color: var(--accent); }
.bascule-site:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

@media (max-width: 560px) {
  .panneau { flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
  .controles-bas { flex-wrap: wrap; }
  .mention-pub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Lien d'installation dans la navigation : discret, mais toujours atteignable. */
.nav-cta {
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--trait); color: var(--texte) !important;
  transition: border-color .18s ease, color .18s ease;
}
.nav-cta:hover { border-color: var(--accent); color: var(--accent) !important; }

/* État « pas encore publiée » : honnête, visible, mais non cliquable.
   Dès que site/config.js porte l'URL de la fiche, lien.js remplace ces
   éléments par de vrais boutons — aucune autre modification nécessaire. */
.cta-indisponible {
  background: transparent;
  color: var(--doux);
  border: 1px dashed var(--trait);
  cursor: default;
}
.cta-indisponible:hover { transform: none; box-shadow: none; }
.nav-cta-indisponible { color: var(--tres-doux) !important; cursor: default; }
.nav-cta-indisponible:hover { border-color: var(--trait); color: var(--tres-doux) !important; }

/* ─────────────── sélecteur de langue ───────────────
 * .entete impose direction:ltr, donc ce bloc reste toujours a l'extreme
 * droite de la barre du haut, meme en arabe : pas de regle [dir="rtl"] ici,
 * volontairement, pour que le selecteur ne bouge jamais quelle que soit
 * la langue affichee. */
.langue {
  display: inline-flex; align-items: center; margin-left: 1rem;
  padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.14);
}
.langue select {
  font: inherit; font-size: .88rem; font-weight: 500; color: var(--texte, inherit);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px; padding: .4rem 2rem .4rem .7rem; cursor: pointer;
  appearance: none; line-height: 1.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center; background-size: .65rem;
  transition: border-color .18s ease, background-color .18s ease;
}
.langue select:hover { border-color: rgba(255,255,255,.55); background-color: rgba(255,255,255,.1); }
.langue select:focus { border-color: var(--accent, #6ee7a8); outline: none; }
.langue select option { color: #111; background: #fff; direction: ltr; }
[dir="rtl"] .parcours-num { margin-left: .6rem; margin-right: 0; }
@media (max-width: 640px) {
  .langue { margin-left: .5rem; padding-left: .5rem; }
  .langue select { font-size: .8rem; padding: .35rem 1.7rem .35rem .55rem; }
}