/* ==========================================================================
   ORIGINE STRUCTURES — Gabarit des articles Référence  (v4)

   POURQUOI UNE RÉÉCRITURE
   La v3 s'appuyait sur « body.single-post:has(.article-title) » — 14 fois.
   Si ce sélecteur échoue, pour une raison quelconque, TOUTES les règles de
   largeur tombent d'un coup et le contenu se retrouve borné par le
   conteneur d'Astra. C'est exactement le symptôme observé : une zone de
   contenu d'environ 850 px au lieu des 1020 px prévus.
   La v4 n'utilise plus que « body.single-post », qui ne peut pas échouer.
   Sans risque ici : les seuls articles du site sont les références.

   Elle règle aussi trois défauts constatés :
   · le lien de retour du bas écrit à la verticale, une lettre par ligne ;
   · la photo d'introduction réduite à une vignette ;
   · l'intitulé du lien de retour détaché de sa flèche.

   OÙ LA POSER
   Onglet CSS du snippet du MENU, celui dont le shortcode est dans le
   Header Builder et se charge donc partout. Les classes ciblées
   n'existent que dans les articles Référence : ailleurs, rien ne bouge.
   À accompagner de article-fiche-technique.js, dans l'onglet JS.
   ========================================================================== */

body.single-post {
    --osa-bg:    #efede8;
    --osa-card:  #ffffff;
    --osa-ink:   #111111;
    --osa-muted: #8a8a8a;
    --osa-font:  'Archivo', 'Rubik', -apple-system, 'Segoe UI', sans-serif;
}


/* ==========================================================================
   1. NETTOYAGE DE LA PAGE
   ========================================================================== */

/* Astra affiche son propre titre et la ligne « Par Origine Structures /
   18 août 2026 ». L'article porte déjà son h1 : sans cela, deux h1 sur la
   page, et une date qui n'a pas de sens sur une référence. */
body.single-post .entry-header,
body.single-post .entry-meta,
body.single-post .post-navigation,
body.single-post .ast-single-post-navigation,
body.single-post .ast-navigation-post {
    display: none !important;
}

body.single-post,
body.single-post #content.site-content,
body.single-post .ast-container,
body.single-post #primary,
body.single-post .entry-content,
body.single-post article.post {
    background: var(--osa-bg) !important;
}

/* LE POINT DÉCISIF : rendre au contenu toute la largeur disponible à
   droite du menu. C'est .section--content qui borne ensuite, pas Astra. */
body.single-post .ast-container,
body.single-post #primary,
body.single-post .site-main,
body.single-post article.post,
body.single-post .entry-content,
body.single-post .entry-content > * {
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
}
body.single-post article.post {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* Pas de colonne latérale sur ces articles. */
body.single-post #secondary {
    display: none !important;
}


/* ==========================================================================
   2. LARGEUR DE COMPOSITION
   ========================================================================== */

body.single-post .section--content,
body.single-post .entry-content > .wp-block-buttons.link-style-return-wrap {
    width: 100% !important;
    max-width: 1020px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
    box-sizing: border-box !important;
}

/* --- Paragraphe d'introduction ajouté au SEO ---
   Ce texte a été inséré comme <p class="wp-block-paragraph"> DIRECTEMENT
   entre .section--header et .section--intro, hors de tout conteneur
   .section--content. Sans largeur propre, il hérite de celle
   d'.entry-content, jamais bornée : d'où le texte filant sur toute la
   largeur de la page, jusque sous le menu latéral et hors champ à droite.
   On lui applique donc exactement le même retrait et la même largeur
   que .section--content, pour qu'il s'aligne sur le titre et le reste
   du contenu plutôt que de s'étirer sur toute la page. */
body.single-post .entry-content > p.wp-block-paragraph:first-of-type {
    width: 100% !important;
    max-width: 1020px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
    box-sizing: border-box !important;
    font-family: var(--osa-font);
    font-size: .95rem;
    line-height: 1.55;
    color: var(--osa-ink);
}

/* Le lien du haut est DANS .section--header, qui porte déjà les 60 px :
   il ne doit pas les appliquer une seconde fois. C'est ce doublon qui le
   décalait de 73 px par rapport au titre. */
body.single-post .section--content .wp-block-buttons.link-style-return-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}

/* WordPress ajoute aux blocs « groupe » une classe de mise en page qui
   borne ET CENTRE leurs enfants. Sans cette règle, le titre et le lien de
   retour partaient plusieurs centaines de pixels à droite des colonnes. */
