/* =========================================================
   Seven Camp – Le Martinet | Custom CSS
   Complète Tailwind CDN avec animations, scroll-reveal,
   accessibilité et personnalisations fines.
   ========================================================= */

/* --- Alpine.js cloak (évite flash logo au load) ----------------------- */
[x-cloak] { display: none !important; }

/* --- Base & resets ----------------------------------------------------- */
:root {
  --beige: #E5C788;
  --corail: #EF6153;
  --vert-nature: #63A38D;
  --vert-fonce: #2A3F3A;
  --bleu-nuit: #0A2540;
  --ocre: #E7AA51;
  --blanc-casse: #F4F4F4;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-feature-settings: 'kern', 'liga', 'calt';
}

/* Selection */
::selection {
  background: var(--corail);
  color: white;
}

/* Scrollbar (subtle) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--blanc-casse);
}
::-webkit-scrollbar-thumb {
  background: var(--vert-fonce);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--corail);
}

/* Hide scrollbar utility (for horizontal scroll cards) */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* --- Scroll-reveal (intersection observer in main.js) -------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger pour grilles */
.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.4s; }
.reveal:nth-child(7) { transition-delay: 0.48s; }
.reveal:nth-child(8) { transition-delay: 0.56s; }

/* --- Hero parallax léger (au scroll) ---------------------------------- */
.parallax-bg {
  will-change: transform;
}

/* --- Grain textures (subtle paper noise — cohérence éditoriale) ------ */
.hero-grain::after,
.section-grain-dark::after,
.section-grain-light::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero-grain::after {
  opacity: 0.12;
  mix-blend-mode: overlay;
}
.section-grain-dark::after {
  opacity: 0.07;
  mix-blend-mode: overlay;
}
.section-grain-light::after {
  opacity: 0.04;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .hero-grain::after { opacity: 0.06; }
  .section-grain-dark::after { opacity: 0.04; }
  .section-grain-light::after { opacity: 0.025; }
}

/* --- Drop cap éditorial (premier paragraphe d'un long texte) ---------- */
.drop-cap::first-letter,
.drop-cap-beige::first-letter {
  float: left;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 5.2rem;
  line-height: 0.82;
  margin: 0.18em 0.18em -0.1em 0;
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 1;
}
.drop-cap-beige::first-letter {
  color: var(--beige);
}
.drop-cap::first-letter {
  color: var(--corail);
}

@media (max-width: 640px) {
  .drop-cap::first-letter,
  .drop-cap-beige::first-letter {
    font-size: 4rem;
    margin: 0.18em 0.12em -0.1em 0;
  }
}

/* --- Boutons : focus visibles (a11y) ---------------------------------- *
 * Outline corail sur fond clair. Sur boutons bg-corail, swap en bleu nuit
 * pour garder le ratio ≥ 3:1 (WCAG 2.1 AA non-text contrast).
 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--corail);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Focus sur fonds Corail / Vert Foncé / Bleu Nuit : passer en accent contrasté */
button.bg-corail:focus-visible,
a.bg-corail:focus-visible {
  outline-color: var(--bleu-nuit);
  outline-width: 3px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6);
}
.bg-vert-fonce button:focus-visible,
.bg-vert-fonce a:focus-visible,
.bg-bleu-nuit button:focus-visible,
.bg-bleu-nuit a:focus-visible {
  outline-color: var(--beige);
  outline-width: 3px;
}

/* --- Transitions globales sur images dans cards ----------------------- */
img {
  -webkit-user-drag: none;
}

/* --- Reset boutons natifs --------------------------------------------- */
button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* --- Form fields auto-fill --------------------------------------------- */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(229, 199, 136, 0.05) inset;
  -webkit-text-fill-color: var(--vert-fonce);
}

/* --- Micro-interaction : hover cards d'hébergement -------------------- */
[x-data] button[\@click*="active"] {
  position: relative;
  overflow: hidden;
}

/* --- Marquee : gestion du wrap avec deux copies ----------------------- */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause marquee on hover (a11y / UX) */
.animate-marquee:hover {
  animation-play-state: paused;
}

/* --- Snap horizontal pour la section Région --------------------------- */
.snap-x {
  scroll-snap-type: x mandatory;
}
.snap-start {
  scroll-snap-align: start;
}

