:root {
  color-scheme:dark;
  --bg:#07090d;
  --panel:#0e131c;
  --text:#f4f7fb;
  --muted:#9ca9bb;
  --cyan:#29b6f6;
  --blue:#1677ff;
  --border:#242d3b;
  --heading:'Sora',sans-serif;
  --body:'Inter',sans-serif}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 var(--body)}
a {
  color:inherit;
  text-decoration:none}
button,input,select,textarea {
  font:inherit}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid var(--cyan);
  outline-offset:5px}
a:hover {
  color:var(--cyan)}
h1,h2,h3,p {
  margin:0}
h1,h2,h3 {
  font-family:var(--heading);
  line-height:1.2}
h2 {
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:500;
  letter-spacing:-.055em}
h3 {
  font-size:1.2rem;
  letter-spacing:-.025em}
p {
  color:var(--muted)}
.container {
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto}
.section {
  padding-block:76px}
.eyebrow {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--cyan);
  margin-bottom:22px}
.micro {
  font-size:.8rem;
  line-height:1.7;
  margin-top:18px}
.muted {
  color:var(--muted)}
.center {
  text-align:center}
.center>p:not(.eyebrow) {
  margin-top:20px}
/* ===== Système de boutons Fluxo =====
   .button            primaire (action commerciale principale)
   .button.secondary  secondaire (fond sombre, bordure bleutée)
   .button.ghost      tertiaire (discret, bordure fine)
   .button.small      taille compacte (en-tête, listes de liens), toujours >= 44 px de haut
   .card-link         grande carte cliquable (WhatsApp, Nous contacter…)
   .icon-btn          bouton rond réservé à une icône (flèches, fermeture) : aria-label obligatoire */
:root {
  --btn-radius:10px;
  --btn-h:52px;
  --btn-h-sm:44px;
  --btn-line:#4a6580;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:var(--btn-h);
  padding:13px 26px;
  background:var(--cyan);
  color:#031323;
  border:1px solid transparent;
  border-radius:var(--btn-radius);
  font-family:var(--body);
  font-weight:700;
  font-size:.92rem;
  line-height:1.25;
  text-align:center;
  cursor:pointer;
  box-shadow:0 1px 0 #ffffff40 inset, 0 10px 24px -14px #29b6f6a6;
  transition:background .2s,border-color .2s,box-shadow .2s,transform .2s,color .2s}
