/* v2 — catalogue. Langage visuel du site conservé ; objectif : des pages qui se balaient.
   Jetons de bleu de la suite (absents de style.css, valeurs du modèle approuvé
   modeles/maville2-autonome.html) : déclarés ici une fois, utilisés partout en var(). */
/* jetons communs : voir assets/v2/jetons.css */

/* ---- Entête ---- */
.cat-lead { margin-top: 14px; max-width: 720px; }

/* ---- Sommaire ancré : il reste sous la barre de navigation pendant le défilement. ---- */
.cat-sommaire {
  position: sticky; top: 64px; z-index: 60;
  display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: auto;
  margin: 28px -24px 0; padding: 12px 24px;
  background: var(--blanc); border-bottom: 1px solid var(--gris-border);
  scrollbar-width: thin;
}
.cat-sommaire a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--gris-texte);
  text-decoration: none; white-space: nowrap;
  padding: 7px 14px; border: 1px solid var(--gris-border); border-radius: 100px;
  transition: color .15s, border-color .15s, background .15s;
}
.cat-sommaire a:hover { color: var(--bleu); border-color: var(--bleu); background: var(--bleu-pale); }
.cat-sommaire a:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.cat-sommaire-nb {
  font-size: 11.5px; font-weight: 700; color: var(--bleu);
  background: var(--bleu-pale); border-radius: 100px; padding: 1px 7px;
}
.cat-sommaire-mvc { color: var(--vert-fonce); border-color: var(--vert); }
.cat-sommaire-mvc:hover { color: var(--vert-fonce); border-color: var(--vert-fonce); background: var(--vert-clair); }

/* ---- Un domaine = un jalon franc, puis sa grille. ---- */
.cat-domaine { margin-top: 56px; scroll-margin-top: 132px; }
.cat-jalon {
  display: flex; align-items: center; gap: 20px;
  background: var(--bleu-nuit); color: var(--blanc);
  border-radius: var(--radius); padding: 20px 26px;
}
.cat-jalon-num {
  font-size: 28px; font-weight: 800; letter-spacing: -1px;
  color: var(--bleu-pale); opacity: .55; font-variant-numeric: tabular-nums;
}
.cat-jalon-titre h2 { font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -.5px; color: var(--blanc); }
.cat-jalon-compte { font-size: 13px; font-weight: 600; color: var(--bleu-pale); margin-top: 2px; }
.cat-recit { margin-top: 16px; max-width: 780px; font-size: 14.5px; color: var(--gris-texte); }

/* ---- La grille : deux ou trois colonnes selon la largeur, une seule à 360 px. ---- */
.cat-grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin-top: 22px; align-items: start;
}
@media (max-width: 1020px) { .cat-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .cat-grille { grid-template-columns: 1fr; } }

/* ---- La carte : l'essentiel visible, le reste replié. ---- */
.carte-module {
  background: var(--blanc); border: 1px solid var(--gris-border);
  border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.carte-module-mvc { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }

/* La vignette : une bande d'illustration en tête de carte, hauteur fixe pour ne pas
   rallonger la page. La capture en grand reste dans le repli ; ici elle illustre. */
.carte-module-vignette {
  width: 100%; height: 132px; object-fit: cover; object-position: center top;
  display: block;
  border: 1px solid var(--gris-border); border-radius: var(--radius);
  background: var(--bleu-pale);
  margin-bottom: 4px;
}
/* Capture de téléphone (portrait) : le cadrage haut montre l'écran d'accueil. */
.carte-module-vignette-portrait { object-position: top; }
/* Modules sans capture : un aplat aux jetons portant l'icône du domaine — sobre
   et manifestement non photographique, aucune fausse capture. */
.carte-module-vignette-substitut {
  display: flex; align-items: center; justify-content: center;
  height: 132px; border: 1px solid var(--acc-filet-clair);
  background: var(--bleu-pale); color: var(--bleu);
}
.carte-module-vignette-substitut span { font-size: 34px; line-height: 1; }
.carte-module-tete {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px 16px; flex-wrap: wrap;
}
.carte-module-tete h3 { font-size: 17.5px; letter-spacing: -.2px; }
.carte-module-prix {
  font-size: 13.5px; font-weight: 600; color: var(--vert-fonce);
  font-variant-numeric: tabular-nums;
}
.carte-module-prix em { font-style: normal; font-weight: 400; color: var(--gris-texte); }
.carte-module-pitch { font-size: 14px; color: var(--gris-texte); line-height: 1.55; }

/* Le détail s'ouvre à la demande : <details> natif, accessible au clavier. */
.carte-module-detail { margin-top: 6px; border-top: 1px dashed var(--gris-border); padding-top: 12px; }
.carte-module-detail summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--vert-fonce);
}
.carte-module-detail summary::-webkit-details-marker { display: none; }
.carte-module-detail summary::before {
  content: "+"; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--vert-pale); color: var(--vert-fonce);
  font-weight: 700; line-height: 1; transition: transform .18s;
}
.carte-module-detail[open] summary::before { transform: rotate(45deg); }
.carte-module-detail summary:hover { text-decoration: underline; }
.carte-module-detail summary:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; border-radius: 4px; }
.carte-module-detail .module-fiche-liste { margin-top: 14px; grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) { .carte-module-detail summary::before { transition: none; } }

/* ---- L'encart vers l'espace Ma Ville Citoyenne (le vert porte l'application citoyenne). ---- */
.cat-encart-mvc {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 28px; flex-wrap: wrap;
}
.cat-encart-mvc-etiquette {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--vert-clair);
  margin-bottom: 10px;
}
.cat-encart-mvc h3 { color: var(--blanc); font-size: 20px; }
.cat-encart-mvc p { color: var(--vert-clair); font-size: 14.5px; margin-top: 8px; max-width: 560px; }

.cat-actions { margin-top: 48px; display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 768px) {
  /* La section passe à 20 px de marge : le sommaire suit pour rester bord à bord. */
  .cat-sommaire { margin: 24px -20px 0; padding: 10px 20px; }
}
@media (max-width: 680px) {
  .cat-jalon { padding: 16px 18px; gap: 14px; }
  .cat-domaine { margin-top: 44px; scroll-margin-top: 126px; }
}

/* Substituts : icône vectorielle plutôt qu'un emoji — rendu identique d'un système à l'autre. */
.carte-module-vignette-substitut svg { width: 34px; height: 34px; color: var(--bleu); opacity: .55; }