/* MAISON LACERF — le Journal : page des articles, rubriques, article. Charge seulement sur ces pages (journal.php).
   Prefixe mlj-, sur les jetons de maison.css (--ml-*). Fond ivoire des maquettes, images au format portrait 4:5,
   largeur de lecture ~680 px, images « grande largeur » 1120 px et « pleine largeur » bord a bord. Animations discretes. */

:root{--mlj-lecture:680px;--mlj-large:1120px}

/* ---------------------------------------------------------------- zone de contenu (Kadence) */
.mlj-journal .content-area,.mlj-lecture .content-area{margin:0;padding:clamp(40px,6vw,88px) 0 var(--ml-espace);background:var(--ml-creme);border-bottom:1px solid var(--ml-trait)}
.mlj-journal .content-container.site-container,.mlj-lecture .content-container.site-container{max-width:calc(var(--ml-largeur) + 2 * var(--ml-gouttiere));padding-left:var(--ml-gouttiere);padding-right:var(--ml-gouttiere)}
.mlj-journal .site-main,.mlj-lecture .site-main{margin:0}
.mlj-lecture #wrapper{overflow-x:clip}

/* ---------------------------------------------------------------- en-tete du Journal et des rubriques */
.mlj-entete{max-width:880px;margin:0 auto;text-align:center}
.mlj-surtitre{margin:0 0 18px;font:500 11px/1.2 var(--ml-corps);letter-spacing:.24em;text-transform:uppercase;color:var(--ml-doux)}
.mlj-surtitre a{color:inherit;text-decoration:none;transition:color .25s}
.mlj-surtitre a:hover{color:var(--ml-noir)}
.mlj-titre{margin:0;font:400 clamp(52px,8.4vw,120px)/.95 var(--ml-titre);color:var(--ml-noir);letter-spacing:.005em}
.mlj-intro{max-width:620px;margin:24px auto 0;font:400 clamp(16px,1.4vw,19px)/1.65 var(--ml-corps);color:var(--ml-texte)}
.mlj-intro p{margin:0 0 .6em}
.mlj-intro p:last-child{margin-bottom:0}

/* navigation par rubriques : en ligne sur ordinateur, defilante sur telephone */
.mlj-rubriques{margin:clamp(32px,5vw,56px) 0 clamp(40px,5vw,72px);border-top:1px solid var(--ml-trait);border-bottom:1px solid var(--ml-trait)}
.mlj-rubriques-liste{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 30px;margin:0;padding:14px 0;list-style:none}
.mlj-rubriques-liste li{margin:0;padding:0}
.mlj-rubriques-liste a{display:inline-block;padding:9px 0;font:500 11px/1.2 var(--ml-corps);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:var(--ml-doux);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:7px;transition:color .25s,text-decoration-color .25s}
.mlj-rubriques-liste a:hover{color:var(--ml-noir);text-decoration-color:currentColor}
.mlj-rubriques-liste a[aria-current]{color:var(--ml-noir);text-decoration-color:currentColor}
@media (max-width:767px){
  .mlj-rubriques{margin-left:calc(-1 * var(--ml-gouttiere));margin-right:calc(-1 * var(--ml-gouttiere))}
  .mlj-rubriques-liste{flex-wrap:nowrap;justify-content:flex-start;gap:0 24px;padding:10px var(--ml-gouttiere);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mlj-rubriques-liste::-webkit-scrollbar{display:none}
  .mlj-rubriques-liste li:last-child{padding-right:var(--ml-gouttiere)}
}

/* rubrique vide : rien pour les visiteuses, un mot pour l'administratrice connectee ; le message du theme est retire */
.mlj-vide{display:none}
.logged-in .mlj-vide{display:block;max-width:620px;margin:0 auto;text-align:center;font:italic 400 14px/1.6 var(--ml-corps);color:var(--ml-doux)}
.mlj-journal section.error{display:none}

/* ---------------------------------------------------------------- grille facon magazine */
ul.mlj-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(44px,5vw,76px) clamp(20px,2.6vw,40px);margin:0;padding:0;list-style:none}
ul.mlj-grille>li{margin:0;padding:0}
@media (max-width:1023px){ul.mlj-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){ul.mlj-grille{grid-template-columns:minmax(0,1fr);row-gap:48px}}

