/* ==========================================================================
   Ecdyo — feuille de styles

   Un seul systeme pour tout le site :
     1. Jetons        (couleurs, typographie, espacements, mouvement)
     2. Base
     3. Mise en page  (container, section, apparition)
     4. Composants    (header, hero, cartes, galerie, formulaire, footer)
     5. Adaptatif
   ========================================================================== */

/* ==========================================================================
   1. JETONS
   ========================================================================== */

@font-face {
  font-family: "Noto Serif";
  src: url("../fonts/NotoSerif-VariableFont.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-VariableFont_wdth.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SWIsot1";
  src: url("../fonts/SWISOT1.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Couleurs.
     Le noir d'origine est rechauffe d'un cheveu : les photos de nature s'y
     posent mieux et le blanc pur y est moins agressif. --- */
  --bg:            #0a0908;
  --bg-raised:     #131110;
  --ink:           #f4f1ee;
  --ink-muted:     rgba(244, 241, 238, 0.62);
  --line:          rgba(244, 241, 238, 0.14);

  --primary:       #d45a2a;   /* terracotta de la marque */
  --primary-soft:  #f09566;

  /* --- Typographie --- */
  --font-body:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-display: "SWIsot1", "Noto Serif", Georgia, serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);
  --fs-xl:   clamp(1.5rem, 1.24rem + 1.15vw, 2.125rem);
  --fs-2xl:  clamp(2.125rem, 1.5rem + 2.7vw, 3.75rem);

  --lh-tight: 1.18;
  --lh-body:  1.65;

  --tracking-wide: 0.14em;

  /* --- Espacements. Une seule echelle fluide, utilisee partout. --- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: clamp(2.5rem, 5vw, 4.5rem);
  --sp-8: clamp(3.5rem, 8vw, 7rem);

  --gutter:  clamp(1.25rem, 5vw, 5rem);
  --w-text:  46rem;
  --w-wide:  78rem;
  --gap:     clamp(0.875rem, 2vw, 1.75rem);

  /* Hauteur reservee sous l'en-tete, qui est en position absolue.
     C'est le logo qui la determine : hauteur du logo + les deux marges
     de --sp-4. Le logo natif fait 157x178, soit un rapport de 1.134,
     d'ou 9.3vw de hauteur pour 8.2vw de largeur. A recalculer si la
     taille du logo change. */
  --header-h: clamp(133px, 9.3vw + 48px, 186px);

  /* --- Mouvement. Une duree et une courbe pour tout le site. --- */
  --dur:      0.5s;
  --dur-slow: 0.8s;
  --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);

  /* --- Voiles.
     Chaque photo recoit le meme voile : dense en bas ou se pose le texte,
     transparent en haut ou l'image doit respirer. --- */
  --scrim-photo:
    linear-gradient(to top, rgba(10, 9, 8, 0.92) 0%, rgba(10, 9, 8, 0.45) 42%, rgba(10, 9, 8, 0.12) 100%);
  --scrim-warm:
    linear-gradient(118deg, rgba(212, 90, 42, 0.24) 0%, rgba(10, 9, 8, 0) 58%);
  --scrim-header:
    linear-gradient(to bottom, rgba(10, 9, 8, 0.72) 0%, rgba(10, 9, 8, 0.35) 45%, rgba(10, 9, 8, 0) 100%);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Une ancre viserait sinon un point cache derriere l’en-tete fixe. */
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--primary);
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--primary-soft);
  outline-offset: 4px;
}

::selection {
  background: var(--primary);
  color: var(--ink);
}

/* Enchainement vertical : tout ce qui se suit dans un bloc de texte
   respire de la meme facon. */
.flow > * + * { margin-top: var(--sp-4); }

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 200;
  padding: var(--sp-2) var(--sp-4);
  background: var(--ink);
  color: var(--bg);
}
.skip-link:focus { left: 0; }

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

/* ==========================================================================
   3. MISE EN PAGE
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--w-text) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }

/* Rythme vertical unique pour toutes les sections. */
.section { padding-block: var(--sp-8); }

/* Page sans hero (les fiches produit) : la premiere section doit degager
   l'en-tete, qui est en position absolue et ne pousse donc rien devant lui. */
