/*
Theme Name:  PMG - V2
Template: 	 hestia
Theme URI:	 https://wordpress.org/themes/hestia/
Author:		 ChildThemeWP
Author URI:	 https://childthemewp.com
Version:	 1.0.0
License:	 GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:    	 opensource     
Text Domain: pmgv2
*/

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
/* @import url('style_espace_admin.css'); */
@import url('editor-style.css');


:root {
    --couleur-1: #009FE3; /* bleu */
    --couleur-2: #707070; /* gris foncé */
    --couleur-3: #F4F2F2; /* beige */
    --couleur-4: #E0F3FC; /* bleu tramé */
    --couleur-5: #E4231D; /* rouge */

    --font-a : Arial, Helvetica, sans-serif;
    
    --wd-timeline-bubble-height: 100px;

    --cornerRad: 4px;
}
/*
body {
  background-color: var(--couleur-principale);
}
*/


/* ==========================================================================
Généralité
========================================================================== */

html,
body.page-template,
body.wp-singular,
.page-template ul,
.page-wp-singular ul {
    font-family: var(--font-a);
    font-size: 10px;
    color: #000;
}

@media (min-width: 1280px) {
    .container {
        width: 1240px;
    }
}

@media (max-width: 768px) {
    .alignright {
        float: none !important;
        display: block;
    }
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* ==========================================================================
   Entête 
========================================================================== */

.navbar {
    box-shadow: none !important;
}

.navbar-default {
    background-color: #fff;
    border-color: #BFBFBF;
}

.navbar .navbar-header .navbar-brand img {
    width: auto;
    max-height: 155px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.navbar a {
    font-size: 30px;
}

.navbar .navbar-nav > li > a {
    text-transform: none;
}

@media (max-width: 768px) {
    .navbar a {
        font-size: 24px;
    }
    .navbar .dropdown-menu li > a {
        font-size: 15px;
    }
    .navbar .navbar-nav .dropdown .dropdown-menu li a {
        margin: 0;
        padding: 8px 0 8px 30px;
    }
    .navbar .navbar-nav .dropdown a .caret {
        border: 0px solid #555;
    }
}

/* ==========================================================================
   Menu principal — desktop (≥ 769px, breakpoint Hestia)
   Sous-menu noir 20px sous le menu, étiré jusqu'au bord droit
========================================================================== */

@media (min-width: 769px) {

    .navbar .navbar-nav > li {
        margin-right: 74px;
    }

    .navbar .navbar-nav > li:last-child {
        margin-right: 0;
    }

    /* Liens de 1er niveau : Arial 30px noir */
    .navbar .navbar-nav > li > a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 30px;
        font-weight: 400;
        color: #000;
        padding: 15px 5px;
    }

    .navbar .navbar-nav > li > a:hover,
    .navbar .navbar-nav > li > a:focus,
    .navbar .navbar-nav > li:hover > a,
    .navbar .navbar-nav > li.current-menu-item > a,
    .navbar .navbar-nav > li.current-menu-ancestor > a {
        color: var(--couleur-1);
        background-color: transparent;
    }

    /* Pas de fond animé Hestia ni de chevron sur desktop */
    .navbar .navbar-nav > li:not(.btn) > a:before {
        display: none;
    }

    .navbar .navbar-nav > li > a .caret-wrap {
        display: none;
    }

    /* Pont invisible entre le lien et le sous-menu,
       pour que le survol ne se perde pas */
    .navbar .navbar-nav > li.dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 20px;
    }

    /* Sous-menu */
    .navbar .navbar-nav > li > .dropdown-menu {
        top: calc(100% + 20px);  /* 20px sous le menu principal */
        left: 0;
        min-width: 0;
        margin-top: 0;
        padding: 20px 0;
        border-radius: 0;
        background-color: #1e1e1e;
        /* Étire le fond jusqu'au bord droit de l'écran sans créer de scroll horizontal */
        box-shadow: 0 0 0 100vw #1e1e1e;
        clip-path: inset(0 -100vw 0 0);
    }

    .navbar .navbar-nav > li.dropdown:hover > .dropdown-menu,
    .navbar .navbar-nav > li.dropdown.open > .dropdown-menu {
        margin-top: 0;
    }

    .navbar .navbar-nav > li .dropdown-menu li > a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        line-height: 1.2;
        color: #fff;
        margin: 0;
        padding: 8px 28px;
        border-radius: 0;
        white-space: nowrap;
    }

    .navbar .navbar-nav > li .dropdown-menu li:hover > a,
    .navbar .navbar-nav > li .dropdown-menu li > a:focus,
    .navbar .navbar-nav > li .dropdown-menu li.current-menu-item > a {
        color: var(--couleur-1);
        font-style: normal;
        background-color: transparent;
    }
}

