/* Site vitrine public. Distinct de style.css (application de gestion) et de
   gabarits/document.css (PDF professionnels) : trois publics, trois feuilles.

   Aucune police ni ressource externe. Les polices viennent du système, les
   icônes sont des SVG écrits dans le gabarit. Le site ne fait donc aucune
   requête sortante et ne dépose aucun témoin — cohérent avec CLAUDE.md
   règle 7 (hébergement maîtrisé, aucun service tiers non décidé), et accessoirement
   conforme sans bandeau de consentement. */

:root {
  /* Reprend la charte de l'application (style.css) : même bleu, même vert. */
  --bleu: #0f4c81;
  --bleu-fonce: #0b3a63;
  --bleu-nuit: #082742;
  --bleu-pale: #eaf1f8;
  --vert: #1f8a70;
  --vert-fonce: #17705a;

  /* Accent chaud réservé aux appels à l'action : seul élément du site qui
     n'est pas bleu, donc impossible à confondre avec le reste. */
  --ambre: #b45309;        /* 4,6:1 sur blanc : lisible en texte blanc */
  --ambre-fonce: #92400e;

  --fond: #ffffff;
  --fond-doux: #f5f7fa;
  --surface: #ffffff;
  --bordure: #dbe1e8;
  --texte: #14202c;
  --texte-attenue: #4b5c6d;   /* 7:1 sur blanc */
  --alerte-fond: #fdf3d9;
  --alerte-bordure: #d9ae4a;
  --alerte-texte: #6b4a00;

  --rayon: 10px;
  --ombre: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px rgba(16, 24, 40, 0.06);
  --largeur: 1120px;
  --transition: 180ms ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.site-public {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;      /* >= 16px sur mobile */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.site-public h1, .site-public h2, .site-public h3 {
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--bleu-nuit);
  margin: 0 0 0.6em;
}

.site-public h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
.site-public h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.site-public h3 { font-size: 1.12rem; }

.site-public p { margin: 0 0 1em; max-width: 68ch; }  /* longueur de ligne lisible */

.site-public a { color: var(--bleu); }
.site-public a:hover { color: var(--bleu-fonce); }

/* Anneau de focus visible partout, jamais supprimé. */
.site-public a:focus-visible,
.site-public button:focus-visible,
.site-public input:focus-visible,
.site-public select:focus-visible,
.site-public textarea:focus-visible {
  outline: 3px solid var(--ambre);
  outline-offset: 2px;
  border-radius: 4px;
}

.contenu {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Lien d'évitement : premier élément tabulable de chaque page. */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bleu-nuit);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 50;
}
.evitement:focus {
  left: 0;
}

/* ---------- Bandeau « site incomplet » ---------- */

.bandeau-incomplet {
  background: var(--alerte-fond);
  border-bottom: 2px solid var(--alerte-bordure);
  color: var(--alerte-texte);
  font-size: 0.9rem;
  padding: 0.7rem 0;
}
.bandeau-incomplet strong { font-weight: 600; }
.bandeau-incomplet code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.95em;
}

/* Marqueur de valeur non saisie : doit sauter aux yeux. */
.a-remplir {
  background: #ffe8a3;
  color: #6b4a00;
  border: 1px dashed #b98b1f;
  border-radius: 4px;
  padding: 0.05em 0.45em;
  font-size: 0.88em;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

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

.entete-public {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--bordure);
}

.entete-public .contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 74px;
  flex-wrap: wrap;
}

.marque-public {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  padding: 0.35rem 0;
}
.marque-public:hover { color: inherit; }

.marque-public .sceau {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}

.marque-public .nom {
  font-weight: 650;
  font-size: 1.02rem;
  color: var(--bleu-nuit);
  line-height: 1.2;
}

.marque-public .champ {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--texte-attenue);
  letter-spacing: 0.01em;
}

