@charset "UTF-8";
/* ============================================================================
   PAGE ARTICLE - design_handoff_page_article, adaptee au theme leger
   Charge par functions.php sur les articles, apres base.css. Markup : single.php (couverture .art-head, corps
   .entry, .post-navigation, .art-related), comments.php. Toutes les regles sont prefixees par body.single-post.
   Sections : 1 mise en page, couverture ; 2 corps (typographie) ; 3 fiche wp-dvd ; 4 (classements et sorties du
   mois : article-extra.css) ; 5 bloc de notes (extension Taqyeem) ; 6 precedent / suivant, articles lies, commentaires ;
   7 mises en avant dans le corps (reperes, supplements, remarque, renvois ; inc/mise-en-avant.php).
   ========================================================================== */

/* ---------- 1. Mise en page et couverture ---------- */
body.single-post { overflow-x: hidden; }
body.single-post .site-body { max-width: none; padding: 0; }

/* Colonne de lecture centree */
body.single-post .art {
  max-width: calc(var(--col-lecture) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding: var(--esp-6) var(--gouttiere) var(--esp-8);
}
body.single-post img,
body.single-post iframe,
body.single-post video,
body.single-post table { max-width: 100%; }
body.single-post .entry,
body.single-post .entry a { overflow-wrap: anywhere; }
body.single-post :focus-visible { outline: var(--focus); outline-offset: 2px; }

body.single-post .art-head { margin: 0 0 var(--esp-6); }
body.single-post .art-head--img {
  position: relative;
  min-height: clamp(340px, 40vw, 480px);
  margin-top: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--c-bleu-fonce);
}
body.single-post .art-head-img { position: absolute; top: 0; left: 0; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
body.single-post .art-head--img .art-head-in {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(80px, 10vw, 120px) 40px 40px;
  background: linear-gradient(to top, rgba(4,42,87,.96) 0%, rgba(4,42,87,.9) 58%, rgba(4,42,87,0) 100%);
  color: #E3EAF4;
  line-height: 1.4;
}
@media (max-width: 600px) {
  body.single-post .art-head--img .art-head-in { padding: 80px 16px 20px; }
}

/* Fil d'Ariane : sur la couverture, blanc sur fond sombre ; sinon gris sur fond blanc. Le dernier element
   repete le titre H1 juste en dessous : masque. */
body.single-post .art-head #crumbs { margin: 0 0 var(--esp-3); font-size: 1rem; line-height: 1.4; color: #5B6B80; }
body.single-post .art-head #crumbs a { color: #5B6B80; text-decoration: underline; text-decoration-color: rgba(91,107,128,.45); text-underline-offset: 3px; }
body.single-post .art-head #crumbs .delimiter { font-size: 0; }
body.single-post .art-head #crumbs .delimiter::before { content: "\203A"; font-size: 1rem; margin-inline: var(--esp-2); color: #A9B6C6; }
body.single-post .art-head #crumbs .current,
body.single-post .art-head #crumbs .delimiter:has(+ .current) { display: none; }
body.single-post .art-head--img #crumbs { color: #C9D7EA; }
body.single-post .art-head--img #crumbs a { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
body.single-post .art-head--img #crumbs .delimiter::before { color: #C9D7EA; }

/* Titre */
body.single-post .art-title {
  margin: 0 0 var(--esp-4);
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: var(--fs-titre);
  line-height: var(--lh-titre);
  letter-spacing: 0;
  color: var(--c-bleu-fonce);
  text-wrap: balance;
}
body.single-post .art-head--img .art-title { color: #fff; }

/* Date et categories */
body.single-post .art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--c-texte-2);
}
body.single-post .art-meta a { color: var(--c-bleu); text-decoration: none; }
body.single-post .art-meta a:hover { text-decoration: underline; }
body.single-post .art-head--img .art-meta { color: #E3EAF4; }
body.single-post .art-head--img .art-meta a { color: #fff; }

body.single-post .art-body { margin: 0; padding: 0; }
body.single-post .entry::after { content: ""; display: table; clear: both; }
body.single-post .edit-link { margin: var(--esp-4) 0 0; font-size: .875rem; }

/* ---------- 2. Corps : typographie ---------- */
body.single-post .entry {
  font-family: var(--f-texte);
  color: var(--c-texte);
}

/* Critique avec fiche : le gabarit empile "Synopsis" (chapo), fiche, contenu dans un <div>.
   En colonne flex, l'ordre voulu est obtenu sans toucher au HTML : fiche d'abord, puis chapo, puis corps. */
body.single-post .entry > div:has(> .fiche) { display: flex; flex-direction: column; }
body.single-post .entry > div:has(> .fiche) > h2.review-box-header { order: -2; }
body.single-post .entry > div:has(> .fiche) > .fiche { order: -1; }

/* Blocs de texte : seulement ceux de premier niveau du contenu, c'est-a-dire les enfants directs de .entry,
   du <div> d'enveloppe de single_new.php (critiques avec fiche) et, pour les paragraphes, du <div> de
   l'extrait. Tout contenu imbrique (anciens articles en <div style>, bloc de notation, widgets)
   garde sa mise en forme : une mesure appliquee a chaque niveau decalait les lignes d'un bloc a l'autre.
   Mesure de lecture ~70 caracteres, centree dans la colonne ; fiche, medias et avis restent pleine colonne. */
body.single-post .entry > :is(p, h2, h3, h4, ul, ol, blockquote),
body.single-post .entry > div:not([class]):not([id]):not([style]) > :is(p, h2, h3, h4, blockquote),
body.single-post .entry > div:not([class]):not([id]):not([style]) > :is(ul, ol):not(.mea-reperes):not(.mea-note),
body.single-post .entry > div:not([class]):not([id]):not([style]) > div:not(.fiche):not(.fix) > p {
  width: 100%;
  max-width: var(--col-texte);
  margin-inline: auto;
  box-sizing: border-box;
  text-align: left;
}

body.single-post .entry > p,
body.single-post .entry > div:not([class]):not([id]):not([style]) > p,
body.single-post .entry > div:not([class]):not([id]):not([style]) > div:not(.fiche):not(.fix) > p,
body.single-post .post-listing .entry > p {
  margin-block: 0 var(--esp-5);
  font-size: var(--fs-corps) !important;
  line-height: var(--lh-corps) !important;
}

/* Chapo : uniquement le champ personnalise "extrait" (paragraphe "Synopsis"/extrait que single_new.php place
   en tete de l'enveloppe) et seulement s'il est court : getSynoExcerpt() (functions.php) pose la classe .chapo
   sous 300 caracteres. Au-dela, l'extrait garde le style du texte courant. Le debut de l'article n'est PAS mis en avant. */
body.single-post .entry > div:not([class]):not([id]):not([style]) > div.chapo:not(.fix):not(.fiche) > p {
  margin-top: 0;
  font-weight: 400;
  color: var(--c-bleu-fonce);
}
body.single-post .post-listing .entry > div:not([class]):not([id]):not([style]) > div.chapo:not(.fix):not(.fiche) > p {
  font-size: var(--fs-chapo) !important;
  line-height: var(--lh-chapo) !important;
}
body.single-post .entry > div:not([class]):not([id]):not([style]) > div.chapo:not(.fix):not(.fiche) > p :is(b, strong) {
  font-weight: 400;
  background: none;
}

/* Intertitres */
body.single-post .entry > h2,
body.single-post .entry > div:not([class]):not([id]):not([style]) > h2 {
  margin-block: var(--esp-7) var(--esp-4);
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-inter);
  letter-spacing: 0;
  color: var(--c-bleu-fonce);
}
body.single-post .entry > p + h2,
body.single-post .entry > div:not([class]):not([id]):not([style]) > p + h2 { margin-top: var(--esp-5); }
body.single-post .entry > h3,
body.single-post .entry > div:not([class]):not([id]):not([style]) > h3 {
  margin-block: var(--esp-6) var(--esp-2);
  font-family: var(--f-titre);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--c-bleu-fonce);
}

