/* =========================================================
   PORTAIL
   Temps 0 — LOADER : le logotype se construit pièce par pièce,
             Ti Goyav entre en scène.
   Temps 1 — CHOIX : écran clair et coloré, deux portes.
   ========================================================= */

.vue--portail {
  position: relative;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(178deg,
      #1b4a5e 0%, #2f7590 22%, #62a2ab 42%,
      #a8c69c 60%, #ced950 78%, #f2d98a 92%, #fbfaf6 100%);
  isolation: isolate;
}

/* ═════════════ DÉCOR PARALLAXE ═════════════ */
.paysage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.paysage > * {
  position: absolute; left: 50%; bottom: 0;
  width: 200%; max-width: none; transform: translateX(-50%);
  will-change: transform;
}
.p-etoiles { top: 0; bottom: auto; height: 55%; width: 100%; opacity: .32; }
.p-nuages  { top: 5%;  bottom: auto; height: 24%; width: 300%; opacity: .55; animation: filerNuages 100s linear infinite; }
.p-nuages2 { top: 18%; bottom: auto; height: 18%; width: 340%; opacity: .32; animation: filerNuages 160s linear infinite reverse; }
.p-mont-1  { opacity: .26; bottom: 26%; }
.p-mont-2  { opacity: .40; bottom: 17%; }
.p-mont-3  { opacity: .62; bottom:  8%; }
.p-brume   { bottom: 14%; height: 32%; width: 240%; opacity: .5; animation: deriveBrume 26s ease-in-out infinite; }
.p-sol     { bottom: -1px; }
.p-fanjan-g { left: -4%;  bottom: -2%; width: 27%; transform: none; transform-origin: bottom center; animation: balance 9s ease-in-out infinite; }
.p-fanjan-d { left: auto; right: -6%; bottom: -3%; width: 32%; transform: none; transform-origin: bottom center; animation: balance 11s ease-in-out infinite reverse; }

@keyframes filerNuages { from { transform: translateX(-50%); } to { transform: translateX(-16.7%); } }
@keyframes deriveBrume { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-46%) translateY(-10px); } }
@keyframes balance { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(1.6deg); } }

.lucioles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.luciole {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #fff3c4; box-shadow: 0 0 10px 3px rgba(255,230,150,.45);
  opacity: 0; animation: flotte linear infinite;
}
@keyframes flotte {
  0%   { opacity: 0;  transform: translate3d(0,0,0) scale(.6); }
  12%  { opacity: .85; } 70% { opacity: .6; }
  100% { opacity: 0;  transform: translate3d(var(--dx), -112vh, 0) scale(1.2); }
}

/* ═══════════════════════════════════════════════════════
   TEMPS 0 — LE LOADER
   Le logotype s'anime en vidéo, sur le blanc de la vidéo
   elle-même : #fcfcfc, relevé au pixel sur ses quatre coins.
   Le fond de la page et le fond de la vidéo étant la MÊME
   couleur, le cadre de la vidéo n'existe plus — elle ne
   ressemble pas à une vidéo posée sur une page, elle EST la
   page. C'est tout l'enjeu du réglage ci-dessous.
   ═══════════════════════════════════════════════════════ */