/* --- Drag-to-scroll cursor states ------------------------------------- */
.region-carousel {
  cursor: grab;
  user-select: none;
}
.region-carousel.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.region-carousel.is-dragging a,
.region-carousel.is-dragging article {
  pointer-events: none;
}

/* --- Décor : trait italique manuscrit --------------------------------- */
.font-hand {
  font-feature-settings: 'liga', 'dlig';
}

/* --- Glow subtil sur CTA Corail --------------------------------------- */
button.bg-corail,
a.bg-corail {
  box-shadow: 0 4px 20px -8px rgba(239, 97, 83, 0.4);
}
button.bg-corail:hover,
a.bg-corail:hover {
  box-shadow: 0 8px 30px -6px rgba(239, 97, 83, 0.55);
}

/* --- Form fields style spécifique ------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  font-family: 'Inter', sans-serif;
  transition: all 0.25s ease;
}

select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%232A3F3A' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
}

/* --- Iframe carte : style harmonisé ----------------------------------- */
iframe {
  filter: saturate(0.85) hue-rotate(-5deg);
}

/* --- Hover image scale smooth ----------------------------------------- */
.group:hover img {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Print styles (nice-to-have) -------------------------------------- */
@media print {
  header, footer, .animate-marquee, button { display: none !important; }
  body { background: white; color: black; }
}

/* --- Reduced motion (a11y impératif) ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .animate-marquee {
    animation: none;
  }
}

/* --- High contrast mode (a11y opt-in OS) ------------------------------ *
 * Si l'utilisateur a activé un mode haut contraste sur son OS,
 * on remplace les accents Corail/Vert Nature/Beige/Ocre (ratios <4.5:1)
 * par les couleurs de la palette qui passent (Bleu Nuit/Vert Foncé).
 * Aucun bouton visible : 100% transparent pour le reste des utilisateurs.
 * Reste 100% conforme au CDC client (palette officielle inchangée).
 */
@media (prefers-contrast: more) {
  /* Eyebrow + accents corail sur fonds clairs → bleu nuit (14.1:1) */
  .text-corail { color: var(--bleu-nuit) !important; }
  /* Italic vert nature sur fonds clairs → vert foncé (10.2:1) */
  .text-vert-nature { color: var(--vert-fonce) !important; }
  /* Beige et ocre sur fonds clairs (dans les rares cas) → vert foncé */
  .bg-blanc-casse .text-beige,
  .bg-white .text-beige,
  .bg-blanc-casse .text-ocre,
  .bg-white .text-ocre { color: var(--vert-fonce) !important; }
  /* Renforcer les bordures pour les boutons/cards en haut contraste */
  button, .border, [class*="border-"] {
    outline: 1px solid currentColor;
  }
}

/* --- Visually hidden (accessible labels for SR only) ------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Skip link (a11y standard) ---------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--bleu-nuit);
  color: var(--blanc-casse);
  padding: 1rem 1.5rem;
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* --- Tweak font display Fraunces : optical sizing variable ------------ */
.font-display {
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
  letter-spacing: -0.02em;
}
.font-display.italic,
.font-hand {
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 1;
}

/* --- Focus du modal : trap basique ------------------------------------ */
[role="dialog"] {
  -webkit-tap-highlight-color: transparent;
}

/* --- Loading : skeleton fond pendant le chargement images ------------- */
img[loading="lazy"] {
  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
  background-size: 200% 100%;
  animation: shimmer-bg 1.5s linear infinite;
}
img[loading="lazy"].loaded,
img[loading="lazy"]:not([data-loading]) {
  animation: none;
  background: none;
}

@keyframes shimmer-bg {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* --- Footer photo overlay ---------------------------------------------- */
footer .absolute img {
  filter: blur(2px) brightness(0.4);
}

/* --- Customisation extra : trait décoratif sous les H2 ---------------- */
section h2 + p {
  /* spacing tweak */
}

/* --- Burger menu icône fluide ----------------------------------------- */
[aria-label="Menu"] svg {
  transition: transform 0.3s ease;
}

/* --- Scroll-margin : compense la hauteur du header fixed (80px) ------- */
/* Sans ça, au clic sur une ancre #section, le titre est caché derrière la nav */
/* (fix bug "premier clic ne marche pas" rapporté par Laure le 24/05/2026) */
section[id] {
  scroll-margin-top: 80px;
}
@media (max-width: 640px) {
  section[id] {
    scroll-margin-top: 70px;
  }
}