/* PROJET TEST SITE — base commune.
   Modifier les variables ici plutôt que multiplier les exceptions.
   Couleurs : 3 couleurs de design + des neutres.
   Photos : fournir des fichiers adaptés à leur taille d'affichage.
   Pour un plein écran mobile, prévoir idéalement un recadrage portrait
   via <picture>. object-fit recadre l'affichage, pas le fichier téléchargé. */

:root {
  --bleu: #0b3b56;
  --corail: #ff7a59;
  --olive: #7a8450;
  --blanc: #ffffff;
  --noir: #111111;
  --anthracite: #292d30;
  --gris: #60676c;
  --fond: #f5f6f4;
  --bordure: #dce0dc;

  --texte: var(--anthracite);
  --accent: var(--bleu);
  --largeur: 75rem;
  --gouttiere: clamp(1rem, 4vw, 3rem);
  --section: clamp(3rem, 7vw, 6rem);
  --rayon: 0.75rem;

  /* Tailles fluides : minimum mobile → maximum grand écran. */
  --h1: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  --h2: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  --h3: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  --h4: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --h5: 1.125rem;
  --h6: 1rem;
  --p: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --petit: 0.875rem;
}

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

body {
  margin: 0;
  color: var(--texte);
  background: var(--blanc);
  font-family: system-ui, sans-serif;
  font-size: var(--p);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  line-height: 1.15;
  font-weight: 600;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }
p { margin: 0 0 1rem; }
small, figcaption { font-size: var(--petit); }
figcaption { margin-top: 0.5rem; color: var(--gris); }
a { color: var(--accent); text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }
figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

.conteneur {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}
.section { padding-block: var(--section); }

/* Formats de référence :
   paysage 3:2 → 1500 × 1000 px
   portrait 2:3 → 1000 × 1500 px
   large 16:9 → 1920 × 1080 px
   plein écran : source paysage desktop, portrait mobile (1080 × 1440).
   Dimensions indicatives : exporter selon l'usage, sans agrandir l'original.
   Ajuster --point-photo (ex. 65% 50%) pour conserver le sujet au recadrage. */
.photo {
  width: 100%;
  object-fit: cover;
  object-position: var(--point-photo, center);
}
.photo--paysage { aspect-ratio: 3 / 2; }
.photo--portrait { aspect-ratio: 2 / 3; }
.photo--large { aspect-ratio: 16 / 9; }

/* Une image 16:9 et un écran n'ont pas toujours le même ratio :
   le plein écran remplit la fenêtre et recadre les débords. */
.photo--plein-ecran {
  width: 100%;
  height: 100vh;
  height: 100svh;
}

/* Variante immersive mobile hors plein écran : cadrage vertical.
   Les photos classiques gardent toujours leur format. */
@media (max-width: 48rem) {
  .photo--large { aspect-ratio: 3 / 4; }
}

/* Diaporama plein écran : fondu seul, sans zoom ni déplacement. */
.diaporama {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bleu);
}
.diaporama__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.diaporama__photo.est-active { opacity: 1; }
.diaporama__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .diaporama__photo { transition: none; }
}

/* Même voile que LP : dégradé latéral et ombre douce en bas. */
.diaporama::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(6 38 56 / 10%) 0%, rgb(6 38 56 / 30%) 48%, rgb(6 38 56 / 82%) 100%),
    linear-gradient(0deg, rgb(4 17 15 / 36%), transparent 50%);
}