.section--top { padding-top: calc(var(--header-h) + var(--sp-6)); }

/* --- Apparition au defilement.
   Portee par `.js` : sans JavaScript, le contenu reste visible. --- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   4. COMPOSANTS
   ========================================================================== */

/* --- 4.1 Media : une photo de fond et son voile ------------------------ */
.media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-photo);
}
.media--warm::after { background: var(--scrim-warm), var(--scrim-photo); }

/* Zoom lent a l'ouverture. Part de 1.08 pour ne jamais decouvrir les bords
   (le defaut de la version precedente, qui partait de 0.95). */
.media--zoom img {
  transform: scale(1.08);
  animation: ecdyo-zoom 6s var(--ease) forwards;
  will-change: transform;
}
@keyframes ecdyo-zoom {
  to { transform: scale(1); }
}

/* --- 4.1 bis  Cadrage des couvertures ----------------------------------- */

/* object-fit: cover rogne symetriquement autour du centre. Quand le sujet
   n'y est pas, il finit sous l'en-tete ou hors du cadre : object-position
   deplace la fenetre visible dans l'image.

   Ce sont des CLASSES, pas des attributs style=. La CSP du site interdit
   le style en ligne (style-src 'self', sans 'unsafe-inline') : un style=
   pose sur une image serait purement et simplement ignore.

   Le selecteur reprend .media img pour passer devant lui. A specificite
   egale, seul l'ordre du fichier departagerait - ce n'est pas une chose
   sur laquelle se reposer. */
.media img.cadrage--accueil  { object-position: 17% 51%; }
.media img.cadrage--grebe    { object-position: 53% 75%; }
.media img.cadrage--ephemere { object-position: 67% 69%; }
.media img.cadrage--boutique { object-position: 49% 49%; }
.media img.cadrage--tirage   { object-position: 53% 42%; }

/* Les couvertures de thematique viennent du champ « cadrage » de
   galerie.json. Ce qui suit est reecrit a chaque lancement de galerie.py :
   une valeur ecrite ici a la main serait perdue. */
/* cadrage des thematiques : debut */
.media img.cadrage--theme-a-l-ombre-des-cimes { object-position: 50% 35%; }
.media img.cadrage--theme-aux-rives-du-sauvage { object-position: 50% 50%; }
/* cadrage des thematiques : fin */

/* --- 4.2 En-tete ------------------------------------------------------- */
/* Identique sur les quatre pages : pose par-dessus le haut de page,
   avec son propre voile pour rester lisible sur n'importe quelle photo. */
.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 30;
  padding-block: var(--sp-4);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -60% 0;
  background: var(--scrim-header);
  pointer-events: none;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-4), 4vw, var(--sp-7));
  width: 100%;
  max-width: calc(var(--w-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sur grand ecran les deux menus encadrent le logo. */
.site-menus { display: contents; }

.site-logo {
  order: 2;
  flex: 0 0 auto;
  transition: opacity var(--dur) var(--ease);
}
.site-logo:hover { opacity: 0.8; }
.site-logo img {
  width: clamp(75px, 8.2vw, 122px);
  height: auto;
}

.site-nav { flex: 1 1 0; min-width: 0; }
.site-nav--general    { order: 1; }
.site-nav--activities { order: 3; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) clamp(var(--sp-4), 2.4vw, var(--sp-6));
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav--general ul    { justify-content: flex-end; }
.site-nav--activities ul { justify-content: flex-start; }

.site-nav a {
  position: relative;
  display: inline-block;
  padding-block: 2px;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--primary-soft); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--primary); }

