/*
Theme Name:   Balais Coulom
Theme URI:    https://www.balaispaillecoulom.com
Description:  Thème enfant de Twenty Twenty-Five pour l'atelier Jean-Marc Coulom,
              dernier fabricant du balai de paille de sorgho de Grisolles.
              Reprend la palette et la typographie du site d'origine — Open Sans,
              Tinos, fond greige et or paille — en corrigeant les contrastes.
Author:       Stacklab — Valentin Renaudin
Template:     twentytwentyfive
Version:      1.2.0
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  balais-coulom
Tags:         blog, portfolio, one-column, block-patterns, full-site-editing
*/

/* ------------------------------------------------------------------
   Couleurs, tailles de texte et espacements sont dans theme.json.
   Ce fichier ne couvre que ce que theme.json ne sait pas exprimer.
   ------------------------------------------------------------------ */


/* ==================================================================
   LISIBILITÉ DE L'OR

   Le site d'origine posait son or paille (#F5D693) sur le fond greige
   (#E8DFDD) : environ 1,35:1, et ses titres en blanc pur sur le même
   fond, environ 1,13:1. Les deux sont très en deçà du minimum de 4,5:1.

   Le parti retenu : l'or reste l'identité du site, mais il ne porte
   plus de texte sur fond clair. Il vit désormais sur les photographies
   sombres de l'atelier, où il atteint un contraste confortable, et
   sert de filet décoratif ailleurs. Sur le greige, les liens passent
   en ocre (#8A6A16, 4,6:1) et les titres en noir.
   ================================================================== */

/* Soulignement or au survol du menu : la couleur d'identité revient,
   sans jamais porter la lisibilité.

   Le soulignement natif que WordPress applique aux liens du menu au
   survol est supprimé : sans cela il se superpose au filet or et on
   lit deux traits. Le filet or le remplace, il ne s'y ajoute pas. */
.menu-principal .wp-block-navigation-item__content,
.menu-principal .wp-block-navigation-item__content:hover,
.menu-principal .wp-block-navigation-item__content:focus,
.menu-principal .wp-block-navigation-item__content:focus-visible,
.menu-principal .wp-block-navigation-item__content:active {
  text-decoration: none;
}

.menu-principal .wp-block-navigation-item__content {
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease;
}
.menu-principal .wp-block-navigation-item__content:hover,
.menu-principal .wp-block-navigation-item__content:focus-visible,
.menu-principal .current-menu-item .wp-block-navigation-item__content {
  border-bottom-color: var(--wp--preset--color--or);
}

/* Sur les fonds sombres — hero, bandeaux photo — l'or redevient
   la couleur des titres, comme sur le site d'origine. */
.sur-photo :where(h1, h2, h3) {
  color: var(--wp--preset--color--or);
}
.sur-photo p {
  color: #F3EEEA;
}

/* Un aplat d'or porte toujours du texte en encre. */
.has-or-background-color {
  color: var(--wp--preset--color--encre);
}


/* ==================================================================
   CATALOGUE DES MODÈLES
   Bandes pleine largeur alternées : texte à gauche / photo à droite,
   puis l'inverse — la présentation du site d'origine.
   ================================================================== */

@media (min-width: 782px) {
  .catalogue-liste > li:nth-child(even) .wp-block-columns {
    flex-direction: row-reverse;
  }
}

.catalogue-liste .wp-block-post-title {
  text-wrap: balance;
  hyphens: none;
}

.catalogue-liste .wp-block-post-content > p {
  margin-block-start: var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--gris);
}


/* ==================================================================
   FORMULAIRE DE CONTACT

   Contact Form 7 ne fournit aucun style : les champs tombent sur les
   contrôles natifs du navigateur, qui n'ont rien à voir avec le reste
   du site. Tout est repris ici — le formulaire n'a pas besoin d'être
   modifié, seulement habillé.
   ================================================================== */

.wpcf7 .wpcf7-form p {
  margin-block-end: var(--wp--preset--spacing--40);
}

.wpcf7 .wpcf7-form label {
  display: block;
  font-weight: 500;
}

.wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-block-start: 0.6rem;
}

/* Les champs héritent de la typographie du site : un formulaire qui
   parle une autre langue que la page se voit immédiatement. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  color: var(--wp--preset--color--encre);
  background-color: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--ligne);
  border-radius: 2px;
  padding: 0.8rem 1rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.wpcf7 textarea {
  min-height: 12rem;
  resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--ocre);
  box-shadow: 0 0 0 3px rgba(245, 214, 147, .45);
}

.wpcf7 ::placeholder {
  color: var(--wp--preset--color--gris);
  opacity: 1;
}

/* Le bouton d'envoi est un appel à l'action comme les autres : même
   découpe, mêmes capitales, mêmes états. */
.wpcf7 input[type="submit"] {
  font-family: var(--wp--preset--font-family--corps);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--fond);
  background-color: var(--wp--preset--color--ocre);
  border: 0;
  border-radius: 2px;
  padding: 0.9rem 2.25rem;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
  background-color: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--or);
  transform: translateY(-1px);
}

.wpcf7 input[type="submit"]:focus-visible {
  outline: 2px solid var(--wp--preset--color--or);
  outline-offset: 3px;
}

/* Messages d'erreur et de confirmation : lisibles, dans la palette,
   et jamais rouge pur — qui jure avec le greige. */
.wpcf7 .wpcf7-not-valid-tip {
  font-size: 0.8em;
  color: #A8321E;
  margin-block-start: 0.4rem;
}

.wpcf7 .wpcf7-form-control.wpcf7-not-valid {
  border-color: #A8321E;
}

.wpcf7 .wpcf7-response-output {
  font-size: 0.9em;
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: 1rem 1.25rem;
  border-width: 1px;
  border-radius: 2px;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--wp--preset--color--ocre);
  background-color: var(--wp--preset--color--creme);
}

.wpcf7 .wpcf7-spinner {
  margin-inline-start: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .wpcf7 input[type="submit"] {
    transition: none;
  }
  .wpcf7 input[type="submit"]:hover {
    transform: none;
  }
}


/* ------------------------------------------------------------------
   FICHE D'UN BALAI

   Longueur, prix et usage sortent du paragraphe où ils étaient noyés
   en fin de phrase, et deviennent trois lignes lisibles d'un coup
   d'œil. Le pictogramme porte le sens à lui seul ; le libellé écrit
   existe quand même, masqué visuellement, pour les lecteurs d'écran
   — une icône seule ne se lit pas à voix haute.
   ------------------------------------------------------------------ */

.fiche-balai {
  list-style: none;
  margin: var(--wp--preset--spacing--40) 0 0;
  padding: var(--wp--preset--spacing--30) 0 0;
  border-block-start: 1px solid var(--wp--preset--color--ligne);
  display: grid;
  gap: 0.7rem;
}

.fiche-balai li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.fiche-icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  color: var(--wp--preset--color--ocre);
  /* Les pictogrammes sont dessinés sur une grille de 24 : alignés sur
     la ligne de base du texte ils flottent, d'où ce rattrapage. */
  transform: translateY(0.18em);
}

.fiche-valeur {
  text-wrap: balance;
}

.fiche-prix {
  font-weight: 600;
}

/* Libellés lus, jamais vus : la technique standard, qui garde le texte
   dans le flux d'accessibilité sans l'afficher ni le faire défiler. */
.fiche-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==================================================================
   IMAGES
   ================================================================== */

.wp-block-post-featured-image img {
  border: 1px solid var(--wp--preset--color--ligne);
}

/* Le hero est une photographie : pas de filet, il irait à l'encontre
   du cadrage plein bord. */
.sur-photo .wp-block-cover__image-background {
  border: 0;
}


/* ==================================================================
   EN-TÊTE SUPERPOSÉE À LA BANNIÈRE

   L'en-tête se pose par-dessus la bannière de chaque page, sur fond
   transparent. Logo et menu passent en clair : ils se lisent sur la
   photographie assombrie, et l'or reste réservé au survol.
   ================================================================== */

