/* ⚠️ ATTENTION · STRUCTURE PROTÉGÉE · Madame Ananas · ASL Legacy. Avant toute modification de ce fichier (par une personne ou une IA), lire AVANT-DE-MODIFIER.md à la racine du site.
   Toute modification de structure est signalée dans l'administration et relève de la responsabilité de la personne qui la fait. */
/* =========================================================
   MADAME ANANAS · GRAMMAIRE COMMUNE (V27)
   Chargé après le <style> de chaque page : ne remplace rien,
   affine. Aucun contenu n'est défini ici.
   ========================================================= */

:root{
  --g-ease:cubic-bezier(.22,.61,.36,1);
  --g-ease-lent:cubic-bezier(.16,.84,.3,1);
}

/* ---------- G1 · TROIS FAMILLES D'ANIMATION ---------- */

/* 1. Texte : fondu + légère remontée, lent */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .85s var(--g-ease),transform .85s var(--g-ease)}
.reveal.visible{opacity:1;transform:none}

/* 2. Image : le cadre s'ouvre du bas vers le haut, sans zoom */
.reveal.rv-img{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.15s var(--g-ease-lent)}
.reveal.rv-img.visible{clip-path:inset(0 0 0 0)}

/* 3. Détail de marque : le trait or se trace, le symbole apparaît lentement */
.reveal.rv-trait{opacity:1;transform:scaleX(0);transform-origin:left center;transition:transform 1.3s var(--g-ease-lent)}
.reveal.rv-trait.v{transform:scaleY(0);transform-origin:center top}
.reveal.rv-trait.visible{transform:none}
.reveal.rv-marque{transform:none;transition:opacity 1.6s ease}

/* Hero : la lumière arrive, sans zoom */
.hero-img{animation:gLumiere 1.8s var(--g-ease) both}
@keyframes gLumiere{from{opacity:0;filter:brightness(1.18)}to{opacity:.88;filter:none}}

/* ---------- G2 · SYMBOLE ANANAS (asset officiel, jamais redessiné) ---------- */
.g-ananas{display:block;margin:0 auto;width:36px;height:auto}

/* ---------- G3 · FIL OR (usage rare) ---------- */
.g-fil{position:absolute;left:50%;bottom:0;width:1px;height:92px;margin-left:-.5px;background:linear-gradient(180deg,rgba(200,152,59,0),rgba(200,152,59,.75));z-index:1}

/* ---------- G5 · ÉTATS INTERACTIFS ---------- */

/* Liens soulignés : le trait se trace de gauche à droite */
.link-btn{border-bottom-color:rgba(217,180,99,.28);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .6s var(--g-ease),color .3s,border-color .3s}
.link-btn:hover,.link-btn:focus-visible{background-size:100% 1px}
.link-btn.dark{border-bottom-color:rgba(75,107,76,.22)}

/* Navigation : même geste, plus discret */
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--g-ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--vert)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);opacity:.8}

/* Flèches : glissement de 4px */
.g-fleche{display:inline-block;transition:transform .45s var(--g-ease)}
a:hover .g-fleche,a:focus-visible .g-fleche{transform:translateX(4px)}

/* Boutons pleins : un filet or intérieur apparaît, pas de saut */
.hero-btn,.invitation-btn,.nav-cta,.nl-form button{outline:1px solid transparent;outline-offset:-1px;transition:background .35s,outline-color .45s,outline-offset .45s var(--g-ease),box-shadow .35s}
.hero-btn:hover,.invitation-btn:hover,.nav-cta:hover,.nl-form button:hover{transform:none;outline-color:rgba(217,180,99,.9);outline-offset:-5px}
.invitation-btn:hover{outline-color:var(--or)}

/* Focus clavier : visible, soigné, partout */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:1px solid var(--or);outline-offset:4px}
.hero-btn:focus-visible,.invitation-btn:focus-visible,.nav-cta:focus-visible{outline-color:var(--or-l);outline-offset:-5px}