.button:hover {
  background:#6fcdfb;
  color:#031323;
  transform:translateY(-2px);
  box-shadow:0 1px 0 #ffffff59 inset, 0 14px 28px -14px #29b6f6cc}
.button:active {
  background:#1fa3e6;
  transform:translateY(0);
  box-shadow:none}
.button.secondary {
  background:#15263a;
  border-color:var(--btn-line);
  color:var(--text);
  box-shadow:0 1px 0 #ffffff0d inset}
.button.secondary:hover {
  background:#1b3450;
  border-color:var(--cyan);
  color:var(--text);
  box-shadow:0 1px 0 #ffffff0d inset, 0 12px 26px -16px #29b6f6a6}
.button.secondary:active {
  background:#122032}
.button.ghost {
  background:transparent;
  border-color:#33455a;
  color:#d6e2f0;
  box-shadow:none}
.button.ghost:hover {
  background:#101b29;
  border-color:var(--cyan);
  color:var(--text);
  box-shadow:none}
.button.small {
  min-height:var(--btn-h-sm);
  padding:9px 18px;
  font-size:.85rem}
.button:disabled,.button[aria-disabled=true] {
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none}
.header {
  position:sticky;
  top:0;
  z-index:10;
  background:#07090def;
  border-bottom:1px solid #ffffff0d;
  backdrop-filter:blur(18px)}
.header-inner {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px}
.brand {
  display:inline-flex;
  flex-shrink:0}
.brand img {
  width:145px;
  height:auto}
nav {
  display:flex;
  align-items:center;
  gap:28px}
nav a {
  font-size:.84rem;
  color:#c2c9d5}
.menu-toggle {
  display:none;
  background:none;
  color:white;
  border:1px solid var(--border);
  border-radius:5px;
  padding:8px 12px;
  min-height:44px}
.hero {
  position:relative;
  min-height:690px;
  overflow:hidden;
  background:radial-gradient(ellipse at 80% 50%,#072b50,transparent 60%)}
.hero-art {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#07090df0 0%,#07090d80 44%,transparent 72%),linear-gradient(0deg,var(--bg),transparent 25%),url('assets/images/fluxo-orbit.jpg') center/cover no-repeat;
  opacity:.9}
.hero-content {
  position:relative;
  padding-top:88px}
.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:10px}
.line {
  width:27px;
  height:1px;
  background:var(--cyan)}
h1 {
  font-size:clamp(3.7rem,7.5vw,6.5rem);
  letter-spacing:-.065em;
  font-weight:500;
  line-height:1.06}
h1 span {
  color:var(--cyan)}
.hero-copy {
  margin-top:27px;
  max-width:470px;
  font-size:1rem;
  color:#b9c3d2}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px}
.hero-note {
  font-size:.75rem}
.hero-foot {
  display:flex;
  justify-content:space-between;
  margin-top:76px;
  padding-bottom:24px;
  color:#77879b;
  font-size:.7rem;
  letter-spacing:.14em}
.orbit-label {
  position:absolute;
  right:11%;
  top:57%;
  font-family:var(--heading);
  font-size:.75rem;
  letter-spacing:.25em;
  color:#b3dcff}
.orbit-label span {
  display:block;
  margin-top:12px;
  font: .6rem var(--body);
  letter-spacing:.16em;
  color:#7196bb}
.launch-strip {
  border-block:1px solid var(--border);
  background:#0c1119}
.launch-strip>.container {
  display:flex;
  align-items:center;
  gap:18px;
  padding-block:20px}
.tag {
  font-size:.65rem;
  letter-spacing:.1em;
  border:1px solid #265177;
  background:#12263a;
  color:#85cdf9;
  border-radius:3px;
  padding:4px 9px;
  white-space:nowrap}
.launch-strip p {
  font-size:.85rem;
  color:#d7dce5}
.launch-strip p span {
  color:var(--muted)}
.launch-strip a {
  margin-left:auto;
  white-space:nowrap;
  font-size:.8rem}
.section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:36px}
.section-head>p {
  max-width:360px;
  font-size:.9rem}
.univers-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px}
.universe {
  padding:24px;
  border:1px solid var(--border);
  border-radius:8px;
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  background:radial-gradient(ellipse at 100% 0%,#133954,transparent 70%),#0d141e}
.u2 {
  background:radial-gradient(ellipse at 100% 0%,#202455,transparent 70%),#0e121d}
.u3 {
  background:radial-gradient(ellipse at 100% 0%,#11434a,transparent 70%),#0d141e}
.universe-number {
  font-size:.68rem;
  letter-spacing:.12em;
  color:#9faec1}
.category-symbol {
  display:block;
  font-size:3.3rem;
  line-height:1.3;
  color:#77caf5;
  margin-bottom:20px}
.universe p {
  font-size:.85rem;
  margin-top:10px}
.pricing-section {
  background:linear-gradient(#0a101a,var(--bg));
  border-block:1px solid #151c28}
.duration {
  display:flex;
  justify-content:center;
  gap:4px;
  background:#101823;
  border:1px solid var(--border);
  border-radius:8px;
  padding:5px;
  width:fit-content;
  margin:32px auto 0}
.duration button {
  background:transparent;
  border:0;
  color:#a7b2c4;
  font-size:.9rem;
  padding:12px 22px;
  border-radius:5px}
.duration button[aria-pressed=true] {
  background:#273d54;
  color:white}
.duration button span {
  display:block;
  color:#86d0f6;
  font-size:.65rem}
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:42px;
  align-items:stretch}
.price-card {
  position:relative;
  border:1px solid var(--border);
  border-radius:9px;
  padding:30px;
  background:#0e141e}
.plan-number {
  font-size:.67rem;
  letter-spacing:.13em;
  margin-bottom:18px}
.price-card h3 {
  font-size:1.6rem;
  margin-bottom:10px}
.price-card h3 span {
  float:right;
  color:var(--cyan)}
.price-card>p:not(.plan-number):not(.monthly):not(.card-note) {
  font-size:.85rem;
  min-height:48px}
.price {
  display:flex;
  align-items:baseline;
  gap:4px;
  margin-top:25px;
  white-space:nowrap;
  font-family:var(--heading)}
.price>[data-price] {
  font-size:2.9rem;
  letter-spacing:-.06em}
.currency {
  font-size:1.5rem}
.period {
  font-family:var(--body);
  font-size:.85rem;
  color:var(--muted);
  margin-left:5px}
.monthly {
  font-size:.8rem;
  margin-bottom:24px}
.price-card .button {
  width:100%}
.price-card ul {
  list-style:none;
  padding:24px 0 0;
  margin:25px 0 20px;
  border-top:1px solid var(--border)}
.price-card li {
  font-size:.83rem;
  margin-bottom:12px;
  color:#c4cedc;
  padding-left:23px;
  position:relative}
.price-card li:before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--cyan)}
.card-note {
  font-size:.75rem;
  line-height:1.7}
.featured {
  border-color:var(--cyan);
  background:linear-gradient(150deg,#102b43,#0e141e 65%)}
.featured-label {
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  background:var(--cyan);
  color:#032036;
  padding:4px 16px;
  border-radius:20px;
  font-size:.66rem;
  letter-spacing:.1em;
  font-weight:700}
.pricing-note {
  font-size:.8rem;
  text-align:center;
  max-width:850px;
  margin:24px auto 0}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
  margin-top:50px}
.steps article {
  border-top:1px solid var(--border);
  padding-top:22px}
.steps article>span {
  font:1rem var(--heading);
  color:var(--cyan)}
.steps h3 {
  margin-top:30px;
  margin-bottom:15px}
.steps p {
  font-size:.9rem}
.compatibility {
  text-align:center;
  border-block:1px solid var(--border)}
.compatibility>p:not(.eyebrow) {
  margin:20px auto;
  max-width:600px}
.devices {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:35px;
  gap:15px}
.devices span {
  font-size:3rem;
  color:#a6bfd6;
  line-height:1.4}
.devices h3 {
  font-family:var(--body);
  font-size:.85rem;
  font-weight:500}
.advantages {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px}
.advantage-list article {
  display:flex;
  gap:24px;
  padding-block:24px;
  border-bottom:1px solid var(--border)}
.advantage-list article:first-child {
  padding-top:0}
.advantage-list article>span {
  font-size:1.6rem;
  color:var(--cyan)}
.advantage-list p {
  font-size:.88rem;
  margin-top:10px}
.test-panel {
  padding:50px;
  border:1px solid #25415c;
  background:radial-gradient(ellipse at 0 100%,#103654,transparent 70%),#0d141e;
  border-radius:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px}
.test-panel h2 {
  font-size:2.4rem}
.test-panel p {
  margin-top:20px}
.test-mark {
  font:italic 9rem var(--heading);
  color:#29b6f636;
  line-height:1;
  margin-top:60px;
  letter-spacing:-.1em}
.test-mark span {
  color:#29b6f6;
  font-size:5rem}
.test-panel form {
  display:flex;
  flex-direction:column;
  gap:10px}
.form-status {
  font-size:.8rem;
  background:#152435;
  border-left:2px solid var(--cyan);
  padding:12px;
  margin-top:0!important;
  color:#bcd0e4}
label {
  font-size:.85rem;
  margin-top:8px}
input,select,textarea {
  width:100%;
  border:1px solid #344253;
  background:#080e17;
  border-radius:5px;
  padding:12px 14px;
  color:var(--text);
  min-height:47px}
textarea {
  resize:vertical}
.consent {
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:.75rem;
  color:#bac5d4;
  line-height:1.6}
.consent input {
  width:17px;
  min-height:17px;
  flex-shrink:0;
  margin:3px 0;
  accent-color:var(--cyan)}
.consent a {
  text-decoration:underline}
.test-panel .button {
  margin-top:12px}
.test-panel #form-feedback {
  margin:0;
  font-size:.85rem;
  color:#c4e8ff}
.faq {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:70px}
.faq>div>p:not(.eyebrow) {
  margin-top:24px}
.text-link {
  color:var(--cyan);
  font-size:.9rem}
.faq-list details {
  border-bottom:1px solid var(--border)}
summary {
  list-style:none;
  padding:23px 35px 23px 0;
  position:relative;
  cursor:pointer;
  font-size:.95rem}
summary::-webkit-details-marker {
  display:none}
summary:after {
  content:'+';
  position:absolute;
  right:2px;
  color:var(--cyan);
  font-size:1.3rem;
  top:17px}
details[open] summary:after {
  content:'−'}
.faq-list details p {
  padding:0 28px 24px 0;
  font-size:.88rem}
.support-band {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-block:1px solid var(--border);
  padding-block:40px;
  gap:20px}
.support-band h2 {
  font-size:1.7rem}
.support-band .eyebrow {
  margin-bottom:10px}
footer {
  padding-block:40px 25px}
.footer-top,.footer-bottom {
  display:flex;
  align-items:center;
  gap:24px}
.footer-top p {
  margin-right:auto;
  font-size:.8rem}
.footer-top>a:not(.brand),.footer-bottom {
  font-size:.75rem}
.footer-bottom {
  border-top:1px solid var(--border);
  margin-top:32px;
  padding-top:22px;
  justify-content:space-between}
.footer-bottom div {
  display:flex;
  gap:22px}
.skip {
  position:fixed;
  top:-100px;
  left:15px;
  z-index:30;
  background:var(--cyan);
  color:#000;
  padding:12px}
.skip:focus {
  top:10px}
.legal {
  max-width:820px;
  padding-block:60px}
.legal h1 {
  font-size:2.8rem}
.legal h2 {
  font-size:1.5rem;
  margin-top:35px;
  margin-bottom:15px}
.legal p {
  margin-block:18px}
.legal .button {
  margin-top:24px}
button:disabled {
  opacity:.55;
  cursor:not-allowed}
.section[id] {
  scroll-margin-top:20px}

@media(max-width:1000px) {
  nav {
  gap:16px}
.header-cta {
  display:none}
.price-card {
  padding:25px 20px}
.price>[data-price] {
  font-size:2.5rem}
.orbit-label {
  right:6%;
  top:48%}
.test-panel {
  padding:32px;
  gap:35px}
.hero {
  min-height:650px}
.launch-strip p span {
  display:none}
}

@media(max-width:760px) {
  .container {
  width:calc(100% - 36px)}
.section {
  padding-block:55px}
.header-inner {
  min-height:70px;
  flex-wrap:wrap;
  gap:0}
.brand img {
  width:135px}
.menu-toggle:not([hidden]) {
  display:block}
nav {
  width:100%;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:10px 0 20px}
nav a {
  padding:12px}
.js nav:not(.open) {
  display:none}
.hero {
  min-height:650px}
.hero-content {
  padding-top:55px}
.hero-art {
  background-position:60% center;
  opacity:.62;
  background-image:linear-gradient(90deg,#07090ddb,#07090d55),linear-gradient(0deg,var(--bg),transparent 45%),url('assets/images/fluxo-orbit.jpg')}
h1 {
  font-size:clamp(3.3rem,12vw,5.2rem)}
.hero-copy {
  font-size:.92rem;
  max-width:340px}
.hero .eyebrow {
  font-size:.65rem}
.actions {
  gap:12px}
.hero-foot {
  margin-top:60px;
  font-size:.6rem}
.hero-foot span:last-child {
  display:none}
.orbit-label {
  display:none}
.launch-strip>.container {
  flex-wrap:wrap;
  gap:10px}
.launch-strip p {
  font-size:.8rem;
  flex:1;
  min-width:200px}
.launch-strip a {
  display:none}
.section-head {
  display:block}
.section-head>p {
  margin-top:20px;
  max-width:unset}
.univers-grid {
  grid-template-columns:1fr}
.universe {
  min-height:195px;
  flex-direction:row;
  align-items:flex-end;
  gap:15px}
.universe-number {
  align-self:flex-start;
  font-size:.6rem;
  max-width:100px}
.universe>div {
  width:65%}
.category-symbol {
  font-size:2.5rem;
  margin-bottom:14px}
.universe h3 {
  font-size:1.25rem}
.duration {
  width:100%;
  max-width:400px}
.duration button {
  padding:10px;
  flex:1;
  font-size:.85rem}
.duration button span {
  font-size:.6rem}
.pricing-grid {
  grid-template-columns:1fr;
  gap:32px;
  max-width:480px;
  margin-inline:auto}
.price-card {
  padding:28px}
.price-card>p:not(.plan-number):not(.monthly):not(.card-note) {
  min-height:0}
.price>[data-price] {
  font-size:3rem}
.steps {
  grid-template-columns:1fr;
  gap:30px}
.steps h3 {
  margin-top:16px}
.devices {
  grid-template-columns:repeat(2,1fr);
  row-gap:25px}
.advantages {
  grid-template-columns:1fr;
  gap:30px}
.test-panel {
  grid-template-columns:1fr;
  padding:25px 20px;
  gap:28px}
.test-panel h2 {
  font-size:1.9rem}
.test-mark {
  display:none}
.faq {
  grid-template-columns:1fr;
  gap:30px}
.support-band {
  display:block}
.support-band .button {
  margin-top:24px}
.footer-top {
  flex-wrap:wrap;
  gap:20px}
.footer-top p {
  width:100%;
  order:2}
.footer-bottom {
  align-items:flex-start;
  flex-direction:column;
  gap:14px}
.legal h1 {
  font-size:2.3rem}
}

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


/* Affiches films/séries et univers photographiques */
.catalogue-section { padding-top: 68px; }
.catalogue-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:24px; }
.catalogue-heading h2 { font-size:clamp(1.7rem,3vw,2.6rem); }
.catalogue-heading .eyebrow { margin-bottom:12px; }
.catalogue-controls { display:flex; gap:8px; flex-shrink:0; }
.poster-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 80px)/5); gap:20px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#2b5270 #101720; padding:6px 0 18px; }
.poster-card { margin:0; min-width:0; scroll-snap-align:start; }
.poster-art { position:relative; aspect-ratio:2/3; border:1px solid #2a3545; border-radius:8px; overflow:hidden; background:#111d2a; }
.poster-art img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.poster-card:hover img { transform:scale(1.04); }
.poster-card figcaption { padding-top:14px; }
.poster-card h3 { font-size:.9rem; line-height:1.45; letter-spacing:-.015em; }
.poster-card p { font-size:.75rem; margin-top:5px; }
.catalogue-row + .catalogue-row { margin-top:48px; }
.catalogue-disclaimer { margin-top:26px; padding:15px 18px; border-left:2px solid var(--cyan); background:#101a26; font-size:.8rem; }
.catalogue-credit { font-size:.75rem; margin-top:14px; }
.catalogue-credit a { text-decoration:underline; text-underline-offset:3px; }
.universe.photo-universe { position:relative; min-height:345px; justify-content:flex-end; isolation:isolate; padding:26px; }
.photo-universe .universe-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .4s; }
.photo-universe:after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#07090d20,#07090d18 25%,#07090de8 85%); }
.photo-universe:hover .universe-background { transform:scale(1.04); }
.photo-universe .universe-number { position:absolute; top:22px; left:22px; color:#fff; text-shadow:0 1px 10px #000; }
.photo-universe h3 { font-size:1.65rem; }
.photo-universe p { color:#d1dce8; }
.photo-universe .universe-link { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-top:20px; border:1px solid #95bbd866; background:#14243399; border-radius:50%; color:#fff; }
@media(max-width:1000px) {
  .poster-track { grid-auto-columns:calc((100% - 60px)/4); }
}
@media(max-width:760px) {
  .catalogue-section { padding-top:48px; }
  .poster-track { grid-auto-columns:44%; gap:14px; }
  .catalogue-heading { align-items:center; gap:12px; }
  .catalogue-controls { gap:5px; }
  .catalogue-controls button { width:40px; height:40px; }
  .catalogue-heading h2 { font-size:1.65rem; }
  .catalogue-heading .eyebrow { font-size:.65rem; }
  .universe.photo-universe { min-height:290px; display:block; padding-top:150px; }
  .photo-universe>div { width:100%; }
  .photo-universe .universe-number { max-width:none; }
}

.photo-universe:first-child .universe-background { object-position:center top; }
.catalogue-controls button:disabled { opacity:.35; cursor:default; }

/* Comparatif et centre d'aide */
.comparison { margin-top:32px; border:1px solid var(--border); border-radius:8px; padding:0 22px 20px; background:#0e141e; }
.comparison summary { font-family:var(--heading); }
.table-scroll { overflow-x:auto; }
table { width:100%; min-width:580px; border-collapse:collapse; font-size:.85rem; }
caption { text-align:left; color:var(--muted); padding:12px 0 20px; }
th,td { padding:16px 12px; border-bottom:1px solid var(--border); text-align:left; }
thead th { color:var(--cyan); }
tbody th { font-weight:500; }
td { color:#c2cddd; }
.help-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.help-card { padding:26px; border:1px solid var(--border); border-radius:8px; background:#0e151f; }
.help-card:hover { border-color:var(--cyan); }
.help-card>span { font-size:.7rem; color:var(--cyan); letter-spacing:.12em; }
.help-card h3 { margin:24px 0 15px; font-size:1.1rem; }
.help-card p { font-size:.85rem; }
.help-hero h1 { font-size:clamp(2.6rem,6vw,5rem); }
.help-hero>p:not(.eyebrow) { margin-top:24px; max-width:680px; }
.device-guides { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; align-items:start; }
.device-guide { padding:0 24px 22px; border:1px solid var(--border); border-radius:8px; background:#0e151f; }
.device-guide summary { padding-bottom:0; font-size:1.2rem; font-family:var(--heading); }
.device-guide summary small { display:block; color:var(--muted); font: .8rem/1.6 var(--body); margin-top:10px; }
.device-guide ol { padding-left:20px; color:#b7c4d4; font-size:.9rem; }
.device-guide li { padding:8px 0; }
.help-search { margin:30px 0; max-width:560px; }
.help-search label { display:block; margin-bottom:8px; }
#no-help-results { padding:25px 0; }
@media(max-width:760px) {
  .help-cards,.device-guides { grid-template-columns:1fr; }
  .comparison { padding-inline:14px; }
  .help-hero { padding-top:50px; }
}

/* Navigation complète et pages Fluxo */
.full-header .brand-row { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.header-actions { display:flex; align-items:center; gap:25px; }
.account-link { font-size:.85rem; color:#cad5e3; }
.full-header nav { display:flex; gap:28px; border-top:1px solid #ffffff0c; min-height:48px; }
.full-header nav a { font-size:.8rem; white-space:nowrap; padding:12px 0; }
.full-header nav a[aria-current=page] { color:var(--cyan); box-shadow:inset 0 -2px var(--cyan); }
.page-intro h1 { font-size:clamp(2.8rem,6vw,5.2rem); }
.page-intro>p:not(.eyebrow) { max-width:700px; margin-top:26px; }
.review-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.review-placeholder { padding:30px; background:linear-gradient(140deg,#142337,#0c121c); border:1px dashed #38516e; border-radius:10px; }
.placeholder-label { font-size:.65rem; letter-spacing:.14em; color:#8fc8ed; }
.review-placeholder h3 { font-size:1rem; margin-top:24px; }
.review-placeholder p { font-size:.85rem; margin-top:12px; }
.review-lines { display:grid; gap:10px; margin-top:34px; }
.review-lines i { height:8px; border-radius:4px; background:#26394f; }
.review-lines i:nth-child(2) { width:85%; }
.review-lines i:nth-child(3) { width:65%; }
.video-heading { margin-top:64px; }
.video-placeholders { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.video-placeholder { aspect-ratio:9/12; border:1px dashed #38516e; background:radial-gradient(ellipse at 50% 30%,#172c46,#0c121c 70%); border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; }
.video-placeholder>span { font-size:3rem; color:#5d8faf; }
.video-placeholder p { color:#bcd1e4; margin-top:20px; }
.video-placeholder small { font-size:.75rem; color:var(--muted); }
.guide-notice { padding:20px 24px; border-left:2px solid var(--cyan); background:#101b29; }
.guide-notice p { font-size:.85rem; }
.guide-jumps { display:flex; flex-wrap:wrap; gap:12px; padding-top:28px; }
.guide-jumps a { padding:10px 16px; border:1px solid var(--border); border-radius:30px; font-size:.85rem; }
.tutorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:34px; align-items:start; }
.tutorial-card { background:#0e151f; border:1px solid var(--border); border-radius:10px; padding:22px; }
.tutorial-card h3 { font-size:1.1rem; margin:22px 0 4px; }
.tutorial-card summary { font-size:.85rem; color:var(--cyan); }
.tutorial-card ol { padding-left:20px; font-size:.86rem; color:#b9c9dc; }
.tutorial-card li { padding:8px 0; }
.tutorial-trouble { display:block; padding:14px 0 0; border-top:1px solid var(--border); color:var(--muted); font-size:.8rem; }
.device-art { min-height:160px; padding:20px; background:linear-gradient(140deg,#17334d,#0b1623); border-radius:6px; }
.device-art>span { font:600 .8rem var(--heading); color:#a0c3dd; }
.device-screen { border:2px solid #386280; border-radius:5px; background:#07121d; width:85%; margin:22px auto 0; padding:18px 10px; text-align:center; color:#29b6f6; font:600 1.1rem var(--heading); letter-spacing:.12em; box-shadow:0 12px 20px #0004; }
.device-screen span { color:#98b5c9; font-size:.55rem; margin-left:5px; }
.bouquet-preferences { border:1px solid #33465b; border-radius:6px; padding:16px; margin:10px 0; min-width:0; }
.bouquet-preferences legend { font-size:.85rem; padding:0 5px; }
.bouquet-preferences .micro { margin-top:0; }
.checkbox-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 20px; }
.checkbox-grid label { display:flex; align-items:center; gap:8px; margin:0; font-size:.8rem; }
.checkbox-grid input { width:17px; min-height:17px; accent-color:var(--cyan); flex-shrink:0; }
.bouquet-preferences>label { display:block; margin-bottom:8px; }
@media(max-width:1000px) {
 .full-header nav { gap:19px; }
 .full-header nav a { font-size:.75rem; }
 .tutorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
 .full-header .brand-row { min-height:70px; gap:10px; }
 .full-header .header-actions { margin-left:auto; gap:0; }
 .full-header .account-link { display:none; }
 .full-header .header-actions .button { font-size:.78rem; padding:8px 13px; }
 .full-header .brand img { width:108px; }
 .full-header .menu-toggle { font-size:.75rem; padding:8px; }
 .full-header nav { align-items:stretch; gap:0; }
 .full-header nav a { padding:12px; font-size:.9rem; }
 .full-header nav a[aria-current=page] { box-shadow:none; background:#142436; border-radius:4px; }
 .js .full-header nav:not(.open) { display:none; }
 .review-grid,.video-placeholders,.tutorial-grid { grid-template-columns:1fr; }
 .video-placeholder { aspect-ratio:4/3; }
 .page-intro { padding-block:50px; }
 .guide-notice { padding:16px; }
 .guide-jumps { gap:8px; }
 .guide-jumps a { padding:8px 12px; font-size:.75rem; }
}

/* Chaînes et plateformes : typographie, défilement continu, pause accessible. */
.channel-section { padding:36px 0; border-bottom:1px solid var(--border); background:#090e16; overflow:hidden; }
.ticker-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.ticker-heading .eyebrow { margin:0; }
#ticker-toggle { color:#a6c5dc; border:1px solid #29425a; padding:7px 12px; border-radius:4px; background:transparent; font-size:.75rem; min-height:36px; }
.channel-window { overflow:hidden; margin-top:26px; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.channel-belt { display:flex; width:max-content; animation:channel-scroll 42s linear infinite; }
.channel-group { display:flex; align-items:center; gap:55px; flex-shrink:0; padding-right:55px; }
.brand-name { font-family:var(--heading); font-size:1.55rem; font-weight:700; color:#d1dbe6; white-space:nowrap; }
.brand-0 { letter-spacing:.05em; color:#e8f3ff; }
.brand-3 { background:#e6edf5; color:#101722; padding:1px 8px; font-style:italic; }
.brand-8 { color:#f24f59; font-weight:800; letter-spacing:-.06em; }
.brand-9 { color:#5ebcf6; font-weight:500; }
.brand-10 { font-style:italic; }
.brand-13 { border:2px solid #d1dbe6; padding:2px 6px; font-size:1.3rem; }
.channel-belt.paused,.channel-window:hover .channel-belt { animation-play-state:paused; }
@keyframes channel-scroll { to { transform:translateX(-50%); } }
.universe-tabs { display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--border); margin-top:28px; }
.universe-tabs button { background:none; color:#a1b0c3; border:0; border-bottom:2px solid transparent; padding:14px 18px; font:600 .9rem var(--heading); }
.universe-tabs button[aria-selected=true] { color:var(--cyan); border-bottom-color:var(--cyan); }
.universe-panel { position:relative; min-height:515px; display:flex; align-items:flex-end; gap:35px; padding:42px; overflow:hidden; isolation:isolate; background:#0b1420; }
.universe-panel[hidden] { display:none; }
.universe-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; }
#panel-sport .universe-scene { object-position:center 30%; }
.universe-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#040a13e8 0%,#040a1380 48%,#040a1315 80%),linear-gradient(0deg,#040a13d9,transparent 85%); }
.universe-copy { max-width:560px; flex:1; }
.universe-copy h3 { font-size:clamp(2rem,3.5vw,3rem); line-height:1.13; letter-spacing:-.045em; }
.universe-copy>p:not(.eyebrow) { color:#cad7e6; margin-top:20px; max-width:450px; font-size:.95rem; }
.universe-copy .button { margin-top:25px; }
.universe-miniatures { display:flex; align-items:flex-end; gap:12px; margin-left:auto; }
.universe-miniatures img { width:95px; height:143px; object-fit:cover; border-radius:4px; border:1px solid #7297b66b; box-shadow:0 16px 32px #0008; }
.detail-duration-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:36px; }
@media(max-width:1000px) {
 .universe-panel { padding:30px; gap:20px; }
 .universe-miniatures img { width:73px; height:110px; }
}
@media(max-width:760px) {
 .channel-section { padding-block:25px; }
 .ticker-heading { flex-wrap:wrap; gap:12px; }
 .ticker-heading .eyebrow { font-size:.65rem; }
 .brand-name { font-size:1.2rem; }
 .channel-group { gap:35px; padding-right:35px; }
 .universe-tabs { gap:0; }
 .universe-tabs button { padding:12px 10px; font-size:.75rem; }
 .universe-panel { min-height:570px; padding:28px 22px; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:25px; }
 .universe-copy { flex:0; }
 .universe-copy h3 { font-size:2rem; }
 .universe-copy>p:not(.eyebrow) { font-size:.87rem; }
 .universe-miniatures { margin:0; }
 .universe-miniatures img { width:75px; height:113px; }
 .universe-shade { background:linear-gradient(0deg,#040a13ed,#040a1399 60%,#040a1340); }
 .detail-duration-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .channel-belt { animation:none; } .channel-window { overflow-x:auto; } }

/* En-tête sur une seule ligne : logo, menu, actions */
.nav-badge { display:inline-block; margin-left:5px; padding:2px 7px; border-radius:99px; background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#04101c; font:700 .6rem/1.3 var(--body); letter-spacing:.06em; text-transform:uppercase; vertical-align:middle; }
@media(min-width:1200px) {
 .full-header>.container { display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:28px; min-height:76px; }
 .full-header .brand-row { display:contents; }
 .full-header .brand { grid-column:1; grid-row:1; }
 .full-header nav { grid-column:2; grid-row:1; justify-self:center; border-top:0; min-height:0; gap:22px; }
 .full-header nav a { padding:8px 0; }
 .full-header .header-actions { grid-column:3; grid-row:1; gap:20px; white-space:nowrap; }
}

/* Offres : économies, réassurance ; parrainage ; blocs de confiance */
.reassurance { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:34px; }
.reassurance>div { border:1px solid var(--border); border-radius:8px; padding:20px 22px; background:#0e151f; }
.reassurance strong { display:block; margin-bottom:6px; font:600 .95rem var(--heading); color:var(--text); }
.reassurance p { font-size:.82rem; }
.simulator { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.simulator-box { border:1px solid var(--border); border-radius:10px; padding:32px; background:linear-gradient(150deg,#102b43,#0e141e 70%); }
.simulator-box label { display:block; margin-bottom:18px; font-size:.9rem; color:#c4cedc; }
.simulator-box label strong { color:var(--cyan); font:600 1.1rem var(--heading); }
.simulator-box input[type=range] { width:100%; accent-color:var(--cyan); }
.simulator-result { margin:26px 0 20px; color:var(--text); font:600 3.4rem/1 var(--heading); letter-spacing:-.05em; }
.simulator-result small { font:500 1rem var(--body); letter-spacing:0; color:var(--muted); margin-left:8px; }
.simulator-presets { display:flex; flex-wrap:wrap; gap:10px; }
.simulator-presets button { min-height:40px; padding:8px 16px; border:1px solid var(--border); border-radius:6px; background:none; color:var(--text); }
.simulator-presets button:hover { border-color:var(--cyan); color:var(--cyan); }
.referral-band { margin-block:20px; }
@media(max-width:1000px) { .reassurance { grid-template-columns:1fr; } .simulator { grid-template-columns:1fr; gap:30px; } }
.simulator>div:first-child>p:not(.eyebrow) { margin-top:18px; }

/* Chiffres clés, comparatif ouvert, sous-pages de tutoriels */
.key-figures { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding-block:44px 8px; }
.key-figures>div { border-top:1px solid var(--border); padding-top:18px; }
.key-figures strong { display:block; font:600 clamp(1.5rem,3vw,2.2rem)/1.15 var(--heading); letter-spacing:-.04em; color:var(--cyan); }
.key-figures span { display:block; margin-top:6px; font-size:.85rem; color:var(--muted); }
.comparison-open { margin-top:50px; }
.comparison-open h3 { margin-bottom:20px; font-size:1.5rem; }
.breadcrumb { margin-bottom:18px; font-size:.8rem; }
.breadcrumb a { color:var(--cyan); }
.guide-detail { display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:44px; align-items:start; }
.guide-steps { margin:0; padding-left:22px; }
.guide-steps li { margin-bottom:18px; padding-left:6px; color:#c4cedc; }
.guide-steps li::marker { color:var(--cyan); font-weight:700; }
.tutorial-card .button { margin-top:14px; width:100%; }
@media(max-width:1000px) { .key-figures { grid-template-columns:repeat(2,minmax(0,1fr)); } .guide-detail { grid-template-columns:1fr; } }

/* Accueil : atouts, bandeau des chaînes */
.feature-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding-block:34px 10px; }
.feature-card { display:flex; align-items:center; gap:18px; padding:22px 24px; border:1px solid var(--border); border-radius:6px; background:#0e131c; }
.feature-icon { flex-shrink:0; display:grid; place-items:center; width:54px; height:54px; border-radius:6px; background:#29b6f61a; color:var(--cyan); }
.feature-card strong { display:block; font:600 .95rem var(--body); color:var(--text); }
.feature-card p { margin-top:3px; font-size:.82rem; line-height:1.45; }
.channel-section { padding:46px 0 48px; border-bottom:0; background:none; }
.ticker-label { margin-bottom:34px; font-size:.75rem; letter-spacing:.3em; color:var(--muted); }
.channel-window { margin-top:0; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.channel-group { gap:64px; padding-right:64px; }
.logo { display:inline-block; font-family:var(--heading); font-size:1.7rem; font-weight:700; line-height:1.2; white-space:nowrap; color:#e8eef5; }
.logo-arte { color:#f2502d; font-weight:800; letter-spacing:.06em; }
.logo-netflix { color:#e5313b; font-weight:800; letter-spacing:.04em; }
.logo-prime { color:#46b6f0; font-weight:500; }
.logo-disney { color:#8c9cff; font-weight:600; }
.logo-apple { color:#fff; font-weight:600; }
.logo-paramount { color:#3f7dff; font-weight:700; }
.logo-dazn { color:#f5e400; background:#0a0a0a; border:1px solid #d1dbe6; padding:4px 18px; font-size:1.25rem; letter-spacing:.06em; }
.logo-tf1 { color:#fff; background:linear-gradient(135deg,#3b4bd6,#e0402f); padding:6px 14px; font-size:1.35rem; font-weight:800; border-radius:3px; }
.logo-francetv { color:#fff; }
.logo-m6 { background:linear-gradient(90deg,#f0b429,#e0402f 45%,#3fb27f); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
.logo-canal { color:#111; background:linear-gradient(180deg,#f2f5f8,#8b949e); padding:6px 14px; font-size:1.25rem; letter-spacing:.05em; }
.logo-bein { color:#c9a3ff; }
.logo-rmc { color:#fff; letter-spacing:.06em; }
.logo-eurosport { color:#4aa3ff; font-weight:600; }
@media(max-width:1000px) { .feature-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .feature-cards { grid-template-columns:1fr; } .logo { font-size:1.25rem; } .channel-group { gap:38px; padding-right:38px; } .ticker-label { font-size:.65rem; letter-spacing:.2em; } }

/* Section d'essai, pied de page complet */
.trial-panel { max-width:860px; margin-inline:auto; padding:60px 40px; text-align:center; border:1px solid var(--border); border-radius:12px; background:linear-gradient(150deg,#102b43,#0e141e 70%); }
.trial-panel h2 { margin-bottom:20px; }
.trial-panel>p:not(.eyebrow) { max-width:600px; margin:0 auto 30px; }
.footer-links,.footer-social { display:flex; flex-wrap:wrap; gap:10px 26px; padding-block:14px; font-size:.85rem; color:#c2c9d5; }
.footer-social { padding-top:0; }
.footer-social a { color:var(--cyan); }
@media(max-width:760px) { .trial-panel { padding:40px 22px; } }

/* Tutoriels : page principale et guides illustrés */
.tuto-group .tuto-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:34px; }
.tuto-card { display:flex; flex-direction:column; padding:14px 14px 22px; border:1px solid var(--border); border-radius:10px; background:#0e141e; }
.tuto-card:hover { border-color:#29b6f680; }
.tuto-visual { border-radius:7px; background:linear-gradient(140deg,#17334d,#0b1623); }
.tuto-visual svg { display:block; width:100%; height:auto; }
.tuto-card h3 { margin:20px 8px 8px; }
.tuto-card>p { flex:1; margin:0 8px 18px; font-size:.85rem; }
.tuto-card-actions { display:flex; flex-wrap:wrap; gap:10px; margin:0 8px; }
.tuto-meta { color:var(--cyan); }
.tuto-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:36px 0 26px; }
.tuto-tabs button { min-height:44px; padding:10px 20px; border:1px solid var(--border); border-radius:6px; background:#0e141e; color:#c2c9d5; }
.tuto-tabs button[aria-selected=true] { border-color:var(--cyan); color:var(--cyan); background:#102b43; }
.tuto-intro { margin-bottom:10px; max-width:720px; }
.tuto-steps { list-style:none; margin:0; padding:0; }
.tuto-steps li { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:40px; align-items:center; padding-block:30px; border-top:1px solid var(--border); }
.tuto-num { font:1rem var(--heading); color:var(--cyan); }
.tuto-step-text h3 { margin:14px 0 10px; font-size:1.3rem; }
.tuto-figure { margin:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.tuto-figure svg { display:block; width:100%; height:auto; }
.app-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:28px; }
.app-card { padding:24px; border:1px solid var(--border); border-radius:10px; background:#0e151f; }
.app-card.recommended { border-color:var(--cyan); background:linear-gradient(150deg,#102b43,#0e141e 70%); }
.app-card h3 { margin:14px 0 8px; }
.app-card p { font-size:.85rem; }
.app-badge { display:inline-block; padding:3px 12px; border-radius:99px; background:var(--cyan); color:#032036; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.app-badge.muted { background:#22354a; color:#a6c5dc; }
.tuto-faq { margin-top:30px; }
.callout-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-block:30px 70px; }
.callout-split article { padding:34px; border:1px solid var(--border); border-radius:10px; background:#0e151f; }
.callout-split h3 { margin:6px 0 10px; font-size:1.4rem; }
.callout-split .button { margin-top:22px; }
@media(max-width:1000px) { .tuto-group .tuto-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .tuto-steps li { grid-template-columns:1fr; gap:22px; } }
@media(max-width:760px) { .tuto-group .tuto-grid,.app-grid,.callout-split { grid-template-columns:1fr; } .callout-split article { padding:26px; } }

.tuto-figure img { display:block; width:100%; height:auto; }

.app-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.app-head { display:flex; align-items:center; gap:14px; }
.app-head h3 { margin:6px 0 0; }
.app-icon { flex-shrink:0; width:56px; height:56px; border-radius:13px; object-fit:cover; }
.app-price { margin:16px 0 6px; color:var(--cyan); font-size:.8rem; font-weight:600; }

.tuto-photo { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:contain; border-radius:7px; }

.tuto-hero-img { display:block; width:min(480px,100%); height:auto; margin-top:32px; border-radius:10px; border:1px solid var(--border); }

/* Défilement des univers */
.universe-progress { height:3px; margin:0 0 18px; background:#1d2a3a; border-radius:3px; overflow:hidden; }
.universe-progress span { display:block; height:100%; width:0; background:var(--cyan); }
@keyframes universe-fill { to { width:100%; } }
@keyframes universe-in { from { opacity:0; transform:scale(1.015); } to { opacity:1; transform:none; } }
.universe-panel:not([hidden]) { animation:universe-in .6s ease; }
@media(prefers-reduced-motion:reduce) { .universe-panel:not([hidden]) { animation:none; } }
/* Blog */
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:34px; }
.blog-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:10px; background:#0e141e; transition:border-color .2s, transform .2s; }
.blog-card:hover { border-color:#29b6f680; transform:translateY(-3px); }
.blog-card img { display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; }
.blog-card>div { display:flex; flex-direction:column; flex:1; padding:20px 22px 24px; }
.blog-cat { color:var(--cyan); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.blog-card h3 { margin:10px 0 10px; font-size:1.12rem; line-height:1.35; }
.blog-card p { flex:1; font-size:.85rem; }
.blog-meta { margin-top:16px; font-size:.75rem; color:var(--muted); }
.article { max-width:820px; padding-block:64px 20px; }
.article h1 { font-size:clamp(2rem,4.4vw,3.1rem); letter-spacing:-.04em; }
.article-lead { margin-top:22px; font-size:1.12rem; color:#c4cedc; }
.article-meta { margin-top:18px; font-size:.82rem; }
.article-cover { display:block; width:100%; height:auto; margin-top:32px; border-radius:12px; border:1px solid var(--border); }
.article-toc { margin:34px 0; padding:22px 26px; border-left:2px solid var(--cyan); background:#101b29; border-radius:0 8px 8px 0; }
.article-toc ol { margin:12px 0 0; padding-left:20px; color:#c4cedc; font-size:.9rem; }
.article-toc a:hover { color:var(--cyan); }
.article h2 { margin:52px 0 16px; font-size:clamp(1.5rem,3vw,2rem); scroll-margin-top:110px; }
.article p,.article li { font-size:1rem; color:#c4cedc; }
.article p { margin-bottom:16px; }
.article ul,.article ol { margin:0 0 22px; padding-left:22px; }
.article li { margin-bottom:10px; }
.article li strong { color:var(--text); }
.article table { width:100%; border-collapse:collapse; margin-bottom:16px; }
.article th,.article td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); font-size:.92rem; }
.article th { color:var(--cyan); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.article-links { display:flex; flex-wrap:wrap; gap:10px; }
.article-cta { margin:56px 0 10px; padding:34px; border:1px solid var(--cyan); border-radius:12px; background:linear-gradient(150deg,#102b43,#0e141e 70%); }
.article-cta h2 { margin:0 0 10px; }
.article-cta .button { margin-top:8px; }
@media(max-width:1000px) { .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .blog-grid { grid-template-columns:1fr; } .article { padding-top:44px; } .article-cta { padding:26px; } }

/* Espacement du bloc Telegram (page Assistance) */
#telegram .steps { margin-bottom:8px; }
#telegram .actions { margin-top:44px; }
#telegram .guide-notice { margin-top:48px; }

/* Nouvelle gamme : durées 6/12 mois, économie, personnalisation */
.detail-duration-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; }
.price-card>p.saving-note, .saving-note { margin:-10px 0 18px; color:var(--cyan); font-size:.78rem; font-weight:600; min-height:0; }
.saving-note[hidden] { display:none; }
.chip-list { display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:34px 0 8px; padding:0; }
.chip-list li { padding:10px 20px; border:1px solid #33465b; border-radius:99px; background:#101a27; color:#d6e2f0; font-size:.9rem; }
.infra .steps h3 { font-size:1.5rem; }
@media(max-width:760px) { .detail-duration-grid { grid-template-columns:1fr; } }

/* Bouton WhatsApp flottant (injecté par common.js sur toutes les pages) */
.wa-float { position:fixed; right:calc(20px + env(safe-area-inset-right, 0px)); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:90; display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:linear-gradient(145deg,#33e37f,#1fa855); color:#fff; box-shadow:0 12px 30px #000000b3, 0 0 0 1px #ffffff26 inset; isolation:isolate; transition:transform .25s ease, box-shadow .25s ease; }
.wa-float::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:#25d366; opacity:0; animation:wa-pulse 3.6s ease-out infinite; }
@keyframes wa-pulse { 0% { transform:scale(1); opacity:.42; } 70%,100% { transform:scale(1.7); opacity:0; } }
.wa-float:hover { color:#fff; }
.wa-float-label { position:absolute; right:calc(100% + 14px); top:50%; transform:translate(8px,-50%); opacity:0; pointer-events:none; white-space:nowrap; padding:10px 18px; border:1px solid var(--border); border-radius:99px; background:#0e131cf2; color:var(--text); font:600 .82rem var(--body); letter-spacing:.01em; box-shadow:0 10px 26px #000000a6; backdrop-filter:blur(10px); transition:opacity .2s ease, transform .2s ease; }
@media(min-width:761px) and (hover:hover) {
  .wa-float:hover { transform:translateY(-3px) scale(1.06); box-shadow:0 16px 36px #000000c7, 0 0 0 1px #ffffff40 inset; }
  .wa-float:hover .wa-float-label, .wa-float:focus-visible .wa-float-label { opacity:1; transform:translate(0,-50%); }
}
.has-wa footer { padding-bottom:96px; }
@media(max-width:760px) {
  .wa-float { width:54px; height:54px; right:calc(16px + env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .wa-float-label { display:none; }
}
@media(prefers-reduced-motion:reduce) { .wa-float::before { animation:none; opacity:0; } .wa-float, .wa-float-label { transition:none; } }
@media print { .wa-float { display:none; } }

/* ========== Témoignages vidéo : cadre iPhone 17 Pro Max (accueil) ==========
   Proportions réelles : 78 × 163,4 mm. Toutes les dimensions du téléphone sont exprimées en « u »
   (1 u = 1 % de sa largeur), donc il garde ses proportions quelle que soit la largeur choisie (--vt-w). */
.vt { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:1fr 1fr; grid-template-areas:"copy stage" "nav stage"; column-gap:clamp(32px,6vw,96px); align-items:center; }
.vt-copy { grid-area:copy; align-self:end; max-width:540px; }
.vt-copy .eyebrow { margin-bottom:20px; }
.vt-copy h2 { margin-bottom:22px; text-wrap:balance; }
.vt-nav { grid-area:nav; align-self:start; margin-top:34px; }
.vt-controls { display:flex; align-items:center; gap:16px; }
.vt-arrow { display:grid; place-items:center; flex-shrink:0; width:46px; height:46px; padding:0; border:1px solid #364253; border-radius:50%; background:#101720; color:#dfefff; transition:border-color .2s, color .2s, background .2s; }
.vt-arrow:hover { border-color:var(--cyan); color:var(--cyan); background:#132131; }
.vt-dots { display:flex; align-items:center; gap:8px; }
.vt-dot { position:relative; width:8px; height:8px; padding:0; border:0; border-radius:99px; background:#2f3b4b; transition:width .3s ease, background .3s ease; }
.vt-dot::before { content:""; position:absolute; inset:-18px -4px; }
.vt-dot:hover { background:#4a6d8a; }
.vt-dot.is-active { width:26px; background:var(--cyan); }
.vt-all { display:inline-block; margin-top:24px; font-size:.85rem; }
.vt-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.vt-stage { --vt-w:clamp(250px,21vw,292px); grid-area:stage; position:relative; display:grid; place-items:center; padding:calc(var(--vt-w)*.1) 0 calc(var(--vt-w)*.12); overflow-x:clip; }
.vt-phone { --u:calc(var(--vt-w)/100); position:relative; width:var(--vt-w); isolation:isolate; touch-action:pan-y; border-radius:calc(var(--u)*12.6); }
.vt-phone:focus-visible { outline:2px solid var(--cyan); outline-offset:10px; }
.vt-phone::before { content:""; position:absolute; z-index:-2; inset:-7% -44% -3%; background:radial-gradient(closest-side,#29b6f62b,#1677ff0f 55%,transparent 76%); pointer-events:none; }
/* Corps : cadre en titane sombre, relief et ombres */
.vt-body { position:relative; z-index:1; aspect-ratio:78/163.4; padding:calc(var(--u)*2.4); border-radius:calc(var(--u)*12.6); background:linear-gradient(145deg,#4b515a 0%,#1d2127 20%,#0b0d11 48%,#1f242b 76%,#59606a 100%); box-shadow:0 calc(var(--u)*8) calc(var(--u)*14) calc(var(--u)*-6) #000000bf, 0 calc(var(--u)*20) calc(var(--u)*36) calc(var(--u)*-10) #0009, inset 0 0 0 calc(var(--u)*.3) #ffffff29, inset 0 calc(var(--u)*.6) calc(var(--u)*.5) #ffffff2e; }
.vt-body::after { content:""; position:absolute; inset:calc(var(--u)*.35); border-radius:calc(var(--u)*12.2); border:calc(var(--u)*.25) solid #00000080; pointer-events:none; }
/* Écran bord à bord, entouré d'une fine bordure noire */
.vt-screen { position:relative; height:100%; overflow:hidden; border-radius:calc(var(--u)*10.2); background:#000; box-shadow:0 0 0 calc(var(--u)*1.3) #030406; touch-action:pan-y; }
.vt-island { position:absolute; z-index:5; top:calc(var(--u)*2.6); left:50%; width:calc(var(--u)*27.5); height:calc(var(--u)*8); transform:translateX(-50%); border-radius:99px; background:#000; box-shadow:inset 0 0 0 1px #ffffff0d; pointer-events:none; }
.vt-island::after { content:""; position:absolute; top:50%; right:calc(var(--u)*2.4); width:calc(var(--u)*2.7); height:calc(var(--u)*2.7); transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle at 35% 35%,#26415e,#06090d 68%); }
.vt-status { position:absolute; z-index:4; top:calc(var(--u)*3.4); left:calc(var(--u)*8.5); right:calc(var(--u)*8.5); display:flex; align-items:center; justify-content:space-between; color:#fff; pointer-events:none; text-shadow:0 1px 4px #0008; }
.vt-time { font:600 calc(var(--u)*4.3)/1 var(--body); letter-spacing:-.01em; }
.vt-status svg { width:calc(var(--u)*14); height:auto; }
.vt-homebar { position:absolute; z-index:4; bottom:calc(var(--u)*1.9); left:50%; width:calc(var(--u)*33); height:calc(var(--u)*1.15); transform:translateX(-50%); border-radius:99px; background:#ffffff8c; pointer-events:none; }
.vt-glare { position:absolute; inset:0; z-index:6; pointer-events:none; background:linear-gradient(118deg,#ffffff17 0%,#ffffff00 30%,#ffffff00 70%,#ffffff0a 100%); }
/* Boutons latéraux (bouton Action, volume, veille, Contrôle de l'appareil photo) */
.vt-btn { position:absolute; z-index:0; width:calc(var(--u)*1.7); border-radius:calc(var(--u)*.6); pointer-events:none; }
.vt-btn--action, .vt-btn--up, .vt-btn--down { left:calc(var(--u)*-.8); background:linear-gradient(90deg,#3c424a,#14171c); }
.vt-btn--power, .vt-btn--camera { right:calc(var(--u)*-.8); background:linear-gradient(270deg,#3c424a,#14171c); }
.vt-btn--action { top:calc(var(--u)*26); height:calc(var(--u)*6.5); }
.vt-btn--up { top:calc(var(--u)*38); height:calc(var(--u)*11.5); }
.vt-btn--down { top:calc(var(--u)*52); height:calc(var(--u)*11.5); }
.vt-btn--power { top:calc(var(--u)*43); height:calc(var(--u)*18); }
.vt-btn--camera { top:calc(var(--u)*128); height:calc(var(--u)*12); width:calc(var(--u)*1.3); }
/* Slides */
.vt-track { display:flex; height:100%; transform:translate3d(calc(var(--i,0)*-100%),0,0); transition:transform .55s cubic-bezier(.22,.8,.2,1); will-change:transform; }
.vt-slide { position:relative; flex:0 0 100%; min-width:0; margin:0; overflow:hidden; background:#070a10; }
.vt-placeholder { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:calc(var(--u)*2); padding:0 calc(var(--u)*9); text-align:center; background:radial-gradient(120% 58% at 50% 38%,#29b6f629,transparent 64%), linear-gradient(180deg,#0d1624,#070a10 72%); }
.vt-play { display:grid; place-items:center; width:calc(var(--u)*19); height:calc(var(--u)*19); margin-bottom:calc(var(--u)*3); border:1px solid #29b6f68c; border-radius:50%; background:#29b6f61a; box-shadow:0 0 calc(var(--u)*9) #29b6f640, inset 0 0 calc(var(--u)*4) #29b6f61f; }
.vt-play svg { width:calc(var(--u)*7.6); height:auto; margin-left:calc(var(--u)*.9); fill:#fff; }
.vt-ph-title { color:#fff; font:600 calc(var(--u)*5.6)/1.2 var(--heading); letter-spacing:-.02em; }
.vt-ph-sub { color:var(--muted); font:500 calc(var(--u)*3.9)/1.3 var(--body); letter-spacing:.16em; text-transform:uppercase; }
.vt-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }

@media(max-width:1024px) {
  .vt { column-gap:clamp(24px,4vw,48px); }
  .vt-stage { --vt-w:clamp(212px,25vw,250px); }
}
@media(max-width:768px) {
  .vt { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; grid-template-areas:"copy" "stage" "nav"; justify-items:center; text-align:center; row-gap:12px; }
  .vt-copy { align-self:auto; }
  .vt-stage { --vt-w:clamp(210px,62vw,268px); width:100%; }
  .vt-nav { align-self:auto; margin-top:6px; display:grid; justify-items:center; }
  .vt-controls { gap:12px; }
  .vt-all { margin-top:20px; }
}
@media(prefers-reduced-motion:reduce) { .vt-track, .vt-dot, .vt-arrow { transition:none; } }

/* ========== Avis clients : captures défilantes, lightbox (source : avis-config.js) ========== */
.avis-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr); gap:clamp(28px,5vw,72px); align-items:center; }
.avis-copy { max-width:460px; }
.avis-copy .eyebrow { margin-bottom:20px; }
.avis-copy h2 { margin-bottom:22px; text-wrap:balance; }
.avis-copy .button { margin-top:28px; }
.avis-top { padding-bottom:10px; }
.avis-marquee { --avis-w:clamp(170px,16vw,220px); --avis-gap:clamp(14px,1.6vw,20px); position:relative; min-width:0; }
.avis-marquee--wide { --avis-w:clamp(190px,16vw,240px); }
.avis-viewport { position:relative; overflow:hidden; padding:12px 0 30px; touch-action:pan-y; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.avis-viewport:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.avis-viewport.is-manual { overflow-x:auto; touch-action:auto; scrollbar-width:thin; scrollbar-color:#2b5270 #101720; }
.avis-track { display:flex; width:max-content; will-change:transform; }
.avis-viewport.is-manual .avis-track { will-change:auto; }
.avis-group { display:flex; gap:var(--avis-gap); padding-right:var(--avis-gap); }
.avis-card { position:relative; flex:0 0 var(--avis-w); width:var(--avis-w); aspect-ratio:9/19.5; margin:0; overflow:hidden; border:1px solid #243244; border-radius:22px; background:linear-gradient(160deg,#111c2b,#0a0f17); box-shadow:0 20px 38px -20px #000000d9, inset 0 0 0 1px #ffffff08; transition:border-color .25s ease; }
.avis-card.has-image:hover { border-color:#29b6f680; }
.avis-open { display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.avis-open:focus-visible { outline:2px solid var(--cyan); outline-offset:-3px; border-radius:22px; }
.avis-card img { display:block; width:100%; height:100%; object-fit:cover; }
.avis-ph { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:10px; padding:0 14px; text-align:center; background:radial-gradient(120% 55% at 50% 40%,#29b6f61c,transparent 65%), linear-gradient(180deg,#0e1826,#080c13); }
.avis-ph-n { position:absolute; top:15px; left:0; right:0; font:600 .68rem var(--body); letter-spacing:.22em; color:#4f6b85; }
.avis-ph svg { width:34px; height:34px; color:#4d8fb5; opacity:.85; }
.avis-ph-label { font:700 .68rem var(--body); letter-spacing:.2em; color:var(--cyan); }
.avis-ph-sub { font-size:.78rem; color:var(--muted); }
/* Lightbox */
.avis-lightbox { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:calc(64px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px)); background:#04070cdb; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; transition:opacity .25s ease; }
.avis-lightbox[hidden] { display:none; }
.avis-lightbox.is-open { opacity:1; }
.avis-lb-img { display:block; width:auto; height:auto; max-width:min(92vw,560px); max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); object-fit:contain; border:1px solid #2a3a4e; border-radius:20px; box-shadow:0 30px 80px #000000d1; }
.avis-lb-close { position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:calc(14px + env(safe-area-inset-right,0px)); display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid #364253; border-radius:50%; background:#101720; color:#fff; transition:border-color .2s, color .2s; }
.avis-lb-close:hover { border-color:var(--cyan); color:var(--cyan); }
html.avis-lb-open { overflow:hidden; }

@media(max-width:1024px) {
  .avis-layout { column-gap:clamp(24px,4vw,48px); }
}
@media(max-width:768px) {
  .avis-layout { grid-template-columns:minmax(0,1fr); text-align:center; row-gap:26px; }
  .avis-copy { max-width:none; }
  .avis-marquee { --avis-w:clamp(200px,58vw,260px); }
}
@media(prefers-reduced-motion:reduce) { .avis-card, .avis-lightbox, .avis-lb-close { transition:none; } }

/* ========== Système de boutons : variantes, cartes cliquables, boutons icône, mobile ========== */
/* Prix dans le CTA principal du hero : sur la même ligne (bureau), sous le libellé (mobile) */
.btn-from { font-weight:500; font-size:.86em; opacity:.78; }
.btn-from::before { content:"— "; }

/* Bouton icône : flèches de carrousel, fermeture. Toujours avec un aria-label. */
.icon-btn, .catalogue-controls button, .vt-arrow, .avis-lb-close { display:grid; place-items:center; flex-shrink:0; padding:0; border:1px solid #3a4b60; border-radius:50%; background:#101720; color:#dfefff; line-height:1; transition:border-color .2s, color .2s, background .2s, transform .2s, box-shadow .2s; }
.icon-btn:hover, .catalogue-controls button:hover:not(:disabled), .vt-arrow:hover:not(:disabled), .avis-lb-close:hover { border-color:var(--cyan); color:var(--cyan); background:#132131; box-shadow:0 8px 20px -12px #29b6f6b3; }
.icon-btn:active, .catalogue-controls button:active:not(:disabled), .vt-arrow:active:not(:disabled), .avis-lb-close:active { background:#0d1824; transform:scale(.95); }
.catalogue-controls button { width:46px; height:46px; font-size:1.2rem; }
.catalogue-controls button:disabled, .vt-arrow:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }

/* Carte cliquable : grand bouton sobre (icône · texte · flèche) */
.card-link { position:relative; display:flex; align-items:center; gap:16px; min-height:76px; padding:16px 18px 16px 20px; text-align:left; border:1px solid #2f4258; border-radius:14px; background:linear-gradient(160deg,#111d2c,#0b1119 75%); color:var(--text); box-shadow:0 1px 0 #ffffff0a inset; cursor:pointer; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease; }
.card-link:hover { color:var(--text); border-color:#29b6f6b3; background:linear-gradient(160deg,#142338,#0d1520 75%); transform:translateY(-3px); box-shadow:0 1px 0 #ffffff12 inset, 0 16px 34px -18px #29b6f6a6; }
.card-link:active { transform:translateY(-1px); }
.card-link:focus-visible { outline-offset:3px; border-radius:14px; }
.card-link-icon { display:grid; place-items:center; flex:none; width:44px; height:44px; border:1px solid #2f4a63; border-radius:12px; background:#0d1a29; color:var(--cyan); }
.card-link-text { display:grid; gap:3px; min-width:0; flex:1; }
.card-link-text strong { font:600 1rem var(--heading); color:var(--text); }
.card-link-text span { font-size:.82rem; line-height:1.4; color:#9fb0c4; }
.card-link-arrow { display:grid; place-items:center; flex:none; width:36px; height:36px; border:1px solid #33475d; border-radius:50%; color:var(--cyan); font-size:1.05rem; transition:transform .25s ease, background .25s ease, border-color .25s ease; }
.card-link:hover .card-link-arrow { transform:translateX(3px); background:#29b6f61f; border-color:var(--cyan); }
.trial-contacts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:700px; margin:30px auto 0; }

/* « Tout savoir sur… » : lien secondaire des cartes d'offres, présenté comme bouton discret */
.plan-details { display:flex; align-items:center; justify-content:center; gap:8px; min-height:var(--btn-h-sm); margin-top:12px; padding:9px 16px; border:1px solid #33455a; border-radius:var(--btn-radius); font-size:.85rem; font-weight:600; color:#d6e2f0; transition:border-color .2s, color .2s, background .2s; }
.plan-details:hover { border-color:var(--cyan); color:var(--cyan); background:#101b29; }

/* Puces de navigation et sélecteurs : zone tactile confortable */
.guide-jumps a { display:inline-flex; align-items:center; min-height:44px; transition:border-color .2s, color .2s, background .2s; }
.guide-jumps a:hover { border-color:var(--cyan); background:#101b29; }
.tuto-tabs button, .duration button, .universe-tabs button { cursor:pointer; }
.tuto-tabs button:hover:not([aria-selected=true]) { border-color:#4a6580; color:var(--text); }
button[data-preset] { min-height:44px; padding:8px 18px; border:1px solid #3a4b60; border-radius:var(--btn-radius); background:#101a27; color:var(--text); cursor:pointer; transition:border-color .2s, background .2s; }
button[data-preset]:hover { border-color:var(--cyan); background:#132131; }
.text-link { text-underline-offset:5px; }
.text-link:hover { text-decoration:underline; }

/* Bouton en fin de carte : respiration au-dessus */
.help-card { display:flex; flex-direction:column; align-items:flex-start; }
.help-card p { margin-bottom:24px; }
.help-card .button { margin-top:auto; }

/* Groupes de CTA : même hauteur, mêmes dimensions */
.actions { align-items:stretch; }
.actions .button { min-height:54px; }

@media(max-width:760px) {
  /* Deux CTA associés : mêmes dimensions (largeur, hauteur, rayon, typographie) */
  .actions { gap:12px; }
  .actions .button { flex:1 1 220px; min-height:58px; padding:8px 20px; font-size:.95rem; }
  .actions .button:has(.btn-from) { flex-direction:column; gap:2px; }
  .btn-from { display:block; font-size:.76rem; }
  .btn-from::before { content:none; }
  .trial-contacts { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:560px) {
  /* CTA principaux en pleine largeur dans les blocs de contenu */
  main .button:not(.small):not(.select-plan) { width:100%; }
  .actions .button { flex-basis:100%; }
  .article-links .button, .tuto-card-actions .button { flex:1 1 auto; }
}
@media(prefers-reduced-motion:reduce) {
  .button:hover, .card-link:hover, .card-link:hover .card-link-arrow, .icon-btn:active, .vt-arrow:active, .catalogue-controls button:active, .avis-lb-close:active { transform:none; }
}

/* ========== Guides : schémas, sources, groupes du blog ========== */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.article-figure { margin:34px 0; }
.article-diagram { display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:18px; }
.article-figure figcaption { margin-top:12px; font-size:.85rem; line-height:1.55; color:var(--muted); }
.article-figure .fig-note { opacity:.8; }
.article-sources { margin:0 0 26px; padding-left:22px; }
.article-sources a { color:var(--cyan); text-underline-offset:4px; }
.article-sources a:hover { text-decoration:underline; }
.article p:not(.breadcrumb):not(.article-links) a, .article li a:not(.button), .article td a { color:var(--cyan); text-decoration:underline; text-underline-offset:4px; text-decoration-color:#29b6f680; }
.article p:not(.breadcrumb):not(.article-links) a:hover, .article li a:not(.button):hover, .article td a:hover { text-decoration-color:currentColor; }
.article .eyebrow { color:var(--cyan); }
.article .breadcrumb a { text-decoration:none; }
.blog-group { padding-block:44px; }
.blog-group .section-head { margin-bottom:26px; }
.blog-group .section-head>p { max-width:520px; }
.blog-group[id] { scroll-margin-top:96px; }
.blog-card p { margin-top:8px; }
.blog-meta { display:block; margin-top:14px; font-size:.75rem; color:var(--muted); }

/* Schéma : sur mobile, le SVG (illisible en petit) laisse la place à la liste de ses étapes */
.fig-list { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; list-style:none; }
@media(max-width:640px) {
  .article-diagram { display:none; }
  .fig-list { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; display:grid; gap:8px; }
  .fig-list li { margin:0; padding:12px 14px; border:1px solid var(--border); border-left:3px solid var(--cyan); border-radius:10px; background:#0b111a; font-size:.92rem; color:var(--text); }
}
.article { overflow-wrap:break-word; }
.article code { overflow-wrap:anywhere; word-break:break-word; padding:2px 6px; border-radius:5px; background:#101b29; font-size:.9em; }
.article h3 { margin:28px 0 8px; font-size:1.12rem; }
.article-cta { margin-top:44px; }

/* Tableaux des guides : sur mobile, chaque ligne devient une fiche (aucun défilement horizontal nécessaire) */
@media(max-width:640px) {
  .article .table-scroll { overflow:visible; }
  .article table, .article tbody, .article tr, .article td { display:block; width:100%; min-width:0; box-sizing:border-box; }
  .article thead { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .article tr { margin:0 0 12px; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:#0b111a; }
  .article td { padding:7px 0; border:0; font-size:.92rem; }
  .article td::before { content:attr(data-label); display:block; margin-bottom:2px; font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); }
  .article td:first-child { color:var(--text); font-weight:600; }
  .article td:first-child::before { display:none; }
}

/* Témoignage vidéo : aperçu + bouton Lecture, format vertical 9:16 conservé dans l'écran de l'iPhone */
.vt-controls[hidden] { display:none; }
.vt-media { position:absolute; inset:0; display:grid; place-items:center; background:#000; }
.vt-media .vt-video { position:static; display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; }
.vt-playbtn { position:absolute; inset:0; z-index:3; display:grid; place-content:center; justify-items:center; gap:calc(var(--u)*3); padding:0; border:0; background:linear-gradient(180deg,#07090d00 46%,#07090d99 100%); color:#fff; cursor:pointer; }
.vt-playbtn .vt-play { margin:0; width:calc(var(--u)*23); height:calc(var(--u)*23); border:calc(var(--u)*.9) solid #ffffff66; background:#29b6f6; box-shadow:0 0 0 calc(var(--u)*2.4) #29b6f62e, 0 calc(var(--u)*3) calc(var(--u)*10) #000000b3; transition:transform .25s ease, background .25s ease, box-shadow .25s ease; }
.vt-playbtn .vt-play svg { width:calc(var(--u)*9.4); fill:#031323; }
.vt-playlabel { font:700 calc(var(--u)*3.6)/1 var(--body); letter-spacing:.18em; text-transform:uppercase; text-shadow:0 1px 10px #000c; }
.vt-playbtn:hover .vt-play { transform:scale(1.07); background:#75d1fc; }
.vt-playbtn:active .vt-play { transform:scale(.97); }
.vt-playbtn:focus-visible { outline:3px solid var(--cyan); outline-offset:calc(var(--u)*-2); }
.vt-media.is-started .vt-playbtn { display:none; }
.vt.is-started .vt-homebar { opacity:0; }
@media(prefers-reduced-motion:reduce) { .vt-playbtn .vt-play { transition:none; } .vt-playbtn:hover .vt-play, .vt-playbtn:active .vt-play { transform:none; } }

/* ========== Aperçu du service : vidéo dans une TV (accueil + Présentation) ========== */
.tvdemo { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); grid-template-areas:"copy stage" "cta stage"; column-gap:clamp(28px,5vw,72px); align-items:center; }
.tvdemo-copy { grid-area:copy; align-self:end; max-width:480px; }
.tvdemo-copy .eyebrow { margin-bottom:20px; }
.tvdemo-copy h2 { margin-bottom:22px; text-wrap:balance; }
.tvdemo-cta { grid-area:cta; align-self:start; margin-top:30px; }
.tvdemo-stage { grid-area:stage; position:relative; min-width:0; }
.tvdemo-stage::before { content:""; position:absolute; inset:-8% 0 0; z-index:0; pointer-events:none; background:radial-gradient(58% 54% at 50% 46%,#29b6f624,transparent 72%); }
.tv { --tv-bezel:clamp(4px,.85vw,11px); position:relative; z-index:1; margin:0; }
.tv-frame { position:relative; padding:var(--tv-bezel); border-radius:clamp(7px,1.2vw,15px); background:linear-gradient(158deg,#2c323b 0%,#12161b 38%,#0b0e12 62%,#1d232a 100%); box-shadow:0 0 0 1px #3b4451, 0 1px 0 #ffffff1f inset, 0 46px 80px -34px #000000f2, 0 20px 44px -22px #000000cc; }
.tv-screen { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:clamp(2px,.4vw,5px); background:#000; box-shadow:0 0 0 1px #000, 0 0 0 2px #ffffff0a; }
.tv-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.tv-glare { position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(116deg,#ffffff14 0%,#ffffff00 30%,#ffffff00 72%,#ffffff08 100%); }
.tv-led { position:absolute; left:50%; bottom:calc(var(--tv-bezel)/2 - 1.5px); width:3px; height:3px; border-radius:50%; transform:translateX(-50%); background:#29b6f6; opacity:.7; box-shadow:0 0 6px #29b6f6; }
.tv-stand { display:grid; justify-items:center; }
.tv-neck { width:9%; height:clamp(8px,1.8vw,24px); background:linear-gradient(90deg,#0c0f13,#2a3038 50%,#0c0f13); clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); }
.tv-foot { width:34%; height:clamp(3px,.55vw,7px); border-radius:99px; background:linear-gradient(180deg,#2f363f,#0d1014); box-shadow:0 clamp(8px,1.6vw,20px) clamp(14px,2.6vw,34px) -8px #000000d9; }
.tv-playbtn { position:absolute; inset:0; z-index:3; display:none; place-content:center; justify-items:center; gap:clamp(6px,1.2vw,14px); padding:0; border:0; background:linear-gradient(180deg,#07090d00 40%,#07090d73 100%); color:#fff; cursor:pointer; }
.js .tv-playbtn { display:grid; }
.tv.is-started .tv-playbtn { display:none; }
.tv-play { display:grid; place-items:center; width:clamp(52px,11vw,96px); aspect-ratio:1; border:2px solid #ffffff66; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 clamp(4px,1vw,10px) #29b6f62e, 0 12px 30px #000000b3; transition:transform .25s ease, background .25s ease; }
.tv-play svg { width:40%; height:auto; margin-left:6%; fill:#031323; }
.tv-playlabel { font:700 clamp(.66rem,1.3vw,.82rem)/1 var(--body); letter-spacing:.18em; text-transform:uppercase; text-shadow:0 1px 10px #000c; }
.tv-playbtn:hover .tv-play { transform:scale(1.07); background:#75d1fc; }
.tv-playbtn:active .tv-play { transform:scale(.97); }
.tv-playbtn:focus-visible { outline:3px solid var(--cyan); outline-offset:-6px; }
.tv-video:focus-visible { outline:3px solid var(--cyan); outline-offset:-3px; }
@media(max-width:900px) {
  .tvdemo { grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "stage" "cta"; row-gap:0; }
  .tvdemo-copy { align-self:auto; max-width:none; margin-bottom:28px; }
  .tvdemo-cta { margin-top:26px; }
}
@media(max-width:560px) {
  .tv { --tv-bezel:clamp(3px,.9vw,5px); }
  .tv-frame { border-radius:7px; }
  .tv-neck { height:9px; }
  .tv-play { width:clamp(50px,15vw,64px); }
}
@media(prefers-reduced-motion:reduce) { .tv-play { transition:none; } .tv-playbtn:hover .tv-play, .tv-playbtn:active .tv-play { transform:none; } }
@media print { .tvdemo { display:none; } }