/* Liens du texte */
body.single-post .entry > p a,
body.single-post .entry > div:not([class]):not([id]):not([style]) > p a,
body.single-post .entry > div:not([class]):not([id]):not([style]) > div:not(.fiche) > p a,
body.single-post .entry > :is(ul, ol) li a {
  color: var(--c-bleu);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.single-post .entry > p a:hover,
body.single-post .entry > div:not([class]):not([id]):not([style]) > p a:hover,
body.single-post .entry > :is(ul, ol) li a:hover { color: var(--c-bleu-fonce); text-decoration-thickness: 2px; }
body.single-post .entry > p a:visited,
body.single-post .entry > div:not([class]):not([id]):not([style]) > p a:visited { color: #3D3A8F; }

/* Gras : 600, et surlignage discret pour les paragraphes tres charges */
body.single-post .entry > p :is(strong, b),
body.single-post .entry > div:not([class]):not([id]):not([style]) > p :is(strong, b) { font-weight: 600; color: #101C29; }
body.single-post .entry > p:has(:is(strong, b) ~ :is(strong, b) ~ :is(strong, b)) :is(strong, b),
body.single-post .entry > div:not([class]):not([id]):not([style]) > p:has(:is(strong, b) ~ :is(strong, b) ~ :is(strong, b)) :is(strong, b) {
  font-weight: 500;
  background: linear-gradient(transparent 60%, var(--c-surligne) 60%);
}
body.single-post .entry :is(figcaption, .wp-caption-text) :is(strong, b) { font-weight: 500; }

/* Paragraphes vides (<p></p>, <p><br></p>) : masques. Les <p>&nbsp;</p> ne sont pas detectables en CSS. */
body.single-post .entry p:empty,
body.single-post .entry p:has(> br:only-child) { display: none; }

/* Citations : filet haut, pas de bordure gauche */
body.single-post .entry > blockquote,
body.single-post .entry > div:not([class]):not([id]):not([style]) > blockquote {
  max-width: 30em;
  margin-block: var(--esp-6);
  padding: var(--esp-5) 0 0;
  border: 0;
  border-top: 2px solid var(--c-bleu);
  background: none;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.5;
  color: var(--c-bleu-fonce);
}
body.single-post .entry blockquote p { font-size: inherit !important; line-height: inherit !important; color: inherit; max-width: none; margin-inline: 0; }
body.single-post .entry blockquote cite,
body.single-post .entry blockquote footer {
  display: block;
  margin-top: var(--esp-3);
  font-size: 1rem;
  font-style: normal;
  color: var(--c-texte-2);
}

/* Listes */
body.single-post .entry > :is(ul, ol),
body.single-post .entry > div:not([class]):not([id]):not([style]) > :is(ul, ol):not(.mea-reperes):not(.mea-note) { padding-left: 1.25em; margin-block: 0 var(--esp-5); font-size: var(--fs-corps); line-height: var(--lh-corps); }
body.single-post .entry > :is(ul, ol) > li + li,
body.single-post .entry > div:not([class]):not([id]):not([style]) > :is(ul, ol):not(.mea-reperes):not(.mea-note) > li + li { margin-top: var(--esp-2); }
body.single-post .entry > :is(ul, ol) > li::marker,
body.single-post .entry > div:not([class]):not([id]):not([style]) > :is(ul, ol):not(.mea-reperes):not(.mea-note) > li::marker { color: var(--c-bleu); }
body.single-post .entry > ul > li,
body.single-post .entry > div:not([class]):not([id]):not([style]) > ul:not(.mea-reperes):not(.mea-note) > li { list-style: disc; background: none; padding-left: 0; }
/* Une puce par liste (un <ul> par ligne dans certains articles) : listes consecutives rapprochees comme les <li> d'une meme liste */
body.single-post .entry > ul + ul,
body.single-post .entry > div:not([class]):not([id]):not([style]) > ul + ul:not(.mea-reperes):not(.mea-note) { margin-top: calc(var(--esp-2) - var(--esp-5)); }

/* Images, figures, videos */
body.single-post .entry :is(p, figure, .wp-caption) img { border-radius: 0; height: auto; }
/* Images et figures centrees dans la colonne (sauf celles volontairement flottantes a gauche / a droite) */
body.single-post .entry figure:not(.alignleft):not(.alignright),
body.single-post .entry .wp-caption:not(.alignleft):not(.alignright) { max-width: 100%; margin: var(--esp-4) auto var(--esp-7); }
body.single-post .entry img:is(.aligncenter, .alignnone):not(.wp-post-image) { display: block; margin-inline: auto; }
body.single-post .entry .wp-caption img { display: block; margin-inline: auto; }
/* Images flottantes (alignleft / alignright) : jamais plus de 40 % de la largeur du texte, marge laterale de 24 px ;
   sous 600 px plus de flottement, image centree a la largeur de la colonne */
body.single-post .entry :is(img, figure, .wp-caption).alignright { max-width: 40%; height: auto; margin: var(--esp-1) 0 var(--esp-4) var(--esp-5); }
body.single-post .entry :is(img, figure, .wp-caption).alignleft { max-width: 40%; height: auto; margin: var(--esp-1) var(--esp-5) var(--esp-4) 0; }
@media (max-width: 599px) {
  body.single-post .entry :is(img, figure, .wp-caption):is(.alignleft, .alignright) { float: none; display: block; max-width: 100%; margin: var(--esp-4) auto; }
}
body.single-post .entry figcaption,
body.single-post .entry .wp-caption-text,
body.single-post .entry .wp-caption p {
  max-width: var(--col-texte);
  margin: var(--esp-2) auto 0;
  font-size: var(--fs-legende) !important;
  line-height: 1.5 !important;
  font-style: italic;
  font-weight: 400;
  color: var(--c-texte-2);
  text-align: left;
}
/* Videos (YouTube, Vimeo, Dailymotion) : l'iframe prend la largeur de la colonne, au format 16/9 (l'ancien script
   "fitvids" du theme Sahifa faisait ce travail en JavaScript). */
body.single-post .entry iframe[src*="youtube"],
body.single-post .entry iframe[src*="youtu.be"],
body.single-post .entry iframe[src*="vimeo"],
body.single-post .entry iframe[src*="dailymotion"] { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
body.single-post .entry .embed-youtube { display: block; margin-block: var(--esp-5); }
/* Facade YouTube (wpd_youtube_facades, inc/theme.php) : apercu 16/9 et bouton de lecture ; remplacee par le lecteur au clic */
body.single-post .entry .yt-facade { position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
body.single-post .entry .yt-facade-link { position: absolute; inset: 0; display: block; }
body.single-post .entry .yt-facade-link img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; opacity: .92; transition: opacity .15s; }
body.single-post .entry .yt-play { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; }
body.single-post .entry .yt-play-bg { fill: rgba(33, 33, 33, .85); transition: fill .15s; }
body.single-post .entry .yt-facade-link:hover img { opacity: 1; }
body.single-post .entry .yt-facade-link:hover .yt-play-bg,
body.single-post .entry .yt-facade-link:focus-visible .yt-play-bg { fill: #f00; }
body.single-post .entry .yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
/* Le paragraphe qui porte la video n'a pas la mesure du texte : pleine colonne */
body.single-post .entry > p:has(> iframe, > .fluid-width-video-wrapper, > .embed-youtube, > span.embed-youtube),
body.single-post .entry > div:not([class]):not([id]):not([style]) > p:has(> iframe, > .fluid-width-video-wrapper, > .embed-youtube, > span.embed-youtube) { max-width: none; }
body.single-post .entry .fluid-width-video-wrapper { width: 100%; max-width: 100%; }

/* Bloc d'avis du plugin (#review-box, mise en forme dans style.css) : les etoiles de l'en-tete et de la note des
   lecteurs doivent etre a droite (justify-content: space-between). Elles etaient centrees car un 3e element
   vide (<h4></h4> dans la note globale, <div class="taq-clear"> dans la note des lecteurs) occupait la place de droite. */
body.single-post #review-box .review-final-score h4:empty,
body.single-post #review-box .user-rate-wrap .taq-clear { display: none !important; }
/* Le plugin fixe .user-rate a 98 px alors que les etoiles (5 x 24 px) en font 120 : elles debordaient a droite. */
body.single-post #review-box .user-rate { width: max-content !important; }
/* Titre par defaut de la review ("Review Overview", h2 en tete du bloc) : le bandeau bleu nuit sert deja de titre */
body.single-post #review-box > h2.review-box-header { display: none !important; }
/* Pas de note de la redaction (largeur 0 %) : pas de 5 etoiles grises dans le bandeau (le titre et le resume restent).
   Seul le bandeau est concerne : les etoiles de vote des lecteurs vides restent affichees (on clique dessus pour voter). */
body.single-post #review-box .review-final-score .stars-large:has(> span[style*="width:0%"]),
body.single-post #review-box .review-final-score .stars-large:has(> span[style*="width: 0%"]) { display: none !important; }
/* Resume vide (aucun element a l'interieur) : le titre "En resume" disparait avec lui */
body.single-post #review-box .review-short-summary:not(:has(*)) { display: none !important; }

/* Barre de partage (wpd_share_bar, inc/theme.php) : apres le corps de l article, centree */
body.single-post .art-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-2) var(--esp-3); margin: var(--esp-6) 0 0; }
body.single-post .art-share-label { margin-right: var(--esp-2); font-family: var(--f-titre); font-size: .9375rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-2); }
body.single-post .art-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cible);
  height: var(--cible);
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: var(--c-bleu-fonce);
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s;
}
body.single-post .art-share-btn:hover { opacity: .8; }
body.single-post .art-share-btn svg { display: block; width: 32px; height: 32px; }
body.single-post .art-share-btn--facebook { background: #0866FF; }
body.single-post .art-share-btn--bluesky { background: #1185FE; }
body.single-post .art-share-btn--whatsapp { background: #12AF0A; }
body.single-post .art-share-btn--mail { background: #5B6B80; }
/* Dernier bouton : lien (copie) ou, sur telephone, menu de partage de l'appareil */
body.single-post .art-share-copy .art-share-ico--share { display: none; }
body.single-post .art-share-copy.is-native .art-share-ico--share { display: block; }
body.single-post .art-share-copy.is-native .art-share-ico--copy { display: none; }
body.single-post .art-share-btn[hidden] { display: none; }
body.single-post .art-share-msg { min-width: 7.5em; font-size: .9375rem; color: var(--c-texte-2); }
@media (max-width: 599px) {
  body.single-post .art-share { column-gap: var(--esp-2); }
  body.single-post .art-share-label { margin-right: 0; }
  body.single-post .art-share-msg { min-width: 0; flex-basis: 100%; text-align: center; }
  body.single-post .art-share-msg:empty { display: none; }
}

/* ---------- 3. Fiche wp-dvd (markup : inc/legacy.php) ---------- */
body.single-post .entry h2.review-box-header:has(+ .fiche) {
  display: flex;
  align-items: center;
  max-width: none;
  margin: var(--esp-6) 0 var(--esp-4);
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--c-bleu-fonce);
}
body.single-post .review-box-header .fiche-head-ico { display: none; }

body.single-post .fiche {
  --fiche-pad: clamp(16px, 4vw, 32px);
  display: grid;
  grid-template-columns:
    [full-start] var(--fiche-pad)
    [photo-start] clamp(104px, 19.5%, 168px)
    [photo-end] var(--fiche-pad)
    [info-start] minmax(0, 1fr)
    [info-end] var(--fiche-pad) [full-end];
  align-items: start;
  width: 100%;
  margin: 0 0 var(--esp-6);
  background: var(--c-fond);
  border: var(--bord);
  border-radius: var(--rayon);
  box-shadow: none;
  overflow: hidden;
}

body.single-post .fiche-photo-i {
  grid-column: photo-start / photo-end;
  grid-row: 1;
  width: auto;
  margin: var(--fiche-pad) 0;
  padding: 0;
  background: none;
}
body.single-post .fiche-photo-img { width: 100%; padding: 0; margin: 0; background: none; line-height: 0; }
body.single-post .fiche-photo-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 0;
  box-shadow: var(--ombre);
}
/* Fiche sans image exploitable (wpd_fiche_photo_html) : cadre neutre de la taille d'une affiche. */
body.single-post .fiche-photo-ph {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: repeating-linear-gradient(135deg, #E9EEF5 0 6px, #E2E8F1 6px 12px);
  box-shadow: var(--ombre);
}

body.single-post .fiche-info {
  grid-column: info-start / info-end;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--esp-4) var(--esp-5);
  align-content: start;
  margin: var(--fiche-pad) 0;
  padding: 0;
}
body.single-post .fiche-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0; }
body.single-post .fiche-item span.col2 {
  font-family: var(--f-texte);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--c-texte-2);
}
body.single-post .fiche-item span.col1,
body.single-post .fiche-item span a {
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--c-texte);
}
body.single-post .fiche-item span a { color: var(--c-bleu); text-decoration: underline; text-underline-offset: 3px; }
body.single-post .fiche-item span a:hover { color: var(--c-bleu-fonce); }

