/*
 * Front public — mobile d'abord.
 *
 * Contrainte de conception : trois taps au maximum pour joindre quelqu'un
 * (thématique → question → appel). Les cibles tactiles font au moins 44 px,
 * et le bouton d'urgence est présent sur tous les écrans.
 */

:root {
  --fond: #f7f8fa;
  --carte: #ffffff;
  --bord: #dfe3e9;
  --texte: #171d29;
  --discret: #5c6675;
  --accent: #1f5fa8;

  /*
   * Jaune de la marque, pour les boutons d'action. Il impose un texte sombre :
   * en blanc le contraste tombe à 1,4:1, illisible. En sombre il monte à 11,9:1.
   * C'est aussi pourquoi il ne sert pas aux liens ni aux anneaux de focus, qui
   * seraient invisibles sur le fond clair.
   */
  --bouton: #ffd512;
  --bouton-survol: #e6bf00;
  --bouton-texte: #171d29;
  --accent-clair: #eaf1fa;
  --urgence: #b42318;
  --urgence-clair: #fdf0ee;
  --succes: #216e4e;
  --rayon: 12px;
  --marge: clamp(1rem, 4vw, 1.75rem);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

h1 {
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  line-height: 1.25;
  margin: 0 0 0.25em;
}
h2 {
  font-size: 1.05rem;
  margin: 0;
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/*
 * Le conteneur principal reçoit le focus par programme à chaque changement
 * d'écran, pour que les lecteurs d'écran repartent du haut. Ce n'est pas une
 * commande : sans cette règle, le navigateur dessine l'anneau de focus autour
 * de toute la page, qui ne disparaît qu'au premier clic.
 */
#contenu:focus,
#contenu:focus-visible {
  outline: none;
}

.evitement {
  position: absolute;
  inset-inline-start: -9999px;
}
.evitement:focus {
  inset-inline-start: 0.5rem;
  top: 0.5rem;
  z-index: 50;
  background: var(--carte);
  padding: 0.6em 1em;
  border-radius: var(--rayon);
}

/* ─── En-tête ──────────────────────────────────────────────── */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem var(--marge);
  padding-top: max(0.6rem, env(safe-area-inset-top));
  background: var(--carte);
  border-bottom: 1px solid var(--bord);
}
.marque {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--texte);
  margin-inline-end: auto;
  min-height: 44px; /* cible tactile, comme les autres commandes */
}
.entete-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bouton-urgence {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--urgence);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.55em 0.95em;
  border-radius: 999px;
  min-height: 44px;
}
.bouton-urgence span {
  display: grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-weight: 800;
}

.sortie-rapide {
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid var(--bord);
  background: var(--carte);
  color: var(--discret);
  border-radius: 999px;
  padding: 0.5em 0.8em;
  min-height: 44px;
}

/* ─── Mise en page ─────────────────────────────────────────── */

main {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--marge);
}

.retour {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  padding: 0.5em 0;
  min-height: 44px;
}

.intro {
  color: var(--discret);
  margin: 0 0 1.5rem;
}

.recherche {
  position: relative;
  margin-bottom: 1.75rem;
}
.recherche input {
  font: inherit;
  width: 100%;
  padding: 0.85em 1em;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--carte);
  color: inherit;
  min-height: 52px;
}
.recherche input::placeholder {
  color: var(--discret);
}

/* ─── Thématiques ──────────────────────────────────────────── */

/*
 * Les pictos sont des tuiles carrées à fond jaune et coins arrondis, déjà
 * autoportantes. Les enfermer dans une carte bordée ferait doublon : on les
 * affiche en grand, sans cadre, comme sur l'application d'origine.
 */
