/* ============================================================
   QR VIDEO : système vidéo + page de lecture
   SEO vidéo sept. 2026, revue design
   ------------------------------------------------------------
   Chargé APRÈS style.css, style-v25.css et style-contenu.css,
   donc il peut ajuster l'existant sans modifier ces fichiers.
   Aucune règle n'a été supprimée ailleurs.

   Ce qui est conservé du design précédent :
     - l'en-tête flottant (smiley + menu) et le pied de page
     - la grille de fond discrète du conteneur d'article
     - le motif « fenêtre » (les trois points)
     - les intertitres en monospace (// voir aussi)
     - le vert d'accent, les coins arrondis, la carte de likes

   Ce qui change : une seule largeur de lecture, une échelle
   typographique, un rythme vertical régulier, et des filets
   à la place des blocs gris.
   ============================================================ */


/* Les jetons de design (couleurs, largeurs, rythme) sont définis
   dans style-v26.css, chargé juste avant ce fichier. */


/* ------------------------------------------------------------
   1. LE CADRE VIDÉO (commun au lecteur et aux aperçus)
   ------------------------------------------------------------ */

.qr-video {
    margin: 0;
    padding: 0;
    width: 100%;
}

.qr-video-frame {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--qr-radius);
    background: var(--qr-dark);
}

.qr-video-frame video,
.qr-video-frame img,
.qr-video-frame iframe {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    margin: 0;
    padding: 0;
}

/* Cadre à format imposé : grilles et cartes. */
.qr-video.has-ratio .qr-video-frame {
    aspect-ratio: var(--qr-video-ratio, 9 / 16);
}

.qr-video.has-ratio .qr-video-frame video,
.qr-video.has-ratio .qr-video-frame img {
    height: 100%;
    object-fit: cover;
}

/* Les embeds n'ont pas de taille naturelle : il leur faut un format. */
.qr-video-frame--embed {
    aspect-ratio: var(--qr-video-ratio, 16 / 9);
}

.qr-video-frame--embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.qr-video-frame .player_playpause {
    z-index: 2;
}


/* ------------------------------------------------------------
   2. LE LECTEUR PRINCIPAL
   ------------------------------------------------------------ */

.qr-video--player {
    margin: 0 auto;
}

/* Le cadre porte le format, la vidéo se contente de le remplir sans
   jamais être déformée ni recadrée. Si le format n'est pas connu, on
   a deux bandes noires plutôt qu'une image étirée. */
.qr-video--player .qr-video-frame {
    aspect-ratio: var(--qr-video-ratio, 16 / 9);
    box-shadow: 0 18px 50px -24px rgba(19, 19, 19, 0.45);
    cursor: pointer;
}

.qr-video--player .qr-video-el {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--qr-dark);
}

/* Horizontale : toute la largeur disponible de l'en-tête. */
.qr-video--player.is-horizontal { max-width: 100%; }

/* Verticale : une colonne étroite, plafonnée par la hauteur de
   l'écran pour que la vidéo tienne en entier dans le premier écran.
   C'est précisément ce que Google reproche à une page qui n'est pas
   une page de lecture. */
.qr-video--player.is-vertical { max-width: min(380px, 38vh); }

/* Légende : affichée seulement si elle n'est pas déjà le premier
   paragraphe de l'article (voir qr_video_caption dans le module). */
.qr-video-caption {
    display: block;
    max-width: var(--qr-measure);
    margin: var(--qr-s2) auto 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--qr-ink-2);
    text-align: center;
    text-wrap: pretty;
}

.qr-video-credits {
    display: block;
    margin-top: var(--qr-s1);
    font-family: var(--qr-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--qr-ink-3);
}


/* ------------------------------------------------------------
   3. LES APERÇUS
   ------------------------------------------------------------ */

.qr-video--preview .qr-video-frame {
    cursor: pointer;
    box-shadow: none;
    border: 1px solid var(--qr-line);
}

.qr-video-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.qr-video-link:hover { text-decoration: none; }

.qr-video-thumb {
    display: block;
    width: 100%;
    height: auto;
}