:root { --loader-blanc: #fcfcfc; }

.loader {
  position: fixed; inset: 0; z-index: 800;
  display: grid; place-items: center; align-content: center;
  background: var(--loader-blanc);
  overflow: hidden;
  transition: opacity .7s var(--ease-doux), visibility .7s;
}
.phase-2 .loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- La vidéo du logotype ---------- */
/* `contain` laisse des marges sur les écrans qui n'ont pas le format
   de la vidéo — invisibles, puisqu'elles sont de la couleur du fond. */
/* ON N'AGRANDIT JAMAIS LA VIDÉO AU-DELÀ DE SA TAILLE RÉELLE.
   La version précédente la grossissait de 125 à 210 % pour donner de
   la présence au logotype : résultat, une image franchement pixelisée,
   d'autant plus que l'agrandissement était fort. Un fichier vidéo n'a
   pas de pixels en réserve.

   Donc : largeur plafonnée, jamais d'étirement, et le logotype se pose
   au calme dans son blanc. Sur un grand écran il ne remplit pas tout —
   c'est voulu, et c'est plus juste qu'une image molle.

   Pour lui rendre la présence perdue, on n'agrandit pas : on a RECADRÉ
   le fichier sur le dessin. Les marges blanches de la vidéo d'origine
   le réduisaient au tiers de l'image ; recadrée, elle fait 766 × 550 et
   le logotype en occupe presque toute la surface. Même nombre de pixels
   à l'écran, logotype deux fois et demie plus grand. Le plafond de
   720 px reste sous la définition du fichier : jamais d'étirement. */
.loader__video {
  /* Posé à 44 % plutôt qu'au milieu exact : le bas de l'écran porte le
     personnage, sa bulle et la barre, et un logotype centré à 50 %
     paraît alors trop bas. Quatre points au-dessus suffisent à le
     recentrer optiquement. */
  position: absolute; top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(64%, 440px);
  height: auto;
  /* Le bas de l'écran appartient à Ti Goyav, à sa bulle et à la barre.
     Le logotype prend la moitié haute et s'arrête là : recadré, il n'a
     plus besoin de toute la place pour avoir de la présence. */
  max-height: 38%;
  object-fit: contain;
  background: var(--loader-blanc);
}
@media (max-aspect-ratio: 4 / 5) {
  /* En portrait, la bulle se pose au-dessus du personnage, donc elle
     remonte : le logotype doit remonter d'autant. */
  .loader__video { top: 34%; max-height: 32%; }
}
/* Téléphone en paysage : il n'y a presque pas de hauteur, et le
   personnage occupe déjà la moitié basse. */
@media (max-height: 500px) and (orientation: landscape) {
  .loader__video { top: 30%; max-height: 34%; }
  .loader__charge { bottom: 1rem; gap: .3rem; }
  .loader__barre { height: 7px; }
  .loader__pct { font-size: .9rem; }
  .loader__masc { bottom: 3.8rem; }
}

/* ---------- Ti Goyav et sa réplique ---------- */
.loader__masc {
  position: absolute; z-index: 3;
  left: clamp(1rem, 7vw, 7rem); bottom: clamp(3.4rem, 13vh, 7rem);
  width: clamp(104px, 15vmin, 172px);
  transform: translateX(-70px) rotate(-7deg); opacity: 0;
  animation: goyavArrive 1s cubic-bezier(.2,1.15,.4,1) 1.15s forwards;
}
@keyframes goyavArrive { to { transform: translateX(0) rotate(0); opacity: 1; } }
.loader__masc img { animation: sautille .55s ease-in-out 2.1s 3; transform-origin: 50% 100%; }
@keyframes sautille {
  0%,100% { transform: translateY(0) scale(1); }
  40%     { transform: translateY(-16%) scale(1.03,.97); }
}

/* La bulle passe en vert de charte : sur un fond blanc, l'anis
   n'a pas assez de contraste pour porter du texte. */
.loader__bulle {
  /* Posée plus bas sur le personnage : à 56 % elle venait toucher le
     logotype sur un écran large. */
  position: absolute; left: 84%; bottom: 40%;
  width: max-content; max-width: 62vw;
  background: var(--c-vert); color: #fff;
  padding: .7rem 1.1rem; border-radius: 18px;
  box-shadow: 0 16px 34px -14px rgba(20, 49, 42, .5);
  transform-origin: 0 100%; transform: scale(.4); opacity: 0;
  animation: bullePop .55s cubic-bezier(.2,1.35,.4,1) 1.75s forwards;
}
.loader__bulle b { display: block; font-size: clamp(.95rem, 2.2vw, 1.22rem); font-weight: 700; line-height: 1.25; }
.loader__bulle small { display: block; margin-top: .18rem; font-size: .76rem; opacity: .8; font-style: italic; }
.loader__bulle::after {
  content: ""; position: absolute; left: -5px; bottom: 13px;
  width: 13px; height: 13px; background: var(--c-vert); transform: rotate(45deg);
}
@keyframes bullePop { to { transform: scale(1); opacity: 1; } }

/* ---------- La barre de progression ---------- */
/* Elle court sur les cinq secondes exactement : sa durée est posée
   par le moteur, pour qu'on n'ait jamais deux chiffres à tenir. */
.loader__charge {
  position: absolute; left: 50%; bottom: clamp(1.8rem, 6vh, 3.4rem);
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: .45rem;
  width: min(70vw, 340px);
}
.loader__pct {
  font-family: var(--f-titre, inherit);
  font-size: 1.05rem; letter-spacing: .08em; line-height: 1;
  color: var(--c-vert);
  font-variant-numeric: tabular-nums;
}
.loader__barre {
  width: 100%; height: 9px; border-radius: 999px;
  background: rgba(20, 49, 42, .12);
  box-shadow: inset 0 0 0 1px rgba(20, 49, 42, .08);
  overflow: hidden;
}
.loader__barre span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-vert), var(--c-vert-clair), var(--c-anis));
  animation: charge var(--duree, 5s) linear forwards;
}
@keyframes charge { to { width: 100%; } }