/* ---------- G6 · NAVIGATION LISIBLE SUR PHOTO ---------- */
/* Activé par <body class="g-sur-photo"> sur les pages dont le hero est une photo pleine largeur */
.g-sur-photo nav:not(.scrolled){background:linear-gradient(180deg,rgba(38,36,30,.55) 0%,rgba(38,36,30,.22) 62%,rgba(38,36,30,0) 100%)}
.g-sur-photo nav:not(.scrolled) .nav-links a{color:rgba(247,244,238,.88)}
.g-sur-photo nav:not(.scrolled) .nav-links a:hover{color:var(--ivoire)}
.g-sur-photo nav:not(.scrolled) .nav-links a::after{background:var(--or-l)}
.g-sur-photo nav:not(.scrolled) .nav-espace{color:var(--ivoire);border-bottom-color:rgba(217,180,99,.7)}
.g-sur-photo nav:not(.scrolled) .nav-burger span{background:var(--ivoire)}
.nav-espace{transition:color .3s,border-color .3s}
.nav-espace:hover{border-bottom-color:var(--or)}

/* ---------- G7 · FOOTER « DERNIER SALON » ---------- */
footer.g-footer{background:var(--encre);padding:0 48px 36px;color:rgba(247,244,238,.62)}
.g-footer .g-f-salon{max-width:1160px;margin:0 auto;padding:96px 0 80px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;border-bottom:1px solid rgba(247,244,238,.1)}
.g-footer .g-f-eyebrow{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--or-l);margin-bottom:22px;display:flex;align-items:center;gap:14px}
.g-footer .g-f-eyebrow::before{content:'';width:32px;height:1px;background:var(--or-l);opacity:.6}
.g-footer .g-f-titre{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(34px,4vw,50px);line-height:1.08;color:var(--ivoire)}
.g-footer .g-f-titre em{font-style:italic;color:var(--or-l)}
.g-footer .g-f-p{font-size:15.5px;line-height:1.75;color:rgba(247,244,238,.6);max-width:420px;margin-top:18px}

/* Le formulaire devient une ligne d'écriture */
.g-footer .mf-form{flex-direction:row;max-width:none;width:100%;border-bottom:1px solid rgba(247,244,238,.28);transition:border-color .4s}
.g-footer .mf-form:focus-within{border-bottom-color:var(--or-l)}
.g-footer .mf-form input[type=email]{border:none;padding:14px 0;font-size:18px;font-family:'Cormorant Garamond',serif;font-style:italic;background:transparent}
.g-footer .mf-form input[type=email]:focus-visible{outline:none}
.g-footer .mf-form button{background:transparent;color:var(--or-l);padding:0 0 0 20px;position:relative}
.g-footer .mf-form button::after{content:'→';display:inline-block;margin-left:10px;transition:transform .45s var(--g-ease)}
.g-footer .mf-form button:hover{background:transparent;color:var(--ivoire)}
.g-footer .mf-form button:hover::after{transform:translateX(4px)}
.g-footer .mf-ok{max-width:none}
.g-footer .g-f-mention{font-size:12px;color:rgba(247,244,238,.34);margin-top:14px}