/* Écrans intermédiaires : on resserre pour garder le menu sur une ligne */
@media (min-width: 769px) and (max-width: 1199px) {
    .navbar .navbar-nav {
        flex-wrap: nowrap;
    }

    .navbar .navbar-nav > li {
        margin-right: 30px;
    }

    .navbar .navbar-nav > li > a {
        font-size: 22px;
    }
}


/* ==========================================================================
   En-tête & menu — mobile (≤ 768px, breakpoint Hestia)
   Hauteur de l'en-tête = logo (100) + marges (2 × 20) + padding du conteneur Hestia (2 × 10)
   → le panneau du menu s'ouvre juste en dessous, sans recouvrir le bouton.
========================================================================== */

@media (max-width: 768px) {

    :root {
        --pmg-entete-mobile: 160px; /* à ajuster si la hauteur réelle de l'en-tête diffère */
    }

    .navbar .container .navbar-header {
        align-items: center;
    }

    .navbar .navbar-header .navbar-brand {
        padding-left: 0;
        margin-left: 20px;
    }

    .navbar .navbar-header .navbar-brand img {
        max-height: 100px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Panneau du menu ouvert : sous l'en-tête, et non plus à 70px du haut */
    .navbar.navbar-fixed-top .navbar-collapse,
    .navbar.navbar-fixed-top.header-with-topbar:not(.navbar-scroll-point) .navbar-collapse {
        margin-top: var(--pmg-entete-mobile);
        max-height: calc(100% - var(--pmg-entete-mobile));
    }

    /* Barre d'administration WordPress (connecté) : 46px sur mobile */
    .admin-bar .navbar.navbar-fixed-top .navbar-collapse {
        margin-top: calc(var(--pmg-entete-mobile) + 46px);
        max-height: calc(100% - var(--pmg-entete-mobile) - 46px);
    }
}



/* ==========================================================================
   Généralité 
========================================================================== */


.wp-post-image.image-in-page {
    display: none;
}


/* ==========================================================================
   Accueil — bannière
========================================================================== */

.pmg-banniere {
    background-color: var(--couleur-1);
    color: #fff;
    text-align: center;
    padding: 3.5rem 0 3.5rem;
}

.pmg-banniere__contenu {
    max-width: 85rem;
    margin: 0 auto;
}

/* Titre */
.pmg-banniere h1,
.pmg-banniere h2 {
    color: #fff;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(3.6rem, 6vw, 7.6rem);
    line-height: 1.1;
    margin: 0 0 1.5rem;
}

/* Texte */
.pmg-banniere p {
    color: #fff;
    font-size: clamp(1.8rem, 2vw, 2.6rem);
    line-height: 1.4;
    margin: 0 0 1.5rem;
}

/* Bouton (bloc Boutons de Gutenberg ou simple lien) */
.pmg-banniere .wp-block-buttons,
.pmg-banniere a {
    justify-content: center;
    margin-top: 3rem;
}

.pmg-banniere .wp-block-button__link,
.pmg-banniere p > a:only-child {
    display: inline-block;
    background: transparent;
    color: #000;
    font-size: clamp(1.8rem, 2vw, 2.6rem);
    line-height: 1.2;
    text-decoration: none;
    padding: 1.4rem 2.4rem;
    border: 1px solid #fff;
    border-radius: 0;
    outline: 1px solid #fff;   /* second filet = effet double bordure */
    outline-offset: 4px;
    transition: background-color .2s, color .2s;
}

.pmg-banniere .wp-block-button__link:hover,
.pmg-banniere .wp-block-button__link:focus,
.pmg-banniere p > a:only-child:hover,
.pmg-banniere p > a:only-child:focus {
    background-color: #fff;
    color: var(--couleur-1);
}

@media (max-width: 767px) {
    .pmg-banniere {
        padding: 4rem 0;
    }
    .pmg-banniere .wp-block-buttons {
        margin-top: 3rem;
    }
}



/* ==========================================================================
   Accueil — romans primés (carrousel)
========================================================================== */

body {
    overflow-x: clip; /* évite la barre de défilement horizontale due à la frise en 100vw */
}

.pmg-romans {
    padding: 6rem 0 2rem;
    background: #fff;
}

/* Grille sur un div interne : le .container Bootstrap a des ::before/::after (clearfix)
   qui deviendraient des cellules de grille */
.pmg-romans__grille {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: start;
}

.pmg-romans .pmg-romans__titre {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(3.6rem, 6vw, 7.6rem);
    line-height: 1;
    color: #000;
    text-align: left;
    margin: 0;
}

/* --- Carrousel --- */

.pmg-carrousel {
    position: relative;
}

.pmg-carrousel__slides {
    display: grid;
}

.pmg-carrousel__slide {
    grid-area: 1 / 1;               /* toutes les slides superposées */
    display: grid;
    grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s;
}

.pmg-carrousel__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.pmg-carrousel__couverture {
    display: block;
}

.pmg-carrousel__couverture img {
    display: block;
    width: 100%;
    height: auto;
}

.pmg-carrousel__sans-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2 / 3;
    padding: 2rem;
    background: var(--couleur-3);
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    text-align: center;
}

