:root{--accent:#ffb45c;--accent-fonce:#3d2a4d;--fond:#faf5f3;--texte:#1f1a24}
/* Feuille de style commune.
   Direction : signalétique de chantier et bon d'intervention. Titres en Barlow Condensed
   (SIL Open Font License), vert sapin pour les bandeaux, jaune balise réservé aux actions.
   Variables posées par le moteur : --accent (jaune des actions), --accent-fonce (vert des
   bandeaux), --fond, --texte. Mobile d'abord, cibles tactiles d'au moins 44 px. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/polices/barlow-condensed-latin-800-normal.2515494e8c.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/polices/barlow-condensed-latin-700-normal.3787a5a419.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --pierre: #56635e;
  --ligne: #d5dbd6;
  --carte: #ffffff;
  --titre: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --texte-courant: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[hidden] { display: none !important; }
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 1.0625rem/1.6 var(--texte-courant);
  padding-bottom: 5rem;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-fonce); text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--titre); line-height: 1.05; margin: 0; letter-spacing: 0.005em; }
h1 { font-weight: 800; font-size: clamp(2.6rem, 11vw, 4.6rem); }
h2 { font-weight: 700; font-size: clamp(1.9rem, 6.5vw, 2.6rem); margin-bottom: 1rem; }
h3 { font-weight: 700; font-size: 1.45rem; margin-bottom: 0.4rem; }
p { margin: 0 0 0.9rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }

.cadre { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.1rem; }
.bloc { padding-top: 2.75rem; padding-bottom: 0.5rem; }

.evitement { position: absolute; left: -9999px; top: 0; background: var(--texte); color: #fff; padding: 0.75rem 1rem; }
.evitement:focus { left: 0; z-index: 20; }

/* Boutons : le jaune n'est utilisé que pour agir. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: 0.6rem 1.25rem; border: 0; border-radius: 0.3rem;
  font: 700 1.2rem/1 var(--titre); letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
}
.bouton--rappel, .bouton--envoi { background: var(--accent); color: var(--texte); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.18); }
.bouton--rappel:hover, .bouton--envoi:hover { filter: brightness(1.06); }
.bouton--appel { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.bouton--sombre { background: var(--texte); color: #fff; }

/* En-tête */
.entete { background: var(--fond); border-bottom: 1px solid var(--ligne); }
.entete__ligne { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 4rem; }
.marque { display: flex; flex-direction: column; text-decoration: none; color: var(--texte); line-height: 0.95; }
.marque__metier { font: 700 0.95rem/1 var(--titre); color: var(--pierre); letter-spacing: 0.03em; }
.marque__ville { font: 800 1.6rem/1 var(--titre); color: var(--accent-fonce); }
.entete__actions { display: flex; gap: 0.5rem; }
.entete__actions .bouton { min-height: 2.75rem; padding: 0.5rem 0.9rem; font-size: 1.1rem; }
.entete__actions .bouton--appel { display: none; }

/* Bandeau d'ouverture */
.une { background: var(--accent-fonce); color: #fff; padding: 2rem 0 2.5rem; }
.une a:not(.bouton) { color: #fff; }
.une__grille { display: grid; gap: 1.75rem; align-items: start; }
.une h1 { color: #fff; margin-bottom: 0.9rem; max-width: 14ch; }
.une__chapo { font-size: 1.15rem; max-width: 36rem; color: rgb(255 255 255 / 0.92); }
.coches { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.55rem; }
.coches li { position: relative; padding-left: 1.9rem; font-weight: 600; }
.coches li::before {
  content: ""; position: absolute; left: 0; top: 0.2rem; width: 1.25rem; height: 1.25rem;
  background: var(--accent); border-radius: 0.2rem;
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
}
.une--article { padding: 1.25rem 0 2rem; }
.une--article h1 { font-size: clamp(2.2rem, 9vw, 3.6rem); max-width: 18ch; }
.une--article .bouton { margin-top: 0.4rem; }

/* Présentation d'artisan : surtitre, gros bouton d'action, formulaire en bas de l'accueil */
.surtitre { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 700; color: var(--accent); margin: 0 0 0.6rem; }
.bouton--grand { min-height: 3.4rem; padding: 0.7rem 1.4rem; font-size: 1.45rem; margin-top: 0.6rem; }
.une__note { font-size: 0.92rem; color: rgb(255 255 255 / 0.85); margin-top: 0.9rem; }
.une__image { margin: 0; }
.zone__legende { font-weight: 700; margin: 1.2rem 0 0.4rem; }
.tarifs { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--ligne); }
.tarifs td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--ligne); }
.tarifs td + td { text-align: right; font-weight: 700; white-space: nowrap; color: var(--accent-fonce); }
.tarifs tr:last-child td { border-bottom: 0; }
.tarifs__note { font-size: 0.92rem; color: var(--pierre); margin-top: 0.6rem; }
/* Dispositions propres à chaque site (moteur/disposition.py) */
.une--centre .une__texte { text-align: center; margin-inline: auto; max-width: 40rem; }
.une--centre h1, .une--centre .une__chapo { margin-inline: auto; }
.apres-tarifs { margin-top: 1rem; }
.tarifs-cartes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.tarifs-cartes li { margin: 0; background: var(--carte); border: 1px solid var(--ligne); border-top: 4px solid var(--accent); border-radius: 0.3rem; padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; }
.tarifs-cartes__prestation { font-size: 0.95rem; }
.tarifs-cartes__prix { font: 800 1.45rem/1.1 var(--titre); color: var(--accent-fonce); }
.tuiles--liste .tuile { border-left-width: 0; border-bottom: 3px solid var(--accent); }
.demande-bas { background: var(--accent-fonce); padding: 2.5rem 0; margin-top: 2.5rem; }
.demande-bas__cadre { max-width: 34rem; }

.ariane ol { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0 0 1rem; font-size: 0.9rem; }
.ariane li { margin: 0; color: rgb(255 255 255 / 0.75); }
.ariane li + li::before { content: "/"; padding: 0 0.5rem; opacity: 0.6; }
.ariane a { display: inline-block; padding: 0.45rem 0; }

/* Formulaire présenté comme un bon d'intervention */
.ticket {
  background: var(--carte); color: var(--texte); border-radius: 0.4rem;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08), 0 14px 32px -18px rgb(0 0 0 / 0.55);
  overflow: hidden; scroll-margin-top: 1rem;
}
.ticket__tete {
  background: var(--accent); padding: 0.85rem 1.15rem 0.75rem;
  border-bottom: 2px dashed rgb(0 0 0 / 0.35);
}
.ticket__tete h2 { font-size: 2rem; margin: 0; }
.ticket__tete p { margin: 0; font-weight: 600; font-size: 0.95rem; }
.ticket__corps { padding: 1.1rem 1.15rem 1.3rem; }
.ticket a { color: var(--accent-fonce); }

