/* Pages v2 de CARD IPTV (02/11/2026) : commande, test 24 h, revendeurs, installation et guides, FAQ, contact, Le Mag,
   pages légales. Mêmes briques que l'accueil et les Offres (v2.css), aucune nouvelle couleur de marque. Mobile d'abord. */

/* ═════════ En-tête de page : photo de l'accueil en fond, voile sombre, texte devant ═════════ */
.entete-page { position: relative; overflow: hidden; isolation: isolate; color: var(--pale);
  background: radial-gradient(ellipse at 80% 100%, rgba(71, 176, 224, .4), transparent 60%), linear-gradient(160deg, var(--bleu-nuit), var(--scene)); }
.entete-page__fond { position: absolute; inset: 0; z-index: -2; }
.entete-page__fond img { width: 100%; height: 100%; object-fit: cover; }
.entete-page--photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5, 10, 51, .8), rgba(5, 10, 51, .93)); }
.entete-page__grille { display: grid; gap: 24px; align-items: center; padding-top: 28px; padding-bottom: 36px; }
.entete-page .surtitre { color: var(--blanc); }
.entete-page h1 { color: var(--blanc); font-size: 31px; font-weight: 800; line-height: 1.08; max-width: 18ch; }
.entete-page__intro { margin-top: 14px; max-width: 38em; }
.entete-page .ecran__actions { margin-top: 22px; }
.entete-page .bouton--contour { background: rgba(5, 10, 51, .55); }
.entete-page .puces-confiance { margin-top: 18px; }
.entete-page--sobre .entete-page__grille { padding-top: 24px; padding-bottom: 28px; }
.entete-page--sobre h1 { max-width: none; font-size: 29px; }
.entete-page--or { background: radial-gradient(ellipse at 85% 10%, rgba(212, 175, 55, .38), transparent 55%), linear-gradient(160deg, var(--encre), var(--scene)); }
.entete-page--or .surtitre { color: var(--or-clair); }
.entete-page__visuel { justify-self: center; }

/* Fil d'Ariane */
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-bottom: 6px; color: var(--pale); }
.fil a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blanc); }

