/* Table & Click — feuille de style commune
   Palette sobre : bleu méditerranée + sable. Mobile d'abord, polices système. */

:root {
  --bleu: #1b4f72;
  --bleu-fonce: #123a55;
  --bleu-clair: #e3edf4;
  --sable: #f6efe3;
  --sable-fonce: #e8dcc6;
  --texte: #1f2a33;
  --texte-doux: #4a5661;
  --blanc: #ffffff;
  --rayon: 6px;
  --largeur: 70ch;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--sable);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; border-radius: var(--rayon); }

a { color: var(--bleu); text-underline-offset: 2px; }
a:hover, a:focus { color: var(--bleu-fonce); }
a:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* Lien d'évitement */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bleu);
  color: var(--blanc);
  padding: .5rem 1rem;
}
.evitement:focus { left: 1rem; color: var(--blanc); }

/* En-tête et menu */
.entete {
  background: var(--bleu);
  color: var(--blanc);
}
.entete__interieur {
  max-width: 64rem;
  margin: 0 auto;
  padding: .75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
.marque {
  color: var(--blanc);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  letter-spacing: .01em;
}
.marque:hover, .marque:focus { color: var(--sable); }

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
}
.menu a {
  color: var(--blanc);
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover, .menu a:focus { color: var(--sable); border-bottom-color: var(--sable); }
.menu a[aria-current="page"] { border-bottom-color: var(--sable); font-weight: 600; }

/* Fil d'Ariane */
.ariane {
  max-width: 64rem;
  margin: 0 auto;
  padding: .75rem 1rem 0;
  font-size: .9rem;
  color: var(--texte-doux);
}
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.ariane li + li::before { content: "›"; margin: 0 .5rem; color: var(--texte-doux); }
.ariane [aria-current="page"] { color: var(--texte); }

/* Contenu principal */
main {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}
main > * { max-width: var(--largeur); }
main > .tableau-conteneur,
main > .grille { max-width: 100%; }

h1, h2, h3 { line-height: 1.25; color: var(--bleu-fonce); }
h1 { font-size: 1.9rem; margin: 1rem 0 1rem; }
h2 { font-size: 1.4rem; margin: 2.5rem 0 .75rem; padding-top: .5rem; border-top: 1px solid var(--sable-fonce); }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }

.chapeau { font-size: 1.15rem; color: var(--texte); }

/* Réponse directe sous chaque H2 */
.reponse {
  background: var(--blanc);
  border-left: 4px solid var(--bleu);
  padding: .75rem 1rem;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-weight: 500;
}

/* Grille de cartes (services, guides) */
.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.carte {
  background: var(--blanc);
  border: 1px solid var(--sable-fonce);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
}
.carte h3 { margin-top: 0; }

/* Tableaux */
.tableau-conteneur { overflow-x: auto; margin: 1rem 0; }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  font-size: .95rem;
}
caption { text-align: left; font-weight: 600; padding: .5rem 0; color: var(--bleu-fonce); }
th, td { padding: .6rem .75rem; border: 1px solid var(--sable-fonce); text-align: left; vertical-align: top; }
th { background: var(--bleu-clair); color: var(--bleu-fonce); }

/* Appel à l'action */
.appel {
  background: var(--bleu-clair);
  border-radius: var(--rayon);
  padding: 1.25rem;
  margin-top: 2.5rem;
}
.appel h2 { border-top: 0; margin-top: 0; padding-top: 0; }
.bouton {
  display: inline-block;
  background: var(--bleu);
  color: var(--blanc);
  padding: .6rem 1.1rem;
  border-radius: var(--rayon);
  text-decoration: none;
  font-weight: 600;
}
.bouton:hover, .bouton:focus { background: var(--bleu-fonce); color: var(--blanc); }

.a-verifier { background: #fff4c2; padding: 0 .2rem; border-radius: 3px; }

/* Pied de page */
.pied {
  background: var(--bleu-fonce);
  color: var(--sable);
  font-size: .95rem;
}
.pied__interieur {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.pied a { color: var(--blanc); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin: .25rem 0; }
.pied__titre { font-weight: 700; color: var(--blanc); margin: 0 0 .5rem; }
.pied__mention { margin: 0; }

@media (min-width: 48rem) {
  h1 { font-size: 2.3rem; }
  .grille { grid-template-columns: repeat(3, 1fr); }
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .pied__interieur { grid-template-columns: 2fr 1fr 1fr; }
}