/* Formation Serrurier Express — feuille de style
   Concept : le planning. Feuille d'agenda, papier réglé, encre, surligneur.
   Charte : encre #16181D · papier #F7F6F2 · cobalt #1F4FD8 · surligneur #FFE45C
   Aplats uniquement : ni dégradé, ni halo, ni flou, ni bouton pilule.
   Titres : Zilla Slab · Texte : Figtree */

:root {
  --encre: #16181D;
  --encre-2: #2A2D35;
  --gris: #555A63;
  --papier: #F7F6F2;
  --papier-2: #EEECE5;
  --blanc: #FFFFFF;
  --regle: #DAD7CD;
  --cobalt: #1F4FD8;
  --cobalt-fonce: #1739A6;
  --cobalt-pale: #E7EDFC;
  --surligneur: #FFE45C;
  --rouge: #B42318;
  --titre: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --texte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--texte); font-size: 1.0625rem; line-height: 1.6; color: var(--encre); background: var(--papier); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cobalt-fonce); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--encre); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.15; margin: 0 0 0.75rem; color: var(--encre); }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
mark { background: var(--surligneur); color: var(--encre); padding: 0 0.15em; }
ul, ol { margin: 0 0 1rem; }

.cadre { max-width: 74rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .cadre { padding: 0 1.5rem; } }

.evitement { position: absolute; left: 1rem; top: -5rem; z-index: 100; background: var(--encre); color: var(--blanc); padding: 0.6rem 1rem; font-weight: 700; }
.evitement:focus { top: 1rem; color: var(--blanc); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.surtitre { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cobalt-fonce); margin: 0 0 0.5rem; }
.intro { font-size: 1.1rem; color: var(--gris); max-width: 44rem; }
.chapo { font-size: 1.2rem; color: var(--encre-2); max-width: 40rem; }
.renvoi { font-weight: 500; margin-top: 1.5rem; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block; font: inherit; font-weight: 700; line-height: 1.25; text-decoration: none; text-align: center; cursor: pointer;
  background: var(--cobalt); color: var(--blanc); border: 2px solid var(--cobalt); border-radius: var(--r); padding: 0.75rem 1.3rem;
  transition: background-color .15s, color .15s, border-color .15s;
}
.bouton:hover { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.bouton--creux { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton--creux:hover { background: var(--encre); color: var(--blanc); }
.bouton--jaune { background: var(--surligneur); color: var(--encre); border-color: var(--surligneur); }
.bouton--jaune:hover { background: var(--blanc); border-color: var(--blanc); color: var(--encre); }
.bouton:disabled { opacity: .6; cursor: progress; }
.boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }

/* ---------- En-tête ---------- */
.tete { background: var(--blanc); border-bottom: 2px solid var(--encre); position: relative; z-index: 50; }
.tete__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--encre); }
.marque img { width: 40px; height: 40px; }
.marque__nom { font-family: var(--titre); font-size: 1.2rem; font-weight: 600; line-height: 1.1; }
.marque__nom b { font-weight: 700; color: var(--cobalt); }
@media (max-width: 30rem) { .marque__nom b { display: block; } .marque__nom { font-size: 1.1rem; } }
.menu-bouton { display: none; font: inherit; font-weight: 700; background: var(--blanc); color: var(--encre); border: 2px solid var(--encre); border-radius: var(--r); padding: 0.4rem 0.9rem; cursor: pointer; }
.js .menu-bouton { display: inline-block; }
.menu ul { list-style: none; margin: 0; padding: 0 0 1rem; display: flex; flex-direction: column; }
.js .menu { display: none; width: 100%; }
.js .menu.est-ouvert { display: block; }
.menu a { display: block; padding: 0.6rem 0; text-decoration: none; color: var(--encre); font-weight: 500; border-bottom: 1px solid var(--regle); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--cobalt-fonce); }
.menu a[aria-current="page"] { font-weight: 700; }
.menu__cta a { margin-top: 0.75rem; background: var(--encre); color: var(--blanc) !important; text-align: center; border: 0; border-radius: var(--r); padding: 0.7rem 1rem; font-weight: 700; }
.menu__cta a:hover, .menu .menu__cta a[aria-current="page"] { background: var(--cobalt); color: var(--blanc); }
@media (min-width: 60rem) {
  .js .menu-bouton { display: none; }
  .menu, .js .menu { display: block; width: auto; }
  .menu ul { flex-direction: row; align-items: center; gap: 0.25rem; padding: 0; }
  .menu a { border: 0; padding: 0.45rem 0.7rem; border-radius: var(--r); }
  .menu a[aria-current="page"] { background: var(--surligneur); color: var(--encre); }
  .menu__cta a { margin: 0 0 0 0.5rem; padding: 0.55rem 1rem; }
}

