/* Accueil : le navire aux cinq écoutilles, sous un ciel d'aquarelle. Toute la page est cette scène.
   Sans script, sur téléphone ou en « réduire les animations » : ciel, navire, texte, les 5 sites en carrousel,
   l'appel et les deux portes, dans l'ordre de lecture.
   Avec script (grand écran) : la scène reste à l'écran, chaque cran de défilement ouvre une écoutille (js/flotte.js). */

.flotte{position:relative;overflow-x:clip;margin:0 calc(-1 * var(--gouttiere));padding:calc(var(--haut-barre) + .5rem) var(--gouttiere) 2rem;
  background:url(img/ciel.webp) center top/100% auto no-repeat,linear-gradient(180deg,rgba(248,242,230,0) 40%,rgba(226,236,236,.7) 100%)}
.flotte-scene{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0 clamp(1.5rem,3vw,3rem);align-items:center}
.flotte-toile{display:none}
.flotte-navire{display:block;width:100%;height:auto;margin:0}
.flotte-navire img{display:block;width:100%;height:auto}
.flotte-navire.mer-vivante{aspect-ratio:3/2}
.flotte-navire.mer-vivante img{width:86%;margin:0 auto}
.flotte-texte h1{font-size:clamp(2.2rem,4.4vw,3.8rem);margin:0}
.flotte-texte .chapo{max-width:30em}
.flotte-indice{display:none}

/* les sites : un carrousel qu'on fait glisser du doigt */
.flotte-sites{grid-column:1/-1;min-width:0;max-width:100%;align-items:start;list-style:none;margin:1.6rem 0 0;padding:0 0 1rem;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,31%);gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.cale-site{scroll-snap-align:start;background:var(--blanc);border:1px solid var(--encre)}
.cale-ecran{display:block;position:relative;overflow:hidden;aspect-ratio:16/10;background:#0d1a25}
.cale-ecran img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cale-legende{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin:0;padding:.55rem .8rem;
  font-family:var(--outil);font-size:.84rem;border-top:1px solid var(--encre)}
  .cale-legende small{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vermillon-fonce)}
.cale-legende a{color:var(--encre);white-space:nowrap}

/* l'appel « Et le vôtre ? » */
.flotte-votre{grid-column:1/-1;background:var(--blanc);border:1px solid var(--encre);box-shadow:0 0 0 5px var(--blanc),0 0 0 6px var(--trait);padding:1.4rem 1.6rem;margin:1.2rem 5px}
.flotte-votre .sur{margin-bottom:.4rem}
.flotte-votre h2{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:0 0 .4rem}
.flotte-votre p{margin:0 0 .9rem;color:var(--doux)}

/* les deux portes, portées par des nuages */
.flotte-portes{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
.nuage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:132px;padding:1.4rem 2.2rem 1.6rem;
  color:var(--encre);text-decoration:none;isolation:isolate}
.nuage::before{content:"";position:absolute;inset:0;z-index:-1;filter:drop-shadow(0 8px 12px rgba(27,63,94,.16));transition:transform .35s ease;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 130' preserveAspectRatio='none'%3E%3Cpath d='M40 112C14 112 6 88 22 76 8 60 22 38 44 42 46 18 76 8 98 22 110 4 146 2 160 20 176 4 212 8 218 32 244 22 272 38 266 62 290 70 290 104 262 112Z' fill='%23fcf9f2' fill-opacity='.95' stroke='%231b3f5e' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.nuage:hover::before{transform:translateY(-4px) scale(1.02)}
.nuage small{font-family:var(--outil);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vermillon-fonce)}
.nuage b{font-family:var(--titre);font-weight:400;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.15;margin:.15rem 0 .2rem}
.nuage span{font-family:var(--outil);font-size:1rem;color:var(--doux)}
.flotte-sauter{display:none}

@media (max-width:900px){
  .flotte{background-size:auto 360px}
  .flotte-scene{grid-template-columns:1fr}
  .flotte-navire{max-width:340px;margin:0 auto -.8rem}
  .flotte-texte .chapo{margin:.8rem 0 1.2rem}
  .flotte-sites{grid-auto-columns:78%}
}
@media (max-width:560px){.flotte-portes{grid-template-columns:1fr;gap:.2rem}.nuage{min-height:118px}}

