/*------------------------------------*\
    GABARIT ARTICLE
    D'apres la maquette "Article - Template", cadre de 1926px : les valeurs
    sont donc celles du design, sans conversion. Les tailles de texte sont
    fluides et atteignent la valeur exacte de la maquette a 1920px de large.
\*------------------------------------*/

.article {
    --article-encre: #36252B;   /* Pourpre Tenebreux */
    --article-plume: #6B525F;   /* Pourpre Royal */
    --article-trait: #D9D9D9;

    --article-largeur: 1523px;  /* colonne de contenu, valeur de la maquette */
    --article-chapo: 764px;     /* chapo, plus etroit */

    --article-hero-max: 100vh;  /* hauteur du hero */

    --article-texte: clamp(16px, 1.3vw, 25px);
    --article-titre: clamp(32px, 3.125vw, 60px);
    --article-section: clamp(26px, 2.29vw, 44px);
}

/* Le hero touche le haut de page : on annule le retrait global de main. */
.single main {
    padding-top: 0;
}

/*------------------------------------*\
    HERO
\*------------------------------------*/

/* Hauteur fixe plutot qu'un aspect-ratio plafonne : combiner les deux rend la
   largeur imprevisible selon le navigateur, le rapport ne pouvant plus etre
   tenu. Ici la largeur reste pleine et l'image remplit en cover. */
.article-hero {
    position: relative;
    width: 100%;
    height: var(--article-hero-max, 70vh);
    min-height: 320px;
    background-color: var(--article-encre);
    background-size: cover;
    background-position: center;
}

/* Fondu vers le blanc en bas du hero. Dans la maquette le rectangle
   "BG Content" part de y=983 sur une image haute de 1280, soit 76,8 %, et
   atteint le blanc plein juste apres le bas de l'image : on le fait coincider
   avec le bord pour un raccord invisible avec le contenu. */
.article-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 76.8%, #fff 100%);
}