.nav-toggle {
  display: none;
  order: 1;
  border: 0;
  padding: var(--sp-1);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { display: block; fill: currentColor; }

/* --- 4.3 Boutons ------------------------------------------------------- */
.button {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 0.8em 1.9em;
  background: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.button:hover,
.button:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* --- 4.4 Hero et titres de page ---------------------------------------- */
/* Un seul composant. La page d'accueil l'allonge, les autres pages
   affichent simplement leur titre au meme endroit. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(22rem, 50svh, 32rem);
  padding-top: calc(var(--header-h) + var(--sp-5));
  padding-bottom: var(--sp-7);
  overflow: hidden;
  isolation: isolate;
}
.hero > .container { position: relative; z-index: 1; }

.hero--home {
  min-height: 100svh;
  /* De la place sous le texte pour le repere de defilement. */
  padding-bottom: calc(var(--sp-7) + 4rem);
}

/* Variante sans photo (galerie) : le degrade chaud du theme d'origine. */
.hero--gradient {
  background-image: linear-gradient(158deg, #40312b 0%, #0a0908 62%);
}

.hero__title {
  max-width: 24ch;
  color: var(--ink);
}
.hero__title .accent { color: var(--primary); }

.hero__subtitle {
  margin-top: var(--sp-3);
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  max-width: 40rem;
}

/* Le titre porte l'identite ; ce paragraphe l'accompagne, il ne la
   double pas. D'ou un corps plus petit, un ton plus retenu et une mesure
   resserree, qui le rattachent au titre au lieu de l'etaler sous lui. */
.hero__lede {
  max-width: 34rem;
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-base);
  line-height: 1.65;
  text-wrap: pretty;
}

/* Repere de defilement, en bas du hero d'accueil. */
.hero__cue {
  position: absolute;
  bottom: var(--sp-5);
  left: 50%;
  z-index: 1;
  width: 1px;
  height: 3rem;
  background: var(--line);
  transform: translateX(-50%);
  overflow: hidden;
}
.hero__cue::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1rem;
  background: var(--primary);
  animation: ecdyo-cue 2.4s var(--ease) infinite;
}
@keyframes ecdyo-cue {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(300%); }
}

/* Bloc de texte suivi, un peu plus grand que le corps courant. */
.prose {
  max-width: 40rem;
  color: rgba(244, 241, 238, 0.78);
  font-size: var(--fs-lg);
  line-height: 1.6;
}
.prose strong { color: var(--ink); font-weight: 600; }

/* Une note sous l'image de couverture, pas une nouvelle section : centree,
   resserree, et d'un ton en dessous du corps de texte courant. */
.prose--centre {
  max-width: 38rem;
  margin-inline: auto;
  color: var(--ink-muted);
  font-size: var(--fs-base);
  text-align: center;
  text-wrap: pretty;
}

/* --- Texte et portrait en vis-a-vis (accueil) --------------------------- */
/* Les deux colonnes font exactement la meme hauteur : c'est la grille qui
   impose sa hauteur a l'image, et non l'image qui impose la sienne. Sans
   cela un portrait vertical deborde sous le texte, puisque rien ne fait
   coincider la hauteur d'une photo avec celle d'un paragraphe. */
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: stretch;
}

/* Si la photo est plus haute que le texte (texte court), le texte se
   recentre face a elle plutot que de rester colle en haut. */
.about-split .prose {
  max-width: 38rem;
  align-self: center;
}

.portrait {
  position: relative;
  margin: 0;
  min-height: 22rem;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

/* Position absolue : l'image epouse la hauteur decidee par la grille,
   quel que soit le format du fichier depose - portrait, carre ou paysage.
   Le recadrage se regle avec object-position. */
.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le sujet occupe le bas du cadre — assis au pied d’un arbre, entre 55 %
     et 85 % de la hauteur. Un recadrage centre lui couperait les jambes des
     que le bloc de texte voisin est court : on descend la mise au point. */
  object-position: 50% 70%;
}

/* --- 4.5 Deux acces en bas de l'accueil -------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}

.feature {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(19rem, 34vw, 28rem);
  padding: var(--sp-7) var(--sp-4);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.feature__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.feature__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.feature .media img { transition: transform var(--dur-slow) var(--ease); }
.feature:hover .media img { transform: scale(1.05); }

/* --- 4.6 Galerie ------------------------------------------------------- */
.gallery {
  columns: 4;
  column-gap: var(--gap);
}
.gallery__item {
  break-inside: avoid;
  margin: 0 0 var(--gap);
}