body.single-post .section--content > * {
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ==========================================================================
   3. LIENS « RETOUR AUX RÉFÉRENCES »
   Astra en fait un gros bouton noir ; WordPress les met en disposition
   flexible, ce qui écrasait celui du bas à la largeur d'une lettre.
   Le white-space:nowrap ci-dessous rend ce défaut impossible, quelle que
   soit la largeur que le conteneur finit par prendre.
   ========================================================================== */

body.single-post .link-style-return-wrap {
    display: block !important;
    text-align: left !important;
    gap: 0 !important;
    margin: 0 0 10px 0 !important;
}
body.single-post .link-style-return-wrap .wp-block-button,
body.single-post .btn-style.link-style-return {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    margin: 0 !important;
}
body.single-post .link-style-return-wrap .wp-block-button__link {
    display: inline-block !important;
    position: relative;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;      /* jamais de retour à la ligne */
    text-align: left !important;
    background: none !important;
    background-color: transparent !important;
    color: var(--osa-ink) !important;
    font-family: var(--osa-font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    line-height: 1.2 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.single-post .link-style-return-wrap .wp-block-button__link::before {
    /* Flèche + deux espaces insécables, dans le flux : le lien commence
       donc exactement au bord gauche du titre. */
    content: "\2190\00a0\00a0";
    position: static;
}
body.single-post .link-style-return-wrap .wp-block-button__link:hover {
    text-decoration: underline !important;
}
body.single-post .link-style-return-wrap .wp-block-button__link:focus-visible {
    outline: 2px solid var(--osa-ink);
    outline-offset: 3px;
}

/* Le lien du bas prend un peu d'air. */
body.single-post .wp-block-buttons.link-style-return-wrap:last-child {
    margin-top: 30px !important;
    margin-bottom: 50px !important;
}


/* ==========================================================================
   4. EN-TÊTE D'ARTICLE
   ========================================================================== */

/* Écarts resserrés : WordPress ajoute de lui-même une marge entre blocs,
   qui s'additionnait aux nôtres et creusait la page. On fixe donc chaque
   écart explicitement plutôt que de les laisser se cumuler. */
body.single-post .entry-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body.single-post .section--header {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Aucun écart hérité entre les enfants du groupe d'en-tête. */
body.single-post .section--header > * {
    margin-top: 0 !important;
}
body.single-post .section--header > .wp-block-buttons {
    margin-bottom: 4px !important;
}

body.single-post .article-title {
    font-family: var(--osa-font) !important;
    font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
    font-weight: 800 !important;
    line-height: .98 !important;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: var(--osa-ink) !important;
    margin: 0 0 14px 0 !important;
}


/* ==========================================================================
   5. INTRODUCTION : fiche technique + photo
   En GRILLE et non en flex. Le flex calculait la largeur de la colonne de
   droite d'après son contenu — une image en largeur 100 %, donc une
   référence circulaire qui la réduisait à une vignette. Une grille fixe
   les deux colonnes indépendamment de leur contenu.
   ========================================================================== */

body.single-post .section--intro.wp-block-columns {
    display: grid !important;
    grid-template-columns: 32% 1fr;
    gap: 61px;
    align-items: start;
    margin: 0 0 40px 0 !important;
}
body.single-post .section--intro > .wp-block-column {
    width: auto !important;
    max-width: none !important;
    -ms-flex: none !important;
    flex: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Chapô --- */
body.single-post .infos--excerpt {
    font-family: var(--osa-font);
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--osa-ink);
    margin: 0 0 20px 0 !important;
}

/* --- Intitulé au-dessus de la carte --- */
body.single-post .infos--bref {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.single-post .infos--bref .h3 {
    display: block;
    font-family: var(--osa-font);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--osa-ink);
    margin: 0 0 12px 0;
}

/* --- La carte blanche ---
   Pas de flex : le balisage alterne <span> puis valeur en texte libre ;
   en flex, l'écart s'appliquerait aussi entre un intitulé et sa valeur. */
body.single-post .infos--bref_infos {
    background: var(--osa-card);
    padding: 24px 22px;
    font-family: var(--osa-font);
    font-size: .85rem;
    line-height: 1.35;
    color: var(--osa-ink);
}
body.single-post .infos--bref_infos span {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--osa-muted);
    margin: 14px 0 2px 0;
}
body.single-post .infos--bref_infos span:first-child { margin-top: 0; }
body.single-post .infos--bref_infos span:empty { display: none; }

/* --- Photo de droite ---
   WordPress donne aux figures un affichage « table » qui les réduit à la
   largeur de leur contenu : d'où la vignette. On force le bloc. */
body.single-post .section--intro .infos--image,
body.single-post .section--intro .wp-block-image {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
body.single-post .section--intro .infos--image img {
    display: block;
    width: 100% !important;
    height: auto;
    border-radius: 0;
}


/* ==========================================================================
   6. CORPS D'ARTICLE
   ========================================================================== */

body.single-post .section--body {
    padding-top: 0 !important;
    padding-bottom: 20px !important;
}

/* Gutenberg ne pose AUCUNE classe sur les paragraphes : cibler
   « .wp-block-paragraph » ne fonctionnait jamais. */
body.single-post .section--body > p {
    font-family: var(--osa-font);
    font-size: .95rem;
    line-height: 1.55;
    color: var(--osa-ink);
    margin: 0 0 1.2em 0;
}
body.single-post .section--body > p:last-child { margin-bottom: 0; }

body.single-post .section--body .wp-block-image,
body.single-post .section--body .wp-block-gallery {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 24px 0 0 0 !important;
}
body.single-post .section--body .wp-block-image img {
    display: block;
    width: 100% !important;
    height: auto;
    border-radius: 0;
}
body.single-post .section--body .gallery-duo {
    display: flex !important;
    gap: 16px;
}
body.single-post .section--body .gallery-duo img { border-radius: 0; }


/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 1024px) {
    body.single-post .section--content,
    body.single-post .wp-block-buttons.link-style-return-wrap {
        max-width: none !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    /* ORDRE EN RESPONSIVE : la photo d'abord, la fiche technique
       ensuite, puis le corps de l'article. En grille, il suffit de
       remonter la colonne de droite d'un cran. */
    body.single-post .section--intro.wp-block-columns {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 30px !important;
    }
    body.single-post .section--intro > .wp-block-column.gallery {
        order: -1;
    }
    body.single-post .section--intro > .wp-block-column.infos {
        order: 0;
    }
}

@media screen and (max-width: 600px) {
    body.single-post .section--content,
    body.single-post .wp-block-buttons.link-style-return-wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    body.single-post .section--header { padding-top: 24px !important; }
    body.single-post .article-title { margin-bottom: 24px !important; }
    body.single-post .section--body .gallery-duo { flex-direction: column; }
}

/* Garde-fou anti-débordement, limité aux médias : appliqué à « * », il
   écraserait les largeurs de grille. */
body.single-post .section--content img,
body.single-post .section--content svg { max-width: 100%; }


/* ==========================================================================
   8. VISIONNEUSE D'IMAGES
   Accompagne article-lightbox.js. La fenêtre est créée au premier clic,
   pas au chargement : rien ne pèse sur la page tant qu'elle n'est pas
   ouverte.
   ========================================================================== */

.os-visio {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 100000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 70px 80px;
    background: rgba(0, 0, 0, .92);
}
.os-visio[hidden] { display: none !important; }

.os-visio-scene {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.os-visio-scene img {
    display: block;
    max-width: 100%;
    max-height: 84vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* --- Boutons : croix et flèches --- */
.os-visio button {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease;
}
.os-visio button:hover { background: rgba(255, 255, 255, .28); }
.os-visio button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.os-visio button svg {
    width: 22px;
    height: 22px;
    display: block;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.os-visio-fermer { top: 18px; right: 18px; }
.os-visio-prec   { left: 18px;  top: 50%; margin-top: -24px; }
.os-visio-suiv   { right: 18px; top: 50%; margin-top: -24px; }

.os-visio-compteur {
    position: absolute;
    left: 0; right: 0; bottom: 22px;
    margin: 0;
    text-align: center;
    font-family: 'Archivo', 'Rubik', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .8);
}

/* --- Responsive : les flèches descendent en bas, hors de l'image --- */
@media screen and (max-width: 768px) {
    .os-visio { padding: 60px 12px 90px 12px; }
    .os-visio-scene img { max-height: 70vh; }
    .os-visio button { width: 44px; height: 44px; }
    .os-visio-fermer { top: 12px; right: 12px; }
    .os-visio-prec { left: 22%;  top: auto; bottom: 18px; margin-top: 0; }
    .os-visio-suiv { right: 22%; top: auto; bottom: 18px; margin-top: 0; }
    .os-visio-compteur { bottom: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .os-visio button { transition: none !important; }
}