@charset "UTF-8";
/* ============================================================================
   PAGE D ACCUEIL - design_handoff_accueil (option 1c ordinateur / 1f mobile) : une, sections, grilles de
   classements et de Devedetheque (onglets). Charge par functions.php sur la page d accueil seulement,
   apres list.css qui porte le cadre de page, la liste chronique, les etoiles et la pagination.
   Markup : front-page.php (classes .wpd-*), regles prefixees par body.home .wpd-home.
   ========================================================================== */

body.home .wpd-home {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Images des vignettes (une) et des grilles : remplissent leur cadre ; aplat si l article n a pas d image
   a la une. (La liste chronique, partagee, est dans list.css.) */
body.home .wpd-home .wpd-mini-img,
body.home .wpd-home .wpd-card-img { overflow: hidden; background: #E3E9F1; }
body.home .wpd-home .wpd-mini-img img,
body.home .wpd-home .wpd-card-img img,
body.home .wpd-home .wpd-mini-img .wpd-ph,
body.home .wpd-home .wpd-card-img .wpd-ph { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 1. A la une ---------- */
body.home .wpd-home .wpd-une { display: flex; flex-wrap: wrap; gap: 24px; }

body.home .wpd-home .wpd-une-main {
  flex: 2 1 min(520px, 100%);
  min-width: 0;
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  overflow: hidden;
  background: #2F3B4D;
  color: #fff;
}
body.home .wpd-home .wpd-une-main img,
body.home .wpd-home .wpd-une-main .wpd-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #2F3B4D;
}
body.home .wpd-home .wpd-une-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 42, 87, .94) 0%, rgba(4, 42, 87, .55) 40%, rgba(4, 42, 87, 0) 70%);
}
body.home .wpd-home .wpd-une-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 4%, 36px);
}
body.home .wpd-home .wpd-une-main .wpd-kicker { color: #C9DAF0; }
body.home .wpd-home .wpd-une-title {
  font-family: var(--f-titre);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  text-wrap: balance;
  color: #fff;
}
body.home .wpd-home .wpd-une-main .wpd-meta { font-size: 15px; color: #DCE6F3; }
body.home .wpd-home .wpd-une-main .wpd-stars { --st-on: #fff; --st-off: rgba(255, 255, 255, .3); }

body.home .wpd-home .wpd-une-side { flex: 1 1 300px; display: flex; flex-direction: column; }
body.home .wpd-home .wpd-mini {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #E3E8EF;
}
body.home .wpd-home .wpd-mini-img { flex: 0 0 112px; align-self: flex-start; width: 112px; height: 76px; }
body.home .wpd-home .wpd-mini-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.home .wpd-home .wpd-mini-title {
  font-family: var(--f-texte);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
  color: var(--c-texte);
}
body.home .wpd-home .wpd-mini:hover .wpd-mini-title { color: var(--c-bleu); }

/* ---------- Sections : en-tete ---------- */
body.home .wpd-home .wpd-sec { position: relative; display: flex; flex-direction: column; gap: 20px; }
body.home .wpd-home .wpd-sec-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  border-bottom: 1px solid #D3DBE5;
  padding-bottom: 10px;
}
body.home .wpd-home .wpd-sec-head h2 {
  font-family: var(--f-titre);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-bleu-fonce);
}
body.home .wpd-home .wpd-sec-link { font-size: 15px; color: var(--c-bleu); }
body.home .wpd-home .wpd-sec-link:hover { color: var(--c-bleu-fonce); }

/* ---------- 2. Dernieres critiques : la liste chronique est dans list.css ---------- */
body.home .wpd-home .wpd-sec-head + .wpd-chro-list { margin-top: -12px; }
body.home .wpd-home .wpd-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 24px; }

/* ---------- 3. Classements et 4. Devedetheque (grilles de 4) ---------- */
body.home .wpd-home .wpd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 24px;
}
body.home .wpd-home .wpd-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body.home .wpd-home .wpd-card-img { aspect-ratio: 16 / 10; }
body.home .wpd-home .wpd-card-title {
  font-family: var(--f-texte);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
  color: var(--c-texte);
}
body.home .wpd-home .wpd-card-title--top {
  font-family: var(--f-titre);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
}
body.home .wpd-home .wpd-card:hover .wpd-card-title { color: var(--c-bleu); }

/* Onglets de la Devedetheque : boutons radio + :checked, une seule liste visible, sans JavaScript */
body.home .wpd-home .wpd-dvd-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
body.home .wpd-home .wpd-sec-head--tabs { flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
body.home .wpd-home .wpd-sec-head--tabs h2 { padding-bottom: 10px; }
body.home .wpd-home .wpd-tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; }
body.home .wpd-home .wpd-tab {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 0 0 10px;
  box-sizing: border-box;
  border-bottom: 2px solid transparent;
  font-size: 16px;
  color: #4A5A6E;
  cursor: pointer;
}
body.home .wpd-home .wpd-panel { display: none; }

body.home .wpd-home #wpd-dvd-t0:checked ~ .wpd-sec-head .wpd-tab-0,
body.home .wpd-home #wpd-dvd-t1:checked ~ .wpd-sec-head .wpd-tab-1,
body.home .wpd-home #wpd-dvd-t2:checked ~ .wpd-sec-head .wpd-tab-2,
body.home .wpd-home #wpd-dvd-t3:checked ~ .wpd-sec-head .wpd-tab-3 {
  color: var(--c-bleu);
  border-bottom-color: var(--c-bleu);
}
body.home .wpd-home #wpd-dvd-t0:checked ~ .wpd-panel-0,
body.home .wpd-home #wpd-dvd-t1:checked ~ .wpd-panel-1,
body.home .wpd-home #wpd-dvd-t2:checked ~ .wpd-panel-2,
body.home .wpd-home #wpd-dvd-t3:checked ~ .wpd-panel-3 { display: grid; }
body.home .wpd-home #wpd-dvd-t0:focus-visible ~ .wpd-sec-head .wpd-tab-0,
body.home .wpd-home #wpd-dvd-t1:focus-visible ~ .wpd-sec-head .wpd-tab-1,
body.home .wpd-home #wpd-dvd-t2:focus-visible ~ .wpd-sec-head .wpd-tab-2,
body.home .wpd-home #wpd-dvd-t3:focus-visible ~ .wpd-sec-head .wpd-tab-3 { outline: 2px solid var(--c-bleu); outline-offset: 2px; }