/* 1er item = titre du film (deja dans le titre de la page) et champ "Type" : masques ;
   "Avec" (3e item quand il existe) en pleine largeur, en fin de grille */
body.single-post .fiche-info .fiche-item:first-child,
body.single-post .fiche-info .fiche-item--hidden-type { display: none; }
body.single-post .fiche-info .fiche-item:nth-child(3) { grid-column: 1 / -1; order: 9; }

/* Ordre : Realisation, Sortie, Duree, puis le reste dans l'ordre d'origine.
   Film : 11 champs fixes, Sortie = 5e (7e depuis la fin), Duree = 6e (6e depuis la fin), "Titre original" 4e les separait.
   DVD / Blu-ray : champs de tete fixes, Sortie DVD/Blu-ray = 4e, Duree = 6e (Sortie cinema, 5e, les separait). */
body.single-post .fiche-info .fiche-item:nth-child(2) { order: -3; }
body.single-post .entry h2.review-box-header:has(.fiche-head-ico--film) + .fiche .fiche-info .fiche-item:nth-last-child(7) { order: -2; }
body.single-post .entry h2.review-box-header:has(.fiche-head-ico--film) + .fiche .fiche-info .fiche-item:nth-last-child(6) { order: -1; }
body.single-post .entry h2.review-box-header:has(.fiche-head-ico--dvd, .fiche-head-ico--bluray) + .fiche .fiche-info .fiche-item:nth-child(4) { order: -2; }
body.single-post .entry h2.review-box-header:has(.fiche-head-ico--dvd, .fiche-head-ico--bluray) + .fiche .fiche-info .fiche-item:nth-child(6) { order: -1; }

