/* vidotto-pasta.com : allure de l'ancien site Xiizeos (2015-2021), sans JavaScript ni ressource exterieure. */
@font-face { font-family: 'Yanone Kaffeesatz'; font-weight: 300; font-display: swap; src: url('../fonts/yanone-kaffeesatz-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Yanone Kaffeesatz'; font-weight: 400; font-display: swap; src: url('../fonts/yanone-kaffeesatz-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Yanone Kaffeesatz'; font-weight: 700; font-display: swap; src: url('../fonts/yanone-kaffeesatz-latin-700-normal.woff2') format('woff2'); }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 300; font-size: 16pt; color: #222; background: #fff; }
strong, b { font-weight: 700; }
img, video { max-width: 100%; height: auto; }
a { color: #068328; }
a:focus-visible { outline: 3px solid #f19409; outline-offset: 2px; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 10000; background: #fff; padding: .5rem 1rem; }

/* en-tete d'accueil : deux photos qui se relaient (comme le diaporama d'origine, toutes les 5 s) */
.bloc_haut { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #bd0102; overflow: hidden; }
.diapo span { position: absolute; inset: 0; background: no-repeat center / cover; }
.diapo .fd1 { background-image: url('/upload/Design/bandeau_defil/pates-Fraiches-vidotto-pasta-cornebarrieu.jpg'); }
.diapo .fd2 { background-image: url('/upload/Design/bandeau_defil/pates-fraiche-restaurant-vidotto-pasta.jpg'); animation: relais 10s infinite; opacity: 0; }
@keyframes relais { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }
.headover { position: relative; z-index: 1; width: 100%; padding: 6rem 1rem 4rem; background: rgba(0,0,0,.2); text-align: center; }
#lelogo { width: 400px; border-radius: 10px; margin-bottom: 20px; }
#slogan { font-size: 24pt; color: #fff; text-shadow: 0 1px 1px #000; margin: 0; }

/* menu */
#menu { position: sticky; top: 0; z-index: 9999; background: #fff; border-bottom: 1px solid #e6e6e6; }
.menu { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.menu li { font-size: 14pt; line-height: 50px; text-align: center; }
.menu li + li { border-left: 1px solid rgba(0,0,0,.1); }
.menu a { display: block; padding: 0 1.1rem; color: #000; text-decoration: none; }
.menu a:hover, .menu a[aria-current] { color: #bd0102; }

/* bandeaux titres photo (parallaxe en CSS, comme l'effet d'origine) */
.bandeaux { background: #bd0102 no-repeat center / cover; background-attachment: fixed; padding: 200px 1rem; text-align: center; }
.bandeaux h1, .bandeaux h2 { margin: 0; font-size: 60pt; font-weight: 300; color: #fff; text-shadow: 0 1px 1px #000; }
.bandeaux span { border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 0 .3em 10px; }
.bandeaux.uni { padding: 90px 1rem; }

/* contenus centres, 900 px comme avant */
.contents { padding: 80px 1rem; }
.contents > div { max-width: 900px; margin: 0 auto; text-align: center; }
.contents p { margin: 0 0 1.2em; }
.titre-vert { color: #008000; font-size: 18pt; font-weight: 700; margin: 0 0 1em; }
.titre-rouge { color: #bd0102; font-size: 30pt; font-weight: 400; margin: 0 0 1em; }
.moyen { font-size: 14pt; }
.vert { color: #00aa00; }
.texte-legal { text-align: left !important; }
.texte-legal h2 { color: #bd0102; font-size: 20pt; font-weight: 400; margin: 1.6em 0 .4em; }

/* pied de page vert */
#foot { background: #068328; color: #fff; text-align: center; padding: 1.2rem 1rem; font-size: 14pt; }
#foot p { margin: .3rem 0; }
#foot a { color: #fff; }
#foot .top { text-decoration: none; font: bold 20pt arial, sans-serif; }

/* formulaire */
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; max-width: 46rem; margin: 0 auto; text-align: left; font-family: arial, sans-serif; font-size: 12pt; }
.contact-form .plein, .contact-form .note, .contact-form > p { grid-column: 1 / -1; }
.contact-form label { display: block; font-weight: 700; margin-bottom: .3rem; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; box-sizing: border-box; padding: .6rem .7rem; font: inherit; border: 1px solid #808080; border-radius: 6px; background: #fff; color: #222; }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-erreur { color: #a00; margin: .3rem 0 0; }
.contact-flash { padding: .8rem 1rem; border-radius: 6px; font-family: arial, sans-serif; font-size: 12pt; }
.contact-flash-ok { background: #e6f4ea; } .contact-flash-ko { background: #fdeaea; }
.bouton { display: inline-block; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: #068328; color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.bouton:hover, .bouton:focus-visible { background: #045a1b; }

@media (max-width: 760px) {
  body { font-size: 14pt; }
  .bandeaux { background-attachment: scroll; padding: 90px 1rem; }
  .bandeaux h1, .bandeaux h2 { font-size: 30pt; }
  #slogan { font-size: 18pt; }
  .menu li { font-size: 12pt; line-height: 40px; }
  .menu a { padding: 0 .6rem; }
  .contact-form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .diapo .fd2 { animation: none; }
  .bandeaux { background-attachment: scroll; }
}