/* =====================================================================
   RDV MAJUNGA - Animations et effets visuels
   ---------------------------------------------------------------------
   Ce fichier regroupe tout ce qui bouge et tout ce qui decore.
   Il se charge APRES style.css : la mise en page reste lisible meme
   si ce fichier est retire.

     1.  Moteur d'apparition (variantes)
     2.  Apparition en cascade
     3.  Titre anime mot par mot
     4.  Barre de progression de lecture
     5.  Separateurs de sections
     6.  Formes decoratives
     7.  Bandeau defilant
     8.  Effets au survol
     9.  Hero : halo et invitation a defiler
    10.  Compteurs
    11.  Frise des etapes (page Residence)
    12.  Cartes numerotees (page Majunga)
    13.  Tableau anime (page Tarifs)
    14.  Formulaires animes
    15.  Accent de couleur par page
    16.  Mouvement reduit
   ===================================================================== */

:root {
    --ease-out: cubic-bezier(.22, .78, .3, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --reveal-time: 850ms;

    /* Accent par defaut (redefini par page, section 15) */
    --accent: var(--sun-500);
    --accent-soft: var(--sun-100);
    --accent-strong: var(--sun-600);
}

/* ---------------------------------------------------------------------
   1. MOTEUR D'APPARITION
   Chaque element porte data-reveal="<variante>". Le script ajoute la
   classe .is-in lorsqu'il entre dans l'ecran.
   ------------------------------------------------------------------ */
[data-reveal] {
    transition:
        opacity var(--reveal-time) var(--ease-out),
        transform var(--reveal-time) var(--ease-out),
        clip-path var(--reveal-time) var(--ease-out),
        filter 600ms var(--ease-out);
}

[data-reveal]:not(.is-in) { opacity: 0; }

/* Variantes de depart */
[data-reveal="up"]:not(.is-in)     { transform: translateY(38px); }
[data-reveal="down"]:not(.is-in)   { transform: translateY(-30px); }
[data-reveal="left"]:not(.is-in)   { transform: translateX(-48px); }
[data-reveal="right"]:not(.is-in)  { transform: translateX(48px); }
[data-reveal="zoom"]:not(.is-in)   { transform: scale(.9); }
[data-reveal="pop"]:not(.is-in)    { transform: scale(.72); }
[data-reveal="blur"]:not(.is-in)   { transform: translateY(20px); filter: blur(14px); }
[data-reveal="tilt"]:not(.is-in)   { transform: translateY(34px) rotate(-2.5deg) scale(.96); }
[data-reveal="flip"]:not(.is-in)   { transform: perspective(1000px) rotateX(14deg) translateY(30px); transform-origin: top center; }
[data-reveal="rise"]:not(.is-in)   { transform: translateY(70px) scale(.98); }

/* Variantes de devoilement : l'element est opaque, c'est le masque qui bouge */
[data-reveal="wipe"],
[data-reveal="wipe-up"],
[data-reveal="wipe-down"] { opacity: 1; }
[data-reveal="wipe"]:not(.is-in)      { clip-path: inset(0 100% 0 0); opacity: 1; }
[data-reveal="wipe-up"]:not(.is-in)   { clip-path: inset(100% 0 0 0); opacity: 1; }
[data-reveal="wipe-down"]:not(.is-in) { clip-path: inset(0 0 100% 0); opacity: 1; }
[data-reveal^="wipe"].is-in           { clip-path: inset(0 0 0 0); }

[data-reveal].is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Un survol ne doit pas etre bride par la transition d'apparition */
[data-reveal].is-in.card,
[data-reveal].is-in.service-card { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }

/* ---------------------------------------------------------------------
   2. APPARITION EN CASCADE
   Le parent porte data-stagger ; le script numerote les enfants (--i).
   ------------------------------------------------------------------ */
[data-stagger] > * {
    transition-delay: calc(var(--i, 0) * var(--stagger-step, 95ms));
}

/* ---------------------------------------------------------------------
   3. TITRE ANIME MOT PAR MOT
   ------------------------------------------------------------------ */
.split-words { display: inline-block; }
.split-words .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
.split-words .word > span {
    display: inline-block;
    transform: translateY(105%);
    opacity: 0;
    transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out);
    transition-delay: calc(var(--w, 0) * 85ms);
}
.split-words.is-in .word > span { transform: translateY(0); opacity: 1; }

