/* Page d'accueil publique de CuteVideo — feuille unique, sans cadriciel ni build.

   Direction : un studio de production. Le module récurrent est le cadre 9:16 aux coins du logo (rayon = 22 % de
   la largeur) ; le cyan est réservé aux données mesurées (vues, notes, heures, coûts), comme les nombres colorés
   des sous-titres des Shorts ; le violet porte l'action et l'état actif. Poppins seule.

   Politique de sécurité stricte (landing/server.py) : aucun style en ligne. Le script ne touche au style que par
   des classes, des attributs ou le CSSOM (element.style.x), jamais par l'attribut style= écrit dans le HTML.

   ---
   CONTRAT AVEC assets/js/site.js (le HTML est complet et lisible sans script ; tout ce qui suit est optionnel)
   ---
   html.js                     posée par le script au démarrage : affiche les commandes qui n'existent qu'avec lui
     ([data-toggle], .listen-open, [data-filters], [data-billing]) et passe le making-of
     en onglets quand il pose aussi .is-tabs (voir plus bas).

   Haut de page
   [data-hero-frame]           le cadre ; contient video[data-hero] (preload=metadata, sans autoplay : le script
     lance la lecture après l'ouverture, sauf mouvement réduit) et button[data-toggle].
   svg.frame-outline           liserés de l'ouverture, posés par le script sur le cadre visible : path.top (violet),
     path.bottom (cyan) vont de la silhouette du logo au bord du cadre ; .is-off les éteint.
   video.is-entering           nouvelle vidéo posée par-dessus l'ancienne lors d'un changement de chaîne : volet
     diagonal de pente 1/2, de bas gauche en haut droite, 450 ms (keyframes « coupe ») ;
     le script retire l'ancienne vidéo à l'animationend.
   [data-hero-title]           h1 en trois span.line ; le script enveloppe chaque mot dans span.w et pose
     .is-spoken sur le mot lu (violet clair), puis la retire : le titre reste blanc.
   a.chip (dans [data-chips])  liens vers la carte de la vedette (#short-<id>) sans script. Le script leur donne
     role="button" et aria-pressed (true sur la chaîne affichée), retire aria-current, et
     lit : data-video, data-src, data-poster (boucle et affiche 540 × 960), data-tagline,
     data-style, data-date (« 5 novembre 2026 »), data-channel-url, le nom = texte du lien.
     Titre, vues, lien YouTube et libellé de la vidéo se lisent sur la carte #short-<id>
     (h3, .short-meta .num, .short-links a, aria-labelledby de sa vidéo).
   [data-hero-card] [data-field="name|tagline|style|title|views|date|youtube|channel"]
     champs de la fiche à remplacer (texte, ou href pour youtube et channel, datetime
     pour date).

   Cadres vidéo (haut de page, cartes, coulisses)
   .frame.is-playing           lecture en cours : liseré violet, icône pause sur [data-toggle].
   button[data-toggle]         lecture / pause, 44 px, en bas à droite. Libellé à composer par le script :
     « Lire l’extrait de {titre} » / « Mettre en pause l’extrait de {titre} ».
     Les vidéos portent l'attribut controls pour une lecture sans script : le script le
     retire au démarrage.

   Grille « Sortis du studio »
   [data-filters] button.pill[data-filter][aria-pressed]   filtres ; « tous » = aucun filtre.
   article.short[data-styles]  styles séparés par des espaces (animation 3d images-reelles actualite sans-voix) ;
     le script pose l'attribut hidden sur les cartes écartées.
   [data-empty]                message (hidden par défaut) quand aucune carte ne reste ; son bouton [data-filter="tous"].
   button.listen-open[data-youtube-id]   ouvre dialog[data-listen] ; libellé à composer : « Écouter « {titre} »
     avec le son, dans le lecteur YouTube ». Le script remplit [data-listen-title], crée
     l'iframe youtube-nocookie dans [data-listen-player] (remplace le texte d'attente) et la
     détruit à la fermeture ([data-listen-close], Échap, clic sur le fond).

   Coulisses (making-of)
   [data-making].is-tabs       onglets, seulement si (min-width: 1024px) ; le script les défait en dessous.
   [data-steps-nav] a[href="#etape-N"]   deviennent les onglets (role="tab", aria-selected, tabindex) dans une
     liste role="tablist" ; details.step#etape-N (dans [data-steps], ouvert de force)
     devient role="tabpanel", hidden="until-found" hors de l'onglet choisi (aucun style
     posé sur le details, tout est sur .step-inner).
   details[data-fold]          ouvert dans le HTML, refermé par le script sous 720 px (coût détaillé, réglages).
   [data-filter-status]        zone polie : le script y écrit le nombre de Shorts affichés.

   Tarifs
   [data-pricing][data-period="mensuel|annuel"]   période affichée (mensuel si absent) ;
   [data-billing] button.pill[data-period][aria-pressed]   bascule.
   --- */

