/* Charte reprise de la brochure (circuits/index.html) : mêmes couleurs,
   mêmes polices, pour que les pages formulaire ne fassent pas « pièce rapportée ». */
:root {
  --rouge: #1B3A28;
  --navy: #1B3A28;
  --or: #C8A440;
  --creme: #FFF8EA;
  --azur: #1B3A28;
  --corail: #1B3A28;
  --jaune: #C8A440;
  --bleu-pale: #F7E8D0;
  --blanc: #FFFFFF;
  --gris: #6B6B6B;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--creme);
  color: #23201B;
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- en-tête */
header.v21 {
  background: linear-gradient(135deg, var(--rouge) 0%, #1B3A28 60%, var(--navy) 100%);
  color: var(--blanc);
  padding: 18px 20px;
  text-align: center;
  position: relative;
}
header.v21 .marque {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--blanc); text-decoration: none; font-weight: 700;
  position: absolute; left: 20px; top: 18px;
}
header.v21 .marque img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
header.v21 h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 3.2vw, 2rem); margin: 0 0 4px;
}
header.v21 p { margin: 0; opacity: .9; font-size: .95rem; }
header.v21 .langues { position: absolute; right: 20px; top: 20px; display: flex; gap: 4px;
  background: rgba(255,255,255,.15); border-radius: 999px; padding: 3px; }
header.v21 .langues button {
  border: 0; background: transparent; color: var(--blanc); font: inherit; font-size: .85rem;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
header.v21 .langues button.actif { background: var(--blanc); color: var(--navy); font-weight: 700; }

nav.fil { background: var(--blanc); border-bottom: 2px solid var(--or); padding: 10px 20px; text-align: center; }
nav.fil a { color: var(--navy); text-decoration: none; font-weight: 600; font-size: .92rem; margin: 0 12px; }
nav.fil a:hover { color: var(--rouge); }

/* ---------------------------------------------------------------- contenu */
main { max-width: 860px; margin: 0 auto; padding: 34px 20px 60px; }
h2 { font-family: 'Playfair Display', Georgia, serif; color: var(--navy);
     font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 10px; }
h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--navy); font-size: 1.2rem; margin: 26px 0 8px; }
.chapeau { color: #4A463F; margin: 0 0 26px; font-size: 1.03rem; }

.atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 22px 0 30px; }
.atout { background: var(--blanc); border: 1px solid var(--bleu-pale); border-radius: 12px; padding: 16px 18px; }
.atout strong { display: block; color: var(--navy); font-family: 'Playfair Display', Georgia, serif;
                font-size: 1.05rem; margin-bottom: 5px; }
.atout span { font-size: .93rem; color: #4A463F; }

table.circuits { width: 100%; border-collapse: collapse; margin: 8px 0 28px; background: var(--blanc);
                 border: 1px solid var(--bleu-pale); border-radius: 12px; overflow: hidden; font-size: .93rem; }
table.circuits th { background: var(--navy); color: var(--blanc); text-align: left; padding: 10px 12px; font-weight: 600; }
table.circuits td { padding: 10px 12px; border-top: 1px solid var(--bleu-pale); vertical-align: top; }
table.circuits tr:nth-child(even) td { background: #FFFCF5; }

/* ---------------------------------------------------------- formulaire */
form.v21 { background: var(--blanc); border: 1px solid var(--bleu-pale); border-radius: 14px;
           padding: 26px 24px; box-shadow: 0 2px 14px rgba(0,0,0,.04); }
.ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .ligne { grid-template-columns: 1fr; } }
.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 600; font-size: .9rem; color: var(--navy); margin-bottom: 5px; }
.champ .aide { font-weight: 400; color: var(--gris); font-size: .84rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #D9D2C4; border-radius: 8px;
  font: inherit; font-size: .95rem; background: #FFFDF8; color: inherit;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(214,169,54,.2);
}
.champ textarea { min-height: 110px; resize: vertical; }
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 18px; }
.case { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; line-height: 1.45; }
.case input { width: auto; flex: 0 0 auto; margin: 3px 0 0; }
.obligatoire { color: var(--rouge); }

/* piège à robots : invisible pour l'humain, rempli par les automates */
.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

button.envoyer {
  background: var(--rouge); color: var(--blanc); border: 0; border-radius: 999px;
  padding: 13px 34px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: background .15s;
}
button.envoyer:hover { background: #8E181C; }
.mention { font-size: .84rem; color: var(--gris); margin-top: 14px; }

/* ------------------------------------------------------------- WhatsApp */
.aussi { margin-top: 26px; padding: 16px 18px; background: #F2FBF7; border: 1px solid #CBE9DC;
         border-radius: 12px; font-size: .93rem; }
.aussi a { color: var(--azur); font-weight: 700; text-decoration: none; }

footer.v21 { background: var(--navy); color: #D8E4DE; text-align: center; padding: 26px 20px; font-size: .88rem; }
footer.v21 a { color: var(--jaune); text-decoration: none; }