/* Matériaux — AYA Architectures
   Contenu généré par functions.php :
   - aya_shortcode_icones_materiaux_projet() -> shortcode [icones_materiaux], à placer à la main sur une fiche Projet
   - aya_repertoire_materiaux_shortcode()    -> shortcode [repertoire_materiaux]
   - aya_contenu_page_materiau()             -> galerie sur /materiaux/xxx/ */

/* ---- Titre de la fiche Projet ----
   Masqué de façon garantie par CSS (la case "Désactiver le titre" de
   GeneratePress, cochée dans l'admin sur chaque fiche Projet, reste
   sans effet réel ici — même constat déjà fait sur les pages de
   matériau). La cliente ajoute donc son propre titre directement dans
   le contenu si besoin. Le bloc ".entry-header" ne contenait plus que
   ce titre depuis que les icônes des matériaux sont passées en
   shortcode manuel (voir plus bas) : le masquer en entier ne cache
   donc plus rien d'autre. */
.single-projet .entry-header{
  display: none;
}

/* ---- Icônes matériaux d'une fiche Projet — shortcode [icones_materiaux] ----
   La cliente place ce shortcode elle-même à l'endroit voulu (ex. juste
   au-dessus du bloc de texte, colonne de droite) via un bloc
   "Shortcode" dans l'éditeur — ce qui lui permet aussi de régler la
   marge autour avec les réglages d'espacement de ce bloc. */
.aya-materiaux-projet{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 4px 0 30px;
}

.aya-materiau-badge{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  text-decoration: none;
  transition: transform .2s ease;
}
.aya-materiau-badge:hover,
.aya-materiau-badge:focus{
  transform: translateY(-3px);
}

.aya-materiau-badge img{
  display: block;
  width: 52px;
  height: 52px;
}

.aya-materiau-nom{
  display: block;
  margin-top: 6px;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5c5c5c;
  text-align: center;
}

/* Sur la fiche Projet uniquement (shortcode [icones_materiaux]) : pas
   d'espace entre l'icône et son nom — ne touche pas à la page
   "Matériaux", qui garde son propre espacement (.aya-materiau-badge--grand). */
.single-projet .aya-materiau-nom{
  margin-top: 0;
}

/* ---- Répertoire [repertoire_materiaux] — page "Matériaux" ----
   Icônes plus grandes, centrées, rangées par 4 (2 lignes de 4 sur
   bureau) dans une largeur volontairement réduite pour rester
   compact et cohérent avec le reste de la page. */
.aya-repertoire-materiaux{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px 44px;
  max-width: 720px;
  margin: 40px auto;
}

.aya-materiau-badge--grand{
  width: 130px;
}
.aya-materiau-badge--grand img{
  width: 96px;
  height: 96px;
}
.aya-materiau-badge--grand .aya-materiau-nom{
  font-size: 13px;
  margin-top: 10px;
}

@media (max-width: 700px){
  .aya-repertoire-materiaux{ max-width: 520px; gap: 30px 34px; }
  .aya-materiau-badge--grand{ width: 108px; }
  .aya-materiau-badge--grand img{ width: 80px; height: 80px; }
}

@media (max-width: 480px){
  .aya-repertoire-materiaux{ gap: 26px; }
  .aya-materiau-badge--grand{ width: 42%; }
}

/* ---- Page d'un matériau (/materiaux/xxx/) ----
   La liste par défaut des projets ET des fiches matériau (extraits de
   blog) est masquée : on affiche à sa place le contenu de la Fiche
   matériau associée (titre, texte, photos...), suivi automatiquement
   de la galerie des projets liés — voir aya_contenu_page_materiau().
   Cette galerie reste visuellement identique à celle de la page
   "Projets" (voir galerie-projets.css, chargée aussi ici). La fiche
   matériau doit rester incluse dans la requête de la page (voir
   aya_inclure_fiches_dans_requete_materiau dans functions.php) pour
   éviter un "Rien de trouvé" quand aucun projet n'est encore tagué
   avec ce matériau — elle est donc bien présente dans la page, juste
   masquée ici à l'affichage brut. */
.tax-materiau article.type-projet,
.tax-materiau article.type-fiche_materiau{
  display: none;
}

/* Titre "Matériau : Paille" que WordPress affiche automatiquement en
   haut de toute page d'archive : masqué ici de façon garantie (voir le
   commentaire dans functions.php à côté de aya_masquer_titre_page_materiau
   — le filtre GeneratePress prévu pour ça ne suffit pas sur ce type de
   page). C'est maintenant le titre H2/H3 inséré par la cliente en haut
   de sa Fiche matériau (modèle "Fiche matériau", voir
   aya_register_bloc_pattern_materiau) qui fait office de titre visible. */
.tax-materiau .page-header{
  display: none;
}

/* Contenu de la Page associée à un matériau (voir aya-page-materiau-liee
   dans functions.php) : titres mis en cohérence avec les autres titres
   de section du site (majuscules, lettres espacées).

   Alignement avec les autres pages (ex. "Agence & contact") : ce
   contenu est injecté directement dans main.site-main, sans passer
   par le bloc <article><div class="inside-article"> qu'utilisent les
   Pages normales — c'est ce bloc qui, sur le reste du site, fournit à
   la fois le retrait gauche/droit (40px, 15px en haut sur grand écran
   — réglage personnalisé du site dans "CSS additionnel", 30px partout
   en dessous de 768px) ET la pleine largeur du conteneur général de
   la page (1200px). On reproduit donc ici le même retrait (padding)
   et on laisse le bloc prendre toute cette largeur (pas de max-width
   restreint) : le texte démarre et s'étale exactement comme sur les
   autres pages, sans bande blanche anormale sur les grands écrans.

   La réduction de taille demandée porte uniquement sur les PHOTOS de
   la galerie (voir la règle sur .wp-block-image plus bas) — pas sur
   ce bloc ni sur le texte, qui restent en pleine largeur. */
