/* Le Petit Zinc : lent, fondus, la ligne d'horizon. Seulement opacity, transform, clip-path. */
:root{--ease:cubic-bezier(.2,.7,.1,1);--rv-d:.9s}
html{overflow-x:clip}
body{overflow-x:clip}

/* Ligne d'horizon : filet laiton de 1 px sous l'en-tête, il se remplit avec la lecture */
.sa-horizon{position:fixed;left:0;right:0;top:var(--sa-head,64px);height:1px;background:#C9A25E;transform-origin:0 50%;transform:scaleX(0);z-index:50;pointer-events:none}
.sa-head{transition:background-color .5s var(--ease)}
.sa-head.sa-plein{background-color:#0F1B20}

/* Liens : soulignement qui se dessine de gauche à droite */
.sa-lien{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
.sa-lien:hover,.sa-lien:focus-visible{background-size:100% 1px}

@media (prefers-reduced-motion:no-preference){
  /* Héros : photo de 1,06 à 1 en 1,6 s (pas d'opacité : elle reste l'image LCP) */
  .ex-anim .sa-hero-img{animation:saZoom 1.6s var(--ease) both}
  @keyframes saZoom{from{transform:scale(1.06)}}
  /* Titre mot par mot, ordinateur seulement (sur téléphone le titre reste fixe : LCP) */
  @media (min-width:761px){
    .ex-anim .sa-hero-titre .ex-w{animation:saMot .9s var(--ease) both;animation-delay:calc(200ms + var(--i) * 80ms)}
    @keyframes saMot{from{opacity:0;transform:translateY(.45em)}}
  }
  /* Le soleil se couche : en quittant le héros, la photo descend de 8 % et le titre s'efface */
  @supports (animation-timeline:view()){
    .ex-anim .sa-hero-cadre{animation:saCouche linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes saCouche{to{transform:translateY(8%)}}
    .ex-anim .sa-hero-texte{animation:saEfface linear both;animation-timeline:view();animation-range:exit 0% exit 70%}
    @keyframes saEfface{to{opacity:0;transform:translateY(-24px)}}
    .sa-horizon{animation:saLigne linear both;animation-timeline:scroll(root)}
    @keyframes saLigne{to{transform:scaleX(1)}}
  }

  /* Manifeste : ligne par ligne sous un masque vertical, une seule fois */
  .ex-anim .sa-manif .ex-w{clip-path:inset(0 0 100% 0);transform:translateY(.6em);
    transition:clip-path 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--l,0) * 140ms)}
  .ex-anim .sa-manif.is-in .ex-w{clip-path:inset(-.2em -.1em -.25em -.1em);transform:none}

  /* Pêche du jour : la photo noir et blanc se colore quand elle est à moitié visible (ordinateur) */
  @media (min-width:761px){
    .ex-anim .sa-peche-img{filter:grayscale(1);transition:filter 1.4s var(--ease)}
    .ex-anim .sa-peche-img.is-in{filter:none}
  }
  .ex-anim [data-rv="monte"]{transform:translateY(28px)}

  /* Plats signatures : parallaxe de 20 px au plus, ordinateur seulement */
  @media (min-width:1024px){@supports (animation-timeline:view()){
    .ex-anim .sa-plat{animation:saPara linear both;animation-timeline:view();animation-range:cover}
    .sa-plat:nth-child(1){--p:20px}.sa-plat:nth-child(2){--p:-12px}.sa-plat:nth-child(3){--p:8px}
    @keyframes saPara{from{transform:translateY(var(--p))}to{transform:translateY(calc(var(--p) * -1))}}
  }}

  /* Avis : changement de citation en fondu */
  .sa-avis-q{transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .sa-avis-q.sa-sort{opacity:0;transform:translateY(-8px)}

  /* La carte : trait actif qui glisse d'un onglet à l'autre (transform seulement) */
  .sa-trait{transition:transform .45s var(--ease)}
  /* Photo collante qui change selon la section : fondu entre images empilées */
  .sa-col-photo img{transition:opacity .8s var(--ease)}

  /* Plan du port : les quais se dessinent une fois */
  .ex-anim .sa-plan path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) calc(var(--i,0) * 120ms)}
  .ex-anim .sa-plan.is-in path{stroke-dashoffset:0}
}
/* Barre d'onglets et colonne photo collantes : position:sticky (jamais de pin JS) */
.sa-onglets{position:sticky;top:var(--sa-head,64px);z-index:20}
.sa-trait{position:absolute;left:0;bottom:0;height:2px;width:1px;background:#B5401F;transform-origin:0 50%}
@media (min-width:1024px){.sa-col-photo{position:sticky;top:calc(var(--sa-head,64px) + 72px);aspect-ratio:4/5}
  .sa-col-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}.sa-col-photo img.on{opacity:1}}