/*
Theme Name: Atelier du vélo
Description: Thème enfant de Twenty Twenty-Five pour l'Atelier du vélo à Saint-André. Il ne porte que l'habillage (couleurs, polices, en-tête, pied de page) : le contenu reste en blocs standard et les fonctions du site vivent dans l'extension atelier-velo-core, pour pouvoir changer de thème sans refaire les pages.
Template: twentytwentyfive
Version: 0.5.2
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: atelier-velo
License: GPL-2.0-or-later
*/

/* Liens soulignés seulement au survol dans la navigation, toujours dans le texte. */
.wp-block-navigation a { text-decoration: none; }
.wp-block-navigation a:hover, .wp-block-navigation a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* Cartes de la page d'accueil : même hauteur, bouton calé en bas. */
.av-cartes > .wp-block-column { display: flex; flex-direction: column; }
.av-cartes > .wp-block-column > .wp-block-buttons:last-child { margin-top: auto; }

/* Tableaux de tarifs lisibles sur mobile. */
.wp-block-table.av-tarifs td:last-child, .wp-block-table.av-tarifs th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

:where(.wp-site-blocks) :focus-visible { outline: 3px solid var(--wp--preset--color--accent-3); outline-offset: 2px; }

/* Listes de liens du pied de page : sans puces. */
footer .wp-block-list { list-style: none; }

/* Fiche produit : titre plus mesuré, les noms de pièces sont longs. */
.single-product h1.wp-block-post-title { font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.2rem); }

/* Tableaux : filets fins, en-têtes alignés à gauche. */
.wp-block-table table { border-collapse: collapse; }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 1px solid var(--wp--preset--color--accent-6); padding: .55em .6em; }
.wp-block-table thead { border-bottom: 2px solid var(--wp--preset--color--contrast); }
.wp-block-table th { text-align: left; }

/* Logo : marque (roulement) + nom. */
.av-logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--wp--preset--color--contrast); }
.av-logo__texte { display: flex; flex-direction: column; line-height: 1.05; }
.av-logo__nom { font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.45rem; letter-spacing: -.005em; }
.av-logo__lieu { font-size: .88rem; color: var(--wp--preset--color--accent-4); }
.av-logo:hover .av-logo__nom { color: var(--wp--preset--color--accent-3); }
@media (max-width: 600px) {
  .av-logo__marque { width: 36px; height: 36px; }
  .av-logo__nom { font-size: 1.2rem; }
  .av-logo__lieu { font-size: .78rem; }
  .av-entete > .wp-block-group { gap: .4rem !important; }
}

/* Liens soulignés en lagon. */
a { text-decoration-color: var(--wp--preset--color--accent-3); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Sur fond basalte : boutons pleins en lagon lumineux, texte foncé. */
.has-contrast-background-color .wp-element-button:not(.is-style-outline *),
.has-contrast-background-color .wp-block-button:not(.is-style-outline) .wp-element-button {
  background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast);
}
.has-contrast-background-color .wp-element-button:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.has-contrast-background-color a:not(.wp-element-button) { text-decoration-color: var(--wp--preset--color--accent-1); }

/* Cartes produit (catalogue, accueil, produits similaires). */
.wc-block-product, ul.products li.product {
  background: #fff; border: 1px solid var(--wp--preset--color--accent-6); border-radius: 8px;
  padding: 0 0 1rem; overflow: hidden; display: flex; flex-direction: column;
}
.wc-block-product .wc-block-components-product-image, ul.products li.product img { margin: 0 0 .8rem !important; }
/* Vignettes au format 4:3 sans rognage : photos du fournisseur (filigrane entier) et schémas carrés. */
.wc-block-product .wc-block-components-product-image img, ul.products li.product img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; width: 100%; height: auto; }
.wc-block-product .wp-block-post-title, ul.products li.product .woocommerce-loop-product__title { padding: 0 1rem; font-size: 1.05rem !important; line-height: 1.3; }
.wc-block-product .wp-block-post-title a { text-decoration: none; }
.wc-block-product .wc-block-components-product-button, ul.products li.product .button { margin-top: auto !important; padding: 0 1rem; }

