/* ======================================================
   Iliade Digital — Single Post (Premium)
   Fichier : assets/css/single.css
   Dépend : variables.css + styles.css + card-post.css
   Scope  : .il-single
   ====================================================== */

.il-single{
  background: var(--bg);
}

/* ======================================================
   HERO
   ====================================================== */
.il-single-hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(980px 520px at 14% 20%, var(--alpha-brand-14), transparent 62%),
    radial-gradient(980px 520px at 86% 26%, rgba(47,128,237,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,1));
}

.il-single-hero::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    linear-gradient(135deg, rgba(16,19,35,.06), rgba(16,19,35,0) 55%),
    radial-gradient(700px 320px at 30% 10%, rgba(255,255,255,.75), transparent 55%);
  pointer-events:none;
  mix-blend-mode: multiply;
  opacity: .55;
}

.il-single-hero__grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(18px, 4vw, 46px);
  padding-block: clamp(30px, 5.4vw, 76px);
}

@media (max-width: 980px){
  .il-single-hero__grid{
    grid-template-columns: 1fr;
  }
}

.il-single-hero__content{
  max-width: 820px;
}

.il-single-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--pill-soft-bg);
  border: 1px solid var(--pill-soft-brd);
  color: var(--brand-green);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.il-single-pill--cat{
  margin-bottom: 10px;
}

.il-single-hero__title{
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
}

.il-single-meta{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  margin: 0 0 14px;
}

.il-single-meta__item{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.il-single-meta__item a{
  color: inherit;
}

.il-single-meta__dot{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(102,102,114,.85);
}

.il-single-meta .dashicons{
  color: rgba(23,160,81,.90);
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.il-single-hero__excerpt{
  margin: 0 0 18px;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 72ch;
}

.il-single-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Media */
.il-single-hero__media{
  position: relative;
}

.il-single-hero__img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: var(--r-18);
  border: 1px solid var(--alpha-ink-10);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.il-single-hero__img--placeholder{
  aspect-ratio: 16/10;
  background:
    radial-gradient(320px 220px at 18% 30%, rgba(23,160,81,.18), transparent 62%),
    radial-gradient(320px 220px at 82% 38%, rgba(47,128,237,.14), transparent 62%),
    linear-gradient(180deg, rgba(16,19,35,.10), rgba(16,19,35,0));
}

/* Share chips */
.il-single-share{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.il-single-share__btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--alpha-ink-10);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 22px rgba(16,19,35,.06);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 13px;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.il-single-share__btn .dashicons{
  color: rgba(23,160,81,.90);
}

@media (hover:hover){
  .il-single-share__btn:hover{
    transform: translateY(-1px);
    border-color: rgba(23,160,81,.22);
    box-shadow: var(--shadow-sm);
  }
}

/* ======================================================
   BODY GRID
   ====================================================== */
.il-single-body{
  padding-block: clamp(28px, 5vw, 64px);
}

.il-single-body__grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(16px, 3vw, 26px);
  align-items: start;
}

@media (max-width: 1024px){
  .il-single-body__grid{
    grid-template-columns: 1fr;
  }
}

/* Article surface */
.il-single-article{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--alpha-ink-10);
  border-radius: var(--r-18);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 2.6vw, 24px);
}

/* Content (Gutenberg friendly) */
.il-single-content{
  color: var(--text-2);
}

.il-single-content > *:last-child{
  margin-bottom: 0;
}

/* Images in content */
.il-single-content img{
  border-radius: var(--r-16);
  border: 1px solid var(--alpha-ink-10);
}

/* Headings spacing */
.il-single-content h2,
.il-single-content h3{
  margin-top: 22px;
}

/* Blockquote premium */
.il-single-content blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(23,160,81,.55);
  background: rgba(23,160,81,.06);
  border-radius: var(--r-16);
}

