/* ==========================================================================
Fluid : mise en page des blocs natifs.
Les couleurs et typos viennent de theme.json (styles globaux).
Ce fichier ne fait que la composition : grilles, superpositions, mouvement.
========================================================================== */
:root{
--noir:var(--wp--preset--color--noir);
--beige:var(--wp--preset--color--beige);
--marron:var(--wp--preset--color--marron);
--blanc:var(--wp--preset--color--blanc);
--gutter:clamp(16px,4vw,48px);
/* échelle d'espacements : tout le site pioche ici */
--space-xs:12px;
--space-s:20px;
--space-m:clamp(24px,3vw,40px);
--space-l:clamp(28px,5vw,72px);
--space-section:clamp(64px,10vw,140px);
--script:var(--wp--preset--font-family--beth-ellen);
}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{-webkit-font-smoothing:antialiased}
:where(.wp-site-blocks) :focus-visible{outline:2px solid currentColor;outline-offset:3px}
h1,h2,h3{font-stretch:75%;text-wrap:balance;margin:0}
p{text-wrap:pretty;margin:0}
.wp-block-image{margin:0}
.lead{font-size:var(--wp--preset--font-size--large);max-width:60ch}
/* Photos recadrées (toutes les images des sections) */
.hero-photo,.pair .wp-block-image,.solo,.fam-ph,.event-ph{overflow:hidden;border-radius:4px}
.hero-photo img,.pair .wp-block-image img,.solo img,.fam-ph img,.event-ph img{width:100%;height:100%;object-fit:cover;display:block}
/* ---------- barre de progression de la journée ---------- */
body::before{content:"";position:fixed;inset:0 0 auto 0;height:3px;z-index:100;background:linear-gradient(90deg,var(--marron),var(--noir));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline: scroll()){
body::before{animation:fluid-grow linear both;animation-timeline:scroll(root)}
@keyframes fluid-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
/* ---------- en-tête collant : logo à gauche, liens à droite ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px var(--gutter);color:var(--noir);background:transparent;border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s,box-shadow .3s}
.est-defile .site-header{background:color-mix(in srgb,var(--beige) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:color-mix(in srgb,var(--noir) 10%,transparent);box-shadow:0 6px 20px -14px color-mix(in srgb,var(--noir) 40%,transparent)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
html{scroll-padding-top:80px}
.site-logo{display:block;flex:none;width:clamp(58px,6vw,74px);aspect-ratio:384/256;background:currentColor;-webkit-mask:url(../images/logo-fluid.png) center/contain no-repeat;mask:url(../images/logo-fluid.png) center/contain no-repeat;transition:opacity .2s}
.site-logo:hover{opacity:.75}
.site-header .wp-block-navigation{margin-left:auto;justify-content:flex-end;gap:4px 18px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.site-header .wp-block-navigation-item__content{padding-block:4px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s}
.site-header .wp-block-navigation-item__content:hover{background-size:100% 1px}
/* ---------- menu mobile : bouton « Menu » puis page pleine, croix centrée en bas ---------- */
.menu-ouvrir,.menu-mobile:not([open]){display:none}
@media (max-width:599px){
.site-header .wp-block-navigation{display:none}
.menu-ouvrir{margin-left:auto;display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:6px 0;color:var(--noir);font:inherit;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.burger{position:relative;width:22px;height:10px;border-block:1.5px solid currentColor}
}
html.menu-ouvert{overflow:hidden}
.menu-mobile{box-sizing:border-box;position:fixed;inset:0;width:100%;height:100%;overflow-y:auto;max-width:none;max-height:none;margin:0;border:0;padding:calc(88px + env(safe-area-inset-top,0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));background:var(--noir);color:var(--beige)}
.menu-mobile[open]{display:grid;grid-template-rows:1fr auto auto;gap:var(--space-m);justify-items:center;text-align:center}
.menu-mobile::backdrop{background:transparent}
.menu-mobile ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-s);align-content:center}
.menu-mobile nav{display:grid}
.menu-mobile nav a{color:inherit;text-decoration:none;font-stretch:75%;font-weight:700;text-transform:uppercase;font-size:clamp(34px,10vw,56px);line-height:1}
.menu-insta a{color:var(--marron);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.menu-fermer{position:relative;width:56px;height:56px;border-radius:50%;border:1.5px solid currentColor;background:none;color:inherit;cursor:pointer}
.menu-fermer span::before,.menu-fermer span::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg}
.menu-fermer span::after{rotate:-45deg}
@media (prefers-reduced-motion:no-preference){
.menu-mobile[open]{animation:fluid-menu .35s cubic-bezier(.2,.7,.2,1)}
@keyframes fluid-menu{from{opacity:0;transform:translateY(12px)}}
}
/* ---------- texte manuscrit (style de paragraphe « Manuscrit ») ---------- */
.is-style-manuscrit{font-family:var(--script);font-weight:400;text-transform:none;line-height:1.2;letter-spacing:0;white-space:nowrap;color:var(--marron);pointer-events:none}
.head{position:relative;display:grid;gap:16px;margin-bottom:var(--space-m)}
.head .is-style-manuscrit{position:absolute;z-index:2;top:auto;bottom:calc(100% - .12em);left:0;right:auto;font-size:clamp(46px,8vw,100px)!important;text-align:left;transform:rotate(-6deg);transform-origin:0 100%}
.has-marron-background-color .is-style-manuscrit{color:var(--blanc)}
.has-noir-background-color .is-style-manuscrit{color:var(--marron)}
/* ---------- ouverture ---------- */
.hero{position:relative;padding:calc(96px + env(safe-area-inset-top,0px)) var(--gutter) 40px;display:grid;gap:28px}
.hero-photo{aspect-ratio:3/4;max-height:78svh;width:100%;justify-self:center}
.hero-photo img{object-position:50% 40%}
.hero-copy{display:grid;gap:var(--space-s)}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--marron) 62%,var(--marron) 92%,transparent 92%)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid currentColor;padding-top:14px}
.split > .wp-block-group{display:grid;gap:4px;align-content:start}
.time,.eyebrow{font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.time{display:inline-flex;align-items:center;gap:10px}
.time::before{content:"";width:28px;height:1px;background:currentColor}
.split-title{font-stretch:75%;font-weight:700;font-size:26px;text-transform:uppercase;line-height:1}
.split-sub{font-size:15px;opacity:.78}
.hero-meta{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;word-spacing:.4em}
@media (min-width:900px){
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;column-gap:56px;padding-bottom:72px}
.hero-photo{max-height:88svh;order:2}
.hero h1{text-wrap:nowrap}
}
/* très grands écrans : le texte se cale sur le bas de la photo */
@media (min-width:1600px){.hero{align-items:end}}
/* ---------- sections ---------- */
.band{padding:var(--space-section) var(--gutter)}
.wrap{max-width:1280px;margin-inline:auto;width:100%}
.row{display:grid;gap:var(--space-l)}
@media (min-width:900px){
.row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}
.row.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.row.flip > :first-child{order:2}
}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,20px)}
.pair .wp-block-image{aspect-ratio:3/4}
.pair .wp-block-image:nth-child(2){margin-top:clamp(40px,8vw,120px)}
.solo{aspect-ratio:3/4}
.solo.is-centered{max-width:560px;margin-inline:auto}
.text-col{display:grid;gap:var(--space-s);align-content:start}
.text-col > h3{margin-top:var(--space-xs)}
.quote{font-stretch:85%;font-size:clamp(23px,2.8vw,32px);line-height:1.25;max-width:24ch}
.has-noir-background-color .muted{opacity:.8}
.tag{display:inline-block;width:max-content;border:1.5px solid currentColor;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.wp-block-buttons{margin-top:0}
/* ---------- la cave ---------- */
.cave-intro{display:grid;gap:var(--space-l)}
.cave-intro .solo{aspect-ratio:4/5}
/* ordinateur : la photo prend la hauteur exacte de la colonne de texte */
@media (min-width:900px){
.cave-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.cave-intro .solo{aspect-ratio:auto;height:100%}
}
ul.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
ul.chips li{border:1px solid color-mix(in srgb,currentColor 45%,transparent);border-radius:999px;padding:5px 12px;font-size:12.5px;letter-spacing:.04em}
ul.chips li:last-child{background:var(--noir);border-color:var(--noir);color:var(--beige);font-weight:500}
/* familles : blocs gauche / droite, défilement inversé */
.familles{margin-top:clamp(80px,12vw,160px);display:grid;gap:clamp(72px,11vw,150px)}
.fam{--amp:22px;display:grid;gap:22px;view-timeline-name:--fam}
.fam-ph{aspect-ratio:4/5}
.fam-txt{display:grid;gap:var(--space-xs);align-content:center}
@media (min-width:900px){
.fam{--amp:70px;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.fam:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
.fam:nth-child(even) .fam-ph{order:2}
.fam-ph{max-height:92svh;width:100%}
}
.note{font-size:13px;opacity:.8;margin-top:clamp(56px,8vw,96px);max-width:70ch;border-top:1px solid color-mix(in srgb,currentColor 30%,transparent);padding-top:16px}
/* ---------- dégustations (boucle de requête « Dégustations à venir ») ---------- */
.events > .wp-block-post-template{display:grid;gap:clamp(18px,2.4vw,28px);list-style:none;margin:0;padding:0}
@media (min-width:760px){.events > .wp-block-post-template{grid-template-columns:repeat(3,minmax(0,1fr))}}
.event{display:grid;grid-template-rows:auto 1fr;gap:14px;border-top:1.5px solid currentColor;padding-top:14px;height:100%}
.event-ph{aspect-ratio:4/3;margin:0}
.event-body{display:grid;gap:10px;align-content:start}
.event-date{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.event .wp-block-post-title{font-size:clamp(26px,2.8vw,34px)}
.event .wp-block-post-excerpt{font-size:15px;opacity:.8;margin:0}
.event .wp-block-post-excerpt__excerpt{margin:0}
details.cal{margin-top:6px}
details.cal summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;background:var(--noir);color:var(--beige);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:13px 18px;border-radius:999px}
details.cal summary::-webkit-details-marker{display:none}
details.cal summary::after{content:"+"}
details.cal[open] summary::after{content:"–"}
details.cal summary:hover{background:var(--marron);color:var(--noir)}
details.cal .wp-block-buttons{margin-top:8px;gap:6px;background:var(--blanc);border-radius:14px;padding:6px;width:max-content;max-width:100%;flex-direction:column;align-items:stretch}
details.cal .wp-block-button__link{background:transparent;color:var(--noir);text-transform:none;letter-spacing:0;font-weight:500;font-size:14px;border-radius:10px;padding:10px 12px;text-align:left}
details.cal .wp-block-button__link:hover{background:var(--beige)}
.no-events{font-size:var(--wp--preset--font-size--large)}
/* ---------- passe nous voir ---------- */
.adresse{font-stretch:75%;text-transform:uppercase;font-weight:700;font-size:clamp(30px,4.4vw,52px);line-height:.98}
.wp-block-table.horaires{margin:0;max-width:420px}
.wp-block-table.horaires table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
.wp-block-table.horaires td{border:0;border-bottom:1px solid color-mix(in srgb,currentColor 30%,transparent);padding:9px 0}
.wp-block-table.horaires td:last-child{text-align:right}
/* ---------- pied de page ---------- */
.site-footer{padding:clamp(56px,8vw,100px) var(--gutter) 28px}
.site-footer .facade{width:min(520px,100%);margin:0 auto clamp(40px,6vw,72px)}
.site-footer .facade img{width:100%;height:auto}
.footer-cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);padding-top:18px}
/* ---------- pages simples (mentions légales, dégustation seule) ---------- */
.page-simple{padding:clamp(110px,14vw,170px) var(--gutter) clamp(64px,8vw,110px)}
.page-simple > *{max-width:760px;margin-inline:auto}
.page-simple .wp-block-post-content > * + *{margin-top:1em}
/* ---------- mouvement au défilement (CSS natif, sans JavaScript) ---------- */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){
.rise{animation:fluid-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
@keyframes fluid-rise{from{transform:translateY(28px)}to{transform:none}}
.head .is-style-manuscrit{animation:fluid-write linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
@keyframes fluid-write{from{clip-path:inset(-30% 100% -30% -5%)}to{clip-path:inset(-30% -5% -30% -5%)}}
.zoom img{animation:fluid-zoom linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
@keyframes fluid-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.fam-ph{animation:fluid-monte linear both;animation-timeline:--fam;animation-range:cover 0% cover 100%}
.fam-txt{animation:fluid-descend linear both;animation-timeline:--fam;animation-range:cover 0% cover 100%}
@keyframes fluid-monte{from{transform:translateY(var(--amp))}to{transform:translateY(calc(var(--amp) * -1))}}
@keyframes fluid-descend{from{transform:translateY(calc(var(--amp) * -1))}to{transform:translateY(var(--amp))}}
}
@view-transition{navigation:auto}
}
/* ---------- moment de la journée (data-moment posé par fluid.js, heure de Toulouse) ---------- */
.hero{transition:background-color .8s ease}
[data-moment="soir"] .hero{background-color:color-mix(in srgb,var(--beige) 62%,var(--marron))}
[data-moment="matin"] .split-cafe .time::after,[data-moment="soir"] .split-cave .time::after{content:"En ce moment";margin-left:4px;padding:3px 8px;border-radius:999px;background:var(--noir);color:var(--beige);font-size:10.5px;letter-spacing:.12em}
[data-moment="soir"] .split-cave .time::before{background:var(--noir)}
/* ---------- bandeau de marques qui défile ---------- */
ul.chips.is-marquee{flex-wrap:nowrap;width:max-content;animation:fluid-defile 38s linear infinite}
ul.chips.is-marquee li{white-space:nowrap}
ul.chips.is-marquee li:last-child{background:transparent;border-color:color-mix(in srgb,currentColor 45%,transparent);color:inherit;font-weight:400}
@keyframes fluid-defile{to{transform:translateX(calc(-50% - 4px))}}
ul.chips.is-marquee:hover{animation-play-state:paused}
.defile-cadre{overflow:hidden;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
@media (prefers-reduced-motion:reduce){
ul.chips.is-marquee{animation:none;flex-wrap:wrap;width:auto}
ul.chips.is-marquee li[aria-hidden]{display:none}
.defile-cadre{-webkit-mask-image:none;mask-image:none}
}
/* ---------- titres ligne par ligne ---------- */
.js-lignes .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.js-lignes .wi{display:inline-block;transform:translateY(105%);transition:transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--ligne,0) * 110ms)}
.js-lignes .is-in .wi{transform:none}
/* ---------- Abba marche en tirant la barre de progression ---------- */
/* Silhouette en masque : sa couleur (--abba) s'inverse selon le fond qu'elle traverse (classe abba-clair posée par fluid.js).
Pattes et queue animées seulement pendant le défilement (abba-marche), demi-tour quand on remonte (abba-recule). */
:root{--abba:var(--noir)}
.abba-clair{--abba:var(--beige)}
body::after{content:"";position:fixed;top:4px;left:0;z-index:101;width:34px;height:17px;pointer-events:none;background:var(--abba);transition:background-color .3s;-webkit-mask:url("data:image/svg+xml,") no-repeat center/contain;mask:url("data:image/svg+xml,") no-repeat center/contain;display:none}
.abba-marche body::after{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.abba-recule body::after{transform:scaleX(-1)}
/* Ordinateur uniquement : en bas de l'écran, barre à la hauteur d'Abba, qu'elle tire à 3px derrière elle.
Sur mobile, pas d'Abba : seule la fine barre en haut reste. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
@supports (animation-timeline: scroll()){
body::before{inset:auto auto 0 0;height:20px;width:100vw;transform:none;background:var(--abba);transition:background-color .3s;border-radius:0 999px 999px 0;animation:fluid-grow-bas linear both;animation-timeline:scroll(root)}
/* la barre glisse : son bout reste toujours à 3px derrière Abba */
@keyframes fluid-grow-bas{from{translate:calc(-100vw - 3px) 0}to{translate:-43px 0}}
body::after{display:block;top:auto;bottom:0;width:40px;height:20px;animation:fluid-abba-avance-bas linear both;animation-timeline:scroll(root)}
@keyframes fluid-abba-avance-bas{from{translate:0 0}to{translate:calc(100vw - 40px) 0}}
}
}
/* ---------- boutons aimantés + appui ---------- */
.aimant{transition:translate .35s cubic-bezier(.2,.7,.2,1),background-color .25s,color .25s,scale .15s}
.wp-block-button__link:active,details.cal summary:active{scale:.96}