/*
 * Déplacements, MonGuideRoller.fr.
 * Charte de la boîte à outils du coach (skill monguideroller-design) : fond blanc, texte à l'encre,
 * une seule couleur d'accent (vert canard #006666) pour les liens, le bouton principal et l'état
 * actif ; Archivo ; filets plutôt que cartes ; pas d'ombre hors éléments flottants ; pas de
 * dégradé ; toujours clair. Les états (vert, orange, rouge, gris) sont toujours écrits en toutes
 * lettres : la couleur n'est jamais la seule information.
 */

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --soft: #f6f7f6;
  --ink: #171a1a;
  --ink-2: #3b4241;
  --muted: #626968;
  --line: #e6e8e7;
  --line-strong: #d4d8d6;
  --accent: #006666;
  --accent-hover: #004f4f;
  --accent-wash: #e8f2f2;
  --good: #2f7d43;
  --good-wash: #edf6ef;
  --warn: #8a5a00;
  --warn-wash: #fdf5e4;
  --bad: #c62f2f;
  --bad-wash: #fdf0f0;
  --focus: #1a73e8;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 8px 28px rgba(23, 26, 26, .12);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.6;
  min-height: 100dvh; display: flex; flex-direction: column;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; margin: 0 0 16px; }
h1 { font-size: 28px; font-stretch: 118%; }
h2 { font-size: 22px; font-stretch: 112%; margin-top: 56px; }
h3 { font-size: 18px; font-stretch: 108%; margin-top: 32px; }
.premier-titre { margin-top: 0; }
p { margin: 0 0 16px; text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; } }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.nombre, .tableau td.nombre, .calendrier { font-variant-numeric: tabular-nums; }
.discret { color: var(--muted); }
.petit { font-size: 14px; }
.sans-retour { white-space: nowrap; }
.sans-marge { margin: 0; }
.rouge { color: var(--bad); }
.orange { color: var(--warn); }
.texte-libre { white-space: normal; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--bg); padding: 8px 12px; border-radius: var(--radius-sm); }
.evitement:focus { top: 8px; }

/* --- En-tête : marque et menu « Outils » communs aux outils ----------------------------- */

.entete { background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); position: relative; z-index: 40; }
.entete__in, .pied__in, .page, .ev-entete__in, .onglets__in {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
}
.entete__in { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.marque { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; cursor: pointer; list-style: none; min-height: 44px; }
.marque::-webkit-details-marker { display: none; }
.marque img { width: 40px; height: 32px; object-fit: contain; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque__outil { font-weight: 600; font-stretch: 112%; font-size: 18px; }
.marque__site { font-size: 13px; color: var(--muted); }
.outils { position: relative; }
.outils__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 280px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 8px; display: flex; flex-direction: column; animation: apparition 200ms var(--ease-out);
}
.outils__menu a, .outils__actif { padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); min-height: 44px; display: flex; align-items: center; }
.outils__actif { color: var(--accent); font-weight: 500; background: var(--accent-wash); }
.outils__titre { font-size: 13px; color: var(--muted); margin: 4px 12px 6px; }
.outils__menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
@media (hover: hover) and (pointer: fine) { .outils__menu a:hover { background: var(--soft); } }

.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; padding: 10px 10px; min-height: 44px; display: inline-flex; align-items: center; }
.nav a[aria-current] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.espace { margin-left: auto; display: flex; align-items: center; }
.espace__nom { font-size: 15px; color: var(--muted); }
.espace__choix { display: flex; gap: 8px; align-items: center; }
.espace__choix select { width: auto; max-width: 240px; min-height: 40px; font-size: 15px; }
@media (max-width: 760px) {
  .nav { order: 3; flex: 0 0 calc(100% + 10px); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -10px; }
  .espace { order: 2; margin-left: auto; }
  .espace__choix select { max-width: 52vw; }
}

/* --- En-tête d'un déplacement et onglets ------------------------------------------------ */