/* Champs sans valeur : masques. Duree "Inconnu" et distribution vide : functions.php pose .fiche-item--empty et garde
   l'item dans le DOM (les regles d'ordre ci-dessus comptent les items par position). Tout autre champ dont la valeur
   (.col1) est vide, par ex. genre, annee, nationalite : masque par :has(). */
body.single-post .fiche-info .fiche-item--empty,
body.single-post .fiche-info .fiche-item:has(> span.col1:empty) { display: none; }

/* Essentiel (mis en avant) : realisation, sortie et duree */
body.single-post .fiche-info .fiche-item:nth-child(2) span.col1,
body.single-post .entry h2.review-box-header:has(.fiche-head-ico--film) + .fiche .fiche-info .fiche-item:nth-last-child(7) span.col1,
body.single-post .entry h2.review-box-header:has(.fiche-head-ico--film) + .fiche .fiche-info .fiche-item:nth-last-child(6) span.col1,
body.single-post .entry h2.review-box-header:has(.fiche-head-ico--dvd, .fiche-head-ico--bluray) + .fiche .fiche-info .fiche-item:nth-child(4) span.col1,
body.single-post .entry h2.review-box-header:has(.fiche-head-ico--dvd, .fiche-head-ico--bluray) + .fiche .fiche-info .fiche-item:nth-child(6) span.col1 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-bleu-fonce);
}

/* Avis */
body.single-post .fiche-note {
  grid-column: full-start / full-end;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: var(--c-fond);
  border-top: 3px solid var(--c-bleu);
}
body.single-post .fiche-note--split { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
body.single-post .fiche-note-group {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  justify-content: start;
  align-content: start;
  align-items: center;
  gap: var(--esp-3) var(--esp-6);
  min-width: 0;
  padding: var(--esp-5) var(--fiche-pad);
  background: none;
}
/* Les lignes de note sont "transparentes" : libelle / etoiles / valeur de toutes les lignes tombent dans
   les memes 3 colonnes du groupe, donc alignees d'une ligne a l'autre (comme la maquette) */
body.single-post .fiche-note-row { display: contents; }
body.single-post .fiche-note-group--public { border-left: 1px solid var(--c-filet-2); background: none; }
body.single-post .fiche-note-group-title {
  grid-column: 1 / -1;
  margin: 0 0 var(--esp-1);
  font-family: var(--f-titre);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-bleu-fonce);
}
body.single-post .fiche-note-group--public .fiche-note-group-title {
  font-family: var(--f-texte);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-texte-2);
}
body.single-post .fiche-note-label { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: var(--c-bleu-fonce); }
body.single-post .fiche-note-stars { font-size: 1.75rem; line-height: 1; letter-spacing: 2px; white-space: nowrap; color: var(--c-etoile); }
body.single-post .fiche-note-value { font-size: 1.0625rem; font-weight: 600; color: var(--c-bleu-fonce); font-variant-numeric: tabular-nums; }
/* Avis du public : pas de libelle "Note du public" (le titre du groupe suffit), etoiles puis valeur.
   Le libelle reste lisible par les lecteurs d'ecran (masquage visuel, hors de la grille). */
body.single-post .fiche-note-group--public { grid-template-columns: max-content max-content; column-gap: var(--esp-4); }
body.single-post .fiche-note-group--public .fiche-note-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body.single-post .fiche-note-group--public .fiche-note-stars { font-size: 1.125rem; letter-spacing: 1px; }
body.single-post .fiche-note-group--public .fiche-note-value { font-size: 1.125rem; }