/* ═════════ Règle des écrans (consigne du client, 02/11) ═════════ */
.regle-ecrans { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 18px; padding: 14px 16px;
  border-radius: 14px; background: #fff4f4; border: 1px solid #f1c4c4; border-left: 6px solid var(--alerte); color: #4a1010; }
.regle-ecrans svg { width: 26px; height: 26px; color: var(--alerte); }
.regle-ecrans b { color: var(--alerte); }
/* Commande à copier (guide Enigma2, 09/11) : coupée à la largeur de l'écran, jamais de défilement horizontal.
   Jamais la classe « commande » : c'est celle du formulaire de la page de commande. */
.cmd-script { margin: 18px 0 0; padding: 16px 18px; border-radius: 12px; background: #050f5c; color: #fff; font-size: 16px;
  line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.cmd-script code { font-family: Consolas, "Courier New", monospace; color: inherit; background: none; }

/* Vidéo d'un guide (client, 09/11) : pleine largeur du contenu, coins arrondis comme les captures */
.video-guide { margin: 16px 0 0; }
.video-guide video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; background: #050f5c;
  box-shadow: 0 12px 32px rgba(5, 15, 92, .25); }
.video-guide figcaption { margin-top: 10px; font-size: 16px; color: var(--texte, #3d3d3d); }

/* Règles d'utilisation (client, 08/11) : liste dans le même encadré */
.regles p { margin: 0; }
.regles ul { margin: 8px 0 10px; padding-left: 18px; display: grid; gap: 6px; }
.regles a { color: var(--alerte); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ═════════ Briques communes ═════════ */
.cartes { display: grid; gap: 16px; margin-top: 24px; }
.carte { display: grid; gap: 8px; align-content: start; padding: 22px 20px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; }
.carte h3 { font-size: 20px; }
.carte__icone { width: 44px; height: 44px; padding: 9px; border-radius: 12px; background: var(--ciel-pale); color: var(--bleu-nuit); }
.pas { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: pas; }
.pas > li { position: relative; min-height: 70px; padding: 16px 18px 16px 70px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; counter-increment: pas; }
.pas > li::before { content: counter(pas); position: absolute; left: 16px; top: 14px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bleu-nuit); color: var(--blanc); font: 700 18px/1 var(--titre); }
.pas b { color: var(--encre); }
.pas code, .code-saisie { font: 700 18px/1.3 ui-monospace, Consolas, monospace; color: var(--encre); background: var(--brume); padding: 1px 6px; border-radius: 6px; }
/* Bloc de commande dans une étape (guide Linux, 10/11) : garde le style du bloc, pas celui du code en ligne */
.pas .cmd-script { margin-top: 14px; }
.pas .cmd-script code { font: 400 16px/1.5 Consolas, "Courier New", monospace; color: inherit; background: none; padding: 0; border-radius: 0; }
.liste-coches { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
/* Coche posée à gauche : le texte (gras, repères) reste d'un seul tenant */
.liste-coches li { position: relative; padding-left: 32px; }
.liste-coches li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bleu-nuit)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.badge--gratuit { background: #e6f0dc; color: #2f4a1c; }
.badge--payant { background: #fff3cd; color: #5c4400; }
.badge--conseil { background: var(--bleu-nuit); color: var(--blanc); }
.bandeau-aide { display: grid; gap: 14px; margin-top: 8px; padding: 22px 20px; border-radius: 20px; background: var(--ciel-pale); }
.bandeau-aide h2 { font-size: 24px; }
.bandeau-aide .ecran__actions { margin-top: 4px; }
.bouton--whatsapp { background: #1a7a43; color: var(--blanc); gap: 10px; }
.bouton--whatsapp svg { width: 24px; height: 24px; }
/* Icône blanche, bleue au survol (demande du client, 03/11) ; double classe : « .canal svg » (bleu) vient plus bas */
.bouton.bouton--whatsapp svg { color: var(--blanc); transition: color .2s; }
.bouton.bouton--whatsapp:hover svg, .bouton.bouton--whatsapp:focus-visible svg { color: var(--bleu-nuit); }
.section--etroite .conteneur > * { max-width: 860px; }

/* Changer d'appareil avec 1 écran : arrêt forcé, 5 minutes, second appareil */
.changer { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: changer; }
.changer li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: 16px; }
.changer svg { width: 52px; height: 52px; padding: 11px; border-radius: 14px; background: var(--ciel-pale); color: var(--bleu-nuit); }
.changer b { display: block; color: var(--encre); }

/* ═════════ Test 24 h ═════════ */
.chrono { width: 220px; aspect-ratio: 1; padding: 14px; border-radius: 50%;
  background: conic-gradient(var(--ciel) 0 75%, rgba(255, 255, 255, .16) 0); }
.chrono__disque { width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--scene); }
.chrono__disque b { font: 800 60px/1 var(--titre); color: var(--blanc); letter-spacing: -0.03em; }
.chrono__disque span { margin-top: 6px; color: var(--pale); font-weight: 600; }
.coupon { display: grid; gap: 18px; padding: 26px 22px; border-radius: 22px; background: var(--ciel-pale); }
.coupon__ticket { justify-self: start; display: grid; gap: 2px; padding: 16px 22px; border-radius: 14px; background: var(--blanc); border: 2px dashed var(--bleu-nuit); color: var(--encre); }
.coupon__ticket b { font: 800 30px/1.1 var(--titre); color: var(--bleu-nuit); }
.gamme-carte h3 { font-size: 24px; }
.gamme-carte .liste-coches li::before { background-color: rgba(255, 255, 255, .92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071060' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); }
.gamme-carte--vip .liste-coches li::before { background-color: var(--or); }

/* ═════════ Revendeurs ═════════ */
.boites-eventail { position: relative; width: min(100%, 400px); height: 270px; }
.boites-eventail picture { position: absolute; bottom: 0; width: 44%; }
.boites-eventail img { width: 100%; height: auto; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .5)); }
.boites-eventail picture:nth-child(1) { left: 0; rotate: -9deg; }
.boites-eventail picture:nth-child(2) { right: 0; rotate: 9deg; }
.boites-eventail picture:nth-child(3) { left: 28%; bottom: 14px; z-index: 1; }
.packs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.pack { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); }
.pack__nom { font-weight: 700; color: var(--blanc); overflow-wrap: normal; }   /* WordPress : Blocksy coupe les mots (body { overflow-wrap: break-word }) ; « abonnements » reste entier */
.pack__prix { font: 700 20px/1.15 var(--titre); color: var(--blanc); }
.gamme-carte--vip .pack__prix { color: var(--or-clair); }
.pack__unite { font-size: 16px; }
.pack .bouton { grid-column: 2; grid-row: 1 / span 3; min-height: 44px; padding: 0 16px; }
/* Avantage revendeur (02/11) : tests 24 h gratuits par jour, sous le pack, sur toute la largeur */
.pack__bonus { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .24); font-size: 16px; font-weight: 600; color: var(--blanc); }
.pack__bonus svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.gamme-carte--vip .pack__bonus svg { color: var(--or-clair); }
.gamme-carte--standard .pack .bouton { background: var(--ciel); color: var(--encre); }
.gamme-carte--advanced .pack .bouton { background: var(--blanc); color: var(--adv-rouge); }
.gamme-carte--vip .pack .bouton { background: var(--or); color: var(--or-nuit); }

/* ═════════ Installation : cartes des guides, logos officiels ═════════ */
.guides { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.guide-carte { display: grid; gap: 10px; align-content: start; height: 100%; padding: 20px; background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 18px; text-decoration: none; color: var(--texte); transition: transform .2s, box-shadow .2s, border-color .2s; }
.guide-carte:hover { transform: translateY(-3px); border-color: var(--ciel); box-shadow: 0 14px 28px rgba(7, 16, 96, .14); }
.guide-carte h2 { font-size: 22px; }
.guide-carte__lien { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--bleu-nuit); }
.guide-carte__lien svg { width: 20px; height: 20px; }
.logos-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.logos-ligne span { display: grid; place-items: center; height: 52px; padding: 8px 12px; background: var(--brume); border: 1px solid var(--trait); border-radius: 10px; }
.logos-ligne img { height: calc(var(--h, 30) * .8px); width: auto; max-width: 120px; }
.entete-page .logos-ligne span { background: var(--blanc); border: 0; }
.applis { display: grid; gap: 12px; margin-top: 18px; }
.appli { display: grid; gap: 6px; align-content: start; padding: 18px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; }
.appli h3 { font-size: 20px; }
.appli__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.encadre-licence { display: grid; gap: 14px; padding: 26px 22px; border-radius: 22px; color: var(--pale);
  background: radial-gradient(circle at 100% 0%, rgba(212, 175, 55, .35), transparent 55%), linear-gradient(160deg, var(--encre), var(--scene)); }
.encadre-licence h2, .encadre-licence h3 { color: var(--blanc); }
.encadre-licence .surtitre { color: var(--or-clair); margin: 0; }
.prix-licences { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prix-licences li { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
.prix-licences b { font: 800 26px/1.1 var(--titre); color: var(--or-clair); }
.prix-licences strong { color: var(--blanc); }
.encadre-licence .bouton { justify-self: start; background: var(--or); color: var(--or-nuit); }
.encadre-licence .ecran__actions { margin-top: 0; }
/* Second bouton (licence seule, 03/11) : contour clair sur le fond sombre */
.encadre-licence .bouton--contour { background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, .7); }

/* ═════════ FAQ ═════════ */
.ancres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ancres a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--blanc);
  color: var(--encre); font-weight: 600; text-decoration: none; }
.faq-groupe { margin-top: 40px; scroll-margin-top: 80px; }
.faq-groupe:first-child { margin-top: 0; }
.faq-groupe h2 { font-size: 24px; }
.faq details p + p { padding-top: 0; }

/* ═════════ Contact ═════════ */
.canaux { display: grid; gap: 14px; }
.canal { display: grid; gap: 8px; align-content: start; padding: 22px 20px; border-radius: 20px; background: var(--blanc); border: 1px solid var(--trait); }
.canal svg { width: 36px; height: 36px; color: var(--bleu-nuit); }
.canal h2 { font-size: 22px; }
.canal--whatsapp { background: #e9f6ee; border-color: #b5dfc4; }
.canal--whatsapp > svg { color: #1a7a43; }
.canal .bouton { justify-self: start; margin-top: 6px; }
.formulaire { display: grid; gap: 16px; padding: 24px 20px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; }
.formulaire .bouton { justify-self: start; }

/* ═════════ Champs de formulaire (commande, contact) ═════════ */
.champ { display: grid; gap: 6px; min-width: 0; }
.champ > label, .champ__titre { font-weight: 700; color: var(--encre); }
.champ input:not([type=checkbox]):not([type=radio]), .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid #8792c4; border-radius: 12px; background: var(--blanc);
  color: var(--texte); font: 17px/1.3 var(--corps); }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--bleu-nuit); }