/* ---------------------------------------------------------------------
   4. BARRE DE PROGRESSION DE LECTURE
   ------------------------------------------------------------------ */
.scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 120;
    background: linear-gradient(90deg, var(--ocean-600), var(--accent));
    transform: scaleX(var(--progress, 0));
    transform-origin: 0 50%;
    pointer-events: none;
    transition: transform 90ms linear;
}

/* ---------------------------------------------------------------------
   5. SEPARATEURS DE SECTIONS
   Genere par la fonction PHP divider($from, $to, $shape).
   ------------------------------------------------------------------ */
.divider {
    position: relative;
    line-height: 0;
    background: var(--divider-from, transparent);
    overflow: hidden;
}
.divider svg {
    display: block;
    width: 100%;
    height: clamp(38px, 5vw, 76px);
    fill: var(--divider-to, var(--sand-50));
}
.divider--tight svg { height: clamp(26px, 3.2vw, 46px); }

/* Legere ondulation continue de la vague */
.divider--wave svg path { animation: waveShift 14s ease-in-out infinite alternate; }
@keyframes waveShift {
    from { transform: translateX(-1.4%); }
    to   { transform: translateX(1.4%); }
}

/* ---------------------------------------------------------------------
   6. FORMES DECORATIVES
   ------------------------------------------------------------------ */
/* Les decors debordent volontairement : la page ne doit jamais
   defiler horizontalement pour autant. */
html { overflow-x: clip; }
.section.has-deco { overflow: hidden; }

.deco { position: absolute; pointer-events: none; z-index: 0; }

.deco-blob {
    border-radius: 50%;
    filter: blur(2px);
    background: radial-gradient(circle, var(--deco-color, rgba(242, 166, 90, .3)), transparent 68%);
    animation: floatSlow 16s ease-in-out infinite alternate;
}
@keyframes floatSlow {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(18px, -26px, 0) scale(1.08); }
}

.deco-dots {
    background-image: radial-gradient(var(--deco-color, rgba(13, 93, 107, .22)) 1.5px, transparent 1.6px);
    background-size: 17px 17px;
    opacity: .55;
}

.deco-ring {
    border: 1.5px dashed var(--deco-color, rgba(13, 93, 107, .22));
    border-radius: 50%;
    animation: spinSlow 42s linear infinite;
}
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Une section peut recevoir des decors sans casser son contenu */
.section { position: relative; }
.section > .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   7. BANDEAU DEFILANT
   ------------------------------------------------------------------ */
.marquee {
    overflow: hidden;
    background: var(--ocean-900);
    color: rgba(255, 255, 255, .82);
    padding: 16px 0;
    border-block: 1px solid rgba(255, 255, 255, .08);
}
.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
    display: flex;
    align-items: center;
    gap: 34px;
    padding-right: 34px;
    font-family: var(--font-title);
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    white-space: nowrap;
}
.marquee__group span { display: inline-flex; align-items: center; gap: 34px; }
.marquee__group .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------
   8. EFFETS AU SURVOL
   ------------------------------------------------------------------ */

/* Reflet qui traverse les boutons pleins */
.btn-primary,
.btn-sun,
.btn-success { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after,
.btn-sun::after,
.btn-success::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -140%;
    width: 55%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
    transform: skewX(-18deg);
    transition: left 680ms var(--ease-out);
    z-index: -1;
}
.btn-primary:hover::after,
.btn-sun:hover::after,
.btn-success:hover::after { left: 140%; }

/* Halo colore autour des cartes */
.card,
.service-card,
.review-card,
.info-card { position: relative; }

.card::after,
.service-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, var(--accent), transparent 45%, var(--ocean-300));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}
.card:hover::after,
.service-card:hover::after { opacity: 1; }

/* Anneau anime derriere l'icone d'un service */
.service-card__icon { position: relative; }
.service-card__icon::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1.5px dashed var(--ocean-300);
    opacity: 0;
    transform: scale(.82) rotate(-25deg);
    transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out);
}
.service-card:hover .service-card__icon::before {
    opacity: .9;
    transform: scale(1) rotate(0);
}
.service-card:hover .service-card__icon .icon { animation: iconPop 620ms var(--ease-out); }
@keyframes iconPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22) rotate(-8deg); }
    100% { transform: scale(1); }
}