.qr-video-thumb--empty {
    display: block;
    width: 100%;
    aspect-ratio: var(--qr-video-ratio, 16 / 9);
    background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 10px, #222 10px, #222 20px);
}

.qr-video-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 19px;
    line-height: 52px;
    text-align: center;
    pointer-events: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

a:hover .qr-video-badge {
    background: rgba(0, 0, 0, 0.82);
    transform: translate(-50%, -50%) scale(1.06);
}


/* ------------------------------------------------------------
   4. BOUTON SON
   Défini une seule fois, au lieu d'être recopié dans chaque
   template comme avant.
   ------------------------------------------------------------ */

.video-volume-toggle {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    opacity: 0.55;
    transition: opacity 0.25s ease;
}

.video-volume-toggle:hover,
.video-volume-toggle:focus-visible {
    opacity: 1;
    outline: 2px solid var(--qr-accent);
    outline-offset: 2px;
}


/* ============================================================
   5. LA PAGE DE LECTURE
   ============================================================ */

/* Le sommaire collant ne fonctionne pas dans un parent en
   overflow:hidden. overflow:clip découpe sans créer de zone
   de défilement, donc sticky redevient possible. */
body.qr-watch-page .principal-v3_container {
    overflow: clip;
}

.qr-watch {
    padding: 0 20px;
}

/* ---------- 5a. en-tête ---------- */

/* Le bloc d'en-tête a toujours la même largeur, quelle que soit
   l'orientation : le titre et la ligne de méta gardent une largeur
   de lecture confortable, et seul le lecteur change de taille.
   Avant, un titre coincé dans 500px se coupait n'importe où. */
.qr-watch-hero {
    max-width: 780px;
    margin: 0 auto;
    padding-top: var(--qr-s5);
    text-align: center;
}

.qr-watch-hero.is-horizontal { max-width: var(--qr-hero-h); }

.qr-watch-crumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--qr-s1);
    margin-bottom: var(--qr-s2);
    font-family: var(--qr-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--qr-ink-3);
}

.qr-watch-crumb a {
    color: var(--qr-ink-3);
    text-decoration: none;
    transition: color 0.2s ease;
}

.qr-watch-crumb a:hover {
    color: var(--qr-accent);
    text-decoration: none;
}

.qr-watch-title {
    margin: 0 0 var(--qr-s3);
    padding: 0;
    border: 0;
    font-size: clamp(1.7rem, 4.2vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--qr-ink);
    text-wrap: balance;
}

.qr-watch-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--qr-s1) var(--qr-s2);
    margin-top: var(--qr-s3);
    padding-top: var(--qr-s2);
    border-top: 1px solid var(--qr-line);
    font-family: var(--qr-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--qr-ink-3);
}

/* Petite puce entre chaque information, plutôt que des icônes. */
.qr-watch-meta > * + *::before {
    content: "·";
    margin-right: var(--qr-s2);
    color: var(--qr-line);
}

.qr-watch-meta a {
    color: var(--qr-ink-3);
    text-decoration: none;
}

.qr-watch-meta a:hover {
    color: var(--qr-accent);
    text-decoration: none;
}

/* ---------- 5b. corps : colonne de lecture + sommaire en marge ---------- */

/* Trois colonnes : marge / lecture / marge.
   La colonne de lecture est donc centrée sur la page, exactement
   comme l'en-tête au-dessus, et le sommaire se loge dans la marge
   de gauche sans décaler le texte. Avant, la grille « sommaire +
   texte » était centrée dans son ensemble, ce qui poussait le texte
   à droite et cassait l'axe de la page. */
.qr-watch-main {
    display: grid;
    grid-template-columns: 1fr min(100%, var(--qr-measure)) 1fr;
    gap: 0; /* un gap ici s'ajouterait aux 3 colonnes et ferait déborder */
    margin: var(--qr-s5) auto 0;
}

.qr-watch-aside {
    display: none;
    grid-column: 1;
    justify-self: end;
}

.qr-watch-body {
    grid-column: 2;
}

@media (min-width: 1180px) {
    .qr-watch-aside {
        display: block;
        width: 262px;
        padding-right: 60px;
    }
    .qr-watch-aside .qr-toc {
        position: sticky;
        top: 96px;
    }
}