.pmg-romans .pmg-carrousel__annee {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(5rem, 8vw, 11rem);
    line-height: 1;
    white-space: nowrap;
    color: var(--couleur-5);
    text-align: center;
    margin: 0 0 12rem;              /* laisse la place aux flèches dessous */
}

/* Flèches : positionnées dans la colonne de l'année */
.pmg-carrousel__nav {
    position: absolute;
    left: calc(32rem + 3rem);
    right: 0;
    top: calc(50% + 4rem);
    display: flex;
    justify-content: center;
    gap: 4rem;
}

/* Neutralise les styles de bouton de Hestia (fond, ombre) dans tous les états */
.pmg-romans .pmg-carrousel__fleche,
.pmg-romans .pmg-carrousel__fleche:hover,
.pmg-romans .pmg-carrousel__fleche:focus,
.pmg-romans .pmg-carrousel__fleche:focus-visible,
.pmg-romans .pmg-carrousel__fleche:active {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
    margin: 0;
    min-width: 0;
    padding: .5rem;
    line-height: 0;
    cursor: pointer;
}

.pmg-romans .pmg-carrousel__fleche {
    color: #000 !important;
    transition: color .2s, transform .2s;
}

.pmg-carrousel__fleche svg {
    display: block;
    width: 5.2rem;
    height: auto;
}

.pmg-carrousel__fleche svg path {
    fill: currentColor;
}

.pmg-carrousel__fleche--next svg {
    transform: scaleX(-1);          /* même SVG, en miroir */
}

/* Survol : flèche bleue, sans fond */
.pmg-romans .pmg-carrousel__fleche:hover,
.pmg-romans .pmg-carrousel__fleche:focus-visible {
    color: var(--couleur-1) !important;
}

.pmg-romans .pmg-carrousel__fleche--prev:hover { transform: translateX(-3px); }
.pmg-romans .pmg-carrousel__fleche--next:hover { transform: translateX(3px); }