/* Bandeau d'accueil : photo d'ambiance plein écran, voile basalte plus dense côté texte. */
.av-hero-photo { padding-inline: max(1.25rem, calc((100vw - 1140px) / 2)) !important; }
.av-hero-photo .wp-block-cover__background { background: linear-gradient(90deg, rgba(27, 32, 35, .9) 0%, rgba(27, 32, 35, .72) 42%, rgba(27, 32, 35, .15) 78%) !important; opacity: 1 !important; }
.av-hero-photo .wp-block-cover__inner-container { max-width: 620px; margin: 0 !important; color: var(--wp--preset--color--base); }
.av-hero-photo h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.05; margin: .3rem 0 1rem; }
.av-hero-photo a:not(.wp-element-button) { color: var(--wp--preset--color--accent-1); }
.av-surtitre { text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; font-weight: 600; color: var(--wp--preset--color--accent-1); margin: 0; }
@media (max-width: 781px) {
  .av-hero-photo { min-height: 0 !important; padding-block: 3.5rem !important; }
  .av-hero-photo .wp-block-cover__background { background: linear-gradient(180deg, rgba(27, 32, 35, .82) 0%, rgba(27, 32, 35, .7) 70%, rgba(27, 32, 35, .35) 100%) !important; }
  .av-hero-photo .wp-block-cover__image-background { object-position: 82% 50% !important; }
}

/* Bandeau photo des pages (gabarit page-bandeau) : image à la une, titre et chapô en bas à gauche. */
.av-bandeau { padding-inline: max(1.25rem, calc((100vw - 1140px) / 2)) !important; padding-block: 2.5rem !important; }
.av-bandeau .wp-block-cover__background { background: linear-gradient(0deg, rgba(27, 32, 35, .88) 0%, rgba(27, 32, 35, .55) 55%, rgba(27, 32, 35, .2) 100%) !important; opacity: 1 !important; }
.av-bandeau .wp-block-cover__inner-container { max-width: 760px; margin: 0 !important; color: var(--wp--preset--color--base); }
.av-bandeau h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); line-height: 1.08; margin: 0 0 .6rem; }
.av-bandeau__chapo, .av-bandeau__chapo p { font-size: 1.15rem; margin: 0; }
@media (max-width: 781px) { .av-bandeau { min-height: 300px !important; } }
/* Grille des conseils (page Conseils et accueil). */
.av-articles .wp-block-post-title { font-size: 1.35rem; line-height: 1.2; margin: .2rem 0 .5rem; }
.av-articles .wp-block-post-title a, .av-derniers-articles a { text-decoration: none; }
.av-articles .wp-block-post-featured-image { border-radius: 8px; overflow: hidden; margin-bottom: .8rem; }
.av-derniers-articles .wp-block-latest-posts__post-title { display: block; font-family: var(--wp--preset--font-family--barlow); font-weight: 700; font-size: 1.2rem; line-height: 1.2; margin-top: .3rem; color: var(--wp--preset--color--contrast); }
.av-derniers-articles .wp-block-latest-posts__featured-image img { border-radius: 8px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }

/* Cartes avec photo (services) et bande « terrain » : photos arrondies, légère animation au survol. */
.av-photo { margin: 0 0 1rem; border-radius: 8px; overflow: hidden; }
.av-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease; }
.av-photo a:hover img, .av-photo a:focus-visible img { transform: scale(1.04); }
.av-terrain .av-photo figcaption { color: var(--wp--preset--color--base); font-size: .95rem; text-align: left; margin-top: .6rem; }
.av-terrain .av-photo { overflow: visible; }
.av-terrain .av-photo a { display: block; border-radius: 8px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .av-photo img { transition: none; } }
/* Bandes pleine largeur de l'accueil collées les unes aux autres (pas de filet blanc entre deux fonds). */
.home .entry-content > .alignfull + .alignfull, .home .wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }

/* Grille produits des shortcodes WooCommerce : grille CSS, cartes de largeur égale. */
ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin: 0; padding: 0; }
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }

/* ===================== Finitions modernes ===================== */

