/* Électrocheck - fact-check en direct, on lel.media.
 *
 * The page reuses the theme's own markup and CSS wherever the theme has the component, so it looks the same by construction
 * and follows the theme when it changes (nothing here restyles them):
 *   the title            h2.big                           the side panels   aside.breves > h2.breves-titre + .breves-liste > article.breve
 *   the tags and pills   a.catbtn (+ .orange)             the archive list  .breves-archive > article.breve-ligne
 *   the buttons          a.btn                            the "+"           a.nodeco > .more
 * What the theme has no equivalent for, and is therefore styled here: the cards of the charter (the image tile and the white
 * card, the verdict pills in the designer's stamp colours) and the geometry of the column they sit in (the theme's own grid
 * unit --u, so the column lines up with the home page's). Fonts and colours come from the theme (poppins, atrament-web).
 */
.politix-live {
  --plx-navy: #140757; --plx-orange: #F55B01; --plx-radius: 2.5em; --plx-gap: 2em; --plx-pad: 12rem; --plx-ng: 3;
  --plx-u: calc((100vw - 2 * var(--plx-pad) - var(--plx-ng) * var(--plx-gap)) / 16);
  /* full width of the window, whatever the page template wraps it in (block themes force "margin: auto !important" on content) */
  position: relative; width: 100vw; box-sizing: border-box;
  padding: 1.5rem calc(var(--plx-pad) + var(--plx-u) * 3 + var(--plx-gap)) 6rem calc(var(--plx-pad) + var(--plx-u) + var(--plx-gap));
}
.politix-live.politix-live { max-width: 100vw !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; }
.politix-live [hidden] { display: none !important; }
@media (min-width: 2100px) { .politix-live { --plx-pad: 18rem; } }
@media (max-width: 1600px) { .politix-live { --plx-pad: 10rem; } }
@media (max-width: 1200px) {
  .politix-live { --plx-pad: 3rem; --plx-ng: 2; padding-left: calc(var(--plx-pad) + var(--plx-gap)); padding-right: calc(var(--plx-pad) + var(--plx-u) * 4 + var(--plx-gap)); }
}

/* the page's own title is replaced by the plugin's "Électrocheck" h1 (the PHP puts this class on the body of a page with the shortcode) */
body.politix-live-page main .entry-header, body.politix-live-page main .entry-title, body.politix-live-page main .wp-block-post-title { display: none; }

/* the lel theme's article template paints the content area cream (.postcontent); the charter's page is the theme's fixed purple gradient (#back) showing through
   (the script also drops the .postcontent class, whose other rules recolour the text) */
body.politix-live-page .entry-content, body.politix-live-page .postcontent { background: transparent !important; }

/* block themes write the room above the title inline (main: margin-top; the group under it: padding-top), hence !important */
body.politix-live-page main { margin-top: 0 !important; }
body.politix-live-page main > .wp-block-group:first-child { padding-top: 0 !important; }

/* The side panels follow the theme's own rules (.breves), whose values we cannot edit from here: --pad is 10rem up to 1600px (the theme says 8rem; the
   ranges stop at 1201px because the theme's own 3rem takes over under 1200), the same as the column of cards (--plx-pad above), so the two agree.
   The theme's right padding is the part of the panel past the window's edge (--breves-bleed) + 1.5em: .75em here, a little less room to the right of
   the shows. Desktop only: under 950px the panels are tabs, with their own padding. */
@media (min-width: 1201px) and (max-width: 1600px) { .politix-live .breves { --pad: 10rem; } }
@media (min-width: 951px) { .politix-live .breves { padding-right: calc(var(--breves-bleed) + .75em); --breves-top: calc(14rem - 100px); } }

/* the panels' titles are tabs on a phone: no focus outline (block themes outline every :focus) */
.politix-live .breves-titre:focus, .politix-live .breves-titre:focus-visible { outline: none; }

/* the tags and buttons (the theme's a.catbtn, blue #A9CDEC by default, and its panel chips): yellow, orange on hover - as the theme's own a.btn.
   The EN DIRECT pill (a.catbtn.orange) keeps the theme's orange. */