/* --- Polices : woff2 latin auto-hébergés, texte lisible avant leur arrivée (swap) --- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/poppins-400.woff2?v=7d93459d86) format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/poppins-600.woff2?v=f4e80d9dfd) format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/poppins-800.woff2?v=60bf0aba65) format("woff2");
}
/* Repli aux mesures de Poppins : le texte ne saute pas quand la vraie police arrive. */
@font-face {
  font-family: "Poppins repli";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 112%;
  ascent-override: 93.75%;
  descent-override: 31.25%;
  line-gap-override: 8.9%;
}

/* --- Jetons --- */
:root {
  --nuit: #0B1120;
  --nuit-2: #0E1528;
  --ardoise: #151B2E;
  --ardoise-2: #1C2440;
  --filet: rgba(255, 255, 255, .08);
  --filet-fort: rgba(255, 255, 255, .18);
  --encre: #F1F5F9;
  --encre-2: #CBD5E1;
  --brume: #94A3B8;
  --violet: #8B5CF6;
  --violet-clair: #A78BFA;
  --violet-pale: #C4B5FD;
  --violet-action: #6D28D9;
  --violet-action-survol: #7C3AED;
  --cyan: #22D3EE;
  --vert: #34D399;

  --police: "Poppins", "Poppins repli", system-ui, sans-serif;
  --rayon-carte: 16px;
  --rayon-bouton: 12px;
  --largeur: 1200px;
  --gouttiere: 24px;
  --marge: clamp(1rem, 4vw, 2rem);
  --section: clamp(3rem, 9vw, 8rem);
  --entete: 4.5rem;
  --courbe: cubic-bezier(.2, .8, .2, 1);

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: 1rem;
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* L'attribut hidden l'emporte sur les display des composants, sauf « until-found » (onglets cherchables). */
[hidden]:not([hidden="until-found"]) { display: none !important; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
img, svg, video { display: block; max-inline-size: 100%; }
button { font: inherit; color: inherit; }

h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.015em;
}
h3 {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
}

a {
  color: var(--violet-clair);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
a:hover { color: var(--violet-pale); }

:focus-visible {
  outline: 3px solid var(--violet-clair);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Les nombres mesurés, et eux seuls, en cyan. */
.num {
  color: var(--cyan);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.note {
  color: var(--brume);
  font-size: .875rem;
  max-inline-size: 70ch;
}

.vh {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -10rem;
  z-index: 100;
  padding: .75rem 1rem;
  border-radius: var(--rayon-bouton);
  background: var(--violet-action);
  color: #fff;
  font-weight: 600;
}
.skip-link:focus { inset-block-start: 1rem; color: #fff; }

.wrap {
  max-inline-size: calc(var(--largeur) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section { padding-block: var(--section); }
/* Bandes alternées : un ton au-dessus, même teinte bleutée. */
.band { background: var(--nuit-2); }

.section-head { display: grid; gap: 1.25rem; }
.section-head p { color: var(--encre-2); max-inline-size: 62ch; }
.section-head-split { align-items: end; }
.section-head-split > div:first-child { display: grid; gap: 1.25rem; }

/* --- Boutons et liens d'action --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: .75rem 1.375rem;
  border: 1px solid var(--violet-action);
  border-radius: var(--rayon-bouton);
  background: var(--violet-action);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--violet-action-survol); border-color: var(--violet-action-survol); color: #fff; }
.button-small { min-block-size: 44px; padding: .5rem 1rem; font-size: .9375rem; }
.button-outline { background: transparent; border-color: var(--filet-fort); color: var(--encre); }
.button-outline:hover { background: var(--ardoise-2); border-color: var(--violet-clair); color: var(--encre); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--encre);
  font-weight: 600;
  text-decoration-color: var(--violet-clair);
  text-decoration-thickness: 2px;
}

/* Bouton qui a l'air d'un lien (écouter, tout afficher). */
.link-button, .listen-open {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--violet-clair);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  cursor: pointer;
}
.link-button:hover, .listen-open:hover { color: var(--violet-pale); }

/* Pilules : puces des chaînes, filtres, bascule des tarifs. Actif = fond violet plein (pas la couleur seule :
   le fond change de forme visible, contour compris). */
.chip, .pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-block-size: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  background: transparent;
  color: var(--encre);
  font-size: .9375rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.chip:hover, .pill:hover { border-color: var(--violet-clair); color: var(--encre); }
.chip[aria-pressed="true"], .chip[aria-current="true"], .pill[aria-pressed="true"] {
  background: var(--violet-action);
  border-color: var(--violet-action);
  color: #fff;
  font-weight: 600;
}

/* Rangées de pilules : sur petit écran, une ligne qui défile dans son propre conteneur, jamais la page. */
.chips, .filters, .billing {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--marge));
  padding: 4px var(--marge);
  scroll-padding-inline: var(--marge);
}
.chips::-webkit-scrollbar, .filters::-webkit-scrollbar, .billing::-webkit-scrollbar { display: none; }

/* Commandes qui n'existent qu'avec le script. */
html:not(.js) [data-toggle],
html:not(.js) .listen-open,
html:not(.js) [data-filters],
html:not(.js) [data-billing] { display: none; }

/* --- En-tête --- */
.site-header {
  background: var(--nuit);
  border-block-end: 1px solid var(--filet);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-block-size: var(--entete);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-block-size: 44px;
  margin-inline-end: auto;
  color: var(--encre);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -.01em;
  text-decoration: none;
}
.brand:hover { color: var(--encre); }
.brand-mark { flex: none; inline-size: 20px; block-size: auto; }
/* Très petits écrans : logo et bouton tiennent sur une ligne dès 320 px. */
@media (max-width: 399.98px) {
  .header-inner { gap: .75rem; }
  .brand { font-size: 1rem; gap: .5rem; }
  .header-inner .button-small { padding-inline: .75rem; font-size: .875rem; }
}
.header-nav ul { display: flex; gap: .25rem; padding: 0; list-style: none; }
.header-nav a, .header-login {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: .75rem;
  color: var(--encre-2);
  font-size: .9375rem;
  text-decoration: none;
}
.header-nav a:hover, .header-login:hover { color: var(--encre); text-decoration: underline; }
/* Après les règles ci-dessus, qui posent display : sur mobile, seuls le logo et le bouton restent. */
.header-nav, .header-login { display: none; }

/* --- Haut de page --- */
.hero { padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; gap: 1.5rem; }
.hero-text { min-inline-size: 0; }

.hero-proof {
  margin-block-end: .75rem;
  color: var(--encre-2);
  font-size: .9375rem;
}
/* Trois lignes à toutes les largeurs : « de Shorts, chaque jour. », la plus longue, mesure 11,3 em. Sur mobile, le
   titre se réduit pour que le haut du cadre du Short entre dans le premier écran. */
.hero-title {
  font-size: clamp(1.5rem, 7.6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: initial;
}
.hero-title .line { display: block; }
.hero-title .w { transition: color 120ms linear; }
.hero-title .w.is-spoken { color: var(--violet-clair); }

.hero-lede {
  margin-block-start: 1rem;
  max-inline-size: 58ch;
  color: var(--encre-2);
  font-size: clamp(1rem, .85rem + .75vw, 1.125rem);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.5rem;
  margin-block-start: 1.25rem;
}
/* Collée aux boutons ; les puces suivent, juste avant le cadre qu'elles commandent. */
.hero-reassure {
  margin-block-start: .5rem;
  max-inline-size: 60ch;
  color: var(--brume);
  font-size: clamp(.8125rem, .75rem + .3vw, .875rem);
  line-height: 1.5;
}
.hero-text .chips { margin-block-start: 1rem; }

.hero-media {
  inline-size: min(72%, 22rem);
  margin-inline: auto;
}
.hero-note { margin-block-start: .625rem; color: var(--brume); font-size: .8125rem; }
.hero-card { margin-block-start: 1.25rem; }
.hero-card-name { font-weight: 600; font-size: 1.125rem; }
.hero-card-tagline { color: var(--encre-2); font-size: .9375rem; }
.hero-card-style { margin-block-start: .25rem; color: var(--brume); font-size: .875rem; }
.hero-card-title { margin-block-start: .875rem; font-weight: 600; line-height: 1.4; }
.hero-card-views { margin-block-start: .75rem; color: var(--encre-2); font-size: .9375rem; }
.num-big { display: block; font-size: 2.25rem; font-weight: 800; line-height: 1.1; }
.hero-card-date { color: var(--brume); font-size: .875rem; }
.hero-card-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-block-start: .5rem; }
.hero-card-links a { display: inline-flex; align-items: center; min-block-size: 44px; font-size: .9375rem; }

/* --- Cadre 9:16 --- */
/* Rayon = 22 % de la largeur, comme le logo (20/90) : 22 % horizontalement, 22 × 9/16 = 12,375 % verticalement. */
.frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 9 / 16;
  border-radius: 22% / 12.375%;
  overflow: hidden;
  background: var(--ardoise);
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color 160ms linear;
}
.frame video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* Affiche posée par le script à l'approche (data-poster). Sans script, l'image <noscript> prend la place de la
   vidéo : sans affiche, les contrôles natifs la couvraient d'un voile gris ; le son est sur YouTube. */
.frame noscript img { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (scripting: none) { .frame video[data-poster] { visibility: hidden; } }
.frame.is-playing { outline-color: var(--violet); }

/* Volet diagonal de pente 1/2 (en pixels) : sur un cadre 9:16, la coupe monte de 100 × 9/32 = 28,125 % de la
   hauteur d'un bord à l'autre. Le polygone couvre la partie sous la coupe ; il part entièrement sous le cadre. */
.frame video.is-entering {
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: coupe 450ms var(--courbe) both;
}
@keyframes coupe {
  from { clip-path: polygon(0 130%, 0 128.125%, 100% 100%, 100% 130%); }
  to { clip-path: polygon(0 130%, 0 0, 100% -28.125%, 100% 130%); }
}

.frame-outline {
  position: absolute;
  inset: 0;
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}
.frame-outline path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; transition: opacity 300ms linear; }
.frame-outline .top { stroke: var(--violet); }
.frame-outline .bottom { stroke: var(--cyan); }
.frame-outline.is-off path { opacity: 0; }

/* Lecture / pause : 44 px, dans l'arrondi du coin. Le rayon grandit avec le cadre (22 % de la largeur) : l'écart
   aussi (6,5 % de la largeur, 3,66 % de la hauteur), pour que le cercle et son anneau de focus restent dedans. */
[data-toggle] {
  position: absolute;
  inset-inline-end: max(8px, 6.5%);
  inset-block-end: max(8px, 3.66%);
  z-index: 3;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(11, 17, 32, .78);
  cursor: pointer;
}
[data-toggle]::before {
  content: "";
  inline-size: 0;
  block-size: 0;
  margin-inline-start: 3px;
  border-block: 7px solid transparent;
  border-inline-start: 12px solid #fff;
}
.frame.is-playing [data-toggle]::before {
  inline-size: 11px;
  block-size: 14px;
  margin: 0;
  border: 0;
  border-inline: 4px solid #fff;
}
[data-toggle]:hover { background: var(--violet-action); border-color: var(--violet-action); }

/* Souris : la commande apparaît au survol ou au focus du cadre (la lecture suit le survol). Toucher : toujours là. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .short [data-toggle], .making-short [data-toggle] { opacity: 0; transition: opacity 160ms linear; }
  .short .frame:hover [data-toggle],
  .short .frame:focus-within [data-toggle],
  .making-short .frame:hover [data-toggle],
  .making-short .frame:focus-within [data-toggle] { opacity: 1; }
}

/* --- Sortis du studio --- */
.filters { margin-block-start: .5rem; }
.shorts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 1rem;
  margin-block-start: 2.5rem;
}
.short { position: relative; display: flex; flex-direction: column; min-inline-size: 0; }
.short .frame { margin-block-end: .875rem; }
.short:hover .frame, .short:focus-within .frame { outline-color: var(--violet); }
.short-channel { color: var(--brume); font-size: .8125rem; font-weight: 600; }
.short h3 {
  margin-block-start: .125rem;
  font-size: .9375rem;
  line-height: 1.4;
}
.short-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .375rem;
  margin-block-start: .5rem;
  color: var(--brume);
  font-size: .8125rem;
}
.short-meta time { flex-basis: 100%; }
.short-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .625rem;
  margin-block-start: auto;
  padding-block-start: .375rem;
  font-size: .8125rem;
}
/* Côte à côte quand la carte est assez large ; sinon empilés sans grand vide : cibles de 32 px (au-dessus des
   24 px demandés), au lieu de 44 px qui laissaient un trou entre les deux lignes. */