.champ--code input { font-family: ui-monospace, Consolas, monospace !important; letter-spacing: .04em; text-transform: uppercase; }
.aide { font-size: 16px; color: #4f5670; }
.oblig { color: var(--alerte); }
.champs-2 { display: grid; gap: 14px; }
.case { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.case input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--bleu-nuit); }

/* ═════════ Le Mag (le blog, renommé) ═════════ */
.mag-une { display: grid; overflow: hidden; border-radius: 22px; background: var(--blanc); text-decoration: none; color: var(--texte);
  box-shadow: 0 18px 36px rgba(3, 8, 60, .3); }
.mag-une picture img { width: 100%; height: 200px; object-fit: cover; }
.mag-une__texte { display: grid; gap: 8px; padding: 20px; }
.mag-une h2 { font-size: 23px; }
.mag-grille { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.article-carte { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border-radius: 18px; background: var(--blanc);
  border: 1px solid var(--trait); text-decoration: none; color: var(--texte); transition: transform .2s, box-shadow .2s; }
.article-carte:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(7, 16, 96, .14); }
.vignette { position: relative; isolation: isolate; display: grid; place-content: center; gap: 4px; height: 168px; padding: 16px; overflow: hidden;
  text-align: center; color: var(--blanc); font: 800 26px/1.05 var(--titre); letter-spacing: -0.02em; }
