/* ESSAI « effets resto » v29 (08/11/2026) : propositions de héros A · B · C + sélecteur.
   v29 = A et C refaites : fond flou du plat sur TOUT le héros, chaque élément à une place précise, vraie mise en page téléphone.
   Règle : rien ne bouge en continu avec la souris ; animations à l'arrivée, au clic, au survol local ou au défilement. */
.prop #essai-photo,.prop .phrase-devis{display:none!important}
.vue-apercu #essai-photo,.vue-apercu #props-heros{display:none!important}
#props-heros{position:fixed;left:14px;bottom:14px;z-index:99999;padding:10px;border-radius:12px;background:rgba(18,13,10,.95);
  border:1px solid rgba(239,214,162,.3);color:#f3eadc;font:13px/1.3 system-ui,sans-serif;box-shadow:0 12px 40px rgba(0,0,0,.45)}
#props-heros .t{font-weight:600;margin:0 0 6px}
#props-heros .l{display:flex;gap:6px;flex-wrap:wrap}
#props-heros button{font:inherit;color:inherit;cursor:pointer;padding:6px 10px;border-radius:8px;background:transparent;border:1px solid rgba(239,214,162,.3)}
#props-heros button[aria-pressed="true"]{background:#ad976b;border-color:#ad976b;color:#17120d;font-weight:600}
@media(max-width:720px){#props-heros{bottom:84px;left:8px;right:8px}#props-heros .t{display:none}}

/* ---------- commun A et C ---------- */
.prop-A .hero-media,.prop-C .hero-media{display:none!important}
/* fond : le plat affiché, flou et chaud, sur tout le héros (change avec le plat) */
.fond-flou{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg)}
.fond-flou i{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(46px) saturate(1.35) brightness(.5);
  opacity:0;transition:opacity 1.1s ease}
.fond-flou i.vu{opacity:1}
.fond-flou::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at var(--fx,72%) 50%,color-mix(in srgb,var(--pc,#5a3a1e) 45%,transparent),transparent 70%),
             linear-gradient(90deg,color-mix(in srgb,var(--bg) 88%,transparent) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 42%,color-mix(in srgb,var(--bg) 25%,transparent) 100%),
             linear-gradient(to bottom,transparent 70%,var(--bg) 100%);transition:background 1s}
@property --pc{syntax:'<color>';inherits:true;initial-value:#5a3a1e}
.prop-A .hero,.prop-C .hero{transition:--pc 1.1s ease}
/* pastille des horaires sur une ligne, dans la colonne de texte */
.prop-A .hero .statut-carte,.prop-C .hero .statut-carte{position:static!important;display:inline-flex!important;align-items:center;gap:10px;flex-wrap:wrap;
  width:auto!important;max-width:100%!important;margin:16px 0 0!important;padding:9px 16px!important;border-radius:999px!important;text-align:left!important;
  background:color-mix(in srgb,var(--bg) 55%,transparent)!important;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent)!important;
  -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;translate:none!important;transform:none!important;box-shadow:none!important;bottom:auto!important;left:auto!important;right:auto!important}
.prop-A .hero .statut-carte > *,.prop-C .hero .statut-carte > *{margin:0!important}
.prop-A .hero .statut-label,.prop-C .hero .statut-label{font-size:14px!important}
.prop-A .hero .statut-sub,.prop-C .hero .statut-sub{font-size:13px!important}
.prop-A .hero .statut-sep,.prop-C .hero .statut-sep,.prop-A .hero .statut-lien,.prop-C .hero .statut-lien{display:none!important}
.prop-A .hero .statut-carte,.prop-C .hero .statut-carte{cursor:pointer;flex-wrap:nowrap}
/* ruban Facebook : jamais à une place calculée par le modèle */
.prop-A .hero .fb-ruban,.prop-C .hero .fb-ruban{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;translate:none!important}
.prop-A .hero .note-google,.prop-C .hero .note-google{translate:none!important}

/* ============ A · ASSIETTE ============ */
@media(min-width:901px){
  .prop-A .hero{display:flex!important;align-items:center}
  .prop-A .hero > .wrap{display:flex;align-items:center;justify-content:space-between;gap:3vw;width:100%}
  .pa-gauche{flex:0 1 45%;min-width:0}
  .pa-gauche h1{font-size:clamp(44px,5.3vw,86px)!important}
  .pa-gauche .tagline{max-width:34ch}
  .pa-droite{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:18px}
  .prop-A .hero .fb-ruban{margin:0!important}
}
.pa-scene{position:relative;width:calc(var(--D,420px) + 120px);aspect-ratio:1}
.pa-anneau{position:absolute;inset:0;width:100%;height:100%;rotate:var(--rot2,0deg);overflow:visible;animation:pa-anneau-in 1.6s cubic-bezier(.2,.7,.2,1) .4s both}
.pa-anneau text{font:500 5.2px var(--body,system-ui);letter-spacing:0;fill:color-mix(in srgb,var(--accent) 80%,transparent);text-transform:uppercase}
.pa-anneau circle{fill:none;stroke:color-mix(in srgb,var(--accent) 40%,transparent);stroke-width:.35}
@keyframes pa-anneau-in{from{opacity:0;transform:rotate(-60deg) scale(.94)}to{opacity:1;transform:none}}
.pa-assiette{position:absolute;inset:60px;border-radius:50%;rotate:var(--rot,0deg);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.85),0 0 0 10px rgba(245,237,226,.05),0 0 0 11px rgba(245,237,226,.1);
  animation:pa-roule 1.4s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes pa-roule{from{opacity:0;transform:translateX(30%) rotate(80deg) scale(.9)}to{opacity:1;transform:none}}
.pa-img{position:absolute;inset:0;border-radius:50%;background-size:cover;background-position:center}
.pa-img.entre{animation:pa-entre 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes pa-entre{from{opacity:0;transform:rotate(-70deg) scale(.86)}to{opacity:1;transform:none}}
.pa-img.sort{animation:pa-sort .8s ease both}
@keyframes pa-sort{to{opacity:0;transform:rotate(40deg) scale(1.04)}}
.pa-choix button{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;padding:0;cursor:pointer;background-size:cover;background-position:center;
  border:2px solid rgba(245,237,226,.2);box-shadow:0 10px 24px -8px rgba(0,0,0,.8);transition:scale .3s,border-color .3s;animation:pa-pastille .7s cubic-bezier(.2,.7,.2,1) both}
.pa-choix button:nth-child(1){animation-delay:1.2s}.pa-choix button:nth-child(2){animation-delay:1.32s}.pa-choix button:nth-child(3){animation-delay:1.44s}
@keyframes pa-pastille{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
.pa-choix button:hover{scale:1.1}
.pa-choix button[aria-pressed="true"]{border-color:var(--accent);scale:1.14}
.pa-onde{position:absolute;z-index:1;width:var(--D,420px);aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);
  pointer-events:none;translate:-50% -50%;animation:pa-onde 1.8s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes pa-onde{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(4.2)}}
/* téléphone : le visuel d'abord, puis le nom, le texte, le bouton, puis les infos */
@media(max-width:900px){
  .prop-A .hero > .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
  .pa-gauche,.pa-droite{display:contents}
  .pa-scene{order:1;width:calc(var(--D,220px) + 64px);margin:0 auto 66px}
  .pa-assiette{inset:32px;box-shadow:0 30px 60px -24px rgba(0,0,0,.85),0 0 0 7px rgba(245,237,226,.05)}
  .pa-anneau text{font-size:7.6px}
  .prop-A .hero .eyebrow{order:2}.prop-A .hero h1{order:3}.prop-A .hero .tagline{order:4}.prop-A .hero .cta-row{order:5}
  .prop-A .hero .note-google{order:6;justify-content:center}.prop-A .hero .statut-carte{order:7;margin:14px auto 0!important;justify-content:center}
  .prop-A .hero .fb-ruban{order:8;margin:16px auto 0!important}
  .pa-choix{position:absolute;left:0;right:0;bottom:-58px;display:flex;justify-content:center;gap:14px}
  .pa-choix button{position:relative;left:auto!important;top:auto!important;margin:0;width:42px;height:42px}
  html.prop-A body .hero.avec-photo{padding-bottom:84px!important}
}

/* ============ B · GRAND TITRE ============ */
.prop-B .hero-media{display:none!important}
.prop-B .hero{background:radial-gradient(60% 90% at 30% 45%,color-mix(in srgb,var(--accent) 18%,var(--bg)),var(--bg) 70%)!important}
.prop-B .hero h1{display:none!important}
.pb-titre{margin:4px 0 18px;filter:drop-shadow(0 22px 30px rgba(0,0,0,.55));cursor:pointer;transform-origin:left center;
  transform:scale(calc(1 + var(--pbs,0) * .12));line-height:.86}
.pb-titre{white-space:nowrap}
.pb-l{position:relative;display:inline-block;width:max-content;font:600 clamp(52px,11.4vw,196px)/.95 var(--display);letter-spacing:-.045em;color:var(--accent)}
.pb-l.pb-it{font-style:italic;font-weight:400;margin-left:.22em}
.pb-l::after{content:attr(data-t);position:absolute;inset:0;background-image:var(--pb-img);background-size:var(--pb-taille,190%) auto;-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 55%,transparent);
  background-position:center calc(50% + var(--pbs,0) * 30%);-webkit-background-clip:text;background-clip:text;color:transparent;
  clip-path:inset(0 100% 0 0);animation:pb-remplit 1.5s cubic-bezier(.6,0,.2,1) var(--pb-delai,.35s) forwards;transition:background-size 1.2s ease}
.pb-l.pb-it::after{--pb-delai:.6s}
@keyframes pb-remplit{to{clip-path:inset(0 0 0 0)}}
.pb-titre:hover .pb-l::after{--pb-taille:220%}
.pb-titre.rejoue .pb-l::after{animation:pb-remplit2 1.1s cubic-bezier(.6,0,.2,1) forwards}
.pb-titre.rejoue .pb-l.pb-it::after{animation-delay:.12s}
@keyframes pb-remplit2{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.pb-indice{display:block;margin:-8px 0 14px;font:500 .66rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 75%,transparent)}
@media(min-width:901px){.prop-B .hero > .wrap > .pb-titre{max-width:none}}
@media(max-width:900px){.pb-titre{transform-origin:center;text-align:center;white-space:normal}.pb-l{display:block;margin:0 auto;font-size:clamp(56px,17vw,110px)}.pb-l.pb-it{margin-left:auto}.pb-indice{text-align:center}}

/* ============ C · PANNEAUX ============ */
.pc-panneaux{position:absolute;z-index:1;top:0;bottom:0;right:0;width:54%;display:flex;gap:3px}
.pc-p{position:relative;flex:1;min-width:0;border:0;padding:0;cursor:pointer;overflow:hidden;background:#000;
  transition:flex .9s cubic-bezier(.2,.7,.2,1);clip-path:inset(100% 0 0 0);animation:pc-monte 1.1s cubic-bezier(.2,.7,.2,1) both}
.pc-p:nth-child(1){animation-delay:.25s}.pc-p:nth-child(2){animation-delay:.38s}.pc-p:nth-child(3){animation-delay:.51s}.pc-p:nth-child(4){animation-delay:.64s}
@keyframes pc-monte{to{clip-path:inset(0 0 0 0)}}
.pc-p > span{position:absolute;inset:-3%;background-size:cover;background-position:center;filter:saturate(.5) brightness(.55);
  transition:filter .9s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.pc-p::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--accent) 40%,transparent),transparent 65%);
  mix-blend-mode:multiply;transition:opacity .9s ease}
.pc-p.ouvert{flex:2.8}
.pc-p.ouvert > span{filter:saturate(1.05) brightness(1);transform:scale(1.04)}
.pc-p.ouvert::after{opacity:0}
.pc-p em{position:absolute;left:22px;bottom:22px;z-index:2;font:500 .7rem/1 var(--body,system-ui);font-style:normal;letter-spacing:.2em;text-transform:uppercase;
  color:#fff6e8;text-shadow:0 1px 8px rgba(0,0,0,.6);opacity:0;translate:0 8px;transition:opacity .5s ease,translate .5s ease;white-space:nowrap}
.pc-p.ouvert em{opacity:1;translate:none;transition-delay:.45s}
.pc-p:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.prop-C .pc-panneaux .fb-ruban{position:absolute!important;right:22px!important;left:auto!important;top:22px!important;bottom:auto!important;z-index:3;margin:0!important}
.prop-C .pc-panneaux::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 60%,transparent),transparent)}
@media(min-width:901px){
  .prop-C .hero{display:flex!important;align-items:center}
  .prop-C .hero > .wrap{width:100%}
  .pc-gauche{width:min(420px,35vw)}
  .prop-C .hero .fleche-bas{left:23%!important}
  .pc-gauche h1{font-size:clamp(44px,4.9vw,80px)!important}
  .pc-gauche .tagline{max-width:32ch}
}
@media(max-width:900px){
  html.prop-C body .hero.avec-photo{padding-top:0!important;padding-bottom:84px!important}
  .pc-panneaux{position:relative;width:auto;height:min(44svh,360px);margin:0 0 26px}
  .pc-p{clip-path:none;animation:pc-fondu .9s ease both}
  @keyframes pc-fondu{from{opacity:0}to{opacity:1}}
  .pc-p em{left:14px;bottom:14px;font-size:.62rem}
  .prop-C .pc-panneaux .fb-ruban{right:12px!important;top:12px!important}
  .prop-C .pc-panneaux::before{display:none}
  .prop-C .hero .note-google{justify-content:center}
  .prop-C .hero .statut-carte{margin:14px auto 0!important;justify-content:center}
  .pc-gauche{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .pa-assiette,.pa-anneau,.pa-img.entre,.pa-img.sort,.pa-choix button,.pa-onde,.pc-p{animation:none!important;clip-path:none}
  .pb-l::after{animation:none!important;clip-path:none}
}
/* B : réglages communs repris de la v28 */
@media(min-width:901px){
  .prop-B .hero .fb-ruban{position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;translate:none!important;margin:22px 0 0!important}
  .prop-B .hero > .wrap > :not(.statut-carte):not(script):not(.pb-titre){max-width:min(560px,46vw)}
  .prop-B .hero .statut-carte{z-index:5}
}
/* téléphone (A et C) : pastille des horaires sur une seule ligne (toute la pastille mène déjà aux horaires) */
@media(max-width:900px){
  .prop-A .hero .statut-carte,.prop-C .hero .statut-carte{margin-top:20px!important;padding:9px 16px!important}
  .prop-A .hero .statut-sep,.prop-C .hero .statut-sep,.prop-A .hero .statut-lien,.prop-C .hero .statut-lien{display:none!important}
}

/* =====================================================================
   v30 (08/11/2026) : A2 · Assiette intégrée et C2 · Panneaux en fond — sans flou, plus courts sur téléphone
   ===================================================================== */
.prop-A2 .hero-media,.prop-C2 .hero-media{display:none!important}
.prop-A2 .hero .statut-carte,.prop-C2 .hero .statut-carte{position:static!important;display:inline-flex!important;align-items:center;gap:10px;flex-wrap:nowrap;cursor:pointer;
  width:auto!important;max-width:100%!important;margin:16px 0 0!important;padding:9px 16px!important;border-radius:999px!important;text-align:left!important;
  background:color-mix(in srgb,var(--bg) 55%,transparent)!important;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent)!important;
  -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;translate:none!important;transform:none!important;box-shadow:none!important;bottom:auto!important;left:auto!important;right:auto!important}