.wp-site-blocks > header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  background: transparent;
}

/* L'en-tête étant hors du flux, la gouttière que WordPress place entre
   les blocs de premier niveau laisserait une bande de fond visible
   au-dessus de la bannière. On la supprime pour le premier élément. */
.wp-site-blocks > main {
  margin-block-start: 0;
}


/* ==================================================================
   RYTHME VERTICAL DES SECTIONS

   Chaque section de page porte déjà son propre rembourrage haut et
   bas. La gouttière que WordPress ajoute entre blocs de premier
   niveau venait s'y additionner : entre deux sections on lisait le
   bas de la première, plus la gouttière, plus le haut de la seconde
   — d'où les grands vides. Les rembourrages suffisent à eux seuls,
   on retire la gouttière à ce niveau.

   La règle ne vise que les enfants directs du contenu : à l'intérieur
   des sections, l'espacement entre paragraphes reste intact.
   ================================================================== */

.entry-content > * {
  margin-block-start: 0;
}

/* Exception : les blocs qui suivent immédiatement une bannière et qui
   ne portent pas de rembourrage propre — galeries, colonnes, images.
   Sans cela ils viennent se coller au bas de la photographie. */
.banniere + .wp-block-query,
.banniere + .wp-block-columns,
.banniere + .wp-block-image,
.banniere + .wp-block-gallery {
  margin-block-start: var(--wp--preset--spacing--60);
}

.entete-transparente .wp-block-site-logo img {
  /* Le médaillon est un disque blanc : un léger halo le détache
     des photographies claires sans l'encadrer. */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35));
}

.menu-principal .wp-block-navigation-item__content {
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}


/* ==================================================================
   BANNIÈRES

   Un dégradé en haut de chaque bannière garantit la lisibilité du
   menu quelle que soit la photographie, y compris sur ses zones
   claires. Il se pose sous le contenu, jamais par-dessus.
   ================================================================== */

.banniere {
  position: relative;
}

.banniere::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 220px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent);
  pointer-events: none;
  z-index: 1;
}

.banniere > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* Les bannières intérieures laissent la place à l'en-tête flottante. */
.banniere {
  padding-top: clamp(7rem, 12vh, 10rem) !important;
}


/* ------------------------------------------------------------------
   Menu centré dans la page, logo calé à gauche.

   Une grille en trois colonnes (1fr | auto | 1fr) place le menu au
   centre réel de la page, indépendamment de la largeur du logo — ce
   qu'un simple flex ne permet pas, le menu s'y décalant toujours vers
   la droite de la moitié du logo.
   ------------------------------------------------------------------ */

@media (min-width: 782px) {
  .entete-transparente > .wp-block-group {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
  }

  .entete-transparente .wp-block-site-logo {
    grid-column: 1;
    justify-self: start;
  }

  .entete-transparente .menu-principal {
    grid-column: 2;
    justify-self: center;
  }

  .entete-actions {
    grid-column: 3;
    justify-self: end;
  }
}


/* ------------------------------------------------------------------
   Taille et espacement du menu : tenus ici et non dans le bloc.

   Posés en attribut, ils devenaient des styles en ligne, impossibles
   à faire varier selon la largeur d'écran sans !important. En CSS,
   la barre peut descendre d'un cran quand elle est à l'étroit.
   ------------------------------------------------------------------ */

.menu-principal {
  font-size: 1.375rem;
}

.menu-principal .wp-block-navigation__container {
  gap: 1.75rem;
}

/* Rien, dans la barre, ne se casse en deux lignes : ni une entrée de
   menu, ni le libellé du bouton, ni la paire de pictogrammes. Quand
   la place manque, c'est l'échelle qui cède, pas la mise en page. */
.entete-actions,
.reseaux-entete,
.entete-actions .wp-block-buttons {
  flex-wrap: nowrap;
}

.cta-entete > .wp-block-button__link,
.menu-principal .wp-block-navigation-item__content {
  white-space: nowrap;
}

/* Entre 782 et 1100 px, la barre porte quatre entrées, deux logos et
   un bouton sur une seule ligne : tout descend d'un cran. */
