/* Articles : cartes de liste et page d'article.
   Memes familles, meme palette et memes angles droits que le reste du site.
   Conteneurs flex uniquement, aucune grille exotique. */

.lfd-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------------------------------------------------- LISTE EN CARTES */
.lfd-articles{
  display:flex;
  flex-wrap:wrap;
  gap:36px 28px;
  align-items:stretch;
  margin:0;
}
.lfd-carte{
  display:flex;
  flex-direction:column;
  flex:1 1 300px;
  max-width:calc((100% - 56px) / 3);
  min-width:260px;
  background:#FFFFFF;
  border:1px solid #D3DCE3;
  border-radius:0;
}
.lfd-carte__visuel{display:block;overflow:hidden;background:#EDE6D9}
.lfd-carte__image{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.lfd-carte__corps{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 24px 24px}
.lfd-carte__date{
  margin:0 0 10px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:#6B6760;
}
.lfd-carte__titre{
  margin:0 0 12px;
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:700;font-variation-settings:'wdth' 106;
  font-size:clamp(17.5px,.42vw + 13.5px,20px);
  line-height:1.24;letter-spacing:-.014em;text-wrap:balance;
}
.lfd-carte__titre a{color:#12405F;text-decoration:none}
.lfd-carte__titre a:hover{color:#9E4A2A}
.lfd-carte__extrait{
  margin:0 0 18px;
  font-family:'Source Sans 3',system-ui,sans-serif;
  font-size:16px;line-height:1.62;color:#4A4640;
}
.lfd-carte__lien{margin:auto 0 0}
.lfd-carte__lien a{
  display:inline-block;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:13.5px;font-weight:600;font-variation-settings:'wdth' 104;
  letter-spacing:.04em;text-transform:uppercase;
  color:#9E4A2A;text-decoration:none;
  padding-bottom:3px;box-shadow:inset 0 -1.5px 0 #C4643C;
}
.lfd-carte__lien a:hover{color:#12405F;box-shadow:inset 0 -1.5px 0 #12405F}
.lfd-carte a:focus-visible,.lfd-carte__titre a:focus-visible{outline:2px solid #F2A93B;outline-offset:3px}
.lfd-articles__vide{font-family:'Source Sans 3',system-ui,sans-serif;font-size:16px;color:#6B6760}

@media (max-width:1080px){ .lfd-carte{max-width:calc((100% - 28px) / 2)} }
@media (max-width:760px){ .lfd-carte{max-width:100%;flex-basis:100%} .lfd-articles{gap:28px} }

/* ---------------------------------------------------- PAGE D'ARTICLE */
.single-post .site-content{background:#F6F2EA}
.single-post .ast-container{max-width:1120px}
.single-post .entry-content,
.single-post .entry-header{max-width:72ch;margin-inline:auto}

.single-post .entry-title{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:800;font-variation-settings:'wdth' 118;
  font-size:clamp(28px,2.1vw + 13px,42px);
  line-height:1.06;letter-spacing:-.026em;color:#12405F;
  text-wrap:balance;max-width:22ch;
}
.single-post .entry-content{
  font-family:'Source Sans 3',system-ui,sans-serif;
  font-size:17px;line-height:1.72;color:#4A4640;
}
.single-post .entry-content p{margin:0 0 20px}
.single-post .entry-content h2{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:800;font-variation-settings:'wdth' 114;
  font-size:clamp(23px,1.45vw + 10px,33px);
  line-height:1.12;letter-spacing:-.024em;color:#12405F;
  margin:44px 0 14px;text-wrap:balance;
}
.single-post .entry-content h3{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:700;font-variation-settings:'wdth' 106;
  font-size:clamp(17.5px,.42vw + 13.5px,20px);
  line-height:1.26;letter-spacing:-.012em;color:#12405F;
  margin:30px 0 10px;
}
.single-post .entry-content ul,
.single-post .entry-content ol{margin:0 0 20px;padding-left:22px}
.single-post .entry-content li{margin:0 0 9px}
.single-post .entry-content a{
  color:#9E4A2A;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.single-post .entry-content a:hover{color:#12405F}
.single-post .entry-content a:focus-visible{outline:2px solid #F2A93B;outline-offset:2px}
.single-post .entry-content strong{color:#2E3338;font-weight:600}
.single-post .post-thumb img,
.single-post .entry-content img{width:100%;height:auto;display:block}

/* Dates de publication et de mise a jour */
.lfd-dates{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12.5px;font-weight:500;letter-spacing:.04em;
  color:#6B6760;margin:0 0 26px;padding-bottom:16px;
  border-bottom:1px solid #D3DCE3;
}
.lfd-dates__maj{color:#9E4A2A}

/* Encart de synthese et FAQ */
.single-post .entry-content .lfd-essentiel{
  margin:0 0 28px;padding:22px 24px;
  background:#EDE6D9;border-left:3px solid #C4643C;
}
.single-post .entry-content .lfd-essentiel p:last-child,
.single-post .entry-content .lfd-essentiel ul:last-child{margin-bottom:0}
.single-post .entry-content .lfd-essentiel h2{margin-top:0;font-size:clamp(19px,.6vw + 15px,23px)}

.single-post .entry-content .lfd-source{
  font-size:15px;color:#6B6760;
  border-top:1px solid #D3DCE3;padding-top:16px;margin-top:36px;
}

/* Appel a l'action en fin d'article */
.single-post .entry-content .lfd-cta-article{
  margin:36px 0 0;padding:26px 28px;
  background:#12405F;color:#F6F2EA;
}
.single-post .entry-content .lfd-cta-article p{color:#F6F2EA}
.single-post .entry-content .lfd-cta-article a{color:#F2A93B}
.single-post .entry-content .lfd-cta-article a:hover{color:#FFFFFF}

@media (max-width:760px){
  .single-post .entry-content{font-size:16px}
  .single-post .entry-title{max-width:none}
}

/* ------------------------------------------- GABARIT D ARTICLE : LARGEURS
   L en-tete et le pied appartiennent aux gabarits xpro-themer : leur fond
   doit courir sur toute la largeur de l ecran. Sur un article, Elementor
   appliquait 40px de padding au conteneur du gabarit, ce qui creusait une
   marge blanche de chaque cote. On la retire ; la gouttiere interieure de
   #lfd-entete et #lfd-pied reste inchangee, hauteur comprise. */
.xpro-theme-builder-header > .elementor,
.xpro-theme-builder-footer > .elementor,
.xpro-theme-builder-header [data-elementor-type="xpro-themer"],
.xpro-theme-builder-footer [data-elementor-type="xpro-themer"]{
  padding-left:0;
  padding-right:0;
  max-width:none;
}

/* Conteneur exterieur aligne sur les autres pages : 1120px et memes
   gouttieres fluides. Astra imposait 750px, d ou la page comprimee. */
body.single-post .site-content .ast-container{
  max-width:1120px;
  padding-left:clamp(24px, 5vw, 80px);
  padding-right:clamp(24px, 5vw, 80px);
  padding-top:clamp(28px, 3.2vw, 52px);
}
body.single-post #primary,
body.single-post .ast-article-single{
  max-width:none;
  width:100%;
  padding-left:0;
  padding-right:0;
}

/* Colonne de lecture confortable ; les blocs larges occupent le conteneur. */
body.single-post .entry-content,
body.single-post .entry-header{max-width:none;margin-inline:0}
body.single-post .entry-content > p,
body.single-post .entry-content > ul,
body.single-post .entry-content > ol,
body.single-post .entry-content > h2,
body.single-post .entry-content > h3,
body.single-post .entry-content > .lfd-dates,
body.single-post .entry-content > .lfd-source,
body.single-post .entry-header > .entry-title{
  max-width:960px;
  margin-inline:auto;
}
body.single-post .entry-content > .lfd-essentiel,
body.single-post .entry-content > .lfd-cta-article,
body.single-post .entry-content > figure,
body.single-post .entry-content > img,
body.single-post .entry-content > table,
body.single-post .entry-content > .wp-block-table{
  max-width:none;
  margin-inline:0;
}

/* Moins de vide entre l en-tete et le debut de l article. */
body.single-post .site-content{padding-top:0}
body.single-post .entry-header{margin-bottom:14px}
body.single-post .post-thumb{max-width:none;margin:0 0 28px}

@media (max-width:960px){
  body.single-post .entry-content > p,
  body.single-post .entry-content > ul,
  body.single-post .entry-content > ol,
  body.single-post .entry-content > h2,
  body.single-post .entry-content > h3,
  body.single-post .entry-content > .lfd-dates,
  body.single-post .entry-content > .lfd-source,
  body.single-post .entry-header > .entry-title{max-width:none}
}

/* ------------------------------------------------------ AJUSTEMENTS FINAUX
   Colonne de lecture a 900px : les encarts, images et tableaux occupent
   les 976px utiles du conteneur, la difference se voit. L espace entre
   l en-tete et le titre venait de trois sources cumulees (marge de
   #primary, padding du conteneur, padding de l article). */
body.single-post .entry-content > p,
body.single-post .entry-content > ul,
body.single-post .entry-content > ol,
body.single-post .entry-content > h2,
body.single-post .entry-content > h3,
body.single-post .entry-content > .lfd-dates,
body.single-post .entry-content > .lfd-source,
body.single-post .entry-header > .entry-title{max-width:900px}

body.single-post #primary{margin-top:0}
body.single-post .ast-article-single,
body.single-post article.post{padding-top:0}
body.single-post .site-content .ast-container{padding-top:clamp(30px, 2.6vw, 44px)}

@media (max-width:960px){
  body.single-post .entry-content > p,
  body.single-post .entry-content > ul,
  body.single-post .entry-content > ol,
  body.single-post .entry-content > h2,
  body.single-post .entry-content > h3,
  body.single-post .entry-content > .lfd-dates,
  body.single-post .entry-content > .lfd-source,
  body.single-post .entry-header > .entry-title{max-width:none}
}