/* grand écran avec script : rien ne s'affiche avant que la scène soit prête (pas d'aperçu furtif) ; repli .fixe à 6 s */
@media (prefers-reduced-motion:no-preference){
  .js .flotte:not(.vivante):not(.fixe) .flotte-scene{visibility:hidden}
}
@media (max-height:560px) and (orientation:landscape){.js .flotte:not(.vivante) .flotte-scene{visibility:visible}}

/* ---------- la version animée ---------- */
.flotte.vivante{height:100vh;min-height:560px;padding:0;background:none;
  width:calc(100vw - var(--barre-v,0px));margin-left:calc(50% - 50vw + var(--barre-v,0px) / 2)}
.flotte.vivante .flotte-scene{position:relative;height:100%;display:block;overflow:hidden;
  background:linear-gradient(180deg,#b9d7e6 0%,#f3ecdd 70%)}
.flotte.vivante .flotte-toile{display:block;position:absolute;inset:0;animation:flotte-apparait .6s ease both}
@keyframes flotte-apparait{from{opacity:0}}
.flotte.vivante .flotte-toile canvas{display:block;width:100%;height:100%}
.flotte.vivante .flotte-navire{display:none}
.flotte.vivante .flotte-texte{position:absolute;z-index:3;left:var(--tx);top:calc(var(--haut-barre) + 8vh);width:var(--tw);will-change:opacity,transform}
.flotte.vivante .flotte-texte .sur,.flotte.vivante .flotte-texte h1{text-shadow:0 0 18px rgba(252,249,242,.9),0 0 3px rgba(252,249,242,.9)}
.flotte.vivante .flotte-texte .chapo{color:var(--encre);background:var(--blanc);border:1px solid var(--encre);box-shadow:0 0 0 4px var(--blanc),0 0 0 5px var(--trait),0 18px 30px -22px rgba(21,41,60,.5);
  padding:.8rem 1rem;transform:rotate(-.6deg);max-width:32em}
.flotte.vivante .flotte-texte .sur{color:#8a2c17}

/* l'invitation à défiler */
.flotte.vivante .flotte-indice{display:none;align-items:center;gap:.8rem;margin-top:1.2rem;cursor:pointer;
  font-family:var(--outil);font-size:.92rem;color:var(--encre);text-shadow:0 0 10px rgba(252,249,242,.95)}
.souris{position:relative;width:18px;height:28px;border:2px solid var(--encre);border-radius:10px;flex:none}
.souris::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--vermillon);animation:molette 1.6s ease-in-out infinite}
@keyframes molette{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}

/* un site en grand */
.flotte.vivante .flotte-sites{margin:0;padding:0;display:block;overflow:visible}
.flotte.vivante .cale-site{position:absolute;z-index:2;left:var(--px);top:var(--py);width:var(--pw);
  transform-origin:0 0;opacity:0;visibility:hidden;will-change:transform,opacity;box-shadow:8px 8px 0 rgba(21,41,60,.12)}
.flotte.vivante .cale-ecran{aspect-ratio:auto;height:var(--ph)}

/* les repères de la traversée */
.flotte-reperes{display:none}
.flotte.vivante .flotte-reperes{display:flex;position:absolute;z-index:4;left:var(--px);top:calc(var(--py) + var(--ph) + 3.6rem);width:var(--pw);gap:.5rem;flex-wrap:wrap;opacity:0;visibility:hidden}
.flotte-reperes button{font-family:var(--outil);font-size:.92rem;letter-spacing:.04em;padding:.45rem .9rem;border:1px solid var(--trait);background:rgba(252,249,242,.9);color:var(--encre);cursor:pointer;border-radius:2px}
.flotte-reperes button:hover{border-color:var(--vermillon)}
.flotte-reperes button.actif{background:var(--encre);border-color:var(--encre);color:var(--blanc)}

/* la galerie finale : les cinq sites, cliquables */
.flotte-galerie{display:none}
.flotte.vivante .flotte-galerie{display:block}
.flotte-galerie .carte{position:absolute;z-index:3;display:block;background:var(--blanc);border:1px solid var(--encre);color:var(--encre);text-decoration:none;
  transform-origin:0 0;opacity:0;box-shadow:6px 6px 0 rgba(21,41,60,.12);transition:box-shadow .25s ease,translate .25s ease}
.flotte-galerie .carte:hover,.flotte-galerie .carte:focus-visible{translate:0 -5px;box-shadow:8px 12px 0 rgba(21,41,60,.14);border-color:var(--vermillon)}
.flotte-galerie img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--encre)}
.flotte-galerie span{display:block;padding:.5rem .75rem;font-family:var(--outil);font-size:1.02rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flotte-galerie small{display:block;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vermillon-fonce)}