/* Le conteneur de contenu du thème, neutralisé ici : la largeur
   et les marges sont gérées par la grille ci-dessus. */
.qr-watch .qr-watch-body {
    padding: 0;
    margin: 0;
    max-width: none;
    overflow: visible;
}

/* ---------- 5c. typographie du texte ---------- */
/* Avant : 13px dans un conteneur de 1000px. La ligne était trop
   longue pour sa taille, d'où l'impression de déséquilibre. */

.qr-watch .qr-watch-body .content-text {
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.68;
    color: #1f1f1f;
    text-wrap: pretty;
}

.qr-watch .content-text > * {
    max-width: 100%;
}

.qr-watch .content-text p {
    margin: 0 0 1.35em;
    padding: 0;
}

.qr-watch .content-text h2,
.qr-watch .content-text h3,
.qr-watch .content-text h4 {
    padding: 0;
    border: 0;
    color: var(--qr-ink);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.qr-watch .content-text h2 {
    margin: var(--qr-s5) 0 var(--qr-s2);
    font-size: 1.55rem;
    line-height: 1.22;
    font-weight: 700;
}

/* Filet fin au-dessus des sections : sépare sans alourdir. */
.qr-watch .content-text h2::before {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin-bottom: var(--qr-s3);
    background: var(--qr-accent);
}

.qr-watch .content-text h3 {
    margin: var(--qr-s4) 0 var(--qr-s1);
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 600;
}

.qr-watch .content-text h4 {
    margin: var(--qr-s3) 0 var(--qr-s1);
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 600;
}

/* Images, figures et embeds : même largeur que le texte,
   c'est ce qui manquait le plus au rythme de la page. */
.qr-watch .content-text img,
.qr-watch .content-text video,
.qr-watch .content-text iframe {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.qr-watch .content-text figure,
.qr-watch .content-text .wp-block-image,
.qr-watch .content-text .wp-block-embed {
    margin: var(--qr-s4) 0;
}

.qr-watch .content-text figcaption {
    margin-top: var(--qr-s1);
    font-family: var(--qr-mono);
    font-size: 0.72rem;
    color: var(--qr-ink-3);
    text-align: left;
}

.qr-watch .content-text ul,
.qr-watch .content-text ol {
    margin: 0 0 1.35em 1.1em;
    padding: 0;
}

.qr-watch .content-text li {
    list-style-type: disc;
    margin: 0.35em 0;
}

.qr-watch .content-text ol li {
    list-style-type: decimal;
}

.qr-watch .content-text .wp-block-quote {
    margin: var(--qr-s4) 0;
    padding: 0 0 0 var(--qr-s3);
    border: 0;
    border-left: 3px solid var(--qr-accent);
    border-radius: 0;
    background: none;
    font-size: 1.15rem;
    line-height: 1.45;
    color: var(--qr-ink);
}

.qr-watch .content-text .wp-block-quote strong {
    font-size: 1em;
}

.qr-watch .content-text hr,
.qr-watch .content-text .wp-block-separator {
    margin: var(--qr-s5) 0;
    border: 0;
    border-top: 1px solid var(--qr-line);
}

/* ---------- 5d. sommaire ---------- */
/* Avant : un bloc gris pleine largeur posé en travers de la page.
   Maintenant : une liste discrète en marge, collante au scroll. */

.qr-watch .qr-toc {
    margin: 0 0 var(--qr-s4);
    padding: 0 0 0 var(--qr-s2);
    border: 0;
    border-left: 1px solid var(--qr-line);
    border-radius: 0;
    background: none;
}

.qr-watch .qr-toc-title {
    margin: 0 0 var(--qr-s1);
    font-family: var(--qr-mono);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qr-ink-3);
}

.qr-watch .qr-toc ul { margin: 0; padding: 0; list-style: none; }
.qr-watch .qr-toc li { margin: 0; list-style: none; }
.qr-watch .qr-toc li.qr-toc-h3 { padding-left: var(--qr-s2); }

.qr-watch .qr-toc a {
    display: block;
    padding: 5px 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--qr-ink-2);
    text-decoration: none;
    transition: color 0.2s ease;
}