@media (min-width: 782px) and (max-width: 1100px) {
  .menu-principal {
    font-size: 1.125rem;
  }

  .menu-principal .wp-block-navigation__container {
    gap: 1.25rem;
  }

  .cta-entete > .wp-block-button__link {
    font-size: 1.125rem;
    padding: 0.5rem 1.15rem;
  }

  .reseaux-entete {
    font-size: 1.4rem;
  }

  .entete-transparente .wp-block-site-logo,
  .entete-transparente .wp-block-site-logo img {
    width: 72px !important;
    height: auto !important;
  }
}


/* ==================================================================
   ACTIONS D'EN-TÊTE — RÉSEAUX SOCIAUX ET APPEL À L'ACTION

   À droite du menu : les deux réseaux de l'atelier en pictogrammes
   nus, puis le bouton de contact. Le bouton est sorti du menu — une
   navigation liste des pages, un appel à l'action demande un geste ;
   les mêler affaiblit les deux.
   ================================================================== */

.entete-actions {
  align-items: center;
}

/* Les pictogrammes se calent sur la hauteur de capitale du menu,
   un cran au-dessus pour rester lisibles : un logo reconnu de loin
   vaut mieux qu'un logo aligné au pixel. */
.reseaux-entete {
  font-size: 1.3rem;
}

/* Au format large, la barre a la place de les porter plus grands :
   les pictogrammes passent nettement au-dessus de la hauteur de
   capitale du menu. Un logo se reconnaît à sa forme, pas à sa
   taille de texte — l'aligner sur le menu le rendait timide. */
@media (min-width: 782px) {
  .reseaux-entete {
    font-size: 1.75rem;
  }
}

/* Pictogrammes seuls, sans pastille, dans la même encre claire que
   le menu et avec le même halo pour tenir sur les photographies. */
.reseaux-entete.is-style-logos-only .wp-block-social-link-anchor {
  color: var(--wp--preset--color--blanc);
  transition: color .18s ease, transform .18s ease;
}

.reseaux-entete.is-style-logos-only .wp-block-social-link:hover .wp-block-social-link-anchor,
.reseaux-entete.is-style-logos-only .wp-block-social-link:focus-within .wp-block-social-link-anchor {
  color: var(--wp--preset--color--or);
  transform: translateY(-1px);
  opacity: 1;
}

.reseaux-entete svg {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .55));
}

/* Le bouton de contact reprend la découpe des appels à l'action du
   site, à l'échelle du menu qu'il côtoie.

   Sa taille est exactement celle des entrées de menu et du texte
   courant : 1,375 rem partout. En capitales le bouton paraîtra un
   rien plus imposant que ses voisins en bas-de-casse — c'est la
   contrepartie assumée d'une échelle unique. */
.cta-entete > .wp-block-button__link {
  font-size: 1.375rem;
  letter-spacing: 0.1em;
  padding: 0.55rem 1.5rem;
  border-width: 1px;
}

/* Le contact existe deux fois : en bouton dans la barre au format
   large, en entrée de menu au format téléphone, où le bouton n'a plus
   la place de tenir. Chaque format n'en affiche qu'un seul. */
@media (min-width: 782px) {
  .menu-principal .lien-contact {
    display: none;
  }
}


/* ------------------------------------------------------------------
   BARRE AU FORMAT TÉLÉPHONE

   Logo réduit à gauche, réseaux puis ouverture du menu à droite.
   L'ordre visuel est réglé ici plutôt que dans le balisage : le même
   en-tête sert les deux formats, seule sa disposition change.
   ------------------------------------------------------------------ */