/* En colonnes, toute image recoit la largeur de sa colonne : un portrait
   2:3 est donc 2,25 fois plus haut qu'un paysage 3:2, et occupe 2,25 fois
   plus de surface. On ne peut pas le raccourcir sans le retrecir - sauf a
   le recadrer, ce qui est hors de question ici.

   D'ou cette largeur, qui n'est pas choisie au juge : a la largeur L, un
   portrait couvre 1,5 L^2 et un paysage 0,667 L^2. Egaliser donne
   L = 0,667. A 67 %, le portrait occupe exactement la surface d'un paysage
   a pleine largeur.

   Le selecteur double la classe pour l'emporter sur le margin: 0 ci-dessus,
   dont le raccourci fixe aussi les marges laterales. */
.gallery__item.gallery__item--portrait {
  max-width: 67%;
  margin-inline: auto;
}

/* Sous l'image, jamais dessus : superposee, la legende devenait illisible
   sur un ciel clair et masquait le sujet sur un fond sombre. Ici elle ne
   dispute rien a la photographie, et reste lisible quel que soit le
   cliche. */
.gallery__titre {
  margin: 0.75rem 0 0;
  color: var(--ink-muted);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
}

/* Le lieu passe encore d'un cran en arriere, et la barre oblique
   n'apparait que s'il y a quelque chose apres elle : une photo sans lieu
   affiche la seule espece, sans separateur orphelin. */
.gallery__lieu,
.lightbox__lieu { opacity: 0.72; }

.gallery__lieu:not(:empty)::before,
.lightbox__lieu:not(:empty)::before {
  content: " / ";
  opacity: 0.6;
}

.gallery__trigger {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: box-shadow var(--dur) var(--ease);
}
.gallery__trigger img {
  width: 100%;
  transition: transform var(--dur-slow) var(--ease);
}
.gallery__trigger:hover,
.gallery__trigger:focus-visible { box-shadow: 0 18px 42px rgba(0, 0, 0, 0.65); }
.gallery__trigger:hover img,
.gallery__trigger:focus-visible img { transform: scale(1.04); }

/* --- 4.6 bis  Citation d'ouverture ----------------------------------------- */

/* La phrase se pose sur le fond de la page, sans bandeau. La marge basse
   la separe des vignettes : la section les reunit, donc rien ne le fait a
   sa place. */
.citation {
  max-width: 34rem;
  margin: 0 auto var(--sp-8);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}

/* Une arrivee plus lente que partout ailleurs : la phrase se pose au lieu
   d'apparaitre. */
.js .citation[data-reveal] { transition-duration: 1.8s; }

/* --- 4.6 ter  Thematiques de la galerie -------------------------------- */

.themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-6) var(--gap);
}

.theme {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Le cadre porte le recouvrement : la premiere image lui donne sa hauteur,
   la seconde se pose dessus sans rien deplacer. */
.theme__cadre {
  position: relative;
  display: block;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: box-shadow var(--dur) var(--ease);
}

.theme__image {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease),
              opacity var(--dur) var(--ease);
}

.theme__image--survol {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* Le nom annonce l'image, il ne rivalise pas avec elle : petit, espace,
   en capitales — la maniere dont un musee etiquette une salle. */
.theme__nom {
  position: relative;
  display: block;
  padding-bottom: 0.75rem;
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}

/* Un trait court sous le nom, qui s'etend et se teinte au survol. C'est le
   seul mouvement du texte, et il suffit. */
.theme__nom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1.75rem;
  height: 1px;
  background: var(--line);
  transform: translateX(-50%);
  transition: width var(--dur-slow) var(--ease),
              background-color var(--dur) var(--ease);
}