.qr-watch .qr-toc a:hover {
    color: var(--qr-accent);
    text-decoration: none;
}


/* ============================================================
   6. PIED D'ARTICLE
   Avant : chaque bloc avait sa largeur, son fond et son style.
   Maintenant : une largeur, des intertitres identiques, des filets.
   ============================================================ */

.qr-watch-extras {
    display: block;
    /* garde-fou : header-v25.php contient une règle footer{position:sticky} */
    position: static;
    bottom: auto;
    margin-top: var(--qr-s6);
    padding: 0 20px var(--qr-s5);
}

.qr-extras-inner {
    max-width: var(--qr-wide);
    margin: 0 auto;
}

.qr-extras-block {
    padding-top: var(--qr-s4);
    margin-top: var(--qr-s4);
    border-top: 1px solid var(--qr-line);
}

.qr-extras-block:first-child {
    border-top: 0;
    margin-top: 0;
}

.qr-extras-label {
    margin: 0 0 var(--qr-s3);
    font-family: var(--qr-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--qr-ink-3);
    text-align: center;
}

/* ---------- grille de cartes commune ---------- */

/* Largeur plafonnée : avec une seule carte, une grille en 1fr
   l'étirerait sur toute la page. */
.qr-extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
    gap: var(--qr-s3);
    align-items: start;
    justify-content: center;
    padding: 0;
}

.qr-extras-card {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.qr-extras-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.qr-extras-card-link:hover { text-decoration: none; }

.qr-extras-card-title {
    margin: var(--qr-s1) 0 0;
    padding: 0;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--qr-ink);
    text-wrap: pretty;
}

.qr-extras-card-link:hover .qr-extras-card-title {
    color: var(--qr-accent);
}

/* Les anciens titres h3 des aperçus, alignés sur le même style. */
.qr-extras-grid h3,
.qr-video-gallery-item h3 {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    margin: var(--qr-s1) 0 0;
    padding: 0;
    border: 0;
}

/* ---------- galerie des vidéos secondaires ---------- */

.qr-video-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
    gap: var(--qr-s3);
    justify-content: center;
    padding: 0;
}

.qr-video-gallery-item {
    width: auto;
    max-width: none;
    margin: 0;
}

.qr-video-gallery-info {
    font-size: 0.78rem;
    color: var(--qr-ink-3);
}

/* ---------- likes + top 10 ---------- */

.qr-extras-likes .coeur-wrapper {
    margin: 0 auto;
}

.qr-extras-likes .heart-cool {
    max-width: var(--qr-wide);
    margin: var(--qr-s3) auto 0;
}

/* ---------- article précédent ---------- */
/* Avant : une barre grise pleine largeur, contenu collé à droite. */

.qr-extras-prev .previous-post-position-v25_1,
.qr-extras-prev .previous-post-v25_1 {
    position: static;
    width: auto;
    padding: 0;
    background: none;
    display: block;
}

.qr-extras-prev-link {
    display: block;
    width: 220px;
    margin: 0 auto;
    text-decoration: none;
    color: inherit;
}

.qr-extras-prev-link:hover { text-decoration: none; }

.qr-extras-prev-link:hover .qr-extras-card-title {
    color: var(--qr-accent);
}

.qr-extras-prev-link img {
    display: block;
    width: 100%;
    height: auto;
}

.qr-extras-prev-empty {
    padding: 48px 16px;
    background: #f0f0f0;
    text-align: center;
    font-family: var(--qr-mono);
    font-size: 0.75rem;
    color: var(--qr-ink-3);
}

/* ---------- catégories et tags ---------- */

.qr-extras-tags .v3-tag_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--qr-s1);
    padding: 0;
}

