/* =========================================================
   Les Minis de l'Espoir — feuille de style unique

   La mise en page vient de la maquette : chaque bloc porte ses
   règles en style en ligne. Cette feuille ne garde que ce qui
   ne peut pas y tenir — les polices, les réglages de document,
   les états de survol et de focus, les pseudo-éléments, et le
   portail de pré-ouverture.
   ========================================================= */


/* =========================================================
   Réglages de document
   ========================================================= */

html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: #F6F1E2; overflow-x: clip; }
a { color: #1E3A2A; }
a:hover { color: #A44E2B; }
::selection { background: #3B6B4A; color: #FBF7EC; }
:focus-visible { outline: 2px solid #A44E2B; outline-offset: 3px; }
input, select, textarea, button { font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; }
@keyframes sceau-rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes marquee-defile { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes flotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-marquee-piste], [data-sceau], [data-flotte] { animation: none !important; }
}
[data-rail-fenetre]::-webkit-scrollbar, nav[aria-label]::-webkit-scrollbar { display: none; }
nav[aria-label] { scrollbar-width: none; }


/* =========================================================
   Survols, focus et pseudo-éléments de la maquette
   Chaque classe est appelée par les blocs correspondants
   dans index.html.
   ========================================================= */

.effet-1::before { content:''; position:absolute; top:-14px; left:24%; width:1.6px; height:14px; background:linear-gradient(180deg,rgba(30,58,42,.25),rgba(30,58,42,.75)) }
.effet-1::after { content:''; position:absolute; top:-14px; right:24%; width:1.6px; height:14px; background:linear-gradient(180deg,rgba(30,58,42,.25),rgba(30,58,42,.75)) }
.effet-2::before { content:''; position:absolute; top:-19px; left:50%; width:1.6px; height:19px; background:linear-gradient(180deg,rgba(30,58,42,.25),rgba(30,58,42,.75)) }
.effet-2::after { content:''; position:absolute; top:-5px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#F3D08A; box-shadow:inset 0 -1px 1px rgba(90,54,20,.5) }
.effet-3:hover { background:#E8A87C; color:#1E3A2A }
.effet-4:hover { color:#E8A87C }
.effet-5:hover { background:#1E3A2A; color:#FBF7EC }
.effet-6:hover { transform:translateY(-6px); box-shadow:0 20px 44px rgba(30,58,42,.16) }
.effet-6::before { content:''; position:absolute; left:-11px; bottom:92px; width:22px; height:22px; border-radius:50%; background:#CBDCBC }
.effet-6::after { content:''; position:absolute; right:-11px; bottom:92px; width:22px; height:22px; border-radius:50%; background:#CBDCBC }
.effet-7:hover { background:#A44E2B; color:#FBF7EC }
.effet-8:hover { background:#A44E2B }
.effet-9::before { content:''; position:absolute; left:-11px; bottom:92px; width:22px; height:22px; border-radius:50%; background:#CBDCBC }
.effet-9::after { content:''; position:absolute; right:-11px; bottom:92px; width:22px; height:22px; border-radius:50%; background:#CBDCBC }
.effet-10:hover { background:#FBF7EC }
.effet-11::before { content:''; position:absolute; top:11px; left:0; width:7px; height:7px; border-radius:50%; background:#A44E2B }
.effet-12:hover { color:#E8A87C; border-color:#E8A87C }
.effet-13:focus { border-color:#3B6B4A }
.effet-14:hover { background:#1E3A2A }

/* Fiches « animaux à vendre » du rail horizontal.

   Leur inclinaison est reprise en JavaScript à chaque image (voir
   initRail dans script.js), qui écrase `style.transform` 60 fois par
   seconde pendant tout le défilement. Une transition CSS sur `transform`
   n'y survivrait pas. Une *animation* CSS, si : les animations forment
   une couche à part dans la cascade, au-dessus des déclarations
   normales — style en ligne compris — tant qu'aucune n'est marquée
   !important. Le survol peut donc faire osciller la fiche sur son fil
   sans jamais entrer en conflit avec la boucle de script.js.

   L'angle de repos change d'une fiche à l'autre (`data-pivot` sur
   chacune) : la balance part et revient à `--pivot`, posée en style en
   ligne au même endroit, pour qu'une seule animation serve aux quatre
   fiches sans à-coup au départ ni à l'arrivée. */
.effet-15 {
  --pivot: 0deg;
  box-shadow: 0 12px 30px rgba(30, 58, 42, .12);
  transition: box-shadow .4s cubic-bezier(.2, .7, .2, 1);
}
.effet-15:hover {
  box-shadow: 0 30px 54px -12px rgba(30, 58, 42, .38);
  animation: fiche-balance 1.15s cubic-bezier(.22, .61, .36, 1) 1;
}
.effet-15 img {
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.effet-15:hover img {
  transform: scale(1.08);
}

@keyframes fiche-balance {
  0%   { transform: rotate(var(--pivot)); }
  18%  { transform: rotate(calc(var(--pivot) + 9deg)); }
  40%  { transform: rotate(calc(var(--pivot) - 6deg)); }
  60%  { transform: rotate(calc(var(--pivot) + 3.5deg)); }
  78%  { transform: rotate(calc(var(--pivot) - 2deg)); }
  92%  { transform: rotate(calc(var(--pivot) + 1deg)); }
  100% { transform: rotate(var(--pivot)); }
}

@media (prefers-reduced-motion: reduce) {
  .effet-15:hover { animation: none; }
}


/* =========================================================
   Réglages complémentaires
   ========================================================= */

/* Les blocs pilotés par script.js (semaine affichée, modale,
   accusé d'envoi) portent l'attribut « hidden ». Le point-
   virgule d'exclamation force la règle même quand l'élément
   reçoit un display en style en ligne. */
[hidden] { display: none !important; }

/* =========================================================
   Constructeurs de devis (section « Demander un devis »)
   Ces règles ne peuvent pas tenir dans un attribut « style » :
   états sélectionnés, survols, focus, et les pseudo-éléments
   propres aux curseurs de type « range ».
   ========================================================= */

/* ---------- Onglets : un formulaire à la fois ---------- */

.devis-onglet {
  padding: 14px 26px;
  border: 1.5px solid rgba(30, 58, 42, .3);
  border-radius: 99px;
  background: transparent;
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1E3A2A;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.devis-onglet:hover {
  background: rgba(30, 58, 42, .08);
  border-color: rgba(30, 58, 42, .55);
}

.devis-onglet[aria-selected="true"] {
  background: #1E3A2A;
  border-color: #1E3A2A;
  color: #FBF7EC;
}

/* Reste visible au-dessus du formulaire pendant le défilement,
   juste sous la barre d'en-tête (122px de haut). */
.devis-onglets-barre {
  position: sticky;
  top: 122px;
  z-index: 500;
  padding-block: 12px;
  margin-top: -12px;
  background: rgba(246, 241, 226, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 16px -14px rgba(30, 58, 42, .4);
}

/* ---------- Cartes et pastilles à cocher ---------- */

.devis-carte,
.devis-pastille {
  display: flex;
  border: 1.5px solid rgba(251, 247, 236, .22);
  background: rgba(251, 247, 236, .05);
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  color: #FBF7EC;
  text-align: left;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}

.devis-carte {
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  min-height: 118px;
  padding: 18px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.devis-pastille {
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 99px;
  font-size: 15px;
  font-weight: 700;
}

.devis-carte:hover,
.devis-pastille:hover {
  background: rgba(251, 247, 236, .1);
  border-color: rgba(251, 247, 236, .4);
}

.devis-carte[aria-pressed="true"],
.devis-pastille[aria-pressed="true"] {
  background: rgba(232, 168, 124, .16);
  border-color: #E8A87C;
}

/* ---------- Curseurs ---------- */

.devis-glissiere {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 99px;
  background: rgba(251, 247, 236, .22);
  cursor: pointer;
}

.devis-glissiere::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #E8A87C;
  cursor: pointer;
}

.devis-glissiere::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #E8A87C;
  cursor: pointer;
}

.devis-glissiere:focus-visible {
  outline: 2px solid #E8A87C;
  outline-offset: 4px;
}

/* ---------- Champs de saisie ---------- */

.devis-champ {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(30, 58, 42, .25);
  border-radius: 14px;
  background: #FFFFFF;
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  color: #1E3A2A;
  box-sizing: border-box;
}

.devis-champ:focus {
  outline: none;
  border-color: #3B6B4A;
}

textarea.devis-champ {
  min-height: 52px;
  resize: vertical;
}

/* ---------- Bouton d'envoi ---------- */

.devis-envoi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
  padding: 17px 28px;
  border: 0;
  border-radius: 14px;
  background: #A44E2B;
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #FBF7EC;
  cursor: pointer;
  transition: background .3s;
}

.devis-envoi:hover { background: #1E3A2A; }

/* Dans le bandeau de « la ferme en cavale », le bouton se range
   à droite du tarif plutôt que sur toute la largeur. */
.devis-envoi--auto { width: auto; margin-top: 0; }


/* Lignes du règlement de visite, dans « Cinq bons réflexes ».
   Il leur faut une classe : l'inversion au survol touche trois
   enfants à la fois, et le filet du haut doit disparaître sur la
   première ligne — un attribut « style » ne sait exprimer ni l'un
   ni l'autre. */
.reflexe-ligne {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  column-gap: 18px;
  padding: 16px 14px;
  border-radius: 12px;
  border-top: 1px solid rgba(30, 58, 42, .12);
  transition: background .25s;
}

.reflexe-ligne:first-child {
  border-top: 0;
}

.reflexe-num {
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 30px);
  color: #A44E2B;
  transition: color .25s;
}

.reflexe-titre {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #1E3A2A;
  transition: color .25s;
}

.reflexe-desc {
  max-width: 26ch;
  text-align: right;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(30, 58, 42, .58);
  transition: color .25s;
}

.reflexe-ligne:hover {
  background: #1E3A2A;
}

.reflexe-ligne:hover .reflexe-num { color: #E8A87C; }
.reflexe-ligne:hover .reflexe-titre { color: #FBF7EC; }
.reflexe-ligne:hover .reflexe-desc { color: rgba(251, 247, 236, .75); }

/* Repliée sur mobile : le nombre de points passe, la description
   descend sous le titre plutôt que de s'écraser à droite. */
@media (max-width: 560px) {
  .reflexe-ligne {
    grid-template-columns: 36px 1fr;
    row-gap: 4px;
  }

  .reflexe-desc {
    grid-column: 1 / -1;
    max-width: none;
    text-align: left;
    padding-left: 54px;
  }
}

/* Flèches de la semaine, une fois en butée. Posé après les
   effets de survol pour l'emporter sur eux. */
[data-act="semainePrec"][disabled],
[data-act="semaineSuiv"][disabled],
[data-act="semainePrec"][disabled]:hover,
[data-act="semaineSuiv"][disabled]:hover {
  opacity: .35;
  cursor: default;
  background: transparent;
  color: #1E3A2A;
}


/* =========================================================
   Portail de pré-ouverture (gate.js)
   Voile posé devant le site tant que le mot de passe n'a pas
   été donné. À retirer le jour de la mise en ligne, en même
   temps que gate.js et son appel dans index.html.
   ========================================================= */

/* Remise à zéro réservée au portail. La maquette, elle, est
   dessinée sans réinitialisation : ces règles restent donc
   enfermées dans .portail. Le :where() les laisse à une
   spécificité nulle, pour que les règles nommées plus bas
   l'emportent toujours. */
:where(.portail, .portail *, .portail *::before, .portail *::after) {
  box-sizing: border-box;
}

:where(.portail) :where(h1, p) { margin: 0; }
:where(.portail) :where(h1) { font-weight: 400; }
:where(.portail) :where(img, svg) { display: block; max-width: 100%; height: auto; }

:root {
  --c-creme: #F6F1E2;
  --c-creme-clair: #FBF7EC;
  --c-sauge-clair: #E2EBD8;
  --c-foret: #3B6B4A;
  --c-foret-sombre: #1E3A2A;
  --c-encre: #1E3A2A;
  --c-encre-80: rgba(30, 58, 42, .8);
  --c-encre-55: rgba(30, 58, 42, .55);
  --c-encre-30: rgba(30, 58, 42, .3);
  --c-abricot: #E8A87C;
  --c-terre: #A44E2B;
  --c-blanc-chaud: #FFFFFF;

  --f-titre: "Young Serif", Georgia, "Times New Roman", serif;
  --f-texte: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-section: clamp(28px, 4.4vw, 50px);
  --fs-mention: 12px;

  --e-3: 12px;
  --e-5: 22px;
  --e-6: 30px;
  --e-7: 44px;
  --marge-page: 22px;

  --r-capsule: 99px;
  --r-carte: 26px;
  --r-carte-forte: 60px;
  --r-arche: 999px 999px 22px 22px;

  --ombre-flottante: 0 20px 44px rgba(30, 58, 42, .16);
  --t-doux: 280ms cubic-bezier(.2, .7, .2, 1);
}

html.portail-actif { overflow: hidden; }
html.portail-actif body > *:not(.portail):not(.grain) { display: none !important; }

.portail {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--marge-page);
  overflow-y: auto;
  background: var(--c-creme);
  background-image:
    radial-gradient(60% 55% at 12% 8%, var(--c-sauge-clair) 0%, transparent 62%),
    radial-gradient(52% 48% at 92% 96%, var(--c-sauge-clair) 0%, transparent 60%);
}

.portail.est-sorti {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.portail__carte {
  width: min(980px, 100%);
  display: grid;
  gap: var(--e-6);
  padding: clamp(26px, 5vw, 52px);
  border-radius: var(--r-carte-forte) var(--r-carte-forte) var(--r-carte) var(--r-carte);
  background: var(--c-creme-clair);
  box-shadow: var(--ombre-flottante);
}

/* ---------- Colonne image ---------- */

.portail__visuel {
  position: relative;
  width: min(58%, 260px);
  margin: 0 auto;
}

.arche {
  padding: 11px;
  border-radius: var(--r-arche);
  background: var(--c-sauge-clair);
  box-shadow: var(--ombre-flottante);
}

.arche__fenetre {
  overflow: hidden;
  border-radius: 999px 999px 14px 14px;
}

.arche__fenetre img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.sceau {
  position: absolute;
  bottom: -20px;
  left: -14px;
  width: clamp(88px, 22vw, 112px);
  aspect-ratio: 1;
  animation: rotation-sceau 34s linear infinite;
}

.sceau svg { width: 100%; height: 100%; overflow: visible; }
.sceau circle { fill: var(--c-foret-sombre); }

.sceau__texte {
  fill: var(--c-creme-clair);
  font-family: var(--f-texte);
  font-size: 11.4px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.sceau__annee {
  fill: var(--c-abricot);
  font-family: var(--f-titre);
  font-size: 25px;
  font-style: italic;
}

@keyframes rotation-sceau {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Colonne texte ---------- */

.portail__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

.portail__marque {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: var(--e-5);
  font-family: var(--f-titre);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.titre-section {
  font-family: var(--f-titre);
  font-size: var(--fs-section);
  line-height: .95;
  letter-spacing: -.02em;
}

.portail__titre { margin-bottom: var(--e-7); }
.portail__titre em { color: var(--c-terre); }

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 var(--e-5);
  padding: 9px 20px;
  border-radius: var(--r-capsule);
  background: var(--c-creme-clair);
  box-shadow: 0 6px 18px rgba(30, 58, 42, .08);
  font-size: var(--fs-mention);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pastille__point {
  width: 7px;
  height: 7px;
  border-radius: var(--r-capsule);
  background: var(--c-terre);
}

.portail__ligne { width: 100%; }

.portail__etiquette {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-mention);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-encre-80);
}

.portail__saisie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.portail__champ {
  flex: 1 1 200px;
  min-width: 0;
  padding: 15px 20px;
  border: 1px solid var(--c-encre-30);
  border-radius: var(--r-capsule);
  background: var(--c-blanc-chaud);
  font-family: var(--f-texte);
  font-size: 16px;
  color: var(--c-encre);
}

.portail__champ:focus {
  outline: none;
  border-color: var(--c-foret);
}

.portail .bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 16px 28px;
  border: 0;
  border-radius: var(--r-capsule);
  font-family: var(--f-texte);
  font-size: var(--fs-mention);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-doux), transform var(--t-doux), color var(--t-doux);
}

.portail .bouton:hover { transform: translateY(-3px); }
.portail .bouton--foret { background: var(--c-foret-sombre); color: var(--c-creme-clair); }
.portail .bouton--foret:hover { background: var(--c-terre); color: var(--c-creme-clair); }

.portail__bouton { flex: 0 0 auto; }

.portail__erreur {
  margin: 10px 0 0;
  min-height: 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-terre);
}

.portail__pied {
  margin: var(--e-6) 0 0;
  font-size: var(--fs-mention);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-encre-55);
}

.portail__carte.tremble { animation: tremblement-portail .34s; }

@keyframes tremblement-portail {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

/* ---------- Deux colonnes dès la tablette ---------- */

@media (min-width: 760px) {
  .portail__carte {
    grid-template-columns: minmax(170px, 250px) 1fr;
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
  }

  .portail__visuel {
    width: 100%;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portail,
  .portail.est-sorti,
  .portail__carte.tremble { animation: none; transition: none; }

  .sceau { animation: none; }
  .portail .bouton:hover { transform: none; }
}


/* =========================================================
   Loader « Une matinée à la ferme » (loader-ferme.js)

   Le pré d'origine, en plein écran : quatre plans posés l'un
   devant l'autre (collines au loin, coteau et champ, pré des
   animaux, herbes hautes), qui glissent chacun à leur vitesse
   et suivent un peu la souris. Le soleil se lève derrière la
   colline, la brume se dissipe, les nuages dérivent ; le
   médaillon du logo descend de ses fils et se balance ; les
   empreintes montent le sentier pendant que le compteur monte.
   Puis le pré s'ouvre sur l'accueil.

   Rien que des transformations et de l'opacité : tout ce qui
   bouge en grand (plans, soleil, nuages, brume, médaillon) est
   un élément à part, déplacé sans être repeint. Les petits
   gestes des animaux restent dans leur propre petit SVG.

   Mise en place : tout est exprimé dans le repère de la scène
   d'origine (1200 × 500 unités). --k est la taille d'une unité
   à l'écran ; --top, la hauteur où la scène commence. Les
   plans font 2240 × 1400 unités (la scène prolongée de chaque
   côté et vers le bas) pour couvrir tous les formats d'écran.

   Chaque sélecteur est préfixé par #loader-rideau : rien ne
   doit en sortir, rien de la maquette ne doit y entrer.
   ========================================================= */

/* Sans la classe, pas de rideau : un visiteur sans JavaScript
   voit la page directement. La classe est posée par le script du
   <head> (première visite de l'onglet), par gate.js une fois le
   mot de passe donné, ou par le bouton « Revoir l'intro ». */
#loader-rideau { display: none; }
html.chargement-actif { overflow: hidden; }
html.chargement-actif #loader-rideau { display: block; }

#loader-rideau {
  /* Durée de la scène. loader-ferme.js lit cette même variable pour
     ses empreintes et son compteur : un seul chiffre à changer. */
  --loader-duree: 1.9s;
  /* Durée de la sortie (le pré qui s'ouvre). Lue aussi par le script.
     Scène + petite pause + sortie : 3 s au plus en tout (le script
     plafonne de toute façon à 3 s, voir DUREE_MAX dans loader-ferme.js). */
  --loader-sortie: .8s;

  --ws: max(760px, min(100vw, 160vh));
  --k: calc(var(--ws) / 1200);
  --cx: 600;
  --soleil-x: 860;
  --top: min(calc(100% - var(--k) * 545), 42%);
  --pancarte: 200px;
  --pancarte-haut: clamp(34px, 6.6vh, 64px);

  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  contain: strict;
  color: #1E3A2A;
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  font-synthesis: none;
  transform-origin: 50% 62%;
  -webkit-tap-highlight-color: transparent;
}

/* Le filet intérieur, comme un passe-partout : les fils du
   médaillon y sont accrochés. */
#loader-rideau::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 4;
  border: 1px solid rgba(30,58,42,.16);
  box-shadow: inset 0 0 0 1px rgba(251,247,236,.22);
  pointer-events: none;
}

#loader-rideau .loader-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Les dessins gardent la taille qu'on leur donne (la maquette borne
   ailleurs les images et les SVG à la largeur de leur parent). */
#loader-rideau svg,
#loader-rideau img { max-width: none; }

#loader-rideau .loader-ciel,
#loader-rideau .loader-plan {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Le ciel porte le fond du rideau, et s'arrête en fondu derrière les
   collines : à la sortie, il remonte et le pré descend — l'accueil
   apparaît entre les deux, le long de l'horizon. */
#loader-rideau .loader-ciel {
  background: linear-gradient(180deg, #EDEEE1 0%, #F4F0E0 30%, #F9F0DA 52%, #F7E9C8 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--top) + var(--k) * 255), transparent calc(var(--top) + var(--k) * 300));
  mask-image: linear-gradient(180deg, #000 calc(var(--top) + var(--k) * 255), transparent calc(var(--top) + var(--k) * 300));
}
#loader-rideau .loader-glisse {
  position: absolute;
  top: var(--top);
  left: calc(50% - var(--k) * (var(--cx) + 520));
  width: calc(var(--k) * 2240);
  height: calc(var(--k) * 1400);
}
#loader-rideau .loader-decor {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Tout ce qui bouge en grand a sa propre couche dès la première image :
   rien n'est repeint quand le mouvement commence. */
#loader-rideau .loader-ciel,
#loader-rideau .loader-plan,
#loader-rideau .loader-glisse,
#loader-rideau .loader-soleil,
#loader-rideau .loader-nuage,
#loader-rideau .loader-oiseaux,
#loader-rideau .loader-brume,
#loader-rideau .loader-rayons,
#loader-rideau .loader-pancarte { will-change: transform; }

/* Un animal : son petit SVG est posé au bon endroit du repère. */
#loader-rideau .loader-sujet {
  position: absolute;
  left: calc(var(--k) * (var(--x) + 520));
  top: calc(var(--k) * var(--y));
  width: calc(var(--k) * var(--w));
  height: calc(var(--k) * var(--h));
  overflow: visible;
}


/* ---------- Le ciel ---------- */

#loader-rideau .loader-soleil,
#loader-rideau .loader-nuage,
#loader-rideau .loader-oiseaux { position: absolute; display: block; overflow: visible; }

/* Le soleil se lève derrière la colline : il part bas, à moitié
   caché, et monte pendant toute la scène. */
#loader-rideau .loader-soleil {
  left: calc(50% + var(--k) * (var(--soleil-x) - var(--cx)) - var(--k) * 150);
  top: calc(var(--top) + var(--k) * (236 - 150));
  width: calc(var(--k) * 300);
  height: calc(var(--k) * 300);
}

#loader-rideau .loader-nuage--a { left: 7%;  top: calc(var(--top) - 9%);  width: calc(var(--k) * 150); --derive: calc(var(--k) * 46); }
#loader-rideau .loader-nuage--b { left: 64%; top: calc(var(--top) + var(--k) * 42); width: calc(var(--k) * 108); --derive: calc(var(--k) * 30); }
#loader-rideau .loader-nuage--c { left: 80%; top: calc(var(--top) - 17%); width: calc(var(--k) * 128); --derive: calc(var(--k) * 38); opacity: .85; }
#loader-rideau .loader-nuage--d { left: 26%; top: calc(var(--top) + var(--k) * 64); width: calc(var(--k) * 78);  --derive: calc(var(--k) * 24); opacity: .8; }

#loader-rideau .loader-oiseaux {
  left: 20%;
  top: calc(var(--top) - 2%);
  width: calc(var(--k) * 70);
}
#loader-rideau .oiseau { transform-box: fill-box; transform-origin: 50% 40%; }


/* ---------- Brume et lumière du matin ---------- */

#loader-rideau .loader-brume {
  position: absolute;
  left: -12%;
  width: 124%;
  pointer-events: none;
}
#loader-rideau .loader-brume--haute {
  top: calc(var(--top) + var(--k) * 190);
  height: calc(var(--k) * 150);
  background:
    radial-gradient(32% 46% at 18% 55%, rgba(255,252,243,.9), rgba(255,252,243,0) 72%),
    radial-gradient(30% 40% at 52% 62%, rgba(255,252,243,.75), rgba(255,252,243,0) 72%),
    radial-gradient(34% 48% at 84% 50%, rgba(255,252,243,.85), rgba(255,252,243,0) 72%);
  opacity: .9;
  --derive: calc(var(--k) * 40);
}
#loader-rideau .loader-brume--basse {
  top: calc(var(--top) + var(--k) * 268);
  height: calc(var(--k) * 120);
  background:
    radial-gradient(30% 42% at 30% 50%, rgba(255,251,240,.7), rgba(255,251,240,0) 72%),
    radial-gradient(36% 46% at 72% 56%, rgba(255,251,240,.6), rgba(255,251,240,0) 72%);
  opacity: .7;
  --derive: calc(var(--k) * 64);
}

/* Les rayons partent du centre du soleil (le coin haut gauche de
   ce point d'ancrage) et s'ouvrent en éventail dans le ciel, derrière
   les collines. */
#loader-rideau .loader-rayons {
  position: absolute;
  left: calc(50% + var(--k) * (var(--soleil-x) - var(--cx)));
  top: calc(var(--top) + var(--k) * 236);
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 1;
}
#loader-rideau .loader-rayons svg {
  position: absolute;
  left: calc(var(--k) * -1000);
  top: calc(var(--k) * -1000);
  width: calc(var(--k) * 2000);
  height: calc(var(--k) * 1000);
  display: block;
  overflow: visible;
}

/* La lumière chaude du soleil sur tout le paysage. */
#loader-rideau .loader-lumiere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at calc(50% + var(--k) * (var(--soleil-x) - var(--cx))) calc(var(--top) + var(--k) * 160),
    rgba(255,236,188,.5) 0, rgba(255,236,188,.16) calc(var(--k) * 420), rgba(255,236,188,0) calc(var(--k) * 900));
  opacity: .45;
}


/* ---------- Les herbes du premier plan ---------- */

#loader-rideau .loader-glisse--avant {
  top: auto;
  bottom: -4px;
  left: -48px;
  width: calc(100% + 96px);
  height: clamp(118px, 23vh, 236px);
}
#loader-rideau .loader-herbes {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 300 / 240;
  overflow: visible;
}
#loader-rideau .loader-herbes--g { left: 0; }
#loader-rideau .loader-herbes--d { right: 0; }
#loader-rideau .brin-avant { transform-box: fill-box; transform-origin: 50% 100%; }


/* ---------- Le médaillon ----------

   Un médaillon crème cerclé de bois, pendu à deux fils accrochés au
   filet du haut. Les fils sont posés en ::before / ::after, derrière
   (z-index négatif, d'où l'isolation). Il est tenu hors champ par
   « chargement » tant que le script n'a pas donné le départ. */

#loader-rideau .loader-pancarte {
  position: absolute;
  z-index: 5;
  top: var(--pancarte-haut);
  left: calc(50% - var(--pancarte) / 2);
  isolation: isolate;
  box-sizing: border-box;
  width: var(--pancarte);
  height: var(--pancarte);
  padding: 10px;
  border-radius: 50%;
  border: 5px solid #8E5C33;
  background: radial-gradient(circle at 35% 30%, #FFFDF6 0%, #F2EBD8 72%);
  box-shadow: inset 0 0 0 3px rgba(251,247,236,.95),
              0 0 0 1px rgba(92,58,32,.55),
              0 18px 30px -12px rgba(36,55,35,.42),
              0 4px 8px rgba(31,53,36,.16);
  transform-origin: 50% calc(14px - var(--pancarte-haut));
}
#loader-rideau .loader-pancarte::before,
#loader-rideau .loader-pancarte::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 16px);
  z-index: -1;
  width: 2px;
  height: calc(var(--pancarte-haut) - 14px + 16px);
  background: linear-gradient(180deg, rgba(64,87,68,.55), #405744);
}
#loader-rideau .loader-pancarte::before { left: 30%; }
#loader-rideau .loader-pancarte::after { right: 30%; }
#loader-rideau .loader-pancarte-logo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
#loader-rideau.chargement .loader-pancarte { transform: translateY(calc(-100% - var(--pancarte-haut) - 30px)); }


/* ---------- Le compteur ---------- */

#loader-rideau .loader-bas {
  position: absolute;
  z-index: 5;
  top: calc(var(--pancarte-haut) + var(--pancarte) + 12px);
  left: 50%;
  width: 220px;
  margin-left: -110px;
  text-align: center;
  pointer-events: none;
}
#loader-rideau.chargement .loader-bas { opacity: 0; }
#loader-rideau .loader-compteur {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  font-family: 'Young Serif', Georgia, serif;
  line-height: 1;
  letter-spacing: -.03em;
  color: #1E3A2A;
}
#loader-pourcent {
  min-width: 2.6ch;
  font-size: 46px;
  text-align: right;
  /* Chiffres à chasse fixe : sans ça, le compteur tremblerait à
     chaque changement de dizaine. */
  font-variant-numeric: tabular-nums;
}
#loader-rideau .loader-signe {
  margin-left: 4px;
  font-size: 21px;
  letter-spacing: -.02em;
  color: #89926B;
}


/* ---------- Les empreintes ----------

   Créées en SVG par loader-ferme.js le long de l'axe du sentier :
   poule, vache et chien s'alternent par paires, de plus en plus
   petites à mesure qu'elles montent vers le pré. Chacune apparaît
   quand la progression la dépasse. */

#loader-rideau .empreinte { fill: currentColor; opacity: 0; transition: opacity .22s ease-out; }
#loader-rideau .empreinte.posee { opacity: .8; }
#loader-rideau .empreinte.derniere { opacity: .95; }
#loader-rideau .empreinte-poule { color: #8F6A42; }
#loader-rideau .empreinte-vache { color: #5E7150; }
#loader-rideau .empreinte-chien { color: #776852; }
/* La poule laisse trois doigts et un ergot : des traits. */
#loader-rideau .empreinte-poule path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- « Passer » et lecteurs d'écran ---------- */

#loader-rideau .loader-passer {
  position: absolute;
  z-index: 6;
  top: 20px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 99px;
  background: none;
  color: #1E3A2A;
  font: 600 12px/1 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .6;
  visibility: hidden;
  transition: opacity .3s;
}
#loader-rideau .loader-passer svg { width: 13px; height: 13px; flex: none; }
#loader-rideau .loader-passer:hover { opacity: 1; }
#loader-rideau .loader-passer:focus-visible { opacity: 1; outline: 2px solid #E8A87C; outline-offset: 2px; }