.prop-A2 .hero .statut-carte > *,.prop-C2 .hero .statut-carte > *{margin:0!important}
.prop-A2 .hero .statut-label,.prop-C2 .hero .statut-label{font-size:14px!important}
.prop-A2 .hero .statut-sub,.prop-C2 .hero .statut-sub{font-size:13px!important}
.prop-A2 .hero .statut-sep,.prop-C2 .hero .statut-sep,.prop-A2 .hero .statut-lien,.prop-C2 .hero .statut-lien{display:none!important}
.prop-A2 .hero .fb-ruban,.prop-C2 .hero .fb-ruban{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;translate:none!important}
.prop-A2 .hero .note-google,.prop-C2 .hero .note-google{translate:none!important}

/* ---------- A2 · Assiette intégrée ---------- */
.prop-A2 .hero{transition:--pc 1.1s ease;
  background:radial-gradient(60% 80% at var(--cx,72%) var(--cy,50%),color-mix(in srgb,var(--pc) 72%,var(--bg)) 0%,color-mix(in srgb,var(--pc) 24%,var(--bg)) 46%,var(--bg) 80%)!important}
/* fins cercles concentriques qui partent de l'assiette (l'écho de l'assiette sur tout le héros) */
.a2-cercles{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-radial-gradient(circle at var(--cx,72%) var(--cy,50%),transparent 0 calc(var(--pas,64px) - 1px),rgba(239,214,162,.07) calc(var(--pas,64px) - 1px) var(--pas,64px));
  -webkit-mask-image:radial-gradient(circle at var(--cx,72%) var(--cy,50%),#000 30%,transparent 75%);mask-image:radial-gradient(circle at var(--cx,72%) var(--cy,50%),#000 30%,transparent 75%);
  animation:a2-cercles 1.6s ease .3s both}
@keyframes a2-cercles{from{opacity:0}to{opacity:1}}
.prop-A2 .hero > .wrap{display:flow-root;position:relative;z-index:2}
.a2 .pa-assiette{cursor:pointer}
@media(min-width:901px){
  .prop-A2 .hero{display:flex!important;align-items:center}
  .prop-A2 .hero > .wrap{width:100%}
  .a2.pa-scene{float:right;shape-outside:circle(calc(50% - 30px));shape-margin:30px;margin:0 40px 0 10px}
  .prop-A2 .hero h1{font-size:clamp(48px,5.8vw,94px)!important}
  .prop-A2 .hero .fb-ruban{margin:16px 0 0!important}
}
@media(max-width:900px){
  .prop-A2 .hero > .wrap{text-align:left!important}
  .a2.pa-scene{float:right;width:calc(var(--D,128px) + 40px);margin:4px -34px 6px 4px;shape-outside:circle(50%);shape-margin:8px}
  .a2 .pa-assiette{inset:20px;box-shadow:0 18px 36px -14px rgba(0,0,0,.85),0 0 0 5px rgba(245,237,226,.05)}
  .a2 .pa-anneau text{font-size:9.5px}
  .a2 .pa-choix{display:none}
  .prop-A2 .hero h1{text-align:left!important;font-size:clamp(40px,12vw,52px)!important;line-height:1.02!important;margin:6px 0 10px!important}
  .prop-A2 .hero .eyebrow{justify-content:flex-start!important;text-align:left!important}
  .prop-A2 .hero .tagline{text-align:left!important;margin-left:0!important;margin-right:0!important}
  .prop-A2 .hero .cta-row{justify-content:flex-start!important;clear:both}
  .prop-A2 .hero .note-google{justify-content:flex-start!important}
  .prop-A2 .hero .statut-carte{margin:14px 0 0!important}
  .prop-A2 .hero .fb-ruban{margin:14px 0 0!important}
  .a2-astuce{display:block;clear:right;float:right;width:140px;margin:-2px -20px 4px 4px;text-align:center;font:500 .58rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 80%,transparent)}
  html.prop-A2 body .hero.avec-photo{padding-bottom:84px!important}
}
@media(min-width:901px){.a2-astuce{display:none}}

.prop-A2 .hero h1 em{white-space:nowrap}

/* ---------- C2 · Panneaux en fond ---------- */
.prop-C2 .hero{background:radial-gradient(70% 90% at 15% 50%,color-mix(in srgb,var(--accent) 12%,var(--bg)),var(--bg) 70%)!important}
.c2.pc-panneaux{width:62%}
.c2.pc-panneaux::before{width:46%!important;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 75%,transparent) 35%,transparent 100%)!important}
.prop-C2 .hero > .wrap{position:relative;z-index:2}
@media(min-width:901px){
  .prop-C2 .hero{display:flex!important;align-items:center}
  .prop-C2 .hero > .wrap{width:100%}
  .prop-C2 .pc-gauche{width:min(480px,40vw)}
  .prop-C2 .pc-gauche h1{font-size:clamp(46px,5.2vw,86px)!important;text-shadow:0 4px 24px rgba(0,0,0,.45)}
  .prop-C2 .hero .fleche-bas{left:21%!important}
  .prop-C2 .c2 .fb-ruban{position:absolute!important;right:22px!important;top:22px!important;left:auto!important;bottom:auto!important;z-index:3;margin:0!important}
}
@media(max-width:900px){
  html.prop-C2 body .hero.avec-photo{padding-top:0!important;padding-bottom:84px!important;display:flex!important;flex-direction:column;justify-content:flex-end}
  .c2.pc-panneaux{position:absolute;inset:0;width:auto;height:auto;margin:0}
  .c2.pc-panneaux::before{display:none}
  .c2-voile{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to top,var(--bg) 0%,var(--bg) 34%,color-mix(in srgb,var(--bg) 70%,transparent) 52%,transparent 78%)}
  .c2 .pc-p{clip-path:none;animation:pc-fondu .9s ease both}
  .c2 .pc-p em{top:14px;bottom:auto;left:12px;font-size:.6rem}
  .prop-C2 .pc-gauche{text-align:center}
  .prop-C2 .hero .note-google{justify-content:center}
  .prop-C2 .hero .statut-carte{margin:14px auto 0!important}
  .prop-C2 .hero .fb-ruban{margin:14px auto 0!important}
  .prop-C2 .hero h1{text-shadow:0 4px 20px rgba(0,0,0,.6)}
}
@media(min-width:901px){.c2-voile{display:none}}
@media(prefers-reduced-motion:reduce){.a2-cercles{animation:none}}

/* =====================================================================
   v31 (08/11/2026) : D · Une photo vivante — une seule photo nette, zoom lent constant, petites lueurs dorées.
   (le JS ajoute aussi la classe prop-C2 pour reprendre sa mise en page : texte posé sur le bas de la photo sur téléphone)
   ===================================================================== */
.prop-D .hero-media{display:block!important}
.prop-D .hero{background:var(--bg)!important}
.prop-D .hero-media img{animation:eveil 1.3s cubic-bezier(.2,.7,.2,1) both,d-respire 24s ease-in-out 1.3s infinite alternate!important;object-position:var(--d-pos,50% 50%)}
@keyframes d-respire{from{scale:1.06}to{scale:1.17}}
.prop-D .hero-media::before{display:none!important}
html.prop-D .hero-media .voile{background:
  linear-gradient(100deg,color-mix(in srgb,var(--bg) 90%,transparent) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 36%,transparent 70%),
  linear-gradient(to bottom,transparent 65%,var(--bg) 100%)!important}
html.prop-D .hero-media::after{opacity:.5}
/* petites lueurs dorées qui montent doucement */
.d-lueurs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.d-lueurs i{position:absolute;bottom:-20px;width:var(--t,10px);height:var(--t,10px);border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,150,.9) 0%,rgba(255,190,110,.35) 45%,transparent 70%);filter:blur(1px);opacity:0;
  animation:d-monte var(--d,14s) linear var(--r,0s) infinite}
@keyframes d-monte{0%{opacity:0;transform:translate(0,0)}15%{opacity:var(--o,.5)}80%{opacity:var(--o,.5)}100%{opacity:0;transform:translate(var(--x,20px),calc(-1 * var(--h,320px)))}}
@media(max-width:900px){
  html.prop-D .hero-media .voile{background:linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 92%,transparent) 26%,color-mix(in srgb,var(--bg) 62%,transparent) 48%,color-mix(in srgb,var(--bg) 18%,transparent) 70%,transparent 86%),
    linear-gradient(to bottom,color-mix(in srgb,var(--bg) 45%,transparent) 0%,transparent 18%)!important}
  html.prop-D .hero-media::after{display:none}
  .prop-D .hero h1{text-shadow:0 4px 22px rgba(0,0,0,.6)}
  .prop-D .hero .tagline{text-shadow:0 2px 12px rgba(0,0,0,.75)}
}
@media(prefers-reduced-motion:reduce){.prop-D .hero-media img{animation:none!important}.d-lueurs{display:none}}
/* v32 : logo « LOUISE » dans le héros D */
.d-logo{display:block;height:clamp(78px,11vh,112px);width:auto;margin:0 0 14px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
  animation:d-logo-in 1.2s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes d-logo-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:900px){.d-logo{height:96px;margin:0 auto 12px}}
@media(prefers-reduced-motion:reduce){.d-logo{animation:none}}

/* =====================================================================
   v33 (08/11/2026) : E · Photo → assiette. Héros d'origine + photo nette avec zoom très léger continu ;
   au défilement la photo se rétrécit, s'arrondit et tourne jusqu'à devenir une assiette posée en haut de la ligne dorée.
   ===================================================================== */
.prop-E .hero-media img:not(.e-pret){opacity:0;animation:none!important}
.prop-E .hero-media img.e-pret{animation:e-eveil 1.3s cubic-bezier(.2,.7,.2,1) both,e-respire 20s ease-in-out 1.3s infinite alternate!important}
@keyframes e-eveil{from{scale:1.06;filter:blur(6px) brightness(.5) saturate(.7)}to{scale:1.06;filter:none}}   /* v39 : finit à 1.06 = départ du zoom lent (plus de saut) */
@keyframes e-respire{from{scale:1.06}to{scale:1.13}}
.prop-E .hero > .wrap{position:relative;z-index:2}
.e-assiette{position:absolute;z-index:1;pointer-events:none;opacity:0;background-repeat:no-repeat;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7);transition:box-shadow .6s ease}
.e-assiette::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:var(--voile,1);
  background:radial-gradient(circle,transparent 30%,rgba(28,20,16,.55) 70%)}