/* Etoiles : pleines bleues, vides pales, demi-etoile bleue a moitie (4,5 = 4 etoiles + moitie) */
body.single-post .fiche-note-stars .star { color: var(--c-etoile); }
body.single-post .fiche-note-stars .star.off { color: var(--c-etoile-vide); }
body.single-post .fiche-note-stars .star.half {
  background: linear-gradient(90deg, var(--c-etoile) 50%, var(--c-etoile-vide) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Synopsis */
body.single-post .fiche-synopsis {
  grid-column: full-start / full-end;
  grid-row: 3;
  padding: var(--esp-5) var(--fiche-pad) var(--esp-6);
  background: var(--c-fond-synopsis);
  border-top: 1px solid var(--c-filet);
}
body.single-post .fiche-synopsis .fiche-synopsis-label,
body.single-post .fiche-synopsis h4 {
  margin: 0 0 var(--esp-2);
  font-family: var(--f-titre);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-bleu-fonce);
}
body.single-post .entry .fiche-synopsis p {
  max-width: none;
  margin: 0;
  font-size: 1.0625rem !important;
  line-height: 1.65 !important;
  color: var(--c-texte);
}

@media (max-width: 620px) {
  body.single-post .fiche-note-group--public { border-left: 0; border-top: 1px solid var(--c-filet-2); }
  body.single-post .fiche-info { grid-template-columns: 1fr; }

  /* Mobile : une seule colonne, la jaquette / l'affiche passe au-dessus des infos (240 px max, centree) */
  body.single-post .fiche {
    grid-template-columns:
      [full-start] var(--fiche-pad)
      [photo-start info-start] minmax(0, 1fr)
      [photo-end info-end] var(--fiche-pad) [full-end];
  }
  body.single-post .fiche-photo-i {
    justify-self: center;
    width: min(100%, 240px);
    margin: var(--fiche-pad) 0 0;
  }
  body.single-post .fiche-info {
    grid-row: 2;
    margin: var(--esp-5) 0 var(--fiche-pad);
  }
  body.single-post .fiche-note { grid-row: 3; }
  body.single-post .fiche-synopsis { grid-row: 4; }

  /* Note du blog : libelle + etoiles + valeur dans 306 px (la valeur "4,0" sortait de l'ecran) */
  body.single-post .fiche-note-group { column-gap: var(--esp-3); }
  body.single-post .fiche-note-stars { font-size: 1.375rem; }
}

/* ---------- 4. Classements et sorties du mois : voir article-extra.css (charge seulement pour ces articles) ---------- */

/* ---------- 5. Bloc de notes (extension Taqyeem : #review-box) ---------- */
/* ============================================================
   I. PAGE ARTICLE - bloc de notation Taqyeem  -  v2
   design_handoff_bloc_review (28/09/2026) - CSS seule, le HTML/JS du
   plugin ne change pas (vote visiteur toujours fonctionnel). Selecteurs
   bases sur la structure standard de Taqyeem et les regles deja presentes
   ici avant cette refonte (#review-box, .review-item h5,
   .review-final-score, .user-rate-wrap) - le code du plugin n'etant pas
   dans le depot, verifier apres deploiement sur une critique DVD ET une
   critique film (voir README.md du handoff : outerHTML de #review-box a
   comparer si un element ne s'affiche pas comme attendu).
   ============================================================ */

/* ---------- Conteneur ---------- */
.review_wrap, .review-wrap {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#review-box {
  display: flex !important;
  flex-direction: column !important;
  margin: 32px 0 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #D9DFE8 !important;
  box-shadow: none !important;
  color: #1A2530 !important;
  overflow: hidden;
}

/* Ordre d'affichage : note globale en tete, puis criteres, resume, vote.
   .review-summary (qui contient score + resume) s'efface pour que ses
   enfants se rangent directement dans le flex. */
#review-box .review-summary {
  display: contents !important;
}
#review-box .review-final-score   { order: 1; }
#review-box .review-item          { order: 2; }
#review-box .review-short-summary { order: 3; }
#review-box .user-rate-wrap       { order: 4; }

/* ---------- Etoiles : forme par masque SVG, couleur par fond ----------
   Le plugin regle la largeur (%) du <span> interieur, y compris au survol
   du vote visiteur : on ne touche qu'a l'apparence. */
#review-box .stars-large,
#review-box .post-large-rate {
  --star: 20px;
  position: relative !important;
  display: inline-block !important;
  flex: none;
  float: none !important;
  width: calc(var(--star) * 5) !important;
  height: var(--star) !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  background: #D2DBE7 !important;
  background-image: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.95 6.1 6.7.9-4.9 4.65 1.2 6.65L12 17.3l-5.95 3.2 1.2-6.65L2.35 9.2l6.7-.9z'/%3E%3C/svg%3E") left center / var(--star) var(--star) repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.95 6.1 6.7.9-4.9 4.65 1.2 6.65L12 17.3l-5.95 3.2 1.2-6.65L2.35 9.2l6.7-.9z'/%3E%3C/svg%3E") left center / var(--star) var(--star) repeat-x;
}

#review-box .stars-large > span,
#review-box .post-large-rate > span {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 100% !important;
  margin: 0 !important;
  background: #1D5FA8 !important;
  background-image: none !important;
  /* width : laissee au plugin (style inline) */
}

/* anciens rendus du plugin (images / icones) neutralises */
#review-box .stars-large img,
#review-box .post-large-rate img,
#review-box .stars-large::before,
#review-box .stars-large > span::before,
#review-box .post-large-rate::before,
#review-box .post-large-rate > span::before { display: none !important; content: none !important; }

/* ---------- 1. Note de la redaction (taq_review_score) ---------- */
#review-box .review-final-score,
#review-box .review-total-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  position: static !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  border: none !important;
  background: #042A57 !important;
  color: #fff !important;
  text-align: left !important;
}

#review-box .review-final-score::before {
  content: "Note de la r\00e9 daction";
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
}

/* score chiffre (mode " points " / " pourcentage " du plugin) */
#review-box .review-final-score h3,
#review-box .review-final-score h4 {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

#review-box .review-final-score .stars-large,
#review-box .review-final-score .post-large-rate {
  --star: 26px;
  background: rgba(255,255,255,.28) !important;
}
#review-box .review-final-score .stars-large > span,
#review-box .review-final-score .post-large-rate > span { background: #fff !important; }

/* ---------- 2. Criteres (taq_review_criteria) ---------- */
#review-box .review-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  margin: 0 !important;
  padding: 12px 20px !important;
  background: #fff !important;
  border: none !important;
  border-bottom: 1px solid #E3E9F1 !important;
  box-shadow: none !important;
}

#review-box.review-box .review-item h5,
#review-box.review-stars .review-item h5,
#review-box.review-bottom .review-item h5,
#review-box .review-item h5 {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: #1A2530 !important;
}

#review-box .review-item .stars-large,
#review-box .review-item .post-large-rate { --star: 18px; }

/* ---------- 3. Resume (taq_review_summary) ---------- */
#review-box .review-short-summary {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 20px 20px 22px !important;
  background: #fff !important;
  border: none !important;
}

#review-box .review-short-summary::before {
  content: "En r\00e9sum\00e9";
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #42536A;
}

#review-box .review-short-summary,
#review-box .review-short-summary p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #1A2530 !important;
  text-wrap: pretty;
}
#review-box .review-short-summary p { margin: 0 !important; }
#review-box .review-short-summary p + p { margin-top: 12px !important; }

/* ---------- 4. Note des lecteurs (widget JS du plugin) ---------- */
#review-box .user-rate-wrap {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 16px;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  background: #F5F8FC !important;
  border: none !important;
  border-top: 1px solid #D9DFE8 !important;
}

#review-box .user-rating-text {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  float: none !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: #1A2530 !important;
}
#review-box .user-rating-text span,
#review-box .user-rating-text small {
  font-size: 15px !important;
  color: #1A2530 !important;
}

/* " User Rating: " remplace visuellement par " Note des lecteurs ".
   Le texte d'origine reste dans le DOM (lecteurs d'ecran : voir README du
   handoff - idealement traduire via les reglages du plugin/Loco Translate
   et retirer ces 2 regles plutot que masquer visuellement). */
#review-box .user-rating-text strong {
  font-size: 0 !important;
  line-height: 0 !important;
}
#review-box .user-rating-text strong::before {
  content: "Note des lecteurs";
  display: block;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #42536A;
}

#review-box .user-rate {
  float: none !important;
  margin: 0 !important;
  cursor: pointer;
}
#review-box .user-rate .stars-large,
#review-box .user-rate .post-large-rate {
  --star: 24px;
  background: #C9D4E2 !important;
}
#review-box .user-rate:hover .stars-large > span,
#review-box .user-rate:hover .post-large-rate > span { background: #042A57 !important; }