#loader-rideau .loader-lecteur {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}


/* =========================================================
   Le mouvement

   Tout part de la classe « anime », posée par le script au
   démarrage. Le paysage est déjà en place : rien n'apparaît,
   tout se met seulement à vivre. Les images-clés partent de la
   pose de départ (pas de « from »), pour qu'aucun élément ne
   saute quand l'animation commence.
   ========================================================= */

/* Les plans glissent, chacun à sa vitesse : un lent travelling. */
#loader-rideau .loader-plan--loin .loader-glisse   { --glisse: calc(var(--k) * -7); }
#loader-rideau .loader-plan--coteau .loader-glisse { --glisse: calc(var(--k) * -16); }
#loader-rideau .loader-plan--pre .loader-glisse    { --glisse: calc(var(--k) * -30); }
#loader-rideau .loader-glisse--avant               { --glisse: -46px; }
#loader-rideau.anime .loader-glisse {
  animation: loader-glisse calc(var(--loader-duree) + var(--loader-sortie) + .4s) cubic-bezier(.3,.12,.45,1) both;
}
@keyframes loader-glisse { to { translate: var(--glisse) 0; } }

/* Le ciel. */
#loader-rideau.anime .loader-soleil,
#loader-rideau.anime .loader-rayons { animation: loader-leve calc(var(--loader-duree) * 1.25) cubic-bezier(.22,.55,.3,1) both; }
#loader-rideau .loader-rayons svg { transform-origin: 50% 100%; opacity: .35; }
#loader-rideau.anime .loader-rayons svg { animation: loader-rayons calc(var(--loader-duree) * 1.25) ease-in-out both; }
#loader-rideau.anime .loader-lumiere { animation: loader-lumiere calc(var(--loader-duree) * 1.1) ease-out both; }
#loader-rideau.anime .loader-nuage { animation: loader-derive calc(var(--loader-duree) * 1.6) linear both; }
#loader-rideau.anime .loader-brume { animation: loader-brume calc(var(--loader-duree) * 1.4) ease-out both; }
#loader-rideau.anime .loader-oiseaux { animation: loader-vol calc(var(--loader-duree) * 1.5) linear both; }
#loader-rideau.anime .oiseau { animation: loader-bat .46s ease-in-out infinite alternate; }
#loader-rideau.anime .oiseau--2 { animation-delay: -.2s; }
#loader-rideau.anime .oiseau--3 { animation-delay: -.33s; }

