/*
 * Kit Communauterre : l'habillage de tout ce que le kit et le serveur fabriquent
 * (agenda, actualités, fiches, documents, élus, démarches, « Vivre à », pages
 * d'événement et d'article, ciel, alerte…). Copié dans chaque site sous
 * communauterre/communauterre.css par app/outils/installer-kit.php.
 *
 * Un thème le charge AVANT sa propre feuille et règle ces variables :
 *   --ct-accent, --ct-accent-fonce, --ct-accent-clair, --ct-fond, --ct-surface,
 *   --ct-texte, --ct-texte-doux, --ct-bord, --ct-police-titres, --ct-police-texte,
 *   --ct-rayon, --ct-largeur
 * Tout est écrit avec :where() : la moindre règle du thème l'emporte.
 * (Belcaire et Espezel ont leur propre habillage et ne chargent pas ce fichier.)
 */
:root {
  --ct-accent: #1f5f8b; --ct-accent-fonce: #164766; --ct-accent-clair: #e6eff5;
  --ct-fond: #faf8f4; --ct-surface: #fff; --ct-texte: #1c2430; --ct-texte-doux: #4a5563; --ct-bord: #dfe3e8;
  --ct-police-titres: Georgia, serif; --ct-police-texte: system-ui, sans-serif; --ct-rayon: 12px; --ct-largeur: 1160px;
}