.vignette small { font: 600 16px/1.3 var(--corps); color: var(--blanc); letter-spacing: 0; }
.vignette picture, .vignette > img { position: absolute; inset: 0; z-index: -1; }
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette--photo { background-color: var(--scene); }
.vignette--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 10, 51, .55), rgba(5, 10, 51, .85)); }
.vignette--bleu { background: radial-gradient(circle at 85% 15%, rgba(71, 176, 224, .55), transparent 55%), linear-gradient(150deg, var(--bleu-nuit), var(--scene)); }
.vignette--lavande { background: radial-gradient(circle at 15% 85%, rgba(112, 126, 214, .6), transparent 60%), linear-gradient(150deg, var(--encre), var(--scene)); }
.vignette--brique { background: radial-gradient(circle at 85% 15%, rgba(192, 123, 112, .3), transparent 55%), linear-gradient(150deg, var(--adv-brique), var(--adv-rouge)); }
.vignette--or { background: radial-gradient(circle at 80% 20%, rgba(212, 175, 55, .3), transparent 55%), linear-gradient(150deg, #2a210f, var(--or-nuit)); color: var(--or-clair); }
.vignette--or small { color: var(--or-clair); }
.vignette--affiches { grid-template-columns: repeat(3, 1fr); place-content: stretch; gap: 8px; padding: 14px; background: var(--scene); }
.vignette--affiches img { position: static; height: 140px; border-radius: 8px; object-fit: cover; }
.article-carte__texte { display: grid; gap: 6px; align-content: start; padding: 16px 18px 20px; }
.rubrique { font-weight: 700; color: var(--bleu-nuit); font-size: 16px; }
.article-carte h3 { font-size: 19px; line-height: 1.2; }
.mention-affiliation { margin-top: 16px; font-size: 16px; color: var(--pale); }
.mention-affiliation a { color: var(--blanc); }
.code-gamsgo { display: grid; gap: 14px; align-items: center; margin-top: 40px; padding: 24px 22px; border-radius: 22px; color: var(--pale);
  background: radial-gradient(circle at 90% 10%, rgba(71, 176, 224, .45), transparent 55%), linear-gradient(150deg, var(--bleu-nuit), var(--scene)); }
.code-gamsgo h2 { color: var(--blanc); font-size: 24px; }
.code-gamsgo__code { justify-self: start; padding: 10px 18px; border-radius: 12px; border: 2px dashed var(--ciel); font: 800 26px/1 var(--titre); color: var(--blanc); }

/* ═════════ Pages légales ═════════ */
.texte-legal { max-width: 780px; }
.texte-legal h2 { font-size: 22px; margin: 36px 0 10px; scroll-margin-top: 80px; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal h3 { font: 700 18px/1.3 var(--corps); margin: 20px 0 6px; color: var(--encre); }
.texte-legal p, .texte-legal ul, .texte-legal ol { margin: 0 0 12px; }
.texte-legal ul, .texte-legal ol { padding-left: 22px; }
.texte-legal li + li { margin-top: 4px; }
.texte-legal table { width: 100%; margin: 8px 0 18px; border-collapse: collapse; font-size: 16px; }
.texte-legal th, .texte-legal td { padding: 10px 8px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.texte-legal thead th { background: var(--brume); color: var(--encre); }
.texte-legal blockquote { margin: 0 0 12px; padding: 14px 16px; background: var(--brume); border-left: 4px solid var(--ciel); border-radius: 8px; }
.sommaire { max-width: 780px; margin-bottom: 28px; padding: 16px 20px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; }
.sommaire h2 { font-size: 18px; }
.sommaire ol { margin: 8px 0 0; padding-left: 22px; }
.sommaire a { display: inline-flex; align-items: center; min-height: 44px; }
.a-confirmer { padding: 0 6px; border-radius: 6px; background: #fff3cd; color: #5c4400; font-weight: 600; }
.version { margin-top: 10px; color: var(--pale); }
.credits { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.credit { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: 14px; font-size: 16px; }
.credit img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--brume); }
.credit b { display: block; color: var(--encre); font-size: 17px; }
.credit a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

/* ═════════ Commande : formule, renouvellement, appareils écran par écran, coordonnées, paiement ═════════ */
.entete-commande { padding: 20px 0 22px; color: var(--pale); background: linear-gradient(160deg, var(--bleu-nuit), var(--scene)); }
.entete-commande h1 { color: var(--blanc); font-size: 28px; font-weight: 800; }
.entete-commande .puces-confiance { margin-top: 12px; }
.commande { display: grid; gap: 22px; padding-top: 22px; padding-bottom: 56px; counter-reset: total base etape; }
.commande__etapes { display: grid; gap: 18px; min-width: 0; }
.calc { position: absolute; width: 0; height: 0; overflow: hidden; }
.apercu-maquette { min-width: 0; margin: 0; padding: 12px 14px 14px; border: 2px dashed #9a7400; border-radius: 16px; background: #fffbea; }
.apercu-maquette legend { padding: 0 8px; font-weight: 700; color: #5c4400; }
.apercu-maquette .segment__choix { margin-top: 4px; }
.apercu-maquette p { margin-top: 8px; font-size: 16px; color: #5c4400; }
.etape { display: grid; gap: 14px; min-width: 0; padding: 20px 16px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; }
.etape > h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; }
.etape > h2::before { counter-increment: etape; content: counter(etape); flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bleu-nuit); color: var(--blanc); font: 700 17px/1 var(--titre); }
.sous-titre { font-weight: 700; color: var(--encre); }
.etape .segment__note { margin-top: 0; }

/* Gamme : 3 lignes sur mobile, 3 tuiles sur ordinateur */
.gammes-choix, .appareil-choix { display: grid; gap: 8px; }
.gammes-choix input, .appareil-choix input, .choix-cartes input { position: absolute; opacity: 0; pointer-events: none; }
.gc { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 16px; border-radius: 14px;
  border: 3px solid transparent; color: var(--blanc); cursor: pointer; }
.gc b { font: 700 19px/1.1 var(--titre); }
.gc span { font-size: 16px; text-align: right; }
.gc--standard { background: linear-gradient(160deg, var(--bleu-nuit), var(--encre)); }
.gc--advanced { background: linear-gradient(160deg, var(--adv-brique), var(--adv-rouge)); }
.gc--vip { background: linear-gradient(160deg, #2a210f, var(--or-nuit)); color: var(--or-clair); }
.gammes-choix input:not(:checked) + .gc { filter: saturate(.55); }
.gammes-choix input:checked + .gc { border-color: var(--ciel); box-shadow: 0 8px 18px rgba(3, 8, 60, .25); }
.gammes-choix input:focus-visible + .gc, .appareil-choix input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Appareils : logos officiels, 3 par ligne sur mobile */
.ecran-bloc { display: grid; gap: 12px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--trait); }
.ecran-bloc:first-of-type { padding-top: 0; border-top: 0; }
.ecran-bloc__titre { font: 700 18px/1.2 var(--titre); color: var(--encre); }
.ecran-bloc__titre small { display: block; margin-top: 4px; font: 400 16px/1.3 var(--corps); color: var(--texte); }
.appareil-choix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.appareil-choix label { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 92px; padding: 10px 4px; border: 2px solid var(--trait);
  border-radius: 14px; background: var(--blanc); text-align: center; font-weight: 600; font-size: 16px; line-height: 1.15; color: var(--encre); cursor: pointer; }
.appareil-choix img { height: calc(var(--h, 30) * .88px); width: auto; max-width: 100%; object-fit: contain; }
.appareil-choix input:checked + label { border-color: var(--bleu-nuit); background: var(--ciel-pale); box-shadow: inset 0 0 0 1px var(--bleu-nuit); }
.guide-note { display: none; padding: 10px 14px; border-radius: 12px; background: var(--brume); font-size: 16px; }
.champ-mag { display: none; padding: 14px; border-radius: 14px; background: var(--ciel-pale); }

/* Choix en cartes (renouvellement, application, durée, livraison des packs, paiement) */
.choix-cartes { display: grid; gap: 10px; }
.choix-cartes label { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 12px; align-items: start; min-height: 56px; padding: 13px 14px;
  border: 2px solid var(--trait); border-radius: 14px; background: var(--blanc); color: var(--texte); cursor: pointer; }
.choix-cartes label::before { content: ""; grid-row: span 3; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid #8792c4; background: var(--blanc); }
.choix-cartes input:checked + label { border-color: var(--bleu-nuit); background: var(--ciel-pale); }
.choix-cartes input:checked + label::before { border: 7px solid var(--bleu-nuit); }
.choix-cartes input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.choix-cartes b { color: var(--encre); }
.choix-cartes span { font-size: 16px; }
.choix-cartes--duo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .choix-cartes--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.renouv { display: none; gap: 12px; padding: 14px; border-radius: 14px; background: var(--brume); }
.renouv__introuvable { display: none; color: #4a6331; font-weight: 600; }  /* succès assombri : 4,5:1 sur le fond gris */

/* Vente additionnelle : licence HOT Player ou IBO Player, activée pour le client */
.upsell { display: none; gap: 12px; padding: 16px; border-radius: 16px; color: var(--pale);
  background: radial-gradient(circle at 100% 0%, rgba(212, 175, 55, .35), transparent 55%), linear-gradient(160deg, var(--encre), var(--scene)); }
.upsell__offre { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
.upsell__offre input { width: 24px; height: 24px; margin: 3px 0 0; flex: none; accent-color: var(--or); }
.upsell__offre b { display: block; color: var(--blanc); font-size: 18px; line-height: 1.3; }
.upsell__badge { display: inline-block; margin-bottom: 6px; padding: 0 10px; border-radius: 999px; background: var(--or); color: var(--or-nuit); font-weight: 700; font-size: 16px; }
.upsell__detail { display: none; gap: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); }
.upsell .sous-titre, .upsell .champ > label { color: var(--blanc); }
.upsell .aide { color: var(--pale); }
.upsell .oblig { color: var(--or-clair); }
.upsell a { color: var(--or-clair); }
.upsell .choix-cartes label { background: transparent; border-color: rgba(255, 255, 255, .28); color: var(--pale); }
.upsell .choix-cartes b { color: var(--blanc); }
.upsell .choix-cartes input:checked + label { border-color: var(--or); background: rgba(212, 175, 55, .16); }
.upsell .choix-cartes input:checked + label::before { border-color: var(--or); }
.upsell .choix-cartes label::before { background: transparent; border-color: var(--pale); }
.note-vidaa { display: none; }

/* Paiement */
.autre-paiement summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--bleu-nuit); cursor: pointer; }
.autre-paiement .choix-cartes { margin-top: 8px; }
.code-promo summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--bleu-nuit); cursor: pointer; }
.code-promo__ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; }
.code-promo .bouton { min-height: 48px; padding: 0 16px; background: var(--brume); color: var(--encre); border-color: var(--trait); }

/* Récapitulatif : total calculé en CSS (compteurs), sans JavaScript */
.recap { align-self: start; min-width: 0; }
.recap__carte { display: grid; gap: 14px; padding: 20px 18px; border-radius: 20px; background: var(--blanc); border: 1px solid var(--trait); box-shadow: 0 18px 36px rgba(3, 8, 60, .12); }
.recap__titre { font-size: 21px; }
.recap__visuel { position: relative; display: grid; place-items: center; min-height: 170px; border-radius: 16px;
  background: radial-gradient(circle at 50% 30%, rgba(71, 176, 224, .35), transparent 65%), linear-gradient(160deg, var(--bleu-nuit), var(--scene)); }
.recap__visuel picture { display: none; }
.recap__visuel img { height: 150px; width: auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .4)); }
.recap__quantite { position: absolute; right: 14px; bottom: 12px; padding: 2px 12px; border-radius: 999px; background: var(--or); color: var(--or-nuit); font: 800 20px/1.3 var(--titre); }
.recap__visuel .chrono { width: 140px; padding: 10px; }
.recap__visuel .chrono__disque b { font-size: 38px; }
/* Écran de TV « licence activée » (fiche de la licence vendue seule et récapitulatif de la commande, 03/11) : ce que
   l'application affiche au premier lancement (adresse MAC et clé), en CSS seul, sans image. Décoratif (aria-hidden). */
.tv-licence { width: min(100%, 360px); margin-inline: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.tv-licence__ecran { display: grid; align-content: center; gap: 10px; aspect-ratio: 16 / 10; padding: 16px 18px; border: 8px solid #10131c; border-radius: 14px; color: var(--pale);
  background: radial-gradient(circle at 85% 0%, rgba(71, 176, 224, .4), transparent 60%), linear-gradient(160deg, var(--encre), var(--scene)); }
.tv-licence__titre { margin: 0; font: 700 14px/1.2 var(--titre); letter-spacing: .08em; text-transform: uppercase; color: var(--ciel); }
.tv-licence__infos { display: grid; gap: 6px; margin: 0; }
.tv-licence__infos div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .09); }
.tv-licence__infos dt { font-size: 14px; }
.tv-licence__infos dd { margin: 0; font: 700 15px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--blanc); }
.tv-licence__ok { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin: 0; padding: 5px 12px 5px 8px; border-radius: 999px; background: var(--succes); color: var(--blanc); font-size: 14px; font-weight: 700; }
.tv-licence__ok svg { width: 16px; height: 16px; }
.tv-licence__pied { width: 34%; height: 12px; margin: 0 auto; border-radius: 0 0 10px 10px; background: #10131c; }
.recap__visuel .tv-licence { width: 230px; padding: 14px 0; }
.recap__visuel .tv-licence__ecran { gap: 6px; padding: 10px 12px; border-width: 6px; }
.recap__visuel .tv-licence__infos div { padding: 5px 8px; }
@media (prefers-reduced-motion: no-preference) {
  .tv-licence__ok { animation: tv-licence-ok 2.4s ease-out .6s both; }
  @keyframes tv-licence-ok { 0% { opacity: 0; transform: scale(.85); } 18% { opacity: 1; transform: scale(1.06); } 30%, 100% { opacity: 1; transform: none; } }
}
.recap__lignes { display: grid; gap: 10px; }
.recap__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.recap__ligne > b { white-space: nowrap; color: var(--encre); }
.recap__info { color: var(--succes); font-weight: 600; font-size: 16px; }
.recap-lic, .recap-renouv { display: none; }
.recap__base::after { content: counter(base) "\a0€"; }
.recap__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 2px solid var(--trait); font-weight: 700; color: var(--encre); }
.recap__total b { font: 800 30px/1 var(--titre); color: var(--bleu-nuit); }
.recap__total b::after { content: counter(total) "\a0€"; }
.recap__ttc { font-size: 16px; margin-top: -8px; }
.recap .case { font-size: 16px; }
.recap__redir { display: none; font-size: 16px; padding: 10px 12px; border-radius: 12px; background: var(--brume); }
.bouton--payer { width: 100%; min-height: 58px; gap: 10px; background: var(--succes); color: var(--blanc); font-size: 19px; }
.bouton--payer svg { width: 22px; height: 22px; }
.payer__montant::after { content: counter(total) "\a0€"; }
.recap__garanties { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px; }
.recap__garanties li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.recap__garanties svg { width: 20px; height: 20px; margin-top: 2px; color: var(--bleu-nuit); }