@media (max-width: 781px) {
  .entete-transparente > .wp-block-group {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--30);
  }

  .entete-transparente .wp-block-site-logo {
    order: 1;
    margin-inline-end: auto;
  }

  .entete-actions {
    order: 2;
  }

  /* Le bouton d'ouverture ferme la marche, contre le bord droit. */
  .entete-transparente .menu-principal {
    order: 3;
  }

  /* Le médaillon fait 96 px au format large : à l'échelle d'un
     téléphone il mange la photographie. La largeur étant posée en
     style en ligne par le bloc, seul un !important la reprend. */
  .entete-transparente .wp-block-site-logo,
  .entete-transparente .wp-block-site-logo img {
    width: 58px !important;
    height: auto !important;
  }

  /* Le bouton sort de la barre : le contact se prend dans le menu
     déroulant, où il a la place d'exister.

     La règle vise le conteneur de boutons autant que le bouton :
     WordPress déclare l'affichage des boutons sur un sélecteur à
     deux classes, qui l'emportait sur un `.cta-entete` seul — le
     bouton restait visible malgré la consigne. */
  .entete-actions .wp-block-buttons,
  .entete-actions .cta-entete {
    display: none;
  }
}


/* ------------------------------------------------------------------
   MENU DÉROULANT

   Les entrées s'alignent sur une marge franche plutôt que de coller
   au bord de l'écran, et respirent verticalement : au doigt, une
   cible tient dans le pouce, pas dans le pixel.
   ------------------------------------------------------------------ */

.menu-principal .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  align-items: flex-start;
  padding-inline-start: var(--wp--preset--spacing--50);
  padding-inline-end: var(--wp--preset--spacing--40);
}

.menu-principal .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  align-items: flex-start;
  gap: var(--wp--preset--spacing--30);
}

/* Dans le déroulant, le soulignement or ne sert plus de repère de
   survol — il n'y a pas de survol au doigt. On le retire pour ne pas
   laisser un filet transparent décaler les entrées. */
.menu-principal .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  border-bottom: 0;
  padding-bottom: 0;
  text-shadow: none;
}

/* Le contact reste un appel à l'action même sans son bouton : un
   filet l'isole des pages, et il garde l'or plein pendant que les
   entrées de navigation le partagent. */
.menu-principal .wp-block-navigation__responsive-container.is-menu-open
  .lien-contact {
  margin-block-start: var(--wp--preset--spacing--30);
  padding-block-start: var(--wp--preset--spacing--30);
  border-block-start: 1px solid rgba(245, 214, 147, .35);
  align-self: stretch;
}

.menu-principal .wp-block-navigation__responsive-container.is-menu-open
  .lien-contact .wp-block-navigation-item__content {
  font-size: 1.375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ==================================================================
   BOUTONS D'APPEL À L'ACTION

   Traitement en capitales espacées plutôt qu'en gras : un bouton est
   une étiquette, pas une phrase. L'interlettrage fait écho à celui du
   menu et donne au bouton l'allure d'une estampille, ce qui convient
   mieux à un atelier qu'un aplat générique.

   Les états de survol sont écrits ici et non dans theme.json : quand
   un bouton porte ses couleurs au niveau du bloc — comme ceux du hero
   — elles l'emportent sur les réglages globaux, et le survol défini
   dans theme.json ne s'applique jamais.
   ================================================================== */

.wp-block-button__link {
  transition: background-color .22s ease, color .22s ease,
              border-color .22s ease, transform .22s ease;
}

/* Les `!important` qui suivent ne sont pas une facilité : quand un
   bouton porte ses couleurs au niveau du bloc, WordPress génère des
   classes `has-…-color` / `has-…-background-color` déclarées en
   `!important` dans sa feuille de styles. Sans `!important` ici, le
   survol ne change que ce que ces classes ne fixent pas — d'où le
   bouton contour qui passait en or sur or, texte illisible. */

/* Bouton plein : passe à l'encre, le texte vire à l'or. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--encre) !important;
  color: var(--wp--preset--color--or) !important;
  transform: translateY(-1px);
}

/* Bouton contour : se remplit au survol. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border-width: 1px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--or) !important;
  border-color: var(--wp--preset--color--or) !important;
  color: var(--wp--preset--color--encre) !important;
  transform: translateY(-1px);
}

/* Le focus reste visible au clavier, indépendamment du survol. */
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--or);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link {
    transition: none;
  }
  .wp-block-button__link:hover,
  .wp-block-button__link:focus-visible {
    transform: none;
  }
}