@keyframes loader-leve { to { translate: 0 calc(var(--k) * -82); } }
@keyframes loader-rayons { 0% { opacity: .35; rotate: -3deg; } 100% { opacity: 1; rotate: 3deg; } }
@keyframes loader-lumiere { to { opacity: 1; } }
@keyframes loader-derive { to { translate: var(--derive) 0; } }
@keyframes loader-brume { to { translate: var(--derive) calc(var(--k) * -16); opacity: .35; } }
@keyframes loader-vol { to { translate: calc(var(--k) * 150) calc(var(--k) * -34); } }
@keyframes loader-bat { to { scale: 1 .42; } }

/* Les herbes hautes ondulent au vent, en vague de la gauche vers la
   droite (le retard de chaque brin est posé dans le balisage). */
#loader-rideau.anime .brin-avant {
  animation: loader-vent 2.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--d, 0) * -1s);
}
@keyframes loader-vent {
  from { rotate: calc(var(--a, 3) * -.55deg); }
  to   { rotate: calc(var(--a, 3) * 1deg); }
}

/* Les repères de rotation des animaux. « transform-box: fill-box »
   permet de les exprimer dans la boîte du dessin lui-même. */
#loader-rideau .mouton,
#loader-rideau .vache-tete,
#loader-rideau .vache-queue,
#loader-rideau .poule,
#loader-rideau .poule-tete,
#loader-rideau .mouton-tete { transform-box: fill-box; transform-origin: center bottom; }
#loader-rideau .vache-tete { transform-origin: 15% 70%; }
#loader-rideau .vache-queue { transform-origin: center top; }
#loader-rideau .poule-tete { transform-origin: 25% 85%; }
#loader-rideau .mouton-tete { transform-origin: 20% 60%; }
#loader-rideau .poney-tete,
#loader-rideau .poney-oreilles,
#loader-rideau .poney-queue { transform-box: fill-box; }
#loader-rideau .poney-tete { transform-origin: 20% 75%; }
#loader-rideau .poney-oreilles { transform-origin: 50% 100%; }
#loader-rideau .poney-queue { transform-origin: 90% 5%; }
#loader-rideau .aile { transform-box: fill-box; }
#loader-rideau .aile-g { transform-origin: 100% 50%; }
#loader-rideau .aile-d { transform-origin: 0 50%; }