/* ---------- Une (accueil) ---------- */
.une { padding: 2.5rem 0 3rem; border-bottom: 1px solid var(--regle); }
.une__grille { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 60rem) { .une__grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; } .une { padding: 3.5rem 0 4rem; } }
.une__photo { margin: 0; }
.une__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 12% 50%; border: 2px solid var(--encre); border-radius: var(--r); }
@media (max-width: 59.99rem) { .une__photo img { aspect-ratio: 3 / 2; } }
.une__photo figcaption, .jour__photo figcaption, .naf__photo figcaption {
  display: inline-block; margin-top: -1px; background: var(--encre); color: var(--blanc); font-size: 0.85rem; padding: 0.35rem 0.7rem;
}

/* ---------- Ticket (offre) ---------- */
.ticket { display: grid; background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--r); position: relative; max-width: 36rem; margin-top: 0.5rem; }
@media (min-width: 36rem) { .ticket { grid-template-columns: minmax(0, 1fr) 12.5rem; } }
.ticket__corps { padding: 1rem 1.2rem; }
.ticket__label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris); margin: 0; }
.ticket__prix { font-family: var(--titre); font-size: 2.6rem; font-weight: 700; line-height: 1.1; margin: 0.2rem 0 0.6rem; }
.ticket__prix small { font-family: var(--texte); font-size: 0.9rem; font-weight: 500; color: var(--gris); }
.ticket__infos { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; }
.ticket__infos dt { font-size: 0.75rem; color: var(--gris); text-transform: uppercase; letter-spacing: 0.08em; }
.ticket__infos dd { margin: 0; font-weight: 700; }
.ticket__talon { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 1rem 1.2rem; border-top: 2px dashed var(--encre); background: var(--papier-2); }
.ticket__talon p { margin: 0; font-size: 0.8rem; color: var(--gris); text-align: center; }
@media (min-width: 36rem) {
  .ticket__talon { border-top: 0; border-left: 2px dashed var(--encre); }
  .ticket__talon::before, .ticket__talon::after {
    content: ""; position: absolute; left: -13px; width: 24px; height: 12px;
    background: var(--papier); border: 2px solid var(--encre);
  }
  .ticket__talon::before { top: -2px; border-top: 0; border-radius: 0 0 12px 12px; }
  .ticket__talon::after { bottom: -2px; border-bottom: 0; border-radius: 12px 12px 0 0; }
}

/* ---------- Blocs ---------- */
.bloc { padding: 3.5rem 0; }
.bloc--papier { background: var(--blanc); border-top: 1px solid var(--regle); border-bottom: 1px solid var(--regle); }
.bloc--encre { background: var(--encre); color: var(--blanc); }
.bloc--encre h2 { color: var(--blanc); }
.bloc--encre .surtitre { color: var(--surligneur); }
@media (min-width: 60rem) { .bloc { padding: 4.5rem 0; } }

