/**
 * Le Margo — Polish global
 * ------------------------
 * Surcouche d'harmonisation légère, chargée après `main.css` sur tout le site
 * (hors landings publicitaires, qui ont leur propre feuille autonome).
 *
 * Principe : ne rien restructurer. On n'intervient que sur les finitions —
 * rendu typographique, états de focus, transitions, rythme vertical. Aucune
 * règle ici ne change une largeur, une grille ou un flux : le risque de
 * régression sur les pages existantes est volontairement nul.
 *
 * Sommaire
 *   1. Rendu typographique
 *   2. Ancres & défilement
 *   3. Accessibilité — focus visible
 *   4. Sélection de texte
 *   5. Liens
 *   6. Boutons
 *   7. Champs de formulaire
 *   8. Médias
 *   9. En-têtes de page
 *   10. Pied de page
 *   11. Barre de défilement
 *   12. Impression
 *
 * @package Le Margo
 */

/* ==========================================================================
   1. Rendu typographique
   ========================================================================== */

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Évite les titres dont la dernière ligne ne porte qu'un mot. */
h1,
h2,
h3,
.page-title,
.section-title,
.hero-title {
  text-wrap: balance;
}

/* Idem pour les chapôs et sous-titres. */
.page-subtitle,
.section-tag,
.hero-tagline,
.values-intro {
  text-wrap: pretty;
}

/* Coupure propre des mots longs (URLs, noms de plats composés). */
p,
li,
dd {
  overflow-wrap: break-word;
}

/* ==========================================================================
   2. Ancres & défilement
   ========================================================================== */

html {
  scroll-behavior: smooth;
  /* Le header est fixe : sans ce décalage, les ancres passent dessous. */
  scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   3. Accessibilité — focus visible
   ========================================================================== */

/*
 * Anneau de focus homogène, visible uniquement au clavier.
 * Un site professionnel se reconnaît aussi à ça.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 3px;
  border-radius: 1px;
}

/* Pas d'anneau à la souris. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   4. Sélection de texte
   ========================================================================== */

::selection {
  background: rgba(201, 162, 39, 0.24);
  color: #2b2621;
}

/* ==========================================================================
   5. Liens
   ========================================================================== */

/* Souligné plus aéré : détail discret, effet immédiat sur la lisibilité. */
a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Les liens contextuels d'un paragraphe restent soulignés (accessibilité). */
.page-content a:not(.btn):not(.sys-btn),
.entry-content a:not(.btn):not(.sys-btn) {
  text-decoration: underline;
  text-decoration-color: rgba(51, 51, 51, 0.35);
  transition: text-decoration-color 0.25s ease, color 0.25s ease;
}

.page-content a:not(.btn):not(.sys-btn):hover,
.entry-content a:not(.btn):not(.sys-btn):hover {
  text-decoration-color: currentColor;
}

/* ==========================================================================
   6. Boutons
   ========================================================================== */

/*
 * Le thème utilise des angles droits : c'est l'identité, on n'y touche pas.
 * On harmonise seulement la courbe d'animation et l'état désactivé.
 */
.btn,
.btn-secondary,
.btn-reserver,
.hero-btn,
button[type="submit"] {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:active,
.btn-secondary:active,
.btn-reserver:active,
.hero-btn:active {
  transform: translateY(0);
}

button:disabled,
.btn:disabled,
input[type="submit"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

/* Zone tactile confortable sur mobile (recommandation WCAG : 44 px). */
@media (max-width: 768px) {
  .btn,
  .btn-secondary,
  .hero-btn,
  button[type="submit"] {
    min-height: 44px;
  }
}

/* ==========================================================================
   7. Champs de formulaire
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.14);
}

/* Uniformise la couleur des textes indicatifs. */
::placeholder {
  color: #a9a29a;
  opacity: 1;
}

/* Champ en erreur : signalement visuel homogène. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #a8433a;
}

/* ==========================================================================
   8. Médias
   ========================================================================== */

img,
video {
  /* Évite l'écrasement des visuels dans les conteneurs en flex/grid. */
  max-width: 100%;
  height: auto;
}

/*
 * Placeholder discret pendant le chargement des images différées.
 * Restreint aux galeries : sur un logo transparent, ce fond serait visible.
 */
.gallery-item img[loading="lazy"],
.gallery-grid img[loading="lazy"],
.lp-gallery__item img[loading="lazy"] {
  background-color: rgba(181, 166, 146, 0.12);
}

figure {
  margin: 0;
}

/* ==========================================================================
   9. En-têtes de page
   ========================================================================== */

/* Filet doré sous le titre : signature discrète, reprise sur tout le site. */
.page-header .page-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 18px auto 0;
  background: #c9a227;
  opacity: 0.85;
}

.page-header .page-subtitle {
  margin-top: 16px;
}

/* ==========================================================================
   10. Pied de page
   ========================================================================== */

.site-footer a {
  transition: color 0.25s ease;
}

.footer-links a {
  position: relative;
}

/* Souligné qui se déploie au survol. */
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-links a:hover::after {
  width: 100%;
}

/* ==========================================================================
   11. Barre de défilement
   ========================================================================== */

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(181, 166, 146, 0.1);
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(43, 38, 33, 0.28);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(43, 38, 33, 0.45);
    background-clip: content-box;
  }
}

/* ==========================================================================
   12. Impression
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .mobile-menu-toggle,
  .lp-sticky-cta,
  .sys-card__actions,
  .sys-suggestions {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}