/* Trait anime sous les intitules de section */
.eyebrow::before { transition: width 700ms var(--ease-out); }
[data-reveal]:not(.is-in) .eyebrow::before,
.section-head:not(.is-in) .eyebrow::before { width: 0; }

/* Soulignement des liens flechs */
.link-arrow { position: relative; }
.link-arrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 1.5px;
    width: 0;
    background: currentColor;
    transition: width 380ms var(--ease-out);
}
.link-arrow:hover::after { width: calc(100% - 22px); }

/* Photos de la galerie : leger basculement */
.gallery-item { transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    z-index: 2;
}

/* Reapparition des photos apres un filtre de galerie */
@keyframes filterIn {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* Arrivee en douceur de l'image dans la visionneuse */
.lightbox img {
    opacity: 0;
    transform: scale(.97);
    transition: opacity 380ms var(--ease-out), transform 480ms var(--ease-out);
}
.lightbox img.is-shown { opacity: 1; transform: none; }

/* Le total du recapitulatif clignote quand il change */
.summary-total [data-summary-total].is-updated { animation: totalFlash 700ms var(--ease-out); }
@keyframes totalFlash {
    0%   { color: var(--accent-strong); transform: scale(1.12); }
    100% { color: inherit; transform: scale(1); }
}
.summary-total span:last-child { display: inline-block; transition: color var(--transition); }

/* ---------------------------------------------------------------------
   9. HERO
   ---------------------------------------------------------------------
   Les en-tetes sont volontairement immobiles : ni parallaxe, ni zoom,
   ni apparition en cascade. Le seul mouvement possible est le
   changement de photo, declenche par le visiteur lui-meme.
   ------------------------------------------------------------------ */
.hero__media img {
    transform: translate3d(0, var(--parallax, 0px), 0) scale(1.06);
    transition: transform 120ms linear;
    animation: none;
}

/* Halo lumineux fixe, dans l'angle du hero */
.hero__glow {
    position: absolute;
    z-index: -1;
    width: 60vw;
    height: 60vw;
    max-width: 760px;
    max-height: 760px;
    right: -12vw;
    top: -18vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 166, 90, .28), transparent 62%);
    pointer-events: none;
}

/* Invitation a faire defiler : placee sur le bord droit pour ne pas
   croiser le texte du hero ni le bloc de recherche. */
.scroll-cue {
    position: absolute;
    right: 40px;
    bottom: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .7);
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

/* Sur les ecrans etroits, le bloc de recherche occupe deja le bas du hero */
@media (max-width: 1200px) {
    .scroll-cue { display: none; }
}
.scroll-cue__line {
    writing-mode: horizontal-tb;
    width: 1.5px;
    height: 46px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .8), transparent);
}

/* ---------------------------------------------------------------------
   10. COMPTEURS
   ------------------------------------------------------------------ */
[data-count] { font-variant-numeric: tabular-nums; }

.stat { position: relative; overflow: hidden; }
.stat::before {
    content: "";
    position: absolute;
    inset: auto auto -40px -40px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 65%);
    transition: transform 600ms var(--ease-out);
}
.stat:hover::before { transform: scale(1.5); }

/* ---------------------------------------------------------------------
   11. FRISE DES ETAPES (page Residence)
   ------------------------------------------------------------------ */
.timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 46px;
    display: grid;
    gap: 30px;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--line);
    transform: scaleY(var(--line-progress, 0));
    transform-origin: top;
    transition: transform 1200ms var(--ease-out);
    background-image: linear-gradient(to bottom, var(--accent), var(--ocean-600));
}
.timeline.is-in::before { --line-progress: 1; }

.timeline li { position: relative; }
.timeline li::before {
    content: counter(step);
    counter-increment: step;
    position: absolute;
    left: -46px;
    top: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--accent);
    color: var(--ocean-900);
    font-size: .82rem;
    font-weight: 700;
    transform: scale(0);
    transition: transform 520ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 140ms + 200ms);
}
.timeline { counter-reset: step; }
.timeline.is-in li::before { transform: scale(1); }
.timeline h4 { margin-bottom: 5px; }
.timeline p { font-size: .93rem; margin: 0; }

/* ---------------------------------------------------------------------
   12. CARTES NUMEROTEES (page Majunga)
   ------------------------------------------------------------------ */