/* ---------- Agenda (accueil) ---------- */
.agenda { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; border: 2px solid var(--encre); background: var(--blanc); border-radius: var(--r); }
@media (min-width: 40rem) { .agenda { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .agenda { grid-template-columns: repeat(6, 1fr); } }
.agenda__col { padding: 1rem; border-bottom: 1px solid var(--regle); display: flex; flex-direction: column; }
@media (min-width: 40rem) { .agenda__col:nth-child(odd) { border-right: 1px solid var(--regle); } }
@media (min-width: 64rem) { .agenda__col { border-bottom: 0; border-right: 1px solid var(--regle); } .agenda__col:last-child { border-right: 0; } }
.agenda__col--neutre { background: var(--papier-2); }
.agenda__jour { margin: -1rem -1rem 0.9rem; padding: 0.6rem 1rem; background: var(--encre); color: var(--blanc); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; }
.agenda__jour span { font-family: var(--titre); font-size: 1.35rem; color: var(--surligneur); margin-right: 0.3rem; }
.agenda__col--neutre .agenda__jour { background: var(--encre-2); }
.agenda__titre { font-family: var(--titre); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.agenda ul { list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.95rem; color: var(--encre-2); }
.agenda ul li { padding: 0.3rem 0; border-top: 1px dotted var(--regle); }
.agenda__lien { margin-top: auto; font-weight: 700; text-decoration: none; }
.agenda__lien:hover { text-decoration: underline; }

/* ---------- Deux colonnes oui / non ---------- */
.deux-colonnes { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 48rem) { .deux-colonnes { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.colonne--oui, .colonne--non { background: var(--papier); border: 2px solid var(--encre); border-radius: var(--r); padding: 1.25rem 1.4rem; }
.colonne--oui { border-top: 8px solid var(--cobalt); }
.colonne--non { border-top: 8px solid var(--rouge); }
.colonne ul { padding-left: 1.2rem; margin: 0; }
.colonne li { margin-bottom: 0.45rem; }
.colonne--oui li::marker { content: "✓  "; color: var(--cobalt); font-weight: 700; }
.colonne--non li::marker { content: "✕  "; color: var(--rouge); font-weight: 700; }

/* ---------- Profils ---------- */
.profils { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 56rem) { .profils { grid-template-columns: repeat(3, 1fr); } }
.profils article { background: var(--blanc); border: 1px solid var(--regle); border-left: 4px solid var(--encre); padding: 1.2rem; border-radius: var(--r); }
.profils__cas { display: inline-block; background: var(--surligneur); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.1rem 0.5rem; margin-bottom: 0.7rem; }
.profils p:last-child { margin: 0; color: var(--encre-2); }

/* ---------- Réponses clés ---------- */
.cles { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .cles { grid-template-columns: 1fr 1.6fr; gap: 3rem; } }
.cles__liste { margin: 0; border-top: 2px solid var(--encre); }
.cles__liste > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--regle); }
.cles__liste dt { font-weight: 700; }
.cles__liste dd { margin: 0; }
@media (max-width: 30rem) { .cles__liste > div { grid-template-columns: 1fr; gap: 0.1rem; } }

/* ---------- Relance (CTA) ---------- */
.relance { background: var(--cobalt); color: var(--blanc); padding: 2.5rem 0; }
.relance__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.relance__titre { font-family: var(--titre); font-size: 1.7rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.3rem; }
.relance p { margin: 0; }

/* ---------- En-tête de page intérieure : feuillet d'éphéméride ---------- */
.entete { padding: 2.5rem 0; border-bottom: 1px solid var(--regle); }
.entete__grille { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 48rem) { .entete__grille { grid-template-columns: 9.5rem 1fr; gap: 2.5rem; } .entete { padding: 3.25rem 0; } }
.feuillet { width: 8rem; background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--r); text-align: center; overflow: hidden; }
@media (min-width: 48rem) { .feuillet { width: 9.5rem; } }
.feuillet__haut { display: block; background: var(--cobalt); color: var(--blanc); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem; border-bottom: 2px solid var(--encre); }
.feuillet__val { display: block; font-family: var(--titre); font-weight: 700; font-size: 2.9rem; line-height: 1; padding: 0.9rem 0.4rem 1rem; white-space: nowrap; }
@media (min-width: 48rem) { .feuillet__val { font-size: 3.3rem; } }
.ariane ol { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; font-size: 0.9rem; color: var(--gris); }
.ariane li + li::before { content: "/"; margin: 0 0.5rem; color: var(--regle); }
.ariane a { color: var(--gris); }
.ariane [aria-current] { color: var(--encre); font-weight: 700; }

/* ---------- Jour par jour ---------- */
.bande-jours { position: sticky; top: 0; z-index: 40; background: var(--blanc); border-bottom: 2px solid var(--encre); }
.bande-jours ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.bande-jours a { display: block; padding: 0.7rem 0.4rem; text-align: center; text-decoration: none; color: var(--encre); border-right: 1px solid var(--regle); font-size: 0.92rem; }
.bande-jours li:last-child a { border-right: 0; }
.bande-jours b { font-family: var(--titre); font-size: 1.1rem; }
.bande-jours span { display: none; }
@media (min-width: 48rem) { .bande-jours span { display: inline; } }
.bande-jours a:hover { background: var(--papier-2); }
.bande-jours a.est-actif { background: var(--encre); color: var(--blanc); }
.bande-jours a.est-actif b { color: var(--surligneur); }

.avertissement { margin: 1.5rem 0 0; padding: 0.75rem 1rem; border: 1px dashed var(--encre); border-radius: var(--r); background: var(--blanc); font-size: 0.95rem; }

.jour { padding: 3rem 0; border-bottom: 1px solid var(--regle); scroll-margin-top: 3.5rem; }
.jour__tete { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.5rem; align-items: center; margin-bottom: 1.75rem; }
.jour__num { font-family: var(--titre); font-weight: 700; font-size: clamp(3.5rem, 2rem + 6vw, 6rem); line-height: 0.9; color: var(--cobalt); margin: 0; }
.jour__tete h2 { margin-bottom: 0.4rem; }
.jour__but { margin: 0; color: var(--encre-2); max-width: 44rem; }
.jour__grille { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) { .jour__grille { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
.creneaux { border: 2px solid var(--encre); border-radius: var(--r); background: var(--blanc); }
.creneau { display: grid; gap: 0.25rem 1.25rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--regle); }
.creneau:last-child { border-bottom: 0; }
@media (min-width: 40rem) { .creneau { grid-template-columns: 8rem 1fr; } .creneau > :not(.creneau__moment) { grid-column: 2; } .creneau__moment { grid-row: 1 / span 3; } }
.creneau__moment { margin: 0; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris); padding-top: 0.2rem; }
.creneau h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.creneau ul { margin: 0; padding-left: 1.1rem; }
.creneau li { margin-bottom: 0.3rem; }
.creneau p { margin: 0; }
.creneau--controle { background: var(--cobalt-pale); }
.creneau--controle .creneau__moment { color: var(--cobalt-fonce); }
.jour__photo { margin: 0; }
.jour__photo img { border: 2px solid var(--encre); border-radius: var(--r); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.methode { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 1.5rem 0; counter-reset: m; }
@media (min-width: 48rem) { .methode { grid-template-columns: repeat(3, 1fr); } }
.methode li { counter-increment: m; background: var(--papier); border: 2px solid var(--encre); border-radius: var(--r); padding: 1.1rem 1.2rem; }
.methode b { display: block; font-family: var(--titre); font-size: 1.5rem; }
.methode b::before { content: counter(m) ". "; color: var(--cobalt); }

.table-defil { overflow-x: auto; border: 2px solid var(--encre); border-radius: var(--r); background: var(--blanc); margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 32rem; }
th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--regle); vertical-align: top; }
thead th { background: var(--encre); color: var(--blanc); }
tbody th { font-family: var(--titre); font-size: 1.2rem; color: var(--cobalt); }
tbody tr:last-child > * { border-bottom: 0; }

