/* KaroliveBox KJ (karolivekj.com) — mêmes polices et couleurs que la page
   d'accueil de karolive.com (css/styles.css, assets/ACCUEIL_FR.png) :
   fond noir, DM Sans (texte), Barlow Condensed (titres), bleu #145cff,
   cyan #00c8ff, rose #e80055, néons. Ordinateur en paysage uniquement. */
:root {
  --black: #030507;
  --panel: #080e15;
  --panel-2: #0b1821;
  --line: #20323b;
  --tab-line: #6f9fc4;
  --white: #f4f7fb;
  --muted: #9aa9b7;
  --text: #d8dee5;
  --blue: #145cff;
  --cyan: #00c8ff;
  --pink: #e80055;
  --gold: #ffd34d;
  --ok: #3cb371;
  --bad: #ef4565;
  --font-body: 'DM Sans', sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 1024px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 75% 16%, rgba(0, 112, 255, .13), transparent 31%),
              linear-gradient(120deg, transparent 55%, rgba(6, 20, 42, .5));
}
a { color: var(--cyan); }
img { max-width: 100%; height: auto; }

/* ---- En-tête : logo + onglets (comme karolive.com) ---------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px clamp(18px, 3vw, 50px);
  background: rgba(3, 5, 7, .95);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.brand-title {
  font: 700 34px var(--font-body); letter-spacing: -1px; color: var(--white);
  text-shadow: 0 0 14px rgba(20, 92, 255, .35);
}
.brand-title .box { color: var(--blue); }
.brand-title .kj { color: var(--gold); margin-left: 6px; text-shadow: 0 0 12px rgba(255, 211, 77, .45); }
.brand-sub {
  margin-top: 4px; color: var(--pink);
  font: 700 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
.main-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nav-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(8, 14, 21, .85);
  border: 1.5px solid var(--tab-line); border-radius: 8px;
  box-shadow: 0 0 8px rgba(111, 159, 196, .25);
  color: var(--white); font: 500 14px var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.nav-tab svg { width: 18px; height: 18px; flex: none; }
.nav-tab:hover, .nav-tab.active { background: var(--panel-2); border-color: var(--cyan); box-shadow: 0 0 12px rgba(0, 200, 255, .45); }
.nav-tab.active { color: #fff; }
.nav-tab.highlight {
  background: linear-gradient(110deg, #124de5, #194fff);
  border-color: #4f86ff; box-shadow: 0 0 16px rgba(25, 79, 255, .7);
}
.nav-tab.highlight:hover, .nav-tab.highlight.active { filter: brightness(1.2); border-color: #9cc0ff; }
.nav-tab.icon-only { padding: 8px 10px; }
.nav-sep { width: 1px; height: 28px; background: var(--line); margin: 0 4px; }

/* ---- Onglets (une page à la fois) --------------------------------------- */
.tab-page { scroll-margin-top: 120px; max-width: 1400px; margin: 0 auto; padding: 36px clamp(24px, 4vw, 62px) 40px; }
.page-heading { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 28px; }
p.eyebrow, .eyebrow { color: var(--pink); font: 700 14px var(--font-body); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.page-heading h1, .neon-title {
  font: 600 58px/1 var(--font-display); margin: 0; text-transform: uppercase;
}
.page-heading p { color: var(--muted); margin: 8px 0 0; font-size: 16px; }
h2 { font: 600 34px/1.05 var(--font-display); margin: 0 0 14px; text-transform: uppercase; }
h3 { font: 600 20px var(--font-display); text-transform: uppercase; margin: 0 0 6px; color: #dfe8f0; letter-spacing: .02em; }
p { color: var(--text); }
.small { color: var(--muted); font-size: 13px; }
.center { text-align: center; }

/* Néons (titres de karolive.com) */
.neon-blue { color: #8fd8ff; text-shadow: 0 0 8px var(--cyan), 0 0 22px var(--blue); }
.neon-pink { color: #ff7ad0; text-shadow: 0 0 8px #ff2fa8, 0 0 22px #b100ff; }
.neon-gold { color: var(--gold); text-shadow: 0 0 8px rgba(255, 211, 77, .8), 0 0 20px rgba(255, 150, 0, .5); }

/* ---- Accueil ------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(440px, .78fr) minmax(500px, 1.22fr); gap: 3vw; align-items: center; min-height: 560px; }
.hero-slogan { white-space: nowrap; font: italic 500 clamp(17px, 1.55vw, 24px) var(--font-body); color: #ff9fdc; text-shadow: 0 0 10px #ff2fa8; margin: 0 0 6px; }
.hero h1 {
  font: 700 clamp(56px, 5.4vw, 80px)/.95 var(--font-body); letter-spacing: -2px; margin: 0; white-space: nowrap;
  color: var(--white); text-shadow: 0 0 24px rgba(20, 92, 255, .45);
}
.hero h1 .box { color: var(--blue); }
.hero h1 .kj { color: var(--gold); text-shadow: 0 0 18px rgba(255, 211, 77, .55); }
.hero-tags { font: 700 22px var(--font-display); letter-spacing: .02em; text-transform: uppercase; margin: 12px 0 18px; }
.hero-tags span:nth-child(1) { color: var(--gold); }
.hero-tags span:nth-child(2) { color: var(--cyan); }
.hero-tags span:nth-child(3) { color: #6f8dff; }
.hero-tags span:nth-child(4) { color: #ff7ad0; }
.hero-tags span:nth-child(5) { color: #00ffe1; }
.hero-text { color: #d0d8e0; max-width: 590px; font-size: 16px; }
.feature-list { list-style: none; margin: 22px 0; padding: 0; }
.feature-list li { color: #d3dbe3; font-size: 16px; margin: 12px 0; padding-left: 30px; }
.feature-list li::before { color: var(--blue); content: '✓'; font-size: 22px; font-weight: 700; margin-left: -30px; margin-right: 10px; }
.feature-list strong { color: var(--cyan); font-weight: 500; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }

.capabilities { border-top: 1px solid #15212b; display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; padding: 26px 0 10px; margin-top: 24px; }
.capabilities article { display: flex; gap: 11px; }
.capability-icon { color: var(--blue); font-size: 30px; line-height: 1; }
.capabilities h3 { font: 500 15px var(--font-display); margin: 0; }
.capabilities p { color: var(--muted); font-size: 12px; margin: 3px 0 0; }

/* ---- Boutons ------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 8px;
  border: 1.5px solid var(--tab-line); background: rgba(8, 14, 21, .85);
  color: var(--white); font: 500 15px var(--font-body);
  text-decoration: none; cursor: pointer; transition: filter .2s, transform .2s;
}
.button:hover { filter: brightness(1.2); transform: translateY(-1px); }
.button.primary {
  background: linear-gradient(110deg, #124de5, #194fff); border-color: #4f86ff;
  box-shadow: 0 0 16px rgba(25, 79, 255, .55);
}
.button:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.download-button { flex-direction: column; align-items: flex-start; gap: 0; padding: 14px 26px; font-size: 22px; border-radius: 10px; box-shadow: 0 0 24px rgba(25, 79, 255, .75); }
.download-button small { font-size: 13px; opacity: .85; }
.link { background: none; border: 0; padding: 4px 0; color: var(--cyan); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---- Emplacements des captures d'écran ---------------------------------- */
.shot {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid #1f3f67; border-radius: 6px;
  box-shadow: 0 0 50px rgba(0, 85, 255, .17);
  background: #05090d;
  aspect-ratio: 16 / 9;
}
.shot.portrait { aspect-ratio: 9 / 19; max-width: 210px; margin: 0 auto; border-radius: 26px; border-width: 6px; border-color: #1b2733; }
.shot.a4 { aspect-ratio: 210 / 297; max-width: 300px; margin: 0 auto; }
.shot.tilt { transform: perspective(900px) rotateY(-3deg); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot-placeholder {
  position: absolute; inset: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed rgba(0, 200, 255, .45); border-radius: 4px;
  color: var(--muted); text-align: center; padding: 12px;
}
.shot-placeholder b { color: #8fd8ff; font: 600 20px var(--font-display); text-transform: uppercase; }
.shot-placeholder code { color: var(--pink); font-size: 12px; }
.shot.loaded .shot-placeholder { display: none; }
.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; font-size: 12px; color: var(--muted); background: rgba(3, 5, 7, .8); }
.shot:not(.loaded) figcaption { display: none; }

/* ---- Grilles et cartes -------------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { background: rgba(8, 14, 21, .85); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.feature .shot { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.feature-body { padding: 16px 18px 18px; }
.feature-body p { margin: 0; color: var(--muted); }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.three-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: end; margin-bottom: 30px; }
.three-shots p { text-align: center; margin: 10px 0 0; color: var(--muted); }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: step; position: relative; padding: 12px 16px 12px 58px; background: rgba(8, 14, 21, .85); border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
.steps li::before { content: counter(step); position: absolute; left: 16px; top: 8px; font: 700 28px var(--font-display); color: var(--blue); }

/* ---- Tarifs --------------------------------------------------------------- */
.trial { color: var(--gold); font-weight: 700; font-size: 17px; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 22px 0; }
.plan {
  display: flex; flex-direction: column; text-align: center;
  background: rgba(8, 14, 21, .85); border: 1.5px solid var(--tab-line); border-radius: 10px;
  padding: 22px 18px; box-shadow: 0 0 10px rgba(111, 159, 196, .2);
}
.plan h3 { font: 700 28px var(--font-display); color: #8fd8ff; text-shadow: 0 0 8px rgba(0, 200, 255, .6); }
.plan.best { border-color: #4f86ff; box-shadow: 0 0 22px rgba(25, 79, 255, .6); }
.plan .desc { color: var(--muted); margin: 0 0 8px; }
.plan .price { font: 700 40px var(--font-display); color: var(--white); margin: 4px 0 2px; }
.plan .per-show { color: var(--gold); font-size: 15px; margin: 0 0 16px; }
.plan .per-show b { font-weight: 700; }
.plan .button { margin-top: auto; }

/* ---- Configuration -------------------------------------------------------- */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { width: 26%; font: 600 18px var(--font-display); text-transform: uppercase; color: #8fd8ff; }
.spec td { color: var(--text); }
.spec thead th { color: var(--white); border-bottom-color: var(--tab-line); }

/* ---- Aide / FAQ ---------------------------------------------------------- */
.faq details { background: rgba(8, 14, 21, .85); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 500; color: var(--white); }
.faq details p { color: var(--muted); margin: 10px 0 0; }
.help-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 30px; }
.help-card { background: rgba(8, 14, 21, .85); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.help-card p { color: var(--muted); margin: 0 0 12px; }

/* ---- Compte et formulaires (comme les boîtes de karolive.com) ------------ */
.panel { max-width: 640px; margin: 0 auto; background: #081118; border: 1px solid #28566d; box-shadow: 0 15px 80px #000; border-radius: 6px; padding: 30px; }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tab { flex: 1; padding: 10px; border-radius: 6px; border: 1.5px solid var(--line); background: #05090d; color: var(--muted); font: 500 15px var(--font-body); cursor: pointer; }
.tab.active { color: #fff; background: linear-gradient(110deg, #124de5, #194fff); border-color: #4f86ff; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 5px; color: #b9c7d3; font-size: 13px; text-transform: uppercase; }
.form input[type="email"], .form input[type="password"], .form input[type="text"], .form input:not([type]) {
  background: #05090d; border: 1px solid var(--line); border-radius: 3px;
  color: var(--white); font: 16px var(--font-body); padding: 11px;
}
.form input:focus { border-color: var(--cyan); outline: 2px solid rgba(0, 200, 255, .14); }
.form .check { flex-direction: row; align-items: flex-start; gap: 10px; text-transform: none; font-size: 14px; color: var(--text); }
.form .check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--blue); }
.status { min-height: 1.4em; color: var(--bad); font-weight: 500; margin: 10px 0 0; }
.status.ok { color: var(--ok); }
.status-box { display: flex; flex-direction: column; gap: 4px; margin: 14px 0; padding: 12px 14px; background: #05090d; border-left: 2px solid var(--cyan); color: #aeefff; }
.status-box .ok { color: var(--ok); }
.status-box .gold { color: var(--gold); }
.status-box:empty { display: none; }
.downloads { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.member-email { color: #00ffe1; text-shadow: 0 0 6px #00ffe1, 0 0 12px #00c2ff; font-weight: 700; }

.banner { max-width: 900px; margin: 18px auto 0; padding: 12px 16px; border-radius: 6px; background: #3a1620; color: #ffd9e0; font-weight: 700; text-align: center; }
.banner.ok { background: #0b2a1c; color: #c9f5da; border: 1px solid #1f6b46; }

.dialog { width: min(540px, calc(100vw - 32px)); background: #081118; color: var(--white); border: 1px solid #28566d; box-shadow: 0 15px 80px #000; padding: 30px; }
.dialog::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(3px); }
.dialog h2 { font-size: 34px; }
.buy-summary { font-size: 18px; margin: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }

.site-footer { border-top: 1px solid #17232d; color: #70818d; display: flex; justify-content: space-between; gap: 16px; padding: 18px clamp(24px, 4vw, 62px); font-size: 12px; margin-top: 30px; }
.site-footer a { color: #70818d; }

/* ---- Pages légales -------------------------------------------------------- */
.legal { max-width: 900px; margin: 0 auto; padding: 30px 24px 50px; }
.legal h1 { font: 600 46px/1 var(--font-display); text-transform: uppercase; }
.legal h2 { font-size: 24px; margin-top: 30px; }
.legal h3 { font-size: 18px; margin-top: 16px; }
.legal p, .legal li { color: var(--text); }
.legal .todo { background: #3a2c05; color: var(--gold); padding: 0 4px; border-radius: 3px; font-weight: 700; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* ---- Ordinateur en paysage uniquement ------------------------------------- */
.desktop-only { display: none; }
@media (orientation: portrait), (max-width: 1023px), (pointer: coarse) and (max-width: 1366px) {
  body { min-width: 0; }
  body > :not(.desktop-only) { display: none !important; }
  .desktop-only {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px; text-align: center; gap: 16px;
  }
  .desktop-only img {
    width: 110px; height: 110px; object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 71%);
    mask-image: radial-gradient(circle, #000 62%, transparent 71%);
  }
  .desktop-only p { color: var(--muted); max-width: 420px; margin: 0; }
  .desktop-only h1 { font: 700 26px var(--font-body); margin: 0; }
}

/* ---- Ajouts : image d'accueil, compte dans la barre, désabonnement ------ */
.shot.bare { border: 0; box-shadow: none; background: transparent; aspect-ratio: 1810 / 869; }
.shot.bare img { object-fit: contain; }
.account-slot { position: relative; display: flex; flex-direction: column; align-items: center; }
.nav-email {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font: 700 12px var(--font-body); text-decoration: none;
  color: #00ffe1; text-shadow: 0 0 6px #00ffe1, 0 0 12px #00c2ff;
}
.center-actions { justify-content: center; margin-top: 10px; }
.panel.center { text-align: center; }
.pl-box { margin-top: 34px; padding: 22px; background: rgba(8, 14, 21, .85); border: 1px solid var(--line); border-radius: 8px; }
.pl-box p { color: var(--muted); }
.version { color: #00ffe1; font: 700 22px var(--font-display); }
.two-cols.top { align-items: start; }
h2.spaced { margin-top: 36px; }
.feature-grid + h2 { margin-top: 36px; }
.button.danger { background: #3a0d1a; border-color: var(--pink); box-shadow: 0 0 12px rgba(232, 0, 85, .4); }
.link.danger { color: #ff6f9a; }
.account-actions { margin-top: 18px; color: var(--muted); }
.banner.info { background: #0b1a2e; color: #cfe6ff; border: 1px solid #28566d; }

/* À propos : une colonne lisible */
.about { max-width: 920px; }
.about > p { font-size: 17px; line-height: 1.65; }
.about h2 { margin-top: 30px; }
.about .steps li { font-size: 16px; }

.tip { max-width: 980px; margin: 4px auto 14px; padding: 14px 18px; text-align: center;
  background: rgba(8, 14, 21, .85); border: 1px solid #4a3d12; border-radius: 8px; color: #f3e3a8; }

/* Tarifs : prix de lancement */
.launch { margin: 0 0 6px; font: 700 26px var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: #ff7ad0; text-shadow: 0 0 8px #ff2fa8, 0 0 20px #b100ff; }

/* Tarifs : tout tient sur un écran d'ordinateur (portable compris). */
#tarifs.tab-page { padding-top: 18px; padding-bottom: 12px; }
#tarifs .page-heading { padding-bottom: 10px; margin-bottom: 10px; }
#tarifs .page-heading h1 { font-size: 46px; }
#tarifs .page-heading p { font-size: 15px; margin-top: 4px; }
#tarifs .launch { font-size: 24px; margin: 0; }
#tarifs .trial { font-size: 16px; margin: 2px 0 0; }
#tarifs .plans { margin: 12px 0 10px; gap: 16px; }
#tarifs .plan { padding: 14px 16px; }
#tarifs .plan h3 { font-size: 24px; margin-bottom: 2px; }
#tarifs .plan .desc { font-size: 14px; line-height: 1.5; margin: 0 0 2px; min-height: 3em; }
#tarifs .plan .price { font-size: 34px; margin: 0; }
#tarifs .plan .per-show { font-size: 14px; margin: 0 0 10px; }
#tarifs .plan .button { padding: 8px 18px; }
#tarifs .tip { margin: 0 auto 6px; padding: 9px 16px; font-size: 14px; }
#tarifs .tip + p { margin: 0; }

/* Accueil : texte + image en haut ; « Télécharger » + 6 points forts sur la
   même ligne en bas ; tout tient sur un écran d'ordinateur (portable compris). */
#accueil.tab-page { padding-top: clamp(10px, 2.2vh, 30px); padding-bottom: 8px; }
.hero {
  grid-template-columns: minmax(430px, .8fr) minmax(500px, 1.2fr);
  grid-template-areas: "copy visual" "cta caps";
  column-gap: 3vw; row-gap: clamp(10px, 2vh, 22px);
  align-items: center; min-height: 0;
}
.hero-copy { grid-area: copy; }
.hero-visual { grid-area: visual; }
.hero-cta { grid-area: cta; }
.hero .capabilities {
  grid-area: caps; margin: 0; padding: 0; border-top: 0;
  grid-template-columns: repeat(6, 1fr); gap: 10px; align-self: center;
}
.hero .capabilities article { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.hero .capability-icon { font-size: clamp(20px, 2.4vh, 28px); }
.hero .capabilities h3 { font-size: 14px; }
.hero .capabilities p { font-size: 11px; margin: 0; }
.hero-slogan { margin: 0 0 2px; }
.hero h1 { font-size: clamp(48px, min(5.2vw, 9vh), 80px); }
.hero-tags { font-size: clamp(16px, 2.3vh, 22px); margin: clamp(4px, 1vh, 12px) 0 clamp(6px, 1.4vh, 16px); }
.hero-text { font-size: clamp(14px, 1.9vh, 16px); margin: 0; }
.feature-list { margin: clamp(6px, 1.4vh, 20px) 0 0; }
.feature-list li { font-size: clamp(14px, 1.9vh, 16px); margin: clamp(3px, 0.8vh, 10px) 0; }
.download-button { padding: clamp(8px, 1.4vh, 14px) 26px; font-size: clamp(18px, 2.4vh, 22px); }

/* Bouton « contact » posé sur celui de l'image : plus grand et cliquable. */
.contact-overlay {
  position: absolute; z-index: 2;
  left: 66%; top: 87.4%; width: 33%; height: 11%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #04080d; border: 2px solid #00c8ff; border-radius: 999px;
  box-shadow: 0 0 14px rgba(0, 200, 255, .65), inset 0 0 10px rgba(0, 200, 255, .25);
  color: #00e5ff; font: 700 2.2cqw var(--font-body); text-decoration: none;
  text-shadow: 0 0 8px rgba(0, 200, 255, .6); white-space: nowrap;
}
.contact-overlay:hover { background: #082033; color: #fff; }
.shot:not(.loaded) .contact-overlay { display: none; }
.hero-visual .shot { container-type: inline-size; }
/* Grands écrans : la page s'élargit et se centre en hauteur. */
#accueil.tab-page {
  max-width: min(1720px, 96vw);
  min-height: calc(100vh - 92px - 86px);
  display: flex; flex-direction: column; justify-content: center;
}
#accueil .hero { column-gap: 2.5vw; }
.hero .capabilities p { white-space: nowrap; }
.hero .capabilities h3 { white-space: nowrap; }

/* Mot de passe : œil pour l'afficher / le masquer. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px !important; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--cyan); background: rgba(0, 200, 255, .08); }
.pw-toggle svg { width: 20px; height: 20px; }