.place-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 26px 26px;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    height: 100%;
}
.place-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--ocean-300);
}
.place-card__num {
    position: absolute;
    top: -18px;
    right: 6px;
    font-family: var(--font-title);
    font-size: 5.4rem;
    line-height: 1;
    color: var(--sand-200);
    transition: color var(--transition), transform 600ms var(--ease-out);
    pointer-events: none;
}
.place-card:hover .place-card__num {
    color: var(--accent-soft);
    transform: translateY(4px) scale(1.05);
}
.place-card__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--ocean-100);
    color: var(--ocean-700);
    margin-bottom: 15px;
    transition: background var(--transition), color var(--transition), transform 500ms var(--ease-out);
}
.place-card:hover .place-card__icon {
    background: var(--ocean-700);
    color: #fff;
    transform: rotate(-6deg) scale(1.06);
}
.place-card h3 { margin-bottom: 8px; position: relative; }
.place-card p { font-size: .92rem; margin: 0; position: relative; }
.place-card .badge { margin-bottom: 12px; }

/* ---------------------------------------------------------------------
   13. TABLEAU ANIME (page Tarifs)
   ------------------------------------------------------------------ */
table.rates tbody tr {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out), background var(--transition);
    transition-delay: calc(var(--i, 0) * 85ms);
}
table.rates.is-in tbody tr { opacity: 1; transform: none; }
table.rates tbody tr:hover td.price { color: var(--accent-strong); }
table.rates td.price { transition: color var(--transition); }

/* ---------------------------------------------------------------------
   14. FORMULAIRES ANIMES
   ------------------------------------------------------------------ */
.form-card [data-stagger] > .field,
.contact-info [data-stagger] > li { --stagger-step: 75ms; }

.field input,
.field select,
.field textarea { transition: border-color var(--transition), box-shadow var(--transition), transform 220ms var(--ease-out); }
.field input:focus,
.field select:focus,
.field textarea:focus { transform: translateY(-1px); }

/* Etapes du recapitulatif de confirmation */
.steps li {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 160ms + 250ms);
}
.steps.is-in li { opacity: 1; transform: none; }

.confirmation__check .icon { animation: checkPop 900ms var(--ease-out) 200ms both; }
@keyframes checkPop {
    0%   { transform: scale(0) rotate(-40deg); opacity: 0; }
    60%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.confirmation__check { animation: haloPulse 2.6s ease-in-out 1s infinite; }
@keyframes haloPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(28, 107, 77, .22); }
    50%      { box-shadow: 0 0 0 16px rgba(28, 107, 77, 0); }
}

/* ---------------------------------------------------------------------
   15. ACCENT DE COULEUR PAR PAGE
   Chaque page recoit une teinte dominante : le site reste coherent
   mais aucune page ne ressemble tout a fait a la precedente.
   ------------------------------------------------------------------ */
body.accent-sun {
    --accent: var(--sun-500);
    --accent-soft: var(--sun-100);
    --accent-strong: var(--sun-600);
}
body.accent-palm {
    --accent: #24916a;
    --accent-soft: var(--palm-100);
    --accent-strong: var(--palm-700);
}
body.accent-lagoon {
    --accent: var(--ocean-600);
    --accent-soft: var(--ocean-100);
    --accent-strong: var(--ocean-800);
}
body.accent-coral {
    --accent: #d9694a;
    --accent-soft: #fbe9e3;
    --accent-strong: #b24a2e;
}

/* L'accent colore les elements de rythme de la page */
.eyebrow { color: var(--accent-strong); }
.eyebrow::before,
.is-center .eyebrow::after { background: var(--accent); }
.section-ocean .eyebrow,
.page-hero .eyebrow { color: var(--accent); }
.main-nav a.active::after { background: var(--accent); }
.page-hero::after { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%); }

/* ---------------------------------------------------------------------
   16. MOUVEMENT REDUIT
   Les visiteurs qui demandent moins d'animation voient un site fixe.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal]:not(.is-in) {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    .split-words .word > span { transform: none; opacity: 1; }
    .marquee__track,
    .deco-blob,
    .deco-ring,
    .divider--wave svg path,
    .confirmation__check { animation: none !important; }
    table.rates tbody tr,
    .steps li,
    .timeline li::before { opacity: 1 !important; transform: none !important; }
    .timeline::before { --line-progress: 1; }
    .scroll-progress { display: none; }

    /* Carrousels d'en-tete : changement de photo instantane */
    .hero-slide,
    .hero-slide.is-active,
    .hero-indicator { transition: none !important; }
}