/* Footer blocks */
.il-single-footer{
  margin-top: 22px;
  display:grid;
  gap: 16px;
}

.il-single-tags{
  display:grid;
  gap: 10px;
}

.il-single-tags__label{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 900;
  color: var(--text);
}

.il-single-tags__label .dashicons{
  color: rgba(23,160,81,.90);
}

.il-single-tags__list{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Author box */
.il-single-author{
  display:flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: var(--r-18);
  border: 1px solid var(--alpha-ink-10);
  background: rgba(255,255,255,.72);
}

.il-single-author__avatar img{
  border-radius: 999px;
  border: 1px solid var(--alpha-ink-10);
}

.il-single-author__name a{
  font-family: var(--font-head);
  font-weight: 900;
}

.il-single-author__bio{
  color: var(--muted);
  font-size: 14px;
}

/* Comments spacing */
.il-single-comments{
  margin-top: 18px;
}

/* ======================================================
   Sidebar (sticky on desktop)
   ====================================================== */
.il-single-side{
  display:grid;
  gap: 16px;
}

@media (min-width: 1025px){
  .il-single-side{
    position: sticky;
    top: calc(var(--nav-h, 72px) + 16px);
  }
}

.il-single-side__title{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 0 0 8px;
}

.il-single-side__title .dashicons{
  color: rgba(23,160,81,.90);
}

.il-single-side__text{
  margin: 0 0 14px;
  color: var(--muted);
}

.il-single-side__form{
  display:grid;
  gap: 10px;
}

/* ======================================================
   Related
   ====================================================== */
.il-single-related{
  padding-block: clamp(28px, 5vw, 64px);
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}

.il-single-related__title{
  margin: 0 0 16px;
}

.il-single-related__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.6vw, 22px);
}

@media (max-width: 1024px){
  .il-single-related__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .il-single-related__grid{
    grid-template-columns: 1fr;
  }
}
/* ======================================================
   PATCH — SINGLE POST: NO OVERFLOW X + GUTENBERG SAFE
   Fichier: assets/css/single.css
   À coller TOUT EN BAS (override)
   Scope: .il-single
   ====================================================== */

/* 1) Empêche le viewport de scroller horizontalement
   (clip = moderne; fallback hidden) */
html, body{
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}

/* 2) Grilles: autorise la colonne à rétrécir (sinon overflow) */
.il-single-hero__grid,
.il-single-body__grid{
  min-width: 0;
}
.il-single-hero__content,
.il-single-hero__media,
.il-single-article,
.il-single-side{
  min-width: 0; /* critique pour empêcher les enfants de pousser la page */
}

/* 3) Médias: jamais plus large que le conteneur */
.il-single img,
.il-single svg,
.il-single video,
.il-single canvas{
  max-width: 100%;
  height: auto;
}

/* 4) Longs mots / URLs dans le contenu */
.il-single-content{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 5) Code: scroll interne, pas la page */
.il-single-content pre{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 6) Tables: elles débordent souvent => scroll horizontal interne */
.il-single-content table{
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}

/* 7) Embeds (iframe / vidéos) : width fluide */
.il-single-content iframe,
.il-single-content embed,
.il-single-content object{
  max-width: 100%;
}

/* 8) Gutenberg alignwide / alignfull :
   Beaucoup de thèmes mettent des largeurs “hors container”.
   Ici: on neutralise en single pour garder tes gouttières. */