.qr-extras-tags .v3-tag_list a {
    padding: 5px 13px;
    border: 1px solid var(--qr-line);
    border-radius: 40px;
    font-family: var(--qr-mono);
    font-size: 0.72rem;
    color: var(--qr-ink-2);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.qr-extras-tags .v3-tag_list a:hover {
    border-color: var(--qr-accent);
    color: var(--qr-accent);
    text-decoration: none;
}


/* ============================================================
   7. MISE EN PAGE CLASSIQUE (articles sans vidéo)
   On garde le style existant, on ne fait que reprendre ici les
   règles qui étaient écrites en dur dans single.php.
   ============================================================ */

.qr-breadcrumb {
    max-width: 900px;
    margin: 20px auto 0;
    padding: 0 20px;
    font-size: 0.85rem;
    color: #666;
}

.qr-breadcrumb a { color: #666; text-decoration: none; }
.qr-breadcrumb a:hover { color: var(--qr-accent); }
.qr-breadcrumb span { margin: 0 4px; }
.qr-breadcrumb-current { color: #222; font-weight: 600; }

.qr-reading-time {
    max-width: 900px;
    margin: 6px auto 0;
    padding: 0 20px;
    font-size: 0.85rem;
    color: #888;
}

/* Sommaire hors page de lecture : version encadrée d'origine. */
.qr-toc {
    max-width: 900px;
    margin: 24px auto;
    padding: 16px 22px;
    border: 1px solid #eee;
    border-radius: 14px;
    background: #fafafa;
}

.qr-toc-title { font-weight: 700; margin: 0 0 8px; font-size: 0.95rem; }
.qr-toc ul { list-style: none; margin: 0; padding: 0; }
.qr-toc li { margin: 4px 0; }
.qr-toc li.qr-toc-h3 { padding-left: 18px; }
.qr-toc a { text-decoration: none; color: #444; font-size: 0.9rem; }
.qr-toc a:hover { color: var(--qr-accent); }

/* Boutons CTA flottants (étaient écrits en dur dans single.php). */
.fixed-cta-buttons {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.cta-button {
    padding: 8px 16px;
    border: 2px solid #222;
    border-radius: 40px;
    background: #fff;
    color: #222;
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition: all 0.3s ease;
}

.cta-button:hover,
.cta-button:focus {
    border-color: var(--qr-accent);
    background: var(--qr-accent);
    color: #fff;
    text-decoration: none;
    outline: none;
}


/* ============================================================
   8. MESSAGE DE DIAGNOSTIC (visible seulement si connecté)
   ============================================================ */

.qr-video-warning {
    max-width: var(--qr-measure);
    margin: var(--qr-s3) auto;
    padding: 10px 14px;
    background: #fff4d6;
    color: #7a5b00;
    border: 1px solid #e8c15a;
    border-radius: 8px;
    font-family: var(--qr-mono);
    font-size: 0.74rem;
    line-height: 1.55;
    text-align: left;
}

.qr-video-warning ul { margin: 6px 0 4px 16px; }
.qr-video-warning li { list-style-type: disc; margin: 2px 0; }


/* ============================================================
   9. MOBILE
   ============================================================ */

@media (max-width: 800px) {

    :root {
        --qr-s4: 32px;
        --qr-s5: 52px;
        --qr-s6: 72px;
    }

    .qr-watch { padding: 0 16px; }

    .qr-watch-hero {
        padding-top: var(--qr-s4);
        max-width: 100%;
    }

    .qr-watch-title {
        font-size: clamp(1.45rem, 6.4vw, 2rem);
    }

    /* Pleine largeur pour les verticales, mais toujours plafonnées
       pour que la vidéo tienne en entier dans le premier écran. */
    .qr-video--player.is-vertical {
        max-width: min(100%, 46vh);
    }

    .qr-watch-main {
        margin-top: var(--qr-s4);
    }

    .qr-watch .qr-watch-body .content-text {
        font-size: 1rem;
        line-height: 1.64;
    }

    .qr-watch .content-text h2 { font-size: 1.35rem; }
    .qr-watch .content-text h3 { font-size: 1.1rem; }

    .qr-watch-extras { padding: 0 16px var(--qr-s4); }

    .qr-extras-grid,
    .qr-video-gallery {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: var(--qr-s2);
    }

    /* Boutons CTA : même comportement qu'avant sur petit écran. */
    .fixed-cta-buttons {
        flex-direction: row;
        bottom: 5px;
        left: 10px;
    }

    .cta-button {
        font-size: 0.88rem;
        padding: 7px 17px;
    }
}