/* Amélie Coiffure — styles et animations (complément de theme.json). */

:root {
	--am-rose: var(--wp--preset--color--rose, #E2457A);
	--am-rouge: var(--wp--preset--color--rouge, #C8102E);
	--am-bleu: var(--wp--preset--color--bleu, #1F4FD1);
	--am-nuit: var(--wp--preset--color--bleu-nuit, #14213D);
	--am-creme: var(--wp--preset--color--creme, #FBF3F1);
	--am-nude: var(--wp--preset--color--nude, #F1DCD6);
	--am-encre: var(--wp--preset--color--encre, #1E1A1C);
	--am-ease: cubic-bezier(.22, .8, .2, 1);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--am-rose); color: #fff; }
img { height: auto; }

/* ---------- Bandeau d'annonce (défilant) ---------- */
.am-annonce { overflow: hidden; background: var(--am-nuit); color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.am-annonce__piste { display: flex; gap: 3.5rem; width: max-content; padding: .62rem 0; animation: am-defile 38s linear infinite; }
.am-annonce__piste span { white-space: nowrap; }
.am-annonce__piste span::before { content: "✦"; color: var(--am-rose); margin-right: .9rem; }
@keyframes am-defile { to { transform: translateX(-50%); } }

/* ---------- En-tête collant ----------
   La partie « header » est enveloppée par WordPress (<header class="wp-block-template-part">) : c'est elle qui colle,
   décalée de la hauteur du bandeau d'annonce (qui, lui, part au défilement). */
header.wp-block-template-part { position: sticky; top: calc(-1 * var(--am-annonce-h, 38px)); z-index: 50; }
.admin-bar header.wp-block-template-part { top: calc(32px - var(--am-annonce-h, 38px)); }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: calc(46px - var(--am-annonce-h, 38px)); } }
.am-entete { position: relative; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, padding .3s; }
.am-entete.is-defile { border-bottom-color: rgba(30, 26, 28, .08); box-shadow: 0 6px 24px -18px rgba(20, 33, 61, .45); }
.am-logo { line-height: 1; text-decoration: none !important; color: var(--am-encre) !important; display: inline-flex; align-items: baseline; gap: .45rem; }
.am-logo__script { font-family: var(--wp--preset--font-family--script); font-size: 2.15rem; color: var(--am-rose); }
.am-logo__mot { font-family: var(--wp--preset--font-family--texte); font-weight: 700; font-size: .78rem; letter-spacing: .38em; text-transform: uppercase; }
.am-entete .wp-block-navigation a { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; position: relative; }
.am-entete .wp-block-navigation a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--am-rose); transition: right .35s var(--am-ease); }
.am-entete .wp-block-navigation a:hover::after { right: 0; }

/* ---------- Héros ---------- */
.am-heros { min-height: min(92vh, 900px) !important; overflow: hidden; }
.am-heros .wp-block-cover__image-background { animation: am-zoom 22s var(--am-ease) both; transform-origin: 60% 40%; }
@keyframes am-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
.am-heros .wp-block-cover__background { background: linear-gradient(100deg, rgba(20, 33, 61, .9) 0%, rgba(20, 33, 61, .72) 34%, rgba(20, 33, 61, .18) 62%, rgba(226, 69, 122, .08) 100%) !important; opacity: 1 !important; }
.am-heros .wp-block-cover__image-background { object-position: 78% 35% !important; }
@media (max-width: 781px) { .am-heros .wp-block-cover__background { background: linear-gradient(180deg, rgba(20, 33, 61, .35) 0%, rgba(20, 33, 61, .82) 55%, rgba(20, 33, 61, .9) 100%) !important; } .am-heros .wp-block-cover__image-background { object-position: 62% 30% !important; } }
.am-heros h1 { color: #fff; max-width: 14ch; }
.am-heros h1 em { font-style: italic; color: #FFC6D9; }
.am-surtitre { font-family: var(--wp--preset--font-family--texte) !important; font-size: .78rem !important; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--am-rose); }
.am-heros .am-surtitre { color: #FFC6D9; }
.am-heros p { color: rgba(255, 255, 255, .92); }
.am-heros .wp-block-cover__inner-container { position: static; }
.am-heros .wp-block-cover__inner-container > * { position: relative; z-index: 1; }
.am-heros .wp-block-cover__inner-container > .am-defiler { position: absolute; }
.am-defiler { position: absolute; left: 50%; bottom: 1.6rem; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 14px; }
.am-defiler::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: am-souris 1.8s ease-in-out infinite; }
@keyframes am-souris { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Boutons : contour, effet de brillance */
.wp-block-button__link { position: relative; overflow: hidden; transition: background-color .3s, color .3s, transform .3s var(--am-ease), box-shadow .3s; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(226, 69, 122, .9); }
.wp-block-button__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--am-ease); }
.wp-block-button__link:hover::after { transform: translateX(120%); }
.is-style-outline .wp-block-button__link { border: 2px solid currentColor; background: transparent !important; }
.am-heros .is-style-outline .wp-block-button__link { color: #fff; }
.am-heros .is-style-outline .wp-block-button__link:hover { background: #fff !important; color: var(--am-nuit) !important; }

/* ---------- Apparitions au défilement ---------- */
.am-js .am-apparait { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--am-ease), transform .9s var(--am-ease); }
.am-js .am-apparait.is-visible { opacity: 1; transform: none; }
.am-js .am-cascade > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--am-ease), transform .8s var(--am-ease); }
.am-js .am-cascade.is-visible > * { opacity: 1; transform: none; }
.am-js .am-cascade.is-visible > *:nth-child(2) { transition-delay: .1s; }
.am-js .am-cascade.is-visible > *:nth-child(3) { transition-delay: .2s; }
.am-js .am-cascade.is-visible > *:nth-child(4) { transition-delay: .3s; }
.am-js .am-cascade.is-visible > *:nth-child(5) { transition-delay: .4s; }
.am-js .am-cascade.is-visible > *:nth-child(6) { transition-delay: .5s; }

/* ---------- À propos : photo en décalé + pastille ---------- */
.am-photo-cadre { position: relative; }
.am-photo-cadre img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; box-shadow: 24px 24px 0 var(--am-nude); }
.am-pastille { position: absolute; right: -1rem; bottom: -1.4rem; width: 132px; height: 132px; border-radius: 50%; background: var(--am-bleu); color: #fff; display: grid; place-items: center; text-align: center; font-family: var(--wp--preset--font-family--titre); font-size: 1.05rem; line-height: 1.15; padding: 1rem; animation: am-tourne 24s linear infinite; }
.am-pastille span { animation: am-tourne 24s linear infinite reverse; display: block; }
@keyframes am-tourne { to { transform: rotate(360deg); } }

/* ---------- Cartes savoir-faire ---------- */
.am-cartes { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1.6rem !important; }
@media (max-width: 960px) { .am-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .am-cartes { grid-template-columns: 1fr; } }
.am-carte { position: relative; overflow: hidden; border-radius: 2px; background: #000; aspect-ratio: 4 / 5; margin: 0 !important; }
.am-carte figure, .am-carte .wp-block-image { margin: 0; height: 100%; }
.am-carte img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 1.1s var(--am-ease), opacity .6s; opacity: .92; }
.am-carte:hover img { transform: scale(1.07); opacity: .75; }
.am-carte__texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.5rem 1.4rem; color: #fff; background: linear-gradient(to top, rgba(20, 33, 61, .92), rgba(20, 33, 61, 0)); }
.am-carte__texte h3 { color: #fff; margin: 0 0 .35rem; font-size: 1.55rem; }
.am-carte__texte p { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .88); max-height: 0; opacity: 0; transition: max-height .5s var(--am-ease), opacity .5s; }
.am-carte:hover .am-carte__texte p, .am-carte:focus-within .am-carte__texte p { max-height: 6rem; opacity: 1; }
@media (hover: none) { .am-carte__texte p { max-height: none; opacity: 1; } }
.am-carte__trait { display: block; width: 36px; height: 3px; background: var(--am-rose); margin-bottom: .8rem; transition: width .5s var(--am-ease); }
.am-carte:hover .am-carte__trait { width: 72px; }

/* ---------- Tarifs ---------- */
.am-tarifs { list-style: none; margin: 0; padding: 0; }
.am-tarifs li { display: flex; align-items: baseline; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid rgba(30, 26, 28, .09); }
.am-tarifs li::after { content: none; }
.am-tarifs .am-nom { flex: 0 1 auto; }
.am-tarifs .am-points { flex: 1 1 auto; border-bottom: 1px dotted rgba(30, 26, 28, .35); transform: translateY(-4px); min-width: 1.5rem; }
.am-tarifs .am-prix { flex: 0 0 auto; font-weight: 700; color: var(--am-rose); white-space: nowrap; }
.am-colonne-tarifs { background: #fff; padding: 2rem 1.8rem !important; border-top: 4px solid var(--am-rose); box-shadow: 0 30px 60px -45px rgba(20, 33, 61, .55); transition: transform .5s var(--am-ease); }
.am-colonne-tarifs:nth-child(2) { border-top-color: var(--am-bleu); }
.am-colonne-tarifs:nth-child(3) { border-top-color: var(--am-rouge); }
.am-colonne-tarifs:hover { transform: translateY(-6px); }

/* ---------- Avis (carrousel) ---------- */
.am-avis { display: flex !important; flex-wrap: nowrap !important; gap: 1.4rem !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .5rem; }
.am-avis::-webkit-scrollbar { display: none; }
.am-avis > * { flex: 0 0 min(420px, 86%); scroll-snap-align: start; background: #fff; padding: 2.2rem 2rem !important; border-radius: 2px; margin: 0 !important; }
.am-etoiles { color: var(--am-rose); letter-spacing: .2em; font-size: 1rem; }
.am-avis blockquote { margin: 0; border: 0; padding: 0; font-family: var(--wp--preset--font-family--titre); font-size: 1.3rem; line-height: 1.45; font-style: italic; }
.am-mention { font-size: .78rem; color: var(--wp--preset--color--gris); letter-spacing: .05em; }

/* ---------- Bandeau Emma ---------- */
.am-emma { position: relative; overflow: hidden; }
.am-emma::before, .am-emma::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: am-flotte 14s ease-in-out infinite alternate; pointer-events: none; }
.am-emma::before { width: 380px; height: 380px; background: var(--am-rose); left: -120px; top: -140px; }
.am-emma::after { width: 420px; height: 420px; background: var(--am-bleu); right: -140px; bottom: -180px; animation-delay: -6s; }
.am-emma > * { position: relative; z-index: 1; }
@keyframes am-flotte { to { transform: translate(60px, 40px) scale(1.12); } }
.am-bulle { display: inline-flex; align-items: center; gap: .55rem; background: rgba(255, 255, 255, .14); color: #fff; padding: .45rem .95rem; border-radius: 999px; font-size: .8rem; letter-spacing: .08em; }
.am-bulle__point { width: 8px; height: 8px; border-radius: 50%; background: #3BE07A; box-shadow: 0 0 0 0 rgba(59, 224, 122, .7); animation: am-pulse 2s infinite; }
@keyframes am-pulse { 70% { box-shadow: 0 0 0 10px rgba(59, 224, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 224, 122, 0); } }

/* ---------- Galerie ---------- */
.am-galerie { display: grid !important; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 1rem !important; }
.am-galerie > * { margin: 0 !important; overflow: hidden; }
.am-galerie > *:nth-child(1) { grid-row: span 2; }
.am-galerie > *:nth-child(5) { grid-column: span 2; }
.am-galerie img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 1s var(--am-ease); }
.am-galerie > *:hover img { transform: scale(1.06); }
@media (max-width: 700px) { .am-galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .am-galerie > *:nth-child(5) { grid-column: auto; } }

/* ---------- Horaires ---------- */
.am-horaires { list-style: none; padding: 0; margin: 0; }
.am-horaires li { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.am-horaires li.is-aujourdhui { color: #FFC6D9; font-weight: 700; }

/* ---------- Bouton Réserver collant (mobile, à GAUCHE : la bulle Emma est à droite) ---------- */
.am-cta-mobile { display: none; }
@media (max-width: 781px) {
	.am-cta-mobile { display: inline-flex; position: fixed; left: 1rem; bottom: 1rem; z-index: 60; align-items: center; gap: .5rem; background: var(--am-rose); color: #fff !important; text-decoration: none !important; padding: .85rem 1.3rem; border-radius: 999px; font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 12px 30px -10px rgba(226, 69, 122, .9); transform: translateY(140%); transition: transform .45s var(--am-ease); }
	.am-cta-mobile.is-visible { transform: none; }
}

/* ---------- Page tarifs : photo + colonne, en alternance ---------- */
.am-ligne-tarif { display: flex; align-items: center; gap: clamp(1.5rem, 5vw, 4rem); margin-bottom: clamp(3rem, 7vw, 5.5rem) !important; }
.am-ligne-tarif.am-inverse { flex-direction: row-reverse; }
.am-ligne-tarif__photo { flex: 0 0 40%; }
.am-ligne-tarif__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 20px 20px 0 var(--am-nude); }
.am-ligne-tarif.am-inverse .am-ligne-tarif__photo img { box-shadow: -20px 20px 0 var(--am-nude); }
.am-ligne-tarif .am-colonne-tarifs { flex: 1 1 auto; }
@media (max-width: 781px) { .am-ligne-tarif, .am-ligne-tarif.am-inverse { flex-direction: column; } .am-ligne-tarif__photo { flex-basis: auto; width: 100%; } }

/* ---------- Équipe ---------- */
.am-equipe { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
.am-equipe .am-colonne-tarifs { aspect-ratio: auto; }
.am-initiale { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--wp--preset--font-family--script); font-size: 2.3rem; line-height: 1; }
.am-heros--page { min-height: 62vh !important; }
.am-heros--page h1 { max-width: none; margin-inline: auto; }

/* En-tête : bouton caché sur mobile (le bouton collant prend le relais) */
@media (max-width: 781px) { .am-cache-mobile { display: none !important; } .am-logo__script { font-size: 1.8rem; } }

/* Les grandes zones (en-tête, contenu, pied) se touchent : pas d'espace blanc entre elles */
.wp-site-blocks > * { margin-block-start: 0 !important; }
.am-pied .wp-block-separator { width: 100%; max-width: var(--wp--style--global--wide-size, 1200px); border: 0; height: 1px; opacity: 1; }

/* ---------- Pied de page ---------- */
.am-pied a { color: #fff; text-decoration: none; }
.am-pied a:hover { color: #FFC6D9; }

/* ---------- Accessibilité : animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.am-js .am-apparait, .am-js .am-cascade > * { opacity: 1 !important; transform: none !important; }
	.am-annonce__piste { flex-wrap: wrap; justify-content: center; width: auto; }
}