.short-links a, .short-links .listen-open { display: inline-flex; align-items: center; min-block-size: 2rem; }
.shorts-empty { margin-block-start: 2rem; color: var(--encre-2); }
.shorts .note { margin-block-start: 2.5rem; }

/* --- Une journée --- */
.split { display: grid; gap: 2.5rem; }
.split-head { display: grid; gap: 1rem; align-content: start; }
.split-head p { color: var(--encre-2); max-inline-size: 46ch; }

/* Frise : un trait continu, l'heure fait le repère (pas de pastilles numérotées). */
.timeline { padding: 0; list-style: none; }
.timeline > li {
  position: relative;
  padding-inline-start: 1.5rem;
  padding-block-end: 2.25rem;
  border-inline-start: 2px solid var(--filet-fort);
}
.timeline > li:last-child { padding-block-end: .25rem; }
.timeline > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -2px;
  inset-block-start: .8em;
  inline-size: .875rem;
  block-size: 2px;
  background: var(--encre-2);
}
.timeline-time {
  color: var(--cyan);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: .9375rem;
}
.timeline h3 { margin-block-end: .25rem; }
.timeline p:not(.timeline-time) { color: var(--encre-2); max-inline-size: 60ch; }
.aside { display: block; color: var(--brume); font-size: .875rem; font-weight: 400; }
.day .note { margin-block-start: 2rem; }