/* ═════════ Animations ═════════ */
@property --tour { syntax: "<percentage>"; inherits: false; initial-value: 75%; }
@media (prefers-reduced-motion: no-preference) {
  .chrono { background: conic-gradient(var(--ciel) 0 var(--tour), rgba(255, 255, 255, .16) 0); animation: chrono 24s linear infinite; }
  @keyframes chrono { from { --tour: 0%; } to { --tour: 100%; } }
  .entete-page__fond img { animation: mosaique 40s ease-in-out infinite alternate; }
  @supports (animation-timeline: view()) {
    .carte, .guide-carte, .article-carte, .pas > li, .changer li, .appli {
      animation: monte linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }
  }
}

/* ═════════ Ordinateur ═════════ */
@media (min-width: 768px) {
  .entete-page__grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-top: 56px; padding-bottom: 64px; }
  .entete-page--sobre .entete-page__grille, .entete-page--seul .entete-page__grille { grid-template-columns: minmax(0, 1fr); }
  .entete-page--sobre .entete-page__grille { padding-top: 40px; padding-bottom: 44px; }
  .entete-page h1 { font-size: 50px; }
  .entete-page--sobre h1 { font-size: 40px; }
  .entete-page--photo { min-height: 480px; display: grid; align-items: center; }
  .entete-page--photo::before { background: linear-gradient(90deg, rgba(5, 10, 51, .96) 0%, rgba(5, 10, 51, .88) 40%, rgba(5, 10, 51, .35) 75%, rgba(5, 10, 51, .2) 100%),
    linear-gradient(0deg, rgba(5, 10, 51, .6), transparent 35%); }
  .entete-page .puces-confiance { grid-auto-flow: column; justify-content: start; gap: 22px; }
  .chrono { width: 280px; }
  .chrono__disque b { font-size: 76px; }
  .boites-eventail { height: 340px; width: 440px; }
  .cartes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pas--ligne { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pas--ligne > li { padding: 70px 18px 18px; }
  .changer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coupon { grid-template-columns: 1fr auto; align-items: center; padding: 34px; }
  .guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .applis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .encadre-licence { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 34px; column-gap: 32px; }
  .encadre-licence > .prix-licences { grid-column: 2; grid-row: 1 / span 4; }
  .bandeau-aide { grid-template-columns: 1fr auto; align-items: center; padding: 28px 32px; }
  .canaux { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-grille { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
  .formulaire { padding: 30px; }
  .champs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-une { grid-template-columns: 1.1fr 1fr; }
  .mag-une picture img { height: 100%; min-height: 300px; }
  .mag-une__texte { padding: 32px; align-content: center; }
  .mag-une h2 { font-size: 30px; }
  .mag-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .code-gamsgo { grid-template-columns: 1fr auto; padding: 32px; }
  .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entete-commande { padding: 28px 0; }
  .entete-commande h1 { font-size: 36px; }
  .etape { padding: 24px; }
  .gammes-choix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gc { flex-direction: column; justify-content: center; text-align: center; min-height: 88px; }
  .gc span { text-align: center; }
  .appareil-choix { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .choix-cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .commande { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 28px; align-items: start; }
  .apercu-maquette { grid-column: 1 / -1; }
  .recap { position: sticky; top: 84px; }
}

/* Renouvellement : identifiants Xtream seulement (consigne du client, 02/11), casse respectée */
.champ--ident input { font-family: ui-monospace, Consolas, monospace !important; letter-spacing: .02em; }
.renouv__regle { padding: 12px 14px; border-radius: 12px; background: var(--blanc); border-left: 4px solid var(--ciel); }
.renouv__regle b { color: var(--encre); }

/* ═════════ Mon compte : abonnements (bouton Renouveler prérempli), commandes, licences ═════════ */
.compte > h2 { margin: 44px 0 0; scroll-margin-top: 80px; }
.bouton--clair { background: var(--brume); color: var(--encre); border-color: var(--trait); }
.statut { justify-self: start; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: 16px; }
.statut--actif { background: #e6f0dc; color: #2f4a1c; }
.statut--bientot { background: #fff3cd; color: #5c4400; }
.statut--expire { background: #fde8e8; color: #8a0000; }
.coupon-test { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 18px; border-radius: 18px;
  background: var(--ciel-pale); border: 2px dashed var(--bleu-nuit); }
.coupon-test > svg { width: 40px; height: 40px; color: var(--bleu-nuit); }
.coupon-test .bouton { grid-column: 1 / -1; justify-self: start; }
.abos { display: grid; gap: 18px; margin-top: 18px; }
.abo-carte { display: grid; overflow: hidden; border-radius: 20px; background: var(--blanc); border: 1px solid var(--trait); }
.abo-carte__boite { display: grid; place-items: center; padding: 18px; }
.abo-carte__boite img { height: 150px; width: auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .4)); }
.abo-carte__infos { display: grid; gap: 10px; align-content: start; padding: 20px; }
.abo-carte h3 { font-size: 21px; }
.abo-carte__details { display: grid; gap: 8px; margin: 0; }
.abo-carte__details div { display: grid; gap: 2px; }
.abo-carte__details dt { font-weight: 700; color: var(--encre); }
.abo-carte__details dd { margin: 0; justify-self: start; }
.jauge { height: 10px; border-radius: 999px; background: var(--brume); border: 1px solid var(--trait); overflow: hidden; }
.jauge span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bleu-nuit), var(--ciel)); }
.jauge__texte b { color: var(--encre); }
.abo-carte .ecran__actions { margin-top: 4px; }
.commandes { width: 100%; margin-top: 18px; border-collapse: separate; border-spacing: 0; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; }
.commandes th, .commandes td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--trait); }
.commandes thead th { background: var(--brume); color: var(--encre); }
.commandes tbody th { color: var(--encre); white-space: nowrap; }
.commandes a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 600; }
.licence-carte { margin-top: 18px; }
.compte .cartes--2 { margin-top: 18px; }
.compte .carte .bouton { justify-self: start; margin-top: 6px; }
.compte .bandeau-aide { margin-top: 44px; }