.nav-public {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.nav-public a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* cible tactile */
  padding: 0 0.85rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--texte);
  transition: background var(--transition), color var(--transition);
}
.nav-public a:hover { background: var(--bleu-pale); color: var(--bleu-fonce); }
.nav-public a[aria-current="page"] {
  color: var(--bleu);
  font-weight: 650;
  box-shadow: inset 0 -2px 0 var(--bleu);
  border-radius: 6px 6px 0 0;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 1.35rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
}

.bouton-principal {
  background: var(--ambre);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.bouton-principal:hover { background: var(--ambre-fonce); color: #fff; }

.bouton-secondaire {
  background: transparent;
  color: var(--bleu);
  border-color: var(--bleu);
}
.bouton-secondaire:hover { background: var(--bleu-pale); color: var(--bleu-fonce); }

.bouton-sur-fonce {
  background: #ffffff;
  color: var(--bleu-nuit);
}
.bouton-sur-fonce:hover { background: var(--bleu-pale); color: var(--bleu-nuit); }

/* ---------- Héros ---------- */

.heros {
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(31, 138, 112, 0.18), transparent 60%),
    linear-gradient(160deg, var(--bleu-nuit), var(--bleu) 75%);
  color: #eef4fa;
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.heros h1 { color: #fff; max-width: 20ch; }

.heros .accroche {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: #cfe0ef;
  max-width: 60ch;
}

.heros .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

.etiquette-titre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #eaf4ff;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

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

.section { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.section-douce { background: var(--fond-doux); border-block: 1px solid var(--bordure); }

.section-entete { max-width: 62ch; margin-bottom: 2.2rem; }
.section-entete p { color: var(--texte-attenue); margin-bottom: 0; }

.surtitre {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  margin-bottom: 0.55rem;
}

/* ---------- Grilles et cartes ---------- */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.15rem;
}
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.5rem;
  box-shadow: var(--ombre);
}

.carte h3 { display: flex; align-items: center; gap: 0.6rem; }
.carte p:last-child { margin-bottom: 0; }
.carte .detail { color: var(--texte-attenue); font-size: 0.95rem; }

.icone {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--vert);
}

/* Carte de service : le lien couvre la carte entière, pas seulement le titre. */
.carte-service {
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.carte-service:hover {
  border-color: var(--bleu);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 24px rgba(15, 76, 129, 0.12);
}
.carte-service .regime {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.85rem;
  color: var(--texte-attenue);
  border-top: 1px dashed var(--bordure);
}

/* ---------- Démarche en étapes ---------- */

.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.15rem;
}

.etapes li {
  counter-increment: etape;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.35rem;
}

.etapes li::before {
  content: counter(etape);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bleu);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
}

.etapes h3 { font-size: 1.02rem; }
.etapes p { font-size: 0.94rem; color: var(--texte-attenue); margin-bottom: 0; }

/* ---------- Encadré d'avertissement professionnel ---------- */

.encadre-pro {
  border-left: 4px solid var(--vert);
  background: #f2f8f6;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 1.25rem 1.4rem;
  font-size: 0.95rem;
}
.encadre-pro p:last-child { margin-bottom: 0; }
.encadre-pro strong { color: var(--bleu-nuit); }

/* ---------- Appel à l'action de bas de page ---------- */

.bande-action {
  background: linear-gradient(160deg, var(--bleu-fonce), var(--bleu-nuit));
  color: #e9f1f8;
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  text-align: center;
}
.bande-action h2 { color: #fff; }
.bande-action p { margin-left: auto; margin-right: auto; color: #c9dcec; }
.bande-action .actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

/* ---------- Formulaire ---------- */

.formulaire {
  display: grid;
  gap: 1.15rem;
  max-width: 640px;
}

.champ { display: flex; flex-direction: column; gap: 0.4rem; }

.champ label { font-weight: 600; font-size: 0.94rem; color: var(--bleu-nuit); }

.champ .aide { font-size: 0.85rem; color: var(--texte-attenue); }

.champ .obligatoire { color: #a3231b; font-weight: 700; }

.champ input,
.champ select,
.champ textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--texte);
  background: #fff;
  padding: 0.7rem 0.85rem;
  min-height: 46px;
  border: 1px solid #b9c4d0;
  border-radius: 8px;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.champ textarea { min-height: 170px; resize: vertical; }

.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: #8fa2b5; }

.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.15);
}