.mlj-carte-corps{display:flex;flex-direction:column;height:100%}
.mlj-visuel{position:relative;display:block;flex:none;aspect-ratio:4/5;overflow:hidden;background:var(--ml-sable)}
.mlj-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.mlj-carte-corps:hover .mlj-visuel img{transform:scale(1.03)}
.mlj-sans-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#efe8e3,var(--ml-sable))}
.mlj-sans-image .maison-logo{width:38%;height:auto;color:rgba(0,0,0,.16)}
.mlj-carte-texte{padding-top:22px}
.mlj-rubrique{margin:0 0 12px;font:500 10.5px/1.3 var(--ml-corps);letter-spacing:.22em;text-transform:uppercase;color:var(--ml-doux)}
.mlj-rubrique a{color:inherit;text-decoration:none;transition:color .25s}
.mlj-rubrique a:hover{color:var(--ml-noir)}
.mlj-carte-titre{margin:0;font:400 clamp(24px,2.1vw,30px)/1.12 var(--ml-titre);color:var(--ml-noir)}
.mlj-carte-titre a{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .3s}
.mlj-carte-corps:hover .mlj-carte-titre a,.mlj-carte-titre a:focus-visible{text-decoration-color:currentColor}
.mlj-extrait{margin:12px 0 0;font:400 15px/1.65 var(--ml-corps);color:var(--ml-texte)}
.mlj-date{margin:14px 0 0;font:400 12px/1.3 var(--ml-corps);letter-spacing:.06em;color:var(--ml-doux)}

/* l'article mis en avant (page 1) : 2 colonnes x 2 rangees sur ordinateur, pleine ligne sur tablette */
.mlj-carte--une .mlj-carte-titre{font-size:clamp(30px,3.4vw,52px);line-height:1.04}
.mlj-carte--une .mlj-extrait{max-width:620px;font-size:16px}
@media (min-width:600px) and (max-width:1023px){
  .mlj-carte--une{grid-column:1 / -1}
  .mlj-carte--une .mlj-visuel{aspect-ratio:4/3}
}
@media (min-width:1024px){
  .mlj-carte--une{grid-column:span 2;grid-row:span 2}
  .mlj-carte--une .mlj-visuel{aspect-ratio:auto;flex:1 1 auto;min-height:clamp(480px,44vw,780px)}
}

/* pagination du theme */
.mlj-journal .pagination{margin:clamp(56px,7vw,96px) 0 0}
.mlj-journal .pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mlj-journal .pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;margin:0;padding:0 12px;border:1px solid transparent;border-radius:0;background:none;font:500 12px/1 var(--ml-corps);letter-spacing:.12em;color:var(--ml-texte);text-decoration:none;box-shadow:none;transition:border-color .25s,color .25s}
.mlj-journal .pagination a.page-numbers:hover{border-color:var(--ml-noir);color:var(--ml-noir)}
.mlj-journal .pagination .page-numbers.current{border-color:var(--ml-noir);background:var(--ml-noir);color:var(--ml-blanc)}
.mlj-journal .pagination .page-numbers.dots{border-color:transparent;background:none}

/* ---------------------------------------------------------------- l'article */
.mlj-lecture .entry.single-entry{background:transparent;box-shadow:none}
.mlj-lecture .entry-content-wrap{padding:0}

.mlj-entete-article{max-width:920px;margin:0 auto;text-align:center}
.mlj-entete-article .mlj-rubrique{margin-bottom:22px}
.mlj-titre-article{margin:0;font:400 clamp(38px,6vw,86px)/1 var(--ml-titre);color:var(--ml-noir);letter-spacing:.005em}
.mlj-chapo{max-width:var(--mlj-lecture);margin:26px auto 0;font:400 clamp(17px,1.5vw,21px)/1.6 var(--ml-corps);color:var(--ml-texte)}
.mlj-meta{margin:26px 0 0;font:400 11.5px/1.4 var(--ml-corps);letter-spacing:.14em;text-transform:uppercase;color:var(--ml-doux)}
.mlj-meta-sep{margin:0 12px}
.mlj-une{max-width:var(--mlj-large);margin:clamp(36px,5vw,64px) auto 0}
.mlj-une img{display:block;width:100%;max-width:100%;height:auto;max-height:88vh;object-fit:contain;margin:0 auto}
.mlj-une figcaption{margin-top:12px;font:400 12px/1.5 var(--ml-corps);letter-spacing:.04em;color:var(--ml-doux);text-align:center}