.e-assiette.posee{box-shadow:0 0 0 4px rgba(28,20,16,.9),0 0 0 5px var(--t1,#efd6a2),0 0 18px 2px rgba(226,191,126,.35),0 14px 30px -10px rgba(0,0,0,.8)}
/* la ligne dorée part de l'assiette : on retire le trait horizontal et l'arrondi du haut */
.prop-E.e-transition #fil-ligne,.prop-E.e-transition #fil-coin{display:none!important}
@media(prefers-reduced-motion:reduce){.prop-E .hero-media img{animation:none!important}.e-assiette{display:none}}
/* téléphone : la ligne passe un peu plus loin du bord pour que l'assiette posée dessus ne soit pas coupée */
.prop-E.e-transition #fil{left:var(--e-x,var(--fil-x,28px))!important}
.prop-E.e-transition .fil-noeud::after{width:calc(var(--trait,40px) - var(--e-dx,0px))!important}

/* =====================================================================
   v37 (08/11/2026) : 4 transitions discrètes à comparer (E + ?t=1..4)
   ===================================================================== */
.t-voile{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:var(--bg)}
html[class*="tr"] .prop-E .hero > .wrap,.prop-E.tr1 .hero > .wrap,.prop-E.tr2 .hero > .wrap,.prop-E.tr3 .hero > .wrap,.prop-E.tr4 .hero > .wrap{will-change:opacity,transform}
/* 1 · parallaxe + fondu : géré par le script */
/* 2 · rideau : le héros reste en place, la suite monte par-dessus */
html.tr2,html.tr2 body{overflow-x:clip!important;overflow-y:visible!important}
.tr2 .hero{position:sticky!important;z-index:0;scale:calc(1 - var(--p,0) * .04);transform-origin:50% 0}
.tr2 main > :not(.hero){position:relative;z-index:1;background-color:var(--bg)}
.tr2 .bande{border-radius:28px 28px 0 0;box-shadow:0 -24px 50px -20px rgba(0,0,0,.65);border-top:1px solid rgba(239,214,162,.14)}
/* 3 · la photo se resserre en carte */
.tr3 .hero-media{will-change:clip-path}
/* 4 · fondu flou */
.tr4 .hero-media{transform-origin:50% 40%}
@media(prefers-reduced-motion:reduce){.t-voile{display:none}}
/* v41 : le bandeau et la flèche RESTENT à leur place ; c'est la photo qui dépasse de 28 px sous le bandeau pour remplir ses coins arrondis */
.tr2 .hero{overflow:visible!important}
.tr2 .hero-media,.tr2 .t-voile{bottom:-28px!important}
.tr2 .hero{clip-path:inset(0 0 -28px 0)!important;-webkit-clip-path:inset(0 0 -28px 0)!important}
.tr2 .hero-media{clip-path:none!important;-webkit-clip-path:none!important}
/* v42 : en descendant, les bords de la photo se fondent dans la couleur sombre du site (plus de liseré clair) */
.tr2 .t-bords{position:absolute;inset:0 0 -28px;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 calc(var(--p,0) * 140px) calc(var(--p,0) * 50px) var(--bg);outline:3px solid var(--bg);outline-offset:-2px}
/* v42c : le héros ne rétrécit plus en descendant (c'est ce rétrécissement qui laissait voir un liseré sur les côtés) ; il s'assombrit et ses bords se fondent */
.tr2 .hero{scale:none!important}
/* v43 : bandeau défilant sans à-coups (calque graphique dédié, utile surtout pour Safari) */
.bande{contain:paint}
.bande-piste{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;animation-name:defile3d!important}
@keyframes defile3d{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* v43 : section « En images » remontée un peu, mieux placée sous l'angle de la ligne (ordinateur ; téléphone déjà serré) */
@media(min-width:721px){.bande + section.etape{padding-top:52px!important}}
/* v44 : logo dans la barre du haut */
#entete .brand a{display:inline-flex;align-items:center;gap:12px}
.logo-entete{height:56px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
@media(max-width:720px){.logo-entete{height:40px}#entete .brand a{gap:9px}}
.nom-entete{white-space:nowrap}
@media(max-width:720px){.logo-entete{height:34px}.nom-entete{font-size:1.05rem}}
@media(max-width:360px){.nom-entete{font-size:.95rem}}
/* v46 : barre du haut REMISE comme avant (v45 trop fine refusée) ; logo SEUL, plus grand et bien centré avec le menu */
.nom-entete{display:none!important}
#entete .brand{line-height:0}
#entete .brand a{gap:0}
#entete .brand a::after{display:none}
#entete .nav{align-items:center}
.logo-entete{height:50px!important;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
@media(min-width:861px){#entete .nav{padding-top:12px!important;padding-bottom:12px!important}}
@media(max-width:860px){.logo-entete{height:40px!important}}
/* v45 : Itinéraire, Facebook et horaires un peu plus « verre dépoli » pour bien lire le texte */
.hero .btn-ligne{background:color-mix(in srgb,var(--bg) 40%,transparent)!important;-webkit-backdrop-filter:blur(10px) saturate(1.1)!important;backdrop-filter:blur(10px) saturate(1.1)!important}
.fb-barre{background:color-mix(in srgb,var(--bg) 42%,transparent)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
.statut-carte{background:color-mix(in srgb,var(--bg) 42%,transparent)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
.hero .statut-carte.statut-bas{background:color-mix(in srgb,var(--bg) 50%,transparent)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
@media(max-width:860px){.hero .statut-carte:not(.statut-bas){background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
/* v48 : menu du haut un peu plus grand + section en cours allumée en doré (liée à la ligne) */
@media(min-width:861px){
  #entete .menu{gap:34px}
  #entete .menu a{font-size:1.06rem;letter-spacing:.015em}
  #entete .menu a::after{height:1px;bottom:-6px;background:var(--t1,#d9b26a);box-shadow:0 0 8px rgba(226,191,126,.55)}
  #entete .menu a.actif{color:var(--t1,#d9b26a)}
  #entete .menu a.actif::after{width:100%}
}
/* v49 : logo vectoriel + « à Table » (même style que le titre du héros), tout centré sur la même ligne */
#entete .brand a{display:inline-flex!important;align-items:center;gap:14px!important}
.logo-entete{height:50px!important;filter:none!important}
.marque-at{font-family:var(--display);font-style:italic;font-weight:400;color:var(--accent);font-size:1.7rem;line-height:1;white-space:nowrap;
  transform:translateY(-.06em);letter-spacing:.005em}
@media(max-width:860px){.logo-entete{height:40px!important}#entete .brand a{gap:10px!important}.marque-at{font-size:1.35rem}}
/* v50 : logo le plus grand possible dans la barre (petit espace dessus/dessous) ;
   en descendant jusqu'au bandeau défilant, la barre et le logo grossissent très légèrement (+10 px), sans décaler la page */
@media(min-width:861px){
  #entete .nav,#entete.scrolled .nav,header.scrolled .nav{padding-top:calc(6px + var(--g,0) * 5px)!important;padding-bottom:calc(6px + var(--g,0) * 5px)!important;transition:none!important}
  .logo-entete{height:62px!important}
}
@media(max-width:860px){
  #entete .nav,header.scrolled .nav{padding-top:calc(8.5px + var(--g,0) * 4px)!important;padding-bottom:calc(8.5px + var(--g,0) * 4px)!important;transition:none!important}
  .logo-entete{height:47px!important}
}
#entete{margin-bottom:calc(var(--g,0) * -10px)}
@media(max-width:860px){#entete{margin-bottom:calc(var(--g,0) * -8px)}}
.logo-entete{scale:calc(1 + var(--g,0) * .15);transform-origin:50% 50%}
@media(max-width:860px){.logo-entete{scale:calc(1 + var(--g,0) * .16)}}
.marque-at{margin-left:0}
/* v52 : chargement propre de la barre : le logo a sa taille avant même d'être chargé, et apparaît en fondu une fois bien placé */
.logo-entete{aspect-ratio:1476/2688;width:auto}
#entete .brand{opacity:0}
#entete .brand.logo-pret{opacity:1;transition:opacity .7s cubic-bezier(.2,.7,.2,1) .15s}
@media(prefers-reduced-motion:reduce){#entete .brand{opacity:1}}

/* =====================================================================
   v55 (08/11) : APERÇUS d'animations pour les photos de la galerie (?gal=2..5)
   ===================================================================== */
html[class*="gal-"] section.etape .galerie figure,html[class*="gal-"] section.etape.vue .galerie figure{animation:none!important;clip-path:none}
html[class*="gal-"] section.etape .galerie figure img,html[class*="gal-"] section.etape.vue .galerie figure img{animation:none!important}
/* 2 · Fondu montant en cascade */
html.gal-2 section.etape .galerie figure{opacity:0!important;translate:0 46px;scale:.97;
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),translate 1.2s cubic-bezier(.2,.7,.2,1),scale 1.2s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * .14s)}
html.gal-2 section.etape .galerie figure img{scale:1.08;transition:scale 1.6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * .14s)}
html.gal-2 section.etape .galerie figure.gvu{opacity:1!important;translate:0 0;scale:1}
html.gal-2 section.etape .galerie figure.gvu img{scale:1}
/* 3 · Fenêtre qui s'ouvre depuis le centre */
html.gal-3 section.etape .galerie figure{clip-path:inset(18% 18% 18% 18% round 14px)!important;opacity:0!important;
  transition:clip-path 1.3s cubic-bezier(.65,0,.15,1),opacity .8s ease;transition-delay:calc(var(--i,0) * .16s)}
html.gal-3 section.etape .galerie figure img{scale:1.3;transition:scale 1.8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * .16s)}
html.gal-3 section.etape .galerie figure.gvu{clip-path:inset(0 0 0 0 round 0)!important;opacity:1!important}
html.gal-3 section.etape .galerie figure.gvu img{scale:1}
/* 4 · Volet latéral (la photo glisse en sens inverse) */
html.gal-4 section.etape .galerie figure{clip-path:inset(0 100% 0 0)!important;
  transition:clip-path 1.2s cubic-bezier(.77,0,.18,1);transition-delay:calc(var(--i,0) * .18s)}
html.gal-4 section.etape .galerie figure img{translate:-12% 0;scale:1.15;transition:translate 1.6s cubic-bezier(.2,.7,.2,1),scale 1.6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * .18s)}
html.gal-4 section.etape .galerie figure.gvu{clip-path:inset(0 0 0 0)!important}
html.gal-4 section.etape .galerie figure.gvu img{translate:0 0;scale:1}
/* 5 · Flou qui devient net */
html.gal-5 section.etape .galerie figure{opacity:0!important;filter:blur(16px);scale:1.05;
  transition:opacity 1.1s ease,filter 1.3s cubic-bezier(.2,.7,.2,1),scale 1.4s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * .15s)}
html.gal-5 section.etape .galerie figure.gvu{opacity:1!important;filter:none;scale:1}
@media(prefers-reduced-motion:reduce){html[class*="gal-"] section.etape .galerie figure{opacity:1!important;clip-path:none!important;filter:none!important;translate:none;scale:none}}
/* v56 : volet latéral sans à-coups : calques graphiques dédiés, pas de transition parasite au chargement, survol sans conflit */
html.gal-4 section.etape .galerie figure{will-change:clip-path;transition-property:clip-path!important;overflow:hidden;backface-visibility:hidden}
html.gal-4 section.etape .galerie figure img{will-change:translate,scale;backface-visibility:hidden}
html.gal-4.js-attente section.etape .galerie figure,html.gal-4.js-attente section.etape .galerie figure img{transition:none!important}
html.gal-4 .galerie figure.gvu:hover img{transform:none!important;scale:1.04;transition:scale .6s ease!important;transition-delay:0s!important}
/* v58 : volet un peu plus lent pour qu'on le voie bien (1,5 s, décalage 0,22 s entre photos) */
html.gal-4 section.etape .galerie figure{transition-duration:1.5s!important;transition-delay:calc(var(--i,0) * .22s)!important}
html.gal-4 section.etape .galerie figure img{transition:translate 1.9s cubic-bezier(.2,.7,.2,1),scale 1.9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * .22s)}
/* v59 : le héros tient TOUJOURS dans le premier écran (marges haut/bas qui se resserrent sur les fenêtres peu hautes) :
   sa hauteur ne dépend plus du texte ni de la police → le bandeau défilant peut être visible dès le chargement, sans bouger */
@media(min-width:861px){html body .hero.ajuste{padding-top:calc(var(--chev,0px) + clamp(10px,calc((100vh - 560px) * .5),70px))!important;padding-bottom:clamp(10px,calc((100vh - 560px) * .5),70px)!important}}   /* --chev = partie du héros cachée sous les barres du haut (calculée par le script) */
/* v59 : la galerie elle-même ne fait plus son fondu d'entrée (il cachait parfois le volet des photos) */
html.gal-4 section.etape .wrap > .galerie,html.gal-4 section.etape.vue .wrap > .galerie{opacity:1!important;animation:none!important;transform:none!important}
/* v59 : effet au survol des photos rétabli */
html.gal-4 section.etape .galerie figure.gvu:hover img{scale:1.05!important;transition:scale .7s cubic-bezier(.2,.7,.2,1)!important;transition-delay:0s!important}
/* v59 : la barre du haut a sa hauteur définitive dès le 1er affichage (avant que le logo soit ajouté) → rien ne bouge au chargement */
@media(min-width:861px){#entete .brand{min-height:62px;display:flex;align-items:center}}
@media(max-width:860px){#entete .brand{min-height:47px;display:flex;align-items:center}}
/* v59 : sur ordinateur, la hauteur du héros = celle calculée pour l'écran, jamais celle du texte (la police de secours, plus haute,
   faisait descendre le bandeau pendant le chargement). Sécurité : si le vrai texte ne tient pas, le script remet la hauteur libre. */
@media(min-width:861px){html body .hero.ajuste:not(.hero-libre){height:0!important}}

/* v60 (08/11) : survol du logo NET. Avant : toute la marque zoomait depuis la gauche (le logo sortait de l'axe de la ligne dorée)
   + un trait se déroulait dessous, et Safari recalculait l'image du logo à la fin du zoom (effet « chargement »).
   Maintenant : le logo est dessiné à sa taille maximale puis réduit au repos (toujours net, même agrandi) ; au survol,
   seul le logo grossit doucement depuis son centre ; « à Table » ne bouge pas ; plus de trait dessous. */
@media(min-width:861px){
  #entete .brand a{transform:none!important;transition:none!important}
  #entete .brand a::after{display:none!important}
  #entete .brand a:hover{transform:none!important}
  #entete .logo-entete{height:76px!important;margin:-7px -3.84px!important;
    scale:calc(.8158 * (1 + var(--g,0) * .15))!important;transform-origin:50% 50%!important;
    will-change:transform,scale;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    transition:transform .5s cubic-bezier(.22,.61,.36,1)!important}
  @media(hover:hover){#entete .brand a:hover .logo-entete{transform:scale(1.06)}}
}
@media(max-width:860px){
  #entete .logo-entete{height:55px!important;margin:-4px -2.18px!important;
    scale:calc(.8545 * (1 + var(--g,0) * .16))!important;transform-origin:50% 50%!important;
    will-change:scale;backface-visibility:hidden;-webkit-backface-visibility:hidden}
}

/* v61 (08/11) : en remontant vers le héros, les boutons en verre dépoli (Itinéraire, Facebook, horaires) perdaient leur flou
   pendant le fondu des textes puis le retrouvaient d'un coup en haut (le fondu était fait sur tout le bloc).
   Maintenant le fondu est appliqué à chaque élément séparément → le verre garde son flou tout le temps, rien ne saute. */
.tr2 .hero > .wrap{opacity:1!important;will-change:transform!important}
.tr2 .hero.h-sort > .wrap > :not(.fb-ruban):not(.cta-row):not(script),
.tr2 .hero.h-sort > .wrap > .fb-ruban > *,
.tr2 .hero.h-sort > .wrap > .cta-row > *{opacity:var(--fade,1)!important}
.tr2 .hero.h-sort > .wrap > .note-google{transition-property:scale!important}

/* v61 : au survol, « à Table » grossit aussi (comme avant), depuis son bord gauche → il reste sur la marge des textes */
@media(min-width:861px) and (hover:hover){
  #entete .marque-at{transform-origin:0 50%;transition:scale .5s cubic-bezier(.22,.61,.36,1)}
  #entete .brand a:hover .marque-at{scale:1.06}
}

/* v62 (08/11) : en remontant au pad jusqu'en haut, Safari faisait un rebond « élastique » : la page dépassait le haut puis revenait,
   et pendant ce rebond le héros se recalculait avec de mauvaises mesures → tout bougeait. Rebond supprimé en haut et en bas de page
   (le défilement reste normal) + plus aucun recalcul pendant un éventuel rebond (propositions.js / effets.js). */
html,body{overscroll-behavior-y:none}

/* v63 (08/11) : le petit zoom lent de la photo du héros se sent dès l'arrivée (avant : il démarrait après 1,3 s et depuis l'arrêt,
   on ne le voyait qu'au bout de plusieurs secondes). Il démarre tout de suite, déjà en mouvement ; même amplitude qu'avant. */
.prop-E .hero-media img.e-pret{animation:e-eveil2 1.3s cubic-bezier(.2,.7,.2,1) both,e-respire 20s ease-in-out -6s infinite alternate!important}
@keyframes e-eveil2{from{filter:blur(6px) brightness(.5) saturate(.7)}to{filter:none}}
@media(prefers-reduced-motion:reduce){.prop-E .hero-media img.e-pret{animation:none!important}}
/* v63 : galerie — quand la souris quitte une photo, elle revient doucement (1,1 s) au lieu de d'un coup */
html.gal-4 section.etape .galerie figure.gfin img{transition:scale 1.1s cubic-bezier(.25,.6,.3,1)!important;transition-delay:0s!important}

/* =====================================================================
   v65 (08/11) : APERÇUS section « La maison » (?mai=2 à 5). Une seule fois à l'arrivée, puis calme.
   ===================================================================== */
html[class*="mai-"] .apropos .reveal{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
/* trait doré des 3 points (2, 3, 4) : se dessine puis le texte apparaît */
html.mai-2 .point::before,html.mai-3 .point::before,html.mai-4 .point::before{content:"";width:22px;height:1px;align-self:center;background:var(--accent);
  transform:scaleX(0);transform-origin:left center}
html.mai-2 .point span,html.mai-3 .point span,html.mai-4 .point span{opacity:0;translate:0 6px}
html.mai-2 .apropos.mai-go .point::before,html.mai-3 .apropos.mai-go .point::before,html.mai-4 .apropos.mai-go .point::before{
  animation:mai-trait .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--dp,1s) + var(--k,0) * .22s)}
html.mai-2 .apropos.mai-go .point span,html.mai-3 .apropos.mai-go .point span,html.mai-4 .apropos.mai-go .point span{
  animation:mai-texte .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--dp,1s) + .25s + var(--k,0) * .22s)}
@keyframes mai-trait{to{transform:scaleX(1)}}
@keyframes mai-texte{to{opacity:1;translate:0 0}}

/* 2 · Citation qui s'écrit */
html.mai-2 .apropos{--dp:.55s}   /* v76 : les 3 mentions arrivent plus tôt (1,15 s → 0,55 s après le début de la citation) */
html.mai-2 .apropos blockquote .mm{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .02em .14em;margin-bottom:-.14em}
html.mai-2 .apropos blockquote .mm > span{display:inline-block;transform:translateY(108%)}
html.mai-2 .apropos blockquote .guil > span{color:var(--accent)}
html.mai-2 .apropos.mai-go blockquote .mm > span{animation:mai-monte .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--m) * .045s)}
@keyframes mai-monte{to{transform:none}}

/* 3 · Carte de menu : filets dorés + losange, du centre vers les côtés */
html.mai-3 .apropos{--dp:1.1s}
html.mai-3 .apropos .orne{display:flex;align-items:center;justify-content:center;gap:14px;width:min(420px,70%)}
html.mai-3 .apropos .orne i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent));transform:scaleX(0);transform-origin:right center}
html.mai-3 .apropos .orne i:last-child{background:linear-gradient(90deg,var(--accent),transparent);transform-origin:left center}
html.mai-3 .apropos .orne b{width:7px;height:7px;border:1px solid var(--accent);rotate:45deg;scale:0}
html.mai-3 .apropos blockquote{opacity:0;translate:0 10px}
html.mai-3 .apropos.mai-go .orne b{animation:mai-losange .6s cubic-bezier(.2,.7,.2,1) both}
html.mai-3 .apropos.mai-go .orne i{animation:mai-trait 1.1s cubic-bezier(.2,.7,.2,1) .25s both}
html.mai-3 .apropos.mai-go .orne:last-child b{animation-delay:1.9s}
html.mai-3 .apropos.mai-go .orne:last-child i{animation-delay:2.15s}
html.mai-3 .apropos.mai-go blockquote{animation:mai-texte 1s cubic-bezier(.2,.7,.2,1) .55s both}
@keyframes mai-losange{to{scale:1}}

/* 4 · Reflet doré qui traverse la citation une seule fois */
html.mai-4 .apropos{--dp:2.2s}
html.mai-4 .apropos blockquote{opacity:0;
  background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 42%,#f6dfae 50%,var(--ink) 58%,var(--ink) 100%);background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html.mai-4 .apropos.mai-go blockquote{animation:mai-fondu .9s ease both,mai-reflet 1.8s ease-in-out .7s both}
@keyframes mai-fondu{to{opacity:1}}
@keyframes mai-reflet{from{background-position:100% 0}to{background-position:0 0}}

/* 5 · Trois engagements : côte à côte avec une icône fine qui se dessine */
html.mai-5 .apropos .point::before{display:none}
html.mai-5 .apropos .point{flex-direction:column;align-items:center;gap:14px;text-align:center}
html.mai-5 .apropos .ico{width:38px;height:38px;display:block}
html.mai-5 .apropos .ico svg{width:100%;height:100%;overflow:visible;fill:none;stroke:var(--accent);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
html.mai-5 .apropos .ico svg > *{stroke-dasharray:1;stroke-dashoffset:1}
html.mai-5 .apropos .point span:not(.ico){opacity:0;translate:0 6px;max-width:16ch}
html.mai-5 .apropos blockquote{opacity:0;translate:0 10px}
html.mai-5 .apropos.mai-go blockquote{animation:mai-texte 1s cubic-bezier(.2,.7,.2,1) both}
html.mai-5 .apropos.mai-go .ico svg > *{animation:mai-dessin 1.4s cubic-bezier(.45,.05,.25,1) both;animation-delay:calc(.7s + var(--k,0) * .3s)}
html.mai-5 .apropos.mai-go .point span:not(.ico){animation:mai-texte .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(1.5s + var(--k,0) * .3s)}
html.mai-5 .apropos .point{--k:0}
@keyframes mai-dessin{to{stroke-dashoffset:0}}
@media(min-width:721px){html.mai-5 .apropos .points{flex-direction:row;align-items:flex-start;justify-content:center;gap:clamp(40px,7vw,96px)}}
@media(max-width:720px){html.mai-5 .apropos .points{gap:28px}}

@media(prefers-reduced-motion:reduce){html[class*="mai-"] .apropos *{animation:none!important;opacity:1!important;transform:none!important;translate:none!important;scale:1!important;stroke-dashoffset:0!important}}

/* v67 (08/11) : « La maison » (idée 2) — citation sur une seule ligne (ordinateur) + 3 mentions alignées et symétriques */
html.mai-2 .apropos blockquote.une-ligne{max-width:none;white-space:nowrap}
html.mai-2 .apropos blockquote{text-wrap:balance}
/* v68 : 3 colonnes sur ordinateur RETIRÉES (Alexis préfère l'une sous l'autre, comme sur téléphone, sur tous les écrans) */
/* tous les écrans : l'une sous l'autre, centrées, petit trait doré horizontal entre chacune */
html.mai-2 .apropos .points{gap:16px}
html.mai-2 .apropos .point{flex-direction:column;align-items:center;gap:16px;text-align:center}
html.mai-2 .apropos .point::before{width:26px;transform-origin:center}
html.mai-2 .apropos .point:first-child::before{display:none}
@keyframes mai-trait-v{to{transform:scaleY(1)}}


/* v69 : effet horizontal v64 remis (branche + remplissage doré de gauche à droite) */
/* v64 (08/11) : grand texte « Louise à Table SRL » qui se remplit de doré quand la ligne arrive (copie dorée par-dessus le texte gris) */
.apropos .filigrane-or{opacity:0;color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,var(--or-clair,#f1d39a) 0%,var(--t2,#e2bf7e) 45%,var(--t4,#c09252) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--fx,0px) - 70px),transparent var(--fx,0px));
          mask-image:linear-gradient(90deg,#000 calc(var(--fx,0px) - 70px),transparent var(--fx,0px));
  transition:opacity .4s ease}
.apropos .filigrane-or.fg-actif{opacity:.34}
.apropos .fg-branche{position:absolute;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 4px rgba(217,178,106,.55))}
.apropos .fg-branche path{fill:none;stroke:var(--t2,#e2bf7e);stroke-width:1;stroke-linecap:round}
.apropos > .wrap{z-index:1}
@media(prefers-reduced-motion:reduce){.apropos .filigrane-or{transition:none}}

/* v69 : les 3 mentions en blanc, comme la citation */
.apropos .point span{color:var(--ink)!important}

/* v70 (08/11) : mentions lisibles par-dessus le nom doré : doré un peu plus doux + léger halo sombre derrière les mentions */
.apropos .filigrane-or.fg-actif{opacity:.24}
.apropos .point span{text-shadow:0 0 14px var(--bg),0 0 28px var(--bg),0 0 4px var(--bg)}

/* =====================================================================
   v73 (08/11) : APERÇUS transitions des AVIS (?avi=2 à 5). Une seule fois par carte. Le survol des cartes est gardé.
   ===================================================================== */
html[class*="avi-"] #avis .avis-grille{animation:none!important;opacity:1!important;transform:none!important}
html[class*="avi-"] #avis .avis-carte.reveal{opacity:1;transform:none;transition:transform .3s ease,box-shadow .3s ease!important}
html[class*="avi-"] #avis .avis-carte{--dk:0s}
@media(min-width:721px){html[class*="avi-"] #avis .avis-carte{--dk:calc(var(--k,0) * .18s)}}
@keyframes avi-monte{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
@keyframes avi-fondu{from{opacity:0}to{opacity:1}}
/* 2 · Cascade + étoiles qui s'allument une par une */
html.avi-2 #avis .avis-carte.reveal{opacity:0}
html.avi-2 #avis .avis-carte.avi-go{animation:avi-monte 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--dk)}
html.avi-2 #avis .etoiles i{font-style:normal;display:inline-block;opacity:.18;scale:.7}
html.avi-2 #avis .avis-carte.avi-go .etoiles i{animation:avi-etoile .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--dk) + .55s + var(--j) * .11s)}
@keyframes avi-etoile{to{opacity:1;scale:1}}
html.avi-2 #avis .avis-badge-google{opacity:0}
html.avi-2 #avis .avis-carte.avi-go .avis-badge-google{animation:avi-fondu .6s ease both;animation-delay:calc(var(--dk) + 1.2s)}
/* 3 · Volet latéral (comme la galerie) */
html.avi-3 #avis .avis-carte{clip-path:inset(0 100% 0 0)}
html.avi-3 #avis .avis-carte > *{translate:-24px 0;opacity:0}
html.avi-3 #avis .avis-carte.avi-go{animation:avi-volet 1.4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--dk) * 1.2)}
html.avi-3 #avis .avis-carte.avi-go > *{animation:avi-glisse 1.4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--dk) * 1.2 + .25s)}
@keyframes avi-volet{to{clip-path:inset(0 0 0 0)}}
@keyframes avi-glisse{to{translate:0 0;opacity:1}}
/* 4 · Depuis le centre (milieu d'abord, puis les côtés s'écartent) */
html.avi-4 #avis .avis-carte.reveal{opacity:0;scale:.96}
html.avi-4 #avis .avis-carte.avi-go{animation:avi-centre 1.1s cubic-bezier(.2,.7,.2,1) both}
@media(min-width:861px){
  html.avi-4 #avis .avis-carte{translate:calc(var(--cote,0) * -60px) 0}
  html.avi-4 #avis .avis-carte.avi-go{animation-delay:calc((var(--cote,0) * var(--cote,0)) * .35s)}
}
@keyframes avi-centre{to{opacity:1;scale:1;translate:0 0}}
/* 5 · Flou → net, en cascade */
html.avi-5 #avis .avis-carte.reveal{opacity:0;filter:blur(12px)}
html.avi-5 #avis .avis-carte.avi-go{animation:avi-net 1.3s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--dk)}
@keyframes avi-net{to{opacity:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){html[class*="avi-"] #avis .avis-carte,html[class*="avi-"] #avis .avis-carte *{animation:none!important;opacity:1!important;filter:none!important;clip-path:none!important;translate:none!important;scale:1!important}}

/* v74 (08/11) : avis — cascade INVERSÉE (choix d'Alexis) : les cartes descendent depuis le dessus jusqu'à leur place */
@keyframes avi-descend{from{opacity:0;translate:0 -34px}to{opacity:1;translate:0 0}}
html.avi-2 #avis .avis-carte.avi-go{animation-name:avi-descend}

/* v76 (08/11) : survol des cartes d'avis RÉTABLI (la carte se soulève avec une ombre) — il était annulé par la règle des transitions */
@media(hover:hover){html[class*="avi-"] #avis .avis-carte.reveal:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,.12)}}

/* v76 (08/11) : bouton Facebook du héros — le flou « bugait » au chargement (Safari n'affiche pas le flou tant que le parent fait un fondu).
   Le ruban glisse sans fondu, et ce sont ses deux éléments qui font leur propre fondu (comme les boutons du héros). */
.hero .fb-ruban{opacity:1!important}
.hero .fb-ruban.intro{animation-name:entreeGlisse}
.hero .fb-ruban.intro > *{opacity:0;animation:fb-fondu .9s cubic-bezier(.22,.9,.3,1) .05s forwards;transition:opacity .25s}
@keyframes fb-fondu{to{opacity:.92}}
.hero .fb-ruban:hover > *{opacity:1!important}
@media(prefers-reduced-motion:reduce){.hero .fb-ruban.intro > *{animation:none;opacity:.92}}

/* v76 : fond des sections Prestations et Infos = photo du héros qui couvre TOUT l'écran et reste fixe (même effet de fenêtre, sans bande beige) */
#services .fond-fixe,#infos .fond-fixe{position:absolute;inset:0;z-index:-1;clip-path:inset(0);pointer-events:none}
#services .fond-fixe > div,#infos .fond-fixe > div{position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(color-mix(in srgb,var(--bg) 82%,transparent),color-mix(in srgb,var(--bg) 82%,transparent)),var(--photo-fond,none) var(--photo-pos,50% 50%)/cover no-repeat}

/* =====================================================================
   v77 (08/11) : APERÇUS transitions des PRESTATIONS (?pre=2 à 5). Une fois par carte. Survol gardé.
   ===================================================================== */
html[class*="pre-"] #services .services{animation:none!important;opacity:1!important;transform:none!important}
html[class*="pre-"] #services .service.reveal{opacity:1;transform:none;transition:transform .35s ease,box-shadow .35s ease!important;transition-delay:0s!important}
@media(hover:hover){html[class*="pre-"] #services .service.reveal:hover{transform:translateY(-6px)}}
html[class*="pre-"] #services .service{--dk:0s}
@media(min-width:721px){html[class*="pre-"] #services .service{--dk:calc(var(--k,0) * .18s)}}
/* 2 · Cascade depuis le dessus (comme les avis) */
html.pre-2 #services .service.reveal{opacity:0}
html.pre-2 #services .service.pre-go{animation:avi-descend 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--dk)}
/* 3 · Volet latéral (comme la galerie) */
html.pre-3 #services .service{clip-path:inset(0 100% 0 0)}
html.pre-3 #services .service > *{translate:-20px 0;opacity:0}
html.pre-3 #services .service.pre-go{animation:avi-volet 1.4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--dk) * 1.2)}
html.pre-3 #services .service.pre-go > *{animation:avi-glisse 1.4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--dk) * 1.2 + .25s)}
/* 4 · Trait doré : la carte monte, un trait doré la parcourt une fois en haut */
html.pre-4 #services .service.reveal{opacity:0}
html.pre-4 #services .service.pre-go{animation:avi-monte .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--dk)}
html.pre-4 #services .service.pre-go::before{animation:pre-trait 1.6s cubic-bezier(.6,0,.3,1) both;animation-delay:calc(var(--dk) + .45s)}
@keyframes pre-trait{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.1%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
/* 5 · Fondu + léger agrandissement, en cascade */
html.pre-5 #services .service.reveal{opacity:0;scale:.94}
html.pre-5 #services .service.pre-go{animation:pre-zoom 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--dk)}
@keyframes pre-zoom{to{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){html[class*="pre-"] #services .service,html[class*="pre-"] #services .service *{animation:none!important;opacity:1!important;clip-path:none!important;translate:none!important;scale:1!important}}

/* v78 (08/11) : prestations qui « flottent » sur la photo : plus de fond beige sous les cartes (visible quand une carte se soulève au survol) ;
   chaque carte a son propre fin contour, et une ombre douce quand elle se soulève */
#services .services{background:transparent!important;border:0!important}
#services .service{box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s cubic-bezier(.22,.9,.3,1),box-shadow .35s ease!important}
@media(hover:hover){#services .service:hover{box-shadow:inset 0 0 0 1px var(--line),0 18px 40px rgba(0,0,0,.35)}}
/* v78 : le détail d'une prestation ouverte passe au-dessus de la section Infos (avant : il passait dessous) */
#services:has(.service[aria-expanded="true"]){z-index:3!important}

/* v80 (08/11) : prestations — coins arrondis + espace entre les cartes (cartes qui flottent) */
#services .services{gap:14px!important}
#services .service{border-radius:14px}
#services .service::before{left:14px!important;right:14px!important}
@media(max-width:860px){#services .service{overflow:hidden}}
/* ordinateur : le détail s'ouvre par-dessus, collé à la carte, même fond et même contour, et s'arrête pile sur le trait entre
   Prestations et Infos (hauteur --pan-h calculée par propositions.js) ; Infos ne bouge plus */
@media(min-width:861px){
  #services .service-panneau{display:block!important;position:absolute!important;left:0;right:0;top:100%;height:0;overflow:hidden;
    padding:0 26px!important;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;border-radius:0 0 14px 14px!important;
    box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line),inset 0 -1px 0 var(--line)!important;transition:height .35s cubic-bezier(.22,.9,.3,1)!important;z-index:6}
  #services .service[aria-expanded="true"] .service-panneau{height:var(--pan-h,160px)}
  #services .service-panneau .service-perso{margin:6px 0 0!important}
  #services .service[aria-expanded="true"]{border-radius:14px 14px 0 0;transform:none!important;
    box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line),inset 0 1px 0 var(--line)!important}
}

/* =====================================================================
   v81 (08/11) : APERÇUS réorganisation de la section INFOS (?inf=2 à 5)
   ===================================================================== */
.inf-v{--rond:14px;--carte:color-mix(in srgb,var(--surface) 88%,transparent)}
.inf-v h4{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inf-v .inf-b p{color:var(--ink);font-size:1rem;line-height:1.55;margin:0}
.inf-v .inf-b p strong{font-weight:500}
.inf-v .inf-tel{color:var(--ink);text-decoration:none;font-size:1.05rem}
.inf-v .inf-btn{display:inline-block;margin-top:14px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent);padding-bottom:3px;transition:color .25s,border-color .25s}
.inf-v .inf-btn:hover{color:var(--or-clair,#f1d39a);border-bottom-color:var(--accent)}
.inf-v .inf-statut{font-size:.66rem;letter-spacing:.12em;padding:4px 9px;border-radius:999px;border:1px solid currentColor;text-transform:uppercase}
.inf-v .inf-statut.ouvert{color:#9fcf8f}.inf-v .inf-statut.ferme{color:#d9a38f}
.inf-v .inf-table{display:grid;gap:7px;font-size:.95rem}
.inf-v .inf-l{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;color:var(--ink)}
.inf-v .inf-l .inf-j{font-weight:500;min-width:6.2em}
.inf-v .inf-l i{display:block}
.inf-v .inf-l .inf-h{text-align:right;color:var(--muted);white-space:nowrap}
.inf-v .inf-l .inf-br{display:none}
.inf-v .inf-l.ferme .inf-j,.inf-v .inf-l.ferme .inf-h{opacity:.55}
.inf-v .inf-l.auj .inf-j,.inf-v .inf-l.auj .inf-h{color:var(--accent);opacity:1}
.inf-v .inf-table.pointilles .inf-l i{border-bottom:1px dotted color-mix(in srgb,var(--ink) 35%,transparent);transform:translateY(-4px)}
.inf-v .inf-plan .carte-map{margin:0!important;height:100%;border-radius:var(--rond);overflow:hidden}
.inf-v .inf-plan iframe{display:block;width:100%;height:100%;min-height:320px;border:0;filter:grayscale(.2) invert(.9) hue-rotate(180deg) brightness(.95) contrast(.92)}
.inf-v .inf-fiche,.inf-v .inf-cartes .inf-b{background:var(--carte);border-radius:var(--rond);box-shadow:inset 0 0 0 1px var(--line)}
/* 2 · Fiche + plan */
.inf-v2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:stretch}
.inf-v2 .inf-fiche{padding:30px 32px;display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.inf-v2 .inf-b-h{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px}
/* 3 · Horaires façon carte de menu */
.inf-v3 .inf-ligne{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:center;padding-bottom:30px;border-bottom:1px solid var(--line)}
.inf-v3 .inf-ligne h4{justify-content:center}
.inf-v3 .inf-menu{max-width:560px;margin:34px auto 38px;text-align:center}
.inf-v3 .inf-menu h4{justify-content:center;margin-bottom:18px}
.inf-v3 .inf-menu .inf-table{text-align:left;gap:10px}
.inf-v3 .inf-plan{height:300px}
/* 4 · Trois cartes */
.inf-v4 .inf-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-bottom:22px}
.inf-v4 .inf-cartes .inf-b{padding:28px 26px}
.inf-v4 .inf-plan{height:300px}
/* 5 · Plan en grand avec la fiche posée dessus */
.inf-v5 .inf-grand{position:relative;border-radius:var(--rond);overflow:hidden;min-height:470px}
.inf-v5 .inf-grand .inf-plan{position:absolute;inset:0}
.inf-v5 .inf-grand .inf-plan .carte-map{border-radius:0}
.inf-v5 .inf-grand .inf-fiche{position:relative;z-index:1;width:min(400px,46%);margin:24px;padding:26px 28px;display:grid;gap:20px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* téléphone : tout l'un sous l'autre */
@media(max-width:860px){
  .inf-v2,.inf-v3 .inf-ligne,.inf-v4 .inf-cartes,.inf-v2 .inf-fiche{grid-template-columns:minmax(0,1fr)}
  .inf-v2 .inf-plan,.inf-v3 .inf-plan,.inf-v4 .inf-plan{height:260px}
  .inf-v5 .inf-grand{min-height:0;display:flex;flex-direction:column-reverse}
  .inf-v5 .inf-grand .inf-plan{position:relative;height:260px}
  .inf-v5 .inf-grand .inf-fiche{width:auto;margin:0}
  .inf-v .inf-l .inf-h{white-space:normal}
  .inf-v .inf-l .inf-br{display:inline}
}
/* v81b : 5 — fiche plus compacte (adresse et téléphone côte à côte) */
.inf-v5 .inf-grand .inf-fiche{width:min(480px,50%);grid-template-columns:1fr 1fr;gap:20px 24px}
.inf-v5 .inf-grand .inf-b-h{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px}
@media(max-width:860px){.inf-v5 .inf-grand .inf-fiche{width:auto;grid-template-columns:minmax(0,1fr)}}
/* v81c : 5 — le plan est décalé pour que le repère de l'adresse soit au centre de la partie visible (à droite de la fiche) */
@media(min-width:861px){.inf-v5 .inf-grand .inf-plan iframe{width:calc(100% + min(480px,50%) + 24px);margin-left:calc(-1 * (min(480px,50%) + 24px))}}
/* v81d : 4 — boutons Itinéraire / Appeler posés en bas des cartes (cartes équilibrées) */
.inf-v4 .inf-cartes .inf-b{display:flex;flex-direction:column}
.inf-v4 .inf-cartes .inf-b .inf-btn{margin-top:auto;align-self:flex-start}
.inf-v4 .inf-cartes .inf-b p{margin-bottom:18px}

/* v82 (08/11) : Infos = 2 « fiche + plan » (choix d'Alexis). Adresse et téléphone centrés chacun dans leur moitié, boutons
   « Itinéraire » / « Appeler » à la même hauteur ; titre « Horaires » et pastille « Ouvert / Fermé actuellement » centrés au-dessus du tableau */
.inf-v .inf-statut-l{display:flex;justify-content:center;margin:0 0 16px}
.inf-v2 .inf-fiche .inf-b{display:flex;flex-direction:column;align-items:center;text-align:center}
.inf-v2 .inf-fiche .inf-b h4{justify-content:center}
.inf-v2 .inf-fiche .inf-b > p{margin-bottom:16px}
.inf-v2 .inf-fiche .inf-b .inf-btn{margin-top:auto}
.inf-v2 .inf-fiche .inf-b-h{align-items:stretch;text-align:left}
.inf-v2 .inf-fiche .inf-b-h h4{margin-bottom:12px}

/* v83 (08/11) : Infos — (1) le numéro de téléphone est centré verticalement entre les deux lignes de l'adresse ;
   (2) la fiche et le plan grossissent doucement au survol (avec une ombre), comme les autres cartes du site */
.inf-v2 .inf-fiche .inf-b:nth-child(2) > p{min-height:3.1em;display:flex;align-items:center;justify-content:center}
.inf-v2 .inf-fiche,.inf-v2 .inf-plan{transition:scale .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s ease;transform-origin:50% 50%;border-radius:14px}
@media(hover:hover){.inf-v2 .inf-fiche:hover,.inf-v2 .inf-plan:hover{scale:1.02;box-shadow:0 22px 50px rgba(0,0,0,.35)}}
@media(hover:hover){.inf-v2 .inf-plan.survol{scale:1.02;box-shadow:0 22px 50px rgba(0,0,0,.35)}}

/* v84 (08/11) : menu des prestations ULTRA FLUIDE — le détail a toujours sa taille finale et se DÉVOILE de haut en bas
   (comme un store), son texte glisse doucement, les coins de la carte s'arrondissent en même temps ; le détail recouvre
   le trait du bas de la carte (aucun changement de contour au clic). Fermeture = même mouvement à l'envers. */
@media(min-width:861px){
  #services .service-panneau{height:var(--pan-h,160px)!important;top:calc(100% - 1px)!important;visibility:hidden;
    clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.22,.9,.3,1),visibility 0s linear .5s!important}
  #services .service[aria-expanded="true"] .service-panneau{visibility:visible;clip-path:inset(0 0 0 0);
    transition:clip-path .5s cubic-bezier(.22,.9,.3,1),visibility 0s!important}
  #services .service-panneau-in{opacity:0;translate:0 -12px;transition:opacity .3s ease,translate .45s cubic-bezier(.22,.9,.3,1)}
  #services .service[aria-expanded="true"] .service-panneau-in{opacity:1;translate:0 0;transition:opacity .4s ease .1s,translate .5s cubic-bezier(.22,.9,.3,1) .05s}
  #services .service{transition:transform .35s cubic-bezier(.22,.9,.3,1),box-shadow .35s ease,border-radius .5s cubic-bezier(.22,.9,.3,1)!important}
  #services .service[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--line)!important}
  #services .svc-fleche{transition:transform .5s cubic-bezier(.22,.9,.3,1)!important}
}

/* v84 : Infos plus compactes pour que toute la section tienne dans l'écran (titre + fiche + plan) */
#infos .sec-sous{margin-bottom:26px}
.inf-v2 .inf-fiche{padding:22px 28px;gap:16px 24px}
.inf-v2 .inf-fiche .inf-b h4{margin-bottom:8px}
.inf-v2 .inf-fiche .inf-b > p{margin-bottom:10px}
.inf-v2 .inf-fiche .inf-btn{margin-top:auto}
.inf-v2 .inf-b-h{padding-top:16px!important}
.inf-v2 .inf-b-h h4{margin-bottom:8px!important}
.inf-v .inf-statut-l{margin-bottom:12px}
.inf-v .inf-table{gap:6px}
.inf-v2 .inf-plan iframe{min-height:0}
/* v84b : le détail descend jusqu'au trait (+1 px, il recouvre le bas de la carte) ; Infos : marge du haut réduite et fiche
   resserrée (ordinateur) → en cliquant « Infos » dans le menu, toute la section est visible */
@media(min-width:861px){
  #services .service-panneau{height:calc(var(--pan-h,160px) + 1px)!important}
  #infos{padding-top:40px!important}
  .inf-v2 .inf-fiche{padding:18px 26px;gap:12px 24px}
  .inf-v2 .inf-b-h{padding-top:12px!important}
}

/* v85 (08/11) : dernière section (« Un événement à organiser ? ») centrée verticalement : même espace au-dessus du titre et sous le bouton */
section.final{padding-top:64px!important;padding-bottom:64px!important}
section.final .wrap > :first-child{margin-top:0!important}
section.final .wrap > :last-child{margin-bottom:0!important}

/* v86 (08/11) : bas du site. « Ce site vous plaît ? » reçoit les effets de lumière (fond transparent → reflets dorés du site visibles),
   la dernière bande (pied de page) devient foncée comme le reste, plus fine, sur une seule ligne :
   © à gauche · Facebook au centre (même axe que les sections) · « Maquette de démonstration » à droite. Téléphone : empilé, compact. */
.novyram-cta{background:transparent!important;position:relative}
footer{background:var(--bg)!important;position:relative;z-index:1;padding:16px 0!important;font-size:.78rem!important;border-top:1px solid var(--line)}
footer .wrap{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px!important;padding-left:var(--marge-fil,24px)!important}
footer .wrap > span:first-child{justify-self:start;text-align:left}
footer .wrap > span:last-child{justify-self:end;text-align:right;letter-spacing:.04em}
footer .footer-social{margin:0!important}
footer .footer-social a{padding:7px 14px;font-size:.8rem;font-weight:500;color:var(--muted);gap:7px}
footer .footer-social a:hover{color:var(--accent-ink)}
footer .footer-social svg{width:15px;height:15px}
@media(max-width:720px){
  footer{padding:18px 0 calc(18px + var(--barre-h,0px))!important}
  footer .wrap{grid-template-columns:1fr;gap:10px!important;justify-items:center}
  footer .wrap > span:first-child,footer .wrap > span:last-child{justify-self:center;text-align:center}
  footer .footer-social{order:-1}
}

/* v87 (09/11) : (1) Infos — au survol, les lettres et chiffres de la fiche ne « tremblent » plus : la fiche et le plan sont
   préparés comme un seul bloc qui grossit d'un tenant (même réglage que la note Google du héros, déjà validé).
   (2) Séparation « Un événement à organiser ? » / « Ce site vous plaît ? » : la bande sombre qui dépassait sous le trait
   (bas de la photo du héros, prolongé de 28 px pour le rideau du haut) est coupée net quand on arrive en bas du site. */
.inf-v2 .inf-fiche,.inf-v2 .inf-plan{will-change:scale;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;transform:translateZ(0)}
.tr2 .hero.h-fin{clip-path:inset(0)!important}

/* v88 (09/11) : (1) le fil (et son coin) recevait le fond foncé de la règle « rideau » (main > * fond --bg) → une fine ligne noire
   se voyait sous la ligne dorée sur la photo de fond (Prestations, Infos) : fond transparent.
   (2) ronds pas encore allumés : intérieur transparent (avant : fond foncé du site → rond « troué » sur le bloc « Ce site vous plaît ? »). */
.tr2 main > #fil,.tr2 main > #fil-coin,.tr2 main > #fil-ligne{background-color:transparent!important}
.fil-noeud:not(.allume){background:transparent}

/* v89 (09/11) : (1) « Un événement à organiser ? » : le « ? » prend la même couleur que le titre.
   (2) apparition des textes et boutons des 3 dernières sections (Un événement à organiser · Ce site vous plaît · pied de page) :
   chacun monte doucement en apparaissant, l'un après l'autre, dès qu'il entre par le bas de l'écran (on voit l'animation en arrivant). */
section.final h2 em{color:inherit!important;-webkit-text-fill-color:inherit!important;background:none!important}
.ap{opacity:0;translate:0 var(--ap-y,24px)}
.ap.ap-vu{animation:apparition 1s cubic-bezier(.16,.7,.3,1) var(--ap-d,0s) both}
@keyframes apparition{from{opacity:0;translate:0 var(--ap-y,24px)}to{opacity:1;translate:0 0}}
footer .ap{--ap-y:12px}
@media(prefers-reduced-motion:reduce){.ap{opacity:1;translate:none}.ap.ap-vu{animation:none}}

/* v90 (09/11) : bande défilante SANS gel. Avant : une seule piste très large (≈ 4 800 px, ≈ 9 600 points sur écran Retina) qui glissait ;
   Safari la découpe en morceaux et doit redessiner les morceaux qui arrivent → petit gel de temps en temps.
   Maintenant : quelques petits groupes séparés (juste de quoi couvrir l'écran), chacun glisse de sa propre largeur, tous synchronisés
   → aucun gros calque, boucle parfaite et infinie (propositions.js v90). */
.bande-piste.bp-v90{animation:none!important;display:block!important;position:relative;width:100%;transform:none!important}
.bande-piste.bp-v90 > .bande-groupe{position:absolute;top:0;left:0;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;white-space:nowrap}

/* v91 (09/11) : CHARGEMENT « lever de rideau » (piste A choisie). Tout part du même instant (fin de l'attente), dans cet ordre :
   0 s photo (fondu depuis le noir + éveil) · 0,30 s barre du haut (logo, menu, téléphone) · 0,55 s petit titre · 0,66 s titre mot par mot ·
   0,95 s phrase · 1,08 s boutons · 1,20 s note Google · 1,32 s ruban Facebook · 1,44 s carte des horaires · 1,62 s bande + ligne dorée.
   La classe hl-a est retirée après l'arrivée (les survols retrouvent leurs réglages). ?hl=0 = ancien chargement. */
html.hl-a:not(.js-attente) .hero .hero-media,html.hl-a:not(.js-attente) .hero::before{transition:opacity .9s ease 0s!important}
html.hl-a .hero-media img{animation-delay:0s,1.3s!important}
html.hl-a .hero-media::before{animation-delay:.25s!important}
html.hl-a:not(.js-attente) #entete .brand,html.hl-a:not(.js-attente) #entete .brand.logo-pret{transition:opacity .8s cubic-bezier(.2,.7,.2,1) .3s!important}
html.hl-a:not(.js-attente) #entete .menu,html.hl-a:not(.js-attente) #entete .burger-btn{transition:opacity .8s cubic-bezier(.2,.7,.2,1) .42s!important}
html.hl-a:not(.js-attente) #entete .tel{transition:opacity .8s cubic-bezier(.2,.7,.2,1) .54s!important}
html.hl-a .hero .eyebrow{animation-delay:.55s!important}
html.hl-a .hero .eyebrow::before{animation-delay:.6s!important}
html.hl-a .hero h1 em i{animation-delay:1.25s!important}
html.hl-a .hero .tagline{animation-delay:.95s!important}
html.hl-a .hero .cta-row,html.hl-a .hero .cta-row.intro > *{animation-delay:1.08s!important}
html.hl-a .hero .note-google{animation-delay:1.2s!important}
html.hl-a .hero .fb-ruban,html.hl-a .hero .fb-ruban.intro > *{animation-delay:1.32s!important}
html.hl-a .hero .statut-carte{animation-delay:1.44s!important}
html.hl-a:not(.js-attente) .hero .statut-carte{transition:opacity .8s ease 1.44s,scale .25s ease!important}
html.hl-a:not(.js-attente) .bande-piste,html.hl-a:not(.js-attente) .bande + section,html.hl-a:not(.js-attente) #fil,
html.hl-a:not(.js-attente) #fil-ligne,html.hl-a:not(.js-attente) #fil-coin,html.hl-a:not(.js-attente) .fleche-bas{transition:opacity .9s cubic-bezier(.2,.7,.2,1) 1.62s!important}

/* v91b (09/11) : pendant l'attente, la bande entière (pas seulement son texte) est cachée → elle ne peut plus apparaître trop haut
   puis redescendre ; elle arrive en fondu à sa place définitive avec la ligne dorée. */
html.js-attente .bande{opacity:0!important;transition:none!important}
.bande{transition:opacity .9s cubic-bezier(.2,.7,.2,1) .5s}
html.hl-a:not(.js-attente) .bande{transition:opacity .9s cubic-bezier(.2,.7,.2,1) 1.5s!important}

/* v92 (09/11) : pendant le chargement on ne voit QUE la barre du haut et la bande du bas (à leur place définitive) ;
   le texte de la bande défile dès que les polices sont arrivées ; tout le reste apparaît ensuite, dans l'ordre (v91). */
html.js-attente.hl-cadre .bande{opacity:1!important;transition:opacity .5s ease!important}
html.js-attente.hl-cadre.hl-polices .bande-piste{opacity:1!important;transition:opacity .6s ease!important}
html.hl-a.hl-polices:not(.js-attente) .bande-piste,html.hl-a.hl-cadre:not(.js-attente) .bande{transition:none!important}

/* v92b (09/11) : hauteur de la bande FIXE (28 px), quelle que soit la police : avant, la police de secours la rendait 1 px plus haute,
   le héros était calculé avec cette hauteur puis recalculé à l'arrivée de la vraie police → saut de 1 px (visible sur téléphone). */
.bande-piste{height:28px!important;overflow:visible}
.bande-groupe{height:28px;align-items:center}
.bande-groupe span{line-height:28px!important}
/* v92b : le trait du haut de la bande (1 px) n'apparaissait qu'une fois le script lancé (classe tr2) → la bande grandissait de 1 px
   après le calcul du héros. Le trait existe maintenant dès le départ (transparent), seule sa couleur change. */
.bande{border-top:1px solid transparent}

/* v94 (09/11) : Infos — (1) grossissement de la fiche IDENTIQUE à celui du plan : avant, la fiche passait d'un contour intérieur
   à une ombre extérieure (le navigateur ne sait pas fondre l'un dans l'autre → ombre qui apparaissait d'un coup). Maintenant les deux
   gardent la même forme d'ombre, invisible au repos, qui se fond doucement au survol (même durée, même courbe, même agrandissement).
   (2) apparition de la fiche puis du plan (même effet que les dernières sections : montée douce + fondu, l'un après l'autre). */
.inf-v2 .inf-fiche{box-shadow:inset 0 0 0 1px var(--line),0 22px 50px rgba(0,0,0,0)!important}
.inf-v2 .inf-plan{box-shadow:0 22px 50px rgba(0,0,0,0)!important}
.inf-v2 .inf-fiche,.inf-v2 .inf-plan{transition:scale .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s cubic-bezier(.22,.61,.36,1)!important}
@media(hover:hover){
  .inf-v2 .inf-fiche:hover{scale:1.02;box-shadow:inset 0 0 0 1px var(--line),0 22px 50px rgba(0,0,0,.35)!important}
  .inf-v2 .inf-plan:hover,.inf-v2 .inf-plan.survol{scale:1.02;box-shadow:0 22px 50px rgba(0,0,0,.35)!important}
}

/* v95 (09/11) : bloc « Ce site vous plaît ? » — titre et bouton plus grands ; quand la ligne dorée arrive à son rond et que le petit
   trait horizontal part vers le titre, le titre se remplit de la couleur de la ligne, de gauche à droite (comme le nom de la citation). */
.novyram-cta .nc-titre{font-size:2.05rem!important;line-height:1.2!important;
  background:linear-gradient(90deg,var(--t5,#ab7d45) 0%,var(--t5,#ab7d45) 46%,var(--text,#f5ede2) 54%,var(--text,#f5ede2) 100%);
  background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;transition:background-position 1.3s cubic-bezier(.4,0,.2,1) .35s}
.novyram-cta.nc-dore .nc-titre{background-position:0 0}
.novyram-cta .nc-btn{font-size:1.1rem!important;padding:15px 36px!important}
@media(max-width:720px){.novyram-cta .nc-titre{font-size:1.7rem!important}.novyram-cta .nc-btn{font-size:1.02rem!important;padding:14px 30px!important}}
@media(prefers-reduced-motion:reduce){.novyram-cta .nc-titre{transition:none}}

/* v96 (09/11) : « Ce site vous plaît ? » encore plus grand (même taille que « Un événement à organiser ? ») et passage au doré
   plus fluide : bord de couleur très doux (large fondu au lieu d'une limite nette), plus lent, accélération/décélération douces. */
.novyram-cta .nc-titre{font-size:2.6rem!important;line-height:1.15!important;
  background:linear-gradient(90deg,var(--t5,#ab7d45) 0%,var(--t5,#ab7d45) 33%,var(--text,#f5ede2) 67%,var(--text,#f5ede2) 100%)!important;
  background-size:300% 100%!important;background-position:100% 0;-webkit-background-clip:text!important;background-clip:text!important;
  transition:background-position 2.2s cubic-bezier(.45,.05,.25,1) .2s!important}
.novyram-cta.nc-dore .nc-titre{background-position:0 0!important}
@media(max-width:720px){.novyram-cta .nc-titre{font-size:2.05rem!important}}
/* v96 : le petit trait horizontal du dernier rond (plus grand : 13 px) part du MILIEU du rond (avant : 2 px trop haut) */
.fil-noeud.fin::after{top:6px!important}

/* v97 (09/11) : « Ce site vous plaît ? » reste BLANC, encore plus grand ; quand la ligne arrive, une DORURE le traverse une seule fois
   de gauche à droite (reflet doré doux qui passe sur les lettres puis s'efface), comme une feuille d'or qui accroche la lumière. */
.novyram-cta .nc-titre{font-size:3.1rem!important;line-height:1.12!important;
  background:linear-gradient(100deg,var(--text,#f5ede2) 0%,var(--text,#f5ede2) 38%,#f6e2b4 44%,#d9b26e 50%,#f6e2b4 56%,var(--text,#f5ede2) 62%,var(--text,#f5ede2) 100%)!important;
  background-size:320% 100%!important;background-position:100% 0!important;-webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;transition:none!important}
/* (retiré v99) */
@keyframes nc-dorure{from{background-position:100% 0}to{background-position:0 0}}
@media(max-width:720px){.novyram-cta .nc-titre{font-size:2.1rem!important}}
/* (retiré v99) */
/* v97 : la dorure s'ajoute à l'animation d'apparition (elle ne la remplace pas) */
/* (retiré v99) */

/* v98 (09/11) : le titre « Ce site vous plaît ? » ne bouge plus quand la ligne arrive. Avant : ajouter la dorure relançait son
   animation d'apparition dans Safari (le titre redescendait de 24 px puis remontait). Maintenant : apparition une fois, puis le titre
   devient fixe ; la dorure ne passe qu'ensuite, une seule fois, sur un titre immobile. */
/* (retiré v99) */
/* (retiré v99) */
/* v98 : une fois apparu (classe .ap retirée), le titre est visible pour de bon (la règle des sections le cachait sans animation) */
/* (retiré v99) */

/* v99 (09/11) : dorure SANS animation (une animation sur le titre remplaçait celle d'apparition de la section → le titre
   redescendait puis remontait quand la ligne arrivait). Maintenant : simple glissement du reflet (transition), le titre ne bouge jamais.
   Le reflet doré traverse les lettres une seule fois de gauche à droite, puis le titre reste blanc. */
.novyram-cta .nc-titre{transition:background-position 2.6s cubic-bezier(.45,.05,.3,1) .2s!important}
.novyram-cta.nc-dore .nc-titre{background-position:0 0!important}
@media(prefers-reduced-motion:reduce){.novyram-cta .nc-titre{transition:none!important}}

/* v100 (09/11) : CAUSE RÉELLE du titre trop bas. Les textes des sections ont leur propre apparition (effets.css : « section.etape.vue
   .wrap > * » → animation apparait) qui prenait le dessus sur l'apparition .ap (v89) : les éléments apparaissaient bien, mais leur
   décalage de départ (24 px vers le bas) n'était jamais annulé → titre, texte et bouton restaient 24 px trop bas pour toujours.
   Maintenant l'apparition .ap est la seule à s'appliquer à ces éléments, et elle les ramène bien à leur place. */
section.etape .wrap > .ap{animation:none!important}
section.etape .wrap > .ap.ap-vu{animation:apparition 1s cubic-bezier(.16,.7,.3,1) var(--ap-d,0s) both!important}

/* v101 (09/11) : la dorure de « Ce site vous plaît ? » repasse à chaque fois que la ligne atteint son rond (remise au départ sans transition) */
.novyram-cta.nc-raz .nc-titre{transition:none!important}

/* v102 (09/11) : (1) petit point sur le trajet de la ligne (section citation) : c'était le bout ARRONDI de la branche dorée vers le nom,
   visible même avant qu'elle soit tracée → bout droit (en plus, la branche s'arrête encore plus net au bord de la lettre).
   (2) le reflet doré de « Ce site vous plaît ? » part juste après que la ligne touche le cercle (sans attente, départ plus vif). */
.fg-branche path{stroke-linecap:butt!important}
.novyram-cta .nc-titre{transition:background-position 2.4s cubic-bezier(.3,.1,.3,1) .05s!important}
.novyram-cta.nc-raz .nc-titre{transition:none!important}

/* v104 (09/11) : APERÇUS de la flèche au bout de la ligne dorée (adresse ?fl=2 à 5 ; sans = actuelle). Rien ne suit la souris,
   rien ne scintille. 2 respiration (au repos) · 3 double chevron en cascade (au repos) · 4 élastique (suit la vitesse du défilement)
   · 5 perle d'or qui glisse jusqu'à la pointe (au repos). */
html[class*="fl-"] #fil-fleche{opacity:0!important}
.pointe{position:absolute;left:50%;bottom:0;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .4s ease}
.pointe.visible{opacity:1}
.pointe .chev{position:absolute;left:-3.5px;bottom:-1px;width:7px;height:7px;border-right:1px solid var(--t2,#e2bf7e);border-bottom:1px solid var(--t2,#e2bf7e);
  rotate:45deg;filter:drop-shadow(0 0 3px rgba(217,178,106,.5));opacity:.8;transition:rotate .45s cubic-bezier(.2,.7,.2,1),translate .45s cubic-bezier(.2,.7,.2,1)}
.pointe.haut .chev{rotate:225deg;translate:0 -3px}
/* 2 respiration */
.fl-2 .pointe .chev{animation:fl-respire 2.6s ease-in-out infinite}
@keyframes fl-respire{0%,100%{margin-bottom:0}50%{margin-bottom:-4px}}
.fl-2 .pointe.defile .chev,.fl-2 .pointe.haut .chev{animation-play-state:paused}
/* 3 double chevron */
.fl-3 .pointe .chev.c2{bottom:-7px}
.fl-3 .pointe.haut .chev.c2{bottom:5px}
.fl-3 .pointe .chev{animation:fl-cascade 2.2s ease-in-out infinite}
.fl-3 .pointe .chev.c2{animation-delay:.35s}
@keyframes fl-cascade{0%,100%{opacity:.25}35%{opacity:.95}70%{opacity:.25}}
.fl-3 .pointe.defile .chev{animation:none;opacity:.8}
/* 4 élastique */
.fl-4 .pointe{translate:0 var(--e,0px);transition:opacity .4s ease,translate .55s cubic-bezier(.2,.8,.25,1)}
/* 5 perle d'or */
.pointe .perle{position:absolute;left:-1.5px;bottom:2px;width:3px;height:3px;border-radius:50%;background:#fff1d2;
  box-shadow:0 0 6px 1px rgba(240,200,130,.75);opacity:0}
.fl-5 .pointe .perle{animation:fl-perle 3.2s cubic-bezier(.45,0,.3,1) infinite}
@keyframes fl-perle{0%{translate:0 -46px;opacity:0}12%{opacity:1}42%{translate:0 -3px;opacity:1}52%{translate:0 -1px;opacity:0}100%{translate:0 -1px;opacity:0}}
.fl-5 .pointe.defile .perle,.fl-5 .pointe.haut .perle{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.pointe .chev,.pointe .perle{animation:none!important}}

/* v105 (09/11) : flèche « respiration » CHOISIE (par défaut) — mouvement TRÈS léger : 2 px, lent (3,4 s), seulement quand on a arrêté
   de défiler (pendant le défilement : immobile à sa place), dans le sens de la flèche (vers le bas, ou vers le haut si elle pointe en haut). */
.fl-2 .pointe .chev{--amp:-2px;animation:fl-respire2 3.4s ease-in-out infinite}
.fl-2 .pointe.haut .chev{--amp:2px}
@keyframes fl-respire2{0%,100%{margin-bottom:0}50%{margin-bottom:var(--amp)}}
.fl-2 .pointe.defile .chev{animation:none}
.fl-2 .pointe.haut .chev{animation-play-state:running}

/* =====================================================================
   v108 (11/11) : GALERIE — (1) ordinateur : 3 photos = 3 colonnes égales sur une seule ligne, quel que soit le navigateur
   (Safari en mettait 2 + 1) ; (2) téléphone : le volet d'ouverture des photos marche aussi (le modèle le coupait sous 720 px).
   ===================================================================== */
@media(min-width:721px){
  #galerieAuto[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #galerieAuto[data-n="3"] figure{grid-column:auto!important}
}
@media(max-width:720px){
  html.gal-4:not(.js-attente) #galerieAuto figure.reveal{transition:clip-path 1.5s cubic-bezier(.77,0,.18,1) calc(var(--i,0) * .22s)!important}
}

/* v108 (11/11) : APERÇUS de la galerie sur TÉLÉPHONE (3 photos), adresse ?galtel=2 à 4 (sans = actuelle : 2 côte à côte + 1 large dessous) */
@media(max-width:720px){
  /* 2 · une grande dessus, deux côte à côte dessous */
  html.galtel-2 #galerieAuto[data-n="3"] figure{grid-column:span 1!important;aspect-ratio:3/3.6!important}
  html.galtel-2 #galerieAuto[data-n="3"] figure:first-child{grid-column:span 2!important;aspect-ratio:16/10!important}
  /* 3 · mosaïque : une haute à gauche, deux empilées à droite */
  html.galtel-3 #galerieAuto[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html.galtel-3 #galerieAuto[data-n="3"] figure{grid-column:2!important;aspect-ratio:1/1!important}
  html.galtel-3 #galerieAuto[data-n="3"] figure:first-child{grid-column:1!important;grid-row:1 / span 2!important;aspect-ratio:auto!important;height:auto!important}
  /* 4 · les trois l'une sous l'autre, en grand */
  html.galtel-4 #galerieAuto[data-n="3"]{grid-template-columns:minmax(0,1fr)!important}
  html.galtel-4 #galerieAuto[data-n="3"] figure{grid-column:1!important;aspect-ratio:4/3!important}
}

/* v108e : plan Google en attente (pas encore chargé) = invisible, comme avant son chargement */
iframe[data-attente]{opacity:0!important}


/* =====================================================================
   v109 (11/11) : VERSION TÉLÉPHONE (classe html.tel-v2, posée par propositions.js ; ?tel=0 = ancienne version pour comparer)
   ===================================================================== */
@media(max-width:720px){
  /* Héros : le nom du commerce s'affiche (le modèle le cachait), avec son apparition mot par mot ; petit titre doré au-dessus
     (centré, un trait de chaque côté) quand il y a la place. Tout est calé dans le 1er écran par propositions.js. */
  html.tel-v2 .hero.sans-logo h1,html.tel-v2 .hero h1{display:block!important}
  html.tel-v2 .hero .eyebrow.intro{display:flex!important;justify-content:center;align-items:center;gap:12px;text-align:center;margin:0 auto 14px!important}
  html.tel-v2 .hero .eyebrow.intro{white-space:nowrap;letter-spacing:.16em!important;font-size:11.5px!important;gap:10px}
  html.tel-v2 .hero .eyebrow::before{flex:0 0 22px;width:22px!important;margin:0!important}
  html.tel-v2 .hero .eyebrow::after{content:"";display:block;flex:0 0 22px;height:1px;background:currentColor;opacity:.8;transform-origin:right;animation:trace .7s var(--doux,ease) .6s both}
  html.tel-v2 .hero > .wrap{padding-top:var(--tel-pt,0px)!important}
  html.tel-v2 .hero{padding-top:0!important;padding-bottom:var(--tel-pb,200px)!important;align-items:flex-start!important}
  html.tel-v2 .hero .tagline{margin-top:var(--tel-g1,22px)!important}
  html.tel-v2 .hero .cta-row{margin-top:var(--tel-g2,30px)!important}
  html.tel-v2 .hero .note-google{margin-top:var(--tel-g3,16px)!important}
  /* niveaux de resserrement (petits écrans) */
  html.tel-v2.tel-n1 .hero .eyebrow.intro{display:none!important}
  html.tel-v2.tel-n2 .hero .fleche-bas{display:none!important}
  html.tel-v2.tel-n3 .hero .tagline{font-size:16px!important;line-height:1.5!important}
  html.tel-v2.tel-n3 .hero h1{font-size:clamp(2.1rem,10.5vw,2.6rem)!important}
  html.tel-v2.tel-n4 .hero .fb-ruban{display:none!important}
  html.tel-v2.tel-n5 .hero #statut-carte,html.tel-v2.tel-n5 .hero .statut-carte{display:none!important}   /* très petits écrans : les horaires restent dans Infos */
  /* note Google sur une seule ligne, même sur les plus petits téléphones */
  html.tel-v2 .hero .note-google{flex-wrap:nowrap!important;white-space:nowrap}
  /* Infos : horaires sur 2 lignes nettes (sans point qui traîne) ; liens plus faciles à toucher (zone agrandie, même dessin) */
  html.tel-v2 .inf-v .inf-l .inf-sep{display:none}
  html.tel-v2 .inf-v .inf-l .inf-h{white-space:nowrap}
  html.tel-v2 .inf-btn,html.tel-v2 .inf-tel{padding-top:10px!important;padding-bottom:10px!important;margin-top:-10px!important;margin-bottom:-10px!important;background-clip:content-box}
  /* Citation : le grand nom doré en fond est posé dans un espace libre ENTRE la citation et les mentions (avant : derrière la 1re mention) */
  html.tel-v2 .apropos .points{margin-top:var(--fg-esp,0px)!important}
  html.tel-v2 .apropos .filigrane{top:var(--fg-top,50%)!important}
  /* Infos : un vrai espace entre le bas du plan et la section suivante (« Un événement à organiser ? ») */
  html.tel-v2 #infos{padding-bottom:44px!important}
}
@media(min-width:721px){ .inf-v .inf-l .inf-sep{display:inline} }
@media(max-width:360px){
  html.tel-v2 .demo-bar{padding:6px 12px!important;letter-spacing:.04em!important;font-size:11px!important}
  html.tel-v2 .hero .note-google{font-size:.95rem!important;gap:6px!important}
  html.tel-v2 .hero .note-google .etoiles{font-size:1.05rem!important}
}

/* v110 (11/11) : téléphone — le plan Google ne dépasse plus de son cadre (il faisait 340 px dans un cadre de 260 px :
   le bas de la carte passait sous « Un événement à organiser ? ») */
@media(max-width:860px){
  .inf-v .inf-plan .carte-map{height:100%!important;min-height:0!important}
  .inf-v .inf-plan .carte-map iframe{height:100%!important}
}

/* v110b (11/11) : « Ouvert / Fermé actuellement » vivant — choix d'Alexis : POULS DU POINT (le petit point respire et une onde fine
   s'en échappe toutes les 2,6 s, en continu). Sur la carte du héros (point existant) et dans le badge des Infos (petit point ajouté). */
.inf-v .inf-statut{display:inline-flex;align-items:center;gap:7px}
.inf-v .inf-statut .st-pt{position:relative;width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.inf-v .inf-statut .st-pt,.statut-carte .statut-dot{animation:st-respire 2.6s ease-in-out infinite}
.inf-v .inf-statut .st-pt::after,.statut-carte .statut-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid currentColor;animation:st-pouls 2.6s ease-out infinite;pointer-events:none}
.statut-carte .statut-dot{position:relative;color:#2e9e5b}
.statut-carte.closed .statut-dot{color:#e0524b}.statut-carte.soon .statut-dot{color:#e08a1e}
@keyframes st-pouls{0%{opacity:.7;scale:1}70%,100%{opacity:0;scale:2.8}}
@keyframes st-respire{0%,100%{opacity:1}50%{opacity:.65}}
@media(prefers-reduced-motion:reduce){.inf-v .inf-statut .st-pt,.statut-carte .statut-dot,.inf-v .inf-statut .st-pt::after,.statut-carte .statut-dot::after{animation:none}}

/* v111 (11/11) : bouton « Suivez-nous sur Facebook » du héros — respiration très légère et continue (zoom / dézoom 3,5 %,
   3,8 s), qui commence une fois son apparition terminée. Son apparition (entreeGlisse) est gardée telle quelle, le survol aussi. */
.hero .fb-ruban.intro{animation:entreeGlisse .8s ease .85s both,fb-respire 3.8s ease-in-out 3.6s infinite}
html.hl-a .hero .fb-ruban.intro{animation-delay:1.32s,3.6s!important}   /* l'apparition garde son moment, la respiration le sien (sinon elle effaçait l'apparition) */
@keyframes fb-respire{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.hero .fb-ruban.intro{animation:none}}

/* v111b (11/11) : TÉLÉPHONE — au chargement, tout arrive DE HAUT EN BAS, dans l'ordre où on le voit :
   petit titre → nom (mot par mot) → phrase → bouton → note Google → carte des horaires → Facebook → flèche, bande et ligne.
   (avant : le nom arrivait avant le petit titre, et Facebook avant les horaires — ordre pensé pour l'ordinateur) */
@media(max-width:720px){
  html.hl-a.tel-v2 .hero .eyebrow{animation-delay:.45s!important}
  html.hl-a.tel-v2 .hero .eyebrow::before,html.hl-a.tel-v2 .hero .eyebrow::after{animation-delay:.5s!important}
  html.hl-a.tel-v2 .hero h1 em i{animation-delay:1.35s!important}
  html.hl-a.tel-v2 .hero .tagline{animation-delay:1.02s!important}
  html.hl-a.tel-v2 .hero .cta-row,html.hl-a.tel-v2 .hero .cta-row.intro > *{animation-delay:1.14s!important}
  html.hl-a.tel-v2 .hero .note-google{animation-delay:1.26s!important}
  html.hl-a.tel-v2 .hero .statut-carte{animation-delay:1.38s!important}
  html.hl-a.tel-v2:not(.js-attente) .hero .statut-carte{transition:opacity .8s ease 1.38s,scale .25s ease!important}
  html.hl-a.tel-v2 .hero .fb-ruban.intro{animation-delay:1.5s,3.6s!important}
  html.hl-a.tel-v2 .hero .fb-ruban.intro > *{animation-delay:1.5s!important}
  html.hl-a.tel-v2:not(.js-attente) .fleche-bas{transition:opacity .9s cubic-bezier(.2,.7,.2,1) 1.66s!important}
}

/* v112 menu rond (burger relié à la ligne dorée) */
html.bm2 #menuMobile{display:none!important}
html.bm2 #entete .burger-btn{position:relative;z-index:2}
html.bm2 #entete .burger-btn span{transition:transform .45s cubic-bezier(.65,0,.35,1),opacity .3s ease .1s,background-color .5s ease}
html.bm2.bm-or #entete .burger-btn span{background:#e2bf7e}
html.bm2.bm-ouvert #entete .burger-btn[aria-expanded="true"] span{opacity:0;background:#e2bf7e}
html.bm2.bm-ouvert #entete .burger-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) scaleX(0)}
html.bm2.bm-ouvert #entete .burger-btn[aria-expanded="true"] span:nth-child(2){transform:scaleX(0)}
html.bm2.bm-ouvert #entete .burger-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) scaleX(0)}
html.bm2 .bm-rond{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;border:1px solid #e2bf7e;background:color-mix(in srgb,var(--surface,#1c1410) 60%,#000);transform:scale(0);transition:transform .5s cubic-bezier(.34,1.4,.5,1) .12s;pointer-events:none;box-sizing:border-box}
html.bm2 .bm-rond::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#e2bf7e}
html.bm2 .bm-rond::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid #e2bf7e;opacity:0}
html.bm2.bm-ouvert .bm-rond{transform:scale(1)}
html.bm2.bm-ouvert .bm-rond::before{animation:bm-pt 2.6s ease-in-out .6s infinite}
html.bm2.bm-ouvert .bm-rond::after{animation:bm-halo 2.6s ease-out .6s infinite}
@keyframes bm-halo{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.7)}}
@keyframes bm-pt{0%,100%{transform:scale(1)}50%{transform:scale(.7)}}
html.bm2 .bm-tige{position:absolute;width:1px;background:linear-gradient(#e2bf7e,#d3a964);transform:scaleY(var(--bm-p,0));transform-origin:bottom;transition:transform .12s linear;pointer-events:none;display:none}
html.bm2.bm-ouvert .bm-tige{transform:scaleY(1);transition:transform .3s ease .25s}
#bmMenu{display:none}
@media (max-width:860px){
html.bm2 .bm-tige{display:block}
#bmMenu{--bm-h:106px;display:block;position:fixed;left:0;right:0;bottom:0;top:0;z-index:49;overflow:hidden;overscroll-behavior:contain;background:radial-gradient(120% 70% at 85% 8%,color-mix(in srgb,var(--surface,#261c16) 86%,#e2bf7e) 0%,color-mix(in srgb,var(--surface,#261c16) 72%,#000) 55%,color-mix(in srgb,var(--surface,#261c16) 45%,#000) 100%);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s;color:var(--ink,#f5ede2)}
html.bm-ouvert #bmMenu{opacity:1;visibility:visible;transition:opacity .45s ease}
#bmMenu .bm-lueur{position:absolute;right:-70px;top:calc(var(--bm-h) - 50px);width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(226,191,126,.09),transparent 70%);pointer-events:none}
#bmMenu .bm-fond-rail,#bmMenu .bm-rail{position:absolute;left:calc(var(--bm-x,20px) - .5px);top:var(--bm-h);width:1px}
html.bm-ouvert .barre-mobile{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease!important}
#bmMenu .bm-fond-rail{background:rgba(239,214,162,.14)}
#bmMenu .bm-rail{height:0;background:linear-gradient(#d3a964,#e2bf7e)}
#bmMenu .bm-anneau{position:absolute;left:calc(var(--bm-x,20px) - 12px);top:0;width:24px;height:24px;margin-top:-12px;border-radius:50%;border:1px solid rgba(226,191,126,.6);box-sizing:border-box;opacity:0;pointer-events:none;transition:top .42s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
#bmMenu .bm-anneau.libre{transition:opacity .3s ease}
#bmMenu .bm-it{position:absolute;left:0;right:0;height:70px;margin-top:-35px;display:block;text-decoration:none;color:inherit;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
html.bm-ouvert #bmMenu .bm-it.vu{opacity:1;transform:none}
#bmMenu .bm-rd{position:absolute;left:calc(var(--bm-x,20px) - 4px);top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;border:1px solid #e2bf7e;background:color-mix(in srgb,var(--surface,#1c1410) 60%,#000);box-sizing:border-box;transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .3s}
#bmMenu .passe .bm-rd,#bmMenu .ici .bm-rd{background:#e2bf7e}
#bmMenu .ici .bm-rd{transform:scale(1.35)}
#bmMenu .allume .bm-rd{transform:scale(1.9);background:#e2bf7e}
#bmMenu .bm-tr{position:absolute;left:calc(var(--bm-x,20px) + 10px);top:50%;height:1px;width:14px;background:rgba(239,214,162,.3);transition:width .4s cubic-bezier(.2,.7,.2,1),background-color .3s}
#bmMenu .ici .bm-tr{width:28px;background:#e2bf7e}
#bmMenu .sur .bm-tr{width:34px;background:#e2bf7e}
#bmMenu .bm-nmg{position:absolute;left:calc(var(--bm-x,20px) + 46px);right:16px;top:50%;transform:translateY(-55%);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#bmMenu .sur .bm-nmg{transform:translateY(-55%) translateX(6px) scale(1.07)}
#bmMenu .bm-nm{display:block;font-family:var(--bm-font,Georgia,serif);font-size:26px;font-weight:400;line-height:1.05;transition:color .3s}
#bmMenu .ici .bm-nm{color:#e2bf7e;font-style:italic}
#bmMenu .sur .bm-nm{color:#e2bf7e}
#bmMenu .bm-ss{display:block;font-size:11.5px;color:color-mix(in srgb,var(--ink,#f5ede2) 55%,transparent);margin-top:6px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bmMenu .ici .bm-ss{color:color-mix(in srgb,#e2bf7e 75%,transparent)}
#bmMenu .bm-pied{position:absolute;left:calc(var(--bm-x,20px) + 22px);right:20px;bottom:calc(26px + env(safe-area-inset-bottom));opacity:0;transform:translateY(10px);transition:opacity .5s ease .5s,transform .5s ease .5s}
html.bm-ouvert #bmMenu .bm-pied{opacity:1;transform:none}
html:not(.bm-ouvert) #bmMenu .bm-pied{transition-delay:0s}
#bmMenu .bm-inf{margin:0 0 14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--ink,#f5ede2) 55%,transparent)}
#bmMenu .bm-bts{display:flex;gap:10px}
#bmMenu .bm-bts a{flex:1;text-align:center;padding:13px 0;border-radius:8px;font-size:14px;text-decoration:none;transition:transform .25s ease}
#bmMenu .bm-bts a:active{transform:scale(.97)}
#bmMenu .bm-a1{background:var(--accent,#ad976b);color:#1c1410}
#bmMenu .bm-a2{border:1px solid rgba(239,214,162,.35);color:var(--ink,#f5ede2)}
}
@media (prefers-reduced-motion:reduce){html.bm2.bm-ouvert .bm-rond::before,html.bm2.bm-ouvert .bm-rond::after{animation:none}}

/* v113 (11/11) TÉLÉPHONE ULTRA FLUIDE (html.sd, posé par effets.js) : les effets liés au défilement du héros, de la barre du haut
   et du burger sont maintenant joués par le navigateur lui-même (comme le défilement) au lieu d'être recalculés à chaque image
   par le script → plus de retard ni de saccade. Même rendu. ?sd=0 = ancienne façon (pour comparer). */
@property --sdo{syntax:'<number>';inherits:false;initial-value:1}
@keyframes sd-wrap{0%{--sdo:1;transform:translateY(0)}25%{--sdo:.557}50%{--sdo:.239}70%{--sdo:.073}85.5%{--sdo:0}100%{--sdo:0;transform:translateY(-60px)}}
@keyframes sd-voile{from{opacity:0}to{opacity:.75}}
@keyframes sd-bords{from{opacity:0}to{opacity:1}}
@keyframes sd-flotte{from{translate:0 0}to{translate:0 110px}}
@keyframes sd-logo{from{transform:scale(1)}to{transform:scale(1.16)}}
@keyframes sd-tige{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sd-or{0%{background-color:var(--ink,#f5ede2)}100%{background-color:#e2bf7e}}
html.sd.tr2 .hero > .wrap{opacity:var(--sdo,1)!important}
html.sd .hero > .wrap{animation:sd-wrap linear both;animation-timeline:scroll(root);animation-range:0px calc(var(--sd-h,640px) * .9);will-change:transform,opacity}
html.sd .t-voile{animation:sd-voile linear both;animation-timeline:scroll(root);animation-range:0px var(--sd-h,640px);will-change:opacity}
html.sd.tr2 .t-bords{box-shadow:inset 0 0 140px 50px var(--bg);animation:sd-bords linear both;animation-timeline:scroll(root);animation-range:0px var(--sd-h,640px);will-change:opacity}
html.sd.prop-E .hero-media img.e-pret{animation:e-eveil2 1.3s cubic-bezier(.2,.7,.2,1) both,e-respire 20s ease-in-out -6s infinite alternate,sd-flotte linear both!important;animation-timeline:auto,auto,scroll(root)!important;animation-range:normal,normal,0px 611px!important}
html.sd.hl-a.prop-E .hero-media img.e-pret{animation-delay:0s,1.3s,0s!important}
html.sd #entete .logo-entete{animation:sd-logo linear both;animation-timeline:scroll(root);animation-range:0px var(--sd-h,640px)}
html.sd .hero .btn-ligne{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:color-mix(in srgb,var(--bg,#1c1410) 55%,transparent)!important}
html.sd.bm2 .bm-tige{animation:sd-tige linear both;animation-timeline:scroll(root);animation-range:var(--sd-ba,700px) var(--sd-bb,770px);transition:none}
html.sd.bm2.bm-ouvert .bm-tige{animation:none;transform:scaleY(1)}
html.sd.bm2 #entete .burger-btn span{animation:sd-or linear both;animation-timeline:scroll(root);animation-range:var(--sd-ba,700px) var(--sd-bb,770px)}
html.sd.bm2.bm-ouvert #entete .burger-btn span{animation:none}