/* ── Base ──────────────────────────────────────────────────────────── */
:where(.ct-corps) { margin: 0; background: var(--ct-fond); color: var(--ct-texte); font: 400 1.0625rem/1.6 var(--ct-police-texte); -webkit-font-smoothing: antialiased; }
:where(.ct-corps) :where(h1, h2, h3) { font-family: var(--ct-police-titres); line-height: 1.2; color: var(--ct-texte); }
:where(.ct-corps) :where(a) { color: var(--ct-accent); }
:where(.ct-corps) :where(img) { max-width: 100%; height: auto; }
:where(.ct-corps) :where(:focus-visible) { outline: 3px solid var(--ct-accent); outline-offset: 2px; }
:where(main:focus) { outline: none; }
:where(.ct-conteneur) { width: min(100% - 32px, var(--ct-largeur)); margin-inline: auto; }
:where(.sr-only) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where(.ct-evitement) { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 0.6rem 1rem; background: var(--ct-accent); color: #fff; border-radius: 8px; font-weight: 700; }
:where(.ct-evitement:focus) { top: 12px; }
:where(.liste-vide) { color: var(--ct-texte-doux); font-style: italic; }
:where(.ct-bouton) { display: inline-block; padding: 0.7rem 1.3rem; border-radius: 999px; background: var(--ct-accent); color: #fff; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; }
:where(.ct-bouton:hover) { background: var(--ct-accent-fonce); color: #fff; }

/* ── En-tête des pages intérieures et contenu ──────────────────────── */
:where(.ct-entete-page) { padding: 2.5rem 0 2rem; background: var(--ct-accent-clair); border-bottom: 1px solid var(--ct-bord); }
:where(.ct-entete-page h1) { margin: 0.3rem 0 0; font-size: clamp(2rem, 5vw, 2.8rem); }
:where(.fil-ariane) { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.95rem; color: var(--ct-texte-doux); }
:where(.fil-ariane a) { color: var(--ct-texte-doux); }
:where(.ct-page) { width: min(100% - 32px, var(--ct-largeur)); margin: 2.5rem auto 0; }
/* Une seule largeur de page (1200 px, comme Belcaire) ; le texte suit : un peu plus grand et plus aéré */
:where(.ct-page--texte, .article-page) { max-width: var(--ct-largeur); }
:where(.article-page) { width: min(100% - 32px, var(--ct-largeur)); margin: 2.5rem auto 0; }
:where(.ct-page--texte, .article-page) :where(p, li) { font-size: 1.05rem; line-height: 1.85; }
:where(.article-page h2) { margin-top: 2.2rem; font-size: 1.5rem; }
:where(.page-contenu__intro, .ct-chapeau, .article-page__soustitre) { font-size: 1.2rem; line-height: 1.55; color: var(--ct-texte-doux); }
:where(.article-page > img) { width: 100%; aspect-ratio: var(--r, auto); object-fit: cover; border-radius: var(--ct-rayon); margin: 1rem 0; }
/* Image d'événement ou image pleine largeur d'un article (proportion --r écrite par le serveur) : même hauteur pour toutes,
   560 px au plus (70 % de l'écran sur téléphone), jamais plus que la colonne ; une affiche en hauteur reste entière et centrée.
   Même règle que Belcaire (belcaire-accueil.css). */
:where(.article-page img[style*="--r"]) { --hauteur: min(560px, 70vh); --proportion: max(var(--r), 0.707); display: block; width: min(100%, 840px, calc(var(--hauteur) * var(--proportion))); height: auto; aspect-ratio: var(--proportion); margin-left: auto; margin-right: auto; }
:where(.article-page__meta) { color: var(--ct-texte-doux); font-size: 0.95rem; }

/* ── Bandeau d'alerte et version de travail ────────────────────────── */
:where(.ct-alerte) { position: relative; z-index: 60; background: #c8102e; color: #fff; border-bottom: 3px solid #8e0b20; }
:where(.ct-alerte__contenu) { display: flex; align-items: center; gap: 12px; padding-block: 12px; }
:where(.ct-alerte__icone) { flex: none; font-size: 1.4rem; line-height: 1; }
:where(.ct-alerte__texte) { margin: 0; font-weight: 700; line-height: 1.45; color: #fff; }
:where(.ct-alerte__date) { font-weight: 400; }
:where(.ct-travail) { margin: 0; padding: 0.35rem 16px; background: #fff4cc; color: #4a3b00; text-align: center; font-size: 0.9rem; }

/* ── Grilles de cartes : actualités, Découvrir, accueil ────────────── */
:where(.grille-articles, .ct-grille) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; }
:where(.carte-article) { position: relative; display: flex; flex-direction: column; background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: var(--ct-rayon); overflow: hidden; }
:where(.carte-article__cliquable) { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
:where(.carte-article__image) { aspect-ratio: 16 / 10; background: var(--ct-accent-clair); }
:where(.carte-article__image img) { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.carte-article__corps) { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; padding: 1.1rem 1.2rem 1.3rem; }
:where(.carte-article__meta) { display: flex; gap: 0.6rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--ct-texte-doux); }
:where(.carte-article__categorie) { padding: 0 0.55rem; border-radius: 999px; background: var(--ct-accent-clair); color: var(--ct-accent-fonce); font-weight: 600; }
:where(.carte-article__titre) { margin: 0; font-size: 1.25rem; }
:where(.carte-article__extrait) { margin: 0; color: var(--ct-texte-doux); }
:where(.carte-article__lien) { margin-top: auto; font-weight: 700; color: var(--ct-accent); }
:where(.carte-article__lien)::after { content: ""; position: absolute; inset: 0; }   /* toute la carte est cliquable */

/* ── Agenda (kit agenda.js) ────────────────────────────────────────── */
:where(.agenda-avenir__titre) { font-size: 1.6rem; margin: 0 0 1rem; }
:where(.agenda-avenir) + :where(.agenda-avenir__titre), :where(.agenda-avenir) ~ :where(.agenda-avenir__titre) { margin-top: 3rem; }
:where(.groupe-annee__grille) { display: grid; gap: 0.9rem; }
:where(.carte-evenement) { display: grid; grid-template-columns: auto 96px 1fr auto; align-items: center; gap: 1rem; padding: 0.8rem 1rem; background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: var(--ct-rayon); color: inherit; text-decoration: none; }
:where(.carte-evenement:hover) { border-color: var(--ct-accent); }
:where(.carte-evenement__date) { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 10px; background: var(--ct-accent); color: #fff; line-height: 1; }
:where(.carte-evenement__jour) { font: 700 1.5rem var(--ct-police-titres); }
:where(.carte-evenement__mois) { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; }
:where(.carte-evenement__miniature img) { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
:where(.carte-evenement__titre) { margin: 0; font-weight: 700; font-size: 1.1rem; }
:where(.carte-evenement__soustitre, .carte-evenement__lieu) { margin: 0.15rem 0 0; color: var(--ct-texte-doux); font-size: 0.95rem; }
:where(.carte-evenement__fleche) { font-size: 1.6rem; color: var(--ct-accent); }
@media (max-width: 600px) {
  :where(.carte-evenement) { grid-template-columns: auto 1fr; }
  :where(.carte-evenement__miniature, .carte-evenement__fleche) { display: none; }
}
:where(.accordeon-annee) { margin-top: 0.8rem; border: 1px solid var(--ct-bord); border-radius: var(--ct-rayon); background: var(--ct-surface); }
:where(.accordeon-annee__entete) { display: flex; justify-content: space-between; width: 100%; padding: 0.9rem 1.1rem; background: none; border: 0; font: 700 1.1rem var(--ct-police-texte); color: var(--ct-texte); cursor: pointer; }
:where(.accordeon-annee__chevron) { transition: transform .2s; }
:where(.accordeon-annee--ouvert .accordeon-annee__chevron) { transform: rotate(180deg); }
:where(.accordeon-annee) > :where(.groupe-annee__grille) { display: none; padding: 0 1rem 1rem; }
:where(.accordeon-annee--ouvert) > :where(.groupe-annee__grille) { display: grid; }

/* ── Pages d'événement (serveur : app/rendu.php) ───────────────────── */
:where(.article-page__dates) { margin: 1.5rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--ct-accent); background: var(--ct-surface); border-radius: 0 var(--ct-rayon) var(--ct-rayon) 0; }
:where(.article-page__dates h2) { margin: 0 0 0.4rem; font-size: 1.1rem; }
:where(.article-page__dates ul) { margin: 0; padding-left: 1.1rem; }
:where(.evenement-acces) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 1.5rem 0; }
:where(.evenement-acces__boutons) { display: flex; flex-wrap: wrap; gap: 0.6rem; }
:where(.evenement-acces__bouton) { padding: 0.6rem 1.1rem; border-radius: 999px; border: 2px solid var(--ct-accent); background: var(--ct-surface); color: var(--ct-accent); font: 700 1rem var(--ct-police-texte); text-decoration: none; cursor: pointer; }
:where(.evenement-acces__bouton--principal) { background: var(--ct-accent); color: #fff; }
:where(.evenement-acces__qr) { display: flex; align-items: center; gap: 0.8rem; margin: 0; max-width: 300px; font-size: 0.9rem; color: var(--ct-texte-doux); }
:where(.evenement-acces__qr svg) { width: 96px; flex: none; }
:where(.evenement-plan__carte) { height: 320px; border-radius: var(--ct-rayon); border: 1px solid var(--ct-bord); }
:where(.evenement-plan:not(.evenement-plan--pret)) { display: none; }
:where(.evenement-plan__note) { color: var(--ct-texte-doux); font-size: 0.95rem; }
:where(.evenement-infos dl) { margin: 0; display: grid; gap: 0.4rem; }
:where(.evenement-infos dl > div) { display: flex; gap: 0.6rem; flex-wrap: wrap; }
:where(.evenement-infos dt) { font-weight: 700; }
:where(.evenement-infos dd) { margin: 0; }

/* ── Fiches (artisans, commerces, santé…) ──────────────────────────── */
:where(.grille-services) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.2rem; }
:where(.metier-groupe) { margin-bottom: 2rem; }
:where(.metier-groupe__titre) { font-size: 1.4rem; margin: 0 0 0.8rem; }
:where(.carte-service, .producteur-carte) { background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: var(--ct-rayon); overflow: hidden; }
:where(.carte-service__bandeau) { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; padding: 0.9rem 1.1rem; background: var(--ct-accent-clair); }
:where(.carte-service__titre) { margin: 0; font-size: 1.2rem; }
:where(.carte-service__tel) { font-weight: 700; }
:where(.carte-service__corps, .producteur-carte > :not(img, .fiche-plan)) { padding: 0 1.1rem; }
:where(.carte-service__corps) { padding: 0.9rem 1.1rem 1.1rem; }
:where(.carte-service__infos) { list-style: none; margin: 0.6rem 0 0; padding: 0; color: var(--ct-texte-doux); }
:where(.producteur-carte__banniere) { width: 100%; display: block; }
:where(.fiche-plan) { height: 220px; margin-top: 0.8rem; border-radius: 8px; }
:where(.fiche-aller) { margin: 0.6rem 0 0; font-weight: 700; }
:where(.ct-liste-fiches) { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
:where(.ct-liste-fiches li) { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ct-bord); }
:where(.ct-liste-fiches span) { color: var(--ct-texte-doux); }

/* ── Documents, élus ───────────────────────────────────────────────── */
:where(.carte-document) { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem; background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: 10px; }
:where(.carte-document__icone) { font-size: 1.5rem; }
:where(.carte-document__info) { flex: 1; }
:where(.carte-document__type) { margin: 0; font-size: 0.85rem; color: var(--ct-texte-doux); text-transform: uppercase; letter-spacing: 0.04em; }
:where(.carte-document__titre) { margin: 0; font-weight: 700; }
:where(.carte-document__btn) { font-weight: 700; white-space: nowrap; }
:where(.trombinoscope-rangee) { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
:where(.carte-elu) { width: 180px; text-align: center; }
:where(.carte-elu__photo) { aspect-ratio: 1; border-radius: var(--ct-rayon); overflow: hidden; background: var(--ct-accent-clair); display: grid; place-items: center; }
:where(.carte-elu__photo img) { width: 100%; height: 100%; object-fit: cover; }
:where(.carte-elu__initiales) { font: 650 2.2rem var(--ct-police-titres); color: var(--ct-accent-fonce); }
:where(.carte-elu__nom) { margin: 0.6rem 0 0; font-weight: 700; }
:where(.carte-elu__fonction) { margin: 0; color: var(--ct-texte-doux); font-size: 0.95rem; }

/* ── Blocs, lignes, déchetterie, randonnées ────────────────────────── */
:where(.ct-bloc) { margin: 1.5rem 0; padding: 1.3rem 1.4rem; background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: var(--ct-rayon); }
:where(.ct-bloc__titre) { margin: 0 0 0.8rem; font-size: 1.3rem; }
:where(.ct-ligne) { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--ct-bord); }
:where(.ct-ligne:last-child) { border-bottom: 0; }
:where(.ct-ligne__label) { font-weight: 600; }
:where(.ct-ligne__valeur) { color: var(--ct-texte-doux); text-align: right; }
:where(.ct-liens) { display: flex; flex-direction: column; gap: 0.5rem; }
:where(.ct-lien) { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border: 1px solid var(--ct-bord); border-radius: 10px; color: var(--ct-texte); text-decoration: none; font-weight: 600; }
:where(.ct-lien:hover) { border-color: var(--ct-accent); color: var(--ct-accent); }
:where(.ct-decheterie) { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
:where(.ct-decheterie__plan) { min-height: 240px; border-radius: 10px; }
:where(.ct-decheterie__titre) { font-size: 1.1rem; margin: 1.2rem 0 0.5rem; }
@media (max-width: 700px) { :where(.ct-decheterie) { grid-template-columns: 1fr; } }
:where(.ct-etiquettes) { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; }
:where(.ct-etiquettes li) { padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--ct-accent-clair); color: var(--ct-accent-fonce); font-size: 0.95rem; }
:where(.ct-plaquette) { display: flex; flex-direction: column; gap: 1rem; }
:where(.ct-plaquette__apercu img) { width: 100%; border-radius: 8px; display: block; }
:where(.ct-parcours__carte) { height: 360px; border-radius: 10px; }
:where(.ct-parcours__profil) { position: relative; margin: 0; }
:where(.ct-parcours__profil svg) { width: 100%; height: 200px; display: block; }
:where(.ct-parcours__aire) { fill: var(--ct-accent-clair); }
:where(.ct-parcours__courbe) { fill: none; stroke: var(--ct-accent); stroke-width: 2; }
:where(.ct-parcours__grille) { stroke: var(--ct-bord); }
:where(.ct-parcours__graduation) { fill: var(--ct-texte-doux); font-size: 12px; }
:where(.ct-parcours__repere) { stroke: var(--ct-texte); stroke-dasharray: 3 3; }
:where(.ct-parcours__bulle) { position: absolute; top: 0; padding: 0.2rem 0.5rem; background: var(--ct-texte); color: #fff; border-radius: 6px; font-size: 0.85rem; }
:where(.ct-parcours__legende) { display: flex; justify-content: space-between; color: var(--ct-texte-doux); font-size: 0.9rem; }

/* ── Démarches (serveur : app/demarches.php) ───────────────────────── */
:where(.ct-legende) { color: var(--ct-texte-doux); }
:where(.ct-badge) { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; }
:where(.ct-badge--mairie) { background: var(--ct-accent-clair); color: var(--ct-accent-fonce); }
:where(.ct-badge--ligne) { background: #e8f3ea; color: #1d5a2c; }
:where(.ct-sommaire) { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0; }
:where(.ct-sommaire a) { padding: 0.35rem 0.9rem; border: 1px solid var(--ct-bord); border-radius: 999px; background: var(--ct-surface); text-decoration: none; font-weight: 600; }
:where(.ct-demarches) { list-style: none; padding: 0; display: grid; gap: 0.8rem; }
:where(.ct-demarche) { padding: 1rem 1.2rem; background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: var(--ct-rayon); }
:where(.ct-demarche--note) { background: var(--ct-accent-clair); }
:where(.ct-demarche__tete) { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
:where(.ct-demarche__tete h3) { margin: 0; font-size: 1.15rem; }
:where(.ct-demarche__badges) { display: flex; gap: 0.3rem; }
:where(.ct-a-completer) { background: #fde2e2; color: #8a1010; padding: 0 0.3rem; border-radius: 4px; }
:where(.ct-a-revoir) { color: #b00020; }

/* ── « Vivre à … » (serveur : app/vivre.php) ───────────────────────── */
:where(.ct-reperes) { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0; }
:where(.ct-reperes li) { padding: 1rem; background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: var(--ct-rayon); }
:where(.ct-reperes strong) { display: block; font: 650 1.6rem var(--ct-police-titres); color: var(--ct-accent); }
:where(.ct-encart) { margin: 1.5rem 0; padding: 1.2rem 1.4rem; background: var(--ct-accent-clair); border-radius: var(--ct-rayon); }
:where(.ct-encart h2, .ct-encart h3) { margin-top: 0; }
:where(.ct-encart__actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
:where(.ct-logements) { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
:where(.ct-logements__infos) { display: block; color: var(--ct-texte-doux); }
:where(.ct-lien-suite, .ct-lien-vivre) { font-weight: 700; }
:where(.ct-etapes) { padding-left: 1.2rem; }

/* ── Accueil (serveur : app/accueil.php) ───────────────────────────── */
:where(.ct-section__surtitre, .ct-citation__surtitre) { display: block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ct-accent); }
:where(.ct-section__titre) { margin: 0.3rem 0 1.4rem; font-size: clamp(1.7rem, 4vw, 2.3rem); }
:where(.ct-accroche) { font: 600 1.35rem/1.4 var(--ct-police-titres); }
:where(.ct-citation) { padding: 1.4rem 1.6rem; background: var(--ct-surface); border-left: 4px solid var(--ct-accent); border-radius: 0 var(--ct-rayon) var(--ct-rayon) 0; }
:where(.ct-citation blockquote) { margin: 0.5rem 0 0; font: italic 1.15rem/1.6 var(--ct-police-titres); }
:where(.ct-carrousel) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
:where(.ct-carrousel__diapo) { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--ct-rayon); overflow: hidden; color: #fff; text-decoration: none; background: var(--ct-accent-fonce); }
:where(.ct-carrousel__diapo img) { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.ct-carrousel__titre) { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 2rem 1rem 0.8rem; background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent); color: #fff; font-size: 1.15rem; }
:where(.ct-cartes-2) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.2rem; }
:where(.ct-carte) { padding: 1.3rem 1.4rem; background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: var(--ct-rayon); }
:where(.ct-carte h3) { margin-top: 0; }
:where(.ct-carte ul) { padding-left: 1.1rem; }

/* ── Météo ─────────────────────────────────────────────────────────── */
:where(.ct-meteo) { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
:where([data-ct-meteo="temp"]) { font: 650 2rem var(--ct-police-titres); }
:where([data-ct-meteo="previsions"]) { display: flex; gap: 1rem; }
:where(.ct-meteo__jour) { display: flex; flex-direction: column; align-items: center; font-size: 0.9rem; }

/* ── Formulaires (contact, demande de partenariat) ─────────────────── */
:where(.ct-formulaire) { display: grid; gap: 1rem; max-width: 40rem; }
:where(.ct-champ) { display: grid; gap: 0.3rem; }
:where(.ct-champ label) { font-weight: 700; }
:where(.ct-champ input, .ct-champ textarea) { padding: 0.65rem 0.8rem; border: 1px solid #8a94a0; border-radius: 8px; font: inherit; background: var(--ct-surface); color: var(--ct-texte); }
:where(.ct-champ--piege) { position: absolute; left: -9999px; }
:where(.ct-formulaire__erreur) { padding: 0.8rem 1rem; border-radius: 8px; background: #fde2e2; color: #8a1010; }
:where(.ct-formulaire__succes) { padding: 1rem 1.2rem; border-radius: 8px; background: #e8f3ea; color: #1d5a2c; }
:where(.ct-facultatif) { font-weight: 400; color: var(--ct-texte-doux); }

/* ── Le ciel ───────────────────────────────────────────────────────── */
:where(.ciel-liste) { list-style: none; padding: 0; display: grid; gap: 1rem; }
:where(.ciel-passage) { display: grid; grid-template-columns: 110px 1fr; gap: 1.2rem; align-items: center; padding: 1rem; background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: var(--ct-rayon); }
:where(.ciel-passage--favorable) { border-color: var(--ct-accent); }
:where(.ciel-passage p) { margin: 0.2rem 0; }
:where(.ciel-passage__badge) { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--ct-accent); color: #fff; font-size: 0.85rem; font-weight: 700; }
:where(.ciel-passage__quand) { font-weight: 700; }
:where(.ciel-schema__horizon) { fill: #14243a; stroke: var(--ct-bord); }
:where(.ciel-schema__repere) { fill: none; stroke: rgba(255, 255, 255, .2); }
:where(.ciel-schema__point) { fill: #fff; font-size: 8px; text-anchor: middle; dominant-baseline: middle; }
:where(.ciel-schema__trace, .ciel-schema__fin) { fill: none; stroke: #ffd24a; stroke-width: 2; }
:where(.ciel-schema__debut) { fill: #ffd24a; }
:where(.ciel-suivant__titre) { margin: 2rem 0 0.8rem; font-family: var(--ct-police-texte); font-size: 1rem; font-weight: 700; }
:where(.ciel-lune) { display: flex; align-items: center; gap: 1.5rem; }
:where(.ciel-lune__dessin) { width: 110px; flex: none; }
:where(.ciel-lune__ombre) { fill: #2a3240; }
:where(.ciel-lune__eclairee) { fill: #f4ecd2; }
:where(.ciel-lune__nom) { font-weight: 700; font-size: 1.15rem; }
:where(.ciel-note) { color: var(--ct-texte-doux); font-size: 0.95rem; }

/* ── Page de cartes (serveur : app/pages-decouvrir.php) : deux par ligne sur ordinateur ── */
:where(.ct-fiches) { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin: 2rem 0; width: min(var(--ct-largeur), calc(100vw - 32px)); margin-inline: calc(50% - min(var(--ct-largeur) / 2, 50vw - 16px)); }
@media (min-width: 760px) { :where(.ct-fiches) { grid-template-columns: 1fr 1fr; } }
:where(.ct-fiche) { display: flex; flex-direction: column; background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: var(--ct-rayon); overflow: hidden; }
:where(.ct-bandeau) { position: relative; min-height: 116px; display: flex; align-items: center; background: var(--ct-bandeau-fond, #17211c); overflow: hidden; }
:where(.ct-bandeau__texte) { position: relative; z-index: 1; width: 62%; padding: 18px 22px 20px; }
:where(.ct-bandeau__texte)::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 10px; background: var(--ct-bandeau-or, #e7b24b); }
:where(.ct-bandeau__surtitre) { margin: 0 0 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ct-bandeau-or, #e7b24b); }
:where(.ct-bandeau__titre) { margin: 0; font: 400 clamp(1.25rem, 2.2vw, 1.6rem)/1.15 var(--ct-police-titres); color: #f1e9d6; }
:where(.ct-bandeau__photo) { position: absolute; inset: 0 0 0 auto; width: 55%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 42%); mask-image: linear-gradient(to right, transparent, #000 42%); }
:where(.ct-bandeau__photo img) { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.ct-fiche__corps) { flex: 1; display: flex; flex-direction: column; padding: 1rem 1.2rem 1.2rem; color: var(--ct-texte-doux); }
:where(.ct-fiche__corps p) { margin: 0 0 0.7em; }
:where(.ct-fiche__corps .ct-fiche__suite) { margin: auto 0 0; padding-top: 0.3rem; }   /* bouton « Découvrir … » en bas de la carte : alignés d'une carte à l'autre */
:where(.ct-fiche__ligne) { font-weight: 700; color: var(--ct-accent); }
:where(.ct-fiche__infos) { color: var(--ct-texte); }
:where(.ct-fiche__liens) { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-weight: 600; }
:where(.ct-fiche .fiche-plan) { height: 240px; margin-top: auto; }
:where(.ct-bandeau)::after { content: ""; position: absolute; inset: 1px; z-index: 2; border: 2px solid var(--ct-bandeau-liseret, #6a7770); border-radius: 8px; pointer-events: none; }
:where(.ct-bandeau__texte) { width: 78%; }
:where(.ct-bandeau__titre) { font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.12; text-shadow: 0 1px 8px rgba(10, 16, 12, .85); }
:where(.ct-bandeau__surtitre) { font-size: 0.74rem; letter-spacing: 0.2em; margin-bottom: 6px; }
:where(.ct-bandeau__photo) { width: 52%; }
:where(.ct-bandeau)::after { border-width: 1.5px; }

/* ── Partager cette page (bas des pages d'événement et de Découvrir, bloc_partage) ── */
:where(.ct-partage) { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--ct-bord); }
:where(.ct-partage__titre) { flex: none; margin: 0; font-size: 1rem; }
:where(.ct-partage__liens) { display: flex; flex-wrap: nowrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
:where(.ct-partage__lien) { white-space: nowrap; }
@container (max-width: 700px) { :where(.ct-partage__nom) { display: none; } :where(.ct-partage__lien) { padding: 0.55rem; } }   /* la ligne ne tient pas : les icônes seules */
@media (max-width: 640px) { :where(.ct-partage__liens li:has(.ct-partage__lien--email)) { display: none; } }   /* téléphone : pas d'e-mail */
:where(.ct-partage__lien) { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border: 1px solid var(--ct-bord); border-radius: 999px; background: var(--ct-surface); color: var(--ct-texte); font: 600 0.9rem/1.2 var(--ct-police-texte); text-decoration: none; cursor: pointer; }
:where(.ct-partage__lien:hover) { border-color: var(--ct-accent); color: var(--ct-accent); }
:where(.ct-partage__lien svg) { flex: none; }
:where(.ct-partage__lien[hidden]) { display: none; }
@media print { :where(.ct-partage) { display: none; } }

/* Bandeau d'alerte : lien vers sa page ; page d'alerte terminée */
:where(.ct-alerte__lien) { margin-left: 0.4rem; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
:where(.ct-alerte__lien:hover) { color: #fff; text-decoration-thickness: 2px; }
:where(.ct-alerte-page__fini) { font-size: 1.15rem; font-weight: 600; }

/* ── Fiches en accordéons (data-accordeon) ────────────────────────────── */
:where(.ct-accordeon) { interpolate-size: allow-keywords; }
:where(.ct-accordeon > summary) { list-style: none; cursor: pointer; }
:where(.ct-accordeon > summary)::-webkit-details-marker { display: none; }
:where(.ct-accordeon .carte-service__titre) { flex: 1; }
:where(.ct-accordeon__signe) { flex: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--ct-surface); color: var(--ct-accent); font-weight: 700; font-size: 0.9rem; }
:where(.ct-accordeon__signe)::after { content: ""; width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-0.15em) rotate(45deg); transition: transform .25s; }
:where(.ct-accordeon[open] .ct-accordeon__signe)::after { transform: translateY(0.1em) rotate(-135deg); }
:where(.ct-accordeon__fermer, .ct-accordeon[open] .ct-accordeon__voir) { display: none; }
:where(.ct-accordeon[open] .ct-accordeon__fermer) { display: inline; }
:where(.ct-accordeon[open]) { box-shadow: 0 0 0 2px var(--ct-accent); }
:where(.ct-accordeon)::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
:where(.ct-accordeon[open])::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { :where(.ct-accordeon)::details-content { transition: none; } }

/* Textes du Studio : liste numérotée, petit intertitre, souligné */
:where(.article-page, .carte-service__extrait, .ct-fiche__corps, .ct-alerte-page) :where(ol) { padding-left: 1.5em; }
:where(.article-page, .carte-service__extrait, .ct-fiche__corps, .ct-alerte-page) :where(h3) { margin: 1.4em 0 0.4em; font-size: 1.15rem; }
:where(.article-page u, .carte-service__extrait u) { text-underline-offset: 3px; }
:where(.ct-demarche) :where(ul, ol) { margin: 0.3em 0 0.6em; padding-left: 1.3em; }
:where(.ct-demarche) :where(ul, ol) { margin: 0.3em 0 0.6em; padding-left: 1.3em; }

/* Galerie (pages « galerie » de Découvrir) : grille d'images avec légende ; la visionneuse du kit les ouvre en grand */
:where(.ct-galerie) { width: min(var(--ct-largeur), calc(100vw - 32px)); margin-inline: calc(50% - min(var(--ct-largeur) / 2, 50vw - 16px)); }
:where(.ct-galerie__section) { margin: 2.5rem 0 0; }
:where(.ct-galerie__section h2) { margin: 0 0 0.4rem; }
:where(.ct-galerie__grille) { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.6rem 1.4rem; }
:where(.ct-galerie__image) { margin: 0; display: flex; flex-direction: column; height: 100%; background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: var(--ct-rayon); overflow: hidden; }
:where(.ct-galerie__ouvrir) { display: block; aspect-ratio: 3 / 2; background: #efe9e1; cursor: zoom-in; }
:where(.ct-galerie__ouvrir img) { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .25s; }
:where(.ct-galerie__ouvrir:hover img) { transform: scale(1.03); }
:where(.ct-galerie__ouvrir:focus-visible) { outline: 3px solid var(--ct-accent); outline-offset: -3px; }
:where(.ct-galerie, .ct-visionneuse) :where(p) { font-size: inherit; line-height: inherit; }
:where(.ct-galerie__image figcaption) { padding: 0.8rem 1rem 1rem; font-size: 0.92rem; line-height: 1.5; color: var(--ct-texte-doux); }
:where(.ct-galerie__titre) { margin: 0; font-weight: 700; font-size: 1rem; color: var(--ct-texte); }
:where(.ct-galerie__date) { margin: 0.1rem 0 0; font-weight: 600; color: var(--ct-accent); }
:where(.ct-galerie__texte p) { margin: 0.45rem 0 0; }
:where(.ct-galerie__provenance) { margin: 0.45rem 0 0; font-size: 0.82rem; font-style: italic; }
:where(.ct-visionneuse) { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 10, 8, .97); color: #f3efe9; }
:where(.ct-visionneuse__cadre) { overflow-y: auto; }
:where(.ct-visionneuse)::backdrop { background: rgba(12, 10, 8, .6); }
:where(.ct-visionneuse__cadre) { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; height: 100%; padding: 3.5rem 4.5rem 1.5rem; }
:where(.ct-visionneuse__figure) { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; max-width: 100%; max-height: 100%; min-height: 0; }
:where(.ct-visionneuse__figure img) { max-width: 100%; max-height: calc(100vh - 13rem); object-fit: contain; display: block; }
:where(.ct-visionneuse__legende) { max-width: 46rem; text-align: center; font-size: 0.95rem; line-height: 1.5; color: #d9d2c8; }
:where(.ct-visionneuse__legende p) { margin: 0.2rem 0 0; }
:where(.ct-visionneuse .ct-galerie__titre) { color: #fff; font-size: 1.1rem; }
:where(.ct-visionneuse .ct-galerie__date) { color: #f0c79a; }
:where(.ct-visionneuse__fermer, .ct-visionneuse__fleche) { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 400 2rem/1 sans-serif; cursor: pointer; }
:where(.ct-visionneuse__fermer:hover, .ct-visionneuse__fleche:hover) { background: rgba(255, 255, 255, .25); }
:where(.ct-visionneuse__fermer:focus-visible, .ct-visionneuse__fleche:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; }
:where(.ct-visionneuse__fermer) { top: 0.8rem; right: 0.8rem; }
:where(.ct-visionneuse__fleche) { top: 50%; transform: translateY(-50%); font-size: 2.6rem; }
:where(.ct-visionneuse__fleche--avant) { left: 0.8rem; }
:where(.ct-visionneuse__fleche--apres) { right: 0.8rem; }
:where(.ct-visionneuse__compte) { position: absolute; top: 1.4rem; left: 1.2rem; margin: 0; font-size: 0.9rem; color: #bdb5aa; }
@media (max-width: 640px) {
  :where(.ct-visionneuse__cadre) { padding: 3.5rem 0.75rem 5rem; }
  :where(.ct-visionneuse__fleche) { top: auto; bottom: 0.9rem; transform: none; }
  :where(.ct-visionneuse__fleche--avant) { left: calc(50% - 3.6rem); }
  :where(.ct-visionneuse__fleche--apres) { right: calc(50% - 3.6rem); }
}