/* le texte : une colonne de lecture ; « grande largeur » et « pleine largeur » sortent de la colonne */
.mlj-lecture .entry-content{margin:clamp(44px,6vw,84px) 0 0;font:400 clamp(16px,1.2vw,18px)/1.8 var(--ml-corps);color:var(--ml-texte)}
.mlj-lecture .entry-content>*{max-width:var(--mlj-lecture);margin:0 auto 1.5em}
.mlj-lecture .entry-content>*:last-child{margin-bottom:0}
.mlj-lecture .entry-content>.alignwide{width:auto;max-width:var(--mlj-large);margin-left:auto;margin-right:auto}
.mlj-lecture .entry-content>.alignfull{max-width:none;width:var(--global-vw,100vw);margin-left:calc(50% - var(--global-vw,100vw) / 2);margin-right:calc(50% - var(--global-vw,100vw) / 2)}
.mlj-lecture .entry-content>.alignwide,.mlj-lecture .entry-content>.alignfull{margin-top:2.6em;margin-bottom:2.6em}
.mlj-lecture .entry-content>.alignleft{float:left;max-width:min(46%,340px);margin:.4em 2em 1em max(0px,calc((100% - var(--mlj-lecture)) / 2))}
.mlj-lecture .entry-content>.alignright{float:right;max-width:min(46%,340px);margin:.4em max(0px,calc((100% - var(--mlj-lecture)) / 2)) 1em 2em}
@media (max-width:599px){.mlj-lecture .entry-content>.alignleft,.mlj-lecture .entry-content>.alignright{float:none;max-width:100%;margin:1.5em 0}}

.mlj-lecture .entry-content h2{margin-top:2.2em;margin-bottom:.7em;font:400 clamp(30px,3vw,42px)/1.12 var(--ml-titre);color:var(--ml-noir)}
.mlj-lecture .entry-content h3{margin-top:2.2em;margin-bottom:.8em;font:600 13px/1.5 var(--ml-corps);letter-spacing:.18em;text-transform:uppercase;color:var(--ml-noir)}
.mlj-lecture .entry-content h4{margin-top:1.8em;margin-bottom:.6em;font:600 16px/1.5 var(--ml-corps);color:var(--ml-noir)}
.mlj-lecture .entry-content a{color:var(--ml-noir);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .25s}
.mlj-lecture .entry-content a:hover{text-decoration-color:var(--ml-doux)}
.mlj-lecture .entry-content ul,.mlj-lecture .entry-content ol{padding-left:1.2em}
.mlj-lecture .entry-content li{margin:0 0 .45em}
.mlj-lecture .entry-content strong{color:var(--ml-noir);font-weight:600}
.mlj-lecture .entry-content .has-drop-cap:not(:focus)::first-letter{float:left;margin:.08em .12em 0 0;font:400 5.4em/.8 var(--ml-titre);color:var(--ml-noir)}

/* citations */
.mlj-lecture .entry-content .wp-block-quote{margin-top:2.4em;margin-bottom:2.4em;padding:0 0 0 28px;border:0;border-left:1px solid var(--ml-noir);background:none}
.mlj-lecture .entry-content .wp-block-quote p{margin:0 0 .5em;font:italic 400 clamp(24px,2.4vw,32px)/1.3 var(--ml-titre);color:var(--ml-noir)}
.mlj-lecture .entry-content .wp-block-quote.has-text-align-center{padding:0;border-left:0;text-align:center}
.mlj-lecture .entry-content .wp-block-quote.has-text-align-right{padding:0 28px 0 0;border-left:0;border-right:1px solid var(--ml-noir)}
.mlj-lecture .entry-content .wp-block-pullquote{margin-top:2.6em;margin-bottom:2.6em;padding:clamp(28px,4vw,48px) 0;border:0;border-top:1px solid var(--ml-noir);border-bottom:1px solid var(--ml-noir);text-align:center}
.mlj-lecture .entry-content .wp-block-pullquote blockquote{margin:0;padding:0;border:0;background:none}
.mlj-lecture .entry-content .wp-block-pullquote blockquote::before{content:none}
.mlj-lecture .entry-content .wp-block-pullquote p{margin:0;font:400 clamp(28px,3.4vw,46px)/1.15 var(--ml-titre);color:var(--ml-noir)}
.mlj-lecture .entry-content .wp-block-quote cite,.mlj-lecture .entry-content .wp-block-pullquote cite{display:block;margin-top:16px;font:500 11px/1.4 var(--ml-corps);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ml-doux)}

/* images, galeries, couvertures */
.mlj-lecture .entry-content img{max-width:100%;height:auto}
.mlj-lecture .entry-content .wp-block-image,.mlj-lecture .entry-content .wp-block-gallery{margin-top:2.2em;margin-bottom:2.2em}
.mlj-lecture .entry-content figcaption{margin-top:12px;font:400 12px/1.5 var(--ml-corps);letter-spacing:.04em;color:var(--ml-doux);text-align:center}
.mlj-lecture .entry-content .alignfull figcaption{padding:0 var(--ml-gouttiere)}
.mlj-lecture .entry-content .wp-block-cover{margin-top:2.6em;margin-bottom:2.6em}