/* Pagination : pastilles rondes, page courante en lagon, flèches dans des boutons. */
.av-pagination { gap: .4rem !important; margin-top: 2.5rem !important; align-items: center; flex-wrap: wrap; }
.av-pagination .wp-block-query-pagination-numbers { display: flex; gap: .4rem; align-items: center; }
.av-pagination .page-numbers, .av-pagination .wp-block-query-pagination-previous, .av-pagination .wp-block-query-pagination-next {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 2.75rem; height: 2.75rem; padding: 0 .9rem;
  border-radius: 999px; border: 1.5px solid var(--wp--preset--color--accent-6); background: #fff; color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--barlow); font-weight: 600; font-size: 1rem; text-decoration: none; margin: 0 !important;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.av-pagination .page-numbers.dots { border-color: transparent; background: transparent; min-width: 1.5rem; padding: 0; }
.av-pagination .page-numbers.current { background: var(--wp--preset--color--accent-3); border-color: var(--wp--preset--color--accent-3); color: #fff; box-shadow: 0 6px 16px rgba(11, 95, 104, .28); }
.av-pagination a.page-numbers:hover, .av-pagination a:hover.wp-block-query-pagination-previous, .av-pagination a:hover.wp-block-query-pagination-next,
.av-pagination a.page-numbers:focus-visible, .av-pagination a:focus-visible.wp-block-query-pagination-previous, .av-pagination a:focus-visible.wp-block-query-pagination-next {
  border-color: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-3); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(27, 32, 35, .1);
}
.av-pagination .wp-block-query-pagination-previous-arrow, .av-pagination .wp-block-query-pagination-next-arrow { margin: 0 !important; transition: transform .2s; }
.av-pagination a:hover .wp-block-query-pagination-previous-arrow { transform: translateX(-3px); }
.av-pagination a:hover .wp-block-query-pagination-next-arrow { transform: translateX(3px); }
@media (max-width: 600px) { .av-pagination .wp-block-query-pagination-previous, .av-pagination .wp-block-query-pagination-next { font-size: 0; gap: 0; padding: 0; } .av-pagination [class*="-arrow"] { font-size: 1.1rem; } }

/* En-tête collant : reste visible au défilement, s'affine avec une ombre légère. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.wp-site-blocks > header .wp-block-group.alignfull { transition: padding .3s ease, box-shadow .3s ease, background-color .3s ease; }
/* Pas de backdrop-filter ici : il enfermait le menu mobile (panneau en position fixe) dans la hauteur de l'en-tête dès qu'on avait défilé. */
.av-defile .wp-site-blocks > header .wp-block-group.alignfull { padding-top: .45rem !important; padding-bottom: .45rem !important; box-shadow: 0 6px 24px rgba(27, 32, 35, .08); background-color: rgba(247, 248, 246, .98) !important; }
.av-logo__marque { transition: transform .4s ease, width .3s ease, height .3s ease; }
.av-logo:hover .av-logo__marque { transform: rotate(-12deg); }
.av-defile .av-logo__marque { width: 36px; height: 36px; }

/* Menu : soulignement animé, sous-menu « Atelier » en carte avec apparition douce, textes sur une ligne. */
@media (min-width: 600px) {
  .wp-block-navigation .wp-block-navigation-item__content { position: relative; }
  .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--wp--preset--color--accent-3);
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
  }
  .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
  .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after { transform: scaleX(1); }
  .wp-block-navigation a:hover, .wp-block-navigation a:focus-visible { text-decoration: none; }
  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    min-width: 15rem !important; padding: .5rem !important; border: 1px solid var(--wp--preset--color--accent-6) !important; border-radius: 12px;
    background: #fff !important; box-shadow: 0 18px 40px rgba(27, 32, 35, .14); margin-top: .6rem;
    transform: translateY(8px); transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .wp-block-navigation .has-child .wp-block-navigation__submenu-container::before { content: ""; position: absolute; top: -.7rem; left: 0; right: 0; height: .7rem; }
  .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
  .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
  .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { transform: translateY(0); }
  .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    white-space: nowrap; padding: .6rem .85rem !important; border-radius: 8px; transition: background .18s, color .18s, padding-left .18s;
  }
  .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
  .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--accent-3); padding-left: 1.1rem !important;
  }
}

/* Cartes produit et articles : légère élévation au survol. */
.wc-block-product, ul.products li.product, .av-cartes-photo > .wp-block-column, .av-articles .wp-block-post { transition: transform .25s ease, box-shadow .25s ease; }
.wc-block-product:hover, ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(27, 32, 35, .1); }
.wc-block-product .wc-block-components-product-image img { transition: transform .45s ease; }
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
.wp-element-button, .wp-block-button__link { transition: transform .2s ease, box-shadow .2s ease, background-color .2s, color .2s; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(11, 95, 104, .22); }

/* Apparition au défilement (activée par effets.js ; sans JavaScript, tout reste visible). */
.av-anim .av-apparait { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--av-delai, 0ms); }
.av-anim .av-apparait.av-visible { opacity: 1; transform: none; }

/* Grandes photos (accueil, bandeaux) : léger effet de profondeur au défilement. */
.av-hero-photo, .av-bandeau { overflow: hidden; }
.av-hero-photo .wp-block-cover__image-background, .av-bandeau .wp-block-cover__image-background { will-change: transform; }

/* Pied de page révélé : la page glisse vers le haut et découvre le pied de page fixé dessous (écrans assez hauts). */
.av-pied-revele .wp-site-blocks > :not(footer):not(header) { position: relative; z-index: 1; background-color: var(--wp--preset--color--base); }
.av-pied-revele .wp-site-blocks > footer.wp-block-template-part { position: sticky; bottom: 0; z-index: 0; }
.av-pied-revele main { box-shadow: 0 24px 40px -20px rgba(27, 32, 35, .35); }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .av-anim .av-apparait { opacity: 1; transform: none; transition: none; }
  .wc-block-product, ul.products li.product, .wp-element-button, .wp-block-button__link, .wp-block-navigation .has-child .wp-block-navigation__submenu-container { transition: none; transform: none !important; }
}