/* La vache broute, mâche, puis relève la tête vers nous. */
#loader-rideau.anime .vache-tete { animation: loader-broute var(--loader-duree) ease-in-out both; }
#loader-rideau.anime .vache-queue { animation: loader-queue 1.1s ease-in-out infinite alternate; }
/* Le poney hoche la tête, fouette de la queue, une oreille frémit. */
#loader-rideau.anime .poney-tete { animation: loader-poney-hoche calc(var(--loader-duree) / 2) ease-in-out 2; }
#loader-rideau.anime .poney-queue { animation: loader-poney-fouette calc(var(--loader-duree) / 2) ease-in-out .3s 2; }
#loader-rideau.anime .poney-oreilles { animation: loader-oreille-fremit var(--loader-duree) ease-in-out both; }
/* Le mouton respire et tourne la tête. */
#loader-rideau.anime .mouton { animation: loader-respire 1.5s ease-in-out infinite alternate; }
#loader-rideau.anime .mouton-tete { animation: loader-mouton-tete var(--loader-duree) ease-in-out both; }
/* La poule picore trois fois. */
#loader-rideau.anime .poule-tete { animation: loader-picore var(--loader-duree) ease-in-out both; }
#loader-rideau.anime .poule { animation: loader-poule-penche var(--loader-duree) ease-in-out both; }
/* Deux papillons. */
#loader-rideau.anime .loader-papillon--1 { animation: loader-papillon-1 calc(var(--loader-duree) * 1.3) ease-in-out both; }
#loader-rideau.anime .loader-papillon--2 { animation: loader-papillon-2 calc(var(--loader-duree) * 1.3) ease-in-out both; }
#loader-rideau.anime .aile { animation: loader-aile .15s ease-in-out infinite alternate; }