.loader__passer {
  position: absolute; z-index: 4; bottom: clamp(1.2rem, 4.2vh, 2.6rem); right: clamp(1rem, 4vw, 2.4rem);
  background: transparent; color: var(--c-vert); border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(63, 108, 91, .35);
  padding: .5rem 1.05rem; border-radius: var(--r-pill);
  font-family: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  transition: background-color .25s, box-shadow .25s;
}
.loader__passer:hover { background: rgba(63, 108, 91, .1); box-shadow: inset 0 0 0 1.5px var(--c-vert); }
.loader__passer:focus-visible { outline: 3px solid var(--c-anis); outline-offset: 3px; }

/* Téléphone : la bulle sort du cadre si on la laisse à droite du
   personnage. On la pose au-dessus de lui. */
@media (max-width: 620px) {
  .loader__masc { left: 50%; transform: translateX(-50%) translateY(14px); bottom: 8.2rem;
                  animation-name: goyavMonte; }
  .loader__bulle { left: 50%; bottom: 100%; margin-bottom: .6rem;
                   transform-origin: 50% 100%; transform: translateX(-50%) scale(.4);
                   animation-name: bullePopCentre; max-width: 86vw; }
  .loader__bulle::after { left: 50%; bottom: -5px; margin-left: -6px; }

  /* La barre et le bouton se chevauchaient : à 390 px de large, une barre
     centrée de 242 px et un bouton calé à droite occupent la même ligne.
     On remonte la barre au-dessus du bouton. */
  .loader__charge { bottom: 4.6rem; width: min(74vw, 300px); }
  .loader__passer { left: 50%; right: auto; transform: translateX(-50%); bottom: 1.5rem; }
}
@keyframes goyavMonte { to { transform: translateX(-50%) translateY(0) rotate(0); opacity: 1; } }
@keyframes bullePopCentre { to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* Mouvement réduit : la vidéo ne se lance pas, on montre l'affiche et
   on passe. L'attente de cinq secondes n'a plus lieu d'être. */
@media (prefers-reduced-motion: reduce) {
  .loader__masc, .loader__bulle { animation: none; opacity: 1; transform: none; }
  .loader__bulle { transform: none; }
  .loader__barre span { animation: none; width: 100%; }
}

/* ═══════════════════════════════════════════════════════
   TEMPS 1 — L'ÉCRAN DE CHOIX (clair, coloré)
   ═══════════════════════════════════════════════════════ */
.portail-centre {
  position: relative; z-index: 3;
  width: min(100% - 2.5rem, 940px);
  padding: clamp(4rem, 9vh, 6rem) 0 clamp(6rem, 16vh, 9rem);
  opacity: 0; visibility: hidden; transform: translateY(26px) scale(.97);
  transition: opacity .8s var(--ease-doux) .2s, transform .8s var(--ease-doux) .2s, visibility .8s;
}
.phase-2 .portail-centre { opacity: 1; visibility: visible; transform: none; }

/* pastilles de couleur derrière la carte */
.pastille { position: absolute; border-radius: 50%; filter: blur(2px); z-index: -1; opacity: .85; }
.pastille--anis   { width: 170px; height: 170px; background: var(--c-anis);   top: -52px; left: -46px; }
.pastille--orange { width: 118px; height: 118px; background: var(--c-orange); bottom: 14%; right: -40px; }
.pastille--bleu   { width: 84px;  height: 84px;  background: var(--c-bleu);   top: 32%;   right: 6%; opacity: .5; }
.phase-2 .pastille { animation: pastilleOn .9s var(--ease-doux) backwards; }
.phase-2 .pastille--anis   { animation-delay: .35s; }
.phase-2 .pastille--orange { animation-delay: .5s; }
.phase-2 .pastille--bleu   { animation-delay: .65s; }
@keyframes pastilleOn { from { transform: scale(.2); opacity: 0; } }

.carte-choix {
  position: relative;
  background: var(--c-ivoire);
  border-radius: 36px;
  padding: clamp(1.6rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3.2rem) clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: 0 40px 90px rgba(12,40,32,.32), 0 0 0 1px rgba(255,255,255,.6);
  text-align: center;
}
.carte-choix .logo-mini {
  width: clamp(96px, 15vw, 132px); margin: -0.2rem auto 1rem;
  border-radius: 16px;
}
.portail-question {
  font-family: var(--f-titre);
  font-size: clamp(2rem, 5.4vw, 3.5rem);
  color: var(--c-vert); margin: 0;
}
.portail-question em { font-style: normal; color: var(--c-orange); }
.portail-sous {
  margin: .5rem auto 1.8rem; max-width: 52ch; text-wrap: balance;
  color: var(--texte-doux); font-size: var(--fs-sm);
}

.portes {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(254px, 1fr));
  text-align: left;
}
.porte {
  position: relative; overflow: hidden;
  display: grid; gap: .3rem; justify-items: start;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 0; border-radius: 26px;
  cursor: pointer; text-decoration: none;
  transition: transform .35s var(--ease-doux), box-shadow .35s var(--ease-doux);
  box-shadow: 0 10px 24px rgba(12,40,32,.14);
}
.porte:hover, .porte:focus-visible { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(12,40,32,.26); }
.porte::before {                       /* halo qui s'allume au survol */
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(90% 120% at 15% 0%, rgba(255,255,255,.55), transparent 60%);
  transition: opacity .35s;
}
.porte:hover::before { opacity: 1; }
.porte > * { position: relative; z-index: 1; }