/* --- Coulisses --- */
.making-intro { display: grid; gap: 1.5rem; }
.making-intro p { color: var(--encre-2); max-inline-size: 62ch; }
.making-intro h2 { margin-block-end: 1rem; }
.studio-box {
  align-self: start;
  padding: 1.25rem 1.5rem;
  border-radius: var(--rayon-carte);
  background: var(--ardoise);
  font-size: .9375rem;
}
.studio-box strong { color: var(--encre); }

.making { display: grid; gap: 2rem; margin-block-start: 3rem; }
/* Sous 1 024 px : vignette à côté du titre (la même vidéo est déjà dans la grille). */
.making-short { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-content: center; gap: .25rem 1rem; }
.making-short .frame { grid-row: span 2; }
.making-short-title { align-self: end; font-weight: 600; font-size: .9375rem; line-height: 1.4; }
.making-short-meta { align-self: start; color: var(--encre-2); font-size: .875rem; }
.making-nav { display: none; }
.making-nav ol { display: grid; gap: .25rem; padding: 0; list-style: none; }
.making-nav a {
  position: relative;
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  align-items: center;
  gap: .5rem;
  min-block-size: 44px;
  padding: .5rem .875rem;
  border-radius: var(--rayon-bouton);
  color: var(--encre-2);
  font-size: .9375rem;
  text-decoration: none;
}
.making-nav a:hover { background: var(--ardoise); color: var(--encre); }
/* Onglet choisi : fond et barre violette (une forme, pas seulement une couleur). */
.making-nav a[aria-selected="true"] { background: var(--ardoise); color: var(--encre); font-weight: 600; }
.making-nav a[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset-block: .5rem;
  inset-inline-start: 0;
  border-inline-start: 3px solid var(--violet);
}
.step-time { color: var(--cyan); font-weight: 600; font-variant-numeric: tabular-nums; font-size: .875rem; }