/* l'appel, en haut à gauche au-dessus du navire ; les portes dans les nuages, en haut à droite */
.flotte.vivante .flotte-votre{position:absolute;z-index:4;left:var(--vx);top:var(--vy);width:min(380px,26vw);margin:0;
  transform-origin:0 0;opacity:0;box-shadow:0 0 0 5px var(--blanc),0 0 0 6px var(--vermillon),0 24px 40px -24px rgba(21,41,60,.55)}
.flotte.vivante .flotte-portes{position:absolute;z-index:4;left:var(--portes-x);width:var(--portes-w);top:var(--portes-y);margin:0;justify-content:center;
  opacity:0;gap:2rem}
.flotte.vivante .flotte-portes{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center}
.flotte.vivante .nuage{min-height:clamp(118px,15vh,140px);padding:2.2rem 2.4rem 1.4rem;opacity:.9;transition:opacity .25s ease}
.flotte.vivante .nuage:hover,.flotte.vivante .nuage:focus-visible{opacity:1}
.flotte.vivante .nuage b{font-size:clamp(1.25rem,1.6vw,1.5rem)}
@media (prefers-reduced-motion:no-preference){
  .flotte.vivante .nuage::before{animation:nuage-flotte 7s ease-in-out infinite}
  .flotte.vivante .nuage+.nuage::before{animation-delay:-3.5s}
  @keyframes nuage-flotte{50%{transform:translateY(-5px)}}
}

/* « passer à la fin » reste accessible pendant toute la traversée */
.flotte.vivante .flotte-sauter{display:block;position:absolute;z-index:5;right:var(--gouttiere);bottom:1.4rem;cursor:pointer;min-height:44px;
  font-family:var(--outil);font-size:.92rem;color:var(--encre);background:rgba(252,249,242,.88);border:1px solid var(--trait);padding:.6rem 1rem}
.flotte.vivante .flotte-sauter:hover{border-color:var(--vermillon)}

/* le prix, discret, à côté du bouton */
.flotte-prix{font-family:"Caveat",cursive;font-weight:500;font-size:1.7rem;line-height:1;color:var(--vermillon-fonce);transform:rotate(-4deg);display:inline-block}
.flotte.vivante .flotte-prix{text-shadow:0 0 8px rgba(252,249,242,.95),0 0 2px rgba(252,249,242,.9)}
/* le bouton « voir les 5 sites d'un coup », premier élément atteint au clavier */
.flotte-sauter:focus-visible{outline:2px dashed var(--vermillon);outline-offset:4px}

/* le compteur « 2 / 5 », et « revoir la traversée » à la fin */
.flotte-compteur,.flotte-revoir{display:none}
.flotte.vivante .flotte-compteur{display:block;position:absolute;z-index:4;left:var(--px);top:calc(var(--py) - 2.6rem);margin:0;opacity:0;visibility:hidden;
  font-family:var(--outil);font-size:.92rem;color:var(--encre);background:rgba(252,249,242,.9);border:1px solid var(--trait);padding:.3rem .8rem}
.flotte-compteur b{font-family:var(--titre);font-weight:400;font-size:1.35rem;color:var(--vermillon)}
.flotte.vivante .flotte-revoir{display:block;position:absolute;z-index:5;right:var(--gouttiere);bottom:1.4rem;cursor:pointer;opacity:0;visibility:hidden;
  font-family:var(--outil);font-size:.86rem;color:var(--encre);background:rgba(252,249,242,.9);border:1px solid var(--trait);padding:.45rem .9rem}
.flotte.vivante .flotte-revoir:hover{border-color:var(--vermillon)}
/* les nuages ont l'air de boutons : une pastille « Entrer → » */
.nuage span{display:inline-block;margin-top:.35rem;padding:.2rem .7rem;border:1px solid var(--encre);background:var(--blanc);color:var(--encre);transition:background .2s,color .2s}
.nuage:hover span,.nuage:focus-visible span{background:var(--encre);color:var(--blanc)}

