/* ================================================================
   PAGE AJOUTÉE — reprise EXACTE de la maquette validée
   (_MAQUETTES/chezzio-pages-et-visibilite.html, colonne de droite).
   Mêmes polices, mêmes teintes, même mise en page. Rien n'a été réécrit.
   ================================================================ */
body.page-ajoutee{margin:0;background:#0b0a09}
.bandeau-prive{background:rgba(184,118,62,.18);border-bottom:1px solid rgba(212,165,116,.35);
  color:#e8cfae;padding:10px 18px;font:400 13px/1.5 'Raleway',sans-serif;text-align:center;position:relative;z-index:2}
.zio-modifiable{outline:2px dashed transparent;outline-offset:3px;transition:outline-color .15s;cursor:pointer}
.zio-modifiable:hover{outline-color:rgba(212,165,116,.85)}
.site-barre nav a{color:inherit;text-decoration:none;margin-left:15px}

/* ---------- Site public (identité Chez Zio : Cormorant Garamond + Raleway) ---------- */
.page-ajoutee{
  /* PAS d'overflow ici : cette classe est posée sur le <body>, et le navigateur
     propage l'overflow du body à la FENÊTRE. Un « overflow:hidden » y bloquait
     tout le défilement de la page — en direct comme dans l'aperçu du panel.
     Les deux bandeaux de fond (::before / ::after) sont en position absolue à
     l'intérieur de ce bloc : il n'y a rien à rogner. */
  background:#0b0a09;color:#efe9e1;padding:0 0 70px;position:relative;
  font-family:'Raleway','Open Sans',Arial,sans-serif;
}
.page-ajoutee::before{
  /* L'image vient du panel, par la variable --fond posée sur le <body> :
     écrite ici, elle n'était modifiable que par nous. */
  content:"";position:absolute;top:0;left:0;right:0;height:660px;z-index:0;
  background:var(--fond,url("/img/restaurant-table.jpg")) center 22%/cover no-repeat;
}
.page-ajoutee::after{
  content:"";position:absolute;top:0;left:0;right:0;height:660px;z-index:0;
  background:linear-gradient(180deg,rgba(11,10,9,.30) 0%,rgba(11,10,9,.58) 38%,rgba(11,10,9,.88) 72%,#0b0a09 100%);
}
.page-ajoutee > *{position:relative;z-index:1}

.site-barre{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:13px 18px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(12,11,10,.42);border-bottom:1px solid rgba(212,165,116,.16);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.site-barre b{font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;letter-spacing:.05em;text-transform:none;color:#f3ece3}
.site-barre nav{display:flex;gap:15px;flex-wrap:wrap;color:rgba(239,233,225,.62);font-size:11px}
.site-barre nav span.neuf{color:#d4a574;border-bottom:1px solid #b8763e;padding-bottom:2px}

.site-corps{padding:54px 26px 10px;max-width:760px;margin:0 auto}
.kicker{
  display:inline-block;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:#d4a574;border:1px solid rgba(212,165,116,.38);border-radius:99px;
  padding:7px 17px;margin-bottom:22px;background:rgba(184,118,62,.08);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.page-ajoutee h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(34px,5vw,52px);line-height:1.08;margin:0 0 22px;letter-spacing:.01em;color:#f6f1ea;
}
.filet{display:flex;align-items:center;gap:13px;margin:0 0 26px;color:#b8763e}
.filet i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(184,118,62,.55),transparent);max-width:90px}
.filet span{font-size:9px}
.page-ajoutee p{margin:0 0 15px;color:rgba(239,233,225,.82);font-weight:300;line-height:1.75}
.chapeau{font-size:16.5px}

.verre{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:22px;padding:28px 26px;margin:34px 0;
  -webkit-backdrop-filter:blur(26px) saturate(135%);backdrop-filter:blur(26px) saturate(135%);
  box-shadow:0 22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
}
.page-ajoutee h3{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:27px;margin:0 0 14px;color:#d4a574;letter-spacing:.015em;
}
.page-ajoutee ul.offre{margin:16px 0 0;padding:0;list-style:none}
.page-ajoutee ul.offre li{
  padding:13px 0 13px 28px;position:relative;font-weight:300;
  color:rgba(239,233,225,.86);border-top:1px solid rgba(255,255,255,.07);
}
.page-ajoutee ul.offre li:first-child{border-top:0}
.page-ajoutee ul.offre li::before{
  content:"";position:absolute;left:4px;top:21px;width:6px;height:6px;
  transform:rotate(45deg);background:#b8763e;
}
.mise-en-avant{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;
  font-size:21px;line-height:1.55;text-align:center;color:#f0e6d8;
  padding:30px 18px;margin:34px 0;
  border-top:1px solid rgba(212,165,116,.22);border-bottom:1px solid rgba(212,165,116,.22);
}
.photo-plat{
  border-radius:20px;overflow:hidden;margin:34px 0;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 60px rgba(0,0,0,.45);
}
.photo-plat img{width:100%;display:block}

.form label{display:grid;gap:7px;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:rgba(212,165,116,.85)}
.form .grille{display:grid;grid-template-columns:1fr 1fr;gap:17px}
@media (max-width:560px){.form .grille{grid-template-columns:1fr}}
.form label.large{grid-column:1/-1}
.form input,.form textarea{
  background:rgba(0,0,0,.3);border:0;border-bottom:1px solid rgba(255,255,255,.17);
  padding:11px 2px;font:inherit;font-weight:300;color:#f3ece3;border-radius:4px 4px 0 0;
  transition:border-color .25s;
}
.form input:focus,.form textarea:focus{outline:0;border-bottom-color:#b8763e}
.form input::placeholder,.form textarea::placeholder{color:rgba(239,233,225,.3)}
.envoyer{
  margin-top:26px;background:linear-gradient(135deg,#b8763e,#d4a574);color:#1a120b;
  border:0;border-radius:99px;padding:15px 40px;font:inherit;font-weight:600;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 12px 30px rgba(184,118,62,.3);
}
.sous-form{font-size:13px;color:rgba(239,233,225,.58);margin-top:16px;font-weight:300}
.presto{
  text-align:center;margin:46px 0 0;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:26px;font-weight:300;color:#d4a574;
}
.presto small{display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(239,233,225,.5);margin-top:10px;font-family:'Raleway',sans-serif}

/* page masquée */
.indispo{text-align:center;padding:90px 26px;max-width:520px;margin:0 auto}
.indispo .verre{padding:46px 30px}
.indispo .rond{width:62px;height:62px;border-radius:50%;background:rgba(184,118,62,.14);border:1px solid rgba(212,165,116,.3);display:grid;place-items:center;margin:0 auto 20px;font-size:23px}
.indispo h2{font-size:28px;margin-bottom:12px}
.indispo a{color:#d4a574}
.rappel{
  background:rgba(184,118,62,.13);border:1px solid rgba(212,165,116,.3);color:#e8cfae;
  border-radius:12px;padding:12px 15px;font-size:12.5px;margin:18px 26px 0;font-weight:300;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}

/* ---------- Champs du formulaire : obligation et consentement (03.10.2026) ---------- */
.page-ajoutee .form .requis{
  color:#d4a574;text-decoration:none;border:0;margin-left:3px;font-size:1.05em;
}
/* La case de consentement n'est pas un champ comme les autres : pas d'encadré,
   la case à gauche et le texte à droite, lisible d'un coup d'œil. */
.page-ajoutee .form label.consentement{
  display:flex;align-items:flex-start;gap:12px;text-transform:none;letter-spacing:0;
  font:400 14px/1.55 'Raleway',sans-serif;color:#cfc6ba;margin-top:4px;cursor:pointer;
}
.page-ajoutee .form label.consentement input[type="checkbox"]{
  width:20px;height:20px;min-width:20px;margin:1px 0 0;accent-color:#b8763e;cursor:pointer;
}
.page-ajoutee .form label.consentement span{flex:1}
.page-ajoutee .form label.consentement a{color:#d4a574;text-decoration:underline}
.page-ajoutee .form label.consentement a:hover{color:#e8cfae}

/* ---------- Résultat de l'envoi du formulaire ---------- */
.page-ajoutee .message-envoi{
  max-width:860px;margin:0 auto 18px;padding:14px 18px;border-radius:14px;
  font:400 15px/1.5 'Raleway',sans-serif;position:relative;z-index:2;
}
.page-ajoutee .message-envoi.reussi{background:rgba(78,168,122,.14);border:1px solid rgba(78,168,122,.42);color:#bfe6cf}
.page-ajoutee .message-envoi.rate{background:rgba(217,97,79,.14);border:1px solid rgba(217,97,79,.42);color:#f0c4bc}
/* L'intitulé est une grille : sans ce bloc, l'astérisque tombait à la ligne. */
.page-ajoutee .form label .intitule{display:block}