@keyframes loader-broute {
  0% { rotate: 0deg; }
  16%, 24% { rotate: 30deg; }
  30% { rotate: 25deg; }
  36% { rotate: 30deg; }
  42% { rotate: 25deg; }
  50% { rotate: 30deg; }
  70%, 100% { rotate: -5deg; }
}
@keyframes loader-queue { from { rotate: -10deg; } to { rotate: 13deg; } }
@keyframes loader-poney-hoche { 0%, 100% { rotate: 0deg; } 50% { rotate: 8deg; } }
@keyframes loader-poney-fouette { 0%, 100% { rotate: 0deg; } 50% { rotate: 8deg; } }
@keyframes loader-oreille-fremit { 0%, 30%, 55%, 100% { rotate: 0deg; } 40% { rotate: -8deg; } 46% { rotate: 3deg; } }
@keyframes loader-respire { to { scale: 1.012 1.03; } }
@keyframes loader-mouton-tete { 0%, 12% { rotate: 0deg; } 34%, 58% { rotate: -9deg; } 82%, 100% { rotate: 3deg; } }
@keyframes loader-picore {
  0%, 10%, 24%, 38%, 52%, 66%, 80%, 100% { rotate: 0deg; }
  15%, 19%, 43%, 47%, 71%, 75% { rotate: 44deg; }
}
@keyframes loader-poule-penche {
  0%, 10%, 24%, 38%, 52%, 66%, 80%, 100% { rotate: 0deg; }
  15%, 19%, 43%, 47%, 71%, 75% { rotate: 7deg; }
}
@keyframes loader-papillon-1 {
  25% { translate: calc(var(--k) * 22) calc(var(--k) * -16); }
  50% { translate: calc(var(--k) * 40) calc(var(--k) * -4); }
  75% { translate: calc(var(--k) * 62) calc(var(--k) * -22); }
  100% { translate: calc(var(--k) * 84) calc(var(--k) * -12); }
}
@keyframes loader-papillon-2 {
  30% { translate: calc(var(--k) * -18) calc(var(--k) * -14); }
  60% { translate: calc(var(--k) * -30) calc(var(--k) * 4); }
  100% { translate: calc(var(--k) * -58) calc(var(--k) * -10); }
}
@keyframes loader-aile { to { scale: .22 1; } }