.g-footer .g-f-grid{max-width:1160px;margin:0 auto;padding:56px 0 48px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.g-footer .g-f-logo img{height:64px;width:auto;display:block;margin-bottom:18px}
.g-footer .g-f-tagline{font-size:14px;line-height:1.75;color:rgba(247,244,238,.45);max-width:300px}
.g-footer .g-f-col-titre{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(247,244,238,.35);margin-bottom:18px}
.g-footer .g-f-liens{list-style:none;display:flex;flex-direction:column;gap:11px}
.g-footer .g-f-liens a{font-size:14px;color:rgba(247,244,238,.66);text-decoration:none;background-image:linear-gradient(var(--or-l),var(--or-l));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;padding-bottom:2px;transition:color .3s,background-size .55s var(--g-ease)}
.g-footer .g-f-liens a:hover,.g-footer .g-f-liens a:focus-visible{color:var(--ivoire);background-size:100% 1px}
.g-footer .g-f-liens svg{width:13px;height:13px;vertical-align:-2px;margin-right:7px;fill:var(--or-l)}
.g-footer .g-f-bas{max-width:1160px;margin:0 auto;padding-top:24px;border-top:1px solid rgba(247,244,238,.08);font-size:11.5px;letter-spacing:.3px;color:rgba(247,244,238,.3)}
.g-footer .g-f-bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 32px}
.g-footer .g-f-bas a{color:rgba(247,244,238,.5);text-decoration:none;background-image:linear-gradient(var(--or-l),var(--or-l));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:color .3s,background-size .55s var(--g-ease)}
.g-footer .g-f-bas a:hover,.g-footer .g-f-bas a:focus-visible{color:var(--ivoire);background-size:100% 1px}

@media(max-width:1024px){
  .g-footer .g-f-salon{grid-template-columns:1fr;gap:36px;padding:72px 0 60px}
  .g-footer .g-f-grid{grid-template-columns:1fr 1fr;gap:40px 32px}
  .g-footer .g-f-grid > div:first-child{grid-column:1/-1}
}
@media(max-width:768px){
  footer.g-footer{padding:0 24px 32px}
}
@media(max-width:480px){
  .g-footer .mf-form{flex-direction:row}
  .g-footer .mf-form input[type=email]{font-size:17px}
  .g-footer .mf-form button{padding:0 0 0 12px;letter-spacing:2px}
}

/* ---------- SIGNATURE SONORE · MOBILE ----------
   Sous 1024px, le bouton quitte le bas de l'écran et se loge dans l'en-tête,
   à gauche du menu : une note dans un cercle discret. Il ne recouvre ainsi
   jamais un texte, un lien ou un bouton pendant le défilement. */
@media(max-width:1024px){
  .sound-toggle,.sound-toggle.playing{position:fixed;top:26px;bottom:auto;right:62px;z-index:101;width:44px;height:44px;padding:0;gap:0;justify-content:center;border-radius:50%;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid rgba(58,56,47,.16);box-shadow:none;transition:border-color .4s,opacity .3s}
  .sound-toggle #sound-label{display:none}
  .sound-toggle .note,.sound-toggle.playing .note{font-size:15px;color:var(--or)}
  .g-sur-photo:not(.g-scrolled) .sound-toggle{border-color:rgba(247,244,238,.38)}
  .g-sur-photo:not(.g-scrolled) .sound-toggle .note{color:var(--or-l)}
  body.g-menu-ouvert .sound-toggle{opacity:0;pointer-events:none}
  footer.g-footer{padding-bottom:32px!important}
}

/* ---------- FOOTER · RYTHME MOBILE ---------- */
@media(max-width:768px){
  .g-footer .g-f-salon{padding:60px 0 44px;gap:26px}
  .g-footer .g-f-eyebrow{margin-bottom:16px}
  .g-footer .g-f-titre{font-size:34px}
  .g-footer .g-f-p{font-size:15px;margin-top:12px}
  .g-footer .g-f-grid{padding:40px 0 32px;gap:32px 24px}
  .g-footer .g-f-grid > div:first-child{display:flex;align-items:center;gap:18px}
  .g-footer .g-f-logo img{height:48px;margin-bottom:0}
  .g-footer .g-f-tagline{font-size:13.5px;line-height:1.6}
  .g-footer .g-f-col-titre{margin-bottom:14px}
  .g-footer .g-f-liens{gap:9px}
  .g-footer .g-f-liens a{font-size:14.5px}
  .g-footer .g-f-bas{padding-top:20px;font-size:11px;line-height:1.6}
}

/* ---------- ACCESSIBILITÉ · MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body,.page-exit,.hero-img{animation:none!important}
  .reveal,.reveal.rv-img,.reveal.rv-trait{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .hero-scroll span{animation:none}
  *{transition-duration:.01ms!important}
}