.choix { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.etape__progression { font-size: 0.85rem; font-weight: 700; color: var(--pierre); margin: 0 0 0.6rem; display: flex; justify-content: space-between; align-items: center; }
.etape__retour { background: none; border: 0; padding: 0.5rem 0; min-height: 2.75rem; color: var(--accent-fonce); text-decoration: underline; font: inherit; cursor: pointer; }
.champ__erreur { color: #a3261b; font-size: 0.85rem; margin: 0.3rem 0 0; }
.champ__erreur:empty { display: none; }
.champ input[aria-invalid="true"] { border-color: #a3261b; }
[data-etape="1"] .bouton--envoi { width: 100%; }
.choix legend { font-weight: 700; margin-bottom: 0.4rem; padding: 0; }
.choix__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.choix__option { position: relative; }
.choix__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix__option span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3rem; padding: 0.35rem; border: 2px solid var(--ligne); border-radius: 0.3rem;
  font-weight: 600; font-size: 0.95rem; line-height: 1.15;
}
.choix__option input:checked + span { border-color: var(--accent-fonce); background: var(--accent-fonce); color: #fff; }
.choix__option input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.champ { margin-bottom: 0.9rem; }
.champ label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.facultatif { font-weight: 400; color: var(--pierre); }
.champ input[type="text"], .champ input[type="tel"], .champ input[type="email"], .champ textarea {
  width: 100%; min-height: 3rem; padding: 0.6rem 0.75rem; font: inherit; color: var(--texte);
  background: #fff; border: 2px solid var(--ligne); border-radius: 0.3rem;
}
.champ input:focus, .champ textarea:focus { border-color: var(--accent-fonce); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.champ textarea { min-height: 5.5rem; resize: vertical; }
.plus { margin: 0 0 1rem; }
.plus summary { cursor: pointer; color: var(--accent-fonce); font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.plus[open] summary { margin-bottom: 0.5rem; }
.champ--case { display: flex; gap: 0.7rem; align-items: flex-start; }
.champ--case input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; flex: none; accent-color: var(--accent-fonce); }
.champ--case label { font-weight: 400; font-size: 0.85rem; line-height: 1.45; color: var(--pierre); margin: 0; }
.consentement-suite { font-size: 0.85rem; line-height: 1.45; color: var(--pierre); }
.consentement-suite summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--accent-fonce); text-decoration: underline; }
.consentement-suite p { margin: 0 0 0.4rem; }
.consentement-suite__editeur { font-size: 0.8rem; }
.champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 4.1rem; margin-bottom: 0.9rem; }
.bouton--envoi { width: 100%; min-height: 3.4rem; font-size: 1.45rem; }

/* Étapes : une vraie séquence, d'où la numérotation */
.etapes-bloc__grille { display: grid; gap: 1.5rem; }
.etapes { list-style: none; padding: 0; margin: 0; counter-reset: etape; display: grid; gap: 1.25rem; }
.etapes li { counter-increment: etape; position: relative; padding-left: 3.6rem; }
.etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: -0.2rem;
  font: 800 2.9rem/1 var(--titre); color: var(--accent-fonce);
}
.etapes p { color: var(--pierre); margin: 0; }
.illustration { margin: 0; }
.illustration img { border-radius: 0.4rem; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.illustration figcaption { font-size: 0.8rem; color: var(--pierre); margin-top: 0.35rem; }
.une .illustration figcaption { color: rgb(255 255 255 / 0.85); }

/* Tuiles de situation */
.tuiles { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.tuiles li { margin: 0; }
.tuile {
  display: block; height: 100%; padding: 1rem 1.1rem; text-decoration: none; color: var(--texte);
  background: var(--carte); border: 1px solid var(--ligne); border-left: 6px solid var(--accent); border-radius: 0.3rem;
}
.tuile strong { display: block; font: 700 1.45rem/1.1 var(--titre); color: var(--accent-fonce); margin-bottom: 0.25rem; }
.tuile span { color: var(--pierre); }
.tuile:hover strong { text-decoration: underline; }

/* Zone : quartiers présentés comme des plaques de rue */
.zone { background: var(--accent-fonce); color: #fff; margin-top: 2.75rem; padding: 2.5rem 0 2.25rem; }
.zone p { max-width: 40rem; }
.zone .source, .zone .source a { color: rgb(255 255 255 / 0.75); }
.plaques { list-style: none; padding: 0; margin: 1.25rem 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.plaque {
  margin: 0; padding: 0.45rem 1rem 0.4rem; background: #fff; color: var(--accent-fonce);
  font: 800 1.35rem/1 var(--titre); letter-spacing: 0.02em; border-radius: 0.35rem;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--accent-fonce);
}

/* Bon à savoir */
.savoir { display: grid; gap: 1.25rem; }
.savoir__point { border-top: 3px solid var(--texte); padding-top: 0.8rem; }
.savoir__point p, .savoir__point li { color: #2a3632; }

.source { font-size: 0.82rem; color: var(--pierre); margin-top: 0.4rem; }
.source a { color: inherit; }

/* Questions */
.faq details { border-top: 1px solid var(--ligne); }
.faq details:last-of-type { border-bottom: 1px solid var(--ligne); }
.faq summary { cursor: pointer; font-weight: 700; padding: 0.95rem 0; min-height: 2.75rem; }
.faq details[open] summary { color: var(--accent-fonce); }
.faq__reponse { padding-bottom: 0.6rem; }

/* Article */
.article { display: grid; gap: 2rem; padding-top: 0.5rem; }
.article__corps { min-width: 0; max-width: 42rem; }
.article__corps .illustration { margin-top: 2rem; }
.article__cote .ticket { margin-top: 2rem; }

/* Appel final */
.appel-final { background: var(--accent); margin-top: 3rem; padding: 2rem 0; }
.appel-final__ligne { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.appel-final__texte { font: 800 clamp(1.8rem, 6vw, 2.5rem)/1.05 var(--titre); margin: 0; max-width: 22ch; }

.sources-page { margin-top: 2rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--pierre); }
.sources-page summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-weight: 600; }
.sources-page li { margin-bottom: 0.4rem; }

/* Pages légales et messages */
.texte-legal, .message { padding-top: 2rem; padding-bottom: 2rem; max-width: 46rem; }
.texte-legal h1, .message h1 { font-size: clamp(2.2rem, 8vw, 3rem); margin-bottom: 1rem; }
.texte-legal h2 { font-size: 1.6rem; margin: 1.75rem 0 0.5rem; }

/* Pied de page */
.pied { background: var(--texte); color: rgb(255 255 255 / 0.85); padding: 2rem 0 1rem; font-size: 0.92rem; }
.pied a { color: #fff; }
.pied__marque { font: 800 1.5rem/1 var(--titre); color: #fff; }
.pied__pages { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.pied__pages a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.pied__note a { display: inline-block; padding: 0.6rem 0; }
.pied__note { color: rgb(255 255 255 / 0.6); font-size: 0.82rem; }

/* Barre d'action fixe sur mobile, masquée quand le formulaire est visible */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; gap: 0.5rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--fond); box-shadow: 0 -1px 0 var(--ligne);
  transition: transform 0.2s ease;
}
.barre-mobile .bouton { flex: 1; min-height: 3.1rem; font-size: 1.3rem; }
.barre-mobile .bouton--appel { color: var(--accent-fonce); }
.barre-mobile--cachee { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .barre-mobile { transition: none; } }

@media (min-width: 40rem) {
  .tuiles { grid-template-columns: repeat(3, 1fr); }
  .tuiles--liste { grid-template-columns: 1fr; }
  .savoir { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2.5rem; }
}

@media (min-width: 60rem) {
  body { padding-bottom: 0; }
  .barre-mobile { display: none; }
  .entete__actions .bouton--appel { display: inline-flex; color: var(--accent-fonce); }
  .une { padding: 3.5rem 0 4rem; }
  .une__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3.5rem; }
  .une--centre .une__grille { grid-template-columns: 1fr; }
  .une h1 { margin-top: 0.5rem; }
  .etapes-bloc__grille { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
  .article { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3.5rem; }
  .article__cote .ticket { position: sticky; top: 1.5rem; }
}

@media print {
  .entete__actions, .barre-mobile, .ticket, .appel-final { display: none; }
}

/* Habillage « capitole » : titres étroits en bas de casse, bandeau violet bordé d'une rangée
   de pommettes dorées (celles de la croix occitane), cartes cintrées comme des arcades,
   numéros d'étapes en losange, quartiers en pastilles pointées.
   Ajouté après style.css pour les sites dont theme.habillage vaut "capitole". */

:root {
  --titre: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, system-ui, sans-serif;
  --ligne: #e3d6d6;
}

h1, h2, h3 { letter-spacing: -0.01em; line-height: 1.04; }
h1 { font-weight: 700; font-size: clamp(2.4rem, 10vw, 4.2rem); }
h2 { font-weight: 700; font-size: clamp(1.7rem, 6vw, 2.4rem); }
h3 { font-weight: 700; font-size: 1.35rem; }
h2::before {
  content: ""; display: block; width: 3.3rem; height: 0.7rem; margin-bottom: 0.5rem;
  background: radial-gradient(circle, var(--accent) 0.3rem, transparent 0.33rem) 0 50% / 1.1rem 0.7rem repeat-x;
}

.bouton { border-radius: 999px; font: 700 1.2rem/1 var(--titre); letter-spacing: 0.01em; padding-inline: 1.5rem; }
.bouton--rappel, .bouton--envoi { box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.16), 0 3px 0 color-mix(in srgb, var(--accent-fonce) 40%, transparent); }
.bouton--grand { font-size: 1.4rem; padding-inline: 2rem; }
.entete__actions .bouton { font-size: 1.05rem; }
.barre-mobile .bouton { font-size: 1.25rem; }

.entete { border-bottom: 0; box-shadow: inset 0 -3px 0 var(--accent-fonce); }
.marque__metier { font: 600 0.95rem/1 var(--titre); letter-spacing: 0.02em; }
.marque__ville { font: 700 1.65rem/1 var(--titre); }

/* Bandeau violet terminé par une rangée de pommettes dorées */
.une {
  padding-bottom: 3.6rem;
  background-image: radial-gradient(circle, var(--accent) 0.32rem, transparent 0.35rem);
  background-size: 1.6rem 1.6rem;
  background-position: 0.8rem calc(100% - 0.9rem);
  background-repeat: repeat-x;
}
.surtitre { text-transform: none; font: 600 1.05rem/1.3 var(--titre); letter-spacing: 0.02em; }

/* Cartes cintrées comme des arcades */
.tarifs, .ticket { border-radius: 1.6rem 1.6rem 0.3rem 0.3rem; }
.tarifs { overflow: hidden; border: 0; box-shadow: 0 0 0 2px var(--accent-fonce); }
.tarifs tr:first-child td { padding-top: 1.1rem; }
.tarifs-cartes li, .tuile { border-radius: 1.6rem 1.6rem 0.3rem 0.3rem; }
.tarifs-cartes li { border: 2px solid var(--accent-fonce); border-top: 2px solid var(--accent-fonce); padding-top: 1.1rem; }
.tarifs-cartes__prix, .tuile strong { font-family: var(--titre); }
.tarifs-cartes__prix { font-size: 1.3rem; text-wrap: balance; }
.tuile { border: 2px solid var(--accent-fonce); border-left: 2px solid var(--accent-fonce); padding-top: 1.2rem; }
.tuiles--liste .tuile { border-bottom: 2px solid var(--accent-fonce); border-radius: 0.3rem 1.6rem 1.6rem 0.3rem; padding-top: 1rem; }
.tuile strong { font-size: 1.4rem; }
.illustration img { border-radius: 1.6rem 1.6rem 0.3rem 0.3rem; }

/* Quartiers en pastilles pointées d'or */
.plaque {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 700 1.1rem/1 var(--titre); letter-spacing: 0; color: #fff; background: transparent;
  border-radius: 999px; padding: 0.55rem 1rem 0.55rem 0.8rem;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 45%, transparent);
}
.plaque::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); flex: none; }

.etapes li { padding-left: 4rem; }
.etapes li::before {
  font: 700 1.5rem/3rem var(--titre); width: 3rem; height: 3rem; text-align: center; top: -0.4rem;
  background: var(--accent); color: var(--texte);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.savoir__point {
  border-top: 0; padding: 1rem 1.1rem; border-radius: 1.2rem 1.2rem 0.3rem 0.3rem;
  background: color-mix(in srgb, var(--accent) 16%, var(--carte));
}

.ticket__tete { border-bottom: 0; padding-top: 1.1rem; }
.ticket__tete h2 { font-size: 1.9rem; }
.ticket__tete h2::before { display: none; }
.choix__option span, .champ input[type="text"], .champ input[type="tel"], .champ input[type="email"], .champ textarea { border-radius: 0.8rem; }
.appel-final__texte, .pied__marque { font-family: var(--titre); font-weight: 700; }