.entry .star-rating img, .entry img[src*="star"] {
  max-height: 20px;
  width: auto;
  vertical-align: -3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  #review-box .review-final-score,
  #review-box .review-item,
  #review-box .review-short-summary,
  #review-box .user-rate-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  #review-box .review-final-score .stars-large,
  #review-box .review-final-score .post-large-rate { --star: 22px; }
}

/* ---------- Variante " bandeau clair " (a la place du bleu nuit) ----------
   Fournie par le handoff a titre d'alternative, non appliquee par defaut.
#review-box .review-final-score {
  background: #F5F8FC !important;
  border-left: 3px solid #1D5FA8 !important;
  border-bottom: 1px solid #E3E9F1 !important;
}
#review-box .review-final-score::before { color: #42536A; }
#review-box .review-final-score .stars-large { background: #D2DBE7 !important; }
#review-box .review-final-score .stars-large > span { background: #1D5FA8 !important; }
---------------------------------------------------------------------- */


/* ---------- 6. Precedent / suivant ---------- */
body.single-post .post-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-4);
  margin: var(--esp-6) 0;
}
body.single-post .post-navigation > div {
  padding: var(--esp-4) var(--esp-5);
  border: var(--bord);
  border-radius: var(--rayon);
  background: var(--c-fond);
}
body.single-post .post-navigation > div:hover { border-color: var(--c-bleu); background: var(--c-fond-tech); }
body.single-post .post-navigation .post-next { grid-column: 2; text-align: right; }
/* Case vide (premier / dernier article) : masquee ; l'autre garde sa largeur de demi-colonne */
body.single-post .post-navigation > div:empty { display: none; }
@media (max-width: 599px) {
  body.single-post .post-navigation { grid-template-columns: 1fr; }
  body.single-post .post-navigation .post-next { grid-column: auto; }
}
body.single-post .post-navigation a { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--c-bleu); text-decoration: none; }
body.single-post .post-navigation span { display: block; margin-bottom: var(--esp-1); font-size: 1rem; font-weight: 400; color: var(--c-texte-2); }
body.single-post .post-navigation .post-previous span::before { content: "\2190  "; }
body.single-post .post-navigation .post-next span::after { content: " \2192"; }

/* ---------- Articles lies ---------- */
body.single-post .art-related { margin: var(--esp-7) 0 var(--esp-6); padding-top: var(--esp-5); border-top: var(--bord); }
body.single-post .art-related-title { margin: 0 0 var(--esp-4); font-family: var(--f-titre); font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--c-bleu-fonce); }
body.single-post .art-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--esp-5); }
body.single-post .art-related-item { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; color: var(--c-texte); text-decoration: none; }
body.single-post .art-related-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--rayon); background: #E3E9F1; }
body.single-post .art-related-img img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
body.single-post .art-related-name { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
body.single-post .art-related-item:hover .art-related-name { color: var(--c-bleu); }
body.single-post .art-related-date { font-size: 1rem; color: var(--c-texte-2); }

/* ---------- Commentaires ---------- */
body.single-post .art-comments { margin-top: var(--esp-6); padding-top: var(--esp-6); border-top: var(--bord); }
body.single-post #comments-title,
body.single-post #reply-title { margin: 0 0 var(--esp-4); font-family: var(--f-titre); font-weight: 600; font-size: 1.5rem; line-height: 1.25; color: var(--c-bleu-fonce); }
body.single-post .commentlist,
body.single-post .commentlist .children { margin: 0; padding: 0; list-style: none; }
body.single-post .commentlist .children { margin-left: var(--esp-6); }
body.single-post .commentlist > li { padding: var(--esp-4) 0; border-bottom: var(--bord); }
body.single-post .comment-body { display: grid; grid-template-columns: 48px 1fr; gap: var(--esp-1) var(--esp-4); }
body.single-post .comment-meta { grid-column: 1 / -1; display: contents; }
body.single-post .comment-author { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--esp-3); }
body.single-post .comment-author .avatar { width: 48px; height: 48px; border-radius: 50%; }
body.single-post .comment-author .fn,
body.single-post .comment-author cite { font-size: 1.0625rem; font-weight: 600; font-style: normal; color: var(--c-texte); }
body.single-post .comment-author .fn a { color: inherit; text-decoration: none; }
body.single-post .comment-author .says { display: none; }
body.single-post .comment-metadata { grid-column: 1 / -1; font-size: 1rem; color: var(--c-texte-2); }
body.single-post .comment-metadata a { color: var(--c-texte-2); text-decoration: none; }
body.single-post .comment-content { grid-column: 1 / -1; font-size: var(--fs-corps); line-height: var(--lh-corps); overflow-wrap: anywhere; }
body.single-post .comment-content p { margin: var(--esp-2) 0; }
body.single-post .reply { grid-column: 1 / -1; }
body.single-post .comment-reply-link { display: inline-flex; align-items: center; min-height: var(--cible); font-size: 1rem; color: var(--c-bleu); }
body.single-post .comment-awaiting-moderation { grid-column: 1 / -1; font-style: italic; color: var(--c-texte-2); }
body.single-post .comment-nav { display: flex; justify-content: space-between; margin: 0 0 var(--esp-4); font-size: 1rem; }
/* Formulaire de WordPress, pose sur la page sans cadre */
body.single-post #respond { margin-top: var(--esp-6); }
body.single-post #commentform { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
body.single-post #commentform textarea,
body.single-post #commentform input[type="text"],
body.single-post #commentform input[type="email"],
body.single-post #commentform input[type="url"] {
  box-sizing: border-box;
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--c-champ);
  border-radius: var(--rayon);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
}
body.single-post #commentform textarea:focus,
body.single-post #commentform input:focus { outline: var(--focus); outline-offset: 0; border-color: var(--c-bleu); }
body.single-post #commentform #submit,
body.single-post #commentform input[type="submit"] {
  height: var(--cible);
  padding: 0 var(--esp-5);
  border: 0;
  border-radius: var(--rayon);
  background: var(--c-bleu);
  color: #fff;
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
}
body.single-post #commentform #submit:hover { background: var(--c-bleu-fonce); }
body.single-post #commentform p { margin: 0 0 var(--esp-4); }
body.single-post #commentform label { display: block; margin-bottom: var(--esp-1); font-size: 1rem; font-weight: 600; color: var(--c-texte); }
body.single-post #commentform .required { color: var(--c-bleu); }
body.single-post #commentform .comment-notes { font-size: 1rem; color: var(--c-texte-2); }
/* cases a cocher : "enregistrer mes infos" (WordPress) et "prevenez-moi par e-mail" (module Abonnements de Jetpack) */
body.single-post #commentform .comment-form-cookies-consent,
body.single-post #commentform .comment-subscription-form { display: flex; align-items: flex-start; gap: var(--esp-2); margin-bottom: var(--esp-2); }
body.single-post #commentform .comment-form-cookies-consent input,
body.single-post #commentform .comment-subscription-form input { flex: none; margin: 5px 0 0; }
body.single-post #commentform .comment-form-cookies-consent label,
body.single-post #commentform .comment-subscription-form label { margin: 0; font-weight: 400; color: var(--c-texte-2); }
body.single-post #commentform .form-submit { margin-top: var(--esp-4); }
body.single-post #cancel-comment-reply-link { margin-left: var(--esp-3); font-family: var(--f-texte); font-size: 1rem; font-weight: 400; }