/* ═════════ Article du Mag (gabarit des articles affiliés) ═════════ */
.article-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; color: var(--pale); }
.eventail--article { position: relative; right: auto; bottom: auto; height: 230px; aspect-ratio: 1.25; margin: 10px auto 0; }
.article-grille { display: grid; gap: 28px; }
.article-corps { min-width: 0; max-width: 740px; }
.article-corps > h2 { margin: 40px 0 12px; font-size: 25px; scroll-margin-top: 80px; }
.article-corps > p, .article-corps > ul { margin: 0 0 14px; line-height: 1.7; }
.article-chapo { font-size: 19px; color: var(--encre); }
.encart-affiliation { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; margin-bottom: 22px !important; padding: 12px 14px; border-radius: 12px;
  background: var(--brume); border: 1px solid var(--trait); font-size: 16px; }
.encart-affiliation svg { width: 22px; height: 22px; margin-top: 2px; color: var(--bleu-nuit); }
.tableau-article { width: 100%; border-collapse: collapse; font-size: 16px; }
.tableau-article th, .tableau-article td { padding: 10px 8px; border-bottom: 1px solid var(--trait); text-align: left; }
.tableau-article thead th { background: var(--brume); color: var(--encre); }
.tableau-article tbody th { color: var(--encre); }
.offre-gamsgo { display: grid; gap: 10px; padding: 22px 20px; border-radius: 18px; border: 2px solid var(--bleu-nuit); background: var(--blanc); box-shadow: 0 14px 28px rgba(7, 16, 96, .12); }
.offre-gamsgo__titre { font: 700 21px/1.2 var(--titre); color: var(--encre); }
.offre-gamsgo__prix { font-weight: 700; color: var(--bleu-nuit); }
.offre-gamsgo .bouton { justify-self: start; gap: 8px; }
.offre-gamsgo .bouton svg { width: 20px; height: 20px; }
.encart-iptv { display: grid; gap: 16px; margin: 36px 0 8px; padding: 24px 20px; border-radius: 20px; color: var(--pale);
  background: radial-gradient(ellipse at 90% 100%, rgba(71, 176, 224, .4), transparent 60%), linear-gradient(160deg, var(--bleu-nuit), var(--scene)); }