/* ---------- Avant le jour 1 ---------- */
.avant { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .avant { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 3rem; align-items: start; } }
.avant__photo { margin: 0; }
.avant__photo img { border: 2px solid var(--encre); border-radius: var(--r); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
@media (max-width: 59.99rem) { .avant__photo { display: none; } }
.coches { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 2px solid var(--encre); }
.coches li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.9rem; padding: 1rem 0; border-bottom: 1px solid var(--regle); }
.coches input {
  appearance: none; -webkit-appearance: none; margin: 0.15rem 0 0; width: 1.6rem; height: 1.6rem; border: 2px solid var(--encre);
  border-radius: 3px; background: var(--blanc); cursor: pointer; display: grid; place-content: center;
}
.coches input::after { content: ""; width: 0.45rem; height: 0.85rem; border: solid var(--blanc); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.coches input:checked { background: var(--cobalt); border-color: var(--cobalt); }
.coches input:checked::after { opacity: 1; }
.coches label { cursor: pointer; }
.coches b { display: inline; font-size: 1.1rem; }
.coches input:checked + label b { background: var(--surligneur); }
.coches span { display: block; color: var(--encre-2); margin-top: 0.25rem; }
.coches__compte { font-weight: 700; margin-top: 1rem; }
.requis { margin: 0; }
.requis > div { padding: 0.8rem 0; border-top: 1px solid var(--regle); }
.requis dt { font-weight: 700; }
.requis dd { margin: 0.2rem 0 0; }
.lexique { margin: 1.5rem 0 0; display: grid; gap: 0.75rem; }
@media (min-width: 48rem) { .lexique { grid-template-columns: 1fr 1fr; } }
.lexique > div { background: var(--blanc); border: 1px solid var(--regle); border-radius: var(--r); padding: 1rem 1.2rem; }
.lexique dt { font-family: var(--titre); font-weight: 700; font-size: 1.2rem; }
.lexique dd { margin: 0.25rem 0 0; }

/* ---------- Après le jour 4 ---------- */
.naf { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .naf { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: start; } }
.naf__photo { margin: 0; }
.naf__photo img { border: 2px solid var(--encre); border-radius: var(--r); width: 100%; }
.citation { margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--blanc); border-left: 6px solid var(--cobalt); border-radius: 0 var(--r) var(--r) 0; }
.citation p { font-family: var(--titre); font-size: 1.3rem; font-weight: 600; margin: 0 0 0.4rem; }
.citation footer { font-size: 0.85rem; color: var(--gris); }
.ferme p { max-width: 46rem; }
.voies { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .voies { grid-template-columns: repeat(3, 1fr); } }
.voies li { border: 2px solid var(--blanc); border-radius: var(--r); padding: 1rem 1.2rem; }
.voies b { display: block; font-family: var(--titre); font-size: 1.6rem; color: var(--surligneur); }
.route { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 0; counter-reset: r; }
@media (min-width: 64rem) { .route { grid-template-columns: repeat(5, 1fr); } }
.route li { counter-increment: r; padding: 1rem 1.1rem 1.2rem; border-top: 6px solid var(--encre); background: var(--blanc); border-right: 1px solid var(--regle); border-bottom: 1px solid var(--regle); }
.route li::before { content: counter(r, decimal-leading-zero); display: block; font-family: var(--titre); font-size: 2rem; font-weight: 700; color: var(--cobalt); line-height: 1; margin-bottom: 0.5rem; }
.route b { display: block; margin-bottom: 0.3rem; }
.route span { color: var(--encre-2); font-size: 0.97rem; }