.aya-page-materiau-liee{
  margin: 0;
  padding: 40px;
}
@media (min-width: 783px){
  .aya-page-materiau-liee{
    padding-top: 15px;
  }
}
@media (max-width: 768px){
  .aya-page-materiau-liee{
    padding: 30px;
  }
}
.aya-page-materiau-liee h2,
.aya-page-materiau-liee h3,
.aya-page-materiau-liee h4{
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* Photos de la galerie des projets liés : taille FIXE (150px) plutôt
   qu'en pourcentage du conteneur — elles ne s'étirent donc plus pour
   remplir toute la largeur disponible. Comme le bloc lui-même est en
   pleine largeur (voir plus haut), le résultat est une rangée de
   petites photos alignée à gauche comme le reste du contenu, sans
   bande blanche à droite du bloc de texte.

   !important ET sélecteur renforcé nécessaires ici : WordPress
   imprime lui-même une règle ".wp-block-gallery.is-cropped
   .wp-block-image" avec flex-basis et max-width en !important, ET
   placée dans le code source APRÈS notre feuille de style — vérifié
   en direct sur le site. Résultat : même avec un simple !important
   de notre côté, à spécificité égale (3 classes de part et d'autre),
   c'est la règle de WordPress qui l'emporte car elle vient après.
   D'où le fait qu'aucun changement n'était visible malgré les essais
   précédents à 220px puis 150px. On ajoute donc ".is-cropped" à notre
   sélecteur (la galerie a bien les deux classes "aya-galerie-projets"
   ET "is-cropped" en même temps) pour porter notre règle à 4 classes
   — strictement plus spécifique que celle de WordPress, donc gagnante
   quel que soit l'ordre de chargement. */
.aya-page-materiau-liee .aya-galerie-projets.is-cropped .wp-block-image{
  flex: 0 1 200px !important;
  flex-basis: 200px !important;
  max-width: 200px !important;
}

/* Sur mobile, les photos (200px) ne rentrent plus qu'une par ligne
   dans le bloc de contenu (environ 315px de large une fois le
   padding retiré) : par défaut elles restaient collées à gauche
   comme le texte, ce qui donnait un empilement décalé peu naturel.
   On centre donc la galerie elle-même sous ce seuil pour un
   empilement propre, bien centré sous le texte. */
@media (max-width: 768px){
  .aya-page-materiau-liee .aya-galerie-projets{
    justify-content: center;
  }
}
.aya-page-materiau-liee .wp-block-separator{
  width: 25%;
  margin: 30px auto;
}

/* ---- Page "Matériaux" (/materiaux/) construite à la main avec des
   blocs "Colonnes" natifs (2 rangées de 4) ----
   Ne gère plus que la largeur/centrage du bloc de colonnes et le
   passage à 2 icônes par ligne sur petit écran : le centrage de
   l'image/du titre et la taille de police du titre sont désormais
   réglés directement dans l'admin de la page (blocs natifs), donc on
   ne les fixe plus ici pour éviter tout conflit avec ces réglages.
   Ciblé uniquement sur cette page via la classe "page-materiaux"
   ajoutée par aya_body_class_page_materiaux() dans functions.php.

   Largeur remontée de 620px à 820px (09/09) pour laisser plus de place
   à chaque icône — reste sous les 840px de largeur de contenu du site
   (theme.json > contentSize), donc pas de dépassement anormal sur les
   grands écrans. Pour l'agrandir encore, il suffit de remonter cette
   valeur (dans la limite de 840px pour rester cohérent avec le reste
   du site). */
body.page-materiaux .entry-content > .wp-block-columns{
  max-width: 820px;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 28px !important;
}

/* Le cœur de WordPress empile les colonnes (flex-basis: 100% !important)
   dès que la fenêtre passe sous 781px, et ne repasse en rangée qu'à
   partir de 782px (voir wp-includes/css/dist/block-library/style.css).
   Notre propre passage "2 icônes par ligne" doit donc démarrer au même
   point exactement — sans quoi il existe une zone morte entre notre
   ancien seuil (700px) et celui de WordPress (781px) où les colonnes
   restent empilées en 1 par ligne sans nos réglages compacts, ce qui
   provoquait le bug de mise en page signalé entre 701 et 781px. */
@media (max-width: 781px){
  /* Le "gap" doit impérativement rester cohérent avec le calcul de
     largeur des colonnes juste en dessous (50% moins la moitié du
     gap) : sans ce gap fixe à 22px ici, les colonnes gardaient le
     gap de 28px de la règle "bureau" ci-dessus alors que leur largeur
     était calculée pour un gap de 22px, ce qui faisait dépasser les
     2 colonnes de 6px et les forçait à repasser en 1 par ligne. */
  body.page-materiaux .entry-content > .wp-block-columns{
    flex-wrap: wrap !important;
    gap: 22px !important;
  }
  body.page-materiaux .entry-content > .wp-block-columns > .wp-block-column{
    flex-basis: calc(50% - 11px) !important;
    width: calc(50% - 11px) !important;
    margin: 0 0 22px !important;
  }
}

/* Sur mobile (petits écrans), on resserre en plus la largeur du bloc
   pour rester compact (le gap de 22px et le passage 2 par ligne
   restent hérités de la règle ci-dessus). */
@media (max-width: 480px){
  body.page-materiaux .entry-content > .wp-block-columns{
    max-width: 420px;
  }
}