/* Le médaillon descend, se pose sur ses fils, puis se balance de
   moins en moins. */
#loader-rideau.anime .loader-pancarte { animation: loader-pancarte-arrive var(--loader-duree) both; }
@keyframes loader-pancarte-arrive {
  0%   { transform: translateY(calc(-100% - var(--pancarte-haut) - 30px)) rotate(-3deg); animation-timing-function: cubic-bezier(.3,.45,.4,1); }
  26%  { transform: translateY(5px) rotate(2.6deg); animation-timing-function: ease-in-out; }
  42%  { transform: translateY(-1px) rotate(-2deg); animation-timing-function: ease-in-out; }
  58%  { transform: translateY(0) rotate(1.3deg); animation-timing-function: ease-in-out; }
  74%  { transform: translateY(0) rotate(-.7deg); animation-timing-function: ease-in-out; }
  88%  { transform: translateY(0) rotate(.3deg); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0) rotate(0); }
}
#loader-rideau.anime .loader-bas { animation: loader-apparait .5s ease-out .25s both; }
#loader-rideau.anime .loader-passer { animation: loader-passer-vient .5s ease-out .8s both; }
@keyframes loader-apparait { from { opacity: 0; } }
@keyframes loader-passer-vient { from { opacity: 0; visibility: visible; } to { opacity: .6; visibility: visible; } }