.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"],
.champ select[aria-invalid="true"] {
  border-color: #a3231b;
  background: #fdf6f5;
}

/* Piège à robots : invisible à l'écran, atteignable par rien d'autre qu'un
   automate qui remplit tous les champs. Pas `display:none`, que certains
   robots savent détecter. */
.piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.message-erreur {
  background: #fdecea;
  border: 1px solid #e7a9a3;
  border-left: 4px solid #a3231b;
  color: #7a1b15;
  border-radius: var(--rayon);
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
}

.message-succes {
  background: #eef7f4;
  border: 1px solid #a8d4c7;
  border-left: 4px solid var(--vert);
  color: #12564a;
  border-radius: var(--rayon);
  padding: 1.25rem 1.4rem;
}
.message-succes p:last-child { margin-bottom: 0; }

/* ---------- Liste de coordonnées ---------- */

.coordonnees { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.coordonnees li { display: flex; gap: 0.8rem; align-items: flex-start; }
.coordonnees .libelle {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

/* ---------- Pied de page ---------- */

.pied-public {
  background: var(--bleu-nuit);
  color: #b8cbdc;
  padding: 2.75rem 0 1.75rem;
  font-size: 0.92rem;
}
.pied-public h3 {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.pied-public a { color: #d6e6f4; text-decoration: none; }
.pied-public a:hover { color: #fff; text-decoration: underline; }
.pied-public .colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem;
}
.pied-public ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.pied-public .mention-legale {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.83rem;
  color: #91a8bd;
}
.pied-public .mention-legale p { max-width: none; }

/* ---------- Adaptations mobiles ---------- */

@media (max-width: 720px) {
  .entete-public { position: static; }   /* pas de vol d'espace vertical */
  .entete-public .contenu { padding-block: 0.75rem; }
  .nav-public { width: 100%; gap: 0.15rem; }
  .nav-public a { padding: 0 0.6rem; font-size: 0.9rem; }
  .heros .actions .bouton, .bande-action .actions .bouton { width: 100%; }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-public *,
  .site-public *::before,
  .site-public *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Impression ---------- */

@media print {
  .entete-public, .nav-public, .bande-action, .evitement { display: none; }
  .site-public { font-size: 12pt; color: #000; }
  .heros { background: none; color: #000; }
  .heros h1, .bande-action h2 { color: #000; }
}

/* ---------------------------------------------------------------------------
   Blog (G9). Le corps d'un article vient de core/markdown_simple.py : h2 à h5,
   paragraphes, listes, citations, code, liens, images. Mesure de lecture
   72ch, interligne généreux.
   --------------------------------------------------------------------------- */
.liste-articles { display: grid; gap: 1.5rem; max-width: 72ch; }
.apercu-article {
  padding: 1.5rem 1.6rem; border: 1px solid var(--bordure); border-radius: 12px;
  background: var(--surface);
}
.apercu-article h2 { margin: .25rem 0 .6rem; font-size: 1.35rem; line-height: 1.25; }
.apercu-article h2 a { color: var(--bleu); text-decoration: none; }
.apercu-article h2 a:hover, .apercu-article h2 a:focus-visible { text-decoration: underline; }
.apercu-article p { margin-bottom: 0; }
.meta-article {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 .5rem;
  color: var(--texte-attenue); font-size: .92rem;
}
.mots-cles { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.mots-cles span {
  background: var(--bleu-pale); color: var(--bleu-fonce); border-radius: 999px;
  padding: .15rem .7rem; font-size: .85rem;
}
.article-public { max-width: 72ch; }
.article-contenu { font-size: 1.06rem; line-height: 1.7; }
.article-contenu h2, .article-contenu h3, .article-contenu h4, .article-contenu h5 {
  margin: 2rem 0 .7rem; line-height: 1.25; color: var(--bleu-fonce);
}
.article-contenu h2 { font-size: 1.5rem; }
.article-contenu h3 { font-size: 1.25rem; }
.article-contenu h4, .article-contenu h5 { font-size: 1.08rem; }
.article-contenu p, .article-contenu ul, .article-contenu ol { margin: 0 0 1.1rem; }
.article-contenu ul, .article-contenu ol { padding-left: 1.4rem; }
.article-contenu li { margin-bottom: .3rem; }
.article-contenu blockquote {
  margin: 1.2rem 0; padding: .6rem 1.1rem; border-left: 4px solid var(--vert);
  background: var(--fond-doux); color: var(--texte-attenue);
}
.article-contenu blockquote p:last-child { margin-bottom: 0; }
.article-contenu pre {
  background: var(--bleu-nuit); color: #fff; padding: 1rem 1.2rem; border-radius: 10px;
  overflow-x: auto; font-size: .92rem; line-height: 1.5; margin: 0 0 1.1rem;
}
.article-contenu code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
.article-contenu :not(pre) > code { background: var(--bleu-pale); padding: .1rem .35rem; border-radius: 4px; }
.article-contenu img { max-width: 100%; height: auto; border-radius: 8px; }
.article-contenu hr { border: 0; border-top: 1px solid var(--bordure); margin: 2rem 0; }
.article-contenu a { color: var(--bleu); }
.signature-article {
  margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--bordure);
  color: var(--texte-attenue); font-size: .95rem;
}

/* Coordonnées protégées : la valeur apparaît au clic (static/coordonnees.js). */
.coordonnee-protegee .revele { font: inherit; font-size: 0.92em; padding: 0.15rem 0.65rem; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.coordonnee-protegee .revele:hover { background: rgba(15, 76, 129, 0.08); }

/* ---------- Prise de rendez-vous ---------- */

.mesure-public { max-width: 640px; }
.espace-haut-public { margin-top: 1.5rem; }
.carte-type-rdv { color: inherit; text-decoration: none; }
.site-public a.carte-type-rdv { color: inherit; }
.carte-type-rdv .meta-type-rdv { font-weight: 600; color: var(--bleu); margin: 0 0 0.5rem; }
.carte-type-rdv .lien-carte { margin-top: auto; padding-top: 1rem; font-weight: 600; color: var(--bleu); }
.titre-etape { font-size: 1.15rem; margin: 0 0 0.35rem; }

/* La liste des jours défile : une ou deux semaines de créneaux restent compactes. */
.jours-creneaux { display: grid; gap: 0.85rem; max-height: 36rem; overflow-y: auto; padding-right: 0.35rem; margin-top: 0.75rem; }
.jour-creneaux { margin: 0; padding: 0.85rem 1rem 1rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }
.jour-creneaux legend { padding: 0 0.35rem; font-weight: 700; color: var(--bleu-nuit); }
.puces-creneaux { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.puce-creneau { position: relative; }
.puce-creneau input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce-creneau span { display: inline-block; min-width: 4.6rem; padding: 0.45rem 0.8rem; border: 1px solid #b9c4d0; border-radius: 999px; background: #fff; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition); }
.puce-creneau span:hover { border-color: var(--bleu); }
.puce-creneau input:checked + span { background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 600; }
.puce-creneau input:focus-visible + span { outline: 3px solid var(--ambre); outline-offset: 2px; }

.boutons-agenda { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.75rem; }
.zone-courte { min-height: 90px !important; }
.carte-rendez-vous { border-color: var(--bleu); background: var(--bleu-pale); }

/* Un bouton en lien garde ses couleurs : la règle générale des liens
   (.site-public a) est plus spécifique que .bouton-principal seule. */
.site-public a.bouton-principal, .site-public a.bouton-principal:hover { color: #fff; }
.site-public a.bouton-secondaire { color: var(--bleu); }
.site-public a.bouton-sur-fonce { color: var(--bleu-nuit); }

/* Espacements autrefois en attribut style= (interdit par la CSP). */
.espace-haut { margin-top: 1.15rem; }
.espace-haut-large { margin-top: 2rem; }