/* ---------- 7. Mises en avant dans le corps (inc/mise-en-avant.php ; maquette : design_handoff_mise_en_avant) ----------
   Le filtre the_content ajoute ces classes et regroupe des blocs ; les articles ne sont pas modifies en base.
   Les regles de la section 2 ne visent que les enfants directs de .entry : les blocs regroupes ont donc leur propre
   typographie ici. Pas de Source Sans 3 dans le theme : Source Serif 4 (var(--f-texte)) a sa place. */

/* 1a. Reperes sous le chapo : ul.mea-reperes (4 puces au plus) */
body.single-post .entry ul.mea-reperes {
  max-width: var(--col-texte);
  margin: var(--esp-5) auto var(--esp-6);
  padding: 0;
  border-top: 1px solid var(--c-filet);
  list-style: none;
  font-size: 1rem;
  line-height: 1.5;
}
body.single-post .entry ul.mea-reperes > li {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 18px;
  border-bottom: 1px solid var(--c-filet);
  list-style: none;
}
body.single-post .entry ul.mea-reperes > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(10px + .75em - 3px);
  width: 6px;
  height: 6px;
  background: var(--c-bleu);
}
body.single-post .entry ul.mea-reperes a,
body.single-post .entry ul.mea-reperes a > :is(strong, b) { font-weight: 600; }
/* Une image flottante a droite (couverture dans un repere ou un bonus) est contenue par son bloc : sinon elle deborde
   dessous et repousse le bloc suivant tres bas (grand vide). */
body.single-post .entry :is(ul.mea-reperes, .mea-bonus, .mea-renvois) { display: flow-root; }
/* Critique avec fiche : le <div> d'enveloppe est une colonne flex (voir plus haut) ; une marge auto y reduit chaque bloc a la
   largeur de son contenu. On lui donne toute la largeur, plafonnee par max-width comme ailleurs. */
body.single-post .entry > div:has(> .fiche) > :is(ul.mea-reperes, ul.mea-note, .mea-bonus-titre, .mea-bonus, .mea-renvois) { width: 100%; box-sizing: border-box; }
/* Jaquette flottante dans un repere ("DVD : 05 Juillet" + affiche) : sous le texte, a gauche, a sa taille ; plus de vide
   entre le texte et l'affiche a droite. */
body.single-post .entry ul.mea-reperes > li img { float: none !important; display: block; max-width: 100%; height: auto; margin: var(--esp-2) 0 var(--esp-1) !important; }
/* Reperes juste apres le chapo (la fiche, placee entre eux dans le HTML, est reordonnee par flex) : 24 px visibles entre
   le chapo (dont le paragraphe garde 24 px de marge basse) et le premier filet, 16 px sous 600 px. */
body.single-post .entry .chapo ~ ul.mea-reperes:first-of-type { margin-top: 0; }
@media (max-width: 599px) {
  body.single-post .entry .chapo ~ ul.mea-reperes:first-of-type { margin-top: calc(var(--esp-4) - var(--esp-5)); }
}
/* Deux blocs mea-* a la suite (reperes puis A noter, ou l'inverse) : un seul filet entre eux, 16 px d'ecart */
body.single-post .entry :is(ul.mea-reperes, ul.mea-note) + :is(ul.mea-reperes, ul.mea-note) { margin-top: calc(var(--esp-4) - var(--esp-6)); border-top: 0; }

/* 2c. Section Supplements : titre a gauche suivi d'un filet, puis un bloc par bonus dans un cadre gris-bleu */
body.single-post .entry .mea-bonus-titre {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  max-width: var(--col-texte);
  margin: var(--esp-7) auto var(--esp-3);
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--c-bleu-fonce);
}
body.single-post .entry .mea-bonus-titre::after { content: ""; flex: 1; height: 2px; background: var(--c-bleu); }
body.single-post .entry .mea-bonus-titre :is(strong, b) { font-weight: inherit; color: inherit; background: none; }

