/*
Theme Name: Encre et Ardoise
Description: Theme dedie au site Encre et Ardoise - ressources pedagogiques maternelle et elementaire. Palette encre, ardoise, craie et vert, synchronisee avec l'editeur de styles WordPress. Concu pour l'extension "Encre et Ardoise - Coeur du site".
Version: 3.2
Author: Encre et Ardoise
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: encre-et-ardoise
*/

/* Les couleurs utilisent les variables de theme.json :
   les modifier dans Apparence > Editeur > Styles se repercute PARTOUT,
   y compris sur les elements generes par l'extension. */

.ea-carte { transition: transform .15s ease; }
.ea-carte:hover { transform: translateY(-2px); }
.ea-carte a { text-decoration: none; }

.ea-fiche {
  background: var(--wp--preset--color--creme, #F6F4EE);
  border-left: 4px solid var(--wp--preset--color--vert, #2E6E4E);
  padding: 12px 16px; margin: 0 0 20px; font-size: 15px; line-height: 1.9;
}
.ea-fil {
  background: var(--wp--preset--color--creme, #F6F4EE);
  border-left: 4px solid var(--wp--preset--color--vert, #2E6E4E);
  padding: 10px 16px; margin: 0 0 18px; font-size: 15px;
}
.ea-bouton, .ea-bouton:visited {
  display: inline-block;
  background: var(--wp--preset--color--vert, #2E6E4E);
  color: var(--wp--preset--color--blanc, #fff) !important;
  padding: 14px 26px; border-radius: 8px; text-decoration: none; font-weight: 600;
  font-family: var(--wp--preset--font-family--titres);
}
.ea-bouton:hover { background: var(--wp--preset--color--encre, #22333B); }
.ea-badge {
  display: inline-block;
  background: var(--wp--preset--color--creme, #F6F4EE);
  border: 1px solid var(--wp--preset--color--vert, #2E6E4E);
  color: var(--wp--preset--color--vert, #2E6E4E);
  padding: 3px 10px; border-radius: 6px; margin: 0 8px 6px 0; font-size: 14px;
  font-family: var(--wp--preset--font-family--titres);
}
.ea-sous { margin: 0 0 24px; }
.ea-sous p { font-weight: 600; margin: 0 0 8px; }
.ea-sous ul { line-height: 2; margin: 0; padding-left: 0; }
.ea-sous li { list-style: none; display: inline-block; margin: 0 8px 8px 0; }
.ea-sous li a, .ea-parcours > li > a, .ea-niveaux a {
  display: inline-block;
  background: var(--wp--preset--color--creme, #F6F4EE);
  border: 1px solid var(--wp--preset--color--vert, #2E6E4E);
  color: var(--wp--preset--color--encre, #22333B);
  padding: 10px 18px; border-radius: 10px; font-weight: 600; text-decoration: none;
  font-family: var(--wp--preset--font-family--titres);
}
.ea-sous li a:hover, .ea-parcours > li > a:hover, .ea-niveaux a:hover {
  background: var(--wp--preset--color--vert, #2E6E4E);
  color: var(--wp--preset--color--blanc, #fff);
}
.ea-parcours { padding-left: 0; }
.ea-parcours li { list-style: none; }
.ea-parcours li { display: inline-block; margin: 0 8px 8px 0; }
.ea-niveaux { text-align: center; margin: 6px 0 10px; }

.ea-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 0; }
.ea-grille > li { list-style: none; }
.ea-carte-ann {
  border: 1px solid #e3e0d6; border-radius: 12px; overflow: hidden;
  background: var(--wp--preset--color--blanc, #fff);
}
.ea-carte-ann img { width: 100%; height: 160px; object-fit: cover; display: block; }
.ea-carte-ann .ea-corps { padding: 16px 18px; }
.ea-carte-ann h3 { margin: 0 0 8px; font-size: 20px; }
.wp-block-search__button { border-radius: 8px !important; }

/* Bloc « Documents à télécharger » */
.ea-docs {
  margin-top: 32px;
  border: 1px solid #e3e0d6;
  border-radius: 12px;
  overflow: hidden;
}
.ea-docs-titre {
  font-size: 1.1em; margin: 0; padding: 14px 18px;
  background: var(--wp--preset--color--creme, #F6F4EE);
  border-bottom: 1px solid #e3e0d6;
}
.ea-docs-liste { list-style: none; margin: 0; padding: 0; }
.ea-doc + .ea-doc { border-top: 1px solid #eee; }
.ea-doc-lien {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; text-decoration: none;
  color: var(--wp--preset--color--encre, #22333B);
  transition: background .12s ease;
}
.ea-doc-lien:hover { background: var(--wp--preset--color--creme, #F6F4EE); }
.ea-doc-type {
  flex: none; width: 46px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 6px 0; border-radius: 6px;
  background: var(--wp--preset--color--vert, #2E6E4E); color: #fff;
  font-family: var(--wp--preset--font-family--titres);
}
.ea-doc-texte { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ea-doc-titre { font-weight: 600; }
.ea-doc-meta { font-size: 13px; opacity: .7; }
.ea-doc-action {
  flex: none; font-weight: 600; font-size: 14px;
  color: var(--wp--preset--color--vert, #2E6E4E);
  font-family: var(--wp--preset--font-family--titres);
}
@media (max-width: 600px) {
  .ea-doc-action { display: none; }
}

/* En-tete : rien ne se chevauche, meme etroit */
.wp-block-navigation a { white-space: nowrap; }
.wp-block-search__input { min-width: 120px; }
@media (max-width: 782px) {
  .wp-block-search.wp-block-search__button-inside,
  header .wp-block-search { width: 100% !important; }
}

/* Menu : espace entre les entrees + panneau mobile aere */
.wp-block-navigation { gap: 26px; }
.wp-block-navigation .wp-block-navigation-item { margin: 0; }
.wp-block-navigation__responsive-container.is-menu-open {
  padding: 28px 28px 40px !important;
  background: var(--wp--preset--color--creme, #F6F4EE) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  font-size: 20px; padding: 10px 0;
}

/* Recherche loupe : champ deploye propre, y compris sur mobile */
.wp-block-search__button-only .wp-block-search__button { border-radius: 8px; }
.wp-block-search__searchfield-hidden .wp-block-search__input { min-width: 0; }
@media (max-width: 600px) {
  .wp-block-search__button-only .wp-block-search__inside-wrapper { max-width: 78vw; }
}

/* Videos toujours contenues */
.wp-block-post-content iframe { max-width: 100% !important; }
.wp-block-post-content iframe[src*="youtube"],
.wp-block-post-content iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16/9; }

/* Carrousel vitrine */
.ea-vitrine { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; margin: 0; -webkit-overflow-scrolling: touch; }
.ea-vitrine > li { flex: 0 0 220px; scroll-snap-align: start; list-style: none; margin: 0; }
.ea-vitrine img { width: 100%; height: 130px; object-fit: cover; display: block; }
.ea-vitrine::-webkit-scrollbar { height: 8px; }
.ea-vitrine::-webkit-scrollbar-thumb { background: #d8d5c9; border-radius: 4px; }

/* Dernieres ressources : carrousel sur mobile et tablette */
@media (max-width: 782px) {
  .ea-grille { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 14px; }
  .ea-grille > li { flex: 0 0 80%; scroll-snap-align: start; }
}

/* Cartes toujours de la meme hauteur (grilles du theme) */
.ea-carte { display: flex; flex-direction: column; height: 100%; }
.ea-carte .wp-block-post-excerpt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template.is-layout-grid > li > .ea-carte { width: 100%; }

/* Pied de page : liens sur une ligne, centres */
.wp-block-page-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; list-style: none; padding-left: 0; margin: 0; }
.wp-block-page-list li { list-style: none; margin: 0; }

/* Vignettes strictement identiques */
.ea-carte-ann h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; margin: 0 0 6px; }
.ea-desc { min-height: 4.1em; }
/* Colonne laterale de l'accueil : reste visible pendant le defilement */
.ea-colonne-fixe { position: sticky; top: 24px; align-self: flex-start; }
@media (max-width: 781px) { .ea-colonne-fixe { position: static; } }
/* Liste laterale de vitrine */
.ea-vitrine-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ea-vitrine-liste > li { display: flex; list-style: none; margin: 0; }
.ea-vitrine-liste img { width: 100%; height: 110px; object-fit: cover; display: block; }

/* Niveaux : pastilles qui ne se chevauchent jamais + etat actif */
.ea-niveaux { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ea-niveaux a { margin: 0; }
.ea-sous li a.ea-actif, .ea-niveaux a.ea-actif, .ea-parcours > li > a.ea-actif {
  background: var(--wp--preset--color--vert, #2E6E4E); color: #fff;
}
/* Carrousels dans les colonnes laterales : une carte visible + apercu de la suivante */
.ea-colonne-fixe .ea-vitrine > li { flex: 0 0 86%; }
.ea-colonne-fixe .ea-fleche { width: 32px; height: 32px; font-size: 18px; top: 32%; }

/* Heros vivant */
.ea-hero .wp-block-search { max-width: 640px; margin: 8px auto 0; }
.ea-hero .wp-block-search__input { padding: 14px 16px; border-radius: 10px 0 0 10px; border: 1px solid #cfccc0; }
.ea-hero .wp-block-search__button { border-radius: 0 10px 10px 0; }
.ea-hero .ea-niveaux a { background: #fff; }

/* Cartes qui repondent au survol */
.ea-carte, .ea-carte-ann { transition: transform .16s ease, box-shadow .16s ease; }
.ea-carte:hover, .ea-carte-ann:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(34,51,59,.12); }

/* Pictogrammes des trois portes */
.ea-picto { display: flex; width: 52px; height: 52px; margin: 0 auto 4px; border-radius: 50%;
  align-items: center; justify-content: center; color: #fff; font-size: 24px; font-family: Georgia, serif; }
.ea-picto-vert { background: var(--wp--preset--color--vert, #2E6E4E); }
.ea-picto-terra { background: var(--wp--preset--color--terracotta, #C05621); }
.ea-picto-encre { background: var(--wp--preset--color--encre, #22333B); }
.ea-porte { border-top: 4px solid var(--wp--preset--color--vert, #2E6E4E) !important; }
.ea-porte-terra { border-top-color: var(--wp--preset--color--terracotta, #C05621) !important; }
.ea-porte-encre { border-top-color: var(--wp--preset--color--encre, #22333B) !important; }

/* Cartes des grilles : image toujours recadree au format 3/2.
   (Le reglage du bloc est parfois ignore ; cette regle le garantit.)
   Portee volontairement limitee a .ea-carte : les fiches (21/9),
   la vitrine et les cartes de l'accueil ne sont pas concernees. */
.ea-carte .wp-block-post-featured-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  margin: 0;
}
.ea-carte .wp-block-post-featured-image a { display: block; height: 100%; }
.ea-carte .wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Navigation au clavier : l'element actif est toujours visible */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--wp--preset--color--terracotta, #C05621) !important;
  outline-offset: 3px;
  border-radius: 4px;
}
/* Tablette : l'en-tete respire au lieu de se serrer */
@media (max-width: 1100px) {
  .wp-block-navigation { gap: 16px; }
  header .wp-block-search { margin-left: 4px; }
}
/* Fiches outils IA : les logos ne sont jamais recadres */
body.single-outil_ia .wp-block-post-featured-image img,
body.tax-public_ia .ea-carte .wp-block-post-featured-image img {
  object-fit: contain !important;
  background: var(--wp--preset--color--creme, #F6F4EE);
  padding: 16px; box-sizing: border-box;
}