/* « Revoir l'intro » : le pré se referme sur la page, le geste inverse
   de la sortie — le ciel redescend, les plans remontent, chacun à sa
   vitesse, et se rejoignent à l'horizon. */
#loader-rideau .loader-plan--loin { --plonge: 52%; }
#loader-rideau .loader-plan--coteau { --plonge: 64%; }
#loader-rideau .loader-plan--pre { --plonge: 82%; }
#loader-rideau .loader-plan--avant { --plonge: 104%; }
#loader-rideau.revoir .loader-ciel { animation: loader-ciel-vient .8s cubic-bezier(.3,.75,.25,1) .14s both; }
#loader-rideau.revoir .loader-plan { animation: loader-plan-vient .8s cubic-bezier(.3,.75,.25,1) .14s both; }
#loader-rideau.revoir::after { animation: loader-apparait .5s ease-out .3s both; }
@keyframes loader-ciel-vient { from { translate: 0 calc(-1 * var(--top) - var(--k) * 300); } }
@keyframes loader-plan-vient { from { translate: 0 var(--plonge); } }


/* ---------- La sortie : le pré s'ouvre sur l'accueil ----------

   Le long de l'horizon : le ciel remonte avec le médaillon, les plans
   du pré s'enfoncent, chacun à sa vitesse (le premier plan le plus
   vite). L'accueil apparaît entre les deux ; sa photo, dessous, finit
   le mouvement en se posant (voir loader-ferme.js). */

#loader-rideau.sortie .loader-ciel { animation: loader-ciel-part var(--loader-sortie) cubic-bezier(.62,0,.3,1) both; }
#loader-rideau.sortie .loader-plan { animation: loader-plonge var(--loader-sortie) cubic-bezier(.62,0,.3,1) both; }
#loader-rideau.sortie .loader-pancarte { animation: loader-pancarte-part calc(var(--loader-sortie) * .9) cubic-bezier(.6,0,.4,1) both; }
#loader-rideau.sortie .loader-lumiere { animation: loader-efface calc(var(--loader-sortie) * .35) ease-out both; }
#loader-rideau.sortie::after { animation: loader-efface calc(var(--loader-sortie) * .3) ease-out both; }
#loader-rideau.sortie .loader-bas,
#loader-rideau.sortie .loader-passer { visibility: visible; animation: loader-efface calc(var(--loader-sortie) * .3) ease-out both; }
#loader-rideau.sortie.rapide { --loader-sortie: .6s; }

/* Pendant que le pré s'ouvre (ou se referme, pour « Revoir »), la page
   ne montre que la photo de l'accueil : aucun texte coupé net dans la
   fente. loader-ferme.js pose la classe et fait revenir le contenu en
   fondu une fois le rideau parti. */
html.loader-ouverture .barriere,
html.loader-ouverture .cta-mobile,
html.loader-ouverture [data-marquee-piste],
html.loader-ouverture #ferme > :not([data-photo-cadre]):not([data-voile]) { opacity: 0; }