/* ---------- téléphone en hauteur : la scène aussi ---------- */
.flotte.vivante.en-hauteur .flotte-texte{top:calc(var(--haut-barre) + 1.5vh)}
.flotte.vivante.en-hauteur .flotte-texte h1{font-size:clamp(1.9rem,8vw,2.4rem)}
.flotte.vivante.en-hauteur .flotte-texte .chapo{font-size:1.02rem;padding:.55rem .75rem;margin:.7rem 0 .9rem}
.flotte.vivante.en-hauteur .flotte-indice{display:none}
.flotte.vivante.en-hauteur .flotte-reperes{display:none}
.flotte.vivante.en-hauteur .flotte-votre{width:var(--pw);padding:.9rem 1rem}
.flotte.vivante.en-hauteur .flotte-votre h2{font-size:1.4rem}
.flotte.vivante.en-hauteur .flotte-votre p{display:none}
.flotte.vivante.en-hauteur .flotte-votre{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.flotte.vivante.en-hauteur .flotte-votre h2{margin:0}
.flotte.vivante.en-hauteur .flotte-portes{gap:.6rem;grid-template-columns:1fr 1fr}
.flotte.vivante.en-hauteur .nuage{min-height:78px;padding:.6rem 1rem .8rem}
.flotte.vivante.en-hauteur .nuage span{display:none}
.flotte.vivante.en-hauteur .nuage b::after{content:" →"}
.flotte.vivante.en-hauteur .nuage b{font-size:1.15rem}
.flotte.vivante.en-hauteur .nuage small{display:none}
.flotte.vivante.en-hauteur .flotte-galerie span{font-size:.9rem;padding:.35rem .5rem}
.flotte.vivante.en-hauteur .flotte-sauter,.flotte.vivante.en-hauteur .flotte-revoir{bottom:.8rem;right:4vw;font-size:.9rem}
.flotte.vivante.en-hauteur .flotte-revoir{right:auto;left:50%;transform:translateX(-50%)}
.flotte.vivante.en-hauteur .flotte-compteur{top:calc(var(--py) - 2.4rem)}

/* les miniatures rangées sous l'écran d'affichage gardent une ombre légère */
.flotte.vivante .cale-site{transition:box-shadow .3s}

/* la barre de navigateur : ce qui sort de la cale, ce sont des SITES (pastilles aux couleurs de la carte, adresse réelle) */
.fenetre{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;background:#e7dfcd;border-bottom:1px solid var(--encre)}
.fenetre i{width:10px;height:10px;border-radius:50%;background:var(--vermillon);flex:none}
.fenetre i:nth-child(2){background:var(--ambre)}
.fenetre i:nth-child(3){background:var(--indigo)}
.fenetre span{flex:1;min-width:0;margin-left:8px;padding:0 .7rem;height:19px;line-height:19px;border-radius:10px;background:var(--blanc);border:1px solid var(--trait);
  font-family:var(--outil);font-size:12px;color:var(--doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flotte-galerie .carte .fenetre span{padding:0 .6rem;font-size:12px;letter-spacing:0;text-transform:none;display:block}
.flotte-galerie .carte .fenetre{display:flex;padding:0 10px;height:28px;line-height:normal}
.flotte-galerie .carte .fenetre span{height:18px;line-height:18px;margin-left:8px}
.flotte.vivante.en-hauteur .actions{flex-wrap:nowrap;gap:.9rem}
.flotte.vivante.en-hauteur .flotte-prix{font-size:1.3rem}
.flotte.vivante.en-hauteur .btn.flotte-voir{padding:.8rem 1.1rem}
.flotte.vivante.en-hauteur .flotte-galerie .fenetre{padding:0 7px;height:22px;gap:4px;font-size:10px}
.flotte.vivante.en-hauteur .flotte-galerie .fenetre i{width:7px;height:7px}
.flotte.vivante.en-hauteur .flotte-galerie .fenetre span{padding:0 .45rem;height:14px;line-height:14px;font-size:9px;margin-left:5px}
.flotte.vivante.en-hauteur .btn.flotte-voir{white-space:nowrap}
.flotte.vivante.en-hauteur .flotte-prix{font-size:1.15rem}
.flotte.vivante .flotte-revoir{min-height:44px;padding:.6rem 1rem}
.flotte.vivante.en-hauteur .flotte-votre .btn{flex:none;white-space:nowrap;padding:.75rem 1rem}

/* la bande de sable (mentions légales) occupe le pied de l'écran : les boutons du bas se posent au-dessus */
.flotte.vivante .flotte-sauter,.flotte.vivante .flotte-revoir{bottom:calc(var(--sable,0px) + 1rem)}
.flotte.vivante.en-hauteur .flotte-sauter,.flotte.vivante.en-hauteur .flotte-revoir{bottom:calc(var(--sable,0px) + .7rem)}
.flotte.vivante.revoir-haut .flotte-revoir{top:calc(var(--vy) + 4px);bottom:auto}