/* =========================================================
   SCREEN.CSS — PROFESSION FROMAGER
   VERSION STABLE + PATCH TAG ALIGNEMENT
   ========================================================= */


/* =========================================================
   0. VARIABLES
   ========================================================= */
:root{
  --dropcap-size: 3.2em;
  --dropcap-line: 0.85;
  --dropcap-gap: 0.14em;

  --pf-rule: 1px solid #efefef;
  --pf-pad: 1.2rem;
}


/* =========================================================
   1. TYPOGRAPHIE
   ========================================================= */
body,
h1, h2, h3, h4, h5, h6,
nav,
button{
  font-family: "Inter", sans-serif;
}


/* =========================================================
   2. LETTRINE
   ========================================================= */
.lett2{
  float: left;
  font-size: 53px;
  line-height: .8;
  color: #b39964;
  margin: 4px 6px 0 0;
  font-weight: 500;
  display: block;
}
.lettrine-container{
  display: flow-root;
}


/* =========================================================
   3. TEXTE ÉDITORIAL
   ========================================================= */
.gh-content p{
  margin-bottom: 1.4rem;
}


/* =========================================================
   4. HERO HOME — À LA UNE
   ========================================================= */
.pf-featured-hero{
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 1.6rem;
}
.pf-featured-hero-image img{
  width: 100vw;
  height: auto;
  object-fit: cover;
}
.pf-featured-hero-overlay{
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.6rem 1.4rem;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.25) 35%,
    rgba(0,0,0,0.75) 100%
  );
}
.pf-featured-hero-tag{
  color: var(--pf-color-tag);
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.pf-featured-hero-title{
  margin: 0;
  font-size: 2.4rem;
  line-height: 1.27;
  font-weight: 700;
  color: #fff;
}
.pf-featured-hero-title a{
  color: #fff;
  text-decoration: none;
}
@media (max-width: 600px){
  .pf-featured-hero-title{
    font-size: 2.1rem;
  }
}


/* =========================================================
   5. FEATURED 2–3–4 (HOME)
   ========================================================= */
.pf-featured-large{
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #e6e6e6;
}
.pf-featured-large-figure img{
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.pf-featured-large-text{
  padding-top: .6rem;
}
.pf-featured-large-tag{
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pf-color-tag);
  text-transform: uppercase;
}
.pf-featured-large-title{
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
}


/* =========================================================
   6. CARTES PF — HOME + GLOBAL
   ========================================================= */
.pf-card{
  border-bottom: var(--pf-rule);
  padding: var(--pf-pad) 0 !important;
}
.pf-card:last-of-type{
  border-bottom: none !important;
}

.pf-card-wrapper{
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.pf-card-text{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pf-card-tag{
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ghost-accent-color);
  margin-bottom: .25rem !important;
}

.gh-card-title{
  font-size: 1.55rem;
  font-weight: 700;
  margin: .35rem 0 !important;
}


/* =========================================================
   7. VIGNETTES — FORMAT UNIFIÉ
   ========================================================= */
.pf-card-image,
.gh-card-image{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 130px !important;
  flex-shrink: 0 !important;
  overflow: hidden;
  border-radius: 8px !important;
  aspect-ratio: 16 / 9;
}
.pf-card-image img,
.gh-card-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}
@media (max-width: 600px){
  .pf-card-image,
  .gh-card-image{
    width: 120px !important;
  }
}


/* =========================================================
   8. PAGES TAG — STRUCTURE ALIGNÉE HOME
   ========================================================= */

/* marges latérales */
.tag-template .gh-main{
  padding-left: 1.4rem !important;
  padding-right: 1.4rem !important;
}

/* neutralisation archive Source */
.tag-template .gh-archive,
.tag-template .gh-archive-inner{
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* titre */
.tag-template h1.gh-article-title{
  margin: 1.1rem 0 1.4rem 0 !important;
  font-weight: 600 !important;
  font-size: 2.3rem !important;
  line-height: 1.2 !important;
}

/* suppression séparateurs Source */
.tag-template .gh-container.is-list .gh-card + .gh-card::before{
  content: none !important;
  display: none !important;
}

/* feed en liste simple */
.tag-template .gh-feed,
.tag-template .gh-feed > *{
  display: block !important;
}


/* =========================================================
   9. ✅ PATCH CRITIQUE — ALIGNEMENT TAG = HOME
   (CAS SANS .pf-card-wrapper)
   ========================================================= */
.tag-template .gh-card-link{
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
}

.tag-template .gh-card-link > .pf-card-text{
  flex: 1 !important;
}

.tag-template .gh-card-link > .pf-card-image{
  flex-shrink: 0 !important;
}


/* =========================================================
   10. NETTOYAGE VISUEL TAGS
   ========================================================= */
.tag-template .gh-card,
.tag-template .gh-card-inner,
.tag-template .gh-card-content,
.tag-template .gh-card-link,
.tag-template .gh-card::after,
.tag-template .gh-card-link::after{
  border: none !important;
  box-shadow: none !important;
}

/* pas d’excerpt */
.tag-template p.pf-card-excerpt,
.tag-template .pf-card-excerpt{
  display: none !important;
}


/* =========================================================
   11. HABILLAGE IMAGES FLOTTANTES
   ========================================================= */
.float-wrapper{
  overflow: hidden;
}
.float-wrapper img{
  max-width: 45%;
  height: auto;
  margin: 0.3rem 0 0.6rem 1rem;
}
.img-float-right{
  float: right;
  margin-left: 1rem;
}
.img-float-left{
  float: left;
  margin-right: 1rem;
}


/* =========================================================
   12. TAG VIDÉOS — AUCUN HACK DE HAUTEUR
   ========================================================= */
.tag-template.tag-videos .gh-main{
  height: auto !important;
  overflow: visible !important;
}
.tag-template.tag-videos .gh-feed{
  height: auto !important;
}