/* ==========================================================================
   Pages intérieures : stages, contact / réservation, messages, pages légales.
   S'ajoute à base.css.
   ========================================================================== */

/* Titres */
h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

/* Page */
main { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }
.retour { display: inline-block; margin-bottom: 1.5rem; font-weight: 600; color: var(--framboise); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.chapo { margin-top: 1.25rem; max-width: 44rem; color: var(--doux); font-size: 1.15rem; }
.deux-colonnes { margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.infos > section + section { margin-top: 2.5rem; }
.infos h2 { margin-bottom: 1rem; }
.infos p + p { margin-top: .8rem; }
.infos p { color: var(--doux); }
.infos .sous-intro { margin-bottom: 1rem; }

/* Tarif */
.tarifs { display: grid; gap: 1rem; }
.tarif { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1.5rem; padding: 1.2rem 0; border-top: 1px solid rgba(46, 27, 22, .2); }
.tarif:last-child { border-bottom: 1px solid rgba(46, 27, 22, .2); }
.tarif h3 { font-size: 1.25rem; }
.tarif p { grid-column: 1; margin-top: .2rem; font-size: .98rem; }
.tarif .prix { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--titre); font-size: 1.6rem; color: var(--framboise); text-align: right; white-space: nowrap; }
.tarif .prix small { display: block; font-family: var(--texte); font-size: .88rem; color: var(--doux); }

/* Listes */
.inclus { list-style: none; padding: 0; margin: 0; }
.inclus li { padding: .6rem 0 .6rem 1.9rem; position: relative; border-bottom: 1px solid rgba(46, 27, 22, .12); }
.inclus li::before { content: ""; position: absolute; left: .15rem; top: 1.05rem; width: .9rem; height: .5rem; border-left: 2.5px solid var(--pistache-fonce); border-bottom: 2.5px solid var(--pistache-fonce); transform: rotate(-45deg); }
.domaines { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.domaines li { padding: .4rem .95rem; border-radius: 999px; background: var(--rose); font-weight: 500; font-size: .96rem; }
.domaines li:nth-child(3n+2) { background: #E3EDD0; }
.domaines li:nth-child(3n) { background: var(--sable); }
.etapes { list-style: none; counter-reset: etape; padding: 0; margin: 0; }
.etapes li { counter-increment: etape; position: relative; padding: .2rem 0 1.1rem 3rem; }
.etapes li::before { content: counter(etape); position: absolute; left: 0; top: .1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--framboise); color: #fff; font-family: var(--titre); display: grid; place-items: center; }
.etapes strong { display: block; font-weight: 600; }
.etapes span { color: var(--doux); }

/* Formulaire */
.formulaire { background: var(--blanc); border: 1px solid rgba(46, 27, 22, .12); border-radius: 20px; padding: clamp(1.4rem, 3vw, 2.2rem); }
.formulaire h2 { margin-bottom: .4rem; }
.formulaire .sous-titre { color: var(--doux); font-size: .98rem; margin-bottom: 1.5rem; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1rem; }
.champ { display: flex; flex-direction: column; gap: .35rem; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-weight: 600; font-size: .95rem; }
.champ .aide { font-weight: 400; color: var(--doux); }
.champ input, .champ select, .champ textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--chocolat); background: var(--vanille); border: 1.5px solid rgba(46, 27, 22, .3); border-radius: 10px; padding: .65rem .8rem; }
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: rgba(46, 27, 22, .55); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--framboise); outline-offset: 1px; border-color: var(--framboise); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.accord { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; color: var(--doux); margin-top: 1.25rem; }
.accord input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--framboise); flex: none; }
.accord a { color: var(--framboise); text-underline-offset: 3px; }
.formulaire .bouton { margin-top: 1.4rem; }
.contact-direct { margin-top: 1.4rem; font-size: .95rem; color: var(--doux); }
.contact-direct a { color: var(--framboise); text-underline-offset: 3px; font-weight: 600; }

/* Coordonnées (page contact) */
.coordonnees { margin: 0; display: grid; gap: 1rem; }
.coordonnees dt { font-size: .9rem; color: var(--doux); }
.coordonnees dd { margin: 0; font-size: 1.1rem; }
.coordonnees a { color: var(--framboise); text-underline-offset: 4px; font-weight: 600; }

/* Messages (merci / erreur) */
.message { max-width: 40rem; }
.message h1 { margin-bottom: 1.25rem; }
.message p + p { margin-top: 1rem; }
.message .actions { margin-top: 2rem; display: flex; gap: .9rem; flex-wrap: wrap; }
.message ul { margin: 1rem 0 0; padding-left: 1.25rem; }
.message li { margin-top: .3rem; }

/* Mobile */
@media (max-width: 860px) {
  .deux-colonnes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .champs { grid-template-columns: 1fr; }
  .tarif { grid-template-columns: 1fr; }
  .tarif .prix { grid-column: 1; grid-row: auto; text-align: left; }
}