.politix-live a.catbtn:not(.orange):link, .politix-live a.catbtn:not(.orange):visited { background: #ECB742; }
.politix-live a.catbtn:not(.orange):hover, .politix-live a.catbtn:not(.orange):focus { background: #F55B01; color: #140757; }

/* room between the show's line and the back button, which stays the theme's own inline a.catbtn: the space is the wrapper's */
.politix-live .plx-back { margin-top: 2.2rem; }

/* A show in a side panel: its date, chip and title in a borderless box (a small padding all around), the whole box the link - the
   title's own link stretched over it (a link inside a link is not allowed); the chip stays above, a link to the same page, for its hover colour.
   The dot and the line are set just below. */
.politix-live .breve .plx-bx { position: relative; padding: .3em .4em; border: 0; border-radius: .8em; transition: background .25s ease; }
.politix-live .breve .plx-bx:hover { background: rgba(255, 255, 255, .06); }
.politix-live .breve .plx-bx a.nodeco::after { content: ""; position: absolute; inset: 0; }
.politix-live .breve .plx-bx a.catbtn { position: relative; z-index: 1; }
/* First line: the channel's chip, then the short date. Second line: the show's name, then its guests (smaller, lighter), two lines at most and an ellipsis
   (the clamped box has ONE block child, so the name and the guests flow as one run of text). */
.politix-live .breve .plx-bx .plx-l1 { display: flex; align-items: center; gap: .55em; }
.politix-live .breve .plx-bx .plx-l1 .cat, .politix-live .breve .plx-bx .plx-l1 time.breve-date { display: block; margin: 0; }
.politix-live .breve .plx-bx a.catbtn { margin: 0; }
.politix-live .breve .plx-bx .plx-l1 time.breve-date { padding-top: 3px; }
.politix-live .breve .plx-bx .plx-l2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: .3em; }
.politix-live .breve .plx-bx .plx-l2 > div { display: block; }
.politix-live .breve .plx-bx a.nodeco, .politix-live .breve .plx-bx a.nodeco h3 { display: inline; }
.politix-live .breve .plx-bx .plx-guests { color: rgba(255, 255, 255, .72); font: 400 .85em/1.5 poppins, sans-serif; }
/* The timeline in a panel, as on the archive pages: the same dot (.7em, with its ring) on the date line, and the line starting at the dot's centre
   (the theme's panel starts its line at its own smaller dot). The first line (the chip and the date) is under the box's .3em of padding and is
   1.775em high, so its centre is at 1.1875em: the dot's centre is there (top = 1.1875em - .35em) and the line starts there (2px of the list's padding + 1.1875em). */
.politix-live article.breve::before { top: .8375em; width: .7em; height: .7em; box-shadow: 0 0 0 .3em rgba(77, 36, 114, .95); }
.politix-live .breves-liste::before { left: .35em; top: calc(2px + 1.1875em); }
/* the list clips its content: a box flush with its edge, at a fractional pixel, can lose a pixel of its background or the dot's ring */
.politix-live .breves-liste { padding: 2px 0; }

/* the show's date under its name when nothing is on air: as on the archives page (the theme's .breve-ligne .breve-date, whose dot and indent are not wanted here) */
.politix-live .plx-head time.breve-date { display: block; color: var(--plx-orange); font: 600 .95rem/1.5 poppins, sans-serif; letter-spacing: .02em; }

/* the channel's chip on the archive and to-come lists is a chip, not a link (an a.catbtn with no href, in the theme's colour for its channel) */
.politix-live .breve-ligne a.catbtn { pointer-events: none; }

/* the product's name (the theme's h1.breve-title-archive) is centred; the show's title (h2.big) is 2em on a phone, where the theme's 3em is too big for it.
   Both written with an element and a class under .politix-live so they win over the theme's rules at every width, whatever the load order. */
.politix-live h1.breve-title-archive { text-align: center; }
@media (max-width: 700px) { .politix-live h2.big { font-size: 2em; } }

/* the show's title block (title, date, back button) is as wide as its parent, so it is centred on the same axis as the "Électrocheck" name and the cards
   (it used to be wider than the column, with negative margins, to centre on the page: it then sat off the axis of the name above it) */
.politix-live .plx-head { margin: 0 0 2.6rem; }
.politix-live .plx-main { padding-top: 24px; }

/* ------------------------------------------------------------------ the cards, newest first: the image on the left, the text on the right */
.politix-live .plx-list { container-type: inline-size; display: flex; flex-direction: column; gap: 3.2rem; overflow-anchor: none; }
.politix-live .plx-item { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: stretch; scroll-margin-top: 2rem; }

.politix-live .plx-visual { position: relative; width: 100%; min-width: 0; margin: 0; overflow: hidden; border-radius: var(--plx-radius); background: #3A1160; }
.politix-live .plx-crop { position: relative; width: 100%; }
.politix-live .plx-crop img { display: block; width: 100%; height: auto; }
/* the designer's square card ends with a band (logo, lel.media) that the page does not need: shown without it; the tile is taller when
   the text beside it is, and the same purple fills below. Cards of the first (16:9) design are shown whole, centred. */
.politix-live .plx-visual:not(.plx-square) { display: flex; align-items: center; }
.politix-live .plx-square { background: #4D2472; }
.politix-live .plx-square .plx-crop { aspect-ratio: 1080 / 960; overflow: hidden; }
.politix-live .plx-square .plx-crop img { position: absolute; left: 0; top: 0; }
/* the card's purple is darker than the charter's flat #4D2472: lifted with a screen blend (white and the photo stay as they are) */
.politix-live .plx-square .plx-crop::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to bottom, rgba(25, 16, 36, 0) 46%, rgb(25, 16, 36) 64%); }
/* When the quote is printed as text (SEO, and it is readable text), the image stops under its name and date line (y = 728 of 1080: the
   date line ends at 705, the quote starts at 752), and the purple is lifted to exactly #4D2472 there, where the text block takes over. */
.politix-live .plx-quoted .plx-crop { aspect-ratio: 1080 / 728; }
.politix-live .plx-quoted .plx-crop::after { background: linear-gradient(to bottom, rgba(35, 21, 51, 0) 74%, rgb(35, 21, 51) 96%); }
.politix-live .plx-quote { position: relative; margin: 0; padding: .2rem 4% 2.4rem 16%; }
.politix-live .plx-quote::before { content: ""; position: absolute; left: 4.4%; top: .3rem; width: 7.9%; aspect-ratio: 72 / 55;
  background: url("data:image/png;base64,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") center / 100% 100% no-repeat; filter: drop-shadow(0 .2rem .4rem rgba(0, 0, 0, .4)); }
.politix-live .plx-quote p { margin: 0; color: #fff; font: 700 1.4rem/1.4 poppins, sans-serif; }

/* The blank under the explanation is the one above it (--plx-padt). */
.politix-live .plx-text { --plx-padt: 2.4rem; position: relative; padding: var(--plx-padt) 2.6rem var(--plx-padt); border-radius: var(--plx-radius); background: #fff; min-width: 0; }
.politix-live .plx-pill { display: inline-block; padding: .12em .85em; border-radius: 2em; background: #ddd; color: var(--plx-navy);
  font: 700 1.1rem/1.45 atrament-web, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.politix-live .plx-v-faux { background: #EF0B00; } .politix-live .plx-v-plutot-faux { background: #EA743F; } .politix-live .plx-v-mixte { background: #ECB742; }
.politix-live .plx-v-plutot-vrai { background: #AED4AE; } .politix-live .plx-v-vrai { background: #41CE41; }
.politix-live h3.plx-name { margin: .6em 0 .05em; font-size: 1.9rem; line-height: 1.15; }
.politix-live p.plx-when { margin: 0 0 1.2rem; color: var(--plx-orange); font-weight: 500; font-size: .95rem; }
.politix-live p.plx-body { margin: 0 !important; line-height: 1.65; overflow-wrap: anywhere; }       /* size: the theme's p */
/* The source and the fold are small round buttons (#ECB742, orange on hover, like the page's other buttons) with an icon. The source follows the
   end of the text on the same line; "Lire la suite" / "Réduire" and, while the text is cut, the source too sit over the card's bottom right. */
.politix-live .plx-text a.plx-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: #ECB742 center / 62% no-repeat; text-decoration: none; }
.politix-live .plx-text a.plx-btn[hidden] { display: none; }
.politix-live .plx-text a.plx-btn:hover, .politix-live .plx-text a.plx-btn:focus-visible { background-color: var(--plx-orange); }
.politix-live .plx-text a.plx-src { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140757' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
.politix-live .plx-text a.plx-fold-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140757' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.politix-live .plx-text a.plx-fold-btn[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140757' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); }
.politix-live .plx-body a.plx-btn { width: 1.6rem; height: 1.6rem; margin-left: .45rem; vertical-align: middle; }
.politix-live .plx-end { white-space: nowrap; }      /* the last character and the source button never wrap apart: the button does not end up alone on a line */
.politix-live .plx-actions { position: absolute; right: 1.2rem; bottom: .7rem; display: flex; gap: .5rem; }
.politix-live .plx-actions[hidden] { display: none; }
.politix-live .plx-text.plx-has-actions { padding-bottom: calc(var(--plx-padt) + .7rem); }      /* the buttons' room: .7rem more than the plain blank */
/* Beside the image, an explanation taller than the image side is folded to the lines that fit next to it (the JS counts them: --plx-lines; the whole text stays in the page,
   and the round button unfolds it): the pair keeps the image's height instead of leaving a block of empty purple under the image. A text that fits is not folded. */
.politix-live p.plx-body.plx-cut { display: -webkit-box; -webkit-line-clamp: var(--plx-lines, 6); -webkit-box-orient: vertical; overflow: hidden; }
@container (max-width: 780px) {
  .politix-live .plx-item { grid-template-columns: 1fr; gap: 1.2rem; }
  .politix-live .plx-text { --plx-padt: 2rem; padding-left: 1.8rem; padding-right: 1.8rem; }
}

/* ------------------------------------------------------------------ small screens: the room the theme's folded panels (tabs) take on the right edge */
@media (max-width: 950px) {
  .politix-live { --plx-pad: 2.5rem; padding-left: 2rem; padding-right: 5.5rem; }
  .politix-live .plx-head { margin: 0 0 2rem; }
}
@media (max-width: 600px) {
  .politix-live { padding-left: 1.3rem; padding-right: 4.4rem; }
  .politix-live .plx-main { padding-right: 11px; }              /* a little more room between the content and the two closed panels */
  .politix-live .plx-list { gap: 1.6rem; }
  .politix-live .plx-text { padding-left: 1.9rem; padding-right: 1.9rem; }
  .politix-live .plx-quote p { font-size: 1.05rem; }
  .politix-live h3.plx-name { font-size: 1.7rem; }
  .politix-live p.plx-when { font-size: 1rem; }
  .politix-live p.plx-body { line-height: 1.7; }
}
@media print { .politix-live .breves { display: none; } }