@font-face{font-family:Kaushan;src:url(fonts/kaushan.woff2) format("woff2");font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --carreau:#8e3b24;
  --creme:#f3ead8;
  --olive:#2f4a2a;
  --sauge:#b9c9a4;
  --orange:#e8683a;
  --jaune:#e9b429;
  --rotin:#c9964f;
  --encre:#2b2118;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--encre);font:16px/1.5 Nunito,sans-serif}
img{max-width:100%;display:block}
a{color:inherit}

/* bandeau en carreaux : le comptoir du café */
.bandeau{
  background-color:var(--carreau);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='120'%3E%3Cg fill='none' stroke='%23f3ead8' stroke-width='3'%3E%3Cpath d='M0 0V120M36 0V120M72 0V120M0 0H72'/%3E%3Cpath d='M18 0V0M0 60H0'/%3E%3C/g%3E%3Cpath d='M18 60H54' stroke='%23f3ead8' stroke-width='0'/%3E%3C/svg%3E");
  background-size:36px 120px;
  border-bottom:6px solid var(--creme);
}
.bandeau .interieur{
  max-width:900px;margin:0 auto;padding:10px 18px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;
}
.marque{
  font:1.5rem/1 Kaushan,cursive;text-decoration:none;color:var(--creme);
  background:var(--carreau);padding:6px 12px;transform:rotate(-2deg);display:inline-block;
}
.marque small{display:block;font:700 .62rem/1.2 Nunito,sans-serif;letter-spacing:.18em;text-transform:uppercase;margin-top:4px}
nav{background:var(--carreau);padding:6px 10px;display:flex;gap:6px;flex-wrap:wrap}
nav a{
  font:1.1rem/1 Kaushan,cursive;color:var(--creme);text-decoration:none;
  padding:6px 10px;border-bottom:3px solid transparent;
}
nav a:hover{border-bottom-color:var(--jaune)}
nav a[aria-current]{border-bottom-color:var(--orange)}

main{max-width:900px;margin:0 auto;padding:0 18px}

/* formes libres, comme sur l'affiche */
.tache{border-radius:62% 38% 55% 45% / 48% 58% 42% 52%}
.tache2{border-radius:40% 60% 48% 52% / 55% 40% 60% 45%}

.accueil{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;padding:28px 0 20px}
.accueil .photo{position:relative}
.accueil .photo::before{
  content:"";position:absolute;inset:-18px 24px 30px -18px;background:var(--jaune);z-index:0;
  border-radius:40% 60% 48% 52% / 55% 40% 60% 45%;transform:rotate(-4deg)
}
.accueil .photo img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:62% 38% 55% 45% / 48% 58% 42% 52%}
h1{font:clamp(2rem,5vw,2.8rem)/1.05 Kaushan,cursive;color:var(--olive);margin:0 0 .3em;font-weight:400}
h2{font:1.6rem/1.1 Kaushan,cursive;color:var(--carreau);font-weight:400;margin:0 0 .4em}
.mot{font:1.2rem/1.3 Kaushan,cursive;color:var(--orange);transform:rotate(-1.5deg);display:inline-block;margin:.2em 0 .6em}
.bouton{
  display:inline-block;background:var(--olive);color:var(--creme);text-decoration:none;
  font:700 1rem Nunito,sans-serif;padding:9px 20px;border-radius:999px;margin:4px 8px 4px 0
}
.bouton.clair{background:var(--creme);color:var(--olive);border:2px solid var(--olive);padding:7px 18px}
.bouton:hover{background:var(--orange);color:var(--encre);border-color:var(--orange)}

.pastilles{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 6px;padding:0;list-style:none}
.pastilles li{background:var(--sauge);padding:6px 16px;border-radius:999px;font-weight:700;font-size:.9rem;color:var(--olive)}
.pastilles li:nth-child(2){background:var(--orange);color:var(--encre)}
.pastilles li:nth-child(3){background:var(--jaune)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:20px 0;align-items:center}
.duo img{width:100%;max-width:340px;justify-self:center;border-radius:40% 60% 48% 52% / 55% 40% 60% 45%;aspect-ratio:1/1;object-fit:cover}
.duo.inverse img{order:2}

/* menu */
.entete{padding:24px 0 4px}
.entete p{max-width:42em}
.formule{
  display:grid;grid-template-columns:1fr auto;gap:8px 30px;align-items:center;
  padding:20px 28px;margin:16px 0;color:var(--creme)
}
.formule h3{font:clamp(1.6rem,4vw,2.2rem)/1 Kaushan,cursive;font-weight:400;margin:0}
.formule h3 span{display:block;font-size:1rem;margin-bottom:4px}
.formule ul{margin:8px 0 0;padding:0;list-style:none;font-weight:700;font-size:.95rem}
.formule li::before{content:"+ ";opacity:.8}
.formule li:first-child::before{content:""}
.prix{
  background:var(--creme);color:var(--encre);font:700 1.3rem Nunito,sans-serif;
  padding:9px 20px;border-radius:999px;white-space:nowrap
}
.f-olive{background:var(--olive);border-radius:48px 90px 60px 110px / 80px 50px 100px 56px}
.f-orange{background:var(--orange);color:var(--encre);border-radius:100px 50px 90px 60px / 60px 90px 50px 80px}
.f-sauge{background:var(--sauge);color:var(--encre);border-radius:60px 110px 50px 90px / 90px 56px 80px 50px}
.f-jaune{background:var(--jaune);color:var(--encre);border-radius:90px 60px 110px 48px / 50px 80px 56px 100px}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}
.photos img{width:100%;height:100%;max-height:300px;object-fit:cover;aspect-ratio:4/3}
.photos img:first-child{border-radius:55% 45% 52% 48% / 45% 55% 45% 55%}
.photos img:last-child{border-radius:45% 55% 40% 60% / 56% 44% 56% 44%}
.note{font-style:italic;color:var(--carreau)}

/* réservation */
.papier{
  max-width:600px;margin:20px 0 30px;padding:22px 26px;background:#fbf6ea;
  border:3px solid var(--encre);border-radius:8px 14px 10px 16px;transform:rotate(-.6deg)
}
.papier h2{margin-top:0}
.papier ul{padding-left:1.2em}
.papier li{margin:.4em 0}
.papier li::marker{color:var(--orange)}

footer{background:var(--olive);color:var(--creme);margin-top:30px}
footer .interieur{max-width:900px;margin:0 auto;padding:18px 18px;display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;align-items:center}
footer .nom{font:1.3rem Kaushan,cursive}
footer p{margin:0}
footer b{color:var(--jaune)}

@media(max-width:760px){
  body{font-size:17px}
  .accueil,.duo,.photos{grid-template-columns:1fr}
  .duo.inverse img{order:0}
  .formule{grid-template-columns:1fr;padding:28px 26px}
  .prix{justify-self:start}
  .bandeau .interieur{justify-content:center}
}
footer a{color:var(--creme)}footer a:hover{color:var(--jaune)}
.menu-image{margin:18px 0;text-align:center}.menu-image img{width:100%;max-width:420px;margin:0 auto;border-radius:18px 8px 16px 10px}