/* video (fichier MP4) et audio (MP3) : les lecteurs natifs du navigateur, a la largeur de la colonne */
.mlj-lecture .entry-content .wp-block-video{margin-top:2.4em;margin-bottom:2.4em}
.mlj-lecture .entry-content .wp-block-video video{display:block;width:100%;height:auto;background:#000}
.mlj-lecture .entry-content .wp-block-audio{margin-top:2em;margin-bottom:2em}
.mlj-lecture .entry-content .wp-block-audio audio{display:block;width:100%;min-width:0}
.mlj-lecture .entry-content .wp-block-embed{margin-top:2.4em;margin-bottom:2.4em}
.mlj-lecture .entry-content .wp-block-embed iframe{max-width:100%}

/* YouTube, Vimeo, Spotify... : le bouton a la place du lecteur, meme cadre (rien ne saute au clic) */
.mlj-facade{position:relative;width:100%;overflow:hidden;background:#0d0d0d;color:#fff}
.mlj-facade--ratio{position:absolute;inset:0}
.mlj-facade--169{aspect-ratio:16/9}
.mlj-facade iframe{display:block;width:100%;height:100%;border:0}
.mlj-facade--ratio iframe,.mlj-facade--169 iframe{position:absolute;inset:0}
.mlj-lecture .entry-content a.mlj-facade-lancer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;text-align:center;color:#fff;text-decoration:none;background:radial-gradient(circle at 50% 45%,#2a2a2a 0,#0d0d0d 72%)}
.mlj-facade-icone{position:relative;flex:none;width:68px;height:68px;border:1px solid rgba(255,255,255,.75);border-radius:50%;transition:background .3s,border-color .3s}
.mlj-facade-icone::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;transition:border-color .3s}
.mlj-facade-lancer:hover .mlj-facade-icone,.mlj-facade-lancer:focus-visible .mlj-facade-icone{background:#fff;border-color:#fff}
.mlj-facade-lancer:hover .mlj-facade-icone::before,.mlj-facade-lancer:focus-visible .mlj-facade-icone::before{border-left-color:#000}
.mlj-facade-lancer:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.mlj-facade-texte{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(90%,560px)}
.mlj-facade-action{font:500 11px/1.2 var(--ml-corps);letter-spacing:.24em;text-transform:uppercase}
.mlj-facade-titre{font:400 clamp(18px,2.2vw,26px)/1.2 var(--ml-titre);color:#fff}
.mlj-facade-note{font:400 11px/1.4 var(--ml-corps);letter-spacing:.06em;color:rgba(255,255,255,.62)}
.mlj-facade--hauteur .mlj-facade-lancer,.mlj-lecture .entry-content .mlj-facade--hauteur a.mlj-facade-lancer{flex-direction:row;justify-content:flex-start;gap:20px;padding:14px 24px;text-align:left;background:#0d0d0d}
.mlj-facade--hauteur .mlj-facade-texte{align-items:flex-start;gap:5px}
.mlj-facade--hauteur .mlj-facade-icone{width:54px;height:54px}
.mlj-facade--hauteur .mlj-facade-titre{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* separateurs, etiquettes, pieces jointes */
.mlj-lecture .entry-content .wp-block-separator{max-width:80px;margin:3em auto;border:0;border-top:1px solid var(--ml-noir);background:none;opacity:1}
.mlj-lecture .entry-content .wp-block-separator.is-style-wide{max-width:var(--mlj-lecture)}
.mlj-lecture .entry-footer{max-width:var(--mlj-lecture);margin:56px auto 0}
.mlj-lecture .entry-footer a{display:inline-block;margin:0 16px 8px 0;font:500 11px/1.4 var(--ml-corps);letter-spacing:.16em;text-transform:uppercase;color:var(--ml-doux);text-decoration:none}
.mlj-lecture .entry-footer a:hover{color:var(--ml-noir)}

/* ---------------------------------------------------------------- « Dans la meme rubrique » */
.mlj-suite{margin:clamp(72px,10vw,140px) 0 0;padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--ml-trait)}
.mlj-suite-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 32px;margin:0 0 clamp(28px,4vw,48px)}
.mlj-suite-titre{margin:0;font:400 clamp(30px,3.4vw,46px)/1.05 var(--ml-titre);color:var(--ml-noir)}
.mlj-grille--suite .mlj-carte-titre{font-size:clamp(22px,1.9vw,27px)}

/* ---------------------------------------------------------------- mouvements reduits */
@media (prefers-reduced-motion:reduce){
  .mlj-visuel img,.mlj-carte-titre a,.mlj-rubriques-liste a,.mlj-facade-icone,.mlj-facade-icone::before{transition:none}
  .mlj-carte-corps:hover .mlj-visuel img{transform:none}
}
