/* DA meowan.fr (verre / bento / violet), copie du CSS inline de la prod du 02/09/2026, puis extensions multi-pages. */
:root {
  --blue: #5333c0;
  --blue-d: #43299a;
  --blue-soft: #efeafc;
  --grad: linear-gradient(110deg,#5333c0 0%,#5f43cf 34%,#6f4fe0 66%,#7f5af0 100%);
  --grad-h: linear-gradient(110deg,#43299a 0%,#4e37ad 34%,#5b41c4 66%,#6a4bd6 100%);
  --bg: #fff;
  --soft: #f6f8fc;
  --border: #e6e9f0;
  --text: #13182a;
  --muted: #586173;
  --dark: #0e1220;
  --violet:#5333c0;
  --glass:rgba(255,255,255,.55);
  --glass2:rgba(255,255,255,.72);
  --gline:rgba(255,255,255,.65);
  --gshadow:0 12px 40px rgba(83,51,192,.09);
  --gblur:blur(24px) saturate(1.35);
  --gradbg:radial-gradient(900px 600px at 8% -10%,#c7b6ff 0%,transparent 55%),
           radial-gradient(800px 600px at 105% 15%,#ffd6e8 0%,transparent 55%),
           radial-gradient(900px 700px at 50% 115%,#b6e3ff 0%,transparent 55%),
           linear-gradient(160deg,#f2effc,#eef3fb 60%,#f6f0fa);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--gradbg); background-attachment: fixed; color: var(--text);
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: -.025em; }
a { color: var(--blue); text-decoration: none; }
/* 20/09/2026, largeur (Martin, deux captures en 1920x1080 : « je disais ça aussi par rapport
   à la largeur »). free.fr pose 1380 px de contenu utile sur un écran de 1920 ; on en tenait
   1112, soit 268 px de moins, et le site paraissait serré au milieu de l'écran. 1428 = 1380
   + les deux rembourrages de 24. Le tunnel de souscription garde l'ancienne laisse (plus bas) :
   un formulaire étalé sur 1380 px ne se lit pas mieux, il se lit moins bien. */
.wrap { max-width: 1428px; margin: 0 auto; padding: 0 24px; }

/* Utility bar */
.util { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--gline); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); font-size: 13px; }
.util .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 22px; height: 44px; }
.util a { color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.util a:hover { color: var(--text); }
.util a.on { color: var(--text); font-weight: 700; }
@media (max-width: 680px) {
  .util .wrap { justify-content: flex-start; overflow-x: auto; gap: 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .util a { white-space: nowrap; flex: 0 0 auto; }
  /* 20/09/2026 : les six univers ne tiennent sur aucun téléphone (1040 px de liens pour 440 px
     d'écran), la barre défile donc à l'horizontale, mais rien ne le disait et « Wholesale »
     s'arrêtait net au bord, ce qui se lit comme un débordement. Le dernier lien s'éteint
     maintenant en fondu sur 30 px : c'est le signal de défilement, et la marge de fin garde le
     dernier libellé entier quand on est arrivé au bout. */
  .util .wrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
                mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%); }
  /* la marge est portée par le dernier LIEN, pas par le rembourrage du conteneur : un
     `padding-right` de boîte de défilement en flex n'est pas honoré en fin de course partout */
  /* 36 px et non 20 : le fondu couvre les 30 derniers pixels, une marge de 20 laissait le
   dernier libelle (« Web Services », et l'univers COURANT sur ws.meowan.fr) a demi efface
   une fois la barre defilee jusqu'au bout. */
.util .wrap > a:last-child { margin-right: 36px; }
}

/* Header */
header { position: sticky; top: 0; z-index: 50; background: var(--glass); border-bottom: 1px solid var(--gline); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); }
.nav { display: flex; align-items: center; gap: 28px; height: 76px; }
.nav .logo { display: flex; align-items: center; min-height: 44px; margin-right: 12px; gap: 10px; }
/* 20/09/2026 : avec 1380 px de conteneur, un logo poussé à un bout et les liens à l'autre
   laissent 800 px de vide au milieu. Comme sur free.fr, les liens suivent le logo et c'est
   l'espace client qui tient la droite. Sous 860 px il n'y a plus de liens entre les deux :
   la poussée revient au logo (sinon, à 380 px, l'espace client disparaît et le burger se
   retrouve collé au logo, à gauche). */
.nav .btn { margin-left: auto; }
.nav .logo img { height: 36px; width: auto; display: block; }
.nav a.nl { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-size: 15.5px; font-weight: 600; padding: 8px 15px; border-radius: 999px; }
.nav a.nl:hover { color: var(--violet); background: rgba(83,51,192,.10); }
/* Titre lu par les lecteurs d'écran et les moteurs, sans surface à l'écran : la page mobile
   n'a plus d'en-tête depuis le 04/09 mais elle a toujours besoin d'un h1. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--violet); color: #fff;
  padding: 12px 22px; border-radius: 11px; font-weight: 600; font-size: 15px;
  border: none; cursor: pointer; transition: .15s; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(83,51,192,.28);
}
.btn:hover { background: #43299a; }
.btn.ghost { background: var(--glass); border: 1px solid var(--gline); color: var(--text); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); box-shadow: none; }
.btn.ghost:hover { background: var(--glass2); border-color: rgba(83,51,192,.35); }
.btn.light { background: #fff; color: #5333c0; box-shadow: none; }
.btn.light:hover { background: #efeafc; }
@media (max-width: 860px) { .nav a.nl { display: none; } .nav { gap: 12px; }
  .nav .btn { padding: 10px 16px; font-size: 14px; margin-left: 0; }
  .nav .logo { margin-right: auto; }
  .nav .logo img { height: 30px; } }
@media (max-width: 380px) { .nav .btn { display: none; } }

/* Hero */
.hero { text-align: center; padding: 72px 0 40px; position: relative; overflow: hidden; }
.hero .wrap { position: relative; }
.hero .deco { position: absolute; top: 28px; width: 320px; height: 230px; pointer-events: none; }
.hero .deco.l { left: -30px; }
.hero .deco.r { right: -30px; }
@media (max-width: 1100px) { .hero .deco { display: none; } }
.hero .kicker, .eligcard .kicker {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
.hero h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.03em; }
.hero p.sub { color: var(--muted); font-size: 18px; max-width: 620px; margin: 18px auto 0; }

/* Bento */
.bento { padding: 40px 0 24px; }
.bgrid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
}
.cell {
  background: var(--glass); border: 1px solid var(--gline); border-radius: 22px;
  backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); box-shadow: var(--gshadow);
  padding: 30px; display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.cell:hover { transform: translateY(-3px); background: var(--glass2); border-color: rgba(83,51,192,.35); box-shadow: 0 12px 32px rgba(83,51,192,.12); }
.cell h3 { font-size: 21px; }
.cell p { color: var(--muted); font-size: 14.5px; }
.cell .tag {
  align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); background: var(--blue-soft);
  padding: 4px 10px; border-radius: 99px;
}
.cell .price { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: 26px; letter-spacing: -.02em; }
.cell .price small { font-size: 13px; font-weight: 500; color: var(--muted); }
.cell .fine { font-size: 12.5px; line-height: 1.45; color: var(--muted); padding-top: 8px; }
.cell .link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding-top: 12px; font-weight: 700; font-size: 14.5px; }
.cell .link::after { content: " →"; }
.cell ul { list-style: none; margin-top: 4px; }
.cell ul li { font-size: 14.5px; color: var(--muted); padding: 3px 0 3px 22px; position: relative; }
.cell ul li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}