@media (hover: hover) {
  .theme:hover .theme__cadre,
  .theme:focus-visible .theme__cadre {
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.65);
  }

  /* Le fondu entre les deux photographies porte deja l'effet : on n'y
     ajoute pas de zoom. */
  .theme:hover .theme__image--survol,
  .theme:focus-visible .theme__image--survol { opacity: 1; }

  .theme:hover .theme__nom,
  .theme:focus-visible .theme__nom { color: var(--ink); }

  .theme:hover .theme__nom::after,
  .theme:focus-visible .theme__nom::after {
    width: 4.5rem;
    background: var(--primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme__image,
  .theme__nom::after { transition-duration: 0s; }
}

/* Le retour vers les thematiques, au-dessus du titre d'une page. */
.fil-ariane {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
}

.fil-ariane a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.fil-ariane a:hover,
.fil-ariane a:focus-visible { color: var(--ink); }

/* La note qui ouvre une thematique. Elle partage la section de la grille
   pour ne pas cumuler deux marges de section ; il ne lui manque donc que
   de quoi respirer avant les photos. */
.gallery-intro { margin-bottom: var(--sp-7); }

/* --- 4.7 Visionneuse --------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: clamp(var(--sp-4), 5vw, var(--sp-7));
  background: rgba(10, 9, 8, 0.96);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.lightbox.is-open { display: flex; }
.lightbox.is-visible { opacity: 1; }

.lightbox__image {
  max-width: 100%;
  max-height: 78svh;
  object-fit: contain;
}

.lightbox__button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.lightbox__button:hover { color: var(--primary); }
.lightbox__close { top: var(--sp-3); right: var(--sp-3); font-size: 1.75rem; }
.lightbox__prev  { top: 50%; left: var(--sp-2);  transform: translateY(-50%); }
.lightbox__next  { top: 50%; right: var(--sp-2); transform: translateY(-50%); }

.lightbox__titre {
  max-width: min(90vw, 40rem);
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  text-wrap: balance;
}

.lightbox__counter {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
}

/* --- 4.8 Contact et formulaire ----------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-7);
  align-items: start;
}

.form-field + .form-field { margin-top: var(--sp-4); }
.form-field > label,
.form-field legend {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.form-field fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.form-sublabel {
  display: block;
  margin-top: var(--sp-1);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0;
}
.required { color: var(--primary); }

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg-raised);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
input[type="text"]:hover,
input[type="email"]:hover,
textarea:hover { border-color: rgba(244, 241, 238, 0.28); }
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--primary);
  background: #171413;
  outline: none;
}
textarea {
  min-height: 11rem;
  resize: vertical;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.form-status {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}
.form-status.is-error { color: var(--primary-soft); }

/* --- 4.9 Pied de page -------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7);
}
.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--sp-6) var(--sp-5);
  align-items: start;
}
.site-footer nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}
/* Meme reponse au survol que le menu principal : le lien vire a
   l’orange de la charte, pas au blanc. Les liens sociaux, juste en
   dessous, appliquaient deja cette teinte. */
.site-footer a:hover { color: var(--primary-soft); }

.social-links {
  display: flex;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-links a {
  display: inline-flex;
  color: var(--primary);
}
.social-links a:hover { color: var(--primary-soft); }
.social-links svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.site-footer__copyright {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-align: center;
}

/* --- 4.10 Boutique : grille de produits --------------------------------- */
/* Exemples en images sur la page des tirages.

   Sur ecran etroit : une colonne, tout s'empile. C'est la base, et les
   decalages ne s'ajoutent qu'ensuite — sur un petit ecran ils
   deviendraient des trous. */
.apercus {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}

.apercus figure { margin: 0; }

/* Ce sont des tirages : ils doivent poser sur la page comme des objets,
   pas y etre incrustes. D'ou l'ombre. Le soulevement au survol reste
   volontairement discret — ces images ne sont pas cliquables, il ne faut
   pas laisser croire le contraire. */
.apercus img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease);
}

@media (hover: hover) {
  .apercus figure:hover img {
    transform: translateY(-6px);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .apercus img { transition-duration: 0s; }
  .apercus figure:hover img { transform: none; }
}

/* A partir du moment ou la largeur le permet, on compose : douze colonnes,
   trois portees inegales, deux aplombs decales. Les trois images ayant le
   meme rapport, des largeurs differentes donnent des hauteurs differentes
   — c'est ce desalignement qui aere la page. */
@media (min-width: 44rem) {
  .apercus {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-7) var(--gap);
  }

  .apercus figure:nth-child(1) { grid-column: 1 / span 7; }

  .apercus figure:nth-child(2) {
    grid-column: 9 / span 4;
    margin-top: var(--sp-8);
  }

  .apercus figure:nth-child(3) {
    grid-column: 4 / span 5;
    margin-top: calc(var(--sp-6) * -1);
  }
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-6) var(--gap);
}