.encart-iptv h2 { color: var(--blanc); font-size: 24px; margin: 4px 0 8px; }
.encart-iptv .surtitre { color: var(--blanc); margin: 0; }
.encart-iptv .bouton--contour { background: rgba(5, 10, 51, .55); }
.auteur { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 36px; padding: 16px; border-radius: 16px; background: var(--brume); }
.auteur img { width: 64px; height: auto; }
.auteur b { display: block; color: var(--encre); }
.article-aside { display: grid; gap: 16px; align-content: start; min-width: 0; }
.article-aside .sommaire { margin: 0; }
.code-gamsgo--petit { margin-top: 0; padding: 20px; grid-template-columns: minmax(0, 1fr); }
.code-gamsgo--petit h2 { font-size: 20px; }
@media (max-width: 767px) {
  .commandes, .commandes tbody { display: block; }
  .commandes thead { display: none; }
  .commandes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--trait); }
  .commandes th, .commandes td { padding: 0; border: 0; }
  .commandes td:nth-of-type(2) { grid-column: 1 / -1; }
  .commandes td:nth-of-type(4) { grid-row: 1; grid-column: 2; }
  .commandes td:last-child { grid-column: 2; }
  .commandes td:empty { display: none; }
}
@media (min-width: 768px) {
  .abo-carte { grid-template-columns: 220px minmax(0, 1fr); }
  .abo-carte__boite img { height: 200px; }
  .abo-carte__details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coupon-test { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .coupon-test .bouton { grid-column: auto; }
  .eventail--article { height: 300px; }
  .encart-iptv { grid-template-columns: 1fr auto; align-items: center; padding: 30px; }
}
@media (min-width: 1000px) {
  .article-grille { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; align-items: start; }
  .article-aside { position: sticky; top: 84px; }
}

/* Installation publique : guides réservés aux clients (consigne du client, 02/11) */
.guide-carte--verrou .guide-carte__lien { color: var(--encre); }
.guide-carte__lien svg { flex: none; }
.pas .bouton { display: flex; width: fit-content; margin-top: 10px; }

/* Famille IBOSOL : liste des applications de la famille, filtrée par appareil (demande du client, 02/11) */
.famille-ibo { gap: 10px; }

/* Contour de focus (07/11) : blanc sur les fonds sombres des pages (règle générale et jeton --focus dans v2.css) */
.entete-page, .encadre-licence, .code-gamsgo, .upsell, .entete-commande, .encart-iptv, .vignette { --focus: var(--blanc); }

/* Guide CARD Player (07/11) : première ouverture écran par écran (texte, puis capture de l'émulateur) */
.ecrans-app { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: ecran; }
.ecran-app { display: grid; gap: 14px; padding: 18px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; counter-increment: ecran; }
.ecran-app--seule { counter-increment: none; margin-top: -8px; }
.ecran-app__texte h3 { display: flex; gap: 12px; align-items: center; font-size: 20px; }
.ecran-app__texte h3::before { content: counter(ecran); flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--bleu-nuit); color: var(--blanc); font: 700 16px/1 var(--titre); }
.ecran-app__texte p { margin: 8px 0 0; }
.ecran-app__texte b { color: var(--encre); }
.ecran-app__texte code { font: 700 17px/1.3 ui-monospace, Consolas, monospace; color: var(--encre); background: var(--brume); padding: 1px 6px; border-radius: 6px; }
.ecran-app__capture { margin: 0; }
.ecran-app__capture img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 28px rgba(5, 10, 51, .22); }
.encadre-important { margin-top: 40px; padding: 22px 18px; border: 2px solid var(--ciel); border-radius: 22px; background: var(--ciel-pale); }
.encadre-important > h3 { font-size: 24px; }
.encadre-important > p { margin: 10px 0 0; }
.encadre-important .surtitre { margin: 0 0 6px; }
.encadre-important .ecrans-app { counter-reset: ecran 4; }
.encadre-important ~ .ecrans-app { counter-reset: ecran 6; }
@media (min-width: 900px) {
  .ecran-app:has(.ecran-app__capture) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 28px; padding: 22px; }
  .ecran-app--seule:has(.ecran-app__capture) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ecran-app--seule .ecran-app__texte { visibility: hidden; }
  .encadre-important { padding: 32px; }
}