/* ---------- Questions ---------- */
.index-q { margin: 2.5rem 0 0.5rem; }
.index-q ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.index-q a { display: block; text-decoration: none; color: var(--encre); font-weight: 700; border: 2px solid var(--encre); border-radius: var(--r); padding: 0.4rem 0.8rem; background: var(--blanc); }
.index-q a:hover { background: var(--surligneur); }
.groupe { padding: 2rem 0 0.5rem; }
.groupe h2 { font-size: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--encre); margin-bottom: 0; }
.qrs { margin: 0; }
.qr { display: grid; gap: 0.35rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--regle); scroll-margin-top: 1rem; }
@media (min-width: 52rem) { .qr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } }
.qr dt { font-family: var(--titre); font-weight: 600; font-size: 1.2rem; line-height: 1.3; display: grid; grid-template-columns: 2.4rem 1fr; }
.qr__n { color: var(--cobalt); font-weight: 700; }
.qr dd { margin: 0; padding-left: 2.4rem; }
@media (min-width: 52rem) { .qr dd { padding-left: 0; } }
.qr:target dt { background: var(--surligneur); }

/* ---------- Réserver ---------- */
.reserver { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .reserver { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; align-items: start; } }
.form { background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--r); padding: 1.4rem; }
.form__ligne { margin-bottom: 1rem; }
.form__duo { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .form__duo { grid-template-columns: 1fr 1fr; } }
.form label, .form legend { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.oblig { color: var(--rouge); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  width: 100%; font: inherit; color: var(--encre); background: var(--papier); border: 2px solid #8A8D93; border-radius: var(--r); padding: 0.65rem 0.75rem;
}
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--cobalt); outline-offset: 0; }
.form textarea { min-height: 8rem; resize: vertical; }
.form__choix { border: 0; padding: 0; margin: 0 0 1rem; }
.form__choix label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; margin: 0 0.4rem 0.5rem 0; padding: 0.45rem 0.8rem; border: 2px solid var(--regle); border-radius: var(--r); cursor: pointer; background: var(--papier); }
.form__choix label:hover { border-color: var(--encre); }
.form__choix input { accent-color: var(--cobalt); margin: 0; }
.form__note { font-size: 0.87rem; color: var(--gris); }
.form .bouton { width: 100%; }
@media (min-width: 40rem) { .form .bouton { width: auto; } }
.piege { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.reserver__cote .ticket { max-width: none; }
@media (min-width: 60rem) { .reserver__cote .ticket { grid-template-columns: 1fr; } .reserver__cote .ticket__talon { border-left: 0; border-top: 2px dashed var(--encre); } .reserver__cote .ticket__talon::before, .reserver__cote .ticket__talon::after { display: none; } }
.suite { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: s; }
.suite li { counter-increment: s; position: relative; padding: 0.6rem 0 0.6rem 2.2rem; border-bottom: 1px solid var(--regle); }
.suite li::before { content: counter(s); position: absolute; left: 0; top: 0.45rem; font-family: var(--titre); font-weight: 700; font-size: 1.3rem; color: var(--cobalt); line-height: 1.3; }
.rappel { font-size: 0.92rem; padding: 0.8rem 1rem; border: 1px dashed var(--encre); border-radius: var(--r); }

/* ---------- Pied ---------- */
.pied { background: var(--encre); color: #D9DAD6; }
.pied a { color: var(--blanc); }
.pied a:hover { color: var(--surligneur); }
.pied__grille { display: grid; gap: 2rem; padding-top: 3rem; padding-bottom: 2.5rem; }
@media (min-width: 52rem) { .pied__grille { grid-template-columns: 2fr 1fr 1fr; } }
.pied__nom { font-family: var(--titre); font-size: 1.5rem; font-weight: 600; color: var(--blanc); }
.pied__nom b { color: var(--surligneur); }
.pied__offre { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pied__offre span { border: 1px solid #5B5F68; border-radius: 3px; padding: 0.15rem 0.6rem; font-size: 0.9rem; color: var(--blanc); }
.pied__titre { font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--surligneur); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.45rem; }
.pied__bas { border-top: 1px solid #33363E; padding: 1.5rem 0; font-size: 0.86rem; }
.pied__bas p { max-width: 60rem; }
.pied__legal { color: #A5A7AB; margin: 0; }

@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } }
@media print { .tete, .bande-jours, .relance, .pied, .evitement { display: none !important; } body { background: #fff; } }

/* ---------- Notification d'envoi : case cochée surlignée, haut de page ---------- */
.coche { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; background: var(--surligneur); color: var(--encre); border-bottom: 3px solid var(--encre); }
.coche:focus { outline: 3px solid var(--cobalt); outline-offset: -6px; }
.coche__ligne { max-width: 72rem; margin: 0 auto; padding: .9rem 1rem; display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; }
.coche__case { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; background: var(--blanc); border: 2px solid var(--encre); color: var(--cobalt); }
.coche__titre { font-family: var(--titre); font-size: 1.35rem; font-weight: 700; margin: 0; }
.coche__ligne p:not(.coche__titre) { margin: .1rem 0 0; font-size: .95rem; }
.coche__fermer { background: var(--encre); color: var(--surligneur); border: 0; width: 2.2rem; height: 2.2rem; font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: var(--r); }
.coche__fermer:hover { background: var(--cobalt); color: var(--blanc); }
@media (prefers-reduced-motion: no-preference) { .coche:not([hidden]) { animation: coche-descend .3s ease-out; } }
@keyframes coche-descend { from { transform: translateY(-100%); } to { transform: none; } }
[data-notif][hidden] { display: none !important; }