/* Sans onglets (sous 1 024 px, sans script) : une étape par <details>, heure et libellé dans le résumé. Aucun style
   sur details.step lui-même : un panneau caché par hidden="until-found" garderait ses marges. */
.step > summary { gap: 1rem; padding-block: .75rem; border-block-start: 1px solid var(--filet); font-weight: 600; }
.step > summary .step-time { flex: none; inline-size: 4rem; }
.step-inner { padding-block: .25rem 1.75rem; }
.step-inner > * + * { margin-block-start: 1rem; }
/* Le titre répète le résumé : lu, pas affiché (il s'affiche dans les onglets). */
.making:not(.is-tabs) .step-inner > h3 { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.making.is-tabs .step > summary { display: none; }
.step-inner p { color: var(--encre-2); max-inline-size: 62ch; }
.step-inner h3 { color: var(--encre); }
.step-inner .step-when { margin-block-start: .25rem; color: var(--cyan); font-size: .875rem; }

.angles, .passes { display: grid; gap: .875rem; padding: 0; list-style: none; }
.angle {
  padding: 1rem 1.25rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-bouton);
}
.angle-chosen { border-color: var(--violet); }
.angle-hook { color: var(--encre) !important; font-weight: 600; }
.angle-score { margin-block-start: .25rem; font-size: .875rem; }
.angle-score .num { font-size: 1.375rem; font-weight: 800; }
.angle .remark { margin-block-start: .625rem; }

/* Remarques du studio : citation sobre, filet violet, ni guillemets géants ni italique. */
.remark {
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--violet);
  font-size: .9375rem;
}
.pass > * + * { margin-block-start: .75rem; }
.pass + .pass { padding-block-start: 1.25rem; border-block-start: 1px solid var(--filet); }
.pass-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .625rem; }
.pass-score .num { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 800; line-height: 1; }
.pass-scale { color: var(--brume); font-weight: 600; margin-inline-start: -.5rem; }
.pass-label { color: var(--encre-2); font-size: .9375rem; }

.publish-sheet { display: grid; gap: .875rem; }
.publish-sheet dt { color: var(--brume); font-size: .8125rem; }
.publish-sheet dd { color: var(--encre); }
.making-foot { margin-block-start: 2.5rem; }

/* --- Vous gardez la main --- */
.io-list {
  display: grid;
  gap: 1rem;
  margin-block-start: 2.5rem;
  padding: 0;
  list-style: none;
}
.io {
  display: grid;
  align-content: start;
  gap: .875rem;
  padding: 1.5rem;
  border-radius: var(--rayon-carte);
  background: var(--ardoise);
}
.io-label { color: var(--brume); font-size: .8125rem; font-weight: 600; }
.io-in p:not(.io-label) { color: var(--encre-2); }
.io-in { padding: .875rem 1rem; border-radius: var(--rayon-bouton); background: var(--nuit); }
/* Entrée → sortie : une flèche dessinée (la police n'a pas le glyphe). */
.io-out { position: relative; padding-block-start: 1.75rem; }
.io-out::before, .io-out::after { content: ""; position: absolute; inset-inline-start: 1.25rem; }
.io-out::before { inset-block-start: .125rem; block-size: 1.125rem; border-inline-start: 2px solid var(--violet-clair); }
.io-out::after {
  inset-block-start: .625rem;
  inset-inline-start: calc(1.25rem - 4px);
  inline-size: 10px;
  block-size: 10px;
  border-inline-end: 2px solid var(--violet-clair);
  border-block-end: 2px solid var(--violet-clair);
  transform: rotate(45deg);
}

.settings { margin-block-start: 3rem; }
.settings > summary { inline-size: fit-content; }
.settings ul { margin-block-start: 1rem; padding-inline-start: 1.25rem; color: var(--encre-2); }
.settings li + li { margin-block-start: .5rem; }
.settings li::marker { color: var(--violet-clair); }

/* --- Pour qui : des lignes, pas des cartes --- */
.situations { margin-block-start: 2.5rem; padding: 0; list-style: none; border-block-end: 1px solid var(--filet-fort); }
.situation {
  display: grid;
  gap: .75rem;
  padding-block: 1.75rem;
  border-block-start: 1px solid var(--filet-fort);
}
.situation p { color: var(--encre-2); max-inline-size: 52ch; }
.situation-figure { font-size: .9375rem; }
.situation-figure .num { font-size: 1.75rem; font-weight: 800; line-height: 1.2; }
.situation-source { display: block; color: var(--brume); font-size: .875rem; }

