/* =========================================================================
   Base, typographie, éléments communs : en-tête, pied, boutons, titres.
   Les jetons (couleurs, tailles, espaces) sont dans tokens.css.
   ========================================================================= */

/* --- Remise à plat ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hauteur-entete) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Défilement doux (Lenis, public/js/vendor/) : règles fournies avec la
   bibliothèque. Quand Lenis pilote le défilement, le lissage natif doit
   se taire, sinon les deux se contrarient et la page « patine ». */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-creme);
  color: var(--c-encre);
  font-family: var(--f-texte);
  font-size: var(--t-m);
  line-height: var(--lh-texte);
  font-weight: 400;
  /* Cormorant dessine par défaut des chiffres elzéviriens : « 10 km » s'y
     lit « ıo km ». Chiffres alignés partout, pour les capacités et les
     distances. */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset {
  margin: 0;
}

/* Spécificité nulle (:where) : la remise à zéro ne doit jamais l'emporter
   sur le retrait qu'une classe donne à sa liste. Écrite « ul[class] »,
   elle annulait en silence le padding des bandes, frises et chiffres clés. */
:where(ul[class], ol[class]) {
  list-style: none;
  padding: 0;
}

fieldset {
  border: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

address {
  font-style: normal;
}

a {
  color: var(--c-bleu);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--d-rapide) var(--courbe);
}

/* Spécificité d'une simple balise : n'importe quelle classe l'emporte.
   Sans cette précaution, « a:hover » repeignait en bleu foncé le texte
   des liens posés sur une photo ou sur un fond sombre. */
a:where(:hover) {
  color: var(--c-bleu-fonce);
}

:focus-visible {
  outline: 3px solid var(--c-bleu-volet);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--c-bleu-clair);
  color: var(--c-nuit);
}

main:focus {
  outline: none;
}

/* --- Utilitaires ------------------------------------------------------- */

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

.saut-contenu {
  position: absolute;
  z-index: 100;
  top: var(--e-3);
  left: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--c-nuit);
  color: var(--c-creme);
  border-radius: var(--r-petit);
  transform: translateY(-200%);
}

.saut-contenu:focus {
  transform: none;
}

.centre {
  text-align: center;
}

.contenu {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.contenu--etroit {
  max-width: calc(52rem + 2 * var(--gouttiere));
}

.icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* --- Sections ---------------------------------------------------------- */

.section {
  padding-block: var(--e-section);
}

.section--sable {
  background: var(--c-sable);
}

.section--blanc {
  background: var(--c-blanc);
}

/* Les pages sans grande photo d'ouverture laissent la place de l'en-tête. */
body:not(.a-photo) main {
  padding-top: var(--hauteur-entete);
}

/* --- Typographie ------------------------------------------------------- */

.script {
  font-family: var(--f-script);
  font-size: var(--t-script);
  font-weight: 400;
  line-height: 1;
  color: var(--c-bleu-volet);
  /* Le lettrage penche déjà : une légère rotation achève l'effet de
     plume, sans gêner la lecture. */
  transform: rotate(-2deg);
  margin-bottom: 0.05em;
}

.titre-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 44rem;
  margin: 0 auto var(--e-7);
}

.titre-section__titre {
  font-family: var(--f-titre);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: var(--lh-titre);
  letter-spacing: -0.005em;
  color: var(--c-encre);
  text-wrap: balance;
}

.titre-section__titre--gauche {
  text-align: left;
}

.titre-section__chapo {
  margin-top: var(--e-4);
  font-size: var(--t-l);
  color: var(--c-encre-douce);
  text-wrap: pretty;
}

.titre-section--clair .script {
  color: var(--c-bleu-clair);
}

.titre-section--clair .titre-section__titre {
  color: var(--c-creme);
}

.titre-section--clair .titre-section__chapo {
  color: var(--c-creme);
  opacity: 0.92;
}

.titre-section--clair .ornement {
  color: var(--c-pierre);
}

.texte-grand {
  font-size: var(--t-l);
  line-height: 1.6;
  text-wrap: pretty;
}

/* L'ancre de façade en ornement, entre deux filets de fer forgé. */
.ornement {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-4);
  color: var(--c-pierre);
}

.ornement::before,
.ornement::after {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
}

.ornement--gauche::before {
  display: none;
}