.grille-themes {
  display: grid;
  /*
   * min() garde deux colonnes sur mobile — où 165px n'entrent pas deux fois —
   * tout en laissant les pictos grandir sur les écrans larges.
   */
  grid-template-columns: repeat(auto-fill, minmax(min(165px, 45%), 1fr));
  gap: 1.25rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.grille-themes a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-align: center;
  height: 100%;
  text-decoration: none;
  color: var(--texte);
  font-weight: 600;
  line-height: 1.3;
  border-radius: var(--rayon);
}
.grille-themes img,
.grille-themes .picto-absent {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.grille-themes .picto-absent {
  background: var(--accent-clair);
  border-radius: 14%;
}
.grille-themes .nom-theme {
  font-size: 0.95rem;
}
.grille-themes a:hover .nom-theme,
.grille-themes a:focus-visible .nom-theme {
  color: var(--accent);
  text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
  .grille-themes img {
    transition: transform 0.12s ease;
  }
  .grille-themes a:hover img {
    transform: scale(1.04);
  }
}

/* ─── Visuels de l'accueil ─────────────────────────────────── */

.banniere {
  margin: 0.5rem 0 1.25rem;
}
.banniere img,
.visuel-pied img {
  display: block;
  width: 100%;
  height: auto;
}

.visuel-pied {
  display: block;
  margin-top: 2.5rem;
}

/* ─── Listes ───────────────────────────────────────────────── */

.liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--carte);
  overflow: hidden;
}
.liste li + li {
  border-top: 1px solid var(--bord);
}
.liste a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  min-height: 56px;
  text-decoration: none;
  color: var(--texte);
  font-weight: 500;
}
.liste a:hover {
  background: var(--accent-clair);
}
.liste a::after {
  content: '›';
  margin-inline-start: auto;
  color: var(--discret);
  font-size: 1.4rem;
  line-height: 1;
}

.section-titre {
  margin: 2rem 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--discret);
}

/* ─── Fiche structure ──────────────────────────────────────── */

.structures {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.structure {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.1rem;
}
.structure.est-urgence {
  border-color: #f0c4be;
  background: var(--urgence-clair);
}
.structure-tete {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.structure-tete img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  flex: none;
}
.structure-tete h2 {
  font-size: 1.05rem;
}
.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.etiquette {
  font-size: 0.75rem;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  border: 1px solid var(--bord);
  color: var(--discret);
  background: var(--fond);
}
.etiquette.gratuit {
  color: var(--succes);
  border-color: #bfe0cf;
  background: #eaf5ef;
}
.etiquette.parentale {
  color: #b5540a;
  border-color: #f0d5b0;
  background: #fdf4e8;
}

.structure p {
  margin: 0.85rem 0 0;
  white-space: pre-line;
}
.structure dl {
  margin: 0.85rem 0 0;
  display: grid;
  gap: 0.5rem;
}
.structure dt {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--discret);
}
.structure dd {
  margin: 0;
  white-space: pre-line;
}

.contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.appel {
  display: inline-flex;
  flex-direction: column;
  gap: 0.05rem;
  background: var(--bouton);
  color: var(--bouton-texte);
  text-decoration: none;
  font-weight: 700;
  padding: 0.6em 1.1em;
  border-radius: var(--rayon);
  min-height: 48px;
  justify-content: center;
}
.appel:hover {
  background: var(--bouton-survol);
}
.appel .precision {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.75;
}
/* L'urgence garde le rouge : c'est une information, pas une décoration. */
.est-urgence .appel {
  background: var(--urgence);
  color: #fff;
}
.est-urgence .appel:hover {
  filter: brightness(1.08);
}
.lien-secondaire {
  display: inline-flex;
  align-items: center;
  padding: 0.6em 1em;
  min-height: 48px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--carte);
  text-decoration: none;
  font-weight: 600;
}

/* ─── Divers ───────────────────────────────────────────────── */

.vide {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--discret);
}

.chargement {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--discret);
}

.pied-page {
  padding: 1.5rem var(--marge);
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  text-align: center;
  color: var(--discret);
  font-size: 0.85rem;
  border-top: 1px solid var(--bord);
}
.pied-page p {
  margin: 0.25rem 0;
  max-width: 46ch;
  margin-inline: auto;
}
#etat-hors-ligne {
  color: #b5540a;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .grille-themes a,
  .liste a {
    transition: background-color 0.12s ease, border-color 0.12s ease;
  }
}

/* Lien de la fiche structure vers les questions qu'elle traite */
.autres-questions {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--bord);
  font-size: 0.92rem;
}
.autres-questions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* ─── Menu principal ───────────────────────────────────────── */

.burger {
  display: grid;
  align-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--carte);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--texte);
}

.voile-menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(20, 25, 35, 0.45);
}