/* --- Vos clés, vos coûts --- */
.keys-grid { display: grid; gap: 3rem; margin-block-start: 2.5rem; }
.keys-screen {
  overflow: hidden;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-carte);
  background: var(--ardoise);
  font-size: .875rem;
}
.keys-bar {
  padding: .75rem 1.25rem;
  border-block-end: 1px solid var(--filet);
  background: var(--ardoise-2);
  color: var(--encre-2);
  font-weight: 600;
}
.keys-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1rem;
  padding: .875rem 1.25rem;
  border-block-start: 1px solid var(--filet);
}
.keys-bar + .keys-row { border-block-start: 0; }
.keys-row-head { display: none; color: var(--brume); font-size: .8125rem; }
.keys-provider { grid-column: 1 / -1; color: var(--encre); font-weight: 600; }
.keys-provider small { display: block; color: var(--brume); font-size: .8125rem; font-weight: 400; }
.keys-value { color: var(--encre-2); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.keys-state { display: inline-flex; align-items: center; gap: .375rem; color: var(--encre-2); }
.keys-state::before {
  content: "";
  inline-size: 5px;
  block-size: 9px;
  margin-block-start: -3px;
  border-inline-end: 2px solid var(--vert);
  border-block-end: 2px solid var(--vert);
  transform: rotate(45deg);
}
.keys-screen-wrap .note { margin-block-start: 1rem; }

.cost { display: grid; gap: 1rem; align-content: start; }
.cost p { color: var(--encre-2); max-inline-size: 60ch; }
.cost-table { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; }
.cost-table th, .cost-table td { padding: .5rem 0; text-align: start; vertical-align: baseline; }
.cost-table thead th { color: var(--brume); font-size: .8125rem; font-weight: 600; border-block-end: 1px solid var(--filet-fort); }
.cost-table tbody th { color: var(--encre-2); font-weight: 400; padding-inline-end: 1rem; }
.cost-table td, .cost-table thead th:last-child { text-align: end; white-space: nowrap; }
.cost-table tbody tr + tr { border-block-start: 1px solid var(--filet); }
.cost-table .cost-group th { padding-block-start: 1.25rem; color: var(--encre); font-weight: 600; }
.cost-table .cost-total { border-block-start: 1px solid var(--filet-fort); }
.cost-table .cost-total th { color: var(--encre); font-weight: 600; }
.cost-table .cost-total .num { font-size: 1.25rem; font-weight: 800; }
.cost-detail > summary { color: var(--encre); font-weight: 600; border-block-end: 1px solid var(--filet-fort); }

/* --- Tarifs --- */
.billing { margin-block-start: .5rem; }
/* Sous 1 024 px : les cinq offres dans une rangée qui défile dans son conteneur, la suivante dépasse. */
.plans {
  display: flex;
  gap: 1rem;
  margin: 2.5rem calc(-1 * var(--marge)) 0;
  padding: 4px var(--marge) 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--marge);
}
.plan { flex: 0 0 min(85%, 22rem); scroll-snap-align: start; }
.plan {
  display: grid;
  align-content: start;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  background: var(--ardoise);
}
/* Pro mis en avant par un filet violet, sans étiquette. */
.plan-featured { border-color: var(--violet); }
.plan h3 { font-size: 1.25rem; }
.plan-price { margin-block-start: .75rem; color: var(--brume); font-size: .9375rem; }
.price-monthly, .price-free { display: block; color: var(--encre-2); }
.price-amount { color: var(--encre); font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.price-yearly .price-amount, .price-or + .price-yearly .price-amount { font-size: 1rem; font-weight: 600; }
.price-or { margin-inline-end: .25rem; }
.plan-note { color: var(--brume); font-size: .8125rem; }
.plan-trial { margin-block-start: .5rem; color: var(--encre-2); font-size: .875rem; }
.plan .button { margin-block-start: 1.25rem; inline-size: 100%; }
.plan-facts { margin-block-start: 1.25rem; }
.plan-facts > div { padding-block: .5rem; border-block-start: 1px solid var(--filet); }
.plan-facts dt { color: var(--brume); font-size: .8125rem; }
.plan-facts dd { color: var(--encre); font-size: .9375rem; line-height: 1.45; }
/* Petit écran : libellé et valeur sur une ligne, l'offre tient sur un écran. */
@media (max-width: 1023.98px) {
  .plan-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .plan-facts dd { text-align: end; }
}

/* Avec le script : une seule période affichée, en grand. */
.js [data-pricing]:not([data-period="annuel"]) :is(.price-or, .price-yearly) { display: none; }
.js [data-pricing][data-period="annuel"] :is(.price-monthly, .price-or) { display: none; }
.js [data-pricing][data-period="annuel"] .price-yearly { display: block; color: var(--encre-2); }
.js [data-pricing][data-period="annuel"] .price-yearly .price-amount { font-size: 2rem; font-weight: 800; }

.plans-notes { display: grid; gap: .5rem; max-inline-size: none; margin-block-start: 2rem; padding-inline-start: 1.25rem; }

/* --- Disclosures : étapes, coût détaillé, réglages, questions --- */
summary {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: 44px;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
:is(.step, [data-fold]) > summary::after {
  content: "";
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  margin-inline: auto .25rem;
  border-inline-end: 2px solid var(--violet-clair);
  border-block-end: 2px solid var(--violet-clair);
  transform: translateY(-2px) rotate(45deg);
}
[data-fold] > summary::after { margin-inline-start: .75rem; }
:is(.step, [data-fold])[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

.questions { display: grid; gap: 0 3rem; margin-block-start: 2rem; }
.questions details { border-block-start: 1px solid var(--filet-fort); }
.questions-col:last-child details:last-child { border-block-end: 1px solid var(--filet-fort); }
.questions summary {
  padding-block: 1rem;
  padding-inline-end: 2.5rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Plus / moins dessinés : deux traits, le vertical disparaît à l'ouverture. */
.questions summary::before, .questions summary::after {
  content: "";
  position: absolute;
  inset-inline-end: .5rem;
  inset-block-start: 50%;
  inline-size: 14px;
  block-size: 2px;
  background: var(--violet-clair);
}
.questions summary::after { transform: rotate(90deg); transition: transform 160ms linear; }
.questions details[open] summary::after { transform: rotate(0); }
.questions details p { padding-block-end: 1.25rem; color: var(--encre-2); max-inline-size: 62ch; }

/* --- Appel final --- */
.closing { overflow: hidden; }
.closing-inner { position: relative; isolation: isolate; display: grid; gap: 2rem; }
/* Halo localisé derrière le logo, du violet au cyan : la seule touche de dégradé de la page. */
.closing-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Centré sur le logo (8,5 rem de large au plus, au bord gauche du contenu). */
  inset-inline-start: calc(var(--marge) + 4.25rem - 12rem);
  inset-block-start: 50%;
  inline-size: 24rem;
  block-size: 24rem;
  translate: 0 -50%;
  background:
    radial-gradient(closest-side at 42% 40%, rgba(139, 92, 246, .38), transparent),
    radial-gradient(closest-side at 58% 64%, rgba(34, 211, 238, .22), transparent);
}
.closing-mark { inline-size: clamp(5rem, 12vw, 8.5rem); block-size: auto; }
.closing-text { display: grid; gap: 1rem; }
.closing-text > p:not(.hero-actions) { color: var(--encre-2); max-inline-size: 52ch; }
.closing-text .hero-actions { margin-block-start: .5rem; }

/* --- Pied de page --- */
.site-footer {
  padding-block: 3.5rem 2rem;
  border-block-start: 1px solid var(--filet);
  font-size: .9375rem;
}
.footer-grid { display: grid; gap: 2rem; }
.footer-col p:not(.footer-title) { color: var(--brume); }
.footer-title { margin-block-end: .5rem; color: var(--encre); font-weight: 600; }
.footer-col ul { padding: 0; list-style: none; }
.footer-col a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--encre-2); text-decoration: none; }
.footer-col a:hover { color: var(--encre); text-decoration: underline; }
.footer-bottom { margin-block-start: 2rem; }
.footer-bottom p { padding-block-start: 1.5rem; border-block-start: 1px solid var(--filet); color: var(--brume); font-size: .8125rem; }

/* --- Fenêtre d'écoute --- */
.listen {
  inline-size: min(26rem, calc(100vw - 2rem));
  max-block-size: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-carte);
  background: var(--ardoise);
  color: var(--encre);
}
/* Le défilement dans la fenêtre ne passe pas à la page derrière. */
.listen:modal { overscroll-behavior: contain; }
.listen::backdrop { background: rgba(5, 8, 16, .82); overflow: hidden; overscroll-behavior: contain; }
.listen-inner { display: grid; gap: 1rem; padding: 1.25rem; }
.listen-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.listen-player {
  display: grid;
  place-items: center;
  inline-size: min(100%, calc((100dvh - 13rem) * 9 / 16));
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  padding: 1rem;
  border-radius: var(--rayon-bouton);
  background: var(--nuit);
  color: var(--brume);
  font-size: .875rem;
  text-align: center;
}
.listen-player:has(iframe) { padding: 0; }
.listen-player iframe { inline-size: 100%; block-size: 100%; border: 0; border-radius: var(--rayon-bouton); }
.listen .button { justify-self: end; }

