/* Takeapic — pages client (configurateur + espace). Mobile d'abord. */
:root {
  --encre: #1D1A23;
  --accent: #C93A25;
  --accent-fonce: #A92F1D;
  --lien: #B3341F;
  --lien-survol: #8A2716;
  --second: #5E5A66;
  --bord: #CFCAD6;
  --trait: #E6E3EA;
  --doux: #F6F4F8;
  --piste: #EFEDF2;
  --choisi: #FDEEEA;
  --vert-fond: #E3F1E7;
  --vert: #1E5B32;
  --vert-plein: #2E7D4A;
  --ambre-fond: #FFF1D6;
  --ambre: #4A2E00;
  --erreur: #A3271A;
  --erreur-fond: #FCEBE8;
  --focus: #23396B;
  --titre: 'Bricolage Grotesque', system-ui, sans-serif;
  --texte: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--encre);
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--lien); }
a:hover { color: var(--lien-survol); }
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* ---------- En-tête ---------- */
.entete { border-bottom: 1px solid var(--trait); background: #FFFFFF; position: sticky; top: 0; z-index: 5; }
.entete-int { max-width: 640px; margin: 0 auto; padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.entete-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.logo { font-family: var(--titre); font-weight: 700; font-size: 22px; letter-spacing: -0.5px; color: var(--encre); text-decoration: none; }
.petit { font-size: 13px; color: var(--second); }
.barre { height: 4px; background: var(--piste); border-radius: 4px; overflow: hidden; }
.barre > span { display: block; height: 4px; background: var(--accent); transition: width .25s; }

/* ---------- Contenu ---------- */
main { max-width: 640px; margin: 0 auto; padding: 20px 16px 140px; }
.etape { display: flex; flex-direction: column; gap: 14px; }
h1 { margin: 0; font-family: var(--titre); font-size: 26px; line-height: 1.15; font-weight: 700; }
h1:focus { outline: none; }
h1:focus-visible { outline: 3px solid var(--focus); }
h2 { margin: 8px 0 0; font-size: 17px; font-weight: 600; }
p { margin: 0; }
.intro { color: var(--second); }
.note { font-size: 13px; color: var(--second); }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
legend { padding: 0; font-size: 17px; font-weight: 600; margin-bottom: 10px; }
legend.leg-petit { font-size: 14px; }

/* Cartes à choix (radio / case) */
.choix { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--bord); background: #FFFFFF; cursor: pointer; }
.choix:hover { border-color: #9A95A3; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choix:has(input:checked) { background: var(--choisi); border: 2px solid var(--accent); padding: 13px; }
.choix:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choix-haut { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.choix-desc { font-size: 13px; color: var(--second); line-height: 1.4; }
/* §12 : cartes « Modèle » (Bois / Métal) avec photo facultative */
.carte-modele .modele-visuel { display: block; border-radius: 8px; overflow: hidden; background: var(--piste); }
.carte-modele .modele-visuel:empty { display: none; }
.carte-modele .modele-visuel img { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
.carte-modele .libres { font-weight: 500; font-size: 13px; color: var(--second); white-space: nowrap; }
.carte-modele.indispo { cursor: not-allowed; background: var(--doux, #F6F5F8); border-style: dashed; }
.carte-modele.indispo .choix-haut > span:first-child { color: #6E6977; }
.carte-modele.indispo:hover { border-color: var(--bord); }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pastille { display: inline-block; font-size: 12px; padding: 3px 8px; border-radius: 20px; background: var(--piste); color: var(--encre); font-weight: 500; }
.pastille.ambre { background: var(--ambre-fond); color: #6B4200; }
.pastille.vert { background: var(--vert-fond); color: var(--vert); }

/* Case à cocher visible */
.case { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.case input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 22px; height: 22px;
  border-radius: 6px; border: 2px solid #8C8796; background: #FFFFFF; display: grid; place-content: center; cursor: pointer; }
.case input[type=checkbox]::before { content: ''; width: 12px; height: 7px; border: solid #FFFFFF; border-width: 0 0 3px 3px;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.case input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.case input[type=checkbox]:checked::before { opacity: 1; }
.case-texte { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.option { padding: 14px; border-radius: 12px; border: 1px solid var(--bord); background: #FFFFFF; }
.option:has(input:checked) { border-color: var(--accent); }
.option .prix { font-weight: 600; white-space: nowrap; }
.option.sous-option { margin: -4px 0 0 24px; border-style: dashed; }
.option-icone { flex: none; width: 28px; height: 28px; margin-top: -3px; color: var(--second); }
.option:has(input:checked) .option-icone { color: var(--accent); }
.option .prix { display: flex; flex-direction: column; align-items: flex-end; }
.option .prix-barre { font-weight: 400; font-size: 0.85em; color: var(--second); }

/* Champs */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .etiquette { font-weight: 600; font-size: 14px; }
.champ input, .champ textarea, .champ select {
  padding: 12px; border: 1px solid #8C8796; border-radius: 10px; font-size: 16px; background: #FFFFFF; width: 100%; }
.champ textarea { min-height: 96px; resize: vertical; }
.champ input[aria-invalid=true], .champ textarea[aria-invalid=true] { border: 2px solid var(--erreur); padding: 11px; }
.erreur-champ { color: var(--erreur); font-size: 13px; font-weight: 500; }
.erreur-champ:empty { display: none; }
.deux-col { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .deux-col { grid-template-columns: 1fr 1fr; } }
.bloc-adresse { gap: 12px; }
.bloc-adresse legend { margin-bottom: 6px; }
.cp-ville { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; }

.encart { padding: 14px; border-radius: 12px; background: var(--doux); display: flex; flex-direction: column; gap: 8px; }
.encart-ambre { padding: 14px; border-radius: 12px; background: var(--ambre-fond); color: var(--ambre); font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 10px; }
.encart-vert { font-size: 13px; padding: 10px 12px; background: var(--vert-fond); color: var(--vert); border-radius: 10px; }
.alerte { padding: 12px 14px; border-radius: 10px; background: var(--erreur-fond); color: var(--erreur); font-size: 14px; font-weight: 500; display: flex; flex-direction: column; gap: 8px; }
.alerte ul { margin: 0; padding-left: 18px; }
.succes { padding: 12px 14px; border-radius: 10px; background: var(--vert-fond); color: var(--vert); font-size: 14px; font-weight: 600; }

input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; }

/* Adresse de l'événement : liste de suggestions accessible (combobox, §10) */
.combo { position: relative; }
.combo input { padding: 12px; border: 1px solid #8C8796; border-radius: 10px; font-size: 16px; background: #FFFFFF; width: 100%; color: var(--encre); }
.combo input[aria-invalid=true] { border: 2px solid var(--erreur); padding: 11px; }
#bloc-anim .champ { margin-top: 14px; }
.suggestions { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: #FFFFFF; border: 1px solid var(--bord); border-radius: 10px; box-shadow: 0 8px 24px rgba(29, 26, 35, .12); max-height: 260px; overflow-y: auto; }
.suggestions[hidden] { display: none; }
.suggestions li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1.35; }
.suggestions li[aria-selected=true], .suggestions li:hover { background: var(--choisi); color: var(--encre); }
.suggestions li .sugg-ville { display: block; font-size: 13px; color: var(--second); }
.etat-lieu { font-size: 14px; color: var(--encre); font-weight: 500; }
.etat-lieu:empty { display: none; }
.etat-lieu.attention { color: var(--ambre); background: var(--ambre-fond); padding: 8px 10px; border-radius: 8px; font-weight: 500; }
.plage { font-size: 14px; font-weight: 600; color: var(--encre); }
.plage:empty { display: none; }
.recap-lieu { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

/* Créneaux */
.creneaux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .creneaux { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.creneau { padding: 10px 0; min-height: 44px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: #FFFFFF; border: 1px solid var(--bord); color: var(--encre); }
.creneau.conseille { background: var(--vert-fond); border-color: #7DB58E; color: var(--vert); }
.creneau[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.creneau:disabled { cursor: not-allowed; background: var(--doux); color: #6E6977; text-decoration: line-through; border-color: var(--trait); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 12px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; background: var(--accent); color: #FFFFFF; text-decoration: none; }
.btn:hover { background: var(--accent-fonce); color: #FFFFFF; }
.btn.incomplet { background: #E4E1E8; color: #4D4955; }
.btn-second { background: #FFFFFF; color: var(--encre); border: 1px solid var(--bord); }
.btn-second:hover { background: var(--doux); color: var(--encre); }
.btn-sombre { background: var(--encre); color: #FFFFFF; }
.btn-sombre:hover { background: #000000; }
.btn-vert { background: var(--vert-plein); }
.btn-vert:hover { background: #256A3E; }
.btn-retour { width: 48px; padding: 0; font-size: 20px; }
.btn-lien { background: none; border: none; padding: 0; color: var(--lien); text-decoration: underline; cursor: pointer; font-size: 14px; }
.btn:disabled { opacity: .6; cursor: progress; }

/* Pied (prix) */
.pied { position: fixed; left: 0; right: 0; bottom: 0; background: #FFFFFF; border-top: 1px solid var(--trait); z-index: 6;
  padding-bottom: env(safe-area-inset-bottom); }
.pied-int { max-width: 640px; margin: 0 auto; padding: 14px 16px 18px; display: flex; align-items: center; gap: 12px; }
.pied-prix { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pied-prix .montant { font-weight: 700; font-size: 18px; }
.pied-mention { color: var(--second); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Récap */
.recap { border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }
.recap-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--piste); font-size: 14px; }
.recap-ligne span:last-child { font-weight: 600; white-space: nowrap; }
.recap-total { display: flex; justify-content: space-between; padding: 13px 14px; background: var(--doux); font-weight: 700; }
dl.resume { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
dl.resume dt { color: var(--second); }
dl.resume dd { margin: 0; font-weight: 500; }

.chargement { color: var(--second); font-size: 14px; }

/* ---------- Espace client ---------- */
.onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: var(--doux); padding: 4px; border-radius: 10px; }
.onglet { padding: 9px 0; min-height: 40px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; background: transparent; color: var(--encre); }
.onglet[aria-selected=true] { background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.titre-date { font-family: var(--titre); font-size: 22px; font-weight: 700; }

.suivi { list-style: none; margin: 0; padding: 0; }
.suivi li { display: flex; gap: 12px; }
.suivi .rail { display: flex; flex-direction: column; align-items: center; }
.suivi .point { width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.suivi .point.fait { color: #FFFFFF; background: var(--vert-plein); }
.suivi .point.afaire { color: var(--accent); background: var(--choisi); border: 2px solid var(--accent); }
.suivi .point.plustard { color: var(--second); background: var(--doux); border: 2px solid var(--trait); }
.suivi .fil { width: 2px; flex: 1; min-height: 18px; background: var(--trait); }
.suivi li:last-child .fil { display: none; }
.suivi .corps { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; }
.suivi .corps strong { font-weight: 600; }

.carte { padding: 14px; border-radius: 12px; border: 1px solid var(--trait); display: flex; flex-direction: column; gap: 6px; }
.carte-titre { font-size: 13px; color: var(--second); }
.carte-val { font-weight: 600; }
.facture-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.facture-ligne .montant { font-weight: 700; white-space: nowrap; }
.avoirs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--piste); padding-top: 8px; }
.avoirs li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.btn-facture { align-self: flex-start; }
.actions-col { display: flex; flex-direction: column; gap: 8px; }
.action { padding: 14px; border-radius: 12px; border: 1px solid var(--bord); background: #FFFFFF; cursor: pointer; font-size: 15px; font-weight: 600; text-align: left; }
.action:hover { background: var(--doux); }
.action[aria-expanded=true] { border-color: var(--accent); background: var(--choisi); }
.action .petit { font-weight: 400; }

.apercu-zone { display: flex; justify-content: center; padding: 6px 0; }
.apercu { width: 220px; aspect-ratio: 2 / 3; display: flex; flex-direction: column; border-radius: 6px; box-shadow: 0 4px 16px rgba(29,26,35,.18); }
.apercu .photos { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; }
.apercu .photos span { background: #D8D4DD; border-radius: 3px; }
.apercu .photos span:nth-child(2), .apercu .photos span:nth-child(3) { background: #CBC6D1; }
.apercu .textes { padding: 4px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-height: 54px; }
.apercu .t1 { font-size: 20px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.apercu .t2 { font-family: Inter, sans-serif; font-size: 11px; letter-spacing: 2px; overflow-wrap: anywhere; }
.apercu.classique { background: #FFFDF8; } .apercu.classique .t1 { font-family: 'Playfair Display', Georgia, serif; }
.apercu.moderne { background: #FFFFFF; } .apercu.moderne .t1 { font-family: var(--titre); }
.apercu.sobre { background: #F3F2F5; } .apercu.sobre .t1 { font-family: Inter, sans-serif; }

.couleurs { display: flex; gap: 12px; flex-wrap: wrap; }
.couleur { position: relative; cursor: pointer; }
.couleur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.couleur span { display: block; width: 44px; height: 44px; border-radius: 50%; }
.couleur input:checked + span { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--encre); }
.couleur input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 5px; }
.modele { padding: 10px 0; text-align: center; font-size: 13px; }
.modele.choix:has(input:checked) { padding: 9px 0; }
.boutons-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.boutons-ligne .btn { flex: 1 1 160px; }

@media (min-width: 900px) {
  h1 { font-size: 30px; }
  main { padding-top: 32px; }
}
@media print {
  .entete, .pied, .onglets, .actions-col, .boutons-ligne { display: none !important; }
  [role=tabpanel][hidden] { display: block !important; }
}

/* Prix en direct : léger rebond à chaque changement du montant */
@media (prefers-reduced-motion: no-preference) {
  #pied-montant.maj { animation: prix-maj .45s ease-out; }
  @keyframes prix-maj { 0% { transform: scale(1.12); color: var(--accent); } 100% { transform: scale(1); } }
}
#pied-montant { display: inline-block; }

.carte-modele .modele-nom { font-weight: 400; color: var(--second); }

/* ---------- Page d'aide du responsable (/aide, §14) ---------- */
main.aide { padding-bottom: 48px; display: flex; flex-direction: column; gap: 16px; }
.aide-sommaire ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.aide-sommaire a { display: inline-block; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--bord); color: var(--encre);
  text-decoration: none; font-size: 13px; font-weight: 500; }
.aide-sommaire a:hover { background: var(--doux); }
.aide-carte { gap: 10px; scroll-margin-top: 80px; }
.aide-carte h2 { margin: 0; font-family: var(--titre); font-size: 19px; line-height: 1.2; }
.aide-resume { color: var(--second); }
.aide-etapes { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.aide-etapes li { padding-left: 2px; overflow-wrap: anywhere; }
.aide-video-bientot { align-self: flex-start; font-size: 13px; color: var(--second); background: var(--doux); border-radius: 999px; padding: 4px 10px; }
.aide-video { display: block; width: 100%; max-width: 100%; border-radius: 10px; background: var(--encre); aspect-ratio: 16 / 9; }
.aide-btn-video { align-self: flex-start; }
.aide-carte-assistance { border-color: var(--accent); background: var(--choisi); }
.aide-appel { display: flex; flex-direction: column; gap: 8px; }
.aide-btn-tel { width: 100%; font-size: 17px; }
.aide-numero { font-size: 15px; }

/* ---------- Retrouver ma réservation (/retrouver, §15) ---------- */
main.retrouver { padding-bottom: 48px; display: flex; flex-direction: column; gap: 16px; }
main.retrouver h1 { margin: 0; }
.retrouver-form { gap: 14px; }
.retrouver-form .btn { width: 100%; }
.retrouver .succes { overflow-wrap: anywhere; }
.lien-retrouver { margin: 0; }