/* ==========================================================================
   Les Croqu'Noires — site.css
   Surcouche de confort : lisibilité, navigation, images, formulaire, pied de page.
   Chargée en dernier, elle affine le rendu du thème sans le remplacer.
   Palette du site : orange #dd6b20, rouge #cf3033, encre #27241d,
   beige #e8e6e1, crème #faf9f7 (définies par le thème dans --global-palette*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Réglages de base et lisibilité
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  font-size: 20px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}

/* Texte de contenu : largeur de lecture confortable */
.entry-content p,
.entry-content .wp-block-kadence-advancedheading {
  max-width: 70ch;
}

/* Liens du contenu : soulignement discret, accent au survol */
.entry-content a {
  color: var(--global-palette2, #cf3033);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.entry-content a:hover,
.entry-content a:focus {
  color: var(--global-palette1, #dd6b20);
}

/* --------------------------------------------------------------------------
   2. Titres de page
   -------------------------------------------------------------------------- */

.titre-page {
  font-family: "Satisfy", cursive;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.2;
  color: var(--global-palette3, #27241d);
  margin: 0 0 1.5rem;
  padding-bottom: 0.4rem;
  display: inline-block;
  border-bottom: 3px solid var(--global-palette1, #dd6b20);
}

/* --------------------------------------------------------------------------
   3. En-tête et navigation
   -------------------------------------------------------------------------- */

/* Ombre douce sous l'en-tête */
#masthead .site-header-row-container-inner {
  box-shadow: 0 2px 12px rgba(39, 36, 29, 0.08);
}

/* En-tête fixe (plein écran uniquement) */
@media (min-width: 1025px) {
  #masthead {
    position: sticky;
    top: 0;
    z-index: 500;
  }
}

/* Menu principal : pastilles oranges du thème remplacées par un style sobre */
.main-navigation .primary-menu-container > ul > li.menu-item > a {
  background: transparent;
  color: var(--global-palette3, #27241d);
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item > a:focus {
  background: var(--global-palette7, #e8e6e1);
  color: var(--global-palette3, #27241d);
}

/* Page courante : pastille orange pleine */
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
  background: var(--global-palette1, #dd6b20);
  color: #ffffff;
}

.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a:hover {
  background: var(--global-palette2, #cf3033);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   4. Images et blocs de contenu
   -------------------------------------------------------------------------- */

/* Images du contenu : coins arrondis et ombre légère */
.entry-content img,
.wp-block-image img {
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(39, 36, 29, 0.12);
}

/* Bloc beige de la page d'accueil : aspect carte arrondie */
.kb-row-layout-wrap.has-theme-palette7-background-color {
  border-radius: 18px;
}

/* Figure : respiration harmonisée */
figure.wp-block-image {
  margin: 0 0 1.5em;
}

/* --------------------------------------------------------------------------
   5. Formulaire de contact
   -------------------------------------------------------------------------- */

/* Le formulaire s'affiche en carte centrée, aux couleurs du site */
.wpforms-container {
  --wpforms-button-background-color: var(--global-palette1, #dd6b20);
  --wpforms-button-border-color: var(--global-palette1, #dd6b20);
  --wpforms-button-hover-background-color: var(--global-palette2, #cf3033);
  --wpforms-button-hover-border-color: var(--global-palette2, #cf3033);
  --wpforms-field-border-radius: 10px;
  --wpforms-button-border-radius: 10px;
  --wpforms-label-color: var(--global-palette3, #27241d);
  max-width: 760px;
  margin: 0 auto;
  background: var(--global-palette9, #ffffff);
  border: 1px solid rgba(39, 36, 29, 0.08);
  border-radius: 18px;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: 0 12px 32px rgba(39, 36, 29, 0.1);
}

/* Champs : accent orange à la prise de focus */
.wpforms-container input:focus,
.wpforms-container textarea:focus {
  border-color: var(--global-palette1, #dd6b20);
  box-shadow: 0 0 0 3px rgba(221, 107, 32, 0.15);
  outline: none;
}

/* --------------------------------------------------------------------------
   6. Pied de page
   -------------------------------------------------------------------------- */

/* Mention légale : plus douce et aérée */
#colophon .footer-html {
  color: var(--global-palette5, #504a40);
  line-height: 1.6;
}

/* Icône Facebook : pastille arrondie, accent au survol */
.footer-social-wrap .social-button {
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.footer-social-wrap .social-button:hover {
  background: var(--global-palette1, #dd6b20);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   7. Accessibilité
   -------------------------------------------------------------------------- */

/* Focus clair et visible pour la navigation au clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--global-palette1, #dd6b20);
  outline-offset: 2px;
}

/* Respect de la préférence « animations réduites » */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   8. Ajustements responsifs
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body {
    font-size: 18px;
  }

  /* Le titre de page occupe toute la largeur sur petit écran */
  .titre-page {
    display: block;
    border-bottom-width: 3px;
  }

  /* Images pleine largeur, marges réduites */
  .entry-content img,
  .wp-block-image img {
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(39, 36, 29, 0.1);
  }

  /* Carte formulaire compacte */
  .wpforms-container {
    border-radius: 12px;
  }
}