/* --- Page 404 --- */
.lost { display: grid; align-items: center; min-block-size: calc(100dvh - var(--entete) - 1px); padding-block: 4rem; }
.lost-inner { display: grid; gap: 2rem; align-items: center; }
.lost-mark { inline-size: 6rem; block-size: auto; }
.lost h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.lost p:not(.hero-actions) { margin-block-start: 1rem; color: var(--encre-2); }

/* --- Points de rupture --- */
@media (max-width: 719.98px) {
  .shorts-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 40%;
    gap: 1rem;
    margin-inline: calc(-1 * var(--marge));
    padding: 6px var(--marge) 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--marge);
  }
  .short { scroll-snap-align: start; }
}

@media (min-width: 720px) {
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: start; }
  .hero-text { grid-column: 1 / span 7; }
  /* Une part en rem : le titre grandit au zoom ; trois lignes tiennent de 720 à 1 023 px. */
  .hero-title { font-size: calc(.5rem + 3.4vw); }
  .hero-media { grid-column: 8 / span 5; inline-size: auto; margin: 0; }
  .chips, .filters, .billing { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .shorts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .io-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .settings ul { columns: 2; column-gap: 3rem; }
  .settings li { break-inside: avoid; }
  .keys-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; align-items: baseline; }
  .keys-row-head { display: grid; }
  .keys-provider { grid-column: auto; }
  .closing-inner { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3rem; }
  .footer-grid { grid-template-columns: 1.4fr 1.4fr 1fr; }
  .lost-inner { grid-template-columns: auto minmax(0, 1fr); gap: 3rem; }
}