/* Clic souris : pas de cadre ; clavier : contour bleu pour l'accessibilité */
.pmg-romans .pmg-carrousel__fleche:focus {
    outline: none;
}
.pmg-romans .pmg-carrousel__fleche:focus-visible {
    outline: 2px solid var(--couleur-1);
    outline-offset: 2px;
}

/* --- Frise bleue pleine largeur --- */

.pmg-frise {
    display: flex;
    align-items: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 4rem;
}

.pmg-frise__trait {
    flex: 0 0 46%;
    height: 5px;
    background: var(--couleur-1);
}

.pmg-frise__point {
    flex: 0 0 auto;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--couleur-1);
    margin: 0 .6rem 0 0;
}

.pmg-frise__lignes {
    flex: 1 1 auto;
    height: 17px;                   /* 3 filets de 3px séparés de 4px */
    background: repeating-linear-gradient(
        to bottom,
        var(--couleur-1) 0 3px,
        transparent 3px 7px
    );
}

/* --- Responsive --- */

@media (max-width: 991px) {
    .pmg-romans__grille {
        grid-template-columns: 1fr;
    }
    .pmg-romans .pmg-romans__titre {
        text-align: center;
    }
}

@media (max-width: 599px) {
    .pmg-romans {
        padding: 5rem 0 4rem;
    }
    .pmg-carrousel__slide {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 2rem;
    }
    .pmg-carrousel__couverture {
        max-width: 26rem;
    }
    .pmg-romans .pmg-carrousel__annee {
        margin: 0;
    }
    .pmg-carrousel__nav {
        position: static;
        margin-top: 2rem;
    }
    .pmg-frise {
        margin-top: 4rem;
    }
    .pmg-frise__trait {
        flex-basis: 30%;
    }
}



/* ==========================================================================
   Accueil — témoignages
========================================================================== */

.pmg-temoignages {
    padding: 3rem 0 3rem;
    background: #fff;
}

.pmg-temoignages .pmg-temoignages__titre {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(3.6rem, 6vw, 7.6rem);
    line-height: 1.1;
    color: #000;
    text-align: center;
    margin: 0 0 5rem;
}

/* Grille sur un div interne (le .container Bootstrap a un clearfix en ::before/::after) */
.pmg-temoignages__grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6rem 11rem;
    padding: 0 3rem;
}

.pmg-temoignage {
    margin: 0;
    max-width: 34rem;
}

.pmg-temoignage__picto {
    display: block;
    width: 7rem;
    height: auto;
    color: #000;
    margin: 0 0 2.6rem;
}

.pmg-temoignages .pmg-temoignage__texte {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    line-height: 1.5;
    color: var(--couleur-1);
}

.pmg-temoignages .pmg-temoignage__texte p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0 0 1em;
}

.pmg-temoignages .pmg-temoignage__texte p:last-child {
    margin-bottom: 0;
}

.pmg-temoignage__auteur {
    margin: 2.4rem 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.15;
    color: #000;
}

@media (max-width: 991px) {
    .pmg-temoignages__grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6rem;
        padding: 0;
    }
}

@media (max-width: 599px) {
    .pmg-temoignages {
        padding: 5rem 0;
    }
    .pmg-temoignages .pmg-temoignages__titre {
        margin-bottom: 4rem;
    }
    .pmg-temoignages__grille {
        grid-template-columns: 1fr;
        gap: 5rem;
    }
    .pmg-temoignage {
        max-width: none;
    }
}



/* ==========================================================================
   Pages intérieures (gabarit par défaut, hors accueil)
   Titre H1 à gauche, contenu en retrait
========================================================================== */

.pmg-page {
    --pmg-retrait: 16rem;
    padding: 6rem 0 8rem;
}

.blog-post .pmg-page .pmg-page__titre {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(3.6rem, 6vw, 7.6rem);
    line-height: 1.1;
    color: #000;
    text-align: left;
    margin: 2rem 0 8rem !important;
}