/* Illustrations */
.art { line-height: 0; }
.art svg { display: block; }
.art-top svg { height: 98px; width: auto; max-width: 100%; }
.art-fiber { margin-top: 8px; }
.art-fiber svg { width: 100%; height: auto; }
.rowcell { flex-direction: row; align-items: center; gap: 24px; }
.rowcell .txt { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.rowcell > .art svg { width: 158px; height: auto; }
@media (max-width: 620px) {
  .rowcell { flex-direction: column; align-items: flex-start; }
  .rowcell > .art { order: -1; }
  .rowcell > .art svg { width: auto; height: 98px; }
}

.c-ftto { grid-column: span 2; grid-row: span 2; background: var(--glass2); }
.c-ftto h3 { font-size: 28px; }
.c-ftto .big { font-size: clamp(44px, 6vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-voice { grid-column: span 2; }
.c-ws { grid-column: span 2; flex-direction: row; align-items: center; gap: 24px; }
.c-ws > div.txt { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.c-ws .txt .btn { align-self: flex-start; margin-top: 6px; }
.c-ws > .art svg { width: 158px; height: auto; }
.c-cta { grid-column: span 2; background: linear-gradient(135deg,rgba(83,51,192,.92),rgba(127,90,240,.88)); border: none; color: #fff; box-shadow: 0 18px 50px rgba(83,51,192,.35); }
.c-cta h3, .c-cta .price { color: #fff; }
.c-cta p { color: rgba(255,255,255,.9); max-width: 34ch; }
.c-cta .deco { position: absolute; right: -14px; bottom: -34px; width: 235px; height: 235px; }
@media (max-width: 620px) { .c-cta .deco { width: 180px; height: 180px; right: -30px; bottom: -46px; } }
.c-cta > *:not(.deco) { position: relative; z-index: 1; }
.c-dark { background: var(--dark); border-color: var(--dark); }
.cell.c-dark:hover { background: #171a2b; border-color: rgba(156,125,255,.4); box-shadow: 0 12px 32px rgba(14,18,32,.35); }
.c-dark h3 { color: #fff; }
.c-dark p { color: #98a0b3; }
.c-dark .stat { font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -.03em; }
.c-dark .bgart { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-dark > *:not(.bgart) { position: relative; z-index: 1; }

@media (max-width: 960px) {
  .bgrid { grid-template-columns: repeat(2, 1fr); }
  .c-ftto { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bgrid { grid-template-columns: 1fr; }
  .c-ftto, .c-voice, .c-ws, .c-cta { grid-column: span 1; }
  .c-ws { flex-direction: column; align-items: flex-start; }
  .c-ws > .art svg { width: auto; height: 98px; }
}

/* Reassurance strip */
.strip { padding: 40px 0 64px; }
.strip .row { display: flex; gap: 16px; flex-wrap: wrap; }
.strip .item {
  flex: 1 1 220px; display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border: 1px solid var(--gline); border-radius: 16px;
  background: var(--glass); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); box-shadow: var(--gshadow);
}
.strip .item svg { width: 24px; height: 24px; stroke: var(--blue); fill: none; stroke-width: 2; stroke-linecap: round; flex: 0 0 auto; margin-top: 2px; }
.strip .item b { display: block; font-size: 15px; }
.strip .item span { font-size: 13.5px; color: var(--muted); }

/* Footer */
footer { border-top: 1px solid var(--gline); background: rgba(255,255,255,.45); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); padding: 36px 0; font-size: 13.5px; color: var(--muted); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer .links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }
footer .links { display: flex; gap: 18px; flex-wrap: wrap; }

/* Burger mobile (le menu ne doit jamais disparaître) */
/* `flex: none` : une cible de 44 px ne se laisse pas rétrécir par un voisin. Le 20/09 elle est
   tombée à 42 px parce que 12 px de marge de plus sur le logo suffisaient à faire déborder la
   rangée à 390 px de large : elle ne tenait que par chance depuis le début. */
.burger{display:none;flex:none;width:44px;height:44px;border:1.5px solid var(--gline);border-radius:11px;background:var(--glass);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.burger span{width:19px;height:2px;background:var(--text);border-radius:2px;transition:.2s}
.mobnav{display:none;border-top:1px solid var(--gline);background:rgba(255,255,255,.88);backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);padding:4px 0 12px}
.mobnav a{display:block;padding:14px 24px;font-size:16px;font-weight:700;color:var(--text);border-bottom:1px solid rgba(120,110,180,.10)}
@media (max-width: 860px){
  .burger{display:flex}
  body.menu .mobnav{display:block}
  body.menu .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu .burger span:nth-child(2){opacity:0}
  body.menu .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* Test d'éligibilité fibre (public) */
.elig{padding:8px 0 44px}
.eligcard{background:var(--glass);border:1px solid var(--gline);border-radius:22px;padding:34px 30px;backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);box-shadow:var(--gshadow)}
.eligcard h2{font-size:26px;margin-bottom:6px}
.eligcard>p{color:var(--muted);margin-bottom:18px;font-size:15px}
.eligform{display:flex;gap:10px;flex-wrap:wrap}
/* 20/09/2026 : le conteneur est passé à 1380 px : sans laisse, le champ d'adresse faisait
   1100 px de long pour y écrire « 12 rue du 8 Mai ». Il garde sa taille, le bouton suit. */
.eligform input{flex:1;min-width:240px;max-width:640px;padding:13px 16px;border:1.5px solid rgba(120,110,180,.3);border-radius:11px;font:inherit;font-size:15px;background:rgba(255,255,255,.7);color:inherit}
.eligform input:focus{outline:none;border-color:#5333c0}
.eligres{margin-top:18px}
.eligres .st{font-weight:700;margin-bottom:10px}
.eligres .st.ok{color:#1a7f4e}
.eligres .st.err{color:#b3261e}
.eligres p{font-size:14.5px}
.eligres a{color:#5333c0;font-weight:600}
.eligres .prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:6px}
.eligres .prod{background:rgba(255,255,255,.6);border:1px solid var(--gline);border-radius:14px;padding:16px 18px}
.eligres .prod b{display:block;margin-bottom:6px;font-size:15.5px}
.eligres .prod div{font-size:14px;color:var(--muted);padding:2px 0}

/* ── Extensions multi-pages (préversion 02/09/2026 soir) ─────────────── */
.preview-band{background:var(--dark);color:#c9cfdd;font-size:12.5px;padding:7px 0}
.preview-band .wrap{display:flex;gap:18px;flex-wrap:wrap}
.nav a.nl[aria-current]{background:var(--violet);color:#fff;box-shadow:0 4px 14px rgba(83,51,192,.35)}
.nav a.nl[aria-current]:hover{background:var(--blue-d);color:#fff}
.mobnav a[aria-current]{color:var(--violet)}
.hero.page{padding:56px 0 28px}
.hero .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.hero .sub b{color:var(--text);font-weight:600}
.sec{padding:16px 0 24px}
.shead{margin:0 0 18px}
.shead .kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.shead h2{font-size:clamp(24px,3vw,30px);letter-spacing:-.025em}
.shead p{color:var(--muted);margin-top:8px;max-width:64ch;font-size:15.5px}
/* 20/09/2026 : titre de section nu (sans kicker), plus grand, le « Nos offres internet et
   mobiles à la une. » de free.fr, qui annonce le bento sous le carrousel de l'accueil. */
.shead.bare{margin-bottom:2px}
.shead.bare h2{font-size:clamp(27px,3.4vw,36px);letter-spacing:-.03em;line-height:1.12}
.shead.bare p{margin-top:10px;font-size:16px}
.c-wide{grid-column:span 4}
.c-half{grid-column:span 2}
.c-3{grid-column:span 3}
.cell.tight{gap:8px}
.cell h3 small{font-size:14px;font-weight:500;color:var(--muted)}
.cell .big{font-size:clamp(40px,5vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cell .note{font-size:13px;color:var(--muted);line-height:1.45}
.cell .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.cell .acts .btn{align-self:flex-start}
.tw{overflow-x:auto;margin-top:4px}
.cell table{width:100%;border-collapse:collapse;font-size:14.5px}
.cell th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:8px 14px 8px 0;border-bottom:1px solid rgba(120,110,180,.18);vertical-align:bottom}
.cell td{padding:9px 14px 9px 0;border-bottom:1px solid rgba(120,110,180,.12);vertical-align:top;color:var(--text)}
.cell tr>:last-child{padding-right:0}
.cell tbody tr:hover td{background:rgba(255,255,255,.38)}
.cell td b{font-weight:600}
.cell td.mut{color:var(--muted)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.c-dark table,.c-dark th,.c-dark td{color:#fff}
.c-dark th{color:#98a0b3;border-bottom-color:rgba(255,255,255,.18)}
.c-dark td{border-bottom-color:rgba(255,255,255,.10)}
.c-dark tbody tr:hover td{background:rgba(255,255,255,.06)}
.c-dark .note{color:#98a0b3}
.c-dark a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.c-dark .tag{background:rgba(127,90,240,.22);color:#cbbcff}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;font-size:14.5px;margin-top:4px}
.facts dt{color:var(--muted)}
.facts dd{font-weight:600;overflow-wrap:anywhere}
.c-dark .facts dt{color:#98a0b3}
.c-dark .facts dd{color:#fff}
.steps{list-style:none;counter-reset:s;margin-top:4px}
.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:12px;padding:8px 0;font-size:14.5px;color:var(--muted);align-items:start}
.steps li::before{content:counter(s);width:26px;height:26px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;margin-top:-2px}
.plans{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}
.plan{padding:26px 26px 24px;gap:0}
.plan .ptop{display:flex;justify-content:flex-end;align-items:center;min-height:26px;margin-bottom:6px}
.plan .netw{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:99px}
.plan .netw.g5{color:#fff;background:var(--grad);box-shadow:0 4px 12px rgba(83,51,192,.28)}
.plan .netw.g4{color:var(--muted);background:rgba(120,110,150,.12);border:1px solid var(--gline)}
.plan .go{font-size:42px;font-weight:700;letter-spacing:-.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .go small{font-size:17px;font-weight:600;letter-spacing:0;-webkit-text-fill-color:var(--text);color:var(--text)}
.plan .price{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-top:14px;padding-top:0;color:var(--text)}
.plan .price small{font-size:14px;font-weight:500;color:var(--muted)}
.plan .eng{font-size:13.5px;color:var(--muted);margin-top:2px}
.plan .feats{list-style:none;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:0}
.plan .feats li{font-size:14px;color:var(--text);padding:5px 0 5px 26px;position:relative}
.plan .feats li::before{content:"";position:absolute;left:2px;top:9px;width:12px;height:7px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
.plan .feats li.tvhi{color:var(--violet);font-weight:650}
.plan .feats li.tvhi::before{border-left-color:var(--violet);border-bottom-color:var(--violet)}
.plan .pnote{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.4}
.plan .plan-cta{margin-top:auto;width:100%}
.plan .feats{margin-bottom:8px}
.plan .plan-detail{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:6px;font-weight:600;font-size:13.5px;color:var(--muted)}
.plan .plan-detail:hover{color:var(--blue)}
.plan .plan-detail::after{content:" \203A";margin-left:4px;font-size:16px;line-height:1}
.inc{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto}
.inc .cell{padding:22px 24px;gap:6px}
.inc .cell h3{font-size:17px}
.inc .cell p{font-size:14px}
.eligcard.top{padding:30px 30px 26px}
.eligcard .eligform .btn{flex:0 0 auto}
.eligres .st.ok{color:#1a7f4e}
.eligres .prods{margin-top:10px}
.js .offer{display:none}
.js .offer.on{display:block}
.js .offer.on .bgrid{animation:none}
.diag{width:100%;max-width:820px;height:auto;display:block;margin:6px auto 0}
.diag text{font-size:11.5px;fill:#fff;font-family:inherit}
.diag .t{font-weight:700;font-size:12.5px}
.diag .s{fill:#98a0b3}
.diag rect,.diag line,.diag path{stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.2}
.diag rect.hi{stroke:#7f5af0;stroke-width:1.6}
.diag .dash{stroke-dasharray:3 3}
.c-cta .acts .btn.light{background:#fff;color:#5333c0}
footer .wrap>div:first-child{max-width:70ch}
@media (max-width:960px){
  .c-wide,.c-3{grid-column:span 2}
  .plans{grid-template-columns:repeat(2,1fr)}
  .inc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .c-wide,.c-half,.c-3{grid-column:span 1}
  .plans,.inc{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:2px 0}
  .facts dt{margin-top:8px}
  .hero.page{padding:44px 0 20px}
  .cell{padding:24px}
  .eligcard.top{padding:24px 20px}
}
.cell,.eligcard,.strip .item{min-width:0}
/* cartes entières cliquables (accueil) */
a.cell{color:var(--text)}
a.cell .link{color:var(--blue)}
a.cell.c-dark{color:#fff}
a.cell.c-dark p{color:#98a0b3}
/* ancres et blocs révélés : ne pas passer sous l'en-tête collant (util 44 + nav 76) */
.offer,.bento[id],.elig[id]{scroll-margin-top:132px}
/* ── Souscription en ligne (03/09/2026) ─────────────────────────────────── */
.sub{padding:8px 0 56px}
.sub .wrap{max-width:1160px}
.subgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.sstep{background:var(--glass);border:1px solid var(--gline);border-radius:22px;backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);box-shadow:var(--gshadow);padding:22px 26px;margin-bottom:14px}
.sstep .sh{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sstep .sh .n{width:30px;height:30px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.sstep.open .sh .n,.sstep.done .sh .n{background:var(--violet);color:#fff}
.sstep .sh h2{font-size:20px;flex:1;letter-spacing:-.02em}
.sstep .sh .sum{font-size:14px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sstep .sh a.edit{font-size:14px;font-weight:700;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.sstep .sb{display:none;padding-top:16px}
.sstep.open .sb{display:block}
.sstep.locked{opacity:.55}
.sstep .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.f{margin-bottom:14px;min-width:0}
.f label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;padding:12px 14px;border:1.5px solid rgba(120,110,180,.3);border-radius:11px;font:inherit;font-size:15px;background:rgba(255,255,255,.7);color:inherit;min-height:44px}
.f select{appearance:auto}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:#5333c0}
.f .help,.sstep .help{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.seg{display:inline-flex;border:1.5px solid rgba(120,110,180,.3);border-radius:11px;overflow:hidden;background:rgba(255,255,255,.6)}
.seg button{min-height:44px;padding:0 18px;border:0;background:transparent;font:inherit;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--violet);color:#fff}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt{border:1.5px solid rgba(120,110,180,.3);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.6);cursor:pointer;text-align:left;font:inherit;color:inherit;min-height:44px;min-width:0}
.opt b{display:block;font-size:17px;letter-spacing:-.01em}
.opt span{font-size:13px;color:var(--muted)}
.opt[aria-pressed=true]{border-color:var(--violet);background:#fff;box-shadow:0 0 0 2px rgba(83,51,192,.18)}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;min-height:44px;padding:6px 0;cursor:pointer}
.chk input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:#5333c0}
.chk a{font-weight:600}
.serr{color:#b3261e;font-size:14px;margin:4px 0 12px;font-weight:600;line-height:1.45}
.serr a{color:#5333c0}
.sok{color:#1a7f4e;font-weight:600}
.recap{position:sticky;top:132px;background:var(--glass2);border:1px solid var(--gline);border-radius:22px;padding:24px 26px;backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);box-shadow:var(--gshadow)}
.recap .kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.recap h3{font-size:21px}
.recap .price{font-size:34px;font-weight:700;letter-spacing:-.03em;margin-top:6px;line-height:1.1}
.recap .price small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.recap dl{margin-top:14px;border-top:1px solid rgba(120,110,180,.18)}
.recap dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(120,110,180,.12);font-size:14px}
.recap dt{color:var(--muted)}
.recap dd{font-weight:600;text-align:right}
.recap dd small{font-weight:500;color:var(--muted);font-size:12px}
.recap .tot dt,.recap .tot dd{font-weight:700;color:var(--text)}
.recap .fine{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.45}
@media (max-width:900px){.subgrid{grid-template-columns:1fr}.recap{position:static}}
@media (max-width:620px){.opts{grid-template-columns:1fr 1fr}.f2{grid-template-columns:1fr}.sstep{padding:20px 18px}.sstep .sh .sum{white-space:normal}}

/* Photos réelles (03/09/2026) : bandeaux plein cadre dans les cartes du bento */
.ph { line-height: 0; overflow: hidden; position: relative; }
.ph img { display: block; width: 100%; height: auto; }
.cell > .ph-top { margin: -30px -30px 12px; }
/* carte sombre : texte à gauche, photo collée au bord droit */
.c-side { flex-direction: row; align-items: stretch; gap: 22px; }
.c-side > .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.c-side > .ph-side { flex: none; width: 40%; align-self: stretch; margin: -30px -30px -30px 0; }
.c-side > .ph-side img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) {
  .c-side { flex-direction: column; }
  .c-side > .ph-side { order: -1; width: auto; margin: -30px -30px 14px; aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------------------------
   Bento d'accueil, agencement en tuiles inégales (03/09/2026)
   Une tuile phare, deux tuiles empilées à côté, une bande pleine largeur, puis
   trois cartes de service. La photo est une colonne plein bord, pas un bandeau,
   et le prix est l'élément dominant de chaque tuile d'offre.
   --------------------------------------------------------------------------- */
.offers { position: relative; padding: 34px 0 48px; }
.offers::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(83,51,192,0), rgba(83,51,192,.15) 14%, rgba(127,90,240,.06) 74%, rgba(127,90,240,0));
}
.offers > .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.ogrid { display: grid; gap: 16px; grid-template-columns: 1.04fr 1fr; }

.tile {
  background: rgba(255,255,255,.72); border: 1px solid var(--gline); border-radius: 22px;
  backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); box-shadow: var(--gshadow);
  display: flex; flex-direction: row; align-items: stretch; overflow: hidden; position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.tile:hover { transform: translateY(-3px); background: rgba(255,255,255,.86); border-color: rgba(83,51,192,.35); box-shadow: 0 12px 32px rgba(83,51,192,.14); }
.tile > .ph-fill { flex: none; width: 38%; align-self: stretch; }
.tile > .ph-fill img { width: 100%; height: 100%; object-fit: cover; }
.tile > .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 22px 26px; }
.tile h3 { font-size: 21px; letter-spacing: -.02em; }
.tile p { color: var(--muted); font-size: 14.5px; }
.tile .tag {
  align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); background: var(--blue-soft);
  padding: 4px 10px; border-radius: 99px;
}
.tile ul { list-style: none; margin-top: 2px; }
.tile ul li { font-size: 14.5px; color: var(--muted); padding: 3px 0 3px 22px; position: relative; }
.tile ul li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}
.tile .price { margin-top: auto; padding-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tile .price b { font-weight: 700; font-size: 30px; letter-spacing: -.03em; line-height: 1; }
.tile .price small { font-size: 13px; font-weight: 500; color: var(--muted); }
.tile .link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 14.5px; }
.tile .link::after { content: " →"; }

.lead { grid-row: span 2; }
.lead > .ph-fill { width: 44%; }
.lead > .ph-fill img { object-position: 50% 42%; }
.lead > .txt { padding: 30px 32px; gap: 12px; }
.lead h3 { font-size: 28px; letter-spacing: -.03em; }
.lead .price { margin-top: 18px; padding-top: 0; }
.lead .price b { font-size: 42px; }
.lead .link { margin-top: 4px; }

/* bande pleine largeur : photo, texte, puis le chiffre isolé derrière un filet */
.band { background: var(--dark); border-color: var(--dark); }
.band:hover { background: #171a2b; border-color: rgba(156,125,255,.4); }
.band > .ph-fill { width: 25%; }
.band > .txt { padding: 30px 32px; }
.band > .aside {
  flex: none; width: 300px; display: flex; flex-direction: column; gap: 10px;
  margin: 26px 0; padding: 0 32px; border-left: 1px solid rgba(255,255,255,.16);
}
.band .stat { font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -.03em; line-height: 1; }
.band h3 { color: #fff; }
.band p, .band ul li { color: #98a0b3; }
.band ul li::before { border-color: #9c7dff; }
.band .link { margin-top: auto; color: #cbbcff; }

/* 20/09/2026, conteneur élargi à 1380 px : dans une tuile, c'est la PHOTO qui fixe la hauteur
   (colonne à N %, image de rapport 2:3 en hauteur automatique), donc élargir la tuile la rend
   plus haute : le bento gagnait 212 px de haut pour rien. Au-delà de 1200 px, la colonne
   d'image garde donc la largeur qu'elle avait à 1112 px de conteneur : le texte prend toute la
   largeur gagnée, la page ne s'allonge pas. En dessous, les pourcentages d'origine sont intacts. */
@media (min-width: 1200px) {
  .tile > .ph-fill { width: 200px; }
  .lead > .ph-fill { width: 246px; }
  .band > .ph-fill { width: 278px; }
}

/* trois cartes de service de même largeur : plus de rangée orpheline en bas du bento */
.sgrid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.sgrid .cell { grid-column: auto; }
.svc > .art-svc { line-height: 0; margin-bottom: 2px; }
.svc > .art-svc svg { width: auto; height: 92px; }
.svc .btn, .svc .link { align-self: flex-start; margin-top: auto; }
.svc .btn.ghost { background: rgba(255,255,255,.6); border-color: rgba(83,51,192,.24); }
.svc .link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 14.5px; }
.svc .link::after { content: " →"; }

@media (max-width: 960px) {
  .ogrid { grid-template-columns: 1fr; }
  .lead { grid-row: auto; }
  .band { flex-wrap: wrap; }
  .band > .ph-fill { width: 100%; aspect-ratio: 24 / 7; }
  .band > .txt { flex: 1 1 100%; }
  .band > .aside { flex: 1 1 100%; width: auto; margin: 0 32px 26px; padding: 22px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .sgrid { grid-template-columns: repeat(2, 1fr); }
  .sgrid .c-cta { grid-column: span 2; }
}
@media (max-width: 620px) {
  .offers { padding-top: 24px; }
  .tile { flex-direction: column; }
  .tile > .ph-fill, .lead > .ph-fill, .band > .ph-fill { width: 100%; aspect-ratio: 16 / 9; }
  .tile > .txt, .lead > .txt, .band > .txt { padding: 24px; }
  .band > .aside { margin: 0 24px 24px; }
  .lead h3 { font-size: 24px; }
  .lead .price b { font-size: 34px; }
  .sgrid { grid-template-columns: 1fr; }
  .sgrid .c-cta { grid-column: span 1; }
}

/* accueil : en-tête resserré pour que le bento entre dans le premier écran */
.hero.lead-hero { padding: 44px 0 22px; }
.hero.lead-hero h1 { font-size: clamp(30px, 4.4vw, 46px); }
.hero.lead-hero p.sub { margin-top: 14px; font-size: 17px; }
.hero.lead-hero .acts { margin-top: 22px; }
.tile .fine { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.lead .fine { margin-top: auto; padding-top: 16px; }

/* ---------------------------------------------------------------------------
   Carrousel de la page mobile (03/09/2026 au soir)
   Trois arguments, une photo par diapositive. Le ruban défile nativement avec
   accroche : sans script, on peut encore faire défiler à la main et tout lire.
   Les commandes sont SOUS le ruban, pas posées sur la photo : un rond de verre
   sur une image claire ne tient jamais son contraste.
   --------------------------------------------------------------------------- */
.carousel { padding: 8px 0 16px; }
/* 13/09/2026 : l'accueil a le sien ; la section qui suit colle au ruban comme sur la page mobile */
.carousel + .bento { padding-top: 0; }
.carou { position: relative; }
.ctrack {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px 2px 8px; margin: -4px -2px 0;
}
.ctrack::-webkit-scrollbar { display: none; }
.ctrack > .slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }

/* 04/09/2026 : la diapositive devient une AFFICHE : la photo occupe toute la carte et le
   texte est incrusté dessus (« tu peux mettre du texte sur les images, ça fait + vivant »).
   Le voile est surtout HORIZONTAL, parce que le texte est à gauche et que le sujet de chaque
   photo a été cadré à droite : un voile uniforme assombrirait la photo pour rien.
   La hauteur est un minimum, pas un rapport figé : si le texte est plus haut que la boîte
   (grande police du système, traduction), la carte grandit au lieu de couper le texte. */
.slide.poster {
  display: flex; align-items: flex-end; position: relative; overflow: hidden;
  min-height: 520px; border: 0; background: #0b0a14; border-radius: 22px;
}
.slide.poster:hover { transform: none; background: #0b0a14; border-color: transparent; box-shadow: var(--gshadow); }
.slide.poster > .ph-bg { position: absolute; inset: 0; margin: 0; line-height: 0; }
.slide.poster > .ph-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.slide.poster > .pveil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,7,18,.82) 0%, rgba(8,7,18,.76) 22%, rgba(8,7,18,.50) 42%, rgba(8,7,18,.13) 60%, rgba(8,7,18,0) 76%),
    linear-gradient(0deg, rgba(8,7,18,.60) 0%, rgba(8,7,18,.26) 30%, rgba(8,7,18,0) 60%);
}
.slide.poster > .ptxt {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 56px 44px 38px; max-width: 620px;
  /* Le voile de la carte ne sait pas où le texte s'arrête : sur la première affiche, le titre
     mordait sur une façade en plein soleil et tombait à 2,56 de contraste. Le bloc porte donc
     son propre dégradé, qui s'éteint à sa droite (aucun bord net) et vers son haut. */
  background:
    linear-gradient(90deg, rgba(8,7,18,.60) 0%, rgba(8,7,18,.54) 54%, rgba(8,7,18,0) 100%),
    linear-gradient(0deg, rgba(8,7,18,.30) 0%, rgba(8,7,18,0) 100%);
}
/* 13/09/2026, accueil : une capture d'application en fond (tuiles blanches, numéros de chaînes)
   n'a pas la zone calme d'une photo : le voile gauche monte à 95 % et s'éteint plus loin. */
.slide.poster.dim > .pveil {
  background:
    linear-gradient(90deg, rgba(8,7,18,.95) 0%, rgba(8,7,18,.92) 28%, rgba(8,7,18,.72) 46%, rgba(8,7,18,.30) 64%, rgba(8,7,18,0) 80%),
    linear-gradient(0deg, rgba(8,7,18,.60) 0%, rgba(8,7,18,.26) 30%, rgba(8,7,18,0) 60%);
}
/* Fond SOMBRE, pas un voile blanc : un badge blanc à 20 % sur une façade ensoleillée mesurait
   2,46 de contraste au pixel (même famille de bug que le bouton secondaire du 03/09). */
.slide.poster .tag { color: #fff; background: rgba(8,7,18,.68); border: 1px solid rgba(255,255,255,.34); }
.slide.poster h2 { color: #fff; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.035em; line-height: 1.08; max-width: 20ch; }
.slide.poster > .ptxt > p { color: rgba(255,255,255,.92); font-size: 16px; line-height: 1.5; max-width: 44ch; }
.slide.poster .pstat { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.slide.poster .pstat b { color: #fff; font-size: 42px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.slide.poster .pstat span { color: rgba(255,255,255,.92); font-size: 14px; max-width: 24ch; }
.slide.poster .fine { color: rgba(255,255,255,.80); font-size: 12.5px; line-height: 1.5; max-width: 52ch; }
.slide.poster .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
/* Le bouton secondaire ne prend PAS de voile blanc : du blanc à 16 % derrière du texte blanc
   tombe à 4,12 de contraste (leçon du 03/09). Il garde donc la photo assombrie pour fond. */
.slide.poster .acts .btn.light.ghost2 { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.78); }
.slide.poster .acts .btn.light.ghost2:hover { background: rgba(0,0,0,.22); color: #fff; border-color: #fff; }

/* ---------------------------------------------------------------------------
   PASTILLE D'OFFRE, 20/09/2026 (« on peut faire un truc comme free ? »)
   Le chiffre qui décide sort du bloc de texte et va dans une carte posée sur la
   moitié droite de la photo, là où le voile latéral s'est déjà éteint : c'est la
   pastille de free.fr. Elle est BLANCHE OPAQUE, jamais en verre : un blanc
   à demi transparent sur une photo ne tient pas 4,5:1, et c'est pour ça que
   rien n'était posé sur l'image jusqu'ici. Sur fond opaque, le contraste se
   calcule au lieu de se mesurer, et il ne dépend plus de la photo du jour.
   --------------------------------------------------------------------------- */
.slide.poster > .pcard {
  position: relative; z-index: 2; align-self: center; flex: 0 0 auto;
  margin: 0 44px 0 auto; width: 262px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px 22px 22px; background: #fff; border-radius: 20px;
  box-shadow: 0 20px 46px rgba(8,7,18,.34), 0 2px 8px rgba(8,7,18,.18);
}
/* la pastille de tête reprend le violet plein (le rouge plein de « Freebox Pop ») ;
   la règle sombre de l'affiche s'appliquerait sinon, badge noir sur carte blanche */
.slide.poster .pcard .tag {
  align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--blue); border: 0;
  padding: 5px 11px; border-radius: 99px;
}
.slide.poster .pcard .pstat { display: block; margin: 0; }
.slide.poster .pcard .pstat b {
  display: block; color: var(--blue); font-size: 38px; font-weight: 700;
  letter-spacing: -.04em; line-height: 1.02; white-space: nowrap;
}
.slide.poster .pcard .pstat span {
  display: block; color: var(--muted); font-size: 13.5px; line-height: 1.4;
  max-width: none; margin-top: 3px;
}
.pcard .ppills { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
/* la coche est celle de la DA (deux bordures pivotées, pas un caractère ni une icône
   tierce) ; elle est héritée de `.tile ul li` et recalée dans le rembourrage du jeton */
.pcard .ppills li {
  font-size: 12.5px; font-weight: 600; color: var(--text); text-align: left;
  border: 1px solid rgba(83,51,192,.30); border-radius: 99px; padding: 6px 12px 6px 30px;
}
.pcard .ppills li::before { left: 12px; top: 12px; }

@media (max-width: 1040px) {
  .slide.poster { min-height: 470px; }
  .slide.poster > .ptxt { padding: 32px 34px 30px; }
  .slide.poster > .pcard { margin-right: 30px; width: 240px; }
}
/* entre 620 et 860 px la carte n'est plus assez large pour rester en 21:10 : on abaisse la
   hauteur plutôt que de recadrer la photo d'un tiers */
@media (max-width: 860px) {
  .slide.poster { min-height: 410px; }
  .slide.poster h2 { font-size: 28px; }
  .slide.poster > .ptxt { padding: 26px 30px 26px; max-width: none; flex: 1 1 auto; }
  .slide.poster > .pcard { margin-right: 22px; width: 196px; padding: 16px 16px 18px; }
  .slide.poster .pcard .pstat b { font-size: 30px; }
  .pcard .ppills li { font-size: 11.5px; padding: 5px 10px 5px 26px; }
  .pcard .ppills li::before { left: 10px; top: 10px; width: 10px; height: 6px; }
}

.cbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.cdots { display: flex; align-items: center; }
.cdot {
  appearance: none; background: none; border: 0; cursor: pointer;
  min-width: 30px; min-height: 44px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center;
}
.cdot > i { display: block; width: 9px; height: 9px; border-radius: 99px; background: rgba(19,24,42,.22); transition: background .18s ease, width .18s ease; }
.cdot:hover > i { background: rgba(83,51,192,.5); }
.cdot[aria-current="true"] > i { width: 28px; background: var(--blue); }
.cdot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 12px; }
.cbtns { display: flex; gap: 10px; }
.cnav {
  appearance: none; cursor: pointer; width: 44px; height: 44px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  background: var(--glass2); border: 1px solid var(--gline);
  backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur);
  box-shadow: 0 6px 18px rgba(83,51,192,.10); transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cnav:hover { background: #fff; color: var(--blue); border-color: rgba(83,51,192,.35); }
.cnav:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cplay .i-play { display: none; }
.cplay[aria-pressed="true"] .i-pause { display: none; }
.cplay[aria-pressed="true"] .i-play { display: inline-block; }

/* ---------------------------------------------------------------------------
   COMMANDES SUR LA PHOTO, 20/09/2026, grammaire free.fr : le groupe pause /
   précédent / suivant passe en bas à droite de l'affiche.
   La note du 03/09 disait « un rond de VERRE sur une image claire ne tient jamais
   son contraste » : c'était vrai du verre, pas du blanc plein. Les ronds passent
   donc en blanc OPAQUE avec une ombre portée, et le bas de l'affiche porte déjà
   le voile vertical. Sous 620 px, la barre redescend sous le ruban : le bloc de
   texte occupe toute la largeur en bas et les ronds tomberaient sur les boutons.
   --------------------------------------------------------------------------- */
@media (min-width: 621px) {
  .carou > .cbar {
    position: absolute; z-index: 3; right: 26px; bottom: 30px; left: auto;
    margin: 0; width: auto; justify-content: flex-end; gap: 14px;
  }
  .carou > .cbar .cdot > i { background: rgba(255,255,255,.58); box-shadow: 0 1px 4px rgba(8,7,18,.55); }
  .carou > .cbar .cdot:hover > i { background: #fff; }
  .carou > .cbar .cdot[aria-current="true"] > i { width: 26px; background: #fff; }
  .carou > .cbar .cdot:focus-visible { outline-color: #fff; }
  .carou > .cbar .cnav {
    background: #fff; border-color: rgba(8,7,18,.10); color: var(--text);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 6px 18px rgba(8,7,18,.34);
  }
  .carou > .cbar .cnav:hover { background: #fff; color: var(--blue); border-color: rgba(83,51,192,.35); }
  .carou > .cbar .cnav:focus-visible { outline-color: #fff; }
}

@media (max-width: 620px) {
  /* Sur un téléphone la colonne est trop étroite pour un voile latéral : il passe à la
     verticale, texte en bas. La photo bascule au même seuil sur son cadrage 21:40, et la
     hauteur de la carte suit ce rapport : la photo n'est donc pas recadrée du tout. */
  /* Piège : la règle bento `.tile { flex-direction: column }` s'applique aussi ici sous 620 px.
     En colonne, `align-items: flex-end` ne pousse plus rien vers le bas, c'est
     `justify-content` qui commande l'axe principal, et le texte remontait en haut de l'affiche,
     là où le voile est le plus clair. */
  /* 20/09/2026 : la pastille passe EN HAUT À GAUCHE, sur la partie de la photo que le voile
     vertical laisse claire, et le texte reste en bas, d'où `space-between`. */
  .slide.poster { min-height: min(700px, calc((100vw - 48px) * 1.905));
                  flex-direction: column; justify-content: space-between; align-items: stretch; }
  /* 20/09/2026 (Martin : « ça rend pas ouf sur mobile ») : le bloc de texte porte
     `flex: 1 1 auto` depuis le 07/09, une règle écrite pour le mode RANGÉE (861-1040 px) où il
     doit prendre la largeur restante à côté de la pastille. Sous 620 px la carte est en COLONNE :
     la même déclaration s'applique alors à la HAUTEUR, le bloc s'étire jusqu'à toucher la pastille
     et son dégradé noir à 94 % recouvre la photo sur 250 px sous la dernière ligne de texte.
     Même famille de piège que la note ci-dessus sur `align-items` : en colonne, une propriété
     d'axe principal change de sens. Le texte reprend donc sa hauteur naturelle, et
     `space-between` remet de la photo entre la pastille et lui. */
  .slide.poster > .ptxt { flex: 0 0 auto; }
  .slide.poster > .pcard {
    order: -1; align-self: flex-start; margin: 18px 0 0 18px; width: auto;
    max-width: min(76%, 290px); padding: 14px 16px 16px; gap: 8px; border-radius: 18px;
  }
  .pcard .ppills { flex-direction: row; flex-wrap: wrap; align-self: flex-start; }
  .slide.poster .pcard .pstat b { font-size: 29px; }
  .slide.poster > .pveil {
    background: linear-gradient(0deg, rgba(8,7,18,.92) 0%, rgba(8,7,18,.86) 36%, rgba(8,7,18,.60) 56%, rgba(8,7,18,.20) 74%, rgba(8,7,18,0) 92%);
  }
  /* Le voile de la carte ne connaît pas la hauteur du texte : sur un téléphone, deux lignes de
     plus et le titre se retrouvait sur du ciel bleu. Le dégradé est donc porté par le BLOC DE
     TEXTE lui-même : il monte exactement autant que lui, quel que soit le nombre de lignes. */
  .slide.poster > .ptxt {
    padding: 64px 22px 22px; max-width: none; gap: 8px;
    background: linear-gradient(0deg, rgba(8,7,18,.94) 0%, rgba(8,7,18,.90) 62%, rgba(8,7,18,.62) 84%, rgba(8,7,18,0) 100%);
  }
  .slide.poster h2 { font-size: 25px; max-width: 18ch; }
  .slide.poster > .ptxt > p { font-size: 14.5px; line-height: 1.45; max-width: none; }
  /* le libellé de l'argument reste À CÔTÉ du chiffre : sous lui, il coûtait une ligne de plus
     et le texte gagnait encore sur la photo */
  .slide.poster .pstat { flex-wrap: nowrap; gap: 10px; }
  .slide.poster .pstat span { flex: 1 1 auto; }
  /* 13/09 : « dès 3,99 € » se coupait en deux lignes, le libellé prenant la largeur ; le chiffre ne se coupe jamais */
  .slide.poster .pstat b { font-size: 32px; white-space: nowrap; }
  .slide.poster .pstat span { font-size: 13.5px; max-width: none; }
  .slide.poster .fine { font-size: 12px; }
  /* deux boutons côte à côte tant que leurs libellés tiennent, empilés en dessous : forcés sur
     une seule ligne, le texte débordait du bouton sur un écran de 320 px */
  .slide.poster .acts { width: 100%; }
  .slide.poster .acts .btn { flex: 0 1 auto; min-width: 0; justify-content: center; text-align: center;
                             padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
}

/* Sous 400 px la carte n'a plus que 594 px de haut (le cadrage 21:40 de la photo) et le bloc de
   texte en prend 390 : la pastille venait toucher le haut du dégradé. Elle se resserre, la photo
   garde une bande nue entre les deux. Rien n'y change de contraste : la pastille est opaque. */
@media (max-width: 400px) {
  .slide.poster > .pcard { margin: 14px 0 0 14px; padding: 12px 14px 14px; gap: 7px; }
  .slide.poster .pcard .pstat b { font-size: 26px; }
  .slide.poster .pcard .tag { font-size: 11px; padding: 4px 9px; }
  .pcard .ppills li { font-size: 11px; padding: 4px 9px 4px 25px; }
  .pcard .ppills li::before { left: 9px; top: 9px; }
}

/* encart de bas de page sur toute la largeur, deux boutons */
.c-wide { grid-column: 1 / -1; }
.c-wide p { max-width: 46ch; }
.c-wide .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
/* Attention : la règle `.c-cta .acts .btn.light` plus haut est plus spécifique : sans le même
   préfixe, le second bouton ressort blanc lui aussi et les deux se confondent. */
/* Attention : un voile blanc derrière du texte blanc RUINE le contraste : mesuré 4,12 avec 16 % de
   blanc, 5,68 sans. Le bouton secondaire reste donc le violet du fond, cerné de blanc. */
.c-cta .acts .btn.light.ghost2 { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.75); }
.c-cta .acts .btn.light.ghost2:hover { background: rgba(0,0,0,.14); color: #fff; border-color: #fff; }

/* ---------------------------------------------------------------------------
   Page TV (13/09/2026)
   Une carte sombre pleine largeur : texte à gauche, capture de l'application
   collée au bord droit (comme la bande Réseau de l'accueil, photo en colonne
   plein bord, jamais en fond derrière le texte). Le recadrage part du coin
   haut gauche : c'est là que sont le logo, les onglets et les premières tuiles.
   --------------------------------------------------------------------------- */
.c-screen { flex-direction: row; align-items: stretch; gap: 28px; min-height: 400px; }
.c-screen > .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; max-width: 46ch; }
.c-screen > .ph-screen { flex: none; width: 54%; align-self: stretch; margin: -30px -30px -30px 0; border-left: 1px solid rgba(255,255,255,.08); }
/* 20/09/2026 : le texte de cette carte est plafonne a 46ch, la capture a 54 % ; tout ce que la
   carte gagne en largeur restait donc en fond sombre entre les deux (36 px a 1112, 180 px a
   1380). La capture absorbe la place restante au lieu de la laisser vide : elle reste bien
   collee au bord droit, ce que la note ci-dessus promettait deja. Borne a partir de 961 px :
   en dessous la carte est en colonne, et une croissance s'y appliquerait a la HAUTEUR. */
@media (min-width: 961px) {
  .c-screen > .txt { flex: 0 1 46ch; }
  .c-screen > .ph-screen { flex: 1 0 54%; }
}
.c-screen > .ph-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.c-dark ul li { color: #98a0b3; }
.c-dark ul li::before { border-color: #9c7dff; }
@media (max-width: 960px) {
  .c-screen { flex-direction: column; min-height: 0; }
  .c-screen > .txt { max-width: none; }
  .c-screen > .ph-screen { order: -1; width: auto; margin: -30px -30px 14px; aspect-ratio: 16 / 9; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 620px) { .c-screen > .ph-screen { margin: -24px -24px 12px; } }

/* mur des chaînes : les logos que tv.meowan.fr affiche déjà, servis par meowan.fr */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 24px; align-items: center; margin-top: 14px; padding: 6px 0 10px; }
.logos img { display: block; max-height: 44px; width: auto; max-width: 100%; margin: 0 auto; }
.logos img.tall { max-height: 76px; }
@media (max-width: 960px) { .logos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px) { .logos { grid-template-columns: repeat(3, 1fr); gap: 18px 14px; } .logos img { max-height: 36px; } .logos img.tall { max-height: 60px; } }

/* carte téléphone : capture en colonne à droite (reprend la grammaire .c-side) */
.c-side.c-phone > .ph-side { width: 36%; }
.c-side.c-phone > .ph-side img { object-position: 50% 0; }
@media (max-width: 620px) {
  .c-side > .ph-side { margin: -24px -24px 14px; }
  .c-side.c-phone > .ph-side { aspect-ratio: 3 / 2; }
}
.tvinc td.yes { color: #1a7f4e; }
.tvinc td .mut { font-size: 13px; color: var(--muted); }
/* « Bon à savoir » : deux colonnes de texte court plutôt qu'une colonne de 46ch perdue dans une carte pleine largeur */
.tvfine { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.tvfine p { max-width: none; }
.c-dark .logos + .note { max-width: 74ch; }
@media (max-width: 960px) { .tvfine { grid-template-columns: 1fr; } }
/* sous 620 px la capture du téléphone redevient un bandeau : la largeur de 36 % ne doit plus s'appliquer */
@media (max-width: 620px) { .c-side.c-phone > .ph-side { width: auto; } }