/* Socle commun de la DA Beausoleil (pages réservation et calendrier).
   L'accueil garde ses styles en ligne. */
:root{
  --papier:#FAF7F1;   /* le blanc du stand */
  --encre:#141210;    /* logo, tee-shirt, plaque */
  --fonte:#26221F;
  --kraft:#C89B6A;    /* cornets et barquettes */
  --kraft-fonce:#8E643C;
  --fraise:#D8323F;
  --pate:#F3E2BC;     /* pâte crue */
  --dore:#C47E2C;     /* pancake retourné */
  --dore-clair:#E3A752;
  --choco:#4A2614;
  --gris:#6B645D;
  --display:"Fraunces",Georgia,serif;
  --script:"Caveat",cursive;
  --texte:"Bricolage Grotesque",system-ui,sans-serif;
  --gouttiere:clamp(16px,4vw,56px);
  --ressort:cubic-bezier(.3,1.5,.5,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--texte);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gouttiere)}
.display{font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;font-weight:900;letter-spacing:-.025em;line-height:.92}
.script{font-family:var(--script);font-weight:700;line-height:1;letter-spacing:.01em}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bulle{display:inline-block;background:#fff;color:var(--encre);font-weight:700;font-size:.95rem;line-height:1.25;padding:.45em .75em;border-radius:10px;border:2.5px solid var(--encre);box-shadow:3px 3px 0 var(--encre);max-width:22ch}
.btn{display:inline-flex;align-items:center;gap:.6em;font:800 1rem/1 var(--texte);text-decoration:none;padding:1em 1.4em;border:2px solid var(--encre);background:var(--encre);color:var(--papier);border-radius:4px;box-shadow:4px 4px 0 var(--fraise);transition:transform .15s,box-shadow .15s;cursor:pointer}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--fraise)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--fraise)}
.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--fraise);outline-offset:3px}
.evitement{position:absolute;left:12px;top:-60px;z-index:60;background:var(--encre);color:var(--papier);padding:.7em 1em;border-radius:4px;font-weight:800;text-decoration:none;transition:top .2s}
.evitement:focus{top:12px}
.valance{height:125px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='100'%20viewBox='0%200%20120%20100'%3E%3Cdefs%3E%3CclipPath%20id='c'%3E%3Cpath%20d='M0%200H120V30A60.0%2030%200%200%201%200%2030Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath%20d='M0%200H120V30A60.0%2030%200%200%201%200%2030Z'%20transform='translate%280%206%29'%20fill='%23141210'%20opacity='.28'/%3E%3Cg%20clip-path='url%28%23c%29'%3E%3Crect%20width='120'%20height='100'%20fill='%23F3E2BC'/%3E%3Crect%20x='0'%20width='15'%20height='100'%20fill='%23C89B6A'/%3E%3Crect%20x='30'%20width='15'%20height='100'%20fill='%23C89B6A'/%3E%3Crect%20x='60'%20width='15'%20height='100'%20fill='%23C89B6A'/%3E%3Crect%20x='90'%20width='15'%20height='100'%20fill='%23C89B6A'/%3E%3C/g%3E%3Cpath%20d='M120%2030A60.0%2030%200%200%201%200%2030'%20fill='none'%20stroke='%23141210'%20stroke-width='4'%20stroke-linecap='round'/%3E%3Cline%20x1='0'%20y1='2'%20x2='120'%20y2='2'%20stroke='%23141210'%20stroke-width='4'/%3E%3Cline%20x1='0'%20y1='30'%20x2='120'%20y2='30'%20stroke='%23141210'%20stroke-width='2.5'%20opacity='.35'/%3E%3Cpath%20d='M22%2038%20Q34%2050%2052%2053'%20fill='none'%20stroke='%23fff'%20stroke-width='4'%20stroke-linecap='round'%20opacity='.75'/%3E%3Cline%20x1='0'%20y1='30'%20x2='0'%20y2='62'%20stroke='%23141210'%20stroke-width='3'/%3E%3Cpath%20d='M-9%2072%20Q0%2066%209%2072%20L11%2092%20Q0%2097%20-11%2092%20Z'%20fill='%238E643C'%20stroke='%23141210'%20stroke-width='3'%20stroke-linejoin='round'/%3E%3Cpath%20d='M-4%2076%20L-5%2091%20M4%2076%20L5%2091'%20stroke='%23141210'%20stroke-width='2'%20stroke-linecap='round'%20opacity='.45'/%3E%3Ccircle%20cx='0'%20cy='65'%20r='7'%20fill='%23C89B6A'%20stroke='%23141210'%20stroke-width='3'/%3E%3Ccircle%20cx='-2.5'%20cy='62.5'%20r='2'%20fill='%23fff'%20opacity='.8'/%3E%3Cline%20x1='120'%20y1='30'%20x2='120'%20y2='62'%20stroke='%23141210'%20stroke-width='3'/%3E%3Cpath%20d='M111%2072%20Q120%2066%20129%2072%20L131%2092%20Q120%2097%20109%2092%20Z'%20fill='%238E643C'%20stroke='%23141210'%20stroke-width='3'%20stroke-linejoin='round'/%3E%3Cpath%20d='M116%2076%20L115%2091%20M124%2076%20L125%2091'%20stroke='%23141210'%20stroke-width='2'%20stroke-linecap='round'%20opacity='.45'/%3E%3Ccircle%20cx='120'%20cy='65'%20r='7'%20fill='%23C89B6A'%20stroke='%23141210'%20stroke-width='3'/%3E%3Ccircle%20cx='117.5'%20cy='62.5'%20r='2'%20fill='%23fff'%20opacity='.8'/%3E%3C/svg%3E") 0 0/150px 125px repeat-x;background-color:var(--sous,var(--papier));position:relative;z-index:1;margin-bottom:-44px;pointer-events:none}
/* ———————— Mascotte : le p'tit pancake ———————— */
.mascotte{overflow:visible;display:block}
.mascotte .b{display:none}
.mascotte[data-humeur="content"] .b--content,.mascotte[data-humeur="choc"] .b--choc,.mascotte[data-humeur="inquiet"] .b--inquiet{display:inline}
.mascotte .m-yeux{transform-box:fill-box;transform-origin:center;animation:cligne 4.5s infinite}
@keyframes cligne{0%,92%,100%{transform:none}95%{transform:scaleY(.1)}}
.mascotte .m-corps,.mascotte .m-bras,.mascotte .m-jambe{transform-box:fill-box}
.mascotte.saute .m-corps,.mascotte.saute .m-bras,.mascotte.saute .m-jambe{animation:sauteM .6s var(--ressort)}
@keyframes sauteM{40%{transform:translateY(-16px) rotate(-4deg)}}
.mascotte.tremble{animation:tremble .45s linear}
@keyframes tremble{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.mascotte[data-humeur="choc"] .m-bras--g{transform:rotate(-30deg);transform-origin:right bottom}
.mascotte[data-humeur="choc"] .m-bras--d{transform:rotate(30deg);transform-origin:left bottom}
.mascotte--salut .m-bras--d{transform-origin:0% 100%;animation:salut 1.4s ease-in-out infinite}
@keyframes salut{0%,100%{transform:rotate(0)}25%{transform:rotate(-28deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-24deg)}}
.mascotte--plaque{position:absolute;left:-22px;top:-58px;width:100px;z-index:7;filter:drop-shadow(4px 5px 0 rgba(20,18,16,.18));cursor:pointer}
.mascotte--pied{position:absolute;right:2%;top:clamp(34px,5vw,64px);z-index:2;width:clamp(90px,10vw,130px);transform:rotate(6deg)}
.merci:focus{outline:none}
.mascotte--merci{width:110px;margin-bottom:6px}


@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.emo{display:inline-block;width:1.45em;height:1.45em;vertical-align:-.38em;margin:0 .05em}
.emo svg{width:100%;height:100%;overflow:visible}

/* Un élément marqué hidden reste caché, quel que soit son style. */
[hidden]{display:none!important}