/* PC Confort - feuille de style du site
   Palette : celle de DriverDetect (docs/06) - noir profond, un seul rouge.
   Police : Segoe UI sur Windows (la police des logiciels), system-ui ailleurs. */

:root {
  --bg0: #0d0d0d;
  --bg1: #111111;
  --bg2: #1b1b1b;
  --surface: #232323;
  --raised: #2d2d2d;
  --line: #333333;
  --line-soft: #2a2a2a;
  --ink: #ececec;
  --ink2: #c4c4c4;
  --muted: #8e8e8e;
  --red: #e8352b;
  --red-hi: #f0483e;
  --red-lo: #c72a21;
  --green: #3dbe6c;
  --amber: #f7931e;
  --warm: #ffb35c;
  --blue: #3b8beb;
  --shadow: 0 30px 80px rgba(0, 0, 0, .55);
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1180px;
  --gutter: 24px;
  --font: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg2);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
/* Sur un écran d'ordinateur, tout le site un peu plus petit, comme un
   navigateur réglé à 90 % (demande du propriétaire) ; tablettes et
   téléphones restent à 100 %. */
@media (min-width: 1100px) {
  body { zoom: .9; }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 104px 0; position: relative; }
.section-tight { padding: 64px 0; }
.section-alt { background: var(--bg1); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-hi);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--red);
  border-radius: 2px;
}
.eyebrow.warm { color: var(--warm); }
.eyebrow.warm::before { background: var(--warm); }
.eyebrow.blue { color: var(--blue); }
.eyebrow.blue::before { background: var(--blue); }
.eyebrow.violet { color: #9b7bff; }
.eyebrow.violet::before { background: #9b7bff; }

.section h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  max-width: 14em;
}
.lead {
  margin-top: 18px;
  font-size: clamp(17px, 1.4vw, 19.5px);
  color: var(--ink2);
  max-width: 44em;
}
.section-head { margin-bottom: 44px; }
.section-head.center { text-align: center; }
.section-head.center h2, .section-head.center .lead { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select: none;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
  color: #fff;
  box-shadow: 0 10px 30px rgba(232, 53, 43, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #f45a51, var(--red));
  box-shadow: 0 14px 40px rgba(232, 53, 43, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .14);
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); transform: translateY(-2px); }

.btn-warm {
  background: linear-gradient(180deg, #ffbd6a, #f0921c);
  color: #1a1000;
  box-shadow: 0 10px 30px rgba(247, 147, 30, .3);
}
.btn-warm:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(247, 147, 30, .45); }

.btn-blue {
  background: linear-gradient(180deg, #74b6ff, #3d8ef0);
  color: #061320;
  box-shadow: 0 10px 30px rgba(76, 154, 245, .3);
}
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(76, 154, 245, .45); }

.btn-violet {
  background: linear-gradient(180deg, #b39cff, #8663f0);
  color: #120a2a;
  box-shadow: 0 10px 30px rgba(155, 123, 255, .3);
}
.btn-violet:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(155, 123, 255, .45); }
.btn[aria-disabled="true"] { opacity: .7; cursor: default; }
.btn[aria-disabled="true"]:hover { transform: none; }

.btn-lg { min-height: 60px; padding: 0 32px; font-size: 17px; border-radius: 14px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }

.btn-note {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

/* ------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(17, 17, 17, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
/* Une fois la page défilée, la barre est presque opaque : plus de flou de
   ce qui passe dessous, qu'un petit PC devrait recalculer à chaque image. */
.nav.scrolled { border-bottom-color: var(--line-soft); background: rgba(17, 17, 17, .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 68px;
}
/* La barre prend plus de largeur que la page : tous les liens restent
   visibles sur un écran d'ordinateur. */
.nav .nav-inner { max-width: 1520px; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand svg { width: 34px; height: 34px; }
.brand span b { color: var(--red-hi); font-weight: 700; }

.nav-links {
  display: flex;
  gap: 2px;
}
.nav-links a {
  padding: 8px 10px;
  border-radius: 10px;
  white-space: nowrap;
  color: var(--ink2);
  font-size: 14.5px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-links a:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
/* Chaque logiciel avec son icône, et sa couleur au survol ; Premium en
   pastille dorée, comme le bouton du bandeau du haut. */
.nav-links a { display: inline-flex; align-items: center; gap: 7px; }
.nav-links a img { width: 20px; height: 20px; border-radius: 6px; flex: none; }
.nav-links a.nl-dd:hover { background: rgba(232, 53, 43, .16); color: #ff9a92; }
.nav-links a.nl-eg:hover { background: rgba(255, 179, 92, .16); color: #ffd39a; }
.nav-links a.nl-ct:hover { background: rgba(76, 154, 245, .16); color: #a9d0ff; }
.nav-links a.nl-gb:hover { background: rgba(155, 123, 255, .18); color: #cbb8ff; }
.nav-links a.nl-premium {
  margin-inline: 4px;
  padding-inline: 12px;
  background: linear-gradient(180deg, #ffc27a, #ff9f43);
  color: #2a1400;
  font-weight: 700;
}
.nav-links a.nl-premium:hover { background: linear-gradient(180deg, #ffd39a, #ffb35c); color: #2a1400; }

.nav-auth { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav-user {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 14px;
  font-weight: 600;
}
.nav-user > span:not(.avatar) { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.nav-user img, .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--red);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px;
}
body.is-logged .nav-user { display: inline-flex; }
body.is-logged .nav-login { display: none; }

.burger {
  display: none;
  margin-inline-start: auto;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  place-items: center;
}
.burger span, .burger span::before, .burger span::after {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: transform .2s, opacity .2s;
}
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.nav.open .burger span { background: transparent; }
.nav.open .burger span::before { transform: translateY(6px) rotate(45deg); }
.nav.open .burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* La barre ne tient pas sur une ligne (fenêtre étroite, langue plus longue,
   nom de compte long) : site.js pose .compact et les liens des sections
   passent dans le bouton de menu, comme sur téléphone. */
.nav.compact .nav-links { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; padding: 10px 16px 16px; background: #111; border-bottom: 1px solid var(--line-soft); }
.nav.compact.open .nav-links { display: flex; }
.nav.compact .nav-links a { padding: 12px 14px; font-size: 16px; }
.nav.compact .burger { display: grid; margin-inline-start: 0; }
/* Écran d'ordinateur moyen : tous les liens restent visibles, un peu plus
   serrés ; Connexion, Mon compte et la langue passent en icône (le texte reste
   lu par les lecteurs d'écran). Petit portable (1 320 px et moins) : les
   icônes des logiciels s'effacent de la barre (elles restent dans le menu
   déroulant), pour que les huit liens tiennent dès 1 180 px de large dans les
   six langues (mesuré). */
@media (max-width: 1560px) {
  .nav-inner { gap: 14px; }
  .nav-links a { padding: 8px 7px; font-size: 14px; }
  .nav-login { font-size: 0; gap: 0; padding: 0 11px; }
  .nav-user { padding: 5px; }
  .nav-user > span:not(.avatar) { display: none; }
  .lang-switch > summary { padding: 0 10px; }
  .lang-switch > summary > span { display: none; }
}
@media (max-width: 1320px) {
  .nav-links a img { display: none; }
  .nav-links a { padding: 8px 6px; }
}
.nav.compact .nav-links a img { display: block; }
@media (max-width: 900px) {
  .nav-links a img { display: block; }
}

/* ---------------------------------------------------- choix de la langue */

/* Le drapeau de la langue courante et son code, comme un petit bouton
   fantôme ; le menu déroule les trois langues (inc/langue.php). */
.lang-switch { position: relative; }
.lang-switch > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ""; }
.lang-switch > summary:hover, .lang-switch[open] > summary { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: var(--ink); }
.lang-switch > summary:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 2px; }
.flag { width: 22px; height: 15px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.lang-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink2);
  font-size: 15px;
  font-weight: 500;
}
.lang-menu a:hover, .lang-menu a:focus-visible { background: rgba(255, 255, 255, .07); color: var(--ink); }
.lang-menu a[aria-current] { background: rgba(232, 53, 43, .14); color: var(--ink); }
.lang-menu a[aria-current]::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--red-hi); box-shadow: 0 0 8px var(--red-hi); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  padding: 72px 0 96px;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 78% 38%, rgba(232, 53, 43, .22), transparent 62%),
    radial-gradient(600px 400px at 12% 90%, rgba(232, 53, 43, .08), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 70%);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 100%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 48px;
  align-items: center;
}
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
}
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.tag .dot.red { background: var(--red-hi); box-shadow: 0 0 10px var(--red-hi); }

/* Le bandeau du haut de l'accueil : « Premium dès 1,25 € par mois :
   littéralement le prix d'une baguette ! », un lien vers les offres, posé
   au-dessus de la barre de navigation (elle reste collée en haut, lui défile
   avec la page). Un reflet le traverse de temps en temps (un transform seul). */
.promo-bar {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(90deg, #3b1c06, #66310c 35%, #7a2414 65%, #3b1c06);
  border-bottom: 1px solid rgba(255, 179, 92, .35);
  color: #ffe6c7;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.promo-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  min-height: 44px;
  padding-block: 7px;
  text-align: center;
}
.promo-bar svg { width: 21px; height: 21px; flex: none; color: #ffb35c; }
.promo-bar-inner > span b { color: #ffd39a; font-weight: 800; white-space: nowrap; }
/* Le code promo, quand il est en cours : en premier, en blanc, le code dans
   une étiquette en pointillés comme un bon de réduction. */
.promo-offre { color: #fff; font-weight: 700; }
.promo-offre::after { content: "·"; margin-inline: 10px 4px; color: rgba(255, 230, 199, .55); }
.promo-bar .promo-code {
  display: inline-block;
  padding: 0 7px;
  border: 1px dashed rgba(255, 211, 154, .9);
  border-radius: 6px;
  background: rgba(0, 0, 0, .2);
  color: #fff;
  letter-spacing: .05em;
}
/* Le code et la baguette côte à côte seulement quand tout tient sur une
   ligne (en allemand, la plus longue, il faut 1 390 px de bandeau : il
   s'élargit jusqu'à 1 520 px) ; plus étroit, le code seul, la baguette
   attend aussi sous le titre des offres. */
.promo-bar .promo-bar-inner { max-width: 1520px; }
@media (max-width: 1299px) {
  .avec-code .promo-prix { display: none; }
  .avec-code .promo-offre::after { content: none; }
}
.promo-bar .promo-bar-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffc27a, #ff9f43);
  color: #2a1400;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .18s ease;
}
.promo-bar:hover .promo-bar-go { transform: translateX(3px); }
[dir="rtl"] .promo-bar:hover .promo-bar-go { transform: translateX(-3px); }
[dir="rtl"] .promo-bar-go span { display: inline-block; transform: scaleX(-1); }
.promo-bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: promo-reflet 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes promo-reflet {
  0%, 62% { transform: translateX(-160%) skewX(-18deg); }
  100% { transform: translateX(560%) skewX(-18deg); }
}
/* Téléphone : la baguette à côté du texte, le bouton dessous. Avec le code,
   la phrase prend toute la largeur et le bouton n'est plus qu'une flèche (le
   bandeau entier est le lien ; le texte du bouton reste lu par les lecteurs
   d'écran) : trois lignes au plus, même en allemand. */
@media (max-width: 560px) {
  .promo-bar { font-size: 13.5px; }
  .promo-bar-inner { flex-wrap: wrap; gap: 6px 10px; }
  .promo-bar-inner > span { flex: 1 1 0; min-width: 0; text-align: start; }
  .promo-bar .promo-bar-go { margin-inline: auto; }
  .promo-bar .avec-code { flex-wrap: nowrap; gap: 10px; }
  .avec-code > svg { display: none; }
  .promo-bar .avec-code .promo-bar-go { margin-inline: 0; padding: 6px 11px; gap: 0; font-size: 0; }
  .promo-bar .avec-code .promo-bar-go span { font-size: 15px; }
}
/* « Pour le prix d'un café. » dans le titre du marché : en couleurs chaudes. */
#premium .section-head h2 em {
  font-style: normal;
  background: linear-gradient(90deg, #ffd39a, #ff9f43 55%, #f0483e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero h1 {
  font-size: clamp(38px, 5.6vw, 66px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.hero h1 em {
  font-style: normal;
  color: var(--red-hi);
  position: relative;
  white-space: nowrap;
}
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: .12em;
  background: linear-gradient(90deg, var(--red), transparent);
  border-radius: 4px;
  opacity: .55;
}
.hero-sub {
  margin-top: 22px;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink2);
  max-width: 34em;
}
/* Les quatre promesses, chacune dans la couleur de son logiciel, et un trait
   de feutre sous « gratuits » qui se dessine à l'arrivée (un transform seul). */
.hero-sub b { font-weight: 700; }
.hero-sub .c-dd { color: #ff6b62; }
.hero-sub .c-ct { color: #74b6ff; }
.hero-sub .c-gb { color: #b49bff; }
.hero-sub .c-eg { color: #ffb35c; }
.hero-sub .stylo { position: relative; z-index: 0; white-space: nowrap; color: var(--ink); font-weight: 700; }
.hero-sub .stylo::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3%;
  right: -3%;
  bottom: -.42em;
  height: .4em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 9C48 4 120 3 196 6' fill='none' stroke='%23ff9f43' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M14 18C70 13 132 12 188 15' fill='none' stroke='%23f0483e' stroke-width='4' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform-origin: left center;
  animation: stylo-trait .9s .5s cubic-bezier(.3, .8, .3, 1) both;
}
[dir="rtl"] .hero-sub .stylo::after { transform-origin: right center; }
@keyframes stylo-trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hero-sub .stylo::after { animation: none; } }
.hero-cta {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: flex-start;
}
.hero-cta > div { display: flex; flex-direction: column; }
.hero-proof {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  max-width: 560px;
}
.hero-proof li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink2);
}
.hero-proof svg { width: 18px; height: 18px; color: var(--green); flex: none; }

/* the gauge : l'exemple d'analyse qui tourne en boucle (site.js) - le
   bouton seul au centre, les résultats en dessous, jamais par-dessus. */
.gauge-wrap {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
}
/* Fluide même sur un petit PC : tout ce qui bouge sans arrêt est un calque
   qui tourne, grandit ou s'estompe (transform, opacity), ce que la carte
   graphique fait sans rien redessiner. Aucun filtre (flou, ombre portée)
   dans la jauge : les lueurs sont des dégradés peints une fois. Seules les
   graduations se redessinent, et seulement quand l'une d'elles change.
   Mesuré en 0.20 : l'ancienne jauge, sous une ombre floue de 60 px, tombait
   sous 1 image par seconde sur un cœur sans accélération graphique. */
.gauge {
  width: min(100%, 430px);
  aspect-ratio: 1;
  position: relative;
  isolation: isolate;
  contain: layout;
}
.gauge > div, .gauge > svg { position: absolute; }
.gauge .g-glow {
  inset: -6% -6% -14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 53, 43, .26), rgba(232, 53, 43, .1) 55%, rgba(232, 53, 43, 0));
  pointer-events: none;
}
.gauge .g-halo {
  inset: 1%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 53, 43, 0) 60%, rgba(232, 53, 43, .38) 82%, rgba(232, 53, 43, 0));
  animation: halo 2.6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes halo {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.gauge .g-orbit { inset: 0; animation: sweep 18s linear infinite; will-change: transform; }
.gauge .g-orbit-2 { animation-duration: 11s; animation-direction: reverse; }
.gauge .g-orbit svg, .gauge .g-ticks { display: block; width: 100%; height: 100%; overflow: visible; }
.gauge .g-ticks { inset: 0; will-change: transform; }
.gauge .g-ticks line { stroke: #3a3a3a; stroke-width: 3; stroke-linecap: round; }
.gauge .g-ticks line.major { stroke-width: 4; }
.gauge .g-ticks line.on { stroke: var(--red-hi); }
.gauge .g-ticks line.ok { stroke: var(--green); }
.gauge .g-ticks .glow line { stroke: transparent; stroke-width: 11; }
.gauge .g-ticks .glow line.on { stroke: rgba(240, 72, 62, .24); }
.gauge .g-ticks .glow line.ok { stroke: rgba(61, 190, 108, .24); }
.gauge .g-sweep {
  inset: 15.5%;
  border-radius: 50%;
  background: conic-gradient(rgba(240, 72, 62, 0) 0deg, rgba(240, 72, 62, .08) 20deg, rgba(240, 72, 62, .5) 44deg, rgba(240, 72, 62, 0) 45deg);
  opacity: 0;
  transition: opacity .3s ease;
  animation: sweep 1.1s linear infinite;
  will-change: transform, opacity;
}
.gauge.scanning .g-sweep { opacity: 1; }
@keyframes sweep { to { transform: rotate(360deg); } }
/* la tête lumineuse qui fait le tour : un petit calque que le script
   déplace sur le cercle (transform), pas un calque grand comme la jauge */
.gauge .g-head { left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 0; transition: opacity .25s ease; will-change: transform, opacity; }
.gauge .g-head.on { opacity: 1; }
.gauge .g-head i {
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, .85), 0 0 18px 7px rgba(240, 72, 62, .6);
}
.gauge .g-head.ok i { box-shadow: 0 0 6px 2px rgba(255, 255, 255, .85), 0 0 18px 7px rgba(61, 190, 108, .65); }
.gauge .g-burst { inset: 18.5%; border-radius: 50%; border: 3px solid var(--red-hi); opacity: 0; will-change: transform, opacity; }
.gauge .g-disc {
  inset: 20.5%;
  border-radius: 50%;
  background: radial-gradient(72% 72% at 42% 35%, #f7645c 0%, #e8352b 55%, #b3221a 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), 0 16px 40px rgba(120, 18, 12, .45);
  will-change: transform;
}
.gauge .g-disc::before {
  content: "";
  position: absolute;
  left: 12.7%; top: 13.6%;
  width: 55.9%; height: 28.8%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
}
/* Petit PC : quand les images tardent, le script pose .lite et le décor
   en mouvement s'arrête ; l'analyse, les graduations et la tête restent. */
.gauge.lite .g-orbit, .gauge.lite .g-sweep, .gauge.lite .sparks { display: none; }
.gauge.lite .g-halo { animation: none; opacity: .8; }
.gauge-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}
.gauge-label strong {
  display: block;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.gauge-label span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  min-height: 1.4em;
  font-variant-numeric: tabular-nums;
}

/* des étincelles qui montent sur les côtés, sans passer devant le bouton */
.sparks { position: absolute; inset: 0; pointer-events: none; }
.sparks i {
  position: absolute;
  bottom: 16%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ff9d95;
  box-shadow: 0 0 8px 1px rgba(240, 72, 62, .9);
  opacity: 0;
  animation: etincelle 3.2s ease-in infinite;
  will-change: transform, opacity;
}
.sparks i:nth-child(1) { left: 4%; animation-delay: -.3s; }
.sparks i:nth-child(2) { left: 9%; animation-delay: -1.5s; animation-duration: 2.6s; }
.sparks i:nth-child(3) { left: 13%; animation-delay: -2.4s; animation-duration: 3.6s; }
.sparks i:nth-child(4) { left: 17%; animation-delay: -.9s; animation-duration: 2.9s; }
.sparks i:nth-child(5) { left: 1%; animation-delay: -2s; animation-duration: 3.9s; }
.sparks i:nth-child(6) { right: 4%; animation-delay: -1.1s; }
.sparks i:nth-child(7) { right: 9%; animation-delay: -2.8s; animation-duration: 2.7s; }
.sparks i:nth-child(8) { right: 13%; animation-delay: -.5s; animation-duration: 3.5s; }
.sparks i:nth-child(9) { right: 17%; animation-delay: -1.9s; animation-duration: 3s; }
.sparks i:nth-child(10) { right: 1%; animation-delay: -3.1s; animation-duration: 4s; }
@keyframes etincelle {
  0% { opacity: 0; transform: translateY(0) scale(.5); }
  15% { opacity: .95; }
  75% { opacity: .45; }
  100% { opacity: 0; transform: translateY(-240px) scale(1.1); }
}

/* les résultats, sous le bouton : ils apparaissent, se corrigent, repartent */
.scan-feed {
  width: 100%;
  max-width: 540px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.feed-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 22px;
  font-size: 13.5px;
  color: var(--ink2);
}
.feed-head .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--red-hi); box-shadow: 0 0 10px var(--red-hi); animation: pip 1.1s ease-in-out infinite; }
.feed-head.done .pip { background: var(--green); box-shadow: 0 0 10px var(--green); }
@keyframes pip { 50% { opacity: .35; transform: scale(.7); } }
.result-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(35, 35, 35, .92);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  font-size: 13.5px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .3, 1.25), border-color .3s ease, background-color .3s ease;
}
.result-card.show { opacity: 1; transform: none; }
.result-card b { display: block; font-weight: 700; }
.result-card small { display: block; margin-top: 2px; font-weight: 500; color: var(--muted); font-size: 12px; }
.result-card .ico {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(232, 53, 43, .16);
  color: var(--red-hi);
}
.result-card .ico.amber { background: rgba(247, 147, 30, .16); color: var(--amber); }
.result-card .ico svg { width: 18px; height: 18px; }
.result-card .ico .ok { display: none; }
.result-card.fixed { border-color: rgba(61, 190, 108, .45); background-color: rgba(26, 42, 32, .94); }
.result-card.fixed .ico { background: rgba(61, 190, 108, .18); color: var(--green); animation: icoPop .45s cubic-bezier(.2, .9, .3, 1.5); }
.result-card.fixed .ico .main { display: none; }
.result-card.fixed .ico .ok { display: block; }
@keyframes icoPop { 0% { transform: scale(.55); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.result-card .bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), #7fe3a3);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}
.result-card.fixing .bar { opacity: 1; transform: scaleX(1); transition: transform .52s linear; }
.result-card.fixed .bar { opacity: 0; transform: scaleX(1); transition: opacity .5s ease; }
.result-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%);
  transform: translateX(-110%);
  pointer-events: none;
}
.result-card.show::after { animation: reflet .8s ease .1s; }
.result-card.fixed::after { animation: reflet-ok .8s ease; }
@keyframes reflet { to { transform: translateX(110%); } }
@keyframes reflet-ok { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* ---------------------------------------------------------------- facts */

.facts {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg1);
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.fact {
  padding: 28px 18px;
  text-align: center;
  border-inline-start: 1px solid var(--line-soft);
}
.fact:first-child { border-inline-start: 0; }
.fact b {
  display: block;
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1;
}
.fact b i { font-style: normal; color: var(--red-hi); }
.fact span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }

/* --------------------------------------------------------------- product */

.product-head {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 44px;
}
.product-icon {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.product-icon img { width: 56px; height: 56px; border-radius: 14px; }
.product-icon strong { font-size: 22px; font-weight: 700; }
.product-icon small { display: block; color: var(--muted); font-size: 13.5px; font-weight: 500; }

.showcase {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}
.tabs { display: flex; flex-direction: column; gap: 8px; }
.tab {
  text-align: start;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  transition: background .15s, border-color .15s;
}
.tab:hover { background: rgba(255, 255, 255, .04); }
.tab.active { background: var(--surface); border-color: var(--line); }
.tab b { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.tab b::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4a4a4a;
  flex: none;
  transition: background .15s, box-shadow .15s;
}
.tab.active b::before { background: var(--red-hi); box-shadow: 0 0 10px var(--red-hi); }
.tab p { margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.45; }

.window {
  position: relative;
  border-radius: 14px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.window-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  background: #171717;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 12.5px;
  color: var(--muted);
}
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a3a; }
.window-bar i:nth-child(1) { background: #e8352b; }
.window-bar i:nth-child(2) { background: #f7931e; }
.window-bar i:nth-child(3) { background: #3dbe6c; }
.window-bar span { margin-inline-start: 10px; }
.window-body { position: relative; aspect-ratio: 1380 / 880; background: #1b1b1b; }
.window-body img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
}
.window-body img.active { opacity: 1; }
.window-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(60% 50% at 50% 60%, rgba(232, 53, 43, .18), transparent 70%);
  z-index: -1;
  filter: blur(10px);
}
.showcase-right { position: relative; }

.features {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.card {
  position: relative;
  padding: 24px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: transform .2s, border-color .2s, background .2s;
}
.card:hover { transform: translateY(-4px); border-color: #444; background: #262626; }
.card .ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(232, 53, 43, .14);
  color: var(--red-hi);
  margin-bottom: 16px;
}
.card .ico svg { width: 22px; height: 22px; }
.card h3 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card p { margin-top: 8px; font-size: 14.5px; color: var(--ink2); line-height: 1.5; }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card.wide {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(232, 53, 43, .18), rgba(35, 35, 35, .9) 60%);
  border-color: rgba(232, 53, 43, .35);
}
.card.wide .ico { background: var(--red); color: #fff; }

/* ------------------------------------------------------------ eyes guard */

.eg-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.eg-demo {
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
}
.eg-demo::before {
  content: "";
  position: absolute; inset: -30px;
  z-index: -1;
  background: radial-gradient(60% 55% at 50% 60%, var(--eg-glow, rgba(255, 179, 92, .18)), transparent 70%);
  filter: blur(14px);
  transition: background .3s;
}
.eg-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, #17324f, #2b5a82 55%, #4a8ab8);
}
.eg-desktop {
  position: absolute; inset: 0;
  padding: 7% 6%;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4%;
  align-content: start;
}
.eg-win {
  background: #f4f5f7;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  min-height: 90px;
}
.eg-win i { display: block; height: 8px; border-radius: 4px; background: #d5d8de; margin-bottom: 7px; }
.eg-win i:first-child { width: 45%; background: #2b2f36; height: 10px; margin-bottom: 10px; }
.eg-win i:nth-child(3) { width: 80%; }
.eg-win i:nth-child(4) { width: 60%; }
.eg-win.dark { background: #1f2229; }
.eg-win.dark i { background: #3a3f4a; }
.eg-win.dark i:first-child { background: #e8e8e8; }
.eg-taskbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 9%;
  background: rgba(20, 22, 28, .85);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.eg-taskbar i { width: 7%; max-width: 22px; aspect-ratio: 1; border-radius: 5px; background: rgba(255, 255, 255, .18); }
.eg-taskbar i:nth-child(2) { background: #3b8beb; }
.eg-taskbar i:nth-child(4) { background: #e8352b; }
.eg-tint {
  position: absolute; inset: 0;
  mix-blend-mode: multiply;
  background: #fff;
  transition: background .25s;
  pointer-events: none;
}
.eg-readout {
  position: absolute;
  top: 12px; inset-inline-start: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(15, 15, 15, .75);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: flex; gap: 10px; align-items: center;
  backdrop-filter: blur(6px);
}
.eg-readout b { color: var(--warm); font-size: 15px; }
.eg-controls { margin-top: 18px; }
.eg-controls label { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.eg-controls label output { color: var(--ink); font-weight: 600; }
input[type="range"].eg-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb35c 0%, #ffd9a8 18%, #e9f1ff 42%, #e9f1ff 66%, #ffd9a8 82%, #ff9a3c 100%);
  outline: none;
}
input[type="range"].eg-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--red);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
  cursor: pointer;
}
input[type="range"].eg-range::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--red);
  cursor: pointer;
}
.eg-curve { margin-top: 16px; }
.eg-curve svg { width: 100%; height: auto; }
.eg-curve .axis { stroke: #3a3a3a; stroke-width: 1; }
.eg-curve .curve { fill: none; stroke: var(--warm); stroke-width: 3; stroke-linecap: round; }
.eg-curve .area { fill: url(#egArea); }
.eg-curve .marker { fill: #fff; stroke: var(--red); stroke-width: 4; }
.eg-curve text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.eg-legend { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12.5px; color: var(--muted); }

.eg-list { margin-top: 28px; display: grid; gap: 14px; }
.eg-list li { display: flex; gap: 14px; align-items: flex-start; }
.eg-list .ico {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255, 179, 92, .14);
  color: var(--warm);
}
.eg-list .ico svg { width: 20px; height: 20px; }
.eg-list b { display: block; font-size: 16px; }
.eg-list span { color: var(--ink2); font-size: 14.5px; }
.eg-list .ico.blue { color: var(--blue); background: rgba(76, 154, 245, .14); }
.eg-list .ico.violet { color: #9b7bff; background: rgba(155, 123, 255, .14); }

/* Le Center : la capture de son accueil, à droite du texte. */
.ct-shot {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  background: #0c0e11;
  position: relative;
}
.ct-shot::before {
  content: "";
  position: absolute; inset: -30px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(76, 154, 245, .18), transparent 70%);
}
.ct-shot img { display: block; width: 100%; height: auto; }

/* Eyes Guard: the medical sources, folded under the list. */
.eg-sources { margin-top: 24px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.eg-sources summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-size: 14.5px; color: var(--ink2); }
.eg-sources summary::-webkit-details-marker { display: none; }
.eg-sources summary .i { flex: none; width: 18px; height: 18px; color: var(--warm); }
.eg-sources summary em { margin-inline-start: auto; font-style: normal; font-size: 13.5px; color: var(--warm); white-space: nowrap; }
.eg-sources summary:hover em { text-decoration: underline; }
.eg-sources summary:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; border-radius: 14px; }
.eg-sources-body { padding: 0 16px 16px; font-size: 14px; color: var(--ink2); }
.eg-sources dl { margin: 12px 0 0; }
.eg-sources dt { margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--ink); }
.eg-sources dt:first-child { margin-top: 0; }
.eg-sources dd { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.eg-sources dd a { font-size: 13.5px; color: var(--warm); text-decoration: none; }
.eg-sources dd a:hover { text-decoration: underline; }
.eg-disclaimer { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.eg-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-start; }
.eg-cta > div { display: flex; flex-direction: column; }
.kbd {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid #444;
  background: #1a1a1a;
  font-size: 12.5px;
  font-family: Consolas, "Segoe UI", monospace;
  color: var(--ink);
}

/* ------------------------------------------------------------------ steps */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 30px 26px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 10px; inset-inline-end: 18px;
  font-size: 72px;
  font-weight: 800;
  color: rgba(255, 255, 255, .05);
  letter-spacing: -.04em;
  line-height: 1;
}
.step .ico {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
  color: #fff;
  box-shadow: 0 8px 20px rgba(232, 53, 43, .35);
  margin-bottom: 18px;
}
.step .ico svg { width: 24px; height: 24px; }
.step h3 { font-size: 20px; }
.step p { margin-top: 10px; color: var(--ink2); font-size: 15px; }
.step .time { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------------ trust */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.trust {
  padding: 26px 22px;
  border-radius: var(--radius);
  background: var(--bg2);
  border: 1px solid var(--line-soft);
}
.trust .no {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-hi);
  margin-bottom: 12px;
}
.trust .no::before { content: "✕"; font-size: 13px; }
.trust h3 { font-size: 18px; }
.trust p { margin-top: 8px; font-size: 14.5px; color: var(--ink2); }

/* ---------------------------------------------------------------- account */

.account-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.account-benefits { margin-top: 26px; display: grid; gap: 14px; }
.account-benefits li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink2); font-size: 15.5px; }
.account-benefits svg { width: 22px; height: 22px; color: var(--green); flex: none; margin-top: 2px; }
.account-box {
  padding: 34px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
}
.account-box h3 { font-size: 20px; margin-bottom: 8px; }
.btn-social {
  background: #fff;
  color: #1b1b1b;
  border-color: #fff;
  justify-content: flex-start;
  padding-inline-start: 18px;
}
.btn-social:hover { background: #f1f1f1; transform: translateY(-2px); }
.btn-social.fb { background: #1877f2; border-color: #1877f2; color: #fff; }
.btn-social.fb:hover { background: #1669d8; }
.btn-social.mail { background: var(--raised); border-color: #3a3a3a; color: var(--ink); }
.btn-social.mail:hover { background: #363636; }
.btn-social svg { width: 22px; height: 22px; }
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.account-box .fine { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 4px; }
.account-box .fine a { color: var(--ink2); text-decoration: underline; }

/* -------------------------------------------------------------------- faq */

.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: 0 22px;
  transition: border-color .15s;
}
.faq details[open] { border-color: #444; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-weight: 600;
  font-size: 16.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .06);
  color: var(--red-hi);
  font-size: 20px;
  font-weight: 500;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ink2); font-size: 15px; max-width: 60em; }
.faq details p + p { margin-top: -8px; }

/* --------------------------------------------------------------- cta band */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 64px 48px;
  text-align: center;
  background:
    radial-gradient(700px 300px at 50% 120%, rgba(232, 53, 43, .45), transparent 70%),
    linear-gradient(180deg, #1f1f1f, #161616);
  border: 1px solid rgba(232, 53, 43, .3);
}
.cta-band h2 { font-size: clamp(28px, 3.6vw, 42px); max-width: none; }
.cta-band p { margin: 14px auto 0; color: var(--ink2); max-width: 40em; }
.cta-band .row { margin-top: 30px; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ----------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg1);
  padding: 44px 0 34px;
  font-size: 14px;
  color: var(--muted);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: center;
  justify-content: space-between;
}
.footer .brand { font-size: 17px; color: var(--ink); }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer nav a:hover { color: var(--ink); }
.footer .copy { width: 100%; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ------------------------------------------------------------- auth modal */

dialog.auth {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  width: 100%;
  max-height: none;
  height: 100%;
  margin: 0;
  color: var(--ink);
}
dialog.auth::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px); }
.auth-inner {
  width: min(460px, calc(100% - 32px));
  margin: 6vh auto;
  border-radius: 20px;
  background: var(--bg2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 30px 30px 26px;
  position: relative;
  animation: pop .25s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.auth-close {
  position: absolute;
  top: 14px; inset-inline-end: 14px;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  display: grid; place-items: center;
  color: var(--muted);
}
.auth-close:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.auth-close svg { width: 18px; height: 18px; }
.auth-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.auth-head svg { width: 36px; height: 36px; }
.auth-head b { font-size: 18px; }
.auth-head small { display: block; color: var(--muted); font-size: 13px; }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg1);
  border: 1px solid var(--line-soft);
  margin-bottom: 18px;
}
.auth-tabs button {
  border: 0;
  border-radius: 9px;
  padding: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 14.5px;
}
.auth-tabs button.active { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.auth-social { display: grid; gap: 10px; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 13.5px; color: var(--ink2); font-weight: 600; }
.field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid #3a3a3a;
  background: #151515;
  color: var(--ink);
  font: inherit;
  font-size: 15.5px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--red-hi); box-shadow: 0 0 0 3px rgba(232, 53, 43, .2); }
.field .pw { position: relative; }
.field .pw input { padding-inline-end: 46px; }
.field .pw button {
  position: absolute; inset-inline-end: 6px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: grid; place-items: center;
}
.field .pw button svg { width: 18px; height: 18px; }
.field .hint { font-size: 12.5px; color: var(--muted); }
.form-msg {
  display: none;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid;
}
.form-msg.error { display: block; color: #ffb3ad; background: rgba(232, 53, 43, .12); border-color: rgba(232, 53, 43, .4); }
.form-msg.ok { display: block; color: #b8f0cb; background: rgba(61, 190, 108, .12); border-color: rgba(61, 190, 108, .4); }
.auth-switch { text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.auth-switch button { border: 0; background: none; color: var(--red-hi); font-weight: 600; padding: 0; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------- account page */

.account-page { padding: 56px 0 96px; }
.account-card {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 30px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.account-card .avatar { width: 96px; height: 96px; font-size: 36px; }
.account-card h1 { font-size: 30px; }
.account-card .meta { margin-top: 6px; color: var(--muted); font-size: 14.5px; }
.account-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dl-card {
  padding: 26px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: grid;
  gap: 12px;
}
.dl-card header { display: flex; align-items: center; gap: 14px; }
.dl-card header img { width: 48px; height: 48px; border-radius: 12px; }
.dl-card header b { font-size: 18px; }
.dl-card header small { display: block; color: var(--muted); }
.dl-card p { color: var(--ink2); font-size: 14.5px; }
.notice {
  margin-top: 18px;
  padding: 18px 22px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px dashed #3a3a3a;
  color: var(--ink2);
  font-size: 14.5px;
}

/* --------------------------------------------------------------- reveal */

/* Seulement quand le script tourne (classe js posée par site.js) : sans lui,
   rien ne reste invisible. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .facts-grid { grid-template-columns: repeat(3, 1fr); }
  .fact:nth-child(4) { border-inline-start: 0; }
  .hero-grid { grid-template-columns: 1fr .9fr; }
}

@media (max-width: 900px) {
  .section { padding: 76px 0; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; padding: 10px 16px 16px; background: #111; border-bottom: 1px solid var(--line-soft); }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 16px; }
  .burger { display: grid; }
  .nav-auth { margin-inline-start: 0; }
  .nav-auth .btn-download { display: none; }
  .hero { padding: 48px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .gauge-wrap { margin-top: 12px; }
  .gauge { width: min(100%, 340px); }
  .product-head { grid-template-columns: 1fr; gap: 20px; }
  .showcase { grid-template-columns: 1fr; }
  .tabs { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: thin; }
  .tab { flex: 0 0 auto; min-width: 210px; padding: 12px 14px; }
  .tab p { display: none; }
  .eg-layout, .account-layout { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: 1fr; }
  .account-card { grid-template-columns: 72px 1fr; }
  .account-card .avatar { width: 72px; height: 72px; font-size: 28px; }
  .account-card > .btn { grid-column: 1 / -1; }
  .account-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .btn { padding: 0 18px; }
  .hero-cta { flex-direction: column; }
  .hero-cta > div, .hero-cta .btn { width: 100%; }
  .hero-proof { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .fact { padding: 20px 10px; border-inline-start: 0; border-top: 1px solid var(--line-soft); }
  .fact:nth-child(-n + 2) { border-top: 0; }
  .fact:nth-child(2n) { border-inline-start: 1px solid var(--line-soft); }
  .features, .trust-grid { grid-template-columns: 1fr; }
  .card.wide { grid-column: auto; }
  .eg-demo { padding: 14px; }
  .eg-cta { flex-direction: column; }
  .eg-cta > div, .eg-cta .btn { width: 100%; }
  .cta-band { padding: 44px 22px; border-radius: 18px; }
  .cta-band .row .btn { width: 100%; }
  .account-box { padding: 24px 20px; }
  .auth-inner { padding: 24px 18px 20px; margin: 16px auto; }
  .result-card small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .sparks { display: none; }
}

/* ------------------------------------------------------------------ icons */

/* Les symboles du sprite sont des tracés : trait de la couleur du texte, sans
   remplissage (le logo, Google et Facebook gardent leurs propres couleurs). */
.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.avatar { text-transform: uppercase; }
.gauge { cursor: pointer; }

/* ------------------------------------------------- google / facebook login */

/* Masqués tant que la connexion Google / Facebook n'est pas branchée côté
   serveur : api/session.php l'annonce, site.js pose has-google / has-facebook. */
.btn-social[href^="auth/"] { display: none; }
body.has-google .btn-social[href="auth/google.php"],
body.has-facebook .btn-social[href="auth/facebook.php"] { display: inline-flex; }
body:not(.has-social) .auth-social,
body:not(.has-social) .auth .or,
body:not(.has-social) .account-box .or { display: none; }

/* ----------------------------------------------------------- account page */

.account-card form { margin: 0; }
.dl-card .btn { justify-self: start; }
.notice { display: flex; gap: 14px; align-items: flex-start; }
.notice svg { width: 22px; height: 22px; color: var(--red-hi); flex: none; margin-top: 2px; }
.notice b { color: var(--ink); }
.notice a { color: var(--red-hi); text-decoration: underline; }

@media (max-width: 900px) {
  .account-card > form { grid-column: 1 / -1; }
  .account-card > form .btn { width: 100%; }
}

/* ------------------------------------------------------ phones: no overflow */

/* Mesuré en émulation 390 et 360 px : les halos décoratifs et le bouton
   « Créer un compte avec mon e-mail » (sans retour à la ligne) élargissaient
   la page de 24 à 30 px, et le téléphone la montrait dézoomée. Jusqu'à
   1260 px (mesuré à 1180, 1024 et 901 px), le halo des écrans de
   DriverDetect dépassait encore de 16 px : les halos restent dans la largeur
   tant que la marge de la page est plus petite qu'eux. */
@media (max-width: 1260px) {
  .window-glow { inset: -24px 0; }
  .eg-demo::before { inset: -24px 0; }
}
@media (max-width: 900px) {
  .account-layout > *, .eg-layout > *, .hero-grid > * { min-width: 0; }
}
@media (max-width: 560px) {
  .btn-social { white-space: normal; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; text-align: start; }
  /* Le drapeau seul : le code de la langue reste lu par les lecteurs d'écran (aria-label). */
  .lang-switch > summary { padding: 0 10px; }
  .lang-switch > summary > span { display: none; }
}
/* Petits téléphones : logo sur une ligne, Connexion et Mon compte en icône
   (le texte reste lu par les lecteurs d'écran). */
@media (max-width: 420px) {
  .nav-inner { gap: 12px; }
  .brand { white-space: nowrap; font-size: 18px; }
  .nav-login { font-size: 0; gap: 0; padding: 0 11px; }
  .nav-user { padding: 5px; }
  .nav-user > span:not(.avatar) { display: none; }
}

/* ------------------------------------------------------------ legal pages */

.legal { max-width: 820px; }
.legal h1 { font-size: clamp(32px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.02em; }
.legal .maj { margin-top: 12px; color: var(--muted); font-size: 14px; }
.legal h2 { font-size: 21px; font-weight: 700; margin: 38px 0 4px; max-width: none; }
.legal p, .legal li { color: var(--ink2); font-size: 16px; margin-top: 10px; }
.legal ul { list-style: disc; padding-inline-start: 22px; }
.legal a { color: var(--red-hi); text-decoration: underline; }
.legal strong { color: var(--ink); }
.legal .a-remplir { color: var(--amber); font-weight: 600; }
/* Pages traduites : la version française fait foi. */
.legal .traduction { margin-top: 18px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 14px; }

/* ----------------------------------------------------- licences (compte) */

.licences { margin-top: 24px; display: grid; gap: 14px; }
.licences h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.licences h2 .i { width: 22px; height: 22px; color: var(--red-hi); }
.licence-card {
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: grid;
  gap: 10px;
}
.licence-card header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.licence-card .cle {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 18px;
  letter-spacing: .06em;
  padding: 8px 12px;
  border-radius: 10px;
  background: #151515;
  border: 1px solid #3a3a3a;
  user-select: all;
}
.licence-card .meta { color: var(--muted); font-size: 14.5px; }
.licence-card .postes { display: grid; gap: 8px; margin-top: 4px; }
.licence-card .postes li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.licence-card .postes small { display: block; color: var(--muted); font-size: 12.5px; }
.licences .hint { color: var(--muted); font-size: 13.5px; }
.pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255, 255, 255, .08); color: var(--ink2);
}
.pill-valide { background: rgba(61, 190, 108, .16); color: #7fe3a3; }
.pill-expiree { background: rgba(247, 147, 30, .16); color: #ffc27a; }
.pill-suspendue { background: rgba(247, 147, 30, .16); color: #ffc27a; }
.pill-revoquee { background: rgba(232, 53, 43, .16); color: #ff9c95; }
.pill-postes { background: rgba(59, 139, 235, .16); color: #9cc6ff; }
.pill-inconnue { background: rgba(255, 255, 255, .08); color: var(--muted); }
@media (max-width: 700px) {
  .licence-card .postes li { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------- premium */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 920px; margin: 0 auto; }
.plan {
  position: relative;
  /* un mot plus long que la carte (l'allemand en a) passe à la ligne au lieu d'élargir la page */
  overflow-wrap: break-word;
  padding: 30px 28px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: grid;
  gap: 18px;
  align-content: start;
}
.plan.featured {
  background: linear-gradient(160deg, rgba(232, 53, 43, .2), rgba(35, 35, 35, .95) 55%);
  border-color: rgba(232, 53, 43, .45);
  box-shadow: 0 30px 80px rgba(232, 53, 43, .18);
}
.plan .badge { position: absolute; top: 18px; inset-inline-end: 18px; }
.plan h3 { font-size: 24px; }
.plan .price { font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.plan .price small { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan ul { display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink2); line-height: 1.4; }
.plan li::before { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.plan li.yes::before { content: "\2713"; background: rgba(61, 190, 108, .18); color: #7fe3a3; }
.plan li.no::before { content: "\2013"; background: rgba(255, 255, 255, .06); color: var(--muted); }
.plan li.no { color: var(--muted); }
.plan .fine { font-size: 13px; color: var(--muted); text-align: center; }
.plan .fine a { color: var(--red-hi); }
.plans-note { max-width: 920px; margin: 22px auto 0; text-align: center; color: var(--muted); font-size: 14px; }
.trial-line { padding: 14px 18px; border-radius: 12px; background: rgba(61, 190, 108, .1); border: 1px solid rgba(61, 190, 108, .35); color: var(--ink2); font-size: 14.5px; }
.pill-essai { background: rgba(255, 179, 92, .18); color: #ffd39a; }
@media (max-width: 760px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------- compte : suppression, liaisons */

.pill-lie { background: rgba(255, 255, 255, .08); color: var(--ink2); font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.danger-zone { margin-top: 40px; padding: 24px 26px; border-radius: 16px; border: 1px solid rgba(232, 53, 43, .35); background: rgba(232, 53, 43, .06); }
.danger-zone h2 { font-size: 20px; margin-bottom: 8px; }
.danger-zone p { color: var(--ink2); font-size: 14.5px; line-height: 1.55; margin-bottom: 14px; }
.danger-zone form { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); }
.check input { width: 18px; height: 18px; accent-color: var(--red); }
.btn-danger { background: transparent; border: 1px solid var(--red); color: var(--red-hi); }
.btn-danger:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.simple-page { min-height: 100vh; display: grid; align-items: center; }

/* ------------------------------------------------------------- boutique */

.shop { padding-top: 120px; }
.shop h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -.02em; }
.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; max-width: 980px; margin: 0 auto; }
.offre {
  position: relative; padding: 28px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft);
  display: grid; gap: 14px; align-content: start;
}
.offre.featured { border-color: rgba(232, 53, 43, .5); box-shadow: 0 24px 60px rgba(232, 53, 43, .16); background: linear-gradient(160deg, rgba(232, 53, 43, .16), rgba(35, 35, 35, .95) 60%); }
.offre .badge { position: absolute; top: 16px; inset-inline-end: 16px; }
.offre.featured { padding-top: 50px; }
.offre h2 { font-size: 20px; }
.offre .price { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.offre .price small { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.offre .desc { color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.offres-home { margin: 26px auto 0; max-width: 920px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.offre-mini {
  display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none; transition: transform .2s ease, border-color .2s ease;
}
.offre-mini:hover { transform: translateY(-3px); border-color: rgba(232, 53, 43, .55); }
.offre-mini.featured { border-color: rgba(232, 53, 43, .45); }
.offre-mini b { font-size: 15px; }
.offre-mini span { color: var(--muted); font-size: 13px; }
.offre-mini strong { font-size: 20px; color: var(--red-hi); margin-top: 4px; }
.checkout { max-width: 980px; margin: 0 auto; }
.checkout .section-head { margin-bottom: 24px; }
.checkout-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; }
.checkout-form { padding: 28px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); }
.checkout-form .check { margin: 6px 0 18px; align-items: flex-start; line-height: 1.45; }
.checkout-form .check input { margin-top: 3px; flex: none; }
.checkout-form .check a { color: var(--red-hi); }
.checkout-form .fine { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; }
.checkout-form .fine a { color: var(--red-hi); }
.checkout-who { margin-bottom: 14px; color: var(--ink2); font-size: 14.5px; }
.checkout-who a { color: var(--red-hi); }
.btn-lg { padding: 14px 22px; font-size: 16px; }
.checkout-summary { padding: 26px; border-radius: 18px; background: linear-gradient(160deg, rgba(232, 53, 43, .14), rgba(35, 35, 35, .95) 60%); border: 1px solid rgba(232, 53, 43, .35); }
.checkout-summary h2 { font-size: 18px; margin-bottom: 14px; }
.checkout-summary .item { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.checkout-summary .item span { color: var(--muted); font-size: 13.5px; }
.checkout-summary .checks { margin: 14px 0; display: grid; gap: 8px; }
.checkout-summary .checks li { display: flex; gap: 10px; font-size: 14px; color: var(--ink2); }
.checkout-summary .checks li::before { content: "\2713"; color: #7fe3a3; font-weight: 700; }
.checkout-summary .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 16px; }
.checkout-summary .total b { font-size: 28px; }
.checkout-summary .fine { margin-top: 8px; color: var(--muted); font-size: 12.5px; }
.order { max-width: 860px; }
.order .section-head { margin-bottom: 22px; }
.key-card { padding: 30px; border-radius: 18px; background: linear-gradient(160deg, rgba(61, 190, 108, .14), rgba(35, 35, 35, .95) 60%); border: 1px solid rgba(61, 190, 108, .4); }
.key-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #9fe9b8; font-weight: 700; }
.key-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 8px; }
.key-row .cle { font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-size: clamp(20px, 3.4vw, 30px); letter-spacing: .06em; padding: 10px 16px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); }
.key-card .meta { color: var(--muted); font-size: 14px; }
.steps { margin: 18px 0; padding-inline-start: 22px; display: grid; gap: 8px; color: var(--ink2); font-size: 15px; list-style: decimal; }
.steps a { color: var(--red-hi); }
.key-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.key-actions form { margin: 0; }
.pay-card { padding: 30px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); }
.pay-card h2 { font-size: 22px; margin-bottom: 6px; }
.pay-card > p { color: var(--ink2); font-size: 15px; }
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 20px 0 14px; }
.pay-method { padding: 20px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line-soft); display: grid; gap: 10px; align-content: start; }
.pay-method h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.pay-method h3 .i { width: 18px; height: 18px; color: var(--red-hi); }
.pay-method p { color: var(--ink2); font-size: 14px; line-height: 1.5; }
.pay-method .iban { font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-size: 13.5px; white-space: pre-wrap; padding: 12px; border-radius: 10px; background: rgba(0, 0, 0, .35); color: var(--ink); }
.pay-card .fine, .order .fine { color: var(--muted); font-size: 13px; }
.pay-card .fine a, .order .fine a { color: var(--red-hi); }
.orders { margin-top: 34px; }
.orders h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; margin-bottom: 12px; }
.orders h2 .i { width: 22px; height: 22px; color: var(--red-hi); }
.orders-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.orders-table th, .orders-table td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--line-soft); }
.orders-table th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.orders-table a { color: var(--red-hi); }
.pill-attente { background: rgba(255, 179, 92, .18); color: #ffd39a; }
.pill-payee { background: rgba(61, 190, 108, .16); color: #9fe9b8; }
.pill-annulee { background: rgba(255, 255, 255, .08); color: var(--muted); }
.pill-remboursee { background: rgba(232, 53, 43, .16); color: var(--red-hi); }
.licence-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.licence-actions form { margin: 0; }
@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .orders-table th:nth-child(2), .orders-table td:nth-child(2) { display: none; }
}

/* ------------------------------------------- les offres en bas de l'accueil */

.plans.plans-shop { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: none; gap: 18px; }
.plans-shop .plan { display: flex; flex-direction: column; gap: 16px; padding: 28px 22px; }
.plans-shop .plan ul { flex: 1; align-content: start; }
.plans-shop .plan.featured { padding-top: 46px; }
.plans-shop .plan h3 { font-size: 21px; }
.plan .price .per, .offre .price .per { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.per-pc { margin-top: -8px; color: #9fe9b8; font-size: 13.5px; font-weight: 600; }
.offre .per-pc { margin-top: -4px; }
.plans-trial { margin-top: 24px; text-align: center; color: var(--ink2); font-size: 15px; }
.plans-trial a { color: var(--red-hi); font-weight: 600; }
@media (max-width: 1100px) {
  .plans.plans-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .plans.plans-shop { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .scan-feed { grid-template-columns: 1fr; max-width: 420px; }
}

/* ------------------------------------------------------------- abonnements */

.abo-card { margin-top: 22px; padding: 26px 28px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); }
.abo-card h2 { font-size: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.abo-card h3 { font-size: 16px; margin: 20px 0 8px; }
.abo-card p { color: var(--ink2); font-size: 15px; line-height: 1.55; }
.abo-card p a { color: var(--red-hi); }
.abo-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.abo-actions form { margin: 0; }
.abo-line { font-size: 14px; color: var(--ink2); padding: 10px 14px; border-radius: 10px; background: rgba(61, 190, 108, .08); border: 1px solid rgba(61, 190, 108, .25); }
.abo-line a { color: var(--red-hi); font-weight: 600; }
.abo-line.abo-resilie { background: rgba(255, 255, 255, .04); border-color: var(--line-soft); }
.abo-line.abo-impaye { background: rgba(247, 147, 30, .1); border-color: rgba(247, 147, 30, .35); }
.order-parent { margin-top: 8px; color: var(--muted); font-size: 14px; }
.order-parent a { color: var(--red-hi); }
.pill-abo-actif { background: rgba(61, 190, 108, .16); color: #9fe9b8; }
.pill-abo-resilie { background: rgba(255, 255, 255, .08); color: var(--ink2); }
.pill-abo-impaye { background: rgba(247, 147, 30, .18); color: #ffd39a; }
.pill-abo-termine { background: rgba(255, 255, 255, .06); color: var(--muted); }

/* ------------------------------------------ lier un PC à un compte (lier.php) */

.lien .pay-card .fine { margin-top: 14px; }
.lien .key-actions { margin-top: 22px; }
.lien-code { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.lien-code .field { margin: 0; flex: 1 1 220px; max-width: 340px; }
.lien-code .field input {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 20px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lien-code .field input::placeholder { color: #5a5a5a; }

/* ----------------------------------------------------------- arabe (rtl) */

/* L'arabe se lit de droite à gauche : la page porte dir="rtl" et la mise en
   page suit d'elle-même (flex, grilles, propriétés logiques start/end).
   Restent ici ce qui a son propre sens de lecture et ce qui doit rester de
   gauche à droite. Les espacements de lettres cassent les liaisons de
   l'écriture arabe : ils sont annulés. */
html[lang="ar"] { --font: "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif; }
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: normal !important; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.35; }
html[lang="ar"] .hero h1 { line-height: 1.3; }
[dir="rtl"] .hero h1 em::after { background: linear-gradient(270deg, var(--red), transparent); }
[dir="rtl"] .result-card .bar { transform-origin: right center; background: linear-gradient(270deg, var(--green), #7fe3a3); }
[dir="rtl"] .result-card::after { background: linear-gradient(255deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%); transform: translateX(110%); }
[dir="rtl"] .result-card.show::after { animation-name: reflet-rtl; }
[dir="rtl"] .result-card.fixed::after { animation-name: reflet-ok-rtl; }
@keyframes reflet-rtl { to { transform: translateX(-110%); } }
@keyframes reflet-ok-rtl { from { transform: translateX(110%); } to { transform: translateX(-110%); } }
/* La courbe d'Eyes Guard et son curseur vont de l'aube à la nuit, de gauche
   à droite comme la courbe dessinée ; une adresse e-mail, une clé, du code
   s'écrivent de gauche à droite. */
[dir="rtl"] .eg-range, [dir="rtl"] .eg-curve { direction: ltr; }
[dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }
[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }
/* Sur téléphone, l'allemand et le turc, et leurs mots longs
   (Wiederherstellungspunkte, güncellemelerinizi), se coupent avec un trait
   d'union plutôt que de déborder. */
@media (max-width: 560px) {
  html[lang="de"], html[lang="tr"] { hyphens: auto; -webkit-hyphens: auto; }
}

/* ------------------------------------------- Eyes Guard Premium (docs/27) */

/* L'accueil, section Eyes Guard : ce qui reste gratuit, ce que Premium
   ajoute, nommé fonction par fonction, puis les offres ; la couleur chaude
   d'Eyes Guard au lieu du rouge de DriverDetect. */
.badge-warm { background: var(--warm); color: #1a1000; }
.eg-premium { margin-top: 88px; }
.eg-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 26px; }
.eg-tier {
  position: relative;
  overflow-wrap: break-word;
  padding: 28px 26px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.eg-tier.premium {
  background: linear-gradient(160deg, rgba(255, 179, 92, .16), rgba(35, 35, 35, .95) 55%);
  border-color: rgba(255, 179, 92, .42);
  box-shadow: 0 30px 80px rgba(247, 147, 30, .12);
}
.eg-tier .badge { position: absolute; top: 22px; inset-inline-end: 22px; }
.eg-tier h3 { font-size: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.eg-tier.premium h3 { padding-inline-end: 96px; }
.eg-tier h3 small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.eg-feats { display: grid; gap: 14px; flex: 1; align-content: start; }
.eg-feats li { position: relative; padding-inline-start: 30px; }
.eg-feats li::before {
  content: "\2713";
  position: absolute; inset-inline-start: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: rgba(61, 190, 108, .18); color: #7fe3a3;
}
.eg-tier.premium .eg-feats li::before { content: "+"; font-size: 15px; background: rgba(255, 179, 92, .22); color: var(--warm); }
.eg-feats b { display: block; font-size: 15.5px; color: var(--ink); }
.eg-feats span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink2); line-height: 1.45; }
.eg-essai { padding: 12px 16px; border-radius: 12px; background: rgba(255, 179, 92, .1); border: 1px solid rgba(255, 179, 92, .3); color: var(--ink2); font-size: 14.5px; }
.eg-essai b { color: var(--warm); }
/* Les offres : autant par ligne qu'il en tient, sans case vide - une carte
   seule sur sa ligne prend toute la largeur (deux offres sans Stripe, trois
   avec). */
.plans.plans-eg { display: flex; flex-wrap: wrap; }
.plans-eg .plan { flex: 1 1 250px; min-width: 0; }
.plans-eg .plan.featured, .offres-eg .offre.featured {
  background: linear-gradient(160deg, rgba(255, 179, 92, .2), rgba(35, 35, 35, .95) 55%);
  border-color: rgba(255, 179, 92, .5);
  box-shadow: 0 30px 80px rgba(247, 147, 30, .16);
}
.plans-eg .per-pc, .offres-eg .per-pc { color: #ffd39a; }
.eg-premium .plans-trial b { color: var(--warm); }
@media (max-width: 760px) {
  .eg-compare { grid-template-columns: minmax(0, 1fr); }
  .eg-premium { margin-top: 64px; }
}

/* La boutique : DriverDetect Premium ou Eyes Guard Premium. */
.shop-produits { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; padding: 5px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-soft); }
.shop-produits a { flex: 1 1 auto; text-align: center; padding: 9px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink2); }
.shop-produits a:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.shop-produits a[aria-current="page"] { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }

/* Mon compte : les licences d'Eyes Guard, à la couleur d'Eyes Guard. */
.notice.notice-warm svg { color: var(--warm); }
.notice.notice-warm a { color: var(--warm); }
.licences h2 .i.warm { color: var(--warm); }
/* Le logiciel d’une offre, d’une licence, d’un PC lié (administration). */
.pill-produit-driverdetect { background: rgba(232, 53, 43, .14); color: #ff9c95; }
.pill-produit-eyesguard { background: rgba(255, 179, 92, .18); color: #ffd39a; }

/* ---------------------------------------------------------------- le marché
   L'accueil, section #premium (docs/29 du logiciel) : trois cartes côte à
   côte, PC Confort Premium - la clé pour tout - au milieu, plus haute et en
   bleu (la couleur du Center), un halo qui respire autour. Au-dessus, deux
   onglets : Annuel (choisi d'avance) et Mensuel. Ce sont deux boutons radio
   cachés : le choix montre les prix .when-an ou .when-mois sans une ligne de
   script, et se fait au clavier. Rien ne bouge qu'un transform ou une
   opacité. */
.market { position: relative; }
.bill-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bill-switch {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px;
  gap: 4px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.bill-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink2);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background .18s ease, color .18s ease;
}
.bill-tab:hover { color: var(--ink); }
.bill-save {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(61, 190, 108, .18);
  color: #7fe3a3;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
#bill-an:checked ~ .bill-switch label[for="bill-an"],
#bill-mois:checked ~ .bill-switch label[for="bill-mois"] {
  background: linear-gradient(180deg, #74b6ff, #3d8ef0);
  color: #061320;
  box-shadow: 0 8px 24px rgba(76, 154, 245, .35);
}
#bill-an:checked ~ .bill-switch label[for="bill-an"] .bill-save { background: rgba(6, 19, 32, .2); color: #061320; }
#bill-an:focus-visible ~ .bill-switch label[for="bill-an"],
#bill-mois:focus-visible ~ .bill-switch label[for="bill-mois"] { outline: 2px solid #fff; outline-offset: 2px; }
.bill-hint { margin: 14px auto 0; text-align: center; color: var(--ink2); font-size: 15px; }
.bill-hint b { color: #7fe3a3; white-space: nowrap; }
.bill-link {
  color: #7fe3a3;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}
.bill-link:hover { color: #b4f2c8; }
#bill-an:checked ~ .when-mois, #bill-an:checked ~ .market-grid .when-mois,
#bill-mois:checked ~ .when-an, #bill-mois:checked ~ .market-grid .when-an { display: none; }

.market-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 46px;
}
/* Un logiciel sans rien en vente : autant de colonnes que de cartes. */
.market-grid.mk-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.market-grid.mk-n1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
.mk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  overflow-wrap: break-word;
  transition: transform .2s ease, border-color .2s ease;
}
.mk-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .2); }
.mk-card.mk-dd { border-top: 3px solid rgba(232, 53, 43, .8); }
.mk-card.mk-eg { border-top: 3px solid rgba(255, 179, 92, .8); }
.mk-card.mk-featured {
  margin-block: -16px;
  padding: 44px 28px 30px;
  background: linear-gradient(165deg, rgba(59, 139, 235, .26), rgba(35, 35, 35, .96) 58%);
  border: 1px solid rgba(76, 154, 245, .6);
  box-shadow: 0 34px 90px rgba(59, 139, 235, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.mk-card.mk-featured:hover { border-color: rgba(116, 182, 255, .9); }
/* Le halo de la carte du milieu : il respire (une opacité seule). */
.mk-card.mk-featured::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(116, 182, 255, .85), 0 0 46px rgba(76, 154, 245, .5);
  opacity: 0;
  pointer-events: none;
  animation: mk-halo 3.6s ease-in-out infinite;
}
@keyframes mk-halo { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.mk-card .badge { position: absolute; top: 16px; inset-inline-end: 18px; }
.badge-blue { background: linear-gradient(180deg, #74b6ff, #3d8ef0); color: #061320; }
.mk-head { display: flex; align-items: center; gap: 14px; }
.mk-head img { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.mk-head h3 { font-size: 20px; }
.mk-featured .mk-head h3 { font-size: 23px; }
.mk-head p { margin-top: 3px; font-size: 14px; color: var(--muted); line-height: 1.35; }
.mk-price .price { font-size: 42px; font-weight: 800; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.mk-featured .mk-price .price { font-size: 52px; }
.mk-price .per { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.mk-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin-top: 10px;
  font-size: 15.5px;
  font-weight: 700;
  color: #9fe9b8;
}
.mk-save {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(61, 190, 108, .2);
  color: #7fe3a3;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.mk-terms { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.mk-was { margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.mk-was s { color: var(--ink2); font-weight: 600; text-decoration-color: rgba(240, 72, 62, .9); text-decoration-thickness: 2px; }
/* Ce que le prix vaut dans la vie de tous les jours : une baguette, un café. */
.mk-quotidien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 179, 92, .13);
  border: 1px solid rgba(255, 179, 92, .45);
  color: #ffd39a;
  font-size: 13.5px;
  font-weight: 700;
}
.mk-quotidien svg { width: 17px; height: 17px; flex: none; }
.mk-vers-an { color: #9fe9b8; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.mk-vers-an:hover { color: #c3f5d4; }
.mk-lot {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(76, 154, 245, .16);
  border: 1px solid rgba(76, 154, 245, .4);
  color: #a9d0ff;
  font-size: 13.5px;
  font-weight: 600;
}
.mk-feats { display: grid; gap: 10px; flex: 1; align-content: start; }
.mk-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink2); line-height: 1.4; }
.mk-feats li::before {
  content: "\2713";
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-top: 1px;
  font-size: 12px; font-weight: 700;
  background: rgba(61, 190, 108, .18); color: #7fe3a3;
}
.mk-inclus { display: grid; gap: 12px; flex: 1; align-content: start; }
.mk-inclus li { display: flex; align-items: center; gap: 12px; }
.mk-inclus img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.mk-inclus b { display: block; font-size: 15px; color: var(--ink); }
.mk-inclus span { display: block; font-size: 13.5px; color: var(--ink2); line-height: 1.35; }
.mk-one-key {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(76, 154, 245, .1);
  border: 1px solid rgba(76, 154, 245, .3);
  color: var(--ink2);
  font-size: 13.5px;
}
.mk-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 44px; }
.mk-more-title { margin-inline-end: 4px; color: var(--muted); font-size: 14px; }
.mk-chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink2);
  font-size: 14px;
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.mk-chip:hover { color: var(--ink); border-color: rgba(255, 255, 255, .3); transform: translateY(-1px); }
.mk-chip b { color: var(--ink); font-weight: 600; }
.mk-chip-free { border-color: rgba(61, 190, 108, .4); }
.mk-free {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 24px;
  align-items: center;
  margin-top: 26px;
  padding: 22px 26px;
  border-radius: 18px;
  background: rgba(61, 190, 108, .08);
  border: 1px solid rgba(61, 190, 108, .3);
}
.mk-free h3 { font-size: 18px; }
.mk-free p { margin-top: 4px; font-size: 14.5px; color: var(--ink2); line-height: 1.5; }
.mk-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 22px; color: var(--muted); font-size: 14px; }
.mk-trust li { display: inline-flex; align-items: center; gap: 8px; }
.mk-trust svg { width: 17px; height: 17px; flex: none; color: #7fe3a3; }
@media (max-width: 980px) {
  .market-grid, .market-grid.mk-n2 { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; margin-top: 34px; }
  .mk-card.mk-featured { margin-block: 0; order: -1; }
}
@media (max-width: 640px) {
  .mk-free { grid-template-columns: minmax(0, 1fr); }
  .bill-tab { padding: 9px 16px; font-size: 14.5px; }
  .mk-price .price, .mk-featured .mk-price .price { font-size: 40px; }
}
/* Le bouton de la carte du milieu : un reflet qui le traverse de temps en temps
   (un transform seul, rien qui filtre ni qui repeint le reste de la carte). */
.mk-featured .btn { position: relative; overflow: hidden; }
.mk-featured .btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: mk-shine 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mk-shine {
  0%, 62% { transform: translateX(-160%) skewX(-18deg); }
  100% { transform: translateX(420%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-card, .mk-chip, .promo-bar-go { transition: none; }
  .mk-card:hover, .mk-chip:hover, .promo-bar:hover .promo-bar-go { transform: none; }
  .mk-card.mk-featured::after { animation: none; opacity: .6; }
  .promo-bar::after { animation: none; display: none; }
  .mk-featured .btn::after { animation: none; display: none; }
}

/* ================================================================ support (0.33)
   Le centre d'aide (support.php) et la bulle d'aide de chaque page
   (assets/js/support.js) : la conversation en bulles - le client à droite
   en rouge sombre, le support à gauche en gris, les changements d'état au
   milieu -, les captures en vignettes. Côtés logiques (inline-start/end) :
   en arabe, tout se retourne seul. L'ouverture de la bulle n'anime que
   transform et opacity. */

.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; }

.support-page { padding: 56px 0 96px; }
.sp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.sp-head h1 { font-size: clamp(30px, 4vw, 44px); margin: 8px 0 10px; }
.sp-head .lead { color: var(--ink2); max-width: 640px; }
.sp-alerte { display: block; margin-bottom: 18px; color: var(--ink2); background: rgba(255, 255, 255, .04); border-color: var(--line); }
.sp-alerte a { color: var(--red-hi); text-decoration: underline; }

.sp-invite { display: grid; gap: 18px; padding: 30px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-soft); max-width: 760px; }
.sp-invite h2 { font-size: 24px; margin-bottom: 8px; max-width: none; }
.sp-invite p { color: var(--ink2); }
.sp-invite-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.sp-invite-mail { font-size: 14.5px; color: var(--muted); }
.sp-invite-mail a { color: var(--red-hi); }

.sp-layout { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.sp-liste { padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); }
.sp-liste h2 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sp-liste ul { display: grid; gap: 6px; }
.sp-vide { color: var(--muted); font-size: 14.5px; }
.sp-item { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; transition: background-color .15s, border-color .15s; }
.sp-item:hover { background: rgba(255, 255, 255, .04); }
.sp-item.actif { background: rgba(232, 53, 43, .1); border-color: rgba(232, 53, 43, .35); }
.sp-item-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sp-item-haut b { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.sp-item-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.sp-pastille { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }

.sp-statut { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, .08); color: var(--ink2); }
.st-ouvert { background: rgba(59, 139, 235, .16); color: #9cc6ff; }
.st-en_cours { background: rgba(255, 179, 92, .16); color: #ffd39a; }
.st-en_attente { background: rgba(167, 139, 250, .16); color: #cfc0ff; }
.st-resolu { background: rgba(61, 190, 108, .16); color: #9fe9b8; }
.st-ferme { background: rgba(255, 255, 255, .07); color: var(--muted); }

.sp-zone { min-width: 0; padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); }
.sp-zone h2 { font-size: 22px; overflow-wrap: anywhere; max-width: none; }
.sp-form { display: grid; gap: 4px; }
.sp-form h2 { margin-bottom: 12px; }
.sp-form select, .sp-form textarea, .sp-repondre textarea {
  width: 100%; padding: 12px 14px; border-radius: 11px; border: 1px solid #3a3a3a;
  background: #151515; color: var(--ink); font: inherit; font-size: 15.5px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.sp-form select { min-height: 48px; }
.sp-form textarea, .sp-repondre textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.sp-repondre textarea { min-height: 84px; }
.sp-form select:focus, .sp-form textarea:focus, .sp-repondre textarea:focus { border-color: var(--red-hi); box-shadow: 0 0 0 3px rgba(232, 53, 43, .2); }
.sp-fichiers small { color: var(--muted); font-size: 12.5px; }
.sp-fichiers-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-form .btn { justify-self: start; margin-top: 6px; }

.sp-ticket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 18px; }
.sp-ticket-meta { color: var(--muted); font-size: 14px; margin-top: 6px; }

.sp-fil { display: grid; gap: 14px; padding: 4px 0 6px; }
.sp-msg { display: grid; gap: 5px; max-width: min(620px, 88%); }
.sp-client { justify-self: end; justify-items: end; }
.sp-support { justify-self: start; }
.sp-bulle-msg { padding: 12px 16px; border-radius: 16px; background: var(--raised); border: 1px solid var(--line); }
.sp-client .sp-bulle-msg { background: rgba(232, 53, 43, .16); border-color: rgba(232, 53, 43, .35); border-end-end-radius: 6px; }
.sp-support .sp-bulle-msg { border-end-start-radius: 6px; }
.sp-texte { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.5; }
.sp-texte a { color: var(--red-hi); text-decoration: underline; }
.sp-meta { font-size: 12.5px; color: var(--muted); }
.sp-meta b { color: var(--ink2); font-weight: 600; }
.sp-systeme { justify-self: center; max-width: 100%; text-align: center; font-size: 13.5px; color: var(--muted); }
.sp-systeme p { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05); }
.sp-systeme .sp-meta { display: block; font-size: 11.5px; }

.sp-pieces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sp-image { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #111; }
.sp-image img { width: auto; max-width: 220px; max-height: 160px; object-fit: contain; }
.sp-fichier { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); font-size: 14px; }
.sp-fichier .i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-fichier span { overflow-wrap: anywhere; }
.sp-fichier small { color: var(--muted); white-space: nowrap; }
.sp-piece-partie { font-size: 13px; color: var(--muted); }

.sp-repondre { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.sp-repondre-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.sp-repondre-bas .form-msg { flex: 1 1 100%; order: 3; margin: 0; }
.sp-repondre-bas .btn { margin-inline-start: auto; }
.sp-joindre { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink2); font-size: 14px; font-weight: 600; cursor: pointer; }
.sp-joindre:hover { border-color: #4a4a4a; color: var(--ink); }
.sp-joindre .i { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-joindre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; min-height: 0; padding: 0; border: 0; }
.sp-joindre:focus-within { outline: 2px solid var(--red-hi); outline-offset: 2px; }
.sp-choisis { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ink2); }
.sp-choisis .sp-puce { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.sp-choisis .sp-puce button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); line-height: 1; }
.sp-choisis .sp-puce button:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.sp-fermee { margin-top: 18px; color: var(--muted); }
.sp-fermee a { color: var(--red-hi); }

@media (max-width: 860px) {
  .support-page { padding: 34px 0 72px; }
  .sp-layout { grid-template-columns: minmax(0, 1fr); }
  /* Une conversation ouverte passe avant la liste. */
  .sp-avec-zone .sp-zone { order: -1; }
  .sp-zone, .sp-liste, .sp-invite { padding: 16px; border-radius: 16px; }
  .sp-msg { max-width: 94%; }
  .sp-image img { max-width: 160px; }
}

/* ------------------------------------------------------------ la bulle d'aide */

.spw { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 60; }
.spw-btn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo)); color: #fff;
  font-size: 15px; font-weight: 700; box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  transition: transform .18s ease;
}
.spw-btn:hover { transform: translateY(-2px); }
.spw-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.spw-btn .i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spw-badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--red); font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.spw-badge[hidden] { display: none; }
.spw.ouvert .spw-btn { transform: scale(.92); }

.spw-panneau {
  position: absolute; inset-inline-end: 0; bottom: 64px;
  width: 380px; max-height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden;
  background: var(--bg1); border: 1px solid var(--line);
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(14px) scale(.98); transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
[dir="rtl"] .spw-panneau { transform-origin: bottom left; }
.spw.ouvert .spw-panneau { opacity: 1; transform: none; pointer-events: auto; }
.spw-panneau[hidden] { display: none; }
/* Une conversation ou un nouveau message : toute la hauteur ; le reste, à sa taille. */
.spw-panneau.spw-plein { height: min(560px, calc(100vh - 120px)); }
.spw-tete { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #1d1d1d, #161616); border-bottom: 1px solid var(--line-soft); }
.spw-tete b { display: block; font-size: 15.5px; }
.spw-tete small { display: block; color: var(--muted); font-size: 12.5px; }
.spw-tete .spw-retour, .spw-tete .spw-fermer { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--ink2); display: grid; place-items: center; flex: none; }
.spw-tete .spw-retour:hover, .spw-tete .spw-fermer:hover { background: rgba(255, 255, 255, .07); color: var(--ink); }
.spw-tete .spw-fermer { margin-inline-start: auto; }
.spw-tete svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .spw-retour svg { transform: scaleX(-1); }
.spw-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 12px; }
.spw-corps p { color: var(--ink2); font-size: 14.5px; }
.spw-corps .btn { justify-self: start; }
.spw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.spw-liste { display: grid; gap: 6px; }
.spw-liste button { display: grid; gap: 4px; width: 100%; text-align: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--surface); }
.spw-liste button:hover { border-color: #444; }
.spw-liste b { font-size: 14.5px; display: flex; justify-content: space-between; gap: 8px; }
.spw-liste small { color: var(--muted); font-size: 12.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spw-corps .sp-fil { gap: 10px; }
.spw-corps .sp-msg { max-width: 92%; }
.spw-corps .sp-texte { font-size: 14.5px; }
.spw-corps .sp-image img { max-width: 150px; max-height: 120px; }
.spw-pied { padding: 12px; border-top: 1px solid var(--line-soft); background: #151515; display: grid; gap: 8px; }
.spw-pied select, .spw-pied textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #3a3a3a; background: #1b1b1b;
  color: var(--ink); font: inherit; font-size: 14.5px; outline: none;
}
.spw-pied textarea { resize: none; min-height: 44px; max-height: 140px; line-height: 1.45; }
.spw-pied select:focus, .spw-pied textarea:focus { border-color: var(--red-hi); }
.spw-ligne { display: flex; align-items: center; gap: 8px; }
.spw-ligne .sp-joindre { padding: 7px 10px; }
.spw-ligne .sp-joindre span { display: none; }
.spw-ligne .btn { margin-inline-start: auto; min-height: 40px; padding: 0 16px; font-size: 14px; }
.spw-erreur { color: #ffb3ad; font-size: 13px; }
.spw-lien { font-size: 13px; color: var(--muted); }
.spw-lien a { color: var(--red-hi); }

@media (max-width: 560px) {
  .spw { inset-inline-end: 14px; bottom: 14px; }
  .spw-btn { min-height: 48px; padding: 0 16px 0 14px; }
  .spw-btn span { display: none; }
  .spw-btn { padding: 0; width: 52px; justify-content: center; }
  .spw-panneau, .spw-panneau.spw-plein { position: fixed; inset: 0; width: auto; height: auto; max-height: none; border-radius: 0; bottom: 0; transform-origin: bottom center; }
  .spw.ouvert .spw-btn { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spw-panneau, .spw-btn { transition: none; }
}
@media print { .spw { display: none; } }

/* « Mot de passe oublié ? » dans la fenêtre de connexion, et la sécurité du
   compte dans Mon compte (0.33). */
.auth-oubli { justify-self: end; border: 0; background: none; padding: 2px 0; color: var(--muted); font-size: 13px; text-decoration: underline; }
.auth-oubli:hover { color: var(--red-hi); }
.auth.mode-oubli .auth-tabs, .auth.mode-oubli .auth-social, .auth.mode-oubli .or { display: none; }
.auth-oubli-titre { font-size: 20px; margin-bottom: 8px; }
.auth-oubli-texte { color: var(--ink2); font-size: 14.5px; margin-bottom: 14px; }
.securite-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.securite-grille form { padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); display: grid; gap: 4px; align-content: start; }
.securite-grille h3 { font-size: 17px; margin-bottom: 8px; }
.securite-grille .btn { justify-self: start; margin-top: 6px; }
.muted-line { color: var(--muted); font-size: 14.5px; margin-bottom: 10px; }
.compte-demandes { display: grid; gap: 8px; margin: 6px 0 12px; }
.compte-demandes li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-soft); }
.compte-demandes a { color: var(--ink); }
.compte-demandes a:hover { color: var(--red-hi); }
.reinit-form { max-width: 460px; }
@media (max-width: 760px) {
  .securite-grille { grid-template-columns: 1fr; }
}