/* Thème « socle » : les réglages du site sont des propriétés --mk-… définies dans la feuille du site. */
*, *::before, *::after { box-sizing: border-box; }
body.site {
  margin: 0;
  color: var(--mk-color-text, #1f2328);
  background: var(--mk-color-background, #ffffff);
  font-family: var(--mk-font-body, sans-serif);
  line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--mk-font-headings, sans-serif); line-height: 1.2; }
a { color: var(--mk-color-primary, #0b6e4f); }
img { max-width: 100%; height: auto; }
.conteneur { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.site-header { border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.site-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.site-name { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: inherit; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.site-nav a { text-decoration: none; }
.site-nav a.actif { text-decoration: underline; }
/* Menu replié sur téléphone (site-nav, ADR 0039) : la liste est un popover ouvert par le bouton Menu, sans
   JavaScript ; au-delà de 40rem, elle reste en ligne et le bouton est masqué. Sans prise en charge des popovers,
   la liste reste visible. */
.site-nav-bouton, .site-nav-fermer button {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid currentColor;
  border-radius: var(--mk-radius, 0.5rem);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.site-nav-fermer { display: none; }
.site-nav ul[popover] { position: static; inset: auto; width: auto; height: auto; overflow: visible; border: 0; background: transparent; color: inherit; }
@media (max-width: 40rem) {
  .site-nav-bouton { display: inline-flex; }
  .site-nav ul[popover]:not(:popover-open) { display: none; }
  .site-nav ul[popover]:popover-open {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(20rem, 85vw);
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 1rem 1.5rem;
    overflow-y: auto;
    background: var(--mk-color-background, #ffffff);
    color: var(--mk-color-text, #1f2328);
    box-shadow: -0.5rem 0 2rem rgb(0 0 0 / 0.2);
  }
  .site-nav ul[popover]:popover-open a { display: block; padding: 0.75rem 0; }
  .site-nav ul[popover]:popover-open .site-nav-fermer { display: flex; justify-content: flex-end; }
  .site-nav-fermer button { display: inline-flex; }
  .site-nav ul[popover]::backdrop { background: rgb(0 0 0 / 0.35); }
}
.site-main { min-height: 50vh; }
.site-footer { margin-top: 3rem; padding-block: 1.5rem; font-size: 0.9rem; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
/* Lien permanent vers les choix de confidentialité (ADR 0056), sous le pied de page modifiable par le client */
.site-legal { padding-block: 0 1.5rem; font-size: 0.85rem; }
.hero { padding-block: 4rem; background: color-mix(in srgb, var(--mk-color-primary, #0b6e4f) 8%, transparent); }
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 1rem; }
.hero-intro { font-size: 1.25rem; }
.section { padding-block: 2.5rem; }
.colonnes { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.encadre { padding: 2rem; border-radius: var(--mk-radius, 0.5rem); background: color-mix(in srgb, var(--mk-color-primary, #0b6e4f) 10%, transparent); text-align: center; }
.bouton {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: var(--mk-radius, 0.5rem);
  background: var(--mk-color-primary, #0b6e4f);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}
/* Formulaires (contact-form) */
.formulaire { display: grid; gap: 0.25rem; max-width: 40rem; }
.formulaire label { display: grid; gap: 0.25rem; font-weight: 600; }
.formulaire input, .formulaire textarea {
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: var(--mk-radius, 0.5rem);
  background: transparent;
  color: inherit;
}
.formulaire [aria-invalid="true"] { border-color: #b42318; }
.erreur { color: #b42318; font-size: 0.9rem; }
/* Piège à robots : hors de l'écran, jamais vu par un visiteur */
.mk-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Pendant une requête htmx */
.htmx-request button, button.htmx-request { opacity: 0.6; cursor: progress; }
/* Liste de pages (page-list) */
.liste-pages-items { display: grid; gap: 1.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.liste-pages-items a { font-weight: 600; font-size: 1.1rem; }
.liste-pages-items p { margin: 0.25rem 0 0; }
.pagination { display: flex; gap: 1rem; }
.pagination a[rel="next"] { margin-left: auto; }
/* Cartes (cards) */
.cartes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.carte {
  padding: 1.5rem;
  border-radius: var(--mk-radius, 0.5rem);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  background: color-mix(in srgb, var(--mk-color-background, #ffffff) 92%, currentColor 8%);
}
.carte h3 { margin-top: 0; }
.carte p:last-child { margin-bottom: 0; }
/* Étapes (steps) */
.etapes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.etape-numero { display: block; margin-bottom: 0.5rem; font-weight: 700; color: var(--mk-color-primary, #0b6e4f); }
.etapes h3 { margin: 0 0 0.25rem; }
.etapes p { margin: 0; }
/* Image et texte (image-text) */
.image-texte-grille { display: grid; gap: 2rem; align-items: center; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.image-droite .image-texte-media { order: 2; }
.image-texte-media { margin: 0; }
.image-texte-media img { display: block; width: 100%; border-radius: var(--mk-radius, 0.5rem); }
.image-texte-vide { aspect-ratio: 4 / 3; border-radius: var(--mk-radius, 0.5rem); background: color-mix(in srgb, var(--mk-color-primary, #0b6e4f) 12%, transparent); }
.image-texte-texte h2 { margin-top: 0; }
/* Offres (offers) */
.offres { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }
.offre {
  padding: 2rem;
  border-radius: var(--mk-radius, 0.5rem);
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.offre.recommandee { border: 2px solid var(--mk-color-primary, #0b6e4f); }
.offre h3 { margin-top: 0; }
.offre-prix { font-size: 1.75rem; font-weight: 700; margin: 0.5rem 0 1rem; }
.offre ul { padding-left: 1.2rem; }
.bouton-secondaire {
  background: transparent;
  color: var(--mk-color-primary, #0b6e4f);
  box-shadow: inset 0 0 0 2px var(--mk-color-primary, #0b6e4f);
}
/* Témoignages (testimonials) */
.temoignages { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.temoignages blockquote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1.5rem;
  border-radius: var(--mk-radius, 0.5rem);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  background: color-mix(in srgb, var(--mk-color-background, #ffffff) 92%, currentColor 8%);
}
.temoignages blockquote p { margin: 0; font-size: 1.1rem; }
.temoignages footer { display: flex; flex-direction: column; margin-top: auto; font-size: 0.9rem; }
.temoignages footer span { opacity: 0.75; }
/* Questions fréquentes (faq) */
.faq { display: grid; gap: 0.75rem; max-width: 48rem; }
.faq details { border-radius: var(--mk-radius, 0.5rem); border: 1px solid color-mix(in srgb, currentColor 15%, transparent); padding: 0.75rem 1rem; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 0.75rem 0 0; }
/* Bloc de code (code) */
.bloc-code {
  margin: 0;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  border-radius: var(--mk-radius, 0.5rem);
  background: #1f2328;
  color: #f6f8fa;
  font-size: 0.9rem;
  line-height: 1.6;
}
/* Variantes d'apparence du contenu (variants de theme.json, ADR 0025) */
.fond-doux { background: color-mix(in srgb, var(--mk-color-primary, #0b6e4f) 8%, transparent); }
.fond-principal { background: var(--mk-color-primary, #0b6e4f); color: #ffffff; }
.fond-principal a:not(.bouton) { color: inherit; }
.fond-principal .bouton { background: #ffffff; color: var(--mk-color-primary, #0b6e4f); }
.fond-principal .bouton-secondaire { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 2px #ffffff; }
.centre { text-align: center; }
.texte-grand { font-size: 1.25rem; }
.texte-petit { font-size: 0.875rem; }
/* Disposition en carrousel (variante layout, ADR 0038) : rangée qui défile de la feuille du site ; boutons et
   points posés par le script des carrousels */
.mk-carousel { padding-bottom: 0.75rem; }
.mk-carousel-prev, .mk-carousel-next, .mk-carousel-dot { color: var(--mk-color-primary, #0b6e4f); }
.fond-principal .mk-carousel-prev, .fond-principal .mk-carousel-next, .fond-principal .mk-carousel-dot { color: #ffffff; }