/* ==========================================================================
   SITE — la coquille commune : fond, largeur des pages, titres, contenus
   éditoriaux, bandeaux du sync, page introuvable.
   Coquille : templates/header.html.twig et footer.html.twig.
   ========================================================================== */

body {
  margin: 0;
  background: var(--md-papier-2);
  color: var(--md-encre);
  font-size: var(--t-2);
  line-height: 1.6;
}

.site { display: block; min-height: 50vh; padding-bottom: var(--e-8); }
.site__ariane { padding-top: var(--e-5); }
.site__ariane + .page,
.site__ariane + * { margin-top: 0; }

/* Les gabarits PHP de WordPress et WooCommerce enveloppent leur contenu dans
   .page.type-page : c'est la largeur standard d'une page. */
.site .page {
  width: 100%; max-width: var(--largeur); margin-inline: auto;
  padding: var(--e-6) var(--e-5) 0;
  background: none;   /* l'ancien thème peignait la page en blanc : le fond pâle court sur toute la page */
}
@media (max-width: 640px) { .site .page { padding-inline: var(--e-4); } }

/* ---------------------------------------------------------- titres de page */
.site :is(h1.content-page-title, h1.page-title, .page-header h1, .woocommerce-products-header__title, .entry-title) {
  margin: 0 0 var(--e-5);
  font-family: var(--f-titre); font-size: var(--t-6); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.02em; text-transform: none;
  color: var(--md-encre); border: 0; padding: 0;
}
.site h1.content-page-title.xxl { font-size: var(--t-6); }

/* Titres d'en-tête de page dans l'espace client et les pages réservées
   (<header><h1 class="border-bottom p-2">) */
.site .page > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-5); }
.site .page > header h1 { margin: 0; padding: 0 !important; border: 0 !important; font-size: var(--t-6); }
.site .page > header > a { order: 2; }
.site .page > main { padding: 0 !important; }

/* --------------------------------------------------------- contenus édités */
.site :is(.entry-content, .custom-content, .page-section, .term-description) {
  max-width: 78ch;
}
.site :is(.entry-content, .custom-content, .page-section) :is(h2, h3, h4) { margin: var(--e-6) 0 var(--e-3); }
.site :is(.entry-content, .custom-content, .page-section) h2 { font-size: var(--t-5); }
.site :is(.entry-content, .custom-content, .page-section) h3 { font-size: var(--t-4); }
.site :is(.entry-content, .custom-content, .page-section) h4 { font-size: var(--t-3); }
.site :is(.entry-content, .custom-content, .page-section) :is(ul, ol) { margin: 0 0 var(--e-4); padding-left: 1.3rem; }
.site :is(.entry-content, .custom-content, .page-section) li { margin-bottom: var(--e-2); }
.site :is(.entry-content, .custom-content, .page-section) p { color: var(--md-encre-2); }
.site :is(.entry-content, .custom-content, .page-section) strong { color: var(--md-encre); }
.site :is(.entry-content, .custom-content, .page-section) img { border-radius: var(--rayon-2); }
.site .term-description { color: var(--md-encre-2); font-size: var(--t-3); }
.site .text-justify { text-align: left !important; }

/* ------------------------------------------------- bandeaux du sync */
.bandeaux { padding-top: var(--e-4); }
.bandeaux .bandeau-sync + .bandeau-sync { margin-top: var(--e-3); }
.bandeaux .bandeau-sync .alert {
  margin: 0; padding: var(--e-3) var(--e-5);
  border: var(--trait-1) solid var(--md-trait-2); border-radius: var(--rayon-2);
  background: var(--md-papier); color: var(--md-encre-2);
  font-size: var(--t-1); line-height: 1.5;
}
.bandeaux .bandeau-sync .alert strong { color: var(--md-encre); }
.bandeaux .bandeau-sync .alert a { color: var(--md-encre); font-weight: 700; text-decoration: underline; text-decoration-color: var(--marque); }
.bandeaux .bandeau-sync .alert ul { margin: var(--e-2) 0 0; padding-left: 1.2rem; }

/* notifications de WooCommerce, déplacées ici par design.js : même carte que les
   bandeaux du sync, liseré de couleur selon le type, bouton compact à droite */
.bandeaux .conteneur > * + * { margin-top: var(--e-3); }
.bandeaux .notice-woo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4);
  margin-bottom: 0; padding: var(--e-3) var(--e-5); list-style: none;
  border: var(--trait-1) solid var(--md-trait-2); border-left: 4px solid var(--marque); border-radius: var(--rayon-2);
  background: var(--md-papier); color: var(--md-encre-2); font-size: var(--t-1); line-height: 1.5;
}
.bandeaux .notice-woo::before, .bandeaux .notice-woo::after { display: none; content: none; }
.bandeaux .notice-woo.woocommerce-message { border-left-color: #1F8A4C; }
.bandeaux .notice-woo.woocommerce-error { border-left-color: #B42318; }
.bandeaux .notice-woo li { margin: 0; }
.bandeaux .notice-woo strong { color: var(--md-encre); }
.bandeaux .notice-woo a:not(.button) { color: var(--md-encre); font-weight: 700; text-decoration: underline; text-decoration-color: var(--marque); }
.bandeaux .notice-woo .button {
  order: 2; width: auto; min-height: 0; margin: 0; padding: var(--e-2) var(--e-4);
  border: var(--trait-1) solid var(--md-encre); border-radius: var(--rayon-1);
  background: transparent; color: var(--md-encre); font-size: var(--t-0); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.bandeaux .notice-woo .button:hover { background: var(--md-encre); color: var(--md-papier); }
.bandeaux .bandeau-sync .alert-info { background: var(--marque-voile); border-color: var(--marque-trait); }
.bandeaux .bandeau-sync .alert-warning { background: #FFF7E6; border-color: #F2C98B; }
.bandeaux .bandeau-sync .alert-danger { background: #FDECEC; border-color: #F5B5B5; }
.bandeaux .bandeau-sync .alert-success { background: var(--etat-ok-voile); border-color: #A7D7B5; }

/* -------------------------------------------------------- page introuvable */
.site .error-404 { padding-block: var(--e-8); text-align: center; }
.site .error-404 h1 { font-size: var(--t-7, var(--t-6)); }
.site .error-404 hr { display: none; }

/* -------------------------------------------- une section pleine largeur */
.bande { padding-block: var(--e-8); }
.bande--blanche { background: var(--md-papier); border-block: var(--trait-1) solid var(--md-trait); }

/* Bannière « Opération déstockage » (injectée par script, actions-*.php) :
   alignée sur la largeur des pages. */
.site .destockage-banner { max-width: var(--largeur); margin: var(--e-4) auto 0; padding-inline: var(--e-5); }

/* pages de contenu (templates/<marque>/pages/static-*.html.twig) */
.site .custom-header { margin-bottom: var(--e-5); }
.site .lead { font-size: var(--t-4); font-weight: 600; line-height: 1.4; color: var(--md-encre) !important; }
.site .custom-content .lead { max-width: 60ch; }

/* images de l'ancien thème posées en fond d'un bloc à largeur fixe (portrait
   de « Qui sommes-nous ? »…) : jamais plus larges que l'écran */
.site .meat-image { max-width: 100%; background-size: contain; background-repeat: no-repeat; }
/* …avec ses marges Bootstrap (m-3, !important en couche : intouchables) */
.site .meat-image { max-width: calc(100% - 2rem); }