.pmg-page__contenu {
    padding-left: var(--pmg-retrait);
    padding-right: var(--pmg-retrait);
}

/* Texte courant */
.blog-post .pmg-page .pmg-page__contenu p,
.blog-post .pmg-page .pmg-page__contenu li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
    line-height: 1.55;
    color: #000;
}

/* Intertitres */
.blog-post .pmg-page .pmg-page__contenu h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 1.2;
    color: #000;
    margin: 6rem 0 2.4rem !important;
}

.blog-post .pmg-page .pmg-page__contenu > h2:first-child {
    margin-top: 0;
}

/* Chapô (style de bloc Paragraphe "Chapô") */
.blog-post .pmg-page .pmg-page__contenu p.is-style-chapo,
p.is-style-chapo {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.2;
    color: var(--couleur-1);
    margin: 0 0 6rem;
}

@media (max-width: 991px) {
    .pmg-page {
        --pmg-retrait: 6rem;
    }
    .blog-post .pmg-page .pmg-page__titre {
        margin-bottom: 5rem;
    }
}

@media (max-width: 599px) {
    .pmg-page {
        --pmg-retrait: 0px; /* unité requise : utilisé dans des calc() */
        padding: 4rem 0 5rem;
    }
    .blog-post .pmg-page .pmg-page__titre {
        margin-bottom: 3rem;
    }
    .blog-post .pmg-page .pmg-page__contenu p.is-style-chapo {
        font-size: 2rem;
        margin-bottom: 4rem;
    }
    .blog-post .pmg-page .pmg-page__titre {
        margin: 2rem 0 4rem !important;
    }
}



/* ==========================================================================
   Pied de page
========================================================================== */

.pmg-footer {
    background-color: var(--couleur-4);
    padding: 3.5rem 0 3rem;
    margin-top: 6rem;
}

.pmg-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

.pmg-footer__logo {
    display: inline-block;
    line-height: 0;
}

.pmg-footer__logo img {
    display: block;
    width: 25.6rem;
    height: auto;
}

.pmg-footer .pmg-footer__adresse {
    margin: 2rem 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    font-style: normal;
    line-height: 1.65;
    color: #000;
    padding-left: 10px;
}

.pmg-footer .pmg-footer__adresse a {
    color: inherit;
    text-decoration: none;
}

.pmg-footer .pmg-footer__adresse a:hover,
.pmg-footer .pmg-footer__adresse a:focus {
    text-decoration: underline;
}

.pmg-footer .pmg-footer__adresse .pmg-footer__site {
    color: var(--couleur-1);
    font-weight: 700;
}

.pmg-footer__reseaux {
    padding-top: .5rem;
}

.pmg-footer__reseaux a {
    display: block;
    line-height: 0;
    transition: opacity .2s;
}

.pmg-footer__reseaux a:hover,
.pmg-footer__reseaux a:focus {
    opacity: .8;
}

.pmg-footer__reseaux img {
    display: block;
    width: 7rem;
    height: 7rem;
}

@media (max-width: 599px) {
    .pmg-footer {
        padding: 4rem 0 5rem;
        margin-top: 5rem;
    }
    .pmg-footer__inner {
        flex-direction: column;
        gap: 3rem;
    }
    .pmg-footer__reseaux img {
        width: 5rem;
        height: 5rem;
    }
}


/* =============================================================================
   PAGE « NOS LAURÉATS » — shortcode [laureats]
============================================================================= */

.pmg-laureat {
    margin-bottom: 5rem;
}

.pmg-laureat__resume {
    margin-left: 0;
}

.pmg-laureat__entete {
    position: relative;
    padding-left: 4.8rem;
    margin-bottom: 3.5rem;
}

.pmg-laureat__entete::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2rem;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--couleur-1);
}

.blog-post .pmg-page .pmg-page__contenu h2.pmg-laureat__titre {
    margin: 0 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--couleur-1);
}