.il-single-content :where(.alignwide, .alignfull){
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* 9) Si un bloc a du 100vw en inline style (source fréquente) */
.il-single-content :where([style*="width:100vw"], [style*="width: 100vw"]){
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* 10) Pills/chips: éviter qu’un nowrap pousse tout le layout */
.il-single-pill{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ======================================================
   Gutenberg tables — scroll horizontal interne (sans overflow page)
   Scope: .il-single-content (single post)
   ====================================================== */

/* Le conteneur du contenu ne déborde jamais */
.il-single-content{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Table responsive: scroll interne */
.il-single-content table{
  display: block;               /* force un bloc scrollable */
  width: max-content;           /* largeur naturelle du tableau */
  max-width: 100%;              /* ne dépasse pas le container */
  overflow-x: auto;             /* scroll horizontal dans le tableau */
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}

/* Garde les cellules lisibles (pas de casse en colonne étroite) */
.il-single-content th,
.il-single-content td{
  white-space: nowrap;
}

/* Optionnel: un peu de confort visuel */
.il-single-content table{
  border: 1px solid var(--alpha-ink-10);
  border-radius: var(--r-16);
}













/* ======================================================
   PATCH — CTA MOBILE BAR (Single Post)
   À coller tout en bas de assets/css/single.css
   ====================================================== */

.il-single-mbar{
  display: none; /* desktop off */
}

@media (max-width: 768px){

  /* 1) Cache les 2 boutons du hero sur mobile */
  .il-single-actions{
    display: none !important;
  }

  /* 2) Laisse de la place en bas pour la barre fixe */
  .il-single{
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* 3) Barre fixe */
  .il-single-mbar{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;

    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 9999;

    padding: 10px;
    border-radius: 18px;

    background: rgba(255,255,255,.88);
    border: 1px solid var(--alpha-ink-10);
    box-shadow: 0 18px 40px rgba(16,19,35,.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .il-single-mbar__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: 48px;
    padding: 0 10px;

    border-radius: 14px;
    border: 1px solid var(--alpha-ink-10);
    background: rgba(255,255,255,.92);

    font-family: var(--font-head);
    font-weight: 900;
    font-size: 13px;
    color: var(--text);

    white-space: nowrap;
    text-decoration: none;

    transition: transform var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
  }

  .il-single-mbar__btn .dashicons{
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: rgba(23,160,81,.92);
  }

  /* Bouton central (Audit) en “primary” */
  .il-single-mbar__btn--primary{
    background: linear-gradient(135deg, var(--brand-green), var(--brand-green-2));
    border-color: rgba(23,160,81,.28);
    color: #fff;
    box-shadow: 0 14px 26px rgba(23,160,81,.18);
  }

  .il-single-mbar__btn--primary .dashicons{
    color: #fff;
  }

  /* Hover uniquement sur devices qui supportent hover */
  @media (hover:hover){
    .il-single-mbar__btn:hover{
      transform: translateY(-1px);
      border-color: rgba(23,160,81,.22);
      box-shadow: 0 10px 22px rgba(16,19,35,.10);
    }
    .il-single-mbar__btn--primary:hover{
      box-shadow: 0 16px 32px rgba(23,160,81,.22);
    }
  }

  /* Tap feedback mobile */
  .il-single-mbar__btn:active{
    transform: translateY(0);
  }
}














/* ======================================================
   PATCH — Placeholder image + overlay (single post)
   À coller tout en bas de assets/css/single.css
   ====================================================== */

.il-single-hero__ph{
  position: relative;
  margin: 0;
}

.il-single-hero__img--ph{
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Overlay lisible sur image */
.il-single-hero__phcap{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;

  display: grid;
  gap: 6px;

  padding: 12px 12px;
  border-radius: 16px;

  background: linear-gradient(180deg, rgba(16,19,35,.00), rgba(16,19,35,.72));
  color: #fff;

  pointer-events: none; /* n'empêche pas les clics autour */
}

.il-single-hero__brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(23,160,81,.92);
  color: #fff;

  font-family: var(--font-head);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
}

.il-single-hero__kicker{
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 13px;
  opacity: .95;
}

.il-single-hero__line{
  font-weight: 800;
  font-size: 13px;
  opacity: .92;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px){
  .il-single-hero__phcap{
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 10px;
  }
  .il-single-hero__line{
    -webkit-line-clamp: 2;
  }
}



.il-single-hero__img--ph{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}