@keyframes loader-ciel-part { to { translate: 0 calc(-1 * var(--top) - var(--k) * 300); } }
@keyframes loader-plonge { to { translate: 0 var(--plonge); } }
@keyframes loader-pancarte-part { to { transform: translateY(calc(-100% - var(--pancarte-haut) - 60px)); } }
@keyframes loader-efface { to { opacity: 0; } }


/* ---------- Écrans hauts, petits écrans, écrans bas ---------- */

/* Écrans en hauteur (téléphones, tablettes debout) : la scène est plus
   large que l'écran, on entre dans le pré plutôt que de le regarder en
   entier. Elle est recentrée sur les animaux (--cx), la vache et le
   mouton se rapprochent du poney : toute la petite troupe tient dans
   l'écran, plus grande. */
@media (max-aspect-ratio: 4/5) {
  #loader-rideau {
    --ws: clamp(760px, 230vw, 1000px);
    --cx: 557;
    --soleil-x: 660;
    --top: min(calc(100% - var(--k) * 545), 36%);
  }
  #loader-rideau .loader-vache { translate: calc(var(--k) * 62) 0; }
  #loader-rideau .loader-mouton { translate: calc(var(--k) * -46) 0; }
  /* Le travelling, plus court : la troupe reste entière jusqu'au bout. */
  #loader-rideau .loader-plan--loin .loader-glisse   { --glisse: calc(var(--k) * -4); }
  #loader-rideau .loader-plan--coteau .loader-glisse { --glisse: calc(var(--k) * -9); }
  #loader-rideau .loader-plan--pre .loader-glisse    { --glisse: calc(var(--k) * -16); }
  #loader-rideau .loader-glisse--avant               { --glisse: -26px; }
}
@media (max-width: 600px) {
  #loader-rideau { --pancarte: 150px; --pancarte-haut: clamp(30px, 5vh, 46px); }
  #loader-rideau::after { inset: 10px; }
  #loader-rideau .loader-pancarte { padding: 8px; border-width: 4px; transform-origin: 50% calc(10px - var(--pancarte-haut)); }
  #loader-rideau .loader-pancarte::before,
  #loader-rideau .loader-pancarte::after { height: calc(var(--pancarte-haut) - 10px + 16px); }
  #loader-rideau .loader-passer { top: 12px; right: 12px; }
  #loader-rideau .loader-glisse--avant { height: clamp(96px, 15vh, 150px); }
  #loader-pourcent { font-size: 40px; }
  #loader-rideau .loader-signe { font-size: 19px; }
}
@media (max-height: 700px) {
  #loader-rideau { --pancarte: 130px; --pancarte-haut: 30px; }
  #loader-rideau .loader-pancarte { padding: 7px; }
  #loader-pourcent { font-size: 38px; }
}
@media (max-height: 480px) {
  #loader-rideau { --pancarte: 96px; --pancarte-haut: 22px; }
  #loader-rideau .loader-pancarte { padding: 5px; border-width: 3px; }
  #loader-rideau .loader-bas { top: calc(var(--pancarte-haut) + var(--pancarte) + 6px); }
  #loader-pourcent { font-size: 30px; }
  #loader-rideau .loader-signe { font-size: 15px; }
}

/* Moins d'animations : la scène reste une image fixe, le médaillon en
   place ; loader-ferme.js ramène la durée à 700 ms et le rideau part
   en un fondu court. */
@media (prefers-reduced-motion: reduce) {
  #loader-rideau,
  #loader-rideau *,
  #loader-rideau *::before,
  #loader-rideau *::after { animation: none !important; transition: none !important; }
  #loader-rideau.chargement .loader-pancarte { transform: none; }
  #loader-rideau.chargement .loader-bas { opacity: 1; }
  #loader-rideau.sortie { animation: loader-efface .3s linear both !important; }
}


/* =========================================================
   Bouton « Revoir l'intro »
   Pilule de verre dépoli, en bas et au centre de l'écran, tant
   qu'on est sur le premier écran de l'accueil. Au téléphone, juste
   au-dessus de la barre Appeler / Réserver. loader-ferme.js le crée
   et règle --mde-revoir-bas (distance au bas de l'écran) pour qu'il
   ne touche ni le contenu du hero ni la barre du téléphone.
   ========================================================= */

.mde-revoir {
  position: fixed;
  left: 50%;
  bottom: var(--mde-revoir-bas, calc(26px + env(safe-area-inset-bottom, 0px)));
  z-index: 560;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 22px 0 9px;
  border: 1px solid rgba(251,247,236,.45);
  border-radius: 99px;
  background: rgba(251,247,236,.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  color: #FBF7EC;
  font: 600 12px/1 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(14,32,21,.45);
  cursor: pointer;
  box-shadow: 0 16px 34px -18px rgba(8,22,14,.8), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateX(-50%);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .6s cubic-bezier(.2,.72,.2,1), transform .6s cubic-bezier(.2,.72,.2,1), visibility 0s, background .3s, border-color .3s;
}
.mde-revoir__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(251,247,236,.92);
  color: #1E3A2A;
  transition: transform .7s cubic-bezier(.34,1.56,.64,1);
}
.mde-revoir__icone svg { width: 14px; height: 14px; display: block; }
.mde-revoir:hover { background: rgba(251,247,236,.26); border-color: rgba(251,247,236,.72); }
.mde-revoir:hover .mde-revoir__icone { transform: rotate(-200deg); }
.mde-revoir:active { transform: translateX(-50%) scale(.97); }
.mde-revoir:focus-visible { outline: 2px solid #E8A87C; outline-offset: 3px; }

.mde-revoir.est-cache,
html.chargement-actif .mde-revoir,
html.grange-ouverte .mde-revoir,
html.mde-porte-entree .mde-revoir {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .45s ease, transform .45s ease, visibility 0s .45s;
}
html.portail-actif .mde-revoir { display: none; }

@media (max-width: 760px) {
  .mde-revoir { bottom: var(--mde-revoir-bas, calc(88px + env(safe-area-inset-bottom, 0px))); min-height: 40px; padding-right: 18px; }
  .mde-revoir__icone { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mde-revoir, .mde-revoir__icone { transition: opacity .2s linear, visibility 0s; }
  .mde-revoir:hover .mde-revoir__icone { transform: none; }
}