.porte--visite  { background: linear-gradient(150deg, #4b8070, var(--c-vert) 55%, #2f5a4a); color: #fff; }
.porte--accueil { background: linear-gradient(150deg, #dcea72, var(--c-anis) 60%, #b9c53f); color: #1e2606; }

.porte h2 { font-size: clamp(1.9rem, 3.8vw, 2.5rem); margin: 0; }
.porte p { margin: 0; font-size: var(--fs-sm); max-width: 30ch; }
.porte--visite p  { color: rgba(255,255,255,.85); }
.porte--accueil p { color: rgba(30,38,6,.72); }
.porte-etiquette { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.porte--visite .porte-etiquette  { color: var(--c-anis); }
.porte--accueil .porte-etiquette { color: #5c6b12; }
.porte .fleche {
  position: absolute; right: 1.1rem; top: 1.2rem;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.2);
  transition: transform .3s var(--ease-doux), background-color .3s, color .3s;
}
.porte--accueil .fleche { background: rgba(30,38,6,.14); }
.porte:hover .fleche { transform: translateX(4px) rotate(-45deg); background: #fff; color: var(--c-vert); }

/* Réseaux sociaux */
.portail-social {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--trait);
}
.portail-social .lib {
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-doux); font-weight: 600; margin-right: .2rem;
}
.reseau {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .95rem .42rem .45rem;
  border-radius: var(--r-pill);
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--trait);
  color: var(--texte); text-decoration: none;
  font-size: var(--fs-xs); font-weight: 600;
  transition: transform .28s var(--ease-doux), box-shadow .28s, background-color .28s, color .28s;
}
.reseau .rond {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--marque, var(--c-vert)); color: #fff;
  transition: background-color .28s, color .28s;
}
.reseau:hover {
  transform: translateY(-3px); background: var(--marque, var(--c-vert)); color: #fff;
  box-shadow: 0 12px 24px rgba(12,40,32,.28);
}
.reseau:hover .rond { background: #fff; color: var(--marque, var(--c-vert)); }

/* ═══════════════════════════════════════════════════════
   LES DRAPEAUX — République française & Union européenne
   ═══════════════════════════════════════════════════════ */
.mats {
  position: absolute; z-index: 2;
  top: clamp(1.5rem, 6vh, 4rem); right: clamp(1rem, 5vw, 4rem);
  display: flex; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: flex-start;
  opacity: 0; transform: translateY(-24px);
  transition: opacity .8s var(--ease-doux) .8s, transform .8s var(--ease-doux) .8s;
}
.phase-2 .mats { opacity: 1; transform: none; }
.mat { position: relative; padding-left: 7px; transform-origin: 0 0; }
.mat__hampe {
  position: absolute; left: 0; top: -6px;
  width: 5px; height: clamp(120px, 20vh, 190px);
  border-radius: 3px;
  background: linear-gradient(180deg, #f2f2f0, #b9bfbc 45%, #8d9491);
  box-shadow: 0 3px 10px rgba(6,26,20,.35);
}
.mat__hampe::before {
  content: ""; position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #ffe9a8, var(--c-orange));
}
.drapeau {
  width: clamp(62px, 8vw, 96px); height: auto;
  border-radius: 2px 5px 5px 2px;
  box-shadow: 3px 5px 14px rgba(6,26,20,.3);
  transform-origin: 0 30%;
  animation: claque 6s ease-in-out infinite;
}
.mat--eu .drapeau { animation-duration: 7.4s; animation-delay: -1.8s; }
@keyframes claque {
  0%,100% { transform: rotate(0deg)   skewY(0deg)   scaleX(1); }
  25%     { transform: rotate(1.4deg) skewY(-1.6deg) scaleX(.985); }
  55%     { transform: rotate(-.8deg) skewY(1.4deg)  scaleX(1.01); }
  78%     { transform: rotate(.9deg)  skewY(-.7deg)  scaleX(.995); }
}
@media (max-width: 860px) { .mats { display: none; } }

/* ═══════════════════════════════════════════════════════
   TI GOYAV, À L'ACCUEIL
   Il reste posé en bas à gauche et fait signe. La marche,
   c'est pour la visite guidée, où elle sert de progression.
   ═══════════════════════════════════════════════════════ */
.balade {
  position: absolute; z-index: 4;
  left: clamp(.5rem, 3vw, 4rem); bottom: 0;
  width: clamp(104px, 12vw, 168px);
  opacity: 0; transform: translateX(-50px);
  transition: opacity .7s var(--ease-doux) .9s, transform .8s var(--ease-doux) .9s;
  filter: drop-shadow(0 14px 22px rgba(6,26,20,.4));
  pointer-events: none;
}
.phase-2 .balade { opacity: 1; transform: none; }
.balade__flip { display: block; }
.balade__corps { transform-origin: 50% 100%; animation: respire 4.4s ease-in-out infinite; }
@keyframes respire { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1.6deg); } }
.balade__corps.hop { animation: petitSaut .6s var(--ease-doux); }
@keyframes petitSaut {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-20%) scale(1.04,.96); }
  70%  { transform: translateY(3%) scale(.97,1.03); }
  100% { transform: translateY(0) scale(1); }
}
.balade__bulle {
  position: absolute; left: 88%; bottom: 62%;
  width: max-content; max-width: 26ch;
  background: #fff; color: var(--c-vert);
  font-weight: 600; font-size: var(--fs-xs); line-height: 1.35;
  padding: .55rem .9rem; border-radius: 16px;
  box-shadow: var(--ombre-2);
  opacity: 0; transform: scale(.7) translateY(6px); transform-origin: 0 100%;
  transition: opacity .35s var(--ease-doux), transform .35s cubic-bezier(.2,1.3,.4,1);
}
.balade__bulle.on { opacity: 1; transform: none; }
.balade__bulle::after {
  content: ""; position: absolute; left: -5px; bottom: 12px;
  width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
}
@media (max-width: 900px) { .balade { display: none; } }

/* Pied du portail */
.portail-pied {
  position: absolute; z-index: 5; bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center;
  opacity: 0; transition: opacity .6s 1.1s;
}
.phase-2 .portail-pied { opacity: 1; }
.portail-pied span { display: none; }
.portail-pied a {
  font-size: var(--fs-xs); font-weight: 600; text-decoration: none;
  color: #fff;
  background: rgba(10,32,26,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  padding: .42rem .95rem; border-radius: var(--r-pill);
  transition: background-color .25s, transform .25s var(--ease-doux);
}
.portail-pied a:hover { background: var(--c-vert); transform: translateY(-2px); }

/* `.rapide` ne touche plus au loader. Elle le vidait de sa substance :
   posée dès qu'on était déjà venu une fois, elle effaçait Ti Goyav,
   sa bulle, et figeait la barre de progression. L'écran de chargement
   se jouait donc à vide pour tout le monde sauf un visiteur neuf.
   C'est le moteur qui décide si l'intro se joue — pas une classe CSS. */