/* =========================================================================
   Anaïz Photographie — feuille de style unique, sans framework.
   Choix d'écoconception : pas de police web téléchargée (police système
   uniquement), pas de dépendance externe, CSS unique et compact.
   Thème sombre par défaut (cohérent avec l'identité "Panorama" et plus
   économe en énergie sur écrans OLED), thème clair disponible via bascule
   ou préférence système, mobile-first.
   ========================================================================= */

/* --- Design tokens ----------------------------------------------------- */
:root {
  --font-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --accent: #c9925a;
  --accent-contrast: #241a12;

  --radius: 2px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max-width: 1400px;

  --transition: 180ms ease;

  color-scheme: dark;
  --bg: #0b0b0d;
  --bg-elevated: #141416;
  --text: #f3efe8;
  --text-muted: #b9b3a9;
  --border: #2a2a2d;
  --overlay: rgba(0, 0, 0, 0.55);
}

/* Thème clair : appliqué si l'utilisateur le choisit explicitement,
   ou si son système est en clair et qu'il n'a rien choisi. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #faf7f2;
  --bg-elevated: #ffffff;
  --text: #211d18;
  --text-muted: #5c554b;
  --border: #e3ddd3;
  --overlay: rgba(255, 255, 255, 0.6);
}

/* Choix assumé : le thème sombre est la présentation par défaut du site
   (identité visuelle voulue), quelle que soit la préférence système du
   visiteur. Seul un choix explicite via la bascule (mémorisé ensuite sur
   son appareil) fait passer le site en thème clair — voir assets/js/main.js. */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

/* Empêche tout élément décalé hors écran (le panneau du menu mobile,
   en position: fixed + transform, se trouve géométriquement hors du
   viewport quand il est fermé) d'ouvrir un défilement horizontal
   parasite de la page. overflow-x seul ne suffit pas de façon fiable
   sur mobile (Safari iOS en particulier autorise encore le geste de
   défilement tactile horizontal malgré lui) : touch-action restreint
   directement le geste au défilement vertical. Réautorisé localement
   sur .panorama__track, qui a besoin du défilement horizontal. */
html, body {
  overflow-x: hidden;
  touch-action: pan-y;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus {
  left: var(--gutter);
  top: var(--gutter);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- En-tête / navigation ----------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
}
.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg { width: 1.15rem; height: 1.15rem; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.nav-links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}
.nav-links a {
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  border-color: var(--accent);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color var(--transition);
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg { width: 1rem; height: 1rem; }

/* Bascule sur mise en page mobile par largeur ET par hauteur : un
   téléphone tenu en paysage dépasse souvent 760px de large (donc
   resterait sinon en mise en page desktop, boutons inadaptés au
   tactile) mais garde toujours une hauteur d'écran réduite — la
   deuxième condition rattrape ce cas. */
@media (max-width: 760px), (max-height: 500px) {
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(84vw, 340px);
    height: 100dvh;
    background: var(--bg-elevated);
    border-left: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5.5rem var(--gutter) 2rem;
    gap: 2rem;
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
  }
  .site-nav.is-open { transform: translateX(0); }
  .nav-links {
    flex-direction: column;
    gap: 1.35rem;
    font-size: 1.1rem;
  }
  .nav-toggle { display: inline-flex; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  padding: clamp(3rem, 10vw, 7rem) var(--gutter) clamp(2rem, 6vw, 3.5rem);
  max-width: var(--max-width);
  margin: 0 auto;
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--accent);
  margin: 0 0 1.25rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 4.2rem);
  line-height: 1.08;
  margin: 0 0 1.25rem;
  max-width: 20ch;
}
.hero p {
  color: var(--text-muted);
  max-width: 52ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin: 0 0 2rem;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  font-weight: 600;
}
.btn--primary:hover { opacity: 0.9; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* --- Galerie panoramique (défilement horizontal) ------------------------- */
.panorama {
  padding: 0.5rem 0 clamp(2.5rem, 6vw, 4rem);
}
.panorama__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 1.1rem;
}
.panorama__head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0;
}
.panorama__head .see-all {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.panorama__head .see-all:hover { color: var(--accent); border-color: var(--accent); }

.panorama__track {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 0 var(--gutter) 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* Réautorise le geste de défilement tactile horizontal ici : le
     reste de la page le restreint au vertical (voir html, body). */
  touch-action: pan-x pan-y;
}
.panorama__track:focus-visible { outline-offset: -2px; }

.panorama__item {
  flex: 0 0 auto;
  width: clamp(240px, 40vw, 480px);
  aspect-ratio: 16 / 10;
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: zoom-in;
}
.panorama__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.panorama__item:hover img { transform: scale(1.035); }
.panorama__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.78rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.62), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.panorama__item:hover figcaption,
.panorama__item:focus-within figcaption { opacity: 1; }

.panorama__empty {
  margin: 0 var(--gutter);
  padding: 2.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: calc(var(--max-width) - 2 * var(--gutter));
}
.panorama__empty code {
  background: var(--bg-elevated);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

/* --- Sections texte génériques ------------------------------------------- */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
}
.section--narrow { max-width: 74ch; }
.section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  margin-top: 0;
}
.section p { color: var(--text-muted); }
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.4;
  margin: 0;
  border-left: 2px solid var(--accent);
  padding-left: 1.4rem;
}
.quote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.category-intro {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter) 1rem;
}
.category-intro__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.7rem;
  color: var(--accent);
  margin: 0 0 1rem;
}
.category-intro h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 1rem;
}
.category-intro p {
  color: var(--text-muted);
  max-width: 60ch;
}

/* --- Grille de contact ---------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 7vw, 5rem);
}
.contact-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--bg-elevated);
}
.contact-card h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
}
.contact-card p { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.92rem; }
.contact-card a.btn { width: 100%; justify-content: center; }

/* --- Formulaire de contact -------------------------------------------- */
.contact-form {
  display: grid;
  gap: 1.1rem;
  margin: 1.5rem 0;
  max-width: 42rem;
}
.form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row label {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.form-row input,
.form-row textarea {
  font: inherit;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  transition: border-color var(--transition);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-row textarea { resize: vertical; min-height: 8rem; }
.contact-form .btn { justify-self: start; }
.form-note { color: var(--accent); font-size: 0.9rem; margin: 0.9rem 0 0; }
.form-note.form-note--error { color: #c94040; }

/* --- Pied de page ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem var(--gutter) 3rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.social-links, .legal-links { display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }

/* --- Lightbox --------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius);
}
.lightbox figcaption {
  color: #eee;
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close:hover { border-color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}