body.single-post .entry .mea-bonus {
  max-width: var(--col-texte);
  margin: 0 auto var(--esp-6);
  padding: 8px var(--esp-5);
  background: #F3F6FA;
  font-size: 1rem;
  line-height: 1.7;
  text-align: left;   /* anciens articles : section dans un <div style="text-align: center"> */
}
body.single-post .entry .mea-bonus > p { margin: var(--esp-3) 0; font-size: 1rem !important; line-height: 1.7 !important; text-align: left; }
/* Un seul trait entre deux bonus (filet plein, 18 px de part et d'autre), qui passe sous une image flottante */
body.single-post .entry .mea-bonus-item { clear: both; padding: 18px 0; border-bottom: 1px solid #DCE3EB; }
body.single-post .entry .mea-bonus-item:last-child { border-bottom: 0; }

/* Titre du bonus : numero, titre (prend la place), pastille de duree calee a droite ; plus de pointilles */
body.single-post .entry .mea-bonus-tete { display: flex; align-items: baseline; gap: var(--esp-4); }
body.single-post .entry .mea-num { flex: none; font-family: var(--f-titre); font-weight: 500; font-size: .875rem; line-height: 1; color: var(--c-bleu); }
body.single-post .entry .mea-bonus-nom { flex: 1 1 auto; min-width: 0; font-family: var(--f-texte); font-weight: 700; font-size: 1.125rem; line-height: 1.35; color: var(--c-texte); }
body.single-post .entry .mea-bonus-nom :is(a, strong, b, em) { font-weight: inherit; }
body.single-post .entry .mea-duree.mea-duree--tete { margin-left: auto; align-self: baseline; }
body.single-post .entry .mea-pointilles { display: none; }   /* pages encore en cache avant la purge */

body.single-post .entry .mea-bonus-corps { padding-left: 30px; font-size: 1rem; line-height: 1.7; }
body.single-post .entry .mea-bonus-corps :is(p, li) { margin: var(--esp-2) 0 0; font-size: 1rem !important; line-height: 1.7 !important; text-align: left !important; color: var(--c-texte); }
body.single-post .entry .mea-bonus-corps :is(ul, ol) { margin: var(--esp-2) 0 0; padding-left: 1.25em; }
body.single-post .entry .mea-bonus-corps :is(strong, b) { font-weight: 600; color: #101C29; }
body.single-post .entry .mea-bonus :is(a) { color: var(--c-bleu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.single-post .entry .mea-bonus a:hover { color: var(--c-bleu-fonce); text-decoration-thickness: 2px; }

/* Images d'un bonus (maquette "Supplements - images", classes posees par inc/mise-en-avant.php, place_media) :
   - .mea-img--large      image seule paysage : pleine largeur, 340 px de haut au plus, fond gris-bleu autour ;
   - .mea-img--flottante  image seule portrait ou carree (ou deja alignee) : 200 px a droite, le texte l'entoure ;
   - .mea-img-grille      deux images consecutives ou plus : grille de 2 colonnes, 220 px de haut, recadrees ;
   legendes 13 px italique gris. Sous 600 px : plus de flottement, pleine largeur, grille de 160 px de haut. */
body.single-post .entry .mea-bonus-figure { max-width: 480px; margin: var(--esp-3) 0; }
body.single-post .entry .mea-bonus-figure :is(img, figure, .wp-caption, a, p) { float: none !important; display: block; width: auto !important; max-width: 100% !important; height: auto; margin: 0 !important; }
body.single-post .entry :is(.mea-bonus-figure, .mea-img-grille) :is(figcaption, .wp-caption-text, .wp-caption p) { max-width: none; margin: 8px 0 0 !important; font-size: 13px !important; line-height: 1.45 !important; font-style: italic; color: #5A6B7D; text-align: left; }

body.single-post .entry .mea-bonus-figure.mea-img--large { max-width: none; margin: 16px 0; }
body.single-post .entry .mea-bonus-figure.mea-img--large :is(figure, .wp-caption, a, p) { width: 100% !important; }
body.single-post .entry .mea-bonus-figure.mea-img--large img { width: 100% !important; max-height: 340px; object-fit: contain; background: #E9EEF5; }

body.single-post .entry .mea-bonus-figure.mea-img--flottante { float: right; width: 200px; max-width: 200px; margin: 4px 0 12px 20px; }
body.single-post .entry .mea-bonus-figure.mea-img--flottante :is(img, figure, .wp-caption, a, p) { width: 100% !important; }
/* image seule paysage de moins de 400 px de large : flottante un peu plus grande, plutot qu'agrandie en pleine largeur */
body.single-post .entry .mea-bonus-figure.mea-img--flottante.mea-img--240 { width: 240px; max-width: 240px; }

/* "figure" dans le selecteur : doit l'emporter sur la regle generale des figures (.entry figure:not(.alignleft)...) */
body.single-post .entry .mea-bonus figure.mea-img-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: none; margin: 16px 0; padding: 0; }
body.single-post .entry .mea-img-grille > :is(a, img) { display: block; min-width: 0; margin: 0 !important; }
body.single-post .entry .mea-img-grille img { display: block; float: none !important; width: 100% !important; max-width: none !important; height: 220px !important; margin: 0 !important; object-fit: cover; object-position: 50% 50%; }
body.single-post .entry .mea-img-grille img.mea-img--portrait { object-position: 50% 25%; }
body.single-post .entry .mea-img-grille > .mea-img--pleine { grid-column: 1 / -1; }
body.single-post .entry .mea-img-grille > figcaption { grid-column: 1 / -1; margin: 0 !important; }

@media (max-width: 599px) {
  body.single-post .entry .mea-bonus { padding: 8px var(--esp-4); }
  body.single-post .entry .mea-bonus-figure:is(.mea-img--large, .mea-img--flottante),
  body.single-post .entry .mea-bonus-figure.mea-img--flottante.mea-img--240 { float: none; width: 100%; max-width: none; margin: 12px 0; }
  /* grille : sans le retrait gauche du bonus (30 px), pour des colonnes plus larges ; legende alignee sur le texte */
  body.single-post .entry .mea-bonus-corps figure.mea-img-grille { margin-left: -30px; width: calc(100% + 30px); }
  body.single-post .entry .mea-bonus-corps .mea-img-grille > figcaption { padding-left: 30px; }
  body.single-post .entry .mea-bonus-figure:is(.mea-img--large, .mea-img--flottante) img { width: 100% !important; max-height: 260px; object-fit: contain; background: #E9EEF5; }
  body.single-post .entry .mea-img-grille img { height: 160px !important; }
}

/* 3a. Remarque isolee : etiquette "A noter" a gauche, texte en italique */
body.single-post .entry ul.mea-note {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--esp-4);
  max-width: var(--col-texte);
  margin: var(--esp-6) auto;
  padding: 14px 0;
  border-top: 1px solid var(--c-filet);
  border-bottom: 1px solid var(--c-filet);
  list-style: none;
}
body.single-post .entry ul.mea-note::before {
  content: "\00c0\20 noter";
  font-family: var(--f-titre);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-bleu);
}
body.single-post .entry ul.mea-note > li { margin: 0; padding: 0; list-style: none; font-size: 1rem; line-height: 1.6; font-style: italic; color: #2A3746; }
body.single-post .entry ul.mea-note :is(strong, b) { font-style: normal; font-weight: 600; }
@media (max-width: 599px) {
  body.single-post .entry ul.mea-note { grid-template-columns: minmax(0, 1fr); gap: var(--esp-1); }
}

/* 4a. Pour aller plus loin : renvois (*) regroupes en bas de l'article ; appel (*) du corps en exposant */
body.single-post .entry .mea-renvois { max-width: var(--col-texte); margin: var(--esp-7) auto 0; padding-top: var(--esp-3); border-top: 2px solid var(--c-bleu-fonce); }
body.single-post .entry .mea-renvois-titre { display: block; margin-bottom: var(--esp-3); font-family: var(--f-titre); font-weight: 500; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-bleu-fonce); }
body.single-post .entry .mea-renvois ul { margin: 0; padding: 0; list-style: none; }
body.single-post .entry .mea-renvois :is(p.mea-renvoi, li) { display: grid; grid-template-columns: 20px minmax(0, 1fr); margin: 0 0 var(--esp-2); padding: 0; list-style: none; font-size: .9375rem !important; line-height: 1.65 !important; text-align: left; color: #2A3746; }
body.single-post .entry .mea-renvoi-marque { font-family: var(--f-texte); font-weight: 700; color: var(--c-bleu); text-decoration: none; }
body.single-post .entry .mea-renvois a { color: var(--c-bleu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 400; }
body.single-post .entry .mea-renvois a.mea-renvoi-marque { font-weight: 700; text-decoration: none; }
body.single-post .entry .mea-renvois a.mea-film { font-style: italic; }
body.single-post .entry sup.mea-appel { font-family: var(--f-texte); font-weight: 700; font-size: .75em; line-height: 0; color: var(--c-bleu); }

/* 5a. Durees en pastille ; gras des liens retire (hors titres de bonus et reperes, qui ont leur regle) */
body.single-post .entry .mea-duree { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--c-surligne); color: var(--c-bleu-fonce); font-family: var(--f-texte); font-weight: 600; font-size: .8125rem; line-height: 1.5; white-space: nowrap; }
body.single-post .entry .mea-duree.mea-duree--tete { flex: none; padding: 1px 9px; background: var(--c-bleu-fonce); color: #fff; }
body.single-post .entry :is(strong, b) > a,
body.single-post .entry a > :is(strong, b) { font-weight: 400; }
body.single-post .entry .mea-bonus-nom :is(a, strong, b) { font-weight: inherit; }
/* Texte justifie dans l'article (style en ligne) : grands trous entre les mots, surtout a cote d'une image ou sur mobile.
   Les text-align:center des images et des videos ne sont pas touches. */
body.single-post .entry :is(p, li, div)[style*="justify"] { text-align: left !important; }