/* La carte entiere est cliquable : un seul lien, pas de piege au clavier. */
.product-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.product-card__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: box-shadow var(--dur) var(--ease);
}
.product-card__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.product-card:hover .product-card__frame,
.product-card:focus-visible .product-card__frame { box-shadow: 0 18px 42px rgba(0, 0, 0, 0.65); }
.product-card:hover .product-card__frame img,
.product-card:focus-visible .product-card__frame img { transform: scale(1.04); }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: var(--sp-3);
}
.product-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--ink);
}
.product-card:hover .product-card__name { color: var(--primary-soft); }
.product-card__price {
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.product-card__summary {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* Etiquette d'etat : disponible, bientot, epuise. */
.badge {
  align-self: flex-start;
  border: 1px solid currentColor;
  padding: 0.22em 0.65em;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.badge--disponible { color: var(--primary); }
.badge--bientot    { color: var(--primary-soft); }
.badge--epuise     { color: var(--ink-muted); }

/* --- 4.11 Page produit -------------------------------------------------- */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.product__media {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
/* Enfant direct seulement : les images du carrousel ont leur propre
   traitement, et l'ombre s'applique alors au cadre, pas a l'image. */
.product__media > img {
  width: 100%;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.product__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: var(--sp-5);
}
.product__price {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.product__description {
  color: rgba(244, 241, 238, 0.78);
}
.product__description > * + * { margin-top: var(--sp-3); }

/* Caracteristiques : deux colonnes, libelle discret et valeur lisible. */
.specs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem var(--sp-4);
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.specs dt { color: var(--ink-muted); }
.specs dd { margin: 0; color: var(--ink); }

.product__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.product__note {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.backlink {
  display: inline-block;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.backlink:hover { color: var(--ink); }

/* --- 4.12 Carrousel ----------------------------------------------------- */
/* Le defilement est natif : glissement au doigt, molette du pave tactile et
   fleches du clavier fonctionnent sans une ligne de JavaScript. Celui-ci
   n'ajoute que les boutons et les pastilles. Sans lui, le carrousel reste
   donc utilisable - les boutons sont simplement masques. */
.carousel__viewport {
  position: relative;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 3px; }

/* Cadre de rapport fixe : sans lui, la hauteur sauterait d'une photo a
   l'autre des qu'un portrait cotoie un paysage. */
.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-raised);
}
.carousel__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel__nav { display: none; }
.js .carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  padding: 0;
  background: rgba(10, 9, 8, 0.5);
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.js .carousel__nav:hover { background: rgba(10, 9, 8, 0.85); }
.carousel__nav--prev { left: 0; }
.carousel__nav--next { right: 0; }
.js .carousel__nav[disabled] { opacity: 0.25; cursor: default; }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: var(--sp-3);
}
/* Le bouton est large et haut pour le doigt ; seule la barre se voit. */
.carousel__dot {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 1.25rem;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.carousel__dot::before {
  content: "";
  width: 100%;
  height: 2px;
  background: rgba(244, 241, 238, 0.28);
  transition: background-color var(--dur) var(--ease);
}
.carousel__dot[aria-current="true"]::before { background: var(--primary); }
.carousel__dot:hover::before { background: var(--primary-soft); }

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

/* --- 4.13 Pages légales -------------------------------------------------- */
/* Documents longs, lus en diagonale : la hierarchie doit se voir d'un coup
   d'oeil et la colonne rester etroite. */
.legal {
  max-width: 44rem;
  color: rgba(244, 241, 238, 0.82);
}
.legal h2 {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-lg);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  margin-top: var(--sp-5);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}
.legal p,
.legal ul,
.legal ol,
.legal dl { margin-top: var(--sp-3); }
.legal ul,
.legal ol { padding-left: 1.3rem; }
.legal li { margin-top: 0.4rem; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--primary-soft); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--primary); }

/* Identite du site : bloc dense en tete des mentions legales. */
.legal-id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
}
.legal-id dt { color: var(--ink-muted); }
.legal-id dd { margin: 0; color: var(--ink); }

/* Encadre : citation de loi, formulaire type, avertissement. */
.legal-box {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  font-size: var(--fs-sm);
}
.legal-box > * + * { margin-top: var(--sp-3); }

.legal__meta {
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

/* Sommaire des articles, pour les documents a rallonge. */
.legal-toc {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-left: 2px solid var(--primary);
  background: var(--bg-raised);
  font-size: var(--fs-sm);
}
.legal-toc ol {
  margin-top: var(--sp-2);
  padding-left: 1.2rem;
  columns: 2;
  column-gap: var(--sp-5);
}
.legal-toc li { margin-top: 0.25rem; break-inside: avoid; }
.legal-toc a { color: var(--ink-muted); text-decoration: none; }
.legal-toc a:hover { color: var(--primary-soft); }

/* CHAMP À COMPLÉTER : volontairement criard. Ces marques doivent toutes
   avoir disparu avant la mise en ligne. */
.todo {
  background: rgba(212, 90, 42, 0.2);
  box-shadow: inset 0 -1px 0 var(--primary);
  padding: 0.05em 0.35em;
  color: var(--primary-soft);
  font-style: normal;
}

/* ==========================================================================
   5. ADAPTATIF
   ========================================================================== */

@media (max-width: 1200px) {
  .gallery { columns: 3; }
}

@media (max-width: 900px) {
  .site-header__inner { justify-content: space-between; }
  .nav-toggle { display: inline-flex; }

  /* Les deux menus fusionnent dans un seul panneau plein ecran. */
  .site-menus {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    padding: var(--sp-7);
    background: rgba(10, 9, 8, 0.97);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .site-menus.is-open { opacity: 1; visibility: visible; }

  .site-nav { flex: 0 0 auto; }
  .site-nav ul {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
  }
  .site-nav--general ul,
  .site-nav--activities ul { justify-content: center; }
  .site-nav a { font-size: var(--fs-lg); letter-spacing: 0.1em; }
  .site-nav--activities {
    padding-top: var(--sp-6);
    border-top: 1px solid var(--line);
  }

  .gallery { columns: 2; }
  .feature-grid { grid-template-columns: 1fr; }

  /* Empilees, les colonnes ne peuvent plus se caler l'une sur l'autre :
     le cadre reprend un rapport 4/5 et une largeur bornee. */
  .about-split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .portrait {
    min-height: 0;
    aspect-ratio: 4 / 5;
    max-width: 22rem;
  }

  /* La fiche produit passe en une colonne : le bloc d'achat ne peut plus
     rester colle en haut, il suit le fil de lecture. */
  .product { grid-template-columns: 1fr; gap: var(--sp-6); }
  .product__info { position: static; }

  .legal-toc ol { columns: 1; }
  .legal-id { grid-template-columns: 1fr; gap: 0.15rem; }
  .legal-id dt { margin-top: var(--sp-2); }
  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .site-footer__columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .gallery { columns: 1; }

  /* Seule au fil de la lecture, une photo n'ecrase plus sa voisine : le
     portrait reprend toute la largeur plutot que d'etre etrangle au tiers
     de l'ecran. */
  .gallery__item.gallery__item--portrait { max-width: none; }
  .form-row { grid-template-columns: 1fr; }
  .site-footer__columns { grid-template-columns: 1fr; gap: var(--sp-5); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: var(--sp-2); transform: none; }
  .lightbox__prev { left: 25%; }
  .lightbox__next { right: 25%; }
}

@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;
  }
  .media--zoom img { transform: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Mention de droits
   -------------------------------------------------------------------------- */

/* Empeche la selection et le glisser des photographies. Enumerer les
   selecteurs en oublierait : on prend toutes les images, puis on rend son
   comportement normal au logo, comme le fait le script. Ne protege rien
   pour de bon — c'est un ralentisseur, comme le reste. */
img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.site-logo img {
  -webkit-user-drag: auto;
  -webkit-user-select: auto;
  user-select: auto;
}

.droits-rappel {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 200;
  margin: 0;
  max-width: min(90vw, 34rem);
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(10, 9, 8, 0.92);
  backdrop-filter: blur(6px);
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
  transform: translate(-50%, 0.6rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.droits-rappel.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .droits-rappel { transition-duration: 0s; }
}