/*
Theme Name: Mon thème enfant
Theme URI: https://damien.boursaux.fr
Description: Thème enfant basé sur Twenty Twenty-Four
Author: Damien Boursaux
Author URI: https://damien.boursaux.fr
Template: twentytwentyfour
Version: 1.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mon-theme-enfant
*/
*, *::before, *::after { box-sizing: border-box; }

:root{
  --ink:#1c1d20;
  --paper:#fffdf9;
  --line:#e9e2d8;

  --r:14px;                 /* arrondi cartes */
  --shadow:0 6px 24px rgba(10,10,10,.08);
  --shadow-lg:0 14px 40px rgba(10,10,10,.12);

  --gap:clamp(16px,2.5vw,28px);
  --vspace:clamp(24px,5vw,56px);
  --max:1040px;             /* largeur de contenu confortable */
}

html,body{
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  text-rendering:optimizeLegibility;
}

a{ color:var(--ink); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Cadre de page */
.alignwide{ max-width: var(--max) !important; margin-inline:auto; }
.wp-site-blocks > *{ margin-block: var(--vspace); }

/* Titres — centrés, cohérents */
h1,h2,h3,.wp-block-post-title{ text-align:center; letter-spacing:.2px; }
h1{ font-weight:800; line-height:1.12; font-size:clamp(34px,6vw,56px); margin:0 0 .6em; }
h2{ font-weight:800; line-height:1.16; font-size:clamp(24px,4vw,36px); margin:.2em 0 .7em; }

/* ===================== */
/*   JOURNAUX DE BORD    */
/* ===================== */

/* Conteneur des 4 tuiles — centré et fluide */
.board-section{
  display:flex; justify-content:center; flex-wrap:wrap; gap:var(--gap);
}

/* Colonne/tile : largeur contenue et stable */
.board-section .wp-block-column{ flex:0 1 280px; }

/* Carte */
.board-tile{
  max-width:520px; margin-inline:auto; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; transition:.22s ease;
}
.board-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }

/* Bandeau catégorie (le lien au-dessus) */
.board-tile .cat-label{
  text-align:center; font-size:clamp(18px,2.2vw,24px); font-weight:800;
  letter-spacing:.2px; padding:12px 16px 10px; margin:0;
}
.board-tile .cat-label a{ color:var(--ink); }

/* Image carrée, bien cadrée */
.board-tile img{
  width:100%; display:block; aspect-ratio:1/1; object-fit:cover;
}

/* Titre de la tuile (le dernier article) */
.board-tile .title, .board-tile .wp-block-post-title{
  text-align:center; font-size:clamp(18px,2vw,22px);
  padding:12px 16px 16px; margin:0;
}

/* Espace entre colonnes WP (au cas où) */
.wp-block-columns.alignwide{ gap:var(--gap); }

/* ===================== */
/*     COUP DE CŒUR      */
/* ===================== */
/* Donner la classe `cc-grid` au bloc Boucle de requête */

.cc-grid{ max-width:calc(var(--max) + 80px); margin-inline:auto; }

/* Grille claire et responsive (4 / 3 / 2 / 1) — vignettes plus larges */
.cc-grid .wp-block-post-template{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(4, minmax(0,1fr));
}
@media (max-width:1200px){
  .cc-grid .wp-block-post-template{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:900px){
  .cc-grid .wp-block-post-template{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .cc-grid .wp-block-post-template{ grid-template-columns:1fr; }
}

/* Carte d’article */
.cc-grid .wp-block-post{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; transition:.22s ease;
  display:flex; flex-direction:column; height:100%;
}
.cc-grid .wp-block-post:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }

/* Image carrée (adieu l’affiche géante) */
.cc-grid .wp-block-post-featured-image img{
  width:100%; display:block; aspect-ratio:1/1; object-fit:cover;
}

/* Titre de l’article */
.cc-grid .wp-block-post-title{
  text-align:center; font-size:clamp(18px,2vw,22px);
  padding:12px 14px 16px; margin:0;
}

/* Titre de la section — pose plus sobre */
.cc-section h2{ margin-top:.2rem; margin-bottom:clamp(10px,2vw,18px); }

/* ===================== */
/*      FINITIONS        */
/* ===================== */

.wp-block-navigation a{ color:var(--ink); }
.wp-block-separator{ border-color:var(--line); }
/* Padding latéral global responsive */
.wp-site-blocks {
  padding-left: clamp(12px, 4vw, 40px);
  padding-right: clamp(12px, 4vw, 40px);
}