/* La navigation ne tient pas à 768 px (750 px pour 704 de place) : elle arrive à 900 px. */
@media (min-width: 900px) {
  .header-nav, .header-login { display: flex; }
}

@media (min-width: 1024px) {
  /* Bureau : l'en-tête opaque reste en haut ; les ancres s'arrêtent sous lui. */
  html { scroll-padding-block-start: calc(var(--entete) + 1rem); }
  .site-header { position: sticky; inset-block-start: 0; z-index: 10; }

  /* Texte aligné en haut ; le cadre est borné pour que les puces et les vues de la fiche tiennent dans l'écran. */
  .hero-text { grid-column: 1 / span 8; padding-block-start: 1rem; }
  /* « de Shorts, chaque jour. » (la plus longue des trois lignes, 11,3 em) tient dans huit colonnes. */
  .hero-title { font-size: min(4.125rem, 5.15vw); }
  .hero-media { grid-column: 9 / span 4; }
  .hero-media .frame { inline-size: min(100%, max(15rem, calc((100dvh - 23rem) * 9 / 16))); }

  .section-head-split { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; }
  .section-head-split .filters, .section-head-split .billing { justify-content: flex-end; max-inline-size: 34rem; }
  /* Gouttière de 16 px : à 1 200 px, une carte (187 px) garde « Voir sur YouTube » et « Écouter ici » sur une ligne. */
  .shorts-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1rem; }

  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); }
  .split-head { grid-column: 1 / span 4; position: sticky; inset-block-start: calc(var(--entete) + 2rem); align-self: start; }
  .split-body { grid-column: 6 / span 7; }
  .timeline > li {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: 2rem;
    padding-inline-start: 0;
    padding-block-end: 0;
    border-inline-start: 0;
  }
  /* Le trait passe entre l'heure (dans la marge) et le texte, continu d'un repère à l'autre. */
  .timeline > li > div { padding-inline-start: 2rem; padding-block-end: 2.25rem; border-inline-start: 2px solid var(--filet-fort); }
  .timeline > li:last-child > div { padding-block-end: .25rem; }
  .timeline > li::before { inset-inline-start: 13rem; }
  .timeline-time { text-align: end; padding-block-start: .1rem; }

  .making-intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); }
  .making-intro > div { grid-column: 1 / span 7; }
  .studio-box { grid-column: 9 / span 4; }
  .making { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); }
  .making-short { grid-column: 1 / span 3; grid-template-columns: none; align-content: start; gap: .5rem;
    position: sticky; inset-block-start: calc(var(--entete) + 1.5rem); align-self: start; }
  .making-short .frame { grid-row: auto; margin-block-end: .5rem; }
  .making-nav { display: block; grid-column: 4 / span 3; position: sticky; inset-block-start: calc(var(--entete) + 1.5rem); align-self: start; }
  .making-panels { grid-column: 7 / span 6; }
  /* Onglets : le panneau choisi dans un cadre ardoise ; les autres, hidden="until-found", restent cherchables. */
  .making.is-tabs .step-inner { padding: 2rem; border: 0; border-radius: var(--rayon-carte); background: var(--ardoise); }
  .making.is-tabs .angle { background: var(--nuit-2); }

  .io-list { gap: var(--gouttiere); }

  .situation { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: start; }
  .situation h3 { grid-column: 1 / span 4; }
  .situation > p:nth-of-type(1) { grid-column: 5 / span 4; }
  .situation-figure { grid-column: 9 / span 4; }

  .keys-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); }
  .keys-screen-wrap { grid-column: 1 / span 6; }
  .cost { grid-column: 8 / span 5; }

  /* Cinq colonnes comparées : chaque ligne s'aligne d'une offre à l'autre (sous-grilles). */
  .plans {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 .75rem;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .plan { grid-row: span 16; grid-template-rows: subgrid; padding-inline: 1rem; }
  .plan > .plan-facts { display: grid; grid-row: span 11; grid-template-rows: subgrid; }
  .plans-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }

  .questions { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .questions-col:first-child details:last-child { border-block-end: 1px solid var(--filet-fort); }
}

/* --- Mouvement --- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Mouvement réduit : tout en place d'emblée, rien ne s'anime, la commande de lecture reste visible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .frame video.is-entering { animation: none; }
}

/* Couleurs forcées : les états actifs gardent un contour visible. */
@media (forced-colors: active) {
  .chip[aria-pressed="true"], .chip[aria-current="true"], .pill[aria-pressed="true"] { outline: 2px solid CanvasText; }
  .frame { border: 1px solid CanvasText; }
}

/* Impression : réponses, étapes et détails ouverts ; rangées à plat ; pas de commandes. */
@media print {
  .site-header, [data-toggle], .listen-open, [data-filters], [data-billing], .making-nav, .listen { display: none !important; }
  [hidden="until-found"] { content-visibility: visible; }
  .shorts-grid, .plans { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}
@media print {
  details::details-content { content-visibility: visible; }
}