.article-hero__scroll {
    z-index: 1;
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    color: #fff;
    font-family: 'FilsonPro Medium', sans-serif;
    font-size: var(--article-texte);
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.article-souris__roue {
    animation: article-roue 1.6s infinite cubic-bezier(.45, 0, .55, 1);
}

@keyframes article-roue {
    0%   { transform: translateY(0);    opacity: 1; }
    50%  { transform: translateY(10px); opacity: .5; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* Header transparent au-dessus du hero, logo et burger en blanc. Une fois le
   hero defile, js/chambre.js pose .header-opaque et tout reprend sa couleur. */
.single .header {
    background: transparent;
    transition: background .3s ease;
}

.single .header .logo img {
    filter: brightness(0) invert(1);
    transition: filter .3s ease;
}

.single .header .menu-responsive line {
    stroke: #fff;
    transition: stroke .3s ease;
}

.single .header.header-opaque {
    background: #fff;
}

.single .header.header-opaque .logo img {
    filter: none;
}

.single .header.header-opaque .menu-responsive line {
    stroke: var(--article-plume, #6B525F);
}

/*------------------------------------*\
    BANDEAU DATE + CATEGORIES
\*------------------------------------*/

.article-bandeau {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 3rem 1.5rem 0;
    text-align: center;
}

.article-date {
    margin: 0;
    color: var(--article-encre);
    font-family: 'FilsonPro Book', sans-serif;
    font-size: var(--article-texte);
}

.article-categories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: var(--article-texte);
}

.article-categories__item {
    color: var(--article-plume);
    font-family: 'FilsonPro Book', sans-serif;
    text-decoration: none;
}

/* La categorie courante, la derniere du fil, est en Medium. */
.article-categories__item--actuel {
    font-family: 'FilsonPro Medium', sans-serif;
}

.article-categories__item:hover {
    text-decoration: underline;
}

.article-categories__sep {
    color: var(--article-plume);
}

/*------------------------------------*\
    ENTETE : TITRE ET CHAPO
\*------------------------------------*/

.article-entete {
    width: min(var(--article-largeur), 92vw);
    margin: 3.5rem auto 0;
    text-align: center;
}

.article-titre {
    margin: 39px 0;
    color: var(--article-encre);
    font-family: 'FilsonPro Medium', sans-serif;
    font-weight: 400;
    font-size: var(--article-titre);
    line-height: 1.15;
}

/* La maquette met la fin du titre en italique : le rendre depuis l'editeur
   avec <em> suffit. */
.article-titre em {
    font-family: 'FilsonPro Medium Italic', sans-serif;
    font-style: italic;
}

.article-chapo {
    width: min(var(--article-chapo), 100%);
    margin: 2.5rem auto 0;
    color: var(--article-encre);
    font-family: 'FilsonPro Book', sans-serif;
    font-size: var(--article-texte);
    line-height: 1.505;
    text-align: justify;
}

.article-chapo p {
    margin: 0 0 1rem;
    font-size: inherit;
    color: inherit;
}

/*------------------------------------*\
    CONTENU
\*------------------------------------*/

.article-contenu {
    width: min(var(--article-largeur), 92vw);
    /* Le theme impose article{min-width:100%} : sans cela le contenu deborde. */
    min-width: 0;
    box-sizing: border-box;
    margin: 4rem auto;
}

.article-contenu p {
    color: var(--article-encre);
    font-family: 'FilsonPro Book', sans-serif;
    font-size: var(--article-texte);
    line-height: 1.505;
    text-align: justify;
    margin: 0 0 1.5rem;
}

/* Titres de section : 44px dans la maquette, l'accent en italique Pourpre
   Royal. Le filet et l'espacement reprennent les 65px et 82px du design. */
.article-contenu h2 {
    margin: 26px 0;
    color: var(--article-encre);
    font-family: 'FilsonPro Medium', sans-serif;
    font-weight: 400;
    font-size: var(--article-section);
    line-height: 1.2;
}

.article-contenu h2 em {
    color: var(--article-plume);
    font-family: 'FilsonPro Medium Italic', sans-serif;
    font-style: italic;
}

.article-contenu h3 {
    margin: 0 0 1.5rem;
    color: var(--article-encre);
    font-family: 'FilsonPro Medium', sans-serif;
    font-weight: 400;
}

.article-contenu .wp-block-separator {
    max-width: 100%;
    margin: 4rem 0 65px;
    border: 0;
    border-top: 1px solid var(--article-trait);
}

.article-contenu a {
    color: var(--article-plume);
}

/* Bloc Texte : colonne resserree sur les articles. La regle globale du theme
   le plafonne a 1400px ; ici on veut une ligne de lecture plus courte.
   Le selecteur porte deux classes pour ne rien laisser au hasard, meme si
   cette feuille n'est de toute facon servie que sur les articles. */
.single .texte_gutenberg_block {
    width: 90%;
    max-width: 700px;
    margin: 1px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*------------------------------------*\
    GALERIES
    Maquette : trois visuels de 486x633, ou un large de 1001 avec un de 486.
\*------------------------------------*/

.article-contenu .wp-block-gallery,
.article-contenu .wp-block-columns {
    margin: 4rem 0;
    gap: 29px;
}

.article-contenu .wp-block-gallery img,
.article-contenu .wp-block-columns img,
.article-contenu .wp-block-image img {
    display: block;
    width: 100%;
    aspect-ratio: 486 / 633;
    object-fit: cover;
}

/* Un visuel seul sur toute la largeur reste en paysage. */
.article-contenu > .wp-block-image img {
    aspect-ratio: 1001 / 633;
}

/*------------------------------------*\
    COMMENTAIRES
\*------------------------------------*/

.article-commentaires {
    width: min(var(--article-largeur), 92vw);
    margin: 0 auto 4rem;
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (max-width: 900px) {
    .article-hero {
        height: 60vh;
    }

    .article-contenu h2 {
        margin-bottom: 2rem;
    }

    .article-contenu .wp-block-separator {
        margin: 2.5rem 0 2rem;
    }

    .article-contenu p,
    .article-chapo {
        text-align: left;
    }
}