.ev-entete { border-bottom: 1px solid var(--line); background: var(--soft); }
.ev-entete__in { padding-top: 20px; }
.ev-entete .fil { margin-bottom: 4px; }
.ev-entete__titre { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.ev-entete__titre h1 { margin: 0; }
.ev-entete__dates { color: var(--ink-2); margin: 6px 0 8px; font-size: 16px; }
.onglets__in { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.onglets a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; padding: 12px 10px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.onglets a[aria-current] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
@media (hover: hover) and (pointer: fine) { .onglets a:not([aria-current]):hover { color: var(--accent); } }

/* --- Page ------------------------------------------------------------------------------- */

.page { flex: 1; padding-top: 32px; padding-bottom: 80px; }
.page--public { max-width: 760px; }
.lecture { max-width: 720px; }
.lecture--etroite { max-width: 480px; }
.chapo { font-size: 18px; color: var(--ink-2); max-width: 65ch; }
.aide { font-size: 14px; color: var(--muted); margin: 0 0 16px; max-width: 75ch; }
.champ .aide { margin: 0; }
.fil { font-size: 15px; margin-bottom: 16px; }
.fil a::before { content: "‹ "; }
.titre-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.titre-actions h1, .titre-actions h2, .titre-actions h3 { margin: 0; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px 40px; align-items: start; }
.colonnes > section > h2:first-child { margin-top: 0; }
.vide { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 24px; color: var(--ink-2); margin-bottom: 24px; }
.vide p:last-child { margin: 0; }

/* --- Messages et états ------------------------------------------------------------------ */

.message { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 24px; border: 1px solid var(--line); background: var(--soft); animation: apparition 220ms var(--ease-out); }
.message p:last-child { margin: 0; }
.message--succes { background: var(--good-wash); border-color: #c6e1cc; color: #1f5a2f; }
.message--erreur { background: var(--bad-wash); border-color: #f2c9c9; color: #8f1f1f; }
.avertissement { color: var(--warn); background: var(--warn-wash); padding: 6px 10px; border-radius: var(--radius-sm); display: inline-block; }
@keyframes apparition { from { opacity: 0; transform: translateY(4px); } }

.etat { font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--ink-2); }
.etat--vert { color: var(--ink); }
.etat--orange { color: var(--warn); }
.etat--rouge { color: var(--bad); }
.etat--gris { color: var(--muted); font-weight: 400; }

/* --- Points à régler : groupés sous un intertitre écrit, sans pastille ------------------ */

.alertes__titre { font-size: 16px; margin: 16px 0 0; color: var(--ink-2); }
.alertes { list-style: none; margin: 0 0 16px; padding: 0; }
.alerte { padding: 10px 0; border-bottom: 1px solid var(--line); }
.alerte a { color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .alerte a:hover { color: var(--accent); text-decoration: underline; } }
p.alerte { border: 0; color: var(--bad); font-weight: 500; }

/* --- Bilan du déplacement : lignes à filets (libellé, valeur, détail), pas des tuiles ---- */

.bilan { margin: 0 0 32px; border-top: 1px solid var(--line); }
.bilan__ligne { display: grid; grid-template-columns: minmax(180px, 240px) minmax(140px, 220px) 1fr; gap: 4px 24px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bilan dt, .bilan dd { margin: 0; }
.bilan dt a { color: var(--ink-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .bilan dt a:hover { color: var(--accent); text-decoration: underline; } }
.bilan__valeur { font-weight: 600; font-stretch: 108%; font-variant-numeric: tabular-nums; }
.bilan__ton { font-size: 14px; font-weight: 500; font-stretch: 100%; color: var(--bad); }
.bilan__ton--orange { color: var(--warn); }
.bilan__detail { font-size: 15px; color: var(--ink-2); }
@media (max-width: 720px) {
  .bilan__ligne { grid-template-columns: 1fr auto; }
  .bilan__detail { grid-column: 1 / -1; }
}

/* --- Boutons et champs ------------------------------------------------------------------ */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: var(--radius-sm);
  font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out); -webkit-tap-highlight-color: transparent;
}
.bouton:active { transform: scale(0.97); }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }
.bouton--secondaire { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.bouton--danger { background: var(--bg); color: var(--bad); border-color: #e9b9b9; }
.bouton--petit { min-height: 36px; padding: 0 12px; font-size: 15px; }
.bouton[data-armed] { background: var(--bad); border-color: var(--bad); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .bouton:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
  .bouton--secondaire:hover { background: var(--soft); color: var(--ink); }
  .bouton--danger:hover { background: var(--bad-wash); color: var(--bad); }
}
@media (pointer: coarse) { .bouton, .bouton--petit { min-height: 44px; } }

.lien-bouton { background: none; border: 0; padding: 6px 2px; min-height: 36px; font: inherit; font-size: 15px; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lien-bouton--danger { color: var(--bad); }
.lien-bouton--petit { font-size: 14px; min-height: 28px; }
.lien-bouton[data-armed] { font-weight: 600; }
@media (pointer: coarse) { .lien-bouton { min-height: 44px; } }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0; }
.actions--serrees { gap: 8px; margin: 0; }
.form-ligne { display: inline-flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap; }
.form-ligne select { width: auto; min-height: 36px; font-size: 15px; padding: 4px 28px 4px 8px; }

.formulaire { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.formulaire > p:last-child, .formulaire p.actions:last-child { margin: 0; }
.formulaire h3 { margin: 8px 0 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.formulaire fieldset { display: flex; flex-direction: column; gap: 16px; }
legend { font-weight: 600; font-stretch: 108%; font-size: 18px; padding: 0; margin-bottom: 8px; }
.carte { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--bg); }
.encadre { margin-bottom: 32px; }
@media (max-width: 520px) { .carte { padding: 20px 16px; } }

.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ label { font-weight: 500; font-size: 15px; }
.facultatif { font-weight: 400; color: var(--muted); }
.facultatif::before { content: "("; }
.facultatif::after { content: ")"; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  font: inherit; font-size: 16px; color: var(--ink); min-height: 40px; padding: 8px 12px; width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg);
}
input[type="file"] { font: inherit; font-size: 15px; }
textarea { min-height: 80px; resize: vertical; }
input[readonly] { background: var(--soft); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex-shrink: 0; }
.case-a-cocher { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.cases { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.cases legend { width: 100%; font-size: 15px; font-weight: 500; font-stretch: 100%; }
.cases--colonnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.champ-court { max-width: 96px; }
.lien-copie { font-size: 14px !important; }
.iban { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; font-weight: 600; }
.ligne-formulaire { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0 24px; }
.ligne-formulaire .champ { flex: 1 1 180px; }
.ligne-formulaire .champ--nombre { flex: 0 0 120px; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 20px; }
.grille-champs > p, .grille-champs > .champ:has(textarea), .grille-champs > fieldset { grid-column: 1 / -1; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.choix-mode { display: grid; gap: 12px; }
.choix-carte { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; cursor: pointer; min-height: 44px; }
.choix-carte:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.choix-carte input { margin-top: 3px; }

.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 8px 0 24px; }
.filtres .champ { flex: 0 1 190px; }

.segments { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; }
.segments a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; padding: 6px 12px; border-radius: var(--radius-sm); min-height: 36px; display: inline-flex; align-items: center; gap: 4px; }
.segments a[aria-current] { background: var(--accent); color: #fff; }

/* --- Sections repliables ---------------------------------------------------------------- */

.section-repliee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 16px 0 24px; }
.section-repliee + .section-repliee { margin-top: -25px; }
.section-repliee summary { cursor: pointer; padding: 12px 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.section-repliee summary::-webkit-details-marker { display: none; }
.section-repliee summary::after { content: "+"; font-size: 22px; color: var(--muted); transition: transform 200ms var(--ease-out); }
.section-repliee[open] summary::after { transform: rotate(45deg); }
.section-repliee > form, .section-repliee > div { padding-bottom: 16px; animation: apparition 200ms var(--ease-out); }
.section-repliee--sobre { border: 0; margin: 4px 0 8px; }
.section-repliee--sobre + .section-repliee--sobre { margin-top: 0; }
.section-repliee--sobre summary { color: var(--accent); font-size: 15px; padding: 4px 0; justify-content: flex-start; gap: 8px; min-height: 36px; }
.petit-menu summary { cursor: pointer; color: var(--accent); font-size: 14px; list-style: none; }
.petit-menu summary::-webkit-details-marker { display: none; }
.petit-menu[open] { position: relative; }
.petit-menu[open] > form { position: absolute; z-index: 5; min-width: 280px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; gap: 12px; }

/* --- Listes et tableaux ----------------------------------------------------------------- */

.definitions { margin: 0 0 24px; padding: 0; }
.definitions > div { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.definitions > div:first-child { border-top: 1px solid var(--line); }
.definitions dt { color: var(--muted); }
.definitions dd { margin: 0; }
.definitions--serrees > div { grid-template-columns: 160px 1fr; padding: 6px 0; }
@media (max-width: 560px) { .definitions > div { grid-template-columns: 1fr; gap: 2px; } }

.liste-filets { list-style: none; margin: 0 0 24px; padding: 0; }
.liste-filets > li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.liste-filets > li:first-child { border-top: 1px solid var(--line); }
.liste-filets--serree > li { padding: 8px 0; }
.liste-simple { margin: 0 0 16px; padding-left: 20px; }
.liste-simple li { margin-bottom: 4px; }
.ligne-compte, .ligne-tache { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.jour { font-weight: 600; font-stretch: 108%; padding-top: 16px !important; }

.tableau-defile { overflow-x: auto; margin: 0 0 24px; -webkit-overflow-scrolling: touch; }
.tableau { width: 100%; border-collapse: collapse; font-size: 16px; }
.tableau th, .tableau td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tableau th:first-child, .tableau td:first-child { padding-left: 0; }
.tableau thead th { font-size: 14px; font-weight: 500; color: var(--muted); border-bottom-color: var(--line-strong); white-space: nowrap; }
.tableau .nombre { text-align: right; }
.tableau tr.annulee td { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.tableau tr.annulee td:last-child { text-decoration: none; }
.tableau tr.faite td:first-child { color: var(--muted); }
.tableau--grille th[scope="row"] { font-weight: 500; min-width: 160px; }
.tableau--grille td { min-width: 150px; }
.tableau--grille td.hors { background: var(--soft); }
.tableau--compact td, .tableau--compact th { padding: 6px 8px; }
.occupant { display: block; }

/* --- Calendrier ------------------------------------------------------------------------- */

.calendrier { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; }
.calendrier th { font-size: 14px; font-weight: 500; color: var(--muted); text-align: left; padding: 6px 8px; }
.calendrier td { border: 1px solid var(--line); vertical-align: top; height: 96px; padding: 6px; }
.calendrier td.hors { background: var(--soft); }
.calendrier__jour { font-size: 14px; color: var(--muted); display: inline-block; min-width: 24px; }
.calendrier__jour--auj { color: #fff; background: var(--accent); border-radius: 999px; text-align: center; }
.calendrier__ev { display: block; font-size: 14px; line-height: 1.3; margin-top: 4px; padding: 2px 6px; border-radius: 4px; text-decoration: none; background: var(--accent-wash); color: var(--ink); }
.calendrier__ev.ton-rouge { background: var(--bad-wash); }
.calendrier__ev.ton-gris { background: var(--soft); color: var(--muted); }

/* --- Trajets, planning ------------------------------------------------------------------ */

.trajet { border-top: 1px solid var(--line); padding-top: 8px; margin-bottom: 24px; }
.trajet h3 { margin: 8px 0 4px; }
.vehicules { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.vehicule { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.vehicule__tete { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vehicule p { margin: 4px 0 8px; font-size: 15px; }
.passagers { list-style: none; margin: 0 0 8px; padding: 0; }
.passagers li { padding: 4px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.planning { list-style: none; margin: 0 0 24px; padding: 0; }
.planning__jour h2 { margin: 32px 0 8px; font-size: 18px; }
.planning__etape { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.planning__texte { display: flex; flex-direction: column; }
@media (max-width: 560px) { .planning__etape { grid-template-columns: 1fr; gap: 2px; } }
.bloc-formulaire, .bloc-repas { border-top: 1px solid var(--line); padding-top: 16px; margin-bottom: 24px; }
.bloc-choix { border-left: 0; padding: 8px 0 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.sommaire { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; margin-bottom: 24px; }
.formulaire-public .etape { border-top: 1px solid var(--line); padding-top: 20px; }
.rgpd { background: var(--soft); border-radius: var(--radius); padding: 16px; }

/* --- Pied ------------------------------------------------------------------------------- */

.pied { border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; padding-bottom: env(safe-area-inset-bottom); }
.pied__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-top: 20px; padding-bottom: 20px; }
.pied p { margin: 0; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 4px 16px; flex-basis: 100%; }
.pied__liens a { color: var(--muted); }

/* --- Documents imprimables (A4) --------------------------------------------------------- */

.impression { background: var(--soft); }
.barre-impression { max-width: 210mm; margin: 16px auto; padding: 0 16px; display: flex; gap: 16px; align-items: center; }
.document { max-width: 210mm; margin: 0 auto 40px; background: var(--bg); padding: 16mm 15mm; border: 1px solid var(--line); font-size: 15px; }
.document h1 { font-size: 26px; margin: 0; }
.document h2 { font-size: 19px; margin: 24px 0 8px; break-after: avoid; }
.document h3 { font-size: 16px; margin: 16px 0 6px; break-after: avoid; }
.document section { break-inside: auto; }
.document .tableau { font-size: 14px; }
.document .tableau th, .document .tableau td { padding: 5px 8px; }
.document__tete { display: flex; gap: 16px; align-items: center; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 8px; }
.document__logo { width: 64px; height: 64px; object-fit: contain; }
.document__club { margin: 0; color: var(--muted); }
.document__type { margin: 4px 0 0; font-weight: 500; }
.document__pied { margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.planning-ligne { margin: 0 0 6px; }
@media print {
  @page { size: A4; margin: 12mm; }
  body.impression { background: #fff; }
  .barre-impression { display: none; }
  .document { border: 0; padding: 0; margin: 0; max-width: none; }
  a { color: inherit; text-decoration: none; }
  .entete, .ev-entete, .pied, form, .section-repliee { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
  .message, .outils__menu, .section-repliee > form, .section-repliee > div { animation-name: fondu; }
  @keyframes fondu { from { opacity: 0; } }
  .bouton:active { transform: none; }
}