.menu {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 40;
  width: min(88vw, 320px);
  background: var(--carte);
  border-inline-start: 1px solid var(--bord);
  overflow-y: auto;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.menu-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--bord);
  font-weight: 700;
  position: sticky;
  top: 0;
  background: var(--carte);
}
.menu-tete button {
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--discret);
  cursor: pointer;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
.menu a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  min-height: 56px;
  text-decoration: none;
  color: var(--texte);
  font-weight: 600;
}
.menu a:hover {
  background: var(--accent-clair);
}
.menu .externe {
  margin-inline-start: auto;
  color: var(--discret);
  font-weight: 400;
}

/* Le fond ne défile plus derrière le menu ouvert. */
body.menu-ouvert {
  overflow: hidden;
}

/* ─── Pages libres ─────────────────────────────────────────── */

.page-tete {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}
.page-tete h1 {
  margin: 0;
}

/* Le texte reste à une longueur de ligne confortable ; pas les visuels. */
.page-contenu p,
.page-contenu ul,
.page-contenu ol,
.page-contenu blockquote,
.page-contenu figcaption,
.structure > p,
.intro {
  max-width: 68ch;
}

/*
 * Contenu rédigé au back-office. Le balisage est réduit à une liste blanche
 * côté serveur : ces règles couvrent l'intégralité de ce qui peut en sortir.
 */
.page-contenu {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.25rem;
  overflow-wrap: break-word;
}
.page-contenu > :first-child {
  margin-top: 0;
}
.page-contenu > :last-child {
  margin-bottom: 0;
}
.page-contenu h2 {
  font-size: 1.2rem;
  margin: 1.75rem 0 0.5rem;
}
.page-contenu h3 {
  font-size: 1.05rem;
  margin: 1.5rem 0 0.4rem;
}
.page-contenu h4 {
  font-size: 0.95rem;
  margin: 1.25rem 0 0.3rem;
}
.page-contenu p,
.page-contenu ul,
.page-contenu ol,
.page-contenu blockquote {
  margin: 0 0 0.9rem;
}
.page-contenu ul,
.page-contenu ol {
  padding-inline-start: 1.3rem;
}
.page-contenu li {
  margin: 0.25rem 0;
}
.page-contenu blockquote {
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--bord);
  color: var(--discret);
}
.page-contenu img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 8px;
}
.page-contenu figure {
  margin: 1.25rem 0;
}
.page-contenu figcaption {
  color: var(--discret);
  font-size: 0.88rem;
  margin-top: 0.35rem;
}
.page-contenu hr {
  border: 0;
  border-top: 1px solid var(--bord);
  margin: 1.5rem 0;
}
.page-contenu a {
  overflow-wrap: anywhere;
}
/* Les tableaux défilent seuls plutôt que de faire déborder la page. */
.page-contenu table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1rem 0;
  max-width: 100%;
}
.page-contenu th,
.page-contenu td {
  border: 1px solid var(--bord);
  padding: 0.5rem 0.7rem;
  text-align: start;
}
.page-contenu th {
  background: var(--fond);
}

/* Icônes du catalogue : elles prennent la couleur du texte qui les entoure. */
.icone-menu {
  flex: none;
  color: var(--discret);
}
.menu a:hover .icone-menu {
  color: var(--accent);
}
.icone-page {
  flex: none;
  color: var(--accent);
}

/* ─── Annuaires complets ───────────────────────────────────── */

.compte {
  margin: 0 0 0.6rem;
  color: var(--discret);
  font-size: 0.88rem;
}

/* Cartouches simplifiés : la fiche complète est à un tap. */
.cartouches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cartouche {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: 0.85rem;
  min-height: 72px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--texte);
}
.cartouche:hover {
  border-color: var(--accent);
  background: var(--accent-clair);
}
.cartouche img,
.cartouche .sans-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  flex: none;
}
.cartouche .sans-logo {
  background: var(--fond);
}
.cartouche-texte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.cartouche-nom {
  font-weight: 600;
  line-height: 1.3;
}
.cartouche-portee {
  font-size: 0.78rem;
  color: var(--discret);
}
.cartouche-amorce {
  font-size: 0.85rem;
  color: var(--discret);
  line-height: 1.4;
}

/* Image d'illustration, sur la fiche détaillée uniquement. */
.structure .illustration {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.95rem;
  border-radius: 8px;
}