.blog-post .pmg-page .pmg-page__contenu p.pmg-laureat__editeur {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
}

.pmg-laureat__visuels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 50 % / 50 % */
    gap: 4rem;
    align-items: start;
    max-width: 80rem;
    margin: 0 0 3rem 3.2rem;
}

/* Même ratio (celui de la couverture) pour les deux images => même hauteur */
.pmg-laureat__visuel img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--ratio, .66);
    object-fit: cover;
    object-position: center;
}

.blog-post .pmg-page .pmg-page__contenu .pmg-laureat__resume p {
    margin: 0;
    font-size: 2rem;
    line-height: 1.3;
}

/* Une seule image (couverture ou montage couverture + portrait) :
   pleine largeur du bloc visuels, hauteur max 560px, sans recadrage (contain) */
.pmg-laureat__visuels--seul {
    grid-template-columns: minmax(0, 1fr);
}

.pmg-laureat__visuels--seul .pmg-laureat__visuel img {
    aspect-ratio: auto;
    max-height: 560px;
    object-fit: contain;
    object-position: left center;
}

/* Frise bleue sous chaque lauréat
   - trait et filets débordent de .pmg-page__contenu jusqu'aux bords de la fenêtre ;
   - le point est calé à 60px du bord droit du .container
     (bord droit du contenu + retrait de la page - 60px) ;
   - liseré blanc de 5px autour du point : les éléments partent du centre du point,
     passent dessous et semblent ainsi épouser sa forme. */
.pmg-page__contenu .pmg-frise--laureat {
    --pmg-point: 32px;     /* diamètre du point */
    --pmg-liseret: 5px;    /* bord blanc */
    --pmg-point-centre: calc(60px - var(--pmg-retrait, 0px) + var(--pmg-point) / 2 + var(--pmg-liseret));
    position: relative;
    display: block;
    width: auto;
    height: calc(var(--pmg-point) + 2 * var(--pmg-liseret));
    margin: 6rem 0 0;
}

.pmg-frise--laureat .pmg-frise__trait,
.pmg-frise--laureat .pmg-frise__lignes,
.pmg-frise--laureat .pmg-frise__point {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

/* Trait épais : du bord gauche de la fenêtre au centre du point */
.pmg-frise--laureat .pmg-frise__trait {
    left: calc(50% - 50vw);
    right: var(--pmg-point-centre);
    width: auto;
    height: 7px;
}

/* 3 filets : du centre du point au bord droit de la fenêtre */
.pmg-frise--laureat .pmg-frise__lignes {
    left: calc(100% - var(--pmg-point-centre));
    right: calc(50% - 50vw);
    width: auto;
    height: 21px; /* 3 filets de 3px, pas de 9px */
    background: repeating-linear-gradient(
        to bottom,
        var(--couleur-1) 0 3px,
        transparent 3px 9px
    );
}

/* Point avec liseré blanc, au-dessus des traits */
.pmg-frise--laureat .pmg-frise__point {
    z-index: 1;
    right: calc(60px - var(--pmg-retrait, 0px));
    box-sizing: content-box;
    width: var(--pmg-point);
    height: var(--pmg-point);
    border: var(--pmg-liseret) solid #fff;
    border-radius: 50%;
    background: var(--couleur-1);
}

@media (max-width: 599px) {
    .pmg-laureat__entete {
        padding-left: 3.6rem;
        margin-bottom: 3rem;
    }
    .pmg-laureat__entete::before {
        width: 2.4rem;
        height: 2.4rem;
    }
    .blog-post .pmg-page .pmg-page__contenu h2.pmg-laureat__titre {
        font-size: 2.2rem;
    }
    .blog-post .pmg-page .pmg-page__contenu p.pmg-laureat__editeur {
        font-size: 2rem;
    }
    .pmg-laureat__visuels {
        gap: 1.6rem;
        margin: 0 0 3rem;
    }
}

.hestia-scroll-to-top {
    border-radius: 50%;
    background-color: var(--couleur-1) !important;
}