.ornement__ancre,
.hero__ancre,
.entete__ancre {
  display: block;
  background: currentColor;
  -webkit-mask: url('/img/ancre.svg') center / contain no-repeat;
  mask: url('/img/ancre.svg') center / contain no-repeat;
}

.ornement__ancre {
  width: 1.1rem;
  aspect-ratio: 2189 / 2635;
  color: var(--c-bleu-volet);
}

.titre-section--clair .ornement__ancre {
  color: var(--c-creme);
}

/* --- Liens et boutons -------------------------------------------------- */

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-bleu);
}

.lien-fleche .icone {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--d-moyen) var(--courbe);
}

.lien-fleche:hover .icone,
a:hover > .lien-fleche .icone {
  transform: translateX(4px);
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 0.65rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--f-texte);
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--d-rapide) var(--courbe),
    color var(--d-rapide) var(--courbe),
    border-color var(--d-rapide) var(--courbe),
    transform var(--d-rapide) var(--courbe);
}

.bouton:active {
  transform: translateY(1px);
}

.bouton .icone {
  width: 1.1em;
  height: 1.1em;
}

.bouton--principal {
  background: var(--c-bleu);
  color: var(--c-blanc);
}

.bouton--principal:hover {
  background: var(--c-bleu-fonce);
  color: var(--c-blanc);
}

.bouton--clair {
  background: var(--c-creme);
  color: var(--c-nuit);
}

.bouton--clair:hover {
  background: var(--c-blanc);
  color: var(--c-bleu-fonce);
}

.bouton--contour {
  border-color: var(--c-bleu);
  color: var(--c-bleu);
  background: transparent;
}

.bouton--contour:hover {
  background: var(--c-bleu);
  color: var(--c-blanc);
}

.bouton--contour-clair {
  border-color: rgb(247 243 234 / 75%);
  color: var(--c-creme);
  background: rgb(26 44 71 / 15%);
}

.bouton--contour-clair:hover {
  background: var(--c-creme);
  color: var(--c-nuit);
}

.bouton--petit {
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  font-size: var(--t-xs);
}

.bouton--grand {
  min-height: 56px;
  padding-inline: 2.2rem;
}

/* --- Apparitions au défilement ------------------------------------------
   Masquées seulement si le script est là (.js). Si main.js ne se charge
   pas, l'animation de secours les révèle au bout de 2,5 s : aucun contenu
   ne peut rester caché. Le script, lui, désactive ce secours en posant
   .anim-pret, puis révèle chaque bloc à son entrée dans l'écran. */

@media (prefers-reduced-motion: no-preference) {
  .js .apparait {
    opacity: 0;
    transform: translateY(32px);
    animation: apparait-secours 0.6s var(--courbe) 2.5s forwards;
  }

  .js.anim-pret .apparait {
    animation: none;
    transition:
      opacity 1.1s var(--courbe-douce),
      transform 1.3s var(--courbe-douce);
    transition-delay: calc(var(--rang, 0) * 110ms);
  }

  .js.anim-pret .apparait.est-visible {
    opacity: 1;
    transform: none;
  }

  /* Les photos qui entrent dans l'écran se posent : un zoom à peine
     perceptible qui se relâche. La propriété scale est distincte de
     transform, que gardent les effets de survol. */
  .js.anim-pret .apparait img {
    transition:
      scale 1.8s var(--courbe-douce),
      transform 1.4s var(--courbe-douce);
    transition-delay: calc(var(--rang, 0) * 110ms), 0s;
  }

  .js.anim-pret .apparait:not(.est-visible) img {
    scale: 1.07;
  }

  /* Les filets de l'ornement se déroulent depuis l'ancre, après le titre. */
  .js.anim-pret .titre-section.apparait .ornement::before,
  .js.anim-pret .titre-section.apparait .ornement::after {
    transition: scale 1.2s var(--courbe-douce) 0.35s;
  }

  .js.anim-pret .titre-section.apparait:not(.est-visible) .ornement::before,
  .js.anim-pret .titre-section.apparait:not(.est-visible) .ornement::after {
    scale: 0 1;
  }

  .titre-section .ornement::before {
    transform-origin: right;
  }

  .titre-section .ornement::after {
    transform-origin: left;
  }
}

@keyframes apparait-secours {
  to {
    opacity: 1;
    transform: none;
  }
}